/* ===========================================================================
   Offly — huisstijl van de website.

   Alle kleuren, radii en schaduwen komen 1-op-1 uit de app:
   Offly/src/theme/index.ts. Verander je daar iets, verander het hier ook,
   anders gaan app en site uit elkaar lopen.

   Opbouw van dit bestand:
     1. Lettertype
     2. Tokens (kleuren, ruimte, radius, schaduw)
     3. Basis (reset, typografie, links)
     4. Layout (container, secties)
     5. Onderdelen (knop, pil, kaart, badge, accordeon, formulier)
     6. Blokken (kopbalk, hero, behoeftes, stappen, pakketten, footer)
     7. Grotere schermen (de site is mobiel-first: alles hieronder is opmaak
        die er pas bíj komt vanaf 720 px / 1000 px)
   =========================================================================== */

/* --- 1. Lettertype -------------------------------------------------------- */
/* Plus Jakarta Sans, zelf gehost in assets/fonts/. Bewust NIET via de Google-
   CDN: dan zou de browser van elke bezoeker een verzoek naar Google doen, en
   dat is precies het soort gegevensdeling waar de privacyverklaring nee tegen
   zegt. `font-display: swap` zorgt dat tekst meteen leesbaar is. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ------------------------------------------------------------ */
:root {
  /* Merk (uit theme/index.ts → `brand`) */
  --cream: #f6efe4;
  --purple: #7e60ad;
  --purple-deep: #5a3e8c;
  --purple-light: #a98fd2;
  --purple-mist: #ece4f7;
  --indigo: #281a45;
  --indigo-soft: #3b2a5e;
  --orange: #f2a45c;
  --orange-deep: #e78a39;

  /* Vlakken */
  --bg: var(--cream);
  --surface: #ffffff;
  --surface-alt: #f1e9db;
  --surface-sunken: #ebe2d2;

  /* Tekst */
  --text: var(--indigo);
  --text-muted: #5e5573;
  --text-faint: #7e7592;
  --on-dark: #f4effa;
  --on-dark-muted: rgba(244, 239, 250, 0.82);

  /* Lijnen */
  --border: #ebe3d5;
  --border-strong: #dcd0bd;
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Status */
  --success: #2e9e6b;
  --danger: #d14343;

  /* Verlopen. --grad-brand en --grad-brand-strong komen uit de app; daar staan
     ze op een klein vlak of onder grote cijfers. Op de website zetten we er
     lopende tekst en knoplabels op, en dan zijn ze te licht: wit haalt op de
     bovenhoek van --grad-brand maar 2,6:1. Overal waar witte tekst OP paars
     staat gebruiken we daarom --grad-brand-legible (lichtste punt #7E60AD, de
     `primary` uit het thema) — dat is 5,0:1 en dus WCAG AA. */
  --grad-brand: linear-gradient(160deg, #a98fd2, #6b4c9e);
  --grad-brand-strong: linear-gradient(160deg, #8e6fbe, #4e3382);
  --grad-brand-legible: linear-gradient(160deg, #7e60ad, #4e3382);
  --grad-ink: linear-gradient(170deg, #3b2a5e, #1f1338);

  /* Radius (theme/index.ts → `radius`) */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-xxl: 36px;
  --r-pill: 999px;

  /* Schaduw (theme/index.ts → `shadow`) */
  --sh-card: 0 10px 18px rgba(42, 27, 71, 0.1);
  --sh-soft: 0 4px 10px rgba(42, 27, 71, 0.07);
  --sh-glow: 0 10px 20px rgba(126, 96, 173, 0.4);

  /* Ruimte */
  --gap: 16px;
  --pad-x: 20px;
  --section-y: 64px;
}

/* --- 3. Basis ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* De kopbalk plakt bovenaan; zonder deze marge verdwijnt een aangeklikte
     sectiekop eronder. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Voorkomt dat één te breed element de hele pagina zijwaarts laat scrollen. */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.4em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 8vw, 3.4rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--purple-deep);
  text-decoration-color: rgba(126, 96, 173, 0.35);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

strong,
b {
  font-weight: 800;
}

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

/* Houdt een korte tekst op één regel, voor het geval een link of term niet
   halverwege mag afbreken. */
.nowrap {
  white-space: nowrap;
}

/* Alleen zichtbaar voor schermlezers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Springt met Tab meteen naar de inhoud — zichtbaar zodra hij focus krijgt. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  font-weight: 700;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 12px;
}

/* --- 4. Layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: 40px;
}
.section--alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 12%, rgba(255, 255, 255, 0.6) 88%, rgba(255, 255, 255, 0) 100%);
}

.section__head {
  max-width: 620px;
  margin-bottom: 32px;
}
.section__head p {
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-deep);
}
.eyebrow--on-dark {
  color: var(--orange);
}

.grid {
  display: grid;
  gap: var(--gap);
}

/* --- 5. Onderdelen -------------------------------------------------------- */

/* Merkteken: de power-O met de vonk. Zie site/assets/js/site.js voor de SVG. */
.mark {
  flex: none;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.045em;
  color: var(--text);
  text-decoration: none;
}
.wordmark--on-dark {
  color: #fff;
}

/* Knoppen */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:active {
  transform: scale(0.985);
}
.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--grad-brand-legible);
  color: #fff;
  box-shadow: var(--sh-glow);
}
.btn--primary:hover {
  box-shadow: 0 12px 26px rgba(126, 96, 173, 0.48);
}

.btn--light {
  background: #fff;
  color: var(--indigo);
  box-shadow: var(--sh-card);
}

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--outline:hover {
  background: var(--surface-alt);
}

.btn--ghost-dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-on-dark);
  color: #fff;
}
.btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  /* Niet --text-faint: zolang de TestFlight-link en de betalingen nog niet
     ingevuld zijn, staan deze knoppen op "Binnenkort" en leest half de site ze.
     Met --text-muted is dat 5,4:1 in plaats van 3,4:1. */
  color: var(--text-muted);
  box-shadow: none;
}
.btn[disabled]:active,
.btn[aria-disabled='true']:active {
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Pillen / labels */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 700;
}
.pill--on-dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-on-dark);
  color: var(--on-dark);
}
.pill__dot {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(242, 164, 92, 0.18);
  font-size: 0.8rem;
}

/* Kaarten */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-soft);
}

.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--purple-mist);
  color: var(--text-muted);
  font-size: 0.94rem;
}
.note--warm {
  background: #fbe6ce;
}
.note__icon {
  flex: none;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Accordeon (FAQ) */
.faq {
  display: grid;
  gap: 10px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq details[open] {
  border-color: var(--border-strong);
  box-shadow: var(--sh-soft);
}
.faq summary {
  padding: 18px 52px 18px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--purple);
  border-bottom: 2.5px solid var(--purple);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.faq__body {
  padding: 0 20px 20px;
  color: var(--text-muted);
}

/* --- 6. Blokken ----------------------------------------------------------- */

/* Kopbalk */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 239, 228, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.site-nav {
  display: none;
  gap: 22px;
}
.site-nav a {
  color: var(--text-muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--text);
}
.site-header .btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 0.9rem;
  border-radius: var(--r-md);
}
/* Op smalle schermen zou "Test de app (TestFlight)" de kopbalk laten breken. */
.site-header__cta-long {
  display: none;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-ink);
  color: #fff;
  padding-block: 56px 64px;
  text-align: center;
}
.hero__blob {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
.hero__blob--purple {
  background: var(--purple);
  opacity: 0.3;
  top: -110px;
  right: -90px;
}
.hero__blob--orange {
  background: var(--orange);
  opacity: 0.22;
  bottom: -60px;
  left: -110px;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__mark {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: var(--r-xxl);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-on-dark);
  box-shadow: var(--sh-glow);
  margin-bottom: 26px;
}
/* De vaste slogan, als eerste regel boven de kop — dit is waar Offly over gaat,
   dus dit moet je gelezen hebben voor je verder scrollt. */
.hero__kicker {
  margin-bottom: 18px;
  padding: 9px 18px;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
  font-size: 0.95rem;
  font-weight: 700;
  text-wrap: balance;
}
.hero__kicker b {
  color: var(--orange);
  font-weight: 800;
}

.hero h1 {
  margin-bottom: 18px;
  color: #fff;
}
.hero__sub {
  max-width: 34ch;
  color: var(--on-dark-muted);
  font-size: 1.06rem;
}
.hero .btn-row {
  justify-content: center;
  margin-top: 28px;
  width: 100%;
}
.hero .btn-row .btn {
  flex: 1 1 240px;
}
.hero__beta {
  margin-top: 16px;
  color: var(--on-dark-muted);
  font-size: 0.85rem;
}
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.hero__slogan {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-dark);
  width: 100%;
  max-width: 420px;
  color: var(--on-dark-muted);
  font-size: 0.95rem;
}
.hero__slogan b {
  color: var(--orange);
}

/* Behoeftekaarten — elke kaart zet zelf --need en --need-soft.
   Flexbox in plaats van een grid: met vijf kaarten in drie kolommen blijft de
   laatste rij half leeg, en dat leest als "er mist er een". Met flex + center
   staan die laatste twee netjes in het midden. */
.needs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.needs > * {
  flex: 1 1 260px;
  max-width: 340px;
}
.need {
  border-left: 4px solid var(--need, var(--purple));
}
.need__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--need-soft, var(--purple-mist));
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.need h3 {
  margin-bottom: 2px;
}
.need__tag {
  display: block;
  margin-bottom: 10px;
  color: var(--need, var(--purple));
  font-size: 0.88rem;
  font-weight: 800;
}
.need p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Amsterdam-blok. Eigen sectie met een echte "kaart"-uitstraling, zodat het
   niet wegvalt als voetnoot onder de tegels. */
.spotlight {
  display: grid;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.spotlight__badge {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 150px;
  border-radius: var(--r-lg);
  background: var(--grad-brand-legible);
  color: #fff;
  text-align: center;
}
.spotlight__pin {
  font-size: 2.4rem;
  line-height: 1;
}
.spotlight__city {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.spotlight__body p {
  color: var(--text-muted);
}
.spotlight__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

/* Stappen */
.steps {
  counter-reset: step;
  grid-template-columns: 1fr;
}
.step {
  position: relative;
  padding-left: 62px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-brand-legible);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--sh-soft);
}
.step h3 {
  margin-bottom: 4px;
  padding-top: 8px;
}
.step p {
  color: var(--text-muted);
  font-size: 0.97rem;
}

/* "Waarom Offly" — om dezelfde reden als de behoeftekaarten gecentreerd:
   drie sterke redenen naast elkaar, netjes in het midden. */
.why {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.why > * {
  flex: 1 1 250px;
  max-width: 330px;
}
.why__item h3 {
  margin-bottom: 4px;
}
.why__item p {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.why__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--purple-mist);
  font-size: 1.25rem;
  margin-bottom: 12px;
}

/* Band voor aanbieders */
.band {
  background: var(--indigo);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 28px;
}
.band h2 {
  color: #fff;
  font-size: 1.4rem;
}
.band p {
  color: var(--on-dark-muted);
  font-size: 0.98rem;
}

/* Losse tekstpagina's (privacy, 404) */
.prose h2 {
  margin-top: 40px;
  font-size: 1.35rem;
}
.prose h2:first-of-type {
  margin-top: 24px;
}
.prose ul {
  padding-left: 22px;
  color: var(--text-muted);
}
.prose li {
  margin-bottom: 6px;
}
.prose p {
  color: var(--text-muted);
}
.prose__meta {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Footer */
.site-footer {
  background: var(--indigo);
  color: var(--on-dark);
  padding-block: 48px 36px;
  margin-top: 24px;
}
.site-footer__grid {
  display: grid;
  gap: 30px;
}
.site-footer h4 {
  margin-bottom: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.site-footer p,
.site-footer li {
  color: var(--on-dark-muted);
  font-size: 0.94rem;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.site-footer a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.site-footer__bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  color: var(--on-dark-muted);
  font-size: 0.85rem;
}
.site-footer__slogan b {
  color: var(--orange);
}

/* --- 7. Grotere schermen -------------------------------------------------- */
@media (min-width: 640px) {
  :root {
    --pad-x: 28px;
  }
}

@media (min-width: 860px) {
  :root {
    --section-y: 88px;
    --gap: 20px;
  }
  .site-nav {
    display: flex;
  }
  .site-header__cta-long {
    display: inline;
  }
  .site-header__cta-short {
    display: none;
  }
  .hero {
    padding-block: 84px 92px;
  }
  .hero .btn-row .btn {
    flex: 0 1 auto;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .spotlight {
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: center;
    padding: 36px;
  }
  .band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 32px 40px;
  }
  .band .btn {
    flex: none;
  }
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
  }
}