@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#05101E;--surface:#0A1929;--card:#0F2236;--card2:#132844;
  --border:#1C3554;--border2:#254670;
  --teal:#00D4E8;--teal2:#00A8BA;--teal3:rgba(0,212,232,.1);
  --gold:#F0C040;--gold3:rgba(240,192,64,.1);
  --green:#22D18A;--green3:rgba(34,209,138,.1);
  --red:#F05060;--red3:rgba(240,80,96,.1);
  --orange:#FF7040;
  --text:#DDE8F5;--dim:#6A8CAE;--mute:#35526E;
  --white:#FFFFFF;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r24:24px;--r32:32px;
  --shadow:0 4px 32px rgba(0,0,0,.5),0 0 0 1px rgba(0,212,232,.06);
  --glow:0 0 40px rgba(0,212,232,.15);
  --fn:'Plus Jakarta Sans',sans-serif;--fm:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fn);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;font-size:15px}
body::before{content:'';position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 40% at 15% 0%,rgba(0,212,232,.07) 0%,transparent 55%),
             radial-gradient(ellipse 50% 30% at 85% 100%,rgba(240,192,64,.05) 0%,transparent 55%),var(--bg)}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:200;height:60px;
  background:rgba(5,16,30,.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-icon{width:34px;height:34px;border-radius:var(--r8);
  background:linear-gradient(135deg,var(--teal),#0066FF);
  display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--bg)}
.nav-name{font-size:16px;font-weight:800;color:var(--white);letter-spacing:-.3px}
.nav-name span{color:var(--teal)}
.nav-pill{font-size:10px;font-weight:600;letter-spacing:1px;
  background:rgba(240,192,64,.1);color:var(--gold);border:1px solid rgba(240,192,64,.25);
  padding:3px 10px;border-radius:100px}

/* ── PROGRESS ── */
.prog-wrap{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 28px}
.prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:var(--dim)}
.prog-steps{display:flex;gap:5px}
.prog-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:.3s}
.prog-dot.done{background:var(--teal2)}.prog-dot.active{background:var(--teal)}
.prog-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--teal),#0066FF);border-radius:2px;transition:width .4s var(--ease)}

/* ── WRAPPER ── */
.wrap{max-width:780px;margin:0 auto;padding:36px 20px 80px}

/* ── STEP (each step is a .step div) ── */
.step{display:none;animation:fadeUp .35s var(--ease)}
.step.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── SECTION HEADER ── */
.sh{margin-bottom:28px}
.sh-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.sh-tag::before{content:'';width:14px;height:2px;background:var(--teal);display:inline-block}
.sh-title{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--white);line-height:1.25}
.sh-title span{color:var(--teal)}
.sh-desc{margin-top:8px;font-size:13px;color:var(--dim);line-height:1.7}

/* ── CARD ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r16);
  padding:24px;box-shadow:var(--shadow);margin-bottom:14px}
.card-title{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.card-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── QUESTION ── */
.q{margin-bottom:24px}
.q:last-child{margin-bottom:0}
.q-label{font-size:14px;font-weight:500;color:var(--text);margin-bottom:10px;line-height:1.5}
.q-label strong{color:var(--white)}
.q-num{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,212,232,.12);border:1px solid rgba(0,212,232,.3);
  font-size:10px;font-weight:700;color:var(--teal);margin-right:7px;flex-shrink:0;vertical-align:middle}
.q-hint{font-size:11px;color:var(--mute);margin-bottom:8px;margin-top:-4px}
.required{color:var(--orange);margin-left:2px}

/* ── SEGMENT CARDS (landing) ── */
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:640px){.seg-grid{grid-template-columns:1fr}}
.seg-card{cursor:pointer;background:var(--card);border:2px solid var(--border);
  border-radius:var(--r16);padding:28px 22px;transition:.25s var(--ease);user-select:none;
  position:relative}
.seg-card:hover{border-color:var(--teal2);transform:translateY(-3px);box-shadow:var(--glow)}
.seg-card.sel{border-color:var(--teal);background:rgba(0,212,232,.05);box-shadow:var(--glow)}
.seg-card.sel::after{content:'✓';position:absolute;top:12px;right:14px;
  width:22px;height:22px;border-radius:50%;background:var(--teal);
  color:var(--bg);font-size:12px;font-weight:700;display:grid;place-items:center}
.seg-icon{font-size:36px;margin-bottom:12px;display:block}
.seg-name{font-size:17px;font-weight:800;color:var(--white);margin-bottom:6px}
.seg-desc{font-size:12px;color:var(--dim);line-height:1.6}
.seg-tag{margin-top:12px;display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;letter-spacing:.8px;padding:3px 8px;
  border-radius:100px}
.seg-tag.beachhead{background:var(--gold3);color:var(--gold);border:1px solid rgba(240,192,64,.25)}
.seg-tag.growth{background:var(--green3);color:var(--green);border:1px solid rgba(34,209,138,.25)}
.seg-tag.scale{background:rgba(0,102,255,.1);color:#66AAFF;border:1px solid rgba(0,102,255,.25)}

/* ── OPTIONS ── */
.opts{display:grid;gap:7px}
.opts.cols2{grid-template-columns:1fr 1fr}
.opts.cols3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:500px){.opts.cols2,.opts.cols3{grid-template-columns:1fr}}

.opt{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r8);
  cursor:pointer;transition:.2s var(--ease);font-size:13.5px;user-select:none}
.opt:hover{border-color:var(--teal2);background:rgba(0,212,232,.03)}
.opt input{display:none}
.opt-mk{width:17px;height:17px;flex-shrink:0;border:2px solid var(--border2);
  border-radius:50%;margin-top:2px;transition:.2s;display:grid;place-items:center}
.opt.chk .opt-mk{border-radius:var(--r4)}
.opt:has(input:checked){border-color:var(--teal);background:rgba(0,212,232,.06);color:var(--white)}
.opt:has(input:checked) .opt-mk{background:var(--teal);border-color:var(--teal)}
.opt:has(input:checked) .opt-mk::after{content:'✓';font-size:10px;font-weight:700;color:var(--bg)}

/* ── LIKERT ── */
.lk-wrap{overflow-x:auto;padding-bottom:4px}
.lk{display:flex;gap:5px;min-width:280px}
.lk label{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.lk label input{display:none}
.lk-btn{width:100%;padding:9px 4px;border:1px solid var(--border);border-radius:var(--r8);
  background:var(--surface);color:var(--dim);
  font-family:var(--fm);font-size:14px;font-weight:600;text-align:center;transition:.2s}
.lk label:hover .lk-btn{border-color:var(--teal2);color:var(--teal)}
.lk label:has(input:checked) .lk-btn{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.lk-lbl{font-size:10px;color:var(--mute);text-align:center;line-height:1.3}
.lk-leg{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);margin-top:5px}

/* ── NPS ── */
.nps{display:flex;gap:4px;flex-wrap:wrap}
.nps label input{display:none}
.nps-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:var(--r8);
  background:var(--surface);color:var(--dim);
  font-family:var(--fm);font-size:13px;font-weight:600;text-align:center;line-height:42px;
  transition:.2s;cursor:pointer;display:block}
.nps label[data-n="d"] .nps-btn{border-color:rgba(240,80,96,.25)}
.nps label[data-n="p"] .nps-btn{border-color:rgba(240,192,64,.25)}
.nps label[data-n="pr"].nps-btn{border-color:rgba(34,209,138,.25)}
.nps label:has(input:checked) .nps-btn{background:var(--teal);border-color:var(--teal);color:var(--bg)}
.nps-leg{display:flex;justify-content:space-between;font-size:10px;color:var(--mute);margin-top:5px}

/* ── INPUT / TEXTAREA ── */
.inp,.ta,.sel{width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r8);color:var(--text);font-family:var(--fn);font-size:14px;
  padding:10px 13px;transition:.2s;outline:none}
.inp:focus,.ta:focus,.sel:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,212,232,.1)}
.ta{resize:vertical;min-height:84px}
.sel option{background:var(--card)}

/* ── RANK LIST ── */
.rank-list{display:flex;flex-direction:column;gap:6px}
.rank-item{display:flex;align-items:center;gap:10px;padding:9px 13px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r8);
  cursor:grab;transition:.2s}
.rank-item:active{cursor:grabbing}
.rank-item.over{border-color:var(--teal);background:rgba(0,212,232,.06)}
.rank-handle{color:var(--mute);font-size:13px}
.rank-num{width:20px;height:20px;border-radius:50%;background:rgba(0,212,232,.1);
  border:1px solid rgba(0,212,232,.2);font-size:10px;font-weight:700;color:var(--teal);
  display:grid;place-items:center;flex-shrink:0}
.rank-txt{font-size:13px;flex:1}

/* ── COMPARE TABLE ── */
.cmp{width:100%;border-collapse:collapse;font-size:12px}
.cmp th{padding:7px 5px;text-align:center;color:var(--mute);font-weight:500;
  border-bottom:1px solid var(--border);font-size:10px;letter-spacing:.4px}
.cmp th:first-child{text-align:left;min-width:100px}
.cmp td{padding:7px 5px;text-align:center;border-bottom:1px solid rgba(28,53,84,.5)}
.cmp td:first-child{text-align:left;color:var(--dim)}
.cmp label{cursor:pointer}
.cmp input{display:none}
.cmp-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);display:inline-block;transition:.2s}
.cmp label:has(input:checked) .cmp-dot{background:var(--teal);border-color:var(--teal)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;border:none;border-radius:var(--r12);font-family:var(--fn);
  font-size:15px;font-weight:700;cursor:pointer;transition:.2s var(--ease);text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--teal),#0066FF);color:var(--white);
  box-shadow:0 4px 16px rgba(0,100,255,.25)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,212,232,.3)}
.btn-s{background:var(--surface);border:1px solid var(--border2);color:var(--dim)}
.btn-s:hover{border-color:var(--teal2);color:var(--text)}
.btn-g{background:linear-gradient(135deg,var(--gold),#D4A000);color:var(--bg)}
.btn-row{display:flex;gap:12px;align-items:center;margin-top:32px;flex-wrap:wrap}
@media(max-width:480px){.btn-row{flex-direction:column}.btn{width:100%}}

/* ── DISCLAIMER ── */
.disc{background:rgba(240,192,64,.04);border:1px solid rgba(240,192,64,.18);
  border-radius:var(--r12);padding:14px 18px;font-size:12px;line-height:1.7;color:var(--dim)}
.disc strong{color:var(--gold)}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:20px 0}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r12);
  padding:16px;text-align:center}
.stat-v{font-family:var(--fm);font-size:20px;font-weight:500;color:var(--teal)}
.stat-l{font-size:10px;color:var(--mute);margin-top:3px;letter-spacing:.3px}

/* ── THANK YOU ── */
.ty{text-align:center;padding:60px 20px}
.ty-icon{font-size:64px;margin-bottom:16px;animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.ty-title{font-size:30px;font-weight:800;color:var(--white);margin-bottom:10px}
.ty-title span{color:var(--teal)}
.ty-desc{font-size:14px;color:var(--dim);max-width:480px;margin:0 auto 28px;line-height:1.7}

/* ── DIVIDER ── */
.div{height:1px;background:var(--border);margin:20px 0}
/* ── UTIL ── */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.text-teal{color:var(--teal)}.text-gold{color:var(--gold)}.text-green{color:var(--green)}
.text-mute{font-size:11px;color:var(--mute)}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;
  font-size:10px;font-weight:600;letter-spacing:.3px}
.b-teal{background:rgba(0,212,232,.1);color:var(--teal);border:1px solid rgba(0,212,232,.2)}
.b-gold{background:var(--gold3);color:var(--gold);border:1px solid rgba(240,192,64,.2)}
.b-green{background:var(--green3);color:var(--green);border:1px solid rgba(34,209,138,.2)}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .nav{padding:0 16px}
  .prog-wrap{padding:10px 16px}
  .wrap{padding:20px 14px 60px}
  .card{padding:18px 14px}
  .lk{gap:3px}
}