/* ═══════════════════════════════════════
   v3 huisstijl — sitewide chrome
   Announcement bar + sticky glass-navbar
   Bron: design_handoff_geo_website/README.md
═══════════════════════════════════════ */

/* De teal-orb rechtsboven stond precies achter de navbar geparkeerd. Omdat
   .bg-canvas fixed is, bewoog die niet mee en las hij als een vaste vlek in
   de balk. Alleen deze orb zakt omlaag; de rest van het orb-systeem (dat ook
   op de oudere pagina's draait) blijft ongemoeid. */
.orb-4 { top: 46%; }

/* ── Announcement bar ── */
.v3-announce {
  width: 100%;
  background: var(--v3-section);
  text-align: center;
  padding: 10px 20px;
  font-family: var(--v3-font);
  font-size: var(--v3-fs-klein);
  font-weight: 500;
  color: var(--v3-text-2);
  position: relative;
  z-index: 80;
}
.v3-announce a {
  color: var(--v3-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v3-announce a:hover { color: var(--v3-cyan); }
.v3-announce-inner { max-width: var(--v3-container); margin: 0 auto; }

/* ── Sticky navbar wrapper ── */
.v3-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 18px 32px 14px;
}


/* Glazen navbar.
   Specificiteit gelijk aan de oude #nav.is-scrolled-regels in style.css, zodat
   die niet doorlekken. Het glas bestaat uit vier lagen: een verticale
   lichtgradiënt, een doorschijnende tint, de backdrop-blur eronder, en een
   binnenrand die de bovenkant laat oplichten. */
#nav.v3-navbar,
#nav.v3-navbar.is-scrolled {
  position: relative;
  height: auto;
  max-width: var(--v3-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 20px 12px 24px;
  background:
    linear-gradient(180deg, rgba(159, 211, 255, .05) 0%, rgba(159, 211, 255, .012) 34%, rgba(255, 255, 255, 0) 70%),
    rgba(12, 26, 52, .30);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: none;
  border-radius: 22px;
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, .65),
    0 8px 24px -12px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(159, 211, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .22);
  transition: background .35s ease, box-shadow .35s ease;
}

/* Gradient-rand: lijkt op licht dat langs een glasrand strijkt. */
#nav.v3-navbar::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(159, 211, 255, .26) 0%,
    rgba(159, 211, 255, .07) 34%,
    rgba(255, 255, 255, .03) 64%,
    rgba(34, 211, 238, .18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Geen extra sheen-laag: de gradiënt in de achtergrond en de rand geven al
   genoeg glans. Een derde witte laag maakte het glas melkig. */
#nav.v3-navbar::after { content: none; }

/* Inhoud boven de glaslagen houden. */
#nav.v3-navbar > * { position: relative; z-index: 1; }

/* Bij scrollen wordt het glas iets dichter, zodat tekst leesbaar blijft
   wanneer er drukke inhoud onderdoor schuift. */
#nav.v3-navbar.is-scrolled {
  background:
    linear-gradient(180deg, rgba(159, 211, 255, .055) 0%, rgba(159, 211, 255, .015) 34%, rgba(255, 255, 255, 0) 70%),
    rgba(9, 20, 42, .58);
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, .75),
    0 10px 28px -14px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(159, 211, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
}

/* Zonder backdrop-filter zou de balk doorzichtig en onleesbaar worden. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #nav.v3-navbar,
  #nav.v3-navbar.is-scrolled { background: rgba(9, 20, 42, .96); }
}

.v3-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.v3-nav-logo img { height: 34px; width: auto; display: block; }

.v3-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  flex: 1;
  justify-content: center;
  margin: 0; padding: 0;
}
.v3-nav-links > li { position: relative; }

.v3-nav-links > li > a,
.v3-nav-trigger {
  font-family: var(--v3-font);
  font-size: var(--v3-fs-klein);
  font-weight: 500;
  color: var(--v3-text-1);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  opacity: .88;
  transition: opacity var(--t);
}
.v3-nav-links > li > a:hover,
.v3-nav-trigger:hover,
.v3-nav-trigger[aria-expanded="true"],
.v3-nav-links > li > a.nav-active {
  opacity: 1;
}

.v3-nav-chevron { width: 10px; height: 10px; color: var(--v3-text-3); transition: transform var(--t); }
.v3-nav-trigger[aria-expanded="true"] .v3-nav-chevron { transform: rotate(180deg); }

.v3-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 220px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .01) 60%, rgba(255, 255, 255, 0) 100%),
    rgba(13, 27, 54, .72);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 8px;
  box-shadow:
    0 24px 54px -16px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--v3-ease), transform var(--v3-ease), visibility var(--v3-ease);
  z-index: 80;
}
/* Onzichtbare brug over de tussenruimte tussen knop en paneel. Zonder dit
   hoort die 14px bij niets en verlies je de hover zodra je de knop verlaat,
   waardoor het paneel wegvalt terwijl je er juist naartoe beweegt.
   Loopt bewust iets breder dan het paneel, zodat ook een schuine muisbeweging
   binnen het gebied blijft. */
.v3-dropdown::before {
  content: '';
  position: absolute;
  left: -12px; right: -12px;
  top: -18px; height: 18px;
}

.v3-has-dropdown:hover .v3-dropdown,
.v3-has-dropdown:focus-within .v3-dropdown,
.v3-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  animation: v3FadeUp .16s ease;
}
@keyframes v3FadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-dropdown { animation: none !important; transition: opacity var(--v3-ease); }
}

.v3-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--v3-font);
  font-size: var(--v3-fs-klein);
  font-weight: 500;
  color: var(--v3-text-1);
  opacity: .85;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--t), opacity var(--t);
}
.v3-dropdown a:hover,
.v3-dropdown a:focus-visible {
  background: rgba(43, 127, 255, .16);
  opacity: 1;
  outline: none;
}

.v3-nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.v3-btn {
  font-family: var(--v3-font);
  font-weight: 700;
  font-size: var(--v3-fs-klein);
  padding: 11px 20px;
  border-radius: var(--v3-r-pill);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Knoppen kunnen een geo_icon() voor de tekst hebben; zonder gap plakt dat
     icoon tegen het woord aan. */
  gap: 9px;
  transition: filter var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.v3-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.v3-btn-outline {
  color: var(--v3-text-1);
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.v3-btn-lg { padding: 17px 30px; font-size: var(--v3-fs-body); }
.v3-btn-outline:hover { border-color: var(--v3-cyan); background: rgba(255, 255, 255, .055); }
.v3-btn-grad {
  color: var(--v3-grad-text);
  background: var(--v3-grad);
  border: none;
  box-shadow: 0 8px 22px rgba(43, 127, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.v3-btn-grad:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 30px rgba(43, 127, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ═══════════════════════════════════════
   RESPONSIVE — chrome
   Let op: style.css toont de hamburger pas onder 768px, terwijl de v3-navbar
   zijn links al onder 1100px verbergt. Zonder onderstaande regel is er tussen
   769 en 1100px helemaal geen navigatie.
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .v3-nav-links, .v3-nav-right { display: none; }
  .nav-hamburger { display: flex; }
  .v3-nav-wrap { padding: 12px 20px 10px; }
  #nav.v3-navbar, #nav.v3-navbar.is-scrolled { padding: 10px 14px 10px 18px; border-radius: 18px; }
  .v3-nav-logo img { height: 30px; }
  .nav-hamburger span { background: var(--v3-text-1); }

  /* Mobiel menu: eigen paneel onder de zwevende balk. Staat buiten
     .v3-nav-wrap, dus de backdrop-filter van de navbar vormt hier geen
     containing block voor deze fixed positionering. */
  .mobile-menu {
    position: fixed; inset: 0; top: 0;
    z-index: 60;
    display: none; flex-direction: column; gap: 2px;
    /* Onderaan geen padding meer: die zit nu in het knoppenblok, dat er
       sticky in hangt. Met padding hier zou het blok 32px boven de onderrand
       blijven zweven. */
    padding: 116px 24px 16px;
    background: rgba(4, 13, 30, .93);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: none;
    overflow-y: auto;
  }
  .mobile-menu.open { display: flex; }
  /* Rijen compacter dan eerst (waren 62px hoog). De hele lijst was daardoor
     872px hoog, meer dan een telefoonscherm, en de knoppen onderaan begonnen
     pas op 840px. 52px is nog ruim boven de 44px die een vingerdoel nodig
     heeft. */
  .mobile-menu a {
    font: 600 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1);
    padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-decoration: none;
  }
  .mobile-menu a:hover { color: var(--v3-cyan); }

  /* Uitklapkop "Over". Dezelfde rijhoogte en onderrand als een gewone
     menuregel, zodat de lijst één ritme houdt. De ingesprongen links eronder
     maken zichtbaar dat ze bij de kop horen. */
  .mobile-groep { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .mobile-groep > summary {
    display: flex; align-items: center; justify-content: space-between;
    font: 600 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1);
    padding: 13px 0;
    cursor: pointer; list-style: none;
  }
  .mobile-groep > summary::-webkit-details-marker { display: none; }
  .mobile-groep > summary svg {
    width: 12px; height: auto; flex: none;
    color: var(--v3-text-3);
    transition: transform .2s ease;
  }
  .mobile-groep[open] > summary svg { transform: rotate(180deg); }
  /* display:block is hier nodig: de links buiten deze groep zijn flexitems van
     .mobile-menu en dus vanzelf blokniveau, maar deze staan in <details> en
     blijven zonder dit inline, waardoor de padding geen rijhoogte oplevert. */
  .mobile-menu .mobile-groep a {
    display: block;
    padding: 12px 0 12px 16px; /* 45px hoog, net boven de 44px vingermaat */
    font-size: var(--v3-fs-body);
    color: var(--v3-text-2);
    border-bottom: none;
  }
  .mobile-menu .mobile-groep a:hover { color: var(--v3-cyan); }
  .mobile-menu .mobile-groep a:last-child { padding-bottom: 15px; }

  /* De knoppen blijven onderin staan terwijl de lijst erachter langs scrollt.
     Zonder dit stond "Gratis AI-scan" altijd onder de vouw, ook op een lang
     scherm, en dat is nu juist de knop waarvoor het menu er staat.
     margin-top:auto duwt het blok naar beneden zolang er ruimte over is, en
     sticky houdt het vast zodra de lijst langer wordt dan het scherm. */
  .mobile-ctas {
    display: flex; flex-direction: column; gap: 12px;
    position: sticky; bottom: 0; margin-top: auto;
    padding: 18px 0 6px;
    background: linear-gradient(to top, rgba(4, 13, 30, .97) 74%, rgba(4, 13, 30, 0));
  }
  .mobile-ctas .v3-btn { width: 100%; padding: 15px 24px; border-bottom: none; }
  .mobile-menu .mobile-ctas a { border-bottom: none; }
}

@media (max-width: 720px) {
  .v3-announce { font-size: var(--v3-fs-label); padding: 9px 16px; text-align: left; }
  .v3-nav-wrap { padding: 10px 14px 8px; }
  .v3-container { padding: 0 20px; }
  .v3-footer-card { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; margin-bottom: 40px; }
  .v3-footer-statement { padding: 0 20px; }
  .v3-footer-bottom { padding: 24px 20px 0; margin-top: 40px; }
  .v3-nl-form { padding: 5px 5px 5px 16px; }
  .mobile-menu { padding-top: 112px; }
}

/* ── Gedeelde typografie-helpers (home + diensten + contact) ── */
.v3-kicker {
  display: inline-block;
  font: 500 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v3-cyan);
}
.v3-kicker-light { color: var(--v3-light); }

/* ── Footer ── */
#footer.v3-footer {
  background: var(--v3-section);
  border-top: none;
  padding: 32px 0 44px;
  position: relative; z-index: 1;
}
.v3-footer-card {
  max-width: var(--v3-container); margin: 0 auto 64px;
  padding: 44px; background: var(--v3-card-alt); border-radius: var(--v3-r-card-lg);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
.v3-footer-logo { display: flex; align-items: center; }
.v3-footer-logo img { height: 32px; width: auto; display: block; }
.v3-footer-tagline {
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: #8fa6c4;
  margin: 20px 0 0; max-width: 320px;
}
.v3-footer-kvk { font: 400 var(--v3-fs-klein) / 1.7 var(--v3-font); color: #5b7ea8; margin: 20px 0 0; }
.v3-footer-col-title {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font); letter-spacing: .04em;
  text-transform: uppercase; color: #5b7ea8;
}
.v3-footer-links { display: grid; gap: 12px; margin-top: 18px; }
.v3-footer-links a {
  font: 400 var(--v3-fs-body) / 1.4 var(--v3-font); color: #c9d8ea;
  text-decoration: none; transition: color var(--t);
}
.v3-footer-links a:hover { color: var(--v3-cyan); }

.v3-footer-statement {
  max-width: var(--v3-container); margin: 0 auto;
  padding: 0 32px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.v3-footer-claim {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: #fff; margin: 0;
}
.v3-footer-cta { text-align: right; }
.v3-nl-intro { font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); color: #8fa6c4; margin: 0 0 14px; }

.v3-nl-form {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid rgba(255, 255, 255, .22); border-radius: 14px;
  padding: 6px 6px 6px 20px;
  transition: border-color var(--t);
}
.v3-nl-form:focus-within { border-color: var(--v3-cyan); }
.v3-nl-form input[type="email"] {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font: 400 var(--v3-fs-body) / 1.4 var(--v3-font); padding: 14px 0;
}
.v3-nl-form input[type="email"]::placeholder { color: #5b7ea8; }
.v3-nl-form button {
  width: 46px; height: 46px; border-radius: 10px; border: none; flex-shrink: 0;
  background: var(--v3-grad); color: var(--v3-grad-text);
  font: 400 var(--v3-fs-lead) / 1 var(--v3-font); cursor: pointer;
  transition: filter var(--t);
}
.v3-nl-form button:hover { filter: brightness(1.06); }
.v3-nl-form button:disabled { opacity: .6; cursor: not-allowed; }
/* Honeypot uit beeld halen zonder display:none (bots negeren dat vaker). */
.v3-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.v3-nl-feedback { font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); margin: 12px 0 0; min-height: 1em; }
.v3-nl-feedback.is-ok { color: #34d399; }
.v3-nl-feedback.is-err { color: #f87171; }

/* Toegankelijke labels die visueel verborgen zijn */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.v3-footer-bottom {
  max-width: var(--v3-container); margin: 56px auto 0;
  padding: 32px 32px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font: 400 var(--v3-fs-klein) / 1.4 var(--v3-font); color: #5b7ea8;
}
.v3-footer-legal { display: flex; gap: 24px; }
.v3-footer-legal a { color: #5b7ea8; text-decoration: none; }
.v3-footer-legal a:hover { color: var(--v3-cyan); }

@media (max-width: 1100px) {
  .v3-footer-card { grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px; }
  .v3-footer-statement { grid-template-columns: 1fr; gap: 24px; }
  .v3-footer-cta { text-align: left; }
}

/* Plaatshouder voor nog te leveren echte screenshots (zie README "Assets"). */
.v3-imgslot {
  position: relative; width: 100%; height: 100%; min-height: 120px;
  background: var(--v3-image-plane);
  display: flex; align-items: center; justify-content: center;
}
.v3-imgslot::after {
  content: attr(data-label);
  font: 500 var(--v3-fs-label) / 1.5 var(--v3-font);
  color: var(--v3-text-3);
  text-align: center;
  padding: 0 20px;
}

/* ── Lichte secties ──
   Twee dingen tegelijk, en het tweede is belangrijker dan het eerste:

   1. Een dekkende achtergrond. Dat moet dekkend zijn, niet doorzichtig, want
      .bg-canvas in style.css legt een vast raster van 54px achter de hele
      pagina. Alleen een dekkend vlak dekt dat raster af. Met rgba() blijft het
      raster gewoon zichtbaar en verdwijnt het onderscheid.
   2. Het wegvallen van dat raster is het eigenlijke verschil tussen een lichte
      en een donkere sectie. Daardoor kan de kleur zelf heel zacht blijven:
      #050f20 ligt maar ~3 luminantiepunten boven de pagina, tegen ~5 voor de
      oude sectiekleur. Rustiger, en toch duidelijk een andere zone.

   Sitewide bruikbaar: zet de klasse op elke sectie die rasterloos moet zijn. */
.v3-vlak {
  position: relative;
  background-color: #050f20;
}

/* Een hele brede, zachte lichtval bovenin. Geeft de sectie eigen diepte in
   plaats van het raster, zonder dat er een rand of vorm ontstaat. */
.v3-vlak::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 520px at 50% 0%, rgba(159, 211, 255, .035), transparent 72%);
}
/* De inhoud moet boven die laag blijven staan. */
.v3-vlak > * { position: relative; z-index: 1; }

/* ── FAQ ──
   Staat hier en niet in v3-home.css omdat de homepagina het voorbeeld is voor
   de rest van de site: elke pagina met een vragenblok gebruikt deze opmaak.
   De accordeon zelf zit in v3-global.js. */
.v3-faq { padding: 96px 0; position: relative; z-index: 1; }
/* Op de homepagina moet het vlak expliciet transparant blijven, anders komt
   het oude #faq-vlak uit style.css er weer doorheen en klopt het ritme niet. */
#faq.v3-faq { background: transparent; padding: 110px 0; }
.v3-faq-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.v3-faq-title {
  font: 700 var(--v3-fs-sectie) / 1.12 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 18px 0 0;
}
.v3-faq-sub { font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 16px 0 0; }
.v3-faq-sub a { color: var(--v3-cyan); border-bottom: 1px solid rgba(34, 211, 238, .5); text-decoration: none; }

.v3-faq-list { display: grid; border-top: 1px solid rgba(255, 255, 255, .1); }
.v3-faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.v3-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: none; border: none; padding: 26px 0; cursor: pointer; text-align: left;
  color: var(--v3-text-1); font: 600 var(--v3-fs-kop) / 1.4 var(--v3-font);
}
.v3-faq-icon {
  color: var(--v3-cyan); font: 400 var(--v3-fs-kop-l) / 1 var(--v3-font); flex-shrink: 0;
  transition: transform .42s cubic-bezier(.16, .8, .3, 1);
}
.v3-faq-item.is-open .v3-faq-icon { transform: rotate(45deg); }

/* Uitklappen via grid-template-rows van 0fr naar 1fr. Dat is de enige manier
   om naar een onbekende hoogte te animeren zonder die met een max-height te
   moeten gokken; met display:none valt er niets te animeren en klapt het er
   in één beeld uit. De tussenlaag <div> is hiervoor nodig: die vangt de
   overflow op terwijl de rij naar nul krimpt. */
.v3-faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.16, .8, .3, 1);
}
.v3-faq-item.is-open .v3-faq-a { grid-template-rows: 1fr; }
.v3-faq-a > div {
  overflow: hidden; min-height: 0;
  /* Haalt het antwoord ook uit de schermlezer zolang het dicht staat.
     visibility schakelt discreet, dus de animatie wordt niet afgekapt. */
  visibility: hidden; transition: visibility .42s;
}
.v3-faq-item.is-open .v3-faq-a > div { visibility: visible; }
.v3-faq-a p {
  font: 400 var(--v3-fs-body) / 1.7 var(--v3-font); color: var(--v3-text-2);
  margin: 0; padding: 0 0 28px; max-width: 640px;
  opacity: 0; transform: translateY(-5px);
  transition: opacity .32s ease .08s, transform .32s ease .08s;
}
.v3-faq-item.is-open .v3-faq-a p { opacity: 1; transform: none; }
/* Zonder deze regel valt een link in een antwoord terug op het blauw van de
   browser zelf, en dat is op deze donkere achtergrond niet te lezen. */
.v3-faq-a a {
  color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(34, 211, 238, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.v3-faq-a a:hover { color: #7ce7f7; text-decoration-color: #7ce7f7; }

@media (prefers-reduced-motion: reduce) {
  .v3-faq-a, .v3-faq-a > div, .v3-faq-a p, .v3-faq-icon { transition: none; }
}

@media (max-width: 1000px) {
  .v3-faq-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .v3-faq { padding: 60px 0; }
  .v3-faq-q { font-size: var(--v3-fs-lead); padding: 20px 0; }
}

/* ── Gratis AI-scan ──
   Gedeeld blok: staat zowel in een sectie op de homepagina als bovenaan
   /ai-scan/. Het formulier zelf komt uit template-parts/scan-form.php en
   wordt opgemaakt door scan.css plus de v3-laag in v3-scan.css; hieronder
   staat alleen wat nodig is om die kaart in de tweekolomsopzet te passen. */
.v3-scan {
  padding: 110px 0;
  position: relative; z-index: 1; overflow: hidden;
}
.v3-scan-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 420px at 78% 20%, rgba(43, 127, 255, .16), transparent 70%);
}
.v3-scan-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 64px;
  align-items: center;
}
.v3-scan-title {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 18px 0 0;
  text-wrap: balance;
}
.v3-scan-sub {
  font: 400 var(--v3-fs-lead) / 1.65 var(--v3-font); color: var(--v3-text-2);
  margin: 20px 0 0; text-wrap: pretty;
}
.v3-scan-punten { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.v3-scan-punten li {
  position: relative; padding-left: 30px;
  font: 500 var(--v3-fs-body) / 1.5 var(--v3-font); color: #cfdcee;
}
/* Vinkje van twee randen: geen extra icoonbestand nodig. */
.v3-scan-punten li::before {
  content: ''; position: absolute; left: 2px; top: 5px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--v3-cyan); border-bottom: 2px solid var(--v3-cyan);
  transform: rotate(-45deg);
}
.v3-scan-door {
  margin: 30px 0 0; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-3);
}
.v3-scan-door a { color: var(--v3-light); text-decoration: underline; text-underline-offset: 3px; }

/* scan.css centreert de kaart op 760px met 48px lucht. In deze kolom is dat
   te ruim, dus hier compacter. */
.v3-scan-tool .scan-tool-card {
  max-width: none; margin: 0; padding: 32px; border-radius: 20px;
}
.v3-scan-tool .scan-tool-card::before { border-radius: 20px 20px 0 0; }

@media (max-width: 1100px) {
  .v3-scan { padding: 64px 0; }
  .v3-scan-inner { grid-template-columns: 1fr; gap: 34px; }
  .v3-scan-tool .scan-tool-card { padding: 24px 20px; }
}

/* ── Sectiekop ──
   De standaardkop boven een sectie, sitewide. Vervangt .display-title uit de
   oude huisstijl, inclusief het gradiëntaccent op een <em> daarbinnen.
   Gebruik deze en zet geen eigen kopstijl per pagina neer, anders lopen de
   maten weer uit elkaar zoals vóór de typografische schaal. */
.v3-sec-titel {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 0;
  text-wrap: balance;
}
.v3-sec-sub {
  font: 400 var(--v3-fs-lead) / 1.65 var(--v3-font); color: var(--v3-text-2);
  margin: 18px 0 0; text-wrap: pretty;
}
.v3-sec-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* Gecentreerde variant, voor afsluitende oproepblokken. */
.v3-sec-mid { text-align: center; }
.v3-sec-mid .v3-sec-sub { margin-left: auto; margin-right: auto; max-width: 560px; }
.v3-sec-mid .v3-sec-knoppen { justify-content: center; }

/* ── Vangnet voor links in lopende tekst ──
   Een link zonder eigen opmaak valt terug op het blauw van de browser, en dat
   is op deze donkere achtergrond niet te lezen. Dit vangt alleen kale links
   binnen tekstblokken af, dus knoppen en kaartlinks blijven ongemoeid.

   De hele selector staat in :where(), zodat hij geen specificiteit heeft:
   elke component die zijn links zelf kleurt wint hier hoe dan ook van. */
:where(:is(p, li, td, dd, blockquote, figcaption) a:not([class])) {
  color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(34, 211, 238, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
:where(:is(p, li, td, dd, blockquote, figcaption) a:not([class]):hover) {
  color: #7ce7f7; text-decoration-color: #7ce7f7;
}

/* ── Kruimelpad ──
   Staat op de case- en kennisbankpagina's. Was nergens opgemaakt, waardoor
   de links terugvielen op het standaard blauw en paars van de browser. */
.kb-breadcrumb {
  font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font);
  color: var(--v3-text-3); margin-bottom: 26px;
}
.kb-breadcrumb a { color: var(--v3-text-3); text-decoration: none; }
.kb-breadcrumb a:hover { color: var(--v3-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ── Paginakop ──
   Gedeeld: gebruikt op /cases/, /diensten/ en straks de kennisbank.
   Stond eerst in v3-cases.css, maar dan mist hij op elke andere pagina. */
.page-hero { padding: 84px 0 40px; position: relative; z-index: 1; }

/* Dezelfde gekleurde sfeer als de hero van de homepagina: een blauwe gloed
   rechtsboven en een cyaan gloed linksonder. Via ::before, zodat er op negen
   sjablonen geen extra element bij hoeft. Iets zachter dan op de homepagina,
   want daar vangt de gekantelde schermafbeelding een deel van het licht op en
   hier staat alleen tekst. Zelfde opzet als .v3-vlak hierboven. */
/* Hier stond een gekleurde gloed achter de paginakop, naar het voorbeeld van
   de homepagina. Die is er weer uit, en dat was een denkfout van mijn kant:
   het thema heeft al een sfeerlaag. .bg-canvas staat in header.php op elke
   pagina, met een raster en vier vervaagde gloedbollen, en die is
   position:fixed. Mijn laag scrolde mee. Twee lagen die langs elkaar bewegen
   sluiten nooit aan, en op een korte pagina als de kennisbank zag je precies
   waar de mijne ophield. */
.page-hero > * { position: relative; z-index: 1; }

.page-hero-inner { max-width: 760px; }

/* De paginakop stond op --v3-fs-sectie en was daarmee even groot als de
   tussenkoppen verderop op diezelfde pagina. Er was dus geen rangorde tussen
   de opening en de rest. Nu dezelfde maat als de homepagina: maximaal 72px in
   plaats van 50px. */
.page-hero-title {
  font: 700 var(--v3-fs-hero) / 1.06 var(--v3-font);
  letter-spacing: -.025em; color: var(--v3-text-1); margin: 0; text-wrap: balance;
}
/* Het gradiëntaccent uit de oude huisstijl is eruit; de kop staat nu vlak. */
.page-hero-title em { font-style: normal; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.page-hero-sub {
  font: 400 var(--v3-fs-kop) / 1.6 var(--v3-font); color: var(--v3-text-2);
  margin: 22px 0 0; max-width: 620px; text-wrap: pretty;
}

/* Rustige variant. Op de juridische pagina's en de 404 schreeuwt een kop van
   72px, want daar komt niemand voor het verhaal. Die houden de oude maat en
   krijgen ook de gekleurde gloed niet. */
.page-hero-sober::before { display: none; }
.page-hero-sober .page-hero-title {
  font-size: var(--v3-fs-sectie); letter-spacing: -.02em; line-height: 1.08;
}
.page-hero-sober .page-hero-sub { font-size: var(--v3-fs-lead); }
/* Gecentreerde variant, voor overzichtspagina's zonder tekst ernaast. */
.page-hero-mid { max-width: 680px; margin: 0 auto; text-align: center; }
.page-hero-mid .page-hero-sub { margin-left: auto; margin-right: auto; }

/* Onder de 404 komt niets meer, dus daar mag meer lucht onder de kop. */
.error-404-hero { padding-top: 120px; padding-bottom: 140px; }
@media (max-width: 768px) { .error-404-hero { padding-top: 70px; padding-bottom: 90px; } }

/* ── Schermafbeeldingen moeilijker mee te nemen ──
   Slepen naar het bureaublad en selecteren gaan hiermee niet meer. Het
   rechtsklikmenu wordt in v3-global.js geblokkeerd, en alleen op deze
   beelden: rechtsklikken uitzetten op de hele pagina is vervelend voor
   wie gewoon een link in een nieuw tabblad wil openen.

   Dit is een drempel en geen slot. Het bestandsadres staat gewoon in de
   broncode en een schermafdruk kan altijd. Het scheelt de gemakkelijke
   weg, en daar haakt het gros op af. */
img[src*="/images/app/"],
.v3-hero-shot-frame img,
.v3-platform-shot-inner img,
.v3-bento-img img,
.v3-modal-shot img,
.v3-zoomlaag img,
.gt-toon-beeld img,
.dienst-shot img,
.v3-about-portrait img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}