/* =====================================================================
   Scoopmachine.nl
   Zwart en goud, zoals het scherm van de machine.
   Lagen: #machine-host (3D, z 1) < inhoud (z 2) < weg-secties (z 3) < overlays < nav (z 60).
   Animaties gebruiken alleen transform en opacity.
   Prestaties: hover-effecten alleen met een muis (@media (hover: hover)); oneindige animaties lopen alleen
   in het hoofdstuk waar ze te zien zijn (html[data-chapter], html[data-demo]); op telefoons en zwakke
   apparaten (blok LICHT onderaan, ook html[data-tier="low"|"mid"]) geen backdrop-filter, geen grote
   blur- of schaduwfilters en geen korrellaag. will-change alleen zolang iets beweegt.
   ===================================================================== */

@font-face {
  font-family: "Toxigenesis";
  src: url("../assets/fonts/toxigenesis-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Commuters Sans (het lettertype van cnsupplements.com, Adobe Fonts) staat UIT tot er een weblicentie of een Adobe
   Fonts-webproject is (dossier nr 125): tot dan Inter. Aanzetten: de twee bestanden uit website/media-excluded/fonts/
   terug naar assets/fonts/, hier twee @font-face-regels (400 en 600), "Commuters Sans" vooraan in --fb, --fh en --fc,
   en de preloads in index.html (of het Adobe-webproject laden in plaats van eigen bestanden). */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold-1: #9B7232;
  --gold-2: #FBD68C;
  --gold-3: #D7B865;
  --grad: linear-gradient(100deg, #9B7232 0%, #D7B865 28%, #FBD68C 50%, #D7B865 72%, #9B7232 100%);
  --grad-v: linear-gradient(180deg, #FBD68C 0%, #D7B865 45%, #9B7232 100%);
  /* goud achter witte tekst: dieper, zodat wit leesbaar blijft */
  --btn-gold: linear-gradient(100deg, #5E3F12 0%, #87602A 26%, #966C2E 50%, #87602A 74%, #5E3F12 100%);
  --t1: #fff;
  --t2: rgba(255, 255, 255, .74);
  --t3: rgba(255, 255, 255, .5);
  --line: rgba(215, 184, 101, .18);
  --fd: "Toxigenesis", "Inter", system-ui, sans-serif;
  /* tekst, koppen, menu en knoppen (Inter tot Commuters Sans aan mag, zie boven); Toxigenesis (--fd) als accent: het
     woordmerk en het machinescherm */
  --fb: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fh: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fc: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 92px;
  --gut: clamp(16px, 4vw, 64px);
  /* kleuren van de machine (configurator) */
  --m-body: #0d0d0e;
  --m-accent: #D7B865;
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --nav-h: 70px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #000; overflow-x: hidden; scroll-padding-top: 0; }
body {
  margin: 0;
  background: #000;
  color: var(--t2);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--gold-2); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(251, 214, 140, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.skip {
  position: fixed; left: 16px; top: 16px; z-index: 200; transform: translateY(-96px);
  background: #000; color: var(--gold-2); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--gold-3);
  font-weight: 700; text-decoration: none; transition: transform .2s;
}
.skip:focus { transform: none; }
.wrap { width: min(1280px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* ------------------------------------------------------------- lagen */
#machine-host { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main > section { position: relative; }
/* secties waar de machine niet meer staat ('weg': Drankjes en de footer): dicht zwart, boven de machine (z 3).
   De zachte overgang naar dat zwart zit in de buursecties zelf, ONDER hun inhoud: .bpx::after onderaan (vlak boven
   Drankjes), .contact::before bovenaan (vlak onder Drankjes) en .contact::after onderaan (boven de footer). Op z 1
   liggen ze net boven de vaste machine (#machine-host, ook z 1, staat eerder in de pagina) en onder de tekst en knoppen
   (z 2): de machine vervaagt naar zwart in plaats van met een rechte snede af te breken, en de inhoud van config en
   contact vervaagt nooit mee. Het verloop volgt een S-curve (smoothstep): aan beide uiteinden vlak, dus geen streep
   waar het verloop het dichte zwart raakt (een lineair verloop gaf daar een lijn over de heldere print). */
[data-chapter="weg"] { position: relative; z-index: 3; background: #000; }
.bpx::after, .contact::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .03) 10%, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .22) 30%, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .65) 60%, rgba(0, 0, 0, .78) 70%, rgba(0, 0, 0, .9) 80%, rgba(0, 0, 0, .97) 90%, #000 100%);
}
html.has-3d .fallback-only { display: none !important; }
/* met 3D: lege delen van de verhaal-secties laten klikken door naar de machine */
html.has-3d [data-chapter]:not([data-chapter="weg"]) { pointer-events: none; }
html.has-3d .how, html.has-3d .how-list { pointer-events: none; }
html.has-3d [data-chapter]:not([data-chapter="weg"]) :is(a, button, input, textarea, select, label, [data-pe]) { pointer-events: auto; }

/* ------------------------------------------------------------- typografie */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--fc); font-weight: 600; font-size: 13px; line-height: 1.2;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-3);
  margin: 0 0 20px;
}
.eyebrow-c { justify-content: center; }
.h2 {
  font-family: var(--fh); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.04; color: #fff;
  font-size: clamp(28px, 3.4vw, 54px);
  margin: 0 0 22px;
  text-wrap: balance;
}
.h3 { font-family: var(--fc); text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; color: #fff; font-size: clamp(22px, 2.2vw, 30px); }
.gold-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------- knoppen (goud = witte tekst) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 58px; padding: 0 34px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--fc); font-weight: 600; font-size: 15px; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), color .3s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.btn-gold {
  color: #fff;
  background: var(--btn-gold);
  text-shadow: 0 1px 1px rgba(36, 20, 0, .6), 0 0 14px rgba(60, 34, 4, .45);
  box-shadow:
    0 18px 44px -18px rgba(215, 184, 101, .7),
    inset 0 1px 0 rgba(255, 236, 190, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(251, 214, 140, .35);
}
.btn-gold svg { filter: drop-shadow(0 1px 1px rgba(36, 20, 0, .6)); }
.btn-gold::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 50% -30%, rgba(255, 236, 190, .35), transparent 55%);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 205, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 1s var(--ease);
}
@media (hover: hover) {
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -18px rgba(251, 214, 140, .85), inset 0 1px 0 rgba(255, 236, 190, .6), inset 0 0 0 1px rgba(251, 214, 140, .5); }
  .btn-gold:hover::after { transform: translateX(120%); }
  .btn-gold:hover svg { transform: translateX(4px); }
}
.btn-gold:active { transform: translateY(0) scale(.98); }
.btn-sm { height: 46px; padding: 0 24px; font-size: 13px; letter-spacing: .17em; }
.btn-xl { height: 74px; padding: 0 46px; font-size: 18px; letter-spacing: .16em; }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  background: none; border: 0; cursor: pointer; color: #fff; text-decoration: none;
  font-family: var(--fc); font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  background-image: var(--grad); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
}
@media (hover: hover) { .btn-link:hover { color: var(--gold-2); } }

/* ------------------------------------------------------------- navigatie */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h);
  transition: background-color .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
/* vaste donkere rand bovenaan: de machine (kop, bovenlijn) loopt nooit zichtbaar achter logo en links door */
.nav::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .88) 55%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .5s;
}
.nav.is-solid::before { opacity: 0; }
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 214, 140, .55), transparent);
  opacity: 0; transition: opacity .5s;
}
/* bijna dicht: de tegels van het machinescherm schemeren niet leesbaar door de balk (ook waar backdrop-filter niet werkt) */
.nav.is-solid {
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.nav.is-solid::after { opacity: 1; }
.nav-in {
  height: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
/* SCOOPMACHINE x CN Supplements (samen); kleiner in de vaste balk met transform op het geheel (geen hoogte animeren) */
.nav-logo { display: flex; align-items: center; gap: 14px; justify-self: start; text-decoration: none; transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav-logo img { height: 50px; width: auto; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .7)); }
/* op een lijn met de letters van SCOOPMACHINE (die staan onder het midden: het bekertje steekt erboven uit):
   CN op dezelfde voetlijn, SUPPLEMENTS op de hoogte van de onderkant van het bekertje */
.nav-logo .nl-cn { height: 38px; transform: translateY(15%); }
.nl-x { font-family: var(--fc); font-size: 22px; line-height: 1; color: var(--gold-3); opacity: .85; transform: translateY(.16em); }
.nav.is-solid .nav-logo { transform: scale(.84); }
@media (hover: hover) {
  .nav-logo:hover { transform: scale(1.03); }
  .nav.is-solid .nav-logo:hover { transform: scale(.87); }
}
.nav-links ul { list-style: none; display: flex; align-items: center; gap: clamp(22px, 2.8vw, 48px); }
.nav-links a {
  position: relative; display: inline-block; padding: 10px 0;
  color: rgba(255, 255, 255, .86); text-decoration: none;
  font-size: 16.5px; font-weight: 600; letter-spacing: .04em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.nav-links a.is-here { color: #fff; }
.nav-links a.is-here::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav-links a:hover { color: #fff; }
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-li-contact { display: none; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(215, 184, 101, .45); background: rgba(0, 0, 0, .45); cursor: pointer; position: relative; z-index: 2; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 1.6px; margin-left: -10px; background: var(--gold-2);
  transition: transform .4s var(--ease), background-color .3s; content: "";
}
.nav-toggle-bars::before { transform: translateY(-6px); left: 0; margin-left: 0; }
.nav-toggle-bars::after { transform: translateY(6px); left: 0; margin-left: 0; }
.menu-open .nav-toggle-bars { background: transparent; }
.menu-open .nav-toggle-bars::before { transform: rotate(45deg); }
.menu-open .nav-toggle-bars::after { transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-toggle { display: block; }
  .nav-li-contact { display: list-item; }
  /* dicht zwart: niets van het scherm van de machine (tegels, WATER) schemert tussen de menu-items door */
  .nav-links {
    position: fixed; inset: 0; z-index: 1; background: #000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s linear .45s;
  }
  .menu-open .nav-links { opacity: 1; visibility: visible; transition: opacity .45s; }
  .nav-links ul { flex-direction: column; gap: 6px; text-align: center; }
  .nav-links a { font-family: var(--fc); font-size: clamp(26px, 7vw, 40px); letter-spacing: .06em; text-transform: uppercase; padding: 12px 0; font-weight: 600; }
  .nav-links li { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .6s var(--ease); }
  .menu-open .nav-links li { opacity: 1; transform: none; }
  .menu-open .nav-links li:nth-child(2) { transition-delay: .05s; }
  .menu-open .nav-links li:nth-child(3) { transition-delay: .1s; }
  .menu-open .nav-links li:nth-child(4) { transition-delay: .15s; }
  .menu-open .nav-links li:nth-child(5) { transition-delay: .2s; }
  .nav-end { position: relative; z-index: 2; }
  /* backdrop-filter maakt de nav het kader voor 'fixed': uitzetten zolang het menu open is */
  .menu-open .nav, .menu-open .nav.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
  .menu-open .nav-logo { position: relative; z-index: 2; }
}
@media (max-width: 760px) {
  .nav-logo { gap: 10px; }
  .nav-logo img { height: 34px; }
  .nav-logo .nl-cn { height: 26px; }
  .nl-x { font-size: 16px; }
  .nav.is-solid .nav-logo { transform: scale(.9); }
  .nav-end .btn { display: none; }
}
/* telefoon staand, opening met 3D: het grote woordmerk staat vlak onder de navigatie en de machine draagt zijn eigen
   logo op de kop. Het kleine navigatielogo is dan een derde SCOOPMACHINE binnen ~230 px: weg (alleen opacity, geen
   layout) zolang het woordmerk in beeld is (.hw-on, js/site.js), en zacht terug als het woordmerk weggaat.
   Met het menu open blijft het logo gewoon staan. */
@media (max-width: 760px) and (orientation: portrait) {
  .nav-logo { transition: opacity .5s var(--ease), visibility 0s; }
  html.m3d:not(.menu-open):has(#hero-word.hw-on) .nav-logo { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
}

/* ------------------------------------------------------------- opening */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover; opacity: .4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 40%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 0 40%, #000 74%);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .55) 50%, transparent 62%), radial-gradient(70% 60% at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .85) 80%), linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 30%, transparent 70%, #000);
}
/* 2D-opening: een zachte donkere strook precies achter het woordmerk (midden van .hero-in: de bovenpadding is
   nav + 4vh, de onderpadding 10vh), zodat de letters van het potlabel in de video nooit door SCOOPMACHINE heen lezen */
.hero-media::before {
  content: ""; position: absolute; left: 50%; z-index: 1; pointer-events: none;
  top: calc(50% + var(--nav-h) / 2 - 3vh); width: min(150vw, 2200px); height: clamp(260px, 36vw, 540px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .92) 40%, rgba(0, 0, 0, .7) 64%, rgba(0, 0, 0, .3) 84%, rgba(0, 0, 0, 0) 100%);
}
/* telefoon: de pot vult de video, het label staat precies achter het woord: de video zelf iets zachter */
@media (max-width: 760px) { .hero-video { opacity: .3; } }
.hero-rails i {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #9B7232 14%, #FBD68C 50%, #9B7232 86%, transparent 100%);
  box-shadow: 0 0 18px rgba(251, 214, 140, .55), 0 0 2px rgba(255, 240, 210, .9);
  transform: scaleX(0); transition: transform 1.8s var(--ease) .2s;
}
.hero-rails .hr-t { top: calc(var(--nav-h) + 2vh); }
.hero-rails .hr-b { bottom: 7vh; transition-delay: .45s; }
.is-loaded .hero-rails i { transform: scaleX(1); }
.hero-in {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 6vh, 64px);
  padding: calc(var(--nav-h) + 4vh) var(--gut) 10vh;
  text-align: center;
}
.hero-word {
  position: relative; z-index: 2;
  font-family: var(--fd); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 9vw, 200px); line-height: .92; letter-spacing: .01em;
  white-space: nowrap; perspective: 1200px;
}
.hw-letters { display: block; }
.hw-l { position: relative; display: inline-block; transform-origin: 50% 100%; }
/* inline-block (geen block): innerText en kopieren lezen een woord, geen letter per regel */
.hw-l > span { display: inline-block; vertical-align: top; }
/* diepte (::before) en glans (::after) per letter uit data-c (js/site.js zet alleen .hw-f als tekst) */
.hw-l::before, .hw-l::after { content: attr(data-c); position: absolute; inset: 0; pointer-events: none; }
/* de zachte schaduw is klein gehouden: elke letter is tijdens het opkomen een eigen laag zo groot als zijn schaduw */
.hw-d, .hw-l::before {
  position: absolute; inset: 0; color: #2c1e08; -webkit-text-fill-color: #2c1e08;
  text-shadow:
    0 1px 0 #6b4c1c, 0 2px 0 #5a3f16, 0 3px 0 #4c3512, 0 4px 0 #402c0f, 0 5px 0 #35250c,
    0 6px 0 #2b1e0a, 0 7px 0 #221808, 0 16px 20px rgba(0, 0, 0, .85);
}
.hw-f {
  position: relative;
  background: linear-gradient(100deg, #8a6424 0%, #c9a04f 14%, #fbe2a4 30%, #d7b865 44%, #9b7232 56%, #e9c97e 72%, #fff1c8 84%, #b48840 100%);
  background-size: 1200% 100%;
  background-position: calc(var(--i) * 9.09%) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hw-s, .hw-l::after {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 235, .95) 50%, transparent 62%);
  background-size: 320% 100%; background-position: 160% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* de glans (background-position = schilderwerk) loopt alleen met een muis, alleen in de opening en met 3D alleen
   als het woordmerk echt in beeld staat (.hw-on, js/site.js): daarvoor is het onzichtbaar en kost het alleen stijlwerk */
@media (hover: hover) and (pointer: fine) {
  html:not(.m3d):not([data-tier="low"]):is(:not([data-chapter]), [data-chapter="hero"]) .hw-s,
  html:not(.m3d):not([data-tier="low"]):is(:not([data-chapter]), [data-chapter="hero"]) .hw-l::after,
  html.m3d:not([data-tier="low"]):is(:not([data-chapter]), [data-chapter="hero"]) .hero-word.hw-on .hw-l::after {
    animation: hwsheen 7s linear infinite;
    animation-delay: calc(2.6s + var(--i) * .06s);
  }
}
@keyframes hwsheen { 0% { background-position: 160% 0; } 14% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
.js .hw-l { opacity: 0; transform: translateY(.35em) rotateX(-80deg); filter: blur(6px); }
.js.is-loaded .hw-l {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--ease), transform 1.4s var(--ease), filter 1s var(--ease);
  transition-delay: calc(.25s + var(--i) * .055s);
}
.hero-cta { position: relative; z-index: 2; }
/* vaste maat, ook op een laptop met 125-150 % schaling: niet de grote xl-knop */
.hero-cta .btn-xl { height: 56px; padding: 0 36px; font-size: 14px; letter-spacing: .18em; gap: 12px; }
.hero-cta .btn-xl svg { width: 18px; height: 18px; }
.js .hero-cta { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease) 1.1s, transform 1.2s var(--ease) 1.1s; }
.js.is-loaded .hero-cta { opacity: 1; transform: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 2.4vh; width: 1px; height: 54px; margin-left: -.5px; z-index: 2; background: linear-gradient(180deg, rgba(215, 184, 101, 0), rgba(215, 184, 101, .5)); overflow: hidden; }
.scroll-cue i { position: absolute; left: -1px; top: -12px; width: 3px; height: 12px; border-radius: 3px; background: var(--gold-2); box-shadow: 0 0 8px var(--gold-2); animation: cue 2.2s var(--ease-io) infinite; animation-play-state: var(--cue-ps, running); }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(66px); opacity: 0; } }
/* pauzeren via een eigenschap op de klasse, niet met een selector die op "i" eindigt: zo'n selector laat bij elke
   hoofdstukwissel (html[data-chapter]) alle i-elementen van de pagina opnieuw stylen (gemeten: ~100 per wissel) */
html[data-chapter]:not([data-chapter="hero"]) .scroll-cue { --cue-ps: paused; }

/* ------------------------------------------------------------- probeer hem */
.demo {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 2vh) var(--gut) 4vh;
}
.demo-grid {
  position: relative; z-index: 2; width: 100%; max-width: 1720px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(200px, 1fr) min(54vw, calc(min(80svh, 860px) * .7736)) minmax(240px, 1fr);
  align-items: center; gap: clamp(20px, 2.6vw, 48px);
}
/* altijd drie korte regels (NEEM / EEN / SHAKE): past in de vrije strook links van de machine (1280 t/m 1920).
   De maat hangt bewust niet aan --demo-free: die verandert tijdens camerabewegingen en dan zou de kop elke frame
   opnieuw opgemaakt worden. Is de strook te smal (html.demo-tight, js/site.js), dan gaat de kop weg (blok 3D). */
/* op een regel naast elkaar (niet elk woord onder elkaar) */
.demo-copy .h2 { font-size: clamp(26px, min(2.8vw, 5.4vh), 50px); white-space: nowrap; }
.demo-stage { display: flex; justify-content: center; min-height: min(80svh, 860px); align-items: center; }
.demo-side { display: flex; justify-content: flex-start; align-items: center; min-height: 260px; }

/* de 2D-machine */
.fm { position: relative; height: min(80svh, 860px); aspect-ratio: 820 / 1060; max-width: 100%; }
.fm::before {
  content: ""; position: absolute; left: -10%; right: 4%; top: 18%; height: 70%; z-index: -1;
  background: radial-gradient(closest-side, rgba(215, 184, 101, .16), transparent);
  filter: blur(10px);
}
.fm-view {
  position: absolute; left: 0; top: 0; width: 80.976%; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
}
.fm-box { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 664 / 1830; }
.fm-art { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); }
.fm-screen {
  position: absolute; left: 4.669%; top: 5.464%; width: 90.663%; height: 18.525%;
  overflow: hidden; border-radius: .35%; background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 0 40px rgba(215, 184, 101, .08);
}
.fm-screen > .scoop-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--ss, .24)); }
.fm-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 38%);
}
.fm-led {
  position: absolute; left: 8.4%; width: 82.9%; top: 33.9%; height: 1.2%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 245, 220, .9), rgba(251, 214, 140, .25) 60%, transparent);
  opacity: .25; transition: opacity .8s, transform .8s var(--ease); transform: scaleY(1);
}
.fm-led.is-bright { opacity: 1; transform: scaleY(2.4); }
.fm-chamber { position: absolute; left: 26.657%; top: 39.945%; width: 46.386%; height: 12.568%; overflow: hidden; border-radius: 1.2%; background: #222; }
.fm-ch-svg { width: 100%; height: 100%; }
.fm-ch-svg g, .fm-ch-svg rect, .fm-ch-svg ellipse { transform-box: fill-box; }
.fm-cup { opacity: 0; transform: translateY(-60px); transition: opacity .3s, transform .5s var(--ease); transform-origin: 50% 100%; }
.fm-bottle { opacity: 0; transform: translateY(-20px); transition: opacity .5s, transform .6s var(--ease); }
.fm-chamber[data-cup="drop"] .fm-cup { opacity: 1; transform: none; animation: cupdrop .9s cubic-bezier(.3, 0, .4, 1) both; }
@keyframes cupdrop { 0% { transform: translateY(-130px); } 70% { transform: translateY(4px); } 85% { transform: translateY(-5px); } 100% { transform: none; } }
.fm-chamber[data-cup="placed"] .fm-cup, .fm-chamber[data-cup="presented"] .fm-cup { opacity: 1; transform: none; }
.fm-arm { transform-origin: 50% 100%; transition: transform .8s var(--ease); }
.fm-chamber[data-cup="presented"] .fm-arm { transform: translateY(5px) scale(1.07); }
.fm-chamber[data-cup="taken"] .fm-cup { opacity: 0; transform: translateY(-10px) scale(1.1); transition: opacity .25s, transform .3s; }
.fm-chamber[data-cup="bottle"] .fm-bottle { opacity: 1; transform: none; }
.fm-liq { transform: translateY(118px); }
.fm-liqtop { opacity: 0; transition: opacity .4s; }
.fm-stream, .fm-wstream { opacity: 0; transition: opacity .25s; }
.fm-chamber[data-pour="on"] .fm-stream { opacity: 1; animation: flick .18s linear infinite alternate; }
.fm-chamber[data-water="on"] .fm-wstream { opacity: 1; animation: flick .18s linear infinite alternate; }
@keyframes flick { from { transform: scaleX(1); } to { transform: scaleX(.75); } }
.fm-water { transform: translateY(96px); }
.fm-hatch {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(28, 28, 30, .78), rgba(8, 8, 9, .86));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(255, 255, 255, .06);
  transition: transform 1s var(--ease-io);
}
.fm-hatch i { position: absolute; left: 6%; right: 6%; bottom: 6px; height: 2px; border-radius: 2px; background: var(--m-accent); opacity: .7; box-shadow: 0 0 8px var(--m-accent); }
.fm-chamber[data-hatch="open"] .fm-hatch { transform: translateY(-102%); }
.fm-ch-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s; background: radial-gradient(60% 80% at 50% 60%, color-mix(in srgb, var(--fc, #FBD68C) 35%, transparent), transparent 70%); mix-blend-mode: screen; }
.fm-chamber[data-hatch="open"] .fm-ch-glow { opacity: 1; }
.fm-cupbtn { position: absolute; left: 33%; top: 28%; width: 34%; height: 68%; border: 0; padding: 0; background: transparent; cursor: default; border-radius: 10px; }
.fm-cupbtn:not(:disabled) { cursor: pointer; }

/* betaalterminal (eigen 2D-versie, G2/G4/N5): VOOR op de machine, rechtsboven, over de bovenrand van de band en
   boven de watermodule, rechtop in een eigen beugel. Zelfde plek als in 3D (machine3d.js SIGMA: midden 236 mm
   rechts van het midden, 537 mm onder de bovenkant, 80 x 146 mm), omgerekend naar .fm (820 x 1060, de kast is
   80,976 % breed en 664 mm = 664 eenheden): links 528 / 664 x 80,976 % = 64,4 %, boven 464 x 0,0012195 / 1,2927
   = 43,8 %. Niets aan de zijkant. */
.fm-sigma {
  position: absolute; z-index: 3; left: 64.4%; top: 43.8%; width: 9.8%; height: 13.8%;
  padding: 0; border: 0; background: none; cursor: default;
}
.fm-sigma.is-armed { cursor: pointer; }
/* de beugel: een donkere houder om de onderkant van de terminal, met een lipje eronder (vast op de band) */
.sg-arm {
  position: absolute; left: -9%; right: -21%; top: 55%; bottom: -5%;
  border-radius: 12% 12% 22% 22% / 9% 9% 16% 16%;
  background: linear-gradient(180deg, #2c2d30 0%, #18191b 60%, #0e0f10 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(215, 184, 101, .22), 0 6px 10px rgba(0, 0, 0, .65);
}
.sg-body {
  position: absolute; inset: 0; border-radius: 13% / 8%;
  background: linear-gradient(160deg, #5c5f63 0%, #36383b 40%, #1f2022 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 2px rgba(0, 0, 0, .35), 0 12px 20px -8px rgba(0, 0, 0, .9);
}
/* kaartlezerblok aan de rechterkant van de terminal */
.sg-body::after {
  content: ""; position: absolute; left: 96%; top: 30%; width: 14%; height: 46%; border-radius: 0 30% 30% 0 / 0 12% 12% 0;
  background: linear-gradient(90deg, #26272a, #3a3c3f 55%, #1b1c1e);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08), 2px 4px 6px rgba(0, 0, 0, .5);
}
/* een paar sensorpuntjes bovenaan */
.sg-body::before {
  content: ""; position: absolute; left: 27%; top: 3.6%; width: 30%; height: 2.2%;
  background: radial-gradient(circle closest-side, #0b0b0b 72%, transparent 78%) 0 50% / 33.3% 100% repeat-x;
}
.sg-cam { position: absolute; left: 68%; top: 3%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #0d0d0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.sg-home { position: absolute; left: 40%; right: 40%; bottom: 6.5%; height: 2%; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.sg-screen {
  position: absolute; left: 8%; right: 8%; top: 8.5%; bottom: 14%; border-radius: 6% / 4%; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 40%, #1a1712, #050505);
  box-shadow: inset 0 0 0 2px #000;
  display: grid; place-items: center;
}
.sg-idle, .sg-ok { grid-area: 1 / 1; width: 54%; color: var(--m-accent); transition: opacity .4s, transform .5s var(--ease); }
.sg-idle svg, .sg-ok svg { width: 100%; height: auto; overflow: visible; }
.sg-ok { opacity: 0; transform: scale(.6); }
.sg-ok circle { fill: none; stroke: currentColor; stroke-width: 3; }
.sg-ok path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sg-rings { position: absolute; inset: 0; pointer-events: none; }
.sg-rings i { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; border: 2px solid var(--gold-2); opacity: 0; }
.fm-sigma.is-armed .sg-screen { box-shadow: inset 0 0 0 2px #000, inset 0 0 30px rgba(251, 214, 140, .35); }
.fm-sigma.is-armed .sg-rings i { animation: ring 1.8s var(--ease) infinite; }
.fm-sigma.is-armed .sg-rings i:nth-child(2) { animation-delay: .6s; }
.fm-sigma.is-armed .sg-rings i:nth-child(3) { animation-delay: 1.2s; }
.fm-sigma.is-armed .sg-idle { animation: idlepulse 1.8s ease-in-out infinite; }
.fm-sigma.is-near .sg-body { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 2px rgba(251, 214, 140, .8), 0 0 40px rgba(251, 214, 140, .55); }
.fm-sigma.is-ok .sg-idle { opacity: 0; transform: scale(.6); }
.fm-sigma.is-ok .sg-ok { opacity: 1; transform: none; }
.fm-sigma.is-ok .sg-screen { background: radial-gradient(90% 60% at 50% 45%, #3a2c10, #0b0904); }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes idlepulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* gouden Scoop-pas */
.card-dock {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  opacity: 0; visibility: hidden; transform: translateX(60px) rotate(6deg);
  transition: opacity .6s var(--ease), transform .9s var(--ease), visibility 0s linear .6s;
}
.card-dock.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease), transform 1s var(--ease), visibility 0s; }
.goldcard {
  --mx: .3; --my: .2;
  position: relative; z-index: 5; display: block;
  width: clamp(220px, 17vw, 310px); aspect-ratio: 1.586;
  container-type: inline-size;
  padding: 0; border: 0; background: none; border-radius: 16px;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
  perspective: 900px;
}
.goldcard:focus-visible { outline-offset: 6px; }
.goldcard.is-drag { cursor: grabbing; z-index: 55; }
.gc-float { display: block; width: 100%; height: 100%; animation: gcfloat 5s ease-in-out infinite; }
.goldcard.is-drag .gc-float, .goldcard.is-paid .gc-float { animation: none; }
/* de pas is alleen bij het betalen in beeld: daarbuiten staat het zweven stil */
html[data-demo]:not([data-demo="pay"]) .gc-float { animation-play-state: paused; }
@keyframes gcfloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
/* handje op de pas (zelfde als op de beker): tikken = betalen. Alleen zolang de pas wacht (gewapend, niet gesleept,
   niet boven de terminal, niet betaald) */
.gc-hint { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.gc-layer .goldcard:not([aria-disabled="true"]):not(.is-drag):not(.is-near):not(.is-paid) .gc-hint { opacity: 1; transition: opacity .45s .7s; }
.gc-hint .chn-hand { fill: rgba(0, 0, 0, .5); }
html[data-demo]:not([data-demo="pay"]) .gc-hint .chn-ring, html[data-demo]:not([data-demo="pay"]) .gc-hint .chn-hand { animation-play-state: paused; }
.gc-tilt { position: relative; display: block; width: 100%; height: 100%; border-radius: 16px; transform-style: preserve-3d; transition: transform .35s var(--ease); }
.gc-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 0% 0%, rgba(255, 245, 215, .55), transparent 45%),
    linear-gradient(125deg, #7d5a1f 0%, #c99d4e 18%, #f8de9c 34%, #c3923f 50%, #efcd84 66%, #a07633 84%, #6a4917 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 225, .8), inset 0 -1px 0 rgba(60, 40, 10, .5), inset 0 0 0 1px rgba(110, 76, 25, .55),
    0 24px 48px -16px rgba(0, 0, 0, .85), 0 0 50px -10px rgba(251, 214, 140, .45);
}
.gc-mark { position: absolute; left: 7%; top: 10%; height: 30%; width: auto; filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(60, 40, 10, .6)); opacity: .92; }
.gc-cl { position: absolute; right: 7%; top: 11%; width: 15%; color: rgba(255, 255, 255, .92); filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .6)); }
.gc-chip {
  position: absolute; left: 8%; top: 44%; width: 16%; aspect-ratio: 1.3; border-radius: 6px;
  background: linear-gradient(135deg, #f5e3b0, #c9a560 45%, #e9cf8c 70%, #a98545);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 15, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
  overflow: hidden;
}
.gc-chip i { position: absolute; background: rgba(90, 60, 15, .45); }
.gc-chip i:nth-child(1) { left: 0; right: 0; top: 33%; height: 1px; }
.gc-chip i:nth-child(2) { left: 0; right: 0; top: 66%; height: 1px; }
.gc-chip i:nth-child(3) { top: 0; bottom: 0; left: 35%; width: 1px; }
.gc-chip i:nth-child(4) { top: 0; bottom: 0; left: 65%; width: 1px; }
/* maten in cqw (breedte van de pas): het woord houdt bij elke pasbreedte links en rechts 8 % marge */
.gc-word {
  position: absolute; left: 8%; right: 8%; bottom: 11%; white-space: nowrap; line-height: 1;
  font-family: var(--fd); font-size: 16px; font-size: 7.4cqw; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 1px rgba(70, 46, 10, .75), 0 0 12px rgba(70, 46, 10, .35);
}
.gc-tag { position: absolute; right: 8%; top: 47%; font-family: var(--fd); font-size: 7px; font-size: 2.9cqw; line-height: 1; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 1px rgba(70, 46, 10, .7); white-space: nowrap; }
.gc-foil {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay;
  background:
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .75), transparent 42%),
    conic-gradient(from calc(var(--mx) * 300deg) at 50% 50%, rgba(255, 90, 160, .16), rgba(80, 210, 255, .16), rgba(255, 240, 120, .2), rgba(150, 255, 170, .14), rgba(255, 90, 160, .16));
}
.gc-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent calc(var(--mx) * 70% + 5%), rgba(255, 255, 255, .8) calc(var(--mx) * 70% + 15%), transparent calc(var(--mx) * 70% + 28%));
}
.goldcard.is-near .gc-face { box-shadow: inset 0 1px 0 rgba(255, 248, 225, .8), 0 0 0 2px rgba(255, 236, 190, .9), 0 0 60px rgba(251, 214, 140, .9); }
.goldcard.is-tap .gc-tilt { animation: gctap .5s var(--ease); }
@keyframes gctap { 0% { transform: translateZ(0); } 40% { transform: translateZ(-60px) scale(.94); } 100% { transform: none; } }
.goldcard.is-paid .gc-face { box-shadow: 0 0 0 2px rgba(255, 236, 190, .95), 0 0 80px rgba(251, 214, 140, 1); }
.goldcard.is-out { opacity: 0; transition: opacity .5s; }

/* hand op de beker */
.cup-hint {
  position: fixed; left: 0; top: 0; z-index: 45;
  width: 104px; height: 104px; margin: -52px 0 0 -52px;
  border: 0; padding: 0; background: none; cursor: pointer;
  opacity: 0; transition: opacity .45s;
}
.cup-hint.is-on { opacity: 1; }
.cup-hint.is-lost { opacity: 0; pointer-events: none; }
.chn-ring { position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--gold-2); box-shadow: 0 0 24px rgba(251, 214, 140, .6), inset 0 0 18px rgba(251, 214, 140, .35); animation: hintring 1.6s var(--ease) infinite; }
@keyframes hintring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* volgende stap (js/site.js): rechtsonder, witte pijl op goud. Weg op het einde van de pagina en zolang de demo bezig is */
.step-next {
  position: fixed; right: max(16px, calc(var(--gut) - 8px)); bottom: max(16px, 3.4vh); z-index: 40;
  height: 56px; padding: 0 22px 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; color: #fff; background: var(--btn-gold);
  font-family: var(--fc); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 1px rgba(36, 20, 0, .6);
  box-shadow: 0 12px 30px -10px rgba(251, 214, 140, .55), inset 0 1px 0 rgba(255, 245, 220, .45), inset 0 0 0 1px rgba(251, 214, 140, .35);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}
.step-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgba(36, 20, 0, .55)); animation: stepbob 2.4s var(--ease-io) infinite; }
@keyframes stepbob { 0%, 55%, 100% { transform: translateY(0); } 70% { transform: translateY(4px); } 85% { transform: translateY(-1px); } }
html[data-demo]:not([data-demo="idle"]) .step-next svg, .step-next.is-end svg { animation-play-state: paused; }
@media (hover: hover) { .step-next:hover { transform: translateY(2px); } }
.step-next:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
/* scrollen of vegen doet niets: de knop waar je klikt licht even op (js/site.js, nudge) */
.step-next.is-nudge, .hero-cta .btn.is-nudge { animation: nudge .9s var(--ease); }
@keyframes nudge { 0%, 100% { transform: none; filter: none; } 30% { transform: scale(1.09); filter: brightness(1.25) drop-shadow(0 0 18px rgba(251, 214, 140, .75)); } 60% { transform: scale(.98); } }
/* niet in de opening (daar staat Probeer hem nu), niet bij de demo (daar kies je een shake), niet terwijl de blauwdruk
   afspeelt (.is-wait), niet bij contact (de laatste stap: daar is het formulier de actie) en niet op het einde (.is-end) */
.step-next.is-end, .step-next.is-wait, html[data-chapter="hero"] .step-next, html[data-chapter="demo"] .step-next, html[data-chapter="contact"] .step-next, html[data-demo]:not([data-demo="idle"]):not([data-demo="koop"]) .step-next, html.m3d:not(.m3d-live) .step-next {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}
@media (max-width: 900px) {
  /* telefoon: een rond pijltje, zodat de knop niet over de inhoud valt; de tekst blijft voor schermlezers */
  .step-next { width: 50px; height: 50px; padding: 0; gap: 0; justify-content: center; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .step-next span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.chn-hand { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; fill: rgba(0, 0, 0, .35); stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(251, 214, 140, .9)); animation: grab 1.6s var(--ease-io) infinite; }
@keyframes grab { 0%, 100% { transform: translateY(6px) scale(1); } 50% { transform: translateY(-4px) scale(.92); } }
.chn-label {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: var(--btn-gold); color: #fff;
  font-family: var(--fc); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(36, 20, 0, .6); box-shadow: 0 10px 24px -8px rgba(251, 214, 140, .7);
}
.cup-fly { position: fixed; z-index: 44; pointer-events: none; animation: cupfly 1.9s cubic-bezier(.2, .8, .2, 1) forwards; }
.cup-fly svg { position: relative; width: 100%; height: 100%; }
.cf-glow { position: absolute; left: -60%; right: -60%; top: -40%; bottom: -40%; background: radial-gradient(closest-side, rgba(251, 214, 140, .85), rgba(251, 214, 140, 0)); filter: blur(4px); animation: cfglow 1.9s ease-out forwards; }
.cf-sparks i { position: absolute; left: 50%; top: 30%; width: 4px; height: 4px; border-radius: 50%; background: #FFE9B8; box-shadow: 0 0 8px #FBD68C; animation: spark 1.2s ease-out forwards; }
.cf-sparks i:nth-child(1) { --x: -70px; --y: -60px; }
.cf-sparks i:nth-child(2) { --x: 60px; --y: -80px; }
.cf-sparks i:nth-child(3) { --x: -90px; --y: 10px; }
.cf-sparks i:nth-child(4) { --x: 90px; --y: -10px; }
.cf-sparks i:nth-child(5) { --x: -30px; --y: -110px; }
.cf-sparks i:nth-child(6) { --x: 30px; --y: -120px; }
.cf-sparks i:nth-child(7) { --x: -60px; --y: 60px; }
.cf-sparks i:nth-child(8) { --x: 70px; --y: 50px; }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }
@keyframes cupfly { 0% { transform: translateY(0) scale(1); opacity: 1; } 45% { transform: translateY(-50px) scale(1.5); opacity: 1; } 100% { transform: translateY(-120px) scale(1.9); opacity: 0; } }
@keyframes cfglow { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }

/* ------------------------------------------------------------- zo werkt het */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.how-visual { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; z-index: 1; padding-top: calc(var(--nav-h) * .6); }
.how-visual-in { width: 100%; height: 100%; }
.how-list { grid-column: 1; grid-row: 1; list-style: none; position: relative; z-index: 2; }
.chap { min-height: 115vh; min-height: 115svh; display: flex; align-items: center; padding: 10vh var(--gut) 10vh max(var(--gut), 7vw); }
/* --chap-free (optioneel, px): vrije strook links van de machine, als js/site.js die per hoofdstuk zet */
.chap-in { position: relative; max-width: min(560px, 36vw, var(--chap-free, 560px)); }
/* 'Zo werkt het' blijft de kop van de sectie voor schermlezers, maar staat niet in beeld (een label dat niets toevoegt) */
.chap-section { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chap-title {
  position: relative; font-family: var(--fh); font-weight: 600; color: #fff;
  /* groot, op desktop een woord per regel: het langste woord (zichzelf) eindigt voor de rand van de machine, ook op
     1280 x 720 en 1920 x 1080 (de vh houdt het op lage schermen kleiner) */
  font-size: clamp(32px, min(5.2vw, 9.4vh), 104px); line-height: .96; letter-spacing: -.015em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .8);
  margin: 0 0 26px;
}
.chap-line { font-size: clamp(20px, 2vw, 34px); line-height: 1.3; color: rgba(255, 255, 255, .9); margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
/* het woord dat telt springt eruit: gekoeld in ijsblauw, zichzelf in goud; in de regel eronder halfvet in goud (kokend: warm oranje) */
.hl-cold { color: #8fd6ff; text-shadow: 0 0 34px rgba(110, 196, 255, .55), 0 4px 40px rgba(0, 0, 0, .8); }
.hl-gold { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 26px rgba(215, 184, 101, .25)); }
.chap-line mark { background: none; color: var(--gold-2); font-weight: 600; }
.chap-line mark.mk-hot { color: #ff9a5c; }
/* naast de machine: de kop een woord per regel, de regel eronder breekt ('Voor iedereen in de / sportschool.') liever
   dan dat hij de kast raakt */
@media (min-width: 901px) {
  .chap-title > span { display: block; width: fit-content; }
  .chap-line { max-width: 13em; }
}
.cp-card {
  flex: 0 0 auto; width: 68px; aspect-ratio: 1.586; border-radius: 6px; position: relative; overflow: hidden;
  background: linear-gradient(125deg, #7d5a1f 0%, #c99d4e 22%, #f8de9c 40%, #c3923f 58%, #efcd84 76%, #8a6424 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .7), 0 8px 18px -6px rgba(251, 214, 140, .5);
}
.cp-card i { position: absolute; left: 10%; top: 38%; width: 22%; height: 30%; border-radius: 2px; background: linear-gradient(135deg, #f5e3b0, #b08d4c); box-shadow: inset 0 0 0 1px rgba(90, 60, 15, .5); }
.cp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 45%, transparent 60%); transform: translateX(-100%); animation: cpshine 4s ease-in-out infinite; }
html[data-chapter]:not([data-chapter="stap-betalen"]) .cp-card::after { animation-play-state: paused; }
@keyframes cpshine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.js .chap-in > * { opacity: 0; transform: translateY(46px); transition: opacity .8s var(--ease), transform 1.1s var(--ease); }
.js .chap.is-active .chap-in > *, .js .chap.was-active .chap-in > * { opacity: 1; transform: none; }
.js .chap.is-active .chap-in > :nth-child(2) { transition-delay: .06s; }
.js .chap.is-active .chap-in > :nth-child(3) { transition-delay: .12s; }
.js .chap.is-active .chap-in > :nth-child(4) { transition-delay: .2s; }
.js .chap.is-active .chap-in > :nth-child(5) { transition-delay: .28s; }
.js .chap.was-active:not(.is-active) .chap-in > * { opacity: .16; transform: none; }

/* CSS-3D-machine (terugval) */
.bx-host { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1700px; perspective-origin: 50% 40%; }
.bx {
  --bh: min(68vh, 640px); --bw: calc(var(--bh) * .36284); --bd: calc(var(--bh) * .38251);
  --rx: -6deg; --ry: -26deg;
  position: relative; width: var(--bw); height: var(--bh);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 1.4s var(--ease-io);
}
.bx.is-dragging { transition: none; }
.bx-face { position: absolute; top: 0; left: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bx-front { width: var(--bw); height: var(--bh); margin-left: calc(var(--bw) / -2); transform: translateZ(calc(var(--bd) / 2)); }
.bx-front > svg { width: 100%; height: 100%; }
.bx-back { width: var(--bw); height: calc(var(--bh) * .9814); margin-left: calc(var(--bw) / -2); transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); background: linear-gradient(180deg, color-mix(in srgb, var(--m-body) 80%, #fff 6%), var(--m-body)); border-radius: 4px; }
.bx-side { width: var(--bd); height: calc(var(--bh) * .9814); margin-left: calc(var(--bd) / -2); background-color: var(--m-body); overflow: hidden; transform-style: preserve-3d; }
.bx-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bx-right { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.bx-right::after { background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .2)); }
.bx-left { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.bx-left::after { background: linear-gradient(270deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .3)), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .25)); }
.bx-top { width: var(--bw); height: var(--bd); margin-left: calc(var(--bw) / -2); top: calc(var(--bd) / -2); transform: rotateX(90deg); background: linear-gradient(180deg, color-mix(in srgb, var(--m-body) 75%, #fff 12%), var(--m-body)); border-radius: 4px; }
.bx-shadow {
  position: absolute; left: 50%; top: var(--bh); width: calc(var(--bw) * 2.4); height: calc(var(--bd) * 1.6);
  margin-left: calc(var(--bw) * -1.2); margin-top: calc(var(--bd) * -.8);
  transform: rotateX(90deg); background: radial-gradient(closest-side, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
}
.bx-wrap { position: absolute; inset: 0; }
/* zijkant: het SCOOPMACHINE-design uit zijn blad (assets/fleet/scoopmachine-1024.webp, indeling als FLEET_ATLAS in
   js/machine3d.js): rechts de rechterzijkant (voorkant links), links de linkerzijkant (voorkant rechts). Met een eigen
   logo een rustige zijkant met alleen dat logo, net als in 3D. */
.bx-side .bx-wrap { background: url("../assets/fleet/scoopmachine-1024.webp") no-repeat; background-size: 303.45% 100.87%; }
.bx-right .bx-wrap { background-position: 49.43% 0; }
.bx-left .bx-wrap { background-position: 0 0; }
.bx-sigma {
  position: absolute; left: 4%; top: 37%; width: 30%; height: 10.5%;
  transform: translateZ(calc(var(--bh) * .03)) rotateY(-55deg); transform-origin: 0 50%;
  border-radius: 10% / 6%; background: linear-gradient(160deg, #5c5f63, #2a2b2e 50%, #1a1b1d);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
}
.bx-sigma-scr { position: absolute; left: 9%; right: 9%; top: 9%; bottom: 15%; border-radius: 6%; background: #060606; box-shadow: inset 0 0 0 1px #000; transition: background .5s, box-shadow .5s; }
.bx-screen { position: absolute; left: 4.669%; top: 5.464%; width: 90.663%; height: 18.525%; overflow: hidden; border-radius: .4%; }
.bx-screen img { width: 100%; height: 100%; object-fit: cover; }
.bx-screen .bx-logo { position: absolute; left: 30%; top: 40%; width: 40%; height: auto; opacity: .9; transition: opacity .6s; }
.bx[data-fx="kies"] .bx-logo { opacity: 0; }
.bx-fx { position: absolute; pointer-events: none; opacity: 0; transition: opacity .8s; }
.bx[data-fx="kies"] .fx-kies, .bx[data-fx="koel"] .fx-koel, .bx[data-fx="water"] .fx-water, .bx[data-fx="clean"] .fx-clean { opacity: 1; }
.fx-kies { left: 4.669%; top: 5.464%; width: 90.663%; height: 18.525%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7% 3%; padding: 14% 5% 13%; background: rgba(0, 0, 0, .55); }
/* het oplichtende vakje is een eigen laagje (::after) dat alleen in dekking verandert: geen achtergrond- en
   schaduwanimatie (die schilderde elke frame opnieuw, en deze 2D-terugval draait juist op zwakke telefoons) */
.fx-kies i { position: relative; border-radius: 3px; background: rgba(215, 184, 101, .08); box-shadow: inset 0 0 0 1px rgba(215, 184, 101, .35); }
.fx-kies i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(251, 214, 140, .55); box-shadow: inset 0 0 0 1px #FBD68C, 0 0 14px rgba(251, 214, 140, .8); opacity: 0; animation: kiescell 4s ease-in-out infinite; }
.fx-kies i:nth-child(2)::after { animation-delay: .4s; } .fx-kies i:nth-child(3)::after { animation-delay: .8s; } .fx-kies i:nth-child(4)::after { animation-delay: 1.2s; } .fx-kies i:nth-child(5)::after { animation-delay: 1.6s; }
.fx-kies i:nth-child(6)::after { animation-delay: 2s; } .fx-kies i:nth-child(7)::after { animation-delay: 2.4s; } .fx-kies i:nth-child(8)::after { animation-delay: 2.8s; } .fx-kies i:nth-child(9)::after { animation-delay: 3.2s; } .fx-kies i:nth-child(10)::after { animation-delay: 3.6s; }
@keyframes kiescell { 0%, 20%, 100% { opacity: 0; } 8% { opacity: 1; } }
/* gekoeld water: alleen in de bekerkamer (een koude straal, koele gloed en wat nevel), niets door de kast */
.fx-koel { left: 26.6%; top: 39.9%; width: 46.4%; height: 12.6%; overflow: hidden; }
/* helder water (geen herhaald verloop: dat gaf strepen), eronder het rode drankje */
.fx-koel b { position: absolute; left: 49%; width: 2.6%; top: 8%; height: 62%; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .8) 45%, rgba(235, 246, 255, .3)); box-shadow: 0 0 8px rgba(225, 242, 255, .45); }
/* de kleur van het drankje dat de bezoeker in de demo maakte (--shake, js/demo.js); anders Cherry Bomb */
.fx-koel b::before { content: ""; position: absolute; left: -1500%; right: -1500%; bottom: -60%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--shake, #d8303f) 55%, transparent), transparent); }
.fx-koel i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #dff2ff; box-shadow: 0 0 6px #9fd2ff; opacity: 0; animation: frost 4s linear infinite; }
.fx-koel i:nth-child(2) { left: 36%; top: 72%; } .fx-koel i:nth-child(3) { left: 60%; top: 66%; animation-delay: .7s; } .fx-koel i:nth-child(4) { left: 44%; top: 84%; animation-delay: 1.4s; }
.fx-koel i:nth-child(5) { left: 64%; top: 80%; animation-delay: 2.1s; } .fx-koel i:nth-child(6) { left: 32%; top: 56%; animation-delay: 2.8s; } .fx-koel i:nth-child(7) { left: 56%; top: 50%; animation-delay: 3.4s; }
@keyframes frost { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-60px) scale(1.2); } }
.fx-water { left: 26.6%; top: 39.9%; width: 46.4%; height: 12.6%; }
.fx-water b { position: absolute; left: 49%; width: 3%; top: 8%; height: 70%; border-radius: 6px; background: linear-gradient(180deg, #e6f5ff, #68B8FB); box-shadow: 0 0 12px #68B8FB; animation: flick .16s linear infinite alternate; }
.fx-water i { position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 70%, rgba(104, 184, 251, .55), transparent 70%); mix-blend-mode: screen; }
.fx-clean { left: 26.6%; top: 30%; width: 46.4%; height: 22.5%; }
.fx-clean b { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: radial-gradient(60% 70% at 50% 60%, rgba(255, 150, 70, .55), transparent 70%); mix-blend-mode: screen; animation: warm 2.4s ease-in-out infinite; }
@keyframes warm { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.fx-clean i { position: absolute; bottom: 34%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); filter: blur(3px); opacity: 0; animation: steam 3s ease-out infinite; }
.fx-clean i:nth-child(2) { left: 22%; } .fx-clean i:nth-child(3) { left: 44%; animation-delay: .7s; } .fx-clean i:nth-child(4) { left: 60%; animation-delay: 1.4s; }
.fx-clean i:nth-child(5) { left: 34%; animation-delay: 2.1s; } .fx-clean i:nth-child(6) { left: 52%; animation-delay: 2.7s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260%) scale(2.2); } }
.bx[data-fx="pay"] .bx-sigma-scr { background: radial-gradient(closest-side, rgba(251, 214, 140, .8), #2a1f08); box-shadow: 0 0 18px rgba(251, 214, 140, .8); animation: idlepulse 1.6s ease-in-out infinite; }
/* effecten die niet aan staan: animaties stil (de 2D-terugval draait ook op zwakke telefoons) */
.bx:not([data-fx="kies"]) .fx-kies i::after, .bx:not([data-fx="koel"]) .fx-koel b, .bx:not([data-fx="koel"]) .fx-koel i,
.bx:not([data-fx="water"]) .fx-water b, .bx:not([data-fx="clean"]) .fx-clean b, .bx:not([data-fx="clean"]) .fx-clean i { animation-play-state: paused; }

/* ------------------------------------------------------------- drankjes
   Compact: de vier productlijnen naast elkaar (telefoon twee bij twee), niets om zijwaarts te scrollen. Per lijn het
   drankje, de smaken (een knopje wisselt het beeld) en een link naar de webshop. */
.drinks { overflow: hidden; }
.dr-in { position: relative; width: min(1720px, 100%); margin: 0 auto; padding: calc(var(--nav-h) + 4vh) var(--gut) 5vh; }
.dr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 36px; margin: 0 0 3.4vh; }
.dr-logo { width: clamp(110px, 9vw, 170px); height: auto; filter: drop-shadow(0 8px 24px rgba(251, 214, 140, .16)); }
.dr-head .h2 { font-size: clamp(26px, 2.8vw, 46px); margin: 0; }
.dr-line { margin: 10px 0 0; color: var(--t2); max-width: 48ch; }
.dr-shop { white-space: nowrap; }
.dr-buy {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 4px 0; text-decoration: none;
  font-family: var(--fc); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2);
  transition: color .3s;
}
.dr-buy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) { .dr-buy:hover { color: #fff; } .dr-buy:hover svg { transform: translate(2px, -2px); } }
.dr-buy:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }
.dr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 26px); }
.dr-panel {
  --accent: #D7B865;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(16px, 1.5vw, 26px) clamp(16px, 1.5vw, 26px) clamp(18px, 1.6vw, 26px); border-radius: 24px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 55% at 50% 24%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008) 60%, rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 0 1px rgba(215, 184, 101, .16), inset 0 1px 0 rgba(255, 236, 190, .07), 0 40px 80px -50px rgba(0, 0, 0, .9);
  transition: background .8s;
}
.dr-hero { position: relative; z-index: 2; margin: 0 auto 14px; width: min(100%, 30svh, 250px); aspect-ratio: 1; perspective: 1000px; }
/* zachte gloed zonder blur-filter */
.dr-glow { position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 42%, transparent), color-mix(in srgb, var(--accent) 18%, transparent) 52%, color-mix(in srgb, var(--accent) 5%, transparent) 78%, transparent); }
.dr-tilt { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.dr-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)); -webkit-user-drag: none; }
.dr-hero.is-swap .dr-img { opacity: 0; transform: scale(.92) translateY(14px); }
/* de pot komt zacht op zodra hij echt geladen en gedecodeerd is (.is-ready, js/site.js): nooit een harde 'plop' */
html.js .dr-img { transition: opacity .45s var(--ease), transform .6s var(--ease); }
html.js .dr-img:not(.is-ready) { opacity: 0; transform: translateY(8px) scale(.98); }
.dr-floor { position: absolute; left: 18%; right: 18%; bottom: 2%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent); transform: translateZ(-40px); }
.dr-copy { position: relative; z-index: 3; display: flex; flex-direction: column; flex: 1 1 auto; }
.dr-kind { font-family: var(--fc); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-3); margin: 0 0 8px; }
.dr-title { font-family: var(--fc); text-transform: uppercase; color: #fff; font-size: clamp(17px, 1.45vw, 25px); line-height: 1; letter-spacing: .02em; margin: 0 0 16px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); cursor: pointer;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .86);
  transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
@media (hover: hover) { .chip:hover { border-color: rgba(251, 214, 140, .5); color: #fff; transform: translateY(-1px); } }
.chip[aria-pressed="true"] { border-color: var(--gold-2); background: rgba(251, 214, 140, .1); color: #fff; box-shadow: 0 0 0 1px rgba(251, 214, 140, .3), 0 10px 26px -12px rgba(251, 214, 140, .6); }
.dr-panel .dr-buy { margin-top: auto; padding-top: 18px; }
.dr-foot { margin: 2.4vh 0 0; }
.dr-note { margin: 0; font-size: 13px; color: var(--t3); letter-spacing: .04em; }

/* ------------------------------------------------------------- contact
   Hoofdstuk 'contact': links staat de 3D-machine,
   rechts de kop, het formulier en het mailadres. Zonder 3D: de stilstaande render. */
.contact { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 5vh) 0 9vh; overflow: hidden; overflow-anchor: none; }
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* zachte overgang uit de (dichte) drankjes: de machine komt eronder vandaan op in plaats van afgesneden. Even hoog als
   eerst (de gouden lijn .cb-t op nav + 1,5vh blijft helder), wel de S-curve: geen streep waar het zwart begint. */
.contact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--nav-h) + 3vh); z-index: 1; pointer-events: none; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .97) 10%, rgba(0, 0, 0, .9) 20%, rgba(0, 0, 0, .78) 30%, rgba(0, 0, 0, .65) 40%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .22) 70%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, .03) 90%, rgba(0, 0, 0, 0) 100%); }
.cb-rail { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(251, 214, 140, .7) 30%, rgba(251, 214, 140, .7) 70%, transparent); box-shadow: 0 0 14px rgba(251, 214, 140, .45); transform: scaleX(0); transition: transform 1.8s var(--ease); }
.cb-t { top: calc(var(--nav-h) + 1.5vh); }
.cb-b { bottom: 5vh; transition-delay: .3s; }
.contact.is-in .cb-rail { transform: scaleX(1); }
.cb-glow { position: absolute; left: -12vw; top: 8%; width: 62vw; height: 92%; background: radial-gradient(closest-side, rgba(215, 184, 101, .13), transparent); }
html.has-3d .cb-glow { opacity: .55; }
.contact-in {
  position: relative; z-index: 2; width: min(1600px, 100%); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); align-items: center;
  min-height: calc(100svh - var(--nav-h) - 14vh);
}
.contact-machine { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 62svh; }
.contact-still { margin: 0 auto auto; height: 70svh; max-height: 760px; }
.contact-still img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .85)); }
.contact-main { min-width: 0; max-width: 860px; }
.contact-copy { margin-bottom: clamp(22px, 3.4vh, 40px); }
.contact-h { font-size: clamp(26px, 2.8vw, 50px); line-height: 1; letter-spacing: -.01em; margin: 0; text-wrap: initial; white-space: nowrap; }
.contact-h .ch-2 { display: inline-block; padding-bottom: .04em; filter: drop-shadow(0 6px 30px rgba(215, 184, 101, .18)); }
/* mailen: een rond mailicoon met het adres; de link opent een mail met een kort sjabloon (onderwerp en een paar regels) */
.contact-direct { display: flex; margin: 26px 0 0; }
.contact-mail {
  display: inline-flex; align-items: center; gap: 16px; min-width: 0; text-decoration: none;
  font-family: var(--fc); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .06em; color: var(--gold-2); transition: color .3s;
}
.cm-ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(215, 184, 101, .55); background: rgba(215, 184, 101, .06);
  transition: background .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.cm-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.cm-addr { overflow-wrap: anywhere; }
.contact-mail:hover { color: #fff; }
.contact-mail:hover .cm-ico { background: var(--grad); border-color: transparent; transform: scale(1.06); }
.contact-mail:hover .cm-ico svg { stroke: #fff; }
.form-card {
  position: relative; min-width: 0; border-radius: 28px; padding: clamp(24px, 3.2vw, 48px); contain: layout;
  background: linear-gradient(180deg, rgba(24, 21, 15, .92), rgba(8, 8, 8, .96));
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 1), 0 0 120px -40px rgba(215, 184, 101, .3), inset 0 1px 0 rgba(255, 236, 190, .08);
}
/* de lopende gouden rand: het masker (alleen de 1 px-rand van de kaart blijft over) staat op .fc-border, het
   kleurverloop zit op een vierkant ::before dat groot genoeg is om bij elke hoek de hele kaart te dekken en draait
   met transform. Dat loopt op de compositor: geen stijlberekening en geen nieuw schilderwerk per frame (eerder draaide
   een @property-hoek in het verloop zelf: ~60 stijlberekeningen per seconde en de hele kaart opnieuw geschilderd,
   ook tijdens het typen). Zelfde beeld: een conisch verloop om het midden van de kaart, gedraaid. */
.fc-border {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; overflow: hidden;
  container-type: size;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fc-border::before {
  /* zijde 1,5 x de langste kant (meer dan de diagonaal): dekt de kaart bij elke hoek, ook een hoge kaart op een telefoon.
     Gecentreerd met marges (de helft van de zijde), niet met translate in %: een transform die van de eigen maat
     afhangt houdt de animatie op de hoofdthread. */
  content: ""; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%;
  width: max(150cqw, 150cqh); margin: calc(-1 * max(75cqw, 75cqh)) 0 0 calc(-1 * max(75cqw, 75cqh));
  background: conic-gradient(rgba(215, 184, 101, .15), rgba(251, 214, 140, .85), rgba(215, 184, 101, .15) 30%, rgba(215, 184, 101, .15) 70%, rgba(251, 214, 140, .55), rgba(215, 184, 101, .15));
  transform: rotate(210deg);
  animation: fcspin 9s linear infinite;
}
/* alleen in het hoofdstuk contact (daarbuiten staat hij stil), en stil zolang er in het formulier getypt wordt */
html[data-chapter]:not([data-chapter="contact"]) .fc-border::before, .form-card:focus-within .fc-border::before { animation-play-state: paused; }
@keyframes fcspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.form { position: relative; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; margin-bottom: 18px; }
.field input, .field textarea {
  width: 100%; display: block; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .035); color: #fff;
  font: inherit; font-size: 16px; padding: 26px 18px 10px; min-height: 62px;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(251, 214, 140, .7); background: rgba(255, 255, 255, .055); box-shadow: 0 0 0 4px rgba(251, 214, 140, .12); }
.field label {
  position: absolute; left: 19px; top: 20px; pointer-events: none; transform-origin: 0 0;
  font-size: 15.5px; color: rgba(255, 255, 255, .55);
  transition: transform .35s var(--ease), color .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.74); color: var(--gold-2); letter-spacing: .04em; }
.field .opt { color: rgba(255, 255, 255, .38); }
.field.has-err input, .field.has-err textarea { border-color: rgba(255, 120, 110, .7); }
.f-err { margin: 6px 2px 0; font-size: 13.5px; color: #ff8f86; min-height: 0; }
.f-err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.f-privacy { margin: 0; font-size: 13.5px; color: var(--t3); }
.btn-submit { min-width: 210px; }
.bs-spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.form.is-sending .bs-spin { display: inline-block; }
.form.is-sending .bs-label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }
.f-msg { margin: 16px 0 0; font-size: 15px; }
.f-msg:empty { display: none; }
.f-msg.is-err { color: #ff9a92; }
.form-done { text-align: center; padding: 30px 10px; outline: none; }
.form-done .h3 { margin: 18px 0 8px; }
.fd-mark { width: 96px; height: 96px; margin: 0 auto; }
.fd-c, .fd-t { fill: none; stroke: var(--gold-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--ease); }
.fd-t { transition-delay: .4s; stroke-width: 4; }
.form-done.is-on .fd-c, .form-done.is-on .fd-t { stroke-dashoffset: 0; }

/* ------------------------------------------------------------- footer */
.foot { padding: 12vh 0 6vh; text-align: center; }
.foot-logo { display: inline-block; }
.foot-logo img { width: min(300px, 70vw); height: auto; margin: 0 auto; }
.foot-tag { margin: 22px 0 40px; font-family: var(--fc); font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-3); }
.foot-cols { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 46px; font-size: 14.5px; color: var(--t3); }
.foot-cols p { margin: 0; }
.foot-cols a { color: var(--t2); text-decoration: none; }
.foot-cols a:hover { color: var(--gold-2); }
.foot-copy { margin: 46px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .32); }

/* ------------------------------------------------------------- onthullen */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   HET SCHERM VAN DE MACHINE (#scoop-screen), 1920 x 1080 CSS-px
   ===================================================================== */
.scoop-screen {
  --fc: #D7B865;
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
  background: #050505; color: #fff; font-family: var(--fb); line-height: 1.2;
  -webkit-user-select: none; user-select: none; text-align: left;
  /* bewust geen contain: elke vorm maakt van het scherm een extra 1920 x 1080 compositorlaag naast die van de
     3D-machine (gemeten met LayerTree); overflow: hidden houdt de inhoud al binnen */
}
/* :where houdt de reset zwak (0,0,1), zodat .sb en .sb-ghost hun eigen letter en kleur houden */
:where(.scoop-screen) button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.scoop-screen :focus-visible { outline: 4px solid var(--gold-2); outline-offset: 6px; }
/* koppen die alleen vanuit de code focus krijgen (voorlezen bij elk nieuw scherm): geen ring, het zijn geen knoppen.
   Tegels, Bevestigen, Terug, de pas en de beker houden hun gouden ring. */
.scoop-screen [tabindex="-1"]:focus, .scoop-screen [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.ss-bg { position: absolute; inset: 0; background: #000 url("../assets/bg/machine-screen-bg-1920.webp") center / 100% 100% no-repeat; }
.ss-run { position: absolute; left: 0; width: 520px; height: 14px; margin-top: -7px; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(251, 214, 140, .35) 55%, transparent); animation: ssrun 7s linear infinite; }
/* het scherm staat alleen in de opening, de demo en stap 1 groot in beeld: elders staan de lopende lichtjes stil */
html[data-chapter]:not([data-chapter="hero"]):not([data-chapter="demo"]):not([data-chapter="stap-kies"]) .scoop-screen .ss-run { animation-play-state: paused; }
html[data-chapter]:not([data-chapter="hero"]):not([data-chapter="demo"]):not([data-chapter="stap-kies"]) .scoop-screen .ss-hint { --hint-ps: paused; }
/* de lopende lichtjes en het knipperende puntje van 'Tik op je shake' (eigen lagen door hun animatie) tekenen na het
   tegelveld: anders moet het hele tegelveld (.ss-field, 1920 x 1024) een extra compositorlaag worden omdat het
   een paar px over zo'n laag valt (Overlap; gemeten met LayerTree) */
.ss-top { z-index: 1; }
.ss-run { z-index: 2; }
.ss-run-t { top: 96px; }
.ss-run-b { top: 977px; animation-direction: reverse; animation-delay: -3.5s; }
@keyframes ssrun { from { transform: translateX(-560px); } to { transform: translateX(1960px); } }
.ss-top { position: absolute; left: 0; right: 0; top: 0; height: 91px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* de hint hoort bij het verkoopscherm: zelfde tempo als de schermen (weg in 0,16 s, daarna pas op) */
.ss-hint { display: flex; align-items: center; gap: 20px; font-family: var(--fd); font-size: 30px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); opacity: 0; transition: opacity .16s ease; text-shadow: 0 0 20px rgba(251, 214, 140, .45); }
.ss-hint i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 16px var(--gold-2); animation: idlepulse 1.6s ease-in-out infinite; animation-play-state: var(--hint-ps, running); }
.scoop-screen:not([data-state="grid"]) .ss-hint i { animation-play-state: paused; }
.scoop-screen[data-state="grid"] .ss-hint { opacity: 1; transition: opacity .3s ease .16s; }
.ss-field { position: absolute; left: 0; right: 0; top: 101px; height: 872px; }
.ss-logo { display: none; }
/* een scherm tegelijk (N1): het oude beeld is weg (0,16 s) voordat het nieuwe opkomt, nooit twee over elkaar */
.ss-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .16s ease, transform .3s var(--ease), visibility 0s linear .16s; }
.ss-view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease .16s, transform .5s var(--ease) .16s, visibility 0s; }
/* ook bij het stille terugzetten naar het verkoopscherm (.is-quiet, js/screen.js: na de proost, scherm klein of uit
   beeld) eerst het oude scherm weg en pas dan het nieuwe op: geen overvloei van twee schermen over elkaar (N1).
   html ervoor = net iets zwaarder dan de !important-regels die screen.js zelf toevoegt. */
html .scoop-screen.is-quiet .ss-view { transition: opacity .22s ease, visibility 0s linear .22s !important; }
html .scoop-screen.is-quiet .ss-view.is-on { transition: opacity .38s ease .22s, visibility 0s !important; }

/* verkoopscherm */
.ss-grid { position: absolute; inset: 42px 80px 38px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
.ss-card {
  contain: layout paint;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 14px 26px; border: 0; border-radius: 28px; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 60%, rgba(0, 0, 0, .2));
  box-shadow: inset 0 0 0 1.5px rgba(215, 184, 101, .17), 0 20px 40px -30px rgba(0, 0, 0, .9);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.ss-card-img { position: absolute; left: 50%; top: 8px; width: 200px; height: 200px; margin-left: -100px; }
.ss-card-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 50%, transparent), transparent); filter: blur(14px); opacity: .7; transition: opacity .4s; }
.ss-card-img img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .65)); transition: transform .6s var(--ease); }
/* P1: productlijn groot, smaak klein eronder */
.ss-card-name { font-family: var(--fd); font-size: 34px; line-height: 1.02; letter-spacing: .03em; text-transform: uppercase; text-align: center; min-height: 2.04em; display: flex; align-items: flex-end; justify-content: center; color: #fff; }
.ss-card-tag { font-family: var(--fd); font-size: 24px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); margin: 10px 0 0; white-space: nowrap; }
.ss-card-bar { width: 96px; height: 5px; border-radius: 3px; margin-top: 14px; background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: 0 0 16px var(--c); }
.ss-card:focus-visible { transform: translateY(-8px); box-shadow: inset 0 0 0 2px rgba(251, 214, 140, .75), 0 30px 60px -24px rgba(251, 214, 140, .55); }
.ss-card:focus-visible .ss-card-img img { transform: scale(1.08) translateY(-6px); }
/* hover alleen met een muis: op een telefoon blijft een getikte tegel anders 'hangen' */
@media (hover: hover) {
  .ss-card:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 2px rgba(251, 214, 140, .75), 0 30px 60px -24px rgba(251, 214, 140, .55); }
  .ss-card:hover .ss-card-img img { transform: scale(1.08) translateY(-6px); }
  .ss-card:hover .ss-card-glow { opacity: 1; }
}
.ss-card:active { transform: translateY(-2px) scale(.98); }
/* backwards, niet both: na het opkomen houdt geen animatie de tegel vast (anders blijft elke tegel een eigen
   compositorlaag en werken de hover- en tik-transforms niet, omdat een gevulde animatie ze overschrijft) */
.v-grid.is-on .ss-card { animation: cardin .8s var(--ease) backwards; animation-delay: calc(var(--i) * .05s); }
@keyframes cardin { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }

/* knoppen op het scherm */
.ss-bar { position: absolute; left: 110px; right: 110px; bottom: 30px; height: 124px; display: flex; align-items: center; gap: 44px; }
.ss-bar-l { right: auto; }
.sb {
  position: relative; height: 124px; padding: 0 74px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--fd); font-size: 46px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s;
}
@media (hover: hover) { .sb:hover { transform: translateY(-3px); } }
.sb:active { transform: scale(.97); }
.sb-ghost { background: rgba(0, 0, 0, .45); color: var(--gold-2); box-shadow: inset 0 0 0 2.5px rgba(215, 184, 101, .65); }
.sb-gold { background: var(--btn-gold); color: #fff; text-shadow: 0 2px 2px rgba(36, 20, 0, .6), 0 0 18px rgba(60, 34, 4, .45); box-shadow: inset 0 2px 0 rgba(255, 236, 190, .55), inset 0 0 0 2px rgba(251, 214, 140, .35), 0 20px 50px -20px rgba(251, 214, 140, .75); }
.sb-red { background: linear-gradient(180deg, #d63c3c, #9b1f1f); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 200, 200, .4), 0 16px 40px -16px rgba(214, 60, 60, .7); }

/* koopscherm */
.k-photo { position: absolute; left: 130px; top: 36px; width: 640px; height: 640px; }
.k-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fc) 50%, transparent), transparent); filter: blur(24px); }
.k-photo img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); animation: kbob 3s ease-in-out infinite; }
@keyframes kbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2%); } }
.k-info { position: absolute; left: 860px; right: 110px; top: 96px; }
.k-tag { font-family: var(--fd); font-size: 40px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 30px; }
.k-name { font-family: var(--fd); font-size: 104px; line-height: .98; letter-spacing: .03em; text-transform: uppercase; color: #fff; margin: 0 0 18px; outline: none; }
.k-chips { display: flex; gap: 16px; margin: 0; }
.k-chips span { display: inline-flex; align-items: center; height: 60px; padding: 0 28px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(215, 184, 101, .45); font-family: var(--fd); font-size: 21px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.k-count { flex: 1 1 auto; height: 18px; border-radius: 999px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1.5px rgba(251, 214, 140, .25); overflow: hidden; }
.k-count i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; background: linear-gradient(90deg, #8A5E1E, #D9B45F, #FBE7A8); box-shadow: 0 0 18px rgba(251, 214, 140, .5); }

/* betaalscherm */
.b-prod { position: absolute; left: 120px; top: 50px; width: 520px; text-align: center; }
.b-img { width: 480px; height: 480px; margin: 0 auto; }
.b-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)); }
.b-name { margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.b-name span { font-family: var(--fd); font-size: 30px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.b-name b { font-family: var(--fd); font-size: 48px; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.b-main { position: absolute; left: 760px; right: 150px; top: 120px; }
.b-title { font-family: var(--fd); font-size: 96px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: #fff; margin: 0 0 28px; outline: none; }
.b-sub { font-size: 36px; color: rgba(255, 255, 255, .72); margin: 0; }
.b-point { display: flex; align-items: center; gap: 44px; margin-top: 56px; color: var(--gold-2); }
/* waar de pas heen moet: het contactloos-teken in een gouden ring die zacht uitdijt (twee golven om de beurt); de pijl
   ernaast wijst naar de terminal */
.b-waves {
  position: relative; flex: none; display: grid; place-items: center; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(251, 214, 140, .2), rgba(20, 15, 6, .92) 68%);
  box-shadow: inset 0 0 0 4px rgba(251, 214, 140, .8), inset 0 0 40px rgba(251, 214, 140, .18), 0 0 60px rgba(215, 184, 101, .35);
}
.b-waves i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(251, 214, 140, .75); opacity: 0; animation: bripple 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.b-waves i + i { animation-delay: 1.2s; }
@keyframes bripple { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.6); opacity: 0; } }
.b-waves svg { width: 118px; height: 113px; overflow: visible; animation: idlepulse 1.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(251, 214, 140, .6)); }
.b-arrow svg { width: 260px; height: 130px; fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; animation: bnudge 1.3s var(--ease-io) infinite; filter: drop-shadow(0 0 16px rgba(251, 214, 140, .6)); }
@keyframes bnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
.b-count { position: absolute; right: 110px; top: 34px; font-family: var(--fd); font-size: 64px; color: rgba(255, 255, 255, .4); }
.b-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: radial-gradient(60% 70% at 50% 50%, rgba(40, 30, 10, .96), rgba(4, 4, 4, .98)); opacity: 0; transition: opacity .2s; pointer-events: none; }
/* de gloed op de hele svg (overflow zichtbaar), niet per cirkel of pad: geen afgesneden vierkant */
.b-ok svg { width: 260px; height: 260px; overflow: visible; filter: drop-shadow(0 0 16px rgba(251, 214, 140, .7)); }
.b-ok circle, .b-ok path { fill: none; stroke: var(--gold-2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.b-ok path { stroke: #fff; stroke-width: 7; }
.b-ok b { font-family: var(--fd); font-size: 110px; letter-spacing: .1em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* eerst is "Betaal bij de terminal" weg (0,12 s), pas dan komt "Betaald" op: nooit twee teksten over elkaar */
.v-betalen.is-ok .b-ok { opacity: 1; transition: opacity .3s ease .12s; }
.v-betalen.is-ok .b-ok circle { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease) .12s; }
.v-betalen.is-ok .b-ok path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) .47s; }
.v-betalen.is-ok .ss-bar, .v-betalen.is-ok .b-count, .v-betalen.is-ok .b-main, .v-betalen.is-ok .b-prod { opacity: 0; transition: opacity .12s; }

/* maken en klaar */
.m-ring { position: absolute; left: 50%; top: 22px; width: 560px; height: 560px; margin-left: -280px; }
.m-ring svg { width: 100%; height: 100%; overflow: visible; }
.m-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 3; }
.m-prog { fill: none; stroke: url(#ss-ring-g); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 100px 100px; }
.m-head { fill: #FFF3D6; filter: drop-shadow(0 0 4px #FBD68C); }
.m-glass { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.m-shine { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 3; stroke-linecap: round; }
.m-surf { transition: opacity .3s; }
.m-wave { opacity: .95; animation: mwave 2.2s linear infinite; }
@keyframes mwave { from { transform: translateX(-40px); } to { transform: translateX(0); } }
.m-pow circle { fill: var(--fc); opacity: 0; }
.m-jet { fill: #d6eeff; opacity: 0; transition: opacity .3s; }
.m-bub circle { fill: rgba(255, 255, 255, .65); opacity: 0; }
.v-maken[data-stage="poeder"] .m-pow circle { animation: pow 1s linear infinite; }
.v-maken[data-stage="poeder"] .m-pow circle:nth-child(2) { animation-delay: .25s; }
.v-maken[data-stage="poeder"] .m-pow circle:nth-child(3) { animation-delay: .5s; }
.v-maken[data-stage="poeder"] .m-pow circle:nth-child(4) { animation-delay: .75s; }
.v-maken[data-stage="poeder"] .m-pow circle:nth-child(5) { animation-delay: .4s; }
@keyframes pow { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(90px); } }
.v-maken[data-stage="water"] .m-jet { opacity: .9; animation: flick .14s linear infinite alternate; transform-box: fill-box; transform-origin: center; }
.v-maken[data-stage="mixen"] .m-bub circle { animation: bub 1.6s ease-in infinite; }
.v-maken[data-stage="mixen"] .m-bub circle:nth-child(2) { animation-delay: .3s; }
.v-maken[data-stage="mixen"] .m-bub circle:nth-child(3) { animation-delay: .6s; }
.v-maken[data-stage="mixen"] .m-bub circle:nth-child(4) { animation-delay: .9s; }
.v-maken[data-stage="mixen"] .m-bub circle:nth-child(5) { animation-delay: 1.2s; }
@keyframes bub { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px); } }
.m-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.m-burst i { position: absolute; left: -3px; top: -60px; width: 6px; height: 60px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 244, 214, 0), #FBD68C); opacity: 0; transform: rotate(var(--a)) translateY(-150px); transform-origin: 50% 60px; }
.v-maken.is-ready .m-burst i { animation: burst 1.2s var(--ease) both; animation-delay: calc(var(--d) * .08s); }
@keyframes burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scaleY(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-330px) scaleY(1.2); } }
.v-maken.is-ready .m-ring svg { animation: ringpop .9s var(--ease); }
@keyframes ringpop { 0% { transform: scale(1); filter: none; } 30% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(251, 214, 140, .8)); } 100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(251, 214, 140, .35)); } }
.v-maken.is-ready .m-prog { stroke-width: 6; }
.m-txt { position: absolute; left: 0; right: 0; top: 608px; text-align: center; }
.m-title { font-family: var(--fd); font-size: 66px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 24px; outline: none; }
.v-maken.is-ready .m-title { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 96px; margin-bottom: 14px; }
.m-stages { display: flex; justify-content: center; gap: 70px; margin: 0; }
.m-stages span { position: relative; font-family: var(--fd); font-size: 28px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .32); transition: color .4s; }
.m-stages span::before { content: ""; position: absolute; left: 50%; top: -22px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .4s, box-shadow .4s; }
.m-stages span.is-done { color: rgba(255, 255, 255, .75); }
.m-stages span.is-on { color: var(--gold-2); }
.m-stages span.is-on::before { background: var(--gold-2); box-shadow: 0 0 14px var(--gold-2); }
.m-ready { display: none; align-items: center; justify-content: center; gap: 26px; margin: 0; }
.m-ready b { font-family: var(--fd); font-size: 46px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.m-down svg { width: 46px; height: 62px; fill: none; stroke: var(--gold-2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; animation: down 1.2s var(--ease-io) infinite; }
@keyframes down { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(10px); } }
.v-maken.is-ready .m-stages { display: none; }
.v-maken.is-ready .m-ready { display: flex; }
.m-pct { position: absolute; left: 50%; top: 504px; transform: translateX(-50%); font-family: var(--fd); font-size: 28px; letter-spacing: .12em; color: var(--gold-3); }
.v-maken.is-ready .m-pct { opacity: 0; }

/* proost */
.v-proost { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pr-title { font-family: var(--fd); font-size: 210px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; outline: none; filter: drop-shadow(0 10px 40px rgba(251, 214, 140, .35)); }
.v-proost.is-on-anim .pr-title { animation: prpop 1s var(--ease) both; }
@keyframes prpop { from { opacity: 0; transform: scale(.7) translateY(30px); } to { opacity: 1; transform: none; } }
.pr-name { margin: 26px 0 50px; font-family: var(--fd); font-size: 40px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.pr-spark { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.pr-spark i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #FBD68C; box-shadow: 0 0 14px #FBD68C; opacity: 0; }
.v-proost.is-on-anim .pr-spark i { animation: prsp 1.6s var(--ease) both; animation-delay: calc(var(--d) * .1s + .1s); }
@keyframes prsp { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-460px) scale(1); } }

/* water */
.v-water { background: rgba(0, 0, 0, .55); }
.w-pick { position: absolute; left: 0; right: 0; top: 54px; text-align: center; transition: opacity .3s ease .16s, visibility 0s; }
.w-badge { display: inline-flex; align-items: center; height: 56px; padding: 0 30px; border-radius: 999px; margin: 0; background: rgba(104, 184, 251, .12); box-shadow: inset 0 0 0 2px rgba(104, 184, 251, .5); color: #a9d8ff; font-family: var(--fd); font-size: 22px; letter-spacing: .22em; text-transform: uppercase; }
.w-title { font-family: var(--fd); font-size: 100px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 30px 0 12px; outline: none; }
.w-sub { margin: 0; font-family: var(--fd); font-size: 30px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.w-sizes { display: flex; justify-content: center; gap: 36px; margin-top: 60px; }
.w-size {
  width: 300px; height: 230px; border: 0; border-radius: 32px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, rgba(104, 184, 251, .16), rgba(104, 184, 251, .04));
  box-shadow: inset 0 0 0 2px rgba(104, 184, 251, .45);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.w-size b { font-family: var(--fd); font-size: 88px; line-height: 1; color: #fff; }
.w-size span { font-family: var(--fd); font-size: 28px; letter-spacing: .2em; text-transform: uppercase; color: #a9d8ff; }
.w-size:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 3px #68B8FB, 0 24px 50px -20px rgba(104, 184, 251, .7); }
@media (hover: hover) { .w-size:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 3px #68B8FB, 0 24px 50px -20px rgba(104, 184, 251, .7); } }
.w-tap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
.w-ml { display: flex; align-items: baseline; gap: 16px; margin: 0; }
.w-ml b { font-family: var(--fd); font-size: 190px; line-height: 1; color: #68B8FB; text-shadow: 0 0 50px rgba(104, 184, 251, .55); }
.w-ml span { font-family: var(--fd); font-size: 54px; color: #a9d8ff; text-transform: uppercase; }
.w-bar { width: 1100px; height: 28px; margin: 40px 0 28px; border-radius: 999px; background: #08172a; box-shadow: inset 0 0 0 2px rgba(104, 184, 251, .4); overflow: hidden; }
.w-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #0D2B4A, #2E6EB8, #68B8FB); box-shadow: 0 0 30px #68B8FB; }
.w-txt { font-family: var(--fd); font-size: 44px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .86); margin: 0 0 40px; }
/* een tekst tegelijk (N1): eerst is de keuze weg (0,16 s), dan pas komt het tappen op */
.v-water.is-tap .w-pick { opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
.v-water.is-tap .w-tap { opacity: 1; visibility: visible; transition: opacity .3s ease .16s, visibility 0s; }
.v-water.is-tap .ss-bar { display: none; }
.v-water.is-done .sb-red { visibility: hidden; }

/* =====================================================================
   RESPONSIEF
   ===================================================================== */
@media (max-width: 1180px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr) min(58vw, calc(min(76svh, 800px) * .7736)); }
  .demo-side { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 6vh; }
  .demo-copy { grid-column: 1; grid-row: 1; align-self: start; padding-top: 6vh; }
  .demo-stage { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px) {
  .demo { align-items: flex-start; padding-top: calc(var(--nav-h) + 3vh); }
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .demo-copy, .demo-stage, .demo-side { grid-column: 1; grid-row: auto; padding: 0; }
  .demo-copy { text-align: center; }
  .demo-copy .eyebrow { justify-content: center; }
  .demo-copy .h2 { max-width: none; }
  .demo-stage { min-height: 0; }
  .fm { height: auto; width: min(100%, 520px); }
  .demo-side { justify-content: center; min-height: 0; padding-bottom: 4vh; }
  .card-dock { align-items: center; }

  .how { grid-template-columns: minmax(0, 1fr); }
  .how-visual { grid-column: 1; grid-row: 1; top: var(--nav-h); height: 54vh; height: 54svh; align-self: start; }
  .how-list { grid-column: 1; grid-row: 1; }
  .chap { min-height: 100vh; min-height: 100svh; align-items: flex-end; padding: 0 var(--gut) 9vh; }
  .chap-in { max-width: none; width: 100%; padding: 22px 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85) 30%); }
  /* met 3D: geen kader achter de tekst maar een donkere schaduw over de hele breedte onderin (boven de machine,
     onder de tekst), zodat de print op de deur nooit door de regels heen loopt */
  html.has-3d .chap-in { background: none; }
  html.has-3d .chap::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 60svh; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .78) 34%, rgba(0, 0, 0, .94) 62%, #000 100%);
    opacity: 0; transition: opacity .6s var(--ease);
  }
  html.has-3d .chap.is-active::after { opacity: 1; }
  /* met 3D staat de tekst van het actieve hoofdstuk vast onderin beeld (fixed, net als de machine) en wisselt hij
     op zijn plek: hij schuift nooit door het beeld omhoog over de machine. Vorige hoofdstukken zijn echt weg (geen
     schim op 16 %); de nieuwe tekst komt pas op als de oude weg is (nooit twee teksten over elkaar). */
  html.has-3d .chap:is(.is-active, .was-active) .chap-in { position: fixed; left: var(--gut); right: var(--gut); bottom: max(9svh, 28px); width: auto; padding: 0; }
  html.has-3d .chap.was-active:not(.is-active) .chap-in > * { opacity: 0; transform: none; transition: opacity .2s ease; }
  html.has-3d .chap.is-active .chap-in > * { transition-delay: .2s; }
  html.has-3d .chap.is-active .chap-in > :nth-child(2) { transition-delay: .26s; }
  html.has-3d .chap.is-active .chap-in > :nth-child(3) { transition-delay: .32s; }
  html.has-3d .chap.is-active .chap-in > :nth-child(4) { transition-delay: .4s; }
  html.has-3d .chap.is-active .chap-in > :nth-child(5) { transition-delay: .48s; }
  .chap-pass { margin-top: 18px; padding: 12px 16px 12px 12px; gap: 14px; }
  .cp-card { width: 58px; }
  .chap-title { font-size: clamp(32px, 9.4vw, 46px); margin-bottom: 16px; }
  .bx { --bh: min(46svh, 420px); }




}
@media (max-width: 560px) {
  .f-row, .contact .f-row { grid-template-columns: 1fr; gap: 0; }
  .btn-xl { height: 64px; padding: 0 34px; font-size: 15px; }
  .btn-submit { width: 100%; }
  .hero-rails .hr-b { bottom: 12vh; }
}

/* minder beweging */
@media (prefers-reduced-motion: reduce) {
  /* alleen zachte fades, nooit bewegende transforms (ook niet de CSS3D-lagen van de machine) */
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-property: opacity, visibility, color, background-color, border-color, box-shadow !important; scroll-behavior: auto !important; }
  /* door JS per frame gezet (3D-lagen, scherm, gouden pas, woordmerk): direct toepassen */
  #machine-host, #machine-host *, .gc-layer, .gc-layer *, .hw-w, .cup-hint { transition: none !important; }
  .js .hw-l { opacity: 1; transform: none; filter: none; }
  .js .hero-cta { opacity: 1; transform: none; }
  .hw-s, .hw-l::after { display: none; }
  .ld-logo { opacity: 1; animation: none; }
  .ld-logo::after { display: none; }
  .ld-bar { display: none; }
}


/* =====================================================================
   INTEGRATIE MET DE 3D-MACHINE (js/stage.js)
   ===================================================================== */

/* ---------------------------------------------------------- laden (L1): zolang html.m3d nog geen m3d-live heeft
   Zwart met het SCOOPMACHINE-logo (een glans loopt erover) en een dun lijntje eronder, in het midden. Geen scherm of
   kader, nooit de stilstaande renders of de 2D-machine. Bij m3d-live gaat het logo zacht omhoog weg en komen de
   machines uit het donker in beeld: het zwart vervaagt meteen terwijl het canvas eronder opkomt en de camera naar de
   rij glijdt (machine3d.js, ARRIVE). Geen zwart gat tussen logo en machines. */
.m3d-loader {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s cubic-bezier(.3, 0, .3, 1) .1s, visibility 0s linear .9s;
}
html.m3d:not(.m3d-live) .m3d-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
/* zonder 3D bestaat het laadscherm niet; valt 3D terug (m3d-off), dan vervaagt het nog maar lopen de animaties niet meer */
html:not(.m3d):not(.m3d-off) .m3d-loader { display: none; }
/* (bewust geen 'html... *': een universele selector achter een klasse op <html> laat de hele pagina opnieuw stylen) */
html:not(.m3d) .ld-bar i, html:not(.m3d) .ld-logo, html:not(.m3d) .ld-logo::after { animation-play-state: paused; }
.m3d-loader { contain: strict; }
.m3d-loader::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 90vmax; height: 60vmax; margin: -30vmax 0 0 -45vmax;
  background: radial-gradient(closest-side, rgba(215, 184, 101, .08), transparent 70%); pointer-events: none;
}
.m3d-loader.ld-done { display: none; }
/* logo en lijntje als een geheel; bij m3d-live samen zacht omhoog weg, voordat de machines er doorheen komen */
.ld-mark {
  position: relative; width: min(280px, 56vw); aspect-ratio: 220 / 56; translate: 0 -2vh;
  transition: opacity .4s var(--ease), transform .9s var(--ease);
}
html.m3d-live .ld-mark { opacity: 0; transform: translateY(-16px); }
/* de glans is een strook (::after) die met transform over het logo schuift, binnen het masker van het logo:
   loopt op de compositor en blijft dus lopen terwijl de hoofdthread de machine bouwt (background-position zou haperen) */
.ld-logo {
  position: absolute; inset: 0; display: block;
  -webkit-mask: url("../assets/logo/logo-scoopmachine-gradient.svg") center / contain no-repeat;
  mask: url("../assets/logo/logo-scoopmachine-gradient.svg") center / contain no-repeat;
  background: linear-gradient(100deg, #7a5520 0%, #a57b36 22%, #c9a04f 50%, #a57b36 78%, #7a5520 100%);
  overflow: hidden;
  opacity: 0; animation: ldin 1.1s var(--ease) .3s forwards;
}
.ld-logo::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(100deg, rgba(251, 214, 140, 0) 22%, rgba(251, 214, 140, .85) 42%, #fff6dc 50%, rgba(251, 214, 140, .85) 58%, rgba(251, 214, 140, 0) 78%);
  transform: translateX(-100%); animation: ldshine 2.6s var(--ease-io) .9s infinite;
}
@keyframes ldin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ldshine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.ld-bar { position: absolute; left: 50%; top: calc(100% + 28px); width: 40%; height: 1px; margin-left: -20%; overflow: hidden; background: rgba(215, 184, 101, .16); opacity: 0; animation: ldin .8s var(--ease) .8s forwards; }
.ld-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, #FBD68C, transparent); animation: ldbar 1.4s var(--ease-io) infinite; }
@keyframes ldbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html.m3d-live .ld-bar, html.m3d-live .ld-bar i, html.m3d-live .ld-logo, html.m3d-live .ld-logo::after { animation-play-state: paused; }
/* tijdens het laden geen enkele 2D-terugval in beeld (de 3D-machine neemt het over, of html.m3d-off zet ze terug) */
html.m3d:not(.has-3d) .fallback-only { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* de opening (knop, woordmerk) komt pas op als de machines er staan (1,3 s na m3d-live, de camera glijdt dan nog
   uit): eerst de machines, dan de tekst; de knop zweeft nooit op zwart */
.hero-front { transition: opacity 1.2s var(--ease) 1.3s; }
html.m3d:not(.m3d-live) .hero-front { opacity: 0; transition: none; }

/* ---------------------------------------------------------- opening met 3D: hoge sectie, plakkend beeld.
   Bovenaan staat het scherm groot (bedienbaar); scrollen trekt de camera terug tot de hele machine.
   Het woordmerk staat erboven (laag .hero-front) en NAAST de machine: SCOOP links, MACHINE rechts
   (js/site.js zet ze elke frame tegen de randen van machineRect()); op smalle schermen erboven. */
.hero-sticky { width: 100%; }
html.m3d .hero { display: block; min-height: 0; height: 240vh; height: 240svh; overflow: visible; }
html.m3d .hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
html.m3d .hero-rails { display: none; }
/* voorgrond (woordmerk, knop, scroll-hint): een eigen plakkende laag boven de 3D-laag; de rest laat kliks door naar het scherm */
.hero-front { position: absolute; inset: 0; z-index: 2; width: 100%; pointer-events: none; display: grid; place-items: center; }
.hero-front .hero-cta { position: absolute; left: 0; right: 0; bottom: 13vh; display: flex; justify-content: center; pointer-events: auto; }
.hero-front .hero-cta > * { pointer-events: auto; }
html.m3d .hero { place-items: normal; }
html.m3d .hero-front { position: sticky; inset: auto; top: 0; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; display: block; overflow: hidden; contain: layout paint; }
html.m3d .hero-in { position: absolute; inset: 0; padding: 0; display: block; }
html.m3d .hero-word { position: absolute; inset: 0; margin: 0; perspective: none; will-change: auto; font-size: 100px; }
html.m3d .hw-letters { position: absolute; inset: 0; transform: none !important; }
html.m3d .hw-w { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; opacity: 0; perspective: 900px; }
/* eigen laag alleen zolang site.js het woordmerk elke frame verschuift (opening en het begin van de demo) */
html.m3d:is(:not([data-chapter]), [data-chapter="hero"], [data-chapter="demo"]) .hw-w { will-change: transform, opacity; }
/* lettergrootte nooit animeren (ook niet met minder beweging): site.js meet de breedte direct na het zetten */
.hero-word, .hw-letters, .hw-w, .hw-d, .hw-f, .hw-s { transition-property: none !important; }
/* de letters rollen op zodra het woord verschijnt (en opnieuw na terugscrollen) */
.js.m3d.is-loaded .hero-word:not(.hw-on) .hw-l { opacity: 0; transform: translateY(.35em) rotateX(-80deg); filter: blur(6px); transition-duration: .35s; transition-delay: 0s; }
.js.m3d.is-loaded .hero-word.hw-on .hw-l { transition-delay: calc(var(--i) * .045s); }
html.m3d .hero-front .hero-cta { bottom: max(3.4vh, 22px); }
/* een zachte donkere vlek achter de knop: de NFC-lezer onder het scherm steekt niet half onder de knop uit
   (vervaagt mee met de knop als de camera terugtrekt) */
html.m3d .hero-front .hero-cta::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
  width: min(720px, 130vw); height: 230px; transform: translate(-50%, -44%);
  background: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, .86) 58%, rgba(0, 0, 0, 0));
}
/* met 3D is de knop zelf de aanwijzing: geen scroll-streepje dat onder de knop en de NFC-lezer uitsteekt */
html.m3d .scroll-cue { display: none; }
/* het gouden licht op de vloer onder de machine staat vast in beeld, net als de machine (fixed: niet afgesneden
   door de rand van .hero-sticky en schuift niet weg als die loslaat); weg zodra de demo begint */
/* --hgate (0..1) vervaagt het licht bij het wisselen van hoofdstuk; --hg (site.js, elke scrollframe) zelf heeft
   geen transitie, anders loopt er bij elke scrollframe een nieuwe opacity-transitie */
@property --hgate { syntax: "<number>"; inherits: false; initial-value: 1; }
html.m3d .hero-glow {
  position: fixed; left: 50%; top: 56%; width: 120vw; height: 70vh; margin-left: -60vw; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(215, 184, 101, .14), transparent 70%);
  --hgate: 1; opacity: calc(var(--hg, 0) * var(--hgate));
  transition: --hgate .45s var(--ease), visibility 0s;
}
html.m3d[data-chapter]:not([data-chapter="hero"]) .hero-glow { --hgate: 0; visibility: hidden; transition: --hgate .5s var(--ease), visibility 0s linear .5s; }
/* vangnet voor vaste (fixed) lagen in een sectie: js/site.js pauzeert de lopende animaties en overgangen van een
   sectie die uit beeld gaat. Een gepauzeerde uitfade zou zo'n vaste laag half zichtbaar over de rest van de pagina
   laten staan. Zonder .is-vis dus geen overgang: de laag staat direct in zijn eindstand (onzichtbaar). */
.hero:not(.is-vis) .hero-glow,
.demo:not(.is-vis) .demo-copy, .demo:not(.is-vis) .demo-copy::before, .demo:not(.is-vis) .demo-copy *,
.how:not(.is-vis) .chap-in > *, .how:not(.is-vis) .chap::after { transition: none !important; }
/* tijdens het laden van 3D: geen 2D-video op de achtergrond */
html.m3d:not(.has-3d):not(.m3d-off) .hero-media { opacity: 0; }

/* ---------------------------------------------------------- probeer hem met 3D: scherm groot in het midden */
html.has-3d .demo { min-height: 100vh; min-height: 100svh; }
html.has-3d .demo-copy { align-self: start; padding-top: 4vh; }
html.has-3d .demo-side { align-self: end; padding-bottom: 8vh; }
/* zodra de camera werkt (betalen, maken, pakken, water) gaat de kop opzij: nooit tekst over de machine.
   Alleen 'Opnieuw' blijft, als klein pilletje. */
html.has-3d .demo-copy .eyebrow, html.has-3d .demo-copy .h2 { transition: opacity .45s var(--ease), transform .7s var(--ease); }
html.has-3d[data-demo]:not([data-demo="idle"]):not([data-demo="koop"]) .demo-copy .eyebrow,
html.has-3d[data-demo]:not([data-demo="idle"]):not([data-demo="koop"]) .demo-copy .h2 { opacity: 0; transform: translateX(-24px); pointer-events: none; }
@media (min-width: 901px) {
  html.has-3d.demo-tight .demo-copy .eyebrow, html.has-3d.demo-tight .demo-copy .h2 { opacity: 0; pointer-events: none; }
}

/* ---------------------------------------------------------- Zo werkt het met 3D: zachte schaduw achter de tekst links */
.story-shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .58) 30%, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, 0) 60%); }
@media (min-width: 901px) { html.has-3d[data-chapter^="stap-"] .story-shade { opacity: 1; } }

/* ---------------------------------------------------------- formulier: verstuurd */
.btn-submit .bs-arrow { width: 20px; height: 20px; }
.form.is-sending .bs-arrow { display: none; }
.form-done { padding: clamp(30px, 6vh, 70px) 10px; }
.form-done .h3 { font-size: clamp(28px, 3vw, 44px); }
.fd-line { color: var(--t2); font-size: 17px; margin: 0 0 22px; }
.fd-again { margin-top: 6px; }
.form-done .fd-mark, .form-done .h3, .form-done .fd-line, .form-done .fd-again { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.form-done.is-on .fd-mark { opacity: 1; transform: none; }
.form-done.is-on .h3 { opacity: 1; transform: none; transition-delay: .35s; }
.form-done.is-on .fd-line { opacity: 1; transform: none; transition-delay: .5s; }
.form-done.is-on .fd-again { opacity: 1; transform: none; transition-delay: .7s; }
/* verstuurd: js/site.js houdt de hoogte van de kaart vast (min-height), het bedankje staat in het midden */
.form-card.is-done { display: flex; flex-direction: column; justify-content: center; }
.form-card.is-done { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 1), 0 0 160px -30px rgba(251, 214, 140, .45), inset 0 1px 0 rgba(255, 236, 190, .1); transition: box-shadow 1.2s var(--ease); }

/* ---------------------------------------------------------- contact met 3D: de machine links is echt */
html.has-3d .contact-machine { min-height: 66svh; }
html.has-3d .contact-main { pointer-events: auto; }
html.has-3d .cb-glow { left: -6vw; }

/* contact: formulier compact genoeg om met kop en mailadres in een scherm te passen */
.contact .form-card { padding: clamp(22px, 2.6vw, 40px); }
.contact .field textarea { min-height: 112px; }
.contact .field { margin-bottom: 14px; }
.contact .f-row { gap: 14px; }

/* ---------------------------------------------------------- CSS-3D-terugval: de terminal hangt voor op de machine (rechts, lichtlijn) */
.bx-front .bx-sigma { left: 80.5%; top: 30.6%; width: 12.5%; height: 8.4%; transform: translateZ(12px) rotateY(-12deg); transform-origin: 0 50%; }

/* ---------------------------------------------------------- responsief */
@media (max-width: 1100px) {
  .dr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-hero { width: min(100%, 22svh, 220px); }
}
@media (max-width: 900px) {
  html.m3d .hero { height: 200vh; height: 200svh; }
  .dr-in { padding: calc(var(--nav-h) + 3vh) var(--gut) 5vh; }
  .dr-head { margin-bottom: 14px; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; }
  .dr-logo { width: 84px; }
  .dr-head .h2 { font-size: clamp(24px, 7vw, 32px); }
  .dr-line { font-size: 14px; margin-top: 6px; }
  .dr-shop { grid-column: 1 / -1; justify-self: stretch; justify-content: center; height: 48px; padding: 0 16px; font-size: 13px; letter-spacing: .12em; }
  .dr-grid { gap: 10px; }
  .dr-panel { padding: 12px 12px 14px; border-radius: 18px; }
  .dr-hero { width: min(100%, 15svh, 130px); margin-bottom: 8px; }
  .dr-kind { font-size: 9.5px; letter-spacing: .22em; margin-bottom: 5px; }
  .dr-title { font-size: clamp(13px, 3.9vw, 18px); margin-bottom: 10px; }
  .dr-chips { gap: 5px; }
  .chip { height: 28px; padding: 0 9px 0 8px; gap: 6px; font-size: 11px; }
  .chip i { width: 7px; height: 7px; }
  .dr-panel .dr-buy { padding-top: 10px; font-size: 10px; letter-spacing: .14em; gap: 5px; }
  .dr-foot { margin-top: 14px; }

  .contact { padding: calc(var(--nav-h) + 3vh) 0 8vh; }
  .contact-in { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .contact-machine { min-height: 0; order: 0; }
  html.has-3d .contact-machine { min-height: 64svh; }
  .contact-still { height: 46svh; margin: 0 auto 4px; }
  .contact-copy { text-align: center; }
  .contact-copy .eyebrow { justify-content: center; }
  .contact-h { font-size: clamp(17px, 5.9vw, 36px); }
  .contact-direct { justify-content: center; }

  /* probeer hem met 3D op een telefoon: het scherm boven, de tekst en de pas onderaan.
     De tekst staat vast onderin beeld (fixed, net als de machine) en is er alleen in het hoofdstuk demo: hij schuift
     nooit mee omhoog over de machine, maar vervaagt op zijn plek als 'Zo werkt het' begint. */
  html.has-3d .demo { display: block; padding: 0; height: 100vh; height: 100svh; min-height: 0; }
  html.has-3d .demo-grid { position: absolute; inset: 0; display: block; z-index: 2; }
  html.has-3d .demo-stage { display: none; }
  html.has-3d .demo-copy, html.has-3d .demo-copy[data-reveal] {
    position: fixed; left: var(--gut); right: var(--gut); bottom: max(3svh, 18px); z-index: 3; padding: 0; text-align: center;
    opacity: 0; visibility: hidden; transform: none; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  html.has-3d[data-chapter="demo"] .demo-copy[data-reveal] { opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .1s, visibility 0s; }
  html.has-3d[data-chapter="demo"]:is([data-demo="pay"], [data-demo="paid"]) .demo-copy[data-reveal] { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
  html.has-3d .demo-copy .eyebrow { justify-content: center; margin-bottom: 8px; font-size: 11px; }
  html.has-3d .demo-copy .h2 { font-size: clamp(24px, 7vw, 34px); margin: 0; max-width: none; }
  /* tijdens het maken en water tappen: onderin een donkere strook (de kop staat daar, nooit midden op de print) */
  html.has-3d .demo-copy::before {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 18svh; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9) 40%, #000 72%);
    opacity: 0; transition: opacity .4s ease;
  }
  html.has-3d:is([data-demo="make"], [data-demo="opening"], [data-demo="water"], [data-demo="water-tap"]) .demo-copy::before { opacity: 1; }

  html.has-3d .demo-side { position: absolute; left: 0; right: 0; bottom: max(4.5vh, 26px); padding: 0; justify-content: center; min-height: 0; }
  html.has-3d .card-dock { gap: 12px; }
  html.has-3d .goldcard { width: min(52vw, 220px); }
}
/* telefoon staand, contact met 3D: kop, formulier en mailadres liggen op een dicht zwart vlak (over de hele breedte,
   zachte bovenrand). De machine staat vast in beeld en zakt er tijdens het scrollen achter weg: nooit tekst over de
   machine en geen tweede SCOOPMACHINE (de print op de deur) achter de kop of in de bedankkaart.
   Alleen staand: liggend staat de machine links naast het formulier (blok TELEFOON LIGGEND). */
@media (max-width: 900px) and (orientation: portrait) {
  html.has-3d .contact-main { position: relative; z-index: 1; }
  html.has-3d .contact-main::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -190px; bottom: -10vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .86) 70px, rgba(0, 0, 0, .97) 120px, #000 190px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dr-img { transform: none !important; }
  .cb-rail { transform: none; }
}

/* =====================================================================
   LICHT: telefoons, tablets en zwakke apparaten (Q1-Q3)
   Zelfde beeld, minder werk voor de browser: geen backdrop-filter (vervaagt elke frame wat erachter beweegt),
   geen grote blur- of schaduwfilters (worden bij elke verandering opnieuw geschilderd, ook binnen het
   1920 x 1080 scherm op de machine), geen korrellaag over het hele scherm en geen mengmodi.
   Geldt op smalle schermen en touch; op een zwakke computer via html[data-tier] (zie onder).
   ===================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  .grain { display: none; }
  /* dicht zwart: zonder vervaging zou het scherm van de machine (tegels, WATER) door de balk achter logo en menu schemeren */
  .nav.is-solid { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fm::before, .fx-clean i, .cf-glow { filter: none; }
  /* woordmerk: opkomen zonder blur, diepte zonder de grote zachte schaduwen */
  .js .hw-l, .js.is-loaded .hw-l, .js.m3d.is-loaded .hero-word:not(.hw-on) .hw-l { filter: none; }
  .hw-d, .hw-l::before { text-shadow: 0 1px 0 #6b4c1c, 0 2px 0 #5a3f16, 0 3px 0 #4c3512, 0 4px 0 #402c0f, 0 5px 0 #35250c, 0 6px 0 #2b1e0a, 0 7px 0 #221808, 0 11px 12px rgba(0, 0, 0, .8); }
  /* drankjes: de schaduw onder de pot doet .dr-floor */
  .dr-img { filter: none; }
  /* het scherm op de machine */
  .ss-card-glow, .k-glow { filter: none; }
  .ss-card-img img, .k-photo img, .b-img img, .pr-title, .b-waves svg, .b-arrow svg { filter: none; }
  .ss-run { mix-blend-mode: normal; opacity: .8; }
  .v-maken.is-ready .m-ring svg { animation-name: ringpop-lite; }
  /* contact: de rand staat stil in een mooie stand (geen eigen draaiende laag van ~1,5 x de kaart op een telefoon) */
  .fc-border::before { animation: none; }
}
@keyframes ringpop-lite { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } }
/* het scherm op de machine (CSS3D) op telefoons en zwakke apparaten (.is-lite: js/screen.js, tier mid/low):
   geen tijdelijke laag per tegel of per foto. Elke animatie binnen het 3D-getransformeerde scherm wordt een eigen
   compositorlaag en iOS bewaart die op lay-outmaat x schermdichtheid. Een scherm komt als geheel op (alleen
   opacity, geen zoom), de tegels samen met hun scherm, de foto op het koopscherm staat stil. */
.scoop-screen.is-lite .ss-view, .scoop-screen.is-lite .ss-view.is-on { transform: none; }
.scoop-screen.is-lite .v-grid.is-on .ss-card { animation: none; }
.scoop-screen.is-lite .k-photo img { animation: none; }
@media (max-width: 900px) { .story-shade { display: none; } }
/* zwakkere computers (data-tier uit het kop-script). mid: alleen geen backdrop-filter (vervaagt elke frame het
   bewegende 3D-beeld erachter); de rest van het beeld blijft. low: alles uit het blok hierboven. */
html:is([data-tier="low"], [data-tier="mid"]) .nav.is-solid { background: rgba(0, 0, 0, .95); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* de korrellaag is een vaste laag over het hele scherm die elke frame mee wordt samengesteld: alleen op het hoogste niveau */
html:is([data-tier="low"], [data-tier="mid"]) .grain { display: none; }
html[data-tier="low"] :is(.ss-card-glow, .k-glow, .ss-card-img img, .k-photo img, .b-img img, .pr-title, .b-waves svg, .b-arrow svg, .dr-img, .fx-clean i, .cf-glow) { filter: none; }
html[data-tier="low"] .fm::before { filter: none; }
html[data-tier="low"] .ss-run { mix-blend-mode: normal; }
html[data-tier="low"] .fc-border::before { animation: none; }
html[data-tier="low"].js .hw-l, html[data-tier="low"].js.m3d.is-loaded .hero-word:not(.hw-on) .hw-l { filter: none; }
/* telefoons en touch: de vaste balk is dicht zwart (ook met data-tier, dat hierboven .95 zet) */
@media (max-width: 900px), (pointer: coarse) { html[data-tier] .nav.is-solid, html .nav.is-solid { background: #000; } }

/* =====================================================================
   TELEFOON LIGGEND: korte, brede schermen (844 x 390, 915 x 412, ...)
   ===================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --nav-h: 56px; }
  .nav-in { gap: 16px; }
  .nav-logo img { height: 30px; }
  .nav-logo .nl-cn { height: 23px; }
  .nav.is-solid .nav-logo { transform: scale(.92); }
  .nav-toggle { width: 44px; height: 44px; }
  /* Contact staat in het menu: geen gouden knop in de balk die over de band of het scherm zweeft */
  .nav-end .btn { display: none; }
  /* opening: de knop kleiner en lager, zodat hij de onderrand van het scherm (WATER) niet afdekt */
  html.m3d .hero-front .hero-cta { bottom: 10px; }
  .hero-cta .btn-xl { height: 48px; padding: 0 28px; font-size: 13px; letter-spacing: .14em; gap: 10px; }
  .hero-cta .btn-xl svg { width: 16px; height: 16px; }
  html.m3d .hero-front .hero-cta::before { height: 120px; }
  /* demo: geen kop (er is geen plek naast of onder het scherm zonder over de machine te lopen); 'Opnieuw' linksboven */
  html.has-3d .demo-copy .eyebrow, html.has-3d .demo-copy .h2 { display: none; }
  html.has-3d .demo-copy, html.has-3d .demo-copy[data-reveal] { position: fixed; left: var(--gut); right: auto; top: calc(var(--nav-h) + 8px); bottom: auto; z-index: 3; padding: 0; text-align: left; }
  html.has-3d .demo-copy::before { display: none; }
  /* Zo werkt het: compacter en links, naast de machine */
  .chap-title { font-size: clamp(26px, 6.4vh, 40px); }
  /* kop en regel blijven in de vrije strook links van de kast: bij water, vers gemaakt en reinigen staat de camera
     zo dichtbij dat de kast al op ongeveer een derde van de breedte begint ('GRATIS GEKOELD' liep er op 844 en 915
     px 40 tot 45 px overheen). Een lange kop breekt dan over twee of drie regels; het Scoop-pas-kader houdt zijn breedte. */
  html.has-3d .chap-title, html.has-3d .chap-line { max-width: 25vw; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  html.has-3d .chap:is(.is-active, .was-active) .chap-in { right: auto; max-width: min(46vw, 440px); bottom: max(6svh, 16px); }
}
/* smal en liggend (telefoon dwars, smal venster): contact in twee kolommen zoals op desktop. De 3D-machine staat in
   dit hoofdstuk links (machine3d.js 'contact', niet-smalle stand), kop en formulier rechts ernaast: de machine blijft
   zichtbaar naast het formulier (K4) en er loopt geen tekst over. Zonder 3D staat de foto links. */
@media (max-width: 900px) and (orientation: landscape) {
  .contact-in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 40px); align-items: center; min-height: calc(100svh - var(--nav-h) - 11vh); }
  .contact-machine, html.has-3d .contact-machine { min-height: 0; align-self: stretch; justify-content: center; }
  .contact-still { height: min(72svh, 520px); margin: auto; }
  .contact-copy { text-align: left; }
  .contact-copy .eyebrow { justify-content: flex-start; }
  .contact-h { font-size: clamp(20px, min(3.2vw, 7vh), 36px); }
  .contact-direct { justify-content: flex-start; }
}
/* liggend op touch (menuknop, geen links in de balk): geen dichte balk over het scherm van de machine. Logo en
   menuknop staan op een zachte donkere hoek, het midden laat het scherm (en tikken erop) gewoon door. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  .nav, .nav.is-solid, html[data-tier] .nav.is-solid { background: transparent; pointer-events: none; }
  .nav-logo, .nav-end, .nav-links { pointer-events: auto; }
  .nav::before, .nav.is-solid::before {
    opacity: 1; inset: 0 0 -28px;
    background: radial-gradient(300px 100% at 0 0, rgba(0, 0, 0, .92), rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, 0)), radial-gradient(150px 100% at 100% 0, rgba(0, 0, 0, .92), rgba(0, 0, 0, .7) 45%, rgba(0, 0, 0, 0));
  }
  .nav::after { display: none; }
}

/* knop in de opening op een telefoon: compact, niet schermbreed (22-10) */
@media (max-width: 600px) {
  .hero-cta .btn-xl { height: 50px; padding: 0 26px; font-size: 12.5px; letter-spacing: .16em; gap: 10px; }
  .hero-cta .btn-xl svg { width: 16px; height: 16px; }
}