/* Kitchen AI - landing page. Monochrome tokens mirror site/legal/assets/legal.css + the app,
   with soft warm tints + subtle gradients + entrance motion for a livelier, premium feel. */

:root {
  --bg: #ffffff; --surface: #f6f4f1; --surface-2: #eceae4;
  --ink: #17150f; --ink-muted: #6b655b; --hairline: #e6e2d9;
  --accent: #17150f; --on-accent: #ffffff;
  --radius: 16px; --radius-lg: 26px;
  --max: 76rem; --pad: clamp(1.25rem, 5vw, 2.5rem);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* soft light tints for gradients (very low saturation, high lightness) */
  --glow-1: hsl(33 78% 90% / .55);
  --glow-2: hsl(255 60% 93% / .38);
  --glow-3: hsl(150 40% 92% / .30);
  --tint-top: color-mix(in srgb, var(--surface) 38%, var(--bg));
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131210; --surface: #1c1a16; --surface-2: #24211c;
    --ink: #f2ede4; --ink-muted: #a99f90; --hairline: #322e27; --accent: #f2ede4; --on-accent: #131210;
    --glow-1: hsl(33 58% 60% / .14);
    --glow-2: hsl(255 45% 66% / .12);
    --glow-3: hsl(150 35% 58% / .09);
    --tint-top: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
/* De width/height-attributen op <img> zijn "presentational hints" voor de CSS
   width en height. Waar de CSS wel width:100% zet maar geen height, wint dus
   height="938" van het attribuut en wordt het beeld uitgerekt. De attributen
   moeten blijven staan (die voorkomen layout shift / CLS), dus neutraliseren we
   de height hier. .ba__layer img zet 'm bewust terug op 100%. */
img { height: auto; }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -0.028em; line-height: 1.04; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-muted); }

/* Tinted zone that melts into its neighbours: the wash fades to transparent at the top
   and bottom edges, so every section shares the same page base colour at the seams and
   there are no hard background transitions. The gradients simply lie on top. */
.tint { background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--surface) 72%, var(--bg)) 16%,
      color-mix(in srgb, var(--surface) 72%, var(--bg)) 84%,
      transparent 100%); }

/* Entrance animation: elements rise + fade as they enter the viewport.
   Uses the `translate` property so `transform` stays free for hover effects.
   Only active when JS is on and the user hasn't asked to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 24px; transition: opacity .72s cubic-bezier(.22,.7,.24,1), translate .72s cubic-bezier(.22,.7,.24,1); transition-delay: var(--rd, 0ms); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
}

/* Official Apple badge (black in light, white in dark) */
.badge { display: inline-block; transition: transform .18s ease, opacity .18s ease; }
.badge:hover { opacity: .9; transform: translateY(-2px); } .badge:active { transform: scale(.98); }
.badge img { height: 52px; width: auto; }
.badge .b-white { display: none; }
@media (prefers-color-scheme: dark) { .badge .b-black { display: none; } .badge .b-white { display: block; } }
.badge--sm img { height: 42px; }

/* Header + nav */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--hairline); }
.hdr__row { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; font-size: 1.12rem; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav-links { display: flex; gap: 1.75rem; }
.nav-links a { position: relative; font-size: .95rem; font-weight: 550; color: var(--ink-muted); text-decoration: none; transition: color .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.7,.24,1); }
.nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); }
.hdr__right { display: flex; align-items: center; gap: 1rem; }
.lang { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; overflow: hidden; font-size: .8rem; font-weight: 600; }
.lang a { padding: .34rem .68rem; text-decoration: none; color: var(--ink-muted); transition: background .2s ease, color .2s ease; }
.lang a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 860px) { .nav-links { display: none; } }
@media (max-width: 680px) { .hdr .badge--sm { display: none; } .hdr__row { gap: .75rem; height: 62px; } }

/* Hero - full-bleed soft glow (section background spans the whole viewport width) */
.hero { position: relative; text-align: center; padding-top: clamp(2.25rem, 5.5vw, 3.75rem); padding-bottom: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(125% 88% at 50% -14%, var(--glow-1), transparent 56%),
    radial-gradient(62% 62% at 88% -2%, var(--glow-2), transparent 60%),
    radial-gradient(58% 62% at 6% 26%, var(--glow-3), transparent 62%); }
/* 15ch was afgestemd op de oude, kortere kop ("Zie je nieuwe keuken in je eigen
   ruimte"). De huidige kop is 53 tekens en werd daardoor in een smalle koker
   geperst. text-wrap: balance verdeelt de regels gelijkmatig. */
.hero h1 { max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.hero .lead { max-width: 52ch; margin: 1.25rem auto 0; text-wrap: pretty; }
.hero__cta { margin-top: 1.75rem; }

/* Soft washes echoed across the page. Each glow is kept interior (centred well away from
   the section's top/bottom edges and fully faded to transparent before it) so every seam
   is the shared page base colour and no hard transitions appear. Corners alternate for rhythm. */
#app { background:
    radial-gradient(48% 36% at 90% 32%, var(--glow-2), transparent 60%),
    radial-gradient(46% 36% at 6% 68%, var(--glow-3), transparent 60%); }
/* NL en EN gebruiken andere section-ids; beide moeten dezelfde wash krijgen. */
#stijlen, #styles { background:
    radial-gradient(48% 36% at 9% 32%, var(--glow-1), transparent 60%),
    radial-gradient(46% 34% at 94% 68%, var(--glow-2), transparent 60%); }
.cta-band { background:
    radial-gradient(70% 58% at 50% 50%, var(--glow-1), transparent 62%),
    radial-gradient(42% 36% at 88% 32%, var(--glow-3), transparent 60%); }

/* Robust before/after slider (clip-path; layers are identical full-size so no distortion) */
.ba { position: relative; width: min(444px, 87vw); aspect-ratio: 896 / 1200; margin: clamp(2rem, 5vw, 3rem) auto 0; border-radius: 24px; overflow: hidden; --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 44px 80px -34px rgba(0,0,0,.46); outline: none; }
.ba:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 35%, transparent), 0 44px 80px -34px rgba(0,0,0,.46); }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__label { position: absolute; top: 14px; z-index: 4; font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.44); padding: .3rem .66rem; border-radius: 999px; backdrop-filter: blur(4px); }
.ba__label--before { left: 14px; } .ba__label--after { right: 14px; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 999px; background: #fff; color: #111; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s ease; }
.ba:hover .ba__grip { transform: translate(-50%,-50%) scale(1.06); }
.ba__grip svg { width: 22px; height: 22px; }
.ba__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; font-size: .72rem; font-weight: 550; color: #fff; background: rgba(0,0,0,.4); padding: .28rem .7rem; border-radius: 999px; backdrop-filter: blur(4px); pointer-events: none; transition: opacity .4s ease; }

/* Section header */
.shead { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 3.75rem); }
.shead .lead { margin-top: 1rem; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); }
.step__n { width: 46px; height: 46px; border-radius: 999px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 100%, transparent), color-mix(in srgb, var(--accent) 70%, var(--ink-muted))); color: var(--on-accent); display: grid; place-items: center; font-weight: 650; font-size: 1.1rem; margin-bottom: 1.1rem; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; color: var(--ink-muted); }

/* Feature rows (section by section) - screenshots keep their native aspect ratio */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.feature + .feature { margin-top: clamp(3.5rem, 9vw, 7rem); }
.feature--rev .feature__media { order: 2; }
.feature__media { display: flex; justify-content: center; }
.feature__media img { width: auto; max-width: 100%; max-height: clamp(440px, 60vh, 640px); border-radius: 32px; border: 1px solid var(--hairline); box-shadow: 0 30px 60px -32px rgba(0,0,0,.4); transition: transform .5s cubic-bezier(.22,.7,.24,1), box-shadow .5s ease; }
.feature:hover .feature__media img { transform: translateY(-6px); box-shadow: 0 44px 80px -34px rgba(0,0,0,.5); }
.feature__body .eyebrow { margin-bottom: .8rem; }
.feature__body p { color: var(--ink-muted); font-size: 1.08rem; margin: 1rem 0 0; max-width: 44ch; }

/* Styles */
.styles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.style-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.style-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.style-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.style-card:hover img { transform: scale(1.05); }
.style-card span { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.style-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.48), transparent 46%); }

/* Inspiration masonry */
.insp { columns: 4; column-gap: 1rem; }
.insp img { width: 100%; margin-bottom: 1rem; border-radius: var(--radius); border: 1px solid var(--hairline); break-inside: avoid; transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.insp img:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -20px rgba(0,0,0,.4); }

/* Final CTA */
.cta-band .inner { position: relative; overflow: hidden; background-color: var(--accent); background-image: radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 52%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #000 16%, transparent), transparent 55%); color: var(--on-accent); border-radius: var(--radius-lg); padding: clamp(3rem, 8vw, 5rem) var(--pad); text-align: center; }
.cta-band h2 { color: var(--on-accent); max-width: 18ch; margin: 0 auto; }
.cta-band p { color: color-mix(in srgb, var(--on-accent) 72%, transparent); margin: 1rem auto 0; max-width: 34ch; }
.cta-band .badge { margin-top: 2rem; }
.cta-band .badge .b-black { display: none; } .cta-band .badge .b-white { display: block; }
@media (prefers-color-scheme: dark) { .cta-band .badge .b-white { display: none; } .cta-band .badge .b-black { display: block; } }

/* Footer */
.foot { border-top: 1px solid var(--hairline); padding: 2.5rem 0; }
.foot__row { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.foot a { color: var(--ink); text-decoration: none; font-weight: 550; font-size: .95rem; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot small { color: var(--ink-muted); }
.foot .brand { font-size: 1rem; }

/* Responsive */
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; }
  .feature { grid-template-columns: 1fr; gap: 2.25rem; text-align: center; }
  .feature--rev .feature__media { order: 0; }
  .feature__body p { margin-left: auto; margin-right: auto; }
  .feature__media img { max-height: 66vh; }
  .styles-grid { grid-template-columns: repeat(2, 1fr); }
  .insp { columns: 2; }
}
@media (max-width: 680px) {
  .foot__row { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}

/* ---------------------------------------------------------------------------
   Additions for the merged site: skip link, use-case grid and the FAQ.
   Same tokens as everything above; no new colours.
   --------------------------------------------------------------------------- */

/* Keyboard users land here first and can jump past the sticky header. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .7rem 1.1rem; background: var(--accent); color: var(--on-accent); border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none; }
.skip:focus { left: 0; }

.hero__note { margin: 1rem 0 0; font-size: .92rem; color: var(--ink-muted); }

/* "How it works" is an <ol> for semantics; the numbered circles are the markers. */
.steps { list-style: none; padding: 0; margin: 0; }

/* Use cases */
.uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
.use { padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg) 62%, transparent); transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.use:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -28px rgba(0,0,0,.4); }
.use h3 { margin-bottom: .55rem; }
.use p { margin: 0; color: var(--ink-muted); }

/* FAQ: native <details> so it works without JS and stays crawlable when closed. */
.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.08rem; font-weight: 620; margin: 0; }
/* Chevron drawn in CSS so it needs no extra request. */
.qa summary::after { content: ""; flex: none; width: 11px; height: 11px; margin-top: .34rem; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .3s cubic-bezier(.22,.7,.24,1); }
.qa[open] summary::after { transform: rotate(-135deg); }
.qa summary:hover h3 { color: var(--ink); }
.qa:focus-within summary { outline: none; }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.qa > p { margin: 0 0 1.5rem; padding-right: 2rem; color: var(--ink-muted); max-width: 62ch; }
.qa a { color: var(--ink); text-underline-offset: 3px; }
.faq__note { max-width: 46rem; margin: 2.5rem auto 0; text-align: center; font-size: .92rem; color: var(--ink-muted); }
.faq__note a { color: var(--ink); text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .qa[open] > p { animation: qa-in .32s cubic-bezier(.22,.7,.24,1) both; }
  @keyframes qa-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
}

@media (max-width: 820px) {
  .uses { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   "Een foto -> drie resultaten". Zelfde tokens en motion als de stijlkaarten;
   de bron krijgt een pill-label (zoals de before/after-slider) en de resultaten
   een plat label (zoals .style-card), zodat input en output visueel verschillen.
   --------------------------------------------------------------------------- */

#varianten, #variants { background:
    radial-gradient(46% 34% at 8% 26%, var(--glow-2), transparent 60%),
    radial-gradient(48% 36% at 92% 74%, var(--glow-1), transparent 60%); }

.shot { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
/* Leesbaarheidsverloop onder het label. */
.shot::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.46), transparent 44%); pointer-events: none; }
.shot__tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
/* De bronfoto is invoer, geen resultaat: pill-label en geen hover-lift. */
.shot__tag--pill { left: 14px; bottom: 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.44); backdrop-filter: blur(4px); padding: .32rem .7rem; border-radius: 999px; text-shadow: none; }

.shot--src { width: min(560px, 100%); margin-inline: auto; box-shadow: 0 24px 48px -30px rgba(0,0,0,.45); }

/* Verbinding tussen bron en resultaten. */
.flow { display: grid; justify-items: center; gap: .5rem; color: var(--ink-muted); padding: clamp(1.25rem, 3vw, 2rem) 0; }
.flow__line { width: 1px; height: clamp(28px, 5vw, 44px); background: linear-gradient(to bottom, transparent, var(--hairline)); }
.flow svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .flow svg { animation: flow-nudge 2.4s cubic-bezier(.22,.7,.24,1) infinite; }
  @keyframes flow-nudge { 0%, 62%, 100% { transform: translateY(0); opacity: .75; } 78% { transform: translateY(4px); opacity: 1; } }
}

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.trio .shot { transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease; }
.trio .shot:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.4); }
.trio .shot:hover img { transform: scale(1.04); }
.trio__note { max-width: 46ch; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: center; color: var(--ink-muted); font-size: .95rem; }

@media (max-width: 820px) {
  .trio { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
}