@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/source-serif-4-var.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/assets/source-serif-4-italic-var.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/inter-var.woff2') format('woff2')}
:root{
  /* Caffeine-taal (eigenaar 01-09, drie keer "mega mooi/nice"): inkt op wit,
     heel licht grijze rustvlakken, EEN blauw accent. Wit op #2563EB meet 4.97:1. */
  --v6-ink:#0C0A09;--v6-muted:#0C0A09A6;--v6-stil:#0C0A0999;
  --v6-accent:#2563EB;--v6-accent-diep:#1D4ED8;--v6-accent-zacht:#DBEAFE;
  --v6-bg:#FFFFFF;--v6-bg2:#F7F4EE;--v6-line:#0C0A0912;--v6-line2:#0C0A0921;
  --v6-ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--v6-bg);color:var(--v6-ink);line-height:1.6;overflow-x:hidden}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--v6-ink);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
.v6{display:flex;flex-direction:column;gap:clamp(56px,8vw,110px)}

/* ── Acte 1: de opening ── */
/* De hemel: volledig in code. Witte serif-kop op de kern #5C89C6: gemeten 3.39:1,
   ruim boven de 3:1-lat voor grote vette tekst; de sub is 19px/600 (large). */
.v6-open{position:relative;min-height:100svh;padding:calc(var(--nav-h,72px) + clamp(44px,7vh,84px)) clamp(18px,4vw,40px) clamp(56px,8vw,96px);overflow:clip;text-align:center;background:radial-gradient(120% 70% at 18% 0%,#BCD4EE 0%,transparent 55%),radial-gradient(110% 80% at 88% 6%,#9FC0E6 0%,transparent 50%),linear-gradient(180deg,#6E99D1 0%,#4F7DBE 44%,#44699F 100%)}
.v6-aurora{position:absolute;inset:-24%;pointer-events:none;z-index:0;background:radial-gradient(46% 36% at 30% 26%,rgba(255,255,255,.22),transparent 70%),radial-gradient(40% 32% at 74% 62%,rgba(255,255,255,.12),transparent 70%);animation:v6-adem 21s ease-in-out infinite alternate}
@keyframes v6-adem{to{transform:translate3d(3%,-2.5%,0) scale(1.05)}}
.v6-open-inner{position:relative;z-index:2;max-width:860px;margin:0 auto}
.v6-kicker{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(12,26,51,.45);border-radius:999px;padding:7px 16px}
.v6-h1{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.015em;line-height:1.06;font-size:clamp(2.9rem,7vw,5.8rem);margin:22px auto 0;max-width:17ch;color:#fff}
/* De onthul-wikkel knipt (overflow:hidden). Staartletters (j, g, p) steken tot .26em onder de
   regel; de metriek verschilt per engine, dus de ruimte eronder is .3em en boven .1em. De
   negatieve marge houdt de regelafstand precies zoals hij was (netto +.06em, als voorheen). */
.s-lijn{display:block;overflow:hidden;padding:.1em 0 .3em;margin:-.06em 0 -.24em}
.s-lijn:last-child{margin-bottom:-.24em}
/* Flex-kolom: marges van de regels vallen dan NIET samen (met margin-collapse verschoof de
   subzin 8px omhoog). De laatste regel neemt -.24em: in de blokversie viel -.08em samen met de
   22px onder de h1. Gemeten (1440/1024/390): regels en subzin op dezelfde pixel als voorheen. */
.v6-h1{display:flex;flex-direction:column;align-items:center}
/* De openingskop: twee regels die ALTIJD twee regels blijven (nowrap) en samen precies zo breed zijn als de
   subzin eronder. Het vak deelt de max-width van .v6-sub en is een container; de letter meet zich aan het vak
   (100cqw gedeeld door de breedte-per-pixel van de langste regel plus 3% marge: NL 7.7, EN 9.6; gemeten met CDP: 7.46 en 9.302). */
.v6-kopvak{width:100%;max-width:52ch;font-size:clamp(1.25rem,1.9vw,1.5rem);margin:0 auto;container-type:inline-size;--kop-r:9.7}
html[lang="nl"] .v6-kopvak{--kop-r:7.78}
.v6-kopvak .v6-h1{max-width:none;font-size:clamp(1.9rem,calc(100cqw / var(--kop-r)),6.8rem)}
.v6-kopvak .s-lijn{white-space:nowrap}

.s-lijn > span{display:block;transform:translateY(150%);opacity:0;animation:s-onthul 1s var(--v6-ease) forwards}
.s-lijn:nth-child(1) > span{animation-delay:.1s}
.s-lijn:nth-child(2) > span{animation-delay:.26s}
@keyframes s-onthul{to{transform:translateY(0);opacity:1}}
.v6-accentwoord{font-style:italic}
.v6-sub{max-width:52ch;margin:22px auto 0;font-size:clamp(1.25rem,1.9vw,1.5rem);color:#fff;font-weight:400;line-height:1.6;text-wrap:pretty}
.v6-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.v6-k{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;border-radius:999px;padding:16px 32px;text-decoration:none;border:1px solid transparent;transition:background .22s var(--v6-ease),border-color .22s var(--v6-ease),color .22s var(--v6-ease)}
.v6-k-vol{background:#0C0A09;color:#fff}
.v6-k-vol:hover{background:#2A2724;color:#fff}
.v6-open .v6-k-vol{background:#fff;color:#0C0A09}
.v6-open .v6-k-vol:hover{background:#F1F1EF;color:#0C0A09}
.v6-k-rand{background:transparent;color:var(--v6-ink);border-color:var(--v6-line2)}
.v6-k-rand:hover{border-color:var(--v6-ink);color:var(--v6-ink)}
.v6-open .v6-k-rand{color:#fff;border-color:rgba(255,255,255,.55)}
.v6-open .v6-k-rand:hover{border-color:#fff;color:#fff}
.v6-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:20px;font-size:.92rem;font-weight:500;color:#fff}
/* Het chatraam: compact caffeine-gesprek, alles in code. De prompt TYPT
   zichzelf (vaste hoogte via een onzichtbare spooklaag: nul versprong),
   daarna het antwoord en de tikdots; cyclus met lange rust. */
/* De mini-studio (eigenaar 01-09, cursor-voorbeeld): een GROOT app-raam met
   het chatpaneel links en de opbouwende site-preview rechts. Alles in code. */
.v6-studio{position:relative;z-index:2;max-width:1160px;margin:clamp(40px,6vw,72px) auto 0;border:1px solid rgba(255,255,255,.35);border-radius:20px;background:#fff;overflow:hidden;text-align:left}
@supports (animation-timeline: view()) {
  .v6-studio{animation:v6-zweef linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes v6-zweef{0%{transform:translateY(26px) scale(.985)}30%{transform:none}70%{transform:none}100%{transform:translateY(-14px)}}
}
.v6-studio-kop{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--v6-line)}
.s-dots{display:inline-flex;gap:5px}
.s-dots i{width:9px;height:9px;border-radius:50%;background:var(--v6-line2)}
.v6-studio-kop b{font-size:.85rem;font-weight:600;color:var(--v6-ink)}
.v6-studio-kop em{font-style:normal;margin-left:auto;font-size:.82rem;color:var(--v6-stil);border:1px solid var(--v6-line);border-radius:999px;padding:4px 14px}
.v6-studio-lijf{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.v6-studio-chat{display:flex;flex-direction:column;gap:12px;padding:clamp(14px,2vw,20px);border-right:1px solid var(--v6-line)}
.v6-studio-preview{padding:0;background:#fff;min-height:480px}
/* De werkende mini-app: een offertegenerator die live meerekent en telt
   (eigenaar 01-09: "veel mooier, interactiever en geavanceerder"). */
.q-app{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(14px,2vw,22px);padding:clamp(14px,2vw,22px);height:100%;align-content:stretch}
.q-vorm{display:flex;flex-direction:column;gap:8px;min-width:0}
.q-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v6-stil);margin-top:6px}
.q-opp-badge{font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--v6-accent-diep);background:var(--v6-accent-zacht);border-radius:999px;padding:2px 10px}
.q-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.q-tegel{font:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 11px;border-radius:12px;border:1px solid var(--v6-line2);background:#fff;cursor:pointer;text-align:left;transition:border-color .18s ease,background .18s ease}
.q-tegel i{font-size:.95rem;color:var(--v6-accent-diep);margin-bottom:2px}
.q-tegel b{font-size:.78rem;font-weight:700;color:var(--v6-ink)}
.q-tegel span{font-size:.62rem;color:var(--v6-stil)}
.q-tegel:hover{border-color:var(--v6-ink)}
.q-tegel.is-actief{border-color:var(--v6-accent);background:var(--v6-accent-zacht)}
.q-tegel.is-actief b{color:var(--v6-accent-diep)}
.q-slider{display:flex;align-items:center;gap:10px}
.q-slider input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--v6-accent) var(--q-vul,10%),var(--v6-line2) var(--q-vul,10%));outline-offset:3px}
.q-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--v6-accent);cursor:pointer}
.q-slider input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--v6-accent);cursor:pointer}
.q-min,.q-plus{font:inherit;flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--v6-line2);background:#fff;color:var(--v6-ink);font-size:.95rem;line-height:1;cursor:pointer}
.q-min:hover,.q-plus:hover{border-color:var(--v6-ink)}
.q-segment{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--v6-bg2);border:1px solid var(--v6-line);border-radius:11px;padding:3px;gap:3px}
.q-segment button{font:inherit;font-size:.76rem;font-weight:600;color:var(--v6-muted);border:0;background:transparent;border-radius:8px;padding:7px 8px;cursor:pointer;transition:background .18s ease,color .18s ease}
.q-segment button.is-actief{background:#fff;color:var(--v6-ink);box-shadow:0 0 0 1px var(--v6-line)}
.q-extras{display:flex;flex-direction:column;gap:6px}
.q-extra{display:flex;align-items:center;gap:9px;border:1px solid var(--v6-line2);border-radius:10px;padding:7px 11px;cursor:pointer;transition:border-color .18s ease,background .18s ease}
.q-extra input{position:absolute;opacity:0;width:0;height:0}
.q-extra i{width:16px;height:16px;border-radius:5px;border:1px solid var(--v6-line2);color:transparent;display:grid;place-items:center;font-size:.55rem;flex:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
.q-extra b{font-size:.76rem;font-weight:600;color:var(--v6-ink)}
.q-extra span{margin-left:auto;font-size:.68rem;font-weight:600;color:var(--v6-stil)}
.q-extra:has(input:checked){border-color:var(--v6-accent);background:var(--v6-accent-zacht)}
.q-extra:has(input:checked) i{background:var(--v6-accent);border-color:var(--v6-accent);color:#fff}
.q-schakel{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;color:var(--v6-ink);cursor:pointer;margin-top:8px}
.q-schakel input{position:absolute;opacity:0;width:0;height:0}
.q-schakel i{width:34px;height:20px;border-radius:999px;background:var(--v6-line2);position:relative;transition:background .18s ease;flex:none}
.q-schakel i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s ease}
.q-schakel input:checked + i{background:var(--v6-accent)}
.q-schakel input:checked + i::after{transform:translateX(14px)}
.q-bon{display:flex;flex-direction:column;gap:6px;background:var(--v6-bg2);border:1px solid var(--v6-line);border-radius:16px;padding:clamp(14px,1.8vw,18px)}
.q-bon-kop{font-family:'Source Serif 4',Georgia,serif;font-size:1.05rem;font-weight:600;margin-bottom:2px}
.q-regel{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:.78rem;color:var(--v6-muted);border-radius:6px;transition:background .5s ease}
.q-regel.is-vers{background:var(--v6-accent-zacht)}
.q-regel em{font-style:normal}
.q-regel u{text-decoration:none;font-variant-numeric:tabular-nums;color:var(--v6-ink);font-weight:600;white-space:nowrap}
.q-sub{border-top:1px solid var(--v6-line);padding-top:6px;margin-top:2px}
.q-totaal{border-top:1px solid var(--v6-line);padding-top:6px;margin-top:2px;font-size:.9rem}
.q-totaal em{font-weight:700;color:var(--v6-ink)}
.q-totaal u{font-size:1.08rem;font-weight:700;color:var(--v6-accent-diep)}
.q-doorloop{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--v6-muted);border-top:1px solid var(--v6-line);padding-top:8px;margin-top:2px}
.q-doorloop i{color:var(--v6-accent-diep);font-size:.68rem}
.q-doorloop b{color:var(--v6-ink)}
.q-verstuur{font:inherit;margin-top:6px;border:0;border-radius:999px;background:var(--v6-accent);color:#fff;font-size:.82rem;font-weight:600;padding:10px 16px;cursor:pointer;transition:background .18s ease}
.q-verstuur:hover{background:var(--v6-accent-diep)}
.q-verstuur.is-klaar{background:#2E7D46;cursor:default}
.q-bon small{font-size:.6rem;color:var(--v6-stil);margin-top:2px}
.b-stap{opacity:0;transform:translateY(10px);transition:opacity .55s var(--v6-ease),transform .55s var(--v6-ease)}
.v6-studio.is-fase4 .b-stap{opacity:1;transform:none}
.c-bubbel{position:relative;align-self:flex-end;max-width:82%;background:var(--v6-bg2);border-radius:18px 18px 6px 18px;padding:13px 18px;font-size:.98rem;font-weight:500;color:var(--v6-ink)}
.c-spook{visibility:hidden;font-style:normal}
.c-getypt{position:absolute;inset:13px 18px;font-style:normal;white-space:pre-wrap}
.c-getypt::after{content:'';display:inline-block;width:2px;height:1em;background:var(--v6-accent);margin-left:2px;vertical-align:-.12em;animation:c-knipper 1s steps(1) infinite}
@keyframes c-knipper{50%{opacity:0}}
.c-antwoord{align-self:flex-start;max-width:82%;font-size:.98rem;font-weight:500;color:var(--v6-ink);opacity:0;transform:translateY(6px);transition:opacity .5s var(--v6-ease),transform .5s var(--v6-ease)}
.c-dots{align-self:flex-start;display:inline-flex;gap:5px;opacity:0;transition:opacity .4s var(--v6-ease)}
.c-dots i{width:7px;height:7px;border-radius:50%;background:var(--v6-line2);animation:c-puls 1.4s ease-in-out infinite}
.c-dots i:nth-child(2){animation-delay:.2s}
.c-dots i:nth-child(3){animation-delay:.4s}
@keyframes c-puls{0%,100%{opacity:.35}50%{opacity:1}}
.v6-studio.is-fase2 .c-antwoord{opacity:1;transform:none}
.v6-studio.is-fase3 .c-dots{opacity:1}
.v6-studio.is-klaar .c-dots{opacity:0}
.v6-studio.is-klaar .c-getypt::after{animation:none;opacity:0}
.c-invoer{display:flex;align-items:center;gap:12px;border:1px solid var(--v6-line2);border-radius:16px;padding:12px 12px 12px 18px;color:var(--v6-stil);font-size:.95rem;margin-top:auto}
.c-invoer em{font-style:normal;flex:1;text-align:left}
.c-invoer i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--v6-accent);color:#fff;font-size:.85rem}

/* ── De actes ── */
.v6-sec{padding:clamp(36px,5vw,64px) clamp(18px,4vw,40px)}
.v6-sec-zacht,#prijzen{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px)}
.v6-sec-zacht{background:var(--v6-bg2)}
.v6-sec-vol{padding-left:0;padding-right:0}
.v6-sec-vol .v6-kop{padding:0 clamp(18px,4vw,40px)}
.v6-kop{max-width:780px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.v6-kop h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.1;font-size:clamp(2rem,4.2vw,3.4rem);color:var(--v6-ink)}
.v6-kop p{margin:14px auto 0;font-size:1.05rem;color:var(--v6-muted);max-width:58ch}

/* Acte 2: stappen */
.v6-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1080px;margin:0 auto}
.v6-stap{text-align:left;background:#fff;border:1px solid var(--v6-line);border-radius:18px;padding:24px 22px}
.v6-stap-nr{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:12px;background:var(--v6-accent-zacht);color:var(--v6-accent-diep);font-size:.9rem;font-weight:700;letter-spacing:.04em}
.v6-stap h3{margin:14px 0 6px;font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
.v6-stap p{color:var(--v6-muted);font-size:.93rem;line-height:1.55}

/* Acte 3: gereedschap */
.v6-toonchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1080px;margin:0 auto}
.v6-toonkaart{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--v6-line);border-radius:18px;padding:22px 20px;text-decoration:none;transition:border-color .2s ease}
.v6-toonkaart:hover{border-color:var(--v6-accent)}
.v6-toonkaart i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--v6-accent-zacht);color:var(--v6-accent-diep);font-size:1rem}
.v6-toonkaart b{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--v6-ink);margin-top:4px}
.v6-toonkaart span{font-size:.9rem;color:var(--v6-muted);line-height:1.5}
.v6-meer{text-align:center;margin:26px 0 0}
.v6-meer a,.v6-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--v6-accent-diep);text-decoration:none;border-bottom:1px solid rgba(29,78,216,.3);padding-bottom:2px}

/* Acte 4: waarde */
.v6-waarde{max-width:1120px;margin:0 auto}
.v6-waarde .v6-kop .v6-link{display:inline-flex;margin-top:14px}
/* Twee kolommen die ALTIJD even hoog zijn (stretch); binnenin verdelen de regels
   zich over de hoogte, zodat raam en kaart op dezelfde lijn eindigen. */
.v6-waarde-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.v6-waarde-tekst h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.12;font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:14px}
.v6-waarde-tekst > p{color:var(--v6-muted);font-size:1.02rem;max-width:46ch;margin-bottom:16px}
.v6-waarde-anker{font-size:.95rem;margin:0}
.v6-waarde-anker strong{font-weight:700;font-size:1.2rem}
/* De alles-in-een-kaart: EEN sterk donker object (caffeine) met alle acht
   echte onderdelen erin en de echte vanaf-prijs als voet. */
.v6-vloei-kaart{display:flex;flex-direction:column;gap:18px;background:#0C0A09;color:#F7F7F4;border-radius:24px;padding:clamp(26px,3.4vw,40px)}
.v6-vloei-kop{display:flex;flex-direction:column;gap:4px}
.v6-vloei-kop b{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.v6-vloei-kop span{font-size:.92rem;color:rgba(247,247,244,.7)}
.v6-waarde-lijst{list-style:none;flex:1;display:grid;grid-template-columns:1fr;align-content:space-evenly;gap:11px;margin:0;padding:18px 0;border-top:1px solid rgba(247,247,244,.14);border-bottom:1px solid rgba(247,247,244,.14)}
.v6-waarde-lijst li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;color:rgba(247,247,244,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-waarde-lijst i{color:#93B8F5;font-size:.8rem;flex:none}
.v6-vloei-voet .v6-waarde-anker{margin:0;color:rgba(247,247,244,.72)}
.v6-vloei-voet .v6-waarde-anker strong{color:#93B8F5;font-size:1.35rem}
/* Het stapel-raam: acht regels met een echte schakelaar (aan = betaal je nu los),
   voet met tellers. Zelfde vormtaal als de mini-studio (dots, kopbalk, vlak).
   Rechts de kaart waar alles ALTIJD in zit (volle blauwe vinkjes). */
.v6-stapel{display:flex;flex-direction:column;background:#fff;border:1px solid var(--v6-line2);border-radius:20px;overflow:hidden}
.v6-st-kop{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--v6-line);background:#fff}
.v6-st-dots{display:inline-flex;gap:5px;flex:none}
.v6-st-dots i{width:8px;height:8px;border-radius:50%;background:var(--v6-line2)}
.v6-st-kop b{font-size:.92rem;font-weight:700;color:var(--v6-ink);white-space:nowrap}
.v6-st-kop em{font-style:normal;font-size:.76rem;color:var(--v6-stil);margin-left:auto;text-align:right;min-width:0;white-space:normal}
.v6-st-lijst{flex:1;display:grid;grid-auto-rows:1fr}
.v6-st-rij{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--v6-line);transition:background .25s var(--nb-ease)}
.v6-st-rij:last-child{border-bottom:0}
.v6-st-rij > i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--v6-accent-zacht);color:var(--v6-accent-diep);font-size:.85rem;flex:none;transition:background .3s var(--nb-ease),color .3s var(--nb-ease)}
.v6-st-naam{flex:1;min-width:0;font-size:.92rem;font-weight:600;color:var(--v6-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--nb-ease)}
.v6-st-schakel{flex:none;width:42px;height:24px;border-radius:999px;border:0;padding:0;background:var(--v6-accent);position:relative;cursor:pointer;transition:background .3s var(--nb-ease)}
.v6-st-schakel span{position:absolute;top:3px;left:3px;--kx:18px;transform:translateX(var(--kx));width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s var(--nb-ease)}
.v6-st-rij:not(.is-aan) .v6-st-schakel{background:var(--v6-line2)}
.v6-st-rij:not(.is-aan) .v6-st-schakel span{--kx:0px}
.v6-st-rij:not(.is-aan) > i{background:var(--v6-bg2);color:var(--v6-stil)}
.v6-st-rij.is-licht{background:rgba(37,99,235,.06)}
.v6-st-voet{padding:14px 16px;background:#fff;border-top:1px solid var(--v6-line)}
.v6-stapel-som{margin:0;font-size:.9rem;color:var(--v6-muted);min-height:1.6em;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;line-height:1.6}
/* NIETS VERSPRINGT (eigenaar 02-09-2026, iPad en telefoon): tijdens het aftellen wisselt deze regel van
   enkelvoud naar meervoud en dus van breedte. Elk paar (getal + woord) is een niet-omlopende eenheid, en
   de regel reserveert zijn hoogte per breedte: een regel breed, twee regels op een tablet (GEMETEN: op
   768 past alles op een regel in Chrome, maar Safari zet letters breder), drie op een smalle telefoon. */
.v6-som-item{white-space:nowrap}
.v6-som-w{display:inline-grid;grid-template-areas:"a"}
.v6-som-w>span,.v6-som-w::after{grid-area:a}
.v6-som-w::after{content:attr(data-w);visibility:hidden;pointer-events:none}
.v6-som-sep{color:var(--v6-stil)}
@media (max-width:1100px){.v6-stapel-som{min-height:3.2em}}
@media (max-width:360px){.v6-stapel-som{min-height:4.8em}}
.v6-stapel-som b{color:var(--v6-ink);font-size:1.08rem;font-weight:700;display:inline-block;min-width:1.15ch;text-align:center}
.v6-st-klaar{display:flex;visibility:hidden;align-items:center;gap:8px;margin:8px 0 0;min-height:22px;font-size:.92rem;font-weight:650;color:var(--v6-accent-diep)}
.v6-st-klaar i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--v6-accent);color:#fff;font-size:.62rem}
.v6-stapel.is-leeg .v6-st-klaar{visibility:visible}
.v6-waarde-lijst li{border-radius:8px;transition:background .3s var(--nb-ease)}
.v6-waarde-lijst li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.v6-waarde-lijst li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--v6-accent);color:#fff;font-size:.72rem}
.v6-waarde-lijst li.is-licht,.v6-waarde-lijst li.is-vers{background:rgba(147,184,245,.14);color:#fff}
.v6-vloei-een{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:.98rem;font-weight:600;color:#fff}
.v6-vloei-een i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--v6-accent);color:#fff;font-size:.72rem}
body[data-portal-theme="dark"] .v6-stapel{background:#161615;border-color:rgba(245,245,243,.16)}
body[data-portal-theme="dark"] .v6-st-kop,body[data-portal-theme="dark"] .v6-st-voet{background:#161615;border-color:rgba(245,245,243,.12)}
body[data-portal-theme="dark"] .v6-st-rij{border-color:rgba(245,245,243,.1)}
body[data-portal-theme="dark"] .v6-st-kop b,body[data-portal-theme="dark"] .v6-st-naam,body[data-portal-theme="dark"] .v6-stapel-som b{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-st-rij > i{background:rgba(37,99,235,.22);color:#93B8F5}
body[data-portal-theme="dark"] .v6-st-rij:not(.is-aan) > i{background:rgba(255,255,255,.06);color:rgba(245,245,243,.5)}
body[data-portal-theme="dark"] .v6-st-rij:not(.is-aan) .v6-st-schakel{background:rgba(245,245,243,.2)}
@media (prefers-reduced-motion:reduce){.v6-st-rij,.v6-st-rij > i,.v6-st-naam,.v6-st-schakel,.v6-st-schakel span,.v6-waarde-lijst li{transition:none}}

/* Acte 5: drift (heilig blok, naadwet: GEEN gap op de rij, marge op de kaart) */
/* GEMETEN 02-09-2026 (Safari 26.6, Chrome 152): met width:max-content maakte Safari de rij 6458px
   bij 5760px aan kaarten (698px leegte) en schoof translate(-50%) daardoor 349px te ver: een sprong
   per ronde en een leeg stuk links of rechts. De maat staat daarom EXPLICIET in px, uit dezelfde
   drie getallen (aantal, kaartbreedte, marge), en de duur is per kaart vast (318px in 5,3s =
   60px/s, terugrij 48px/s), zodat de snelheid in elke browser en op elk apparaat gelijk is. */
.drift{--dn:9;--dk:300px;--dm:18px;--dset:calc(var(--dn) * (var(--dk) + var(--dm)));display:flex;flex-direction:column;gap:18px;overflow:clip;contain:paint;padding:6px 0}
.drift-rij{display:flex;width:calc(2 * var(--dset));animation:drift-loop calc(var(--dn) * 5.3s) linear infinite;will-change:transform}
.drift-terug{animation-direction:reverse;animation-duration:calc(var(--dn) * 6.625s)}
.drift-kaart{box-sizing:border-box;flex:0 0 var(--dk);margin-right:var(--dm);display:flex;flex-direction:column;border:1px solid var(--v6-line2);border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;transition:border-color .25s var(--v6-ease)}
.drift-kaart:hover{border-color:var(--v6-accent)}
/* height:auto is VERPLICHT: het height-attribuut van de img wint anders van de
   css-verhouding en rekt de miniatuur uit (gemeten: kaart 300x613 in plaats
   van 300x188). Zo toont elke thumbnail exact zijn eigen verhouding. */
.drift-kaart img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:top}
.drift-kaart span{padding:12px 16px;font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--v6-ink)}
@keyframes drift-loop{to{transform:translate3d(calc(-1 * var(--dset)),0,0)}}

/* Acte 6: voor wie */
/* Knop iets lager onder de strook, en de "Gebouwd voor"-regel dichterbij. */
.v6-starts-knop{justify-content:center;margin-top:40px}
/* GEMETEN 133px tussen knop en "Gebouwd voor"-regel op 1280; dit trekt hem naar ~60. */
.v6-wie{margin-top:calc(-1 * clamp(64px,9.4vw,120px))}
.v6-wie{text-align:center;padding-top:0;padding-bottom:0}
.v6-wie p{font-size:1rem;font-weight:500;color:var(--v6-stil);max-width:64ch;margin:0 auto;line-height:2}
.v6-wie a{font-weight:600}
.v6-wie a{color:var(--v6-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--v6-line2);transition:border-color .2s ease}
.v6-wie a:hover{border-color:var(--v6-accent)}

/* Acte 7: prijzen */
#prijzen{background:var(--v6-bg2);border-radius:clamp(20px,3vw,32px);margin:0 clamp(12px,2vw,28px)}
.v6-k-blauw{background:var(--v6-accent);color:#fff;justify-content:center}
.v6-k-blauw:hover{background:var(--v6-accent-diep);color:#fff}
.v6-reseller{text-align:center;margin:26px 0 0;font-size:.92rem;color:var(--v6-stil)}
.v6-reseller a{color:var(--v6-accent-diep);font-weight:600}

/* Acte 8: vragen */
.v6-vragen{max-width:760px;margin:0 auto}
.vraag{border-bottom:1px solid var(--v6-line)}
.vraag summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;padding:18px 2px;font-size:1.02rem;font-weight:600}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary i{flex:none;color:var(--v6-accent-diep);transition:transform .25s var(--v6-ease)}
.vraag[open] summary i{transform:rotate(180deg)}
.vraag p{margin:0 0 18px;color:var(--v6-muted);max-width:62ch}

/* Acte 9: slot */
.v6-slot{position:relative;text-align:center;background:#0C0A09;color:#F7F7F4;padding:clamp(64px,9vw,120px) clamp(18px,4vw,40px);overflow:clip}
#slot-vonken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.v6-slot h2,.v6-slot-sub,.v6-slot-rij,.v6-slot-mail{position:relative}
.v6-slot h2{font-family:'Source Serif 4',Georgia,serif;font-weight:400;letter-spacing:-.01em;font-size:clamp(2.1rem,4.6vw,3.6rem)}
.v6-slot-sub{margin:14px auto 0;max-width:52ch;color:rgba(247,247,244,.78)}
.v6-slot-rij{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.v6-k-licht{background:#fff;color:#0C0A09}
.v6-k-licht:hover{background:#F1F1EF;color:#0C0A09}
.v6-k-donkerrand{background:transparent;color:#F7F7F4;border-color:rgba(247,247,244,.3)}
.v6-k-donkerrand:hover{border-color:#F7F7F4;color:#F7F7F4}
.v6-slot-mail{margin:24px 0 0;font-size:.92rem;color:rgba(245,245,243,.6)}
.v6-slot-mail a{color:#93B8F5;font-weight:600}

/* De tooltip-ballon (gedeeld gedrag uit tooltip.js; de landing is een eigen
   document en draagt daarom zelf de ballon-opmaak). */

/* ── De nav op de hemel (eigenaar 01-09): wit zolang hij transparant is;
   de bestaande .scrolled-achtergrond schakelt de gewone kleuren terug in. ── */
/* De hemel-nav is wit zolang hij op de hemel ligt. Met het megamenu open
   (mega-active) legt de gedeelde laag een WIT paneel onder de balk; dan moeten
   deze witte teksten wijken voor de gewone inkt, anders staat wit op wit
   (eigenaar zag logo en menu verdwijnen, 02-09). */
header.nav:not(.scrolled):not(.mega-active){color:#fff}
header.nav:not(.scrolled):not(.mega-active) a,header.nav:not(.scrolled):not(.mega-active) button{color:#fff}
header.nav:not(.scrolled):not(.mega-active) .btn-ghost{border-color:rgba(255,255,255,.55);background:transparent}
header.nav:not(.scrolled):not(.mega-active) .btn-ghost:hover{border-color:#fff}
header.nav:not(.scrolled):not(.mega-active) .btn-primary{background:#fff;color:#0C0A09}
header.nav:not(.scrolled):not(.mega-active) .btn-primary:hover{background:#F1F1EF;color:#0C0A09}
header.nav:not(.scrolled):not(.mega-active) .btn-primary .arr{color:#0C0A09}
header.nav:not(.scrolled):not(.mega-active) .menu-toggle{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
header.nav:not(.scrolled):not(.mega-active) .menu-toggle:hover{background:rgba(255,255,255,.12);border-color:#fff}
header.nav:not(.scrolled):not(.mega-active) .nav-right .mk-langswitch{background:transparent;border:1px solid rgba(255,255,255,.6)}
header.nav:not(.scrolled):not(.mega-active) .nav-right .mk-langswitch a{color:#fff}
header.nav:not(.scrolled):not(.mega-active) .nav-right .mk-langswitch a.is-active{background:#fff;color:#0C0A09;box-shadow:none}

/* ── Mobiel ── */
@media (max-width:960px){
  .v6-toonchips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v6-studio-preview{min-height:0}
  .v6-waarde-lijst{grid-template-columns:1fr}
  .v6-waarde-lijst li{white-space:normal}
  .v6-waarde-duo{grid-template-columns:1fr}
}

@media (min-width:701px) and (max-width:960px){
  .v6-studio-lijf{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .q-app{padding:14px;gap:12px}
  .q-tegel{padding:9px 9px}
  .q-tegel b{font-size:.72rem}
  .q-tegel span{font-size:.56rem}
  .q-bon{padding:13px;gap:5px}
  .q-regel{font-size:.74rem}
}
@media (max-width:700px){
  .v6-studio-lijf{grid-template-columns:1fr}
  .v6-studio-chat{border-right:0;border-bottom:1px solid var(--v6-line);padding:14px;gap:10px}
  .c-invoer{margin-top:10px}
  .v6-studio-kop em{display:none}
  .q-app{grid-template-columns:1fr;padding:12px;gap:12px}
  .q-tegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .q-tegel{padding:8px 8px;gap:2px}
  .q-tegel i{font-size:.82rem}
  .q-tegel b{font-size:.7rem}
  .q-tegel span{font-size:.54rem}
  .q-label{margin-top:2px}
  .q-extra{padding:6px 10px}
  .q-extra b{font-size:.7rem}
  .q-extra span{font-size:.62rem}
  .q-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .q-extra{flex-direction:column;align-items:flex-start;gap:3px;padding:7px 9px}
  .q-extra span{margin-left:0;font-size:.56rem}
  .q-extra i{position:absolute;right:7px;top:7px}
  .q-extra{position:relative}
  .q-schakel{margin-top:4px;font-size:.72rem}
  .q-bon{padding:12px;gap:5px}
  .q-regel{font-size:.72rem}
  .q-totaal{font-size:.82rem}
  .q-totaal u{font-size:.98rem}
  .q-doorloop{font-size:.66rem;padding-top:6px}
  .q-verstuur{padding:9px 14px;font-size:.78rem}
  .v6-stappen{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .v6-toonchips{grid-template-columns:1fr}
}

/* ── Rust op verzoek ── */
@media (prefers-reduced-motion:reduce){
  .drift-rij{animation:none}
  .v6-aurora{animation:none}
  .s-lijn > span{animation:none;transform:none;opacity:1}
  .v6-studio{animation:none}
  .c-getypt::after{animation:none}
  .b-stap{transition:none;opacity:1;transform:none}
}

/* ── Donker thema ── */
body[data-portal-theme="dark"]{background:#0E0E0D;color:#F5F5F3;
  /* GEMETEN 02-09 (contrastsweep donker): de homepage draagt eigen v6-tokens, dus de omzetting in de schil
     bereikte hem niet; kickers en bijschriften bleven inkt op donker (1.01). Zelfde set als in render.php. */
  --v6-ink:#F5F5F3;--v6-muted:rgba(245,245,243,.74);--v6-stil:rgba(245,245,243,.62);--v6-line:rgba(245,245,243,.12);--v6-line2:rgba(245,245,243,.22);
  --v6-bg:#0C0A09;--v6-bg2:#141413;--v6-accent-diep:#93B8F5;--v6-accent-zacht:rgba(37,99,235,.22)}
body[data-portal-theme="dark"] .v6-stap{background:#161615}
/* GEMETEN in donker: de optiekaarten en +/- knoppen van de offerte-mock bleven wit met lichte tekst (1.09). */
body[data-portal-theme="dark"] .q-min,body[data-portal-theme="dark"] .q-plus,body[data-portal-theme="dark"] .q-tegel{background:#161615;border-color:rgba(245,245,243,.14)}
body[data-portal-theme="dark"] .v6-kop h2,body[data-portal-theme="dark"] .v6-h1,body[data-portal-theme="dark"] .v6-waarde-tekst h2{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-sub,body[data-portal-theme="dark"] .v6-kop p,body[data-portal-theme="dark"] .v6-stap p,body[data-portal-theme="dark"] .v6-waarde-tekst > p,body[data-portal-theme="dark"] .v6-wie p,body[data-portal-theme="dark"] .vraag p{color:rgba(245,245,243,.72)}
body[data-portal-theme="dark"] .v6-accentwoord{color:#fff}
body[data-portal-theme="dark"] .v6-sec-zacht{background:#141413}
body[data-portal-theme="dark"] .v6-waarde-lijst li,body[data-portal-theme="dark"] .drift-kaart,body[data-portal-theme="dark"] .v6-plan,body[data-portal-theme="dark"] .v6-toonchip{background:#161615;border-color:rgba(245,245,243,.12)}
body[data-portal-theme="dark"] .v6-toonchip,body[data-portal-theme="dark"] .drift-kaart span,body[data-portal-theme="dark"] .v6-plan li,body[data-portal-theme="dark"] .v6-waarde-lijst li,body[data-portal-theme="dark"] .v6-p-naam,body[data-portal-theme="dark"] .v6-p-prijs,body[data-portal-theme="dark"] .vraag summary,body[data-portal-theme="dark"] .v6-wie a{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-k-rand{color:#F5F5F3;border-color:rgba(245,245,243,.28)}
body[data-portal-theme="dark"] .v6-k-rand:hover{border-color:#F5F5F3;color:#F5F5F3}
body[data-portal-theme="dark"] .v6-k-vol{background:#F5F5F3;color:#0C0A09}
body[data-portal-theme="dark"] .v6-k-vol:hover{background:#fff;color:#0C0A09}
body[data-portal-theme="dark"] .v6-plan.pro{border-color:rgba(245,245,243,.4)}
body[data-portal-theme="dark"] .v6-waarde-anker strong{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-studio{background:#161615;border-color:rgba(245,245,243,.2)}
body[data-portal-theme="dark"] .v6-studio-preview{background:#101010}

body[data-portal-theme="dark"] .c-bubbel{background:#101010;color:#F5F5F3}
body[data-portal-theme="dark"] .c-antwoord{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-meer a,body[data-portal-theme="dark"] .v6-link,body[data-portal-theme="dark"] .v6-stap-nr,body[data-portal-theme="dark"] .v6-plan li i,body[data-portal-theme="dark"] .v6-waarde-lijst i,body[data-portal-theme="dark"] .vraag summary i,body[data-portal-theme="dark"] .v6-reseller a{color:#93B8F5}.v6-prijzen{display:grid;grid-template-columns:1fr;gap:20px;max-width:1120px;margin:0 auto}
.v6-plan{position:relative;background:#fff;border:1px solid var(--v6-line);border-radius:24px;padding:clamp(28px,3vw,38px);display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(26px,3.5vw,52px);align-items:start}
.v6-p-info-kolom{display:flex;flex-direction:column}
.v6-plan ul{columns:2;column-gap:28px;margin:0 !important;align-self:stretch;border-left:1px solid var(--v6-line);padding-left:clamp(24px,3vw,44px)}
.v6-plan li{break-inside:avoid;margin-bottom:13px}
.v6-plan li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem;display:flex;align-items:baseline;gap:10px}
.v6-plan li [data-tip]{cursor:help}
.v6-p-tag{position:absolute;top:26px;right:28px;background:var(--v6-accent-zacht);color:var(--v6-accent-diep);font-size:.75rem;font-weight:700;border-radius:999px;padding:5px 13px}
.v6-p-naam{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.v6-p-prijs{margin-top:10px;font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.v6-p-prijs small{font-size:1rem;font-weight:500;color:var(--v6-stil);margin-left:4px}
.v6-p-btw{font-size:.82rem;color:var(--v6-stil);margin-top:5px}
.v6-p-tekst{margin:12px 0 16px;color:var(--v6-muted);font-size:.95rem}
.v6-plan ul{list-style:none}
.v6-plan li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;color:var(--v6-ink)}
.v6-plan li i{color:var(--v6-ink);margin-top:3px;opacity:.75;display:inline-flex;flex:none}
.v6-plan li i svg{width:13px;height:13px}
/* Voorrang op paginaregels voor <a>: op /plans werd de knoptekst zwart op zwart. */
.v6-prijzen .v6-k.v6-k-blauw,.v6-prijzen .v6-k.v6-k-blauw:hover{color:#fff}
.v6-p-mist,.v6-p-mist i{color:var(--v6-stil);opacity:1}
.v6-p-info-kolom .v6-k{margin-top:18px;justify-content:center}
@media (max-width:960px){
  .v6-plan{grid-template-columns:1fr}
  .v6-plan ul{columns:1;border-left:0;padding-left:0;border-top:1px solid var(--v6-line);padding-top:18px}
  .v6-plan li{white-space:normal}
}
body[data-portal-theme="dark"] .v6-plan{background:var(--nb-card-d,#14161B);border-color:var(--nb-line-dark,rgba(255,255,255,.14))}
body[data-portal-theme="dark"] .v6-plan li,body[data-portal-theme="dark"] .v6-p-naam,body[data-portal-theme="dark"] .v6-p-prijs{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-plan li i{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-plan.pro{border-color:rgba(245,245,243,.4)}
.tip-floating{z-index:9999;color:#fff;white-space:normal;text-align:center;letter-spacing:.005em;pointer-events:none;background:#26251E;border-radius:6px;width:max-content;max-width:240px;padding:7px 11px;font-size:11.5px;font-weight:500;line-height:1.35;animation:tip-fade-in .12s ease-out;position:fixed;transform:translate(-50%) translateY(-100%) translateY(-9px)}
.tip-floating--bottom{transform:translate(-50%) translateY(9px)}
.tip-floating:after{content:"";left:var(--tip-arrow-x,50%);border-left:4px solid transparent;border-right:4px solid transparent;width:0;height:0;position:absolute;transform:translate(-50%)}
.tip-floating--top:after{bottom:-4px;border-top:4px solid #26251E}
.tip-floating--bottom:after{top:-4px;border-bottom:4px solid #26251E}
@keyframes tip-fade-in{from{opacity:0}to{opacity:1}}.nbi{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:root{--nav-h:77px}
header.nav,.mobile-menu,.mobile-scrim{
  --pn-ease:cubic-bezier(.16,1,.3,1);
  --pn-panel:#FFFFFF;--pn-ink2:#F2F1ED;
  --pn-line:#26251E1A;--pn-line2:#26251E33;
  --pn-text:#26251E;--pn-muted:#26251EB3;--pn-muted2:#26251EA8;
  --pn-amber:#8A5A1A;
  --pn-cta:#26251E;--pn-cta-hover:#3A392F;--pn-cta-text:#FFFFFF;
  --pn-ghost-bg:rgba(38,37,30,.05);--pn-ghost-line:rgba(38,37,30,.4);
  --pn-navbg:#FFFFFF;
}
body[data-portal-theme="dark"] header.nav,
body[data-portal-theme="dark"] .mobile-menu,
body[data-portal-theme="dark"] .mobile-scrim{
  --pn-panel:#101216;--pn-ink2:#1A1D23;
  --pn-line:#F7F7F41A;--pn-line2:#F7F7F433;
  --pn-text:#F7F7F4;--pn-muted:#F7F7F4B3;--pn-muted2:#F7F7F4A8;
  --pn-amber:#E0A85C;
  --pn-cta:#F7F7F4;--pn-cta-hover:#FFFFFF;--pn-cta-text:#26251E;
  --pn-ghost-bg:rgba(247,247,244,.07);--pn-ghost-line:rgba(247,247,244,.4);
  --pn-navbg:#101216;
}
/* EIGENAARSBESLUIT 01-09-2026: ankersprongen horen te easen ("overal met
   anchors links etc moet wel met ease effect"). Dit nuanceert de wet van
   31-08: scroll-behavior geldt ALLEEN voor anker- en programmatische sprongen,
   nooit voor het muiswiel; scroll-hijack blijft verboden. Metingen gebruiken
   behavior:'instant' (vaste meetregel). */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
header.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  min-height:var(--nav-h);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  padding:16px clamp(18px,4vw,54px);
  color:var(--pn-text);
  transition:background .4s var(--pn-ease),border-color .4s var(--pn-ease),
             padding .3s var(--pn-ease),transform .28s var(--pn-ease);
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:var(--pn-navbg);
  border-bottom-color:var(--pn-line);
  padding-top:10px;padding-bottom:10px;
  min-height:64px;
}
header.nav.nav-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){
  header.nav{transition:background .4s var(--pn-ease),border-color .4s var(--pn-ease)}
  header.nav.nav-hidden{transform:none}
}
header.nav.mega-active{
  background:var(--pn-panel);
  border-bottom:1px solid var(--pn-line);
}
header.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-0.03em;justify-self:start;color:var(--pn-text);text-decoration:none}
header.nav .nav-link{padding:8px 12px;border-radius:10px;font-weight:500;font-size:16px;color:var(--pn-text);text-decoration:none;transition:color .3s var(--pn-ease),background .18s var(--pn-ease)}
header.nav .nav-link:hover{background:var(--pn-ghost-bg)}
header.nav .nav-link.is-active{background:var(--pn-ghost-bg)}
header.nav .nav-mid{display:flex;align-items:center;gap:4px;justify-self:center}
header.nav .nav-right{display:flex;align-items:center;gap:14px;justify-self:end}
header.nav .nav-right .mk-langswitch,
.mobile-menu .mm-lang .mk-langswitch{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:9999px}
header.nav .nav-right .mk-langswitch a,
.mobile-menu .mm-lang .mk-langswitch a{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:9999px;font-size:12.5px;font-weight:600;line-height:1;color:var(--pn-muted);text-decoration:none;transition:background .15s var(--pn-ease),color .15s var(--pn-ease)}
header.nav .nav-right .mk-langswitch a:hover,
.mobile-menu .mm-lang .mk-langswitch a:hover{color:var(--pn-text)}
header.nav .nav-right .mk-langswitch a.is-active,
.mobile-menu .mm-lang .mk-langswitch a.is-active{background:var(--pn-panel);color:var(--pn-text);box-shadow:0 1px 2px var(--pn-line)}
header.nav .mk-langswitch-globe,.mobile-menu .mk-langswitch-globe{width:12px;height:12px;flex-shrink:0}
header.nav .btn,.mobile-menu .btn{
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:none;
  border-radius:999px;padding:11px 22px;transition:transform .25s var(--pn-ease),box-shadow .3s var(--pn-ease),background .3s var(--pn-ease);
  position:relative;letter-spacing:-0.01em;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
}
header.nav .btn-primary,.mobile-menu .btn-primary{background:var(--pn-cta);color:var(--pn-cta-text)}
header.nav .btn-primary:hover,.mobile-menu .btn-primary:hover{background:var(--pn-cta-hover)}
header.nav .btn-primary:active,.mobile-menu .btn-primary:active{transform:scale(.97)}
header.nav .btn-ghost,.mobile-menu .btn-ghost{background:transparent;color:var(--pn-text);border:1px solid var(--pn-line2)}
header.nav .btn-ghost:hover,.mobile-menu .btn-ghost:hover{background:var(--pn-ghost-bg);border-color:var(--pn-ghost-line)}
header.nav .btn .arr,.mobile-menu .btn .arr{transition:transform .25s var(--pn-ease)}
header.nav .btn:hover .arr,.mobile-menu .btn:hover .arr{transform:translateX(3px)}
header.nav .nav-right .btn-primary:hover{transform:none}
header.nav .nav-right .btn-primary:active{transform:none}
header.nav .menu-toggle{
  display:none;background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:11px;
  color:var(--pn-text);cursor:pointer;padding:8px;line-height:0;
  transition:background .3s var(--pn-ease),border-color .3s var(--pn-ease);
}
header.nav .menu-toggle:hover{background:var(--pn-ghost-bg);border-color:var(--pn-muted2)}
header.nav .menu-toggle .ic-close{display:none}
header.nav .menu-toggle[aria-expanded="true"] .ic-open{display:none}
header.nav .menu-toggle[aria-expanded="true"] .ic-close{display:block}
.mobile-menu{
  position:fixed;top:0;right:0;z-index:110;
  width:min(84vw,340px);height:100dvh;
  background:var(--pn-panel);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-left:1px solid var(--pn-line2);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,0.7);
  padding:20px 22px 32px;
  display:flex;flex-direction:column;gap:8px;
  transform:translateX(102%);visibility:hidden;
  transition:transform .42s var(--pn-ease),visibility 0s linear .42s;
  overflow-y:auto;
}
.mobile-menu[data-open="true"]{transform:translateX(0);visibility:visible;transition:transform .42s var(--pn-ease),visibility 0s}
.mobile-menu .mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mobile-menu .mm-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--pn-text);letter-spacing:-0.02em;text-decoration:none}
.mobile-menu .mm-close{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:var(--pn-ink2);border:1px solid var(--pn-line2);border-radius:11px;
  color:var(--pn-text);cursor:pointer;line-height:0;
  transition:background .25s var(--pn-ease),border-color .25s var(--pn-ease),transform .2s var(--pn-ease);
}
.mobile-menu .mm-close:hover{background:var(--pn-ink2);border-color:var(--pn-muted2)}
.mobile-menu .mm-close:active{transform:scale(.94)}
.mobile-menu .mm-links{display:flex;flex-direction:column;gap:2px}
.mobile-menu .mm-links .nav-link{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--pn-text);text-decoration:none;padding:12px 14px;border-radius:0;border-bottom:1px solid var(--pn-line);transition:color .25s var(--pn-ease)}
.mobile-menu .mm-links .nav-link:hover{color:var(--pn-amber)}
.mobile-menu .mm-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0 6px;padding-top:18px}
.mobile-menu .btn-block{width:100%;justify-content:center;padding:13px 22px}
.mobile-menu .mm-lang{margin-top:14px;padding-top:16px;border-top:1px solid var(--pn-line);display:flex;justify-content:flex-start}
.mobile-scrim{
  position:fixed;inset:0;z-index:105;background:rgba(5,6,11,0.6);
  opacity:0;transition:opacity .42s var(--pn-ease);
}
.mobile-scrim[data-open="true"]{opacity:1}
body.menu-open{overflow:hidden}
@media(max-width:960px){
  header.nav{grid-template-columns:1fr auto}
  header.nav .nav-right .desk-only,header.nav .nav-right .mk-langswitch{display:none}
  header.nav .menu-toggle{display:inline-flex}
}
/* Auth-pagina's (minimale kop): balk zweeft doorzichtig boven het rustige formulier
   en schuift nooit weg. */
body[data-auth-minimal] header.nav{position:absolute;background:transparent;border-bottom-color:transparent}
body[data-auth-minimal] header.nav.scrolled{background:transparent;border-bottom-color:transparent;padding-top:16px;padding-bottom:16px}
body[data-auth-minimal] header.nav.nav-hidden{transform:none}
/* Op smal scherm verbergt de 960-regel de taalwissel (die verhuist naar het mobiele
   menu), maar de minimale auth-kop HEEFT geen mobiel menu: daar blijft de pil staan. */
body[data-auth-minimal] header.nav .nav-right .mk-langswitch{display:inline-flex}
/* De kop is fixed en staat dus niet meer in de flow: schilpagina's schuiven hun
   inhoud eronder vandaan. De landing regelt dit zelf (eigen hero-padding). */
main.main{padding-top:calc(var(--nav-h) + 26px)}
/* De meekijkbalk (impersonatie) staat als eerste blok in de flow en zou anders
   ONDER de vaste kop verdwijnen. */
.imp-bar{margin-top:var(--nav-h)}/* ══════════════════════════════════════════════════════════════════════════════════════
   SCROLL-EFFECTEN ZONDER EEN ENKELE BIBLIOTHEEK.

   De eigenaar stuurde zeven demo's (allemaal MIT, dus vrij te gebruiken) en vroeg die
   effecten op de publieke pagina's -- "maar wel subtieler en zo licht dat PageSpeed
   overal 100 blijft".

   WAT DIE DEMO'S KOSTEN: drie bibliotheken samen bijna 90 KB, op ELKE pagina bij ELKE
   bezoeker, plus het rekenwerk op de hoofddraad. Dat is niet te rijmen met een 100 bij
   PageSpeed. WAT HIER STAAT: dezelfde bewegingen, native, in twee lagen.

   1. `animation-timeline: view()` -- scroll-gestuurde animatie in de browser zelf. Die
      draait BUITEN de hoofddraad, kost nul JavaScript en blokkeert dus niets.
   2. Waar dat niet kan (Safari, Firefox) neemt portal_motion_js() het over met ongeveer
      700 bytes. Zie daar waarom `html.nb-beweegt` de sleutel is.

   ALLES RESPECTEERT `prefers-reduced-motion`. Bewaker: PublicMotionStaysWeightlessTest.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){

  @supports (animation-timeline: view()){

    /* EEN regel zet de tijdlijn voor alles wat beweegt; per soort staat daarna alleen nog
       WELKE beweging het is. */
    .nb-rise,.nb-zoom,.nb-veeg,.nb-stapel,.nb-tegels,.nb-diepte,
    .nb-trap > *,
  .prod-facts-grid > *,
  .docs-grid > *,
  .sol-grid > *,
  .feat-hub-grid > *,
  .company-grid > *,
  .fd-grid > *,
  .mp-grid > *,
  .mp-tilesrow > *,
  .mp-pages > *,
  .mp-values > *,
  .features > *,
  .fd-steps > *,
  .fd-checks > *,
  .sk-steps > *,
  .sk-blocks > *,
  .sk-refine > *,
  .sk-btiles > *,
  .wm-row > *,
  .nbmod-grid > *,
  .nbdz-points > *,
  .aud-grid > *,
  .wsc-grid > *,
  .wsc-points > *,
  .company-features > *,
  .company-steps > *,
  .aifn-steps > *,
  .nbbh-caps > *,
  .nbbh-benefits > *,
  .dcms-steps > *,
  .pd-cap-grid > *,
  .pd-steps > *,
  .locp-results > *,
  .locp-steps > *,
  .locp-map-grid > *,
  .mi-caps > *,
  .mi-uses > *,
  .pseo-subscores > *,
  .pseo-ben-metrics > *,
  .brs-steps > *,
  .brs-uc-grid > *,
  .dz-steps > *,
  .dz-bens > *,
  .dev-bene-grid > *,
  .sondh-uc-grid > *,
  .seo-deep-bens > *,
  .wsdeep-usegrid > *,
  .blog-grid > *,
  .stat-grid > *,
  .stats-intro > *,
  .nbbh-stats > *,
  .wsp-stats > *,
  .sol-metrics-band > *,
  .prod-facts > *,
  .sol-metrics > *,
  .price-grid > *,
  .aifn-sec-head,
  .aifn-sec-head-tight,
  .d-head,
  .dcms-sec-head,
  .dev-deep-head,
  .feat-sec-head,
  .locp-head,
  .nbbh-sec-head,
  .pd-sec-head,
  .seo-deep-head,
  .sol-get-head,
  .sol-info-head,
  .vb-sec-head,
  .wsdeep-head,
  .wsp-sec-head,
  .prod-hero-visual,
  .company-hero-visual,
  .dcms-graphic,
  .vb-figure,
  .wsp-figure,
  .pseo-viz,
  .sol-hero-visual,
  .viz,
  .locp-figure,
  .dev-figure{
      animation-timeline:view();
      animation-range:entry 4% cover 32%;
      animation-fill-mode:both;
    }

    .nb-rise{animation-name:nb-rise-in}
    .nb-zoom{animation-name:nb-zoom-in}
    .nb-veeg{animation-name:nb-veeg-in}
    .nb-stapel{animation-name:nb-stapel-in}
    .nb-tegels{animation-name:nb-tegels-in}
    .nb-diepte{animation-name:nb-diepte-in}
    .nb-trap > *{animation-name:nb-rise-in}

    /* ELK SOORT BLOK KRIJGT ZIJN EIGEN BEWEGING. Deed de hele pagina hetzelfde, dan valt
       het niet op -- en dat was precies de klacht: "IK ZIE GEEN VERSCHIL".

         kaartenraster  -> tegels die opschalen
         abonnementen   -> kaarten die rechtdraaien
         tekeningen     -> beeld dat naar voren komt
         koppen         -> rustig omhoog (het is tekst)
         getallen       -> rustig omhoog (cijfers horen niet te wiebelen)
    */
  .prod-facts-grid > *,
  .docs-grid > *,
  .sol-grid > *,
  .feat-hub-grid > *,
  .company-grid > *,
  .fd-grid > *,
  .mp-grid > *,
  .mp-tilesrow > *,
  .mp-pages > *,
  .mp-values > *,
  .features > *,
  .fd-steps > *,
  .fd-checks > *,
  .sk-steps > *,
  .sk-blocks > *,
  .sk-refine > *,
  .sk-btiles > *,
  .wm-row > *,
  .nbmod-grid > *,
  .nbdz-points > *,
  .aud-grid > *,
  .wsc-grid > *,
  .wsc-points > *,
  .company-features > *,
  .company-steps > *,
  .aifn-steps > *,
  .nbbh-caps > *,
  .nbbh-benefits > *,
  .dcms-steps > *,
  .pd-cap-grid > *,
  .pd-steps > *,
  .locp-results > *,
  .locp-steps > *,
  .locp-map-grid > *,
  .mi-caps > *,
  .mi-uses > *,
  .pseo-subscores > *,
  .pseo-ben-metrics > *,
  .brs-steps > *,
  .brs-uc-grid > *,
  .dz-steps > *,
  .dz-bens > *,
  .dev-bene-grid > *,
  .sondh-uc-grid > *,
  .seo-deep-bens > *,
  .wsdeep-usegrid > *,
  .blog-grid > *{animation-name:nb-tegels-in}
  .price-grid > *{animation-name:nb-stapel-in}
  .stat-grid > *,
  .stats-intro > *,
  .nbbh-stats > *,
  .wsp-stats > *,
  .sol-metrics-band > *,
  .prod-facts > *,
  .sol-metrics > *{animation-name:nb-rise-in}
  .aifn-sec-head,
  .aifn-sec-head-tight,
  .d-head,
  .dcms-sec-head,
  .dev-deep-head,
  .feat-sec-head,
  .locp-head,
  .nbbh-sec-head,
  .pd-sec-head,
  .seo-deep-head,
  .sol-get-head,
  .sol-info-head,
  .vb-sec-head,
  .wsdeep-head,
  .wsp-sec-head{animation-name:nb-rise-in;animation-range:entry 6% cover 30%}
  .prod-hero-visual,
  .company-hero-visual,
  .dcms-graphic,
  .vb-figure,
  .wsp-figure,
  .pseo-viz,
  .sol-hero-visual,
  .viz,
  .locp-figure,
  .dev-figure{animation-name:nb-diepte-in;animation-range:entry 2% cover 36%}

    /* Elke volgende tegel start iets later: dat geeft het raster ritme. Puur CSS. */
    .nb-trap > *:nth-child(2),
  .prod-facts-grid > *:nth-child(2),
  .docs-grid > *:nth-child(2),
  .sol-grid > *:nth-child(2),
  .feat-hub-grid > *:nth-child(2),
  .company-grid > *:nth-child(2),
  .fd-grid > *:nth-child(2),
  .mp-grid > *:nth-child(2),
  .mp-tilesrow > *:nth-child(2),
  .mp-pages > *:nth-child(2),
  .mp-values > *:nth-child(2),
  .features > *:nth-child(2),
  .fd-steps > *:nth-child(2),
  .fd-checks > *:nth-child(2),
  .sk-steps > *:nth-child(2),
  .sk-blocks > *:nth-child(2),
  .sk-refine > *:nth-child(2),
  .sk-btiles > *:nth-child(2),
  .wm-row > *:nth-child(2),
  .nbmod-grid > *:nth-child(2),
  .nbdz-points > *:nth-child(2),
  .aud-grid > *:nth-child(2),
  .wsc-grid > *:nth-child(2),
  .wsc-points > *:nth-child(2),
  .company-features > *:nth-child(2),
  .company-steps > *:nth-child(2),
  .aifn-steps > *:nth-child(2),
  .nbbh-caps > *:nth-child(2),
  .nbbh-benefits > *:nth-child(2),
  .dcms-steps > *:nth-child(2),
  .pd-cap-grid > *:nth-child(2),
  .pd-steps > *:nth-child(2),
  .locp-results > *:nth-child(2),
  .locp-steps > *:nth-child(2),
  .locp-map-grid > *:nth-child(2),
  .mi-caps > *:nth-child(2),
  .mi-uses > *:nth-child(2),
  .pseo-subscores > *:nth-child(2),
  .pseo-ben-metrics > *:nth-child(2),
  .brs-steps > *:nth-child(2),
  .brs-uc-grid > *:nth-child(2),
  .dz-steps > *:nth-child(2),
  .dz-bens > *:nth-child(2),
  .dev-bene-grid > *:nth-child(2),
  .sondh-uc-grid > *:nth-child(2),
  .seo-deep-bens > *:nth-child(2),
  .wsdeep-usegrid > *:nth-child(2),
  .blog-grid > *:nth-child(2),
  .stat-grid > *:nth-child(2),
  .stats-intro > *:nth-child(2),
  .nbbh-stats > *:nth-child(2),
  .wsp-stats > *:nth-child(2),
  .sol-metrics-band > *:nth-child(2),
  .prod-facts > *:nth-child(2),
  .sol-metrics > *:nth-child(2),
  .price-grid > *:nth-child(2){animation-range:entry 2% cover 34%}
    .nb-trap > *:nth-child(3),
  .prod-facts-grid > *:nth-child(3),
  .docs-grid > *:nth-child(3),
  .sol-grid > *:nth-child(3),
  .feat-hub-grid > *:nth-child(3),
  .company-grid > *:nth-child(3),
  .fd-grid > *:nth-child(3),
  .mp-grid > *:nth-child(3),
  .mp-tilesrow > *:nth-child(3),
  .mp-pages > *:nth-child(3),
  .mp-values > *:nth-child(3),
  .features > *:nth-child(3),
  .fd-steps > *:nth-child(3),
  .fd-checks > *:nth-child(3),
  .sk-steps > *:nth-child(3),
  .sk-blocks > *:nth-child(3),
  .sk-refine > *:nth-child(3),
  .sk-btiles > *:nth-child(3),
  .wm-row > *:nth-child(3),
  .nbmod-grid > *:nth-child(3),
  .nbdz-points > *:nth-child(3),
  .aud-grid > *:nth-child(3),
  .wsc-grid > *:nth-child(3),
  .wsc-points > *:nth-child(3),
  .company-features > *:nth-child(3),
  .company-steps > *:nth-child(3),
  .aifn-steps > *:nth-child(3),
  .nbbh-caps > *:nth-child(3),
  .nbbh-benefits > *:nth-child(3),
  .dcms-steps > *:nth-child(3),
  .pd-cap-grid > *:nth-child(3),
  .pd-steps > *:nth-child(3),
  .locp-results > *:nth-child(3),
  .locp-steps > *:nth-child(3),
  .locp-map-grid > *:nth-child(3),
  .mi-caps > *:nth-child(3),
  .mi-uses > *:nth-child(3),
  .pseo-subscores > *:nth-child(3),
  .pseo-ben-metrics > *:nth-child(3),
  .brs-steps > *:nth-child(3),
  .brs-uc-grid > *:nth-child(3),
  .dz-steps > *:nth-child(3),
  .dz-bens > *:nth-child(3),
  .dev-bene-grid > *:nth-child(3),
  .sondh-uc-grid > *:nth-child(3),
  .seo-deep-bens > *:nth-child(3),
  .wsdeep-usegrid > *:nth-child(3),
  .blog-grid > *:nth-child(3),
  .stat-grid > *:nth-child(3),
  .stats-intro > *:nth-child(3),
  .nbbh-stats > *:nth-child(3),
  .wsp-stats > *:nth-child(3),
  .sol-metrics-band > *:nth-child(3),
  .prod-facts > *:nth-child(3),
  .sol-metrics > *:nth-child(3),
  .price-grid > *:nth-child(3){animation-range:entry 0% cover 36%}
    .nb-trap > *:nth-child(n+4),
  .prod-facts-grid > *:nth-child(n+4),
  .docs-grid > *:nth-child(n+4),
  .sol-grid > *:nth-child(n+4),
  .feat-hub-grid > *:nth-child(n+4),
  .company-grid > *:nth-child(n+4),
  .fd-grid > *:nth-child(n+4),
  .mp-grid > *:nth-child(n+4),
  .mp-tilesrow > *:nth-child(n+4),
  .mp-pages > *:nth-child(n+4),
  .mp-values > *:nth-child(n+4),
  .features > *:nth-child(n+4),
  .fd-steps > *:nth-child(n+4),
  .fd-checks > *:nth-child(n+4),
  .sk-steps > *:nth-child(n+4),
  .sk-blocks > *:nth-child(n+4),
  .sk-refine > *:nth-child(n+4),
  .sk-btiles > *:nth-child(n+4),
  .wm-row > *:nth-child(n+4),
  .nbmod-grid > *:nth-child(n+4),
  .nbdz-points > *:nth-child(n+4),
  .aud-grid > *:nth-child(n+4),
  .wsc-grid > *:nth-child(n+4),
  .wsc-points > *:nth-child(n+4),
  .company-features > *:nth-child(n+4),
  .company-steps > *:nth-child(n+4),
  .aifn-steps > *:nth-child(n+4),
  .nbbh-caps > *:nth-child(n+4),
  .nbbh-benefits > *:nth-child(n+4),
  .dcms-steps > *:nth-child(n+4),
  .pd-cap-grid > *:nth-child(n+4),
  .pd-steps > *:nth-child(n+4),
  .locp-results > *:nth-child(n+4),
  .locp-steps > *:nth-child(n+4),
  .locp-map-grid > *:nth-child(n+4),
  .mi-caps > *:nth-child(n+4),
  .mi-uses > *:nth-child(n+4),
  .pseo-subscores > *:nth-child(n+4),
  .pseo-ben-metrics > *:nth-child(n+4),
  .brs-steps > *:nth-child(n+4),
  .brs-uc-grid > *:nth-child(n+4),
  .dz-steps > *:nth-child(n+4),
  .dz-bens > *:nth-child(n+4),
  .dev-bene-grid > *:nth-child(n+4),
  .sondh-uc-grid > *:nth-child(n+4),
  .seo-deep-bens > *:nth-child(n+4),
  .wsdeep-usegrid > *:nth-child(n+4),
  .blog-grid > *:nth-child(n+4),
  .stat-grid > *:nth-child(n+4),
  .stats-intro > *:nth-child(n+4),
  .nbbh-stats > *:nth-child(n+4),
  .wsp-stats > *:nth-child(n+4),
  .sol-metrics-band > *:nth-child(n+4),
  .prod-facts > *:nth-child(n+4),
  .sol-metrics > *:nth-child(n+4),
  .price-grid > *:nth-child(n+4){animation-range:entry 0% cover 38%}
  }

  /* ── Laag 2: dezelfde beweging via een waarnemer ──
     LET OP DE HAAK `html.nb-beweegt`. Alles hieronder begint op opacity:0, en dat mag
     ALLEEN als er ook echt iets is dat het weer aanzet. Die klasse wordt door het script
     op <html> gezet als allereerste daad. Draait het script niet -- JavaScript uit, een
     fout, een oude browser -- dan staat de klasse er niet en is er niets verborgen.

     Dit is de fout die hier bijna in ging: de eerste versie zette opacity:0 op de rasters
     en koppen van ALLE publieke pagina's, terwijl de waarnemer alleen op de landingspagina
     bestond en alleen naar .nb-rise keek. Op Safari zou elke productpagina leeg zijn
     geweest. Zichtbaarheid faalt altijd open. */
  @supports not (animation-timeline: view()){
    html.nb-beweegt .nb-rise,
    html.nb-beweegt .nb-zoom,
    html.nb-beweegt .nb-veeg,
    html.nb-beweegt .nb-stapel,
    html.nb-beweegt .nb-tegels,
    html.nb-beweegt .nb-diepte,
    html.nb-beweegt .nb-trap > *,
    html.nb-beweegt .prod-facts-grid > *,
    html.nb-beweegt .docs-grid > *,
    html.nb-beweegt .sol-grid > *,
    html.nb-beweegt .feat-hub-grid > *,
    html.nb-beweegt .company-grid > *,
    html.nb-beweegt .fd-grid > *,
    html.nb-beweegt .mp-grid > *,
    html.nb-beweegt .mp-tilesrow > *,
    html.nb-beweegt .mp-pages > *,
    html.nb-beweegt .mp-values > *,
    html.nb-beweegt .features > *,
    html.nb-beweegt .fd-steps > *,
    html.nb-beweegt .fd-checks > *,
    html.nb-beweegt .sk-steps > *,
    html.nb-beweegt .sk-blocks > *,
    html.nb-beweegt .sk-refine > *,
    html.nb-beweegt .sk-btiles > *,
    html.nb-beweegt .wm-row > *,
    html.nb-beweegt .nbmod-grid > *,
    html.nb-beweegt .nbdz-points > *,
    html.nb-beweegt .aud-grid > *,
    html.nb-beweegt .wsc-grid > *,
    html.nb-beweegt .wsc-points > *,
    html.nb-beweegt .company-features > *,
    html.nb-beweegt .company-steps > *,
    html.nb-beweegt .aifn-steps > *,
    html.nb-beweegt .nbbh-caps > *,
    html.nb-beweegt .nbbh-benefits > *,
    html.nb-beweegt .dcms-steps > *,
    html.nb-beweegt .pd-cap-grid > *,
    html.nb-beweegt .pd-steps > *,
    html.nb-beweegt .locp-results > *,
    html.nb-beweegt .locp-steps > *,
    html.nb-beweegt .locp-map-grid > *,
    html.nb-beweegt .mi-caps > *,
    html.nb-beweegt .mi-uses > *,
    html.nb-beweegt .pseo-subscores > *,
    html.nb-beweegt .pseo-ben-metrics > *,
    html.nb-beweegt .brs-steps > *,
    html.nb-beweegt .brs-uc-grid > *,
    html.nb-beweegt .dz-steps > *,
    html.nb-beweegt .dz-bens > *,
    html.nb-beweegt .dev-bene-grid > *,
    html.nb-beweegt .sondh-uc-grid > *,
    html.nb-beweegt .seo-deep-bens > *,
    html.nb-beweegt .wsdeep-usegrid > *,
    html.nb-beweegt .blog-grid > *,
    html.nb-beweegt .stat-grid > *,
    html.nb-beweegt .stats-intro > *,
    html.nb-beweegt .nbbh-stats > *,
    html.nb-beweegt .wsp-stats > *,
    html.nb-beweegt .sol-metrics-band > *,
    html.nb-beweegt .prod-facts > *,
    html.nb-beweegt .sol-metrics > *,
    html.nb-beweegt .price-grid > *,
    html.nb-beweegt .aifn-sec-head,
    html.nb-beweegt .aifn-sec-head-tight,
    html.nb-beweegt .d-head,
    html.nb-beweegt .dcms-sec-head,
    html.nb-beweegt .dev-deep-head,
    html.nb-beweegt .feat-sec-head,
    html.nb-beweegt .locp-head,
    html.nb-beweegt .nbbh-sec-head,
    html.nb-beweegt .pd-sec-head,
    html.nb-beweegt .seo-deep-head,
    html.nb-beweegt .sol-get-head,
    html.nb-beweegt .sol-info-head,
    html.nb-beweegt .vb-sec-head,
    html.nb-beweegt .wsdeep-head,
    html.nb-beweegt .wsp-sec-head,
    html.nb-beweegt .prod-hero-visual,
    html.nb-beweegt .company-hero-visual,
    html.nb-beweegt .dcms-graphic,
    html.nb-beweegt .vb-figure,
    html.nb-beweegt .wsp-figure,
    html.nb-beweegt .pseo-viz,
    html.nb-beweegt .sol-hero-visual,
    html.nb-beweegt .viz,
    html.nb-beweegt .locp-figure,
    html.nb-beweegt .dev-figure{
      opacity:0;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1),
      clip-path .55s cubic-bezier(.22,.61,.36,1)}
    html.nb-beweegt .nb-rise,
    html.nb-beweegt .nb-trap > *,
    html.nb-beweegt .stat-grid > *,
    html.nb-beweegt .stats-intro > *,
    html.nb-beweegt .nbbh-stats > *,
    html.nb-beweegt .wsp-stats > *,
    html.nb-beweegt .sol-metrics-band > *,
    html.nb-beweegt .prod-facts > *,
    html.nb-beweegt .sol-metrics > *{transform:translateY(18px)}
    html.nb-beweegt .nb-zoom{transform:scale(.965)}
    html.nb-beweegt .nb-veeg{clip-path:inset(0 0 22% 0);transform:translateY(12px)}
    html.nb-beweegt .nb-stapel,
    html.nb-beweegt .price-grid > *{transform:translateY(22px) rotate(-3deg) scale(.94)}
    html.nb-beweegt .nb-tegels,
    html.nb-beweegt .prod-facts-grid > *,
    html.nb-beweegt .docs-grid > *,
    html.nb-beweegt .sol-grid > *,
    html.nb-beweegt .feat-hub-grid > *,
    html.nb-beweegt .company-grid > *,
    html.nb-beweegt .fd-grid > *,
    html.nb-beweegt .mp-grid > *,
    html.nb-beweegt .mp-tilesrow > *,
    html.nb-beweegt .mp-pages > *,
    html.nb-beweegt .mp-values > *,
    html.nb-beweegt .features > *,
    html.nb-beweegt .fd-steps > *,
    html.nb-beweegt .fd-checks > *,
    html.nb-beweegt .sk-steps > *,
    html.nb-beweegt .sk-blocks > *,
    html.nb-beweegt .sk-refine > *,
    html.nb-beweegt .sk-btiles > *,
    html.nb-beweegt .wm-row > *,
    html.nb-beweegt .nbmod-grid > *,
    html.nb-beweegt .nbdz-points > *,
    html.nb-beweegt .aud-grid > *,
    html.nb-beweegt .wsc-grid > *,
    html.nb-beweegt .wsc-points > *,
    html.nb-beweegt .company-features > *,
    html.nb-beweegt .company-steps > *,
    html.nb-beweegt .aifn-steps > *,
    html.nb-beweegt .nbbh-caps > *,
    html.nb-beweegt .nbbh-benefits > *,
    html.nb-beweegt .dcms-steps > *,
    html.nb-beweegt .pd-cap-grid > *,
    html.nb-beweegt .pd-steps > *,
    html.nb-beweegt .locp-results > *,
    html.nb-beweegt .locp-steps > *,
    html.nb-beweegt .locp-map-grid > *,
    html.nb-beweegt .mi-caps > *,
    html.nb-beweegt .mi-uses > *,
    html.nb-beweegt .pseo-subscores > *,
    html.nb-beweegt .pseo-ben-metrics > *,
    html.nb-beweegt .brs-steps > *,
    html.nb-beweegt .brs-uc-grid > *,
    html.nb-beweegt .dz-steps > *,
    html.nb-beweegt .dz-bens > *,
    html.nb-beweegt .dev-bene-grid > *,
    html.nb-beweegt .sondh-uc-grid > *,
    html.nb-beweegt .seo-deep-bens > *,
    html.nb-beweegt .wsdeep-usegrid > *,
    html.nb-beweegt .blog-grid > *{transform:translateY(16px) scale(.88)}
    html.nb-beweegt .nb-diepte,
    html.nb-beweegt .prod-hero-visual,
    html.nb-beweegt .company-hero-visual,
    html.nb-beweegt .dcms-graphic,
    html.nb-beweegt .vb-figure,
    html.nb-beweegt .wsp-figure,
    html.nb-beweegt .pseo-viz,
    html.nb-beweegt .sol-hero-visual,
    html.nb-beweegt .viz,
    html.nb-beweegt .locp-figure,
    html.nb-beweegt .dev-figure{transform:perspective(700px) translateZ(-90px) rotateX(9deg)}
    /* De waarnemer zet .nb-in. Een eigen naam en niet het bestaande .in, want dat gebruikt
       de landingspagina al voor haar .reveal-blokken; twee betekenissen op een klasse gaan
       altijd een keer mis. */
    /* GEMETEN 02-09-2026 (Firefox 154, terugvalpad): de eindstand zette clip-path:inset(0) op ELK
       onthuld element en zijn kinderen. Een kop met line-height 1.1 heeft staartletters (j, g, p)
       die .26em onder de regel steken; inset(0) knipt die op de doosrand af. De eigenaar zag het op
       elke serif-kop. Alleen de veeg heeft een knip nodig, en die eindigt RUIMER dan de doos. */
    html.nb-beweegt .nb-in,
    html.nb-beweegt .nb-in > *{opacity:1;transform:none}
    html.nb-beweegt .nb-in.nb-veeg,
    html.nb-beweegt .nb-in > .nb-veeg{clip-path:inset(-1em)}
  }
}
@keyframes nb-rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes nb-zoom-in{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes nb-veeg-in{from{opacity:0;clip-path:inset(0 0 22% 0);transform:translateY(12px)}
                      to{opacity:1;clip-path:inset(-1em);transform:none}}  /* ruimer dan de doos: staartletters blijven heel */
@keyframes nb-stapel-in{from{opacity:0;transform:translateY(22px) rotate(-3deg) scale(.94)}
                        to{opacity:1;transform:none}}
@keyframes nb-tegels-in{from{opacity:0;transform:translateY(16px) scale(.88)}
                        to{opacity:1;transform:none}}
@keyframes nb-diepte-in{from{opacity:0;transform:perspective(700px) translateZ(-90px) rotateX(9deg)}
                        to{opacity:1;transform:none}}
/* Zonder beweging: gewoon zichtbaar, nooit onzichtbaar blijven hangen. */
@media (prefers-reduced-motion:reduce){
  .nb-rise,.nb-zoom,.nb-veeg,.nb-stapel,.nb-tegels,.nb-diepte,
  .nb-trap > *,
  .prod-facts-grid > *,
  .docs-grid > *,
  .sol-grid > *,
  .feat-hub-grid > *,
  .company-grid > *,
  .fd-grid > *,
  .mp-grid > *,
  .mp-tilesrow > *,
  .mp-pages > *,
  .mp-values > *,
  .features > *,
  .fd-steps > *,
  .fd-checks > *,
  .sk-steps > *,
  .sk-blocks > *,
  .sk-refine > *,
  .sk-btiles > *,
  .wm-row > *,
  .nbmod-grid > *,
  .nbdz-points > *,
  .aud-grid > *,
  .wsc-grid > *,
  .wsc-points > *,
  .company-features > *,
  .company-steps > *,
  .aifn-steps > *,
  .nbbh-caps > *,
  .nbbh-benefits > *,
  .dcms-steps > *,
  .pd-cap-grid > *,
  .pd-steps > *,
  .locp-results > *,
  .locp-steps > *,
  .locp-map-grid > *,
  .mi-caps > *,
  .mi-uses > *,
  .pseo-subscores > *,
  .pseo-ben-metrics > *,
  .brs-steps > *,
  .brs-uc-grid > *,
  .dz-steps > *,
  .dz-bens > *,
  .dev-bene-grid > *,
  .sondh-uc-grid > *,
  .seo-deep-bens > *,
  .wsdeep-usegrid > *,
  .blog-grid > *,
  .stat-grid > *,
  .stats-intro > *,
  .nbbh-stats > *,
  .wsp-stats > *,
  .sol-metrics-band > *,
  .prod-facts > *,
  .sol-metrics > *,
  .price-grid > *,
  .aifn-sec-head,
  .aifn-sec-head-tight,
  .d-head,
  .dcms-sec-head,
  .dev-deep-head,
  .feat-sec-head,
  .locp-head,
  .nbbh-sec-head,
  .pd-sec-head,
  .seo-deep-head,
  .sol-get-head,
  .sol-info-head,
  .vb-sec-head,
  .wsdeep-head,
  .wsp-sec-head,
  .prod-hero-visual,
  .company-hero-visual,
  .dcms-graphic,
  .vb-figure,
  .wsp-figure,
  .pseo-viz,
  .sol-hero-visual,
  .viz,
  .locp-figure,
  .dev-figure{opacity:1!important;transform:none!important;clip-path:none!important}
}.mega-nav{display:flex;align-items:center;gap:8px}
.mega-trigger{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font:inherit}
.mega-caret{transition:transform .2s var(--nb-ease,cubic-bezier(.16,1,.3,1));opacity:.7}
.mega-trigger[aria-expanded="true"] .mega-caret{transform:rotate(180deg)}
.mega-panel{position:absolute;left:0;right:0;top:100%;z-index:30;background:#ffffff;border-bottom:1px solid var(--nb-line,#26251E1A);opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .2s var(--nb-ease,ease),transform .2s var(--nb-ease,ease),visibility .2s}
.mega-panel.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
/* OWNER RULE: the mega dropdown CONTENT is a compact centred column, never smeared
   across the full viewport (on wide screens the link columns and the promo tile
   drifted to opposite edges with a sea of dead space between them). The full-bleed
   white band stays (solid bar rule); only the inner content is constrained. */
/* Selector carries .mega-panel + .wrap so it OUTRANKS the later
   `.site-header .wrap{max-width:none}` full-width override (the markup is
   <div class="wrap mega-inner"> inside .mega-panel). */
.mega-panel .wrap.mega-inner{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 24px 28px;align-items:start;max-width:1060px;margin:0 auto}
.mega-kicker{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--nb-muted,#6B6858);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--nb-line,#26251E1A)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 22px}
.mega-panel .mega-grid:has(.mega-col:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.mega-col{display:flex;flex-direction:column;gap:2px}
.mega-tile{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;color:inherit;text-decoration:none;transition:background .16s var(--nb-ease,ease)}
.mega-tile:hover{background:var(--nb-blue-50,#F2F1ED)}
/* Warm amber icon chips (same treatment as the company value cards) so the menu
   reads visual and branded instead of flat gray squares. */
.mega-ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(192,133,50,.12);color:#9C6926;transition:background .18s var(--nb-ease,ease),color .18s var(--nb-ease,ease)}
.mega-tile:hover .mega-ic{background:rgba(192,133,50,.2);color:#7A4E18}
.mega-ic svg{width:19px;height:19px}
.mega-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-t{font-size:14.5px;font-weight:650;color:var(--nb-ink,#0b1220)}
.mega-d{font-size:12.5px;line-height:1.4;color:var(--nb-muted,#6B6858)}
.mega-foot{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--nb-primary,#26251E);text-decoration:none}
.mega-foot svg{transition:transform .18s var(--nb-ease,ease)}
.mega-foot:hover svg{transform:translateX(3px)}
.mega-aside{align-self:stretch}
.mega-prev-card{border:1px solid var(--nb-line,#26251E1A);border-radius:16px;padding:16px;background:var(--nb-card,#fff);height:100%;display:flex;flex-direction:column;gap:12px}
.mpc-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--nb-muted,#6B6858)}
.mpc-dot{width:8px;height:8px;border-radius:50%;background:var(--nb-primary,#26251E)}
.mpc-bubble{background:var(--nb-blue-50,#F2F1ED);border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.45;color:var(--nb-slate,#3F3E36)}
.mpc-gen{display:flex;flex-direction:column;gap:7px}
/* Effen: hier stond een verloop tussen twee variabelen met dezelfde waarde. */
.mpc-bar{height:9px;border-radius:6px;background:var(--nb-primary,#26251E)}
.mpc-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.mpc-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--nb-blue-50,#F2F1ED);color:var(--nb-primary,#26251E)}
.mpc-personas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mpc-persona{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--nb-slate,#3F3E36);border:1px solid var(--nb-line,#26251E1A);border-radius:10px;padding:8px 10px}
.mpc-persona svg{width:15px;height:15px;color:var(--nb-primary,#26251E)}
.mpc-stat{margin-top:auto;font-size:13px;color:var(--nb-muted,#6B6858)}
.mpc-stat b{font-size:22px;color:var(--nb-ink,#0b1220);margin-right:4px}
.mpc-code .mpc-pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;color:var(--nb-slate,#3F3E36);white-space:pre;overflow:auto}
.mpc-pre .c-k{color:var(--nb-primary,#26251E)}.mpc-pre .c-f{color:#0d9488}.mpc-pre .c-s{color:#b45309}
.mm-acc{border-bottom:1px solid var(--nb-line,#26251E1A)}
.mm-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-weight:600;font-size:15px}
.mm-acc summary::-webkit-details-marker{display:none}
.mm-acc summary svg{transition:transform .2s var(--nb-ease,ease)}
.mm-acc[open] summary svg{transform:rotate(180deg)}
.mm-acc-body{padding:2px 0 8px}
.mm-acc-body .mega-tile{padding:9px 14px}
@media (max-width:980px){.mega-nav{display:none}.mega-panel{display:none}}
body[data-portal-theme="dark"] .mega-trigger{color:var(--nb-muted-d,#9AA3B8);font-size:14.5px;font-weight:500;transition:color .18s var(--nb-ease,ease)}
body[data-portal-theme="dark"] .mega-trigger:hover,body[data-portal-theme="dark"] .mega-trigger[aria-expanded="true"]{color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .mega-panel{background:#0A0C15;border-bottom:1px solid var(--nb-line-dark,rgba(255,255,255,.08));box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
body[data-portal-theme="dark"] .mega-kicker{color:var(--nb-muted-d,#9AA3B8);border-bottom-color:var(--nb-line-dark,rgba(255,255,255,.08))}
body[data-portal-theme="dark"] .mega-tile:hover{background:var(--nb-card-d,rgba(255,255,255,.035))}
body[data-portal-theme="dark"] .mega-ic{background:rgba(192,133,50,.16);color:#D9A55A}
body[data-portal-theme="dark"] .mega-tile:hover .mega-ic{background:rgba(192,133,50,.24);color:#E9C77E}
body[data-portal-theme="dark"] .mega-t{color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .mega-d{color:var(--nb-muted-d,#9AA3B8)}
body[data-portal-theme="dark"] .mega-foot{color:var(--nb-glow,#26251E)}
body[data-portal-theme="dark"] .mega-prev-card{background:var(--nb-card-d,rgba(255,255,255,.035));border-color:var(--nb-line-dark,rgba(255,255,255,.08))}
body[data-portal-theme="dark"] .mpc-bubble{background:rgba(38,37,30,.1);color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .mpc-chip{background:rgba(38,37,30,.14);color:var(--nb-glow,#26251E)}
body[data-portal-theme="dark"] .mpc-persona{border-color:var(--nb-line-dark,rgba(255,255,255,.08));color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .mpc-persona svg{color:var(--nb-glow,#26251E)}
body[data-portal-theme="dark"] .mpc-stat{color:var(--nb-muted-d,#9AA3B8)}
body[data-portal-theme="dark"] .mpc-stat b{color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .mpc-code .mpc-pre{color:var(--nb-muted-d,#9AA3B8)}
body[data-portal-theme="dark"] .mm-acc{border-bottom-color:var(--nb-line-dark,rgba(255,255,255,.08))}/* ══════════════════════════════════════════════════════════════════════════════════════
   DEZE REGELS STAAN HIER EN NIET IN portal_css(), EN DAT IS DE HELE LES VAN VANDAAG.

   Ik heb de powered-by-regel eerst in portal_css() gezet. Die stylesheet wordt op de
   LANDINGSPAGINA helemaal niet uitgestuurd -- die pagina heeft een eigen. Gevolg: de link
   stond op `display:block` in plaats van flex, het logo 3px scheef, en het blok niet
   rechts. Ik heb die fout vandaag VIER keer gemaakt, in vier verschillende bestanden.

   De regel die eruit volgt: opmaak van een onderdeel hoort bij dat onderdeel. Deze functie
   reist mee met portal_footer_html(); waar de voettekst verschijnt, verschijnt zijn CSS.
   Bewaker: PoweredByStaysInFooterTest controleert nu de UITGESTUURDE HTML, niet de bron --
   want alleen dat meet of een regel de bezoeker bereikt.
   ══════════════════════════════════════════════════════════════════════════════════════ */
/* Footer: legal links + NerrieServer parent line (both themes). */
/* De powered-by-regel: EEN rustige regel naast de copyright, niet een badge die overal
   opduikt. Het logo krijgt vaste maten mee zodat de voettekst niet verspringt terwijl het
   laadt (dat is de reden voor width/height op de img, niet de opmaak). */
/* UITLIJNING, twee fouten die de eigenaar zag en die ik gemeten heb:
   1. Het blok stond NIET rechts. De <a> is een rasteritem en vulde de hele derde kolom
      (534px), terwijl zijn inhoud links in die kolom begon: gemeten 634px vanaf links met
      305px lucht rechts ernaast. `justify-self:end` laat hem krimpen tot zijn inhoud en
      tegen de rechterrand staan, gelijk met de kolommen erboven.
   2. Het logo stond 3px HOGER dan de tekst (midden op 39 tegen 42). Dat komt van de
      regelhoogte: de tekstregel is hoger dan zijn letters, dus `align-items:center`
      centreert twee verschillend hoge dozen. Met `line-height:1` op de link is de
      tekstdoos even hoog als de letters en vallen beide middens samen. */
.pf-powered{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  justify-self:end;line-height:1;
  font-size:12.5px;color:var(--nb-muted,#6E6A5E);white-space:nowrap;transition:color .16s ease}
.pf-powered:hover{color:var(--nb-ink,#26251E)}
body[data-portal-theme="dark"] .pf-foot-brand .brand,body[data-portal-theme="dark"] .pf-foot-brand .nb-wordmark{color:#F5F5F3}
body[data-portal-theme="dark"] .pf-powered{color:rgba(245,245,243,.7)}
body[data-portal-theme="dark"] .pf-powered:hover{color:#F5F5F3}
.pf-powered img{display:block;height:16px;width:auto;opacity:.85}
.pf-powered:hover img{opacity:1}
.site-footer{flex:0 0 auto;border-top:1px solid var(--nb-line,#26251E1A);background:rgba(255,255,255,.7);color:var(--nb-muted,#6B6858);font-size:.9rem;padding:52px 0 28px}
.site-footer .wrap{width:100%;max-width:var(--nb-wrap,1280px);margin:0 auto;padding-left:clamp(20px,4vw,60px);padding-right:clamp(20px,4vw,60px)}
.pf-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;text-align:left}
.pf-foot-brand .brand{display:inline-flex;margin-bottom:14px}
.pf-foot-brand p{max-width:34ch;color:var(--nb-muted,#6B6858);line-height:1.55;font-size:.9rem}
/* h3 en niet h5: de voet is een GEDEELD blok onder paginas waarvan de laatste kop
   een h2 is; h5 was een niveausprong op elke pagina (zelfde les als de klantsites). */
.pf-foot-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--nb-ink,#26251E);opacity:.75;margin:0 0 14px;font-weight:700}
.pf-foot-col a{display:block;color:var(--nb-muted,#6B6858);font-size:.92rem;margin-bottom:10px;text-decoration:none;transition:color .16s ease}
.pf-foot-col a:hover{color:var(--nb-amber-on-page,#8A5A1A)}
.pf-foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--nb-line,#26251E1A)}
.pf-foot-bottom p{margin:0;justify-self:start}
.pf-foot-bottom .theme-switch{justify-self:center}
@media(max-width:760px){.pf-foot-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;padding-top:26px}.pf-foot-bottom p,.pf-foot-bottom .theme-switch,.pf-foot-bottom .pf-powered{justify-self:center}.pf-foot-bottom .theme-switch{order:-1}.pf-foot-bottom p{order:0}.pf-foot-bottom .pf-powered{order:1}}
.pf-foot-right{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Shared light/dark toggle (same control on every public page). */
.theme-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--nb-line,#26251E1A);border-radius:999px;background:rgba(120,120,130,.08)}
.theme-btn{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:999px;background:none;color:var(--nb-muted,#6B6858);cursor:pointer;transition:background .18s ease,color .18s ease}
.theme-btn:hover{color:var(--nb-ink,#26251E)}
.theme-btn.is-active{background:#fff;color:var(--nb-ink,#26251E)}
body[data-portal-theme="dark"] .theme-btn:hover{color:var(--nb-white,#F7F8FC)}
body[data-portal-theme="dark"] .theme-btn.is-active{background:rgba(255,255,255,.10);color:var(--nb-white,#F7F8FC)}
@media(max-width:860px){.pf-foot-top{grid-template-columns:1fr 1fr;gap:28px}.pf-foot-brand{grid-column:1/-1}}
@media(max-width:520px){.pf-foot-top{grid-template-columns:1fr}}
/* GEMETEN: deze functie is het ENIGE voetblad dat de landingspagina meestuurt; de
   donkere varianten stonden alleen in portal_css(), dat / niet emitteert. Gevolg: op
   een donkere landing hield .site-footer zijn background:rgba(255,255,255,.7) (dat
   compositeert tot #B4B4B6) terwijl de links de donkere inkt #6B6858 hielden = 2.71:1.
   --nb-muted is daar niet eens gedefinieerd, vandaar dat de letterlijke fallback won. */
body[data-portal-theme="dark"] .site-footer{background:transparent;color:var(--nb-muted-d,#9AA3B8)}
body[data-portal-theme="dark"] .pf-foot-brand p,
body[data-portal-theme="dark"] .pf-foot-col a,
body[data-portal-theme="dark"] .pf-foot-bottom p{color:var(--nb-muted-d,#9AA3B8)}
body[data-portal-theme="dark"] .pf-foot-col h3{color:var(--nb-white,#F7F8FC);opacity:.85}