/* Services story (sticky stage) · our work · pricing */

/* ——— services story ——— */
.story{background:var(--night-2);overflow:clip}
.story::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 85% 20%,rgba(110,140,90,.16),transparent 70%),radial-gradient(50% 40% at 0% 90%,rgba(36,81,58,.3),transparent 70%)}
.story-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(40px,6vw,96px)}
.step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding-block:40px;transition:opacity var(--t-slow) var(--e-out)}
.js .step{opacity:.28}
.js .step.active{opacity:1}
.step-no{display:flex;align-items:center;gap:12px;font:700 .8rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-bottom:22px}
.step-no::before{content:"";width:34px;height:2px;background:currentColor;transform-origin:left;transform:scaleX(.4);transition:transform var(--t-slow) var(--e-out)}
.step.active .step-no::before{transform:none}
.step h3{font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.02;letter-spacing:-.03em;font-weight:800}
.step h3 em{display:block;color:var(--sage);font-weight:400}
.step>p{margin-top:22px;font-size:1.1rem;color:var(--cream-2);max-width:32em}
.ticks{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:34px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0F0C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.on-light .ticks li::before,.plan .ticks li::before{background-color:var(--mist);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324513A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.step .link{color:var(--sage);align-self:flex-start}

.stage-wrap{position:relative}
.stage{position:sticky;top:calc(var(--nav-h) + 5vh);height:min(78vh,660px);border-radius:var(--r-xl);overflow:hidden;container-type:inline-size;
  background:radial-gradient(90% 70% at 50% 40%,#1D3527,#0C1510 75%);box-shadow:inset 0 0 0 1px rgba(232,237,227,.08),var(--shadow-lg)}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rings i{position:absolute;border-radius:50%;border:1px dashed rgba(167,188,145,.16);animation:spin 90s linear infinite}
.rings i:nth-child(1){width:60cqw;height:60cqw}
.rings i:nth-child(2){width:92cqw;height:92cqw;animation-direction:reverse;animation-duration:120s}
.rings i:nth-child(3){width:128cqw;height:128cqw;border-style:solid;border-color:rgba(167,188,145,.07)}
.stage-label{position:absolute;left:24px;top:22px;z-index:5;display:flex;gap:8px}
.stage-label span{padding:8px 14px;border-radius:99px;font:700 .74rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-3);
  box-shadow:inset 0 0 0 1px rgba(232,237,227,.14);transition:background-color var(--t-base),color var(--t-base)}
.stage[data-active="0"] .stage-label span:nth-child(1),.stage[data-active="1"] .stage-label span:nth-child(2),.stage[data-active="2"] .stage-label span:nth-child(3){background:var(--sage);color:var(--night);box-shadow:none}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity 480ms var(--e-out),transform 800ms var(--e-out);pointer-events:none}
.stage[data-active="0"] .s-web,.stage[data-active="1"] .s-google,.stage[data-active="2"] .s-meta{opacity:1;transform:none}

/* scene: website */
.sw{position:relative;width:80%}
.sw .shell{border-radius:2cqw;background:#fff;overflow:hidden;box-shadow:var(--shadow-lg)}
.sw .chrome{height:4.6cqw}
.sw .screen{aspect-ratio:16/10}
.sw .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;animation:cycle3 12s var(--e-inout) infinite}
.sw .screen img:nth-child(2){animation-delay:4s}.sw .screen img:nth-child(3){animation-delay:8s}
@keyframes cycle3{0%{opacity:0;transform:scale(1.04)}6%,33%{opacity:1;transform:none}40%,100%{opacity:0}}
.sw-phone{position:absolute;right:-6%;bottom:-12%;width:25%;padding:.9cqw;border-radius:4cqw;background:#050806;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(232,237,227,.14)}
.sw-phone img{border-radius:3.2cqw;aspect-ratio:390/844;object-fit:cover;object-position:top}
.tagf{position:absolute;display:flex;align-items:center;gap:1.2cqw;padding:1.3cqw 2cqw;border-radius:99px;background:rgba(17,24,20,.92);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,237,227,.14);font:700 1.9cqw/1 var(--f-body);color:var(--cream);white-space:nowrap;
  opacity:0;transform:scale(.7);transition:opacity var(--t-base),transform var(--t-slow) var(--e-back)}
.tagf svg{width:2.4cqw;height:2.4cqw;color:var(--sage)}
.stage[data-active="0"] .s-web .tagf{opacity:1;transform:none}
.s-web .tagf:nth-of-type(1){left:4%;top:14%;transition-delay:.35s}
.s-web .tagf:nth-of-type(2){left:-2%;bottom:24%;transition-delay:.5s}
.s-web .tagf:nth-of-type(3){right:3%;top:20%;transition-delay:.65s}

/* scene: google */
.sg{position:relative;width:78%;background:#fff;border-radius:2.6cqw;padding:3.4cqw;box-shadow:var(--shadow-lg);color:#202124}
.sg .gsearch{height:6.4cqw;font-size:2.3cqw;padding:0 2.6cqw}
.sg .gsearch svg{width:2.6cqw;height:2.6cqw}
.sg .caret{height:2.9cqw}
.sg-results{display:grid;gap:2.6cqw;margin-top:3.2cqw}
.sg-ad{position:relative;padding:2.4cqw;border-radius:1.8cqw;box-shadow:0 0 0 2px var(--sage);background:#F7FAF3;
  opacity:0;transform:translateY(3cqw);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-back)}
.sg.found .sg-ad,.no-js .sg-ad{opacity:1;transform:none}
.hint .touch{display:none}
@media (hover:none){ .hint .mouse{display:none} .hint .touch{display:inline} }
.sg-ad .gad{margin:0}
.sg-ad .gad h4{font-size:2.8cqw}
.sg-ad .gad p,.sg-ad .gad .site{font-size:1.85cqw}
.sg-ad .gad .sp{font-size:1.7cqw}
.sg-ad .gad .links span{font-size:1.7cqw;padding:1cqw 1.8cqw}
.sg-ad .you{position:absolute;right:-2cqw;top:-2.6cqw;padding:1cqw 1.8cqw;border-radius:99px;background:var(--forest);color:#fff;font:700 1.6cqw/1 var(--f-body);rotate:4deg}
.sg-org{display:grid;gap:1.2cqw;padding-inline:1cqw;opacity:.55}
.sg-org i{display:block;height:1.6cqw;border-radius:1cqw;background:#E3E5E8}
.sg-org i:nth-child(1){width:34%}.sg-org i:nth-child(2){width:70%;height:2.2cqw;background:#D5DAE8}.sg-org i:nth-child(3){width:92%}
.cursor{position:absolute;width:4.2cqw;left:62%;top:106%;z-index:4;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.sg.found .cursor{animation:cursorGo 2.2s var(--e-out) .7s forwards}
@keyframes cursorGo{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}75%{transform:translate(-2cqw,-17cqw)}85%{transform:translate(-2cqw,-17cqw) scale(.85)}100%{opacity:1;transform:translate(-2cqw,-17cqw) scale(1)}}
.ringing{position:absolute;right:-5%;bottom:-9%;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 2.6cqw 1.8cqw 1.8cqw;border-radius:2.4cqw;
  background:var(--sage);color:var(--night);box-shadow:var(--shadow-lg);font:700 2.1cqw/1.2 var(--f-body);opacity:0;transform:scale(.6) rotate(-6deg);
  transition:opacity var(--t-base),transform var(--t-slow) var(--e-back)}
.ringing small{display:block;font-weight:600;font-size:1.6cqw;opacity:.75}
.ringing .ic{width:5cqw;height:5cqw;border-radius:50%;background:var(--night);color:var(--sage);display:grid;place-items:center}
.ringing .ic svg{width:2.6cqw;height:2.6cqw;animation:ring 1.4s ease-in-out infinite}
.sg.called .ringing{opacity:1;transform:none}

/* scene: meta */
.sm{position:relative;width:42%}
.sm .body{padding:1.2cqw;border-radius:6cqw;background:#050806;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(232,237,227,.16)}
.sm .scr{position:relative;border-radius:4.8cqw;background:#F0F2F5;aspect-ratio:9/18.5;overflow:hidden;padding:5cqw 2cqw 2cqw}
.feed-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2cqw}
.feed-top i{display:block;height:2cqw;width:40%;border-radius:1cqw;background:#D8DBDF}
.feed-top b{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#D8DBDF}
.post{background:#fff;border-radius:2cqw;overflow:hidden;margin-bottom:2cqw}
.post.ghost{height:10cqw;opacity:.7}
.post.ghost::before{content:"";display:block;margin:2cqw;height:2cqw;width:50%;border-radius:1cqw;background:#E4E6EA}
.sm .mhead{padding:1.4cqw}
.sm .mhead .av{width:4.4cqw;height:4.4cqw}
.sm .mhead b{font-size:1.9cqw}.sm .mhead small{font-size:1.5cqw}
.sm .mmedia span{font-size:2.8cqw}
.sm .mfoot{padding:1.4cqw}
.sm .mfoot .heart{width:3.6cqw;height:3.6cqw;animation:none}
.stage[data-active="2"] .sm .mfoot .heart{animation:pop 2.6s var(--e-back) .8s infinite}
.sm .mfoot .cta{font-size:1.7cqw;padding:1.2cqw 2cqw;background:var(--forest);color:#fff}
.sheet{position:absolute;left:0;right:0;bottom:0;padding:3cqw 2.6cqw 3.4cqw;background:#fff;border-radius:3.4cqw 3.4cqw 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);
  transform:translateY(105%);transition:transform 700ms var(--e-out)}
.sheet b{display:block;font:700 2.2cqw/1.2 var(--f-body);color:#1F2A22;margin-bottom:1.6cqw}
.sheet i{display:flex;align-items:center;height:4.6cqw;border-radius:1.2cqw;background:#F0F2F5;margin-bottom:1.2cqw;padding:0 1.6cqw;font:500 1.6cqw/1 var(--f-body);color:#444;font-style:normal}
.sheet .sent{display:flex;align-items:center;justify-content:center;gap:1cqw;height:5cqw;border-radius:1.2cqw;background:var(--forest);color:#fff;font:700 1.8cqw/1 var(--f-body)}
.sheet .sent svg{width:2.4cqw;height:2.4cqw}
.sm.lead .sheet{transform:none}
.aud{position:absolute;z-index:3;display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 2.2cqw;border-radius:99px;background:rgba(17,24,20,.92);
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,237,227,.14);font:700 1.9cqw/1 var(--f-body);color:var(--cream);white-space:nowrap;
  opacity:0;transform:translateX(-3cqw);transition:opacity var(--t-base),transform var(--t-slow) var(--e-out)}
.aud svg{width:2.4cqw;height:2.4cqw;color:var(--sage)}
.stage[data-active="2"] .aud{opacity:1;transform:none}
.aud.a1{left:6%;top:24%;transition-delay:.3s}.aud.a2{left:4%;top:44%;transition-delay:.45s}.aud.a3{right:5%;bottom:22%;transition-delay:.6s;transform:translateX(3cqw)}

@media (max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .stage-wrap{position:sticky;top:calc(var(--nav-h) + 8px);z-index:3;order:-1;padding-bottom:18px}
  .stage-wrap::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:44px;background:linear-gradient(var(--night-2),transparent);pointer-events:none}
  .stage-wrap{background:var(--night-2)}
  .stage{position:relative;top:0;height:clamp(250px,68vw,380px);border-radius:var(--r-lg)}
  .step{min-height:78vh;padding-block:30px}
  .step h3{font-size:clamp(1.8rem,7vw,2.4rem)}
  .stage-label{left:14px;top:14px}
  .stage-label span{padding:6px 10px;font-size:.66rem}
  .scene{padding-top:44px}
  .sm{width:27%}
  .ringing{right:2%;bottom:3%}
}

/* ——— our work ——— */
.work{background:var(--paper);overflow:hidden}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
.frame{margin:0}
.frame-shell{border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base)}
.frame:hover .frame-shell{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.frame .chrome{height:30px;padding:0 12px;gap:6px}
.frame .chrome i{width:9px;height:9px}
.frame .chrome .url{height:18px;font-size:.68rem;padding:0 10px;margin-left:10px;gap:6px}
.frame .chrome .url svg{width:10px;height:10px}
.frame-screen{position:relative;aspect-ratio:16/11;overflow:hidden;background:#EEF0EA}
.frame-screen img{width:100%;height:auto;transition:transform 1.2s var(--e-out)}
.frame:hover .frame-screen img{transform:translateY(-69%);transition:transform 7s cubic-bezier(.45,.05,.55,.95)}
@media (hover:none){ .frame.in .frame-screen img{animation:scrollShot 16s var(--e-inout) 1s infinite alternate} }
.frame figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;padding-inline:4px}
.frame figcaption b{font:700 1.08rem/1.2 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.frame figcaption span{font-size:.82rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.hint{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:1.5rem;color:var(--forest);rotate:-2deg}
.wall{position:relative;margin-top:clamp(70px,9vw,120px);perspective:1800px;height:clamp(300px,34vw,470px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wall-inner{position:absolute;left:-10%;right:-10%;top:0;display:grid;gap:22px;transform:rotateX(20deg) rotateZ(-5deg) translateY(-4%);transform-style:preserve-3d}
.wrow{display:flex;overflow:visible}
.wtrack{display:flex;gap:22px;width:max-content;flex:none;animation:marquee 90s linear infinite;padding-right:22px}
.wrow:nth-child(2) .wtrack{animation-direction:reverse;animation-duration:110s}
.wall:hover .wtrack{animation-play-state:paused}
.wtrack img{width:clamp(220px,24vw,340px);aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;box-shadow:0 20px 40px -18px rgba(19,26,21,.45);
  transition:transform var(--t-base) var(--e-out)}
.wtrack img:hover{transform:translateY(-8px) scale(1.04)}
.disclaimer{display:flex;gap:12px;align-items:flex-start;margin-top:34px;font-size:.92rem;color:var(--ink-3);max-width:60rem}
.disclaimer svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--moss)}
@media (max-width:900px){ .frames{grid-template-columns:1fr;max-width:520px;margin-inline:auto} }

/* ——— pricing ——— */
.pricing{background:linear-gradient(var(--paper),#E9EEE1)}
.plans{display:grid;grid-template-columns:1.08fr 1fr 1fr;gap:clamp(16px,2vw,26px);align-items:stretch;perspective:1400px}
.plan{position:relative;display:flex;flex-direction:column;padding:34px 30px 30px;border-radius:var(--r-lg);background:var(--card);
  box-shadow:0 0 0 1px var(--line),var(--shadow);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 500ms var(--e-out);overflow:hidden}
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t-base);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(167,188,145,.22),transparent 60%)}
.plan:hover::after{opacity:1}
.plan.feature{background:var(--forest-deep);color:var(--cream-2);box-shadow:var(--shadow-lg)}
.plan.feature h3,.plan.feature .num,.plan.feature .cur{color:var(--cream)}
.plan.feature .ticks li::before{background-color:var(--sage);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0F0C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.plan.feature .terms{color:var(--sage);border-color:rgba(232,237,227,.12)}
.plan.feature::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--bar-1-lit) 0 33.3%,var(--bar-2-lit) 0 66.6%,var(--bar-3-lit) 0)}
.plan .tag{position:absolute;top:26px;right:24px;padding:7px 12px;border-radius:99px;background:var(--sage);color:var(--night);font:800 .7rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.plan h3{font-size:1.7rem}
.plan .for{margin:.4em 0 0;font-size:.98rem}
.price{display:flex;align-items:baseline;gap:4px;margin-top:26px;color:var(--ink)}
.price .from{align-self:center;margin-right:6px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.plan.feature .price .from{color:var(--cream-3)}
.price .cur{font:700 1.8rem/1 var(--f-display);align-self:flex-start;margin-top:.5rem}
.price .num{font:800 clamp(3.6rem,6vw,4.8rem)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .per{font-weight:700;color:var(--ink-3)}
.plan.feature .price .per{color:var(--cream-3)}
.terms{margin:14px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--forest);line-height:1.5}
.plan .ticks{margin:24px 0 30px;font-size:.97rem}
.plan .btn{margin-top:auto;width:100%}
.plan .more{margin:14px 0 0;text-align:center;font-size:.84rem;color:var(--ink-3)}
.money{display:flex;gap:18px;align-items:center;margin-top:34px;padding:24px 28px;border-radius:var(--r);background:var(--card);box-shadow:0 0 0 1px var(--line)}
.money .ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--mist);color:var(--forest)}
.money .ic svg{width:26px;height:26px}
.money p{margin:0;color:var(--ink-2)}
.money b{color:var(--ink)}
@media (max-width:1000px){ .plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto} }
@media (max-width:600px){ .money{flex-direction:column;align-items:flex-start} .plan{padding:30px 22px 24px} }