/* =====================================================================
   LETTERTYPEN
   Zelf gehost in plaats van via Google Fonts. Dat scheelt een blokkerend
   verzoek naar een ander domein plus twee verbindingsopzetten, en het haalt
   de laatste externe afhankelijkheid uit de browser weg.

   Het zijn variabele lettertypen, dus één bestand dekt het hele
   gewichtsbereik. Alleen de subsets latin en latin-ext staan erin, want meer
   heeft een Nederlandse site niet nodig. De browser haalt latin-ext alleen op
   als er een teken op de pagina staat dat erin zit.

   De bestandsnamen bevatten geen versie. Dat hoeft niet, want de inhoud van
   een lettertype verandert nooit. Moet er ooit toch een nieuwe versie in, geef
   het bestand dan een andere naam.
   ===================================================================== */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-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;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-cursief-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: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-cursief-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;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-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;
}

/* =====================================================================
   Tav IT — Design System
   Style: Trust & Authority · Pattern: Enterprise Gateway
   Fusion: Tav IT brand (navy + orange, terminal motif)
           × smartvillage polish (whitespace, rounded cards, pill-CTA's)
   Palet: wit ↔ crème als enige afwisseling; navy structureel; oranje puur accent.
   Type: Plus Jakarta Sans + JetBrains Mono
   ===================================================================== */

:root {
  /* --- Brand: navy scale --- */
  --navy-950: #0a1020;
  --navy-900: #0f172a;
  --navy-800: #172033;
  --navy-700: #26324a;
  --navy-600: #3a465f;

  /* --- Brand: orange accent (Tav IT) --- */
  --orange-600: #e2691e;
  /* Dieper oranje, alleen voor links in lopende tekst. De lichtere tinten
     halen op wit maar 2,6 tot 3,4 op 1 en dat is te weinig om te lezen. */
  --orange-700: #b84d0c;
  --orange-500: #f5813b;
  --orange-400: #ff9d55;
  --orange-050: #fff3ea;

  /* --- Surface tints — crème is de ENIGE afwisseling met wit --- */
  --cream: #f8f4ec;
  --slate-100: #eef1f6;

  /* --- Neutrals --- */
  --ink: #0f172a;
  --ink-soft: #475467;
  --ink-mute: #6b7688;
  --line: #e5e8ef;
  --line-soft: #eef1f6;
  --white: #ffffff;

  /* --- Semantic --- */
  --bg: var(--white);
  --fg: var(--ink);
  --accent: var(--orange-500);
  --accent-strong: var(--orange-600);
  --ok: #34d399;

  /* --- Type --- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Radii --- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* --- Spacing scale (density 5 / standard) --- */
  --space-section: clamp(5.5rem, 10vw, 11rem);
  /* Ademruimte rondom losstaande blokken (navy band, CTA-kaart) */
  --space-band: clamp(4rem, 8vw, 8rem);
  /* Hoogte van de zachte kleur-fade aan de rand van getinte secties */
  --fade: clamp(60px, 8vw, 130px);

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 14px 34px rgba(245, 129, 59, 0.32);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 240ms;

  --header-h: 76px;
}

/* ===================== RESET / BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Eigen display-waarden mogen [hidden] nooit overrulen */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }

.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.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;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em;
  padding: 0.85rem 1.5rem; border: 0; border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn-pill { border-radius: var(--r-pill); }
.btn-lg { padding: 1.05rem 1.8rem; font-size: 1.03rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(245,129,59,0.4); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; background: var(--accent); }

.btn-ghost { background: var(--white); color: var(--navy-900); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy-900); transform: translateY(-2px); }

.btn-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.22); transition: transform var(--dur) var(--ease-back);
}
.btn:hover .btn-arrow { transform: translateX(3px); }
.cta-prompt { font-family: var(--font-mono); color: var(--accent); font-weight: 700; }

/* ===================== NAV ===================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.site-header.scrolled { border-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.logo { display: inline-flex; align-items: baseline; gap: 0.28rem; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.03em; }
.logo-prompt { font-family: var(--font-mono); color: var(--accent); font-weight: 700; }
/* De underscore knippert als een terminal die op invoer wacht */
.blink-us { animation: blink 1.05s steps(1) infinite; }
.logo-tav { color: var(--navy-900); }
.logo-it { color: var(--accent); }

.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  font-weight: 600; font-size: 0.97rem; color: var(--ink-soft); position: relative; padding: 4px 0;
  transition: color var(--dur);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--accent);
  transition: width var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--navy-900); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 0.8rem; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 24px; height: 2.4px; background: var(--navy-900); border-radius: 2px; transition: transform var(--dur), opacity var(--dur); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

.mobile-menu { display: none; flex-direction: column; gap: 0.4rem; padding: 0.5rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line-soft); background: #fff; }
.mobile-menu a { padding: 0.85rem 0.4rem; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.mobile-menu .mobile-cta { justify-content: center; color: #fff; border-bottom: 0; margin-top: 0.6rem; }

/* ===================== HERO ===================== */
.hero {
  position: relative; overflow: hidden; background: var(--white);
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(3.25rem, 6vw, 5.5rem);
}

/* Laag 0: langzaam bewegende aurora-gloed (navy + oranje) */
.hero-aurora {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 78% 16%, rgba(245, 129, 59, 0.20), transparent 70%),
    radial-gradient(44% 48% at 14% 74%, rgba(15, 23, 42, 0.11), transparent 72%),
    radial-gradient(32% 34% at 52% 46%, rgba(245, 129, 59, 0.07), transparent 70%);
  filter: blur(8px);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.03); }
}

/* Laag 1: canvas-netwerk (nodes, verbindingen, datapakketjes) */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  /* Netwerk dimt achter de kopregel links, is het sterkst rechts bij de terminal */
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 26%, #000 58%);
          mask-image: linear-gradient(100deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.5) 26%, #000 58%);
}

/* Laag 1: trage scan-sweep — subtiele "systeem leeft" hint */
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(245, 129, 59, 0.07) 46%, rgba(245, 129, 59, 0.02) 54%, transparent 62%);
  animation: scan 11s linear infinite;
}
@keyframes scan { 0% { transform: translateY(-105%); } 100% { transform: translateY(105%); } }
.hero-inner {
  /* Bredere tekstkolom zodat de kopregel op 2 regels past */
  display: grid; grid-template-columns: 1.18fr 0.82fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  position: relative; z-index: 2;
}

.kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
  background: var(--slate-100); padding: 0.5rem 0.95rem; border-radius: var(--r-pill);
  margin-bottom: 1.2rem;
}
.kicker-mono { color: var(--accent); font-weight: 700; }
.kicker-light { background: rgba(255,255,255,0.09); color: #cdd5e6; }

.hero-title { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing: -0.035em; color: var(--navy-900); }
/* Kop blijft overal exact 2 regels: regel 2 breekt nooit af */
.title-line { white-space: nowrap; }
/* Géén nowrap hier: lange sectiekoppen moeten kunnen afbreken op mobiel.
   De hero houdt zijn 2 regels via .title-line. */
.accent-word { color: var(--accent); position: relative; }
.caret {
  display: inline-block; width: 4px; height: 0.92em; margin-left: 4px; vertical-align: -0.08em;
  background: var(--accent); border-radius: 2px; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.14rem); color: var(--ink-soft); max-width: 46ch; margin: 1.2rem 0 1.7rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.7rem; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.94rem; font-weight: 600; color: var(--ink-soft); }
.hero-trust .check { color: var(--accent); flex-shrink: 0; }

/* Terminal visual */
.hero-terminal { position: relative; }
.terminal {
  background: var(--navy-900); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden;
  transform: rotate(0.4deg);
}
.terminal-bar, .form-terminal-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.1rem; background: var(--navy-950); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tl { width: 12px; height: 12px; border-radius: 50%; }
.tl-red { background: #ff5f57; } .tl-amber { background: #febc2e; } .tl-green { background: #28c840; }
.terminal-title { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; color: #7d8aa5; }

.terminal-body { padding: 1.4rem 1.5rem 1.7rem; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.95; }
.term-prompt { color: var(--accent); font-weight: 700; }
.term-cmd { color: #e9edf6; }
.term-out { color: #93c9a9; }
.term-out .ok { color: var(--ok); float: right; }
.term-typed { color: #e9edf6; }
.term-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); vertical-align: -0.15em; margin-left: 2px; animation: blink 1.05s steps(1) infinite; }


/* Laag 1: langzaam driftend stippenraster */
/* Het stippenraster schuift één tegel op en herhaalt zich daarna.
   De beweging zit op een ::before die aan alle kanten één tegel groter is en
   met transform verschuift, niet op background-position. Dat laatste kan de
   browser niet aan de GPU overlaten, waardoor hij elk beeldje opnieuw tekent.
   Het masker en de overflow op de ouder houden het zichtbare deel gelijk. */
.grid-dots {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 32%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 85% 65% at 50% 32%, #000 0%, transparent 78%);
}
.grid-dots::before {
  content: ""; position: absolute; inset: -26px;
  background-image: radial-gradient(circle, rgba(15,23,42,0.07) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(26px, 26px, 0); } }

/* ===================== SECTION HEAD ===================== */
.section { padding: var(--space-section) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--navy-900); letter-spacing: -0.03em; }
.muted-title { color: var(--ink-mute); }
.section-lead { font-size: 1.1rem; color: var(--ink-soft); margin-top: 1.3rem; max-width: 52ch; }

/* ===================== SERVICES ===================== */
.services { background: var(--white); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.service-card {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 2rem 1.9rem 1.8rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
  overflow: hidden;
}
.service-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--orange-400));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 1.4rem;
  background: var(--slate-100); color: var(--navy-900);
  transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-back);
}
.service-icon svg { width: 27px; height: 27px; }
.service-card:hover .service-icon { background: var(--navy-900); color: #fff; transform: scale(1.05) rotate(-3deg); }
.service-card h3 { font-size: 1.32rem; margin-bottom: 0.6rem; color: var(--navy-900); }
.service-card p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 1.3rem; }
.service-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong); background: var(--orange-050); padding: 0.32rem 0.7rem; border-radius: var(--r-pill); }

.accent-card { background: linear-gradient(160deg, var(--navy-900), var(--navy-800)); border-color: transparent; }
.accent-card h3, .accent-card p { color: #fff; }
.accent-card p { color: #c3cce0; }
.accent-card .service-icon { background: rgba(255,255,255,0.1); color: var(--orange-400); }
.accent-card:hover .service-icon { background: var(--accent); color: #fff; }
.accent-card .service-tag { background: rgba(245,129,59,0.16); color: var(--orange-400); }
.accent-card::before { background: linear-gradient(90deg, var(--orange-400), var(--accent)); }

/* ===================== AI-CODE RESCUE ===================== */
/* Crème met uitgefade randen — zelfde ritme als de demo- en contactsectie */
.rescue {
  position: relative;
  background: linear-gradient(180deg,
    var(--white) 0%,
    var(--cream) var(--fade),
    var(--cream) calc(100% - var(--fade)),
    var(--white) 100%);
}
/* Tekst links, vibe-coding visual rechts */
.rescue-top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.rescue-copy .section-lead { margin-bottom: 2rem; }

/* --- Chips met de tools waarmee bezoekers bouwen --- */
.rescue-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.tools-label { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.tool-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tool-chips li {
  font-size: 0.86rem; font-weight: 600; color: var(--navy-900);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.4rem 0.85rem;
}

/* --- Vibe coding, verbeeld: prompt erin → app eruit ---------------------
   Puur CSS. Basisstaat = eindstaat (alles zichtbaar), de animatie speelt de
   opbouw af. Zo blijft het beeld compleet als animaties uitstaan. */
/* Ruimte boven en onder zodat de labels de kaart net overlappen, niet bedekken */
.vibe { position: relative; padding: 1.5rem 0.5rem 1.9rem; }
.vibe-card {
  background: var(--navy-900); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,0.06);
  transform: rotate(-0.6deg);
}
/* Vaste hoogte: de kaart mag niet meebewegen met de variant die getoond wordt */
.vibe-body { padding: 1.3rem 1.4rem 1.6rem; height: 306px; display: flex; flex-direction: column; }

.vibe-prompt {
  display: flex; align-items: flex-start; gap: 0.55rem; min-height: 3.2em;
  font-family: var(--font-mono); font-size: 0.86rem; color: #e9edf6;
  padding-bottom: 1.1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.vibe-spark { flex-shrink: 0; color: var(--accent); display: grid; place-items: center; }
.vibe-spark svg { width: 17px; height: 17px; animation: vibeSpark 6s var(--ease-out) infinite; }
.vibe-typed { white-space: normal; }
.vibe-caret { flex-shrink: 0; width: 7px; height: 1.05em; background: var(--accent); border-radius: 1px; animation: blink 1.05s steps(1) infinite; }
@keyframes vibeSpark { 0%, 70% { transform: scale(1); opacity: 0.7; } 80% { transform: scale(1.3) rotate(12deg); opacity: 1; } 90%, 100% { transform: scale(1); opacity: 0.7; } }

/* De uitvoer wordt per variant door JS opgebouwd */
.vibe-out { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.55rem; transition: opacity 0.35s var(--ease-out); }
.vibe-out.is-fading { opacity: 0; }

.vibe-item { opacity: 0; animation: vibePop 0.45s var(--ease-out) forwards; }
@keyframes vibePop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

.vibe-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.11); }
.vibe-line.is-accent { background: rgba(245,129,59,0.32); }

.vibe-hero { height: 54px; border-radius: 12px; background: linear-gradient(120deg, rgba(255,255,255,0.1), rgba(245,129,59,0.13)); border: 1px solid rgba(255,255,255,0.09); }

.vibe-row, .vibe-grid { display: grid; gap: 0.5rem; }
.vibe-row { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.vibe-grid { grid-template-columns: repeat(2, 1fr); }
.vibe-block { height: 40px; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09); }
.vibe-grid .vibe-block { height: 46px; }

.vibe-table { display: flex; flex-direction: column; gap: 0.4rem; }
.vibe-tr { height: 16px; border-radius: 5px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07); }

.vibe-flow { display: flex; align-items: center; gap: 0.4rem; }
.vibe-node { flex: 1; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09); }
.vibe-node.is-accent { background: rgba(245,129,59,0.14); border-color: rgba(245,129,59,0.4); }
.vibe-arrow { flex-shrink: 0; width: 12px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.22); }

/* Het scheve element: hier wringt de gegenereerde code */
.vibe-skew { transform: rotate(-1.3deg); }


/* --- FAQ (native details/summary — werkt ook zonder JS) --- */
.faq { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(15,23,42,0.1); }
.faq-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--navy-900); margin-bottom: 1.3rem; }
.faq-item {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  margin-bottom: 0.7rem; overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.faq-item:hover { border-color: var(--line); }
.faq-item[open] { border-color: var(--accent); box-shadow: 0 10px 30px -18px rgba(245,129,59,0.5); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.02rem; color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--orange-050); color: var(--accent-strong);
  transition: transform var(--dur) var(--ease-out), background var(--dur), color var(--dur);
}
.faq-icon svg { width: 16px; height: 16px; }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-answer { padding: 0 1.4rem 1.3rem; }
.faq-answer p { color: var(--ink-soft); font-size: 0.97rem; max-width: 70ch; }

/* --- Afsluitende CTA-strook --- */
.rescue-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.rescue-foot-copy { max-width: 52ch; }
.rescue-foot h3 { font-size: 1.2rem; color: var(--navy-900); margin-bottom: 0.4rem; }
.rescue-foot p { color: var(--ink-soft); font-size: 0.97rem; }

/* ===================== WHY (dark band) ===================== */
.why {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800));
  border-radius: clamp(28px, 4vw, 48px);
  width: min(1320px, 100% - 2.5rem);
  /* Ademruimte: het blok zweeft los, raakt de buursecties niet */
  margin: var(--space-band) auto;
  /* Zachte schaduw verzacht de overgang naar het witte vlak */
  box-shadow: 0 50px 100px -50px rgba(15, 23, 42, 0.45);
}
.why-inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; position: relative; z-index: 2; }
.on-dark { color: #fff; }
.on-dark-lead { color: #b9c2d6; font-size: 1.08rem; margin-bottom: 1.4rem; max-width: 48ch; }
/* Lucht tussen de kop en de eerste alinea */
.why-copy .section-title { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.why-copy .btn { margin-top: 0.8rem; }

.why-cards { display: flex; flex-direction: column; gap: 1rem; }
.value-card {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-md); padding: 1.4rem 1.5rem;
  transition: transform var(--dur) var(--ease-out), background var(--dur), border-color var(--dur);
}
.value-card:hover { transform: translateX(6px); background: rgba(255,255,255,0.08); border-color: rgba(245,129,59,0.4); }
.value-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(245,129,59,0.16); color: var(--orange-400); display: grid; place-items: center; }
.value-icon svg { width: 23px; height: 23px; }
.value-card h4 { font-size: 1.1rem; color: #fff; margin-bottom: 0.3rem; }
.value-card p { color: #aab4c9; font-size: 0.95rem; line-height: 1.5; }

/* ===================== DEMO: MONITORING MINI-GAME ===================== */
/* Crème met uitgefade randen → geen harde kleurgrens met wit */
.demo {
  position: relative;
  background: linear-gradient(180deg,
    var(--white) 0%,
    var(--cream) var(--fade),
    var(--cream) calc(100% - var(--fade)),
    var(--white) 100%);
}
.demo-head { max-width: 680px; }
.demo-head strong { color: var(--navy-900); font-weight: 700; }

.shift { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.4rem); }
.run-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: rgba(255,255,255,0.22); }

.shift-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1.5rem; }
.shift-stats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; }
.shift-stat {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-mute); background: var(--slate-100); border-radius: var(--r-pill); padding: 0.45rem 0.85rem;
}
.shift-stat b { color: var(--navy-900); font-size: 0.88rem; margin-left: 0.3rem; font-variant-numeric: tabular-nums; }
.shift-stat.is-warn b { color: var(--accent-strong); }
.shift-stat.is-bad b { color: #dc2626; }

.shift-body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.2rem; align-items: start; }

/* --- De monitor: openstaande meldingen + logboek --- */
.shift-monitor { background: var(--navy-900); border-radius: var(--r-md); overflow: hidden; }
.queue { min-height: 196px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; }
.queue-empty { font-family: var(--font-mono); font-size: 0.78rem; color: #6f7b91; padding: 0.4rem 0.3rem; }

.q-item {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(245,129,59,0.45);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 0.6rem 0.8rem 0.75rem;
  animation: qIn 0.25s var(--ease-out);
}
@keyframes qIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.2rem; }
.q-sev { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-400); }
.q-time { font-family: var(--font-mono); font-size: 0.68rem; color: #8b96ac; font-variant-numeric: tabular-nums; }
.q-text { font-size: 0.86rem; font-weight: 600; color: #e9edf6; line-height: 1.35; }
.q-bar { display: block; height: 3px; margin-top: 0.5rem; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }

/* SLA verlopen: melding wordt rood en dringend */
.q-item.is-breach { border-color: rgba(220,38,38,0.6); border-left-color: #dc2626; background: rgba(220,38,38,0.1); }
.q-item.is-breach .q-sev { color: #ff8a7a; }
.q-item.is-breach .q-bar i { background: #dc2626; }

.feed { height: 132px; overflow-y: auto; padding: 0.7rem 1.1rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.8; color: #8b96ac; }
.feed .l { opacity: 0; animation: logIn 0.25s var(--ease-out) forwards; }
@keyframes logIn { to { opacity: 1; } }
.feed .ok { color: var(--ok); }
.feed .warn { color: var(--orange-400); }
.feed .bad { color: #ff8a7a; }
.feed .dim { color: #6f7b91; }

/* --- De systemen: het antwoord aanwijzen --- */
.sys-hint { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-mute); margin-bottom: 0.8rem; }
.sys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.sys {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; gap: 0.3rem;
  min-height: 92px; padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--slate-100); color: var(--ink-soft); cursor: pointer;
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease-back), box-shadow var(--dur);
}
.sys:hover { transform: translateY(-3px); border-color: var(--navy-700); box-shadow: var(--shadow-sm); }
.sys:disabled { cursor: default; opacity: 0.65; }
.sys:disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.sys-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--ink-mute); transition: background var(--dur), color var(--dur); }
.sys-icon svg { width: 16px; height: 16px; }
.sys-name { font-weight: 700; font-size: 0.9rem; color: var(--navy-900); }
.sys-state { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }

/* Terugkoppeling na een klik */
.sys.is-hit { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.7); }
.sys.is-hit .sys-icon { background: #0d9668; color: #fff; }
.sys.is-hit .sys-state { color: #0d7f5a; }
.sys.is-miss { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.5); }
.sys.is-miss .sys-icon { background: #dc2626; color: #fff; }
.sys.is-miss .sys-state { color: #dc2626; }

/* --- Eindresultaat --- */
.shift-result {
  margin-top: 1.3rem; padding: 1.3rem 1.5rem;
  border-radius: var(--r-md); border: 1px solid var(--line-soft); background: var(--cream);
}
.shift-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin-bottom: 0.45rem; }
.shift-rank b { font-size: 1.15rem; color: var(--navy-900); }
.shift-rank span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-mute); }
.shift-result p { color: var(--ink-soft); font-size: 0.95rem; }
.shift-result.is-good { border-color: rgba(52,211,153,0.6); background: rgba(52,211,153,0.08); }
.shift-result.is-bad { border-color: rgba(220,38,38,0.4); background: rgba(220,38,38,0.06); }

/* ===================== CTA BAND ===================== */
.cta-band { padding: var(--space-band) 0; background: var(--white); }
.cta-inner {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: clamp(28px, 4vw, 44px); padding: clamp(3.2rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; color: #fff;
  box-shadow: 0 50px 100px -50px rgba(15, 23, 42, 0.45);
}
/* --- Bewegende achtergrond: infrastructuur die opschaalt --- */
.cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Perspectiefraster dat de diepte in loopt */
/* Zelfde verhaal als bij het stippenraster. Het perspectief blijft op de
   ouder staan, de beweging gaat naar een ::before dat boven en onder een tegel
   groter is en verticaal opschuift met transform. */
.cta-grid {
  position: absolute; left: -25%; right: -25%; bottom: -10%; height: 78%; overflow: hidden;
  transform: perspective(340px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 72%);
          mask-image: linear-gradient(to top, #000 4%, transparent 72%);
}
.cta-grid::before {
  content: ""; position: absolute; inset: -52px 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: ctaGrid 4.5s linear infinite;
}
@keyframes ctaGrid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 52px, 0); } }

/* Datapunten die opstijgen: naar het volgende niveau */
.cta-rise {
  position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,157,85,0.85); box-shadow: 0 0 10px rgba(255,157,85,0.5);
  animation: ctaRise 6s linear infinite;
}
.cta-rise.p1 { left: 12%; animation-delay: 0s; }
.cta-rise.p2 { left: 28%; animation-delay: 1.4s; }
.cta-rise.p3 { left: 57%; animation-delay: 2.6s; }
.cta-rise.p4 { left: 74%; animation-delay: 0.8s; }
.cta-rise.p5 { left: 89%; animation-delay: 3.7s; }
@keyframes ctaRise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translateY(-260px) scale(1); opacity: 0; }
}

.cta-inner h2 { font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; position: relative; z-index: 2; }
.cta-inner > p { position: relative; z-index: 2; font-size: 1.12rem; color: #b9c2d6; margin: 1.1rem auto 2rem; max-width: 46ch; }
.cta-inner .btn { position: relative; z-index: 2; }
/* `>_` binnen de oranje knop moet leesbaar blijven */
.btn-primary .cta-prompt { color: rgba(255, 255, 255, 0.8); }

/* ===================== VRAGEN ===================== */
/* Zelfde getinte band als de demo- en contactsectie, zodat de afwisseling
   wit en crème blijft kloppen nu de vragen een eigen sectie zijn. */
.vragen {
  background: linear-gradient(180deg,
    var(--white) 0%,
    var(--cream) var(--fade),
    var(--cream) calc(100% - var(--fade)),
    var(--white) 100%);
}
.vragen .faq { margin-top: 0; padding-top: 0; border-top: 0; }

/* ===================== CONTACT ===================== */
.contact {
  background: linear-gradient(180deg,
    var(--white) 0%,
    var(--cream) var(--fade),
    var(--cream) calc(100% - var(--fade)),
    var(--white) 100%);
}
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

.contact-list { display: flex; flex-direction: column; gap: 0.9rem; margin: 2rem 0 1.8rem; }
.contact-list li { display: flex; align-items: center; gap: 0.9rem; font-size: 1.02rem; font-weight: 600; color: var(--navy-900); }
.contact-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--accent-strong); display: grid; place-items: center; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.contact-ic svg { width: 21px; height: 21px; }
.contact-list a { transition: color var(--dur); }
.contact-list a:hover { color: var(--accent-strong); }

.contact-meta { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(15,23,42,0.1); }
.contact-meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.meta-key { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.meta-val { font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }

/* Contact form as terminal */
.contact-form { background: var(--navy-900); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.form-terminal-bar { background: var(--navy-950); }
.form-body { padding: 1.8rem 1.8rem 2rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--orange-400); margin-bottom: 0.5rem; letter-spacing: 0.03em; }
.field label::before { content: "> "; color: #6b7688; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 0.85rem 1rem; color: #fff; font-family: var(--font-sans); font-size: 0.98rem;
  transition: border-color var(--dur), background var(--dur);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: #64708a; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.08); }
.field-error { display: block; color: #ff8a7a; font-size: 0.82rem; margin-top: 0.4rem; min-height: 1em; }
.contact-form .btn { margin-top: 0.3rem; }
.form-status { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ok); min-height: 1.2em; text-align: center; }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--navy-950); color: #aeb8cd;
  padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
  /* Afgeronde bovenkant: navy landt als losstaand blok op wit i.p.v. harde rand */
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand p { color: #8b96ac; font-size: 0.95rem; margin: 1rem 0 1.3rem; max-width: 34ch; }
.logo-footer .logo-tav { color: #fff; }
.footer-col h4 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 1.1rem; font-family: var(--font-mono); }
.footer-col a, .footer-addr { display: block; color: #99a3ba; font-size: 0.95rem; padding: 0.32rem 0; transition: color var(--dur); }
.footer-col a:hover { color: var(--orange-400); }
.footer-addr { color: #8b96ac; }

.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.8rem; font-size: 0.88rem; color: #7a8399; }
.footer-mono { font-family: var(--font-mono); color: var(--orange-400); }

/* ===================== REVEAL ANIMATION ===================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Zonder JavaScript komt er nooit een is-visible bij, en dan zou de tekst van
   een artikel onzichtbaar blijven. Leesbare inhoud mag nooit van een script
   afhangen, dus in dat geval staat alles gewoon aan. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-sub { max-width: 46ch; }
  .hero-terminal { max-width: 480px; }
  .why-inner { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .rescue-top { grid-template-columns: 1fr; }
  .shift-body { grid-template-columns: 1fr; }
  .sys-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-actions .btn-primary { display: none; }
  .nav-toggle { display: flex; }
  .mobile-menu { display: flex; }
  .service-grid { grid-template-columns: 1fr; }
  .rescue-foot { flex-direction: column; align-items: stretch; }
  .rescue-foot .btn { justify-content: center; }
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
  .shift-stats { margin-left: 0; width: 100%; }
  /* Langere prompts breken hier naar twee regels */
  .vibe-body { height: 336px; }
  .footer-inner { grid-template-columns: 1fr; }

  /* --- Op mobiel weggelaten om de pagina kort en gericht te houden --- */
  .hero-terminal { display: none; }
  .rescue-tools { display: none; }
  #demo { display: none; }
  .cta-band { display: none; }
  /* Geen links naar een sectie die hier niet bestaat */
  .mobile-menu a[href="#demo"],
  .footer-col a[href="#demo"] { display: none; }
}

@media (max-width: 400px) {
  body { font-size: 16px; }
  /* Schaalt mee met de viewport zodat regel 2 ook op kleine toestellen past */
  .hero-title { font-size: 10vw; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .caret, .term-caret { animation: none; }
  /* Bewegende hero-lagen stilzetten; het netwerk blijft statisch zichtbaar */
  .hero-aurora, .grid-dots::before { animation: none; }
  .hero-scan { display: none; }
  /* Meldingen verschijnen zonder in-animatie, maar blijven volledig leesbaar */
  .q-item { animation: none; }
  /* Bewegende CTA-achtergrond stilzetten; de opbouw blijft zichtbaar */
  .cta-grid::before { animation: none; }
  .cta-rise { display: none; }
}

/* =====================================================================
   SUBPAGINA'S
   Componenten die alleen op de losse pagina's voorkomen.
   ===================================================================== */

/* --- Kop van een subpagina --- */
.page-hero { position: relative; overflow: hidden; background: var(--white); padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero-inner { max-width: 46rem; }
/* Eerste sectie na de hero: rustig verder, niet tegen de hero aan geplakt */
.section-tight { padding-top: clamp(3rem, 6vw, 5rem); }
.section-flush { padding-top: 0; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--navy-900); letter-spacing: -0.03em; }
.page-hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-soft); margin-top: 1.2rem; max-width: 60ch; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 60% at 88% 12%, rgba(245,129,59,0.16), transparent 70%),
              radial-gradient(40% 60% at 8% 88%, rgba(15,23,42,0.07), transparent 72%); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-mute); margin-bottom: 1.1rem; }
.breadcrumb a { transition: color var(--dur); }
.breadcrumb a:hover { color: var(--accent-strong); }
.breadcrumb span { opacity: 0.5; }

/* --- Dienstenkaart als link --- */
.card-link { display: flex; flex-direction: column; align-items: flex-start; }
.card-link p { margin-bottom: 1.1rem; }
.card-link .card-more { margin-top: auto; padding-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-weight: 700; font-size: 0.93rem; color: var(--accent-strong); }
.card-link .card-more svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur) var(--ease-back); }
.card-link:hover .card-more svg { transform: translateX(4px); }
.accent-card .card-more { color: var(--orange-400); }

/* --- Detailpagina van een dienst --- */
.detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.detail-main h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--navy-900); margin: 2.4rem 0 0.9rem; }
.detail-main h2:first-child { margin-top: 0; }
.detail-main p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 66ch; }

.check-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.2rem 0 0.5rem; }
.check-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; color: var(--ink-soft); }
.check-list svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }

.detail-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1rem; }
.aside-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.5rem; }
.aside-card h3 { font-size: 1.05rem; color: var(--navy-900); margin-bottom: 1rem; }
.fact-list { display: flex; flex-direction: column; gap: 0.8rem; }
.fact-list div { display: flex; flex-direction: column; gap: 0.15rem; }
.fact-key { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); }
.fact-val { font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }
.aside-card.is-dark { background: linear-gradient(155deg, var(--navy-950), var(--navy-900)); border-color: transparent; }
.aside-card.is-dark h3 { color: #fff; }
.aside-card.is-dark p { color: #b9c2d6; font-size: 0.94rem; margin-bottom: 1.2rem; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related a { display: block; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.2rem 1.3rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.related a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.related strong { display: block; color: var(--navy-900); font-size: 1rem; margin-bottom: 0.25rem; }
.related span { color: var(--ink-mute); font-size: 0.88rem; }

/* --- Hulp & docs, archief --- */
.docs-layout { display: grid; grid-template-columns: 258px 1fr; gap: clamp(1.5rem, 3vw, 2.8rem); align-items: start; }
.docs-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: flex; flex-direction: column; gap: 1.4rem; }
.docs-search { width: 100%; padding: 0.75rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 0.93rem; color: var(--navy-900); transition: border-color var(--dur); }
.docs-search:focus { outline: none; border-color: var(--accent); }
.filter-group h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 0.7rem; font-weight: 500; }
.filter-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-btn { padding: 0.42rem 0.85rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); transition: all var(--dur); }
.filter-btn:hover { border-color: var(--navy-700); color: var(--navy-900); }
.filter-btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.filter-reset { align-self: flex-start; font-size: 0.85rem; font-weight: 700; color: var(--accent-strong); background: none; border: 0; padding: 0; }
.filter-reset:hover { text-decoration: underline; }

.docs-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-mute); margin-bottom: 1.4rem; }
.log { position: relative; padding-left: 1.9rem; }
.log::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.log-entry { position: relative; padding-bottom: 1.6rem; }
.log-entry::before { content: ""; position: absolute; left: -1.9rem; top: 1.5rem; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
/* display:block is nodig: een <a> is inline en dan breekt de rand in fragmenten */
.log-card { display: block; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.log-card:hover { transform: translateX(5px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.log-date { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-mute); }
.log-badge { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.24rem 0.6rem; border-radius: var(--r-pill); background: var(--orange-050); color: var(--accent-strong); }
.log-card h2 { font-size: 1.18rem; color: var(--navy-900); margin-bottom: 0.4rem; }
.log-card p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0.8rem; }
.log-more { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-weight: 700; font-size: 0.9rem; color: var(--accent-strong); }
.log-more svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur) var(--ease-back); }
.log-card:hover .log-more svg { transform: translateX(4px); }
.docs-empty { background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 2.5rem 1.5rem; text-align: center; color: var(--ink-mute); }

/* --- Hulp & docs, artikel --- */
.article-layout { display: grid; grid-template-columns: 1fr 250px; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.article-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--navy-900); margin: 2.2rem 0 0.8rem; }
.article-body h3 { font-size: 1.1rem; color: var(--navy-900); margin: 1.6rem 0 0.5rem; }
.article-body p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 68ch; }
.article-body ol.steps-num { counter-reset: s; display: flex; flex-direction: column; gap: 0.8rem; margin: 1rem 0 1.4rem; }
/* Het nummer staat absoluut, de li is bewust geen grid. Bij een grid wordt
   elk kind een eigen cel, dus een <strong> aan het begin van de regel kwam
   naast het nummer te staan en werd de rest van de zin naar een tweede rij
   geduwd. Met inspringen blijft de tekst gewoon doorlopen, ongeacht de opmaak. */
.article-body ol.steps-num li { counter-increment: s; position: relative; padding-left: calc(25px + 0.8rem); color: var(--ink-soft); }
.article-body ol.steps-num li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 25px; height: 25px; border-radius: 7px; background: var(--orange-050); color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
/* Links midden in de tekst. Ze delen de merkoranje met de knoppen, alleen een
   tint dieper zodat ze op wit en op de callout-achtergrond leesbaar blijven.
   Het streepje eronder is geen versiering. Het kleurverschil met de omringende
   tekst is te klein om er alleen op te leunen, dus er hoort een tweede signaal
   bij voor wie kleur slecht onderscheidt. */
.article-body p a,
.article-body li a {
  color: var(--orange-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange-400);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur), color var(--dur);
}
.article-body p a:hover,
.article-body li a:focus-visible,
.article-body li a:hover,
.article-body p a:focus-visible { text-decoration-color: currentColor; }

.codeblock { background: var(--navy-900); border-radius: var(--r-md); padding: 1.1rem 1.3rem; font-family: var(--font-mono); font-size: 0.83rem; line-height: 1.85; color: #c3cce0; overflow-x: auto; margin: 1rem 0 1.4rem; }
.codeblock .c { color: var(--accent); }
.callout { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; background: var(--orange-050); border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1.1rem 1.3rem; margin: 1.2rem 0 1.5rem; }
.callout svg { width: 20px; height: 20px; color: var(--accent-strong); margin-top: 2px; }
.callout p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.toc h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 0.8rem; font-weight: 500; }
.toc a { display: block; padding: 0.4rem 0 0.4rem 0.9rem; border-left: 2px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; transition: color var(--dur), border-color var(--dur); }
.toc a:hover { color: var(--navy-900); border-color: var(--accent); }
.article-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.article-nav a { display: block; padding: 1rem 1.2rem; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: #fff; transition: border-color var(--dur), transform var(--dur); }
.article-nav a:hover { border-color: var(--accent); transform: translateY(-3px); }
.article-nav span { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); margin-bottom: 0.2rem; }
.article-nav strong { color: var(--navy-900); font-size: 0.96rem; }
.article-nav .next { text-align: right; }

/* --- Kennismaking, wizard --- */
.wizard { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 46rem; }
.wiz-progress { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.8rem; }
.wiz-dot { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.wiz-bar { height: 4px; border-radius: 2px; background: var(--line); transition: background var(--dur); }
.wiz-dot.is-done .wiz-bar, .wiz-dot.is-active .wiz-bar { background: var(--accent); }
.wiz-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-mute); }
.wiz-dot.is-active .wiz-label { color: var(--accent-strong); font-weight: 700; }
.wiz-panel h2 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); color: var(--navy-900); margin-bottom: 0.4rem; }
.wiz-panel > p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 0.5rem; }
.choice { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; text-align: left; font-weight: 600; color: var(--navy-900); font-size: 0.95rem; transition: all var(--dur); }
.choice:hover { border-color: var(--navy-700); transform: translateY(-2px); }
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--orange-050); }
.choice-tick { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: grid; place-items: center; }
.choice[aria-pressed="true"] .choice-tick { border-color: var(--accent); background: var(--accent); }
.choice-tick svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.choice[aria-pressed="true"] .choice-tick svg { opacity: 1; }
.wiz-field { margin-bottom: 1.1rem; }
.wiz-field label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--navy-900); margin-bottom: 0.4rem; }
.wiz-field input, .wiz-field textarea, .wiz-field select { width: 100%; padding: 0.8rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); font: inherit; font-size: 0.96rem; color: var(--navy-900); background: #fff; transition: border-color var(--dur); }
.wiz-field textarea { min-height: 110px; resize: vertical; }
.wiz-field input:focus, .wiz-field textarea:focus, .wiz-field select:focus { outline: none; border-color: var(--accent); }
.wiz-error { display: block; color: #dc2626; font-size: 0.84rem; margin-top: 0.35rem; min-height: 1em; }
.wiz-nav { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.wiz-nav .btn-ghost { margin-right: auto; }
.wiz-review { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.2rem; }
.wiz-review div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft); }
.wiz-review dt { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.wiz-review dd { color: var(--navy-900); font-weight: 600; font-size: 0.95rem; }
.wiz-done { text-align: center; padding: 1.5rem 0; }
.wiz-done .tick { width: 62px; height: 62px; border-radius: 50%; background: rgba(52,211,153,0.16); color: #0d9668; display: grid; place-items: center; margin: 0 auto 1.2rem; }
.wiz-done .tick svg { width: 30px; height: 30px; }
.wiz-done h2 { color: var(--navy-900); margin-bottom: 0.5rem; }
.wiz-done p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }

@media (max-width: 980px) {
  .detail-layout, .docs-layout, .article-layout { grid-template-columns: 1fr; }
  .detail-aside, .docs-side, .toc { position: static; }
  .related { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .choice-grid { grid-template-columns: 1fr; }
  .wiz-review div { grid-template-columns: 1fr; gap: 0.2rem; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav .next { text-align: left; }
  .wiz-label { display: none; }
}

/* --- Hulp en docs, filters als uitklapbaar paneel op mobiel --- */
.docs-bar { display: flex; flex-direction: column; gap: 0.6rem; }
.filter-toggle,
.docs-filters-head,
.docs-apply,
.docs-backdrop { display: none; }
.docs-filters { display: flex; flex-direction: column; gap: 1.4rem; }

@media (max-width: 980px) {
  .docs-bar { flex-direction: row; align-items: center; }
  .docs-search { flex: 1; min-width: 0; }

  .filter-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    padding: 0.75rem 1.15rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--line); background: #fff;
    font-weight: 700; font-size: 0.9rem; color: var(--navy-900);
    transition: border-color var(--dur);
  }
  .filter-toggle:hover { border-color: var(--navy-700); }
  .filter-toggle svg { width: 17px; height: 17px; }
  .filter-badge { min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }

  /* Geen reveal-animatie op de zijbalk zolang het paneel erin vast staat.
     Een voorouder met een transform wordt namelijk het referentiekader voor
     een element met position fixed. Tijdens die animatie stond het paneel
     daardoor midden in de pagina in plaats van buiten beeld, en sprong het
     pas weg toen de animatie klaar was. */
  .docs-side.reveal { opacity: 1; transform: none; transition: none; }

  /* Paneel schuift van onderen in beeld */
  .docs-filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    max-height: 82vh; overflow-y: auto;
    background: #fff; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 1.2rem 1.25rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.25);
    transform: translateY(100%);
    /* Dicht is ook echt weg, dus niet te bereiken met de tabtoets en niet
       voor te lezen. Het omklappen wacht tot het schuiven klaar is. */
    visibility: hidden;
    transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .docs-filters.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s var(--ease-out), visibility 0s linear 0s;
  }

  .docs-filters-head { display: flex; align-items: center; justify-content: space-between; }
  .docs-filters-head strong { font-size: 1.05rem; color: var(--navy-900); }
  .docs-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--slate-100); color: var(--navy-900); display: grid; place-items: center; }
  .docs-close:hover { background: var(--line); }
  .docs-apply { display: inline-flex; justify-content: center; }

  .docs-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(15, 23, 42, 0.45); }
}

/* =====================================================================
   OVER ONS
   ===================================================================== */
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.story-copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--navy-900); margin-bottom: 1.1rem; }
.story-copy p { color: var(--ink-soft); margin-bottom: 1rem; max-width: 58ch; }

.story-visual { background: linear-gradient(155deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800)); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-lg); }
.timeline { display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 68px 1fr; gap: 1.1rem; padding-bottom: 1.5rem; position: relative; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 78px; top: 26px; bottom: 4px; width: 2px; background: rgba(255,255,255,0.12); }
.timeline li:last-child { padding-bottom: 0; }
.tl-year { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--orange-400); padding-top: 2px; }
.tl-body { position: relative; padding-left: 1.6rem; }
.tl-body::before { content: ""; position: absolute; left: -0.35rem; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--navy-900); border: 2.5px solid var(--accent); }
.tl-body strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 0.2rem; }
.tl-body span { color: #aab4c9; font-size: 0.9rem; line-height: 1.5; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.value-tile { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.8rem 1.6rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.value-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.v-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-050); color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; margin-bottom: 1.1rem; }
.value-tile h3 { font-size: 1.12rem; color: var(--navy-900); margin-bottom: 0.45rem; }
.value-tile p { color: var(--ink-soft); font-size: 0.95rem; }

.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fact-tile { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.fact-tile strong { display: block; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--navy-900); letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.fact-tile span { color: var(--ink-soft); font-size: 0.92rem; }

/* Teaser naar een andere sectie of pagina */
.teaser { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
.teaser h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--navy-900); margin-bottom: 0.4rem; }
.teaser p { color: var(--ink-soft); max-width: 60ch; }

/* =====================================================================
   DIENSTPAGINA, uitgebreide opzet
   ===================================================================== */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.benefit { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.benefit:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.benefit-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--orange-050); color: var(--accent-strong); display: grid; place-items: center; margin-bottom: 1.1rem; }
.benefit-ic svg { width: 23px; height: 23px; }
.benefit h3 { font-size: 1.12rem; color: var(--navy-900); margin-bottom: 0.45rem; }
.benefit p { color: var(--ink-soft); font-size: 0.95rem; }

.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.spec { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.spec strong { display: block; color: var(--navy-900); font-size: 1.02rem; margin-bottom: 0.35rem; }
.spec span { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; }

.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2.2rem; }
.reasons li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; color: var(--ink-soft); }
.reasons svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* Aanvraagblok onderaan een dienstpagina */
.enquiry { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
  background: linear-gradient(155deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  border-radius: var(--r-lg); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: 0 50px 100px -50px rgba(15,23,42,0.45); }
.enquiry h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: #fff; margin-bottom: 0.7rem; }
.enquiry p { color: #b9c2d6; max-width: 48ch; }
.enquiry-actions { display: flex; flex-direction: column; gap: 0.8rem; }
.enquiry-line { display: flex; align-items: center; gap: 0.7rem; color: #e9edf6; font-weight: 700; font-size: 0.98rem; }
.enquiry-line svg { width: 19px; height: 19px; color: var(--orange-400); flex-shrink: 0; }

@media (max-width: 980px) {
  .story-grid, .enquiry { grid-template-columns: 1fr; }
  .values-grid, .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-row { grid-template-columns: repeat(2, 1fr); }
  .teaser { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .values-grid, .benefit-grid, .spec-grid, .reasons, .facts-row { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 56px 1fr; gap: 0.8rem; }
  .timeline li:not(:last-child)::before { left: 63px; }
}

/* =====================================================================
   RITME OP SUBPAGINA'S
   Subpagina's hebben meer secties achter elkaar dan de homepage. Met de
   volle sectie-padding ontstond daar 288px lege ruimte tussen elk blok.
   ===================================================================== */
.subpage { --fade: clamp(48px, 6vw, 90px); }
.subpage .section { padding: clamp(3.25rem, 6.5vw, 5.5rem) 0; }
.subpage .section-tight { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Niet helemaal tegen het vorige blok aan, maar wel dichter dan een gewone sectie */
.subpage .section-flush { padding-top: clamp(1.75rem, 3.5vw, 3rem); }
.subpage .page-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.subpage .cta-band { padding: clamp(3.25rem, 6.5vw, 5.5rem) 0; }
.subpage .section-head { margin-bottom: clamp(2rem, 3.5vw, 2.8rem); }

/* De sticky aside mag niet losgezongen onderin blijven hangen */
.subpage .detail-layout { align-items: start; }
.subpage .detail-main > :last-child { margin-bottom: 0; }

/* --- Stapkaarten (werkwijze op Over ons) ------------------------------
   Deze stijlen hoorden bij de oude werkwijze-sectie op de homepage. Die
   sectie is vervangen door de mini-game, maar de markup wordt nog gebruikt
   op Over ons, dus de stijlen horen hier thuis. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 2rem 1.7rem 1.9rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step-badge { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.3rem; background: var(--orange-050); color: var(--accent); }
.step-num { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; }
.step h3 { font-size: 1.2rem; color: var(--navy-900); margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }
.step::after { content: ""; position: absolute; top: 3rem; right: -1rem; width: 2rem; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); opacity: 0.5; }
.step:last-child::after { display: none; }

@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } .step::after { display: none; } }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

/* --- Voor wie is deze dienst bedoeld --- */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.audience {
  background: #fff; border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 1.5rem 1.6rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.audience:hover { transform: translateX(5px); box-shadow: var(--shadow-md); }
.audience strong { display: block; color: var(--navy-900); font-size: 1.05rem; margin-bottom: 0.45rem; }
.audience span { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

@media (max-width: 980px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .audience-grid { grid-template-columns: 1fr; } }

/* --- Onderhoudspakketten --- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 60rem; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.9rem 1.9rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan.is-featured { border-color: var(--accent); box-shadow: 0 22px 55px -32px rgba(245,129,59,0.75); }
.plan-badge {
  position: absolute; top: -0.8rem; left: 1.9rem;
  background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.32rem 0.8rem; border-radius: var(--r-pill);
}
.plan-name { font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); }
.plan-price { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.6rem 0 0.2rem; }
.plan-price b { font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; color: var(--navy-900); }
.plan-price span { font-size: 0.95rem; color: var(--ink-mute); font-weight: 600; }
.plan-note { font-size: 0.88rem; color: var(--ink-mute); }
.plan-list { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.plan-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: var(--ink-soft); font-size: 0.95rem; }
.plan-list svg { width: 19px; height: 19px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.plan-list li.is-lead { color: var(--navy-900); font-weight: 700; }
.plan-list .plan-value { display: block; font-size: 0.85rem; color: var(--ink-mute); font-weight: 400; }
.plans-note { margin-top: 1.4rem; font-size: 0.92rem; color: var(--ink-mute); max-width: 60ch; }

@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

/* --- Praktijkvoorbeeld van een automatisering --- */
.flow { background: var(--navy-900); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.flow-body { padding: 1.3rem 1.5rem 1.5rem; font-family: var(--font-mono); font-size: 0.83rem; }
.flow-line { display: grid; grid-template-columns: 80px 1fr; gap: 0.8rem; padding: 0.42rem 0; color: #b9c2d6; line-height: 1.5; }
.flow-tag { color: var(--accent); }
.flow-done svg { width: 17px; height: 17px; flex-shrink: 0; }
.flow-done { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.09); color: var(--ok); }
.flow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.09); }
.flow-stats b { display: block; color: #fff; font-size: 0.98rem; font-family: var(--font-sans); font-weight: 700; }
.flow-stats span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8b96ac; }
.flow-note { padding: 0 1.5rem 1.3rem; font-family: var(--font-mono); font-size: 0.72rem; color: #8b96ac; line-height: 1.5; }

/* --- Toepassingen per afdeling --- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.usecase { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.4rem 1.5rem; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
.usecase:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.usecase-dep { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); background: var(--orange-050); padding: 0.26rem 0.62rem; border-radius: var(--r-pill); margin-bottom: 0.8rem; }
.usecase p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }


@media (max-width: 980px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .usecase-grid { grid-template-columns: 1fr; } .flow-stats { grid-template-columns: 1fr; } }

/* --- Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots ------
   Niet met display:none, want sommige bots slaan verborgen velden over. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ruimte om de Turnstile-widget */
.cf-turnstile { margin: 0 0 1.1rem; }
.form-body .cf-turnstile { margin-top: 0.4rem; }

/* Kennismakingsformulier horizontaal gecentreerd */
.wizard { margin-inline: auto; }
.wiz-fout { margin-top: 0.8rem; text-align: center; font-weight: 600; }

/* --- Mailserverkaarten in een hulpartikel --- */
.mailcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.4rem 0 1.8rem; }
.mailcard { background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 1.4rem 1.5rem; }
.mailcard-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.mailcard-top h3 { margin: 0; font-size: 1.08rem; color: var(--navy-900); }
.mailcard-top svg { width: 20px; height: 20px; color: var(--ink-mute); flex-shrink: 0; }
.mc-label { display: block; font-size: 0.8rem; color: var(--ink-mute); margin-bottom: 0.2rem; }
.mc-host { font-weight: 800; font-size: 1.05rem; color: var(--navy-900); margin: 0 0 1.1rem; letter-spacing: -0.01em; word-break: break-all; }
.mc-ports { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.mc-ports b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; }
.mc-note { display: block; margin-top: 0.9rem; font-size: 0.82rem; color: var(--ink-mute); font-style: italic; }

@media (max-width: 720px) { .mailcards { grid-template-columns: 1fr; } }