/* ============================================================
   WE CULTURE — PRELAUNCH LANDINGSPAGINA
   style.css v3 — 1-op-1 geïnspireerd op Figma "LANDING PAGE - SIGN UP V1"
   (file JpTfWi9xXPJ5FRAg6Mklei, node 126:1198)

   Brandkleuren (rechtstreeks uit Figma-variabelen):
     Beige (achtergrond)  #E6E3DA
     Burgundy             #591623
     Terracotta           #A64C22
     Blauw accent         #86A4D1
     Roze/rood accent     #BB6C7B
     Zwart (footer)       #000000

   Let op: de Figma-layout gebruikt absolute pixel-posities op
   een 1440px canvas. Voor een werkende, mobielvriendelijke site
   is dit hier vertaald naar flexbox/grid met dezelfde visuele
   hiërarchie, verhoudingen en volgorde.
   ============================================================ */

/* ──────────────────────────────────────────
   0. WEBFONT — METROPOLIS (self-hosted, vrij te gebruiken open-source versie)
   Body-tekst = Metropolis, zoals in de Figma. Bestanden staan lokaal in
   assets/fonts/ zodat het overal werkt (ook offline / file://) — geen alternatief.
   ────────────────────────────────────────── */
@font-face {
  font-family: 'Metropolis';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/metropolis-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Metropolis';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/metropolis-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Metropolis';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/metropolis-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Metropolis';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/metropolis-700.woff2') format('woff2');
}

/* ──────────────────────────────────────────
   1. CUSTOM PROPERTIES
   ────────────────────────────────────────── */
:root {
  /* ── OFFICIEEL MERKPALET — de ENIGE toegestane kleuren ── */
  --color-blue-dark:    #0B2C5D;   /* Donkerblauw */
  --color-blue:         #86A4D1;   /* Lichtblauw */
  --color-green:        #1E4D2E;   /* Donkergroen */
  --color-green-light:  #7CA88B;   /* Lichtgroen */
  --color-terracotta:   #A64C22;   /* Donkeroranje */
  --color-orange-light: #D59475;   /* Lichtoranje */
  --color-burgundy:     #591623;   /* Donkerrood */
  --color-pink:         #BB6C7B;   /* Lichtrood / roze */
  --color-beige:        #E6E3DA;   /* Beige */
  --color-gray:         #B9B9B9;   /* Grijs */
  --color-black:        #000000;   /* Zwart */
  --color-white:        #FFFFFF;   /* Wit */

  /* ── Aliassen: bestaande selectors gekoppeld aan de dichtstbijzijnde merkkleur.
     (De oude off-palette tinten #EFEDE6/#6f1c2c/#bd5a2a/#D9D9D9/#18140F/#54493F/
     #9B2335/#34517D zijn hiermee vervangen.) ── */
  /* Zachte neutrale SECTIE-achtergronden — bewuste uitzondering op het strikte
     palet (gebruikersvoorkeur: de oude cream/lichte tint past beter dan merkgrijs). */
  --color-beige-light: #EFEDE6;   /* cream-sectie */
  --color-lavender:    #D9D9D9;   /* 'Hoe werkt het'-sectie + Ruffle-rand */
  --color-gray-light:  var(--color-gray);    /* was #D9D9D9 */
  --color-text:        var(--color-black);   /* koppen/primaire tekst = zwart */
  /* Warm tekstgrijs — 13e merkkleur voor body-tekst (gebruikersvoorkeur: warmer &
     vriendelijker dan zwart, past bij het warme palet; ~6:1 contrast op beige). */
  --color-text-muted:  #54493F;
  --color-border:      var(--color-gray);
  --color-error:       var(--color-burgundy);/* foutmeldingen = donkerrood, was #9B2335 */
  --color-success:     var(--color-green);
  --color-focus:       var(--color-terracotta);

  /* Typografie: Marcellus = exacte Figma-match. Metropolis = body-tekst (zoals
     Figma), self-hosted via @font-face hierboven. Manrope voor de fotocredits. */
  --font-display: 'Marcellus', Georgia, serif;
  --font-body:    'Metropolis', system-ui, -apple-system, sans-serif;
  --font-credit:  'Manrope', sans-serif;

  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.125rem;
  --text-xl:  1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: clamp(2.5rem, 5vw, 3.5rem);
  --text-num: clamp(3.5rem, 7vw, 6.25rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 33.5px; --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.14);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.22);

  --transition-fast: 150ms ease;
  --transition-base: 260ms ease;
  --transition-slow: 420ms ease;

  --container-max: 1320px;
  --container-pad: clamp(1rem, 5vw, 2.5rem);
  --header-h: 88px;
}

/* ──────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-8)); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-beige);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--transition-fast); }
a:hover { text-decoration-color: currentColor; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Garandeert dat [hidden] altijd wint, ook als een class elders display:flex
   etc. zet op hetzelfde element (anders kan de cascade dit per ongeluk
   negeren — belangrijk voor de rol-afhankelijke formuliervelden). */
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.3; }

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

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ──────────────────────────────────────────
   3. LAYOUT HELPERS
   ────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section--cream    { background: var(--color-beige-light); }
.section--lavender { background: var(--color-lavender); }

.section-header { text-align: center; margin-bottom: var(--space-12); }
.section-label { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-terracotta); margin-bottom: var(--space-4); }
.section-title { font-size: var(--text-3xl); color: var(--color-text); }
.section-title--center { text-align: center; margin-bottom: var(--space-16); }

.skip-link {
  position: absolute; top: -100%; left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-sm);
  z-index: 9999; text-decoration: none; transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }

/* ──────────────────────────────────────────
   4. HEADER / NAV
   ────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: var(--space-3);
}
/* Geen achtergrond/blur meer op de navbalk — logo en linkjes liggen
   rechtstreeks op de pagina-inhoud en gebruiken mix-blend-mode:difference
   om altijd leesbaar te blijven (inverteert per pixel t.o.v. wat erachter
   zit: licht wordt donker, donker wordt licht). De "Inschrijven"-knop blijft
   bewust een opaque witte pil — een primaire CTA moet altijd hetzelfde
   ogen, ongeacht de achtergrond. */
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; /* iets ruimer voor het grotere logo */
  padding-inline: var(--space-8);
}

.logo {
  display: flex; align-items: center; text-decoration: none;
  color: var(--color-white);
  /* Blend mode op de wrapper, niet de SVG zelf — anders mengt de SVG
     tegen de achtergrond van .logo (transparant), niet tegen de pagina-inhoud
     die daadwerkelijk achter de header zit. position:relative + z-index
     verankert de blend-context expliciet. */
  mix-blend-mode: difference;
  position: relative;
  z-index: 60;   /* boven het fullscreen mobiel-menu (40) zodat het logo zichtbaar blijft */
}
.logo-svg {
  display: block;
  /* Erft de kleur van .logo — fill="currentColor" in de SVG-paden pikt dit op.
     Geen eigen mix-blend-mode: die zit nu op het wrapper-element. */
  color: inherit;
}
.logo-svg--footer {
  color: var(--color-white);
  /* In de footer (effen zwarte achtergrond) is difference functioneel
     gelijk aan gewoon wit, maar laten we 'm uitstaan: backdrop-filter/
     grain-textuur in de footer kunnen blend-mode-gedrag onvoorspelbaar
     maken, en daar is geen adaptieve werking nodig. */
  mix-blend-mode: normal;
}
/* (Het draaiende logo-icoon is uitgezet — paste niet bij de look & feel.
   De .logo-spin class blijft in de markup maar doet niets meer.) */

/* Zwevende VLINDER die de echte cursor met vertraging volgt (JS zet de
   translate op .wc-butterfly). De pijl-cursor blijft gewoon zichtbaar; deze
   vlinder zweeft er speels achteraan. pointer-events:none → hij vangt nooit
   klikken op. Buitenste laag = positie (JS translate); binnenste <img> =
   subtiel wiekklapperen (scaleX), zodat de twee transforms elkaar niet bijten. */
.wc-butterfly {
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;   /* centreer de vlinder op het volgpunt */
  pointer-events: none;
  z-index: 9998;             /* boven de pagina, onder de skip-link (9999) */
  opacity: 0;                /* verborgen tot de eerste muisbeweging 'm plaatst */
  transition: opacity 0.35s ease;
  will-change: transform;
}
.wc-butterfly.is-active { opacity: 1; }
/* Twee ECHTE wiek-frames (open + dichtgeklapt) op elkaar; ze wisselen elkaar
   hard af (steps(1)) → een natuurlijke 2-frame vleugelslag i.p.v. een fake
   scaleX. De frames zelf hebben geen transform, zodat de buitenste laag vrij
   is voor de JS-translate + kantel-rotatie. */
.wc-butterfly__frame {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.20));
}
/* De OPEN vleugels (Butterfly-cursor.png) blijven ALTIJD in beeld als basislaag.
   De DICHTGEKLAPTE vleugels (Butterfly-cursor2.png) liggen erbovenop en
   verschijnen/verdwijnen ritmisch → de vleugelslag zonder dat de basisvlinder
   ooit weg is. */
.wc-butterfly__frame--open   { opacity: 1; }
.wc-butterfly__frame--closed { opacity: 0; animation: wc-flap-closed 0.7s ease-in-out infinite; }
@keyframes wc-flap-closed { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wc-butterfly { display: none; }   /* geen zwevende beweging bij reduced-motion */
}

.site-nav ul { display: flex; align-items: center; gap: var(--space-8); }
.site-nav li > a:not(.btn) {
  font-size: var(--text-base); font-weight: 500; color: var(--color-white); text-decoration: none;
  mix-blend-mode: difference;
  /* position:relative verankert de blend-context op het link-element zelf */
  position: relative;
}
/* Navbar-links: GEEN onderstreep bij hover, maar vet (via text-stroke → dikkere
   letters zonder layout-sprong, i.t.t. font-weight). */
.site-nav li > a:not(.btn):hover { text-decoration: none; -webkit-text-stroke: 0.6px currentColor; }

/* Taalwissel: twee knoppen i.p.v. één toggle-tekst, met aria-pressed als
   status-indicator (zie script.js applyTranslations). De buitenrand en
   tekst blenden mee; de gevulde "actieve" status blijft een opaque wit
   vlak (anders verdwijnt de status-indicatie zelf in de blend). */
.lang-switch {
  display: flex; gap: 2px; border-radius: var(--radius-full); padding: 2px;
  border: 1px solid var(--color-white);
  mix-blend-mode: difference;
}
.lang-btn {
  padding: 0.35em 0.7em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-white);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-btn[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-black);
  mix-blend-mode: normal; /* status-vlak blijft altijd echt wit, niet geïnverteerd */
}
.lang-switch--mobile { border-color: rgba(0,0,0,0.15); mix-blend-mode: normal; }
.lang-switch--mobile .lang-btn { color: rgba(255,255,255,0.7); }
.lang-switch--mobile .lang-btn[aria-pressed="true"] { background: var(--color-white); color: var(--color-black); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: var(--space-2);
  position: relative; z-index: 60;   /* de X blijft boven het fullscreen-menu (40) → altijd te sluiten */
}
.nav-toggle__bar { display: block; width: 22px; height: 1.5px; background: var(--color-white); mix-blend-mode: difference; transition: transform var(--transition-base), opacity var(--transition-base); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* De fixed navbar zit in een eigen stacking-context, dus mix-blend-mode:difference
   mengt NIET met de pagina-inhoud erachter (op lichte secties bleef de witte tekst
   dus wit = geen contrast). Op lichte secties detecteert script.js de achtergrond
   en zet deze class → navkleuren donker, blend uit. De CTA-pil blijft wit. */
.site-header--on-light .logo,
.site-header--on-light .site-nav li > a:not(.btn),
.site-header--on-light .lang-switch,
.site-header--on-light .lang-btn,
.site-header--on-light .nav-toggle__bar { mix-blend-mode: normal; }
.site-header--on-light .logo,
.site-header--on-light .site-nav li > a:not(.btn),
.site-header--on-light .lang-btn { color: var(--color-black); }
.site-header--on-light .lang-switch { border-color: rgba(0, 0, 0, 0.4); }
.site-header--on-light .lang-btn[aria-pressed="true"] { background: var(--color-black); color: var(--color-white); }
.site-header--on-light .nav-toggle__bar { background: var(--color-black); }

/* MOBIEL/klein-scherm MENU — FULLSCREEN overlay in DONKERBLAUW (#0B2C5D) met
   LICHTBLAUWE (#86A4D1) tekst/iconen. Ligt ONDER de header (z-index 40) zodat
   het logo + de sluit-X (z-index 60) in de header zichtbaar/klikbaar blijven. */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 40;
  background: var(--color-blue-dark);   /* #0B2C5D */
  color: var(--color-blue);             /* #86A4D1 */
  padding: calc(var(--header-h, 76px) + var(--space-6)) var(--space-6) var(--space-10);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: flex; flex-direction: column; gap: 0; }
.mobile-menu__list li { border-top: 1px solid rgba(134, 164, 209, 0.3); }
.mobile-menu__list li:last-child { border-bottom: 1px solid rgba(134, 164, 209, 0.3); }
.mobile-menu__list a {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-1);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--color-blue); text-decoration: none;
  transition: color var(--transition-fast);
}
/* Marker links: standaard een klein VIERKANTJE; op hover / actief / huidige
   pagina → een CIRKEL in roze (#BB6C7B), en de tekst kleurt mee. */
.mobile-menu__list a::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: currentColor;
  transition: border-radius var(--transition-base), background var(--transition-fast);
}
.mobile-menu__list a:hover,
.mobile-menu__list a:active,
.mobile-menu__list a[aria-current="page"] { color: var(--color-pink); }
.mobile-menu__list a:hover::before,
.mobile-menu__list a:active::before,
.mobile-menu__list a[aria-current="page"]::before { border-radius: 50%; background: var(--color-pink); }

/* Taalwissel DIRECT onder de lijst — plain tekst, geen button-look. */
.mobile-menu__lang { display: flex; gap: var(--space-4); padding: var(--space-5) var(--space-1) 0; }
.mobile-menu__lang .lang-btn {
  background: none; border: none; padding: 0;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-blue); opacity: 0.65;
}
.mobile-menu__lang .lang-btn[aria-pressed="true"] {
  background: none; opacity: 1; color: var(--color-white);
  text-decoration: underline; text-underline-offset: 4px;
}
/* Social / contact tegen de ONDERRAND van het menu geduwd (margin-top:auto). */
.mobile-menu__social { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-1) 0; }
.mobile-menu__social a { color: var(--color-blue); text-decoration: none; font-size: var(--text-sm); letter-spacing: 0.02em; }
.mobile-menu__social a:hover { color: var(--color-pink); }

/* Open-state: logo + hamburger-X in LICHTBLAUW (#86A4D1), leesbaar op het
   donkerblauwe vlak; en de pagina eronder vastzetten. */
.site-header:has(.nav-toggle[aria-expanded="true"]) .logo,
.site-header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle__bar { mix-blend-mode: normal; }
.site-header:has(.nav-toggle[aria-expanded="true"]) .logo { color: var(--color-blue); }
.site-header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle__bar { background: var(--color-blue); }
body:has(.nav-toggle[aria-expanded="true"]) { overflow: hidden; }

/* ──────────────────────────────────────────
   5. BUTTONS
   ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.9em 1.8em;
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  cursor: pointer;
  border: none;
}
.btn:active { transform: scale(0.98); }

.btn--pill-white { background: var(--color-white); color: var(--color-black); }
.btn--pill-white:hover { background: var(--color-beige); box-shadow: var(--shadow-md); text-decoration: none; }
.btn--tilt { transform: rotate(-0.78deg); }
.btn--tilt:hover { transform: rotate(0deg); }

.btn--solid { background: var(--color-terracotta); color: var(--color-white); }
.btn--solid:hover { filter: brightness(1.08); text-decoration: none; }

.btn__chevron { flex-shrink: 0; }

/* ──────────────────────────────────────────
   6. HERO
   ────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-burgundy) 0%, var(--color-blue-dark) 55%, var(--color-blue) 100%);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media-img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  padding-block: var(--space-16);
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; }
.hero__title { display: flex; flex-direction: column; gap: var(--space-2); }
.hero__title-line {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: 1.25;
  color: var(--color-white);
}
.hero__title-line--em { font-style: italic; font-family: var(--font-display); }

.hero__form-card { display: flex; justify-content: center; }
/* In de "Samenwerking en contact"-kolom hoort het formulier links uit te
   lijnen (onder de "Inschrijven"-kop), niet gecentreerd — dat laatste was
   enkel bedoeld voor de hero-variant. */
.hero__form-card--glass { justify-content: flex-start; }

/* ──────────────────────────────────────────
   7. AANMELDFORMULIER (herbruikbare template)
   ────────────────────────────────────────── */
.signup-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--color-burgundy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Altijd links uitlijnen, ook al staat een voorouder (zoals .hero__inner
     op mobiel) op text-align:center — anders erven labels en checkbox-tekst
     die centrering ongewenst over. */
  text-align: left;
}
.signup-card__header {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-white);
  /* Gelijke, kleinere afstand boven en onder de tekst (was asymmetrisch en te ruim) */
  padding: var(--space-4) var(--space-6);
}
.signup-card__body {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  margin: 0 var(--space-1) var(--space-1);
  padding: var(--space-6);
}

.signup-tabs { display: flex; gap: var(--space-6); margin-bottom: var(--space-6); }
.signup-tab {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1.5px solid transparent;
}
.signup-tab--active,
.signup-tab[aria-selected="true"] {
  color: var(--color-black);
  border-bottom-color: var(--color-black);
}

.signup-step { display: flex; flex-direction: column; gap: var(--space-3); }
.signup-step--active,
.signup-step:not([hidden]) { display: flex; }

.signup-progress { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); }
/* Outline-stijl volgens de branding (geen grijs/terracotta meer). Op de
   witte kaart-body gebruiken we burgundy zodat de dots zichtbaar blijven;
   op de glazen/donkere variant (zie hieronder) wordt dit wit, zoals in Figma. */
.signup-progress__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(89,22,35,0.45);
}
.signup-progress__dot--active { background: var(--color-burgundy); border-color: var(--color-burgundy); }

.hero__form-card--glass .signup-progress__dot {
  border-color: rgba(255,255,255,0.7);
}
.hero__form-card--glass .signup-progress__dot--active {
  background: var(--color-white); border-color: var(--color-white);
}

.signup-next, .signup-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-burgundy); color: var(--color-white);
  padding: 0.85em 1.5em; border-radius: var(--radius-full);
  font-weight: 600; font-size: var(--text-base);
  align-self: flex-end;
  margin-top: var(--space-2);
  transition: background var(--transition-base);
}
.signup-next:hover, .signup-submit:hover { filter: brightness(1.12); }
.signup-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.signup-step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2); }
/* Terug-knop: geen onderstreep, oranje (terracotta) pijltje + tekst. */
.signup-back { font-size: var(--text-base); color: var(--color-terracotta); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; }
.signup-back::before { content: '←'; font-size: 1.1em; line-height: 1; }
.signup-back:hover { text-decoration: none; -webkit-text-stroke: 0.4px currentColor; }

.signup-success { text-align: center; padding: var(--space-8) var(--space-4); }
.signup-success__icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-terracotta); color: var(--color-white);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font-size: var(--text-lg);
}
.signup-success__title { font-family: var(--font-display); font-size: var(--text-2xl); margin-bottom: var(--space-3); color: var(--color-black); }
.signup-success__text { color: var(--color-text-muted); font-size: var(--text-base); }

.signup-error { padding: var(--space-4); background: rgba(155,35,53,0.08); border: 1px solid rgba(155,35,53,0.25); border-radius: var(--radius-sm); color: var(--color-error); font-size: var(--text-base); margin-top: var(--space-3); }

/* Glasmorfische variant (contact-sectie) — LICHT wit glas (25%) met STERKE blur.
   Zwart voelde te zwaar; dit is luchtiger. De tekst is DONKER (net als de
   hero-kaart), wat op het lichte glas ruim WCAG AA haalt (donkere tekst op een
   ~0.36–0.7 luminantie-achtergrond = 5:1+), i.p.v. witte tekst die op licht glas
   juist onleesbaar was. De sterke blur maakt de drukke schildering rustig genoeg
   om erop te lezen. */
.hero__form-card--glass .signup-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.hero__form-card--glass .signup-card__body { background: transparent; }
/* Header zat wit op de burgundy-balk; op het lichte glas moet hij DONKER. */
.hero__form-card--glass .signup-card__header { color: var(--color-text); }
/* Inputs licht opvullen zodat ze zich aftekenen tegen het glas. */
.hero__form-card--glass .form-input { background: rgba(255,255,255,0.45); }
/* Fouttekst = donkerrood (goed leesbaar op het lichte glas). */
.hero__form-card--glass .form-error,
.hero__form-card--glass .signup-error { color: var(--color-burgundy); font-weight: 600; }

/* ──────────────────────────────────────────
   8. FORMULIER-VELDEN (gedeeld)
   ────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label { font-size: var(--text-base); font-weight: 500; color: var(--color-text); }
.required { color: var(--color-terracotta); }
.optional { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }

.form-input {
  width: 100%;
  padding: 0.85em 1.1em;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus { outline: none; border-color: var(--color-burgundy); box-shadow: 0 0 0 3px rgba(89,22,35,0.1); }
.form-input.is-invalid { border-color: var(--color-error); }
.form-input::placeholder { color: var(--color-gray); }
.form-textarea { resize: vertical; min-height: 80px; }

.form-error { font-size: var(--text-xs); color: var(--color-error); font-weight: 500; min-height: 1rem; display: block; }

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: var(--space-3); }
.checkbox-label, .radio-label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-base); cursor: pointer; }
.checkbox-label input, .radio-label input {
  width: 17px; height: 17px; min-width: 17px; margin-top: 2px;
  border: 1.5px solid var(--color-gray); border-radius: 4px; appearance: none; cursor: pointer; position: relative;
}
.radio-label input { border-radius: 50%; }
.checkbox-label input:checked, .radio-label input:checked { background: var(--color-burgundy); border-color: var(--color-burgundy); }
.checkbox-label input:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 10px; }
.radio-label input:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; background: white; border-radius: 50%; }
.radio-group { display: flex; flex-direction: column; gap: var(--space-2); }
/* Consent-tekst: geen grijze achtergrond, grijze tekst die zwart wordt zodra het
   vinkje aan staat (:has → reageert op de checkbox erin). */
.checkbox-label--consent { color: var(--color-text-muted); }
.checkbox-label--consent:has(input:checked) { color: var(--color-text); }
/* Privacyverklaring-link: donkerblauw (brand-root). */
.form-link { text-decoration: underline; font-weight: 600; color: var(--color-blue-dark); }

/* ──────────────────────────────────────────
   8b. GRAIN-TEXTUUR UTILITY (papier-grain, zoals Figma's "Texture"-effect)
   ────────────────────────────────────────── */
/* BELANGRIJK: dit is een background-image op het element zelf, geen ::after
   met een eigen z-index. De achtergrond van een box wordt door de browser
   altijd als EERSTE laag geschilderd — vóór alle children — dus de grain
   kan hierdoor nooit meer over witte invulvakken of tekst heen komen te
   liggen, wat met de eerdere ::after + z-index aanpak wél het risico was.
   Elementen die deze class gebruiken, zetten hun kleur via background-color
   (niet de `background`-shorthand), anders overschrijft die de afbeelding.

   Noise-instellingen gematcht aan Figma (Mono · size 1.5 · density 100% · #000 25%):
     De korrel is nu ZWART met variabele alpha (i.p.v. grijs+multiply), wat 'm
     duidelijk zichtbaarder maakt — zoals in de Figma.
     - feTurbulence fractalNoise, baseFrequency 0.68 → ≈1.5px korrel.
     - feColorMatrix: RGB→0 (zwart), alpha = luminantie van de noise.
     - feFuncA slope 0.55 → alpha ≈ 0–0.55, gemiddeld ~0.25 = "#000000 at 25%".
     Zwart-alpha korrel wordt gewoon (normal) over de background-color gelegd. */
.has-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='wcnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.33 0.33 0.33 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wcnoise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* "Tape"-stukjes op de geplakte notitievlakken in de voordelen-sectie.
   Rotaties gematcht aan Figma (~43deg): diagonale plakband over de bovenhoeken. */
.tape {
  position: absolute;
  width: 92px; height: 30px;
  background: rgba(70,66,60,0.24);
  z-index: 3;
}
.tape--left  { top: -11px; left: -20px; transform: rotate(-43deg); }
.tape--right { top: -11px; right: -20px; transform: rotate(43deg); }

/* ──────────────────────────────────────────
   9. GALERIJ — CAROUSEL (variabele hoogtes)
   ────────────────────────────────────────── */
/* Figma gallery-sectie: 660px. Verhoogd van var(--space-12) naar var(--space-16) om
   de totale hoogte dichter bij 660px te brengen (was ~556px). */
.gallery-strip { position: relative; background: var(--color-beige); padding-block: var(--space-16); overflow: hidden; }
.gallery-carousel {
  --scale: 1; /* schaalt breedte/hoogte/stagger van álle kaarten mee op kleinere viewports */
  display: flex;
  align-items: flex-start; /* kaarten hangen aan de bovenkant en verspringen via --top */
  gap: var(--space-5);
  overflow-x: auto;
  /* Geen scroll-snap: de strip beweegt continu (marquee), snapping zou tegen
     de automatische scroll in werken. */
  scroll-snap-type: none;
  padding: var(--space-6) var(--container-pad) var(--space-10);
  margin: 0 calc(-1 * var(--container-pad));
  /* Scrollbar verborgen — navigatie gebeurt via automatisch scrollen
     (script.js) en, voor wie wil, slepen/swipen. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gallery-carousel::-webkit-scrollbar { display: none; height: 0; }
.gallery-carousel__item {
  position: relative;
  flex: 0 0 auto;
  /* Elke kaart heeft z'n eigen breedte (--w), hoogte (--h) en verticale
     stagger (--top) — exact overgenomen uit de Figma-layout. --scale krimpt
     alles proportioneel mee op smallere schermen. */
  width:  calc(var(--w, 280) * var(--scale) * 1px);
  height: calc(var(--h, 460) * var(--scale) * 1px);
  margin-top: calc(var(--top, 0) * var(--scale) * 1px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
}
.gallery-carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-carousel__item.is-placeholder { background: linear-gradient(135deg, var(--color-terracotta), var(--color-burgundy)); }
.gallery-carousel__item.is-placeholder img { display: none; }

.gallery-carousel__credit {
  position: absolute; bottom: var(--space-4); right: var(--space-4);
  font-family: var(--font-credit); font-size: var(--text-xs); color: var(--color-white);
  writing-mode: vertical-rl; text-orientation: mixed;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35); /* leesbaar op lichte én donkere foto's */
}

/* Pauzeer/hervat-knop (WCAG 2.2.2) — rechtsonder in de strip. */
.gallery-carousel__toggle {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-5);
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(30, 28, 26, 0.55);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 3;
}
.gallery-carousel__toggle:hover { background: rgba(30, 28, 26, 0.82); }
.gallery-carousel__toggle:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; }
/* Speelt → pauze-icoon (twee balken). */
.gallery-carousel__toggle-icon {
  display: block;
  width: 12px; height: 14px;
  box-sizing: border-box;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
/* Gepauzeerd → play-icoon (driehoek). */
.gallery-carousel__toggle[aria-pressed="true"] .gallery-carousel__toggle-icon {
  width: 0; height: 0;
  border-left: 13px solid currentColor;
  border-right: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
/* Geen beweging → geen knop nodig. */
@media (prefers-reduced-motion: reduce) {
  .gallery-carousel__toggle { display: none; }
}

/* ──────────────────────────────────────────
   10. IDENTITEIT — SCROLL-GESTUURDE ENVELOP
   ────────────────────────────────────────── */
.identity {
  position: relative;
  height: 260vh; /* extra scroll-ruimte voor de open/dicht-animatie */
  --rise-out: 0.56;   /* hoever de brief uit de envelop schuift (JS leest dit); per breakpoint anders. Desktop: hoog genoeg zodat de briefonderkant BINNEN de mond blijft en de binnenkant/lining eromheen zichtbaar is (kleine ruimte, achterkant zichtbaar). */
  --zoom-out: 1.08;   /* eind-zoom bij open brief (JS leest dit); een KLEINE in-zoom, net als op mobiel */
  background: var(--color-beige);
}
.identity__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* De stack = het envelop-canvas (977×960, gedeeld door flap + voorkant). De
   hele stack zoomt met scroll in (scale via script.js) rond de mond, zodat de
   brief en zijn tekst groter/leesbaar worden. transform-origin richt de zoom. */
.identity__stack {
  position: relative;
  width: clamp(320px, 54vw, 660px);
  aspect-ratio: 977 / 960;
  transform-origin: 50% 44%;
  will-change: transform;
}
/* Desktop: de brief schuift ver omhoog (rise 0.56) om de lining eromheen te
   tonen; daardoor zou de bovenkant onder de navbar duiken. Duw de hele stack
   (envelop) een stukje omlaag zodat 'IDENTITEIT' vrij van de navbar blijft én
   de briefonderkant netjes binnen de mond zit. (Mobiel/tablet doen dit met hun
   eigen margin-top / zonder.) */
@media (min-width: 1025px) {
  .identity__stack { margin-top: 9vh; }
}
.identity__envelope { position: absolute; inset: 0; perspective: 1400px; transform-origin: 50% 44%; }

/* Stapel gesloten enveloppen erachter (oranje + roze), zoals in Figma. Ze
   peeken bij rust achter de dichte envelop; script.js fadet ze weg zodra de
   envelop opengaat/inzoomt. */
.identity__deck { position: absolute; inset: 0; z-index: 0; }
.identity__card {
  position: absolute;
  left: 0; right: 0; bottom: -7%;
  width: 90%;
  margin: 0 auto;
  background-size: 100% 100%; background-repeat: no-repeat;
  transform-origin: center bottom;
}
.identity__card--orange {
  aspect-ratio: 1031 / 632;
  background-image: url('assets/Brief/1_envelop-default-dicht/oranje-envelop.svg');
  transform: rotate(-4deg) translate(-11%, 0);
}
.identity__card--pink {
  aspect-ratio: 1003 / 578;
  background-image: url('assets/Brief/1_envelop-default-dicht/roze-envelop.svg');
  transform: rotate(4deg) translate(11%, 0);
}

/* Flap-lagen exact op elkaar (zelfde canvas). De flap klapt op een natuurlijke
   manier open als een SCHARNIER rond de bovenste vouwlijn: rotateX om
   transform-origin:top center, met perspective op .identity__envelope. Géén
   translateY. De DICHTE flap ligt BOVENOP alles (ook boven de voorkant), zodat
   z'n openklap-rotatie zichtbaar is; hij verdwijnt via backface-visibility en
   onthult de verder-open flaps (open1 → open2) die áchter de brief liggen. */
.identity__flap {
  position: absolute; inset: 0;
  background-size: 100% 100%; background-repeat: no-repeat;
  /* Scharnier op de BOVENRAND van de flap (waar de flap aan de envelop-achterkant
     vastzit): de closed-flap SVG is een neerwaartse driehoek met de bovenrand op
     y=426 van 959 = 44.4%, de onderpunt op y≈721. Roteren om die bovenrand laat de
     onderpunt netjes omhoog scharnieren (i.p.v. rond het midden op 47%, waardoor de
     scharnier iets ónder de bovenrand leek te liggen). */
  transform-origin: 50% 44.4%;
  backface-visibility: hidden;
}
/* Vulling/lining: STATISCH op z'n plek terwijl de dichte flap openscharniert, fadet
   weg zodra de floral open1-flap verschijnt. z-index 3 = precies 1 laag ACHTER de
   voorkant (4), zodat de voorkant de onderkant van de vulling afdekt en de lining
   alleen in de open mond zichtbaar is. Géén rotatie. */
.identity__vulling {
  position: absolute; inset: 0;
  background-image: url('assets/Brief/1_envelop-default-dicht/groen-envelop-vulling.svg');
  background-size: 100% 100%; background-repeat: no-repeat;
  z-index: 3; opacity: 0; will-change: opacity;
}
.identity__flap--closed { background-image: url('assets/Brief/1_envelop-default-dicht/groen-envelop-flap-dicht.svg'); z-index: 6; }
/* open1/open2 zijn bij rust verborgen (achter de dichte flap); script.js onthult
   ze zodra de bovenliggende flap wegklapt, en laat ze vervolgens zelf openklappen. */
.identity__flap--open1  { background-image: url('assets/Brief/1_envelop-flap/1_envelop-flap.svg'); z-index: 2; opacity: 0; }
.identity__flap--open2  { background-image: url('assets/Brief/1_envelop-flap/2_envelop-flap.svg'); z-index: 1; opacity: 0; }

.identity__front {
  position: absolute; inset: 0;
  background-image: url('assets/Brief/1_envelop-flap/3_envelop-voorkant.svg');
  background-size: 100% 100%; background-repeat: no-repeat;
  z-index: 4;
}

/* Brief = 2_brief.svg-papier met VERTAALBARE HTML-tekst erop. Zit tussen flap
   (achter) en voorkant (voor); bij rust in de pocket verstopt, schuift met
   scroll omhoog. container-type → font schaalt mee met de briefbreedte. */
.identity__letter {
  position: absolute;
  left: 50%;
  bottom: 4%;
  /* Groot papier: de tekst moet op een comfortabele grootte (≥16px layout, zodat
     browser-minimum-lettergroottes 'm niet opblazen) met ruime witruimte passen. */
  width: 86%;
  /* Hoogte volgt de inhoud (auto) → de brief is altijd precies groot genoeg voor
     de tekst op ≥16px, op élke viewport, zonder JS-autofit. */
  height: auto;
  box-sizing: border-box;
  transform: translate(-50%, 0);
  /* Onzichtbaar tot de flap opengaat (script.js fadet 'm in); zo piept de brief
     bij rust niet door de mond. */
  opacity: 0;
  background-image: url('assets/Brief/1_envelop-flap/2_brief.svg');
  background-size: 100% 100%; background-repeat: no-repeat;
  padding: 12% 16%;              /* ruime marge tussen tekst en brief-omtrek — brief is duidelijk breder dan de tekst; height:auto rekt mee */
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  z-index: 3;   /* achter de voorkant (4) + dichte flap (6), vóór open1/open2 */
  /* Harde ondergrens 16px (browser-minimum-proof). Desktop-max 1.1rem (~17.6px):
     de bredere zij-padding maakt de tekst smaller → met de oude 1.2rem liep het
     naar te veel regels en dook de bovenkant onder de navbar; 1.1rem houdt de
     regels/hoogte in toom zodat brede padding + volledige tekst samen passen. */
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}
.identity__letter-label {
  font-family: var(--font-display);   /* Marcellus regular */
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}
.identity__letter-text {
  font-family: var(--font-display);   /* Marcellus regular */
  font-weight: 400;
  font-size: 1em;
  line-height: 1.22;   /* iets strakker: koopt verticale ruimte zodat de RUIME zij-padding past zonder dat de tekst onder de font-vloer (16px) hoeft (regelhoogte triggert de browser-min niet) */
  color: var(--color-text);
}

.identity__hint {
  margin-top: var(--space-8);
  text-align: center;   /* mobiel is de hint full-width absolute → tekst centreren i.p.v. links */
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: opacity 0.2s ease;
}

/* ──────────────────────────────────────────
   11. BENEFITS / MEERWAARDE
   ────────────────────────────────────────── */
/* Figma: sectie 803px hoog. Verhoogd naar var(--space-24) (96px) voor dichter bij 803px.
   overflow:hidden voorkomt horizontale scroll door de uitstekende deco-kaarten. */
.benefits { padding-block: var(--space-24); background: var(--color-beige); overflow: hidden; }
.benefits__layout { display: flex; }
.benefits__panel { position: relative; width: 100%; max-width: 884px; }

/* Folder-tab look: kleur per tab is VAST (ondernemers=terracotta,
   shoppers=burgundy); alleen hoogte/laag wisselt met de actieve status —
   de actieve tab is hoger en ligt voorop, de inactieve lager en erachter.

   Figma tab-maten (op 884px paneel):
     Actieve tab (ondernemers): h=67px, w=340px — border-radius TL:16px TR:24px
     Inactieve tab (shoppers):  h=56px, w=340px — border-radius TL:16px TR:24px
     Overlap: inactieve tab start 35px vóór de rechterrand van actieve tab. */
/* margin-bottom: 0 — geen overlap meer tussen tabstrip en kaart.
   Met -14px begon de kaart 14px boven de tabbottoms, waardoor de
   oranje kaart zichtbaar boven de tababsluitlijn uitkwam en de
   rode tab leek te zweven. Met 0 sluiten tabbottoms en kaarttop
   exact op hetzelfde horizontale vlak aan: schone folder-tabovergang. */
.benefits__tabstrip { display: flex; align-items: flex-end; position: relative; z-index: 2; margin-bottom: 0; }
.benefits__tab {
  /* Beide tabs GELIJKE hoogte + GELIJKE binnen-padding, zodat de tekst in elke tab
     even ver van de randen staat (strak afgewerkt, geen scheve folder-tabs meer). */
  padding: 0.95rem var(--space-6);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-white);
  /* Figma: beide tabs rounded-tl-[16px] rounded-tr-[24px] */
  border-radius: var(--radius-md) var(--radius-lg) 0 0;
  transition: opacity var(--transition-base);
}
/* De ondernemers-tab is altijd de meest linkse en sluit flush aan op de
   linkerrand van het paneel — linksboven gaat de tab-rounding DOOR (16px)
   terwijl het PANEEL eronder links-boven hoekig blijft (border-radius:0).
   Alleen de shopper-tab krijgt de overlap-shift wanneer hij inactief is. */
.benefits__tab--ondernemers {
  background-color: var(--color-terracotta);
  /* Figma toont rounded-tl-[16px] ook op de actieve ondernemer-tab.
     De "0 in de linkerhoek" geldt voor het paneel/kaart eronder, niet de tab zelf. */
  border-radius: var(--radius-md) var(--radius-lg) 0 0;
  margin-inline-start: 0 !important;
}
.benefits__tab--shoppers { background-color: var(--color-burgundy); }

.benefits__tab--active,
.benefits__tab[aria-selected="true"] {
  /* Actieve tab onderscheidt zich door kleur (= folderkleur) + vooropliggen,
     NIET meer door extra hoogte. */
  z-index: 2;
}
.benefits__tab:not(.benefits__tab--active) {
  opacity: 0.92;
  z-index: 1;
}
.benefits__tab--shoppers:not(.benefits__tab--active) {
  /* Figma: overlap 35px op 884px panel. Proportioneel op 920px ≈ 36px.
     Behouden op -10px per gebruikersfeedback (te veel sprong bij meer overlap). */
  margin-inline-start: -10px;
}

.benefits__card {
  background-color: var(--color-terracotta);
  /* Figma: paneel heeft rounded-tr-[24px] rounded-br-[24px] rounded-bl-[24px],
     géén TL-rounding — TL sluit direct aan op de onderste rand van de actieve tab. */
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  /* Figma paneel: 539px hoog. Padding aan alle kanten op basis van 48px top/bottom. */
  padding: var(--space-12);
  min-height: 539px;
  position: relative;
  z-index: 1;
  transition: background-color var(--transition-base);
}
/* Paneel-kleur volgt de actieve tab (zie initBenefitsTabs in script.js) */
.benefits__card.is-shopper-active { background-color: var(--color-burgundy); }

.benefits__title { font-size: var(--text-3xl); color: var(--color-white); margin-bottom: var(--space-6); max-width: 600px; }
.benefits__intro { color: var(--color-white); font-size: var(--text-base); margin-bottom: var(--space-6); max-width: 560px; line-height: 1.6; }
.benefits__list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 560px; }
.benefits__list li {
  color: var(--color-white); font-size: var(--text-base); padding-left: var(--space-6); position: relative; line-height: 1.5;
}
.benefits__list li::before { content: '•'; position: absolute; left: var(--space-1); font-size: var(--text-lg); line-height: 1.2; }

/* Decoratieve kaarten — Figma: blauw 231×337px, roze 257×377px, beide ≈ 3.45deg
   gericht, gepositioneerd RECHTS van het paneel (deels er buiten uitstekend).
   z-index:2 zodat ze vóór het hoofdpaneel (z-index:1) vallen, precies zoals Figma.
   overflow:hidden op .benefits voorkomt dat ze de pagina breder maken.

   Positie t.o.v. .benefits__panel (max-width:920px):
     Blauw:  rechterrand ≈ 80px buiten paneel-rechterrand  → right:-80px
     Roze:   linkerrand ≈ 120px buiten paneel-rechterrand  → right:-370px
   Op tablet/mobiel verborgen (zie @media ≤860px hieronder). */
.benefits__deco { position: absolute; border-radius: var(--radius-md); z-index: 2; }
.benefits__deco--blue {
  width: 240px; height: 340px;
  background-color: var(--color-blue);
  background-image: url('assets/Meerwaarde-img1.png');
  background-size: cover; background-position: center;
  right: -60px; top: 150px;   /* naar links t.o.v. roze → ~13px tussenruimte */
  transform: rotate(-3.45deg);
}
.benefits__deco--pink {
  width: 265px; height: 385px;
  background-color: var(--color-pink);
  background-image: url('assets/Meerwaarde-img2.png');
  background-size: cover; background-position: center;
  right: -360px; top: 110px;
  transform: rotate(3.45deg);
}

/* ──────────────────────────────────────────
   12. HOE WERKT HET — STEPS
   ────────────────────────────────────────── */
.section--lavender { position: relative; }
/* Papiertextuur-rand: Ruffle.svg (Figma-export, feTurbulence +
   feDisplacementMap). De wrapper heeft background: var(--color-beige) —
   dezelfde kleur als de sectie hierboven. De SVG (#D9D9D9 grijs) steekt
   daartegen af zodat de organische torn-edge zichtbaar is.
   Op een grijze achtergrond (de sectie zelf) zou de SVG onzichtbaar zijn,
   vandaar dat de wrapper een eigen beige laag vormt tussen de twee secties.
   line-height: 0 / font-size: 0 voorkomt de 4px "ghost space" onder de <img>. */
.paper-border-wrapper {
  background-color: var(--color-beige);
  line-height: 0;
  font-size: 0;
  margin-bottom: -1px; /* sluit naadloos aan op de grijze sectie hieronder */
}
.paper-border-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Extra zijpadding zodat de tekst niet tot tegen de randen van het scherm
   loopt; de gap TUSSEN de 3 stappen is bewust een stuk kleiner dan voorheen. */
.container--roomy { padding-inline: clamp(1.5rem, 8vw, 4.5rem); }
/* Geen extra padding-top nodig: het paper-border-wrapper blok zit nu buiten
   de sectie, tussen de vorige sectie en deze. De normale .section padding geldt. */

/* Kolommen op contentbreedte (max 280px) i.p.v. 1fr, en de hele groep gecentreerd
   (justify-content:center) → de 3 stappen vormen een strak, gebalanceerd cluster
   onder de gecentreerde kop, i.p.v. links-driftende content in brede kolommen.
   auto-fit houdt het responsive: 3 kolommen op desktop, minder op smallere schermen. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; gap: clamp(var(--space-6), 5vw, var(--space-12)); text-align: center; position: relative; z-index: 2; }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.step__numrow { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.step__bullet {
  width: 14px; height: 14px; background: var(--color-blue); transform: rotate(45deg); border-radius: 3px;
  margin-top: 0.35em;
}
.step__number { font-family: var(--font-display); font-size: var(--text-num); color: var(--color-black); line-height: 1; }
.step__title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); color: var(--color-black); }
.step__text { color: var(--color-text-muted); font-size: var(--text-base); max-width: 280px; }

/* ──────────────────────────────────────────
   13. CONTACT SPLIT
   ────────────────────────────────────────── */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; }
/* Figma contact-sectie: 860px hoog per kolom. min-height verhoogd van 640 naar 860px. */
.contact-split__col {
  position: relative; padding: var(--space-20) clamp(1.5rem, 7vw, 4.5rem); min-height: 860px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
}
/* Beide koppen starten op exact dezelfde hoogte: flex-start i.p.v. center,
   zodat de hoeveelheid content daaronder (tekst+lijst vs. formulier) de
   positie van de kop niet meer beïnvloedt. */
.contact-split__content { display: flex; flex-direction: column; }
.contact-split__media { position: absolute; inset: 0; z-index: 0; }
.contact-split__media img { width: 100%; height: 100%; object-fit: cover; }
.contact-split__col--info .contact-split__media { background: linear-gradient(135deg, var(--color-green), var(--color-black)); }
.contact-split__col--form .contact-split__media { background: linear-gradient(135deg, var(--color-blue-dark), var(--color-burgundy)); }
.contact-split__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; }
.contact-split__content { position: relative; z-index: 2; color: var(--color-white); width: 100%; max-width: 460px; }
.contact-split__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.contact-split__text { font-size: var(--text-base); margin-bottom: var(--space-8); line-height: 1.6; opacity: 0.9; }

.contact-list { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-list li { display: flex; align-items: center; gap: var(--space-3); }
.contact-list a { color: var(--color-white); text-decoration: none; font-size: var(--text-base); }
.contact-list a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────
   14. FAQ
   ────────────────────────────────────────── */
.faq-list { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); font-weight: 500; cursor: pointer; }
.faq-icon { font-size: var(--text-xl); color: var(--color-terracotta); transition: transform var(--transition-base); }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; }
.faq-answer a { color: var(--color-burgundy); font-weight: 600; }

/* ──────────────────────────────────────────
   15. FOOTER
   ────────────────────────────────────────── */
/* Figma footer: 454px hoog. padding-block: var(--space-20) top + var(--space-12) bottom
   zorgt voor meer ruimte en benadert de Figma-hoogte beter. */
.site-footer { background-color: var(--color-black); color: rgba(255,255,255,0.7); padding-block: var(--space-20) var(--space-12); }
/* Volgorde matcht de originele UI: logo | Informatie | Registreren | Volg ons */
.footer-top { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr 1fr auto; gap: var(--space-12); align-items: start; }
.footer-brand { display: flex; align-items: center; gap: var(--space-3); }
.footer-social { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-social__label { font-size: var(--text-base); color: var(--color-gray-light); }
.footer-social__icons { display: flex; gap: var(--space-3); }
.social-icon {
  width: 54px; height: 54px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: flex-start; text-decoration: none;
  overflow: hidden; transition: transform var(--transition-fast);
}
.social-icon svg { width: 30px; height: 30px; }
.social-icon:hover { transform: translateY(-2px); }

.footer-col__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-gray-light); margin-bottom: var(--space-4); font-weight: 400; }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: var(--text-base); color: var(--color-gray-light); text-decoration: none; }
.footer-col a:hover { color: var(--color-white); text-decoration: underline; }

.footer-divider { position: relative; z-index: 2; height: 1px; background: rgba(255,255,255,0.15); margin-block: var(--space-10); }
.footer-legal { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; font-size: var(--text-xs); color: rgba(255,255,255,0.45); }
.footer-legal a { color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-legal a:hover { color: var(--color-white); }
.footer-legal__copy { margin-left: auto; }

/* ──────────────────────────────────────────
   16. ANIMATIES
   ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  /* Geen kunstmatige scroll-ruimte voor wie animaties uitschakelt — de
     envelop staat statisch open (zie script.js initIdentityScroll). */
  .identity { height: auto; }
  .identity__pin { position: static; height: auto; padding-block: var(--space-20); }
  /* Zonder zoom-animatie: envelop groter tonen zodat de tekst tóch leesbaar is. */
  .identity__stack { width: min(92vw, 620px); }
}

/* ──────────────────────────────────────────
   17. MEDIA QUERIES
   ────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* text-align:center hoort hier NIET op .hero__inner — dat erft anders door
     naar het ingevoegde formulier (labels, checkbox-tekst) en centreert die
     onbedoeld mee. Alleen de hero-copy (titel/subtitel) moet centreren. */
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__copy { align-items: center; text-align: center; }
  .hero__form-card { width: 100%; }
  .contact-split { grid-template-columns: 1fr; }
  /* Op mobiel min-height terugbrengen — twee kolommen gestapeld van 860px
     elk = 1720px is te lang op een scherm. 560px per kolom is ruim genoeg. */
  .contact-split__col { min-height: 560px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  /* Alle formaten ONDER desktop: horizontale nav weg, hamburger + fullscreen
     menu aan (leesbaar lichtblauw menu i.p.v. de moeilijk-leesbare blend-nav). */
  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  /* Tablet + smallere desktop: compacter brief-papier (breder, minder padding,
     strakkere regels) zodat de langere tekst binnen het venster past — tussen
     navbar en envelop-mond. Op brede desktop (>1024) is het papier al breed genoeg. */
  .identity__letter { width: 94%; padding: 8% 12%; gap: 0.4em; }   /* veilige basis voor KORTE/landscape vensters (brief vult de envelop, past tussen navbar en mond). De grotere 'omlijstende' envelop komt uit de min-height-query verderop (alleen als er genoeg hoogte is). */
  .identity__letter-text { line-height: 1.2; }
  .identity__stack { margin-top: 5vh; }   /* kleine omlaag-duw voor navbar-vrije bovenkant */
  .identity { --rise-out: 0.54; --zoom-out: 1.08; }   /* compacter papier + kleinere envelop → brief mag verder uitkomen */
}

@media (max-width: 860px) {
  .gallery-carousel { --scale: 0.72; }
  /* Deco-kaarten verborgen op tablet/mobiel: te breed voor smalle viewports.
     Blauw is nog deels zichtbaar op 861–1100px, roze valt grotendeels buiten het scherm
     maar overflow:hidden op .benefits knipt het weg zonder horizontale scroll. */
  .benefits__deco--pink { display: none; }
  .benefits__card { padding: var(--space-8); }
  .identity__stack { width: min(72vw, 440px); }   /* veilige basis (korte/landscape vensters); grotere omlijstende envelop komt uit de min-height-query */
}

/* Tablet/iPad: op deze breedtes zou de blauwe foto (absoluut, rechts) ánders
   ÓVER de tekst vallen. Oplossing: zet de foto binnen de folder rechtsboven en
   reserveer die ruimte met een float-spacer in de tekst, zodat de tekst er
   netjes OMHEEN wrapt (en dus leesbaar blijft) i.p.v. erachter te verdwijnen. */
@media (min-width: 641px) and (max-width: 1100px) {
  .benefits__deco--blue {
    right: 20px; top: 88px;
    width: 200px; height: 288px;
  }
  .benefits__content::before {
    content: "";
    float: right;
    width: 216px;   /* foto (200px) + wat ademruimte */
    height: 300px;
    margin: 0 0 var(--space-4) var(--space-6);
    shape-outside: inset(0);
  }
}

@media (max-width: 640px) {
  :root { --header-h: 76px; }
  /* .site-nav / .nav-toggle display staat nu in de ≤1024-query (geldt voor alle
     formaten onder desktop). */
  .header-inner { padding-inline: var(--space-5); }

  .hero__title-line { font-size: 2.25rem; }
  .signup-card { max-width: 100%; }

  .gallery-carousel { --scale: 0.56; }
  /* Mobiel: envelop start UITGEZOOMD en zoomt IN naar 120% tijdens het scrollen
     (grotere envelop, valt buiten het frame). De BRIEF is LOSGEKOPPELD van deze
     zoom (script.js schaalt alleen de envelop + counter-schaalt de brief), dus de
     brieftekst blijft op 16px met padding binnen de brief-SVG. */
  .identity { height: 220vh; --rise-out: 0.40; --zoom-out: 1.20; }
  /* Mobiel: envelop zo breed mogelijk + hogere brief zodat de brieftekst zo
     dicht mogelijk bij 16px komt (kleine viewport = fysieke grens voor 90 woorden). */
  /* Mobiel: kleinere BASIS-envelop zodat de dichte envelop bij het BEGIN volledig
     op scherm past (uitgezoomd). Tijdens het scrollen zoomt hij in (--zoom-out
     1.12) en valt hij dan iets buiten het frame (overflow:hidden op .identity__pin
     snijdt netjes af). */
  /* margin-top duwt de (grotere) envelop omlaag → de mond zit lager, zodat de
     brief met extra witruimte (padding) er volledig boven past. */
  .identity__stack { width: min(96vw, 410px); margin-top: 12vh; }
  /* Brief-BREEDTE los van de (nu overhangende) envelop: op de navbar-breedte
     gezet (viewport - 2× navbar-padding ≈ 20px) zodat de briefranden in lijn
     liggen met logo/hamburger. Ruimere padding = meer witmarge rond de tekst. */
  /* Brief-BREEDTE ongewijzigd (prima); wel meer VERTICALE witruimte binnen de
     brief-SVG: ruimere top/bottom-padding + iets meer ruimte tussen 'IDENTITEIT'
     en de tekst. Iets strakkere regelhoogte (1.15) koopt de ruimte voor die
     padding zodat de volledige tekst tóch boven de mond past. */
  /* Brief-breedte = navbar-breedte (100vw-40) MAAR gecapt op 380px. De envelop
     is (na de ×1.20 zoom) visueel ~min(96vw,410)*1.2 breed; zonder de cap zou de
     op-basisgrootte-teruggeschaalde brief bij bredere mobiele viewports (±533px+)
     BREDER worden dan de envelop en eruit lopen. De cap houdt 'm er altijd binnen. */
  .identity__letter { width: min(calc(100vw - 40px), 380px); padding: 13% 8%; gap: 0.7em; }
  .identity__letter-text { line-height: 1.15; }

  /* KORTE mobiele viewports (SE / veel browser-chrome): 16 regels + ruime padding
     passen niet → graceful fallback met strakkere padding/regels zodat de brief
     volledig zichtbaar blijft (bovenkant vrij van de navbar). */
  @media (max-height: 700px) {
    .identity__stack { margin-top: 8vh; }
    .identity__letter { padding: 7% 8%; gap: 0.4em; }
    .identity__letter-text { line-height: 1.08; }
  }
  /* Hint uit de flex-flow halen zodat hij de envelop niet omhoog duwt. */
  .identity__hint { position: absolute; left: 0; right: 0; bottom: 6vh; }

  /* H2 iets kleiner op mobiel → "...mij als ondernemer?" past in 2 regels i.p.v. 3. */
  .benefits__title { font-size: 1.6rem; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-social { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .footer-legal__copy { margin-left: 0; }

  .benefits__tab { padding: 0.7rem var(--space-4); font-size: var(--text-base); }
  .benefits__deco--blue { display: none; }
  .signup-step-actions { flex-direction: column; gap: var(--space-3); align-items: stretch; }
}

/* GROTERE, OMLIJSTENDE ENVELOP op tablet/smalle desktop — maar ALLEEN als het
   venster hoog genoeg is (portret-tablets, hoge vensters). De brief wordt smaller
   (84%) en de groene envelop groeit mee, zodat er een duidelijke groene rand om
   de brief zit (zoals op desktop). Op KORTE/landscape vensters (min-height faalt)
   valt alles terug op de basis hierboven (brief vult de envelop) zodat de tekst
   tussen navbar en mond blijft passen zonder onder de navbar te duiken.
   Max-width 1024 zodat de echte desktop (>1024) ongemoeid blijft. */
@media (min-width: 641px) and (max-width: 1024px) and (min-height: 820px) {
  .identity__stack { width: min(76vw, 520px); }
  .identity__letter { width: 84%; }
}

/* ──────────────────────────────────────────
   LEGAL-PAGINA'S — content + "Op deze pagina" TOC-sidebar
   ────────────────────────────────────────── */
/* Legal-pagina's dragen de vaste site-navbar (via navbar.js) → content onder de
   balk laten starten. Class staat op <body>. */
.has-fixed-nav { padding-top: var(--header-h); }

/* Legal-pagina's zijn tweetalig: het NL- en EN-contentblok staan beide in de HTML;
   op basis van <html lang> (gezet uit localStorage) toont het juiste blok. */
html:not([lang="en"]) .legal [data-lang="en"] { display: none; }
html[lang="en"] .legal [data-lang="nl"] { display: none; }

.legal-shell {
  max-width: 1080px; margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.legal-shell .legal { max-width: 760px; margin: 0; padding-inline: 0; }
.legal h2 { scroll-margin-top: 96px; }

.legal-toc { position: sticky; top: 88px; padding-top: clamp(var(--space-12), 8vw, var(--space-24)); }
.legal-toc__inner { border-left: 2px solid rgba(0,0,0,0.10); padding-left: var(--space-5); }
.legal-toc__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-base); color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.legal-toc__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; }
.legal-toc__link {
  display: block; font-size: var(--text-sm); line-height: 1.45;
  color: var(--color-text-muted); text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: calc(-1 * var(--space-5) - 2px); padding-left: var(--space-5);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-toc__link:hover { color: var(--color-text); }
.legal-toc__link.is-active { color: var(--color-text); font-weight: 600; border-left-color: var(--color-terracotta); }

@media (max-width: 900px) {
  .legal-shell { grid-template-columns: 1fr; }
  .legal-toc { display: none; }
}

@media print {
  .site-header, .nav-toggle, .mobile-menu, .site-footer { display: none; }
}