/* ============================================================
   PROMPT TELECOM — v4 laag (1 september 2026)
   Doel: homepage als salesfunnel, diepte naar subpagina's.
   Bouwt voort op tokens.css + site.css; overschrijft alleen
   typografie, ritme en de nieuwe componenten. Brandkit Fleur
   (kleuren, fonts, vormtaal) blijft leidend.
   ============================================================ */

/* ---------- Typografische opschaling ---------- */
h1, h2, h3, h4 { letter-spacing: -.02em; }
.sectie { padding: 104px 0; }
.sectie.krap { padding: 68px 0; }
.sectie h2 { font-size: clamp(31px, 3.6vw, 46px); line-height: 1.06; }
.kop { max-width: 720px; margin-bottom: 52px; }
.lede { font-size: 17px; line-height: 1.6; }

/* Eyebrow met streep, vervangt de genummerde kickers */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sage);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 999px;
  background: var(--sage); opacity: .55;
}
.op-donker .eyebrow, .hero .eyebrow { color: var(--ping); }
.op-donker .eyebrow::before, .hero .eyebrow::before { background: var(--ping); opacity: .5; }

/* ---------- Navigatie: iets luchtiger ---------- */
.nav-inner { height: 78px; }
.nav-links { gap: 30px; }
.nav-links a { font-size: 14px; font-family: var(--font-head); font-weight: 500; }

/* ---------- Hero v4 ---------- */
.hero-v4 { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 78% 8%, #16404C 0%, #072A33 45%, #011E26 100%); }
.hero-v4 .gloed {
  position: absolute; pointer-events: none; border-radius: 999px; filter: blur(90px);
}
.hero-v4 .gloed.lime { width: 460px; height: 460px; right: -80px; top: -120px;
  background: rgba(182, 248, 153, .16); }
.hero-v4 .gloed.sage { width: 520px; height: 520px; left: -180px; bottom: -240px;
  background: rgba(76, 131, 150, .28); }
.hero-v4 .hero-inner { padding-block: 104px 108px; grid-template-columns: 1.02fr .98fr; gap: 72px; }
.hero-v4 h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 24px; }
.hero-v4 h1 em { font-style: normal; color: var(--ping); }
.hero-v4 .sub { font-size: 20px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 50ch; margin-bottom: 36px; }
.hero-v4 .widget { border-radius: 0 76px 0 0; }

/* Kanaalrij onder de hero-tekst: toont in één oogopslag dat het meer is dan telefonie */
.hero-kanalen { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.hero-kanalen span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 7px 15px;
}
.hero-kanalen svg { width: 15px; height: 15px; fill: none; stroke: var(--ping); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Statementblok (probleem → oplossing in één) ---------- */
.statement { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.statement h2 { margin-bottom: 18px; }
.statement .lede { margin-bottom: 26px; }
.stat-punten { list-style: none; display: grid; gap: 14px; }
.stat-punten li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; color: var(--muted); }
.stat-punten li::before {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: 9px;
  border-radius: 2px 2px 7px 2px; background: var(--sage);
}
.stat-visual {
  background: var(--pitch); color: #fff; border-radius: 0 84px 0 0;
  padding: 34px 34px 36px; position: relative; overflow: hidden;
}
.stat-visual .label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin-bottom: 16px;
}

/* ---------- Hub: de vier doorklikken (kern van de funnel) ---------- */
.hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hub-kaart {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line); text-decoration: none;
  border-radius: var(--radius) 42px var(--radius) var(--radius);
  padding: 34px 34px 30px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hub-kaart:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--mist); }
.hub-icoon {
  width: 46px; height: 46px; border-radius: 14px 14px 14px 5px; flex: none;
  background: var(--pitch); display: grid; place-items: center; margin-bottom: 4px;
}
.hub-icoon svg { width: 22px; height: 22px; fill: none; stroke: var(--ping); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.hub-kaart h3 { font-size: 20px; }
.hub-kaart p { color: var(--muted); font-size: 17px; }
.hub-kaart .meer {
  margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 600;
  font-size: 14px; color: var(--sage); display: inline-flex; align-items: center; gap: 8px;
}
.hub-kaart:hover .meer { gap: 12px; }
.hub-kaart .meer::after { content: "→"; transition: transform .2s ease; }

/* ---------- Kanalenband (donker, het DataQueue-verhaal) ---------- */
.band-donker {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(110% 130% at 15% 0%, #16404C 0%, #06262F 52%, #011E26 100%);
}
.band-donker .lede { color: rgba(255, 255, 255, .76); }
.band-donker h2 { color: #fff; }
.kanaalrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kanaal {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius) 34px var(--radius) var(--radius);
  padding: 26px 24px; transition: background .2s ease, transform .2s ease;
}
.kanaal:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
.kanaal svg.kicon { width: 26px; height: 26px; fill: none; stroke: var(--ping); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.kanaal h3 { font-size: 17px; margin-bottom: 7px; }
.kanaal p { font-size: 14px; color: rgba(255, 255, 255, .72); line-height: 1.55; }

/* ---------- Sectorstrip (compact, met audio) ---------- */
.sectorstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sectorstrip .sector { border-radius: var(--radius) 38px var(--radius) var(--radius); }

/* ---------- Bewijsband ---------- */
.bewijsband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.bewijsband > div { background: #fff; padding: 34px 30px; }
.bewijsband .groot {
  font-family: var(--font-head); font-weight: 600; font-size: 46px; line-height: 1;
  letter-spacing: -.03em; color: var(--pitch); margin-bottom: 10px;
}
.bewijsband h3 { font-size: 17px; margin-bottom: 6px; }
.bewijsband p { font-size: 14px; color: var(--muted); }

/* ---------- Slotsectie met tweede CTA (scan) ---------- */
.slot-extra {
  margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 14px; color: rgba(255, 255, 255, .72);
}
.slot-extra a { color: var(--ping); text-decoration: none; font-weight: 600; }
.slot-extra a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hint bij horizontaal schuivende rijen; alleen op mobiel zichtbaar */
.veeg-hint { display: none; font-size: 12px; color: var(--muted-2); margin-top: 12px; }

/* ---------- Subpagina's: capability-tegels ---------- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.caps.twee { grid-template-columns: repeat(2, 1fr); }
.cap {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius) 36px var(--radius) var(--radius);
  padding: 30px 28px;
}
.cap h3 { font-size: 20px; margin-bottom: 9px; }
.cap p { color: var(--muted); font-size: 17px; }
.cap .cap-icoon {
  width: 42px; height: 42px; border-radius: 13px 13px 13px 5px; margin-bottom: 18px;
  background: var(--ping-soft); display: grid; place-items: center;
}
.cap .cap-icoon svg { width: 20px; height: 20px; fill: none; stroke: var(--ping-ink);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-donker .cap { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .12); }
.op-donker .cap h3 { color: #fff; }
.op-donker .cap p { color: rgba(255, 255, 255, .72); }
.op-donker .cap .cap-icoon { background: rgba(182, 248, 153, .14); }
.op-donker .cap .cap-icoon svg { stroke: var(--ping); }

/* Specificatielijst (feiten naast elkaar) */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.specs > div { background: #fff; padding: 26px 24px; }
.specs .w { font-family: var(--font-head); font-weight: 600; font-size: 28px; letter-spacing: -.02em;
  color: var(--pitch); line-height: 1.1; margin-bottom: 5px; }
.specs .l { font-size: 14px; color: var(--muted); }

/* Subhero v4 */
.subhero-v4 { position: relative; overflow: hidden; color: #fff; padding: 88px 0 84px;
  background: radial-gradient(120% 130% at 80% 0%, #16404C 0%, #072A33 48%, #011E26 100%); }
.subhero-v4 h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; margin-bottom: 20px; }
.subhero-v4 h1 em { font-style: normal; color: var(--ping); }
.subhero-v4 .sub { font-size: 20px; color: rgba(255, 255, 255, .78); max-width: 62ch; margin-bottom: 32px; }

/* ---------- Mobiel ---------- */
@media (max-width: 980px) {
  .hub, .kanaalrij, .sectorstrip, .caps, .caps.twee, .bewijsband, .specs { grid-template-columns: 1fr 1fr; }
  .statement { grid-template-columns: 1fr; gap: 36px; }
  .hero-v4 .hero-inner { grid-template-columns: 1fr; gap: 44px; padding-block: 72px 76px; }
}
@media (max-width: 720px) {
  .sectie { padding: 62px 0; }
  .sectie.krap { padding: 48px 0; }
  .kop { margin-bottom: 30px; }
  .caps, .caps.twee, .bewijsband, .specs { grid-template-columns: 1fr; }

  /* Op mobiel is de hub een compact keuzemenu: icoon, titel, pijl.
     De uitleg staat op de pagina zelf en kost hier alleen schermlengte. */
  .hub, .hub.drie { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-kaart { padding: 18px 16px 38px; gap: 8px; }
  .hub-kaart p, .hub-kaart .meer { display: none; }
  .hub-kaart h3 { font-size: 17px; line-height: 1.2; }
  .hub-icoon { width: 38px; height: 38px; margin-bottom: 0; }
  .hub-icoon svg { width: 19px; height: 19px; }
  .hub-kaart::after {
    content: "→"; position: absolute; right: 16px; bottom: 12px;
    font-family: var(--font-head); font-weight: 600; color: var(--sage); font-size: 14px;
  }

  /* Kanalen blijven twee op een rij; de tekst is hier de boodschap. */
  .kanaalrij { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kanaal { padding: 18px 16px; }
  .kanaal svg.kicon { width: 22px; height: 22px; margin-bottom: 10px; }
  .kanaal h3 { font-size: 17px; }
  .kanaal p { font-size: 14px; }

  /* Sectorkaarten schuiven horizontaal in plaats van vier schermen te vullen. */
  .sectorstrip, .sectorstrip.twee {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -28px; padding: 0 28px 6px; scrollbar-width: none;
  }
  .sectorstrip::-webkit-scrollbar { display: none; }
  .sectorstrip .sector { flex: 0 0 76%; scroll-snap-align: start; }
  .veeg-hint { display: block; }

  /* Trustbar als één scrollende rij in plaats van vier regels. */
  .trustbar-inner {
    flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding: 14px 0;
    scrollbar-width: none;
  }
  .trustbar-inner::-webkit-scrollbar { display: none; }
  .trustbar span { white-space: nowrap; font-size: 14px; }

  .bewijsband .groot { font-size: 40px; }
  .bewijsband > div, .specs > div { padding: 26px 24px; }
  .hero-v4 h1 { font-size: clamp(32px, 8.6vw, 42px); }
  .hero-v4 .sub, .subhero-v4 .sub { font-size: 17px; }
  .hub-kaart, .cap { padding: 26px 24px; border-radius: var(--radius) 32px var(--radius) var(--radius); }
  .stat-visual { padding: 26px 24px 28px; border-radius: 0 56px 0 0; }
  .subhero-v4 { padding: 60px 0 58px; }
  .eyebrow { font-size: 12px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-kaart, .kanaal, .cap { transition: none; }
}

/* Hub in drie kolommen (zes doorklikken op de homepage).
   Op mobiel blijft het twee kolommen; zie de compacte variant hierboven. */
.hub.drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .hub.drie { grid-template-columns: 1fr 1fr; } }

/* Sectorstrip in twee kolommen (overzichtspagina) */
.sectorstrip.twee { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .sectorstrip.twee { grid-template-columns: 1fr; } }

/* ============================================================
   Toegankelijkheid (WCAG 2.1 AA)
   ============================================================ */

/* Skip-link: eerste tabstop, springt over de navigatie heen */
.skip {
  position: absolute; left: 12px; top: 0; transform: translateY(-100%); z-index: 100;
  background: var(--ping); color: var(--pitch);
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; transition: transform .15s ease;
}
.skip:focus { transform: translateY(0); }

/* Zichtbare focusindicator op alles wat bediend kan worden. De browserstandaard
   verdwijnt op donkere vlakken, daarom een eigen ring met genoeg contrast. */
a:focus-visible, button:focus-visible, input:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--ping);
  outline-offset: 3px;
  border-radius: 4px;
}
.sectie-wit a:focus-visible, .sectie a:focus-visible,
.sectie-wit button:focus-visible, .sectie button:focus-visible {
  outline-color: var(--ping-ink);
}
[id="hoofd"]:focus { outline: none; }

/* Contrastvarianten voor tekst op lichte vlakken (WCAG AA, 4.5:1).
   De merkkleuren zelf blijven ongewijzigd: Sage #4C8396 en Ping #B6F899
   houden hun rol in vlakken, iconen en CTA's. Deze twee tinten zijn puur
   de tekstvariant ervan, zoals --ping-ink dat al was.
   Sage op canvas haalde 3.92:1, muted-2 4.03:1 en ping-ink 3.07:1. */
:root {
  --sage-ink: #3D6B7C;   /* 5.46:1 op canvas */
  --muted-2: #5F6D73;    /* 5.00:1 op canvas */
  --ping-tekst: #457A2D; /* 4.81:1 op canvas */
}

/* Kleine tekst in Sage: eyebrow, doorkliklinks, sectorpijlen, tekstlinks */
.eyebrow,
.hub-kaart .meer,
.meerlinks a,
.sector .pijl,
.juridisch a,
.kop .kicker,
.sectie .kicker { color: var(--sage-ink); }
.op-donker .eyebrow, .hero .eyebrow, .band-donker .eyebrow,
.slot .eyebrow, .subhero-v4 .eyebrow,
.prijsband .eyebrow, .prijsband .kicker,
.impact-band .eyebrow, .stat-visual .eyebrow { color: var(--ping); }

/* Waar Ping als tekst dient (percentages in het dashboard) */
.dash .sent { color: var(--ping-tekst); }


/* ---------- Juridische tekstpagina's (privacy, voorwaarden) ---------- */
.juridisch { max-width: 760px; }
.juridisch h2 { font-size: 28px; margin: 42px 0 12px; }
.juridisch p, .juridisch li { color: var(--muted); font-size: 17px; margin-bottom: 12px; }
.juridisch ul { padding-left: 22px; margin-bottom: 12px; }
.juridisch .bijgewerkt { font-size: 14px; color: var(--muted-2); }
.juridisch a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }


/* De bellerbubbel in de demo had wit op Sage: 4.2:1, net onder de norm.
   Iets donkerder maakt hem 5.1:1 zonder dat de bubbel van kleur verandert. */
.bubbel.beller { background: #3F6E7F; }


/* LinkedIn-link in de footer */
.footer-social {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--font-head); font-weight: 500; font-size: 14px;
  color: rgba(255, 255, 255, .72); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 8px 16px; transition: color .15s ease, border-color .15s ease;
}
.footer-social:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ============================================================
   Afwerking op detailniveau (1 september)
   Gebaseerd op de kwaliteitsvloer uit de Impeccable-designgids:
   de onderdelen die een pagina "gebouwd" laten voelen in plaats
   van samengesteld. Richting en merkidentiteit blijven ongemoeid.
   ============================================================ */

/* -- 1. Browservlakken die we niet zelf tekenden, maar wel meeleveren -- */
::selection { background: var(--ping); color: var(--pitch); }
.hero ::selection, .band-donker ::selection, .slot ::selection,
.subhero-v4 ::selection { background: var(--ping); color: var(--pitch); }

input, textarea { caret-color: var(--sage); }

/* Smalle scrollbalk in merkkleur; Firefox en WebKit apart */
* { scrollbar-width: thin; scrollbar-color: var(--mist) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--mist); border-radius: 999px;
  border: 3px solid var(--bg); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--static); }

/* Cijfers die onder elkaar staan horen dezelfde breedte te hebben */
.bewijsband .groot, .specs .w, .dash-stat .w, .audio-tijd,
.topic .p, .impact-stat .reus { font-variant-numeric: tabular-nums; }

/* Links krijgen ruimte onder de onderkast in plaats van een streep erdoorheen */
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* -- 2. Regellengte terug naar een leesbare maat (65-75 tekens) -- */
.lede { max-width: 68ch; }
.stat-punten li { max-width: 62ch; }

/* -- 3. Iconen worden getekend, niet uit de tekstset geleend.
      Pijl en vinkje waren de unicode-tekens → en ✓; nu echte vormen
      die meeschalen met de tekstkleur. -- */
.hub-kaart .meer::after,
.sector .pijl::after,
.meerlinks a::after {
  content: ""; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor;
  -webkit-mask: var(--icoon-pijl) center / contain no-repeat;
  mask: var(--icoon-pijl) center / contain no-repeat;
  transition: transform .2s ease;
}
:root {
  --icoon-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icoon-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}
.hub-kaart .meer, .sector .pijl, .meerlinks a { display: inline-flex; align-items: center; gap: 8px; }
.hub-kaart:hover .meer::after, .sector:hover .pijl::after { transform: translateX(3px); }

.prijsband li::before, .slot-trust span::before, .wv.systeem::before,
.bubbel.systeem::before, .vgl-kolom .cel.ja::before, .trust-voet .toel::before {
  content: ""; width: 1.05em; height: 1.05em; flex: none; display: inline-block;
  background: currentColor;
  -webkit-mask: var(--icoon-vink) center / contain no-repeat;
  mask: var(--icoon-vink) center / contain no-repeat;
}
.prijsband li::before, .slot-trust span::before { background: var(--ping); }
.wv.systeem::before, .bubbel.systeem::before { background: currentColor; }
.vgl-kolom .cel.ja::before { background: var(--ping-tekst); }

/* Mobiele hub-pijl volgt hetzelfde icoon */
@media (max-width: 720px) {
  .hub-kaart::after {
    content: ""; width: 17px; height: 17px; background: var(--sage-ink);
    -webkit-mask: var(--icoon-pijl) center / contain no-repeat;
    mask: var(--icoon-pijl) center / contain no-repeat;
  }
}

/* -- 4. Beweging: één moment per sectie in plaats van 31 identieke entrees.
      Kaarten binnen een groep komen niet meer los omhoog; alleen de sectie
      zelf zet in, en subtieler dan voorheen. -- */
.rv { transform: translateY(10px); }
.hub-kaart.rv, .cap.rv, .kanaal.rv, .sector.rv, .stap.rv, .feature.rv {
  opacity: 1; transform: none; transition: none;
}

/* ============================================================
   Index en uitkomst (1 september, na de polish-ronde)
   De zes doorklikken waren zes gelijke kaarten: een raster zonder
   hiërarchie. Het zijn nu regels in één lijst, waarbij de twee
   hoofdroutes zwaarder wegen dan de vier verdiepingen.
   ============================================================ */
.index { display: block; border-top: 1px solid var(--line); }
.index-rij {
  display: flex; align-items: baseline; justify-content: space-between; gap: 40px;
  padding: 26px 4px 26px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; position: relative;
}
.index-rij::after {
  content: ""; position: absolute; right: 4px; top: 50%; margin-top: -0.5em;
  width: 1em; height: 1em; background: var(--sage-ink); opacity: 0;
  -webkit-mask: var(--icoon-pijl) center / contain no-repeat;
  mask: var(--icoon-pijl) center / contain no-repeat;
  transition: opacity .22s ease, transform .22s ease;
}
.index-rij:hover { background: linear-gradient(90deg, rgba(76,131,150,.05), transparent 60%); }
.index-rij:hover::after { opacity: 1; transform: translateX(4px); }
.index-kop { max-width: 62ch; }
.index-rij h3 { font-size: 20px; margin-bottom: 5px; }
.index-rij p { color: var(--muted); font-size: 17px; }
.index-meta {
  flex: none; font-size: 14px; color: var(--muted-2); text-align: right;
  padding-right: 26px; max-width: 22ch;
}

/* De twee hoofdroutes dragen de sectie */
.index-rij.hoofd { padding: 34px 4px 34px 0; align-items: center; }
.index-rij.hoofd h3 { font-size: 28px; letter-spacing: -.025em; margin-bottom: 8px; }
.index-rij.hoofd p { font-size: 17px; }
.index-rij.hoofd::after { opacity: .5; }
.index-rij.hoofd:hover::after { opacity: 1; }

/* Uitkomst: de cijfers staan in de zin, niet in een raster */
.uitkomst {
  max-width: 26ch; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(24px, 3.1vw, 38px); line-height: 1.28; letter-spacing: -.02em;
  color: var(--ink);
}
.uitkomst em { font-style: normal; font-weight: 600; color: var(--sage-ink); }
@media (max-width: 860px) {
  .index-rij { flex-direction: column; gap: 6px; padding: 20px 34px 20px 0; }
  .index-rij.hoofd { padding: 24px 34px 24px 0; }
  .index-rij.hoofd h3 { font-size: 28px; }
  .index-meta { display: none; }
  .index-rij::after { opacity: .45; top: 24px; margin-top: 0; }
  .uitkomst { font-size: 20px; max-width: none; }
}


/* Scroll-reveal is een verfraaiing, geen voorwaarde om de pagina te kunnen
   lezen. Zonder JavaScript (of in een renderer zonder scroll-events) blijft
   alles zichtbaar; de klasse .js wordt bovenin de pagina gezet. */
.rv { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(10px); }
.js .rv.in { opacity: 1; transform: none; }
.js .hub-kaart.rv, .js .cap.rv, .js .kanaal.rv,
.js .sector.rv, .js .stap.rv, .js .feature.rv { opacity: 1; transform: none; }

/* ============================================================
   Aanraakdoelen en bewegingsvoorkeur (audit-ronde)
   ============================================================ */

/* Op aanraakschermen halen de bedienbare elementen 44px, ook als de
   typografie kleiner is. Alleen daar: op een muisscherm zou het de
   compositie onnodig oprekken. */
@media (pointer: coarse) {
  .nav-cta { padding-top: 13px; padding-bottom: 13px; }
  .nav-burger { width: 46px; height: 46px; }
  .chip { padding-top: 11px; padding-bottom: 11px; }
  .sector .pijl, .meerlinks a, .hub-kaart .meer { padding: 6px 0; min-height: 44px; }
  .widget-form input, .widget-form .btn { min-height: 46px; }
  .audio-knop { width: 44px; height: 44px; }
  .footer-links a, .footer-onder a { display: inline-block; padding: 6px 0; }
  .dash-tab { padding-top: 10px; padding-bottom: 10px; }
}

/* Wie beweging heeft uitgezet, wil ook niet dat de pagina wegglijdt bij
   een ankerlink. De rest van de motion-uitzonderingen staat in site.css. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .index-rij, .index-rij::after, .footer-social { transition: none; }
}

/* ============================================================
   Detectorronde (1 september) — bevindingen van de designdetector
   Alleen de mechanische defecten en de patronen die als
   AI-signatuur gelden. Merkkeuzes uit de brand guide blijven.
   ============================================================ */

/* 1. Contrast: Ping-ink haalde als tekst 3,3:1 op wit. Overal waar die
      kleur letters of tekens kleurt gaat hij naar de tekstvariant. */
.feature .bewijsregel, .dash-stat .w em, .ticker .regel.systeem .wie,
.dash-stat .w .sent, .vgl-kolom .cel.ja::before, .trust-voet .toel::before,
.dblok.doet .dlijst li::before, .prijsblok.licht li::before { color: var(--ping-tekst); }
.vgl-kolom .cel.ja::before { background: var(--ping-tekst); }
.sectie-wit a:focus-visible, .sectie a:focus-visible,
.sectie-wit button:focus-visible, .sectie button:focus-visible { outline-color: var(--ping-tekst); }
/* Sage-links haalden 3,9:1 in hover; hover mag niet zwakker zijn dan rust.
   Alleen die links, niet elke <a>: een algemene regel gaf knoppen met een
   lime vlak witte letters in hover (1,2:1). */
.meerlinks a:hover, .sector .pijl:hover, .hub-kaart:hover .meer { color: var(--sage-ink); }

/* 4. Het pulserende stipje bij "live" suggereert verandering die er niet is.
      De golfjes ernaast tonen al dat er geluid speelt. De typ-indicator in
      het gesprek blijft wel bewegen: die hoort bij echte voortgang. */
.live-dot { animation: none; }

/* 5. Bewegingen die de lay-out herberekenen, en een verende curve.
      Beide vervangen door transform met een exponentiele afloop. */
.index-rij { transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .22s ease; }
.index-rij:hover { padding-left: 0; transform: translateX(12px); }

/* 6. Functionele tekst onder 11px en te krappe regelafstand */
.wv .rol, .bubbel .rol { font-size: 12px; }
.uitkomst { line-height: 1.32; }

/* 7. De trustbar liep tot de rand van zijn eigen vlak */
.trustbar-inner { padding-left: 2px; padding-right: 2px; }


/* Op de sectorenpagina zijn de kaarten de eerste inhoudslaag onder de h1,
   dus staan hun koppen op h2. Visueel blijven ze zoals ze waren. */
.sector-body .sectorkop { font-size: 20px; line-height: 1.15; margin-bottom: 8px; }

/* Kleine kapitalen zijn een label, geen lopende tekst: alleen op korte
   aanduidingen, en met ruimte tussen de letters zodat ze leesbaar blijven. */
.stat-visual .label, .index-meta { text-transform: none; letter-spacing: 0; }

/* Vergelijkingskolommen: de cellen stonden strak tegen de rand van hun vlak. */
.vgl-kolom .cel { padding-top: 12px; padding-bottom: 12px; }
.vgl-labels > div { padding-top: 12px; padding-bottom: 12px; }

/* Het icoon staat in de kopregel, niet als tegel erboven. De stapel van
   tegel, kop en tekst in gelijke kaarten is hetzelfde patroon dat op de
   homepage al is losgelaten; dit trekt de subpagina's daarmee gelijk. */
.cap h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cap .cap-icoon { width: 34px; height: 34px; margin-bottom: 0; flex: none; }
.cap .cap-icoon svg { width: 17px; height: 17px; }

/* Sage haalt 3,9:1 op licht en 3,4:1 op lime: te weinig voor tekst. Overal
   waar de merkkleur letters kleurt gaat hij naar de tekstvariant. */
.chip:hover, .fchip:hover, .dash-tab:hover { color: var(--sage-ink); border-color: var(--sage-ink); }
.badge.bewezen, .sys.bewezen { color: #2F5C27; }

/* Typografische stappen verder uit elkaar: koppen mogen niet bijna even
   groot zijn als lopende tekst. Schaal: 12 / 14 / 17 / 22 / 28 / 40. */
.kaart-kop h3, .feature h3, .sector h3, .impact-kolom h3,
.hub-kaart h3, .cap h3, .index-rij h3, .dkop h2 { font-size: 22px; }
.sector-body .sectorkop { font-size: 22px; }
.index-rij.hoofd h3 { font-size: 28px; }
.sectie h2 { font-size: clamp(28px, 3.6vw, 40px); }

/* ============================================================
   HERO V5 — het product is een stem, dus die hoor en zie je hier
   ============================================================ */
.hero-v5 {
  position: relative; overflow: hidden; color: #fff;
  background: #04222B;
  padding-block: 0;
}

/* Aurora: drie trage kleurvelden. Ze bewegen langzaam genoeg om niet te
   vragen om aandacht, en geven het vlak diepte die een vlakke gradient mist. */
.aurora { position: absolute; inset: -20% -10%; pointer-events: none; filter: blur(70px); opacity: .9; }
.aurora span { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -6vw; top: -10vw;
  background: radial-gradient(circle, rgba(76, 131, 150, .85), transparent 66%);
  animation: aurora1 26s ease-in-out infinite;
}
.aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: -4vw; top: -6vw;
  background: radial-gradient(circle, rgba(182, 248, 153, .34), transparent 64%);
  animation: aurora2 32s ease-in-out infinite;
}
.aurora span:nth-child(3) {
  width: 52vw; height: 52vw; left: 24vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(169, 139, 213, .3), transparent 66%);
  animation: aurora3 38s ease-in-out infinite;
}
@keyframes aurora1 { 50% { transform: translate3d(6vw, 4vw, 0) scale(1.12); } }
@keyframes aurora2 { 50% { transform: translate3d(-5vw, 6vw, 0) scale(1.18); } }
@keyframes aurora3 { 50% { transform: translate3d(4vw, -6vw, 0) scale(1.1); } }

.hero5-inner {
  position: relative; display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 72px; align-items: center; padding-block: 104px 112px;
}
.hero-v5 h1 {
  font-size: clamp(42px, 6.4vw, 82px); line-height: .98; letter-spacing: -.035em;
  margin-bottom: 26px;
}
.hero-v5 h1 em { font-style: normal; color: var(--ping); }
.hero-v5 .sub { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 52ch; margin-bottom: 34px; }
.btn-groot { padding: 18px 34px; font-size: 17px; }
.hero-v5 .bewijs { margin-top: 30px; }

/* Het luisterpaneel */
.luister {
  position: relative;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px 72px 24px 24px;
  padding: 26px 26px 22px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.luister-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.luister-label {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ping);
  border: 1px solid rgba(182, 248, 153, .4); border-radius: 999px; padding: 5px 12px;
}
.luister-titel { font-family: var(--font-head); font-weight: 500; font-size: 17px; color: rgba(255, 255, 255, .88); }

.luister-golf { height: 104px; margin-bottom: 18px; }
.luister-golf canvas { width: 100%; height: 100%; display: block; }

.luister-bediening { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.luister-knop {
  width: 58px; height: 58px; flex: none; border: 0; cursor: pointer;
  border-radius: 20px 20px 20px 7px; background: var(--ping); color: var(--pitch);
  display: grid; place-items: center;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease;
}
.luister-knop:hover { transform: scale(1.05); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8); }
.luister-knop svg { width: 22px; height: 22px; fill: currentColor; }
.luister-knop .ic-pauze, .speelt .luister-knop .ic-play { display: none; }
.speelt .luister-knop .ic-pauze { display: block; }
.luister-duur {
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  font-variant-numeric: tabular-nums; color: #fff; min-width: 3.2ch;
}
.luister-hint { font-size: 14px; color: rgba(255, 255, 255, .62); line-height: 1.4; }
.speelt .luister-hint { color: rgba(255, 255, 255, .85); }

.luister-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.luister-chip {
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82); border-radius: 999px; padding: 9px 16px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.luister-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.luister-chip.actief { background: var(--ping); border-color: var(--ping); color: var(--pitch); font-weight: 600; }
.luister.fout .luister-hint::after { content: " Lukt het afspelen niet, bel dan 085 112 4046."; }

@media (max-width: 980px) {
  .hero5-inner { grid-template-columns: 1fr; gap: 44px; padding-block: 76px 80px; }
  .luister { border-radius: 20px 52px 20px 20px; }
}
@media (max-width: 720px) {
  .hero-v5 h1 { font-size: clamp(34px, 10vw, 46px); }
  .hero-v5 .sub { font-size: 17px; }
  .luister { padding: 20px 18px 18px; }
  .luister-golf { height: 84px; }
  .luister-hint { display: none; }
  .luister-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 4px; }
  .luister-chips::-webkit-scrollbar { display: none; }
  .luister-chip { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora span { animation: none; }
}

/* Gespreksdemo met het terugbelformulier ernaast */
.gesprek-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.gesprek-sectie .chips { margin: 26px 0 28px; }
.gesprek-paneel {
  background: var(--pitch); border-radius: 24px 72px 24px 24px; padding: 24px;
  box-shadow: var(--shadow-lg);
}
.gesprek-paneel .gesprek {
  background: transparent; border: 0; height: 320px; padding: 0; margin: 0;
}
.gesprek-paneel .bubbel.agent { background: rgba(255, 255, 255, .95); border-color: transparent; }
.gesprek-paneel .bubbel.beller { background: #3F6E7F; }
.terugbel { border-top: 1px solid var(--line); padding-top: 22px; }
.terugbel-kop { font-family: var(--font-head); font-weight: 600; font-size: 17px; margin-bottom: 12px; }
@media (max-width: 980px) {
  .gesprek-grid { grid-template-columns: 1fr; gap: 34px; }
  .gesprek-paneel .gesprek { height: 260px; }
}

/* ============================================================
   Routes: twee hoofdroutes met een eigen visual, vier verdiepingen
   eronder. Vervangt de vlakke lijst; geeft de sectie beeld en gewicht.
   ============================================================ */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 18px; }
.route {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius) 56px var(--radius) var(--radius); overflow: hidden;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.route:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--mist); }
.route-visual {
  position: relative; height: 190px; display: grid; place-items: center;
  background: radial-gradient(120% 130% at 20% 0%, #16404C 0%, #072A33 55%, #011E26 100%);
  overflow: hidden;
}
.route-tekst { padding: 26px 28px 28px; }
.route-tekst h3 { font-size: 28px; letter-spacing: -.02em; margin-bottom: 8px; }
.route-tekst p { color: var(--muted); font-size: 17px; margin-bottom: 16px; }
.route-meer {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--sage-ink);
}
.route-meer::after {
  content: ""; width: 1.05em; height: 1.05em; background: currentColor;
  -webkit-mask: var(--icoon-pijl) center / contain no-repeat;
  mask: var(--icoon-pijl) center / contain no-repeat;
  transition: transform .2s ease;
}
.route:hover .route-meer::after { transform: translateX(4px); }

/* Visual 1: een stem die spreekt, met de talen eronder */
.rv-golf { display: flex; align-items: center; gap: 6px; height: 62px; }
.rv-golf i {
  display: block; width: 6px; border-radius: 999px; background: var(--ping);
  animation: rvgolf 1.5s ease-in-out infinite;
}
.rv-golf i:nth-child(1) { height: 14px; animation-delay: 0s; }
.rv-golf i:nth-child(2) { height: 30px; animation-delay: .08s; }
.rv-golf i:nth-child(3) { height: 48px; animation-delay: .16s; }
.rv-golf i:nth-child(4) { height: 26px; animation-delay: .24s; }
.rv-golf i:nth-child(5) { height: 56px; animation-delay: .32s; }
.rv-golf i:nth-child(6) { height: 34px; animation-delay: .4s; }
.rv-golf i:nth-child(7) { height: 18px; animation-delay: .48s; }
.rv-golf i:nth-child(8) { height: 44px; animation-delay: .56s; }
.rv-golf i:nth-child(9) { height: 62px; animation-delay: .64s; }
.rv-golf i:nth-child(10) { height: 28px; animation-delay: .72s; }
.rv-golf i:nth-child(11) { height: 40px; animation-delay: .8s; }
.rv-golf i:nth-child(12) { height: 16px; animation-delay: .88s; }
@keyframes rvgolf { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.rv-talen {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  font-size: 12px; letter-spacing: .16em; color: rgba(255, 255, 255, .5);
}

/* Visual 2: vier kanalen die op één lijn samenkomen */
.route-kanalen .route-visual { display: block; }
.rv-kanaal {
  position: absolute; width: 52px; height: 52px; border-radius: 16px 16px 16px 6px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center; top: 42px;
}
.rv-kanaal svg { width: 24px; height: 24px; fill: none; stroke: var(--ping); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rv-kanaal.k1 { left: 12%; } .rv-kanaal.k2 { left: 33%; } .rv-kanaal.k3 { left: 54%; } .rv-kanaal.k4 { left: 75%; }
.rv-lijn {
  position: absolute; left: 12%; right: 12%; top: 122px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(182, 248, 153, .7), transparent);
}
.rv-lijn::after {
  content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ping); animation: rvloop 4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes rvloop { 0% { left: 0; } 100% { left: 100%; } }

/* De vier verdiepingen: compacte rij, geen kaarten */
.subroutes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.subroutes a {
  background: #fff; padding: 22px 22px 24px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px; transition: background .18s ease;
}
.subroutes a:hover { background: var(--ping-soft); }
.subroutes strong { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.subroutes span { font-size: 14px; color: var(--muted); line-height: 1.45; }

@media (max-width: 980px) {
  .routes { grid-template-columns: 1fr; }
  .subroutes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .subroutes { grid-template-columns: 1fr; }
  .route-visual { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-golf i, .rv-lijn::after { animation: none; }
}

/* ============================================================
   Uitkomstband: de cijfers krijgen gewicht zonder het rasterpatroon
   van drie gelijke kolommen met een groot getal erin.
   ============================================================ */
.uitkomst-band { position: relative; overflow: hidden; }
.gloed-lime {
  position: absolute; width: 44vw; height: 44vw; right: -12vw; top: -18vw;
  background: radial-gradient(circle, rgba(182, 248, 153, .16), transparent 66%);
  filter: blur(80px); pointer-events: none;
}
.uitkomst-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
.uitkomst-band h2 { margin-bottom: 18px; }
.uitkomst-band .lede { margin-bottom: 28px; }
.uitkomst-lijst { display: grid; gap: 0; }
.uitkomst-lijst > div {
  display: grid; grid-template-columns: 190px 1fr; gap: 32px; align-items: baseline;
  padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .14);
}
.uitkomst-lijst > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.uitkomst-lijst dt {
  font-family: var(--font-head); font-weight: 500; font-size: clamp(44px, 5.4vw, 66px);
  line-height: .9; letter-spacing: -.04em; color: var(--ping);
  font-variant-numeric: tabular-nums;
}
.uitkomst-lijst dd { color: rgba(255, 255, 255, .74); font-size: 16px; line-height: 1.55; }
.uitkomst-lijst dd strong {
  display: block; color: #fff; font-family: var(--font-head); font-weight: 500;
  font-size: 20px; line-height: 1.25; margin-bottom: 8px;
}
@media (max-width: 980px) {
  .uitkomst-grid { grid-template-columns: 1fr; gap: 40px; }
  .uitkomst-lijst > div { grid-template-columns: 130px 1fr; gap: 22px; padding: 24px 0; }
}
@media (max-width: 560px) {
  .uitkomst-lijst > div { grid-template-columns: 1fr; gap: 10px; }
  .uitkomst-lijst dt { font-size: 44px; }
}

/* De gespreksdemo staat op een donker vlak; de onderdelen die daar van
   oorsprong licht waren krijgen hun donkere tegenhanger. */
.gesprek-sectie .terugbel { border-top-color: rgba(255, 255, 255, .16); }
.gesprek-sectie .widget-note { color: rgba(255, 255, 255, .6); }
.gesprek-sectie .widget-note a { color: rgba(255, 255, 255, .85); }
.gesprek-sectie .bevestigd { color: var(--ink); }
.gesprek-sectie .bevestigd b { color: var(--ink); }
.gesprek-sectie .chip {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
}
.gesprek-sectie .chip:hover { background: rgba(255, 255, 255, .13); color: #fff; border-color: rgba(255, 255, 255, .3); }
.gesprek-sectie .chip.actief { background: var(--ping); border-color: var(--ping); color: var(--pitch); }
.gesprek-sectie .widget-form input { background: rgba(255, 255, 255, .95); border-color: transparent; }

/* De aurora leest als licht in de ruimte, niet als een gekleurde halo:
   zwakker, wijder uitgesmeerd en zonder verzadigd middelpunt. */
.aurora { filter: blur(110px); opacity: .55; }
.aurora span:nth-child(1) { background: radial-gradient(circle, rgba(76, 131, 150, .5), transparent 72%); }
.aurora span:nth-child(2) { background: radial-gradient(circle, rgba(182, 248, 153, .18), transparent 70%); }
.aurora span:nth-child(3) { background: radial-gradient(circle, rgba(169, 139, 213, .16), transparent 72%); }
.gloed-lime { opacity: .7; filter: blur(100px); }

/* Ruime letterafstand hoort bij korte labels, niet bij een tekstregel */
.rv-talen { letter-spacing: .1em; }


/* De talenrij is een label, geen zin: klein, in kapitalen, en dan mag de
   letterafstand ruim zijn. */
.rv-talen { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }

/* De trustbar had geen binnenruimte tegen zijn eigen onderrand */
.trustbar-inner { padding-left: 4px; padding-right: 4px; }
.trustbar { padding-bottom: 2px; }

/* Een canvas heeft eigen afmetingen. Zolang hij in de normale stroom staat,
   duwt elke verhoging van canvas.width de kolom breder, waarna het script
   opnieuw een grotere breedte meet: de hero liep daardoor op een telefoon
   buiten beeld. De canvas ligt nu absoluut in zijn kader en bepaalt niets. */
.luister-golf { position: relative; }
.luister-golf canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero5-inner > *, .luister { min-width: 0; }

/* De subpagina's krijgen dezelfde lichtval als de homepage, zonder extra
   opmaak in de HTML: twee zachte velden achter de kop. */
.subhero-v4 { background: #04222B; }
.subhero-v4::before, .subhero-v4::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(110px); opacity: .5;
}
.subhero-v4::before {
  width: 42vw; height: 42vw; left: -8vw; top: -16vw;
  background: radial-gradient(circle, rgba(76, 131, 150, .5), transparent 72%);
}
.subhero-v4::after {
  width: 34vw; height: 34vw; right: -6vw; top: -12vw;
  background: radial-gradient(circle, rgba(182, 248, 153, .16), transparent 70%);
}
.subhero-v4 > * { position: relative; }

/* De prijsband stond tussen twee donkere secties in en maakte er een derde
   van. Licht vlak met een lime rand: hij onderbreekt nu, in plaats van mee
   te vloeien met wat eromheen staat. */
.prijsband {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius) 64px var(--radius) var(--radius);
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.prijsband h2 { color: var(--ink); }
.prijsband li { color: var(--muted); }
.prijsband li::before { background: var(--ping-tekst); }
.prijsband .eyebrow, .prijsband .kicker { color: var(--sage-ink); }
.prijsband .hero-grid-bg { display: none; }

/* ============================================================
   BELPANEEL (hero): agentkeuze, fragment, terugbelformulier
   ============================================================ */
.belpaneel { border-radius: 24px 64px 24px 24px; }
.bp-kop {
  font-family: var(--font-head); font-weight: 600; font-size: 20px;
  color: #fff; margin-bottom: 16px;
}
.bp-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.bp-agent {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px 16px 16px 6px; padding: 12px 14px;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.bp-agent:hover { background: rgba(255, 255, 255, .11); transform: translateY(-1px); }
.bp-agent.actief { background: rgba(182, 248, 153, .14); border-color: var(--ping); }
.bp-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 13px 13px 13px 5px;
  background: var(--pitch); color: var(--ping);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  border: 1px solid rgba(182, 248, 153, .35);
}
.bp-agent.actief .bp-avatar { background: var(--ping); color: var(--pitch); border-color: var(--ping); }
.bp-info { display: flex; flex-direction: column; min-width: 0; }
.bp-info strong { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: #fff; line-height: 1.2; }
.bp-info span { font-size: 12.5px; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Eén gekoppelde agent: de kaart vertelt wie er belt, hij is geen keuzeknop.
   Zodra er meer agents een nummer hebben, vervalt .bp-solo en komt het
   keuzeraster terug zonder verdere aanpassing. */
.bp-agents-solo { grid-template-columns: 1fr; }
.bp-solo { cursor: default; }
.bp-solo:hover { transform: none; }

.bp-speler { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bp-speler .luister-knop { width: 50px; height: 50px; border-radius: 16px 16px 16px 6px; }
.bp-speler .luister-golf { flex: 1; height: 54px; margin: 0; }
.bp-speler .luister-duur { font-size: 15px; }

.belpaneel .widget-form { display: flex; gap: 10px; }
.belpaneel .widget-form input[type="tel"] {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 16px;
  padding: 14px 18px; border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--ink); outline: none;
}
.belpaneel .widget-form input[type="tel"]:focus { border-color: var(--ping); }
.belpaneel .widget-form .btn { white-space: nowrap; padding: 14px 22px; font-size: 15.5px; }
.belpaneel .widget-note { font-size: 12.5px; color: rgba(255, 255, 255, .55); margin-top: 12px; }
.belpaneel .widget-note a { color: rgba(255, 255, 255, .8); }
.belpaneel .bevestigd { margin-top: 4px; }
.bp-alternatief { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin-top: 10px; }
.bp-alternatief a { color: var(--ping); font-weight: 600; text-decoration: none; }
.bp-alternatief a:hover { text-decoration: underline; }
.belpaneel.fout .widget-note::after { content: " Lukt het niet? Bel ons op 085 112 4046."; color: rgba(255, 255, 255, .85); }

/* ============================================================
   BENTO: de vaardigheden die geld opleveren
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tegel {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius) 36px var(--radius) var(--radius);
  padding: 26px 26px 24px; position: relative; overflow: hidden;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease, border-color .24s ease;
}
.tegel:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mist); }
.tegel h3 { font-size: 20px; letter-spacing: -.015em; }
.tegel p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.tegel.groot { grid-column: span 2; padding: 30px 30px 26px; }
.tegel.groot h3 { font-size: 26px; }
.tegel.groot p { font-size: 16px; max-width: 56ch; }
.tegel-badge {
  align-self: flex-start; font-family: var(--font-head); font-weight: 600;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-ink); border: 1px solid var(--mist); border-radius: 999px;
  padding: 5px 12px; margin-bottom: 6px;
}

/* Analytics Pro: het gesprek met je cijfers */
.t-chat { display: grid; gap: 8px; margin-top: 18px; max-width: 480px; }
.tc-vraag {
  justify-self: end; background: var(--sage); color: #fff;
  border-radius: 14px 14px 4px 14px; padding: 10px 15px; font-size: 14px; max-width: 78%;
}
.tc-antwoord {
  justify-self: start; background: var(--pitch); color: rgba(255, 255, 255, .92);
  border-radius: 14px 14px 14px 4px; padding: 12px 16px; font-size: 14px; line-height: 1.5;
}
.tc-balken { display: flex; gap: 5px; align-items: flex-end; height: 34px; padding-left: 4px; }
.tc-balken i {
  display: block; width: 14px; height: var(--h, 40%); border-radius: 4px 4px 3px 3px;
  background: var(--mist);
}
.tc-balken i:nth-child(3) { background: var(--sage); }
.tc-noot { font-size: 11.5px; color: var(--muted-2); }

/* Campagnes: de tijdlijn die zichzelf afmaakt */
.t-tijdlijn { display: grid; gap: 0; margin-top: 18px; max-width: 480px; }
.t-tijdlijn > span {
  display: flex; gap: 14px; align-items: baseline; font-size: 14px; color: var(--muted);
  padding: 11px 0 11px 18px; border-left: 2px solid var(--line); position: relative;
}
.t-tijdlijn > span::before {
  content: ""; position: absolute; left: -5px; top: 17px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--static);
}
.t-tijdlijn > span.tt-ok::before { background: var(--ping-tekst); }
.t-tijdlijn .tt-tijd {
  font-family: var(--font-head); font-weight: 600; font-style: normal; font-size: 13px;
  color: var(--ink); font-variant-numeric: tabular-nums; flex: none;
}

/* ============================================================
   Scroll-verhaal
   ============================================================ */
.story .gesprek { height: auto; min-height: 340px; overflow: visible; }
.story .bubbel { animation: none; opacity: 1; transform: none; }
.story-cta { margin-top: 26px; }
.story .chips { margin-top: 22px; }

@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tegel.groot { grid-column: span 2; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .tegel.groot { grid-column: auto; }
  .bp-agents { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bp-agent { padding: 10px 12px; gap: 10px; }
  .bp-avatar { width: 34px; height: 34px; font-size: 15px; }
  .belpaneel .widget-form { flex-direction: column; }
  .belpaneel .widget-form .btn { width: 100%; justify-content: center; }
}

/* De verzendknop bevat drie tekstdelen (Laat / naam / je bellen); de
   flex-gap van .btn maakte daar dubbele spaties van. */
.belpaneel .widget-form .btn { gap: .3em; }

/* Iets meer leven in het herovlak dan de gedempte stand */
.aurora { opacity: .72; }

/* De story krijgt wat extra hoogte zodat de scrub de ruimte heeft om het
   gesprek op te bouwen terwijl je erdoorheen scrolt. */
@media (min-width: 900px) {
  .story { padding-block: 130px; }
}



/* Kleine bento-tegels centreren hun inhoud naast de hoge buren */
.tegel:not(.groot) { justify-content: center; }


/* ============================================================
   Web Interface Guidelines (Vercel-audit, 1 september)
   ============================================================ */

/* Ankerdoelen (#bel, #demo, #contact) mogen niet onder de sticky
   navigatie verdwijnen. */
html { scroll-padding-top: 96px; }

/* Geen dubbele-tik-zoomvertraging op bedienbare elementen, en de
   grijze tikflits van iOS vervangt de eigen actieve staat. */
a, button, input, summary, [role="button"] { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; }

/* Koppen breken gebalanceerd, lopende tekst zonder hangende woorden. */
h1, h2, h3 { text-wrap: balance; }
.lede, .sub, .tegel p, .cap p, .uitkomst-lijst dd { text-wrap: pretty; }

/* Formulieren accepteren elke invoer; validatie komt na het typen. */
input { min-height: 44px; }

/* Wat het half uur oplevert: wie een call inplant, weet wat hij krijgt. */
.halfuur { max-width: 760px; margin: 40px auto 0; text-align: left; }
.halfuur-kop {
  font-family: var(--font-head); font-weight: 600; font-size: 17px;
  color: #fff; margin-bottom: 16px; text-align: center;
}
.halfuur-stappen { list-style: none; counter-reset: stap; display: grid; gap: 10px; }
.halfuur-stappen li {
  counter-increment: stap; position: relative; padding: 14px 18px 14px 54px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm); font-size: 15px; color: rgba(255, 255, 255, .74);
  line-height: 1.55;
}
.halfuur-stappen li::before {
  content: counter(stap); position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px; border-radius: 9px 9px 9px 4px;
  background: var(--ping); color: var(--pitch); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
}
.halfuur-stappen strong { color: #fff; font-weight: 600; }

/* ============================================================
   Breedte-sectie: denk-versus-doet en de zes vermogens
   ============================================================ */
.denk-doet {
  display: grid; grid-template-columns: auto auto 1fr; gap: 34px;
  align-items: center; margin-bottom: 54px; max-width: 980px;
}
.denk-label {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 8px;
}
.denk-tekst { font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; color: var(--muted); }
.denk-tekst.sterk { color: var(--ink); font-size: 28px; max-width: 22ch; }
.denk { opacity: .85; }
.denk-pijl { color: var(--sage); }
.denk-pijl svg { width: 48px; height: 24px; display: block; }

.vermogen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vermogen {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius) 34px var(--radius) var(--radius);
  padding: 26px 26px 22px;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease;
}
.vermogen:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.vermogen h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 14px; }
.v-icoon {
  width: 36px; height: 36px; flex: none; border-radius: 12px 12px 12px 5px;
  background: var(--pitch); display: grid; place-items: center;
}
.v-icoon svg { width: 18px; height: 18px; fill: none; stroke: var(--ping); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vermogen ul { list-style: none; display: grid; gap: 9px; }
.vermogen li {
  position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--muted);
}
.vermogen li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 2px 2px 6px 2px; background: var(--sage);
}

/* ============================================================
   Actie-wolk: wat je in een gesprek regelt
   ============================================================ */
.actie-wolk { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; }
.actie {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.actie:hover { background: var(--ping-soft); border-color: #CBEEB4; transform: translateY(-1px); }
.actie-voet { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.actie-voet p { color: var(--muted); font-size: 16px; max-width: 44ch; }

@media (max-width: 980px) {
  .denk-doet { grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px; }
  .denk-pijl { transform: rotate(90deg); width: 48px; }
  .vermogen-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Zes kaarten onder elkaar maakten de pagina te lang; net als de
     sectorkaarten schuiven ze horizontaal met snap. */
  .vermogen-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -28px; padding: 0 28px 6px; scrollbar-width: none;
  }
  .vermogen-grid::-webkit-scrollbar { display: none; }
  .vermogen { flex: 0 0 82%; scroll-snap-align: start; }
  .denk-tekst { font-size: 20px; }
  .denk-tekst.sterk { font-size: 23px; }
  .actie { font-size: 14px; padding: 9px 15px; }
}


/* Binnenkomst-choreografie via de bestaande reveal-laag: kaarten en chips
   volgen elkaar kort op. Zonder JavaScript is alles gewoon zichtbaar. */
.vermogen-grid .vermogen:nth-child(3n+2) { transition-delay: .08s; }
.vermogen-grid .vermogen:nth-child(3n+3) { transition-delay: .16s; }
.actie-wolk .actie:nth-child(1) { transition-delay: 0.00s; }
.actie-wolk .actie:nth-child(2) { transition-delay: 0.03s; }
.actie-wolk .actie:nth-child(3) { transition-delay: 0.06s; }
.actie-wolk .actie:nth-child(4) { transition-delay: 0.09s; }
.actie-wolk .actie:nth-child(5) { transition-delay: 0.12s; }
.actie-wolk .actie:nth-child(6) { transition-delay: 0.15s; }
.actie-wolk .actie:nth-child(7) { transition-delay: 0.18s; }
.actie-wolk .actie:nth-child(8) { transition-delay: 0.21s; }
.actie-wolk .actie:nth-child(9) { transition-delay: 0.24s; }
.actie-wolk .actie:nth-child(10) { transition-delay: 0.27s; }
.actie-wolk .actie:nth-child(11) { transition-delay: 0.30s; }
.actie-wolk .actie:nth-child(12) { transition-delay: 0.33s; }
.actie-wolk .actie:nth-child(13) { transition-delay: 0.36s; }
.actie-wolk .actie:nth-child(14) { transition-delay: 0.39s; }
.actie-wolk .actie:nth-child(15) { transition-delay: 0.42s; }
.actie-wolk .actie:nth-child(16) { transition-delay: 0.45s; }
.actie-wolk .actie:nth-child(17) { transition-delay: 0.48s; }
.actie-wolk .actie:nth-child(18) { transition-delay: 0.51s; }
.actie-wolk .actie:nth-child(19) { transition-delay: 0.54s; }
.actie-wolk .actie:nth-child(20) { transition-delay: 0.57s; }

/* ============================================================
   Beams: de agent-kern verbonden met de systemen. De straal loopt
   als lichtpuls over de lijn (stroke-dash-animatie, compositor-arm
   maar klein oppervlak; staat stil bij verminderde beweging).
   ============================================================ */
.beams { position: relative; max-width: 900px; margin: 44px auto 10px; height: 280px; }
.beams-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; }
.beam-basis { fill: none; stroke: var(--mist); stroke-width: 1.6; }
.beam-puls {
  fill: none; stroke: url(#beamgrad); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 34 300; stroke-dashoffset: 334;
  animation: beampuls 3.4s linear infinite;
}
@keyframes beampuls { to { stroke-dashoffset: 0; } }
.beams-lijnen .beam-puls:nth-of-type(8) { animation-delay: .6s; }
.beams-lijnen .beam-puls:nth-of-type(9) { animation-delay: 1.2s; }
.beams-lijnen .beam-puls:nth-of-type(10) { animation-delay: .9s; }
.beams-lijnen .beam-puls:nth-of-type(11) { animation-delay: 1.7s; }
.beams-lijnen .beam-puls:nth-of-type(12) { animation-delay: .3s; }

.beams-kolom {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 12px 0;
}
.beams-kolom.links { left: 0; align-items: flex-start; }
.beams-kolom.rechts { right: 0; align-items: flex-end; }
.beam-sys {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 6px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow);
}
.beam-sys img { width: 20px; height: 20px; }
.beams-kern {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 24px 24px 24px 9px;
  background: var(--pitch); display: grid; place-items: center;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5);
}
.beams-kern .wave { margin: 0; }

@media (max-width: 720px) {
  .beams { height: 230px; margin-top: 30px; }
  .beam-sys { font-size: 12.5px; padding: 8px 12px; gap: 7px; }
  .beam-sys img { width: 16px; height: 16px; }
  .beams-kern { width: 60px; height: 60px; border-radius: 19px 19px 19px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .beam-puls { display: none; }
}

/* ============================================================
   Belpaneel: langzaam wandelend lichtaccent langs de rand
   ============================================================ */
@property --hoek { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.belpaneel::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--hoek),
    transparent 0deg, transparent 300deg,
    rgba(182, 248, 153, .9) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rondje 9s linear infinite;
}
.belpaneel { position: relative; z-index: 0; }
@keyframes rondje { to { --hoek: 360deg; } }
@media (prefers-reduced-motion: reduce) { .belpaneel::before { animation: none; opacity: .4; } }

/* ============================================================
   Vermogen-kaarten: hover-choreografie (naar het Aceternity-patroon,
   zonder de zijbalk): tint, icoonkanteling en oplichtende bullets.
   ============================================================ */
.vermogen { position: relative; overflow: hidden; }
.vermogen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(160deg, rgba(182, 248, 153, .1), transparent 55%);
  transition: opacity .25s ease;
}
.vermogen:hover::after { opacity: 1; }
.vermogen .v-icoon { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.vermogen:hover .v-icoon { transform: rotate(-6deg) scale(1.06); }
.vermogen li::before { transition: background .2s ease; }
.vermogen:hover li::before { background: var(--ping-tekst); }

/* ============================================================
   Product-dropdown in de navigatie. Open op hover en op focus
   (desktop); op mobiel staan de links plat in het burgermenu.
   ============================================================ */
.nav-drop { position: relative; }
.nav-drop-knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 500; font-size: 14px;
  color: rgba(255, 255, 255, .78); padding: 8px 0;
  transition: color .15s ease;
}
.nav-drop-knop svg { width: 14px; height: 14px; transition: transform .2s ease; }
.nav-drop:hover .nav-drop-knop, .nav-drop:focus-within .nav-drop-knop,
.nav-drop-knop[aria-expanded="true"] { color: #fff; }
.nav-drop:hover .nav-drop-knop svg, .nav-drop:focus-within .nav-drop-knop svg { transform: rotate(180deg); }

.nav-paneel {
  position: absolute; left: -18px; top: calc(100% + 10px);
  display: grid; grid-template-columns: repeat(2, 250px); gap: 2px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius) 28px var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px; z-index: 60;
  opacity: 0; transform: translateY(6px); visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Onzichtbaar hover-brugje zodat het paneel niet sluit onderweg ernaartoe */
.nav-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-drop:hover .nav-paneel, .nav-drop:focus-within .nav-paneel,
.nav-drop.open .nav-paneel { opacity: 1; transform: none; visibility: visible; }
.nav-paneel a {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 12px 14px; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.nav-paneel a:hover { background: var(--ping-soft); }
.nav-paneel strong { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); }
.nav-paneel span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

@media (max-width: 900px) {
  /* In het burgermenu: geen dropdown maar platte links */
  .nav-drop-knop { display: none; }
  .nav-paneel {
    position: static; display: grid; grid-template-columns: 1fr;
    opacity: 1; transform: none; visibility: visible;
    background: transparent; border: 0; box-shadow: none; padding: 0; gap: 0;
  }
  .nav-paneel a { padding: 10px 0; }
  .nav-paneel strong { color: #fff; font-size: 16px; }
  .nav-paneel span { display: none; }
  .nav-paneel a:hover { background: transparent; }
}