:root {
  --groen: #5BAD4E;
  --groen-donker: #2f6327;
  --groen-licht: #eef6ec;
  --roze: #F2A7B8;
  --tekst: #1f2a1c;
  --grijs: #5b6657;
  --achtergrond: #fbfaf6;
  --rand: #e3e7df;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px; line-height: 1.6;
  color: var(--tekst); background: var(--achtergrond);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--groen-donker); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: .4em; color: var(--groen-donker); }
h3 { font-size: 1.15rem; margin-bottom: .35em; }
p + p { margin-top: .8em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rand); backdrop-filter: blur(6px); }
.kop-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo img { height: 48px; width: auto; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tekst); font-weight: 600; font-size: 15px; }
.menu a:hover { color: var(--groen); }

/* Knoppen */
.knop {
  display: inline-block; background: var(--groen); color: #fff; font-weight: 700;
  text-decoration: none; padding: 14px 24px; border-radius: 999px; border: 0;
  font-size: 16px; cursor: pointer; font-family: inherit; transition: background .15s;
}
.knop:hover { background: var(--groen-donker); }
.knop-klein { padding: 9px 18px; font-size: 15px; }
.knop-licht { background: #fff; color: var(--groen-donker); }
.knop-licht:hover { background: var(--groen-licht); }
.knop-roze { background: var(--roze); color: #4a1526; }
.knop-roze:hover { background: #f7c3cf; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Held */
.held { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--groen-donker), var(--groen)); color: #fff; }
.held-in { position: relative; padding: 96px 20px 104px; max-width: 1120px; }
.held h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); max-width: 14ch; font-weight: 800; }
.bovenkop { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 700; color: var(--roze); margin-bottom: 14px; }
.intro { font-size: 1.15rem; max-width: 36rem; margin-top: 18px; opacity: .95; }
.blaadjes { position: absolute; right: 0; top: 0; height: 100%; width: min(60%, 600px); opacity: .9; }

/* Blokken */
.blok { padding: 80px 0; }
.blok-zacht { background: var(--groen-licht); }
.lead { color: var(--grijs); font-size: 1.1rem; margin-bottom: 32px; }
.klein { font-size: 14px; color: var(--grijs); margin-top: 18px; }

.diensten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.dienst { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; border-top: 4px solid var(--groen); }
.dienst p { color: var(--grijs); font-size: 15.5px; }

.stappen { list-style: none; counter-reset: stap; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-top: 24px; }
.stappen li { counter-increment: stap; display: flex; flex-direction: column; gap: 4px; }
.stappen li::before { content: counter(stap); width: 40px; height: 40px; border-radius: 50%; background: var(--groen); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 8px; }
.stappen span { color: var(--grijs); }

.twee { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.punten { list-style: none; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 28px; }
.punten li { padding: 10px 0 10px 34px; position: relative; font-weight: 600; }
.punten li + li { border-top: 1px solid var(--rand); }
.punten li::before { content: ""; position: absolute; left: 0; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--roze); }

.plaatsen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.plaatsen li { background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 15px; }

/* Contact */
.gegevens { font-style: normal; margin-top: 20px; line-height: 1.7; }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 28px; }
.formulier label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.formulier input, .formulier textarea {
  font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid #cfd6ca; border-radius: 8px; background: #fff;
}
.formulier input:focus, .formulier textarea:focus { outline: 2px solid var(--groen); border-color: var(--groen); }
.breed { grid-column: 1 / -1; }
.verborgen { position: absolute; left: -9999px; }
.melding { font-weight: 600; min-height: 1em; }
.melding.ok { color: var(--groen-donker); }
.melding.fout { color: #b3261e; }

/* Voet */
.voet { background: var(--groen-donker); color: #e6efe3; padding: 32px 0; font-size: 15px; }
.voet a { color: #fff; }
.voet-in { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }

/* Losse pagina (privacy) */
.pagina { max-width: 760px; padding: 60px 20px 80px; }
.pagina h1 { color: var(--groen-donker); margin-bottom: 20px; font-size: 2rem; }
.pagina h2 { font-size: 1.25rem; margin-top: 28px; }
.pagina ul { padding-left: 20px; margin-top: 8px; }

@media (max-width: 820px) {
  .menu { display: none; }
  .kop-in { justify-content: space-between; }
  .twee { grid-template-columns: 1fr; gap: 32px; }
  .held-in { padding: 64px 20px 72px; }
  .blaadjes { width: 90%; opacity: .35; }
  .blok { padding: 56px 0; }
}
@media (max-width: 520px) {
  .formulier { grid-template-columns: 1fr; padding: 20px; }
  .logo img { height: 40px; }
  .knoppen .knop { width: 100%; text-align: center; }
}

.knop-whatsapp { background: #25D366; color: #0b3d1f; }
.knop-whatsapp:hover { background: #4be07f; }