/* DONNAJAMES — global styles */
:root{
  /* Theme tokens — dark by default. Redefined under [data-theme="light"]. */
  --bg:#141414;
  --bg-elev:#1a1a1a;
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.78);
  --ink-muted:rgba(255,255,255,.62);
  --ink-dim:rgba(255,255,255,.55);
  --ink-faint:rgba(255,255,255,.5);
  --surface-card-1:rgba(255,255,255,.025);
  --surface-card-2:rgba(255,255,255,.01);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --hover-bg:rgba(255,255,255,.05);
  --hover-line:rgba(255,255,255,.22);
  --chip-bg:rgba(255,255,255,.03);
  --input-bg:rgba(255,255,255,.04);
  --footer-bg:#0d0d0d;
  --tag-light-border:rgba(20,20,20,.18);

  --cta:#C8542E;
  --cta-hover:#b04524;
  --notariaat:#B67FBC;
  --financieel:#5377C5;
  --doc:#EDEDE9;
  --doc-ink:#141414;

  /* Back-compat aliases (existing code reads these) */
  --line-dark:var(--line);
  --line-darker:var(--line-soft);
  --muted:var(--ink-muted);
  --muted-strong:var(--ink-soft);
}

[data-theme="light"]{
  --bg:#f7f4ee;
  --bg-elev:#ffffff;
  --ink:#141414;
  --ink-soft:rgba(20,20,20,.78);
  --ink-muted:rgba(20,20,20,.62);
  --ink-dim:rgba(20,20,20,.55);
  --ink-faint:rgba(20,20,20,.5);
  --surface-card-1:#ffffff;
  --surface-card-2:#ffffff;
  --line:rgba(20,20,20,.10);
  --line-soft:rgba(20,20,20,.06);
  --hover-bg:rgba(20,20,20,.04);
  --hover-line:rgba(20,20,20,.28);
  --chip-bg:rgba(20,20,20,.03);
  --input-bg:rgba(20,20,20,.04);
  --footer-bg:#efe9dd;
  --doc:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
  transition:background .25s ease, color .25s ease;
}

/* Type rhythm */
.h-display{
  font-weight:800;
  letter-spacing:-0.045em;
  line-height:0.95;
}
.h1{ font-weight:800; letter-spacing:-0.035em; line-height:1.02 }
.h2{ font-weight:700; letter-spacing:-0.025em; line-height:1.05 }
.eyebrow{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; color:var(--cta);
}
.eyebrow-light{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  font-weight:600; color:var(--ink-dim);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:15px; letter-spacing:-0.005em;
  cursor:pointer; transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration:none; border:1px solid transparent;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--cta); color:#fff }
.btn-primary:hover{ background:var(--cta-hover) }
.btn-ghost-dark{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn-ghost-dark:hover{ background:var(--hover-bg); border-color:var(--hover-line) }
.btn-whitepaper{ background:var(--notariaat); color:#fff; border-color:transparent }
.btn-whitepaper:hover{ background:#a06aa6 }
.btn-ghost-light{ background:transparent; color:var(--doc-ink); border-color:rgba(20,20,20,.18) }
.btn-ghost-light:hover{ border-color:var(--doc-ink); background:rgba(20,20,20,.04) }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:999px }

/* Cards */
.card-dark{
  background:linear-gradient(180deg,var(--surface-card-1),var(--surface-card-2));
  border:1px solid var(--line);
  border-radius:14px;
}
.card-doc{ background:#fff; border:1px solid rgba(20,20,20,.08); border-radius:14px }

/* Gradient blobs (hero atmosphere) */
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; pointer-events:none }

/* Subtle film grain on dark sections */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Light "document" section — Vechtstede-esque */
.doc-section{ background:var(--doc); color:var(--doc-ink) }
[data-theme="light"] .doc-section{ background:#ffffff }
.doc-section .eyebrow{ color:var(--cta) }
.doc-section .muted{ color:rgba(20,20,20,.62) }
.doc-rule{ height:1px; background:rgba(20,20,20,.14); width:100% }

/* Tight containers */
.container-x{ max-width:1240px; margin:0 auto; padding:0 28px }
@media(max-width:640px){ .container-x{ padding:0 20px } }

/* Bronnen + platform preview */
@media(max-width:900px){
  .bronnen-grid{ grid-template-columns:1fr !important }
  .callouts-grid{ grid-template-columns:1fr !important }
  .platform-preview .float-left, .platform-preview .float-right{ position:static !important; width:100% !important; margin-top:18px !important }
  .platform-preview{ min-height:auto !important }
}

/* CTA split (text + photo) */
@media(max-width:860px){
  .cta-split{ grid-template-columns:1fr !important; gap:40px !important; text-align:left }
  .cta-split figure{ order:-1 }
}

/* Aanpak page */
@media(max-width:1024px){
  .veil-usps{ grid-template-columns: repeat(2, 1fr) !important }
  .aanpak-chevrons{ grid-template-columns: repeat(6, 1fr) !important }
  .aanpak-detail{ grid-template-columns: 1fr !important; gap: 22px !important }
}
@media(max-width:640px){
  .veil-usps{ grid-template-columns: 1fr !important }
  .aanpak-chevrons{ grid-template-columns: repeat(3, 1fr) !important }
}

/* Kennisbank grid + persbericht + featured whitepaper */
.pb-card{ transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pb-card:hover{ border-color: rgba(200,84,46,.5) !important; box-shadow: 0 18px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
/* Persbericht article body */
.pb-body{ color: var(--muted-strong); }
.pb-body > p{ font-size: 17px; line-height: 1.72; margin: 0 0 20px; }
.pb-body > h2{ font-size: clamp(21px,2vw,26px); font-weight: 700; letter-spacing: -0.02em; margin: 36px 0 12px; color: var(--ink); }
.pb-quote{ margin: 32px 0; padding: 24px 28px; border-left: 3px solid var(--cta); background: linear-gradient(90deg, rgba(200,84,46,.06), transparent 80%); border-radius: 0 10px 10px 0; }
.pb-quote blockquote{ margin: 0; font-size: clamp(18px,1.6vw,22px); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.pb-quote figcaption{ margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
@media(max-width:820px){
  .kb-grid{ grid-template-columns: 1fr !important }
  .kb-featured{ grid-template-columns: 1fr !important }
  .kb-featured > div:last-child{ display: none !important }
  .pb-card{ grid-template-columns: 1fr !important; gap: 14px !important; align-items: start !important; }
  .pb-contact{ grid-template-columns: 1fr !important; }
}

/* Nav */
.nav-link{
  color:var(--ink-soft); font-size:14px; font-weight:500;
  padding:8px 4px; border-radius:4px; text-decoration:none;
  transition:color .15s ease;
}
.nav-link:hover{ color:var(--ink) }
.nav-link.active{ color:var(--ink) }

/* Mobile nav panel */
@keyframes navPanelIn{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }

/* Page enter animation */
.page-fade{ opacity:1 }
@keyframes pf{ from{opacity:0.3; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

/* Section reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform:translateY(0) }

/* Misc */
.dot{ width:6px; height:6px; border-radius:50%; background:var(--cta); display:inline-block }
.divider-dark{ height:1px; background:var(--line-dark) }
.text-pretty{ text-wrap:pretty }
.text-balance{ text-wrap:balance }

/* Quote */
.quote-mark{
  font-family:'Inter',sans-serif; font-weight:800; font-size:64px; line-height:1;
  color:var(--cta); display:block;
}

/* Step number */
.step-num{
  font-weight:800; font-size:11px; letter-spacing:0.18em;
  color:var(--cta);
}

/* Form-ish input */
.input{
  background:var(--input-bg); border:1px solid var(--line);
  color:var(--ink); border-radius:8px; padding:12px 14px; width:100%;
  font:inherit; font-size:14px;
}
.input:focus{ outline:none; border-color:rgba(200,84,46,.6); background:var(--hover-bg) }

/* Tag */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:0.04em;
  border:1px solid var(--line); color:var(--ink-soft);
  background:var(--chip-bg);
}
.tag-light{
  background:transparent; border-color:rgba(20,20,20,.18); color:var(--doc-ink);
}
.tag-notariaat{ border-color:rgba(182,127,188,.45); color:#D9B8DD; background:rgba(182,127,188,.08) }
.tag-financieel{ border-color:rgba(83,119,197,.45); color:#A8BEEC; background:rgba(83,119,197,.08) }

/* Underline link */
.ulink{
  color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(127,127,127,.3);
  padding-bottom:1px; transition:border-color .15s ease;
}
.ulink:hover{ border-color:var(--ink) }
.ulink-light{ color:var(--doc-ink); border-bottom-color:rgba(20,20,20,.3) }
.ulink-light:hover{ border-bottom-color:var(--doc-ink) }

/* Soft inner shadow for doc cards */
.doc-card{
  background:#fff; border:1px solid rgba(20,20,20,.08); border-radius:14px;
  padding:28px;
  color:var(--doc-ink);
}
[data-theme="light"] .doc-card{ background:#fff; box-shadow:0 1px 2px rgba(20,20,20,.04) }

/* Light-mode treatments for tag accents and quotes */
[data-theme="light"] .tag-notariaat{ color:#7a4f81; background:rgba(182,127,188,.10); border-color:rgba(182,127,188,.40) }
[data-theme="light"] .tag-financieel{ color:#2e4a87; background:rgba(83,119,197,.10); border-color:rgba(83,119,197,.40) }

/* ----- Logo image (theme-aware) ----- */
.logo-img{ display:block; height:18px; width:auto }
.logo-img.is-light{ display:none }
[data-theme="light"] .logo-img.is-dark{ display:none }
[data-theme="light"] .logo-img.is-light{ display:block }

/* ----- Sector cards — invert per theme ----- */
.sector-card{
  /* base values overridden by inline tint gradient */
  --sector-surface-1: var(--surface-card-1);
  --sector-surface-2: var(--surface-card-2);
  --sector-ink: var(--ink);
  --sector-muted: var(--muted);
}
[data-theme="light"] .sector-card{
  /* Match the rest of the light page: light surface, dark ink */
  --sector-surface-1: var(--surface-card-1);
  --sector-surface-2: var(--surface-card-2);
  --sector-ink: var(--ink);
  --sector-muted: var(--muted);
}

/* ----- Aanpak steps — invert per theme ----- */
.aanpak-step{
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.aanpak-step .aanpak-step-desc{ color: var(--muted) }
.aanpak-step .aanpak-step-time{ color: var(--ink-faint) }
[data-theme="light"] .aanpak-step{
  background: #141414;
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
[data-theme="light"] .aanpak-step .aanpak-step-desc{ color: rgba(255,255,255,.62) }
[data-theme="light"] .aanpak-step .aanpak-step-time{ color: rgba(255,255,255,.5) }
[data-theme="light"] .aanpak-step.is-first{ background: linear-gradient(180deg, rgba(200,84,46,.18), #141414) }

/* ----- Vertrouwensdriehoek ----- */
.trust-triangle{ min-height: 540px; }
.tri-node{ position: absolute; width: 320px; max-width: 42%; }
.tri-top{ top: 0; left: 50%; transform: translateX(-50%); }
.tri-left{ left: 0; bottom: 0; }
.tri-right{ right: 0; bottom: 0; }
@media (max-width: 860px){
  .trust-triangle{ min-height: 0 !important; display: flex; flex-direction: column; gap: 14px; }
  .tri-node{ position: static !important; width: 100% !important; max-width: none !important; transform: none !important; }
  .trust-triangle .tri-lines{ display: none !important; }
}

/* ----- Demo modal ----- */
.modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,8,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:24px; animation: modalIn .25s ease }
@keyframes modalIn{ from{opacity:0} to{opacity:1} }
.modal-card{ width:100%; max-width:560px; background:var(--bg-elev); border:1px solid var(--line); border-radius:18px;
  padding:36px; color:var(--ink); position:relative; box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation: modalCardIn .3s cubic-bezier(.2,.8,.3,1) }
.modal-card.is-video{ max-width:900px; padding:0; overflow:hidden }
@keyframes modalCardIn{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
.modal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:rgba(127,127,127,.15); border:0; color:var(--ink); font-size:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1 }
.modal-close:hover{ background:rgba(127,127,127,.25) }
.modal-form{ display:flex; flex-direction:column; gap:14px }
.modal-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted-strong); font-weight:500 }
.modal-form .input{ background:var(--input-bg); color:var(--ink) }
.modal-form .input::placeholder{ color:var(--ink-faint) }
.modal-err{ color:#e64242; font-size:12px; min-height:1em }
.modal-fineprint{ font-size:11px; color:var(--ink-faint); line-height:1.5; margin-top:4px }