/* Marketingsite: warm, rustig, veel ruimte. Kleuren als variabelen, licht en donker. */
@font-face {
  font-family: "Jakarta"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/plus-jakarta-sans.woff2") format("woff2-variations"), url("/fonts/plus-jakarta-sans.woff2") format("woff2");
}
:root {
  --achter: #fbf8f3; --vlak: #ffffff; --vlak-zacht: #f3eee6; --inkt: #10201f; --inkt-zacht: #4c5d5b;
  --hoofd: #0b5c56; --hoofd-diep: #083432; --accent: #e8a33d; --accent-zacht: #fbe7c4; --rand: #e6dfd3;
  --schaduw: 0 1px 2px rgba(16, 32, 31, 0.06), 0 8px 24px rgba(16, 32, 31, 0.07);
  --r: 18px; --r-klein: 12px;
  --letter: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --achter: #0d1716; --vlak: #142322; --vlak-zacht: #1a2d2b; --inkt: #eef3f1; --inkt-zacht: #a7b8b5;
    --hoofd: #6fd1c4; --hoofd-diep: #0b2a28; --accent: #f0b555; --accent-zacht: #3a2e17; --rand: #24403d;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--achter); color: var(--inkt); font: 400 1.0625rem/1.6 var(--letter); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--hoofd); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.klein { font-size: 0.9rem; color: var(--inkt-zacht); }
.breed { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.smal { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.naar-inhoud { position: absolute; left: -999px; }
.naar-inhoud:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--vlak); padding: 0.5rem 1rem; border-radius: var(--r-klein); }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.85rem 1.4rem; border-radius: 999px; background: var(--accent); color: #2b1c00; font-weight: 700; text-decoration: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 6px 16px rgba(232, 163, 61, 0.35); }
.knop:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232, 163, 61, 0.45); }
.knop-licht { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 2px var(--rand); }
.knop-licht:hover { box-shadow: inset 0 0 0 2px var(--hoofd); }
.knop-klein { padding: 0.55rem 1rem; font-size: 0.95rem; box-shadow: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--achter) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
.kop-rij { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.merk { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.2rem; color: var(--inkt); text-decoration: none; letter-spacing: -0.02em; }
.merk-teken { width: 2.1rem; height: 2.1rem; }
.menu { display: flex; gap: 1.4rem; margin-left: auto; }
.menu a { color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 0.97rem; }
.menu a:hover, .menu a[aria-current] { color: var(--hoofd); }
@media (max-width: 760px) {
  .kop-rij { flex-wrap: wrap; gap: 0.4rem 1rem; padding-block: 0.6rem; }
  .menu { order: 3; width: 100%; margin: 0; gap: 1rem; overflow-x: auto; padding-bottom: 0.2rem; }
  .menu a { font-size: 0.92rem; white-space: nowrap; }
  .kop .knop { margin-left: auto; }
}

/* Secties */
section { padding-block: clamp(3rem, 8vw, 6rem); }
.sectie-kop { max-width: 700px; margin-bottom: 2.5rem; }
.sectie-kop.midden { margin-inline: auto; text-align: center; }
.boventitel { display: inline-block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hoofd); margin-bottom: 0.8rem; }
.zacht { background: var(--vlak-zacht); }
.donker { background: var(--hoofd-diep); color: #eef3f1; }
.donker .klein, .donker p { color: #c4d6d3; }
.donker .boventitel { color: var(--accent); }
.donker h2, .donker h3 { color: #fff; }

/* Held */
.held { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); overflow: hidden; }
.held-rij { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.held h1 em { font-style: normal; color: var(--hoofd); background: linear-gradient(transparent 62%, var(--accent-zacht) 62%); }
.held .inleiding { font-size: 1.2rem; color: var(--inkt-zacht); max-width: 36rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 1rem; }
.zekerheden { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; padding: 0; margin: 0; font-size: 0.92rem; color: var(--inkt-zacht); }
.zekerheden li::before { content: "✓"; color: var(--hoofd); font-weight: 800; margin-right: 0.4rem; }
@media (max-width: 860px) { .held-rij { grid-template-columns: 1fr; } }

/* Telefoon met app (puur CSS, geen plaatjes) */
.toestel { position: relative; width: min(320px, 82vw); margin-inline: auto; aspect-ratio: 9 / 18.5; border-radius: 42px; background: #10201f; padding: 12px; box-shadow: 0 30px 60px rgba(8, 52, 50, 0.28), inset 0 0 0 2px #2d3f3d; transform: rotate(2deg); }
.scherm { height: 100%; border-radius: 32px; background: #fbf8f3; overflow: hidden; display: flex; flex-direction: column; }
.scherm-kop { background: linear-gradient(140deg, #0b5c56, #138276); color: #fff; padding: 1.6rem 1rem 0.9rem; }
.scherm-kop strong { display: block; font-size: 1rem; }
.scherm-kop span { font-size: 0.72rem; opacity: 0.85; }
.scherm-chips { display: flex; gap: 0.3rem; padding: 0.6rem 0.7rem; }
.scherm-chips span { font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; background: #e9f2f1; color: #0b5c56; }
.scherm-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 0.7rem; flex: 1; align-content: start; }
.scherm-raster i { aspect-ratio: 1; border-radius: 8px; display: block; }
.scherm-raster i:nth-child(1) { background: linear-gradient(135deg, #f4c478, #e8a33d); }
.scherm-raster i:nth-child(2) { background: linear-gradient(135deg, #7cc6bd, #2c8a80); }
.scherm-raster i:nth-child(3) { background: linear-gradient(135deg, #f19a8a, #d4614f); }
.scherm-raster i:nth-child(4) { background: linear-gradient(135deg, #a9c6f0, #5b86c9); grid-column: span 2; aspect-ratio: auto; }
.scherm-raster i:nth-child(5) { background: linear-gradient(135deg, #c9e3a7, #7fae4c); }
.scherm-raster i:nth-child(6) { background: linear-gradient(135deg, #f2d8b5, #d9a76a); }
.scherm-raster i:nth-child(7) { background: linear-gradient(135deg, #b9a7e6, #7a62c4); }
.scherm-raster i:nth-child(8) { background: linear-gradient(135deg, #8fd3e8, #3d97b5); }
.scherm-tag { position: absolute; font-size: 0.7rem; font-weight: 700; background: #fff; color: #10201f; padding: 0.35rem 0.7rem; border-radius: 999px; box-shadow: var(--schaduw); white-space: nowrap; }
.scherm-tag.een { left: -12%; top: 38%; }
.scherm-tag.twee { right: -14%; top: 62%; }
.scherm-tag.drie { left: -6%; bottom: 10%; }
@media (max-width: 480px) { .scherm-tag.een { left: -4%; } .scherm-tag.twee { right: -4%; } }
@media (prefers-color-scheme: dark) { .scherm-tag { background: #1a2d2b; color: #eef3f1; } }

/* Kaarten en rasters */
.raster { display: grid; gap: 1.2rem; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.kaart { background: var(--vlak); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--schaduw); }
.kaart h3 { margin-bottom: 0.4em; }
.kaart p:last-child { margin-bottom: 0; }
.kaart-link { text-decoration: none; color: inherit; transition: transform 0.15s; display: block; }
.kaart-link:hover { transform: translateY(-2px); }
.kaart-link .meer { color: var(--hoofd); font-weight: 700; }
.icoon { width: 2.8rem; height: 2.8rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: var(--accent-zacht); margin-bottom: 1rem; }
.probleem { border-top: 4px solid var(--accent); }
.donker .kaart { background: rgba(255, 255, 255, 0.06); box-shadow: none; }

/* Functie in het groot (afwisselend tekst en beeld) */
.functie { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding-block: 2rem; }
.functie + .functie { border-top: 1px solid var(--rand); }
.functie:nth-child(even) .functie-beeld { order: -1; }
.functie ul { padding-left: 1.2rem; margin: 0; }
.functie li { margin-bottom: 0.4rem; }
.functie-beeld { background: var(--vlak-zacht); border-radius: var(--r); aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: clamp(4rem, 10vw, 6rem); }
@media (max-width: 760px) { .functie { grid-template-columns: 1fr; } .functie:nth-child(even) .functie-beeld { order: 0; } .functie-beeld { aspect-ratio: 16 / 7; } }

/* Stappen */
.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0; }
.stappen li { counter-increment: stap; position: relative; padding-left: 3.6rem; }
.stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--hoofd); color: #fff; }

/* Prijzen */
.prijzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; max-width: 820px; margin-inline: auto; }
.prijs { background: var(--vlak); border-radius: var(--r); padding: 2rem; box-shadow: var(--schaduw); display: flex; flex-direction: column; }
.prijs.uitgelicht { box-shadow: 0 0 0 3px var(--hoofd), var(--schaduw); position: relative; }
.prijs .label { position: absolute; top: -0.8rem; left: 2rem; background: var(--hoofd); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.7rem; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .prijs .label { color: #0d1716; } }
.bedrag { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0.4rem 0; font-variant-numeric: tabular-nums; }
.bedrag small { font-size: 1rem; font-weight: 600; color: var(--inkt-zacht); }
.prijs ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; flex: 1; }
.prijs li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; }
.prijs li::before { content: "✓"; position: absolute; left: 0; color: var(--hoofd); font-weight: 800; }

/* Veelgestelde vragen */
.vragen { max-width: 760px; margin-inline: auto; }
.vraag { background: var(--vlak); border-radius: var(--r-klein); box-shadow: var(--schaduw); margin-bottom: 0.7rem; }
.vraag summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--hoofd); transition: transform 0.2s; }
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag p { padding: 0 1.3rem 1.1rem; margin: 0; color: var(--inkt-zacht); }

/* Slotoproep */
.slot { text-align: center; }
.slot .knoppen { justify-content: center; }

/* Formulier */
.formulier { display: grid; gap: 1rem; background: var(--vlak); padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--r); box-shadow: var(--schaduw); }
.formulier label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.formulier input, .formulier select, .formulier textarea { font: inherit; padding: 0.75rem 0.9rem; border-radius: var(--r-klein); border: 1.5px solid var(--rand); background: var(--achter); color: var(--inkt); width: 100%; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: none; border-color: var(--hoofd); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hoofd) 25%, transparent); }
.formulier .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .formulier .twee { grid-template-columns: 1fr; } }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Anti-spamcontrole (Turnstile) en een melding als die niet lukt (statisch/aanmelden.js) */
.controle:empty { display: none; }
.controle { min-height: 65px; max-width: 100%; overflow: hidden; }
.formulier-fout { margin: 0; padding: 0.6rem 0.8rem; border-left: 4px solid var(--accent); background: var(--accent-zacht); border-radius: 0 var(--r-klein) var(--r-klein) 0; font-size: 0.95rem; }

/* Tekstpagina's */
.tekst h2 { font-size: 1.5rem; margin-top: 2rem; }
.tekst ul { padding-left: 1.2rem; }

/* Voet */
.voet { background: var(--vlak-zacht); padding-block: 3rem 1.5rem; margin-top: 2rem; }
.voet-rij { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.voet nav { display: flex; flex-direction: column; gap: 0.45rem; }
.voet nav a { color: var(--inkt-zacht); text-decoration: none; font-size: 0.95rem; }
.voet nav a:hover { color: var(--hoofd); }
.voet-onder { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rand); }
@media (max-width: 760px) { .voet-rij { grid-template-columns: 1fr 1fr; } .voet-rij > div:first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Hulpklassen (geen style="" in de HTML: de CSP staat dat niet toe) */
.midden-tekst { text-align: center; }
.ruimte-boven { margin-top: 1.5rem; }
.boven-uitlijnen { align-items: start; }
.zekerheden.onder-elkaar { flex-direction: column; gap: 0.5rem; }
.midden-blok { margin-inline: auto; }
.knoppen.midden { justify-content: center; }
.icoon-groot { margin-inline: auto; width: 4rem; height: 4rem; font-size: 2rem; }