:root{
  --bg:#000000;
  --bg-2:#07080b;
  --card:#0e1014;
  --card-2:#14171d;
  --line:#1e232c;
  --line-2:#2a303c;
  --text:#F8FAFC;              /* cloud white */
  --muted:#5F6F86;              /* slate blue gray */
  --muted-2:#8f99b0;
  --brand:#5AA9FF;              /* electric blue */
  --brand-2:#79BBFF;
  --brand-ink:#000000;
  --ice:#DCEEFF;
  --later:#DCEEFF;
  --danger:#ff5a6e;
  --radius:16px;
  --shadow:0 20px 60px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Space Grotesk','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:40px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}

/* progress */
.progress{
  position:sticky;top:0;z-index:50;
  height:3px;background:transparent;
}
.progress-fill{
  height:100%;width:0%;
  background:var(--brand);
  box-shadow:0 0 14px rgba(90,169,255,.9);
  transition:width .25s ease;
}

.wrap{max-width:720px;margin:0 auto;padding:28px 18px 0;position:relative}

/* corner sparkles — decorative */
.wrap::before,.wrap::after{
  content:'';position:absolute;
  width:28px;height:28px;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
  opacity:.6;
  pointer-events:none;
}
.wrap::before{top:16px;right:18px;animation:twinkle 3s ease-in-out infinite}
.wrap::after{display:none}
@keyframes twinkle{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

/* hero */
.hero{padding:8px 2px 28px}
.brand{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  font-size:42px;
  line-height:.95;
  color:var(--brand);
  text-transform:uppercase;
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
}
.logo-sparkle{
  display:inline-block;width:22px;height:22px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
  margin-bottom:6px;
}
.brand-sub{
  color:var(--muted);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500;
}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:30px;line-height:1.05;margin:0 0 16px;
  font-weight:700;letter-spacing:-.01em;
  text-transform:uppercase;
}
.hello{color:var(--muted-2);margin:0;line-height:1.6;font-size:15px}
.hello b{color:var(--ice);font-weight:600}

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.block-head{
  display:flex;align-items:center;gap:12px;
  margin:0 0 6px;padding:0 2px 14px;
  border-bottom:1px solid var(--line);
}
.block-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--brand);color:#000;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.02em;
}
.block-title{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:17px;letter-spacing:.01em;
  text-transform:uppercase;
}

.q{
  display:block;
  padding:16px 0 14px;
  border-top:1px solid var(--line);
}
.q:first-of-type{border-top:none;padding-top:6px}
.q-text{font-size:15px;line-height:1.45;margin-bottom:10px;color:var(--text)}
.q-num{
  color:var(--muted);font-variant-numeric:tabular-nums;
  margin-right:8px;font-size:13px;font-weight:600;
}

.radios{display:flex;gap:6px;flex-wrap:wrap}
.radio{position:relative;flex:1 1 auto;min-width:0}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio span{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;border-radius:10px;
  background:#0a0b0f;border:1px solid var(--line);
  color:var(--muted-2);font-weight:600;font-size:14px;
  cursor:pointer;user-select:none;
  transition:all .15s ease;
  white-space:nowrap;
  text-transform:uppercase;letter-spacing:.03em;
}
.radio:hover span{border-color:var(--line-2);color:var(--text)}
.radio input:checked + span{color:#000;transform:translateY(-1px)}
.radio.yes   input:checked + span{background:var(--brand);border-color:var(--brand);color:#000;box-shadow:0 10px 28px rgba(90,169,255,.35)}
.radio.no    input:checked + span{background:#2a303c;border-color:#3a4252;color:var(--ice)}
.radio.later input:checked + span{background:var(--ice);border-color:var(--ice);color:#000}

/* contact */
.contact .field{display:block}
.field-label{
  display:block;font-weight:600;margin:0 0 10px;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ice);
}
.req{color:var(--brand)}
input[type=text],textarea{
  width:100%;background:#07080b;color:var(--text);
  border:1px solid var(--line);border-radius:10px;
  padding:14px 14px;font:inherit;font-size:15px;
  font-family:'Space Grotesk','Inter',sans-serif;
  transition:border-color .15s, box-shadow .15s;
  resize:vertical;
}
input[type=text]:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(90,169,255,.2);
}
.field-hint{display:block;margin-top:6px;color:var(--muted);font-size:12px;letter-spacing:.02em}

.open h2{
  margin:0 0 6px;font-size:18px;letter-spacing:.02em;
  font-family:'Space Grotesk',sans-serif;text-transform:uppercase;
}
.open .field{margin-top:18px;display:block}

.summary{
  text-align:center;color:var(--muted);margin:24px 0 12px;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
}
.summary b{color:var(--brand);font-weight:700}

.submit{
  width:100%;display:block;
  padding:17px 18px;border:none;border-radius:12px;
  background:var(--brand);
  color:#000;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(90,169,255,.3);
  transition:transform .08s ease, opacity .15s, filter .15s;
}
.submit:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.5);box-shadow:none}
.submit:not(:disabled):hover{background:var(--brand-2)}
.submit:not(:disabled):active{transform:translateY(1px)}
.submit.loading{pointer-events:none;opacity:.8}

.legal{
  color:var(--muted);text-align:center;font-size:11px;margin:14px 4px 0;
  line-height:1.6;letter-spacing:.04em;text-transform:uppercase;
}

.thanks{text-align:center;padding:48px 20px}
.thanks-icon{
  width:72px;height:72px;margin:0 auto 18px;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 L13.2 10.8 L24 12 L13.2 13.2 L12 24 L10.8 13.2 L0 12 L10.8 10.8 Z'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 10px 32px rgba(90,169,255,.55));
}
.thanks h2{
  margin:4px 0 10px;font-size:24px;
  font-family:'Space Grotesk',sans-serif;
  text-transform:uppercase;letter-spacing:.02em;
}
.thanks p{color:var(--muted-2);margin:0;font-size:15px}

.foot{
  text-align:center;color:var(--muted);font-size:10px;
  margin-top:36px;letter-spacing:.3em;text-transform:uppercase;
}

/* small screens */
@media (max-width:480px){
  .logo{font-size:36px}
  .hero h1{font-size:24px}
  .wrap{padding-top:18px}
  .card{padding:18px 14px}
  .radio span{font-size:13px;padding:11px 6px;letter-spacing:.02em}
  .q-text{font-size:14.5px}
  .wrap::before{top:12px;right:14px;width:22px;height:22px}
}

/* error shake */
.shake{animation:shake .35s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
.q.missed{
  background:rgba(255,90,110,.07);
  border-radius:10px;
  padding-left:10px;padding-right:10px;
  margin-left:-10px;margin-right:-10px;
}
.q.missed .q-num{color:var(--danger)}