:root{
  --surface:#FFFFFF;
  --surface-alt:#F7FFF7;
  --card:#FFFFFF;
  --text:#29335C;
  --text-dim:rgba(41,51,92,.62);
  --text-faint:rgba(41,51,92,.34);
  --line:rgba(41,51,92,.11);
  --primary:#D1194E;
  --primary-ink:#FFFFFF;
  --secondary:#88E8BD;
  --shadow:rgba(41,51,92,.14);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface:#1C1A1B;
    --surface-alt:#242122;
    --card:#242122;
    --text:#F7FFF7;
    --text-dim:rgba(247,255,247,.64);
    --text-faint:rgba(247,255,247,.34);
    --line:rgba(247,255,247,.13);
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --surface:#1C1A1B;
  --surface-alt:#242122;
  --card:#242122;
  --text:#F7FFF7;
  --text-dim:rgba(247,255,247,.64);
  --text-faint:rgba(247,255,247,.34);
  --line:rgba(247,255,247,.13);
  --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:'Spline Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:700;}
p{margin:0; text-wrap:pretty;}
a{color:inherit;}
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
}
.eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--primary);
  font-weight:500;
  text-shadow:0 0 14px rgba(209,25,78,.63), 0 0 34px rgba(209,25,78,.28);
}

.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

header.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 0;
}
.logo{
  height:23px; width:auto; display:block;
  filter:drop-shadow(0 0 8px rgba(209,25,78,.56)) drop-shadow(0 0 22px rgba(209,25,78,.31));
}
.logo-sm{height:18px;}
.dot-glow{box-shadow:0 0 13px rgba(209,25,78,.91), 0 0 25px rgba(209,25,78,.42);}
.nav-link{
  font-size:14.5px; font-weight:500; color:var(--text);
  text-decoration:none; opacity:.82;
  padding:9px 4px;
  border-bottom:1.5px solid transparent;
  transition:opacity .15s ease, border-color .15s ease;
}
.nav-link:hover{opacity:1; border-color:var(--primary);}
.nav-link:focus-visible{outline:2px solid var(--primary); outline-offset:4px;}

/* ---------- HERO ---------- */
.hero{
  padding:76px 0 40px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem, 6vw, 4.3rem);
  line-height:1.04;
  margin:20px 0 22px;
  max-width:14ch;
}
.hero-sub{
  font-size:18.5px;
  line-height:1.62;
  color:var(--text-dim);
  font-weight:400;
  max-width:46ch;
  margin-bottom:34px;
}
.btn-primary{
  font-family:'Spline Sans',sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--primary-ink);
  background:var(--primary);
  padding:15px 30px;
  border-radius:10px;
  text-decoration:none;
  display:inline-block;
  box-shadow:
    0 16px 32px -16px rgba(209,25,78,.55),
    0 0 28px rgba(209,25,78,.49),
    0 0 64px rgba(209,25,78,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 20px 36px -14px rgba(209,25,78,.6),
    0 0 36px rgba(209,25,78,.63),
    0 0 84px rgba(209,25,78,.31);
}
.btn-primary:focus-visible{outline:2px solid var(--text); outline-offset:3px;}
button.btn-primary{border:0; cursor:pointer; flex:none;}
button.btn-primary:disabled{opacity:.6; cursor:progress; transform:none;}

/* demo video (thumbnail until clicked; player loads on demand) */
.video{
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow:0 30px 60px -30px var(--shadow);
}
.video img,
.video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border:0;
}
.video-facade{position:absolute; inset:0; display:block;}
.play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%;
  background:var(--primary);
  display:grid; place-items:center;
  box-shadow:0 0 28px rgba(209,25,78,.6), 0 0 64px rgba(209,25,78,.3);
  transition:transform .15s ease, box-shadow .15s ease;
}
.play svg{width:30px; height:30px; margin-left:4px; fill:#FFFFFF;}
.video-facade:hover .play{
  transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 36px rgba(209,25,78,.75), 0 0 84px rgba(209,25,78,.38);
}
.video-facade:focus-visible{outline:none;}
.video-facade:focus-visible .play{outline:3px solid #FFFFFF; outline-offset:4px;}
@media (max-width:520px){ .play{width:60px; height:60px;} .play svg{width:24px; height:24px;} }

/* waitlist form */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.hp{position:absolute; left:-10000px;}
.waitlist{
  width:100%; max-width:480px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.waitlist-row{display:flex; gap:10px; width:100%;}
@media (max-width:480px){ .waitlist-row{flex-direction:column;} }
.waitlist input[type="email"]{
  flex:1; min-width:0;
  font:inherit; font-size:16px;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.waitlist input[type="email"]::placeholder{color:var(--text-faint);}
.waitlist input[type="email"]:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(209,25,78,.18), 0 0 18px rgba(209,25,78,.25);
}
.platform{
  border:0; margin:0; padding:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
}
.platform legend{
  float:left; margin-right:4px;
  font-size:14px; color:var(--text-dim);
}
.platform label{
  font-size:14px; font-weight:500;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.platform input{position:absolute; opacity:0; pointer-events:none;}
.platform label:hover{border-color:var(--text-faint);}
.platform label:has(input:checked){border-color:var(--primary); color:var(--primary);}
.platform label:has(input:focus-visible){outline:2px solid var(--primary); outline-offset:2px;}
.form-status{font-size:15px; min-height:0;}
.form-status:empty{display:none;}
.form-status.is-error{color:var(--primary);}
.waitlist.is-done .waitlist-row,
.waitlist.is-done .platform{display:none;}
.waitlist.is-done .form-status{
  font-size:16.5px; font-weight:500;
  padding:14px 20px;
  border:1px solid var(--line);
  border-radius:10px;
}
.micro-trust{
  font-family:ui-monospace,monospace;
  font-size:12px;
  color:var(--text-faint);
  margin-top:18px;
  letter-spacing:.03em;
}

/* product preview card */
.preview-stage{
  position:relative;
  margin-top:56px;
  padding:70px 0 10px;
  display:flex; justify-content:center;
}
.glow{
  position:absolute;
  top:0; left:50%; transform:translateX(-50%);
  width:640px; height:340px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 60%),
    radial-gradient(circle at 72% 55%, color-mix(in srgb, var(--secondary) 40%, transparent), transparent 62%);
  filter:blur(50px);
  opacity:.6;
  pointer-events:none;
}
.card{
  position:relative;
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 30px 60px -30px var(--shadow);
  padding:22px 22px 18px;
  text-align:left;
}
.card-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.card-head .mono{font-size:11.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase;}
.card-dots{display:flex; gap:5px;}
.card-dots span{width:6px; height:6px; border-radius:50%; background:var(--line);}
.event-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.event-row:first-of-type{border-top:none;}
.event-left{display:flex; align-items:center; gap:11px;}
.event-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.event-title{font-size:14.5px; font-weight:600;}
.event-time{font-size:12.5px; color:var(--text-dim); font-weight:400;}
.card-foot{
  display:flex; align-items:center; gap:10px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.avatars{display:flex;}
.avatars span{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--card);
  margin-left:-6px;
}
.avatars span:first-child{margin-left:0;}
.card-foot .mono{font-size:11.5px; color:var(--text-faint);}

/* ---------- BENEFITS ---------- */
section{padding:88px 0;}
.section-head{max-width:52ch; margin-bottom:48px;}
.section-head h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  margin-top:12px;
}

.benefits{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:44px 40px;
}
@media (max-width:760px){ .benefits{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .benefits{grid-template-columns:1fr;} }
.benefit{
  padding-top:20px;
  border-top:1.5px solid var(--line);
}
.benefit .icon{
  width:24px; height:24px; color:var(--primary);
  margin-bottom:16px;
  filter:drop-shadow(0 0 7px rgba(209,25,78,.7)) drop-shadow(0 0 17px rgba(209,25,78,.35));
}
.benefit .icon svg{width:100%; height:100%;}
.benefit h3{
  font-size:16px; font-weight:600; margin-bottom:8px;
}
.benefit p{
  font-size:14.5px; line-height:1.6; color:var(--text-dim); font-weight:400;
}

/* ---------- HOW IT WORKS ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:36px;} }
.step{padding:0 30px 0 0;}
.step:not(:last-child){border-right:1px solid var(--line);}
@media (max-width:760px){
  .step:not(:last-child){border-right:none; border-bottom:1px solid var(--line); padding-bottom:36px;}
}
.step-num{
  font-family:ui-monospace,monospace;
  font-size:13px; font-weight:500;
  color:var(--text-faint);
  margin-bottom:18px;
}
.step h3{font-size:19px; font-weight:600; margin-bottom:10px;}
.step p{font-size:14.5px; line-height:1.62; color:var(--text-dim); font-weight:400; max-width:30ch;}

/* ---------- FINAL CTA (brand band, fixed colors) ---------- */
.cta-band{
  background:#29335C;
  color:#F7FFF7;
  border-radius:22px;
  margin:0 28px 88px;
  padding:64px 40px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
@media (min-width:1080px){ .cta-band{margin-left:auto; margin-right:auto; max-width:1080px;} }
.cta-band .eyebrow{color:#88E8BD; text-shadow:0 0 10px rgba(136,232,189,.4), 0 0 22px rgba(136,232,189,.18);}
.cta-band h2{
  font-size:clamp(2rem, 4vw, 2.7rem);
  margin:16px 0 12px;
  color:#F7FFF7;
}
.cta-band p{
  font-size:16.5px; color:rgba(247,255,247,.72); font-weight:400;
  margin-bottom:30px;
}

footer{
  padding:30px 0 44px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line);
}
footer p{
  font-size:13px; color:var(--text-faint); font-weight:400;
}