/* Zelfstandige landingsstijl: zelfde warme aardetinten als de app (web/style.css),
   maar bewust los van de app-CSS (die is gebouwd rond een vaste app-viewport). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  color-scheme: light;
  --bg: #fdfcfb;
  --bg-alt: #f2f1ec;
  --rand-alt: #e3e0d5;
  --tekst: #2b2620;
  --gedempt: #6b6358;
  --licht: #8a8272;
  --rand: #e7e4de;
  --accent: #c98a4b;
  --accent-donker: #a8632a;
  --chip-bg: #f2ede1;
  --font-kop: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-bedrag: 'Fraunces', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--tekst);
  line-height: 1.6;
  font-size: 16px;
}
a { color: var(--accent-donker); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--font-kop); }

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(160deg, #ffffff, #faf7f1);
  border-bottom: 1px solid var(--rand);
  padding: 48px 0 56px;
}
/* Taalschakelaar rechtsboven in de hero (NL/EN, docs/plan-engelse-modus.md §5.4). Tikdoel ≥ 40px. */
.taalwissel { position: absolute; top: 12px; right: 20px; z-index: 2; display: flex; gap: 2px; align-items: center; font-size: 13px; font-weight: 700; font-family: var(--font-kop); }
.taalwissel a, .taalwissel span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 10px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.taalwissel span[aria-current] { color: var(--accent-donker); }
.taalwissel a { color: var(--licht); }
@media (hover: hover) { .taalwissel a:hover { color: var(--tekst); background: var(--chip-bg); } }
.taalwissel a:active { background: var(--chip-bg); color: var(--tekst); }
.taalwissel a:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: 2px; }
.hero-inner { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.hero-tekst { flex: 1 1 340px; min-width: 0; }
.hero-logo { width: 200px; height: auto; display: block; margin-bottom: 10px; }
.hero-slogan { font-size: 15px; font-weight: 600; color: var(--gedempt); margin: 0 0 22px; }
.hero-slogan b { color: var(--accent-donker); font-weight: 800; }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -.01em; }
h1 .hl { color: var(--accent-donker); }
.hero-sub { font-size: 18px; color: var(--gedempt); margin: 0 0 26px; max-width: 46ch; }
.cta-knop {
  display: inline-block; background: var(--accent-donker); color: #fff; text-decoration: none;
  font-family: var(--font-kop); font-weight: 800; font-size: 17px; padding: 16px 32px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(168, 99, 42, .32);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover alleen op apparaten met een echte aanwijzer: op touch zou de hover-staat
   na een tik blijven "plakken" tot je ergens anders tikt. */
@media (hover: hover) {
  .cta-knop:hover { background: #96551f; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(168, 99, 42, .38); }
}
.cta-knop:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: 3px; }
.cta-knop:active { transform: translateY(0) scale(.98); box-shadow: 0 4px 14px rgba(168, 99, 42, .3); }
@media (prefers-reduced-motion: reduce) {
  .cta-knop { transition: background-color .15s ease; }
  .cta-knop:hover, .cta-knop:active { transform: none; }
}
.cta-hint { font-size: 13px; color: var(--licht); margin-top: 12px; }

/* Telefoon-mockup (eigen illustratie met dummy-data; bewust geen bronfoto's, zie plan-marketing M5) */
.mockup { flex: 0 0 auto; margin: 0 auto; }
.telefoon {
  width: 270px; background: #fff; border-radius: 36px;
  border: 1px solid var(--rand); box-shadow: 0 30px 70px rgba(80, 60, 30, .18);
  padding: 18px 14px; position: relative; overflow: hidden;
}
.tel-kop { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 12px; }
.tel-kop b { color: var(--accent-donker); font-size: 17px; }
.tel-profiel { width: 26px; height: 26px; border-radius: 50%; background: var(--chip-bg); color: var(--accent-donker); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kaart { border: 1px solid var(--rand); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(80, 60, 30, .1); }
.kaart-beeld {
  height: 200px; background: linear-gradient(150deg, #e8d9c2, #d9c3a3);
  display: flex; align-items: flex-end; justify-content: center; position: relative;
}
.kaart-beeld svg { display: block; width: 78%; height: auto; }
.bron-chip { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.9); border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--gedempt); padding: 3px 9px; }
.kaart-body { padding: 12px 14px 14px; background: #fff; }
.kaart-prijs { font-family: var(--font-bedrag); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.kaart-adres { font-size: 13px; color: var(--gedempt); margin: 2px 0 6px; }
.kaart-meta { font-size: 12px; color: var(--licht); }
.swipe-knoppen { display: flex; justify-content: center; align-items: center; gap: 26px; padding: 16px 0 4px; }
.swipe-knop {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--rand); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 6px 16px rgba(80, 60, 30, .12);
}
.swipe-knop.ja { color: #2e7d4f; } .swipe-knop.nee { color: #b4552d; }
/* Hero-kaart in swipe-pose: de bovenste kaart kantelt naar links weg (alsof je 'm wegveegt),
   een volgende kaart piept eronder uit. Illustreert de swipe-beweging; geen match-toast meer. */
.kaart-stapel { position: relative; }
.kaart-achter {
  position: absolute; left: 6px; right: 6px; top: 12px; bottom: 12px; z-index: 0;
  background: #fff; border: 1px solid var(--rand); border-radius: 18px;
  box-shadow: 0 8px 22px rgba(80, 60, 30, .08); transform: rotate(-3.5deg) scale(.97);
}
.kaart-swipe { position: relative; z-index: 1; transform: rotate(6deg) translateX(2px); transform-origin: bottom center; }

/* Secties */
section { padding: 52px 0; background: var(--bg); }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--rand-alt); border-bottom: 1px solid var(--rand-alt); }
h2 { font-size: clamp(22px, 3.5vw, 28px); margin: 0 0 8px; letter-spacing: -.01em; }
.sectie-sub { color: var(--gedempt); margin: 0 0 30px; max-width: 60ch; }
/* Kenmerken ("Zo werkt het"): drie stappen in één kolom, gecentreerd. */
.kenmerken { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 560px; margin: 0 auto; }
.kenmerk {
  background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 18px 20px;
  display: flex; gap: 12px; align-items: flex-start;
}
.kenmerk .nr {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--chip-bg);
  color: var(--accent-donker); font-size: 12.5px; font-weight: 800; display: flex;
  align-items: center; justify-content: center;
}
.kenmerk h3 { font-size: 15.5px; margin: 0 0 4px; }
.kenmerk p { font-size: 13.5px; color: var(--gedempt); margin: 0; line-height: 1.45; }

/* Vergelijkingstabel (Funda vs Hatch): compact, mobiel-vriendelijk. */
.vergelijk-tabel {
  width: 100%; max-width: 560px; border-collapse: collapse; font-size: 14.5px;
  margin: 0 auto;
}
.vergelijk-tabel th, .vergelijk-tabel td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rand);
}
.vergelijk-tabel thead th {
  font-family: var(--font-kop); font-weight: 800; font-size: 15px;
  padding-bottom: 12px; color: var(--tekst);
}
.vergelijk-tabel thead th:first-child { color: transparent; }
.vergelijk-tabel thead th:last-child { color: var(--accent-donker); }
.vergelijk-tabel th:last-child, .vergelijk-tabel td:last-child {
  border-left: 1px solid var(--rand);
}
.vergelijk-tabel tbody td:first-child { font-weight: 600; color: var(--gedempt); font-size: 13px; }
.vergelijk-tabel tbody td:last-child { color: var(--accent-donker); }
.vergelijk-tabel tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .vergelijk-tabel { font-size: 13.5px; }
  .vergelijk-tabel th, .vergelijk-tabel td { padding: 8px 10px; }
}

/* Regiokaart met kop en subtekst: echte gemeentegrenzen (CBS gebiedsindeling 2023,
   gegeneraliseerd, via cartomap/nl) met daaroverheen het dekkingsgebied als zachte vlek. */
/* Kop, subtekst en tijdlijn vormen samen de linkerkolom; de kaart staat rechts en lijnt
   met haar bovenkant uit op de kop (i.p.v. losjes onder de subtekst te beginnen), zodat de
   hoge kaart hoger op de pagina komt en de twee kolommen in balans zijn. Stapelt onder de
   flex-wrap-breakpoint tot: kop, subtekst, tijdlijn, kaart. */
.nu-straks { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.nu-straks .ns-tekst { flex: 1 1 300px; min-width: 0; }
.nu-straks .ns-tekst .sectie-sub { margin-bottom: 24px; }
.regio-kaart {
  flex: 1 1 300px; max-width: 420px; background: #fff; border: 1px solid var(--rand);
  border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 8px 24px rgba(80, 60, 30, .08);
}
.rk-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rk-kop b { font-size: 13.5px; }
.rk-kop span { font-size: 11px; color: var(--gedempt); font-weight: 600; }
.regio-kaart svg { display: block; width: 100%; height: auto; }
.rk-label { font-size: 11.5px; font-weight: 700; fill: var(--gedempt); font-family: inherit; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.rk-label-hoofd { font-size: 13px; fill: var(--accent-donker); }
.rk-voet { font-size: 11px; color: var(--licht); margin: 8px 2px 0; }
/* Aanbod-telling bovenin de kaart: getal in --font-bedrag (tabular-nums, zelfde behandeling
   als .prijs/.at-val in de app zelf). Live opgehaald bij /api/aanbod-telling (progressive
   enhancement, zie het script onderaan de pagina en src/api/aanbod-telling.js), niet
   server-side vastgebakken. Zie DECISIONS.md #68 (vervangt #67). */
.rk-telling { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
.rk-telling[hidden] { display: none; }
.rk-telling-getal { font-family: var(--font-bedrag); font-size: 32px; color: var(--accent-donker); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-telling-tekst { font-size: 12.5px; color: var(--gedempt); line-height: 1.35; }
.rk-telling-sub { display: block; color: var(--licht); font-size: 11px; margin-top: 1px; }

/* Ontdek-sectie: beschrijvende tekst links, het inzicht-voorbeeld rechts (zelfde
   tweekoloms-ritme als de hero en nu-straks; stapelt onder de flex-wrap-breakpoint). */
.ontdek-rij { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.ontdek-rij .sectie-sub { flex: 1 1 320px; min-width: 0; margin-bottom: 0; }
.ontdek-rij .ontdek-voorbeeld { flex: 0 1 400px; }
/* Omgekeerde variant: voorbeeldblok links, tekst rechts op desktop. Bij het wrappen blijft de
   tekst (eerste kind) bovenaan staan, want row-reverse keert alleen de horizontale as om. */
.ontdek-rij.row-reverse { flex-direction: row-reverse; }
/* Gecentreerde tussen-CTA onder een inzicht-sectie. */
.midden-cta { text-align: center; margin-top: 34px; }
/* Ontdek-sectie: klein voorbeeldblok in de stijl van een inzicht-regel uit de app */
.ontdek-voorbeeld {
  max-width: 440px; background: #fff; border: 1px solid var(--rand); border-radius: 14px;
  padding: 16px 20px; box-shadow: 0 8px 24px rgba(80, 60, 30, .08);
}
.ontdek-voorbeeld .ov-kop { display: block; font-size: 12px; font-weight: 700; color: var(--licht); margin-bottom: 8px; }
.ontdek-voorbeeld p { margin: 6px 0; font-size: 14.5px; color: var(--tekst); }
.ontdek-voorbeeld b { color: var(--accent-donker); font-variant-numeric: tabular-nums; }
/* Visual 2 (in het ontdek-blok): terugkerende buurten als balkjes. */
.ontdek-voorbeeld .ov-titel { margin: 4px 0 12px; font-size: 14.5px; color: var(--tekst); }
.buurtbalk { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; color: var(--gedempt); }
.buurtbalk .naam { width: 86px; flex-shrink: 0; }
.buurtbalk .balk { flex: 1; height: 9px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.buurtbalk .balk span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-donker)); }
.buurtbalk .n { width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-donker); }
.ontdek-voorbeeld .ov-voet { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rand); font-size: 14px; color: var(--tekst); }
/* Visual 3 (slimme selectie): afgewezen woningen met hun match-percentage, hoogste eerst. */
.kans-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.kans-plek { display: flex; flex-direction: column; min-width: 0; }
.kans-adres { font-size: 13.5px; font-weight: 700; color: var(--tekst); }
.kans-meta { font-size: 12px; color: var(--gedempt); }
.kans-pct {
  flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--accent-donker);
  font-variant-numeric: tabular-nums; background: var(--chip-bg); border-radius: 999px; padding: 3px 10px;
}

/* Visual 1 (match-showcase): twee telefoons, allebei dezelfde woning geliket, match-badge ertussen.
   Zelfde illustratieve stijl als de hero-mockup: dummy-gegevens, geen echte advertentiefoto's. */
.match-showcase { display: flex; justify-content: center; margin: 40px auto 0; }
.duo { position: relative; display: flex; align-items: center; justify-content: center; }
.duo .mini {
  position: relative; width: 152px; background: #fff; border-radius: 24px; border: 1px solid var(--rand);
  box-shadow: 0 20px 46px rgba(80, 60, 30, .16); padding: 10px 9px; overflow: hidden;
}
.duo .mini.links { transform: rotate(-6deg) translateX(15px); }
.duo .mini.rechts { transform: rotate(6deg) translateX(-15px); }
.duo .mkop { display: flex; align-items: center; gap: 6px; padding: 1px 4px 8px; font-size: 11px; color: var(--gedempt); font-weight: 700; }
.duo .dot { width: 17px; height: 17px; border-radius: 50%; background: var(--chip-bg); color: var(--accent-donker); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.duo .mbeeld { height: 98px; border-radius: 13px; background: linear-gradient(150deg, #e8d9c2, #d9c3a3); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.duo .mbeeld svg { width: 74%; height: auto; }
.duo .mvoet { display: flex; align-items: center; justify-content: space-between; padding: 6px 5px 2px; }
.duo .mprijs { font-family: var(--font-bedrag); font-weight: 700; font-size: 14px; }
.duo .mhart { color: #2e7d4f; font-size: 16px; }
.match-badge {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--accent-donker); color: #fff; font-weight: 800; font-size: 13.5px;
  padding: 10px 16px; border-radius: 999px; white-space: nowrap; border: 3px solid #fff;
  box-shadow: 0 14px 34px rgba(168, 99, 42, .5);
}
/* Hero-variant van het match-duo: grotere, hógere mini-telefoons (staand formaat, zodat ze
   als telefoons lezen), minder overlap en de linker bovenop, zodat beide hartjes zichtbaar
   blijven. Staat ná de basisregels van .duo: gelijke specificiteit, laatste wint. */
.duo-hero .mini { width: 180px; }
.duo-hero .mbeeld { height: 150px; }
.duo-hero .mbeeld svg { width: 82%; }
.duo-hero .mkop { font-size: 12px; }
.duo-hero .mprijs { font-size: 16px; }
.duo-hero .mhart { font-size: 18px; }
.duo-hero .mini.links { transform: rotate(-6deg) translateX(1px); z-index: 2; }
.duo-hero .mini.rechts { transform: rotate(6deg) translateX(-1px); }

/* Afspraken: slotblok */
.slotblok { max-width: 640px; margin: 0 auto; }
.eerlijk-lijst { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.eerlijk-lijst li { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 14px 18px; font-size: 15px; }
.slot-cta { margin-top: 8px; }
/* Startstappen in het slotblok: dezelfde nummer-cirkels als de kenmerken, zonder witte kaartjes. */
.stappen { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
.stappen li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.stappen .nr {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--chip-bg);
  color: var(--accent-donker); font-size: 12.5px; font-weight: 800; display: flex;
  align-items: center; justify-content: center;
}
.stap-voet { font-size: 13.5px; color: var(--gedempt); margin: 0 0 30px; }
.maker { font-size: 14px; color: var(--gedempt); margin: 0 0 24px; }

/* Footer */
footer { border-top: 1px solid var(--rand); padding: 32px 0 44px; font-size: 13px; color: var(--licht); }
footer .links { margin-bottom: 10px; }
footer a { color: var(--gedempt); }
footer p { margin: 6px 0; max-width: 72ch; }

/* Hero-teller: eerlijk sociaal bewijs, gevoed door aanbod-telling.js (blijft hidden tot de fetch
   slaagt). Groen pulserend puntje = live. */
.hero-telling {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  background: #fff; border: 1px solid var(--rand); border-radius: 999px;
  padding: 8px 16px 8px 12px; box-shadow: 0 4px 14px rgba(80, 60, 30, .08);
}
.hero-telling[hidden] { display: none; }
.hero-telling .puls {
  width: 9px; height: 9px; border-radius: 50%; background: #2e7d4f; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46, 125, 79, .5); animation: puls 2.4s ease-out infinite;
}
@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(46, 125, 79, .5); }
  70% { box-shadow: 0 0 0 8px rgba(46, 125, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-telling .puls { animation: none; } }
.hero-telling .ht-getal { font-family: var(--font-bedrag); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.hero-telling .ht-lbl { font-size: 13px; color: var(--gedempt); }
.hero-telling .ht-tijd { display: block; font-size: 11px; color: var(--licht); }
.hero-telling-fallback { margin-top: 20px; font-size: 14px; color: var(--gedempt); }

/* Vertrouwensstrip onder de hero: rustige band met concrete geruststellingen. */
.vertrouwensstrip { background: var(--bg-alt); border-bottom: 1px solid var(--rand-alt); }
.vs-inner {
  display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 16px 20px;
  font-size: 13.5px; color: var(--gedempt);
}
.vs-inner span { display: flex; align-items: center; gap: 8px; }
.vs-inner span::before {
  content: "✓"; color: #2e7d4f; font-weight: 800; flex-shrink: 0;
}

/* Inzicht-grid: de twee voorbeeldkaarten naast elkaar (samengevoegde inzicht-sectie). */
.inzicht-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.inzicht-grid .ontdek-voorbeeld { max-width: none; }

/* "Waarom is dit gratis?" antwoordblok. */
.waarom-gratis { max-width: 640px; margin: 0 auto 24px; }
.waarom-gratis h2 { margin-bottom: 8px; }
.waarom-gratis p { margin: 0; color: var(--gedempt); }

/* Ingeklapte onderdelen (Zo beginnen jullie · De afspraken). */
.acc { border-bottom: 1px solid var(--rand); margin: 0; }
.acc:first-of-type { border-top: 1px solid var(--rand); }
.acc summary {
  list-style: none; cursor: pointer; padding: 16px 2px; font-family: var(--font-kop);
  font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; -webkit-tap-highlight-color: transparent;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .chev { color: var(--accent-donker); font-size: 20px; line-height: 1; transition: transform .2s ease; }
.acc[open] summary .chev { transform: rotate(90deg); }
.acc summary:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .acc summary .chev { transition: none; } }
.acc-body { padding: 0 2px 18px; }
.acc-body .stappen, .acc-body .eerlijk-lijst { margin-bottom: 0; }
.acc-body .stap-voet { margin: 12px 0 0; }
.acc-body > p { margin: 0; font-size: 15px; color: var(--gedempt); }
.faq-lees-meer { margin-top: 10px; font-size: 14px; }
.faq-lees-meer a { color: var(--accent-donker); }

/* ---- Echte app-screenshots in een telefoonframe (vervangt de oude SVG-mockups in de hero en de
   feature-secties). Mobile-first: het frame is standaard maximaal 300px breed en gecentreerd, en
   past met max-width:100% altijd binnen een smal scherm zonder zijwaartse scroll. ---- */
.hero-shot { flex: 0 0 auto; width: 300px; max-width: 100%; margin: 0 auto; }
.shot-frame {
  background: #15110c; border: 1px solid #2a2118; border-radius: 38px; padding: 6px;
  box-shadow: 0 30px 70px rgba(80, 60, 30, .22);
}
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 33px; }
.shot-cap { font-size: 13px; color: var(--licht); text-align: center; margin: 12px auto 0; max-width: 34ch; line-height: 1.45; }
figure.shot { margin: 0; width: 300px; max-width: 100%; }

/* Feature-rij: beschrijvende tekst naast één screenshot (zelfde tweekoloms-ritme als de hero;
   stapelt onder de flex-wrap-breekpunt). */
.feature-rij { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.feature-tekst { flex: 1 1 320px; min-width: 0; }
.feature-tekst .sectie-sub { margin-bottom: 22px; }
.feature-cta { margin-top: 6px; }
.feature-rij .shot { flex: 0 0 auto; margin: 0 auto; }

/* Twee screenshots naast elkaar (match-moment: overzicht + detail). */
.shot-duo { display: flex; gap: 32px 40px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
/* Een .match-badge ín een telefoonframe: als toast op het scherm zelf, in de lege
   ruimte onder de matcheslijst. */
.shot-frame { position: relative; }
.shot-frame .match-badge { top: 72%; }

/* Data-veiligheidslijst: rustige witte regels, groen vinkje ervoor (geen "claim.-uitleg"-opsomming). */
.data-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.data-lijst li {
  position: relative; background: #fff; border: 1px solid var(--rand); border-radius: 12px;
  padding: 14px 18px 14px 46px; font-size: 15px; line-height: 1.5;
}
.data-lijst li::before { content: "✓"; position: absolute; left: 18px; top: 14px; color: #2e7d4f; font-weight: 800; }

@media (max-width: 640px) {
  .hero { padding: 34px 0 44px; }
  .hero-inner { gap: 30px; }
  /* Mobiel: knop over de volle kolombreedte, ruimer duim-doel. De hint eronder blijft links. */
  .cta-knop { display: block; text-align: center; padding: 16px 26px; }
  /* De aanbod-teller centreert op mobiel, in lijn met de telefoon die eronder staat. */
  .hero-telling { display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  .telefoon { width: 240px; }
  .duo .mini { width: 140px; }
  .duo-hero .mini { width: 150px; }
  .duo-hero .mbeeld { height: 122px; }
  .inzicht-grid { grid-template-columns: 1fr; }
  /* Screenshots iets kleiner op smalle schermen, met ruimte tussen twee gestapelde frames. */
  .hero-shot, figure.shot { width: 270px; }
  .shot-duo { gap: 28px; }
}