/* Websites: scrollytelling browser */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:30px;align-items:start}
.story-mock{position:sticky;top:96px;min-height:520px;display:grid;place-items:center}
.story-mock .aurora{width:120%}
.story-steps{display:grid} .story-step{min-height:52vh;display:grid;align-content:center;padding:20px 0;opacity:.28;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateX(12px)}
.story-step.on{opacity:1;transform:none} .story-step .n{font:600 .8rem var(--head);color:var(--g);letter-spacing:.1em} .story-step h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:8px 0 10px}
.bmock{position:relative;width:100%;max-width:520px;border:1px solid var(--line);border-radius:16px;background:#0a110d;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5);z-index:2;font-size:.78rem;transition:border-color .4s,box-shadow .4s}
.bbar{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)} .bbar i{width:8px;height:8px;border-radius:50%;background:#2a3530}
.addr{margin-left:10px;flex:1;padding:6px 10px;border-radius:8px;background:#0f1a14;color:var(--mute);display:flex;gap:6px;align-items:center;transition:all .4s} .lock{font-style:normal;opacity:.5;transition:all .4s}
.bnav{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)} .blogo{width:26px;height:26px;border-radius:7px;background:var(--g);color:#03130a;display:grid;place-items:center;font:700 .9rem var(--head);transition:transform .4s var(--ease)}
.btog{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .btog i{font-style:normal;padding:4px 9px;font-size:.68rem;color:var(--mute);transition:all .4s} .btog .on{background:rgba(34,255,136,.15);color:var(--g)}
.bbook{padding:6px 12px;border-radius:999px;background:var(--g);color:#03130a;font-weight:700;font-size:.7rem;transition:transform .3s}
.bhero{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;padding:14px;align-items:center} .bimg{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#16302a,#0e1f1a);position:relative;overflow:hidden} .bimg::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(0deg,#0a110d,transparent)}
.bmock .sk{height:8px;border-radius:4px;background:#1a2a22;margin:6px 0;animation:none} .bmock .sw{display:flex;gap:6px;margin-top:8px} .bmock .sw i{width:14px;height:14px;border-radius:50%;transition:transform .4s var(--ease)}
.binfo{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 14px} .bcell{padding:10px;border:1px solid var(--line);border-radius:10px;color:var(--mute);font-size:.68rem;transition:all .4s} .bmap{height:36px;border-radius:6px;margin-top:6px;background:repeating-linear-gradient(45deg,#14231c 0 4px,#0f1a14 4px 8px)} .stars{color:#e39b2e;letter-spacing:2px;margin-top:6px}
.bphone,.bgoogle,.bstatus{position:absolute;opacity:0;transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.bphone{right:14px;bottom:14px;width:110px;height:190px;border-radius:18px;background:#0a0f0c;border:2px solid #26332c;padding:16px 8px 8px;transform:translateY(20px);box-shadow:0 20px 40px rgba(0,0,0,.5)} .bphone .bbook{display:block;text-align:center}
.bgoogle{left:14px;right:14px;bottom:14px;padding:12px;border-radius:12px;background:#fff;color:#1a1a1a;transform:translateY(20px)} .bgoogle b{font:700 1rem var(--head);color:#4285f4} .gres span{display:block;color:#1a0dab;font-size:.8rem;margin-top:6px} .bgoogle .sk{background:#e5e5e5}
.bstatus{left:50%;top:50%;transform:translate(-50%,-40%);display:flex;gap:8px;align-items:center;padding:12px 18px;border-radius:999px;background:rgba(18,28,23,.96);border:1px solid var(--line2);font-weight:600;color:var(--g)} .bstatus svg{width:18px;height:18px;stroke:var(--g);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.story[data-step="0"] .btog{box-shadow:0 0 0 3px rgba(34,255,136,.35)}
.story[data-step="1"] .bphone{opacity:1;transform:none}
.story[data-step="2"] .blogo{transform:scale(1.25)} .story[data-step="2"] .sw i{transform:scale(1.3)}
.story[data-step="3"] .bcell{border-color:var(--line2);color:var(--ink);background:rgba(34,255,136,.05)}
.story[data-step="4"] .bbook{animation:glowp 1.6s ease-in-out infinite;transform:scale(1.1)}
.story[data-step="5"] .bgoogle{opacity:1;transform:none}
.story[data-step="6"] .addr{background:rgba(34,255,136,.12);color:var(--g);box-shadow:0 0 0 2px rgba(34,255,136,.4)}
.story[data-step="7"] .lock{opacity:1;filter:drop-shadow(0 0 6px var(--g))} .story[data-step="7"] .bmock{border-color:var(--line2);box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 60px rgba(34,255,136,.25)}
.story[data-step="8"] .bstatus{opacity:1;transform:translate(-50%,-50%)}

/* Websites: paths */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.pd{display:flex;align-items:center;gap:10px;margin-bottom:20px} .plink{flex:1;height:2px;background:var(--g);box-shadow:0 0 10px var(--g);position:relative} .plink::after{content:"";position:absolute;right:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--g)}
.pn{display:grid;justify-items:center;gap:4px;padding:12px 10px;border-radius:14px;border:1px dashed var(--line);color:var(--mute);font-size:.8rem;min-width:96px;text-align:center} .pn i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line)} .pn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pn small{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase} .pn.add{border-style:solid;border-color:var(--line2);color:var(--g);background:rgba(34,255,136,.07);box-shadow:0 0 24px rgba(34,255,136,.15)} .pn.add i{border-color:var(--g);background:var(--g);color:#03130a}

/* Who: ribbon + rows */
.ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.rib{padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)} .rib .ico{width:42px;height:42px;margin-bottom:12px} .rib .ico svg{width:22px;height:22px} .rib p{margin:0;font-size:.92rem;color:#c7d3cc}
.trows{display:grid;gap:14px;margin-top:10px}
.trow{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:start;padding:30px;border-top:1px solid var(--line)} .trow:first-child{border-top:0}
.trow-h{display:grid;grid-template-columns:34px 52px 1fr;gap:16px;align-items:start} .trow-h .n{font:600 .8rem var(--head);color:var(--g);padding-top:16px} .trow-h .ico{margin:0} .trow h3{font-size:1.4rem}
.tgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px} .tgrid li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:.92rem;color:#c7d3cc;transition:border-color .3s} .tgrid li:hover{border-color:var(--line2)}
.tgrid svg{width:16px;height:16px;stroke:var(--g);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}

/* Demo: app tour */
.tour{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.tcard-t{padding:22px} .tscreen{height:190px;border-radius:16px;background:linear-gradient(180deg,#0f1a14,#08100c);border:1px solid var(--line);padding:14px;margin-bottom:18px;overflow:hidden;font-size:.74rem;position:relative}
.mcal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%} .mcal b{display:block;text-align:center;color:var(--ink);font-size:.7rem;margin-bottom:6px} .mcal i{display:block;border-radius:8px;padding:6px;font-style:normal;color:#04140b;font-weight:600;font-size:.66rem} .mcal .e1{background:var(--g)} .mcal .e2{background:#8dffc0} .mcal .e3{background:#00c060;color:#eafff3}
.mappt{padding:12px;border:1px solid var(--line2);border-radius:12px;background:rgba(34,255,136,.06)} .mappt b{display:block;font-family:var(--head);font-size:.9rem} .mappt small{color:var(--mute)} .mappt .acts span{width:34px;text-align:center}
.mlist div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)} .mlist b{font-size:.78rem} .mlist small{color:var(--mute)}
.mset .rule{font-size:.72rem;padding:5px 0} .qr.small{width:50px;height:50px;border-width:3px;margin:8px 0 0 auto;background-size:12px 12px}
.langs.big{height:100%;align-content:center;justify-content:center} .langs.big span{font-size:1rem;padding:12px 20px}

@media (max-width:980px){.story{grid-template-columns:1fr} .story-mock{position:relative;top:0;min-height:0} .story-step{min-height:0;padding:22px 0;opacity:1;transform:none} .paths,.tour{grid-template-columns:1fr} .ribbon{grid-template-columns:1fr 1fr} .trow{grid-template-columns:1fr;padding:22px 0} .tgrid{grid-template-columns:1fr}}
@media (max-width:560px){.ribbon{grid-template-columns:1fr}}

/* Websites: one mock per feature */
.sfeats{display:grid;gap:clamp(20px,3vw,40px);margin-top:34px}
.srow{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(20px,3vw,36px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--card2),var(--card));position:relative;overflow:hidden}
.srow:nth-child(even) .smock{order:2}
.smock{position:relative;display:grid;place-items:center;min-height:300px} .smock .aurora{width:110%;opacity:.5}
.stext .n{font:600 .8rem var(--head);color:var(--g);letter-spacing:.1em} .stext h3{font-size:clamp(1.3rem,2.2vw,1.8rem);margin:8px 0 10px}
.smock .bmock{max-width:420px;width:100%} .bmock .bnav{padding:12px 14px} .btog.swap i:first-child{animation:tog 4s ease-in-out infinite} .btog.swap i:last-child{animation:tog 4s ease-in-out infinite 2s}
@keyframes tog{0%,45%{background:transparent;color:var(--mute)}50%,95%{background:rgba(34,255,136,.15);color:var(--g)}}
.bphone.big{position:static;opacity:1;transform:none;width:190px;height:340px;padding:22px 10px 10px;animation:float 8s ease-in-out infinite;z-index:2} .bphone.big .bnav{padding:6px 0;border:0} .bphone.big .blogo{width:20px;height:20px;font-size:.7rem}
.brandcard{position:relative;z-index:2;width:100%;max-width:340px;padding:26px;border:1px solid var(--line2);border-radius:20px;background:#0a110d;display:grid;gap:14px;justify-items:center;box-shadow:0 0 50px rgba(34,255,136,.12)}
.blogo.xl{width:72px;height:72px;border-radius:20px;font-size:2rem;animation:hue 8s linear infinite} .sw.big i{width:26px;height:26px;animation:swpop 2.4s var(--ease) infinite} .sw.big i:nth-child(2){animation-delay:.3s}.sw.big i:nth-child(3){animation-delay:.6s}.sw.big i:nth-child(4){animation-delay:.9s}
@keyframes swpop{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}} @keyframes hue{0%{background:#22ff88}33%{background:#e39b2e}66%{background:#7c3aed}100%{background:#22ff88}}
.bimg.strip{width:100%;aspect-ratio:6/1;border-radius:8px}
.binfo.big{padding:14px;grid-template-columns:1fr 1fr} .bcell.on{border-color:var(--line2);color:var(--ink);background:rgba(34,255,136,.05)}
.cursor{position:absolute;right:22%;bottom:18%;font-size:1.4rem;color:#fff;transform:rotate(-40deg);animation:clickc 3s var(--ease) infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));z-index:3}
@keyframes clickc{0%,30%{translate:40px 30px}55%,65%{translate:0 0;scale:1}60%{scale:.85}100%{translate:40px 30px}}
.bgoogle.solo{position:relative;opacity:1;transform:none;left:auto;right:auto;bottom:auto;width:100%;max-width:400px;z-index:2;box-shadow:0 30px 60px rgba(0,0,0,.5)} .gbar{display:flex;gap:10px;align-items:center;margin-bottom:12px} .gres.dim{opacity:.35;margin-top:12px} .bgoogle .stars{color:#fbbc04;font-size:.8rem;margin:4px 0}
.bbar.big{padding:14px} .addr.on{background:rgba(34,255,136,.12);color:var(--g);box-shadow:0 0 0 2px rgba(34,255,136,.4);font-size:.9rem} .addr.on .lock{opacity:1}
.type{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--g);animation:typew 5s steps(18) infinite} @keyframes typew{0%{width:0}40%,90%{width:11ch}100%{width:0}}
.shield{position:relative;z-index:2;display:grid;justify-items:center;gap:8px;padding:30px;border:1px solid var(--line2);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(34,255,136,.2),transparent 60%),#0a110d;min-width:260px} .padlock{font-size:3.4rem;filter:drop-shadow(0 0 20px var(--g));animation:glowp 2.4s ease-in-out infinite;border-radius:50%} .shield b{font-family:var(--head);color:var(--g)} .shield span{color:var(--mute);font-size:.9rem}
.status-card{position:relative;z-index:2;width:100%;max-width:380px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#0a110d;display:grid;gap:16px} .bstatus.solo{position:static;opacity:1;transform:none;justify-self:start}
.uptime{display:flex;gap:5px;height:44px;align-items:flex-end} .uptime i{flex:1;height:100%;border-radius:4px;background:var(--g);opacity:.35;animation:upt 3s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)} @keyframes upt{50%{opacity:1;box-shadow:0 0 12px var(--glow)}}
@media (max-width:980px){.srow{grid-template-columns:1fr} .srow:nth-child(even) .smock{order:0} .smock{min-height:0}}
@media (prefers-reduced-motion:reduce){.btog.swap i,.bphone.big,.blogo.xl,.sw.big i,.cursor,.type,.padlock,.uptime i{animation:none} .type{width:auto;border:0}}

/* demo captures */
.shots{grid-template-columns:repeat(7,1fr);gap:14px;align-items:start}
.shotf{margin:0} .shotf figcaption{margin-top:10px;font-size:.78rem;color:var(--mute);text-align:center}
.ph.small{width:100%;height:auto;padding:6px;border-radius:22px;aspect-ratio:390/780} .ph.small::before{width:40%;height:10px;top:4px;border-radius:0 0 8px 8px} .ph.small img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:16px;display:block}
.emock{border-radius:16px;background:#fff;color:#1b1a17;padding:14px;font-size:.72rem;aspect-ratio:390/780;display:flex;flex-direction:column;gap:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)} .em-h{display:flex;justify-content:space-between;color:#6b6b6b;border-bottom:1px solid #eee;padding-bottom:6px} .em-s{font:700 .9rem var(--head)} .emock p{margin:0;color:#444} .em-l{display:flex;justify-content:space-between;padding:8px;border-radius:8px;background:#f5f2ec;color:#333;margin-top:auto} .em-b{text-align:center;padding:8px;border-radius:999px;background:#e39b2e;color:#1b1a17;font-weight:700} .em-b.ghost{background:transparent;border:1px solid #ddd;color:#1b1a17}
@media (max-width:980px){.shots{grid-template-columns:repeat(4,1fr)}} @media (max-width:560px){.shots{grid-template-columns:repeat(2,1fr)}}
/* who: scenes */
.tscene{margin-top:16px;height:150px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#0f1a14,#08100c);padding:12px;overflow:hidden;font-size:.72rem;position:relative;max-width:360px}
.tscene .mcal{height:100%} .tscene .otoast{animation:none}