@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/v20-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v26-cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYgzbARA_n8IsQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v26-cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbARA_n8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v26-cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/v26-cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/v26-cY9AfjOCX1hbuyalUrK439DyjIJFJpeBZQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/v26-cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* =========================================================================
   8eonAI — refonte façon 187n.ai
   DA uit echte meting (getComputedStyle op 187n.ai):
     fond #161514 · texte #F4F2EE · gedempt #A39D92 · link #8C8884
     koppen serif 400, letter-spacing negatief · body sans 16/24
   Vrije font-equivalenten: Newsreader (serif) + Inter (sans).
   ========================================================================= */

:root {
  /* --- kleuren (gemeten tokens) --- */
  --bg:        #17181a;
  --bg-2:      #1d1f22;   /* iets lichter paneel */
  --bg-3:      #232529;   /* kaart / hover */
  --ink:       #F4F2EE;   /* crème, hoofdtekst + accent */
  --ink-2:     #A39D92;   /* gedempt / secundair */
  --ink-3:     #726C62;   /* nog verder gedempt / meta */
  --link:      #9A948A;
  --hair:      rgba(244,242,238,.07);   /* haarlijnen (subtieler = premium) */
  --hair-2:    rgba(244,242,238,.12);
  --accent:    #5aa469;   /* zacht groen — enkel voor kleine accenten/booking */
  --accent-ink:#04120a;

  /* --- typografie --- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- vorm --- */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;
  --pill: 999px;

  /* --- ritme (ruimer = premium) --- */
  --maxw: 1160px;
  --gut: clamp(22px, 5vw, 44px);
  --section: clamp(96px, 13vw, 176px);
}

/* reset-aanvulling (harness levert al een minimale reset op artifacts;
   dit is een echte site, dus volledige reset hier) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* anker-doelen landen onder de vaste header */
:target { scroll-margin-top: 90px; }
section[id], [id].section { scroll-margin-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(244,242,238,.18); }

/* ---------------------------------------------------------------- layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(48px,7vw,88px) 0; }
.narrow { max-width: 760px; }
.center { text-align: center; }

/* ---------------------------------------------------------------- type */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.05;
}
h1 {
  font-size: clamp(2.8rem, 6.6vw, 5rem);
  line-height: 1.02;
  margin: 0;
}
h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  margin: 0 0 .55em;
  letter-spacing: -0.028em;
}
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0 0 .4em; letter-spacing:-0.02em; }
p  { margin: 0 0 1.1em; }
.lede {
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0 0 1.8em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--ink-3);
  display: inline-block;
}
.muted { color: var(--ink-2); }
.serif-em { font-family: var(--serif); font-style: italic; color: var(--ink-2); }
em { font-style: italic; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 500;
  padding: .82em 1.5em;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
  line-height: 1;
}
.btn svg { width: 1em; height: 1em; }
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { transform: translateY(-2px); background: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--sm { padding: .6em 1.15em; font-size: .86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--ink-2); font-size: .95rem;
  transition: color .2s ease, gap .2s ease;
  /* raakbaar op een telefoon zonder de regel visueel te verplaatsen */
  padding: .5rem 0; margin: -.5rem 0;
}
.arrow-link:hover { color: var(--ink); gap: .75em; }
.arrow-link svg { width: .95em; height: .95em; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(23,24,26,.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--hair);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
}
.brand {
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: .5em;
}
.brand b { font-weight: 400; }
.brand .dot { color: var(--ink-2); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-links a { color: var(--ink-2); font-size: .92rem; transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 1.2rem; }

/* ── taalkiezer in de balk bovenaan ── */
.taal { position: relative; }
.taal-knop {
  display: inline-flex; align-items: center; gap: .45em;
  background: none; border: 1px solid var(--hair); border-radius: 999px;
  color: var(--ink-2); font: inherit; font-size: .82rem; letter-spacing: .04em;
  padding: .5em .9em; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.taal-knop:hover, .taal[data-open] .taal-knop { border-color: var(--hair-2); color: var(--ink); }
.taal-lijst {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--hair-2); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.44);
  display: grid; gap: 2px;
}
.taal-lijst a {
  display: block; padding: .6em .8em; border-radius: 8px;
  color: var(--ink-2); font-size: .9rem;
  transition: background .2s ease, color .2s ease;
}
.taal-lijst a:hover { background: rgba(244,242,238,.06); color: var(--ink); }
.taal-lijst a[aria-current] { color: var(--warm); }
@media (max-width: 900px){
  .taal-knop { padding: .45em .7em; }
  .taal-lijst { right: auto; left: 0; }
}
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; color: var(--ink);
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  margin: 5px auto; transition: transform .3s ease, opacity .3s ease;
}
.nav-open .nav-toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links, .nav-cta .nav-desktop-cta {
    position: fixed; inset: 70px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--hair);
    padding: 1rem var(--gut) 2rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-links a { padding: .9rem 0; width: 100%; border-bottom: 1px solid var(--hair); font-size: 1.05rem; }
  .nav-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-cta .btn { display: none; }
  .nav-open .nav-cta .mobile-cta { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding: 168px 0 var(--section); position: relative; }
.hero h1 { max-width: 15ch; }
.hero h1 .dim { color: var(--ink-2); }
.hero .lede { max-width: 52ch; margin: 1.6rem 0 2.4rem; }
.hero-meta {
  margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 2.5rem 3.5rem; align-items: baseline;
}
.hero-meta .stat b {
  font-family: var(--serif); font-size: 2rem; font-weight: 400; display: block; letter-spacing:-.02em;
}
.hero-meta .stat span { color: var(--ink-2); font-size: .88rem; }

/* ---------------------------------------------------------------- generic blocks */
/* Tekst die je niet ziet, maar die voorleessoftware en Google wel lezen.
   Handig voor een kop die het ontwerp niet nodig heeft. */
.alleen-voorlezen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split {
  display: grid; grid-template-columns: 0.8fr 1.1fr; gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 860px){ .split { grid-template-columns: 1fr; gap: 2rem; } }

/* card */
.card {
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 32px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.card:hover { border-color: var(--hair-2); }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  font-family: var(--serif); font-size: 1.1rem; color: var(--ink-3);
  display: block; margin-bottom: 1rem;
}

/* numbered process steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px,3vw,40px);
  padding: clamp(24px,3vw,36px) 0; border-top: 1px solid var(--hair);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--hair); }
.step .idx { font-family: var(--serif); font-size: 1.6rem; color: var(--ink-3); }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-2); margin: 0; max-width: 60ch; }

/* keep / not-do lists */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: .9rem; color: var(--ink-2); }
.check-list li b { color: var(--ink); font-weight: 500; }
.check-list .ic { margin-top: .15em; color: var(--ink); }
.check-list--no .ic { color: var(--ink-3); }

/* dashboards teaser strip */
.dash-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,20px); }
@media (max-width: 820px){ .dash-strip { grid-template-columns: 1fr; } }

/* browser-frame card (gallery) */
.frame {
  border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--bg-2); overflow: hidden;
  transition: border-color .3s ease, transform .35s ease;
  display: flex; flex-direction: column;
}
.frame:hover { border-color: var(--hair-2); transform: translateY(-4px); }
.frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--hair); background: var(--bg-3);
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); opacity:.55; display:block; }
.frame-bar .url {
  margin-left: 10px; font-size: .72rem; color: var(--ink-3);
  font-family: var(--sans); letter-spacing: .01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame-shot { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--bg-3); }
.frame-shot .placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color: var(--ink-3); font-family: var(--serif); font-size: 2rem; letter-spacing:-.02em;
}
.frame-shot img { width:100%; height:100%; object-fit: cover; object-position: top center; transition: transform .6s ease; }
.frame:hover .frame-shot img { transform: scale(1.04); }
.frame-body { padding: 20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.frame-body .tag { font-size: .72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-3); margin-bottom:.7rem; }
.frame-body h3 { margin-bottom: .5rem; }
.frame-body p { color: var(--ink-2); font-size: .92rem; flex:1; margin-bottom: 1.2rem; }

/* FAQ */
.faq { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--ink); font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.4rem);
  letter-spacing: -.02em;
  padding: 1.5rem 3rem 1.5rem 0; position: relative;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-q .pm { flex: none; width: 20px; height: 20px; position: relative; }
.faq-q .pm::before, .faq-q .pm::after {
  content: ""; position: absolute; background: var(--ink-2); transition: transform .3s ease;
}
.faq-q .pm::before { top: 9.5px; left: 0; width: 20px; height: 1.5px; }
.faq-q .pm::after  { left: 9.5px; top: 0; width: 1.5px; height: 20px; }
.faq-item.open .pm::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 0 0 1.6rem; color: var(--ink-2); max-width: 68ch; }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* placeholder banner (cases) */
.placeholder-note {
  border: 1px dashed var(--hair-2); border-radius: var(--r);
  padding: 1rem 1.2rem; color: var(--ink-3); font-size: .85rem;
  display: flex; gap: .7rem; align-items: center; margin-bottom: 2rem;
}
.placeholder-note .badge {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--hair-2); border-radius: var(--pill); padding: .25em .7em; color: var(--ink-2); flex:none;
}

/* big closing CTA */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 18ch; margin-inline: auto; }
.cta-final .lede { max-width: 46ch; margin: 1.2rem auto 2.4rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--hair); padding: clamp(56px,8vw,88px) 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px){ .footer-top { grid-template-columns: 1fr; } }
.footer-brand .brand { font-size: 1.5rem; margin-bottom: 1rem; }
.footer-brand p { color: var(--ink-2); font-size: .9rem; max-width: 34ch; }
.footer-col .footer-kop { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1.1rem; font-weight: 500; }
.footer-col a, .footer-col span { display: block; color: var(--ink-2); font-size: .9rem; margin-bottom: .7rem; transition: color .2s ease; }
/* Op een telefoon zijn dit tikdoelen, geen muisdoelen. Padding in plaats van
   marge, zodat de hele regel raakbaar is zonder dat de lijst groter oogt. */
@media (max-width: 820px){
  .footer-col a { padding: .68rem 0; margin-bottom: 0; }
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: clamp(48px,7vw,72px); padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  color: var(--ink-3); font-size: .82rem;
}
.footer-bottom .nap { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }

/* ---------------------------------------------------------------- legal / prose pages */
.prose { max-width: 760px; }
/* melding op vertaalde juridische pagina's: het Nederlands is leidend */
.jur-let-op {
  display: flex; align-items: flex-start; gap: .6em;
  margin: 0 0 2.4rem; padding: .9em 1.1em;
  border: 1px solid var(--hair-2); border-left: 2px solid var(--warm);
  border-radius: 10px; background: rgba(201,104,63,.06);
  color: var(--ink-2); font-size: .88rem; line-height: 1.5;
}
.jur-let-op svg { flex: none; margin-top: .18em; color: var(--warm); }
.jur-let-op a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }
.jur-let-op a:hover { border-color: var(--warm); }
.prose h1 { font-size: clamp(2.2rem,4.5vw,3.2rem); margin-bottom: .4rem; }
.prose .updated { color: var(--ink-3); font-size: .85rem; margin-bottom: 3rem; }
.prose h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); margin: 2.6rem 0 .8rem; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }
.prose a:hover { border-bottom-color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border: 1px solid var(--hair); vertical-align: top; color: var(--ink-2); }
.prose th { color: var(--ink); font-weight: 500; background: var(--bg-2); }
.legal-index { display: grid; gap: .6rem; margin: 2rem 0; }
.legal-index a {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.1rem 1.3rem; border:1px solid var(--hair); border-radius: var(--r);
  color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color .2s ease, background .2s ease;
}
.legal-index a:hover { border-color: var(--hair-2); background: var(--bg-2); }
.callout {
  border: 1px solid var(--hair-2); border-left: 2px solid var(--ink-2);
  border-radius: var(--r-sm); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
  color: var(--ink-2); font-size: .92rem; background: var(--bg-2);
}

/* ---------------------------------------------------------------- booking page */
.booking-split { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,5vw,72px); align-items:start; }
@media (max-width: 900px){ .booking-split { grid-template-columns: 1fr; } }
.booking-side .lede { margin-bottom: 2rem; }
.booking-list { list-style:none; padding:0; margin: 0 0 2rem; display:grid; gap:1.1rem; }
.booking-list li { display:grid; grid-template-columns: 22px 1fr; gap:.8rem; color: var(--ink-2); }
.booking-list .ic { color: var(--ink); margin-top:.1em; }
.calendly-wrap { border:1px solid var(--hair); border-radius: var(--r); overflow:hidden; min-height: 700px; background: var(--bg-2); }
.calendly-inline-widget { min-width: 320px; height: 720px; }

/* ---------------------------------------------------------------- cookie banner */
.cookie-banner {
  position: fixed; left: 20px; bottom: 20px; transform: translateY(calc(100% + 40px));
  width: min(400px, calc(100vw - 40px)); z-index: 200;
  background: var(--bg-2); border: 1px solid var(--hair-2); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { font-size: .82rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 .8rem; }
.cookie-banner a { color: var(--ink); border-bottom: 1px solid var(--hair-2); }
.cookie-actions { display:flex; flex-wrap:wrap; gap: .6rem; }

/* ---------------------------------------------------------------- reveal animation (progressive) */
/* alleen verbergen als JS actief is (klasse .js op <html>), zodat no-js zichtbaar blijft */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
/* line-by-line word reveal for hero */
.word { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}
/* fail-safe: als JS uitstaat/faalt, blijft niets onzichtbaar */
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:2rem}
.stack > * + * { margin-top: 1.1rem; }
.pill-tag {
  display:inline-block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--hair-2); border-radius: var(--pill); padding:.35em .9em; color: var(--ink-2);
}

/* =========================================================================
   APP-FEEL / DEPTH SYSTEEM  (monochroom crème, façon eon-refonte)
   Ambient glows · glass live-card · 3D cursor-tilt · hover-lift
   ========================================================================= */

/* --- ambient glows: zachte crème-lichtbronnen achter secties --- */
.glow {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(60px); opacity: .5; will-change: transform;
}
.glow--hero {
  width: 62vw; height: 62vw; max-width: 820px; max-height: 820px;
  top: -16%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(244,242,238,.10) 0%, rgba(244,242,238,.05) 34%, rgba(244,242,238,0) 68%);
  opacity: .9;
}
.glow--l {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  left: -12%; top: 20%;
  background: radial-gradient(circle at 50% 50%, rgba(244,242,238,.06), rgba(244,242,238,0) 70%);
}
.glow--r {
  width: 44vw; height: 44vw; max-width: 620px; max-height: 620px;
  right: -14%; bottom: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(244,242,238,.055), rgba(244,242,238,0) 70%);
}
/* secties met glow moeten stapelen boven de glow */
.section, .hero { position: relative; }
.section > .container, .hero > .container { position: relative; z-index: 1; }

/* fijne grain-loze vignette onderaan de hero voor diepte */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 0;
  background: linear-gradient(to bottom, rgba(23,24,26,0), rgba(23,24,26,.6));
  pointer-events: none;
}

/* --- glass live-card (Mission-Control-achtig) --- */
.live-card {
  position: relative;
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(244,242,238,.05), rgba(244,242,238,.015));
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: 20px 22px;
  box-shadow: 0 1px 0 rgba(244,242,238,.06) inset, 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.live-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 15% 0%, rgba(244,242,238,.08), rgba(244,242,238,0) 55%);
}
.live-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; position: relative;
}
.live-dot {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.live-dot i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 0 rgba(244,242,238,.5); animation: livepulse 2.4s infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(244,242,238,.45); }
  70% { box-shadow: 0 0 0 7px rgba(244,242,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(244,242,238,0); }
}
.live-card-tag { font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; }
.live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; position: relative; }
.live-metric b {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -.02em; display: block; line-height: 1;
}
.live-metric span { font-size: .74rem; color: var(--ink-2); display: block; margin-top: .4rem; }
.live-metric + .live-metric { border-left: 1px solid var(--hair); padding-left: 16px; }

@media (prefers-reduced-motion: reduce) { .live-dot i { animation: none; } }

/* --- kaart-hover (statisch, geen 3D-rotatie) --- */
.js .tilt {
  transition: border-color .3s ease, box-shadow .35s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.js .tilt.card:hover, .js .tilt.frame:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  border-color: var(--hair-2);
  transform: translateY(-3px);
}
/* glans die met de kaart meebeweegt */
.tilt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(360px 200px at var(--mx,50%) var(--my,0%), rgba(244,242,238,.10), rgba(244,242,238,0) 60%);
}
.js .tilt:hover .tilt-shine { opacity: 1; }
.card, .frame { position: relative; }

/* hover-lift op kaarten die geen tilt hebben (zoals process/legal) */
.card { transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.32); }

@media (prefers-reduced-motion: reduce) {
  .js .tilt { transform: none !important; }
  .card:hover { transform: none; }
}

/* =========================================================================
   PRODUCT-WIDGETS  (visuele mini-UI, façon eon-refonte, monochroom crème)
   Illustratieve data — bewust generiek, geen echte klantcijfers.
   ========================================================================= */

/* widget-paneel binnen een kaart */
.widget {
  margin-top: 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(244,242,238,.035), rgba(244,242,238,.008));
  padding: 16px 16px 14px;
}
.widget-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: .72rem; color: var(--ink-3); letter-spacing: .02em;
}
.widget-top .dot { display: inline-flex; align-items: center; gap: .5em; color: var(--ink-2); }
.widget-top .dot i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 0 rgba(244,242,238,.5); animation: livepulse 2.6s infinite;
}
@media (prefers-reduced-motion: reduce){ .widget-top .dot i { animation:none; } }

/* progress-rijen (bron / metric + balk + waarde) */
.bars { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; }
.bar-row .lbl { font-size: .82rem; color: var(--ink-2); }
.bar-track { height: 5px; border-radius: 999px; background: rgba(244,242,238,.10); overflow: hidden; }
.bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(244,242,238,.55), var(--ink));
  width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1);
}
.reveal.in .bar-fill, .bar-fill.fill { width: var(--w, 60%); }
.bar-row .val { font-size: .82rem; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* waveform (agent-opname) */
.wave { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin-bottom: 14px; }
.wave i {
  flex: 1; background: linear-gradient(180deg, var(--ink), rgba(244,242,238,.3));
  border-radius: 2px; height: 30%; opacity: .8;
}

/* chips (flows / integraties) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: .78rem; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: 999px; padding: .4em .85em;
  background: rgba(244,242,238,.02);
}
.chip--on { color: var(--ink); border-color: rgba(244,242,238,.28); }

/* mini stat-rij binnen widget */
.wstat { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.wstat > div + div { border-left: 1px solid var(--hair); padding-left: 12px; }
.wstat b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; display: block; line-height: 1; }
.wstat span { font-size: .7rem; color: var(--ink-3); display: block; margin-top: .35rem; }

/* activity-rijen (Mission Control) */
.act { display: grid; gap: 0; margin-top: 12px; }
.act-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--hair); font-size: .82rem; color: var(--ink-2);
}
.act-row b { color: var(--ink); font-weight: 500; }
.act-row .t { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* =========================================================================
   VERGELIJKING  (Zonder / Met 8eonAI)
   ========================================================================= */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,24px); }
@media (max-width: 700px){ .compare { grid-template-columns: 1fr; } }
.compare-panel {
  border: 1px solid var(--hair); border-radius: var(--r); padding: clamp(22px,2.6vw,30px);
  background: var(--bg-2);
}
.compare-panel.is-good {
  border-color: var(--hair-2);
  background: linear-gradient(180deg, rgba(244,242,238,.045), rgba(244,242,238,.01));
}
.compare-panel h4 {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.2rem; display: flex; align-items: center; gap: .5em; font-weight: 500;
}
.compare-panel.is-good h4 { color: var(--ink-2); }
.compare-panel.is-good h4 i { width: 6px; height:6px; border-radius:50%; background: var(--ink); }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .95rem; }
.compare-list li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; }
.compare-list .m { color: var(--ink-3); margin-top: .05em; }
.compare-list.good li { color: var(--ink); }
.compare-list:not(.good) li { color: var(--ink-2); }
.compare-list .ic { color: var(--ink); margin-top: .1em; }

/* =========================================================================
   HAIRLINE DIVIDER-GRID  (multi-koloms structuur, façon refonte)
   ========================================================================= */
.divgrid { display: grid; gap: 0; }
.divgrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.divgrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.divgrid > .cell {
  padding: clamp(24px, 2.4vw, 34px);
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.divgrid.cols-4 > .cell:nth-child(4n+1),
.divgrid.cols-2 > .cell:nth-child(2n+1) { border-left: 0; }
@media (max-width: 900px){
  .divgrid.cols-4 { grid-template-columns: 1fr 1fr; }
  .divgrid.cols-4 > .cell:nth-child(odd) { border-left: 0; }
  .divgrid.cols-4 > .cell:nth-child(even) { border-left: 1px solid var(--hair); }
}
@media (max-width: 560px){
  .divgrid.cols-4, .divgrid.cols-2 { grid-template-columns: 1fr; }
  .divgrid > .cell { border-left: 0 !important; }
}
.cell .cell-visual { min-height: 92px; display: flex; align-items: center; margin-bottom: 20px; }
.cell h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.cell p { color: var(--ink-2); font-size: .9rem; margin: 0; }

/* =========================================================================
   SECTIE-TOON VARIATIE  (ritme via subtiele achtergrondtonen + hairline-top)
   ========================================================================= */
.tone-1 { background: #17181a; }                                  /* basis */
.tone-2 { background: #141517; border-top: 1px solid var(--hair); } /* iets dieper */
.tone-3 {                                                          /* zacht opgelicht paneel */
  background: linear-gradient(180deg, #1b1d20, #16171a);
  border-top: 1px solid var(--hair);
}
.tone-hair { border-top: 1px solid var(--hair); }

/* =========================================================================
   CHARTS  (SVG line/area, KPI-tiles, donut, sparkline) — monochroom crème
   ========================================================================= */
/* --- line / area groei-grafiek --- */
.chart {
  position: relative; border: 1px solid var(--hair); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(244,242,238,.045), rgba(244,242,238,.008));
  padding: 20px 20px 14px; overflow: hidden;
}
.chart-top { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 6px; }
.chart-top .lab { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.chart-top .big { font-family:var(--serif); font-size:clamp(1.6rem,2.4vw,2.1rem); letter-spacing:-.02em; }
.chart-top .delta { font-size:.8rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:.3em; }
.chart svg { display:block; width:100%; height:auto; }
.chart .grid-line { stroke: var(--hair); stroke-width:1; }
.chart .area { fill: url(#areaGrad); }
.chart .line { fill:none; stroke: var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart .dot { fill: var(--bg); stroke: var(--ink); stroke-width:2; }
.chart .xlab { fill: var(--ink-3); font-size:10px; font-family:var(--sans); }
/* animatie: lijn tekent zich (alleen bij in-view, respecteert reduced motion) */
.js .chart .line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.js .chart.in .line { animation: draw 1.6s cubic-bezier(.16,1,.3,1) forwards; }
.js .chart .area { opacity: 0; }
.js .chart.in .area { animation: fadein 1.4s ease .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .js .chart .line{ stroke-dashoffset:0 !important; animation:none !important; }
  .js .chart .area{ opacity:1 !important; animation:none !important; }
}

/* --- KPI-tiles: groot getal + label + sparkline/pijl --- */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
@media (max-width:820px){ .kpi-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .kpi-row{ grid-template-columns:1fr; } }
.kpi {
  padding: clamp(20px,2.2vw,28px) clamp(18px,1.8vw,24px);
  border-top:1px solid var(--hair); border-left:1px solid var(--hair);
}
.kpi-row .kpi:nth-child(4n+1){ border-left:0; }
@media (max-width:820px){ .kpi-row .kpi:nth-child(2n+1){ border-left:0; } .kpi-row .kpi:nth-child(4n+1){ border-left:0; } }
@media (max-width:460px){ .kpi{ border-left:0 !important; } }
.kpi .k-lab { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.7rem; }
.kpi .k-num { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.03em; line-height:1; }
.kpi .k-foot { display:flex; align-items:center; gap:.5em; margin-top:.8rem; font-size:.78rem; color:var(--ink-2); }
.kpi .trend { display:inline-flex; align-items:center; gap:.25em; color:var(--ink); }
.kpi .spark { width:64px; height:20px; }
.kpi .spark path { fill:none; stroke:var(--ink-2); stroke-width:1.5; }

/* --- donut / gauge --- */
.donut { position:relative; width:88px; height:88px; }
.donut svg { transform:rotate(-90deg); }
.donut .track { fill:none; stroke:var(--hair); stroke-width:7; }
.donut .val { fill:none; stroke:var(--ink); stroke-width:7; stroke-linecap:round;
  stroke-dasharray: var(--c, 220); stroke-dashoffset: var(--o, 60); }
.js .donut .val { transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.donut .center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.2rem; letter-spacing:-.02em; }
.donut-row { display:flex; align-items:center; gap:16px; }
.donut-row .d-txt b { display:block; font-family:var(--serif); font-size:1.1rem; }
.donut-row .d-txt span { font-size:.8rem; color:var(--ink-2); }

/* --- inline sparkline in widget --- */
.sparkline { width:100%; height:34px; margin:6px 0 12px; }
.sparkline path.l { fill:none; stroke:var(--ink); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.sparkline path.a { fill:url(#spGrad); opacity:.9; }

/* --- hero split: tekst links, grafiek rechts --- */
.hero-split { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items:center; }
@media (max-width: 900px){ .hero-split { grid-template-columns:1fr; gap:2.4rem; } }
/* Iets kleiner dan de standaard-h1, zodat de twee koptekstregels naast de
   grafiek elk op één regel passen in plaats van halverwege af te breken. */
.hero-split h1 { max-width: 24ch; font-size: clamp(2.5rem, 4.6vw, 3.9rem); }

/* --- hero-kaart: gemeld vs. wat er overblijft ---------------------------
   Twee balken onder elkaar per regel. De bovenste is wat het platform
   meldt, de onderste wat er na alle kosten overblijft. Het verschil in
   lengte is de boodschap, dus de balken delen dezelfde schaal. */
.gap-rows { margin-top: 4px; }
.gap-row + .gap-row { margin-top: 18px; }
.gap-name {
  display: block; font-size: .78rem; color: var(--ink-2); margin-bottom: 8px;
}
.gap-bars { display: grid; gap: 6px; }
.gap-bar {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 30px; width: var(--w); min-width: max-content;
  border-radius: 5px; padding: 0 10px; box-sizing: border-box;
}
.gap-bar b {
  font-family: var(--serif); font-weight: 400; font-size: 1rem; letter-spacing: -.01em;
  line-height: 1; white-space: nowrap;
}
.gap-bar--claim { background: rgba(244,242,238,.13); color: var(--ink); }
.gap-bar--real  { background: var(--warm-soft); color: var(--ink);
                  box-shadow: inset 0 0 0 1px rgba(201,104,63,.45); }
/* De balken groeien pas als de kaart in beeld komt. */
.js .gap-bar { width: 0; transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.js .chart.in .gap-bar { width: var(--w); }
.js .chart.in .gap-bar--real { transition-delay: .18s; }

/* De conclusie onder elk balkenpaar — dit is wat de bezoeker moet onthouden. */
.gap-diff {
  display: block; margin-top: 7px; font-size: .74rem; color: var(--warm);
}
.gap-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: .72rem; color: var(--ink-2);
}
.gap-legend span { display: inline-flex; align-items: center; gap: .45em; }
.gap-legend .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.gap-legend .sw--claim { background: rgba(244,242,238,.13); }
.gap-legend .sw--real  { background: var(--warm-soft); box-shadow: inset 0 0 0 1px rgba(201,104,63,.45); }
@media (prefers-reduced-motion: reduce) {
  .js .gap-bar { width: var(--w); transition: none; }
}
/* De vertalingen zijn langer dan het Nederlands; iets kleiner houdt de kop
   ook in het Engels, Duits en Spaans op twee regels. */
html:lang(en) .hero-split h1,
html:lang(de) .hero-split h1,
html:lang(es) .hero-split h1 { font-size: clamp(2.3rem, 3.7vw, 3.1rem); }
/* Elke .line is een eigen koptekstregel: de breuk hoort tussen de twee zinsdelen
   te vallen, niet op de plek waar de tekst toevallig de rand raakt. */
.hero-split h1 .line { display: block; }
/* Onder de kolomsplitsing is de kop volle breedte; daar past hij zonder limiet. */
@media (max-width: 900px){ .hero-split h1 { max-width: none; } }

/* =========================================================================
   BEWEGENDE ACHTERGROND  (187n-stijl god-rays / lichtvegen, warm accent)
   ========================================================================= */
:root {
  --warm:       #c9683f;   /* terracotta accent (zoals 187n) */
  --warm-soft:  rgba(201,104,63,.20);
}
.has-rays { position: relative; isolation: isolate; }
.rays {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.rays canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* warme gloed-vlek als basislaag onder de canvas-vegen */
.rays::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(75% 60% at 78% 6%, rgba(201,104,63,.28), rgba(201,104,63,0) 62%),
    radial-gradient(65% 55% at 12% 96%, rgba(201,104,63,.12), rgba(244,242,238,0) 60%),
    radial-gradient(50% 45% at 45% 40%, rgba(244,242,238,.05), rgba(244,242,238,0) 65%);
}
.has-rays > *:not(.rays) { position: relative; z-index: 1; }
.rays { z-index: 0; }
/* fallback: geen JS/canvas -> alleen de statische gloed hierboven */
@media (prefers-reduced-motion: reduce) { .rays canvas { display: none; } }

/* warme rand-accent voor de 'goede' vergelijkings-panel + live-dot */
.live-dot i, .widget-top .dot i, .compare-panel.is-good h4 i { background: var(--warm); }
.live-dot i { box-shadow: 0 0 0 0 var(--warm-soft); animation: livepulseWarm 2.4s infinite; }
@keyframes livepulseWarm {
  0% { box-shadow: 0 0 0 0 rgba(201,104,63,.4); }
  70% { box-shadow: 0 0 0 7px rgba(201,104,63,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,104,63,0); }
}

/* =========================================================================
   PREMIUM CONSULTANCY-ELEMENTEN
   Before/After ROI-tabel · big-stat trio · audit-status kaart
   ========================================================================= */

/* --- ROI before/after tabel --- */
.roi {
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(244,242,238,.03), rgba(244,242,238,.005));
}
.roi-row {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; align-items: center;
  gap: 16px; padding: clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border-top: 1px solid var(--hair);
}
.roi-row:first-child { border-top: 0; }
.roi-head { color: var(--ink-3); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.roi-row .dept { display: flex; align-items: center; gap: .7em; color: var(--ink); font-weight: 500; }
.roi-row .dept .ic { width: 28px; height: 28px; border:1px solid var(--hair-2); border-radius: 7px; display:grid; place-items:center; color: var(--ink-2); flex:none; }
.roi-row .cell-lab { display: block; font-size: .68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.roi-row .before { color: var(--ink-2); }
.roi-row .after { color: var(--ink); }
.roi-row .result { color: var(--warm); font-weight: 500; }
.roi-row.is-active { background: rgba(201,104,63,.06); box-shadow: inset 3px 0 0 var(--warm); }
@media (max-width: 820px){
  .roi-head-row { display: none; }
  .roi-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .roi-row .dept { grid-column: 1 / -1; margin-bottom: .3rem; }
}

/* --- big-stat trio --- */
.stat-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
@media (max-width: 720px){ .stat-trio { grid-template-columns: 1fr; } }
.stat-cell { padding: clamp(28px,3.2vw,44px) clamp(24px,2.4vw,32px); border-left: 1px solid var(--hair); }
.stat-trio .stat-cell:first-child { border-left: 0; }
@media (max-width: 720px){ .stat-cell { border-left: 0; border-top: 1px solid var(--hair); } .stat-trio .stat-cell:first-child { border-top: 0; } }
.stat-cell .s-top { color: var(--ink-2); font-size: .92rem; margin-bottom: clamp(28px,4vw,52px); max-width: 22ch; }
.stat-cell .s-num { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem,5vw,3.6rem); letter-spacing: -.03em; line-height: 1; }
.stat-cell .s-num small { font-size: .55em; color: var(--ink-2); }
.stat-cell .s-lab { color: var(--ink-3); font-size: .84rem; margin-top: .7rem; }

/* --- audit / status kaart --- */
.audit {
  border: 1px solid var(--hair-2); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(244,242,238,.05), rgba(244,242,238,.01));
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding: clamp(22px,2.4vw,30px); box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.audit-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.3rem; }
.audit-top .st { color: var(--ink-2); font-size:.9rem; }
.audit-top .ok { color: var(--warm); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.audit-list { list-style:none; margin:0; padding:0; }
.audit-list li {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 0; border-top:1px solid var(--hair); font-size:.95rem;
}
.audit-list li:first-child { border-top:0; }
.audit-list .name { color: var(--ink); display:flex; align-items:center; gap:.7em; }
.audit-list .name .dotc { width:6px; height:6px; border-radius:50%; background: var(--warm); flex:none; }
.audit-list .st2 { color: var(--ink-3); font-size:.82rem; display:flex; align-items:center; gap:.6em; }
.audit-list .chk { width:18px; height:18px; border-radius:50%; border:1px solid var(--hair-2); display:grid; place-items:center; color: var(--ink); }
.audit-foot { margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--hair); }

/* --- werkwijze split: intro + audit-kaart links, stappen rechts --- */
.werkwijze-split { display:grid; grid-template-columns: .8fr 1.1fr; gap: clamp(32px,5vw,72px); align-items:start; }
@media (max-width: 900px){ .werkwijze-split { grid-template-columns:1fr; gap:2.5rem; } }
@media (min-width: 901px){ .werkwijze-split > div:first-child { position: sticky; top: 100px; } }
.werkwijze-split .steps .step:first-child { border-top: 0; padding-top: 0; }

/* =========================================================================
   LIVE WIDGETS  (tool-logo's + bewegende chips/rijen/cijfers)
   ========================================================================= */
/* logo-glyph in labels */
.lg { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: middle; }
.bar-row .lbl { display: flex; align-items: center; gap: .5em; }
.bar-row { grid-template-columns: 108px 1fr auto; }  /* iets breder voor logo+naam */

/* bronnen-rij met logo-chips (mission control) */
.src-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.src {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: .35em .8em;
  background: rgba(244,242,238,.02);
}
.src .lg { width: 14px; height: 14px; }

/* chips die om de beurt 'aan' gaan */
.chip { transition: color .5s ease, border-color .5s ease, background .5s ease; }
.chip.chip--on {
  color: var(--ink); border-color: rgba(201,104,63,.5);
  background: rgba(201,104,63,.08);
}

/* activity-rijen: verschijnen 1-voor-1 */
.js [data-acts] .act-row { opacity: 0; transform: translateY(6px); }
.js [data-acts].run .act-row { animation: actIn .5s cubic-bezier(.16,1,.3,1) forwards; }
.js [data-acts].run .act-row:nth-child(1){ animation-delay: .05s; }
.js [data-acts].run .act-row:nth-child(2){ animation-delay: .35s; }
.js [data-acts].run .act-row:nth-child(3){ animation-delay: .65s; }
.js [data-acts].run .act-row:nth-child(4){ animation-delay: .95s; }
@keyframes actIn { to { opacity:1; transform:none; } }

/* live 'nu'-rij krijgt warme stip */
.act-row .t { position: relative; }

@media (prefers-reduced-motion: reduce){
  .js [data-acts] .act-row { opacity:1 !important; transform:none !important; animation:none !important; }
}

/* =========================================================================
   WORKFLOW-KWADRANTEN  (2×2 hairline-grid met live mini-UI, façon 187n)
   Donker, crème + warm accent, eigen animaties.
   ========================================================================= */
.wf-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, rgba(244,242,238,.02), rgba(244,242,238,.004));
}
@media (max-width: 820px){ .wf-grid { grid-template-columns: 1fr; } }
.wf-cell {
  padding: clamp(24px,2.6vw,36px);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
  display: flex; flex-direction: column;
}
.wf-grid .wf-cell:nth-child(-n+2){ border-top: 0; }
.wf-grid .wf-cell:nth-child(odd){ border-left: 0; }
@media (max-width: 820px){
  .wf-cell { border-left: 0 !important; border-top: 1px solid var(--hair) !important; }
  .wf-grid .wf-cell:first-child { border-top: 0 !important; }
}
.wf-viz { min-height: 190px; margin-bottom: 26px; }
.wf-cell h3 { margin-bottom: .5rem; }
.wf-cell > p { color: var(--ink-2); font-size: .92rem; margin: 0; }

/* pill met warme live-dot (bovenaan elke viz) */
.wf-pill {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .74rem; color: var(--ink-2);
  border: 1px solid rgba(201,104,63,.35); border-radius: 999px; padding: .4em .85em;
  background: rgba(201,104,63,.06); margin-bottom: 16px;
}
.wf-pill i { width:6px; height:6px; border-radius:50%; background: var(--warm);
  box-shadow: 0 0 0 0 rgba(201,104,63,.5); animation: livepulseWarm 2.2s infinite; }
.wf-pill b { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce){ .wf-pill i { animation:none; } }

/* --- ticket-rijen die 1-voor-1 afvinken --- */
.tick { display: grid; gap: 8px; }
.tick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--hair); border-radius: 7px; padding: 10px 12px;
  background: rgba(244,242,238,.02); transition: border-color .4s ease, background .4s ease;
}
.tick-row .lab b { display:block; color: var(--ink); font-size: .88rem; font-weight: 500; }
.tick-row .lab span { color: var(--ink-3); font-size: .74rem; }
.tick-row .mark {
  width: 20px; height: 20px; border-radius: 50%; flex:none;
  border: 1px solid var(--hair-2); display:grid; place-items:center; color: var(--warm);
  opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.tick-row.done { border-color: rgba(201,104,63,.35); background: rgba(201,104,63,.05); }
.tick-row.done .mark { opacity: 1; transform: scale(1); }

/* --- scan-box (content & ads) --- */
.scan {
  position: relative; height: 150px; border: 1px solid var(--hair); border-radius: var(--r);
  background: rgba(244,242,238,.015); overflow: hidden; display:grid; place-items:center;
}
.scan .glyph { width: 46px; height: 46px; border: 1.5px solid var(--hair-2); border-radius: 10px; color: var(--ink-2); display:grid; place-items:center; }
.scan .line {
  position:absolute; left:0; right:0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--warm), transparent);
  box-shadow: 0 0 12px 2px rgba(201,104,63,.4); top: 0;
}
.js .scan .line { animation: scanMove 2.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scanMove { 0%{top:8%;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:92%;opacity:0} }
.scan .tag { position:absolute; bottom:10px; left:12px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce){ .js .scan .line { animation:none; opacity:.5; top:50%; } }

/* --- flow-nodes met verbindingslijnen (email & retentie) --- */
.flow { position: relative; display: grid; gap: 14px; padding: 4px 0; }
.flow-node {
  display: inline-flex; align-items: center; gap: .5em; align-self: start;
  border: 1px solid var(--hair-2); border-radius: 8px; padding: 9px 13px;
  background: rgba(244,242,238,.02); font-size: .84rem; color: var(--ink-2);
  transition: border-color .5s ease, color .5s ease, background .5s ease, box-shadow .5s ease;
}
.flow-node .nb { width:6px; height:6px; border-radius:50%; background: var(--ink-3); transition: background .5s ease; }
.flow-node:nth-child(2){ margin-left: 42px; }
.flow-node:nth-child(3){ margin-left: 84px; }
.flow-node.on {
  border-color: rgba(201,104,63,.5); color: var(--ink); background: rgba(201,104,63,.07);
  box-shadow: 0 6px 20px rgba(201,104,63,.12);
}
.flow-node.on .nb { background: var(--warm); }
/* verbindingslijnen */
.flow::before, .flow::after {
  content:""; position:absolute; width: 1px; background: var(--hair-2); left: 21px;
}
.flow::before { top: 34px; height: 28px; }
.flow::after { top: 82px; height: 28px; left: 63px; }

/* --- eigen 8eon-logo in de nav/footer --- */
.brand-logo { height: 26px; width: auto; display: block; }
.footer-brand .brand-logo { height: 34px; }
.brand.has-img { gap: .55em; }

/* =========================================================================
   ADS-CAMPAGNE TABEL  (Meta Ads Manager-stijl, monochroom crème)
   ========================================================================= */
.ads {
  border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden;
  background: rgba(244,242,238,.015); font-size: .8rem;
}
.ads-head, .ads-row {
  display: grid;
  grid-template-columns: 1.5fr .9fr .7fr .7fr .8fr;
  align-items: center; gap: 8px; padding: 9px 12px;
}
.ads-head {
  color: var(--ink-3); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--hair); background: rgba(244,242,238,.02);
}
.ads-row { border-top: 1px solid var(--hair); }
.ads-row:first-of-type { border-top: 0; }
.ads-row .camp { display: flex; align-items: center; gap: .5em; color: var(--ink); font-weight: 500; }
.ads-row .camp .st { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); flex: none; box-shadow: 0 0 0 0 rgba(201,104,63,.5); }
.ads-row.live .camp .st { animation: livepulseWarm 2.4s infinite; }
.ads-row .num { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.ads-row .num.pos { color: var(--warm); }
.ads-row .num b { color: var(--ink); font-weight: 500; }
.ads-head span:not(:first-child), .ads-row .num { text-align: right; }
.ads-metric { transition: color .3s ease, opacity .3s ease; }
.ads-metric.flick { color: var(--ink); opacity: 1; }
@media (prefers-reduced-motion: reduce){ .ads-row.live .camp .st { animation: none; } }
/* onder de tabel: samenvatting */
.ads-foot { display:flex; justify-content:space-between; align-items:center; padding: 10px 12px; border-top:1px solid var(--hair); color: var(--ink-3); font-size:.72rem; }
.ads-foot b { color: var(--ink); font-family: var(--serif); font-weight:400; font-size:1rem; letter-spacing:-.02em; }
@media (max-width: 520px){
  .ads-head span:nth-child(4), .ads-head span:nth-child(5),
  .ads-row .num:nth-child(4), .ads-row .num:nth-child(5) { display:none; }
  .ads-head, .ads-row { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* --- compacte merk-check scan-strip (boven de ads-tabel) --- */
.scanbar {
  position: relative; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 11px 13px;
  background: rgba(244,242,238,.015); overflow: hidden; margin-bottom: 12px;
}
.scanbar .thumb {
  width: 40px; height: 30px; border-radius: 5px; border: 1px solid var(--hair-2); flex: none;
  display: grid; place-items: center; color: var(--ink-3); position: relative; overflow: hidden;
}
.scanbar .thumb svg { width: 18px; height: 18px; }
.scanbar .meta { flex: 1; min-width: 0; }
.scanbar .meta b { display: block; color: var(--ink); font-size: .84rem; font-weight: 500; }
.scanbar .meta span { color: var(--ink-3); font-size: .72rem; }
.scanbar .verdict {
  flex: none; display: inline-flex; align-items: center; gap: .4em;
  font-size: .72rem; color: var(--warm); border: 1px solid rgba(201,104,63,.4);
  border-radius: 999px; padding: .3em .7em; opacity: 0; transition: opacity .4s ease;
}
.scanbar.done .verdict { opacity: 1; }
/* scan-lijn die over de thumb + balk veegt */
.scanbar .sline {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--warm), transparent);
  box-shadow: 0 0 12px 2px rgba(201,104,63,.45); left: 0; opacity: 0;
}
.js .scanbar .sline { animation: scanX 3.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scanX { 0%{left:0;opacity:0} 10%{opacity:1} 88%{opacity:1} 100%{left:100%;opacity:0} }
@media (prefers-reduced-motion: reduce){ .js .scanbar .sline{ animation:none; opacity:0 } .scanbar .verdict{ opacity:1 } }

/* =========================================================================
   MINI-DASHBOARD MOCKUP  (in de teaser-frames, crème-stijl)
   ========================================================================= */
.mini {
  position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, rgba(244,242,238,.035), rgba(244,242,238,.008));
}
.mini-top { display:flex; align-items:center; justify-content:space-between; }
.mini-top .t { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.mini-top .d { display:inline-flex; align-items:center; gap:.4em; font-size:.62rem; color:var(--ink-3); }
.mini-top .d i { width:5px; height:5px; border-radius:50%; background:var(--warm); }
/* KPI-rij */
.mini-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mini-kpi { border:1px solid var(--hair); border-radius:5px; padding:7px 8px; background:rgba(244,242,238,.02); }
.mini-kpi b { display:block; font-family:var(--serif); font-weight:400; font-size:.98rem; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.mini-kpi span { display:block; font-size:.56rem; color:var(--ink-3); margin-top:3px; }
/* mini area-chart (svg) */
.mini-chart { flex:1; min-height:44px; border:1px solid var(--hair); border-radius:5px; padding:6px; background:rgba(244,242,238,.015); position:relative; overflow:hidden; }
.mini-chart svg { width:100%; height:100%; display:block; }
.mini-chart .ln { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mini-chart .ar { fill:url(#miniGrad); opacity:.5; }
/* mini-rijen (lijstweergave) */
.mini-rows { display:grid; gap:5px; }
.mini-row { display:flex; align-items:center; justify-content:space-between; font-size:.64rem; color:var(--ink-2); }
.mini-row .bar { height:4px; border-radius:2px; background:rgba(244,242,238,.12); flex:1; margin:0 8px; position:relative; overflow:hidden; }
.mini-row .bar::after { content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w,60%); background:linear-gradient(90deg,rgba(244,242,238,.5),var(--ink)); border-radius:2px; }
.mini-row .v { color:var(--ink); font-variant-numeric:tabular-nums; }
.mini-row .dot { width:6px; height:6px; border-radius:50%; flex:none; }
/* frame-shot moet de mini kunnen dragen (was placeholder) */
.frame-shot { background: var(--bg-3); }

/* =========================================================================
   PREMIUM-POLISH  (rustiger, ruimer, verfijnder)
   ========================================================================= */
/* meer lucht onder sectie-intro's */
.section .narrow.reveal { margin-bottom: clamp(2.5rem, 4vw, 3.8rem); }
/* ruimere grids */
.grid { gap: clamp(20px, 2.4vw, 32px); }
.grid-3 { gap: clamp(20px, 2.2vw, 30px); }
/* kaarten: zachtere schaduw, subtielere rand, meer padding */
.card {
  padding: clamp(26px, 2.8vw, 38px);
  box-shadow: none;
  background: linear-gradient(180deg, rgba(244,242,238,.022), rgba(244,242,238,.006));
}
.card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.28); transform: translateY(-2px); }
/* hero iets ruimer */
/* De balk bovenaan is ongeveer 71px hoog. Daar houden we net genoeg ruimte
   onder, zodat er geen leeg gat ontstaat op telefoon en op desktop. */
.hero { padding: clamp(104px,11vw,132px) 0 clamp(96px,12vw,150px); }
.hero .lede { margin: 1.8rem 0 2.6rem; }
/* lede in secties net iets rustiger uitgelijnd */
.section .lede { max-width: 62ch; }
/* haarlijn-rules subtieler + ruimer */
.rule { background: var(--hair); }
/* eyebrow-lijntje iets langer/verfijnder */
.eyebrow::before { width: 32px; }
/* buttons iets ruimer voor premium gevoel */
.btn { padding: .92em 1.7em; letter-spacing: .01em; }
.btn--sm { padding: .64em 1.25em; }
/* kaart-num rustiger */
.card .num { color: var(--ink-3); opacity: .7; }
/* widget/tabel randen consistent zacht */
.widget, .ads, .roi, .stat-trio, .kpi-row, .live-card, .audit, .compare-panel, .frame, .chart {
  border-color: var(--hair);
}
/* iets meer ruimte tussen workflow-kwadranten inhoud */
.wf-cell { padding: clamp(28px, 3vw, 42px); }
.wf-viz { margin-bottom: 30px; }
/* FAQ ruimer */
.faq-q { padding: 1.7rem 3rem 1.7rem 0; }
/* footer ademt meer */
.site-footer { padding: clamp(72px,9vw,110px) 0 44px; }

/* =========================================================================
   PERSONA-KAARTEN  ("Werk jij zo?") — herkenning per type ondernemer
   ========================================================================= */
.persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px){ .persona-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .persona-grid { grid-template-columns: 1fr; } }
.persona {
  padding: clamp(26px,2.8vw,36px);
  border-left: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .3s ease;
}
.persona-grid .persona:nth-child(4n+1){ border-left: 0; }
@media (max-width: 900px){
  .persona-grid .persona:nth-child(odd){ border-left: 0; }
  .persona-grid .persona:nth-child(even){ border-left: 1px solid var(--hair); }
  .persona-grid .persona:nth-child(n+3){ border-top: 1px solid var(--hair); }
}
@media (max-width: 520px){
  .persona { border-left: 0 !important; }
  .persona-grid .persona + .persona { border-top: 1px solid var(--hair); }
}
.persona:hover { background: rgba(244,242,238,.02); }
.persona .p-ic {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-2);
  background: rgba(244,242,238,.02);
}
.persona h3 { font-size: 1.15rem; margin: 0; }
.persona .p-quote {
  color: var(--ink); font-size: .95rem; line-height: 1.5;
  font-family: var(--serif); font-style: italic;
}
.persona .p-pain { color: var(--ink-2); font-size: .88rem; margin: 0; }

/* =========================================================================
   E-BOOKS  — kaarten met omslag + download
   ========================================================================= */
.ebooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); }
@media (max-width: 900px){ .ebooks { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .ebooks { grid-template-columns: 1fr; } }
.ebook {
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden;
  background: var(--bg-2); display: flex; flex-direction: column;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ebook:hover { border-color: var(--hair-2); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.34); }
/* De omslag is staand en draagt de titel, dus hij moet heel in beeld staan.
   Het vak zelf blijft rustig van hoogte, met de omslag als boek erin: een
   plank waar drie boeken op staan, niet drie posters onder elkaar. */
.ebook-cover {
  aspect-ratio: 1 / 1.06; background: linear-gradient(150deg, rgba(244,242,238,.07), rgba(244,242,238,.015));
  display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--hair);
  overflow: hidden; padding: clamp(16px,2vw,24px);
}
/* contain in plaats van cover: de hele omslag in beeld, titel en al.
   Een randje en schaduw eronder, zodat het als een boek op de plank staat. */
.ebook-cover img {
  max-width: 100%; max-height: 100%; width: auto; height: 100%;
  object-fit: contain; display: block; border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}
.ebook-cover .ph {
  font-family: var(--serif); font-size: 2.6rem; color: var(--ink-3); letter-spacing: -.02em;
  display: grid; place-items: center; gap: 6px;
}
.ebook-cover .ph small { font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.ebook-body { padding: clamp(20px,2.2vw,26px); display: flex; flex-direction: column; flex: 1; gap: 10px; }
.ebook-body .tag { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ebook-body h3 { margin: 0; font-size: 1.25rem; }
.ebook-body p { color: var(--ink-2); font-size: .92rem; margin: 0; flex: 1; }
.ebook-soon {
  display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; margin-top: 6px;
  font-size: .78rem; color: var(--ink-3);
  border: 1px dashed var(--hair-2); border-radius: 999px; padding: .4em .9em;
}
.ebook-dl { align-self: flex-start; margin-top: 6px; gap: .6em; }
.ebook-dl svg { transition: transform .25s ease; }
.ebook-dl:hover svg { transform: translateY(2px); }
.ebook-meta { font-size: .75rem; color: var(--ink-3); letter-spacing: .04em; }
/* het boekje in een andere taal, onder de downloadknop */
.ebook-talen { display: block; margin-top: .5rem; font-size: .78rem; color: var(--ink-3); }
.ebook-talen a { color: var(--ink-2); border-bottom: 1px solid var(--hair); }
.ebook-talen a:hover { color: var(--warm); border-color: var(--warm); }
.ebook.is-klaar .ebook-cover { background: linear-gradient(150deg, rgba(201,104,63,.16), rgba(244,242,238,.02)); }

/* =========================================================================
   BLOG / VERHALEN — feed met posts (foto, kop, tekst)
   ========================================================================= */
.feed { display: grid; gap: clamp(18px,2vw,24px); max-width: 720px; margin: 0 auto; }
.post {
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--bg-2); overflow: hidden;
  transition: border-color .3s ease;
}
.post:hover { border-color: var(--hair-2); }
.post-head { display: flex; align-items: center; gap: 12px; padding: clamp(16px,1.8vw,20px); }
.post-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(140deg, rgba(244,242,238,.12), rgba(244,242,238,.03));
  display: grid; place-items: center; color: var(--ink-2);
  font-family: var(--serif); font-size: 1.1rem; border: 1px solid var(--hair-2);
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-who { flex: 1; min-width: 0; }
.post-who b { display: block; color: var(--ink); font-size: .95rem; font-weight: 500; }
.post-who span { color: var(--ink-3); font-size: .8rem; }
.post-body { padding: 0 clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px); }
.post-body h3 { font-size: clamp(1.2rem,2vw,1.5rem); margin: 0 0 .5rem; }
.post-body p { color: var(--ink-2); font-size: .95rem; line-height: 1.6; margin: 0 0 .9rem; }
.post-body p:last-child { margin-bottom: 0; }
.post-photo {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  aspect-ratio: 16/9; background: var(--bg-3); overflow: hidden;
  display: grid; place-items: center; color: var(--ink-3);
}
.post-photo img { width: 100%; height: 100%; object-fit: cover; }
.post-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 clamp(16px,1.8vw,20px) clamp(16px,1.8vw,20px); }
.post-tag {
  font-size: .74rem; color: var(--ink-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: .35em .8em; background: rgba(244,242,238,.02);
}
.post-result {
  display: flex; align-items: center; gap: .6em; margin-top: 4px;
  color: var(--warm); font-size: .88rem; font-weight: 500;
}
/* AI-nieuws in dezelfde feed als de verhalen, maar herkenbaar anders */
.post--nieuws { background: linear-gradient(180deg, rgba(201,104,63,.05), rgba(244,242,238,.012)); }
.post-avatar--nieuws {
  background: rgba(201,104,63,.14); color: var(--warm);
  border-color: rgba(201,104,63,.3);
}
.post-link {
  display: inline-flex; align-items: center; gap: .5em; margin-top: .4rem;
  color: var(--ink); font-size: .88rem;
  border-bottom: 1px solid var(--hair-2); padding-bottom: 2px;
  transition: border-color .25s ease, color .25s ease;
}
.post-link:hover { color: var(--warm); border-color: var(--warm); }
.post-link svg { transition: transform .25s ease; }
.post-link:hover svg { transform: translate(2px,-2px); }
/* klein label: dit stukje staat in een andere taal dan de pagina */
.post-taal {
  display: block; margin: .2rem 0 .6rem;
  font-size: .76rem; color: var(--ink-3); letter-spacing: .02em;
}

/* "deel jouw verhaal"-kaart onderaan de feed */
.share-card {
  border: 1px dashed var(--hair-2); border-radius: var(--r); padding: clamp(24px,3vw,34px);
  text-align: center; background: rgba(244,242,238,.015);
}
.share-card h3 { margin: 0 0 .5rem; }
.share-card p { color: var(--ink-2); margin: 0 0 1.4rem; font-size: .95rem; }

/* =========================================================================
   DEEL JE VERHAAL — stapsgewijs formulier (Typeform-stijl)
   ========================================================================= */
.wz-section { min-height: 70vh; }
.wz { max-width: 620px; margin: 0 auto; }
.wz-bar { height: 3px; border-radius: 999px; background: var(--hair); overflow: hidden; margin-bottom: clamp(32px,5vw,56px); }
.wz-bar span { display: block; height: 100%; width: 16.6%; background: var(--warm); border-radius: 999px; transition: width .45s cubic-bezier(.16,1,.3,1); }
.wz-count { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 1rem; }
.wz-step { border: 0; padding: 0; margin: 0; }
.wz-step h2 { font-size: clamp(1.7rem,3.4vw,2.5rem); margin: 0 0 .5rem; }
.wz-help { color: var(--ink-2); margin: 0 0 1.6rem; font-size: .98rem; }
.js .wz-step:not([hidden]) { animation: wzIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes wzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .js .wz-step:not([hidden]) { animation: none; } }

.wz-input {
  width: 100%; font-family: var(--sans); font-size: 1.02rem; color: var(--ink);
  background: rgba(244,242,238,.03); border: 1px solid var(--hair-2);
  border-radius: var(--r); padding: 15px 16px; outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.wz-input::placeholder { color: var(--ink-3); }
.wz-input:focus { border-color: rgba(201,104,63,.55); background: rgba(244,242,238,.05); }
.wz-area { resize: vertical; min-height: 130px; line-height: 1.55; }

.wz-file { display: block; cursor: pointer; }
.wz-file-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 1px dashed var(--hair-2); border-radius: var(--r); padding: 30px 20px;
  color: var(--ink-2); transition: border-color .25s ease, background .25s ease;
}
.wz-file:hover .wz-file-box { border-color: rgba(201,104,63,.5); background: rgba(244,242,238,.02); }
.wz-file-box b { color: var(--ink); font-weight: 500; font-size: .95rem; }
.wz-file-box small { font-size: .78rem; color: var(--ink-3); }
.wz-preview { margin-top: 14px; position: relative; }
.wz-preview img { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--hair); }
.wz-remove {
  position: absolute; top: 10px; right: 10px; border: 1px solid var(--hair-2);
  background: rgba(23,24,26,.8); color: var(--ink); border-radius: 999px;
  padding: .35em .9em; font-size: .78rem; cursor: pointer; backdrop-filter: blur(8px);
}

.wz-nav { display: flex; gap: .7rem; margin-top: clamp(24px,3vw,36px); }
.wz-nav .btn { flex: none; }
.wz-error { color: var(--warm); font-size: .9rem; margin-top: 1rem; }
.wz-note { text-align: center; color: var(--ink-3); font-size: .82rem; margin-top: 2.5rem; max-width: 52ch; margin-inline: auto; }
.wz-note a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }

.wz-done { text-align: center; padding: clamp(20px,4vw,40px) 0; }
.wz-check {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(201,104,63,.45); color: var(--warm); margin: 0 auto 1.4rem;
  background: rgba(201,104,63,.08);
}
.wz-done h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: .6rem; }
.wz-done p { color: var(--ink-2); margin-bottom: 1.8rem; }

/* feed: laden / leeg */
.feed-loading { color: var(--ink-3); text-align: center; padding: 40px 0; font-size: .92rem; }
.feed-empty { text-align: center; padding: clamp(40px,6vw,70px) 20px; border: 1px dashed var(--hair-2); border-radius: var(--r); }
.feed-empty h3 { margin-bottom: .4rem; }
.feed-empty p { color: var(--ink-2); margin: 0; }

/* =========================================================================
   PROFIELKAARTJE — wie je spreekt (boekingspagina)
   ========================================================================= */
.wie {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--hair); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(244,242,238,.05), rgba(244,242,238,.015));
  padding: 16px 18px; margin-bottom: 1.8rem;
}
.wie-foto {
  width: 62px; height: 62px; border-radius: 50%; flex: none; overflow: hidden;
  border: 1px solid var(--hair-2); background: var(--bg-3);
  display: grid; place-items: center; color: var(--ink-3);
  font-family: var(--serif); font-size: 1.4rem;
}
/* De foto zelf blijft in kleur. We tonen hem alleen in grijstinten,
   zodat hij rustig meegaat met de rest van de site. */
.wie-foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.wie-txt b { display: block; color: var(--ink); font-size: 1rem; font-weight: 500; }
.wie-txt span { display: block; color: var(--ink-2); font-size: .88rem; margin-top: 2px; }
.wie-txt .wie-live { display: inline-flex; align-items: center; gap: .45em; font-size: .78rem; color: var(--ink-3); margin-top: 6px; }
.wie-txt .wie-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--warm); }
.wie--center {
  width: max-content; max-width: 100%; margin: 2.4rem auto 0; text-align: left;
}
@media (max-width: 520px){ .wie { flex-direction: column; align-items: flex-start; text-align: left; } }

/* [hidden] moet altijd winnen van display:inline-flex/flex/grid */
[hidden] { display: none !important; }