/* Ooglidcheck — huisstijl v2. Modern, fris, medisch kalm. */
:root{
  --ink:#22303a;
  --petrol:#33565f;
  --petrol-dark:#24424a;
  --petrol-deep:#1b333a;
  --sand:#f7f4ee;
  --mist:#eef4f2;
  --cream:#fdfcf9;
  --gold:#b98b2f;
  --gold-soft:#f3e7cd;
  --line:#e4ded3;
  --ok:#3e7d5a;
  --warn:#a4652c;
  --shadow:0 10px 30px -12px rgba(34,48,58,.18);
  --shadow-lg:0 24px 60px -20px rgba(34,48,58,.28);
  --max:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:17px}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.18;color:var(--petrol-dark)}
h1{font-size:clamp(2rem,4.8vw,3.3rem);letter-spacing:-.01em}
h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.6em}
h3{font-size:1.15rem;margin-bottom:.4em}
p{margin-bottom:1em}
a{color:var(--petrol);text-underline-offset:3px}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:780px}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(253,252,249,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;padding:13px 22px;max-width:var(--max);margin:0 auto}
.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--petrol-dark);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo svg{width:30px;height:30px}
.logo{letter-spacing:.01em}
.nav-links{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav-links a{text-decoration:none;font-size:.95rem;color:var(--ink);font-weight:500}
.nav-links a:hover{color:var(--petrol)}
.nav-links a.cta{background:linear-gradient(135deg,var(--petrol),var(--petrol-deep));color:#fff;padding:10px 20px;border-radius:999px;box-shadow:var(--shadow);transition:transform .15s}
.nav-links a.cta:hover{transform:translateY(-1px)}
.lang-switch{font-size:.85rem;border:1.5px solid var(--line);border-radius:999px;padding:5px 13px;text-decoration:none;color:var(--ink);background:#fff}
@media(max-width:760px){
  .nav-links a:not(.cta):not(.lang-switch){display:none}
  .nav{gap:10px;padding:10px 14px}
  .logo{font-size:1.05rem;gap:6px}.logo svg{width:26px;height:26px}
  .nav-links{gap:8px}
  .nav-links a.cta{padding:8px 14px;font-size:.85rem;white-space:nowrap}
  .lang-switch{padding:5px 10px}
}

/* Hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 480px at 85% -10%,rgba(51,86,95,.14),transparent 60%),
  radial-gradient(700px 420px at -10% 110%,rgba(185,139,47,.12),transparent 55%),
  linear-gradient(180deg,var(--mist),var(--sand));
  padding:84px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}}
.hero p.lead{font-size:1.18rem;margin:20px 0 30px;max-width:560px}
.hero-visual{position:relative}
.hero-visual svg{filter:drop-shadow(0 24px 48px rgba(27,51,58,.22));border-radius:28px}
.hero-chip{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:10px 16px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:8px;border:1px solid var(--line)}
.hero-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.hero-chip.c1{top:-14px;right:8%}
.hero-chip.c2{bottom:-16px;left:4%}
@media(max-width:880px){.hero-chip.c1{top:-10px;right:0}.hero-chip.c2{bottom:-10px;left:0}}
.disclosure{font-size:.88rem;color:#5d6a72;border-left:3px solid var(--gold);padding-left:12px;margin-top:28px;max-width:520px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--petrol),var(--petrol-deep));color:#fff;text-decoration:none;padding:15px 30px;border-radius:999px;font-weight:600;font-size:1rem;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn.secondary{background:#fff;color:var(--petrol);border:1.5px solid var(--petrol);box-shadow:none}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* Statband */
.stats{background:var(--petrol-deep);color:#e8eeeb;padding:26px 0}
.stats .wrap{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}
.stat{flex:1;min-width:150px;text-align:center}
.stat b{display:block;font-family:'Fraunces',serif;font-size:1.7rem;color:#fff}
.stat span{font-size:.82rem;opacity:.8}
.stats .src{width:100%;text-align:center;font-size:.72rem;opacity:.75;margin-top:6px}
.stats .src a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* Secties */
section{padding:64px 0}
section.alt{background:linear-gradient(180deg,var(--sand),var(--cream))}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;margin-top:30px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;position:relative;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);background:var(--mist);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.card .num{position:absolute;top:18px;right:24px;font-family:'Fraunces',serif;font-size:2.6rem;color:var(--line);font-weight:700;line-height:1}
.card p{font-size:.95rem}
.price{font-weight:600;color:var(--petrol-dark)}
.honest{background:linear-gradient(135deg,var(--petrol-dark),var(--petrol-deep));color:#eef2f0;border-radius:24px;padding:44px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.honest::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05)}
.honest h2{color:#fff}
.honest p{color:#d7e0dc;max-width:640px}

/* Fade-in bij scroll */
.fx{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fx.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}

/* Zelftest */
.check-shell{max-width:720px;margin:0 auto}
.progress{height:8px;background:var(--line);border-radius:99px;margin:26px 0;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--petrol),var(--gold));width:0;transition:width .4s}
.step{display:none}
.step.active{display:block;animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step h2{margin-bottom:6px}
.step .hint{color:#5d6a72;font-size:.95rem;margin-bottom:22px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.opt{background:#fff;border:2px solid var(--line);border-radius:18px;padding:20px;cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.opt:hover{border-color:var(--petrol);transform:translateY(-2px);box-shadow:var(--shadow)}
.opt.sel{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(51,86,95,.14)}
.opt svg{width:100%;height:auto;max-width:230px;margin:0 auto 12px;display:block;border-radius:14px}
.opt .lbl{font-weight:600;font-size:.97rem}
.opt .sub{font-size:.85rem;color:#5d6a72;margin-top:3px}
.factrow{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 20px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow)}
.factrow .q{font-weight:600;font-size:.95rem}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 17px;font-size:.9rem;cursor:pointer;font-family:inherit;transition:all .12s}
.seg button:hover{border-color:var(--petrol)}
.seg button.sel{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.step-nav{display:flex;justify-content:space-between;margin-top:30px;gap:12px}
.linkbtn{background:none;border:none;color:#5d6a72;cursor:pointer;font-size:.95rem;font-family:inherit;text-decoration:underline;text-underline-offset:3px}

/* E-mail-gate + resultaat */
.gate{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-lg)}
.gate label{font-size:.92rem;font-weight:600;display:block;margin-bottom:6px}
.gate input[type=text],.gate input[type=email]{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;margin-bottom:16px;background:var(--cream)}
.gate input:focus{outline:2px solid var(--petrol)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin-bottom:14px}
.consent input{margin-top:4px;accent-color:var(--petrol)}
.fineprint{font-size:.8rem;color:#5d6a72}
.result-box{border-radius:22px;padding:36px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.result-box.rA{border-top:6px solid var(--ok)}
.result-box.rB{border-top:6px solid var(--gold)}
.result-box.rC,.result-box.rD{border-top:6px solid var(--warn)}
.result-box h2{margin-bottom:12px}
.disclaimer{font-size:.83rem;color:#5d6a72;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.err{color:#9b3535;font-size:.9rem;margin-bottom:12px;display:none}

/* Kennisbank */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin-top:28px}
.kb-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.kb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kb-card h3{color:var(--petrol-dark)}
.kb-card .meta{font-size:.78rem;color:#5d6a72;margin-top:auto;padding-top:10px}
.kb-card .readmore{color:var(--gold);font-weight:600;font-size:.88rem}
article.kb{max-width:740px;margin:0 auto}
article.kb h1{margin-bottom:10px}
article.kb .byline{font-size:.88rem;color:#5d6a72;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:28px}
article.kb h2{margin-top:36px}
article.kb ul,article.kb ol{margin:0 0 1em 1.3em}
article.kb li{margin-bottom:.4em}
.author-box{background:var(--mist);border-radius:18px;padding:24px;margin-top:42px;font-size:.92rem;box-shadow:var(--shadow)}
.author-box strong{font-family:'Fraunces',serif}

/* FAQ */
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 22px;margin-bottom:10px;box-shadow:var(--shadow)}
summary{font-weight:600;cursor:pointer}
details[open]{border-color:var(--petrol)}
details p{margin-top:10px;font-size:.95rem}

/* CTA-banner */
.cta-banner{background:linear-gradient(135deg,var(--petrol),var(--petrol-deep));border-radius:24px;padding:44px;text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
.cta-banner h2{color:#fff}
.cta-banner p{color:#cfdad6;max-width:560px;margin:0 auto 22px}
.cta-banner .btn{background:#fff;color:var(--petrol-dark)}

/* Footer */
footer{background:var(--petrol-deep);color:#c9d4d0;padding:52px 0 38px;margin-top:48px;font-size:.9rem}
footer a{color:#e8eeeb}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
footer .foot-disclosure{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);font-size:.82rem;opacity:.85}

/* Howto-stappen */
.howto{counter-reset:s;margin:24px 0}
.howto li{list-style:none;position:relative;padding:0 0 24px 60px}
.howto li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--petrol),var(--petrol-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:var(--shadow)}
.notice{background:var(--gold-soft);border:1px solid #e6d3a8;border-radius:14px;padding:16px 20px;font-size:.92rem;margin:20px 0}

/* ── Illustratie-animaties v2 ── */
@keyframes ocFold{0%,18%{transform:translateY(0)}50%,78%{transform:translateY(5px)}100%{transform:translateY(0)}}
@keyframes ocFoldDeep{0%,18%{transform:translateY(0)}50%,78%{transform:translateY(9px)}100%{transform:translateY(0)}}
@keyframes ocPtosis{0%,18%{transform:translateY(0)}50%,78%{transform:translateY(6px)}100%{transform:translateY(0)}}
@keyframes ocBrow{0%,22%{transform:translateY(0)}52%,78%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes ocBlink{0%,91%{transform:scaleY(0)}94%{transform:scaleY(1)}97%,100%{transform:scaleY(0)}}
.oc-anim-fold{animation:ocFold 5s cubic-bezier(.45,0,.35,1) infinite}
.oc-anim-fold-deep{animation:ocFoldDeep 5s cubic-bezier(.45,0,.35,1) infinite}
.oc-anim-ptosis{animation:ocPtosis 5s cubic-bezier(.45,0,.35,1) infinite}
.oc-anim-brow{animation:ocBrow 5s cubic-bezier(.45,0,.35,1) infinite}
.oc-blink{animation:ocBlink 6.5s linear infinite}
@media (prefers-reduced-motion:reduce){
  .oc-anim-fold,.oc-anim-fold-deep,.oc-anim-ptosis,.oc-anim-brow,.oc-blink{animation:none}
  .oc-blink{transform:scaleY(0)}
}