/* ==========================================================================
   LNT Advies — design system
   Complexiteit → helderheid. Donkere professionele basis, technologisch accent.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Base */
  --ink:        #050912;
  --ink-2:      #0A1120;
  --ink-3:      #111B2E;
  --ink-4:      #1A2740;

  --paper:      #FFFFFF;
  --paper-2:    #F5F7FA;
  --paper-3:    #ECF0F6;

  /* Text */
  --text:       #0B1220;
  --text-2:     #48546B;
  --text-3:     #5A6478;
  --on-dark:    #E9EFF9;
  --on-dark-2:  #9DACC4;
  --on-dark-3:  #8B99B0;

  /* Accent */
  --aqua:       #3DDCB8;
  --aqua-deep:  #0B7360;
  --blue:       #5B8CFF;
  --blue-deep:  #2246C7;
  --violet:     #9B7CFF;

  --flow:       linear-gradient(90deg, var(--blue) 0%, var(--aqua) 100%);
  --flow-soft:  linear-gradient(90deg, rgba(91,140,255,.16) 0%, rgba(61,220,184,.16) 100%);

  /* Lines */
  --line:       #DFE5EE;
  --line-2:     #CCD5E2;
  --line-dark:  rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.18);

  /* Focus */
  --focus:      #1A44D6;
  --focus-dark: #6FF0D2;
  --focus-ring: var(--focus);

  /* Contextafhankelijk: lichte ondergrond is de standaard, donkere
     oppervlakken zetten deze tokens één keer om. Omdat custom properties
     overerven, klopt elke knop ongeacht hoe diep hij genest is. */
  --ghost-fg:           var(--text);
  --ghost-border:       var(--line-2);
  --ghost-hover-bg:     var(--paper-2);
  --ghost-hover-border: var(--text-3);

  /* Radius & shadow */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(11,18,32,.05), 0 2px 8px rgba(11,18,32,.04);
  --shadow:    0 2px 4px rgba(11,18,32,.04), 0 12px 32px rgba(11,18,32,.07);
  --shadow-lg: 0 8px 24px rgba(11,18,32,.08), 0 32px 64px rgba(11,18,32,.10);

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);
  --maxw: 1180px;
  --header-h: 74px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;

  color-scheme: light;
}

/* ---------- Fallback-fonts ----------
   Google Fonts laadt na de eerste paint. Tot die tijd tekent de browser een
   lokale letter; met size-adjust neemt die dezelfde ruimte in als Inter en
   Manrope, zodat de pagina niet verspringt zodra de echte font binnenkomt. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 104%; ascent-override: 96%; descent-override: 28%; line-gap-override: 0%;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Elk ankerdoel landt onder de vaste header, niet erachter. */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .wordmark, .stat-value {
  font-family: "Manrope", "Manrope Fallback", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.08;
  color: inherit;
  margin: 0;
  text-wrap: balance;
}
/* 'balance' werkt voor grote koppen; in een smalle kaart verdeelt het een
   drieregelige h3 juist gelijkmatig over drie regels waar twee volstaan. */
h3, h4 { text-wrap: pretty; }

h1 { font-size: clamp(2.3rem, 1.25rem + 4.2vw, 4.05rem); }
h2 { font-size: clamp(1.85rem, 1.05rem + 2.9vw, 3.1rem); }
h3 { font-size: clamp(1.18rem, 1.02rem + .55vw, 1.42rem); letter-spacing: -.02em; line-height: 1.25; }
h4 { font-size: 1.02rem; letter-spacing: -.012em; line-height: 1.3; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
svg { display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: rgba(61,220,184,.30); color: var(--text); }

/* Focus */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Formuliervelden staan altijd op een licht vlak */
.field :where(input, textarea, select):focus-visible { outline-color: var(--focus); }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 780px; }
.container--wide { max-width: 1320px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }

.section--paper  { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--dark {
  background: var(--ink);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-2); }

.section--dark-grad {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(91,140,255,.20), transparent 62%),
    radial-gradient(760px 540px at 8% 100%, rgba(61,220,184,.13), transparent 60%),
    var(--ink);
  color: var(--on-dark);
}
.section--dark-grad h1, .section--dark-grad h2, .section--dark-grad h3 { color: #fff; }
.section--dark-grad p { color: var(--on-dark-2); }

.rule-top { border-top: 1px solid var(--line); }

/* Donkere oppervlakken: tokens één keer omzetten. Staat een nieuw donker
   blok hier niet bij, dan valt het terug op de lichte waarden — daarom is
   deze lijst de enige plek die bij een nieuw donker component bij moet. */
.section--dark, .section--dark-grad, .hero, .pagehero, .ctablock,
.footer, .header, .mobilenav, .card--dark, .viz-panel, .on-dark {
  --ghost-fg:           #fff;
  --ghost-border:       var(--line-dark-2);
  --ghost-hover-bg:     rgba(255,255,255,.07);
  --ghost-hover-border: rgba(255,255,255,.45);
  --focus-ring:         var(--focus-dark);
}

/* Hairline grid texture for dark sections */
.grid-texture::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
  pointer-events: none;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.split--text-right { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
@media (max-width: 900px) {
  .split, .split--text-right { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .765rem; font-weight: 650; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--flow); flex: none;
}
.section--dark .eyebrow, .section--dark-grad .eyebrow { color: var(--on-dark-3); }

.lead {
  font-size: clamp(1.06rem, .98rem + .42vw, 1.28rem);
  line-height: 1.6;
  color: var(--text-2);
}
.section--dark .lead, .section--dark-grad .lead { color: var(--on-dark-2); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 62px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head > h2 + .lead, .section-head > h1 + .lead { margin-top: 20px; }

.statement {
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem);
  letter-spacing: -.028em;
  line-height: 1.2;
  text-wrap: balance;
}
.statement .accent {
  background: var(--flow);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.section--dark .statement .accent, .section--dark-grad .statement .accent { }

.text-accent { color: var(--aqua-deep); }
.section--dark .text-accent, .section--dark-grad .text-accent { color: var(--aqua); }

.muted { color: var(--text-3); font-size: .93rem; }
.section--dark .muted, .section--dark-grad .muted { color: var(--on-dark-3); }

.placeholder {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .78rem; letter-spacing: .01em;
  color: var(--text-3);
  background: var(--paper-3);
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  padding: 3px 9px;
}
.section--dark .placeholder, .section--dark-grad .placeholder {
  color: var(--on-dark-3); background: rgba(255,255,255,.05); border-color: var(--line-dark-2);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11,18,32,.18); }
.btn:active { transform: translateY(0); }

.btn__arrow { flex: none; transition: transform .28s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--flow);
  color: #041018;
  font-weight: 700;
}
.btn--primary:hover { box-shadow: 0 12px 32px rgba(61,220,184,.32); }

.btn--ghost {
  background: transparent;
  color: var(--ghost-fg);
  border-color: var(--ghost-border);
}
.btn--ghost:hover {
  background: var(--ghost-hover-bg);
  border-color: var(--ghost-hover-border);
  box-shadow: none;
}

.btn--sm { padding: 11px 20px; font-size: .9rem; white-space: nowrap; }

@media (max-width: 680px) {
  .btn { width: 100%; justify-content: center; text-align: center; }
  .btn-row { gap: 12px; }
  .btn-row .btn { flex: 1 1 100%; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .95rem;
  color: var(--blue-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), gap .24s var(--ease-out);
}
.link-arrow:hover { border-color: currentColor; gap: 12px; }
.section--dark .link-arrow, .section--dark-grad .link-arrow { color: var(--aqua); }
/* Tweede actie in de hero: een link, geen tweede knop. Eén duidelijke
   actie en één rustige zijweg, in plaats van twee volzinnen onder elkaar. */
.link-arrow--hero {
  color: var(--on-dark);
  font-size: 1rem;
  padding: 12px 4px;
  border-bottom-color: transparent;
}
.link-arrow--hero:hover { color: #fff; border-color: var(--aqua); }
/* Op smalle schermen loopt de zin over twee regels; de pijl hoort dan
   achter het laatste woord, niet los aan de rechterrand. */
@media (max-width: 680px) {
  .link-arrow--hero { display: inline; line-height: 1.55; padding: 8px 0; }
  .link-arrow--hero .btn__arrow { display: inline; vertical-align: -2px; margin-left: 6px; }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5,9,18,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--header-h);
  transition: min-height .28s var(--ease);
}
/* Na de eerste schermhoogte: iets dichter, iets steviger. De pagina wint
   ruimte, en de rand maakt de grens met de inhoud voelbaar. */
.header[data-scrolled="true"] { background: rgba(5,9,18,.94); border-bottom-color: rgba(255,255,255,.14); }
.header[data-scrolled="true"] .header__inner { min-height: 62px; }
.header[data-scrolled="true"] .brand__mark { width: 30px; height: 30px; }
.brand__mark { transition: width .28s var(--ease), height .28s var(--ease); }
.header__brand { margin-right: auto; }

.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: #fff;
  padding: 6px 4px;
  border-radius: 10px;
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark {
  font-size: 1.32rem; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.brand__sub {
  font-size: .625rem; font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase; color: var(--on-dark-3); margin-top: 4px;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1180px) { .nav, .header__cta { display: none; } }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 10px 14px;
  font-size: .945rem; font-weight: 550;
  color: var(--on-dark-2);
  text-decoration: none;
  border-radius: 9px;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav__link[aria-current="page"] { color: #fff; }

.nav__item { position: relative; }
.nav__item--current > .nav__link { color: #fff; }
.nav__item--current > .nav__link::after,
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--flow);
}
.nav__link { position: relative; }

.nav__chev { transition: transform .22s var(--ease); flex: none; }
.nav__item[data-open="true"] .nav__chev { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: -12px;
  width: 460px;
  background: #0E1729;
  border: 1px solid var(--line-dark-2);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .24s var(--ease-out), visibility .2s;
}
.nav__item[data-open="true"] .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__panel-list { list-style: none; margin: 0; padding: 0; }
.nav__panel-list li { margin: 0; }
.nav__panel-link {
  display: block; padding: 12px 14px; border-radius: 12px;
  text-decoration: none; color: var(--on-dark);
  transition: background-color .18s var(--ease);
}
.nav__panel-link:hover { background: rgba(255,255,255,.07); }
/* 'U bent hier' in het uitklapmenu: een aqua streepje links, geen hover-vlak. */
.nav__panel-link[aria-current="page"] { position: relative; background: rgba(255,255,255,.04); }
.nav__panel-link[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 2px; background: var(--flow);
}
.nav__panel-all[aria-current="page"] { color: var(--on-dark-2); }
.mobilenav__sub[aria-current="page"] { color: #fff; }
.mobilenav__sub[aria-current="page"]::before { opacity: 1; }
.nav__panel-link strong { display: block; font-weight: 650; font-size: .95rem; }
.nav__panel-link span { display: block; font-size: .845rem; color: var(--on-dark-3); margin-top: 3px; line-height: 1.45; }

.nav__panel-all {
  margin-top: 6px; padding: 12px 14px; border-top: 1px solid var(--line-dark);
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--aqua); text-decoration: none;
}
.nav__panel-all:hover { gap: 12px; }

/* Burger */
.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-dark-2);
  border-radius: 12px; cursor: pointer; color: #fff;
}
@media (max-width: 1180px) { .burger { display: inline-flex; } }
.burger__bar {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  position: relative; transition: transform .26s var(--ease-out), background-color .2s;
}
.burger__bar::before, .burger__bar::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .26s var(--ease-out), top .2s var(--ease);
}
.burger__bar::before { top: -6px; }
.burger__bar::after { top: 6px; }
.burger[aria-expanded="true"] .burger__bar { background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after { top: 0; transform: rotate(-45deg); }

/* Mobile panel */
.mobilenav {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  height: calc(100dvh - var(--header-h));
  z-index: 99;
  background: var(--ink);
  color: var(--on-dark);
  overflow-y: auto;
  padding: 26px var(--gutter) 56px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .26s var(--ease), transform .3s var(--ease-out), visibility .26s;
}
.mobilenav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1181px) { .mobilenav { display: none; } }

.mobilenav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.02em;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}
.mobilenav__sub {
  display: block; padding: 11px 2px 11px 18px;
  font-size: .96rem; color: var(--on-dark-2); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative;
}
.mobilenav__sub::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px;
  background: var(--aqua); opacity: .7;
}

body[data-nav-open="true"] { overflow: hidden; }
.mobilenav__link, .mobilenav__sub { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-out), transform .36s var(--ease-out); }
.mobilenav[data-open="true"] .mobilenav__link,
.mobilenav[data-open="true"] .mobilenav__sub { opacity: 1; transform: none; }
.mobilenav[data-open="true"] > nav > :nth-child(2)  { transition-delay: .03s; }
.mobilenav[data-open="true"] > nav > :nth-child(3)  { transition-delay: .06s; }
.mobilenav[data-open="true"] > nav > :nth-child(4)  { transition-delay: .09s; }
.mobilenav[data-open="true"] > nav > :nth-child(5)  { transition-delay: .12s; }
.mobilenav[data-open="true"] > nav > :nth-child(6)  { transition-delay: .15s; }
.mobilenav[data-open="true"] > nav > :nth-child(7)  { transition-delay: .18s; }
.mobilenav[data-open="true"] > nav > :nth-child(8)  { transition-delay: .21s; }
.mobilenav[data-open="true"] > nav > :nth-child(9)  { transition-delay: .24s; }
.mobilenav[data-open="true"] > nav > :nth-child(n+10) { transition-delay: .27s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 700px at 72% -6%, rgba(91,140,255,.24), transparent 60%),
    radial-gradient(880px 620px at 4% 104%, rgba(61,220,184,.15), transparent 58%),
    var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(36px, 4.5vw, 60px);
  align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0,1fr); gap: 42px; }
}

.hero h1 { color: #fff; }
.hero h1 .accent {
  background: var(--flow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin-top: 26px;
  font-size: clamp(1.03rem, .97rem + .4vw, 1.2rem);
  line-height: 1.62;
  color: var(--on-dark-2);
  max-width: 58ch;
}
.hero__cta { margin-top: 36px; }
.hero__meta {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: .86rem; color: var(--on-dark-3);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); flex: none;
}

.hero__visual { position: relative; }

/* ---------- Flow visual (SVG) ---------- */
.flowviz { width: 100%; height: auto; overflow: visible; }
.flowviz .fv-grid line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.flowviz .fv-tangle { fill: none; stroke: rgba(157,172,196,.34); stroke-width: 1.2; }
.flowviz .fv-lane { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.flowviz .fv-out  { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.flowviz .fv-node { fill: #0A1120; stroke: rgba(157,172,196,.6); stroke-width: 1.4; }
.flowviz .fv-node-out { fill: var(--aqua); stroke: none; }
.flowviz .fv-hub { fill: none; stroke: var(--aqua); stroke-width: 1.4; }
.flowviz .fv-label {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--on-dark-3);
}

.flowviz .fv-dash {
  stroke-dasharray: 5 13;
  animation: fv-flow 2.6s linear infinite;
}
.flowviz .fv-dash--2 { animation-duration: 3.2s; animation-delay: -.7s; }
.flowviz .fv-dash--3 { animation-duration: 2.9s; animation-delay: -1.4s; }
.flowviz .fv-dash--4 { animation-duration: 3.6s; animation-delay: -2.1s; }
@keyframes fv-flow { to { stroke-dashoffset: -72; } }

.flowviz .fv-pulse { animation: fv-pulse 3.4s var(--ease) infinite; transform-origin: center; }
.flowviz .fv-pulse--2 { animation-delay: -1.1s; }
.flowviz .fv-pulse--3 { animation-delay: -2.2s; }
@keyframes fv-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.viz-panel {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(520px 320px at 70% 10%, rgba(91,140,255,.22), transparent 62%),
    radial-gradient(420px 300px at 5% 100%, rgba(61,220,184,.14), transparent 60%),
    var(--ink);
  border: 1px solid rgba(255,255,255,.08);
}
.viz-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(100% 90% at 50% 0%, #000 20%, transparent 85%);
  pointer-events: none;
}
.viz-panel svg { position: relative; z-index: 1; }
.viz-panel__caption {
  position: relative; z-index: 1;
  margin-top: 14px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-3); font-weight: 600;
}

/* Small inline flow glyphs */
.glyph { width: 46px; height: 46px; flex: none; }
.glyph .g-stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glyph .g-dot { fill: currentColor; }
.glyph .g-accent { stroke: var(--aqua-deep); }
.section--dark .glyph .g-accent, .section--dark-grad .glyph .g-accent { stroke: var(--aqua); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card p { color: var(--text-2); font-size: .975rem; }

.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.grid > .card, .grid > .case { height: 100%; }

.card--dark {
  background:
    radial-gradient(520px 320px at 78% 0%, rgba(91,140,255,.18), transparent 62%),
    radial-gradient(420px 320px at 0% 100%, rgba(61,220,184,.10), transparent 60%),
    var(--ink-2);
  border-color: rgba(255,255,255,.10);
  color: var(--on-dark);
}
.card--dark h3, .card--dark h4 { color: #fff; }
.card--dark p { color: var(--on-dark-2); }
.card--dark strong { color: #fff; }
.card--dark .muted { color: var(--on-dark-3); }
.card--dark:hover { border-color: var(--line-dark-2); }
.card--dark .link-arrow { color: var(--aqua); }

.card__icon { color: var(--text); margin-bottom: 20px; }
.card--dark .card__icon { color: #fff; }
.card h3 { margin-bottom: 12px; }

/* Card that is entirely a link */
a.card { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
a.card > h3 { margin-bottom: 12px; }
a.card h3 { transition: color .2s var(--ease); }
a.card:hover h3 { color: var(--blue-deep); }
.section--dark a.card:hover h3, .section--dark-grad a.card:hover h3 { color: var(--aqua); }

.card__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 20px; font-size: .9rem; font-weight: 650;
  color: var(--blue-deep);
  transition: gap .24s var(--ease-out);
}
a.card:hover .card__more { gap: 12px; }
.card--dark .card__more { color: var(--aqua); }

/* Numbered result card */
.result-card { position: relative; overflow: hidden; }
.result-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--flow); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.result-card:hover::after, .is-visible .result-card::after { transform: scaleX(1); }

/* ---------- Pain point list ---------- */
.pains { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pain {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
  margin: 0;
}
.pain:first-child { border-top: 1px solid var(--line-dark); }
.pain__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; font-weight: 500; color: var(--on-dark-3);
  padding-top: .35em; min-width: 26px;
}
.pain__text { font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem); color: var(--on-dark); font-weight: 500; }
.pain__note { display: block; font-size: .9rem; color: var(--on-dark-3); font-weight: 400; margin-top: 4px; }

/* ---------- Tech tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .845rem; font-weight: 550; color: var(--text-2);
  background: var(--paper);
  margin: 0;
}
.tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--flow); flex: none;
}
.section--dark .tag, .section--dark-grad .tag, .card--dark .tag {
  background: rgba(255,255,255,.04); border-color: var(--line-dark-2); color: var(--on-dark-2);
}

/* ---------- Process timeline ---------- */
.process { position: relative; display: grid; gap: 0; counter-reset: step; }
.process__track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 0;
  position: relative;
}
.process__track::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 21px; height: 2px;
  background: linear-gradient(90deg, rgba(91,140,255,.25), rgba(61,220,184,.85));
}
.step { position: relative; padding: 0 10px; text-align: center; }
.step__dot {
  position: relative; z-index: 2;
  width: 44px; height: 44px; margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-2);
  border: 1px solid var(--line-dark-2);
  color: #fff;
  font-family: ui-monospace, Menlo, monospace; font-size: .82rem; font-weight: 600;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease-out);
}
.step:hover .step__dot { border-color: var(--aqua); background: var(--ink-3); transform: translateY(-3px); }
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { font-size: .9rem; line-height: 1.55; }

@media (max-width: 900px) {
  .process__track { grid-template-columns: minmax(0,1fr); }
  .process__track::before {
    left: 21px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(91,140,255,.25), rgba(61,220,184,.85));
  }
  .step {
    text-align: left; padding: 0 0 26px 62px;
  }
  .step__dot { position: absolute; left: 0; top: 0; margin: 0; }
}

/* Detailed vertical steps (werkwijze page) */
.steps-detail { list-style: none; margin: 0; padding: 0; counter-reset: sd; }
.steps-detail > li {
  display: grid; grid-template-columns: 64px minmax(0,1fr);
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 42px) 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.steps-detail > li:last-child { border-bottom: 1px solid var(--line); }
.sd__index {
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.03em;
  background: var(--flow); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sd__body { max-width: min(70ch, 700px); }
.sd__body h3 { margin-bottom: 12px; }
.sd__body p { color: var(--text-2); }
.sd__list { margin: 16px 0 0; padding-left: 0; list-style: none; color: var(--text-2); font-size: .95rem; }
.sd__list li { position: relative; padding-left: 22px; margin-bottom: .45em; }
.sd__list li::before {
  content: ""; position: absolute; left: 2px; top: .7em;
  width: 8px; height: 2px; border-radius: 2px; background: var(--flow);
}
@media (max-width: 620px) {
  .steps-detail > li { grid-template-columns: minmax(0,1fr); gap: 10px; }
}

/* ---------- Case cards ---------- */
.case {
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.case__viz {
  background: var(--ink);
  padding: 26px 26px 0;
  position: relative;
  overflow: hidden;
}
.case__viz svg { width: 100%; height: auto; }
.case__body { padding: 26px clamp(22px,2.4vw,30px) 8px; }
.case__body p { color: var(--text-2); font-size: .96rem; }
.case__kicker {
  font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px; display: block;
}
.case__foot {
  padding: 16px clamp(22px,2.4vw,30px) 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* ---------- Quote ---------- */
.quote {
  border-left: 3px solid transparent;
  border-image: var(--flow) 1;
  padding: 6px 0 6px 26px;
  margin: 0;
}
.quote blockquote {
  margin: 0;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  letter-spacing: -.022em; line-height: 1.34;
  text-wrap: balance;
}
.quote figcaption { margin-top: 16px; font-size: .9rem; color: var(--text-3); }
.section--dark .quote figcaption, .section--dark-grad .quote figcaption { color: var(--on-dark-3); }

/* ---------- Feature list ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  margin: 0;
  font-size: .985rem;
  line-height: 1.6;
  color: var(--text-2);
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: .26em;
  width: 21px; height: 21px;
  border-radius: 50%;
  background-color: rgba(61,220,184,.14);
  border: 1px solid rgba(11,115,96,.38);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.7 8.5 9.6 3.6' fill='none' stroke='%230B7360' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}
.checklist li strong { color: var(--text); font-weight: 650; }
.section--dark .checklist li, .section--dark-grad .checklist li,
.card--dark .checklist li, .pagehero .checklist li { color: var(--on-dark-2); }
.section--dark .checklist li strong, .section--dark-grad .checklist li strong,
.card--dark .checklist li strong { color: #fff; }
.section--dark .checklist li::before, .section--dark-grad .checklist li::before,
.card--dark .checklist li::before {
  border-color: rgba(61,220,184,.5);
  background-color: rgba(61,220,184,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.7 8.5 9.6 3.6' fill='none' stroke='%233DDCB8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- M365 ecosystem ---------- */
.eco {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--line-dark);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden;
}
.eco__item--wide { grid-column: 1 / -1; }
.eco__item {
  background: var(--ink-2);
  padding: 24px 22px;
  transition: background-color .3s var(--ease);
}
.eco__item:hover { background: var(--ink-3); }
.eco__name { font-weight: 650; font-size: 1rem; color: #fff; margin-bottom: 6px; }
.eco__desc { font-size: .9rem; color: var(--on-dark-3); line-height: 1.55; margin: 0; }

/* ---------- Stat / highlight band ---------- */
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(26px,3vw,38px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band__item h3 { font-size: 1.02rem; margin-bottom: 8px; }
.band__item p { font-size: .92rem; color: var(--text-2); }

/* ---------- CTA block ---------- */
.ctablock {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(91,140,255,.26), transparent 62%),
    radial-gradient(620px 420px at 0% 100%, rgba(61,220,184,.18), transparent 60%),
    var(--ink);
  color: var(--on-dark);
  padding: clamp(36px, 5.4vw, 76px);
}
.ctablock h2 { color: #fff; }
.ctablock p { color: var(--on-dark-2); }
.ctablock__inner { position: relative; z-index: 2; max-width: 640px; }
.ctablock__viz {
  position: absolute; right: 8px; bottom: -10px; width: min(42%, 380px);
  opacity: .8; pointer-events: none;
}
@media (max-width: 860px) { .ctablock__viz { display: none; } }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--on-dark-2);
  padding-block: clamp(48px, 6vw, 82px) 32px;
  border-top: 1px solid var(--line-dark);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0,1fr); } }

.footer h2 {
  font-family: "Inter", sans-serif;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-dark-3); margin-bottom: 16px; font-weight: 650;
  line-height: 1.3;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--on-dark-2); text-decoration: none; font-size: .94rem; display: inline-block; padding: 4px 0; }
@media (max-width: 900px) { .footer li { margin-bottom: 4px; } .footer a { padding: 8px 0; } }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__about p { font-size: .94rem; color: var(--on-dark-3); max-width: 38ch; margin-top: 18px; }
.footer .muted, .ctablock .muted, .hero .muted, .pagehero .muted { color: var(--on-dark-3); }
.footer__bottom {
  margin-top: clamp(36px, 4vw, 56px); padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .85rem; color: var(--on-dark-3);
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; }
.field {
  display: grid;
  gap: 8px;
  align-content: start;
}
.field label { font-size: .9rem; font-weight: 600; color: var(--text); }
.field .hint { font-size: .82rem; color: var(--text-3); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 1rem; color: var(--text);
  padding: 13px 16px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  width: 100%;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--text-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(91,140,255,.18);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 620px) { .field--row { grid-template-columns: minmax(0,1fr); } }
.form__consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.form__consent input { width: 18px; height: 18px; margin-top: 3px; }
.form__consent label { font-weight: 400; font-size: .9rem; color: var(--text-2); }
.form__status {
  font-size: .93rem;
  line-height: 1.55;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left-width: 4px;
}
.form__status > :last-child { margin-bottom: 0; }
.form__status a { color: var(--blue-deep); font-weight: 600; }
.form__status--info  { border-left-color: var(--text-3); }
.form__status--busy  { border-left-color: var(--blue); }
.form__status--ok    { border-left-color: var(--aqua-deep); background: rgba(61,220,184,.10); }
.form__status--error { border-left-color: #B3261E; background: #FDF2F1; border-color: #F3D6D3; }
.form__status--error strong { color: #8C1D18; }

/* Bezig-toestand: knop blijft leesbaar, maar duidelijk buiten gebruik. */
.btn[aria-busy="true"], .btn:disabled {
  opacity: .72;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover { transform: none; box-shadow: none; }

.contact-link {
  color: var(--blue-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(34,70,199,.3);
  transition: border-color .2s var(--ease);
  overflow-wrap: anywhere;
}
.contact-link:hover { border-color: currentColor; }
.card--dark .contact-link, .section--dark .contact-link { color: var(--aqua); border-bottom-color: rgba(61,220,184,.35); }
.footer-contact { overflow-wrap: anywhere; }

/* ---------- Juridische / beleidspagina's ---------- */
.legal { max-width: 74ch; }
.legal > section { margin-bottom: clamp(36px, 4.5vw, 56px); scroll-margin-top: 92px; }
.legal > section:last-child { margin-bottom: 0; }
.legal h2 {
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px;
}
.legal h2 .num {
  background: var(--flow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.legal h3 { font-size: 1.05rem; margin: 28px 0 10px; }
.legal p, .legal li { color: var(--text-2); }
.legal p { margin-bottom: 14px; }
.legal a { color: var(--blue-deep); font-weight: 550; }

/* Inhoudsopgave */
.toc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.toc h2 {
  font-family: "Inter", sans-serif;
  font-size: .78rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 14px;
}
.toc ol {
  margin: 0; padding-left: 1.3em;
  columns: 2; column-gap: 32px;
  font-variant-numeric: tabular-nums;
}
.toc li { margin-bottom: 8px; break-inside: avoid; }
.toc a { color: var(--text); text-decoration: none; font-size: .94rem; font-weight: 500; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--aqua-deep); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* Definitielijst (verwerkingsverantwoordelijke) */
.deflist {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 24px; margin: 0;
}
.deflist dt { color: var(--text-3); font-size: .9rem; font-weight: 550; }
.deflist dd { margin: 0; color: var(--text); }
@media (max-width: 520px) {
  .deflist { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .deflist dd { margin-bottom: 12px; }
}

/* Tabellen — altijd in een eigen scrollcontainer */
.table-scroll { overflow-x: auto; margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.datatable {
  width: 100%; min-width: 520px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  font-size: .93rem;
}
.datatable caption {
  caption-side: top; text-align: left;
  font-size: .82rem; color: var(--text-3); padding-bottom: 8px;
}
.datatable th, .datatable td {
  text-align: left; padding: 12px 16px; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.datatable thead th {
  background: var(--paper-3);
  font-family: "Manrope", sans-serif; font-weight: 700; color: var(--text);
  font-size: .88rem;
}
.datatable tbody th { font-weight: 600; color: var(--text); }
.datatable td { color: var(--text-2); }
.datatable tr:last-child th, .datatable tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -.018em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 2px;
  background: var(--text-3); border-radius: 2px; transform: translateY(-50%);
}
.faq__item summary::before {
  content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 2px;
  background: var(--text-3); border-radius: 2px;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .26s var(--ease);
}
.faq__item[open] summary::before { transform: translateY(-50%) rotate(0deg); }
.faq__answer { padding: 0 44px 24px 0; color: var(--text-2); max-width: min(70ch, 700px); }
.faq__item summary { max-width: 78ch; }
/* Het antwoord schuift zacht open; <details> springt anders abrupt. */
.faq__item[open] .faq__answer { animation: faq-in .32s var(--ease-out) both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq__answer > :last-child { margin-bottom: 0; }

/* ---------- Page hero (inner pages) ---------- */
.pagehero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 82% -20%, rgba(91,140,255,.20), transparent 60%),
    radial-gradient(640px 420px at 0% 110%, rgba(61,220,184,.12), transparent 58%),
    var(--ink);
  color: var(--on-dark);
  padding-block: clamp(48px, 7vw, 92px) clamp(52px, 7vw, 96px);
}
.pagehero h1 { color: #fff; max-width: 17ch; }
.pagehero .lead { margin-top: 24px; max-width: 62ch; color: var(--on-dark-2); }
.pagehero__inner { position: relative; z-index: 2; }
.pagehero--split .pagehero__inner {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(32px,4vw,64px); align-items: center;
}
@media (max-width: 900px) { .pagehero--split .pagehero__inner { grid-template-columns: minmax(0,1fr); } }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .84rem; margin-bottom: 22px; list-style: none; padding: 0; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-3); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs li + li::before { content: "/"; color: var(--on-dark-3); opacity: .6; }

/* ---------- Reveal animation ---------- */
/* Alleen met JavaScript worden reveals eerst verborgen (html.js wordt door
   app.js gezet). Zonder script staat alle inhoud er gewoon. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
/* Wat bij het laden al in beeld staat, verschijnt direct: een inschuif-
   animatie op inhoud die er al hoort te zijn, voelt als vertraging. */
.reveal.is-visible.is-initial, .reveal-stagger.is-visible.is-initial > * { transition: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .flowviz .fv-dash { animation: none; stroke-dasharray: none; }
  .mobilenav__link, .mobilenav__sub { transition: none !important; }
  .faq__item[open] .faq__answer { animation: none; }
  .flowviz .fv-pulse { animation: none; opacity: .85; }
  .btn, .card, .case, .step__dot, .link-arrow, .card__more { transition: none !important; }
  .btn:hover, .card--lift:hover, .case:hover { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Paginawissel ----------
   Cross-document view transitions: de browser vervaagt de oude pagina naar
   de nieuwe in plaats van wit te flitsen. De header heeft een eigen naam en
   blijft daardoor staan terwijl de inhoud eronder wisselt. Browsers zonder
   ondersteuning negeren dit; reduced-motion zet het uit. */
@view-transition { navigation: auto; }
.header { view-transition-name: lnt-header; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: var(--ease);
}
::view-transition-old(lnt-header), ::view-transition-new(lnt-header) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Print ---------- */
@media print {
  .header, .mobilenav, .footer, .ctablock, .burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 16pt; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: clamp(30px, 4vw, 52px); }
.mb-m { margin-bottom: 26px; }
.maxw-60 { max-width: 60ch; }
.center { text-align: center; }
.flow-line {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-dark) 20%, var(--line-dark) 80%, transparent);
}

/* ---------- Artikelen (/kennis/<slug>) ---------- */
/* De donkere kop heeft zelf al onderruimte; daar nog een volle sectiemarge
   bovenop zet de aanhef onnodig laag op het scherm. */
.section--article { padding-block: clamp(30px, 3.4vw, 46px) clamp(48px, 6vw, 84px); }
/* Artikelkop: minder onderruimte dan een gewone paginakop, want de aanhef
   hoort dicht op de titel te staan — samen zijn ze de ingang van het stuk. */
.pagehero--article { padding-block: clamp(40px, 6vw, 76px) clamp(34px, 4vw, 52px); }

/* Eén kolom lopende tekst. De regellengte is bewust rond 68 tekens: langer
   maakt het moeilijk om met het oog de volgende regel terug te vinden. */
.prose { max-width: min(68ch, 700px); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose p {
  font-size: clamp(1.02rem, .99rem + .2vw, 1.115rem);
  line-height: 1.72;
  color: var(--text-2);
  margin-bottom: 1.15em;
}

/* De openingsalinea: in het bronbestand volledig vet, hier als aanhef. */
.prose__intro {
  font-size: clamp(1.14rem, 1.02rem + .6vw, 1.36rem) !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
  margin-bottom: 1.5em !important;
}
.prose p.prose__intro > strong:first-child {
  font-weight: 450;
  color: var(--text);
}

.prose h2 {
  font-size: clamp(1.4rem, 1.14rem + .95vw, 1.85rem);
  margin-top: 2.1em;
  margin-bottom: .6em;
  scroll-margin-top: 92px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.1rem;
  margin-top: 1.7em;
  margin-bottom: .5em;
}

/* Een alinea die met een vette zin begint, is een genummerd punt binnen een
   kop. Die krijgt lucht erboven, zodat de reeks als reeks leest. */
.prose p > strong:first-child { color: var(--text); font-weight: 650; }
.prose h2 + p > strong:first-child,
.prose p > strong:first-child { display: inline; }
.prose p:has(> strong:first-child) { margin-top: 1.5em; }
.prose h2 + p:has(> strong:first-child) { margin-top: 0; }

.prose ul {
  margin: 0 0 1.3em;
  padding-left: 0;
  list-style: none;
}
.prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .6em;
  font-size: 1.01rem;
  line-height: 1.68;
  color: var(--text-2);
}
.prose ul li::before {
  content: "";
  position: absolute; left: 4px; top: .72em;
  width: 7px; height: 2px; border-radius: 2px;
  background: var(--flow);
}
.prose ol { margin: 0 0 1.3em; padding-left: 1.3em; color: var(--text-2); }
.prose ol li { margin-bottom: .6em; line-height: 1.68; }

.prose em { font-style: italic; }
.prose a {
  color: var(--blue-deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose__rule {
  border: 0; border-top: 1px solid var(--line);
  margin: 2.4em 0;
}

/* Bronnen: kleiner, en de URL's mogen afbreken zonder de kolom op te rekken. */
.prose--sources { max-width: 74ch; }
.prose--sources h2 { font-size: 1.15rem; margin: 0 0 .9em; }
.prose--sources ul li {
  font-size: .91rem;
  line-height: 1.6;
  color: var(--text-3);
  margin-bottom: .75em;
}
.prose--sources ul li::before { background: var(--line-2); }
.prose--sources a { font-weight: 400; }