/* ═══════════════════════════════════════════════════════════════
   Homepage "wow" — 14/15-10-2026
   Palet: PETROL (gekozen 15-10; AM-blauw en zwart vielen af).
   Wit vlak, petrol #0f6b6b voor knoppen, links en accentwoorden.
   De drie dienstkleuren van het logo (zon amber, batterij groen,
   laadpaal blauw) alleen als kleine accenten: stippen, balkjes, labels.
   Geen koper/bruin, geen goud behalve de sterren.
   Alles hangt onder .wow-home / .w-* zodat de gedeelde CSS niet botst.
   ═══════════════════════════════════════════════════════════════ */

.wow-home {
  --w-bg: #ffffff;
  --w-soft: #f0f7f6;
  --w-soft2: #e6f2f0;
  --w-line: #e0ecea;
  --w-line2: #c3dcd8;
  --w-ink: #13292b;
  --w-ink2: #4d5f60;
  --w-main: #0f6b6b;
  --w-main-h: #0b5656;
  --w-main-soft: #6fb8b2;
  --w-dark: #0d2b2c;
  --w-star: #edb96a;
  --w-zon: #e09024;
  --w-bat: #22a468;
  --w-laad: #2287ce;
  --w-rgb: 15, 107, 107;
  --w-c-laden: #6fb8b2;
  --w-c-ontladen: #0f6b6b;
  --w-c-idle: #c9dcda;
  --w-c-soc: #d0821a;
  --w-cta-bg: #0f6b6b;
  --w-cta-hand: #c6ebe6;
  --w-flow-glow: rgba(111, 184, 178, .95);
  --w-cta-em: #c6ebe6;
  --w-ease: cubic-bezier(.22, 1, .36, 1);
  --w-display: 'Space Grotesk', system-ui, sans-serif;
  --w-body: 'Inter', system-ui, sans-serif;
  --w-mono: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--w-bg);
  color: var(--w-ink);
}

.wow { overflow-x: clip; font-family: var(--w-body); }
:where(.wow) :where(h1, h2, h3, p, figure, dl, dd, ol, ul, blockquote) { margin: 0; }
:where(.wow) :where(ol, ul) { padding: 0; list-style: none; }
:where(.wow) img { display: block; max-width: 100%; }

.w-wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
@media (min-width: 900px) { .w-wrap { width: min(1240px, calc(100% - 96px)); } }
.w-sec { padding: clamp(80px, 11vw, 150px) 0; }

/* ── Typografie ─────────────────────────────────────────────── */
.w-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px/1.4 var(--w-body); letter-spacing: 0;
  color: var(--w-main); margin-bottom: 18px;
}
.w-h1 {
  font: 600 clamp(48px, 8.4vw, 128px)/.9 var(--w-display);
  letter-spacing: -.048em; color: var(--w-ink);
}
.w-h2 {
  font: 600 clamp(38px, 5.4vw, 80px)/.98 var(--w-display);
  letter-spacing: -.042em; color: var(--w-ink); text-wrap: balance;
}
.w-accent { color: var(--w-main); }
.w-lead { font: 400 clamp(17px, 1.35vw, 20px)/1.6 var(--w-body); color: var(--w-ink2); max-width: 46ch; }
.w-note { font: 400 13px/1.6 var(--w-body); color: var(--w-ink2); margin-top: 28px; max-width: 80ch; }
.w-stars { color: var(--w-star); letter-spacing: .12em; }

.w-sec-head { margin-bottom: clamp(40px, 6vw, 72px); }
.w-sec-head .w-lead { margin-top: 22px; }
.w-sec-head--row { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) {
  .w-sec-head--row { grid-template-columns: 1.3fr 1fr; gap: 64px; }
  .w-sec-head--row .w-lead { margin-top: 0; }
}

/* Geen pulserende stip meer (18-10: "standaard Claude-website"). Dienstkleur als kort streepje. */
@keyframes w-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ── Knoppen & links ────────────────────────────────────────── */
.w-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px;
  font: 600 16px/1 var(--w-body); text-decoration: none; white-space: nowrap;
  transition: transform .5s var(--w-ease), background-color .25s, color .25s, border-color .25s, box-shadow .5s var(--w-ease);
}
.w-btn:hover { transform: translateY(-2px); }
.w-btn-primary { background: var(--w-main); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(var(--w-rgb), .7); }
.w-btn-primary:hover { background: var(--w-main-h); box-shadow: 0 20px 40px -16px rgba(var(--w-rgb), .75); }
.w-btn-ghost { background: #fff; color: var(--w-ink) !important; border: 1px solid var(--w-line2); }
.w-btn-ghost:hover { border-color: var(--w-main); color: var(--w-main) !important; }
.w-arr { display: inline-block; transition: transform .5s var(--w-ease); }
.w-btn:hover .w-arr, .w-link:hover span, .w-portal:hover .w-arr { transform: translate(3px, -3px); }
.w-btn:hover .w-arr-down { transform: translateY(3px); }
.w-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px/1.3 var(--w-body); color: var(--w-main) !important; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.w-link span { display: inline-block; transition: transform .4s var(--w-ease); }
.w-link-soft { color: var(--w-ink2) !important; border-bottom-color: var(--w-line2); }
.w-link-soft:hover { color: var(--w-main) !important; }
.wow a:focus-visible, .wow button:focus-visible, .wow summary:focus-visible, .w-gal:focus-visible {
  outline: 3px solid var(--w-main-soft); outline-offset: 3px;
}

/* ── Verschijnen bij scrollen ───────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--w-ease), transform 1.1s var(--w-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ═══ 01 · HERO ═══════════════════════════════════════════════ */
.w-hero { padding-top: clamp(36px, 6vw, 84px); }
.w-hero-head { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .w-hero-head { grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: end; }
}
.w-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.w-line > span { display: block; transform: translateY(108%); transition: transform 1.25s var(--w-ease); transition-delay: calc(var(--i, 0) * 120ms + 80ms); }
.w-hero.is-in .w-line > span { transform: none; }
.w-hero-side { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--w-ease) .45s, transform 1.1s var(--w-ease) .45s; }
.w-hero.is-in .w-hero-side { opacity: 1; transform: none; }
.w-hero-side .w-actions { margin-top: 26px; }
.w-hero-proof { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; margin-top: 22px; font: 400 14px/1.4 var(--w-body); color: var(--w-ink2); }
.w-hero-proof strong { color: var(--w-ink); }
.w-hero-proof-2 { grid-column: 2; }
.w-sald-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 10px 16px; border-radius: 999px; background: var(--w-soft); border: 1px solid var(--w-line2);
  font: 500 14px/1.35 var(--w-body); color: var(--w-ink) !important; text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
.w-sald-chip:hover { border-color: var(--w-main); background: #fff; }
.w-sald-chip strong { color: var(--w-main); font-variant-numeric: tabular-nums; }

/* Fotopodium. Mobiel: een kaart. Desktop: groeit tijdens scrollen uit tot een grote kaart onder de
   menubalk. home-wow.js zet de eindbreedte (--fw) zo dat alle labels in beeld blijven; schermvullend
   op een breed, laag scherm zoomde de foto zo ver in dat labels onder de menubalk en de livebalk vielen. */
.w-stage { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.w-frame {
  position: relative; overflow: hidden; margin: 0 16px; border-radius: 24px;
  height: min(118vw, 640px); background: var(--w-dark);
  box-shadow: 0 40px 80px -40px rgba(16, 32, 51, .45);
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.2s var(--w-ease) .25s, transform 1.4s var(--w-ease) .25s;
}
.w-hero.is-in .w-frame { opacity: 1; transform: none; }
.w-scene { position: absolute; inset: 0; transform-origin: 50% 35%; will-change: transform; }
.w-scene-img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 38%; }

@media (min-width: 900px) {
  .w-stage { height: 175vh; }
  .w-frame {
    position: sticky; top: 0; height: 100vh; width: var(--fw, 100%); margin: 0 auto; border-radius: 0;
    box-shadow: none;
    --ix: max(48px, calc((100vw - 1240px) / 2));
    --ib: 22vh; --it: 0px; --r: 28px;
    clip-path: inset(var(--it) var(--ix) var(--ib) var(--ix) round var(--r));
  }
  .w-scene-img { object-position: 50% 38%; }
}

/* Avondstand */
.w-dusk {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(8, 18, 42, .82) 0%, rgba(14, 28, 52, .62) 40%, rgba(16, 32, 51, .58) 100%);
  mix-blend-mode: multiply; transition: opacity 1.4s var(--w-ease);
}
.w-glow {
  position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 222, 170, .55) 0%, rgba(255, 222, 170, .18) 35%, transparent 65%);
  transition: opacity 1.6s var(--w-ease);
}
.w-glow-sm { width: 22%; }
.w-frame.is-night .w-dusk, .w-frame.is-night .w-glow { opacity: 1; }

/* Energiestromen */
.w-flows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.w-flow {
  fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 11;
  opacity: 0; transition: opacity .8s var(--w-ease);
  filter: drop-shadow(0 0 5px var(--w-flow-glow));
  animation: w-flow 1.1s linear infinite;
}
.w-frame.is-live .w-flow.is-on { opacity: .95; }
@keyframes w-flow { to { stroke-dashoffset: -24; } }

/* Hotspots */
.w-spot {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  transform: translate(-11px, -50%);
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--w-ease), transform .8s var(--w-ease);
  transition-delay: calc(var(--d, 0) * 140ms);
}
.w-frame.is-live .w-spot { opacity: 1; pointer-events: auto; }
.w-spot.is-out { visibility: hidden; }
.w-spot.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.w-spot-dot { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(16, 32, 51, .35); }
.w-spot-dot::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--c, var(--w-main)); }
.w-spot-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9);
  animation: w-ping 2.4s var(--w-ease) infinite; animation-delay: calc(var(--d, 0) * 300ms);
}
.w-spot--zon { --c: var(--w-zon); }
.w-spot--bat { --c: var(--w-bat); }
.w-spot--auto { --c: var(--w-laad); }
.w-spot--huis { --c: var(--w-main); }
.w-spot-card {
  display: grid; gap: 2px; padding: 11px 15px 12px; border-radius: 16px; min-width: 0;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 22px 44px -20px rgba(16, 32, 51, .55);
  transform: translateY(8px) scale(.96); transform-origin: left center;
  transition: transform .8s var(--w-ease); transition-delay: inherit;
}
.w-spot.is-left .w-spot-card { transform-origin: right center; }
.w-frame.is-live .w-spot-card { transform: none; }
.w-spot-card small { font: 500 10.5px/1.2 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink2); display: flex; align-items: center; gap: 6px; }
.w-spot-card small::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.w-spot-card strong { font: 600 15px/1.25 var(--w-display); color: var(--w-ink); letter-spacing: -.01em; white-space: nowrap; }
.w-spot-card em { font: 400 13px/1.35 var(--w-body); font-style: normal; color: var(--w-ink2); white-space: nowrap; }
/* Past een label aan geen van beide kanten van de stip (smalle telefoon), dan krijgt het een
   maximale breedte van home-wow.js en loopt de tekst door op een tweede regel. */
.w-spot-card.is-krap strong, .w-spot-card.is-krap em { white-space: normal; }
/* home-wow.js schuift overlappende labels met top een paar pixels uit elkaar. */
.w-spot-card { position: relative; }

/* Dag/avond-schakelaar */
.w-daynight {
  position: absolute; z-index: 3; top: 16px; left: 16px; display: flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .7);
  opacity: 0; transition: opacity .8s var(--w-ease) .6s;
}
.w-frame.is-live .w-daynight { opacity: 1; }
.w-daynight button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px;
  font: 600 12.5px/1 var(--w-body); color: var(--w-ink2); background: transparent;
  transition: background-color .25s, color .25s;
}
.w-daynight button[aria-pressed="true"] { background: var(--w-ink); color: #fff; }

/* Live-balk */
.w-livebar {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; overflow: hidden;
  border-radius: 16px; background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .75);
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--w-ease) .5s, transform .9s var(--w-ease) .5s;
}
.w-frame.is-live .w-livebar { opacity: 1; transform: none; }
.w-livebar-track {
  display: flex; gap: 22px; align-items: center; width: max-content; padding: 13px 18px;
  font: 400 13.5px/1.2 var(--w-body); color: var(--w-ink2); white-space: nowrap;
  animation: w-ticker 26s linear infinite;
}
.w-livebar-track b { color: var(--w-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.w-livebar-track b.w-plus { color: var(--w-bat); }
.w-livebar-track > span + span::before { content: "·"; margin-right: 22px; color: var(--w-line2); }
.w-live-tag { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 6px; background: var(--w-bat); font: 700 12px/1 var(--w-body); color: #fff; }
.w-livebar-track > .w-live-tag + span::before { content: none; }
@keyframes w-ticker { to { transform: translateX(-50%); } }
@media (min-width: 900px) {
  .w-daynight { top: calc(max(var(--it), 80px) + 16px); left: calc(var(--ix) + 20px); transition-delay: 0s; }
  .w-livebar {
    left: 50%; right: auto; bottom: calc(var(--ib) + 22px); transform: translate(-50%, 12px);
    max-width: calc(100% - 2 * var(--ix) - 40px); border-radius: 999px;
  }
  .w-frame.is-live .w-livebar { transform: translate(-50%, 0); }
  .w-livebar-track { animation: none; }
}
.w-scene-note { font: 400 12.5px/1.5 var(--w-body); color: var(--w-ink2); margin-top: 14px; }
@media (min-width: 900px) {
  .w-scene-note { text-align: center; margin-top: 18px; }
  .w-livebar-track .is-clone { display: none; }
}
/* Mobiel: één label tegelijk; tik op een stip om te wisselen. */
@media (max-width: 899px) {
  .w-spot { cursor: pointer; }
  .w-spot .w-spot-card { opacity: 0; transform: translateY(6px) scale(.94) !important; pointer-events: none; transition: opacity .45s var(--w-ease), transform .6s var(--w-ease); }
  .w-frame.is-live .w-spot.is-focus .w-spot-card { opacity: 1; transform: none !important; }
  .w-spot.is-focus { z-index: 3; }
}

/* ═══ 02 · REUZENBAND ═════════════════════════════════════════ */
.w-marquee { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.w-mq-row, .w-rev-row { display: flex; width: max-content; will-change: transform; }
.w-mq-set { display: flex; align-items: center; flex: none; }
.w-mq-row { font: 600 clamp(60px, 11vw, 176px)/1 var(--w-display); letter-spacing: -.05em; color: var(--w-ink); white-space: nowrap; }
.w-mq-row span { padding: 0 .16em; }
.w-mq-row .o { color: transparent; -webkit-text-stroke: 1.5px var(--w-main); }
.w-bars { display: inline-flex; align-items: flex-end; gap: .06em; height: .62em; margin: 0 .16em; }
.w-bars b { display: block; width: .11em; transform: skewX(-29.8deg); border-radius: 2px; }
.w-bars b:nth-child(1) { height: 100%; background: var(--w-zon); }
.w-bars b:nth-child(2) { height: 76%; background: var(--w-bat); }
.w-bars b:nth-child(3) { height: 52%; background: var(--w-laad); }
.w-mq-row--sub { margin-top: clamp(14px, 2vw, 26px); font: 500 clamp(18px, 2.2vw, 30px)/1 var(--w-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--w-ink2); }
.w-mq-row--sub span { padding: 0 .8em; }
.w-mq-row--sub em { font-style: normal; color: var(--w-main); }

/* ═══ 03 · DRIE STAPPEN ═══════════════════════════════════════ */
.w-story { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px); }
.w-story-grid { display: grid; gap: 40px; }
.w-story-h2 { margin-bottom: 36px; }
.w-rail { display: none; }
.w-steps-stack { display: grid; gap: 56px; }
.w-step { display: grid; gap: 14px; }
.w-step-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; margin-bottom: 10px; }
.w-step-num { font: 500 13px/1 var(--w-mono); letter-spacing: .16em; color: var(--w-main); }
.w-step h3 { font: 600 clamp(30px, 3.4vw, 50px)/1.02 var(--w-display); letter-spacing: -.035em; }
.w-step p { font: 400 18px/1.6 var(--w-body); color: var(--w-ink2); max-width: 42ch; }
.w-step-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 10px; }
.w-story-photos { display: none; }

@media (min-width: 900px) {
  .w-story { padding: 0; }
  .w-story-track { height: 330vh; }
  .w-story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 64px; }
  .w-story-grid { grid-template-columns: 1fr 1.12fr; gap: clamp(40px, 6vw, 96px); align-items: center; width: min(1240px, calc(100% - 96px)); }
  .w-story-h2 { font-size: clamp(34px, 3.6vw, 54px); margin-bottom: 30px; }
  .w-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 40px; }
  .w-rail-seg { display: grid; gap: 10px; }
  .w-rail-seg i { display: block; height: 3px; border-radius: 3px; background: var(--w-line); overflow: hidden; position: relative; }
  .w-rail-seg i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0)); }
  .w-rail-seg[data-rail="0"] i::after { background: var(--w-zon); }
  .w-rail-seg[data-rail="1"] i::after { background: var(--w-bat); }
  .w-rail-seg[data-rail="2"] i::after { background: var(--w-laad); }
  .w-rail-seg b { font: 500 11.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink2); transition: color .4s; }
  .w-rail-seg.is-on b { color: var(--w-ink); }
  .w-steps-stack { display: grid; gap: 0; }
  .w-step { grid-area: 1 / 1; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .6s var(--w-ease), transform .9s var(--w-ease); }
  .w-step.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
  .w-step.is-past { transform: translateY(-30px); }
  .w-step-img { display: none; }
  .w-step-num { font: 600 clamp(80px, 9vw, 140px)/.8 var(--w-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--w-line2); margin-bottom: 18px; }
  .w-story-photos { display: block; position: relative; height: min(76vh, 720px); border-radius: 28px; overflow: hidden; background: var(--w-soft); }
  .w-sp { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--w-ease); }
  .w-sp.is-active, .w-sp.is-past { clip-path: inset(0 0 0 0); }
  .w-sp img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.8s var(--w-ease); }
  .w-sp.is-active img { transform: scale(1); }
  .w-sp-tag {
    position: absolute; left: 20px; bottom: 20px; padding: 9px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font: 500 11.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink);
  }
}

/* ═══ 04 · LIVE STROOMMARKT ══════════════════════════════════ */
.w-live { background: var(--w-soft); border-block: 1px solid var(--w-line); }
.w-live-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .w-live-grid { grid-template-columns: .82fr 1.5fr; gap: 64px; align-items: start; } }
.w-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--w-line2); margin-bottom: 30px; }
.w-tabs button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 9px 15px; background: transparent;
  font: 600 13.5px/1 var(--w-body); color: var(--w-ink2); transition: background-color .25s, color .25s;
}
.w-tabs button[aria-selected="true"] { background: var(--w-main); color: #fff; }
.w-big-num {
  display: block; font: 600 clamp(72px, 9vw, 132px)/.9 var(--w-display); letter-spacing: -.055em;
  color: var(--w-ink); font-variant-numeric: tabular-nums;
}
.w-big-cap { font: 400 17px/1.55 var(--w-body); color: var(--w-ink2); margin-top: 14px; max-width: 34ch; }
.w-big-cap strong { color: var(--w-ink); }
.w-mini { display: grid; gap: 0; margin: 30px 0 30px; border-top: 1px solid var(--w-line2); }
.w-mini > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--w-line2); }
.w-mini dt { font: 400 15px/1.3 var(--w-body); color: var(--w-ink2); }
.w-mini dd { font: 600 15px/1.3 var(--w-body); color: var(--w-ink); font-variant-numeric: tabular-nums; text-align: right; }

.w-chart { position: relative; background: #fff; border: 1px solid var(--w-line); border-radius: 24px; padding: 22px 18px 14px; box-shadow: 0 30px 60px -40px rgba(16, 32, 51, .3); }
@media (min-width: 900px) { .w-chart { padding: 28px 28px 18px; } }
.w-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font: 500 12.5px/1.2 var(--w-body); color: var(--w-ink2); }
.w-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.w-chart-legend i { width: 12px; height: 12px; border-radius: 3px; }
.lg-laden { background: var(--w-c-laden); }
.lg-ontladen { background: var(--w-c-ontladen); }
.lg-idle { background: var(--w-c-idle); }
.lg-soc { height: 3px !important; border-radius: 2px !important; background: var(--w-c-soc); }
.w-chart-box { position: relative; width: 100%; }
.w-chart-box svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.w-chart-box .bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .9s var(--w-ease); }
.w-chart.is-in .bar { transform: scaleY(1); }
.w-chart-box .bar.is-hover { filter: brightness(1.12); }
.w-chart-box .soc { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 2s var(--w-ease) .5s; }
.w-chart.is-in .soc { stroke-dashoffset: 0; }
.w-chart-box .soc-area { opacity: 0; transition: opacity 1.2s var(--w-ease) 1.2s; }
.w-chart.is-in .soc-area { opacity: 1; }
.w-chart-box text { font-family: var(--w-mono); font-size: 11px; fill: var(--w-ink2); }
.w-chart-box .now-label { font-family: var(--w-body); font-weight: 700; font-size: 11px; fill: #fff; }
.w-tip {
  position: absolute; z-index: 4; pointer-events: none; min-width: 168px; padding: 12px 14px; border-radius: 14px;
  background: var(--w-ink); color: #fff; font: 400 13px/1.45 var(--w-body);
  box-shadow: 0 18px 36px -16px rgba(16, 32, 51, .6); opacity: 0; transform: translate(-50%, calc(-100% - 6px));
  transition: opacity .2s;
}
.w-tip.is-on { opacity: 1; }
.w-tip b { display: block; font: 600 13px/1.3 var(--w-mono); margin-bottom: 4px; }
.w-tip span { display: block; color: rgba(255, 255, 255, .72); }
.w-live.is-offline .w-chart, .w-live.is-offline .w-live-stats .w-big, .w-live.is-offline .w-big-cap, .w-live.is-offline .w-mini, .w-live.is-offline .w-tabs { display: none; }

/* ═══ 05 · SALDERING ═════════════════════════════════════════ */
.w-sald { overflow: hidden; }
.w-count { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 36px; margin: 6px 0 clamp(40px, 6vw, 70px); }
.w-count-days { display: flex; align-items: flex-end; gap: 14px; }
.w-count-days span {
  font: 600 clamp(140px, 27vw, 380px)/.78 var(--w-display); letter-spacing: -.07em; color: var(--w-main);
  font-variant-numeric: tabular-nums;
}
.w-count-days small, .w-count-rest small { font: 500 13px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink2); }
.w-count-days small { padding-bottom: .6em; }
.w-count-rest { display: flex; gap: 22px; padding-bottom: 6px; }
.w-count-rest span { display: grid; gap: 6px; }
.w-count-rest b { font: 600 clamp(34px, 4vw, 56px)/1 var(--w-display); letter-spacing: -.04em; color: var(--w-ink); font-variant-numeric: tabular-nums; min-width: 1.25em; }
.w-sald-body { display: grid; gap: 30px; }
.w-sald-body .w-h2 { font-size: clamp(34px, 4.2vw, 62px); }
@media (min-width: 1000px) { .w-sald-body { grid-template-columns: 1fr 1fr; gap: 72px; } }
.w-sald-compare { display: grid; gap: 12px; margin: 30px 0 24px; }
@media (min-width: 560px) { .w-sald-compare { grid-template-columns: 1fr 1fr; } }
.w-sc { padding: 22px; border-radius: 20px; background: var(--w-soft); border: 1px solid var(--w-line); display: grid; gap: 10px; align-content: start; }
.w-sc--new { background: #fff; border-color: var(--w-line2); }
.w-sc-year { font: 500 11.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink2); }
.w-sc-pct { font: 600 46px/1 var(--w-display); letter-spacing: -.04em; color: var(--w-ink); }
.w-sc--new .w-sc-pct { color: var(--w-main); }
.w-sc-bar { display: block; height: 6px; border-radius: 6px; background: var(--w-line); overflow: hidden; }
.w-sc-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--w-main); transition: width 1.6s var(--w-ease) .2s; }
.w-sc:first-child .w-sc-bar i { background: var(--w-main-soft); }
.w-sald-compare.is-in .w-sc-bar i { width: var(--w); }
.w-sc p { font: 400 15px/1.5 var(--w-body); color: var(--w-ink2); }
.w-sald-tip { font: 500 16px/1.55 var(--w-body); color: var(--w-ink); padding-left: 16px; border-left: 3px solid var(--w-bat); }
.w-sald-side .w-actions { margin-top: 26px; }

/* ═══ 06 · BENTO ═════════════════════════════════════════════ */
.w-bento-sec { padding-top: 0; }
.w-bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .w-bento { grid-template-columns: repeat(2, 1fr); } .w-tile--xl { grid-column: span 2; } }
@media (min-width: 1000px) {
  .w-bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(250px, 30vh)); }
  .w-tile--xl { grid-column: span 2; grid-row: span 2; }
  .w-tile--wide { grid-column: span 2; }
}
.w-tile {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 300px; border-radius: 24px; text-decoration: none; color: #fff !important; background: var(--w-dark);
  transition: transform .7s var(--w-ease), box-shadow .7s var(--w-ease);
}
.w-tile--xl { min-height: 440px; }
.w-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(16, 32, 51, .55); }
.w-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--w-ease); }
.w-tile:hover img { transform: scale(1.06); }
.w-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0) 30%, rgba(10, 20, 40, .55) 62%, rgba(10, 20, 40, .9) 100%);
}
.w-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 60%);
}
.w-tile:hover::after { opacity: 1; }
.w-tile-body { display: grid; gap: 8px; padding: 26px; max-width: 46ch; }
.w-tile-body strong { font: 600 clamp(26px, 2.4vw, 36px)/1.05 var(--w-display); letter-spacing: -.03em; }
.w-tile-body > span { font: 400 15.5px/1.5 var(--w-body); color: rgba(255, 255, 255, .86); }
.w-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 10.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.w-tag::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--c, #fff); }
.w-tag--zon { --c: var(--w-zon); }
.w-tag--bat { --c: var(--w-bat); }
.w-tag--laad { --c: var(--w-laad); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.w-chips em { font: 500 12.5px/1 var(--w-body); font-style: normal; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.w-tile-arr {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: var(--w-ink); background: #fff;
  transition: transform .6s var(--w-ease);
}
.w-tile:hover .w-tile-arr { transform: rotate(45deg); }
.w-tile--soft { background: var(--w-soft); color: var(--w-ink) !important; border: 1px solid var(--w-line2); align-items: stretch; flex-direction: column; justify-content: space-between; }
.w-tile--soft::before { content: none; }
.w-tile--soft::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--w-rgb), .1), transparent 60%); }
.w-tile--soft .w-tile-body > span { color: var(--w-ink2); }
.w-tile--soft .w-tag { background: #fff; color: var(--w-main); --c: var(--w-bat); }
.w-tile--soft .w-tile-arr { background: var(--w-main); color: #fff; }
.w-tile-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 26px 26px 0; border-radius: 18px; background: #fff; color: var(--w-main); border: 1px solid var(--w-line2); }
.w-tile-icon svg { width: 32px; height: 32px; }
.w-tools { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--w-line2); }
@media (min-width: 900px) { .w-tools { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 14px; } }
.w-tool {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 20px 4px; border-bottom: 1px solid var(--w-line2); text-decoration: none; color: var(--w-ink) !important;
  transition: color .25s, padding .5s var(--w-ease);
}
.w-tool small { font: 500 12px/1 var(--w-mono); color: var(--w-main); letter-spacing: .1em; }
.w-tool strong { font: 600 16px/1.35 var(--w-body); }
.w-tool span { transition: transform .5s var(--w-ease); color: var(--w-main); }
.w-tool:hover { color: var(--w-main) !important; }
.w-tool:hover span { transform: translateX(4px); }
@media (min-width: 900px) {
  .w-tool { padding: 20px; border: 1px solid var(--w-line2); border-radius: 18px; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 18px 12px; align-items: end; min-height: 128px; }
  .w-tool small { grid-column: 1 / -1; align-self: start; }
  .w-tool:hover { border-color: var(--w-main); background: var(--w-soft); }
}

/* ═══ 07 · GALERIJ ═══════════════════════════════════════════ */
.w-gal-sec { padding-top: 0; }
.w-gal-side { display: grid; gap: 22px; }
.w-gal-nav { display: flex; gap: 8px; }
.w-gal-nav button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--w-line2); background: #fff; cursor: pointer;
  font-size: 18px; color: var(--w-ink); transition: background-color .25s, color .25s, border-color .25s;
}
.w-gal-nav button:hover { background: var(--w-main); border-color: var(--w-main); color: #fff; }
.w-gal {
  --pad: max(16px, calc((100vw - 1240px) / 2));
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  padding: 4px var(--pad) 24px; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
}
@media (min-width: 900px) { .w-gal { --pad: max(48px, calc((100vw - 1240px) / 2)); gap: 20px; } }
.w-gal::-webkit-scrollbar { display: none; }
.w-gal.is-drag { cursor: grabbing; scroll-snap-type: none; }
.w-gal.is-drag img { pointer-events: none; }
.w-gal-item { flex: none; width: min(78vw, 400px); scroll-snap-align: start; }
.w-gal-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; background: var(--w-soft); transition: transform 1s var(--w-ease); user-select: none; -webkit-user-drag: none; }
.w-gal-item:hover img { transform: scale(.985); }
.w-gal-item figcaption { display: grid; gap: 6px; padding: 14px 4px 0; font: 400 15px/1.45 var(--w-body); color: var(--w-ink2); }
.w-gal-item figcaption small { font: 500 11.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink); display: flex; align-items: center; gap: 8px; }
.w-gal-item figcaption small::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--w-bat); }
.w-gal-progress { height: 3px; border-radius: 3px; background: var(--w-line); overflow: hidden; margin-top: 10px; }
.w-gal-progress i { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--w-main); transform-origin: left; transition: transform .2s linear; }

/* ═══ 08 · WAAROM ════════════════════════════════════════════ */
.w-why { background: var(--w-soft); border-block: 1px solid var(--w-line); }
.w-why-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .w-why-grid { grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
  .w-why-head { position: sticky; top: 120px; }
}
.w-why-head .w-lead { margin-top: 22px; }
.w-score { display: flex; flex-wrap: wrap; gap: 20px 44px; margin-top: 36px; }
.w-score-item { display: flex; align-items: center; gap: 16px; }
.w-score-num { font: 600 72px/1 var(--w-display); letter-spacing: -.05em; color: var(--w-ink); }
.w-score-meta { display: grid; gap: 4px; font: 400 14px/1.3 var(--w-body); color: var(--w-ink2); }
.w-score-meta .w-stars { font-size: 18px; }
.w-why-list { border-top: 1px solid var(--w-line2); }
.w-why-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: 30px 0;
  border-bottom: 1px solid var(--w-line2);
}
.w-why-n { font: 500 13px/1.8 var(--w-mono); color: var(--w-main); letter-spacing: .1em; }
.w-why-list h3 { font: 600 clamp(22px, 2vw, 28px)/1.15 var(--w-display); letter-spacing: -.02em; margin-bottom: 8px; }
.w-why-list p { font: 400 16px/1.6 var(--w-body); color: var(--w-ink2); }
.w-why-list small {
  grid-column: 2; justify-self: start; margin-top: 10px; padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--w-line2); font: 500 12.5px/1 var(--w-body); color: var(--w-ink);
}
.w-certs {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px;
  margin-top: clamp(56px, 7vw, 90px); padding-top: 34px; border-top: 1px solid var(--w-line2);
  font: 600 clamp(14px, 1.3vw, 17px)/1 var(--w-display); letter-spacing: .14em; text-transform: uppercase; color: var(--w-ink2);
}
.w-certs-sep { width: 1px; height: 18px; background: var(--w-line2); }

/* ═══ 09 · REVIEWS ═══════════════════════════════════════════ */
.w-reviews { padding: clamp(80px, 11vw, 150px) 0; overflow: hidden; }
.w-reviews .w-sec-head { margin-bottom: 40px; }
@media (min-width: 900px) { .w-reviews .w-sec-head--row { grid-template-columns: 1fr auto; } }
.w-rev-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.w-rev-rows { display: grid; gap: 16px; }
.w-rev-row .w-mq-set { gap: 16px; padding-right: 16px; align-items: stretch; }
.w-rev {
  width: min(82vw, 400px); flex: none; display: flex; flex-direction: column; gap: 14px;
  padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--w-line2);
}
.w-rev:nth-child(odd) { background: var(--w-soft); border-color: var(--w-line); }
.w-rev p { font: 400 17px/1.55 var(--w-body); color: var(--w-ink); flex: 1; }
.w-rev-by { display: flex; align-items: center; gap: 12px; font: 500 14px/1.3 var(--w-body); color: var(--w-ink2); }
.w-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--w-main); color: #fff; font: 600 13px/1 var(--w-body); }
/* Trustpilot-kaartjes: naam + bron/datum als link naar de review zelf */
.w-rev-who { display: grid; gap: 3px; }
.w-rev-src { font: 500 13px/1.3 var(--w-body); color: var(--w-main) !important; text-decoration: none; }
.w-rev-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.w-rev-src span { display: inline-block; transition: transform .3s var(--w-ease); }
.w-rev-src:hover span { transform: translate(2px, -2px); }

/* ═══ 10 · WERKWIJZE ═════════════════════════════════════════ */
.w-flow-sec { padding-top: 0; }
.w-timeline { position: relative; display: grid; gap: 36px; padding-left: 52px; }
.w-timeline::before, .w-timeline::after { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--w-line); }
.w-timeline::after { background: var(--w-main); transform-origin: top; transform: scaleY(var(--sp, 0)); }
.w-timeline li { position: relative; display: grid; gap: 6px; }
.w-tl-dot {
  position: absolute; left: -52px; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 2px solid var(--w-line2);
  font: 600 15px/1 var(--w-display); color: var(--w-ink2); transition: background-color .4s, border-color .4s, color .4s;
}
.w-timeline li.is-on .w-tl-dot { background: var(--w-main); border-color: var(--w-main); color: #fff; }
.w-timeline small { font: 500 11.5px/1 var(--w-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--w-main); margin-top: 11px; }
.w-timeline h3 { font: 600 24px/1.15 var(--w-display); letter-spacing: -.02em; }
.w-timeline p { font: 400 16px/1.6 var(--w-body); color: var(--w-ink2); max-width: 40ch; }
@media (min-width: 900px) {
  .w-timeline { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 64px 0 0; }
  .w-timeline::before, .w-timeline::after { left: 20px; right: 20px; top: 19px; bottom: auto; width: auto; height: 2px; }
  .w-timeline::after { transform-origin: left; transform: scaleX(var(--sp, 0)); }
  .w-tl-dot { left: 0; top: -64px; }
  .w-timeline small { margin-top: 0; }
}
.w-portal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  margin-top: clamp(48px, 6vw, 72px); padding: 22px 24px; border-radius: 22px;
  background: var(--w-soft); border: 1px solid var(--w-line2); text-decoration: none;
  font: 400 16px/1.5 var(--w-body); color: var(--w-ink2) !important; transition: border-color .3s, background-color .3s;
}
.w-portal strong { color: var(--w-ink); font-weight: 600; }
.w-portal:hover { border-color: var(--w-main); background: #fff; }
.w-portal-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--w-main); border: 1px solid var(--w-line2); }
.w-portal-icon svg { width: 26px; height: 26px; }
.w-portal .w-arr { color: var(--w-main); font-size: 20px; }

/* ═══ 11 · VRAGEN ════════════════════════════════════════════ */
.w-faq-sec { padding-top: 0; }
.w-faq-grid { display: grid; gap: 36px; }
@media (min-width: 1000px) { .w-faq-grid { grid-template-columns: 1fr 1.25fr; gap: 80px; } }
.w-faq-grid .w-lead { margin-top: 22px; }
.w-faq { border-top: 1px solid var(--w-line2); }
.w-qa { border-bottom: 1px solid var(--w-line2); }
.w-qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; list-style: none;
  padding: 24px 0; font: 600 clamp(18px, 1.5vw, 21px)/1.35 var(--w-display); letter-spacing: -.01em; color: var(--w-ink);
}
.w-qa summary::-webkit-details-marker { display: none; }
.w-qa-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--w-line2); transition: background-color .3s, border-color .3s, transform .5s var(--w-ease); }
.w-qa-plus::before, .w-qa-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--w-ink); transform: translate(-50%, -50%); transition: background-color .3s; }
.w-qa-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.w-qa[open] .w-qa-plus { background: var(--w-main); border-color: var(--w-main); transform: rotate(45deg); }
.w-qa[open] .w-qa-plus::before, .w-qa[open] .w-qa-plus::after { background: #fff; }
.w-qa-a p { padding: 0 54px 26px 0; font: 400 16.5px/1.65 var(--w-body); color: var(--w-ink2); }

/* ═══ 12 · AFSLUITER ═════════════════════════════════════════ */
.w-cta { padding: 0 0 clamp(70px, 9vw, 120px); }
.w-cta-card {
  position: relative; overflow: hidden; display: grid; gap: 40px; align-items: center;
  padding: clamp(36px, 6vw, 84px); border-radius: 32px; background: var(--w-cta-bg); color: #fff;
}
.w-cta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 500px at 100% 0%, rgba(111, 184, 178, .45), transparent 60%), radial-gradient(700px 500px at 0% 120%, rgba(13, 43, 44, .45), transparent 60%);
}
@media (min-width: 1000px) { .w-cta-card { grid-template-columns: 1.5fr 1fr; gap: 64px; } }
.w-cta-text { position: relative; }
.w-cta .w-h2 { color: #fff; font-size: clamp(40px, 5.6vw, 86px); }
.w-cta-text > p { font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--w-body); color: rgba(255, 255, 255, .86); margin-top: 22px; max-width: 46ch; }
.w-btn-light { background: #fff; color: var(--w-main) !important; }
.w-btn-light:hover { background: var(--w-soft); }
.w-btn-line { border: 1px solid rgba(255, 255, 255, .5); color: #fff !important; }
.w-btn-line:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.w-cta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px !important; }
.w-cta-pills li { padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .12); font: 500 13.5px/1 var(--w-body); color: #fff; }
.w-cta-pills li:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7ee2a8; margin-right: 8px; vertical-align: 1px; }
.w-clock { position: relative; justify-self: center; width: min(320px, 70vw); }
.w-clock svg { width: 100%; height: auto; display: block; overflow: visible; }
.w-clock-face { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.w-clock-ticks line { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; stroke-linecap: round; }
.w-clock-ticks line.big { stroke: #fff; stroke-width: 2.4; }
.w-clock-h line { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.w-clock-m line { stroke: #fff; stroke-width: 3.2; stroke-linecap: round; }
.w-clock-s line { stroke: var(--w-cta-hand); stroke-width: 1.4; stroke-linecap: round; }
.w-clock-s circle { fill: var(--w-cta-hand); }
.w-clock [data-hand] { transform-origin: 100px 100px; }
.w-clock-label { display: block; text-align: center; margin-top: 14px; font: 500 11.5px/1 var(--w-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.w-area { display: grid; gap: 10px; margin-top: 40px; text-align: center; font: 400 15px/1.6 var(--w-body); color: var(--w-ink2); }
.w-area strong { color: var(--w-ink); }
.w-area-list { font-size: 13.5px; max-width: 900px; margin-inline: auto !important; }

/* ── Mobiel fijnslijpen ─────────────────────────────────────── */
@media (max-width: 899px) {
  .w-spot-card { padding: 8px 11px 9px; border-radius: 13px; }
  .w-spot-card strong { font-size: 13px; }
  .w-spot-card em { font-size: 11.5px; }
  .w-spot-card small { font-size: 9.5px; }
  .w-spot-dot { width: 18px; height: 18px; }
  .w-spot-dot::before { inset: 5px; }
  .w-spot { gap: 8px; transform: translate(-9px, -50%); }
  .w-spot.is-left { transform: translate(calc(-100% + 9px), -50%); }
  .w-btn { min-height: 52px; padding: 0 22px; font-size: 15.5px; }
  .w-actions .w-btn { flex: 1 1 auto; }
  .w-hero-side .w-actions { flex-direction: column; }
}

/* ── Minder beweging ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .w-line > span, .w-hero-side, .w-frame, [data-reveal] { transform: none !important; opacity: 1 !important; transition: none !important; }
  .w-livebar-track, .w-flow, .w-spot-dot::after { animation: none !important; }
  .w-stage { height: auto !important; }
  .w-frame { position: relative !important; height: min(118vw, 640px) !important; margin: 0 16px !important; border-radius: 24px !important; clip-path: none !important; }
  .w-story-track { height: auto !important; }
  .w-story-sticky { position: relative !important; height: auto !important; padding: 80px 0; }
  .w-step { opacity: 1 !important; transform: none !important; pointer-events: auto !important; grid-area: auto !important; }
  .w-steps-stack { gap: 56px !important; }
  .w-story-photos { display: none !important; }
  .w-step-img { display: block !important; }
  .w-chart-box .bar { transform: none !important; }
  .w-chart-box .soc { stroke-dashoffset: 0 !important; }
  .w-rev-row, .w-mq-row { width: auto; overflow-x: auto; }
  .w-rev-row .w-mq-set + .w-mq-set, .w-mq-row .w-mq-set + .w-mq-set { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .w-frame { margin: 0 auto !important; width: min(1240px, calc(100% - 96px)); height: 78vh !important; }
  .w-daynight { top: 16px !important; left: 16px !important; }
  .w-livebar { bottom: 22px !important; max-width: calc(100% - 40px) !important; }
  .w-scene-note { margin-top: 14px !important; }
}

/* ═══ ACCENTEN ══════════════════════════════════════════════ */
.w-cta-em { color: var(--w-cta-em); }

/* Gedeelde sitetokens en onderdelen (futuristic/site-premium.css) op deze pagina
   laten meekleuren. body.site-premium zet zelf ook tokens, vandaar de zwaardere selector. */
body.wow-home.site-premium {
  --accent: var(--w-main); --accent-2: var(--w-main); --volt: var(--w-main); --volt-soft: var(--w-main);
  --warn: var(--w-main); --ink: var(--w-ink); --ink-soft: var(--w-ink2); --ink-faint: var(--w-ink2);
  --grad: linear-gradient(135deg, var(--w-main), var(--w-main));
}
body.wow-home.site-premium .nav-cta, body.wow-home.site-premium #amChatSend, body.wow-home.site-premium .am-chat-avatar,
body.wow-home.site-premium .am-chat-fab-badge, body.wow-home.site-premium .scroll-progress { background: var(--w-main) !important; }
body.wow-home.site-premium .am-mobile-cta a:first-child { background: var(--w-main) !important; border-color: var(--w-main) !important; }
body.wow-home.site-premium .nav-cta { border-color: var(--w-main) !important; }
body.wow-home.site-premium .am-chat-fab svg, body.wow-home.site-premium .am-chat-fab svg path { stroke: var(--w-main) !important; }
body.wow-home.site-premium .nav-dropdown-heading, body.wow-home.site-premium .am-chat-quick-btn,
body.wow-home.site-premium .am-chat-header-status, body.wow-home.site-premium .am-chat-header-dot,
body.wow-home.site-premium .am-wa-fab { color: var(--w-main) !important; }
body.wow-home.site-premium #am-cookie-panel a { color: var(--w-main) !important; }
body.wow-home.site-premium #am-cookie-panel button[data-choice=yes] { background: var(--w-main) !important; border-color: var(--w-main) !important; }