/* ============================================================
   v2.css, premium enhancement layer (loaded after pages.css)
   Preloader · muis · film grain · living aurora ·
   animated gradient borders · refined polish.
   Everything is additive and degrades safely.
   ============================================================ */

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Refined polish ---------- */
:root {
  --section-pad: clamp(5.5rem, 4rem + 9vw, 13rem);
  --shadow-lift: 0 60px 140px -40px rgba(0, 0, 0, 0.55);
}
.v2 body {
  letter-spacing: -0.012em;
}
/* Hero headline: keep the original display font, but the calmer inspiration
   layout, centred, both lines uniform, refined moderate size. */
.v2 .hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 2.7vw, 3.6rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.04; /* match the line spacing of "De kloof groeit. Elke maand." */
  max-width: none;
}
/* a wider hero column so the bigger line 2 still fits on one line */
.v2 .hero .hero__inner {
  max-width: min(100%, 86rem);
}
/* subtitle at the standard section-subtitle size (--fs-lead), muted and centred;
   wider measure so it still lands on about two lines on desktop */
.v2 .hero__sub {
  font-size: var(--fs-lead);
  margin-top: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  max-width: 64rem;
  /* geen los woord op de laatste regel ("beginnen.") */
  text-wrap: balance;
}
/* Italic + background-clip:text clips descenders (the 'j' tail) in Chrome.
   Keep the gradient line upright and give it a little room so nothing is cut. */
.v2 .hero h1 .it,
.v2 .hero h1 .grad,
.v2 .hero h1 .swash {
  font-style: normal;
  padding-bottom: 0.14em;
  line-height: 1.04;
}
.v2 .h2,
.v2 h2 {
  letter-spacing: -0.04em;
}
/* socialjuice reviews wall */
.reviews-wall {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.reviews-wall iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* hero reviews badge (socialjuice) */
.hero__badge {
  margin-top: 1.7rem;
}
.hero__badge iframe {
  max-width: 100%;
  display: block;
}

/* keep "Veilig, gestructureerd," on one line (winstgevend. on the next) from
   tablet up; small phones wrap normally to avoid overflow. */
@media (min-width: 680px) {
  .belofte-title {
    white-space: nowrap;
  }
}

/* subpage headlines match the homepage hero size (were larger) */
.v2 .subhero h1 {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.v2 .glass {
  -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
  backdrop-filter: blur(26px) saturate(200%) brightness(1.06);
}
/* deeper, more cinematic dark base */
.v2[data-theme="dark"] {
  --bg: #04050a;
  --bg-2: #0b0e16;
}

/* ---------- Living aurora (slow drift) ---------- */
/* de mesh zit op body::before (sinds 13 sep 2026, zie base.css) */
.v2 body::before {
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.5%, -2%, 0) scale(1.1); }
}

/* ---------- Film grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
[data-theme="dark"] .grain {
  opacity: 0.07;
  mix-blend-mode: overlay;
}
/* Telefoon: geen korrel. Een schermvullende vaste laag met mix-blend-mode
   dwingt WebKit om bij elke scrollstap het complete beeld opnieuw te mengen;
   op 7% dekking zie je 'm op een telefoonscherm toch niet. */
@media (max-width: 767px) {
  .grain {
    display: none;
  }
}

/* ---------- Muis ----------
   Een schijf in de merkgradient vervangt de pijl en wordt een lijn om de knop
   waar je op staat. De rand in de achtergrondkleur houdt de schijf op elk vlak
   leesbaar. Tekstvelden en iframes houden hun eigen cursor. --a loopt van 0
   (schijf) naar 1 (lijn om de knop); JS zet hem per frame. */
.cursor {
  --brand: linear-gradient(135deg, #11a0d0, #1f7fe0);
  --halo: rgba(255, 255, 255, 0.95);
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
[data-theme="dark"] .cursor {
  --brand: linear-gradient(135deg, #aef5fd, #4f93ff);
  --halo: rgba(4, 5, 10, 0.9);
}
.cursor__lens {
  --a: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 0 calc((1 - var(--a)) * 2px) var(--halo),
    0 3px 10px -3px rgba(10, 30, 60, calc((1 - var(--a)) * 0.45));
}
.cursor__lens::before,
.cursor__lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--brand);
}
.cursor__lens::before {
  opacity: calc(1 - var(--a));
}
.cursor__lens::after {
  padding: 1.75px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--a);
}
.cursor-on,
.cursor-on * {
  cursor: none;
}
.cursor-on :is(input, textarea, select, [contenteditable]) {
  cursor: auto;
}

/* ---------- Preloader: non-blocking thin top bar (never covers content) ---------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
  animation: preOut 0.6s var(--ease-out) 1.1s forwards;
}
.preloader__mark {
  display: none;
}
.preloader__inner {
  display: block;
}
.preloader__bar {
  position: relative;
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: transparent;
}
.preloader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  background: var(--grad-accent);
  box-shadow: 0 0 14px var(--accent-glow);
  animation: preBar 0.95s var(--ease-out) forwards;
}
.is-loaded .preloader {
  animation: preOut 0.4s var(--ease-out) forwards;
}
@keyframes preBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes preOut {
  to { opacity: 0; }
}

/* ---------- Animated gradient border on the cinematic video ---------- */
.channel__feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    var(--accent) 10%,
    rgba(102, 198, 255, 0.9) 18%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 5s linear infinite;
  pointer-events: none;
}
@keyframes spinBorder {
  to { --angle: 360deg; }
}

/* ---------- Magnetic buttons get a smoother transition ---------- */
.v2 .btn {
  transition: transform 0.35s var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    filter var(--dur-1) var(--ease-out);
}

/* ---------- Embedded booking calendar (Lunacal) ---------- */
.calendar-embed {
  position: relative;
  margin: 1.8rem auto 0;
  max-width: none;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: transparent;
}
.calendar-embed::before {
  content: "Agenda wordt geladen…";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calendar-embed.is-loaded::before { display: none; }
/* Reserveer de hoogte van het frame vóór Lunacal hem plaatst: anders schuift
   alles onder de agenda 800 tot 900px omlaag op het moment dat het iframe
   verschijnt (gemeten CLS 0,62 op telefoon, 0,17 op desktop). Bij een storing
   neemt het paneel de plek over en vervalt de reservering. */
.calendar-embed:not(.is-fallback) { min-height: 580px; }
@media (max-width: 600px) {
  .calendar-embed:not(.is-fallback) { min-height: 520px; }
}
/* snug the frame to the Lunacal calendar so there is no empty room below it
   (transparent, so any spare room blends into the dark CTA, never white) */
.calendar-embed iframe {
  width: 100%;
  height: 800px;
  border: 0;
  display: block;
  background: transparent;
}
@media (max-width: 600px) {
  .calendar-embed iframe { height: 900px; }
}
/* Vangnet als Lunacal niet werkt (zie watchEmbed in booking.js).

   .is-fallback  echte storing. Het kapotte frame gaat dicht en het paneel
                 neemt de plek over, zodat een lead nooit tegen een leeg wit
                 vlak aankijkt.

   Let op: display:none op dit iframe houdt Lunacal tegen bij het tekenen.
   Het blijft dan op height:100% hangen. booking.js haalt de klasse daarom
   weg zodra het frame alsnog wakker wordt, en vlak voor een remount(). In
   dat laatste geval staat het paneel even onder het verse frame. */
.calendar-embed.is-fallback iframe,
.calendar-embed.is-fallback > [id^="my-lunacal"] { display: none; }
.calendar-embed:not(.is-fallback) .calendar-fallback { margin-top: 1.4rem; }
.calendar-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: clamp(2.2rem, 1.6rem + 2vw, 3.4rem) clamp(1.2rem, 1rem + 1vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
}
.calendar-fallback__title {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: none;
}
.calendar-fallback__text {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  max-width: 44ch;
}
.calendar-fallback .btn { margin-top: 1.1rem; }

/* ---------- Mensen versterken (augment-not-replace) ---------- */
.augment {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--bg-contrast);
  border-radius: clamp(28px, 3vw, 48px);
  padding: clamp(2.6rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}
.augment h2 {
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}
.augment > p {
  position: relative;
  margin: 1.3rem auto 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-lead);
  line-height: 1.45;
}
.augment__row {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 2.4rem auto 0;
  max-width: 720px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .augment__row { grid-template-columns: 1fr 1fr; }
}
.augment__col {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.78);
}
.augment__col b {
  color: #fff;
}
.augment__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
}
.augment__icon--no {
  background: rgba(255, 255, 255, 0.09);
  color: #ff9a9a;
}
.augment__icon--yes {
  background: var(--grad-accent);
  color: #04181b;
}

/* ---------- Rolverdeling: wat Ai overneemt / wat van de mens blijft (homepage #mensen) ---------- */
.roles {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: clamp(2.4rem, 1.4rem + 3.4vw, 4rem) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.2rem, 0.4rem + 2.6vw, 2.8rem);
}

/* connectors: korte streepjeslijnen in de tussenruimte, naar de kern toe */
.roles__core::before,
.roles__core::after {
  content: "";
  position: absolute;
  top: clamp(2rem, 1.3rem + 2.5vw, 2.9rem);
  width: clamp(0.9rem, 0.2rem + 2.4vw, 2.6rem);
  height: 1px;
  background-image: repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 8px);
  background-size: 8px 1px;
  animation: rolesDash 1.6s linear infinite;
}
.roles__core::before {
  right: 100%;
  color: rgba(174, 245, 253, 0.5);
}
.roles__core::after {
  left: 100%;
  color: rgba(255, 255, 255, 0.34);
  animation-direction: reverse;
}
@keyframes rolesDash { to { background-position: 8px 0; } }

/* de twee kolommen */
.roles__side { position: relative; z-index: 1; }
.roles__side--ai { text-align: right; }
.roles__side--human { text-align: left; }

.roles__cap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-size: clamp(0.88rem, 0.8rem + 0.3vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* row-reverse keert de hoofdas om: flex-start pakt dus naar rechts */
.roles__side--ai .roles__cap { justify-content: flex-start; flex-direction: row-reverse; color: var(--accent); }
.roles__side--human .roles__cap { justify-content: flex-start; color: rgba(255, 255, 255, 0.92); }

.roles__cap-ic {
  display: grid;
  place-items: center;
  width: 1.85rem;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%, rgba(174, 245, 253, 0.26), rgba(12, 18, 26, 0.5));
  border: 1px solid rgba(174, 245, 253, 0.45);
}
.roles__cap-ic svg { width: 58%; height: 58%; }
.roles__cap-ic--human {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.28);
}

.roles__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.52rem;
}
.roles__list li {
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.76);
  padding: 0.46rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.roles__side--ai .roles__list li {
  border-color: rgba(174, 245, 253, 0.2);
  background: rgba(174, 245, 253, 0.06);
  color: rgba(234, 246, 251, 0.82);
}
.roles__side--human .roles__list li {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 540;
}

/* de kern: één medewerker */
.roles__core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 0 clamp(0.2rem, 0.6vw, 0.8rem);
}
.roles__core-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(4rem, 2.6rem + 5vw, 5.8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #eaf6fb;
  background: radial-gradient(circle at 50% 32%, rgba(116, 205, 247, 0.28), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 7px rgba(174, 245, 253, 0.07), 0 22px 50px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.roles__core-ic > svg { width: 50%; height: 50%; }
.roles__aura {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(6rem, 4rem + 7vw, 8.6rem);
  aspect-ratio: 1;
  transform: translate(-50%, -16%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(174, 245, 253, 0.28), transparent 66%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.roles__core-lbl {
  font-size: clamp(0.9rem, 0.78rem + 0.42vw, 1.1rem);
  font-weight: 660;
  color: #fff;
  white-space: nowrap;
}
.roles__chip {
  font-size: clamp(0.68rem, 0.64rem + 0.16vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  background: var(--grad-accent);
  padding: 0.25rem 0.68rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(174, 245, 253, 0.55);
}

/* .augment > p is specifieker dan .roles__foot, dus meeselecteren op het paneel.
   De bovenmarge is exact de padding-bottom van .augment: daardoor staat de slotzin
   op elk formaat precies midden tussen de kolommen en de onderrand van het paneel. */
.augment > .roles__foot,
.roles__foot {
  margin: clamp(2.6rem, 2rem + 4vw, 5rem) auto 0;
  max-width: 42ch;
  text-align: center;
  font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.32rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}
.roles__foot em {
  font-style: normal;
  color: #fff;
  font-weight: 620;
}

@media (prefers-reduced-motion: reduce) { .roles__core::before, .roles__core::after { animation: none; } }

/* mobiel: verticaal gestapeld, curves verborgen */
@media (max-width: 720px) {
  .roles {
    grid-template-columns: 1fr;
    max-width: 24rem;
    gap: 1.4rem;
  }
  .roles__core::before, .roles__core::after { display: none; }
  .roles__side--ai, .roles__side--human { text-align: left; }
  .roles__side--ai .roles__cap { flex-direction: row; }
  .roles__core { order: -1; }
  .roles__core-lbl, .roles__chip { white-space: normal; text-align: center; }
}

/* ---------- Training: program boxes ---------- */
.train-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .train-grid { grid-template-columns: 1fr 1fr; }
}
.train-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.7rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--r-lg);
}
.train-card .phase-card__num {
  align-self: flex-start;
}
.train-card h3 {
  font-size: var(--fs-h3);
  margin-top: 0.2rem;
}
.train-card p {
  font-size: var(--fs-small);
}
.train-card .ticks {
  margin-top: 0.4rem;
}

/* ---------- Ai-models grid ---------- */
.models-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
}
@media (min-width: 560px) {
  .models-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .models-grid { grid-template-columns: repeat(4, 1fr); }
}
.model-card {
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.model-card:hover {
  transform: translateY(-6px);
}
.model-card h3 {
  font-size: 1.3rem;
}
.model-card p {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.model-dot {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #fff;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
}
.model-dot img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* ---------- Intro splash (homepage): one line types itself out, then its A lifts
   off like a rocket and writes the header logo as the site fades up ---------- */
/* tempo van de hele intro: 1 = het oorspronkelijke tempo, hoger = trager.
   Moet gelijk blijven aan T in het intro-script van index.html. */
:root { --intro-t: 1.15; }
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg);
  /* the background clears (revealing the page) when the A takes flight; a late
     opacity fade is the final failsafe handoff */
  transition: background-color calc(0.8s * var(--intro-t)) var(--ease-out), opacity calc(0.7s * var(--intro-t)) var(--ease-out);
  animation: introFailsafe calc(0.7s * var(--intro-t)) var(--ease-out) calc(7.6s * var(--intro-t)) forwards;
}
/* when the A launches the overlay turns transparent so the page shows through */
.intro--exit {
  background-color: transparent;
  pointer-events: none;
}
/* overslaan (klik, toets of scroll, zie het intro-script in index.html): alles
   in de overlay dooft in één keer, niemand hoeft op de intro te wachten */
.intro--skip {
  opacity: 0;
  transition: background-color 0.26s ease, opacity 0.26s ease;
}
/* Liquid-glass veil: the whole page sits behind a soft blur during the intro and
   sharpens into focus exactly as the header logo lands. It is BELOW the intro
   overlay (so the flying A stays crisp) but ABOVE the page. JS lifts it as the
   logo writes in; the CSS failsafe + reduced-motion rule guarantee it never sticks. */
.glassveil {
  position: fixed;
  inset: 0;
  z-index: 1900;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity calc(0.9s * var(--intro-t)) var(--ease-out);
  animation: glassveilClear calc(0.6s * var(--intro-t)) var(--ease-out) calc(7.4s * var(--intro-t)) forwards;
}
@keyframes glassveilClear {
  to { opacity: 0; visibility: hidden; }
}
[data-motion="off"] .glassveil { display: none; }

/* The line writes itself out on ONE line (never wraps); a hidden "ghost" copy of
   the full sentence reserves the exact box so the live text reveals with zero
   reflow. The A in "Ai" is what later peels off into flight. */
.intro__line {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity calc(0.55s * var(--intro-t)) var(--ease-out), transform calc(0.6s * var(--intro-t)) var(--ease-out);
  will-change: opacity, transform;
}
.intro__line.is-on { opacity: 1; }
/* Op telefoon de intro-zin wat groter (desktop blijft via de clamp hierboven
   onveranderd). vw-gebaseerd zodat 'Klaar voor de Ai-Revolution?' bij nowrap
   niet buiten beeld valt. Het A-merkteken schaalt mee via de JS-ondergrens. */
@media (max-width: 767px) {
  .intro__line {
    font-size: clamp(1.05rem, 6.4vw, 1.85rem);
  }
}
/* compress the whole sentence horizontally into the centre (left + right ends
   slide toward each other like two panels). They stay solid almost all the way
   in, then fade only in the last moment as the A is revealed in the gap. */
.intro__line.is-compressing .intro__live {
  transform: scaleX(0.03);
  opacity: 0;
  transition: transform calc(0.52s * var(--intro-t)) cubic-bezier(0.6, 0, 0.3, 1), opacity calc(0.18s * var(--intro-t)) ease calc(0.42s * var(--intro-t));
}
.intro__ghost { visibility: hidden; }
.intro__live {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
/* the brand name inside the line, set exactly like the header wordmark */
.intro__brand {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.intro__line .brand-dash {
  vertical-align: 0.26em;
}
/* the typing caret: a slim accent bar that rides behind the last glyph while the
   line writes, and blinks softly while it waits */
.intro__caret {
  display: inline-block;
  width: 0.055em;
  height: 0.92em;
  margin-left: 0.05em;
  border-radius: 1em;
  vertical-align: -0.07em;
  background: var(--accent-deep);
  box-shadow: 0 0 14px var(--accent-glow);
  animation: introCaretBlink 1.05s steps(1, end) infinite;
}
.intro__caret.is-typing { animation: none; opacity: 1; }
.intro__caret.is-gone {
  opacity: 0;
  transition: opacity calc(0.35s * var(--intro-t)) var(--ease-out);
}
@keyframes introCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- De logo-reveal: de favicon-A bouwt zich groot in het midden op
   (contour tekent -> vult van onder naar boven -> gradient-streep klikt erin
   met een lichtflits), houdt een tel het podium en zweeft dan als één geheel
   naar zijn plek in de header, waar de wordmark-letters cascaderen. ---- */
.intro__hero {
  --as: clamp(150px, 36vmin, 300px);
  position: fixed;
  left: calc(50% - var(--as) / 2);
  top: calc(50% - var(--as) / 2);
  width: var(--as);
  height: var(--as);
  opacity: 0;
  pointer-events: none;
  z-index: 2001;
  /* GEEN will-change hier: dat zou de hero op een GPU-laag rasteren en de
     vector-scherpte kosten; alleen de vlucht (.is-flying) krijgt een laag. */
}
.intro__hero.is-flying { will-change: transform; }
.intro__hero .intro-a { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* zachte bloom achter het merkteken */
.intro__glowb {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 66%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity calc(0.5s * var(--intro-t)) var(--ease-out);
}
.intro-a__outline {
  fill: none;
  stroke: #14171e;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.9;
}
[data-theme="dark"] .intro-a__outline { stroke: #ffffff; }
.intro-a__fill { fill: #14171e; }
[data-theme="dark"] .intro-a__fill { fill: #ffffff; }
/* de vulling wacht achter een wipe-clip die van onderen omhoog schuift */
.intro-a__wipe { transform: translateY(120px); }
.intro-a__bar {
  fill: url(#introGradL);
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}
/* bewust GEEN contour om de balk (ook niet in dark mode): de streep moet er
   exact uitzien als in favicon-dark.svg, puur de gradient, zonder randje.
   (Een eerdere haarlijn-contour is op verzoek verwijderd.) */
[data-theme="dark"] .intro-a__bar { fill: url(#introGradD); }
/* de "uit-stand" van de toggle: een verzonken glazen track op de A-vulling */
.intro-a__track {
  fill: rgba(255, 255, 255, 0.13);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
[data-theme="dark"] .intro-a__track {
  fill: rgba(8, 15, 26, 0.16);
  stroke: none;
}
/* de liquid-glass duim: doorschijnend bolletje met specular highlight, groter
   dan de track (Apple-stijl) zodat hij over de rand bolt. Alles vector, geen
   filters: blur zou de A zijn pixelscherpte kosten. */
.intro-a__knob { transform-box: fill-box; }
.intro-a__knob-in { transform-box: fill-box; transform-origin: center; opacity: 0; }
.intro-a__knob-b {
  fill: url(#introKnob);
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
/* dark mode: geen donkere ring om de duim (gebruiker wil geen zwart lijntje);
   de witte rim uit de basisregel is op de witte A vrijwel onzichtbaar en toont
   alleen subtiel boven de gradient, precies genoeg. */
.intro-a__knob-hl { fill: #ffffff; opacity: 0.85; }

/* de opbouw: getriggerd door .is-building (JS), alles op elkaar getimed */
.intro__hero.is-building { animation: heroPop calc(0.4s * var(--intro-t)) cubic-bezier(0.18, 1.3, 0.4, 1) forwards; }
/* pop via opacity+translate, bewust ZONDER schaal: een schaal-animatie laat de
   browser de laag op verkleind formaat rasteren en dat oogt wollig op retina */
@keyframes heroPop {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro__hero.is-building .intro-a__outline { animation: aDraw calc(0.55s * var(--intro-t)) cubic-bezier(0.6, 0, 0.3, 1) forwards, aOutlineOut calc(0.35s * var(--intro-t)) ease calc(1s * var(--intro-t)) forwards; }
@keyframes aDraw { to { stroke-dashoffset: 0; } }
@keyframes aOutlineOut { to { opacity: 0; } }
.intro__hero.is-building .intro-a__wipe { animation: aWipeUp calc(0.5s * var(--intro-t)) cubic-bezier(0.4, 0, 0.2, 1) calc(0.42s * var(--intro-t)) forwards; }
@keyframes aWipeUp { to { transform: translateY(0); } }
/* de toggle-beat: track verschijnt (uit-stand), de glazen duim popt links op,
   schuift naar rechts en "verft" de gradient achter zich aan (bar-scaleX loopt
   exact synchroon met de duim, de duim dekt de groeiende rand altijd af). Dan
   smelt de duim weg in de streep. */
.intro__hero.is-building .intro-a__track { animation: aTrackIn calc(0.25s * var(--intro-t)) ease calc(0.6s * var(--intro-t)) forwards, aTrackOut calc(0.25s * var(--intro-t)) ease calc(1.48s * var(--intro-t)) forwards; }
@keyframes aTrackIn { to { opacity: 1; } }
@keyframes aTrackOut { to { opacity: 0; } }
.intro__hero.is-building .intro-a__knob-in { animation: aKnobPop calc(0.24s * var(--intro-t)) cubic-bezier(0.34, 1.45, 0.5, 1) calc(0.72s * var(--intro-t)) forwards, aKnobOut calc(0.25s * var(--intro-t)) ease calc(1.48s * var(--intro-t)) forwards; }
@keyframes aKnobPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes aKnobOut { to { opacity: 0; transform: scale(0.7); } }
.intro__hero.is-building .intro-a__knob { animation: aKnobSlide calc(0.5s * var(--intro-t)) cubic-bezier(0.6, 0, 0.22, 1.18) calc(0.98s * var(--intro-t)) forwards; }
@keyframes aKnobSlide { to { transform: translateX(35.5px); } }
.intro__hero.is-building .intro-a__bar { animation: aBarIn calc(0.5s * var(--intro-t)) cubic-bezier(0.6, 0, 0.22, 1.18) calc(0.98s * var(--intro-t)) forwards; }
@keyframes aBarIn { to { transform: scaleX(1); } }
.intro__hero.is-building .intro__glowb { opacity: 1; transition-delay: calc(0.75s * var(--intro-t)); }
/* na de opbouw bevriest .is-built (JS) alles op statische eindwaarden: geen
   lopende animaties = geen composited layer = de A wordt op dit moment als
   pure vector op volle apparaatresolutie getekend. Dit is het podium-moment
   waarop de streep pixelscherp moet staan. */
.intro__hero.is-built,
.intro__hero.is-built .intro-a__outline,
.intro__hero.is-built .intro-a__wipe,
.intro__hero.is-built .intro-a__bar,
.intro__hero.is-built .intro-a__track,
.intro__hero.is-built .intro-a__knob,
.intro__hero.is-built .intro-a__knob-in { animation: none !important; }
.intro__hero.is-built { opacity: 1; transform: none; }
.intro__hero.is-built .intro-a__outline { opacity: 0; }
.intro__hero.is-built .intro-a__wipe { transform: translateY(0); }
.intro__hero.is-built .intro-a__bar { transform: scaleX(1); }
.intro__hero.is-built .intro-a__track { opacity: 0; }
.intro__hero.is-built .intro-a__knob-in { opacity: 0; }
.intro__hero.is-built .intro__glowb { opacity: 1; }

/* tijdens de vlucht dimt de bloom, bij de landing lost de A op in de wordmark */
.intro__hero.is-flying .intro__glowb { opacity: 0; transition: opacity calc(0.4s * var(--intro-t)) ease; transition-delay: 0s; }
.intro__hero.is-landed .intro-a { opacity: 0; transition: opacity calc(0.4s * var(--intro-t)) ease calc(0.12s * var(--intro-t)); }

/* schokgolf-ringetje op de landingsplek (JS spawnt en ruimt op) */
.intro-ring {
  position: fixed;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--accent-glow);
  pointer-events: none;
  z-index: 2002;
  animation: introRing calc(0.65s * var(--intro-t)) ease-out forwards;
}
@keyframes introRing {
  from { transform: scale(0.3); opacity: 0.9; }
  to { transform: scale(2.4); opacity: 0; }
}

/* wordmark-cascade: het script splitst "Ai-Revolution" in glyphs die één voor
   één invliegen; daarna wordt de originele markup teruggezet */
.brand-word .bw-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  transition: opacity calc(0.36s * var(--intro-t)) var(--ease-out), transform calc(0.36s * var(--intro-t)) var(--ease-out), filter calc(0.36s * var(--intro-t)) var(--ease-out);
}
.brand-word .bw-ch.is-in { opacity: 1; transform: none; filter: blur(0); }
.brand-word .bw-ch--dash .brand-dash { display: inline-block; transform: scaleX(0); transform-origin: left center; }
.brand-word .bw-ch--dash.is-in .brand-dash { animation: dashPop calc(0.45s * var(--intro-t)) cubic-bezier(0.34, 1.45, 0.5, 1) forwards; }
@keyframes dashPop { to { transform: scaleX(1); } }
@keyframes introFailsafe {
  to { opacity: 0; visibility: hidden; }
}
/* skip the whole intro (already seen this session), no flash of overlay */
.intro-skip .intro,
.intro-skip .glassveil { display: none !important; }
/* Korte snit (sinds 30 sep 2026 overal): de getypte zin vervalt volledig, alleen het merkteken
   bouwt op en vliegt naar de header. Het podiumstuk staat position:fixed en
   centreert zichzelf, dus de weggevallen regel verschuift niets. */
.intro-short .intro__line { display: none; }

/* ---------- Reduced motion / touch fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .v2 body::before { animation: none; }
  .channel__feature::before { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---------- Cookie consent (house-style liquid glass) ----------
   Het paneel IS het glas van de site (.glass .glass--strong op het element).
   Eén memorabel ding: het paneel reageert op je keuze. Elke categorie is een
   glazen lat die opgloeit als hij aanstaat, en de aurora achter het paneel
   groeit mee (data-on="0..2"). Verder: rustig, veel lucht, één entree. */
.cookie {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  /* + safe-area zodat de knoppen op iPhones niet in de home-indicator/swipe-zone
     vallen; max-height + scroll zodat de banner op kleine telefoons nooit
     buiten beeld valt */
  bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  width: min(92vw, 404px);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  border-radius: var(--r-xl);
  color: var(--ink);
  --cookie-aura: 0.28;
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 30px 80px -30px color-mix(in srgb, var(--accent-glow) 60%, transparent),
    var(--shadow-lift);
  transform: translateY(28px) scale(0.96);
  transform-origin: 80% 100%;
  opacity: 0;
  /* dicht: onzichtbaar én onklikbaar. Het paneel blijft op zijn plek staan, dus
     zonder dit vangt het na sluiten nog klikken op de footerlinks eronder.
     visibility wacht tot de uitgang klaar is. */
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.06),
    opacity 0.45s var(--ease-out),
    box-shadow 0.8s var(--ease-out),
    visibility 0s linear 0.75s;
}
.cookie.is-in {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.cookie[data-on="1"] { --cookie-aura: 0.65; }
.cookie[data-on="2"] { --cookie-aura: 1; }
.cookie[data-on="2"] {
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 30px 90px -26px var(--accent-glow),
    var(--shadow-lift);
}

/* aurora achter het glas: onder de laag met inhoud, maar boven de vulling */
.cookie .cookie__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* de gradients liggen deels buiten de rand; het element zelf niet, anders
     wordt het paneel (overflow-y: auto) scrollbaar */
  background:
    radial-gradient(80% 65% at 15% 100%, var(--mesh-1), transparent 70%),
    radial-gradient(70% 60% at 90% 92%, var(--mesh-2), transparent 70%),
    radial-gradient(60% 50% at 55% 112%, var(--mesh-3), transparent 70%);
  opacity: var(--cookie-aura);
  transition: opacity 0.9s var(--ease-out);
}
/* één lichtveeg over het glas na de landing (via background-position, zodat
   niets buiten de rand steekt) */
.cookie .cookie__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 25%,
    color-mix(in srgb, var(--glass-hi) 50%, transparent) 50%,
    transparent 75%
  );
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
  opacity: 0;
}
.cookie.is-in .cookie__sweep { animation: cookie-sweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.55s 1 both; }
@keyframes cookie-sweep {
  0% { background-position: -120% 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { background-position: 220% 0; opacity: 0; }
}

/* inhoud komt in kleine stappen na het paneel */
.cookie__head,
.cookie__text,
.cookie__opts,
.cookie__actions,
.cookie__settings {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.cookie.is-in .cookie__head { opacity: 1; transform: none; transition-delay: 0.18s; }
.cookie.is-in .cookie__text { opacity: 1; transform: none; transition-delay: 0.26s; }
.cookie.is-in .cookie__opts { opacity: 1; transform: none; transition-delay: 0.34s; }
.cookie.is-in .cookie__actions { opacity: 1; transform: none; transition-delay: 0.44s; }
.cookie.is-in .cookie__settings { opacity: 1; transform: none; transition-delay: 0.5s; }

.cookie__close {
  position: absolute;
  z-index: 4; /* boven .cookie__head (z-index 3 via .glass > *), anders vangt die de klik */
  top: 0.9rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.cookie__close svg { width: 15px; height: 15px; }
.cookie__close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.cookie__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
  padding-right: 2rem;
}
/* het koekje: lijntekening in de merkgradient, tekent zichzelf bij binnenkomst */
.cookie__coin {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 60%),
    color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--glass-hi) 70%, transparent),
    0 0 0 1px var(--line);
}
.cookie__glyph { width: 30px; height: 30px; overflow: visible; }
.cookie__glyph path {
  fill: none;
  stroke: url(#cookie-grad);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s var(--ease-out) 0.35s;
}
.cookie__glyph circle {
  fill: url(#cookie-grad);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-spring);
}
/* light mode: de lichte merkgradient valt weg op wit, dus de diepere tekst-gradient */
[data-theme="light"] .cookie__glyph stop:nth-child(1) { stop-color: #11a0d0; }
[data-theme="light"] .cookie__glyph stop:nth-child(2) { stop-color: #1a8fd8; }
[data-theme="light"] .cookie__glyph stop:nth-child(3) { stop-color: #1f7fe0; }
.cookie.is-in .cookie__glyph path { stroke-dashoffset: 0; }
.cookie.is-in .cookie__glyph circle { opacity: 1; transform: none; }
.cookie.is-in .cookie__glyph circle:nth-of-type(1) { transition-delay: 1.15s; }
.cookie.is-in .cookie__glyph circle:nth-of-type(2) { transition-delay: 1.25s; }
.cookie.is-in .cookie__glyph circle:nth-of-type(3) { transition-delay: 1.35s; }

.cookie__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.cookie__text {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 34ch;
}

/* de latten */
.cookie__opts { margin: 1.15rem 0 0; display: flex; flex-direction: column; gap: 0.45rem; }
.cookie__opt {
  --opt-glow: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.72rem 0.8rem 0.72rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
[data-theme="dark"] .cookie__opt { background: rgba(255, 255, 255, 0.035); }
/* het licht dat vanuit de schakelaar over de lat trekt als hij aangaat */
.cookie__opt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, var(--glass-tint) 55%, color-mix(in srgb, var(--accent-2) 22%, transparent) 100%);
  opacity: var(--opt-glow);
  transform: translateX(30%);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.cookie__opt:has(input:checked) {
  --opt-glow: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-deep) 45%, var(--line));
}
.cookie__opt:has(input:checked)::before { transform: none; }
.cookie__opt:hover { background: color-mix(in srgb, var(--ink) 6.5%, transparent); }
[data-theme="dark"] .cookie__opt:hover { background: rgba(255, 255, 255, 0.055); }
.cookie__opt--fixed { cursor: default; }
.cookie__opt--fixed:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
[data-theme="dark"] .cookie__opt--fixed:hover { background: rgba(255, 255, 255, 0.035); }
.cookie__opt > * { position: relative; }
.cookie__opt-text { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; min-width: 0; }
.cookie__opt-text b { font-size: 0.94rem; font-weight: 580; letter-spacing: -0.01em; }
.cookie__opt-text span { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; }
/* Essentieel: geen dode grijze schakelaar, maar een stil label */
.cookie__always {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  padding: 0.34em 0.75em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  white-space: nowrap;
}

/* de schakelaar */
.cookie-switch { position: relative; width: 50px; height: 30px; flex: none; }
.cookie-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.cookie-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(10, 16, 28, 0.32), 0 0 0 0.5px rgba(10, 16, 28, 0.08);
  transition: transform 0.35s var(--ease-spring);
}
.cookie-switch input:checked ~ .cookie-switch__track {
  background: var(--grad-switch);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 6px 18px -6px var(--accent-glow);
}
.cookie-switch input:checked ~ .cookie-switch__track::after { transform: translateX(20px); }
.cookie-switch input:focus-visible ~ .cookie-switch__track {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

/* de knoppen: accepteren en weigeren even groot, bewaren pas als er iets is omgezet */
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.15rem; }
.cookie__actions .btn { flex: 1 1 0; justify-content: center; padding: 0.78rem 1rem; font-size: 0.88rem; white-space: nowrap; }
.cookie__save {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
/* de gloed van de knop mag niet door overflow:hidden worden afgekapt: ruimte
   eromheen binnen de clip, en die ruimte weer wegtrekken met negatieve marge */
.cookie__save > div { overflow: hidden; min-height: 0; padding: 0 1.25rem 2rem; margin: 0 -1.25rem -1.5rem; }
/* verborgen steekt hij via die ruimte over de bovenrand van de andere twee
   knoppen: dus onzichtbaar = onaanwijsbaar, anders pakt de muislijn (en een
   klik) hem daar in plaats van de knop eronder */
.cookie__save .btn { width: 100%; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.4s; }
.cookie--dirty .cookie__save { grid-template-rows: 1fr; }
.cookie--dirty .cookie__save .btn { opacity: 1; visibility: visible; transform: none; transition-delay: 0.12s; }
.cookie__btn--save { --fg-btn: var(--switch-ink); background: var(--grad-switch); box-shadow: 0 10px 30px -10px var(--accent-glow); }
.cookie__btn--save:hover { filter: brightness(1.06); box-shadow: 0 16px 44px -12px var(--accent-glow); }
.cookie__actions .btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.cookie__settings {
  display: none;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 1.2rem; }

/* Telefoon: op eerste vertoning een strook, geen muur; "Kies per categorie"
   klapt de latten uit */
@media (max-width: 720px) {
  .cookie { left: 0.65rem; right: 0.65rem; width: auto; transform-origin: 50% 100%; }
  .cookie.cookie--compact { padding: 1.15rem 1.15rem 1.05rem; border-radius: 30px; }
  .cookie.cookie--compact .cookie__head { margin-bottom: 0.4rem; padding-right: 0; gap: 0.7rem; }
  .cookie.cookie--compact .cookie__coin { width: 36px; height: 36px; }
  .cookie.cookie--compact .cookie__glyph { width: 22px; height: 22px; }
  .cookie.cookie--compact .cookie__title { font-size: 1.1rem; }
  .cookie.cookie--compact .cookie__text { font-size: 0.84rem; line-height: 1.45; max-width: none; }
  .cookie.cookie--compact .cookie__opts,
  .cookie.cookie--compact .cookie__close,
  .cookie.cookie--compact .cookie__save { display: none; }
  .cookie.cookie--compact .cookie__actions { margin-top: 0.85rem; gap: 0.45rem; }
  .cookie.cookie--compact .cookie__actions .btn { padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  .cookie.cookie--compact .cookie__settings { display: inline; padding-block: 0.5rem; margin-top: 0.2rem; }
}
@media (max-width: 380px) {
  .cookie__actions .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie { transition: opacity 0.3s ease, visibility 0s linear 0.3s; transform: none; }
  .cookie__head, .cookie__text, .cookie__opts, .cookie__actions, .cookie__settings { transition: opacity 0.3s ease; transform: none; }
  .cookie.is-in .cookie__sweep { animation: none; }
  .cookie__glyph path { stroke-dashoffset: 0; transition: none; }
  .cookie__glyph circle { opacity: 1; transform: none; transition: none; }
  .cookie__opt::before, .cookie-switch__track::after, .cookie__save { transition: none; }
}

/* ---------- Mobile smoothness: lighter glass blur ----------
   backdrop-filter is the biggest per-scroll GPU cost on phones. A smaller blur
   radius is barely perceptible on a small screen but cuts compositing work a
   lot, so scrolling past the many glass panels stays at 60fps. */
@media (max-width: 767px) {
  .glass,
  .glass-pill {
    -webkit-backdrop-filter: blur(13px) saturate(170%);
    backdrop-filter: blur(13px) saturate(170%);
  }
  .glass--strong {
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
}