/* v2 · scroll-driven layer */
[data-scroll]{--p:0}
.hx{height:270vh;position:relative;background:radial-gradient(90% 70% at 50% 100%,#1B4433 0%,#0D1A14 45%,#0A0F0D 75%)}
.hx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;perspective:1400px}
.hx #contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:calc(.5 + var(--a,0)*.5)}
.hx-copy{position:absolute;left:0;right:0;top:clamp(84px,13vh,140px);display:grid;justify-items:center;text-align:center;gap:22px;padding:0 20px;z-index:3;opacity:calc(1 - var(--a,0)*1.6);transform:translateY(calc(var(--a,0)*-80px)) scale(calc(1 - var(--a,0)*.06));will-change:transform,opacity}
.hx-copy .lede{margin:0 auto}
.hx-copy .h1x{max-width:18ch;font-size:clamp(40px,6.2vw,86px)}
@media (max-width:640px){.hx-copy{gap:16px;top:84px}.hx-copy .hero-tags{display:none}.hx-copy .lede{font-size:16px}}
.hx-copy.off{pointer-events:none}
.hx-dev{position:absolute;left:50%;top:54%;width:580px;height:660px;margin:-330px 0 0 -290px;transform:scale(var(--fit,1));transform-style:preserve-3d;z-index:2}
.hx-dev .phone{position:absolute;left:145px;top:0;width:290px;will-change:transform}
.hx-dev .ph-a{transform:translateY(calc((1 - var(--a,0)) * var(--drop,640px))) rotateX(calc((1 - var(--a,0)) * 38deg)) scale(calc(1.18 - var(--a,0)*.18)) translateX(calc(var(--b,0) * -150px)) rotate(calc(var(--b,0) * -4deg))}
.hx-dev .ph-b{opacity:var(--b,0);transform:translateX(calc((1 - var(--b,0)) * 420px + var(--b,0) * 150px)) translateY(calc(var(--b,0)*40px)) rotate(calc(var(--b,0) * 4deg))}
.hx-dev .where{opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0))*14px))}
.hx-dev .where.g{left:20px;top:-46px}.hx-dev .where.w{right:20px;top:-6px}
.hx-dev .pop{display:none}
.hx.live .hx-dev .pop{display:block}
.hx-dev .pop.p1{left:140px;top:250px}.hx-dev .pop.p2{left:-10px;top:500px}.hx-dev .pop.p3{right:-10px;top:560px;left:auto}
.hx-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px/1 var(--font-mono);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;opacity:calc(1 - var(--a,0)*3)}
.hx-hint i{animation:nudge 1.6s var(--ease) infinite;font-size:18px}
@keyframes nudge{50%{transform:translateY(6px)}}
.hx-glow{position:absolute;left:50%;bottom:-30vh;width:120vw;height:70vh;margin-left:-60vw;background:radial-gradient(closest-side,rgba(212,255,58,.16),transparent);opacity:calc(.4 + var(--a,0)*.6);pointer-events:none}
/* reveal */
.js [data-r]{opacity:0;transform:translateY(48px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
/* word fill */
.fillw .w{opacity:.16;transition:opacity .25s linear}
.fillw .w.on{opacity:1}
/* scrolly */
.sx{height:520vh;position:relative}
.sx-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:clip}
.sx-pin::before{content:"";position:absolute;right:-10vw;top:10vh;width:70vw;height:80vh;background:radial-gradient(closest-side,rgba(23,58,43,.9),transparent);pointer-events:none}
.sx-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;position:relative;width:100%}
.sx-text{display:grid;gap:28px}
.sx-steps{position:relative;min-height:340px}
.sx-step{position:absolute;inset:0 0 auto 0;display:grid;gap:18px;opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.sx-n{font:700 15px/1 var(--font-mono);color:var(--primary)}
.sx-rail{display:flex;gap:8px}
.sx-rail i{height:4px;flex:0 0 36px;border-radius:4px;background:var(--line-strong);transition:background .4s,flex-basis .4s var(--ease)}
.sx-phone{position:relative}
.sx-phone .screen{min-height:600px}
.sx-scr{position:absolute;inset:44px 0 0 0;padding:8px 14px 14px;display:grid;gap:10px;align-content:start;opacity:0;transform:scale(.96) translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sx[data-step="0"] [data-s="0"],.sx[data-step="1"] [data-s="1"],.sx[data-step="2"] [data-s="2"],.sx[data-step="3"] [data-s="3"],.sx[data-step="4"] [data-s="4"]{opacity:1;transform:none;pointer-events:auto}
.sx[data-step="0"] .sx-rail i:nth-child(1),.sx[data-step="1"] .sx-rail i:nth-child(-n+2),.sx[data-step="2"] .sx-rail i:nth-child(-n+3),.sx[data-step="3"] .sx-rail i:nth-child(-n+4),.sx[data-step="4"] .sx-rail i{background:var(--primary)}
.sx[data-step="0"] .sx-rail i:nth-child(1),.sx[data-step="1"] .sx-rail i:nth-child(2),.sx[data-step="2"] .sx-rail i:nth-child(3),.sx[data-step="3"] .sx-rail i:nth-child(4),.sx[data-step="4"] .sx-rail i:nth-child(5){flex-basis:72px}
.sx[data-step="2"] [data-s="2"] .bignum{animation:numIn .9s var(--ease) both}
@keyframes numIn{0%{transform:scale(.4);opacity:0;filter:blur(8px)}60%{transform:scale(1.08);opacity:1;filter:none}100%{transform:none}}
.sx[data-step="2"] [data-s="2"] .mfeed{animation:feedIn .6s var(--ease) both}
.sx[data-step="2"] [data-s="2"] .mfeed:nth-child(2){animation-delay:.5s}.sx[data-step="2"] [data-s="2"] .mfeed:nth-child(3){animation-delay:.7s}.sx[data-step="2"] [data-s="2"] .mfeed:nth-child(4){animation-delay:.9s}
.mfeed{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface);font-size:14px;font-weight:700}
.sx[data-step="3"] [data-s="3"] .pressc{animation:slideDown .7s var(--ease) .15s both}
@keyframes slideDown{from{transform:translateY(-40px);opacity:0}}
.sx[data-step="4"] [data-s="4"] .bar i{animation:grow 1s var(--ease) .2s both}
@keyframes grow{from{width:0}}
.sx[data-step="4"] [data-s="4"] .pay{animation:feedIn .6s var(--ease) both}
.sx[data-step="4"] [data-s="4"] .pay:nth-of-type(2){animation-delay:.9s}.sx[data-step="4"] [data-s="4"] .pay:nth-of-type(3){animation-delay:1.1s}
@media (max-width:899px){
.sx-grid{grid-template-columns:1fr;gap:16px;justify-items:center;align-content:center;height:100%;padding-top:72px;padding-bottom:20px}
.sx-phone{zoom:.62;order:-1}
.sx-text{gap:14px;width:100%}
.sx-steps{min-height:210px}
.sx-step .h2{font-size:30px}
.sx-step .lede{font-size:16px}
.sx-text>.eyebrow{display:none}
}
@media (max-height:720px) and (max-width:899px){.sx-phone{zoom:.52}}
/* watch intro */
.wx{height:240vh;position:relative}
.wx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:grid;place-items:center;text-align:center}
.wx-bg1,.wx-bg2{position:absolute;inset:0;pointer-events:none}
.wx-bg1{background:radial-gradient(70% 60% at 50% 40%,#173A2B,#0A0F0D 70%);opacity:calc(1 - var(--p))}
.wx-bg2{background:radial-gradient(70% 60% at 50% 40%,#16284A,#0A0F0D 70%);opacity:var(--p)}
.wx .mega{position:relative;z-index:2;padding:0 20px;transform:scale(calc(1.06 - var(--p)*.12)) translateY(calc(var(--p)*-8vh))}
.wx .mega .w{display:inline-block}
.wx-phone{position:absolute;left:50%;bottom:0;z-index:3;transform:translate(-50%,calc((1 - var(--k,0)) * 100% + 40%)) rotate(calc((1 - var(--k,0))*-6deg));will-change:transform}
.wx-sub{position:relative;z-index:2;margin-top:24px;font:700 13px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--info);opacity:calc(1 - var(--k,0)*2)}
/* badge track */
.bx{position:relative}
.bx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:flex;flex-direction:column;justify-content:center;gap:40px}
.bx-track{display:flex;gap:20px;padding:0 max(20px,calc((100vw - 1240px)/2 + 40px));width:max-content;will-change:transform;perspective:1000px}
.bx .bdg{width:270px;flex:none;min-height:300px;padding:26px;transform-style:preserve-3d}
.bx .bdg .medal{width:96px;height:96px;font-size:44px;transform:rotateY(var(--ry,0deg));transition:transform .1s linear}
.bx .bdg h3{font-size:24px}
.bx-prog{height:3px;background:var(--line);border-radius:3px;overflow:hidden;width:min(400px,60vw);margin:0 auto}
.bx-prog i{display:block;height:100%;width:calc(var(--p)*100%);background:var(--primary)}
@media (prefers-reduced-motion:reduce){
.hx,.sx,.wx{height:auto}.hx-pin,.sx-pin,.wx-pin,.bx-pin{position:relative;height:auto;min-height:100vh}
.hx-pin{display:grid;gap:32px;padding:100px 0 60px;overflow:visible}.hx-copy{position:relative;top:auto;opacity:1!important;transform:none!important}.hx-dev{position:relative;left:auto;top:auto;margin:0 auto}.hx-hint{display:none}.wx-phone{position:relative;left:auto;transform:none;margin:24px auto 0}.bx{height:auto!important}.bx-track{transform:none!important;overflow-x:auto;width:auto}
.js [data-r]{opacity:1;transform:none}
.fillw .w{opacity:1}
}