/* ============================================================
   ENTELL DESIGN SYSTEM
   Eén CSS-bestand voor alle pagina's en landingspages.
   Blokken: .nav, .hero, .section, .feature-grid, .steps,
   .pricing, .faq, .cta-band, .footer
   Zie FORMAT.md voor gebruik.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brandkleuren (brandbook) */
  --ink: #212121;
  --purple: #543D7D;
  --lilac: #A280FF;
  --mist: #F2F2F2;
  --white: #FFFFFF;

  /* Afgeleiden */
  --purple-deep: #2E2148;
  --purple-night: #1B1430;
  --lilac-soft: #E9E2FF;
  --ink-60: rgba(33, 33, 33, .72);
  --ink-40: rgba(33, 33, 33, .68);
  --line: rgba(33, 33, 33, .10);
  --line-dark: rgba(255, 255, 255, .12);
  --white-70: rgba(255, 255, 255, .72);

  /* Typografie */
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Maatvoering */
  --max: 1160px;
  --pad: clamp(20px, 4vw, 48px);
  --radius: 16px;
  --radius-lg: 24px;

  /* Schaal (brandbook usage chart: krappe line-heights, negatieve tracking) */
  --h1: clamp(2.5rem, 6vw, 4.25rem);
  --h2: clamp(1.9rem, 3.6vw, 2.75rem);
  --h3: clamp(1.15rem, 2vw, 1.35rem);
}
/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .footer :focus-visible, .hero.on-dark :focus-visible { outline-color: var(--lilac); }
[id] { scroll-margin-top: 96px; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 560; }
h1 { font-size: var(--h1); line-height: .95; letter-spacing: -.03em; }
h2 { font-size: var(--h2); line-height: 1.0; letter-spacing: -.025em; }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -.015em; }
p  { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
/* Eyebrow: klein label boven een kop */
.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 560;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px;
}
.on-dark .eyebrow { color: var(--lilac); }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-60); max-width: 34em; }
.on-dark .lead { color: var(--white-70); }
/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font: 560 1rem/1 var(--font);
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--lilac); color: var(--ink); }
.btn--primary:hover { background: #B294FF; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.on-dark .btn--ghost { border-color: var(--line-dark); color: var(--white); }
.on-dark .btn--ghost:hover { border-color: var(--white); }
/* ---------- Navigatie: zwevende pill ---------- */
.announce {
  background: var(--purple-night);
  color: var(--white);
  font-size: .85rem;
  text-align: center;
  padding: 9px 16px;
}
.announce a { color: var(--lilac); }
.nav { position: fixed; top: 50px; left: 0; right: 0; z-index: 50; transition: top .3s ease; }
.nav__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 0;
  box-shadow: none;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-scrolled .nav__bar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
  box-shadow: 0 18px 44px -26px rgba(27, 20, 48, .55);
  padding: 9px 9px 9px 20px;
}
/* Logo: origineel lockup; bij scrollen fadet hij naar alleen het icoon (geen beweging) */
.nav__logo { position: relative; display: block; height: 30px; width: 109px; flex: none; margin-top: 0; }
/* Logo iets omlaag zodat de woordmerktekst in lijn ligt met de menu-items.
   Stond als "tweede ronde verfijning" in het paginablok van index, contact
   en over, waardoor die drie 2px lager stonden dan de andere twaalf. */
/* Nagemeten: balkmidden 32,5, menu-items 32,3. Zonder marge komt het logo
   op 32,5; met de eerdere 2px stond het op 33,5, dus zichtbaar lager. */
.nav__logoFull, .nav__mark { position: absolute; left: 0; top: 0; height: 30px; width: auto; transition: opacity .3s ease; }
.nav__mark { opacity: 0; }
.nav.is-scrolled .nav__logoFull { opacity: 0; }
.nav.is-scrolled .nav__mark { opacity: 1; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) {
  text-decoration: none; font-weight: 480; font-size: .95rem; color: var(--ink-60);
}
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links .btn { padding: 10px 20px; }
.nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
/* Het menu klapt op 1100px om, dus daar hoort de knop te verschijnen. Stond
   tot nu toe in het blok van elke pagina apart; een nieuwe pagina zonder dat
   blok had daardoor geen zichtbare hamburger. */
/* margin-left: auto duwt de hamburger naar rechts; de balk heeft drie
   flexkinderen met space-between, dus zonder deze marge komt hij in het
   midden. Stond alleen in het paginablok van index, contact en over. */
@media (max-width: 1100px) {
  .nav__toggle { display: block; margin-left: auto; margin-right: -12px; padding: 10px; }
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; }
/* ---------- Hero ---------- */
/* Radiale gradient: alleen hier, per brandbook */
.hero {
  position: relative;
  color: var(--white);
  padding-top: 100px;
  background:
    radial-gradient(1100px 700px at 72% 18%, rgba(162, 128, 255, .38), transparent 60%),
    radial-gradient(900px 600px at 15% 90%, rgba(84, 61, 125, .55), transparent 65%),
    linear-gradient(165deg, var(--purple-deep), var(--purple-night) 70%);
  overflow: hidden;
}
/* Decoratieve ringen: echo van de cirkel in het logomark */
.hero::before,
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  border-radius: 50%;
}
.hero::after {
  width: clamp(420px, 46vw, 760px); height: clamp(420px, 46vw, 760px);
  border: 1.5px solid rgba(162, 128, 255, .22);
  top: -16%; right: -9%;
}
.hero::before {
  width: 300px; height: 300px;
  border: 1px solid rgba(162, 128, 255, .13);
  bottom: -100px; left: -80px;
}
.hero__inner { position: relative; z-index: 1; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(72px, 10vw, 128px);
}
.hero__inner h1 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); }
.hero h1 .accent { color: var(--white); }
.nowrap { white-space: nowrap; }
/* Visueel verborgen, wel voorleesbaar (screenreaders en SEO) */
.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;
}
/* Roterend woord in de hero-h1 (WhatsApp / VoIP / je contacten) */
.swap { display: inline-grid; vertical-align: bottom; transition: width .4s ease; }
.swap__items { display: inline-grid; justify-items: start; }
.swap__item {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; gap: .2em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .45s ease;
}
.swap__item.is-active { opacity: 1; }
.swap__icon {
  display: inline-block;
  width: .8em; height: .8em;
  border-radius: .16em;
}
.h1__icon {
  display: inline-block;
  width: .78em; height: .78em;
  vertical-align: -.08em;
  margin-left: .16em;
}
@media (prefers-reduced-motion: reduce) {
  .swap__item { transition: none; }
}
/* WhatsApp-CTA: herkenbaar groen, AA-contrast met witte tekst */
.btn--wa {
  background: #25D366;
  color: var(--ink);
}
.btn--wa:hover { background: #3FE07C; }
.trustcard:hover { border-color: var(--lilac); }
.trustcard__tile {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--lilac-soft);
  display: grid; place-items: center;
  flex: none;
}
.trustcard__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.trustcard__text strong { font-weight: 560; letter-spacing: -.01em; }
.trustcard__sub { font-size: .82rem; color: var(--ink-60); }
.trustcard__stars { position: relative; display: inline-block; letter-spacing: .08em; margin-right: 4px; color: #E3DCF3; }
.trustcard__starsFg {
  position: absolute; left: 0; top: 0;
  width: 90%; overflow: hidden; white-space: nowrap;
  color: #E8C532;
}
/* Teams Store badge onder de hero-CTA's */
.hero__badge { display: inline-block; margin-top: 30px; }
.hero__badge img { height: 50px; width: auto; }
.hero__badge:hover img { opacity: .85; }
/* Icoon-chips in de titel (WhatsApp, telefonie, Teams) */
.chip {
  display: inline-grid; place-items: center;
  width: .92em; height: .92em;
  border-radius: .22em;
  vertical-align: -.08em;
  margin-inline: .02em .06em;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
}
.chip svg { width: 60%; height: 60%; }
.chip--wa { background: #25D366; }
.chip--tel { background: var(--lilac); }
.chip--teams { background: #5059C7; }
.hero .lead { color: var(--white-70); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 18px; padding: 0; list-style: none;
  font-size: .9rem; color: var(--white-70);
}
.hero__meta li::before { content: "✓"; color: var(--lilac); margin-right: 8px; font-weight: 600; }
/* ---------- Hero, lichte variant (homepage): rustig, gecentreerd ---------- */
.hero--light {
  color: var(--ink);
  background: linear-gradient(180deg, #FBFAFE 0%, #F4F1FB 100%);
}
.hero--light::after { border-color: rgba(162, 128, 255, .30); }
.hero--light::before { border-color: rgba(162, 128, 255, .18); }
/* De rij zelf stond alleen in de blokken van voor-zorg en
   voor-bewindvoering, terwijl .hero__mensen img hier staat. Op een pagina
   zonder eigen blok bleef de rij display:block en stapelden de gezichten
   onder elkaar in plaats van te overlappen. */
.hero__mensen { display: flex; margin-bottom: 16px; }
.hero__mensen img {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 6px 16px -8px rgba(84, 61, 125, .35);
}
.hero__mensen img + img { margin-left: -14px; }
.h1__line { display: block; }
@media (max-width: 680px) {
  .h1__rest { display: block; }
}
.h1__chip {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.15em;
  margin-right: .08em;
}
/* Een kanaalpictogram staat op de homepage kleiner en met ronde hoeken dan het
   Teams-merkteken: .8em tegen 1em, radius .16em. Zelfde maatvoering hier. */
.h1__chip--kanaal { width: .8em; height: .8em; border-radius: .16em; vertical-align: -.06em; }
.hero--light h1 {
  font-size: clamp(1.85rem, 4.6vw, 3.5rem);
}
.hero--light .lead { color: var(--ink-60); margin-inline: auto; }
.hero--light .hero__actions { justify-content: center; margin-top: 26px; }
.hero__proof {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.hero__proof .hero__badge { margin: 0; }
.hero__proof .hero__badge img { height: 46px; }
.hero__proof .hero__meta { margin: 0; }
.hero--light .hero__meta { color: var(--ink-60); justify-content: center; }
.hero--light .hero__meta li::before { color: var(--purple); }
.hero--light { padding-bottom: 46px; }
.hero--light .hero__stack { padding-bottom: 0; }
.mock.is-done .mock__overlay { opacity: 1; }
.mock__cta::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  animation: cta-pulse 2.4s ease-out 1s infinite;
  pointer-events: none;
}
.mock.is-done .mock__cta { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.mock.is-done .mock__cta:hover { transform: translate(-50%, -50%) scale(1.04); }
.mock__cta img { width: 24px; height: 24px; }
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(162, 128, 255, .5); }
  70%  { box-shadow: 0 0 0 16px rgba(162, 128, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(162, 128, 255, 0); }
}
@media (max-width: 560px) {
  .mock__cta { white-space: normal; width: max-content; max-width: 92%; text-align: center; justify-content: center; }
}
/* Mock op licht: eigen frame en meer breedte */
.hero--light .mock {
  width: min(920px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 48px 100px -48px rgba(84, 61, 125, .45);
}
/* ---------- Productmock (hero-signatuur, gemodelleerd op de echte app) ---------- */
.mock {
  position: relative;
  text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.mock__window {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink);
  display: flex; flex-direction: column;
  min-height: 470px;
  font-size: .8rem;
}
.mock__frame {
  display: grid;
  grid-template-columns: 46px 1fr;
  flex: 1;
  min-height: 0;
}
/* Teams-rail links (donker, zoals in Teams zelf) */
.mock__rail {
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 14px; gap: 14px;
}
.mock__railIcon { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.14); }
.mock__railIcon--active { background: var(--purple); display: grid; place-items: center; }
.mock__railIcon--active img { width: 14px; height: auto; }
/* App-gebied: kopbalk met logo + kanaal-pills, daaronder lijst + gesprek */
.mock__app { display: flex; flex-direction: column; min-width: 0; }
.mock__appbar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.mock__topTeams { width: 20px; height: 20px; flex: none; }
.mock__search {
  flex: 1; max-width: 220px; height: 24px;
  margin-left: auto;
  background: #F7F6FA;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.mock__profile { position: relative; flex: none; width: 26px; height: 26px; }
.mock__profile img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.mock__profileDot {
  position: absolute; right: -2px; bottom: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #2E9E5B; border: 2px solid var(--white);
}
.mock__tabs { display: flex; gap: 6px; }
.mock__pill {
  font-size: .7rem; font-weight: 560;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-60); background: var(--white);
}
.mock__pill--active { background: var(--purple); border-color: var(--purple); color: var(--white); }
.mock__body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
/* Gesprekkenlijst met toewijzing per gesprek */
.mock__list {
  border-right: 1px solid var(--line);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: #FAFAFA;
}
.mock__item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px;
  border-radius: 10px;
}
.mock__item--active { background: var(--lilac-soft); }
.mock__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mock__dot--actief { background: #25D366; }
.mock__dot--inactief { background: #F59E0B; }
.mock__itemText { min-width: 0; line-height: 1.2; }
.mock__itemText strong {
  display: block; font-size: .74rem; font-weight: 560;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock__itemText span { font-size: .64rem; color: var(--ink-40); }
.mock__item time { margin-left: auto; font-size: .62rem; color: var(--ink-40); flex: none; }
/* Gesprek */
.mock__chat { display: flex; flex-direction: column; position: relative; min-width: 0; }
.mock__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.mock__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.mock__who { line-height: 1.15; min-width: 0; }
.mock__who strong { font-size: .85rem; font-weight: 560; display: block; }
.mock__who span { font-size: .7rem; color: var(--ink-40); }
.mock__tag {
  margin-left: auto;
  font-size: .66rem; font-weight: 560; letter-spacing: .04em;
  color: #0E7C3A; background: rgba(37, 211, 102, .14);
  padding: 4px 10px; border-radius: 999px;
  flex: none;
}
.mock__msg {
  max-width: 92%;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: .78rem; line-height: 1.4;
  opacity: 0;
}
.mock.is-playing .mock__msg { animation: msg-in .5s ease forwards; }
.mock__msg--in  { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.mock__msg--out { background: var(--purple); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.mock__msg--auto { background: var(--lilac-soft); color: var(--ink); border-bottom-right-radius: 4px; align-self: flex-end; }
.mock__auto {
  display: block;
  font-size: .58rem; font-weight: 560;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 3px;
}
.mock__msg time { display: block; font-size: .6rem; opacity: .55; margin-top: 3px; text-align: right; }
.mock__call {
  position: absolute; right: 12px; bottom: 88px;
  width: 200px;
  background: rgba(33, 31, 43, .93);
  color: var(--white);
  border-radius: 12px;
  padding: 14px 14px 16px;
  text-align: center;
  box-shadow: 0 24px 56px -18px rgba(0, 0, 0, .55);
  opacity: 0;
}
.mock__callName { display: block; font-weight: 560; font-size: .85rem; }
.mock__callSub { display: block; font-size: .66rem; opacity: .65; margin-top: 2px; white-space: nowrap; }
.mock__callAvatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover;
  margin: 12px auto 2px;
}
.mock__callBtns { display: flex; justify-content: center; gap: 16px; margin-top: 14px; }
.mock__callBtn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
}
.mock__callBtn--accept { background: #5B5FC7; }
.mock__callBtn--decline { background: #D92C2C; }
@keyframes ring-draai {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes call-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (max-width: 560px) {
  .mock__body { grid-template-columns: 1fr; }
  .mock__list { display: none; }
}
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mock__msg, .mock__call { animation: none; opacity: 1; }
  .mock__callAvatar, .mock__cta::after { animation: none; }
  .mock__msg, .mock__call { animation: none !important; opacity: 1 !important; }
  .howcard__cline, .clients__track, .howcard__pill::after, .howcard__bubble { animation: none; }
  .mediarow__badge, .devices__ping, .assign__cursor, .assign__sync svg { animation: none !important; }
  #veilig::before { animation: none; }
  #veilig .feature__icon { opacity: 1 !important; transform: none !important; animation: none !important; }
  .devices > * { opacity: 1 !important; animation: none !important; }
  .mediarow__p, .assign__avatar, .assign__row, .aicard__row, .animsvg .animsvg__svg path { opacity: 1 !important; animation: none !important; }
  .btn:hover { transform: none; }
  .mock.is-done .mock__cta:hover { transform: translate(-50%, -50%); }
  .clients__track { animation: none; }
}
.section--tint { background: var(--mist); }
.section--dark { background: var(--ink); color: var(--white); }
.section__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 42px); }
.section__head--center { margin-inline: auto; text-align: center; }
/* ---------- Feature grid ---------- */
/* Gelijk aan .how-grid: even brede kaarten horen dezelfde tussenruimte te
   hebben. In de designerronde kreeg .howcard extra lucht en .feature niet. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
}
.section--tint .feature { border-color: transparent; }
.feature__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--lilac-soft);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.feature__label {
  font-size: .78rem; font-weight: 560; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 12px;
}
.feature__media {
  height: 148px;
  background: linear-gradient(155deg, #F5F1FE 0%, #E9E1FA 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  margin-bottom: 16px;
}
.feature__media img, .feature__media video {
  max-width: 100%; max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
}
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--ink-60); font-size: .95rem; margin: 0; }
/* ---------- Split (tekst + beeld/blok naast elkaar) ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split__panel {
  background: var(--purple-deep);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.2vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}
@media (max-width: 560px) {
  .split__panel { grid-template-columns: 1fr; }
}
.hl {
  background: var(--lilac-soft);
  color: var(--purple);
  font-weight: 560;
  border-radius: 8px;
  padding: 1px 8px;
  white-space: nowrap;
}
::selection { background: var(--lilac-soft); color: var(--ink); }
.stat { border-top: 1px solid var(--line-dark); padding-top: 18px; margin-top: 18px; }
.stat:first-child { border: 0; padding-top: 0; margin-top: 0; }
.statcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 18px 40px -28px rgba(84, 61, 125, .5);
}
.statcard:nth-child(1) { transform: rotate(-.4deg); }
.statcard:nth-child(2) { transform: rotate(.3deg); }
.statcard:nth-child(3) { transform: rotate(-.25deg); }
.statcard:nth-child(4) { transform: rotate(.35deg); }
.statcard__label {
  display: inline-block;
  font-size: .72rem; font-weight: 560; letter-spacing: .04em;
  color: var(--purple); background: var(--lilac-soft);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 8px;
}
.statcard strong {
  display: block;
  font-size: 1.7rem; font-weight: 640; letter-spacing: -.02em;
  color: var(--ink);
}
.statcard > span:last-child { color: var(--ink-60); font-size: .9rem; }
.bron {
  display: inline-block;
  font-size: .68rem;
  color: var(--ink-40);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 4px;
  white-space: nowrap;
}
.bron:hover { color: var(--purple); }
.stat strong { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.03em; line-height: 1; display: block; color: var(--lilac); }
.stat span { color: var(--white-70); font-size: .95rem; }
/* ---------- Stappen ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 20px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font-size: 1.5rem; font-weight: 560; letter-spacing: -.02em;
  color: var(--purple);
}
.step h3, .step p { grid-column: 2; }
.section--dark .step::before { color: var(--lilac); }
.section--dark .step { border-color: var(--line-dark); }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--ink-60); max-width: 46em; }
.section--dark .step p { color: var(--white-70); }
/* ---------- Hoe het werkt: kaarten ---------- */
#veilig { position: relative; overflow: hidden; z-index: 0; }
#veilig::before {
  content: ""; position: absolute; pointer-events: none;
  z-index: -1;
  width: 560px; height: 560px; border-radius: 50%;
  border: 1.5px solid rgba(162, 128, 255, .28);
  top: 150px; left: 50%;
  transform: translateX(-50%);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.howcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
}
.howcard__visual { position: relative; }
.section__head, .section__foot { background: transparent; }
.howcard__connect { display: flex; align-items: center; gap: 0; }
.howcard__ctile {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 26px -16px rgba(84, 61, 125, .45);
  display: grid; place-items: center;
  flex: none;
  z-index: 1;
}
.howcard__cline {
  width: 74px; height: 2px;
  background-image: linear-gradient(90deg, var(--purple) 45%, transparent 45%);
  background-size: 11px 2px;
  animation: line-flow 1.1s linear infinite;
}
@keyframes bubble-loop {
  0%   { opacity: 0; transform: scale(.7); }
  10%  { opacity: 1; transform: scale(1); }
  82%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes line-flow {
  from { background-position: 0 0; }
  to { background-position: 11px 0; }
}
.howcard__visual {
  height: 150px;
  background: var(--lilac-soft);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.howcard__img { max-width: 82%; max-height: 128px; object-fit: contain; }
.howcard__avatars { display: flex; }
.howcard__avatars img {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--white);
}
.howcard__avatars img + img { margin-left: -12px; }
.howcard__pill {
  position: relative;
  background: var(--purple); color: var(--white);
  font-size: .8rem; font-weight: 560;
  padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(84, 61, 125, .6);
}
.howcard__pill::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  animation: pill-pulse 2.2s ease-out infinite;
}
@keyframes pill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(84, 61, 125, .4); }
  70%  { box-shadow: 0 0 0 12px rgba(84, 61, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(84, 61, 125, 0); }
}
.howcard__chat { display: flex; align-items: center; gap: 10px; }
.howcard__tile {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--purple);
  display: grid; place-items: center; flex: none;
}
.howcard__tile img { width: 19px; height: auto; }
.howcard__bubble {
  animation: bubble-loop 4.2s ease infinite;
  transform-origin: left center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px; border-bottom-left-radius: 4px;
  padding: 9px 13px;
  font-size: .82rem;
  box-shadow: 0 10px 22px -14px rgba(84, 61, 125, .4);
}
.howcard__step {
  display: block;
  font-size: .8rem; font-weight: 560;
  color: var(--purple);
  margin-bottom: 6px;
}
.howcard h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 560; letter-spacing: -.01em; }
.howcard p { margin: 0; color: var(--ink-60); }
.howcard.reveal:nth-child(2) { transition-delay: .22s; }
.howcard.reveal:nth-child(3) { transition-delay: .44s; }
.section__foot--center { margin: 34px auto 0; text-align: center; max-width: none; }
/* ---------- Prijzen ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FAF8FE 0%, var(--white) 110px);
  border: 1px solid #E4DDF4;
  box-shadow: 0 26px 52px -36px rgba(84, 61, 125, .45);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex; flex-direction: column;
}
.plan--featured { border: 2px solid var(--purple); position: relative; }
.plan__badge {
  position: absolute; top: -13px; left: 26px;
  background: var(--purple); color: var(--white);
  font-size: .72rem; font-weight: 560; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.plan__icons { display: flex; gap: 7px; margin-bottom: 12px; }
.plan__icons img { width: 32px; height: 32px; border-radius: 8px; }
.plan h3 { font-size: 1.2rem; }
.plan__price { margin: 10px 0 4px; letter-spacing: -.03em; }
.plan__price strong { font-size: 2.4rem; font-weight: 560; }
/* Onder het bedrag, niet ernaast: naast een cijfer van 2,4rem valt een regel
   van .9rem weg, en de eenheid hoort bij het getal. */
.plan__price span { display: block; margin-top: 2px; color: var(--ink-40); font-size: .9rem; }
.plan__desc { color: var(--ink-60); font-size: .95rem; min-height: 3em; }
.plan__note { margin-top: auto; padding-top: 16px; }
.plan .btn { margin-top: 12px; }
.plan ul { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.plan ul li { padding-left: 26px; position: relative; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--purple); font-weight: 600; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan__note { font-size: .78rem; color: var(--ink-40); margin: 12px 0 0; }
.pricing-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
  margin-top: 30px; padding: 0; list-style: none;
  color: var(--ink-60); font-size: .9rem;
}
.pricing-meta li::before { content: "✓"; color: var(--purple); margin-right: 8px; font-weight: 600; }
/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 4px;
  font-size: 1.1rem; font-weight: 560; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--purple); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; color: var(--ink-60); max-width: 60ch; }
/* ---------- CTA-band ---------- */
.cta-band::after {
  content: ""; position: absolute; pointer-events: none;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1.5px solid rgba(162, 128, 255, .28);
  top: -180px; right: -140px;
}
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(162, 128, 255, .30), transparent 60%),
    var(--purple-deep);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(44px, 7vw, 80px);
  text-align: center;
}
.cta-band .lead { margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; }
/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--white-70); padding-block: 64px 40px; font-size: .925rem; }
.footer a { color: var(--white-70); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer__grid img { height: 24px; width: auto; margin-bottom: 16px; }
.footer h3, .footer h4 { color: var(--white); font-size: .95rem; font-weight: 560; margin: 0 0 14px; line-height: inherit; letter-spacing: inherit; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 24px; font-size: .85rem; color: rgba(255,255,255,.45);
}
#veilig { background: var(--purple-night); }
#veilig .feature {
  background: var(--white);
  border: 0;
  color: var(--ink);
}
#veilig .feature h3 { color: var(--ink); }
#veilig .feature p { color: var(--ink-60); }
#veilig .feature.reveal:nth-child(2) { transition-delay: .15s; }
#veilig .feature.reveal:nth-child(3) { transition-delay: .3s; }
#veilig .feature__icon { opacity: 0; transform: scale(.5); }
#veilig .feature.is-visible .feature__icon { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) .3s forwards; }
#veilig .feature__label { color: var(--ink-40); }
#veilig::before { animation: ring-adem 7s ease-in-out infinite alternate; }
@keyframes ring-adem {
  from { opacity: .55; transform: translateX(-50%) scale(1); }
  to   { opacity: 1; transform: translateX(-50%) scale(1.03); }
}
/* ---------- Grote feature-blokken (Stroomlijn) ---------- */
.feature-grid--groot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feature { min-width: 0; }
.feature__media { min-width: 0; }
.feature-grid--groot .feature__media { height: 220px; }
.feature-grid--groot .feature__media img, .feature-grid--groot .feature__media video { max-height: 190px; }
.feature-grid--groot .feature h3 { font-size: 1.35rem; }
.feature-grid--groot .feature p { font-size: 1.02rem; }
@media (max-width: 760px) {
  .feature-grid--groot { grid-template-columns: 1fr; }
}
/* ---------- Geanimeerde feature-media ---------- */
.mediarow { display: flex; }
.mediarow__p { position: relative; opacity: 0; }
.mediarow__p > img:first-child {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--white);
  display: block;
}
.mediarow__p + .mediarow__p { margin-left: -16px; }
.mediarow__p:nth-child(1) { z-index: 4; }
.mediarow__p:nth-child(2) { z-index: 3; }
.mediarow__p:nth-child(3) { z-index: 2; }
.mediarow__p:nth-child(4) { z-index: 1; }
.mediarow__badge {
  position: absolute; top: -9px; right: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--white);
  overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(27, 20, 48, .4);
  z-index: 6;
  display: block;
}
.mediarow__badge img { width: 100%; height: 100%; display: block; }
.mediarow.is-anim .mediarow__p:nth-child(2) .mediarow__badge { animation-delay: 1.3s; }
.mediarow.is-anim .mediarow__p:nth-child(4) .mediarow__badge { animation-delay: 2.6s; }
.mediarow.is-anim .mediarow__p { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.mediarow.is-anim .mediarow__p:nth-child(1) { animation-delay: .1s; }
.mediarow.is-anim .mediarow__p:nth-child(2) { animation-delay: .28s; }
.mediarow.is-anim .mediarow__p:nth-child(3) { animation-delay: .46s; }
.mediarow.is-anim .mediarow__p:nth-child(4) { animation-delay: .64s; }
.animsvg { width: 100%; height: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.animsvg__svg { max-width: 92%; max-height: 100%; height: auto; }
.animsvg .animsvg__svg path {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
.animsvg.is-anim .animsvg__svg path { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: .7s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(1)  { animation-delay: .05s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(2)  { animation-delay: .11s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(3)  { animation-delay: .17s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(4)  { animation-delay: .23s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(5)  { animation-delay: .29s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(6)  { animation-delay: .35s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(7)  { animation-delay: .41s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(8)  { animation-delay: .47s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(9)  { animation-delay: .53s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(10) { animation-delay: .59s; }
.animsvg.is-anim .animsvg__svg path:nth-of-type(11) { animation-delay: .65s; }
.animsvg.is-anim .animsvg__svg path.st13 { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) .35s forwards, dash-flow 2.8s linear .9s infinite; }
@keyframes dash-flow { to { stroke-dashoffset: -18; } }
@keyframes svg-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.assign__avatar {
  width: 58px; height: 58px; border-radius: 50%;
  opacity: 0;
}
.assign.is-anim .assign__avatar { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) .1s forwards; }
.assign__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 30px -18px rgba(84, 61, 125, .45);
  overflow: hidden;
  min-width: 210px;
}
.assign__row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  opacity: 0;
}
.assign__row + .assign__row { border-top: 1px solid var(--line); }
.assign.is-anim .assign__row:nth-child(1) { animation: assign-in .45s ease .45s forwards; }
.assign.is-anim .assign__row:nth-child(2) { animation: assign-in .45s ease .85s forwards; }
@keyframes assign-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.assign__card { position: relative; }
.assign__cursor { position: absolute; right: 12px; top: 14px; z-index: 3; opacity: 0; width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.assign.is-anim .assign__cursor { animation: cursor-kies 5s ease-in-out 1.4s infinite; }
.assign.is-anim .assign__row:nth-of-type(1) { animation: assign-in .45s ease .45s forwards, row-hl-1 5s ease 1.4s infinite; }
.assign.is-anim .assign__row:nth-of-type(2) { animation: assign-in .45s ease .85s forwards, row-hl-2 5s ease 1.4s infinite; }
@keyframes cursor-kies {
  0%   { opacity: 0; transform: translate(10px, 26px); }
  10%  { opacity: 1; transform: translate(0, 8px); }
  38%  { opacity: 1; transform: translate(0, 8px); }
  52%  { opacity: 1; transform: translate(0, 52px); }
  82%  { opacity: 1; transform: translate(0, 52px); }
  94%, 100% { opacity: 0; transform: translate(10px, 70px); }
}
@keyframes row-hl-1 {
  0%, 8% { background: transparent; }
  12%, 40% { background: #f0f0f0; }
  48%, 100% { background: transparent; }
}
@keyframes row-hl-2 {
  0%, 50% { background: transparent; }
  56%, 84% { background: #f0f0f0; }
  92%, 100% { background: transparent; }
}
.assign__auto {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--purple);
  display: grid; place-items: center;
  flex: none;
}
.assign.is-anim .assign__row:nth-of-type(3) { animation: assign-in .45s ease 1.2s forwards; }
.assign__row > img { width: 30px; height: 30px; border-radius: 50%; }
.assign__row strong { display: block; font-size: .82rem; font-weight: 560; line-height: 1.2; }
.assign__row em { font-style: normal; font-size: .72rem; color: var(--ink-60); }
.assign__hr {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--purple); color: var(--white);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 600;
  flex: none;
}
/* ---------- Apparaten-visual (Vrijheid) ---------- */
.devices { display: flex; align-items: flex-end; }
.devices__phone { margin-left: -22px; position: relative; z-index: 2; }
.devices .devices__screen { box-shadow: 0 14px 30px -18px rgba(84, 61, 125, .5); background: var(--white); }
.devices > * { opacity: 0; }
.devices.is-anim > * { animation: svg-pop .5s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.devices.is-anim > *:nth-child(1) { animation-delay: .1s; }
.devices.is-anim > *:nth-child(2) { animation-delay: .3s; }
.devices__laptop { display: flex; flex-direction: column; align-items: center; }
.devices__screen {
  position: relative;
  width: 150px; height: 94px;
  background: var(--white);
  border: 2px solid #D8D0EC;
  border-radius: 10px;
  display: grid; place-items: center;
}
.devices__base { width: 176px; height: 7px; background: #D8D0EC; border-radius: 0 0 8px 8px; }
.devices__phone .devices__screen { width: 52px; height: 94px; border-radius: 12px; }
.devices__tile {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--purple);
  display: grid; place-items: center;
}
.devices__tile img { width: 19px; height: auto; }
.devices__tile--klein { width: 26px; height: 26px; border-radius: 7px; }
.devices__tile--klein img { width: 14px; }
.devices__ping {
  position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #25D366;
}
.devices__ping--1 { animation: ping 2.8s ease-out infinite; }
.devices__ping--2 { animation: ping 2.8s ease-out 1.4s infinite; }
@keyframes ping {
  0%, 45% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); opacity: 1; }
  70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); opacity: 1; }
}
/* ---------- AI-samenvattingskaart ---------- */
.aicard {
  background: var(--white);
  border: 1px solid #E4DDF4;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -38px rgba(84, 61, 125, .55);
  padding: 24px 26px;
  align-self: center;
}
.aicard__head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.aicard__head img { width: 34px; height: 34px; border-radius: 50%; }
.aicard__who strong { display: block; font-size: .9rem; font-weight: 560; line-height: 1.2; }
.aicard__who span { font-size: .74rem; color: var(--ink-60); }
.aicard__ai {
  margin-left: auto;
  background: var(--purple); color: var(--white);
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 7px;
}
.aicard__row { padding: 13px 0 0; opacity: 0; }
.aicard.is-anim .aicard__row:nth-of-type(2) { animation: assign-in .45s ease .3s forwards; }
.aicard.is-anim .aicard__row:nth-of-type(3) { animation: assign-in .45s ease .75s forwards; }
.aicard.is-anim .aicard__row:nth-of-type(4) { animation: assign-in .45s ease 1.2s forwards; }
.aicard__label {
  display: inline-block;
  font-size: .7rem; font-weight: 560; letter-spacing: .04em;
  color: var(--purple); background: var(--lilac-soft);
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 6px;
}
.aicard__row p, .aicard__row ul { margin: 0; font-size: .85rem; color: var(--ink-60); }
.aicard__row ul { padding-left: 1.1em; }
.aicard__row li { margin-bottom: 2px; }
.aicard__sent { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--ink-60); }
.aicard__dot { width: 9px; height: 9px; border-radius: 50%; background: #25D366; flex: none; }
/* ---------- Testimonial ---------- */
.quote { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 88px); }
.quote__box blockquote {
  margin: 0 0 24px;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 480;
  letter-spacing: -.015em;
  line-height: 1.5;
  color: var(--ink);
}
.quote__box figcaption strong { display: block; font-weight: 560; line-height: 1.25; }
.quote__rol { font-size: .85rem; color: var(--ink-60); }
.clients__intro {
  text-align: center; margin: 0 0 18px;
  font-size: .85rem; color: var(--ink-40);
  letter-spacing: .02em;
}
.clients__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.clients__track {
  display: flex; gap: 52px; padding-bottom: 4px; width: max-content;
  animation: clients-scroll 42s linear infinite;
}
.clients__track img:hover { filter: none; opacity: 1; }
.clients__track img.is-hoog { height: 48px; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
/* ---------- Sectie-afsluiter (regel onder een grid of lijst) ---------- */
.section__foot { margin: 28px 0 0; color: var(--ink-60); max-width: 65ch; }
.section--dark .section__foot { color: var(--white-70); }
/* ---------- Modal (demo boeken via Microsoft Bookings) ---------- */








/* ---------- Prose (juridische en andere tekstpagina's) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--purple); }
.prose__table { overflow-x: auto; margin: 0 0 1em; }
.prose table { border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px; border: 1px solid var(--line); }
.prose th { background: var(--mist); font-weight: 560; }
.prose__meta { color: var(--ink-40); font-size: .875rem; }
/* ---------- Logostrip (partners) ---------- */
.logostrip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  opacity: .55; filter: grayscale(1);
}
.logostrip img { height: 28px; width: auto; }
/* ---------- Scroll-reveal (subtiel, optioneel via .reveal) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* Definitieve centrering van sectie-afsluiters (wint van de baseregel hierboven) */
.section__foot.section__foot--center { max-width: none; margin: 34px auto 0; text-align: center; }
/* ================= Subpagina's (Contact, Over ons) ================= */
.subhero .hero__stack { padding-block: clamp(48px, 7vw, 88px) clamp(20px, 3vw, 36px); }
.subhero h1 { max-width: 18em; }
/* Contactkaarten: klikbare feature-kaarten */
.contactcard { text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.contactcard:hover { border-color: var(--lilac); transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(84, 61, 125, .5); }
.contactcard h3 { color: var(--purple); }
/* Contactformulier */
.split--form { align-items: start; gap: clamp(28px, 4vw, 56px); }
.contactform { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contactform label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 480; color: var(--ink); }
.contactform input, .contactform textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contactform input:focus, .contactform textarea:focus {
  outline: none; border-color: var(--lilac);
  box-shadow: 0 0 0 3px var(--lilac-soft);
}
.contactform textarea { resize: vertical; }
.contactform .btn { align-self: start; margin-top: 4px; }
.contactform__note { font-size: .82rem; color: var(--ink-40); margin: 0; }
@media (max-width: 560px) { .formrow { grid-template-columns: 1fr; } }
/* Infokaart */
.infocard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 26px 52px -40px rgba(84, 61, 125, .45);
}
.infocard h3 { margin: 0; font-size: 1.35rem; font-weight: 560; }
.infocard__by { margin: 2px 0 20px; color: var(--ink-60); font-size: .9rem; }
.infocard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.infocard__list li { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.infocard__list span { font-size: .74rem; font-weight: 560; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.infocard__list a { color: var(--purple); text-decoration: none; }
.infocard__list a:hover { text-decoration: underline; }
.infocard__store {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .88rem; font-weight: 480; color: var(--ink-60);
  text-decoration: none;
}
.infocard__store:hover { color: var(--ink); }
.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--purple); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-weight: 560; text-decoration: none;
  transition: top .16s ease;
}
.skiplink:focus { top: 0; outline: 3px solid var(--lilac); outline-offset: 2px; }
.footer__partnersLabel {
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--white-70); font-weight: 600;
}
.footer__partnerLogos { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.footer__partnerDot { width: 4px; height: 4px; border-radius: 50%; background: var(--white-70); opacity: .45; }
a.footer__partner:hover img { opacity: 1; }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer__partner img { width: 74px; } }
/* ---------- Taalschakelaar ---------- */
.taal { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.taal a, .taal span {
  font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  padding: 6px 8px; border-radius: 8px; text-decoration: none; line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.taal .is-actief { color: var(--ink); background: rgba(84,61,125,.09); }
.taal__deel { color: var(--ink-60); opacity: .35; font-weight: 400; }
/* In de header: onderdeel van het menu, verdwijnt bij scrollen */
.nav__taal { display: flex; align-items: center; flex: none; }
@media (min-width: 1101px) { .nav__bar { flex-wrap: nowrap; } }
.nav .taal { margin-left: 0; }
@media (max-width: 1100px) {
  .nav__links .taal { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; justify-content: flex-start; }
}
/* In de footer, op donkere achtergrond */
.footer .taal a, .footer .taal span { font-size: .84rem; }
.footer .taal .is-actief { color: var(--white); background: rgba(255,255,255,.12); }
.footer .taal__deel { color: var(--white-70); opacity: .3; }
.footer__partners .taal { margin-left: auto; }
@media (max-width: 700px) { .footer__partners .taal { margin-left: 0; width: 100%; } }

/* ---------- Mockup, stapnummer en meldingsbalk, verhuisd uit het blok van voor-zorg ---------- */
.mock__replay { position: absolute; top: 18px; right: 24px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--purple); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px -8px rgba(27, 20, 48, .5); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.mock__replay:hover { background: var(--lilac-soft); border-color: var(--lilac); }
.mock__replay:active { transform: scale(.92); }
.mock__replay svg { display: block; transition: transform .45s cubic-bezier(.3, 0, .2, 1); }
.mock__replay:hover svg { transform: rotate(-180deg); }
.mock.is-done .mock__replay { animation: replayPuls 2.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .mock.is-done .mock__replay { animation: none; } }
@media (prefers-reduced-motion: reduce) { .mock__replay:hover svg { transform: none; } }
.mock__systeem { display: flex; align-items: center; gap: 7px; align-self: center; font-size: .72rem; color: var(--ink-60); background: rgba(33, 33, 33, .05); border-radius: 40px; padding: 4px 12px; margin: 2px 0; }
.mock__systeem strong { font-weight: 600; color: var(--ink); }
.mock__systeemIcon { color: var(--purple); font-size: .85rem; }
.mock__ai { align-self: stretch; background: linear-gradient(180deg, #faf9ff, #f4f1fd); border: 1px solid #e2ddf5; border-radius: 12px; padding: 10px 12px; }
.mock__aiKop { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: var(--purple); margin-bottom: 5px; }
.mock__aiSpark { font-size: .8rem; }
.mock__aiChip { margin-left: auto; background: #EAF7EC; color: #1E6B2C; border-radius: 40px; padding: 2px 8px; font-size: .66rem; font-weight: 600; }
.mock__aiTekst { margin: 0 0 6px; font-size: .76rem; line-height: 1.45; color: var(--ink); }
.mock__aiActie { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--ink-60); border-top: 1px solid #e6e1f6; padding-top: 6px; }
.mock__aiActie span { color: var(--purple); font-size: .8rem; }
.mock__systeem, .mock__ai { opacity: 0; }
.mock.is-playing .mock__systeem { animation: msg-in .5s ease 5.6s forwards; }
.mock.is-playing .mock__ai { animation: msg-in .5s ease 8.4s forwards; }
@media (prefers-reduced-motion: reduce) { .mock__systeem, .mock__ai { opacity: 1; } }
.announce p { margin: 0; }
.nav.is-scrolled { top: 12px; }
.howcard__nr { display: none; }
.announce p { margin: 0; }

/* ---------- Taalknop, verhuisd uit de paginablokken ---------- */
/* De EN-versie bestaat niet, dus de knop is uit. Deze regel stond alleen in
   de blokken van index, contact, over en de twee sectorpagina's; op een
   pagina zonder zo'n blok was EN gewoon zwart en volledig zichtbaar. */
.taal .taal--uit { color: var(--ink-60); opacity: .55; cursor: not-allowed; background: rgba(84,61,125,.07); border: 1px solid var(--line); }
.taal .taal--uit { color: var(--ink-60); opacity: .55; cursor: not-allowed; background: rgba(84,61,125,.07); border: 1px solid var(--line); }
/* ---------- Swipe-stippen ---------- */
/* De stippen onder een swipe-carousel worden door ScriptBasis aangemaakt op
   elk element met data-swipe. De opmaak stond alleen in het blok van index,
   inclusief de regel die ze op desktop verbergt. Op elke andere pagina waren
   ze daardoor ongestyleerde knoppen die ook op een breed scherm meededen. */
@media (max-width: 760px) {
  .swipe-stippen { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
  .swipe-stip {
    width: 32px; height: 32px; border: 0; padding: 0; background: none;
    cursor: pointer; display: grid; place-items: center;
  }
  .swipe-stip::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--line); transition: background .2s ease, width .2s ease;
  }
  .swipe-stip.is-actief::before { background: var(--purple); width: 22px; border-radius: 4px; }
}
@media (min-width: 761px) { .swipe-stippen { display: none; } }


/* De teamopmaak stond gescopet in over.astro. Astro scopet per bestand, dus
   buiten dat component raakten die regels niets; nu gedeeld. */
/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}
@media (max-width: 780px) { .team-grid { grid-template-columns: 1fr; }}
.teamlid {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 5px;
}
.teamlid__foto {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--purple-deep), var(--purple));
  color: var(--white);
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.teamlid strong { font-size: 1.05rem; font-weight: 560; }
.teamlid__rol { font-size: .88rem; color: var(--purple); font-weight: 500; }
.teamlid p { margin: 6px 0 0; color: var(--ink-60); font-size: .95rem; line-height: 1.5; }


/* Compacte teamweergave, zoals op de gordijnpagina: overlappende rondjes met
   de namen eronder. Neemt een fractie van de ruimte van de kaartenversie. */
.teamrij { text-align: center; margin: 30px 0 0; }
.teamrij__fotos { display: flex; justify-content: center; flex-wrap: wrap; padding-left: 14px; }
.teamrij__lid {
  width: 58px; height: 58px; border-radius: 50%;
  margin-left: -14px;
  border: 2px solid var(--white);
  box-shadow: 0 6px 18px -10px rgba(84, 61, 125, .55);
  object-fit: cover; display: block; background: var(--mist);
  transition: transform .18s ease;
}
.teamrij__lid:hover { transform: translateY(-4px); }
.teamrij__namen { margin: 16px auto 0; font-size: .92rem; line-height: 1.6; color: var(--ink-60); max-width: 52ch; }
.blok--tint .teamrij__lid { border-color: var(--mist); }
@media (max-width: 560px) {
  .teamrij__lid { width: 46px; height: 46px; margin-left: -11px; }
  .teamrij__fotos { padding-left: 11px; }
}
@media (prefers-reduced-motion: reduce) { .teamrij__lid { transition: none; } }