/* ---- Landing (variant D) — premium accents (scoped) ---- */
.d-hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 88% -10%, var(--primary-light) 0%, rgba(238,241,255,0) 55%),
  radial-gradient(80% 70% at -5% 110%, #FFF4EE 0%, rgba(255,244,238,0) 50%); }
.d-hero__inner { max-width: var(--content-max); margin: 0 auto; padding: 80px 24px 88px; position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr; gap: 60px; align-items: center; }
.d-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--hairline); font: 600 13px/1 var(--font-sans); color: var(--ink); box-shadow: var(--elev-card); }
.d-eyebrow .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent); color: var(--ink); font: 700 11px/1 var(--font-sans); }
.d-h1 { font: 800 60px/1.03 var(--font-sans); letter-spacing: -2px; color: var(--ink); margin: 22px 0 20px; max-width: 580px; }
.d-h1 em { font-style: normal; color: var(--primary); }
.d-lead { font: 400 19px/1.6 var(--font-sans); color: var(--body); max-width: 500px; margin-bottom: 30px; }
.d-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.d-proof { display: flex; align-items: center; gap: 16px; }
.d-proof__avs { display: flex; }
.d-proof__avs span { width: 34px; height: 34px; border-radius: var(--r-pill); border: 2px solid #fff; display: grid; place-items: center; font: 700 12px/1 var(--font-sans); color: #fff; margin-left: -8px; }
.d-proof__avs span:first-child { margin-left: 0; }
.d-proof__txt { font: 400 13px/1.45 var(--font-sans); color: var(--muted); }
.d-proof__txt b { color: var(--ink); }

.d-visual { position: relative; }
.d-visual .runcard { position: relative; z-index: 2; box-shadow: 0 30px 70px rgba(13,19,33,.14), 0 8px 18px rgba(13,19,33,.06); }
.d-float { position: absolute; z-index: 3; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 44px rgba(13,19,33,.16); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.d-float--kpi { top: -28px; right: 6px; }
.d-float--vat { bottom: -26px; left: -22px; }
.d-float__ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.d-float__v { font: 700 20px/1 var(--font-sans); color: var(--ink); letter-spacing: -.5px; }
.d-float__l { font: 400 11px/1.3 var(--font-sans); color: var(--muted); margin-top: 2px; }
.d-visual__halo { position: absolute; inset: -8% -6% -8% -6%; z-index: 1; background: #fff; border-radius: 24px; opacity: .5; }

.d-feature { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
.d-feature__main { background: var(--dark); border-radius: var(--r-xl); padding: 40px; color: #fff; position: relative; overflow: hidden; }
.d-feature__main h3 { font: 700 26px/1.2 var(--font-sans); letter-spacing: -.5px; margin-bottom: 12px; max-width: 360px; }
.d-feature__main p { font: 400 15px/1.6 var(--font-sans); color: var(--on-dark-soft); max-width: 380px; }
.d-vatgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.d-vatchip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px; }
.d-vatchip .r { font: 700 18px/1 var(--font-sans); color: #fff; }
.d-vatchip .c { font: 400 11px/1.3 var(--font-sans); color: var(--on-dark-soft); margin-top: 4px; }
.d-feature__side { display: flex; flex-direction: column; gap: 16px; }
.d-mini { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 22px; flex: 1; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.d-mini__ic { width: 42px; height: 42px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: grid; place-items: center; margin-bottom: 14px; }
.d-mini h4 { font: 600 16px/1.3 var(--font-sans); color: var(--ink); margin-bottom: 6px; }
.d-mini p { font: 400 13px/1.5 var(--font-sans); color: var(--muted); }

@media (max-width: 980px) {
  .d-hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .d-h1 { font-size: 44px; letter-spacing: -1.2px; }
  .d-feature { grid-template-columns: 1fr; }
  .d-float--vat { left: 0; }
}

/* ---- Geen horizontale overflow op de landing (clip breekt sticky niet) ---- */
html, body { overflow-x: clip; }

/* ---- Nav: desktop menu-wrapper ---- */
.nav__inner { position: relative; z-index: 60; }
.nav__menu { display: flex; flex: 1; align-items: center; gap: 34px; }

/* Donkere transparante scrim achter het uitklapmenu (mobiel) */
.nav__backdrop { display: none; position: fixed; inset: 0; background: rgba(13, 19, 33, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 55; }

/* ---- Mobiele nav (hamburger, uitklap als overlay) ---- */
.nav__toggle { display: none; margin-left: auto; width: 42px; height: 42px; padding: 0; border: 1px solid var(--hairline); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle-close { display: none; }
.nav.open .nav__toggle-open { display: none; }
.nav.open .nav__toggle-close { display: block; }

@media (max-width: 980px) {
  .nav__toggle { display: inline-flex; }
  /* Menu valt als overlay onder de balk — duwt de site niet omlaag */
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 14px;
    background: #fff; border-bottom: 1px solid var(--hairline);
    box-shadow: var(--elev-card); padding: 18px 24px 22px; z-index: 60;
  }
  .nav.open .nav__menu { display: flex; }
  .nav.open .nav__backdrop { display: block; }
  .nav__menu .nav__links { display: flex; flex-direction: column; gap: 2px; }
  .nav__menu .nav__links a { padding: 12px 4px; border-bottom: 1px solid var(--hairline); }
  .nav__menu .nav__cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-left: 0; }
  .nav__menu .nav__cta .btn { width: 100%; justify-content: center; }
  .nav__menu .lang-toggle { align-self: flex-start; }
}

/* ---- Prijskaarten: 4 naast elkaar (desktop), 2×2 (tablet), gestapeld (mobiel) ---- */
.price-cards { grid-template-columns: repeat(4, 1fr); max-width: 1140px; gap: 16px; align-items: stretch; }
/* CTA-knoppen onderaan uitlijnen over alle kaarten (gelijke hoogte + knop naar onderen) */
.price-cards .price-card { display: flex; flex-direction: column; }
.price-cards .price-card > .btn { margin-top: auto; }
/* "Op aanvraag" is tekst, geen bedrag -> iets kleiner dan een prijs, maar niet te klein */
.price-card--ent .price-card__amount .num { font-size: 30px; letter-spacing: -.6px; }
/* Alle omschrijvingen zijn nu 1 regel -> consistente afstand naar de prijs.
   Bedrag-blok vaste hoogte zodat prijzen, dividers en features over alle kaarten uitlijnen. */
.price-cards .price-card__amount { min-height: 52px; align-items: baseline; }
/* Notitie onder de prijzen breder zodat 'btw' niet alleen op de volgende regel valt */
.price-note { max-width: 760px; }
@media (max-width: 1024px) {
  .price-cards { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 18px; }
}
@media (max-width: 760px) {
  .price-cards { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
}

/* ===== Juridische pagina's (privacyverklaring e.d.) ===== */
.legal { max-width: 820px; margin: 0 auto; padding: calc(var(--nav-h) + 56px) 24px 72px; line-height: 1.65; color: var(--body); }
.legal h1 { font-size: 32px; margin: 0 0 8px; color: var(--ink); }
.legal h2 { font-size: 22px; margin: 36px 0 12px; color: var(--ink); }
.legal p, .legal li { font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--primary); text-decoration: underline; }
.legal__updated { color: var(--muted); margin: 0 0 32px; }
.legal__note { color: var(--muted); font-size: 14px; }
.legal__tablewrap { overflow-x: auto; margin: 8px 0 4px; }
.legal__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.legal__table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--hairline-strong); }
.legal__table td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }