/* LeadFollow 2.0: de interactieve bouwstenen van de homepage en /os. Hoort bij /assets/js/systeem.js.
   Zonder JavaScript is alles leesbaar: elke keuze toont dan al zijn teksten onder elkaar, de aanvraagstroom staat
   afgerond en het telefoongesprek staat er helemaal. Bij beperkte beweging gebeurt hetzelfde, zonder verschuivingen.
   Alleen transform en opacity bewegen. Tokens komen uit site.css, bouwstenen (block, card, checklist) uit pagina.css. */

/* ---------------------------------------------------------------------------------------------------------------
   Algemeen */
.block-head.midden, .bron-noot.midden { margin-left: auto; margin-right: auto; text-align: center; }
.sectie-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 44px; }
.sectie-cta-links { justify-content: flex-start; margin-top: 28px; }
.btn-gold { background: #C9A96A; color: var(--ink) !important; }
.btn-gold:hover { background: #D6B87C; }
.btn-licht { background: var(--ground); color: var(--green) !important; }
.btn-licht:hover { background: #fff; }
.vaantje {
  position: absolute; top: -13px; left: 24px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--champagne); color: #2B2008; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap;
}

/* Een segmentknop: twee of drie standen van hetzelfde. De gekozen stand ligt als een wit plaatje op de rail. */
.schakel { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.schakel-knop {
  font: 500 0.88rem var(--font-ui); color: var(--ink-2); background: transparent; border: 0; cursor: pointer;
  min-height: 40px; padding: 8px 16px; border-radius: var(--r-pill); white-space: nowrap;
  transition: background 200ms var(--ease-calm), color 200ms var(--ease-calm), transform 100ms ease-out;
}
.schakel-knop:hover { color: var(--ink); }
.schakel-knop:active { transform: scale(0.97); }
.schakel-knop[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(23, 32, 27, 0.12); }
.grond-wit .schakel { background: var(--ground); }

/* Een keuzeknop als pil (bronnen, branches). Reageert al bij het indrukken. */
.bron-knop, .branche-knop {
  font: 500 0.94rem var(--font-ui); color: var(--ink); background: var(--ground); cursor: pointer;
  min-height: 44px; padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  transition: background 180ms var(--ease-calm), border-color 180ms var(--ease-calm), color 180ms var(--ease-calm), transform 100ms ease-out;
}
.bron-knop:hover, .branche-knop:hover { border-color: var(--green-soft); }
.bron-knop:active, .branche-knop:active { transform: scale(0.97); }
.bron-knop[aria-pressed="true"], .branche-knop[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }

/* Een paneel dat verschijnt bij een keuze: kort en rustig, zes pixels omhoog. */
.bron-paneel.komt { animation: paneelIn 280ms var(--ease-calm); }
@keyframes paneelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------------------------------------------
   Hero met de aanvraagstroom */
.hero-systeem { padding-top: 72px; }
.hero-systeem h1 { font-size: clamp(2.5rem, 4.8vw, 3.9rem); max-width: 15ch; }
.hero-systeem .lede { font-size: 1.16rem; max-width: 50ch; }
.hero-proof a { color: var(--green-soft); padding: 5px 0; }

.stroom-kaart {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-float); padding: 20px 22px 18px;
}
.stroom-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stroom-merk { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.9rem; }
.stroom-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); background: var(--gold-tint); padding: 3px 9px; border-radius: var(--r-pill); }
.stroom-stappen { list-style: none; margin: 14px 0 0; padding: 0; position: relative; --voortgang: 1; }
/* De rail en de vulling. De vulling schaalt met transform in plaats van van hoogte te veranderen; dat blijft soepel. */
.stroom-stappen::before, .stroom-stappen::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; }
.stroom-stappen::before { background: var(--line); }
.stroom-stappen::after { background: var(--green-soft); transform-origin: top; transform: scaleY(var(--voortgang)); transition: transform 600ms var(--ease-calm); }
.stroom-stap { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px 0; transition: opacity 400ms var(--ease-calm); }
.stroom-stap b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.stroom-stap div span { display: block; font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }
.stroom-stap time { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stroom-bol { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--green-soft); transition: background 300ms var(--ease-calm), box-shadow 300ms var(--ease-calm), transform 300ms var(--ease-calm); }
.stroom-emma .stroom-bol, .stroom-klant .stroom-bol { background: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); }
.stroom-cap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--ink-3); }
/* Terwijl hij speelt: wat nog moet komen is stil en licht, de huidige stap klopt zacht. */
.stroom-kaart.speelt .stroom-stap.wacht { opacity: 0.34; }
.stroom-kaart.speelt .stroom-stap.wacht .stroom-bol { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.stroom-kaart.speelt .stroom-stap.nu .stroom-bol { transform: scale(1.15); }
.stroom-kaart.speelt .stroom-stap.nu .stroom-bol::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green-soft);
  animation: klop 1.4s var(--ease-calm) infinite;
}
.stroom-kaart.speelt .stroom-emma.nu .stroom-bol::after, .stroom-kaart.speelt .stroom-klant.nu .stroom-bol::after { border-color: var(--champagne); }
@keyframes klop { from { opacity: 0.7; transform: scale(0.8); } to { opacity: 0; transform: scale(1.6); } }

.koppelbalk { padding-top: 40px; text-align: center; }
.koppelbalk-kop { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.koppelbalk-lijst {
  list-style: none; margin: 14px 0 0; padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.koppelbalk-lijst li { font-size: 0.93rem; color: var(--ink-2); font-weight: 500; }

@media (max-width: 920px) {
  .hero-systeem { padding-top: 48px; }
  .hero-systeem h1 { max-width: none; }
  .hero-systeem .hero-visual { max-width: 520px; }
}
@media (max-width: 560px) {
  .stroom-kaart { padding: 16px 16px 14px; border-radius: var(--r-l); }
  .stroom-stap { gap: 12px; padding: 7px 0; }
  .koppelbalk-lijst { gap: 8px 18px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   01 · Herkenning */
.bronkiezer { max-width: 820px; margin: 0 auto; }
.bron-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bron-panelen { margin-top: 28px; }
.bron-paneel { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-l); padding: 30px 32px; }
.bron-panelen .bron-paneel + .bron-paneel { margin-top: 12px; }
.bron-paneel h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.25; letter-spacing: -0.015em; }
.bron-paneel p { margin-top: 12px; color: var(--ink-2); font-size: 1.02rem; max-width: 62ch; }
.bron-paneel .bron-vraag {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-editorial); font-style: italic; font-size: 1.2rem; color: var(--champagne-txt);
}
.bron-slot { text-align: center; margin: 40px auto 0; max-width: 34ch; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; color: var(--ink); }
@media (max-width: 560px) {
  .bron-knoppen { justify-content: flex-start; }
  .bron-paneel { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   02 · Het probleem: losse kanalen tegenover één stroom */
.probleem-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; }
.probleem-kop .block-head { margin-bottom: 0; }

/* Het podium rekent in procenten van zichzelf (container-eenheden), zodat de lijnen in het svg en de plaatjes
   erboven op elke breedte op dezelfde plek uitkomen. Het script zet --x en --y per plaatje. */
.systeem-podium {
  /* Een expliciete breedte: met alleen aspect-ratio en min-height leidde de browser er een minimale breedte van
     777 pixels uit af, en schoof de pagina tussen 720 en 800 pixels zijwaarts (gemeten 24 september 2026). */
  position: relative; container-type: size; width: 100%; aspect-ratio: 16 / 7; min-height: 340px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 22px 22px;
}
.podium-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 450ms var(--ease-calm); }
.podium-lijnen path { fill: none; vector-effect: non-scaling-stroke; }
.podium-los path { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.podium-samen path.spoor { stroke: color-mix(in srgb, var(--green-soft) 35%, transparent); stroke-width: 1.5; }
.podium-samen path.stroom { stroke: var(--green-soft); stroke-width: 2; stroke-dasharray: 3 14; stroke-linecap: round; animation: vloei 1.6s linear infinite; }
@keyframes vloei { to { stroke-dashoffset: -34; } }
.systeem-podium[data-stand="los"] .podium-samen, .systeem-podium[data-stand="samen"] .podium-los { opacity: 0; }

.podium-chip, .podium-knoop, .podium-stap, .podium-vraag {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  transform: translate(calc(var(--x, 50) * 1cqw - 50%), calc(var(--y, 50) * 1cqh - 50%)) rotate(var(--r, 0deg));
  transition: transform 700ms var(--ease-calm), opacity 450ms var(--ease-calm);
}
.podium-chip { font-size: 0.84rem; font-weight: 500; padding: 6px 13px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.podium-tool { border-style: dashed; color: var(--ink-2); background: var(--ground); }
.podium-knoop {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-m);
  background: var(--green); color: var(--green-ink); font-weight: 600; font-size: 0.95rem; box-shadow: var(--shadow-float);
}
.podium-stap { font-size: 0.8rem; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: var(--green-tint); color: var(--green); }
.podium-eind { background: var(--gold-tint); color: var(--champagne-txt); }
.podium-vraag { font-family: var(--font-editorial); font-style: italic; font-size: 0.95rem; color: var(--warning); }
.systeem-podium[data-stand="los"] .podium-knoop,
.systeem-podium[data-stand="los"] .podium-stap { opacity: 0; }
.systeem-podium[data-stand="samen"] .podium-vraag { opacity: 0; }
.systeem-podium[data-stand="samen"] .podium-tool { opacity: 0; }
.podium-tekst { margin-top: 18px; min-height: 3.4em; }
.podium-uitleg { color: var(--ink-2); max-width: 70ch; }
.podium-uitleg b { color: var(--ink); }
/* Zonder JavaScript heeft het podium geen posities; dan staat de lijst er in plaats van het beeld. */
.podium-zonderjs { margin: 0; padding-left: 20px; color: var(--ink-2); }
html.js .podium-zonderjs { display: none; }
html:not(.js) .systeem-podium, html:not(.js) .schakel[data-schakel], html:not(.js) .podium-tekst { display: none; }
@media (max-width: 700px) {
  .systeem-podium { aspect-ratio: 4 / 5; min-height: 0; }
  .podium-chip { font-size: 0.78rem; padding: 5px 10px; }
  .podium-knoop { font-size: 0.88rem; padding: 8px 13px; }
  .probleem-kop .schakel { width: 100%; }
  .probleem-kop .schakel-knop { flex: 1; padding-left: 10px; padding-right: 10px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   03 · Growth: de situatie en de motor */
.growth-kop { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: end; margin-bottom: 40px; }
.growth-kop .block-head { margin-bottom: 0; }
.situatie { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; }
.situatie-vraag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-txt); margin-bottom: 12px; }
.situatie .schakel { display: flex; background: var(--surface-2); }
.situatie .schakel-knop { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 0.84rem; }
.situatie-tekst.bron-paneel { background: none; border: 0; padding: 16px 2px 0; margin: 0; color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 1040px) { .growth-kop { grid-template-columns: 1fr; gap: 28px; } }
.situatie .schakel-knop { white-space: normal; line-height: 1.2; }
@media (max-width: 420px) { .situatie .schakel-knop { font-size: 0.78rem; } }

.motor { display: grid; gap: 16px; }
.motor-rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.motor-rij li { position: relative; }
/* Een pijltje naar de volgende stap, niet na het laatste item van een rij. */
.motor-rij li:not(:nth-child(5n))::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 1px; background: var(--line-strong);
}
.motor-knop {
  width: 100%; height: 100%; text-align: left; cursor: pointer;
  font: 600 0.95rem var(--font-ui); color: var(--ink); background: var(--ground);
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; min-height: 64px;
  transition: background 200ms var(--ease-calm), border-color 200ms var(--ease-calm), color 200ms var(--ease-calm), transform 100ms ease-out;
}
.motor-knop:hover { border-color: var(--green-soft); }
.motor-knop:active { transform: scale(0.98); }
.motor-nr { display: block; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--champagne-txt); font-weight: 600; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.motor-knop.geweest { border-color: color-mix(in srgb, var(--green-soft) 45%, var(--line)); }
.motor-knop[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.motor-knop[aria-selected="true"] .motor-nr { color: var(--champagne); }
.motor-lus .motor-nr::after { content: " ↺"; }
/* Een zachte puls die langs de motor loopt zolang niemand iets aanraakt; hij stopt bij de eerste keuze. */
.motor-knop.puls { border-color: var(--champagne); }

.motor-venster {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end;
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-l); padding: 26px 28px; min-height: 176px;
}
.motor-paneel h3 { font-size: 1.35rem; letter-spacing: -0.015em; margin-top: 4px; }
.motor-paneel p { margin-top: 10px; color: var(--ink-2); max-width: 64ch; }
.motor-sub { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-txt); }
.motor-paneel.komt { animation: paneelIn 280ms var(--ease-calm); }
.motor-nav { display: flex; align-items: center; gap: 10px; }
.motor-stap {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 1rem; cursor: pointer; color: var(--ink); transition: border-color 180ms var(--ease-calm), transform 100ms ease-out;
}
.motor-stap:hover { border-color: var(--green-soft); }
.motor-stap:active { transform: scale(0.94); }
.motor-teller { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: center; }
html:not(.js) .motor-nav { display: none; }
html:not(.js) .motor-paneel[hidden] { display: block !important; margin-top: 18px; }

/* Op een telefoon is de motor een strook om met de duim door te schuiven; de gekozen stap schuift in beeld. */
@media (max-width: 760px) {
  .motor-rij {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px;
    margin: 0 -24px; padding: 2px 24px 6px; scroll-padding: 0 24px; scrollbar-width: none;
  }
  .motor-rij::-webkit-scrollbar { display: none; }
  .motor-rij li { flex: 0 0 auto; scroll-snap-align: start; }
  .motor-rij li::after { display: none; }
  .motor-knop { min-height: 58px; white-space: nowrap; }
  .motor-venster { grid-template-columns: 1fr; padding: 22px 20px; }
  .motor-nav { justify-content: space-between; }
}

/* ---------------------------------------------------------------------------------------------------------------
   04 · Emma en het telefoongesprek */
.emma-sectie { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.telefoon { max-width: 340px; margin: 0 auto; width: 100%; }
.telefoon-scherm {
  position: relative; height: 600px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ground); border: 10px solid var(--ink); border-radius: 44px; box-shadow: var(--shadow-float);
}
.telefoon-kop { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 26px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.telefoon-kop img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: var(--green-tint); }
.telefoon-kop b { display: block; font-size: 0.92rem; line-height: 1.2; }
.telefoon-kop span { display: block; font-size: 0.74rem; color: var(--ink-3); line-height: 1.3; }
.telefoon-duur { font-size: 0.78rem !important; color: var(--success) !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.telefoon-regels { list-style: none; margin: 0; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; scroll-behavior: smooth; }
.tel-regel { max-width: 86%; padding: 9px 12px; border-radius: 16px; font-size: 0.84rem; line-height: 1.45; }
.tel-regel.van-emma { background: var(--green); color: var(--green-ink); align-self: flex-start; border-bottom-left-radius: 6px; }
.tel-regel.van-lead { background: var(--surface); border: 1px solid var(--line); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 6px; }
.tel-regel.komt, .tel-verslag.komt { animation: regelIn 320ms var(--ease-calm); }
@keyframes regelIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.tel-typen { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 13px; background: color-mix(in srgb, var(--green) 14%, var(--ground)); border-radius: 16px; border-bottom-left-radius: 6px; }
.tel-typen.van-lead { align-self: flex-end; background: var(--surface-2); border-bottom-left-radius: 16px; border-bottom-right-radius: 6px; }
.tel-typen i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-soft); animation: stip 1s infinite ease-in-out; }
.tel-typen i:nth-child(2) { animation-delay: 0.15s; }
.tel-typen i:nth-child(3) { animation-delay: 0.3s; }
@keyframes stip { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tel-verslag {
  margin-top: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--champagne); border-radius: 12px; display: flex; flex-direction: column; gap: 2px;
}
.tel-verslag b { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); margin-bottom: 4px; }
.tel-verslag span { font-size: 0.82rem; color: var(--ink-2); }
.telefoon-start {
  position: absolute; inset: 77px 0 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center; background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.telefoon-start span { font-size: 0.85rem; color: var(--ink-2); max-width: 22ch; }
html.js .telefoon:not(.gestart) .telefoon-start { display: flex; }
.telefoon-bediening { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.tel-knop { font: 500 0.85rem var(--font-ui); color: var(--green-soft); background: transparent; border: 0; padding: 8px 12px; min-height: 40px; border-radius: var(--r-pill); cursor: pointer; }
.tel-knop:hover { background: var(--green-tint); }
.telefoon-cap { margin-top: 8px; text-align: center; font-size: 0.76rem; color: var(--ink-3); }

.emma-tekst h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.emma-tekst .lede { margin-top: 16px; }
.emma-rij { list-style: none; counter-reset: emma; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.emma-rij li { counter-increment: emma; display: grid; grid-template-columns: 34px 150px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.emma-rij li::before { content: counter(emma, decimal-leading-zero); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; color: var(--champagne-txt); }
.emma-rij b { font-weight: 600; }
.emma-rij span { color: var(--ink-2); font-size: 0.93rem; }
.emma-grens { margin-top: 16px; font-size: 0.9rem; color: var(--ink-3); }
.emma-stem svg { flex-shrink: 0; }
.emma-stem[aria-pressed="true"] { border-color: var(--green-soft); background: var(--green-tint); }
@media (max-width: 900px) {
  .emma-sectie { grid-template-columns: 1fr; gap: 40px; }
  .emma-tekst { order: -1; }
}
@media (max-width: 520px) {
  .telefoon-scherm { height: 540px; border-width: 8px; border-radius: 38px; }
  .emma-rij li { grid-template-columns: 30px minmax(0, 1fr); }
  .emma-rij li span { grid-column: 2; }
}

/* ---------------------------------------------------------------------------------------------------------------
   05 · Inzicht */
.inzicht { background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 26px 26px; }
.inzicht-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.inzicht-titel { font-weight: 600; }
.inzicht-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); }
.inzicht-tabs button {
  font: 500 0.84rem var(--font-ui); color: var(--ink-2); background: transparent; border: 0; cursor: pointer;
  min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill);
  transition: background 180ms var(--ease-calm), color 180ms var(--ease-calm), transform 100ms ease-out;
}
.inzicht-tabs button:active { transform: scale(0.97); }
.inzicht-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(23, 32, 27, 0.12); }
.inzicht-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; padding-top: 22px; }
.inzicht-cijfers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.inzicht-cijfers div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.inzicht-cijfers dt { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }
.inzicht-cijfers dd { margin: 6px 0 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; transition: opacity 200ms var(--ease-calm); }
.inzicht-omzet dd { color: var(--champagne-txt); }
.inzicht.wisselt dd, .inzicht.wisselt .inzicht-lezing span, .inzicht.wisselt .trechter b { opacity: 0.25; }
.trechter { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.trechter-rij { display: grid; grid-template-columns: 82px minmax(0, 1fr) 36px; gap: 12px; align-items: center; font-size: 0.86rem; color: var(--ink-2); }
.trechter-rij b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity 200ms var(--ease-calm); }
.trechter-balk { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.trechter-balk i { display: block; height: 100%; border-radius: inherit; background: var(--green-soft); transform-origin: left; transform: scaleX(var(--w)); transition: transform 600ms var(--ease-calm); }
.trechter-rij:last-child .trechter-balk i { background: var(--champagne); }
.inzicht-lezing { align-self: center; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--champagne); border-radius: var(--r-m); padding: 16px 18px; }
.inzicht-lezing b { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); margin-bottom: 6px; }
.inzicht-lezing span { display: block; font-family: var(--font-editorial); font-style: italic; font-size: 1.12rem; line-height: 1.4; color: var(--ink); transition: opacity 200ms var(--ease-calm); }
.inzicht-cap { margin-top: 12px; font-size: 0.78rem; color: var(--ink-3); }
@media (max-width: 860px) {
  .inzicht-body { grid-template-columns: 1fr; }
  .inzicht-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inzicht-omzet { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .inzicht { padding: 16px; border-radius: var(--r-l); }
  .inzicht-tabs { width: 100%; }
  .inzicht-tabs button { flex: 1 0 auto; padding: 6px 10px; }
}

/* De echte schermopname, onder het voorbeeld. */
.demo-blok { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 40px; align-items: center; margin-top: 64px; }
.demo-blok-tekst p { margin-top: 10px; color: var(--ink-2); }
.demo-kader { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--green); box-shadow: var(--shadow-float); border: 1px solid var(--line); }
.demo-kader video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ground); }
.demo-start { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; }
.demo-start::before { content: ""; position: absolute; inset: 0; background: rgba(23, 32, 27, 0.10); transition: background 300ms var(--ease-calm); }
.demo-start:hover::before, .demo-start:focus-visible::before { background: rgba(23, 32, 27, 0.18); }
.demo-start:focus-visible { outline: 3px solid var(--champagne); outline-offset: -3px; }
.demo-knop { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: var(--r-pill); background: var(--ground); color: var(--green); font: 600 0.95rem var(--font-ui); box-shadow: 0 10px 30px rgba(23, 32, 27, 0.25); transition: transform 300ms var(--ease-calm); text-align: left; }
.demo-start:hover .demo-knop { transform: scale(1.03); }
.demo-knop .rond { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: var(--green-ink); flex-shrink: 0; }
.demo-knop .rond svg { margin-left: 3px; }
.demo-knop small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--ink-3); }
.demo-kader.is-bezig .demo-start { display: none; }
@media (max-width: 860px) { .demo-blok { grid-template-columns: 1fr; gap: 20px; } }

/* ---------------------------------------------------------------------------------------------------------------
   06 · LeadFollow OS. Standaard op groen (homepage en /os); drie stippen voor de drie standen. */
.os-keten { display: grid; gap: 18px; }
.os-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.84rem; }
.os-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.os-legenda b { font-weight: 600; margin-right: 2px; }
.os-stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--champagne); flex-shrink: 0; }
.os-stip.os-vandaag, .os-vandaag .os-stip { background: var(--champagne); }
.os-stip.os-nieuw, .os-nieuw .os-stip { background: linear-gradient(90deg, var(--champagne) 50%, transparent 50%); }
.os-stip.os-richting, .os-richting .os-stip { background: transparent; border-style: dashed; }

/* Vier fasen naast elkaar, elk een verticale keten; een dunne lijn verbindt de schakels binnen een fase en een pijl
   leidt naar de volgende fase. */
.os-fasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.os-fase { position: relative; min-width: 0; }
.os-fase + .os-fase::before {
  content: "→"; position: absolute; left: -22px; top: 2px; color: var(--champagne); font-size: 0.9rem;
}
.os-fase-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--champagne) 34%, transparent); font-weight: 600; font-size: 1.02rem; }
.os-fase-kop span { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--champagne); font-variant-numeric: tabular-nums; }
.os-fase-kop small { flex-basis: 100%; font-weight: 400; font-size: 0.8rem; line-height: 1.4; }
.os-fase-rij { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.os-fase-rij::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 18px; width: 1px; background: color-mix(in srgb, var(--champagne) 40%, transparent); }
.os-fase-rij .os-knop { width: 100%; }
.grond-groen .os-fase-kop { color: var(--green-ink); }
.grond-groen .os-fase-kop small { color: color-mix(in srgb, var(--green-ink) 70%, transparent); }
@media (max-width: 980px) {
  .os-fasen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .os-fase:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .os-fasen { grid-template-columns: 1fr; gap: 24px; }
  .os-fase + .os-fase::before { display: none; }
  .os-fase-rij { flex-direction: row; flex-wrap: wrap; padding-left: 0; }
  .os-fase-rij::before { display: none; }
  .os-fase-rij .os-knop { width: auto; }
}
.os-knop {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  font: 500 0.88rem var(--font-ui); min-height: 40px; padding: 7px 14px; border-radius: var(--r-pill);
  color: var(--green-ink); background: color-mix(in srgb, #FFFFFF 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--champagne) 34%, transparent);
  transition: background 200ms var(--ease-calm), color 200ms var(--ease-calm), border-color 200ms var(--ease-calm), transform 100ms ease-out;
}
.os-knop:hover { border-color: var(--champagne); }
.os-knop:active { transform: scale(0.97); }
.os-knop.os-richting { border-style: dashed; color: color-mix(in srgb, var(--green-ink) 80%, transparent); }
.os-knop[aria-selected="true"] { background: var(--ground); color: var(--green); border-color: var(--ground); }
.os-knop:focus-visible { outline-color: var(--champagne); }
.os-venster {
  background: color-mix(in srgb, #FFFFFF 7%, transparent); border: 1px solid color-mix(in srgb, var(--champagne) 34%, transparent);
  border-radius: var(--r-l); padding: 26px 28px; min-height: 164px;
}
.os-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne); }
.os-paneel h3 { margin-top: 10px; font-size: 1.35rem; letter-spacing: -0.015em; }
.os-paneel p { margin-top: 8px; max-width: 64ch; }
.os-paneel.komt { animation: paneelIn 280ms var(--ease-calm); }
html:not(.js) .os-paneel[hidden] { display: block !important; margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--champagne) 24%, transparent); }
.grond-groen .os-legenda li { color: color-mix(in srgb, var(--green-ink) 84%, transparent); }
.grond-groen .os-legenda b, .grond-groen .os-paneel h3 { color: var(--green-ink); }
.grond-groen .sectie-cta { justify-content: flex-start; }
@media (max-width: 560px) {
  .os-knop { font-size: 0.84rem; padding: 6px 12px; }
  .os-venster { padding: 20px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Voor wie */
.branche-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.branche-panelen { margin-top: 22px; }
.branche-paneel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px 36px; align-items: end; }
.branche-paneel + .branche-paneel { margin-top: 12px; }
.branche-paneel p { margin-top: 6px; color: var(--ink); font-size: 1.05rem; }
.branche-paneel .card-link { padding-top: 0; white-space: nowrap; text-decoration: none; }
@media (max-width: 760px) { .branche-paneel { grid-template-columns: 1fr; gap: 16px; } }

/* ---------------------------------------------------------------------------------------------------------------
   07 · Begin */
.founders { text-align: center; padding-bottom: 72px; }
.founders .editorial { font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.35; max-width: 26ch; margin: 0 auto; }
.founders .attrib { margin-top: 16px; font-size: 0.85rem; color: var(--ink-3); }
.begin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.begin-kaart { position: relative; display: flex; flex-direction: column; padding: 30px 30px 28px; }
.begin-kaart h3 { font-size: 1.4rem; margin-top: 8px; }
.begin-prijs { margin: 10px 0 20px; font-size: 0.95rem; }
.begin-prijs b { color: var(--ink); font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-right: 4px; }
.begin-kaart .checklist { margin-bottom: 26px; }
.begin-kaart .btn { margin-top: auto; }
.begin-kaart.paneel-groen .begin-prijs, .begin-kaart.paneel-groen .begin-prijs b { color: var(--green-ink); }
@media (max-width: 760px) { .begin { grid-template-columns: 1fr; } .begin-kaart.paneel-groen { margin-top: 10px; } }

/* ---------------------------------------------------------------------------------------------------------------
   Beperkte beweging: niets schuift, niets klopt, niets vloeit. Wat verandert, verandert meteen. */
@media (prefers-reduced-motion: reduce) {
  .bron-paneel.komt, .motor-paneel.komt, .os-paneel.komt, .tel-regel.komt, .tel-verslag.komt { animation: none; }
  .podium-chip, .podium-knoop, .podium-stap, .podium-vraag, .podium-lijnen { transition: opacity 200ms linear; }
  .podium-samen path.stroom { animation: none; stroke-dasharray: none; stroke: color-mix(in srgb, var(--green-soft) 70%, transparent); }
  .stroom-stappen::after, .trechter-balk i, .stroom-stap, .stroom-bol { transition: none; }
  .stroom-kaart.speelt .stroom-stap.nu .stroom-bol::after, .tel-typen i { animation: none; }
  .schakel-knop, .bron-knop, .branche-knop, .motor-knop, .os-knop, .inzicht-tabs button, .motor-stap { transition: none; }
  .schakel-knop:active, .bron-knop:active, .branche-knop:active, .motor-knop:active, .os-knop:active, .inzicht-tabs button:active, .motor-stap:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .telefoon-start { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .podium-los path, .podium-samen path.spoor { stroke: var(--ink-2); }
  .schakel-knop[aria-pressed="true"], .inzicht-tabs button[aria-selected="true"] { outline: 1px solid var(--ink); }
}

/* /os: de stand van zaken op een lichte grond. Champagne haalt op ivoor en wit geen leesbaar contrast, dus het
   label krijgt daar de donkere champagne. */
.os-stand .card { display: flex; flex-direction: column; }
.os-stand h3 { margin: 10px 0 14px; }
.os-label { color: var(--champagne-txt); }
.grond-groen .os-label { color: var(--champagne); }
.os-noot { margin-top: auto; padding-top: 16px; font-size: 0.82rem; color: var(--ink-3) !important; }
.signalen { margin-top: 14px; }
@media (min-width: 981px) { .os-fase-kop small { min-height: 2.8em; } }