/*
Theme Name: Phrona
Theme URI: https://phrona.dev
Author: Geoffrey Bergman
Description: Landing- en kennisthema voor Phrona — één AI-platform, oneindig veel toepassingen. Organisch, editorial, aards-groen.
Version: 1.54.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phrona
Tags: one-column, custom-colors, custom-logo, custom-menu, editor-style, block-styles, wide-blocks, translation-ready
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --bg: #FAFAF8;
  --bg-warm: #F8F8F5;
  --surface: #F2F3EF;
  --card: #EEF1EC;
  --card-2: #F5F3EE;
  --white: #FFFFFF;

  --ink: #202825;
  --ink-2: #202522;
  --body: #323A36;
  --muted: #68716C;
  --muted-2: #7A817C;

  --green: #536D62;
  --green-soft: #6D8E7E;
  --green-line: #789387;
  --teal: #6693A0;

  --terra: #A86F5C;
  --terra-soft: #B47762;
  --beige: #F1E7DF;
  --sand: #D9BBA7;

  --gold: #C49A61;
  --mauve: #A9717A;

  --line: #DADDD7;
  --line-soft: #E4E7E1;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --wrap-narrow: 760px;
  /* Leesbreedte voor lopende tekst, LOS van de containerbreedte. Zie de uitleg
     bij .entry-content: die twee waren hier één getal (760px) en dat maakte de
     container te krap voor alles wat geen alinea is. */
  --measure: 74ch;
  --gutter: clamp(20px, 4vw, 48px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(32, 40, 37, .04), 0 6px 16px -8px rgba(32, 40, 37, .08);
  --shadow-md: 0 2px 4px rgba(32, 40, 37, .03), 0 18px 40px -22px rgba(32, 40, 37, .18);
  --shadow-lg: 0 30px 70px -40px rgba(32, 40, 37, .35);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.05;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.6rem, 5.2vw, 4.15rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.12rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--terra); }

strong { font-weight: 600; color: var(--ink); }

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

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

::selection { background: var(--green); color: #fff; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  background: #fff;
  clip: auto;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-weight: 600;
  height: auto;
  left: 16px;
  padding: 12px 20px;
  top: 16px;
  width: auto;
  z-index: 9999;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   3. Layout helpers
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1440px; }

.section { padding-block: clamp(52px, 6vw, 88px); }
.section--tight { padding-block: clamp(36px, 4vw, 64px); }
.section--surface { background: var(--bg-warm); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: max(12px, .75rem);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #4E6B5C;
  margin: 0 0 1.4rem;
}

.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 34em;
}

.accent { color: var(--terra); }

.section__head {
  max-width: 42rem;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
  --btn-bg: var(--green);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  /* 44px is de ondergrens voor een vinger. padding .82em gaf 43px (gemeten op
     390px op /, /prijzen/ en de 404) -- net één pixel te laag, en dus net
     genoeg om naast te tikken. min-height is robuuster dan padding: het werkt
     ook als de tekst kleiner wordt of het label op twee regels valt. */
  min-height: 44px;
  padding: .82em 1.5em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(32, 40, 37, .45);
}
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: #47605a; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: #fff;
  border-color: #c6ccc4;
}

.btn--terra { background: var(--terra); color: #fff; }
.btn--terra:hover { background: #96604f; }

.btn--sm { padding: .6em 1.1em; font-size: .84rem; }
.btn--lg { padding: .95em 1.85em; font-size: 1rem; }

.btn .icon { flex: none; }
.btn--play .icon { margin-left: -.2em; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}

/* tekstlink met pijl */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--green);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================
   5. Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 248, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(250, 250, 248, .94);
}

.header__inner {
  display: flex;
  align-items: center;
  /* De ruimte tussen logo, menu en knoppen is de buffer die het menu nodig
     heeft. Op 1440 px kwam het 4 px tekort; met 24 px in plaats van 28 px past
     het met marge, ook als er later een menu-item bij komt. */
  gap: clamp(12px, 1.5vw, 24px);
  min-height: 76px;
  padding-block: 12px;
}

/* merk */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
}

/* Het echte logo (Customizer → Site-identiteit). Het is een liggend logo met
   het woordmerk erin, dus het hoeft maar één keer: geen los beeldmerk plus een
   naam ernaast. De hoogte is de maat die telt; de breedte volgt. */
.site-header .custom-logo-link,
.footer__brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand .custom-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: none;
}
.brand--footer .custom-logo {
  height: 26px;
}

/* Op een telefoon iets kleiner: 40 px vult daar bijna de hele headerhoogte en
   dan moet de menuknop er nog naast. 33 px houdt het logo leesbaar (het
   woordmerk blijft scherp) en geeft de header lucht. */
@media (max-width: 600px) {
  .brand .custom-logo,
  .site-header .custom-logo {
    height: 33px;
  }
}
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* De <picture> is een tussenlaag: zonder deze regel houdt de afbeelding zich
   aan de natuurlijke maat en niet aan de box van .brand__mark. */
.brand__mark picture { display: block; width: 100%; height: 100%; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: .1em;
}
.brand__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: max(12px, .66rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5F6862;
  margin-top: .3em;
}
.custom-logo { max-height: 36px; width: auto; }
/* Het logo is het breedste element in de header (235 px). Iets smaller geeft het
   menu de ruimte die het nodig heeft, zonder dat het merk klein wordt. */
.custom-logo-link { flex: none; max-width: 178px; }
.custom-logo-link img { max-width: 100%; height: auto; }

/* nav */
/*
 * Het menu moet acht items aankunnen.
 *
 * Met acht labels plus logo en de knoppen rechts kwam de header 82 px tekort, en
 * dan schuift .header__actions buiten het scherm -- de knoppen verdwijnen dan
 * gewoon. Dat is niet op te lossen met een overflow:hidden (dan valt het laatste
 * menu-item weg) en ook niet door een item te verwijderen: acht items is de
 * bedoeling.
 *
 * Dus: minder marge tussen de items, een iets kleinere korpsgrootte, en het menu
 * mag krimpen in plaats van de rest op te duwen. `min-width: 0` is daarvoor
 * essentieel -- zonder dat weigert een flex-item kleiner te worden dan zijn
 * inhoud, en duwt hij alsnog alles naar buiten.
 */
.nav {
  /* Geen `margin-inline: auto` meer: een automatische marge op een flex-item
     slokt de vrije ruimte op, waardoor het menu niet kon groeien en de laatste
     regel 42 px buiten de nav liep terwijl er 68 px ongebruikt naast lag.
     Centreren doet de ul nu zelf met justify-content. */
  min-width: 0;
  flex: 1 1 auto;
}
.nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.7vw, 10px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; position: relative; }
.nav a {
  display: inline-block;
  padding: .45em 0;
  font-size: .875rem;
  font-weight: 450;
  /* Nooit afbreken: een label van twee regels duwt het hele menu scheef en
     ziet eruit als een fout. Liever iets kleiner dan gebroken. */
  white-space: nowrap;
  color: var(--body);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
/* Icoon in het hoofdmenu.
   Het icoon staat vóór de linktekst en erft de kleur daarvan, zodat het
   meebeweegt met de hover in plaats van als los groen blokje naast grijze
   tekst te staan. De vulling komt uit --duo (zie inc/phrona-icons.php) en
   is hier bewust laag: in een menu van 18 px wint leesbaarheid het van
   decoratie. */
.nav > ul > li > a { display: inline-flex; align-items: center; gap: .42em; }
.nav .ph-ico { flex: 0 0 auto; transition: color var(--dur) var(--ease); }
.nav .ph-ico--leeg { font-size: .8em; opacity: .45; }

.nav a:hover,
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--ink); }
.nav a::after {
  content: "";
  display: block;
  height: 1px;
  width: 0;
  background: var(--green-line);
  transition: width var(--dur) var(--ease);
  margin-top: .3em;
}
.nav a:hover::after,
.nav .current-menu-item > a::after { width: 100%; }

/* submenu */
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  min-width: 208px;
  display: block;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Het laatste menu-item heeft geen ruimte meer rechts: zijn submenu liep 14 px
   voorbij de rand en dat alleen al zorgde voor een horizontale scrollbalk. */
.nav > ul > li:last-child > .sub-menu { left: auto; right: -14px; }
.nav .sub-menu a { padding: .45em .6em; border-radius: 8px; width: 100%; }
.nav .sub-menu a:hover { background: var(--surface); }
.nav .sub-menu a::after { display: none; }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  flex: none;
}
.header__login {
  font-size: .91rem;
  font-weight: 450;
  color: var(--body);
  text-decoration: none;
}
.header__login:hover { color: var(--ink); }

/* mobiele toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .header__inner { justify-content: space-between; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    padding: 12px var(--gutter) 22px;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a { padding: .7em 0; font-size: 1rem; }
  .nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 6px 14px;
  }
  /* Een submenu-link is een echte knop op een aanraakscherm. De basisregel
     (.nav .sub-menu a { padding: .45em .6em }) gaf 39 px -- onder de 44 px
     die een vinger nodig heeft. De topitems halen 53 px via .nav a. */
  .nav .sub-menu a {
    padding: .68em .6em;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .header__login { display: none; }
  /* CTA's staan in het uitklapmenu */
  .nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
  /* .nav a zet display:inline-block en padding:.45em 0 (regel ~386) en wint op
     specificiteit van .btn. Zonder deze override staat de CTA-tekst scheef
     naast de pijl. Vandaar de expliciete herstelling hier. */
  .nav__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .82em 1.5em;
  }
  .nav__actions .btn::after { content: none; }
  .nav__login {
    display: block;
    font-size: .95rem;
    color: var(--body);
    text-decoration: none;
    text-align: center;
    padding: .55em 0;
  }
  .nav__login::after { content: none; }
}

@media (min-width: 1024px) {
  .nav__actions { display: none; }
}

/*
 * Hier stond een regel die de CTA-knop verborg tussen 1024 en 1239 px, omdat het
 * menu met acht items niet naast de knop paste.
 *
 * Die acht items zijn nu vijf (Platform, Oplossingen, Voor wie, Prijzen, Over ons).
 * Gemeten op 1024 px: menu 658 px + acties 181 px = 839 px, dus de knop past.
 * De knop verbergen was een workaround voor een te vol menu, niet een ontwerpkeuze --
 * en het verborg precies de belangrijkste conversieknop op laptopformaat.
 */

@media (max-width: 400px) {
  /* Op de smalste toestellen is er geen ruimte voor logo + CTA naast elkaar;
     die staat dan in het uitklapmenu. */
  .header__actions .btn { display: none; }
  .brand__tag { letter-spacing: .1em; }
}

/* ============================================================
   6. Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 4vw, 64px) clamp(24px, 3vw, 40px);
}

/* Organische papier/textuur-laag achter de hero-tekst. */
.hero__wash {
  position: absolute;
  inset: 0;
  background-image: image-set(
    url("assets/img/phrona-texture-600.webp") type("image/webp") 1x,
    url("assets/img/phrona-texture.webp") type("image/webp") 2x,
    url("assets/img/phrona-texture.jpg") type("image/jpeg") 2x
  );
  background-size: cover;
  background-position: 50% 32%;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 92% at 62% 42%, #000 0%, rgba(0, 0, 0, .75) 46%, transparent 88%);
  mask-image: radial-gradient(120% 92% at 62% 42%, #000 0%, rgba(0, 0, 0, .75) 46%, transparent 88%);
}
.hero__grid {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}

.hero__copy { max-width: 34rem; }

.hero__title {
  font-size: clamp(2.5rem, 4.9vw, 4.05rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin-bottom: 1.15rem;
}
.hero__title .accent { display: inline; }

.hero__lede {
  font-size: clamp(1rem, 1.2vw, 1.09rem);
  line-height: 1.62;
  color: var(--body);
  max-width: 31em;
  margin-bottom: 1.9rem;
  text-wrap: pretty;
  hyphens: none;
}

.hero .btn-row { margin-bottom: 2.1rem; }

.hero__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  color: #4E5752;
  margin: 0;
  line-height: 1.4;
}
.hero__bullets svg {
  flex: none;
  margin-top: .15em;
  color: var(--green-soft);
}

/* illustratie — grid, dus kaarten kunnen nooit overlappen */
.hero-visual {
  position: relative;
  width: 100%;
  display: grid;
  /* links / midden (embleem) / rechts — verhouding uit het ontwerp */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 0.97fr);
  grid-template-rows: auto auto auto;
  column-gap: clamp(8px, 1.2vw, 18px);
  row-gap: clamp(8px, 1.1vw, 16px);
  align-items: stretch;
  padding-block: clamp(4px, .9vw, 12px);
}

/* organische achtergrond achter het hele diagram */
.hero-visual__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Het echte beeldmerk: middelste kolom, over beide rijen, verticaal gecentreerd. */
.hero-visual__emblem {
  grid-area: 2 / 2 / 4 / 3;
  align-self: center;
  justify-self: center;
  position: relative;
  /* Het embleem zit ONDER de symbolen (3) en onder de kaarten (4). Eerder stond
     het op 3, boven de kaarten, en dan kon een symbool nooit vóór het brein
     langs: het verdween achter de tekening. De symbolen horen er zichtbaar
     langs te schuiven -- dat is wat "voor het brein langs" betekent -- terwijl
     ze achter de kaarten blijven, want daar zouden ze over de tekst liggen. */
  z-index: 2;
  width: 88%;
  max-width: 230px;
  pointer-events: none;
}
.hero-visual__emblem::before {
  /* Hier stond een witte schijf met een rand en een schaduw. Die maakte van het
     embleem een knop: een rond wit vlak waar de tekening op ligt. Het embleem
     is zelf transparant (RGBA, hoeken op alpha 0), dus die schijf deed niets
     anders dan de achtergrond afdekken -- en dat is precies wat je zag: het
     brein was "niet meer met transparante achtergrond".

     Wat er nu staat is een halo: een zachte radiale gloed die de tekening
     draagt zonder hem in te kaderen. De binnenste 62% is bijna niets, zodat de
     lijnen en de vulling van het embleem op de crème achtergrond staan en niet
     op wit. */
  content: "";
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(255, 255, 255, .34) 0%,
    rgba(255, 255, 255, .20) 44%,
    rgba(255, 255, 255, 0) 72%
  );
  box-shadow: none;
  border: 0;
  z-index: -1;
}
.hero-visual__emblem img {
  display: block;
  width: 100%;
  height: auto;
}

.hv-card {
  position: relative;
  /* Boven de symbolen (3): een symbool dat een kaart raakt gaat erachter
     langs, niet erover. Boven het embleem (2) maakt niet uit -- die twee
     overlappen elkaar nooit. */
  z-index: 4;
  min-width: 0;
  padding: .68rem .78rem .62rem;
  background: #fff;
  border: 1px solid #EAEDE6;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(32, 40, 37, .03), 0 16px 34px -20px rgba(32, 40, 37, .22);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/*
 * Hier stonden de verbindingslijntjes als pseudo-element op de kaart:
 * `.hv-card::after` met drie varianten (--down, --right, --left).
 *
 * Ze zijn nooit zichtbaar geweest. De lijn begint op `top: 100%` -- dus precies
 * op de onderrand -- en `overflow: hidden` op .hv-card knipt hem daarom in zijn
 * geheel weg. Bewezen, niet aangenomen: met de lijn 9px breed en felrood gemaakt
 * en de ::after-rechthoek op scale 8 gefotografeerd, waren er 0 afwijkende
 * pixels en 0 rode pixels in beeld.
 *
 * Wat dit ook verklaarde: de kaart van Workers rapporteerde scrollHeight 196
 * tegenover clientHeight 153. Die 43px was precies deze onzichtbare lijn --
 * geen afgekapte tekst.
 *
 * De lijnen zitten nu in SVG-laag .hv-net, die boven de kaarten ligt en zelf
 * geen overflow heeft; hero-viz.js berekent de routes. De `side`-waarde in
 * template-parts/hero-visual.php is daarmee ook vervallen en verwijderd.
 */
.hv-card__head {
  display: flex;
  align-items: center;
  gap: .42em;
  margin-bottom: .55em;
}
.hv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 8px;
  background: var(--tint);
  color: var(--tone);
  flex: none;
}
.hv-card__title {
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.86vw, 13.8px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.hv-card__text {
  margin: 0;
  font-size: clamp(12px, 0.8vw, 12.8px);
  line-height: 1.42;
  color: #545D58;
}
.hv-card__text {
  text-wrap: pretty;
  min-height: 4.35em; /* drie regels: kaarten in een kolom blijven even hoog */
}
.hv-card__text span { display: block; }

.hv-card__minis {
  display: flex;
  gap: .3em;
  margin-top: .7em;
}
.hv-card__mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  min-width: 16px;
  min-height: 16px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--tone);
}

/* ============================================================
   Hero: beweging
   ------------------------------------------------------------
   Alles hier is sfeer. De illustratie is één SVG en vijf kaarten tekst;
   zonder beweging is de pagina identiek leesbaar. Daarom staat het hele blok
   achter `prefers-reduced-motion: no-preference` en niet alleen de duur op 0.

   Twee lagen:
   1. .hv-net  -- synapsen van kaart naar embleem, met een pulserend punt dat
                  de baan volgt (SVG animateMotion, dus geen JS nodig).
   2. .hv-probes -- de bronvormen die van buiten naar binnen drijven.
   ============================================================ */

/* De netwerklaag ligt boven de kaarten maar is niet aanraakbaar: de kaarten
   hebben z-index 2, deze laag 1 zodat de lijnen eronderdoor naar het embleem
   lopen en niet over de tekst heen. */
.hv-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Onder de kaarten (die hebben z-index 2): een verbinding hoort achter de
     kaart langs te lopen, niet over de tekst heen. */
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.hv-net__baan {
  stroke: var(--baan-kleur, #6D8E7E);
  /* Iets zwaarder dan de eerste opzet (.38 / 1,1): op een groot scherm viel de
     baan anders weg tegen de crème achtergrond. Nog steeds ondersteunend -- de
     kaarten blijven het eerste zijn dat je leest. */
  stroke-width: 1.5;
  opacity: .58;
  /* Doorgetrokken, niet gestippeld. Een stippellijn met een stip erop is dubbel
     stipwerk: je ziet dan twee soorten stippen door elkaar en de bewegende stip
     valt weg. De lijn is de baan, de stip is wat erover beweegt. */
  stroke-linecap: round;
}

.hv-net__knoop {
  fill: #fff;
  stroke: var(--baan-kleur, #6D8E7E);
  stroke-width: 1.4;
  opacity: .88;
}

.hv-net__puls {
  fill: var(--baan-kleur, #6D8E7E);
  opacity: 1;
  filter: drop-shadow(0 0 3.5px var(--baan-kleur, #6D8E7E));
}

/* De instroom: negen bronvormen die van buiten naar het brein reizen en daar
   oplossen. De routes worden in `assets/js/hero-viz.js` berekend; hier staat
   alleen hoe een symbool eruitziet.

   De laag ligt ONDER de kaarten (z-index 1, kaarten 2) en onder het embleem (3).
   Dat is geen zwakte maar het punt: een symbool dat achter een kaart schuift en
   aan de andere kant terugkomt leest als diepte. Een symbool over de tekst heen
   leest als een fout. De ruimte tussen de kaarten is op het smalste punt 3,2
   eenheden breed en een symbool is 5,6 breed, dus een route zonder enige
   kaartaanraking bestaat hier niet -- doorgerekend, elke variant gaf tientallen
   botsingen. */
.hv-probes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Boven het embleem (2), onder de kaarten (4). Zo schuiven de symbolen
     zichtbaar vóór de breintekening langs en verdwijnen ze achter een kaart
     zodra ze die raken. */
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hv-probe__tegel {
  /* Een getinte plaat in de eigen kleur, niet wit. Een wit tegeltje met een
     gekleurd lijntje erin leest als een UI-kaartje dat toevallig voorbij komt
     zweven; een plaat in de kleur van de bron leest als dat ding zelf. De tint
     is bewust licht: het ICOON moet de kleur dragen, de plaat alleen de gloed
     eromheen. */
  fill: var(--probe-tint, rgba(255, 255, 255, .96));
  stroke: var(--probe-rand, rgba(0, 0, 0, .07));
  stroke-width: .2;
  vector-effect: non-scaling-stroke;
}

.hv-probe__icoon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De gloed waarmee een symbool op het brein oplost. Een eigen laag BOVEN het
   embleem: in de symbool-laag zou de helft achter de witte schijf verdwijnen en
   als platte stip lezen. Straal en kleur worden per frame gezet. */
.hv-gloed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.hv-probe__gloed {
  /* Zacht, anders is het een harde schijf in plaats van een gloed. Niet te
     veel: bij 1,4 px werd het een waas die het hele brein bedekte. */
  filter: blur(.9px);
}

/* Een symbool dat aankomt staat OP het brein, niet ernaast: wit tegeltje weg,
   alleen het teken in zijn eigen kleur met de gloed erachter. Een wit blokje
   op de embleemtekening leest als een plakkertje. */
.hv-probe--aankomst .hv-probe__tegel {
  fill: none;
  stroke: none;
}

/* Op het brein is het symbool geen plaatje meer maar een teken: geen tegel,
   wel de volle kleur en een iets zwaardere lijn, zodat het leesbaar blijft
   boven de tekening van het embleem. */
.hv-probe--aankomst .hv-probe__icoon {
  stroke-width: 2.9;
}

/* De synapsstippen in beide richtingen. `--baan-kleur` wordt per stip gezet en
   NIET via currentColor: de laag erft de tekstkleur van de pagina, en dan
   lichtten alle stippen donkergrijs op in plaats van in hun eigen kleur. */
.hv-net__puls--heen,
.hv-net__puls--terug {
  filter: drop-shadow(0 0 3.2px var(--baan-kleur, #6D8E7E));
}

/* De stip die overblijft als een symbool in het brein is opgelost. Iets
   nadrukkelijker dan de gewone synaps: dit is een gevolg van iets, en dat mag
   je zien. De kleur komt van de bron die oploste, niet van het kaartje waar
   hij naartoe gaat -- hij is nog onderweg. */
.hv-net__puls--afvuring {
  filter: drop-shadow(0 0 4.2px var(--baan-kleur, #6D8E7E));
}

/* Elk soort bron een eigen kleur: het zijn tenslotte verschillende dingen, en
   aan de kleur zie je wat er aankomt ook als het symbool even schuilt. */
/* Kleur per bron, herkenbaar aan de inhoud en niet aan het toeval:
   Word blauw, Excel groen, PDF rood, mail terra, chat groen. De tint is de
  zelfde kleur op 13% en de rand op 40%, zodat de plaat bij het icoon hoort
   zonder zelf een vlak te worden waar het teken in verdwijnt. */
.hv-probe--docx  { color: #4A72A8; --probe-tint: rgba(74, 114, 168, .13); --probe-rand: rgba(74, 114, 168, .40); }
.hv-probe--pdf   { color: #B4574A; --probe-tint: rgba(180, 87, 74, .13);  --probe-rand: rgba(180, 87, 74, .40); }
.hv-probe--audio { color: #9A6BA8; --probe-tint: rgba(154, 107, 168, .13); --probe-rand: rgba(154, 107, 168, .40); }
.hv-probe--xls   { color: #3F8455; --probe-tint: rgba(63, 132, 85, .13);  --probe-rand: rgba(63, 132, 85, .40); }
.hv-probe--beeld { color: #A97A2C; --probe-tint: rgba(169, 122, 44, .14); --probe-rand: rgba(169, 122, 44, .42); }
.hv-probe--db    { color: #3D7F94; --probe-tint: rgba(61, 127, 148, .13); --probe-rand: rgba(61, 127, 148, .40); }
.hv-probe--enq   { color: #77689A; --probe-tint: rgba(119, 104, 154, .13); --probe-rand: rgba(119, 104, 154, .40); }
.hv-probe--mail  { color: #A86F5C; --probe-tint: rgba(168, 111, 92, .14); --probe-rand: rgba(168, 111, 92, .42); }
.hv-probe--chat  { color: #4E7A68; --probe-tint: rgba(78, 122, 104, .13); --probe-rand: rgba(78, 122, 104, .40); }

/* De stip waarin een symbool oplost, en de synapsstippen die naar de kaarten
   lopen. Dezelfde vorm, andere richting -- dat is met opzet: het is hetzelfde
   spul dat heen en terug gaat. */


/* Als een synapsstip achter een kaart verdwijnt, licht de rand op.Subtiel: dit
   is een bevestiging dat er iets aankwam, geen knop die oplicht. De vertraging
   in de overgang naar `none` zorgt dat het uitdoven rustiger gaat dan het
   aansteken. */
.hv-card {
  transition: box-shadow .45s ease, border-color .45s ease;
}

.hv-card.is-geraakt {
  border-color: var(--hv-tone-rand, rgba(109, 142, 126, .5));
  box-shadow: 0 0 0 1px var(--hv-tone-rand, rgba(109, 142, 126, .35)),
              0 6px 18px -8px var(--hv-tone-gloed, rgba(109, 142, 126, .45));
  transition-duration: .16s;
}

.hv-card--tone-green  { --hv-tone-rand: rgba(109, 142, 126, .55); --hv-tone-gloed: rgba(109, 142, 126, .55); }
.hv-card--tone-teal   { --hv-tone-rand: rgba(102, 147, 160, .55); --hv-tone-gloed: rgba(102, 147, 160, .55); }
.hv-card--tone-blue   { --hv-tone-rand: rgba(124, 147, 176, .55); --hv-tone-gloed: rgba(124, 147, 176, .55); }
.hv-card--tone-sand   { --hv-tone-rand: rgba(180, 119, 98, .55);  --hv-tone-gloed: rgba(180, 119, 98, .55); }
.hv-card--tone-mauve  { --hv-tone-rand: rgba(169, 113, 122, .55); --hv-tone-gloed: rgba(169, 113, 122, .55); }

@media (prefers-reduced-motion: no-preference) {
  /* 1. De kaarten ademen. Vier verschillende periodes en vertragingen, anders
        gaan ze als één blok op en neer en dat leest als een fout, niet als
        leven. De beweging is klein (3 px) -- dit is een accent, geen show. */
  .hv-card {
    animation: hv-adem 7s ease-in-out infinite;
  }
  .hv-card--area-workers   { animation: hv-adem 6.4s ease-in-out infinite; animation-delay: -.2s; }
  .hv-card--area-plato     { animation: hv-adem-links 7.8s ease-in-out infinite; animation-delay: -1.7s; }
  .hv-card--area-interface { animation: hv-adem-links 8.6s ease-in-out infinite; animation-delay: -3.1s; }
  .hv-card--area-memory    { animation: hv-adem-rechts 7.1s ease-in-out infinite; animation-delay: -4.4s; }
  .hv-card--area-portaal   { animation: hv-adem-rechts 9.2s ease-in-out infinite; animation-delay: -2.3s; }

  /* Het embleem ademt mee, maar tegengesteld: als de kaarten omhoog gaan,
     zakt het hart een fractie. Dat geeft diepte in plaats van een schok. */
  .hero-visual__emblem {
    animation: hv-hart 9.5s ease-in-out infinite;
  }

  /* De symbolen en de synapsstippen worden door `assets/js/hero-viz.js` in de
     tijd gezet; daarvoor is geen CSS-animatie nodig. Ze verplaatsen zich met
     een transform per frame, wat op de compositor blijft en dus geen reflow
     kost. */
}

@keyframes hv-adem {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(1.5px, -3px, 0) rotate(.28deg); }
  50%      { transform: translate3d(-1px, -1px, 0) rotate(-.18deg); }
  75%      { transform: translate3d(-2px, -4px, 0) rotate(-.32deg); }
}

/* Elke kaart drift zijn eigen kant op. Zonder dat bewegen ze allemaal hetzelfde
   patroon en leest het als één blok dat wiebelt in plaats van vijf dingen die
   leven. */
@keyframes hv-adem-links {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%      { transform: translate3d(-3px, -2px, 0) rotate(-.34deg); }
  60%      { transform: translate3d(-1px, -4px, 0) rotate(.12deg); }
  85%      { transform: translate3d(-3px, -1px, 0) rotate(.26deg); }
}

@keyframes hv-adem-rechts {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  35%      { transform: translate3d(3px, -3px, 0) rotate(.34deg); }
  65%      { transform: translate3d(1px, -1px, 0) rotate(-.14deg); }
  88%      { transform: translate3d(3px, -4px, 0) rotate(-.28deg); }
}

@keyframes hv-hart {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

@media (hover: hover) {
  /* Bij hover stopt het ademen even: twee transforms op hetzelfde element
     vechten anders om dezelfde eigenschap en dan springt de kaart. */
  .hero-visual:hover .hv-card { transform: translateY(-2px); animation-play-state: paused; }
  .hv-card:hover { box-shadow: 0 3px 6px rgba(32,40,37,.04), 0 22px 44px -22px rgba(32,40,37,.3); }
}

@media (prefers-reduced-motion: reduce) {
  .hv-net__puls,
  .hv-probe { display: none; }
  .hv-net__baan { animation: none; opacity: .3; }
}

@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 42rem; }
  .hero-visual { order: 2; max-width: 640px; margin: 8px auto 0; }
}

@media (max-width: 1180px) {
  /* Onder deze breedte wordt de diagramtekst te klein om te lezen.
     Dezelfde vijf modules staan direct hieronder als volwaardige sectie. */
  .hero-visual { display: none; }
  .hero { padding-block: 24px 0; }
}

/* ============================================================
   7. Feature strip (vijf pijlers)
   ============================================================ */
.features {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #FBFBF8 0%, #F7F8F4 100%);
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-block: clamp(26px, 3vw, 40px);
}
.feature {
  display: flex;
  flex-direction: column;
  padding-inline: clamp(14px, 1.8vw, 26px);
  border-left: 1px solid #D3D8CF;
}
.feature:first-child { border-left: 0; padding-left: 0; }
.feature:last-child { padding-right: 0; }

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: .85rem;
  background: #fff;
  border: 1px solid var(--line-soft);
  color: var(--green);
}
.feature__icon--terra { color: var(--terra); }
.feature__icon--gold  { color: var(--gold); }

.feature__title {
  font-family: var(--font-sans);
  font-size: .89rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 .3rem;
  line-height: 1.3;
}
.feature__text {
  font-size: .82rem;
  line-height: 1.45;
  color: #4E5752;
  margin: 0;
  max-width: 21ch;
  min-height: 4.4em; /* houdt de kolommen visueel gelijk */
}

@media (max-width: 1024px) {
  .features__grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .feature { border-left: 0; padding-inline: 0; }
  .feature:nth-child(3n + 2) { border-left: 1px solid var(--line-soft); padding-left: clamp(14px, 2vw, 22px); }
  .feature:nth-child(3n + 3) { border-left: 1px solid var(--line-soft); padding-left: clamp(14px, 2vw, 22px); }
}
@media (max-width: 640px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(3n + 2), .feature:nth-child(3n + 3) { border-left: 0; padding-left: 0; }
  .feature:nth-child(2n) { border-left: 1px solid var(--line-soft); padding-left: 16px; }
  .feature__text { max-width: 26ch; }
}

/* ============================================================
   8. Platform modules
   ============================================================ */
.modules {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: stretch;
}
/* Rij 1: drie kaarten. Rij 2: twee bredere kaarten — geen leeg slot. */
.modules .module { grid-column: span 2; }
.modules .module:nth-child(4),
.modules .module:nth-child(5) { grid-column: span 3; }

.module {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.module:hover {
  transform: translateY(-3px);
  border-color: #d5d9d1;
  box-shadow: var(--shadow-md);
  color: inherit;
}

/* Het beeld vult de bovenkant. object-fit: cover, want de vijf afbeeldingen
   hebben elk een iets andere ivoren grondtoon (#F0EBDC–#FDF5DF). Ze naast
   elkaar op een wit vlak zetten zou die verschillen zichtbaar maken. Als het
   beeld het vlak zelf is, valt er niets te vergelijken. */
.module__beeld {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #F7F3EC;
}
.module__beeld picture,
.module__beeld img {
  display: block;
  width: 100%;
  height: 100%;
}
.module__beeld img {
  object-fit: cover;
  transition: transform 520ms var(--ease);
}
.module:hover .module__beeld img { transform: scale(1.02); }

/* Een dunne naad tussen beeld en tekst, in de toon van de bouwsteen. */
.module__beeld::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--module-tone, var(--green-soft));
  opacity: .9;
}

.module__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(18px, 1.9vw, 24px);
  flex: 1;
}

.module__kop {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.module__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--module-tint, var(--surface));
  color: var(--module-tone, var(--green));
}
.module__icon svg { width: 17px; height: 17px; }

/*
 * De Worker-symbolen staan NIET in de kaartkop maar bij hun eigen label.
 *
 * Eerst heb ik ze met zijn vijven in de kop gezet, in dezelfde tegel als het
 * gewone icoon. Dat werkte niet: op 19px (en op mobiel ~9px door de kleinere
 * kaart) zijn ze niet meer te onderscheiden, het geheel las als een patroon in
 * plaats van als informatie, en de kaart viel uit de toon bij de vier andere die
 * één icoon hebben. De vijf labels ("Document", "Database", ...) staan er al --
 * daar hoort het symbool bij, met de betekenis ernaast.
 */


.module__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.module__text {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.module__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .1rem;
}
.module__tag {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .02em;
  /* Iets meer padding links als er een symbool in staat: het symbool heeft
   * optisch minder lucht nodig dan een letter. */
  padding: .2em .55em;
  border-radius: 999px;
  color: #4A5750;
  background: var(--module-tint, var(--surface));
  border: 1px solid rgba(0, 0, 0, .04);
  white-space: nowrap;
}

/*
 * De vijf Worker-symbolen staan bij hun eigen label, niet in de kaartkop.
 * Op 19px in een rij naast de titel waren ze niet te onderscheiden en viel de
 * kaart uit de toon bij de vier andere (die één icoon hebben). Hier is er ruimte
 * én staat de betekenis ernaast: "document", "database", "audio", ...
 */
.module__tag .wk-symbool {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
  /* Volle dekking, geen .85: op deze maat is elke stap terug te weinig contrast
   * tegen de getinte achtergrond van het label. */
  opacity: 1;
}

/* Op 16px is een tweede kleur niet te onderscheiden en maakt het alleen ruis:
 * het accent wordt een tint van de labelkleur. */
.module__tag .wk-symbool .wk-accent {
  stroke: currentColor;
  opacity: .55;
}

/* De lijndikte in de SVG is 4 op een viewBox van 96: op 16px is dat 0,67px en dat
 * valt weg. Voor deze kleine weergave een dikkere streek, zodat de vorm leesbaar
 * blijft in plaats van te verdwijnen. */
.module__tag .wk-symbool {
  --wk-streek: 5.5;
}
.module__tag svg.wk-symbool path,
.module__tag svg.wk-symbool circle,
.module__tag svg.wk-symbool rect {
  stroke-width: 5.5;
}

/* Op mobiel iets ruimer: de kaart is smaller, dus de tags krijgen minder plek en
 * mogen niet tegen elkaar aan staan. */
@media (max-width: 560px) {
  .module__tag { gap: .3em; padding: .22em .5em; }
  .module__tag .wk-symbool { width: 15px; height: 15px; }
}

.module__tag .wk-symbool .wk-dot {
  fill: currentColor;
}

.module__more {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--module-tone, var(--green));
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.module__more svg { transition: transform var(--dur) var(--ease); flex: none; }
.module:hover .module__more svg { transform: translateX(3px); }

/* De twee bredere kaarten in rij 2 leggen beeld en tekst naast elkaar: bij
   561px wordt een gestapelde kaart te hoog ten opzichte van de rest. */
@media (min-width: 901px) {
  .modules .module:nth-child(n + 4) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
  .modules .module:nth-child(n + 4) .module__beeld {
    aspect-ratio: auto;
    height: 100%;
    min-height: 244px;
  }
  .modules .module:nth-child(n + 4) .module__beeld::after {
    inset: 0 0 0 auto;
    width: 3px;
    height: 100%;
  }
  .modules .module:nth-child(n + 4) .module__body {
    padding: clamp(20px, 2vw, 28px);
  }
}

@media (max-width: 900px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules .module,
  .modules .module:nth-child(4),
  .modules .module:nth-child(5) { grid-column: span 1; }
  .modules .module:last-child:nth-child(odd) { grid-column: span 2; }
  .modules .module:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .modules .module:last-child:nth-child(odd) .module__beeld {
    aspect-ratio: auto;
    height: 100%;
  }
  .modules .module:last-child:nth-child(odd) .module__beeld::after {
    inset: 0 0 0 auto;
    width: 3px;
    height: 100%;
  }
}
@media (max-width: 600px) {
  .modules { grid-template-columns: 1fr; }
  .modules .module,
  .modules .module:last-child:nth-child(odd) {
    grid-column: span 1;
    display: flex;
  }
  .modules .module .module__beeld,
  .modules .module:last-child:nth-child(odd) .module__beeld {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
  .modules .module .module__beeld::after,
  .modules .module:last-child:nth-child(odd) .module__beeld::after {
    inset: auto 0 0;
    width: auto;
    height: 3px;
  }
}

/* ============================================================
   9. Steps
   ============================================================ */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  counter-reset: step;
}
.step {
  position: relative;
  margin: 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.step__number {
  position: absolute;
  top: -0.72rem;
  left: 0;
  padding-right: .6rem;
  background: var(--bg-warm);
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #8C5645;
}
.step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  color: var(--green);
  margin-bottom: .9rem;
}
.step__title {
  font-family: var(--font-display);
  font-size: 1.24rem;
  margin-bottom: .45rem;
}
.step__text {
  font-size: .91rem;
  line-height: 1.58;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
}
/* Aanloop naar de demo onder de stappenreeks. */
.steps__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.2rem;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
}
.steps__more span {
  font-size: .88rem;
  color: var(--muted);
  max-width: 30em;
}
/* Twee snelheden, en dat verschil moet je kunnen zien: een brein is er in
   minuten, een werkende flow in weken. Zonder deze regel leest de tweede
   helft als een verontschuldiging in plaats van als het echte werk. */
.steps__tempo {
  margin: clamp(26px, 3.2vw, 40px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 34em;
}


/* ============================================================
   10. Quote
   ============================================================ */
.quote-section { background: var(--bg); }
.quote {
  margin: 0;
  text-align: center;
  position: relative;
  padding-top: 1.4rem;
}
.quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: .6;
  color: #B98F72;
  margin-bottom: .35rem;
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.quote__author {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: center;
}
.quote__name {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.quote__role {
  font-size: .8rem;
  color: var(--muted);
}

/* ============================================================
   11. FAQ
   ============================================================ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.faq__intro .link-arrow { margin-top: .4rem; }

.faq__items { border-top: 1px solid var(--line); }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
  line-height: 1.35;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green); }

.faq__sign {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .3em;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 1.4px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  padding: 0 2.5rem 1.4rem 0;
}
.faq__a p {
  font-size: .93rem;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
}

/* ============================================================
   12. CTA band
   ============================================================ */
.cta-band {
  background: var(--green);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 84px);
}
.cta-band__flora {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: min(360px, 58%);
  height: auto;
  pointer-events: none;
}

.cta-band__copy { position: relative; max-width: 34rem; }
.eyebrow--light { color: rgba(255, 255, 255, .6); }
.cta-band__title {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: .8rem;
}
.cta-band__title .accent { color: var(--sand); }
.cta-band__text {
  color: rgba(255, 255, 255, .76);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30em;
}
.cta-band__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}
.cta-band__btn {
  background: #fff;
  color: var(--green);
}
.cta-band__btn:hover {
  background: #fff;
  color: var(--ink);
}
.cta-band__link {
  font-size: .86rem;
  color: rgba(255, 255, 255, .88);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.cta-band__link:hover { color: #fff; }

@media (max-width: 860px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__flora { right: -40px; width: 260px; opacity: .55; }
}

/* ============================================================
   13. Footer
   ============================================================ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(40px, 5vw, 68px) clamp(20px, 2.4vw, 30px);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 80px);
  padding-bottom: clamp(28px, 3.4vw, 48px);
}
.footer__brand .brand { margin-bottom: 1rem; }
.footer__tagline {
  font-size: .9rem;
  color: var(--body);
  margin-bottom: .5rem;
  max-width: 22em;
}
/* "Phrona is powered by Elephantheia". Klein en terughoudend: dit is een
   herkomstregel, geen partnerbanner. Het logo staat erbij omdat een naam alleen
   op deze plek minder geloofwaardig leest dan het merk zelf. */
.footer__powered {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0;
  font-size: .78rem;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.footer__powered-merk {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer__powered-merk:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}
.footer__powered-merk img {
  display: block;
  width: auto;
  /* 30 px, niet 22. Het Elephantheia-beeldmerk heeft fijne lijnen en meerdere
     kleurvlakken; onder de ~28 px vallen die weg en wordt het een vlek. Het
     blijft klein genoeg om een herkomstregel te zijn en niet een banner. */
  height: 30px;
}
.footer__powered-naam {
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .04em;
}

.footer__note {
  font-size: .82rem;
  line-height: 1.5;
  color: #5F6862;
  margin: 0;
  max-width: 24em;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.footer__title {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.footer__list li { margin: 0; }
.footer__list a {
  font-size: .87rem;
  color: #565F5A;
  text-decoration: none;
  /*
   * Raakvlak, geen opmaak. De link is één regel hoog (18px) en dat is op een
   * telefoon te klein om betrouwbaar te raken. 24px is de ondergrens van
   * WCAG 2.2 AA (2.5.8 Target Size Minimum); de knoppen op de site hebben 44px
   * (2.5.5 AAA), maar dat is voor een menu met veertien links te veel: elke
   * 44px-regel maakt de footer op mobiel twee schermen lang en dan wordt hij
   * weer de tweede pagina die we juist wilden voorkomen.
   */
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 24px;
}
.footer__list a:hover { color: var(--ink); }
/* Icoon in de footer: kleiner dan in het menu (16 tegen 18) en zonder
   vulling. De footer is een wegwijzer, geen etalage; vulling zou van veertien
   links een kolom met vlakjes maken. */
.footer__list a .footer__ico { flex: 0 0 auto; opacity: .72; transition: opacity var(--dur) var(--ease); }
.footer__list a:hover .footer__ico { opacity: 1; }
.footer__list a > span { min-width: 0; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.footer__copy {
  font-size: .82rem;
  color: #5F6862;
  margin: 0;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal a {
  font-size: .82rem;
  color: #5F6862;
  text-decoration: none;
}
.footer__legal a:hover { color: var(--ink); }

@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
}
/*
 * Op mobiel bleef er één kolom over en werd de footer een lange staart van 14
 * links onder elkaar -- goed voor ongeveer twee schermen. Drie kolommen naast
 * elkaar passen ook op 390px: de labels zijn kort en de langste
 * ("Portaalplatform", "Kennisassistent") is 17 tekens, wat bij .78rem ruim
 * binnen een derde van 390px past. Zo blijft de footer een wegwijzer in plaats
 * van een tweede pagina.
 */
@media (max-width: 520px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .footer__title { font-size: .72rem; letter-spacing: .06em; margin-bottom: .7rem; }
  .footer__list { gap: .4rem; }
  .footer__list a { font-size: .82rem; line-height: 1.35; }
}

/* ============================================================
   14. Reveal animation
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   15. Page heads & content
   ============================================================ */
.page-hero {
  padding-block: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 32px);
}
.page-hero__title {
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  margin-bottom: .5rem;
}

/* --- Pagina's met een beeldband -----------------------------------------
   De homepage heeft tekst links en een diagram rechts. Deze kop is de andere
   compositie: tekst gecentreerd over de volle breedte, en daaronder een brede
   papieren band met het beeldmerk erin. Zelfde palet en zelfde papiertextuur
   als de voorpagina, ander ritme -- een pagina uit dezelfde familie, geen
   kopie van de hero. */
.page-hero--band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 4.4vw, 68px) 0;
}
.page-hero__paper {
  position: absolute;
  inset: 0;
  background-image: image-set(
    url("assets/img/phrona-texture-600.webp") type("image/webp") 1x,
    url("assets/img/phrona-texture.webp") type("image/webp") 2x,
    url("assets/img/phrona-texture.jpg") type("image/jpeg") 2x
  );
  background-size: cover;
  background-position: 50% 26%;
  opacity: .42;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .6) 52%, transparent 92%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, .6) 52%, transparent 92%);
}
.page-hero__copy {
  position: relative;
  z-index: 2;
  text-align: center;
}
.page-hero--band .page-hero__title {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/*
 * De paginakop is GECENTREERD en staat sinds thema 1.43.0 in de brede container.
 * Een gecentreerde titel over 1144px valt visueel uiteen: je leest hem als twee
 * losse stukken. Daarom houdt de kop zelf een eigen maat, ongeacht de container.
 * De titel mag iets breder dan de lede -- een h1 heeft groot corps en dus minder
 * tekens per regel nodig voor dezelfde leesbaarheid.
 */
.page-hero__copy > .page-hero__title {
  max-width: 22em;
  margin-inline: auto;
}

/* Niet-band-variant: links uitgelijnd, dus ook links verankerd. */
.page-hero > .wrap > .page-hero__title {
  max-width: 22em;
  margin-inline: 0;
}
.page-hero--band .lede {
  max-width: 34em;
  margin-inline: auto;
  text-wrap: pretty;
}

/* De eyebrow hoort bij de titel en volgt dezelfde maat. */
.page-hero__copy > .eyebrow,
.page-hero > .wrap > .eyebrow {
  max-width: 34em;
  margin-inline: auto;
}

/*
 * De lede in de niet-band-variant: WEL een maximum, GEEN centrering.
 *
 * Hier ging het mis. Ik had `margin-inline: auto` overgenomen van de band-variant
 * (waar de kop gecentreerd is). In deze variant is de kop links uitgelijnd, dus
 * `auto` duwde de lede naar het midden van een box van 1144px: titel op 141px,
 * lede op 408px. Gemeten, niet gezien -- op een screenshot lijkt een inspringende
 * intro nog bijna een bewuste keuze.
 *
 * Les: een eigenschap overnemen zonder de context waarin hij werkte te controleren,
 * is hoe een gecentreerde kop een links uitgelijnde pagina binnensluipt.
 */
.page-hero > .wrap > .lede {
  max-width: 34em;
  margin-inline: 0;
  text-wrap: pretty;
}

/* De band: volle breedte, met het beeldmerk rechts van het midden. Het beeld
   loopt van rand tot rand en valt naar onderen weg, zodat de inhoud eronder op
   schoon papier begint. */
.page-band {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 3vw, 40px);
  height: clamp(140px, 19vw, 248px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}
.page-band__paper {
  position: absolute;
  inset: 0;
  /* Drie maten in plaats van één. De band is 390-1905 CSS-px breed, dus de
     2000px-versie was op elk scherm te groot -- en dat bestand is 90 KB voor
     een gradient met een korrel. De 900px-versie weegt 1,1 KB (gemeten:
     gemiddeld kleurverschil 1,9/255, max 11) en is visueel niet te
     onderscheiden. `image-set` met een resolutie laat de browser kiezen. */
  background-image: image-set(
    url("assets/img/page-band-900.webp") type("image/webp") 1x,
    url("assets/img/page-band.webp") type("image/webp") 2x,
    url("assets/img/page-band.jpg") type("image/jpeg") 2x
  );
  background-size: cover;
  background-position: 50% 62%;
  opacity: .85;
}
/* De <picture> is een tussenlaag voor het embleem; zonder deze regel
   bepaalt de natuurlijke maat de layout en niet de CSS-width. */
.page-band picture {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(88px, 12.5vw, 168px);
  display: block;
}
.page-band picture .page-band__emblem {
  position: static;
  transform: none;
  width: 100%;
}

.page-band__emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(88px, 12.5vw, 168px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: .92;
}

/* Op mobiel is de band decoratie: hij mag niet de halve eerste schermhoogte
   innemen voordat de tekst begint. */
@media (max-width: 700px) {
  .page-hero--band { padding-block: clamp(26px, 6vw, 44px) 0; }
  .page-band { height: 124px; margin-top: 14px; }
  .page-band__emblem { width: 94px; }
}

.page-head {
  max-width: 46rem;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.page-head__title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}
.page-head__search { margin-top: 1.4rem; max-width: 30rem; }

.section--tight .page-hero { padding-top: 0; }

/*
 * CONTAINER EN LEESBREEDTE ZIJN TWEE VERSCHILLENDE DINGEN.
 *
 * Tot nu toe was dat één getal: pagina-inhoud zat in `.wrap--narrow` (760px),
 * gekozen omdat lopende tekst niet over 1240px moet lopen. Gevolg: ELKE
 * binnenpagina was 760px breed -- ook pagina's met een raster, een tabel of een
 * vergelijking. Op /platform/workers/ werd een tekstkolom daardoor 231px en
 * bolde de copy op tot 840px hoge kaarten.
 *
 * Nu: de container is overal gelijk (--wrap, 1240px), net als op de homepage.
 * De LEESBREEDTE wordt per tekstblok begrensd op --measure (74ch). Zo blijven
 * alineas prettig leesbaar en kunnen rasters, tabellen en koppen de ruimte
 * gebruiken die ze nodig hebben.
 *
 * Links uitgelijnd, niet gecentreerd: dan valt de linkerkant van een alinea
 * samen met de linkerkant van het raster eronder. Een gecentreerde tekstkolom
 * boven een links uitgelijnd raster geeft twee verschillende marges op dezelfde
 * pagina, en dat leest als een fout.
 */
.entry-content {
  font-size: 1.03rem;
  line-height: 1.72;
  color: var(--body);
}

/* Lopende tekst houdt zijn maat; brede blokken mogen de container vullen. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > dl {
  max-width: var(--measure);
}
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.entry-content h3 { margin-top: 1.8em; }
.entry-content a { color: var(--green); }
/* Knoppen binnen de content erven anders de linkkleur: groen op groen,
   dus onzichtbare tekst. Laat .btn zijn eigen kleuren houden. */
.entry-content a.btn { color: var(--btn-fg); }
.entry-content a.btn--ghost { color: var(--ink); }
.entry-content a.btn:hover { color: var(--btn-fg); }
.entry-content a.btn--ghost:hover { color: var(--ink); }
.entry-content a.btn { text-decoration: none; }
.entry-content a.btn + a.btn { margin-left: .6em; }
.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content blockquote {
  margin: 2em 0;
  padding: 1.4em 1.6em;
  background: var(--surface);
  border-left: 3px solid var(--green-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content img { border-radius: var(--r-md); }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption {
  font-size: .82rem;
  color: var(--muted);
  margin-top: .6em;
  text-align: left;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
}
.entry-content th,
.entry-content td {
  padding: .75em .9em;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.entry-content th { font-weight: 600; color: var(--ink); }
.entry-content code {
  font-size: .88em;
  background: var(--surface);
  padding: .15em .4em;
  border-radius: 5px;
}
.entry-content pre {
  background: #202825;
  color: #E8ECE7;
  padding: 1.2em 1.4em;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: .86rem;
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-media { margin-bottom: 0; }
.entry-media__img { border-radius: var(--r-lg); width: 100%; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted-2);
  letter-spacing: .02em;
  text-transform: none;
  margin-bottom: 1rem;
}

/* cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.card-post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #d5d9d1;
}
.card-post__media { display: block; overflow: hidden; background: var(--surface); }
.card-post__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card-post:hover .card-post__media img { transform: scale(1.03); }
.card-post__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(20px, 2.2vw, 26px);
  flex: 1;
}
.card-post__cat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--green-soft);
}
.card-post__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0;
}
.card-post__title a { color: var(--ink); text-decoration: none; }
.card-post__title a:hover { color: var(--green); }
.card-post__excerpt {
  font-size: .89rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.card-post .post-meta { margin: auto 0 0; padding-top: .6rem; }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* search */
.search-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.search-form__field {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .78em 1.05em;
  font: inherit;
  font-size: .93rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.search-form__field::placeholder { color: var(--muted-2); }
.search-form__field:focus {
  outline: none;
  border-color: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(109, 142, 126, .14);
}

/* pagination + empty */
.navigation.pagination { margin-top: clamp(30px, 4vw, 52px); }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: .7em;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: .87rem;
  color: var(--body);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-links .page-numbers:hover { background: var(--surface); border-color: #ccd2ca; }
.nav-links .current {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.nav-links .dots { border-color: transparent; }

.empty {
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
}

/* 404 */
.notfound__form { margin: 1.8rem 0; max-width: 26rem; }

/* 404: tekst links, beeld rechts. Het beeld is decoratief maar niet leeg:
   de ontbrekende schakel zegt hetzelfde als de kop, zonder tekst erover. */
.notfound__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.notfound__tekst > * { max-width: 34rem; }
.notfound__beeld { margin: 0; }
.notfound__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 22px);
}
.notfound__hint { margin: 0 0 .5rem; font-size: .875rem; color: var(--ink-soft, #5C6660); }
.notfound__lijst {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.notfound__lijst a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45em .9em;
  border: 1px solid var(--line, #DADDD7);
  border-radius: 999px;
  font-size: .875rem;
  text-decoration: none;
}
.notfound__lijst a:hover { border-color: var(--green, #536D62); }

@media (max-width: 820px) {
  .notfound__grid { grid-template-columns: 1fr; }
  /* Op mobiel eerst de tekst, dan het beeld: de bezoeker wil weten waar hij is,
     niet naar een illustratie kijken. */
  .notfound__beeld { order: 2; }
}

/* comments */
.comments { margin-top: 2rem; }
.comments__title {
  font-size: 1.4rem;
  margin-bottom: 1.4rem;
}
.comments__list {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}
.comments__list .comment-body {
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  font-size: .94rem;
}
.comments__list .comment-meta { margin-bottom: .6rem; font-size: .8rem; color: var(--muted); }
.comments__list .avatar { border-radius: 50%; float: left; margin-right: 14px; }
.comments__list .children { list-style: none; padding-left: 1.6rem; }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-size: .82rem; font-weight: 500; margin-bottom: .35rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .75em 1em;
  font: inherit;
  font-size: .93rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .submit {
  display: inline-flex;
  padding: .82em 1.5em;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  cursor: pointer;
}
.comment-form .submit:hover { background: #47605a; }

/* widgets in sidebar */
.widget { margin-bottom: 2.2rem; }
.widget__title { font-size: 1.05rem; margin-bottom: .8rem; }

/* ============================================================
   16. Mobiele verfijning
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16.5px; }

  .eyebrow {
    font-size: 12px;
    letter-spacing: .11em;
    margin-bottom: 1.1rem;
  }

  .brand__tag { font-size: 12px; letter-spacing: .15em; }

  .hero { padding-block: 18px 4px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 2.9rem); }
  .hero__lede { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero .btn-row { margin-bottom: 1.6rem; gap: .55rem; }
  .hero .btn--lg { flex: 1 1 100%; }
  .hero__bullets li { font-size: .88rem; }
  .hero-visual { margin-top: 14px; }

  /* Eén pijler per regel: horizontale rijen lezen op mobiel prettiger dan
     een raster van twee kolommen met een halflege laatste regel. */
  .features__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-block: 18px;
  }
  .feature {
    flex-direction: row;
    align-items: flex-start;
    gap: .9rem;
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .feature:first-child { border-top: 0; padding-top: 0; }
  .feature:last-child { padding-bottom: 0; }
  .feature__icon { width: 32px; height: 32px; margin-bottom: 0; flex: none; }
  .feature__title { font-size: .95rem; }
  .feature__text {
    font-size: .9rem;
    min-height: 0;
    max-width: none;
    margin-top: .25rem;
  }

  /* Geen padding op .module zelf: die zit in .module__body, zodat het beeld
     de kaartrand raakt. Padding hier zou het beeld 21px naar binnen duwen. */
  .module { min-height: 0; padding: 0; }
  .module__title { font-size: 1.12rem; }
  .module__text { font-size: .89rem; }

  .steps { gap: 26px; }
  .step__number { font-size: .78rem; }
  .step__title { font-size: 1.15rem; }
  .step__text { font-size: .92rem; }

  .faq__q { font-size: 1rem; padding: 1rem 0; }
  .faq__a { padding: 0 1.4rem 1.2rem 0; }
  .faq__a p { font-size: .93rem; }

  .cta-band__text { font-size: .95rem; }
  .cta-band__btn { width: 100%; justify-content: center; }

  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .footer__note,
  .footer__copy,
  .footer__legal a { font-size: .84rem; }
  .footer__list a { font-size: .92rem; }
}

/* ============================================================
   17. Loginpagina
   ============================================================ */
.auth {
  padding-block: clamp(40px, 7vw, 96px);
}

.auth__card {
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 44px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 60px -40px rgba(32, 40, 37, .35);
}

.auth__head {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 30px);
}

.auth__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: .7rem;
  border-radius: 50%;
  background: var(--bg-warm);
}

.auth__mark picture { display: block; }
.auth__mark img {
  width: 44px;
  height: auto;
  display: block;
}

.auth__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}

.auth__intro {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

.auth__form { margin: 0; }

.auth__field {
  margin: 0 0 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .38rem;
}

/* Het hidden-attribuut moet altijd winnen van een display-regel.
   Zonder dit blijft een [hidden] flex/grid-element gewoon zichtbaar. */
[hidden] { display: none !important; }

.auth__label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth__input {
  width: 100%;
  padding: .82em 1.05em;
  font: inherit;
  font-size: 1rem; /* 16px voorkomt zoom-op-focus op iOS */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.auth__input::placeholder { color: var(--muted-2); }

.auth__input:focus {
  outline: none;
  border-color: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(109, 142, 126, .16);
}

.auth__input--code {
  letter-spacing: .18em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* De ruime letterafstand is voor de ingevulde code, niet voor de uitleg. */
.auth__input--code::placeholder {
  letter-spacing: normal;
  font-variant-numeric: normal;
}

.auth__hint {
  margin: .2rem 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--body);
}

.auth__hint a { color: var(--green); }

.auth__field--mfa { margin-top: -.2rem; }

.btn--block {
  width: 100%;
  padding-block: .95em;
}

.auth__links {
  margin: .9rem 0 0;
  text-align: center;
}

.auth__link {
  padding: .3em .2em;
  font: inherit;
  font-size: .88rem;
  color: #93604F; /* 5.2:1 op wit; --terra haalt 4.12:1 niet voor kleine tekst */
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.auth__link:hover { color: var(--ink); }

.auth__forgot {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}

.auth__forgot .btn { margin-top: .3rem; }

.auth__alert {
  margin: 0 0 1.1rem;
  padding: .8em 1em;
  font-size: .9rem;
  line-height: 1.5;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-warm);
  color: var(--body);
}

.auth__alert--error {
  border-color: #d8b4ac;
  background: #fbf1ee;
  color: #8a3a26;
}

.auth__alert--info {
  border-color: var(--green-line);
  background: #f1f5f1;
  color: #35564a;
}

.auth__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: .9rem;
  color: var(--body);
}

.auth__foot a { color: var(--green); }

@media (max-width: 480px) {
  .auth__card {
    padding: 22px 18px;
    border-radius: var(--r-md);
  }
}

/* ---- Tonen en grid-posities als klassen (geen inline styles i.v.m. CSP) ---- */
.hv-card--tone-green { --tone: #6D8E7E; --tint: #EAF0EA; }
.hv-card--tone-teal { --tone: #6693A0; --tint: #E6EEF0; }
.hv-card--tone-blue { --tone: #7C93B0; --tint: #EAEDF2; }
.hv-card--tone-sand { --tone: #B47762; --tint: #F5ECE5; }
.hv-card--tone-mauve { --tone: #A9717A; --tint: #F4EBEC; }
.hv-card--tone-terra { --tone: #A86F5C; --tint: #F6EDE8; }
.hv-card--tone-gold { --tone: #C49A61; --tint: #F6F0E4; }

.hv-card--area-workers { grid-area: 1 / 2 / 2 / 3; }
.hv-card--area-plato { grid-area: 2 / 1 / 3 / 2; }
.hv-card--area-interface { grid-area: 3 / 1 / 4 / 2; }
.hv-card--area-memory { grid-area: 2 / 3 / 3 / 4; }
.hv-card--area-portaal { grid-area: 3 / 3 / 4 / 4; }

/* Vijf tonen, alle vijf uit het palet van de site (groen, salie, terra, goud,
   leisteen). Ze verschillen in tint maar niet in verzadiging: naast elkaar
   moeten ze als één familie lezen, niet als vijfkleurig. */
.module--tone-green { --module-tone: #536D62; --module-tint: #E8EEE9; }
.module--tone-teal  { --module-tone: #6D8E7E; --module-tint: #EBF0EC; }
.module--tone-sand  { --module-tone: #A86F5C; --module-tint: #F5EBE7; }
.module--tone-blue  { --module-tone: #B08A52; --module-tint: #F5EFE4; }
.module--tone-mauve { --module-tone: #5F7181; --module-tint: #E9EDF0; }
.module--tone-terra { --module-tone: #A86F5C; --module-tint: #F6EDE8; }
.module--tone-gold { --module-tone: #C49A61; --module-tint: #F6F0E4; }

/* --- Waar je op kunt rekenen (voorpagina) --------------------------------
   Vier beloftes die we ook echt kunnen nakomen, met de bron erbij. Bewust geen
   logo's, cijfers of certificaten: die zijn er niet, en een halve waarheid op dit
   punt kost meer vertrouwen dan een lege plek. */
.reassure__grid {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.reassure__item { margin: 0; }
.reassure__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: .7rem;
  background: #fff;
  border: 1px solid var(--line-soft);
  color: var(--green);
}
.reassure__item h3 {
  font-family: var(--font-sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 .35rem;
  line-height: 1.3;
}
.reassure__item p {
  font-size: .87rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
.reassure__more { margin: clamp(22px, 3vw, 34px) 0 0; }
@media (max-width: 900px) {
  .reassure__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .reassure__grid { grid-template-columns: 1fr; }
}

/* Ankersprongen: de header plakt boven de pagina. Zonder marge landt een sectie
   eronderdoor en verdwijnt de bovenregel achter de navigatie -- precies wat er op
   mobiel gebeurde bij #zekerheid. Gemeten hoogte is 77 px op beide breedtes. */
:root { --header-h: 77px; }
section[id], .section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* --- Hub-kaarten (/platform/, /toepassingen/) ---------------------------
   De hubpagina's hadden alleen een titel: een bezoeker die in het menu op
   "Platform" klikte, kwam op een lege pagina. Deze kaarten geven elk onderdeel
   een ingang zonder dat de hub zelf een verkooppagina wordt. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: 1.6em 0 2.4em;
}
.hub-grid--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hub-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 24px);
  background: var(--white, #fff);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.hub-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(31, 41, 36, .08));
}
.hub-card__num {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--terra);
  margin-bottom: .55rem;
}
.hub-card h3 {
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .45rem;
}
.hub-card p {
  font-size: .89rem;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 1rem;
}
.hub-card__more {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 550;
  color: var(--green);
}
.hub-card__more::after { content: " \2192"; }

@media (max-width: 900px) {
  .hub-grid, .hub-grid--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hub-grid, .hub-grid--twee { grid-template-columns: 1fr; }
}