@font-face{font-family:Geist;font-weight:400;font-display:swap;src:url(fonts/geist-400.ttf) format("truetype")}
@font-face{font-family:Geist;font-weight:500;font-display:swap;src:url(fonts/geist-500.ttf) format("truetype")}
@font-face{font-family:Geist;font-weight:600;font-display:swap;src:url(fonts/geist-600.ttf) format("truetype")}
:root{
 --bg:#000000;--card:#181818;--raised:#1F1F1F;--line:#313131;--line-soft:#272727;--deep:#131209;
 --text:#ffffff;--muted:#9B9B9B;--accent:#7C3AED;--accent-hover:#6D28D9;--accent-text:#A78BFA;
 --ease:cubic-bezier(0.22,1,0.36,1);
 --s25:2px;--s50:4px;--s75:8px;--s100:12px;--s200:16px;--s300:24px;--s400:32px;--s500:40px;--s600:48px;--s700:64px;--s800:80px;--s900:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--bg);color:var(--text);font-family:Geist,system-ui,sans-serif;font-size:16px;line-height:24px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance}
p,li,summary{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:var(--s50);border-radius:var(--s50)}
.icon{width:24px;height:24px;flex:none;fill:currentColor}
.skip{position:absolute;left:var(--s200);top:-96px;background:var(--text);color:#000;padding:var(--s75) var(--s100);border-radius:8px;font-size:14px;line-height:20px;font-weight:600;z-index:100;transition:transform .5s var(--ease)}
.skip:focus{transform:translateY(112px)}
.wrap{max-width:1152px;margin:0 auto;padding:0 var(--s300)}

/* nav */
.nav{position:fixed;top:var(--s200);left:0;right:0;margin:0 auto;width:fit-content;max-width:calc(100% - 32px);z-index:50;display:flex;align-items:center;gap:var(--s300);padding:var(--s75) var(--s75) var(--s75) var(--s200);background:rgba(19,18,9,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-soft);border-radius:16px}
.nav .mark{font-weight:600;font-size:16px;line-height:24px;margin-right:var(--s100)}
.nav-links{display:flex;gap:var(--s50)}
.nav-links a{font-size:14px;line-height:20px;font-weight:500;color:var(--muted);padding:var(--s75) var(--s100);border-radius:8px;transition:color .3s var(--ease),background-color .3s var(--ease)}
.nav-links a:hover{color:var(--text);background:var(--card)}
.nav-links a[aria-current="true"]{color:var(--text);background:var(--card)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s75);min-height:40px;padding:var(--s75) var(--s100);background:var(--accent);color:#fff;font:inherit;font-size:16px;line-height:24px;font-weight:600;border:0;border-radius:8px;cursor:pointer;transition:background-color .3s var(--ease),transform .5s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn.sm{font-size:14px;line-height:20px;min-height:40px}
.btn .icon{width:16px;height:16px}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.toggle{display:none;position:relative;width:40px;height:40px;background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--text)}
.toggle span{position:absolute;left:var(--s100);right:var(--s100);height:2px;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
.toggle span:first-child{top:16px}.toggle span:last-child{top:22px}
.toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.panel{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:center;gap:var(--s200);padding:var(--s900) var(--s300) var(--s400);background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.panel.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.panel a{font-size:30px;line-height:36px;font-weight:600;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.panel.open a{opacity:1;transform:none;transition-delay:calc(var(--i)*60ms)}
.panel .btn{align-self:flex-start;font-size:16px;line-height:24px;margin-top:var(--s200)}

/* hero */
.hero{padding:var(--s900) 0 0;text-align:center}
.hero .inner{display:flex;flex-direction:column;align-items:center}
.hero h1{max-width:680px;font-size:60px;line-height:1;letter-spacing:-0.02em}
.hero h1 .ln{display:block;padding-bottom:var(--s50);background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content;margin:0 auto}
.hero .sub{max-width:680px;margin-top:var(--s200);font-size:18px;line-height:28px;color:var(--muted)}
.hero .cta-row{margin-top:var(--s400);display:flex;flex-direction:column;align-items:center;gap:var(--s200)}
.proof{font-size:14px;line-height:20px;color:var(--muted)}
.proof strong{color:var(--text);font-weight:600}
.reels{margin-top:var(--s700);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:var(--s200);width:max-content;will-change:transform}
.reel{position:relative;width:180px;height:320px;flex:none;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line-soft)}
.reel img{width:100%;height:100%;object-fit:cover}
.reel .play{position:absolute;left:var(--s100);bottom:var(--s100);width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reel .play .icon{width:16px;height:16px}

/* sections */
section{padding:var(--s900) 0}
.head{max-width:680px;margin-bottom:var(--s600)}
.label{display:block;margin-bottom:var(--s100);font-size:14px;line-height:20px;font-weight:500;color:var(--accent-text)}
.head h2{font-size:36px;line-height:40px;letter-spacing:-0.01em}
.head p{margin-top:var(--s200);font-size:18px;line-height:28px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s200)}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:var(--s300);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.card:hover{border-color:var(--line);transform:translateY(-2px)}
.card .icon{width:32px;height:32px;color:var(--accent-text);margin-bottom:var(--s300)}
.card h3{font-size:20px;line-height:28px}
.card p{margin-top:var(--s75);color:var(--muted)}
.stats .stat{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:var(--s300)}
.stat b{display:block;font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.02em}
.stat span{display:block;margin-top:var(--s100);color:var(--muted)}
.stats{padding:var(--s800) 0 0}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s200)}
.split .card:hover{transform:none}
.split h3{font-size:24px;line-height:32px;margin-bottom:var(--s200)}
.ticks li{display:flex;gap:var(--s100);padding:var(--s100) 0;border-top:1px solid var(--line-soft);color:var(--muted)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";width:8px;height:8px;margin-top:var(--s75);border-radius:2px;background:var(--accent-text);flex:none}
.ticks.keep li::before{background:var(--muted)}

/* steps */
.step .n{display:block;margin-bottom:var(--s300);font-size:48px;line-height:1;font-weight:600;color:var(--accent-text);letter-spacing:-0.02em}

/* clients */
.client{display:block;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:var(--s100);transition:border-color .3s var(--ease),transform .5s var(--ease)}
.client:hover{border-color:var(--line);transform:translateY(-2px)}
.client:active{transform:scale(.98)}
.client .top{display:flex;align-items:center;gap:var(--s100)}
.client img,.client .ini{width:48px;height:48px;border-radius:4px;object-fit:cover;flex:none;background:var(--raised)}
.client .ini{display:grid;place-items:center;font-weight:600;font-size:16px;color:var(--accent-text)}
.client b{display:block;font-weight:600;font-size:16px;line-height:24px}
.client .h{display:block;font-size:14px;line-height:20px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client dl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s75);margin-top:var(--s100);padding:var(--s100);background:var(--raised);border-radius:8px}
.client dt{font-size:12px;line-height:16px;color:var(--muted)}
.client dd{font-size:14px;line-height:20px;font-weight:600}
.note{margin-top:var(--s200);font-size:14px;line-height:20px;color:var(--muted)}
.clients{grid-template-columns:repeat(3,minmax(0,1fr))}

/* faq */
.faqwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s700);align-items:start}.faqwrap .head{margin-bottom:0;}.faq{max-width:760px}
details{background:var(--card);border:1px solid var(--line-soft);border-radius:16px;margin-bottom:var(--s75);transition:border-color .3s var(--ease)}
details:hover{border-color:var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s200);padding:var(--s200) var(--s300);font-weight:600;font-size:18px;line-height:28px;cursor:pointer;list-style:none;border-radius:16px}
summary::-webkit-details-marker{display:none}
summary .icon{width:20px;height:20px;color:var(--accent-text);transition:transform .5s var(--ease)}
details[open] summary .icon{transform:rotate(45deg)}
details p{padding:0 var(--s300) var(--s200);color:var(--muted)}

/* final cta */
.final{background:var(--deep);border-top:1px solid var(--line-soft)}
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--s700);align-items:start}
.final h2{font-size:48px;line-height:1;letter-spacing:-0.02em;max-width:680px}
.final .lead{margin-top:var(--s200);font-size:18px;line-height:28px;color:var(--muted);max-width:480px}
.final .risk{margin-top:var(--s300);font-size:14px;line-height:20px;color:var(--muted)}
form{background:var(--card);border:1px solid var(--line-soft);border-radius:24px;padding:var(--s400);display:grid;gap:var(--s200)}
label{display:grid;gap:var(--s75);font-size:14px;line-height:20px;font-weight:500}
label small{font-weight:400;color:var(--muted);font-size:14px}
input,textarea{width:100%;font:inherit;font-size:16px;line-height:24px;padding:var(--s100) var(--s200);background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;transition:border-color .3s var(--ease)}
input::placeholder{color:#6b6b6b}
input:hover,textarea:hover{border-color:#4a4a4a}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:var(--s25);border-color:var(--accent-text)}
textarea{min-height:120px;resize:vertical}
.err{display:none;color:#F87171;font-size:14px;line-height:20px;font-weight:400}
label.bad .err{display:block}
label.bad input,label.bad textarea{border-color:#F87171}
form .btn{justify-self:start;min-height:40px}
.fnote{font-size:14px;line-height:20px;color:var(--muted)}

footer{padding:var(--s500) 0;border-top:1px solid var(--line-soft);font-size:14px;line-height:20px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--s200);flex-wrap:wrap}
footer a{transition:color .3s var(--ease)}footer a:hover{color:var(--text)}
footer nav{display:flex;gap:var(--s300)}

.page-center{min-height:100vh;display:grid;place-items:center;text-align:center;padding:var(--s300)}
.page-center h1{font-size:60px;line-height:1;margin-bottom:var(--s200);letter-spacing:-0.02em}
.page-center p{color:var(--muted);max-width:480px;margin:0 auto var(--s300)}

@media (max-width:900px){
 .nav-links,.nav>.btn{display:none}.toggle{display:block}.nav{gap:var(--s100);padding:var(--s50) var(--s50) var(--s50) var(--s200);width:calc(100% - 32px);justify-content:space-between}
 .grid3,.clients,.split{grid-template-columns:1fr}
 .clients{grid-template-columns:repeat(2,minmax(0,1fr))}
 .final .wrap{grid-template-columns:1fr;gap:var(--s500)}.final .wrap>div:first-child,.faqwrap .head{position:static}.faqwrap{grid-template-columns:1fr;gap:var(--s400)}.faqwrap .head{margin-bottom:0}
}
@media (max-width:600px){
 .wrap{padding:0 var(--s200)}
 section,.tagline{padding:var(--s700) 0}
 .hero{padding-top:var(--s800)}
 .hero h1{font-size:36px;line-height:40px}
 .hero .sub{font-size:16px;line-height:24px}
 .reels{margin-top:var(--s500)}
 .reel{width:144px;height:256px}
 .head h2{font-size:30px;line-height:36px}
 .tagline p{font-size:36px;line-height:40px}
 .final h2{font-size:36px;line-height:40px}
 .clients{grid-template-columns:1fr}
 .stats{padding-top:var(--s500)}
 .stat b{font-size:36px;line-height:40px}
 form{padding:var(--s300)}
 summary{font-size:16px;line-height:24px;padding:var(--s200)}
 details p{padding:0 var(--s200) var(--s200)}
 .page-center h1{font-size:36px;line-height:40px}
}

/* ===== MOTION (design to motion) ===== */
:root{--e:cubic-bezier(0.16,1,0.3,1);--e2:cubic-bezier(0.33,1,0.68,1);--io:cubic-bezier(0.65,0,0.35,1)}
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.prog i{display:block;height:100%;background:var(--accent-text);transform:scaleX(0);transform-origin:left}

/* B1 start empty + B2 loading choreography: kinds up / down / card */
.js:not(.rm) .ha,.js:not(.rm) .rc,.js:not(.rm) .rv{opacity:0;filter:blur(4px);transform:translateY(10px)}
.js:not(.rm) .ha.down{transform:translateY(-8px)}
.js:not(.rm) .rc,.js:not(.rm) .rv{filter:blur(6px);transform:translateY(24px) scale(.985)}
.js:not(.rm) .ha,.js:not(.rm) .rc,.js:not(.rm) .rv{transition:opacity .8s var(--e2) var(--d,0s),filter .8s var(--e2) var(--d,0s),transform 1.05s var(--e) var(--d,0s)}
.js:not(.rm) .rv{--d:calc(var(--i,0)*80ms)}
.js:not(.rm).go .ha,.js:not(.rm).go .rc,.js:not(.rm) .rv.in{opacity:1;filter:none;transform:none}
.js:not(.rm) .rv.in.done{transition:border-color .3s var(--e2),transform .5s var(--e);--d:0s}
.js:not(.rm) .reels{opacity:0}.js:not(.rm).go .reels{opacity:1}

/* headings: words rise and resolve one after another */
.sw{display:inline-block}
.js:not(.rm) .hd .sw,.js:not(.rm) .hd .label,.js:not(.rm) .hd>p,.js:not(.rm) .final h2 .sw{opacity:0;filter:blur(4px);transform:translateY(10px);transition:opacity .8s var(--e2) calc(var(--j,0)*60ms + 80ms),filter .8s var(--e2) calc(var(--j,0)*60ms + 80ms),transform 1.05s var(--e) calc(var(--j,0)*60ms + 80ms)}
.js:not(.rm) .hd .label{transition-delay:0s}
.js:not(.rm) .hd>p{transition-delay:.5s}
.js:not(.rm) .hd.in .sw,.js:not(.rm) .hd.in .label,.js:not(.rm) .hd.in>p,.js:not(.rm) .rv.in h2 .sw{opacity:1;filter:none;transform:none}

/* hero scroll-out (scroll linked) */
.hero .inner{transform:translate3d(0,calc(var(--hp,0)*-48px),0);opacity:calc(1 - var(--hp,0)*.85)}
.hero .rp{transform:translate3d(0,calc(var(--hp,0)*-24px),0)}

/* reel strip */
.rc{flex:none}
.reel{transition:transform .5s var(--e),opacity .5s var(--e2),border-color .3s var(--e2)}
@media (hover:hover){
 .track:hover .reel{opacity:.5}
 .track .reel:hover{opacity:1;transform:translateY(-12px) scale(1.06);border-color:var(--accent-text)}
}
.reel .play{overflow:visible}
.reel .play::after{content:"";position:absolute;inset:0;border-radius:8px;border:1px solid var(--accent-text);opacity:0}
@media (hover:hover){.track .reel:hover .play::after{animation:ring 2s var(--e2) infinite}}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
.reel .play{transition:background-color .3s var(--e2),transform .5s var(--e)}
.track .reel:hover .play{background:var(--accent);transform:scale(1.15)}

/* buttons: sheen sweep, arrow nudge, magnetic */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:rgba(255,255,255,.34);transform:translateX(-150%) skewX(-20deg);pointer-events:none}
.btn:hover::after{animation:sheen 1s var(--io)}
.btn.idle::after{animation:sheen 3.4s var(--io) 3s infinite}
@keyframes sheen{0%{transform:translateX(-150%) skewX(-20deg)}44%,100%{transform:translateX(420%) skewX(-20deg)}}
.btn .icon{transition:transform .5s var(--e)}
.btn:hover .icon{transform:translateX(4px)}
.btn{transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
.btn:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.98)}

/* cards: lift, icon tilt, client 3D tilt */
.card .icon{transition:transform .5s var(--e)}
.card:hover .icon{transform:scale(1.12) rotate(-6deg)}
.card:hover{transform:translateY(-4px)}
.js:not(.rm) .rv.in:not(.done):hover{transform:none}
.client{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:border-color .3s var(--e2),transform .5s var(--e);will-change:transform}
.client:hover{--ty:-4px;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.client img,.client .ini{transition:transform .5s var(--e)}
.client:hover img,.client:hover .ini{transform:scale(1.1)}
.client dd{font-variant-numeric:tabular-nums}
.stat b,.proof strong{font-variant-numeric:tabular-nums}

/* tagline: pinned, scroll linked word reveal */
.tagline{padding:0}
.tagline .pin{padding:var(--s900) 0}
.tagline p{max-width:680px;margin:0 auto;text-align:center;font-size:48px;line-height:1;letter-spacing:-0.02em;font-weight:600;text-wrap:balance}
.tagline .w{display:inline-block;color:rgb(255 255 255/calc(.3 + .7*var(--k,0)));transform:translate3d(0,calc((1 - var(--k,0))*8px),0)}
.tbar{max-width:240px;height:2px;margin:var(--s400) auto 0;background:var(--line-soft)}
.tbar i{display:block;height:100%;background:var(--accent-text);transform:scaleX(var(--tp,0));transform-origin:left}
@media (min-width:901px){
 html:not(.rm) .tagline{height:260vh}
 html:not(.rm) .tagline .pin{position:sticky;top:0;height:100vh;padding:0;display:flex;flex-direction:column;justify-content:center}
 html:not(.rm) .how{height:300vh;padding:0}
 html:not(.rm) .how .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
 html:not(.rm) .how .wrap{width:100%}
 html:not(.rm) .how .head{margin-bottom:var(--s500)}
}
.step{opacity:calc(.35 + .65*var(--k,1));transform:translate3d(0,calc((1 - var(--k,1))*16px),0) scale(calc(.96 + .04*var(--k,1)));transition:border-color .5s var(--e)}
.step.on{border-color:var(--accent-text)}
.step:hover{transform:translate3d(0,0,0)}
.step .n{transition:transform .5s var(--e)}
.rail{display:none;position:relative;margin-top:var(--s300)}
.rail .line{height:2px;background:var(--line-soft)}
.rail .line i{display:block;height:100%;background:var(--accent-text);transform:scaleX(var(--L,0));transform-origin:left}
.rail .dots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s200);margin-top:-6px}
.rail .dots span{justify-self:center;width:10px;height:10px;border-radius:9999px;background:var(--line);transition:background-color .5s var(--e2),transform .5s var(--e)}
.rail .dots span.on{background:var(--accent-text);transform:scale(1.4)}
@media (min-width:901px){html:not(.rm) .rail{display:block}}
@media (max-width:900px),(prefers-reduced-motion:reduce){.step{opacity:1;transform:none}}
html.rm .step{opacity:1;transform:none}

/* what you get: stories on each visual */
.card.has-vis{padding:0;overflow:hidden}
.card.has-vis .body{padding:var(--s300)}
.vis{position:relative;height:160px;background:var(--raised);display:grid;place-items:center;overflow:hidden;color:var(--accent-text)}
.vis:not(.live) *{animation-play-state:paused!important}
.v-film img{height:112px;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:8px;animation:focus 4.4s var(--e) infinite}
@keyframes focus{0%{filter:blur(5px);transform:scale(.94)}18%,86%{filter:blur(0);transform:scale(1)}100%{filter:blur(5px);transform:scale(.94)}}
.v-film .brk{position:absolute;width:96px;height:112px;color:var(--text);opacity:.8;animation:breathe 2.2s var(--io) infinite}
@keyframes breathe{50%{transform:scale(.92)}}
.v-film .rec{position:absolute;top:var(--s200);left:var(--s200);display:flex;align-items:center;gap:var(--s75);font-size:12px;line-height:16px;font-weight:600;color:var(--text)}
.rec i{position:relative;width:8px;height:8px;border-radius:9999px;background:#F87171}
.rec i::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#F87171;animation:ring 2s var(--e2) infinite}
.v-film .tl{position:absolute;left:var(--s200);right:var(--s200);bottom:var(--s200);height:2px;background:var(--line)}
.tl i{display:block;height:100%;background:var(--text);transform:scaleX(0);transform-origin:left;animation:play 4.4s linear infinite}
@keyframes play{to{transform:scaleX(1)}}
.v-post{align-content:center;gap:var(--s200)}
.v-post .plane{width:32px;height:32px;margin:0 auto;animation:bob 2.8s ease-in-out infinite}
@keyframes bob{50%{transform:translate(4px,-6px) rotate(8deg)}}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s75);padding:0 var(--s200);max-width:300px}
.chip{padding:var(--s50) var(--s100);border-radius:8px;border:1px solid var(--line);font-size:12px;line-height:16px;font-weight:500;color:var(--muted);animation:lit 6s var(--e2) calc(var(--n)*.8s) infinite}
@keyframes lit{0%{background:transparent;color:var(--muted);border-color:var(--line);transform:none}4%,14%{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-4px)}22%,100%{background:transparent;color:var(--muted);border-color:var(--line);transform:none}}
.v-rep{align-content:end}
.v-rep .bars{position:absolute;left:var(--s400);right:var(--s400);bottom:var(--s300);top:var(--s300);display:flex;align-items:flex-end;justify-content:space-between}
.bars i{display:block;width:16px;height:var(--h);background:var(--line);border-radius:2px;transform-origin:bottom;transform:scaleY(0);animation:grow 5.2s var(--e) calc(var(--n)*.1s) infinite}
@keyframes grow{0%{transform:scaleY(0)}18%,80%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
.v-rep .trend{position:absolute;left:var(--s400);right:var(--s400);bottom:var(--s300);top:var(--s300);width:calc(100% - 64px);height:calc(100% - 48px);overflow:visible}
.trend path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5.2s var(--io) .5s infinite}
@keyframes draw{0%{stroke-dashoffset:1}40%,80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}

/* final CTA curtain (scroll linked) + form stagger */
.final{border-radius:24px 24px 0 0;transform-origin:50% 0;transform:translate3d(0,calc((1 - var(--cp,1))*48px),0) scale(calc(.96 + .04*var(--cp,1)))}
.js:not(.rm) form label,.js:not(.rm) form .btn{opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .8s var(--e2) calc(var(--l,0)*70ms + 350ms),filter .8s var(--e2) calc(var(--l,0)*70ms + 350ms),transform 1s var(--e) calc(var(--l,0)*70ms + 350ms)}
.js:not(.rm) .rv.in form label,.js:not(.rm) .rv.in form .btn{opacity:1;transform:none;filter:none}
.js:not(.rm) .rv.in.done form .btn{transition:background-color .3s var(--e2),transform .5s var(--e)}

/* faq open */
details[open]>p{animation:ans .6s var(--e) both}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}}

/* reduced motion: the still page */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.rm .bars i{transform:none}html.rm .trend path{stroke-dashoffset:0}
html.rm .hero .inner,html.rm .hero .rp{transform:none;opacity:1}
html.rm .tagline .w{--k:1}
html.rm .reels{overflow-x:auto}
@media (max-width:600px){.tagline p{font-size:36px;line-height:40px}.vis{height:144px}}