/* ============================================================================
   Sugardad.nl — design system
   Bron: Claude Design-handoff (Sugardad.dc.html e.a.); canonieke kleuren uit
   Merk-Marketing.dc.html sectie 02. Twee visuele families uit de handoff:
   - marketing/landing: scherpe knoppen (2px), secties op crème/wit/donker;
   - statusschermen (404, binnenkort): zachtere knoppen (10px) op donker
     verloop — daarvoor bestaat .btn--soft.
   ==========================================================================*/

:root {
  /* Merkpalet (canoniek, Merk-Marketing 02) */
  --nachtblauw: #0E141F;
  --antraciet: #10161F;
  --goud: #C6A968;
  --goud-licht: #D8BE86;
  --creme: #F6F2EA;
  --wit-zacht: #F3EFE7;
  --inkt: #14181F;
  --grijs: #8A909B;

  /* Afgeleiden die de handoff consequent gebruikt */
  --gradient-diep: #0C1119;         /* diepste punt van de donkere verlopen */
  --donker-vlak: #0B0F17;           /* trustbalk / footerdonker */
  --footer: #0A0E15;
  --goud-link: #B8935A;             /* links + eyebrows op licht */
  --goud-tekst: #8A6B2E;            /* goudtekst op crème vlakken */
  --wit-warm: #F7F3EB;              /* headings op donker */
  --creme-sectie: #F7F5F0;          /* lichte sectie-achtergrond */
  --creme-tint: #FBF7EE;            /* actieve chip/kaart-achtergrond */
  --creme-veld: #FBF9F4;            /* zachte tegel-achtergrond */

  /* Tekst op donker */
  --tekst-donker-1: #E8E5DE;
  --tekst-donker-2: #C9CCD2;
  --tekst-donker-3: #B7BCC5;
  --tekst-donker-4: #9AA0AA;
  --tekst-donker-5: #6D7683;

  /* Tekst op licht */
  --tekst-2: #3A3E46;
  --tekst-3: #5A5E66;
  --tekst-4: #6E747E;
  --tekst-5: #8B929C;

  /* Randen op licht */
  --rand: #EAE6DD;
  --rand-kaart: #E6E1D6;
  --rand-input: #DDD8CD;

  /* Status */
  --groen: #2E6B3A;
  --groen-bg: #F1F6F0;
  --groen-rand: #CADEC6;
  --rood: #A03328;
  --rood-fel: #C0392B;
  --rood-bg: #FBF1EF;
  --rood-rand: #EBC9C3;

  /* Typografie */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;

  /* Maatvoering */
  --maxw: 1200px;
  --maxw-inhoud: 1160px;
  --r-btn: 2px;
  --r-btn-soft: 10px;
  --r-kaart: 5px;
  --r-kaart-lg: 7px;
  --r-pill: 40px;
  --schaduw-kaart: 0 24px 50px -24px rgba(20, 24, 31, .25);
  --schaduw-modal: 0 24px 60px -18px rgba(0, 0, 0, .6);
  --overgang: .25s ease;
}

/* ── Basis ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--nachtblauw);
  color: var(--inkt);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--goud-link); text-decoration: none; transition: color var(--overgang); }
a:hover { color: var(--goud-licht); }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
::selection { background: var(--goud); color: var(--nachtblauw); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pagina { background: #FFFFFF; overflow-x: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap--inhoud { max-width: var(--maxw-inhoud); }

/* ── Topbar (sticky donker glas) ────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 20, 31, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(198, 169, 104, .18);
}
.topbar__in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 74px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: baseline; gap: 2px; color: var(--wit-zacht); }
.logo__naam, .logo__tld { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.logo__tld { color: var(--goud); }
.logo--klein .logo__naam, .logo--klein .logo__tld { font-size: 22px; }
.logo--donker { color: var(--inkt); }
.topbar__rechts { display: flex; align-items: center; gap: 34px; }
.topbar__links { display: flex; align-items: center; gap: 30px; }
.topbar__links a { color: var(--tekst-donker-2); font-size: 14.5px; font-weight: 500; }
.topbar__links a:hover { color: var(--wit-zacht); }
.topbar__acties { display: flex; align-items: center; gap: 14px; }
.topbar__login { color: var(--tekst-donker-1); font-size: 14.5px; font-weight: 500; }
.topbar__burger { display: none; cursor: pointer; background: none; border: none; color: var(--wit-zacht); font-size: 22px; padding: 4px 6px; }

/* Mobiel uitklapmenu */
.m-menu { position: fixed; inset: 74px 0 0 0; z-index: 39; background: rgba(14, 20, 31, .98); backdrop-filter: blur(10px); padding: 30px 28px; display: none; flex-direction: column; gap: 8px; animation: fadeIn .25s ease; }
.m-menu.is-open { display: flex; }
.m-menu a { color: var(--tekst-donker-1); font-size: 20px; font-family: var(--serif); padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.m-menu .btn { margin-top: 18px; }

/* ── Knoppen ────────────────────────────────────────────────────────────── */
.btn {
  font-family: inherit; cursor: pointer; border: none; display: inline-block;
  font-size: 16px; font-weight: 600; padding: 16px 32px; border-radius: var(--r-btn);
  letter-spacing: .01em; transition: background var(--overgang), color var(--overgang), transform .2s ease;
  text-align: center;
}
.btn--goud { background: var(--goud); color: var(--nachtblauw); }
.btn--goud:hover { background: var(--goud-licht); color: var(--nachtblauw); transform: translateY(-2px); }
.btn--donker { background: var(--inkt); color: var(--wit-zacht); font-size: 14.5px; font-weight: 500; padding: 13px 26px; }
.btn--donker:hover { background: #2A2F38; color: var(--wit-zacht); }
.btn--wit { background: #FFFFFF; color: var(--inkt); border: 1px solid var(--inkt); font-size: 14.5px; padding: 13px; }
.btn--wit:hover { background: var(--inkt); color: #FFFFFF; }
.btn--omlijnd { background: none; border: 1px solid rgba(255, 255, 255, .28); color: var(--tekst-donker-1); }
.btn--omlijnd:hover { border-color: var(--goud); color: var(--goud-licht); }
.btn--klein { font-size: 14px; font-weight: 600; padding: 11px 22px; }
.btn--breed { width: 100%; }
.btn--soft { border-radius: var(--r-btn-soft); }
.btn--rood { background: var(--rood-fel); color: #FFFFFF; }
.btn--rood:hover { background: var(--rood); color: #FFFFFF; }

/* Tekstlink met pijl */
.pijllink { display: inline-flex; align-items: center; gap: 9px; color: var(--tekst-donker-1); font-size: 16px; font-weight: 500; padding: 16px 8px; }
.pijllink em { color: var(--goud); font-style: normal; }

/* ── Badges & pills ─────────────────────────────────────────────────────── */
.badge-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border: 1px solid rgba(198, 169, 104, .4); border-radius: var(--r-pill); }
.badge-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--goud); box-shadow: 0 0 10px var(--goud); }
.badge-pill__tekst { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-licht); font-weight: 500; }
.tag-pill { border: 1px solid rgba(198, 169, 104, .35); color: var(--goud-licht); font-size: 12.5px; padding: 8px 15px; border-radius: var(--r-pill); }
.badge-18 { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(198, 169, 104, .3); color: var(--goud-licht); padding: 7px 14px; border-radius: 4px; font-size: 12.5px; font-weight: 600; }

/* ── Secties ────────────────────────────────────────────────────────────── */
.sectie { padding: 100px 24px; }
.sectie--creme { background: var(--creme-sectie); }
.sectie--wit { background: #FFFFFF; }
.sectie--donker { background: linear-gradient(165deg, var(--antraciet) 0%, var(--donker-vlak) 100%); color: var(--wit-zacht); }
.sectie__in { max-width: var(--maxw-inhoud); margin: 0 auto; }
.sectie__in--smal { max-width: 780px; }
.sectiekop--compact { margin-bottom: 54px; }

.sectiekop { text-align: center; max-width: 620px; margin: 0 auto 60px; }
.eyebrow { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 16px; }
.sectie--donker .eyebrow { color: var(--goud); }
.sectiekop h2 { font-size: 46px; line-height: 1.08; color: var(--inkt); }
.sectiekop h2 + p { margin-top: 18px; }
.sectie--donker .sectiekop h2, .sectie--donker h2 { color: var(--wit-warm); }
.sectiekop p { font-size: 17px; line-height: 1.65; color: var(--tekst-3); }
.sectie--donker .sectiekop p { color: #A7AEB8; }

.accent-serif { font-style: italic; color: var(--goud); }

/* ── Kaarten ────────────────────────────────────────────────────────────── */
.kaart { background: #FFFFFF; border: 1px solid var(--rand); border-radius: var(--r-kaart); }
.kaart--hover { transition: transform .3s ease, box-shadow .3s ease; }
.kaart--hover:hover { transform: translateY(-6px); box-shadow: var(--schaduw-kaart); }

/* Stappen (genummerde kaarten) */
.stap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stap-kaart { padding: 40px 32px; }
.stap-kaart__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.stap-kaart__icoon { font-size: 30px; }
.stap-kaart__nr { font-family: var(--serif); font-size: 46px; font-weight: 700; color: #E7DFCE; line-height: 1; }
.stap-kaart h3 { font-size: 25px; color: var(--inkt); margin-bottom: 12px; }
.stap-kaart p { font-size: 15px; line-height: 1.65; color: var(--tekst-3); }

/* Veiligheidskaarten (donkere sectie) */
.veilig-kaart { background: rgba(255, 255, 255, .035); border: 1px solid rgba(198, 169, 104, .14); border-radius: var(--r-kaart); padding: 28px 24px; transition: border-color .3s, background .3s; }
.veilig-kaart:hover { border-color: rgba(198, 169, 104, .4); background: rgba(255, 255, 255, .06); }
.veilig-kaart__icoon { width: 46px; height: 46px; border-radius: 4px; background: rgba(198, 169, 104, .12); color: var(--goud); display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 18px; }
.veilig-kaart h3 { font-size: 21px; color: var(--wit-zacht); margin-bottom: 9px; }
.veilig-kaart p { font-size: 14px; line-height: 1.6; color: var(--tekst-donker-4); }

/* Testimonials */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-kaart { padding: 34px 30px; display: flex; flex-direction: column; }
.testi-kaart__quote-teken { color: var(--goud); font-family: var(--serif); font-size: 54px; line-height: .6; height: 30px; }
.testi-kaart blockquote { margin: 0 0 24px; font-size: 16.5px; line-height: 1.7; color: #2E323A; font-family: var(--serif); font-style: italic; }
.testi-kaart__voet { margin-top: auto; display: flex; align-items: center; gap: 12px; border-top: 1px solid #EFEAE0; padding-top: 18px; }
.monogram { width: 40px; height: 40px; border-radius: 50%; background: var(--inkt); color: var(--goud); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 18px; font-weight: 700; flex-shrink: 0; }
.testi-kaart__naam { font-size: 14.5px; font-weight: 600; color: var(--inkt); }
.testi-kaart__meta { font-size: 12.5px; color: var(--tekst-5); }

/* ── Vinkjes / USP-lijstjes ─────────────────────────────────────────────── */
.usp-rij { display: flex; flex-wrap: wrap; gap: 26px; }
.usp { display: flex; align-items: center; gap: 10px; }
.usp__vink { color: var(--goud); font-size: 17px; }
.usp__tekst { font-size: 14px; color: var(--tekst-donker-4); }
.vinklijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.vinklijst li { display: flex; gap: 11px; font-size: 14.5px; color: var(--tekst-2); }
.vinklijst li::before { content: "✓"; color: var(--goud); }

/* ── FAQ-accordeon ──────────────────────────────────────────────────────── */
.faq-lijst { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #FFFFFF; border: 1px solid var(--rand); border-radius: var(--r-kaart); overflow: hidden; }
.faq-item__knop { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-item__vraag { font-size: 17.5px; font-weight: 600; color: var(--inkt); }
.faq-item__plus { font-size: 22px; color: var(--goud); flex-shrink: 0; transition: transform .3s ease; }
.faq-item.is-open .faq-item__plus { transform: rotate(45deg); }
.faq-item__antwoord { display: none; padding: 0 26px 24px; font-size: 15px; line-height: 1.7; color: var(--tekst-3); }
.faq-item.is-open .faq-item__antwoord { display: block; animation: fadeIn .3s ease; }

/* ── Prijzen ────────────────────────────────────────────────────────────── */
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; max-width: 1100px; margin: 0 auto; }
.prijs-kaart { position: relative; background: #FFFFFF; border: 1px solid var(--rand-kaart); border-radius: var(--r-kaart-lg); padding: 40px 32px; display: flex; flex-direction: column; }
.prijs-kaart--uitgelicht { background: linear-gradient(165deg, #12181F, var(--gradient-diep)); border: 1px solid rgba(198, 169, 104, .4); padding: 48px 32px 40px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .4); }
.prijs-kaart__vlag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--goud); color: var(--nachtblauw); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--r-pill); }
.prijs-kaart__naam { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; color: var(--goud-link); }
.prijs-kaart--uitgelicht .prijs-kaart__naam { color: var(--goud); }
.prijs-kaart__prijsregel { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.prijs-kaart__prijs { font-family: var(--serif); font-size: 52px; font-weight: 700; color: var(--inkt); line-height: 1; }
.prijs-kaart--uitgelicht .prijs-kaart__prijs { color: var(--wit-warm); }
.prijs-kaart__periode { font-size: 14px; color: var(--tekst-4); }
.prijs-kaart__tagline { font-size: 14px; line-height: 1.55; color: var(--tekst-4); margin-bottom: 26px; min-height: 42px; }
.prijs-kaart--uitgelicht .prijs-kaart__periode,
.prijs-kaart--uitgelicht .prijs-kaart__tagline { color: var(--tekst-donker-4); }
.prijs-kaart .vinklijst { margin-bottom: 30px; gap: 13px; }
.prijs-kaart .vinklijst li { font-size: 14px; }
.prijs-kaart--uitgelicht .vinklijst li { color: var(--tekst-donker-2); }
.prijs-kaart .btn { margin-top: auto; width: 100%; font-size: 14.5px; padding: 13px; }
.prijs-voetnoot { text-align: center; font-size: 13px; color: var(--tekst-5); margin-top: 28px; }

/* ── Afbeeldingsplaceholders (schuine strepen, uit de handoff) ──────────── */
.beeldvlak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.beeldvlak--donker { background-image: repeating-linear-gradient(135deg, #1A2230 0 14px, #161D29 14px 28px); }
.beeldvlak--warm { background-image: repeating-linear-gradient(135deg, #EDE8DD 0 14px, #F4F0E7 14px 28px); }
.beeldvlak span { font-family: ui-monospace, monospace; font-size: 12px; color: var(--tekst-donker-5); letter-spacing: .05em; }
.beeldvlak--warm span { color: #A99C82; }

/* ── Sfeerbeelden (echte foto's op de plek van een .beeldvlak) ──────────── */
/* Vult altijd het kader; de aspect-ratio staat per context vast zodat er geen
   layout shift optreedt terwijl de foto laadt. */
.sfeerbeeld { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__beeldkader .sfeerbeeld { aspect-ratio: 4 / 5; height: auto; }
.doelgroep-kaart .sfeerbeeld { aspect-ratio: 16 / 8; height: auto; }

/* ── Formulieren ────────────────────────────────────────────────────────── */
.veld { display: block; margin-bottom: 16px; }
.veld__label { display: block; font-size: 13px; font-weight: 600; color: var(--tekst-2); margin-bottom: 7px; }
.veld__input, .veld__select, .veld__textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 13px 14px;
  border: 1px solid var(--rand-input); border-radius: 3px; color: var(--inkt);
  outline: none; background: #FFFFFF; transition: border-color .2s ease;
}
.veld__input:focus, .veld__select:focus, .veld__textarea:focus { border-color: var(--goud); }
.veld__textarea { resize: vertical; min-height: 120px; }
.form-fout { font-size: 13.5px; color: var(--rood); background: var(--rood-bg); border: 1px solid var(--rood-rand); border-radius: 4px; padding: 12px 15px; margin-bottom: 16px; }
.form-ok { background: var(--groen-bg); border: 1px solid var(--groen-rand); border-radius: 4px; padding: 16px; text-align: center; }
.form-ok__kop { font-size: 15px; font-weight: 600; color: var(--groen); }
.form-ok__tekst { font-size: 13px; color: #4A6B4E; margin-top: 4px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.kruimels { font-size: 13px; color: var(--tekst-5); padding: 18px 0 0; }
.kruimels a { color: var(--tekst-5); }
.kruimels a:hover { color: var(--goud-link); }
.kruimels__sep { margin: 0 7px; }

/* ── CTA-strook (donker, glow) ──────────────────────────────────────────── */
.cta-strook { background: linear-gradient(160deg, #12181F 0%, var(--gradient-diep) 100%); padding: 84px 24px; text-align: center; color: var(--wit-zacht); position: relative; overflow: hidden; }
.cta-strook__glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(198, 169, 104, .13) 0%, rgba(198, 169, 104, 0) 70%); pointer-events: none; }
.cta-strook__in { position: relative; max-width: 640px; margin: 0 auto; }
.cta-strook h2 { font-size: 48px; line-height: 1.08; color: var(--wit-warm); margin-bottom: 18px; }
.cta-strook p { font-size: 17px; color: #A7AEB8; margin-bottom: 32px; }
.cta-strook__voetnoot { margin-top: 18px; font-size: 13px; color: #7A828D; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--footer); color: var(--tekst-donker-2); padding: 70px 24px 40px; }
.foot__in { max-width: var(--maxw-inhoud); margin: 0 auto; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.foot__blurb { font-size: 14px; line-height: 1.65; color: var(--tekst-5); max-width: 300px; margin-top: 16px; }
.foot .badge-18 { margin-top: 20px; }
.foot__kop { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-donker-5); margin-bottom: 16px; }
.foot__links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.foot__links a { color: var(--tekst-donker-2); }
.foot__links a:hover { color: var(--goud-licht); }
.foot__onder { padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.foot__copy { font-size: 12.5px; color: var(--tekst-donker-5); }
.foot__zegels { display: flex; gap: 20px; font-size: 12.5px; color: var(--tekst-donker-5); }

/* ── Cookiebanner ───────────────────────────────────────────────────────── */
.cookiebanner { position: fixed; bottom: 20px; left: 20px; right: 20px; z-index: 50; max-width: 560px; margin: 0 auto; background: #12181F; border: 1px solid rgba(198, 169, 104, .28); border-radius: 6px; padding: 22px 24px; box-shadow: var(--schaduw-modal); animation: slideUp .4s ease; display: none; }
.cookiebanner.is-zichtbaar { display: block; }
.cookiebanner__rij { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.cookiebanner__icoon { font-size: 20px; }
.cookiebanner p { font-size: 13.5px; line-height: 1.6; color: var(--tekst-donker-3); }
.cookiebanner__acties { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiebanner .btn { font-size: 13.5px; padding: 11px 20px; }
.cookiebanner .btn--omlijnd { border-color: rgba(255, 255, 255, .2); font-weight: 500; }

/* ── Leeftijdspoort (18+-overlay, Leeftijdspoort.dc.html) ───────────────── */
.leeftijdspoort { position: fixed; inset: 0; z-index: 100; background: linear-gradient(160deg, var(--antraciet) 0%, var(--gradient-diep) 55%, var(--nachtblauw) 100%); color: var(--wit-zacht); display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; }
html.toon-leeftijdspoort .leeftijdspoort { display: flex; }
html.toon-leeftijdspoort { overflow: hidden; }
.leeftijdspoort__kaart { max-width: 480px; animation: fadeUp .5s ease both; }
.leeftijdspoort__badge { width: 74px; height: 74px; margin: 0 auto 26px; border-radius: 50%; border: 1px solid rgba(198, 169, 104, .5); color: var(--goud); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; font-weight: 700; box-shadow: 0 0 30px rgba(198, 169, 104, .18); }
.leeftijdspoort h2 { font-size: 38px; color: var(--wit-warm); margin-bottom: 14px; }
.leeftijdspoort p { font-size: 15.5px; line-height: 1.65; color: var(--tekst-donker-3); margin-bottom: 28px; }
.leeftijdspoort__acties { display: flex; flex-direction: column; gap: 12px; }
.leeftijdspoort__weiger { background: none; border: none; cursor: pointer; font-family: inherit; color: var(--tekst-donker-4); font-size: 14px; padding: 12px; }
.leeftijdspoort__weiger:hover { color: var(--tekst-donker-1); }
.leeftijdspoort__melding { display: none; background: rgba(192, 57, 43, .12); border: 1px solid rgba(192, 57, 43, .4); color: #E8B4AE; border-radius: 4px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 16px; }
.leeftijdspoort.is-geweigerd .leeftijdspoort__melding { display: block; }
.leeftijdspoort__voetnoot { margin-top: 24px; font-size: 12.5px; color: var(--tekst-donker-5); }
.leeftijdspoort__voetnoot a { color: var(--tekst-donker-4); text-decoration: underline; }

/* ── Statusschermen (404 / binnenkort: donker verloop, zachte knoppen) ──── */
.statusscherm { min-height: 100vh; background: linear-gradient(160deg, var(--antraciet) 0%, var(--gradient-diep) 55%, var(--nachtblauw) 100%); color: var(--wit-zacht); display: flex; flex-direction: column; }
.statusscherm__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.statusscherm__in { max-width: 560px; animation: fadeUp .6s ease both; }
.statusscherm h1 { font-size: 46px; color: var(--wit-warm); margin-bottom: 16px; }
.statusscherm p { font-size: 16px; line-height: 1.7; color: var(--tekst-donker-3); }
.statusscherm__acties { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.statusscherm .btn { border-radius: var(--r-btn-soft); }
.status-404 { font-family: var(--serif); font-size: 130px; font-weight: 700; color: var(--goud); line-height: 1; margin-bottom: 10px; }
.status-glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 169, 104, .16) 0%, rgba(198, 169, 104, 0) 68%); pointer-events: none; }

/* ── Hero (donker, tweekoloms; home + stad-landingspagina's) ────────────── */
.hero { position: relative; background: linear-gradient(160deg, var(--antraciet) 0%, var(--gradient-diep) 55%, var(--nachtblauw) 100%); color: var(--wit-zacht); overflow: hidden; }
.hero__glow { position: absolute; top: -180px; right: -140px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(198, 169, 104, .16) 0%, rgba(198, 169, 104, 0) 68%); pointer-events: none; }
.hero__grid { max-width: var(--maxw); margin: 0 auto; padding: 78px 24px 90px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero__tekst { animation: fadeUp .8s ease both; }
.hero__tekst .badge-pill { margin-bottom: 26px; }
.hero h1 { font-size: 62px; line-height: 1.04; margin-bottom: 22px; color: var(--wit-warm); }
.hero__lead { font-size: 19px; line-height: 1.6; color: var(--tekst-donker-3); max-width: 480px; margin-bottom: 34px; }
.hero__acties { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero__beeld { position: relative; animation: fadeUp .9s ease .12s both; }
.hero__beeldkader { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); border: 1px solid rgba(198, 169, 104, .22); }
.hero__beeldkader .beeldvlak { aspect-ratio: 4 / 5; }
.hero__kaartje { position: absolute; bottom: -26px; left: -26px; background: var(--wit-warm); color: var(--antraciet); padding: 18px 22px; border-radius: 4px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55); display: flex; align-items: center; gap: 14px; }
.hero__kaartje-icoon { width: 44px; height: 44px; border-radius: 50%; background: var(--antraciet); color: var(--goud); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.hero__kaartje-kop { font-size: 20px; font-family: var(--serif); font-weight: 700; }
.hero__kaartje-sub { font-size: 12.5px; color: var(--tekst-3); }

/* ── Trustbalk (cijfers op donker) ──────────────────────────────────────── */
.trustbalk { background: var(--donker-vlak); border-top: 1px solid rgba(198, 169, 104, .12); border-bottom: 1px solid rgba(198, 169, 104, .12); }
.trustbalk__grid { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trustbalk__cel { text-align: center; }
.trustbalk__cijfer { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--goud); line-height: 1; }
.trustbalk__label { font-size: 13px; color: var(--tekst-5); margin-top: 8px; letter-spacing: .02em; }

/* ── Doelgroep-kaarten ("Voor wie", Sugardad.dc.html) ───────────────────── */
.doelgroep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.doelgroep-kaart { border: 1px solid var(--rand-kaart); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.doelgroep-kaart .beeldvlak { aspect-ratio: 16 / 8; }
.doelgroep-kaart__in { padding: 38px 34px 34px; display: flex; flex-direction: column; flex: 1; }
.doelgroep-kaart__tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-link); font-weight: 600; margin-bottom: 12px; }
.doelgroep-kaart h3 { font-size: 30px; color: var(--inkt); margin-bottom: 14px; }
.doelgroep-kaart__tekst { font-size: 15.5px; line-height: 1.65; color: var(--tekst-3); margin-bottom: 22px; }
.doelgroep-kaart .vinklijst { margin-bottom: 30px; }
.doelgroep-kaart .btn { margin-top: auto; align-self: flex-start; }

/* ── Veiligheid-sectie (sticky kolom + kaartraster) ─────────────────────── */
.veilig-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.veilig-grid__intro { position: sticky; top: 100px; }
.veilig-grid__intro h2 { font-size: 46px; line-height: 1.08; color: var(--wit-warm); margin-bottom: 20px; }
.veilig-grid__intro p { font-size: 16.5px; line-height: 1.7; color: #A7AEB8; margin-bottom: 30px; }
.veilig-grid__tags { display: flex; gap: 14px; flex-wrap: wrap; }
.veilig-grid__kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Statusscherm-varianten + prelaunch-chrome + wachtlijstformulier */
.statusscherm--in-site { min-height: 0; }
.statusscherm--in-site .statusscherm__main { padding: 100px 24px; }
.statusscherm--kaal { position: relative; overflow: hidden; }
.statusscherm .badge-pill { margin-bottom: 26px; }
.statusscherm__form { max-width: 440px; margin: 32px auto 26px; }
.status-glow--rb { right: -140px; bottom: -180px; }
.usp-rij--centreer { justify-content: center; }
.prelaunch-kop { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; background: var(--antraciet); border-bottom: 1px solid rgba(198, 169, 104, .18); }
.prelaunch-kop .logo__naam, .prelaunch-kop .logo__tld { font-size: 22px; }
.prelaunch-kop__badge { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-licht); }
.prelaunch-voet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 22px 28px; background: var(--nachtblauw); color: var(--tekst-donker-5); font-size: 12.5px; border-top: 1px solid rgba(255, 255, 255, .06); }
.prelaunch-voet__links a { color: var(--tekst-donker-4); }
.wachtlijst-form__rij { display: flex; gap: 10px; }
.wachtlijst-form__rij .veld__input { flex: 1; }
.wachtlijst-form__label { position: absolute; left: -9999px; }
.wachtlijst-form__avg { font-size: 12.5px; color: var(--tekst-donker-5); margin-top: 12px; }
@media (max-width: 520px) {
  .wachtlijst-form__rij { flex-direction: column; }
}

/* ── App-navigatie (ingelogde omgeving, Dashboard.dc.html) ──────────────── */
.appnav { position: sticky; top: 0; z-index: 40; background: rgba(14, 20, 31, .94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(198, 169, 104, .18); }
.appnav__in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.appnav__tabs { display: flex; gap: 6px; overflow-x: auto; }
.appnav__tab { color: var(--tekst-donker-2); font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 5px; white-space: nowrap; }
.appnav__tab:hover { color: var(--wit-zacht); }
.appnav__tab.is-actief { background: rgba(198, 169, 104, .16); color: var(--goud-licht); }
.appnav__badge { display: inline-block; min-width: 18px; text-align: center; background: var(--goud); color: var(--nachtblauw); font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 5px; }
.appnav__avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(198, 169, 104, .16); color: var(--goud); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 17px; font-weight: 700; flex-shrink: 0; }
.appnav__avatar:hover { background: rgba(198, 169, 104, .3); color: var(--goud-licht); }
@media (max-width: 720px) {
  .appnav__in { height: auto; flex-wrap: wrap; padding: 10px 16px; }
}

/* ── Diversen ───────────────────────────────────────────────────────────── */
.skiplink { position: absolute; left: -9999px; top: 0; background: var(--goud); color: var(--nachtblauw); padding: 10px 18px; z-index: 200; font-weight: 600; }
.skiplink:focus { left: 0; }
.tekst-centreer { text-align: center; }

/* ── Responsief ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .veilig-grid { grid-template-columns: 1fr; gap: 40px; }
  .veilig-grid__intro { position: static; }
  .doelgroep-grid { grid-template-columns: 1fr; }
  .stap-grid, .testi-grid { grid-template-columns: 1fr; }
  .prijs-grid { grid-template-columns: 1fr; max-width: 440px; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .trustbalk__grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
}
@media (max-width: 720px) {
  .topbar__links, .topbar__login { display: none; }
  .topbar__burger { display: block; }
  .hero h1 { font-size: 42px; }
  .sectiekop h2, .sectie--donker h2, .veilig-grid__intro h2 { font-size: 33px; }
  .cta-strook h2 { font-size: 36px; }
  .sectie { padding: 64px 24px; }
  .status-404 { font-size: 96px; }
  .veilig-grid__kaarten { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .foot__grid { grid-template-columns: 1fr; }
  .trustbalk__grid { grid-template-columns: 1fr; }
}