/* ══ Secties ═════════════════════════════════════════════════════════
   Hero, kaartrijen, het donkere nachtvlak, de scanstroken, het formulier
   en de footer. Eén opbouw die alle pagina's delen. */

/* ── hero ─────────────────────────────────────────────────────────────
   Twee varianten. De productpagina's gebruiken de eenvoudige indeling:
   tekst links, object rechts in een pistache vorm. De home gebruikt
   `.hero--scene`: één complete scène (assets/hero-scene.jpg, 1954x805)
   waarin grond, boog, route en kaarten al zitten. Verhoudingen en
   posities van die scène komen uit het aangeleverde pakket. */

.hero { position: relative; overflow: clip; padding-block: clamp(32px, 4vw, 64px) clamp(56px, 7vw, 104px); }
.hero__in { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.hero__copy { position: relative; z-index: 1; display: grid; gap: var(--s24); justify-items: start; }
.hero h1 { max-width: 15ch; }
/* kop waarvan de regelval vastligt: elke span is een regel */
.hero h1.h1--regels { max-width: none; }
.hero h1.h1--regels span { display: block; }
.hero .lede { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s20); }
.hero__micro { font-size: var(--small-size); color: var(--text-muted); }
/* de getoonde display is een conceptweergave, geen vastgestelde uitvoering;
   dat hoort zichtbaar te blijven staan */
.hero__noot { margin-top: var(--s12); text-align: center; font-size: var(--label-size); color: var(--text-muted); }

.hero__art { position: relative; justify-self: center; width: 100%; max-width: 640px; isolation: isolate; }
.hero__art img { width: 100%; height: auto; }
.hero__blob {
  position: absolute; z-index: -1;
  width: 118%; aspect-ratio: 1.15;
  right: 0; top: -18%;
  max-width: 100%;
  background: var(--pistache);
  border-radius: 56% 44% 52% 48% / 48% 52% 48% 52%;
}

/* Scanpagina op de telefoon: het object kleiner en zonder de lege onderrand
   van de render (het onderste derde van het beeld is transparant), en
   minder lucht tussen de hero en "Wat je ontvangt". */
@media (max-width: 899px) {
  .hero--scan { padding-bottom: var(--s32); }
  .hero--scan .hero__art { max-width: 300px; }
  .hero--scan .hero__art img { margin-bottom: -28%; }
  .hero--scan + .band { padding-top: var(--s40); }
}

/* ── de complete scène op de home ─────────────────────────────────── */
.hero--scene {
  aspect-ratio: 1954 / 805;
  /* max-width houdt de verhouding binnen het scherm: zonder dit groeit het
     vlak in de breedte om aan min-height te voldoen */
  width: 100%; max-width: 100%;
  min-height: 520px;
  padding: 0;
  margin-top: -72px;                      /* de zwevende header hangt erboven */
}
.hero--scene .hero__visual { position: absolute; inset: 72px 0 0; overflow: hidden; z-index: -1; }
.hero--scene .hero__art {
  position: absolute; top: 4%; left: 3.5%;
  width: 100%; height: 100%; max-width: none;
  object-fit: fill; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%), linear-gradient(to bottom, transparent, #000 6%);
  mask-image: linear-gradient(to right, transparent, #000 5%), linear-gradient(to bottom, transparent, #000 6%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Vanaf tabletbreedte vult de hero het eerste scherm, op een vaste kier van
   64px na. Die kier is kleiner dan de bovenruimte van de rij eronder, zodat
   je daar alleen het kleurverloop ziet en nooit een halve illustratie.

   Let op: deze regels moeten ná de basisregel hierboven staan — ze hebben
   dezelfde specificiteit, dus alleen de volgorde beslist. */
@media (min-width: 761px) {
  .hero--scene {
    aspect-ratio: auto;
    height: clamp(600px, calc(100svh - 64px), 1000px);
  }
  /* Het beeld staat rechts, rust op de onderrand en loopt een stukje buiten
     beeld. Zo blijft de route ruim van de tekst en houdt de scène zijn
     eigen verhouding: `contain`, geen `fill`. */
  .hero--scene .hero__art {
    top: auto; bottom: 0; left: auto; right: -4%;
    width: 108%; height: auto;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%), linear-gradient(to bottom, transparent, #000 8%);
    mask-image: linear-gradient(to right, transparent, #000 7%), linear-gradient(to bottom, transparent, #000 8%);
  }
}

.hero--scene .hero__copy { position: absolute; left: 5%; top: 32%; width: 49%; gap: 0; }
.hero--scene h1 { font-size: clamp(42px, 5.6vw, 96px); line-height: .97; letter-spacing: -.06em; max-width: none; }
.hero--scene h1 span { display: block; white-space: nowrap; }
.hero--scene .lede { margin-top: clamp(18px, 1.8vw, 30px); max-width: 44ch; }
.hero--scene .hero__actions { gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(24px, 2.6vw, 40px); }

@media (max-width: 760px) {
  /* op mobiel hangt de header niet over het beeld: geen negatieve marge */
  .hero--scene { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin-top: 0; padding-bottom: var(--s24); }
  .hero--scene .hero__copy { position: relative; left: auto; top: auto; width: auto; margin: var(--s24) var(--gutter) 0; order: 1; }
  .hero--scene h1 { font-size: 11.5vw; letter-spacing: -.055em; line-height: 1; }
  .hero--scene h1 span { white-space: normal; }
  /* alleen de lege linkerruimte wegsnijden; de hele sculptuur blijft staan */
  .hero--scene .hero__visual { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1172 / 805; margin-top: var(--s24); }
  .hero--scene .hero__art { position: absolute; top: 0; left: -66.667%; width: 166.667%; height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* De reviewkaart uit de desktopscène, als HTML voor de telefoon. Daar staat
   de scène zonder kaart (de tekst in het beeld wordt te klein); deze kaart
   blijft leesbaar, inclusief het label FICTIEVE REVIEW. Op desktop zit de
   kaart al in het beeld, dus daar is deze verborgen. */
.hero__kaart { display: none; }
@media (max-width: 760px) {
  /* extra ruimte boven de scène, zodat de kaart in de lege hoek boven de
     boog staat en de segmenten vrij blijven */
  .hero--scene .hero__visual { --kaart-ruimte: 92px; aspect-ratio: auto; height: calc(100vw * 805 / 1172 + var(--kaart-ruimte)); }
  .hero--scene .hero__art { top: var(--kaart-ruimte); }
  .hero--scene .hero__kaart {
    display: block; position: absolute; z-index: 1;
    left: var(--gutter); top: 0; width: min(58%, 220px);
    padding: var(--s12) var(--s12) var(--s16);
    background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card);
    color: var(--text-heading);
  }
  .hero__kaart p { margin: 0; }
  /* dubbele klasse: anders wint de margin: 0 hierboven en plakt de lijn
     tegen "Klantreactie" */
  .hero__kaart .hero__kaart-kop {
    display: flex; align-items: center; gap: 6px;
    padding-bottom: var(--s12); margin-bottom: var(--s12); border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  }
  .hero__kaart-kop img { width: 15px; height: 15px; }
  .hero__kaart .hero__kaart-label {
    display: inline-block; margin: var(--s8) 0 0 34px; padding: 3px 7px; border-radius: var(--radius-button);
    background: var(--lavendel-licht); color: var(--label-op-lavendel);
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  }
  .hero__kaart-review { display: flex; gap: var(--s8); align-items: flex-start; }
  .hero__kaart-avatar {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--lavendel); font-size: 12px; font-weight: 700;
  }
  .hero__kaart-naam { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .hero__kaart-sub { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
  .hero__kaart .hero__kaart-sterren { margin-top: 4px; color: var(--google-geel); font-size: 13px; letter-spacing: 1px; line-height: 1; }
  .hero__kaart .hero__kaart-tekst { margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 1.35; }
}

/* ── sectiekop ────────────────────────────────────────────────────── */
.head { display: grid; gap: var(--s16); max-width: 46rem; }
.head--mid { margin-inline: auto; text-align: center; justify-items: center; }

/* ── de rij direct onder de hero ──────────────────────────────────────
   Geen harde rand tussen hero en lavendel, maar een verloop dat de twee
   aan elkaar knoopt. Zonder eigen sectiekop: de drie kaarten volgen
   direct op de hero. */
.hero-diensten {
  background: linear-gradient(180deg,
    var(--bg) 0, var(--lavendel-overgang) 64px, var(--lavendel) 150px);
  /* de bovenruimte blijft groter dan de kier van de hero (64px), zodat de
     illustraties altijd nét onder de vouw beginnen */
  padding-block: clamp(100px, 7vw, 112px) var(--block);
}
.hero-diensten .label { color: var(--label-op-lavendel); }
.hero-diensten .trio { margin-top: 0; }
/* De beelden zijn ondersteunend, niet de hoofdzaak: klein en gecentreerd
   boven de kop, zodat de hero de aandacht houdt. */
.hero-diensten .trio__art {
  height: clamp(68px, 6vw, 92px);
  align-items: center; justify-content: center;
  margin-bottom: var(--s4);
}
.hero-diensten .trio__art img { max-height: 100%; width: auto; }
/* "Jouw plek" is een vullende render zonder vrije rand; die krijgt de
   kaartronding, zodat het een bewuste tegel is en geen afgesneden beeld */
.hero-diensten .trio__art--vol img {
  height: 100%; width: auto; aspect-ratio: 3 / 2; max-height: 100%;
  object-fit: cover; border-radius: 14px;
}

/* ── kaartrij met object ──────────────────────────────────────────── */
.trio { display: grid; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 820px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio__item { display: grid; gap: var(--s12); align-content: start; }
.trio__art { display: flex; align-items: flex-end; justify-content: center; height: 190px; margin-bottom: var(--s8); }
.trio__art img { max-height: 190px; width: auto; max-width: 100%; object-fit: contain; }
.trio__item h3 { color: var(--text-heading); }
.trio__item p { color: var(--text-body); }
.trio__item .link { margin-top: var(--s4); }

/* ── splitsing: tekst naast object ────────────────────────────────── */
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--om .split__art { order: -1; }
@media (max-width: 899px) { .split--om .split__art { order: 0; } }
.split__copy { display: grid; gap: var(--s20); justify-items: start; }
.split__art { justify-self: center; width: 100%; max-width: 520px; }
.split__art img { width: 100%; height: auto; }

/* ── punten met vinkje ────────────────────────────────────────────── */
.ticks { display: grid; gap: var(--s12); }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s12); align-items: start; }
.ticks svg { width: 22px; height: 22px; color: var(--aubergine); margin-top: 1px; }
.ticks b { color: var(--text-heading); font-weight: 600; }

/* ── genummerde stappen ───────────────────────────────────────────── */
.steps { display: grid; gap: clamp(20px, 2.4vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; gap: var(--s12); align-content: start; padding: var(--s24); border-radius: var(--radius-card); background: var(--surface); }
.step__n {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--pistache); color: var(--aubergine);
  font-weight: 700; font-size: var(--small-size);
}
/* productillustratie boven de stap; transparant, dus niet bijsnijden */
.step__art { display: flex; align-items: flex-end; justify-content: center; height: 96px; }
.step__art img { max-height: 100%; width: auto; object-fit: contain; }
.step h3 { font-size: 1.125rem; }
.step p { font-size: var(--small-size); color: var(--text-muted); }

/* ── compacte hero ────────────────────────────────────────────────────
   Op review-display.html staan de hero en de lavendel strook samen in het
   eerste scherm. Daarvoor is de kop kleiner dan de standaardhero en is het
   beeld wat ingetogener; de strook eronder blijft zo zichtbaar. */
/* Hero en strook vullen samen precies het eerste scherm. De hero pakt de
   restruimte (1fr), de strook is zo hoog als zijn inhoud. Zo blijft er geen
   randje van de volgende sectie over, bij welke schermhoogte dan ook. */
.eerste-scherm {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - 72px);   /* 72px = de hoogte van de header */
}
.hero--compact {
  display: grid; align-content: center;
  padding-block: clamp(20px, 3vh, 48px);
}
.hero--compact h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.hero--compact .hero__in { gap: clamp(28px, 3.4vw, 56px); }

/* ── stappenstrook: beeld links, tekst rechts ─────────────────────────
   De compacte variant onder de hero van review-display.html. Geen witte
   kaarten en geen eigen sectiekop: de strook sluit direct op de hero aan,
   met dunne scheidingslijnen tussen de drie stappen. */
.band--strook { padding-block: clamp(14px, 1.8vh, 22px); }
.steps--strook { margin-top: 0; gap: 0; }
@media (min-width: 860px) { .steps--strook { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps--strook .step {
  background: none;
  border-radius: 0;
  padding: var(--s8) clamp(14px, 1.8vw, 28px);
  grid-template-columns: clamp(42px, 4.4vw, 54px) minmax(0, 1fr);
  column-gap: var(--s16);
  row-gap: 1px;
  align-items: start;
}
.steps--strook .step__art {
  grid-row: 1 / span 3;
  height: clamp(42px, 4.4vw, 54px);
  align-items: center;
}
/* het nummer is hier gewone tekst boven de kop, geen pistache schijfje */
.steps--strook .step__n {
  width: auto; height: auto;
  background: none;
  place-items: start;
  color: var(--text-muted);
  font-weight: var(--ui-weight);
  font-size: var(--small-size);
}
/* kleine typografie: de strook mag de hero geen aandacht afnemen */
.steps--strook .step h3 { font-size: 0.9375rem; letter-spacing: -0.01em; }
.steps--strook .step p { font-size: 0.8125rem; line-height: 1.4; }
.steps--strook .step__n { font-size: 0.75rem; letter-spacing: 0.06em; }
@media (min-width: 860px) {
  .steps--strook .step + .step { border-left: 1px solid var(--line-on-lavendel); }
}
@media (max-width: 859px) {
  .steps--strook .step { padding-inline: 0; }
  .steps--strook .step + .step { border-top: 1px solid var(--line-on-lavendel); }
}

/* ── voorbeeldrapport ─────────────────────────────────────────────── */
.report { padding: clamp(22px, 2.6vw, 34px); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.report__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s8) var(--s16); padding-bottom: var(--s16); border-bottom: 1px solid var(--line); }
.report__tag { font-size: var(--label-size); font-weight: 600; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--label-op-creme); }
.report > .label { margin-top: var(--s20); }
.finds { display: grid; }
.find { display: grid; gap: 4px 20px; padding: var(--s16) 0; border-top: 1px solid var(--line); }
.find:first-child { border-top: 0; }
@media (min-width: 560px) { .find { grid-template-columns: 130px minmax(0, 1fr); } .find p:last-child { grid-column: 2; } }
.find__k { font-size: var(--small-size); font-weight: 600; color: var(--text-muted); }
.find__t { font-weight: 600; color: var(--text-heading); }
.find__d { font-size: var(--small-size); color: var(--text-muted); }
.advice { margin-top: var(--s20); padding: var(--s20); border-radius: 18px; background: var(--pistache-licht); }
.advice ol { display: grid; gap: var(--s8); margin-top: var(--s12); padding-left: 20px; list-style: decimal; color: var(--text-heading); }
.advice li::marker { font-weight: 700; color: var(--marker-pistache); }
.report__foot { margin-top: var(--s16); font-size: 0.8125rem; color: var(--text-muted); }

/* Op de telefoon compacter: per bevinding alleen onderdeel en kernzin (de
   toelichting valt weg), krappere ruimtes. Het label "Voorbeeldrapport"
   en de fictief-regel onderaan blijven altijd staan. */
@media (max-width: 559px) {
  .split:has(.report) { gap: var(--s24); }
  .report { padding: 18px; }
  .report__top { padding-bottom: var(--s12); }
  .report > .label { margin-top: var(--s12); }
  .find { gap: 2px; padding: var(--s12) 0; }
  .find__k { font-size: var(--label-size); }
  .find__t { font-size: 0.9375rem; line-height: 1.4; }
  .find__d { display: none; }
  .advice { margin-top: var(--s12); padding: var(--s16); }
  .advice ol { gap: var(--s4); margin-top: var(--s8); font-size: 0.9375rem; }
  .report__foot { margin-top: var(--s12); font-size: var(--label-size); }
}

/* ── het donkere nachtvlak ────────────────────────────────────────── */
.night {
  position: relative; overflow: hidden;
  margin-inline: auto;
  width: min(100% - 2 * var(--gutter), var(--wrap));
  padding: clamp(40px, 6vw, 80px);
  border-radius: var(--radius-panel);
  background: var(--aubergine-night);
  color: var(--nacht-tekst);
}
@media (max-width: 760px) { .night { border-radius: var(--radius-panel-mobile); } }
.night__in { position: relative; z-index: 1; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .night__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
.night h2, .night h3 { color: var(--surface); }
.night .label { color: var(--pistache); }
.night__copy { display: grid; gap: var(--s24); justify-items: start; }
.night__art img { width: 100%; height: auto; }
.night .btn--licht { color: var(--aubergine); }
.night__micro { font-size: var(--small-size); color: var(--nacht-tekst); }

/* ── formulier ────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s12); width: 100%; max-width: 520px; }
.form__row { display: flex; flex-wrap: wrap; gap: var(--s12); }
.form__row .control { flex: 1 1 260px; }
.control {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-input);
  padding: 0 var(--s16);
}
.control input { width: 100%; border: 0; background: none; padding: 15px 0; outline: none; }
.form__note { font-size: var(--small-size); color: var(--text-muted); }
.form__status { font-size: var(--small-size); color: var(--text-muted); min-height: 1.4em; }
.form__status[data-tone='warn'] { color: var(--waarschuwing); }
.form__status[data-tone='error'] { color: var(--fout); }
.form__mail { justify-self: start; margin-top: var(--s4); font-size: var(--small-size); }

/* ── veelgestelde vragen ──────────────────────────────────────────── */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s16);
  width: 100%; padding: var(--s20) 0; border: 0; background: none;
  font-weight: 600; font-size: 1.0625rem; color: var(--text-heading); text-align: left; cursor: pointer;
}
.faq__q::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--text-muted); }
.faq__q[aria-expanded='true']::after { content: '–'; }
.faq__a { padding-bottom: var(--s20); max-width: 62ch; color: var(--text-body); }

/* ── footer ───────────────────────────────────────────────────────── */
.foot { background: var(--aubergine); color: var(--nacht-tekst); padding-block: clamp(56px, 7vw, 88px) var(--s32); }
.foot__top { display: grid; gap: var(--s32); }
@media (min-width: 860px) { .foot__top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .8fr)); gap: var(--s56); } }
.foot__brand img { width: 160px; }
.foot__tag { margin-top: var(--s16); max-width: 28ch; color: var(--nacht-tekst); }
.foot h3 { font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--pistache); margin-bottom: var(--s16); }
.foot__nav { display: grid; gap: var(--s12); justify-items: start; }
.foot__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8) var(--s20); }
.foot__rechts a { text-decoration: underline; text-underline-offset: 3px; }
.foot__rechts a:hover, .foot__cookie:hover { color: var(--pistache); }
.foot__nav a { color: var(--surface); text-decoration: none; border-bottom: 1px solid transparent; }
.foot__nav a:hover { border-bottom-color: var(--pistache); }
.foot address { font-style: normal; color: var(--surface); line-height: 1.6; }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s12);
  /* rechtsonder zweeft de chatknop; de voorkeurenlink blijft daarvoor weg */
  padding-right: clamp(0px, calc(100vw - 840px), 240px);
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s20);
  border-top: 1px solid var(--nacht-lijn);
  font-size: 0.8125rem;
}