/* ==========================================================================
   Abyco Solutions – website V2 (stijl "Aurora") – gedeelde stylesheet
   Vervangt style.css op de publieke pagina's. Beheer/portaal blijven style.css gebruiken.
   Puur CSS; animaties worden aangestuurd met klassen uit v2.js. Past binnen de CSP
   (geen externe scripts; fonts via fonts.googleapis.com). Respecteert prefers-reduced-motion.
   Variabelen zijn gelijk aan style.css zodat academy.css / afspraak.css blijven werken.
   ========================================================================== */

:root{
  --navy:#0B2545; --navy-2:#13315C; --navy-deep:#061530; --teal:#0E9F9A; --teal-d:#0A7F7B; --teal-t:#08736F; --teal-l:#5FD3C9;
  --mint:#E3F4F1; --amber:#F2A541; --ink:#16243A; --grey:#5B6B7B; --paper:#F6FAF9; --line:#D9E6E3;
  --bg:#FFFFFF; --surface:#FFFFFF; --heading:#0B2545; --link:#08736F; --band:#0B2545; --band-ink:#CFE3EA;
  --good:#1F9D62; --warn:#C27A12; --warn-t:#8A5300; --bad:#D2493C; --focus:#F2A541;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --text:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:20px; --radius-s:12px;
  --shadow:0 20px 60px -20px rgba(11,37,69,.25);
  --shadow-s:0 6px 20px -8px rgba(11,37,69,.18);
  --wrap:1200px; --hh:68px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
    --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9;
    --band:#0B2545; --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
    --good:#3DC486; --warn:#F0A93F; --warn-t:#F0A93F; --bad:#F06A5C;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071A33; --surface:#0E2544; --paper:#0A1F3C; --mint:#0F3A47; --line:#1E3A5C;
  --ink:#E6EEF3; --grey:#A7B8C7; --heading:#F2F6F9; --link:#5FD3C9; --teal-t:#5FD3C9;
  --band:#0B2545; --shadow:0 20px 60px -20px rgba(0,0,0,.6); --shadow-s:0 6px 20px -8px rgba(0,0,0,.5);
  --good:#3DC486; --warn:#F0A93F; --warn-t:#F0A93F; --bad:#F06A5C;
}

/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; font:400 1.02rem/1.6 var(--text); color:var(--ink); background:var(--bg); overflow-x:clip }
h1,h2,h3,h4{ font-family:var(--display); color:var(--heading); line-height:1.1; letter-spacing:-.02em; margin:0 0 .5em; font-weight:800 }
h1{ font-size:clamp(2.3rem,4.6vw,3.9rem) }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem) }
h3{ font-size:1.22rem; letter-spacing:-.01em }
h4{ font-size:1.05rem }
p{ margin:0 0 1em }
a{ color:var(--link) }
img,svg{ max-width:100% }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:24px }
.narrow{ max-width:800px }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600 }
.skip:focus{ top:12px }
::selection{ background:var(--teal-l); color:var(--navy) }

/* ---------- scroll-voortgang & cursor-aura ---------- */
.progress{ position:fixed; inset:0 auto auto 0; height:3px; width:100%; z-index:70; pointer-events:none; transform-origin:0 50%; transform:scaleX(var(--scroll,0)); background:linear-gradient(90deg,var(--teal),var(--teal-l),var(--amber)) }
.aura{ position:fixed; z-index:0; width:520px; height:520px; border-radius:50%; pointer-events:none; left:0; top:0; transform:translate(calc(var(--x,-1000px) - 50%),calc(var(--y,-1000px) - 50%)); background:radial-gradient(circle,rgba(95,211,201,.16),transparent 60%); transition:transform .18s var(--ease-out); mix-blend-mode:screen; opacity:0 }
html.js .aura{ opacity:1 }
@media (hover:none){ .aura{ display:none } }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-size:1.35rem; text-decoration:none; line-height:1; letter-spacing:-.02em }
.logo svg{ width:30px; height:30px; flex:none; filter:drop-shadow(0 4px 10px rgba(14,159,154,.35)) }
.logo b{ font-weight:800; color:var(--heading) } .logo span{ font-weight:500; color:var(--teal); margin-left:-9px }
.site-footer .logo b{ color:#fff } .site-footer .logo span{ color:var(--teal-l) }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:60; padding:14px 0; transition:padding .35s var(--ease-out) }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px }
.site-header::before{ content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent; transition:border-color .35s, background .35s; z-index:-1 }
.site-header.is-scrolled{ padding:8px 0 }
.site-header.is-scrolled::before{ border-bottom-color:var(--line); box-shadow:0 10px 30px -20px rgba(11,37,69,.35) }
.on-dark .site-header:not(.is-scrolled)::before{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none }
.on-dark .site-header:not(.is-scrolled) .logo b{ color:#fff }
.on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > a, .on-dark .site-header:not(.is-scrolled) .main-nav > ul > li > .sub-btn{ color:#DCE9EF }
.on-dark .site-header:not(.is-scrolled) .theme-btn{ color:#fff; border-color:rgba(255,255,255,.25) }
.on-dark .site-header:not(.is-scrolled) .nav-portal a{ border-color:rgba(255,255,255,.3) }
.on-dark .site-header:not(.is-scrolled) .nav-toggle{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25) }
.main-nav > ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:0 }
.main-nav a, .main-nav .sub-btn{ color:var(--ink); text-decoration:none; font:500 .95rem var(--text); padding:10px 12px; border-radius:10px; display:inline-flex; align-items:center; gap:6px; position:relative; white-space:nowrap; background:none; border:0; cursor:pointer }
.main-nav > ul > li > a::after{ content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; background:var(--teal); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease-out) }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a[aria-current="page"]::after{ transform:scaleX(1) }
.main-nav .has-mega{ display:flex; align-items:center }
.main-nav .has-mega > a{ padding-right:2px } .main-nav .has-mega > a::after{ right:2px }
.main-nav .sub-btn{ padding:10px 8px 10px 2px }
.main-nav .sub-btn svg{ width:13px; height:13px; flex:none; transition:transform .3s var(--ease-out) }
.main-nav .has-mega.open .sub-btn svg, .main-nav .has-mega.hold .sub-btn svg, .main-nav .has-mega:hover .sub-btn svg{ transform:rotate(180deg) }
.main-nav .mega{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,10px) scale(.98); width:min(92vw,900px); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 40px 90px -30px rgba(11,37,69,.45); padding:22px; display:grid; grid-template-columns:1.3fr 1fr; gap:22px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease-out), transform .35s var(--ease-out); z-index:30; transform-origin:top center; color:var(--ink) }
.main-nav .has-mega.open > .mega, .main-nav .has-mega.hold > .mega, .main-nav .has-mega:hover > .mega, .main-nav .has-mega:focus-within > .mega{ opacity:1; pointer-events:auto; transform:translate(-50%,0) }
.mega h3{ font:700 .72rem var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:0 0 10px }
.mega .items{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.mega .items a{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; padding:10px; border-radius:14px; color:var(--ink); white-space:normal; font:500 .9rem/1.35 var(--text); transition:background .2s, transform .3s var(--ease-out) }
.mega .items a:hover{ background:var(--paper); transform:translateX(4px) }
.mega .items a .ico{ width:40px; height:40px; margin:0; border-radius:11px } .mega .items a .ico svg{ width:20px; height:20px }
.mega .items a b{ display:block; font-family:var(--display); color:var(--heading); font-weight:700 } .mega .items a small{ color:var(--grey); font-size:.8rem }
.mega .feat{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-radius:16px; padding:20px; color:#D7E6EC; display:grid; align-content:space-between; gap:14px; position:relative; overflow:hidden }
.mega .feat::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(95,211,201,.45),transparent 65%); filter:blur(10px) }
.mega .feat > *{ position:relative; z-index:1 }
.mega .feat .kicker{ color:var(--teal-l); margin-bottom:8px } .mega .feat .kicker::before{ display:none }
.mega .feat h4{ color:#fff; margin:0 0 .3em; font-size:1.05rem } .mega .feat p{ margin:0; font-size:.86rem }
.mega .feat a{ color:var(--teal-l); padding:0; font-weight:700; display:inline-flex }
.mega .feat .links{ display:grid; gap:6px }
.mega .list{ display:grid; gap:2px } .mega .list a{ padding:8px 10px; border-radius:10px; color:var(--ink); white-space:normal; font:500 .9rem/1.35 var(--text) }
.mega .list a:hover{ background:var(--paper) }
.nav-portal a{ border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); border-radius:999px; padding:8px 14px; gap:6px; font-size:.9rem; margin-left:6px }
.nav-portal a::after{ display:none !important }
.nav-portal svg{ width:15px; height:15px; flex:none }
.nav-portal a:hover{ border-color:var(--teal); color:var(--teal-t) }
.nav-cta a{ background:var(--teal-d); color:#fff !important; font-weight:700; font-family:var(--display); padding:10px 18px; border-radius:999px; margin-left:8px; overflow:hidden }
.nav-cta a::after{ display:none !important }
.nav-cta a::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease-io) }
.nav-cta a:hover::before{ transform:translateX(120%) }
.theme-btn{ width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center; margin-left:8px; transition:transform .4s var(--ease-out), background .3s }
.theme-btn:hover{ transform:rotate(30deg); background:var(--paper) }
.theme-btn svg{ width:18px; height:18px }
.theme-btn .moon{ display:none }
:root[data-theme="dark"] .theme-btn .sun{ display:none } :root[data-theme="dark"] .theme-btn .moon{ display:block }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .sun{ display:none } :root:not([data-theme="light"]) .theme-btn .moon{ display:block } }
.nav-toggle{ display:none }
@media (min-width:1101px) and (max-width:1300px){
  .main-nav a, .main-nav .sub-btn{ font-size:.9rem; padding-left:8px; padding-right:8px }
  .nav-portal span{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .nav-portal a{ padding:8px 11px }
}
@media (max-width:1100px){
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 14px; font:600 .92rem var(--text); cursor:pointer; position:relative; z-index:2 }
  .nav-toggle svg{ width:20px; height:20px }
  .main-nav{ position:fixed; inset:0; background:var(--navy-deep); z-index:1; overflow:auto; padding:90px 24px 40px; opacity:0; pointer-events:none; clip-path:circle(0 at calc(100% - 60px) 40px); transition:clip-path .6s var(--ease-io), opacity .3s }
  .main-nav.open{ opacity:1; pointer-events:auto; clip-path:circle(160% at calc(100% - 60px) 40px) }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:4px; max-width:560px; margin:0 auto }
  .main-nav > ul > li{ transform:translateY(16px); opacity:0; transition:transform .5s var(--ease-out), opacity .5s; transition-delay:calc(var(--i,0)*50ms + .2s) }
  .main-nav.open > ul > li{ transform:none; opacity:1 }
  .main-nav > ul > li > a, .main-nav > ul > li > .sub-btn{ color:#fff !important; font:700 1.35rem var(--display); letter-spacing:-.02em; padding:12px 8px }
  .main-nav > ul > li > a::after{ display:none }
  .main-nav .has-mega{ flex-wrap:wrap; justify-content:space-between }
  .main-nav .has-mega > a{ flex:1 }
  .main-nav .sub-btn{ width:48px; height:48px; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:0 }
  .main-nav .sub-btn svg{ width:18px; height:18px }
  .main-nav .mega{ position:static; transform:none; width:100%; display:none; grid-template-columns:1fr; gap:14px; padding:6px 0 14px; background:transparent; border:0; box-shadow:none; opacity:1; pointer-events:auto; color:#DCE9EF }
  .main-nav .has-mega.open > .mega{ display:grid; transform:none }
  .mega h3{ color:var(--teal-l) }
  .mega .items{ grid-template-columns:1fr; gap:2px }
  .mega .items a, .mega .list a{ color:#fff; padding:8px 10px; grid-template-columns:1fr; gap:2px }
  .mega .items a .ico{ display:none } .mega .items a b{ color:#fff } .mega .items a small{ color:#9DB6C4 }
  .mega .items a:hover, .mega .list a:hover{ background:rgba(255,255,255,.08); transform:none }
  .mega .feat{ display:none }
  .nav-portal a{ border-color:rgba(255,255,255,.3) !important; justify-content:center; margin:10px 0 0; font-size:1rem !important; padding:14px !important }
  .nav-cta a{ background:var(--teal-l); color:var(--navy) !important; justify-content:center; padding:16px !important; margin:6px 0 0 }
  .theme-btn{ margin:14px auto 0; color:#fff !important; border-color:rgba(255,255,255,.3) !important }
}

/* ---------- knoppen ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 1rem var(--display); text-decoration:none; border-radius:999px; padding:15px 26px; border:2px solid transparent; cursor:pointer; line-height:1.2; position:relative; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease-out), background .25s, color .25s, border-color .25s, box-shadow .4s }
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease-out) }
.btn:hover svg{ transform:translateX(4px) }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); transform:translateX(-130%); transition:transform .7s var(--ease-io) }
.btn:hover::before{ transform:translateX(130%) }
.btn--primary{ background:var(--teal-d); color:#fff; box-shadow:0 10px 30px -10px rgba(14,159,154,.6) }
.btn--primary:hover{ background:var(--teal); color:#fff; box-shadow:0 18px 40px -12px rgba(14,159,154,.7); transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--heading); border-color:var(--line) }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal-t); transform:translateY(-2px) }
.on-navy .btn--primary{ background:var(--teal-l); color:var(--navy) }
.on-navy .btn--primary:hover{ background:#fff; color:var(--navy) }
.on-navy .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04); backdrop-filter:blur(6px) }
.on-navy .btn--ghost:hover{ border-color:#fff; color:#fff }
.btn:disabled{ opacity:.6; cursor:wait; transform:none }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8rem }
.link-arrow{ font-weight:700; text-decoration:none; font-family:var(--display); display:inline-flex; align-items:center; gap:6px }
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease-out) }
.link-arrow:hover::after{ transform:translateX(5px) }
.link-arrow:hover{ text-decoration:underline }

/* ---------- secties ---------- */
.section{ padding:96px 0; position:relative }
.section--tight{ padding:56px 0 }
.section--paper{ background:var(--paper) }
.section--mint{ background:linear-gradient(180deg,var(--mint),color-mix(in srgb,var(--mint) 60%,var(--bg))) }
.section--navy, .on-navy{ background:var(--band); color:var(--band-ink) }
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{ color:#fff }
.on-navy a{ color:var(--teal-l) }
.kicker{ font:700 .78rem/1.2 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--teal-t); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px }
.kicker::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; transform:scaleX(0); transform-origin:0 50%; transition:transform .8s var(--ease-out) .1s }
html.no-js .kicker::before, .is-in .kicker::before, .kicker.is-in::before{ transform:scaleX(1) }
.on-navy .kicker{ color:var(--teal-l) }
.lead{ font-size:1.18rem; color:var(--grey); max-width:66ch }
.on-navy .lead{ color:var(--band-ink) }
.section-head{ max-width:800px; margin-bottom:48px }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head.center .lead{ margin-inline:auto }
.section-head.center .kicker::before{ display:none }
.note{ font-size:.86rem; color:var(--grey) }
.on-navy .note{ color:#A9C3D0 }

/* ---------- reveal (scroll-animaties) ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay:calc(var(--i,0)*80ms) }
html.js [data-reveal="left"]{ transform:translateX(-40px) }
html.js [data-reveal="right"]{ transform:translateX(40px) }
html.js [data-reveal="scale"]{ transform:scale(.92) }
html.js [data-reveal].is-in{ opacity:1; transform:none; filter:none }
html.js .split .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
html.js .split .w > span{ display:inline-block; transform:translateY(125%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i)*55ms + var(--d,0ms)) }
html.js .split.is-in .w > span{ transform:none }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:96px 0 110px; background:radial-gradient(120% 90% at 80% 0%,#12386A 0%,var(--navy) 45%,var(--navy-deep) 100%); color:var(--band-ink); isolation:isolate }
.on-dark .hero{ margin-top:calc(-1 * var(--hh)); padding-top:calc(96px + var(--hh)) }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9 }
.aurora{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.75 }
.aurora i{ position:absolute; border-radius:50%; mix-blend-mode:screen }
.aurora i:nth-child(1){ width:55vw; height:55vw; left:-10%; top:-10%; background:radial-gradient(circle,rgba(14,159,154,.55),transparent 65%); animation:drift1 22s ease-in-out infinite alternate }
.aurora i:nth-child(2){ width:45vw; height:45vw; right:-5%; top:10%; background:radial-gradient(circle,rgba(95,211,201,.4),transparent 65%); animation:drift2 26s ease-in-out infinite alternate }
.aurora i:nth-child(3){ width:35vw; height:35vw; left:40%; bottom:-20%; background:radial-gradient(circle,rgba(242,165,65,.22),transparent 65%); animation:drift3 30s ease-in-out infinite alternate }
@keyframes drift1{ to{ transform:translate(12%,18%) scale(1.15) } }
@keyframes drift2{ to{ transform:translate(-15%,12%) scale(.9) } }
@keyframes drift3{ to{ transform:translate(-20%,-25%) scale(1.2) } }
.grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.gridlines{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%) }
.hero .wrap{ position:relative; z-index:2 }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center }
.hero h1{ color:#fff; margin-bottom:.4em; max-width:16ch }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,var(--teal-l),#9AF0E7 50%,var(--teal-l)); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:shine 6s linear infinite }
@keyframes shine{ to{ background-position:200% 0 } }
.hero .lead{ font-size:1.22rem; max-width:56ch }
.hero--page{ padding:56px 0 72px }
.on-dark .hero--page{ padding-top:calc(56px + var(--hh)) }
.hero--page h1{ font-size:clamp(2rem,4vw,3.1rem); max-width:22ch }
.hero--page .lead{ max-width:62ch; font-size:1.18rem }
.live{ display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); font:600 .8rem var(--text); color:#DCE9EF; margin-bottom:22px; backdrop-filter:blur(8px) }
.live i{ width:9px; height:9px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 0 rgba(95,211,201,.7); animation:pulse 1.8s ease-out infinite }
@keyframes pulse{ to{ box-shadow:0 0 0 12px rgba(95,211,201,0) } }
.rotator{ display:inline-grid; vertical-align:bottom; text-align:left; overflow:hidden; height:1.12em; line-height:1.12 }
.rotator span{ grid-area:1/1; white-space:nowrap; transform:translateY(110%); opacity:0; transition:transform .7s var(--ease-out), opacity .5s }
.rotator span.is-on{ transform:none; opacity:1 }
.rotator span.is-off{ transform:translateY(-110%); opacity:0 }
.pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding:0; list-style:none }
.pills li{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); border-radius:999px; padding:7px 14px; font-size:.86rem; color:#E3F4F1; backdrop-filter:blur(8px) }
.pills li::before{ content:""; width:16px; height:16px; border-radius:50%; flex:none; background:var(--teal-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat }
.crumbs{ margin:0 0 26px; font-size:.88rem }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px }
.crumbs li{ color:#A9C3D0 }
.crumbs li + li::before{ content:"/"; margin:0 6px 0 2px; opacity:.6 }
.crumbs a{ color:#E3F4F1; text-decoration:none } .crumbs a:hover{ text-decoration:underline }
.crumbs [aria-current]{ color:#fff }
.meta-line{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:.9rem; color:#A9C3D0 }

/* Hero-visual (V3): bewijsrapport als document */
.hero-art{ position:relative; min-height:520px; perspective:1200px }
.orbit{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.orbit-ring{ width:min(78%,440px); aspect-ratio:1; border-radius:50%; border:1px dashed rgba(255,255,255,.15); animation:spin 60s linear infinite }
.orbit-ring.r2{ position:absolute; width:min(56%,320px); border-color:rgba(95,211,201,.25); animation-duration:40s; animation-direction:reverse }
@keyframes spin{ to{ transform:rotate(360deg) } }
.chip{ position:absolute; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff; font:600 .82rem var(--text); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); z-index:2 }
html.js .chip{ opacity:0; animation:chipin .9s var(--ease-out) forwards, floaty var(--t,7s) ease-in-out infinite; animation-delay:var(--d,0s), calc(var(--d,0s) + .9s) }
@keyframes chipin{ from{ opacity:0; transform:translateY(20px) scale(.9) } to{ opacity:1; transform:none } }
@keyframes floaty{ 50%{ transform:translateY(-10px) } }
.chip b{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:var(--teal-l); color:var(--navy); font-size:.75rem; flex:none }
.chip.amber b{ background:var(--amber) }
.docrep{ position:absolute; inset:auto 0 0 auto; width:min(100%,470px); background:#fff; color:#16243A; border-radius:14px; box-shadow:0 50px 100px -30px rgba(0,0,0,.8); overflow:hidden; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg); font-size:.74rem }
html.js .docrep{ opacity:0; animation:docin 1.2s var(--ease-out) .5s forwards }
@keyframes docin{ from{ opacity:0; transform:translateY(40px) translateZ(40px) rotateY(-16deg) } to{ opacity:1; transform:translateZ(40px) rotateY(-8deg) rotateX(4deg) } }
.docrep .dh{ background:#0B2545; color:#D7E6EC; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.docrep .dh b{ color:#fff; font-family:var(--display); font-size:.86rem; display:block } .docrep .dh small{ font-size:.66rem }
.docrep .score{ display:flex; gap:5px; flex:none }
.docrep .score span{ background:rgba(255,255,255,.12); border-radius:999px; padding:2px 8px; font-size:.64rem; color:#fff; font-weight:600; white-space:nowrap }
.docrep table{ width:100%; border-collapse:collapse }
.docrep th{ text-align:left; font:700 .62rem var(--display); color:#5B6B7B; text-transform:uppercase; letter-spacing:.06em; padding:8px 14px; background:#F6FAF9; border-bottom:1px solid #D9E6E3 }
.docrep td{ padding:8px 14px; border-bottom:1px solid #D9E6E3; vertical-align:middle }
html.js .docrep td{ opacity:0; transform:translateX(-8px); animation:rowin .6s var(--ease-out) forwards; animation-delay:calc(1.1s + var(--i)*110ms) }
@keyframes rowin{ to{ opacity:1; transform:none } }
.docrep td .src{ display:block; color:#5B6B7B; font-size:.62rem }
.docrep .dot{ font-size:.68rem }
.docrep .dot::before{ box-shadow:0 0 0 0 rgba(31,157,98,.5); animation:pulse 2s ease-out infinite }
.docrep .ref{ color:#08736F; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; background:none; border:0; padding:8px 14px; margin:0; font-size:.74rem }
.docrep .df{ padding:8px 14px; font-size:.62rem; color:#5B6B7B; background:#F6FAF9 }
.stamp{ position:absolute; right:-10px; bottom:-26px; z-index:3; width:96px; height:96px; border-radius:50%; background:var(--teal-l); color:var(--navy); display:grid; place-items:center; text-align:center; font:800 .62rem/1.15 var(--display); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 20px 40px -14px rgba(95,211,201,.8); transform:rotate(-12deg) }
html.js .stamp{ transform:rotate(-12deg) scale(0); animation:stampin .6s cubic-bezier(.34,1.56,.64,1) 2.2s forwards }
@keyframes stampin{ to{ transform:rotate(-12deg) scale(1) } }
.stamp b{ display:block; font-size:1.5rem; letter-spacing:0 }

/* ---------- statistieken ---------- */
.stats{ margin-top:-50px; position:relative; z-index:3 }
.stats .wrap > div{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.stat{ padding:28px 26px; border-left:1px solid var(--line); position:relative }
.stat:first-child{ border-left:0 }
.stat b{ display:block; font:800 clamp(2rem,3.4vw,2.8rem)/1 var(--display); color:var(--heading); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.stat b small{ font-size:.5em; color:var(--teal-t); font-weight:700; margin-left:2px }
.stat > span{ font-size:.9rem; color:var(--grey) }

/* ---------- marquee ---------- */
.marquee{ overflow:hidden; padding:26px 0; border-block:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee ul{ display:flex; gap:56px; list-style:none; margin:0; padding:0; width:max-content; animation:marquee 40s linear infinite }
.marquee:hover ul{ animation-play-state:paused }
.marquee li{ font:700 .95rem var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:56px; white-space:nowrap }
.marquee li::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- urgentie ---------- */
.urgency{ padding:96px 0; background:var(--paper); position:relative; overflow:hidden }
.urgency .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.urg{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s }
.urg:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.urg::before{ content:""; position:absolute; inset:0 auto auto 0; height:4px; width:100%; background:linear-gradient(90deg,var(--amber),var(--teal)) }
.urg .date{ display:inline-block; background:var(--amber); color:var(--navy); font:800 .78rem var(--display); border-radius:999px; padding:4px 12px; margin-bottom:14px }
.urg h3{ margin-bottom:.35em }
.urg p{ font-size:.95rem; color:var(--grey) }
.count{ display:flex; align-items:baseline; gap:8px; margin:12px 0 6px; font:800 2.6rem/1 var(--display); color:var(--heading); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.count small{ font:600 .85rem var(--text); color:var(--grey); letter-spacing:0 }
.urgency-foot{ background:var(--paper); color:var(--grey); font-size:.8rem; padding:0 0 18px }

/* ---------- vergelijking ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-s) }
table.cmp{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:720px }
table.cmp caption{ text-align:left; padding:14px 18px; color:var(--grey); font-size:.86rem; caption-side:bottom; border-top:1px solid var(--line) }
table.cmp th, table.cmp td{ padding:16px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle }
table.cmp thead th{ font-family:var(--display); font-size:.9rem; color:var(--heading); background:var(--paper) }
table.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink) }
table.cmp tr:last-child th, table.cmp tr:last-child td{ border-bottom:0 }
table.cmp thead th:first-child{ text-align:left }
table.cmp tbody th, table.cmp thead th:first-child{ position:sticky; left:0; z-index:1; background:var(--surface) }
table.cmp thead th:first-child{ background:var(--paper) }
@media (max-width: 680px){
  table.cmp{ min-width:640px; font-size:.88rem }
  table.cmp tbody th, table.cmp thead th:first-child{ min-width:150px; max-width:170px; box-shadow:1px 0 0 var(--line) }
  table.cmp th, table.cmp td{ padding:12px 10px }
}
table.cmp .us{ background:var(--mint); position:relative }
table.cmp thead .us{ background:var(--navy); color:#fff }
table.cmp thead .us::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px var(--teal-l); border-radius:12px 12px 0 0; animation:glow 2.4s ease-in-out infinite; pointer-events:none }
@keyframes glow{ 50%{ box-shadow:inset 0 0 0 2px var(--teal-l), 0 0 30px rgba(95,211,201,.5) } }
html.js table.cmp tbody tr{ opacity:0; transform:translateX(-14px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i)*90ms) }
html.js table.cmp.is-in tbody tr{ opacity:1; transform:none }
.yes,.no,.part{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.9rem }
.yes::before,.no::before,.part::before{ content:""; width:20px; height:20px; border-radius:50%; flex:none; background-position:center; background-repeat:no-repeat }
.yes{ color:var(--teal-t) } .yes::before{ background-color:var(--teal-d); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.no{ color:var(--grey) } .no::before{ background-color:var(--line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' stroke='%235B6B7B' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") }
.part{ color:var(--warn-t) } .part::before{ background-color:var(--amber); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='2.6' fill='%230B2545'/%3E%3C/svg%3E") }
.legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:.86rem; color:var(--grey) }

/* ---------- grids & kaarten ---------- */
.grid{ display:grid; gap:24px }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.card{ --mx:50%; --my:50%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative; transform-style:preserve-3d; transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s }
.card--paper{ background:var(--paper) }
.card--mint{ background:var(--mint); border-color:transparent }
.card--navy{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); border-color:transparent; color:var(--band-ink) }
.card--navy h3, .card--navy h2{ color:#fff }
.card h3{ margin-bottom:.4em }
.card p:last-child{ margin-bottom:0 }
.card .link-arrow{ display:inline-flex; margin-top:6px }
a.card{ text-decoration:none; color:inherit; display:block; overflow:hidden }
a.card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(360px circle at var(--mx) var(--my),rgba(14,159,154,.14),transparent 45%); opacity:0; transition:opacity .4s }
a.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(300px circle at var(--mx) var(--my),var(--teal-l),transparent 50%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s }
a.card:hover{ box-shadow:var(--shadow); transform:translateY(-6px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) }
a.card:hover::before, a.card:hover::after{ opacity:1 }
a.card p{ color:var(--grey) }
.ico{ width:52px; height:52px; border-radius:14px; background:var(--mint); display:grid; place-items:center; margin-bottom:18px; flex:none; transition:transform .5s var(--ease-out), background .3s }
a.card:hover .ico{ transform:translateY(-4px) rotate(-6deg) scale(1.08); background:var(--teal-l) }
.ico svg{ width:26px; height:26px; stroke:var(--teal-t); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
a.card:hover .ico svg{ stroke:var(--navy) }
.card--mint .ico{ background:var(--surface) }
.ref{ display:inline-block; font-size:.76rem; font-weight:600; color:var(--teal-t); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-top:10px }
.tag{ display:inline-block; background:var(--amber); color:var(--navy); font:700 .76rem var(--display); border-radius:999px; padding:3px 11px; margin-bottom:12px; letter-spacing:.02em }
.tag--mint{ background:var(--mint); color:var(--teal-t) }
ul.check{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
ul.check li{ position:relative; padding-left:30px; font-size:.96rem }
ul.check li::before{ content:""; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%; background:var(--teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; transition:transform .5s var(--ease-out); transition-delay:calc(var(--i,0)*70ms + .2s) }
html.js ul.check li::before{ transform:scale(0) }
html.js .is-in ul.check li::before, html.js ul.check.is-in li::before{ transform:scale(1) }
.on-navy ul.check li::before, .card--navy ul.check li::before, .p1 ul.check li::before, .pkg--hl ul.check li::before{ background-color:var(--teal-l); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.5L13 6.3' stroke='%230B2545' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }

/* ---------- stappen (tijdlijn) ---------- */
.steps{ --prog:0; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; position:relative; counter-reset:step }
.steps::before{ content:""; position:absolute; left:0; right:0; top:26px; height:3px; background:var(--line); border-radius:3px }
.steps::after{ content:""; position:absolute; left:0; top:26px; height:3px; width:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--teal-l)); transform:scaleX(var(--prog)); transform-origin:0 50%; transition:transform .2s linear }
.steps li{ position:relative; padding-top:70px }
.steps .num{ position:absolute; top:0; left:0; width:54px; height:54px; border-radius:50%; background:var(--surface); border:3px solid var(--line); color:var(--grey); font:800 1.05rem var(--display); display:grid; place-items:center; transition:background .4s, border-color .4s, color .4s, transform .5s var(--ease-out), box-shadow .5s }
html.no-js .steps .num, .steps li.is-active .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
.steps li.is-active .num{ transform:scale(1.1); box-shadow:0 0 0 8px rgba(14,159,154,.15) }
.steps .when{ display:inline-block; font-size:.76rem; font-weight:700; color:var(--teal-t); background:var(--mint); border-radius:999px; padding:3px 10px; margin-bottom:10px }
.steps h3{ font-size:1.02rem } .steps p{ margin:0; font-size:.92rem; color:var(--grey) }
.callout{ border-left:4px solid var(--teal); background:var(--mint); border-radius:0 16px 16px 0; padding:20px 24px; margin:1.6em 0 }
.callout p:last-child, .callout ul:last-child{ margin-bottom:0 }
.callout--amber{ border-left-color:var(--amber); background:var(--paper) }
.callout h3, .callout h4{ margin-top:0 }

/* ---------- partners ---------- */
.tri{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.party{ border-radius:var(--radius); padding:32px 28px; position:relative; overflow:hidden; transition:transform .5s var(--ease-out), box-shadow .5s }
.party:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.party .role{ font:700 .76rem var(--display); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px }
.party h3{ font-size:1.35rem }
.p1{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:#D7E6EC } .p1 h3{ color:#fff } .p1 .role{ color:var(--teal-l) }
.p2{ background:var(--surface); border:1px solid var(--line) } .p2 .role{ color:var(--teal-t) }
.p3{ background:var(--surface); border:2px dashed var(--teal) } .p3 .role{ color:var(--teal-t) }

/* ---------- pakketten ---------- */
.pkgs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.pkg{ border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; background:var(--surface); display:flex; flex-direction:column; position:relative; transition:transform .5s var(--ease-out), box-shadow .5s }
.pkg:hover{ transform:translateY(-6px); box-shadow:var(--shadow) }
.pkg h3{ font-size:1.5rem; margin-bottom:.2em }
.pkg .for{ color:var(--grey); min-height:3.2em }
.pkg ul.check{ margin-top:10px; font-size:.96rem }
.pkg .result{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:.92rem }
.pkg--hl{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:var(--band-ink); border-color:transparent; box-shadow:0 30px 60px -30px rgba(11,37,69,.6); transform:translateY(-10px) }
.pkg--hl:hover{ transform:translateY(-16px) }
.pkg--hl::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,var(--teal-l),transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }
.pkg--hl h3{ color:#fff } .pkg--hl .for{ color:var(--band-ink) } .pkg--hl .result{ border-color:rgba(255,255,255,.18) }
.pkg .tag{ align-self:flex-start }
.guarantee{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; background:var(--mint); border-radius:var(--radius); padding:28px }
.guarantee svg{ width:52px; height:52px }
.guarantee h2, .guarantee h3{ margin-bottom:.3em }
.levels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.level{ padding:26px; border-left:1px solid var(--line); transition:background .3s }
.level:hover{ background:var(--paper) }
.level:first-child{ border-left:0 }
.level .lvl{ font:800 .8rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--teal-t) }
.level h3{ margin:.3em 0 .4em }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:0 22px; transition:border-color .3s, box-shadow .3s }
.faq details[open]{ border-color:var(--teal); box-shadow:var(--shadow-s) }
.faq summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; font:700 1.04rem/1.35 var(--display); color:var(--heading); position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:2px; top:50%; width:28px; height:28px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2308736F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transform:translateY(-50%); transition:transform .4s var(--ease-out), background-color .3s }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(135deg); background-color:var(--teal-l) }
.faq .a{ padding:0 0 18px; color:var(--ink) }
html.js .faq .a{ animation:faqin .5s var(--ease-out) }
@keyframes faqin{ from{ opacity:0; transform:translateY(-6px) } }
.faq .a p:last-child{ margin-bottom:0 }
.faq-cat{ margin-top:36px } .faq-cat:first-child{ margin-top:0 }
.faq-nav{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 28px }
.faq-nav a{ display:inline-block; padding:7px 14px; border-radius:999px; background:var(--mint); text-decoration:none; font-weight:600; font-size:.9rem; color:var(--heading); transition:background .2s, color .2s, transform .3s var(--ease-out) }
.faq-nav a:hover{ background:var(--teal-d); color:#fff; transform:translateY(-2px) }

/* ---------- CTA-band ---------- */
.cta-band{ position:relative; overflow:hidden; background:var(--navy-deep); color:var(--band-ink); border-radius:28px; padding:64px 56px; display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:32px; align-items:center; isolation:isolate }
.cta-band .aurora{ opacity:.9 }
.cta-band > *{ position:relative; z-index:2 }
.cta-band > .aurora, .cta-band > .grain{ z-index:0 }
.cta-band h2{ color:#fff; font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:.35em }
.cta-band p{ margin:0; max-width:52ch; color:var(--band-ink) }
.cta-band .btn-row{ margin-top:0 }

/* ---------- artikel ---------- */
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start }
.prose{ max-width:72ch; font-size:1.06rem }
.prose h2{ font-size:1.6rem; margin-top:2em }
.prose h3{ font-size:1.2rem; margin-top:1.6em }
.prose ul, .prose ol{ padding-left:1.3em; margin:0 0 1.1em }
.prose li{ margin-bottom:.45em }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 1.4em }
.prose th, .prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top }
.prose thead th{ background:var(--paper); font-family:var(--display); color:var(--heading) }
.prose blockquote{ margin:0 0 1.2em; padding:12px 18px; border-left:4px solid var(--teal-d); background:var(--mint); border-radius:0 var(--radius-s) var(--radius-s) 0; color:var(--ink) }
.prose blockquote p:last-child{ margin-bottom:0 }
.prose code{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.92em; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1px 5px }
.prose pre{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:14px 16px; overflow-x:auto; margin:0 0 1.2em }
.prose pre code{ border:0; padding:0; background:none }
.side{ position:sticky; top:96px; display:grid; gap:20px }
.side .card{ padding:22px }
.side h2{ font-size:1rem; margin-bottom:.6em }
.toc ol{ margin:0; padding-left:1.1em; font-size:.93rem }
.toc li{ margin-bottom:.4em }
.toc a{ text-decoration:none } .toc a:hover{ text-decoration:underline }
.stand{ display:inline-block; font-size:.8rem; color:var(--grey); border:1px solid var(--line); border-radius:999px; padding:3px 12px; background:var(--surface) }
.related{ display:grid; gap:10px; list-style:none; padding:0; margin:0 }
.related a{ font-weight:600; text-decoration:none } .related a:hover{ text-decoration:underline }
.post-card .meta{ font-size:.82rem; color:var(--grey); margin-bottom:.6em }

/* ---------- Bewijsautomaat voorbeeldrapport ---------- */
.report{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.report-head{ background:var(--navy); color:#D7E6EC; padding:20px 24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center }
.report-head b{ color:#fff; font-family:var(--display); font-size:1.05rem }
.report-score{ display:flex; gap:10px; flex-wrap:wrap }
.report-score span{ background:rgba(255,255,255,.1); border-radius:999px; padding:4px 12px; font-size:.85rem; color:#fff }
.report table{ width:100%; border-collapse:collapse; font-size:.92rem }
.report th, .report td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top }
.report thead th{ white-space:nowrap; background:var(--paper); font-family:var(--display); color:var(--heading); font-size:.85rem }
html.js .report tbody tr{ opacity:0; transform:translateX(-10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i,0)*70ms) }
html.js .report.is-in tbody tr{ opacity:1; transform:none }
.dot{ display:inline-flex; align-items:center; gap:7px; font-weight:600; white-space:nowrap }
.dot::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--grey) }
.dot--pass::before{ background:var(--good) } .dot--warn::before{ background:var(--amber) } .dot--fail::before{ background:var(--bad) }
.report .src{ display:block; color:var(--grey); font-size:.8rem; margin-top:3px }
.report-foot{ padding:14px 20px; font-size:.82rem; color:var(--grey) }

/* ---------- formulier ---------- */
.form{ display:grid; gap:18px }
.field{ display:grid; gap:6px }
.field label, .field legend{ font-weight:600; font-size:.95rem }
.field .hint{ font-size:.84rem; color:var(--grey); font-weight:400 }
.field input, .field select, .field textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid #9FB3B0; border-radius:12px; padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .3s }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--teal) }
.field textarea{ min-height:140px; resize:vertical }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--teal-d); box-shadow:0 0 0 4px rgba(14,159,154,.12) }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#B83232 }
.check-field{ display:flex; gap:10px; align-items:flex-start; font-size:.93rem }
.check-field input{ width:20px; height:20px; margin-top:2px; accent-color:var(--teal-d); flex:none }
.form-status{ border-radius:12px; padding:16px 18px; background:var(--mint); border-left:4px solid var(--amber) }
.form-status[hidden]{ display:none }
.form-status.is-ok{ border-left-color:var(--teal-d) }
.form-status.is-error{ background:#FBE7E7; border-left-color:#B83232; color:#5E1515 }
.form-status p{ margin:0 } .form-status ul{ margin:8px 0 0; padding-left:20px }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.contact-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.contact-list li{ display:grid; gap:2px }
.contact-list .l{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--grey); font-weight:600 }
.contact-list .v{ font:700 1.1rem var(--display); color:var(--heading) }

/* ---------- quickscan (qs-) ---------- */
.qs-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start }
.qs-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius) }
.qs-intro{ padding:18px 22px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center }
.qs-intro .lbl{ font-weight:600 }
.seg{ display:inline-flex; background:var(--mint); border-radius:999px; padding:4px; gap:4px; flex-wrap:wrap }
.seg button{ border:0; background:transparent; color:var(--ink); font:600 .85rem var(--text); padding:8px 15px; border-radius:999px; cursor:pointer; transition:background .25s, color .25s }
.seg button[aria-pressed="true"]{ background:var(--teal-d); color:#fff }
.qs-theme{ padding:6px 22px 10px }
.qs-theme + .qs-theme{ border-top:1px solid var(--line) }
.qs-theme-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; padding:18px 0 8px; border-bottom:1px solid var(--line) }
.qs-theme-head h2{ font-size:1.15rem; margin:0 }
.qs-theme-head .r{ font-size:.78rem; color:var(--grey) }
.q{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:center; padding:14px 0; border-bottom:1px dashed var(--line) }
.q:last-child{ border-bottom:0 }
.q p{ margin:0; overflow-wrap:anywhere; font-size:.97rem }
.q small{ display:block; color:var(--grey); font-size:.82rem; margin-top:3px }
.opts{ display:flex; gap:6px; flex-wrap:wrap }
.opts input{ position:absolute; opacity:0; pointer-events:none }
.opts label{ border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:.84rem; font-weight:600; cursor:pointer; color:var(--grey); background:var(--surface); user-select:none; min-width:54px; text-align:center; transition:background .2s, color .2s, border-color .2s, transform .3s var(--ease-out) }
.opts label:hover{ border-color:var(--teal); transform:translateY(-2px) }
.opts input:focus-visible + label{ outline:3px solid var(--focus); outline-offset:2px }
.opts input:checked + label.o2{ background:var(--good); border-color:var(--good); color:#fff }
.opts input:checked + label.o1{ background:var(--warn); border-color:var(--warn); color:#fff }
.opts input:checked + label.o0{ background:var(--bad); border-color:var(--bad); color:#fff }
.opts input:checked + label.ox{ background:var(--grey); border-color:var(--grey); color:var(--surface) }
.qs-aside{ position:sticky; top:96px; display:grid; gap:16px }
.qs-result, .qs-actions{ padding:22px }
.qs-result h2{ font-size:1rem; color:var(--grey); margin:0 }
.qs-score{ display:flex; align-items:center; gap:16px; margin:14px 0 6px }
@property --p{ syntax:'<number>'; inherits:false; initial-value:0 }
.ring{ --p:0; --c:var(--line); width:86px; height:86px; border-radius:50%; background:conic-gradient(var(--c) calc(var(--p)*1%), var(--mint) 0); display:grid; place-items:center; flex:none; transition:--p .8s var(--ease-out), background-color .3s }
.ring span{ width:66px; height:66px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font:800 1.25rem var(--display); font-variant-numeric:tabular-nums; color:var(--heading) }
.verdict b{ display:block; font:800 1.18rem/1.2 var(--display); color:var(--heading) }
.verdict small{ color:var(--grey) }
.qs-progress{ font-size:.8rem; color:var(--grey); margin:6px 0 14px }
.bars{ display:grid; gap:9px; margin:0; padding:0; list-style:none }
.bars li{ display:grid; grid-template-columns:1fr 44px; gap:4px 10px; font-size:.83rem; align-items:center }
.bar{ grid-column:1 / -1; height:7px; background:var(--mint); border-radius:9px; overflow:hidden }
.bar i{ display:block; height:100%; width:0; border-radius:9px; background:var(--line); transition:width .5s var(--ease-out), background-color .3s }
.bars .pct{ text-align:right; font-variant-numeric:tabular-nums; color:var(--grey); font-weight:600 }
.qs-actions h2{ font-size:1rem; margin-bottom:10px }
.qs-actions ol{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:.9rem }
.qs-actions .empty{ color:var(--grey); font-size:.9rem; margin:0 }
.qs-cta{ background:linear-gradient(160deg,var(--navy-2),var(--navy-deep)); color:var(--band-ink); border-radius:var(--radius); padding:22px }
.qs-cta h2{ color:#fff; font-size:1.12rem; margin:0 0 .4em }
.qs-cta p{ font-size:.9rem; margin:0 0 14px }
.qs-cta .btn{ font-size:.9rem; padding:10px 16px }
.qs-status{ font-size:.84rem; color:var(--teal-l); min-height:1.2em; margin-top:8px }
textarea.fallback{ width:100%; min-height:120px; margin-top:10px; font:12px/1.4 ui-monospace,Consolas,monospace; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:10px }
.qs-send{ padding:28px }
.qs-send h2{ font-size:1.25rem; margin:0 0 .4em }
.qs-send .intro{ color:var(--grey); margin:0 0 18px }
.cbw-scope{ border-radius:var(--radius); padding:16px 18px; margin:14px 0 0; background:var(--mint); font-size:.92rem }
.cbw-scope strong{ display:block; font-family:var(--display); color:var(--heading) }

/* ---------- footer ---------- */
.site-footer{ background:var(--navy-deep); color:#B9CFDB; padding:80px 0 28px; font-size:.93rem; position:relative; overflow:hidden }
.site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--teal-l),transparent) }
.site-footer a{ color:#E3F4F1; text-decoration:none; transition:color .2s, padding-left .3s var(--ease-out) }
.site-footer a:hover{ color:var(--teal-l); padding-left:4px }
.foot-grid{ display:grid; grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:36px }
.foot-grid h2{ color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot-brand p{ margin:16px 0 18px; max-width:34ch }
.foot-brand .logo:hover{ padding-left:0 }
.foot-contact{ display:grid; gap:4px; font-style:normal }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:.82rem; color:#94AEBE }
.foot-bottom ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:16px }
.big-mark{ font:800 clamp(4rem,18vw,15rem)/0.8 var(--display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); user-select:none; pointer-events:none; text-align:center; margin:56px 0 -40px; white-space:nowrap }

/* ---------- terug naar boven ---------- */
.totop{ position:fixed; right:22px; bottom:22px; z-index:65; width:50px; height:50px; border-radius:50%; border:0; background:var(--navy); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(20px); transition:opacity .4s, transform .4s var(--ease-out); box-shadow:var(--shadow); pointer-events:none }
.totop.is-on{ opacity:1; transform:none; pointer-events:auto }
.totop .arrow{ width:20px; height:20px }
.totop .ringsvg{ position:absolute; inset:0; width:100%; height:100% }
.totop circle{ fill:none; stroke:var(--teal-l); stroke-width:2; stroke-dasharray:150; stroke-dashoffset:calc(150 - 150*var(--scroll,0)); transform:rotate(-90deg); transform-origin:center }

/* ---------- 404 ---------- */
.error-code{ font:800 clamp(4rem,14vw,8rem)/1 var(--display); color:var(--teal-l); margin:0 0 10px; letter-spacing:-.05em }

/* ---------- responsief ---------- */
@media (max-width: 1100px){
  .foot-grid{ grid-template-columns:1fr 1fr 1fr } .foot-brand{ grid-column:1 / -1 }
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:36px }
  .steps::before, .steps::after{ display:none }
  html.js .steps .num{ background:var(--teal-d); border-color:var(--teal-l); color:#fff }
}
@media (max-width: 980px){
  .hero-grid, .article-layout, .qs-layout{ grid-template-columns:minmax(0,1fr) }
  .hero-art{ min-height:0; padding-top:64px }
  .orbit{ display:none }
  .docrep{ position:relative; inset:auto; margin:0 0 0 auto; transform:none }
  html.js .docrep{ animation-name:docin-flat }
  @keyframes docin-flat{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }
  .stats .wrap > div{ grid-template-columns:1fr 1fr } .stat:nth-child(3){ border-left:0 } .stat:nth-child(n+3){ border-top:1px solid var(--line) }
  .g3, .g4, .tri, .pkgs, .levels, .urgency .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .level{ border-left:0; border-top:1px solid var(--line) } .level:first-child{ border-top:0 }
  .side, .qs-aside{ position:static }
  .cta-band{ grid-template-columns:minmax(0,1fr); padding:44px 32px }
  .contact-grid{ grid-template-columns:minmax(0,1fr) }
  .pkg--hl{ transform:none } .pkg--hl:hover{ transform:translateY(-6px) }
}
@media (max-width: 680px){
  body{ font-size:15.5px } .wrap{ padding-inline:16px }
  .section{ padding:64px 0 } .urgency{ padding:64px 0 }
  .hero{ padding:56px 0 80px } .on-dark .hero{ padding-top:calc(56px + var(--hh)) }
  .hero--page{ padding:36px 0 48px } .on-dark .hero--page{ padding-top:calc(36px + var(--hh)) }
  .g2, .g3, .g4, .steps, .tri, .pkgs, .levels, .two, .urgency .grid{ grid-template-columns:minmax(0,1fr) }
  .stats .wrap > div{ grid-template-columns:1fr 1fr }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .card{ padding:22px }
  .guarantee{ grid-template-columns:minmax(0,1fr) }
  .q{ grid-template-columns:minmax(0,1fr) }
  .qs-theme, .qs-intro{ padding-inline:16px }
  .report th:nth-child(3), .report td:nth-child(3){ display:none }
  .prose table{ display:block; overflow-x:auto; font-size:.88rem }
  .prose th, .prose td{ padding:8px; hyphens:auto; overflow-wrap:anywhere }
  .btn-row .btn{ width:100% }
  .docrep{ width:100%; font-size:.68rem } .stamp{ width:80px; height:80px; right:-4px }
  .aura{ display:none }
}

/* ---------- print ---------- */
@media print{
  .site-header, .site-footer, .skip, .btn-row, .nav-toggle, .progress, .aura, .totop, .marquee, canvas, .aurora, .grain, .gridlines{ display:none !important }
  body{ font-size:11pt; color:#000; background:#fff }
  .section, .hero{ padding:16px 0; margin:0 }
  .on-navy, .section--navy, .hero{ background:#fff !important; color:#000 }
  .on-navy h1, .on-navy h2, .on-navy h3, .hero h1{ color:#0B2545 }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr{ opacity:1 !important; transform:none !important; filter:none !important }
}

/* ---------- toegankelijkheid: minder beweging ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important }
  html.js [data-reveal], html.js .split .w > span, html.js table.cmp tbody tr, html.js .report tbody tr, html.js .chip, html.js .docrep, html.js .docrep td, html.js .stamp{ opacity:1; transform:none; filter:none }
  html.js ul.check li::before{ transform:scale(1) }
  .rotator span{ opacity:1; transform:none } .rotator span:not(.is-on){ display:none }
  .aurora, .aura, .marquee ul{ animation:none }
  .kicker::before{ transform:scaleX(1) }
}

/* Toegankelijkheid (WCAG 2.5.8): klikdoelen minstens 24 px */
.main-nav .sub-btn{ min-width:24px }
.mega .feat .links a{ min-height:24px }