/* 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.05'/%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;
  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(.16,1,.3,1) .4s 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(48px, 7vw, 92px) 0 clamp(52px, 6vw, 80px);
}
.mk-hero-kop { max-width: 790px; }
.mk-hero-kop h1 {
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(36px, 4.9vw, 61px);
  line-height: 1.05; letter-spacing: -.01em;
  color: var(--navy); max-width: none;
}
.mk-sub-hero { font-size: clamp(16px, 1.8vw, 19px); color: var(--tekst-muted); margin-top: 18px; max-width: 48ch; }
.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-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: 340vh; }
.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);
  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(6, 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; min-height: 150px; }
.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; }
html.js .mk-nacht[data-stap] .mk-nacht-kaarten .mk-nachtkaart {
  position: absolute; inset: auto 0;
  top: 50%; transform: translateY(-40%);
  margin: 0;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
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; transform: translateY(-50%); }
.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(56px, 8vw, 110px) 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);
}
.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); }

/* Reveal bij scroll (IntersectionObserver zet .mk-in) */
html.js .mk-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
html.js .mk-reveal.mk-in { opacity: 1; transform: none; }

/* ── 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); 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: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--koper);
  border: 1px solid rgba(196,98,45,.45);
  border-radius: 999px;
  padding: 4px 12px;
}
.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);
  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,.5); }

/* ── 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 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 26px;
  align-items: start;
  margin-top: clamp(22px, 3vw, 34px);
}
.mk-logowal figure { margin: 0; text-align: center; }
.mk-logowal img {
  max-height: 44px; max-width: 140px;
  width: auto; height: auto;
  margin: 0 auto;
  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; }

/* ── 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); }

/* ── 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);
  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;
}
.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: 300vh; }
  .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 { grid-template-columns: 14px 1fr; }
  .mk-checks strong { grid-column: 2; }
  .mk-checks li > :last-child { grid-column: 2; }
}

/* ── 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; }
@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-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); 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(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; }
.sitescan-bedrijf { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--koper-hover); }
.sitescan-kaarten { display: grid; gap: 14px; margin-top: 16px; }
.sitescan-kaart { border: 1px solid rgba(232,238,248,.16); border-radius: 14px; padding: 18px 20px; 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(--koper-tekst); background: var(--koper); }
.sitescan-tag-auto { color: var(--navy-licht); border: 1px solid rgba(232,238,248,.28); }
.sitescan-kaart p { color: var(--navy-gedempt); font-size: 14px; line-height: 1.55; margin-top: 8px; max-width: none; }
.sitescan-uit .mk-capture { margin-top: 22px; }
.sitescan-verder { font-family: var(--font-mono); font-size: 12px; color: var(--navy-gedempt); margin-top: 16px; }
.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; }

/* 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; }