/* ==========================================================================
   LegalMomo - Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Palette — donker + warm */
  --bg-dark: #0A0A0B;
  --bg-darker: #050506;
  --bg-navy: #0F1519;
  --bg-cream: #F5F0E5;
  --bg-cream-2: #FAF6EE;
  --bg-cream-3: #EFE8D9;

  --text-cream: #F5F0E5;
  --text-cream-dim: rgba(245, 240, 229, 0.72);
  --text-cream-mute: rgba(245, 240, 229, 0.5);
  --text-dark: #1A1614;
  --text-dark-dim: rgba(26, 22, 20, 0.7);
  /* 0.5 gaf op lichte achtergronden maar 3.3–3.4:1 contrast (onder de WCAG
     AA-norm van 4.5:1 voor gewone tekst); 0.62 komt op zowel wit als crème
     boven 4.5:1 uit, met een minimale kleurverandering. */
  --text-dark-mute: rgba(26, 22, 20, 0.62);

  /* Accents */
  --gold: #C9A76F;
  --gold-bright: #D8B77E;
  --gold-dim: #A88A54;
  --gold-glow: rgba(201, 167, 111, 0.15);

  /* Status colors — subtle */
  --status-green: #7A9E7E;
  --status-green-bg: rgba(122, 158, 126, 0.12);
  --status-amber: #C9A45A;
  --status-amber-bg: rgba(201, 164, 90, 0.14);
  --status-red: #B87A6E;
  --status-red-bg: rgba(184, 122, 110, 0.12);
  --status-coral-bg: rgba(230, 174, 156, 0.14);
  --status-blue-bg: rgba(160, 190, 220, 0.14);
  --status-teal-bg: rgba(160, 210, 200, 0.14);

  /* Borders */
  --border-cream: rgba(245, 240, 229, 0.08);
  --border-cream-strong: rgba(245, 240, 229, 0.15);
  --border-dark: rgba(26, 22, 20, 0.1);
  --border-dark-strong: rgba(26, 22, 20, 0.2);

  /* Type */
  --font-serif: 'Fraunces', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, sans-serif;

  /* Grid */
  --page-max: 1400px;
  --page-pad: 40px;
  --section-gap: 120px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-dark);
  color: var(--text-cream);
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;
}

/* Woorden als "informatiebeveiligingsmanagementsysteem" rekten op smalle
   telefoons hele rasterkolommen op; in lopende tekst mogen ze afbreken.
   Koppen staan er bewust niet bij: die mogen nooit middenin een woord breken. */
p, li, td, th, dd, dt, figcaption, label, blockquote, .form-check, .footer-cookies {
  overflow-wrap: break-word;
}

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

/* Type utilities */
.serif { font-family: var(--font-serif); font-weight: 400; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(48px, 6.5vw, 96px); }
h2 { font-size: clamp(38px, 5vw, 68px); }
h3 { font-size: clamp(24px, 2.6vw, 34px); }
h4 { font-size: clamp(18px, 1.6vw, 22px); }
/* kaartkoppen blijven visueel gelijk, maar staan nu op het juiste
   koppenniveau (h3 onder een h2) in plaats van een niveau over te slaan */
.kaartkop { font-size: clamp(18px, 1.6vw, 22px); }

p { font-size: 16px; color: var(--text-cream-dim); }

a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-block;
}
.eyebrow.dim { color: var(--gold-dim); }

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* ==========================================================================
   Top notice band
   ========================================================================== */

.topbar {
  padding: 12px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-cream);
  font-size: 13px;
  color: var(--text-cream-dim);
  background: var(--bg-darker);
  position: relative;
  z-index: 60;
}
.topbar a { color: var(--gold); }
.topbar a:hover { color: var(--gold-bright); }

/* Skiplink: eerste tabstop, alleen zichtbaar zodra hij focus krijgt. */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--gold); color: #1A1614;
  font-size: 14px; font-weight: 500; border-radius: 0 0 6px 0;
}
.skiplink:focus { left: 0; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 22px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-cream);
}
.nav.on-cream {
  background: rgba(245, 240, 229, 0.88);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-dark);
}

.logo {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-cream);
  letter-spacing: -0.01em;
}
.nav.on-cream .logo { color: var(--text-dark); }
/* Beeldmerk: het LM-monogram uit de merkstijl. De letters blijven in de
   opmaak staan voor voorleessoftware, maar worden visueel vervangen. */
.logo-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  background: url('images/logo-mark.png') center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.nav-links {
  display: flex;
  gap: 42px;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
}
.nav-links a {
  color: var(--text-cream-dim);
  transition: color 0.2s;
  padding: 4px 0;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-cream); }
.nav.on-cream .nav-links a { color: var(--text-dark-dim); }
.nav.on-cream .nav-links a:hover, .nav.on-cream .nav-links a.active { color: var(--text-dark); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--gold);
}

.nav-right {
  display: flex; align-items: center;
  gap: 20px;
  font-size: 14px;
}
.nav-right .login {
  color: var(--text-cream-dim);
  transition: color 0.2s;
}
.nav-right .login:hover { color: var(--text-cream); }
.nav.on-cream .nav-right .login { color: var(--text-dark-dim); }

/* Hamburger: op mobiel de enige weg naar de hoofdnavigatie, dus met een
   echte toestand (aria-expanded) en een zichtbaar kruis als het menu open is. */
.nav-toggle {
  display: none;
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-cream-strong);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
}
.nav.on-cream .nav-toggle { border-color: var(--border-dark); }
.nav-toggle-streep,
.nav-toggle-streep::before,
.nav-toggle-streep::after {
  position: absolute;
  left: 50%; width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.16s ease;
}
.nav-toggle-streep { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle-streep::before { content: ""; transform: translate(-50%, -6px); }
.nav-toggle-streep::after  { content: ""; transform: translate(-50%, 6px); }
/* De middelste streep wordt onzichtbaar gemaakt met een doorzichtige vulling.
   opacity op de groep zou ook de twee pseudo-elementen meenemen. */
.nav-toggle[aria-expanded="true"] .nav-toggle-streep { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-streep::before { transform: translate(-50%, 0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-streep::after  { transform: translate(-50%, 0) rotate(-45deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
}
.btn.primary {
  background: var(--gold);
  color: #1A1614;
  border-color: var(--gold);
}
.btn.primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}
.btn.secondary {
  background: transparent;
  color: var(--text-cream);
  border-color: rgba(245, 240, 229, 0.3);
}
.btn.secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn.on-cream {
  color: var(--text-dark);
  border-color: rgba(26, 22, 20, 0.3);
}
.btn.on-cream:hover {
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
.btn.big { padding: 18px 34px; font-size: 15px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-dark);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.80) 28%, rgba(10,10,11,0.42) 58%, rgba(10,10,11,0.72) 100%),
    radial-gradient(1200px 700px at 75% 55%, rgba(201, 167, 111, 0.10), transparent 70%),
    radial-gradient(800px 500px at 90% 90%, rgba(201, 167, 111, 0.06), transparent 60%);
}

/* Rasteroverlay op de hero-video is verwijderd: op de daadwerkelijke
   videobeelden oogde het onbedoeld druk in plaats van subtiel. */

.hero-image {
  position: absolute;
  right: -5%; top: 0;
  width: 65%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(201, 167, 111, 0.2), transparent 60%);
  opacity: 0.8;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 60px 0 100px;
  width: 100%;
}

.hero .eyebrow {
  margin-bottom: 30px;
}

.hero h1 {
  max-width: 900px;
  margin-bottom: 30px;
  line-height: 1.02;
}

.accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}

.hero-sub {
  font-size: 18px;
  max-width: 540px;
  color: var(--text-cream-dim);
  margin-bottom: 40px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(245, 240, 229, 0.04);
  border: 1px solid var(--border-cream-strong);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-cream-dim);
  max-width: 620px;
}
.hero-proof strong { color: var(--gold); font-weight: 500; }
.hero-proof a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  margin-left: auto;
}

/* Bewijsbalk / stats strip */

.stats-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
  padding: 46px 0;
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(8px);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: baseline;
}
.stat-item {
  border-left: 1px solid var(--border-cream-strong);
  padding-left: 24px;
}
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}
.stat-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-cream-mute);
}

/* ==========================================================================
   Sections
   ========================================================================== */

section { position: relative; }

.section-cream {
  background: var(--bg-cream);
  color: var(--text-dark);
  padding: var(--section-gap) 0;
}
.section-cream p { color: var(--text-dark-dim); }

.section-dark {
  background: var(--bg-dark);
  padding: var(--section-gap) 0;
}

.section-navy {
  background: var(--bg-navy);
  padding: var(--section-gap) 0;
}

.section-head {
  max-width: 720px;
  margin-bottom: 64px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 24px; }
.section-head h2 { margin-bottom: 24px; }
.section-head p { font-size: 18px; max-width: 620px; }

/* ==========================================================================
   Problem block
   ========================================================================== */
.problem-block {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.problem-block h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  margin-bottom: 32px;
  line-height: 1.1;
}
.problem-block h2 em {
  color: var(--gold);
  font-style: italic;
}
.problem-block p {
  font-size: 18px;
  color: var(--text-dark-dim);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   Controls: 4 cards
   ========================================================================== */

.controls-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 60px;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.control-card {
  padding: 32px 28px;
  background: rgba(245, 240, 229, 0.6);
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.35s ease;
}
.control-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px -20px rgba(26, 22, 20, 0.15);
}
.control-num {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold-dim);
  margin-bottom: 8px;
}
.control-card h4, .control-card h3, .control-card .kaartkop {
  font-size: 19px;
  margin-bottom: 4px;
}
.control-card p {
  font-size: 15.5px;
  color: var(--text-dark-dim);
  flex: 1;
}
.control-card .badge {
  align-self: flex-start;
  margin-top: auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.badge.green { background: var(--status-green-bg); color: var(--status-green); }
.badge.amber { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.red { background: var(--status-red-bg); color: var(--status-red); }

.controls-outro {
  margin-top: 40px;
  padding: 24px 28px;
  border-left: 2px solid var(--gold-dim);
  background: rgba(201, 167, 111, 0.05);
  border-radius: 0 4px 4px 0;
  font-size: 15px;
  color: var(--text-dark-dim);
}
.controls-outro a { color: var(--gold-dim); border-bottom: 1px solid var(--gold-dim); }

/* ==========================================================================
   Chain of features (Harvey-inspired big text)
   ========================================================================== */

.chain {
  padding: var(--section-gap) 0;
  background: var(--bg-cream-2);
  color: var(--text-dark);
  position: relative;
}
.chain-inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 200px;
  gap: 60px;
  align-items: start;
}
.chain-side { position: sticky; top: 120px; }
.chain-side .eyebrow { color: var(--gold-dim); margin-bottom: 20px; display:block;}
.chain-side p { font-size: 15px; color: var(--text-dark-dim); }
.chain-side .chain-desc {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-dark);
  font-size: 14px;
  color: var(--text-dark);
  min-height: 4.5em;
}
.chain-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-dim);
}
.chain-link:hover { color: var(--gold); }

.chain-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
  min-height: 500px;
  justify-content: center;
}
.chain-word {
  font-family: var(--font-serif);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 400;
  line-height: 1;
  color: rgba(26, 22, 20, 0.24);
  transition: color 0.5s ease, transform 0.5s ease;
  text-align: center;
  letter-spacing: -0.02em;
}
.chain-word:hover { color: rgba(26, 22, 20, 0.5); cursor: pointer; }
.chain-word.active {
  color: var(--text-dark);
}
.chain-word.active em {
  color: var(--gold-dim);
  font-style: italic;
}

.chain-right { padding-top: 40px; }
.chain-index {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-dim);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chain-index .line {
  flex: 1; height: 1px; background: var(--gold-dim); opacity: 0.4; max-width: 40px;
}
.chain-next {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.chain-nextname {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.chain-nextname:hover { color: var(--gold-dim); }

/* ==========================================================================
   Feature cards row (harvey-like)
   ========================================================================== */

.feature-row {
  padding: var(--section-gap) 0;
  background: var(--bg-dark);
  overflow: hidden;
}
.feature-row-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.feature-row-head h2 { max-width: 600px; }
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  height: 460px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-cream-strong);
  background: linear-gradient(180deg, #14100C 0%, #1A1410 100%);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.35s ease, border-color 0.35s ease;
  cursor: pointer;
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 400px at 50% 20%, rgba(201, 167, 111, 0.25), transparent 70%);
  opacity: 0.6;
  transition: opacity 0.35s;
}
.feature-card:hover::before { opacity: 1; }
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255, 220, 180, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(201, 167, 111, 0.15) 0%, transparent 40%);
  pointer-events: none;
}
.feature-card > * { position: relative; z-index: 2; }
.feature-card h3 {
  font-size: 32px;
  margin-bottom: 12px;
}
.feature-card p {
  font-size: 14px;
  color: var(--text-cream-dim);
  max-width: 320px;
  margin-bottom: 20px;
}
.feature-card .arrow {
  align-self: flex-start;
  width: 44px; height: 44px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  display: grid; place-items: center;
  transition: all 0.3s;
}
.feature-card:hover .arrow {
  background: var(--gold);
  color: var(--bg-dark);
}
.feature-card-inner {
  transition: transform 0.35s ease;
}
.feature-card:hover .feature-card-inner { transform: translateY(-6px); }

.feature-arrows {
  display: flex; gap: 8px;
  margin-top: 32px;
}
.feature-arrow-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--border-cream-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-cream);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.feature-arrow-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   Marquee for logos / firms
   ========================================================================== */

.marquee-wrap {
  padding: 60px 0;
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
  overflow: hidden;
  background: var(--bg-darker);
}
.marquee-lead {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-cream-mute);
  margin-bottom: 32px;
}
.marquee {
  display: flex;
  gap: 80px;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-cream-mute);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.3s;
}
.marquee-item:hover { color: var(--gold); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   EU / Security section
   ========================================================================== */

.eu-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.eu-block h2 { max-width: 480px; }
.eu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-top: 40px;
}
.eu-item {
  padding: 24px 24px 24px 20px;
  border-left: 2px solid var(--gold);
  background: rgba(245, 240, 229, 0.03);
  border-radius: 0 4px 4px 0;
}
.eu-item h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-cream);
}
.eu-item p {
  font-size: 13px;
  color: var(--text-cream-dim);
}

.eu-visual {
  position: sticky;
  top: 120px;
  padding: 40px;
  background:
    linear-gradient(180deg, rgba(201,167,111,0.06), rgba(201,167,111,0.02)),
    var(--bg-darker);
  border: 1px solid var(--border-cream-strong);
  border-radius: 8px;
}
.eu-visual-title {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 24px;
}
.eu-databases {
  display: flex; gap: 12px;
  margin-bottom: 30px;
}
.eu-db {
  flex: 1;
  aspect-ratio: 1;
  border: 1px solid var(--border-cream-strong);
  border-radius: 4px;
  display: grid; place-items: center;
  text-align: center;
  font-size: 11px;
  color: var(--gold);
  padding: 10px;
  background: rgba(201, 167, 111, 0.05);
}
.eu-flow {
  padding: 20px;
  border: 1px dashed rgba(201, 167, 111, 0.3);
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  color: var(--text-cream-dim);
}
.eu-flow strong { color: var(--gold); }

/* ==========================================================================
   For who / roles
   ========================================================================== */

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.role-card {
  padding: 40px 32px;
  border: 1px solid var(--border-cream-strong);
  background: rgba(245, 240, 229, 0.02);
  border-radius: 6px;
  transition: all 0.3s;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.role-card:hover {
  border-color: var(--gold);
  background: rgba(245, 240, 229, 0.05);
}
.role-card h3 {
  font-size: 26px;
  margin-bottom: 16px;
}
.role-card p {
  color: var(--text-cream-dim);
  font-size: 14px;
  flex: 1;
  margin-bottom: 20px;
}
.role-card .link {
  color: var(--gold);
  font-size: 14px;
  display: inline-flex; gap: 6px;
  align-items: center;
}

/* ==========================================================================
   Next-teaser (cream "up next" card, e.g. "Wat het kost")
   ========================================================================== */

.next-teaser {
  background: var(--bg-cream-2);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.next-teaser-icon {
  width: 40px; height: 40px;
  border: 1.5px solid var(--gold-dim);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--gold-dim);
  margin-bottom: 18px;
}
.next-teaser-text h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--text-dark);
}
.next-teaser-text p {
  color: var(--text-dark-dim);
  max-width: 480px;
  font-size: 15.5px;
  line-height: 1.6;
}
.next-teaser-cta {
  background: var(--text-dark);
  color: var(--bg-cream) !important;
  padding: 18px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s, transform 0.2s;
}
.next-teaser-cta:hover { opacity: 0.85; transform: translateY(-2px); }
/* Langere knoptekst (bijv. "Bekijk de meetresultaten en ontwikkelstatus")
   past niet altijd op één regel op een smal scherm. white-space:nowrap
   voorkomt daar een lelijke afbreking vóór de pijl, maar duwt de knop dan
   buiten de viewport. Onder 480px mag de tekst dus wél wrappen. */
@media (max-width: 480px) {
  .next-teaser-cta { white-space: normal; text-align: center; }
}

/* ==========================================================================
   Slotband (footer CTA banner)
   ========================================================================== */

.slotband {
  background: var(--bg-navy);
  padding: 80px 0;
  text-align: center;
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
}
.slotband h2 {
  margin-bottom: 16px;
  color: var(--text-cream);
}
.slotband p {
  color: var(--text-cream-dim);
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.slotband-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--bg-darker);
  padding: 80px 0 40px;
  color: var(--text-cream-dim);
  font-size: 14px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border-cream);
}
.footer-brand p {
  font-size: 14px;
  max-width: 260px;
  margin-top: 20px;
}
.footer-brand .logo-mark { font-size: 12px; letter-spacing: -0.02em; }
.footer-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.footer-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-cream-mute);
}
.footer-badge svg { color: var(--gold-dim); flex-shrink: 0; }
.footer-col .footer-kop {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { color: var(--text-cream-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--text-cream); }

.footer-bottom {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: var(--text-cream-mute);
}
/* wrap: op smalle telefoons (360 px) liepen de vier voetlinks anders 23 px buiten beeld */
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.footer-cookies {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-cream-mute);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

/* Typewriter / text reveal for hero */
.split-line {
  display: block;
  overflow: hidden;
}
.split-line span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 1s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
.split-line.d1 span { animation-delay: 0.05s; }
.split-line.d2 span { animation-delay: 0.15s; }
.split-line.d3 span { animation-delay: 0.25s; }
.split-line.d4 span { animation-delay: 0.35s; }
@keyframes rise {
  to { transform: translateY(0); }
}

/* ==========================================================================
   Interior page - Bronnencheck instrument
   ========================================================================== */

.tool-hero {
  padding: 100px 0 60px;
  border-bottom: 1px solid var(--border-cream);
  background: var(--bg-darker);
}
.tool-shell {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-cream);
  color: var(--text-dark);
  border-radius: 10px;
  padding: 40px;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.5);
}
.tool-shell h2 { font-size: 32px; margin-bottom: 20px; }
.tool-shell p { color: var(--text-dark-dim); }
.tool-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 24px; }
.chip {
  padding: 6px 14px;
  border: 1px solid var(--border-dark);
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  margin: 0;
  color: var(--text-dark-dim);
  cursor: pointer;
  transition: all 0.2s;
}
.chip:hover, .chip.active { border-color: var(--gold-dim); color: var(--gold-dim); background: rgba(201, 167, 111, 0.06); }
.chip.warn { background: var(--status-amber-bg); border-color: var(--gold-dim); color: var(--gold-dim); }
.tool-textarea {
  width: 100%;
  min-height: 180px;
  padding: 20px;
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  background: white;
  color: var(--text-dark);
  resize: vertical;
}
.tool-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 20px;
  flex-wrap: wrap;
}
.tool-counter { font-size: 13px; color: var(--text-dark-mute); }

/* Privacy strip */
/* Controle-uitkomst binnen dezelfde instrumentkaart, dus zonder paginawissel. */
.tool-result {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border-dark);
}
.tool-result-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.tool-result-head h3, .tool-shell .tool-result-kop { font-size: 20px; margin: 0; color: var(--text-dark); }
.tool-result-sum { font-size: 14px; color: var(--text-dark-dim); margin-bottom: 18px; }
.tool-result-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-dark);
  font-size: 13px;
  color: var(--text-dark-dim);
}
.tool-status { margin-top: 14px; font-size: 13px; color: var(--gold-dim); }

.privacy-strip {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(122, 158, 126, 0.08);
  border-left: 2px solid var(--status-green);
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  color: var(--text-dark-dim);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.privacy-strip strong { color: var(--text-dark); font-weight: 500; }

/* ==========================================================================
   Prijzen (Pricing)
   ========================================================================== */
.pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-darker);
  border: 1px solid var(--border-cream-strong);
  border-radius: 100px;
  margin: 0 auto 60px;
}
.pricing-toggle button {
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: var(--text-cream-dim);
  font-size: 14px;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.pricing-toggle button.active {
  background: var(--gold);
  color: var(--bg-darker);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pricing-card {
  padding: 40px 32px;
  border: 1px solid var(--border-cream-strong);
  border-radius: 8px;
  background: rgba(245, 240, 229, 0.02);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.pricing-card.featured {
  background: linear-gradient(180deg, rgba(201, 167, 111, 0.08), rgba(201, 167, 111, 0.02));
  border-color: var(--gold);
  position: relative;
}
.pricing-card.featured::before {
  content: "Volledige licentie";
  position: absolute;
  top: 20px; right: 20px;
  padding: 4px 12px;
  background: var(--gold);
  color: var(--bg-darker);
  font-size: 11px;
  font-weight: 500;
  border-radius: 100px;
}
.price-role {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.price-desc {
  font-size: 14px;
  color: var(--text-cream-dim);
  margin-bottom: 32px;
  min-height: 40px;
}
.price-num {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1;
  color: var(--text-cream);
  margin-bottom: 8px;
  font-weight: 400;
}
.price-num sup { font-size: 24px; vertical-align: super; margin-right: 4px; }
/* Alleen het achtervoegsel ("p/m") klein zetten. Zonder :not([data-price])
   pakt deze regel ook het prijsgetal zelf, dat dan op 15px rendert. */
.price-num span:not([data-price]) { font-size: 15px; color: var(--text-cream-dim); margin-left: 4px; font-family: var(--font-sans); }
.price-alt {
  font-size: 13px;
  color: var(--text-cream-mute);
  margin-bottom: 40px;
}
.price-features {
  list-style: none;
  margin-bottom: 32px;
  flex: 1;
}
.price-features li {
  padding: 10px 0;
  border-top: 1px solid var(--border-cream);
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-features li:last-child { border-bottom: 1px solid var(--border-cream); }
.price-features li::before {
  content: "✓";
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Benchmark table */
.benchmark {
  margin-top: 80px;
  overflow-x: auto;
}
.benchmark table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.benchmark th, .benchmark td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-cream);
}
.benchmark th {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-cream-mute);
  font-weight: 500;
}
.benchmark tr.us {
  background: rgba(201, 167, 111, 0.05);
}
.benchmark tr.us td:first-child { color: var(--gold); font-weight: 500; }

/* ==========================================================================
   Timeline (8 stappen)
   ========================================================================== */

.timeline {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 24px; top: 0; bottom: 0;
  width: 1px;
  background: var(--border-cream-strong);
}
.timeline-step {
  position: relative;
  padding-left: 70px;
  padding-bottom: 40px;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 1px solid var(--border-cream-strong);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--gold);
}
.timeline-step.accent::before {
  border-color: var(--gold);
  background: rgba(201, 167, 111, 0.1);
}
.timeline-step h4, .timeline-step .kaartkop {
  font-size: 22px;
  margin-bottom: 8px;
}
.timeline-step p { font-size: 15.5px; color: var(--text-cream-dim); }

/* ==========================================================================
   Table (data)
   ========================================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(245, 240, 229, 0.02);
  border: 1px solid var(--border-cream);
  border-radius: 6px;
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-cream);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table th {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-cream-mute);
  font-weight: 500;
  background: rgba(10, 10, 11, 0.5);
}
.data-table.cream {
  background: rgba(245, 240, 229, 0.5);
  border-color: var(--border-dark);
}
.data-table.cream th, .data-table.cream td { border-color: var(--border-dark); }
.data-table.cream th { color: var(--text-dark-mute); background: rgba(26, 22, 20, 0.03); }

/* ==========================================================================
   Score bars
   ========================================================================== */

.score-list { display: flex; flex-direction: column; gap: 12px; }
.score-row {
  display: grid;
  grid-template-columns: 220px 1fr 60px minmax(110px, max-content);
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-dark);
  font-size: 14px;
}
.score-bar {
  height: 6px;
  background: rgba(26, 22, 20, 0.08);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.score-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--gold);
  border-radius: 100px;
}
.score-val { font-family: var(--font-serif); font-size: 18px; text-align: right; }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-cream-mute);
  margin-bottom: 8px;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(245, 240, 229, 0.03);
  border: 1px solid var(--border-cream-strong);
  border-radius: 4px;
  color: var(--text-cream);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--gold);
}
.form-field.full { grid-column: 1 / -1; }
.form-checks {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.form-check {
  padding: 8px 14px;
  border: 1px solid var(--border-cream-strong);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text-cream-dim);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-check::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.form-check:hover, .form-check.active {
  border-color: var(--gold);
  color: var(--gold);
}
/* Chips met een echte checkbox: het hokje zelf is visueel verborgen, de pil is
   het bedieningselement. Toetsenbordfocus blijft zichtbaar op de pil. */
.form-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-check:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   Cursor blob (dynamic mouse effect)
   ========================================================================== */

.cursor-blob {
  position: fixed;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201, 167, 111, 0.08), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.15s ease-out, opacity 0.3s;
  opacity: 0;
}

/* ==========================================================================
   Page sub-nav (icon tab bar under a hero — Verantwoording, Voor inkoop)
   ========================================================================== */

.page-subnav {
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-cream);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 97px;
  z-index: 90;
}
.page-subnav::-webkit-scrollbar { display: none; }
.page-subnav .container { display: flex; gap: 4px; }
.page-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 20px 18px;
  font-size: 14px;
  color: var(--text-cream-dim);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.page-subnav a svg { color: var(--text-cream-mute); flex-shrink: 0; transition: color 0.2s; }
.page-subnav a:hover { color: var(--text-cream); }
.page-subnav a.active { color: var(--gold); border-color: var(--gold); }
.page-subnav a.active svg { color: var(--gold); }

/* Icon card — cream "waar we voor staan" / overzicht grids */
.icon-card {
  padding: 32px 28px;
  background: var(--bg-cream-2);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.icon-card:hover { transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 20px 40px -24px rgba(26,22,20,0.15); }
.icon-card h3 { font-size: 18px; color: var(--text-dark); margin-bottom: 8px; }
.icon-card p { font-size: 14px; color: var(--text-dark-dim); margin-bottom: 18px; line-height: 1.55; }
.icon-card a.card-link { color: var(--gold-dim); font-size: 13px; font-weight: 500; }
.icon-card a.card-link:hover { color: var(--gold); }

/* Stat card — "bronnen in cijfers" style number blocks on cream */
.stat-card {
  padding: 26px 24px;
  background: var(--bg-cream-2);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}
.stat-card .stat-num { font-family: var(--font-serif); font-size: 30px; color: var(--text-dark); line-height: 1; margin-bottom: 6px; }
.stat-card .stat-label { font-size: 13px; color: var(--text-dark-dim); margin-bottom: 4px; }
.stat-card .stat-date { font-size: 11px; color: var(--text-dark-mute); }

/* Facts panel — dark "in één oogopslag" callout embedded in a cream section */
.facts-panel { padding: 28px; background: var(--bg-darker); border-radius: 8px; }
.facts-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.facts-list li { display: flex; gap: 10px; align-items: flex-start; }
.facts-list .check { color: var(--status-green); flex-shrink: 0; margin-top: 2px; }
.facts-list strong { display: block; color: var(--text-cream); font-size: 15.5px; margin-bottom: 2px; }
.facts-list span { font-size: 12px; color: var(--text-cream-mute); }
/* Statuslijst: woordelijke status rechts, niet alleen een kleur of icoon. */
.status-list li { justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; }
/* flex:1 1 200px + flex-wrap hierboven: bij een lange beschrijving mag de
   badge naar een eigen regel vallen in plaats van de teksttitel tot een
   smalle kolom te dwingen. */
.status-list li > div { min-width: 0; flex: 1 1 200px; }
.status-list .badge { flex-shrink: 0; font-size: 10.5px; }

/* Checklist — simple checkbox list (inkoopchecklist) */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-dark-dim); }
.checklist input[type=checkbox] { accent-color: var(--gold-dim); width: 16px; height: 16px; flex-shrink: 0; }

/* Side-photo hero — Verantwoording, Voor inkoop */
.side-hero {
  position: relative;
  padding: 128px 0 0;
  background: var(--bg-dark);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}
.side-hero-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 46%;
  background-size: cover;
  background-position: center;
}
.side-hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bg-dark) 0%, rgba(10,10,11,0.55) 28%, rgba(10,10,11,0.1) 62%, transparent 80%);
}
/* Zelfde uitlijning als de hero op de homepage: volle breedte, geen extra
   horizontale padding. Zonder width:100% krimpt de container als flex-item
   om de tekst heen en wordt hij op de pagina gecentreerd. */
.side-hero > .container { width: 100%; padding-left: 0; padding-right: 0; }
.side-hero-inner { position: relative; z-index: 2; max-width: 620px; padding-bottom: 64px; }
.side-hero-inner p { font-size: 17px; margin: 24px 0 32px; }

/* Responsive grid containers for the components above */
.icon-card-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icon-card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icon-card-grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split-panel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.checklist-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3-safe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ==========================================================================
   D1 · Contrast op lichte achtergronden
   De merkkleuren zijn gekozen voor de donkere secties. Op crème en wit haalden
   ze 2,0 tot 3,3 op de WCAG-schaal, terwijl 4,5 de eis is voor gewone tekst.
   Binnen lichte containers krijgen dezelfde tokens daarom een donkerder waarde
   met exact dezelfde tint; alles wat var(--gold-dim) en de statuskleuren
   gebruikt, ook in inline stijlen, gaat automatisch mee.
   ========================================================================== */
.section-cream,
.chain,
.tool-shell,
.data-table.cream,
.nav.on-cream {
  --gold-dim: #806940;
  --status-amber: #85672C;
  --status-green: #547458;
  --status-red: #9D5A4D;
}
/* --gold blijft ongemoeid: die kleur wordt ook als vlak gebruikt (knoppen,
   lijnen, balken) en moet daar juist licht blijven. De achtergrondvarianten
   van de statuskleuren veranderen evenmin, zodat badges hun rustige vlak
   houden en alleen de letters donkerder worden.
   Donkere vlakken binnen een lichte sectie krijgen de oorspronkelijke,
   lichtere waarden terug. */
.section-cream .facts-panel,
.btn.primary,
.next-teaser-cta,
.chain .line {
  --gold-dim: #A88A54;
  --status-amber: #C9A45A;
  --status-green: #7A9E7E;
  --status-red: #B87A6E;
}

/* Aanvraagformulier op de inkooppagina — zelfde gedrag als het proefformulier */
.inkoop-form {
  max-width: 800px; padding: 40px; background: white;
  border-radius: 8px; border: 1px solid var(--border-dark);
}
.inkoop-hint { font-size: 12.5px; color: var(--text-dark-mute); line-height: 1.5; }
/* Validatiemeldingen: standaard verborgen, zichtbaar zodra JavaScript ze
   vrijgeeft. Deze regels stonden eerst alleen in de paginastijl van
   proef.html, waardoor op inkoop.html alle meldingen permanent rood
   in beeld stonden. */
.form-error { display: none; margin-top: 8px; font-size: 12.5px; color: var(--status-red); }
.form-error.zichtbaar { display: block; }
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--status-red); }
.inkoop-form .form-error { color: var(--status-red); }
.inkoop-status { display: none; margin-top: 20px; padding: 14px 16px; border-radius: 4px; font-size: 13.5px; line-height: 1.6; }
.inkoop-status.zichtbaar { display: block; }
.inkoop-status.fout { background: var(--status-red-bg); border: 1px solid rgba(184,122,110,0.35); color: var(--text-dark); }
.inkoop-bevestiging h3:focus, .inkoop-bevestiging h3:focus-visible { outline: none; }
/* chips op een lichte achtergrond */
.form-check.licht { border-color: var(--border-dark); color: var(--text-dark-dim); }
.form-check.licht:hover, .form-check.licht.active { border-color: var(--gold-dim); color: var(--gold-dim); }
@media (max-width: 1000px) { .inkoop-form { padding: 28px; } }

/* Staffelkorting onder de prijskaarten */
.staffel-blok {
  max-width: 820px; margin: 48px auto 0;
  border: 1px solid var(--border-cream-strong); border-radius: 6px;
  background: rgba(245, 240, 229, 0.02); overflow: hidden;
}
.staffel-rij { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 22px 28px; }
.staffel-rij + .staffel-rij { border-top: 1px solid var(--border-cream); }
.staffel-grens {
  font-family: var(--font-serif); font-size: 19px; color: var(--gold); line-height: 1.3;
}
.staffel-tekst { font-size: 14px; color: var(--text-cream-dim); }
.staffel-tekst a { color: var(--gold-dim); border-bottom: 1px solid var(--gold-dim); white-space: nowrap; }
.staffel-tekst a:hover { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 640px) {
  .staffel-rij { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 22px; }
}
/* Tweekoloms intro (kop links, toelichting rechts). Met minmax(0,1fr) kan de
   min-content van lange woorden de kolommen niet oprekken. */
.intro-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }

/* ==========================================================================
   Wat wij niet claimen — de twaalf beperkingskaarten
   Alle twaalf punten staan in één verticale kolom, met per punt exact dezelfde
   driedeling op exact dezelfde positie. De amber linkerrand is de kaartrand;
   rood wordt uitsluitend binnen meetstatussen gebruikt.
   ========================================================================== */

.niet-claim-kolom { display: flex; flex-direction: column; gap: 24px; max-width: 1040px; }

.niet-claim-kaart {
  padding: 32px;
  background: rgba(245, 240, 229, 0.02);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.niet-claim-kaart h2 { font-size: 26px; margin-bottom: 20px; }

/* Punt 10 draagt vier cijfertegels en krijgt daarom meer verticale ruimte,
   maar exact dezelfde horizontale opbouw als de elf andere kaarten. */
.niet-claim-kaart.breed { padding-top: 40px; padding-bottom: 40px; }

/* Leesbreedte per tekstkolom onder circa 34 rem houden. */
.niet-claim-kaart p { max-width: 34rem; }

/* Inhoudsopgave: op desktop rechts en bij scrollen beschikbaar. */
.niet-claim-toc {
  padding: 24px;
  border: 1px solid var(--border-cream-strong);
  border-radius: 6px;
  background: rgba(245, 240, 229, 0.02);
  align-self: start;
  position: sticky;
  top: 100px;
}
.niet-claim-toc-kop {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.niet-claim-toc-lijst {
  list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13px;
}
.niet-claim-toc-lijst a { color: var(--text-cream-dim); display: flex; gap: 8px; line-height: 1.45; }
.niet-claim-toc-lijst a:hover { color: var(--text-cream); }
.niet-claim-toc-lijst span { color: var(--gold-dim); flex-shrink: 0; }

/* ==========================================================================
   D3 · leesbreedte
   Op brede schermen liepen alinea's op tot ongeveer 220 tekens per regel.
   Een eigen inline max-width blijft voorgaan; gecentreerde blokken houden
   hun automatische marges.
   ========================================================================== */
section p, .tool-shell p { max-width: 75ch; }
/* Verwijzing naar methode en peildatum, op iedere pagina met meetcijfers. */
/* max-width:none overschrijft de "section p" leesbreedte-regel hieronder: bij
   12.5px komt 75ch neer op maar ~520px, wat de laatste, gekoppelde woorden
   van de link onnodig naar hun eigen regel duwt (een losse, kortere
   underline-balk als gevolg). Deze fijngedrukte regel mag de volle
   containerbreedte gebruiken. */
.peildatum-regel { margin-top: 14px; font-size: 12.5px; font-style: italic; color: var(--text-cream-mute); max-width: none; }
.section-cream .peildatum-regel { color: var(--text-dark-mute); }
.peildatum-regel a { color: var(--gold-dim); border-bottom: 1px solid var(--gold-dim); }
.section-head.center p, .slotband p { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --page-pad: 24px; --section-gap: 80px; }

  .next-teaser { flex-direction: column; align-items: flex-start; text-align: left; padding: 32px; }
  .next-teaser-cta { align-self: flex-start; }

  .page-subnav { top: 75px; }
  .page-subnav a { padding: 16px 14px; font-size: 13px; }
  .icon-card-grid, .icon-card-grid.cols-3, .icon-card-grid.cols-6, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-panel, .checklist-split, .qa-grid, .intro-split { grid-template-columns: minmax(0, 1fr); }
  .intro-split { gap: 28px; }
  .grid-3-safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Op mobiel is de inhoudsopgave een normale lijst boven de kaarten. */
  .niet-claim-toc { position: static; top: auto; margin-top: 32px; }
  .niet-claim-toc-lijst { gap: 12px; font-size: 14px; }
  .side-hero { padding-top: 96px; min-height: auto; }
  .side-hero-photo { display: none; }
  .side-hero-inner { max-width: 100%; padding-bottom: 48px; }
  /* op mobiel wel marge houden, anders raakt de tekst de schermrand */
  .side-hero > .container { padding-left: var(--page-pad); padding-right: var(--page-pad); }

  .nav { padding: 16px 20px; gap: 12px; flex-wrap: wrap; }
  .nav-right .login { display: none; }
  .nav-toggle { display: block; }

  /* Het menu schuift onder de balk open en neemt de volle breedte. De <nav>
     om de lijst heen is het flex-item, dus die moet naar de volgende regel. */
  .nav > nav { display: none; }
  .nav.menu-open > nav {
    display: block;
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin: 14px -20px -16px;
    padding: 6px 0 10px;
    border-top: 1px solid var(--border-cream);
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 16px;
  }
  /* Data-tables (Status, Faalgedrag e.d.) zijn op mobiel breder dan het scherm
     en worden horizontaal scrollbaar. De eerste kolom (naam van het onderdeel)
     blijft daarom vastgeprikt, zodat een gebruiker nooit een losse badge ziet
     zonder te weten bij welke rij die hoort. */
  /* .data-table heeft normaal overflow:hidden (voor de afgeronde hoeken), maar
     dat maakt de tabel zelf de "nearest scrolling ancestor" voor sticky-
     positionering in plaats van de scrollende wrapper eromheen, waardoor de
     vastgeprikte kolom niet vastzit. Op mobiel zetten we dat daarom uit.
     border-collapse:collapse rendert daarnaast geen box-shadow op tabelcellen
     (Chrome negeert dit) en kan de vastgeplakte kolom een sub-pixel laten
     "lekken" bij de linkerrand tijdens scrollen; border-collapse:separate met
     spacing 0 voorkomt beide, zonder het uiterlijk te veranderen. */
  .data-table { overflow: visible; border-collapse: separate; border-spacing: 0; }
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 4px 0 6px -2px rgba(0,0,0,0.35);
  }
  /* De achtergrond herhaalt bewust de bestaande transparante lagen van
     .data-table / .data-table th (zie hoger in dit bestand) bovenop een
     ondoorzichtige achterkleur: zo krijgt de vastgeplakte kolom precies
     dezelfde kleurtoon als de niet-vastgeplakte cellen ernaast — in plaats
     van een effen kleur die net iets lichter of donkerder uitvalt — en kan
     wegscrollende inhoud er nooit doorheen schijnen. */
  .data-table td:first-child {
    background: linear-gradient(rgba(245,240,229,0.02), rgba(245,240,229,0.02)), var(--bg-dark);
  }
  .data-table th:first-child {
    background:
      linear-gradient(rgba(10,10,11,0.5), rgba(10,10,11,0.5)),
      linear-gradient(rgba(245,240,229,0.02), rgba(245,240,229,0.02)),
      var(--bg-darker);
  }
  .data-table.cream td:first-child {
    background: linear-gradient(rgba(245,240,229,0.5), rgba(245,240,229,0.5)), var(--bg-cream);
  }
  .data-table.cream th:first-child {
    background:
      linear-gradient(rgba(26,22,20,0.03), rgba(26,22,20,0.03)),
      linear-gradient(rgba(245,240,229,0.5), rgba(245,240,229,0.5)),
      var(--bg-cream-3);
  }

  .nav-links li { border-bottom: 1px solid var(--border-cream); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 15px 20px; color: var(--text-cream); }
  .nav-links a.active { color: var(--gold); }
  .nav-links a.active::after { display: none; }
  .nav.on-cream.menu-open > nav { border-top-color: var(--border-dark); }
  .nav.on-cream .nav-links li { border-bottom-color: var(--border-dark); }
  .nav.on-cream .nav-links a { color: var(--text-dark); }
  .nav .btn { padding: 10px 16px; font-size: 13px; }
  .logo { font-size: 20px; }
  .logo-mark { width: 28px; height: 28px; font-size: 13px; }
  .topbar { padding: 10px 16px; font-size: 12px; }
  h1 { font-size: clamp(32px, 8vw, 44px); }
  h2 { font-size: clamp(28px, 6.5vw, 40px); }

  .hero { min-height: auto; padding-top: 40px; padding-bottom: 60px; }
  /* .hero-content zet de horizontale padding op 0 voor de brede uitlijning;
     op mobiel plakt de tekst daardoor tegen de schermrand. */
  .hero-content { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .hero-image, .hero-video { display: none; }
  .hero-bg { background: linear-gradient(150deg, #0A0A0B 0%, #14100C 50%, #0A0806 100%); }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .stat-item { border-left: none; padding-left: 0; }

  .controls-head { grid-template-columns: 1fr; gap: 24px; }
  .controls-grid { grid-template-columns: 1fr 1fr; }

  .chain-inner { grid-template-columns: 1fr; gap: 30px; }
  .chain-side { position: static; }
  .chain-word { font-size: 40px; }

  .feature-row-head { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: 1fr; }
  .feature-card { height: auto; min-height: 320px; }

  .eu-block { grid-template-columns: 1fr; gap: 40px; }
  .eu-list { grid-template-columns: 1fr; }
  .eu-visual { position: static; }

  .roles-grid, .pricing-grid { grid-template-columns: minmax(0, 1fr); }

  .form-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .footer-brand { grid-column: 1 / -1; }

  .score-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .score-val { text-align: left; font-size: 16px; }
}

/* De korte navigatietekst is alleen voor smalle schermen. Deze regel moet
   vóór de media query staan, anders overschrijft zij die weer. */
.nav-cta-short { display: none; }

/* Legenda op de functiepagina: eerst beschikbaar/niet-beschikbaar in het groot,
   de fijnmazige status (gemeten, in voorbereiding, ontworpen) als detail eronder. */
.legende-groepen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.legende-groep + .legende-groep { padding-left: 32px; border-left: 1px solid var(--border-cream); }
.legende-groep-titel { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-cream); margin-bottom: 14px; }
.legende-stip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legende-stip.groen { background: var(--status-green); }
.legende-stip.amber { background: var(--status-amber); }
.legende-item { display: flex; align-items: center; gap: 12px; }
.legende-item + .legende-item { margin-top: 10px; }
.legende-item .badge { flex-shrink: 0; }
.legende-item span:last-child { font-size: 13px; color: var(--text-cream-dim); }

/* Illustratiescherm op zaakanalyse.html: bronvermeldingen als niet-klikbare
   statuschips (er is geen live analysetekst achter dit scherm, zie de
   toelichting eronder in de pagina zelf). */
.zaak-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.zaak-sources-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-cream-mute); margin-right: 6px; }
.zaak-src {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; border-radius: 100px;
  font-size: 13px; cursor: default;
  border: 1px solid var(--border-cream-strong);
  background: rgba(245,240,229,0.03);
  color: var(--text-cream-dim);
}
.zaak-src span { font-size: 11px; padding: 3px 9px; border-radius: 100px; }
.zaak-src.ok span { background: var(--status-green-bg); color: var(--status-green); }
.zaak-src.warn span { background: var(--status-amber-bg); color: var(--status-amber); }
.zaak-src.bad span { background: var(--status-red-bg); color: var(--status-red); }
@media (max-width: 700px) {
  .legende-groepen { grid-template-columns: 1fr; gap: 22px; }
  .legende-groep + .legende-groep { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--border-cream); }
}

/* Functies.html: alleen kaarten die naar een eigen pagina linken mogen als
   klikbaar oogen (cursor, hover-lift, hover-gloed). Statische kaarten niet. */
.feature-card.kaart-statisch { cursor: default; }
.feature-card.kaart-statisch:hover { transform: none; border-color: var(--border-cream-strong); }
.feature-card.kaart-statisch:hover::before { opacity: 0.6; }
.feature-card.kaart-statisch:hover .feature-card-inner { transform: none; }
.feature-card .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 500; color: var(--gold-dim); }
.feature-card.kaart-koppeling:hover .card-link { color: var(--gold); }

@media (max-width: 640px) {
  .controls-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .icon-card-grid, .icon-card-grid.cols-3, .icon-card-grid.cols-6, .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3-safe { grid-template-columns: minmax(0, 1fr); }
  .qa-grid { grid-template-columns: minmax(0, 1fr); }
  /* De volledige knoptekst past niet naast het logo op een telefoon;
     daar staat de korte variant. */
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
  .nav .btn { padding: 10px 14px; font-size: 12.5px; }
}

/* ==========================================================================
   Beveiliging die u inhoudelijk kunt beoordelen (conform ontwerpvoorbeeld)
   ========================================================================== */

.security-section {
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
}
.security-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 56px;
}
.security-head h2 { max-width: 560px; }
.security-head p {
  font-size: 18px;
  line-height: 1.7;
  padding-top: 14px;
  max-width: 560px;
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.security-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 32px 28px;
  border: 1px solid rgba(201, 167, 111, 0.22);
  border-radius: 10px;
  background: rgba(245, 240, 229, 0.02);
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.security-card:hover {
  border-color: rgba(201, 167, 111, 0.55);
  background: rgba(201, 167, 111, 0.05);
  transform: translateY(-3px);
}
.sec-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--gold);
}
.sec-icon svg { width: 100%; height: 100%; display: block; }
.security-card h4, .security-card .kaartkop {
  font-size: 21px;
  margin-bottom: 8px;
  color: var(--text-cream);
}
.security-card p {
  font-size: 14px;
  color: var(--text-cream-dim);
  line-height: 1.6;
}
.security-cta {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 44px;
  align-items: center;
  padding: 36px 44px;
  border: 1px solid rgba(201, 167, 111, 0.22);
  border-radius: 10px;
  background: rgba(245, 240, 229, 0.02);
}
.security-cta h3 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}
.security-cta > p {
  font-size: 15px;
  color: var(--text-cream-dim);
  padding-left: 44px;
  border-left: 1px solid rgba(245, 240, 229, 0.14);
  max-width: 520px;
}

/* Twee acties naast elkaar in de derde kolom, zodat het raster
   auto/1fr/auto blijft en de knoppen niet naar een nieuwe rij vallen. */
.security-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .security-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .security-grid { grid-template-columns: minmax(0, 1fr); }
  .security-cta { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .security-cta > p { padding-left: 0; border-left: none; }
}

@media (max-width: 640px) {
  .security-cta-actions { flex-direction: column; align-items: stretch; }
  .security-cta-actions .btn { justify-content: center; }
}

@media (max-width: 480px) {
  /* Lange Nederlandse knoplabels ("Bekijk de beveiligingsverantwoording")
     zijn breder dan een smalle telefoon; buiten de navigatie mogen ze afbreken. */
  .btn { white-space: normal; }
  .btn.big { padding-left: 20px; padding-right: 20px; }
  .nav .btn { white-space: nowrap; }
}

@media (max-width: 360px) {
  /* Op 320 px past logo plus knop niet meer op één regel. */
  .nav { padding: 14px 14px; gap: 8px; }
  .logo { font-size: 17px; }
  .logo-mark { width: 24px; height: 24px; }
  .nav .btn { padding: 9px 12px; font-size: 12px; }
}