/* ============================================================================
   Nannings365 · huisstijlsysteem
   ----------------------------------------------------------------------------
   Eén semantische tokenlaag, een echte schaal voor radius/ruimte/type, subtiele
   1px-randen, whitespace boven decoratie.

   GEBRUIK IN EEN NIEUWE KLANTSITE
   1. Neem dit bestand over als assets/ds.css
   2. Overschrijf ALLEEN --brand-1/2/3 met de kleuren van de klant. Dat doet
      index.php al met de waarden uit content.json. De rest blijft staan.
   3. Bouw de pagina met de componentklassen hieronder; schrijf geen losse kleuren.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS · licht (standaard)
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Merk: de enige drie waarden die per klant wisselen ──────────────── */
  --brand-1: #CE2027;   /* primair   · draagt links, nadruk, gevaar   */
  --brand-2: #E87511;   /* accent    · draagt hover, focusring, CTA's */
  --brand-3: #E3A013;   /* tertiair  · draagt de gradient-uitloop     */

  --brand-gradient: linear-gradient(90deg,
    var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-2), var(--brand-1));
  --brand-gradient-text: linear-gradient(90deg,
    var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);

  /* Merk als RGB-triplet, zodat je transparantie kunt opbouwen zonder een
     tweede kleurtoken aan te maken: rgb(var(--brand-1-rgb) / .12) */
  --brand-1-rgb: 206 32 39;
  --brand-2-rgb: 232 117 17;
  --brand-3-rgb: 227 160 19;

  /* ── Oppervlakken ───────────────────────────────────────────────────── */
  --background:  #FDF6EA;
  --surface:     #FFFDF7;   /* kaarten, lichte secties  */
  --surface-2:   #F7EEDF;   /* ingesprongen vlakken     */
  --surface-inv: #45301F;   /* donkere blokken op licht */
  --overlay:     rgb(253 246 234 / .9);  /* sticky nav met blur */

  /* ── Tekst ──────────────────────────────────────────────────────────── */
  --foreground:       #45301F;
  --foreground-muted: #6B4E35;
  --foreground-soft:  #8A6A4C;
  --foreground-faint: #B98A55;
  --on-brand:         #FFF7EA;  /* tekst óp merkkleur of donker vlak */
  --on-inverse:       #FFF7EA;

  /* ── Randen en focus ────────────────────────────────────────────────── */
  --border:        rgb(69 48 31 / .14);
  --border-brand:  rgb(var(--brand-1-rgb) / .12);
  --border-strong: rgb(69 48 31 / .28);
  --ring:          var(--brand-2);
  --ring-width:    2px;

  /* ── Semantisch ─────────────────────────────────────────────────────── */
  --success: #16A34A;
  --warning: var(--brand-3);
  --danger:  var(--brand-1);
  --info:    var(--brand-2);

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:     12px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-pill: 999px;

  /* ── Ruimte · 4px-basis, --gutter is vloeiend ───────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --gutter:    min(7vw, 90px);
  --section-y: var(--space-20);
  --container: 1200px;

  /* ── Typografie ─────────────────────────────────────────────────────── */
  --font-sans:   'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Yellowtail', cursive;
  --font-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;   /* standaard bodytekst */
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  clamp(28px, 3.2vw, 40px);
  --text-4xl:  clamp(34px, 4vw,   50px);   /* sectiekop */
  --text-5xl:  clamp(40px, 6vw,   76px);   /* hero      */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading:       1.5;
  --leading-loose: 1.65;

  --tracking-tight:  -.5px;
  --tracking-tighter:-1px;
  --tracking-wide:   .08em;
  --tracking-widest: .14em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Schaduw · warm getint, nooit neutraal zwart ────────────────────── */
  --shadow-sm:    0 2px  8px  rgb(80 30 0 / .06);
  --shadow:       0 6px 20px  rgb(80 30 0 / .10);
  --shadow-lg:    0 14px 34px rgb(80 30 0 / .16);
  --shadow-brand: 0 8px 22px  rgb(var(--brand-1-rgb) / .32);
  --shadow-brand-hover: 0 14px 30px rgb(var(--brand-1-rgb) / .40);

  /* ── Beweging ───────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --dur-fast:  .2s;
  --dur:       .45s;
  --dur-slow:  .7s;

  --z-base: 1;
  --z-nav: 50;
  --z-cookie: 200;
  --z-toast: 300;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BASIS
   ───────────────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  /* clip en niet hidden: hidden maakt van body een scroll-container en breekt
     daarmee de sticky nav. */
  overflow-x: clip;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

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

/* Het hidden-attribuut moet het altijd winnen. De browser-default is
   `[hidden] { display: none }` met de laagste specificiteit, en die verliest
   van elke inline `style="display:..."` — dan blijft een blok dat je met JS
   verbergt gewoon staan. Met !important klopt `el.hidden = true` altijd. */
[hidden] { display: none !important; }

a {
  color: var(--brand-1);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover { color: var(--brand-2); }

h1, h2, h3, h4 { margin: 0; letter-spacing: var(--tracking-tight); }

input, textarea, select, button { font-family: inherit; }

:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: 2px;
}

::selection { background: var(--brand-2); color: var(--on-brand); }

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

/* Overslaan-link: hoort op elke pagina, direct na <body>. */
.ds-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--surface-inv); color: var(--on-inverse);
  padding: var(--space-3) var(--space-5); font-weight: var(--weight-bold);
  border-radius: 0 0 var(--radius) 0;
}
.ds-skip:focus { left: 0; color: var(--on-inverse); }

/* ─────────────────────────────────────────────────────────────────────────
   3. LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

.ds-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.ds-section { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }

.ds-section--light {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-top: 1px solid var(--border-brand);
  border-bottom: 1px solid var(--border-brand);
}

.ds-section--tight { padding-block: var(--space-12); }

.ds-section-head { text-align: center; margin-bottom: var(--space-8); }
.ds-section-head .ds-script { font-size: var(--text-2xl); }
.ds-section-head h2 {
  margin: var(--space-1) 0 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.ds-section-head p {
  margin: var(--space-4) auto 0; max-width: 62ch;
  color: var(--foreground-muted);
}

.ds-grid { display: grid; gap: var(--space-6); }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Tweekolomsblok dat op mobiel netjes onder elkaar valt. */
.ds-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-12);
  align-items: start;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. TYPOGRAFIE
   ───────────────────────────────────────────────────────────────────────── */

/* Handschrift-accent. Alleen voor eyebrows, credits en losse woorden. */
.ds-script {
  font-family: var(--font-script);
  color: var(--brand-2);
  line-height: var(--leading-snug);
  font-weight: var(--weight-normal);
}

.ds-grad-text {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .08em;
}

/* Mono-label: kleine hoofdletters met ruime letterafstand. */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-2);
}

.ds-display { font-size: var(--text-5xl); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); text-wrap: balance; }
.ds-h1 { font-size: var(--text-4xl); font-weight: var(--weight-black); line-height: var(--leading-tight); }
.ds-h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.ds-h3 { font-size: var(--text-xl);  font-weight: var(--weight-bold);  line-height: var(--leading-snug); }
.ds-lead  { font-size: var(--text-lg); color: var(--foreground-muted); line-height: var(--leading-loose); }
.ds-muted { color: var(--foreground-muted); }
.ds-small { font-size: var(--text-sm); color: var(--foreground-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   5. KNOPPEN
   ───────────────────────────────────────────────────────────────────────
   .ds-btn        primaire actie: de bewegende gradient, één per scherm
   .ds-btn-line   secundaire actie: omlijnd
   .ds-btn-ghost  tertiaire actie: alleen tekst */

.ds-btn,
.ds-btn-line,
.ds-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.ds-btn {
  position: relative; overflow: hidden; border: none;
  padding: var(--space-4) var(--space-8);
  background: var(--brand-gradient);
  background-size: 300% 100%;
  animation: ds-grad-shift 7s linear infinite;
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
.ds-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-brand-hover); color: var(--on-brand); }
.ds-btn:active { transform: translateY(-1px); }
.ds-btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* De shimmer: een schuine lichtveeg die periodiek over de knop trekt. */
.ds-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .4) 50%, transparent 68%);
  transform: translateX(-130%) skewX(-18deg);
  animation: ds-shimmer 3.2s ease-in-out infinite;
}
.ds-btn > * { position: relative; z-index: 1; }

.ds-btn-line {
  border: 2px solid var(--brand-1);
  color: var(--brand-1);
  background: transparent;
  padding: calc(var(--space-3) + 1px) var(--space-7);
}
.ds-btn-line:hover {
  background: rgb(var(--brand-1-rgb) / .07);
  transform: translateY(-3px);
  color: var(--brand-1);
}

.ds-btn-ghost {
  border: none; background: none; color: var(--foreground-muted);
  padding: var(--space-3) var(--space-4);
}
.ds-btn-ghost:hover { color: var(--brand-1); background: rgb(var(--brand-1-rgb) / .06); }

/* Maten */
.ds-btn--sm { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); box-shadow: 0 4px 14px rgb(var(--brand-1-rgb) / .28); }
.ds-btn--sm:hover { transform: translateY(-2px); }
.ds-btn-line--sm { padding: 11px var(--space-6); font-size: var(--text-sm); }
.ds-btn--lg { padding: var(--space-5) var(--space-10); font-size: var(--text-lg); }
.ds-btn--block { display: flex; width: 100%; }

/* Omgekeerde omlijnde knop, voor op een donker hero-vlak. */
.ds-btn-line--inv { border-color: rgb(255 255 255 / .4); color: var(--on-inverse); }
.ds-btn-line--inv:hover { background: rgb(255 255 255 / .1); border-color: var(--on-inverse); color: var(--on-inverse); }

/* ─────────────────────────────────────────────────────────────────────────
   6. KAARTEN
   ───────────────────────────────────────────────────────────────────────── */

.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) ease;
}
.ds-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--border-brand);
}
.ds-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius);
  background: rgb(var(--brand-2-rgb) / .14);
  color: var(--brand-1);
  margin-bottom: var(--space-4);
}
.ds-card h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.ds-card p  { margin: 0; color: var(--foreground-muted); }

/* Prijskaart. De uitgelichte variant draagt de gradient als rand, niet als
   vulling, anders vecht hij met de primaire knop erin. */
.ds-price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.ds-price--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  box-shadow: var(--shadow);
}
.ds-price__amount { font-size: var(--text-3xl); font-weight: var(--weight-black); line-height: 1; }
.ds-price__period { font-size: var(--text-sm); color: var(--foreground-soft); }
.ds-price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); text-align: left; }
.ds-price li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--foreground-muted); font-size: var(--text-sm); }
.ds-price li svg { flex-shrink: 0; margin-top: 3px; color: var(--brand-1); }

/* ─────────────────────────────────────────────────────────────────────────
   7. NAVIGATIE
   ───────────────────────────────────────────────────────────────────────── */

.ds-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-3) var(--space-7);
  background: var(--overlay);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-brand);
}
.ds-nav__logo { display: flex; flex-direction: column; line-height: 1.15; color: var(--foreground); }
.ds-nav__logo:hover { color: var(--foreground); }
.ds-nav__logo strong { font-weight: var(--weight-black); font-size: 19px; letter-spacing: var(--tracking-tight); }
.ds-nav__links { display: flex; align-items: center; gap: 26px; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.ds-nav__links a { color: var(--foreground); }
.ds-nav__links a:hover { color: var(--brand-1); }
.ds-nav__links a.ds-btn-line { color: var(--brand-1); }
.ds-nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--brand-1); padding: var(--space-2); }

@media (max-width: 900px) {
  .ds-nav { padding: var(--space-3) var(--space-5); }
  .ds-nav__toggle { display: inline-flex; }
  .ds-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--overlay); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-brand);
    padding: var(--space-2) var(--space-5) var(--space-5);
    display: none;
  }
  .ds-nav__links.is-open { display: flex; }
  .ds-nav__links a { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-brand); }
  .ds-nav__links a.ds-btn-line { margin-top: var(--space-3); border-bottom: 2px solid var(--brand-1); }
  .ds-section { padding-block: var(--space-14); }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. FORMULIEREN
   ───────────────────────────────────────────────────────────────────────── */

.ds-field { display: grid; gap: var(--space-2); }
.ds-field label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--foreground); }

.ds-input, .ds-textarea, .ds-select {
  width: 100%;
  /* 16px is bewust geen token: onder die maat zoomt iOS in op focus en duwt
     het formulier buiten beeld. Niet verlagen. */
  font-size: 16px;
  padding: 13px var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--foreground);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.ds-input:focus, .ds-textarea:focus, .ds-select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgb(var(--brand-2-rgb) / .18);
}
.ds-textarea { resize: vertical; min-height: 120px; }
.ds-field__hint  { font-size: var(--text-xs); color: var(--foreground-soft); }
.ds-field__error { font-size: var(--text-xs); color: var(--danger); font-weight: var(--weight-semibold); }
.ds-input[aria-invalid="true"] { border-color: var(--danger); }

/* ─────────────────────────────────────────────────────────────────────────
   9. FEEDBACK · toast en cookiemelding
   ───────────────────────────────────────────────────────────────────────── */

.ds-toasts {
  position: fixed; top: 96px; right: var(--space-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ds-toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--info);
  padding: 13px var(--space-5);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  max-width: 340px;
  transform: translateX(130%);
  transition: transform var(--dur) var(--ease);
}
.ds-toast.is-in { transform: none; }
.ds-toast--ok   { border-left-color: var(--success); }
.ds-toast--err  { border-left-color: var(--danger); }
.ds-toast--info { border-left-color: var(--info); }

.ds-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie);
  background: var(--surface-inv); color: var(--on-inverse);
  box-shadow: 0 -8px 30px rgb(60 20 0 / .3);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.ds-cookie.is-open { transform: none; }
.ds-cookie__inner {
  max-width: 1100px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-6); flex-wrap: wrap;
}
.ds-cookie__icon {
  display: flex; width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: var(--radius); background: rgb(var(--brand-2-rgb) / .2); color: var(--brand-3);
}
.ds-cookie__text { flex: 1; min-width: 240px; font-size: var(--text-sm); line-height: var(--leading); }
.ds-cookie__text strong { display: block; font-size: var(--text-base); margin-bottom: 2px; }
.ds-cookie__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Op mobiel een volledige bottom-sheet met safe-area-marge, anders vallen de
   knoppen achter de Safari-werkbalk. */
@media (max-width: 900px) {
  .ds-cookie__inner { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   10. FAQ
   ───────────────────────────────────────────────────────────────────────
   Native <details>, zodat de antwoorden gewoon in de HTML staan en door
   crawlers en AI-modellen gelezen worden. */

.ds-faq { display: grid; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.ds-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.ds-faq summary {
  cursor: pointer; font-weight: var(--weight-bold); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after {
  content: "+"; font-size: var(--text-xl); color: var(--brand-2); line-height: 1;
  transition: transform var(--dur-fast) ease;
}
.ds-faq details[open] summary::after { transform: rotate(45deg); }
.ds-faq p { margin: var(--space-3) 0 0; color: var(--foreground-muted); line-height: var(--leading-loose); }

/* ─────────────────────────────────────────────────────────────────────────
   11. FOOTER
   ───────────────────────────────────────────────────────────────────────── */

.ds-footer {
  position: relative; z-index: var(--z-base);
  padding: 26px var(--gutter);
  border-top: 1px solid var(--border-brand);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); flex-wrap: wrap;
  color: var(--foreground-soft); font-size: var(--text-sm);
}
.ds-footer__credit { font-family: var(--font-script); font-size: var(--text-md); color: var(--foreground-faint); }
.ds-footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.ds-socials { display: flex; gap: var(--space-3); align-items: center; }
.ds-socials a {
  display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1.5px solid rgb(var(--brand-1-rgb) / .3);
  border-radius: 50%; color: var(--brand-1);
}
.ds-socials a:hover { background: rgb(var(--brand-1-rgb) / .07); border-color: var(--brand-1); }

/* ─────────────────────────────────────────────────────────────────────────
   12. BEWEGING
   ───────────────────────────────────────────────────────────────────────── */

@keyframes ds-grad-shift { to { background-position: -300% 0; } }
@keyframes ds-shimmer    { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(130%) skewX(-18deg); } }
@keyframes ds-spin       { to { transform: rotate(360deg); } }
@keyframes ds-rise       { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: none; } }
@keyframes ds-word-up    { from { opacity: 0; transform: translateY(.9em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes ds-float-y    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Scroll-reveal. Zet .is-in via een IntersectionObserver. */
.ds-reveal {
  opacity: 0; transform: translateY(38px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.ds-reveal.is-in { opacity: 1; transform: none; }

/* Woord-voor-woord opkomende hero-titel: geef elk <span> een oplopende delay. */
.ds-word { display: inline-block; animation: ds-word-up .7s var(--ease) both; }

/* Respecteer de systeeminstelling. Bewegende gradients en shimmer kunnen
   klachten geven bij vestibulaire gevoeligheid. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ds-reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   13. AFSTEMMEN OP DE KLANT
   ───────────────────────────────────────────────────────────────────────
   Zet op <body> een vlak- en een toonvariant, en overschrijf daarna de drie
   merkkleuren met die van de klant:

     <body data-vlak="warm"     data-toon="luchtig">   dansschool, horeca, events
     <body data-vlak="neutraal" data-toon="neutraal">  retail, dienstverlening, praktijken
     <body data-vlak="koel"     data-toon="zakelijk">  bouw, techniek, financieel
   ───────────────────────────────────────────────────────────────────────── */

[data-vlak="neutraal"] {
  --background:  #FAFAF9;
  --surface:     #FFFFFF;
  --surface-2:   #F5F5F4;
  --surface-inv: #1C1917;
  --overlay:     rgb(250 250 249 / .9);

  --foreground:       #1C1917;
  --foreground-muted: #44403C;
  --foreground-soft:  #78716C;
  --foreground-faint: #A8A29E;
  --on-inverse:       #FAFAF9;

  --border:        rgb(28 25 23 / .12);
  --border-strong: rgb(28 25 23 / .24);

  --shadow-sm: 0 2px  8px  rgb(0 0 0 / .05);
  --shadow:    0 6px 20px  rgb(0 0 0 / .08);
  --shadow-lg: 0 14px 34px rgb(0 0 0 / .12);
}

[data-vlak="koel"] {
  --background:  #F6F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #EEF2F6;
  --surface-inv: #0F172A;
  --overlay:     rgb(246 248 250 / .9);

  --foreground:       #0F172A;
  --foreground-muted: #334155;
  --foreground-soft:  #64748B;
  --foreground-faint: #94A3B8;
  --on-inverse:       #F1F5F9;

  --border:        rgb(15 23 42 / .12);
  --border-strong: rgb(15 23 42 / .22);

  --shadow-sm: 0 2px  8px  rgb(15 23 42 / .06);
  --shadow:    0 6px 20px  rgb(15 23 42 / .09);
  --shadow-lg: 0 14px 34px rgb(15 23 42 / .14);
}

/* Zakelijk: strak, rustig, geen versiering. */
[data-toon="zakelijk"] {
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl: 10px;
  --radius-pill: 6px;

  --brand-gradient: var(--brand-1);
  --brand-gradient-text: var(--brand-1);

  --shadow-brand: none;
  --shadow-brand-hover: var(--shadow);

  --weight-black: 700;
  --tracking-tighter: -.3px;
  --tracking-tight:    0px;

  --dur-slow: .45s;
  --font-script: var(--font-sans);
}
[data-toon="zakelijk"] .ds-btn::after { display: none; }
[data-toon="zakelijk"] .ds-btn { animation: none; background-size: auto; }
[data-toon="zakelijk"] .ds-btn:hover { transform: none; box-shadow: var(--shadow); }
[data-toon="zakelijk"] .ds-btn-line:hover { transform: none; }
[data-toon="zakelijk"] .ds-card--hover:hover { transform: none; }
[data-toon="zakelijk"] .ds-script,
[data-toon="zakelijk"] .ds-section-head .ds-script {
  font-family: var(--font-mono);
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--space-2);
}
[data-toon="zakelijk"] .ds-footer__credit { font-family: var(--font-sans); font-size: var(--text-sm); }
[data-toon="zakelijk"] .ds-reveal { transform: translateY(16px); }

/* Neutraal: de middenweg. Gradient alleen op de primaire knop, script alleen
   in de sectiekop. Dit is de instelling van deze site. */
[data-toon="neutraal"] {
  --radius-pill: 999px;
  --brand-gradient-text: var(--brand-1);
}
[data-toon="neutraal"] .ds-btn::after { display: none; }

/* Luchtig: alles aan. */
[data-toon="luchtig"] {
  --radius-lg: 22px;
  --radius-xl: 30px;
}