/* ══════════════════════════════════════════════════════════
   MARQETING — de marketingsite
   ══════════════════════════════════════════════════════════
   Alleen wat specifiek is voor deze pagina. Wat twee keer
   voorkomt hoort in design/systeem.css.
   ══════════════════════════════════════════════════════════ */

.sla-over {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--inkt); color: var(--wit);
  padding: 10px 16px; border-radius: var(--rond-pil);
  font-weight: var(--w-vet); text-decoration: none;
}
.sla-over:focus { left: 16px; top: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── merk ─────────────────────────────────────────────────
   De asterisk verbindt Marqeting zichtbaar met AutoRanq. */
.merk {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--inkt);
}
.merk__teken { border-radius: 9px; display: block; }
.merk__woord {
  font-weight: var(--w-zwaar); font-size: 18px;
  letter-spacing: var(--tr-mid);
}
.merk__punt { color: var(--gr-700); }
.voet .merk { color: var(--wit); }
.voet .merk__punt { color: var(--gr-300); }

/* Het familie-element van AutoRanq en Marqeting: drie rechte
   stroken, bewust geen letterteken. De productkleur maakt hem
   van Marqeting. */
.ster {
  --ster-kleur: var(--gr-700);
  position: relative; display: inline-block; flex: none;
  width: 24px; height: 24px;
  background:
    linear-gradient(90deg, transparent 43%, var(--ster-kleur) 43% 57%, transparent 57%),
    linear-gradient(30deg, transparent 45%, var(--ster-kleur) 45% 55%, transparent 55%),
    linear-gradient(-30deg, transparent 45%, var(--ster-kleur) 45% 55%, transparent 55%);
}

/* ── kop ──────────────────────────────────────────────────
   Plakt bovenaan. Zodra je scrolt komt er een randlijn en een
   schaduw bij; zonder dat zweeft hij los boven de tekst zodra
   er iets onderdoor schuift. */
.bovenbalk { background: #0d3b2e; color: var(--wit); }
.bovenbalk__rij { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--r-4); }
.bovenbalk p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 10px; }
.bovenbalk p span { padding: 3px 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: var(--gr-200); font-size: 8px; font-weight: var(--w-zwaar); letter-spacing: .09em; text-transform: uppercase; }
.bovenbalk p b { color: rgba(255,255,255,.78); font-weight: var(--w-half); }
.bovenbalk a { display: inline-flex; align-items: center; gap: 7px; color: var(--wit); text-decoration: none; font-size: 10px; font-weight: var(--w-zwaar); }
.bovenbalk a svg { width: 14px; height: 14px; }
@media (max-width: 650px) { .bovenbalk p b { display: none; } }
.kop {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duur) var(--soepel),
              box-shadow var(--duur) var(--soepel);
}
.kop.is-los { border-bottom-color: var(--lijn-fijn); box-shadow: var(--sch-1); }
.kop__rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-6); height: 68px;
}
.kop__nav { display: none; gap: var(--r-8); }
.kop__nav a {
  position: relative;
  color: var(--inkt-2); text-decoration: none;
  font-size: var(--t-klein); font-weight: var(--w-half);
  transition: color var(--duur-kort) var(--soepel);
}
/* Het streepje groeit vanuit het midden. Een streepje dat van
   links naar rechts schuift leest als een laadbalk. */
.kop__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--gr-600);
  transform: scaleX(0); transition: transform var(--duur) var(--veer);
}
.kop__nav a:hover { color: var(--inkt); }
.kop__nav a:hover::after { transform: scaleX(1); }
.kop__acties { display: flex; align-items: center; gap: var(--r-6); }
.kop__in {
  color: var(--inkt-2); text-decoration: none;
  font-size: var(--t-klein); font-weight: var(--w-vet);
}
.kop__in:hover { color: var(--inkt); }
.taal { position: relative; display: inline-flex; }
.taal__knop {
  height: 38px; padding: 0 11px 0 8px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--lijn); border-radius: var(--rond-pil); background: var(--wit); color: var(--inkt);
  cursor: pointer; font: inherit; font-size: 11px; font-weight: var(--w-zwaar); letter-spacing: .06em;
  box-shadow: var(--sch-1); transition: border-color var(--duur-kort) var(--soepel), box-shadow var(--duur-kort) var(--soepel);
}
.taal__knop:hover, .taal.is-open .taal__knop { border-color: rgba(4,120,87,.28); box-shadow: var(--sch-2); }
.taal__knop:focus-visible { outline: 3px solid rgba(5,150,105,.18); border-color: var(--gr-600); }
.taal__knop svg { width: 11px; height: 11px; color: var(--inkt-3); transition: transform var(--duur-kort) var(--soepel); }
.taal.is-open .taal__knop svg { transform: rotate(180deg); }
.vlag { width: 21px; height: 14px; flex: none; overflow: hidden; border: 1px solid rgba(11,15,14,.13); border-radius: 3px; box-shadow: 0 1px 2px rgba(11,15,14,.08); }
.vlag--nl { background: linear-gradient(#AE1C28 0 33.33%, #fff 33.33% 66.66%, #21468B 66.66%); }
.vlag--de { background: linear-gradient(#171717 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66%); }
.vlag--fr { background: linear-gradient(90deg, #002395 0 33.33%, #fff 33.33% 66.66%, #ED2939 66.66%); }
.vlag--es { background: linear-gradient(#AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75%); }
.vlag--en {
  background:
    linear-gradient(90deg, transparent 46%, #C8102E 46% 54%, transparent 54%),
    linear-gradient(transparent 43%, #C8102E 43% 57%, transparent 57%),
    linear-gradient(34deg, transparent 47%, #C8102E 47% 53%, transparent 53%),
    linear-gradient(-34deg, transparent 47%, #C8102E 47% 53%, transparent 53%),
    linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(34deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(-34deg, transparent 42%, #fff 42% 58%, transparent 58%),
    #21468B;
}
.taal__menu {
  position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; width: 218px; padding: 7px;
  border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); box-shadow: 0 24px 54px -20px rgba(11,15,14,.34);
}
.taal__menu[hidden] { display: none; }
.taal__menu button {
  width: 100%; min-height: 46px; padding: 7px 9px; display: flex; align-items: center; gap: 11px;
  border: 0; border-radius: 10px; background: transparent; color: var(--inkt); cursor: pointer; text-align: left; font: inherit;
}
.taal__menu button:hover, .taal__menu button:focus-visible { background: var(--vlak); outline: none; }
.taal__menu button[aria-selected="true"] { background: var(--gr-50); }
.taal__menu button > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; line-height: 1.25; }
.taal__menu button b { font-size: 12px; font-weight: var(--w-vet); }
.taal__menu button small { color: var(--inkt-3); font-size: 9px; font-weight: var(--w-vet); letter-spacing: .08em; }
.taal__menu button i { color: var(--gr-700); font-size: 12px; font-style: normal; opacity: 0; }
.taal__menu button[aria-selected="true"] i { opacity: 1; }
@media (min-width: 940px) { .kop__nav { display: flex; } }
@media (max-width: 560px) { .kop__in { display: none; } }
@media (max-width: 410px) {
  .kop__rij { gap: var(--r-3); }
  .kop__acties { gap: var(--r-2); }
  .kop__acties > .mq-pil { display: none; }
}

/* ══ HERO ══════════════════════════════════════════════════ */
.hero { position: relative; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); overflow: hidden; }

.hero__rooster { position: relative; z-index: 1; display: grid; gap: clamp(44px, 5vw, 64px); align-items: center; }
.hero__rooster > * { min-width: 0; }
@media (min-width: 1000px) { .hero__rooster { grid-template-columns: 1.14fr .86fr; } }

.hero__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-6); }
.hero__tekst .mq-kop-l { margin-block: var(--r-1) 0; }
/* Iets kleiner dan de sectiekoppen elders, want hij staat naast de
   widget en moet in drie regels passen. Op vier regels valt de zin
   uit elkaar. */
.hero__tekst .mq-kop-l { font-size: clamp(38px, 5.2vw, 58px); }
.hero__acties { display: flex; flex-wrap: wrap; gap: var(--r-3); }
.hero__klein { margin: 0; color: var(--inkt-3); }
.hero__demo-zin { margin: var(--r-4) 0 0; color: var(--inkt-3); text-align: center; }

/* ══ DE WIDGET ═════════════════════════════════════════════
   Het belangrijkste element van de pagina, dus het krijgt als
   enige de grote schaduw. Als alles een schaduw heeft zegt een
   schaduw niets meer. */
.widget {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--lijn-fijn);
  border-radius: var(--rond-xl);
  box-shadow: var(--sch-4);
  overflow: hidden;
  /* Vaste hoogte. Zou de widget met het gesprek meegroeien, dan
     schuift de halve pagina mee bij elk bericht. */
  height: 512px;
}

.widget__balk {
  display: flex; align-items: center; gap: var(--r-3);
  padding: 14px var(--r-4);
  background: var(--v-koel);
  border-bottom: 1px solid var(--lijn-fijn);
}
.widget__avatar { position: relative; flex: none; }
.widget__avatar img { display: block; border-radius: 9px; }
.widget__stip {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gr-400); border: 2px solid var(--wit);
}
.widget__wie { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.widget__wie b { font-size: var(--t-klein); font-weight: var(--w-zwaar); letter-spacing: var(--tr-klein);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget__wie small { font-size: var(--t-mini); color: var(--gr-700); font-weight: var(--w-half); }
.widget__merk {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: var(--w-vet);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--inkt-3);
  background: rgba(255,255,255,.7); border: 1px solid var(--lijn-fijn);
  padding: 3px 9px; border-radius: var(--rond-pil);
}

/* ── kanaaltabs ───────────────────────────────────────────
   Drie knoppen, en het glijdertje eronder schuift mee. Dat is
   het hele argument van de sectie eronder in één beweging: één
   assistent, drie plekken. */
.widget__tabs {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--lijn-fijn);
  background: var(--wit);
}
.widget__tabs::after {
  content: ""; position: absolute; bottom: -1px; left: 0;
  width: calc(100% / 3); height: 2px;
  background: var(--gr-600);
  transform: translateX(calc(var(--tab, 0) * 100%));
  transition: transform var(--duur) var(--veer);
}
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 6px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--t-mini); font-weight: var(--w-vet);
  color: var(--inkt-3);
  transition: color var(--duur-kort) var(--soepel);
}
.tab svg { width: 15px; height: 15px; flex: none; }
.tab:hover { color: var(--inkt-2); }
.tab.is-aan { color: var(--gr-700); }

/* ── de draad ─────────────────────────────────────────────*/
.widget__draad {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--r-4);
  overflow-y: auto;
  scroll-behavior: smooth;
  /* Bovenaan een randje vervaging, zodat een bericht dat half
     onder de tabs door schuift er afgesneden uitziet en niet
     kapot. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px);
  mask-image: linear-gradient(180deg, transparent 0, #000 16px);
}
.widget__draad::-webkit-scrollbar { width: 6px; }
.widget__draad::-webkit-scrollbar-thumb { background: var(--lijn); border-radius: 3px; }

.bel {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--rond-l);
  font-size: var(--t-klein); line-height: 1.5;
  animation: bel-in .42s var(--veer) both;
}
@keyframes bel-in {
  from { opacity: 0; transform: translateY(10px) scale(.97) }
  to   { opacity: 1; transform: none }
}
.bel--klant {
  align-self: flex-end;
  background: var(--inkt); color: var(--wit);
  border-bottom-right-radius: 7px;
}
.bel--assistent {
  align-self: flex-start;
  background: var(--vlak); color: var(--inkt);
  border: 1px solid var(--lijn-fijn);
  border-bottom-left-radius: 7px;
}
.bel strong { font-weight: var(--w-zwaar); }

/* Op WhatsApp wisselt alleen de kleur van de bellen; de vorm en
   het gesprek blijven hetzelfde. Dat is het punt. */
.widget[data-kanaal="whatsapp"] .bel--klant { background: #056162; }
.widget[data-kanaal="whatsapp"] .bel--assistent { background: #F0F2F0; }
.widget[data-kanaal="whatsapp"] .widget__draad { background: #EFE7DE; }
.widget[data-kanaal="whatsapp"] .widget__voet { background: var(--wit); }

.tikt {
  display: inline-flex; gap: 5px; align-self: flex-start;
  padding: 14px 16px;
  background: var(--vlak); border: 1px solid var(--lijn-fijn);
  border-radius: var(--rond-l); border-bottom-left-radius: 7px;
  animation: bel-in .3s var(--veer) both;
}
.tikt i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gr-600); animation: tikt 1.3s var(--soepel) infinite;
}
.tikt i:nth-child(2) { animation-delay: .16s; }
.tikt i:nth-child(3) { animation-delay: .32s; }
@keyframes tikt {
  0%, 62%, 100% { opacity: .25; transform: translateY(0) }
  31%           { opacity: 1;   transform: translateY(-3px) }
}

/* ── de aanvraag ──────────────────────────────────────────
   Het moment waar het om draait: de assistent legt iets vast en
   je ziet dat gebeuren. Een kaart in de draad, geen zin. */
.vast {
  align-self: stretch;
  background: var(--v-kaart); border: 1px solid var(--lijn-groen);
  border-radius: var(--rond-m);
  padding: 12px 14px;
  animation: bel-in .5s var(--veer) both;
}
.vast__kop {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-mini); font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--gr-800);
}
.vast__vink {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%; background: var(--gr-600);
  display: grid; place-items: center;
  animation: vink-in .45s var(--veer) both .1s;
}
.vast__vink svg { width: 9px; height: 9px; color: #fff; }
@keyframes vink-in { from { transform: scale(0) } to { transform: scale(1) } }
.vast__rijen { margin: 8px 0 0; display: grid; gap: 3px; font-size: var(--t-mini); }
.vast__rij { display: flex; gap: 8px; color: var(--gr-900); }
.vast__rij b { flex: none; min-width: 74px; font-weight: var(--w-vet); opacity: .62; }

/* ── de belweergave ───────────────────────────────────────
   Telefoon is geen chat, dus het ziet er ook niet uit als een
   chat. Een golfvorm die meebeweegt en het transcript eronder. */
.bel-scherm {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--r-4); padding: var(--r-6) var(--r-4);
  text-align: center;
}
.bel-scherm__tijd {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-mini); font-weight: var(--w-vet);
  letter-spacing: var(--tr-label); color: var(--gr-700);
}
.golf { display: flex; align-items: center; gap: 4px; height: 54px; }
.golf i {
  width: 4px; border-radius: 2px;
  background: linear-gradient(var(--gr-400), var(--gr-700));
  animation: golf 1.1s var(--soepel) infinite alternate;
}
@keyframes golf { from { height: 7px } to { height: 44px } }
.bel-scherm__zin {
  font-size: var(--t-klein); line-height: 1.55; color: var(--inkt-2);
  max-width: 34ch; min-height: 3.2em;
}
.bel-scherm__zin b { color: var(--inkt); font-weight: var(--w-vet); }
.bel-scherm__wie {
  font-size: var(--t-mini); font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--inkt-3);
}

/* ── de voet van de widget ────────────────────────────────*/
.widget__voet {
  display: flex; align-items: center; gap: var(--r-3);
  margin: 0 var(--r-4) var(--r-4);
  padding: 9px 9px 9px var(--r-4);
  border: 1px solid var(--lijn); border-radius: var(--rond-pil);
  background: var(--wit);
}
.widget__veld { flex: 1; font-size: var(--t-klein); color: var(--inkt-3); min-width: 0; }
.widget__stuur {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--gr-700); color: var(--wit);
  display: grid; place-items: center;
}
.widget__stuur svg { width: 15px; height: 15px; }
.widget[data-kanaal="telefoon"] .widget__voet { display: none; }

@media (max-width: 420px) {
  .widget { height: 456px; }
}

/* ══ PARTNERS EN MOCKKLANTEN ═══════════════════════════════ */
.herkomst {
  border-block: 1px solid var(--lijn-fijn);
  background: var(--vlak);
}
.bewijs { display: grid; align-items: stretch; gap: var(--r-5, 20px) var(--r-8); padding-block: var(--r-5, 20px); }
.partners, .klanten { min-width: 0; display: grid; grid-template-rows: auto 30px; align-content: center; }
.partners__merken { display: flex; align-items: center; flex-wrap: wrap; gap: var(--r-4) var(--r-6); }
.bewijs__kop { min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: var(--r-3); margin-bottom: 9px; }
.bewijs__kop p {
  margin: 0; color: var(--inkt-3);
  font-size: var(--t-mini); font-weight: var(--w-vet);
  letter-spacing: .04em; text-transform: uppercase;
}
.herkomst__merk {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--inkt); font-size: 17px; font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-mid); line-height: 1;
}
.herkomst__webgroeiers { font-size: 18px; gap: 8px; }
.herkomst__webgroeiers > img { display: block; border-radius: 8px; }
.herkomst__webgroeiers > span { color: var(--gr-700); margin-left: -8px; }
.herkomst__autoranq .ster { --ster-kleur: var(--inkt); width: 19px; height: 19px; }
.bewijs__kop > span { color: var(--inkt-3); font-size: 9px; font-weight: var(--w-vet); letter-spacing: .06em; text-transform: uppercase; }
.klanten__venster {
  position: relative; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.klanten__baan { display: flex; width: max-content; animation: klanten-lopen 30s linear infinite; }
.klanten__groep { display: flex; align-items: center; gap: clamp(24px, 4vw, 52px); padding-right: clamp(24px, 4vw, 52px); }
.klanten__venster:hover .klanten__baan { animation-play-state: paused; }
.klantlogo {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  color: #68756f; line-height: 1; white-space: nowrap; opacity: .86;
}
.klantlogo--north { font-size: 16px; font-weight: 800; letter-spacing: -.05em; }
.klantlogo--north i { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font-size: 11px; font-style: normal; }
.klantlogo--haven { font-family: Georgia, serif; font-size: 17px; font-weight: 700; }
.klantlogo--haven i { color: var(--gr-700); font-weight: 400; }
.klantlogo--veld { font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.klantlogo--veld i { width: 14px; height: 14px; border-radius: 2px 9px 2px 9px; background: var(--gr-600); transform: rotate(-18deg); }
.klantlogo--morrow { font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.klantlogo--stroom { font-size: 18px; font-weight: 600; letter-spacing: -.06em; }
.klantlogo--stroom span { color: var(--gr-600); }
.klantlogo--kern { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.klantlogo--kern i { display: grid; place-items: center; width: 22px; height: 22px; background: var(--inkt); color: var(--wit); font-size: 11px; font-style: normal; }
@keyframes klanten-lopen { to { transform: translateX(-50%); } }
@media (min-width: 900px) {
  .bewijs { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); min-height: 112px; }
  .partners { padding-right: var(--r-8); border-right: 1px solid var(--lijn); }
}
@media (max-width: 899px) {
  .bewijs { padding-block: var(--r-5, 20px); }
  .partners { padding-bottom: var(--r-4); border-bottom: 1px solid var(--lijn-fijn); }
}

/* ══ APP IN DRIE STAPPEN ═══════════════════════════════════ */
.werking { background: var(--wit); }
.werking__kop {
  display: grid; gap: var(--r-6); align-items: end;
  margin-bottom: var(--r-12);
}
.werking__kop h2 { margin-top: var(--r-3); max-width: 15ch; }
.werking__kop > p { max-width: 50ch; }
@media (min-width: 900px) {
  .werking__kop { grid-template-columns: 1.15fr .85fr; }
  .werking__kop > p { justify-self: end; }
}
.appstappen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--r-6);
}
@media (min-width: 980px) { .appstappen { grid-template-columns: repeat(3, 1fr); } }
.appstap {
  min-width: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--lijn);
}
.appstap__scherm {
  height: 340px; margin-top: var(--r-4);
  overflow: hidden;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  box-shadow: var(--sch-2);
}
.appstap__scherm--bron { background: #F2F8F5; }
.appstap__scherm--gedrag { background: #F4F7F8; }
.appstap__scherm--kanalen { background: #F3F8F7; }
.appbalk {
  height: 44px; padding-inline: 14px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--lijn-fijn);
}
.appbalk > span { width: 7px; height: 7px; border-radius: 50%; background: #C9D3CF; }
.appbalk > span:first-child { background: var(--gr-400); }
.appbalk b {
  margin-left: auto; font-size: 11px; font-weight: var(--w-zwaar);
  color: var(--inkt-3); letter-spacing: .05em; text-transform: uppercase;
}
.appinhoud { padding: 20px; }
.app-label {
  display: block; margin-bottom: 7px;
  font-size: 10px; font-weight: var(--w-zwaar);
  letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-3);
}
.urlveld {
  height: 42px; padding: 5px 5px 5px 13px;
  display: flex; align-items: center; gap: 8px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond-m);
  font-size: 12px; color: var(--inkt-2);
}
.urlveld span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urlveld i {
  margin-left: auto; padding: 6px 10px; border-radius: 8px;
  background: var(--inkt); color: var(--wit);
  font-style: normal; font-size: 10px; font-weight: var(--w-vet);
}
.bronstatus {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px;
  background: var(--wit); border: 1px solid var(--lijn-fijn); border-radius: var(--rond-m);
}
.bronstatus__vink {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--gr-100); color: var(--gr-800);
  font-size: 12px; font-weight: var(--w-zwaar);
}
.bronstatus div, .instelrij div, .schakelrij > span, .kanaalschakel div, .testregel div { display: flex; flex-direction: column; }
.bronstatus b, .instelrij b, .schakelrij b, .kanaalschakel b, .testregel b { font-size: 12px; }
.bronstatus small, .schakelrij small, .kanaalschakel small, .testregel small { font-size: 10px; color: var(--inkt-3); }
.bronregels { display: grid; gap: 7px; margin: 17px 3px; }
.bronregels i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: #D9E4DF; }
.bronchips { display: flex; gap: 6px; }
.bronchips span {
  padding: 4px 8px; border: 1px solid var(--lijn-fijn); border-radius: 7px;
  background: rgba(255,255,255,.72); font-size: 9px; font-weight: var(--w-vet); color: var(--inkt-2);
}
.instelrij { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.instelrij .app-label { margin-bottom: 2px; }
.instelrij__waarde {
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--lijn);
  background: var(--wit); color: var(--inkt-2); font-size: 10px;
}
.toonkeuze {
  display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px;
  background: #E7EDEA; border-radius: var(--rond-m); gap: 2px;
}
.toonkeuze span { padding: 7px 3px; text-align: center; font-size: 9px; font-weight: var(--w-vet); color: var(--inkt-3); }
.toonkeuze .is-aan { background: var(--wit); color: var(--gr-800); border-radius: 9px; box-shadow: var(--sch-1); }
.voorbeeldantwoord {
  margin-top: 17px; padding: 13px;
  background: var(--wit); border: 1px solid var(--lijn-fijn); border-radius: var(--rond-m);
}
.voorbeeldantwoord small { font-size: 9px; font-weight: var(--w-zwaar); color: var(--gr-700); text-transform: uppercase; letter-spacing: .06em; }
.voorbeeldantwoord p { margin: 7px 0 0; font-size: 11px; line-height: 1.5; color: var(--inkt-2); }
.schakelrij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--lijn-fijn);
}
.schakelrij i, .kanaalschakel.is-actief > i {
  position: relative; width: 30px; height: 18px; flex: none;
  border-radius: 9px; background: var(--gr-600);
}
.schakelrij i::after, .kanaalschakel.is-actief > i::after {
  content: ""; position: absolute; width: 12px; height: 12px; top: 3px; right: 3px;
  border-radius: 50%; background: var(--wit);
}
.kanaalschakels { display: grid; gap: 9px; }
.kanaalschakel {
  min-height: 52px; padding: 9px 11px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.7); border: 1px solid var(--lijn-fijn); border-radius: var(--rond-m);
}
.kanaalschakel.is-actief { background: var(--wit); border-color: var(--lijn-groen); }
.kanaalschakel__icoon {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border-radius: 8px; background: var(--vlak); color: var(--gr-700); font-size: 16px; font-weight: var(--w-vet);
}
.kanaalschakel > i, .kanaalschakel > em { margin-left: auto; }
.kanaalschakel > em { font-size: 9px; font-style: normal; color: var(--inkt-3); }
.testregel {
  margin-top: 5px; padding: 12px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--rond-m); background: var(--inkt); color: var(--wit);
}
.testregel small { color: rgba(255,255,255,.65); }
.testregel__pijl { margin-left: auto; color: var(--gr-300); font-size: 18px; }
.appstap__tekst { position: relative; padding: var(--r-6) 0 0 48px; }
.appstap__tekst > span {
  position: absolute; left: 0; top: 25px;
  font-family: var(--letter-data); font-size: 12px; font-weight: var(--w-vet); color: var(--gr-700);
}
.appstap__tekst h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: var(--tr-klein); }
.appstap__tekst p { margin: 8px 0 0; color: var(--inkt-2); font-size: var(--t-klein); line-height: 1.55; }

/* ══ HET LEK ═══════════════════════════════════════════════ */
.probleem__intro { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.redactiefoto { position: relative; margin: 0; overflow: hidden; border-radius: var(--rond-xl); background: var(--lijn); }
.redactiefoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.redactiefoto::before {
  content: ""; position: absolute; z-index: 1; width: 72%; height: 150%; left: -22%; top: -46%; pointer-events: none;
  background: conic-gradient(from 205deg, transparent 0 20%, rgba(115,242,210,.24), rgba(111,183,255,.22), rgba(241,130,219,.2), rgba(255,210,112,.16), transparent 58%);
  filter: blur(28px); mix-blend-mode: screen; opacity: .62; transform: rotate(-9deg);
}
.redactiefoto::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 100% at 4% 8%, rgba(122,255,204,.30), transparent 54%),
    radial-gradient(70% 95% at 96% 12%, rgba(108,211,255,.22), transparent 52%),
    linear-gradient(118deg, rgba(255,123,210,.16), transparent 32%, rgba(255,211,108,.14) 62%, rgba(129,112,255,.18));
  mix-blend-mode: color; opacity: .32;
}
.redactiefoto--werk { aspect-ratio: 3 / 2; box-shadow: var(--sch-3); }
.redactiefoto--werk img { object-position: 56% center; }
@media (min-width: 900px) { .probleem__intro { grid-template-columns: .82fr 1.18fr; } }
.lek { margin-top: var(--r-12); }
.lek article { display: flex; flex-direction: column; gap: var(--r-2); }
.lek__nr {
  font-size: var(--t-mini); font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label); color: var(--gr-800);
  margin-bottom: var(--r-2);
}
.lek p { margin: 0; }

/* ══ KANALEN ═══════════════════════════════════════════════ */
.kanaal-rij { margin-top: var(--r-12); }
.kanaal-rij article { display: flex; flex-direction: column; gap: var(--r-3); }
.kanaal-rij p { margin: 0; flex: 1; }
.kanaal__teken {
  width: 46px; height: 46px; border-radius: var(--rond-m);
  display: grid; place-items: center;
  background: var(--wit); color: var(--gr-700);
  box-shadow: var(--sch-1);
  margin-bottom: var(--r-2);
}
.kanaal__teken svg { width: 23px; height: 23px; }
.kanaal__staat { align-self: flex-start; margin-top: var(--r-2); }

/* ══ STAPPEN (op het donkere vlak) ═════════════════════════ */
.stappen {
  list-style: none; margin: var(--r-16) 0 0; padding: 0;
  display: grid; gap: var(--r-8);
}
@media (min-width: 880px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stappen li {
  padding-top: var(--r-6);
  border-top: 1px solid var(--lijn-op-donker);
}
.stappen__nr {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid var(--lijn-op-donker);
  color: var(--gr-100);
  font-size: var(--t-klein); font-weight: var(--w-zwaar);
  margin-bottom: var(--r-4);
}
.stappen h3 { margin: 0 0 var(--r-2); }
.stappen p { margin: 0; }

.hoe__slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-6);
  margin-top: var(--r-16);
}
.hoe__slot p { margin: 0; }

/* ══ INTEGRATIESCHAKELBORD ═════════════════════════════════ */
.integraties { overflow: hidden; }
.integraties__kop {
  display: grid; gap: var(--r-6); align-items: end;
  margin-bottom: var(--r-12);
}
.integraties__kop h2 { margin-top: var(--r-3); max-width: 14ch; }
.integraties__kop .mq-lead { max-width: 48ch; }
@media (min-width: 900px) {
  .integraties__kop { grid-template-columns: 1fr 1fr; }
  .integraties__kop .mq-lead { justify-self: end; }
}
.koppelbord {
  display: grid; gap: var(--r-4);
  grid-template-areas: "kern" "kennis" "team" "planning" "crm";
}
.koppelbord__kern {
  grid-area: kern; min-height: 154px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--rond-l);
  background: rgba(255,255,255,.08);
}
.ster--groot { --ster-kleur: var(--gr-300); width: 38px; height: 38px; margin-bottom: 14px; }
.koppelbord__kern b { font-size: 18px; letter-spacing: var(--tr-mid); }
.koppelbord__kern small { color: var(--op-donker-2); font-family: var(--letter-data); font-size: 10px; }
.koppelgroep {
  position: relative; padding: 18px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--rond-l);
  background: rgba(255,255,255,.06);
}
.koppelgroep--kennis { grid-area: kennis; }
.koppelgroep--team { grid-area: team; }
.koppelgroep--planning { grid-area: planning; }
.koppelgroep--crm { grid-area: crm; }
.koppelgroep header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 13px;
}
.koppelgroep header > span { font-size: 12px; font-weight: var(--w-zwaar); }
.koppelgroep header small {
  color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
}
.koppels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.koppels--breed { grid-template-columns: repeat(3, 1fr); }
.koppel {
  min-width: 0; min-height: 76px; padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--rond-m); background: var(--wit); color: var(--inkt);
  transition: transform var(--duur) var(--veer), box-shadow var(--duur) var(--soepel);
}
.koppel:hover { transform: translateY(-3px); box-shadow: var(--sch-3); }
.koppel img { width: 26px; height: 26px; object-fit: contain; }
.koppel b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: 9px; font-weight: var(--w-vet); white-space: nowrap;
}
@media (min-width: 960px) {
  .koppelbord {
    grid-template-columns: 1fr .72fr 1fr;
    grid-template-areas: "kennis kern team" "planning kern crm";
  }
  .koppelbord__kern { min-height: 100%; }
  .koppelgroep::after {
    content: ""; position: absolute; top: 50%; width: var(--r-4); height: 1px;
    background: rgba(110,231,183,.42);
  }
  .koppelgroep--kennis::after, .koppelgroep--planning::after { right: calc(var(--r-4) * -1); }
  .koppelgroep--team::after, .koppelgroep--crm::after { left: calc(var(--r-4) * -1); }
}
@media (max-width: 520px) {
  .koppels--breed { grid-template-columns: repeat(2, 1fr); }
}
.integraties__voet {
  display: grid; gap: var(--r-3); align-items: center;
  margin-top: var(--r-8); padding-top: var(--r-6);
  border-top: 1px solid var(--lijn-op-donker);
}
.integraties__voet > span {
  color: var(--gr-100); font-size: var(--t-mini); font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.integraties__voet p { margin: 0; color: var(--op-donker-2); font-size: var(--t-klein); }
.integraties__voet .mq-pil { justify-self: start; }
@media (min-width: 900px) {
  .integraties__voet { grid-template-columns: auto 1fr auto; gap: var(--r-6); }
  .integraties__voet .mq-pil { justify-self: end; }
}

/* ══ REVIEWS ═══════════════════════════════════════════════ */
.reviews__kop { display: grid; gap: var(--r-6); align-items: end; margin-bottom: var(--r-12); }
.reviews__kop h2 { max-width: 16ch; margin-top: var(--r-3); }
.reviews__uitleg { display: grid; gap: var(--r-4); max-width: 54ch; }
.reviews__uitleg p { margin: 0; }
.googlebadge {
  width: fit-content; display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 1px solid var(--lijn); border-radius: var(--rond-pil); background: var(--wit); box-shadow: var(--sch-1);
}
.googlebadge img { width: 18px; height: 18px; }
.googlebadge b { font-size: 11px; font-weight: var(--w-vet); }
.googlebadge i {
  padding: 3px 7px; border-radius: var(--rond-pil); background: var(--vlak);
  color: var(--inkt-3); font-size: 8px; font-style: normal; font-weight: var(--w-zwaar); letter-spacing: .06em; text-transform: uppercase;
}
.reviewrooster { display: grid; gap: var(--r-4); }
.review {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--lijn); border-radius: var(--rond-l); background: var(--wit);
}
.review header { display: flex; align-items: center; gap: var(--r-3); }
.review header > div { display: flex; flex-direction: column; min-width: 0; }
.review header b { font-size: var(--t-klein); }
.review header small { color: var(--inkt-3); font-size: 10px; }
.review header .mq-chip { margin-left: auto; padding: 4px 8px; font-size: 9px; }
.review__logo {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--rond-m); color: var(--wit); font-size: 11px; font-weight: var(--w-zwaar); letter-spacing: .04em;
}
.review__logo--noord { background: #203D36; }
.review__logo--warmte { background: #A95332; }
.review__logo--helder { background: #334B73; }
.review blockquote {
  margin: var(--r-8) 0; color: var(--inkt); font-size: clamp(16px, 1.5vw, 18px);
  font-weight: var(--w-half); line-height: 1.55; letter-spacing: var(--tr-klein);
}
.review footer { display: flex; flex-direction: column; margin-top: auto; padding-top: var(--r-4); border-top: 1px solid var(--lijn-fijn); }
.review footer b { font-size: var(--t-klein); }
.review footer span { margin-top: 2px; color: var(--inkt-3); font-size: var(--t-mini); }
@media (min-width: 900px) {
  .reviews__kop { grid-template-columns: 1.1fr .9fr; }
  .reviews__uitleg { justify-self: end; }
  .reviewrooster { grid-template-columns: repeat(3, 1fr); }
}

/* ══ BUREAUS ═══════════════════════════════════════════════ */
.bureaus { display: grid; gap: clamp(36px, 4vw, 64px); align-items: center; }
.bureaus > * { min-width: 0; }
.bureauvisueel { position: relative; padding-bottom: 82px; }
.redactiefoto--bureau { aspect-ratio: 16 / 10; }
.redactiefoto--bureau img { object-position: center 44%; }
.bureauvisueel__code { position: relative; z-index: 1; width: calc(100% - 42px); margin: -72px 0 -82px 42px; box-shadow: var(--sch-4); }
@media (min-width: 1000px) { .bureaus { grid-template-columns: .88fr 1.12fr; } }
@media (max-width: 620px) { .bureauvisueel { padding-bottom: 34px; } .bureauvisueel__code { width: calc(100% - 18px); margin: -34px 0 -34px 18px; } }

/* ══ PRIJZEN ═══════════════════════════════════════════════ */
.prijzen { margin-top: var(--r-12); align-items: stretch; }
.prijzen article { display: flex; flex-direction: column; gap: var(--r-3); }
.prijzen__uit { position: relative; box-shadow: var(--sch-groen); }
.prijzen__vlag {
  position: absolute; top: -13px; left: var(--r-8);
  background: var(--inkt); color: var(--wit);
  font-size: 11px; font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--rond-pil);
}
.prijs {
  margin: 0; display: flex; align-items: baseline; gap: 7px;
  font-size: 40px; font-weight: var(--w-zwaar);
  letter-spacing: var(--tr-mid); line-height: 1.1;
}
.prijs__per { font-size: var(--t-klein); font-weight: var(--w-half); color: var(--inkt-2); }
.prijs__zin { margin: 0 0 var(--r-2); }
.prijs__knop { margin-top: auto; align-self: flex-start; }
.prijs__voet { text-align: center; margin: var(--r-12) 0 0; color: var(--inkt-3); }
.prijs__voet a { color: var(--gr-700); font-weight: var(--w-vet); }

/* ══ GRATIS AANMELDEN ══════════════════════════════════════ */
.aanmelden-vlak { background: #101916; color: var(--wit); }
.aanmelden { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
.aanmelden > * { min-width: 0; }
.aanmelden__tekst { max-width: 640px; }
.redactiefoto--contact { aspect-ratio: 2.35 / 1; margin-bottom: var(--r-8); border: 1px solid rgba(255,255,255,.12); }
.redactiefoto--contact img { object-position: center 42%; }
.aanmelden__tekst .mq-label { color: var(--gr-300); }
.aanmelden__tekst h2 { max-width: 15ch; margin-top: var(--r-3); }
.aanmelden__tekst > p { margin: var(--r-4) 0 0; color: var(--op-donker-2); max-width: 55ch; }
.aanmelden__punten { list-style: none; margin: var(--r-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-6); }
.aanmelden__punten li { position: relative; padding-left: 20px; color: var(--op-donker-2); font-size: var(--t-klein); }
.aanmelden__punten li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--gr-300); font-weight: var(--w-zwaar);
}
.aanmeldform {
  display: flex; flex-direction: column; gap: var(--r-4); padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--rond-xl); background: var(--wit); color: var(--inkt);
  box-shadow: 0 32px 70px -34px rgba(0,0,0,.72);
}
.aanmeldform__titel { font-size: clamp(20px, 2vw, 25px); font-weight: var(--w-zwaar); letter-spacing: var(--tr-mid); }
@media (min-width: 1000px) { .aanmelden { grid-template-columns: 1.12fr .88fr; } }
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld__naam { font-size: var(--t-mini); font-weight: var(--w-zwaar); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--inkt-2); }
.veld input {
  font: inherit; font-size: var(--t-basis);
  min-height: 52px; padding: 12px 16px;
  border: 1px solid var(--lijn); border-radius: var(--rond-pil);
  background: var(--vlak); color: var(--inkt);
  transition: border-color var(--duur-kort) var(--soepel), box-shadow var(--duur-kort) var(--soepel);
}
.veld input::placeholder { color: var(--inkt-3); }
.veld input:focus { outline: none; border-color: var(--gr-600); box-shadow: 0 0 0 3px rgba(5,150,105,.16); }
.aanmeldform button { align-self: stretch; justify-content: space-between; margin-top: var(--r-1); }
.aanmeldform__klein { margin: 0; color: var(--inkt-3); line-height: 1.5; }

/* ══ VOET ══════════════════════════════════════════════════ */
.voet {
  background: var(--zwart);
  padding-block: var(--r-16) var(--r-8);
}
.voet__rij { display: flex; flex-wrap: wrap; gap: var(--r-12); justify-content: space-between; }
.voet__merk { max-width: 34ch; }
.voet__zin { margin: var(--r-4) 0 0; color: var(--op-donker-2); }
.voet__nav { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-8); align-content: flex-start; }
.voet__nav a {
  color: var(--op-donker-2); text-decoration: none;
  font-size: var(--t-klein); font-weight: var(--w-half);
}
.voet__nav a:hover { color: var(--wit); }
.voet__onder { margin-top: var(--r-12); padding-top: var(--r-6); border-top: 1px solid var(--lijn-op-donker); color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce) {
  .bel, .tikt, .vast { animation: none; }
  .golf i { animation: none; height: 24px; }
  .klanten__baan { animation: none; flex-wrap: wrap; width: auto; }
  .klanten__groep[aria-hidden="true"] { display: none; }
}