/* ==========================================================================
   Leadbundel — Componenten
   ========================================================================== */

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              transform var(--dur-ui) var(--ease-out);
}
.btn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.btn:active { transform: scale(0.985); }

.btn--primary { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-bd: var(--fg); }
.btn--primary:hover { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }

.btn--secondary { --btn-bd: var(--rule); --btn-fg: var(--fg); }
.btn--secondary:hover { --btn-bd: var(--fg); --btn-bg: color-mix(in srgb, var(--fg) 6%, transparent); }

.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }

.btn__arrow { flex: none; transition: transform 320ms var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Tekstlink met pijl */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), gap var(--dur-micro) var(--ease-out);
}
.arrow-link:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); gap: 14px; }
.arrow-link svg { flex: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--text-inv);
  transition: transform 420ms var(--ease-out), background-color 320ms var(--ease-out), color 320ms var(--ease-out), border-color 320ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Geen backdrop-filter. Zo'n filter leest uit wat eronder ligt en moet dus
     opnieuw rekenen zodra dat verandert; onder deze balk ligt het shaderveld,
     dat elk beeld verandert. Over de volle breedte van een breed scherm is dat
     de duurste bewerking op de pagina, duurder dan de shader zelf. Een
     dekkendere sluier ziet er op een donkere site hetzelfde uit. */
  background: rgba(11, 12, 14, 0.93);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.header.is-stuck::before { opacity: 1; }
.header.is-stuck { border-bottom-color: var(--border-inv-soft); }
.header.is-hidden { transform: translateY(-100%); }

/* Menu open: de header klimt boven het overlay uit, zodat de sluitknop (de X)
   aanraakbaar blijft. Zonder deze regel dekt het menu zijn eigen knop af. */
body.is-locked .header {
  z-index: calc(var(--z-menu) + 1);
  color: var(--text-inv);
  transform: none;
  border-bottom-color: transparent;
}
body.is-locked .header::before { opacity: 0; }

/* Lichte pagina's: header start donker-op-licht */
.header--on-light { color: var(--text); }
.header--on-light::before { background: rgba(243, 241, 236, 0.86); }
.header--on-light.is-stuck { border-bottom-color: var(--border); }

.header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo__mark { flex: none; }
.logo__text {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}
/* Het merkteken beweegt op drie manieren, alle drie licht:

   1. De lus tekent zichzelf één keer bij het laden. De padlengte is 236
      gebruikerseenheden (gemeten met getTotalLength), vandaar die waarde.
   2. De punt ademt traag — het enige wat blijft doorlopen, en alleen zolang
      de bezoeker beweging wil.
   3. Bij hover trekt er een lichte glans overheen.

   Alles hangt aan transform en opacity, dus er komt geen layout aan te pas. */
.logo__mark { overflow: visible; }
.logo__loop {
  stroke-dasharray: 238;
  stroke-dashoffset: 238;
  animation: logo-draw 1100ms var(--ease-out) 120ms forwards;
}
.logo__dot {
  transform-origin: 48px 28px;
  /* Drie ademhalingen na het intekenen, dan stil. Een oneindige animatie in
     de vaste header betekent dat de compositor nooit tot rust komt, en die
     header staat op elke pagina altijd in beeld. */
  animation: logo-breathe 3.6s var(--ease-soft, ease-in-out) 1200ms 3;
}
@keyframes logo-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.82); opacity: 0.72; }
}
.logo:hover .logo__loop { animation: logo-sheen 620ms var(--ease-out); }
@keyframes logo-sheen {
  0%   { stroke-dasharray: 238; stroke-dashoffset: 0; }
  40%  { stroke-dasharray: 40 198; stroke-dashoffset: -60; }
  100% { stroke-dasharray: 238; stroke-dashoffset: -238; }
}
.logo:hover .logo__dot { animation: logo-breathe 1.2s var(--ease-out); }

/* Minder beweging: de lus staat meteen vol en er beweegt niets meer. */
@media (prefers-reduced-motion: reduce) {
  .logo__loop { animation: none; stroke-dashoffset: 0; }
  .logo__dot { animation: none; }
  .logo:hover .logo__loop, .logo:hover .logo__dot { animation: none; }
}

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 9px 14px;
  font-size: 0.9375rem;
  font-weight: 450;
  color: currentColor;
  opacity: 0.78;
  border-radius: var(--r-pill);
  transition: opacity var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav__link:hover { opacity: 1; background: color-mix(in srgb, currentColor 9%, transparent); }
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 1.5px;
  background: var(--accent-text);
}

.header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav + .header__actions { margin-left: 0; }
.header__cta { display: none; }

/* Taalwissel */
.langswitch { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; }
.langswitch__item {
  padding: 6px 8px;
  border-radius: var(--r-xs);
  opacity: 0.55;
  transition: opacity var(--dur-micro) var(--ease-out);
  text-transform: uppercase;
}
.langswitch__item:hover { opacity: 1; }
.langswitch__item[aria-current="true"] { opacity: 1; color: var(--accent-text); }
.langswitch__sep { opacity: 0.3; }

/* Menuknop */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-right: -10px;
  border-radius: var(--r-pill);
  color: currentColor;
}
.menu-toggle__bars { position: relative; width: 20px; height: 12px; }
.menu-toggle__bars span {
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 320ms var(--ease-out), opacity 200ms var(--ease-out);
}
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { transform: translateY(5.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header__cta { display: inline-flex; }
}

/* Mobiel menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  color: var(--text-inv);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-menu__list { display: grid; gap: 2px; border-top: 1px solid var(--border-inv-soft); }
.mobile-menu__item { border-bottom: 1px solid var(--border-inv-soft); }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 50ms + 100ms);
}
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu__link .index-num { font-size: 0.6875rem; }
.mobile-menu__link[aria-current="page"] { color: var(--accent-text); }
.mobile-menu__foot {
  margin-top: auto;
  padding-top: var(--space-7);
  display: grid;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--ease-out) 340ms, transform 460ms var(--ease-out) 340ms;
}
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; }
.mobile-menu__contact { display: grid; gap: 4px; font-size: var(--fs-small); color: var(--text-muted-inv); }
.mobile-menu__contact a:hover { color: var(--text-inv); }

@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* --------------------------------------------------------------------------
   Kaarten
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  /* Bewust geen backdrop-filter: onder een kaart ligt alleen het shaderveld,
     een vloeiend verloop zonder detail. Vervagen verandert daar visueel niets
     aan, maar kost wel een blur-pass per kaart per beeld — op /websites/ zijn
     dat er 18, en dat is precies waar het haperde. */
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.card--link:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); transform: translateY(-3px); }
.card__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; }
.card__text { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.65; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }

/* Genummerde lijstrij (werkwijze, features) */
.row-list { border-top: 1px solid var(--rule); }
.row-item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (min-width: 900px) {
  .row-item {
    grid-template-columns: 88px minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-6);
    padding: var(--space-7) 0;
  }
}
.row-item__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.row-item__text { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.7; max-width: 58ch; }

/* Checklist */
.checklist { display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.6; }
.checklist svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.checklist--muted li { color: var(--fg-muted); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  /* Chips mogen breken: op smalle schermen duwt nowrap de pagina anders open. */
  max-width: 100%;
}
.chip--accent { border-color: var(--accent-line); color: var(--accent-text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); flex: none; }
.badge-dot--live { position: relative; }
.badge-dot--live::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-text);
  opacity: 0;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0% { opacity: .7; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(1.4); }
}

/* --------------------------------------------------------------------------
   Accordion / FAQ
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color var(--dur-micro) var(--ease-out);
}
.accordion__trigger:hover { color: var(--accent-text); }
.accordion__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 5px;
}
.accordion__icon::before, .accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform 320ms var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }
/* Open/dicht via een grid-track van 0fr naar 1fr: dat animeert in alle huidige
   browsers en klapt in oudere gewoon zonder animatie open. visibility haalt
   gesloten antwoorden uit de voorleesvolgorde en de tabvolgorde. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s linear 380ms;
}
.accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 380ms var(--ease-out), visibility 0s;
}
.accordion__panel > div { overflow: hidden; }
.accordion__body {
  padding-bottom: var(--space-6);
  padding-right: var(--space-8);
  color: var(--fg-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
  max-width: 68ch;
}
.accordion__body p + p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Formulieren
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-5); }
.form__grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 8px; }
.field__label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--fg); }
.field__label span { color: var(--fg-muted); font-weight: 400; }
.field__control {
  width: 100%;
  padding: 14px 16px;
  /* Invoervelden blijven bewust dekkender dan de kaarten: een bewegend veld
     onder je eigen tekst tijdens het typen is onrustig. */
  background: rgba(8, 15, 31, 0.62);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--fg);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field__control::placeholder { color: color-mix(in srgb, var(--fg-muted) 75%, transparent); }
.field__control:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.field__control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.field__control { min-height: 132px; resize: vertical; line-height: 1.6; }
select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2363676F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.field__hint { font-size: 0.8125rem; color: var(--fg-muted); }
.field__error { font-size: 0.8125rem; color: var(--error); display: none; }
.field.has-error .field__control { border-color: var(--error); }
.field.has-error .field__error { display: block; }

.choice-grid { display: grid; gap: 10px; }
@media (min-width: 620px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: rgba(8, 15, 31, 0.52);
  cursor: pointer;
  font-size: var(--fs-small);
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.choice:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__mark {
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.choice__mark::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-micro) var(--ease-out);
}
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:has(input:checked) .choice__mark { border-color: var(--accent); }
.choice:has(input:checked) .choice__mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.55; }
.consent input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__note { font-size: 0.8125rem; color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   Browserframe (interface-objecten)
   -------------------------------------------------------------------------- */

.browser {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11, 12, 14, 0.14);
  box-shadow: var(--shadow-lift);
  transform-style: preserve-3d;
}
.tone-ink .browser { border-color: rgba(243, 241, 236, 0.14); box-shadow: var(--shadow-lift-ink); }

.browser__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #F2F1EE;
  border-bottom: 1px solid rgba(11, 12, 14, 0.09);
}
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11,12,14,.16); }
.browser__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 12, 14, 0.05);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: rgba(11, 12, 14, 0.5);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser__viewport { position: relative; overflow: hidden; }

/* Donkere variant van het frame */
.browser--dark { background: #0E1013; border-color: rgba(243,241,236,.14); }
.browser--dark .browser__bar { background: #17191D; border-bottom-color: rgba(243,241,236,.08); }
.browser--dark .browser__dots i { background: rgba(243,241,236,.2); }
.browser--dark .browser__url { background: rgba(243,241,236,.07); color: rgba(243,241,236,.45); }

/* --------------------------------------------------------------------------
   Statistiek / feiten zonder verzonnen cijfers
   -------------------------------------------------------------------------- */

.factlist { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.factlist__item {
  display: grid;
  gap: 6px;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .factlist__item { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: baseline; }
}
.factlist__term { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.factlist__desc { font-size: var(--fs-small); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Cursor (desktop, fijne pointer)
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.4);
  transition: opacity 240ms var(--ease-out), transform 180ms var(--ease-out), background-color 240ms var(--ease-out);
  mix-blend-mode: normal;
}
.cursor.is-active { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
.cursor.is-hover { transform: translate3d(var(--x), var(--y), 0) scale(1.7); background: var(--accent-soft); }
@media (hover: none), (max-width: 1023px) { .cursor { display: none; } }

/* Vergelijkingsslider: de duim is onzichtbaar, de handgreep tekenen we zelf. */
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; }
.compare__range::-moz-range-thumb { width: 0; height: 0; border: 0; background: transparent; }
.compare__range::-webkit-slider-runnable-track { background: transparent; }

/* --------------------------------------------------------------------------
   Mobiele conversiebalk
   Verschijnt zodra de held voorbij is en blijft daarna staan. Boven 1024px
   neemt de header-CTA het over en is deze balk overbodig.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  padding: 10px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 10px);
  /* Zelfde reden als bij de header: geen filter over een bewegend veld. */
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border-top: 1px solid var(--border-inv-soft);
  transform: translateY(100%);
  transition: transform 380ms var(--ease-out);
}
.dock.is-on { transform: none; }
.dock__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 var(--space-5);
  border-radius: var(--r-pill);
  background: var(--bone);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dock__link:active { transform: scale(0.985); }
body.is-locked .dock { transform: translateY(100%); }

/* Ruimte onder de footer zodat de balk de laatste regel niet afdekt. */
@media (max-width: 1023px) {
  .footer { padding-bottom: 78px; }
}
@media (min-width: 1024px) {
  .dock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}