:root {
  --bg: #0f1221;
  --bg-soft: #171a2e;
  --card: #1d2138;
  --card-2: #232843;
  --ink: #eef0fb;
  --ink-soft: #aeb4d6;
  --muted: #7e85ad;
  --line: #2c3154;
  --brand: #6c8cff;
  --brand-2: #9a7bff;
  --accent: #38d6b0;
  --warn: #ffb454;
  --max-pole: #6c8cff;
  --min-pole: #38d6b0;
  --radius: 14px;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(1200px 700px at 80% -10%, #20264a 0%, var(--bg) 55%);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 720px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); }
.brand .dot { width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: inline-block; }
.brand small { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.nav a { color: var(--ink-soft); font-size: 14px; }

/* hero */
.hero { padding: 40px 0 24px; }
.hero h1 { font-size: 42px; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.02em; }
.hero h1 .grad { background: linear-gradient(120deg, var(--brand), var(--brand-2) 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { font-size: 18px; color: var(--ink-soft); max-width: 620px; }
.pill { display:inline-block; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color: var(--brand); background: rgba(108,140,255,.12); border:1px solid rgba(108,140,255,.3);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  font: inherit; font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  box-shadow: 0 8px 24px rgba(108,140,255,.35); transition: transform .08s ease, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); text-decoration:none; box-shadow: 0 12px 30px rgba(108,140,255,.45); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--card-2); color: var(--ink); box-shadow:none; border:1px solid var(--line); }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* cards / grid */
.card { background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); }
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:720px){ .grid.cols-2,.grid.cols-4 { grid-template-columns:1fr; } .hero h1{font-size:32px;} }

.feature h3 { margin: 4px 0 6px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }
.note { color: var(--muted); font-size: 13px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing:.08em; color: var(--muted); margin: 30px 0 10px; }

/* footer */
.footer { margin-top: 60px; padding: 28px 0; border-top:1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer .disclaimer { max-width: 720px; }

/* ---- assessment ---- */
.assess { padding-top: 10px; }
.progress { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin: 12px 0 28px; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width .35s ease; }
.q-count { color: var(--muted); font-size: 14px; }
.q-type { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft); background: var(--card-2); padding: 3px 10px; border-radius:999px; margin-bottom:14px; }
.q-text { font-size: 26px; line-height: 1.25; margin: 6px 0 26px; letter-spacing:-.01em; }
.options { display:grid; gap:14px; }
.opt { text-align:left; cursor:pointer; padding: 20px 22px; border-radius: 12px; font-size:17px;
  background: var(--card); color: var(--ink); border:1.5px solid var(--line); transition: border-color .15s, background .15s, transform .06s; }
.opt:hover { border-color: var(--brand); background: var(--card-2); }
.opt:active { transform: scale(.995); }
.opt .lab { display:inline-flex; width:26px; height:26px; border-radius:7px; align-items:center; justify-content:center;
  background: var(--bg-soft); color: var(--ink-soft); font-weight:700; font-size:13px; margin-right:12px; }
.opt.selected { border-color: var(--brand); background: rgba(108,140,255,.12); }
.assess-foot { display:flex; align-items:center; justify-content:space-between; margin-top:26px; }

/* ---- result ---- */
.code-badge { font-size: 40px; font-weight: 800; letter-spacing:.12em;
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 60%, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.dim-row { display:grid; grid-template-columns: 120px 1fr 64px; align-items:center; gap:14px; padding:9px 0; }
.dim-row .lbl { font-size:14px; color: var(--ink-soft); }
.dim-row .lbl b { color: var(--ink); display:block; }
.track { position:relative; height: 12px; background: var(--bg-soft); border-radius:999px; }
.track .mid { position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background: var(--line); }
.track .bead { position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  transform: translate(-50%,-50%); background:#fff; box-shadow:0 0 0 4px rgba(108,140,255,.25); }
.track .fillmax { position:absolute; left:50%; top:0; bottom:0; background: rgba(108,140,255,.35); border-radius:0 999px 999px 0; }
.track .fillmin { position:absolute; right:50%; top:0; bottom:0; background: rgba(56,214,176,.35); border-radius:999px 0 0 999px; }
.dim-row .val { text-align:right; font-variant-numeric: tabular-nums; font-weight:700; }
.strength-tag { font-size:11px; color: var(--muted); }

.path { padding: 18px 20px; }
.path .top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.path .rank { color: var(--muted); font-weight:700; }
.path .name { font-size:18px; font-weight:700; }
.path .fit { font-size:22px; font-weight:800; color: var(--accent); font-variant-numeric:tabular-nums; }
.path .cip { color: var(--muted); font-size:12px; }
.bench { position:relative; height: 10px; background: var(--bg-soft); border-radius:999px; margin:14px 0 8px; }
.bench .band { position:absolute; top:0; bottom:0; background: rgba(56,214,176,.22); border-radius:999px; }
.bench .bead { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  background:#fff; box-shadow:0 0 0 4px rgba(56,214,176,.3); }
.bands { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.band-tag { font-size:11px; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background: var(--card-2); color: var(--ink-soft); }
.band-tag.high { background: rgba(56,214,176,.15); color: var(--accent); }
.path .explain { color: var(--muted); font-size:13px; margin-top:8px; }

.warn { border-left: 3px solid var(--warn); padding: 10px 14px; background: rgba(255,180,84,.08);
  border-radius: 8px; margin: 8px 0; color: var(--ink-soft); font-size:14px; }

.disc-box { font-size:13px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; padding:14px 16px; }