:root{--bg:#06071a;--ink:#eef0ff;--mut:#9aa0c8;--c:#3ee0ff;--m:#d34bff;--v:#7a5cff;--card:rgba(255,255,255,.05);--line:rgba(255,255,255,.1)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 800px at 80% -10%,#24124d 0,transparent 60%),radial-gradient(900px 700px at -10% 30%,#0c2a4d 0,transparent 60%),var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:1.05}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c),var(--m));z-index:99}
.nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:14px 4vw;z-index:50;backdrop-filter:blur(14px);background:rgba(6,7,26,.55);border-bottom:1px solid var(--line)}
.brand{font:700 20px "Space Grotesk";display:flex;gap:8px;align-items:center}.logo{color:var(--c);text-shadow:0 0 14px var(--c)}
.nav nav{display:flex;gap:22px;margin-left:auto;color:var(--mut);font-size:14px}.nav nav a:hover{color:#fff}
.btn{display:inline-flex;gap:10px;align-items:center;padding:12px 20px;border-radius:999px;font-weight:600;background:linear-gradient(135deg,var(--c),var(--v) 55%,var(--m));color:#060717;box-shadow:0 10px 40px -10px var(--m);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px -8px var(--m)}.btn.sm{padding:8px 16px;font-size:14px}.btn.big{padding:18px 30px;font-size:18px}
.eyebrow{color:var(--c);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600;margin-bottom:14px}
.grad{background:linear-gradient(90deg,var(--c),var(--m));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:4vw;padding:110px 6vw 60px;position:relative}
.hero h1{font-size:clamp(38px,5.4vw,80px);overflow-wrap:break-word;text-wrap:balance}.lede{color:var(--mut);font-size:19px;max-width:560px;margin:26px 0 34px}
.cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.fine{color:var(--mut);font-size:13px}
.hero-art img{border-radius:28px;box-shadow:0 40px 120px -30px #6a3cff;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-.6deg)}}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;z-index:-1}.g1{width:420px;height:420px;background:var(--v);right:10%;top:20%}.g2{width:300px;height:300px;background:#0aa9d8;left:5%;bottom:5%}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--mut);font-size:13px}.scroll-cue span{display:inline-block;animation:bob 1.6s infinite}@keyframes bob{50%{transform:translateY(5px)}}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:56px;width:max-content;animation:mq 30s linear infinite;font:500 22px "Space Grotesk";color:#b9bde6}@keyframes mq{to{transform:translateX(-50%)}}
.story{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:0 6vw;position:relative}
.story-phone{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;gap:22px}
.phone{width:min(330px,34vw);aspect-ratio:9/19.5;border-radius:48px;padding:12px;background:linear-gradient(145deg,#2c2f4a,#0b0c1d);box-shadow:0 0 0 2px #3a3d5c inset,0 50px 120px -30px var(--v),0 0 80px -20px var(--c);position:relative}
.notch{position:absolute;top:22px;left:50%;width:90px;height:24px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:3}
.screens{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#000}
.screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s,transform 1.2s cubic-bezier(.2,.8,.2,1)}.screens img.on{opacity:1;transform:none}
.dots{display:flex;flex-direction:column;gap:10px}.dots i{width:8px;height:8px;border-radius:50%;background:#34375a;transition:.3s}.dots i.on{background:var(--c);box-shadow:0 0 12px var(--c);height:24px;border-radius:6px}
.step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;opacity:.18;transform:translateY(30px);transition:opacity .6s,transform .6s}.step.on{opacity:1;transform:none}
.step h2{font-size:clamp(34px,4vw,56px);margin:10px 0 18px}.step p{color:var(--mut);font-size:19px;max-width:480px}.num{font:700 14px "Space Grotesk";color:var(--m)}
.tag{margin-top:18px;align-self:flex-start;font-size:12px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);color:var(--c)}
section.turns,section.center,section.gallery{padding:120px 6vw}
.sec-head{text-align:center;max-width:720px;margin:0 auto 50px}.sec-head h2{font-size:clamp(36px,5vw,64px);margin-bottom:12px}.sec-head p{color:var(--mut)}
.pair{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.chip{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:9px 16px;border-radius:99px;cursor:pointer;font:500 14px Inter;transition:.2s}.chip.active,.chip:hover{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset;color:#fff}
.turn-ui{max-width:980px;margin:auto;padding:28px;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid var(--line)}
.panes{display:grid;grid-template-columns:1fr 80px 1fr;gap:12px;min-height:330px}
.pane{border-radius:22px;padding:18px;background:rgba(0,0,0,.3);border:1px solid var(--line);transition:.4s}.pane.a.live{border-color:var(--c);box-shadow:0 0 40px -10px var(--c)}.pane.b.live{border-color:var(--m);box-shadow:0 0 40px -10px var(--m)}
.who{font:700 15px "Space Grotesk";margin-bottom:12px}.pane.a .who{color:var(--c)}.pane.b .who{color:var(--m)}
.bubbles{display:flex;flex-direction:column;gap:10px}.bub{padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.07);font-size:14px;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.95)}}
.bub.typing{color:var(--mut);letter-spacing:.3em}
.wave{display:flex;align-items:center;justify-content:center;gap:4px}.wave i{width:4px;height:10px;border-radius:2px;background:linear-gradient(var(--c),var(--m));opacity:.3}.wave.on i{opacity:1;animation:wv .8s ease-in-out infinite}.wave i:nth-child(2n){animation-delay:.15s}.wave i:nth-child(3n){animation-delay:.3s}@keyframes wv{50%{height:46px}}
.onekey{display:flex;justify-content:center;align-items:center;gap:30px;margin-top:26px;flex-wrap:wrap}
.key{width:86px;height:86px;border-radius:50%;border:0;cursor:pointer;font-size:34px;color:#fff;background:radial-gradient(circle at 35% 30%,#7fe9ff,var(--v) 55%,var(--m));box-shadow:0 0 0 6px rgba(122,92,255,.2),0 0 50px var(--v);transition:transform .15s}.key:active{transform:scale(.92)}.key.pulse{animation:kp 1.2s infinite}@keyframes kp{50%{box-shadow:0 0 0 14px rgba(122,92,255,.05),0 0 70px var(--m)}}
.switch{display:flex;align-items:center;gap:10px;color:var(--mut);cursor:pointer}.switch input{display:none}.switch span{width:44px;height:24px;border-radius:99px;background:#2a2d4a;position:relative;transition:.3s}.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.3s}.switch input:checked+span{background:var(--v)}.switch input:checked+span::after{left:23px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1040px;margin:auto}
.tile{position:relative;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);cursor:pointer;overflow:hidden;transition:transform .3s,border-color .3s;min-height:170px}
.tile:hover,.tile.open{transform:translateY(-4px);border-color:var(--tc)}.tile::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at var(--x,50%) var(--y,50%),var(--tc),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}.tile>*{position:relative}.tile:hover::before,.tile.open::before{opacity:.18}
.tile h4{font:700 18px "Space Grotesk";display:flex;align-items:center;gap:10px}.ring{width:10px;height:10px;border-radius:50%;background:var(--tc);box-shadow:0 0 0 0 var(--tc);animation:ring 1.8s infinite}@keyframes ring{70%{box-shadow:0 0 0 10px transparent}}
.tile .st{color:var(--mut);font-size:14px;margin:6px 0 10px}.spark{height:36px;width:100%}
.tile .more{max-height:0;overflow:hidden;transition:max-height .4s;font-size:13px;color:#cfd2f4}.tile:hover .more,.tile.open .more{max-height:120px}
.tile button{margin-top:10px;font:600 12px Inter;padding:6px 12px;border-radius:99px;border:1px solid var(--tc);background:transparent;color:var(--tc);cursor:pointer}
.tray{max-width:1040px;margin:30px auto 0;padding:20px;border-radius:22px;border:1px dashed var(--line)}.tray-title{font:600 14px Inter;color:var(--mut);margin-bottom:12px}.tray-title span{background:var(--v);color:#fff;border-radius:99px;padding:1px 9px;margin-left:6px}
.cards{display:flex;gap:12px;overflow-x:auto;min-height:72px}.card{flex:0 0 230px;padding:12px 14px;border-radius:14px;background:linear-gradient(145deg,rgba(122,92,255,.25),rgba(62,224,255,.08));border:1px solid var(--line);font-size:13px;animation:pop .5s}.card b{display:block;font-size:12px;color:var(--c)}
.features{padding:60px 6vw;display:flex;flex-direction:column;gap:100px}
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:5vw;align-items:center;max-width:1200px;margin:auto}.feat.rev img{order:2}
.feat img{border-radius:26px;box-shadow:0 30px 100px -30px var(--v)}.feat h3{font-size:clamp(30px,3.4vw,48px);margin-bottom:12px}.feat p{color:var(--mut);font-size:18px}
.grid{columns:4 260px;column-gap:16px;max-width:1300px;margin:auto}
.gi{break-inside:avoid;margin-bottom:16px;border-radius:18px;overflow:hidden;position:relative;cursor:zoom-in;border:1px solid var(--line);transition:transform .3s}.gi:hover{transform:scale(1.02)}.gi img{width:100%}
.gi span{position:absolute;left:10px;top:10px;font-size:11px;padding:3px 9px;border-radius:99px;background:rgba(6,7,26,.75);color:var(--c)}.gi.hide{display:none}
.final{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding:120px 6vw;max-width:1300px;margin:auto}.final img{border-radius:26px}.final h2{font-size:clamp(40px,5vw,72px)}.final p{color:var(--mut);margin:16px 0 26px;font-size:18px}
footer{text-align:center;color:var(--mut);padding:40px;border-top:1px solid var(--line);font-size:13px}
.lightbox{position:fixed;inset:0;background:rgba(3,3,12,.92);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:100;padding:30px}.lightbox.on{display:flex}.lightbox img{max-height:84vh;border-radius:16px}.lightbox p{color:var(--mut);margin-top:12px}#lbX{position:absolute;top:18px;right:24px;font-size:36px;background:none;border:0;color:#fff;cursor:pointer}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.reveal.delay{transition-delay:.15s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.step{opacity:1;transform:none}}
@media (max-width:820px){.hero h1{font-size:clamp(34px,10vw,56px)}.nav nav{display:none}.nav .btn{margin-left:auto}.hero{grid-template-columns:1fr;padding-top:100px}.hero-art{order:-1}
.story{grid-template-columns:1fr}.story-phone{top:56px;height:auto;padding:16px 0;z-index:2;background:linear-gradient(var(--bg) 80%,transparent)}.phone{width:36vw;border-radius:30px;padding:7px}.screens{border-radius:24px}.notch{width:50px;height:14px;top:12px}.dots{display:none}
.step{min-height:85vh;justify-content:flex-end;padding-bottom:8vh}.step h2{font-size:30px}.panes{grid-template-columns:1fr;}.wave{height:40px}.tiles{grid-template-columns:1fr 1fr}.feat,.final{grid-template-columns:1fr}.feat.rev img{order:0}}
.step-art{width:100%;max-width:560px;aspect-ratio:16/9;object-fit:cover;border-radius:20px;margin-top:22px;border:1px solid var(--line);box-shadow:0 30px 80px -30px var(--v)}
@media (max-width:820px){.story-phone .phone{width:118px;border-radius:26px;padding:6px}.story-phone .screens{border-radius:20px}.story-phone .notch{width:40px;height:10px;top:10px}.story-phone .dots{flex-direction:row}.step{min-height:auto;justify-content:flex-start;padding:48px 0 32px}.step-art{margin-top:16px}.story-phone{position:relative;top:0;background:none}}
.kick{font:600 13px "Space Grotesk";letter-spacing:.1em;color:var(--c);margin:0 0 6px}
section.watch{padding:110px 6vw}.vrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vid{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);cursor:pointer}.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:brightness(.7)}
.vid .play{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--c),var(--m));color:#06071a;font-size:18px}
.vid figcaption{padding:10px 14px;font-size:14px;color:var(--mut);background:var(--card)}
body{padding-bottom:76px}
.abar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;gap:6px;padding:6px;border-radius:99px;background:rgba(10,11,34,.82);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 20px 50px -20px var(--v)}
.abar button{border:0;background:none;color:var(--ink);font:600 14px Inter;padding:10px 18px;border-radius:99px;cursor:pointer}.abar button:hover,.abar button.active{background:linear-gradient(90deg,var(--c),var(--m));color:#06071a}
.panel{position:fixed;left:50%;bottom:78px;transform:translate(-50%,12px);width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 160px);overflow:auto;z-index:61;padding:20px 22px;border-radius:22px;background:rgba(12,13,38,.96);border:1px solid var(--line);box-shadow:0 30px 80px -20px #000;opacity:0;pointer-events:none;transition:.25s}
.panel.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}.panel h3{margin:0 0 6px;font-size:20px}
.px{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--mut);font-size:22px;cursor:pointer}
.pnote{color:var(--mut);font-size:14px;margin:0 0 10px}.plab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c);margin:12px 0 4px}
.panel label{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:15px}.panel label em{color:var(--mut);font-size:12px;font-style:normal}.panel input{accent-color:#7a5cff;width:16px;height:16px}
#dlBatch{display:block;text-align:center;margin-top:14px}#dlBatch.off{opacity:.4;pointer-events:none}.panel .fine{font-size:12px;color:var(--mut);margin:8px 0 0}
.sgrid{display:grid;grid-template-columns:1fr;gap:10px}.sc{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}.sc span{grid-column:1;color:var(--mut);font-size:13px}.sc a{grid-row:1/3;grid-column:2;align-self:center;color:var(--c);font-weight:600;text-decoration:none}
.grow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.grow p{margin:0;font-size:14px;color:var(--mut)}.grow b{color:var(--ink)}
@media (max-width:820px){.vrow{grid-template-columns:1fr 1fr}.abar{width:calc(100vw - 24px);justify-content:space-between}.abar button{flex:1;padding:10px 6px}}