*{box-sizing:border-box}html,body{height:100%;margin:0}
:root{
  --bg:#0b1020;
  --card:#0f1630ee;
  --text:#e6e9f5;
  --muted:#a5afd7;
  --accent:#7c4dff;
  --accent-2:#00e5ff;
  --ok:#35d07f;
  --warn:#ffb020;
}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,77,255,.25), transparent 60%),
    radial-gradient(1000px 800px at 90% 10%, rgba(0,229,255,.2), transparent 60%),
    radial-gradient(800px 800px at 50% 90%, rgba(124,77,255,.15), transparent 60%),
    var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.container{width:100%;max-width:760px}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  transition:.25s ease;
}
.hidden{display:none}
h1{font-size:32px;margin:0 0 8px;letter-spacing:.2px}
h2{font-size:24px;margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 16px}
.bullets{margin:0 0 18px 18px;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b0f1a;font-weight:800;letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(124,77,255,.35);
  cursor:pointer;min-width:140px;
}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none
}
.btn.cta{min-width:220px;text-decoration:none;text-align:center}
.progress{
  display:flex;justify-content:flex-end;margin-bottom:8px;
  color:var(--muted);font-size:14px
}
.options{display:grid;gap:12px;margin:12px 0 18px}
.option{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);cursor:pointer;
}
.option input{margin-top:2px}
.option:hover{border-color:rgba(255,255,255,.16)}
.result-desc{color:var(--muted);margin:8px 0 16px}
.actions{display:flex;justify-content:flex-end}
.foot{display:flex;justify-content:center;margin-top:16px;color:var(--muted)}
@media (max-width:560px){
  .btn{width:100%}
  .actions{justify-content:stretch}
}