/* ===========================================================
   Fork & Spoon — Landing v4
   Structuur en behandeling geleend van plannie.io: één diep
   verzadigd hero-vlak, condensed display-type in drie kleuren,
   schulprand-overgangen en een ritme van crème → wit → accent.

   Geen omlijningen. Vlakken worden gescheiden door kleur,
   zachte slagschaduw en witruimte; alleen waar een rij écht
   opgedeeld moet worden staat een haarlijn. De enige harde
   schaduw zit onder de knoppen — dat is het accent van het
   ontwerp, geen lijn.
   =========================================================== */

:root {
  /* ---- kleur ---- */
  --ink:        #0E2A32;   /* hero-vlak en tekst op licht */
  --ink-2:      #17414C;
  --ink-deep:   #06171D;   /* de harde slagschaduw onder knoppen */
  --ink-soft:   #55696F;
  --cream:      #FFF4E4;
  --cream-2:    #F7E8D2;
  --paper:      #FFFFFF;
  --sun:        #F7C948;
  --sun-soft:   #FFEDB8;
  --coral:      #FF7A4D;
  --coral-soft: #FFDDCE;
  --mint:       #86E0B4;
  --mint-soft:  #D8F6E7;
  --teal:       #2BA8B5;
  --pink:       #F9C8D8;

  --hairline:   rgba(14, 42, 50, .09);

  /* ---- typografie ---- */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- vorm ---- */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-2xl: 44px;
  --pill: 999px;

  /* ---- diepte ---- */
  --shadow-sm:     0 2px 10px rgba(14, 42, 50, .05);
  --shadow-card:   0 12px 34px -16px rgba(14, 42, 50, .18), 0 2px 6px rgba(14, 42, 50, .04);
  --shadow-raised: 0 20px 48px -20px rgba(14, 42, 50, .28), 0 2px 8px rgba(14, 42, 50, .05);
  --shadow-float:  0 28px 64px -24px rgba(14, 42, 50, .40), 0 3px 10px rgba(14, 42, 50, .08);
  --shadow-hard:   4px 4px 0 var(--ink-deep);
  --shadow-hard-sm: 3px 3px 0 var(--ink-deep);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(20px, 5vw, 56px);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sun); color: var(--ink); }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ---------- gedeelde bouwstenen ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.narrow { max-width: 780px; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
}
.eyebrow.on-dark { color: var(--sun); }
.eyebrow.on-sun  { color: #8A5A12; }

/* De redactionele koppen: schreef, zwaar, strak gespatieerd. */
h2.title {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
}
h2.title em { font-style: italic; color: var(--coral); }

.lede {
  margin: 0 0 32px;
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }

/* ---------- knoppen ----------
   Geen omlijning: een gevuld vlak met een harde schaduw eronder.
   Dat is het enige harde element dat het ontwerp zich veroorlooft. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--pill);
  background: var(--sun);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700; font-size: 16px; line-height: 1;
  box-shadow: var(--shadow-hard);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  cursor: pointer;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-deep); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink-deep); }
.btn-coral { background: var(--coral); color: #fff; }
.btn-mint  { background: var(--mint); }
.btn-paper { background: var(--paper); box-shadow: var(--shadow-card); }
.btn-paper:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.btn-paper:active { transform: translateY(0); box-shadow: var(--shadow-card); }

/* De tweede knop op het hero-vlak: dezelfde vorm, een toon lichter. */
.btn-tonal {
  background: var(--ink-2); color: var(--cream);
  box-shadow: none;
}
.btn-tonal:hover { background: #1D505C; transform: translateY(-2px); box-shadow: none; }
.btn-tonal:active { transform: translateY(0); }

.btn-ghost { background: var(--paper); box-shadow: var(--shadow-card); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.btn-ghost:active { transform: none; box-shadow: var(--shadow-card); }

.btn-store { padding: 12px 26px; }
.btn-store svg { width: 23px; height: 23px; flex: none; }
.btn-store .store-text { display: flex; flex-direction: column; line-height: 1.14; text-align: left; }
.btn-store .store-text .small { font-size: 10.5px; font-weight: 600; opacity: .68; letter-spacing: .01em; }
.btn-store .store-text .big { font-size: 16px; font-weight: 800; }
.btn-store-alt { background: var(--mint); }

.btn-sm { padding: 11px 20px; font-size: 14px; box-shadow: var(--shadow-hard-sm); }
.btn-sm:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }
.btn-note { font-size: 14px; color: var(--ink-soft); }

/* ---------- aankondigingsbalk ---------- */
.topbar {
  background: var(--coral);
  color: #fff;
  text-align: center;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 16px;
  position: relative; z-index: 60;
}
.topbar a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- navigatie ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  transition: box-shadow .3s;
}
/* Zolang het hero-vlak achter de balk zit is hij inktkleurig en valt hij
   ermee samen. Zodra dat vlak voorbij is wordt hij matglas: de crème en
   witte secties schemeren er vervaagd doorheen. */
.nav.stuck,
.nav.nav-solid {
  background: rgba(255, 246, 234, .68);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 1px 0 rgba(14, 42, 50, .07), 0 18px 40px -30px rgba(14, 42, 50, .55);
}
/* Zonder backdrop-filter zou de tekst op een half doorzichtig vlak staan. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.stuck, .nav.nav-solid { background: rgba(255, 246, 234, .97); }
}
.nav.stuck .nav-logo .logo-on-dark,
.nav.nav-solid .nav-logo .logo-on-dark { display: none; }
.nav.stuck .nav-logo .logo-on-light,
.nav.nav-solid .nav-logo .logo-on-light { display: block; }
.nav.stuck .nav-links a,
.nav.nav-solid .nav-links a { color: var(--ink-soft); }
.nav.stuck .nav-links a:hover,
.nav.nav-solid .nav-links a:hover { color: var(--coral); }
.nav.stuck .nav-login,
.nav.nav-solid .nav-login { color: var(--ink); }
.nav.stuck .nav-login:hover,
.nav.nav-solid .nav-login:hover { color: var(--coral); }
/* Twee bestanden in plaats van een filter: op het inktvlak de witte
   versie, op het matglas het gewone logo met de turquoise ampersand. */
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; display: block; }
.nav-logo .logo-on-light { display: none; }
.nav-links { display: flex; gap: 26px; margin-left: 14px; }
.nav-links a {
  font-size: 14.5px; font-weight: 600; color: rgba(255, 244, 228, .82);
  transition: color .3s;
}
.nav-links a:hover { color: var(--sun); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-login { font-size: 14.5px; font-weight: 600; color: var(--cream); transition: color .3s; }
.nav-login:hover { color: var(--sun); }
@media (max-width: 900px) { .nav-links, .nav-login { display: none; } }

/* ---------- voortgangsbalk ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--sun); z-index: 90;
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(56px, 8vw, 96px) 0 clamp(96px, 12vw, 150px);
  overflow: hidden;
  isolation: isolate;
}
.hero-inner { position: relative; z-index: 3; text-align: center; }

.hero h1 {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(52px, 10.5vw, 132px);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.hero h1 span { display: block; }
.hero h1 .l1 { color: var(--sun); }
.hero h1 .l2 { color: var(--mint); }
.hero h1 .l3 { color: var(--coral); }

.hero-sub {
  margin: 0 auto 34px;
  max-width: 46ch;
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: rgba(255, 244, 228, .84);
}
.hero-sub strong { color: var(--cream); font-weight: 600; }
.hero .web-link { margin-top: 26px; }

/* ---- zwevende mock-kaarten links en rechts van de kop ---- */
.hero-float { position: absolute; z-index: 2; pointer-events: none; }
.hero-float .card {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.float-recipe { left: -2%; top: 16%; width: clamp(150px, 17vw, 224px); transform: rotate(-8deg); }
.float-recipe img { aspect-ratio: 4 / 3; object-fit: cover; }
.float-recipe .card-body { padding: 11px 13px 13px; }
.float-recipe .tag {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral);
}
.float-recipe .name { font-family: var(--font-serif); font-weight: 700; font-size: 15px; line-height: 1.15; margin-top: 4px; }

.float-list { right: 0; top: 22%; width: clamp(150px, 16vw, 208px); transform: rotate(7deg); }
.float-list .card { padding: 15px 17px; }
.float-list h4 {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.float-list ul { margin: 0; padding: 0; }
.float-list li {
  list-style: none; display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; padding: 3.5px 0;
}
.float-list .box {
  width: 16px; height: 16px; border-radius: 5px; background: var(--cream-2);
  display: grid; place-items: center; font-size: 10px; flex: none; color: transparent;
}
.float-list .done { background: var(--mint); color: var(--ink); }
.float-list .done + span { text-decoration: line-through; color: var(--ink-soft); }

.float-menu { left: 1%; top: 47%; width: clamp(140px, 14vw, 190px); transform: rotate(5deg); }

/* Twee extra receptkaarten, alleen als er echt ruimte voor is. Ze vullen de
   onderhoeken die anders leeg bleven. Ze dragen ook .float-recipe voor de
   opmaak van de kaart, dus de left/top daarvan moet hier expliciet terug op
   auto: anders stapelen ze op de eerste kaart linksboven. */
.float-recipe-2 {
  left: auto; top: auto;
  right: 1%; bottom: 8%;
  width: clamp(150px, 15.5vw, 206px); transform: rotate(6deg);
}
.float-recipe-3 {
  top: auto;
  left: 7%; bottom: 5%;
  width: clamp(150px, 15.5vw, 206px); transform: rotate(-6deg);
}
.float-menu .card { padding: 13px 15px; }
.float-menu .day {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.float-menu .day:last-child { box-shadow: none; }
.float-menu .day b { font-weight: 700; }
.float-menu .day span { color: var(--ink-soft); }

/* ---- krabbels ---- */
.doodle { position: absolute; z-index: 2; pointer-events: none; }
.d-star  { right: 21%; top: 15%; width: clamp(30px, 3.2vw, 46px); color: var(--mint); }
.d-swirl { left: 16%; top: 44%; width: clamp(44px, 5vw, 74px); color: var(--coral); }
.d-smile { right: 14%; bottom: 37%; width: clamp(38px, 4.2vw, 62px); color: var(--sun); }
.doodle svg { width: 100%; height: auto; }

@media (max-width: 1180px) { .float-recipe-2, .float-recipe-3 { display: none; } }
@media (max-width: 1080px) { .float-menu { display: none; } }
@media (max-width: 860px) {
  .hero-float, .doodle { display: none; }

  /* Vaste maten, geen regels die van de schermhoogte afhangen: die sloegen
     om zodra de balken van de browser bij het scrollen wegvielen, en dan
     sprong de kop van maat. Zo staat alles stil.

     Het opschrift boven de kop kost een regel plus marge, en de marges
     eromheen zijn een slag krapper. Samen genoeg om de schulprand op een
     gewoon toestel onder de knoppen in beeld te houden; de kop en de zin
     eronder zeggen hetzelfde als dat opschrift. */
  .hero { padding-bottom: 56px; }
  .hero .eyebrow { display: none; }
  .hero h1 { margin-bottom: 20px; }
  .hero-sub { margin-bottom: 28px; }
  .hero .web-link { margin-top: 18px; }
}

@media (max-width: 620px) {
  /* Op een telefoon mag de kop het beeld dragen. 92px is de maat op een
     scherm van 375px; op iets smallers schaalt hij mee in plaats van over
     de rand te lopen. */
  .hero h1 { font-size: min(92px, 24.5vw); }

  /* Zonder de bovenregel passen de twee knoppen naast elkaar. */
  .hero .btn-row { flex-wrap: nowrap; gap: 10px; }
  .hero .btn-store { flex: 1 1 0; justify-content: center; padding: 13px 14px; gap: 8px; }
  .hero .btn-store svg { width: 20px; height: 20px; }
  .hero .btn-store .store-text .big { font-size: 15px; white-space: nowrap; }
}

@media (max-width: 400px) {
  /* Op de smalste toestellen brak "Google Play" over twee regels; de knop
     krimpt liever dan dat de tekst afbreekt. */
  .hero .btn-row { gap: 8px; }
  .hero .btn-store { padding: 13px 10px; gap: 7px; min-width: 0; }
  .hero .btn-store svg { width: 18px; height: 18px; }
  .hero .btn-store .store-text .big { font-size: 13.5px; }
}

/* ---- schulprand: het volgende vlak bijt zich in het vorige ---- */
.scallop {
  position: relative; z-index: 4;
  height: 46px; margin-top: -46px;
  background:
    radial-gradient(circle at 50% 100%, var(--to, var(--cream)) 0 23px, transparent 24px) repeat-x;
  background-size: 46px 46px;
  background-position: 0 100%;
}
.scallop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--to, var(--cream));
}

/* ===========================================================
   TICKER
   =========================================================== */
.ticker { background: var(--sun); overflow: hidden; padding: 14px 0; }
.ticker-track { display: flex; width: max-content; animation: slide 32s linear infinite; }
.ticker-group { display: flex; align-items: center; gap: 22px; padding-right: 22px; }
.ticker-group span {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 16px; letter-spacing: .04em; white-space: nowrap;
}
.ticker-group i { font-style: normal; color: var(--coral); font-size: 13px; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ===========================================================
   SECTIES
   =========================================================== */
.section { padding: clamp(64px, 8vw, 112px) 0; position: relative; }
.bg-cream { background: var(--cream); }
.bg-paper { background: var(--paper); }
.bg-sun   { background: var(--sun); }
.bg-sun .lede { color: #6E4A0F; }

/* ---------- statement ---------- */
.statement { padding: clamp(56px, 7vw, 92px) 0; }
.statement h2 {
  margin: 0 auto 20px; max-width: 16ch;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.025em;
}
.statement h2 em { font-style: italic; color: var(--coral); }
.statement p { margin: 0 auto; max-width: 54ch; color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 19px); }

/* ---------- hoe het werkt: vast toestel links, tekst rechts ----------
   Het scherm blijft staan terwijl de tekst eronderdoor loopt. Welke stap
   het midden van het venster raakt bepaalt welk scherm en welk kaartje
   je ziet; onder 900px vervalt dat en krijgt elke stap zijn eigen beeld. */
.showcase-grid {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 6vw, 88px);
  margin-top: clamp(28px, 4vw, 52px);
}
.showcase-sticky { position: relative; }
.showcase-stage { position: sticky; top: clamp(90px, 16vh, 150px); }
/* Geen omhullend vlak: het scherm zweeft op de crème achtergrond en de
   kaartjes hangen over de randen ervan heen. */
.showcase-phone {
  position: relative; width: min(268px, 66%); margin: 0 auto;
  aspect-ratio: 1206 / 2622;
}
.showcase-phone img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  border-radius: 26px; box-shadow: var(--shadow-raised);
  opacity: 0; transform: scale(1.03);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.showcase-phone img.active { opacity: 1; transform: none; }

.stage-chip { opacity: 0; transition: opacity .45s var(--ease); }
.stage-chip.active { opacity: 1; }

/* De ruime marge boven en onder zorgt dat de eerste en laatste stap ook
   het midden van het venster kunnen halen. */
.showcase-steps {
  display: flex; flex-direction: column;
  gap: clamp(56px, 13vh, 170px);
  padding: 20vh 0 26vh;
}
.step {
  opacity: .26; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.step.active { opacity: 1; transform: none; }
.step-media-m { display: none; }

.step-num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--pill);
  background: var(--sun-soft);
  font-family: var(--font-display); font-size: 19px; line-height: 1;
  margin-bottom: 16px;
}
.step:nth-child(3n+2) .step-num { background: var(--mint-soft); }
.step:nth-child(3n+3) .step-num { background: var(--coral-soft); }
.step h3 {
  margin: 0 0 12px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.015em;
}
.step h3 em { font-style: italic; color: var(--coral); }
.step p { margin: 0 0 18px; color: var(--ink-soft); max-width: 46ch; }
.step ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.step ul li { position: relative; padding-left: 26px; font-size: 15.5px; font-weight: 500; }
.step ul li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 15px; height: 15px; border-radius: 50%; background: var(--mint);
}

/* Het beeld dat alleen op smalle schermen meedoet: ook hier geen vlak
   eromheen, alleen de schermafbeelding met de kaartjes eraan. */
.step-media { justify-content: center; }
.shot { position: relative; display: inline-block; }
.shot img { border-radius: 22px; max-height: 380px; width: auto; box-shadow: var(--shadow-raised); }

/* Zwevende accentkaartjes over het beeldvlak, zoals bij het voorbeeld. */
.chip {
  position: absolute; z-index: 3;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--chip, var(--sun-soft));
  box-shadow: var(--shadow-raised);
  transform: rotate(var(--rot, -3deg));
  width: max-content; max-width: 180px;
}
.chip .k {
  display: block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .58; margin-bottom: 3px;
}
.chip .v { font-family: var(--font-serif); font-weight: 700; font-size: 15.5px; line-height: 1.15; }
.chip .s { display: block; font-size: 12.5px; opacity: .72; margin-top: 2px; }
/* De kaartjes hangen grotendeels naast het scherm en pakken er net een
   hoekje van mee; verder naar binnen dekken ze de schermafbeelding af. */
.chip-tl { top: 6%;     left: -38%; }
.chip-tr { top: 10%;    right: -38%; }
.chip-bl { bottom: 14%; left: -38%; }
.chip-br { bottom: 9%;  right: -38%; }

.sources { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.sources .src {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--paper); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.sources .src img { width: 19px; height: 19px; }
.sources .more { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }

@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; gap: 0; }
  .showcase-sticky { display: none; }
  .showcase-steps { gap: clamp(52px, 9vw, 84px); padding: 36px 0 0; }
  .step { opacity: 1; transform: none; }
  .step-media-m { display: grid; margin-bottom: 26px; }
  /* Op een smal scherm dekt een kaartje op ware grootte de halve
     schermafbeelding af; hier blijft het bij een hoekje. */
  .chip { max-width: 158px; padding: 9px 12px; }
  .chip .v { font-size: 14px; }
  .chip .s { font-size: 11.5px; }
  .chip-tl, .chip-bl { left: -32%; }
  .chip-tr, .chip-br { right: -32%; }
}

/* ---------- drie kaarten ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.trio-card {
  background: var(--cream); border-radius: var(--r-xl);
  padding: 32px 28px 34px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.trio-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-raised); }
.trio-card .ico {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--paper);
  font-size: 25px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.trio-card:nth-child(1) .ico { background: var(--coral-soft); }
.trio-card:nth-child(2) .ico { background: var(--mint-soft); }
.trio-card:nth-child(3) .ico { background: var(--sun-soft); }
.trio-card h3 {
  margin: 0 0 10px; font-family: var(--font-serif); font-weight: 700;
  font-size: 21px; line-height: 1.15;
}
.trio-card h3 em { font-style: italic; color: var(--coral); }
.trio-card p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }

/* ---------- fotostudio ---------- */
.studio-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .studio-grid { grid-template-columns: 1fr; } }

.point { display: flex; gap: 14px; margin-bottom: 20px; }
.point .pi {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--paper); border-radius: var(--r-sm); font-size: 18px;
  box-shadow: var(--shadow-sm);
}
.point strong { display: block; font-size: 16.5px; margin-bottom: 2px; }
.point p { margin: 0; font-size: 15px; color: #6E4A0F; }

.ba {
  position: relative; border-radius: var(--r-xl);
  overflow: hidden; aspect-ratio: 4 / 3; touch-action: none; cursor: ew-resize;
  --cut: 55%; box-shadow: var(--shadow-float);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.ba-tag {
  position: absolute; bottom: 16px; z-index: 4;
  background: var(--paper); border-radius: var(--pill);
  padding: 7px 14px; font-size: 12.5px; font-weight: 700;
  box-shadow: var(--shadow-card);
}
.ba-tag-l { left: 16px; }
.ba-tag-r { right: 16px; background: var(--sun); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 5; transform: translateX(-50%); }
.ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--paper); transform: translateX(-50%); }
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-raised);
}
.ba-knob svg { width: 20px; height: 20px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 44px; }
.bento-card {
  background: var(--paper); border-radius: var(--r-xl);
  padding: 28px 26px 30px; grid-column: span 2;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.bento-card.wide { grid-column: span 3; }
.bento-card h4 {
  margin: 0 0 8px; font-family: var(--font-serif); font-weight: 700;
  font-size: 20px; line-height: 1.15;
}
.bento-card h4 em { font-style: italic; color: var(--coral); }
.bento-card > p { margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.bento-demo { margin-top: auto; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-card, .bento-card.wide { grid-column: span 1; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } }

.swap {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream); border-radius: var(--pill);
  padding: 12px 18px; font-weight: 600;
}
.swap-amt { color: var(--coral); font-weight: 700; }
.swap-mask { height: 1.5em; overflow: hidden; }
.swap-reel { display: block; animation: reel 9s cubic-bezier(.8,0,.2,1) infinite; }
.swap-reel span { display: block; height: 1.5em; line-height: 1.5em; }
@keyframes reel {
  0%,18% { transform: translateY(0); }
  25%,43% { transform: translateY(-1.5em); }
  50%,68% { transform: translateY(-3em); }
  75%,93% { transform: translateY(-4.5em); }
  100% { transform: translateY(-6em); }
}
@media (prefers-reduced-motion: reduce) { .swap-reel { animation: none; } }

.servings-row { font-size: 15.5px; padding: 3px 0; }
.servings-row span { font-weight: 700; color: var(--coral); }
.servings-slider { display: block; margin-top: 14px; }
.servings-slider input { width: 100%; accent-color: var(--coral); }
.servings-slider output { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }

.chat { display: grid; gap: 8px; }
.bubble { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 14.5px; }
.bubble.user { background: var(--sun-soft); justify-self: end; border-bottom-right-radius: 6px; }
.bubble.bot { background: var(--mint-soft); border-bottom-left-radius: 6px; }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; height: 1.4em; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: blink 1.2s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .2s; }
.chat-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.chat-answer { display: none; }
.chat.answered .chat-typing { display: none; }
.chat.answered .chat-answer { display: inline; }

.units-flip {
  width: 100%; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--cream); border: 0; border-radius: var(--pill);
  padding: 12px 16px; color: inherit; position: relative; overflow: hidden; height: 48px;
}
.units-face { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .4s var(--ease); }
.units-back { transform: translateY(100%); }
.units-flip.flipped .units-front { transform: translateY(-100%); }
.units-flip.flipped .units-back { transform: translateY(0); }

.avatars { display: flex; }
.avatars .av {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg, var(--sun)); color: #fff; font-weight: 700; font-size: 15px;
  margin-left: -10px; box-shadow: 0 0 0 3px var(--paper);
}
.avatars .av:first-child { margin-left: 0; }
.avatars .invite { background: var(--cream); color: var(--ink-soft); }

.offline {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cream); border-radius: var(--pill);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
}
.offline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }

/* ---------- browservenster ---------- */
.browser {
  margin-top: 44px; border-radius: var(--r-xl);
  overflow: hidden; background: var(--paper); box-shadow: var(--shadow-float);
}
.browser-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; background: var(--cream);
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; }
.browser-dots i:nth-child(1) { background: var(--coral); }
.browser-dots i:nth-child(2) { background: var(--sun); }
.browser-dots i:nth-child(3) { background: var(--mint); }
.browser-url {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper); border-radius: var(--pill);
  padding: 6px 15px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.browser-url svg { width: 13px; height: 13px; }

.bs-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.bs-points .bs { text-align: center; }
.bs-points .bs .ico {
  width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--cream); font-size: 22px;
}
.bs-points strong { display: block; font-size: 16.5px; margin-bottom: 4px; }
.bs-points p { margin: 0; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 820px) { .bs-points { grid-template-columns: 1fr; } }

/* ---------- prijzen ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: start; }
.price {
  background: var(--paper); border-radius: var(--r-xl);
  padding: 32px 28px 34px; position: relative;
  box-shadow: var(--shadow-card);
}
.price.featured { background: var(--ink); color: var(--cream); box-shadow: var(--shadow-float); }
.price.featured .price-desc, .price.featured li { color: rgba(255, 244, 228, .82); }
.tag-best {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--sun); border-radius: var(--pill);
  padding: 6px 16px; font-size: 12px; font-weight: 700; color: var(--ink);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--shadow-card);
}
.price-name { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.price.featured .price-name { color: var(--sun); }
.price-num { font-family: var(--font-display); font-size: 46px; line-height: 1.05; margin: 10px 0 4px; }
.price-num span { font-family: var(--font-sans); font-size: 15px; font-weight: 600; opacity: .65; }
.price-desc { margin: 0 0 20px; font-size: 15px; color: var(--ink-soft); }
.price ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.price li { position: relative; padding-left: 26px; font-size: 15px; }
.price li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--coral); }
.price.featured li::before { color: var(--mint); }
.price .btn { width: 100%; justify-content: center; }
.price .btn-paper { background: var(--cream); box-shadow: none; }
.price .btn-paper:hover { background: var(--cream-2); transform: translateY(-2px); box-shadow: none; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }

/* ---------- faq ----------
   Hier blijft één haarlijn staan: zonder scheiding lopen de vragen
   in elkaar over. Zo licht dat je hem eerder voelt dan ziet. */
.faq { margin-top: 40px; }
.faq details { box-shadow: inset 0 -1px 0 var(--hairline); }
.faq details:first-child { box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px;
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; position: relative; background: var(--cream);
  transition: background .2s, transform .25s var(--ease);
}
.faq .plus::before, .faq .plus::after {
  content: ""; position: absolute; background: var(--ink); border-radius: 2px;
}
.faq .plus::before { width: 14px; height: 2.5px; }
.faq .plus::after  { width: 2.5px; height: 14px; transition: transform .25s var(--ease); }
.faq details[open] .plus { background: var(--sun); transform: rotate(180deg); }
.faq details[open] .plus::after { transform: scaleY(0); }
.faq details p { margin: 0 0 26px; padding-right: 56px; color: var(--ink-soft); font-size: 16px; }

/* ---------- vertrouwensbalk ---------- */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trust .t { text-align: center; padding: 30px 24px; border-radius: var(--r-xl); background: var(--cream); }
.trust .t .ico { font-size: 26px; margin-bottom: 10px; }
.trust .t strong { display: block; font-size: 16.5px; margin-bottom: 4px; }
.trust .t p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; } }

/* ===========================================================
   SLOT
   =========================================================== */
.finale { background: var(--ink); color: var(--cream); padding: clamp(60px, 8vw, 96px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.finale-marquee { overflow: hidden; }
.finale-marquee .fm-track { display: flex; width: max-content; animation: slide 26s linear infinite; }
.finale-marquee .fm-group { display: flex; gap: 34px; padding-right: 34px; }
.finale-marquee h2 {
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 7vw, 92px); line-height: 1.1; letter-spacing: .01em;
  color: var(--sun);
}
.finale-marquee.reverse { margin-bottom: clamp(30px, 5vw, 52px); }
.finale-marquee.reverse .fm-track { animation-name: slide-back; }
.finale-marquee.reverse h2 { color: rgba(247, 201, 72, .30); }
@keyframes slide-back { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .finale-marquee .fm-track { animation: none; } }

.finale-body { text-align: center; }
.finale-body p { margin: 0 auto 30px; max-width: 46ch; font-size: clamp(16.5px, 1.5vw, 19px); color: rgba(255, 244, 228, .82); }

.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 24px; border-radius: var(--pill);
  background: var(--ink-2); color: var(--cream);
  transition: background .2s, transform .2s var(--ease);
}
.store-btn:hover { background: #1D505C; transform: translateY(-2px); }
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-text .small { font-size: 10.5px; opacity: .75; }
.store-text .big { font-size: 15px; font-weight: 700; }

.web-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-weight: 600; font-size: 15px; color: var(--sun);
  opacity: .9; transition: opacity .2s;
}
.web-link:hover { opacity: 1; }
.web-link svg { width: 17px; height: 17px; }

/* ---------- footer ---------- */
.footer {
  background: var(--ink-deep); color: rgba(255, 244, 228, .68);
  padding: 32px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  font-size: 14px;
}
.footer a { color: rgba(255, 244, 228, .78); }
.footer a:hover { color: var(--sun); }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- onthullen bij scrollen ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease) calc(var(--d, 0) * 70ms),
              transform .6s var(--ease) calc(var(--d, 0) * 70ms);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}