:root { --volt:#CCFF33; --night:#0B1510; --astro:#12271C; --line:#22392C; --chalk:#F4F6F1; --soft:#C9D6CD; --mist:#9FB3A6; }
* { box-sizing: border-box; }
body { margin:0; background:var(--night); color:var(--soft); font:16px/1.6 Inter, system-ui, -apple-system, sans-serif; }
a { color:var(--volt); }
.wrap { max-width:760px; margin:0 auto; padding:32px 16px 64px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:40px; }
header img { width:40px; height:40px; border-radius:10px; }
header a { color:var(--chalk); text-decoration:none; font-weight:600; }
h1, h2 { font-family:Anton, Impact, sans-serif; font-style:italic; text-transform:uppercase; color:var(--chalk); font-weight:400; letter-spacing:.5px; }
h1 { font-size:clamp(40px, 9vw, 64px); line-height:1.02; margin:0 0 16px; }
h2 { font-size:26px; margin:40px 0 8px; }
h3 { color:var(--chalk); font-size:17px; margin:24px 0 4px; }
.lead { font-size:19px; color:var(--chalk); max-width:560px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin:32px 0; }
.card { background:var(--astro); border:1px solid var(--line); border-radius:16px; padding:18px; }
.card b { color:var(--chalk); display:block; margin-bottom:4px; }
.pill { display:inline-block; background:var(--volt); color:var(--night); font-weight:700; padding:12px 20px; border-radius:999px; text-decoration:none; }
footer { margin-top:56px; padding-top:20px; border-top:1px solid var(--line); color:var(--mist); font-size:14px; }
footer a { color:var(--mist); margin-right:16px; }
table { border-collapse:collapse; width:100%; font-size:15px; }
td, th { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); }
th { color:var(--chalk); font-weight:600; }

/* ---------- Homepage ---------- */
.home { overflow-x:hidden; position:relative; }
.home main, .nav, .site-footer { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding-left:20px; padding-right:20px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.volt { color:var(--volt); }
/* Floodlights over a pitch at night: two soft beams and faint pitch lines. */
.lights { position:absolute; inset:0 0 auto 0; height:1100px; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse 38% 55% at 12% -8%, rgba(204,255,51,.13), transparent 70%),
    radial-gradient(ellipse 38% 55% at 92% -6%, rgba(244,246,241,.10), transparent 70%); }
.lights::after { content:""; position:absolute; left:50%; bottom:0; width:1400px; height:520px; transform:translateX(-50%);
  border:2px solid rgba(244,246,241,.05); border-bottom:none; border-radius:0;
  background:
    radial-gradient(circle at 50% 100%, transparent 129px, rgba(244,246,241,.05) 130px, rgba(244,246,241,.05) 132px, transparent 133px);
  -webkit-mask-image:linear-gradient(to top, #000, transparent); mask-image:linear-gradient(to top, #000, transparent); }

.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:20px; padding-bottom:20px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--chalk); text-decoration:none; font-family:Anton, Impact, sans-serif; font-style:italic; text-transform:uppercase; font-size:22px; letter-spacing:.5px; }
.brand img { border-radius:9px; }
.pill { display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:var(--volt); color:var(--night); font-weight:700; padding:12px 22px; border-radius:999px; text-decoration:none; }
.pill.small { min-height:44px; padding:10px 18px; font-size:15px; }
.pill:hover, .waitlist button:hover { filter:brightness(1.06); }
.pill:focus-visible, .waitlist button:focus-visible, .waitlist input:focus-visible, summary:focus-visible { outline:3px solid var(--chalk); outline-offset:2px; }

.eyebrow { color:var(--volt); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; margin:0 0 12px; }
.home h1 { font-size:clamp(56px, 11vw, 112px); line-height:.94; margin:0 0 20px; }
.home h2 { font-size:clamp(34px, 5.5vw, 52px); line-height:1; margin:0 0 16px; }
.home .lead { font-size:clamp(17px, 2vw, 20px); line-height:1.55; max-width:540px; margin:0 0 28px; }

.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:40px; padding-bottom:72px; }
.waitlist { max-width:520px; }
.field-row { display:flex; gap:8px; background:var(--astro); border:1px solid var(--line); border-radius:999px; padding:6px; }
.field-row input { flex:1; min-width:0; min-height:48px; background:transparent; border:0; color:var(--chalk); font:inherit; font-size:17px; padding:0 16px; }
.field-row input::placeholder { color:var(--mist); }
.field-row input:focus-visible { outline:none; }
.field-row:focus-within { border-color:var(--volt); }
.waitlist button { min-height:48px; border:0; border-radius:999px; background:var(--volt); color:var(--night); font:700 16px Inter, system-ui, sans-serif; padding:0 22px; cursor:pointer; white-space:nowrap; }
.waitlist button:disabled { cursor:default; opacity:.85; }
.roles { border:0; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.roles legend { float:left; color:var(--mist); font-size:14px; margin-right:6px; padding:0; }
.roles label { position:relative; }
.roles input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.roles span { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:999px; color:var(--chalk); font-size:14px; font-weight:600; }
.roles input:checked + span { border-color:var(--volt); color:var(--volt); }
.roles input:focus-visible + span { outline:3px solid var(--chalk); outline-offset:2px; }
.hp { position:absolute; left:-9999px; }
.form-note { font-size:14px; color:var(--mist); margin:14px 0 0; }
.form-note a { color:var(--mist); }
.form-note.ok { color:var(--volt); font-weight:600; }
.form-note.error { color:#FF7A7A; }
.waitlist.done .roles, .waitlist.done input { opacity:.6; pointer-events:none; }
.stores { font-size:14px; color:var(--mist); margin:22px 0 0; }

.phone { margin:0; width:min(300px, 72vw); aspect-ratio:390/844; border-radius:44px; padding:10px; background:#050a07; border:1px solid #2a4334;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(204,255,51,.06), 0 0 120px -40px rgba(204,255,51,.35); }
.phone img { display:block; width:100%; height:100%; object-fit:cover; border-radius:34px; }
.hero-phones { position:relative; height:640px; overflow:visible; }
.hero-phones .phone { position:absolute; }
.hero-phones .front { left:8%; top:0; z-index:2; transform:rotate(-4deg); }
.hero-phones .back { right:0; top:70px; transform:rotate(6deg); opacity:.9; }

.questions { padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
.questions p { margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.questions span { background:var(--astro); border:1px solid var(--line); color:var(--chalk); border-radius:18px 18px 18px 4px; padding:10px 16px; font-size:16px; }
.questions .answer { display:block; font-family:Anton, Impact, sans-serif; font-style:italic; text-transform:uppercase; color:var(--volt); font-size:clamp(28px, 4vw, 40px); margin-top:24px; }

.feature { display:grid; grid-template-columns:1fr auto; gap:64px; align-items:center; padding:88px 0; }
.feature.flip .phone { order:-1; }
.feature-copy { max-width:520px; }
.feature-copy p { font-size:17px; }
.ticks { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.ticks li { position:relative; padding-left:30px; color:var(--chalk); }
.ticks li::before { content:""; position:absolute; left:0; top:5px; width:18px; height:18px; border-radius:50%; background:var(--volt)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%230B1510' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

.steps { padding:72px 0; border-top:1px solid var(--line); }
.steps ol { list-style:none; counter-reset:step; padding:0; margin:32px 0 0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.steps li { counter-increment:step; background:var(--astro); border:1px solid var(--line); border-radius:20px; padding:24px; }
.steps li::before { content:counter(step); display:block; font-family:Anton, Impact, sans-serif; font-style:italic; color:var(--volt); font-size:44px; line-height:1; margin-bottom:12px; }
.steps b { display:block; color:var(--chalk); font-size:18px; margin-bottom:6px; }

.faq { padding:72px 0; max-width:760px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; color:var(--chalk); font-weight:600; font-size:18px; padding:20px 36px 20px 0; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:14px; color:var(--volt); font-size:28px; font-weight:400; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0 0 20px; }

.final { text-align:center; padding:80px 24px; margin:0 0 24px; border-radius:28px; background:var(--astro); border:1px solid var(--line);
  background-image:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(204,255,51,.12), transparent 70%); }
.final h2 { margin-bottom:24px; }

.site-footer { padding-top:28px; padding-bottom:48px; border-top:1px solid var(--line); color:var(--mist); font-size:14px; }
.site-footer a { color:var(--mist); margin-right:18px; }
.site-footer p { margin:12px 0 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns:1fr; padding-top:16px; gap:8px; }
  .hero-phones { height:520px; max-width:420px; width:100%; margin:0 auto; }
  .hero-phones .phone { width:min(250px, 60vw); }
  .hero-phones .front { left:0; }
  .hero-phones .back { right:6px; top:56px; }
  .feature, .feature.flip { grid-template-columns:1fr; gap:40px; padding:64px 0; justify-items:center; }
  .feature.flip .phone { order:0; }
  .feature-copy { max-width:none; }
  .steps ol { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .nav .pill.small { display:none; }
  .field-row { flex-direction:column; border-radius:20px; }
  .field-row input { min-height:52px; }
  .waitlist button { min-height:52px; }
  .hero-phones { height:440px; }
  .hero-phones .phone { width:200px; border-radius:34px; padding:8px; }
  .hero-phones .phone img { border-radius:27px; }
}
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition:transform .15s; }
}