/* ============================================================
   Layout shell, nav, spine, footer
   ============================================================ */

/* ---------------- Top navigation ---------------- */
.nav {
  position: fixed;
  top: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  /* centred with auto-margins, NOT translateX: a transform here would become the
     containing block for the position:fixed mobile menu and shrink it to the pill */
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: var(--z-nav);
  width: min(1180px, calc(100% - 2 * clamp(0.8rem, 0.4rem + 1.5vw, 1.5rem)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1.15rem;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid transparent;
  /* backdrop-filter bewust NIET in de transitie: een blur-tween is duur (elk frame
     her-blurren) en zou ook nog eens precies tijdens het openen van het mobiele
     menu lopen (.nav.is-open zet de blur uit). De blur springt gewoon aan/uit. */
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
.nav.is-scrolled {
  background: var(--glass-fill-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--shadow-soft);
}

.nav__brand,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 14px var(--accent-glow));
}
/* theme-aware logo marks: dark-fill mark on light, white-fill mark on dark */
.brand-mark__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.brand-mark__img--dark { display: none; }
[data-theme="dark"] .brand-mark__img--light { display: none; }
[data-theme="dark"] .brand-mark__img--dark { display: block; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.025em;
  color: #14171e;
  white-space: nowrap;
}
[data-theme="dark"] .brand-word {
  color: #ffffff;
}
/* the hyphen rendered as the same gradient bar as the logo mark, sat on the
   optical middle of the capital letters (not the x-height line) */
.brand-dash {
  display: inline-block;
  width: 0.48em;
  height: 0.17em;
  /* slightly more space on the left so the dash sits optically centred between
     the "i" and the flush left stem of the "R" */
  margin: 0 0.07em 0 0.13em;
  border-radius: 1em;
  vertical-align: 0.28em;
  background: linear-gradient(90deg, #0e9ed2, #1e81e0);
}
[data-theme="dark"] .brand-dash {
  background: linear-gradient(90deg, #c0f7fe, #73b7ff);
}
.brand--lg .brand-mark {
  width: 46px;
  height: 46px;
}
.brand--lg .brand-word {
  font-size: 1.62rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 0.1rem + 1.3vw, 1.7rem);
  /* Menu naar rechts, met lucht voor de knoppen. De auto-marge links duwt het menu
     uit de space-between-verdeling, zodat alle overgebleven ruimte als één gat
     tussen logo en menu komt te staan in plaats van verdeeld over drie zones.
     De marge rechts houdt "Contact" los van de themaschakelaar, anders plakt de
     laatste link tegen de knoppen aan.
     Op mobiel is .nav__links een fixed full-screen overlay met margin: 0, dus daar
     speelt dit niet. */
  margin-left: auto;
  margin-right: clamp(1.2rem, 3vw, 2.6rem);
}
.nav__links a {
  font-size: 0.92rem;
  /* nooit afbreken: vlak boven het omslagpunt is de balk krap en brak "Ai-training"
     over twee regels, waardoor de nav in de hoogte sprong. De gap hierboven
     krimpt mee, dus de links passen naast elkaar tot het mobiele menu overneemt. */
  white-space: nowrap;
  font-weight: 550;
  color: var(--ink-soft);
  padding: 0.4em 0.2em;
  position: relative;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

/* Het merkteken bij Ai-training: dat is het hoofdaanbod, de andere twee pijlers
   hangen eraan. Het hangt onder de link in plaats van ernaast, en dat is geen
   smaakkwestie: naast de link kostte het 55px en schoof het omslagpunt van de
   menubalk van 1055 naar 1115px. Absoluut gepositioneerd kost het nul breedte,
   dus de balk blijft tot 1060px uitgeklapt en het teken hoeft nergens te wijken.
   Er is 11px ruimte onder het linkvak binnen de pil; dit zit daar met 9px over.
   Op 30 sep 2026 2px hoger gezet (was 100% - 4px): het hing te los onder het
   woord. Verder omhoog kan niet, dan raakt de streep van de huidige pagina het
   (die ligt strak onder de tekst, zie hieronder): nu blijft er ~2px lucht tussen.
   Het woord is geverfd met --grad-text, hetzelfde verloop waarmee de site elders
   nadruk legt (.it en .grad in base.css). Geen mono: op deze grootte loopt een
   monospace rond gewicht 700 vast, waardoor 800 en 900 niets meer doen.
   Het zit binnen de <a>, dus een schermlezer leest "Ai-training Flagship". */
.nav__flag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% - 6px);
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
/* De link zelf blijft gedempt als je er niet bent: anders staat er naast de
   onderstreepte huidige pagina een tweede witte link en verwatert dat signaal.
   Het merkteken tilt hem al genoeg op. */

/* Sta je op de trainingspagina, dan liep de streep van de huidige pagina dwars
   door het merkteken heen: allebei hangen ze aan de onderkant van de link. Voor
   deze ene link schuift de streep daarom omhoog, strak onder de tekst, zodat de
   volgorde klopt: woord, streep, merkteken. Op het merkteken zelf, niet op de
   href: die wisselde al twee keer (ai-training.html, ai-training, en sinds
   30 sep 2026 weer .html) en elke keer zakte de streep terug door het woord. */
.nav__links a[aria-current="page"]:has(> .nav__flag)::after {
  bottom: 0.48em;
}

.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.05em;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-deep);
}

.nav__right {
  position: relative; /* anker voor .theme-hint */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav__cta {
  padding: 0.7em 1.15em;
  font-size: 0.86rem;
}

/* Theme toggle: pill switch met glijdende knop (zon in licht, maan in donker) */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 2px rgba(8, 12, 20, 0.18);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.theme-toggle:hover {
  border-color: var(--line-strong);
}
.theme-toggle__knob {
  position: absolute;
  /* 2px inset rondom: track is 30x56 met 1px border (border-box) -> binnenmaat
     28x54, knop 24px, dus (28-24)/2 = 2px boven/onder en aan de rustkant.
     translateX(26) brengt 'm naar de andere kant met diezelfde 2px marge. */
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* zelfde merk-gradient als de tekst 'Het faalt door hoe je team het inzet.'
     (var(--grad-text) is themabewust: diepblauw in licht, licht cyaan in donker) */
  background: var(--grad-text);
  /* licht icoon op de diepblauwe lichtmodus-knop */
  color: #f4fbff;
  box-shadow: 0 2px 7px rgba(6, 10, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.42s var(--ease-spring);
}
[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(26px);
  /* donker icoon op de lichte cyaan donkermodus-knop */
  color: #08131c;
}
.theme-toggle__knob svg {
  width: 14px;
  height: 14px;
}
.theme-toggle .icon-sun {
  display: block;
}
.theme-toggle .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

/* ------------------------------------------------------------
   Eenmalige themahint (alleen op de homepagina, zie data-theme-hint in de knop).
   Donker is de voordeur, dus daar wil je niemand vanaf praten. Maar wie in het
   donker binnenkomt weet niet dat er een lichte kant is. Daarom laat de site het
   één keer zíen in plaats van het ergens op te schrijven.

   Het kaartje staat volledig in de kleuren van het ándere thema,
   met een replica van de knop in zijn eindstand. Het is dus geen
   tekstballon over de schakelaar maar een monster van wat de site
   wordt. Daarom staan hier vaste hexwaarden en geen var(--bg) /
   var(--ink): die draaien mee met het huidige thema en dan valt
   precies het idee weg. Ze komen letterlijk uit de andere kant van
   tokens.css; pas ze samen aan. Basis = de donkere staalkaart
   (zichtbaar in licht), de [data-theme="dark"]-regels eronder
   maken er de lichte staalkaart van.
   ------------------------------------------------------------ */
.theme-hint {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  max-width: min(17.5rem, calc(100vw - 2.2rem));
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  border-radius: 16px;
  cursor: pointer;
  /* dark-kant van tokens.css: --bg-2, --glass-border, --ink */
  background: #0d1119;
  border: 1px solid rgba(174, 245, 253, 0.22);
  color: #eef3f9;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.85);
  opacity: 0;
  /* het kaartje klapt open vanaf het puntje, niet vanaf zijn eigen midden */
  transform-origin: calc(100% - var(--hint-x, 28px)) top;
  transform: translateY(-5px) scale(0.94);
  transition: opacity 0.3s var(--ease-out), transform 0.44s var(--ease-spring);
}
.theme-hint.is-on {
  opacity: 1;
  transform: none;
}
/* puntje naar de schakelaar: een gedraaid vierkantje dat kleur en rand erft,
   zodat de lichte en donkere staalkaart allebei kloppen zonder tweede regel */
.theme-hint::before {
  content: "";
  position: absolute;
  top: -6px;
  right: var(--hint-x, 28px);
  width: 11px;
  height: 11px;
  margin-right: -5.5px;
  border-radius: 3px 0 0 0;
  background: inherit;
  border-top: 1px solid;
  border-left: 1px solid;
  border-color: inherit;
  transform: rotate(45deg);
}
/* replica van de knop, in de stand waar je hem heen stuurt */
.theme-hint__knob {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-accent); /* = --grad-switch in dark */
  color: #04181b;
  box-shadow: 0 2px 7px rgba(6, 10, 18, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.theme-hint__knob svg {
  width: 15px;
  height: 15px;
}
.theme-hint__text {
  display: grid;
  gap: 0.1rem;
  line-height: 1.24;
}
.theme-hint__text b {
  font-size: 0.93rem;
  font-weight: 640;
  letter-spacing: -0.015em;
}
.theme-hint__text span {
  font-size: 0.78rem;
  color: #9ba7b5; /* --ink-soft, dark */
}
[data-theme="dark"] .theme-hint {
  /* light-kant van tokens.css: --bg-2, --line, --ink */
  background: #f3f6fa;
  border-color: rgba(12, 18, 28, 0.12);
  color: #0a0e14;
  box-shadow: 0 18px 44px -20px rgba(18, 30, 45, 0.6);
}
[data-theme="dark"] .theme-hint__text span {
  color: #4f5a67; /* --ink-soft, light */
}
[data-theme="dark"] .theme-hint__knob {
  background: linear-gradient(118deg, #11a0d0 0%, #1f7fe0 100%); /* --grad-switch, light */
  color: #f4fbff;
}

/* De enige beweging: de knop legt zijn weg één keer af en veert terug,
   zoals je een schakelaar voordoet. De keyframe overstemt de vaste translateX
   van .theme-toggle__knob, dus de twee standen staan als variabele op de knop. */
.theme-toggle {
  --knob-home: 0px;
  --knob-away: 26px;
}
[data-theme="dark"] .theme-toggle {
  --knob-home: 26px;
  --knob-away: 0px;
}
.theme-toggle.is-peeking .theme-toggle__knob {
  animation: th-knob-peek 1.15s var(--ease-in-out) both;
}
@keyframes th-knob-peek {
  0% { transform: translateX(var(--knob-home)); }
  34% { transform: translateX(var(--knob-away)); }
  66% { transform: translateX(var(--knob-away)); }
  100% { transform: translateX(var(--knob-home)); }
}

/* Mobile nav */
.nav__burger {
  display: none;
  touch-action: manipulation; /* geen dubbeltik-wachttijd op de eerste tik */
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 0 var(--glass-hi);
  transition: border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-spring);
}
.nav__burger:hover {
  border-color: var(--line-strong);
}
.nav__burger:active {
  transform: scale(0.92);
}
.nav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-spring), opacity 0.25s var(--ease-out);
}
/* three tight lines that fold into a centred X when the menu opens */
.nav.is-open .nav__burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav.is-open .nav__burger span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Het menu klapt in bij 1060px, niet bij 880px: sinds Ai-automatisering erbij kwam
   telt de balk zes links en die passen pas naast logo + knoppen vanaf 1055px
   (in de browser gemeten). Daaronder liep "Plan adviesgesprek" buiten de pil.
   De knop zelf verdwijnt pas onder 880px, zie de media query daaronder. */
@media (max-width: 1060px) {
  .nav__links {
    position: fixed;
    inset: 0;
    /* reset de desktop-margins zodat de full-screen overlay echt 100% breed is */
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    padding: clamp(5.5rem, 13vh, 7.5rem) var(--gutter) 2.6rem;
    /* SOEPELHEID: géén backdrop-filter en géén gradient op dit full-screen paneel.
       Een blur over de hele viewport moet op iOS elk frame opnieuw gerenderd
       worden zodra er iets beweegt erachter (aurora, grain) -> dát was de hapering.
       Effen kleur = nul paint-kosten; het paneel zit permanent op een eigen
       compositor-laag (will-change).

       GEEN CSS-TRANSITIES OP DIT PANEEL OF OP DE LINKS, en geen visibility:
       hidden. Gemeten op Mika's iPhone (9 sep 2026, drie sessies): de eerste keer
       dat het paneel mét zijn transities moet bestaan kostte het eerste frame
       780-844ms, ongeacht wat er verder aan of uit stond; zonder transities 15ms.
       Met visibility: hidden bestaat het paneel pas bij het openen en valt die
       opbouw precies op de tik. Nu staat het paneel er vanaf het laden al
       (opacity 0, pointer-events none, inert via nav.js) en doet nav.js het
       uitvouwen met een korte rAF-lus: gewone stijlwijzigingen, geen
       transitie-objecten, en dat is op iOS het verschil. */
    /* 99% dekkend: alle snelle metingen op Mika's iPhone (9 sep 2026) waren
       met deze waarde; 100% is niet apart gemeten. Het oog ziet 1% niet
       (gemeten: 3 tinten op 255). Verander dit alleen met een nieuwe meting. */
    background: color-mix(in srgb, var(--bg) 99%, transparent);
    /* DICHT = WEGGESCHOVEN, NIET DOORZICHTIG. Gemeten op Mika's iPhone
       (9 sep 2026, ?diag): sluiten via opacity 0 kostte 884-1006ms in het
       eerste frame (layout 1-3ms, dus puur tekenen/lagen), openen 13ms.
       Dezelfde tik met het paneel op opacity 1 en translateX(110%) buiten
       beeld: 21ms. WebKit breekt bij opacity 0 kennelijk de laag af en
       herbouwt de compositie van de pagina eronder; een verschoven laag
       blijft gewoon bestaan. De rAF-lus in nav.js vervaagt bij het openen
       nog steeds van 0 naar 1 (dat is de goedkope richting). Vijf varianten
       naast elkaar gemeten op het toestel: alles wat het paneel op zijn plek
       doorzichtig maakt (opacity 0 of 0.02) sluit in 816-865ms; wegschuiven,
       omhoogschuiven of wegknippen (clip-path) sluit in 11-18ms en opent in
       10-22ms. LET OP: ook bij het OPENEN mag het paneel nooit door
       opacity 0 gaan; nav.js vervaagt daarom alleen de links, niet het
       paneel (zonder die regel: 828-873ms bij elke opening). */
    opacity: 1;
    transform: translate3d(110%, 0, 0);
    pointer-events: none;
    will-change: transform, opacity;
    overflow-y: auto;
    /* geen scroll-chaining: een veeg in het open menu mag de pagina erachter niet
       meescrollen (anders sta je na sluiten ergens anders) */
    overscroll-behavior: contain;
    /* De zes links passen ruim in beeld, dus op een normaal telefoonscherm
       hoeft het paneel zelf niet te scrollen: touch-action none laat een veeg
       gewoon niets doen. Daarmee vervalt het scroll-slot op body (nav.js), en
       dat slot was een herlayout van de hele pagina op het openmoment. Kleine
       schermen (< 560px hoog) houden het scrollbare paneel. */
    touch-action: none;
    /* boven alle pagina-content (nav = z:100 stacking context), onder de pill-knoppen */
    z-index: 1;
  }
  /* terwijl het menu open is mag de nav GEEN backdrop-filter/transform hebben: dat
     zou de nav het containing block maken voor het fixed menu, waardoor het menu tot
     pill-formaat krimpt en de pagina eromheen doorschijnt. Glas hier dus uitzetten. */
  /* Op de telefoon nooit backdrop-filter op de pil. Een backdrop-filter maakt
     de nav het containing block van het position:fixed menu; bij het openen
     ging het glas uit (regel hieronder) en sprong het menu daardoor van
     containing block, met een complete herlayout en nieuwe lagen als gevolg.
     Op Mika's iPhone was dat 835ms tussen klik en zichtbaar paneel (gemeten
     9 sep 2026). Een dichtere vulling zonder blur leest bijna hetzelfde en
     laat het menu in één frame openen. */
  .nav.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
  }
  .nav.is-open {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none; /* niets op de pill mag mee-animeren met het openen */
  }
  .nav.is-open .nav__links {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  @media (max-height: 559px) {
    .nav__links { touch-action: pan-y; }
  }
  /* logo + thema/burger blijven boven het dichte menupaneel zweven en klikbaar */
  .nav__brand,
  .nav__right {
    position: relative;
    z-index: 2;
  }
  .nav__links a {
    width: 100%;
    font-size: clamp(1.55rem, 1.2rem + 2.4vw, 2.1rem);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--ink);
    padding: 0.5rem 0;
    /* de cascade van boven naar beneden zit in nav.js (rAF), niet hier: zie de
       toelichting bij .nav__links. Ook de kleur-overgang van de laptopregel
       gaat hier uit: geen enkel transitie-object in dit paneel. */
    transition: none;
  }
  /* In het uitgeklapte menu is de link vol-breed, dus left:50% zou het merkteken
     midden op het scherm centreren in plaats van onder het woord. Daarom staat
     het hier achter de link in plaats van eronder. Verder is het hetzelfde teken
     als in de balk op de laptop: verlopende hoofdletters, geen gevulde pil
     (Mika, 8 september 2026). De letters zijn hier groter dan de 0.52rem op de
     laptop, want ze hangen aan een menulink van ruim 28px; daardoor blijft het
     verloop leesbaar zonder dat er een vlak achter hoeft. */
  .nav__flag {
    position: static;
    transform: none;
    display: inline;
    font-size: 0.3em;
    letter-spacing: 0.1em;
    margin-left: 0.7em;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: 0.5em;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* De huidige pagina en de zojuist aangetikte link (nav.js zet .is-going en
     laat het paneel staan tot de nieuwe pagina tekent) dragen de huisstijl-
     gradient, hetzelfde verloop als het merkteken en de .grad-woorden:
     --grad-text wisselt zelf mee met light/dark (tokens.css). De link is
     normaal 100% breed als tikvlak; met fit-content past het verloop precies
     op de letters in plaats van over de hele schermbreedte uit te lopen. */
  .nav__links a[aria-current="page"],
  .nav.is-leaving .nav__links a.is-going {
    width: fit-content;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .nav__links a[aria-current="page"]::after {
    display: none;
  }
  /* Na een tik dimmen de andere links, zodat je ziet dat de tik is aangekomen.
     Geen transitie, zie de toelichting bij .nav__links. */
  .nav.is-leaving .nav__links a {
    opacity: 0.38;
  }
  .nav.is-leaving .nav__links a.is-going {
    opacity: 1;
  }
  .nav__burger {
    display: flex;
  }
}

/* De hoofdknop blijft naast de hamburger staan zolang er ruimte is; pas op echt
   smalle schermen wijkt hij. Dat scheelt een conversiepunt op tablets. */
@media (max-width: 880px) {
  .nav__cta {
    display: none;
  }
}

/* ---------------- The spine ---------------- */
.spine {
  position: fixed;
  top: 0;
  left: clamp(0.7rem, 2.2vw, 2.6rem);
  bottom: 0;
  width: 2px;
  z-index: var(--z-spine);
  pointer-events: none;
}
.spine__track {
  position: absolute;
  inset: 0;
  width: 1.5px;
  margin-inline: auto;
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--line-strong) 8%,
    var(--line-strong) 92%,
    transparent 100%
  );
}
.spine__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 1.5px;
  margin-inline: auto;
  height: calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(to bottom, transparent, var(--accent-deep) 30%, var(--accent));
  box-shadow: 0 0 12px var(--accent-glow);
}
.spine__node {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress, 0) * 100%);
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 22px var(--accent-glow);
}
.spine__node::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.5;
  animation: spinePulse 2.6s var(--ease-out) infinite;
}
/* Lichte modus: het bolletje + halo/pulse krijgen de diepblauwe accent-kleur
   (zoals de tekst-gradient). Donkere modus houdt het lichtcyaan. */
[data-theme="light"] .spine__node {
  background: var(--grad-text);
  box-shadow: 0 0 0 4px rgba(42, 167, 214, 0.22), 0 0 22px var(--accent-glow);
}
[data-theme="light"] .spine__node::after {
  border-color: var(--accent-deep);
}
@keyframes spinePulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .spine {
    left: 0.5rem;
  }
  .spine__node {
    width: 9px;
    height: 9px;
  }
}

/* ---------------- Footer ---------------- */
.footer {
  position: relative;
  /* bovenruimte (lijn -> logo) gehalveerd: was var(--space-7) */
  padding-block: calc(var(--space-7) / 2) var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: var(--space-6);
}
.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
/* tablet: het merkblok staat op een eigen regel, de drie linkkolommen eronder.
   De kolommen zijn zo breed als hun langste link (auto), niet even breed. Daardoor
   is de column-gap ook precies de witruimte die je ziet: overal even veel, ook al
   heeft "Ai-geletterdheidscheck" twee keer zoveel tekens als "Over ons". De laatste
   kolom krijgt de resterende ruimte, zodat er niets uitrekt. */
@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: auto auto 1fr;
    column-gap: clamp(3.5rem, 8.9vw, 8rem);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1040px) {
  .footer__grid {
    grid-template-columns: 1fr auto auto auto;
  }
  .footer__brand {
    grid-column: auto;
  }
}
.footer__brand .brand {
  margin-bottom: 1.2rem;
  margin-left: 0;
}
/* de merknaam staat in de footer voluit uitgeschreven. Bewust geen A-teken hier:
   zodra je zover naar beneden bent gescrold staat dat teken al linksboven in de
   menubalk, en dan zie je twee keer hetzelfde. */
.footer__wordmark {
  display: inline-block;
}
.footer__brand p {
  color: var(--ink-faint);
  font-size: var(--fs-small);
  max-width: 34ch;
}
.footer__col h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer__col a {
  color: var(--ink-soft);
  font-size: 0.96rem;
  transition: color var(--dur-1);
}
.footer__col a:hover {
  color: var(--accent-deep);
}
/* Hetzelfde merkteken als in de menubalk (.nav__flag), maar dan achter de link
   in plaats van eronder: in de footerkolom staan de drie pijlers onder elkaar
   met 0.7rem ertussen, dus eronder zou het tegen Ai-Partnership aan hangen.
   Verlopende hoofdletters, geen gevulde pil, en de maat is relatief zodat hij
   op 0.96rem link uitkomt op dezelfde 0.52rem als in de balk.
   Anders dan in de balk hangt hij niet als superscript maar staat hij op halve
   letterhoogte naast het woord, met 0.55rem lucht ertussen. Als superscript en
   strak tegen de link aan werd het een voetnoot bij Ai-Training; naast het woord
   op ooghoogte is het een merkteken (Mika, 9 september 2026). */
.footer__flag {
  display: inline-block;
  margin-left: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--fs-small);
}
.footer__brand {
  text-align: left;
}
.footer__brand .footer__social {
  margin-top: 1.5rem;
  justify-content: flex-start;
}
.footer__social {
  display: flex;
  gap: 0.6rem;
}
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.footer__social a:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 17px;
  height: 17px;
}

/* ── Merknaam die bij het scrollen samenklapt tot het A-teken ────────────────
   Elke pagina met de hoofdmenubalk draagt .nav__brand--morph in de markup; de
   landingspagina's zonder menu (wg-/dv-/mt-topbar) tonen sowieso al alleen het
   teken. Bovenaan staat de naam voluit; zodra de nav in glas gaat (.is-scrolled,
   vanaf 36px scroll) schuift de naam dicht en neemt het teken zijn plek in. Terugscrollen draait het om, want het hangt aan
   dezelfde klasse en niet aan een eenmalige trigger. Licht en donker lopen mee
   via de bestaande --light/--dark wissel op .brand-mark__img. */
.nav__brand--morph {
  gap: 0;
}
.nav__brand--morph .brand-mark--morph {
  width: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: left center;
  transition: width 0.4s var(--ease-out), opacity 0.2s var(--ease-out),
    transform 0.4s var(--ease-out);
}
.nav.is-scrolled .nav__brand--morph .brand-mark--morph {
  width: 37px;
  opacity: 1;
  transform: scale(1);
}
/* 1fr -> 0fr laat de naam dichtschuiven zonder dat we een breedte moeten raden.
   Een max-width in ch of px zou bij een andere schermbreedte of een langere
   merknaam een dood stuk animatie opleveren. */
.nav__brand--morph .brand-wordwrap {
  display: grid;
  grid-template-columns: 1fr;
  transition: grid-template-columns 0.4s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav__brand--morph .brand-wordwrap > .brand-word {
  overflow: hidden;
  min-width: 0;
}
.nav.is-scrolled .nav__brand--morph .brand-wordwrap {
  grid-template-columns: 0fr;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .nav__brand--morph .brand-mark--morph,
  .nav__brand--morph .brand-wordwrap {
    transition-duration: 0.01ms;
  }
  /* het kaartje blijft, alleen het openklappen en het voordoen vervallen */
  .theme-toggle.is-peeking .theme-toggle__knob {
    animation: none;
  }
  .theme-hint {
    transform: none;
    transition: opacity 0.2s linear;
  }
}

/* Telefoon: footerlinks (22px hoog) krijgen een raakvlak van ruim 40px;
   de lijst-gap krimpt evenveel zodat de kolom niet uitrekt */
@media (max-width: 767px) {
  .footer__col ul {
    gap: 0.2rem;
  }
  .footer__col a,
  .footer__bottom a {
    display: inline-block;
    padding-block: 0.4rem;
  }
}