/* =====================================================================
   CAPTA WEBSITE — style.css   (donker thema)
   =====================================================================
   Deze CSS werkt samen met Tailwind (dat via de CDN in elke pagina wordt
   geladen) voor de opmaak. HIERONDER staat bovenaan één INSTELLINGEN-blok:
   verander daar een waarde en het geldt meteen op de HELE site.

   Snel iets aanpassen?
   • Kleuren / lettertype / afmetingen  -> blok "INSTELLINGEN" hieronder.
   • Aan/uit-knopjes (presets)          -> bovenaan script.js, het blok PRESETS.
   ===================================================================== */


/* =====================================================================
   INSTELLINGEN  —  pas hier alles centraal aan
   ===================================================================== */
:root {
  /* ---- KLEUREN (donker, gelaagd) --------------------------------- */
  --bg:            #0E1116;   /* diepste achtergrond van de pagina      */
  --surface:       #171B22;   /* kaarten / lichtjes lichter vlak         */
  --surface-2:     #202632;   /* nóg iets lichter (hover, invoervelden)  */
  --rand:          rgba(255,255,255,0.08); /* subtiele rand              */
  --rand-2:        rgba(255,255,255,0.18); /* iets sterkere rand         */

  --tekst:         #EDEFF2;   /* hoofdtekst (bijna wit)                  */
  --tekst-zacht:   #AEB6C2;   /* zachtere tekst                          */
  --tekst-mute:    #7A828F;   /* fijne bijschriften                      */

  --accent:            #FF6B71; /* accent (rood) voor labels/iconen op donker */
  --accent-solid:      #D71920; /* vlakke rode knop                       */
  --accent-solid-hover:#E4222B; /* rode knop bij hover                    */
  --accent-ink:        #7A0F14; /* diep rood                              */

  --overlay:       rgba(255,255,255,0.06); /* lichte hover-overlay        */

  /* ---- LETTERTYPE & GROOTTES ------------------------------------- */
  --font:          'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---- VORM ------------------------------------------------------ */
  --radius:        16px;      /* standaard afronding kaarten             */
  --radius-lg:     24px;      /* grote afronding                         */
  --radius-sm:     10px;      /* kleine afronding                        */

  /* ---- SCHADUW (standaard "zacht"; wissel via preset schaduw) ---- */
  --schaduw:       0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -22px rgba(0,0,0,0.65);

  /* ---- ANIMATIE (één ritme voor de HELE site) -------------------- */
  --anim-duur:     500ms;                        /* duur (preset snelheid wisselt dit) */
  --anim-easing:   cubic-bezier(.22,.61,.36,1);  /* zachte uit-beweging  */
  --reveal-shift:  20px;      /* hoever elementen omhoog komen bij scrollen */
  --stagger:       70ms;      /* vertraging tussen items in dezelfde rij  */

  /* ---- RITME / RUIMTE -------------------------------------------- */
  --sectie-y:      clamp(4rem, 8vw, 7rem); /* zelfde padding boven/onder elke sectie */

  /* ---- HOVER-GEDRAG (wordt door de preset "kaart-hover" gezet) --- */
  --hover-lift:    -6px;      /* omhoog zweven bij hover (0 = uit)        */
  --hover-scale:   1;         /* uitvergroten bij hover (1 = uit)         */
}

/* ---- PRESET-VARIANTEN (gestuurd door script.js -> PRESETS) --------
   Je hoeft hier NIETS te wijzigen: kies je preset in script.js.        */
html[data-snelheid="traag"] { --anim-duur: 800ms; }
html[data-snelheid="snel"]  { --anim-duur: 300ms; }

html[data-schaduw="sterk"]  { --schaduw: 0 30px 64px -24px rgba(0,0,0,0.9); }
html[data-schaduw="geen"]   { --schaduw: none; }

html[data-hover="vergroten"]{ --hover-lift: 0px; --hover-scale: 1.03; }
html[data-hover="oplichten"]{ --hover-lift: 0px; --hover-scale: 1; }
html[data-hover="geen"]     { --hover-lift: 0px; --hover-scale: 1; }

html[data-scroll="fade"]    { --reveal-shift: 0px; } /* enkel vervagen, niet schuiven */


/* =====================================================================
   BASIS
   ===================================================================== */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { background: var(--bg); color: var(--tekst); font-family: var(--font); }
::selection { background: rgba(215,25,32,0.30); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Eén consistente sectie-padding = rustig verticaal ritme */
.sectie { padding-top: var(--sectie-y); padding-bottom: var(--sectie-y); }

/* Standaard kaart: vlak in de "surface"-kleur met subtiele rand + schaduw */
.kaart { background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); }

/* Kaart-hover (zacht). Het gedrag (zweven/vergroten/oplichten/geen) staat
   in de preset "kaart-hover" in script.js. */
.kaart-hover { transition: transform var(--anim-duur) var(--anim-easing), border-color .3s ease, background-color .3s ease; }
.kaart-hover:hover { transform: translateY(var(--hover-lift)) scale(var(--hover-scale)); border-color: var(--rand-2); background: var(--surface-2); }

/* Kleine bovenkop-label boven titels */
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 600; }

/* Knoppen ------------------------------------------------------------ */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background-image: linear-gradient(135deg, var(--accent-solid-hover), var(--accent-solid)); color:#fff; border-radius: var(--radius-sm); font-weight:600; box-shadow: 0 12px 32px -12px rgba(215,25,32,.6); transition: transform .25s var(--anim-easing), filter .25s ease; }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background: var(--surface); border:1px solid var(--rand-2); color: var(--tekst); border-radius: var(--radius-sm); font-weight:600; transition: transform .25s var(--anim-easing), background-color .25s ease, border-color .25s ease; }
.btn-secondary:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--rand-2); }


/* =====================================================================
   ACCENT & SFEER
   ===================================================================== */
/* Rode verloop-tekst voor accent-woorden in titels */
.capta-gradient-text {
  background: linear-gradient(100deg, var(--accent-solid) 0%, #FF7A72 45%, #F0454E 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: capta-textshine 6s ease-in-out infinite;
}
@keyframes capta-textshine { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

.capta-glow { box-shadow: 0 16px 40px -12px rgba(215,25,32,0.55); }
.capta-pulse-glow { animation: capta-pulse 2s infinite; }
@keyframes capta-pulse { 0% { box-shadow: 0 0 0 0 rgba(215,25,32,0.5); } 70% { box-shadow: 0 0 0 8px rgba(215,25,32,0); } 100% { box-shadow: 0 0 0 0 rgba(215,25,32,0); } }

/* Zachte sfeer-achtergrond (vervangt het oude blokjes-raster).
   Drie brede, zachte kleurvelden — geen harde lijnen, geen geel. */
.capta-sfeer {
  background:
    radial-gradient(75% 55% at 50% -8%,  rgba(215,25,32,.13), transparent 62%),
    radial-gradient(55% 45% at 88%  6%,  rgba(139,79,192,.10), transparent 68%),
    radial-gradient(65% 50% at  6% 14%,  rgba(58,82,148,.10), transparent 70%);
}

/* --- Levendige achtergrond-lagen (hero) ---------------------------------
   1) aurora  : twee grote kleurvelden die traag over elkaar schuiven
   2) stralen : zachte lichtbundels die langzaam ronddraaien
   3) korrel  : héél fijne filmkorrel, haalt de "platte" look weg
   Alles is puur CSS, kost geen extra bestanden en beweegt rustig.        */
.capta-aurora {
  background:
    radial-gradient(38% 44% at 28% 22%, rgba(215,25,32,.20), transparent 68%),
    radial-gradient(34% 40% at 74% 30%, rgba(139,79,192,.16), transparent 70%),
    radial-gradient(46% 44% at 52% 82%, rgba(38,96,168,.16), transparent 70%);
  filter: blur(28px);
  animation: capta-aurora 26s ease-in-out infinite alternate;
}
@keyframes capta-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); opacity: .85; }
  50%  { transform: translate3d( 3%,  2%, 0) scale(1.12); opacity: 1; }
  100% { transform: translate3d(-1%,  3%, 0) scale(1.06); opacity: .9; }
}

.capta-stralen {
  background: conic-gradient(from 200deg at 50% 0%,
    transparent 0deg, rgba(255,255,255,.05) 18deg, transparent 40deg,
    transparent 300deg, rgba(215,25,32,.07) 330deg, transparent 360deg);
  animation: capta-draai 60s linear infinite;
  transform-origin: 50% 0%;
}
@keyframes capta-draai { to { transform: rotate(360deg); } }

.capta-korrel {
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fijne, zacht oplichtende sterretjes in de hero (subtiel, geen kerstboom) */
.capta-sterren {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 62%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 34%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 82%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 88%, rgba(255,255,255,.26), transparent 60%);
  animation: capta-fonkel 7s ease-in-out infinite alternate;
}
@keyframes capta-fonkel { from { opacity: .35; } to { opacity: .85; } }
/* Vignet: randen zachtjes donkerder, zodat de inhoud in het midden naar voren komt */
.capta-vignet { background: radial-gradient(115% 85% at 50% 42%, transparent 42%, rgba(0,0,0,.42) 100%); }
/* Onderrand van de hero zacht laten overlopen in de paginakleur.
   Bewust NIET helemaal dekkend: zo loopt de levende achtergrond gewoon door. */
.capta-uitvloei { background: linear-gradient(180deg, transparent 64%, rgba(14,17,22,.60) 100%); }

/* Glas-effect */
.capta-glass { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }

/* Zwevende gloed-vlekken (rustig, alleen transform/opacity = GPU-vriendelijk) */
@keyframes capta-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes capta-drift  { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(24px,-18px) scale(1.06); } 66% { transform: translate(-18px,14px) scale(0.97); } }
@keyframes capta-breathe{ 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:.85; transform: scale(1.1); } }
.anim-float      { animation: capta-float 9s ease-in-out infinite; }
.anim-float-slow { animation: capta-float 13s ease-in-out infinite; }
.anim-drift      { animation: capta-drift 22s ease-in-out infinite; }
.anim-drift-slow { animation: capta-drift 30s ease-in-out infinite; }
.anim-breathe    { animation: capta-breathe 10s ease-in-out infinite; }


/* =====================================================================
   SFEER-ACHTERGROND  (ligt achter de HELE pagina)
   ---------------------------------------------------------------------
   Drie grote, hele zachte kleurvelden die traag over elkaar drijven.
   Belangrijk: elk veld vloeit VOLLEDIG uit naar transparant (de laatste
   kleurstop staat op 0). Daardoor zie je nergens een rand of lijn — het
   is één doorlopend, ademend geheel. De velden mengen op "screen" (als
   licht, niet als verf), dus het blijft diep in plaats van vlekkerig.
   Er ligt filmkorrel + een vignet overheen; dat haalt de laatste
   "banding" uit de verlopen en maakt het rustig en duur ogend.

   Zelf bijsturen (alles hieronder in dit blok):
     • minder / meer kleur -> eerste getal na rgba(...), bv. .34 -> .22
     • trager              -> verhoog de seconden in de animation-regels
     • korreliger          -> .capta-bg-korrel { opacity: ... }
     • helemaal uit        -> PRESETS.achtergrond: "geen"  (in script.js)
   Hoe sterk hij is bovenaan vs. na het scrollen: KRACHT_LAAG in script.js.
   ===================================================================== */
.capta-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  isolation: isolate;   /* houdt het "screen"-mengen binnen deze laag */
  background: radial-gradient(140% 120% at 50% -20%, #141A25 0%, #0E1116 55%, #090B10 100%);
  opacity: var(--bg-kracht, 1);   /* vol bovenaan, rustiger bij het scrollen */
}
/* De inhoud staat altijd bovenop de achtergrond (de navbar regelt Tailwind). */
body > main, body > footer { position: relative; z-index: 1; }

.capta-bg-laag { position: absolute; inset: 0; will-change: transform; }
/* LET OP (prestaties): géén filter:blur() op deze bollen! Ze zijn al zachte
   radiale verlopen; een blur van 50px op zulke enorme vlakken dwong de GPU
   elk frame tot zwaar rekenwerk en maakte de hele site schokkerig. */
.capta-bg-orb  { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }

/* De kleurvelden bewegen bewust NIET rond als bolletjes. Ze blijven zo goed
   als op hun plek en ademen: ze zwellen zacht op en vervagen, elk op hun
   eigen tempo. Daardoor leeft de kleur — als een lavalamp of noorderlicht —
   zonder dat je iets "ziet rondvliegen". Rustiger of sneller? Verander enkel
   de seconden in de "animation"-regels (groter getal = trager). */

/* 1 — groot rood veld linksboven (het merkkleur-anker) */
.capta-bg-orb.o1 {
  width: 105vmax; height: 105vmax; left: -34vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(215,25,32,.34) 0%, rgba(215,25,32,.11) 45%, rgba(215,25,32,0) 100%);
  animation: bg-adem-1 19s ease-in-out infinite;
}
/* 2 — diep blauw rechtsonder: koelte, geeft contrast met het rood */
.capta-bg-orb.o2 {
  width: 96vmax; height: 96vmax; right: -30vmax; bottom: -34vmax;
  background: radial-gradient(closest-side, rgba(46,68,150,.30) 0%, rgba(46,68,150,.09) 46%, rgba(46,68,150,0) 100%);
  animation: bg-adem-2 24s ease-in-out infinite;
}
/* 3 — warm koraal-hart in het midden */
.capta-bg-orb.o3 {
  width: 72vmax; height: 72vmax; left: 24vmax; top: 12vmax;
  background: radial-gradient(closest-side, rgba(255,110,96,.20) 0%, rgba(255,110,96,.05) 48%, rgba(255,110,96,0) 100%);
  animation: bg-adem-3 16s ease-in-out infinite;
}

/* Ademen = zacht opzwellen + oplichten/dimmen, met een heel klein wiegje.
   Zo blijft het rustig maar duidelijk levend. */
@keyframes bg-adem-1 {
  0%,100% { transform: translate3d(0,0,0) scale(1);    opacity: .8; }
  50%     { transform: translate3d(4vw, 3vh, 0) scale(1.22); opacity: 1; }
}
@keyframes bg-adem-2 {
  0%,100% { transform: translate3d(0,0,0) scale(1.16); opacity: 1; }
  50%     { transform: translate3d(-3vw, -3vh, 0) scale(1);  opacity: .7; }
}
@keyframes bg-adem-3 {
  0%,100% { transform: translate3d(0,0,0) scale(.9);   opacity: .65; }
  50%     { transform: translate3d(-4vw, 4vh, 0) scale(1.28); opacity: 1; }
}

/* Figuur op de achtergrond: het Capta-merkteken, heel groot en heel zacht,
   als een watermerk rechts in beeld. Het draait bijna onmerkbaar en ademt
   licht mee, zodat het leeft zonder op te vallen. Wil je het weg? Verwijder
   het regeltje <div class="capta-bg-figuur"></div> uit de pagina's, of zet
   hieronder opacity op 0. Andere plek? Pas 'right' / 'top' aan. */
/* Het Capta-merkteken als vast design-accent, groot en heel zacht, half
   uit beeld rechts. Het blijft op zijn plek (geen rondvliegen) en zweeft
   enkel heel licht op-en-neer met een zacht adempje — als een logo dat
   rustig hangt te glanzen. Grootte = width/height, tempo = de seconden in
   "animation", zichtbaarheid = opacity. Weg? Zet opacity op 0. */
.capta-bg-figuur {
  position: absolute; top: 50%; right: -7vmax; width: 26vmax; height: 26vmax;
  transform-origin: center;
  background: url("capta-mark.png") center / contain no-repeat;
  opacity: .10;
  pointer-events: none;
  animation: bg-figuur 20s ease-in-out infinite;
}
@keyframes bg-figuur {
  0%,100% { transform: translateY(-50%) rotate(0deg)   scale(1); }
  50%     { transform: translateY(-54%) rotate(2.5deg) scale(1.04); }
}

/* Filmkorrel: haalt de "banding" uit de verlopen en maakt het rustig ogend */
.capta-bg-korrel {
  position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vignet: randen zachtjes donkerder zodat de inhoud naar voren springt */
.capta-bg-vignet {
  position: absolute; inset: 0;
  background: radial-gradient(135% 105% at 50% 32%, transparent 46%, rgba(0,0,0,.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html[data-beweging="systeem"] .capta-bg-orb,
  html[data-beweging="systeem"] .capta-bg-figuur { animation: none !important; }
}


/* =====================================================================
   NAVBAR — doorzichtig boven de hero, donker vlak zodra je scrollt
   ===================================================================== */
#navbar { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; background: transparent; border-bottom: 1px solid transparent; }
#navbar.is-solid { background: rgba(14,17,22,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--rand); box-shadow: 0 1px 0 rgba(0,0,0,0.4); }


/* =====================================================================
   LAADSCHERM (splash)
   ===================================================================== */
#splash { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .4s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
#splash .splash-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#splash img { width: 132px; height: auto; object-fit: contain; animation: capta-splash-pulse 1.6s ease-in-out infinite; }
#splash .splash-spin { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid rgba(215,25,32,.18); border-top-color: var(--accent-solid); animation: capta-splash-spin .8s linear infinite; }
@keyframes capta-splash-spin { to { transform: rotate(360deg); } }
@keyframes capta-splash-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.85; transform:scale(.97); } }


/* =====================================================================
   ANIMATIES BIJ SCROLLEN  (rustig, één ritme voor alles)
   Zet class "reveal" op een element; het komt zacht in beeld zodra het
   in zicht scrollt. Uitsluitend opacity + kleine translateY.
   ===================================================================== */
.reveal, .reveal-l, .reveal-r, .reveal-pop {
  opacity: 0; transform: translateY(var(--reveal-shift));
  transition: opacity var(--anim-duur) var(--anim-easing), transform var(--anim-duur) var(--anim-easing);
  transition-delay: var(--d, 0s); will-change: opacity, transform;
}
.reveal.in, .reveal-l.in, .reveal-r.in, .reveal-pop.in { opacity: 1; transform: none; }
/* Na het verschijnen de GPU-laag weer vrijgeven: tientallen elementen die
   permanent "will-change" vasthouden maken het scrollen merkbaar zwaarder. */
.reveal.klaar, .reveal-l.klaar, .reveal-r.klaar, .reveal-pop.klaar { will-change: auto; transition: none; }

/* Hero-scroll-effect: de gloed-lagen en inhoud worden door JS verschoven.
   Hier enkel de rendering soepel maken. */
[data-hero-blob], [data-hero-content] { will-change: transform; }

/* Levendige, zacht ademende radiale gloed achter de hero.
   Alleen rood / paars / diepblauw — bewust GEEN geel of oranje. */
.capta-hero-aura {
  background:
    radial-gradient(38% 48% at 22% 30%, rgba(215,25,32,.15), transparent 70%),
    radial-gradient(44% 54% at 80% 24%, rgba(139,79,192,.11), transparent 70%),
    radial-gradient(52% 60% at 55% 86%, rgba(58,82,148,.13), transparent 70%);
  animation: capta-breathe 12s ease-in-out infinite;
}

/* Glans-veeg over de primaire knoppen bij hover (zoals referentie) */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
  html[data-beweging="systeem"] .anim-float,      html[data-beweging="systeem"] .anim-float-slow,
  html[data-beweging="systeem"] .anim-drift,      html[data-beweging="systeem"] .anim-drift-slow,
  html[data-beweging="systeem"] .anim-breathe,    html[data-beweging="systeem"] .capta-hero-aura,
  html[data-beweging="systeem"] .capta-gradient-text, html[data-beweging="systeem"] .capta-pulse-glow,
  html[data-beweging="systeem"] .capta-aurora,    html[data-beweging="systeem"] .capta-stralen,
  html[data-beweging="systeem"] .capta-sterren { animation: none !important; }
}

/* Hero-tekst: standaard ZICHTBAAR (kan nooit verdwijnen). De intro speelt
   pas als het laadscherm wegvalt (body.loaded). */
.hero-in { opacity: 1; }
body.loaded .hero-in { animation: capta-hero-in .7s var(--anim-easing) both; animation-delay: var(--d, 0s); }
@keyframes capta-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* De slogan focust filmisch scherp in; het woord "yes" pop't met gloed. */
.hero-headline { opacity: 1; }
body.loaded .hero-headline { animation: capta-headline-in 1.15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes capta-headline-in { 0% { opacity:0; transform: translateY(26px) scale(.94); filter: blur(16px); } 55% { opacity:1; filter: blur(0); } 100% { opacity:1; transform: none; filter: blur(0); } }
.hero-yes { display:inline-block; }
body.loaded .hero-yes { animation: capta-yes-reveal 1s ease .8s both; }
@keyframes capta-yes-reveal { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(215,25,32,0)); } 45% { transform: scale(1.18); filter: drop-shadow(0 10px 30px rgba(215,25,32,.55)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(215,25,32,0)); } }


/* =====================================================================
   PIJNPUNT-KAARTEN — wisselen van probleem naar oplossing bij hover/tik
   Probleem en oplossing liggen gestapeld in één grid-cel: zo bepaalt de
   LANGSTE van de twee de hoogte van het kaartje en wordt er nooit tekst
   afgeknipt.
   ===================================================================== */
.pain-stapel { display: grid; }
.pain-stapel > * { grid-area: 1 / 1; }
.pain-card .pain-solution { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.pain-card .pain-problem  { opacity: 1; transform: translateY(0);  transition: opacity .3s ease, transform .3s ease; }
.pain-card:hover .pain-solution, .pain-card.flip .pain-solution { opacity: 1; transform: translateY(0); }
.pain-card:hover .pain-problem,  .pain-card.flip .pain-problem  { opacity: 0; transform: translateY(-8px); }


/* =====================================================================
   AI-RECEPTIONIST — de gesimuleerde oproep in de iPhone (homepage)
   ---------------------------------------------------------------------
   De telefoon doorloopt drie fases; JS zet enkel  data-fase  op #ai-phone:
     "inkomend"  de oproep komt binnen (rinkelt)
     "gesprek"   de AI is in gesprek (transcript + geluidsbalkjes)
     "klaar"     het gesprek is afgerond (samenvatting voor je team)
   De tekst van het gesprek staat in script.js onder AI_GESPREK.
   ===================================================================== */
@keyframes capta-bounce { 0%,100% { transform: translateY(0); opacity:.6 } 50% { transform: translateY(-4px); opacity:1 } }
.typing-dot { animation: capta-bounce 1s infinite; }

/* QR-kaartje "bel zelf eens met de AI-receptionist".
   De code staat bewust op een wit tegeltje: zo blijft hij goed scanbaar. */
.qr-kaart { position: relative; overflow: hidden; }
.qr-kaart::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 0% 0%, rgba(215,25,32,.12), transparent 70%);
}
.qr-tegel { position: relative; background: #fff; border-radius: 14px; padding: 9px; width: 128px; height: 128px;
            box-shadow: 0 10px 26px -10px rgba(0,0,0,.6); }
.qr-tegel img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Toestel + scherm */
.ai-telefoon { position: relative; width: 320px; max-width: 100%; aspect-ratio: 320/690; border-radius: 52px; padding: 12px;
  background: linear-gradient(150deg,#3a3a40 0%,#171719 55%,#29292d 100%);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); }
.ai-scherm { position: relative; height: 100%; border-radius: 42px; overflow: hidden;
  background: linear-gradient(180deg,#22140F 0%,#12100F 45%,#0A0908 100%); }
.ai-eiland { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; border-radius: 16px; background: #000; z-index: 6; }
.ai-statusbalk { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px 0; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.9); }
.ai-statusbalk .ai-status-r { display: inline-flex; align-items: center; gap: 5px; }
.ai-balkjes { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.ai-balkjes i { display: block; width: 2.5px; border-radius: 1px; background: rgba(255,255,255,.9); }
.ai-batterij { width: 20px; height: 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 3px; position: relative; }
.ai-batterij::after { content: ""; position: absolute; inset: 1.5px; right: 5px; background: rgba(255,255,255,.9); border-radius: 1px; }

/* De drie fases wisselen zacht. Elke fase heeft dezelfde schermachtergrond,
   en de nieuwe fase begint pas te verschijnen als de vorige weg is —
   zo zie je nooit twee schermen door elkaar. */
.ai-fase { position: absolute; inset: 0; padding-top: 52px; display: flex; flex-direction: column;
  background: linear-gradient(180deg,#22140F 0%,#12100F 45%,#0A0908 100%);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .34s ease, transform .34s var(--anim-easing), visibility .34s; }
#ai-phone[data-fase="inkomend"] .ai-fase-inkomend,
#ai-phone[data-fase="gesprek"]  .ai-fase-gesprek,
#ai-phone[data-fase="klaar"]    .ai-fase-klaar {
  opacity: 1; visibility: visible; transform: none; transition-delay: .3s; }

/* Fase 1 — inkomende oproep */
.ai-bel-avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#D71920,#7A0F14); color: #fff; }
.ai-bel-avatar::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(215,25,32,.55); animation: ai-rinkel 1.6s ease-out infinite; }
@keyframes ai-rinkel { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
.ai-knop { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.ai-knop.groen { background: #16A34A; animation: ai-wiebel 1.6s ease-in-out infinite; }
.ai-knop.rood  { background: rgba(255,255,255,.14); }
@keyframes ai-wiebel { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Fase 2 — het gesprek */
.ai-kop-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#D71920,#8f0f14); box-shadow: 0 0 0 5px rgba(215,25,32,.12); color: #fff; }
#ai-transcript { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 4px 14px 6px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
#ai-transcript::-webkit-scrollbar { display: none; }
.ai-bubbel { max-width: 84%; padding: 8px 13px; border-radius: 17px; font-size: 12.5px; line-height: 1.4; color: #fff;
  animation: ai-bubbel-in .38s var(--anim-easing) both; }
.ai-bubbel.van-ai     { align-self: flex-start; background: rgba(255,255,255,.11); border-bottom-left-radius: 5px; }
.ai-bubbel.van-beller { align-self: flex-end;   background: #D71920; border-bottom-right-radius: 5px; }
@keyframes ai-bubbel-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* Geluidsbalkjes: bewegen alleen wanneer er iemand spreekt */
.ai-golf { display: flex; align-items: center; justify-content: center; gap: 3px; height: 26px; }
.ai-golf span { width: 3px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.30); transition: background-color .3s ease; }
#ai-phone[data-spreekt="ai"] .ai-golf span,
#ai-phone[data-spreekt="beller"] .ai-golf span { animation: ai-golf .9s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
#ai-phone[data-spreekt="ai"] .ai-golf span { background: #FF6B71; }
#ai-phone[data-spreekt="beller"] .ai-golf span { background: rgba(255,255,255,.75); }
@keyframes ai-golf { 0%,100% { height: 4px; } 50% { height: 22px; } }
.ai-spreker { font-size: 10.5px; color: rgba(255,255,255,.55); text-align: center; min-height: 13px; }

/* Fase 3 — samenvatting voor je team */
.ai-klaar-kaart { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 14px; }
.ai-klaar-regel { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.85);
  animation: ai-bubbel-in .4s var(--anim-easing) both; animation-delay: calc(.25s + var(--i) * .12s); }
.ai-klaar-regel b { color: #fff; font-weight: 600; }
.ai-vink { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(22,163,74,.16); color: #4ADE80; border: 1px solid rgba(74,222,128,.35); animation: ai-vink-in .5s var(--anim-easing) both; }
@keyframes ai-vink-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }


/* =====================================================================
   LOGO-STRIP (merken)  —  rustige logo-muur met hairline-raster
   ---------------------------------------------------------------------
   Elk merk krijgt een even groot vak, zodat brede logo's (Sophos) niet
   alles overheersen. De optische hoogte per logo stel je in de HTML in
   met  style="--h:26px"  — zo blijven ze onderling even zwaar ogen.
   Grijs tot je erover hovert (preset "logos" in script.js).
   ===================================================================== */
/* De band schuift traag door en pauzeert zodra je er met de muis op staat.
   De logo's staan twee keer in de HTML; daardoor loopt de lus naadloos. */
.logo-marquee {
  position: relative; overflow: hidden; padding: .5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track { display: flex; align-items: center; gap: 5.5rem; width: max-content; animation: logo-schuif 42s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logo-schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logo-item {
  flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--tekst); height: 40px;
  opacity: .6; filter: grayscale(1) brightness(1.4);
  transition: opacity .3s ease, filter .3s ease, transform .3s var(--anim-easing);
}
.logo-item:hover { opacity: 1; filter: none; transform: translateY(-3px); }
.logo-item svg, .logo-item img { height: var(--h, 28px); width: auto; max-width: none; object-fit: contain; }
/* Preset: logo's altijd in kleur */
html[data-logos="kleur"] .logo-item { opacity: 1; filter: none; }

/* Let op: deze band blijft bewust ook lopen bij de Windows-instelling
   "verminderde beweging" — net zoals de andere hover- en verschijn-effecten
   op deze site. Wil je hem toch stilzetten? Zet de animation-regel hierboven
   op  animation: none;  */


/* =====================================================================
   GOOGLE-REVIEWS  —  scorekaart + reviewmuur
   De reviews zelf staan in script.js (blok REVIEWS). De kaarten staan in
   kolommen (CSS columns): elke kaart is precies zo hoog als zijn tekst,
   dus korte reviews geven geen half lege vlakken meer.
   ===================================================================== */
.sterren { display: inline-flex; gap: 2px; letter-spacing: 1px; }
.ster { color: rgba(255,255,255,.16); line-height: 1; }
.ster.vol { color: #FBBC04; }               /* Google-geel, enkel voor sterren */

/* --- Scorekaart links (4,9 van 5) --- */
.review-score {
  position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--surface);
  border: 1px solid var(--rand); box-shadow: var(--schaduw);
}
.review-score::before {                     /* zachte rode gloed rechtsboven */
  content: ""; position: absolute; top: -45%; right: -30%; width: 75%; height: 85%;
  background: radial-gradient(circle, rgba(215,25,32,.30), transparent 70%);
  filter: blur(28px); pointer-events: none;
}
.review-score > * { position: relative; }
.review-score-merk {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--tekst-zacht);
}
.review-score-g { display: inline-flex; }
.review-score-g .g-logo { width: 16px; height: 16px; display: block; }
.review-balk { margin-top: 18px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.review-balk span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-solid), #FF7A72); }

/* --- De muur met reviewkaarten --- */
.review-muur { columns: 1; column-gap: 18px; }
@media (min-width: 700px)  { .review-muur { columns: 2; } }
@media (min-width: 1400px) { .review-muur { columns: 3; } }

.review-kaart {
  position: relative; overflow: hidden; width: 100%; margin: 0 0 18px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  padding: 22px 22px 20px; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), var(--surface);
  border: 1px solid var(--rand);
  transition: transform .3s var(--anim-easing), border-color .3s ease, box-shadow .3s ease;
}
/* Fijn rood streepje links dat bij hover oplicht */
.review-kaart::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, var(--accent-solid), #FF7A72);
  opacity: 0; transition: opacity .3s ease;
}
.review-kaart:hover { transform: translateY(-3px); border-color: var(--rand-2); box-shadow: 0 24px 46px -28px rgba(0,0,0,.85); }
.review-kaart:hover::before { opacity: .95; }

/* Kaart zonder tekst (enkel sterren): compacter en iets rustiger */
.review-kaart-kort { padding: 18px 20px; background: var(--surface); }

.review-kop { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.55);
}
.review-wie { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.review-naam { font-weight: 600; font-size: .95rem; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-datum { font-size: .75rem; color: var(--tekst-mute); }
.review-g { flex: none; }
.review-g .g-logo { width: 17px; height: 17px; display: block; opacity: .9; }

.review-sterren { margin-top: 14px; font-size: 1rem; }
.review-kaart-kort .review-sterren { margin-top: 10px; }
.review-tekst { margin-top: 10px; font-size: .95rem; line-height: 1.65; color: var(--tekst-zacht); }


/* =====================================================================
   UniFi — TOESTELKAARTEN op de homepage
   Rustige, statische kaarten (het oude klikbare schema is verwijderd).
   ===================================================================== */
.unifi-kaart { position: relative; overflow: hidden; }
.unifi-kaart::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 70% at 50% 0%, rgba(215,25,32,.12), transparent 70%);
  transition: opacity .35s ease;
}
.unifi-kaart:hover::before { opacity: 1; }
.unifi-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(215,25,32,.14); color: var(--accent); }

/* Echte foto van het UniFi access point, met een zachte gloed eronder. */
.unifi-ap-beeld { position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem 2rem 2.5rem; min-height: 220px; }
.unifi-ap-beeld::before {
  content: ""; position: absolute; width: 68%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,.22), transparent 65%); filter: blur(20px);
}
.unifi-ap-beeld img {
  position: relative; max-width: 100%; max-height: 320px; width: auto; height: auto;
  object-fit: contain; filter: drop-shadow(0 26px 40px rgba(0,0,0,.55));
}


/* =====================================================================
   DETAILPAGINA — interactieve Ricoh-printer met hotspots
   ===================================================================== */
.pr-body   { fill: var(--surface-2); stroke: var(--rand-2); stroke-width: 1.5; }
.pr-lid    { fill: var(--surface); stroke: var(--rand-2); stroke-width: 1.5; }
.pr-slot   { fill: var(--bg); }
.pr-screen { fill: #0c0a09; stroke: var(--accent); stroke-opacity: .5; stroke-width: 1.5; }
.pr-badge  { fill: var(--surface); stroke: var(--accent); stroke-opacity: .4; stroke-width: 1.5; }
.pr-line   { stroke: var(--rand-2); stroke-width: 1.5; }

.hotspot { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: transform .2s var(--anim-easing); }
.hotspot:hover, .hotspot:focus-visible, .hotspot.actief { transform: scale(1.25); }
.hs-dot  { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.hs-ring { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: hs-pulse 2.2s ease-out infinite; }
@keyframes hs-pulse { 0% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }


/* =====================================================================
   ACCESS-POINT-HERO  (bovenaan de pagina Hardware & netwerk)
   ---------------------------------------------------------------------
   Opgebouwd zoals de wifi-pagina van UniFi: één groot donker beeldvlak met
   een titel en pillen bovenaan. Elke pil is een "hoofdstuk" met een eigen
   animatie. Ze wisselen vanzelf door; klik je op een pil, dan spring je er
   meteen naartoe. De teksten staan in script.js bij AP_HOOFDSTUKKEN.
     hoofdstuk 1  close-up van het access point (het merkbeeld)
     hoofdstuk 2  dekking: golven + toestellen die eraan hangen
     hoofdstuk 3  roaming: doorlopen van lokaal naar lokaal
     hoofdstuk 4  centraal beheer: live meterkast-scherm
   ===================================================================== */
.ui-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--rand); box-shadow: var(--schaduw);
  height: clamp(440px, 47vw, 660px);
  background: radial-gradient(130% 115% at 50% -12%, #172034 0%, #0D111A 58%, #080A0F 100%);
}
/* Elk hoofdstuk heeft dezelfde donkere ondergrond en verschijnt pas als het
   vorige weg is — zo zie je nooit twee beelden door elkaar heen. */
.ui-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(130% 115% at 50% -12%, #172034 0%, #0D111A 58%, #080A0F 100%); }
.ui-scene.actief { opacity: 1; transition-delay: .45s; }
.ui-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* titel + pillen bovenaan (zweven over het beeld) */
.ui-hero-kop { position: absolute; inset: 0 0 auto 0; z-index: 3; text-align: center;
  padding: clamp(20px, 3vw, 36px) 16px 0; pointer-events: none; }
.ui-hero-titel { font-size: clamp(1.45rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,.65); transition: opacity .4s ease; }
.ui-pills { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; pointer-events: auto; }
.ui-pill { position: relative; font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.70); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: .42rem .85rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
.ui-pill:hover { color: #fff; background: rgba(255,255,255,.14); }
.ui-pill.actief { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
/* streepje boven de actieve pil dat meeloopt als voortgangsbalkje */
.ui-pill.actief::after { content: ""; position: absolute; left: 16px; right: 16px; top: -8px; height: 2px; border-radius: 2px;
  background: var(--accent-solid); transform-origin: left center; animation: ui-voortgang var(--duur, 9s) linear forwards; }
@keyframes ui-voortgang { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* onderschrift, wisselt mee met het hoofdstuk */
.ui-hero-onder { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 0 24px clamp(16px, 2.4vw, 26px); text-align: center; }
.ui-hero-onder p { font-size: .84rem; color: rgba(255,255,255,.62); max-width: 620px; margin: 0 auto; line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0,0,0,.7); transition: opacity .4s ease; }

/* ---------- hoofdstuk 1: het zwevende access point (getekend) ---------- */
.s1-zweef  { animation: s1-zweef 7s ease-in-out infinite alternate; }
@keyframes s1-zweef { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
.s1-stof   { fill: rgba(255,255,255,.5); animation: capta-fonkel 6s ease-in-out infinite alternate; }

/* ---------- hoofdstuk 3: roaming door het gebouw ----------
   Het toestel loopt heen en weer door drie ruimtes. Welk access point het
   gesprek overneemt, regelen de drie tijdlijnen r1/r2/r3 hieronder: ze
   duren allemaal 24 s, precies even lang als de wandeling.               */
.s3-muur   { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2; }
.s3-vloer  { fill: rgba(255,255,255,.022); }
.s3-cel, .s3-ap-led { animation-duration: 24s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.s3-cel    { fill: url(#s3-cel-grad); opacity: .1; }
.s3-ap     { fill: #EDF0F5; }
.s3-ap-ring{ fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.s3-ap-led { fill: #FF6B71; opacity: .25; }
.s3-cel.r1, .s3-ap-led.r1 { animation-name: s3-r1; }
.s3-cel.r2, .s3-ap-led.r2 { animation-name: s3-r2; }
.s3-cel.r3, .s3-ap-led.r3 { animation-name: s3-r3; }
@keyframes s3-r1 { 0%,13% { opacity: 1; } 20%,80% { opacity: .1; } 87%,100% { opacity: 1; } }
@keyframes s3-r2 { 0%,13% { opacity: .1; } 20%,32% { opacity: 1; } 39%,61% { opacity: .1; } 68%,80% { opacity: 1; } 87%,100% { opacity: .1; } }
@keyframes s3-r3 { 0%,32% { opacity: .1; } 39%,61% { opacity: 1; } 68%,100% { opacity: .1; } }
.s3-pad    { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.5; stroke-dasharray: 3 8; }
.s3-toestel{ fill: rgba(12,15,20,.9); stroke: rgba(255,107,113,.6); stroke-width: 1.5; }
.s3-label  { fill: var(--tekst-zacht); font-family: var(--font); font-size: 12px; text-anchor: middle; }
.s3-ruimte { fill: rgba(255,255,255,.30); font-family: var(--font); font-size: 12.5px; letter-spacing: .12em; text-anchor: middle; }

/* ---------- hoofdstuk 4: centraal beheer ---------- */
.s4-paneel { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.12); stroke-width: 1.5; }
.s4-kop    { fill: rgba(255,255,255,.06); }
.s4-tekst  { fill: var(--tekst); font-family: var(--font); font-size: 13px; }
.s4-mute   { fill: var(--tekst-mute); font-family: var(--font); font-size: 11.5px; }
.s4-groot  { fill: #fff; font-family: var(--font); font-size: 26px; font-weight: 700; }
/* De hoogte van elke staaf staat in de SVG; hier laten we ze enkel zachtjes
   "ademen" zodat de grafiek live aanvoelt. */
.s4-staaf  { fill: url(#s4-staaf-grad); transform-box: fill-box; transform-origin: bottom;
             animation: s4-staaf 2.8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * .14s); }
@keyframes s4-staaf { from { transform: scaleY(.72); } to { transform: scaleY(1); } }
.s4-lijn   { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; }
.s4-stip   { fill: #34D399; animation: ap-stip 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }

/* --- de uitstralende wifi-golven (hoofdstuk 2) --- */
.ap-golf {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: ap-golf 5.6s cubic-bezier(.22,.6,.3,1) infinite;
  animation-delay: calc(var(--i, 0) * 1.4s);
}
@keyframes ap-golf {
  0%   { transform: scale(.30); opacity: 0; }
  9%   { opacity: .6; }
  60%  { opacity: .3; }
  100% { transform: scale(3.4); opacity: 0; }
}
/* de rode "hoofdgolf" — iets zwaarder, geeft het merkgevoel */
.ap-golf.rood { stroke: rgba(255,107,113,.75); stroke-width: 2.2; }
.ap-vloer { fill: url(#ap-vloer-grad); animation: capta-breathe 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* --- het access point zelf --- */
.ap-halo    { fill: rgba(215,25,32,.16); filter: blur(2px); }
.ap-zij     { fill: #A8AEB9; }
.ap-body    { fill: url(#ap-body-grad); }
.ap-ring    { fill: none; stroke: rgba(0,0,0,.16); stroke-width: 2; }
.ap-glans   { fill: url(#ap-glans-grad); }
.ap-led     { fill: #FF6B71; animation: ap-led 3.4s ease-in-out infinite; }
.ap-led-kern{ fill: #FFF1F1; }
@keyframes ap-led { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ap-schaduw { fill: rgba(0,0,0,.45); filter: blur(6px); }

/* --- verbindingen + datapakketjes --- */
.ap-link   { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-dasharray: 3 8; stroke-linecap: round;
             animation: ap-stroom 2.2s linear infinite; }
@keyframes ap-stroom { to { stroke-dashoffset: -22; } }
.ap-pakket { fill: #FF6B71; filter: drop-shadow(0 0 5px rgba(215,25,32,.9)); }

/* --- de toestelkaartjes rondom --- */
.ap-client  { cursor: default; }
.ap-chip    { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.14); stroke-width: 1.5;
              transition: fill .3s ease, stroke .3s ease; }
.ap-client:hover .ap-chip { fill: rgba(255,255,255,.08); stroke: rgba(255,107,113,.55); }
.ap-glyph   { fill: none; stroke: #D6DBE4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-naam    { fill: var(--tekst); font-family: var(--font); font-size: 15px; font-weight: 600; }
.ap-onder   { fill: var(--tekst-mute); font-family: var(--font); font-size: 12.5px; }
.ap-stip    { fill: #34D399; animation: ap-stip 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes ap-stip { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* --- het rondlopende (roamende) toestel --- */
.ap-roam-kaart { fill: rgba(12,15,20,.85); stroke: rgba(255,107,113,.45); stroke-width: 1.5; }
.ap-roam-tekst { fill: var(--tekst-zacht); font-family: var(--font); font-size: 11.5px; text-anchor: middle; }

/* --- opschriften bij het toestel --- */
.ap-titel { fill: var(--tekst); font-family: var(--font); font-size: 19px; font-weight: 700; text-anchor: middle;
            stroke: #0C0F14; stroke-width: 6; paint-order: stroke fill; }
.ap-onder-titel { fill: var(--tekst-zacht); font-family: var(--font); font-size: 13.5px; text-anchor: middle;
            stroke: #0C0F14; stroke-width: 5; paint-order: stroke fill; }

@media (prefers-reduced-motion: reduce) {
  html[data-beweging="systeem"] .ap-golf,  html[data-beweging="systeem"] .ap-link,
  html[data-beweging="systeem"] .ap-led,   html[data-beweging="systeem"] .ap-stip,
  html[data-beweging="systeem"] .ap-vloer, html[data-beweging="systeem"] .s1-zweef,
  html[data-beweging="systeem"] .s1-stof,  html[data-beweging="systeem"] .s3-cel,
  html[data-beweging="systeem"] .s3-ap-led, html[data-beweging="systeem"] .s4-staaf,
  html[data-beweging="systeem"] .s4-stip,
  html[data-beweging="systeem"] .ui-pill.actief::after { animation: none !important; }
  html[data-beweging="systeem"] .ap-golf { opacity: .28; }
  html[data-beweging="systeem"] .ui-pill.actief::after { transform: scaleX(1); }
}

/* Ricoh-printer: transparante foto die vrij op de donkere kaart staat */
.printer-photo { background: radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.05), transparent 72%); }
.printer-photo img { filter: drop-shadow(0 26px 40px rgba(0,0,0,.55)); }
.hotspot2 { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.hotspot2:focus-visible { outline: none; }
.hs2-dot { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-solid); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); position: relative; transition: transform .2s var(--anim-easing), box-shadow .2s ease; }
.hs2-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--accent-solid); animation: hs-pulse 2.2s ease-out infinite; }
.hotspot2:hover .hs2-dot, .hotspot2:focus-visible .hs2-dot, .hotspot2.actief .hs2-dot { transform: scale(1.28); box-shadow: 0 0 0 4px rgba(215,25,32,.30); }

/* VoIP-foto's: zachte afronding + diepe schaduw */
.voip-photo img { width: 100%; height: auto; display: block; border-radius: 18px; }
.voip-photo { filter: drop-shadow(0 30px 55px rgba(0,0,0,.55)); }

/* VoIP-demovideo: strak ingekaderd op het donkere thema */
.voip-video { border-radius: 18px; overflow: hidden; border: 1px solid var(--rand); box-shadow: var(--schaduw); background: #000; }
.voip-video video { display: block; width: 100%; height: auto; }

/* FAQ-accordeon */
.faq-chevron { transition: transform .25s var(--anim-easing); }

/* =====================================================================
   BEDRIJFSVIDEO — eigen dronebeelden (video/capta-drone.mp4)
   Filmisch ingekaderd: zachte rode gloed achter het kader, play-knop en
   bijschrift over het beeld. Bij klik verdwijnt de overlay en verschijnen
   de gewone videoknoppen.
   ===================================================================== */
.video-showcase { position: relative; }

/* Zachte gloed achter het kader (puur decoratief) */
.video-showcase::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 12%; bottom: -6%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(215,25,32,.38), transparent 70%);
  filter: blur(46px); opacity: .55; z-index: 0; pointer-events: none;
}

.video-kader {
  position: relative; z-index: 1; overflow: hidden; background: #05070a;
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  border: 1px solid var(--rand-2);
  box-shadow: 0 44px 90px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.video-speler { width: 100%; height: 100%; object-fit: cover; display: block; background: #05070a; }

/* Overlay met play-knop en bijschrift — één grote klikzone */
.video-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  width: 100%; border: 0; cursor: pointer; text-align: left; color: #fff;
  background:
    linear-gradient(180deg, rgba(5,7,10,.15) 0%, rgba(5,7,10,.35) 55%, rgba(5,7,10,.85) 100%);
  transition: opacity .4s ease, visibility .4s ease;
}
.video-play {
  position: relative; width: 76px; height: 76px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: #fff;
  box-shadow: 0 14px 36px -10px rgba(215,25,32,.75);
  transition: transform .3s var(--anim-easing), box-shadow .3s ease;
}
/* Pulserende ring rond de play-knop */
.video-play::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); animation: video-puls 2.6s ease-out infinite;
}
@keyframes video-puls {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.video-overlay:hover .video-play { transform: scale(1.07); box-shadow: 0 18px 44px -10px rgba(215,25,32,.9); }

.video-bijschrift {
  position: absolute; left: 26px; right: 26px; bottom: 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.video-titel { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.video-meta  { font-size: .8rem; color: rgba(255,255,255,.66); }
@media (max-width: 640px) {
  .video-play { width: 60px; height: 60px; }
  .video-bijschrift { left: 18px; right: 18px; bottom: 16px; }
  .video-titel { font-size: .9rem; }
}

/* Tijdens het afspelen: overlay weg, native knoppen zichtbaar */
.video-kader.speelt .video-overlay { opacity: 0; visibility: hidden; }

/* =====================================================================
   TOEGANKELIJKHEID — "verminderde beweging"
   Net als de referentiesite zetten we enkel de doorlopende sfeer-animaties
   uit (zie het @media-blok bij de scroll-animaties hierboven). De laad-
   spinner, verschijn-effecten, hovers en scroll-effecten blijven bewust
   werken, zodat de site niet dood aanvoelt bij deze Windows-instelling.
   ===================================================================== */