/* Geborgd journey-site. Maximaal minimalistisch: één ding tegelijk in beeld,
   vrijwel monochroom, mint alleen waar het iets betekent. */

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

/* Geen scroll-behavior: smooth hier: dat vecht met Lenis (bekend conflict).
   Lenis verzorgt zelf het zachte scrollen; zonder JavaScript scrolt de pagina gewoon direct. */

body {
  margin: 0;
  color: var(--gb-ink);
  background: var(--gb-paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

.technical-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Knoppen ---------- */

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.button-primary {
  color: var(--gb-ink);
  background: var(--gb-mint);
}

.button-primary:hover {
  background: #45c8a1;
}

.button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(87, 214, 176, 0.4);
  outline-offset: 3px;
}

/* ---------- Header: logo, vijf-pilaren-navigatie, demo-knop ----------
   Was "geen menu"; de vijf pilaren vullen nu de lege ruimte tussen logo
   en demo-knop (herstructurering 01-08, stap 4) -- zelfde mentale model
   als het pilaren-component verderop op de pagina. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  color: var(--gb-white);
  transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.site-header .brand img {
  height: 34px;
  width: auto;
}

/* Let op: geen display op ".brand img" zetten; dat wint qua specificiteit
   van de variant-regels hieronder en dan staan beide logo's tegelijk aan */
.site-header .brand-licht { display: block; }
.site-header .brand-donker { display: none; }

/* Bovenaan (over de donkere hero): donkere-achtergrond-logo, transparante balk */
.site-header.op-hero {
  background: transparent;
}
.site-header.op-hero .brand-licht { display: none; }
.site-header.op-hero .brand-donker { display: block; }

/* Na de hero: witte balk met subtiele lijn, donkere tekst/logo */
.site-header:not(.op-hero) {
  background: rgba(247, 249, 248, 0.94);
  box-shadow: 0 1px 0 var(--gb-line);
  color: var(--gb-ink);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-nav a {
  text-decoration: none;
  color: inherit;
  opacity: 0.8;
}

.site-nav a:hover {
  opacity: 1;
}

.site-header-acties {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nav-toggle-streep {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 64rem) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1rem;
    background: var(--gb-ink);
    color: var(--gb-white);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(247, 249, 248, 0.12);
    opacity: 1;
  }

  .nav-toggle {
    display: flex;
  }
}

/* ---------- Scène-basis ---------- */

.scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 5vw, 2.5rem);
  overflow: hidden;
}

/* Atmosfeer: één doorlopende lucht over de hele journey (Atmos-principe:
   de wereld is continu, de inhoud schuift erdoorheen). Viewport-vast,
   boven de sectie-achtergronden, onder alle inhoud. De gloed werkt op
   licht én donker; de harde kleurgrenzen van de secties blijven intact. */
.atmosfeer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Beweging (drift met de scroll plus langzaam ademen) komt volledig uit
   GSAP; CSS-animaties zouden hier met de transform-sturing vechten. */
.gloed {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.gloed-a {
  width: 58vmax;
  height: 58vmax;
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, rgba(87, 214, 176, 0.10), transparent 62%);
}

.gloed-b {
  width: 44vmax;
  height: 44vmax;
  top: 45%;
  right: -14vmax;
  background: radial-gradient(circle, rgba(247, 249, 248, 0.07), transparent 62%);
}

.scene-inhoud {
  position: relative; /* boven de sfeerlaag en de overloop-verlopen */
  z-index: 2;
}

.scene-inhoud {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.scene-tekst {
  max-width: 34rem;
}

.scene-donker {
  color: var(--gb-white);
  background: var(--gb-ink);
}

.scene-donker h1,
.scene-donker h2,
.scene-donker h3 {
  color: var(--gb-white);
}

/* ---------- Scène 0: hero ---------- */

.hero {
  text-align: center;
  overflow: hidden;
}

/* Ademende sfeerlaag: tijdelijke CSS-variant, wordt in fase 4 een shader */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(60% 50% at 30% 70%, rgba(87, 214, 176, 0.10), transparent 70%),
    radial-gradient(50% 45% at 75% 25%, rgba(87, 214, 176, 0.06), transparent 70%);
  animation: hero-adem 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes hero-adem {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

.hero .scene-inhoud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hero-eyebrow {
  color: rgba(247, 249, 248, 0.55);
}

.hero-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 249, 248, 0.3);
}

.hero-eyebrow a:hover {
  color: #ffffff;
  border-bottom-color: rgba(247, 249, 248, 0.6);
}

.hero h1 {
  max-width: 17ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.button-outline-donker {
  color: var(--gb-white);
  background: transparent;
  border-color: rgba(247, 249, 248, 0.35);
}

.button-outline-donker:hover {
  border-color: var(--gb-white);
}

.hero .subregel {
  max-width: 44ch;
  color: rgba(247, 249, 248, 0.75);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.hero .klein {
  color: rgba(247, 249, 248, 0.55);
  font-size: 0.9rem;
}

.hero .payoff {
  margin-top: var(--space-4);
  color: rgba(247, 249, 248, 0.5);
}

.scroll-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247, 249, 248, 0.45);
  font-size: 1.4rem;
  line-height: 1;
  animation: hint-zweef 2.4s ease-in-out infinite;
}

@keyframes hint-zweef {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ---------- Scène 2: de inzet ---------- */

.inzet .scene-inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.inzet-slag {
  max-width: 40ch;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
}

.inzet-afsluiter {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
}

/* ---------- Scène 3: de ommekeer ---------- */

.ommekeer {
  border-top: 1px solid var(--gb-line);
  /* min-height:auto liet de GEPINDE box (position:fixed tijdens de
     scroll-lock) korter zijn dan de viewport -- daaronder bleef een
     kale strook van tientallen tot honderden pixels zichtbaar, heel de
     vastgezette scroll lang (review Abdul, "waarom zoveel ruimte,
     alles lijkt te hoog geplaatst"). Terug naar 100svh zodat de
     gepinde box altijd het hele scherm vult; de padding van .scene
     staat hier op 0 en verhuist naar .scene-inhoud hieronder, zodat
     .ommekeer-canvas (inset:0) de ECHTE sectierand raakt. */
  min-height: 100svh;
  align-items: flex-start;
  padding: 0;
  position: relative;
}

/* Losse achtergrondkleur op .ommekeer proberen te laten matchen met de
   video (~rgb 240,240,238) loste de naad tussen canvas en sectie op,
   maar maakte de overgang naar .pilarenoverzicht (puur wit) juist
   opvallender (review Abdul, "kijk deze rand onderin, dat is niet
   netjes" -- de rand bleek de sectie-overgang, niet de canvas-rand).
   Een vervaag-gradiënt lost beide in één keer op: waar de canvas
   precies eindigt en welke exacte tint hij heeft, doet er niet meer
   toe, want de onderste ~10rem lossen sowieso op naar wit, exact de
   kleur van de volgende sectie. */
.ommekeer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  z-index: 1;
  pointer-events: none;
}

.ommekeer .scene-inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 50rem;
  padding: clamp(6rem, 14vh, 9rem) clamp(1rem, 5vw, 2.5rem) clamp(9rem, 20vh, 14rem);
  text-align: center;
}

/* Mini-jaargrafiek in het rapport-vignet (nalevingsweergave) */
.ui-grafiek {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 64px;
}

.ui-staaf {
  flex: 1;
  height: var(--h, 100%);
  border-radius: 3px 3px 0 0;
  background: var(--gb-line);
  transform-origin: bottom;
}

.ui-staaf.aandacht {
  background: #e3a72f;
}

.ui-regel.klein-label {
  font-size: 0.75rem;
  color: var(--gb-gray);
}

.ommekeer-kernzin {
  max-width: 18ch;
}

.drieluik {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.drieluik li {
  flex: 1 1 220px;
  max-width: 300px;
  padding: var(--space-3);
  background: #ffffff;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-large);
  text-align: left;
}

.drieluik .stap-nummer {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gb-gray);
}

.drieluik h3 {
  margin: 0.35rem 0 0.35rem;
  font-size: 1.15rem;
}

.drieluik p {
  color: var(--gb-gray);
  font-size: 0.95rem;
}

.ommekeer-canvas {
  /* object-fit:cover koppelde de schaal van het beeld aan de
     sectiehoogte: elke keer dat de padding veranderde, verschoof de
     papierstapel mee (soms tot ver onder de kaarten, soms er half
     onder) -- niet te voorspellen (review Abdul, "waarom zoveel ruimte
     onderaan, lijkt of er iets afgehaald is"). Nu vaste, voorspelbare
     schaal via aspect-ratio (schaal hangt alleen van de breedte af, niet
     van de sectiehoogte). top:-11vh (i.p.v. bottom:0) plaatst de
     papierstapel dicht onder de kaarten -- was eerst bottom:0, maar
     samen met min-height:100svh (zie .ommekeer) landde de stapel dan
     ver onderin een volle viewport. Het bovenste deel van het beeld
     (lege witruimte in de bron) en eventueel een klein stukje onderaan
     mogen buiten de sectie vallen -- .scene heeft overflow:hidden, en
     de video-achtergrond (rgb 239,239,237) ligt zo dicht bij --gb-paper
     (#f5f7f6) dat een eventuele naad niet opvalt. */
  position: absolute;
  left: 0;
  right: 0;
  top: -11vh;
  width: 100%;
  height: auto;
  aspect-ratio: 1916 / 1080;
  z-index: 0;
}

/* ---------- Scène 4: bewijsvignetten ----------
   Standaard (dit blok): een gewone doorlopende lijst, ieder vignet in de
   normale document-flow -- de veilige toestand zonder JavaScript.
   Wanneer GSAP wél draait, zet main.js zelf (niet hier in CSS, zelfde
   principe als de rest van dit bestand: "beginstanden worden in JS
   gezet") de vignetten om naar een gepinde, gestapelde sequentie waarin
   ze in elkaar morphen. Faalt GSAP of staat reduced-motion aan, dan blijft
   deze gewone lijst gewoon staan: nooit een lege of overlappende pagina. */

.vignetten {
  display: block;
  /* min-height (niet 0): zonder JS groeit dit gewoon mee met de 4 normale-
     flow vignetten; mét JS pint GSAP dit element en heeft het een echte
     hoogte nodig OP HET MOMENT dat de pin wordt aangemaakt -- anders meet
     GSAP een hoogte van 0 (de kinderen staan dan al op position:absolute,
     dus ze tellen niet mee voor de auto-hoogte) en klapt de sectie in. */
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: clamp(1rem, 5vw, 2.5rem);
  padding-right: clamp(1rem, 5vw, 2.5rem);
  box-sizing: border-box;
  border-top: 1px solid var(--gb-line);
}

.vignet {
  display: flex;
  align-items: center;
  min-height: 90svh;
  padding: var(--space-6) 0;
}

/* Breder dan de standaard --container: de video is het belangrijkste
   element hier en oogde klein (review Abdul 01-08, "de video's moeten
   allemaal iets groter"). Blijft ruim onder de 1200px-brede bronbeelden,
   dus geen kwaliteitsverlies door opschalen. */
@media (min-width: 78rem) {
  .vignet .scene-inhoud {
    max-width: 1400px;
  }
}

.vignet .scene-inhoud {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}

.vignet .scene-inhoud {
  perspective: 1000px; /* de kaart landt als een vel papier, in 3D */
}

@media (min-width: 64rem) {
  .vignet .scene-inhoud {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-6);
  }
}

/* De kaart is nu een echte, scroll-scrubbed video-opname (canvas), geen
   nagebouwde HTML-UI meer. GEEN eigen kader/schaduw/achtergrond hier: de
   video draagt zelf al exact --gb-paper als achtergrond en een eigen
   paneel-schaduw. Een tweede kader eromheen gaf een "kaart-in-een-kaart"
   met een waas ertussen (review Abdul 01-08) -- dus laat het canvas
   gewoon in de paginakleur opgaan. */
.vignet-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 540;
}

.vignet h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  max-width: 18ch;
}

.vignet .toelichting {
  margin-top: var(--space-2);
  max-width: 44ch;
  color: var(--gb-gray);
}

/* ---------- Tien cao-artikelen: scrollende opsomming ---------- */

.artikelen {
  /* Geen border-top en geen eigen achtergrondkleur: dit is de directe
     voortzetting van de gepinde vignetten hierboven, geen nieuwe sectie
     (review Abdul 01-08). border-bottom blijft, dat scheidt wel echt van
     Scène 5 hierna.
     Kleinere padding dan de standaard .scene (die was hoger dan het
     scherm, waardoor een pin de onderste kaartenrij buiten beeld zou
     duwen -- review Abdul 02-08, "ik ga of te ver naar beneden of
     omhoog"): dit + de 4-koloms grid hieronder maken de sectie kort
     genoeg om als geheel op één scherm te passen. */
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  background: var(--gb-paper);
  border-bottom: 1px solid var(--gb-line);
}

.artikelen .scene-inhoud {
  max-width: 68rem;
}

.artikelen-kop {
  text-align: center;
  margin-bottom: var(--space-4);
}

.artikelen-kop .technical-label {
  color: var(--gb-mint-text);
}

.artikelen-kop h2 {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.artikelen-kop .toelichting {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--gb-gray);
}

.artikelen-teller {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--gb-gray);
}

.artikelen-teller [data-teller] {
  display: inline-block;
  min-width: 1.1em;
  font-weight: 600;
  color: var(--gb-mint-text);
}

/* Kaartengrid i.p.v. één lange kolom: 10 rijen onder elkaar oogde zwaar
   ná zes video's (review Abdul 01-08). 4 kolommen op desktop (was 3),
   2 op tablet, 1 op mobiel -- elke kaart triggert nog gewoon zijn
   eigen scroll-reveal (".artikel-rij" in main.js), dat blijft
   ongewijzigd. 4 i.p.v. 3 kolommen: 10 kaarten worden dan 3 rijen
   (4+4+2) i.p.v. 4 rijen (3+3+3+1) -- nodig om de sectie kort genoeg
   te maken voor de nieuwe pin hieronder (review Abdul 02-08, zie
   .artikelen hierboven). */
.artikelenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .artikelenlijst {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .artikelenlijst {
    grid-template-columns: repeat(4, 1fr);
  }
}

.artikel-rij {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-areas:
    "badge nr"
    "badge titel"
    "uitleg uitleg";
  align-items: start;
  column-gap: var(--space-2);
  row-gap: 0.25rem;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-large);
  box-shadow: 0 10px 28px rgba(24, 36, 43, 0.05);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .artikel-rij:hover {
    border-color: rgba(87, 214, 176, 0.4);
    transform: translateY(-0.2rem);
    box-shadow: 0 16px 32px rgba(24, 36, 43, 0.09);
  }
  .artikel-rij:hover .artikel-badge {
    transform: scale(1.08);
  }
}

/* Genummerde badge die bij binnenkomst omklapt naar een vinkje --
   het cijfer is de "wachtrij", het vinkje is "al bewaakt". */
.artikel-badge {
  grid-area: badge;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--gb-line);
  background: #ffffff;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.artikel-badge-nr,
.artikel-badge-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: opacity 0.25s ease, scale 0.3s ease;
}

.artikel-badge-nr {
  color: var(--gb-gray);
  opacity: 1;
  scale: 1;
}

.artikel-badge-check {
  color: var(--gb-mint-text);
  width: 1rem;
  height: 1rem;
  opacity: 0;
  scale: 0.5;
}

.artikel-rij.is-bewaakt .artikel-badge {
  border-color: var(--gb-mint);
  background: rgba(87, 214, 176, 0.12);
}

.artikel-rij.is-bewaakt .artikel-badge-nr {
  opacity: 0;
  scale: 0.5;
}

.artikel-rij.is-bewaakt .artikel-badge-check {
  opacity: 1;
  scale: 1;
}

.artikel-nr {
  grid-area: nr;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--gb-mint-text);
  padding-top: 0.15rem;
}

.artikel-titel {
  grid-area: titel;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gb-ink);
}

.artikel-uitleg {
  grid-area: uitleg;
  color: var(--gb-gray);
  font-size: 0.9375rem;
}

/* ---------- Scène 4.5: de vijf pilaren-overzicht ----------
   Kale variant van hetzelfde pilaren-component dat op de losse
   pilaarpagina's en in de Normcheck-uitslag staat (js/pilaren-data.js).
   Bewust GEEN styles/pilaren.css hier: die herdefinieert .button voor de
   multi-paginasite, dat zou de bestaande hero/CTA-knoppen op deze pagina
   overschrijven. Dezelfde kaart-look, lokaal herhaald, zonder de
   pgrid-afhankelijkheid (hier gewoon binnen de normale .scene-inhoud). */

.pilarenoverzicht {
  background: #ffffff;
  border-bottom: 1px solid var(--gb-line);
  padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 5vw, 2.5rem);
}

.pilarenoverzicht .scene-inhoud {
  max-width: 1400px;
}

.pilarenoverzicht-kop {
  max-width: 44rem;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.pilarenoverzicht-kop h2 {
  margin: 0.5rem 0;
}

.pilarenoverzicht-kop .toelichting {
  color: var(--gb-gray);
  margin: 0 auto;
  max-width: 44ch;
}

.pilarenoverzicht-kop .button {
  margin-top: var(--space-3);
}

.button-outline {
  color: var(--gb-ink);
  background: transparent;
  border-color: var(--gb-line);
}

.button-outline:hover {
  border-color: var(--gb-mint);
}

.pilaren-dak,
.pilaren-fundament {
  text-align: center;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-medium);
  font-size: 0.9rem;
}

.pilaren-dak {
  background: var(--gb-paper);
  color: var(--gb-gray);
  margin-bottom: 0.75rem;
}

.pilaren-dak strong {
  color: var(--gb-ink);
}

.pilaren-fundament {
  background: var(--gb-ink);
  color: #ffffff;
  margin-top: 0.75rem;
  padding: 1.1rem 1rem;
  font-weight: 600;
}

.pilaren-fundament span {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.25rem;
}

.pilaren-rij {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

/* Onder 900px stapelen de vijf kaarten verticaal -- vijf (of twee)
   kolommen naast elkaar is daaronder onleesbaar (herstructurering 01-08,
   controlepunt 5). */
@media (max-width: 56.25rem) {
  .pilaren-rij {
    grid-template-columns: 1fr;
  }
}

/* Flex-kolom i.p.v. block: zo kan de gevolg-pil met margin-top:auto
   naar de onderkant geduwd worden, ongeacht hoeveel bewijslast-tekst
   erboven staat (review Abdul 02-08, pillen op gelijke hoogte over de
   5 kaarten voor betere scanbaarheid). */
.pilaar-kaart {
  display: flex;
  flex-direction: column;
  /* grid-items respecteren standaard min-width:auto (de intrinsieke
     min-content-breedte van de tekst erin) -- zonder deze regel dwingt
     lange, onbreekbare tekst (bijv. "Waadi/WTTA-registratie
     onderaannemers" in pilaar 4) de kolom, en daarmee de hele rij en
     pagina, breder dan het scherm (Blok D3, geconstateerd bij 900px:
     1185px brede rij in een 900px viewport, horizontale overflow). */
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: var(--gb-paper);
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-medium);
  padding: 1.1rem 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pilaar-kaart:hover {
  border-color: var(--gb-mint);
  transform: translateY(-2px);
}

.pilaar-kaart.is-actief {
  border-color: var(--gb-mint);
  background: rgba(87, 214, 176, 0.06);
}

.pilaar-nr {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gb-mint-text);
  letter-spacing: 0.06em;
}

.pilaar-naam {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.35rem 0 0.5rem;
}

.pilaar-handhaver {
  font-size: 0.8rem;
  color: var(--gb-gray);
  margin: 0 0 0.5rem;
}

.pilaar-bewijslast {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--gb-gray);
}

.pilaar-bewijslast li {
  padding-left: 0.9rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.pilaar-bewijslast li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gb-line);
}

/* Standaard: geen gekleurde pastel-pil (las als generieke AI-badge,
   review Abdul -- en de site is verder vrijwel monochroom, rood komt
   nergens anders voor). Wel als eigen neutraal label-chipje (review
   Abdul 02-08, "vind de gevolgen die er in staan onopvallend... het
   hoeft geen AI te screewen maar wel duidelijk aanwezig") -- puur
   inline tekst verdween te veel in de rest van de kaarttekst. Chip
   blijft grijstinten, geen kleur, dus geen terugval naar het
   alarm-badge-gevoel.
   Lettertype bewust Inter (font-body), niet IBM Plex Mono: dit is
   inhoud die je moet lézen (het gevolg als een pilaar faalt), geen
   code/datum -- huisstijl (GEBORGD-WEBSITE-HUISSTIJL.md §4) reserveert
   mono voor "codes, datums en technische labels". Mono + hoofdletters
   + bold samen maakte langere woorden juist minder scanbaar (review
   Abdul, "leesbaarheid is niet goed"). Bij een Normcheck-uitslag
   (status-klassen) is de kleur wél functioneel (echte pas/aandacht/
   fout-status) en komt de pil terug, zie hieronder. */
.pilaar-risico {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(24, 36, 43, 0.06);
  border: 1px solid rgba(24, 36, 43, 0.12);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gb-ink);
}

.pilaar-risico::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gb-ink);
}

.pilaar-kaart.status-groen,
.pilaar-kaart.status-oranje,
.pilaar-kaart.status-rood {
  --status-tekst: var(--gb-ink);
  --status-bg: transparent;
}
.pilaar-kaart.status-groen  { border-color: #57d6b0; --status-tekst: #17663f; --status-bg: #e2f4ea; }
.pilaar-kaart.status-oranje { border-color: #e3a72f; --status-tekst: #795611; --status-bg: #fbf0d5; }
.pilaar-kaart.status-rood   { border-color: #d95c5c; --status-tekst: #a13636; --status-bg: #fbe3e3; }

.pilaar-kaart.status-groen .pilaar-risico,
.pilaar-kaart.status-oranje .pilaar-risico,
.pilaar-kaart.status-rood .pilaar-risico {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--status-tekst);
  background: var(--status-bg);
}

.pilaar-kaart.status-groen .pilaar-risico::before,
.pilaar-kaart.status-oranje .pilaar-risico::before,
.pilaar-kaart.status-rood .pilaar-risico::before {
  display: none;
}

/* UI-nabouw (fase 4): schone, geanonimiseerde weergave van echte Geborgd-schermen */
.ui-mockup {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 240px;
  padding: var(--space-3);
  background: #ffffff;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-large);
  box-shadow: 0 14px 40px rgba(24, 36, 43, 0.07);
  font-size: 0.9rem;
}

.ui-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gb-line);
}

.ui-titel {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gb-ink);
}

.ui-mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gb-gray);
}

.ui-regel {
  color: var(--gb-gray);
}

/* Rooster-rijen (cao-vignet) */
.ui-rij {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.ui-naam {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500;
  color: var(--gb-ink);
}

/* Alleen in rooster-rijen krijgt de naam een vaste kolombreedte zodat de
   diensten netjes uitlijnen; in gewone regel-rijen mag het label de ruimte
   nemen en breekt er niets raars af */
.ui-rij .ui-naam {
  flex: 0 0 8.5rem;
}

.ui-vervanger .ui-naam {
  flex: 1 1 auto;
  min-width: 0;
}

.ui-vervanger .ui-melding {
  flex: 0 0 auto;
}

/* Foto-avatar (Pexels, fictieve medewerkers): herkenbaar als planningssysteem */
.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gb-line);
}

.ui-dienst {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-small);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gb-ink);
  background: var(--gb-paper);
}

.ui-dienst.nacht {
  background: var(--gb-ink);
  color: var(--gb-white);
  border-color: var(--gb-ink);
}

/* Vervanger- en controleregels (ziek- en inklok-vignet) */
.ui-vervanger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-small);
}

/* Statusmeldingen, conform huisstijl: kleur nooit zonder tekst of icoon */
.ui-melding {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-small);
  font-size: 0.8125rem;
  font-weight: 600;
  align-self: flex-start;
}

.ui-melding.klein {
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
}

.ui-melding.ok           { color: #17663f; background: #e2f4ea; }
.ui-melding.waarschuwing { color: #795611; background: #fbf0d5; }
.ui-melding.fout         { color: #8d3030; background: #f9e3e3; }

.ui-mockup > .ui-melding {
  margin-top: auto;
}

.ui-percentage {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gb-ink);
}

/* ---------- Scène 5: waarom wij ---------- */

.waarom .scene-tekst {
  margin: 0 auto;
  text-align: center;
}

.waarom h2 {
  max-width: 22ch;
  margin: 0 auto;
}

/* Losse feiten-chips i.p.v. ze in de kopzin te proppen (review Abdul
   02-08, "de indeling van de tekst is niet echt mooi" -- de vorige kop
   had alle 4 feiten in één zin, met een lelijke terugloop tot gevolg).
   Zelfde chip-taal als .pilaar-risico (site.css), voor visuele
   consistentie tussen de secties. */
.waarom-feiten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.waarom-feiten li {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(24, 36, 43, 0.06);
  border: 1px solid rgba(24, 36, 43, 0.12);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gb-ink);
}

.waarom .toelichting {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  color: var(--gb-gray);
}

.breedte {
  margin-top: var(--space-5);
  color: var(--gb-gray);
  font-size: 0.9rem;
}

/* Stapel voor de twee fasen (feiten / bewijs) die JS over elkaar heen
   scrubt tijdens de .waarom-pin. Zonder JS/reduced-motion blijft dit
   gewoon twee normale blokken onder elkaar -- position:relative hier
   heeft dan geen effect, de height wordt pas door JS vastgezet op het
   moment dat de fasen position:absolute krijgen (zelfde reden als
   .vignetten hierboven: anders meet GSAP een hoogte van 0). */
.waarom-stapel {
  position: relative;
  width: 100%;
}

/* ---------- Scène 6: prijs en slot ---------- */

.slot .scene-inhoud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.slot .prijs {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.slot .prijs-detail {
  color: rgba(247, 249, 248, 0.7);
}

.slot .prijs-vergelijking {
  max-width: 48ch;
  color: rgba(247, 249, 248, 0.6);
  font-size: 0.95rem;
  line-height: 1.6;
}

.prijs-staffel {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  width: 100%;
  max-width: 28rem;
  border-top: 1px solid rgba(247, 249, 248, 0.15);
}

.prijs-staffel li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0.2rem;
  border-bottom: 1px solid rgba(247, 249, 248, 0.15);
  font-size: 0.95rem;
}

.prijs-staffel .staffel-groep {
  color: rgba(247, 249, 248, 0.65);
}

.prijs-staffel .staffel-bedrag {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* ---------- Prijsvergelijking: typisch gelaagd pakket vs Geborgd ----------
   Bewust GEEN <table>: op mobiel breekt een brede tabel (zelfde reden als
   de mobiele scroll-effecten fix elders vandaag, zie main.js/storm.js).
   Bewust GEEN Secusoft-achtige tabelvormgeving (review Abdul): geen
   gekleurde kolomkoppen, geen ribbon/badge, geen dikke kaderrand, geen
   rijstriping -- platte tekst, dunne lijnen, dezelfde rgba-op-donker
   conventie als .prijs-staffel hierboven. */
.prijs-vgl {
  width: 100%;
  max-width: 40rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  border-top: 1px solid rgba(247, 249, 248, 0.15);
  text-align: left;
}

.prijs-vgl-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-3);
  row-gap: 0.3rem;
  padding: var(--space-2) 0.2rem;
  border-bottom: 1px solid rgba(247, 249, 248, 0.15);
}

.prijs-vgl-kenmerk {
  grid-column: 1 / -1;
  color: rgba(247, 249, 248, 0.4);
  margin: 0 0 0.2rem;
}

.prijs-vgl-typisch,
.prijs-vgl-geborgd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.prijs-vgl-typisch {
  color: rgba(247, 249, 248, 0.55);
}

.prijs-vgl-geborgd {
  color: #ffffff;
}

.prijs-vgl-geborgd a {
  color: inherit;
  text-decoration-color: rgba(247, 249, 248, 0.4);
}

.prijs-vgl-microlabel {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.prijs-vgl-typisch .prijs-vgl-microlabel {
  color: rgba(247, 249, 248, 0.35);
}

.prijs-vgl-geborgd .prijs-vgl-microlabel {
  color: var(--gb-success);
}

/* Op smal scherm blijven de sentences hierboven prima leesbaar naast
   elkaar tot een stuk of 24rem breed (elke kolom ~19ch bij 40rem totaal) --
   pas onder 30rem (480px) wordt het echt te krap: dan pas stapelen. */
@media (max-width: 30rem) {
  .prijs-vgl-rij {
    grid-template-columns: 1fr;
  }
}

.slot .prijs-btw {
  font-size: 0.8rem;
  color: rgba(247, 249, 248, 0.4);
}

.slot .zelftest {
  color: rgba(247, 249, 248, 0.6);
  font-size: 0.9rem;
}

/* Blok C1 "waar we staan" is geen eigen sectie meer -- zit nu als tweede
   fase in de .waarom-pin (zie .waarom-stapel hierboven). Logo (review
   Abdul: het label alleen maakte niet concreet WIE Geborgd al gebruikt
   -- het echte logo van de pilotklant is een sterker bewijs dan de
   bedrijfsnaam als platte tekst). Vaste breedte i.p.v. een %-max-width:
   dit is een enkel woordmerk-logo, geen doorlopende logostrook, dus
   schaalt het bewust niet mee met de tekstkolom. */
.waar-we-staan-logo {
  display: block;
  height: auto;
  width: 10rem;
  margin: var(--space-3) auto var(--space-4);
}

/* Kernzin naast het logo droeg te weinig gewicht als gewone
   lopende-tekst-alinea, naast de vetgedrukte h2 op de feiten-kant van
   dezelfde pin (review Abdul, "teksten met logo zijn te klein").
   Zelfde punchline-tier als .niet-voor-tekst/.inzet-afsluiter. */
.waarom-bewijs-kern {
  max-width: 32ch;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gb-ink);
}

/* ---------- Vertrouwd door: roterend klantensysteem ----------
   Losse, compacte sectie (review Abdul 04-08, twee rondes feedback:
   1) eerste poging propte een klantlogo IN de "Waar we staan"-
      bewijsfase op dezelfde schaal als het hoofdlogo -- oogde als een
      onbedoeld enorme afbeelding, "dit zie je nooit zo op een
      website".
   2) tweede poging (los blokje, alleen logo) miste de tekst en
      Business Security ernaast, en moest een "roterend systeem" zijn
      i.p.v. een statische rij, "dat logo mag nooit zo groot, dat zie
      je nooit met een review systeem".
   Logo-hoogte staat hier vast op 2.75rem, ONGEACHT de brongrootte van
   het bestand (Veen's bronbestand is 559x613px, maar height:auto zorgt
   dat de breedte meeschaalt naar die vaste hoogte). Zonder JS/reduced
   motion staan de kaarten gewoon onder elkaar met een lijntje ertussen
   (leesbaar, geen rotatie nodig) -- de rotatie zelf zet main.js op via
   gsap.set/position:absolute, zelfde no-JS-fallback-principe als
   .waarom-stapel hierboven. */
.vertrouwd-door {
  padding: clamp(3rem, 8vh, 5rem) clamp(1rem, 5vw, 2.5rem);
  text-align: center;
  border-bottom: 1px solid var(--gb-line);
  background: #ffffff;
}

.vertrouwd-door .technical-label {
  color: var(--gb-gray);
  margin: 0 0 var(--space-4);
}

.klanten-carousel {
  max-width: 28rem;
  margin: 0 auto;
}

/* Logo links, naam+tekst rechts ernaast -- niet onder elkaar (review
   Abdul 04-08, ronde 3: "dit is goed, met de tekst rechts naast"). */
.klant-kaart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  text-align: left;
}

.klant-kaart + .klant-kaart {
  border-top: 1px solid var(--gb-line);
}

.klant-kaart > a {
  display: block;
  flex-shrink: 0;
}

.klant-kaart img {
  display: block;
  flex-shrink: 0;
  height: 2.75rem;
  width: auto;
}

.klant-kaart-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.klant-naam {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gb-ink);
}

.klant-naam a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.klant-naam a:hover {
  border-bottom-color: var(--gb-line);
}

.klant-tekst {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gb-gray);
  max-width: 30ch;
}

/* Op smalle schermen knijpt een brede wordmark (bv. Business Security,
   205:51) de tekstkolom dicht tot een paar tekens breed -- alles wrapt
   en de kaart wordt torenhoog (review Abdul 04-08, "check de mobile
   versie na, die klopt nu niet", gemeten: 223px hoog, tekstkolom nog
   maar 137px breed op 396px viewport). Logo boven de tekst i.p.v.
   ernaast lost dat op; elk logo blijft even hoog (2.75rem), dus geen
   sprong in het patroon. */
@media (max-width: 30rem) {
  .klant-kaart {
    flex-direction: column;
    text-align: center;
  }

  .klant-kaart-tekst {
    align-items: center;
  }
}

/* ---------- "Wat ons onderscheidt": vijf technische feiten ----------
   Licht thema (zelfde achtergrond als .vignetten/.niet-voor eromheen),
   dus --gb-ink/--gb-gray/--gb-line, NIET de rgba-op-donker-conventie van
   .prijs-vgl (die zit in de donkere prijssectie). Geen kaarten, geen
   iconen, geen badges -- platte tekst met dunne lijnen, zelfde
   soberheidsprincipe als de prijsvergelijking van 2026-08-05. */
.onderscheid {
  padding: clamp(3rem, 8vh, 5rem) 0;
  border-top: 1px solid var(--gb-line);
}

.onderscheid-kop {
  max-width: 44rem;
  margin: 0 auto var(--space-4);
  text-align: center;
}

.onderscheid-kop .technical-label {
  color: var(--gb-success);
  margin-bottom: 0.75rem;
}

.onderscheid-kop h2 {
  margin: 0 0 0.75rem;
}

.onderscheid-kop .toelichting {
  margin: 0 auto;
  max-width: 40ch;
}

.onderscheid-lijst {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid var(--gb-line);
}

.onderscheid-rij {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gb-line);
}

.onderscheid-kenmerk {
  color: var(--gb-ink);
  margin: 0 0 0.4rem;
}

.onderscheid-tekst {
  margin: 0;
  color: var(--gb-gray);
  line-height: 1.6;
  max-width: 60ch;
}

/* ---------- Blok C3: voor wie dit niet is ----------
   Bewust GEEN volle .scene (100vh): 4 regels tekst in een heel scherm
   leeg wit was precies het "leeg stuk"-probleem dat de rest van deze
   opdracht juist oploste (review Abdul 01-08, "dit staat niet goed" bij
   een screenshot van een bijna volledig lege pagina). Compact blok,
   zelfde soort behandeling als .launch-partners hieronder. */
.niet-voor {
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 2.5rem);
}

.niet-voor-tekst {
  /* margin:0 auto ontbrak: text-align:center centreert alleen de
     TEKSTREGELS binnen het paragraaf-vak, niet het vak zelf -- zonder
     auto-marges bleef het vak linksgelijnd binnen .scene-inhoud (die
     immers de volle --container-breedte inneemt), waardoor de hele
     tekst naar links oogde te staan (review Abdul, "totaal niet op
     zijn plek"). Lettergrootte ook opgehoogd: dit is de enige tekst in
     zijn sectie en droeg minder gewicht dan de vergelijkbare
     "punchline"-teksten elders (.inzet-afsluiter), terwijl de boodschap
     hier net zo zwaar is. */
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gb-ink);
}

/* ---------- Blok C2: launch partners ----------
   Bewust GEEN volle .scene (100vh): dit moet een compact, secundair
   kaartje zijn direct onder de prijssectie, niet een sectie die evenveel
   scroll-gewicht krijgt als de 249-prijs erboven (die moet dominant
   blijven). */
.launch-partners {
  display: flex;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 2.5rem);
  background: var(--gb-paper);
}

.launch-partners-kaart {
  max-width: 34rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-large);
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(24, 36, 43, 0.06);
  text-align: center;
}

.launch-partners-kaart .technical-label {
  color: var(--gb-mint);
}

.launch-partners-prijs {
  margin-top: 0.6rem;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--gb-ink);
}

.launch-partners-prijs strong {
  font-weight: 700;
}

.launch-partners-tekst {
  margin-top: var(--space-3);
  color: var(--gb-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

.launch-partners-kaart .button {
  margin-top: var(--space-4);
}

/* ---------- CTA: gratis Proefcontrole ----------
   Zelfde kaart-in-band-patroon als .launch-partners, eigen klassen zodat
   de twee blokken los van elkaar aangepast kunnen worden. */

.proefcontrole-cta {
  display: flex;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 5vw, 2.5rem);
  background: var(--gb-paper);
}

.proefcontrole-cta-kaart {
  max-width: 34rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--gb-line);
  border-radius: var(--radius-large);
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(24, 36, 43, 0.06);
  text-align: center;
}

.proefcontrole-cta-kaart .technical-label {
  color: var(--gb-mint);
}

.proefcontrole-cta-kaart h2 {
  margin-top: 0.6rem;
}

.proefcontrole-cta-tekst {
  margin-top: var(--space-3);
  color: var(--gb-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

.proefcontrole-cta-kaart .button {
  margin-top: var(--space-4);
}

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) clamp(1rem, 5vw, 2.5rem);
  color: var(--gb-gray);
  font-size: 0.9rem;
}

.site-footer-boven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-footer img {
  height: 22px;
  width: auto;
  display: block;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Juridische regel: bewust kleiner en gedempter dan de rest van de
   footer -- aanwezig voor legitimiteit/vertrouwen, niet om aandacht te
   trekken. */
.site-footer-juridisch {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gb-line);
  font-size: 0.8rem;
  color: var(--gb-gray);
}

/* ---------- Toegankelijkheid: reduced motion (huisstijl-verplicht) ---------- */

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