/* BuddyFolio - website, volgens het goedgekeurde ontwerp (23 sep 2026, canvas 'BuddyFolio
   voorpagina'). Kleuren uit de app (bron/flet_app.py THEMAS, licht). Lettertypes staan op de
   site zelf (fonts.css), niet bij Google: geen IP-adressen van bezoekers naar derden. */
:root {
  --papier: #F7F7FB; --kaart: #FFFFFF; --inkt: #14161D; --inkt2: #474D5A; --inkt3: #6A7080;
  --lijn: #E6E5F0; --rand: #D9D8E6; --zacht: #F1F0FA; --lei: #5546E8; --lei-zacht: #EEEDFC;
  --band: #D6E2D9; --spoor: #EDECF5; --goed: #1F9E74; --rood: #C43B3B; --rood-tekst: #B23A3A;
  --nacht: #14161D; --nacht-tekst: #C7C7D2; --nacht-lijn: #2A2A3A;
  --kop: "Bricolage Grotesque", system-ui, sans-serif;
  --tekst: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 17px/1.6 var(--tekst); }
a { color: #4638D6; } a:hover { color: #2E2399; }
img { max-width: 100%; height: auto; display: block; }
h1, h2 { font-family: var(--kop); font-weight: 700; letter-spacing: -.02em; margin: 0; }
h3 { margin: 0; font-weight: 600; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wrap { padding: 0 32px; } }

/* kop */
header.kop { position: sticky; top: 0; z-index: 5; background: var(--kaart); border-bottom: 1px solid var(--lijn); }
header.kop .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkt);
  font: 700 23px/1 var(--kop); letter-spacing: -.01em; }
.merk:hover { color: var(--inkt); }
.merk svg { width: 30px; height: 30px; }
nav.menu { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 16px; }
nav.menu a { color: var(--inkt2); text-decoration: none; }
nav.menu a:hover { color: var(--inkt); }
nav.menu a.taal { border: 1px solid var(--rand); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 500; }
@media (max-width: 760px) {
  header.kop .wrap { height: 60px; }
  .merk { font-size: 20px; } .merk svg { width: 26px; height: 26px; }
  nav.menu a.breed { display: none; }
}

/* held */
.held { background: var(--kaart); border-bottom: 1px solid var(--lijn); padding: 88px 0 96px; }
.held .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.held .tekstkant { display: flex; flex-direction: column; gap: 26px; }
.stip { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--inkt2); }
.stip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--goed); flex: none; }
.held h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -.025em; }
.held .onder { margin: 0; font-size: 20px; line-height: 1.55; color: var(--inkt2); max-width: 560px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  padding: 0 24px; border-radius: 14px; font-weight: 600; font-size: 17px; text-decoration: none; }
.knop svg { width: 20px; height: 20px; }
.knop.vol { background: var(--lei); color: #fff; } .knop.vol:hover { color: #fff; background: #4638D6; }
.knop.rand { background: var(--kaart); border: 1px solid var(--rand); color: var(--inkt); }
.knop.rand:hover { color: var(--inkt); border-color: var(--inkt3); }
.knop small { font-weight: 500; font-size: 17px; color: var(--inkt3); }
.klein { margin: 0; font-size: 15px; color: var(--inkt3); }
.beeldkant { position: relative; min-height: 640px; display: flex; justify-content: center; align-items: center; }
.telefoon { width: 318px; padding: 10px; border-radius: 44px; background: #0B0B12; box-shadow: 0 30px 60px rgba(28,27,48,.18); }
.telefoon img { border-radius: 34px; width: 100%; aspect-ratio: 298 / 616; object-fit: cover; object-position: top; }
.bandkaart { position: absolute; left: 0; bottom: 64px; width: 300px; padding: 18px 20px; border-radius: 18px;
  background: var(--kaart); border: 1px solid var(--lijn); box-shadow: 0 16px 36px rgba(28,27,48,.12);
  display: flex; flex-direction: column; gap: 12px; }
.bandkaart .titel { font-size: 13px; font-weight: 600; color: var(--inkt3); letter-spacing: .04em; text-transform: uppercase; }
.balk { display: flex; flex-direction: column; gap: 6px; }
.balk .regel { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.balk .regel .te-veel { color: var(--rood-tekst); }
.spoor { position: relative; height: 10px; border-radius: 999px; background: var(--spoor); }
.spoor span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.spoor .band { background: var(--band); }
.spoor .nu { left: 0; background: var(--lei); }
.spoor .nu.rood { background: var(--rood); }
.spoor .doel { top: -4px; bottom: auto; width: 2px; height: 18px; border-radius: 0; background: var(--inkt); }
@media (max-width: 900px) {
  .held { padding: 36px 0 44px; }
  .held .wrap { grid-template-columns: 1fr; gap: 32px; }
  .held .onder { font-size: 17px; }
  .knoppen { flex-direction: column; } .knop { width: 100%; }
  .beeldkant { min-height: 0; flex-direction: column; gap: 20px; }
  .telefoon { width: 250px; padding: 8px; border-radius: 36px; } .telefoon img { border-radius: 28px; }
  .bandkaart { position: static; width: 100%; max-width: 360px; }
}

/* secties */
section.blok { padding: 96px 0; }
section.blok h2 { font-size: clamp(30px, 3.4vw, 44px); }
.inleiding { margin: 12px 0 0; font-size: 19px; line-height: 1.55; color: var(--inkt2); max-width: 780px; }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.kaart { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 22px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px; }
.kaart h3 { font-size: 22px; }
.kaart p { margin: 0; color: var(--inkt2); }
.icoon { width: 48px; height: 48px; border-radius: 14px; background: var(--lei-zacht); color: var(--lei);
  display: flex; align-items: center; justify-content: center; }
.icoon svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  section.blok { padding: 48px 0; }
  .inleiding { font-size: 16px; }
  .drie { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .kaart { padding: 22px; border-radius: 20px; } .kaart h3 { font-size: 19px; }
}

/* schermen: donkere band */
.nacht { background: var(--nacht); color: #F5F5F7; }
.nacht .kopregel { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.nacht .kopregel p { margin: 0; font-size: 18px; color: var(--nacht-tekst); max-width: 460px; }
.schermen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.schermen figure { margin: 0; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.schermen img { width: 300px; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 28px;
  border: 1px solid var(--nacht-lijn); }
.schermen figcaption { font-size: 17px; color: var(--nacht-tekst); text-align: center; }
@media (max-width: 900px) {
  .nacht .kopregel { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nacht .kopregel p { font-size: 16px; }
  .schermen { display: flex; gap: 14px; overflow-x: auto; margin: 22px -16px 0 0; padding-right: 16px;
    scroll-snap-type: x mandatory; }
  .schermen figure { flex: 0 0 220px; align-items: flex-start; gap: 10px; scroll-snap-align: start; }
  .schermen img { width: 220px; border-radius: 22px; }
  .schermen figcaption { font-size: 15px; text-align: left; }
}

/* koppelingen */
.groepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.groepen .kaart { padding: 28px; gap: 16px; }
.groepen h3 { font-size: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--zacht); font-size: 15px; }
.noot { margin: 0; font-size: 14px; line-height: 1.5; color: var(--inkt3); }
@media (max-width: 900px) {
  .groepen { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .groepen .kaart { padding: 20px; } .groepen h3 { font-size: 17px; } .chip { font-size: 14px; }
}

/* prijzen */
.prijzen { background: var(--kaart); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.prijs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.prijs .kaart { gap: 16px; border-radius: 22px; }
.prijs .kaart.uitgelicht { border: 2px solid var(--lei); }
.prijs .label { font-size: 15px; font-weight: 600; color: var(--inkt2); text-transform: uppercase; letter-spacing: .05em; }
.prijs .bedrag { font: 700 44px/1.1 var(--kop); }
.prijs .per-jaar { margin-top: -8px; font-size: 16px; font-weight: 500; color: var(--inkt2); }
.prijs ul { margin: 0; padding-left: 20px; line-height: 1.8; color: var(--inkt2); }
.prijzen .klein { margin-top: 24px; font-size: 16px; }
@media (max-width: 900px) {
  .prijs { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .prijs .bedrag { font-size: 32px; }
}

/* vragen */
.vragen .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.vragen .links p { margin: 12px 0 0; color: var(--inkt2); }
.vragen .lijst { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; }
.vraag { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px; }
.vraag h3 { font-size: 19px; }
.vraag p { margin: 0; color: var(--inkt2); }
@media (max-width: 900px) {
  .vragen .wrap { grid-template-columns: 1fr; gap: 16px; }
  .vragen .lijst { grid-column: auto; }
  .vraag { padding: 18px; } .vraag h3 { font-size: 17px; } .vraag p { font-size: 15px; }
}

/* tekstpagina's (privacy, voorwaarden) */
main.tekst { max-width: 760px; margin: 0 auto; padding: 56px 16px 24px; }
main.tekst h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: .4em; }
main.tekst h2 { font: 600 21px/1.3 var(--tekst); letter-spacing: 0; margin-top: 1.8em; }
main.tekst p, main.tekst li { color: var(--inkt2); }

/* voet */
footer.voet { border-top: 1px solid var(--lijn); padding: 40px 0; font-size: 15px; color: var(--inkt3); }
footer.voet .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
footer.voet nav { display: flex; gap: 24px; }
footer.voet a { color: var(--inkt2); }
@media (max-width: 760px) { footer.voet .wrap { flex-direction: column-reverse; align-items: flex-start; } }