/* =========================================================
   MOTION LAYER — animations, transitions & micro-interactions
   Hidden "before" states only apply when html.js-motion is set
   (added in <head> unless the visitor prefers reduced motion),
   so the page stays fully visible without JavaScript.
   ========================================================= */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--base:.55s}
.no-intro{--base:.05s}
html{scroll-padding-top:96px}
body{overflow-x:hidden;overflow-x:clip}
::selection{background:var(--yellow);color:#090909}

/* ---------- Preloader ---------- */
.preloader{display:none}
.js-motion:not(.no-intro) .preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--yellow);clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease-io) .05s}
.loaded .preloader{clip-path:inset(0 0 100% 0);pointer-events:none}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .5s,translate .9s var(--ease-io)}
.loaded .preloader-inner{opacity:0;translate:0 -60px}
.preloader .bars{height:64px;gap:8px}
.preloader .bars i,.preloader .bars i:nth-child(n){width:14px;height:64px;background:#090909;border-radius:4px;transform-origin:50% 100%;animation:eq .55s var(--ease-io) infinite alternate}
.preloader .bars i:nth-child(2){animation-delay:.18s}
.preloader .bars i:nth-child(3){animation-delay:.36s}
.preloader-word{font-weight:900;font-size:15px;letter-spacing:-.4px;overflow:hidden;display:block}
.preloader-word span{display:block;animation:rise .9s var(--ease) .1s both}
@keyframes eq{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@keyframes rise{from{translate:0 110%}to{translate:0 0}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,var(--yellow),#ffb300);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(255,190,0,.6);pointer-events:none}

/* ---------- Header ---------- */
.header{position:sticky;top:12px;z-index:60;transition:transform .6s var(--ease),box-shadow .4s,background-color .4s,border-color .4s,opacity 1s var(--ease),translate 1.1s var(--ease)}
.header.scrolled{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.08);border-color:rgba(231,231,226,.7)}
.header.hide{transform:translateY(calc(-100% - 24px))}
.js-motion .header{opacity:0;translate:0 -24px}
.loaded .header{opacity:1;translate:0 0;transition-delay:0s,0s,0s,0s,calc(var(--base) + .1s),calc(var(--base) + .1s)}
.header .bars i{transform-origin:50% 100%;animation:eq 1.1s var(--ease-io) infinite alternate}
.header .bars i:nth-child(2){animation-delay:.3s}
.header .bars i:nth-child(3){animation-delay:.6s}
.brand:hover .bars i{animation-duration:.35s}
.header nav a{position:relative;transition:color .25s}
.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--yellow);border-radius:2px;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.header nav a:hover:after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- Hero entrance ---------- */
.js-motion .hero .pill,.js-motion .hero-copy>p,.js-motion .hero .checks li{opacity:0;translate:0 26px}
.loaded .hero .pill,.loaded .hero-copy>p,.loaded .hero .checks li{opacity:1;translate:0 0;transition:opacity 1s var(--ease) var(--hd),translate 1.2s var(--ease) var(--hd)}
.hero .pill{--hd:var(--base)}
.hero-copy>p{--hd:calc(var(--base) + .75s)}
.hero .checks li:nth-child(1){--hd:calc(var(--base) + .9s)}
.hero .checks li:nth-child(2){--hd:calc(var(--base) + 1s)}
.hero .checks li:nth-child(3){--hd:calc(var(--base) + 1.1s)}
.hero .checks li:before{transition:scale .6s var(--ease-back) calc(var(--hd) + .2s)}
.js-motion .hero .checks li:before{scale:0}
.loaded .hero .checks li:before{scale:1}
.hero .pill:before{content:'';display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border-radius:50%;background:var(--green);vertical-align:middle;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(20,131,77,.55)}80%,100%{box-shadow:0 0 0 9px rgba(20,131,77,0)}}

/* Hero art */
.hero-art:before{content:'';position:absolute;inset:8% 4% 14%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,212,42,.75),rgba(255,212,42,0) 65%);filter:blur(28px);animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,100%{scale:1;opacity:.75}50%{scale:1.12;opacity:1}}
.phone,.floating{will-change:transform}
.js-motion .phone,.js-motion .floating{opacity:0}
.loaded .main-phone{animation:phoneIn 1.4s var(--ease) calc(var(--base) + .2s) both,float 7s ease-in-out calc(var(--base) + 1.6s) infinite}
.loaded .side.left{animation:phoneIn 1.4s var(--ease) calc(var(--base) + .38s) both,float 6.2s ease-in-out calc(var(--base) + 1.8s) infinite}
.loaded .side.right{animation:phoneIn 1.4s var(--ease) calc(var(--base) + .5s) both,float 6.6s ease-in-out calc(var(--base) + 2s) infinite}
.loaded .floating{animation:cardIn 1.2s var(--ease-back) calc(var(--base) + .95s) both,float 4.8s ease-in-out calc(var(--base) + 2.2s) infinite}
@keyframes phoneIn{from{opacity:0;translate:0 90px;scale:.86}to{opacity:1;translate:0 0;scale:1}}
@keyframes cardIn{from{opacity:0;translate:-40px 30px;scale:.7}to{opacity:1;translate:0 0;scale:1}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
.phone img{transition:scale 1.2s var(--ease)}
.hero-art:hover .phone img{scale:1.04}
.floating b{display:inline-block;animation:nudge 1.8s var(--ease-io) infinite}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:4px -4px}}
.phone-bottom strong{position:relative;overflow:hidden}
.phone-bottom strong:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);translate:-120% 0;animation:sweep 3.2s var(--ease-io) 2.5s infinite}
@keyframes sweep{0%,55%{translate:-120% 0}100%{translate:120% 0}}

/* ---------- Split headings ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em;margin:0 -.06em -.12em}
.wi{display:inline-block;transform-origin:0 100%}
.js-motion .split .wi{translate:0 112%;rotate:5deg;transition:translate 1.15s var(--ease) calc(var(--wi) * 45ms),rotate 1.15s var(--ease) calc(var(--wi) * 45ms)}
.js-motion .split.in .wi,.loaded .hero h1.split .wi{translate:0 0;rotate:0deg}
.loaded .hero h1.split .wi{transition-delay:calc(var(--base) + .12s + var(--wi) * 55ms)}

/* Highlighter sweep on <mark> */
.js-motion mark{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/0% 100%;transition:background-size 1.1s var(--ease-io) .5s}
.js-motion mark.lit,.loaded .hero mark{background-size:100% 100%}
.loaded .hero mark{transition-delay:calc(var(--base) + .95s)}

/* ---------- Scroll reveals ---------- */
.js-motion .m-up{opacity:0;translate:0 44px;transition:opacity 1s var(--ease) var(--d,0s),translate 1.25s var(--ease) var(--d,0s)}
.js-motion .m-up.in{opacity:1;translate:0 0}
.js-motion .m-scale{clip-path:inset(5% 4% 5% 4% round 48px);scale:.97;transition:clip-path 1.4s var(--ease),scale 1.4s var(--ease)}
.js-motion .m-scale.in{clip-path:inset(0 0 0 0 round var(--radius));scale:1}
.js-motion .m-img{clip-path:inset(100% 0 0 0 round 20px);transition:clip-path 1.5s var(--ease-io)}
.js-motion .m-img.in{clip-path:inset(0 0 0 0 round 20px)}
.js-motion .product>img,.js-motion .audience img{scale:1.18;transition:scale 1.6s var(--ease)}
.js-motion .product.seen>img,.js-motion .audience.seen img{scale:1}
.js-motion .product.seen:hover>img,.js-motion .audience.seen:hover img{scale:1.07;transition-duration:.9s}
[data-count]{font-variant-numeric:tabular-nums}
.valuebar strong[data-count]{display:inline-block}
.price .price-num{display:inline-block;font-size:inherit;letter-spacing:inherit;color:inherit}
.pop{animation:pop .6s var(--ease-back)}
@keyframes pop{40%{scale:1.14}}

/* ---------- Cards: 3D tilt + spotlight ---------- */
.tilt{position:relative;transition:transform .7s var(--ease),box-shadow .6s var(--ease),border-color .4s}
.tilt.tilting{transition:transform .14s ease-out,box-shadow .4s,border-color .4s}
.tilt:hover{box-shadow:0 26px 50px rgba(0,0,0,.1);border-color:#d9d3b4}
.tilt:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--px,50%) var(--py,50%),rgba(255,212,42,.22),transparent 45%)}
.tilt:hover:after{opacity:1}
.metrics article.tilt:hover{border-color:#80701e;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.icon{transition:rotate .5s var(--ease-back),scale .5s var(--ease-back),background-color .3s,color .3s}
.benefit:hover .icon{rotate:-10deg;scale:1.14;background:var(--yellow);color:#090909}
.metrics strong{display:block;transition:translate .5s var(--ease)}

/* ---------- CTA buttons ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s var(--ease),translate .6s var(--ease)}
.cta:before{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 4.8s var(--ease-io) infinite}
.cta.black:before{background:linear-gradient(100deg,transparent,rgba(255,212,42,.3),transparent)}
@keyframes shine{0%,62%{left:-60%}100%{left:130%}}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(188,160,34,.38)}
.cta.black:hover{box-shadow:0 16px 34px rgba(0,0,0,.35)}
.cta:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.cta span{display:inline-block;transition:transform .5s var(--ease-back)}
.cta:hover span{transform:translate(4px,-4px) rotate(8deg)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);pointer-events:none;z-index:-1;animation:ripple .75s var(--ease) forwards}
.cta.black .ripple{background:rgba(255,212,42,.35)}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- Section details ---------- */
.system-map span{transition:all .3s;animation:node 3.6s ease-in-out infinite}
.system-map span:nth-of-type(2){animation-delay:1.2s}
.system-map span:nth-of-type(3){animation-delay:2.4s}
@keyframes node{0%,40%,100%{border-color:#3e4232;background:#20221b;color:#fff;box-shadow:none}12%,28%{border-color:var(--yellow);background:#2a2912;color:var(--yellow);box-shadow:0 0 26px rgba(255,212,42,.28)}}
.system-map b{display:inline-block;animation:arrow 1.2s ease-in-out infinite}
@keyframes arrow{50%{translate:0 5px;opacity:.45}}
.market em{background:linear-gradient(100deg,var(--yellow) 0%,var(--yellow) 38%,#fff7c9 50%,var(--yellow) 62%,var(--yellow) 100%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3.8s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-160% 0}}
.today{animation:todayGlow 2.6s ease-in-out infinite}
@keyframes todayGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,212,42,.55)}60%{box-shadow:0 0 0 12px rgba(255,212,42,0)}}
.value{transition:rotate .4s var(--ease-back),scale .4s var(--ease-back)}
.product:hover .value{rotate:-4deg;scale:1.08}
.founder-banner{position:relative;overflow:hidden;isolation:isolate}
.founder-banner:before{content:'';position:absolute;width:560px;height:560px;right:-180px;top:-220px;z-index:-1;border-radius:50%;border:70px solid rgba(255,255,255,.22);animation:spin 26s linear infinite}
@keyframes spin{to{rotate:360deg}}
.not-needed strong{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 90%/100% 35%}
.faq summary{transition:color .25s,padding-left .45s var(--ease)}
.faq summary:hover{padding-left:8px}
.faq summary span{transition:transform .5s var(--ease-back)}
.faq details.closing summary span{transform:none}

/* Final CTA blobs */
.final{position:relative;overflow:hidden;isolation:isolate}
.final:before,.final:after{content:'';position:absolute;width:520px;height:520px;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.7;animation:blob 14s ease-in-out infinite alternate}
.final:before{background:#fff4ad;top:-230px;left:-140px}
.final:after{background:#ffb700;bottom:-260px;right:-140px;animation-delay:-7s}
@keyframes blob{0%{translate:0 0;scale:1}50%{translate:90px 40px;scale:1.18}100%{translate:-40px 90px;scale:.9}}

/* ---------- Marquee ---------- */
.marquee{width:110vw;margin:0 0 40px calc(50% - 55vw);padding:17px 0;background:#090909;color:var(--yellow);overflow:hidden;rotate:-1.6deg;user-select:none}
.marquee.alt{margin:70px 0 -20px calc(50% - 55vw);background:var(--yellow);color:#090909;rotate:1.4deg}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee.alt .marquee-track{animation-direction:reverse;animation-duration:36s}
.marquee-track span{flex:none;padding:0 26px;font-size:clamp(20px,2.8vw,36px);font-weight:900;letter-spacing:-1px;white-space:nowrap}
.marquee-track span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px currentColor}
.marquee .marquee-track span:nth-child(even){-webkit-text-stroke-color:var(--yellow)}
.marquee.alt .marquee-track span:nth-child(even){-webkit-text-stroke-color:#090909}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Cursor follower (desktop) ---------- */
.cursor{position:fixed;top:0;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:9999;border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .3s,width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background-color .4s}
.cursor.on{opacity:1}
.cursor.hover{width:70px;height:70px;margin:-35px 0 0 -35px;background:#fff}
.cursor.down{width:24px;height:24px;margin:-12px 0 0 -12px}

/* ---------- Overlays ---------- */
.sticky-cta{transform:translateY(115%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
.sticky-cta.show{transform:none;visibility:visible;transition:transform .55s var(--ease)}
.toast{transform:translate(-50%,24px) scale(.94);transition:opacity .35s,transform .6s var(--ease-back)}
.toast.visible{transform:translate(-50%,0) scale(1)}
dialog[open]{animation:dlg .55s var(--ease)}
dialog[open]::backdrop{animation:fade .4s ease}
@keyframes dlg{from{opacity:0;translate:0 30px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes fade{from{opacity:0}}

@media(max-width:760px){
  .header{top:8px}
  .header nav.open{animation:navIn .5s var(--ease)}
  .header nav.open a{animation:navItem .6s var(--ease) both}
  .header nav.open a:nth-child(2){animation-delay:.05s}
  .header nav.open a:nth-child(3){animation-delay:.1s}
  .header nav.open a:nth-child(4){animation-delay:.15s}
  .header nav a:after{display:none}
  .marquee{margin-bottom:28px;padding:13px 0}
  .marquee.alt{margin-top:50px}
  .founder-banner:before{width:340px;height:340px;border-width:44px;right:-140px;top:-140px}
}
@keyframes navIn{from{opacity:0;translate:0 -10px}}
@keyframes navItem{from{opacity:0;translate:-16px 0}}

@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important}.preloader{display:none!important}.sticky-cta{transition:none}}