/* ==========================================================================
   Theme preset "prisma" — parelgrijs, grafiet en holografische pasteltinten; bento.
   Layout: zwevende witte header met het menu als segmentknop, hero als
   bento-raster (grote witte teksttegel, certificaat als holografische tegel,
   cijfers als grafiettegel), stats als vier pasteltegels, uitgelichte peptiden
   als bento met brede tegels, donkere sectie als zwevend afgerond paneel,
   FAQ in één witte container, LICHTE footer als wit paneel.
   Sfeer: productpagina van een techmerk. Letter: Geist + Geist Mono.
   Contrast: tekst #0D0F14 op #F4F5F7 = 17:1; koraal als tekst = #BF350B (4,8:1).
   Koraal #FF5C2B zelf is alleen stip, lijn of vulling met donkere tekst.
   ========================================================================== */

:root {
  --ink:        #0D0F14;
  --ink-2:      #161922;
  --ink-3:      #222633;
  --paper:      #F4F5F7;
  --paper-2:    #ECEEF2;
  --paper-3:    #E0E3EA;
  --white:      #FFFFFF;
  --text:       #0D0F14;
  --muted:      #4A5060;
  --faint:      #656C7D;
  --line:       rgba(13, 15, 20, 0.09);
  --line-strong:rgba(13, 15, 20, 0.2);
  --on-ink:     #F6F7FA;
  --on-ink-muted: rgba(246, 247, 250, 0.7);
  --on-ink-line:  rgba(246, 247, 250, 0.13);

  --accent:          #FF5C2B;
  --accent-deep:     #E8491A;
  --accent-rgb:      255, 92, 43;
  --accent-ink:      #BF350B;
  --accent-on-ink:   #FF9A78;
  --on-accent:       #1A0A04;
  --on-accent-muted: rgba(26, 10, 4, 0.75);
  --header-bg:       transparent;

  --holo:   linear-gradient(125deg, #FFD9EC 0%, #E3D7FF 26%, #CFE6FF 52%, #CDF5E6 76%, #FFF3CF 100%);
  --holo-2: linear-gradient(200deg, #CFE6FF 0%, #E3D7FF 40%, #FFD9EC 75%, #FFF3CF 100%);
  --tint-1: #FFE3EF; --tint-2: #E9E0FF; --tint-3: #D8EBFF; --tint-4: #D6F6EA;

  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', 'SFMono-Regular', Consolas, monospace;
  --display-weight: 600;

  --radius:    999px;
  --radius-lg: 28px;
  --shadow-1: 0 1px 1px rgba(13,15,20,.04), 0 10px 24px -10px rgba(13,15,20,.12), 0 34px 60px -34px rgba(13,15,20,.22);
  --shadow-2: 0 1px 1px rgba(13,15,20,.05), 0 18px 36px -14px rgba(13,15,20,.18), 0 50px 90px -40px rgba(13,15,20,.34);
  --tile-shadow: 0 0 0 1px rgba(13,15,20,.05), 0 1px 2px rgba(13,15,20,.04), 0 14px 32px -18px rgba(13,15,20,.14);
}

body { letter-spacing: -0.006em; }

/* ---------- Typografie: strak, middelgroot, negatieve spatiëring ---------- */
h1, h2, h3, h4, .display { font-stretch: normal; letter-spacing: -0.04em; line-height: 1.03; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing: -0.038em; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -0.025em; }
.btn, .nav a, .faq summary, .ticker__item, .card__link, .stickybar__text strong { font-stretch: normal; }
.card__title, .cat__title, .gcard__title, .post-card__title, .product-box__name, .slidein__title, .cert__title { font-stretch: normal; letter-spacing: -0.03em; overflow-wrap: anywhere; hyphens: auto; }
.eyebrow { letter-spacing: .06em; font-size: 11.5px; color: var(--accent-ink); gap: 9px; }
.eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.section__head--center .eyebrow::before { display: block; }
.section__head h2 { text-wrap: balance; }

/* ---------- Knoppen: grafietpillen ---------- */
.btn { border-radius: 999px; font-weight: 550; letter-spacing: -0.01em; padding: 14px 22px; font-size: .96rem; }
.btn--sm { padding: 10px 15px; font-size: .86rem; }
.btn--lg { padding: 17px 28px; font-size: 1.02rem; }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 24px -12px rgba(13,15,20,.55); position: relative; isolation: isolate; }
.btn--primary::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--holo); opacity: 0; filter: blur(10px) saturate(180%); transition: opacity .35s var(--ease); }
.btn--primary:hover { background: var(--ink-3); border-color: var(--ink-3); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 16px 30px -14px rgba(13,15,20,.6); }
.btn--primary:hover::before { opacity: 1; }
.btn--outline { background: var(--white); border-color: transparent; box-shadow: var(--tile-shadow); color: var(--text); }
.btn--outline:hover { background: var(--white); border-color: transparent; box-shadow: var(--shadow-1); }
.hero .btn--outline { color: var(--text); border-color: transparent; background: var(--paper); box-shadow: none; }
.hero .btn--outline:hover { background: var(--paper-2); color: var(--text); border-color: transparent; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--paper, .cta .btn--paper { background: #fff; color: var(--ink); border-color: #fff; }
.section--ink .btn--primary, .product-box .btn--primary, .slidein .btn--primary, .stickybar .btn--primary, .prose .product-box .btn { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.section--ink .btn--primary:hover, .product-box .btn--primary:hover, .slidein .btn--primary:hover, .stickybar .btn--primary:hover, .prose .product-box .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.section--ink .btn--outline { background: rgba(255,255,255,.08); color: var(--on-ink); border-color: transparent; box-shadow: none; }
.section--ink .btn--outline:hover { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }

/* ---------- Tags en chips ---------- */
.tag { border-radius: 999px; padding: 5px 10px; background: var(--paper-2); color: var(--muted); letter-spacing: .03em; font-size: 11px; }
.tag--ink { background: var(--ink); color: #fff; }
.tag--ghost { background: var(--white); border-color: var(--line-strong); }
.chip { border: 0; background: var(--paper); color: var(--muted); padding: 8px 13px; letter-spacing: .02em; }
.chip::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }

/* ---------- Bovenbalk ---------- */
.topbar { background: var(--paper); color: var(--faint); border-bottom: 1px solid var(--line); letter-spacing: .06em; }
.topbar__item b { color: var(--text); font-weight: 500; }
.topbar__item::after { background: var(--accent); }

/* ---------- Header: zwevende witte balk, menu als segmentknop ---------- */
.header { top: 12px; margin-top: 12px; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.is-scrolled { box-shadow: none; }
.header__inner {
  width: calc(100% - 2 * var(--gutter)); height: 68px; padding: 0 12px 0 16px; border-radius: 22px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--tile-shadow); transition: box-shadow .3s;
}
.header.is-scrolled .header__inner { box-shadow: var(--shadow-1); }
.logo__mark { border-radius: 13px; background: var(--ink); color: #fff; box-shadow: none; position: relative; overflow: hidden; }
.logo__mark::after { content: ''; position: absolute; inset: 0; background: var(--holo); mix-blend-mode: multiply; opacity: .0; transition: opacity .3s; }
.logo:hover .logo__mark::after { opacity: .55; }
.logo__text { font-size: 1.2rem; letter-spacing: -0.04em; }
.logo__text span { color: var(--faint); }
.logo__sub { letter-spacing: .08em; }
.nav { gap: 2px; background: var(--paper-2); padding: 4px; border-radius: 999px; }
.nav a { font-weight: 500; font-size: .9rem; letter-spacing: -0.01em; color: var(--muted); border-radius: 999px; padding: 8px 14px; transition: color .2s, background .25s, box-shadow .25s; }
.nav a::after { display: none; }
.nav a:hover { color: var(--text); }
.nav a.is-active { color: var(--text); background: var(--white); box-shadow: 0 1px 2px rgba(13,15,20,.1), 0 4px 10px -4px rgba(13,15,20,.18); }
.lang-select select { background-color: var(--paper); border-color: transparent; letter-spacing: .04em; }

/* ---------- Hero: bento ---------- */
.hero { color: var(--text); margin-top: -80px; padding: calc(80px + clamp(28px, 4vw, 52px)) 0 clamp(28px, 4vw, 48px); overflow: hidden; }
.hero.grid-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(38% 50% at 8% 8%, rgba(255,193,222,.75), transparent 70%),
    radial-gradient(40% 55% at 92% 0%, rgba(190,215,255,.85), transparent 70%),
    radial-gradient(40% 50% at 60% 100%, rgba(196,245,225,.7), transparent 70%),
    radial-gradient(30% 40% at 30% 90%, rgba(225,212,255,.7), transparent 70%);
  background-size: auto;
}
.hero.grain::after { opacity: .22; mix-blend-mode: multiply; }
.molecule svg { opacity: .5; right: -14%; top: -30%; }
.molecule .bond { stroke: rgba(13,15,20,.10); }
.molecule .node { fill: #fff; stroke: rgba(13,15,20,.18); }
.molecule .node--red { fill: var(--accent); stroke: var(--accent); }

.hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 16px; align-items: stretch; }   /* a long headline makes the text tile taller: the dark number tile takes the extra height, not the certificate */
.hero__grid > .rise:first-child {
  grid-column: 1 / span 7; grid-row: 1 / span 2; background: rgba(255,255,255,.92); border-radius: 36px; padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--tile-shadow); display: flex; flex-direction: column; justify-content: center;
}
.hero .eyebrow { color: var(--accent-ink); align-self: flex-start; }
.hero__title { color: var(--text); font-size: clamp(2.6rem, 5.4vw, 4.9rem); letter-spacing: -0.05em; line-height: .98; max-width: 12ch; }
.hero__title em { font-style: normal; -webkit-text-stroke: 0; color: transparent; background: linear-gradient(100deg, #FF5C2B 0%, #E0489B 45%, #6B5BFF 100%); -webkit-background-clip: text; background-clip: text; padding-bottom: .08em; }
.hero__lead { color: var(--muted); margin: 22px 0 28px; }
.hero__chips { margin-top: 28px; gap: 8px; }
.hero__art { display: contents; }
.cert {
  grid-column: 8 / -1; grid-row: 1; transform: none; border: 0; border-radius: 36px; padding: 26px 26px 20px; color: var(--text);
  background: var(--holo); background-size: 160% 160%; background-position: var(--hx, 20%) var(--hy, 20%);
  box-shadow: var(--tile-shadow); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-position .6s var(--ease);
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); --hx: 80%; --hy: 80%; }
.cert::before { inset: 0; border: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; transition: background-position 1.1s var(--ease); }
.cert:hover::before { background-position: -40% 0; }
.cert > * { position: relative; }
.cert__title small { color: var(--muted); }
.cert__stamp { background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 7px 11px; transform: none; }
.cert__chart { background: rgba(255,255,255,.72); border: 0; border-radius: 20px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cert__chart path.peak { stroke: var(--ink); stroke-width: 2.2; }
.cert__caption, .cert__rows span { color: var(--muted); }
.cert__rows li { border-color: rgba(13,15,20,.1); }
.cert__rows strong.ok { color: var(--ink); background: #fff; border-radius: 999px; padding: 1px 9px; }
.hero__float {
  grid-column: 8 / -1; grid-row: 2; position: relative; right: auto; bottom: auto; transform: none; border: 0; border-radius: 36px;
  background: var(--ink); padding: 26px 30px; gap: 0; justify-content: space-between; box-shadow: var(--tile-shadow); overflow: hidden; isolation: isolate;
}
.hero__float::before { content: ''; position: absolute; z-index: -1; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--holo); filter: blur(44px); opacity: .55; }
.hero__float > div { flex: 1; }
.hero__float > div + div { border-left: 1px solid var(--on-ink-line); padding-left: 26px; }
.hero__float b { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 600; letter-spacing: -0.05em; }
.hero__float small { letter-spacing: .06em; margin-top: 8px; }

/* ---------- Ticker: witte strook ---------- */
.ticker { background: var(--white); color: var(--text); border: 0; height: 58px; border-radius: 22px; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; box-shadow: var(--tile-shadow); }
.ticker__track { height: 58px; }
.ticker__item { font-weight: 600; letter-spacing: -0.025em; text-transform: none; font-size: 1.06rem; gap: 12px; padding: 0 18px; }
.ticker__item small { color: var(--faint); opacity: 1; letter-spacing: .04em; }
.ticker__item::after { width: 6px; height: 6px; border-radius: 50%; transform: none; background: var(--accent); opacity: 1; margin-left: 14px; }

/* ---------- Stats: vier pasteltegels ---------- */
.section--tight { padding: 16px 0 clamp(40px, 6vw, 72px); }
.stats { background: transparent; border: 0; border-radius: 0; overflow: visible; gap: 16px; }
.stat { border: 0; border-radius: 30px; padding: 30px 28px 28px; box-shadow: var(--tile-shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.stat::before { display: none; }
.stat:nth-child(1) { background: var(--tint-1); } .stat:nth-child(2) { background: var(--tint-2); }
.stat:nth-child(3) { background: var(--tint-3); } .stat:nth-child(4) { background: var(--tint-4); }
.stat__num { font-weight: 600; letter-spacing: -0.06em; font-size: clamp(2.6rem, 4.4vw, 4rem); }
.stat__num sup { color: var(--ink); opacity: .55; }
.stat__label { color: rgba(13,15,20,.62); letter-spacing: .03em; font-size: 11.5px; }

/* ---------- Tegels ---------- */
.grid { gap: 16px; }
.card, .gcard, .cat, .post-card, .panel { border: 0; border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); }
.card:hover, .gcard:hover, .cat:hover, .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-1); border-color: transparent; }
.card { padding: 28px 26px 24px; border-radius: 30px; isolation: isolate; }
.card::before { left: auto; right: 22px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.500 3H11v6.500' fill='none' stroke='%230D0F14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transform: none; opacity: 0; transition: opacity .3s, transform .4s var(--ease), background-color .3s; z-index: 1; pointer-events: none; }
.card:hover::before { transform: rotate(0deg) scale(1.08); opacity: 1; background-color: #fff; }
.card__top { padding-right: 46px; }
.card__index { color: var(--faint); }
.card__title { font-size: 1.6rem; font-weight: 600; }
.card__title a:hover { color: var(--text); }
.card__aka { letter-spacing: 0; }
.card__link { font-weight: 550; letter-spacing: -0.01em; }
.card__link:hover { color: var(--text); }
/* bento: precies zes uitgelichte kaarten -> 2+1 / 1+2 / 2+1 met holografische brede tegels */
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(1),
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(4),
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) { grid-column: span 2; background: var(--holo); background-size: 140% 140%; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(4) { background-image: var(--holo-2); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) { background: var(--ink); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) :is(.card__title, .card__title a) { color: #fff; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) .card__desc { color: var(--on-ink-muted); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) :is(.card__aka, .card__index) { color: rgba(246,247,250,.55); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) .tag { background: rgba(255,255,255,.12); color: #fff; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) .btn--outline { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:is(:nth-child(1), :nth-child(4), :nth-child(5)) .card__title { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:is(:nth-child(1), :nth-child(4), :nth-child(5)) .card__desc { max-width: 52ch; font-size: 1rem; }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:is(:nth-child(1), :nth-child(4)) .tag { background: rgba(255,255,255,.7); color: var(--text); }
.container > .grid--3:has(> .card:nth-child(6):last-child) > .card:is(:nth-child(1), :nth-child(4)) :is(.card__desc, .card__aka, .card__index) { color: rgba(13,15,20,.7); }
.card--feature { background: var(--ink); border-radius: 30px; }

.gcard { padding: 26px 24px; border-radius: 30px; }
.gcard__title { font-size: 1.32rem; font-weight: 600; line-height: 1.12; }
.gcard__title:hover { color: var(--text); }
.gcard__time { letter-spacing: .03em; }

/* ---------- Donkere sectie: zwevend afgerond paneel ---------- */
.section--ink { margin: 0 auto; width: calc(100% - 2 * min(var(--gutter), 24px)); border-radius: 40px; overflow: hidden; }
.section--ink.grid-bg {
  background-color: var(--ink);
  background-image:
    radial-gradient(34% 60% at 100% 0%, rgba(227,215,255,.30), transparent 65%),
    radial-gradient(30% 55% at 0% 100%, rgba(255,193,222,.22), transparent 65%),
    radial-gradient(30% 50% at 55% 110%, rgba(190,215,255,.22), transparent 65%);
  background-size: auto;
}
.section--ink .eyebrow { color: var(--accent-on-ink); }
.steps { gap: 16px; }
.step { background: rgba(255,255,255,.06); border: 0; border-radius: 28px; padding: 30px 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset; }
.step__num, .section--ink .step__num { font-weight: 600; font-size: 3.2rem; letter-spacing: -0.06em; color: transparent; background: var(--holo); -webkit-background-clip: text; background-clip: text; }
.step h3 { font-size: 1.4rem; }

/* ---------- Categorieën: vier tinten ---------- */
.cat { padding: 28px 24px; border-radius: 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.grid--4 > .cat:nth-child(4n+1) { background: var(--tint-1); } .grid--4 > .cat:nth-child(4n+2) { background: var(--tint-2); }
.grid--4 > .cat:nth-child(4n+3) { background: var(--tint-3); } .grid--4 > .cat:nth-child(4n+4) { background: var(--tint-4); }
.cat:hover .cat__title { color: var(--text); }
.cat:hover .cat__desc { color: var(--muted); }
.cat__num { color: rgba(13,15,20,.6); letter-spacing: .04em; }
.cat:hover .cat__num { color: var(--text); }
.cat__title { font-size: 1.4rem; font-weight: 600; line-height: 1.08; }
.cat__desc { color: rgba(13,15,20,.68); }
.cat__list li { border: 0; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--text); padding: 5px 10px; letter-spacing: 0; }
.cat:hover .cat__list li { color: var(--text); }

.section--paper2 { background: transparent; }

/* ---------- FAQ: één witte container ---------- */
.faq { border-top: 0; background: var(--white); border-radius: 32px; padding: 8px 30px; box-shadow: var(--tile-shadow); }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-weight: 600; letter-spacing: -0.025em; font-size: 1.1rem; }
.faq summary::after { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--text); display: grid; place-items: center; font-size: 1.1rem; }
.faq details[open] summary::after { background: var(--ink); color: #fff; }

/* ---------- CTA: grafietpaneel met holografische gloed ---------- */
.cta { background: transparent; padding: clamp(24px, 4vw, 48px) 0; overflow: visible; color: var(--on-ink); }
.cta::before { display: none; }
.cta .container { width: calc(100% - 2 * min(var(--gutter), 24px)); max-width: none; padding: clamp(40px, 6vw, 84px) clamp(28px, 6vw, 96px); border-radius: 40px; background: var(--ink); overflow: hidden; isolation: isolate; }
.cta .container::before { content: ''; position: absolute; z-index: -1; right: -12%; top: -70%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--holo); filter: blur(70px); opacity: .6; animation: prisma-drift 14s ease-in-out infinite alternate; }
@keyframes prisma-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-12%, 14%) rotate(40deg); } }
.cta h2 { color: #fff; letter-spacing: -0.045em; }
.cta p { color: var(--on-ink-muted); }
.cta__note { color: var(--on-ink-muted); letter-spacing: .04em; }

/* ---------- Binnenpagina's ---------- */
.crumbs { background: transparent; border-bottom: 0; padding-top: 12px; }
.phero { background: transparent; border-bottom: 0; padding: 12px 0 0; overflow: visible; }
.phero::after { display: none; }
.phero .container { background: var(--white); border-radius: 36px; padding: clamp(28px, 4vw, 56px); width: calc(100% - 2 * var(--gutter)); box-shadow: var(--tile-shadow); overflow: hidden; isolation: isolate; }
.phero .container::before { content: ''; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: var(--holo); filter: blur(60px); opacity: .85; }
.phero h1 { letter-spacing: -0.055em; }
/* Blogoverzicht (.phero--ink): style.css houdt daar lichte tekst aan, dus de tegel wordt grafiet in plaats van wit (3.6.2) */
.phero--ink .container { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-2); }
.phero--ink .container::before { opacity: .38; }
.phero--ink .btn--outline { background: rgba(255,255,255,.08); color: var(--on-ink); border-color: transparent; box-shadow: none; }
.phero--ink .btn--outline:hover { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.post-hero { background: var(--ink); border-radius: 0 0 40px 40px; }
.progress { background: linear-gradient(90deg, #FF5C2B, #E0489B, #6B5BFF); }

.panel { padding: 22px; }
.panel__title { color: var(--faint); letter-spacing: .06em; }
.prose h2 { border-top-color: var(--line); letter-spacing: -0.035em; }
.prose h2::before { color: var(--accent-ink); }
.prose blockquote { border-left: 0; background: var(--holo); border-radius: 26px; padding: 26px 28px; font-weight: 600; letter-spacing: -0.03em; font-size: 1.3rem; line-height: 1.25; }
.prose code { background: var(--paper-2); border-radius: 8px; }
.prose .table-wrap { background: var(--white); border-radius: 24px; box-shadow: var(--tile-shadow); padding: 6px; }
.prose th, .table th { background: var(--paper-2); color: var(--muted); letter-spacing: .04em; }
.prose th:first-child, .table th:first-child { border-radius: 18px 0 0 18px; }
.prose th:last-child, .table th:last-child { border-radius: 0 18px 18px 0; }
.prose tr:last-child td { border-bottom: 0; }
.prose tr:hover td, .table tr:hover td { background: var(--paper); }
.callout { border: 0; border-radius: 24px; background: var(--tint-3); }
.callout__icon { background: #fff; color: var(--ink); }

.product-box { border-radius: 30px; border: 0; background: var(--ink); isolation: isolate; }
.product-box::before { inset: auto; right: -70px; top: -110px; width: 280px; height: 280px; border-radius: 50%; background: var(--holo); filter: blur(50px); opacity: .55; z-index: -1; }
.product-box__dot { background: var(--accent); }
.product-box__name { font-weight: 600; letter-spacing: -0.035em; }
.product-box__promo, .slidein__promo { border-radius: 18px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.promo-code { border-radius: 999px; }

.filterbar__search { border: 0; box-shadow: var(--tile-shadow); }
.filterbtn { border: 0; background: var(--white); box-shadow: var(--tile-shadow); color: var(--muted); letter-spacing: .03em; }
.filterbtn:hover { color: var(--text); }
.filterbtn.is-active { background: var(--ink); color: #fff; }
.group__head { border-bottom-color: var(--line); }
.pagination a, .pagination span { border: 0; border-radius: 999px; background: var(--white); box-shadow: var(--tile-shadow); }

.post-card { border-radius: 30px; }
.post-card__visual { background: var(--holo); margin: 8px 8px 0; border-radius: 24px; aspect-ratio: 16 / 9; }
.post-card:nth-child(3n+2) .post-card__visual { background: var(--holo-2); }
.post-card:nth-child(3n+3) .post-card__visual { background: linear-gradient(140deg, #CDF5E6, #CFE6FF 50%, #E3D7FF); }
.post-card__visual::after { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 62%); background-size: 250% 100%; background-position: 120% 0; transition: background-position 1s var(--ease); }
.post-card:hover .post-card__visual::after { background-position: -40% 0; }
.post-card__visual span { color: var(--ink); font-weight: 600; letter-spacing: -0.05em; }
.post-card__visual small { color: rgba(13,15,20,.65); }
.post-card__title { font-weight: 600; line-height: 1.12; }
.post-card__title:hover { color: var(--text); }

/* ---------- Conversielaag ---------- */
.stickybar { left: 12px; right: 12px; bottom: 12px; border-radius: 22px; border: 0; box-shadow: var(--shadow-2); transform: translateY(calc(100% + 28px)); }
.stickybar.is-on { transform: none; }
.slidein { border-radius: 30px; border: 0; isolation: isolate; }
.slidein::before { inset: auto; right: -70px; top: -110px; width: 260px; height: 260px; border-radius: 50%; background: var(--holo); filter: blur(50px); opacity: .5; z-index: -1; }

/* ---------- Footer: LICHT wit paneel ---------- */
.footer { background: transparent; color: var(--muted); padding: 16px 0 24px; overflow: visible; }
.footer .container { background: var(--white); border-radius: 40px; width: calc(100% - 2 * min(var(--gutter), 24px)); max-width: none; padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px) 30px; box-shadow: var(--tile-shadow); }
.footer__word { position: relative; left: auto; bottom: auto; transform: none; display: block; text-align: center; margin: 0 0 8px; font-stretch: normal; letter-spacing: -0.06em; font-size: clamp(2.4rem, 9.5vw, 10rem); line-height: .95; max-width: 100%; overflow: hidden; color: transparent; background: var(--holo); -webkit-background-clip: text; background-clip: text; filter: saturate(170%) brightness(.93); }
.footer .logo__text { color: var(--text); }
.footer .logo__text span { color: var(--faint); }
.footer__grid { border-bottom-color: var(--line); }
.footer__brand p { color: var(--muted); }
.footer__col h4 { color: var(--text); letter-spacing: .06em; }
.footer__col a { color: var(--muted); }
.footer__col a:hover { color: var(--text); }
.footer .btn--outline { color: var(--text); background: var(--paper); border-color: transparent; box-shadow: none; }
.footer .btn--outline:hover { background: var(--paper-2); color: var(--text); border-color: transparent; }
.footer__disclaimer { border: 0; background: var(--paper); border-radius: 22px; color: var(--muted); }
.footer__disclaimer strong { color: var(--text); }
.footer__bottom { color: var(--faint); }
.footer__bottom a { color: var(--text); }

/* ---------- Mobiel menu ---------- */
@media (max-width: 1180px) {
  .header.is-open { background: var(--ink); top: 0; margin-top: 0; padding-top: 12px; }
  .header.is-open .header__inner { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .header.is-open .logo__mark { background: #fff; color: var(--ink); }
  .nav.is-open { background: radial-gradient(70% 40% at 100% 0%, rgba(227,215,255,.32), transparent 65%), radial-gradient(70% 40% at 0% 100%, rgba(255,193,222,.24), transparent 65%), var(--ink); border-radius: 0; padding: 110px var(--gutter) 40px; }
  .nav.is-open a { background: transparent; box-shadow: none; border-radius: 0; font-weight: 600; letter-spacing: -0.05em; }
  .nav.is-open a.is-active { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; box-shadow: none; }
  .nav.is-open .nav__cta a { color: #fff; letter-spacing: -0.01em; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 1080px) {
  .container > .grid--3:has(> .card:nth-child(6):last-child) > .card:is(:nth-child(1), :nth-child(4), :nth-child(5)) { grid-column: span 2; }
  .container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(5) { grid-column: span 1; }
  .container > .grid--3:has(> .card:nth-child(6):last-child) > .card:nth-child(6) { grid-column: span 1; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .hero__grid > .rise:first-child, .cert, .hero__float { grid-column: 1 / -1; grid-row: auto; }
  .hero__float { position: relative; right: auto; bottom: auto; }
  .section--ink, .cta .container, .footer .container { border-radius: 30px; }
}
@media (max-width: 600px) {
  .header__inner { height: 60px; padding: 0 6px 0 10px; border-radius: 18px; }
  .logo__mark { width: 38px; height: 38px; border-radius: 11px; }
  .logo__sub { display: none; }
  .hero { margin-top: -72px; padding-top: calc(72px + 20px); }
  .hero__grid > .rise:first-child, .cert, .hero__float { border-radius: 28px; }
  .hero__title { font-size: clamp(2.3rem, 10.6vw, 3.1rem); }
  .stats { gap: 10px; }
  .stat { border-radius: 24px; padding: 22px 18px; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 0; }
  .container > .grid--3:has(> .card:nth-child(6):last-child) > .card { grid-column: span 1 !important; }
  .faq { padding: 4px 20px; border-radius: 26px; }
  .phero .container { border-radius: 28px; }
  .stickybar { left: 8px; right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cta .container::before { animation: none; } }

/* ---------- Robuust op smalle schermen: lange Nederlandse samenstellingen ---------- */
.phero h1, .group__head h2, .section__head h2, .post-hero h1, .prose h2, .prose h3, .cta h2 { overflow-wrap: anywhere; hyphens: auto; }
.group__head { flex-wrap: wrap; }
.group__head > div { min-width: 0; }
@media (max-width: 900px) { .section__head, .phero__grid { grid-template-columns: minmax(0, 1fr); } }
.product-box__fine, .prose .product-box__fine, .slidein__fine { color: var(--on-ink-muted); }
@media (max-width: 600px) { .phero h1 { font-size: clamp(1.7rem, 7.4vw, 2.4rem); } h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); } }
@media (max-width: 1180px) { .nav.is-open a { display: block; } }
@media (max-width: 1180px) { .nav.is-open .nav__lang select { background-color: rgba(255,255,255,.1); color: #fff; border-color: transparent; } .nav.is-open .nav__lang select option { background-color: #fff; color: #0D0F14; } }

/* ==========================================================================
   PeptidenBenelux.com — eigen regels ONDER de preset "prisma" (framework 3.6.1).
   De Engelse kop is langer dan de Nederlandse voorbeeldkop: iets kleiner en breder,
   zodat hij op drie à vier regels past.
   ========================================================================== */
.hero__title { max-width: 16ch; font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.02; }
@media (max-width: 600px) { .hero__title { font-size: clamp(2.15rem, 9.6vw, 2.9rem); } }