/* ==========================================================================
   Prezentix marketing site
   --------------------------------------------------------------------------
   1. Tokens          6. Trust bar        11. Pricing
   2. Reset / base    7. Problem          12. FAQ
   3. Buttons         8. Features         13. Contact
   4. Header / nav    9. How it works     14. CTA bar / footer
   5. Hero           10. Scope / security 15. Responsive
                                          16. Pilot bar / modal
                                          17. Juridische pagina's
   ========================================================================== */

/* ──────────────────────────────────────────────────────────── 0. FONTS ──
   Inter wordt lokaal geserveerd, niet van Googles CDN. Dat scheelt niet
   alleen een externe request: een <link> naar Googles font-CDN stuurt
   het IP-adres van elke bezoeker naar Google in de VS, nog voor er iets
   op het scherm staat. Zonder grondslag, en niet op te lossen met een
   cookiebanner — de fonts lokaal zetten haalt het punt gewoon weg.

   Dit is de variabele versie (100-900 in één bestand), dus de
   tussenliggende gewichten 550 en 650 die verderop gebruikt worden
   renderen nu echt in plaats van naar 500/600 te vallen.

   Twee subsets: latin dekt NL/EN/DE/FR, latin-ext wordt door de
   unicode-range alleen opgehaald als een pagina die tekens ook nodig heeft.
   Bijwerken? Zie website/README.md, sectie "Lettertypes".
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────── 1. TOKENS ── */
:root {
  /* Brand — matches the kiosk accent (#0ea5e9) */
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-300: #7dd3fc;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;

  /* Neutrals */
  --navy:    #10294a;   /* Prezentix Navy: kozijn van de deur-P en het woordmerk */
  --ink-900: #0b1220;
  --ink-800: #131c2e;
  --ink-700: #1f2937;
  --ink-600: #374151;
  --ink-500: #6b7280;
  --ink-400: #9ca3af;
  --ink-300: #d1d5db;
  --ink-200: #e5e7eb;
  --ink-100: #f3f4f6;
  --ink-50:  #f9fafb;
  --white:   #ffffff;

  --ok:   #10b981;
  --warn: #f59e0b;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --shadow-md: 0 4px 6px -1px rgba(11,18,32,.07), 0 10px 20px -6px rgba(11,18,32,.10);
  --shadow-lg: 0 18px 40px -12px rgba(11,18,32,.22), 0 8px 16px -8px rgba(11,18,32,.12);
  --shadow-xl: 0 40px 80px -24px rgba(3,105,161,.28), 0 12px 28px -12px rgba(11,18,32,.18);

  --ease: cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────────────── 2. RESET / BASE ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3 { color: var(--ink-900); line-height: 1.14; letter-spacing: -.022em; font-weight: 800; }
h1 { font-size: clamp(2.35rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.115rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.35; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.container-narrow { max-width: 820px; }

.section { padding: clamp(72px, 9vw, 122px) 0; }
.section-alt  { background: linear-gradient(180deg, var(--ink-50), var(--white)); }
.section-dark { background: var(--ink-900); color: rgba(255,255,255,.78); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }

.section-head { max-width: 720px; margin: 0 auto clamp(44px, 5vw, 66px); text-align: center; }
.section-sub { font-size: 1.09rem; color: var(--ink-500); margin-top: 16px; }
.section-dark .section-sub { color: rgba(255,255,255,.62); }

.kicker {
  display: inline-block;
  font-size: .775rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 14px;
}
.section-dark .kicker { color: var(--brand-300); }

/* min-width:0 stops a grid item's min-content width from widening the page. */
.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 16px; }

:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; border-radius: 4px; }

/* ────────────────────────────────────────────────────────── 3. BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 650; font-size: .965rem; letter-spacing: -.005em;
  padding: 12px 22px; border-radius: 999px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap; border: 1px solid transparent;
}
.btn-sm { padding: 9px 17px; font-size: .9rem; }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 4px 14px -3px rgba(2,132,199,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(2,132,199,.55); }

.btn-ghost { color: var(--ink-700); border-color: var(--ink-300); background: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--white); transform: translateY(-2px); }

.btn-light { background: var(--white); color: var(--brand-700); box-shadow: var(--shadow-md); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ─────────────────────────────────────────────────── 4. HEADER / NAV ──── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--ink-200); box-shadow: 0 2px 14px -8px rgba(11,18,32,.2); }

.header-inner { display: flex; align-items: center; gap: 26px; height: 70px; }

.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark { width: 32px; height: 32px; }
.logo-text { font-weight: 800; font-size: 1.235rem; letter-spacing: -.03em; color: var(--navy); }

.nav { display: flex; gap: 4px; margin-inline: auto; }
.nav a {
  font-size: .93rem; font-weight: 550; color: var(--ink-600);
  padding: 8px 13px; border-radius: 999px; transition: color .16s, background .16s;
}
.nav a:hover { color: var(--brand-700); background: var(--brand-50); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* language switcher */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .89rem; font-weight: 600; color: var(--ink-600);
  padding: 8px 11px; border-radius: 999px; border: 1px solid var(--ink-200);
  transition: border-color .16s, color .16s;
}
.lang-toggle:hover { border-color: var(--brand-300); color: var(--brand-700); }
.lang-toggle .ic { width: 16px; height: 16px; }
.lang-toggle .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* Op de gegenereerde pagina's zijn dit echte links naar /en/, /de/, ... — in de
   bronversie (voor de build) nog knoppen. Beide krijgen dezelfde vormgeving. */
.lang-menu button, .lang-menu a {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 550; color: var(--ink-600);
}
.lang-menu button:hover, .lang-menu a:hover { background: var(--brand-50); color: var(--brand-700); }
.lang-menu button[aria-current="true"], .lang-menu a[aria-current="true"] {
  background: var(--brand-50); color: var(--brand-700); font-weight: 700;
}

.nav-burger { display: none; width: 40px; height: 40px; border-radius: var(--radius-sm); position: relative; }
.nav-burger span {
  position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink-700); transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19px; }
.nav-burger span:nth-child(3) { top: 24px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ───────────────────────────────────────────────────────────── 5. HERO ── */
.hero { position: relative; padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 9vw, 128px); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--brand-50) 0%, rgba(240,249,255,.35) 45%, var(--white) 100%); }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.glow-a { width: 560px; height: 560px; top: -180px; right: -140px; background: radial-gradient(circle, rgba(56,189,248,.55), transparent 70%); }
.glow-b { width: 460px; height: 460px; bottom: -180px; left: -120px; background: radial-gradient(circle, rgba(3,105,161,.28), transparent 70%); }

.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--brand-200);
  color: var(--brand-800); font-size: .845rem; font-weight: 600;
  padding: 7px 15px 7px 12px; border-radius: 999px; margin-bottom: 26px;
  box-shadow: var(--shadow-sm);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }

.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { font-size: 1.135rem; color: var(--ink-600); margin-top: 24px; max-width: 56ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .91rem; color: var(--ink-500); }
.hero-note .ic { width: 17px; height: 17px; color: var(--ok); stroke-width: 2.6; }

.hero-stats { display: flex; gap: 40px; margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--ink-200); }
.hero-stats dt { font-size: 1.95rem; font-weight: 800; color: var(--brand-700); letter-spacing: -.03em; line-height: 1; }
.hero-stats dd { font-size: .845rem; color: var(--ink-500); margin-top: 7px; max-width: 13ch; }

/* tablet mockup */
.hero-visual { position: relative; }
.tablet {
  background: linear-gradient(150deg, #253045, var(--ink-900));
  border-radius: 30px; padding: 15px;
  box-shadow: var(--shadow-xl);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform .55s var(--ease);
}
.tablet:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }
.tablet-screen { background: var(--white); border-radius: 20px; overflow: hidden; }

/* De kiosk in het toestel is de startpagina van de app, nagebouwd in CSS:
   dezelfde kop met logo, dezelfde uitleg en dezelfde omlijnde knoppen met een
   groot icoon boven het label (zie public/styles/theme.css, .button).
   Alle maten hangen aan --u, de schaal van één "app-pixel". Het toestel is
   ±47% van de vensterbreedte in twee kolommen; --u rekent dat om naar één
   factor, zodat de nagebouwde kiosk als geheel meeschaalt in plaats van te
   herschikken. De bovengrens houdt hem op ware grootte, de ondergrens houdt
   de tekst leesbaar op een telefoon. */
.kiosk {
  --u: min(1px, calc(.093vw - .097px));
  padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));
  text-align: center;
}

.kiosk-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(14 * var(--u)); }
.kiosk-title { font-size: calc(19 * var(--u)); font-weight: 700; color: var(--ink-900); letter-spacing: -.02em; }
/* Staat voor het logo van de klant: een merkteken plus een woordbeeld. */
.kiosk-logo { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.kiosk-logo i { width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: calc(8 * var(--u)); background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }
.kiosk-logo b { width: calc(66 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--ink-200); }

.kiosk-intro { font-size: calc(10.5 * var(--u)); line-height: 1.55; color: var(--ink-500); margin: calc(14 * var(--u)) auto 0; }
.kiosk-intro + .kiosk-intro { margin-top: calc(4 * var(--u)); }

/* Zes knoppen in twee kolommen, icoon links van het label — letterlijk
   .button-row.layout-two-col uit theme.css, één van de opstellingen die de
   klant voor de startpagina kan kiezen. */
.kiosk-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(12 * var(--u)); margin-top: calc(26 * var(--u)); }
.kiosk-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)) calc(14 * var(--u));
  border: calc(2 * var(--u)) solid var(--brand-500);
  border-radius: calc(12 * var(--u));
  background: transparent;
  font-size: calc(11 * var(--u)); font-weight: 500; line-height: 1.25;
  color: var(--ink-600); text-align: left;
}
.kiosk-btn .kic { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); color: var(--brand-500); }
.kiosk-btn .kic-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-btn .kic-solid path { fill: currentColor; }

.float-card {
  position: absolute; display: flex; align-items: center; gap: 11px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius);
  padding: 11px 15px; box-shadow: var(--shadow-lg);
  animation: bob 5s ease-in-out infinite;
}
/* De kaartjes zweven aan de rand van het toestel. Links mag dat NIET in
   procenten: de tekstkolom houdt maar 56px afstand (de gap van .hero-grid), dus
   een procentuele verschuiving legt het kaartje op brede schermen dwars over de
   h1. Vandaar een vaste marge die binnen die tussenruimte blijft: het kaartje
   leunt met zijn rechterhelft op de bovenhoek van het toestel, waar het scherm
   leeg is (de kop staat gecentreerd). Pas dit samen aan met de gap hierboven. */
.float-a { top: -5%; left: -50px; }
/* Rechts geldt hetzelfde, maar dan tegen de vensterrand: -7% viel bij een
   venster tussen 1025 en 1180px buiten beeld en werd door de overflow van
   .hero afgesneden. 18px blijft binnen de padding van .container. */
.float-b { bottom: -3%; right: -18px; animation-delay: -2.5s; }
.float-card strong { display: block; font-size: .87rem; color: var(--ink-900); line-height: 1.3; }
.float-card small { font-size: .74rem; color: var(--ink-500); }
.fc-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.fc-ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.fc-ic.ok   { background: rgba(16,185,129,.13); color: var(--ok); }
.fc-ic.warn { background: rgba(245,158,11,.15); color: var(--warn); }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ──────────────────────────────────────────────────────── 6. TRUST BAR ── */
.trust { padding: 42px 0 8px; border-top: 1px solid var(--ink-200); }
.trust-lead {
  max-width: 620px; margin: 0 auto 24px; text-align: center;
  font-size: 1.22rem; font-weight: 650; line-height: 1.4;
  letter-spacing: -.02em; color: var(--ink-700);
}
.trust-title { text-align: center; font-size: .81rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.trust-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-top: 22px;
}
.trust-list li { font-size: .96rem; font-weight: 650; color: var(--ink-400); letter-spacing: -.01em; }

/* ────────────────────────────────────────────────────────── 7. PROBLEM ── */
.problem-grid { gap: 20px; }
.problem-card {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.problem-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.p-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6); color: #e11d48; margin-bottom: 18px;
}
.p-ic .ic { width: 21px; height: 21px; }
.problem-card p { margin-top: 10px; color: var(--ink-500); font-size: .97rem; }

/* ───────────────────────────────────────────────────────── 8. FEATURES ── */
/* Flex in plaats van grid: het aantal functiekaarten is geen veelvoud van 3,
   en flex centreert een onvolledige laatste rij netjes. */
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.feature-grid > .feature { flex: 1 1 290px; max-width: calc((100% - 40px) / 3); min-width: 0; }
.feature {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.feature:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.f-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-600); margin-bottom: 18px;
}
.f-ic .ic { width: 21px; height: 21px; }
.feature p { margin-top: 9px; color: var(--ink-500); font-size: .945rem; }

/* Vier onderwerpen (Visitor management / Staff / Evacuation / Technical), elk met een
   eigen kopje en een nagebouwde mockup boven zijn kaarten — zie hero-visual (sectie 5)
   voor hetzelfde idee op grotere schaal. */
.feature-cat + .feature-cat { margin-top: clamp(56px, 6vw, 84px); }
.feature-cat-head { max-width: 640px; margin: 0 auto clamp(28px, 3.2vw, 38px); text-align: center; }
.fc-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .775rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-600); margin-bottom: 12px;
}
.fc-tag .ic { width: 16px; height: 16px; }
.feature-cat-head h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.feature-cat-head p { margin-top: 10px; color: var(--ink-500); font-size: .98rem; max-width: 56ch; margin-inline: auto; }

/* De mockup blijft smal: hij moet als illustratie lezen, niet als een tweede hero.
   De twee toestelmockups (Visitor management, Staff) hergebruiken .tablet/.tablet-screen/
   .kiosk letterlijk uit de hero — alleen de inhoud eronder is nieuw en gebruikt gewone
   rem/px-maten (niet de --u-schaal van .kiosk-actions, die voor de bredere hero getuned is). */
.feature-mock { max-width: 380px; margin: 0 auto clamp(30px, 3.4vw, 42px); }
.feature-mock .tablet { transform: none; padding: 12px; }
.feature-mock .tablet:hover { transform: none; }
.feature-mock .kiosk { padding: 22px 20px 24px; }

.kiosk-confirm { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kc-check { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(16,185,129,.13); color: var(--ok); }
.kc-check .ic { width: 23px; height: 23px; stroke-width: 2.4; }
.kiosk-confirm strong { font-size: 1rem; color: var(--ink-900); }
.kiosk-confirm span { font-size: .83rem; color: var(--ink-500); }
.kc-badge { margin-top: 4px; display: flex; align-items: center; gap: 7px; border: 1px dashed var(--ink-300); border-radius: var(--radius-sm); padding: 7px 12px; font-size: .77rem; color: var(--ink-500); }
.kc-badge .ic { width: 14px; height: 14px; color: var(--brand-500); flex-shrink: 0; }

.kiosk-keypad { margin-top: 16px; }
.kiosk-keypad p { font-size: .83rem; color: var(--ink-500); text-align: center; margin-bottom: 12px; }
.kk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 190px; margin-inline: auto; }
.kk-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--ink-50); border: 1px solid var(--ink-200); font-weight: 700; color: var(--ink-700); font-size: .9rem; }
.kk-result { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .85rem; font-weight: 650; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; padding: 7px 15px; }
.kk-result .ic { width: 14px; height: 14px; }

/* Portaalmockup (Evacuation, Technical): browserchrome rond een contentvlak, los van
   .tablet want dit stelt het beheerportaal voor, niet de kiosk. */
.portal-frame { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.portal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink-50); border-bottom: 1px solid var(--ink-200); }
.portal-dots { display: flex; gap: 5px; flex: none; }
.portal-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); }
.portal-url { flex: 1; font-size: .72rem; color: var(--ink-400); background: var(--white); border: 1px solid var(--ink-200); border-radius: 999px; padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-body { padding: 16px; }

.portal-banner { display: flex; align-items: center; gap: 8px; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--radius-sm); padding: 9px 12px; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.portal-banner .ic { width: 15px; height: 15px; flex-shrink: 0; }

.portal-zones { margin-top: 12px; display: grid; gap: 7px; }
.portal-zone { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); font-size: .81rem; }
.portal-zone span:first-child { color: var(--ink-700); font-weight: 600; }
.portal-zone em { font-style: normal; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.portal-zone.is-done em { background: rgba(16,185,129,.13); color: var(--ok); }
.portal-zone.is-busy em { background: rgba(245,158,11,.16); color: #b45309; }

.portal-total { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: .84rem; font-weight: 650; color: var(--ink-900); }
.portal-call { display: inline-flex; align-items: center; gap: 6px; font-size: .77rem; font-weight: 650; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; padding: 5px 12px; }
.portal-call .ic { width: 13px; height: 13px; }

.portal-rows { display: grid; gap: 7px; }
.portal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--ink-200); border-radius: var(--radius-sm); font-size: .8rem; }
.portal-row code { font-size: .73rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.portal-tag { flex: none; font-size: .71rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); white-space: nowrap; }
.portal-tag.is-ok { background: rgba(16,185,129,.13); color: var(--ok); }

/* ────────────────────────────────────────────────────────────── 9. HOW ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: s; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 21px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, var(--brand-200), var(--brand-300), var(--brand-200));
  z-index: 0;
}
.steps li { position: relative; z-index: 1; }
.step-n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff;
  font-weight: 800; font-size: 1.02rem; margin-bottom: 20px;
  box-shadow: 0 0 0 6px var(--white), 0 4px 12px -3px rgba(2,132,199,.4);
}
.steps p { margin-top: 9px; color: var(--ink-500); font-size: .945rem; }

/* ─────────────────────────────────────────── 10. SCOPE / SECURITY ────── */
.scope-flow { display: flex; align-items: stretch; gap: 14px; }
.scope-card {
  flex: 1; position: relative;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-lg); padding: 30px 26px;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.scope-card:hover { border-color: rgba(56,189,248,.45); background: rgba(56,189,248,.07); transform: translateY(-3px); }
.sc-lvl {
  position: absolute; top: 22px; right: 24px;
  font-size: 1.55rem; font-weight: 800; color: rgba(255,255,255,.09); letter-spacing: -.04em;
}
.sc-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(56,189,248,.14); color: var(--brand-300); margin-bottom: 18px;
}
.sc-ic .ic { width: 21px; height: 21px; }
.scope-card p { margin-top: 9px; font-size: .945rem; color: rgba(255,255,255,.6); }
.scope-arrow { display: grid; place-items: center; color: rgba(255,255,255,.2); flex-shrink: 0; }
.scope-arrow .ic { width: 22px; height: 22px; }
.scope-note {
  text-align: center; margin-top: 34px; font-size: .93rem; color: rgba(255,255,255,.5);
  max-width: 60ch; margin-inline: auto;
}

/* ── 10b. SETUP: de drie Microsoft-modellen ──
   De kaarten hergebruiken .sec-card; alleen de tabel eronder en de twee tekens
   erin hebben eigen regels nodig. .legal-table zelf komt uit sectie 17 en is
   bewust niet gescopet onder .legal-page, zodat ze hier bruikbaar is. */
.setup-grid { gap: 20px; margin-bottom: 34px; }
.setup-table { margin-top: 0; background: var(--white); }

/* Kolommen even breed houden, anders krijgt de eerste kolom alle ruimte en
   worden de drie modellen ongelijk breed — dat leest als een rangorde. */
.setup-table .legal-table th:not(:first-child),
.setup-table .legal-table td:not(:first-child) { width: 22%; text-align: center; }
.setup-table .legal-table td:not(:first-child) { color: var(--ink-600); }

/* Het vinkje draagt betekenis, dus het heeft een aria-label; visueel volstaat
   kleur + vorm. Het streepje is bewust grijs en niet rood: "niet in dit model"
   is geen fout. */
.tick { color: var(--ok); font-weight: 700; font-size: 1.05rem; }
.dash { color: var(--ink-400); font-weight: 700; }

.setup-note {
  text-align: center; margin-top: 26px; font-size: .93rem; color: var(--ink-500);
  max-width: 68ch; margin-inline: auto;
}

/* Verborgen voor het oog, leesbaar voor een schermlezer. Een <caption> zegt
   waar de tabel over gaat; zichtbaar zou hij de sectiekop herhalen. */
.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;
}

.sec-grid { gap: 20px; }
.sec-card {
  border-left: 3px solid var(--brand-300); padding: 4px 0 4px 22px;
}
.sec-card p { margin-top: 8px; color: var(--ink-500); font-size: .945rem; }

/* ────────────────────────────────────────────────────────── 11. PRICING -*/
/* Centred without transform tricks, so it can never push past the container.
   flex-wrap matters for DE/FR where the labels are longer than in NL/EN. */
.billing-toggle {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 5px;
  background: var(--ink-100); border-radius: 999px;
  width: fit-content; max-width: 100%;
  margin: 0 auto clamp(30px, 4vw, 44px);
}
.bt-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 21px; border-radius: 999px;
  font-size: .93rem; font-weight: 650; color: var(--ink-500);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.bt-opt.is-active { background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.bt-opt em {
  font-style: normal; font-size: .74rem; font-weight: 700;
  background: rgba(16,185,129,.14); color: #047857;
  padding: 3px 8px; border-radius: 999px;
}

/* Drie plannen naast elkaar. `align-items: start` zodat een korte Enterprise-kaart
   niet meerekt met de langste — dat leest als een lege kolom. */
.price-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  max-width: 1120px; margin-inline: auto;
}
.price-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: 26px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  padding: clamp(26px, 3vw, 34px);
  height: 100%;
}
/* Business is het plan waar we naartoe willen sturen, dus het krijgt de nadruk.
   Geen transform: die zou de kaart bij een smal scherm buiten de container duwen. */
.price-card.is-featured {
  border-color: var(--brand-300, var(--brand-100));
  box-shadow: 0 0 0 2px var(--brand-100), var(--shadow-lg);
}
.pc-badge {
  align-self: flex-start; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  background: var(--brand-50); color: var(--brand-700);
  border: 1px solid var(--brand-100);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.pc-name { font-size: 1.32rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.025em; }
.pc-desc { font-size: .93rem; color: var(--ink-500); margin-top: 5px; }

.pc-price { display: flex; align-items: baseline; gap: 3px; margin-top: 26px; }
.pc-price .cur { font-size: 1.7rem; font-weight: 700; color: var(--ink-900); align-self: flex-start; margin-top: 8px; }
.pc-price .amt {
  font-size: clamp(3.1rem, 6vw, 4.1rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ink-900);
  transition: opacity .18s var(--ease);
}
.pc-price .amt.is-swapping { opacity: 0; }
.pc-price .per { font-size: 1rem; font-weight: 600; color: var(--ink-500); margin-left: 5px; }
.pc-unit { font-size: .855rem; color: var(--ink-400); margin-top: 8px; }
.pc-extra {
  font-size: .92rem; font-weight: 600; color: var(--ink-700);
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ink-200);
}
.pc-billing {
  font-size: .875rem; color: var(--brand-700); font-weight: 600;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  padding: 11px 14px; border-radius: var(--radius-sm); margin-top: 22px;
}
.price-card .btn { margin-top: 22px; }
.pc-trial { font-size: .83rem; color: var(--ink-400); margin-top: 14px; text-align: center; }

/* De lijst duwt de knop naar beneden zodat de knoppen van de drie kaarten op
   dezelfde hoogte eindigen, ook als de ene lijst langer is dan de andere. */
.pc-body { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink-200); flex: 1; }
.pc-inc-title { font-size: .79rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 16px; }
.pc-list { display: grid; gap: 10px; }
.pc-list li { position: relative; padding-left: 30px; font-size: .92rem; color: var(--ink-600); }
.pc-list li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(16,185,129,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pc-multi { text-align: center; margin-top: 28px; font-size: .93rem; color: var(--ink-500); }

/* ────────────────────────────────────────────────────────────── 12. FAQ -*/
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq-item[open] { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 22px; cursor: pointer; list-style: none;
  font-weight: 650; font-size: 1.01rem; color: var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.fq-ic { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.fq-ic::before, .fq-ic::after {
  content: ''; position: absolute; background: var(--brand-600); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.fq-ic::before { top: 8px; left: 0; width: 18px; height: 2px; }
.fq-ic::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .fq-ic::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 22px 21px; }
.faq-a p { color: var(--ink-500); font-size: .97rem; max-width: 70ch; }

/* ────────────────────────────────────────────────────────── 13. CONTACT -*/
.contact-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 56px; align-items: start; }
.contact-copy .section-sub { text-align: left; margin-inline: 0; }
.contact-direct { margin-top: 24px; font-size: .95rem; color: rgba(255,255,255,.6); }
.contact-direct a {
  color: var(--brand-300); font-weight: 600; border-bottom: 1px solid rgba(125,211,252,.35);
  overflow-wrap: anywhere;   /* long e-mail addresses must not widen the page */
}
.contact-direct a:hover { color: var(--brand-200); }

.contact-form {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 38px);
}
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field > span { font-size: .845rem; font-weight: 600; color: rgba(255,255,255,.72); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm); padding: 12px 14px;
  color: #fff; font-size: .955rem; width: 100%;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-400); background: rgba(56,189,248,.08);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
  padding-right: 38px;
}
.field select option { background: var(--ink-800); color: #fff; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #f87171; }
.form-note { font-size: .81rem; color: rgba(255,255,255,.42); margin-top: 15px; text-align: center; }

/* Spamval: mag niet zichtbaar zijn maar wel in de DOM staan. Geen display:none,
   want sommige bots vullen enkel velden die de browser als invulbaar ziet. */
.field-trap {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Cloudflare Turnstile-widget: blijft leeg (dus onzichtbaar) zolang er geen
   site key ingesteld staat. Enkel wat ruimte eronder, verder Cloudflare's
   eigen opmaak — dit mag, in tegenstelling tot .field-trap, niet verborgen
   worden. */
.cf-turnstile { margin-bottom: 16px; }

/* Statusmelding van het contactformulier (succes / fout). */
.form-status {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: .9rem; line-height: 1.5;
}
.form-status strong { display: block; font-weight: 700; margin-bottom: 2px; }
.form-status.is-ok {
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #bbf7d0;
}
.form-status.is-error {
  background: rgba(248,113,113,.11); border: 1px solid rgba(248,113,113,.35); color: #fecaca;
}
.form-status.is-busy {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.66);
}
.form-status a { color: inherit; text-decoration: underline; }
button[disabled] { opacity: .6; cursor: default; }

/* ─────────────────────────────────────────── 14. CTA BAR / FOOTER ────── */
.cta-bar { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); padding: clamp(48px, 6vw, 72px) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cta-inner h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-inner p { color: rgba(255,255,255,.8); margin-top: 9px; font-size: 1.02rem; }

.site-footer { background: var(--ink-900); color: rgba(255,255,255,.55); padding: clamp(52px, 6vw, 76px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .logo-text { color: #fff; }
.footer-tagline { margin-top: 16px; font-size: .935rem; max-width: 34ch; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.fc-title { font-size: .79rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 4px; }
.footer-col a { font-size: .935rem; color: rgba(255,255,255,.62); transition: color .16s; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--brand-300); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 60px); padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .84rem; color: rgba(255,255,255,.4);
}

/* ─────────────────────────────────────────────────────── 15. RESPONSIVE -*/
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-burger { display: block; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: 70px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-lg); padding: 14px 24px 20px; margin: 0;
  }
  .nav.is-open a { padding: 12px 14px; font-size: 1rem; }

  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-copy { max-width: 640px; }
  .hero-visual { max-width: 460px; margin-inline: auto; }
  /* Eén kolom: het toestel vult de container (tot 460px), dus de schaal
     van de nagebouwde kiosk volgt een andere formule dan hierboven. */
  .kiosk { --u: clamp(.66px, calc(.198vw - .095px), .91px); }
  .tablet { transform: none; }
  .tablet:hover { transform: none; }
  .float-a { left: -32%; }
  .float-b { right: -4%; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid > .feature { max-width: calc((100% - 20px) / 2); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .steps::before { display: none; }
  .scope-flow { flex-direction: column; }
  .scope-arrow { transform: rotate(90deg); padding: 4px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* Twee kaarten naast elkaar, Enterprise eronder over de volle breedte. Drie
   kolommen worden hier te smal voor een prijs van vier cijfers. */
@media (max-width: 980px) and (min-width: 721px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card.is-enterprise { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .feature-grid > .feature { flex-basis: 100%; max-width: 100%; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .hero-stats { gap: 26px; }
  .hero-stats dt { font-size: 1.6rem; }
  .price-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .float-card { display: none; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-inner .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .logo-text { font-size: 1.15rem; }
  .header-actions .btn { display: none; }
  .trust-lead { font-size: 1.06rem; margin-bottom: 20px; }
  .trust-list { gap: 10px 20px; }
  .trust-list li { font-size: .87rem; }
}

@media (max-width: 420px) {
  .lang-toggle span:not(#langCurrent) { display: none; }
  .bt-opt { padding: 9px 14px; font-size: .87rem; }
  .hero-stats { flex-wrap: wrap; gap: 20px 24px; }
}

/* ──────────────────────────────────────────── 16. PILOT BAR / MODAL ──── */
/* Tijdelijk aanbod, aangestuurd door `pilot` in assets/js/config.js.
   Staat volledig los van de rest van de pagina: zet `enabled: false` en er
   blijft niets van over. */

/* [hidden] moet winnen van de display-waarden hieronder. */
[hidden] { display: none !important; }

.launch-bar {
  background: var(--warn);
  color: var(--ink-900);
  padding: 9px 0;
}
.launch-bar-inner {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.launch-bar-text {
  margin: 0; font-size: .89rem; font-weight: 700; line-height: 1.35;
}

.pilot-bar {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
  padding: 11px 0;
}
.pilot-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pilot-bar-text {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .93rem; line-height: 1.35;
}
.pilot-bar-text strong { font-weight: 700; }
.pilot-bar-text > span:not(.dot) { color: rgba(255,255,255,.82); }
.pilot-bar .dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}
.pilot-spots {
  font-style: normal; font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 999px;
}
.pilot-bar .btn { white-space: nowrap; }

/* ── modal ── */
body.has-modal { overflow: hidden; }

.pilot-modal {
  position: fixed; inset: 0; z-index: 200;          /* boven de sticky header (100) */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pilot-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,18,32,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: pilotFade .2s var(--ease);
}
.pilot-dialog {
  position: relative;
  width: 100%; max-width: 680px;
  max-height: min(90vh, 900px); overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: clamp(26px, 4vw, 40px);
  animation: pilotIn .22s var(--ease);
}
@keyframes pilotFade { from { opacity: 0; } }
@keyframes pilotIn   { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.pilot-close {
  position: absolute; top: 13px; right: 13px;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-600);
  border: 0; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.pilot-close:hover { background: var(--ink-200); color: var(--ink-900); }
.pilot-close .ic { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.pilot-dialog h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin-top: 9px; padding-right: 40px;
}
.pilot-sub { margin-top: 13px; color: var(--ink-600); line-height: 1.62; }

.pilot-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--ink-200);
}
.pilot-col h3 {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-700); margin-bottom: 14px;
}
.pilot-col:last-child h3 { color: var(--ink-500); }

.pilot-list { display: grid; gap: 11px; }
.pilot-list li {
  position: relative; padding-left: 28px;
  font-size: .925rem; line-height: 1.5; color: var(--ink-600);
}
.pilot-list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
}
/* Vinkje bij wat u krijgt, pijltje bij wat wij vragen — visueel onderscheid
   tussen de twee kanten van de ruil. */
.pilot-list.is-get li::before {
  background: rgba(16,185,129,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}
.pilot-list.is-ask li::before {
  background: rgba(2,132,199,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/11px no-repeat;
}

.pilot-effort {
  margin-top: 14px; font-size: .85rem; line-height: 1.5;
  color: var(--ink-500); font-style: italic;
}
.pilot-after {
  margin-top: 26px; padding: 14px 16px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius);
  font-size: .9rem; line-height: 1.55; color: var(--brand-800);
}
.pilot-dialog .btn-block { margin-top: 22px; }
.pilot-deadline { margin-top: 12px; text-align: center; font-size: .84rem; color: var(--ink-500); }

@media (max-width: 640px) {
  .launch-bar-text { font-size: .82rem; }
  .pilot-bar-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pilot-bar-text  { font-size: .87rem; }
  .pilot-bar .btn  { width: 100%; justify-content: center; }
  .pilot-modal     { padding: 0; }
  .pilot-dialog    { max-width: none; max-height: 100vh; border-radius: 0; }
  .pilot-cols      { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pilot-backdrop, .pilot-dialog { animation: none; }
}

/* ───────────────────────────────────────────────────── scroll reveal ─── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ──────────────────────────────────────── 17. JURIDISCHE PAGINA'S ────── */
/* Privacyverklaring en later de voorwaarden. Eén kolom, ruime regelafstand:
   dit is leesvoer, geen verkooppagina. De koppen zitten bewust dichter bij
   elkaar dan in de secties van de one-pager, want hier staan er dertien. */

.legal-page .site-header { background: rgba(255,255,255,.94); border-bottom-color: var(--ink-200); }
.legal-page .header-actions { margin-left: auto; }

.legal-langs { display: flex; gap: 2px; }
.legal-langs a {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 650; color: var(--ink-500);
  transition: color .16s, background .16s;
}
.legal-langs a:hover { color: var(--brand-700); background: var(--brand-50); }
.legal-langs a[aria-current] { color: var(--brand-700); background: var(--brand-50); }

.legal-main { padding: clamp(38px, 6vw, 70px) 0 clamp(56px, 7vw, 90px); }
.legal-wrap { max-width: 800px; }

.legal-head h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
.legal-updated {
  margin-top: 12px; font-size: .86rem; font-weight: 600;
  letter-spacing: .01em; color: var(--ink-500);
}
.legal-lead { margin-top: 20px; font-size: 1.06rem; color: var(--ink-600); }

/* Inhoudsopgave. Genummerd via de sectienummers in de tekst zelf, dus hier
   geen eigen nummering — anders staat er twee keer een cijfer. */
.legal-toc {
  margin: 38px 0 10px; padding: 22px 26px;
  background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius);
}
.legal-toc-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px;
}
/* Twee kolommen die van boven naar beneden lopen (1-7 links, 8-13 rechts).
   Met een grid zou de nummering zigzaggen; `columns` vult vanzelf bij als er
   een sectie bij komt. */
.legal-toc ol { columns: 2; column-gap: 26px; }
.legal-toc li { break-inside: avoid; margin-bottom: 6px; }
.legal-toc a { font-size: .93rem; color: var(--ink-600); border-bottom: 1px solid transparent; }
.legal-toc a:hover { color: var(--brand-700); border-bottom-color: var(--brand-300); }

.legal-section { scroll-margin-top: 90px; padding-top: 34px; }
.legal-section h2 {
  font-size: clamp(1.28rem, 2.3vw, 1.55rem);
  padding-top: 26px; border-top: 1px solid var(--ink-200);
}
.legal-section h3 { font-size: 1.03rem; margin-top: 26px; }
.legal-section p { margin-top: 14px; }
.legal-section a { color: var(--brand-700); font-weight: 550; border-bottom: 1px solid var(--brand-200); }
.legal-section a:hover { border-bottom-color: var(--brand-500); }

.legal-list { margin-top: 16px; display: grid; gap: 10px; }
.legal-list li { position: relative; padding-left: 24px; }
.legal-list li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-400);
}

.legal-note {
  margin-top: 20px; padding: 18px 22px;
  background: var(--brand-50); border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-note p { margin-top: 0; color: var(--ink-700); }

/* Brede tabellen scrollen in hun eigen kader; zonder wrapper duwen ze de
   pagina opzij op een telefoon. */
.legal-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--ink-200); border-radius: var(--radius); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
.legal-table th {
  text-align: left; font-weight: 700; color: var(--ink-900);
  background: var(--ink-50); padding: 12px 16px;
  border-bottom: 1px solid var(--ink-200);
}
.legal-table td { padding: 13px 16px; vertical-align: top; border-bottom: 1px solid var(--ink-100); }
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { font-weight: 600; color: var(--ink-800); }

.legal-page .site-footer { padding: 34px 0 30px; }
.legal-page .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 700px) {
  .legal-toc ol { columns: 1; }
  .legal-langs a { padding: 6px 7px; }
}

/* ─────────────────────────────────────────────────────────── print ───── */
@media print {
  .site-header, .cta-bar, .hero-visual, .nav-burger, .lang-switch,
  .launch-bar, .pilot-bar, .pilot-modal { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding: 18pt 0; }
  .section-dark { background: #fff; color: #000; }
  .section-dark h2, .section-dark h3 { color: #000; }

  /* De privacyverklaring wordt afgedrukt en meegestuurd met een offerte —
     dan hoeft de inhoudsopgave er niet bij, maar moeten de tabellen wel
     volledig zichtbaar zijn in plaats van te scrollen. */
  .legal-toc { display: none !important; }
  .legal-main { padding: 0; }
  .legal-table-wrap { overflow: visible; }
  .legal-table { min-width: 0; font-size: 9.5pt; }
  .legal-section { page-break-inside: auto; padding-top: 12pt; }
  .legal-section h2, .legal-section h3 { page-break-after: avoid; }
  .legal-table-wrap, .legal-note { page-break-inside: avoid; }
  .legal-page .site-footer { background: #fff; color: #000; }
}