:root {
  --creme: #FDFBF7;
  --bruin: #4A3A32;
  --terracotta: #D69468;
  --terracotta-donker: #c07f52;
  --blauw: #9CC3DD;
  --blauw-licht: #dcebf5;
  --roze: #E4B2B8;
  --roze-licht: #f7e4e6;
  --uitgeven: #d08058;
  --groen: #889878;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: 'Nunito', -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--creme);
  color: var(--bruin);
  line-height: 1.65;
}

h1, h2, h3 { line-height: 1.25; }

h2 {
  font-size: 1.9rem;
  text-align: center;
  margin: 0 0 0.6rem;
}

.section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.08rem;
}

section { padding: 4rem 1.25rem; max-width: 1020px; margin: 0 auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem 1.25rem;
  background: rgba(253, 251, 247, 0.96);
  border-bottom: 1px solid #eee3d8;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--bruin); font-weight: 800; font-size: 1.15rem; }
.brand img, .hero-visual img, .site-footer img { height: auto; }
.hero-visual img { width: 280px; }
.site-header nav { display: flex; gap: 1rem; margin-left: auto; }
.site-header nav a { text-decoration: none; color: var(--bruin); font-weight: 600; font-size: 0.95rem; }
.site-header nav a:hover { color: var(--terracotta-donker); }
@media (max-width: 860px) { .site-header nav { display: none; } }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--terracotta);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}
.btn:hover { background: var(--terracotta-donker); }
.btn-small { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.btn-ghost { background: transparent; color: var(--bruin); border: 2px solid var(--terracotta); }
.btn-ghost:hover { background: var(--terracotta); color: #fff; }

.badge {
  display: inline-block;
  background: var(--roze-licht);
  color: var(--bruin);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Hero */
.hero { max-width: 1100px; }
.hero-inner { display: flex; align-items: center; gap: 3rem; }
.hero-text { flex: 1.2; }
.hero h1 { font-size: 3rem; margin: 0.6rem 0 0.4rem; }
.hero .subtitle { font-size: 1.35rem; margin-top: 0; }
.hero-visual { flex: 0.8; text-align: center; }
.hero-visual img { max-width: 100%; height: auto; }
.price-box {
  background: #fff;
  border: 2px solid var(--terracotta);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  margin: 1.4rem 0;
  max-width: 440px;
}
.price { font-size: 2rem; margin: 0; }
.price-note { margin: 0.3rem 0 0; font-size: 0.95rem; }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
@media (max-width: 760px) { .hero-inner { flex-direction: column; } .hero h1 { font-size: 2.2rem; } }

/* USP */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.usp-card { background: #fff; border-radius: 16px; padding: 1.5rem; border-top: 6px solid var(--terracotta); box-shadow: 0 2px 10px rgba(74,58,50,0.06); }
.usp-card h3 { margin-top: 0; }
@media (max-width: 760px) { .usp-grid { grid-template-columns: 1fr; } }

/* Potjes */
.pots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.pot { border-radius: 16px; padding: 1.5rem; background: #fff; box-shadow: 0 2px 10px rgba(74,58,50,0.06); }
.pot h3 { margin-top: 0; }
.pot-uitgeven { border-top: 6px solid var(--uitgeven); }
.pot-sparen { border-top: 6px solid var(--blauw); }
.pot-geven { border-top: 6px solid var(--roze); }
.pot-uitgeven h3 { color: var(--uitgeven); }
.pot-sparen h3 { color: #5b8fb5; }
.pot-geven h3 { color: #c9827c; }
@media (max-width: 760px) { .pots { grid-template-columns: 1fr; } }

/* Lanceringsaanbieding */
.launch-offer {
  background: var(--terracotta); color: #fff;
  border-radius: 18px; padding: 1.2rem 1.4rem; margin: 1.2rem 0;
  box-shadow: 0 4px 18px rgba(214,148,104,0.45);
}
.launch-badge {
  display: inline-block; background: #fff; color: var(--terracotta-donker);
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; margin: 0 0 0.5rem;
}
.launch-price { font-size: 2.2rem; margin: 0.2rem 0; }
.launch-price s { font-size: 1.3rem; opacity: 0.75; font-weight: 400; }
.launch-note { margin: 0.3rem 0 0; font-size: 0.95rem; opacity: 0.95; }

/* Muntjesverdeler (zoals het eerste voorbeeld) */
.verdeler { background: #fff; border-radius: 20px; padding: 2rem; box-shadow: 0 2px 12px rgba(74,58,50,0.08); margin-top: 1rem; }
.verdeler h3 { margin-top: 0; }
.verdeler .uitleg { max-width: 640px; }
.coins { display: flex; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; }
.coin {
  width: 52px; height: 52px; border-radius: 50%;
  background: #D9A441; color: #5c3f10;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  border: 3px solid #b9862f;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12);
}
.coin.used { opacity: 0.25; filter: grayscale(0.6); }
.verdeel-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.verdeel-pot { border-radius: 14px; padding: 1rem 1.2rem; background: var(--creme); border: 2px solid #eee3d8; }
.pot-terra { border-color: var(--uitgeven); }
.pot-blue { border-color: var(--blauw); }
.pot-rose { border-color: var(--roze); }
.vp-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1.05rem; }
.stepper { display: flex; align-items: center; gap: 0.55rem; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #d9c9b6; background: #fff; color: var(--bruin);
  font-size: 1.15rem; font-weight: 800; cursor: pointer; line-height: 1; font-family: inherit;
}
.stepper button:hover:not(:disabled) { border-color: var(--terracotta); color: var(--terracotta-donker); }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.aantal { min-width: 1.4rem; text-align: center; font-size: 1.25rem; }
.vp-sub { margin: 0.4rem 0 0; font-weight: 600; opacity: 0.85; }
.feedback { margin-top: 1.2rem; font-weight: 600; }
.feedback.ok { color: #5c7a4e; font-weight: 700; }
@media (max-width: 760px) { .verdeel-rij { grid-template-columns: 1fr; } }

/* Zo werkt het: lichte beige band over de volle breedte */
.how { max-width: none; background: #FBEEDF; }
.how-inner { max-width: 1020px; margin: 0 auto; }

/* Deksels: lichtere bruine band over de volle breedte */
.deksels { max-width: none; background: #6B4F35; color: #F7EBDC; }
.deksels-inner { max-width: 1020px; margin: 0 auto; }
.deksels h2 { color: #FFF6E9; }
.deksels .lead { color: #D8C3AE; text-align: center; max-width: 680px; margin: 0 auto 2rem; font-size: 1.08rem; }
.kicker {
  display: inline-block; font-weight: 800; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 999px; margin: 0 0 0.8rem;
}
.deksels .kicker-goud { background: #4A3125; color: var(--terracotta); }
.kicker-roze { background: var(--roze-licht); color: var(--bruin); }
.kicker-blauw { background: var(--blauw-licht); color: var(--bruin); }
.deksels-inner > .kicker, .inhoud > .kicker, .over > .kicker, .faq-sectie > .kicker { display: table; margin-left: auto; margin-right: auto; }
.deksel-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .deksel-grid { grid-template-columns: 1fr 1fr; } }
.deksel-stage {
  background: #5D4330; border: 1px solid #7d6247; border-radius: 20px;
  padding: 1.8rem 1.4rem; text-align: center;
}
.stage-title { font-weight: 600; font-size: 1.05rem; color: #D8C3AE; margin: 0 0 1rem; }
.lid-top-wrap { display: flex; justify-content: center; }
#lidTop.spin { animation: lidspin 0.9s ease; }
@keyframes lidspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#lidName { color: #FFF6E9; margin: 1rem 0 0.3rem; font-size: 1.5rem; }
.lid-tag { color: #D8C3AE; margin: 0 0 1.2rem; }
.lid-knoppen { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.lid-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.2rem; border-radius: 999px; cursor: pointer;
  border: 2px solid #57402C; background: transparent; color: #F7EBDC;
  font-family: inherit; font-weight: 800; font-size: 0.95rem;
}
.lid-btn .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-blauw { background: #90B6C8; }
.dot-roze { background: #E09890; }
.dot-groen { background: #889878; }
.lid-btn.active { border-color: #F7EBDC; background: rgba(255,255,255,0.08); }
.later-badge { background: #4A3125; color: var(--terracotta); font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; }
.lid-portemonnee { color: #D8C3AE; font-size: 0.95rem; margin: 1.2rem 0 0; }
.deksel-info { display: grid; gap: 1rem; }
.info-kaart { background: #5D4330; border: 1px solid #7d6247; border-radius: 16px; padding: 1.1rem 1.3rem; }
.info-kaart h4 { margin: 0 0 0.3rem; color: #FFF6E9; }
.info-kaart p { margin: 0; color: #D8C3AE; font-size: 0.98rem; }
.stand-van-zaken { background: #7A5C40; border: 1px solid #93765a; border-radius: 16px; padding: 1.1rem 1.3rem; }
.stand-van-zaken h4 { margin: 0 0 0.3rem; color: var(--terracotta); }
.stand-van-zaken p { margin: 0 0 0.5rem; color: #F7EBDC; font-size: 0.98rem; }
.stand-van-zaken .klein { font-size: 0.88rem; color: #D8C3AE; margin: 0; }
.op-de-potjes { margin-top: 3rem; text-align: center; }
.op-de-potjes h3 { color: #FFF6E9; }
.potjes-met-deksel { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.pmd { text-align: center; }
.pmd-later { opacity: 0.75; }
.later-label { color: #D8C3AE; font-size: 0.85rem; max-width: 150px; margin: 0.4rem auto 0; }

/* Printables */
.print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.print-card { background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 2px 10px rgba(74,58,50,0.06); }
.print-card h3 { margin-top: 0; color: var(--terracotta-donker); }
@media (max-width: 760px) { .print-grid { grid-template-columns: 1fr; } }
/* Inhoud (zoals het eerste voorbeeld) */
.inhoud-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .inhoud-grid { grid-template-columns: 1.4fr 1fr; } }
.hoofdstukken { list-style: none; margin: 0; padding: 0; }
.hoofdstukken li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 2px dashed #eee0cf; }
.hoofdstukken li:last-child { border-bottom: none; }
.nr {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.1rem;
}
.nr-1 { background: #D08058; }
.nr-2 { background: #6FA3C8; }
.nr-3 { background: #A8503C; }
.nr-4 { background: #D08058; }
.nr-5 { background: #6FA3C8; }
.nr-6 { background: #A8503C; }
.nr-7 { background: #889878; }
.hoofdstukken strong { font-size: 1.05rem; }
.hoofdstukken p { margin: 0.2rem 0 0; font-size: 0.98rem; opacity: 0.9; }
.erbij-kaart { background: #fff; border-radius: 20px; padding: 1.6rem; box-shadow: 0 2px 12px rgba(74,58,50,0.08); }
.erbij-kaart h3 { margin-top: 0; }
.checklist { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.checklist li { position: relative; padding-left: 2rem; margin: 0.7rem 0; }
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.1rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #dce8d4; color: #5c7a4e;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}
.nodig-box { background: #faf3ec; border-radius: 14px; padding: 1.1rem 1.3rem; }
.nodig-box h4 { margin: 0 0 0.4rem; }
.nodig-box p { margin: 0; font-size: 0.97rem; }

/* Weggever / wachtlijst */
.freebie, .waitlist { text-align: center; }
.freebie { background: var(--blauw-licht); border-radius: 24px; }
.waitlist-form { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.waitlist-form input[type="email"] {
  padding: 0.85rem 1.2rem; border-radius: 999px; border: 2px solid var(--terracotta);
  font-size: 1rem; font-family: inherit; min-width: 260px;
}
.form-note { font-size: 0.9rem; opacity: 0.8; }
.gids-form { display: flex; gap: 0.7rem; justify-content: center; align-items: center; margin-top: 1.5rem; flex-wrap: wrap; }
.gids-form input[type="email"], .gids-form input[type="text"] {
  padding: 0.85rem 1.2rem; border-radius: 999px; border: 2px solid var(--terracotta);
  font-size: 1rem; font-family: inherit; min-width: 200px;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Over Sanne (zoals het eerste voorbeeld) */
.over-grid { display: grid; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
@media (min-width: 940px) { .over-grid { grid-template-columns: 1.1fr 1fr; } }
.over-tekst h2 { text-align: left; font-size: 2.4rem; margin: 0.6rem 0 1rem; }
.over-iconen { display: flex; gap: 1.8rem; margin-top: 1.8rem; }
.over-icoon { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.icoon-cirkel { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.icoon-cirkel img { width: 52px; height: 52px; object-fit: contain; }
.icoon-terra { background: #D08058; }
.icoon-blauw { background: #6FA3C8; }
.icoon-roze { background: #E09890; }
.over-kaart { background: #fff; border-radius: 20px; padding: 1.8rem; box-shadow: 0 2px 12px rgba(74,58,50,0.08); }
.over-kaart p:first-child { margin-top: 0; }
.liefs { margin-bottom: 0; }

/* Teaser */
.teaser p { max-width: 680px; margin-left: auto; margin-right: auto; }
.teaser { background: var(--roze-licht); border-radius: 24px; text-align: center; }

/* FAQ (zoals het eerste voorbeeld) */
.faq-lijst { max-width: 760px; margin: 2rem auto 0; }
.faq-item { background: #fff; border-radius: 14px; padding: 0 1.4rem; margin: 0.8rem 0; box-shadow: 0 2px 8px rgba(74,58,50,0.06); }
.faq-item summary {
  font-weight: 800; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev { color: var(--terracotta-donker); font-size: 1.6rem; line-height: 1; transform: rotate(-90deg); transition: transform 0.2s; }
.faq-item[open] .chev { transform: rotate(90deg); }
.faq-item p { margin: 0; padding: 0 0 1.2rem; }

/* Footer */
.site-footer { text-align: center; padding: 2.5rem 1rem; border-top: 1px solid #eee3d8; }
.site-footer a { color: var(--terracotta-donker); font-weight: 700; }
.insta-link { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.insta-link:hover { text-decoration: underline; }
.fineprint { font-size: 0.85rem; opacity: 0.7; }