/* ==========================================================================
   vve-verzekering.nl — homepage
   Gebouwd naar design_handoff_vve_home (Home v2 Kelson, desktop 1440)
   ========================================================================== */

/* Kelson Sans: prototype-webfont via onlinewebfonts.com.
   LET OP: vóór livegang een eigen Kelson-webfontlicentie regelen of
   definitief voor Archivo kiezen (zie README handoff). */
@font-face {
  font-family: 'Kelson Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://db.onlinewebfonts.com/t/7993791590584c5850e664c4160f751c.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/7993791590584c5850e664c4160f751c.woff') format('woff');
}
@font-face {
  font-family: 'Kelson Sans';
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
  src: url('https://db.onlinewebfonts.com/t/cebdfb5b9e3c0042b857907cd56bac17.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/cebdfb5b9e3c0042b857907cd56bac17.woff') format('woff');
}

:root {
  /* Kleuren (design tokens uit handoff) */
  --blauw: #03558A;
  --blauw-hover: #023A5E;
  --footer-blauw: #00548E; /* het blauw van het logo (gesampled uit logo.png) */
  --tekst: #22303C;
  --tekst-secundair: #4A5B69;
  --tekst-gedempt: #8296A5;
  --vlak-licht: #F3F7FA;
  --rand: #D7E1E9;
  --rand-licht: #E1E8EE;
  --rand-input: #B7C6D2;
  --label-verplicht: #E4EEF5;
  --label-keuze: #EDF1F4;
  --groen: #3C763D;
  --licht-op-blauw: #D9E6F0;
  --licht-op-blauw-2: #9FB8C9;
  --footer-kop: #6E8FA5;

  --font: 'Kelson Sans', Archivo, sans-serif;
  --schaduw-kaart: 0 8px 32px rgba(2, 42, 68, 0.35);
  --radius-knop: 4px;
  --radius-kaart: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: var(--font);
  color: var(--tekst);
  font-size: 17px;
  line-height: 1.6;
}

html { scroll-behavior: smooth; }

h1, h2, h3 { font-family: var(--font); }

a { color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--blauw-hover); }

img { max-width: 100%; }

input::placeholder { color: #9AAAB8; font-size: 15px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--blauw);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: var(--radius-knop);
  border: 0;
  cursor: pointer;
  font-family: var(--font);
}
.btn:hover { background: var(--blauw-hover); color: #fff; }

.btn__pijl {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.18s ease;
}
.btn:hover .btn__pijl { transform: translateX(3px); }

/* Zachte puls op de primaire actieknoppen */
@keyframes btn-puls {
  0% { box-shadow: 0 0 0 0 rgba(3, 85, 138, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(3, 85, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 85, 138, 0); }
}
.btn--puls { animation: btn-puls 2.2s ease-out infinite; }

.btn--groot {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  padding: 14px;
}

/* Secundaire knop: blauwe rand, wit vlak */
.btn--lijn {
  background: #fff;
  color: var(--blauw);
  border: 1px solid var(--blauw);
  padding: 11px 20px;
  font-size: 15px;
}
.btn--lijn:hover {
  background: var(--vlak-licht);
  color: var(--blauw-hover);
  border-color: var(--blauw-hover);
}

/* CTA-regel onder een sectie */
.sectie__cta {
  text-align: center;
  margin-top: 44px;
}
.sectie__cta .btn {
  font-weight: 700;
  font-size: 17px;
  padding: 13px 28px;
}
.sectie__cta p {
  font-size: 14px;
  color: var(--tekst-secundair);
  margin: 10px 0 0;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--rand-licht); background: #fff; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header__logo { display: flex; align-items: center; text-decoration: none; }
.site-header__logo img { height: 44px; display: block; }

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}
.site-nav a { text-decoration: none; color: var(--tekst); font-size: 14px; }
.site-nav a:hover { color: var(--blauw-hover); }
.site-nav .site-nav__tel { color: var(--blauw); font-weight: 600; }
.tel-icoon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.site-nav a.btn { color: #fff; } /* wint anders van de nav-linkkleur */
.site-nav a.btn:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--blauw);
  position: relative;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 85, 138, 0.8);
  pointer-events: none;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 72px;
  padding-top: 64px;
  padding-bottom: 64px; /* evenveel ruimte onder de formulierkaart als erboven */
  align-items: stretch;
  position: relative;
  z-index: 1;
}
/* Intro direct onder de titel; Kifid en AFM onderaan het blok */
.hero__tekst {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px 0;
}
.hero__trust { margin-top: auto; }
.hero__tekst h1 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-wrap: pretty;
}
.hero__intro {
  font-size: 18px;
  color: var(--licht-op-blauw);
  margin: 0;
  max-width: 32em;
}
.hero__trust {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
/* Kifid-logo via CSS-filter wit gemaakt; in productie witte logovariant gebruiken */
.hero__kifid { height: 30px; display: block; filter: brightness(0) invert(1); }
.hero__chip {
  font-size: 13px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 6px 10px;
}

/* Formulierkaart (valt 64px over de volgende sectie) */
.formkaart {
  background: #fff;
  border-radius: var(--radius-kaart);
  box-shadow: var(--schaduw-kaart);
  padding: 28px 28px 24px;
  position: relative;
  z-index: 2;
}
.formkaart h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0 0 16px;
}

.stappenbalk {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  align-items: center;
}
.stappenbalk__stap {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--tekst-gedempt);
}
.stappenbalk__stap--actief { font-weight: 600; color: var(--blauw); }
.stappenbalk__nr {
  border: 1px solid #C4D2DD;
  color: var(--tekst-gedempt);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.stappenbalk__stap--actief .stappenbalk__nr {
  background: var(--blauw);
  border-color: var(--blauw);
  color: #fff;
}
.stappenbalk__lijn { flex: 1; height: 1px; background: var(--rand); }

.veldrij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.veld { display: block; font-size: 15px; font-weight: 600; color: var(--tekst); }
.veld input {
  margin-top: 6px;
  width: 100%;
  border: 1px solid var(--rand-input);
  border-radius: 4px;
  padding: 11px 12px;
  font-size: 17px;
  font-family: var(--font);
  color: var(--tekst);
}
.veld input:focus {
  outline: 2px solid var(--blauw);
  outline-offset: -1px;
}
.veld--marge { margin-bottom: 14px; }

.formkaart__hint { font-size: 14px; color: var(--tekst-secundair); margin: 6px 0 18px; }
.formkaart__bellen { font-size: 15px; color: var(--tekst-secundair); text-align: center; margin: 14px 0 0; }
.formkaart__bellen a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Beweging: hero-entree en elementen die in beeld schuiven bij het scrollen
   (alleen met JavaScript actief; uit bij prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@keyframes fade-omhoog {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
html.js .hero__tekst > * { animation: fade-omhoog 0.55s ease both; }
html.js .hero__tekst > *:nth-child(2) { animation-delay: 0.1s; }
html.js .hero__tekst > *:nth-child(3) { animation-delay: 0.2s; }
html.js .hero__tekst > *:nth-child(4) { animation-delay: 0.3s; }
html.js .formkaart { animation: fade-omhoog 0.55s ease 0.15s both; }

html.js .anim-wacht {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js .anim-wacht.zichtbaar { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Secties algemeen
   -------------------------------------------------------------------------- */
.sectie { padding-top: 80px; }
.sectie--eerste { padding-top: 80px; }
.sectie h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--blauw);
  margin: 0 0 32px;
}
.sectie__sub {
  font-size: 17px;
  color: var(--tekst-secundair);
  margin: -24px 0 36px; /* 8px onder de kop */
  max-width: 44em;
}

/* --------------------------------------------------------------------------
   Verzekeringen (4 kaarten)
   -------------------------------------------------------------------------- */
.verzekeringen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Uitklapbaar tweede rijtje verzekeringen */
.verzekeringen--extra {
  margin-top: 20px;
  display: none;
}
.verzekeringen--extra.open {
  display: grid;
  animation: extra-in 0.4s ease;
}
@keyframes extra-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.verzekeringen__toggle {
  text-align: center;
  margin-top: 28px;
}
.verzekeringen__toggle .btn__pijl { transition: transform 0.18s ease; }
.verzekeringen__toggle button[aria-expanded="true"] .btn__pijl { transform: rotate(180deg); }
.vkaart {
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vkaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(2, 42, 68, 0.1);
}
.vkaart__kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vkaart__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blauw);
  background: var(--label-verplicht);
  padding: 3px 8px;
  border-radius: 3px;
}
.vkaart__label--keuze {
  color: var(--tekst-secundair);
  background: var(--label-keuze);
}
.vkaart h3 { font-size: 20px; font-weight: 700; color: var(--tekst); margin: 6px 0 0; }
.vkaart p { font-size: 16px; margin: 0; flex: 1; }
.vkaart a { font-size: 16px; font-weight: 600; }

/* Pijltje achter "Lees over ..." dat meebeweegt bij hover */
.geenafbreek { white-space: nowrap; }
.linkpijl {
  display: inline-block;
  margin-left: 3px;
  transition: transform 0.18s ease;
}
a:hover .linkpijl { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Zo werkt het (4 stappen)
   -------------------------------------------------------------------------- */
.stappen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stap { display: flex; flex-direction: column; gap: 14px; }

.stap__cirkel { transition: transform 0.2s ease; }
.stap:hover .stap__cirkel { transform: scale(1.1); }
.stap__kop { display: flex; align-items: center; gap: 12px; }
.stap__cirkel {
  background: var(--blauw);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.stap__cirkel--groen { background: var(--groen); }
.stap__cirkel--telefoon {
  background: #fff;
  border: 2px solid var(--blauw);
  color: var(--blauw);
}

/* Cijfercirkels pulseren zachtjes, om de beurt */
@keyframes cirkel-puls {
  0% { box-shadow: 0 0 0 0 rgba(3, 85, 138, 0.35); }
  70% { box-shadow: 0 0 0 10px rgba(3, 85, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 85, 138, 0); }
}
.stap__cirkel:not(.stap__cirkel--groen):not(.stap__cirkel--telefoon) {
  animation: cirkel-puls 2.4s ease-out infinite;
}
.stap:nth-child(2) .stap__cirkel { animation-delay: 0.4s; }

/* Stippellijn die richting de volgende stap beweegt */
.stap__lijn {
  flex: 1;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--rand-input) 0 6px, transparent 6px 12px);
  animation: lijn-loop 1.4s linear infinite;
}
@keyframes lijn-loop {
  to { background-position-x: 12px; }
}
.stap h3 { font-size: 18px; font-weight: 700; margin: 0; }
.stap p { font-size: 16px; margin: 0; color: var(--tekst-secundair); }
.stap--adviseur {
  background: var(--vlak-licht);
  border-radius: var(--radius-kaart);
  padding: 20px;
  margin: -20px;
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Wat kost het ongeveer? (rekenblok)
   -------------------------------------------------------------------------- */
.rekenblok {
  background: var(--vlak-licht);
  border-radius: var(--radius-kaart);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: center;
}
.rekenblok h2 { margin-bottom: 10px; }
.rekenblok__intro { font-size: 17px; margin: 0 0 28px; max-width: 36em; }
.rekenblok__sliderlabel {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--tekst);
  margin-bottom: 8px;
}
.rekenblok input[type="range"] {
  width: 100%;
  max-width: 420px;
  accent-color: var(--blauw);
}
.rekenblok__schaal {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  font-size: 14px;
  color: var(--tekst-gedempt);
}
.rekenblok__disclaimer { font-size: 15px; color: var(--tekst-secundair); margin: 20px 0 0; }
.rekenkaart {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  padding: 28px;
  text-align: center;
}
.rekenkaart__label { font-size: 15px; color: var(--tekst-secundair); margin: 0 0 4px; }
.rekenkaart__herbouw { font-size: 22px; font-weight: 700; color: var(--tekst); margin: 0 0 18px; }
@keyframes waarde-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.rekenkaart__herbouw.bump { animation: waarde-bump 0.35s ease; }
.rekenkaart__tekst { font-size: 15px; color: var(--tekst-secundair); margin: 0; }
.rekenkaart__tekst strong { color: var(--tekst); }
.rekenkaart .btn { margin-top: 20px; }

/* --------------------------------------------------------------------------
   Klantverhalen (3 kaarten)
   -------------------------------------------------------------------------- */
.klanten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.klant {
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.klant:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(2, 42, 68, 0.1);
}
.klant__foto { height: 180px; overflow: hidden; }
.klant__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.klant:hover .klant__foto img { transform: scale(1.05); }
.klant__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.klant__citaat { font-size: 16px; margin: 0; flex: 1; }
.klant__naam { font-size: 15px; color: var(--tekst-secundair); margin: 0; }
.klant__naam strong { color: var(--tekst); }

/* --------------------------------------------------------------------------
   Team: deze mensen krijgt u aan de lijn
   -------------------------------------------------------------------------- */
.team {
  background: var(--vlak-licht);
  border-radius: var(--radius-kaart);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  align-items: center;
}
.team h2 { margin-bottom: 10px; }
.team__intro { font-size: 17px; margin: 0 0 14px; max-width: 30em; }
.team__noot { font-size: 15px; color: var(--tekst-secundair); margin: 0 0 26px; max-width: 30em; }
.team__bellen { font-weight: 700; font-size: 16px; padding: 12px 22px; }
.team__bellen .tel-icoon { width: 16px; height: 16px; margin-right: 8px; }

.team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.team__kaart {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  padding: 22px 16px 18px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team__kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(2, 42, 68, 0.1);
}
.team__foto {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(2, 42, 68, 0.14);
  transition: transform 0.25s ease;
}
.team__kaart:hover .team__foto { transform: scale(1.06); }
.team__naam { font-size: 16px; font-weight: 700; margin: 0; }
.team__rol { font-size: 14px; color: var(--tekst-secundair); margin: 3px 0 0; line-height: 1.45; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-sectie { max-width: 820px; margin: 0 auto; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border: 1px solid var(--rand);
  border-radius: var(--radius-kaart);
  background: #fff;
  padding: 0 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq details:hover { border-color: var(--rand-input); }
.faq details[open] {
  border-color: var(--blauw);
  box-shadow: 0 6px 18px rgba(2, 42, 68, 0.08);
}
.faq summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: var(--tekst);
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq details[open] summary { color: var(--blauw); }
.faq summary::-webkit-details-marker { display: none; }
.faq__teken {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--label-verplicht);
  color: var(--blauw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 17px;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq details[open] .faq__teken { background: var(--blauw); color: #fff; }
.faq details[open] summary .faq__teken::before { content: "\2212"; } /* − */
.faq details:not([open]) summary .faq__teken::before { content: "+"; }
.faq p { font-size: 17px; margin: 0 0 20px; max-width: 40em; }
.faq__cta {
  font-size: 16px;
  color: var(--tekst-secundair);
  margin: 24px 0 0;
}

/* --------------------------------------------------------------------------
   CTA-band
   -------------------------------------------------------------------------- */
.cta {
  background: var(--blauw);
  margin-top: 88px;
  position: relative;
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; opacity: 0.16; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta__inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 64px;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 64px;
  position: relative;
  z-index: 1;
}
.cta h2 { font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.cta__sub { font-size: 17px; color: var(--licht-op-blauw); margin: 0 0 22px; max-width: 30em; }
.cta__bellen { font-size: 16px; color: #fff; margin: 0; }
.cta__bellen a { color: #fff; font-weight: 700; }
.cta__kaart {
  background: #fff;
  border-radius: var(--radius-kaart);
  padding: 26px;
  box-shadow: var(--schaduw-kaart);
}
.cta__stap {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blauw);
  margin: 0 0 14px;
}
.cta__kaart .veldrij { margin-bottom: 12px; }
.cta__kaart .veldrij--laatste { margin-bottom: 16px; }
.cta__kaart input {
  width: 100%;
  border: 1px solid var(--rand-input);
  border-radius: 4px;
  padding: 11px 12px;
  font-size: 17px;
  font-family: var(--font);
  color: var(--tekst);
}
.cta__kaart input:focus { outline: 2px solid var(--blauw); outline-offset: -1px; }
.cta__micro { font-size: 14px; color: var(--tekst-secundair); text-align: center; margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--footer-blauw); margin-top: 0; }
.site-footer__inner { padding-top: 72px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  font-size: 13px;
  color: var(--licht-op-blauw);
  padding-bottom: 56px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 13px; }
.site-footer__col--info { gap: 18px; }
/* Logo diapositief; in productie witte logovariant gebruiken */
.site-footer__logo { height: 32px; width: fit-content; filter: brightness(0) invert(1); }
.site-footer__col p { margin: 0; line-height: 1.8; }
.site-footer__kop {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B7CFE0;
}
.site-footer__col a { text-decoration: none; color: var(--licht-op-blauw); }
.site-footer__col a:hover { color: #fff; }
.site-footer__tel { color: #fff !important; font-weight: 600; font-size: 15px; }
.site-footer__mail { color: var(--licht-op-blauw) !important; }
.site-footer__onderbalk {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 26px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  color: #B7CFE0;
  flex-wrap: wrap;
}

/* Alleen op mobiel zichtbare hero-knop naar het formulier */
.hero__mobielknop { display: none; }

/* ==========================================================================
   Responsief
   (mobiel ontwerp volgt nog als apart scherm; dit is een nette tussenstand)
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr 400px; gap: 48px; }
  .verzekeringen { grid-template-columns: repeat(2, 1fr); }
  .stappen { grid-template-columns: repeat(2, 1fr); }
  .stap--adviseur { margin: 0; }
  .rekenblok { grid-template-columns: 1fr; gap: 32px; }
  .team { grid-template-columns: 1fr; gap: 36px; }
  .cta__inner { grid-template-columns: 1fr 420px; gap: 40px; }
  .klanten { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .container { padding-left: 20px; padding-right: 20px; }

  .site-header__inner { flex-wrap: wrap; gap: 12px; }
  .site-nav { gap: 14px; flex-wrap: wrap; }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .hero__tekst { padding: 0; gap: 20px; }
  .hero__tekst h1 { font-size: 30px; }
  .hero__mobielknop {
    display: block;
    margin: 0 0 20px;
  }

  .sectie { padding-top: 56px; }
  .sectie--eerste { padding-top: 56px; }

  .verzekeringen,
  .verzekeringen--extra.open,
  .stappen,
  .klanten { grid-template-columns: 1fr; }
  .stappen { gap: 24px; }
  .stap__lijn { display: none; }

  .rekenblok { padding: 28px 24px; }
  .team { padding: 28px 20px; }
  .team__grid { gap: 12px; }
  .team__kaart { padding: 18px 10px 14px; }
  .team__foto { width: 88px; height: 88px; }

  .faq details { padding: 0 16px; }
  .faq summary { font-size: 17px; padding: 16px 0; }
  .sectie__cta { margin-top: 32px; }

  .cta { margin-top: 56px; }
  .cta__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
  .cta__kaart .veldrij { grid-template-columns: 1fr; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__onderbalk { flex-direction: column; gap: 8px; }
}

/* Gebruikers die minder beweging willen, krijgen geen puls en geen animaties */
@media (prefers-reduced-motion: reduce) {
  .btn--puls, .rekenkaart__herbouw.bump, .stap__cirkel, .stap__lijn { animation: none; }
  html.js .hero__tekst > *, html.js .formkaart { animation: none; }
  html.js .anim-wacht { opacity: 1; transform: none; transition: none; }
  .btn__pijl, .linkpijl, .stap__cirkel, .vkaart, .klant, .klant__foto img, .team__kaart, .team__foto { transition: none; }
  .vkaart:hover, .klant:hover, .team__kaart:hover, .team__kaart:hover .team__foto { transform: none; }
  .verzekeringen--extra.open { animation: none; }
  html { scroll-behavior: auto; }
}