:root, [data-theme="light"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-offset: #eef1f4;
  --border: #d9dfe5;
  --divider: #e6eaee;
  --text: #15212b;
  --text-muted: #5a6b78;
  --text-faint: #94a3b0;
  --primary: #0a7d8c;
  --primary-hover: #086470;
  --primary-soft: #d7eef1;
  --accent: #0e6fb8;
  --success: #2f8f4e;
  --success-soft: #d8eede;
  --warning: #c2740c;
  --warning-soft: #f6e6cd;
  --danger: #c43d4b;
  --danger-soft: #f6dde0;
  --shadow-sm: 0 1px 2px rgba(20,33,43,.06);
  --shadow-md: 0 6px 20px rgba(20,33,43,.09);
  --shadow-lg: 0 18px 48px rgba(20,33,43,.14);
}
[data-theme="dark"] {
  --bg: #0e1419;
  --surface: #161e25;
  --surface-2: #1b242c;
  --surface-offset: #1f2a33;
  --border: #2b3741;
  --divider: #232f38;
  --text: #dde5ec;
  --text-muted: #93a3b0;
  --text-faint: #647483;
  --primary: #2fb4c4;
  --primary-hover: #4cc6d4;
  --primary-soft: #163239;
  --accent: #4ba3e3;
  --success: #5cc079;
  --success-soft: #18301f;
  --warning: #e0a44a;
  --warning-soft: #352713;
  --danger: #e8707c;
  --danger-soft: #361a1d;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.5);
}

:root {
  --text-xs: clamp(.75rem,.7rem + .2vw,.82rem);
  --text-sm: clamp(.875rem,.83rem + .2vw,.95rem);
  --text-base: clamp(1rem,.96rem + .2vw,1.06rem);
  --text-lg: clamp(1.15rem,1.05rem + .4vw,1.4rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.2vw,2.1rem);
  --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.4rem; --r-full:9999px;
  --font: "General Sans","Helvetica Neue",system-ui,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,monospace;
  --ease: 200ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  min-height:100dvh; font-family:var(--font); font-size:var(--text-base);
  line-height:1.6; color:var(--text); background:var(--bg);
  display:flex; flex-direction:column;
}
button { cursor:pointer; font:inherit; color:inherit; background:none; border:none; }
a,button,input,select,label { transition: color var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--r-sm); }
h1,h2,h3 { line-height:1.18; text-wrap:balance; letter-spacing:-.01em; }

.wrap { width:100%; max-width:920px; margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }

/* Header */
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--divider); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--text); text-decoration:none; min-width:0; }
.brand-logo { height:26px; width:auto; display:block; flex-shrink:0; }
.brand-logo--dark { display:none; }
[data-theme="dark"] .brand-logo--light { display:none; }
[data-theme="dark"] .brand-logo--dark { display:block; }
.brand-divider { width:1px; height:24px; background:var(--divider); flex-shrink:0; }
.brand-sub { font-weight:500; font-size:var(--text-xs); color:var(--text-muted); letter-spacing:.02em; white-space:nowrap; }
.header-actions { display:flex; align-items:center; gap:.5rem; }
.lang-toggle { display:flex; background:var(--surface-offset); border-radius:var(--r-full); padding:3px; }
.lang-btn { padding:.3rem .6rem; font-size:var(--text-xs); font-weight:600; border-radius:var(--r-full); color:var(--text-muted); }
.lang-btn.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.icon-btn { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-full); color:var(--text-muted); border:1px solid var(--border); }
.icon-btn:hover { color:var(--text); border-color:var(--primary); }

main { flex:1; padding-block:clamp(1.5rem,4vw,3rem) 4rem; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-md); padding:clamp(1.4rem,4vw,2.6rem); }
.card + .card { margin-top:1.25rem; }

/* Intro */
.hero { text-align:center; max-width:640px; margin-inline:auto; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); background:var(--primary-soft); padding:.4rem .8rem; border-radius:var(--r-full); margin-bottom:1.2rem; }
.hero h1 { font-size:var(--text-xl); margin-bottom:.8rem; }
.hero p { color:var(--text-muted); font-size:var(--text-base); margin-inline:auto; }
.hero-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:2rem 0 2.2rem; }
.hstep { background:var(--surface-2); border:1px solid var(--divider); border-radius:var(--r-md); padding:1rem .8rem; text-align:left; }
.hstep .num { font-family:var(--mono); font-size:var(--text-xs); color:var(--primary); font-weight:500; }
.hstep .ttl { font-weight:600; font-size:var(--text-sm); margin:.3rem 0 .15rem; }
.hstep .desc { font-size:var(--text-xs); color:var(--text-muted); line-height:1.45; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:var(--text-sm); padding:.8rem 1.5rem; border-radius:var(--r-md); border:1px solid transparent; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
[data-theme="dark"] .btn-primary { color:#06181b; }
.btn-ghost { background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-ghost:hover { border-color:var(--primary); color:var(--primary); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-row { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:space-between; margin-top:1.8rem; }
.btn-lg { padding:.95rem 1.8rem; font-size:var(--text-base); }

/* Progress */
.progress-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.progress-head .step-label { font-size:var(--text-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.progress-head .step-count { font-family:var(--mono); font-size:var(--text-xs); color:var(--text-faint); }
.progress-track { height:6px; background:var(--surface-offset); border-radius:var(--r-full); overflow:hidden; margin-bottom:1.8rem; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:var(--r-full); transition:width 350ms cubic-bezier(.16,1,.3,1); }

/* Questions */
.q-section-title { font-size:var(--text-lg); margin-bottom:.3rem; }
.q-section-sub { color:var(--text-muted); font-size:var(--text-sm); margin-bottom:1.6rem; }
.q-block { padding:1.15rem 0; border-top:1px solid var(--divider); }
.q-block:first-of-type { border-top:none; padding-top:.3rem; }
.q-text { font-weight:500; font-size:var(--text-base); margin-bottom:.85rem; display:flex; gap:.6rem; }
.q-text .q-idx { font-family:var(--mono); font-size:var(--text-xs); color:var(--text-faint); padding-top:.18rem; }
.opt-grid { display:flex; flex-direction:column; gap:.5rem; }
.opt { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; background:var(--surface-2); }
.opt:hover { border-color:var(--primary); }
.opt input { accent-color:var(--primary); width:18px; height:18px; flex-shrink:0; }
.opt.is-selected { border-color:var(--primary); background:var(--primary-soft); }
.opt-label { font-size:var(--text-sm); }
.q-help { font-size:var(--text-xs); color:var(--text-faint); margin-top:.55rem; padding-left:1.6rem; }

/* Choice list (scoping single-select large) */
.choice-list { display:flex; flex-direction:column; gap:.55rem; }
.choice { display:flex; align-items:flex-start; gap:.8rem; padding:.95rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; background:var(--surface-2); }
.choice:hover { border-color:var(--primary); }
.choice.is-selected { border-color:var(--primary); background:var(--primary-soft); box-shadow:var(--shadow-sm); }
.choice input { accent-color:var(--primary); margin-top:.2rem; width:18px; height:18px; flex-shrink:0; }
.choice .c-main { display:block; font-weight:500; font-size:var(--text-sm); }
.choice .c-desc { display:block; font-size:var(--text-xs); color:var(--text-muted); margin-top:.2rem; }

.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:.4rem; }
.field .req { color:var(--danger); }
.field input[type=text], .field input[type=email], .field input[type=number], .field select {
  width:100%; padding:.75rem .9rem; font-size:var(--text-sm); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-md); color:var(--text);
}
.field input:focus, .field select:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.consent { display:flex; gap:.7rem; align-items:flex-start; font-size:var(--text-xs); color:var(--text-muted); margin-bottom:1.3rem; }
.consent input { accent-color:var(--primary); margin-top:.15rem; width:17px; height:17px; flex-shrink:0; }
.consent a { color:var(--primary); }

/* Result */
.result-head { text-align:center; margin-bottom:2rem; }
.verdict { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1.1rem; border-radius:var(--r-full); font-weight:600; font-size:var(--text-sm); margin-bottom:1rem; }
.verdict.full { background:var(--danger-soft); color:var(--danger); }
.verdict.simplified { background:var(--warning-soft); color:var(--warning); }
.verdict.out { background:var(--success-soft); color:var(--success); }
.verdict.thirdparty { background:var(--primary-soft); color:var(--primary); }
.result-head h2 { font-size:var(--text-xl); margin-bottom:.5rem; }
.result-head p { color:var(--text-muted); max-width:600px; margin-inline:auto; font-size:var(--text-sm); }

.gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:.4rem; margin:1.5rem 0; }
.gauge { position:relative; width:200px; height:120px; }
.gauge svg { display:block; }
.gauge-val { position:absolute; bottom:6px; left:0; right:0; text-align:center; }
.gauge-val .num { font-size:2.1rem; font-weight:700; font-family:var(--mono); }
.gauge-val .lbl { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.maturity-badge { display:inline-block; padding:.35rem .9rem; border-radius:var(--r-full); font-size:var(--text-xs); font-weight:600; background:var(--surface-offset); color:var(--text); }

.pillars { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; }
.pillar { }
.pillar-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.pillar-name { font-weight:600; font-size:var(--text-sm); }
.pillar-name small { font-weight:400; color:var(--text-faint); font-family:var(--mono); margin-left:.3rem; }
.pillar-pct { font-family:var(--mono); font-size:var(--text-sm); font-weight:500; }
.bar-track { height:9px; background:var(--surface-offset); border-radius:var(--r-full); overflow:hidden; }
.bar-fill { height:100%; border-radius:var(--r-full); transition:width 600ms cubic-bezier(.16,1,.3,1); }
.bar-fill.lo { background:var(--danger); }
.bar-fill.mid { background:var(--warning); }
.bar-fill.hi { background:var(--success); }

.recs { display:flex; flex-direction:column; gap:.7rem; }
.rec { display:flex; gap:.8rem; padding:.95rem 1.1rem; background:var(--surface-2); border:1px solid var(--divider); border-radius:var(--r-md); border-left:3px solid var(--primary); }
.rec-prio { font-family:var(--mono); font-size:var(--text-xs); font-weight:500; padding:.15rem .5rem; border-radius:var(--r-sm); height:fit-content; flex-shrink:0; }
.rec-prio.high { background:var(--danger-soft); color:var(--danger); }
.rec-prio.med { background:var(--warning-soft); color:var(--warning); }
.rec-prio.low { background:var(--primary-soft); color:var(--primary); }
.rec-body strong { display:block; font-size:var(--text-sm); margin-bottom:.15rem; }
.rec-body span { font-size:var(--text-xs); color:var(--text-muted); }

.info-list { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.info-list li { display:flex; gap:.6rem; font-size:var(--text-sm); color:var(--text-muted); }
.info-list li::before { content:"▸"; color:var(--primary); flex-shrink:0; }

.cta-box { text-align:center; background:linear-gradient(135deg,var(--primary-soft),var(--surface-2)); border:1px solid var(--border); border-radius:var(--r-xl); padding:clamp(1.6rem,5vw,2.6rem); margin-top:1.25rem; }
.cta-box h3 { font-size:var(--text-lg); margin-bottom:.5rem; }
.cta-box p { color:var(--text-muted); font-size:var(--text-sm); max-width:480px; margin:0 auto 1.4rem; }

.section-label { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem; }

.lead-success { text-align:center; padding:1.5rem; }
.lead-success svg { color:var(--success); margin:0 auto .8rem; }

.fade-in { animation:fade .4s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width:620px) {
  .hero-steps { grid-template-columns:1fr; }
  .field-grid { grid-template-columns:1fr; }
  .btn-row { flex-direction:column-reverse; }
  .btn-row .btn { width:100%; }
  .brand-divider, .brand-sub { display:none; }
  .brand-logo { height:22px; }
}

@media print {
  .site-header,.site-footer,.btn-row,.cta-box,.no-print { display:none !important; }
  body { background:#fff; }
  .card { box-shadow:none; border:1px solid #ccc; }
}

/* Footer */
.site-footer { border-top:1px solid var(--divider); padding-block:1.6rem; background:var(--surface); }
.site-footer p { font-size:var(--text-xs); color:var(--text-faint); line-height:1.5; }
.footer-meta { margin-top:.4rem; }
