/* ==========================================================================
   Bouwvergunningbalie — Warm Slate Design Systeem v2
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --bg:          #F8FAFC;
  --surface:     #FFFFFF;
  --primary:     #1E3A5F;
  --primary-700: #162d4a;
  --primary-100: #dbeafe;
  --accent:      #F97316;
  --accent-700:  #ea580c;
  --text:        #1C2B3A;
  --muted:       #64748B;
  --border:      #E2E8F0;
  --tint:        #F1F5F9;
  --white:       #FFFFFF;

  /* Legacy aliases (portaal gebruikt deze nog) */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;

  --gap-1: 4px;   --gap-2: 8px;   --gap-3: 12px;  --gap-4: 16px;
  --gap-6: 24px;  --gap-8: 32px;  --gap-12: 48px; --gap-16: 64px;
  --gap-20: 80px;

  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 6px;   --radius-md: 10px;
  --radius-lg: 14px;  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(30,58,95,0.06), 0 1px 2px rgba(30,58,95,0.04);
  --shadow-md: 0 4px 16px rgba(30,58,95,0.08), 0 1px 3px rgba(30,58,95,0.05);
  --shadow-lg: 0 20px 40px rgba(30,58,95,0.12);

  /* Nieuw in :root — voeg toe na --shadow-lg */
  --blur-surface:  rgba(255, 255, 255, 0.85);
  --shadow-glow:   0 0 40px rgba(249, 115, 22, 0.12);
  --border-subtle: rgba(30, 58, 95, 0.08);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Typografie --- */
h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--gap-4);
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 var(--gap-4); color: var(--muted); }

.lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 var(--gap-8);
}

.accent { color: var(--accent); }

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--gap-3);
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gap-6);
}

/* --- Secties --- */
.section {
  padding: 96px 0;
  background: var(--bg);
}
.section--tint  { background: var(--tint); }
.section--white { background: var(--white); }
.section--dark  {
  background: var(--primary);
  color: var(--white);
}
.section--dark h2,
.section--dark h3,
.section--dark p { color: rgba(255,255,255,0.85); }
.section--dark .eyebrow { color: var(--accent); }

.section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--gap-12);
}
.section__header h2 { margin-bottom: var(--gap-4); }
.section__header p  { font-size: 1.05rem; }

@media (max-width: 768px) {
  .section { padding: 64px 0; }
}

/* --- Knoppen --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-700); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: var(--accent-700); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--tint); border-color: var(--muted); }

.btn-ghost-dark {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(249,115,22,0.1);
  color: var(--accent-700);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 14px;
  margin-bottom: var(--gap-6);
}

/* --- Header --- */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--blur-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 0 rgba(30, 58, 95, 0.04);
}
.mk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-8);
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gap-6);
  height: 64px;
}
.mk-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.mk-header__brand:hover { text-decoration: none; opacity: 0.85; }
.mk-header__brand img { width: 28px; height: 28px; }
/* Het logo is ook een link naar de homepage. Het beeldje blijft 28px, maar het
   tikdoel eromheen wordt 44px — de maat die op een telefoon betrouwbaar raakt. */
.mk-header__brand { padding: 8px; margin: -8px; }
.mk-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.mk-header__nav ul {
  display: flex;
  align-items: center;
  /* Was --gap-6 (24px); met een menu-item erbij en de koopknop ernaast paste
     dat niet meer. Let op: --gap-5 bestaat niet in de tokens hierboven, en een
     onbekende variabele laat de gap stil op 0 vallen — de items plakten dan
     aan elkaar. */
  gap: var(--gap-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-header__nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s;
  /* "Voor bedrijven" en "Voor gemeenten" braken over twee regels zodra de
     koopknop erbij kwam. Een menu-item hoort op één regel te staan; wordt het
     te krap, dan is dat een reden om iets weg te laten, niet om af te breken. */
  white-space: nowrap;
}
.mk-header__nav a:hover { color: var(--text); text-decoration: none; }
.mk-header__nav a.active,
.mk-header__nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}
.mk-header__cta {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-left: var(--gap-4);
}

/* Hamburger-knop: alleen zichtbaar op mobiel/tablet (≤900px). */
.mk-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface, #fff);
  cursor: pointer;
  flex-shrink: 0;
}
.mk-header__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.18s, opacity 0.18s;
}
.mk-header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mk-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.mk-header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Uitklapmenu onder de header. */
.mk-header__mobile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
  background: var(--blur-surface, #fff);
  padding: var(--gap-2) 0;
}
.mk-header__mobile[hidden] { display: none; }
.mk-header__mobile a {
  padding: 12px var(--gap-6);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.mk-header__mobile a:hover { background: var(--surface-2, #f1f5f9); text-decoration: none; }

/* De koptekstrij past niet in zijn eigen vak, en dat is gemeten in plaats van
   geschat (15-10-2026, startpagina): inhoud 1319px in een vak van 1160 —
   merk 224 (waarvan 170 tekst), menu 606, knoppen 400. De pagina scrolt dus
   horizontaal zodra het venster smaller is dan inhoud + padding.

   De oude grens van 1180px voor alleen de koopknop haalde dat nooit: zonder
   die knop is de rij nog altijd 1189 breed. Gemeten overloop vóór deze
   wijziging: 1000px → 176, 1100 → 76, 1240 → 118, 1280 → 98, 1380 → 48, en
   pas bij 1600 nul. Dat raakt elke gewone laptopbreedte, en 1280 nog het
   hardst.

   Daarom een ladder in plaats van één grens. Per stap valt weg wat op die
   breedte het minst kost, en elke stap is nagerekend met de maten hierboven:

     ≤1430  koopknop weg      → rij 1189, past vanaf venster 1237
     ≤1240  Inloggen weg      → rij 1094, past vanaf venster 1142
     ≤1140  merknaam-tekst weg → rij  924, past vanaf venster  972
     ≤900   hele menu weg      → bestaand gedrag, hamburger neemt het over

   De merknaam is bewust de laatste die wijkt: het logo blijft staan en de
   paginatitel draagt de naam, maar bij een pas gewijzigde handelsnaam wil je
   hem zo lang mogelijk in beeld houden. */
@media (max-width: 1430px) {
  .mk-header__cta-koop { display: none; }
}
@media (max-width: 1240px) {
  .mk-header__cta .btn-ghost { display: none; }
}
@media (max-width: 1140px) {
  .mk-header__brand span { display: none; }
}

@media (max-width: 900px) {
  .mk-header__nav { display: none; }
  .mk-header__cta .btn-ghost { display: none; }
  .mk-header__inner { gap: var(--gap-3); }
  .mk-header__toggle { display: flex; }
}
@media (min-width: 901px) {
  .mk-header__mobile { display: none !important; }
}

/* Kleine schermen: merknaam-tekst weg (logo blijft) + strakkere padding,
   zodat de CTA-knop niet buiten het scherm valt (horizontale scroll voorkomen). */
@media (max-width: 480px) {
  .mk-header__inner { padding: 0 var(--gap-4); gap: var(--gap-2); }
  .mk-header__brand span { display: none; }
  .mk-header__cta .btn-accent { font-size: 0.8125rem; padding: 8px 14px; }
}

/* --- Footer --- */
.mk-footer {
  background: var(--primary);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 32px;
}
.mk-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--gap-8);
  padding-bottom: var(--gap-12);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--gap-8);
}
.mk-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--gap-4);
}
.mk-footer__tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
  max-width: 30ch;
  line-height: 1.6;
}
.mk-footer h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 var(--gap-4);
}
.mk-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}
.mk-footer ul a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.12s;
  /* Deze links waren 18px hoog: te klein om op een telefoon betrouwbaar te
     raken. Met ruimte eromheen wordt het tikdoel ruim 40px, terwijl de voet er
     hetzelfde uitziet. De negatieve marge houdt de onderlinge afstand gelijk. */
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
}
.mk-footer ul a:hover { color: var(--white); text-decoration: none; }
.mk-footer__bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  flex-wrap: wrap;
  gap: var(--gap-4);
}
@media (max-width: 860px) {
  .mk-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mk-footer__grid { grid-template-columns: 1fr; }
}

/* --- Hero --- */
.hero {
  background: var(--bg);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 50%, rgba(249,115,22,0.06) 0%, transparent 60%),
                    radial-gradient(circle at 20% 80%, rgba(30,58,95,0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Lijntekening van drie grachtenpanden, onderin de hero. De pagina had nergens
   beeld; dit zegt in een oogopslag waar het over gaat zonder de aandacht van
   de kop of de knop te trekken. Zo licht dat je het pas ziet als je erop let. */
.hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  width: min(430px, 34vw);
  aspect-ratio: 520 / 400;
  background: url('/assets/hero-gevels.svg') right bottom / contain no-repeat;
  opacity: 0.11;
  pointer-events: none;
}
/* De inhoud staat in de normale stroom en zou anders ónder de twee
   gepositioneerde lagen hierboven vallen. */
.hero__inner { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* Op smalle schermen staat de voorbeeldkaart onder de tekst en zou de
     tekening eronder doorlopen. Dan liever weg. */
  .hero::after { display: none; }
}
.hero__inner {
  position: relative;
  max-width: 1160px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-12);
  align-items: center;
}
.hero__text { min-width: 0; }
.hero h1 { margin-bottom: var(--gap-6); }
.hero .lead { max-width: 52ch; }

/* Voorbeeld-resultaatkaart (rechterkolom hero) — laat direct zien wat je krijgt. */
.hero__preview { min-width: 0; }
.hero__preview-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 20px 50px -24px rgba(30, 58, 95, 0.35);
  padding: var(--gap-6);
  transform: rotate(-1.2deg);
  transition: transform 0.25s ease;
}
.hero__preview-card:hover { transform: rotate(0deg) translateY(-2px); }
.hero__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  margin-bottom: var(--gap-5);
}
.hero__preview-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(249, 115, 22, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
}
.hero__preview-addr { font-size: 0.82rem; color: var(--muted); }
.hero__preview-outcome {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  padding: var(--gap-4);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.04));
  border: 1px solid rgba(34, 197, 94, 0.25);
  margin-bottom: var(--gap-5);
}
.hero__preview-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__preview-title { font-weight: 800; font-size: 1.05rem; color: #166534; }
.hero__preview-sub { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.hero__preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-3);
  margin-bottom: var(--gap-4);
}
.hero__preview-metric {
  background: var(--surface-2, #f1f5f9);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.hero__preview-metric-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}
.hero__preview-metric-value { display: block; font-weight: 700; font-size: 0.9rem; color: var(--text); }
.hero__preview-foot { font-size: 0.8rem; color: var(--muted); text-align: center; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--gap-8); }
  .hero__preview-card { transform: none; max-width: 420px; }
}
.hero__cta {
  display: flex;
  gap: var(--gap-4);
  flex-wrap: wrap;
  margin-bottom: var(--gap-12);
}
.hero__stats {
  display: flex;
  gap: var(--gap-8);
  flex-wrap: wrap;
  padding-top: var(--gap-8);
  border-top: 1px solid var(--border);
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat strong { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.hero__stat span   { font-size: 0.8rem; color: var(--muted); font-weight: 500; }

@media (max-width: 768px) {
  .hero { padding: 64px 0 48px; }
}

/* --- Feature Cards --- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-6);
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(249,115,22,0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--gap-4);
}
.feature-card h3 { margin-bottom: var(--gap-2); }
.feature-card p  { margin: 0; font-size: 0.925rem; }

.section--dark .feature-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .feature-card h3 { color: var(--white); }
.section--dark .feature-card p  { color: rgba(255,255,255,0.65); }
.section--dark .feature-card__icon {
  background: rgba(249,115,22,0.2);
  color: #fdba74;
}

@media (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }

/* --- Stat Cards --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-6);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-card__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--gap-2);
}
.stat-card__label {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
@media (max-width: 768px) { .stats-row { grid-template-columns: 1fr; } }

/* --- Proces stappen --- */
.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-6);
  counter-reset: process-counter;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(16.66% + var(--gap-4));
  right: calc(16.66% + var(--gap-4));
  height: 2px;
  background: var(--border);
}
.process-step {
  position: relative;
  padding-top: var(--gap-12);
}
.process-step::before {
  content: counter(process-counter);
  counter-increment: process-counter;
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  z-index: 1;
}
.process-step h3 { margin-bottom: var(--gap-2); }
.process-step p  { margin: 0; font-size: 0.925rem; }

@media (max-width: 768px) {
  .process { grid-template-columns: 1fr; }
  .process::before { display: none; }
  .process-step { padding-top: 0; padding-left: 64px; min-height: 48px; }
  .process-step::before { top: 0; }
}

/* --- CTA Block --- */
.cta-block {
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: var(--gap-16) var(--gap-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(249,115,22,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.cta-block h2 { color: var(--white); margin-bottom: var(--gap-4); }
.cta-block p  { color: rgba(255,255,255,0.7); margin-bottom: var(--gap-8); max-width: 48ch; margin-left: auto; margin-right: auto; }
.cta-block .btn { position: relative; }
.cta-block__actions {
  display: flex;
  gap: var(--gap-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Pricing --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-6);
  align-items: start;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-8);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.price-card--featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.08), var(--shadow-md);
  position: relative;
}
.price-card--featured::before {
  content: 'Meest gekozen';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { font-size: 1.1rem; margin-bottom: var(--gap-4); color: var(--text); }
.price-card__amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.03em;
  margin-bottom: var(--gap-4);
}
.price-card__amount span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.price-card ul {
  list-style: none;
  margin: 0 0 var(--gap-8);
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}
.price-card li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.price-card .btn { justify-content: center; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.faq { max-width: 720px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--border); padding: var(--gap-5) 0; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  font-size: 0.975rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-4);
  user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--muted); flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: var(--gap-4) 0 0; font-size: 0.925rem; padding-right: var(--gap-8); }

/* --- Kennisbank --- */
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-6); }
.kb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kb-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.kb-card__meta { font-size: 0.8rem; color: var(--muted); margin-bottom: var(--gap-2); }
.kb-card h3 { font-size: 1.05rem; margin-bottom: var(--gap-2); }
.kb-card p  { font-size: 0.925rem; margin: 0; }
@media (max-width: 860px) { .kb-grid { grid-template-columns: 1fr; } }

/* --- Producten grid --- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-4); }
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-6);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  text-decoration: none;
  display: block;
}
.product-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.product-card__category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--gap-2); }
.product-card h3 { font-size: 1rem; margin-bottom: var(--gap-2); color: var(--text); }
.product-card p  { font-size: 0.875rem; margin: 0; color: var(--muted); }

/* --- Contact form --- */
.contact-form { max-width: 600px; margin: 0 auto; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-4); }
@media (max-width: 640px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__group { display: flex; flex-direction: column; gap: var(--gap-2); margin-bottom: var(--gap-4); }
.contact-form__group label { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.contact-form__group input,
.contact-form__group textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.contact-form__group input:focus,
.contact-form__group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }
.contact-form__group textarea { resize: vertical; min-height: 120px; }
.contact-form__status { margin-top: var(--gap-4); font-size: 0.95rem; text-align: center; min-height: 1.4em; }
.contact-form__status--ok  { color: #16a34a; font-weight: 600; }
.contact-form__status--err { color: #dc2626; }

/* --- Article layout --- */
.article { max-width: 720px; margin: 0 auto; }
.article__meta { color: var(--muted); font-size: 0.9rem; margin-bottom: var(--gap-4); }
.article h2 { margin-top: var(--gap-8); }
.article h3 { margin-top: var(--gap-6); }
.article p, .article li { font-size: 1.05rem; line-height: 1.75; }
.article ul, .article ol { padding-left: 1.4rem; margin-bottom: var(--gap-4); }

/* --- Trust bar --- */
.trust-bar {
  background: var(--primary);
  padding: var(--gap-4) 0;
}
.trust-bar__items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-6);
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  color: rgba(255,255,255,0.85);
  font-size: 0.875rem;
  font-weight: 500;
}
.trust-bar__icon {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}

/* --- Testimonials --- */
.testimonials {
  max-width: 680px;
  margin: 0 auto;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-8);
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: var(--gap-6);
  font-size: 4rem;
  color: var(--accent);
  line-height: 1;
  font-family: Georgia, serif;
}
.testimonial-card__quote {
  margin: 0 0 var(--gap-6);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}
.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--text);
}
.testimonial-card__role {
  font-size: 0.825rem;
  color: var(--muted);
}

/* --- Sticky mobile CTA --- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: var(--gap-3) var(--gap-4);
  z-index: 9990;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  display: none;
}
.sticky-cta--visible {
  transform: translateY(0);
}
.sticky-cta__btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 768px) {
  .sticky-cta { display: block; }
  #vk-chat-btn { bottom: 72px; }
}
@media (min-width: 769px) {
  .sticky-cta { display: none !important; }
}

/* ── Chat widget ─────────────────────────────────────────────────────────── */
#vk-chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  background: #F97316;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(249,115,22,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform 0.15s, box-shadow 0.15s;
}
#vk-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(249,115,22,0.5);
}
#vk-chat-btn svg { pointer-events: none; }

#vk-chat-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 340px;
  max-height: 500px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 32px rgba(30,58,95,0.12);
  display: none;
  flex-direction: column;
  z-index: 9998;
  font-family: var(--font-sans);
  overflow: hidden;
}
#vk-chat-panel.open { display: flex; }

#vk-chat-header {
  background: #1E3A5F;
  color: #fff;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px 14px 0 0;
}
#vk-chat-header span { opacity: 0.7; font-size: 12px; font-weight: 400; }
#vk-chat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}
#vk-chat-close:hover { color: #fff; }

#vk-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.vk-msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  word-wrap: break-word;
}
.vk-msg.user {
  background: #F97316;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.vk-msg.assistant {
  background: #F1F5F9;
  color: #1C2B3A;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.vk-msg.typing {
  background: #F1F5F9;
  color: #94A3B8;
  align-self: flex-start;
  font-style: italic;
}

#vk-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #E2E8F0;
  background: #fff;
}
#vk-chat-input {
  flex: 1;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: none;
  line-height: 1.4;
  color: #1C2B3A;
  max-height: 96px;
  overflow-y: auto;
}
#vk-chat-input:focus { border-color: #1E3A5F; }
#vk-chat-send {
  background: #F97316;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.12s;
}
#vk-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
#vk-chat-send:not(:disabled):hover { opacity: 0.88; }

@media (max-width: 400px) {
  #vk-chat-panel { width: calc(100vw - 32px); right: 16px; }
  #vk-chat-btn { right: 16px; bottom: 16px; }
}

/* --- Responsive utilities --- */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.35rem, 4vw, 1.75rem); }
  .hero__stats { gap: var(--gap-6); }
}

/* ===== Animatiesysteem ===== */

/* Scroll-reveal */
/* Alleen verbergen als JavaScript draait — anders kan niets het ooit weer
   tonen en blijft de pagina leeg. Zie de markering in head-meta.html. */
.js .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fade-up.visible,
.fade-in.visible {
  opacity: 1;
  transform: none;
}

/* Float animatie (hero badge) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.badge-animated {
  animation: float 3s ease-in-out infinite;
}

/* Count-up getal — toon 0 tot visible */
.count-up {
  display: inline-block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .badge-animated {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Nieuwe componenten ===== */

/* Glass card */
.glass-card {
  background: var(--blur-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Gradient mesh achtergrond (hero) */
.gradient-mesh {
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(249, 115, 22, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(30, 58, 95, 0.06) 0%, transparent 60%),
    var(--bg);
}

/* Feature card met hover-lift */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap-8);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow), var(--shadow-md);
}

/* Stap-connector (verticale lijn tussen stappen) */
.step-connector {
  width: 2px;
  background: none;
  border-left: 2px dashed var(--border-subtle);
  margin: var(--gap-2) auto;
  height: 32px;
}

/* Stat block (hero count-up) */
.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-block__value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-block__label {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* Source badge (DSO-datum op gemeente-pages) */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(30, 58, 95, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.source-badge::before {
  content: '●';
  color: #22c55e;
  font-size: 0.6rem;
}

/* CTA glassmorphism blok */
.cta-glass {
  background: var(--blur-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--gap-12) var(--gap-8);
  text-align: center;
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

@media (max-width: 768px) {
  .responsive-grid { grid-template-columns: 1fr !important; }
}

.kb-filter.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* --- Hero-kop en oprichter (zie index.html) --------------------------------
   De kop was elf woorden lang en de tweede regel stond in oranje — dezelfde
   kleur als de knop eronder. Daardoor concurreerde de kop met de actie en
   sprong geen van beide eruit. De tweede regel is nu marineblauw; oranje
   betekent op deze pagina nog maar één ding: hier moet je klikken. */
.hero__h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero__h1-tweede { color: var(--primary); }

@media (max-width: 768px) {
  .hero__h1 { font-size: clamp(2rem, 9vw, 2.9rem); }
}

.founder {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--gap-8);
  align-items: start;
  max-width: 760px;
  margin: 0 auto;
}
.founder__portret {
  position: relative;
  width: 132px; height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary);
  display: grid;
  place-items: center;
}
.founder__portret img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Staat onder de foto: valt die weg, dan blijft de initiaal over in plaats
   van een gebroken plaatje. */
.founder__initiaal {
  font-size: 3rem; font-weight: 800; color: #fff; line-height: 1;
}
.founder blockquote {
  margin: var(--gap-3) 0 var(--gap-6);
  padding: 0;
  border: 0;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
}
.founder__naam {
  font-weight: 700;
  margin: 0 0 var(--gap-4);
}
.founder__naam span {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
}
.founder__mail { font-size: 0.9rem; color: var(--muted); margin: 0; }

@media (max-width: 640px) {
  .founder { grid-template-columns: 1fr; gap: var(--gap-6); }
  .founder blockquote { font-size: 1.05rem; }
}