/* ═══════════════════════════════════════════════════════════════════
   Veyano — publieke informatiesite
   Stijlautoriteit: de mockups in het platform-repository
   (mockups/veyano/commercial website main.png en
   commercial website several pages.png). Diepnavy banden met een
   blauw/violette gloed, Inter, gradiëntknoppen, witte kaarten op een
   heel licht blauwgrijs vlak.

   Alles wat een kleur, maat of schaduw is staat als token op :root.
   Wijzig het daar, niet in een losse regel verderop.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Zelf gehoste fonts (geen verzoeken naar derden, bewust) ── */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E");
  /* Donkere banden — afgelezen uit de hero van de mockup */
  --navy-950: #020b1d;
  --navy-900: #061230;
  --navy-800: #0c1a3c;
  --navy-700: #16264f;
  --on-dark:   #e8eefb;
  --on-dark-2: #aeb9d3;
  --on-dark-3: #7d89a8;
  --line-dark: rgba(148, 170, 220, .16);

  /* Tekst op licht */
  --ink:    #0b1530;   /* koppen */
  --text:   #3a4663;   /* lopende tekst */
  --muted:  #5f6b87;
  --faint:  #8e99b3;

  /* Vlakken en lijnen */
  --white:     #ffffff;
  --surface:   #f5f8fe;   /* het lichtblauwgrijze sectievlak */
  --surface-2: #edf2fc;
  --line:      #e3e9f5;
  --line-soft: #eef2f9;

  /* Merk */
  --blue:      #1f6fff;
  --blue-600:  #155eef;
  --blue-700:  #1d4fd8;
  --sky:       #0a8bff;
  --cyan:      #2ad4ff;
  --violet:    #7b3bff;
  --violet-2:  #9b6bff;
  --wash:      #eef4ff;   /* actieve rij, geselecteerde staat */
  --grad:      linear-gradient(90deg, #0a8bff 0%, #2f63ff 52%, #6a3bff 100%);
  --grad-text: linear-gradient(90deg, #22a2ff 0%, #2a6bff 100%);

  /* Pastel icoontegels (proces, oplossingen) */
  --tile-blue:   #eaf2ff;  --tile-blue-fg:   #1f6fff;
  --tile-violet: #f1ecff;  --tile-violet-fg: #7b3bff;
  --tile-amber:  #fff4e0;  --tile-amber-fg:  #d98a00;
  --tile-mint:   #e2f8f0;  --tile-mint-fg:   #0e9f7b;

  /* Status — alleen voor status, altijd met tekst erbij */
  --ok: #15803d;   --ok-bg: #dcfce7;
  --warn: #8a5300; --warn-bg: #fef3c7;
  --err: #b91c1c;  --err-bg: #fee2e2;

  /* Vergelijkende cijfers: violet past bij de merkstijl; blauw is het
     lopende boekjaar. Goud blijft beschikbaar voor KPI-accenten. */
  --chart-compare: var(--violet);
  /* Staven als verloop, in de richting van de merkgradiënt (--grad). */
  --chart-cy-a: #22a2ff;
  --chart-cy-b: #2f63ff;
  --chart-py-a: var(--violet-2);
  --chart-py-b: #6a3bff;
  --gold-deep: #d4960e;

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Mono', Consolas, 'SFMono-Regular', monospace;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --shadow-card: 0 1px 2px rgba(11, 21, 48, .04), 0 14px 34px -16px rgba(20, 42, 110, .18);
  --shadow-pop:  0 2px 6px rgba(11, 21, 48, .06), 0 24px 48px -20px rgba(20, 42, 110, .28);

  --measure: 64ch;
  --gutter: clamp(16px, 4.6vw, 72px);
  --maxw: 1400px;
  --header-h: 76px;

  /* Iconen als masker — zo erven ze de tekstkleur en is er geen
     tekenset nodig die de Inter-subset niet heeft (→ zit er niet in). */
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.3l2.7 2.7L16 9.6'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z' fill='black'/%3E%3C/svg%3E");
  --i-replay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

::selection { background: var(--blue); color: #fff; }
img, svg { max-width: 100%; }

/* ── Typografie ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 4.4vw, 3.85rem); line-height: 1.06; letter-spacing: -.032em; }
h2 { font-size: clamp(1.7rem, 2.5vw, 2.2rem); }
h3 { font-size: 1.08rem; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
p  { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.accent {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.04rem, 1.35vw, 1.16rem);
  line-height: 1.62;
  color: var(--text);
  max-width: var(--measure);
}

.eyebrow {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: 16px;
}
.eyebrow--dark { color: var(--on-dark-2); font-weight: 500; letter-spacing: .32em; }

/* ── Indeling ───────────────────────────────────────────────── */
.wrap { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(60px, 7vw, 96px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--rule { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--panel {
  background: var(--surface);
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
}
.section--ink {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(31, 111, 255, .22), transparent 60%),
    radial-gradient(50% 80% at 0% 100%, rgba(123, 59, 255, .18), transparent 60%),
    var(--navy-950);
  color: var(--on-dark-2);
  overflow: hidden;
}
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lede { color: var(--on-dark-2); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 999; border-radius: 8px;
}
.skip-link:focus { left: 12px; top: 12px; }

.section-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 + .lede, .section-head h2 + p { margin-top: 16px; }
.center { text-align: center; margin-inline: auto; }

/* ── Merk-lockup ────────────────────────────────────────────────
   Het lint IS de V: direct gevolgd door «eyano». Het lint is breed en
   steekt met zijn rechterarm boven de e uit — zie het logobestand.
   Dat het lint klein als een golf leest is bedoeld. Paden en kleuren
   van ribbon.svg nooit aanpassen. */
.brand {
  --brand-size: 28px;
  display: inline-flex; align-items: baseline;
  font-size: var(--brand-size);
  line-height: 1;
  text-decoration: none; white-space: nowrap;
  color: var(--ink);
}
.brand__mark {
  display: block;
  height: 1.08em; width: auto;   /* 2,94em breed: viewBox 1673 x 615 */
  flex-shrink: 0;
  /* De onderkant van een img valt op de basislijn (align-items:
     baseline): de punt van de V staat op de basislijn, zoals in het
     logobestand. Het lint ligt bovenop de tekst (z-index). */
  position: relative; z-index: 1;
}
.brand__word {
  font-weight: 700;
  letter-spacing: -.045em;
  /* De e begint op ~65% van de lintbreedte (logobestand: 64%): onder de
     opgaande arm, de staart gaat over e en y heen. Gemeten met
     lockmeasure.py (DPR 3): x-hoogte 52% van de linthoogte (logo 55%),
     geen overlap tussen lint en letters. */
  margin-left: -1.08em;
  color: inherit;
}
.brand:hover { color: inherit; }

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
/* Op de startpagina ligt de kop transparant over de donkere hero */
.site-header--over {
  position: absolute; left: 0; right: 0;
  background: transparent; border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff;
}
.site-header__inner {
  max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; gap: clamp(24px, 3vw, 56px);
}
.site-header--over .brand { color: #fff; }

.nav { flex: 1; display: flex; align-items: center; gap: 24px; }
.nav__list { list-style: none; display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); margin-left: clamp(0px, 2vw, 40px); }
.nav__list > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .92rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: none; border: none; cursor: pointer;
  padding: 10px 2px;
  transition: color .15s;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--blue-600); }
.site-header--over .nav__link { color: #dfe6f6; }
.site-header--over .nav__link:hover, .site-header--over .nav__link[aria-current="page"] { color: #fff; }
.nav__chev {
  width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat;
  transition: transform .18s;
  opacity: .8;
}

/* Uitklapmenu: werkt met muis (hover), toetsenbord (focus-within) en
   zonder JavaScript. site.js voegt alleen aria-expanded en Escape toe. */
.nav__menu {
  position: absolute; top: 100%; left: -18px;
  min-width: 250px;
  padding-top: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility 0s .16s;
  z-index: 10;
}
.nav__menu-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  display: grid;
}
.nav__menu a {
  display: block; padding: 10px 12px; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.nav__menu a small { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); margin-top: 1px; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--wash); color: var(--blue-700); }
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu,
.nav__item--menu.is-open .nav__menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s, transform .16s;
}
.nav__item--menu.is-closed .nav__menu { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.nav__item--menu:hover .nav__chev,
.nav__item--menu:focus-within .nav__chev,
.nav__item--menu.is-open .nav__chev { transform: rotate(180deg); }

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.nav__login { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav__login:hover { color: var(--blue-600); }
.site-header--over .nav__login { color: #dfe6f6; }
.site-header--over .nav__login:hover { color: #fff; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border-radius: 11px;
  background: none; border: 1px solid var(--line); cursor: pointer;
  color: var(--ink);
  align-items: center; justify-content: center;
}
.site-header--over .nav-toggle { border-color: rgba(255,255,255,.22); color: #fff; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  position: relative; transition: transform .2s, background .2s;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 20px;
    box-shadow: 0 24px 40px -24px rgba(11, 21, 48, .35);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-header--over .nav { background: var(--navy-900); border-color: var(--line-dark); }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line-soft); }
  .site-header--over .nav__list > li { border-color: var(--line-dark); }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1rem; }
  .nav__chev { display: none; }
  /* Op mobiel staan de submenu's gewoon open, ingesprongen */
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding: 0 0 10px 12px; min-width: 0;
  }
  .nav__menu-panel { background: none; border: none; box-shadow: none; padding: 0; }
  .nav__menu a { padding: 8px 0; color: var(--muted); }
  .site-header--over .nav__menu a { color: var(--on-dark-2); }
  .nav__menu a small { display: none; }
  .nav__actions { margin: 16px 0 0; flex-direction: column; align-items: stretch; gap: 12px; }
  .nav__login { padding: 8px 0; }
  .nav__actions .btn { justify-content: center; }
}

/* ── Knoppen ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font); font-size: .95rem; font-weight: 600; line-height: 1.2;
  padding: 14px 23px; border-radius: 13px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 12px 20px; font-size: .94rem; border-radius: 12px; }
.btn--primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(31, 111, 255, .65);
}
.btn--primary:hover { color: #fff; box-shadow: 0 14px 32px -10px rgba(70, 70, 255, .7); }
.btn--ghost { background: var(--white); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: #c8d3ea; color: var(--ink); }
.btn--onink, .btn--outline-dark {
  border-color: rgba(150, 120, 255, .55);
  background: rgba(255, 255, 255, .03);
  color: #fff;
}
.btn--onink:hover, .btn--outline-dark:hover { border-color: rgba(190, 170, 255, .9); color: #fff; background: rgba(255,255,255,.07); }
.btn__arrow, .btn__play, .link-arrow::after {
  display: inline-block; width: 1.05em; height: 1.05em; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
  transition: transform .18s;
}
.btn__play { width: 1.3em; height: 1.3em; -webkit-mask-image: var(--i-play); mask-image: var(--i-play); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .94rem; text-decoration: none; color: var(--blue-600);
}
.link-arrow::after { content: ''; width: 1em; height: 1em; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Lijst met vinkjes in een cirkel — het opsommingsteken van deze site */
.checks { list-style: none; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .2em;
  width: 1.2em; height: 1.2em; background: var(--blue);
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.section--ink .checks li { color: var(--on-dark-2); }
.section--ink .checks li::before { background: #7fa8ff; }

/* ── Startpagina: hero ──────────────────────────────────────── */
.hero-home {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40% 55% at 82% 62%, rgba(20, 90, 255, .32), transparent 70%),
    radial-gradient(30% 40% at 100% 30%, rgba(0, 140, 255, .25), transparent 70%),
    radial-gradient(35% 45% at 38% 70%, rgba(40, 60, 255, .16), transparent 70%),
    linear-gradient(180deg, #020a1b 0%, #010d1f 70%, #02112a 100%);
  color: var(--on-dark-2);
  padding: calc(var(--header-h) + clamp(16px, 2.2vw, 34px)) 0 0;
}
.hero-home::after {   /* zachte overgang naar de lichte strook eronder */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, .35), transparent);
}
.hero-home__grid {
  display: grid; gap: 40px 24px; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1040px) {
  .hero-home__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
  .hero-home h1 .line { white-space: nowrap; }
  .hero-home__visual { margin-top: -30px; max-width: 700px; justify-self: end; width: 100%; }
}
.hero-home__copy { position: relative; z-index: 2; padding: 4px 0 clamp(28px, 3.4vw, 50px); }
.hero-home h1 { color: #fff; margin-bottom: 22px; font-size: clamp(2.15rem, 3.2vw, 3rem); }
.hero-home h1 .line { display: block; }
.hero-home .lede { color: #c9d3e8; max-width: 34em; font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.55; }
.hero-home__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.hero-home__perks {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin-top: 30px; font-size: .95rem; color: #c9d3e8;
}
.hero-home__perks li { display: inline-flex; align-items: center; gap: 9px; }
.hero-home__perks li::before {
  content: ''; width: 1.15em; height: 1.15em; background: #8fb2ff; flex-shrink: 0;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}

.hero-home__visual { position: relative; z-index: 1; padding: 8px 0 26px; }
@media (min-width: 1040px) { .hero-home__visual { margin-right: calc(var(--gutter) * -0.2); } }

.shot-note--dark { position: relative; z-index: 1; color: rgba(200, 212, 240, .6); text-align: right; margin-top: 4px; }

/* ── Hero-beeld: laptop met lint (AI-gegenereerd) en de app erop ───
   Het beeld loopt rechts van de pagina af en vervaagt aan de randen in
   de hero. Het scherm in het beeld zelf toont pakketten die niet
   gekoppeld zijn; .hero-shot__screen dekt het daarom altijd volledig af. */
.hero-shot {
  position: relative;
  container-type: inline-size;
  width: 160%; margin-left: -31%;
}
@media (min-width: 1040px) {
  .hero-shot { width: 196%; margin: -46px 0 -9% -58%; }
}
.hero-shot__img {
  display: block; width: 100%; height: auto;
  /* Linkerrand vervaagt vóór de tekstkolom: geen tekst op het lint. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 4%, #000 24%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 9%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 4%, #000 24%, #000 92%, transparent),
    linear-gradient(180deg, transparent, #000 9%, #000 92%, transparent);
  mask-composite: intersect;
}
/* De app in perspectief op het scherm. Afgeleid van de schermhoeken in
   het bronbeeld (1920 x 819 px): 736.6,203.4 / 1542.2,144.3 /
   1511.6,636.8 / 681.1,611.2 — net buiten de rand van het getekende
   scherm, zodat niets ervan doorschemert. Beeldverhouding 1,98 : 1
   (gekalibreerd op de ring in het bronbeeld, die rond hoort te zijn).
   De homografie is ontleed in translate + perspective + rotaties + een
   lineaire matrix, zodat alle lengtes in cqw staan en het geheel zonder
   JavaScript meeschaalt met het beeld. Ander beeld = opnieuw afleiden. */
.hero-shot__screen {
  position: absolute; left: 0; top: 0;
  width: 42.7083cqw; height: 21.5699cqw;
  container-type: inline-size;
  transform-origin: 0 0;
  transform:
    translate(38.3626cqw, 10.5926cqw) rotate(-154.1691deg) perspective(177.6983cqw)
    rotateY(45deg) scaleX(1.414214) rotate(154.1691deg)
    matrix(0.815382, -0.059821, -0.129048, 0.949242, 0, 0);
}
.hero-shot__screen .app { aspect-ratio: auto; height: 100%; border-radius: .6cqw; }
.hero-shot__screen::after {   /* glasreflectie */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: .6cqw;
  background: linear-gradient(112deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .015) 38%, transparent 38.2%);
}

.app {
  aspect-ratio: 16 / 9.2;
  background: radial-gradient(70% 60% at 80% 0%, rgba(31, 111, 255, .08), transparent 60%), #040b19;
  border-radius: .9cqw;
  overflow: hidden;
  display: grid; grid-template-columns: 21% 1fr;
  font-size: 1.58cqw; line-height: 1.32;
  color: #c4cee4;
  user-select: none;
}
.app__side {
  background: #060f22;
  border-right: 1px solid rgba(140, 165, 220, .08);
  padding: 2em 1em;
  display: flex; flex-direction: column; gap: .3em;
}
.app__brand { display: flex; align-items: baseline; font-size: 1.3em; color: #fff; margin: 0 0 1.4em .5em; }
.app__brand img { height: 1.08em; width: auto; position: relative; z-index: 1; }
.app__brand span { font-weight: 700; letter-spacing: -.045em; margin-left: -1.08em; }
.app__nav { display: flex; align-items: center; gap: .8em; padding: .65em .8em; border-radius: .6em; color: #aeb9d3; }
.app__nav i { width: 1.05em; height: 1.05em; border: 1.5px solid currentColor; border-radius: .28em; opacity: .7; flex-shrink: 0; }
.app__nav.is-active { background: rgba(31, 111, 255, .16); color: #fff; }
.app__nav.is-active i { border-color: #5ab0ff; opacity: 1; }

.app__main { padding: 1.3em 1.6em 1.5em; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1em; min-width: 0; }
.app__top { display: flex; align-items: center; gap: 1em; }
.app__crumb { color: #6f7b98; }
.app__search {
  margin-left: auto; width: 34%;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(140, 165, 220, .1);
  border-radius: .7em; padding: .55em .9em; color: #6f7b98;
}
.app__bell { width: 1.2em; height: 1.2em; border: 1.5px solid #8d98b4; border-radius: .6em .6em .25em .25em; }
.app__avatar {
  width: 2.3em; height: 2.3em; border-radius: 50%;
  background: linear-gradient(135deg, #3aa0ff, #2a6bff);
  color: #fff; font-weight: 600; font-size: .9em;
  display: grid; place-items: center;
}
.app__project { font-size: 1.12em; color: #fff; font-weight: 500; }
.app__project small { color: #6f7b98; font-weight: 400; font-size: .85em; margin-left: .5em; }

.app__cards { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 1em; min-height: 0; }
.app-card {
  background: linear-gradient(180deg, rgba(22, 36, 70, .7), rgba(12, 22, 46, .7));
  border: 1px solid rgba(140, 165, 220, .1);
  border-radius: 1em;
  padding: 1.1em 1.2em;
  min-width: 0;
}
.app-card__title { color: #fff; font-weight: 500; font-size: 1.04em; margin-bottom: .9em; }

.ring-row { display: flex; align-items: center; gap: 1.2em; }
.ring {
  width: 5.6em; height: 5.6em; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(from 200deg, #2ad4ff 0%, #1f6fff 68%, rgba(255, 255, 255, .07) 68% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .7em), #000 calc(100% - .68em));
  mask: radial-gradient(farthest-side, transparent calc(100% - .7em), #000 calc(100% - .68em));
}
.ring-wrap { position: relative; }
.ring-wrap b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 1.3em; }
.dots { list-style: none; display: grid; gap: .55em; font-size: .82em; white-space: nowrap; }
.dots li { display: flex; align-items: center; gap: .6em; }
.dots li::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: var(--c, #2ad4ff); }

.risk { list-style: none; display: grid; gap: .7em; }
.risk li { display: flex; align-items: baseline; gap: .6em; font-size: .86em; color: #aeb9d3; white-space: nowrap; }
.risk b { font-size: 1.9em; font-weight: 600; min-width: 1.3em; line-height: 1; }
.risk .r-high b { color: #ff5a6a; }
.risk .r-mid b  { color: #ffc23d; }
.risk .r-low b  { color: #31d6b0; }

.bars { display: flex; align-items: flex-end; gap: .5em; height: 6.2em; padding: 0 .1em; border-bottom: 1px solid rgba(140, 165, 220, .15); }
.bars span { flex: 1; display: flex; align-items: flex-end; gap: .14em; height: 100%; }
.bars i { flex: 1; border-radius: .2em .2em 0 0; background: linear-gradient(180deg, #3d8bff, #1f5fff); }
.bars i + i { background: linear-gradient(180deg, #a77bff, #7b3bff); }
.bars-x { display: flex; justify-content: space-between; color: #5f6b87; font-size: .72em; margin-top: .4em; padding: 0 .3em; }
.app-legend { display: flex; gap: 1.2em; margin-top: .7em; font-size: .85em; }
.app-legend span { display: inline-flex; align-items: center; gap: .45em; }
.app-legend span::before { content: ''; width: .6em; height: .6em; border-radius: 50%; background: #3d8bff; }
.app-legend span + span::before { background: #9b6bff; }

.app-sources { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; }
.app-src {
  display: flex; align-items: center; gap: .5em;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(140, 165, 220, .1);
  border-radius: .7em; padding: .6em .55em; min-width: 0;
}
.app-src i {
  width: 2.3em; height: 2.3em; border-radius: .5em; flex-shrink: 0;
  display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .62em; color: #fff;
  background: var(--c, #1f6fff);
}
.app-src > div { min-width: 0; }
.app-src b { display: block; color: #fff; font-weight: 500; font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-src small { display: block; color: #6f7b98; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Controleproces ─────────────────────────────────────────── */
.process { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1040px) { .process { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.process .lede { font-size: 1rem; color: var(--text); margin: 18px 0 30px; max-width: 34em; }
.steps { list-style: none; display: grid; gap: 34px; }
@media (min-width: 720px) {
  .steps { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: start; }
}
.step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.step__tile {
  width: 76px; height: 76px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--tile-blue); color: var(--tile-blue-fg);
  margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(31, 111, 255, .06);
}
.step__tile svg { width: 34px; height: 34px; }
.step__tile--violet { background: var(--tile-violet); color: var(--tile-violet-fg); }
.step__tile--mint   { background: var(--tile-mint);   color: var(--tile-mint-fg); }
.step__tile--amber  { background: var(--tile-amber);  color: var(--tile-amber-fg); }
.step h3 { font-size: 1.04rem; margin-bottom: 8px; }
.step p { font-size: .94rem; color: var(--muted); max-width: 22ch; }
.step-arrow {
  align-self: start; margin-top: 30px;
  width: 38px; height: 16px; color: #64748b;
}
@media (max-width: 719px) { .step-arrow { display: none; } }

/* ── Kaarten (oplossingen, voorbeelden) ─────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.solutions { display: grid; gap: 22px; align-items: center; }
@media (min-width: 1040px) { .solutions { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; } }
.solutions .lede { font-size: 1rem; margin-top: 16px; }
.solutions__cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .solutions__cards { grid-template-columns: repeat(3, 1fr); } }
.sol { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; }
.sol:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.sol__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tile-blue); color: var(--blue-600); margin-bottom: 8px;
}
.sol__icon svg { width: 22px; height: 22px; }
.sol__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sol__title::after {
  content: ''; width: 18px; height: 18px; background: var(--ink); flex-shrink: 0;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}
.sol p { font-size: .93rem; color: var(--muted); }
.sol .link-arrow { margin-top: auto; padding-top: 6px; }

/* Twee- en driekoloms rijen */
.split { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.split--top { align-items: start; }
.split--flip > :first-child { order: 2; }
@media (max-width: 959px) { .split--flip > :first-child { order: 0; } }
.split h2 + p, .split h2 + .lede { margin-top: 16px; }
.split .checks { margin-top: 22px; }
.text-2 { color: var(--text); max-width: 42ch; }

.duo { display: grid; gap: 22px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo .card { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; }
.duo .card { min-width: 0; }
.duo .shot { overflow-x: auto; }
.split > *, .process > *, .solutions > *, .hero-home__grid > * { min-width: 0; }
.duo .card h3 { font-size: 1.3rem; margin-bottom: 10px; letter-spacing: -.02em; }
.duo .card > p:not(.eyebrow) { color: var(--muted); font-size: .96rem; max-width: 46ch; }
.duo .chart text { font-size: 7px; }
.duo .card .checks { margin: 16px 0 22px; font-size: .93rem; }
.duo .shot { margin-top: auto; }

/* ── Bestaande componenten op andere pagina's (ronde 2 herontwerpt
   die pagina's; tot dan krijgen ze hier een nette stijl) ─────── */
.hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); background:
    radial-gradient(50% 80% at 100% 0%, rgba(31, 111, 255, .08), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(123, 59, 255, .06), transparent 70%); }
.hero h1 { margin-bottom: 22px; }
.hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
.rise-1 { animation-delay: .05s } .rise-2 { animation-delay: .14s }
.rise-3 { animation-delay: .23s } .rise-4 { animation-delay: .32s }
@keyframes rise { to { opacity: 1; transform: none; } }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose ul, ul.prose { margin: 1.1em 0; padding-left: 0; list-style: none; }
.prose li, ul.prose > li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.prose li::before, ul.prose > li::before {
  content: ''; position: absolute; left: 0; top: .22em;
  width: 1.15em; height: 1.15em; background: var(--blue);
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.section--ink ul.prose > li::before { background: #7fa8ff; }

.grid { display: grid; gap: 20px; }
@media (min-width: 720px)  { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.cell {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 3vw, 30px);
  display: flex; flex-direction: column; gap: 10px;
}
.cell__num { font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--blue-700); }
.cell h3 { font-size: 1.14rem; }
.cell p { font-size: .95rem; color: var(--muted); }

.specs { border-top: 1px solid var(--line); }
.specs__row { display: grid; gap: 6px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .specs__row { grid-template-columns: 220px 1fr; } }
.specs__key { font-size: .74rem; font-weight: 600; letter-spacing: .12em; color: var(--blue-700); text-transform: uppercase; padding-top: 3px; }
.specs__val { font-size: .98rem; color: var(--text); }
.section--ink .specs { border-color: var(--line-dark); }
.section--ink .specs__row { border-color: var(--line-dark); }
.section--ink .specs__key { color: #8fb2ff; }
.section--ink .specs__val { color: var(--on-dark-2); }

.statement {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 700; letter-spacing: -.025em;
  line-height: 1.16;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
}
.statement em {
  font-style: normal;
  background: linear-gradient(90deg, #4cb1ff, #8f7bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Formulieren ────────────────────────────────────────────── */
.form { display: grid; gap: 18px; max-width: 580px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: clamp(20px, 3vw, 32px); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .88rem; font-weight: 500; color: var(--ink); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .97rem;
  padding: 12px 14px;
  border: 1px solid #d5ddec; border-radius: 10px;
  background: var(--white); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(31, 111, 255, .12);
}
.field textarea { min-height: 130px; resize: vertical; }
.field__hint { font-size: .8rem; color: var(--faint); font-weight: 400; }
.form__note { font-size: .84rem; color: var(--muted); max-width: 52ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-size: .93rem; padding: 12px 15px; border-radius: 10px; display: none; }
.form__status.is-ok  { display: block; background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--ok); }
.form__status.is-err { display: block; background: #fef2f2; border: 1px solid #fecaca; color: var(--err); }

/* ── CTA-band ───────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(50% 120% at 85% 50%, rgba(31, 111, 255, .3), transparent 70%),
    radial-gradient(40% 100% at 10% 100%, rgba(123, 59, 255, .22), transparent 70%),
    var(--navy-950);
  border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px);
  color: var(--on-dark-2);
  display: grid; gap: 28px; align-items: center;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.3fr auto; } }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band p { margin-top: 12px; color: var(--on-dark-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(31, 111, 255, .12), transparent 70%),
    #020817;
  color: var(--on-dark-3);
  padding-block: clamp(52px, 6vw, 80px) 32px;
  font-size: .92rem;
}
.footer__grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.7fr repeat(4, 1fr); } }
.footer__about { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__about { grid-column: auto; } }
.footer__about .brand { --brand-size: 30px; color: #fff; margin-bottom: 18px; }
.footer__about p { max-width: 34ch; color: var(--on-dark-2); }
.site-footer h4 {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 16px;
}
.site-footer a { color: #d4dcef; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__links { list-style: none; display: grid; gap: 10px; }
.footer__promise {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: .84rem; color: var(--on-dark-2);
}
.footer__promise::before {
  content: ''; width: 1.1em; height: 1.1em; background: #7fa8ff; flex-shrink: 0;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.footer__bottom {
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .82rem; color: var(--on-dark-3);
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCTBEELD — geabstraheerde weergave van de applicatie
   ───────────────────────────────────────────────────────────────────
   Deze blokken imiteren een schermafdruk zonder er een te zijn. Dat is
   bewust: de werkelijke indeling van de applicatie hoort niet op een
   publieke site. Labels zijn algemeen, het merendeel van de tekst is
   vervangen door grijze balkjes (.sk), en alleen de getallen die het
   verhaal dragen zijn leesbaar.

   Regel bij wijzigen: voeg hier nooit een echte schermafdruk toe en
   neem geen werkelijke schermindeling over.
   ═══════════════════════════════════════════════════════════════════ */

.shot {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  user-select: none;
}
.shot__bar {
  background: var(--navy-900);
  height: 36px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
}
.shot__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--grad); flex-shrink: 0; }
.shot__bar .sk { background: rgba(200, 212, 240, .28); }
.shot__bar-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.shot__tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--white); padding: 0 12px; overflow: hidden; }
.shot__tab { padding: 10px 13px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 11.5px; }
.shot__tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue); font-weight: 600; }

.shot__body { padding: 14px; display: grid; gap: 14px; }
.shot__panel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.shot__panel-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.sk { display: inline-block; height: 7px; border-radius: 4px; background: #e3e9f5; vertical-align: middle; }
.sk--xs { width: 26px; } .sk--s { width: 46px; } .sk--m { width: 74px; }
.sk--l { width: 108px; } .sk--xl { width: 148px; }
.sk--dark { background: #cbd5e6; }

.shot-table { width: 100%; border-collapse: collapse; }
.shot-table th {
  background: var(--surface); text-align: left; padding: 8px 12px;
  font-size: 9.5px; letter-spacing: .1em; font-weight: 600;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.shot-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: var(--text); font-size: 11.5px; white-space: nowrap; }
.shot-table tr:last-child td { border-bottom: none; }
.shot-table .num { text-align: right; font-size: 11.5px; color: var(--ink); }
.shot-table .code { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.shot-table tr.is-flagged td { background: #fffaeb; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill--ok   { background: var(--ok-bg); color: var(--ok); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--err  { background: var(--err-bg); color: var(--err); }
.pill--busy { background: var(--wash); color: var(--blue-700); }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.kpi { background: var(--white); padding: 11px 13px; }
.kpi__label { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.kpi__value { font-size: 18px; color: var(--ink); margin-top: 3px; font-weight: 700; letter-spacing: -.02em; }
.kpi__value--ok { color: var(--ok); }
.kpi__value--gold { color: var(--gold-deep); }

/* Grafieken op een licht vlak: blauw = lopend boekjaar, goud =
   vergelijkend cijfer (gecontroleerd op kleurenblindheid). */
.chart { display: block; width: 100%; height: auto; }
.chart text { font-family: var(--font); fill: var(--faint); font-size: 8.5px; }
.chart .chart__axis { stroke: var(--line); stroke-width: 1; }
.chart .chart__grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .bar-cy { fill: var(--blue); fill: url(#chart-cy); }
.chart .bar-py { fill: var(--chart-compare); fill: url(#chart-py); }
.chart .chart__stop-cy-a { stop-color: var(--chart-cy-a); }
.chart .chart__stop-cy-b { stop-color: var(--chart-cy-b); }
.chart .chart__stop-py-a { stop-color: var(--chart-py-a); }
.chart .chart__stop-py-b { stop-color: var(--chart-py-b); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 12px 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.legend .lg-cy { background: linear-gradient(180deg, var(--chart-cy-a), var(--chart-cy-b)); }
.legend .lg-py { background: linear-gradient(180deg, var(--chart-py-a), var(--chart-py-b)); }

.flowmap__arrow { color: var(--faint); flex-shrink: 0; }

.shot-note { margin-top: 12px; font-size: .76rem; color: var(--faint); letter-spacing: .01em; }

/* ── Controlespoor (signature-element) ──────────────────────── */
.trail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.trail__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(90deg, rgba(31,111,255,.05), rgba(123,59,255,.04));
}
.trail__title { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700); }
.trail__amount { font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.trail__body { padding: 8px 0; }
.trail__step {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px;
  padding: 13px 22px; border: none; background: none; width: 100%;
  text-align: left; cursor: pointer; font: inherit; position: relative;
  transition: background .15s;
}
.trail__step:hover { background: var(--surface); }
.trail__step[aria-selected="true"] { background: var(--wash); }
.trail__step:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.trail__step::before { content: ''; position: absolute; left: 38px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.trail__step:first-child::before { top: 50%; }
.trail__step:last-child::before  { bottom: 50%; }
.trail__node {
  position: relative; z-index: 1; justify-self: center;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--white); border: 2px solid #b9c4da;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.trail__step[aria-selected="true"] .trail__node {
  background: var(--grad); border-color: transparent; transform: scale(1.3);
  box-shadow: 0 0 0 4px rgba(31, 111, 255, .15);
}
.trail__label { font-size: .97rem; color: var(--text); }
.trail__step[aria-selected="true"] .trail__label { color: var(--ink); font-weight: 600; }
.trail__sub { display: block; font-size: .8rem; color: var(--faint); margin-top: 1px; font-weight: 400; }
.trail__val { font-size: .93rem; color: var(--muted); white-space: nowrap; }
.trail__step[aria-selected="true"] .trail__val { color: var(--blue-700); font-weight: 600; }
.trail__foot {
  border-top: 1px solid var(--line); padding: 16px 22px; background: var(--surface);
  font-size: .9rem; color: var(--muted); min-height: 78px;
}
.trail__foot strong { color: var(--ink); }

/* ── Werkzaamheden ──────────────────────────────────────────── */
.procs { display: grid; gap: 16px; }
@media (min-width: 700px)  { .procs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .procs { grid-template-columns: repeat(3, 1fr); } }
.proc {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 20px 22px; display: grid; gap: 5px; align-content: start;
  position: relative;
}
.proc__area { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.proc__name { font-size: 1.04rem; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.proc__what { font-size: .9rem; color: var(--muted); }
.procs__note { margin-top: 24px; color: var(--muted); font-size: .94rem; display: flex; align-items: center; gap: 10px; }
.procs__note::before {
  content: ''; width: 1.2em; height: 1.2em; background: var(--blue); flex-shrink: 0;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}

/* ── Bronnen en koppelingen ─────────────────────────────────────
   Bewust woordmerken in plaats van logo's: KVK en CBS zijn
   overheidsinstanties. Alleen RobotX draagt zijn eigen beeldmerk
   (zie CONTENT.md §1d). */
.sources { display: grid; gap: 14px; }
@media (min-width: 760px) { .sources { grid-template-columns: 1fr 1fr; } }
.source {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
}
.source__mark {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 11px;
  background: var(--tile-blue); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  overflow: hidden;
}
.source__mark img { max-width: 100%; max-height: 100%; display: block; }
.source__mark--logo { padding: 10px; background: #fff3ed; }
.source__name { font-size: .98rem; font-weight: 600; color: var(--ink); }
.source__what { font-size: .87rem; color: var(--muted); margin-top: 2px; }
.sources__label { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; }
.sources__label:first-child { margin-top: 0; }

.formats { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 560px) { .formats { grid-template-columns: 1fr 1fr; } }
.formats li {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size: .93rem; color: var(--ink); font-weight: 500;
}
.formats i {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  background: var(--tile-blue); color: var(--blue-700);
}
.formats small { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; }

/* ── Doorloop van een opdracht ──────────────────────────────────
   De kolom «wie» is het punt: bijna alles staat op Platform, de
   laatste stap op U. */
.walk__steps { padding: 6px 0; }
.walk__step {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 13px;
  width: 100%; padding: 10px 20px;
  border: none; background: none; font: inherit; text-align: left;
  cursor: pointer; position: relative; transition: background .2s;
}
.walk__step:hover { background: var(--surface); }
.walk__step:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.walk__step[aria-current="step"] { background: var(--wash); }
.walk__step::before { content: ''; position: absolute; left: 32px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.walk__step:first-child::before { top: 50%; }
.walk__step:last-child::before { bottom: 50%; }
.walk__node {
  position: relative; z-index: 1; justify-self: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 600; color: var(--faint);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.walk__step.is-done .walk__node { background: var(--ok-bg); border-color: #86efac; color: var(--ok); }
.walk__step[aria-current="step"] .walk__node {
  background: var(--grad); border-color: transparent; color: #fff; transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(31, 111, 255, .14);
}
.walk__label { font-size: .94rem; color: var(--muted); transition: color .2s; }
.walk__step.is-done .walk__label { color: var(--text); }
.walk__step[aria-current="step"] .walk__label { color: var(--ink); font-weight: 600; }

.walk__who {
  font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.walk__who--client   { background: #eef1f6; color: #5f6b87; }
.walk__who--platform { background: var(--wash); color: var(--blue-700); }
.walk__who--user     { background: var(--warn-bg); color: var(--warn); }
/* RobotX in zijn eigen merkoranje — het is hun merk, en het verschil
   met «Platform» is juist het punt. */
.walk__who--robotx { background: #fff3ed; color: #c2410c; display: inline-flex; align-items: center; gap: 5px; }
.walk__who--robotx img { width: 13px; height: auto; display: block; }

.walk__foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 15px 20px; min-height: 78px; font-size: .9rem; color: var(--muted);
}
.walk__foot strong { color: var(--ink); }
.walk__replay {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 14px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink); transition: border-color .15s, color .15s;
}
.walk__replay::before {
  content: ''; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--i-replay) center / contain no-repeat; mask: var(--i-replay) center / contain no-repeat;
}
.walk__replay:hover { border-color: #c8d3ea; color: var(--blue-700); }
.walk__legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; }
.walk__legend span { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); }
.walk__note { margin-top: 18px; color: var(--muted); font-size: .94rem; max-width: 42ch; }

/* ── NL/EN ──────────────────────────────────────────────────── */
.lang { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .lang { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lang__badges { display: flex; gap: 10px; margin-bottom: 22px; }
.lang__badges span {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: #fff;
  padding: 6px 12px; border-radius: 9px; border: 1px solid rgba(150, 170, 255, .35);
  background: rgba(255, 255, 255, .05);
}
.lang__badges span:first-child { background: var(--grad); border-color: transparent; }

/* ── Prijsweergave ──────────────────────────────────────────── */
.price, .cell .price {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); line-height: 1.1; margin: 6px 0 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.price__unit { font-size: .84rem; font-weight: 400; color: var(--faint); letter-spacing: 0; }

/* ── Prijsberekening ────────────────────────────────────────────
   De tarieven staan als data-tarief op de invoervelden. Let op: de
   bedragen staan óók in de tariefkaarten — wijzig ze op beide plaatsen. */
.calc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); overflow: hidden; }
.calc__head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 18px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.calc__body { padding: 18px; }
.calc__grid { width: 100%; border-collapse: collapse; }
.calc__grid th { text-align: left; padding: 0 8px 9px 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.calc__grid th:not(:first-child) { text-align: center; }
.calc__grid th:last-child { width: 110px; }
.calc__grid .calc__group th { padding: 12px 0 4px; border-top: 1px solid var(--line); text-align: left; color: var(--blue-700); font-size: .68rem; }
.calc__grid .calc__group:first-child th { border-top: 0; padding-top: 0; }
.calc__amount { color: var(--ink); font-size: .88rem; font-weight: 600; text-align: center; white-space: nowrap; }
.calc__grid td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line-soft); }
.calc__grid td:not(:first-child) { text-align: center; }
.calc__tier { font-size: .93rem; color: var(--ink); font-weight: 500; }
.calc__tier small { display: block; font-size: .74rem; color: var(--faint); font-weight: 400; }
.calc input[type="number"] {
  width: 72px; font: inherit; font-size: .95rem; text-align: center; padding: 8px 5px;
  border: 1px solid #d5ddec; border-radius: 9px; background: var(--white); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield;
}
.calc input[type="number"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 111, 255, .12); }
.calc__out { border-top: 1px solid var(--line); background: var(--surface); padding: 16px 18px; }
.calc__line { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; color: var(--text); padding: 3px 0; }
.calc__line span:last-child { white-space: nowrap; }
.calc__line--muted { color: var(--faint); }
.calc__line--discount { color: var(--ok); }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.calc__total-label { font-size: .95rem; font-weight: 600; color: var(--ink); }
.calc__total-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.calc__per { font-size: .8rem; color: var(--faint); text-align: right; margin-top: 3px; }
.calc__hint { font-size: .8rem; color: var(--faint); margin-top: 12px; }
.calc__noscript { padding: 18px; color: var(--muted); font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════
   RONDE 2 — binnenpagina's
   ═══════════════════════════════════════════════════════════════════ */

.nav__link.is-current { color: var(--blue-600); }
.site-header--over .nav__link.is-current { color: #fff; }

/* ── Paginakop (licht) ──────────────────────────────────────── */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(44px, 5.5vw, 80px) clamp(36px, 4vw, 56px);
  background:
    radial-gradient(45% 80% at 100% 0%, rgba(31, 111, 255, .09), transparent 70%),
    radial-gradient(35% 70% at 0% 100%, rgba(123, 59, 255, .06), transparent 70%),
    var(--white);
}
.page-hero h1 { font-size: clamp(2.15rem, 3.5vw, 3.2rem); max-width: 19ch; margin-bottom: 20px; }
.page-hero .lede { max-width: 38em; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Paginakop (donker) — prijzen, klantverhalen. De kop ligt erover. */
.page-hero--dark {
  background:
    radial-gradient(40% 70% at 85% 20%, rgba(31, 111, 255, .26), transparent 70%),
    radial-gradient(35% 60% at 10% 100%, rgba(123, 59, 255, .16), transparent 70%),
    var(--navy-950);
  color: var(--on-dark-2);
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
}
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .lede { color: #c9d3e8; }
.page-hero__art {
  position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: 2%; width: min(64vw, 1000px); max-width: none; height: auto;
  filter: drop-shadow(0 0 50px rgba(40, 110, 255, .35));
}
@media (max-width: 899px) { .page-hero__art { opacity: .45; top: 14%; width: 130vw; right: -50%; } }

/* ── Tabstrip (productpagina) ───────────────────────────────────
   Zonder JavaScript is er geen strip en staan alle panelen onder
   elkaar; site.js zet .is-enhanced en verbergt de niet-actieve. */
.tabs__list {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: 4px 2px 8px;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs:not(.is-enhanced) .tabs__list { display: none; }
.tabs__tab {
  position: relative; flex-shrink: 0;
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--ink);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  padding: 17px 26px; border-radius: 16px;
  transition: background .15s, color .15s;
}
.tabs__tab:hover { background: var(--surface); }
.tabs__tab[aria-selected="true"] { background: var(--wash); color: var(--blue-700); font-weight: 600; }
.tabs__tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 24%; right: 24%; bottom: 7px; height: 2px;
  border-radius: 2px; background: var(--blue);
}
.tabs__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tabs__panel[hidden] { display: none; }
.tabs:not(.is-enhanced) .tabs__panel + .tabs__panel { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.tabs__panel:focus-visible { outline: none; }
.panel-row + .panel-row { margin-top: clamp(48px, 6vw, 80px); }
.panel-row h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); max-width: 20ch; }
.tabs__panel .text-2 { font-size: 1.05rem; max-width: 44ch; margin-top: 16px; }
.tabs__panel .checks { font-size: 1rem; }
.panel-row .link-arrow { margin-top: 24px; }

/* Grid kleine kaarten (analyses e.d.) */
.minis { display: grid; gap: 16px; }
@media (min-width: 640px) { .minis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .minis--3 { grid-template-columns: repeat(3, 1fr); } }
.mini {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.mini h3 { font-size: 1rem; margin-bottom: 6px; }
.mini p { font-size: .9rem; color: var(--muted); }
.mini__icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tile-blue); color: var(--blue-600); margin-bottom: 14px;
}
.mini__icon svg { width: 20px; height: 20px; }
.mini__icon--violet { background: var(--tile-violet); color: var(--tile-violet-fg); }
.mini__icon--mint { background: var(--tile-mint); color: var(--tile-mint-fg); }
.mini__icon--amber { background: var(--tile-amber); color: var(--tile-amber-fg); }

/* ── Productkaart — gestileerde weergave, geen schermafdruk ──── */
.pcard {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden; user-select: none;
  font-size: 14px; line-height: 1.4;
}
.pcard__rail {
  background: var(--navy-900); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.pcard__rail img { width: 28px; height: auto; margin-bottom: 8px; }
.pcard__rail i { width: 14px; height: 14px; border: 1.6px solid rgba(190, 205, 240, .45); border-radius: 4px; }
.pcard__rail i.is-active { border-color: #5ab0ff; background: rgba(90, 176, 255, .18); }
.pcard__main { padding: 14px 16px 18px; min-width: 0; }
.pcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pcard__pill {
  margin-left: auto; background: var(--grad); color: #fff; border-radius: 20px;
  padding: 5px 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pcard__sheet {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(20, 42, 110, .3);
  padding: 6px 0; overflow: hidden;
}
.pcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px 14px; font-weight: 600; color: var(--ink); font-size: 15px;
  border-bottom: 1px solid var(--line-soft);
}
.pcard__head small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.pcard__check {
  width: 20px; height: 20px; border-radius: 50%; background: #18b4e8; flex-shrink: 0;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.pcard__row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
}
.pcard__row:last-child { border-bottom: none; }
.pcard__tile {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--c, var(--blue));
}
.pcard__row b { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__row small { display: block; color: var(--muted); font-size: 11.5px; }
.pcard__meta { color: var(--muted); font-size: 11.5px; white-space: nowrap; text-align: right; }
.pcard__bar { height: 6px; border-radius: 4px; background: var(--line-soft); overflow: hidden; margin-top: 6px; }
.pcard__bar span { display: block; height: 100%; background: var(--grad); border-radius: 4px; }
.pcard .shot-table td, .pcard .shot-table th { padding-inline: 16px; }
.pcard-wrap .shot-note { margin-top: 12px; }

/* ── Prijzen ────────────────────────────────────────────────── */
.page-hero--pricing { padding-bottom: clamp(160px, 15vw, 220px); }
.tiers {
  position: relative; z-index: 2;
  display: grid; gap: 22px; align-items: stretch;
  margin-top: calc(-1 * clamp(110px, 11vw, 150px));
}
@media (min-width: 920px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-pop);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column;
}
.tier__label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-700); }
.tier h2 { font-size: 1.75rem; margin-top: 6px; }
.tier__for { color: var(--muted); font-size: .95rem; margin-top: 6px; min-height: 3.2em; }
.tier__rates { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); margin: 18px 0 4px; }
.tier__rate { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 8px 12px 0; }
.tier__rate + .tier__rate { border-left: 1px solid var(--line); padding-left: 14px; }
.tier__rate span { color: var(--blue-700); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tier__rate strong { color: var(--ink); font-size: clamp(1.65rem, 2.2vw, 2rem); letter-spacing: -.03em; line-height: 1.25; }
.tier__rate small { color: var(--faint); font-size: .78rem; }
.tier .price__unit { font-size: .9rem; }
.tier .btn { width: 100%; margin: 22px 0 24px; }
.tier .checks { font-size: .94rem; }
.tier--featured { border: 2px solid var(--blue); border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 36px; }
@media (min-width: 920px) { .tier--featured { margin-top: 0; } }
.tier__flag {
  position: absolute; left: -2px; right: -2px; bottom: 100%;
  background: var(--grad); color: #fff; text-align: center;
  font-size: .8rem; font-weight: 600; padding: 8px 12px;
  border-radius: 14px 14px 0 0;
}
.btn--dark { background: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-800); color: #fff; }
.btn--soft { background: var(--wash); color: var(--blue-700); }
.btn--soft:hover { background: #e2ecff; color: var(--blue-700); }

.facts { display: grid; gap: 18px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.fact .fact__key { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.fact .fact__val { font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin: 6px 0 6px; }
.fact p { font-size: .92rem; color: var(--muted); }
.fine { margin-top: 18px; font-size: .88rem; color: var(--muted); }

/* ── Integraties ────────────────────────────────────────────── */
.int-group + .int-group { margin-top: clamp(44px, 5vw, 64px); }
.int-group__head { margin-bottom: 18px; }
.int-group__head h2 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.int-group__head p { color: var(--muted); font-size: .95rem; max-width: 60ch; margin-top: 6px; }
.int-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .int-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .int-grid { grid-template-columns: repeat(3, 1fr); } }
.int {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.int__mark {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em; color: #fff;
  background: var(--c, var(--blue));
}
.int__mark--soft { background: var(--tile-blue); color: var(--blue-700); }
.int__mark--logo { background: #fff3ed; padding: 11px; }
.int__mark img { width: 100%; height: auto; display: block; }
.int__name { font-weight: 650; color: var(--ink); font-size: 1rem; }
.int__kind { color: var(--text); font-size: .9rem; margin-top: 1px; }
.int__sub { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.int--pending { background: var(--surface); box-shadow: none; border-style: dashed; }
.badge {
  display: inline-block; margin-top: 8px;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; background: var(--warn-bg); color: var(--warn);
}

.callout { display: grid; gap: 22px; align-items: stretch; }
@media (min-width: 900px) { .callout { grid-template-columns: 1fr 1fr; } }
.callout .img-frame { min-height: 240px; }
.callout__card { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); }
.callout__card h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); max-width: 18ch; }
.callout__card p { color: var(--muted); margin: 12px 0 24px; max-width: 42ch; }
.callout__card .btn { align-self: flex-start; }

/* ── Oplossingen ────────────────────────────────────────────── */
.jump { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 760px) { .jump { grid-template-columns: repeat(3, 1fr); } }
.jump a {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); padding: 14px 18px; color: var(--ink); font-weight: 600;
  transition: transform .18s, box-shadow .18s;
}
.jump a:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); color: var(--ink); }
.jump a::after {
  content: ''; margin-left: auto; width: 18px; height: 18px; background: var(--blue);
  -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat;
}
.jump .sol__icon { margin: 0; }
.anchor { scroll-margin-top: calc(var(--header-h) + 16px); }
.note {
  margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9rem; color: var(--muted); max-width: 52ch;
}
.section--surface .note { background: var(--white); }
.split .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Beeldvlakken ───────────────────────────────────────────── */
.img-frame { border-radius: var(--r-lg); overflow: hidden; background: var(--navy-900); box-shadow: var(--shadow-pop); }
.img-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Klantverhalen (placeholder) ────────────────────────────── */
.story-hero { padding-bottom: clamp(130px, 12vw, 180px); }
.story-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .story-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.story-hero blockquote p {
  font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  color: #fff; max-width: 22ch;
}
.story-hero blockquote footer { margin-top: 18px; color: var(--on-dark-2); }
.story-hero .img-frame { aspect-ratio: 4 / 3; }
.story {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(90px, 9vw, 130px));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); padding: clamp(24px, 3.4vw, 44px);
}
.story__head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.story__logo {
  width: 72px; height: 72px; border-radius: 14px; flex-shrink: 0;
  background: var(--navy-900); color: #cfe0ff; display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em;
}
.story__head h2 { font-size: 1.5rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag {
  font-size: .8rem; font-weight: 500; color: var(--text);
  background: var(--surface-2); border-radius: 8px; padding: 5px 11px;
}
.story__intro { margin-top: 18px; color: var(--text); max-width: 70ch; }
.stats { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.stat b { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: var(--tile-mint-fg); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .92rem; }
.quote { margin-top: 24px; background: var(--surface); border-radius: var(--r); padding: 24px 26px; }
.quote p { font-size: 1.12rem; color: var(--ink); max-width: 60ch; }
.quote footer { margin-top: 10px; color: var(--muted); font-size: .92rem; }

/* ── Kennis (placeholder) ───────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 34px; }
.pill-btn {
  font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer;
  padding: 10px 20px; border-radius: 22px;
  background: var(--surface-2); color: var(--ink); border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.pill-btn:hover { background: #e2eafa; }
.pill-btn[aria-pressed="true"] { background: var(--grad); color: #fff; }
.articles { display: grid; gap: 20px; }
@media (min-width: 720px) { .articles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .articles { grid-template-columns: 1.1fr 1fr 1fr; }
  .article--featured { grid-row: span 2; }
}
.article {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); overflow: hidden;
  text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s;
}
.article:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); color: inherit; }
.article[hidden] { display: none; }
.article__img { aspect-ratio: 3 / 2; background: var(--navy-900); }
.article__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article--featured .article__img { aspect-ratio: auto; flex: 1; min-height: 220px; }
.article__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.article--featured .article__body { flex: 0; }
.article__meta { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--muted); }
.article__meta .tag { background: var(--wash); color: var(--blue-700); font-weight: 600; }
.article h3 { font-size: 1.05rem; line-height: 1.35; }
.article__go {
  margin-top: auto; width: 20px; height: 20px; background: var(--blue);
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}

/* ── Beveiliging / over ons / contact ──────────────────────── */
.cell__icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tile-blue); color: var(--blue-600); margin-bottom: 6px;
}
.cell__icon svg { width: 22px; height: 22px; }
.contact-card { padding: 22px 24px; margin-top: 30px; max-width: 440px; }
.contact-card h3 { font-size: 1rem; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: .94rem; }
@media (min-width: 960px) { .page-hero .form { margin-left: auto; } }

/* CTA-band met beeld (rechts het lint, links tekst). Beeldachtergrond
   ≈ #00081F, de band is --navy-950: het masker laat de linkerrand in
   de band oplopen, zodat er geen naad zichtbaar is. */
.cta-band--img { background: var(--navy-950); }
.cta-band__img {
  position: absolute; z-index: -1; right: 0; top: 0; height: 100%; width: 70%; max-width: none;
  object-fit: cover; object-position: 75% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
}
@media (max-width: 899px) { .cta-band__img { width: 100%; opacity: .45; } }

/* ── Ronde 2: kleine hulpregels ─────────────────────────────── */
.section--flush-top { padding-top: 0; }
.pcard__sheet--flush { padding: 0; }
.shot-table td.indent { padding-left: 30px; }
.minis__title { margin-bottom: 24px; }
.page-hero--404 { min-height: 62vh; display: flex; align-items: center; }
.page-hero--404 .wrap { width: 100%; }

/* Productpanelen: gevuld vinkje (zoals in de productmockup) */
.tabs__panel .checks li::before {
  background: var(--blue); border-radius: 50%;
  -webkit-mask: none; mask: none;
  width: 1.25em; height: 1.25em; top: .15em;
}
.tabs__panel .checks li::after {
  content: ''; position: absolute; left: .27em; top: .42em;
  width: .72em; height: .72em; background: #fff;
  -webkit-mask: var(--i-tick) center / contain no-repeat; mask: var(--i-tick) center / contain no-repeat;
}
.tabs__panel .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
@media (max-width: 959px) { .tabs__panel .split { grid-template-columns: 1fr; } }

/* CTA-band met beeld: tekst en knoppen links, het lint rechts */
.cta-band--img { grid-template-columns: 1fr; gap: 24px; }
.cta-band--img > div:not(.cta-band__actions) { max-width: min(560px, 52%); }
@media (max-width: 899px) { .cta-band--img > div:not(.cta-band__actions) { max-width: none; } }

/* Tariefkaarten: los vinkje, zoals in de prijzenmockup */
.tier .checks li::before { -webkit-mask-image: var(--i-tick); mask-image: var(--i-tick); width: 1.05em; height: 1.05em; top: .25em; }