/* 1RESET – huisstijl premium blauw (logo 03: Fraunces Black 1R-ligatuur), Fraunces + Hanken Grotesk + IBM Plex Mono.
   Productlijnen houden hun eigen kleur: avond lavendel/pruim, nacht nachtblauw, energie robijn, hydrate mist, ochtend perzik, herstel salie, tools zand. */
:root {
  color-scheme: light;
  /* huisstijl: premium blauw (logo 03) */
  --brand: #276A9C;      /* premium blauw */
  --deep: #173F5F;       /* diep blauw */
  --steel: #4CA7D1;      /* staalblauw */
  --ice: #F2FAFF;        /* ijswit */
  --silver: #E4EAF0;     /* zilver */
  --ground: #F4F8FB;
  --paper: #FFFFFF;
  --plum: var(--deep);   /* oude naam, nu diep blauw */
  --plum-2: #1F5582;
  --night: #0F2C44;
  --ink: #10263A;
  --muted: #4E6A82;
  --line: #D8E6F0;
  --ruby: var(--brand);  /* accentkleur van de site, nu premium blauw */
  --ruby-soft: #E3F0F8;
  --lav: #E6F1F9;
  --sand: #EFE8DC;
  --mist: #E1ECF1;
  --peach: #F6E4DC;
  --sage: #E3EEE8;
  --ok: #2F7D57;
  /* productlijnen (verpakking) */
  --lijn-avond: #E7E2F3; --lijn-avond-sterk: #3A2148;
  --lijn-nacht: #E2E8F2; --lijn-nacht-sterk: #1C2E52;
  --lijn-energie: #FBE3E6; --lijn-energie-sterk: #D8344E;
  --lijn-hydrate: #E1ECF1; --lijn-hydrate-sterk: #6E93A6;
  --lijn-ochtend: #F6E4DC; --lijn-ochtend-sterk: #E0A06A;
  --lijn-herstel: #E3EEE8; --lijn-herstel-sterk: #5E8C73;
  --lijn-tools: #EFE8DC; --lijn-tools-sterk: #8A7A60;
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --r: 26px;
  --shadow: 0 1px 2px rgba(23,63,95,.05), 0 12px 40px rgba(23,63,95,.08);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.lock { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 650; font-variation-settings: "SOFT" 100, "WONK" 0; margin: 0; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
h1 { font-size: clamp(44px, 6vw, 80px); color: var(--plum); }
h2 { font-size: clamp(34px, 4.6vw, 60px); color: var(--plum); }
h3 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.14; color: var(--plum); }
p { margin: 0; }
.kicker { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose { display: grid; gap: 16px; max-width: 68ch; }
.prose h2 { font-size: clamp(28px, 3.2vw, 40px); margin-top: 18px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 16px/1 var(--f-body); padding: 17px 28px; border-radius: 999px; background: var(--brand); color: #fff; transition: background .2s ease; white-space: nowrap; }
.btn:hover { background: var(--deep); }
.btn.light { background: var(--paper); color: var(--plum); }
.btn.light:hover { background: #E6F1F9; }
.btn.outline { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
.btn.outline:hover { background: var(--plum); color: #fff; }
.btn.ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn.ghost-light:hover { background: #fff; color: var(--plum); }
.btn.small { padding: 11px 18px; font-size: 14.5px; }
.btn.block { width: 100%; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; color: var(--plum); }
.row-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Announcement + header */
.announce { background: var(--plum); color: #E3EEF6; font-size: 13.5px; text-align: center; padding: 10px 16px; }
.announce b { color: #fff; font-weight: 600; }
.announce a { color: #fff; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(244,248,251,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-block: 12px; }
.nav { display: flex; gap: 2px; font-size: 15px; font-weight: 500; align-items: center; flex-wrap: nowrap; }
.nav a { text-decoration: none; padding: 9px 10px; border-radius: 999px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(23,63,95,.06); }
.logo { justify-self: center; text-decoration: none; display: inline-flex; align-items: center; line-height: 0; }
.logo-svg { height: 32px; width: auto; display: block; }
.logo .l-1 { fill: var(--deep); } .logo .l-r { fill: var(--brand); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--plum); flex: none; text-decoration: none; }
.icon-btn:hover { background: rgba(23,63,95,.06); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ruby); color: #fff; font: 500 11px/18px var(--f-mono); text-align: center; }
.menu-btn { display: none; }
.top-actions .btn { margin-left: 8px; }
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .top .wrap { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 560px) { .top-actions .btn { display: none; } .logo-svg { height: 26px; } }

/* Drawers */
.scrim { position: fixed; inset: 0; background: rgba(10,31,49,.45); z-index: 40; }
.side { position: fixed; top: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); z-index: 50; display: flex; flex-direction: column; box-shadow: 0 0 60px rgba(10,31,49,.22);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.side.right { right: 0; } .side.left { left: 0; }
.side-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); gap: 12px; }
.side-head h3 { font-size: 26px; }
.side-body { flex: 1; overflow-y: auto; padding: 8px 22px 24px; }
.mnav { display: grid; }
.mnav a { text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; }
.ship { padding: 14px 22px; background: var(--ground); font-size: 14px; display: grid; gap: 8px; }
.ship .track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ship .track div { height: 100%; background: var(--plum); width: 0; transition: width .4s ease; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.thumb { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; overflow: hidden; }
.thumb svg { width: 86%; height: auto; }
.line b { display: block; font-size: 15px; font-weight: 600; }
.line small { display: block; font-size: 13px; color: var(--muted); }
.qty { display: inline-flex; align-items: center; background: var(--ground); border-radius: 999px; margin-top: 8px; }
.qty button { width: 32px; height: 30px; border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.qty span { min-width: 20px; text-align: center; font: 500 13px/1 var(--f-mono); }
.lp { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rm { display: block; margin-top: 8px; margin-left: auto; font-size: 12.5px; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.empty { padding: 48px 0; text-align: center; color: var(--muted); display: grid; gap: 18px; justify-items: center; }
.drawer-foot { padding: 18px 22px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.sum { display: flex; justify-content: space-between; font-size: 15px; }
.sum.big { font-size: 18px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--plum); color: #fff; padding: 14px 22px; border-radius: 999px; font-size: 15px; z-index: 60; box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; }

/* Sections */
section.block { padding-block: clamp(56px, 7vw, 104px); }
.head { display: grid; gap: 16px; margin-bottom: clamp(28px, 4vw, 52px); }
.head.row { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.head.center { text-align: center; justify-items: center; }
.head.center .lede { margin-inline: auto; }
@media (max-width: 700px) { .head.row { grid-template-columns: 1fr; } }
.page-head { padding-block: clamp(28px, 4vw, 56px) 24px; display: grid; gap: 14px; }
.crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }

/* Hero */
.hero { padding-block: clamp(10px, 2vw, 22px) clamp(40px, 5vw, 72px); }
.hero-card { position: relative; border-radius: calc(var(--r) * 1.4); overflow: hidden; background: radial-gradient(90% 120% at 75% 40%, #1F5582 0%, #0F2C44 55%, #0A1F31 100%); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 600px; }
.hero-copy { display: grid; gap: 24px; align-content: center; padding: clamp(28px, 5vw, 72px); position: relative; z-index: 2; }
.hero-copy .kicker { color: #A9C6DC; }
.hero h1 { font-size: clamp(48px, 6.4vw, 92px); color: #fff; }
.hero h1 em { color: #BFE2F5; }
.hero .lede { color: #C3D8E8; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: #BCD3E4; }
.hero-facts span::before { content: "✓"; color: #BFE2F5; margin-right: 8px; font-weight: 700; }
.hero-stage { position: relative; min-height: 380px; display: grid; place-items: center; padding: 30px; }
.hero-stage .stage-art { width: min(330px, 80%); position: relative; z-index: 1; }
.stars { position: absolute; inset: 0; pointer-events: none; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 32% 72%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,.7) 50%, transparent 51%),
  radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 88%, rgba(255,255,255,.45) 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1px 1px at 22% 45%, rgba(255,255,255,.35) 50%, transparent 51%); }
.moon { position: absolute; right: 7%; top: 9%; width: 76px; height: 76px; border-radius: 50%; box-shadow: inset -16px 6px 0 0 #F3E7C9; opacity: .9; }
@media (max-width: 900px) { .hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; } .hero-stage { min-height: 300px; order: -1; } .moon { width: 52px; height: 52px; } }

/* Ticker */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); padding-block: 16px; }
.ticker-track { display: flex; width: max-content; gap: 42px; font: 400 26px/1 var(--f-display); font-style: italic; color: var(--plum); white-space: nowrap; animation: slide 50s linear infinite; }
.ticker-track span::after { content: "✦"; font-style: normal; font-size: 14px; vertical-align: middle; margin-left: 42px; color: var(--ruby); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } html { scroll-behavior: auto; } }

/* Cards and grids */
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: center; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .cols2, .cols3 { grid-template-columns: minmax(0, 1fr); } .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cols4 { grid-template-columns: minmax(0, 1fr); } }
.box { background: var(--paper); border-radius: var(--r); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); }
.box ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.tint { border-radius: var(--r); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; }
.stat b { font: 400 clamp(40px, 4.5vw, 58px)/1 var(--f-display); color: var(--plum); display: block; }
.stat span { color: var(--muted); font-size: 15px; }
.stat sup { font: 500 11px var(--f-mono); color: var(--muted); }

/* Product cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { display: grid; gap: 12px; align-content: start; }
.card .img { position: relative; border-radius: 22px; aspect-ratio: 1 / 1.05; display: grid; place-items: center; overflow: hidden; text-decoration: none; }
.card .img svg { width: 74%; height: auto; transition: transform .4s ease; }
.card .img:hover svg { transform: scale(1.04) rotate(-1deg); }
.badge { position: absolute; left: 12px; top: 12px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--paper); color: var(--plum); padding: 7px 10px; border-radius: 999px; }
.badge.dark { background: var(--plum); color: #fff; }
.quick { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--plum); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); font-size: 22px; line-height: 1; }
.quick:hover { background: var(--plum); color: #fff; }
.card .meta { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.card .meta a { text-decoration: none; font-weight: 600; font-size: 16.5px; }
.card .meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card .meta .pr { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.card .meta p { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); }

/* Program feature (dark) */
.feature { background: var(--night); color: #E3EEF6; border-radius: calc(var(--r) * 1.4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; }
.feature-img { position: relative; min-height: 460px; background: radial-gradient(80% 80% at 50% 50%, #1F5582 0%, var(--night) 70%); display: grid; place-items: center; padding: 30px; }
.feature-img svg { width: min(360px, 90%); height: auto; }
.feature-copy { padding: clamp(28px, 5vw, 64px); display: grid; gap: 20px; align-content: center; }
.feature-copy h2 { color: #fff; }
.feature-copy .kicker { color: #A9C6DC; }
.feature-copy p { color: #C3D8E8; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; }
.checks li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; }
.feature .checks li::before { color: #B9F0CF; }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-line b { font: 400 54px/1 var(--f-display); color: #fff; }
.price-line s { color: #8AA0B3; font-size: 18px; }
.pill { font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ruby); color: #fff; padding: 7px 10px; border-radius: 999px; }
.pill.soft { background: var(--lav); color: var(--plum); }
.guarantee { border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 14px 16px; font-size: 14.5px; color: #BCD3E4; }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature-img { min-height: 300px; } }

/* Weeks timeline */
.weeks { display: grid; }
.week { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.week:last-child { border-bottom: 1px solid var(--line); }
.week .n { font: 400 26px/1.1 var(--f-display); color: var(--plum); }
.week .n small { display: block; font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ruby); margin-top: 6px; }
.week ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
@media (max-width: 640px) { .week { grid-template-columns: 1fr; gap: 6px; } }

/* Evening timeline */
.steps { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.steps::before { content: ""; position: absolute; left: 44px; top: 20px; bottom: 20px; width: 1.5px; background: var(--line); }
.steps li { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: start; padding: 14px 0; position: relative; }
.steps time { justify-self: center; font: 500 13px/1 var(--f-mono); background: var(--plum); color: #fff; padding: 9px 10px; border-radius: 999px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--ground); font-variant-numeric: tabular-nums; }
.steps b { display: block; font: 400 22px/1.2 var(--f-display); color: var(--plum); }
.steps span { color: var(--muted); font-size: 15px; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pillar { background: var(--paper); border-radius: 22px; padding: 22px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); }
.pillar .tag { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ruby); }
.pillar p { font-size: 15px; color: var(--muted); }

/* Product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding-bottom: clamp(48px, 6vw, 88px); }
.pmain { border-radius: calc(var(--r) * 1.2); aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; overflow: hidden; position: sticky; top: 90px; }
.pmain svg { width: 72%; height: auto; }
.pinfo { display: grid; gap: 22px; }
.pinfo h1 { font-size: clamp(40px, 4.6vw, 62px); }
.pinfo .tagline { font-size: 18px; color: var(--muted); }
.ppr { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ppr b { font: 400 40px/1 var(--f-display); color: var(--plum); font-variant-numeric: tabular-nums; }
.ppr s, .ppr small { color: var(--muted); font-size: 14px; }
.plans { display: grid; gap: 10px; }
.plans button { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--paper); border: 0; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1.5px var(--line); }
.plans button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--plum); }
.plans .radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--plum); display: grid; place-items: center; }
.plans button[aria-pressed="true"] .radio { background: var(--plum); }
.plans button[aria-pressed="true"] .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.plans .ptitle { font-weight: 600; }
.plans .pdesc { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.plans .pprice { font: 400 22px/1 var(--f-display); color: var(--plum); font-variant-numeric: tabular-nums; }
details.acc { border-top: 1px solid var(--line); padding-block: 18px; }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; font: 400 22px/1 var(--f-body); color: var(--plum); transition: transform .2s; flex: none; }
details.acc[open] summary::after { transform: rotate(45deg); }
details.acc > div { margin-top: 12px; color: var(--muted); font-size: 15.5px; display: grid; gap: 8px; }
.claims div { font-size: 14.5px; }
.claims b { color: var(--ink); }
.facts table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.facts th, .facts td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--line); }
.facts td:last-child, .facts th:last-child { text-align: right; }
.facts th { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.note-box { background: #FFF6E5; border-radius: 16px; padding: 14px 16px; font-size: 14px; color: #6B4B12; }
.fine { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.fine span::before { content: "✓ "; color: var(--ok); font-weight: 700; }
@media (max-width: 960px) { .pdp { grid-template-columns: minmax(0, 1fr); } .pmain { position: relative; top: 0; } }

/* Quiz */
.quiz { background: var(--paper); border-radius: calc(var(--r) * 1.4); box-shadow: var(--shadow); padding: clamp(22px, 5vw, 60px); display: grid; gap: 26px; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.qbar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.qbar div { height: 100%; background: var(--plum); transition: width .35s ease; }
.qopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.qopts button { text-align: left; background: var(--ground); border: 0; border-radius: 20px; padding: 20px; cursor: pointer; display: grid; gap: 6px; box-shadow: inset 0 0 0 1.5px transparent; }
.qopts button:hover { box-shadow: inset 0 0 0 1.5px var(--plum); background: var(--paper); }
.qopts b { font-weight: 600; font-size: 16.5px; }
.qopts span { font-size: 14px; color: var(--muted); }
.advice { display: grid; gap: 12px; }
.advice li { margin-bottom: 6px; }
.flag { background: #FBE3E6; border-radius: 18px; padding: 16px 18px; color: #7A1E2E; display: grid; gap: 6px; }

/* Forms */
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 6px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.form input, .form select, .form textarea { font: 400 16px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); border: 0; background: var(--paper); border-radius: 14px; padding: 14px 16px; width: 100%; box-shadow: inset 0 0 0 1.5px var(--line); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--plum); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.4 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); }
.form .check input { width: auto; margin-top: 3px; box-shadow: none; }
.form .msg { font-size: 14px; color: var(--ok); min-height: 1.4em; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form input { flex: 1 1 220px; min-width: 0; font-size: 16px; padding: 15px 20px; border-radius: 999px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.inline-form input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--plum); }

/* Newsletter / CTA bands */
.band { background: var(--lav); border-radius: calc(var(--r) * 1.3); padding: clamp(26px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
@media (max-width: 860px) { .band { grid-template-columns: minmax(0, 1fr); } }
.promise { background: var(--plum); color: #E3EEF6; }
.promise h2, .promise h3 { color: #fff; }
.promise .kicker { color: #A5BFD3; }
.promise-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); }
.promise-grid div { padding: 28px 22px 0 0; display: grid; gap: 10px; align-content: start; }
.promise-grid div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.14); }
.promise-grid p { color: #B9CFE0; font-size: 15px; }
@media (max-width: 900px) {
  .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise-grid div:nth-child(3) { padding-left: 0; border-left: 0; }
  .promise-grid div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); margin-top: 26px; }
}
@media (max-width: 520px) { .promise-grid { grid-template-columns: minmax(0, 1fr); } .promise-grid div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); margin-top: 22px; } }

/* Story */
.story-art { position: relative; border-radius: calc(var(--r) * 1.4); overflow: hidden; background: radial-gradient(90% 90% at 70% 20%, #1F5582 0%, #0F2C44 55%, #0A1F31 100%); color: #fff; padding: clamp(28px, 4vw, 56px); display: grid; align-content: end; min-height: 420px; }
.story-art h2 { color: #fff; position: relative; }
.story-art h2 em { color: #BFE2F5; }
.clock { position: absolute; right: 8%; top: 12%; font: 400 clamp(56px, 8vw, 110px)/1 var(--f-mono); color: rgba(191,226,245,.26); }
.photo-ph { border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--lav) 0 14px, #EAF3FA 14px 28px); aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--muted); font: 500 13px var(--f-mono); letter-spacing: .1em; }
.quote { font: 400 clamp(24px, 2.6vw, 34px)/1.25 var(--f-display); font-style: italic; color: var(--plum); max-width: 30ch; }
.sign { font: 400 28px/1 var(--f-display); font-style: italic; color: var(--plum); }

/* Footer */
.site-foot { margin-top: clamp(56px, 7vw, 100px); background: var(--night); color: #BCD3E4; padding-block: 60px 30px; overflow: hidden; }
.f-grid { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.f-grid h4 { margin: 0 0 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8AA0B3; }
.f-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.f-grid a { text-decoration: none; } .f-grid a:hover { color: #fff; }
.f-grid .logo { justify-self: start; color: #fff; }
.f-grid .logo .l-1 { fill: var(--steel); } .f-grid .logo .l-r { fill: #fff; }
.wordmark { font: 400 clamp(84px, 22vw, 320px)/.8 var(--f-display); letter-spacing: -.04em; color: rgba(255,255,255,.06); margin-top: 36px; white-space: nowrap; }
.legal { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #8AA0B3; display: grid; gap: 8px; }
.sources { font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; margin-top: 18px; }
@media (max-width: 800px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-grid > div:first-child { grid-column: 1 / -1; } }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; cursor: pointer; background: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--line); }
.chip[aria-pressed="true"] { background: var(--plum); color: #fff; box-shadow: none; }

/* Table */
.tbl { overflow-x: auto; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--ground); }
.tbl tr:last-child td { border-bottom: 0; }
[tabindex="-1"]:focus { outline: none; }

/* ===== Uitbreiding: mega-menu, filters, productpagina, winkelmand, trechter ===== */
.top { position: sticky; }
.nav-btn { border: 0; background: none; cursor: pointer; padding: 9px 10px; border-radius: 999px; font: 500 15px/1.6 var(--f-body); color: var(--ink); white-space: nowrap; }
.nav-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 8px; }
.nav-btn:hover, .nav-btn[aria-expanded="true"], .nav-btn[aria-current="page"] { background: rgba(23,63,95,.06); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 30px 60px rgba(23,63,95,.12); z-index: 29; }
.mega .wrap { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1fr; gap: 32px; padding-block: 28px 36px; }
.mega h4 { margin: 0 0 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mega-list { display: grid; gap: 2px; }
.mega-list a { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; padding: 9px 12px; border-radius: 12px; font-weight: 500; }
.mega-list a:hover { background: var(--ground); }
.mega-prods { display: grid; gap: 6px; }
.mega-prods a { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; text-decoration: none; padding: 6px; border-radius: 14px; }
.mega-prods a:hover { background: var(--ground); }
.mega-prods .mi { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.mega-prods .mi svg { width: 88%; }
.mega-prods b { display: block; font-size: 15px; }
.mega-feature { border-radius: 22px; background: radial-gradient(90% 90% at 70% 20%, #1F5582 0%, var(--night) 70%); color: #E3EEF6; padding: 22px; display: grid; gap: 8px; align-content: end; text-decoration: none; min-height: 220px; }
.mega-feature h3 { color: #fff; }
.mega-feature span:last-child { font-size: 14px; color: #BCD3E4; }
@media (max-width: 1100px) { .mega { display: none !important; } }
.mnav a.sub { font-size: 15px; padding: 10px 0 10px 14px; color: var(--muted); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filters .sel { display: flex; flex-wrap: wrap; gap: 10px; }
.filters select { border: 0; background: var(--paper); padding: 11px 38px 11px 16px; border-radius: 999px; font-size: 14.5px; box-shadow: inset 0 0 0 1.5px var(--line); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23173F5F' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-top { position: sticky; top: 64px; z-index: 5; background: var(--ground); padding-block: 12px 4px; }

.opts { border: 0; margin: 0; padding: 0; min-width: 0; }
.opt-label { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding: 0; }
.opt-label b { color: var(--ink); font: 600 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button { padding: 10px 16px; border-radius: 999px; background: var(--paper); border: 0; cursor: pointer; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--line); }
.swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--plum); }
.ptabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.ptabs button { border: 0; background: none; cursor: pointer; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.ptabs button[aria-selected="true"] { background: var(--plum); color: #fff; }
.ppanel { display: grid; gap: 12px; font-size: 15.5px; }
.ppanel p { color: var(--ink); }
.pmain { position: relative; }
.pmain .badge { position: absolute; left: 16px; top: 16px; }
.included { display: grid; gap: 8px; }
.included a { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-decoration: none; background: var(--ground); border-radius: 16px; padding: 8px 14px 8px 8px; }
.included .mi { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.included .mi svg { width: 88%; }
.included b { display: block; font-size: 15px; }

.upsell { margin-top: 16px; background: var(--ground); border-radius: 18px; padding: 12px; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.upsell .thumb { width: 56px; height: 56px; }
.upsell b { font-size: 14.5px; display: block; }
.upsell span { font-size: 13px; color: var(--muted); display: block; }
.routine-tip { margin-top: 14px; font-size: 13.5px; background: var(--lav); border-radius: 14px; padding: 10px 14px; }
.sum.disc span:last-child { color: var(--ok); }
.lp s { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }

.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.rung { background: var(--paper); border-radius: var(--r); padding: 26px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); position: relative; text-decoration: none; transition: transform .2s ease; }
.rung:hover { transform: translateY(-3px); }
.rung .n { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--ruby); }
.rung .from { font: 400 30px/1 var(--f-display); color: var(--plum); }
.rung .from small { font: 400 14px/1 var(--f-body); color: var(--muted); }
.rung .go { font-weight: 600; color: var(--plum); }
.rung.dark { background: radial-gradient(90% 90% at 70% 20%, #1F5582 0%, var(--night) 70%); color: #E3EEF6; }
.rung.dark h3, .rung.dark .from, .rung.dark .go { color: #fff; }
.rung.dark .from small, .rung.dark p { color: #BCD3E4; }
@media (max-width: 900px) { .ladder { grid-template-columns: minmax(0, 1fr); } }
.hydra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; background: var(--mist); border-radius: calc(var(--r) * 1.4); padding: clamp(24px, 5vw, 64px); }
.hydra-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hydra-art > div { background: rgba(255,255,255,.6); border-radius: 22px; padding: 12px; }
@media (max-width: 860px) { .hydra { grid-template-columns: minmax(0, 1fr); } }
.appteaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.appteaser .phone-wrap { background: radial-gradient(90% 90% at 50% 40%, #1F5582 0%, var(--night) 75%); border-radius: calc(var(--r) * 1.4); padding: 28px; display: grid; place-items: center; }
.appteaser .phone-wrap svg { width: min(300px, 90%); }
@media (max-width: 860px) { .appteaser { grid-template-columns: minmax(0, 1fr); } }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.feat-list li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.feat-list b { font-weight: 600; }
.feat-list span { font-size: 14.5px; color: var(--muted); }
@media (max-width: 560px) { .feat-list { grid-template-columns: minmax(0, 1fr); } }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.screens > div { background: radial-gradient(90% 90% at 50% 30%, #1F5582 0%, var(--night) 80%); border-radius: var(--r); padding: 22px 16px 10px; display: grid; gap: 10px; justify-items: center; color: #BCD3E4; text-align: center; font-size: 14px; }
.screens svg { width: min(220px, 100%); }
@media (max-width: 860px) { .screens { grid-template-columns: minmax(0, 1fr); } }
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; }
.price-card { background: var(--paper); border-radius: var(--r); padding: 26px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.price-card.hot { box-shadow: inset 0 0 0 2px var(--plum), var(--shadow); }
.price-card .big { font: 400 44px/1 var(--f-display); color: var(--plum); }
@media (max-width: 640px) { .pricing { grid-template-columns: minmax(0, 1fr); } }
.feature-light { background: var(--sand); color: var(--ink); }
.feature-light .feature-img { background: transparent; }
.feature-light .feature-copy h2 { color: var(--plum); }
.feature-light .feature-copy .kicker { color: var(--muted); }
.feature-light .feature-copy p { color: var(--muted); }
.feature-light .price-line b { color: var(--plum); }
.feature-light .price-line s { color: var(--muted); }

/* Telefoon: twee producten naast elkaar */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .card { gap: 8px; }
  .card .img { border-radius: 16px; }
  .card .img svg { width: 84%; }
  .card .badge { left: 8px; top: 8px; font-size: 9.5px; padding: 5px 7px; }
  .card .quick { width: 36px; height: 36px; right: 8px; bottom: 8px; font-size: 19px; }
  .card .meta { grid-template-columns: minmax(0, 1fr); }
  .card .meta a { font-size: 14.5px; }
  .card .meta .pr { text-align: left; font-size: 14.5px; }
  .card .meta p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .btn { padding: 11px 10px; font-size: 13.5px; line-height: 1.2; white-space: normal; text-align: center; }
}

/* ---------- Slaaptest-popup (quiz.js) ---------- */
.rq-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.rq-wrap[hidden] { display: none !important; }
.rq-scrim { position: absolute; inset: 0; background: rgba(15,44,68,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rq { position: relative; width: min(580px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper); border-radius: calc(var(--r) * 1.1); box-shadow: 0 30px 80px rgba(15,44,68,.35); padding: clamp(24px, 4vw, 40px); display: grid; gap: 16px; }
.rq::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: calc(var(--r) * 1.1) calc(var(--r) * 1.1) 0 0; background: linear-gradient(90deg, var(--plum), var(--ruby)); }
.rq-x { position: absolute; top: 12px; right: 12px; }
.rq-body { display: grid; gap: 16px; }
.rq h2 { font-size: clamp(28px, 4vw, 38px); color: var(--plum); padding-right: 36px; }
.rq h2 em { color: var(--ruby); }
.rq h2:focus { outline: none; }
.rq-sub { color: var(--muted); font-size: 16px; }
.rq-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 40px; }
.rq-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rq-bar div { height: 100%; background: var(--plum); border-radius: 99px; transition: width .3s ease; }
.rq-opts { display: grid; gap: 10px; }
.rq-opts button { text-align: left; font: 600 16.5px/1.3 var(--f-body); color: var(--ink); background: var(--ground); border: 0; border-radius: 18px; padding: 17px 20px; cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s, background .15s; }
.rq-opts button:hover, .rq-opts button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--plum); background: var(--paper); }
.rq-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.rq-form { display: grid; gap: 10px; }
.rq-form label { font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rq-form input[type="email"], .rq-form input[type="text"], .rq-form input[type="tel"] { width: 100%; font: 400 16px/1.3 var(--f-body); color: var(--ink); padding: 14px 16px; border-radius: 14px; border: 0; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--line); }
.rq-form input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--plum); }
.rq-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rq-two > div { display: grid; gap: 8px; }
.rq-check { display: flex !important; gap: 10px; align-items: flex-start; font: 400 15px/1.45 var(--f-body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; margin-top: 4px; cursor: pointer; }
.rq-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: #173F5F; flex: none; }
.rq-err { color: var(--ruby); font-size: 14px; min-height: 1.2em; }
.rq-pill { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; border: 0; cursor: pointer; background: var(--plum); color: #fff; font: 600 14.5px/1 var(--f-body); padding: 14px 18px; border-radius: 999px; box-shadow: 0 12px 30px rgba(23,63,95,.3); display: inline-flex; gap: 8px; align-items: center; }
.rq-pill:hover { background: var(--plum-2); }
.rq-pill span { color: #F3E7C9; font-size: 16px; }
@media (max-width: 760px) {
  .rq-wrap { place-items: end center; padding: 0; }
  .rq { width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .rq::before { border-radius: 26px 26px 0 0; }
  .rq-two { grid-template-columns: minmax(0, 1fr); }
  .rq-pill { font-size: 13.5px; padding: 12px 15px; }
}

/* Footerknop die eruitziet als link */
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.linkbtn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Order bump in de winkelmand ---------- */
.bump { margin-top: 14px; display: grid; grid-template-columns: 24px 56px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--ruby-soft); box-shadow: inset 0 0 0 1.5px rgba(39,106,156,.35); cursor: pointer; }
.bump input { width: 20px; height: 20px; accent-color: #D8344E; }
.bump .thumb { width: 56px; height: 56px; }
.bump b { display: block; font-size: 14.5px; font-weight: 600; }

/* ---------- Personalisatie ---------- */
.voorjou { background: var(--paper); border-radius: calc(var(--r) * 1.2); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.voorjou h2 em { color: var(--ruby); }
.voorjou-copy { display: grid; gap: 16px; }
.voorjou-card .card { max-width: 340px; margin-inline: auto; }
.persona-card { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; }
.persona-card h3 { font-size: 22px; }
.persona-card p { font-size: 15px; }
.persona-art svg { width: 110px; height: 110px; display: block; }
.coffee-block { background: var(--night); color: #E3EEF6; border-radius: var(--r); padding: 22px; display: grid; gap: 16px; align-content: space-between; }
.coffee-block h3 { color: #fff; font-size: 22px; }
.coffee-block h3 em { color: #BFE2F5; }
.coffee-block p { color: #BCD3E4; font-size: 15px; }
.coffee-block .kicker { color: #A9C6DC; }
.coffee-block .btn.outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); justify-self: start; }
.coffee-block .btn.outline:hover { background: #fff; color: var(--plum); }
.coffee-block.soft { background: var(--lav); color: var(--ink); }
.coffee-block.soft h3 { color: var(--plum); }
.coffee-block.soft p { color: var(--muted); }
.coffee-block.soft .kicker { color: var(--muted); }
.coffee-block.soft .btn.outline { color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
@media (max-width: 860px) { .voorjou { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .persona-card { grid-template-columns: 76px 1fr; } .persona-art svg { width: 76px; height: 76px; } }

/* ---------- Plan- en bedankpagina ---------- */
.plan-hero { border-radius: calc(var(--r) * 1.4); background: radial-gradient(90% 120% at 75% 40%, #1F5582 0%, #0F2C44 55%, #0A1F31 100%); color: #fff; padding: clamp(26px, 5vw, 64px); display: grid; gap: 18px; position: relative; overflow: hidden; }
.plan-hero h1 { font-size: clamp(40px, 6vw, 76px); color: #fff; }
.plan-hero h1 em { color: #BFE2F5; }
.plan-hero .kicker { color: #A9C6DC; }
.plan-hero p { color: #C3D8E8; max-width: 60ch; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-chips span { background: rgba(255,255,255,.1); color: #E3EEF6; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.tips3 { counter-reset: tip; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tips3 li { list-style: none; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; display: grid; gap: 8px; align-content: start; }
.tips3 li::before { counter-increment: tip; content: "0" counter(tip); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--ruby); }
.tips3 b { font: 400 22px/1.15 var(--f-display); color: var(--plum); }
.tips3 span { color: var(--muted); font-size: 15px; }
.tips3 { padding: 0; margin: 0; }
@media (max-width: 860px) { .tips3 { grid-template-columns: minmax(0, 1fr); } }
.offer { background: var(--paper); border-radius: calc(var(--r) * 1.2); box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); overflow: hidden; }
.offer-img { display: grid; place-items: center; padding: 20px; min-height: 300px; }
.offer-img svg { width: min(340px, 90%); height: auto; }
.offer-copy { padding: clamp(22px, 4vw, 44px); display: grid; gap: 16px; align-content: center; }
.offer-copy h2 { color: var(--plum); }
.offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.offer-price b { font: 400 52px/1 var(--f-display); color: var(--plum); font-variant-numeric: tabular-nums; }
.offer-price s { color: var(--muted); font-size: 18px; }
@media (max-width: 860px) { .offer { grid-template-columns: minmax(0, 1fr); } .offer-img { min-height: 220px; } }
.next-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .next-steps { grid-template-columns: minmax(0, 1fr); } }
.notice { background: var(--peach); border-radius: 18px; padding: 16px 18px; font-size: 15px; }
.orderlist { display: grid; gap: 8px; }
.orderlist div { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--paper); border-radius: 16px; padding: 8px 14px 8px 8px; box-shadow: var(--shadow); }
.orderlist .thumb { width: 56px; height: 56px; }
.funnel { display: grid; gap: 10px; }
.funnel div { display: grid; grid-template-columns: 180px 1fr 70px; gap: 12px; align-items: center; font-size: 15px; }
.funnel i { display: block; height: 14px; border-radius: 99px; background: var(--plum); min-width: 2px; }
@media (max-width: 560px) { .funnel div { grid-template-columns: 1fr 60px; } .funnel i { grid-column: 1 / -1; } }

/* =====================================================================
   Combi-structuur (29-09): structuur en beweging uit het winkelontwerp,
   in de premium blauwe huisstijl. Alles wat beweegt staat onder
   .beweegt (gezet door beweging.js, nooit bij prefers-reduced-motion).
   ===================================================================== */
:root { --top-h: 68px; --ease: cubic-bezier(.2,.7,.2,1); }

/* Overslaan-link zichtbaar bij focus */
.skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 90; background: var(--paper); color: var(--deep); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); }

/* Aankondigingsbalk met wisselende regels */
.announce { position: relative; background: var(--deep); padding: 0 16px; min-height: 40px; display: grid; place-items: center; overflow: hidden; }
.ann-track { display: grid; width: 100%; max-width: var(--wrap); }
.ann { grid-area: 1 / 1; margin: 0; padding: 10px 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: #E3EEF6; }
.ann:not(.on) { visibility: hidden; }
.ann a { color: #fff; text-underline-offset: 3px; }
.beweegt .ann { transition: opacity .5s ease, transform .5s var(--ease), visibility 0s .5s; }
.beweegt .ann:not(.on) { opacity: 0; transform: translateY(8px); }
.beweegt .ann.on { transition: opacity .5s ease, transform .5s var(--ease), visibility 0s; }

/* Sticky header met blur; de rand komt pas na scrollen */
.top { border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.top.scrolled { border-bottom-color: var(--line); background: rgba(244,248,251,.86); box-shadow: 0 8px 30px rgba(23,63,95,.06); }
.top .wrap { padding-block: 12px; }

/* Mega-menu: per categorie, per doel, en een feature-kaart */
.mega { border-top: 1px solid var(--line); max-height: calc(100vh - var(--top-h) - 20px); overflow-y: auto; }
.mega .wrap { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; padding-block: 28px 34px; }
.beweegt .mega:not([hidden]) { animation: megaIn .28s var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } }
.mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.mega-groups h5 { margin: 0 0 8px; font: 600 14.5px/1.2 var(--f-body); color: var(--deep); }
.mega-groups h5 a { text-decoration: none; } .mega-groups h5 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-groups li a { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 6px; border-radius: 10px; font-size: 14.5px; }
.mega-groups li a:hover { background: var(--ground); }
.mega-groups li a.more { color: var(--brand); font-weight: 600; font-size: 13.5px; padding-left: 6px; }
.mi-s { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; flex: none; }
.mi-s svg { width: 92%; }
.mega-sep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mega-side { display: grid; gap: 12px; align-content: start; }
.mega-feature { position: relative; overflow: hidden; min-height: 250px; align-content: end; }
.mega-feature .kicker { color: #A9C6DC; position: relative; }
.mega-feature h3 { position: relative; }
.mega-feature .mf-txt { position: relative; font-size: 14px; color: #BCD3E4; }
.mega-feature .mf-art { position: absolute; right: -14%; top: -12%; width: 70%; opacity: .9; transition: transform .5s var(--ease); }
.mega-feature:hover .mf-art { transform: translateY(-4px) rotate(-2deg); }
.mega-kit { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; text-decoration: none; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--ground); }
.mega-kit:hover { background: var(--lav); }
.mega-kit .mi { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.mega-kit .mi svg { width: 88%; }
.mega-kit b { display: block; font-size: 15px; }
@media (max-width: 1240px) { .mega-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Zijmenu en lades: inschuiven */
.side:focus { outline: none; }
.beweegt .side.left:not([hidden]) { animation: sideL .32s var(--ease); }
.beweegt .side.right:not([hidden]) { animation: sideR .32s var(--ease); }
.beweegt .scrim:not([hidden]) { animation: fadeIn .25s ease; }
@keyframes sideL { from { transform: translateX(-100%); } }
@keyframes sideR { from { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
.mnav a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mnav a.sub span { font: 500 12px/1 var(--f-mono); color: var(--muted); }
.side-search { width: 100%; display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 13px 16px; border: 0; border-radius: 999px; background: var(--ground); color: var(--muted); cursor: pointer; font-size: 15.5px; text-align: left; }
.side-search svg { width: 20px; height: 20px; flex: none; }
.side-cta { display: grid; gap: 10px; margin-top: 22px; }

/* Zoekpaneel */
.searchbox { display: flex; align-items: center; gap: 10px; background: var(--ground); border-radius: 999px; padding: 4px 16px; flex: 1; min-width: 0; color: var(--muted); }
.searchbox svg { width: 20px; height: 20px; flex: none; }
.searchbox input { border: 0; background: transparent; padding: 11px 0; flex: 1; min-width: 0; font-size: 16px; color: var(--ink); }
.searchbox input:focus { outline: none; }
.searchbox:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }
.results { display: grid; gap: 2px; padding-top: 10px; }
.results > a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-decoration: none; padding: 8px; border-radius: 16px; }
.results > a:hover, .results > a:focus-visible { background: var(--ground); }
.results .mi { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.results .mi svg { width: 88%; }
.results b { display: block; font-weight: 600; }
.results span span { display: block; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results .pr { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14.5px; white-space: nowrap; }
.results > a.all { display: block; font-weight: 600; color: var(--brand); padding: 14px 8px; }
.results .chips a { text-decoration: none; }
.beweegt .results > a { animation: resIn .3s var(--ease) both; }
@keyframes resIn { from { opacity: 0; transform: translateY(6px); } }

/* Toast schuift in */
.beweegt .toast { animation: toastIn .35s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Footer: vijf kolommen en het grote vage woordmerk */
.f-grid { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.wordmark { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
@media (max-width: 1000px) { .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Scroll-reveal: alleen als beweging.js het element verborgen heeft; eindstand altijd zichtbaar */
.beweegt .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s var(--ease); }
.beweegt .rv.in { opacity: 1; transform: none; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* Count-up */
[data-count] .cu { font-variant-numeric: tabular-nums; }

/* zzz in het nachtbeeld */
.story-art .zz { position: absolute; left: 10%; top: 14%; font: italic 400 64px/1 var(--f-display); color: rgba(191,226,245,.5); pointer-events: none; }
.story-art .zz span { display: inline-block; }
.story-art .zz span:nth-child(2) { font-size: .75em; }
.story-art .zz span:nth-child(3) { font-size: .55em; }
.beweegt .story-art .zz span { animation: zz 4s ease-in-out infinite; }
.beweegt .story-art .zz span:nth-child(2) { animation-delay: .6s; }
.beweegt .story-art .zz span:nth-child(3) { animation-delay: 1.2s; }
@keyframes zz { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-14px); opacity: 1; } }

/* Hero: nachtscène op canvas; de gewone illustratie is de terugval */
.hero-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.hero-stage.live canvas { opacity: 1; }
.hero-stage.live .stage-art { visibility: hidden; }
.beweegt .moon { animation: moonGlow 7s ease-in-out infinite; }
@keyframes moonGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(243,231,201,0)); } 50% { filter: drop-shadow(0 0 18px rgba(243,231,201,.35)); } }
.beweegt .hero-stage:not(.live) .stage-art { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Productpagina: sleepbare live canvas */
.pmain canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; cursor: grab; touch-action: pan-y; }
.pmain canvas:active { cursor: grabbing; }
.pmain.live canvas { display: block; }
.pmain.live > svg { visibility: hidden; }
.drag-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--deep); background: rgba(255,255,255,.78); padding: 8px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.pmain:not(.live) .drag-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .story-art .zz span, .moon, .stage-art { animation: none !important; }
  .card .img svg, .rung, .goal, .routine-view, .ship .track div, .qbar div { transition: none !important; }
}

/* ---------- Homepage-onderdelen uit het ontwerp ---------- */
/* Doelkaarten die bij hover omhoog komen */
.goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.goal { position: relative; overflow: hidden; border-radius: var(--r); padding: 22px; min-height: 300px; display: grid; align-content: space-between; text-decoration: none; color: var(--deep); transition: transform .3s var(--ease), box-shadow .3s ease; }
.goal:hover, .goal:focus-visible { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(23,63,95,.12); }
.goal h3 { position: relative; max-width: 10ch; z-index: 1; }
.goal .go { position: relative; z-index: 1; justify-self: start; font-weight: 600; font-size: 14.5px; background: rgba(255,255,255,.8); padding: 9px 14px; border-radius: 999px; }
.goal-art { position: absolute; right: -12%; bottom: -10%; width: 76%; transition: transform .5s var(--ease); }
.goal:hover .goal-art { transform: translateY(-6px) rotate(-3deg) scale(1.03); }
.goal-more { margin-top: 16px; color: var(--muted); font-size: 15px; }
@media (max-width: 1000px) { .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .goal { min-height: 210px; padding: 18px; } .goal h3 { font-size: 20px; } }

/* Stappenstrook onder het programma */
.cflow { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border-radius: calc(var(--r) * 1.1); box-shadow: var(--shadow); overflow: hidden; }
.cflow > * { padding: 24px 22px; display: grid; gap: 8px; align-content: start; }
.cflow > * + * { border-left: 1px solid var(--line); }
.cflow .n { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; color: var(--brand); }
.cflow b { font: 650 21px/1.15 var(--f-display); color: var(--deep); }
.cflow p { font-size: 14.5px; color: var(--muted); }
.cflow-link { text-decoration: none; background: var(--ice); transition: background .2s; }
.cflow-link:hover { background: var(--lav); }
@media (max-width: 960px) { .cflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cflow > :nth-child(3) { border-left: 0; } .cflow > :nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .cflow { grid-template-columns: minmax(0, 1fr); } .cflow > * + * { border-left: 0; border-top: 1px solid var(--line); } }

/* Routine-tijdlijn met sticky beeld */
.routine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.rsteps::before { content: ""; position: absolute; left: 48px; top: 30px; bottom: 30px; width: 1.5px; background: var(--line); }
.rgroup { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 22px 0 8px 108px; }
.rgroup:first-child { padding-top: 0; }
.rsteps button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px 14px 0; border-radius: 18px; width: 100%; position: relative; transition: background .25s, box-shadow .25s; }
.rsteps button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rsteps time, .rsteps .t { justify-self: center; font: 500 12.5px/1 var(--f-mono); background: var(--ground); color: var(--muted); padding: 9px 10px; border-radius: 999px; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--ground); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .25s, color .25s; }
.rsteps b { display: block; font: 650 22px/1.15 var(--f-display); color: var(--deep); }
.rsteps span span { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.rsteps li.on button { background: var(--paper); box-shadow: var(--shadow); }
.rsteps li.on time, .rsteps li.on .t { background: var(--deep); color: #fff; box-shadow: 0 0 0 6px var(--paper); }
.routine-view { position: sticky; top: calc(var(--top-h) + 24px); border-radius: calc(var(--r) * 1.2); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: var(--lav); transition: background .45s ease; }
.rv-art { width: 70%; margin-bottom: 60px; }
.beweegt .rv-art.swap { animation: swapIn .5s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.routine-view .cap { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 18px; padding: 12px 12px 12px 18px; }
.routine-view .cap b { display: block; font-weight: 600; }
.routine-view .cap span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .routine { grid-template-columns: minmax(0, 1fr); }
  .routine-view { order: -1; position: relative; top: 0; aspect-ratio: auto; height: min(300px, 64vw); }
  .rv-art { width: auto; height: 62%; margin-bottom: 50px; } .rv-art svg { height: 100%; width: auto; }
}
@media (max-width: 520px) { .rsteps button { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; } .rsteps::before { left: 38px; } .rgroup { padding-left: 86px; } .rsteps b { font-size: 19px; } }

/* Productrails met scroll-snap */
.grid.rail { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, calc((100% - 3 * 18px) / 4)); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 12px; scrollbar-width: thin; }
.grid.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 6px; align-items: center; }
.rail-nav .icon-btn { box-shadow: inset 0 0 0 1.5px var(--line); font-size: 18px; }
@media (max-width: 700px) { .rail-nav .icon-btn { display: none; } }
@media (max-width: 560px) { .grid.rail { grid-auto-columns: 72%; gap: 12px; } }

/* Donkere kit-feature */
.kit { background: var(--night); color: #E3EEF6; border-radius: calc(var(--r) * 1.4); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; }
.kit-img { position: relative; min-height: 460px; background: radial-gradient(80% 80% at 50% 50%, #1F5582 0%, var(--night) 72%); display: grid; place-items: center; padding: 30px; }
.kit-img > [data-art] { width: min(380px, 88%); position: relative; }
.kit-copy { padding: clamp(28px, 5vw, 64px); display: grid; gap: 20px; align-content: center; }
.kit-copy h2 { color: #fff; } .kit-copy h2 em { color: #BFE2F5; }
.kit-copy .kicker { color: #A9C6DC; }
.kit-copy > p { color: #C3D8E8; }
.kit-list { list-style: none; margin: 0; padding: 0; display: grid; }
.kit-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); text-decoration: none; }
.kit-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.kit-list .mi { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.kit-list .mi svg { width: 90%; }
.kit-list b { font-weight: 600; display: block; color: #fff; }
.kit-list span span { font-size: 13.5px; color: #A9C6DC; display: block; }
.kit-list .pr { color: #A9C6DC; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kit { grid-template-columns: minmax(0, 1fr); } .kit-img { min-height: 300px; } }

/* Bundelbouwer met prijstreden */
.builder { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pick { position: relative; border: 0; background: var(--paper); border-radius: 20px; padding: 12px 12px 16px; cursor: pointer; text-align: left; display: grid; gap: 6px; box-shadow: inset 0 0 0 1.5px transparent, var(--shadow); transition: box-shadow .15s, transform .2s var(--ease); }
.pick:hover { transform: translateY(-2px); }
.pick[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--deep), var(--shadow); }
.pick .pi { border-radius: 14px; aspect-ratio: 1.15; display: grid; place-items: center; overflow: hidden; }
.pick .pi svg { width: 76%; }
.pick b { font-weight: 600; font-size: 15px; line-height: 1.25; }
.pick > span:last-child { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick .tick { position: absolute; top: 20px; right: 20px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; font-size: 14px; color: transparent; }
.pick[aria-pressed="true"] .tick { background: var(--deep); color: #fff; box-shadow: none; }
.summary { position: sticky; top: calc(var(--top-h) + 24px); background: var(--paper); border-radius: 24px; box-shadow: var(--shadow); padding: 24px; display: grid; gap: 16px; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiers div { border-radius: 14px; background: var(--ground); padding: 12px 6px; text-align: center; font-size: 12.5px; color: var(--muted); transition: background .25s, color .25s; }
.tiers div b { display: block; font: 650 24px/1.1 var(--f-display); color: var(--deep); }
.tiers div.on { background: var(--deep); color: #BCD3E4; }
.tiers div.on b { color: #fff; }
.summary .sel { display: grid; gap: 6px; font-size: 14.5px; min-height: 40px; }
.summary .sel div { display: flex; justify-content: space-between; gap: 12px; }
.sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.sum-line b { font: 650 34px/1 var(--f-display); color: var(--deep); }
.sum-line s { color: var(--muted); font-size: 15px; }
.hint { font-size: 13.5px; color: var(--muted); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--brand); }
.summary .btn { white-space: normal; line-height: 1.25; text-align: center; }
@media (max-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr); } .summary { position: relative; top: 0; } }
@media (max-width: 420px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pick .tick { top: 16px; right: 16px; } }

/* App met een interactieve telefoon */
.appgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.appstage { position: relative; overflow: hidden; border-radius: calc(var(--r) * 1.4); background: radial-gradient(90% 90% at 50% 40%, #1F5582 0%, var(--night) 75%); padding: clamp(24px, 4vw, 48px) 16px; display: grid; place-items: center; }
.phone { position: relative; z-index: 1; width: min(330px, 100%); border-radius: 46px; background: #0A1F31; padding: 12px; box-shadow: 0 40px 80px rgba(0,0,0,.4), inset 0 0 0 2px #24476A; }
.beweegt .phone { animation: floaty 7s ease-in-out infinite; }
.phone:focus-within { animation-play-state: paused; }
.screen { background: var(--ground); border-radius: 36px; padding: 14px 16px 20px; display: grid; gap: 10px; min-height: 560px; align-content: start; }
.ph-top { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--f-body); padding: 4px 6px 6px; color: var(--ink); }
.ph-top .notch { width: 92px; height: 24px; border-radius: 999px; background: #0A1F31; }
.screen h3 { font-size: 28px; }
.ph-form, .ph-done { display: grid; gap: 10px; }
.ph-card { background: var(--paper); border-radius: 18px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 1px 2px rgba(23,63,95,.06); }
.ph-card label, .ph-lbl { font-weight: 600; font-size: 14px; }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ph-card input[type="time"] { border: 0; background: var(--ground); border-radius: 10px; padding: 7px 10px; font: 500 15px/1 var(--f-mono); color: var(--ink); }
.ph-card input[type="range"] { width: 100%; accent-color: #173F5F; }
.ph-out { font: 500 13px/1 var(--f-mono); color: var(--muted); }
.ph-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-yn button { border: 0; border-radius: 12px; background: var(--ground); padding: 10px 0; cursor: pointer; font-weight: 600; font-size: 14px; }
.ph-yn button[aria-pressed="true"] { background: var(--deep); color: #fff; }
.ph-big { font: 650 24px/1.15 var(--f-display); color: var(--deep); }
.ph-note { font-size: 12.5px; color: var(--muted); }
.bubble { background: var(--lav); border-radius: 18px 18px 18px 6px; padding: 12px 14px; font-size: 14px; }
.bubble small { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.screen .btn { width: 100%; }
@media (max-width: 960px) { .appgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .screen { min-height: 0; padding: 12px 12px 16px; } .phone { border-radius: 38px; padding: 9px; } .screen { border-radius: 30px; } }

/* Verhaal, slaaptest-band, FAQ met tabbladen, nieuwsbrief */
.story-grid { align-items: stretch; }
.story-art .moon { top: 10%; right: 12%; }
.band-night { background: radial-gradient(90% 140% at 85% 20%, #1F5582 0%, var(--night) 70%); color: #E3EEF6; }
.band-night h2 { color: #fff; } .band-night h2 em { color: #BFE2F5; }
.band-night .kicker { color: #A9C6DC; } .band-night .lede { color: #C3D8E8; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); }
.faq-tabs .chips { margin-bottom: 18px; }
.chip[aria-selected="true"] { background: var(--deep); color: #fff; box-shadow: none; }
.beweegt [role="tabpanel"]:not([hidden]) { animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 860px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.news { background: var(--lav); border-radius: calc(var(--r) * 1.3); padding: clamp(26px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: end; position: relative; overflow: hidden; }
.news::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; box-shadow: inset -34px 14px 0 0 rgba(39,106,156,.12); pointer-events: none; }
.news > * { position: relative; z-index: 1; }
@media (max-width: 860px) { .news { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kaarten: hover-zoom en snel toevoegen ---------- */
.img-wrap { position: relative; }
.card .img { transition: box-shadow .3s ease; }
.card .img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 50% 35%, rgba(255,255,255,.35), transparent 70%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.card .img:hover::after { opacity: 1; }
.card .img:hover svg { transform: scale(1.06) rotate(-1.5deg); }
.img-wrap .quick { position: absolute; right: 12px; bottom: 12px; z-index: 2; transition: transform .25s var(--ease), opacity .25s ease, background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) {
  .img-wrap .quick { opacity: 0; transform: translateY(6px) scale(.9); }
  .img-wrap:hover .quick, .img-wrap .quick:focus-visible { opacity: 1; transform: none; }
}
@media (hover: none) { .img-wrap .quick { display: none; } }

/* ---------- Shop: sticky toolbar ---------- */
.shop-top { top: var(--top-h); z-index: 6; box-shadow: 0 10px 20px -18px rgba(23,63,95,.35); }
@media (max-width: 700px) {
  .shop-top .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .shop-top .chips::-webkit-scrollbar { display: none; }
  .shop-top .chip { flex: none; }
  .filters .sel select { padding: 9px 30px 9px 12px; font-size: 13.5px; background-position: right 10px center; }
  .filters .inline-form input { padding: 11px 16px; }
}

/* ---------- Productpagina: galerij, live beeld en buy-bar ---------- */
.pgal { position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 12px; min-width: 0; }
.pmain { position: relative; top: 0; }
.pthumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ptile { background: var(--paper); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; align-content: end; min-height: 96px; box-shadow: var(--shadow); }
.ptile b { font: 650 clamp(20px, 2.2vw, 28px)/1.05 var(--f-display); color: var(--deep); overflow-wrap: anywhere; }
.ptile span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 960px) { .pgal { position: relative; top: 0; } }
@media (max-width: 420px) { .pthumbs { gap: 8px; } .ptile { padding: 10px 12px; min-height: 84px; } }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 14px; }
.buybar div { font-size: 14px; line-height: 1.3; min-width: 0; }
.buybar b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar span { color: var(--muted); }
.buybar .btn { margin-left: auto; padding: 14px 20px; font-size: 15px; flex: none; }
@media (max-width: 760px) {
  .buybar.show { display: flex; }
  .beweegt .buybar.show { animation: barUp .3s var(--ease); }
  body.has-buybar .rq-pill { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.has-buybar .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes barUp { from { transform: translateY(100%); } }
body.lock .buybar { display: none; }

/* ---------- Begeleidingspakketten (programma.html) ---------- */
.tiers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tier { background: var(--paper); border-radius: calc(var(--r) * 1.1); padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.tier:hover { transform: translateY(-4px); }
.tier .ti { position: relative; border-radius: 20px; aspect-ratio: 1.35; display: grid; place-items: center; overflow: hidden; }
.tier .ti svg { width: auto; height: 82%; }
.tier .tb { padding-inline: 10px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tier .tt { font-size: 15px; color: var(--muted); }
.tier .tp { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tier .tp b { font: 650 40px/1 var(--f-display); color: var(--deep); }
.tier .tp s { color: var(--muted); }
.tier .tp span { font-size: 14px; color: var(--muted); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; flex: 1; align-content: start; }
.tier li { display: flex; gap: 10px; } .tier li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; }
.tier .ta { display: flex; gap: 10px; flex-wrap: wrap; }
.tier.hot { background: var(--night); color: #E3EEF6; }
.tier.hot h3, .tier.hot .tp b { color: #fff; }
.tier.hot .tt, .tier.hot .tp span, .tier.hot .tp s { color: #BCD3E4; }
.tier.hot li::before { color: #B9F0CF; }
.tier.hot .btn.outline { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
@media (max-width: 960px) { .tiers3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* Focusring ook zichtbaar op donkere vlakken */
.announce :focus-visible, .hero :focus-visible, .feature :focus-visible, .kit :focus-visible, .site-foot :focus-visible, .promise :focus-visible,
.band-night :focus-visible, .tier.hot :focus-visible, .appstage :focus-visible, .story-art :focus-visible, .mega-feature:focus-visible, .rung.dark:focus-visible { outline-color: #BFE2F5; }

/* Count-up: het getal in .stat b blijft groot (de spans van beweging.js erven de cijferstijl, niet .stat span) */
.stat b > span { font: inherit; color: inherit; }

/* =====================================================================
   Telefoon (29-09): alleen tikdoelen, invoer, balken en afbrekingen.
   Palet, typografie en opbouw blijven zoals op desktop.
   ===================================================================== */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  /* Tikdoelen van minstens 44 px, zonder dat de knoppen er anders uitzien */
  .logo { min-height: 44px; }
  .btn.small, .chip, .ptabs button, .swatches button, .rq-pill, .buybar .btn { min-height: 44px; }
  .f-grid ul { gap: 0; }
  .f-grid li > a, .f-grid li > .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: -12px -4px; padding-inline: 4px; }
  .link { padding-block: 12px; margin-block: -12px; }
  .card .meta a { padding-block: 11px; margin-block: -11px; }
  details.acc { padding-block: 0; }
  details.acc summary { padding-block: 18px; }
  details.acc > div { margin-top: -6px; padding-bottom: 18px; }
  .qty button { width: 44px; height: 44px; }
  .qty span { font-size: 15px; }
  .rm { padding-block: 12px; margin-top: -4px; margin-bottom: -12px; }
  .form label { line-height: 1.3; }
  .form .check { min-height: 44px; align-items: center; }
  .form .check input { margin-top: 0; }

  /* Invoer van 16 px: iOS zoomt dan niet in */
  .ph-card input[type="time"] { font-size: 16px; min-height: 44px; }
  .ph-card input[type="range"] { height: 44px; margin-block: -12px; }
  .ph-yn button { min-height: 44px; }
  .filters select { font-size: 16px; }

  /* Kleine labels leesbaar (minstens 12 px) */
  .badge, .card .badge, .pill, .drag-hint, .stat sup, .pillar .tag, .facts th, .tbl th, .bubble small, .cart-count { font-size: 12px; }

}
@media (max-width: 760px) {
  /* FAQ-tabbladen: één rij die je opzij veegt, zoals de filters in de shop */
  .faq-tabs .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .faq-tabs .chips::-webkit-scrollbar { display: none; }
  .faq-tabs .chip { flex: none; }

  /* Signalentabel: onder elkaar in plaats van zijwaarts scrollen */
  .tbl table { min-width: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { display: block; padding: 0; border: 0; }
  .tbl td + td { color: var(--muted); font-size: 14.5px; }

  /* Nachtbeeld: klok onder de maan in plaats van erdoor */
  .story-art .clock { top: 26%; }

  /* Vaste balken: de laatste regels van de footer blijven vrij van de slaaptest-knop en de buy-bar */
  body.has-buybar .site-foot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.lock .toast { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); }

  /* Menu, lades en slaaptest: de pagina erachter schuift niet mee */
  .rq { max-height: 92dvh; }
}
html:has(body.lock) { overflow: hidden; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body:has(> .rq-pill) .site-foot { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) { body.has-buybar:has(> .rq-pill) .site-foot { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } }
.side-body, .rq, .mega { overscroll-behavior: contain; }

/* Shop op de telefoon: alleen de categorieën plakken onder de header, filters in een raster van twee */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .shop-top { display: contents; }
  .shop-top .chips { position: sticky; top: var(--top-h); z-index: 6; background: var(--ground); margin-block: 0 12px !important; padding-block: 10px; box-shadow: 0 10px 20px -18px rgba(23,63,95,.35); }
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .filters .sel { display: contents; }
  .filters .sel select { width: 100%; min-height: 44px; font-size: 16px; padding: 10px 30px 10px 14px; }
  .filters .inline-form { max-width: none !important; }
  .filters .inline-form input { min-height: 44px; }
}

/* Telefoon liggend: productbeeld naast de koopinformatie in plaats van een scherm vullend vierkant */
@media (min-width: 600px) and (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pmain { aspect-ratio: auto; height: calc(100svh - var(--top-h) - 32px); min-height: 240px; }
}