/* ============================================================
   PaintIQ — publieke website (preview: website/nieuw/)
   ------------------------------------------------------------
   Huisstijl gelijk aan de ingelogde omgeving (docs/huisstijl-app.md
   + frontend/src/app/globals.css @theme). Tokens hieronder zijn
   letterlijk overgenomen: night-*, aurora-*, slate-*, --radius-kaart,
   --radius-knop, --schaduw-kaart, --snede-hoek (35°).

   Rolverdeling (huisstijl §3):
     night  = structuur (nav, donkere banden, koppen, footer)
     aurora = waar je bent en wat er nu telt: de hoofdknop, de snede,
              de actieve tab. Hoogstens één aurora-vlak per sectie.
     slate  = al het andere.
   VERBODEN: witte tekst op aurora-500 (2,1:1). Daarom heeft élke
   aurora-knop night-900-tekst (~7,4:1).

   Geen externe fonts of scripts (CSP: alleen 'self').
   ============================================================ */

/* Outfit: geometrisch en rond, in dezelfde familie als het logo-lettertype
   maar rustiger van vorm, dus leesbaar in een hele kop. Alleen voor koppen;
   lopende tekst blijft Inter. Zelf gehost — de CSP staat geen externe fonts
   toe. Eén variabel bestand dekt alle gewichten. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-variabel.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

:root {
  /* --- night (identiek aan @theme) --- */
  --night-50:  #f2f6fa;
  --night-100: #e2eaf2;
  --night-200: #c4d3e4;
  --night-300: #93aecb;
  --night-400: #5c82ab;
  --night-500: #34608f;
  --night-600: #1f4a76;
  --night-700: #163a5e;
  --night-800: #0f3460;
  --night-900: #0a2540;
  --night-950: #061a2e;

  /* --- aurora (identiek aan @theme) --- */
  --aurora-50:  #eafaf7;
  --aurora-100: #cdf3ec;
  --aurora-200: #b3f0e8;
  --aurora-300: #80e6d9;
  --aurora-400: #4ddcca;
  --aurora-500: #00c8b4;
  --aurora-600: #00a898;
  --aurora-700: #009988;
  --aurora-800: #007a6d;
  --aurora-900: #065f56;

  /* --- slate (identiek aan @theme) --- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* --- vorm (identiek aan @theme) --- */
  --radius-kaart: 14px;
  --radius-knop: 10px;
  --schaduw-kaart: 0 1px 2px rgb(10 37 64 / 0.06), 0 8px 24px -12px rgb(10 37 64 / 0.18);
  --snede-hoek: 35deg;

  /* Snede als verhouding: tan(35°) ≈ 0,7002 — de N-snede uit het merk
     (19/27 = 0,7037). Gebruikt in clip-path's, waar geen graden kunnen. */
  --snede: 0.7002;
  /* Achtergrondverlopen onder dezelfde hoek: 90° + 35° = 125°, dalend
     naar rechts, precies de snede van het N-merk. */
  --snede-grad: 125deg;

  /* --- afgeleide site-rollen --- */
  --ink: var(--slate-900);
  --ink-2: var(--slate-800);
  --muted: var(--slate-600);
  --muted-2: var(--slate-500);
  --line: var(--slate-200);
  --line-2: var(--slate-300);
  --paper: #ffffff;
  --paper-2: var(--slate-50);
  --paper-warm: #f7f4ee;          /* de ene warme tint (§11.2) */
  --on-night: #e6eef7;
  --on-night-muted: #a9bbd1;

  --schaduw-md: 0 10px 30px -12px rgb(10 37 64 / 0.25);
  --schaduw-lg: 0 30px 60px -24px rgb(10 37 64 / 0.45);

  --font-head: "Outfit", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.2rem;
  --fs-3: 1.375rem;
  --fs-4: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-5: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);

  --wrap: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --nav-h: 76px;
}

* { box-sizing: border-box; }
/* Panelen krijgen een display-waarde (grid/flex); die zou de UA-regel
   [hidden]{display:none} verslaan. Daarom hier expliciet. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (max-width: 720px) { body { font-size: 16px; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--aurora-800); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--night-900);
  text-wrap: balance;
}
h1 { font-size: var(--fs-5); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
p { margin: 0 0 1em; }
.lede { font-size: var(--fs-2); color: var(--muted); max-width: 40rem; }
.small { font-size: var(--fs-0); }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--aurora-700);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--night-900); color: #fff; padding: 10px 14px; border-radius: var(--radius-knop);
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.section-head { max-width: 46rem; margin-bottom: clamp(30px, 5vw, 54px); }
.section-head .lede { margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-0);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aurora-800);
  margin-bottom: 14px;
}
.on-night { color: var(--on-night); }
.on-night h2, .on-night h3 { color: #fff; }
.on-night .lede { color: var(--on-night); }
.on-night .eyebrow { color: var(--aurora-500); }

/* ---------- Nexorah-motief: snede en rib ---------- */
/* Zwevend blok. Dit was een getinte pil met een bolletje ervoor - het
   patroon dat op elke gegenereerde pagina staat. Nu een echt vlak dat op de
   donkere hero ligt: dekkend, strakke hoeken, en de 35 graden-snede
   rechtsonder uit het N-logo als motief.

   drop-shadow en niet box-shadow: een box-shadow wordt door de clip-path
   weggeknipt, een filter volgt juist de geknipte vorm. Daardoor valt de
   schaduw ook langs de schuine hoek. */
.badge {
  --cut-w: 20px;
  display: inline-block;
  /* Rechts extra ruimte: de snede eet daar een hoek weg, en zonder die
     ruimte loopt de laatste letter tegen de schuine kant aan. */
  padding: 10px 26px 11px 18px;
  margin-bottom: 20px;
  background: var(--paper);
  color: var(--night-900);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-0);
  line-height: 1.25;
  letter-spacing: -0.005em;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-w) * var(--snede)), calc(100% - var(--cut-w)) 100%, 0 100%);
  filter: drop-shadow(0 16px 26px rgb(0 0 0 / 0.55));
}
/* Op een licht vlak draagt een witte kaart niet; daar wordt het blok night. */
.badge.light {
  background: var(--night-900); color: #fff;
  filter: drop-shadow(0 12px 20px rgb(10 37 64 / 0.28));
}

/* Rib: dunne aurora-lijn onder de hoek van de N-rib */
.rib {
  position: absolute;
  width: 2px;
  height: clamp(160px, 28vw, 420px);
  background: linear-gradient(to bottom, transparent, var(--aurora-500) 35%, var(--aurora-500) 65%, transparent);
  transform: rotate(-36deg);
  transform-origin: center;
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- Knoppen ----------
   .btn-accent  aurora-500 met night-900-tekst  → de hoofdactie
   .btn-outline transparant met witte rand      → op night
   .btn-outline-dark                            → op licht
   .btn-night   night-900 met witte tekst       → in witte kaarten
   Minimale hoogte 44px, net als in het portaal.               */
.btn {
  --cut-w: 12px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 13px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.15;
  border-radius: var(--radius-knop);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  /* snede-accent dat bij hover rechtsonder binnenschuift */
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 22px; height: calc(22px * var(--snede));
  background: var(--night-900);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: translate(100%, 100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: -1;
}
.btn:hover::after, .btn:focus-visible::after { transform: translate(0, 0); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 16px 30px; font-size: 1.125rem; }
.btn-sm { padding: 10px 16px; font-size: 0.95rem; min-height: 40px; }
.btn-block { width: 100%; }

.btn-accent { background: var(--aurora-500); color: var(--night-900); box-shadow: 0 8px 22px -12px rgb(0 200 180 / 0.9); }
.btn-accent:hover { background: var(--aurora-400); }
.btn-accent::after { background: var(--night-900); }

.btn-outline { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.55); }
.btn-outline:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }
.btn-outline::after { background: rgb(255 255 255 / 0.9); }

.btn-outline-dark { background: transparent; color: var(--night-900); border-color: var(--night-900); }
.btn-outline-dark:hover { background: rgb(10 37 64 / 0.06); }
.btn-outline-dark::after { background: var(--aurora-500); }

.btn-night { background: var(--night-900); color: #fff; }
.btn-night:hover { background: var(--night-800); }
.btn-night::after { background: var(--aurora-500); }

.btn[disabled] { opacity: 0.55; cursor: wait; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-note { font-size: var(--fs-0); color: var(--muted-2); margin: 12px 0 0; }
.on-night .cta-note { color: var(--on-night-muted); }
.cta-note b { font-weight: 600; color: inherit; }

/* ---------- Navigatie ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.is-solid {
  background: rgb(10 37 64 / 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { color: #fff; font-weight: 500; font-size: 0.95rem; padding: 8px 11px; border-radius: 8px; }
.nav-links a:hover { background: rgb(255 255 255 / 0.1); text-decoration: none; }
.nav-links .btn { margin-left: 6px; }
.nav-links a.btn-accent { color: var(--night-900); }  /* wint van .nav-links a */
.nav-links .btn-outline { padding: 9px 14px; }
.nav-toggle {
  display: none; background: transparent; border: 0; color: #fff;
  padding: 8px; cursor: pointer; border-radius: 8px; min-height: 44px;
}
.nav-toggle svg { width: 26px; height: 26px; }
@media (max-width: 1140px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gutter) 18px;
    background: var(--night-900);
    box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6);
  }
  .nav.open .nav-links { display: flex; }
  .nav.open { background: var(--night-900); }
  .nav-links a { padding: 12px 10px; font-size: 1.05rem; }
  .nav-links .btn { margin: 6px 0 0; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;   /* schermvullend: de aftopping op 780px liet op een groter scherm ruimte onder de hero */
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 92px;
  background: var(--night-900);
  color: var(--on-night);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -3; }
.hero-bg .shot { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 18%;
  opacity: 0.9;
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.5%, -1.5%); }
}
/* Scrim 1: night → aurora-tint onder de snede-hoek (35° t.o.v. horizontaal) */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(var(--snede-grad),
    var(--night-900) 0%,
    var(--night-900) 34%,
    rgb(10 37 64 / 0.86) 52%,
    rgb(10 37 64 / 0.42) 74%,
    rgb(0 200 180 / 0.20) 100%);
}
/* Scrim 2: harde snede achter de tekst, met een dunne aurora-lijn op de snede */
.hero-snede { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--snede-grad), rgb(10 37 64 / 0.55) 0 46%, transparent calc(46% + 1px));
}
.hero-snede::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(var(--snede-grad), transparent 0 calc(46% - 1px), var(--aurora-500) 46%, transparent calc(46% + 2px));
  opacity: 0.55;
}
/* Eén kolom: het beeld naast de hero is eruit (8 sep). De tekst houdt een
   eigen leesbreedte, want over de volle wrap uitlopen leest niet. */
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-text { max-width: 46rem; }
/* Iets kleiner dan de h1 elders: de kop is twee volle zinnen, en op de
   standaardmaat brak "PaintIQ ziet een offerte." af met "offerte." alleen
   op de laatste regel. Zo past elke zin op een regel. */
.hero h1 {
  color: #fff; margin-bottom: 20px;
  font-size: clamp(2.4rem, 1.2rem + 3.1vw, 4.1rem);
}
.hero h1 em { font-style: normal; color: var(--aurora-400); }
.hero .lede { color: var(--on-night); max-width: 36rem; margin-bottom: 28px; }
.hero-phone { position: relative; justify-self: end; }
.hero-phone .caption {
  position: absolute; left: -26px; bottom: 34px;
  background: #fff; color: var(--night-900);
  padding: 10px 14px; border-radius: var(--radius-knop);
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
  box-shadow: var(--schaduw-md);
  --cut-w: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-w) * var(--snede)), calc(100% - var(--cut-w)) 100%, 0 100%);
}
.hero-phone .caption b { color: var(--aurora-800); font-weight: 700; }
@media (max-width: 980px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 68px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-phone { display: none; }
  /* Mobiel: het scherm blijft achtergrond, maar de tekst moet overal
     leesbaar zijn — dus een extra egale night-wash over de diagonaal heen. */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgb(10 37 64 / 0.90) 0%, rgb(10 37 64 / 0.86) 60%, rgb(10 37 64 / 0.94) 100%),
      linear-gradient(160deg, var(--night-900) 0 40%, rgb(10 37 64 / 0.7) 74%, rgb(0 200 180 / 0.22) 100%);
  }
  .hero-snede { display: none; }
  .hero h1 { font-size: clamp(2.05rem, 9vw, 2.7rem); }
  .hero-bg img { object-position: 62% 0; }
}

/* ---------- Vertrouwensstrook ---------- */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust ul {
  list-style: none; margin: 0; padding: 20px 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 22px;
}
.trust li {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 500; font-size: 0.92rem; line-height: 1.35; color: var(--ink-2);
}
.trust svg { width: 22px; height: 22px; flex: none; color: var(--aurora-800); margin-top: 1px; }
@media (max-width: 1100px) { .trust ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .trust ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .trust ul { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- Browserbalk en beeldvlak ---------- */
.frame-bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: var(--night-700);
  color: rgb(255 255 255 / 0.6);
  font-size: 0.75rem;
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.28); }
.frame-bar span { margin-left: 8px; font-family: var(--font-body); }
.shot { position: relative; overflow: hidden; background: var(--night-100); }
.shot-tall { aspect-ratio: 1170 / 2532; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- Voor wie / prijzen ---------- */
.pricing { background: var(--paper); }
.pricing-note { margin-top: 18px; color: var(--muted-2); font-size: var(--fs-0); }
.belofte {
  background: var(--night-50); border: 1px solid var(--night-100);
  border-radius: var(--radius-kaart); padding: 24px;
  box-shadow: var(--schaduw-kaart);
}
.belofte h3 { font-size: var(--fs-3); margin-bottom: 10px; }
.belofte ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.belofte li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; color: var(--ink-2); }
.belofte li svg { width: 19px; height: 19px; flex: none; color: var(--aurora-800); margin-top: 4px; }
.belofte p { margin: 0; font-size: var(--fs-0); color: var(--muted-2); }
/* ---------- Vergelijking ---------- */
.compare { background: var(--night-50); }
.cmp-block + .cmp-block { margin-top: clamp(36px, 6vw, 64px); }
.cmp-block h3 { font-size: var(--fs-3); margin-bottom: 6px; }
.cmp-block .cmp-lede { color: var(--muted); max-width: 46rem; margin-bottom: 18px; }
.cmp {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-kaart); overflow: hidden;
  box-shadow: var(--schaduw-kaart);
  font-size: 0.96rem;
}
.cmp th, .cmp td { text-align: left; padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th {
  background: var(--night-900); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  border-bottom: 0;
}
.cmp thead th.is-pq { color: var(--aurora-500); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 600; color: var(--night-900); width: 24%; background: var(--night-50); }
.cmp td.other { color: var(--muted); width: 38%; }
.cmp td.pq { color: var(--ink-2); width: 38%; background: var(--aurora-50); }
.cmp td.pq strong { color: var(--night-900); }
.cmp-note {
  margin-top: 14px; font-size: 0.95rem; color: var(--muted);
  border-left: 3px solid var(--aurora-500); padding: 6px 0 6px 14px;
}
@media (max-width: 760px) {
  .cmp, .cmp tbody, .cmp tr, .cmp td, .cmp th { display: block; }
  .cmp thead { display: none; }
  .cmp { box-shadow: none; border: 0; background: transparent; }
  .cmp tbody tr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
    margin-bottom: 12px; overflow: hidden; box-shadow: var(--schaduw-kaart);
  }
  /* Kolombreedtes uit de tabelweergave expliciet uitzetten (hogere
     specificiteit dan .cmp td), anders blijven de kaarten smal. */
  .cmp tbody th, .cmp td, .cmp td.other, .cmp td.pq { width: auto; }
  .cmp tbody th { font-size: 1rem; padding-bottom: 10px; }
  .cmp td { border-bottom: 1px solid var(--line); }
  .cmp td::before {
    content: attr(data-label);
    display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; color: var(--muted-2); margin-bottom: 3px;
  }
  .cmp td.pq::before { color: var(--aurora-800); }
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper-2); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: start; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; box-shadow: var(--schaduw-kaart); }
.faq details[open] { border-color: var(--aurora-500); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 32px 16px 0; position: relative; min-height: 44px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3;
  color: var(--night-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 2px; top: 20px;
  width: 12px; height: 12px;
  border-right: 2px solid var(--aurora-800); border-bottom: 2px solid var(--aurora-800);
  transform: rotate(45deg); transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq details p { color: var(--muted); margin: 0 0 18px; font-size: 0.98rem; }
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Kaarten in een donkere band (demo-pagina) ---------- */
.band-head { margin-bottom: clamp(28px, 4vw, 46px); max-width: 44rem; }
.kaart {
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 28px;
  box-shadow: var(--schaduw-lg);
}
/* De kaarten staan ín de night-band; .on-night h3 zou ze wit maken op wit. */
.kaart h3 { font-size: var(--fs-3); margin-bottom: 4px; color: var(--night-900); }
.kaart .sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 18px; }
.kaart label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); margin: 12px 0 5px; }
.kaart input, .kaart textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem;
  border: 1px solid var(--line-2); border-radius: 8px; outline: none;
  background: #fff; color: var(--ink);
}
.kaart input:focus, .kaart textarea:focus { border-color: var(--aurora-700); box-shadow: 0 0 0 3px var(--aurora-100); }
.kaart-logo { height: 30px; width: auto; margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-actions { margin-top: 18px; }
.form-msg { margin: 12px 0 0; font-size: 0.95rem; min-height: 1.4em; }
.form-msg.ok { color: #15803d; font-weight: 600; }
.form-msg.err { color: #b91c1c; }
.try-card { display: flex; flex-direction: column; gap: 14px; }
.try-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.try-card li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 0.97rem; }
.try-card li svg { width: 19px; height: 19px; flex: none; color: var(--aurora-800); margin-top: 4px; }
.try-card .login { font-size: 0.95rem; color: var(--muted); margin: 0; }
/* ---------- Footer ---------- */
.footer { background: var(--night-950); color: var(--on-night-muted); padding: 56px 0 28px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { color: #fff; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { color: var(--on-night); }
.footer a:hover { color: var(--aurora-400); }
.footer-logo { height: 34px; width: auto; }
.footer .tag { color: var(--on-night); margin: 16px 0 0; max-width: 24rem; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.1);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: center;
}
.footer-bottom p { margin: 0; }
.nexorah { display: inline-flex; align-items: center; gap: 10px; color: var(--on-night); }
.nexorah img { height: 20px; width: auto; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Sticky CTA-balk (mobiel) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; align-items: center; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgb(10 37 64 / 0.96); backdrop-filter: blur(8px);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.35);
  transform: translateY(110%); transition: transform 0.3s ease;
}
.sticky-cta .btn { flex: 1; padding: 12px 10px; font-size: 1rem; }
.sticky-cta .note { font-size: 0.78rem; color: var(--on-night-muted); flex: 0 1 auto; line-height: 1.25; }
.sticky-cta.is-visible { transform: translateY(0); }
@media (max-width: 980px) {
  .sticky-cta { display: flex; }
  body.has-sticky { padding-bottom: 76px; }
}
@media (max-width: 420px) { .sticky-cta .note { display: none; } }

/* ---------- Reveal ---------- */
/* Alleen verbergen als JS aanstaat; zonder JS blijft alles zichtbaar. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: 0.08s; }
.reveal-2 { transition-delay: 0.16s; }
.reveal-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  /* Zelfde specificiteit als .js .reveal, anders wint het verbergen. */
  .js .reveal, .reveal { opacity: 1; transform: none; }
  .hero-bg img { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   MULTIPAGER — gedeelde onderdelen (nav-markering, paginakop,
   schermframes, sectiepatronen). Toegevoegd bij de omzetting van
   een lange pagina naar losse pagina's.
   ============================================================ */

/* ---------- Actieve pagina in de navigatie (aurora-snede) ---------- */
.nav-links a[aria-current="page"] { position: relative; color: #fff; }
.nav-links .btn[aria-current="page"] { border-color: #fff; background: rgb(255 255 255 / 0.12); }
.nav-links a[aria-current="page"]:not(.btn)::after {
  content: "";
  position: absolute; left: 11px; right: 11px; bottom: 3px;
  height: 3px; background: var(--aurora-500);
  --cut-w: 7px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-w)) 100%, 0 100%);
}
@media (max-width: 1140px) {
  .nav-links a[aria-current="page"]:not(.btn)::after { left: 10px; right: auto; width: 28px; bottom: 6px; }
}

/* ---------- Paginakop (alle pagina's behalve de home) ---------- */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--night-900); color: var(--on-night);
  padding: calc(var(--nav-h) + clamp(44px, 6vw, 74px)) 0 clamp(46px, 6vw, 78px);
}
.phero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--snede-grad),
    var(--night-900) 0 52%,
    rgb(10 37 64 / 0.9) 68%,
    rgb(0 200 180 / 0.18) 100%);
}
.phero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--snede-grad), transparent 0 calc(58% - 1px), var(--aurora-500) 58%, transparent calc(58% + 2px));
  opacity: 0.5;
}
.phero .rib { right: 8%; top: -30px; height: clamp(180px, 22vw, 320px); }
.phero-inner { max-width: 48rem; }
.phero h1 { color: #fff; font-size: clamp(2.05rem, 1.3rem + 2.4vw, 3.3rem); margin-bottom: 16px; }
.phero h1 em { font-style: normal; color: var(--aurora-400); }
.phero .lede { color: var(--on-night); margin-bottom: 0; max-width: 42rem; }
.phero .cta-row { margin-top: 26px; }

/* ---------- Schermframes: recht, begrensd, volledig in beeld ----------
   Elk frame krijgt een expliciete maximale breedte; de hoogte volgt uit
   de verhouding van het beeld (aspect-ratio op .shot). Geen kanteling,
   geen frame dat half buiten de sectie valt.                          */
.shotbox { margin: 0; width: 100%; }
.frame { margin: 0; position: relative; width: 100%; }
.frame-center { margin-inline: auto; }
.frame-w-xl { max-width: 1040px; }
.frame-w-lg { max-width: 860px; }
.frame-w-md { max-width: 620px; }
.frame-w-sm { max-width: 440px; }
.frame-w-step { max-width: 480px; }
.frame-w-phone { max-width: 248px; }

.frame-browser {
  background: var(--night-800);
  border: 1px solid var(--night-600);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-md);
  overflow: hidden;
}
.frame-phone {
  background: var(--night-800);
  border: 1px solid var(--night-600);
  border-radius: 28px;
  padding: 8px;
  box-shadow: var(--schaduw-md);
}
/* Uitsnede van een paneel binnen een scherm: geen browserbalk, want je ziet
   geen heel venster. Lichte rand zodat het niet als eigen kaart oogt.     */
.frame-plain {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-md);
  overflow: hidden;
}
.frame-phone .shot { border-radius: 21px; }
.on-night .frame-browser, .on-night .frame-phone { border-color: rgb(255 255 255 / 0.16); box-shadow: var(--schaduw-lg); }

/* Onderschrift: zegt wat je ziet, en of het de bovenkant van het scherm is */
.frame-cap {
  margin: 10px 0 0; font-size: var(--fs-0); color: var(--muted-2);
  max-width: 34rem;
}
.on-night .frame-cap { color: var(--on-night-muted); }

/* Beeldvlak. shot-full = het hele scherm (2880x1800).
   crop-* = uitsnede van de bovenkant, afgesneden in witruimte.        */
.shot-full { aspect-ratio: 2880 / 1800; }
.crop-dashboard        { aspect-ratio: 2880 / 1515; }  /* t/m de pijplijn-kaart */
.crop-bibliotheek      { aspect-ratio: 2880 / 880;  }  /* t/m de sjablonen-kaart */
.crop-klanten          { aspect-ratio: 2880 / 1190; }  /* t/m de laatste klantregel */
.crop-offertes         { aspect-ratio: 2880 / 1300; }  /* t/m de laatste offerteregel */
.crop-editor           { aspect-ratio: 2880 / 1109; }  /* t/m de kaart 'Wat voor klus is dit?' */


/* ---------- Aanvinklijst (algemeen) ---------- */
/* Vier claims op de nachtband, twee bij twee. Was een rijtje vinkjes met
   zinnen die elk pakket kan opschrijven; nu een kop die de claim maakt en
   een regel die hem met een cijfer hard maakt. */
.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
  max-width: 62rem;
}
@media (max-width: 760px) { .claims { grid-template-columns: 1fr; gap: 22px; } }
.claim h3 {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1.1rem; line-height: 1.3; margin: 0 0 7px; color: #fff;
}
.claim h3 svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--aurora-500); }
.claim p { margin: 0; color: var(--on-night); font-size: 0.98rem; line-height: 1.6; }

/* Lichte variant: dezelfde vier-redenen-kaarten, maar op een witte of
   lichtgrijze band in plaats van een donkere. */
.claims-licht .claim h3 { color: var(--ink); }
.claims-licht .claim h3 svg { color: var(--aurora-800); }
.claims-licht .claim p { color: var(--muted); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 0.98rem; }
.checks li svg { width: 19px; height: 19px; flex: none; color: var(--aurora-800); margin-top: 4px; }
.on-night .checks li { color: var(--on-night); }
.on-night .checks li svg { color: var(--aurora-500); }

/* ---------- Home: drie stappen, compact ---------- */
.hsteps { background: var(--paper-2); position: relative; overflow: clip; }
.hsteps .rib { right: 6%; top: -30px; }
.hstep {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: center;
  padding: clamp(18px, 1.8vw, 22px) 0;
}
.hstep + .hstep { border-top: 1px solid var(--line); }
.hstep-tekst { display: flex; flex-direction: column; align-items: flex-start; }
.hstep-num {
  width: 42px; height: 42px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  background: var(--night-900); color: var(--aurora-500);
  border-radius: 11px; margin-bottom: 14px;
  --cut-w: 11px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-w) * var(--snede)), calc(100% - var(--cut-w)) 100%, 0 100%);
}
.hstep h3 { font-size: var(--fs-3); margin-bottom: 8px; }
.hstep p { color: var(--muted); margin-bottom: 0; }
.hsteps-slot {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  color: var(--night-900);
}
.tweewegen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(16px, 2vw, 22px);
}
@media (max-width: 720px) { .tweewegen { grid-template-columns: 1fr; } }
.tweewegen > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  padding: clamp(16px, 2vw, 22px);
}
.tweewegen h3 { font-size: 1.05rem; margin: 0 0 6px; }
.tweewegen p { margin: 0; color: var(--muted); font-size: 0.97rem; line-height: 1.55; }

.hsteps-cta { margin-top: clamp(26px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hsteps-cta .cta-note { margin: 0; }
@media (max-width: 900px) {
  .hstep { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Home: drie functieblokken ---------- */
.fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.fcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  padding: 26px 24px 22px; box-shadow: var(--schaduw-kaart);
  display: flex; flex-direction: column;
}
.fcard-ic {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--aurora-50); color: var(--aurora-800);
  border: 1px solid var(--aurora-200); border-radius: 11px;
}
.fcard-ic svg { width: 23px; height: 23px; }
.fcard h3 { font-size: 1.2rem; margin-bottom: 6px; }
.fcard p { color: var(--muted); font-size: 0.98rem; margin-bottom: 16px; }
.fcard .meer { margin-top: auto; font-weight: 600; color: var(--aurora-800); }
.fcard .meer::after { content: " \2192"; }
@media (max-width: 900px) { .fcards { grid-template-columns: 1fr; } }

/* ---------- Prijskaarten naast elkaar ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); align-items: stretch; }
.plan-card {
  --cut-w: 26px;
  background: var(--night-900); color: var(--on-night);
  border-radius: 16px; padding: 26px 24px;
  clip-path: polygon(var(--cut-w) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut-w) * var(--snede)));
  display: flex; flex-direction: column;
}
.plan-card .plan { font-family: var(--font-head); font-weight: 600; color: var(--aurora-500); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.plan-card .amount { font-family: var(--font-head); font-weight: 800; font-size: 2.8rem; line-height: 1; color: #fff; margin: 6px 0 2px; }
.plan-card .amount small { font-family: var(--font-body); font-weight: 500; font-size: 0.85rem; color: var(--on-night-muted); margin-left: 6px; }
.plan-card .users { font-size: 0.95rem; color: var(--on-night-muted); margin-bottom: 16px; }
.plan-card .wie { color: var(--on-night-muted); font-size: 0.95rem; margin-bottom: 16px; }
.plan-card .checks { margin-bottom: 20px; font-size: 0.95rem; }
.plan-card .checks li { color: var(--on-night); }
.plan-card .checks li svg { color: var(--aurora-500); }
.plan-card .btn { width: 100%; margin-top: auto; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Functiepagina: sectiepatroon ---------- */
.feat + .feat { border-top: 1px solid var(--line); }
.feat-main {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.feat-main h3 { font-size: var(--fs-3); margin-bottom: 10px; }
.feat-main p { color: var(--muted); }
.feat-wide { display: flex; flex-direction: column; align-items: center; text-align: center; }
.feat-wide .frame-cap { text-align: center; max-width: 44rem; }
.feat-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); }
.feat-mini h3 { font-size: 1.15rem; margin-bottom: 6px; }
.feat-mini p { color: var(--muted); font-size: 0.96rem; margin-bottom: 0; }
.feat-mini .shotbox { margin-bottom: 14px; }
@media (max-width: 900px) {
  .feat-main { grid-template-columns: 1fr; }
  .feat-mini { grid-template-columns: 1fr; }
}
/* Laptop en telefoon naast elkaar: twee kolommen, geen overlap. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 2.5vw, 30px); align-items: end; }
@media (max-width: 620px) { .duo { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Afsluitband (alle pagina's) ---------- */
.slot { background: var(--paper-2); }
.slot-band {
  background: var(--night-900); color: var(--on-night);
  position: relative; overflow: hidden;
  --cut-w: clamp(80px, 14vw, 200px);
  clip-path: polygon(0 calc(var(--cut-w) * var(--snede)), var(--cut-w) 0, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(52px, 6vw, 82px) + var(--cut-w) * var(--snede) * 0.6);
  padding-bottom: clamp(52px, 6vw, 82px);
}
.slot-band::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--snede-grad), transparent 0 58%, rgb(0 200 180 / 0.16) 58.1%, rgb(0 200 180 / 0.02) 100%);
}
.slot-band .rib { left: 44%; top: 10%; height: 58%; opacity: 0.3; }
.slot-inner { position: relative; max-width: 46rem; }
.slot-band h2 { color: #fff; }

/* ---------- Demo-pagina ---------- */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.demo-boven { margin-top: clamp(28px, 4vw, 46px); }
.demo-verwacht h3 { font-size: var(--fs-3); }
.demo-verwacht p { color: var(--muted); }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }

/* ---------- Smalle vragenkolom (prijspagina) ---------- */
.faq-smal { max-width: 52rem; }
.faq-smal .faq-grid { grid-template-columns: 1fr; }

/* ---------- Sectievlakken ---------- */
.bg-2 { background: var(--paper-2); }

/* ---------- Wat er in de prijs zit: breed blok i.p.v. zijkolom ---------- */
.belofte-breed { position: static; max-width: 60rem; margin-inline: auto; }
.belofte-breed ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
@media (max-width: 760px) { .belofte-breed ul { grid-template-columns: 1fr; } }

.slot-inner .cta-row { margin-top: 24px; }

/* ---------- Home: compactere secties (vier schermen als richtlijn) ---------- */
.sec-tight { padding: clamp(48px, 5.2vw, 72px) 0; }

/* ---------- Correcties op donkere vlakken ----------
   Witte kaarten staan ín een night-band: daar geldt de lichte tekstkleur
   niet. En een link op night krijgt aurora-400 (ruim contrast), nooit
   aurora-800 (te donker op night). */
.kaart .checks li { color: var(--ink-2); }
.kaart .checks li svg { color: var(--aurora-800); }
.on-night a:not(.btn), .phero a:not(.btn) { color: var(--aurora-400); text-decoration: underline; }
.on-night a:not(.btn):hover, .phero a:not(.btn):hover { color: var(--aurora-300); }
.kaart a:not(.btn) { color: var(--aurora-800); text-decoration: none; }
.kaart a:not(.btn):hover { color: var(--aurora-900); text-decoration: underline; }

/* ---------- Juridische pagina's (privacy, voorwaarden, verwerkersovereenkomst)
   Stonden tot 6 sep 2026 nog op de oude marketingsite (eigen stylesheet, oude
   navigatie met dode ankers, horizontale schuif op 390 px). Nu dezelfde schil
   als de rest van de site; hieronder alleen de leestypografie.        ---- */
.legal-wrap { max-width: 52rem; }
.legal-body h2 {
  font-size: var(--fs-3); margin: 40px 0 12px; color: var(--night-900);
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; color: var(--ink); margin: 24px 0 8px; }
.legal-body p, .legal-body li { color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: 8px 0 16px; }
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--aurora-800); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--aurora-900); }

.legal-meta {
  background: var(--night-50); border-left: 3px solid var(--aurora-600);
  border-radius: var(--radius-knop); padding: 14px 18px; margin: 0 0 24px;
  font-size: var(--fs-0); color: var(--muted); line-height: 1.65;
}
.legal-meta strong { color: var(--ink); }

.toc {
  background: var(--night-50); border: 1px solid var(--night-100);
  border-radius: var(--radius-kaart); padding: 22px 26px; margin-bottom: 32px;
}
.toc h3 {
  margin: 0 0 10px; font-size: 0.85rem; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.toc ol { margin: 0; padding-left: 22px; }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: 40px; } }
.toc ol li { margin-bottom: 4px; font-size: 0.95rem; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--aurora-800); text-decoration: underline; }

/* Brede tabel schuift binnen haar eigen kader; de pagina zelf nooit. */
.tabel-scroll { overflow-x: auto; margin: 8px 0 20px; -webkit-overflow-scrolling: touch; }
.legal-table {
  width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-kaart); overflow: hidden; font-size: 0.95rem;
}
.legal-table th, .legal-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--ink-2);
}
.legal-table thead th { background: var(--night-50); color: var(--ink); font-weight: 600; }
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }


/* Noot onder een juridische tabel: iets ingetogener dan de lopende tekst,
   met een rustige rand zodat hij bij de tabel hoort en niet als nieuwe alinea
   leest. */
.legal-noot {
  margin-top: 6mm;
  padding: 4mm 5mm;
  background: var(--zacht, #f8fafc);
  border-left: 3px solid var(--aurora, #00C8B4);
  border-radius: 0 3px 3px 0;
  font-size: 0.94rem;
}


/* ============================================================
   RONDE 8 SEPTEMBER 2026 — omzetting naar de nieuwe structuur
   (home sumier, functies als tegels, "wat maakt PaintIQ anders",
   "over ons"). Alles hieronder is nieuw of vervangt oudere regels
   die erboven staan; de tokens en de rolverdeling zijn ongewijzigd.
   ============================================================ */

/* ---------- 1. Het merk in kop en voet, groter ----------
   Rico's eerste punt. Het logobestand is 733x230 maar de inkt zit
   tussen (32,27) en (707,169): ruim een derde van het bestand is lege
   marge. Door die marge weg te snijden staat het merk ongeveer anderhalf
   keer zo groot in dezelfde balk. De payoff-regel blijft staan, maar is
   bewust decoratief: leesbaar zou een logo van ongeveer 160px hoog
   vragen en dat past in geen enkele kop. Daarom staat de payoff als
   echte tekst in de voettekst.                                       */
.merk {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 687 / 154;
}
.merk img {
  position: absolute; max-width: none; height: auto;
  width: 106.7%;      /* 100 / (687/733) */
  left: -3.79%;       /* -(26/733) / (687/733) */
  top: -13.64%;       /* -(21/230) / (154/230) */
}
.brand .merk { height: 66px; }
@media (max-width: 1140px) { .brand .merk { height: 57px; } }
@media (max-width: 400px)  { .brand .merk { height: 51px; } }

.footer .merk { height: 40px; }
.footer .payoff {
  margin: 10px 0 0; color: var(--aurora-400);
  font-family: var(--font-head); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.nexorah .merk { height: 22px; }
.kaart-merk { height: 34px; margin-bottom: 14px; }

/* ---------- 2. Uitsneden: inzoomen op het deel dat ertoe doet ----------
   Rico's punt 4: de schermafbeeldingen waren onleesbaar. De bestanden
   zijn hele schermen van 2880x1800 (2x); een heel scherm in een kolom
   van 700px betekent 24% schaal en dus onleesbare tekst. Daarom snijdt
   elke plek zijn eigen venster uit het bestand, met vier getallen als
   breuk van het bestand: --cx/--cy (linkerbovenhoek) en --cw/--ch
   (breedte en hoogte). De hoogte volgt uit aspect-ratio, dus er
   verspringt niets terwijl het beeld nog laadt.                      */
.uitsnede {
  position: relative; overflow: hidden;
  background: var(--night-50);
}
.uitsnede img {
  position: absolute; max-width: none; height: auto;
  width: calc(100% / var(--cw));
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
}

/* Werkvlak van de app zonder het menu links: dat menu kost een vijfde van
   de breedte en zegt niets over de functie die eronder staat. */
.uit-app     { --cx: 0.222; --cy: 0.030; --cw: 0.756; --ch: 0.950; aspect-ratio: 2177 / 1710; }
/* Bovenkant van het werkvlak: voor schermen waar alleen de kop telt. */
.uit-app-top { --cx: 0.222; --cy: 0.030; --cw: 0.756; --ch: 0.620; aspect-ratio: 2177 / 1116; }

/* Losse vensters, per beeld uitgemeten. */
.uit-opbouw  { --cx: 0.739; --cy: 0.258; --cw: 0.240; --ch: 0.567; aspect-ratio: 691 / 1021; }
.uit-ruimtes { --cx: 0.276; --cy: 0.230; --cw: 0.604; --ch: 0.362; aspect-ratio: 1740 / 652; }
.uit-regels  { --cx: 0.276; --cy: 0.474; --cw: 0.524; --ch: 0.430; aspect-ratio: 1509 / 774; }
.uit-start   { --cx: 0.276; --cy: 0.230; --cw: 0.480; --ch: 0.290; aspect-ratio: 1382 / 522; }
.uit-hoe     { --cx: 0.276; --cy: 0.700; --cw: 0.560; --ch: 0.270; aspect-ratio: 1613 / 486; }
.uit-telefoon{ --cx: 0.000; --cy: 0.000; --cw: 1.000; --ch: 0.620; aspect-ratio: 1170 / 1570; }
/* De drie stappen op de home. Stap 1 is al bijgesneden aangeleverd, dus vol. */
.uit-opnemen { --cx: 0; --cy: 0; --cw: 1.000; --ch: 1.000; aspect-ratio: 802 / 412; }
.uit-uitwerken { --cx: 0; --cy: 0; --cw: 1.000; --ch: 1.000; aspect-ratio: 667 / 596; }
.uit-stap3   { --cx: 0.276; --cy: 0.470; --cw: 0.545; --ch: 0.430; aspect-ratio: 1570 / 774; }
/* Projecten en kennisbank: al bijgesneden aangeleverd, dus vol tonen. */
.uit-nacalculatie { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 1367 / 787; }
.uit-projectplanning { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 1482 / 670; }
.uit-planning     { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 1351 / 917; }
.uit-werkbon      { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 857 / 912; }
.uit-kennisbank   { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 867 / 605; }
.uit-telefoon-vol { --cx: 0; --cy: 0; --cw: 1; --ch: 1; aspect-ratio: 1170 / 2532; }

/* ---------- 3. Vergroten: aanwijzen op de laptop, tikken op de telefoon ----------
   Aanwijzen bestaat niet op een telefoon en daar zit de doelgroep.
   Daarom is elk beeld een link naar het bestand zelf: zonder JavaScript
   opent het plaatje gewoon, met JavaScript komt het in een venster over
   de pagina. Het label staat er altijd, niet alleen bij aanwijzen.   */
.beeldknop {
  display: block; position: relative;
  text-decoration: none !important; color: inherit;
  cursor: zoom-in;
  border-radius: var(--radius-kaart);
}
.beeldknop .frame {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  /* Groeit vanaf de onderrand: die blijft staan, dus het vergrote kader komt
     nooit over het onderschrift dat er tien pixels onder staat. */
  transform-origin: center bottom;
}
/* Tijdens het aanwijzen boven de buren, anders schuift een groter kader
   onder het beeld ernaast. */
.beeldknop:hover, .beeldknop:focus-visible { position: relative; z-index: 2; }
/* Aanwijzen maakt het HELE venster groter, alles binnen de lijst in
   verhouding mee. Eerder schoof het beeld binnen de uitsnede apart mee
   (scale 1.05): dat leest als inzoomen op een vast kader, en dat ziet er
   niet uit (Arno, 8 sep). Het beeld zelf beweegt nu niet meer. */
.beeldknop:hover .frame,
.beeldknop:focus-visible .frame {
  transform: scale(1.045);
  box-shadow: var(--schaduw-lg);
}
.beeldknop:focus-visible { outline: 2px solid var(--aurora-700); outline-offset: 4px; }
.vergroot {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: rgb(255 255 255 / 0.94); color: var(--night-900);
  font-family: var(--font-head); font-weight: 600; font-size: 0.8rem;
  border-radius: 8px; box-shadow: var(--schaduw-md);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
.vergroot svg { width: 15px; height: 15px; }
.beeldknop:hover .vergroot, .beeldknop:focus-visible .vergroot { background: var(--aurora-500); }

.beeld-dialoog {
  border: 0; padding: 0; background: transparent;
  width: min(96vw, 1480px); max-width: min(96vw, 1480px); max-height: 94vh;
}
.beeld-dialoog::backdrop { background: rgb(6 26 46 / 0.86); }
.beeld-dialoog-doos {
  background: #fff; border-radius: var(--radius-kaart);
  overflow: hidden; box-shadow: var(--schaduw-lg);
  display: flex; flex-direction: column; max-height: 94vh;
}
/* Het beeld gaat niet passend geschaald in beeld maar op leesbare grootte, met
   een schuifvlak eromheen. Op een telefoon zou "passend" juist onleesbaar zijn,
   en dat was precies de klacht. */
.beeld-dialoog-beeld {
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--night-50); min-height: 0;
}
.beeld-dialoog img { display: block; width: max(100%, 1440px); max-width: none; height: auto; }
.beeld-dialoog-voet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; border-top: 1px solid var(--line); flex: none;
}
.beeld-hint { display: none; font-size: var(--fs-0); color: var(--muted-2); }
@media (max-width: 1100px) { .beeld-hint { display: block; } }
.beeld-dialoog-voet p { margin: 0; font-size: var(--fs-0); color: var(--muted); }
.beeld-sluit {
  flex: none; min-height: 40px; padding: 8px 16px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  background: var(--night-900); color: #fff; border: 0;
  border-radius: var(--radius-knop); cursor: pointer;
}
.beeld-sluit:hover { background: var(--night-800); }

@media (prefers-reduced-motion: reduce) {
  .beeldknop:hover .frame, .beeldknop:focus-visible .frame { transform: none; }
}

/* ---------- 4. Home: hero zonder drijvende achtergrond ----------
   Rico's punt 2: het venster in de animatie stond niet uitgelijnd. De
   bewegende achtergrondfoto is eruit; wat overblijft is de night-band
   met de snede, en een recht kader met het paneel dat het verhaal
   draagt: waar het bedrag vandaan komt.                             */
.hero { min-height: 0; padding: calc(var(--nav-h) + clamp(46px, 6vw, 84px)) 0 clamp(56px, 7vw, 96px); }
.hero-bg, .hero-scrim, .hero-snede { display: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(var(--snede-grad),
    var(--night-950) 0 30%,
    var(--night-900) 52%,
    rgb(10 37 64 / 0.94) 74%,
    rgb(0 200 180 / 0.22) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--snede-grad), transparent 0 calc(56% - 1px), var(--aurora-500) 56%, transparent calc(56% + 2px));
  opacity: 0.45;
}
.hero .rib { right: 46%; top: -40px; }
.hero-inner { grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
.hero .wat {
  margin: 18px 0 14px; max-width: 34rem;
  color: var(--on-night); font-size: 1.08rem; line-height: 1.6;
}
.hero .checks { margin: 0 0 26px; max-width: 34rem; }
.hero-beeld { justify-self: end; width: 100%; max-width: 380px; }
.hero-beeld .frame-cap { color: var(--on-night-muted); max-width: none; }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-beeld { justify-self: start; max-width: 320px; }
  .hero h1 { font-size: clamp(2.05rem, 8.5vw, 2.7rem); }
}

/* ---------- 5. Home: drie stappen naast elkaar ----------
   Onder elkaar kostte dit blok drie schermhoogtes. Nu staan de stappen in
   drie kolommen naast elkaar. De tekst staat boven, het venster eronder:
   de kolommen zijn even hoog en het beeld wordt naar de onderrand geduwd,
   zodat de drie vensters onderaan gelijk uitkomen ook al is het ene beeld
   hoger dan het andere. Op een smal scherm komen ze weer onder elkaar.  */
.hsteps-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}
.hstep {
  display: flex; flex-direction: column;
  padding: 0; min-height: 0;
}
.hstep + .hstep { border-top: 0; }
.hstep-tekst { margin-bottom: clamp(16px, 1.8vw, 22px); }
.hstep h3 { font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.28rem); }
.hstep p { font-size: 0.97rem; line-height: 1.6; }
/* De drie vensters beginnen op dezelfde hoogte, vlak onder de langste
   tekst. Dat regelt subgrid: de tekst van alle drie de stappen deelt een
   rij, het beeld deelt de rij eronder. Kent een oudere browser subgrid
   niet, dan zakt het beeld naar de onderrand van de kolom; dat blijft een
   nette pagina, alleen komen de vensters dan onderaan gelijk uit.     */
.hstep-beeld { margin-top: auto; width: 100%; }
@supports (grid-template-rows: subgrid) {
  .hsteps-list { grid-template-rows: auto auto; }
  /* Eigen kolom en eigen gat opnieuw zetten: de oude regel hierboven gaf
     .hstep twee kolommen, en die komt terug zodra het weer een grid is. */
  .hstep {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid; grid-row: span 2; gap: 0;
  }
  .hstep-beeld { margin-top: 0; align-self: start; }
}
@media (max-width: 900px) {
  .hsteps-list { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
  .hstep-beeld { max-width: 520px; }
}
/* ---------- 6. De zeven functiegroepen als tegels ---------- */
.groepen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.groep {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  padding: 22px 20px 20px; box-shadow: var(--schaduw-kaart);
  color: inherit; text-decoration: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.groep:hover { transform: translateY(-2px); border-color: var(--aurora-300); box-shadow: var(--schaduw-md); }
.groep-ic {
  width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--aurora-50); color: var(--aurora-800);
  border: 1px solid var(--aurora-200); border-radius: 10px; flex: none;
}
.groep-ic svg { width: 21px; height: 21px; }
.groep h3 { font-size: 1.08rem; margin-bottom: 6px; }
.groep p { color: var(--muted); font-size: 0.94rem; margin: 0 0 14px; }
.groep .meer { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; color: var(--aurora-800); }
.groep .meer::after { content: " \2192"; }
.groep-alles { background: var(--night-900); border-color: var(--night-900); color: var(--on-night); }
.groep-alles h3 { color: #fff; }
.groep-alles p { color: var(--on-night-muted); }
.groep-alles .groep-ic { background: rgb(0 200 180 / 0.16); border-color: rgb(0 200 180 / 0.4); color: var(--aurora-400); }
.groep-alles .meer { color: var(--aurora-400); }
@media (max-width: 1080px) { .groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .groepen { grid-template-columns: 1fr; } }

/* ---------- 7. Functiepagina: groep met uitklaptegels ----------
   Elke functie is een uitklaptegel: de kop is de samenvatting, de uitleg
   en de eerlijke grens staan eronder. Gewoon HTML, dus geen JavaScript
   nodig en snel op een telefoon.                                    */
.fgroep { scroll-margin-top: calc(var(--nav-h) + 20px); }
.fgroep + .fgroep { border-top: 1px solid var(--line); }
.fgroep-kop { max-width: 46rem; margin-bottom: clamp(22px, 3vw, 34px); }
.fgroep-kop .lede { margin-bottom: 0; }
.ftegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-items: start; }
@media (max-width: 1000px) { .ftegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ftegels { grid-template-columns: 1fr; } }

.ftegel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.ftegel[open] { border-color: var(--aurora-500); }
.ftegel > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 44px 16px 18px; min-height: 44px;
}
.ftegel > summary::-webkit-details-marker { display: none; }
.ftegel > summary::after {
  content: ""; position: absolute; right: 18px; top: 23px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--aurora-800); border-bottom: 2px solid var(--aurora-800);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.ftegel[open] > summary::after { transform: rotate(-135deg); top: 28px; }
.ftegel summary b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.04rem; line-height: 1.25; color: var(--night-900); margin-bottom: 3px;
}
.ftegel summary span { display: block; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.ftegel-uit { padding: 0 18px 18px; }
.ftegel-uit p { margin: 0 0 10px; font-size: 0.95rem; color: var(--ink-2); }
.ftegel-uit p:last-child { margin-bottom: 0; }
/* Acht tegels in een raster van vier. Dicht is elke tegel een kaartje met
   een kop en een regel; dat past naast elkaar. Open past het verhaal daar
   niet in: vijf alinea's in een kolom van 300 px leest niet. Een open tegel
   pakt daarom de volle breedte (grid-column 1 / -1) en de rest schuift
   eromheen. Zo blijft het overzicht dicht en de leesbaarheid open. */
.ftegels-raster {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  /* stretch, niet start: dichte tegels in dezelfde rij worden even hoog,
     ook al is de ene samenvatting langer dan de andere. Een open tegel
     staat alleen op zijn rij, dus die rekt niets op. */
  align-items: stretch;
}
@media (max-width: 1180px) { .ftegels-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ftegels-raster { grid-template-columns: 1fr; } }
.ftegels-raster .ftegel[open] { grid-column: 1 / -1; }
.ftegels-raster .ftegel > summary { padding: 18px 44px 18px 18px; }
.ftegels-raster .ftegel > summary::after { right: 18px; top: 26px; }
.ftegels-raster .ftegel[open] > summary::after { top: 31px; }
.ftegels-raster .ftegel summary b { font-size: 1.06rem; margin-bottom: 5px; }
.ftegels-raster .ftegel summary span { font-size: 0.93rem; }
.ftegels-raster .ftegel-uit { padding: 0 18px 22px; }
.ftegels-raster .ftegel-uit p { font-size: 1rem; line-height: 1.68; margin-bottom: 14px; max-width: 62rem; }
/* De knop onder de tegels loopt met de tegelkolom mee, niet met de wrap. */


.grens {
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--night-50); border: 1px solid var(--night-100);
  border-radius: var(--radius-knop);
  font-size: 0.9rem; color: var(--muted); line-height: 1.55;
}
.grens strong { color: var(--ink); font-weight: 600; }

/* Inhoudsopgave boven de groepen */
.groeplinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.groeplinks a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 14px; border-radius: 999px;
  background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.28);
  color: #fff !important; text-decoration: none !important;
  font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
}
.groeplinks a:hover { background: rgb(255 255 255 / 0.18); border-color: #fff; }

/* ---------- 8. "Wat maakt PaintIQ anders" ---------- */
.anders-blok {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.anders-blok.omgekeerd > :first-child { order: 2; }
.anders-blok h3 { font-size: var(--fs-3); margin-bottom: 10px; }
.anders-blok p { color: var(--muted); }
.on-night .anders-blok p, .on-night .anders-blok li { color: var(--on-night); }
.anders-blok.boven { align-items: start; }
@media (max-width: 900px) {
  .anders-blok, .anders-blok.omgekeerd { grid-template-columns: 1fr; }
  .anders-blok.omgekeerd > :first-child { order: 0; }
}

.som { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.som li {
  display: block;
  background: var(--night-50); border: 1px solid var(--night-100);
  border-radius: var(--radius-knop); padding: 12px 14px;
}
.som b { font-family: var(--font-head); font-weight: 700; color: var(--night-900); font-size: 0.98rem; }
.som span { display: block; font-size: 0.94rem; color: var(--muted); margin-top: 2px; }

.nietdoen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.nietdoen div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  padding: 18px 20px; box-shadow: var(--schaduw-kaart);
}
.nietdoen h3 { font-size: 1.05rem; margin-bottom: 5px; }
.nietdoen p { margin: 0; font-size: 0.94rem; color: var(--muted); }
@media (max-width: 760px) { .nietdoen { grid-template-columns: 1fr; } }

/* ---------- 9. Over ons ---------- */
.overkolom { max-width: 44rem; }
.overkolom p { color: var(--ink-2); }
.overkolom p.groot { font-size: var(--fs-2); color: var(--ink); }
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tijdlijn li {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 22px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.tijdlijn li:last-child { border-bottom: 1px solid var(--line); }
.tijdlijn b { font-family: var(--font-head); font-weight: 700; color: var(--aurora-800); font-size: 0.95rem; letter-spacing: 0.02em; }
.tijdlijn p { margin: 0; color: var(--muted); font-size: 0.98rem; }
@media (max-width: 620px) { .tijdlijn li { grid-template-columns: 1fr; } }

.wiezijn {
  background: var(--night-50); border: 1px solid var(--night-100);
  border-radius: var(--radius-kaart); padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--schaduw-kaart); max-width: 46rem;
}
.wiezijn h3 { font-size: var(--fs-3); margin-bottom: 10px; }
.wiezijn p { color: var(--ink-2); }
.wiezijn p:last-child { margin-bottom: 0; }

/* ---------- 10. Kleine gedeelde stukjes ---------- */
.mini-prijs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.mini-prijs div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-kaart);
  padding: 20px; box-shadow: var(--schaduw-kaart);
}
.mini-prijs .plan { font-family: var(--font-head); font-weight: 600; color: var(--aurora-800); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; }
.mini-prijs .amount { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--night-900); margin: 6px 0 2px; }
.mini-prijs .amount small { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--muted-2); margin-left: 6px; }
.mini-prijs p { margin: 8px 0 0; font-size: 0.93rem; color: var(--muted); }
@media (max-width: 800px) { .mini-prijs { grid-template-columns: 1fr; } }

/* Beeld met onderschrift dat op licht staat en gecentreerd mag zijn. */
.beeld-breed { max-width: 1040px; margin-inline: auto; }
.beeld-breed .frame-cap { margin-inline: auto; text-align: center; max-width: 46rem; }

/* Kleine hulpklassen (in plaats van inline style-attributen). */
.band-night { background: var(--night-900); }
.smal { max-width: 46rem; }
.los-boven { margin-top: 26px; }


/* ---------- Functiekiezer op de home ----------
   Links de zeven functies, rechts de uitleg, en je blijft in het kader:
   geen sprong naar een andere pagina om te lezen wat iets doet. Zonder
   JavaScript staan alle panelen gewoon onder elkaar (hidden wordt dan
   nooit gezet), dus de inhoud is er altijd.                              */
.fkiezer {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  padding: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .fkiezer { grid-template-columns: 1fr; } }

.fkiezer-lijst { display: flex; flex-direction: column; gap: 2px; }
.fkies {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 14px;
  background: none; border: 0; border-radius: var(--radius-knop);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  color: var(--night-900); text-align: left; cursor: pointer;
  transition: background-color 0.15s ease;
}
.fkies:hover { background: var(--night-50); }
.fkies[aria-selected="true"] { background: var(--night-50); box-shadow: inset 0 0 0 1px var(--line); }
.fkies-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--aurora-100); color: var(--aurora-800);
}
.fkies-ic svg { width: 19px; height: 19px; }
.fkies[aria-selected="true"] .fkies-ic { background: var(--aurora-500); color: var(--night-900); }
.fkies-pijl { color: var(--muted); opacity: 0; transition: opacity 0.15s ease; }
.fkies:hover .fkies-pijl, .fkies[aria-selected="true"] .fkies-pijl { opacity: 1; }

/* night-50, dezelfde tint als de gekozen regel links: het vlak leest als
   een paneel binnen de kaart. (Hier stond var(--bg-2); dat token bestaat
   niet, dus het vlak was doorzichtig.) */
.fkiezer-vlak {
  background: var(--night-50);
  border-radius: var(--radius-kaart);
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
}
.fpaneel:focus-visible { outline: 2px solid var(--aurora-700); outline-offset: 4px; }
.fpaneel h3 { font-size: clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem); margin: 0 0 10px; }
.fpaneel > p,
.fpaneel-tekst > p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; max-width: 34rem; }
.fpaneel-punten { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.fpaneel-punten li {
  position: relative; padding-left: 26px;
  font-size: 0.98rem; line-height: 1.5; color: var(--ink);
}
.fpaneel-punten li::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--aurora-700); border-bottom: 2px solid var(--aurora-700);
  transform: rotate(-45deg);
}
.fpaneel-meer { font-weight: 600; font-size: 0.95rem; }
/* Zonder JavaScript staan alle panelen onder elkaar; dan hoort er lucht
   tussen. Het script zet .js op <html>, dus die scheiding vervalt zodra
   er echt maar een paneel tegelijk zichtbaar is. */
.fpaneel + .fpaneel { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.js .fpaneel + .fpaneel { margin-top: 0; padding-top: 0; border-top: 0; }

/* Het scherm dat bij de functie hoort, rechts naast de uitleg: een strakke
   foto zonder browserbalk of telefoonrand, met ronde hoeken en een
   schaduw. Bij aanwijzen vergroot hij licht. Twee panelen hebben nog
   geen beeld; die krijgen de klasse niet en houden dus de volle breedte. */
.fpaneel-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
}
/* Moet hierna staan en specifieker zijn: display uit een klasse wint van de
   [hidden]-regel van de browser, en dan komen de verborgen panelen alle vijf
   tegelijk in beeld. */
.fpaneel[hidden] { display: none; }
.fpaneel-tekst > p:last-child,
.fpaneel-tekst > .fpaneel-punten:last-child { margin-bottom: 0; }
.fpaneel-beeld {
  width: clamp(240px, 26vw, 340px);
  overflow: hidden;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-md);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.fpaneel-beeld.is-telefoon { width: clamp(170px, 18vw, 230px); border-radius: 21px; }
.fpaneel-beeld:hover,
.fpaneel-beeld:focus-within {
  transform: scale(1.05);
  box-shadow: var(--schaduw-lg);
}
/* Geen browserbalk, geen telefoonrand: alleen de kale foto. */
.fpaneel-beeld .frame { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.fpaneel-beeld .frame-bar { display: none; }
.fpaneel-beeld .uitsnede { border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .fpaneel-beeld { transition: none; }
}
@media (max-width: 780px) {
  /* Smal: onder de tekst, op volle breedte. */
  .fpaneel-duo { grid-template-columns: 1fr; }
  .fpaneel-beeld { width: 100%; max-width: 300px; margin: 0 auto; }
  .fpaneel-beeld.is-telefoon { max-width: 200px; }
}

/* Printen en PDF (9 okt 2026): licht en zonder menu, cookiebalk en voettekst.
   De juridische pagina's worden als PDF in de administratie bewaard; met de
   donkere kop en het menu erin was dat geen net document. */
@media print {
  .nav, .footer, .skip, .rib, .nav-toggle { display: none !important; }
  body { background: #fff !important; color: #0A2540 !important; }
  .phero, .on-night { background: #fff !important; color: #0A2540 !important; padding-top: 0 !important; padding-bottom: 12px !important; }
  .phero h1, .phero .lede, .on-night h1, .on-night h2, .on-night h3, .on-night .lede { color: #0A2540 !important; }
  .phero .badge { border: 1px solid #0A2540; }
  .phero h1 em { color: #007A6D !important; }
  .phero::before, .phero::after { display: none !important; }
  .section { padding-top: 12px !important; }
  a { color: #0A2540 !important; }
}

/* ============================================================
   Homepage licht, met achtergrondvideo's (13 okt 2026, Arno):
   zelfde opzet als monteurmax.com. Echte stockvideo's van Pexels
   (assets/video/BRONNEN.txt), geen AI-beeld. Alleen de homepage
   (body.home-licht); de andere pagina's houden de donkere kop.
   ============================================================ */
.met-video { position: relative; isolation: isolate; overflow: hidden; }
.bgvid { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.bgvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgvid-waas { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.band-donker .bgvid-waas {
  background: linear-gradient(180deg, rgb(10 37 64 / 0.86) 0%, rgb(6 26 46 / 0.92) 100%);
}
.band-licht { background: var(--slate-50); }
.band-licht .bgvid-waas {
  background: linear-gradient(180deg, rgb(248 250 252 / 0.94) 0%, rgb(248 250 252 / 0.90) 100%);
}

/* Hero: wit, de video rechts zichtbaar, links een witte waas voor de tekst. */
.hero-licht { background: #fff; color: var(--slate-700); }
.hero-licht .bgvid video { object-position: 50% 45%; }
.hero-licht .bgvid-waas {
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0.95) 30%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.06) 70%, transparent 100%);
}
.hero-licht::before { content: none; }
.hero-licht::after { opacity: 0.25; }
.hero-licht h1 { color: var(--night-900); }
.hero-licht h1 em { color: var(--aurora-800); }
.hero-licht .wat { color: var(--slate-700); }
.hero-licht .checks li { color: var(--slate-700); }
.hero-licht .checks svg { color: var(--aurora-800); }
.hero-licht .cta-note { color: var(--slate-500); }
.hero-licht .rib { opacity: 0.55; }
@media (max-width: 980px) {
  .hero-licht .bgvid-waas {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.90) 0%, rgb(255 255 255 / 0.78) 70%, rgb(255 255 255 / 0.90) 100%);
  }
}

/* Navigatie op de lichte homepage: donker logo en donkere links. */
.merk .merk-navy { display: none; }
.home-licht .nav:not(.open) .merk-wit { display: none; }
.home-licht .nav:not(.open) .merk-navy { display: block; }
.home-licht .nav:not(.open) .nav-links a:not(.btn) { color: var(--night-900); }
.home-licht .nav:not(.open) .nav-links a:not(.btn):hover { background: rgb(10 37 64 / 0.06); }
.home-licht .nav:not(.open) .nav-links .btn-outline { color: var(--night-900); border-color: var(--night-900); }
.home-licht .nav:not(.open) .nav-links .btn-outline:hover { background: rgb(10 37 64 / 0.06); }
.home-licht .nav:not(.open) .nav-toggle { color: var(--night-900); }
.home-licht .nav.is-solid:not(.open) {
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 1px 0 rgb(10 37 64 / 0.08), 0 8px 24px -16px rgb(10 37 64 / 0.25);
}

/* Het filmpje */
.promo {
  max-width: 1040px; margin: 0 auto;
  border-radius: var(--radius-kaart); overflow: hidden;
  background: var(--night-900);
  box-shadow: var(--schaduw-md);
}
.promo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Echte schermen: schuifbalk met een groot scherm per keer (13 okt 2026).
   Vegen op de telefoon, pijlen en stippen op de computer; site.js zet de
   stippen en houdt bij welk scherm in beeld is. */
.slider { max-width: 1100px; margin: 0 auto; }
.slider-baan {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-kaart);
}
.slider-baan::-webkit-scrollbar { display: none; }
.slider-baan:focus-visible { outline: 2px solid var(--aurora-700); outline-offset: 4px; }
.dia { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.dia img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
  border-radius: var(--radius-kaart); border: 1px solid var(--slate-200); box-shadow: var(--schaduw-md);
  background: var(--slate-100);
}
.dia figcaption { text-align: center; margin-top: 16px; font-size: 1.05rem; color: var(--slate-700); }
/* Stap-dia: het stapnummer, de kop en Rico's tekst onder het scherm. */
.dia-stap figcaption { text-align: left; max-width: 46rem; margin: 22px auto 0; font-size: inherit; }
.dia-stap .hstep-num { margin-bottom: 12px; }
.dia-stap h3 { font-size: var(--fs-3); margin-bottom: 8px; }
.dia-stap p { color: var(--muted); margin: 0; }
.slider-bediening { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
.slider-knop {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--night-900);
  background: #fff; color: var(--night-900); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.slider-knop svg { width: 20px; height: 20px; }
.slider-knop:hover { background: var(--night-900); color: #fff; }
.slider-knop:focus-visible { outline: 2px solid var(--aurora-700); outline-offset: 3px; }
.slider-knop[disabled] { opacity: 0.35; cursor: default; background: #fff; color: var(--night-900); }
.slider-stippen { display: flex; gap: 8px; }
.slider-stippen button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0;
  background: var(--slate-300); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease;
}
.slider-stippen button[aria-current="true"] { background: var(--aurora-700); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .slider-baan { scroll-behavior: auto; }
}