/* ============================================================
   Demo-omgeving — componentlaag
   Overgezet van een donker glas-thema naar een licht, neutraal
   thema. Structuur, klassenamen en gedrag zijn gelijk gebleven;
   alleen het uiterlijk is vervangen. Verwijst uitsluitend naar
   de tokens uit ds/styles.css.
   ============================================================ */

/* --- Layout --- */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 860px; }

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

/* --- Eyebrow --- */
.eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-accent);
}

/* --- Knoppen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 46px; padding: 12px 24px;
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 700;
  letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  text-decoration: none; border: 1.5px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: var(--text-sm); gap: 6px; }

.btn--primary {
  background: var(--accent); color: var(--text-inverse);
  border-color: var(--accent);
}
.btn--primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  color: var(--text-inverse); text-decoration: none;
}
.btn--secondary {
  background: var(--surface-card); color: var(--text-strong);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-sunken); border-color: var(--text-muted); color: var(--text-strong); text-decoration: none; }
.btn--link {
  background: transparent; color: var(--accent); border-color: transparent;
  padding: 4px 0; min-height: auto; text-underline-offset: 0.2em;
}
.btn--link:hover { color: var(--accent-hover); text-decoration: underline; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- Header --- */
/* Geen backdrop-filter: glaseffect staat op de anti-style-lijst en de
   design-linter meldt het als blokkerend. De grond was toch al 88% dekkend,
   dus een vaste kleur ziet er hetzelfde uit zonder het effect. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark {
  display: inline-grid; place-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--text-inverse);
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
}
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -0.01em; color: var(--text-strong); white-space: nowrap;
}
/* Demo-markering: deze site is nadrukkelijk geen echt bedrijf. */
.brand__demo {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--radius-xs);
  background: var(--ink-900); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a.navlink {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--text-body); text-decoration: none;
  padding-bottom: 3.5px; border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.site-nav a.navlink:hover { color: var(--text-strong); }
.site-nav a.navlink[aria-current="page"] { color: var(--text-strong); font-weight: 700; border-bottom-color: var(--accent); }
.nav-toggle { display: none; }

/* --- Sectiekop --- */
.s-head .eyebrow { color: var(--text-accent); }
.s-head h2 {
  margin: 16px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.025em;
  color: var(--text-strong);
}
.s-head p.intro {
  margin: 16px 0 0; max-width: 56ch; font-size: var(--text-md);
  line-height: 1.6; color: var(--text-body);
}
/* Elk element in .s-head gebruikt `margin: X 0 0`, dus de kop eindigt exact op
   zijn laatste regel tekst. Wat erna komt — een kaartraster, een tabel — stond
   daardoor op 0px van de introtekst. Gemeten op de planningdemo: 0px, twee keer
   op één pagina. Britt heeft dit vijf keer aangewezen; daarom een regel op de
   relatie en niet op de losse gevallen. */
.s-head + * { margin-top: var(--space-8); }  /* let op: --space-7 bestaat niet in deze schaal (6 → 8); een onbekende custom property maakt de hele declaratie stil ongeldig */

.s-head--center { text-align: center; max-width: 640px; margin: 0 auto; }
.s-head--center p.intro { margin-left: auto; margin-right: auto; }

/* --- Kaart --- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--pad-card); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

/* --- Beeldvlak (placeholder-illustratie, geen foto's) --- */
.figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
}
.figure--4x3 { aspect-ratio: 4 / 3; }
.figure--4x5 { aspect-ratio: 4 / 5; }
.figure--1x1 { aspect-ratio: 1 / 1; }
.figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.figure__label {
  position: absolute; bottom: 12px; left: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.figure__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Hero --- */
.hero { background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); }
.hero .container {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
  align-items: center; padding: 96px 32px 64px;
}
.hero h1 {
  margin: 16px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--text-strong);
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead { margin: 24px 0 0; max-width: 48ch; font-size: var(--text-md); line-height: 1.6; color: var(--text-body); }
.hero .actions { display: flex; gap: 12px; margin-top: 32px; }

/* --- Uitlegstrip onder de hero --- */
/* De opmaak stond op `.trust .container`, maar deze demo bouwt `.trust` als een <p> die ZELF
   al in een container zit — er is dus geen kind om te raken. Gevolg: het vlak kreeg wel een
   achtergrond en een rand en géén binnenmarge, dus de tekst plakte tegen de rand. Geen meter
   zag dat: nul is een geldige maat en er was geen overloop. Gemeten 12-09. */
.trust {
  background: var(--surface-card); border-bottom: 1px solid var(--border-hairline);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 32px 32px;
  margin-top: 32px;
}
.trust__item { display: flex; gap: 12px; align-items: flex-start; }
.trust__item svg { color: var(--accent); margin-top: 2px; flex: none; }
/* 13,5px met regelafstand 1,45 in een strook van 24px stond te krap tussen twee
   ruime cremevlakken (Britt, 15-09: "weer die spacing"). Nu 15px/1,55 met 32px lucht
   boven en onder. */
.trust__item span { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--text-body); }

/* --- Secties --- */
.section { padding: 96px 0; }
.section--tight { padding: 48px 0; }


/* Statuslabel — de drie standen van de voorraadtool */
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Omgekeerde band (uitleg over de automatisering) --- */
.invert { background: var(--surface-contrast); color: var(--text-inverse); }
.invert .container { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; padding: 96px 32px; }
.invert h2 { color: #FFFFFF; }
.invert .eyebrow { color: var(--accent-300); }
.invert p.body { margin: 16px 0 0; font-size: var(--text-md); line-height: 1.7; color: var(--stone-300); max-width: 54ch; }
.invert .actions { margin-top: 24px; }
.invert .btn--secondary { background: transparent; color: #FFFFFF; border-color: var(--border-inverse); }
.invert .btn--secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.42); color: #FFFFFF; }

/* Stroomdiagram in de omgekeerde band */
.flow { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.flow li {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-inverse);
  font-family: var(--font-sans); font-size: 14.5px; color: var(--stone-200);
}
.flow li b { color: #FFFFFF; font-weight: 700; }
.flow__num {
  display: inline-grid; place-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF;
  font-size: 12px; font-weight: 700;
}

/* --- Afsluitende oproep --- */
/* Zelfde fout als bij `.trust`: de opmaak stond op `.cta .container` terwijl `.cta` hier zelf
   ín een container staat. Daardoor verdween niet alleen de binnenmarge maar ook het centreren,
   en liep de tekst links tegen de rand aan.
   De 80px uit de dode regel hoorde bij een volle band over de hele breedte, zoals `.cta` in de
   planning-demo nog is. Hier is het een kaart binnen een smalle kolom, en dan is bandmaat te
   groot: 48/32, allebei stappen uit de BB-schaal. */
.cta {
  background: var(--surface-card); border-top: 1px solid var(--border-hairline);
  text-align: center; padding: 48px 32px;
}
.cta .actions { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

/* --- Footer --- */
.site-footer { background: var(--surface-page); border-top: 1px solid var(--border-hairline); color: var(--text-body); padding: 48px 0 32px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--border-hairline); }
.foot-tag { margin-top: 16px; max-width: 36ch; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.foot-head { font-family: var(--font-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; }
.foot-link { display: block; font-family: var(--font-sans); font-size: 14px; color: var(--text-body); text-decoration: none; padding: 4px 0; margin-bottom: 4px; }
.foot-link:hover { color: var(--text-strong); text-decoration: underline; }
/* In de onderste balk loopt de link mee in een tekstregel, niet in een kolom:
   dus geen eigen blok en dezelfde maat als de tekst ernaast. */
.foot-link--inline { display: inline; font-size: inherit; color: inherit; padding: 0; margin: 0; text-decoration: underline; }
.foot-link--inline:hover { color: var(--text-strong); }
.foot-line { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; color: var(--text-body); margin: 0 0 8px; }
.site-footer__bar { display: flex; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 12.5px; color: var(--text-muted); }

/* --- Verschijnen bij scrollen — inhoud is NOOIT permanent verborgen.
   Standaard = zichtbaar. De verborgen staat geldt alleen als JS draait
   (html.js), dus zonder JS of bij een fout zie je alles gewoon. --- */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }

/* --- Responsief --- */
@media (max-width: 1000px) {
}
@media (max-width: 820px) {
  .container { padding: 0 24px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: var(--surface-card); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text-strong); cursor: pointer;
  }
  .site-nav {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-hairline); padding: 8px 24px 18px;
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a.navlink { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
  .site-nav a.navlink[aria-current="page"] { border-bottom-color: var(--border-soft); }
  .site-nav .btn { margin-top: 12px; }

  .hero .container { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 48px; }
  .hero .figure { order: -1; }
  .trust { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .section { padding: 48px 0; }
  .invert .container { grid-template-columns: 1fr; gap: 32px; padding: 64px 20px; }
  .cta .actions, .hero .actions { flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bar { flex-direction: column; gap: 8px; }
}

/* Onder 390 breed past de kopregel niet naast een volle menuknop (27-09, WCAG 1.4.10).
   Gemeten op de hub: op 320 schoof de pagina 37 px (planning) en 52 px (content) zijwaarts
   en stond de menuknop buiten beeld; op 360 nog 13 px bij content, en de knop kromp tot
   34 px. Nu mag de naam op twee regels en houdt de knop zijn 44 px. Vanaf 390 verandert er
   niets. */
@media (max-width: 389px) {
  .brand__name { white-space: normal; }
  .nav-toggle { flex: none; }
}