/* ============================================================
   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: 64px;
  align-items: center; padding: 64px 32px 68px;
}
.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: 16px; margin-top: 32px; }

/* --- Uitlegstrip onder de hero --- */
.trust { background: var(--surface-card); border-bottom: 1px solid var(--border-hairline); }
.trust .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 32px 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: 64px 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 --- */
.cta { background: var(--surface-card); border-top: 1px solid var(--border-hairline); }
.cta .container { text-align: center; padding: 96px 32px; }
.cta .actions { display: flex; gap: 16px; 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: 64px 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 20px 48px; }
  .hero .figure { order: -1; }
  .trust .container { grid-template-columns: 1fr; gap: 16px; }
  .section { padding: 64px 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; }
}