/* Machinekamer-laag (v3 homepage). Bouwt voort op site.css-tokens.
   Eén motion-systeem ("de tape"): pulse-dot, feed-in, draw-underline.
   Alles staat volledig in de HTML; JS voegt alleen de tijd-dimensie toe. */

:root {
  --mk-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  --mk-groen: #4CAF7D;
  --mk-rand-donker: rgba(232, 238, 248, .1);
  --mk-tekst-donker: rgba(232, 238, 248, .78);
}

/* ── Merkgebaar 1: pulserende dot ─────────────────────────────────────── */
.mk-dot {
  position: relative;
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mk-groen);
  flex-shrink: 0;
  animation: mk-pols 2.2s ease-in-out infinite;
}
.mk-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--mk-groen);
  opacity: 0;
  animation: mk-ring 2.2s ease-out infinite;
}
.mk-dot-koper { background: var(--koper-hover); }
.mk-dot-koper::after { color: var(--koper-hover); }
.mk-dot-stil { animation: none; background: rgba(232,238,248,.35); }
.mk-dot-stil::after { content: none; }
@keyframes mk-pols { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mk-ring { 0% { transform: scale(.6); opacity: .7; } 70% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }

/* ── Merkgebaar 2: feed-in ────────────────────────────────────────────── */
@keyframes mk-feed-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mk-feed-uit { to { opacity: 0; transform: translateY(10px); } }

/* ── Merkgebaar 3: koperen handgetekende onderstreep ──────────────────── */
.mk-onderstreep {
  font-style: normal;
  white-space: nowrap;
  color: var(--koper-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6.5 C 28 2.5, 62 8, 118 4' fill='none' stroke='%23D97742' stroke-width='2.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .13em;
  padding-bottom: .08em;
}
html.js .mk-onderstreep { background-size: 0% .13em; animation: mk-draw .7s cubic-bezier(.2,.7,.2,1) .75s forwards; }
@keyframes mk-draw { to { background-size: 100% .13em; } }

/* ── Hero: rustige witte opening, de machinekamer als venster eronder ── */
.mk-hero {
  background: var(--wit);
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(26px, 3vw, 38px);
}
.mk-hero-kop { max-width: 790px; }
.mk-hero-kop h1 {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(40px, 7vw, 76px);
  line-height: .95; letter-spacing: -.04em;
  color: var(--navy); max-width: none;
}
.mk-sub-hero { font-size: clamp(16px, 1.8vw, 19px); color: var(--tekst-muted); margin-top: 22px; max-width: 560px; }
.mk-heldlink {
  color: var(--navy);
  border-bottom: 1px solid #C7D0DC;
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.mk-heldlink:hover { color: var(--koper); border-color: var(--koper); }
.mk-heldlink-wit { color: var(--koper); border-bottom-color: rgba(196, 98, 45, .5); }
.mk-byline { font-family: var(--font-mono); font-size: 13px; color: var(--tekst-muted); margin: 16px 0 4px; line-height: 1.5; }
.mk-byline a { color: var(--koper); border-bottom: 1px solid rgba(196, 98, 45, .35); }
.mk-byline-datum { opacity: .82; }
.mk-byline-leestijd { opacity: .82; }
.mk-cta-noot-licht {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--label);
  margin-top: 16px; max-width: none;
}
/* ── Nachtdienst (enige sticky set piece) ─────────────────────────────── */
.mk-nacht { position: relative; background: #081020; }
html.js .mk-nacht[data-stap] { height: 150vh; }
.mk-nacht-sticky {
  display: flex; align-items: center;
  background-color: #081020;
  background-image:
    linear-gradient(180deg, rgba(8,16,32,0) 0%, rgba(20,32,56,.5) 100%),
    var(--mk-noise);
  background-blend-mode: normal, multiply;
  padding: clamp(48px, 7vw, 90px) 0;
}
html.js .mk-nacht[data-stap] .mk-nacht-sticky { position: sticky; top: 0; min-height: 100svh; }
.mk-nacht-sentinels { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.mk-wrap { max-width: 1080px; margin: 0 auto; padding-left: var(--maat); padding-right: var(--maat); width: 100%; box-sizing: border-box; }
.mk-eyebrow-donker {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,238,248,.5);
  margin-bottom: 16px; max-width: none;
}
.mk-nacht-kop {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(30px, 4vw, 50px);
  color: #fff; max-width: none;
}
.mk-nacht-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(24px, 3.5vw, 44px);
}
.mk-nacht-kaarten { position: relative; }
.mk-nachtkaart {
  border-left: 2px solid var(--koper);
  background: rgba(232,238,248,.05);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
}
.mk-nachtkaart + .mk-nachtkaart { margin-top: 14px; }
.mk-nacht-tijd {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 14px; color: var(--koper-hover);
  letter-spacing: .08em;
}
.mk-nachtkaart p { color: var(--navy-licht); font-size: clamp(15px, 1.6vw, 17.5px); margin-top: 6px; max-width: 54ch; }
/* Statische payoff: alle nacht-events staan zichtbaar als gedimde tijdlijn,
   de actieve stap licht op tijdens het scrollen (nooit een leeg vlak). */
html.js .mk-nacht[data-stap] .mk-nacht-kaarten .mk-nachtkaart {
  opacity: .32; border-left-color: rgba(196,98,45,.3);
  transition: opacity .4s ease, border-color .4s ease, background-color .4s ease;
}
html.js .mk-nacht[data-stap="0"] .mk-nachtkaart[data-stap="0"],
html.js .mk-nacht[data-stap="1"] .mk-nachtkaart[data-stap="1"],
html.js .mk-nacht[data-stap="2"] .mk-nachtkaart[data-stap="2"],
html.js .mk-nacht[data-stap="3"] .mk-nachtkaart[data-stap="3"],
html.js .mk-nacht[data-stap="4"] .mk-nachtkaart[data-stap="4"],
html.js .mk-nacht[data-stap="5"] .mk-nachtkaart[data-stap="5"] { opacity: 1; border-left-color: var(--koper); background: rgba(232,238,248,.09); }
.mk-nacht-klok {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(56px, 9vw, 116px);
  color: var(--koper-hover);
  text-align: right;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
html:not(.js) .mk-nacht-klok { display: none; }
.mk-nacht-slot {
  font-family: var(--font-kop); font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--navy-licht);
  margin-top: clamp(22px, 3vw, 36px); max-width: none;
}
.mk-bron { font-family: var(--font-mono); font-size: 11px; color: rgba(232,238,248,.4); margin-top: 12px; max-width: none; }
.mk-bron-licht { color: var(--label); }

/* ── Generieke lichte secties ─────────────────────────────────────────── */
.mk-sectie { padding: clamp(40px, 5vw, 70px) 0; background: var(--wit); }
.mk-sectie-grijs { background: #F3F6FA; }
.mk-sectie-donker {
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 50% 40% at 12% 8%, rgba(196,98,45,.1), transparent 60%), var(--mk-noise);
  background-blend-mode: normal, multiply;
}
.mk-eyebrow-licht {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--label);
  margin-bottom: 16px; max-width: none;
}
.mk-kop {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.1;
  color: var(--navy); max-width: none;
}
.mk-kop-wit { color: #fff; }
.mk-intro { color: var(--tekst-muted); font-size: clamp(15.5px, 1.7vw, 18px); margin-top: 16px; max-width: 58ch; }
.mk-intro-donker { color: var(--mk-tekst-donker); }

/* Entree-animatie op kaarten en blokken, puur additief via CSS scroll-driven
   (geen JS-afhankelijkheid). Content is standaard zichtbaar; zonder support of
   bij reduced-motion draait er niets en blijft alles gewoon staan. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mk-tijdlijn > li, .mk-alternatief, .mk-mijkaart, .mk-monitor, .vg {
      animation: svw-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
  }
}

/* ── De race ──────────────────────────────────────────────────────────── */
.mk-race {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: clamp(24px, 3vw, 38px);
}
.mk-race-paneel { border-radius: 16px; padding: clamp(20px, 2.5vw, 30px); min-height: 300px; }
.mk-race-hand { background: #FBFAF7; border: 1px solid #E4E0D6; }
.mk-race-machine { background-color: var(--navy); background-image: var(--mk-noise); background-blend-mode: multiply; border: 1px solid #22314A; }
.mk-race-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 16px; max-width: none;
}
.mk-race-hand .mk-race-label { color: var(--label); }
.mk-race-machine .mk-race-label { color: rgba(232,238,248,.5); }
.mk-race-doc { border-left: 2px solid #E4E0D6; padding-left: 16px; }
.mk-race-doc p { font-size: 15px; color: var(--tekst-muted); line-height: 1.75; max-width: none; }
.mk-race-doc .mk-caret { display: inline-block; width: 8px; height: 1.1em; background: var(--tekst-muted); vertical-align: text-bottom; animation: mk-caret 1.1s steps(2) infinite; }
@keyframes mk-caret { 50% { opacity: 0; } }
[data-race].mk-race-armed:not(.mk-race-aan) .mk-race-feed li { opacity: 0; animation: none; }
[data-race].mk-race-aan .mk-race-feed li { animation: mk-feed-in .4s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 500ms); }
.mk-race-telemetrie {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mk-groen);
  border: 1px solid rgba(76,175,125,.4);
  border-radius: 999px;
  padding: 5px 14px;
  margin-top: 18px; max-width: none;
}
[data-race].mk-race-armed:not(.mk-race-aan) .mk-race-telemetrie { opacity: 0; }
[data-race].mk-race-aan .mk-race-telemetrie { animation: mk-feed-in .4s cubic-bezier(.16,1,.3,1) 2.8s both; }
.mk-race-moraal { font-family: var(--font-kop); font-weight: 600; font-size: clamp(17px, 2vw, 21px); color: var(--navy); margin-top: 24px; max-width: none; }

/* ── Tijdlijn en rekensom ─────────────────────────────────────────────── */
.mk-tijdlijn {
  list-style: none; padding: 0;
  margin-top: clamp(26px, 3.5vw, 42px);
  border-left: 2px solid #D9E1EC;
}
.mk-tijdlijn li { position: relative; padding: 0 0 clamp(26px, 3vw, 38px) clamp(22px, 3vw, 34px); }
.mk-tijdlijn li::before {
  content: "";
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--koper);
  border: 2px solid var(--wit);
}
.mk-tijdlijn-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--koper);
  border: 1px solid rgba(196,98,45,.45);
  border-radius: 999px;
  padding: 6px 15px;
}
.mk-tijdlijn h3 { font-family: var(--font-kop); font-weight: 600; font-size: clamp(19px, 2.2vw, 23px); color: var(--navy); margin-top: 10px; }
.mk-tijdlijn p { color: var(--tekst-muted); font-size: 15.5px; margin-top: 8px; max-width: 60ch; }
.mk-rekensom-kop { font-family: var(--font-kop); font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); color: var(--navy); margin-top: clamp(30px, 4vw, 52px); }
.mk-rekensom {
  display: grid;
  grid-template-columns: 1fr 1fr 1.12fr;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}
.mk-alternatief {
  background: var(--wit);
  border: 1px solid rgba(11,21,38,.1);
  border-radius: 14px;
  padding: 22px 24px;
}
.mk-alternatief summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-kop); font-weight: 600; font-size: 17px;
  color: var(--navy);
}
.mk-alternatief summary::-webkit-details-marker { display: none; }
.mk-alternatief ul { list-style: none; padding: 0; margin-top: 12px; }
.mk-alternatief li {
  position: relative;
  padding: 8px 0 8px 24px;
  border-top: 1px solid var(--haarlijn);
  font-size: 14px; color: var(--tekst-muted);
}
.mk-alternatief li::before {
  content: "";
  position: absolute; left: 2px; top: 13px;
  width: 11px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%238494AB' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.mk-mijkaart {
  position: relative;
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 70% 40% at 80% 0%, rgba(196,98,45,.16), transparent 60%), var(--mk-noise);
  background-blend-mode: normal, multiply;
  border: 1px solid #22314A;
  border-radius: 16px;
  padding: 26px 28px;
  transform: translateY(-14px);
  box-shadow: 0 24px 48px rgba(11,21,38,.22);
}
.mk-mijkaart-kop { font-family: var(--font-kop); font-weight: 600; font-size: 18px; color: #fff; max-width: none; }
.mk-mijkaart ul { list-style: none; padding: 0; margin-top: 12px; }
.mk-mijkaart li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid rgba(232,238,248,.1);
  font-size: 14.5px; color: var(--navy-licht);
}
.mk-mijkaart li::before {
  content: "";
  position: absolute; left: 2px; top: 14px;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23D97742' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.mk-mijkaart .mk-btn { margin-top: 18px; }
.mk-trustregel {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
  margin-top: 26px; max-width: none;
}
.mk-trustregel-donker { color: rgba(232,238,248,.68); }
.mk-slot-naam { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-gedempt); margin-bottom: 14px; max-width: none; }

/* ── Toezicht ─────────────────────────────────────────────────────────── */
.mk-monitor {
  max-width: 880px;
  margin-top: clamp(26px, 3.5vw, 42px);
  background: rgba(232,238,248,.04);
  border: 1px solid var(--mk-rand-donker);
  border-radius: 16px;
  overflow: hidden;
}
.mk-checks { list-style: none; padding: 8px 24px 14px; margin: 0; }
.mk-checks li {
  display: grid;
  grid-template-columns: 14px 150px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(232,238,248,.07);
  font-size: 14.5px; color: var(--mk-tekst-donker);
}
.mk-checks li:first-child { border-top: 0; }
.mk-checks strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-licht); font-weight: 500; }
.mk-ownership { color: var(--mk-tekst-donker); font-size: clamp(15.5px, 1.7vw, 18px); margin-top: 26px; max-width: 62ch; }

/* ── Logowal ──────────────────────────────────────────────────────────── */
.mk-logowal {
  position: relative;
  overflow: hidden;
  margin-top: clamp(22px, 3vw, 34px);
}
/* Vervaagrand als witte overlay, niet als mask-image: in macOS Safari liet een
   mask op deze wand soms een hele tegel (~512 px) van de bewegende track leeg. */
.mk-logowal::before, .mk-logowal::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6%;
  z-index: 1; pointer-events: none;
}
.mk-logowal::before { left: 0; background: linear-gradient(90deg, var(--wit), rgba(255,255,255,0)); }
.mk-logowal::after { right: 0; background: linear-gradient(270deg, var(--wit), rgba(255,255,255,0)); }
.mk-logo-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 66px);
  width: max-content;
  animation: mk-logoloop 42s linear infinite;
  will-change: transform;
}
/* trailing spacer = 1 gap, zodat translateX(-50%) precies op de start van de
   tweede helft landt (naadloze loop, geen halve-gap-sprong). */
.mk-logo-track::after { content: ""; flex: 0 0 0; }
.mk-logowal:hover .mk-logo-track { animation-play-state: paused; }
.mk-logowal figure { margin: 0; flex: 0 0 auto; text-align: center; }
/* De balk beweegt zelf; logo's niet per stuk in-reveal-en (dat zette ze op opacity 0). */
html.js .mk-logowal .mk-reveal { opacity: 1; transform: none; transition: none; }
@keyframes mk-logoloop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mk-logo-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 26px 40px; }
  .mk-logowal::before, .mk-logowal::after { display: none; }
}
.mk-logowal img {
  max-height: 40px; max-width: 150px;
  width: auto; height: auto;
  margin: 0;
  opacity: .9;
  transition: opacity .25s ease;
}
.mk-logowal img:hover { opacity: 1; }
.mk-logowal figcaption {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--koper);
  margin-top: 10px;
}
.mk-logo-combi { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--label); }
.mk-logo-combi img { max-height: 26px; }
/* Rond beeldmerk (illustratie) leest pas vanaf ~34 px, 26 px wordt een vlek. */
.mk-logo-combi img.mk-logo-rond { max-height: 34px; }

/* ── Capture-formulieren ──────────────────────────────────────────────── */
.mk-capture { margin-top: 26px; max-width: 520px; }
.mk-capture-label { display: block; font-size: 14.5px; color: var(--mk-tekst-donker); }
.mk-capture-rij { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mk-capture-rij input[type="email"] {
  flex: 1; min-width: 220px;
  font-family: var(--font-body); font-size: 15px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(232,238,248,.3);
  background: rgba(232,238,248,.06);
  color: var(--navy-licht);
  min-height: 44px;
}
.mk-capture-rij input[type="email"]::placeholder { color: rgba(232,238,248,.4); }
.mk-capture-rij input[type="email"]:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.mk-capture-noot { font-family: var(--font-mono); font-size: 11px; color: rgba(232,238,248,.45); margin-top: 10px; max-width: none; }
.mk-capture .mk-succes {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--mk-groen);
  margin-top: 12px;
}
.mk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mk-capture-scan { color: var(--navy-licht); }
.mk-capture-scan .mk-capture-label { color: var(--navy-licht); }

/* Navy gate-band: geeft de mk-capture (lichte tekst) een donkere ondergrond op
   een verder lichte pagina, zelfde recept als de gids-gate. */
.mk-gate { margin-top: 26px; max-width: 620px; border: 1px solid var(--mk-rand-donker);
  border-radius: 18px; padding: 30px; background-color: var(--navy);
  background-image: radial-gradient(ellipse 60% 50% at 90% 6%, rgba(196,98,45,.14), transparent 60%), var(--mk-noise); }
.mk-gate .mk-capture { margin-top: 0; }
.mk-gate-tekst { font-size: 15.5px; line-height: 1.6; color: var(--mk-tekst-donker); margin: 0 0 20px; max-width: none; }
@media (max-width: 640px) { .mk-gate { padding: 20px; } }

/* Belofte-veilige opt-in onder de scan-capture (donkere context, lichte tekst) */
.mk-capture-optin { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.mk-capture-optin input[type="checkbox"] { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--koper); flex-shrink: 0; cursor: pointer; }
.mk-capture-optin span { font-size: 13px; line-height: 1.45; color: var(--mk-tekst-donker); }

/* ── Slotband ─────────────────────────────────────────────────────────── */
.mk-slot { padding: clamp(18px, 2.5vw, 36px); background: var(--wit); }
.mk-slot-band {
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse 55% 45% at 88% 8%, rgba(196,98,45,.14), transparent 60%),
    var(--mk-noise);
  background-blend-mode: normal, multiply;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(36px, 5.5vw, 90px);
}
.mk-slot-grid {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1080px; margin: 0 auto;
}
.mk-slot-foto {
  width: 100%; height: auto;
  border-radius: 14px;
  outline: 1px solid rgba(217,119,66,.5);
  outline-offset: 8px;
}
.mk-capaciteit {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--koper-hover);
  margin-top: 22px; max-width: none;
}
/* Peildatum bij de teller: schaarste is alleen geloofwaardig met een datum. */
.mk-capaciteit .mk-cap-stand { opacity: .55; }
.mk-slot .mk-acties { margin-top: 22px; }

/* ── Footer als console ───────────────────────────────────────────────── */
.mk-footer {
  background-color: #081020;
  background-image: var(--mk-noise);
  padding-top: clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.mk-footer-console {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--koper-hover);
  margin-bottom: clamp(28px, 4vw, 44px); max-width: none;
  min-height: 1.4em;
}
.mk-footer-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  padding-bottom: clamp(30px, 4vw, 48px);
}
.mk-footer-kop {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(232,238,248,.4);
  margin-bottom: 12px; max-width: none;
}
.mk-footer-kolommen a, .mk-footer-kolommen p { display: block; font-size: 14px; color: var(--mk-tekst-donker); margin: 0 0 8px; max-width: none; }
.mk-footer-kolommen a { transition: color .2s ease; }
.mk-footer-kolommen a:hover { color: var(--koper-hover); }
.mk-footer-status { display: flex; align-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mk-footer-status .mk-dot { margin-right: 10px; }
.mk-wordmark {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(64px, 15.5vw, 230px);
  line-height: .78;
  color: rgba(232,238,248,.055);
  white-space: nowrap;
  text-align: center;
  margin: 0 -2vw -0.06em;
  max-width: none;
  user-select: none;
}

/* ── Responsief ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mk-hero { overflow-x: clip; }
  .mk-hero-kop h1 br { display: none; }
  .mk-console { min-width: 0; }
  .mk-nacht-stage { grid-template-columns: 1fr; }
  .mk-nacht-klok { display: none; }
  html.js .mk-nacht[data-stap] { height: 130vh; }
  .mk-race { grid-template-columns: 1fr; }
  .mk-rekensom { grid-template-columns: 1fr; }
  .mk-mijkaart { transform: none; order: -1; }
  .mk-slot-grid { grid-template-columns: 1fr; }
  .mk-slot-foto { max-width: 220px; }
  .mk-checks li { display: block; position: relative; padding-left: 26px; }
  .mk-checks li .mk-dot { position: absolute; left: 2px; top: 18px; }
  .mk-checks strong { display: block; margin-bottom: 4px; }
}

/* ── Reduced motion: eindstaat, geen tape ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mk-dot, .mk-dot::after { animation: none; opacity: 1; }
  html.js .mk-feed li { animation: none; opacity: 1; }
  html.js .mk-onderstreep { animation: none; background-size: 100% .13em; }
  html.js .mk-nacht[data-stap] { height: auto; }
  html.js .mk-nacht[data-stap] .mk-nacht-sticky { position: static; min-height: 0; }
  html.js .mk-nacht[data-stap] .mk-nacht-kaarten .mk-nachtkaart { position: static; transform: none; opacity: 1; margin-top: 14px; pointer-events: auto; }
  .mk-nacht-klok { display: none; }
  [data-race].mk-race-armed:not(.mk-race-aan) .mk-race-feed li { opacity: 1; }
  [data-race].mk-race-armed:not(.mk-race-aan) .mk-race-telemetrie { opacity: 1; }
  .mk-race-doc .mk-caret { display: none; }
  html.js .mk-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Herstel: knoppen en feed (gebruikt door hero-CTA's en de race) ────── */
.mk-acties { display: flex; gap: 18px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.mk-btn {
  display: inline-block;
  font-weight: 600; font-size: 15px;
  font-family: var(--font-body);
  color: var(--koper-tekst);
  background: var(--koper);
  padding: 13px 26px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  min-height: 44px;
  transition: background-color .2s ease, transform .2s ease;
}
.mk-btn:hover { background: var(--koper-hover); color: var(--koper-tekst); transform: translateY(-2px); }
.mk-btn-wit { background: #fff; color: var(--navy); }
.mk-btn-wit:hover { background: var(--navy-licht); color: var(--navy); }
.mk-btn-omrand { background: transparent; border: 1px solid rgba(232,238,248,.4); color: var(--navy-licht); }
.mk-btn-omrand:hover { background: var(--koper); border-color: var(--koper); color: var(--koper-tekst); }
.mk-feed { list-style: none; padding: 0; margin: 0; }
.mk-feed li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-top: 1px solid rgba(232,238,248,.07);
  font-size: 13.5px; color: var(--mk-tekst-donker);
}
.mk-feed li:first-child { border-top: 0; }
.mk-tijd { font-family: var(--font-mono); font-size: 12px; color: var(--koper-hover); flex-shrink: 0; }
.mk-badge {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mk-groen);
}

/* ── Het dashboard-venster (de demo als hart van de hero) ─────────────── */
.mk-console { margin-top: clamp(30px, 4vw, 52px); }
.mk-console.mk-wrap { max-width: 1200px; }
.db {
  background: #FFFFFF;
  border: 1px solid #DEE5EE;
  border-radius: 16px;
  box-shadow: 0 34px 80px rgba(11,21,38,.16), 0 4px 14px rgba(11,21,38,.06);
  overflow: hidden;
  font-family: var(--font-body);
}
.db-top {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 22px;
  border-bottom: 1px solid #E8ECF2;
  background: #FBFCFE;
}
.db-merk {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 14px; color: var(--navy);
}
.db-merk svg { color: var(--koper); }
.db-datum { font-size: 13px; color: var(--tekst-muted); }
.db-user { margin-left: auto; font-size: 12.5px; color: var(--tekst-muted); background: #F0F3F8; border-radius: 999px; padding: 5px 14px; }
.db-body { display: grid; grid-template-columns: 200px 1fr; }
.db-zijbalk {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
  border-right: 1px solid #E8ECF2;
  background: #FBFCFE;
}
.db-zijbalk span {
  font-size: 13.5px; color: var(--tekst-muted);
  padding: 8px 12px; border-radius: 8px;
}
.db-zijbalk .actief { background: var(--navy); color: var(--navy-licht); font-weight: 500; }
.db-main { padding: 22px 24px 18px; min-width: 0; }
.db-groet h2 { font-family: var(--font-kop); font-weight: 600; font-size: 19px; color: var(--navy); max-width: none; }
.db-groet p { font-size: 13.5px; color: var(--tekst-muted); margin-top: 3px; }
.db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.db-kpi {
  border: 1px solid #E8ECF2; border-radius: 12px;
  padding: 13px 15px 10px;
  min-width: 0;
}
.db-kpi-label { display: block; font-size: 11.5px; color: var(--tekst-muted); }
.db-kpi-cijfer { display: block; font-family: var(--font-kop); font-weight: 800; font-size: clamp(18px, 1.8vw, 24px); color: var(--navy); margin-top: 2px; white-space: nowrap; }
.db-kpi-delta { display: block; font-size: 11px; margin-top: 2px; }
.db-plus { color: #2E7D53; }
.db-let { color: var(--koper); }
.db-spark { width: 100%; height: 22px; margin-top: 8px; color: #B9C6D8; }
.db-onder { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-top: 12px; }
.db-grafiek, .db-klaargezet {
  border: 1px solid #E8ECF2; border-radius: 12px;
  padding: 15px 16px;
  min-width: 0;
}
.db-grafiek { display: flex; flex-direction: column; }
.db-blok-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.db-blok-kop h3 { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--navy); }
.db-blok-kop span { font-size: 11.5px; color: var(--label); }
.db-grafiek svg { width: 100%; height: 150px; display: block; flex: 1; }
.db-grafiek-voet { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: var(--tekst-muted); }
.db-grafiek-voet span { display: inline-flex; align-items: center; gap: 7px; }
.db-lijn-echt, .db-lijn-verwacht { display: inline-block; width: 18px; height: 0; border-top: 2px solid #1B2A41; }
.db-lijn-verwacht { border-top: 2px dashed var(--koper); }
.db-taak { border-top: 1px solid #EEF2F7; padding: 11px 0; }
.db-taak:first-of-type { border-top: 0; padding-top: 2px; }
.db-taak-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.db-sterren { color: #E0A93E; font-size: 12px; letter-spacing: 2px; }
.db-taak-tijd { font-size: 11px; color: var(--label); }
.db-taak-type { font-size: 11px; color: var(--tekst-muted); background: #F0F3F8; border-radius: 999px; padding: 2px 10px; }
.db-taak-bron { font-size: 13px; color: var(--inkt); margin-top: 6px; max-width: none; }
.db-taak-concept { font-size: 12.5px; color: var(--tekst-muted); margin-top: 4px; max-width: none; }
.db-taak-acties { display: flex; gap: 8px; margin-top: 9px; }
.db-knopje {
  font-size: 12px; font-weight: 600;
  color: #fff; background: var(--navy);
  border-radius: 8px; padding: 6px 12px;
}
.db-knopje-stil { color: var(--tekst-muted); background: #F0F3F8; }
.db-taak-af .db-taak-concept::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%232E7D53' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
.db-voet {
  display: flex; gap: 22px; align-items: center;
  padding: 10px 22px;
  border-top: 1px solid #E8ECF2;
  background: #FBFCFE;
  font-size: 12px; color: var(--tekst-muted);
  flex-wrap: wrap;
}
.db-voet > span { display: inline-flex; align-items: center; gap: 8px; }

/* ── Product-vignetten: kleine echte interfaces ───────────────────────── */
.vg-rij {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(28px, 4vw, 46px);
}
.vg { min-width: 0; }
.vg-frame {
  background: #F7F9FC;
  border: 1px solid #E4EAF2;
  border-radius: 14px;
  padding: 14px;
}
.vg-frame-kop {
  font-size: 12px; font-weight: 600; color: var(--tekst-muted);
  margin-bottom: 10px; padding-left: 2px;
}
.vg-chat, .vg-review, .vg-mail {
  background: #fff;
  border: 1px solid #E8ECF2;
  border-radius: 10px;
  padding: 14px;
}
.vg-vraag {
  font-size: 13px; color: var(--navy);
  background: #EFF3F9;
  border-radius: 12px 12px 12px 4px;
  padding: 9px 13px;
  max-width: 85%;
}
.vg-antwoord {
  font-size: 13px; color: #fff;
  background: var(--navy);
  border-radius: 12px 12px 4px 12px;
  padding: 10px 13px;
  margin: 10px 0 0 auto;
  max-width: 88%;
}
.vg-chat-voet { font-size: 11px; color: var(--label); margin-top: 10px; max-width: none; }
.vg-review-tekst { font-size: 13px; color: var(--inkt); margin-top: 8px; max-width: none; }
.vg-review-concept { font-size: 12.5px; color: var(--tekst-muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E1E7EF; max-width: none; }
.vg-mail-regel { font-size: 12px; color: var(--tekst-muted); max-width: none; }
.vg-mail-regel strong { color: var(--navy); font-weight: 600; }
.vg-mail-body { border-top: 1px solid #EEF2F7; margin-top: 8px; padding-top: 9px; }
.vg-mail-body p { font-size: 12.5px; color: var(--inkt); line-height: 1.6; max-width: none; }
.vg h3 { font-family: var(--font-kop); font-weight: 600; font-size: clamp(18px, 1.9vw, 21px); color: var(--navy); margin-top: 18px; }
.vg > p { font-size: 14.5px; color: var(--tekst-muted); margin-top: 8px; max-width: none; }

.mk-logokop {
  font-size: 14px; color: var(--tekst-muted);
  max-width: none;
}
.mk-check-slot strong { color: var(--mk-groen); }

/* ── Responsief: dashboard en vignetten ───────────────────────────────── */
@media (max-width: 1080px) {
  .db-zijbalk { display: none; }
  .db-body { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .db-kpis { grid-template-columns: 1fr 1fr; }
  .db-onder { grid-template-columns: 1fr; }
  .db-user { display: none; }
  .vg-rij { grid-template-columns: 1fr; }
}

/* ── Pijn-herkenning: de rommelige maandagochtend als volle mailbox ───── */
.mk-herken-kop { max-width: 640px; }
.inbox {
  margin-top: clamp(26px, 3.5vw, 42px);
  max-width: 780px;
  background: #FFFFFF;
  border: 1px solid #E1E7F0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11,21,38,.10);
  overflow: hidden;
}
.inbox-top {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid #EDF1F6;
  background: #FBFCFE;
}
.inbox-titel { font-weight: 600; font-size: 14px; color: var(--navy); }
.inbox-tel {
  font-size: 11.5px; font-weight: 600; color: #B23B3B;
  background: #FBECEC; border-radius: 999px; padding: 3px 11px;
}
.inbox-tijd { margin-left: auto; font-size: 12.5px; color: var(--tekst-muted); }
.inbox-lijst { list-style: none; padding: 0; margin: 0; }
.inbox-rij {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid #F0F3F8;
}
.inbox-rij:first-child { border-top: 0; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--koper); }
.inbox-dot-rood { background: #C4362F; }
.inbox-dot-leeg { background: transparent; border: 1px solid #C7D0DC; }
.inbox-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inbox-van { font-size: 12px; color: var(--tekst-muted); }
.inbox-onderwerp {
  font-size: 14.5px; color: var(--inkt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ongelezen .inbox-van { color: var(--navy); font-weight: 600; }
.ongelezen .inbox-onderwerp { font-weight: 600; color: var(--navy); }
.inbox-flag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--tekst-muted);
  background: #F0F3F8; border-radius: 6px; padding: 4px 9px;
  white-space: nowrap;
}
.inbox-flag-rood { color: #B23B3B; background: #FBECEC; }
.inbox-t { font-size: 12px; color: var(--label); white-space: nowrap; }
.inbox-voet {
  font-size: 12.5px; color: var(--label);
  padding: 12px 20px;
  border-top: 1px solid #F0F3F8;
  background: #FBFCFE;
  max-width: none;
}
.mk-herken-slot { font-size: clamp(15.5px, 1.7vw, 18px); color: var(--tekst-muted); margin-top: clamp(22px, 3vw, 32px); max-width: 62ch; }
/* Groen concept-antwoord-paneel onder de inbox: de pijn is al opgelost, het
   antwoord staat klaar (Sem: laat zien dat er automatisch een concept klaarstaat). */
.inbox-oplossing { margin-top: 16px; background: rgba(76,175,125,.06); border: 1px solid rgba(76,175,125,.3); border-radius: 14px; padding: 18px 20px; }
.inbox-oplossing-kop { display: flex; align-items: center; gap: 11px; font-family: var(--font-kop); font-weight: 600; font-size: clamp(15px, 1.7vw, 17px); color: var(--navy); max-width: none; }
.inbox-check { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--mk-groen); color: #fff; align-items: center; justify-content: center; flex-shrink: 0; }
.inbox-check svg { width: 15px; height: 15px; }
.inbox-concept { margin-top: 13px; background: var(--wit); border: 1px solid var(--haarlijn); border-left: 3px solid var(--mk-groen); border-radius: 8px; padding: 13px 15px; }
.inbox-concept-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-groen); }
.inbox-concept-tekst { font-size: 14.5px; color: var(--inkt); line-height: 1.5; margin-top: 7px; max-width: none; }
.inbox-concept-status { display: block; font-size: 12.5px; color: var(--tekst-muted); margin-top: 9px; }
@media (max-width: 640px) {
  .inbox-rij { grid-template-columns: 10px minmax(0, 1fr) auto; row-gap: 7px; align-items: start; }
  .inbox-dot { grid-column: 1; grid-row: 1; margin-top: 5px; }
  .inbox-mid { grid-column: 2; grid-row: 1; }
  .inbox-t { grid-column: 3; grid-row: 1; }
  .inbox-flag { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
}
.vg-pijn {
  font-style: italic;
  font-size: 14px;
  color: var(--tekst-muted);
  margin-top: 18px;
  max-width: none;
}
.vg-pijn + h3 { margin-top: 6px; }

/* ── Koppelingen-vignet (hoofddienst) + opstarttarief ─────────────────── */
.vg-koppel { background: #fff; border: 1px solid #E8ECF2; border-radius: 10px; padding: 4px 14px 12px; }
.vg-sys { list-style: none; padding: 0; margin: 0; }
.vg-sys li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F0F3F8; font-size: 13.5px; color: var(--inkt); }
.vg-sys li:first-child { border-top: 0; }
.vg-sys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-groen); flex-shrink: 0; }
.vg-sys li span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--label); }
.vg-koppel-voet { font-size: 11.5px; color: var(--koper); margin-top: 10px; padding-top: 9px; border-top: 1px dashed #E1E7EF; max-width: none; }
.mk-opstart { font-size: 14px; color: var(--tekst-muted); margin-top: 20px; max-width: 66ch; font-style: italic; }

/* Case-link onder de logowal */
.mk-caselink { margin-top: clamp(22px, 3vw, 34px); font-size: 15px; }

/* ── Hero-principe + businesscase-richtlijn ───────────────────────────── */
.mk-principe { margin-top: 16px; font-size: 15px; color: var(--tekst-muted); font-style: italic; max-width: 54ch; }
.mk-cta-uitleg { margin-top: 14px; font-size: 14px; color: var(--tekst-muted); max-width: 48ch; line-height: 1.5; }
@media (max-width: 640px) {
  .mk-hero { padding-top: 25px; }
  .mk-sub-hero { margin-top: 17px; line-height: 1.58; }
  .mk-principe { margin-top: 12px; font-size: 14px; line-height: 1.5; }
  .mk-cta-uitleg { display: none; }
  .mk-acties { margin-top: 20px; gap: 10px 16px; }
  .mk-heldlink { display: inline-flex; align-items: center; min-height: 44px; }
}
.mk-richtlijn {
  margin-top: clamp(22px, 3vw, 32px);
  padding: 16px 20px;
  border-left: 3px solid var(--koper);
  background: #F5F8FC;
  border-radius: 0 10px 10px 0;
  font-size: 16px; color: var(--inkt);
  max-width: 72ch;
}
.mk-richtlijn-tag {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--koper);
  margin-bottom: 6px;
}

/* ── ROI-rekenhulp ────────────────────────────────────────────────────── */
.rk {
  margin-top: clamp(26px, 3.5vw, 40px);
  max-width: 780px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1px solid var(--haarlijn);
  border-radius: 16px;
  overflow: hidden;
}
.rk-titel {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--label);
  padding: 16px 24px 0; max-width: none;
}
.rk-invoer { padding: 12px 24px 24px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.rk-veld { display: flex; flex-direction: column; gap: 8px; }
.rk-veld > span { font-size: 14px; color: var(--tekst-muted); }
.rk-veld input {
  font-family: var(--font-kop); font-weight: 700; font-size: 26px;
  color: var(--navy);
  border: 0; border-bottom: 2px solid var(--haarlijn);
  padding: 4px 2px; width: 100%;
  background: transparent;
}
.rk-veld input:focus-visible { outline: 0; border-bottom-color: var(--koper); }
.rk-euro { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-kop); font-weight: 700; font-size: 26px; color: var(--navy); }
.rk-euro input { width: 100%; }
.rk-uit {
  background-color: var(--navy);
  background-image: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(196,98,45,.16), transparent 60%), var(--mk-noise);
  padding: clamp(22px, 3vw, 32px) 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.rk-groot { font-family: var(--font-kop); font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); color: #fff; line-height: 1; white-space: nowrap; }
.rk-label { font-size: 14px; color: var(--mk-tekst-donker); margin-top: 8px; }
.rk-noot { font-family: var(--font-mono); font-size: 11.5px; color: var(--koper-hover); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mk-rand-donker); }
@media (max-width: 640px) {
  .rk { grid-template-columns: 1fr; }
}

/* FOMO, geloofwaardig: doorlopende maand-bloeding in de rekenhulp */
.rk-bleed { margin-top: 13px; font-size: 14.5px; color: var(--navy-licht); line-height: 1.45; }
.rk-bleed strong { font-family: var(--font-kop); font-weight: 700; color: var(--koper-hover); }
/* Concurrentie-inloop, nette verliesaversie */
.mk-inloop { margin-top: 30px; font-family: var(--font-kop); font-weight: 600; font-size: clamp(17px, 2.1vw, 21px); color: var(--navy); line-height: 1.42; max-width: 44ch; }

/* Site-scan: lees de site van de bezoeker, stel automatiseringen voor (machinekamer) */
.sitescan { background-color: var(--navy); background-image: var(--mk-noise); background-blend-mode: multiply; border: 1px solid #22314A; border-top: 3px solid var(--koper);
  border-radius: 18px; overflow: hidden; margin-top: 26px; max-width: 820px;
  background-image: repeating-linear-gradient(0deg, rgba(232,238,248,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(232,238,248,.03) 0 1px, transparent 1px 28px); }
.sitescan-kop { display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid rgba(232,238,248,.12); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--navy-gedempt); }
.sitescan-status { margin-left: auto; color: var(--koper-hover); }
.sitescan-body { padding: clamp(18px, 3vw, 28px) clamp(24px, 4vw, 40px); }
.sitescan-start { display: flex; gap: 12px; flex-wrap: wrap; }
.sitescan-veld { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 2px;
  background: rgba(232,238,248,.06); border: 1px solid rgba(232,238,248,.2); border-radius: 12px;
  padding: 0 14px; transition: border-color .2s ease; }
.sitescan-veld:focus-within { border-color: var(--koper); }
.sitescan-prefix { font-family: var(--font-mono); font-size: 14px; color: var(--navy-gedempt); }
.sitescan-veld input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff;
  font-family: var(--font-body); font-size: 16px; padding: 14px 6px; outline: none; }
.sitescan-veld input::placeholder { color: var(--navy-gedempt); }
.sitescan-start .mk-btn { flex-shrink: 0; }
.sitescan-noot { font-family: var(--font-mono); font-size: 11px; color: var(--navy-gedempt); margin-top: 14px; }
.sitescan-laden { padding: 22px 0 8px; text-align: center; }
.sitescan-laadtekst { font-family: var(--font-mono); font-size: 13px; color: var(--navy-licht); margin-top: 8px; }
/* Uitslag-overzicht: totaal-readout + urenbalkjes per kans (Sems "kan veel
   visueler", 17 jul). Balken groen = leven-kleur, koper blijft klikbaar-only. */
.sitescan-dash { border: 1px solid rgba(232,238,248,.18); border-radius: 14px;
  padding: 18px 20px; background: rgba(232,238,248,.055); }
.ssd-bron { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--navy-gedempt); }
.ssd-bron span { color: var(--navy-licht); }
.ssd-rij { display: grid; grid-template-columns: minmax(150px, auto) 1fr;
  gap: 8px 34px; align-items: center; margin-top: 12px; }
.ssd-cijfer { display: grid; gap: 3px; }
.ssd-getal { font-family: var(--font-kop); font-weight: 800; font-size: 42px;
  line-height: 1; color: #fff; }
.ssd-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--navy-licht); }
.ssd-euro { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  color: var(--navy-gedempt); max-width: 34ch; }
.ssd-balken { display: grid; gap: 10px; min-width: 0; }
.ssd-balk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 38%) auto;
  gap: 12px; align-items: center; }
.ssd-balk-label { font-family: var(--font-mono); font-size: 11px; color: var(--navy-licht);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssd-balk-track { display: block; height: 6px; border-radius: 999px;
  background: rgba(232,238,248,.14); overflow: hidden; }
.ssd-balk-track i { display: block; height: 100%; border-radius: 999px;
  background: var(--mk-groen); transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.2,.7,.2,1) .15s; }
.ssd-balk-uren { font-family: var(--font-mono); font-size: 11px; color: #fff; white-space: nowrap; }
.ssd-aan .ssd-balk-track i { transform: scaleX(var(--w, 0)); }
.ssd-noot { font-family: var(--font-mono); font-size: 11px; color: var(--navy-gedempt);
  margin-top: 14px; }
.sitescan-kaarten { display: grid; gap: 14px; margin-top: 16px; }
.sitescan-kaart { border: 1px solid rgba(232,238,248,.16); border-radius: 14px; padding: 16px 20px 14px; background: rgba(232,238,248,.04); }
.sitescan-kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sitescan-kaart h4 { font-family: var(--font-kop); font-weight: 700; font-size: 17px; color: #fff; }
.sitescan-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; }
.sitescan-tag-agent { color: var(--mk-groen); border: 1px solid rgba(76,175,125,.45); }
.sitescan-tag-auto { color: var(--navy-licht); border: 1px solid rgba(232,238,248,.28); }
.sitescan-kern { color: rgba(240,244,250,.92); font-size: 14.5px; line-height: 1.55; margin-top: 7px; max-width: none; }
.sitescan-feiten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 11px; }
.ssk-uren { display: inline-flex; align-items: center; gap: 9px; }
.ssk-track { display: inline-block; width: 72px; height: 5px; border-radius: 999px;
  background: rgba(232,238,248,.14); overflow: hidden; }
.ssk-track i { display: block; height: 100%; border-radius: 999px; background: var(--mk-groen);
  transform: scaleX(var(--w, 0)); transform-origin: left; }
.ssk-cijfer { font-family: var(--font-mono); font-size: 11px; color: var(--navy-licht); white-space: nowrap; }
.ssk-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: var(--navy-licht); border: 1px solid rgba(232,238,248,.28); white-space: nowrap; }
.sitescan-meer { margin-top: 11px; }
.sitescan-meer summary { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--koper-hover); cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 7px; }
.sitescan-meer summary::-webkit-details-marker { display: none; }
.sitescan-meer summary::after { content: "+"; font-size: 13px; line-height: 1; }
.sitescan-meer[open] summary::after { content: "\2212"; }
.sitescan-meer summary:hover { color: #fff; }
.sitescan-meer p { color: var(--navy-gedempt); font-size: 13.5px; line-height: 1.55; margin-top: 8px; max-width: none; }
.sitescan-meer p.sitescan-meer-stap { font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .03em; color: var(--navy-licht); }
.sitescan-uit .mk-capture { margin-top: 22px; }
.sitescan-verder { font-family: var(--font-mono); font-size: 11.5px; color: var(--navy-gedempt); margin-top: 14px; }
@media (max-width: 640px) {
  .ssd-rij { grid-template-columns: 1fr; gap: 16px; }
  .ssd-getal { font-size: 34px; }
  .ssd-balk { grid-template-columns: minmax(0, 1fr) 30% auto; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .ssd-balk-track i { transition: none; }
}
.sitescan-fout { text-align: center; padding: 12px 0; }
.sitescan-fout p { color: var(--navy-licht); margin: 0 auto 12px; }
@media (max-width: 560px) { .sitescan-start .mk-btn { width: 100%; } .sitescan-kaart-kop { flex-direction: column; align-items: flex-start; gap: 8px; } }
.sitescan [hidden] { display: none !important; }

/* Site-scan dienst-kaart: visualisatie (proof-anim in wit instrument-chipje), Nu/Straks, FOMO-slot */
.sitescan-kaart-kop { align-items: center; }
.ssk-dienstrij { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ssk-anim { display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 30px; padding: 0 10px; flex-shrink: 0;
  background: var(--wit); border: 1px solid var(--haarlijn); border-radius: 8px; }
.ssk-anim .mk-anim { margin: 0; }
.ssk-anim .mk-anim i, .ssk-anim .mk-anim b { animation-play-state: running; }
.ssk-dienst { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--koper-hover); }
.sitescan-kaart h4 { margin-top: 12px; }
.ssk-pw { display: grid; gap: 7px; margin-top: 9px; }
.ssk-nu, .ssk-straks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 14px; line-height: 1.5; max-width: none; margin: 0; }
.ssk-nu { color: var(--navy-gedempt); }
.ssk-straks { color: rgba(240,244,250,.94); }
.ssk-mark { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  align-self: start; margin-top: 1px; }
.ssk-mark-nu { color: var(--navy-licht); border: 1px solid rgba(232,238,248,.22); }
.ssk-mark-straks { color: var(--koper-hover); border: 1px solid rgba(196,98,45,.5); }
.sitescan-kaart .sitescan-feiten { margin-top: 13px; }
.sitescan-fomo { margin-top: 18px; border: 1px solid rgba(196,98,45,.32);
  border-left: 3px solid var(--koper); border-radius: 12px;
  background: rgba(196,98,45,.07); padding: clamp(18px, 3vw, 26px); }
.ssf-verlies { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ssf-verlies-num { font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(30px, 5vw, 44px); color: #fff; line-height: 1; }
.ssf-verlies-lab { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  color: var(--navy-licht); max-width: 44ch; }
.ssf-peer { font-size: 14px; line-height: 1.6; color: rgba(240,244,250,.9);
  margin-top: 14px; max-width: none; }
.ssf-peer a { color: var(--koper-hover); border-bottom: 1px solid rgba(196,98,45,.5); }
.ssf-peer a:hover { color: #fff; border-color: #fff; }

/* Analist-rapport-FOMO: geloofwaardig benchmarkcijfer met bron (koploper-trigger) */
.mk-benchmark { margin-top: 26px; max-width: 56ch; padding-left: 20px; border-left: 2px solid var(--haarlijn); }
.mk-benchmark-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.mk-benchmark-stat { font-family: var(--font-kop); font-weight: 700; font-size: clamp(19px, 2.3vw, 23px); color: var(--navy); line-height: 1.32; margin-top: 9px; }
.mk-benchmark-stat strong { color: var(--koper); }
.mk-benchmark-detail { font-size: 14px; color: var(--tekst-muted); margin-top: 9px; line-height: 1.6; }
.mk-benchmark-detail a { color: var(--tekst-muted); border-bottom: 1px solid #C7D0DC; }
.mk-benchmark-detail a:hover { color: var(--koper); border-color: var(--koper); }
.mk-cta-noot-2 { margin-top: 7px; }

/* Zakelijk-geregeld-checklist op /aanpak */
.mk-geregeld { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 34px; margin-top: 26px; max-width: 900px; }
.mk-geregeld li { position: relative; padding-left: 32px; color: var(--inkt); font-size: 15.5px; line-height: 1.5; }
.mk-geregeld li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4622D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; }
@media (max-width: 640px) { .mk-geregeld { grid-template-columns: 1fr; } }

/* Testimonials: data-driven uit data/testimonials.json (build.py), alleen echte,
   geattribueerde quotes met bedrijfslogo. Auto-fit zodat 1 t/m 4 kaarten uitgebalanceerd staan. */
.mk-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; gap: 20px; margin-top: 28px; }
.mk-quote { background: var(--wit); border: 1px solid var(--haarlijn); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.mk-quote::before { content: "\201C"; font-family: var(--font-kop); font-weight: 800; font-size: 50px; line-height: .8; color: var(--koper); margin-bottom: 8px; }
.mk-quote p { font-size: 15.5px; line-height: 1.6; color: var(--inkt); flex: 1; max-width: none; margin: 0; }
.mk-quote footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--haarlijn); }
.mk-quote-foot { display: flex; align-items: center; gap: 12px; }
.mk-quote-logo { height: 28px; width: auto; max-width: 118px; object-fit: contain; flex: none; }
.mk-quote-wie { display: flex; flex-direction: column; min-width: 0; }
.mk-quote-naam { display: block; font-family: var(--font-kop); font-weight: 700; font-size: 15px; color: var(--navy); }
.mk-quote-rol { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--label); margin-top: 3px; }
.mk-scan-teaser { margin-top: 16px; font-size: 15px; color: var(--tekst-muted); }
@media (max-width: 820px) { .mk-quotes { grid-template-columns: minmax(0, 460px); } }

/* In actie: 3 kerndiensten als doorlopend levende demo's.
   GPU-only (transform/opacity), lus start pas als de kaart in beeld is (ia-aan),
   volledig stil bij prefers-reduced-motion. */
.mk-inactie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ia-kaart { background: var(--navy-vlak); border: 1px solid var(--mk-rand-donker); border-radius: 16px; padding: 22px 22px 18px; display: flex; flex-direction: column; min-height: 236px; contain: content; }
.ia-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ia-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-hover); }
.ia-pijn { margin: -8px 0 15px; font-size: 13.5px; line-height: 1.45; color: rgba(232,238,248,.85); max-width: none; }
.ia-payoff { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: rgba(232,238,248,.92); max-width: none; }
.ia-payoff b { color: var(--koper-hover); font-weight: 700; }
.ia-slotregel { text-align: center; margin: clamp(22px, 3vw, 34px) auto 0; max-width: 60ch; color: var(--mk-tekst-donker); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.55; }
.ia-slotregel strong { color: #fff; font-weight: 700; }
.ia-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-gedempt); }
.ia-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--koper); animation: ia-puls 1.8s ease-in-out infinite; }
@keyframes ia-puls { 50% { opacity: .35; } }
.ia-body { flex: 1; }

/* Kaart 1 AI-assistent: vraag -> typen -> antwoord, in een lus */
.ia-chat { display: flex; flex-direction: column; }
.ia-bel { font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 12px; max-width: 92%; margin: 0; }
.ia-bel-in { background: rgba(232,238,248,.07); color: var(--navy-licht); border-radius: 12px 12px 12px 4px; }
.ia-antwoord { display: grid; justify-items: end; margin-top: 10px; }
.ia-antwoord > * { grid-area: 1 / 1; }
.ia-bel-uit { background: rgba(196,98,45,.18); color: #fff; border-radius: 12px 12px 4px 12px; }
.ia-typing { display: inline-flex; gap: 4px; padding: 12px 13px; background: rgba(196,98,45,.18); border-radius: 12px 12px 4px 12px; opacity: 0; }
.ia-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--koper-tekst); }
.ia-arm .ia-bel-in, .ia-arm .ia-bel-uit { opacity: 0; }
.ia-kaart.ia-aan .ia-bel-in { animation: ia-chat-q 8.5s cubic-bezier(.16,1,.3,1) infinite; }
.ia-kaart.ia-aan .ia-typing { animation: ia-chat-typ 8.5s linear infinite; }
.ia-kaart.ia-aan .ia-typing span { animation: ia-typedot 1.1s ease-in-out infinite; }
.ia-kaart.ia-aan .ia-typing span:nth-child(2) { animation-delay: .16s; }
.ia-kaart.ia-aan .ia-typing span:nth-child(3) { animation-delay: .32s; }
.ia-kaart.ia-aan .ia-bel-uit { animation: ia-chat-a 8.5s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes ia-chat-q { 0% { opacity: 0; transform: translateY(8px); } 5% { opacity: 1; transform: none; } 90% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ia-chat-typ { 0%, 14% { opacity: 0; } 18% { opacity: 1; } 33% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ia-chat-a { 0%, 38% { opacity: 0; transform: translateY(8px); } 45% { opacity: 1; transform: none; } 90% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ia-typedot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Kaart 2 Koppeling: stappen lichten in volgorde op, elke lus opnieuw (lopende band) */
.ia-stappen { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ia-stappen li { position: relative; padding-left: 30px; font-size: 13.5px; color: var(--navy-licht); }
.ia-vink { position: absolute; left: 0; top: -1px; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--navy-gedempt); box-sizing: border-box; }
.ia-vink::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--koper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4EA' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 12px 12px; }
.ia-arm .ia-stappen li { opacity: .4; }
.ia-arm .ia-vink::after { opacity: 0; transform: scale(.4); }
.ia-kaart.ia-aan .ia-stappen li { animation: ia-step-li 5.4s ease-in-out infinite; }
.ia-kaart.ia-aan .ia-vink::after { animation: ia-step-vink 5.4s ease-in-out infinite; }
.ia-kaart.ia-aan .ia-stappen li[data-ia-stap="1"], .ia-kaart.ia-aan li[data-ia-stap="1"] .ia-vink::after { animation-delay: .6s; }
.ia-kaart.ia-aan .ia-stappen li[data-ia-stap="2"], .ia-kaart.ia-aan li[data-ia-stap="2"] .ia-vink::after { animation-delay: 1.2s; }
@keyframes ia-step-li { 0% { opacity: .4; } 12% { opacity: 1; } 84% { opacity: 1; } 93% { opacity: .4; } 100% { opacity: .4; } }
@keyframes ia-step-vink { 0%, 7% { opacity: 0; transform: scale(.4); } 17% { opacity: 1; transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 93% { opacity: 0; transform: scale(.4); } 100% { opacity: 0; transform: scale(.4); } }

/* Kaart 3 Dagbriefing: getallen tellen 1x op (JS), koper sweep = briefing samengesteld */
.ia-metrics { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.ia-metriek { display: flex; flex-direction: column; gap: 4px; }
.ia-cijfer { font-family: var(--font-mono); font-weight: 500; font-size: 36px; color: #fff; line-height: 1; }
.ia-metriek span:last-child { font-size: 12px; color: var(--navy-gedempt); max-width: 17ch; line-height: 1.4; }
.ia-briefingbar { height: 4px; border-radius: 2px; background: rgba(232,238,248,.08); margin-top: 16px; overflow: hidden; }
.ia-briefingbar i { display: block; width: 34%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--koper), transparent); transform: translateX(-120%); }
.ia-kaart.ia-aan .ia-briefingbar i { animation: ia-sweep 2.6s ease-in-out infinite; }
@keyframes ia-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(400%); } }

.ia-voet { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--mk-rand-donker); font-family: var(--font-mono); font-size: 11px; color: var(--navy-gedempt); }
.ia-metric { color: var(--koper-hover); }
.ia-fomo { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--mk-rand-donker); font-size: 13px; color: var(--navy-licht); max-width: none; }
.ia-fomo strong { color: var(--koper-hover); }

/* Kaart-onthulling: JS zet ia-arm op de wrap, ia-aan per kaart bij in-beeld komen */
.ia-arm .ia-kaart { opacity: 0; transform: translateY(14px); }
.ia-kaart.ia-aan { animation: ia-cardin .6s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes ia-cardin { to { opacity: 1; transform: none; } }

@media (max-width: 900px) { .mk-inactie { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) {
  .ia-dot { animation: none; }
  .ia-typing, .ia-briefingbar { display: none; }
  .ia-kaart.ia-aan, .ia-kaart.ia-aan * { animation: none !important; }
}
.mk-bewijs-sub { font-family: var(--font-kop); font-weight: 700; font-size: clamp(18px, 2vw, 21px); color: var(--navy); margin-top: 48px; }

/* Sticky-scroll werkwijze op /aanpak */
.mk-proces { display: grid; grid-template-columns: 280px 1fr; gap: 56px; margin-top: 34px; align-items: start; }
.mk-proces-sticky { position: sticky; top: 130px; }
.mk-proces-nr { font-family: var(--font-mono); font-weight: 500; font-size: 84px; color: var(--koper); line-height: 1; display: block; }
.mk-proces-rail { display: flex; gap: 8px; margin: 22px 0 18px; }
.mk-proces-rail i { flex: 1; height: 4px; border-radius: 2px; background: var(--haarlijn); transition: background .35s ease; }
.mk-proces-rail i.aan { background: var(--koper); }
.mk-proces-huidig { font-family: var(--font-kop); font-weight: 700; font-size: 19px; color: var(--navy); line-height: 1.3; max-width: 22ch; }
.mk-proces-stappen { list-style: none; display: flex; flex-direction: column; gap: 64px; margin: 0; }
.mk-proces-stap h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; color: var(--navy); margin: 12px 0 10px; }
.mk-proces-stap p { color: var(--tekst-muted); font-size: 15.5px; line-height: 1.65; max-width: 46ch; }
@media (max-width: 820px) { .mk-proces { grid-template-columns: 1fr; gap: 0; } .mk-proces-zij { display: none; } .mk-proces-stappen { gap: 34px; border-left: 2px solid var(--haarlijn); padding-left: 22px; } }

/* Eyebrow: ook op interne pagina's die case.css niet laden (/aanpak, /scan, /contact) */
.case-eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--koper); margin-bottom: 16px; max-width: none;
}

/* Secundaire knop op lichte achtergrond (hero-CTA's op interne pagina's) */
.mk-btn-lijn {
  background: transparent; color: var(--navy);
  border: 1px solid var(--haarlijn);
}
.mk-btn-lijn:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px); }

/* Contactrijen: instrumentregels met koper icoon-tegel, haarlijn, geen kaart-schaduw */
.mk-contactrijen { display: grid; gap: 12px; margin-top: 30px; max-width: 560px; }
.mk-contactrij {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 20px;
  border: 1px solid var(--haarlijn); border-radius: 13px;
  transition: border-color .2s ease, transform .2s ease;
}
.mk-contactrij:hover { border-color: var(--koper); transform: translateY(-2px); }
.mk-contactrij img {
  width: 20px; height: 20px; padding: 11px; box-sizing: content-box;
  background: #fff; border: 1px solid var(--haarlijn); border-radius: 10px; flex-shrink: 0;
}
.mk-contactrij-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-contactrij-txt strong { font-family: var(--font-kop); font-weight: 700; font-size: 16px; color: var(--navy); line-height: 1.2; }
.mk-contactrij-txt span { font-size: 14px; color: var(--tekst-muted); line-height: 1.35; }

/* FAQ op /scan: haarlijn-gescheiden vraag/antwoord, geen accordeon-ruis */
.mk-faq { max-width: 760px; margin-top: 10px; }
.mk-faq h3 {
  font-family: var(--font-kop); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 20px); color: var(--navy);
  line-height: 1.3; margin: 0; padding-top: 26px;
  border-top: 1px solid var(--haarlijn);
}
.mk-faq h3:first-child { border-top: 0; padding-top: 0; }
.mk-faq p { color: var(--tekst-muted); font-size: 15.5px; line-height: 1.68; margin: 10px 0 26px; max-width: 68ch; }
.mk-faq p:last-child { margin-bottom: 0; }

/* Bewijswand direct na de hero: harde IDB-productiecijfers + echte logo's */
.mk-proof { background: var(--wit); border-bottom: 1px solid var(--haarlijn); padding: clamp(16px, 2vw, 26px) 0 clamp(24px, 3vw, 36px); }
.mk-proof-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--koper); margin: 0 0 22px; }
/* Cijfer bovenaan zodat alle vijf de cijfers netjes op één lijn staan, ongeacht
   hoe lang het dienst-label eronder is. Rustig, geen mini-animaties. */
.mk-proof-cijfers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.mk-proof-stat { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--haarlijn); padding-left: 18px; }
.mk-proof-num { font-family: var(--font-mono); font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; }
.mk-proof-lab { font-size: 13.5px; color: var(--tekst-muted); line-height: 1.45; max-width: 24ch; margin-top: 2px; }
.mk-proof-bron { font-size: 13px; color: var(--label); margin: 22px 0 0; }
@media (max-width: 760px) {
  /* minmax(0,1fr): 1fr heeft een min-content-vloer en de nowrap-transitie
     "1 middag -> 5 min" duwde de grid anders naar 404px op een 390px-scherm */
  .mk-proof-cijfers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 18px; }
  .mk-proof-stat { min-width: 0; }
  .mk-proof-num-trans { white-space: normal; }
  .mk-proof-lab { max-width: none; }
}

/* Compacte proof-regel in de hero (editorial pass 17 jul): dezelfde cijfers
   als de wand, in een oogopslag scanbaar. Niet klikbaar, dus geen koper. */
.mk-proofregel { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 20px; max-width: none; }
.mk-proofregel span {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  color: var(--tekst-muted); white-space: nowrap;
}
.mk-proofregel span + span { border-left: 1px solid var(--haarlijn); margin-left: 14px; padding-left: 14px; }
.mk-proofregel strong { color: var(--navy); font-weight: 500; }

/* Menselijke laag (17 jul): de bouwer zelf, klein en eerlijk in de bewijswand */
.mk-bouwer { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.mk-bouwer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mk-bouwer p { font-size: 14.5px; color: var(--tekst-muted); line-height: 1.5; max-width: 52ch; }
.mk-bouwer a { font-weight: 600; }

/* Logowal in de bewijswand: vertrouwen vroeg, een sectie minder */
.mk-proof .mk-logokop { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--haarlijn); }
.mk-proof .mk-logowal { margin-top: 18px; }
.mk-proof .mk-quotes { margin-top: 18px; }

/* #rekenen: concurrent-FOMO + benchmark naast elkaar i.p.v. gestapeld (de-chaos) */
.mk-rekencontext { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); margin-top: clamp(30px, 4vw, 46px); align-items: start; }
.mk-rekencontext .mk-inloop { margin: 0; }
.mk-rekencontext .mk-benchmark { margin: 0; }
@media (max-width: 720px) { .mk-rekencontext { grid-template-columns: 1fr; gap: 26px; } }

/* Koppeling-kaart: systeem-flow (Kassa -> AI -> Boeking) met reizende koper-puls */
.ia-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.ia-node { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--navy-licht); background: rgba(232,238,248,.06); border: 1px solid var(--mk-rand-donker); border-radius: 7px; padding: 6px 9px; white-space: nowrap; flex-shrink: 0; }
.ia-node-kern { color: var(--koper-tekst); background: rgba(196,98,45,.22); border-color: rgba(196,98,45,.4); }
.ia-draad { flex: 1; min-width: 14px; height: 2px; background: rgba(232,238,248,.12); border-radius: 2px; position: relative; overflow: hidden; }
.ia-draad i { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--koper), transparent); transform: translateX(-130%); }
.ia-kaart.ia-aan .ia-flow .ia-draad i { animation: ia-draadpuls 2.4s ease-in-out infinite; }
.ia-kaart.ia-aan .ia-flow .ia-draad:nth-child(4) i { animation-delay: 1.2s; }
@keyframes ia-draadpuls { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }

/* Dagbriefing-kaart: ochtend-briefing als mini-dashboard */
.ia-briefing { list-style: none; display: flex; flex-direction: column; margin: 0; }
.ia-briefing li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mk-rand-donker); font-size: 13px; }
.ia-briefing li:first-child { border-top: 0; padding-top: 0; }
.ia-brief-lab { color: var(--mk-tekst-donker); }
.ia-brief-val { font-family: var(--font-mono); font-size: 14px; color: #fff; flex-shrink: 0; }
.ia-brief-alert .ia-brief-lab { color: var(--koper-hover); display: inline-flex; align-items: center; gap: 8px; }
.ia-brief-alert .ia-brief-lab::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--koper); flex-shrink: 0; }
.ia-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; flex-shrink: 0; }
.ia-spark i { width: 4px; border-radius: 1px 1px 0 0; background: var(--koper-hover); transform-origin: bottom; }
.ia-spark i:nth-child(1) { height: 35%; }
.ia-spark i:nth-child(2) { height: 55%; }
.ia-spark i:nth-child(3) { height: 42%; }
.ia-spark i:nth-child(4) { height: 70%; }
.ia-spark i:nth-child(5) { height: 60%; }
.ia-spark i:nth-child(6) { height: 92%; }
.ia-kaart.ia-aan .ia-spark i { animation: ia-sparkgrow .55s cubic-bezier(.16,1,.3,1) both; }
.ia-kaart.ia-aan .ia-spark i:nth-child(2) { animation-delay: .06s; }
.ia-kaart.ia-aan .ia-spark i:nth-child(3) { animation-delay: .12s; }
.ia-kaart.ia-aan .ia-spark i:nth-child(4) { animation-delay: .18s; }
.ia-kaart.ia-aan .ia-spark i:nth-child(5) { animation-delay: .24s; }
.ia-kaart.ia-aan .ia-spark i:nth-child(6) { animation-delay: .3s; }
@keyframes ia-sparkgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ia-draad i, .ia-spark i { animation: none !important; } }

/* ── FOMO-ronde 6 jul: hero-sterren, sector-chips, Nachtdienst-naam ───── */
.mk-sterren { display: inline-flex; align-items: center; gap: 9px; margin: 20px 0 0; text-decoration: none; }
.mk-sterren-rij { display: inline-flex; gap: 3px; }
.mk-ster-svg { width: 15px; height: 15px; fill: var(--koper); }
.mk-sterren-score { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--navy); }
.mk-sterren-label, .mk-sterren-aantal { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--tekst-muted); }
a.mk-sterren:hover .mk-sterren-label { color: var(--koper); }

.mk-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 24px; max-width: 560px; }
.mk-chips-label { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin: 0 0 10px; }
.mk-chips .mk-chip { text-align: center; }
@media (max-width: 560px) { .mk-chips { grid-template-columns: 1fr; max-width: 340px; } }
.mk-chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); text-decoration: none; padding: 10px 14px; border: 1px solid var(--haarlijn); transition: color .2s ease, border-color .2s ease; }
.mk-chip:hover { color: var(--koper); border-color: var(--koper); }

.mk-ndnaam { color: var(--mk-tekst-donker); font-size: clamp(15.5px, 1.7vw, 18px); line-height: 1.65; margin-top: 26px; max-width: 62ch; }
.mk-ndnaam strong { color: #fff; font-weight: 600; }
/* Klikbaar = koper, ook als de productnaam vet in een link staat. */
.mk-ndnaam a, .mk-ndnaam a strong { color: var(--koper-hover); }
.mk-ndnaam a:hover, .mk-ndnaam a:hover strong { color: #fff; }

.sitescan-recent { font-family: var(--font-mono); font-size: 11.5px; color: rgba(232,238,248,.5); }

/* Bewijswand: dienst-label per cijfer (Sems eis 6 jul: wand = de 4 diensten) */
.mk-proof-dienst { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-hover); margin-top: 8px; }

/* Wand met 5 diensten: tussenmaat 3 kolommen, mobiel houdt 2 (regel hieronder wint op <=760) */
@media (max-width: 1100px) { .mk-proof-cijfers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .mk-proof-cijfers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Wand: vijf mini-animaties, "Geen slides" in het klein (Sem 6 jul) ──
   Zelfde regels als #inactie: doorlopende CSS-loops, alleen transform/
   opacity, gepauzeerd tot de wand in beeld is, stil bij reduced-motion. */
.mk-proof-num { white-space: nowrap; }
.mk-anim { display: flex; align-items: flex-end; gap: 4px; height: 16px; margin: 2px 0 6px; }
.mk-anim i, .mk-anim b { animation-play-state: paused; }
.proof-aan .mk-anim i, .proof-aan .mk-anim b { animation-play-state: running; }

/* dashboard: sparkline-balkjes die om beurten opveren */
.mk-anim-spark i { width: 5px; height: 100%; background: var(--haarlijn); transform: scaleY(.3); transform-origin: bottom; animation: mk-anim-bar 2.6s ease-in-out infinite; }
.mk-anim-spark i:nth-child(2) { animation-delay: .3s; }
.mk-anim-spark i:nth-child(3) { animation-delay: .6s; }
.mk-anim-spark i:nth-child(4) { animation-delay: .9s; }
.mk-anim-spark i:nth-child(5) { animation-delay: 1.2s; }
@keyframes mk-anim-bar { 0%, 100% { transform: scaleY(.3); } 45% { transform: scaleY(1); } }

/* AI-werkplek: documentregels met een zoek-highlight die langs de regels gaat */
.mk-anim-zoek { position: relative; flex-direction: column; align-items: stretch; justify-content: space-between; width: 46px; padding: 2px 0; }
.mk-anim-zoek i { display: block; height: 2px; background: var(--haarlijn); }
.mk-anim-zoek b { position: absolute; left: 0; top: 2px; width: 16px; height: 2px; background: var(--mk-groen); animation: mk-anim-scanl 3.4s ease-in-out infinite; }
@keyframes mk-anim-scanl { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(30px, 5px); } 45% { transform: translate(30px, 5px); } 75% { transform: translate(8px, 10px); } 90% { transform: translate(8px, 10px); } }

/* AI-assistent: typ-indicator */
.mk-anim-typ { align-items: center; }
.mk-anim-typ i { width: 5px; height: 5px; border-radius: 50%; background: var(--navy); opacity: .2; animation: mk-anim-typdot 1.4s ease-in-out infinite; }
.mk-anim-typ i:nth-child(2) { animation-delay: .18s; }
.mk-anim-typ i:nth-child(3) { animation-delay: .36s; }
@keyframes mk-anim-typdot { 0%, 100% { opacity: .2; transform: translateY(0); } 35% { opacity: .9; transform: translateY(-3px); } }

/* koppeling: puls reist over de rail tussen drie systemen */
.mk-anim-flow { position: relative; align-items: center; justify-content: space-between; width: 56px; }
.mk-anim-flow::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: var(--haarlijn); }
.mk-anim-flow i { position: relative; width: 5px; height: 5px; border-radius: 50%; background: var(--label); }
.mk-anim-flow b { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--mk-groen); opacity: 0; animation: mk-anim-reis 2.4s ease-in-out infinite; }
@keyframes mk-anim-reis { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(51px); opacity: 0; } }

/* nachtdienst: controles lichten om de beurt groen op */
.mk-anim-check { align-items: center; gap: 5px; }
.mk-anim-check i { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-groen); opacity: .16; animation: mk-anim-rond 3s ease-in-out infinite; }
.mk-anim-check i:nth-child(2) { animation-delay: .45s; }
.mk-anim-check i:nth-child(3) { animation-delay: .9s; }
@keyframes mk-anim-rond { 0%, 40%, 100% { opacity: .16; transform: scale(1); } 12% { opacity: 1; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .mk-anim i, .mk-anim b { animation: none !important; }
}

/* AI-assistent: mini-chatgesprek (vervangt de typ-dots, Sem 6 jul):
   vraagbubbel komt binnen, de AI typt, het antwoord popt groen op. */
.mk-anim-chat { position: relative; width: 64px; }
.mk-anim-chat .ac-vraag,
.mk-anim-chat .ac-antwoord { position: absolute; height: 6px; }
.mk-anim-chat .ac-vraag {
  left: 0; top: 1px; width: 22px;
  border-radius: 3px 3px 3px 1px;
  background: var(--label); opacity: .85;
  animation: mk-chat-vraag 4.2s ease-in-out infinite;
}
.mk-anim-chat .ac-dots {
  position: absolute; right: 2px; bottom: 1px;
  display: flex; gap: 2px; opacity: 0;
  animation: mk-chat-dots 4.2s ease-in-out infinite;
}
.mk-anim-chat .ac-dots i {
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: var(--label);
  animation: mk-chat-tik .8s ease-in-out infinite;
}
.mk-anim-chat .ac-dots i:nth-child(2) { animation-delay: .15s; }
.mk-anim-chat .ac-dots i:nth-child(3) { animation-delay: .3s; }
.mk-anim-chat .ac-antwoord {
  right: 0; bottom: 0; width: 30px;
  border-radius: 3px 3px 1px 3px;
  background: var(--mk-groen);
  animation: mk-chat-antwoord 4.2s ease-in-out infinite;
}
@keyframes mk-chat-vraag {
  0%, 2% { opacity: 0; transform: translateY(4px) scale(.6); }
  9%, 86% { opacity: .85; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes mk-chat-dots {
  0%, 16% { opacity: 0; }
  22%, 48% { opacity: 1; }
  53%, 100% { opacity: 0; }
}
@keyframes mk-chat-tik {
  0%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@keyframes mk-chat-antwoord {
  0%, 53% { opacity: 0; transform: translateY(4px) scale(.6); }
  61%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-2px); }
}

/* ── Over-pagina: portret naast het verhaal (content/over.html) ───────── */
.mk-overgrid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: clamp(24px, 3.5vw, 40px);
}
.mk-overgrid .mk-intro:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .mk-overgrid { grid-template-columns: 1fr; }
  .mk-overgrid .mk-slot-foto { max-width: 240px; }
}

/* ── Hero-instrument: klein, stil, echt (operatie vandaag) ────────────── */
.mk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* Gecentreerd naast de kop: met align start + grote margin bleef er na de
   strip-ronde ~180px lege lucht onder het instrument hangen (Sem: te veel wit) */
.mk-hero-grid .mk-hero-instrument { align-self: center; margin-top: 0; }
.mk-hero-instrument { min-width: 0; }
.mk-instrument {
  min-height: 248px;
  background-color: var(--navy);
  background-image:
    radial-gradient(ellipse 70% 45% at 85% 0%, rgba(196,98,45,.12), transparent 60%),
    var(--mk-noise);
  background-blend-mode: normal, multiply;
  border: 1px solid #22314A;
  border-radius: 16px;
  padding: 20px 22px 16px;
}
html.js .mk-instrument { opacity: 0; transform: translateY(12px); animation: mk-instr-in .7s cubic-bezier(.2,.7,.2,1) .55s forwards; }
@keyframes mk-instr-in { to { opacity: 1; transform: none; } }
.mk-instr-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mk-instr-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-hover); }
.mk-instr-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-groen); }
.mk-instr-puls { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-groen); }
.mk-instr-puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(76,175,125,.5); animation: mk-instr-ring 2s ease-out infinite; }
@keyframes mk-instr-ring { to { box-shadow: 0 0 0 8px rgba(76,175,125,0); } }
.mk-instr-lijst { list-style: none; margin: 0; padding: 0; }
.mk-instr-lijst li { padding: 11px 0; border-top: 1px solid rgba(232,238,248,.07); }
.mk-instr-lijst li:first-child { border-top: 0; }
.mk-instr-rij, .mk-instr-lijst a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mk-instr-lijst a { color: inherit; width: 100%; }
.mk-instr-lijst a:hover .mk-instr-wat { color: #fff; }
.mk-instr-wat { font-size: 13.5px; color: var(--mk-tekst-donker); transition: color .2s ease; }
.mk-instr-nr { font-family: var(--font-mono); font-size: 10.5px; color: rgba(232,238,248,.4); margin-right: 8px; }
.mk-instr-waarde { font-family: var(--font-mono); font-size: 12px; color: rgba(232,238,248,.55); text-align: right; white-space: nowrap; }
.mk-instr-lijst li.is-live .mk-instr-waarde { color: var(--mk-groen); }
/* 4-slide rotator in het hero-instrument (zoals Triplebird, maar met echte
   operatie-data: monitoring, dagbriefing, AI-receptie, koppeling). */
.mk-instr-slides { position: relative; }
.mk-instr-slide:not(:first-child) { display: none; }
html.js .mk-instr-slides { min-height: 202px; }
html.js .mk-instr-slide { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
html.js .mk-instr-slide.is-actief { opacity: 1; pointer-events: auto; position: relative; }
@media (prefers-reduced-motion: reduce) { html.js .mk-instr-slide { transition: none; } }
.mk-instr-dots { display: flex; gap: 0; margin-top: 14px; }
.mk-instr-dot {
  position: relative; width: 44px; height: 44px; border: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.mk-instr-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  border-radius: 3px; background: rgba(232,238,248,.22);
  transform: translate(-50%, -50%) scaleX(1);
  transition: background-color .25s ease, transform .25s ease;
}
.mk-instr-dot:hover::before { background: rgba(232,238,248,.45); }
.mk-instr-dot.is-actief::before { background: var(--koper-hover); transform: translate(-50%, -50%) scaleX(3); }
.mk-instr-dot:focus-visible { outline: 2px solid var(--koper-hover); outline-offset: 3px; }
.mk-instr-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.mk-instr-spark i { width: 3px; border-radius: 1px; background: var(--mk-groen); opacity: .55; }
.mk-instr-spark i:nth-child(1) { height: 35%; } .mk-instr-spark i:nth-child(2) { height: 55%; }
.mk-instr-spark i:nth-child(3) { height: 45%; } .mk-instr-spark i:nth-child(4) { height: 75%; }
.mk-instr-spark i:nth-child(5) { height: 60%; } .mk-instr-spark i:nth-child(6) { height: 100%; opacity: .85; }
.mk-instr-chat { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; }
.mk-instr-bel { font-size: 13px; line-height: 1.4; padding: 9px 13px; border-radius: 13px; max-width: 90%; }
.mk-instr-bel-in { background: rgba(232,238,248,.08); color: var(--mk-tekst-donker); border-bottom-left-radius: 4px; align-self: flex-start; }
.mk-instr-bel-uit { background: var(--koper); color: #FFF4EA; border-bottom-right-radius: 4px; align-self: flex-end; }
.mk-instr-chat-voet { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--navy-gedempt); margin-top: 4px; }
.mk-instr-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mk-instr-node { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--mk-tekst-donker); border: 1px solid rgba(232,238,248,.16); border-radius: 6px; padding: 5px 8px; white-space: nowrap; }
.mk-instr-node-kern { color: var(--koper-hover); border-color: rgba(217,119,66,.4); }
.mk-instr-draad { flex: 1; height: 1px; min-width: 8px; background: linear-gradient(90deg, rgba(232,238,248,.1), rgba(232,238,248,.3)); }
.mk-instr-lijst-check .mk-instr-waarde { color: var(--mk-groen); text-transform: uppercase; letter-spacing: .1em; }
/* Agent-actielijst met koperen pijl */
.mk-instr-acties { list-style: none; margin: 10px 0 0; padding: 0; }
.mk-instr-acties li { position: relative; padding: 6px 0 6px 20px; font-size: 13px; color: var(--mk-tekst-donker); }
.mk-instr-acties li::before { content: "\2192"; position: absolute; left: 0; color: var(--koper-hover); }
.mk-instr-acties li:last-child { color: #E8EEF8; }
/* Per-slide stat-voetregel: spans met dunne verticale scheiding, geen middot */
.mk-instr-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-top: 12px; }
.mk-instr-stats span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-gedempt); padding: 0 12px; border-left: 1px solid rgba(232,238,248,.14); }
.mk-instr-stats span:first-child { padding-left: 0; border-left: 0; }
.mk-instr-stats b { color: #fff; font-weight: 500; }
/* Dashboard-metrics */
.mk-instr-metrics li { padding: 10px 0; }
.mk-instr-metric { font-family: var(--font-kop); font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -.02em; }
/* Compacte chat (4 bubbels passen) */
.mk-instr-chat-compact { gap: 6px; }
.mk-instr-chat-compact .mk-instr-bel { padding: 7px 11px; font-size: 12.5px; }
/* Onder-balk: dots links, statuslink rechts */
.mk-instr-onder {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(232,238,248,.1);
}
.mk-instr-onder .mk-instr-dots { margin-top: 0; }
.mk-instr-statuslink { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--koper-hover); border-bottom: 1px solid rgba(217,119,66,.4); padding-bottom: 1px; white-space: nowrap; }
.mk-instr-statuslink:hover { color: #fff; border-color: #fff; }
@media (max-width: 640px) {
  .mk-instr-onder { min-height: 44px; margin-top: 4px; padding-top: 6px; }
  .mk-instr-statuslink { display: inline-flex; align-items: center; min-height: 44px; }
  .mk-footer-kolommen a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
}
/* Doorlopende micro-animaties in de ACTIEVE slide (Sem: iets dat de hele tijd
   beweegt). GPU-only (opacity/transform/background-position); staat automatisch
   stil bij prefers-reduced-motion (globale regel in site.css). */
.mk-instr-slide.is-actief .mk-instr-acties li { animation: mk-actie 3s ease-in-out infinite; }
.mk-instr-slide.is-actief .mk-instr-acties li:nth-child(2) { animation-delay: .5s; }
.mk-instr-slide.is-actief .mk-instr-acties li:nth-child(3) { animation-delay: 1s; }
@keyframes mk-actie { 0%, 55%, 100% { opacity: .5; } 16% { opacity: 1; } }
.mk-instr-slide.is-actief .mk-instr-acties li::before { animation: mk-actiepijl 3s ease-in-out infinite; }
.mk-instr-slide.is-actief .mk-instr-acties li:nth-child(2)::before { animation-delay: .5s; }
.mk-instr-slide.is-actief .mk-instr-acties li:nth-child(3)::before { animation-delay: 1s; }
@keyframes mk-actiepijl { 0%, 55%, 100% { transform: translateX(0); } 16% { transform: translateX(3px); } }
.mk-instr-slide.is-actief .mk-instr-draad { background: linear-gradient(90deg, rgba(217,119,66,.65) 0%, rgba(232,238,248,.12) 45%, rgba(232,238,248,.12) 100%); background-size: 220% 100%; animation: mk-draadflow 1.9s linear infinite; }
@keyframes mk-draadflow { to { background-position: -220% 0; } }
.mk-instr-slide.is-actief .mk-instr-node:not(.mk-instr-node-kern) { animation: mk-node 2.7s ease-in-out infinite; }
.mk-instr-slide.is-actief .mk-instr-node:nth-child(5) { animation-delay: 1s; }
@keyframes mk-node { 0%, 66%, 100% { border-color: rgba(232,238,248,.16); color: var(--mk-tekst-donker); } 22% { border-color: var(--koper-hover); color: #fff; } }
.mk-instr-slide.is-actief .mk-instr-node-kern { animation: mk-nodekern 2.7s ease-in-out infinite; animation-delay: .5s; }
@keyframes mk-nodekern { 0%, 100% { opacity: .78; } 22% { opacity: 1; } }
.mk-instr-typing { display: inline-flex; gap: 4px; align-items: center; margin-top: 2px; padding: 9px 12px; background: rgba(232,238,248,.08); border-radius: 12px; border-bottom-left-radius: 4px; align-self: flex-start; }
.mk-instr-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-gedempt); }
.mk-instr-slide.is-actief .mk-instr-typing span { animation: mk-typ 1.2s ease-in-out infinite; }
.mk-instr-slide.is-actief .mk-instr-typing span:nth-child(2) { animation-delay: .15s; }
.mk-instr-slide.is-actief .mk-instr-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mk-typ { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.mk-instr-sparkline { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-bottom: 14px; }
.mk-instr-sparkline i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--koper-hover), rgba(217,119,66,.28)); height: 100%; transform: scaleY(.35); transform-origin: bottom; }
.mk-instr-slide.is-actief .mk-instr-sparkline i { animation: mk-spark 2.6s ease-in-out infinite; }
.mk-instr-sparkline i:nth-child(1){animation-delay:0s} .mk-instr-sparkline i:nth-child(2){animation-delay:.12s}
.mk-instr-sparkline i:nth-child(3){animation-delay:.24s} .mk-instr-sparkline i:nth-child(4){animation-delay:.36s}
.mk-instr-sparkline i:nth-child(5){animation-delay:.48s} .mk-instr-sparkline i:nth-child(6){animation-delay:.6s}
.mk-instr-sparkline i:nth-child(7){animation-delay:.72s} .mk-instr-sparkline i:nth-child(8){animation-delay:.84s}
@keyframes mk-spark { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }
.mk-instr-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(232,238,248,.1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-gedempt);
}
.mk-instr-voet a { color: var(--koper-hover); border-bottom: 1px solid rgba(217,119,66,.4); padding-bottom: 1px; white-space: nowrap; }
.mk-instr-voet a:hover { color: #fff; border-color: #fff; }
@media (max-width: 940px) {
  .mk-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mk-hero-grid .mk-hero-kop { min-width: 0; }
  .mk-hero-instrument { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .mk-instrument { opacity: 1; transform: none; animation: none; }
  .mk-instr-puls::after { animation: none; box-shadow: none; }
}

/* ── Atmosfeer: grain op de kleine navy panelen + zachtere overgangen ── */
.ia-kaart { background-image: var(--mk-noise); background-blend-mode: multiply; }
.mk-sectie-donker, .mk-nacht { border-top: 1px solid rgba(196,98,45,.26); }

/* ── Scroll-diepte: progressive enhancement bovenop de JS-reveals.
     Alleen voor elementen zonder eigen JS-entrance; GPU-only. ──────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dx-rij, .over-stats .case-stat, .mk-proof-stat {
      animation: mk-scroll-in .7s cubic-bezier(.2,.7,.2,1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}
@keyframes mk-scroll-in { from { opacity: 0; transform: translateY(26px); } }

/* ── Masked line-reveal op de hero-H1 (JS knipt regels, HTML blijft schoon) ── */
html.js .mk-hl { display: block; overflow: hidden; }
html.js .mk-hl-in { display: block; transform: translateY(112%); transition: transform .65s cubic-bezier(.19,1,.22,1); }
html.js h1.mk-hl-aan .mk-hl-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .mk-hl-in { transform: none; transition: none; }
}

.mk-planner-alt { font-family: var(--font-mono); font-size: 12px; color: var(--label); margin-top: 16px; max-width: none; }
.mk-planner-alt a { color: var(--koper-hover); border-bottom: 1px solid rgba(217,119,66,.4); }
.mk-planner-alt a:hover { color: var(--koper); border-color: var(--koper); }

/* ── Agenda-instrument (contact): de echte agenda in een machinekamer-paneel.
   De Calendly-embed laadt pas na een klik (privacy + snelheid), daarvoor staat
   het paneel er als spec-blok: wat je boekt, hoe lang, hoe je bevestiging komt. */
.mk-agenda {
  margin-top: 26px;
  max-width: 780px;
  background-color: var(--navy);
  background-image: var(--mk-noise);
  border: 1px solid var(--mk-rand-donker);
  border-top: 2px solid var(--koper);
  border-radius: 16px;
  overflow: hidden;
}
.mk-agenda-balk {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--mk-rand-donker);
}
.mk-agenda-balk .mono-label { margin: 0; color: rgba(232, 238, 248, .62); }
.mk-agenda-klok {
  margin: 0 0 0 auto;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--koper-hover);
}
.mk-agenda-body { padding: clamp(22px, 3.2vw, 30px); }
.mk-agenda-feiten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin: 0 0 26px;
}
.mk-agenda-feiten dt {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232, 238, 248, .45);
}
.mk-agenda-feiten dd { margin: 7px 0 0; font-size: 15.5px; color: var(--mk-tekst-donker); }
.mk-agenda-rij { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mk-agenda-actie { margin: 0; max-width: none; flex-shrink: 0; }
.mk-agenda-noot {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.65;
  color: rgba(232, 238, 248, .45);
  margin: 0; flex: 1 1 280px; max-width: 44ch;
}
.mk-agenda-open .mk-agenda-actie { display: none; }
.mk-agenda-open .mk-agenda-noot { color: var(--koper-hover); }
.mk-agenda-venster { background: var(--wit); border-top: 1px solid var(--mk-rand-donker); }
.mk-agenda-venster iframe { display: block; width: 100%; height: 880px; border: 0; transition: height .25s ease; }
@media (max-width: 620px) {
  .mk-agenda-feiten { grid-template-columns: 1fr; gap: 15px; margin-bottom: 22px; }
  .mk-agenda-rij { display: block; }
  .mk-agenda-actie .mk-btn { display: block; text-align: center; }
  .mk-agenda-noot { margin-top: 16px; max-width: none; }
  .mk-agenda-venster iframe { height: 840px; }
}

/* ── Scanner-instrument (ronde 3): kop, console-invoer, fase-feed, kaarten ── */
.sitescan-kop-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--koper-hover); }
.sitescan-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.sitescan-veld {
  background: rgba(232,238,248,.05);
  border: 1px solid rgba(232,238,248,.22);
  border-radius: 10px;
  padding: 4px 4px 4px 16px;
  min-height: 48px;
}
.sitescan-veld input { font-family: var(--font-mono); font-size: 14px; caret-color: var(--koper); min-height: 40px; }
.sitescan-voet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 22px;
  border-top: 1px solid rgba(232,238,248,.1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-gedempt);
}
.sitescan-voet .sitescan-noot { margin: 0; font-size: inherit; }
.sitescan-nojs { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--navy-gedempt); margin-top: 12px; }
.sitescan-nojs a { color: var(--koper-hover); }
html:not(.js) .sitescan-nojs { display: block; }
html:not(.js) .sitescan-start .mk-btn { display: none; }
.scan-feed { list-style: none; margin: 4px auto 0; padding: 0; max-width: 420px; }
.scan-feed li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-family: var(--font-mono); font-size: 12.5px; text-align: left;
  color: rgba(232,238,248,.4);
  opacity: .45;
  border-top: 1px solid rgba(232,238,248,.06);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), color .5s cubic-bezier(.2,.7,.2,1);
}
.scan-feed li:first-child { border-top: 0; }
.scan-feed li.is-actief { opacity: 1; color: rgba(232,238,248,.95); }
.scan-feed li.is-klaar { opacity: 1; color: var(--mk-groen); }
.scan-feed-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(232,238,248,.22); flex-shrink: 0; }
.scan-feed li.is-actief .scan-feed-dot { background: var(--koper); animation: ia-puls 1.2s ease-in-out infinite; }
.scan-feed li.is-klaar .scan-feed-dot { background: var(--mk-groen); animation: none; }
.scan-lijn { position: relative; height: 2px; margin: 18px auto 4px; max-width: 420px; overflow: hidden; border-radius: 2px; background: rgba(232,238,248,.08); }
.scan-lijn i { position: absolute; top: 0; left: 0; height: 100%; width: 34%; background: linear-gradient(90deg, transparent, var(--koper), transparent); animation: scan-sweep 1.6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes scan-sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
.sitescan-kaart {
  background-color: var(--navy-vlak);
  background-image: var(--mk-noise);
  background-blend-mode: multiply;
  border-color: #22314A;
  border-radius: 12px;
}
html.js .sitescan-kaart { opacity: 0; transform: translateY(18px); animation: scan-kaart-in .55s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 80ms) forwards; }
@keyframes scan-kaart-in { to { opacity: 1; transform: none; } }
.sitescan-kaart p.sitescan-kaart-meta { border-top: 1px solid rgba(232,238,248,.1); margin-top: 12px; padding-top: 10px; }
.sitescan-totaal { border-left: 2px solid var(--koper); padding-left: 14px; color: var(--koper-hover); }
.mk-scan-teaser { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--label); }
@media (prefers-reduced-motion: reduce) {
  .scan-lijn i { animation: none; }
  .scan-feed li { transition: none; opacity: 1; }
  .scan-feed li.is-actief .scan-feed-dot { animation: none; }
  html.js .sitescan-kaart { opacity: 1; transform: none; animation: none; }
}

/* ── Slotband gestript: rustige app-regel + samengevoegde voetregel ────── */
.mk-slot-app { font-family: var(--font-mono); font-size: 12px; color: var(--mk-tekst-donker); align-self: center; border-bottom: 1px solid rgba(217,119,66,.4); padding-bottom: 1px; }
.mk-slot-app:hover { color: #fff; border-color: #fff; }
.mk-slot-voet { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; margin-top: 20px; }
.mk-slot-voet .mk-capaciteit { margin-top: 0; }
.mk-slot-voet .mk-trustregel { margin: 0; }
.mk-slot-mailform { margin-top: 26px; }
.mk-slot-mailform .mk-capture-rij { align-items: center; }
.mk-slot-mailform .mk-capture-label { margin: 0 0 2px; flex-basis: 100%; }

/* ── Compliance-strook (footer, site-breed). Alleen eerlijke claims. ──────── */
.mk-compliance {
  border-top: 1px solid var(--mk-rand-donker);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(22px, 3vw, 30px);
}
.mk-compliance-kop {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy-gedempt); margin: 0 0 16px;
}
.mk-compliance-rij {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
}
.mk-comp-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--mk-tekst-donker); line-height: 1.35;
}
.mk-comp-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mk-groen); }

/* ── Sector-chips (dienstpagina's, lichte grond). ────────────────────────── */
.mk-sectorchips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 30px;
}
.mk-sectorchips .mk-chip-lab {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--label); margin-right: 4px;
}
.mk-sectorchip {
  font-family: var(--font-mono); font-size: 13px; color: var(--navy);
  border: 1px solid var(--haarlijn); border-radius: 999px;
  padding: 8px 15px; text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.mk-sectorchip:hover { border-color: var(--koper); color: var(--koper); }

/* ── Scanbaarheid-laag (19 jul): dienstrail, kaart-links, rekensom-prijzen ──
   Daan-feedback. Subnav, prijs-strip en sector-chips zijn in Sems strip-ronde
   (19 jul) weer verwijderd; dienstrail en grote rekensom-bedragen bleven. */
.mk-dienstrail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 22px; margin-top: 30px; border-top: 1px solid rgba(232,238,248,.14); }
.mk-dienstrail a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid rgba(232,238,248,.14);
  color: #E8EEF8; font-family: var(--font-kop); font-weight: 600; font-size: 15px;
  transition: color .2s ease;
}
.mk-dienstrail-nr { font-family: var(--font-mono); font-size: 11px; color: var(--koper); flex-shrink: 0; }
.mk-dienstrail a:hover { color: var(--koper); }
@media (max-width: 900px) { .mk-dienstrail { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-dienstrail { grid-template-columns: 1fr; } }
.mk-dienstrail-noot { font-family: var(--font-mono); font-size: 12px; color: rgba(232,238,248,.5); margin-top: 14px; }
.mk-dienstrail-noot a { color: rgba(232,238,248,.85); text-decoration: underline; text-underline-offset: 3px; }
.mk-dienstrail-noot a:hover { color: var(--koper); }

.ia-link { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--koper); transition: color .2s ease; }
.ia-link:hover { color: #D97B45; }

.mk-alt-prijs { font-family: var(--font-kop); font-weight: 800; font-size: clamp(21px, 2.4vw, 26px); color: var(--navy); margin-top: 10px; letter-spacing: -.01em; line-height: 1.25; }
.mk-alt-prijs i { font-style: normal; font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--tekst-muted); letter-spacing: 0; }
.mk-mijkaart .mk-alt-prijs { color: #fff; }
.mk-mijkaart .mk-alt-prijs i { color: rgba(232,238,248,.6); }

/* ── Werk-check licht rapport-thema (Sem 10-aug: witte achtergrond, geen console-look) ──
   Override-laag: bewust als laatste blok, wint de cascade van het oude donkere thema. */
.sitescan { background-color: var(--wit); background-image: none; border-color: var(--haarlijn);
  box-shadow: 0 16px 44px rgba(11,21,38,.09); }
.sitescan-kop { color: var(--label); border-bottom-color: var(--haarlijn); }
.sitescan-status { color: var(--koper); }
.sitescan-veld { background: #F7F9FC; border: 1px solid #D9E1EB; }
.sitescan-veld:focus-within { border-color: var(--koper); }
.sitescan-veld input { color: var(--inkt); }
.sitescan-veld input::placeholder { color: var(--label); }
.sitescan-prefix { color: var(--label); }
.sitescan-noot { color: var(--label); }
.sitescan-voet { color: var(--label); border-top: 1px solid var(--haarlijn); }
.sitescan-laadtekst { color: var(--tekst-muted); }
.sitescan .scan-feed li { color: var(--tekst-muted); }
.sitescan-dash { border-color: var(--haarlijn); background: #FBF9F6; }
.ssd-bron { color: var(--label); }
.ssd-bron span { color: var(--inkt); }
.ssd-getal { color: var(--navy); }
.ssd-label { color: var(--label); }
.ssd-euro { color: var(--tekst-muted); }
.ssd-balk-label { color: var(--tekst-muted); }
.ssd-balk-track { background: #E7ECF3; }
.ssd-balk-uren { color: var(--inkt); }
.ssd-noot { color: var(--label); }
.sitescan-kaart { border-color: var(--haarlijn); background: var(--wit);
  box-shadow: 0 6px 18px rgba(11,21,38,.05); }
.sitescan-kaart h4 { color: var(--navy); }
.sitescan-tag-agent { color: #2F7D55; border-color: rgba(76,175,125,.55); }
.sitescan-tag-auto { color: var(--tekst-muted); border-color: #C9D3E0; }
.sitescan-kern { color: var(--inkt); }
.ssk-cijfer { color: var(--tekst-muted); }
.ssk-track { background: #E7ECF3; }
.ssk-pill { color: var(--tekst-muted); border-color: #C9D3E0; }
.ssk-dienst { color: var(--koper); }
.ssk-anim { background: #F7F9FC; }
.ssk-nu { color: var(--tekst-muted); }
.ssk-straks { color: var(--inkt); }
.ssk-mark-nu { color: var(--label); border-color: #C9D3E0; }
.ssk-mark-straks { color: var(--koper); border-color: rgba(196,98,45,.5); }
.sitescan-meer summary { color: var(--koper); }
.sitescan-meer summary:hover { color: var(--navy); }
.sitescan-meer p { color: var(--tekst-muted); }
.sitescan-meer p.sitescan-meer-stap { color: var(--inkt); }
.sitescan-verder { color: var(--tekst-muted); }
.sitescan-fout p { color: var(--inkt); }
.sitescan-fomo { background: rgba(196,98,45,.06); }
.ssf-verlies-num { color: var(--navy); }
.ssf-verlies-lab { color: var(--tekst-muted); }
.ssf-peer { color: var(--inkt); }
.ssf-peer a { color: var(--koper); }
.ssf-peer a:hover { color: var(--navy); border-color: var(--navy); }
.sitescan .mk-capture-label { color: var(--navy); }
.sitescan .mk-capture-optin span { color: var(--tekst-muted); }
.sitescan .mk-capture-noot { color: var(--label); }
.sitescan .mk-capture-rij input[type="email"] { background: #F7F9FC;
  border: 1px solid #D9E1EB; color: var(--inkt); }
.sitescan .mk-capture-rij input[type="email"]::placeholder { color: var(--label); }
.sitescan .mk-capture-scan, .sitescan .mk-capture-scan .mk-capture-label { color: var(--inkt); }

/* Calendly direct ingebed op /contact/ (Sem 10-aug: klik-gate weg) */
.mk-agenda-embed { margin-top: 26px; border: 1px solid var(--haarlijn); border-radius: 14px;
  overflow: hidden; background: var(--wit); box-shadow: 0 14px 40px rgba(11,21,38,.07); }