/* =============================================================
   SM KLANT-methode
   Bestemming-eerst takken, om en om beeld en tekst.
   Licht en donker via de band-keuze, accent via --km-accent.
   ============================================================= */

.sm-km {
  /* licht is de standaard */
  --km-bg: #f4f6f5;
  --km-vlak: #eef2f0;
  --km-vlak-2: #ffffff;
  --km-ink: #0d1512;
  --km-stil: rgba(13, 21, 18, .60);
  --km-hair: rgba(13, 21, 18, .12);
  --km-accent: #0f8f74;
  --km-chip-bg: #ffffff;
  --km-chip-rand: rgba(13, 21, 18, .13);
  --km-chip-ink: rgba(13, 21, 18, .80);
  --km-knop-vlak: #0a0909;
  --km-knop-ink: #ffffff;
  --km-knop-hover-vlak: #ffffff;
  --km-knop-hover-ink: #0a0909;
  --km-ring: #3DC78F;
  --km-ring-spark: #D2F65A;

  box-sizing: border-box;
  background: var(--km-bg);
  color: var(--km-ink);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.sm-km *, .sm-km *::before, .sm-km *::after { box-sizing: inherit; }

.sm-km--donker {
  --km-bg: #0a0909;
  --km-vlak: #121111;
  --km-vlak-2: #191818;
  --km-ink: #ffffff;
  --km-stil: rgba(255, 255, 255, .56);
  --km-hair: rgba(255, 255, 255, .10);
  --km-accent: #74dec4;
  --km-chip-bg: #151414;
  --km-chip-rand: rgba(255, 255, 255, .12);
  --km-chip-ink: rgba(255, 255, 255, .82);
  --km-knop-vlak: #0a0909;
  --km-knop-ink: #ffffff;
  --km-knop-hover-vlak: #ffffff;
  --km-knop-hover-ink: #0a0909;
}

.sm-km-in { max-width: 1080px; margin: 0 auto; }

/* ---------- de kop ---------- */
.sm-km-eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--km-accent); margin: 0 0 18px;
}
.sm-km-kop {
  font-size: clamp(30px, 6vw, 62px); line-height: 1.04; letter-spacing: -.03em;
  font-weight: 600; margin: 0 0 20px; max-width: 15ch; color: var(--km-ink);
  text-wrap: balance;
}
.sm-km-intro {
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; letter-spacing: -.011em;
  color: var(--km-stil); margin: 0; max-width: 44ch; text-wrap: balance;
}

/* ---------- de takken ---------- */
.sm-km-takken {
  margin-top: clamp(56px, 8vw, 96px);
  display: flex; flex-direction: column;
  gap: clamp(56px, 8vw, 104px);
}
.sm-km-tak {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
/* om en om: beeld wisselt van kant */
.sm-km-tak:nth-child(even) .sm-km-media { order: 2; }

.sm-km-letter {
  font-size: clamp(56px, 8vw, 104px); line-height: .8; font-weight: 600;
  letter-spacing: -.05em; color: var(--km-accent); margin: 0 0 18px;
}
.sm-km-doel {
  font-size: clamp(24px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.024em;
  font-weight: 600; color: var(--km-ink); margin: 0 0 14px; max-width: 22ch;
  text-wrap: balance;
}
.sm-km-zin {
  font-size: 16.5px; line-height: 1.5; letter-spacing: -.008em;
  color: var(--km-stil); margin: 0 0 20px; max-width: 40ch;
}
.sm-km-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-km-chip {
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  padding: 7px 14px; border-radius: 999px;
  background: var(--km-chip-bg);
  border: 1px solid var(--km-chip-rand);
  color: var(--km-chip-ink);
}

/* ---------- het media-vak ---------- */
.sm-km-media {
  position: relative; border-radius: 28px; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--km-vlak);
  border: 1px solid var(--km-hair);
}
.sm-km-beeld,
.sm-km-media iframe,
.sm-km-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block;
}
.sm-km-vlak {
  position: absolute; inset: 0; display: block;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--km-accent) 16%, transparent) 0%, transparent 55%), var(--km-vlak);
}
.sm-km-speler {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.sm-km-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: grid; place-items: center; color: #fff;
  transition: transform .5s cubic-bezier(.165, .84, .44, 1), background .3s ease;
}
.sm-km--licht .sm-km-play { background: rgba(10, 9, 9, .45); }
.sm-km-play svg { width: 22px; height: 22px; margin-left: 3px; }
.sm-km-speler:hover .sm-km-play { transform: translate(-50%, -50%) scale(1.08); }

/* ---------- het slot: de ringknop ---------- */
.sm-km-slot { margin-top: clamp(56px, 8vw, 96px); text-align: center; }
.sm-km-knop {
  position: relative; display: inline-block; border-radius: 999px;
  padding: 3px; text-decoration: none; isolation: isolate;
  transition: transform .5s cubic-bezier(.165, .84, .44, 1);
}
.sm-km-knop-ring {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1;
}
.sm-km-knop-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--km-ring) 72%, var(--km-ring-spark) 88%, transparent 100%);
  animation: sm-km-ringdraai 3.2s linear infinite;
}
@keyframes sm-km-ringdraai { to { rotate: 360deg; } }
.sm-km-knop-vlak {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  background: var(--km-knop-vlak); color: var(--km-knop-ink);
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  transition: background .35s ease, color .35s ease;
}
.sm-km-knop-vlak { text-wrap: balance; text-align: center; }
.sm-km-knop-vlak svg { width: 18px; height: 18px; transition: transform .5s cubic-bezier(.165, .84, .44, 1); }
.sm-km-knop:hover { transform: translateY(-3px); }
.sm-km-knop:hover .sm-km-knop-vlak { background: var(--km-knop-hover-vlak); color: var(--km-knop-hover-ink); }
.sm-km-knop:hover .sm-km-knop-vlak svg { transform: translateX(4px); }
.sm-km-ps { margin: 22px auto 0; font-size: 15px; line-height: 1.6; color: var(--km-stil); max-width: 44ch; }
.sm-km .sm-km-ps { text-wrap: balance; }

/* ---------- verschijnen bij scrollen, heen en terug ----------
   De JS zet sm-km-klaar op de sectie zodra hij draait. Zonder JS
   (of met de schakelaar uit) is er dus nooit verborgen content. */
.sm-km--anim.sm-km-klaar .sm-km-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.165, .84, .44, 1), transform .7s cubic-bezier(.165, .84, .44, 1);
}
.sm-km--anim.sm-km-klaar .sm-km-reveal.zicht { opacity: 1; transform: none; }

/* ---------- mobiel ---------- */
@media (max-width: 760px) {
  .sm-km-tak { grid-template-columns: 1fr; gap: 22px; }
  .sm-km-tak:nth-child(even) .sm-km-media { order: 0; }
  .sm-km-media { aspect-ratio: 16 / 10; }
  .sm-km-letter { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-km--anim.sm-km-klaar .sm-km-reveal { opacity: 1; transform: none; transition: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-km-knop, html:not(.sm-rustig):not(.sm-beweeg) .sm-km-knop-vlak svg, html:not(.sm-rustig):not(.sm-beweeg) .sm-km-play { transition: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-km-knop-ring::before { animation: none; }
}

/* het nummer in de sectie-badge volgt het accent van deze sectie */
.sm-km { --sm-badge-accent: var(--km-accent); }

/* de gedeelde kopmaat; twee klassen zodat hij wint van de regel hierboven */
.sm-km .sm-km-kop{
  font-family: var(--sm-kop-font);
  font-size: var(--sm-kop);
  line-height: var(--sm-kop-regel);
  letter-spacing: var(--sm-kop-sp);
  text-wrap: balance;
}

/* sm-midden-methode: kopblok gecentreerd, net als de andere secties.
   Alleen de badge, de kop en de intro; de stappen eronder blijven links,
   want dat is inhoud en geen kop. */
.sm-km .sm-km-top{ text-align: center; }
.sm-km .sm-km-kop{ margin-left: auto; margin-right: auto; max-width: 20ch; }
.sm-km .sm-km-intro{ margin-left: auto; margin-right: auto; }

/* =============================================================
   Uitleg-animaties per letter (bron_type = animatie)
   Eén bezoeker komt in elk vak terug. Eerst denkt die wat elke
   klant denkt ("weer zo'n verkoper"), na de beweging voelt die
   vertrouwen. De eindstand is de gewone stand; de beweging speelt
   een keer als het vak in beeld komt (JS zet hem stil op nul en
   start hem). Zonder JS of met minder beweging: de eindstand.
   Alle maten in cqw, zodat het hele vak als een plaat meeschaalt.
   ============================================================= */
.sm-km-an {
  --an-e: cubic-bezier(.16, 1, .3, 1);
  --an-lijn: color-mix(in srgb, var(--km-ink) 11%, transparent);
  --an-marker: #d2f65a;
  --an-ster: #f0b429;
  --an-knop-ink: #ffffff;
  position: absolute; inset: 0; container-type: inline-size;
  color: var(--km-ink); pointer-events: none; user-select: none;
}
.sm-km--donker .sm-km-an { --an-knop-ink: #04261a; }
.sm-km-an .an-podium {
  position: absolute; left: 0; right: 0; top: 50%; height: 58cqw;
  transform: translateY(-50%); font-size: 3.1cqw; line-height: 1.3;
}
.sm-km-an .an-kaart {
  background: var(--km-vlak-2); border: 1px solid var(--km-hair);
  border-radius: 2.2cqw; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .07);
}
.sm-km--donker .sm-km-an .an-kaart { box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, .45); }
.sm-km-an .an-lijn { display: block; height: 1.5cqw; border-radius: 1cqw; background: var(--an-lijn); }
.sm-km-an .w40 { width: 40%; } .sm-km-an .w55 { width: 55%; } .sm-km-an .w60 { width: 60%; }
.sm-km-an .w70 { width: 70%; } .sm-km-an .w80 { width: 80%; } .sm-km-an .w90 { width: 90%; }
.sm-km-an .an-mark {
  background: linear-gradient(var(--an-marker), var(--an-marker)) no-repeat 0 65% / 100% 78%;
  color: #0d1512; padding: 0 .4cqw; border-radius: .4cqw;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sm-km-an .an-pop-ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sm-km-an .an-cursor {
  position: absolute; left: 0; top: 0; width: 4.6cqw; height: 4.6cqw;
  fill: var(--km-ink); stroke: var(--km-bg); stroke-width: 1.4; stroke-linejoin: round;
  transform-origin: 0 0;
}
.sm-km-an .an-vink { width: 3.4cqw; height: 3.4cqw; flex: none; fill: none; stroke: var(--km-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- de bezoeker met het gedachtebolletje ---------- */
.sm-km-an .an-bez {
  position: absolute; right: 4cqw; bottom: .5cqw; z-index: 3;
  display: flex; align-items: center; gap: 1.4cqw; transform-origin: 85% 50%;
}
.sm-km-an .an-bez-ic {
  width: 6.4cqw; height: 6.4cqw; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--km-vlak-2); border: 1px solid var(--km-hair); color: var(--km-stil);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .18);
}
.sm-km-an .an-bez-ic .an-pop-ic { width: 60%; height: 60%; }
.sm-km-an .an-bez-bel {
  position: relative; display: grid; padding: 1.5cqw 2.6cqw; border-radius: 3cqw 3cqw 3cqw .8cqw;
  background: var(--km-ink); color: var(--km-bg); font-size: 2.8cqw; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, .22);
}
.sm-km-an .an-bez:not(.an-bez--los) .an-bez-bel { order: -1; border-radius: 3cqw 3cqw .8cqw 3cqw; }
.sm-km-an .an-g-voor, .sm-km-an .an-g-na { grid-area: 1 / 1; }
.sm-km-an .an-g-voor { opacity: 0; font-weight: 500; font-style: italic; }
.sm-km-an .an-bez--los { right: auto; left: 6cqw; bottom: 1cqw; transform-origin: 15% 0; }
.sm-km-an .an-bez--los .an-bez-bel { border-radius: .8cqw 3cqw 3cqw 3cqw; }

@keyframes sm-km-an-op   { from { opacity: 0; transform: translateY(2.4cqw); } }
@keyframes sm-km-an-in   { from { opacity: 0; } }
@keyframes sm-km-an-uit  { from { opacity: 1; } }
@keyframes sm-km-an-pop  { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } }
@keyframes sm-km-an-mark { from { background-size: 0% 78%; } }
/* opacity erbij: een ronde lijnkop op lengte nul tekent anders een los puntje */
@keyframes sm-km-an-teken { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: .75; } }
@keyframes sm-km-an-druk { 50% { transform: scale(.9); } }
/* het omslagmoment van de bezoeker: bolletje veert, gedachte wisselt */
@keyframes sm-km-an-veer { 40% { transform: scale(1.08); } }
@keyframes sm-km-an-bez-ic { from { color: var(--km-stil); border-color: var(--km-hair); } }
.sm-km-an .an-bez:not(.an-bez--los) .an-bez-ic { color: var(--km-accent); border-color: var(--km-accent); }

/* ---------- K: hun zorg wordt je kop ---------- */
.sm-km-an--k .an-k {
  position: absolute; inset: 0 5cqw 8cqw; display: grid;
  grid-template-columns: 37cqw 6cqw 1fr; align-items: center; gap: 1.5cqw;
}
.sm-km-an--k .an-k-bron { display: flex; flex-direction: column; gap: 1.6cqw; }
.sm-km-an--k .an-lbl { font-size: 2.2cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--km-stil); }
.sm-km-an--k .an-bub {
  display: flex; flex-direction: column; gap: 1.3cqw; padding: 2.2cqw 2.8cqw;
  border-radius: 2.2cqw 2.2cqw 2.2cqw .6cqw;
}
.sm-km-an--k .an-bub2 { display: block; font-weight: 500; line-height: 1.4; }
.sm-km-an--k .an-pijl svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: var(--km-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-km-an--k .an-k-site { display: flex; flex-direction: column; gap: 1.6cqw; padding-bottom: 3cqw; overflow: hidden; }
.sm-km-an--k .an-balk { display: flex; gap: .9cqw; padding: 1.6cqw 2.4cqw; background: var(--km-vlak); border-bottom: 1px solid var(--km-hair); }
.sm-km-an--k .an-balk i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--an-lijn); }
.sm-km-an--k .an-k-site > .an-lijn, .sm-km-an--k .an-knopje { margin: 0 3cqw; }
.sm-km-an--k .an-koppen { display: grid; margin: 1.4cqw 3cqw .6cqw; }
.sm-km-an--k .an-kop { grid-area: 1 / 1; position: relative; font-size: 3.7cqw; line-height: 1.22; font-weight: 700; letter-spacing: -.02em; }
.sm-km-an--k .an-kop-oud { color: var(--km-stil); opacity: 0; }
.sm-km-an--k .an-kop-oud::after {
  content: ""; position: absolute; left: 0; top: 50%; height: .35cqw; width: 100%;
  background: var(--km-stil); transform-origin: 0 50%;
}
.sm-km-an--k .an-knopje { width: 16cqw; height: 4.4cqw; border-radius: 9cqw; background: var(--km-accent); }

.sm-km-an--k .an-lbl       { animation: sm-km-an-in .4s ease both .1s; }
.sm-km-an--k .an-bub1      { animation: sm-km-an-op .6s var(--an-e) both .2s; }
.sm-km-an--k .an-bub2      { animation: sm-km-an-op .6s var(--an-e) both .4s; }
.sm-km-an--k .an-bub3      { animation: sm-km-an-op .6s var(--an-e) both .6s; }
.sm-km-an--k .an-k-site    { animation: sm-km-an-op .6s var(--an-e) both .3s; }
.sm-km-an--k .an-bez       { animation: sm-km-an-pop .5s var(--an-e) both .8s, sm-km-an-veer .5s var(--an-e) none 4.3s; }
.sm-km-an--k .an-bub2 .an-mark { animation: sm-km-an-mark .8s cubic-bezier(.65, 0, .35, 1) both 1.5s; }
.sm-km-an--k .an-pijl      { animation: sm-km-an-pop .5s var(--an-e) both 2.3s; }
.sm-km-an--k .an-kop-oud::after { animation: sm-km-an-streep .4s var(--an-e) both 2.6s; }
.sm-km-an--k .an-kop-oud   { animation: sm-km-an-uit .35s ease both 3.1s; }
.sm-km-an--k .an-kop-nieuw { animation: sm-km-an-op .6s var(--an-e) both 3.4s; }
.sm-km-an--k .an-kop-nieuw .an-mark { animation: sm-km-an-mark .7s cubic-bezier(.65, 0, .35, 1) both 3.7s; }
.sm-km-an--k .an-g-voor    { animation: sm-km-an-uit .25s ease both 4.3s; }
.sm-km-an--k .an-g-na      { animation: sm-km-an-in .35s ease both 4.45s; }
.sm-km-an--k .an-bez-ic    { animation: sm-km-an-bez-ic .4s ease both 4.3s; }
@keyframes sm-km-an-streep { from { transform: scaleX(0); } }

/* ---------- L: je klant vraagt het aan AI, en het antwoord noemt jou ---------- */
.sm-km-an--l .an-zoek {
  position: absolute; left: 5cqw; right: 5cqw; top: 1cqw; height: 8.6cqw;
  display: flex; align-items: center; gap: 1.8cqw; padding: 0 3.2cqw;
  background: var(--km-vlak-2); border: 1px solid var(--km-hair); border-radius: 9cqw;
  font-size: 3.2cqw; font-weight: 500;
}
.sm-km-an--l .an-zoek svg { width: 3.8cqw; height: 3.8cqw; flex: none; fill: var(--km-accent); stroke: none; }
.sm-km-an--l .an-typ { white-space: nowrap; }
.sm-km-an--l .an-caret { width: .3cqw; height: 4.4cqw; background: var(--km-accent); opacity: 0; margin-left: -1.2cqw; }
.sm-km-an--l .an-res { position: absolute; left: 5cqw; right: 5cqw; top: 12.5cqw; display: flex; flex-direction: column; gap: 2cqw; }
.sm-km-an--l .an-rij-antw { height: 25cqw; }
.sm-km-an--l .an-rij-promo { height: 9cqw; }
.sm-km-an--l .an-ai-lbl { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.9cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--km-stil); }
.sm-km-an--l .an-bron { align-self: flex-start; margin-top: .4cqw; font-size: 2.1cqw; font-weight: 800; line-height: 1; color: #0d1512; background: var(--an-marker); padding: .9cqw 1.6cqw; border-radius: 9cqw; transform-origin: 0 50%; }
.sm-km-an--l .an-r { height: 100%; padding: 1.8cqw 3cqw; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; }
.sm-km-an--l .an-titel { font-size: 3.1cqw; font-weight: 700; letter-spacing: -.01em; }
.sm-km-an--l .an-match { font-weight: 800; color: var(--km-accent); }
.sm-km-an--l .an-antw {
  border-color: var(--km-accent);
  box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--km-accent) 18%, transparent), 0 1.4cqw 4cqw rgba(0, 0, 0, .12);
}
.sm-km-an--l .an-stap { display: flex; align-items: center; gap: 1.4cqw; }
.sm-km-an--l .an-stap .an-vink { width: 2.8cqw; height: 2.8cqw; }
.sm-km-an--l .an-stap .an-lijn { width: 52%; }
.sm-km-an--l .an-s2 .an-lijn { width: 44%; } .sm-km-an--l .an-s3 .an-lijn { width: 58%; }
.sm-km-an--l .an-promo { flex-direction: row; align-items: center; justify-content: space-between; filter: opacity(.5); }
.sm-km-an--l .an-promo .an-titel { color: var(--km-stil); }
.sm-km-an--l .an-offerte {
  font-size: 2.3cqw; font-weight: 800; padding: 1.1cqw 2.2cqw; border-radius: 9cqw;
  background: var(--an-lijn); color: var(--km-stil);
}
.sm-km-an--l .an-bez { bottom: 0; }

.sm-km-an--l .an-zoek      { animation: sm-km-an-op .6s var(--an-e) both 0s; }
.sm-km-an--l .an-typ       { animation: sm-km-an-typ 1.6s steps(36, end) both .5s; }
.sm-km-an--l .an-caret     { animation: sm-km-an-knipper .5s linear 6 both .4s; }
.sm-km-an--l .an-bez       { animation: sm-km-an-pop .5s var(--an-e) both 1s, sm-km-an-veer .5s var(--an-e) none 4.3s; }
.sm-km-an--l .an-antw      { animation: sm-km-an-op .6s var(--an-e) both .35s, sm-km-an-l-licht .5s ease both 3s; }
.sm-km-an--l .an-promo     { animation: sm-km-an-op .6s var(--an-e) both .25s, sm-km-an-l-dim .5s ease both 2.6s; }
.sm-km-an--l .an-match     { animation: sm-km-an-l-match .4s ease both 2s; }
.sm-km-an--l .an-rij-antw  { animation: sm-km-an-l-omhoog .7s var(--an-e) both 2.4s; }
.sm-km-an--l .an-rij-promo { animation: sm-km-an-l-omlaag .7s var(--an-e) both 2.4s; }
.sm-km-an--l .an-s1        { animation: sm-km-an-op .45s var(--an-e) both 3.1s; }
.sm-km-an--l .an-s2        { animation: sm-km-an-op .45s var(--an-e) both 3.3s; }
.sm-km-an--l .an-s3        { animation: sm-km-an-op .45s var(--an-e) both 3.5s; }
.sm-km-an--l .an-bron      { animation: sm-km-an-pop .45s var(--an-e) both 3.8s; }
.sm-km-an--l .an-g-voor    { animation: sm-km-an-uit .25s ease both 4.3s; }
.sm-km-an--l .an-g-na      { animation: sm-km-an-in .35s ease both 4.45s; }
.sm-km-an--l .an-bez-ic    { animation: sm-km-an-bez-ic .4s ease both 4.3s; }
@keyframes sm-km-an-typ { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sm-km-an-knipper { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sm-km-an-l-match { from { color: var(--km-ink); } }
/* startstand: het aanbod staat bovenaan, het antwoord eronder */
@keyframes sm-km-an-l-omhoog { from { transform: translateY(11cqw); } }
@keyframes sm-km-an-l-omlaag { from { transform: translateY(-27cqw); } }
@keyframes sm-km-an-l-licht { from { border-color: var(--km-hair); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .07); } }
@keyframes sm-km-an-l-dim { from { filter: opacity(1); } }

/* ---------- A: een echt mens tussen de roepers ---------- */
.sm-km-an--a .an-drie {
  position: absolute; left: 5cqw; right: 5cqw; top: 1.5cqw; height: 42cqw;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw;
}
.sm-km-an--a .an-a { position: relative; padding: 2.6cqw; display: flex; flex-direction: column; gap: 1.5cqw; }
.sm-km-an--a .an-foto {
  width: 8cqw; height: 8cqw; border-radius: 50%; flex: none;
  background: var(--km-vlak); display: grid; place-items: center; color: var(--km-stil);
}
.sm-km-an--a .an-foto .an-pop-ic { width: 5cqw; height: 5cqw; }
.sm-km-an--a .an-roep { font-size: 2.5cqw; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; color: var(--km-stil); }
.sm-km-an--a .an-grijs { display: flex; flex-direction: column; gap: 1.5cqw; opacity: 0; }
.sm-km-an--a .an-a1, .sm-km-an--a .an-a3 { filter: grayscale(1) opacity(.42); }
.sm-km-an--a .an-jij {
  border-color: var(--km-accent); translate: 0 -1.2cqw;
  box-shadow: 0 2cqw 5cqw color-mix(in srgb, var(--km-accent) 26%, transparent);
}
.sm-km-an--a .an-jij .an-foto { background: color-mix(in srgb, var(--km-accent) 18%, var(--km-vlak)); color: var(--km-accent); }
.sm-km-an--a .an-verhaal {
  position: absolute; left: 2.6cqw; right: 2.6cqw; top: 12.2cqw;
  font-size: 2.9cqw; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.sm-km-an--a .an-verhaal small { display: block; margin-top: .9cqw; font-size: 2.1cqw; font-weight: 700; color: var(--km-accent); }
.sm-km-an--a .an-kies {
  margin-top: auto; display: block; text-align: center; font-size: 2.4cqw; font-weight: 800;
  padding: 1.3cqw; border-radius: 9cqw; background: var(--km-accent); color: var(--an-knop-ink);
}
.sm-km-an--a .an-cursor { transform: translate(52cqw, 37cqw); }
.sm-km-an--a .an-bez { right: 50%; margin-right: -24cqw; bottom: .5cqw; }

.sm-km-an--a .an-a1 { animation: sm-km-an-op .6s var(--an-e) both .1s, sm-km-an-a-dim .6s ease both 2.9s; }
.sm-km-an--a .an-a2 { animation: sm-km-an-op .6s var(--an-e) both .2s, sm-km-an-a-jij .7s var(--an-e) both 2.9s; }
.sm-km-an--a .an-a3 { animation: sm-km-an-op .6s var(--an-e) both .3s, sm-km-an-a-dim .6s ease both 2.9s; }
.sm-km-an--a .an-bez { animation: sm-km-an-pop .5s var(--an-e) both .7s, sm-km-an-veer .5s var(--an-e) none 4.6s; }
.sm-km-an--a .an-jij .an-foto  { animation: sm-km-an-a-foto .6s ease both 2.9s; }
.sm-km-an--a .an-jij .an-grijs { animation: sm-km-an-uit .3s ease both 2.9s; }
.sm-km-an--a .an-verhaal { animation: sm-km-an-op .6s var(--an-e) both 3.2s; }
.sm-km-an--a .an-kies    { animation: sm-km-an-a-kies 1.1s var(--an-e) both 3.5s; }
.sm-km-an--a .an-cursor  { animation: sm-km-an-a-cursor 3.6s cubic-bezier(.45, 0, .25, 1) both .8s; }
.sm-km-an--a .an-g-voor  { animation: sm-km-an-uit .25s ease both 4.6s; }
.sm-km-an--a .an-g-na    { animation: sm-km-an-in .35s ease both 4.75s; }
.sm-km-an--a .an-bez-ic  { animation: sm-km-an-bez-ic .4s ease both 4.6s; }
@keyframes sm-km-an-a-dim { from { filter: grayscale(0) opacity(1); } }
@keyframes sm-km-an-a-jij { from { border-color: var(--km-hair); translate: 0 0; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .07); } }
@keyframes sm-km-an-a-foto { from { background: var(--km-vlak); color: var(--km-stil); } }
@keyframes sm-km-an-a-kies {
  0% { opacity: 0; transform: scale(.6); }
  30% { opacity: 1; transform: scale(1.05); }
  45% { transform: none; }
  65% { transform: scale(.9); }
  80%, 100% { transform: none; }
}
@keyframes sm-km-an-a-cursor {
  0% { opacity: 0; transform: translate(90cqw, 50cqw); }
  8% { opacity: 1; }
  22% { transform: translate(20cqw, 17cqw); }
  40% { transform: translate(82cqw, 17cqw); }
  58%, 75% { transform: translate(51cqw, 22cqw); }
  90% { transform: translate(52cqw, 37cqw); }
  95% { transform: translate(52cqw, 37cqw) scale(.84); }
  100% { transform: translate(52cqw, 37cqw); }
}

/* ---------- N: elke twijfel een rustig antwoord ---------- */
.sm-km-an--n .an-tel {
  position: absolute; left: 7cqw; top: 1cqw; width: 31cqw; height: 56cqw;
  display: flex; flex-direction: column; gap: 1.6cqw; padding: 5.4cqw 2.6cqw 2.6cqw;
  background: var(--km-vlak-2); border: .8cqw solid color-mix(in srgb, var(--km-ink) 86%, transparent);
  border-radius: 4.6cqw; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .14);
}
.sm-km-an--n .an-notch { position: absolute; left: 50%; top: 1.4cqw; width: 9cqw; height: 1.8cqw; margin-left: -4.5cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--km-ink) 86%, transparent); }
.sm-km-an--n .an-dik { height: 2.4cqw; }
.sm-km-an--n .an-blok {
  display: flex; align-items: center; gap: .8cqw; height: 7.2cqw; padding: 0 2cqw; border-radius: 1.8cqw;
  font-size: 2.2cqw; font-weight: 700; line-height: 1.15;
  background: color-mix(in srgb, var(--km-accent) 16%, var(--km-vlak-2));
  box-shadow: inset 0 0 0 1px var(--km-accent);
}
.sm-km-an--n .an-sterren { color: var(--an-ster); font-size: 2.6cqw; letter-spacing: .1cqw; }
.sm-km-an--n .an-bel {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 1.2cqw;
  height: 7cqw; border-radius: 9cqw; background: var(--km-accent); color: var(--an-knop-ink);
  font-size: 2.7cqw; font-weight: 800;
}
.sm-km-an--n .an-bel svg { width: 3cqw; height: 3cqw; fill: currentColor; }
.sm-km-an--n .an-vragen { position: absolute; left: 45cqw; right: 3cqw; top: 3cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 3.4cqw; }
.sm-km-an--n .an-vraag {
  display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.6cqw;
  border-radius: 3cqw 3cqw 3cqw .6cqw; background: var(--km-vlak-2);
  border: 1px solid var(--km-accent); font-size: 2.8cqw; font-weight: 700;
}
.sm-km-an--n .an-bez { right: 3cqw; bottom: 1cqw; }

.sm-km-an--n .an-tel { animation: sm-km-an-op .6s var(--an-e) both 0s; }
.sm-km-an--n .an-bez { animation: sm-km-an-pop .5s var(--an-e) both .4s, sm-km-an-veer .5s var(--an-e) none 5.1s; }
.sm-km-an--n .an-v1  { animation: sm-km-an-op .5s var(--an-e) both .9s, sm-km-an-n-ok .3s ease both 1.8s; }
.sm-km-an--n .an-b1  { animation: sm-km-an-n-licht .5s ease both 1.5s; }
.sm-km-an--n .an-v1 .an-vink { animation: sm-km-an-pop .4s var(--an-e) both 1.8s; }
.sm-km-an--n .an-v2  { animation: sm-km-an-op .5s var(--an-e) both 2.3s, sm-km-an-n-ok .3s ease both 3.2s; }
.sm-km-an--n .an-b2  { animation: sm-km-an-n-licht .5s ease both 2.9s; }
.sm-km-an--n .an-v2 .an-vink { animation: sm-km-an-pop .4s var(--an-e) both 3.2s; }
.sm-km-an--n .an-v3  { animation: sm-km-an-op .5s var(--an-e) both 3.7s, sm-km-an-n-ok .3s ease both 4.6s; }
.sm-km-an--n .an-b3  { animation: sm-km-an-n-licht .5s ease both 4.3s; }
.sm-km-an--n .an-v3 .an-vink { animation: sm-km-an-pop .4s var(--an-e) both 4.6s; }
.sm-km-an--n .an-g-voor { animation: sm-km-an-uit .25s ease both 5.1s; }
.sm-km-an--n .an-g-na   { animation: sm-km-an-in .35s ease both 5.25s; }
.sm-km-an--n .an-bez-ic { animation: sm-km-an-bez-ic .4s ease both 5.1s; }
.sm-km-an--n .an-bel { animation: sm-km-an-n-bel 1s var(--an-e) both 5.5s; }
@keyframes sm-km-an-n-ok { from { border-color: var(--km-hair); } }
@keyframes sm-km-an-n-licht { from { background: var(--km-vlak); box-shadow: inset 0 0 0 1px transparent; color: transparent; } }
@keyframes sm-km-an-n-bel {
  0% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--km-accent) 45%, transparent); }
  35% { transform: scale(1.07); box-shadow: 0 0 0 1.8cqw color-mix(in srgb, var(--km-accent) 0%, transparent); }
  60% { transform: scale(.94); }
  100% { transform: none; }
}

/* ---------- T: het goede gevoel gaat door ---------- */
.sm-km-an--t .an-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-km-an--t .an-draad { fill: none; stroke: var(--km-accent); stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.sm-km-an--t .an-mens {
  --x: 50; --y: 30; --s: 7cqw;
  position: absolute; width: var(--s); height: var(--s);
  left: calc(var(--x) * 1cqw - var(--s) / 2); top: calc(var(--y) * 1cqw - var(--s) / 2);
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--km-accent) 14%, var(--km-vlak-2));
  border: 1px solid color-mix(in srgb, var(--km-accent) 55%, transparent); color: var(--km-accent);
}
.sm-km-an--t .an-mens .an-pop-ic { width: 60%; height: 60%; }
.sm-km-an--t .an-m1 { --x: 20; --y: 40; --s: 11cqw; border-width: 2px; border-color: var(--km-accent); }
.sm-km-an--t .an-m2 { --x: 55; --y: 16; --s: 8cqw; }
.sm-km-an--t .an-m3 { --x: 55; --y: 45; --s: 8cqw; }
.sm-km-an--t .an-m4 { --x: 83; --y: 8;  --s: 6.4cqw; }
.sm-km-an--t .an-m5 { --x: 83; --y: 29; --s: 6.4cqw; }
.sm-km-an--t .an-m6 { --x: 83; --y: 50; --s: 6.4cqw; }
.sm-km-an--t .an-review {
  position: absolute; left: 4cqw; top: 1.5cqw; width: 34cqw; padding: 2cqw 2.6cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw;
}
.sm-km-an--t .an-rv-vraag { font-size: 2.5cqw; font-weight: 700; color: var(--km-stil); }
.sm-km-an--t .an-sterren i { font-style: normal; font-size: 3.9cqw; line-height: 1; color: var(--an-ster); display: inline-block; }
.sm-km-an--t .an-deel {
  font-size: 2.3cqw; font-weight: 800; padding: 1cqw 2cqw; border-radius: 9cqw;
  background: var(--km-accent); color: var(--an-knop-ink);
}
.sm-km-an--t .an-cursor { transform: translate(21cqw, 17.5cqw); }
.sm-km-an--t .an-bez--los { left: 4cqw; bottom: auto; top: 48.5cqw; }

.sm-km-an--t .an-m1     { animation: sm-km-an-pop .6s var(--an-e) both 0s; }
.sm-km-an--t .an-bez    { animation: sm-km-an-pop .5s var(--an-e) both .5s, sm-km-an-veer .5s var(--an-e) none 2.4s; }
.sm-km-an--t .an-review { animation: sm-km-an-op .6s var(--an-e) both .3s; }
.sm-km-an--t .an-sterren i { animation: sm-km-an-t-ster .45s var(--an-e) both; }
.sm-km-an--t .an-sterren i:nth-child(1) { animation-delay: .8s; }
.sm-km-an--t .an-sterren i:nth-child(2) { animation-delay: .92s; }
.sm-km-an--t .an-sterren i:nth-child(3) { animation-delay: 1.04s; }
.sm-km-an--t .an-sterren i:nth-child(4) { animation-delay: 1.16s; }
.sm-km-an--t .an-sterren i:nth-child(5) { animation-delay: 1.28s; }
.sm-km-an--t .an-cursor { animation: sm-km-an-t-cursor 1.1s var(--an-e) both 1.2s; }
.sm-km-an--t .an-deel   { animation: sm-km-an-druk .3s ease both 2.2s; }
.sm-km-an--t .an-g-voor { animation: sm-km-an-uit .25s ease both 2.4s; }
.sm-km-an--t .an-g-na   { animation: sm-km-an-in .35s ease both 2.55s; }
.sm-km-an--t .d1, .sm-km-an--t .d2 { animation: sm-km-an-teken .7s cubic-bezier(.65, 0, .35, 1) both 2.8s; }
.sm-km-an--t .an-m2 { animation: sm-km-an-pop .5s var(--an-e) both 3.4s; }
.sm-km-an--t .an-m3 { animation: sm-km-an-pop .5s var(--an-e) both 3.5s; }
.sm-km-an--t .d3, .sm-km-an--t .d4, .sm-km-an--t .d5 { animation: sm-km-an-teken .6s cubic-bezier(.65, 0, .35, 1) both 3.9s; }
.sm-km-an--t .an-m4 { animation: sm-km-an-pop .5s var(--an-e) both 4.45s; }
.sm-km-an--t .an-m5 { animation: sm-km-an-pop .5s var(--an-e) both 4.55s; }
.sm-km-an--t .an-m6 { animation: sm-km-an-pop .5s var(--an-e) both 4.65s; }
@keyframes sm-km-an-t-ster { from { color: var(--an-lijn); transform: scale(.6); } }
@keyframes sm-km-an-t-cursor {
  0% { opacity: 0; transform: translate(40cqw, 34cqw); }
  25% { opacity: 1; }
  82% { transform: translate(21cqw, 17.5cqw); }
  92% { transform: translate(21cqw, 17.5cqw) scale(.84); }
  100% { transform: translate(21cqw, 17.5cqw); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-km-an *, html:not(.sm-rustig):not(.sm-beweeg) .sm-km-an *::after { animation: none !important; }
}

/* geen los woord op de laatste regel */
.sm-km .sm-km-zin { text-wrap: pretty; }

/* mobiel: balance verdeelt alleen het stuk vóór een break-mobile, pretty houdt ook het stuk erna vrij van een los woord */
@media (max-width: 767px) { .sm-km .sm-km-ps { text-wrap: pretty; } }

/* knop onder de methode: tekst blijft wit bij hover (het thema kleurt links anders mee) */
.sm-km-slot a.sm-btn:hover, .sm-km-slot a.sm-btn:focus-visible, .sm-km-slot a.sm-btn:hover span { color: #fff; }

/* ---------- tekenregen aan (.sm-km--mx): ruimte voor het ontcijferen ----------
   De regen valt een halve seconde voor de tekst verschijnt en de tekst wordt in
   ongeveer 0,85 s leesbaar. Wat oud is, is dan al weg; wat erna komt, wacht. Zo
   gebeurt er nooit meer dan een ding tegelijk. */
.sm-km--mx .sm-km-an--k .an-kop-oud { animation: sm-km-an-uit .3s ease both 3s; }
.sm-km--mx .sm-km-an--k .an-kop-nieuw { animation: sm-km-an-op .6s var(--an-e) both 3.8s; }
.sm-km--mx .sm-km-an--k .an-kop-nieuw .an-mark { animation: sm-km-an-mark .7s cubic-bezier(.65, 0, .35, 1) both 4.65s; }
.sm-km--mx .sm-km-an--k .an-bez { animation: sm-km-an-pop .5s var(--an-e) both .8s, sm-km-an-veer .5s var(--an-e) none 5.05s; }
.sm-km--mx .sm-km-an--k .an-g-voor { animation: sm-km-an-uit .25s ease both 5.05s; }
.sm-km--mx .sm-km-an--k .an-g-na { animation: sm-km-an-in .35s ease both 5.2s; }
.sm-km--mx .sm-km-an--k .an-bez-ic { animation: sm-km-an-bez-ic .4s ease both 5.05s; }
.sm-km--mx .sm-km-an--l .an-bron { animation: sm-km-an-pop .45s var(--an-e) both 4.1s; }
.sm-km--mx .sm-km-an--l .an-bez { animation: sm-km-an-pop .5s var(--an-e) both 1s, sm-km-an-veer .5s var(--an-e) none 5.1s; }
.sm-km--mx .sm-km-an--l .an-g-voor { animation: sm-km-an-uit .25s ease both 5.1s; }
.sm-km--mx .sm-km-an--l .an-g-na { animation: sm-km-an-in .35s ease both 5.25s; }
.sm-km--mx .sm-km-an--l .an-bez-ic { animation: sm-km-an-bez-ic .4s ease both 5.1s; }
.sm-km--mx .sm-km-an--a .an-verhaal { animation: sm-km-an-op .6s var(--an-e) both 3.5s; }
.sm-km--mx .sm-km-an--a .an-kies { animation: sm-km-an-a-kies 1.1s var(--an-e) both 4.4s; }
.sm-km--mx .sm-km-an--a .an-bez { animation: sm-km-an-pop .5s var(--an-e) both .7s, sm-km-an-veer .5s var(--an-e) none 5.1s; }
.sm-km--mx .sm-km-an--a .an-g-voor { animation: sm-km-an-uit .25s ease both 5.1s; }
.sm-km--mx .sm-km-an--a .an-g-na { animation: sm-km-an-in .35s ease both 5.25s; }
.sm-km--mx .sm-km-an--a .an-bez-ic { animation: sm-km-an-bez-ic .4s ease both 5.1s; }
/* N: sterren en "op Google" op een regel */
.sm-km--mx .sm-km-an--n .an-b3 { white-space: nowrap; }

/* ---------- met avatar (.sm-km-an--john): de hoofdpersoon doet het werk ----------
   Het rondje met de avatar staat waar eerst het pijltje stond. Het script laat hem
   uit de tekens ontstaan (mx-wacht, dan mx-bouwt) en laat hem oplichten als hij code
   stuurt of krijgt (mx-actief). Zonder script staat de foto er gewoon. */
.sm-km-an .an-john {
  position: relative; display: block; justify-self: center; width: 18cqw; height: 18cqw; border-radius: 50%; overflow: hidden;
  background: #050605; box-shadow: 0 0 0 .35cqw #3DC78F, 0 0 3cqw rgba(61, 199, 143, .4);
  transition: box-shadow .3s ease, opacity .3s ease;
}
.sm-km-an .an-john img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.sm-km-an .an-john.mx-wacht { opacity: 0; }
.sm-km-an .an-john.mx-bouwt img { opacity: 0; }
.sm-km-an .an-john.mx-actief { box-shadow: 0 0 0 .35cqw #d2f65a, 0 0 4.5cqw rgba(210, 246, 90, .5); }
.sm-km-an .mx-actief.an-bub, .sm-km-an .an-koppen.mx-actief { transition: box-shadow .3s ease; box-shadow: 0 0 0 .3cqw rgba(61, 199, 143, .6); border-radius: 1.2cqw; }

/* K: woorden van de klant, naar John, naar de site */
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-k { grid-template-columns: 30cqw 19cqw 1fr; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-bub2 .an-mark { animation: sm-km-an-mark .8s cubic-bezier(.65, 0, .35, 1) both 2.5s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-kop-oud::after { animation: sm-km-an-streep .4s var(--an-e) both 3.8s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-kop-oud { animation: sm-km-an-uit .3s ease both 4.2s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-kop-nieuw { animation: sm-km-an-in .3s ease both 4.9s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-kop-nieuw .an-mark { animation: sm-km-an-mark .7s cubic-bezier(.65, 0, .35, 1) both 5.9s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-bez { animation: sm-km-an-pop .5s var(--an-e) both .8s, sm-km-an-veer .5s var(--an-e) none 6.4s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-g-voor { animation: sm-km-an-uit .25s ease both 6.4s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-g-na { animation: sm-km-an-in .35s ease both 6.55s; }
.sm-km--mx .sm-km-an--john.sm-km-an--k .an-bez-ic { animation: sm-km-an-bez-ic .4s ease both 6.4s; }

/* ---------- film met het poppetje (instelling film, sm-km-film.js) ---------- */
.sm-km-an--film .sm-km-film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* woorden in de kop in de accentkleur (veld kop_groen) */
.sm-km-kopaccent { color: var(--km-accent); }