/* ============================================================================
   Nannings365 · huisstijlsysteem
   ----------------------------------------------------------------------------
   Persoonlijkheid komt uit Social ConXion (conxion.nannings365.nl): warme crème,
   bruine tekst, de bewegende rood/oranje/goud-gradient, pill-knoppen met shimmer.
   Architectuur komt uit 21st.dev: één semantische tokenlaag met licht én donker,
   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 is wat het
      CMS al doet met $p / $a / $g. De rest van de tokens blijft staan.
   3. Bouw de pagina met de componentklassen hieronder; schrijf geen losse kleuren.

   Alles wat hier staat is afgeleid van code die live draait, niet verzonnen.
   ========================================================================== */

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

:root {
  /* ── Merk: de enige drie waarden die per klant wisselen ────────────────
     ConXion levert de standaard. Vervang deze drie en de hele site verkleurt
     mee: gradient, knoppen, links, focusring, accenten. */
  --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 ─────────────────────────────────────────────────────
     Warm crème in plaats van wit. Dit is het meest herkenbare kenmerk van
     de huisstijl; ga hier niet naar #fff terug. */
  --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 ────────────────────────────────────────────────────────────
     Warm bruin, nooit zwart of grijs. */
  --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 ──────────────────────────────────────────────────
     1px, laag contrast. Randen structureren; ze mogen niet opvallen. */
  --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 ───────────────────────────────────────────────────────────
     Twee families: pill voor alles wat je aanklikt, zachte radius voor
     alles wat iets bevat. Niet mengen binnen één component. */
  --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: op mobiel 7vw, op desktop maximaal 90px.
     Dat is de ConXion-waarde en houdt de zijmarges op elk scherm in verhouding. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

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

  /* ── Typografie ───────────────────────────────────────────────────────
     Outfit draagt alles. Yellowtail is uitsluitend accent: eyebrows, credits,
     nooit een alinea. Mono voor cijfers, codes en labels. */
  --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, iets groter dan 16 */
  --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-brand hoort bij knoppen en
     draagt de merkkleur, zodat een CTA ook in zijn schaduw van het merk is. */
  --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 ─────────────────────────────────────────────────────────
     Eén easing voor alles wat binnenkomt of wegschuift. Deze curve komt uit
     ConXion en geeft de site zijn kalme, zware aanslag. */
  --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. TOKENS · donker
   ───────────────────────────────────────────────────────────────────────
   Een wárm donker, geen neutrale charcoal. De huisstijl blijft bruin; alleen
   de polariteit draait. Merkkleuren worden iets lichter zodat ze op een donker
   vlak hun contrast houden.
   Werkt op drie manieren: .dark-klasse, data-theme en systeemvoorkeur. */

.dark,
[data-theme="dark"] {
  --brand-1: #F2545B;
  --brand-2: #F79445;
  --brand-3: #EFBE55;
  --brand-1-rgb: 242 84 91;
  --brand-2-rgb: 247 148 69;
  --brand-3-rgb: 239 190 85;

  --background:  #17100A;
  --surface:     #211710;
  --surface-2:   #2C1F16;
  --surface-inv: #FDF6EA;
  --overlay:     rgb(23 16 10 / .9);

  --foreground:       #F6EADA;
  --foreground-muted: #D6BFA5;
  --foreground-soft:  #B29372;
  --foreground-faint: #8A6E52;
  --on-brand:         #1A1109;
  --on-inverse:       #45301F;

  --border:        rgb(246 234 218 / .12);
  --border-brand:  rgb(var(--brand-1-rgb) / .22);
  --border-strong: rgb(246 234 218 / .24);

  --shadow-sm: 0 2px  8px  rgb(0 0 0 / .30);
  --shadow:    0 6px 20px  rgb(0 0 0 / .40);
  --shadow-lg: 0 14px 34px rgb(0 0 0 / .50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --brand-1: #F2545B;
    --brand-2: #F79445;
    --brand-3: #EFBE55;
    --brand-1-rgb: 242 84 91;
    --brand-2-rgb: 247 148 69;
    --brand-3-rgb: 239 190 85;

    --background:  #17100A;
    --surface:     #211710;
    --surface-2:   #2C1F16;
    --surface-inv: #FDF6EA;
    --overlay:     rgb(23 16 10 / .9);

    --foreground:       #F6EADA;
    --foreground-muted: #D6BFA5;
    --foreground-soft:  #B29372;
    --foreground-faint: #8A6E52;
    --on-brand:         #1A1109;
    --on-inverse:       #45301F;

    --border:        rgb(246 234 218 / .12);
    --border-brand:  rgb(var(--brand-1-rgb) / .22);
    --border-strong: rgb(246 234 218 / .24);

    --shadow-sm: 0 2px  8px  rgb(0 0 0 / .30);
    --shadow:    0 6px 20px  rgb(0 0 0 / .40);
    --shadow-lg: 0 14px 34px rgb(0 0 0 / .50);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   3. 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. Decoratie die buiten de kolom steekt wordt wel
     netjes afgesneden. */
  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; }

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); }

/* ─────────────────────────────────────────────────────────────────────────
   4. LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

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

/* Sectie: de bouwsteen van elke pagina. --gutter houdt de zijmarge vloeiend. */
.ds-section { padding: var(--section-y) var(--gutter); position: relative; z-index: var(--z-base); }

/* Lichte band tussen twee gewone secties. Haarlijnen boven en onder, geen
   harde kleurvlakken; dat is wat het ritme rustig houdt. */
.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); }

/* Sectiekop: script-eyebrow boven een zware kop. Dit is het meest herkenbare
   ritme van de huisstijl; gebruik hem op elke sectie. */
.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)); }

/* ─────────────────────────────────────────────────────────────────────────
   5. TYPOGRAFIE
   ───────────────────────────────────────────────────────────────────────── */

/* Handschrift-accent. Alleen voor eyebrows, credits en losse woorden.
   Nooit voor een alinea of een knoplabel, het leest te slecht op klein. */
.ds-script {
  font-family: var(--font-script);
  color: var(--brand-2);
  line-height: var(--leading-snug);
  font-weight: var(--weight-normal);
}

/* Gradient-tekst. Zet hem op één woord of één regel, niet op een hele kop:
   de kleurloop verliest zijn werking zodra hij over meerdere regels breekt.
   De padding-bottom vangt afgesneden staarten van de g en de j op. */
.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. Voor rubrieken,
   cijfers en alles wat als data leest. */
.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); }

/* ─────────────────────────────────────────────────────────────────────────
   6. KNOPPEN
   ───────────────────────────────────────────────────────────────────────
   Drie soorten, streng gescheiden:
   .ds-btn        primaire actie: de bewegende gradient, één per scherm
   .ds-btn-line   secundaire actie: omlijnd, zoveel als nodig
   .ds-btn-ghost  tertiaire actie: alleen tekst, in dichte rijen
   Allemaal pill. Een knop met hoekige radius hoort niet bij deze huisstijl. */

.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); }

/* De shimmer: een schuine lichtveeg die periodiek over de knop trekt.
   Puur decoratief, staat los van hover, en is het detail waaraan de huisstijl
   het snelst herkend wordt. */
.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, 28px);
}
.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%; }

/* Draaiende ster in een knoplabel, een ConXion-motief. */
.ds-star { display: inline-block; animation: ds-spin 6s linear infinite; }

/* ─────────────────────────────────────────────────────────────────────────
   7. 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-2);
  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); }

/* Fototegel met 3D-tilt (ConXion-bentogrid). De tilt zelf komt van JS dat
   --tilt-x/--tilt-y zet; zonder JS blijft het een gewone tegel. */
.ds-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--dur) var(--ease);
}
.ds-tile img { width: 100%; height: 100%; object-fit: cover; }
.ds-tile--tall { grid-row: span 2; }

/* ─────────────────────────────────────────────────────────────────────────
   8. 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-2) var(--space-7, 28px);
  background: var(--overlay);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-brand);
}
.ds-nav__logo img { height: 86px; width: auto; display: block; }
.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__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-2) var(--space-5); }
  .ds-nav__logo img { height: 58px; }
  .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-section { padding-block: var(--space-14, 56px); }
}

/* Watermerk: het logo groot en bijna onzichtbaar achter de pagina. Vaste
   positie, dus het blijft staan terwijl de content eroverheen schuift. */
.ds-watermark {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ds-watermark img { width: min(75vw, 950px); opacity: .07; filter: saturate(1.1); }

/* ─────────────────────────────────────────────────────────────────────────
   9. 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); }

/* ─────────────────────────────────────────────────────────────────────────
   10. 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. Zet hier geen vaste bottom-offset. */
@media (max-width: 900px) {
  .ds-cookie__inner { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FAQ
   ───────────────────────────────────────────────────────────────────────
   Native <details>, zodat de antwoorden gewoon in de HTML staan en door
   crawlers en AI-modellen gelezen worden. Geen JS-accordeon die content
   verbergt voor de bron. */

.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); }

/* ─────────────────────────────────────────────────────────────────────────
   12. 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); }

/* ─────────────────────────────────────────────────────────────────────────
   13. 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-sway       { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-10px); } }
@keyframes ds-marquee    { to { transform: translateX(-50%); } }
@keyframes ds-word-up    { from { opacity: 0; transform: translateY(.9em) rotate(4deg); } to { opacity: 1; transform: none; } }

/* 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; }

.ds-marquee { overflow: hidden; }
.ds-marquee__track { display: flex; width: max-content; animation: ds-marquee 24s linear infinite; }

/* Respecteer de systeeminstelling. Dit is geen nicety: 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; }
}

/* ─────────────────────────────────────────────────────────────────────────
   14. AFSTEMMEN OP DE KLANT
   ───────────────────────────────────────────────────────────────────────
   Het bovenstaande is de STRUCTUUR, niet de smaak. De crème en de gradient
   komen van Social ConXion en horen niet automatisch bij elke klant.

   Stem twee dingen af voordat je begint:

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

   En zet daarna de drie merkkleuren uit de huisstijl van de klant zelf.
   Heeft de klant een oude site, dan komen die kleuren daarvandaan; zie de
   kaart "Afstemmen op de klant" voor hoe je ze eruit haalt en controleert. */

/* ── Oppervlak: waar de kleur van het papier vandaan komt ────────────────
   warm is de standaard uit :root, dus die hoeft niet herhaald te worden. */

[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);
}

/* ── Toon: hoe streng of hoe luchtig het mag ────────────────────────────
   Dit is geen smaakknop achteraf. Kies hem vóór je begint, want hij bepaalt
   of de site geloofwaardig is voor de branche. Een aannemer met shimmerende
   pill-knoppen leest als onbetrouwbaar; een dansschool met rechte hoeken en
   grijs leest als saai. Zie de kaart "Afstemmen op de klant". */

/* Zakelijk: strak, rustig, geen versiering. Bouw, installatie, techniek,
   financieel, juridisch, zorg, B2B. */
[data-toon="zakelijk"] {
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl: 10px;
  --radius-pill: 6px;              /* knoppen worden rechthoekig */

  --brand-gradient: var(--brand-1); /* egale kleur, geen kleurloop */
  --brand-gradient-text: var(--brand-1);

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

  --weight-black: 700;              /* koppen een slag lichter */
  --tracking-tighter: -.3px;
  --tracking-tight:    0px;

  --dur-slow: .45s;
  --font-script: var(--font-sans);  /* geen handschrift */
}
/* Geen shimmer, geen schuivende gradient, geen draaiende ster. */
[data-toon="zakelijk"] .ds-btn::after { display: none; }
[data-toon="zakelijk"] .ds-btn { animation: none; background-size: auto; }
[data-toon="zakelijk"] .ds-star { animation: none; }
[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; }
/* De script-eyebrow wordt een mono-label. Zelfde plek, zelfde functie,
   andere stem. */
[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. Retail, dienstverlening, praktijken, makelaars.
   Gradient alleen op de primaire knop, script alleen in de sectiekop. */
[data-toon="neutraal"] {
  --radius-pill: 999px;
  --brand-gradient-text: var(--brand-1);
}
[data-toon="neutraal"] .ds-btn::after { display: none; }
[data-toon="neutraal"] .ds-star { animation: none; }

/* Luchtig: alles aan. Dansscholen, horeca, evenementen, sport, kinderen,
   creatieve dienstverlening. Dit is de ConXion-instelling en de standaard
   van :root, dus er valt hier weinig te overschrijven. */
[data-toon="luchtig"] {
  --radius-lg: 22px;
  --radius-xl: 30px;
}

/* ── Merkkleur uit één bron ─────────────────────────────────────────────
   Heeft de klant maar één bruikbare kleur, laat 2 en 3 dan van 1 afgeleid
   zijn in plaats van er iets bij te verzinnen. Zet dit blok ná de drie
   --brand-regels van de klant. */
.ds-brand-mono {
  --brand-2: color-mix(in srgb, var(--brand-1) 78%, #FFFFFF);
  --brand-3: color-mix(in srgb, var(--brand-1) 55%, #FFFFFF);
  --brand-gradient: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-1));
}

/* ══ VYXIT: merk + vlak koel + toon zakelijk, gebakken in :root ══ */
:root{
  --brand-1:#B98900;--brand-1-rgb:185 137 0;
  --brand-2:#FFC700;--brand-2-rgb:255 199 0;
  --brand-3:#FFDD55;--brand-3-rgb:255 221 85;
  --brand-gradient:var(--brand-2);--brand-gradient-text:var(--brand-1);
  --on-brand:#171307;
  --background:#F6F8FA;--surface:#FFFFFF;--surface-2:#EEF2F6;--surface-inv:#0F172A;
  --overlay:rgb(246 248 250/.92);
  --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);
  --radius-xs:2px;--radius-sm:4px;--radius:6px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-pill:6px;
  --shadow-brand:none;--shadow-brand-hover:var(--shadow);
  --weight-black:800;--tracking-tighter:-1px;--tracking-tight:-.3px;
  --dur-slow:.45s;--font-script:var(--font-mono);
}
a{color:#8F6800}a:hover{color:#B98900}
.ds-btn::after{display:none}
.ds-btn{animation:none;background-size:auto;font-weight:700}
.ds-star{animation:none}
.ds-btn:hover{transform:none;box-shadow:var(--shadow)}
.ds-btn-line:hover{transform:none}
.ds-card--hover:hover{transform:none}
.ds-script,.ds-section-head .ds-script{font-family:var(--font-mono);font-size:var(--text-xs)!important;font-weight:700;letter-spacing:var(--tracking-widest);text-transform:uppercase;display:inline-block;margin-bottom:var(--space-2);color:#8F6800}
.ds-footer__credit{font-family:var(--font-sans);font-size:var(--text-sm)}
.ds-reveal{transform:translateY(16px)}
.ds-label{color:#8F6800}

/* ══ VYXIT-specifiek: mega-menu, hero-mockup, .ds-split (zie CLAUDE.md) ══ */
.ds-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-12);align-items:start}
.vx-mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);display:none}
.vx-mega.is-open{display:block}
.vx-mega__inner{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:32px 24px 36px}
.vx-mega__col-title{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:#8F6800;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:6px}
.vx-mega__item{display:flex;gap:12px;padding:12px 10px;border-radius:6px;text-decoration:none;align-items:flex-start}
.vx-mega__item:hover{background:var(--surface-2)}
.vx-mega__icon{display:inline-flex;width:34px;height:34px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:4px;color:#8F6800;background:rgb(255 199 0/.08)}
.vx-mega__label{display:block;font-size:14px;font-weight:700;color:var(--foreground)}
.vx-mega__desc{display:block;font-size:13px;color:var(--foreground-soft);margin-top:2px;line-height:1.4}
@media (max-width:980px){ .vx-mega{position:static;box-shadow:none} .vx-mega__inner{grid-template-columns:1fr;padding:8px 0} }