/* ============================================================
   Volt Repair Shop — styles.css
   Static site, no build step. Mobile-first from 375px.
   Design tokens as CSS custom properties; dark surfaces re-map
   the same tokens via .theme-dark so components adapt.
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* color */
  --bg: #fafaf9;
  --surface: #ffffff;
  --ink: #16181d;
  --ink-2: #494f59;
  --ink-3: #5f6570;
  --accent: #1d4ed8;
  --accent-hover: #1740b3;
  --accent-tint: #eef3fe;
  --accent-soft: #9db4ff;
  --border: #e6e5e2;
  --border-strong: #c9cbcf;
  --success-bg: #edf7f0;
  --success-border: #bfe3cc;
  --success-ink: #14572e;
  --open-dot: #3fbf7f;

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  /* system mono for the "spec label" microcopy layer: eyebrows, status chip,
     step numbers, dt labels, schermwoorden — geen extra font-download */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
    Consolas, monospace;
  /* fel merkblauw (o.a. de telefoon in het logo op donkere vlakken,
     de onderstreping in de hero en de bliksem-accenten) */
  --volt: #4f7dff;

  /* Sectiepalet: één donker anker bovenaan (masthead) en één onderaan
     (moederbord), daartussen lichte pasteltinten per product. Lichte
     buren lopen via een verloop in elkaar over; donker ↔ licht is een
     bewuste harde overgang, zoals Apple's zwarte masthead → witte sectie. */
  --band-1: #0e1626;   /* diep nachtblauw · laptop & MacBook */
  --band-2: #ececf7;   /* licht lila · smartphone */
  --band-3: #e2f0f2;   /* licht mint · console */
  --band-4: #e8f1fb;   /* licht hemelsblauw · tablet */
  --band-5: #131c36;   /* elektrisch donkerblauw · moederbord & data */

  /* spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* shape + layout */
  --radius: 12px;
  --radius-lg: 24px;
  --container: 1120px;
  --text-max: 680px;
  --header-h: 56px;
}

/* Dark surfaces (hero panel, component section, footer):
   same component classes, re-mapped tokens */
.theme-dark {
  --bg: #14161b;
  --surface: #1d2129;
  --ink: #f2f3f5;
  --ink-2: #c6cad1;
  --ink-3: #9aa0aa;
  --accent-tint: #232a3b;
  --border: #2a2f38;
  --border-strong: rgba(255, 255, 255, 0.28);
  background-color: var(--bg);
  color: var(--ink-2);
}
.theme-dark a { color: var(--accent-soft); }

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0 0 0.5em;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1, h2 { font-family: var(--font-display); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }

ul, ol { margin: 0; padding: 0; }

img { max-width: 100%; height: auto; display: block; }

svg { display: block; }

/* hidden-attribuut wint altijd, ook van componenten met eigen display */
[hidden] { display: none !important; }

::selection { background: #cddcff; color: #16181d; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.theme-dark :focus-visible { outline-color: var(--accent-soft); }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}
.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 600;
}

/* ---------- Scroll reveal (JS adds .js on <html>) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Animatielussen buiten beeld pauzeren ----------
   Alle oneindige CSS-lussen leven in de productvisuals. main.js zet
   .is-offstage op elke visual die niet (bijna) in beeld is; de lussen
   pauzeren dan en lopen bij het terugscrollen gewoon verder waar ze
   gebleven waren — onzichtbaar voor de bezoeker, merkbaar voor de
   main thread en de batterij. */
.js .product-visual.is-offstage,
.js .product-visual.is-offstage * { animation-play-state: paused !important; }

/* ---------- Layout primitives ---------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: var(--sp-8); }

.section--surface {
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-head { max-width: var(--text-max); margin-bottom: var(--sp-6); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.eyebrow b {
  font-weight: 600;
  color: var(--accent);
  margin-right: 10px;
  font-variant-numeric: tabular-nums;
}
.theme-dark .eyebrow b { color: var(--accent-soft); }

.section-title { font-size: clamp(27px, 4.5vw, 36px); }
/* huisstijl-punt: elke sectietitel eindigt op een blauw punt
   (behalve titels met eigen leesteken, bv. een vraag) */
.section-title::after { content: "."; color: var(--accent); }
.theme-dark .section-title::after { color: var(--accent-soft); }
.section-title--plain::after { content: none; }

.section-intro { font-size: 17px; }

@media (min-width: 900px) {
  .container { padding-inline: 32px; }
  .section { padding-block: var(--sp-9); }
  .section-head { margin-bottom: var(--sp-7); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px -10px rgba(29, 78, 216, 0.55);
}
.btn--primary:hover { background-color: var(--accent-hover); }

.btn--secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--ink); }
.theme-dark .btn--secondary:hover { border-color: #ffffff; }

/* op donkere vlakken wint ".theme-dark a" het anders van de knopkleur */
.theme-dark a.btn--primary { color: #ffffff; }
.theme-dark a.btn--secondary { color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; }
.theme-dark .link-arrow { color: var(--accent-soft); }

/* Knoppen naast elkaar als pillen, ook op mobiel (à la Apple);
   op heel smalle schermen wrappen ze vanzelf onder elkaar. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(250, 250, 249, 0.88);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 4px 24px rgba(22, 24, 29, 0.05);
}

/* Donkere variant: versmelt met het masthead en blijft donker boven de
   lichtere secties eronder (à la Apple's zwarte navigatiebalk). */
.site-header.theme-dark {
  background-color: rgba(12, 16, 24, 0.8);
}
.site-header.theme-dark.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.site-header.theme-dark .lang-link { color: var(--ink-3); }
.site-header.theme-dark .lang-link:hover { color: var(--ink); }
.site-header.theme-dark .icon-btn { color: var(--ink); }

/* Open-status als compacte chip in de headerbalk (homepage) */
.site-header .chip {
  margin-bottom: 0;
  padding: 5px 11px;
  font-size: 12px;
  white-space: nowrap;
}

/* Google-score naast de statuschip; enkel wanneer er ruimte voor is */
.site-header .header-rating {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}
.site-header .header-rating:hover { color: var(--ink); }
.site-header .header-rating svg { color: var(--accent-soft); flex: none; }
@media (min-width: 1320px) {
  .site-header .header-rating { display: inline-flex; }
}

@media (max-width: 559px) {
  /* smalle schermen: de merkondertitel maakt plaats voor de statuschip */
  .brand .brand-sub { display: none; }
}
@media (max-width: 479px) {
  /* heel smal: het belicoon wijkt — bellen kan via elke sectieknop */
  .site-header.theme-dark .header-actions a.icon-btn { display: none; }
}

/* de header mag breder uitwaaieren dan de gewone content-container */
.site-header .container {
  max-width: 1600px;
  padding-inline: clamp(20px, 3vw, 48px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* het beeldmerk ís de V van "Volt": kaphoogte, punt op de basislijn */
.brand-mark {
  flex: none;
  height: 0.74em;
  width: auto;
  aspect-ratio: 78 / 76;
}
.brand-mark .m-v {
  fill: none;
  stroke: currentColor;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-mark .m-phone { fill: var(--accent); }
.theme-dark .brand-mark .m-phone { fill: var(--volt); }
.brand-mark .m-bolt { fill: #fff; }
.brand-mark .m-phone-g {
  transition: transform 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.brand:hover .m-phone-g { transform: rotate(8deg); }
/* op donkere vlakken wint ".theme-dark a" het anders van het woordmerk */
.theme-dark a.brand { color: var(--ink); }
.brand .brand-word { margin-left: -0.11em; }
.brand .brand-sub { font-weight: 500; color: var(--ink-3); margin-left: 0.5em; }

.site-nav { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.icon-btn:hover { border-color: var(--ink); }

/* Taalwissel (NL ↔ EN) in de header */
.lang-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-decoration: none;
  border-radius: var(--radius);
}
.lang-link:hover { color: var(--ink); }

.header-cta { display: none; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) 20px var(--sp-4);
  box-shadow: 0 24px 40px rgba(22, 24, 29, 0.08);
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--border);
}
.mobile-nav a:first-child { border-top: 0; }

/* Smartphone-submenu in het mobiele paneel: native <details>-accordeon,
   zelfde regel-look als de andere mobiele links, met de merken eronder. */
.mobile-drop { border-top: 1px solid var(--border); }
.mobile-nav > .mobile-drop:first-child { border-top: 0; }
.mobile-drop summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.mobile-drop summary::-webkit-details-marker { display: none; }
.mobile-drop summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.mobile-drop[open] summary::after { transform: rotate(-135deg); }
.mobile-drop ul { list-style: none; margin: 0 0 8px; padding: 0; }
.mobile-drop li a {
  display: block;
  padding: 10px 4px 10px 16px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-top: 0;
}
.mobile-drop li a:hover { color: var(--ink); }

/* Vijf productlinks + statuschip hebben ruimte nodig: pas vanaf 1140px
   een volledige navigatie, daaronder het menu-icoon. */
@media (min-width: 1140px) {
  .header-inner { min-height: 64px; }
  /* de tussenruimte ademt mee met de schermbreedte */
  .site-nav { display: flex; gap: clamp(14px, 2vw, 28px); }
  .site-nav a {
    position: relative;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    padding: var(--sp-2) 0;
  }
  .site-nav a:hover { color: var(--ink); }
  /* scrollspy: sectie in beeld = streepje onder de nav-link (main.js) */
  .site-nav a.is-active { color: var(--ink); }
  .site-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--accent);
  }
  .header-cta { display: inline-flex; min-height: 40px; padding: 8px 18px; font-size: 15px; }
  /* afspraak-CTA als icoonknop (kalender), zonder tekst — bespaart ruimte */
  .header-cta--icon { width: 40px; padding: 0; }
  .icon-btn, .menu-btn { display: none; }
  .mobile-nav { display: none !important; }

  /* Smartphone-dropdown: de merken verschijnen bij hover, focus of klik. */
  .nav-drop { position: relative; display: inline-flex; align-items: center; gap: 2px; }
  .nav-drop-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
  }
  .nav-drop-toggle:hover { color: var(--ink); }
  .nav-drop-toggle svg { transition: transform 0.2s ease; }
  .nav-drop:hover .nav-drop-toggle svg,
  .nav-drop.is-open .nav-drop-toggle svg { transform: rotate(180deg); }
  .nav-drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 60;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    min-width: 320px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 44px rgba(10, 12, 16, 0.35);
  }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu,
  .nav-drop.is-open .nav-drop-menu { display: grid; }
  .nav-drop-menu li a {
    display: block;
    padding: 8px 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
  }
  .nav-drop-menu li a:hover { background-color: var(--bg); color: var(--ink); }
  .nav-drop-menu li.nav-drop-all { grid-column: 1 / -1; }
  .nav-drop-menu li.nav-drop-all a { color: var(--accent); font-weight: 600; }
}

/* ---------- Hero: dark panel on light page ---------- */

.hero { padding-block: var(--sp-4) var(--sp-8); }

.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-7) var(--sp-5) 0;
  background-color: #14161b;
  background-image:
    radial-gradient(640px 420px at 12% -10%, rgba(64, 106, 255, 0.28), transparent 62%),
    radial-gradient(560px 380px at 95% 115%, rgba(29, 78, 216, 0.20), transparent 60%);
  box-shadow: 0 32px 64px -36px rgba(29, 78, 216, 0.35);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-bottom: 44px;
}

/* Schematische lijntekeningen: hero én productpanelen delen deze klassen */
.hv-part { stroke-opacity: 0.7; }
.hv-faint { stroke-opacity: 0.38; }
.hv-cable { stroke-opacity: 0.55; }
.hv-accent { stroke: var(--band-accent, var(--volt)); stroke-opacity: 1; }
/* zwaardere buitencontour: geeft de tekening reliëf t.o.v. de fijne binnenkant */
.hv-edge { stroke-width: 2.5; stroke-opacity: 0.95; }
/* Hero 3D-explosie: een conceptlaptop uit 6 conceptonderdelen — scherm,
   toetsenbord, trackpad, batterij, SSD en moederbord. Bij het laden staat
   de laptop in elkaar én herkenbaar open: dek met toetsen en trackpad
   vlak, scherm overeind aan de achterrand, binnenwerk nog onzichtbaar.
   Daarna barst hij in één trage 360°-explosie uit elkaar: elk deel vliegt
   radiaal naar zijn eigen plek in een wolk rondom het hart (scherm boven,
   SSD rechtsboven, trackpad rechtsonder, batterij linksonder, toetsenbord
   links, moederbord onthuld in het midden) en kantelt daarbij licht uit
   het vlak — als een explosie bevroren in slow motion. Microschroefjes
   hangen ertussen, gestippelde stelassen suggereren de montage-as, en elk
   deel krijgt een vast naamplaatje. Geen doorlopende draaiing; elk deel
   blijft wel traag zweven en natuimelen. Puur CSS, geen scroll. De
   basistoestand hieronder IS de geëxplodeerde eindstand: zonder animatie
   of bij reduced motion staat die er meteen, netjes en stil. */
.l3d-fit {
  /* geëxplodeerde stapel her-centreren + schalen naar de kolom (per breakpoint) */
  transform: translate(var(--l3d-x, 20px), var(--l3d-y, 66px)) scale(var(--l3d-s, 0.62));
}
.l3d {
  position: relative; width: 300px; height: 200px;
  perspective: 1500px;
  color: var(--band-line, var(--accent-soft));
}
.l3d-scene {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-32deg);
}
.l3d-stack, .l3d-tags { position: absolute; inset: 0; transform-style: preserve-3d; }
/* elk deel vliegt naar zijn eigen plek in een wolk róndom het hart:
   --dx/--dy/--z = radiale eindpositie, --tx/--ty/--rz = een lichte
   3D-tuimeling (uit het vlak gekanteld, als bevroren in de explosie) */
.l3d-layer {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), var(--z, 0px)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) rotateZ(var(--rz, 0deg));
}
/* explosie: alles barst vrijwel tegelijk los, met lichte jitter
   (ruimer gespreid nu de burst zelf in slow motion verloopt) */
.l3d-layer[data-layer="board"]    { --rd: 0s; }
.l3d-layer[data-layer="screen"]   { --rd: 0.10s; }
.l3d-layer[data-layer="keyboard"] { --rd: 0.15s; }
.l3d-layer[data-layer="battery"]  { --rd: 0.20s; }
.l3d-layer[data-layer="ssd"]      { --rd: 0.25s; }
.l3d-layer[data-layer="screws-a"] { --rd: 0.25s; }
.l3d-layer[data-layer="trackpad"] { --rd: 0.30s; }
.l3d-layer[data-layer="screws-b"] { --rd: 0.35s; }
.l3d-bob { position: absolute; inset: 0; transform-style: preserve-3d; }
/* scharnierklep om het scherm: vlak = eindstand; de animatie start overeind
   (open laptop) en klapt het deksel plat rond de achterrand */
.l3d-fold {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform-origin: 50% 8px;
}
.product-visual .l3d svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* zachte, scherpe slagschaduw net onder het grondvlak van de stapel */
.l3d-shadow {
  position: absolute; left: -10px; top: -12px; width: 320px; height: 224px;
  transform: translateZ(-16px);
  background: radial-gradient(46% 42% at 50% 52%, rgba(7, 9, 14, 0.6), rgba(7, 9, 14, 0.26) 58%, transparent 78%);
}
/* stelassen: gestippelde verticalen op de vier hoeken + accentas door het
   hart; ze staan rechtop in de scène en verbinden grondvlak met deksel */
.l3d-guide {
  position: absolute; left: 0; top: 0; width: 2px; height: 238px;
  transform-origin: 0 0;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) rotateX(90deg);
  background: repeating-linear-gradient(to bottom, currentColor 0 5px, transparent 5px 12px);
  opacity: 0.18;
}
.l3d-guide--axis {
  height: 260px; opacity: 0.3;
  background: repeating-linear-gradient(to bottom, var(--band-accent, var(--volt)) 0 5px, transparent 5px 12px);
}
/* naamplaatje per deel, ge-billboard zodat het leesbaar naar de kijker wijst;
   ankerpunt = (--ax, --ay) op hoogte --z, vlak bij waar het deel heen blies */
.l3d-tag {
  position: absolute; left: var(--ax, 50%); top: var(--ay, 50%);
  transform: translateZ(var(--z, 0px)) rotateZ(32deg) rotateX(-52deg) translate(26px, -50%);
  transform-origin: 0 0;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--ink-2); font: 500 12px/1.4 var(--font-mono); white-space: nowrap;
}
.l3d-tag::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 22px; height: 1px;
  background: currentColor; opacity: 0.4;
}
/* variant met het plaatje links van het anker (lijntje aan de rechterkant) */
.l3d-tag--l { transform: translateZ(var(--z, 0px)) rotateZ(32deg) rotateX(-52deg) translate(calc(-100% - 26px), -50%); }
.l3d-tag--l::before { right: auto; left: 100%; }

@media (prefers-reduced-motion: no-preference) {
  /* fade-in van de open laptop, korte adempauze, dan één burst in slow
     motion: een snelle knal die meteen vertraagt — de delen schieten los
     en glijden daarna seconden lang uit naar hun wolk rondom het hart,
     licht tuimelend in 3D (het scherm klapt onderweg traag plat).
     Binnenwerk en schroefjes faden in terwijl ze komen; stelassen
     halverwege, namen tegen het einde; daarna blijft elk deel traag
     natuimelen en flikkert het schermpaneel halfgaar aan (lid-flicker) */
  .l3d { animation: l3d-in 0.6s ease both; }
  .l3d-layer {
    animation: l3d-rise 4.8s cubic-bezier(0.08, 0.95, 0.2, 1) calc(1.4s + var(--rd, 0s)) both;
    will-change: transform;
  }
  /* binnenwerk en losse schroefjes zitten in gesloten stand uit het zicht —
     ze faden in terwijl ze komen */
  .l3d-layer[data-layer="board"],
  .l3d-layer[data-layer="battery"],
  .l3d-layer[data-layer="ssd"],
  .l3d-layer[data-layer="screws-a"],
  .l3d-layer[data-layer="screws-b"] {
    animation:
      l3d-rise 4.8s cubic-bezier(0.08, 0.95, 0.2, 1) calc(1.4s + var(--rd, 0s)) both,
      l3d-in 1.2s ease calc(1.4s + var(--rd, 0s)) both;
  }
  /* het deksel klapt dicht terwijl zijn laag wegvliegt (zelfde timing als
     de rise van data-layer="screen": 1.4s + 0.10s) */
  .l3d-layer[data-layer="screen"] .l3d-fold {
    animation: l3d-fold 4.8s cubic-bezier(0.08, 0.95, 0.2, 1) 1.5s both;
  }
  .l3d-shadow { animation: l3d-shadow-in 4.8s cubic-bezier(0.08, 0.95, 0.2, 1) 1.4s both; }
  .l3d-guide { animation: l3d-guide-in 1.2s ease 3.6s both; }
  .l3d-bob { animation: l3d-bob var(--bt, 4.5s) ease-in-out var(--bd, 3s) infinite alternate; }
  .l3d-tag { animation: l3d-in 0.7s ease 5.6s both; }
}

/* Kapotte neonlijst + werkbankwoorden: na de explosie draait het scherm
   een vaste cyclus per woord (4,9 s, steps = harde knippen):
     aan­floepen → woord wordt regel per regel "ingetypt" (clip-path met
     steps(aantal tekens)) → even rustig leesbaar met een zeldzame
     micro-flikker → glitchstorm van ± 0,75 s (de lijst verspringt en
     skewt, cyaan en rood spookframe flitsen verschoven op) → scherm
     zwart → volgend woord typt in. De woorden staan ín .lid-neon en
     erven dus elke zoem, scheur en blackout. Acht woorden: elk element
     draait dezelfde 39,2s-lus (8 × 4,9 s), verschoven via --wd (groep),
     --td (typregel, +0,1 s en +1,35 s na --wd) en --n (tekens per regel,
     = het aantal typstappen). Statisch/reduced motion: constant zacht
     aan met alleen het eerste woord, volledig getypt, geen spoken. */
.lid-neon {
  opacity: 0.5;
  transform-box: view-box;
}
.lid-neon-tube {
  filter: drop-shadow(0 0 3px var(--volt)) drop-shadow(0 0 9px rgba(79, 125, 255, 0.55));
}
.lid-neon-ghost { opacity: 0; }
.lid-neon-ghost--c { transform: translate(-5px, 2px); }
.lid-neon-ghost--r { transform: translate(5px, -2px); }
.lid-word { opacity: 0; filter: drop-shadow(0 0 5px rgba(79, 125, 255, 0.6)); }
.lid-word--init { opacity: 1; }
.lid-word text { stroke: none; letter-spacing: 0.04em; }
.lid-word-t { fill: #d7e4ff; font: 600 16px/1 var(--font-mono); }
@media (prefers-reduced-motion: no-preference) {
  .lid-neon {
    opacity: 0;
    animation: lid-neon-power 4.9s steps(1, end) 6.6s infinite;
  }
  .lid-neon-ghost {
    animation: lid-neon-ghosts 4.9s steps(1, end) 6.6s infinite;
  }
  .lid-word {
    animation: lid-word-window 39.2s steps(1, end) var(--wd, 6.6s) infinite;
  }
  .lid-word-t {
    clip-path: inset(0 0 0 0);
    /* backwards: vóór de eigen typvertraging geldt het 0%-frame
       (volledig weggeknipt) — anders staat regel 2 er al vóór hij typt */
    animation: lid-type 39.2s steps(var(--n, 10), end) var(--td, 6.7s) infinite backwards;
  }
}
@keyframes lid-neon-power {
  0% { opacity: 0; transform: none; }
  2% { opacity: 1; }
  4% { opacity: 0.6; }
  6% { opacity: 1; }
  30% { opacity: 0.85; }
  32% { opacity: 1; }
  55% { opacity: 0.9; }
  57% { opacity: 1; }
  77.5% { opacity: 1; transform: translateX(-3px); }
  79.5% { transform: translateX(2.5px) skewX(-2deg); }
  81.5% { opacity: 0.55; transform: translateX(-1.5px); }
  83.5% { opacity: 1; transform: translate(2px, -1.5px); }
  85.5% { transform: translateX(-2.5px) skewX(2deg); }
  87.5% { opacity: 0.4; transform: translateX(1.5px); }
  89.5% { opacity: 1; transform: translate(-2px, 1px) skewX(-1.5deg); }
  91.5% { opacity: 0.7; transform: translateX(2px); }
  92.8%, 100% { opacity: 0; transform: none; }
}
@keyframes lid-neon-ghosts {
  0%, 77% { opacity: 0; }
  77.5% { opacity: 0.75; }
  80.5% { opacity: 0; }
  82.5% { opacity: 0.7; }
  86% { opacity: 0; }
  88% { opacity: 0.8; }
  92%, 100% { opacity: 0; }
}
/* woordvenster: zichtbaar tot de blackout van zijn eigen neoncyclus
   (11,6 % van 39,2 s = 4,55 s = 92,8 % van 4,9 s) */
@keyframes lid-word-window {
  0% { opacity: 1; }
  11.6%, 100% { opacity: 0; }
}
/* typmachine: regel onthult zich in --n stappen over 1,1 s (2,81 %) */
@keyframes lid-type {
  0% { clip-path: inset(0 100% 0 0); }
  2.81%, 100% { clip-path: inset(0 0 0 0); }
}

/* Printplaat onder spanning (sectie 05): over de bestaande koperbanen
   ligt per spoor een fellere overlay met pathLength=100 — een korte dash
   die via stroke-dashoffset langs het spoor reist als een stroompuls
   (--fdur/--fdel ontsynchroniseren de sporen). De via's ademen zachtjes
   mee en op drie soldeerpunten springt met lange, ongelijke tussenpozen
   een vonkje over (steps = harde flits). Statisch/reduced motion: de
   sporen gloeien constant zwak na, via's staan half aan, geen vonken. */
.pcb-flow {
  stroke: var(--volt);
  stroke-width: 2;
  opacity: 0.35;
  filter: drop-shadow(0 0 3px var(--volt));
}
.pcb-via {
  fill: var(--volt);
  stroke: none;
  opacity: 0.7;
  filter: drop-shadow(0 0 3px var(--volt));
}
.pcb-spark {
  stroke: #b7cdff;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--volt));
}
@media (prefers-reduced-motion: no-preference) {
  .pcb-flow {
    opacity: 1;
    stroke-dasharray: 14 86;
    animation: pcb-flow var(--fdur, 2.6s) linear var(--fdel, 0s) infinite;
  }
  .pcb-via { animation: pcb-via 2.4s ease-in-out var(--fdel, 0s) infinite alternate; }
  .pcb-spark { animation: pcb-spark var(--sdur, 7s) steps(1, end) var(--sdel, 0s) infinite; }
}
@keyframes pcb-flow {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@keyframes pcb-via {
  from { opacity: 0.45; }
  to { opacity: 0.95; }
}
@keyframes pcb-spark {
  0%, 91% { opacity: 0; }
  92% { opacity: 1; }
  94% { opacity: 0.4; }
  95.5% { opacity: 0.9; }
  97%, 100% { opacity: 0; }
}
@keyframes l3d-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes l3d-fold { from { transform: rotateX(105deg); } }
@keyframes l3d-rise {
  from { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to { transform: translate3d(var(--dx, 0px), var(--dy, 0px), var(--z, 0px)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) rotateZ(var(--rz, 0deg)); }
}
/* natuimelen: trage zweef + micro-rotaties om alle assen */
@keyframes l3d-bob {
  from { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  to { transform: translate3d(var(--bx, 0px), var(--by, 0px), var(--bz, 5px)) rotateX(var(--brx, 0deg)) rotateY(var(--bry, 0deg)) rotateZ(var(--br, 0deg)); }
}
/* alleen een from: het to-eind is de basistoestand zelf */
@keyframes l3d-guide-in { from { opacity: 0; } }
@keyframes l3d-shadow-in { from { transform: translateZ(-16px) scale(0.92); opacity: 0.65; } }
/* Pil-labels in de tekeningen: zelfde look als de tag-pillen, met een
   stippellijn naar het onderdeel waar ze bij horen (diagramstijl) */
.hv-pill rect {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.hv-pill text {
  fill: var(--ink-2);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
}
.hv-pill path { stroke-opacity: 0.4; }

/* Scroll-gestuurde 3D-explosie voor de smartphone (sectie 02): zelfde
   3D-taal als de hero-laptop hierboven, maar de voortgang komt niet uit
   keyframes — --p (0 = dichtgeklapt toestel, 1 = geëxplodeerd) wordt door
   main.js aan de scrollpositie gekoppeld, met een lichte lerp zodat het
   uiteentrekken als slow motion aanvoelt. De CSS-default is --p: 1: zonder
   JS of met reduced motion staat de geëxplodeerde eindstand er meteen,
   netjes en stil — zelfde afspraak als de hero. */
.l3d--phone { --p: 1; }
.l3d--phone .l3d-layer {
  animation: none;
  transform:
    translate3d(calc(var(--dx, 0px) * var(--p)), calc(var(--dy, 0px) * var(--p)), calc(var(--z, 0px) * var(--p)))
    rotateX(calc(var(--tx, 0deg) * var(--p)))
    rotateY(calc(var(--ty, 0deg) * var(--p)))
    rotateZ(calc(var(--rz, 0deg) * var(--p)));
}
/* binnenwerk zit in dichte stand uit het zicht en fadet vroeg in de explosie in */
.l3d--phone .l3d-layer[data-layer="moederbord"],
.l3d--phone .l3d-layer[data-layer="batterij"],
.l3d--phone .l3d-layer[data-layer="laadpoort"],
.l3d--phone .l3d-layer[data-layer="camera"],
.l3d--phone .l3d-layer[data-layer="schroefjes"] {
  opacity: clamp(0, calc(var(--p) * 2.5 - 0.25), 1);
}
/* stelassen geleidelijk, naamplaatjes pas tegen het einde van de rit */
.l3d--phone .l3d-guide { animation: none; opacity: calc(0.18 * var(--p)); }
.l3d--phone .l3d-guide--axis { opacity: calc(0.3 * var(--p)); }
.l3d--phone .l3d-tag { animation: none; opacity: clamp(0, calc((var(--p) - 0.65) * 3), 1); }
/* kleinere slagschaduw onder de telefoonvoetafdruk; groeit licht mee.
   De hero-schaduw is op het donkere paneel getekend — hier op de lichte
   baan wordt dat een vlek, dus een zachte violette waas in de plaats. */
.l3d--phone .l3d-shadow {
  animation: none;
  left: 24px; top: 22px; width: 252px; height: 164px;
  transform: translateZ(-16px) scale(calc(0.88 + 0.16 * var(--p)));
  background: radial-gradient(46% 42% at 50% 52%, rgba(76, 29, 149, 0.20), rgba(76, 29, 149, 0.07) 58%, transparent 78%);
}
/* het natuimelen schaalt mee met --p zodat het dichte toestel muisstil ligt */
@media (prefers-reduced-motion: no-preference) {
  .l3d--phone .l3d-bob {
    animation: l3d-bob-p var(--bt, 4.5s) ease-in-out var(--bd, 0s) infinite alternate;
  }
}
@keyframes l3d-bob-p {
  from { transform: translate3d(0, 0, 0); }
  to {
    transform:
      translate3d(calc(var(--bx, 0px) * var(--p, 1)), calc(var(--by, 0px) * var(--p, 1)), calc(var(--bz, 5px) * var(--p, 1)))
      rotateX(calc(var(--brx, 0deg) * var(--p, 1)))
      rotateY(calc(var(--bry, 0deg) * var(--p, 1)))
      rotateZ(calc(var(--br, 0deg) * var(--p, 1)));
  }
}
/* maat & positie in de smartphonekolom (geschaalde scène, geen platte svg);
   de lange staart van het moederbordplaatje (" · datarecovery") past alleen
   op brede schermen zonder de tekstkolom of de baanrand te raken */
.band--2 .product-visual .l3d-fit { --l3d-s: 0.62; --l3d-x: -20px; --l3d-y: 40px; }
.l3d-tag-more { display: none; }
@media (min-width: 1000px) {
  .band--2 .product-visual .l3d-fit { --l3d-s: 0.78; --l3d-x: 4px; --l3d-y: 64px; }
}
@media (min-width: 1200px) {
  .band--2 .product-visual .l3d-fit { --l3d-s: 0.92; --l3d-x: -10px; --l3d-y: 70px; }
}
/* pas vanaf de maximale containerbreedte: daaronder raakt de lange staart
   van het moederbordplaatje de tekstkolom */
@media (min-width: 1280px) {
  .l3d-tag-more { display: inline; }
}
/* de laag-svg's vullen hun laag: wint van de brede productvisual-svg-regel */
.product-band .product-visual .l3d svg { width: 100%; height: 100%; }

/* Console-werfje (sectie 03): de toren is statisch, maar twee draad-
   figuurtjes werken eraan in een lus — één hamert op de kraag (vonk op
   het inslagmoment), één boort trillend in de sokkel. De armgroep is
   getekend met de schouder op het lokale nulpunt van zijn ouder-<g>;
   fill-box + expliciete origin leggen het draaipunt daar vast. Zonder
   animatie (reduced motion) staat de hamer in een natuurlijke rustpose
   en is de vonk onzichtbaar. */
.cw-arm {
  transform-box: fill-box;
  transform-origin: 0px 8px;
  transform: rotate(-38deg);
}
.cw-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .cw-arm { animation: cw-hammer 1.7s infinite; }
  .cw-spark { animation: cw-spark 1.7s infinite; }
  .cw-drill { animation: cw-drill 0.09s linear infinite alternate; }
}
@keyframes cw-hammer {
  0%, 10% { transform: rotate(-72deg); animation-timing-function: cubic-bezier(0.75, 0, 0.95, 1); }
  32% { transform: rotate(42deg); animation-timing-function: cubic-bezier(0.2, 1.6, 0.5, 1); }
  44% { transform: rotate(36deg); animation-timing-function: ease-in-out; }
  92%, 100% { transform: rotate(-72deg); }
}
@keyframes cw-spark {
  0%, 29% { opacity: 0; transform: scale(0.3); }
  33% { opacity: 1; transform: scale(1); }
  48%, 100% { opacity: 0; transform: scale(1.25); }
}
@keyframes cw-drill {
  from { transform: translate(0, 0); }
  to { transform: translate(-1.5px, 0.4px); }
}

/* Tablet-gevelwassers (sectie 04): het hangplatform wiegt als een slinger
   rond het midden van de twee touwankers (de groep is getekend met dat
   punt op het lokale nulpunt: fill-box + origin 55px 0), de wisserarm
   wist heen en weer over de barst en de update-balk op het scherm vult
   zich in een lus (width is op SVG-rects via CSS animeerbaar; het
   width-attribuut is de statische stand). Bij reduced motion hangt alles
   stil in de rustpose hieronder. */
.tw-sway {
  transform-box: fill-box;
  transform-origin: 55px 0px;
  transform: rotate(0.8deg);
}
.tw-wipe {
  transform-box: fill-box;
  transform-origin: 33px 0px;
  transform: rotate(6deg);
}
@media (prefers-reduced-motion: no-preference) {
  .tw-sway { animation: tw-sway 5s ease-in-out infinite alternate; }
  .tw-wipe { animation: tw-wipe 1.3s ease-in-out infinite alternate; }
  .tw-progress { animation: tw-progress 3.4s ease-in-out infinite; }
}
@keyframes tw-sway {
  from { transform: rotate(-1.3deg); }
  to { transform: rotate(1.3deg); }
}
@keyframes tw-wipe {
  from { transform: rotate(-16deg); }
  to { transform: rotate(26deg); }
}
@keyframes tw-progress {
  0% { width: 4px; }
  72%, 100% { width: 30px; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: var(--sp-5);
}
.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ink-3);
  flex: none;
}
.chip.is-open .chip-dot { background-color: var(--open-dot); }

.hero h1 {
  font-size: clamp(34px, 8vw, 58px);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

/* "Kom binnen." krijgt een getekende onderstreping die zichzelf intekent.
   Zonder animatie (reduced motion) staat de streep er gewoon meteen. */
.hl { position: relative; display: inline-block; }
.hl svg {
  position: absolute;
  left: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.2em;
  overflow: visible;
}
.hl path {
  fill: none;
  stroke: var(--volt);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: hl-draw 0.7s ease-out 0.45s both;
}
@keyframes hl-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.hero-lead {
  font-size: clamp(17px, 2.5vw, 19px);
  max-width: 600px;
  margin-bottom: var(--sp-6);
}

/* Google-score als kleine badge onder de knoppen, linkt naar de reviews */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
}
.theme-dark .hero-rating { color: var(--ink-2); }
.hero-rating:hover { text-decoration: underline; }
.hero-rating-stars { display: inline-flex; gap: 2px; color: var(--accent-soft); }
.hero-rating-stars svg { display: block; }

.hero-meta {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}

@media (min-width: 900px) {
  .hero { padding-block: var(--sp-5) var(--sp-9); }
  .hero-panel { padding: 88px 80px 0; }
  .hero-inner { padding-bottom: 64px; }
}

/* ---------- Service-landingspagina's ---------- */

/* kruimelpad boven het heropaneel */
.crumb {
  margin: 2px 0 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb .sep { margin: 0 7px; }

/* compactere hero voor servicepagina's */
.hero--service .hero-panel { padding-top: var(--sp-6); }
.hero--service h1 { font-size: clamp(30px, 6vw, 44px); }
.hero--service .hero-inner { padding-bottom: var(--sp-6); }

/* neutrale kaderdoos (prijsuitleg, eerste-hulp-advies, …) */
.note-box {
  max-width: 760px;
  padding: var(--sp-5);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.note-box h3 { font-size: 18px; }
.note-box p { font-size: 15px; }
.note-box p:last-child { margin-bottom: 0; }
.note-box ol { padding-left: 20px; font-size: 15px; }
.note-box ol li { margin: 4px 0; }
.steps + .note-box { margin-top: var(--sp-7); }

/* tag-rij met links (gerelateerde pagina's) */
.tag-row--links li { padding: 0; }
.tag-row--links a {
  display: inline-block;
  padding: 7px 14px;
  color: inherit;
  text-decoration: none;
}
.tag-row--links li:hover { border-color: var(--ink); }

@media (min-width: 900px) {
  .hero--service .hero-panel { padding: 64px 80px 0; }
  .hero--service .hero-inner { padding-bottom: 48px; }
}

/* ---------- Productpanelen: één sectie per toestelcategorie ----------
   Apple-achtige stapel: het heropaneel is product 1 (laptop & MacBook),
   daaronder krijgt elke categorie een eigen paneel in dezelfde stijl.
   Het laatste paneel (moederbord & datarecovery) is opnieuw donker. */

/* Masthead: geen kaart maar een baan over de volle schermbreedte.
   Kleur = stap 1 van de sectietrap; onderaan loopt het verloop uit op
   stap 2, zodat de smartphonesectie er straks naadloos op aansluit. */
.hero--flagship {
  /* eigen tintstel: lijnkleur van de tekening + felle accentkleur */
  --band-line: var(--accent-soft);
  --band-accent: var(--volt);
  --num-stroke: rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(calc(100svh - var(--header-h)), 860px);
  padding: 0;
  background-color: var(--band-1);
  background-image:
    radial-gradient(760px 500px at 12% -12%, rgba(79, 125, 255, 0.32), transparent 62%),
    radial-gradient(680px 460px at 96% 108%, rgba(29, 78, 216, 0.26), transparent 60%),
    linear-gradient(to bottom, var(--band-1), #17233f);
}

/* het masthead mag iets breder ademen dan de gewone container */
.hero--flagship .container { max-width: 1280px; }

.hero-grid {
  flex: 1;
  display: grid;
  align-content: center;
  gap: var(--sp-6);
  width: 100%;
  padding-block: var(--sp-7) var(--sp-6);
}

.hero--flagship .hero-inner { max-width: 640px; padding-bottom: 0; }
/* zelfde titelgrootte als de andere productbanen: geen sectie "wint" */
.hero--flagship h1 { font-size: clamp(36px, 5.5vw, 64px); }
.hero--flagship h1::after { content: "."; color: var(--band-accent, var(--accent-soft)); }
.hero--flagship .product-visual { order: 2; margin-top: 0; }
/* de 3D-teardown is een geschaalde 3D-scène (geen platte svg): mobiel kleiner */
.hero--flagship .product-visual .l3d-fit { --l3d-s: 0.55; --l3d-x: -28px; --l3d-y: 62px; }

@media (min-width: 1000px) {
  .hero--flagship .product-visual .l3d-fit { --l3d-s: 0.82; --l3d-x: -26px; --l3d-y: 88px; }
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--sp-7);
  }
}

/* de merkgroet verhuist van h1 naar een kicker boven de productnaam */
.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}

/* ---------- Productbanen: volle breedte, één kleurstap per sectie ----------
   Elke productsectie is een baan in dezelfde stijl als het masthead. De
   achtergrond start op de eigen trapkleur en loopt onderaan uit op de
   kleur van de volgende sectie — zo zijn de overgangen naadloos. */

.product-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 112px);
}
.product-band .container { max-width: 1280px; }

/* Spooknummer per sectie (01, 02, …) — subtiel, achter de tekening */
.hero--flagship::before,
.product-band::before {
  content: attr(data-num);
  display: none;
  position: absolute;
  right: 20px;
  bottom: -0.16em;
  font-family: var(--font-display);
  font-size: clamp(160px, 24vw, 320px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--num-stroke, rgba(22, 24, 29, 0.07));
  pointer-events: none;
}
.band--flip::before { right: auto; left: 20px; }

.band--2 {
  --band-line: #8b5cf6;
  --band-accent: #7c3aed;
  background-color: var(--band-2);
  background-image:
    radial-gradient(680px 460px at 10% -12%, rgba(139, 92, 246, 0.13), transparent 62%),
    linear-gradient(to bottom, var(--band-2) 55%, var(--band-3));
}

.band--3 {
  --band-line: #06b6d4;
  --band-accent: #0e7490;
  background-color: var(--band-3);
  background-image:
    radial-gradient(680px 460px at 90% -12%, rgba(6, 182, 212, 0.13), transparent 62%),
    linear-gradient(to bottom, var(--band-3) 55%, var(--band-4));
}

/* band 4 eindigt op zijn eigen tint: naar het donkere slotstuk is de
   overgang een bewuste harde knip, net als masthead → smartphone */
.band--4 {
  --band-line: #0ea5e9;
  --band-accent: #0284c7;
  background-color: var(--band-4);
  background-image:
    radial-gradient(680px 460px at 10% -12%, rgba(56, 189, 248, 0.16), transparent 62%),
    linear-gradient(to bottom, var(--band-4), #dceafa);
}

/* donker slotstuk in merkblauw — spiegelt het masthead */
.band--5 { padding-bottom: 0; }
.band--5 {
  --band-line: var(--accent-soft);
  --band-accent: var(--volt);
  --num-stroke: rgba(255, 255, 255, 0.07);
  background-color: var(--band-5);
  /* de gloed linksonder leeft op de B2B-strook hieronder, zodat de
     naad tussen baan en strook onzichtbaar blijft */
  background-image:
    radial-gradient(720px 480px at 88% -12%, rgba(79, 125, 255, 0.30), transparent 62%),
    linear-gradient(to bottom, var(--band-5), #101830);
}

.band-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.product-band .product-copy { max-width: 640px; }
.product-band .product-title { font-size: clamp(36px, 5.5vw, 64px); }
.product-band .product-lead {
  font-size: clamp(16.5px, 2vw, 19px);
  margin-bottom: var(--sp-5);
}
.product-band .product-visual { margin-top: var(--sp-4); }

@media (min-width: 1000px) {
  .band-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-7);
  }
  /* afwisselend ritme: op "flip"-banen staat de tekening links */
  .band--flip .band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .band--flip .product-copy { order: 2; }
  .band--flip .product-visual { order: 1; }
  .product-band .product-visual { margin-top: 0; }
  .product-band .product-visual svg {
    width: auto;
    height: clamp(300px, 36vw, 500px);
  }
  .hero--flagship::before,
  .product-band::before { display: block; }
}

/* ---------- Mobiel: Apple-stijl productkaarten ----------
   Onder 1000px (de één-koloms layout) is elke productbaan een kaart in
   apple.com-stijl: gecentreerde titel en één korte alinea, twee
   pilknoppen naast elkaar, en daaronder de tekening als blikvanger.
   Alle vijf kaarten zijn even hoog (min-height), zodat elke veeg
   hetzelfde ritme geeft en de volgende kaart onderaan al aankondigt
   dat er meer volgt. Desktop (≥1000px) blijft ongewijzigd. */
/* korte mobiele variant van elke productlead (volledige tekst op desktop) */
.lead-brief { display: none; }

@media (max-width: 999px) {
  .hero--flagship,
  .product-band { min-height: 600px; }
  .lead-full { display: none; }
  .lead-brief { display: inline; }
  .hero-grid { padding-block: var(--sp-5); gap: var(--sp-4); }
  .product-band { padding-block: clamp(36px, 6vw, 64px); }
  .band-grid { gap: var(--sp-4); }

  /* tekst gecentreerd boven de tekening; kicker en categorielijn
     vervallen op mobiel — de titel doet het woord (à la Apple) */
  .hero--flagship .hero-inner,
  .product-band .product-copy { text-align: center; margin-inline: auto; }
  .hero-kicker,
  .product-band .product-copy .eyebrow { display: none; }
  .hero--flagship h1,
  .product-band .product-title { font-size: clamp(32px, 8.5vw, 44px); }
  .hero-lead,
  .product-band .product-lead {
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
    margin-inline: auto;
  }
  .hero-lead { margin-bottom: var(--sp-5); }
  .hero-grid .btn-row,
  .band-grid .btn-row { justify-content: center; }
  .product-links { justify-content: center; margin-top: var(--sp-3); }
  .hero-grid .btn,
  .band-grid .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }

  /* de tekening vult als blikvanger de onderste helft van de kaart */
  .hero--flagship .product-visual { min-height: 312px; align-items: center; }
  .band--2 .product-visual { min-height: 292px; align-items: center; }
  .hero--flagship .product-visual .l3d-fit { --l3d-s: 0.53; --l3d-x: 4px; --l3d-y: 26px; }
  .band--2 .product-visual .l3d-fit { --l3d-s: 0.58; --l3d-x: -4px; --l3d-y: 12px; }
  /* de tekeningen renderen op mobiel op ~55% schaal; de lijndikte
     compenseert mee zodat de lijnen even stevig ogen als op desktop */
  .product-visual svg { stroke-width: 2.4px; }
  .product-visual .hv-edge { stroke-width: 4px; }
  .product-visual .hv-pill rect { stroke-width: 1.6px; }
  /* per band gemaximeerd zodat elke kaart op 600px uitkomt */
  .product-band .product-visual svg { width: min(100%, 255px); }
  .band--3 .product-visual svg { width: min(100%, 240px); }
  .band--5 .product-visual svg { width: min(100%, 222px); }
}

.product-copy .eyebrow { margin-bottom: var(--sp-2); }

.product-title {
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
}
.product-title::after { content: "."; color: var(--band-accent, var(--accent)); }
.theme-dark .product-title::after { color: var(--band-accent, var(--accent-soft)); }

.product-lead { font-size: 16.5px; max-width: 56ch; }

.product-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: 15px;
}

.product-visual { display: flex; justify-content: center; margin-top: var(--sp-6); }
/* mobiel breedtegestuurd, zodat de pil-labels in de tekening leesbaar
   blijven; op brede schermen hoogtegestuurd (zie media query verderop) */
.product-visual svg {
  width: min(100%, 320px);
  height: auto;
  color: var(--band-line, var(--accent));
}
.theme-dark .product-visual svg { color: var(--band-line, var(--accent-soft)); }

/* strook over de volledige paneelbreedte (B2B-noot in het donkere paneel) */
.panel-strip {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--ink-3);
}
.panel-strip b { color: var(--ink); font-weight: 600; }
.panel-strip p { max-width: 68ch; margin-bottom: var(--sp-2); }

/* De B2B-strook als eigen donkere sectie direct onder het slotstuk:
   dezelfde kleur als het einde van band--5's verloop, dus de overgang
   blijft naadloos. Buiten de productkaart gehouden zodat band--5 op
   mobiel even hoog blijft als de andere banen. */
.strip-band {
  background-color: #101830;
  background-image:
    radial-gradient(560px 380px at 6% 130%, rgba(29, 78, 216, 0.22), transparent 60%);
  padding-top: var(--sp-5);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.strip-band .panel-strip { margin-top: 0; }

@media (min-width: 900px) {
  .panel-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    align-items: baseline;
    justify-content: space-between;
  }
  .panel-strip p { margin-bottom: 0; }
}

/* ---------- Cards + grids ---------- */

.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(22, 24, 29, 0.18);
}

.card h3 { font-size: 18px; margin: 14px 0 6px; }
.card p { font-size: 15px; margin: 0; }



/* ---------- Complex repairs (dark section) ---------- */

.section--complex {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(720px 480px at 85% -20%, rgba(64, 106, 255, 0.16), transparent 60%);
}

.complex-layout { display: grid; gap: var(--sp-6); }

.complex-list { list-style: none; }
.complex-list li {
  display: flex;
  gap: var(--sp-4);
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.complex-list li:last-child { border-bottom: 1px solid var(--border); }
.complex-list svg { flex: none; margin-top: 3px; color: var(--accent-soft); }
.complex-list h3 { font-size: 17px; margin-bottom: 4px; }
.complex-list p { font-size: 15px; margin: 0; }

@media (min-width: 900px) {
  .complex-layout {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .complex-layout .section-head { margin-bottom: 0; }
}

/* ---------- Steps ---------- */

.steps {
  list-style: none;
  display: grid;
  gap: var(--sp-6);
  counter-reset: step;
}
.steps li { counter-increment: step; position: relative; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-tint);
  border: 1px solid #d5e2fc;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--sp-4);
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.steps h3 { font-size: 18px; margin-bottom: 6px; }
.steps p { font-size: 15px; margin: 0; max-width: 42ch; }

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
  /* stippellijn tussen de stappen, als een signaalpad op een printplaat */
  .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 60px;
    right: calc(-1 * var(--sp-7) + 16px);
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--border-strong) 0 6px,
      transparent 6px 12px
    );
  }
}

/* ---------- Why list (editorial split) ---------- */

.why-layout { display: grid; gap: var(--sp-6); }

.why-list { list-style: none; }
.why-list li {
  display: flex;
  gap: var(--sp-4);
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.why-list li:last-child { border-bottom: 1px solid var(--border); }
.why-list svg { flex: none; margin-top: 3px; color: var(--accent); }
.why-list h3 { font-size: 17px; margin-bottom: 4px; }
.why-list p { font-size: 15px; margin: 0; }

/* Review-showcase: momentopname van de Google-score (handmatig bij te
   werken — bewust geen live Google-koppeling, zie TODO in index.html).
   JS animeert de sterren en telt de cijfers op zodra de strip in beeld komt. */
.review-strip {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-5);
}
.review-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.review-stars {
  position: relative;
  display: inline-flex;
  margin: 12px 0 10px;
}
.review-stars-base,
.review-stars-fill { display: flex; gap: 3px; }
.review-stars-base { color: var(--border-strong); }
.review-stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--accent);
  transition: width 0.9s ease 0.2s;
}
.review-figures { font-size: 14px; color: var(--ink-3); margin: 0; white-space: nowrap; }
.review-figures b {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 2px;
}
.review-stat + .review-stat {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
}
.review-stat .review-label { margin-bottom: 6px; }
.review-cta .btn { width: 100%; }

/* Mobiel: de drie cijfers naast elkaar i.p.v. gestapeld — scheelt hoogte.
   Compactere kaart, kleinere sterren, een kortere label-regel en het cijfer
   boven zijn bijschrift, zodat elke kolom in de smalle breedte past; de knop
   loopt eronder over de volle breedte. minmax(0,1fr) houdt de strip binnen
   het scherm, ook op de smalste toestellen (geen horizontale scroll). */
@media (max-width: 899px) {
  .review-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    align-items: start;
    padding: var(--sp-4);
  }
  .review-stat + .review-stat {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--border);
    padding-left: var(--sp-3);
  }
  .review-label { font-size: 10px; letter-spacing: 0.05em; }
  .review-stars { margin: 8px 0 6px; }
  .review-stars-base,
  .review-stars-fill { gap: 2px; }
  .review-stars svg { width: 15px; height: 15px; }
  .review-figures { font-size: 13px; white-space: normal; }
  .review-figures b { display: block; font-size: 25px; margin-right: 0; line-height: 1.1; }
  .review-cta {
    grid-column: 1 / -1;
    margin-top: var(--sp-2);
  }
}

@media (min-width: 900px) {
  .why-layout {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .why-layout .section-head { margin-bottom: var(--sp-5); }

  .review-strip {
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: var(--sp-7);
    padding: var(--sp-5) var(--sp-6);
  }
  .review-stat + .review-stat {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--border);
    padding-left: var(--sp-7);
  }
  .review-cta { justify-self: end; }
  .review-cta .btn { width: auto; }
}

/* ---------- Shop / contact block ---------- */

.shop-layout { display: grid; gap: var(--sp-6); }

.info-list { margin: 0; }
.info-row {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.info-row:first-child { border-top: 0; padding-top: 0; }
.info-row > div { flex: 1; min-width: 0; }
.info-row svg { flex: none; margin-top: 3px; color: var(--accent); }
.info-row dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.info-row dd { margin: 0; font-size: 16px; color: var(--ink); }
.info-row dd a { color: var(--ink); text-decoration: none; }
.info-row dd a:hover { text-decoration: underline; }
.info-row .sub { display: block; font-size: 14px; color: var(--ink-3); }

.shop-card { padding: var(--sp-5); }
.shop-card:hover { transform: none; box-shadow: none; }
.shop-card .btn-row { margin-top: var(--sp-5); }
.shop-card .btn { width: 100%; }

/* Winkelgevel in het winkelblok */
.shop-illu {
  margin: var(--sp-6) 0 0;
  max-width: 480px;
  color: var(--ink-2);
}
/* Fotovariant: echte gevelfoto i.p.v. de getekende gevel */
.shop-illu--photo { max-width: none; }
.shop-illu--photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.shop-illu figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* Accessoire-tags in het winkelblok */
.tag-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.tag-row li {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background-color: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
}

/* Openingsuren per dag; JS markeert de huidige dag met .is-today */
.hours {
  list-style: none;
  font-size: 14.5px;
  line-height: 1.5;
}
.hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 2.5px 0;
  color: var(--ink-2);
}
.hours li span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hours .is-closed span:last-child { color: var(--ink-3); }
.hours .is-today { font-weight: 600; color: var(--ink); }
/* het label ("vandaag"/"today") zet JS in data-today, per taal */
.hours .is-today span:first-child::after {
  content: " \00B7 " attr(data-today);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (min-width: 900px) {
  .shop-layout {
    grid-template-columns: 6fr 5fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .shop-layout .section-head { margin-bottom: var(--sp-5); }
  .shop-card .btn { width: auto; }
}

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

.faq { max-width: var(--text-max); }

.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-3);
  transition: transform 0.15s ease;
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  margin: 0;
  padding: 0 0 20px;
  max-width: 60ch;
}

/* ---------- Form ---------- */

.form-layout { display: grid; gap: var(--sp-6); }

.form-grid { display: grid; gap: 20px; }

.field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--ink);
  background-color: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 140px; resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* Honeypot: visually removed, still present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-footnote { font-size: 14px; color: var(--ink-3); margin-top: var(--sp-3); }

.form-notice {
  display: none;
  margin-top: var(--sp-4);
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 15px;
}
.form-notice.is-visible {
  display: block;
  background-color: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-ink);
}

.contact-card { background-color: var(--bg); }
.contact-card:hover { transform: none; box-shadow: none; }
.contact-card h3 { font-size: 18px; margin-bottom: var(--sp-3); }
.contact-card .info-row dd { font-size: 15px; }
.contact-card .btn { width: 100%; margin-top: var(--sp-4); }

@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

/* ---------- Footer (with integrated final CTA) ---------- */

.site-footer { font-size: 15px; }

.footer-cta {
  text-align: center;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--border);
  background-image:
    radial-gradient(560px 320px at 50% -20%, rgba(64, 106, 255, 0.16), transparent 65%);
}
.footer-cta h2 {
  font-size: clamp(27px, 4.5vw, 38px);
  max-width: 560px;
  margin-inline: auto;
}
.footer-cta p {
  font-size: 17px;
  max-width: 520px;
  margin: 0 auto var(--sp-6);
}
.footer-cta .btn-row { justify-content: center; }

.footer-main { padding: var(--sp-8) 0 var(--sp-6); }

.footer-grid { display: grid; gap: var(--sp-6); }

.footer-col h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.footer-brand .brand { margin-bottom: var(--sp-3); color: var(--ink); }
.footer-brand p { max-width: 34ch; font-size: 15px; }

.footer-col ul { list-style: none; }
.footer-col li { padding: 4px 0; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }

.footer-legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .footer-cta { padding: var(--sp-9) 0; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
}

/* ---------- Sticky mobile CTA bar ---------- */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background-color: rgba(250, 250, 249, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(22, 24, 29, 0.06);
  transform: translateY(105%);
  transition: transform 0.2s ease;
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar .btn { flex: 1; padding-inline: 12px; font-size: 15px; }

/* zolang de header in menu-modus staat (tot 1140px) blijft de balk nuttig */
@media (min-width: 1140px) {
  .sticky-bar { display: none; }
}

/* ---------- Print: de pagina als nette flyer ----------
   Donkere vlakken worden wit papier (token-remap), interactieve chrome
   verdwijnt, en alles is zichtbaar — ook wat nog niet "gereveald" was.
   main.js klapt bij het printen ook alle FAQ-antwoorden open. */

@media print {
  :root { --bg: #ffffff; --surface: #ffffff; }

  .site-nav,
  .header-actions,
  .mobile-nav,
  .sticky-bar,
  .skip-link,
  .chip,
  .btn,
  .btn-row,
  .product-visual,
  .footer-cta,
  #repair-form { display: none !important; }

  /* scroll-reveal mag niets verbergen op papier */
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .faq summary::after { display: none; }

  /* donkere secties → zwart-op-wit */
  .theme-dark {
    --bg: #ffffff;
    --surface: #ffffff;
    --ink: #16181d;
    --ink-2: #3a414c;
    --ink-3: #5f6570;
    --accent-tint: #eef3fe;
    --border: #d9d9d6;
    --border-strong: #b8babf;
    background-color: transparent;
    color: var(--ink-2);
  }
  .theme-dark a { color: var(--accent); }
  .theme-dark .eyebrow b,
  .theme-dark .section-title::after { color: var(--accent); }

  body { background-color: #ffffff; }
  .site-header {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent;
    box-shadow: none !important;
  }
  .hero-panel,
  .hero--flagship,
  .product-band {
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--border);
    box-shadow: none;
  }
  .hero--flagship,
  .product-band { min-height: 750px; }
  .product-band { padding-block: var(--sp-6); break-inside: avoid; }
  .hero-inner { padding-bottom: var(--sp-5); }
  .section--complex,
  .strip-band,
  .footer-cta { background-image: none; }
  .section--surface { background-color: transparent; }
  .card,
  .review-strip,
  .shop-card,
  .contact-card { box-shadow: none; background-color: transparent; }
  .complex-list svg { color: var(--accent); }
  .footer-main { border-top: 1px solid var(--border); }

  /* compacter op papier, en niet midden in een blok afbreken */
  .section { padding-block: var(--sp-6); }
  .hero { padding-block: var(--sp-3) var(--sp-6); }
  .card,
  .steps li,
  .complex-list li,
  .why-list li,
  .info-row,
  .faq details,
  .founder-note,
  .review-strip,
  .panel-strip,
  .shop-illu { break-inside: avoid; }
}

@page { margin: 12mm; }

/* ---------- Simple content pages (legal, 404) ---------- */

.page {
  max-width: 760px;
  padding-block: var(--sp-7) 80px;
}
.page h1 { font-size: clamp(28px, 5vw, 38px); margin-bottom: var(--sp-2); }
.page .page-meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-bottom: var(--sp-6); }
.page h2 { font-size: 21px; margin-top: var(--sp-6); }
.page ul { padding-left: 22px; margin-bottom: 1em; }
.page li { margin-bottom: 6px; }

.error-page {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-8);
}
.error-page h1 { font-size: clamp(30px, 6vw, 44px); }
.error-page p { max-width: 46ch; font-size: 17px; margin-bottom: var(--sp-6); }
.error-page .error-lang {
  margin-top: var(--sp-5);
  margin-bottom: 0;
  font-size: 14px;
  color: var(--ink-3);
}