:where(a,button,summary,[role="button"],[tabindex]:not([tabindex="-1"]),input:not([type="hidden"]),select,textarea):focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 2px #fff}
@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{--v6-gap:clamp(56px,8vw,110px);display:flex;flex-direction:column;gap:var(--v6-gap)}

/* ── 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"). */
/* GEMETEN 03-09: drie omkaderde rijen naast de omkaderde tegels lazen als ruis (eigenaar: "te
   rommelig"). Een hairline tussen de rijen houdt het ritme en haalt de dubbele omlijning weg.
   De laatste rij sluit zonder lijn af; de focusring blijft ongemoeid (die staat los). */
/* GEMETEN 03-09 met echte Tab-toetsen: de vier verborgen checkboxes van de offerte-demo kregen
   een ring op een element van 0x0. De ring hoort op het label dat je ziet. */
/* EIGENAAR 03-09: "elke keer als ik op iets klik zie je zo'n lelijke vierhoek". Dat was deze ring:
   :focus-within gaat OOK af bij een muisklik. De ring hoort bij toetsenbordnavigatie, dus hij hangt
   nu aan :has(:focus-visible). Beide lagen blijven bij elkaar (outline + witte scheidingsgloed);
   half doven laat een losse witte gloed achter (zie AFocusHaloMayNotOutliveItsOutline). */
/* Het totaal is waar de demo om draait; het stond als gewone tabelregel (1.08rem) onderaan.
   Groter, met tabular-nums zodat een ander bedrag niets laat verspringen. */
.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}
/* De bouwlijst vult de helft die leeg stond. Vlak: tintvlak + hairline, radius in de familie van
   de bel (18px) en het invoerveld (16px), dus 14px. Een rustige eenrichtingsbeweging met stagger,
   gehangen aan dezelfde fase als de tikdots. */
.c-bouw{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.c-bouw li{display:flex;align-items:center;gap:10px;background:var(--v6-bg2);border:1px solid var(--v6-line);border-radius:14px;padding:10px 14px;font-size:.9rem;font-weight:600;color:var(--v6-ink);opacity:0;transform:translateY(8px);transition:opacity .5s var(--v6-ease),transform .5s var(--v6-ease)}
.c-bouw i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--v6-accent);color:#fff;font-size:.6rem;flex:none}
.c-bouw em{font-style:normal}
.v6-studio.is-fase3 .c-bouw li{opacity:1;transform:none}
.v6-studio.is-fase3 .c-bouw li:nth-child(2){transition-delay:.18s}
.v6-studio.is-fase3 .c-bouw li:nth-child(3){transition-delay:.36s}
/* De laatste beat: drie vervolgzinnen die tonen dat het gesprek doorgaat. Zelfde vlakke taal als
   de bouwlijst; ze verschijnen in fase 4, na de app rechts, en bewegen daarna niet meer. */
.c-volg{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--v6-ease),transform .5s var(--v6-ease)}
.c-volg i{font-style:normal;font-size:.82rem;font-weight:600;color:var(--v6-muted);background:var(--v6-bg2);border:1px solid var(--v6-line);border-radius:14px;padding:7px 12px}
.v6-studio.is-fase4 .c-volg{opacity:1;transform:none}
.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:10px}
.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}

/* Acte 3b: je hoeft niet opnieuw te beginnen. Drie gelijke kaarten, zelfde vormtaal als de
   toonkaarten hierboven; op smal breken ze onder elkaar (minmax met min(), nooit een vaste rem
   die breder is dan de houder). */
.v6-imp-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1080px;margin:0 auto}
/* HET IMPORTBLOK (eigenaar 14-09-2026: "dit blok moet ook beter"). Dezelfde kaarttaal als het gereedschap erboven: een
   icoonvak, de naam, een zin. De bouwers staan als rustige labels boven de kaarten in plaats van in de lopende tekst. */
.v6-imp-merken{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:-6px auto 26px}
.v6-imp-merken span{font-size:.84rem;font-weight:600;color:var(--v6-ink);background:var(--v6-bg2);border:1px solid var(--v6-line);border-radius:999px;padding:7px 14px}
.v6-imp-kaart{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--v6-line);border-radius:18px;padding:22px 20px;transition:border-color .2s ease}
.v6-imp-kaart:hover{border-color:var(--v6-line2)}
.v6-imp-kaart .v6-imp-ic{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-imp-kaart b{font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--v6-ink);margin-top:4px}
.v6-imp-kaart span{font-size:.9rem;color:var(--v6-muted);line-height:1.5}
.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(20px,2vw,32px);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)}
/* GEMETEN 03-09-2026 in het DONKERE thema op de rig: deze twee vlakken stonden hardgecodeerd op
   wit terwijl hun letters de themakleur volgen. Contrast 1.09 en 1.07: de tekst was onzichtbaar
   ("Offertegenerator", "Klantenoverzicht", "Boekingspagina", "Bestelproces" en de actieve
   schakelknop "Standaard"). Zelfde tint-vlak en hairline als de rest van het donkere thema. */
body[data-portal-theme="dark"] .v6-toonkaart{background:#161615;border-color:rgba(245,245,243,.16)}
body[data-portal-theme="dark"] .v6-imp-kaart{background:#161615;border-color:rgba(245,245,243,.16)}
body[data-portal-theme="dark"] .v6-imp-kaart b{color:#F5F5F3}
body[data-portal-theme="dark"] .v6-imp-kaart .v6-imp-ic{background:rgba(37,99,235,.22);color:#93B8F5}
body[data-portal-theme="dark"] .v6-imp-merken span{background:#161615;border-color:rgba(245,245,243,.16);color:#F5F5F3}
body[data-portal-theme="dark"] .c-bouw li{background:#161615;border-color:rgba(245,245,243,.16)}
body[data-portal-theme="dark"] .c-volg i{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-imp-rij{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)}
}
@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}
  .v6-stappen{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .v6-toonchips{grid-template-columns:1fr}
  .v6-imp-rij{grid-template-columns:1fr}
}

/* ── HET 3D-PODIUM ──────────────────────────────────────────────────────────
   VLAK-WET: tint-vlak, hairline, donkere inkt. De diepte zit in het doek zelf,
   niet in de omhulling; geen slagschaduwen en geen gradient-tegels op de UI. */
/* Het kubusspel vult de rechterhelft van het studioraam. Het venster heeft geen rand en geen
   eigen achtergrond: het spel tekent zijn eigen vlak. */
.v6-spel{display:block;width:100%;height:100%;min-height:300px;border:0;background:var(--v6-bg2)}
@media (max-width:900px){
  .v6-spel{min-height:260px}
}

/* ── 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"] .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}.nb-wind{position:absolute;left:0;right:0;z-index:1;pointer-events:none;overflow:hidden;
  /* Waar iets in de VOORGROND staat (de bomen van de band, de tegels van het authpaneel)
     leest een wolk die eroverheen drijft als een fout: een wolk hoort erachter. De laag
     dooft daarom uit naar beide randen. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 66%,transparent 88%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 66%,transparent 88%)}
.nb-wind i{display:block;height:100%;background-repeat:repeat-x;
  background-position:0 50%;image-rendering:pixelated;will-change:transform}
/* DE TEGELBREEDTE IS EEN INSTELLING, GEEN VAST GETAL.
   Een tegel van 960 px op een band van 1440 leest als een wolk; dezelfde 960 op het
   authpaneel van 720 px leest als een plaat, want de wolk is dan tweemaal zo groot ten
   opzichte van zijn vlak. De breedte staat daarom in --nb-tegel-a/--nb-tegel-b, en de
   verschuiving in de keyframes rekent met DEZELFDE variabele -- anders springt de strook.
   Wie de laag smaller wil, zet een andere waarde; er valt niets uit de pas te lopen. */
/* De voorste laag: bredere tegel (grotere blokjes) en de snelste drift. */
.nb-wind-a{top:6%;height:22%}
.nb-wind-a i{--nb-tegel-a:960px;width:calc(100% + var(--nb-tegel-a));background-image:var(--nb-wolk);
  background-size:var(--nb-tegel-a) 100%;animation:nb-pix-drift-a 88s linear infinite;opacity:.5}
/* De achterste laag: smallere tegel, trager, en doorzichtiger zodat hij wijkt. */
.nb-wind-b{top:1%;height:15%}
.nb-wind-b i{--nb-tegel-b:640px;width:calc(100% + var(--nb-tegel-b));background-image:var(--nb-wolk);
  background-size:var(--nb-tegel-b) 100%;animation:nb-pix-drift-b 145s linear infinite;opacity:.34}
@keyframes nb-pix-drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--nb-tegel-a)),0,0)}}
@keyframes nb-pix-drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--nb-tegel-b)),0,0)}}
/* Wie beweging heeft uitgezet, krijgt de scene zoals hij was: stil. */
@media (prefers-reduced-motion:reduce){
  .nb-wind i{animation:none}
}/* HOGER DAN EEN GEWONE BAND. De scene is 2688x1792 (verhouding 1,5) en een band van
   1440x540 is 2,67: dan valt bijna de helft van de hoogte weg en zie je of alleen lucht
   of alleen gras. Op 660 px is de verhouding 2,18 en past het landschap wel. */
/* DE BAND LOOPT DOOR IN HET VOLGENDE BLOK.
   De eigenaar, 06-09-2026: "eronder zit een witte leegruimte, dat blok moet gewoon
   doorlopen naar het volgende blok waar je dat licht beige ziet dus zonder tussenruimte
   aan de onderkant". GEMETEN op de rig: main.v6 is een flexkolom met gap 110 px (56 op
   390), en die tussenruimte toont gewoon het paginawit. Geen marge van de band zelf, dus
   ook niet met een marge weg te halen -- de kolom zet hem ertussen. De band heft precies
   DIE waarde op, via dezelfde variabele, zodat hij nooit uit de pas kan lopen. */
.v6-pix{position:relative;isolation:isolate;overflow:hidden;background:#1E7BC8;
  min-height:clamp(460px,46vw,660px);display:flex;align-items:center;
  margin-bottom:calc(-1 * var(--v6-gap))}
/* DE SCENE.
   Stond eerst op de bewegende scene van de bron. De eigenaar vroeg zelf of dat wel mocht,
   en dat is een terechte vraag: een tekening is beschermd, ook al is een KLEUR dat niet.
   Nu staat er een pixellandschap waarvan hij zei dat we het mogen gebruiken. Geen merk,
   geen productbeeld, geen mascotte erin.
   De beweging is van onszelf: twee wolkenstroken die scripts/nb-pixel-scene.php uitrekent
   in zijn eigen palet (#E9BD61 / #00B1EC / #4090E0, onveranderd), en die er overheen
   drijven. */
/* De scene staat op zijn ONDERRAND: daar zit de wei, en die maakt het een landschap.
   GEMETEN: met een uitsnede op 62% viel de wei eruit en bleef er lucht met een boom over. */
.v6-pix-weide{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center 78%;image-rendering:pixelated}
/* Deze regel bestaat omdat een beeld met alleen een width door zijn height-ATTRIBUUT
   wordt uitgerekt. Maar de scene is er juist een die de hele band moet vullen, en
   :where(img) heeft dezelfde soortelijke zwaarte als .v6-pix-weide (allebei 0,1,0): de
   LAATSTE won, dus height:auto. GEMETEN op de rig 06-09-2026: op 390 px was de band 485
   hoog en het beeld 260 (390/1,5 -- zijn eigen verhouding); daaronder stond kaal blauw.
   Op 1440 viel het niet op omdat 960 toevallig hoger is dan de band van 660. De scene
   hoort er dus buiten. */
.v6-pix :where(img:not(.v6-pix-weide)){height:auto;display:block}
/* GEEN BEWEGING IN DE SCENE, EN DAT IS EEN KEUZE UIT METINGEN.
   Eerst legde ik twee eigen wolkenstroken erover; die werden op deze maat bleke blokken
   over de lucht. Daarna liet ik de scene zelf heel traag heen en weer schuiven; omdat het
   beeld (2688x1792, verhouding 1,5) op een band van 1440x660 (2,18) precies de volle
   breedte vult, kwam bij het schuiven zijn EIGEN rechterrand in beeld als een lichte
   streep. Een landschap dat in de breedte precies past kan niet schuiven zonder zijn rand
   te tonen. De beweging komt terug als er een beeld is dat ervoor gemaakt is. */
/* DE WIND IS TERUG, EN HIJ IS VAN ONSZELF.
   De eigenaar, 06-09-2026: "geen interactieve wolken meer te zien pff echt saai dit".
   Terecht: ik had de beweging eruit gehaald na twee mislukte pogingen, en een stilstaand
   plaatje was het resultaat. De twee eerdere pogingen faalden allebei op hetzelfde punt:
   ze SCHOVEN EEN BEELD DAT EEN RAND HEEFT. Een strook die naadloos rondloopt heeft die
   rand niet -- nb_wolken_svg() zet wat over de rand valt aan de andere kant terug -- en
   als je hem dan met background-repeat herhaalt en precies EEN tegelbreedte verschuift,
   is het beeld na de verschuiving gelijk aan het begin. Daar zit geen naad in, hoe lang
   je ook kijkt.
   Twee lagen op verschillende tegelbreedte en verschillende snelheid geven de diepte: de
   voorste wolken zijn groter en gaan sneller dan de achterste. Dat is de hele truc. */
/* De sluier maakt alleen de linkerkolom rustig; rechts blijft de scene onaangeroerd.
   Nodig omdat wit op zijn lichte blauw maar 2,47:1 haalt en leestekst 4,5:1 vraagt. */
.v6-pix-sluier{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,#0A4D7EE0 0%,#0A4D7E99 34%,#0A4D7E00 62%)}
/* GEEN NAADSTROOK MEER.
   De eigenaar, 06-09-2026: "waarom zie ik steeds die lelijke strepen bovenkant en
   onderkant pff!". De strook losse pixels moest de band in de pagina laten oplossen, maar
   op een echt scherm leest hij als twee vuile strepen langs de band. Een rechte rand is
   rustiger dan een opgeloste rand die je ziet. De band grenst nu gewoon aan het wit. */
.v6-pix-inner{position:relative;z-index:6;width:min(1160px,90vw);margin:0 auto;
  padding:clamp(72px,7vw,104px) 0}
.v6-pix-kolom{max-width:min(500px,52%)}
.v6-pix-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#0C3A5E;background:#FFFFFFE6;border-radius:999px;padding:6px 14px}
.v6-pix-h2{margin-top:16px;font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-.02em;color:#fff}
/* De accentstreep: het goud van zijn palet, onveranderd, zonder tekst erop. */
.v6-pix-streep{display:block;width:54px;height:4px;margin-top:14px;background:#E9BD61;border-radius:2px}
.v6-pix-sub{margin-top:12px;max-width:440px;font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:#F4FBFF}
.v6-pix-knoppen{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.v6-pix-k{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;
  font-size:15px;font-weight:600;text-decoration:none;transition:background .18s}
/* HET GOUD DRAAGT GEEN TEKST, EN DAT IS EEN HUISREGEL VAN DE EIGENAAR ZELF:
   "op beige kleur ALTIJD wit dus NOOIT zwart". Wit op #E9BD61 haalt maar 1,76:1, dus een
   gouden knop MET tekst kan niet: of de inkt is donker (tegen de regel) of hij is
   onleesbaar. AmberSurfaceInkTest ving dat meteen. Het goud staat er nu als accentstreep
   onder de kop, waar geen tekst overheen loopt, en de knop is weer wit met donkere inkt. */
.v6-pix-k-vol{background:#fff;color:#0C3A5E;border:1px solid #fff}
.v6-pix-k-rand{background:#0B3F6633;color:#fff;border:1px solid #FFFFFF8C}
.v6-pix-k-vol:hover{background:#F2CE80}
.v6-pix-k-rand:hover{background:#0B3F6659}
@media (max-width:1100px){
  .v6-pix{min-height:clamp(400px,48vw,500px)}
  .v6-pix-kolom{max-width:min(460px,60%)}
}
@media (max-width:760px){
  .v6-pix{min-height:auto;align-items:flex-start}
  .v6-pix-inner{padding:clamp(56px,14vw,84px) 0 clamp(170px,46vw,240px)}
  .v6-pix-kolom{max-width:none}
  .v6-pix-sluier{background:linear-gradient(180deg,#0A4D7EF2 0%,#0A4D7ED9 40%,#0A4D7E4D 72%,#0A4D7E00 100%)}
  .v6-pix-h2{font-size:clamp(26px,7.4vw,34px)}
  .v6-pix-sub{max-width:none}
}
.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}
/* GEMETEN 03-09 op 1024px: met nowrap + overflow:hidden werd "5 projecten, uit te breiden met extra
   slots" (285px) in een kolom van 245px hard afgeknipt (text-overflow werkt niet op een flex-kind):
   7 kenmerken op /, 2 op /plans, in het Engels 10 en 3. Letters worden nooit afgesneden: de tekst
   loopt om; op brede schermen past hij toch op een regel. */
.v6-plan li{white-space:normal;overflow:visible;font-size:.92rem;display:flex;align-items:baseline;gap:10px}
.v6-plan li [data-tip]{cursor:help}
/* Deze bullets staan in de tabvolgorde (anders is de uitleg alleen met de muis te bereiken),
   maar ze toonden GEEN focusring: gemeten met echte Tab-toetsen kwam je er blind op uit.
   Dezelfde tweelaagse ring als de rest van het portaal -- zwart met een witte scheidingsgloed,
   zodat hij op elke achtergrond leesbaar blijft. De twee lagen horen bij elkaar: eentje doven
   laat de andere de rand dichtverven. */
.v6-plan li [data-tip]:focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 2px #fff;border-radius:3px}
.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);
  /* GEMETEN 03-09 op /docs, /plans en /: met zijkolommen minmax(0,1fr) kreeg het rechterblok
     (364px: taalwissel + Inloggen + Aanmelden) op 1280px een kolom van 324px en op 1180px van
     278px; het stak naar links uit en lag 40 resp. 86px OVER de link "Prijzen". minmax(auto,1fr)
     houdt elke zijkolom minstens zo breed als haar inhoud: is er ruimte, dan zijn beide zijden
     gelijk (linkrij precies in het midden); is die er niet, dan wijkt alleen het midden iets uit.
     Niets wordt verborgen, niets overlapt. */
  display:grid;grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);align-items:center;
  /* GEMETEN na de kolomfix: op 1024-1280 raakten linkrij en rechterblok elkaar op 0px. Een vaste
     16px zou op 1024 de balk 3px laten overlopen; 1vw (10px op 1024, 12px op 1180) past overal. */
  column-gap:clamp(4px,1vw,16px);
  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}
/* Onder 1280px krimpen de links geleidelijk (16px/12px op 1280, 14px/6px rond 1080), zodat de
   drie kolommen samen ook op een laptop of iPad-landschap (1024-1180) binnen de balk blijven. */
header.nav .nav-link{padding:8px clamp(6px,calc(12px + (100vw - 1280px) * .03),12px);border-radius:10px;font-weight:500;font-size:clamp(14px,calc(16px + (100vw - 1280px) * .02),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:none}
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 > *,
  .imp-wegen > *,
  .imp-eerlijk-grid > *,
  .v6-imp-rij > *,
  .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 > *,
  .imp-wegen > *,
  .imp-eerlijk-grid > *,
  .v6-imp-rij > *{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),
  .imp-wegen > *:nth-child(2),
  .imp-eerlijk-grid > *:nth-child(2),
  .v6-imp-rij > *: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),
  .imp-wegen > *:nth-child(3),
  .imp-eerlijk-grid > *:nth-child(3),
  .v6-imp-rij > *: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),
  .imp-wegen > *:nth-child(n+4),
  .imp-eerlijk-grid > *:nth-child(n+4),
  .v6-imp-rij > *: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 .imp-wegen > *,
    html.nb-beweegt .imp-eerlijk-grid > *,
    html.nb-beweegt .v6-imp-rij > *,
    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 > *,
    html.nb-beweegt .imp-wegen > *,
    html.nb-beweegt .imp-eerlijk-grid > *,
    html.nb-beweegt .v6-imp-rij > *{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 > *,
  .imp-wegen > *,
  .imp-eerlijk-grid > *,
  .v6-imp-rij > *,
  .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 h2{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 h2{color:var(--nb-white,#F7F8FC);opacity:.85}