/* Kitchen AI website, huisstijl 1.5.0 "Porselein & Gloed".
   Eén gedeeld systeem voor elke pagina. Waarden komen letterlijk uit het app-bord
   (kai.css op 9gMgYgAaQ2WExanrYPZQmA) en DesignSystem/ in de app; zie
   docs/production/DESIGN_AND_BRAND.md. Alleen licht, net als de app.
   Regels: kleur alleen via tokens, ember alleen voor de pit, de punt, een keuze en één accentwoord per kop;
   knoppen zijn zwarte pillen; geen gloed, geen verloop behalve fotoscrims en de
   porseleinen fade; beweging met de app-curves. */

/* ---------- Lettertype ---------- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Terugval met Hanken-maten, zodat de swap de regels niet laat verspringen (CLS) */
@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 97%; ascent-override: 103%; descent-override: 31%; line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Palet (KVColor) */
  --bg: #F7F4EF; --sunk: #EFEAE2; --surface: #FFFFFF;
  --line: #E7E0D6; --line2: #D9D1C5;
  --ink: #26221F; --ink2: #3A3531; --muted: #6B635B; --faint: #8C847B; --chev: #B5ADA3;
  --on-ink: #FBF7F2;
  --acc: #D2573A; --acc-text: #B5452A; --soft: #F7E3DA; --soft2: #FBEFE9;
  --ok: #4F7A5B; --scrim: #181411;
  --glass: rgba(255, 253, 250, .74);
  --scrim: rgba(24, 20, 17, .55); /* glas met witte tekst op een foto: AA (≥4.5:1) op de lichtste plek van de beelden die we tonen */
  /* Vorm (KAIRadius) */
  --r-field: 12px; --r-small: 16px; --r-tile: 18px; --r-pick: 20px; --r-card: 22px; --r-hero: 28px; --r-big: 36px;
  /* Schaduw (kaiShadow), twee lagen */
  --sh: 0 1px 2px rgba(38, 34, 31, .05), 0 10px 26px -12px rgba(38, 34, 31, .18);
  --sh2: 0 1px 2px rgba(38, 34, 31, .06), 0 18px 40px -16px rgba(38, 34, 31, .28);
  --sh-btn: 0 1px 2px rgba(38, 34, 31, .2), 0 10px 22px -12px rgba(38, 34, 31, .55);
  --sh-float: 0 1px 1px rgba(38, 34, 31, .04), 0 12px 30px -12px rgba(38, 34, 31, .3);
  /* Beweging: de app-curves */
  --ease-enter: cubic-bezier(.2, .8, .2, 1);   /* kaiEnter */
  --ease-sweep: cubic-bezier(.65, 0, .35, 1);  /* de veeg: Welcome, Reveal, Home */
  --ease-soft: cubic-bezier(.2, .8, .3, 1);    /* bord, het meest gebruikt */
  --ease-pop: cubic-bezier(.3, 1.5, .5, 1);    /* veer: de pit springt aan */
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  /* Type */
  --font: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, sans-serif;
  /* Maat */
  --max: 1200px; --max-wide: 1320px; --max-text: 680px;
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(80px, 10vw, 140px);
  --hdr: 68px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
/* Extra anker voor een oude #fragment-link (bijv. /nl/#varianten): telt niet mee in een grid of flex */
.anchor { position: absolute; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
/* width/height-attributen blijven staan tegen CLS; height:auto voorkomt uitrekken (zie website-css-gotchas) */
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
p, h1, h2, h3, h4, figure, blockquote, ul, ol, dl { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 22px; background: var(--ink); color: var(--on-ink); font-weight: 620; text-decoration: none; transition: top .2s var(--ease-enter); }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typografie (schaal uit .kai(), opgerekt voor het web) ---------- */
.d1, .d2, .t1, .t2, .t3 { color: var(--ink); text-wrap: balance; }
.d1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.0; font-weight: 650; letter-spacing: -.042em; }
.d2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; font-weight: 650; letter-spacing: -.034em; }
.t1 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.12; font-weight: 650; letter-spacing: -.024em; }
.t2 { font-size: 21px; line-height: 1.2; font-weight: 630; letter-spacing: -.015em; }
.t3 { font-size: 17px; line-height: 1.28; font-weight: 620; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* Safari zet text-wrap: pretty op een smal scherm hele alinea's op ~80% van de breedte (gemeten op 390 px: 63 alinea's
   op 38 pagina's; Chrome en Safari op tablet/desktop niet). Op mobiel daarom gewoon afbreken, zie ook kai-pages.css. */
@media (max-width: 639px) { .lead { text-wrap: wrap; } }
.bd { font-size: 17px; line-height: 1.6; color: var(--ink2); }
.ft { font-size: 15px; line-height: 1.45; color: var(--muted); }
.cp { font-size: 13px; line-height: 1.35; color: var(--muted); font-weight: 500; }
.mut { color: var(--muted); }
/* Tekst in ember. In koppen: één accentwoord per kop (de belofte), zoals de punt op de i van het woordmerk */
.acct { color: var(--acc-text); }
.ctr { text-align: center; }
/* Kicker boven een kop: klein, rustig, met de punt (de brandende pit) */
.k, .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 620; line-height: 1.3; color: var(--muted); letter-spacing: 0; }
.k::before, .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
.k.bare::before { display: none; }

/* ---------- Lay-out ---------- */
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--gut), var(--max-wide)); }
.wrap--text { width: min(100% - 2 * var(--gut), var(--max-text)); }
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sec + .sec:not(.band) { padding-top: 0; }
/* Band: een verzonken vlak voor ritme, zoals de putjes in de app */
.band { background: var(--sunk); }
.band--white { background: var(--surface); }
.shead { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.shead.ctr { margin-inline: auto; justify-items: center; }
.shead .lead { max-width: 620px; }
.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.split { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--media-l > :first-child { order: 2; } }

/* ---------- Header ---------- */
/* Het glas zit op een pseudo-element: een backdrop-filter op .hdr zelf maakt de kop het containing block
   voor position: fixed, en dan wordt het mobiele menu (fixed, onder de kop) maar 48 px hoog */
.hdr { position: sticky; top: 0; z-index: 50; height: var(--hdr); isolation: isolate; transition: box-shadow .3s var(--ease-std); }
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(247, 244, 239, .82); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); pointer-events: none; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr__row { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; border-radius: 8px; text-decoration: none; }
.brand img, .brand svg { height: 24px; width: auto; }
.nav { display: none; align-items: center; gap: 2px; margin-left: 8px; }
.nav > a, .nav-drop > summary { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 13px; border-radius: 20px; font-size: 15px; font-weight: 560; color: var(--ink2); text-decoration: none; cursor: pointer; list-style: none; transition: background .2s var(--ease-std), color .2s var(--ease-std); }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav > a:hover, .nav-drop > summary:hover, .nav-drop[open] > summary { background: rgba(38, 34, 31, .06); color: var(--ink); }
.nav > a[aria-current="page"] { color: var(--ink); background: rgba(38, 34, 31, .06); }
.nav-drop { position: relative; }
.nav-drop svg.chev { transition: transform .25s var(--ease-enter); }
.nav-drop[open] svg.chev { transform: rotate(180deg); }
.nav-drop__panel { position: absolute; top: calc(100% + 8px); left: -12px; width: 560px; padding: 10px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--sh2), 0 0 0 1px rgba(38, 34, 31, .04); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-drop[open] .nav-drop__panel { animation: k-drop .28s var(--ease-enter) both; }
.nav-drop__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-decoration: none; transition: background .2s var(--ease-std); }
.nav-drop__item:hover { background: var(--bg); }
.nav-drop__item img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; }
.nav-drop__txt { display: grid; gap: 1px; min-width: 0; font-size: 15px; font-weight: 620; color: var(--ink); }
.nav-drop__txt small { font-size: 13px; font-weight: 450; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-drop__all { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 12px 10px 6px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 620; text-decoration: none; }
.hdr__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { display: none; height: 44px; align-items: center; gap: 2px; padding: 3px; border-radius: 22px; background: rgba(38, 34, 31, .05); }
.lang a, .lang span { display: grid; place-items: center; height: 38px; min-width: 44px; padding: 0 9px; border-radius: 19px; font-size: 13px; font-weight: 650; color: var(--muted); text-decoration: none; }
.lang [aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 34, 31, .08); }
.lang a:hover { color: var(--ink); }
/* raakvlak over de volle 44 px van de pil, het segment zelf blijft 38 */
.lang a { position: relative; } .lang a::after { content: ""; position: absolute; inset: -3px -1px; }
@media (min-width: 1000px) { .nav, .lang { display: flex; } }

/* Mobiel menu: <details>, een blad over het hele scherm onder de kop, met twee lagen zoals de vorige site:
   de hoofdnavigatie en, een laag dieper, de keukenstijlen. Geen scrollslot op html of body: overflow: hidden
   daar breekt de sticky kop, die dan wegscrolt zodra je het menu opent op een gescrolde pagina. Het blad dekt
   de pagina al af en houdt het scrollen met overscroll-behavior bij zich. */
.mnav { display: block; }
.mnav > summary { list-style: none; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav__open { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--sh); cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Focusring alleen voor het toetsenbord, rond (de algemene :focus-visible zet radius 6 px) */
.mnav__open:focus { outline: 0; }
.mnav__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 22px; }
/* Met het menu open is de kop dicht (geen glas), anders schemert de pagina erdoorheen */
.hdr:has(.mnav[open])::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr:has(.mnav[open]) { box-shadow: none; }
.mnav__panel { position: fixed; inset: var(--hdr) 0 0 0; z-index: 49; background: var(--bg); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gut) calc(32px + env(safe-area-inset-bottom)); }
.mnav[open] .mnav__panel { animation: k-sheet .3s var(--ease-enter) both; }
.mnav.is-closing .mnav__panel { animation: k-sheet-out .2s var(--ease-std) both; }
/* clip, niet hidden: een hidden-vlak is scrollbaar, en focus in de andere laag zou die dan in beeld schuiven */
.mnav__clip { overflow: clip; }
.mnav__views { display: flex; align-items: flex-start; width: 200%; transition: transform .36s var(--ease-enter); }
.mnav[data-view="styles"] .mnav__views { transform: translateX(-50%); }
.mnav__view { width: 50%; flex: none; display: grid; }
.mnav__view > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mnav__into svg { color: var(--faint); }
.mnav__back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; height: 44px; margin: 8px 0 0 -6px; padding: 0 12px 0 2px; border: 0; border-radius: 22px; background: none; font: inherit; font-size: 15px; font-weight: 620; color: var(--muted); cursor: pointer; }
.mnav__group { margin: 6px 0 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
.mnav__view > .mnav__sub { justify-content: flex-start; min-height: 64px; font-size: 17px; }
.mnav__sub img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: none; }
.mnav__view > .mnav__all { min-height: 60px; font-size: 16px; font-weight: 620; border-bottom: 0; }
.mnav__foot { display: grid; justify-items: center; gap: 18px; margin-top: 32px; }
.mnav__foot .badge img { height: 48px; width: auto; }
.mnav__foot .lang { display: flex; }
/* Geen grijze tikvlek en geen ring bij aanraken; met het toetsenbord blijft de ring (binnen het blad, de clip
   zou hem anders afsnijden) */
.mnav__panel a, .mnav__back { -webkit-tap-highlight-color: transparent; }
.mnav__panel a:focus:not(:focus-visible), .mnav__back:focus:not(:focus-visible) { outline: 0; }
.mnav__view > a:focus-visible, .mnav__back:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
.mnav__view > a:active, .mnav__back:active { color: var(--muted); }
.mnav__ic-close { display: none; }
.mnav[open] .mnav__ic-open { display: none; }
.mnav[open] .mnav__ic-close { display: block; }
@media (min-width: 1000px) { .mnav { display: none; } }

/* ---------- Knoppen (KAIButton: zwarte pil) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: 27px; border: 0; font-size: 17px; font-weight: 620; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease-enter), box-shadow .2s var(--ease-std), background .2s var(--ease-std); }
.btn:active { transform: scale(.97); }
.btn--pri { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-btn); }
.btn--pri:hover { background: var(--ink2); }
.btn--sec { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(38, 34, 31, .04); }
.btn--sec:hover { box-shadow: inset 0 0 0 1px var(--line2), var(--sh); }
.btn--ghost { background: rgba(38, 34, 31, .06); color: var(--ink); }
.btn--md { height: 46px; padding: 0 20px; border-radius: 23px; font-size: 16px; }
.btn--txt { height: auto; padding: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 620; gap: 6px; }
.btn--txt svg { transition: transform .25s var(--ease-enter); }
.btn--txt:hover svg { transform: translateX(3px); }

/* App Store-badge (officiële artwork) + QR */
.store { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.badge { display: inline-block; border-radius: 12px; line-height: 0; transition: transform .18s var(--ease-enter), opacity .2s var(--ease-std); }
.badge img { height: 54px; width: auto; }
.badge:hover { opacity: .88; }
.badge:active { transform: scale(.97); }
.store__note { font-size: 14.5px; color: var(--muted); }
.store__note b { color: var(--ink); font-weight: 650; }
.qr { display: none; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--surface); box-shadow: var(--sh); }
.qr img { width: 64px; height: 64px; }
.qr span { font-size: 13.5px; line-height: 1.35; color: var(--muted); max-width: 12ch; }
@media (min-width: 1000px) and (hover: hover) { .qr { display: inline-flex; } }

/* ---------- Foto's ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--sunk); isolation: isolate; }
.ph > img, .ph > picture > img, .ph > video { width: 100%; height: 100%; object-fit: cover; }
.ph--hero { border-radius: var(--r-hero); box-shadow: var(--sh2); }
.ph--s { border-radius: var(--r-small); }
/* Glans op de bovenrand, zoals licht op een werkblad (bord .ph.glo) */
.ph--glo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.scrim { position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(24, 20, 17, .62), rgba(24, 20, 17, 0)); pointer-events: none; }
.cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: 16px; font-weight: 620; letter-spacing: -.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.cap small { display: block; font-size: 13px; font-weight: 500; opacity: .85; }
/* Glazen pil op een foto (bord .pillb.glass) */
.gpill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 13.5px; font-weight: 600; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45); }
.gpill--lt { background: var(--glass); color: var(--ink); box-shadow: 0 1px 2px rgba(38, 34, 31, .08); }

/* ---------- Voor/na-schuif (KAICompare: één gebaar in de hele app) ----------
   Markup blijft die van de huidige site: .ba > .ba__layer.ba__after + .ba__layer.ba__before,
   .ba__handle, .ba__label--before/--after, .ba__hint. --pos = hoeveel % "voor" zichtbaar is;
   in rust 25%, zodat driekwart van het beeld de nieuwe keuken is. */
.ba { --pos: 25%; position: relative; overflow: hidden; border-radius: var(--r-hero); background: var(--sunk); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; isolation: isolate; box-shadow: var(--sh2); outline-offset: 4px; }
.ba--flat { box-shadow: none; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img, .ba__layer picture { width: 100%; height: 100%; object-fit: cover; }
/* Een beeld is anders zelf sleepbaar: de browser start dan een drag-and-drop en de schuif blijft staan */
.ba img { -webkit-user-drag: none; pointer-events: none; }
.ba__after { position: relative; }
.ba__after img { height: 100%; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
/* Het handvat is een laag over de hele breedte die met transform opschuift: een bewegende `left`
   telt bij elke stap als layout shift (de intro-veeg kostte de home 0,02 CLS), transform niet. */
.ba__handle { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 100%; transform: translateX(var(--pos)); pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .25); }
.ba__grip { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 22px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(24, 20, 17, .18), 0 6px 16px -6px rgba(24, 20, 17, .4); transition: transform .2s var(--ease-enter); }
.ba.is-dragging .ba__grip { transform: scale(1.08); }
.ba__label { position: absolute; top: 14px; z-index: 2; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--scrim); color: #fff; font-size: 13px; font-weight: 620; letter-spacing: .01em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); pointer-events: none; transition: opacity .25s var(--ease-std); }
.ba__label--before { left: 14px; }
.ba__label--after { right: 14px; }
.ba__hint { position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%); pointer-events: none; transition: opacity .3s var(--ease-std); }
.ba.is-engaged .ba__hint { opacity: 0; }

/* ---------- Veeg-lus (live.cycle uit het bord): beelden vegen vanzelf van links naar rechts ---------- */
.sweep { position: relative; overflow: hidden; }
.sweep > * { position: absolute; inset: 0; }
.sweep > :first-child { position: relative; }
.sweep img { width: 100%; height: 100%; object-fit: cover; }
.sweep__line { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; }

/* ---------- Telefoon met een echt app-scherm (.scr uit kai-app.css) ----------
   --s = schaal van het scherm (402 x 874 pt). Zet --s per breakpoint, niet de breedte. */
.phone { --s: .7; --bz: calc(12px * var(--s) + 3px); position: relative; flex: none; width: calc(402px * var(--s) + 2 * var(--bz)); height: calc(874px * var(--s) + 2 * var(--bz)); padding: var(--bz); border-radius: calc(62px * var(--s) + var(--bz)); background: #1B1816; box-shadow: inset 0 0 0 1.5px #4A4440, inset 0 0 0 3px #1B1816, 0 2px 3px rgba(24, 20, 17, .1), 0 40px 80px -30px rgba(38, 34, 31, .45), 0 24px 40px -24px rgba(38, 34, 31, .3); }
.phone__screen { width: calc(402px * var(--s)); height: calc(874px * var(--s)); border-radius: calc(55px * var(--s)); overflow: hidden; background: var(--bg); position: relative; transform: translateZ(0); }
.phone__screen > .scr { transform: scale(var(--s)); transform-origin: 0 0; }
.phone--sm { --s: .5; }
.phone--md { --s: .62; }
.phone--lg { --s: .78; }

/* ---------- Het merkteken in beweging (bord K13/L2, alleen bij grote momenten) ---------- */
.mark { width: 28px; height: 28px; flex: none; }
.mark .ring { fill: none; stroke: var(--ink); }
.mark .lit { fill: var(--acc); }

/* ---------- Kaarten ---------- */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); }
.card--pad { padding: clamp(20px, 2.4vw, 28px); }
a.card { display: block; text-decoration: none; transition: transform .3s var(--ease-enter), box-shadow .3s var(--ease-std); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
/* Stijltegel: foto met de naam erop, zoals Ideas in de app */
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); background: var(--sunk); text-decoration: none; isolation: isolate; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-enter); }
.tile:hover img { transform: scale(1.035); }
.tile .scrim { height: 55%; }
/* Lijst met punten (bord .rl) */
.dots { list-style: none; padding: 0; display: grid; gap: 14px; }
.dots li { position: relative; padding-left: 20px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.dots b { color: var(--ink); font-weight: 640; }

/* ---------- Materiaalstaal (MaterialSwatch, procedureel; waarden uit het bord) ---------- */
.sw { display: inline-block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.sw--sage { background: linear-gradient(155deg, #858F78, #6E7A5E 55%, #677358); }
.sw--marble { background: linear-gradient(128deg, transparent 0 30%, rgba(110, 105, 100, .28) 31%, transparent 33% 62%, rgba(110, 105, 100, .18) 63%, transparent 64%), linear-gradient(40deg, transparent 0 55%, rgba(110, 105, 100, .14) 56%, transparent 58%), linear-gradient(160deg, #EDEBE7, #E9E7E2); }
.sw--oak { background: repeating-linear-gradient(97deg, rgba(60, 35, 10, .10) 0 1.5px, transparent 1.5px 6px, rgba(255, 255, 255, .06) 6px 7px, transparent 7px 11px), linear-gradient(180deg, #CDAA7E, #AC885A); }
.sw--brass { background: linear-gradient(135deg, #CCB592, #B08D57 45%, #C0A479 70%, #9B7C4D); }

/* ---------- FAQ (details/summary) ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border-radius: var(--r-pick); box-shadow: var(--sh); overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px 16px 22px; font-size: 17px; font-weight: 620; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 15px; background: var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326221F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .3s var(--ease-enter); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer, .faq details > div, .faq details > p { padding: 0 22px 20px; color: var(--ink2); font-size: 16.5px; line-height: 1.6; }
.faq details > div p + p { margin-top: .8em; }

/* ---------- Slot-CTA ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-big); background: var(--surface); box-shadow: var(--sh); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); }

/* ---------- Footer ---------- */
.foot { margin-top: var(--sec); padding: clamp(48px, 6vw, 72px) 0 40px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: start; max-width: 340px; }
.foot__brand p { font-size: 15px; color: var(--muted); }
.foot h2 { font-size: 13.5px; font-weight: 650; color: var(--muted); margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.foot ul a { display: inline-flex; min-height: 32px; align-items: center; font-size: 15px; color: var(--ink2); text-decoration: none; }
.foot ul a:hover { color: var(--ink); text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.foot__base .lang { display: flex; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .foot__brand { grid-column: auto; } }


/* ---------- Beweging ---------- */
@keyframes k-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes k-sheet { from { opacity: 0; transform: translateY(-10px); } }
@keyframes k-sheet-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes k-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Scroll-reveal: kort en klein, alleen de eerste keer, nooit op het LCP-beeld */
.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: k-in .7s var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; }
}