/* =========================================================
   MYTRONICS - stylesheet
   ---------------------------------------------------------
   Inhoud:
    1. Huisstijl (kleuren en lettertypes)  <-- hier pas je de kleuren aan
    2. Basis
    3. Knoppen, labels en kleine onderdelen
    4. Header en mobiel menu
    5. Hero (homepage)
    6. Lopende tekstbanden
    7. Diensten
    8. Alles verbonden (huis)
    9. Cijfers
   10. Werkwijze
   11. Over ons en werkgebied
   12. Call-to-action
   13. Footer
   14. Dienstpagina's (hero en illustraties)
   15. Dienstpagina's (blokken)
   16. Veelgestelde vragen
   17. Contact en formulier
   18. Kleine pagina's (bedankt, 404, privacy)
   19. Verschijnen bij scrollen
   20. Responsive (tablet en mobiel)
   21. Minder beweging (toegankelijkheid)
   ========================================================= */


/* =========================================================
   1. HUISSTIJL
   ========================================================= */
:root {
  /* KLEUREN: pas deze waarden aan naar de kleuren van het Mytronics-logo.
     Alle andere kleuren op de site worden hier automatisch van afgeleid. */
  --merk: #d43434;           /* hoofdkleur (rood uit het logo): knoppen, accenten */
  --merk-tekst: #ffffff;     /* tekstkleur op de hoofdkleur */
  --merk-2: #ff6a5c;         /* tweede kleur (licht rood): 'stroom', highlights */
  --merk-2-tekst: #0c0c14;   /* tekstkleur op de tweede kleur */
  --inkt: #0c0c14;           /* zwart uit het logo: donkere achtergronden en tekst */
  --papier: #f5f5f6;         /* lichte achtergrond */
  --ok: #2fd27a;             /* groen voor 'aan' en 'in orde' in de animaties */

  /* Afgeleide kleuren (niet aanpassen) */
  --wit: #ffffff;
  --merk-zacht: color-mix(in srgb, var(--merk) 10%, #fff);
  --merk-licht: color-mix(in srgb, var(--merk) 75%, #fff);
  --merk-donker: color-mix(in srgb, var(--merk) 78%, #000);
  --tekst: var(--inkt);
  --tekst-zacht: color-mix(in srgb, var(--inkt) 66%, #fff);
  --lijn: color-mix(in srgb, var(--inkt) 11%, transparent);
  --inkt-licht: color-mix(in srgb, var(--inkt) 88%, #fff);
  --wit-zacht: rgba(255, 255, 255, .72);
  --wit-lijn: rgba(255, 255, 255, .12);

  /* LETTERTYPES: worden geladen via Google Fonts in de <head> van elke pagina */
  --font-kop: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Figtree", "Segoe UI", system-ui, sans-serif;

  /* Maten en effecten */
  --breedte: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --radius: 24px;
  --radius-s: 14px;
  --schaduw: 0 24px 60px -24px rgba(11, 21, 36, .28);
  --ease: cubic-bezier(.22, .8, .24, 1);
}


/* =========================================================
   2. BASIS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.4rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }

::selection { background: var(--merk-2); color: var(--merk-2-tekst); }

:focus-visible {
  outline: 3px solid var(--merk-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(100% - 2 * var(--rand), var(--breedte));
  margin-inline: auto;
}

.sectie { padding-block: clamp(80px, 10vw, 140px); position: relative; }
.sectie--wit { background: var(--wit); }
.sectie--donker { background: var(--inkt); color: var(--wit); }
.sectie--donker p:not(.label) { color: var(--wit-zacht); }

.accent { color: var(--merk); }
.sectie--donker .accent,
.hero .accent,
.pagina-hero .accent,
.cta .accent { color: var(--merk-licht); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--merk-2);
  color: var(--merk-2-tekst);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }

/* Leesvoortgang bovenaan de pagina */
.voortgang {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 200;
  background: linear-gradient(90deg, var(--merk), var(--merk-2));
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}


/* =========================================================
   3. KNOPPEN, LABELS EN KLEINE ONDERDELEN
   ========================================================= */
.knop {
  --k-bg: var(--merk);
  --k-tekst: var(--merk-tekst);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .95em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--k-bg);
  color: var(--k-tekst);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .35s var(--ease), color .35s var(--ease), box-shadow .35s;
}
/* Vulling die bij hover van onder naar boven schuift */
.knop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--merk-2);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform .45s var(--ease);
}
.knop:hover { transform: translateY(-2px); color: var(--merk-2-tekst); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--merk-2) 70%, transparent); }
.knop:hover::before { transform: translateY(0); }
.knop svg { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .35s var(--ease); }
.knop:hover svg { transform: translateX(4px); }

.knop--groot { padding: 1.15em 1.8em; font-size: 1.05rem; }
.knop--licht { --k-bg: var(--wit); --k-tekst: var(--inkt); }
.knop--rand {
  --k-bg: transparent;
  --k-tekst: var(--inkt);
  box-shadow: inset 0 0 0 1.5px var(--lijn);
}
.knop--rand-licht {
  --k-bg: rgba(255, 255, 255, .06);
  --k-tekst: var(--wit);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}

.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* Klein label boven een kop */
.label {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.2em;
  padding: .45em .95em;
  border-radius: 999px;
  background: var(--merk-zacht);
  color: var(--merk-donker);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label--licht {
  background: rgba(255, 255, 255, .08);
  color: var(--wit);
  box-shadow: inset 0 0 0 1px var(--wit-lijn);
}

/* Knipperend bolletje */
.puls {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--merk-2);
  flex-shrink: 0;
}
.puls::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--merk-2);
  animation: ping 1.8s var(--ease) infinite;
}

/* Lijstje met vinkjes */
.vinkjes { list-style: none; padding: 0; margin: 0 0 2em; display: grid; gap: .7em; }
.vinkjes li { display: flex; gap: .75em; align-items: flex-start; font-weight: 500; }
.vinkjes li::before {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: .12em;
  border-radius: 50%;
  background: var(--merk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.vinkjes--licht li { color: var(--wit); }

/* Chips (kleine labels in een rij) */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  padding: .35em .85em;
  border-radius: 999px;
  background: var(--papier);
  font-size: .85rem;
  font-weight: 600;
  color: var(--tekst-zacht);
}

/* Kop boven een sectie */
.sectie-kop { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.sectie-kop--midden { margin-inline: auto; text-align: center; }
.sectie-kop--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: end;
}
.sectie-kop--split h2 { margin-bottom: 0; }
.sectie-kop__tekst { font-size: 1.1rem; color: var(--tekst-zacht); margin: 0; }
.sectie--donker .sectie-kop__tekst { color: var(--wit-zacht); }


/* =========================================================
   4. HEADER EN MOBIEL MENU
   ========================================================= */
.kop {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: 14px;
  transition: transform .5s var(--ease);
}
.kop.is-verborgen { transform: translateY(-140%); }

.kop__balk {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
  padding: 0 10px 0 24px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  box-shadow: 0 12px 40px -14px rgba(11, 21, 36, .45);
  transition: box-shadow .3s;
}

.kop__logo { flex-shrink: 0; display: block; }
/* LOGO: hoogte van het logo in de header */
.kop__logo img { height: 46px; width: auto; }

.kop__nav { display: flex; gap: 2px; margin-left: auto; }
.kop__nav a {
  position: relative;
  padding: .6em 1em;
  border-radius: 999px;
  color: var(--inkt);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.kop__nav a:hover { background: var(--papier); }
.kop__nav a[aria-current="page"] { background: var(--merk-zacht); color: var(--merk-donker); }

.kop__acties { display: flex; align-items: center; gap: 8px; }
.kop__acties .knop { padding: .85em 1.3em; font-size: .95rem; }

.kop__tel {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em .9em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--inkt);
  white-space: nowrap;
  transition: background .25s;
}
.kop__tel:hover { background: var(--papier); }
.kop__tel svg { width: 18px; height: 18px; color: var(--merk); }

.kop__menu {
  display: none;
  position: relative;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--inkt);
}
.kop__menu span {
  position: absolute;
  left: 15px; right: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--wit);
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.kop__menu span:nth-child(1) { top: 19px; }
.kop__menu span:nth-child(2) { top: 27px; }
.menu-open .kop__menu span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .kop__menu span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

.mobiel-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px var(--rand) 40px;
  background: var(--inkt);
  color: var(--wit);
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0% at calc(100% - 50px) 50px);
  transition: clip-path .6s var(--ease), opacity .3s, visibility 0s .6s;
  overflow-y: auto;
}
.menu-open .mobiel-menu {
  visibility: visible;
  opacity: 1;
  clip-path: circle(150% at calc(100% - 50px) 50px);
  transition: clip-path .7s var(--ease), opacity .2s, visibility 0s;
}
.mobiel-menu nav { display: grid; gap: 4px; }
.mobiel-menu nav a {
  font-family: var(--font-kop);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .4s, transform .5s var(--ease), color .2s;
}
.mobiel-menu nav a:hover,
.mobiel-menu nav a[aria-current="page"] { color: var(--merk-licht); }
.menu-open .mobiel-menu nav a { opacity: 1; transform: none; }
.menu-open .mobiel-menu nav a:nth-child(1) { transition-delay: .15s; }
.menu-open .mobiel-menu nav a:nth-child(2) { transition-delay: .2s; }
.menu-open .mobiel-menu nav a:nth-child(3) { transition-delay: .25s; }
.menu-open .mobiel-menu nav a:nth-child(4) { transition-delay: .3s; }
.menu-open .mobiel-menu nav a:nth-child(5) { transition-delay: .35s; }
.menu-open .mobiel-menu nav a:nth-child(6) { transition-delay: .4s; }
.mobiel-menu__contact { display: grid; gap: 10px; margin-top: 40px; color: var(--wit-zacht); }
.mobiel-menu__contact a { color: var(--wit); font-weight: 600; text-decoration: none; }
.mobiel-menu__contact .knop { margin-top: 10px; justify-self: start; }


/* =========================================================
   5. HERO (HOMEPAGE)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 0 110px;
  background: var(--inkt);
  color: var(--wit);
  overflow: hidden;
}

/* Achtergrond: raster, gloed en stroomlijnen */
.hero__achtergrond { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 40%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 65% 40%, #000 25%, transparent 75%);
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.hero__blob--1 {
  width: 560px; height: 560px;
  top: -160px; right: -120px;
  background: var(--merk);
  opacity: .5;
  animation: zweef 16s ease-in-out infinite alternate;
}
.hero__blob--2 {
  width: 420px; height: 420px;
  bottom: -200px; left: 8%;
  background: var(--merk-2);
  opacity: .18;
  animation: zweef 20s ease-in-out infinite alternate-reverse;
}
.hero__gloed {
  position: absolute;
  left: var(--mx, 70%);
  top: var(--my, 40%);
  width: 640px; height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--merk) 26%, transparent), transparent 62%);
  transition: left .6s var(--ease), top .6s var(--ease);
}
.circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit path { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; }
.circuit circle { fill: var(--inkt); stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; }
.circuit .stroom path {
  stroke: var(--merk-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px var(--merk-2));
  animation: stroom 7s linear infinite;
}
.circuit .stroom path:nth-child(2) { animation-delay: -1.5s; animation-duration: 8s; }
.circuit .stroom path:nth-child(3) { animation-delay: -3s; animation-duration: 6s; }
.circuit .stroom path:nth-child(4) { animation-delay: -4.5s; animation-duration: 9s; }
.circuit .stroom path:nth-child(5) { animation-delay: -2.2s; }
.circuit .stroom path:nth-child(6) { animation-delay: -5.5s; animation-duration: 8.5s; }
.circuit .stroom path:nth-child(7) { animation-delay: -0.8s; animation-duration: 6.5s; }
.circuit .stroom path:nth-child(8) { animation-delay: -3.7s; }

.hero__inhoud {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: .35em; }
.hero__intro { max-width: 34em; font-size: 1.15rem; color: var(--wit-zacht); margin-bottom: 2em; }

/* Wisselend woord in de kop */
.roteer {
  display: block;
  height: 1.12em;
  overflow: hidden;
  padding-right: .1em;
}
.roteer__lijst { display: block; animation: roteer 12s var(--ease) infinite; }
.roteer__lijst > span {
  display: block;
  height: 1.12em;
  line-height: 1.12;
  background: linear-gradient(90deg, var(--merk-licht), var(--merk-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__punten {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 2.2em 0 0;
  padding: 0;
  font-size: .95rem;
  color: var(--wit-zacht);
}
.hero__punten li { display: flex; align-items: center; gap: .5em; }
.hero__punten svg { width: 18px; height: 18px; color: var(--merk-2); }

/* Scroll-indicator */
.hero__scroll {
  position: absolute;
  left: 50%; bottom: 28px;
  width: 26px; height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
}
.hero__scroll span {
  position: absolute;
  left: 50%; top: 8px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--wit);
  animation: scrollwiel 1.8s var(--ease) infinite;
}

/* Rechterkant: zwevende 'smart home'-widgets */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  container-type: inline-size;
  --px: 0;
  --py: 0;
}
.hero__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__lijnen path { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; stroke-dasharray: 4 6; }
.hero__lijnen .puls-lijn {
  stroke: var(--merk-2);
  stroke-width: 2.5;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  animation: stroom 3s linear infinite;
}
.hero__lijnen .puls-lijn:nth-of-type(6) { animation-delay: -.8s; }
.hero__lijnen .puls-lijn:nth-of-type(7) { animation-delay: -1.6s; }
.hero__lijnen .puls-lijn:nth-of-type(8) { animation-delay: -2.3s; }

.hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 17cqw; height: 17cqw;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--merk), var(--merk-donker));
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .04), 0 20px 60px -10px var(--merk);
  color: var(--wit);
}
.hub svg { width: 42%; height: 42%; position: relative; z-index: 1; }
.hub__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--merk-licht);
  animation: ping 2.6s var(--ease) infinite;
}
.hub__ring:nth-child(2) { animation-delay: 1.3s; }

.widget {
  --diepte: 1;
  position: absolute;
  padding: 4.2cqw;
  border-radius: 4.5cqw;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), color-mix(in srgb, var(--inkt) 78%, transparent);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  font-size: clamp(11px, 2.6cqw, 15px);
  line-height: 1.35;
  animation: dobber 6s ease-in-out infinite alternate;
  translate: calc(var(--px) * var(--diepte) * 14px) calc(var(--py) * var(--diepte) * 14px);
  transition: translate .8s var(--ease);
}
.widget--laden  { left: 0;   top: 5%;    width: 58%; }
.widget--alarm  { right: 0;  top: 1%;    width: 34%; animation-duration: 7s; animation-delay: -2s; text-align: center; }
.widget--camera { right: 0;  bottom: 2%; width: 50%; animation-duration: 6.5s; animation-delay: -4s; padding: 2.4cqw; }
.widget--kast   { left: 3%;  bottom: 3%; width: 42%; animation-duration: 5.5s; animation-delay: -1s; }

.widget__kop { display: flex; align-items: center; gap: .6em; font-weight: 600; }
.widget__kop--klein { font-size: .92em; }
.widget--camera .widget__kop { padding: .9em .6em .3em; }
.widget__icoon {
  display: grid; place-items: center;
  width: 2.2em; height: 2.2em;
  border-radius: .7em;
  background: var(--merk);
}
.widget__icoon svg { width: 60%; height: 60%; }
.status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  font-size: .82em;
  font-weight: 700;
}
.status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: knipper 1.4s infinite; }
.status--merk { background: color-mix(in srgb, var(--merk-licht) 18%, transparent); color: var(--merk-licht); }

.widget__groot {
  margin: .5em 0 .35em;
  font-family: var(--font-kop);
  font-size: 3.6em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.widget__groot small { font-size: .45em; color: var(--wit-zacht); margin-left: .1em; }
.widget__voet { display: flex; justify-content: space-between; gap: .5em; margin-top: .8em; font-size: .85em; color: var(--wit-zacht); }
.widget__sub { display: flex; align-items: center; justify-content: center; gap: .4em; font-size: .85em; color: var(--wit-zacht); }
.widget__sub svg { width: 1.2em; height: 1.2em; color: var(--merk-2); }
.widget--kast .widget__sub { justify-content: flex-start; margin-top: .8em; }
.widget--kast .widget__sub svg { color: var(--ok); }

.balk { height: .6em; border-radius: 1em; background: rgba(255, 255, 255, .1); overflow: hidden; }
.balk__vul {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 55%, var(--merk-licht)), var(--ok));
  transition: width .3s linear;
}

.alarm-icoon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.6em; height: 3.6em;
  margin: .2em auto .8em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--merk) 35%, transparent);
  color: var(--wit);
}
.alarm-icoon svg { width: 52%; height: 52%; position: relative; }
.alarm-icoon .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--merk-licht);
  animation: ping 2.2s var(--ease) infinite;
}
.alarm-icoon .ring:nth-child(2) { animation-delay: 1.1s; }
.widget--alarm strong { display: block; font-size: 1.1em; }

.camera-beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 2.6cqw;
  overflow: hidden;
  background: linear-gradient(180deg, #25252f, #121219);
}
.camera-beeld svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camera-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--merk-licht) 22%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--merk-licht) 60%, transparent);
  animation: scan 3.5s linear infinite;
}
.camera-live, .camera-tijd {
  position: absolute;
  top: .6em;
  padding: .2em .55em;
  border-radius: .4em;
  background: rgba(0, 0, 0, .45);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .05em;
}
.camera-live { left: .6em; display: flex; align-items: center; gap: .4em; }
.camera-live i { width: .55em; height: .55em; border-radius: 50%; background: #ff4d4d; animation: knipper 1s infinite; }
.camera-tijd { right: .6em; font-variant-numeric: tabular-nums; }
.camera-detectie {
  position: absolute;
  left: 58%; top: 34%;
  width: 16%; height: 52%;
  border: 1.5px solid var(--merk-2);
  border-radius: 4px;
  animation: detectie 3.5s ease-in-out infinite;
}

.groepen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; margin-top: .9em; }
.groepen i {
  position: relative;
  height: 2.6em;
  border-radius: .45em;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
}
.groepen i::after {
  content: "";
  position: absolute;
  left: 28%; right: 28%;
  top: 18%; height: 34%;
  border-radius: .25em;
  background: var(--ok);
  animation: schakel 7s var(--ease) infinite;
}
.groepen i:nth-child(2)::after { animation-delay: .25s; }
.groepen i:nth-child(3)::after { animation-delay: .5s; }
.groepen i:nth-child(4)::after { animation-delay: .75s; }
.groepen i:nth-child(5)::after { animation-delay: 1s; }
.groepen i:nth-child(6)::after { animation-delay: 1.25s; }
.groepen i:nth-child(7)::after { animation-delay: 1.5s; }
.groepen i:nth-child(8)::after { animation-delay: 1.75s; }


/* =========================================================
   6. LOPENDE TEKSTBANDEN
   ========================================================= */
.banden {
  position: relative;
  z-index: 2;
  margin-top: -54px;
  padding: 24px 0 10px;
  overflow: hidden;
}
.band {
  width: 106%;
  margin-left: -3%;
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
}
.band--merk {
  position: relative;
  z-index: 2;
  background: var(--merk);
  color: var(--merk-tekst);
  transform: rotate(-2deg);
  box-shadow: 0 20px 40px -20px rgba(11, 21, 36, .5);
}
.band--rand {
  margin-top: -1px;
  background: var(--inkt);
  color: var(--wit);
  transform: rotate(-2deg);
}
.band__spoor { display: flex; width: max-content; animation: band 38s linear infinite; }
.band__spoor--terug { animation-direction: reverse; animation-duration: 46s; }
.band__item {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font-family: var(--font-kop);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.band__item svg { width: .8em; height: .8em; color: var(--merk-2); }
.band--rand .band__item { color: rgba(255, 255, 255, .85); font-size: clamp(1.1rem, 2.2vw, 1.7rem); }


/* =========================================================
   7. DIENSTEN
   ========================================================= */
.diensten__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.dienst {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px 32px;
  border-radius: var(--radius);
  background: var(--wit);
  border: 1px solid var(--lijn);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
/* Lichtvlek die de muis volgt */
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--merk) 13%, transparent), transparent 45%);
  opacity: 0;
  transition: opacity .4s;
}
.spot:hover::before { opacity: 1; }
.dienst:hover { transform: translateY(-8px); box-shadow: var(--schaduw); border-color: color-mix(in srgb, var(--merk) 30%, transparent); }

.dienst__top { display: flex; justify-content: space-between; align-items: flex-start; }
.dienst__nr { font-family: var(--font-kop); font-weight: 700; color: var(--tekst-zacht); font-size: .95rem; }
.dienst__icoon {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--merk);
  color: var(--merk-tekst);
  transition: transform .6s var(--ease), border-radius .6s var(--ease);
}
.dienst__icoon svg { width: 38px; height: 38px; }
.dienst:hover .dienst__icoon { transform: rotate(-8deg) scale(1.06); border-radius: 50%; }
.dienst__icoon--laden svg { animation: flits 3s infinite; }
.dienst__icoon--schild svg { animation: dobber-klein 3s ease-in-out infinite alternate; }
.dienst__icoon--batterij svg { animation: gloei-icoon 2.6s ease-in-out infinite; }
@keyframes gloei-icoon { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px #fff); } }
.sectie--compact { padding-block: clamp(56px, 7vw, 90px); }
.dienst__icoon--lamp { position: relative; }
.dienst__icoon--lamp::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--merk-2);
  filter: blur(14px);
  opacity: 0;
  animation: gloei 3s ease-in-out infinite;
  z-index: -1;
}
.dienst h3 { font-size: 1.75rem; margin: 6px 0 0; }
.dienst p { color: var(--tekst-zacht); margin: 0; }
.dienst__meer {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  color: var(--merk-donker);
}
.dienst__meer svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.dienst:hover .dienst__meer svg { transform: translateX(6px); }
.dienst__groot {
  position: absolute;
  right: -10px; bottom: -40px;
  z-index: -1;
  font-family: var(--font-kop);
  font-size: 11rem;
  font-weight: 800;
  line-height: 1;
  color: var(--papier);
  transition: transform .6s var(--ease), color .4s;
}
.dienst:hover .dienst__groot { transform: translateY(-10px); color: var(--merk-zacht); }


/* =========================================================
   8. ALLES VERBONDEN (HUIS)
   ========================================================= */
.verbonden { overflow: hidden; }
.verbonden::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  right: -200px; top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--merk) 30%, transparent), transparent 65%);
  pointer-events: none;
}
.verbonden__grid {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.legenda { list-style: none; padding: 0; margin: 2em 0 0; display: grid; gap: 10px; }
.legenda__item {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--wit-lijn);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .03);
  text-align: left;
  transition: background .3s, border-color .3s, transform .4s var(--ease);
}
.legenda__item:hover,
.legenda__item.is-actief {
  background: rgba(255, 255, 255, .08);
  border-color: color-mix(in srgb, var(--merk-licht) 60%, transparent);
  transform: translateX(6px);
}
.legenda__nr {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: .9rem;
  transition: background .3s, color .3s;
}
.legenda__item.is-actief .legenda__nr { background: var(--merk-2); color: var(--merk-2-tekst); }
.legenda__item strong { display: block; font-size: 1.05rem; }
.legenda__item small { display: block; color: var(--wit-zacht); font-size: .92rem; line-height: 1.5; margin-top: 2px; }

.huis { position: relative; }
.huis__svg { width: 100%; height: auto; overflow: visible; }
.huis__lijnen path {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.huis__lijnen path:nth-child(odd) { transition-delay: .2s; }
.huis__lijnen path:nth-child(3n) { transition-delay: .45s; }
.huis.is-zichtbaar .huis__lijnen path { stroke-dashoffset: 0; }
.huis__vlak { fill: rgba(255, 255, 255, .03); }

.deel { transition: opacity .4s; }
.deel__vorm { fill: rgba(255, 255, 255, .08); stroke: var(--merk-licht); stroke-width: 2; stroke-linejoin: round; }
.deel__accent { fill: var(--merk-2); }
.deel__kegel { fill: var(--merk-licht); opacity: .24; transform-box: fill-box; transform-origin: 100% 0; animation: veeg 5s ease-in-out infinite alternate; }
.deel__stroom {
  fill: none;
  stroke: var(--merk-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  opacity: .35;
  animation: stroom-kort 1.2s linear infinite;
}
.deel__xray { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; stroke-dasharray: 4 4; }
.huis[data-actief] .deel { opacity: .25; }
.huis[data-actief="laadpaal"] .deel--laadpaal,
.huis[data-actief="beveiliging"] .deel--beveiliging,
.huis[data-actief="meterkast"] .deel--meterkast,
.huis[data-actief="batterij"] .deel--batterij { opacity: 1; }
.deel__paneel { fill: none; stroke: var(--merk-licht); stroke-width: 1.5; }
.deel__ok { fill: var(--ok); animation: knipper 2.6s ease-in-out infinite; }
.deel__ok + .deel__ok { animation-delay: -1.3s; }
.huis[data-actief] .deel .deel__stroom { opacity: 1; }

.hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px; height: 22px;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--merk-2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--merk-2) 30%, transparent);
  transition: transform .3s var(--ease);
}
.hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--merk-2);
  animation: ping 2s var(--ease) infinite;
}
.hotspot:hover, .hotspot.is-actief { transform: scale(1.3); }


/* =========================================================
   9. CIJFERS
   ========================================================= */
.cijfers { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.cijfers__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cijfer {
  padding: clamp(36px, 5vw, 60px) clamp(16px, 2.5vw, 32px);
  border-left: 1px solid var(--lijn);
}
.cijfer:first-child { border-left: 0; padding-left: 0; }
.cijfer__getal {
  display: block;
  font-family: var(--font-kop);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.cijfer__getal em { font-style: normal; color: var(--merk); }
.cijfer__label { display: block; margin-top: 12px; color: var(--tekst-zacht); max-width: 15em; }


/* =========================================================
   10. WERKWIJZE
   ========================================================= */
.stappen {
  --voortgang: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stappen__lijn {
  position: absolute;
  top: 31px; left: 32px; right: 32px;
  height: 2px;
  background: var(--lijn);
}
.stappen__lijn span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--merk), var(--merk-2));
  transform-origin: left;
  transform: scaleX(var(--voortgang));
}
.stap { position: relative; }
.stap__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--lijn);
  font-family: var(--font-kop);
  font-size: 1.25rem;
  font-weight: 700;
  transition: background .5s var(--ease), color .5s, border-color .5s, transform .5s var(--ease);
}
.stap.is-bereikt .stap__nr {
  background: var(--merk);
  border-color: var(--merk);
  color: var(--merk-tekst);
  transform: scale(1.08);
  box-shadow: 0 0 0 8px var(--merk-zacht);
}
.stap h3 { margin-bottom: .4em; }
.stap p { color: var(--tekst-zacht); margin: 0; }


/* =========================================================
   11. OVER ONS EN WERKGEBIED
   ========================================================= */
.over { overflow: hidden; overflow: clip; }
.over__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.over__tekst p:not(.label) { color: var(--tekst-zacht); font-size: 1.08rem; }
.over__tekst .vinkjes { margin-top: 1.8em; }

.werkgebied { position: relative; }
.radar {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 32.5%, var(--lijn) 33% 33.3%, transparent 33.8% 65.5%, var(--lijn) 66% 66.3%, transparent 66.8%),
    radial-gradient(circle, var(--merk-zacht), var(--wit) 70%);
  border: 1px solid var(--lijn);
  container-type: inline-size;
}
.radar__veeg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--merk) 30%, transparent), transparent 22%);
  animation: draai 6s linear infinite;
}
.radar__golf {
  position: absolute;
  left: 50%; top: 50%;
  width: 16%; height: 16%;
  margin: -8% 0 0 -8%;
  border-radius: 50%;
  border: 2px solid var(--merk);
  animation: golf 4s var(--ease) infinite;
}
.radar__golf:nth-child(3) { animation-delay: 2s; }
.radar__pin {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: clamp(.8rem, 3.6cqw, 1.05rem);
  font-family: var(--font-kop);
}
.radar__pin i {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--merk);
  box-shadow: 0 0 0 6px var(--merk-zacht), 0 0 0 12px color-mix(in srgb, var(--merk) 8%, transparent);
}
.radar__plaats {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .3em .7em;
  border-radius: 999px;
  background: var(--wit);
  box-shadow: 0 6px 18px -8px rgba(11, 21, 36, .35);
  font-size: clamp(.68rem, 2.6cqw, .85rem);
  font-weight: 600;
  white-space: nowrap;
  animation: dobber-klein 4s ease-in-out infinite alternate;
  animation-delay: var(--v, 0s);
}
.radar__plaats::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--merk-2); }
.werkgebied__kaartje {
  position: absolute;
  right: 0; top: 0;
  max-width: 250px;
  padding: 18px 20px;
  border-radius: var(--radius-s);
  background: var(--inkt);
  color: var(--wit);
  box-shadow: var(--schaduw);
}
.werkgebied__kaartje strong { display: block; font-family: var(--font-kop); font-size: 1.15rem; }
.werkgebied__kaartje span { font-size: .92rem; color: var(--wit-zacht); }


/* =========================================================
   12. CALL-TO-ACTION
   ========================================================= */
.cta { padding-block: clamp(60px, 8vw, 110px); }
.cta__kaart {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  padding: clamp(36px, 6vw, 80px);
  border-radius: 32px;
  background: var(--inkt);
  color: var(--wit);
}
.cta__kaart h2 { margin-bottom: .4em; }
.cta__kaart p:not(.label) { color: var(--wit-zacht); margin: 0; font-size: 1.1rem; }
.cta__achtergrond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__achtergrond::before,
.cta__achtergrond::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.cta__achtergrond::before {
  width: 480px; height: 480px;
  right: -60px; top: -160px;
  background: var(--merk);
  opacity: .6;
  animation: zweef 14s ease-in-out infinite alternate;
}
.cta__achtergrond::after {
  width: 360px; height: 360px;
  left: -100px; bottom: -220px;
  background: var(--merk-2);
  opacity: .22;
  animation: zweef 18s ease-in-out infinite alternate-reverse;
}
.cta__bolt {
  position: absolute;
  right: -40px; top: -40px;
  width: 340px; height: 340px;
  color: rgba(255, 255, 255, .05);
  animation: dobber 7s ease-in-out infinite alternate;
}
.cta__acties { display: grid; gap: 18px; justify-items: start; }
.cta__tel {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--wit);
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}
.cta__tel small { display: block; font-family: var(--font-tekst); font-size: .85rem; font-weight: 500; color: var(--wit-zacht); }
.cta__tel-icoon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background .3s, transform .4s var(--ease);
}
.cta__tel-icoon svg { width: 22px; height: 22px; }
.cta__tel:hover .cta__tel-icoon { background: var(--merk-2); color: var(--merk-2-tekst); transform: rotate(-12deg); }


/* =========================================================
   13. FOOTER
   ========================================================= */
.voet {
  position: relative;
  overflow: hidden;
  padding-top: clamp(60px, 8vw, 100px);
  background: var(--inkt);
  color: var(--wit-zacht);
  font-size: .98rem;
}
.voet__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
.voet h3 {
  margin-bottom: 1.1em;
  font-family: var(--font-tekst);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wit);
}
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; }
.voet a { color: var(--wit-zacht); text-decoration: none; transition: color .2s; }
.voet a:hover { color: var(--wit); }
.voet address { font-style: normal; margin-bottom: .8em; }
.voet__over p { max-width: 22em; margin-top: 1.3em; }
.voet__contact a { color: var(--wit); font-weight: 600; }

/* Logo op een wit vlak, zodat elk logo goed leesbaar is op donker */
.logo-chip { display: inline-block; padding: 12px 18px; border-radius: 16px; background: var(--wit); }
.logo-chip img { height: 46px; width: auto; }

.voet__merk {
  margin-top: clamp(40px, 6vw, 80px);
  font-family: var(--font-kop);
  font-size: clamp(3.5rem, 17.5vw, 15.5rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.05em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(100deg, rgba(255, 255, 255, .06) 30%, color-mix(in srgb, var(--merk-licht) 50%, transparent) 50%, rgba(255, 255, 255, .06) 70%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: glans 9s linear infinite;
  user-select: none;
}
.voet__onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--wit-lijn);
  font-size: .9rem;
}
.voet__onder div { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* Ruimte voor de WhatsApp-knop rechtsonder, zodat die de footerlinks niet bedekt */
@media (min-width: 721px) { .voet__onder { padding-right: 96px; } }


/* =========================================================
   14. DIENSTPAGINA'S: HERO EN ILLUSTRATIES
   ========================================================= */
.pagina-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(140px, 16vw, 190px) 0 clamp(70px, 9vw, 120px);
  background: var(--inkt);
  color: var(--wit);
}
.pagina-hero--klein { padding-bottom: clamp(60px, 7vw, 90px); }
.pagina-hero--klein .hero__intro { margin-bottom: 0; }
.pagina-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pagina-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); margin-bottom: .4em; }

.kruimel { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1.6em; font-size: .9rem; color: var(--wit-zacht); }
.kruimel a { color: var(--wit); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }

.illustratie { position: relative; max-width: 520px; width: 100%; justify-self: end; }
.ill { width: 100%; height: auto; overflow: visible; }
.ill__lijn { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 2; stroke-linecap: round; }
.ill__vlak { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.ill__merk { fill: var(--merk); }
.ill__merk-lijn { fill: none; stroke: var(--merk-licht); stroke-width: 2; }
.ill__scherm { fill: var(--inkt); stroke: var(--merk-licht); stroke-width: 1.5; }
.ill__tekst { fill: var(--wit); font-family: var(--font-kop); font-weight: 700; font-size: 16px; }
.ill__tekst--klein { font-size: 11px; font-weight: 600; fill: var(--merk-2); font-family: var(--font-tekst); }
.ill__kabel { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 5; stroke-linecap: round; }
.ill__deeltje { fill: var(--merk-2); filter: drop-shadow(0 0 5px var(--merk-2)); }
.ill__led { fill: var(--merk-2); animation: knipper 1.4s infinite; }
.ill__raam { fill: rgba(255, 255, 255, .12); }
.ill__wiel { fill: var(--inkt); stroke: rgba(255, 255, 255, .5); stroke-width: 6; }
.ill__batt-vul { fill: var(--ok); transform-box: fill-box; transform-origin: left center; transition: transform .3s linear; }

/* Camera: kegel beweegt heen en weer */
.ill-cam { transform-origin: 86px 83px; animation: camera 6s ease-in-out infinite alternate; }
.ill-cam__kegel { fill: url(#kegel-verloop); }
.ill-detectie { animation: detectie 3s ease-in-out infinite; }
.ill-detectie__kader { fill: none; stroke: var(--merk-2); stroke-width: 2; stroke-dasharray: 8 5; }
.ill-detectie__persoon { fill: rgba(255, 255, 255, .25); }
.ill-check { fill: none; stroke: var(--wit); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: teken 4s var(--ease) infinite; }
.ill-ring { fill: none; stroke: var(--merk-licht); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping-svg 3s var(--ease) infinite; }
.ill-ring:nth-of-type(2) { animation-delay: 1.5s; }

/* Groepenkast: schakelaars gaan een voor een om */
.ill-groep rect:first-child { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.ill-groep__knop { fill: rgba(255, 255, 255, .35); transform-box: fill-box; transform-origin: center; animation: hendel 6s var(--ease) infinite; }
.ill-lamp-gloed { fill: var(--merk-2); filter: blur(14px); animation: gloei 3s ease-in-out infinite; }

/* Zwevende labels rond de illustratie */
.zweef-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--wit);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  animation: dobber 5s ease-in-out infinite alternate;
}
.zweef-chip svg { width: 16px; height: 16px; color: var(--merk-2); }
.zweef-chip--1 { top: 2%; left: 0; }
.zweef-chip--2 { top: 38%; right: -2%; animation-delay: -2s; }
.zweef-chip--3 { bottom: 0; left: 18%; animation-delay: -3.5s; }


/* =========================================================
   15. DIENSTPAGINA'S: BLOKKEN
   ========================================================= */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaart {
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--wit);
  border: 1px solid var(--lijn);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.kaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw); }
.kaart__icoon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--merk-zacht);
  color: var(--merk);
  transition: background .4s, color .4s, transform .5s var(--ease);
}
.kaart__icoon svg { width: 28px; height: 28px; }
.kaart:hover .kaart__icoon { background: var(--merk); color: var(--merk-tekst); transform: rotate(-8deg); }
.kaart h3 { font-size: 1.3rem; }
.kaart p { color: var(--tekst-zacht); margin: 0; }

/* Voor wie */
.doelgroepen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.doelgroep {
  padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--papier);
  border: 1px solid var(--lijn);
}
.doelgroep__kop { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.doelgroep__kop svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--inkt); color: var(--wit); }
.doelgroep h3 { margin: 0; }
.doelgroep .vinkjes { margin: 0; }
.doelgroep .vinkjes li { font-weight: 500; color: var(--tekst-zacht); }

/* Uitgelicht blok (donker, met animatie rechts) */
.uitgelicht__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}

/* Load balancing grafiek */
.grafiek {
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--wit-lijn);
}
.grafiek__vlak { position: relative; height: 280px; padding-top: 34px; }
.grafiek__max {
  position: absolute;
  left: 0; right: 0; top: 34px;
  border-top: 2px dashed var(--merk-2);
}
.grafiek__max span {
  position: absolute;
  right: 0; bottom: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--merk-2);
}
.grafiek__staven { display: flex; gap: 10px; height: 100%; }
.staaf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
}
.staaf__laad {
  flex: 1;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--merk-licht), var(--merk));
}
.staaf__huis {
  height: 30%;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  animation: verbruik 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.grafiek__legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: .9rem; color: var(--wit-zacht); }
.grafiek__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.grafiek__legenda i { width: 12px; height: 12px; border-radius: 3px; background: var(--merk); }
.grafiek__legenda i.huis-kleur { background: rgba(255, 255, 255, .28); }

/* Telefoon met meldingen */
.telefoon {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  aspect-ratio: 9 / 18.5;
  padding: 54px 14px 20px;
  border-radius: 46px;
  background: linear-gradient(160deg, var(--inkt-licht), var(--inkt));
  border: 10px solid #22222b;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}
.telefoon::before {
  content: "";
  position: absolute;
  left: 50%; top: 14px;
  width: 90px; height: 24px;
  margin-left: -45px;
  border-radius: 20px;
  background: #000;
}
.telefoon__tijd { text-align: center; font-family: var(--font-kop); font-size: 3.2rem; font-weight: 600; color: var(--wit); line-height: 1; margin-bottom: 4px; }
.telefoon__datum { text-align: center; font-size: .85rem; color: var(--wit-zacht); margin-bottom: 26px; }
.app-meldingen { display: grid; gap: 8px; }
.app-melding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  color: var(--wit);
  font-size: .78rem;
  line-height: 1.35;
  transition: opacity .5s, transform .6s var(--ease);
}
.js .app-melding { opacity: 0; transform: translateY(-14px) scale(.96); }
.js .app-melding.is-zichtbaar { opacity: 1; transform: none; }
.app-melding__icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--merk);
}
.app-melding__icoon svg { width: 17px; height: 17px; }
.app-melding strong { display: block; font-size: .82rem; }
.app-melding span { color: var(--wit-zacht); }
.app-melding time { margin-left: auto; color: var(--wit-zacht); font-size: .7rem; flex-shrink: 0; }

/* Meterkast-check */
.check-kaart {
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--radius);
  background: var(--wit);
  color: var(--inkt);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.check-kaart h3 { font-size: 1.5rem; }
.check-lijst { display: grid; gap: 10px; margin: 20px 0 24px; }
.check-optie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  background: var(--papier);
  cursor: pointer;
  font-weight: 500;
  transition: background .3s;
}
.check-optie:hover { background: var(--merk-zacht); }
.check-optie input { position: absolute; opacity: 0; pointer-events: none; }
.schakelaar {
  position: relative;
  flex-shrink: 0;
  width: 46px; height: 26px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--inkt) 18%, transparent);
  transition: background .3s;
}
.schakelaar::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--wit);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  transition: transform .35s var(--ease);
}
.check-optie input:checked + .schakelaar { background: var(--merk); }
.check-optie input:checked + .schakelaar::after { transform: translateX(20px); }
.check-optie input:focus-visible + .schakelaar { outline: 3px solid var(--merk-2); outline-offset: 2px; }
.check-meter { height: 10px; border-radius: 10px; background: var(--papier); overflow: hidden; }
.check-meter span {
  display: block;
  height: 100%;
  width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--merk), var(--merk-2));
  transition: width .6s var(--ease);
}
.sectie--donker p.check-uitslag { margin: 14px 0 0; font-weight: 600; min-height: 3.2em; color: var(--inkt); }
.check-uitslag a { color: var(--merk-donker); }


/* =========================================================
   16. VEELGESTELDE VRAGEN
   ========================================================= */
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.faq__lijst { border-top: 1px solid var(--lijn); }
.faq details { border-bottom: 1px solid var(--lijn); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--font-kop);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--merk-zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230c0c14' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .4s var(--ease), background-color .3s;
}
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--merk-2); }
.faq details p { margin: 0; padding: 0 60px 26px 0; color: var(--tekst-zacht); }
.faq details[open] p { animation: inschuif .5s var(--ease); }


/* =========================================================
   17. CONTACT EN FORMULIER
   ========================================================= */
.contact__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: start; }
.formulier-kaart {
  padding: clamp(28px, 4.5vw, 52px);
  border-radius: var(--radius);
  background: var(--wit);
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
  scroll-margin-top: 110px;
}
.formulier-kaart h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.formulier-kaart > p { color: var(--tekst-zacht); }
.formulier { display: grid; gap: 18px; margin-top: 26px; }
.velden-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.veld label, .veld legend { display: block; margin-bottom: 7px; font-size: .92rem; font-weight: 700; }
.veld input, .veld textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--lijn);
  border-radius: 12px;
  background: var(--papier);
  font-size: 1rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.veld textarea { resize: vertical; min-height: 140px; }
.veld input:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--merk);
  background: var(--wit);
  box-shadow: 0 0 0 4px var(--merk-zacht);
}
fieldset.veld { border: 0; padding: 0; margin: 0; min-width: 0; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze span {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .65em 1.1em;
  border: 1.5px solid var(--lijn);
  border-radius: 999px;
  background: var(--papier);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
}
.keuze span svg { width: 18px; height: 18px; color: var(--merk); }
.keuze:hover span { border-color: var(--merk); }
.keuze input:checked + span { background: var(--merk); border-color: var(--merk); color: var(--merk-tekst); }
.keuze input:checked + span svg { color: var(--merk-tekst); }
.keuze input:focus-visible + span { outline: 3px solid var(--merk-2); outline-offset: 2px; }

/* Onzichtbaar veld tegen spam (niet weghalen) */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulier .knop { justify-self: start; margin-top: 6px; }
.formulier__klein { font-size: .85rem; color: var(--tekst-zacht); margin: 0; }

.melding {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 600;
}
.melding--fout { background: #fdecec; color: #8a1c1c; border: 1px solid #f5c2c2; }
.melding--info { background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn); font-weight: 500; }

.contact__info { display: grid; gap: 20px; }
.info-kaart {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--wit);
  border: 1px solid var(--lijn);
}
.info-kaart h3 { font-size: 1.2rem; margin-bottom: .6em; }
.info-kaart p { color: var(--tekst-zacht); margin-bottom: .6em; }
.info-kaart--donker {
  position: relative;
  overflow: hidden;
  background: var(--inkt);
  color: var(--wit);
  border-color: transparent;
}
.info-kaart--donker p { color: var(--wit-zacht); }
.info-kaart--donker::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -90px; bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--merk) 60%, transparent), transparent 70%);
}
.info-regel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  border-top: 1px solid var(--lijn);
}
.info-kaart--donker .info-regel { border-color: var(--wit-lijn); }
.info-regel:first-of-type { border-top: 0; }
.info-regel svg {
  flex-shrink: 0;
  width: 42px; height: 42px;
  padding: 11px;
  border-radius: 12px;
  background: var(--merk-zacht);
  color: var(--merk);
}
.info-kaart--donker .info-regel svg { background: rgba(255, 255, 255, .1); color: var(--merk-2); }
.info-regel small { display: block; font-weight: 500; font-size: .82rem; opacity: .7; }
a.info-regel:hover span { text-decoration: underline; }


/* =========================================================
   18. KLEINE PAGINA'S (BEDANKT, 404, PRIVACY)
   ========================================================= */
.midden-pagina {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 140px var(--rand) 80px;
  background: var(--inkt);
  color: var(--wit);
  text-align: center;
  overflow: hidden;
}
.midden-pagina__inhoud { position: relative; max-width: 620px; }
.midden-pagina p { color: var(--wit-zacht); font-size: 1.12rem; }
.midden-pagina .knoppen { justify-content: center; margin-top: 2em; }

.vink-cirkel { width: 120px; height: 120px; margin: 0 auto 30px; }
.vink-cirkel circle { fill: none; stroke: var(--merk-licht); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: teken-een 1s var(--ease) .2s forwards; }
.vink-cirkel path { fill: none; stroke: var(--merk-2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: teken-een .7s var(--ease) 1s forwards; }

.lamp-404 { width: 120px; margin: 0 auto 20px; }
.lamp-404 .glas { fill: var(--merk-2); animation: flikker 3s infinite; }
.lamp-404 .voet-lamp { fill: rgba(255, 255, 255, .4); }
.groot-getal {
  font-family: var(--font-kop);
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
  margin-bottom: .1em;
  animation: flikker 4s infinite;
}

.tekstpagina { max-width: 780px; }
.tekstpagina h2 { font-size: 1.6rem; margin-top: 2em; }
.tekstpagina p, .tekstpagina li { color: var(--tekst-zacht); }
.tekstpagina ul { padding-left: 1.2em; }


/* =========================================================
   19. VERSCHIJNEN BIJ SCROLLEN
   (alleen als JavaScript aan staat, anders is alles direct zichtbaar)
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--vertraging, 0s);
}
.js .reveal--links { transform: translateX(-40px); }
.js .reveal--zoom { transform: scale(.94); }
.js .reveal.is-zichtbaar { opacity: 1; transform: none; }


/* =========================================================
   ANIMATIES (keyframes)
   ========================================================= */
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
@keyframes ping-svg { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes zweef { from { transform: translate(0, 0) scale(1); } to { transform: translate(-70px, 50px) scale(1.12); } }
@keyframes dobber { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes dobber-klein { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes stroom { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes stroom-kort { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes band { to { transform: translateX(-50%); } }
@keyframes knipper { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
@keyframes detectie { 0%, 30% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes schakel { 0%, 6% { transform: translateY(80%); opacity: .35; } 14%, 100% { transform: none; opacity: 1; } }
@keyframes scrollwiel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
@keyframes flits { 0%, 70%, 100% { opacity: 1; transform: none; } 75% { opacity: .3; } 80% { opacity: 1; transform: scale(1.12); } 85% { opacity: .5; } }
@keyframes gloei { 0%, 100% { opacity: .1; } 50% { opacity: .9; } }
@keyframes veeg { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes golf { from { transform: scale(1); opacity: .8; } to { transform: scale(6); opacity: 0; } }
@keyframes glans { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes camera { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes teken { 0% { stroke-dashoffset: 1; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes teken-een { to { stroke-dashoffset: 0; } }
@keyframes hendel { 0%, 8% { transform: translateY(9px); fill: rgba(255, 255, 255, .35); } 16%, 100% { transform: translateY(-9px); fill: var(--ok); } }
@keyframes verbruik { 0%, 100% { height: 22%; } 25% { height: 58%; } 50% { height: 34%; } 75% { height: 66%; } }
@keyframes inschuif { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes flikker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .2; } }
@keyframes roteer {
  0%, 20%    { transform: translateY(0); }
  25%, 45%   { transform: translateY(-1.12em); }
  50%, 70%   { transform: translateY(-2.24em); }
  75%, 95%   { transform: translateY(-3.36em); }
  100%       { transform: translateY(-4.48em); }
}


/* =========================================================
   20. RESPONSIVE (TABLET EN MOBIEL)
   ========================================================= */
@media (max-width: 1240px) {
  .kop__tel span { display: none; }
  .kop__tel { width: 46px; height: 46px; padding: 0; justify-content: center; background: var(--papier); }
}

@media (max-width: 1080px) {
  .kop__nav { display: none; }
  .kop__menu { display: block; }
  .kop__acties { margin-left: auto; }

  .hero__inhoud,
  .pagina-hero__grid { grid-template-columns: 1fr; }
  .hero__visual { justify-self: center; max-width: 520px; }
  .illustratie { justify-self: center; }

  .diensten__grid,
  .kaarten,
  .doelgroepen { grid-template-columns: 1fr 1fr; }

  .verbonden__grid,
  .uitgelicht__grid,
  .over__grid,
  .faq__grid,
  .contact__grid,
  .cta__kaart,
  .sectie-kop--split { grid-template-columns: 1fr; }

  .huis { order: -1; }
  .cijfers__grid { grid-template-columns: 1fr 1fr; }
  .cijfer:nth-child(3) { border-left: 0; padding-left: 0; }
  .cijfer:nth-child(n+3) { border-top: 1px solid var(--lijn); }
  .stappen { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .stappen__lijn { display: none; }
  .voet__grid { grid-template-columns: 1fr 1fr; }
  .werkgebied { max-width: 520px; width: 100%; margin-inline: auto; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .kop { padding-top: 10px; }
  .kop__balk { height: 60px; padding: 0 7px 0 16px; gap: 10px; }
  .kop__logo img { height: 38px; }
  .kop__acties .knop { display: none; }
  .kop__tel { width: 44px; height: 44px; }
  .kop__menu { width: 44px; height: 44px; }
  .kop__menu span { left: 13px; right: 13px; }
  .kop__menu span:nth-child(1) { top: 17px; }
  .kop__menu span:nth-child(2) { top: 25px; }
  .menu-open .kop__menu span:nth-child(1),
  .menu-open .kop__menu span:nth-child(2) { top: 21px; }

  .hero { padding: 120px 0 90px; min-height: 0; }
  .hero__blob--1 { width: 380px; height: 380px; top: -140px; right: -160px; opacity: .38; }
  .hero__intro { font-size: 1.05rem; }
  .hero__scroll { display: none; }
  .knoppen .knop { flex: 1 1 auto; }

  /* Widgets op mobiel in een raster in plaats van zwevend */
  .hero__visual {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    container-type: normal;
  }
  .hero__lijnen, .hub, .widget--camera { display: none; }
  .widget { position: relative; inset: auto; width: auto; padding: 18px; border-radius: 20px; font-size: 13px; translate: none; }
  .widget--laden { grid-column: 1 / -1; }
  .widget--alarm, .widget--kast { animation-name: none; }

  .banden { margin-top: -40px; }
  .diensten__grid,
  .kaarten,
  .doelgroepen,
  .velden-rij { grid-template-columns: 1fr; }
  .dienst { padding: 30px 24px 26px; }
  .dienst__groot { font-size: 8rem; }

  .cijfers__grid { grid-template-columns: 1fr 1fr; }
  .cijfer { padding: 28px 12px; }
  .cijfer:nth-child(even) { padding-left: 18px; }
  .cijfer__label { font-size: .9rem; }

  .stappen { grid-template-columns: 1fr; row-gap: 0; padding-left: 0; }
  .stap { display: grid; grid-template-columns: 64px 1fr; gap: 0 20px; padding-bottom: 34px; }
  .stap::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: var(--lijn); }
  .stap:last-child::before { display: none; }
  .stap__nr { grid-row: span 2; margin-bottom: 0; }

  .werkgebied__kaartje { position: relative; max-width: none; margin-top: 16px; top: auto; right: auto; }
  .faq summary { font-size: 1.08rem; padding: 20px 0; }
  .faq details p { padding-right: 0; }
  .voet__grid { grid-template-columns: 1fr; gap: 32px; }
  .cta__tel { font-size: 1.3rem; }
  .zweef-chip { font-size: .75rem; }
  .zweef-chip--2 { right: 0; }
  .info-kaart { padding: 24px; }
}


/* =========================================================
   21. MINDER BEWEGING
   Bezoekers die in hun systeem 'minder beweging' hebben aangezet,
   krijgen een rustige versie zonder animaties.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .roteer__lijst { animation: none; }
  .band__spoor { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .huis__lijnen path { stroke-dashoffset: 0; }
  .vink-cirkel circle, .vink-cirkel path, .ill-check { stroke-dashoffset: 0; }
}


/* =========================================================
   22. WHATSAPP-KNOP (rechtsonder op elke pagina)
   ========================================================= */
.whatsapp {
  --wa: #25d366;             /* officieel WhatsApp-groen */
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--inkt);
  text-decoration: none;
  animation: wa-in .7s var(--ease) 1s backwards;
  transition: opacity .3s;
}
.whatsapp__icoon {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .7), 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .45s var(--ease);
}
.whatsapp__icoon svg { width: 31px; height: 31px; }
.whatsapp__icoon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: ping 2.4s var(--ease) infinite;
}
.whatsapp:hover .whatsapp__icoon { transform: scale(1.08) rotate(-8deg); }
.whatsapp__label {
  padding: .65em 1.05em;
  border-radius: 999px;
  background: var(--wit);
  box-shadow: 0 10px 30px -10px rgba(12, 12, 20, .4);
  font-size: .92rem;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease);
  /* laat het label na een paar seconden een keer zien */
  animation: wa-hint 5s var(--ease) 2.8s backwards;
}
.whatsapp:hover .whatsapp__label,
.whatsapp:focus-visible .whatsapp__label { opacity: 1; transform: none; }
.menu-open .whatsapp { opacity: 0; pointer-events: none; }

@keyframes wa-in { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes wa-hint {
  0%       { opacity: 0; transform: translateX(10px); }
  12%, 82% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateX(10px); }
}

@media (max-width: 720px) {
  .whatsapp__icoon { width: 54px; height: 54px; }
  .whatsapp__icoon svg { width: 28px; height: 28px; }
  .whatsapp__label { display: none; }
  .voet__onder { padding-bottom: 92px; }
}


/* =========================================================
   23. KAART (GOOGLE MAPS) OP DE CONTACTPAGINA
   ========================================================= */
.maps {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  border-radius: var(--radius);
  background: var(--inkt);
  isolation: isolate;
}
/* Getekend voorbeeld van een kaart, tot de echte kaart geladen is */
.maps__voorbeeld {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(circle at 68% 50%, color-mix(in srgb, var(--merk) 35%, transparent), transparent 45%),
    var(--inkt);
}
.maps__weg {
  position: absolute;
  height: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.maps__weg--1 { left: -5%; right: -5%; top: 62%; transform: rotate(-8deg); }
.maps__weg--2 { width: 14px; height: auto; top: -10%; bottom: -10%; left: 64%; transform: rotate(14deg); }
.maps__weg--3 { left: 40%; right: -10%; top: 30%; height: 9px; transform: rotate(24deg); opacity: .7; }
.maps__water {
  position: absolute;
  left: -10%; right: -10%; top: 76%;
  height: 34px;
  background: color-mix(in srgb, var(--merk-licht) 18%, transparent);
  transform: rotate(-8deg);
}
.maps__pin {
  position: absolute;
  left: 68%; top: 50%;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: -64px 0 0 -32px;
  border-radius: 50% 50% 50% 0;
  background: var(--merk);
  color: var(--merk-tekst);
  transform: rotate(-45deg);
  box-shadow: 0 18px 40px -12px var(--merk);
  animation: pin-stuiter 2.4s var(--ease) infinite;
}
.maps__pin svg { width: 28px; height: 28px; transform: rotate(45deg); }
.maps__pin::after {
  content: "";
  position: absolute;
  left: -4px; bottom: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--merk-licht);
  animation: ping 2.4s var(--ease) infinite;
}
.maps__kaartje {
  position: absolute;
  left: clamp(16px, 4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: min(360px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  padding: 28px;
  border-radius: var(--radius-s);
  background: var(--wit);
  box-shadow: var(--schaduw);
}
.maps__kaartje strong { font-family: var(--font-kop); font-size: 1.5rem; letter-spacing: -.02em; }
.maps__kaartje > span { color: var(--tekst-zacht); }
.maps__kaartje small { color: var(--tekst-zacht); font-size: .8rem; line-height: 1.5; }
.maps__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.maps__knoppen .knop { padding: .8em 1.2em; font-size: .95rem; }

/* Na het klikken: echte kaart over de hele breedte, kaartje wordt kleiner */
.maps__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.maps.is-geladen .maps__kaartje { top: auto; bottom: 16px; left: 16px; transform: none; width: auto; padding: 16px 20px; gap: 4px; }
.maps.is-geladen .maps__kaartje strong { font-size: 1.1rem; }
.maps.is-geladen .maps__kaartje small,
.maps.is-geladen [data-maps-laden] { display: none; }

@keyframes pin-stuiter {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@media (max-width: 720px) {
  .maps { min-height: 0; display: flex; flex-direction: column; }
  .maps__voorbeeld { position: relative; height: 220px; flex-shrink: 0; }
  .maps__pin { left: 50%; top: 58%; }
  .maps__kaartje { position: relative; left: auto; top: auto; transform: none; width: auto; margin: -36px 12px 12px; }
  .maps.is-geladen { min-height: 420px; }
  .maps.is-geladen .maps__voorbeeld { display: none; }
  .maps.is-geladen .maps__kaartje { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
}


/* =========================================================
   24. UITKLAPMENU 'DIENSTEN' IN DE HEADER
   ========================================================= */
.kop__dropdown { position: relative; }
.kop__dropknop {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .6em 1em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--inkt);
  font-size: .95rem;
  font-weight: 600;
  transition: background .25s, color .25s;
}
.kop__dropknop svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.kop__dropknop:hover,
.kop__dropdown:focus-within .kop__dropknop { background: var(--papier); }
.kop__dropknop.is-actief { background: var(--merk-zacht); color: var(--merk-donker); }
.kop__dropmenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  width: 330px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 20px;
  background: var(--wit);
  box-shadow: 0 24px 60px -18px rgba(12, 12, 20, .45);
  border: 1px solid var(--lijn);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
/* onzichtbare brug zodat het menu open blijft als de muis omlaag beweegt */
.kop__dropmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.kop__dropdown:hover .kop__dropmenu,
.kop__dropdown:focus-within .kop__dropmenu,
.kop__dropdown.is-open .kop__dropmenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .25s, transform .35s var(--ease), visibility 0s;
}
.kop__dropdown:hover .kop__dropknop svg,
.kop__dropdown.is-open .kop__dropknop svg { transform: rotate(180deg); }
.kop__dropmenu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--inkt);
  text-decoration: none;
  transition: background .2s;
}
.kop__dropmenu a:hover,
.kop__dropmenu a[aria-current="page"] { background: var(--papier); }
.kop__dropmenu strong { display: block; font-size: .98rem; }
.kop__dropmenu small { display: block; color: var(--tekst-zacht); font-size: .82rem; }
.kop__dropicoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--merk-zacht);
  color: var(--merk);
  transition: background .25s, color .25s, transform .35s var(--ease);
}
.kop__dropicoon svg { width: 22px; height: 22px; }
.kop__dropmenu a:hover .kop__dropicoon { background: var(--merk); color: var(--merk-tekst); transform: rotate(-8deg); }
.menu-open .mobiel-menu nav a:nth-child(7) { transition-delay: .45s; }
.menu-open .mobiel-menu nav a:nth-child(8) { transition-delay: .5s; }


/* =========================================================
   25. THUISBATTERIJEN: ILLUSTRATIE EN DAG/NACHT-SCHEMA
   ========================================================= */
.ill-zon { transform-box: fill-box; transform-origin: center; }
.ill-zon__stralen { fill: none; stroke: var(--merk-2); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: draai 14s linear infinite; }
.ill-batterij-vul { fill: var(--ok); transform-box: fill-box; transform-origin: center bottom; transition: transform .3s linear; }
.ill-raam-licht { fill: var(--merk-2); animation: gloei 4s ease-in-out infinite; }

.energie {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--wit-lijn);
}
.energie__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); width: fit-content; max-width: 100%; }
.energie__tabs button {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1em;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--wit-zacht);
  font-weight: 650;
  font-size: .92rem;
  transition: background .3s, color .3s;
}
.energie__tabs button svg { width: 18px; height: 18px; }
.energie__tabs button[aria-selected="true"] { background: var(--wit); color: var(--inkt); }
.energie__schema { --niveau: .9; position: relative; aspect-ratio: 4 / 3; margin: 18px 0 10px; }
.energie__schema[data-fase="avond"] { --niveau: .35; }
.energie__schema[data-fase="nacht"] { --niveau: .65; }
.energie__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; }
.energie__lijnen path { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 10; transition: stroke .4s; }
[data-fase="dag"] .lijn-zon-huis,
[data-fase="dag"] .lijn-zon-bat,
[data-fase="avond"] .lijn-bat-huis,
[data-fase="nacht"] .lijn-net-bat { stroke: var(--merk-2); animation: stroom-kort .7s linear infinite; filter: drop-shadow(0 0 5px var(--merk-2)); }
.energie__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 92px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: var(--inkt-licht);
  border: 1px solid var(--wit-lijn);
  color: var(--wit-zacht);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  transition: border-color .4s, color .4s, box-shadow .4s;
}
.energie__node svg { width: 28px; height: 28px; color: var(--wit); }
.energie__node b { color: var(--wit); }
[data-fase="dag"] :is(.node-zon, .node-huis, .node-bat),
[data-fase="avond"] :is(.node-bat, .node-huis),
[data-fase="nacht"] :is(.node-net, .node-bat) {
  border-color: color-mix(in srgb, var(--merk-2) 60%, transparent);
  color: var(--wit);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--merk-2) 14%, transparent), 0 14px 30px -12px var(--merk);
}
[data-fase="dag"] .node-zon svg { color: var(--merk-2); animation: draai 10s linear infinite; }
.mini-batterij {
  position: relative;
  width: 30px; height: 46px;
  border-radius: 7px;
  border: 2px solid var(--wit);
  padding: 3px;
  display: flex;
  align-items: flex-end;
}
.mini-batterij::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 5px; margin-left: -6px; border-radius: 2px 2px 0 0; background: var(--wit); }
.mini-batterij i { display: block; width: 100%; height: calc(var(--niveau) * 100%); border-radius: 3px; background: var(--ok); transition: height 2.4s var(--ease); }
.energie__uitleg { margin: 0; min-height: 4.8em; color: var(--wit-zacht); }


/* =========================================================
   26. PROJECTEN (raster, filters en vergrote foto)
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filters[hidden] { display: none; }
.filter {
  padding: .7em 1.2em;
  border: 1.5px solid var(--lijn);
  border-radius: 999px;
  background: var(--wit);
  font-weight: 650;
  font-size: .95rem;
  transition: background .25s, border-color .25s, color .25s;
}
.filter:hover { border-color: var(--merk); }
.filter.is-actief { background: var(--inkt); border-color: var(--inkt); color: var(--wit); }
.projecten__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project { margin: 0; border-radius: var(--radius); background: var(--wit); border: 1px solid var(--lijn); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.project[hidden] { display: none; }
.project:hover { transform: translateY(-6px); box-shadow: var(--schaduw); }
.project__foto { display: block; width: 100%; padding: 0; border: 0; background: var(--papier); cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 3; }
.project__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.project:hover .project__foto img { transform: scale(1.06); }
.project figcaption { display: grid; gap: 4px; padding: 18px 20px 20px; }
.project figcaption strong { font-family: var(--font-kop); font-size: 1.15rem; letter-spacing: -.01em; }
.project figcaption span:last-child { color: var(--tekst-zacht); font-size: .92rem; }
.project__tag { justify-self: start; padding: .25em .7em; border-radius: 999px; background: var(--merk-zacht); color: var(--merk-donker); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.projecten__geen { margin: 10px 0 0; color: var(--tekst-zacht); }
.projecten__leeg {
  max-width: 620px;
  margin: 10px auto 0;
  padding: clamp(32px, 6vw, 60px);
  border-radius: var(--radius);
  background: var(--wit);
  border: 1.5px dashed color-mix(in srgb, var(--inkt) 18%, transparent);
  text-align: center;
}
.projecten__grid:has(.project) ~ .projecten__leeg { display: none; }
.projecten__leeg[hidden] { display: none; }
.projecten__leeg h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.projecten__leeg p { color: var(--tekst-zacht); }
.projecten__leeg-icoon { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 22px; background: var(--merk-zacht); color: var(--merk); animation: dobber-klein 3s ease-in-out infinite alternate; }
.projecten__leeg-icoon svg { width: 34px; height: 34px; }

.lightbox { max-width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: var(--inkt); color: var(--wit); overflow: hidden; }
.lightbox::backdrop { background: rgba(12, 12, 20, .82); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.lightbox__tekst { margin: 0; padding: 14px 20px 18px; color: var(--wit-zacht); }
.lightbox__sluit { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(12, 12, 20, .7); color: var(--wit); }
.lightbox__sluit svg { width: 22px; height: 22px; }


/* =========================================================
   27. MERKEN (logoslider) EN KEURMERKEN
   ========================================================= */
.merken { padding-block: clamp(56px, 7vw, 90px); background: var(--papier); overflow: hidden; }
.merken__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-bottom: 32px; }
.merken__titel { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.merken__band {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.merken__spoor { display: flex; gap: 16px; width: max-content; margin: 0; padding: 6px 0; list-style: none; animation: band 42s linear infinite; }
.merken__band:hover .merken__spoor { animation-play-state: paused; }
/* Een merk: logo (img) of, zolang er geen logo is, de naam als tekst */
.merk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 190px;
  height: 96px;
  padding: 0 26px;
  border-radius: 18px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.merk:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--merk) 35%, transparent); box-shadow: 0 16px 34px -18px rgba(12, 12, 20, .35); }
.merk { gap: 8px; }
.merk img { display: block; height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.merk img.merk__logo--hoog { height: 40px; }
.merk__naam { font-family: var(--font-kop); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--inkt); white-space: nowrap; }
.merk small { color: var(--tekst-zacht); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

.keurmerken { display: flex; flex-wrap: wrap; gap: 10px; }
.keurmerk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  font-size: .92rem;
  line-height: 1.25;
}
.keurmerk__icoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--merk); color: var(--merk-tekst); flex-shrink: 0; }
.keurmerk__icoon svg { width: 22px; height: 22px; }
.keurmerk img { height: 38px; width: auto; }
.keurmerk--logo { padding-left: 18px; gap: 12px; }
.keurmerk--logo img { height: 28px; width: auto; }
.keurmerk strong { display: block; }
.keurmerk small { display: block; color: var(--tekst-zacht); font-size: .8rem; }

/* Badge onder de knoppen in een donkere hero */
.hero__badge { display: inline-flex; align-items: center; gap: .6em; margin: 1.6em 0 0; padding: .55em 1em .55em .6em; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--wit-lijn); font-weight: 600; font-size: .95rem; }
.hero__badge svg { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--merk); color: var(--merk-tekst); }

/* Blok 'erkend beveiligingsbedrijf' op de beveiligingspagina */
.erkend { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); background: var(--wit); border: 1px solid var(--lijn); }
.erkend__icoon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: var(--merk); color: var(--merk-tekst); }
.erkend__icoon svg { width: 46px; height: 46px; }
.erkend h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .3em; }
.erkend p { margin: 0; color: var(--tekst-zacht); }

/* Regel 'Wij werken onder andere met ...' op dienstpagina's */
.merken-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; color: var(--tekst-zacht); font-weight: 500; }
.merken-regel span { padding: .35em .9em; border-radius: 999px; background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt); font-weight: 700; }

@media (max-width: 1080px) {
  .projecten__grid { grid-template-columns: 1fr 1fr; }
  .erkend { grid-template-columns: auto 1fr; }
  .erkend .keurmerken { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .projecten__grid { grid-template-columns: 1fr; }
  .merk { min-width: 150px; height: 84px; padding: 0 18px; }
  .merk__naam { font-size: 1.15rem; }
  .erkend { grid-template-columns: 1fr; }
  .energie__node { min-width: 74px; padding: 9px 8px 8px; font-size: .74rem; }
  .energie__node svg { width: 22px; height: 22px; }
  .mini-batterij { width: 24px; height: 36px; }
}

/* ==========================================================================
   Prestaties: zware effecten lichter gemaakt (zelfde uitstraling)
   - geen backdrop-filter meer (wordt bij elke animatie opnieuw berekend)
   - gloed-vlekken met een zachte radial-gradient in plaats van filter: blur()
   - animaties pauzeren zodra een sectie buiten beeld is (zie main.js)
   ========================================================================== */
.knop--rand-licht,
.kop__balk,
.widget,
.zweef-chip,
.app-melding {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.zweef-chip { background: rgba(28, 30, 44, .82); }
.app-melding { background: rgba(255, 255, 255, .14); }
.widget { background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), color-mix(in srgb, var(--inkt) 90%, transparent); }

.hero__blob,
.cta__achtergrond::before,
.cta__achtergrond::after {
  filter: none !important;
  will-change: transform;
}
.hero__blob--1 { width: 800px; height: 800px; top: -280px; right: -240px; background: radial-gradient(closest-side, var(--merk), transparent); }
.hero__blob--2 { width: 640px; height: 640px; bottom: -310px; left: calc(8% - 110px); background: radial-gradient(closest-side, var(--merk-2), transparent); }
.cta__achtergrond::before { width: 680px; height: 680px; right: -160px; top: -260px; background: radial-gradient(closest-side, var(--merk), transparent); }
.cta__achtergrond::after { width: 540px; height: 540px; left: -190px; bottom: -310px; background: radial-gradient(closest-side, var(--merk-2), transparent); }

.widget, .zweef-chip, .band__spoor, .merken__spoor { will-change: transform; }

/* Buiten beeld: alle animaties stilzetten */
.anim-pauze, .anim-pauze *, .anim-pauze *::before, .anim-pauze *::after { animation-play-state: paused !important; }