/* Dark theme for the public site. Reworked 11 Oct 2026 (night) on Lenn's reference: near-black base,
   translucent grey glass for every surface, soft white type, red only in imagery and small accents.
   Active when <html data-theme="dark">. ?theme=light on the homepage compares. The order flow stays light. */

html[data-theme="dark"] {
  color-scheme: dark;
  /* tokens every page reads through var() */
  --bg: #0B0B0C; --card: rgba(255,255,255,.06); --ink: #F2F2F0; --muted: rgba(242,242,240,.6); --line: rgba(255,255,255,.08);
  --blue: #F2F2F0; --blue-light: rgba(255,255,255,.07); --blue-dark: #FFFFFF;
  --sky: rgba(242,242,240,.6); --sky-light: rgba(255,255,255,.07); --sky-dark: #F2F2F0;
  --grey: rgba(255,255,255,.22); --grey-light: rgba(255,255,255,.07);
  --dark: #0B0B0C; --dark-2: #121214; --dark-3: #19191C;
  --glass: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.09); --glass-line: rgba(255,255,255,.08); --glass-line-2: rgba(255,255,255,.14);
  --soft-white: #F2F2F0;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] body::before { display: none; }
html[data-theme="dark"] body::after { opacity: .035; }
html[data-theme="dark"] ::selection { background: rgba(215,38,46,.35); color: #fff; }

/* ---- motion: slower, Apple-like ---- */
html[data-theme="dark"] [data-reveal] { transform: translateY(18px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
html[data-theme="dark"] [data-reveal].in { transform: none; }

/* ---- type and generic utilities ---- */
html[data-theme="dark"] .text-ink { color: var(--ink); }
html[data-theme="dark"] .text-ink\/80 { color: rgba(242,242,240,.78); }
html[data-theme="dark"] .text-ink\/70 { color: rgba(242,242,240,.7); }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .lead { color: var(--muted); }
html[data-theme="dark"] .text-white\/85, html[data-theme="dark"] .text-white\/80 { color: rgba(242,242,240,.8); }
html[data-theme="dark"] .text-white\/65, html[data-theme="dark"] .text-white\/60 { color: rgba(242,242,240,.6); }
html[data-theme="dark"] .text-blue-dark, html[data-theme="dark"] .text-blue { color: var(--ink); }
html[data-theme="dark"] .bg-bg, html[data-theme="dark"] .bg-bg\/80 { background-color: var(--bg); }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-card { background-color: var(--glass); }
html[data-theme="dark"] .bg-card\/60, html[data-theme="dark"] .bg-white\/60 { background-color: rgba(255,255,255,.03); }
html[data-theme="dark"] .bg-blue-light, html[data-theme="dark"] .bg-grey-light, html[data-theme="dark"] .bg-sky-light { background-color: var(--glass-2); }
html[data-theme="dark"] .bg-blue { background-color: var(--soft-white); color: #0B0B0C; }
html[data-theme="dark"] .bg-blue:hover, html[data-theme="dark"] .hover\:bg-blue-dark:hover { background-color: #FFFFFF; }
html[data-theme="dark"] .bg-blue .text-white { color: #0B0B0C; }
html[data-theme="dark"] .border-line, html[data-theme="dark"] .border-line\/70, html[data-theme="dark"] .border-blue\/30, html[data-theme="dark"] .border-y, html[data-theme="dark"] .border-t, html[data-theme="dark"] .border-b { border-color: var(--glass-line); }
html[data-theme="dark"] .bento { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="dark"] .bento:hover { background: var(--glass-2); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
html[data-theme="dark"] .bento-icon { background: var(--glass-2); color: var(--ink); }
html[data-theme="dark"] .shadow-card, html[data-theme="dark"] .shadow-soft { box-shadow: 0 20px 60px -30px rgba(0,0,0,.7); }
html[data-theme="dark"] .shadow-slab { box-shadow: 0 40px 100px -40px rgba(0,0,0,.85); }
html[data-theme="dark"] .step-number { color: #fff; opacity: .1; }
html[data-theme="dark"] hr { border-color: var(--glass-line); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--glass); color: var(--ink); border-color: var(--glass-line-2); }
html[data-theme="dark"] input::placeholder { color: rgba(242,242,240,.4); }
html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] summary:focus-visible { outline-color: rgba(255,255,255,.7); }

/* ---- nav: glass pill ---- */
html[data-theme="dark"] .nav-bar { background: rgba(18,18,20,.55); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-color: var(--glass-line); box-shadow: 0 20px 50px -30px rgba(0,0,0,.8); }
html[data-theme="dark"] .nav-link { color: rgba(242,242,240,.72); }
html[data-theme="dark"] .nav-link:hover { color: #fff; }
html[data-theme="dark"] .nav-link::after { background: rgba(255,255,255,.6); }
html[data-theme="dark"] .logo-lockup, html[data-theme="dark"] .logo-mark { color: var(--ink); }
html[data-theme="dark"] .lang-btn { color: rgba(242,242,240,.45); }
html[data-theme="dark"] .lang-btn.active { color: #fff; }
html[data-theme="dark"] .lang-sep { color: rgba(255,255,255,.15); }
html[data-theme="dark"] .nav-dd-panel { background: rgba(24,24,27,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--glass-line-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
html[data-theme="dark"] .nav-dd-panel a { color: var(--ink); }
html[data-theme="dark"] .nav-dd-panel a:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .nav-dd-panel a span:last-child { color: rgba(242,242,240,.5); }
html[data-theme="dark"] .nm-menu summary { background: var(--glass); color: var(--ink); border-color: var(--glass-line-2); }
html[data-theme="dark"] .nm-menu[open] summary { background: var(--soft-white); color: #0B0B0C; }
html[data-theme="dark"] .nm-menu-panel { background: rgba(24,24,27,.96); border-color: var(--glass-line-2); }
html[data-theme="dark"] .nm-menu-panel a { color: var(--ink); border-color: var(--glass-line); }
html[data-theme="dark"] .nm-menu-panel .group-label { color: rgba(242,242,240,.5); }
html[data-theme="dark"] .top-bar { background: rgba(11,11,12,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--glass-line); }

/* ---- buttons: soft white primary with dark text, glass secondary ---- */
html[data-theme="dark"] .btn-ink, html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-white { background: var(--soft-white); color: #0B0B0C; box-shadow: 0 10px 30px -14px rgba(0,0,0,.8); }
html[data-theme="dark"] .btn-ink *, html[data-theme="dark"] .btn-primary *, html[data-theme="dark"] .btn-white * { color: #0B0B0C; }
html[data-theme="dark"] .btn-ink:hover, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-white:hover { background: #FFFFFF; }
html[data-theme="dark"] .btn-ghost, html[data-theme="dark"] .btn.border { background: var(--glass); border: 1px solid var(--glass-line-2); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] .btn.border:hover { background: var(--glass-2); border-color: rgba(255,255,255,.26); }
html[data-theme="dark"] .pill-cta { background: var(--glass); border-color: var(--glass-line-2); color: var(--ink); }

/* ---- homepage slabs and sections ---- */
html[data-theme="dark"] .hero-slab { background: #121214; border: 1px solid var(--glass-line); }
html[data-theme="dark"] .hero-art::after { background: linear-gradient(90deg, rgba(11,11,12,.86) 0%, rgba(11,11,12,.55) 38%, rgba(11,11,12,.1) 70%, rgba(11,11,12,0) 100%), linear-gradient(180deg, rgba(11,11,12,0) 55%, rgba(11,11,12,.75) 100%); }
html[data-theme="dark"] .hero-cells { border-top-color: var(--glass-line); background: rgba(255,255,255,.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
html[data-theme="dark"] .hero-cell + .hero-cell { border-color: var(--glass-line); }
html[data-theme="dark"] .trust-dot { background: rgba(255,255,255,.3); }
html[data-theme="dark"] .how-slab, html[data-theme="dark"] .dark-slab { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html[data-theme="dark"] #cta .how-slab { background: radial-gradient(60% 70% at 85% 10%, rgba(215,38,46,.16), transparent 65%), var(--glass); }
html[data-theme="dark"] .how-card { background: rgba(255,255,255,.05); border-color: var(--glass-line); }
html[data-theme="dark"] .mock { background: rgba(11,11,12,.7); border-color: var(--glass-line); }
html[data-theme="dark"] .mock-row { background: rgba(255,255,255,.05); color: rgba(242,242,240,.75); }
html[data-theme="dark"] .mock-row.on { background: rgba(255,255,255,.12); color: #fff; }
html[data-theme="dark"] .mock-row.on .mock-check { background: var(--soft-white); border-color: var(--soft-white); color: #0B0B0C; }
html[data-theme="dark"] .band-white { background: transparent; border-color: var(--glass-line); }
html[data-theme="dark"] .chip { background: var(--glass); border-color: var(--glass-line); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-theme="dark"] .chip.hormone { color: rgba(242,242,240,.5); }
html[data-theme="dark"] .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
html[data-theme="dark"] .split-card { border: 1px solid var(--glass-line); }
html[data-theme="dark"] .sport-card { background: var(--glass); border: 1px solid var(--glass-line); }
html[data-theme="dark"] .sport-card::after { background: linear-gradient(180deg, rgba(11,11,12,0) 35%, rgba(11,11,12,.88) 100%); }
html[data-theme="dark"] .sport-card .sc-arrow { background: rgba(255,255,255,.12); }
html[data-theme="dark"] .sport-card:hover .sc-arrow { background: var(--soft-white); color: #0B0B0C; }
html[data-theme="dark"] .quote-card { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="dark"] .quote-card.bg-grey-light { background: var(--glass-2); }
html[data-theme="dark"] .avatar { background: var(--glass-2); color: var(--ink); border: 1px solid var(--glass-line-2); }
html[data-theme="dark"] .stars .on { fill: var(--red); }
html[data-theme="dark"] .stars .off { fill: rgba(255,255,255,.18); }
html[data-theme="dark"] .why-card { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html[data-theme="dark"] .why-mark { background: var(--glass-2); }
html[data-theme="dark"] .chip-dark { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="dark"] .chip-dark.opt { color: rgba(242,242,240,.5); }
html[data-theme="dark"] .chip-dark.sport { border-color: rgba(255,255,255,.22); }
html[data-theme="dark"] .hero-video video { opacity: .85; }
html[data-theme="dark"] .hero-video::after { background: linear-gradient(180deg, rgba(11,11,12,.2) 0%, rgba(11,11,12,.4) 45%, rgba(11,11,12,.9) 100%); }
html[data-theme="dark"] .section-video::after { background: linear-gradient(180deg, rgba(11,11,12,.45) 0%, rgba(11,11,12,.85) 100%); }

/* ---- maps: grey, not white ---- */
html[data-theme="dark"] .map-card { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="dark"] .loc-map, html[data-theme="dark"] .pp-map { background: #0F0F10; }
html[data-theme="dark"] .loc-map path[stroke="none"], html[data-theme="dark"] .pp-map path[stroke="none"] { fill: #0F0F10 !important; }
html[data-theme="dark"] .loc-map path[stroke="#0F0F11"], html[data-theme="dark"] .pp-map path[stroke="#0F0F11"] { fill: #1C1C1F !important; stroke: rgba(255,255,255,.14) !important; }
html[data-theme="dark"] .pp-cluster { background: rgba(255,255,255,.14); color: var(--ink); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); font-weight: 500; }
html[data-theme="dark"] .loc-dot { background: rgba(255,255,255,.42); border: 1.5px solid rgba(255,255,255,.18); box-shadow: none; }
html[data-theme="dark"] .pp-dot, html[data-theme="dark"] .pp-marker { background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .loc-overlay, html[data-theme="dark"] .pp-overlay { background: rgba(24,24,27,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--glass-line-2); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
html[data-theme="dark"] .pp-overlay .text-muted { color: var(--muted); }
html[data-theme="dark"] #loc-count { color: var(--ink); }
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: rgba(24,24,27,.96); color: var(--ink); }
html[data-theme="dark"] .leaflet-bar a { background: rgba(24,24,27,.9); color: var(--ink); border-color: var(--glass-line-2); }
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(24,24,27,.7); color: rgba(242,242,240,.45); }
html[data-theme="dark"] .leaflet-control-attribution a { color: rgba(242,242,240,.65); }
html[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.55) contrast(1.05); }

/* ---- biomarkers library ---- */
html[data-theme="dark"] .cat-btn { background: var(--glass); color: rgba(242,242,240,.8); border-color: var(--glass-line); }
html[data-theme="dark"] .cat-btn[aria-pressed="true"] { background: var(--soft-white); color: #0B0B0C; }
html[data-theme="dark"] .cat-count { background: rgba(255,255,255,.1); color: inherit; }
html[data-theme="dark"] .cat-btn[aria-pressed="true"] .cat-count { background: rgba(0,0,0,.1); }
html[data-theme="dark"] .marker-chip { background: var(--glass-2); color: rgba(242,242,240,.75); }
html[data-theme="dark"] .marker-card-norec { border-color: rgba(255,255,255,.16); }

/* ---- how it works: report excerpt ---- */
html[data-theme="dark"] .rep-chip { background: var(--glass-2); color: rgba(242,242,240,.8); }
html[data-theme="dark"] .rep-row, html[data-theme="dark"] .receipt-total { border-color: var(--glass-line); }
html[data-theme="dark"] .rep-scale { opacity: .75; }
html[data-theme="dark"] .rep-dot { background: var(--soft-white); border-color: #0B0B0C; }

/* ---- policy pages ---- */
html[data-theme="dark"] .policy h2, html[data-theme="dark"] .policy strong, html[data-theme="dark"] .policy a { color: var(--ink); }
html[data-theme="dark"] .policy p, html[data-theme="dark"] .policy li { color: rgba(242,242,240,.7); }

/* ---- footer ---- */
html[data-theme="dark"] .footer-dark { border-top: 1px solid var(--glass-line); background: var(--bg); color: rgba(242,242,240,.6); }
html[data-theme="dark"] .footer-dark a { color: rgba(242,242,240,.6); }
html[data-theme="dark"] .footer-dark a:hover { color: #fff; }

/* ---- order flow (bestellen, betaald, locatie) ---- */
html[data-theme="dark"] .card { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
html[data-theme="dark"] .bar { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .bar i { background: var(--soft-white); }
html[data-theme="dark"] .opt, html[data-theme="dark"] .cs-box { background: var(--glass); border-color: var(--glass-line-2); color: var(--ink); }
html[data-theme="dark"] .opt:hover, html[data-theme="dark"] .cs-box:hover { border-color: rgba(255,255,255,.3); background: var(--glass-2); }
html[data-theme="dark"] .opt[aria-pressed="true"], html[data-theme="dark"] .cs-box[aria-pressed="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
html[data-theme="dark"] .tick { border-color: rgba(255,255,255,.3); background: transparent; }
html[data-theme="dark"] .opt[aria-pressed="true"] .tick, html[data-theme="dark"] .cs-box[aria-pressed="true"] .tick { background: var(--red); border-color: var(--red); }
html[data-theme="dark"] .opt[aria-pressed="true"] .tick svg, html[data-theme="dark"] .cs-box[aria-pressed="true"] .tick svg { stroke: #fff; }
html[data-theme="dark"] .opt[aria-pressed="true"], html[data-theme="dark"] .cs-box[aria-pressed="true"] { border-color: rgba(215,38,46,.55); }
html[data-theme="dark"] .bar i { background: var(--red); }
html[data-theme="dark"] .btn-red { background: var(--red); color: #fff; }
html[data-theme="dark"] .btn-red:hover:not(:disabled) { background: #E3333B; }
html[data-theme="dark"] .btn-red:disabled { background: rgba(215,38,46,.35); color: rgba(255,255,255,.6); }
html[data-theme="dark"] .pc-field input, html[data-theme="dark"] .cs-sign input, html[data-theme="dark"] .field input, html[data-theme="dark"] .field select { background: var(--glass); border-color: var(--glass-line-2); color: var(--ink); }
html[data-theme="dark"] .pc-field input:focus, html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .cs-sign input:focus { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
html[data-theme="dark"] .pc-msg.ok { color: var(--ink); }
html[data-theme="dark"] .pc-msg.bad, html[data-theme="dark"] .err, html[data-theme="dark"] .field .fe { color: #F2A6A6; }
html[data-theme="dark"] .btn-primary:disabled { background: rgba(255,255,255,.25); color: rgba(0,0,0,.6); }
html[data-theme="dark"] .btn-soft { background: var(--glass); border: 1px solid var(--glass-line-2); color: var(--ink); }
html[data-theme="dark"] .btn-soft:hover { background: var(--glass-2); }
html[data-theme="dark"] .btn-soft[aria-pressed="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
html[data-theme="dark"] .chip { background: var(--glass-2); color: var(--ink); border-color: var(--glass-line); }
html[data-theme="dark"] .chip.ok { background: rgba(215,38,46,.16); color: #F0767C; }
html[data-theme="dark"] .mk { background: var(--glass); border-color: var(--glass-line-2); color: var(--ink); }
html[data-theme="dark"] .mk:hover, html[data-theme="dark"] .mk[aria-expanded="true"] { background: var(--glass-2); border-color: rgba(255,255,255,.35); }
html[data-theme="dark"] .mk .i { background: rgba(255,255,255,.12); color: var(--ink); }
html[data-theme="dark"] .mk-detail, html[data-theme="dark"] .note, html[data-theme="dark"] .addon, html[data-theme="dark"] .nearby { background: var(--glass); border-color: var(--glass-line); color: var(--ink); }
html[data-theme="dark"] .note.warn { background: rgba(215,38,46,.1); border-color: rgba(215,38,46,.3); }
html[data-theme="dark"] .mk-detail .tag { background: rgba(255,255,255,.1); color: var(--ink); }
html[data-theme="dark"] .price-box, html[data-theme="dark"] .summary { background: var(--glass-2); border-color: var(--glass-line); }
html[data-theme="dark"] .price-row, html[data-theme="dark"] .summary .row, html[data-theme="dark"] .summary .row.total { border-color: var(--glass-line); }
html[data-theme="dark"] .stack svg circle, html[data-theme="dark"] .stack svg path { stroke: #E8474F; }
html[data-theme="dark"] .stack b { color: #F0767C; }
html[data-theme="dark"] .nb { background: var(--glass); border-color: var(--glass-line); }
html[data-theme="dark"] .nb-km { color: var(--ink); }
html[data-theme="dark"] .nb-tag { background: rgba(215,38,46,.16); color: #F0767C; }
html[data-theme="dark"] .escape a { color: rgba(242,242,240,.7); }
html[data-theme="dark"] .escape a:hover { color: #fff; }
html[data-theme="dark"] .cs-text, html[data-theme="dark"] .hint, html[data-theme="dark"] .multi-note, html[data-theme="dark"] .mk-hint, html[data-theme="dark"] .pc-lab, html[data-theme="dark"] .step-count, html[data-theme="dark"] .grp { color: var(--muted); }
html[data-theme="dark"] .cs-text strong, html[data-theme="dark"] .cs-text a { color: var(--ink); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.1), rgba(255,255,255,.05)); }
html[data-theme="dark"] .build li::before { background: var(--red); color: #fff; }
html[data-theme="dark"] .spinner { border-color: rgba(0,0,0,.25); border-top-color: #0B0B0C; }
html[data-theme="dark"] footer, html[data-theme="dark"] #foot { color: var(--muted); }