/* ===============================================================
   Next Solar Solutions
   Ontwerp rond de dagcyclus van een thuisbatterij: goedkope uren
   laden (groen), dure uren leveren (amber). Kleur draagt betekenis.
   =============================================================== */

/* Alle kleuren zijn rechtstreeks uit het logo gehaald:
   navy #0C1848 (wordmerk), donkergroen #003024 (cirkel),
   geel #FCCC24 (bliksem) en lichtgroen #78C048 (blad). */
:root {
  /* inkt — het navy van het wordmerk */
  --ink: #0C1848;
  --ink-deep: #070E2C;
  --ink-soft: #1B2C66;

  /* het donkergroen van de logocirkel, voor diepe vlakken */
  --forest: #003024;
  --forest-2: #0A4630;

  /* betekenisdragende accenten, beide uit het logo */
  --laad: #78C048;        /* goedkoop uur — batterij laadt (het blad) */
  --laad-deep: #3F7A22;   /* donkerder, leesbaar als tekst op wit */
  --laad-soft: #EEF7E4;
  --lever: #FCCC24;       /* piekuur — batterij levert (de bliksem) */
  --lever-deep: #7A5C00;  /* donkerder, leesbaar als tekst op wit */
  --lever-soft: #FEF6DC;

  /* papier — licht naar het navy toe getrokken */
  --paper: #FFFFFF;
  --paper-2: #F5F7FC;
  --paper-3: #EBEFF8;
  --line: #DCE2F0;
  --muted: #5C6788;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 14px 40px rgba(11, 31, 58, 0.09);
  --shadow-lift: 0 22px 60px rgba(11, 31, 58, 0.14);

  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1;
}

img, svg { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .wrap { padding: 0 20px; } }


/* ---------------------------------------------------------------
   Iconen — inline SVG-sprite in plaats van een icoonlettertype
   --------------------------------------------------------------- */

.ico-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 20px; height: 20px;
  display: inline-block; vertical-align: middle;
  flex-shrink: 0; color: inherit;
}

/* ---------------------------------------------------------------
   Typografie
   --------------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); }

h1 { font-size: clamp(38px, 6vw, 66px); }
h2 { font-size: clamp(27px, 4vw, 42px); }
h3 { font-size: 18px; letter-spacing: -0.015em; line-height: 1.3; }

/* Mono-label: verwijst naar meterstanden en technische specificaties */
.mono-label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laad-deep);
  display: inline-block;
  margin-bottom: 16px;
}
.mono-label.on-dark { color: var(--laad); }

.lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 46ch; margin-bottom: 28px; }
.sub { font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 62ch; margin-bottom: 44px; }

/* ---------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  padding: 14px 26px; min-height: 50px;
  border: 1.5px solid transparent; border-radius: 999px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 17px 34px; font-size: 16px; min-height: 56px; }
.btn .ico { width: 19px; height: 19px; }

/* De hoofdknop draagt het geel van de bliksem uit het logo, met het navy
   van het wordmerk als tekst. Dat was ook de knopkleur op de oude site. */
.btn-primary {
  background: var(--lever); color: var(--ink);
  box-shadow: 0 6px 18px rgba(252, 204, 36, 0.36);
}
.btn-primary:hover {
  background: #FFD948; color: var(--ink);
  box-shadow: 0 12px 30px rgba(252, 204, 36, 0.46);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

/* De groene knop blijft voor secundaire acties op donkere vlakken */
.btn-leaf { background: var(--laad); color: #10300A; box-shadow: 0 6px 18px rgba(120, 192, 72, 0.3); }
.btn-leaf:hover { background: #88CE56; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); background: var(--paper-2); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.34); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-nav { min-height: 42px; padding: 10px 20px; font-size: 14px; }

/* ---------------------------------------------------------------
   Topbalk en navigatie
   --------------------------------------------------------------- */

.topbar { background: var(--ink-deep); color: rgba(255,255,255,0.72); font-size: 12.5px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; }
.topbar-rating { display: inline-flex; align-items: center; gap: 7px; }
.topbar-rating .ico { color: var(--lever); width: 14px; height: 14px; }
.topbar-phone { color: #fff; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; }
.topbar-phone .ico { width: 15px; height: 15px; }
.topbar-phone:hover { color: var(--laad); }
@media (max-width: 620px) { .topbar-rating { display: none; } .topbar-inner { justify-content: center; } }

nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
/* Zodra de bezoeker scrollt krijgt de balk wat meer gewicht en wordt hij compacter */
nav.gescrold { box-shadow: 0 6px 24px rgba(12, 24, 72, 0.09); background: rgba(255,255,255,0.97); }
nav.gescrold .nav-inner { padding: 10px 0; }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; transition: padding .25s ease; }

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }

/* Het merkteken is de cirkel uit het logobestand. Dat bestand is een
   staande lockup van 500x500 met de cirkel op x 109-392, y 18-300;
   hieronder wordt precies dat deel uitgesneden zonder het beeld te hersamplen. */
.logo-mark {
  --mark: 40px;
  width: var(--mark); height: var(--mark);
  position: relative; overflow: hidden; flex-shrink: 0;
  border-radius: 50%;
}
.logo-mark img {
  position: absolute; max-width: none;
  width:  calc(var(--mark) * 500 / 283);
  height: calc(var(--mark) * 500 / 283);
  left:   calc(var(--mark) * -109 / 283);
  top:    calc(var(--mark) * -18 / 283);
}

.logo-woord { display: flex; flex-direction: column; gap: 1px; }
.logo-naam {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.025em; line-height: 1.05; color: var(--ink);
  white-space: nowrap;
}
.logo-naam strong { font-weight: 800; }
.logo-woord em {
  font-style: normal; font-weight: 600; font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  line-height: 1;
}
@media (max-width: 400px) { .logo-naam { font-size: 16px; } .logo-mark { --mark: 34px; } }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.nav-links a:not(.btn) { position: relative; padding: 4px 0; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--laad); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { font-weight: 600; }

.menu-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.menu-toggle .ico { width: 26px; height: 26px; }

@media (max-width: 940px) {
  .menu-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 28px 20px;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a.btn { margin-top: 14px; border-bottom: none; }
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

header { background: var(--paper-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }

.hero { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; padding: 76px 0 84px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy h1 span { color: var(--laad-deep); }

/* Streepjeslijst met betekenis: elk item krijgt een groen merkteken */
.hero-usps { list-style: none; display: grid; gap: 11px; margin-bottom: 32px; }
.hero-usps li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 500; }
.hero-usps .ico { color: var(--laad-deep); width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }

.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-trust { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.stars { color: var(--lever); letter-spacing: 2px; font-size: 14px; }

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 52px 0 60px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* Hero met foto (dienstpagina's) */
.hero-visual img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  object-fit: cover; aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------
   Signatuur: de dagcyclus van een thuisbatterij
   24 staven, één per uur. Groen = goedkoop uur, batterij laadt.
   Amber = piekuur, batterij levert terug.
   --------------------------------------------------------------- */

.daycycle {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
}

.daycycle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.daycycle-head .mono-label { margin-bottom: 0; color: var(--muted); }

.daycycle-key { display: flex; gap: 16px; flex-wrap: wrap; }
.daycycle-key span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-weight: 500; }
.daycycle-key i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.k-laad { background: var(--laad); }
.k-lever { background: var(--lever); }

.daycycle-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
  height: 168px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--line);
}

.daycycle-bars .bar {
  height: var(--h);
  min-height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: var(--paper-3);
  transform-origin: bottom;
}
.daycycle-bars .bar[data-mode="laad"] { background: var(--laad); }
.daycycle-bars .bar[data-mode="lever"] { background: var(--lever); }

/* Het huidige uur bij de bezoeker krijgt een verticale band achter de staaf,
   zodat de grafiek meebeweegt met de dag in plaats van een statisch plaatje
   te zijn. De band is een grid-item, dus de kolomberekening doet de browser. */
.daycycle-marker {
  /* Absoluut gepositioneerd, anders neemt de band een kolom in beslag
     en schuiven alle staven een uur op. De grid-plaatsing bepaalt wel
     nog steeds welke kolom hij beslaat. */
  position: absolute;
  /* De eindlijn moet expliciet zijn: bij een absoluut geplaatst grid-item
     betekent `auto` de rand van de container, niet het einde van de kolom. */
  grid-row: 1 / span 1; grid-column: var(--i, 1) / span 1;
  top: -8px; bottom: -8px; left: -3px; right: -3px;
  background: var(--paper-3);
  border-radius: 6px;
  z-index: 0;
}
.daycycle-marker[hidden] { display: none; }
.daycycle-bars .bar { position: relative; z-index: 1; }

.daycycle-nu {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-3);
  padding: 3px 9px; border-radius: 999px;
}
.daycycle-nu::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--laad-deep); flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .daycycle-nu::before { animation: pols 2.2s ease-in-out infinite; }
  @keyframes pols {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.78); }
  }
}
.daycycle-nu[hidden] { display: none; }

.daycycle-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-top: 9px; letter-spacing: 0.06em;
}

.daycycle figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.55; }

/* Groeien bij scroll, gestaffeld per uur */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .daycycle-bars .bar {
    transform: scaleY(0);
    transition: transform .6s cubic-bezier(.22,.9,.28,1);
    transition-delay: var(--d, 0ms);
  }
  .daycycle.in .bar { transform: scaleY(1); }
}

@media (max-width: 620px) {
  .daycycle { padding: 20px 16px 18px; }
  .daycycle-bars { height: 130px; gap: 2px; }
}

/* ---------------------------------------------------------------
   Cijferband
   --------------------------------------------------------------- */

/* Het donkergroen van de logocirkel, met de cijfers in het blad-groen */
.statband { background: var(--forest); color: #fff; position: relative; overflow: hidden; }
.statband::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 180% at 22% -30%, rgba(120,192,72,0.22), transparent 62%);
  pointer-events: none;
}
.statband-inner { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.statband-inner > div { padding: 34px 16px; border-right: 1px solid rgba(255,255,255,0.13); }
.statband-inner > div:last-child { border-right: none; }
.statband .n {
  font-family: var(--display); font-size: 36px; font-weight: 800;
  letter-spacing: -0.035em; color: var(--laad); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.statband .l { font-size: 12.5px; color: rgba(255,255,255,0.66); margin-top: 10px; line-height: 1.4; }

@media (max-width: 760px) {
  .statband-inner { grid-template-columns: repeat(2, 1fr); }
  .statband-inner > div:nth-child(2n) { border-right: none; }
  .statband-inner > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.11); }
}

/* ---------------------------------------------------------------
   Secties
   --------------------------------------------------------------- */

section { padding: 96px 0; }
section.alt { background: var(--paper-2); }
section.dark { background: var(--ink); color: rgba(255,255,255,0.78); }
section.dark h2, section.dark h3 { color: #fff; }
section.dark .sub { color: rgba(255,255,255,0.66); }

@media (max-width: 760px) { section { padding: 64px 0; } }

.sec-head { margin-bottom: 48px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head .sub { margin-bottom: 0; }

/* Kop met tekst links en actie rechts */
.sec-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .sec-split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------------------------------------------------------
   Onthullen bij scroll
   --------------------------------------------------------------- */

/* Zonder JavaScript blijft alles gewoon zichtbaar: de klasse js-reveal wordt
   pas door main.js op <html> gezet. Zo kan een blokkerende of mislukte
   scriptlading nooit tot een lege pagina leiden. */
.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .daycycle-bars .bar { transform: none; }
}

/* ---------------------------------------------------------------
   Kaarten
   --------------------------------------------------------------- */

/* Vertrouwensbalk: de Google-beoordeling plus de normen waarop wij werken */
.trustbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.trustbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding: 26px 0;
}
.trust-google { display: flex; align-items: center; gap: 16px; }
.trust-google img { width: 62px; height: auto; flex-shrink: 0; }
.trust-google .cijfer {
  font-family: var(--display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
}
.trust-google .bij { font-size: 13px; color: var(--muted); margin-top: 3px; }

.trust-normen { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.norm {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.norm .ico { width: 17px; height: 17px; color: var(--laad-deep); }
@media (max-width: 720px) {
  .trustbar-inner { gap: 20px; padding: 22px 0; }
  .trust-normen { gap: 16px; }
  .norm { font-size: 10.5px; letter-spacing: 0.06em; }
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 20px; }

/* Kaarten komen één voor één in beeld in plaats van allemaal tegelijk */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .cards.reveal > *,
  .js-reveal .reviews.reveal > *,
  .js-reveal .steps.reveal > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .js-reveal .cards.reveal.in > *,
  .js-reveal .reviews.reveal.in > *,
  .js-reveal .steps.reveal.in > * { opacity: 1; transform: none; }

  .js-reveal .reveal.in > *:nth-child(1) { transition-delay: 0ms; }
  .js-reveal .reveal.in > *:nth-child(2) { transition-delay: 80ms; }
  .js-reveal .reveal.in > *:nth-child(3) { transition-delay: 160ms; }
  .js-reveal .reveal.in > *:nth-child(4) { transition-delay: 240ms; }
}

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.card p a { color: var(--laad-deep); font-weight: 500; }

.card-ico {
  width: 50px; height: 50px; border-radius: 14px; margin-bottom: 20px;
  background: var(--laad-soft); display: flex; align-items: center; justify-content: center;
  transition: background .22s ease, transform .22s ease;
}
.card-ico .ico { width: 25px; height: 25px; color: var(--laad-deep); transition: color .22s ease; }

/* Bij hover kleurt het tegeltje naar het donkergroen van de logocirkel */
.card:hover .card-ico { background: var(--forest); transform: rotate(-4deg); }
.card:hover .card-ico .ico { color: var(--laad); }

section.alt .card { background: var(--paper); }

/* Uitgelichte kaart */
.card.featured { border: 1.5px solid var(--laad); position: relative; }
.card.featured .card-ico { background: rgba(0, 196, 106, 0.12); }
.card-badge {
  position: absolute; top: -11px; left: 26px;
  background: var(--laad); color: #06301D;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}

/* Dienstkaart met link onderaan */
.card-link {
  margin-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--laad-deep);
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.card-link .ico { width: 17px; height: 17px; transition: transform .18s ease; }
.card-link:hover .ico { transform: translateX(4px); }

/* ---------------------------------------------------------------
   Stappen — genummerd omdat de volgorde echt betekenis heeft
   --------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 0; border-top: 1.5px solid var(--line); }
.step { padding: 32px 28px 32px 0; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: none; }
.step .no {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--laad-deep); display: block; margin-bottom: 18px;
}
.step .no::before { content: ''; display: block; width: 28px; height: 3px; background: var(--laad); margin-bottom: 14px; }
.step h3 { margin-bottom: 9px; }
.step p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); padding: 28px 0; }
  .step:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------
   Recensies
   --------------------------------------------------------------- */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.review {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review .stars { display: block; margin-bottom: 14px; }
.review .q { font-size: 15px; line-height: 1.68; margin-bottom: 22px; flex: 1; color: var(--ink); }
.review-who { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------
   Veelgestelde vragen
   --------------------------------------------------------------- */

.faq { border-top: 1.5px solid var(--line); max-width: 820px; }
.faq-i { border-bottom: 1px solid var(--line); }
.faq-i .q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 22px 2px; min-height: 60px;
}
.faq-i .q:hover { color: var(--laad-deep); }
.faq-i .q .ico { width: 20px; height: 20px; color: var(--muted); transition: transform .25s ease; flex-shrink: 0; }
.faq-i .a {
  font-size: 15px; color: var(--muted); line-height: 1.7;
  max-height: 0; overflow: hidden; padding: 0 2px;
  transition: max-height .3s ease, padding-bottom .3s ease;
}
.faq-i.open .a { max-height: 260px; padding-bottom: 22px; }
.faq-i.open .q .ico { transform: rotate(180deg); }
.faq-i.open .q { color: var(--laad-deep); }

/* ---------------------------------------------------------------
   Formulier
   --------------------------------------------------------------- */

.offerte-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr); gap: 40px; align-items: start; }
@media (max-width: 920px) { .offerte-layout { grid-template-columns: 1fr; gap: 32px; } }

.offerte-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 36px; box-shadow: var(--shadow);
}

/* Zijkolom met contactgegevens naast het formulier */
.offerte-aside { display: grid; gap: 28px; }
.aside-block {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); padding: 30px 28px;
}
.aside-block h2 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.aside-block p { font-size: 14.5px; color: rgba(255,255,255,0.68); line-height: 1.6; margin-bottom: 20px; }
.aside-block .btn-outline { color: #fff; border-color: rgba(255,255,255,0.34); }
.aside-block .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.contact-list { display: grid; gap: 22px; }
.contact-list dt {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 5px;
}
.contact-list dt .ico { width: 15px; height: 15px; color: var(--laad-deep); }
.contact-list dd { font-size: 15px; color: var(--ink); line-height: 1.55; }
.contact-list dd a { color: var(--laad-deep); font-weight: 500; text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; }

.aside-note {
  border-top: 1px solid var(--line); padding-top: 20px;
  font-size: 13.5px; color: var(--muted); line-height: 1.9;
}
.hp { position: absolute; left: -9999px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; margin-bottom: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.field label span { color: var(--laad-deep); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 11px; padding: 13px 15px;
  background: var(--paper); min-height: 50px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--laad); outline: none; box-shadow: 0 0 0 3px rgba(0, 196, 106, 0.16);
}
.field input.invalid { border-color: #D64545; }
.form-error { color: #B33636; font-size: 14.5px; font-weight: 500; margin-bottom: 18px; }
.form-privacy { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.form-privacy a { color: var(--laad-deep); font-weight: 500; }

.form-success {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 56px 40px; max-width: 700px; text-align: center; box-shadow: var(--shadow);
}
.form-success > .ico { width: 56px; height: 56px; color: var(--laad); margin: 0 auto; }
.form-success h3 { font-size: 26px; margin: 16px 0 10px; }
.form-success p { font-size: 15.5px; color: var(--muted); max-width: 46ch; margin: 0 auto; line-height: 1.7; }
.form-success a { color: var(--laad-deep); font-weight: 600; }

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .offerte-form { padding: 28px 22px; }
  .offerte-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------
   Juridische pagina's
   --------------------------------------------------------------- */

.prose { max-width: 760px; }
.prose h1 { margin-bottom: 14px; font-size: clamp(32px, 4.6vw, 48px); }
.prose h2 {
  font-size: 20px; margin: 44px 0 14px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.prose p { font-size: 15.5px; color: var(--ink); margin-bottom: 13px; line-height: 1.72; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { font-size: 15.5px; color: var(--ink); margin-bottom: 9px; line-height: 1.7; }
.prose a { color: var(--laad-deep); font-weight: 500; }
.prose .sub { margin-bottom: 44px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------------------------------------------------------
   Toegankelijkheid
   --------------------------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 0 0 10px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--laad); outline-offset: 2px; border-radius: 4px;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

footer { background: var(--ink); color: #fff; padding: 84px 0 0; }

.footer-cta {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center;
  padding-bottom: 52px; border-bottom: 1px solid rgba(255,255,255,0.13);
}
.footer-cta h2 { color: #fff; margin-bottom: 12px; }
.footer-cta .meta { color: rgba(255,255,255,0.6); font-size: 15px; max-width: 46ch; line-height: 1.65; }
.footer-actions { display: flex; gap: 13px; flex-wrap: wrap; justify-content: flex-end; }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 40px; padding: 52px 0; }
.footer-grid h4 {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--laad); margin-bottom: 18px;
}
.footer-grid a, .footer-grid span { display: block; color: rgba(255,255,255,0.68); font-size: 14.5px; text-decoration: none; margin-bottom: 11px; line-height: 1.5; }
.footer-grid a { transition: color .16s ease; }
.footer-grid a:hover { color: var(--laad); }
/* In de footer staat het volledige logo, inclusief wordmerk. Het navy van
   het wordmerk verdwijnt op donkergroen, dus een lichte plaat eronder. */
.footer-logo {
  width: 138px; height: auto; margin-bottom: 20px;
  background: #fff; border-radius: 16px; padding: 14px 16px;
}
.footer-about { color: rgba(255,255,255,0.58); font-size: 14px; max-width: 34ch; line-height: 1.6; }

.legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.42); font-size: 12.5px;
}

@media (max-width: 900px) {
  .footer-cta { grid-template-columns: 1fr; gap: 28px; }
  .footer-actions { justify-content: flex-start; }
}
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-actions { width: 100%; }
  .footer-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
   Vaste mobiele actiebalk en terug-naar-boven
   --------------------------------------------------------------- */

.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(11, 31, 58, 0.10);
}
.sticky-cta .btn-primary { flex: 1; }
.sticky-cta .btn-call { min-width: 54px; padding: 14px; }
@media (max-width: 760px) { .sticky-cta:not([hidden]) { display: flex; } }

.to-top .ico { width: 20px; height: 20px; }
.to-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: background .16s ease, transform .16s ease;
}
.to-top:hover { background: var(--ink-soft); transform: translateY(-2px); }
.to-top[hidden] { display: none; }
@media (max-width: 760px) { .to-top .ico { width: 20px; height: 20px; }
.to-top { bottom: 92px; right: 16px; } }

/* ---------------------------------------------------------------
   Leadsectie op de homepage — formulier op het donkergroen van
   de logocirkel, zodat het opvalt zonder een tweede accentkleur
   --------------------------------------------------------------- */

.lead-sectie { background: var(--forest); position: relative; overflow: hidden; }
.lead-sectie::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 150% at 85% -20%, rgba(120,192,72,0.18), transparent 60%);
}

.lead-grid {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 56px; align-items: center;
}
@media (max-width: 940px) { .lead-grid { grid-template-columns: 1fr; gap: 36px; } }

.lead-copy h2 { color: #fff; margin-bottom: 14px; }
.lead-copy > p { color: rgba(255,255,255,0.72); font-size: 16.5px; line-height: 1.7; margin-bottom: 26px; max-width: 42ch; }

.lead-usps { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
.lead-usps li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 500; color: #fff; }
.lead-usps .ico { color: var(--laad); width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }

.lead-bellen { font-size: 15px; color: rgba(255,255,255,0.72); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-bellen .ico { color: var(--laad); width: 18px; height: 18px; }
.lead-bellen a { color: #fff; font-weight: 600; text-decoration: none; font-family: var(--mono); }
.lead-bellen a:hover { color: var(--laad); }

.offerte-form-compact { padding: 32px 30px; box-shadow: var(--shadow-lift); }
@media (max-width: 700px) { .offerte-form-compact { padding: 26px 20px; } }

/* ---------------------------------------------------------------
   Fotohero — beeld over de volle breedte met de tekst eroverheen
   --------------------------------------------------------------- */

.hero-foto {
  position: relative;
  min-height: min(78vh, 680px);
  display: flex; align-items: center;
  background: var(--ink);
  border-bottom: none;
  overflow: hidden;
}

.hero-foto-beeld {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 34%;
}

/* Donker verloop vanaf links, dat ruim vóór de gezichten uitdooft.
   De tekst blijft leesbaar en het gezin blijft goed zichtbaar. */
.hero-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(7,14,44,0.90) 0%,
    rgba(7,14,44,0.74) 26%,
    rgba(7,14,44,0.34) 44%,
    rgba(7,14,44,0.00) 62%);
}

/* width:100% is nodig omdat dit een flex-item is: zonder breedte krimpt het
   tot de inhoud en centreert `margin: 0 auto` uit .wrap het hele blok. */
.hero-foto-inhoud {
  position: relative; z-index: 1; width: 100%;
  padding-top: 72px; padding-bottom: 72px;
}
/* De tekst blijft in de linkerhelft, zodat het beeld rechts vrij blijft. */
.hero-foto-inhoud > * { max-width: 520px; }
.hero-foto-inhoud h1 {
  color: #fff; margin-bottom: 18px; text-wrap: balance;
  font-size: clamp(34px, 4.4vw, 52px);
}
.hero-foto-inhoud h1 span { color: var(--lever); }
.hero-foto-inhoud .lead { color: rgba(255,255,255,0.82); max-width: 44ch; }
.hero-foto-inhoud .hero-usps li { color: #fff; }
.hero-foto-inhoud .hero-usps .ico { color: var(--laad); }

/* Klantenbewijs boven de kop, met initialen in plaats van portretten */
.hero-klanten {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,0.82); margin-bottom: 22px;
}
.hero-klanten strong { color: #fff; font-weight: 700; }
.hero-avatars { display: inline-flex; }
.hero-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--forest-2); color: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero-avatars span + span { margin-left: -12px; }

/* Glasknop voor op het beeld */
.btn-glas {
  background: rgba(255,255,255,0.14); color: #fff;
  border-color: rgba(255,255,255,0.4); backdrop-filter: blur(8px);
}
.btn-glas:hover { background: rgba(255,255,255,0.24); border-color: #fff; }

@media (max-width: 860px) {
  .hero-foto { min-height: auto; }
  .hero-foto-beeld { object-position: 56% 20%; }
  /* Lichter dan op desktop: de foto mag zichtbaar blijven, witte tekst
     heeft hier genoeg contrast aan. */
  .hero-foto::after {
    background: linear-gradient(180deg,
      rgba(7,14,44,0.42) 0%,
      rgba(7,14,44,0.66) 38%,
      rgba(7,14,44,0.84) 100%);
  }
  .hero-foto-inhoud > * { max-width: none; }
  .hero-foto-inhoud { padding-top: 56px; padding-bottom: 56px; }
  .hero-foto-inhoud h1 { max-width: none; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* Foto's binnen secties */
.sec-foto {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 3 / 2;
}
.sec-foto-breed { margin-bottom: 44px; aspect-ratio: 21 / 8; }
@media (max-width: 760px) { .sec-foto-breed { aspect-ratio: 3 / 2; margin-bottom: 32px; } }