/* Het Levensboek — v6 "fris editorial".
   Geen framework. Twee lettertypes met een duidelijke taakverdeling:
   Fraunces is de boekstem (koppen en citaten), Figtree is alle gewone tekst
   en interface. Georgia en system-ui zijn eruit — die maakten de site oud.
   Palet opgeschoond: helder warm wit in plaats van custard, bijna-zwarte inkt
   in plaats van bruin, en één accent dat nu écht opvalt omdat de rest rustig is. */

:root {
  --paper: #fbf9f6;        /* helder warm wit */
  --paper-deep: #f2eee7;   /* zacht warmgrijs vlak */
  --card: #ffffff;
  --ink: #1e1a17;          /* bijna zwart, niet bruin */
  --ink-soft: #6e645b;     /* warmgrijs voor bijtekst */
  --accent: #c4522b;
  --accent-deep: #a33f1e;
  --accent-soft: #fbeae1;
  --cream: #ffffff;        /* alias: oudere pagina's gebruiken dit nog */
  --rule: #e7e1d8;
  --max: 68rem;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 16px;
  --schaduw-zacht: 0 1px 2px rgba(30, 26, 23, .04), 0 10px 26px -14px rgba(30, 26, 23, .16);
  --schaduw-diep: 0 2px 6px rgba(30, 26, 23, .05), 0 26px 50px -22px rgba(30, 26, 23, .34);
  /* verhaallijn-accenten — helderder dan v5, zelfde lichtheid onderling */
  --lijn-leven: #c4522b;   /* terracotta */
  --lijn-jaar: #3e7f63;    /* fris groen */
  --lijn-benen: #b07c1c;   /* amber */
  --lijn-ons: #35688c;     /* helder blauw */
  --lijn-eigen: #6c5896;   /* violet */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; }
h1 { font-size: clamp(2.7rem, 6vw, 4.3rem); font-weight: 560; letter-spacing: -.03em; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.6rem); margin-bottom: .9rem; letter-spacing: -.025em; }
h3 { font-size: 1.18rem; margin-bottom: .45rem; letter-spacing: -.015em; font-weight: 560; }
p + p { margin-top: .8em; }
a { color: var(--accent); }
em { font-style: italic; }
img { max-width: 100%; }

/* Kleine bovenkopjes: één stijl, overal hetzelfde */
.kicker, .stap-kop, .sample-q, .r-kop, .band-bron, .wie, .badge, .nr {
  font-family: var(--sans); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }

/* ── Sticky kop met vaste CTA ───────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 249, 246, .86);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
header.site.gescrold {
  border-bottom-color: var(--rule);
  box-shadow: 0 .3rem 1.2rem rgba(30, 26, 23, .05);
}
header.site .wrap {
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1rem;
  transition: padding .25s;
}
header.site.gescrold .wrap { padding-top: .66rem; padding-bottom: .66rem; }

/* Woordmerk. Let op: dit is een flexcontainer met drie kinderen — het logo,
   het losse tekstknoopje "Het" en de span. Eén gap zou tussen álle drie komen
   en dat trok "Het" en "Levensboek" uit elkaar. Dus gap 0, en de ruimte per
   stuk zetten. Ook aanmelden.php en start.php gebruiken deze opbouw. */
.wordmark {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 560;
  letter-spacing: -.025em; color: var(--ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0;
  white-space: nowrap;
}
.wordmark span { color: var(--ink); margin-left: .26em; }
.wordmark .logo { height: 1.35rem; width: auto; margin-right: .48rem; }
.wordmark:hover span { color: var(--accent); }

nav.main { display: flex; gap: 1.5rem; font-size: .94rem; flex-wrap: wrap; }
nav.main a { color: var(--ink-soft); text-decoration: none; position: relative; padding-bottom: 2px; }
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .25s ease;
}
nav.main a:hover { color: var(--ink); }
nav.main a:hover::after { right: 0; }
.header-cta { flex: none; }
/* let op: .btn zet zelf display:inline-block verderop in dit bestand, dus dit
   verbergen heeft een selector met meer gewicht nodig dan één klasse. */
@media (max-width: 62rem) { header.site .header-cta { display: none; } }
@media (max-width: 46rem) {
  header.site .wrap { gap: .5rem; padding-top: .7rem; padding-bottom: .7rem; }
  .wordmark { font-size: 1.2rem; }
  nav.main {
    order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    gap: 1.1rem; font-size: .85rem; scrollbar-width: none;
    /* zachte rand rechts: laat zien dat er meer staat dan past */
    -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main a { white-space: nowrap; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 58rem) { .hero { grid-template-columns: 1.14fr .86fr; } }
.hero .kicker {
  font-size: .76rem; color: var(--accent);
  display: block; margin-bottom: 1.2rem;
}
.hero h1 { max-width: 15ch; margin-bottom: 1.3rem; }
.hero p.lead { max-width: 34rem; color: var(--ink-soft); font-size: clamp(1.06rem, 1.5vw, 1.18rem); }
.hero .cta-row { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hero .cta-note { font-size: .88rem; color: var(--ink-soft); width: 100%; }

/* Hero-beeld: een echte foto van een album, met het boek er half overheen */
.hero-visual { position: relative; padding-bottom: 3.2rem; }
.hero-foto { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw-diep); }
.hero-foto img { display: block; width: 100%; height: auto; }
.book3d { position: absolute; left: -2.4rem; bottom: -.4rem; width: 40%; perspective: 1400px; }
.book-cover {
  display: block; width: 100%; height: auto;
  transform: rotateY(-15deg) rotateX(2deg);
  border-radius: 3px 7px 7px 3px;
  box-shadow:
    3px 0 0 #f2ece1, 5px 0 0 #eae2d3, 7px 0 0 #f2ece1,
    9px 0 0 #eae2d3, 11px 0 0 #f2ece1, 13px 1px 1px #dcd2bd,
    inset 14px 0 22px -8px rgba(0,0,0,.4),
    inset -2px 0 6px rgba(255,255,255,.15),
    24px 26px 40px -16px rgba(30,26,23,.5);
}
.book-floor {
  position: absolute; left: 8%; right: 2%; bottom: -.7rem; height: 24px;
  background: radial-gradient(50% 60% at 50% 50%, rgba(30,26,23,.26), transparent 72%);
  filter: blur(3px); z-index: -1;
}
.hero-bijschrift { position: absolute; right: 0; bottom: .6rem; font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 58rem) {
  .hero-visual { max-width: 30rem; margin: 0 auto; padding-bottom: 0; }
  .book3d { width: 42%; left: -.5rem; }
  .hero-bijschrift { position: static; display: block; text-align: right; margin-top: .7rem; }
}

/* ── Secties ────────────────────────────────────────────────────────── */
section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
section + section { border-top: 1px solid var(--rule); }
.section-deep { background: var(--paper-deep); }
.section-intro { max-width: 42rem; color: var(--ink-soft); font-size: 1.05rem; }

/* Vertrouwensbalk onder de hero */
.trust { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0; }
.trust-list { list-style: none; margin: 0; padding: 1.3rem 0; display: flex; flex-wrap: wrap;
  gap: 1rem 2.6rem; justify-content: center; }
.trust-list li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.trust-list strong { color: var(--ink); font-size: .94rem; font-weight: 600; }
.trust-list span { color: var(--ink-soft); font-size: .82rem; margin-top: .1rem; }

/* ── Beeldband: één groot fotomoment, met citaat ────────────────────── */
.band {
  position: relative; padding: 0; overflow: hidden;
  min-height: clamp(20rem, 42vw, 30rem);
  display: flex; align-items: flex-end;
  border-top: 1px solid var(--rule);
}
.band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 45%;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(15deg, rgba(22, 18, 15, .84) 0%, rgba(22, 18, 15, .52) 42%, rgba(22, 18, 15, .1) 78%);
}
.band-inner {
  position: relative; z-index: 2;
  max-width: var(--max); width: 100%; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.4rem;
}
.band-quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1.15; letter-spacing: -.03em;
  color: #fff; max-width: 18ch; text-wrap: balance;
}
.band-bron { margin-top: 1rem; font-size: .78rem; color: rgba(255, 255, 255, .68); }

/* ── Keuzehulp ──────────────────────────────────────────────────────── */
.kies { margin-top: 2.2rem; display: grid; gap: 1.9rem; }
.kies-stap .stap-kop { font-size: .74rem; color: var(--accent); margin-bottom: .6rem; display: block; }
.kies-stap h3 { font-size: 1.3rem; margin-bottom: .9rem; }
.opties { display: flex; flex-wrap: wrap; gap: .6rem; }
.optie {
  font-family: var(--sans); font-size: .94rem; font-weight: 500; color: var(--ink);
  padding: .62rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule);
  transition: border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.optie:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--schaduw-zacht); }
.optie.gekozen { background: var(--ink); border-color: var(--ink); color: #fff; }
.kies-stap.wacht { opacity: .32; pointer-events: none; }

.kies-resultaat {
  display: none;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  border-top: 4px solid var(--lijn, var(--accent));
  box-shadow: var(--schaduw-zacht);
  padding: 1.9rem 1.9rem 1.7rem; max-width: 44rem;
}
.kies-resultaat.zichtbaar { display: block; animation: verschijn .35s ease-out; }
@keyframes verschijn { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.kies-resultaat .r-kop { font-size: .72rem; color: var(--lijn, var(--accent)); display: block; margin-bottom: .5rem; }
.kies-resultaat h3 { font-size: 1.5rem; }
.kies-resultaat .r-vraag {
  margin: 1rem 0; padding: .9rem 1.1rem; border-left: 3px solid var(--lijn, var(--accent));
  background: var(--paper); border-radius: 0 10px 10px 0;
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
}
.kies-resultaat .r-stand { color: var(--ink-soft); font-size: .96rem; }
.kies-resultaat .r-prijs { margin-top: .9rem; font-size: .9rem; color: var(--ink-soft); }
.kies-resultaat .btn { margin-top: 1.1rem; }
.lijn-leven { --lijn: var(--lijn-leven); }
.lijn-jaar  { --lijn: var(--lijn-jaar); }
.lijn-benen { --lijn: var(--lijn-benen); }
.lijn-ons   { --lijn: var(--lijn-ons); }
.lijn-eigen { --lijn: var(--lijn-eigen); }

/* ── Zo werkt het ───────────────────────────────────────────────────── */
.how { display: grid; gap: 2.8rem; grid-template-columns: 1fr; margin-top: 2rem; align-items: start; }
@media (min-width: 54rem) { .how { grid-template-columns: 1.1fr .9fr; } }
.steps { display: grid; gap: 1.9rem; counter-reset: stap; }
.steps div { counter-increment: stap; }
.steps div::before {
  content: counter(stap, decimal-leading-zero);
  display: inline-block;
  color: var(--accent);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  margin-bottom: .55rem;
}
.steps p { color: var(--ink-soft); font-size: .99rem; }

/* Chatvenster */
.chat {
  background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 22px;
  padding: 1.15rem 1.05rem 1.25rem;
  box-shadow: var(--schaduw-diep);
  font-size: .92rem;
  display: flex; flex-direction: column; gap: .55rem;
  max-width: 25rem;
}
.chat .chat-kop {
  font-size: .8rem; color: var(--ink-soft); text-align: center;
  padding-bottom: .55rem; border-bottom: 1px solid var(--rule); margin-bottom: .2rem;
}
.chat .chat-kop strong { color: var(--ink); font-weight: 600; }
.msg {
  max-width: 88%; padding: .6rem .85rem; border-radius: 14px;
  line-height: 1.45; box-shadow: 0 1px 2px rgba(30, 26, 23, .06);
}
.msg.in  { background: var(--card); align-self: flex-start; border-top-left-radius: 5px; }
.msg.out { background: #e4f0dc; align-self: flex-end; border-top-right-radius: 5px; }
.msg .van { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--accent); margin-bottom: .2rem; }
.msg.voice { display: flex; align-items: center; gap: .55rem; min-width: 11.5rem; }
.voice .play { width: 1.8rem; height: 1.8rem; border-radius: 50%; flex: none;
  background: var(--accent); position: relative; }
.voice .play::before {
  content: ""; position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: .34rem 0 .34rem .55rem;
  border-color: transparent transparent transparent #fff;
}
.voice .golf { flex: 1; display: flex; align-items: center; gap: 2px; height: 1.35rem; }
.voice .golf i { flex: 1; background: #93a888; border-radius: 2px; min-width: 2px; }
.voice .duur { font-size: .78rem; color: var(--ink-soft); }
.msg.foto img { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: .4rem; }
.chat .chat-noot { font-size: .78rem; color: var(--ink-soft); text-align: center; margin-top: .35rem; }

/* ── Verhaallijnen ──────────────────────────────────────────────────── */
.lijnen { display: grid; gap: 2.6rem; grid-template-columns: 1fr; margin-top: 2rem; align-items: start; }
@media (min-width: 54rem) { .lijnen { grid-template-columns: .82fr 1.18fr; } }
.lijn-foto { margin: 0; }
.lijn-foto img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schaduw-diep); }
.lijn-foto figcaption { margin-top: .85rem; font-size: .84rem; color: var(--ink-soft); max-width: 22rem; }
.lijn-lijst { display: grid; gap: .8rem; }
.lijn-item {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  border-left: 3px solid var(--lijn, var(--accent));
  padding: 1.05rem 1.25rem;
  transition: transform .2s, box-shadow .2s;
}
.lijn-item:hover { transform: translateX(3px); box-shadow: var(--schaduw-zacht); }
.lijn-item .l-naam { font-family: var(--serif); font-size: 1.12rem; font-weight: 560; color: var(--lijn, var(--accent)); }
.lijn-item p { color: var(--ink-soft); font-size: .92rem; margin-top: .15rem; }
.lijn-item .l-vraag { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: .96rem; }

/* ── Voorbeeldverhaal ───────────────────────────────────────────────── */
.voorbeeld-grid { display: grid; gap: 2.6rem; grid-template-columns: 1fr; align-items: start; margin-top: 1.6rem; }
@media (min-width: 54rem) { .voorbeeld-grid { grid-template-columns: 1.25fr .75fr; } }
.sample { max-width: 46rem; }
.sample-q { font-size: .74rem; color: var(--accent); margin-bottom: 1rem; }
blockquote.sample-a {
  position: relative; padding: .4rem 0 .4rem 2.9rem;
  font-family: var(--serif);
  font-size: clamp(1.16rem, 1.7vw, 1.34rem); line-height: 1.62; letter-spacing: -.01em;
}
blockquote.sample-a::before {
  content: "\201C";
  position: absolute; left: 0; top: -.7rem;
  font-family: var(--serif);
  font-size: 5.2rem; line-height: 1; color: var(--accent); opacity: .45;
}
.sample-note { margin-top: 1.1rem; font-size: .88rem; color: var(--ink-soft); }
.voorbeeld-foto { margin: 0; }
.voorbeeld-foto img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schaduw-diep); }
.voorbeeld-foto figcaption { margin-top: .8rem; font-size: .84rem; color: var(--ink-soft); }

/* Twee stemmen */
.twee-stemmen { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.6rem; max-width: 46rem; }
@media (min-width: 44rem) { .twee-stemmen { grid-template-columns: 1fr 1fr; } }
.stem {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  border-top: 3px solid var(--lijn-ons);
  padding: 1.25rem 1.35rem;
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.6;
}
.stem .wie { display: block; font-family: var(--sans); font-size: .7rem; color: var(--lijn-ons); margin-bottom: .45rem; }

/* ── Een blik in een Levensboek ─────────────────────────────────────── */
.showcase { margin-top: 2.2rem; display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .showcase { grid-template-columns: repeat(3, 1fr); } }
.showcase figure { margin: 0; position: relative; }
.showcase .nr {
  position: absolute; z-index: 2; top: .7rem; left: .7rem;
  font-size: .64rem; color: #fff; background: rgba(30, 26, 23, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .22rem .55rem; border-radius: 20px;
}
.showcase img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px;
  box-shadow: var(--schaduw-diep);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.showcase figure:hover img { transform: scale(1.022) translateY(-3px); }
.showcase figcaption { margin-top: .8rem; font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: .96rem; text-align: center; }

/* ── Prijzen ────────────────────────────────────────────────────────── */
.prices { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 53rem) { .prices { grid-template-columns: repeat(3, 1fr); } }
.price {
  position: relative;
  border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column;
  box-shadow: var(--schaduw-zacht);
  transition: transform .2s, box-shadow .2s;
}
.price:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }
.price.founding { border-top: 4px solid var(--accent); }
.price.deluxe { border-top: 4px solid var(--ink); }
.price .badge {
  position: absolute; top: -.72rem; left: 1.5rem; background: var(--accent);
  color: #fff; font-size: .64rem; padding: .3rem .72rem; border-radius: 20px;
}
.price.deluxe .badge { background: var(--ink); }
.price h3 { font-size: 1.14rem; }
.price .amount { font-family: var(--serif); font-size: 2.4rem; font-weight: 560;
  letter-spacing: -.035em; margin: .3rem 0 .8rem; }
.price .amount small { font-family: var(--sans); font-size: .92rem; font-weight: 400;
  letter-spacing: -.005em; color: var(--ink-soft); }
.price ul { list-style: none; margin: 0 0 1.25rem; flex: 1; }
.price li { padding-left: 1.1rem; position: relative; margin-bottom: .5rem; color: var(--ink-soft); font-size: .94rem; }
.price li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px;
  background: var(--accent); border-radius: 2px; }
.price li strong { color: var(--ink); font-weight: 600; }
.price .later { font-size: .86rem; color: var(--ink-soft); margin-bottom: 1rem; }
.price-note { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-soft);
  text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ── Knoppen ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--sans); font-size: .96rem; font-weight: 600; letter-spacing: -.005em;
  padding: .78rem 1.6rem; border-radius: 999px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  box-shadow: 0 1px 2px rgba(163, 63, 30, .18), 0 10px 20px -10px rgba(163, 63, 30, .5);
  cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(163, 63, 30, .2), 0 14px 26px -10px rgba(163, 63, 30, .55); }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); box-shadow: none; }
.btn.ghost:hover { background: var(--card); border-color: var(--ink); }
.btn-sm { font-size: .86rem; padding: .5rem 1.1rem; }

/* Vaste CTA — alle projecten leiden naar één aanmelding */
.cta-sticky {
  position: fixed; z-index: 55; left: 50%; bottom: 1rem;
  transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 1rem;
  max-width: calc(100vw - 2rem);
  padding: .5rem .5rem .5rem 1.2rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--rule); box-shadow: var(--schaduw-diep);
  font-size: .86rem; color: var(--ink-soft);
  opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.cta-sticky.zichtbaar { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cta-sticky span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 34rem) { .cta-sticky span { display: none; } .cta-sticky { padding: .5rem; } }

/* Rustblok */
.calm { background: var(--accent-soft); border-radius: var(--radius); padding: 1.7rem; margin-top: 2rem; max-width: 46rem; }
.calm p { color: var(--ink); }
.calm strong { font-weight: 600; }

/* ── Aanmelden ──────────────────────────────────────────────────────── */
.aanmeld-grid { display: grid; gap: 2.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .aanmeld-grid { grid-template-columns: .8fr 1.2fr; } }
.aanmeld-foto { margin: 0; }
.aanmeld-foto img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schaduw-diep); }
.aanmeld-foto figcaption { margin-top: .8rem; font-family: var(--serif); font-style: italic;
  font-size: .96rem; color: var(--ink-soft); }
.signup { margin-top: 1.7rem; max-width: 42rem; }
.signup-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .signup-grid { grid-template-columns: 1fr 1fr; } }
.signup-msg { grid-column: 1 / -1; }
.signup label { font-size: .82rem; color: var(--ink-soft); display: block; margin-bottom: .32rem; }
.signup input, .signup select, .signup textarea {
  width: 100%; padding: .72rem .85rem; border: 1px solid var(--rule);
  border-radius: 10px; font-size: .98rem; font-family: var(--sans);
  background: var(--card); color: var(--ink);
}
.signup input:focus, .signup select:focus, .signup textarea:focus {
  outline: 3px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent);
}
.signup textarea { min-height: 6rem; }
.signup .hp { position: absolute; left: -9999px; }
.form-note { font-size: .84rem; color: var(--ink-soft); margin-top: .8rem; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
details { border-top: 1px solid var(--rule); padding: 1.05rem 0; }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; color: var(--ink); font-size: 1.02rem; font-weight: 500; }
summary:hover { color: var(--accent); }
details p { margin-top: .6rem; color: var(--ink-soft); }

/* ── Voet ───────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--rule); padding: 2.6rem 0 4.5rem; font-size: .9rem; color: var(--ink-soft); }
footer.site .scope { max-width: 46rem; margin-bottom: 1rem; }
footer.site nav { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-bottom: 1rem; }
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--accent); }

/* Tekstpagina's */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2rem; }

/* ── Beweging: ingehouden, en uit te zetten ─────────────────────────── */
.onthul { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.onthul.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .onthul, .onthul.in { opacity: 1; transform: none; transition: none; }
  .showcase img, .price, .lijn-item, .optie, .btn { transition: none; }
  .cta-sticky { transition: opacity .2s; }
}