:root{
  --bg:#05080f;--navy:#08142a;--navy2:#0d1f3f;--line:rgba(255,255,255,.10);
  --red:#ff2650;--red2:#c8102e;--blue:#3cc3e6;--blue2:#2f8cff;
  --text:#e9eff8;--muted:#9fb0c6;
  --head:'Barlow Condensed',Impact,sans-serif;--body:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
section{position:relative;padding:clamp(72px,11vw,150px) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative}
h1,h2,h3{font-family:var(--head);font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.005em}
h2{font-size:clamp(40px,7vw,84px)}
h3{font-size:clamp(24px,3vw,32px);line-height:1.05}
em{font-style:normal;background:linear-gradient(90deg,var(--red),#ff6a4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
p.lead{font-size:clamp(18px,2.2vw,22px);color:var(--muted);max-width:34em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font:700 16px/1 var(--body);letter-spacing:.01em;transition:transform .25s,box-shadow .25s,background .25s;will-change:transform}
.btn.primary{background:linear-gradient(135deg,#ff4a60,#d3142c 60%,#a10c20);color:#fff;box-shadow:0 14px 34px -10px rgba(255,38,80,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -10px rgba(255,38,80,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(4px)}

/* fixed book button */
.book-fixed{position:fixed;top:14px;right:14px;z-index:100;padding:12px 22px;font-size:15px}
.book-fixed::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,38,80,.6);animation:ring 2.6s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,38,80,.55)}70%,100%{box-shadow:0 0 0 18px rgba(255,38,80,0)}}

/* cursor glow */
.glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(255,38,80,.14),rgba(47,140,255,.06) 45%,transparent 70%);pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
@media(hover:hover) and (pointer:fine){.glow{opacity:1}}

/* reveal */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* HERO */
.hero{min-height:100svh;padding-top:90px;padding-bottom:0;display:flex;align-items:stretch;overflow:hidden;background:
 radial-gradient(70% 55% at 85% 20%,rgba(255,38,80,.22),transparent 65%),
 radial-gradient(60% 50% at 0% 90%,rgba(47,140,255,.20),transparent 65%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:20px;width:100%}
.hero-copy{padding-bottom:clamp(40px,8vw,90px);align-self:center;position:relative;z-index:3}
.rotator{display:grid;font-size:clamp(54px,9.4vw,128px);min-height:2.05em;margin-bottom:22px}
.rotator span{grid-area:1/1;opacity:0;transform:translateY(40px);filter:blur(10px);transition:all .8s cubic-bezier(.2,.7,.2,1);display:block}
.rotator span.on{opacity:1;transform:none;filter:none}
.rotator span.out{opacity:0;transform:translateY(-40px);filter:blur(10px)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 36px}
.chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.chips li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.chips img{height:30px;width:auto}
.chips b{color:#fff}
.hero-photo{position:relative;align-self:end;height:min(86svh,860px);display:flex;justify-content:center;align-items:flex-end}
.hero-photo::before{content:"";position:absolute;left:50%;bottom:6%;width:92%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:conic-gradient(from 200deg,rgba(255,38,80,.55),rgba(47,140,255,.5),rgba(255,38,80,.55));filter:blur(70px);opacity:.55;animation:spin 18s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero-photo img{position:relative;height:100%;width:auto;max-width:none;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 47%,#000 46%,transparent 94%);mask-image:radial-gradient(ellipse 52% 50% at 50% 47%,#000 46%,transparent 94%);animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--line);border-radius:14px;z-index:4}
.scrollcue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--red);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* PROBLEM */
.problem{background:linear-gradient(var(--bg),var(--navy) 50%,var(--bg))}
.problem h2{margin-bottom:16px}
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.scene{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--navy2);isolation:isolate}
.scene video,.scene .fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(5,8,15,.92));z-index:1}
.scene .tx{position:absolute;left:22px;right:22px;bottom:22px;z-index:2}
.scene .tx p{color:var(--muted);font-size:15px;margin-top:10px}
.scene .no{font:700 13px var(--body);color:var(--red);letter-spacing:.2em;margin-bottom:8px;display:block}
.fb svg{width:100%;height:100%}
.fb .p1{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3.6s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:420}60%,100%{stroke-dashoffset:0}}
.fb .bl{animation:fall 3.2s cubic-bezier(.5,0,.8,.4) infinite;transform-box:fill-box}
@keyframes fall{0%{transform:translateY(-120px);opacity:0}15%{opacity:1}100%{transform:translateY(0);opacity:1}}

/* TURN */
.turn{padding-top:clamp(90px,14vw,190px);padding-bottom:clamp(90px,14vw,190px);background:radial-gradient(60% 60% at 50% 50%,rgba(255,38,80,.12),transparent 70%),var(--bg);text-align:center}
.turn .big{font:800 clamp(40px,8.4vw,112px)/1.02 var(--head);text-transform:uppercase;max-width:15em;margin:0 auto}
.turn .big span{opacity:.16;transition:opacity .25s}
.turn .big span.lit{opacity:1}
.turn .big span.hl.lit{color:var(--red)}

/* HOW */
.how{background:linear-gradient(var(--bg),var(--navy));}
.how .head{max-width:760px;margin-bottom:60px}
.steps{position:relative;display:grid;gap:clamp(40px,6vw,90px);padding-left:clamp(56px,9vw,120px)}
.steps::before,.steps .fill{content:"";position:absolute;left:clamp(18px,3vw,38px);top:0;bottom:0;width:2px;background:var(--line)}
.steps .fill{background:linear-gradient(var(--red),var(--blue2));height:0;bottom:auto;box-shadow:0 0 18px rgba(255,38,80,.7)}
.step{position:relative}
.step .n{position:absolute;left:calc(-1*clamp(56px,9vw,120px) + clamp(18px,3vw,38px) - 22px);top:0;width:46px;height:46px;border-radius:50%;background:var(--bg);border:2px solid var(--line);display:grid;place-items:center;font:800 20px var(--head);transition:all .5s}
.step.lit .n{border-color:var(--red);color:#fff;background:var(--red2);box-shadow:0 0 24px rgba(255,38,80,.6)}
.step h3{font-size:clamp(34px,5vw,60px);margin-bottom:12px}
.step p{color:var(--muted);max-width:34em;font-size:clamp(17px,2vw,20px)}

/* TOOLS */
.tools{background:var(--navy);overflow:hidden}
.tools .head{max-width:760px;margin-bottom:54px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.tcard{position:relative;border-radius:24px;padding:28px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));overflow:hidden}
.tcard .ico{width:56px;height:56px;padding:12px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);margin-bottom:18px}
.tcard h3{margin-bottom:10px;font-size:34px}
.tcard>p{color:var(--muted);margin-bottom:24px}
.demo{position:relative;border-radius:16px;background:#030710;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10}
/* video demo */
.vdemo svg{position:absolute;inset:0;width:100%;height:100%}
.vdemo .arc{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:arc 4.5s ease-in-out infinite}
@keyframes arc{0%{stroke-dashoffset:600}55%,100%{stroke-dashoffset:0}}
.vdemo .fig{stroke:#cfe3ff;stroke-width:3;stroke-linecap:round;fill:none;opacity:.8}
.vdemo .jt{fill:var(--blue)}
.vdemo .scrub{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.vdemo .scrub i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);border-radius:2px;animation:scrub 4.5s ease-in-out infinite}
@keyframes scrub{0%{width:0}55%,100%{width:100%}}
.vdemo .tag{position:absolute;left:14px;top:12px;font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,38,80,.85);padding:4px 9px;border-radius:5px}
.vdemo .tag::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
/* trackman demo */
.tdemo{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;aspect-ratio:auto;min-height:260px;background:#030a18;background-image:linear-gradient(rgba(60,130,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(60,130,255,.12) 1px,transparent 1px);background-size:28px 28px}
.stat{border:1px solid rgba(47,140,255,.5);background:rgba(10,30,62,.8);border-radius:10px;padding:10px 12px}
.stat small{display:block;font:500 10.5px 'Inter';letter-spacing:.1em;text-transform:uppercase;color:#7fb2e6}
.stat strong{font:800 30px/1.1 var(--head);color:#fff}
.stat strong u{text-decoration:none;font:500 12px var(--body);color:#7fb2e6;margin-left:4px}
.stat.red strong{color:var(--red)}
.tdemo{grid-template-columns:1fr 1.15fr;grid-template-rows:repeat(3,auto) auto}
.stat.s1{grid-column:1;grid-row:1}.stat.s2{grid-column:1;grid-row:2}.stat.s3{grid-column:1;grid-row:3}
.stat.sweet{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;background:radial-gradient(80% 70% at 55% 60%,rgba(255,38,80,.14),rgba(10,30,62,.8))}
.stat.sweet svg{flex:1;height:auto;margin-top:6px;overflow:visible}
.stat.wide{grid-column:1/3;grid-row:4}
.ringc{filter:drop-shadow(0 0 6px rgba(255,38,80,.9))}
.ringp{transform-origin:100px 80px;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.hit{fill:#e9f4ff;opacity:0;animation:hit 5s infinite}
.hit.h5{fill:#ff2650;filter:drop-shadow(0 0 5px #ff2650)}
.h1{--x:-34px;--y:-22px;animation-delay:.2s}.h2{--x:30px;--y:-26px;animation-delay:.9s}.h3{--x:-24px;--y:24px;animation-delay:1.6s}.h4{--x:-8px;--y:-10px;animation-delay:2.3s}.h5{--x:2px;--y:3px;animation-delay:3s}
@keyframes hit{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.4)}8%{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}60%{opacity:1;transform:translate(var(--x),var(--y)) scale(1)}80%,100%{opacity:0}}
.vdemo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.vdemo .tag,.vdemo .scrub{z-index:3}
.hit{transform-box:fill-box;transform-origin:center}

.stat svg{width:100%;height:70px;display:block;margin-top:2px}
.stat .tr{fill:none;stroke:var(--blue2);stroke-width:2.4;stroke-dasharray:300;stroke-dashoffset:300;animation:arc2 4s ease-in-out infinite}
.stat .tr2{stroke:var(--red);stroke-dasharray:3 5;animation:none;stroke-dashoffset:0;opacity:.85}
@keyframes arc2{0%{stroke-dashoffset:300}60%,100%{stroke-dashoffset:0}}
.ex{font-size:11px;color:#6b7e99;margin-top:10px}

/* COACH */
.coach{background:var(--bg);padding-left:0;padding-right:0}
.coach .head{padding:0 var(--pad);max-width:calc(var(--maxw) + 2*var(--pad));margin:0 auto 46px}
.reel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 10px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.shot{flex:0 0 min(82vw,720px);aspect-ratio:3/2;border-radius:22px;overflow:hidden;position:relative;scroll-snap-align:center;border:1px solid var(--line)}
.shot img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(5,8,15,.8)),linear-gradient(115deg,rgba(8,20,42,.35),transparent 50%)}
.shot span{position:absolute;left:20px;bottom:16px;z-index:2;font:700 22px var(--head);text-transform:uppercase;letter-spacing:.04em}
.coach .note{padding:0 var(--pad);max-width:calc(var(--maxw) + 2*var(--pad));margin:30px auto 0;color:var(--muted)}

/* PROOF */
.proof{background:linear-gradient(var(--bg),var(--navy2) 60%,var(--bg))}
.nums{display:flex;flex-wrap:wrap;gap:clamp(24px,6vw,80px);align-items:center;margin:34px 0 56px}
.num{display:flex;align-items:baseline;gap:12px}
.num b{font:800 clamp(64px,10vw,120px)/1 var(--head);background:linear-gradient(var(--text),#8fa6c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.num span{color:var(--muted);max-width:11em;line-height:1.3;font-size:15px}
.nums img{height:96px;width:auto}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{padding:26px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));position:relative;display:flex;flex-direction:column;gap:18px}
.rev::before{content:"“";position:absolute;right:20px;top:-4px;font:800 120px/1 var(--head);color:rgba(255,38,80,.35)}
.rev p{font-size:18px;position:relative}
.rev cite{font-style:normal;color:var(--muted);font-size:14px;margin-top:auto}
.rev.todo p{color:var(--muted);font-style:italic}

/* PRICE */
.price{background:var(--bg)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:46px;max-width:860px}
.pc{padding:34px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));position:relative;overflow:hidden}
.pc.hot{border-color:rgba(255,38,80,.55);background:linear-gradient(160deg,rgba(255,38,80,.22),rgba(255,255,255,.03))}
.pc small{display:block;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin-bottom:8px}
.pc .amt{font:800 clamp(60px,9vw,96px)/1 var(--head)}
.pc .amt span{font-size:.38em;color:var(--muted);margin-left:6px;letter-spacing:.02em}
.pc p{color:var(--muted);margin-top:8px;font-size:15px}
.paynote{margin-top:24px;color:var(--muted);max-width:40em}

/* PLACE */
.place{background:linear-gradient(var(--bg),var(--navy))}
.pl{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:stretch}
.pl .info{display:flex;flex-direction:column;gap:18px;justify-content:center}
.pl .info img{height:120px;width:auto;border-radius:16px;box-shadow:0 14px 30px rgba(0,0,0,.5);align-self:flex-start}
.pl address{font-style:normal;font-size:22px;line-height:1.4}
.map{border-radius:24px;overflow:hidden;border:1px solid var(--line);min-height:340px;position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(185deg) saturate(.8) brightness(.9) contrast(1.05)}

/* FINAL */
.final{text-align:center;padding-top:clamp(100px,14vw,200px);padding-bottom:clamp(100px,14vw,200px);background:radial-gradient(60% 70% at 50% 100%,rgba(255,38,80,.3),transparent 70%),radial-gradient(50% 50% at 10% 0%,rgba(47,140,255,.22),transparent 70%),var(--navy)}
.final h2{font-size:clamp(46px,9vw,120px);max-width:12em;margin:0 auto 32px}
footer{padding:30px var(--pad) 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;background:var(--bg)}

/* BOOKING PAGE */
.bk{min-height:100svh;padding-top:110px;background:radial-gradient(60% 50% at 90% 0%,rgba(255,38,80,.2),transparent 65%),radial-gradient(50% 50% at 0% 100%,rgba(47,140,255,.2),transparent 65%),var(--bg)}
.bk .back{position:fixed;top:14px;left:14px;z-index:100;padding:11px 18px;font-size:14px}
.bk h1{font-size:clamp(52px,9vw,110px);margin-bottom:18px}
.bk .cols{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;margin-top:44px;align-items:start}
.bk .facts{display:grid;gap:14px}
.fact{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.fact b{display:block;margin-bottom:2px}
.fact span{color:var(--muted);font-size:15px}
.fact i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--red2);display:grid;place-items:center;font:800 16px var(--head);font-style:normal}
.cal{border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));min-height:520px;overflow:hidden;position:relative}
.cal iframe{width:100%;height:700px;border:0;display:block}
.cal .ph{display:grid;place-items:center;text-align:center;min-height:520px;padding:30px;color:var(--muted)}
.cal .ph b{display:block;font:800 30px var(--head);text-transform:uppercase;color:var(--text);margin-bottom:8px}

/* responsive */
@media(min-width:901px){.fb .pile{transform:translateY(-105px)}}
@media(max-width:900px){
  body{font-size:16px}
  .hero{padding-top:78px}
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:0}
  .hero-photo{height:60svh;margin-top:-34px}
  .hero .btn.ghost{display:none}
  .cta-row{margin:24px 0 22px}
  .chips li:nth-child(2){display:none}
  .eyebrow{font-size:11px;letter-spacing:.14em}
  .rotator{min-height:2.1em}
  .scenes,.revs,.tgrid,.pgrid,.pl,.bk .cols{grid-template-columns:1fr}
  .scene{aspect-ratio:4/5}
  .scenes{gap:16px}
  .tdemo{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none;filter:none}
    .turn .big span{opacity:1}
  html{scroll-behavior:auto}
}

/* TOOLS v2: wide cards */
.tgrid{grid-template-columns:1fr;gap:28px}
.tcard.tc-video{display:grid;grid-template-columns:1.1fr minmax(260px,380px);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,4vw,48px)}
.tcard.tc-track{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"demo text" "ex text";gap:12px clamp(24px,5vw,72px);align-items:center;padding:clamp(24px,4vw,48px)}
.tc-track .tdemo{grid-area:demo;margin:0}
.tc-track .tc-text{grid-area:text}
.tc-track .ex{grid-area:ex;margin:0}
.tc-text>p{color:var(--muted);margin-bottom:26px;max-width:32em}
.phases{list-style:none;display:grid;gap:12px}
.phases li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);opacity:.55;transition:opacity .4s,border-color .4s,background .4s,transform .4s}
.phases li i{flex:none;width:12px;height:12px;border-radius:50%;margin-top:6px;background:#53627d;transition:all .4s}
.phases li b{display:block;font:700 18px var(--head);text-transform:uppercase;letter-spacing:.03em}
.phases li span{display:block;color:var(--muted);font-size:14.5px;line-height:1.45}
.phases li.on{opacity:1;background:rgba(255,255,255,.07);transform:translateX(6px)}
.phases li[data-ph=back].on,.phases li[data-ph=top].on{border-color:rgba(255,38,80,.7)}
.phases li[data-ph=back].on i,.phases li[data-ph=top].on i{background:#ff2650;box-shadow:0 0 14px #ff2650}
.phases li[data-ph=down].on,.phases li[data-ph=impact].on{border-color:rgba(61,255,154,.7)}
.phases li[data-ph=down].on i,.phases li[data-ph=impact].on i{background:#3dff9a;box-shadow:0 0 14px #3dff9a}
.vstage{position:relative;aspect-ratio:9/16;width:100%;max-width:380px;justify-self:center;border-radius:24px;overflow:hidden;background:#0b1d42;border:1px solid rgba(120,170,255,.35);box-shadow:0 30px 80px -24px rgba(47,140,255,.5),0 0 0 6px rgba(255,255,255,.03)}
.vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vstage svg{position:absolute;inset:0;width:100%;height:100%}
#ovg{transition:opacity .6s}
.trail{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.2}
.trail.red{stroke:#ff2650;filter:drop-shadow(0 0 4px rgba(255,38,80,.95))}
.trail.green{stroke:#3dff9a;filter:drop-shadow(0 0 4px rgba(61,255,154,.95))}
.pulse{fill:none;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
#dot{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.vtag{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;background:rgba(5,8,15,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);padding:6px 11px;border-radius:999px}
.vtag i{width:7px;height:7px;border-radius:50%;background:#ff2650;animation:blink 1.2s infinite}
@media(max-width:900px){
  .tcard.tc-video{grid-template-columns:1fr}
  .tcard.tc-track{grid-template-columns:1fr;grid-template-areas:"text" "demo" "ex"}
  .vstage{max-width:340px}
}

.hero .eyebrow{margin-bottom:44px}
@media(max-width:900px){.hero .eyebrow{margin-bottom:16px}}

.joke{max-width:30em;margin:34px auto 0;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.5;opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s}
.joke.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.joke{opacity:1;transform:none}}