/* Self-hosted Latin subsets (variable fonts, one file per family): no fonts.googleapis.com round trip. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}
:root{
  --forest:#0b2521;--ink:#071a18;--panel:#0e2c27;--panel-2:#134E4A;
  --teal:#14B8A6;--teal-2:#0F766E;--teal-3:#5EEAD4;--gold:#F59E0B;--gold-2:#FCD34D;
  --cream:#F4EFE1;--cream-2:#E9E1CE;--muted:#c9d6cf;
  --display:"Plus Jakarta Sans",Inter,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--mx:50vw;--my:30vh;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--teal-3)}
img{display:block;max-width:100%;height:auto}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(80px);opacity:.35;will-change:transform}
.glow-teal{background:radial-gradient(circle,var(--teal) 0%,transparent 60%);left:calc(var(--mx) - 35vmax);top:calc(var(--my) - 35vmax);transition:left 1.2s var(--ease),top 1.2s var(--ease)}
.glow-gold{background:radial-gradient(circle,var(--gold) 0%,transparent 60%);right:-30vmax;bottom:-30vmax;opacity:.16;animation:drift 14s ease-in-out infinite alternate}
.lines{position:absolute;inset:-50%;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(20,184,166,.06) 46px 48px);animation:sweep 22s linear infinite}
@keyframes sweep{to{transform:translateX(-160px)}}
@keyframes drift{to{transform:translate(-8vmax,-6vmax)}}

/* ---------- header ---------- */
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 16px;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);font-family:var(--display);font-weight:700;letter-spacing:.02em}
.brand b{color:var(--teal)}
.top-link{font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.top-link:hover{border-color:var(--teal)}

/* ---------- hero ---------- */
main{position:relative;z-index:1}
.hero{max-width:900px;margin:0 auto;padding:40px 16px 56px;text-align:center}
.mark-wrap{display:flex;justify-content:center;margin-bottom:24px}
/* The mark animates from first paint in CSS (gating it on app.js held LCP back ~3.5 s). The headline is static: it is the mobile LCP element. */
.mark{width:200px;clip-path:inset(0 100% 0 0);filter:drop-shadow(0 20px 40px rgba(20,184,166,.25));animation:wipe 1s var(--ease) .1s forwards,float 6s ease-in-out 1.2s infinite}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);opacity:1}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes float{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.eyebrow{margin:0 0 12px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,76px);line-height:1.02;letter-spacing:-.02em;margin:0 0 20px}
.lead{max-width:640px;margin:0 auto 28px;font-size:clamp(16px,2.2vw,19px);color:var(--muted)}
.track{position:relative;height:6px;max-width:520px;margin:0 auto 10px;border-radius:99px;background:rgba(244,239,225,.12);overflow:visible}
.fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal-2),var(--teal),var(--gold));transition:width 2.4s var(--ease)}
.runner{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(245,158,11,.18),0 0 24px var(--gold);transform:translate(-50%,-50%);transition:left 2.4s var(--ease)}
.is-ready .fill{width:79%}.is-ready .runner{left:79%}
.counter{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:0 0 30px;flex-wrap:wrap}
.counter .num{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,56px);color:var(--teal);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
.counter .num::before{content:counter(n);counter-reset:n var(--n)}
.is-ready .counter .num::before{animation:countup 2.4s var(--ease) forwards}
@keyframes countup{to{--n:79}}
.counter .plus{color:var(--gold);opacity:0;transition:opacity .4s 2.4s}
.is-ready .counter .plus{opacity:1}
.counter em{font-style:normal;color:var(--muted);font-size:15px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-gap{margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:14px;font-family:var(--display);font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(120deg,var(--teal) 0%,var(--teal) 45%,var(--gold) 140%);color:#032a26;background-size:200% 100%;box-shadow:0 10px 30px rgba(20,184,166,.25)}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,184,166,.35)}
.btn-ghost{color:var(--cream);border-color:rgba(244,239,225,.22);background:rgba(244,239,225,.04)}
.btn-ghost:hover{border-color:var(--teal);transform:translateY(-2px)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid rgba(244,239,225,.08);border-bottom:1px solid rgba(244,239,225,.08);padding:14px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 38s linear infinite;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee-track span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:14px;vertical-align:middle}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.cards{max-width:1100px;margin:0 auto;padding:72px 16px 24px}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.5vw,44px);letter-spacing:-.02em;margin:0 0 28px}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:linear-gradient(180deg,rgba(14,44,39,.9),rgba(11,37,33,.9));border:1px solid rgba(244,239,225,.1);border-radius:22px;padding:26px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.card::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--teal),transparent 40%,transparent 60%,var(--gold));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-6px)}.card:hover::after{opacity:1}
.card h3{font-family:var(--display);font-size:22px;margin:14px 0 8px}
.card p{margin:0;color:var(--muted)}
.chip{display:inline-block;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.2em;color:#032a26;background:var(--teal);padding:4px 10px;border-radius:99px}
.chip-gold{background:var(--gold)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.grid .reveal:nth-child(2){transition-delay:.12s}.grid .reveal:nth-child(3){transition-delay:.24s}

/* ---------- form ---------- */
.hello{max-width:760px;margin:0 auto;padding:40px 16px 80px}
.form-card{padding:30px 22px}
@media(min-width:640px){.form-card{padding:40px}}
.sub{margin:0 0 26px;color:var(--muted)}
.row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.row{grid-template-columns:1fr 1fr}}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
.field i{font-style:normal;opacity:.6}
input[type=text],input[type=email],textarea{width:100%;font:inherit;color:var(--cream);background:rgba(7,26,24,.7);border:1px solid rgba(244,239,225,.16);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.15)}
textarea{resize:vertical;min-height:96px}
.roles{border:0;padding:0;margin:4px 0 16px;display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.roles{grid-template-columns:repeat(4,1fr)}}
.roles legend{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px}
.roles label{position:relative;cursor:pointer}
.roles input{position:absolute;opacity:0;inset:0}
.roles span{display:block;padding:12px;border-radius:12px;border:1px solid rgba(244,239,225,.16);background:rgba(7,26,24,.5);text-align:center;transition:border-color .2s,transform .2s var(--ease),background .2s}
.roles b{display:block;font-family:var(--display);font-size:15px}
.roles small{color:var(--muted);font-size:12px}
.roles input:checked+span{border-color:var(--teal);background:rgba(20,184,166,.14);transform:scale(1.03);box-shadow:0 0 0 4px rgba(20,184,166,.12)}
.roles input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-submit{width:100%;position:relative;margin-top:4px}
.btn-submit .dots{display:none;gap:6px}.btn-submit .dots i{width:7px;height:7px;border-radius:50%;background:#032a26;animation:bounce .9s infinite}
.btn-submit .dots i:nth-child(2){animation-delay:.15s}.btn-submit .dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{transform:translateY(-6px)}}
.btn-submit.busy .label{display:none}.btn-submit.busy .dots{display:flex}
.err{margin:12px 0 0;color:#FCA5A5;font-size:14px}
.fine{margin:16px 0 0;font-size:12px;color:var(--muted);opacity:.8}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.done{position:relative;text-align:center;padding:20px 0 10px}
.done h3{font-family:var(--display);font-size:28px;margin:12px 0 6px}
.done p{color:var(--muted);margin:0}
.done svg{margin:0 auto;overflow:visible}
.ring{fill:none;stroke:var(--teal);stroke-width:3;stroke-dasharray:176;stroke-dashoffset:176;animation:draw .7s var(--ease) forwards}
.tick{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;left:50%;top:40px;width:8px;height:12px;border-radius:2px;background:var(--teal);opacity:0;animation:pop 1.3s var(--ease) forwards}
.confetti i:nth-child(odd){background:var(--gold);width:6px;height:6px;border-radius:50%}
.confetti i:nth-child(1){--dx:-140px;--dy:-90px}.confetti i:nth-child(2){--dx:-100px;--dy:-140px}.confetti i:nth-child(3){--dx:-60px;--dy:-170px}
.confetti i:nth-child(4){--dx:-20px;--dy:-190px}.confetti i:nth-child(5){--dx:20px;--dy:-185px}.confetti i:nth-child(6){--dx:60px;--dy:-165px}
.confetti i:nth-child(7){--dx:100px;--dy:-135px}.confetti i:nth-child(8){--dx:140px;--dy:-95px}.confetti i:nth-child(9){--dx:-170px;--dy:-30px}
.confetti i:nth-child(10){--dx:170px;--dy:-40px}.confetti i:nth-child(11){--dx:-80px;--dy:-60px}.confetti i:nth-child(12){--dx:80px;--dy:-70px}
.confetti i:nth-child(n){animation-delay:calc(.45s + .04s*var(--n,0))}
@keyframes pop{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg)}}

/* ---------- pre-register consent ---------- */
.consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;cursor:pointer}
.consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--teal)}
.consent span{font-size:13px;color:var(--muted)}
.consent a{color:var(--teal-3)}
.mini{font-size:13px;color:var(--muted);text-align:center;margin:14px 0 0}
.mini a{color:var(--teal-3)}

/* ---------- screenshots ---------- */
.shots{max-width:1100px;margin:0 auto;padding:24px 16px 56px}
.shots-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.shots-grid{grid-template-columns:repeat(5,1fr)}}
.shot{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.shot img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(244,239,225,.16);margin-bottom:8px;background:rgba(14,44,39,.5)}

/* ---------- Play badge (disabled until public) ---------- */
.play-badge{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:14px;border:1px solid rgba(244,239,225,.16);background:rgba(244,239,225,.04);color:inherit;font-family:var(--display);font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s}
.play-badge:hover{border-color:rgba(244,239,225,.4);background:rgba(244,239,225,.08)}
.play-badge svg{flex:none}
.play-badge small{display:block;font-weight:500;font-size:11px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;text-align:center;padding:24px 16px 40px;color:var(--muted);font-size:13px;border-top:1px solid rgba(244,239,225,.08)}
.foot p{margin:4px 0}.foot a{color:var(--cream)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mark{clip-path:none;opacity:1}.reveal{opacity:1;transform:none}
  .is-ready .fill{width:79%}.is-ready .runner{left:79%}.counter .plus{opacity:1}.counter .num::before{content:"79"}
}