/* TheoriePilot — huisstijl */
:root{
  --blauw:#0a2a5e;
  --blauw-licht:#11479e;
  --geel:#ffc727;
  --geel-donker:#f5b800;
  --ink:#17233b;
  --grijs:#5b6b84;
  --bg:#f4f7fc;
  --kaart:#ffffff;
  --lijn:#dde5f0;
  --groen:#1e9e62;
  --groen-bg:#e5f6ee;
  --rood:#d64545;
  --rood-bg:#fdecec;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blauw-licht)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}

/* Header */
header.site{
  background:var(--blauw);color:#fff;position:sticky;top:0;z-index:20;
  box-shadow:0 2px 10px rgba(10,42,94,.25);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:.2px}
.logo .merk{color:var(--geel)}
.logo svg{flex:none}
nav.main a{color:#dbe6fa;text-decoration:none;font-size:.95rem;margin-left:18px}
nav.main a:hover{color:#fff}
@media(max-width:560px){nav.main a{margin-left:12px;font-size:.88rem}}

/* Hero */
.hero{background:linear-gradient(150deg,var(--blauw) 0%,var(--blauw-licht) 100%);color:#fff;padding:44px 0 40px}
.hero h1{font-size:2rem;line-height:1.2;margin-bottom:12px}
.hero h1 .accent{color:var(--geel)}
.hero p{color:#d7e3f7;max-width:560px;margin-bottom:22px}
@media(max-width:560px){.hero h1{font-size:1.55rem}}

.btn{
  display:inline-block;background:var(--geel);color:#231a00;font-weight:700;
  padding:13px 22px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;
  font-size:1rem;transition:background .15s ease,transform .1s ease;
}
.btn:hover{background:var(--geel-donker)}
.btn:active{transform:scale(.98)}
.btn.secundair{background:#fff;color:var(--blauw);border:2px solid var(--blauw)}
.btn.secundair:hover{background:#eef3fb}
.btn:disabled{background:#c8d2e2;color:#66788f;cursor:not-allowed}
.btn.groot{font-size:1.08rem;padding:15px 26px;width:100%;text-align:center}
@media(min-width:560px){.btn.groot{width:auto}}

.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px}
.stat strong{display:block;font-size:1.15rem;color:#fff}
.stat span{font-size:.82rem;color:#c6d6f2}

/* Secties */
section.blok{padding:34px 0 6px}
section.blok h2{font-size:1.4rem;margin-bottom:6px}
section.blok .sub{color:var(--grijs);margin-bottom:18px;max-width:620px}

.kaarten{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.kaarten{grid-template-columns:repeat(3,1fr)}.kaarten.twee{grid-template-columns:repeat(2,1fr)}.kaarten.vier{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.kaarten.vier{grid-template-columns:repeat(4,1fr)}}
.kaart{
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 1px 3px rgba(23,35,59,.05);
}
.kaart h3{font-size:1.08rem}
.kaart p{color:var(--grijs);font-size:.93rem;flex:1}
.kaart .meta{font-size:.85rem;color:var(--blauw-licht);font-weight:600}
.kaart .btn{margin-top:6px;text-align:center}
.badge{
  display:inline-block;background:var(--groen-bg);color:var(--groen);font-weight:700;
  font-size:.75rem;padding:3px 9px;border-radius:99px;align-self:flex-start;
}
.badge.binnenkort{background:#fff3d1;color:#8a6100}

.stappen{display:grid;gap:12px}
@media(min-width:620px){.stappen{grid-template-columns:repeat(3,1fr)}}
.stap{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:16px}
.stap .nr{
  width:30px;height:30px;border-radius:50%;background:var(--blauw);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:8px;
}
.stap h3{font-size:1rem;margin-bottom:4px}
.stap p{color:var(--grijs);font-size:.92rem}

.premium{
  background:var(--blauw);color:#fff;border-radius:var(--radius);padding:24px;margin:16px 0 8px;
}
.premium h2{color:#fff}
.premium p{color:#d7e3f7}
.premium .prijs{font-size:2rem;font-weight:800;color:var(--geel);margin:8px 0}
.premium ul{margin:10px 0 18px 18px;color:#eaf1fd}
.premium ul li{margin-bottom:4px}

.faq details{background:var(--kaart);border:1px solid var(--lijn);border-radius:10px;padding:13px 16px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{color:var(--grijs);margin-top:6px;font-size:.95rem}

/* Footer */
footer.site{margin-top:44px;background:#0d1f3c;color:#aebdd6;padding:26px 0 34px;font-size:.86rem}
footer.site a{color:#d7e3f7}
footer.site .disclaimer{max-width:700px;margin-top:10px;color:#8494b0}

/* ---------- Examen engine ---------- */
.examen-shell{max-width:720px;margin:0 auto;padding:22px 16px 40px}
.examen-kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px;box-shadow:0 2px 8px rgba(23,35,59,.06)}
.examen-kaart h1{font-size:1.45rem;margin-bottom:8px}
.examen-kaart .intro{color:var(--grijs);margin-bottom:16px}
.feiten{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.feiten span{background:var(--bg);border:1px solid var(--lijn);border-radius:99px;padding:5px 12px;font-size:.85rem;font-weight:600;color:var(--blauw)}

.balk-rij{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--grijs);margin-bottom:8px}
.timer{font-weight:800;color:var(--blauw);font-variant-numeric:tabular-nums}
.timer.kritiek{color:var(--rood)}
.progress{height:9px;background:var(--lijn);border-radius:99px;overflow:hidden;margin-bottom:20px}
.progress i{display:block;height:100%;background:var(--blauw-licht);width:0;transition:width .3s ease}
.cat-label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--blauw-licht);background:#e8effc;padding:4px 10px;border-radius:99px;margin-bottom:12px}
.vraag-tekst{font-size:1.13rem;font-weight:600;line-height:1.5;margin-bottom:18px}

.opties{display:grid;gap:10px}
.optie{
  text-align:left;background:#fff;border:2px solid var(--lijn);border-radius:12px;
  padding:14px 16px;font-size:1rem;cursor:pointer;color:var(--ink);width:100%;
  display:flex;gap:12px;align-items:flex-start;transition:border-color .12s ease,background .12s ease;
}
.optie .letter{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--lijn);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:var(--blauw);
}
.optie:hover:not(:disabled){border-color:var(--blauw-licht)}
.optie:disabled{cursor:default;opacity:1}
.optie.goed{border-color:var(--groen);background:var(--groen-bg)}
.optie.goed .letter{background:var(--groen);color:#fff;border-color:var(--groen)}
.optie.fout{border-color:var(--rood);background:var(--rood-bg)}
.optie.fout .letter{background:var(--rood);color:#fff;border-color:var(--rood)}

.feedback{border-radius:12px;padding:16px;margin-top:16px;display:none}
.feedback.zichtbaar{display:block}
.feedback.goed{background:var(--groen-bg);border:1px solid #b7e4cd}
.feedback.fout{background:var(--rood-bg);border:1px solid #f3c2c2}
.feedback h3{margin-bottom:6px;font-size:1.02rem}
.feedback p{font-size:.96rem}
.knop-rij{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

.score-cirkel{
  width:128px;height:128px;border-radius:50%;margin:6px auto 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:9px solid var(--lijn);background:#fff;
}
.score-cirkel.geslaagd{border-color:var(--groen)}
.score-cirkel.gezakt{border-color:var(--rood)}
.score-cirkel strong{font-size:1.9rem;line-height:1}
.score-cirkel span{font-size:.8rem;color:var(--grijs)}
.uitslag-titel{text-align:center;font-size:1.3rem;margin-bottom:4px}
.uitslag-sub{text-align:center;color:var(--grijs);margin-bottom:20px}
.breakdown{margin:18px 0}
.breakdown h3{margin-bottom:10px}
.breakdown .rij{margin-bottom:10px}
.breakdown .rij-top{display:flex;justify-content:space-between;font-size:.93rem;margin-bottom:4px}
.breakdown .mini-balk{height:8px;background:var(--lijn);border-radius:99px;overflow:hidden}
.breakdown .mini-balk i{display:block;height:100%;background:var(--blauw-licht)}
.fouten-lijst{margin-top:8px}
.fout-item{border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:#fff}
.fout-item .vq{font-weight:600;margin-bottom:6px}
.fout-item p{font-size:.93rem;color:var(--grijs)}
.fout-item .jouw{color:var(--rood)}
.fout-item .juist{color:var(--groen);font-weight:600}
.leeg-melding{text-align:center;color:var(--grijs);padding:12px 0}
.artikel p{margin-bottom:14px;color:#2c3a52}
.artikel ul{margin:0 0 14px 20px;color:#2c3a52}
.artikel li{margin-bottom:6px}
.artikel h2{margin:22px 0 8px}