/* =============================================================
   BOUWHUIS MEDIA — PAGINA "HOE HET WERKT"
   -------------------------------------------------------------
   Alleen de componenten die deze pagina extra nodig heeft.
   Alles wat de homepage al heeft (knoppen, kaarten, chain,
   sysview, offer, steps, faq, cta) wordt hergebruikt.
   ============================================================= */

/* --- Paginakop ---------------------------------------------- */

.page-hero {
  position: relative;
  padding-top: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -35%; left: 50%;
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(27,79,224,.09), rgba(27,79,224,0) 70%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  text-align: center;
  /* Ruim genoeg voor de langste regel die er staat: "Geen
     opstartkosten, geen contract." is 998px op de h1-maat van
     64px. Was dit 780px, dan brak die regel nog een keer en viel
     het kleurverloop midden in de zin uit elkaar. Zet je hier een
     langere kop neer, meet dan opnieuw. */
  max-width: 1020px;
  margin-inline: auto;
}
.page-hero h1 { margin-bottom: var(--space-5); }
.page-hero .lead { margin-inline: auto; max-width: 56ch; }

/* De grote productvisual mag hier breder dan op de homepage. */
.sysview--groot { max-width: 1080px; }

/* --- Split: tekst naast een visual --------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.split--flip .split__tekst  { order: 2; }
.split--flip .split__visual { order: 1; }

.split__tekst h2 { margin-bottom: var(--space-4); }
.split__tekst .lead { max-width: 46ch; }

.split__note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: 46ch;
}
.split__note svg { color: var(--positive); flex-shrink: 0; margin-top: 4px; }

/* Puntenlijst binnen een split */
.punten { margin-top: var(--space-6); display: grid; gap: 0; }
.punt {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.punt:last-child { border-bottom: 1px solid var(--line); }
.punt strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: .2rem;
}
.punt p { font-size: var(--fs-small); color: var(--ink-muted); max-width: 44ch; }

/* --- Paneel: klein productvenster ---------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.panel__kop {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
}
.panel__voet {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: .72rem;
  color: var(--ink-muted);
}
.panel__voet svg { color: var(--positive); flex-shrink: 0; }
.panel__voet .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}

/* Contactmogelijkheden */
.opties { padding: var(--space-2) var(--space-5); }
.opties li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 0;
}
.opties li + li { border-top: 1px solid var(--line-soft); }
.opties__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  margin-top: 1px;
}
.opties__icon svg { width: 11px; height: 11px; }
.opties__icon--wait { background: transparent; border: 1.5px dashed var(--line); }
.opties strong {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
}
.opties em { font-style: normal; font-size: .72rem; color: var(--ink-muted); }

/* Aanvraagrijen met status */
.rijen { padding: var(--space-2) var(--space-5); }
.rijen li {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: .85rem 0;
}
.rijen li + li { border-top: 1px solid var(--line-soft); }
.rijen strong {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
}
.rijen em { font-style: normal; font-size: .72rem; color: var(--ink-muted); }

/* --- Automatische flow --------------------------------------- */

.autoflow {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.autoflow__badge {
  position: absolute;
  top: var(--space-4); left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-tint);
  padding: .2rem .6rem;
  border-radius: var(--r-full);
}
.autoflow__node {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.autoflow__node--start { background: var(--brand-tint); border-color: var(--brand-tint-2); }
.autoflow__node--eind  { background: var(--positive-bg); border-color: #C8EBDC; }
.autoflow__node strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .15rem;
}
.autoflow__node em { font-style: normal; font-size: var(--fs-micro); color: var(--ink-muted); }
.autoflow__node .sterren { color: var(--star); letter-spacing: .12em; }

/* Vertakking: één aanvraag, twee acties */
.autoflow__split {
  width: 60%;
  height: 26px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  position: relative;
}
.autoflow__split::before {
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 1px; height: 13px;
  background: var(--line);
}
.autoflow__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: 13px;
  position: relative;
}
.autoflow__paar::before,
.autoflow__paar::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 1px; height: 13px;
  background: var(--line);
}
.autoflow__paar::before { left: 25%; }
.autoflow__paar::after  { left: 75%; }

/* Rechte flow met pijltjes */
.autoflow--recht { display: grid; gap: 0; }
.autoflow__pijl {
  width: 1px; height: 26px;
  margin: 0 auto;
  background: var(--line);
  position: relative;
}
.autoflow__pijl::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3.5px;
  border-right: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
  transform: rotate(45deg);
}

/* --- Techniek ------------------------------------------------ */

.techrij {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.techrij li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.techrij svg { color: var(--positive); flex-shrink: 0; }
.techrij__voet {
  margin-top: var(--space-5);
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--ink-muted);
}

/* --- Wie doet wat -------------------------------------------- */

.verdeling {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
.verdeling__kolom {
  padding: var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.verdeling__kolom--wij {
  background: var(--brand-tint);
  border-color: var(--brand-tint-2);
}
.verdeling__kop {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}
.verdeling__kolom--wij .verdeling__kop { color: var(--brand-ink); }
.verdeling__kolom li {
  position: relative;
  padding: .55rem 0 .55rem 1.1rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.verdeling__kolom li + li { border-top: 1px solid var(--line-soft); }
.verdeling__kolom--wij li + li { border-top-color: rgba(27,79,224,.12); }
.verdeling__kolom li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-muted);
}
.verdeling__kolom--wij li::before { background: var(--brand); }

.verdeling__voet {
  max-width: 56ch;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* --- Drie redenen (donker én licht) -------------------------- */

.redenen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.reden {
  padding: var(--space-6);
  border-radius: var(--r-md);
  border: 1px solid var(--dark-line);
  background: rgba(255,255,255,.03);
}
.reden h3 { font-size: 1.0625rem; margin-bottom: var(--space-3); }
.reden p { font-size: var(--fs-small); color: rgba(255,255,255,.6); }

.redenen--licht .reden {
  background: var(--surface);
  border-color: var(--line);
}
.redenen--licht .reden p { color: var(--ink-muted); }

/* --- Uitbreidingen-teaser ------------------------------------ */

.teaser {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.teaser li {
  padding: .7rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--t-base) var(--ease);
}
.teaser li:hover { border-color: #D3DCEA; }

/* --- Responsive ---------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-7); }
  .split--flip .split__tekst  { order: 1; }
  .split--flip .split__visual { order: 2; }
  .split__tekst .lead, .split__note, .punt p { max-width: none; }
  .redenen { grid-template-columns: 1fr; }
  .verdeling { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .autoflow__paar { grid-template-columns: 1fr; gap: var(--space-4); }
  .autoflow__paar::before, .autoflow__paar::after { display: none; }
  .autoflow__split { width: 1px; border-left: 0; border-bottom: 0; border-radius: 0; background: var(--line); }
  .rijen li { flex-wrap: wrap; }
}

/* =============================================================
   ZO WERKT HET — de centrale productpagina
   -------------------------------------------------------------
   Grote secties met één visual per stuk, geen rasters vol
   icooncards. De pagina moet lezen als één verhaal en niet als
   een productcatalogus — dat is precies het verschil dat we
   willen uitstralen.

   Alles hieronder gebruikt de tokens uit tokens.css. De drie
   tekeningen komen uit home.css; die wordt op deze pagina
   meegeladen.
   ============================================================= */

/* --- 1. De hero --------------------------------------------- */
.hw-hero { padding-bottom: clamp(2rem, 1rem + 2vw, 3rem); }
.hw-hero__inner { max-width: 46rem; margin-inline: auto; text-align: center; }

/* Stond hier eerder op een eigen maat van 67px. Nu gewoon de
   pagina-h1 uit tokens.css, zodat deze kop even groot is als die
   op /prijzen en /over-ons. */
.hw-hero h1 { margin: var(--space-4) 0 var(--space-5); }
/* Het kleurverloop op het woord tussen <em> staat in home.css,
   samen met dat van de homepage. Die stylesheet wordt op deze
   pagina meegeladen. Eén plek, dus ze kunnen niet uit elkaar
   gaan lopen. */

.hw-hero .lead { margin: 0 auto var(--space-6); max-width: 52ch; color: var(--ink-soft); }

.hw-hero__acties {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* De prijs als rustige geruststelling, niet als prijsbanner. */
.hw-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3) var(--space-5);
  list-style: none; margin: 0; padding: 0;
}
.hw-trust li {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.hw-trust svg { color: var(--positive-diep); flex-shrink: 0; }

/* --- 2. De drie uitkomsten ---------------------------------- */
.hw-pijlers__rij {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.hw-pijler { position: relative; padding-top: var(--space-5); }

/* Een dun lijntje boven elke stap, dat de volgorde laat zien
   zonder er pijlen bij te zetten. */
.hw-pijler::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
}
.hw-pijler:first-child::before { background: var(--brand); }

.hw-pijler__nr {
  display: block;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--brand);
}
.hw-pijler__titel { margin: var(--space-2) 0 var(--space-2); }
.hw-pijler p { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

/* --- 3. De drie grote productsecties ------------------------ */
.hw-pijlerblok__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
/* Beeld links, tekst rechts. Alleen de volgorde wisselt; de
   verhouding blijft gelijk, anders gaat de pagina wiebelen. */
.hw-pijlerblok--om .hw-pijlerblok__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.hw-pijlerblok--om .hw-pijlerblok__tekst  { order: 2; }
.hw-pijlerblok--om .hw-pijlerblok__visual { order: 1; }

.hw-pijlerblok h2 { margin: var(--space-3) 0 var(--space-4); }
.hw-pijlerblok .lead { margin: 0 0 var(--space-5); color: var(--ink-soft); max-width: 46ch; }

/* De losse onderdelen, zonder uitleg. Een restauranthouder hoeft
   niet te weten hoe lokale rankings werken — hij moet zien dat
   het erin zit. */
.hw-tags {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
}
.hw-tags li {
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-soft);
}

/* --- 4. Het Boost-blok -------------------------------------- */
.hw-boost__kaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  border: 1px solid var(--positive-rand);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--positive-vlak) 0%, var(--surface) 65%);
}
.eyebrow--groen { color: var(--positive-diep); }

.hw-boost h2 { margin: var(--space-3) 0 var(--space-4); }
.hw-boost .lead { margin: 0 0 var(--space-5); color: var(--ink-soft); }

.hw-boost__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hw-boost__prijs { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-head); }
.hw-boost__prijs em { font-style: normal; font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); }

.hw-boost__lijst ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hw-boost__lijst li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.hw-boost__lijst svg { color: var(--positive-diep); flex-shrink: 0; margin-top: .2rem; }
.hw-boost__lijst .micro { margin: var(--space-4) 0 0; font-size: var(--fs-micro); color: var(--ink-muted); }

/* --- 5. Alles inbegrepen ------------------------------------ */
.hw-stack__kolommen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.hw-stack__kolom h3 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
.hw-stack__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hw-stack__kolom li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.hw-stack__kolom svg { color: var(--positive-diep); flex-shrink: 0; margin-top: .2rem; }

.hw-stack__voet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  text-align: center;
}
.hw-stack__prijs { margin: 0; display: grid; gap: .15rem; }
.hw-stack__prijs strong { font-size: var(--fs-h3); letter-spacing: var(--ls-head); }
.hw-stack__prijs span { font-size: var(--fs-small); color: var(--ink-muted); }

/* --- 6. De setup -------------------------------------------- */
.hw-setup__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: var(--space-6) auto 0;
  padding: .45rem 1rem;
  border-radius: var(--r-full);
  background: var(--positive-vlak);
  color: var(--positive-diep);
  font-size: var(--fs-micro); font-weight: 600;
}
.hw-setup .container { display: flex; flex-direction: column; align-items: center; }
.hw-setup .container > * { width: 100%; }
.hw-setup__badge { width: auto; }

/* --- 7. Werkt samen met wat je al hebt ---------------------- */
.hw-samen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hw-samen h2 { margin: 0 0 var(--space-4); }
.hw-samen .lead { margin: 0; color: var(--ink-soft); }

.hw-samen__niet {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.hw-samen__kopje {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ink-muted);
}
.hw-samen__niet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.hw-samen__niet li {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.hw-samen__niet svg { color: var(--ink-muted); flex-shrink: 0; }

/* --- Mobiel ------------------------------------------------- */
/* Tekst eerst, beeld eronder — ook in de omgekeerde blokken.
   Op een telefoon leest niemand een plaatje voordat hij weet
   waar het over gaat. */
@media (max-width: 900px) {
  .hw-pijlers__rij     { grid-template-columns: 1fr; gap: var(--space-5); }
  .hw-pijlerblok__grid,
  .hw-pijlerblok--om .hw-pijlerblok__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hw-pijlerblok--om .hw-pijlerblok__tekst  { order: 1; }
  .hw-pijlerblok--om .hw-pijlerblok__visual { order: 2; }
  .hw-boost__kaart   { grid-template-columns: 1fr; }
  .hw-stack__kolommen{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .hw-samen__grid    { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hw-stack__kolommen { grid-template-columns: 1fr; }
  .hw-hero__acties .btn,
  .hw-stack__voet .btn { width: 100%; }
  .hw-boost__acties    { flex-direction: column; align-items: flex-start; }
}