:root {
  --bg:            #0E1116;
  --surface:       #171B22;
  --surface-2:     #202632;
  --rand:          rgba(255,255,255,0.08);
  --rand-2:        rgba(255,255,255,0.18);

  --tekst:         #EDEFF2;
  --tekst-zacht:   #AEB6C2;
  --tekst-mute:    #7A828F;

  --accent:            #FF6B71;
  --accent-solid:      #D71920;
  --accent-solid-hover:#E4222B;
  --accent-ink:        #7A0F14;

  --font:          'Inter', ui-sans-serif, system-ui, sans-serif;

  --radius:        16px;
  --radius-lg:     24px;
  --radius-sm:     10px;

  --schaduw:       0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -22px rgba(0,0,0,0.65);

  --anim-duur:     500ms;
  --anim-easing:   cubic-bezier(.22,.61,.36,1);
  --reveal-shift:  20px;

  --sectie-y:      clamp(3.25rem, 8vw, 7rem);

  --hover-lift:    -6px;
  --hover-scale:   1;
}

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; }

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; }

.sectie { padding-top: var(--sectie-y); padding-bottom: var(--sectie-y); }

.kaart { background: var(--surface); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); }

.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); }

.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 600; }

.kaart-uitgelicht {
  border-color: var(--rand-2);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(215,25,32,.10), transparent 55%),
    var(--surface);
}
.kaart-uitgelicht:hover {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(215,25,32,.14), transparent 58%),
    var(--surface-2);
}

.dienst-link svg, .dienst-link i { transition: transform .3s var(--anim-easing); }
.kaart:hover .dienst-link svg, .kaart:hover .dienst-link i { transform: translateX(4px); }

.merk-rij { display: flex; align-items: center; gap: 1.125rem; min-height: 40px; }
.merk-logo { position: relative; display: block; height: var(--h, 30px); }
.merk-logo img {
  height: 100%; width: auto; max-width: none; display: block;
  object-fit: contain;
}

.merk-logo::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  filter: brightness(0) invert(1);
  transition: opacity .35s var(--anim-easing);
  pointer-events: none;
}
.kaart:hover .merk-logo::after,
.kaart:focus-visible .merk-logo::after { opacity: 0; }

html[data-logos="kleur"] .merk-logo::after { opacity: 0; }

.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); }

.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-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); } }
@keyframes capta-fonkel { from { opacity: .35; } to { opacity: .85; } }

.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); }

@keyframes capta-breathe{ 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:.85; transform: scale(1.1); } }

.capta-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  isolation: isolate;
  background: radial-gradient(140% 120% at 50% -20%, #141A25 0%, #0E1116 55%, #090B10 100%);
  opacity: var(--bg-kracht, 1);
}
body > main, body > footer { position: relative; z-index: 1; }

.capta-bg-laag { position: absolute; inset: 0; will-change: transform; }
.capta-bg-orb  { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }

.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;
}
.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;
}
.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;
}

@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; }
}

.capta-bg-figuur {
  position: absolute; top: 50%; right: -9vmax; width: 34vmax; height: 34vmax;
  transform-origin: center;
  background: url("capta-mark.png") center / contain no-repeat;
  opacity: .16;
  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); }
}

.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");
}

.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 { 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); }

#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); } }

.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; }
.reveal.klaar, .reveal-l.klaar, .reveal-r.klaar, .reveal-pop.klaar { will-change: auto; transition: none; }

[data-hero-blob], [data-hero-content] { will-change: transform; }

.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"] .capta-gradient-text,
  html[data-beweging="systeem"] .capta-pulse-glow { animation: none !important; }
}

.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); } }

.hero-headline { opacity: 1; font-size: clamp(2rem, 8.6vw, 3.4rem); }
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)); } }

.pain-card .pain-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pain-card .pain-link i { transition: transform .25s ease; }
.pain-card:hover .pain-link i { transform: translateX(3px); }

.vt-kaart { position: relative; overflow: hidden; }
.vt-kaart::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 100% 0%, rgba(215,25,32,.10), transparent 65%);
}
.vt-kaart > * { position: relative; }

.vt-in { animation: capta-vt-in .35s var(--anim-easing) both; }
@keyframes capta-vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.vt-optie {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--rand);
  color: var(--tekst); font-size: .95rem; font-weight: 500; line-height: 1.35;
  transition: border-color .2s ease, background .2s ease, transform .2s var(--anim-easing);
}
.vt-optie:hover { border-color: var(--accent); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.vt-letter {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(215,25,32,.15); color: var(--accent);
  font-size: .72rem; font-weight: 700;
}
.vt-optie:hover .vt-letter { background: rgba(215,25,32,.28); }

.vt-terug {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem;
  color: var(--tekst-mute); font-size: .8rem; font-weight: 500;
  transition: color .2s ease;
}
.vt-terug:hover { color: var(--tekst); }

.vt-balk { height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.vt-balk > span {
  display: block; height: 100%; border-radius: 999px;
  background-image: linear-gradient(90deg, var(--accent-solid-hover), var(--accent));
  transition: width .45s var(--anim-easing);
}

.vt-lijst { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rand); display: grid; gap: 1.15rem; }
.vt-regel { display: flex; align-items: flex-start; gap: .85rem; }
.vt-punt {
  flex: none; width: 26px; height: 26px; border-radius: 999px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vt-punt.goed  { background: rgba(52,199,89,.15);  color: #5AD07F; }
.vt-punt.deels { background: rgba(255,176,32,.15); color: #FFB020; }
.vt-punt.werk  { background: rgba(215,25,32,.18);  color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html[data-beweging="systeem"] .vt-in { animation: none; }
  html[data-beweging="systeem"] .vt-balk > span { transition: none; }
}

@keyframes capta-bounce { 0%,100% { transform: translateY(0); opacity:.6 } 50% { transform: translateY(-4px); opacity:1 } }
.typing-dot { animation: capta-bounce 1s infinite; }

.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; }

.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; }

.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; }

.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); } }

.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; } }

.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; }

.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-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.6);
  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; }
html[data-logos="kleur"] .logo-item { opacity: 1; filter: none; }

.sterren { display: inline-flex; gap: 2px; letter-spacing: 1px; }
.ster { color: rgba(255,255,255,.16); line-height: 1; }
.ster.vol { color: #FBBC04; }

.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 {
  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); }

.review-datum { font-size: .75rem; color: var(--tekst-mute); }
.review-g .g-logo { width: 17px; height: 17px; display: block; opacity: .9; }

.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); }

.sc-kader { padding: .5rem 0; }
.sc-fotokader { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem 0; }
.sc-fotokader::before {
  content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,.22), transparent 65%); filter: blur(22px);
}
.sc-fotokader img { position: relative; max-width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(0,0,0,.55)); }

.sc-kaartfoto { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; min-height: 100px; }
.sc-kaartfoto::before {
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,.18), transparent 65%); filter: blur(16px);
}
.sc-kaartfoto img { position: relative; max-height: 110px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); }
.sc-scene { width: 100%; height: auto; display: block; max-width: 560px; margin: 0 auto; }
.sc-vlak  { fill: var(--surface-2); stroke: var(--rand-2); stroke-width: 1.5; }
.sc-rand  { fill: none; stroke: var(--rand-2); stroke-width: 1.5; }
.sc-lijn  { fill: none; stroke: var(--rand-2); stroke-width: 2.5; stroke-linecap: round; }
.sc-dot   { fill: var(--accent); }
.sc-puls  { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: hs-pulse 2.2s ease-out infinite; }
.sc-balk  { fill: var(--accent); opacity: .85; transform-box: fill-box; transform-origin: bottom; animation: sc-balk 2.8s ease-in-out infinite; }
@keyframes sc-balk { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.sc-led   { fill: var(--accent); animation: sc-led 1.8s ease-in-out infinite; }
@keyframes sc-led { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sc-ring  { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sc-ring 3s ease-out infinite; }
@keyframes sc-ring { 0% { transform: scale(.55); opacity: .6; } 80% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } }
.sc-schild { fill: rgba(215,25,32,.14); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.sc-vink  { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.sc-dreiging { opacity: .5; animation: sc-dreiging 3.6s ease-in-out infinite; }
@keyframes sc-dreiging { 0%, 100% { opacity: .3; } 50% { opacity: .75; } }
.sc-x { fill: none; stroke: var(--tekst-mute); stroke-width: 2.5; stroke-linecap: round; }

.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); }
@keyframes hs-pulse { 0% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }

.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%);
}
.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; }

.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); }
.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); } }

.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; }

.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; }

.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; }

.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; }
.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); }

.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; }
}
.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; }

.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); }

.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)); }

.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; } }

@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); }
}

.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-photo { position: relative; }
.voip-photo::before {
  content: ""; position: absolute; inset: 26px 26px -18px -18px; border-radius: 22px;
  background: linear-gradient(45deg, rgba(215,25,32,.30), rgba(215,25,32,.03) 65%);
}
.voip-photo-flip::before { inset: 26px -18px -18px 26px; background: linear-gradient(315deg, rgba(215,25,32,.30), rgba(215,25,32,.03) 65%); }
.voip-kader {
  position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--rand-2); background: var(--surface-2);
  box-shadow: 0 34px 64px -24px rgba(0,0,0,.7);
}
.voip-kader-hero { aspect-ratio: 3 / 2; }
.voip-kader img { width: 100%; height: 100%; object-fit: cover; display: block; }

.voip-cutout { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; }
.voip-cutout::before {
  content: ""; position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 68%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(215,25,32,.26), transparent 65%); filter: blur(26px);
}
.voip-cutout img { position: relative; max-height: 480px; width: auto; max-width: 100%; filter: drop-shadow(0 30px 55px rgba(0,0,0,.6)); }

.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; }

.terug-knop {
  position: fixed; z-index: 45;
  top: 96px; left: max(1.25rem, calc((100vw - 1500px) / 2 + 1.5rem));
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem .4rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 500; color: var(--tekst-zacht);
  background: rgba(14,17,22,.55); border: 1px solid var(--rand);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .3s ease, color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s var(--anim-easing);
}
.terug-knop.is-gedimd { opacity: .4; background: rgba(14,17,22,.35); border-color: rgba(255,255,255,.06); }
.terug-knop:hover, .terug-knop:focus-visible {
  opacity: 1; color: var(--tekst);
  background: rgba(20,24,31,.8); border-color: var(--rand-2); transform: translateX(-2px);
}
.terug-knop svg, .terug-knop i { width: 14px; height: 14px; }

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

.video-showcase { position: relative; }

.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; }

.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;
}
.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; }
}

.video-kader.speelt .video-overlay { opacity: 0; visibility: hidden; }

@media (max-width: 639px) {

  .terug-knop {
    position: static;
    margin-bottom: 1.1rem;
    opacity: 1 !important;
    background: rgba(20,24,31,.75);
  }
  .terug-knop.is-gedimd { opacity: 1 !important; background: rgba(20,24,31,.75); }
}

.grecaptcha-badge { visibility: hidden; }

#cookiebalk {
  position: fixed; z-index: 90;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 34rem;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rand-2);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  animation: cookiebalk-in .35s var(--anim-easing) both;
}
#cookiebalk p {
  font-size: .8125rem; line-height: 1.6;
  color: var(--tekst-zacht);
  margin-bottom: 1rem;
}
.cookiebalk-knoppen { display: flex; flex-wrap: wrap; gap: .625rem; }
.cookiebalk-knoppen button { flex: 1 1 auto; }

@keyframes cookiebalk-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
  #cookiebalk { left: 1.5rem; right: auto; bottom: 1.5rem; }
  .cookiebalk-knoppen button { flex: 0 0 auto; }
}