/* === DESIGN TOKENS === */
:root {
  --ink: #0a0e1a;
  --ink-soft: #1a1f2e;
  --ink-surface: #12161f;      /* dark section surface, warmer than pure ink */
  --paper: #f4f1ea;
  --paper-warm: #ede8dd;
  --paper-deep: #e4ddcd;       /* deeper sand for layered surfaces */
  --accent: #e8ff4a;
  --accent-deep: #c9e024;
  --accent-shadow: rgba(200, 224, 36, 0.35);
  --muted: #575e6b;          /* 5.78:1 op paper, 5.34 op paper-warm (WCAG AA) */

  /* Hairline borders */
  --line: rgba(10, 14, 26, 0.08);
  --line-strong: rgba(10, 14, 26, 0.15);
  --ledger-line: rgba(10, 14, 26, 0.055);   /* faint ruled grootboek line */
  --ledger-line-paper: rgba(244, 241, 234, 0.08); /* ledger line on dark */

  /* Most-reused text shades */
  --ink-55: rgba(10, 14, 26, 0.55);
  --ink-70: rgba(10, 14, 26, 0.7);
  --paper-50: rgba(244, 241, 234, 0.5);
  --paper-60: rgba(244, 241, 234, 0.6);
  --paper-70: rgba(244, 241, 234, 0.7);
  --paper-85: rgba(244, 241, 234, 0.85);

  /* Type scale */
  --fs-display: clamp(56px, 8.2vw, 104px);
  --fs-h1: clamp(48px, 7vw, 88px);
  --fs-h2: clamp(36px, 5vw, 56px);
  --fs-h3: clamp(22px, 2.4vw, 28px);
  --fs-lede: clamp(18px, 1.6vw, 21px);

  /* Radius scale */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* === RESET === */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

::selection {
  background: var(--accent);
  color: var(--ink);
}

body {
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 'Plus Jakarta Sans', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* === LAYOUT === */
.container       { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.container-narrow{ max-width: 880px;  margin: 0 auto; padding: 0 32px; }

/* === TYPOGRAPHY === */
h1 {
  margin-bottom: 32px;
  font: 400 var(--fs-h1)/0.94 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.045em;
}

h2 {
  font: 400 var(--fs-h2)/1.04 'Fraunces', serif;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.032em;
}

h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: var(--fs-h3);
  font-variation-settings: 'opsz' 40;
  letter-spacing: -0.02em;
}

.italic {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
}

/* === ICON === */
.ic {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
}

.flag {
  display: inline-block;
  width: 18px;
  height: 12px;
  vertical-align: middle;
}

/* === NAVIGATION === */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--paper-85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 500 22px 'Fraunces', serif;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo-mark {
  position: relative;
  width: 28px;
  height: 28px;
  background: var(--ink);
  border-radius: 8px;
}

.logo-mark::before,
.logo-mark::after,
.logo-mark span {
  content: '';
  position: absolute;
  height: 2px;
  background: var(--accent);
}

.logo-mark::before { top: 9px;    left: 7px;  width: 14px; }
.logo-mark::after  { top: 14px;   left: 7px;  width: 8px; }
.logo-mark span    { bottom: 9px; right: 7px; width: 11px; }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: var(--ink);
  font-size: 14.5px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav-links a:hover     { opacity: 0.6; }
.nav-links a.is-active { font-weight: 500; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === LANGUAGE SWITCHER === */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  font: 600 11px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.lang-btn:hover { color: var(--ink); }

.lang-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

/* === BUTTONS === */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--r-pill);
  font: 500 14px inherit;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}

/* When a button has an arrow, give it absolute placement so the text
   stays optically centered regardless of button width. */
.btn .ic-arrow {
  flex-shrink: 0;
}

.btn-ghost   { background: transparent;     color: var(--ink); }
.btn-primary { background: var(--ink);      color: var(--paper); }
.btn-accent  { background: var(--accent);   color: var(--ink); }

.btn-ghost:hover   { background: rgba(10, 14, 26, 0.05); }
.btn-primary:hover { background: var(--ink-soft); transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(10, 14, 26, 0.45); }
.btn-accent:hover  { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 26px -10px var(--accent-shadow); }

.btn .ic { width: 1em; height: 1em; }
.btn:hover .ic-arrow { transform: translateX(3px); }

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}


/* === HERO === */
.hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 60px;
}

/* Grootboek ruled lines — fine horizontal liniatuur + one accountant's margin rule.
   De kantlijn hoort in de goot, links van de schrijfruimte: 12px links van de
   container-rand op brede schermen, met 12px minimum op smalle. */
.hero::before {
  --rule-x: max(12px, calc(50% - 672px));
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--ledger-line) 47px, var(--ledger-line) 48px),
    linear-gradient(to right, transparent var(--rule-x), var(--accent) var(--rule-x), var(--accent) calc(var(--rule-x) + 3px), transparent calc(var(--rule-x) + 3px));
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 70%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

.hero > * { position: relative; }

/* ── Bold hero typography ── */
.hero h1 {
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.05em;
}

/* Neon highlighter swipe behind the italic phrase */
.hero h1 .italic {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.hero h1 .italic::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.08em;
  bottom: 0.1em;
  height: 0.34em;
  z-index: -1;
  background: var(--accent);
  border-radius: 3px 6px 4px 8px;
  transform: rotate(-1.4deg) skewX(-7deg);
  transform-origin: left center;
  box-shadow: 0 0 0 0 var(--accent);
  animation: swipeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes swipeIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}

.hero-intro-right { padding-bottom: 12px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 7px 14px;
  background: rgba(10, 14, 26, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.hero-sub {
  max-width: 520px;
  margin-bottom: 40px;
  color: rgba(10, 14, 26, 0.72);
  font: 19px/1.55 inherit;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* === TRUST STRIP === */
.trust-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.trust-item .ic { width: 14px; height: 14px; }

/* === CAROUSEL === */
.hero-carousel { position: relative; margin-top: 20px; }

.carousel-stage {
  position: relative;
  min-height: 540px;
}

.carousel-slide {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  position: absolute;
  inset: 0 0 auto 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s, visibility 0s linear 0.7s;
}

.carousel-slide.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s, transform 0.7s, visibility 0s linear 0s;
}

.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.slide-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ink);
}

.slide-title {
  margin-bottom: 20px;
  font: 400 clamp(36px, 4.5vw, 56px)/1.05 'Fraunces', serif;
  letter-spacing: -0.03em;
}

.slide-desc {
  max-width: 480px;
  margin-bottom: 28px;
  color: var(--ink-70);
  font: 17px/1.55 inherit;
}

.slide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 32px;
  list-style: none;
}

.slide-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(10, 14, 26, 0.65);
  font-size: 14px;
}

.slide-meta-item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent-deep);
  border-radius: 50%;
}

.slide-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font: 500 15px inherit;
  text-decoration: none;
  transition: gap 0.3s;
}

.slide-link:hover { gap: 16px; }

.slide-visual {
  position: relative;
  height: 460px;
}

/* === CAROUSEL TABS === */
.carousel-tabs {
  display: flex;
  position: relative;
  margin-top: 80px;
  border-top: 1px solid var(--line-strong);
}

.carousel-tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
  padding: 28px 24px 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;
}

.carousel-tab:hover,
.carousel-tab.is-active { color: var(--ink); }

.carousel-tab::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.carousel-tab.is-active.is-progressing::before {
  animation: progress 6s linear forwards;
}

@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tab-num   { color: rgba(10, 14, 26, 0.4); font-size: 11px; }
.tab-label { font-weight: 500; }

/* === SLIDE CARDS === */
.slide-card {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  padding: 28px;
  background: var(--ink);
  border-radius: 24px;
  color: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(10, 14, 26, 0.35);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: var(--paper-50);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.balance-label {
  margin-bottom: 8px;
  color: var(--paper-60);
  font: 12px 'Geist Mono', monospace;
}

.balance-amount {
  margin-bottom: 4px;
  font: 400 44px 'Fraunces', serif;
  letter-spacing: -0.02em;
}

.balance-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(232, 255, 74, 0.12);
  border-radius: 999px;
  color: var(--accent);
  font: 500 12px 'Geist Mono', monospace;
}

.transactions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 234, 0.1);
}

.tx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.tx-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tx-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.tx-icon .ic { width: 16px; height: 16px; }

.tx-icon.in  { background: rgba(232, 255, 74, 0.15); color: var(--accent); }
.tx-icon.out { background: rgba(244, 241, 234, 0.08); color: var(--paper-60); }

.tx-title  { font-weight: 500; font-size: 14px; }
.tx-date   { color: rgba(244, 241, 234, 0.45); font: 11px 'Geist Mono', monospace; }
.tx-amount { font: 500 14px 'Geist Mono', monospace; }
.tx-amount.in { color: var(--accent); }

.bank-list {
  display: grid;
  gap: 12px;
  list-style: none;
}

.bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(244, 241, 234, 0.05);
  border: 1px solid rgba(244, 241, 234, 0.08);
  border-radius: 14px;
}

.bank-row.is-connected {
  background: rgba(232, 255, 74, 0.08);
  border-color: rgba(232, 255, 74, 0.2);
}

.bank-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 14px;
}

.bank-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 5px;
  background: rgba(244, 241, 234, 0.08);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.12);
  border-radius: 9px;
  overflow: hidden;
  color: var(--paper);
  font: 600 14px 'Fraunces', serif;
}

.bank-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.bank-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paper-50);
  font: 11px 'Geist Mono', monospace;
  text-transform: uppercase;
}

.bank-status .ic { width: 12px; height: 12px; }

.bank-row.is-connected .bank-status { color: var(--accent); }

.vat-summary { display: grid; gap: 16px; }

.vat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}

.vat-row.is-total {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 234, 0.15);
  border-bottom: none;
}

.vat-label  { color: var(--paper-70); font-size: 14px; }
.vat-amount { font: 15px 'Geist Mono', monospace; }

.vat-row.is-total .vat-label  { color: var(--paper); font-weight: 500; font-size: 16px; }
.vat-row.is-total .vat-amount { color: var(--accent); font: 400 28px 'Fraunces', serif; }

/* === MARQUEE === */
.marquee {
  overflow: hidden;
  padding: 40px 0;
  background: var(--paper-warm);
  border-block: 1px solid var(--line);
}

.marquee-label {
  margin-bottom: 24px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
}

.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-item {
  color: rgba(10, 14, 26, 0.4);
  font: 400 28px 'Fraunces', serif;
  letter-spacing: -0.02em;
}

/* === SECTIONS === */
.section { padding: 120px 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-tag::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent-deep);
}

.section-tag.on-dark { color: var(--paper-50); }
.section-tag.on-dark::before { background: var(--accent); }

.section-desc {
  max-width: 460px;
  color: var(--ink-70);
  font: 17px/1.55 inherit;
}

/* === FEATURES GRID === */
.features-grid {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
}
.feature {
  display: grid;
  grid-template-rows: auto 52px auto 1fr;
  row-gap: 24px;
  min-height: 320px;
  padding: 40px;
  background: var(--paper);
}

.feature:hover { background: var(--paper-warm); }

.feature-num {
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ledger-line);
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 0;
  background: var(--ink);
  border-radius: 14px;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(232, 255, 74, 0.15);
}

.feature-icon::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--paper);
  border-radius: 4px;
}

.feature:hover .feature-icon::after { background: var(--accent-deep); }

.feature-icon .ic {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}

.feature h3 {
  margin-bottom: 12px;
  font-size: 26px;
}

.feature p {
  flex: 1;
  color: rgba(10, 14, 26, 0.65);
  font: 15px/1.55 inherit;
}

/* === ECOSYSTEM CALLOUT === */
.eco-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-block: 1px solid var(--line);
}

.eco-callout h2 { margin-bottom: 24px; }

.eco-callout p {
  max-width: 460px;
  color: var(--ink-70);
  font: 17px/1.6 inherit;
}

/* === SPOTLIGHT === */
.spotlight {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: var(--ink);
  color: var(--paper);
}

.spotlight::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 255, 74, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.spotlight .container { position: relative; z-index: 1; }

.spotlight-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.spotlight h2 { margin-bottom: 32px; }

.spotlight p {
  max-width: 480px;
  margin-bottom: 40px;
  color: var(--paper-70);
  font: 18px/1.6 inherit;
}

.checklist { list-style: none; }

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.1);
  font-size: 15px;
}

.checklist li:last-child { border-bottom: none; }

.check {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--accent);
  border-radius: 50%;
  color: var(--ink);
}

.check .ic { width: 12px; height: 12px; stroke-width: 2.5; }

.spotlight-visual {
  padding: 32px;
  background: var(--ink-soft);
  border: 1px solid rgba(244, 241, 234, 0.08);
  border-radius: 24px;
  font-family: 'Geist Mono', monospace;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
  color: var(--paper-50);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.code-dot {
  width: 8px;
  height: 8px;
  background: rgba(244, 241, 234, 0.2);
  border-radius: 50%;
}

.code-dot.is-live {
  margin-left: auto;
  background: #4ade80;
}

.code-line {
  color: var(--paper-85);
  font-size: 13px;
  line-height: 2;
}

.code-comment { color: rgba(244, 241, 234, 0.35); }
.code-key     { color: var(--accent); }
.code-string  { color: #fbbf24; }
.code-num     { color: #93c5fd; }

/* === PRICING === */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}

/* Default state of every card */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
}

.price-btn {
  margin-top: auto;
  width: 100%;
}

/* The default-featured card (Professional) is dark when nothing is hovered */
.price-card.is-featured {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* The popularity badge always stays accent on top of any state */
.price-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 10px;
  background: var(--accent);
  border-radius: 999px;
  color: var(--ink);
  font: 600 10px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-name {
  margin-bottom: 8px;
  font: 400 24px 'Fraunces', serif;
}

/* Descriptions and meta colors swap depending on parent state */
.price-desc {
  margin-bottom: 28px;
  color: rgba(10, 14, 26, 0.6);
  font-size: 14px;
}

.price-card.is-featured .price-desc { color: var(--paper-60); }

.price-amount {
  margin-bottom: 8px;
  font: 400 52px/1 'Fraunces', serif;
  letter-spacing: -0.03em;
}

.price-amount .currency {
  vertical-align: super;
  font-size: 26px;
}

.price-amount.is-custom { font-size: 36px; }

.price-period {
  margin-bottom: 28px;
  color: rgba(10, 14, 26, 0.5);
  font: 12px 'Geist Mono', monospace;
}

.price-card.is-featured .price-period { color: var(--paper-50); }

.price-features {
  margin-bottom: 28px;
  list-style: none;
}

.price-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13.5px;
}

/* Check icon color follows the card state */
.price-features .ic {
  width: 14px;
  height: 14px;
  color: var(--accent-deep);
}

.price-card.is-featured .price-features .ic { color: var(--accent); }

.price-btn {
  justify-content: center;
  width: 100%;
}

/* Professional always shows the lime button */
.price-card.is-featured .price-btn {
  background: var(--accent);
  color: var(--ink);
}

/* === FINAL CTA === */
.final-cta {
  padding: 100px 0;
  text-align: center;
}

.final-cta h2 {
  max-width: 800px;
  margin: 0 auto 32px;
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.final-meta {
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
}

/* === FOOTER === */
.site-footer {
  padding: 80px 0 32px;
  background: var(--ink);
  color: var(--paper);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}

.footer-brand .logo {
  margin-bottom: 16px;
  color: var(--paper);
}

.footer-tagline {
  max-width: 280px;
  color: var(--paper-60);
  font: 14px/1.6 inherit;
}

.footer-col h4 {
  margin-bottom: 20px;
  color: var(--paper-50);
  font: 500 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }

.footer-col a {
  color: var(--paper-85);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--accent); }

/* === FOOTER PAYMENT STRIP === */
.footer-pay {
  padding: 32px 0;
  border-block: 1px solid rgba(244, 241, 234, 0.1);
}

.footer-pay-head {
  margin-bottom: 16px;
  color: var(--paper-50);
  font: 500 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pay-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid rgba(244, 241, 234, 0.12);
  border-radius: 8px;
  color: var(--paper-85);
  font: 500 12px 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}

.pay-badge .ic { width: 14px; height: 14px; color: var(--accent); }

.footer-pay-note {
  margin-top: 12px;
  color: rgba(244, 241, 234, 0.55);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  color: var(--paper-50);
  font: 12px 'Geist Mono', monospace;
}

/* === PAGE HEADER === */
.page-header {
  position: relative;
  padding: 140px 0 48px;
  border-bottom: 1px solid var(--line);
}

/* Eerste sectie na een page-header: strakker aansluiten (was 120px erbovenop,
   waardoor content op subpagina's onnodig ver onder de vouw begon) */
.page-header + .section { padding-top: 64px; }

.page-header .eyebrow { margin-bottom: 24px; }

.page-header h1 {
  max-width: 900px;
  margin-bottom: 24px;
  font-size: clamp(40px, 6vw, 72px);
}

.page-header .intro {
  max-width: 640px;
  color: var(--ink-70);
  font: 19px/1.55 inherit;
}

/* === LEGAL PAGES === */
.legal-content { padding: 60px 0 100px; }

.legal-content h2 {
  margin: 48px 0 16px;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.legal-content h3 {
  margin: 32px 0 12px;
  font: 600 19px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0;
}

.legal-content p {
  margin-bottom: 16px;
  color: rgba(10, 14, 26, 0.85);
  font: 16px/1.7 inherit;
}

.legal-content ul,
.legal-content ol {
  margin: 16px 0 16px 24px;
  color: rgba(10, 14, 26, 0.85);
  font: 16px/1.7 inherit;
}

.legal-content li { margin-bottom: 8px; }

.legal-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-toc {
  margin-bottom: 48px;
  padding: 28px 32px;
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
}

.legal-toc h4 {
  margin-bottom: 16px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-toc ol {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.legal-toc li { margin-bottom: 4px; }

.legal-toc a {
  color: var(--ink);
  text-decoration: none;
}

.legal-toc a:hover { text-decoration: underline; }

.legal-meta {
  margin-bottom: 32px;
  padding: 16px 20px;
  background: var(--paper-warm);
  border-left: 3px solid var(--accent-deep);
  border-radius: 4px;
  color: var(--ink-70);
  font: 12px 'Geist Mono', monospace;
}

.placeholder {
  padding: 1px 6px;
  background: rgba(232, 255, 74, 0.4);
  border-radius: 3px;
  font: 500 0.92em 'Geist Mono', monospace;
}

.data-table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 12px 8px;
  border-bottom: 2px solid var(--ink);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.data-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table tr:last-child td { border-bottom: none; }

/* ----------  EU figure (refined)  ---------- */

.eu-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eu-figure-frame {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper-warm) 100%);
  overflow: hidden;
  box-shadow: 0 4px 24px -12px rgba(10, 14, 26, 0.12);
}

.eu-figure-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eu-figure-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}

.eu-figure-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: eu-pulse 2s ease-out infinite;
}

@keyframes eu-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

.eu-figure-status {
  color: var(--ink);
  font-weight: 500;
}

.eu-figure-region {
  margin-left: auto;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.eu-figure-map {
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.eu-figure-map::before {
  content: "";
  position: absolute;
  inset: 16px;
  background-image:
    linear-gradient(rgba(10, 14, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 14, 26, 0.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  border-radius: 8px;
}

.eu-figure-map img {
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.eu-figure-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.eu-meta-item {
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}

.eu-meta-item:last-child {
  border-right: none;
}

.eu-meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 4px;
}

.eu-meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

.eu-figure figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 600px) {
  .eu-figure-meta {
    grid-template-columns: 1fr;
  }
  .eu-meta-item {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .eu-meta-item:last-child {
    border-bottom: none;
  }
}
/* === PAYMENT PAGE === */
.pay-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 60px 0 100px;
}

.pay-method {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  margin-bottom: 12px;
}

.pay-method .ic {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: var(--ink);
}

.pay-method h4 {
  margin-bottom: 4px;
  font: 500 16px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0;
}

.pay-method p {
  color: var(--ink-70);
  font: 14px/1.5 inherit;
}

.pay-trust-box {
  padding: 28px;
  background: var(--ink);
  border-radius: 20px;
  color: var(--paper);
}

.pay-trust-box h3 {
  margin-bottom: 16px;
  font-size: 22px;
}

.pay-trust-box p {
  color: var(--paper-70);
  font: 14px/1.6 inherit;
}

.pay-trust-box ul {
  margin-top: 20px;
  list-style: none;
}

.pay-trust-box li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--paper-85);
  font-size: 14px;
}

.pay-trust-box .ic {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* === CONTACT === */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 60px 0 100px;
}

.contact-heading {
  margin-bottom: 32px;
  font-size: 36px;
}

.contact-info-block { margin-bottom: 32px; }

.contact-info-block h4 {
  margin-bottom: 12px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-info-block p { font: 16px/1.6 inherit; }

.contact-info-block a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  font: 15px inherit;
  transition: border-color 0.2s;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ink);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-feedback {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(232, 255, 74, 0.2);
  border-left: 3px solid var(--accent-deep);
  border-radius: 4px;
  font-size: 14px;
}

.form-feedback[hidden] { display: none; }

.form-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.04em;
}

.form-trust .ic {
  width: 14px;
  height: 14px;
  color: var(--accent-deep);
}

/* ==========================================================================
   About page
   ========================================================================== */

/* ----------  Stats strip  ---------- */

.about-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--ink);
  border-radius: 16px;
  padding: 48px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  gap: 40px 56px;
}

.about-stats-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(232, 255, 74, 0.08), transparent 60%);
  pointer-events: none;
}

.about-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.about-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.about-stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  color: #ffffff;
  word-break: break-word;
}

.about-stat-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* ----------  Quote in story  ---------- */

.about-quote {
  margin: 40px 0;
  padding: 32px;
  border-left: 3px solid var(--accent);
  background: var(--paper-warm);
  border-radius: 0 12px 12px 0;
}

.about-quote p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 16px;
  color: var(--ink);
}

.about-quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-quote-author {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}

.about-quote-role {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ----------  Values grid (with icons)  ---------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.value-card {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 32px;
  background: #ffffff;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
}

.value-card .icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
}

.value-card .icon-box::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.value-card .icon-box svg {
  width: 26px;
  height: 26px;
}

.value-card h3 {
  font-size: 20px;
  margin: 0 0 8px;
}

.value-card p {
  color: var(--ink-70);
  margin: 0;
  line-height: 1.6;
}

/* ----------  "What we don't do" list  ---------- */

.sec-not .sec-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}

.sec-not .sec-header h2 { margin: 0; }

.sec-not .sec-header .section-desc {
  margin: 0;
  color: var(--ink-70);
  max-width: 480px;
}

.not-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.not-list li {
  display: flex;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-warm);
}

.not-x {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
  font-size: 0;               /* het ×-teken zelf verbergen; het kruis wordt getekend */
}

/* Geometrisch gecentreerd kruis (een letterglyph hangt nooit exact in het midden) */
.not-x::before,
.not-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.not-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.not-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.not-list h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ink);
}

.not-list p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.6;
}

/* ----------  Legal card  ---------- */

.legal-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #ffffff;
  margin-top: 32px;
  overflow: hidden;
}

.legal-block {
  padding: 32px;
  border-right: 1px solid var(--line);
}

.legal-block:last-child {
  border-right: none;
}

.legal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
}

.legal-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--ink);
}

.legal-sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.7;
}

.legal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink);
  gap: 16px;
}

.legal-row:last-child {
  margin-bottom: 0;
}

.legal-key {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.legal-row a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.legal-row a:hover {
  border-bottom-color: var(--ink);
}

/* ----------  Responsive  ---------- */

@media (max-width: 960px) {
  .about-stats-strip {
    gap: 28px;
    padding: 32px;
  }
  .values-grid,
  .not-list,
  .legal-card {
    grid-template-columns: 1fr;
  }
  .legal-block {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .legal-block:last-child {
    border-bottom: none;
  }
  .sec-not .sec-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .about-stats-strip {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px;
  }
  .about-stat-num {
    font-size: 32px;
  }
}

/* === SECURITY === */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 60px 0;
}

.security-card {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
}

.security-card .icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  background: var(--ink);
  border-radius: 12px;
  color: var(--accent);
}

.security-card .icon-box .ic { width: 20px; height: 20px; }

.security-card h3 {
  margin-bottom: 12px;
  font-size: 22px;
}

.security-card p {
  color: var(--ink-70);
  font: 15px/1.6 inherit;
}

.cert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0;
}

.cert-badge {
  padding: 12px 20px;
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font: 500 13px 'Geist Mono', monospace;
}

/* === FAQ === */
.faq { margin-top: 60px; }

.faq-item {
  padding: 24px 20px;
  margin-inline: -20px;
  border-radius: 14px;
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  list-style: none;
  font: 400 22px 'Fraunces', serif;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-weight: 300;
  font-size: 28px;
  transition: transform 0.3s;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin-top: 16px;
  color: var(--ink-70);
  font: 16px/1.6 inherit;
}

/* === TYPOGRAFIE & LAYOUT (uit oud animatie-blok, hoort hier) === */
h1, h2, h3, h4 { text-wrap: balance; }

.hero { min-height: 100dvh; }

/* === STATS-STRIP === */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
  background: var(--paper-warm);
  overflow: hidden;
}

.stat-item {
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.stat-item:last-child { border-right: none; }

.stat-num {
  display: block;
  font: 400 clamp(36px, 4.5vw, 60px)/1 'Fraunces', serif;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.stat-suffix {
  font-style: italic;
  color: var(--accent-deep);
}

.stat-label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--line); }
  .stat-item:nth-child(4) { border-top: 1px solid var(--line); border-right: none; }
}

@media (max-width: 480px) {
  .bank-bar-logos img { height: 16px; }
}

/* === BANK-BAR === */
.bank-bar {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.bank-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bank-bar-label {
  color: var(--muted);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.bank-bar-logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.bank-bar-logos img {
  height: 20px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.bank-bar-logos img:hover {
  opacity: 1;
  filter: grayscale(0);
}

.bank-bar-more {
  color: var(--muted);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* === RESPONSIVE === */
@media (max-width: 968px) {
  .nav-links { display: none; }

  .hero-intro,
  .carousel-slide,
  .section-head,
  .spotlight-grid,
  .eco-callout,
  .contact-grid,
  .pay-page-grid,
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }

  .contact-grid > div:first-child { order: 2; }
  .contact-grid > div:last-child  { order: 1; }

  .features-grid,
  .pricing-grid,
  .values-grid,
  .security-grid { grid-template-columns: 1fr; }


  .slide-visual { height: 420px; }
  .hero { padding: 110px 0 40px; }
  .section, .spotlight { padding: 80px 0; }
  .container, .container-narrow { padding: 0 20px; }
  .nav-inner { padding: 14px 20px; }
  .carousel-tabs { margin-top: 40px; }
  .carousel-tab { padding: 20px 14px 0; }
  .tab-label { font-size: 11px; }
  .page-header { padding: 130px 0 60px; }
  .pricing-grid { gap: 12px; }
  .price-card { padding: 28px 22px; }
  .price-amount { font-size: 44px; }
  .nav-links { display: none; }

  /* Keep "Contact us" CTA visible on mobile */
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary { padding: 9px 14px; font-size: 13px; }
}
.security-spotlight h3 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 12px 0 16px;
}

.security-spotlight .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

.security-spotlight p:last-child {
  color: var(--ink-70);
  max-width: 460px;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.security-card {
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 28px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.security-card:hover { transform: translateY(-2px); }

.security-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ink);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
}

.security-card .icon-box::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.security-card .icon-box .ic {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
}

.security-card h3 { font-size: 18px; margin: 0 0 8px; }

.security-card p {
  font-size: 14px;
  color: var(--ink-70);
  margin: 0;
  line-height: 1.6;
}

.sec-card-feature {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.sec-card-feature .icon-box {
  background: var(--accent);
  color: var(--ink);
}

.sec-card-feature .icon-box::after { background: #ffffff; }
.sec-card-feature h3 { color: #ffffff; }
.sec-card-feature p { color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   MOBILE COMPATIBILITY LAYER
   Doel: alleen wat mobiel echt breekt corrigeren. Desktop ongewijzigd.
   ========================================================================== */

/* --- Form fields: 16px voorkomt iOS auto-zoom op focus --- */
@media (max-width: 768px) {
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px;
  }
}

/* --- Tabletformat (~961-1024px niet gedekt) en mobiel basis --- */
@media (max-width: 968px) {
  /* Late security grid override de bestaande responsive regel.
     Hier dwingen we alsnog 1 kolom op mobiel. */
  .security-grid {
    grid-template-columns: 1fr;
  }

  /* Security spotlight (2-koloms basis) verticaliseren */
  .security-spotlight {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }

  /* Sec-header (compliance + intro) verticaliseren */
  .sec-security .sec-header {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 32px;
  }

  /* EU figure meta: 3 cellen worden 1 kolom met onder-borders */
  .eu-figure-meta {
    grid-template-columns: 1fr;
  }
  .eu-meta-item {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .eu-meta-item:last-child {
    border-bottom: none;
  }

  /* Footer-grid 4 koloms → 2 koloms tussenstap */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Eco-callout padding lichter (was 80px 0) */
  .eco-callout {
    padding: 48px 0;
    gap: 24px;
  }

  /* Hero carousel: min-height schaadt mobiel layout met absolute slides */
  .carousel-stage {
    min-height: auto;
  }
  .carousel-slide {
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    display: none;
  }
  .carousel-slide.is-active {
    display: grid;
  }

  /* Slide-visual fixed height moet weg op mobile */
  .slide-visual {
    height: auto;
    min-height: 320px;
  }

  /* Slide-card uit absolute positie (was inset 0) */
  .slide-card {
    position: relative;
    inset: auto;
  }

  /* Carousel-tabs: statisch, tabs verdelen breedte gelijkmatig */
  .carousel-tabs {
    overflow-x: visible;
  }
  .carousel-tab {
    flex: 1;
    padding: 16px 10px 0;
    min-width: 0;
    min-height: 44px;
    font-size: 10px;
    letter-spacing: 0.08em;
    gap: 5px;
  }
  .tab-num { font-size: 10px; }
  .tab-label { white-space: normal; line-height: 1.3; }

  /* About-quote padding verlagen op smal scherm */
  .about-quote {
    padding: 24px;
    margin: 28px 0;
  }

  /* Page-header padding lichter */
  .page-header {
    padding: 130px 0 60px;
  }

  /* Pay-trust-box padding lichter */
  .pay-trust-box {
    padding: 22px;
  }

  /* Cert-frame padding lichter */
  .cert-frame {
    padding: 20px 22px;
  }

  /* Spotlight visual (code-blok) overflow-x voor lange JSON-regels */
  .spotlight-visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px;
  }
  .code-line {
    white-space: nowrap;
  }
}

/* --- Smal mobiel (≤ 600px): scherper inkrimpen --- */
@media (max-width: 600px) {
  /* Container padding minimaler */
  .container,
  .container-narrow {
    padding: 0 16px;
  }

  /* Section padding (basis was 120px, 80px op 968px, hier nog krapper) */
  .section,
  .spotlight {
    padding: 56px 0;
  }

  .hero {
    padding: 96px 0 32px;
  }

  /* Page-header inkrimpen op zeer smal scherm */
  .page-header {
    padding: 110px 0 48px;
  }

  /* Footer 2 koloms → 1 kolom op mobiel */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Site-footer padding lichter */
  .site-footer {
    padding: 56px 0 24px;
  }

  /* Logo iets kleiner zodat nav-cta past naast het */
  .nav-inner {
    padding: 12px 16px;
    gap: 8px;
  }

  /* Lang-switch en buttons → touch target 44px hoog */
  .lang-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 6px 8px;
  }

  /* Btn padding handhaven maar font niet onder 14 */
  .btn {
    min-height: 44px;
  }

  /* FAQ summary klikbaar groter maken op mobiel */
  .faq-item summary {
    padding: 16px 0;
    min-height: 44px;
  }

  /* Hero typografie iets compacter ondanks clamp() */
  .hero-sub {
    font-size: 17px;
  }

  /* Pricing-grid: kaarten mogen niet te smal worden */
  .price-card {
    padding: 24px 20px;
  }

  /* Eco-callout / eu-figure inhoud: img mag niet uitbreken */
  .eu-figure-frame img {
    max-width: 100%;
    height: auto;
  }

  /* About stats strip: 1 kolom is al gezet, padding lichter */
  .about-stats-strip {
    padding: 24px;
  }

  /* Legal card: padding lichter zodat tekst past */
  .legal-block {
    padding: 22px;
  }

  /* Security card padding lichter */
  .security-card {
    padding: 22px;
  }

  /* Value-card padding lichter */
  .value-card {
    padding: 24px;
  }

  /* Trust-strip: items mogen wrappen, gap kleiner */
  .trust-strip {
    gap: 16px 18px;
  }

  /* Carousel-tabs op smal: helemaal compact, geen min-width */
  .carousel-tab {
    padding: 14px 8px 0;
    min-width: 0;
  }
  .tab-num,
  .tab-label {
    font-size: 10px;
  }

  /* H1 onder 360px niet groter dan 36px (clamp doet meeste werk) */
  h1 {
    margin-bottom: 24px;
  }

  /* Final-cta knoppen mogen wrappen */
  .final-cta-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* About-quote nog krapper op zeer smal */
  .about-quote {
    padding: 20px;
  }

  /* Spotlight quote/check gap verkleinen zodat tekst niet wordt verstopt */
  .checklist li {
    padding: 12px 0;
    gap: 10px;
  }
}

/* --- Touch target reservering voor alle tappable elementen --- */
@media (hover: none) and (pointer: coarse) {
  .lang-btn,
  .nav-cta .btn,
  .btn,
  .price-btn,
  .carousel-tab,
  .faq-item summary {
    min-height: 44px;
  }
}

/* --- Voorkom horizontale overflow bij grid-blokken die toch te breed kunnen worden --- */
@media (max-width: 968px) {
  .legal-card,
  .about-stats-strip,
  .features-grid,
  .pricing-grid,
  .values-grid,
  .security-grid,
  .not-list {
    max-width: 100%;
  }

  /* Img elementen veiligheidsnet (mocht ergens een breedte vergeten zijn) */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   NAVIGATION — mega-menu dropdown + mobile toggle
   Toegankelijk: ARIA aria-expanded, focus-states, keyboard support via JS.
   ========================================================================== */

/* ---------- Dropdown trigger ---------- */
/* Dropdown sits inline with the nav-links list-items so it inherits position. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger must visually match a regular nav link: same font-size, same color,
   same hover behavior. Reset all default <button> chrome. */
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  line-height: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav-dropdown-trigger:hover {
  opacity: 0.6;
}

.nav-dropdown-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-dropdown-trigger .ic-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.nav-dropdown[data-open="true"] .ic-chevron,
.nav-dropdown:hover .ic-chevron {
  transform: rotate(180deg);
}

/* ---------- Mega menu panel ----------
   The wrap (.nav-dropdown) has position:relative. The menu hangs off it
   with a 14px transparent zone at the top so cursor stays in the hover area
   while moving from trigger to panel. The whole .nav-dropdown wrap is the
   hover target, so any hover within trigger or panel keeps it open. */
/* Fixed en gecentreerd op de viewport — absolute centreerde op het smalle
   nav-item, waardoor het panel links buiten beeld viel. */
.nav-mega {
  position: fixed;
  top: 50px;               /* box begint bóven de navrand: onzichtbare hover-brug */
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, 92vw);
  padding-top: 22px;       /* zichtbaar panel start pas op ~72px — geen dode zone */
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  pointer-events: none;
}

/* Open state via hover (desktop) or via JS data-open="true" (touch/click). */
.nav-dropdown:hover .nav-mega,
.nav-dropdown[data-open="true"] .nav-mega {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

.nav-mega-inner {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 20px 48px -16px rgba(10, 14, 26, 0.18);
  padding: 32px;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 24px;
}

.nav-mega-head {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 14px;
}

.nav-mega-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-mega-col a {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-mega-col a:hover,
.nav-mega-col a:focus-visible {
  background: var(--paper-warm);
  color: var(--ink);
  outline: none;
}

.nav-mega-foot {
  display: flex;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.nav-mega-link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nav-mega-link:hover,
.nav-mega-link:focus-visible {
  opacity: 0.6;
  outline: none;
}

/* ---------- Mobile burger trigger ---------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Mobile menu panel ---------- */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile-links {
  list-style: none;
  padding: 12px 16px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-mobile-links a {
  display: block;
  padding: 14px 12px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  border-radius: 8px;
  min-height: 44px;
}

.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible {
  background: var(--paper-warm);
  outline: none;
}

/* Mobile accordion for Features sub-menu */
.nav-mobile-group {
  border-radius: 8px;
  margin: 0;
}

.nav-mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  min-height: 44px;
}

.nav-mobile-group summary::-webkit-details-marker { display: none; }

.nav-mobile-group summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-mobile-group[open] summary::after {
  transform: rotate(-135deg);
}

.nav-mobile-sub {
  list-style: none;
  padding: 4px 0 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-mobile-sub-head {
  padding: 12px 12px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}

.nav-mobile-sub a {
  padding: 12px 16px;
  font-size: 15px;
}

.nav-mobile-cta {
  margin-top: 12px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  font-weight: 500;
  border: 1.5px solid var(--ink);
}

.nav-mobile-cta:hover,
.nav-mobile-cta:focus-visible {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.nav-mobile-lang {
  display: flex;
  gap: 8px;
  padding: 16px 12px 0;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}

/* ---------- Responsive switch ---------- */
@media (max-width: 1024px) {
  .nav-primary,
  .nav-cta .btn,
  .nav-cta .lang-switch {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: block;
  }
}

@media (max-width: 600px) {
  .nav-mega {
    width: 92vw;
    padding-top: 10px;
  }

  .nav-mega-inner {
    padding: 22px;
  }

  .nav-mega-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ==========================================================================
   INTEGRATIONS PAGE
   ========================================================================== */

.int-toc {
  margin-bottom: 56px;
  padding: 16px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper-warm);
}

.int-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.int-toc a {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
}

.int-toc a:hover,
.int-toc a:focus-visible {
  color: var(--accent-deep);
  outline: none;
}

.int-cat {
  margin-bottom: 64px;
  scroll-margin-top: 100px;
}

.int-cat-head {
  margin-bottom: 24px;
}

.int-cat-head h2 {
  margin: 0 0 8px;
}

.int-cat-head p {
  color: var(--ink-70);
  margin: 0;
  max-width: 640px;
}

.int-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.int-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.int-item:hover {
  border-color: var(--ink);
}

.int-name {
  font-weight: 500;
  color: var(--ink);
}

.int-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.int-api-line {
  margin: 0;
}

/* ==========================================================================
   AUDIENCE PAGE (voor-wie.html)
   ========================================================================== */

.audience-block {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: 24px;
}

.audience-block h2 {
  margin: 8px 0 12px;
}

.audience-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audience-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-70);
  font-size: 15px;
  line-height: 1.6;
}

.audience-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-deep);
  font-weight: 500;
}

.audience-cta {
  margin: 24px 0 0;
}

[id="zzp"],
[id="mkb"],
[id="accountants"] {
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Demo section (homepage)
   ========================================================================== */

.sec-demo .demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.demo-player {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  box-shadow: 0 20px 48px -16px rgba(10, 14, 26, 0.18);
}

.demo-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

@media (max-width: 960px) {
  .sec-demo .demo-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   Testimonials placeholder
   ========================================================================== */

/* ==========================================================================
   Homepage FAQ
   ========================================================================== */

.sec-home-faq h2 {
  margin: 8px 0 32px;
}

.home-faq-more {
  text-align: center;
  margin-top: 32px;
}

/* ==========================================================================
   Sticky mobile CTA
   ========================================================================== */

/* Zwevende pill r.onder i.p.v. een balk over de volle breedte */
.sticky-mobile-cta {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
}

.sticky-mobile-cta-btn {
  padding: 14px 24px;
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(232, 255, 74, 0.3);
  justify-content: center;
}

@media (max-width: 1024px) {
  .sticky-mobile-cta {
    display: block;
  }
  /* Push body bottom padding to avoid the CTA covering footer content */
  body {
    padding-bottom: 80px;
  }
}

/* ==========================================================================
   Cookie banner
   ========================================================================== */

.cookie-banner {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 95;
  background: var(--ink);
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px -8px rgba(10, 14, 26, 0.4);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.cookie-banner-title {
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 4px;
}

.cookie-banner-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.5;
}

.cookie-banner-body a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-banner-actions .btn {
  font-size: 13px;
  padding: 10px 16px;
  min-height: 40px;
}

.cookie-banner-decline {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.cookie-banner-decline:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cookie-banner-accept {
  background: var(--accent);
  color: var(--ink);
}

.cookie-banner-accept:hover {
  background: var(--accent-deep);
}

@media (max-width: 720px) {
  .cookie-banner {
    inset: auto 12px 12px 12px;
  }
  .cookie-banner-inner {
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 16px;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-banner-actions .btn {
    flex: 1;
  }
  /* Sticky CTA + cookie banner stacking: lift cookie banner above CTA */
  .cookie-banner {
    bottom: 88px;
  }
}

/* ==========================================================================
   Comparison + migration tables
   ========================================================================== */

.cmp-table-wrap {
  overflow-x: auto;
  margin: 32px 0;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.cmp-table th,
.cmp-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: top;
}

.cmp-table thead th {
  background: var(--paper-warm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.cmp-table tbody tr:last-child td {
  border-bottom: none;
}

.cmp-table .cmp-feature {
  font-weight: 500;
  color: var(--ink);
}

.cmp-table .cmp-yes {
  color: var(--ink);
}

.cmp-table .cmp-no {
  color: var(--muted);
}

/* ==========================================================================
   Status page
   ========================================================================== */

.status-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 40px 0;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #ffffff;
}

.status-name {
  font-weight: 500;
  color: var(--ink);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--ink);
}

.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
}

.status-pill.is-degraded::before { background: #f59e0b; }
.status-pill.is-down::before { background: #dc2626; }

.status-meta {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ==========================================================================
   Changelog
   ========================================================================== */

.changelog {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}

.changelog-entry {
  border-left: 2px solid var(--line-strong);
  padding-left: 24px;
}

.changelog-date {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 4px;
}

.changelog-version {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}

.changelog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.changelog-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.6;
}

.changelog-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--paper-warm);
  color: var(--ink);
  margin-top: 2px;
}

.changelog-tag.is-new { background: var(--accent); }
.changelog-tag.is-fix { background: #e0f2fe; color: #075985; }

/* ==========================================================================
   404 page
   ========================================================================== */

.notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
  text-align: center;
}

.notfound-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.04em;
  margin: 0;
}

.notfound h1 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 16px 0 12px;
}

.notfound p {
  color: var(--ink-70);
  max-width: 480px;
  margin: 0 auto 32px;
}

.notfound-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   PRICING TOGGLE (month/year)
   ========================================================================== */
.pricing-toggle {
  display: inline-flex;
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 32px;
  gap: 4px;
}

.pricing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 14px var(--font-body);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pricing-toggle-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.pricing-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pricing-toggle-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
}

.pricing-toggle-btn.is-active .pricing-toggle-badge {
  color: var(--ink);
  background: var(--accent);
}

.pricing-period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   PRICING FAQ
   ========================================================================== */
.pricing-faq {
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   HERO LEDE (definition sentence below H1)
   ========================================================================== */
.hero-lede {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 580px;
}

.hero-lede strong {
  color: var(--ink);
  font-weight: 500;
}


.signup-trust {
  padding: 32px 0;
}

.signup-trust h2 {
  margin: 0 0 24px;
}

.signup-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signup-steps li {
  position: relative;
  padding: 16px 16px 16px 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  counter-increment: step;
  font-size: 15px;
  color: var(--ink-70);
  line-height: 1.5;
}

.signup-steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-steps li strong {
  color: var(--ink);
  font-weight: 500;
}

.signup-pricing-link {
  margin-top: 12px;
  font-size: 14px;
}

.page-header .signup-pricing-link a,
.signup-pricing-link a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-pricing .sticky-mobile-cta { display: none !important; }


/* === COMPLIANCE BAND (API-/partner-due-diligence, homepage) === */
.compliance-band {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: var(--ink-surface);
  color: var(--paper);
}

.compliance-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--ledger-line-paper) 47px, var(--ledger-line-paper) 48px);
  pointer-events: none;
}

.compliance-band > * { position: relative; }
.compliance-band .section-desc { color: var(--paper-60); }

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 64px;
}

.compliance-item {
  border-top: 1px solid rgba(244, 241, 234, 0.16);
  padding-top: 22px;
}

.compliance-item .ic { width: 18px; height: 18px; color: var(--accent); }

.compliance-item h3 {
  margin: 14px 0 8px;
  font: 400 18px/1.3 'Fraunces', serif;
  letter-spacing: -0.01em;
}

.compliance-item p {
  color: var(--paper-60);
  font-size: 14px;
  line-height: 1.6;
}

.compliance-link-row { margin-top: 56px; }

.compliance-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper-85);
  text-decoration: none;
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.compliance-link:hover { color: var(--accent); }
.compliance-link:hover .ic-arrow { transform: translateX(4px); }
.compliance-link .ic { width: 14px; height: 14px; }

@media (max-width: 980px) {
  .compliance-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .compliance-band { padding: 80px 0; }
  .compliance-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
}

/* === FOOTER: geregistreerd bedrijfsadres === */
.footer-legal {
  margin-top: 22px;
  color: var(--paper-50);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

.footer-legal-label {
  display: block;
  margin-bottom: 4px;
  font: 10px 'Geist Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-legal a { color: var(--paper-60); }
.footer-legal a:hover { color: var(--paper); }

/* === LOGIN === */
.login-alt {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

/* === BTW-CALCULATOR === */
.vat-card {
  padding: 32px;
  background: var(--ink);
  border-radius: 24px;
  color: var(--paper);
  box-shadow: 0 30px 80px -20px rgba(10, 14, 26, 0.35);
}

.vat-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  color: var(--paper-50);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vat-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--paper-60);
  font: 11px 'Geist Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vat-field input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(244, 241, 234, 0.06);
  border: 1px solid rgba(244, 241, 234, 0.18);
  border-radius: var(--r-md);
  color: var(--paper);
  font: 500 24px 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.vat-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vat-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}

.vat-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(244, 241, 234, 0.06);
  border-radius: var(--r-pill);
}

.vat-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--paper-60);
  font: 12px 'Geist Mono', monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.vat-btn.is-active {
  background: var(--accent);
  color: var(--ink);
}

.vat-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vat-result {
  margin-top: 24px;
  border-top: 1px solid rgba(244, 241, 234, 0.14);
}

.vat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 241, 234, 0.08);
}

.vat-row dt { color: var(--paper-60); font-size: 14px; }

.vat-row dd {
  font: 500 18px 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.vat-row.is-total dd {
  font-size: 26px;
  color: var(--accent);
}

.vat-note {
  margin-top: 24px;
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1.6;
}

.vat-card .vat-note { color: var(--paper-60); }

.vat-cta {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}

.vat-cta p { max-width: 560px; color: var(--ink-70); }

@media (max-width: 560px) {
  .vat-card { padding: 24px 20px; }
  .vat-cta { padding: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   THEME — MIDDERNACHT-GROOTBOEK (restyle 2026-07, docs/restyle-plan.md)
   Marketing-pagina's dragen body.theme-dark; lange-tekst-secties
   daarbinnen krijgen .zone-light ("dark shell, light reading").
   ══════════════════════════════════════════════════════════════ */

body.theme-dark {
  background: var(--ink-surface);
  color: var(--paper);
}

/* ── Nav ── */
.theme-dark .site-nav {
  background: rgba(18, 22, 31, 0.85);
  border-bottom-color: rgba(244, 241, 234, 0.1);
}
.theme-dark .site-nav.is-scrolled {
  background: rgba(18, 22, 31, 0.94);
  box-shadow: 0 1px 0 rgba(244, 241, 234, 0.12), 0 4px 24px rgba(0, 0, 0, 0.3);
}
.theme-dark .logo { color: var(--paper); }
.theme-dark .logo-mark { background: var(--accent); }
.theme-dark .logo-mark::before,
.theme-dark .logo-mark::after,
.theme-dark .logo-mark span { background: var(--ink); }
.theme-dark .nav-links a,
.theme-dark .nav-dropdown-trigger { color: var(--paper-85); }
.theme-dark .nav-mega-inner {
  background: var(--ink-soft);
  border-color: rgba(244, 241, 234, 0.14);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.5);
}
.theme-dark .nav-mega-inner a { color: var(--paper-85); }
.theme-dark .nav-mobile {
  background: var(--ink-soft);
  border-top-color: rgba(244, 241, 234, 0.12);
}
.theme-dark .nav-mobile a { color: var(--paper-85); }
.theme-dark .lang-switch { background: rgba(244, 241, 234, 0.08); }
.theme-dark .lang-btn { color: var(--paper-60); }
.theme-dark .lang-btn.is-active { background: var(--paper); color: var(--ink); }

/* ── Knoppen: acid = hét CTA-moment ── */
.theme-dark .btn-primary { background: var(--accent); color: var(--ink); }
.theme-dark .btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 26px -10px var(--accent-shadow);
}
.theme-dark .btn-ghost { color: var(--paper); }
.theme-dark .btn-ghost:hover { background: rgba(244, 241, 234, 0.08); }
.theme-dark .btn:focus-visible { outline-color: var(--paper); }

/* ── Hero ── */
.theme-dark .hero::before {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--ledger-line-paper) 47px, var(--ledger-line-paper) 48px),
    linear-gradient(to right, transparent var(--rule-x), var(--accent) var(--rule-x), var(--accent) calc(var(--rule-x) + 3px), transparent calc(var(--rule-x) + 3px));
  opacity: 0.5;
}
.theme-dark .hero-gradient {
  background:
    radial-gradient(ellipse 48% 42% at 14% 40%, rgba(232, 255, 74, 0.06) 0%, transparent 62%),
    radial-gradient(ellipse 40% 50% at 86% 22%, rgba(244, 241, 234, 0.04) 0%, transparent 64%);
}
.theme-dark .eyebrow {
  background: rgba(244, 241, 234, 0.06);
  border-color: rgba(244, 241, 234, 0.18);
  color: var(--paper-85);
}
.theme-dark .hero-lede { color: var(--paper-85); }
.theme-dark .hero-sub { color: var(--paper-70); }
.theme-dark .trust-strip {
  border-top-color: rgba(244, 241, 234, 0.14);
  color: var(--paper-60);
}

/* ── Carousel ── */
.theme-dark .slide-tag { color: var(--paper-50); }
.theme-dark .slide-desc { color: var(--paper-70); }
.theme-dark .slide-meta-item { color: var(--paper-60); }
.theme-dark .slide-link { color: var(--paper); }
.theme-dark .slide-card {
  border: 1px solid rgba(244, 241, 234, 0.12);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.theme-dark .carousel-tab { color: var(--paper-50); }
.theme-dark .carousel-tab:hover,
.theme-dark .carousel-tab.is-active { color: var(--paper); }

/* ── Bank-bar & stats ── */
.theme-dark .bank-bar {
  background: transparent;
  border-bottom-color: rgba(244, 241, 234, 0.1);
}
.theme-dark .bank-bar-logos img { filter: invert(1) grayscale(1); opacity: 0.5; }
.theme-dark .bank-bar-logos img:hover { filter: invert(1) grayscale(1); opacity: 0.9; }
.theme-dark .stats-strip {
  background: rgba(244, 241, 234, 0.03);
  border-block-color: rgba(244, 241, 234, 0.1);
}
.theme-dark .stat-item { border-right-color: rgba(244, 241, 234, 0.1); }
.theme-dark .stat-num { color: var(--paper); }
.theme-dark .stat-suffix { color: var(--accent); }
.theme-dark .stat-label { color: var(--paper-50); }

/* ── Secties & features ── */
.theme-dark .section-tag { color: var(--paper-50); }
.theme-dark .section-tag::before { background: var(--accent); }
.theme-dark .section-desc { color: var(--paper-70); }
.theme-dark .features-grid {
  background: rgba(244, 241, 234, 0.12);
  border-color: rgba(244, 241, 234, 0.14);
}
.theme-dark .feature { background: var(--ink-surface); }
.theme-dark .feature:hover { background: var(--ink-soft); }
.theme-dark .feature-num {
  color: var(--paper-50);
  border-bottom-color: var(--ledger-line-paper);
}
.theme-dark .feature-icon { background: rgba(244, 241, 234, 0.07); }
.theme-dark .feature-icon::after { border-color: var(--ink-surface); }
.theme-dark .feature p { color: var(--paper-70); }
.theme-dark .eco-callout { border-block-color: rgba(244, 241, 234, 0.1); }
.theme-dark .eco-callout p { color: var(--paper-70); }

/* ── Pricing preview ── */
.theme-dark .price-card {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.14);
  color: var(--paper);
}
.theme-dark .price-card.is-featured {
  background: var(--ink);
  border-color: var(--accent);
}
.theme-dark .price-desc,
.theme-dark .price-period { color: var(--paper-50); }

/* ── Overig ── */
.theme-dark .final-meta { color: var(--paper-50); }
.theme-dark .compliance-band { border-block: 1px solid rgba(244, 241, 234, 0.1); }
.theme-dark .page-header .intro { color: var(--paper-70); }
.theme-dark .vat-note { color: var(--paper-60); }
.theme-dark .vat-cta { border-color: rgba(244, 241, 234, 0.16); }
.theme-dark .vat-cta p { color: var(--paper-70); }

/* ── Zone-light: leeszones binnen donkere pagina's ── */
.theme-dark .zone-light {
  background: var(--paper);
  color: var(--ink);
}
.theme-dark .zone-light .section-tag { color: var(--muted); }
.theme-dark .zone-light .section-tag::before { background: var(--accent-deep); }
.theme-dark .zone-light .section-desc { color: var(--ink-70); }

/* Dark: de marker wordt een volledige balk met inkt-tekst erop — paper-op-geel
   was onleesbaar; ink-op-accent haalt ~15:1 contrast. */
.theme-dark .hero h1 .italic { color: var(--ink); }
.theme-dark .hero h1 .italic::after {
  top: 0.02em;
  bottom: -0.10em;
  height: auto;
  border-radius: 8px 14px 10px 16px;
}

/* Restraint: in de pricing-grid is alleen de featured-kaart het acid-moment */
.theme-dark .price-card:not(.is-featured) .price-btn {
  background: rgba(244, 241, 234, 0.1);
  color: var(--paper);
}
.theme-dark .price-card:not(.is-featured) .price-btn:hover {
  background: rgba(244, 241, 234, 0.18);
  box-shadow: none;
}

/* ── Componenten die op licht ontworpen waren → donkere surfaces ── */
.theme-dark .value-card,
.theme-dark .legal-card,
.theme-dark .security-card {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.14);
}
.theme-dark .value-card:hover { border-color: var(--accent); }
.theme-dark .value-card p,
.theme-dark .security-card p,
.theme-dark .legal-card p,
.theme-dark .audience-list li { color: var(--paper-70); }

.theme-dark .cert-badge {
  background: rgba(244, 241, 234, 0.06);
  border-color: rgba(244, 241, 234, 0.18);
  color: var(--paper-85);
}

.theme-dark .changelog-entry {
  border-left-color: rgba(244, 241, 234, 0.25);
  color: var(--paper-60);
}
.theme-dark .changelog-version { color: var(--paper); }
.theme-dark .changelog-date { color: var(--paper-50); }

/* De oprichters-quote blijft bewust een licht accent (leesbaar crème-kaartje) */

.theme-dark .bank-bar-label,
.theme-dark .bank-bar-more { color: var(--paper-50); }

/* === SKIP-LINK (toegankelijkheid): verborgen tot toetsenbord-focus === */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 14px;
}
.skip-link:focus-visible { top: 12px; }

/* === FAQ op donkere secties (antwoorden waren ink-op-donker, ratio 1.05) === */
.theme-dark .faq-item summary { color: var(--paper); }
.theme-dark .faq-item p { color: var(--paper-70); }
.theme-dark .faq-item:hover { background: rgba(244, 241, 234, 0.03); }

.theme-dark .zone-light .faq-item summary { color: var(--ink); }
.theme-dark .zone-light .faq-item p { color: var(--ink-70); }
.theme-dark .zone-light .faq-item:hover { background: var(--paper-warm); }

/* Contrast-fixes na kleuren-audit (2026-07-03) */
.theme-dark .tab-num { color: var(--paper-50); }
.theme-dark .code-comment { color: var(--paper-50); }

/* Audit-fixes donkere pagina's (auditor-bevindingen 2026-07-03) */
.theme-dark .changelog-list li { color: var(--paper-70); }
.theme-dark .sec-not .sec-header .section-desc { color: var(--paper-70); }
.theme-dark .notfound-num { color: var(--paper); }
.theme-dark .notfound p { color: var(--paper-70); }
.theme-dark .legal-row a { color: var(--paper); }
.theme-dark .legal-row a:hover { color: var(--accent); }
.theme-dark .legal-key { color: var(--paper-50); }
.theme-dark .status-meta { color: var(--paper-50); }

/* Audit-fixes ronde 2 (payments/security/integraties/voor-wie) */
.theme-dark .pay-method {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.14);
}
.theme-dark .pay-method p { color: var(--paper-70); }
.theme-dark .int-cat-head p { color: var(--paper-70); }
.theme-dark .eu-figure figcaption { color: var(--paper-50); }
.theme-dark .int-api-line .nav-mega-link,
.theme-dark .audience-cta .nav-mega-link { color: var(--paper); }
.theme-dark .int-api-line .nav-mega-link:hover,
.theme-dark .audience-cta .nav-mega-link:hover { color: var(--accent); }
.theme-dark .security-spotlight p:last-child { color: var(--paper-70); }

/* === DARK-VARIANTEN: FAQ-randen, pricing-toggle, integraties, formulieren === */
.theme-dark .faq-item { border-bottom-color: rgba(244, 241, 234, 0.12); }

.theme-dark .pricing-toggle {
  background: rgba(244, 241, 234, 0.08);
  border-color: rgba(244, 241, 234, 0.16);
}
.theme-dark .pricing-toggle-btn { color: var(--paper-60); }
.theme-dark .pricing-toggle-btn.is-active {
  background: var(--paper);
  color: var(--ink);
}

.theme-dark .int-item {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.12);
}
.theme-dark .int-item:hover { border-color: var(--accent); }
.theme-dark .int-name { color: var(--paper); }
.theme-dark .int-tag { color: var(--paper-50); }
.theme-dark .int-toc {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.14);
  color: var(--paper);
}
.theme-dark .int-toc a { color: var(--paper-85); }

.theme-dark .form-field label { color: var(--paper-50); }
.theme-dark .form-field input,
.theme-dark .form-field textarea,
.theme-dark .form-field select {
  background: rgba(244, 241, 234, 0.06);
  border-color: rgba(244, 241, 234, 0.18);
  color: var(--paper);
}
.theme-dark .form-field input:focus,
.theme-dark .form-field textarea:focus,
.theme-dark .form-field select:focus { border-color: var(--accent); }
.theme-dark .form-trust { color: var(--paper-50); }
.theme-dark .form-feedback {
  background: rgba(232, 255, 74, 0.12);
  color: var(--paper);
}
.theme-dark .login-alt { color: var(--paper-60); }
.theme-dark .login-alt a { color: var(--paper); }

/* Pricing hover-spotlight (herbouw van het oude wisseleffect, dark-native):
   het accent volgt de kaart onder je muis — nooit twee accenten tegelijk.
   Geen licht/donker-flip meer (dat was de clash-bron), alleen accent-verhuizing. */
.theme-dark .pricing-grid .price-card:not(.is-featured):hover {
  border-color: var(--accent);
  background: rgba(244, 241, 234, 0.07);
}
.theme-dark .pricing-grid .price-card:not(.is-featured):hover .price-btn {
  background: var(--accent);
  color: var(--ink);
}
.theme-dark .pricing-grid:hover .price-card.is-featured:not(:hover) {
  border-color: rgba(244, 241, 234, 0.14);
}
.theme-dark .pricing-grid:hover .price-card.is-featured:not(:hover) .price-btn {
  background: rgba(244, 241, 234, 0.1);
  color: var(--paper);
}

/* Contact & signup op donker (laatste probe-hits) */
.theme-dark .contact-info-block h4 { color: var(--paper-50); }
.theme-dark .contact-info-block a { color: var(--paper); }
.theme-dark .contact-info-block a:hover { color: var(--accent); }
.theme-dark .signup-pricing-link a { color: var(--paper); }
.theme-dark .signup-pricing-link a:hover { color: var(--accent); }

/* "Wat we niet doen"-kaarten op donker (waren nog crème) */
.theme-dark .not-list li {
  background: rgba(244, 241, 234, 0.04);
  border-color: rgba(244, 241, 234, 0.14);
}
.theme-dark .not-list p { color: var(--paper-70); }
.theme-dark .not-list h4 { color: var(--paper); }
.theme-dark .not-x {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(232, 255, 74, 0.1);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(232, 255, 74, 0.35), 0 0 18px -6px var(--accent-shadow);
}

/* Signup-stappen op donker (waren nog crème) */
.theme-dark .signup-steps li {
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.12);
  color: var(--paper-70);
}
.theme-dark .signup-steps li strong { color: var(--paper); }
.theme-dark .signup-steps li::before {
  background: rgba(232, 255, 74, 0.1);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(232, 255, 74, 0.35);
}

/* Mega-menu kopjes leesbaar op het donkere panel (waren muted-op-donker, ~2.5:1) */
.theme-dark .nav-mega-head { color: var(--paper-50); }
.theme-dark .nav-mega-col a:hover,
.theme-dark .nav-mega-col a:focus-visible {
  background: rgba(244, 241, 234, 0.08);
  color: var(--paper);
}
.theme-dark .nav-mega-inner .nav-mega-link:hover { color: var(--accent); }

/* iPhone/mobiel op dark: hamburger-streepjes en sticky CTA-balk */
.theme-dark .nav-toggle span { background: var(--paper); }
.theme-dark .nav-mobile-group summary { color: var(--paper-85); }
.theme-dark .nav-mobile a.nav-mobile-cta {
  background: var(--accent);
  color: var(--ink);
}
/* De EU-kaart is licht: waardes terug naar inkt (p:last-child-regel hierboven
   raakte ze per ongeluk — de kaartwaardes zijn óók 'laatste p' in hun blok) */
.theme-dark .eu-figure p.eu-meta-value { color: var(--ink); }

/* Vergelijkingstabel op donker */
.theme-dark .cmp-table-wrap { border-color: rgba(244, 241, 234, 0.14); }
.theme-dark .cmp-table { background: rgba(244, 241, 234, 0.03); }
.theme-dark .cmp-table th,
.theme-dark .cmp-table td { border-bottom-color: rgba(244, 241, 234, 0.1); }
.theme-dark .cmp-table td { color: var(--paper-70); }
.theme-dark .cmp-table thead th {
  background: rgba(244, 241, 234, 0.06);
  color: var(--paper-60);
}
.theme-dark .cmp-table .cmp-feature { color: var(--paper); }
.theme-dark .cmp-table .cmp-yes { color: var(--paper); }
.theme-dark .cmp-table .cmp-no { color: var(--paper-50); }