/*
Theme Name: Findori Agency
Theme URI: https://findori.agency
Author: Findori
Author URI: https://findori.online
Description: Vindbaarheid van Google tot AI. Custom thema voor findori.agency, gericht op SEO, GEO en AEO.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: findori-agency
*/

/* ---------- Self-hosted merklettertype: Space Grotesk (variabel 400-700) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --navy: #0a1b2e;
    --navy-deep: #060f1c;
    --surface: #0f2338;
    --surface-2: #14304a;
    --gold: #d09818;
    --gold-light: #e6b84a;
    --purple: #7c5cff;
    --cyan: #22d3ee;
    --text: #f5f7fa;
    --text-dim: #8ca0b8;
    --border: #1c3a56;
    --light-bg: #f4f1ea;
    --light-surface: #ffffff;
    --light-text: #0a1b2e;
    --light-dim: #5a6b7e;
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --maxw: 1160px;
    --radius: 14px;
    /* Gedeelde easing-curves (sterker dan de standaard CSS-easings) */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background-color: var(--navy);
    background-image:
      radial-gradient(1100px 640px at 80% -10%, rgba(124,92,255,.07), transparent 60%),
      linear-gradient(180deg, #0b1e33 0%, var(--navy) 32%, #081525 100%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  .grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }

  ::selection { background: rgba(208,152,24,.30); color: #fff; }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; text-wrap: balance; margin: 0; letter-spacing: -0.02em; }

  a { color: inherit; }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
    padding: 14px 24px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; transition: transform .16s var(--ease-out), background .18s ease, border-color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
  }
  .btn-gold { background: var(--gold); color: #1a1205; box-shadow: 0 10px 30px -12px rgba(208,152,24,.55); }
  .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(208,152,24,.65); }
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
  .btn-ghost:hover { border-color: var(--text-dim); background: rgba(255,255,255,.035); transform: translateY(-2px); }
  .btn:active { transform: scale(0.97); box-shadow: none; }
  .btn-arrow::after { content: "\2192"; font-family: var(--font-mono); }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(10,27,46,.72);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }
  header.nav.scrolled { border-bottom-color: var(--border); background: rgba(6,15,28,.85); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; color: var(--text); }
  .brand .mark { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
  .brand .mark svg { width: 100%; height: 100%; display: block; }
  .brand small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; font-weight: 500; }
  /* gap was 18px. Met de menugroep Adverteren erbij had de balk 1161px nodig in een
   container van 1160px, waardoor Contact tegen de gratis-checkknop aan kwam.
   12px geeft ongeveer 47px lucht. Zet dit niet terug zonder opnieuw te meten. */
  .nav-links { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
  .nav-cta { flex: none; }
  .nav-links a { text-decoration: none; color: var(--text-dim); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .16s ease; }
  .nav-links a:hover { color: var(--text); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  /* De check-knop in de balk is compacter en zonder gloed, zodat hij niet
     concurreert met de merknaam en met de gouden knoppen in de pagina zelf. */
  .nav-cta .btn-gold { font-size: 14px; padding: 10px 16px; box-shadow: none; }
  .nav-cta .btn-gold:hover { box-shadow: none; transform: translateY(-1px); }

  /* Hamburger (alleen mobiel) */
  .nav-toggle {
    display: none; width: 44px; height: 44px; flex: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s var(--ease-out);
  }
  .nav-toggle:hover { border-color: var(--text-dim); }
  .nav-toggle:active { transform: scale(0.94); }
  .nav-toggle span { display: block; width: 19px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  header.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  header.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-menu-cta { display: none; }

  @media (max-width: 1160px) {
    .nav-toggle { display: inline-flex; }
    .nav-cta .btn-gold { display: none; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: rgba(6,15,28,.98); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      padding: 0 24px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
      transition: max-height .32s ease, opacity .2s ease, padding .32s ease;
    }
    /* Het open menu is hoger dan het scherm zodra Diensten of Kennis uitklapt,
       dus het moet zelf kunnen scrollen. Zonder overflow-y valt de onderkant
       (Contact, de gratis check) er onbereikbaar buiten. */
    header.nav.nav-open .nav-links {
      max-height: calc(100vh - 68px);
      max-height: calc(100dvh - 68px);
      opacity: 1; pointer-events: auto; padding: 6px 24px 18px;
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .nav-links a { padding: 15px 2px; font-size: 16px; border-bottom: 1px solid var(--border); }
    .nav-links a:last-child { border-bottom: 0; }
    .nav-links .nav-menu-cta {
      display: inline-flex; align-items: center; justify-content: center;
      margin-top: 14px; padding: 14px 18px; border-bottom: 0;
      background: var(--gold); color: #1a1205; font-weight: 600; border-radius: 10px;
    }
    .nav-links .nav-menu-cta:hover { background: var(--gold-light); }
  }

  @media (max-width: 560px) {
    .brand small { display: none; }
    .brand { font-size: 17px; gap: 9px; }
    .brand .mark { width: 34px; height: 34px; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; padding: 84px 0 90px; overflow: hidden; }

  /* De achtergrond van de hero bestaat uit drie lagen die alle drie in dit ene
     element zitten: de spotlight op het element zelf, de aurora in ::before en het
     raster in ::after. Zo hoeft er in geen enkel paginatemplate markup bij; elke
     hero heeft al een <div class="hero-glow">. */
  .hero-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(560px 440px at var(--mx, 62%) var(--my, 24%), rgba(124,92,255,.42), transparent 64%),
      radial-gradient(360px 300px at var(--mx, 62%) var(--my, 24%), rgba(230,184,74,.13), transparent 62%),
      radial-gradient(700px 520px at 90% 4%, rgba(34,211,238,.18), transparent 62%);
    /* Geen transition: main.js interpoleert de cursorpositie al per frame, en een
       transition op background dwingt daar bovenop een hertekening per stap af. */
  }

  /* Aurora: drie gekleurde velden die traag langs elkaar schuiven. Alleen transform
     beweegt, zodat de blur eenmalig wordt getekend en daarna door de compositor
     wordt hergebruikt. will-change houdt de laag apart. */
  .hero-glow::before {
    content: ""; position: absolute; inset: -35% -12%;
    filter: blur(78px); opacity: .62;
    background:
      radial-gradient(36% 44% at 18% 32%, rgba(124,92,255,.62), transparent 70%),
      radial-gradient(32% 40% at 58% 14%, rgba(34,211,238,.40), transparent 70%),
      radial-gradient(30% 38% at 82% 58%, rgba(208,152,24,.40), transparent 70%);
    animation: aurora-drift 26s var(--ease-in-out) infinite alternate;
    will-change: transform;
  }
  @keyframes aurora-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(4%, 3%, 0)   scale(1.14); }
    100% { transform: translate3d(-2%, 5%, 0)  scale(1.06); }
  }

  /* Raster: geeft de hero structuur. Het masker laat het naar de randen wegvallen,
     zodat het nergens tegen de navigatie of de volgende sectie aan botst. */
  .hero-glow::after {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right,  rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(68% 62% at 46% 42%, #000 24%, transparent 100%);
            mask-image: radial-gradient(68% 62% at 46% 42%, #000 24%, transparent 100%);
  }

  /* Tablet: het raster mag fijner, de aurora iets compacter. */
  @media (max-width: 900px) {
    .hero-glow::before { filter: blur(62px); inset: -28% -14%; }
    .hero-glow::after { background-size: 46px 46px; }
  }

  /* Telefoon: de kolommen staan onder elkaar, dus de aurora moet naar boven, achter
     de kop. Een lichtere blur scheelt merkbaar werk op een klein toestel. */
  @media (max-width: 640px) {
    .hero-glow {
      background:
        radial-gradient(400px 340px at 74% 8%, rgba(124,92,255,.34), transparent 64%),
        radial-gradient(360px 300px at 6% 34%, rgba(34,211,238,.16), transparent 64%);
    }
    .hero-glow::before {
      inset: -18% -20% auto -20%; height: 74%;
      filter: blur(52px); opacity: .58;
      background:
        radial-gradient(44% 50% at 26% 30%, rgba(124,92,255,.60), transparent 70%),
        radial-gradient(40% 46% at 74% 20%, rgba(34,211,238,.36), transparent 70%),
        radial-gradient(38% 44% at 56% 74%, rgba(208,152,24,.36), transparent 70%);
    }
    .hero-glow::after {
      background-size: 34px 34px;
      -webkit-mask-image: radial-gradient(88% 52% at 50% 26%, #000 18%, transparent 100%);
              mask-image: radial-gradient(88% 52% at 50% 26%, #000 18%, transparent 100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-glow::before { animation: none; transform: translate3d(0, 1%, 0) scale(1.06); }
  }

  .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

  .hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.35rem); line-height: 1.02; letter-spacing: -0.035em; margin: 24px 0 0; }
  .hero h1 .accent { color: var(--gold); }
  .hero .sub { color: #a9b8ca; font-size: 19px; line-height: 1.6; margin: 24px 0 0; max-width: 42ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .hero-trust { margin-top: 26px; font-size: 14px; color: var(--text-dim); display: flex; align-items: center; gap: 9px; }
  .hero-trust svg { flex: none; }

  /* ---------- AI visibility panel ---------- */
  .panel {
    background: linear-gradient(180deg, var(--surface), var(--navy-deep));
    border: 1px solid var(--border); border-radius: 18px; padding: 22px;
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(124,92,255,.05);
    position: relative;
  }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
  .panel-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  /* Op een telefoon staat de titel anders bijna tegen het LIVE-label aan. */
  @media (max-width: 480px) { .panel-title { font-size: 11px; letter-spacing: .05em; } }
  .live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: .1em; }
  .live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(34,211,238,.6); animation: pulse 2s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,238,.5);} 70% { box-shadow: 0 0 0 9px rgba(34,211,238,0);} 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0);} }

  .sov-row { display: grid; grid-template-columns: 120px 1fr 46px; align-items: center; gap: 12px; margin-bottom: 11px; font-size: 13.5px; }
  .sov-row .name { color: var(--text-dim); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sov-row.you .name { color: var(--text); font-weight: 600; }
  .bar { height: 9px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
  .bar span { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1); }
  .bar.you span { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
  .bar.rival span { background: linear-gradient(90deg, var(--purple), var(--cyan)); opacity: .8; }
  .sov-row .pct { font-family: var(--font-mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-size: 13px; }

  /* Grote score in een hero-paneel, met het label erachter. */
  .score-big { display: flex; align-items: baseline; gap: 9px; margin: 2px 0 20px; flex-wrap: wrap; }
  .score-big b { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--gold-light); }
  .score-big > span { font-family: var(--font-mono); font-size: 14px; color: var(--text-dim); }
  .score-big em { flex-basis: 100%; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
  /* Bijschrift onderaan een hero-paneel. */
  .panel-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

  /* Trendlijn in het maandrapport-paneel. */
  .trend { position: relative; }
  .trend svg { display: block; width: 100%; height: 130px; overflow: visible; }
  .trend line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
  .trend polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .trend .lijn-ai { stroke: var(--gold); }
  .trend .lijn-seo { stroke: var(--cyan); opacity: .75; }
  .trend .stip-ai { fill: var(--gold-light); }
  .trend .stip-seo { fill: var(--cyan); opacity: .75; }
  .trend-x { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
  .trend-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 12.5px; color: #cdd8e4; }
  .trend-legenda span { display: inline-flex; align-items: center; gap: 8px; }
  .trend-legenda i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .trend-legenda .dot-ai { background: var(--gold); }
  .trend-legenda .dot-seo { background: var(--cyan); opacity: .75; }

  /* Doorgestreepte lijst in het paneel van "wat wij niet doen". */
  .nope-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 13px; }
  .nope-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(230,110,110,.75); text-decoration-thickness: 1.5px; }
  .nope-list li::before { content: "\00d7"; font-family: var(--font-mono); font-size: 15px; line-height: 1.3; color: #e06e6e; text-decoration: none; flex: none; }

  .answer-box { margin-top: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; }
  .answer-box .q { font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan); margin-bottom: 9px; letter-spacing: .04em; }
  .answer-box .a { font-size: 13.5px; line-height: 1.55; color: #d7e0ec; }
  .answer-box .a mark { background: rgba(208,152,24,.22); color: var(--gold-light); padding: 1px 5px; border-radius: 4px; font-weight: 600; text-decoration: none; }
  .answer-box .src { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; transition: opacity .5s ease; }

  /* Het antwoord wordt letter voor letter opgebouwd door main.js. De cursor is een
     los element dat achter de tekst mee schuift en aan het eind wordt verwijderd.
     Zonder JavaScript staat de volledige tekst gewoon in de HTML. */
  .typ-caret {
    display: inline-block; width: 7px; height: 1.05em; margin-left: 2px;
    background: var(--gold-light); vertical-align: -2px;
    animation: typ-knipper 1s steps(2) infinite;
  }
  @keyframes typ-knipper { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  /* Als het antwoord er helemaal staat, licht het paneel even op. */
  .panel.paneel-klaar {
    border-color: rgba(208,152,24,.34);
    box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(208,152,24,.12), 0 0 60px -22px rgba(208,152,24,.34);
  }
  .panel { transition: box-shadow .6s ease, border-color .6s ease; }

  /* ---------- Section scaffolding ---------- */
  section { position: relative; }
  .section-pad { padding: 92px 0; }
  .section-head { max-width: 640px; margin-bottom: 52px; }

  /* Tweekoloms tekstsectie: kop links (blijft staan tijdens het scrollen),
     lopende tekst rechts. Onder 1000px valt hij terug op één kolom, dus de
     mobiele weergave verandert niet. */
  @media (min-width: 1000px) {
    /* 368 + 64 + rest = precies de containerbreedte, zodat de tekstkolom rechts
       op dezelfde lijn eindigt als de vergelijkingstabel en de rest van de site. */
    .wrap.split { display: grid; grid-template-columns: 368px minmax(0, 1fr); column-gap: 64px; align-items: start; }
    .wrap.split > .section-head { max-width: none; margin-bottom: 0; position: sticky; top: 104px; }
    .wrap.split > .section-head h2 { font-size: clamp(1.6rem, 2.2vw, 2.05rem); line-height: 1.2; }
    .wrap.split > .section-head p { font-size: 16px; }
    .wrap.split > .fw-text { max-width: 680px; }
    .wrap.split > .faq-list { max-width: 680px; }
    /* Losse tekst onder een blok van volle breedte: schuift naar dezelfde
       kolom als de tweekolomssecties, zodat de rechtermarge overal gelijk is. */
    .fw-text.fw-offset { margin-left: 432px; max-width: 680px; }
  }
  .section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-top: 16px; }
  .section-head p { color: var(--text-dim); font-size: 18px; margin: 18px 0 0; }

  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }

  /* Stagger: kinderen van deze grids cascaden in wanneer de container in beeld komt */
  .whynow-grid.reveal, .triptych.reveal, .compare.reveal, .proof-grid.reveal,
  .fw-components.reveal, .fw-grid3.reveal, .fw-audit.reveal, .fit-grid.reveal, .vs-grid.reveal {
    opacity: 1; transform: none;
  }
  .whynow-grid.reveal > *, .triptych.reveal > *, .compare.reveal > *, .proof-grid.reveal > *,
  .fw-components.reveal > *, .fw-grid3.reveal > *, .fw-audit.reveal > *, .fit-grid.reveal > *, .vs-grid.reveal > * {
    opacity: 0;
  }
  .whynow-grid.reveal.in > *, .triptych.reveal.in > *, .compare.reveal.in > *, .proof-grid.reveal.in > *,
  .fw-components.reveal.in > *, .fw-grid3.reveal.in > *, .fw-audit.reveal.in > *, .fit-grid.reveal.in > *, .vs-grid.reveal.in > * {
    animation: fadeUp .5s var(--ease-out) both;
  }
  .reveal.in > *:nth-child(1) { animation-delay: 0ms; }
  .reveal.in > *:nth-child(2) { animation-delay: 55ms; }
  .reveal.in > *:nth-child(3) { animation-delay: 110ms; }
  .reveal.in > *:nth-child(4) { animation-delay: 165ms; }
  .reveal.in > *:nth-child(5) { animation-delay: 220ms; }
  .reveal.in > *:nth-child(6) { animation-delay: 275ms; }
  .reveal.in > *:nth-child(7) { animation-delay: 330ms; }
  .reveal.in > *:nth-child(8) { animation-delay: 385ms; }

  /* Op touch geen blijvende hover-lift (een tik triggert anders een sticky hover) */
  @media (hover: none) {
    .btn:hover, .fstep-card:hover, .whynow-card:hover, .post-card-link:hover,
    .nav-toggle:hover, .audit-form .fluentform .ff-btn-submit:hover { transform: none; }
  }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- Engine bar ---------- */
  .engines { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 0; }
  .engines-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
  .engines .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
  .engines .name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #c4d0de; opacity: .82; transition: color .2s ease, opacity .2s ease; }

  /* Schuivende variant. main.js bouwt het spoor en zet `is-marquee` erop; zonder
     JavaScript blijft de strook precies zoals hij was, als stilstaande rij. */
  .engines-inner.is-marquee { flex-wrap: nowrap; justify-content: flex-start; gap: 26px; }
  .engines-inner.is-marquee .label { flex: none; }
  .engines-rail {
    flex: 1 1 auto; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 93%, transparent);
  }
  .engines-spoor { display: flex; width: max-content; animation: engines-schuif var(--duur, 30s) linear infinite; }
  /* Even stilzetten als iemand wil lezen wat er staat. */
  .engines-rail:hover .engines-spoor { animation-play-state: paused; }
  .engines-set { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
  .engines-set .name:hover { color: var(--gold-light); opacity: 1; }
  @keyframes engines-schuif {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  /* Op een telefoon past het label er niet naast, dus dat gaat erboven. De
     vervaging aan de randen moet daar breder, anders wordt een naam hard afgekapt. */
  @media (max-width: 700px) {
    .engines-inner.is-marquee { flex-wrap: wrap; gap: 14px; }
    .engines-inner.is-marquee .label { width: 100%; text-align: center; }
    .engines-rail {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 86%, transparent);
              mask-image: linear-gradient(to right, transparent, #000 12%, #000 86%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) { .engines-spoor { animation: none; } }

  /* ---------- Probleem ---------- */
  .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
  @media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
  .compare .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
  .compare .card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  .compare .card.bad .tag { color: #d98b8b; }
  .compare .card.good .tag { color: var(--gold-light); }
  .compare .card p { margin: 12px 0 0; font-size: 15px; color: #cdd8e4; }
  .compare .card .mockline { margin-top: 14px; font-size: 13.5px; color: var(--text-dim); font-family: var(--font-mono); line-height: 1.9; }
  .compare .card .mockline b { color: var(--gold-light); font-weight: 600; }

  /* ---------- Drieluik ---------- */
  .triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 780px) { .triptych { grid-template-columns: 1fr; } }
  .step-card { padding: 4px 2px; }
  .step-card .icn { width: 42px; height: 42px; border-radius: 11px; background: rgba(124,92,255,.12); display: grid; place-items: center; margin-bottom: 16px; }
  .step-card h3 { font-size: 20px; margin-bottom: 9px; }
  .step-card p { margin: 0; color: var(--text-dim); font-size: 15px; }

  /* ---------- Bewijs (light) ---------- */
  .proof { background: var(--light-bg); color: var(--light-text); }
  .proof .eyebrow { color: var(--light-dim); }
  .proof .eyebrow .dot { background: var(--gold); box-shadow: none; }
  .proof h2 { color: var(--light-text); }
  .proof .lead { color: var(--light-dim); font-size: 18px; max-width: 620px; margin: 18px 0 0; }
  .proof-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; margin-top: 48px; align-items: stretch; }
  @media (max-width: 820px) { .proof-grid { grid-template-columns: 1fr; } }
  .proof-card { background: var(--light-surface); border: 1px solid #e6e0d4; border-radius: 16px; padding: 30px; box-shadow: 0 20px 50px -30px rgba(10,27,46,.25); }
  .proof-card .kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--light-dim); }
  .growth { display: flex; align-items: flex-end; gap: 18px; margin-top: 22px; height: 150px; }
  .growth .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; }
  .growth .col .track { width: 100%; max-width: 74px; background: #efe9dd; border-radius: 8px 8px 0 0; position: relative; display: flex; align-items: flex-end; height: 100%; overflow: hidden; }
  .growth .col .fill { width: 100%; border-radius: 8px 8px 0 0; height: 0; transition: height 1.2s cubic-bezier(.22,1,.36,1); }
  .growth .col.before .fill { background: #cdbfa6; }
  .growth .col.after .fill { background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
  .growth .col .cap { font-family: var(--font-mono); font-size: 12px; color: var(--light-dim); }
  .growth .col .val { font-family: var(--font-display); font-weight: 700; font-size: 24px; }
  .proof-note { font-size: 13px; color: var(--light-dim); margin-top: 20px; }
  .stat-list { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
  .stat-list .stat .big { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--light-text); font-variant-numeric: tabular-nums; }
  .stat-list .stat .lbl { color: var(--light-dim); font-size: 15px; }

  /* ---------- Demo ---------- */
  .demo-card { background: linear-gradient(160deg, var(--surface), var(--navy-deep)); border: 1px solid var(--border); border-radius: 20px; padding: 40px; text-align: center; position: relative; overflow: hidden; }
  .demo-card .glow2 { position: absolute; inset: 0; background: radial-gradient(400px 240px at 50% 0%, rgba(124,92,255,.16), transparent 60%); pointer-events: none; }
  .demo-card h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); position: relative; }
  .demo-card p { color: var(--text-dim); max-width: 520px; margin: 16px auto 0; position: relative; }
  .demo-form { display: flex; gap: 10px; max-width: 520px; margin: 28px auto 0; position: relative; }
  @media (max-width: 520px) { .demo-form { flex-direction: column; } }
  .demo-form input {
    flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; color: var(--text); font-family: var(--font-mono); font-size: 15px;
  }
  .demo-form input::placeholder { color: #5f728a; }
  .demo-form input:focus { outline: 2px solid var(--purple); outline-offset: 1px; border-color: transparent; }
  .demo-result { max-width: 520px; margin: 24px auto 0; text-align: left; display: none; }
  .demo-result.show { display: block; animation: fadeUp .5s ease; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }

  /* ---------- Funnel (Audit / Sprint / Growth) ---------- */
  .funnel { position: relative; max-width: 720px; margin: 0 auto; }
  .funnel-line { position: absolute; left: 50%; top: 36px; bottom: 36px; width: 2px; transform: translateX(-50%); background: var(--border); z-index: 0; overflow: hidden; }
  .funnel-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--gold), var(--purple) 50%, var(--cyan)); transition: height 1.6s cubic-bezier(.22,1,.36,1) .3s; }
  .funnel.in .funnel-line-fill { height: 100%; }
  .fstep { position: relative; z-index: 1; }
  .fstep-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .fstep-card:hover { transform: translateY(-3px) scale(1.01); border-color: var(--accent); box-shadow: 0 28px 60px -34px rgba(0,0,0,.6); }
  .fstep-1 .fstep-card { --accent: var(--gold); }
  .fstep-2 .fstep-card { --accent: var(--purple); }
  .fstep-3 .fstep-card { --accent: var(--cyan); }
  .fstep-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .ficn { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--accent); }
  .fstep-1 .ficn { background: rgba(208,152,24,.14); }
  .fstep-2 .ficn { background: rgba(124,92,255,.14); }
  .fstep-3 .ficn { background: rgba(34,211,238,.14); }
  .fnum { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent); }
  .ftag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 4px 11px; }
  .fstep-card h3, .fstep-card h2 { font-size: 26px; margin: 0 0 6px; }
  .fprice { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent); margin: 0 0 18px; }
  .fprice span { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--text-dim); margin-left: 6px; }
  .fstep-card > p { color: var(--text-dim); font-size: 15.5px; margin: 0 0 20px; }
  .fbullets { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
  .fbullets li { font-size: 14px; color: #cdd8e4; display: flex; gap: 9px; align-items: flex-start; }
  .fbullets li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
  .fstep-card .btn { width: 100%; justify-content: center; }
  .fnote { font-size: 13px; color: var(--text-dim); margin: 14px 0 0; }
  p.fdeal, .fdeal { font-size: 14px; line-height: 1.6; color: var(--gold-light); background: rgba(208,152,24,.07); border: 1px solid rgba(208,152,24,.3); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; }
  .farrow { display: flex; justify-content: center; padding: 8px 0; color: var(--text-dim); position: relative; z-index: 1; }
  .funnel-why { max-width: 680px; margin: 56px auto 0; text-align: center; }
  .funnel-why h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
  .funnel-why p { color: var(--text-dim); font-size: 16.5px; margin: 16px 0 0; }
  @media (max-width: 620px) {
    .fstep-card { padding: 26px; }
    .fbullets { grid-template-columns: 1fr; }
    .ftag { margin-left: 0; }
    .fstep-head { flex-wrap: wrap; row-gap: 8px; }
  }

  /* ---------- Waarom nu ---------- */
  .whynow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 900px) { .whynow-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .whynow-grid { grid-template-columns: 1fr; } }
  .whynow-card { background: linear-gradient(180deg, var(--surface), var(--navy-deep)); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: border-color .2s ease, transform .2s ease; }
  .whynow-card:hover { border-color: #2b5075; transform: translateY(-3px); }
  .whynow-card .wk { font-family: var(--font-mono); font-size: 12px; color: var(--gold); letter-spacing: .08em; }
  .whynow-card h3 { font-size: 18px; margin: 14px 0 9px; }
  .whynow-card p { margin: 0; font-size: 14.5px; color: var(--text-dim); }

  /* ---------- Waarom ---------- */
  .why { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
  @media (max-width: 820px) { .why { grid-template-columns: 1fr; } }
  .why ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 18px; }
  .why li { display: flex; gap: 14px; align-items: flex-start; }
  .why li .dot2 { width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; flex: none; background: var(--gold); }
  .why li b { display: block; margin-bottom: 3px; }
  .why li span { color: var(--text-dim); font-size: 15px; }
  .plugin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px; }
  .plugin-card .row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .plugin-card .row:last-child { border-bottom: none; }
  .plugin-card .row .ok { width: 22px; height: 22px; border-radius: 50%; background: rgba(34,211,238,.14); display: grid; place-items: center; flex: none; }
  .plugin-card .row .txt { font-size: 14.5px; }
  .plugin-card .row .txt b { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); font-weight: 500; display: block; }

  /* ---------- FAQ ---------- */
  .faq-list { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
  details.faq { border-top: 1px solid var(--border); padding: 22px 0; }
  details.faq:last-child { border-bottom: 1px solid var(--border); }
  details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 19px; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary .plus { font-family: var(--font-mono); color: var(--gold); font-size: 22px; transition: transform .2s ease; flex: none; }
  details.faq[open] summary .plus { transform: rotate(45deg); }
  details.faq p { color: var(--text-dim); font-size: 15.5px; margin: 14px 0 0; max-width: 68ch; }

  /* ---------- Slot CTA ---------- */
  .final { text-align: center; padding: 100px 0; position: relative; overflow: hidden; }
  .final .glow3 { position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 120%, rgba(124,92,255,.2), transparent 60%); pointer-events: none; }
  .final h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 16ch; margin: 0 auto; position: relative; }
  .final p { color: var(--text-dim); font-size: 18px; margin: 20px auto 34px; max-width: 44ch; position: relative; }
  .final .hero-actions { justify-content: center; position: relative; }
  /* Slotsectie links uitgelijnd op de tekstpagina's, zodat de as onderaan niet
     verspringt. De homepage blijft gecentreerd, daar staat de video in het midden. */
  .final.final-left { text-align: left; }
  .final.final-left h2 { margin-left: 0; margin-right: 0; max-width: 20ch; }
  .final.final-left p { margin-left: 0; margin-right: 0; max-width: 52ch; }
  .final.final-left .final-note { margin-left: 0; margin-right: 0; }
  .final.final-left .hero-actions { justify-content: flex-start; }
  .final.final-left .glow3 { background: radial-gradient(600px 300px at 22% 120%, rgba(124,92,255,.2), transparent 60%); }

  /* ---------- Footer ---------- */
  footer { border-top: 1px solid var(--border); background: var(--navy-deep); padding: 54px 0 40px; }
  .foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
  .foot-brand { max-width: 300px; }
  .foot-brand p { color: var(--text-dim); font-size: 14px; margin: 14px 0 0; }
  .foot-brand .parent { margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
  .foot-brand .parent a { color: var(--gold-light); text-decoration: none; }

  /* Findori Signal, de LinkedIn-nieuwsbrief. Krijgt een eigen blokje in plaats van een
     regel tussen de andere links, want het is een aanbod en geen navigatie. */
  .foot-signal { margin-top: 18px; }
  .foot-signal a {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 600; font-size: 15px;
    color: var(--text); text-decoration: none; transition: color .15s ease;
  }
  .foot-signal a svg { color: var(--gold-light); flex: none; transition: color .15s ease; }
  .foot-signal a:hover { color: var(--gold-light); }
  .foot-signal a:hover svg { color: var(--gold); }
  .foot-signal span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
  .foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
  .foot-col h4, .foot-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 16px; font-weight: 500; }
  .foot-col a { display: block; text-decoration: none; color: #b7c4d3; font-size: 14.5px; margin-bottom: 11px; transition: color .16s ease; }
  .foot-col a:hover { color: var(--text); }
  .foot-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-dim); font-family: var(--font-mono); }

  @media (prefers-reduced-motion: reduce) {
    /* Minder en zachter, niet nul: beweging eruit, kleur- en fadefeedback blijft */
    *, *::before, *::after {
      animation: none !important;
      transition-property: opacity, color, background-color, border-color, box-shadow, fill !important;
      transition-duration: .15s !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .whynow-grid.reveal > *, .triptych.reveal > *, .compare.reveal > *, .proof-grid.reveal > *,
    .fw-components.reveal > *, .fw-grid3.reveal > *, .fw-audit.reveal > *, .fit-grid.reveal > *, .vs-grid.reveal > * { opacity: 1 !important; }
  }

/* WordPress admin-bar offset voor de sticky navigatie */
@media screen and (min-width: 783px) { .admin-bar header.nav { top: 32px; } }
@media screen and (max-width: 782px) { .admin-bar header.nav { top: 46px; } }

/* ---------- Fluent Forms auditformulier in de findori-stijl ---------- */
.audit-form { max-width: 560px; margin: 30px auto 0; text-align: left; position: relative; }
.audit-form .fluentform .ff-el-group { margin-bottom: 16px; }
.audit-form .fluentform .ff-el-input--label label { display: block; font-size: 13.5px; font-weight: 600; color: #cdd8e4; margin-bottom: 7px; }
.audit-form .fluentform .ff-el-input--label label .ff-el-is-required { color: var(--gold); margin-left: 3px; }
.audit-form .fluentform input.ff-el-form-control,
.audit-form .fluentform textarea.ff-el-form-control {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 15px; color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  box-shadow: none; -webkit-appearance: none; appearance: none;
}
.audit-form .fluentform input.ff-el-form-control::placeholder,
.audit-form .fluentform textarea.ff-el-form-control::placeholder { color: #5f728a; }
.audit-form .fluentform input.ff-el-form-control:focus,
.audit-form .fluentform textarea.ff-el-form-control:focus { outline: 2px solid var(--purple); outline-offset: 1px; border-color: transparent; }
.audit-form .fluentform textarea.ff-el-form-control { min-height: 110px; resize: vertical; }
.audit-form .fluentform .ff-btn-submit {
  width: 100%; background: var(--gold) !important; color: #1a1205 !important; border: none !important;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 15px 24px; border-radius: 10px;
  cursor: pointer; box-shadow: 0 10px 30px -12px rgba(208,152,24,.55); transition: transform .16s var(--ease-out), background .18s ease; margin-top: 6px;
}
.audit-form .fluentform .ff-btn-submit:hover { background: var(--gold-light) !important; transform: translateY(-2px); }
.audit-form .fluentform .ff-btn-submit:active { transform: scale(0.97); }
.audit-form .fluentform .ff-el-is-error input.ff-el-form-control,
.audit-form .fluentform .ff-el-is-error textarea.ff-el-form-control { border-color: #d98b8b; }
.audit-form .fluentform .error, .audit-form .fluentform .text-danger { color: #e8a0a0; font-size: 13px; margin-top: 5px; }
.audit-form .ff-message-success {
  background: rgba(34,211,238,.08); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; color: #d7e0ec; font-size: 15px; text-align: center;
}

/* ---------- Audit-modal (pop-up) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: flex-start; justify-content: center; padding: 40px 20px;
  background: rgba(6,15,28,.72); backdrop-filter: blur(6px); overflow-y: auto;
}
.modal-overlay.open { display: flex; animation: modalFade .25s ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  position: relative; width: 100%; max-width: 560px; margin: auto;
  background: linear-gradient(180deg, var(--surface), var(--navy-deep));
  border: 1px solid var(--border); border-radius: 18px; padding: 36px 32px 32px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.modal-overlay.open .modal-box { animation: modalRise .3s cubic-bezier(.22,1,.36,1); }
@keyframes modalRise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* Sluit-animatie: modal en overlay dempen weg in plaats van hard te verdwijnen */
.modal-overlay.closing { animation: modalFadeOut .2s ease forwards; }
.modal-overlay.closing .modal-box { animation: modalSink .2s var(--ease-out) forwards; }
@keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalSink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-box .eyebrow { justify-content: center; display: flex; }
.modal-box h2 { text-align: center; font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 14px; }
.modal-box .modal-intro { text-align: center; color: var(--text-dim); font-size: 15px; line-height: 1.55; margin: 14px auto 4px; max-width: 46ch; }
.modal-box .audit-form { margin-top: 22px; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  display: grid; place-items: center; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 9px; color: var(--text-dim);
  font-size: 22px; line-height: 1; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .16s var(--ease-out);
}
.modal-close:hover { color: var(--text); border-color: var(--text-dim); }
.modal-close:active { transform: scale(0.9); }
body.modal-open { overflow: hidden; }

/* ---------- Weggever op de lespagina's ---------- */
/* Breder dan de gewone modal, want de omslag staat ernaast. */
.weggever .weggever-box { max-width: 760px; padding: 34px 32px 30px; }
.weggever-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 720px) { .weggever-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 34px; } }

.weggever-cover img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--border); box-shadow: 0 26px 50px -24px rgba(0,0,0,.8);
}
/* Links uitlijnen: gecentreerde tekst naast een omslag leest rommelig. */
.weggever-box .eyebrow { justify-content: flex-start; }
.weggever-box h2 { text-align: left; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; margin-top: 12px; }
.weggever-box .modal-intro { text-align: left; margin: 12px 0 0; max-width: none; }
.weggever-box .audit-form { margin-top: 18px; max-width: none; }
.weggever-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.weggever-note a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(230,184,74,.35); }
.weggever-note a:hover { color: var(--gold); }
/* ---------- Nieuwsbriefvinkje in het weggeverformulier ----------
   Geldt zowel in de pop-up als op de landingspagina. Het standaard browservinkje is
   wit en valt uit de toon op een donkere achtergrond; accent-color lost dat op zonder
   dat je het hele element hoeft na te bouwen. */
.ff-nieuwsbrief { margin-top: 2px; }
.ff-nieuwsbrief .ff-el-form-check-label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 13.5px; line-height: 1.45; color: var(--text-dim);
  transition: color .15s ease;
}
.ff-nieuwsbrief .ff-el-form-check-label:hover { color: #cdd8e4; }
.ff-nieuwsbrief input[type="checkbox"] {
  flex: none; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--gold); cursor: pointer;
}
.weggever-box .ff-nieuwsbrief { margin-top: 4px; }

/* Mobiel: geen scherm vullende laag maar een strook die van onderen opschuift, zodat de
   les zichtbaar blijft. Bewust geen backdrop-filter en geen scrollvergrendeling. */
@media (max-width: 719px) {
  .weggever.modal-overlay {
    align-items: flex-end; padding: 0; background: transparent; backdrop-filter: none;
    overflow: visible; pointer-events: none;
  }
  .weggever .weggever-box {
    pointer-events: auto; margin: 0; max-width: none; max-height: 62vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; border-bottom: 0; padding: 22px 20px 20px;
    box-shadow: 0 -18px 50px -18px rgba(0,0,0,.85);
  }
  .weggever.modal-overlay.open .weggever-box { animation: weggeverOmhoog .32s var(--ease-out); }
  @keyframes weggeverOmhoog { from { transform: translateY(100%); } to { transform: none; } }
  .weggever.modal-overlay.closing .weggever-box { animation: weggeverOmlaag .22s var(--ease-out) forwards; }
  @keyframes weggeverOmlaag { from { transform: none; } to { transform: translateY(100%); } }
  /* De omslag kost hier te veel hoogte. */
  .weggever-cover { display: none; }
  .weggever-box h2 { font-size: 1.15rem; padding-right: 34px; }
  .weggever-box .modal-intro { font-size: 14px; }
  .weggever .modal-close { top: 12px; right: 12px; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .weggever.modal-overlay.open .weggever-box,
  .weggever.modal-overlay.closing .weggever-box { animation: none; }
}

  /* ============================================================
     Blog
     ============================================================ */
  .blog-wrap { padding: 64px 0 96px; min-height: 60vh; }
  .article-wrap { padding: 56px 0 96px; }

  .wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

  /* De kop loopt over de volle breedte van het raster, met een lijn die op
     dezelfde rechtermarge eindigt als de kaarten. De tekst zelf blijft smal. */
  .blog-head { max-width: none; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
  .blog-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); margin: 20px 0 0; letter-spacing: -0.03em; max-width: 20ch; }
  .blog-intro { color: var(--text-dim); font-size: 18px; line-height: 1.6; margin: 20px 0 0; max-width: 60ch; }

  /* ---------- Overzicht ---------- */
  .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 880px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 580px) { .post-list { grid-template-columns: 1fr; } }

  .post-card { display: flex; }
  .post-card-link {
    display: flex; flex-direction: column; gap: 14px; width: 100%; height: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px 24px; text-decoration: none; color: var(--text);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .post-card-link:hover { transform: translateY(-4px); border-color: rgba(208,152,24,.45); box-shadow: 0 24px 48px -26px rgba(0,0,0,.72); }

  .post-thumb { margin: -26px -24px 6px; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); aspect-ratio: 16 / 9; }
  .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Artikelen zonder uitgelichte afbeelding krijgen een getekend beeldblok, zodat
     elke kaart dezelfde opbouw houdt en de rijen gelijk lopen. */
  .post-thumb-leeg { position: relative; display: grid; place-items: center;
    background:
      radial-gradient(420px 170px at 20% 0%, rgba(208,152,24,.17), transparent 64%),
      radial-gradient(380px 190px at 90% 100%, rgba(124,92,255,.17), transparent 62%),
      linear-gradient(160deg, var(--surface-2), var(--surface)); }
  .post-thumb-leeg::before { content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px; }
  .post-thumb-leeg span { position: relative; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(208,152,24,.34); border-radius: 999px; padding: 7px 15px; background: rgba(10,27,46,.5); }

  .post-body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
  .post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; }
  .post-cat { color: var(--gold-light); text-transform: uppercase; letter-spacing: .1em; border: 1px solid rgba(208,152,24,.3); border-radius: 20px; padding: 4px 11px; }
  .post-date, .post-read { color: var(--text-dim); }
  .post-read::before { content: "\00b7"; margin-right: 10px; color: var(--border); }
  .post-title { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
  /* De tekst rekt niet mee met de kaarthoogte; overgebleven ruimte verzamelt zich
     onder de tekst in plaats van als gat tussen de tekst en de link. */
  .post-excerpt { color: #b7c4d3; font-size: 14.5px; line-height: 1.62; margin: 0; flex: none; }
  .post-more { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-light); display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px; }
  .post-arrow { transition: transform .2s ease; }
  .post-card-link:hover .post-arrow { transform: translateX(4px); }

  /* Uitgelicht eerste artikel */
  .post-card-featured { grid-column: 1 / -1; }
  .post-card-featured .post-card-link {
    padding: 42px 42px 38px; gap: 20px;
    background:
      radial-gradient(720px 340px at 12% 0%, rgba(124,92,255,.13), transparent 60%),
      radial-gradient(560px 300px at 96% 8%, rgba(34,211,238,.08), transparent 60%),
      linear-gradient(160deg, var(--surface), var(--navy-deep));
  }
  /* 16/9 in plaats van 21/9: de bannerbeelden zijn 1,91 op 1, dus een breder vak
     sneed er boven en onder bijna een vijfde af. */
  .post-card-featured .post-thumb { margin: -42px -42px 8px; aspect-ratio: 16 / 9; }
  .post-card-featured .post-title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.03em; max-width: 22ch; }
  .post-card-featured .post-excerpt { font-size: 16.5px; line-height: 1.6; color: #c6d2df; max-width: 64ch; }

  /* Boven 760px staat het uitgelichte artikel liggend: beeld links, tekst rechts.
     Staand werd de kaart 813px hoog en dan zie je verder niets meer. */
  /* Vanaf 1000px liggend. De beeldkolom is 62% breed: bij een kaarthoogte rond
     330px komt het vak daarmee over het hele schermbereik binnen een paar procent
     van de 1,91 op 1 van de bannerbeelden, zodat er nauwelijks iets wegvalt. */
  @media (min-width: 1000px) {
    .post-card-featured .post-card-link { display: grid; grid-template-columns: 62% 1fr; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
    .post-card-featured .post-thumb { margin: 0; aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid var(--border); }
    .post-card-featured .post-body { padding: 32px 36px; justify-content: center; gap: 14px; }
    .post-card-featured .post-title { font-size: clamp(1.5rem, 2.2vw, 1.85rem); max-width: 18ch; }
    /* Drie regels maximaal: anders groeit de tekstkolom op smallere schermen door
       en wordt de kaart hoger dan het beeld breed is, wat de banner bijsnijdt. */
    .post-card-featured .post-excerpt { font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .post-card-featured .post-more { margin-top: 4px; }
  }
  @media (max-width: 580px) { .post-card-featured .post-card-link { padding: 28px 22px; } .post-card-featured .post-thumb { margin: -28px -22px 8px; } }

  /* ---------- Paginering ---------- */
  .blog-pagination { margin-top: 56px; }
  .blog-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .blog-pagination a, .blog-pagination span.page-numbers {
    font-family: var(--font-mono); font-size: 14px; text-decoration: none;
    padding: 9px 15px; border-radius: 9px; border: 1px solid var(--border); color: var(--text-dim);
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }
  .blog-pagination a:hover { color: var(--text); border-color: var(--text-dim); }
  .blog-pagination .current { color: #1a1205; background: var(--gold); border-color: var(--gold); }
  .blog-empty { color: var(--text-dim); font-size: 17px; }

  /* ---------- Artikel ---------- */
  .article-head { margin-bottom: 30px; }
  .article-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; margin-bottom: 18px; }
  .article-title { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.06; letter-spacing: -0.035em; }
  .article-hero { margin: 8px 0 34px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
  .article-hero img { width: 100%; height: auto; display: block; }

  /* ---------- Leestekst ---------- */
  .prose { font-size: 18px; line-height: 1.75; color: #dce4ee; }
  .prose > * + * { margin-top: 1.35em; }
  .prose p { margin: 0; }
  /* `.prose p { margin: 0 }` is specifieker (0,1,1) dan `.prose > * + *` (0,1,0),
     dus zonder deze regel krijgen twee alinea's achter elkaar geen tussenruimte en
     plakken ze aan elkaar. Gelijke specificiteit, maar later in het bestand, dus deze
     wint. Raakt alleen directe kinderen van .prose, dus binnen een blockquote blijft
     de eigen regeling staan. */
  .prose > * + p { margin-top: 1.35em; }
  .prose h2 { font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.02em; margin-top: 1.9em; color: var(--text); }
  .prose h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.01em; margin-top: 1.7em; color: var(--text); }
  .prose a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease; }
  .prose a:hover { color: var(--gold); }
  .prose strong { color: var(--text); font-weight: 600; }
  .prose ul, .prose ol { margin: 1.35em 0; padding-left: 1.3em; }
  .prose li { margin: 0.5em 0; padding-left: 0.3em; }
  .prose li::marker { color: var(--gold); }
  .prose blockquote {
    margin: 2em 0; padding: 30px 30px 26px; position: relative;
    background: linear-gradient(160deg, var(--surface), var(--navy-deep));
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); font-family: var(--font-display); font-size: 1.32rem; line-height: 1.4; letter-spacing: -0.01em;
  }
  .prose blockquote::before {
    content: "\201C"; position: absolute; top: 2px; left: 18px;
    font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--gold); opacity: .5;
  }
  .prose blockquote p:first-child { margin-top: 0; }
  .prose blockquote > * + * { margin-top: 0.7em; }
  .prose blockquote p { padding-top: 22px; }
  .prose img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
  .prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; color: var(--gold-light); }
  .prose h2:first-child, .prose h3:first-child { margin-top: 0; }

  /* ---------- Tags, CTA, navigatie ---------- */
  .article-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; }
  .tag-chip { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; }

  .article-cta { margin-top: 52px; }
  .article-cta-inner {
    background:
      radial-gradient(600px 300px at 12% 0%, rgba(124,92,255,.12), transparent 60%),
      linear-gradient(160deg, var(--surface), var(--navy-deep));
    border: 1px solid var(--border); border-radius: 18px; padding: 40px 36px;
  }
  .article-cta-inner h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin: 14px 0 0; letter-spacing: -0.02em; }
  .article-cta-inner p { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin: 14px 0 24px; max-width: 52ch; }

  .article-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border); }
  .article-back { font-family: var(--font-mono); font-size: 14px; color: var(--text-dim); text-decoration: none; transition: color .15s ease; }
  .article-back:hover { color: var(--text); }
  .article-adjacent { font-size: 14.5px; color: var(--gold-light); text-decoration: none; text-align: right; max-width: 60%; transition: color .15s ease; }
  .article-adjacent:hover { color: var(--gold); }

  /* ---------- Footer: juridische links ---------- */
  .foot-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .foot-legal a,
  .foot-legal button,
  .foot-legal .cmplz-manage-consent,
  .foot-legal .cmplz-manage-consent-container {
    font-family: var(--font-mono); font-size: 13px; color: var(--text-dim);
    text-decoration: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; transition: color .15s ease;
  }
  .foot-legal a:hover,
  .foot-legal button:hover,
  .foot-legal .cmplz-manage-consent:hover { color: var(--text); }

  /* ---------- Cookiebanner (Complianz) in de findori-stijl ---------- */
  .cmplz-cookiebanner,
  .cmplz-manage-consent-container,
  #cmplz-manage-consent .cmplz-manage-consent {
    --cmplz_banner_background_color: var(--surface);
    --cmplz_banner_border_color: var(--border);
    --cmplz_text_color: var(--text);
    --cmplz_hyperlink_color: var(--gold-light);
    --cmplz_button_accept_background_color: var(--gold);
    --cmplz_button_accept_border_color: var(--gold);
    --cmplz_button_accept_text_color: #1a1205;
    --cmplz_button_deny_background_color: rgba(255,255,255,.05);
    --cmplz_button_deny_border_color: var(--border);
    --cmplz_button_deny_text_color: var(--text);
    --cmplz_button_settings_background_color: transparent;
    --cmplz_button_settings_border_color: var(--border);
    --cmplz_button_settings_text_color: var(--text-dim);
    --cmplz_slider_active_color: var(--gold);
    --cmplz_slider_inactive_color: #3a4d63;
    --cmplz_slider_bullet_color: var(--text);
    --cmplz_category_header_always_active_color: var(--gold-light);
  }
  .cmplz-cookiebanner { font-family: var(--font-body); box-shadow: 0 30px 70px -24px rgba(0,0,0,.75) !important; }
  .cmplz-cookiebanner .cmplz-title { font-family: var(--font-display); letter-spacing: -0.01em; }
  .cmplz-cookiebanner .cmplz-message a,
  .cmplz-cookiebanner .cmplz-links .cmplz-link { text-underline-offset: 2px; }
  .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(255,255,255,.04) !important; border: 1px solid var(--border); }
  .cmplz-cookiebanner .cmplz-btn { transition: filter .15s ease, transform .15s ease; }
  .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { filter: brightness(1.06); }
  .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
  .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover { border-color: var(--text-dim); }
  #cmplz-manage-consent .cmplz-manage-consent { font-family: var(--font-mono); font-size: 12px; }

  /* ---------- Vergelijking (losse tool vs Findori) ---------- */
  .vs-intro { color: var(--text-dim); font-size: 18px; margin: 18px 0 0; max-width: 760px; }
  .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
  @media (max-width: 780px) { .vs-grid { grid-template-columns: 1fr; } }
  .vs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
  .vs-card.findori { border-color: rgba(208,152,24,.45); background: linear-gradient(180deg, rgba(208,152,24,.06), var(--surface)); }
  .vs-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  .vs-card.findori .tag { color: var(--gold-light); }
  .vs-card h3 { font-size: 20px; margin: 10px 0 18px; }
  .vs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .vs-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #cdd8e4; }
  .vs-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
  .vs-card.tool .vs-list li::before { background: var(--text-dim); }
  .vs-card.findori .vs-list li::before { background: var(--gold); }
  .vs-close { color: var(--text-dim); font-size: 16px; margin: 32px 0 0; max-width: 760px; }
  .vs-close b { color: var(--text); font-weight: 600; }

  /* ---------- Voor wie ---------- */
  .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
  @media (max-width: 780px) { .fit-grid { grid-template-columns: 1fr; } }
  .fit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
  .fit-card h3 { font-size: 19px; margin: 0 0 18px; }
  .fit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .fit-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #cdd8e4; }
  .fit-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
  .fit-card.yes .fit-list li::before { background: var(--gold); }
  .fit-card.no .fit-list li::before { background: var(--text-dim); }
  .fit-close { color: var(--text-dim); font-size: 16px; margin: 32px 0 0; max-width: 760px; }

  /* ---------- Slot-video ---------- */
  .final-video { max-width: 760px; margin: 0 auto 46px; }
  .final-video .eyebrow { margin-bottom: 18px; }
  .final-video .video-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px -34px rgba(0,0,0,.65); }
  .final-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

  /* ---------- Framework-pagina ---------- */
  .score-panel .score-formula { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); text-align: center; }

  .fw-text { max-width: 760px; }
  .fw-text h3 { font-size: 20px; margin: 0 0 14px; }
  .fw-text p { color: #cdd8e4; font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
  .fw-text p:last-child { margin-bottom: 0; }
  .fw-text ul { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
  .fw-text li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.65; color: #cdd8e4; }
  .fw-text li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 9px; flex: none; }
  .fw-standard { max-width: 760px; }

  /* zichtbare opsommingsbolletjes ook buiten fit-card */
  .fit-list li::before { background: var(--gold); }

  .fw-components { display: flex; flex-direction: column; gap: 16px; }
  .fw-comp { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; }
  @media (max-width: 620px) { .fw-comp { grid-template-columns: 1fr; gap: 10px; } }
  .fw-comp .w { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1; color: var(--gold-light); }
  .fw-comp h3 { font-size: 20px; margin: 0 0 8px; }
  .fw-comp .q { color: var(--text); font-weight: 600; font-size: 16px; margin: 0 0 12px; }
  .fw-comp p { color: #cdd8e4; font-size: 15px; line-height: 1.7; margin: 0 0 10px; }
  .fw-comp p:last-child { margin-bottom: 0; }

  .formula-band { background: linear-gradient(160deg, rgba(124,92,255,.10), var(--surface)); border: 1px solid rgba(124,92,255,.28); border-radius: 16px; padding: 30px 26px; text-align: center; }
  .formula-band.alt { margin-top: 30px; background: linear-gradient(160deg, rgba(208,152,24,.10), var(--surface)); border-color: rgba(208,152,24,.35); }
  .formula-line { font-family: var(--font-display); font-size: clamp(1.05rem, 2.4vw, 1.5rem); color: var(--text); font-weight: 500; }
  .formula-line b { color: var(--gold-light); }
  .formula-line span { color: var(--text-dim); margin: 0 6px; }
  .formula-note { color: var(--text-dim); font-size: 14.5px; margin: 14px 0 0; }

  .fw-audit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 720px) { .fw-audit { grid-template-columns: 1fr; } }
  .fw-audit-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
  .fw-audit-card h3 { font-size: 19px; margin: 0 0 12px; }
  .fw-audit-card p { color: #cdd8e4; font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
  .fw-audit-card p:last-child { margin-bottom: 0; }
  .fw-audit-card .fit-list { margin: 0 0 14px; }

  .fw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 1160px) { .fw-grid3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .fw-grid3 { grid-template-columns: 1fr; } }
  .fw-feat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
  .fw-feat h3 { font-size: 18px; margin: 0 0 8px; }
  .fw-feat p { color: var(--text-dim); font-size: 14.5px; line-height: 1.65; margin: 0; }

  .cmp-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
  .cmp-table { width: 100%; border-collapse: collapse; min-width: 480px; }
  .cmp-table th, .cmp-table td { text-align: left; padding: 15px 22px; font-size: 15px; border-bottom: 1px solid var(--border); }
  .cmp-table thead th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: rgba(255,255,255,.03); }
  .cmp-table tbody tr:last-child td { border-bottom: none; }
  .cmp-table td:first-child { color: var(--text-dim); }
  .cmp-table th:last-child, .cmp-table td:last-child { color: var(--text); border-left: 1px solid var(--border); }
  .cmp-table thead th:last-child { color: var(--gold-light); }

  .fw-know { max-width: 820px; }
  .fw-know .fit-list { columns: 2; column-gap: 28px; }
  @media (max-width: 600px) { .fw-know .fit-list { columns: 1; } }
  .fw-know .fit-list li { break-inside: avoid; }
  .fw-know-note { color: var(--text-dim); font-size: 15.5px; line-height: 1.7; margin: 22px 0 0; }

  .cycle-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
  .cycle-step { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text); padding: 10px 20px; border-radius: 999px; border: 1px solid var(--border); background: var(--navy-deep); }
  .cycle-arrow { color: var(--gold); font-size: 20px; }

  /* volledig-brede beeldband die aan de randen in het navy wegvloeit */
  .fw-showcase { position: relative; width: 100%; margin: 48px 0; overflow: hidden; line-height: 0; }
  .fw-showcase img { display: block; width: 100%; height: auto; max-height: 660px; object-fit: cover; object-position: center; }
  .fw-showcase::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, var(--navy) 0%, rgba(10,27,46,0) 15%, rgba(10,27,46,0) 85%, var(--navy) 100%),
    linear-gradient(180deg, var(--navy) 0%, rgba(10,27,46,0) 14%, rgba(10,27,46,0) 78%, var(--navy) 100%); }
  .fw-showcase-cap { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2; text-align: center; line-height: 1.4; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
  @media (max-width: 640px) { .fw-showcase img { max-height: 400px; } .fw-showcase-cap { bottom: 12px; } }

  /* Contained beeld op de homepage (rapport-mockup) */
  .home-figure { margin: 44px auto 0; max-width: 860px; text-align: center; }
  .home-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 30px 70px -34px rgba(0,0,0,.6); }
  .home-figure figcaption { margin-top: 14px; color: var(--text-dim); font-size: 14.5px; }

  /* Sprint-staffels naar aantal pagina's */
  .ftiers { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-direction: column; gap: 0; }
  .ftiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: #cdd8e4; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .ftiers li:last-child { border-bottom: none; }
  .ftiers li b { color: var(--gold-light); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Losse uitbreiding: Autoriteit & Digital PR */
  .addon-card { max-width: 720px; margin: 40px auto 0; background: linear-gradient(180deg, rgba(208,152,24,.05), var(--surface)); border: 1px solid rgba(208,152,24,.32); border-radius: 18px; padding: 32px 34px; }
  .addon-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
  .addon-card h3, .addon-card h2 { font-size: 22px; margin: 0; }
  .addon-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(208,152,24,.45); border-radius: 999px; padding: 5px 12px; }
  .addon-card p { color: #cdd8e4; font-size: 15.5px; line-height: 1.7; margin: 16px 0 0; }
  .addon-card ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
  .addon-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: #cdd8e4; }
  .addon-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 8px; flex: none; }
  .addon-price { font-size: 15px; }
  .addon-price b { color: var(--text); font-weight: 600; }
  .addon-card .btn { margin-top: 22px; }

  /* ---------- Diensten mega-menu in de navigatie ---------- */
  .nav-group { position: relative; display: inline-flex; align-items: center; }
  .nav-group-trigger::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: .6; transition: transform .2s ease; }
  .nav-group:hover .nav-group-trigger::after, .nav-group:focus-within .nav-group-trigger::after { transform: rotate(-135deg) translateY(1px); }

  .mega { position: absolute; top: 100%; left: -24px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; z-index: 60; }
  .nav-group:hover .mega, .nav-group:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
  .mega-inner { display: grid; grid-template-columns: 1fr 258px; gap: 10px; width: 660px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: 0 26px 60px rgba(0,0,0,.5); }

  /* Deze drie regels houden het paneel bij elkaar. De menulinks staan op
     white-space: nowrap, dus een lange omschrijving kan niet afbreken en wordt de
     min-content-breedte van de 1fr-kolom. Het raster groeit dan voorbij de 660px
     van het paneel, de rechterkolom schuift buiten de ondergrond en lijkt
     doorzichtig over de pagina te zweven. min-width: 0 alleen is niet genoeg,
     want zonder white-space: normal blijft de tekst één onbreekbare regel. */
  .nav-links .mega-item { white-space: normal; }
  .mega-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mega-txt { min-width: 0; }
  .mega-txt small { overflow-wrap: anywhere; }
  .mega-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; text-decoration: none; transition: background .15s ease; }
  .mega-item:hover { background: rgba(255,255,255,.045); }
  .mega-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(74,107,255,.12); border: 1px solid var(--border); color: #7d95ff; transition: color .15s ease, background .15s ease; }
  .mega-item:hover .mega-ico { color: var(--gold-light); background: rgba(208,152,24,.13); }
  .mega-txt { display: flex; flex-direction: column; gap: 3px; }
  .mega-txt b { color: var(--text); font-weight: 600; font-size: 15px; }
  .mega-txt small { color: var(--text-dim); font-size: 13px; line-height: 1.35; }

  .mega-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px; border-radius: 14px; background: linear-gradient(160deg, rgba(208,152,24,.14), rgba(74,107,255,.08)); border: 1px solid var(--border); }
  .mega-feature .eyebrow { margin: 0; }
  .mega-feature b { color: var(--text); font-size: 16px; }
  .mega-feature p { color: var(--text-dim); font-size: 13px; line-height: 1.4; margin: 0; }
  .mega-feature .btn { margin-top: 2px; }
  .nav-links .mega-feature .btn-gold { color: #1a1205; }
  .nav-links .mega-feature-link { color: var(--gold-light); font-size: 13px; font-weight: 600; text-decoration: none; }
  .nav-links .mega-feature-link:hover { color: var(--gold); }

  /* Compacte dropdown (Kennis) */
  .nav-mini { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; opacity: 0; visibility: hidden; transition: opacity .16s ease; z-index: 60; }
  .nav-group:hover .nav-mini, .nav-group:focus-within .nav-mini { opacity: 1; visibility: visible; }
  .nav-mini-inner { display: flex; flex-direction: column; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: 0 20px 44px rgba(0,0,0,.42); }
  .nav-mini-inner a { padding: 11px 14px; border-radius: 9px; font-size: 15px; white-space: nowrap; }
  .nav-mini-inner a:hover { background: rgba(255,255,255,.05); color: var(--text); }

  @media (max-width: 1160px) {
    .nav-group { display: block; width: 100%; }
    /* Diensten en Kennis klappen open in plaats van altijd uit te staan. Zonder dit
       is het uitgeklapte menu ruim 1100px hoog en vallen Prijzen, Vragen, Contact
       en de gratis check buiten beeld. */
    .nav-links .nav-group-trigger { display: flex; align-items: center; justify-content: space-between; }
    .nav-group-trigger::after { display: inline-block; margin-left: 10px; opacity: .55; }
    .nav-group.nav-group-open .nav-group-trigger::after { transform: rotate(-135deg) translateY(1px); }
    .nav-group .mega, .nav-group .nav-mini { display: none; }
    .nav-group.nav-group-open .mega, .nav-group.nav-group-open .nav-mini { display: block; }
    .mega { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0; }
    .mega-inner { display: block; width: auto; max-width: none; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
    .nav-links .mega-item { padding: 13px 2px 13px 14px; border-bottom: 1px solid var(--border); border-radius: 0; }
    .nav-links .mega-item:hover { background: none; }
    .mega-feature { display: none; }
    .nav-mini { position: static; opacity: 1; visibility: visible; transform: none; padding-top: 0; }
    .nav-mini-inner { min-width: 0; background: none; border: 0; border-radius: 0; padding: 0 0 0 14px; box-shadow: none; }
  }

  /* ---------- Kennisbank ---------- */
  .kb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .kb-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color .18s ease, transform .18s var(--ease-out); }
  .kb-card:hover { border-color: var(--text-dim); transform: translateY(-3px); }
  .kb-card h2 { font-size: 1.24rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); margin: 0; }
  .kb-card p { font-size: 15px; line-height: 1.55; color: var(--text-dim); margin: 0; flex: 1; }
  .kb-more { color: var(--gold-light); font-size: 14px; font-weight: 600; }
  .kb-card:hover .kb-more { color: var(--gold); }
  @media (max-width: 720px) { .kb-grid { grid-template-columns: 1fr; } }

  /* ---------- Taalwisselaar ---------- */
  .lang-switch { display: inline-flex; align-items: center; gap: 2px; }
  .lang-link { display: inline-flex; align-items: center; padding: 5px 6px; border-radius: 7px; opacity: .5; transition: opacity .15s ease, background .15s ease; }
  .lang-link:hover { opacity: 1; }
  .lang-active { opacity: 1; background: rgba(255,255,255,.08); }
  .lang-link .flag { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }

  /* Taalhint: smalle regel voor Engelstalige bezoekers, in plaats van de oude automatische
     omleiding naar /en/. Staat standaard op hidden en wordt alleen door JS getoond. */
  .lang-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-dim); }
  .lang-hint[hidden] { display: none; }
  .lang-hint-link { color: var(--gold-light); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(230,184,74,.4); }
  .lang-hint-link:hover { color: var(--gold); }
  .lang-hint-close { background: none; border: 0; color: var(--text-dim); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
  .lang-hint-close:hover { color: var(--text); }
  @media (max-width: 560px) { .lang-hint { font-size: 13px; padding: 8px 14px; } }

  /* Verwijzing vanuit een dienstpagina naar het bijbehorende kennisbankartikel. */
  .final-note { font-size: 15px; color: var(--text-dim); margin-top: 18px; }
  .final-note a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(230,184,74,.4); }
  .final-note a:hover { color: var(--gold); }

/* ================= Findori Academy ================= */
/* ============================================================
   Findori Academy
   Alleen nieuwe klassen. Achter style.css plakken. Gebruikt de bestaande
   CSS-variabelen (--gold, --gold-light, --text-dim, --border, --surface, enz.).
   Mobiel-eerst, breekpunt op 1000px (gelijk aan de bestaande .wrap.split).
   ============================================================ */

/* ---------- Hub: kerncijfers in de hero ---------- */
.academy-stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 34px; }
.academy-stat { display: flex; flex-direction: column; gap: 6px; }
.academy-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--gold-light); }
.academy-stat .lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }

/* ---------- Hub: hoofdstukkenlijst ---------- */
.academy-chapters { display: flex; flex-direction: column; }
.academy-chapter { padding: 40px 0; border-top: 1px solid var(--border); }
.academy-chapter:first-child { border-top: 0; padding-top: 0; }
.academy-chapter-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.academy-chapter-num { font-family: var(--font-mono); font-size: 14px; color: var(--gold-light); }
.academy-chapter-head h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.academy-chapter-head h2 a { text-decoration: none; color: var(--text); transition: color .15s ease; }
.academy-chapter-head h2 a:hover { color: var(--gold-light); }
.academy-chapter-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.academy-chapter-intro { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; margin: 14px 0 0; max-width: 70ch; }

.academy-lesson-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 700px) { .academy-lesson-list { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.academy-lesson-list a {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  text-decoration: none; color: #cdd8e4; border-bottom: 1px solid var(--border);
  transition: color .15s ease;
}
.academy-lesson-list a:hover { color: var(--text); }
.academy-lesson-num { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); width: 20px; flex: none; }
.academy-lesson-title { flex: 1; font-size: 15px; }
.academy-lesson-arrow { color: var(--gold-light); transition: transform .15s ease; flex: none; }
.academy-lesson-list a:hover .academy-lesson-arrow { transform: translateX(4px); }

/* ---------- Les en hoofdstuk: tweekoloms layout ---------- */
.academy-layout { display: block; }
@media (min-width: 1000px) {
  .academy-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 56px; align-items: start; }
}

/* ---------- Zijbalk (gedeeld door les en hoofdstuk) ---------- */
.academy-sidebar-desktop { display: none; }
@media (min-width: 1000px) {
  .academy-sidebar-desktop {
    display: block; position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow-y: auto;
    padding-right: 6px;
  }
}
.academy-sidebar-desktop .eyebrow { margin-bottom: 18px; }
.academy-sb-chapter { padding: 10px 0; border-top: 1px solid var(--border); }
.academy-sb-chapter:first-child { border-top: 0; }
.academy-sb-chapter-title {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  color: var(--text-dim); text-decoration: none; padding: 4px 0; transition: color .15s ease;
}
.academy-sb-chapter.is-open .academy-sb-chapter-title { color: var(--gold-light); }
.academy-sb-chapter-title:hover { color: var(--text); }
.academy-sb-lesson-list { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-direction: column; gap: 1px; }
.academy-sb-lesson-list a {
  display: block; padding: 7px 0 7px 12px; font-size: 13.5px; color: var(--text-dim);
  text-decoration: none; border-left: 2px solid var(--border); transition: color .15s ease, border-color .15s ease;
}
.academy-sb-lesson-list a:hover { color: var(--text); }
.academy-sb-lesson-list a.is-current { color: var(--text); font-weight: 600; border-left-color: var(--gold); }

/* Mobiele variant: uitklapbaar overzicht boven de les/het hoofdstuk. */
.academy-sidebar-mobile { display: block; margin-bottom: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 18px; }
@media (min-width: 1000px) { .academy-sidebar-mobile { display: none; } }
.academy-sidebar-mobile summary {
  cursor: pointer; list-style: none; padding: 14px 0; font-family: var(--font-display);
  font-weight: 600; font-size: 15px; color: var(--text); display: flex; align-items: center; justify-content: space-between;
}
.academy-sidebar-mobile summary::-webkit-details-marker { display: none; }
.academy-sidebar-mobile summary::after { content: "\2193"; color: var(--gold); font-family: var(--font-mono); transition: transform .2s ease; }
.academy-sidebar-mobile[open] summary::after { transform: rotate(180deg); }
.academy-sidebar-mobile-inner { padding: 0 0 16px; }

/* ---------- Les: kern-kader, FAQ en gerelateerde lessen ---------- */

/* Ondermarge iets ruimer dan de bovenmarge: het kader hoort los te staan van de tekst
   die eronder begint, anders lijkt de eerste alinea erbij te horen. */
.academy-kern {
  margin: 26px 0 34px; padding: 18px 20px; background: rgba(208,152,24,.07);
  border: 1px solid rgba(208,152,24,.3); border-radius: var(--radius);
}
.academy-kern-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.academy-kern p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--text); font-weight: 500; }

.academy-faq { margin-top: 48px; }
.academy-faq h2 { font-size: 1.5rem; margin: 0 0 18px; }
.academy-faq-item { padding: 20px 0; border-top: 1px solid var(--border); }
.academy-faq-item h3 { font-size: 17px; margin: 0 0 8px; }
.academy-faq-item div { color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.academy-faq-item div p { margin: 0; }

.academy-related { margin-top: 44px; }
.academy-related h2 { font-size: 1.3rem; margin: 0 0 14px; }
.academy-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.academy-related a {
  display: block; padding: 11px 0; color: var(--gold-light); text-decoration: none;
  border-top: 1px solid var(--border); transition: color .15s ease;
}
.academy-related li:first-child a { border-top: 0; }
.academy-related a:hover { color: var(--gold); }

/* ---------- Hoofdstukpagina: introtekst en lessenlijst ---------- */
.academy-chapter-intro { color: var(--text-dim); font-size: 17px; line-height: 1.65; margin-top: 16px; max-width: 70ch; }
.academy-chapter-intro p { margin: 0 0 1em; }
.academy-chapter-intro p:last-child { margin-bottom: 0; }

.academy-chapter-lessons { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; gap: 2px; }
.academy-chapter-lessons a {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 4px;
  text-decoration: none; border-top: 1px solid var(--border); transition: color .15s ease;
}
.academy-chapter-lessons li:first-child a { border-top: 0; }
.academy-chapter-lesson-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); }
.academy-chapter-lessons a:hover .academy-chapter-lesson-title { color: var(--gold-light); }
.academy-chapter-lesson-excerpt { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; }

/* ---------- Homepage: verwijzing naar de Academy ---------- */
.academy-home { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 34px; }
@media (min-width: 900px) { .academy-home { grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; } }

.academy-home-main {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.academy-home-main:hover { border-color: rgba(208,152,24,.45); transform: translateY(-2px); }
.academy-home-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
.academy-home-titel { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); }
.academy-home-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }

.academy-home-lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.academy-home-lijst a {
  display: block; padding: 15px 0; color: #cdd8e4; text-decoration: none; font-size: 15.5px;
  border-bottom: 1px solid var(--border); transition: color .15s ease, padding-left .15s ease;
}
.academy-home-lijst li:first-child a { border-top: 1px solid var(--border); }
.academy-home-lijst a:hover { color: var(--gold-light); padding-left: 6px; }

/* ---------- Contactpagina: gegevenslijst in het hero-paneel ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.contact-list li { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); }
.contact-list li:first-child { border-top: 0; padding-top: 4px; }
.contact-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); flex: none; width: 88px; padding-top: 3px; }
.contact-val { font-size: 15px; line-height: 1.5; color: var(--text); }
.contact-val a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(230,184,74,.4); }
.contact-val a:hover { color: var(--gold); }