/* ============================================================================
   ORBIT4 — Marketingsite  ·  "Petrol & Paper"
   ----------------------------------------------------------------------------
   Zelfde ontwerptaal als de app (css/styles.css): warme papieren canvas, petrol
   als merkkleur, donkere banden zoals de rail, effen vlakken en geen enkele
   gradient. De tokens zijn bewust identiek benoemd, zodat een kleurwijziging in
   de app hier één-op-één over te nemen is.

    1. Tokens          5. Panelen & kaarten    9. Prijzen
    2. Reset & basis   6. Hero                10. FAQ
    3. Layout          7. Modules & slim      11. Contact & footer
    4. Knoppen         8. Stappen             12. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  --canvas:        #f0efec;
  --surface:       #ffffff;
  --surface-2:     #f7f6f3;
  --surface-3:     #eceae5;
  --border:        #dfdcd5;
  --border-strong: #c8c4ba;

  --text:   #161a19;
  --text-2: #5b625f;
  --text-3: #8e938f;

  --accent:       #0e6f66;
  --accent-hover: #0a564f;
  --accent-text:  #0b5c54;
  --accent-soft:  #e2efed;
  --accent-line:  #b6d7d2;
  --on-accent:    #ffffff;

  --brand-2:      #a35a3c;
  --brand-2-soft: #f6ebe5;

  /* Donkere band — dezelfde kleuren als de rail van de app */
  --dark:      #14201e;
  --dark-2:    #1d2c29;
  --dark-line: #273834;
  --dark-ink:  #cfdad7;
  --dark-ink-2:#84948f;
  --dark-accent: #5fd3c2;

  --good:        #2c7a4f;
  --good-soft:   #e5f1e9;
  --good-line:   #bcdcc8;
  --warn:        #9a6710;
  --warn-soft:   #f7efdf;
  --warn-line:   #e6d4ae;
  --danger:      #ad3327;
  --danger-soft: #f8e8e6;
  --danger-line: #eec7c2;
  --info:        #2a5c96;
  --info-soft:   #e7eef7;
  --info-line:   #c4d5ec;

  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(20, 26, 24, .06);
  --sh-2: 0 6px 18px rgba(20, 26, 24, .10);
  --sh-3: 0 24px 60px rgba(12, 18, 16, .24);

  --h-ctl: 40px;
  --gap: 16px;
  --wrap: 1160px;
  --nav-h: 60px;

  --t-fast: 110ms cubic-bezier(.4, 0, .2, 1);
  --t: 200ms cubic-bezier(.32, .72, 0, 1);

  /* Rasterlijnen als SVG-patroon — de app doet dit ook zo, geen gradient */
  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M100 0H0v100' fill='none' stroke='%23e4e1da' stroke-width='1'/%3E%3C/svg%3E");
  --grid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M100 0H0v100' fill='none' stroke='%231e2e2b' stroke-width='1'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas:        #0d1211;
  --surface:       #151b1a;
  --surface-2:     #1b2322;
  --surface-3:     #242e2c;
  --border:        #283331;
  --border-strong: #3a4744;

  --text:   #e6ecea;
  --text-2: #96a29e;
  --text-3: #6b7773;

  --accent:       #2fa295;
  --accent-hover: #43b8aa;
  --accent-text:  #56c8b8;
  --accent-soft:  #10312d;
  --accent-line:  #1d4b45;
  --on-accent:    #04140f;

  --brand-2:      #cd8a6b;
  --brand-2-soft: #2c1d16;

  --dark:      #0a100f;
  --dark-2:    #131c1a;
  --dark-line: #1d2926;
  --dark-ink:  #c3cfcb;
  --dark-ink-2:#75837f;
  --dark-accent: #4fc7b6;

  --good:        #47b077;
  --good-soft:   #10261b;
  --good-line:   #1f4530;
  --warn:        #cf9a3c;
  --warn-soft:   #2a2113;
  --warn-line:   #4a3a1c;
  --danger:      #e2695c;
  --danger-soft: #2c1614;
  --danger-line: #4e2724;
  --info:        #5b93d6;
  --info-soft:   #121f2e;
  --info-line:   #24374f;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .5);
  --sh-3: 0 24px 60px rgba(0, 0, 0, .68);

  --grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M100 0H0v100' fill='none' stroke='%232b3835' stroke-width='1'/%3E%3C/svg%3E");
  --grid-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M100 0H0v100' fill='none' stroke='%23172321' stroke-width='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   2. RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15.5px; line-height: 1.6;
  background: var(--canvas); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: clamp(32px, 5vw, 50px); letter-spacing: -.028em; }
h2 { font-size: clamp(25px, 3.4vw, 34px); letter-spacing: -.024em; }
h3 { font-size: 16.5px; }
h4 { font-size: 14px; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
a  { color: var(--accent-text); text-underline-offset: 2px; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent-line); color: var(--text); }
strong { font-weight: 620; }

/* Iconen — 24×24 raster, één lijndikte, erven currentColor (zoals js/icons.js).
   De ronde uiteinden staan hier en niet als attribuut, zodat één regel de hele
   set stuurt; de gevulde stippen in de symbolen houden hun eigen fill. */
.i {
  width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.22em;
  stroke-linecap: round; stroke-linejoin: round;
}
.i-lg { width: 1.4em; height: 1.4em; }
.i-xl { width: 26px; height: 26px; vertical-align: middle; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--r-sm);
}
.skip:focus { left: 8px; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

section { padding: 84px 0; }
section + section { border-top: 1px solid var(--border); }
/* De hero heeft zelf al een afsluitende lijn — anders staan er twee. */
.hero + section { border-top: 0; }
.band-2 { background: var(--surface-2); }

.s-head { max-width: 660px; margin-bottom: 40px; }
.s-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 12px;
}
.kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent-line); }
.s-head.center .kicker::before { display: none; }
.lead { color: var(--text-2); font-size: 17px; margin-top: 14px; }

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   4. KNOPPEN
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h-ctl); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 560; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-dark { background: transparent; border-color: var(--dark-line); color: var(--dark-ink); }
.btn-dark:hover { background: var(--dark-2); border-color: #375049; color: #fff; }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
.btn.block { width: 100%; }

.link-arrow { font-weight: 560; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow:hover { text-decoration: underline; }

/* ==========================================================================
   5. NAV, PANELEN & KAARTEN
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; gap: 10px; height: 100%; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 680; font-size: 17px; letter-spacing: .02em;
  color: var(--text); text-decoration: none; margin-right: 6px;
}
.brand .i { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav-links a {
  padding: 7px 11px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 520; color: var(--text-2); text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-links a:hover { background: var(--surface-3); color: var(--text); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-2); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.nav-toggle { display: none; }

/* Paneel = het basisvlak, met kopband — precies zoals in de app */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
}
.panel > .p-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex: none;
}
.panel > .p-head .i { color: var(--accent-text); }
.panel > .p-body { padding: 15px; flex: 1; color: var(--text-2); font-size: 14.5px; }
.panel > .p-foot {
  padding: 10px 15px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; color: var(--text-3);
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 14.5px; }
.card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md);
  color: var(--accent-text);
}
.card-ico.clay { background: var(--brand-2-soft); border-color: color-mix(in srgb, var(--brand-2) 30%, transparent); color: var(--brand-2); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--border);
  font-size: 12px; font-weight: 560; color: var(--text-2); white-space: nowrap;
}
.chip.good  { background: var(--good-soft);  border-color: var(--good-line);  color: var(--good); }
.chip.warn  { background: var(--warn-soft);  border-color: var(--warn-line);  color: var(--warn); }
.chip.info  { background: var(--info-soft);  border-color: var(--info-line);  color: var(--info); }
.chip.acc   { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }

.ticks { display: grid; gap: 9px; }
.ticks li { display: flex; gap: 9px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; }
.ticks .i { color: var(--accent); margin-top: .32em; }

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  background: var(--dark) var(--grid-dark);
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-ink);
  padding: 76px 0 84px;
}
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.hero h1 { color: #fff; }
.hero .kicker { color: var(--dark-accent); }
.hero .kicker::before { background: var(--dark-line); }
.hero-sub { font-size: 18.5px; color: var(--dark-ink); margin: 18px 0 0; max-width: 30ch; }
.hero-body { color: var(--dark-ink-2); margin-top: 14px; max-width: 46ch; font-size: 15.5px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px;
  font-size: 13px; color: var(--dark-ink-2);
}
.hero-trust li { display: flex; align-items: center; gap: 6px; }
.hero-trust .i { color: var(--dark-accent); }

/* Powered by-merk. Hero en voettekst staan altijd op de donkere band, dus de
   witte variant; assets/elentrixx-wordmark-on-light.png is de tegenhanger voor
   een lichte sectie. De hoogte stuurt de breedte, zodat het merk niet vervormt. */
.pwd-by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dark-ink-2);
}
.pwd-by img { height: 28px; width: auto; display: block; }
/* Kleine variant voor de onderregel van de voettekst, waar de regel al tekst is */
.pwd-by-sm { margin-top: 0; gap: 8px; }
.pwd-by-sm img { height: 18px; }
.pwd-tail { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Productbeeld: een stukje service-cockpit, opgebouwd uit dezelfde onderdelen */
.shot {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.shot-bar b { font-size: 13.5px; font-weight: 620; letter-spacing: -.01em; }
.shot-bar .sub { font-size: 11.5px; color: var(--text-3); }
.shot-metrics { display: flex; border-bottom: 1px solid var(--border); }
.shot-metrics div { flex: 1; padding: 11px 13px; }
.shot-metrics div + div { border-left: 1px solid var(--border); }
.shot-metrics span {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.shot-metrics b {
  display: block; font-size: 21px; font-weight: 660; letter-spacing: -.024em;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.shot-run { padding: 4px 0 6px; }
.shot-run .rh {
  display: flex; align-items: center; gap: 7px; padding: 10px 13px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.shot-run .rh .n { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 11.5px; font-weight: 600; }
.shot-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-top: 1px solid var(--border); font-size: 13px;
}
.shot-row .t {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.shot-row .nm { font-weight: 560; }
.shot-row .pax { color: var(--text-3); font-size: 12px; }
.shot-row .sp { margin-left: auto; }
.shot-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 12px; color: var(--text-3);
}
.shot-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }

/* ==========================================================================
   7. MODULES, SLIM & DETAILS
   ========================================================================== */
.stat-band {
  display: flex; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: 40px;
}
.stat-band div { flex: 1 1 200px; padding: 16px 20px; }
.stat-band div + div { border-left: 1px solid var(--border); }
.stat-band b {
  display: block; font-size: 22px; font-weight: 660; letter-spacing: -.024em;
  font-variant-numeric: tabular-nums;
}
.stat-band span { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }

.mod { display: flex; flex-direction: column; }
.mod .p-body ul { margin-top: 10px; display: grid; gap: 5px; }
.mod .p-body li { display: flex; gap: 7px; font-size: 13.5px; }
.mod .p-body li::before { content: "·"; color: var(--text-3); font-weight: 700; }

/* Slimme features — tabelachtige band, geen losse kaartjes */
.smart { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.smart-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) 230px; gap: 20px; padding: 17px 20px; align-items: start; }
.smart-row + .smart-row { border-top: 1px solid var(--border); }
.smart-row .nm { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; }
.smart-row .nm .i { color: var(--accent-text); }
.smart-row .ds { color: var(--text-2); font-size: 14.5px; }
.smart-row .tech {
  font-size: 12px; color: var(--text-3);
  border-left: 2px solid var(--accent-line); padding-left: 12px;
}
.note {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  padding: 15px 18px; margin-top: 20px; color: var(--accent-text); font-size: 14.5px;
}
.note .i { margin-top: .22em; flex: none; }

/* De gaten van 1px laten de achtergrond door en vormen zo de scheidingslijnen —
   goedkoper dan per cel randen bijhouden die aan de buitenkant weer weg moeten. */
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.detail-grid > div { background: var(--surface); padding: 18px 20px; }
.detail-grid h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.detail-grid h4 .i { color: var(--accent-text); }
.detail-grid p { color: var(--text-2); font-size: 14px; margin: 0; }

/* ==========================================================================
   8. STAPPEN
   ========================================================================== */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  background: var(--dark); color: #fff; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 660; font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--text-2); font-size: 14.5px; }

/* ==========================================================================
   9. PRIJZEN
   ========================================================================== */
.price-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.price-card { background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-lg); overflow: hidden; }
.price-card .p-head {
  padding: 12px 20px; background: var(--accent-soft); border-bottom: 1px solid var(--accent-line);
  color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.price-body { padding: 24px 20px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; }
.price-amount b { font-size: 46px; font-weight: 660; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.price-amount span { color: var(--text-2); font-size: 14.5px; }
.price-sub { color: var(--text-2); font-size: 14px; margin: 10px 0 20px; }
.price-body .ticks { margin-bottom: 22px; }
.price-foot { padding: 13px 20px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; color: var(--text-3); }
.price-side { display: grid; gap: var(--gap); }
.price-side .card { padding: 18px 20px; }
.price-side h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.price-side h4 .i { color: var(--accent-text); }
.price-side p { font-size: 14px; margin: 0; }
/* Het combitarief mag opvallen zonder een tweede volwaardige prijskaart te
   worden: dezelfde accentrand als de hoofdkaart, maar een kleiner bedrag. */
.price-side .combi { border-color: var(--accent-line); }
.price-amount.sm { margin: 12px 0 10px; }
.price-amount.sm b { font-size: 32px; }
.price-amount.sm span { font-size: 13.5px; }

/* ==========================================================================
   10. FAQ
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq details + details { border-top: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 16px 20px; font-weight: 580; font-size: 15.5px;
  transition: background var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface-2); }
.faq summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 1.7px solid var(--text-3); border-bottom: 1.7px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details[open] summary { color: var(--accent-text); }
.faq .a { padding: 0 20px 18px; color: var(--text-2); font-size: 14.5px; max-width: 72ch; }

/* ==========================================================================
   11. CONTACT & FOOTER
   ========================================================================== */
.demo { background: var(--dark) var(--grid-dark); color: var(--dark-ink); border-top: 1px solid var(--dark-line); }
.demo h2 { color: #fff; }
.demo .kicker { color: var(--dark-accent); }
.demo .kicker::before { background: var(--dark-line); }
.demo .lead { color: var(--dark-ink-2); }
.demo-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.demo .ticks li { color: var(--dark-ink); }
.demo .ticks .i { color: var(--dark-accent); }
.demo-card { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: var(--r-lg); padding: 22px; }
.demo-card h3 { color: #fff; margin-bottom: 16px; }
.contact-list { display: grid; gap: 3px; }
/* Alleen de directe kinderen: de span mét het adres zit zelf óók in een a/span
   en zou anders ook uitgelijnd worden, waardoor de subregel ernaast belandt. */
.contact-list > a, .contact-list > span {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--dark-ink); text-decoration: none; font-size: 14.5px;
}
.contact-list > a:hover { background: #22322f; color: #fff; }
.contact-list .i { color: var(--dark-accent); flex: none; }
.contact-list small { display: block; color: var(--dark-ink-2); font-size: 12px; line-height: 1.4; }
.demo-card .btn { margin-top: 18px; }
.demo-fine { margin-top: 16px; font-size: 12px; color: var(--dark-ink-2); text-align: center; }

.foot { background: var(--dark); color: var(--dark-ink-2); border-top: 1px solid var(--dark-line); padding: 52px 0 32px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.foot h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dark-ink); margin-bottom: 14px;
}
.foot ul { display: grid; gap: 9px; }
.foot a { color: var(--dark-ink-2); text-decoration: none; font-size: 14px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .brand { color: #fff; }
.foot .brand .i { color: var(--dark-accent); }
.foot-about { font-size: 14px; margin-top: 14px; max-width: 34ch; }
.foot-bot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--dark-line); font-size: 13px;
}
.foot-bot .sep { margin-left: auto; }

/* Logostrook met de ingebouwde koppelingen. De tegels staan op auto-fit met een
   maximum, zodat één koppeling gecentreerd staat en er later gewoon een tweede
   naast past zonder de regel te herschrijven. */
.int-panel { margin-top: var(--gap); }
.int-panel .p-body { padding: 26px 20px 22px; }
.int-label {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 18px;
}
.int-grid {
  display: grid; gap: 14px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(0, 246px));
}
.int-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 20px 16px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.int-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.int-logo svg { width: 34px; height: 34px; flex: none; }
.int-word { font-size: 20px; font-weight: 680; letter-spacing: -.015em; }
.int-tile small { font-size: 12px; color: var(--text-3); }
.int-foot {
  margin-top: 18px; text-align: center;
  font-size: 13.5px; color: var(--text-3);
}
.int-foot a { color: var(--accent-text); font-weight: 560; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .smart-row { grid-template-columns: 240px minmax(0, 1fr); }
  .smart-row .tech { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 2px; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: 1fr 1fr 1fr; }
  .foot-cols > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 10px 16px 14px; box-shadow: var(--sh-2); margin: 0;
  }
  .nav-toggle { display: inline-flex; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-sub, .hero-body { max-width: none; }
  .demo-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .price-wrap { grid-template-columns: minmax(0, 1fr); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  section { padding: 54px 0; }
  .wrap { padding: 0 18px; }
  .cols-2, .cols-3, .cols-4, .steps, .detail-grid { grid-template-columns: minmax(0, 1fr); }

  /* Vier cijfers onder elkaar is vier schermregels voor niets. Twee bij twee,
     met de scheidingslijnen op de tweede kolom en de tweede rij. */
  .stat-band { display: grid; grid-template-columns: 1fr 1fr; }
  .stat-band div + div { border-left: 0; border-top: 0; }
  .stat-band div:nth-child(2n) { border-left: 1px solid var(--border); }
  .stat-band div:nth-child(n + 3) { border-top: 1px solid var(--border); }

  /* De negen functiepanelen staan dicht. Opengeklapt is dit blok in z'n eentje
     bijna twee schermen scrollen, terwijl je op een telefoon meestal maar één
     sectie wilt nalezen. De koppen blijven staan, dus je ziet nog steeds in één
     oogopslag wat er in de app zit. Zonder JS blijft alles gewoon openstaan. */
  .mod > .p-head { cursor: pointer; user-select: none; }
  .mod > .p-head::after {
    content: ""; margin-left: auto; margin-right: 4px; flex: none;
    width: 7px; height: 7px;
    border-right: 1.8px solid var(--text-3); border-bottom: 1.8px solid var(--text-3);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t-fast);
  }
  .mod:not(.closed) > .p-head::after { transform: translateY(2px) rotate(-135deg); }
  .mod.closed > .p-body { display: none; }
  .smart-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .smart-row .tech { grid-column: 1; }
  .shot-metrics { flex-wrap: wrap; }
  .shot-metrics div { flex: 1 1 50%; }
  .shot-metrics div:nth-child(3) { border-left: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-bot .sep { margin-left: 0; }
  .hero-cta .btn { flex: 1 1 100%; }

  /* Merk plus beide CTA's plus thema plus hamburger tellen op tot ~420px: dat
     past op geen enkele telefoon en duwt de hele pagina horizontaal open. De
     demo-knop gaat er hier af — het menu ("Contact"), de hero en de voettekst
     wijzen alle drie al naar #demo. Inloggen blijft staan, dat heeft geen
     tweede ingang in de balk. */
  .nav-actions .btn-primary { display: none; }
}

/* Vanaf ±480px passen twee korte kaarten naast elkaar. De doelgroepkaarten (6)
   en "En verder" (9) zijn allebei kop + één zin, dus die winnen daar het meest
   mee. De functiepanelen blijven bewust één kolom: dichtgeklapt zijn ze al kort
   en hun titels wrappen lelijk op halve breedte. */
@media (min-width: 480px) and (max-width: 720px) {
  #voor-wie .grid,
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Smalste telefoons (SE, oudere Androids): 320px laat maar 284px over, en dat
   is net te krap voor merk + thema + inloggen + hamburger. Een maat kleiner. */
@media (max-width: 400px) {
  .brand { font-size: 15px; gap: 7px; margin-right: 2px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn.sm { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}