/* ============ DESIGN TOKENS ============ */
:root{
  --bg:#FAF7F0;          /* warm wit */
  --surface:#FFFFFF;     /* secties / kaarten */
  --ink:#0F1A2E;         /* Nacht Marine */
  --ink-soft:#2B3650;    /* zachtere ink voor bodytekst */
  --gold:#F4B942;        /* Slim Goud — fills/decoratief */
  --gold-deep:#E0A52E;   /* iets dieper goud — fills/hover */
  --gold-ink:#996009;    /* AA-veilig goud voor TEKST op licht (≥4.5:1 op wit én op warme tint) */
  --green:#2D6A4F;
  --red:#E63946;
  --blue:#4A90C2;
  --muted:#5C6478;       /* secundaire tekst */
  --line:#ECE6DA;        /* hairline op warm wit */
  --line-soft:#F0EBE0;
  --radius-card:12px;
  --radius-btn:8px;
  --shadow-sm:0 1px 2px rgba(15,26,46,.04), 0 2px 8px rgba(15,26,46,.05);
  --shadow-md:0 4px 12px rgba(15,26,46,.06), 0 12px 32px rgba(15,26,46,.08);
  --shadow-gold:0 8px 24px rgba(244,185,66,.28);
  --maxw:1160px;
  --space:clamp(64px, 9vw, 120px);
  --ff-head:"Plus Jakarta Sans", system-ui, sans-serif;
  --ff-body:"Inter", system-ui, sans-serif;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--ff-head); line-height:1.12; letter-spacing:-.02em; color:var(--ink); font-weight:800; }
p{ color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ list-style:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
section{ position:relative; }

/* ============ LAYOUT HELPERS ============ */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:var(--space) 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-head); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-ink);
  background:rgba(244,185,66,.14); padding:7px 14px; border-radius:100px; margin-bottom:20px;
}
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
h2.title{ font-size:clamp(30px,4.4vw,46px); }
.lead{ font-size:clamp(17px,2vw,20px); color:var(--muted); margin-top:18px; }
.gold-text{ color:var(--gold-ink); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:700; font-size:16px; line-height:1;
  padding:16px 26px; border-radius:var(--radius-btn); cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-gold{ background:var(--gold); color:var(--ink); box-shadow:var(--shadow-gold); }
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-2px); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#16223c; transform:translateY(-2px); }
.btn-lg{ padding:18px 32px; font-size:17px; }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

/* ============ WORDMARK ============ */
.wordmark{ font-family:var(--ff-head); font-weight:800; font-size:23px; letter-spacing:-.03em; color:var(--ink); }
.wordmark .slim{ color:var(--gold-deep); }
.footer .wordmark{ color:#fff; }
.footer .wordmark .slim{ color:var(--gold); }

/* ============ HEADER ============ */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,247,240,.82); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.header.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(15,26,46,.02); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .15s; }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-login{ font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--ink); }
.hamburger{ display:none; width:44px; height:44px; border:1px solid var(--line); background:var(--surface); border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.hamburger span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.25s; }
.hamburger span::before,.hamburger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.25s; }
.hamburger span::before{ top:-6px; } .hamburger span::after{ top:6px; }
body.menu-open .hamburger span{ background:transparent; }
body.menu-open .hamburger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .hamburger span::after{ top:0; transform:rotate(-45deg); }

/* mobile drawer */
.mobile-menu{
  position:fixed; inset:70px 0 0 0; z-index:55; background:var(--bg);
  transform:translateX(100%); transition:transform .3s ease; padding:28px 24px;
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
body.menu-open .mobile-menu{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--ff-head); font-weight:700; font-size:20px; padding:15px 4px; border-bottom:1px solid var(--line); color:var(--ink); }
.mobile-menu .btn{ margin-top:18px; width:100%; }

/* ============ HERO ============ */
.hero{ padding:clamp(54px,8vw,96px) 0 clamp(48px,6vw,80px); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-25%; right:-12%; width:620px; height:620px; z-index:0;
  background:radial-gradient(circle, rgba(244,185,66,.20), rgba(244,185,66,0) 68%);
  filter:blur(8px); pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(38px,5.6vw,62px); }
.hero h1 .gold-text{ position:relative; white-space:nowrap; }
.hero h1 .gold-text::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.20em; z-index:-1;
  background:rgba(244,185,66,.42); border-radius:3px;
}
.hero-sub{ font-size:clamp(17px,2vw,20px); color:var(--muted); margin:24px 0 32px; max-width:520px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-assure{ display:flex; flex-wrap:wrap; gap:18px 22px; margin-top:28px; }
.hero-assure li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-soft); font-weight:500; }
.hero-assure svg{ width:18px; height:18px; color:var(--green); flex:none; }

/* hero visual: mock exam card */
.hero-card{
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-md); padding:24px; position:relative;
}
.hero-card .hc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hc-chip{ font-family:var(--ff-head); font-weight:700; font-size:12.5px; color:var(--green); background:rgba(45,106,79,.10); padding:6px 12px; border-radius:100px; display:inline-flex; gap:7px; align-items:center; }
.hc-chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.hc-timer{ font-family:var(--ff-head); font-weight:700; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.hc-q{ font-family:var(--ff-head); font-weight:700; font-size:18px; color:var(--ink); margin-bottom:6px; }
.hc-qsub{ font-size:14px; color:var(--muted); margin-bottom:16px; }
.hc-scene{ height:118px; border-radius:12px; margin-bottom:16px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#dfeaf5 0%, #eaf1f8 55%, #d9e6c9 55%, #e7efda 100%); }
.hc-road{ position:absolute; bottom:0; left:50%; width:78%; height:46%; transform:translateX(-50%);
  background:#5C6478; clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); }
.hc-road::after{ content:""; position:absolute; left:50%; top:8%; bottom:0; width:3px; transform:translateX(-50%);
  background:repeating-linear-gradient(#FAF7F0 0 12px, transparent 12px 22px); }
.hc-sign{ position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:50%; background:#fff; border:4px solid var(--red); }
.hc-sign::after{ content:""; position:absolute; top:50%; left:18%; right:18%; height:5px; background:var(--red); transform:translateY(-50%); }
.hc-options{ display:grid; gap:9px; }
.hc-opt{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink-soft); background:#fff; }
.hc-opt .dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; }
.hc-opt.correct{ border-color:var(--green); background:rgba(45,106,79,.06); color:var(--ink); font-weight:600; }
.hc-opt.correct .dot{ border-color:var(--green); background:var(--green); position:relative; }
.hc-opt.correct .dot::after{ content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.hc-float{ position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-md); padding:12px 15px; display:flex; align-items:center; gap:11px; }
.hc-float .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.hc-float strong{ font-family:var(--ff-head); font-size:15px; display:block; color:var(--ink); }
.hc-float span{ font-size:12.5px; color:var(--muted); }
.hc-float.f1{ right:-22px; top:42px; } .hc-float.f1 .ic{ background:rgba(244,185,66,.16); color:var(--gold-deep); }
.hc-float.f2{ left:-26px; bottom:30px; } .hc-float.f2 .ic{ background:rgba(45,106,79,.12); color:var(--green); }

/* ============ TRUST BAR ============ */
.trustbar{ background:var(--ink); color:#fff; padding:26px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.trust-item{ position:relative; }
.trust-item + .trust-item::before{ content:""; position:absolute; left:0; top:14%; height:72%; width:1px; background:rgba(255,255,255,.12); }
.trust-num{ font-family:var(--ff-head); font-weight:800; font-size:clamp(26px,3.4vw,38px); color:var(--gold); line-height:1; }
.trust-lbl{ font-size:13.5px; color:rgba(255,255,255,.72); margin-top:8px; }

/* ============ WAAROM (3 kaarten) ============ */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:30px; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-soft); }
.card-ic{ width:52px; height:52px; border-radius:13px; background:rgba(244,185,66,.14); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.card-ic svg{ width:26px; height:26px; }
.card h3{ font-size:20px; margin-bottom:10px; }
.card p{ font-size:15.5px; color:var(--muted); }
.card .substeps{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.card .substeps li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color:var(--ink-soft); }
.card .substeps .n{ width:22px; height:22px; border-radius:6px; background:var(--bg); color:var(--gold-ink);
  font-family:var(--ff-head); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none; }

/* ============ WAT JE KRIJGT (feature grid) ============ */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:24px 22px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feat-ic{ width:44px; height:44px; border-radius:11px; background:var(--bg); color:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.feat-ic svg{ width:23px; height:23px; }
.feat h4{ font-size:16.5px; margin-bottom:7px; }
.feat p{ font-size:14px; color:var(--muted); line-height:1.5; }

/* ============ HOE HET WERKT (3 stappen) ============ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ position:relative; padding:34px 28px 28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.step-n{ position:absolute; top:-22px; left:28px; width:44px; height:44px; border-radius:12px; background:var(--ink); color:var(--gold);
  font-family:var(--ff-head); font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.step h3{ font-size:19px; margin:8px 0 9px; }
.step p{ font-size:15px; color:var(--muted); }
.step-conn{ position:absolute; top:30px; right:-16px; width:32px; color:var(--gold-deep); z-index:2; }

/* ============ VERKEERSBORDEN ============ */
.borden-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.borden-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bcat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:20px 16px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.bcat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.bcat .sign{ width:54px; height:54px; margin:0 auto 12px; position:relative; }
.bcat .lbl{ font-family:var(--ff-head); font-weight:700; font-size:13.5px; color:var(--ink); }
.bcat .cnt{ font-size:12px; color:var(--muted); margin-top:2px; }
/* CSS-getekende generieke borden (origineel, geen overgenomen beeld) */
.sign-round{ border-radius:50%; background:#fff; border:6px solid var(--red); position:relative; }
.sign-round.prohib::after{ content:""; position:absolute; left:14%; right:14%; top:44%; height:6px; background:var(--red); border-radius:2px; }
.sign-round.speed{ border-color:var(--red); display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:800; font-size:18px; color:var(--ink); }
.sign-blue{ border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; }
.sign-blue svg{ width:26px; height:26px; color:#fff; }
.sign-diamond{ background:var(--gold); transform:rotate(45deg); border:4px solid #fff; box-shadow:0 0 0 3px var(--ink); width:42px; height:42px; margin:7px auto 16px !important; }
.sign-tri{ width:0;height:0; border-left:27px solid transparent; border-right:27px solid transparent; border-bottom:47px solid var(--red); position:relative; margin:4px auto 12px !important; }
.sign-tri::after{ content:""; position:absolute; left:-21px; top:9px; width:42px; height:34px; background:#fff; clip-path:polygon(50% 0,100% 100%,0 100%); }
.sign-tri b{ position:absolute; left:-3px; top:22px; width:6px; height:15px; background:var(--ink); border-radius:2px; z-index:2; }
.sign-square{ background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.sign-square svg{ width:30px; height:30px; color:#fff; }

/* ============ PAKKETTEN ============ */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative; transition:transform .2s, box-shadow .2s; }
.plan:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.plan.featured{ border:2px solid var(--gold); box-shadow:var(--shadow-md); transform:translateY(-8px); }
.plan.featured:hover{ transform:translateY(-12px); }
.plan-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gold); color:var(--ink);
  font-family:var(--ff-head); font-weight:800; font-size:12px; letter-spacing:.03em; padding:6px 16px; border-radius:100px; box-shadow:var(--shadow-gold); white-space:nowrap; }
.plan-name{ font-family:var(--ff-head); font-weight:800; font-size:21px; }
.plan-access{ font-size:13.5px; color:var(--muted); margin-top:3px; }
.plan-price{ display:flex; align-items:flex-end; gap:4px; margin:20px 0 4px; }
.plan-price .cur{ font-family:var(--ff-head); font-weight:700; font-size:22px; color:var(--ink); margin-bottom:6px; }
.plan-price .amt{ font-family:var(--ff-head); font-weight:800; font-size:46px; line-height:1; color:var(--ink); }
.plan-once{ font-size:13px; color:var(--muted); margin-bottom:22px; }
.plan-terms-link{ display:block; text-align:center; margin-top:12px; font-size:13px; font-weight:600; color:var(--gold-ink); text-decoration:underline; }
.plan-terms-link:hover{ color:var(--gold-deep); }
.plan ul.inc{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.plan ul.inc li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-soft); }
.plan ul.inc svg{ width:19px; height:19px; color:var(--green); flex:none; margin-top:2px; }
.plan .btn{ margin-top:auto; width:100%; }

/* ============ GRATIS-PROEF BAND ============ */
.freeband{ background:linear-gradient(135deg,#0F1A2E 0%, #16223c 100%); border-radius:24px; padding:clamp(36px,5vw,60px); color:#fff; position:relative; overflow:hidden; }
.freeband::before{ content:""; position:absolute; right:-8%; top:-40%; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,185,66,.22), transparent 66%); }
.freeband-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center; position:relative; z-index:1; }
.freeband h2{ color:#fff; font-size:clamp(26px,3.6vw,40px); }
.freeband p{ color:rgba(255,255,255,.78); margin-top:14px; font-size:17px; max-width:480px; }
.freeband-cta{ display:flex; justify-content:flex-end; }

/* ============ FAQ ============ */
.faq{ max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.faq-q{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:var(--ff-head); font-weight:700; font-size:17px; color:var(--ink); }
.faq-q .chev{ width:22px; height:22px; flex:none; color:var(--gold-deep); transition:transform .25s; }
.faq-item.open .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 24px 22px; font-size:15.5px; color:var(--muted); line-height:1.65; }

/* ============ EIND-CTA ============ */
.finalcta{ text-align:center; max-width:680px; margin:0 auto; }
.finalcta h2{ font-size:clamp(30px,4.6vw,50px); }
.finalcta .lead{ margin:18px auto 32px; }
.finalcta .hero-cta{ justify-content:center; }
.payoff{ font-family:var(--ff-head); font-weight:700; font-size:15px; color:var(--gold-ink); margin-top:30px; letter-spacing:.01em; }

/* ============ FOOTER ============ */
.footer{ background:var(--ink); color:rgba(255,255,255,.66); padding:64px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.footer h4{ color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; font-weight:700; }
.footer-col a{ display:block; font-size:14.5px; color:rgba(255,255,255,.66); padding:6px 0; transition:color .15s; }
.footer-col a:hover{ color:#fff; }
.footer-intro p{ color:rgba(255,255,255,.6); font-size:14.5px; margin:14px 0 18px; max-width:300px; }
.news{ display:flex; gap:8px; max-width:320px; }
.news input{ flex:1; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#fff; font-family:var(--ff-body); font-size:14px; }
.news input::placeholder{ color:rgba(255,255,255,.4); }
.news button{ padding:12px 16px; border-radius:8px; border:none; background:var(--gold); color:var(--ink); font-family:var(--ff-head); font-weight:700; cursor:pointer; font-size:14px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.footer-bottom p{ font-size:13px; color:rgba(255,255,255,.5); }
.footer-bottom .payoff{ margin-top:0; color:var(--gold); }

/* ============ COOKIE BANNER ============ */
.cookie{ position:fixed; left:20px; right:20px; bottom:20px; z-index:90; max-width:560px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-md); padding:20px 22px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap; transform:translateY(160%); transition:transform .4s ease; }
.cookie.show{ transform:translateY(0); }
.cookie p{ font-size:13.5px; color:var(--ink-soft); flex:1; min-width:220px; line-height:1.5; }
.cookie p a{ color:var(--gold-deep); text-decoration:underline; }
.cookie-btns{ display:flex; gap:10px; }
.cookie .btn{ padding:11px 18px; font-size:14px; }

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ max-width:440px; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-intro{ grid-column:1 / -1; }
  .borden-wrap{ grid-template-columns:1fr; gap:32px; }
}
@media(max-width:860px){
  .nav-links, .nav-right .nav-login, .nav-right .btn{ display:none; }
  .hamburger{ display:flex; }
  .cards-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .step-conn{ display:none; }
  .pricing{ grid-template-columns:1fr; }
  .plan.featured{ transform:none; order:-1; }
  .plan.featured:hover{ transform:translateY(-4px); }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:24px 12px; }
  .trust-item:nth-child(2)::before, .trust-item:nth-child(3)::before{ display:none; }
  .freeband-grid{ grid-template-columns:1fr; gap:24px; }
  .freeband-cta{ justify-content:flex-start; }
}
@media(max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .feat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .feat{ padding:18px 16px; }
  .borden-cats{ gap:10px; }
  .hero-card{ padding:18px; }
  .hc-float{ display:none; }
  .hero-cta .btn, .finalcta .btn, .cookie-btns{ width:100%; }
  .cookie-btns{ width:100%; }
  .cookie-btns .btn{ flex:1; }
}
@media(max-width:380px){
  .borden-cats{ grid-template-columns:1fr 1fr; }
}

/* =================================================================
   SUBPAGE STYLES (gedeeld over alle binnenpagina's)
   ================================================================= */

/* Active nav state */
.nav-links a.active{ color:var(--ink); font-weight:600; }
.nav-links a.active::after{ content:""; display:block; height:2px; background:var(--gold); border-radius:2px; margin-top:3px; }

/* ---- PAGE HERO ---- */
.page-hero{ padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,60px); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; top:-30%; right:-10%; width:520px; height:520px; z-index:0;
  background:radial-gradient(circle, rgba(244,185,66,.16), rgba(244,185,66,0) 68%); pointer-events:none; }
.page-hero .wrap{ position:relative; z-index:1; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:20px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); transition:color .15s; }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb span{ color:var(--line); }
.breadcrumb .cur{ color:var(--gold-ink); font-weight:600; }
.page-hero h1{ font-size:clamp(34px,5vw,54px); max-width:780px; }
.page-hero .lead{ max-width:620px; }
.page-hero .hero-cta{ margin-top:30px; }

/* ---- PROSE / CONTENT ---- */
.prose{ max-width:760px; }
.prose.center{ margin:0 auto; }
.prose h2{ font-size:clamp(26px,3.4vw,36px); margin:0 0 16px; }
.prose h3{ font-size:21px; margin:30px 0 10px; }
.prose p{ font-size:16.5px; color:var(--ink-soft); margin-bottom:16px; line-height:1.7; }
.prose ul.bullets{ display:flex; flex-direction:column; gap:12px; margin:18px 0 22px; }
.prose ul.bullets li{ position:relative; padding-left:32px; font-size:16px; color:var(--ink-soft); }
.prose ul.bullets li svg{ position:absolute; left:0; top:3px; width:20px; height:20px; color:var(--green); }

/* split content block: text + visual */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.split.reverse .split-visual{ order:-1; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } .split.reverse .split-visual{ order:0; } }

/* info callout card */
.callout{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; padding:24px 26px; box-shadow:var(--shadow-sm); }
.callout h3{ font-size:18px; margin:0 0 8px; }
.callout p{ font-size:15px; color:var(--muted); margin:0; }

/* exam fact stat row */
.factrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:8px 0; }
.factbox{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 24px; box-shadow:var(--shadow-sm); text-align:center; }
.factbox .big{ font-family:var(--ff-head); font-weight:800; font-size:38px; color:var(--ink); line-height:1; }
.factbox .big span{ color:var(--gold-ink); }
.factbox .cap{ font-size:14px; color:var(--muted); margin-top:8px; }
@media(max-width:680px){ .factrow{ grid-template-columns:1fr; } }

/* ---- LEERMETHODE timeline (uitleg→voorbeeld→ezelsbrug→check) ---- */
.method{ display:grid; gap:18px; max-width:780px; margin:0 auto; }
.method-step{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px 26px; box-shadow:var(--shadow-sm); }
.method-step .mnum{ width:46px; height:46px; border-radius:12px; background:var(--ink); color:var(--gold); font-family:var(--ff-head); font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; }
.method-step h3{ font-size:18.5px; margin:4px 0 6px; }
.method-step p{ font-size:15px; color:var(--muted); margin:0; }

/* ---- COMPARISON / PRICING TABLE ---- */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); }
.cmp th, .cmp td{ padding:16px 18px; text-align:center; border-bottom:1px solid var(--line); font-size:15px; }
.cmp thead th{ font-family:var(--ff-head); font-weight:800; font-size:16px; color:var(--ink); background:var(--bg); }
.cmp thead th.feat-col{ text-align:left; }
.cmp tbody td:first-child{ text-align:left; color:var(--ink-soft); font-weight:500; }
.cmp .col-featured{ background:rgba(244,185,66,.07); position:relative; }
.cmp thead th.col-featured{ background:rgba(244,185,66,.16); color:var(--gold-deep); }
.cmp tbody tr:last-child td{ border-bottom:none; }
.cmp .yes{ color:var(--green); } .cmp .no{ color:var(--line); }
.cmp .yes svg, .cmp .no svg{ width:20px; height:20px; display:inline-block; vertical-align:middle; }
.cmp .price-cell{ font-family:var(--ff-head); font-weight:800; font-size:20px; color:var(--ink); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media(max-width:680px){ .cmp th, .cmp td{ padding:12px 10px; font-size:13.5px; } }

/* ---- VERKEERSBORDEN volledig grid ---- */
.sign-section{ margin-bottom:48px; }
.sign-section-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.sign-section-head .pill{ font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--gold-ink); background:rgba(244,185,66,.14); padding:5px 12px; border-radius:100px; }
.sign-section-head h2{ font-size:clamp(22px,3vw,28px); }
.sign-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:760px){ .sign-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:380px){ .sign-grid{ grid-template-columns:1fr 1fr; } }

/* ---- CONTACT ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:32px; } }
.contact-method{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-method:last-child{ border-bottom:none; }
.contact-method .cm-ic{ width:46px; height:46px; border-radius:12px; background:rgba(244,185,66,.14); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-method .cm-ic svg{ width:22px; height:22px; }
.contact-method h3{ font-size:16.5px; margin-bottom:3px; }
.contact-method p{ font-size:14.5px; color:var(--muted); margin:0; }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--ff-head); font-weight:600; font-size:14px; color:var(--ink); margin-bottom:7px; }
.field input, .field textarea, .field select{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:9px; font-family:var(--ff-body); font-size:15px; color:var(--ink); background:var(--bg); transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(244,185,66,.18); }
.field textarea{ min-height:130px; resize:vertical; }
.form-card .btn{ width:100%; }
.form-msg{ display:none; background:rgba(45,106,79,.10); border:1px solid rgba(45,106,79,.25); color:var(--green); padding:14px 16px; border-radius:9px; font-size:14.5px; font-weight:500; margin-bottom:18px; }

/* section tint helper */
.tint{ background:var(--surface); }

/* =================================================================
   SPOT-ILLUSTRATIES (line/duotone, on-brand)
   ================================================================= */
.card-illu{ width:96px; height:96px; display:block; margin-bottom:18px; }
.step-illu{ width:84px; height:84px; display:block; margin:2px 0 12px; }
.section-illu{ width:200px; max-width:62vw; height:auto; display:block; margin:0 auto 26px; }
@media(prefers-reduced-motion:no-preference){
  .card:hover .card-illu, .step:hover .step-illu{ transform:translateY(-2px) rotate(-2deg); transition:transform .3s ease; }
}

/* =================================================================
   CONTEXTUELE ICOON-LIJST (i.p.v. kale vinkjes in opsommingen)
   ================================================================= */
.icon-list{ display:flex; flex-direction:column; gap:14px; margin:18px 0 22px; }
.icon-list li{ display:flex; align-items:center; gap:14px; font-size:16px; color:var(--ink-soft); line-height:1.45; }
.icon-list .li-badge{ width:40px; height:40px; border-radius:11px; background:#FBF3E1; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .25s ease; }
.icon-list .li-badge svg{ width:21px; height:21px; color:var(--ink); }
.icon-list li:hover .li-badge{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .icon-list li:hover .li-badge{ transform:none; } }
/* hero-assure: contextueel icoon i.p.v. vinkje, goud accent */
.hero-assure svg{ color:var(--gold-ink); }

/* =================================================================
   THEORIEBUDDIE UPGRADE — CONVERSIE- & EFFECT-COMPONENTEN (2026-06-23)
   Effecten-kit-patronen direct gemapt op het lichte TheorieBuddie-palet
   (i.p.v. de volledige donkere effects.css te linken → lichter + CWV-vriendelijk).
   Alles degradeert onder prefers-reduced-motion.
   ================================================================= */

/* ---- SCROLL-PROGRESSBALK (bovenrand) ---- */
.progressbar{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:120; background:transparent; pointer-events:none; }
.progressbar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transition:width .1s linear; }

/* ---- NAV AUTO-HIDE (verbergt bij scroll-down, komt terug bij scroll-up) ---- */
.header{ transition:border-color .25s, box-shadow .25s, transform .45s cubic-bezier(.16,1,.3,1); }
.header.nav-hidden{ transform:translateY(-103%); }
@media (prefers-reduced-motion:reduce){ .header.nav-hidden{ transform:none; } }

/* ---- ACCENT-UNDERLINE DRAW (op één woord, goud) ---- */
.u-draw{ background-image:linear-gradient(var(--gold),var(--gold)); background-position:0 92%; background-repeat:no-repeat; background-size:0 .14em; padding-bottom:.02em; }
.reveal.in .u-draw, .u-draw.in{ animation:udraw 1s .3s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes udraw{ to{ background-size:100% .14em; } }
@media (prefers-reduced-motion:reduce){ .u-draw{ background-size:100% .14em; animation:none; } }

/* ---- "INHOUD GECONTROLEERD" / VERIFIED BADGE ---- */
.checked-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head); font-weight:700; font-size:13px;
  color:var(--green); background:rgba(45,106,79,.10); border:1px solid rgba(45,106,79,.22); padding:8px 14px; border-radius:100px; }
.checked-badge svg{ width:16px; height:16px; flex:none; }
.checked-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; box-shadow:0 0 0 0 rgba(45,106,79,.5); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(45,106,79,.45);} 70%{ box-shadow:0 0 0 7px rgba(45,106,79,0);} 100%{ box-shadow:0 0 0 0 rgba(45,106,79,0);} }
@media (prefers-reduced-motion:reduce){ .checked-badge .dot{ animation:none; } }

/* ---- HERO MICRO-SOCIAL-PROOF (rating-regel met [INVULLEN]-slot) ---- */
.hero-proof{ display:flex; align-items:center; gap:12px; margin-top:24px; font-size:14px; color:var(--ink-soft); flex-wrap:wrap; }
.hero-proof .stars{ display:inline-flex; gap:2px; color:var(--gold-deep); }
.hero-proof .stars svg{ width:17px; height:17px; }
.hero-proof strong{ font-family:var(--ff-head); color:var(--ink); }

/* ---- BUDDIE DE UIL (mascotte-chip in hero-card) ---- */
.buddie-chip{ position:absolute; left:-26px; top:-22px; z-index:3; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:7px 14px 7px 8px; box-shadow:var(--shadow-md); }
.buddie-chip .owl{ width:34px; height:34px; flex:none; }
.buddie-chip span{ font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--ink); line-height:1.15; }
.buddie-chip span small{ display:block; font-weight:500; font-size:11px; color:var(--muted); }
@media(max-width:560px){ .buddie-chip{ left:8px; top:-18px; } }

/* ---- PAYMENT / TRUST STRIP ---- */
.paystrip{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.paystrip-grid{ display:flex; align-items:center; justify-content:center; gap:14px 34px; flex-wrap:wrap; }
.paystrip-item{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--muted); }
.paystrip-item svg{ width:18px; height:18px; color:var(--green); flex:none; }
.pay-logos{ display:inline-flex; align-items:center; gap:10px; }
.pay-logos .pay{ height:26px; width:auto; border:1px solid var(--line); border-radius:6px; background:#fff; padding:3px 7px; display:inline-flex; align-items:center; font-family:var(--ff-head); font-weight:800; font-size:12px; letter-spacing:-.01em; }
.pay.ideal{ color:#CC0066; } .pay.visa{ color:#1A1F71; } .pay.mc{ color:#1A1A1A; }

/* ---- COUNT-UP TELLERS (hergebruikt .trust-num met data-count via JS) ---- */
.trust-num.counting::after{ content:""; }

/* ---- WAAROM THEORIEBUDDIE — 6 DIFFERENTIATIE-KAARTEN ---- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.why{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:26px 24px; box-shadow:var(--shadow-sm);
  position:relative; transition:transform .22s ease, box-shadow .22s ease, border-color .22s; overflow:hidden; }
.why:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.why .why-n{ font-family:var(--ff-head); font-weight:800; font-size:13px; color:var(--gold-ink); letter-spacing:.04em; }
.why .why-ic{ width:46px; height:46px; border-radius:12px; background:rgba(244,185,66,.16); color:var(--gold-ink); display:flex; align-items:center; justify-content:center; margin:10px 0 14px; }
.why .why-ic svg{ width:24px; height:24px; }
.why h3{ font-size:18px; margin-bottom:8px; }
.why p{ font-size:14.5px; color:var(--muted); line-height:1.55; }
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---- VS GOEDKOPE CONCURRENT (compacte vergelijking) ---- */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:760px; margin:34px auto 0; }
.versus .vcol{ border-radius:14px; padding:24px 24px 22px; border:1px solid var(--line); }
.versus .vcol.them{ background:var(--surface); }
.versus .vcol.us{ background:linear-gradient(180deg,#FFFCF4,#FFF); border:2px solid var(--gold); box-shadow:var(--shadow-md); }
.versus .vcol h4{ font-size:16px; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.versus .vcol ul{ display:flex; flex-direction:column; gap:11px; }
.versus .vcol li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-soft); align-items:flex-start; }
.versus .vcol li svg{ width:18px; height:18px; flex:none; margin-top:2px; }
.versus .them li svg{ color:var(--muted); } .versus .us li svg{ color:var(--green); }
@media(max-width:680px){ .versus{ grid-template-columns:1fr; } }

/* ---- MINI-QUIZ "Durf jij deze vraag?" ---- */
.quiz{ max-width:680px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); padding:clamp(24px,3vw,38px); }
.quiz-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.quiz-tag{ font-family:var(--ff-head); font-weight:700; font-size:12.5px; color:var(--gold-ink); background:rgba(244,185,66,.16); padding:6px 12px; border-radius:100px; }
.quiz-q{ font-family:var(--ff-head); font-weight:800; font-size:clamp(19px,2.4vw,24px); color:var(--ink); margin-bottom:6px; line-height:1.25; }
.quiz-sub{ font-size:14px; color:var(--muted); margin-bottom:20px; }
.quiz-opts{ display:grid; gap:10px; }
.quiz-opt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:15px 17px; border-radius:11px; border:1.5px solid var(--line); background:var(--bg);
  font-family:var(--ff-body); font-size:15.5px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:border-color .18s, background .18s, transform .12s; }
.quiz-opt:hover{ border-color:var(--ink); }
.quiz-opt:active{ transform:scale(.992); }
.quiz-opt .mk{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; }
.quiz-opt .mk svg{ width:13px; height:13px; opacity:0; }
.quiz.answered .quiz-opt{ cursor:default; }
.quiz-opt.correct{ border-color:var(--green); background:rgba(45,106,79,.08); color:var(--ink); font-weight:600; }
.quiz-opt.correct .mk{ border-color:var(--green); background:var(--green); }
.quiz-opt.correct .mk svg{ opacity:1; color:#fff; }
.quiz-opt.wrong{ border-color:var(--red); background:rgba(230,57,70,.06); }
.quiz-opt.wrong .mk{ border-color:var(--red); }
.quiz-explain{ display:none; margin-top:18px; padding:16px 18px; border-radius:12px; background:rgba(74,144,194,.08); border:1px solid rgba(74,144,194,.22); font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
.quiz-explain.show{ display:block; }
.quiz-explain strong{ color:var(--ink); font-family:var(--ff-head); }
.quiz-cta{ display:none; margin-top:18px; }
.quiz-cta.show{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---- PRODUCT-DEMO PREVIEW ---- */
.demo{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media(max-width:900px){ .demo{ grid-template-columns:1fr; gap:30px; } }
.demo-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-md); aspect-ratio:16/10; }
.demo-frame .demo-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background:linear-gradient(135deg,#F3F6FA,#FBF7EF); color:var(--muted); }
.demo-frame .demo-ph .play{ width:64px; height:64px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-gold); }
.demo-frame .demo-ph .play svg{ width:26px; height:26px; margin-left:3px; }
.demo-frame .demo-ph .ph-note{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.demo-frame .demo-bar{ position:absolute; top:0; left:0; right:0; height:34px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; padding:0 14px; }
.demo-frame .demo-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); display:inline-block; }

/* ---- 4-KAART PRIJZEN ---- */
.pricing.four{ grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.pricing.four .plan{ padding:28px 22px; }
.plan-price .per{ font-family:var(--ff-head); font-weight:600; font-size:15px; color:var(--muted); margin-bottom:8px; align-self:flex-end; }
.plan-tag{ font-size:12.5px; font-weight:600; color:var(--muted); margin:-2px 0 16px; }
.plan.guarantee{ border-color:var(--green); }
.plan.guarantee .plan-name{ color:var(--green); }
.plan-badge.green{ background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(45,106,79,.28); }
@media(max-width:1040px){ .pricing.four{ grid-template-columns:1fr 1fr; } .pricing.four .plan.featured{ transform:none; } }
@media(max-width:560px){ .pricing.four{ grid-template-columns:1fr; } }

/* ---- SLAAGGARANTIE TRUST-BLOK ---- */
.guarantee-block{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; background:linear-gradient(135deg,#0F1A2E,#16223c); color:#fff; border-radius:22px; padding:clamp(30px,4vw,48px); position:relative; overflow:hidden; }
.guarantee-block::before{ content:""; position:absolute; right:-6%; top:-50%; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(45,106,79,.4),transparent 64%); }
.guarantee-seal{ width:92px; height:92px; border-radius:50%; background:rgba(255,255,255,.06); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; flex:none; position:relative; z-index:1; }
.guarantee-seal svg{ width:46px; height:46px; color:var(--gold); }
.guarantee-block .gb-body{ position:relative; z-index:1; }
.guarantee-block h3{ color:#fff; font-size:clamp(22px,3vw,30px); margin-bottom:8px; }
.guarantee-block p{ color:rgba(255,255,255,.8); font-size:16px; max-width:560px; }
.guarantee-block .gb-cta{ position:relative; z-index:1; }
@media(max-width:780px){ .guarantee-block{ grid-template-columns:1fr; text-align:center; gap:18px; } .guarantee-seal{ margin:0 auto; } .guarantee-block p{ margin:0 auto; } }

/* ---- SOCIAL PROOF / REVIEWS (echte content via [INVULLEN]) ---- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:860px){ .reviews{ grid-template-columns:1fr; } }
.review-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow-sm); }
.review-card .stars{ display:inline-flex; gap:2px; color:var(--gold-deep); margin-bottom:12px; }
.review-card .stars svg{ width:18px; height:18px; }
.review-card p{ font-size:15px; color:var(--ink-soft); line-height:1.6; font-style:italic; }
.review-card .who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.review-card .who .av{ width:40px; height:40px; border-radius:50%; background:var(--bg); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:800; color:var(--muted); font-size:15px; }
.review-card .who b{ font-family:var(--ff-head); font-size:14.5px; color:var(--ink); display:block; }
.review-card .who small{ font-size:12.5px; color:var(--muted); }
.review-placeholder{ border-style:dashed; background:var(--bg); }
.review-placeholder p{ font-style:normal; color:var(--muted); }

/* ---- STICKY MOBIELE CONVERSIE-BALK ---- */
.ctabar{ position:fixed; left:0; right:0; bottom:0; z-index:85; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(15,26,46,.10); padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; transform:translateY(130%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.ctabar.show{ transform:none; }
.ctabar .cb-txt{ flex:1; min-width:0; }
.ctabar .cb-txt b{ display:block; font-family:var(--ff-head); font-size:14px; color:var(--ink); line-height:1.15; }
.ctabar .cb-txt small{ font-size:12px; color:var(--muted); }
.ctabar .btn{ padding:13px 18px; font-size:15px; white-space:nowrap; }
@media(min-width:861px){ .ctabar{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ctabar{ transition:none; } }

/* ---- GRATIS-FUNNEL: e-mailcapture in de freeband ---- */
.freeband .optin{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.freeband .optin input{ flex:1; min-width:200px; padding:15px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-family:var(--ff-body); font-size:15px; }
.freeband .optin input::placeholder{ color:rgba(255,255,255,.55); }
.freeband .optin input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(244,185,66,.25); }
.freeband .optin-msg{ display:none; margin-top:12px; color:var(--gold); font-size:14px; font-weight:600; }
.freeband .optin-msg.show{ display:block; }
.freeband .optin-note{ color:rgba(255,255,255,.6); font-size:12.5px; margin-top:10px; }

/* =================================================================
   THEORIEBUDDIE — "WOW"-LAAG (2026-06-23) · premium CSS-3D + canvas
   Pointer-3D, aurora, cursor-glow, magnetic, en 4 signature-modules:
   3D verkeersbord-explorer · live examen-simulatie · 3D tilt-hero ·
   scroll-driven leerpad. Vanilla, snel, volledig reduced-motion-safe.
   ================================================================= */

/* ---- AURORA-MESH ACHTERGROND (hero) ---- */
.hero{ perspective:1500px; }
.aurora{ position:absolute; inset:-30% -15% auto -15%; height:165%; z-index:0; pointer-events:none;
  filter:blur(46px) saturate(1.1); opacity:.68; will-change:background-position;
  background:
    radial-gradient(38% 42% at 18% 28%, rgba(244,185,66,.55), transparent 72%),
    radial-gradient(34% 38% at 82% 18%, rgba(74,144,194,.32), transparent 72%),
    radial-gradient(42% 46% at 64% 82%, rgba(45,106,79,.26), transparent 72%),
    radial-gradient(30% 32% at 40% 60%, rgba(244,185,66,.22), transparent 72%);
  background-size:200% 200%; animation:aurora 22s ease-in-out infinite; }
@keyframes aurora{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.hero-grain{ position:absolute; inset:0; z-index:0; opacity:.04; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- CURSOR-SPOTLIGHT (desktop, in hero) ---- */
.cursor-glow{ position:absolute; left:0; top:0; width:520px; height:520px; border-radius:50%; z-index:0; margin:-260px 0 0 -260px;
  background:radial-gradient(circle, rgba(244,185,66,.30) 0%, transparent 62%); filter:blur(22px);
  transform:translate3d(var(--gx,-400px),var(--gy,-400px),0); opacity:0; transition:opacity .6s ease; pointer-events:none; }
.cursor-glow.on{ opacity:1; }

/* ---- POINTER 3D-TILT (hero-device) ---- */
.tilt{ transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); transition:transform .25s cubic-bezier(.16,1,.3,1); }
.tilt .lift-1{ transform:translateZ(22px); } .tilt .lift-2{ transform:translateZ(38px); } .tilt .lift-3{ transform:translateZ(54px); }
.tilt-gloss{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 45%); mix-blend-mode:overlay; }
.tilt:hover .tilt-gloss{ opacity:1; }
.hero-visual{ perspective:1100px; }

/* ---- MAGNETIC BUTTONS ---- */
.magnetic{ will-change:transform; transition:transform .25s cubic-bezier(.2,.7,.2,1), background .18s, box-shadow .18s, border-color .18s; }

/* ---- 3D VERKEERSBORD-EXPLORER (rotating ring) ---- */
.explorer{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
@media(max-width:920px){ .explorer{ grid-template-columns:1fr; gap:24px; } }
.ring-stage{ perspective:1200px; height:360px; position:relative; display:flex; align-items:center; justify-content:center;
  touch-action:pan-y; cursor:grab; user-select:none; }
.ring-stage:active{ cursor:grabbing; }
.ring-stage::after{ content:""; position:absolute; left:50%; bottom:34px; transform:translateX(-50%); width:240px; height:46px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(15,26,46,.16), transparent 70%); filter:blur(7px); }
.ring{ position:relative; width:150px; height:190px; transform-style:preserve-3d; will-change:transform; }
.ring-card{ position:absolute; inset:0; border-radius:18px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px;
  backface-visibility:hidden; transition:border-color .25s, box-shadow .25s; }
.ring-card.active{ border-color:var(--gold); box-shadow:0 18px 44px rgba(244,185,66,.30); }
.ring-card .sign{ transform:scale(1.18); margin-bottom:4px; }
.ring-card .rc-lbl{ font-family:var(--ff-head); font-weight:800; font-size:15px; color:var(--ink); }
.ring-card .rc-cnt{ font-size:12px; color:var(--muted); }
.ring-controls{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.ring-btn{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .18s, border-color .18s; }
.ring-btn:hover{ border-color:var(--ink); transform:translateY(-2px); }
.ring-btn svg{ width:20px; height:20px; }
.explorer-detail{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow-sm); }
.explorer-detail .ed-cat{ font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--gold-ink); letter-spacing:.04em; text-transform:uppercase; }
.explorer-detail h3{ font-size:24px; margin:8px 0 10px; }
.explorer-detail p{ font-size:15.5px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.explorer-detail .ezel{ display:flex; gap:11px; align-items:flex-start; background:rgba(244,185,66,.10); border:1px solid rgba(244,185,66,.28); border-radius:12px; padding:14px 16px; }
.explorer-detail .ezel svg{ width:20px; height:20px; color:var(--gold-ink); flex:none; margin-top:1px; }
.explorer-detail .ezel span{ font-size:14.5px; color:var(--ink-soft); }
.explorer-detail .ezel b{ font-family:var(--ff-head); color:var(--ink); }
.explorer-hint{ font-size:13px; color:var(--muted); margin-top:14px; display:flex; align-items:center; gap:8px; }

/* ---- LIVE EXAMEN-SIMULATIE ---- */
.examsim{ max-width:680px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-md); padding:clamp(22px,3vw,34px); position:relative; overflow:hidden; }
.examsim-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; }
.examsim-prog{ flex:1; height:7px; border-radius:100px; background:var(--bg); overflow:hidden; }
.examsim-prog span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transition:width .4s ease; }
.examsim-meta{ font-family:var(--ff-head); font-weight:700; font-size:13px; color:var(--muted); white-space:nowrap; }
.examsim-timer{ font-family:var(--ff-head); font-weight:800; font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.examsim-timer.low{ color:var(--red); }
.examsim-scene{ height:150px; border-radius:14px; margin:8px 0 16px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#dfeaf5 0%, #eaf1f8 52%, #d9e6c9 52%, #e7efda 100%); }
.examsim-scene .road{ position:absolute; bottom:0; left:50%; width:74%; height:52%; transform:translateX(-50%); background:#5C6478; clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); }
.examsim-scene .road::after{ content:""; position:absolute; left:50%; top:6%; bottom:0; width:4px; transform:translateX(-50%); background:repeating-linear-gradient(#FAF7F0 0 14px, transparent 14px 26px); }
.examsim-scene .ssign{ position:absolute; top:18px; right:24px; width:40px; height:40px; }
.examsim-q{ font-family:var(--ff-head); font-weight:800; font-size:clamp(18px,2.3vw,22px); color:var(--ink); line-height:1.28; margin-bottom:16px; }
.examsim-opts{ display:grid; gap:10px; }
.examsim-opt{ display:flex; align-items:center; gap:13px; text-align:left; padding:14px 16px; border-radius:11px; border:1.5px solid var(--line); background:var(--bg);
  font-family:var(--ff-body); font-size:15px; font-weight:500; color:var(--ink-soft); cursor:pointer; transition:border-color .16s, background .16s, transform .1s; }
.examsim-opt:hover{ border-color:var(--ink); } .examsim-opt:active{ transform:scale(.992); }
.examsim-opt .mk{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; }
.examsim-opt .mk svg{ width:13px; height:13px; opacity:0; }
.examsim.answered .examsim-opt{ cursor:default; }
.examsim-opt.correct{ border-color:var(--green); background:rgba(45,106,79,.08); color:var(--ink); font-weight:600; }
.examsim-opt.correct .mk{ border-color:var(--green); background:var(--green); } .examsim-opt.correct .mk svg{ opacity:1; color:#fff; }
.examsim-opt.wrong{ border-color:var(--red); background:rgba(230,57,70,.06); } .examsim-opt.wrong .mk{ border-color:var(--red); }
.examsim-fb{ display:none; margin-top:16px; padding:15px 17px; border-radius:12px; font-size:14.5px; line-height:1.55; }
.examsim-fb.show{ display:block; }
.examsim-fb.good{ background:rgba(45,106,79,.08); border:1px solid rgba(45,106,79,.24); color:var(--ink-soft); }
.examsim-fb.bad{ background:rgba(230,57,70,.06); border:1px solid rgba(230,57,70,.24); color:var(--ink-soft); }
.examsim-fb b{ font-family:var(--ff-head); color:var(--ink); }
.examsim-foot{ display:flex; justify-content:flex-end; margin-top:16px; }
.examsim-next{ display:none; } .examsim-next.show{ display:inline-flex; }
/* score-scherm */
.examsim-result{ display:none; text-align:center; padding:8px 0; }
.examsim-result.show{ display:block; }
.examsim-score{ font-family:var(--ff-head); font-weight:800; font-size:clamp(40px,7vw,64px); line-height:1; color:var(--ink); }
.examsim-score b{ color:var(--gold-ink); }
.examsim-result .rlbl{ font-size:16px; color:var(--muted); margin:8px 0 22px; }
.examsim-result .examsim-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.examsim-ring{ width:120px; height:120px; margin:0 auto 14px; position:relative; }
.examsim-ring svg{ transform:rotate(-90deg); }
.examsim-ring .rtrack{ fill:none; stroke:var(--line); stroke-width:9; }
.examsim-ring .rfill{ fill:none; stroke:var(--green); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }
.examsim-ring .rcen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:800; font-size:26px; color:var(--ink); }

/* ---- SCROLL-DRIVEN LEERPAD ---- */
.journey{ position:relative; }
.journey-track{ position:relative; max-width:760px; margin:0 auto; }
.journey-line{ position:absolute; left:31px; top:10px; bottom:10px; width:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.journey-line .fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); transition:height .2s linear; }
.journey-step{ position:relative; display:grid; grid-template-columns:66px 1fr; gap:22px; align-items:start; padding:18px 0 46px; }
.journey-step:last-child{ padding-bottom:0; }
.journey-node{ width:66px; height:66px; border-radius:18px; background:var(--surface); border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s, background .45s, box-shadow .45s; }
.journey-node svg{ width:30px; height:30px; color:var(--muted); transition:color .45s; }
.journey-step.active .journey-node{ transform:scale(1.06) translateZ(0); border-color:var(--gold); background:linear-gradient(135deg,#FFFCF4,#fff); box-shadow:var(--shadow-gold); }
.journey-step.active .journey-node svg{ color:var(--gold-ink); }
.journey-num{ position:absolute; top:-8px; left:-8px; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--gold);
  font-family:var(--ff-head); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; z-index:3; }
.journey-body{ padding-top:6px; opacity:.55; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.journey-step.active .journey-body{ opacity:1; transform:none; }
.journey-body h3{ font-size:21px; margin-bottom:8px; }
.journey-body p{ font-size:15.5px; color:var(--muted); line-height:1.6; }
@media (prefers-reduced-motion:reduce){
  .journey-body{ opacity:1; transform:none; }
  .journey-node{ transform:none; }
}

/* ---- WOW: globale reduced-motion vangnet voor de nieuwe laag ---- */
@media (prefers-reduced-motion:reduce){
  .aurora{ animation:none; }
  .tilt{ transform:none !important; transition:none; }
  .tilt-gloss{ display:none; }
  .cursor-glow{ display:none; }
  .magnetic{ transform:none !important; }
  .ring{ transform:rotateY(0) !important; }
  .examsim-prog span, .examsim-ring .rfill{ transition:none; }
}