/* Maven Pro variable font, self-hosted (latin + latin-ext for pl). */
@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/maven-pro-latin-983bb0feb829de031ab574857c119dc2.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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/maven-pro-latin-ext-c396d37c5319d4ed6fad0473f52d611b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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;
}

/* ---------- design tokens (landing-page-plan §5.1, light-first) ---------- */
:root {
  --paper: #ffffff;
  --mint: #e7f0ef;
  --mint-2: #f4f9f8;
  --ink: #04121a;
  --teal: #00c3a5;
  --teal-deep: #007d6a;
  --glow: rgba(0, 195, 165, 0.18);
  --gold: #b88c28;
  --gold-text: #4a3200;
  --gold-bg: rgba(212, 174, 53, 0.08);
  --gold-border: rgba(212, 174, 53, 0.19);
  --muted: #52706b;
  --border: rgba(6, 60, 54, 0.12);
  --shadow: 0 8px 30px rgba(4, 18, 26, 0.08);
  --radius: 20px;
  /* layout: sticky nav height (mirrored by scroll-margin-top on anchor targets)
     and the page gutter used by .wrap, the hero and the carousel */
  --nav-h: 64px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  /* legacy aliases (contact / delete-account / qr pages) */
  --primary: #00c3a5;
  --secondary: #007d6a;
  --black: #000000;
  --white: #ffffff;
  --background-tertiary: #e7f0ef;
  --background-quaternary: #e0e0e0;
}

@media (max-width: 560px) {
  :root {
    --nav-h: 56px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Maven Pro", "Segoe UI", system-ui, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.65;
  min-height: 100vh;
  min-height: 100dvh; /* mobile browser chrome; falls back to the line above */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word; /* safety net: a long Polish word never widens the page */
}

h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

/* ---------- shared utilities ---------- */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: 800px;
}

.center {
  text-align: center;
}

.center .lede {
  margin-left: auto;
  margin-right: auto;
}

section.block {
  padding: clamp(4rem, 9vw, 7rem) 0;
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.eyebrow-gold {
  color: var(--gold);
}

.lede {
  color: var(--muted);
  max-width: 680px;
}

.micro {
  font-size: 0.84rem;
  color: var(--muted);
}

.micro.center {
  margin: 0.5rem auto 0;
  max-width: 640px;
}

/* wordmark: DIAG teal / ME ink (no wordmark asset exists — live type) */
.wordmark {
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.wordmark-d {
  color: var(--teal-deep);
}

.wordmark-m {
  color: var(--ink);
}

.wordmark-hero {
  font-size: clamp(2rem, 1rem + 4vw, 3.6rem);
}

/* assistant chip — the product voice, quoted (light glass + teal dot) */
.assist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: 4px 14px 14px 14px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow);
}

.assist-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* soft-masked photo card */
.photo-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  line-height: 0;
}

/* screenshot card: the store art already includes its own phone mockup,
   so it gets a plain rounded card, not a second CSS phone frame */
.shot-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  line-height: 0;
  box-shadow: var(--shadow);
}

/* store badges (official art) */
.store-row,
.store-col {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.store-col {
  flex-direction: column;
}

.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-badge img {
  height: 52px;
  width: auto;
}

/* hover variants live in the (hover: hover) block near the end of the file */
.store-badge:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px var(--glow);
}

/* aurora wash (P1 + P8) */
.aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(52px);
  overflow: hidden;
}

/* discs scale with the viewport (fixed 440px circles flattened a phone into one tint
   and left the middle of a 2560px screen bare); offsets are section-relative */
.aurora span {
  position: absolute;
  border-radius: 50%;
  width: clamp(280px, 34vw, 640px);
  aspect-ratio: 1;
}

.aurora .a1 {
  left: -12%;
  top: -30%;
  background: radial-gradient(circle, rgba(0, 195, 165, 0.26), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}

.aurora .a2 {
  right: -12%;
  top: -10%;
  background: radial-gradient(circle, rgba(0, 125, 106, 0.18), transparent 65%);
  animation: drift2 31s ease-in-out infinite alternate;
}

.aurora .a3 {
  left: 30%;
  bottom: -35%;
  background: radial-gradient(circle, rgba(0, 195, 165, 0.14), transparent 65%);
  animation: drift1 34s ease-in-out infinite alternate-reverse;
}

@keyframes drift1 {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(60px, 36px) scale(1.1);
  }
}

@keyframes drift2 {
  from {
    transform: translate(0, 0) scale(1.05);
  }

  to {
    transform: translate(-50px, 44px) scale(0.95);
  }
}

/* ---------- P0: sticky light-glass nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* notched phones in landscape: never behind the safe area */
  padding-left: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 195, 165, 0.25);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* both nav links are 44px-tall tap targets; the pill never wraps its label */
.nav-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
}

.nav-lang:focus-visible {
  color: var(--teal-deep);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  background: var(--ink);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 0 1.2rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:focus-visible {
  background: var(--teal-deep);
  transform: translateY(-1px);
}

/* ---------- P1: hero banner — the couple from the store art left, copy centred in the right column ---------- */
.hero {
  --hero-pad-b: clamp(2.5rem, 6vw, 4rem);
  --hero-gap: clamp(1rem, 2.5vw, 2rem); /* figure column edge → glass panel */
  /* how far the figure box reaches past its column into the panel's column; the phone's
     bezel is ~4% of the box short of its right edge (shadow room), so roughly
     reach − gap − 24px of the phone lands on the glass */
  --phone-reach: clamp(4.5rem, 9vw, 8rem);
  position: relative;
  overflow: hidden;
  display: flex; /* .hero-inner takes the remaining height; .aurora is absolute */
  flex-direction: column;
  text-align: center; /* at every width; on desktop the copy centres inside its column */
  /* content height in the stacked tier: the section ends where the couple's crop ends and
     the film peeks in below. From 1025px the desktop block below adds a capped first-screen
     floor and a larger type scale */
  padding: clamp(1.5rem, 5vw, 3.25rem) var(--gutter) var(--hero-pad-b);
  background:
    radial-gradient(rgba(0, 125, 106, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #ffffff, var(--mint-2));
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  width: 100%; /* max-width 1200px + margin auto still centre it */
  display: grid;
  /* figure | copy — the copy gets the wider column so the whole composition
     (figure hugging the panel, panel centre) sits left of where two equal
     columns would put it */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0; /* spacing comes from .hero-copy margin-left */
  align-items: stretch;
  /* row floor: with the bottom padding added the figure lands at ~1x of the
     584x500 canvas, never far above it (there is no higher-res source) */
  min-height: 430px;
  max-width: 1200px;
  margin: 0 auto;
}

/* frosted-glass panel: sits just right of the couple (whole figure visible) and blurs
   the haze and aurora that show through, so the blur sits behind the text. Like the
   figure it hangs into the section's bottom padding, so its bottom edge stands on the
   section edge, level with the couple's crop (the shadow below it is clipped there) */
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
  gap: clamp(0.9rem, 2.5vw, 1.25rem);
  margin-left: var(--hero-gap);
  margin-bottom: calc(-1 * var(--hero-pad-b));
  padding: clamp(1.25rem, 4vw, 2.5rem);
  /* the phone straddles the panel's left edge: keep the text clear of it */
  padding-left: calc(var(--phone-reach) - var(--hero-gap) + 1.5rem);
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(0, 90, 78, 0.10);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.hero-copy .store-row {
  justify-content: center;
}

.hero .lede {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1rem);
}

/* the slogan under the H1: lede measure, a step above lede size, weighted and teal so it
   reads as the sign-off */
.hero .hero-closer {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  font-weight: 600;
  color: var(--teal-deep);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.hero-brand img {
  width: clamp(44px, 12vw, 72px);
  height: auto;
}

/* fluid: 27px up to ~700px, 32px at the 880px stack point, 36px on a 1024px tablet,
   the desktop cap from ~1310px. The slow ramp matters in Polish: the headline in a
   half-width panel must not run past three lines. The plan's larger spec predates the
   split hero and would run it much longer on a phone. */
.hero h1 {
  font-size: clamp(1.7rem, 0.5rem + 2.75vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-wrap: pretty;
}

/* the couple and the phone from the store art: two transparent layers exported on one
   584x500 canvas (tools/hero-cutout.py; the couple has a phone-shaped hole), so drawing
   both into this box with the same object-fit keeps them registered at any size. The box
   stretches to the grid row and hangs into the bottom padding (both layers end on the
   section edge, as in the store art) and reaches past its column so the phone straddles
   the glass panel's left edge. Markup keeps copy first (reading order); order:-1 puts the
   figure on the left. No z-index or transform here on purpose: the box must not be a
   stacking context, so the phone can sit above the panel while the couple and the glows
   stay under the glass. Bottom-aligned with an explicit row-relative height rather than
   stretched: a stretched item that hits max-height is start-aligned, which on wide screens
   left the couple's crop floating above the section edge */
.hero-figure {
  position: relative;
  order: -1;
  align-self: end;
  justify-self: end;
  height: calc(100% + var(--hero-pad-b)); /* the grid row plus the hang into the padding */
  aspect-ratio: 584 / 500;
  max-width: calc(100% + var(--phone-reach)); /* the whole column plus the reach */
  max-height: 575px;
  margin-right: calc(-1 * var(--phone-reach));
  margin-bottom: calc(-1 * var(--hero-pad-b));
  pointer-events: none;
}

/* soft blurred teal haze spilling from the couple under the copy panel, so the
   frosted glass has something warm to blur */
.hero-figure::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15%;
  right: -35%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: rgba(0, 195, 165, 0.22);
  filter: blur(48px);
}

/* blurred teal glow behind the woman's shoulder, echoing the disc in the store art
   without its hard edge; bleeds left, away from the copy column */
.hero-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -8%;
  left: -60%;
  width: 115%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 165, 0.34) 0 45%, rgba(0, 195, 165, 0.14) 65%, transparent 78%);
  filter: blur(44px);
}

.hero-figure img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* the phone stands in front of the glass panel (z 2) */
.hero-figure .hero-phone {
  z-index: 3;
}

/* hero-only entrance animation. Everything else stays static: a scroll-triggered
   reveal would leave sections invisible to non-scrolling renderers (crawlers,
   screenshots) — the old SPA had exactly that flaw. */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* brand → h1 → closer → badges; the figure rises out of the bottom edge with the closer.
   The animation sits on the figure's layers, not on .hero-figure: an animated transform
   would make the box a stacking context and drop the phone under the panel. All three
   layers share one delay, or the hole in the couple shows the gradient until the phone
   arrives */
.hero-copy > *,
.hero-figure > img,
.hero-figure::before,
.hero-figure::after {
  animation: fade-up 0.7s ease-out both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 0.12s;
}

.hero-copy > :nth-child(3) {
  animation-delay: 0.24s;
}

.hero-copy > :nth-child(4) {
  animation-delay: 0.36s;
}

.hero-figure > img,
.hero-figure::before,
.hero-figure::after {
  animation-delay: 0.3s;
}

/* desktop hero (the split layout only, 2026-09-04): the section gets a first-screen floor
   and the copy steps up a size. The figure and the panel are bottom-aligned and hang into
   the bottom padding already, so a taller grid row simply stands both on the fold; the
   figure keeps its 575px / column-width cap (≈1x of the 584x500 art). Every clamp equals
   the base value at 1025px (no jump at the stack point) and reaches its cap by ~1440px. */
@media (min-width: 1025px) {
  .hero {
    /* viewport minus the sticky nav, capped low: the panel and the couple are at their size
       caps here, so past the content height every extra pixel is a band of empty aurora
       above them (an 880px cap left ~290px of it on a 1080p screen). 720px keeps that band
       under ~100px and lets the film peek in under the fold */
    min-height: calc(100vh - var(--nav-h)); /* fallback for browsers without svh */
    min-height: min(calc(100svh - var(--nav-h)), 720px);
    padding-top: clamp(3.25rem, 4vw, 4rem); /* 52 → 64px */
  }

  .hero-copy {
    gap: clamp(1.25rem, 2vw, 1.75rem); /* 20 → 28px: one text step, not a band, between the lines */
    /* the panel's height is what decides how much aurora stands above it, so the vertical
       padding stays close to the gaps rather than doubling them */
    padding: clamp(2.5rem, 3.6vw, 3rem) clamp(2.5rem, 3.5vw, 3.25rem); /* 40 → 48px / 40 → 52px */
    padding-left: calc(var(--phone-reach) - var(--hero-gap) + 2rem); /* 32px clear of the phone */
  }

  .hero-brand {
    gap: 1.1rem;
  }

  .hero-brand img {
    width: clamp(72px, 6.5vw, 92px);
  }

  .wordmark-hero {
    font-size: clamp(3.6rem, 1rem + 4vw, 4.4rem); /* 57 → 70px */
  }

  /* 36px at 1025px, 48px cap from ~1335px: the panel's text column is ~510px wide, and
     the Polish slogan must keep "długowieczności." on one line and stay within three lines */
  .hero h1 {
    font-size: clamp(2.25rem, 3.6vw, 3rem);
  }

  .hero .hero-closer {
    font-size: clamp(1.4rem, 0.5rem + 1.35vw, 1.75rem); /* 22 → 28px */
  }

  /* the PNGs are 405x120, so 60px is still under 2x native */
  .hero .store-badge img {
    height: clamp(52px, 4.2vw, 60px);
  }
}

/* ---------- P2: the film (white) ---------- */
.film h2 {
  margin-bottom: 1.5rem;
}

.poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--mint), #d5e8e4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.poster-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 195, 165, 0.4);
  transition: transform 0.2s ease;
}

.poster-play::after {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #04211c;
  margin-left: 5px;
}

.poster:focus-visible .poster-play {
  transform: scale(1.08);
}

.poster-watch {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(4, 18, 26, 0.65);
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
}

/* ---------- P3: the data flow / Synergy Engine (mint wash) ---------- */
.flow {
  background: var(--mint-2);
}

.engine {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) minmax(200px, 270px);
  align-items: stretch;
  gap: 0;
  max-width: 880px;
  margin: 0 auto;
}

.engine-sources,
.engine-outputs {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.75rem;
}

.engine-node {
  background: #ffffff;
  border: 1px solid rgba(0, 125, 106, 0.35);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.engine-ico {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--teal-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engine-node b {
  display: block;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.2rem);
}

.engine-core {
  width: 100%;
  height: auto;
  display: block;
  align-self: center;
}

.engine-chip {
  background: rgba(0, 195, 165, 0.1);
  border: 1px solid rgba(0, 125, 106, 0.5);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem); /* "Spersonalizowana suplementacja" wraps to two tidy lines */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  animation: outpulse 3.6s ease-in-out infinite;
}

.engine-chip:focus-visible {
  animation-play-state: paused;
  opacity: 1;
  transform: translateY(-2px);
  background: rgba(0, 195, 165, 0.18);
  box-shadow: 0 8px 22px var(--glow);
}

.engine-chip .engine-ico {
  width: 24px;
  height: 24px;
}

.outglow-1 {
  animation-delay: 1.2s;
}

.outglow-2 {
  animation-delay: 2.4s;
}

@keyframes outpulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.flow-dash {
  stroke-dasharray: 7 9;
  animation: flowdash 1.4s linear infinite;
}

.flow-d2 {
  animation-delay: 0.4s;
}

.flow-d3 {
  animation-delay: 0.8s;
}

@keyframes flowdash {
  to {
    stroke-dashoffset: -32;
  }
}

/* "data is the heart of DIAGME": ~60 bpm halo + slow ring */
.heart {
  animation: heartbeat 1s ease-in-out infinite;
  transform-origin: 230px 210px;
}

@keyframes heartbeat {
  0%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 0.6;
  }
}

.ring-spin {
  animation: spin 60s linear infinite;
  transform-origin: 230px 210px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.flow-notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* the flow chip reads as a slogan, not a chat bubble */
.flow-notes .assist-chip {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--teal-deep);
  text-align: center;
}

.flow-notes .assist-chip::before {
  display: none;
}


/* ---------- P4: DUOLIFE (white + faint gold wash; gold never animates) ---------- */
.duo {
  background: linear-gradient(180deg, var(--gold-bg), var(--paper) 240px);
}

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.duo-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.duo-logo {
  width: clamp(200px, 24vw, 280px);
  height: auto;
}

/* photo behind, guarantee card pulled up over its lower-left edge (P5 pattern, mirrored) */
.duo-visual {
  max-width: 520px;
  margin-left: auto;
}

.duo-photo {
  max-width: 86%;
  margin-left: auto;
}

.duo-guarantee {
  position: relative;
  z-index: 2;
  width: min(82%, 400px);
  margin-top: -3rem;
  border: 1px solid var(--gold-border);
  border-left: 3px solid var(--gold);
  /* the gold wash is translucent; lay it over paper so the photo never bleeds through */
  background: linear-gradient(var(--gold-bg), var(--gold-bg)) var(--paper);
  border-radius: 0 14px 14px 0;
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow);
}

.duo-guarantee b {
  display: block;
  font-size: 1.08rem;
  color: var(--gold-text);
  margin-bottom: 0.35rem;
}

.duo-guarantee p {
  font-size: 0.95rem;
  color: var(--muted);
}

/* group heading for the chips: names them as the partner's product standards. Pulls the
   .duo-copy column gap in so it sits 0.5rem above the chips, not a full row apart */
.duo-chips-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: -0.75rem;
}

.duo-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.duo-chips li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-text);
  border: 1px solid var(--gold-border);
  background: var(--paper);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
}

/* ---------- P5: lab tests (mint wash) ---------- */
.labs {
  background: var(--mint-2);
}

.labs-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

.labs-visual {
  max-width: 520px;
}

.labs-photo {
  max-width: 78%;
}

.labs-shot {
  width: min(52%, 260px);
  margin: -38% 4% 0 auto;
  position: relative;
  z-index: 2;
}

.labs-assist {
  margin-top: 1.25rem;
  max-width: 90%;
}

.labs-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.order-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.order-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.panel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 1.1rem;
  background: var(--mint-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pill-hi {
  background: var(--teal);
  border-color: var(--teal);
  color: #04211c;
}

.biomarker-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.biomarker-chips li {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-deep);
  border: 1px solid rgba(0, 125, 106, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  background: rgba(255, 255, 255, 0.8);
}

.hook {
  color: var(--muted);
  border-left: 3px solid var(--teal);
  padding-left: 1.25rem;
}

.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

.partner-line {
  font-weight: 700;
  font-size: 0.95rem;
}

/* wraps: the two logos side by side are wider than a phone and were the one thing
   that pushed the whole page into horizontal scroll */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
}

.partner-logos img {
  height: clamp(32px, 10vw, 40px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* ---------- P6: data & indicators (white collect row + mint understand band) ---------- */
.indicators {
  padding-bottom: 0;
}

.collect-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
}

.collect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* stacked under the cards it would otherwise stretch to the full wrap width */
.collect-photo {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.collect-card {
  background: var(--mint-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}

.collect-card b {
  display: block;
  margin-bottom: 0.2rem;
}

.collect-card p {
  font-size: 0.88rem;
  color: var(--muted);
}

.understand {
  position: relative;
  overflow: hidden;
  background: var(--mint);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.understand-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.07;
  pointer-events: none;
}

.understand .wrap {
  position: relative;
  z-index: 2;
}

.gauges {
  display: grid;
  /* never fewer than two columns: five single-column cards is a long scroll on a 320px phone */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, calc(50% - 0.5rem)), 1fr));
  gap: 1rem;
}

.gauge {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(4, 18, 26, 0.06);
}

.gauge svg {
  width: 84px;
  height: 84px;
}

.gauge-value {
  font-size: 1.15rem;
  font-weight: 800;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gauge-name {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.gauge-band {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticker-clip {
  overflow: hidden;
  margin-top: 2rem;
  border-top: 1px solid rgba(0, 125, 106, 0.18);
  border-bottom: 1px solid rgba(0, 125, 106, 0.18);
  padding: 0.75rem 0;
}

.ticker {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- P7: screenshots carousel (mint wash, scroll-snap; touch is native,
   mouse drag-to-swipe comes from js/carousel.js as a progressive enhancement).
   The native scrollbar is hidden on purpose — the strip still scrolls by touch,
   mouse drag and trackpad/wheel, it just reads as a carousel, not a scroller. ---------- */
.shots {
  background: var(--mint-2);
}

.caro {
  /* gutter in % of the section (100vw would include the desktop scrollbar) so the
     first slide lines up with the .wrap edge; the ends fade out under a mask so the
     neighbours peek instead of being cut */
  --caro-gutter: max(calc((100% - 1140px) / 2), var(--gutter));
  --caro-fade: clamp(1.5rem, 8vw, 6rem);
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1.5rem var(--caro-gutter) 1.5rem; /* top: room for the bob + shadow under the mask */
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--caro-fade), #000 calc(100% - var(--caro-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--caro-fade), #000 calc(100% - var(--caro-fade)), transparent);
}

/* older WebKit/Blink (before scrollbar-width landed in Chrome 121 / Safari 18.2) */
.caro::-webkit-scrollbar {
  display: none;
}

/* while the mouse holds the strip, snap is off so the drag tracks 1:1;
   the script re-enables it once the release glide has settled */
.caro.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.caro-slide {
  flex: none;
  /* 200px on a 320px phone, 280px from ~450px up (the 360px screenshots stay ≥1.29x) */
  width: clamp(200px, 62vw, 280px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: center;
}

/* the cards float: a slow bob on the card only (captions stay put), each slide
   at a different phase and period so they never line up */
.caro-slide .shot-card {
  animation: float-bob 5.5s ease-in-out infinite;
}

.caro-slide:nth-child(2n) .shot-card {
  animation-delay: -1.8s;
  animation-duration: 6.2s;
}

.caro-slide:nth-child(3n) .shot-card {
  animation-delay: -3.4s;
  animation-duration: 5.9s;
}

.caro-slide:nth-child(4n + 1) .shot-card {
  animation-delay: -0.9s;
}

@keyframes float-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.caro-slide figcaption {
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- P7b: FAQ (white between the mint carousel and the mint-to-white final) ---------- */
.faq {
  background: var(--paper);
  scroll-margin-top: var(--nav-h);
}

.faq .sec-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.faq-grid {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 3rem);
  align-items: start;
}

/* native <details>: the summary is the expand button, keyboard and screen-reader
   accessible for free; the answer stays in the HTML while collapsed */
.faq-item {
  border-top: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-item h3 {
  font-size: 1.08rem;
  text-wrap: pretty;
}

/* chevron: points down closed, up open */
.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.55em;
  height: 0.55em;
  margin-top: 0.45em;
  border-right: 2px solid var(--teal-deep);
  border-bottom: 2px solid var(--teal-deep);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item p {
  color: var(--muted);
  padding-bottom: 1.25rem;
}

@media (min-width: 880px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (hover: hover) {
  .faq-item summary:hover h3 {
    color: var(--teal-deep);
  }
}

/* ---------- P8: final conversion (aurora reprise) ---------- */
.final {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: linear-gradient(180deg, var(--mint-2), #ffffff);
  scroll-margin-top: var(--nav-h);
}

/* in-page anchor targets of the P3 result chips: clear the sticky nav */
.duo,
.labs,
.indicators {
  scroll-margin-top: var(--nav-h);
}

.final-rosette {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 420px);
  height: auto;
  opacity: 0.06;
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.final-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.final-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1.25rem, 5vw, 2.25rem);
}

.qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- P9: footer (mint band, ink text) ---------- */
.site-footer {
  background-color: var(--mint);
  color: var(--ink);
  padding: clamp(2.5rem, 6vw, 4rem) 0 calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.footer-brand .nav-brand {
  font-size: 1.15rem;
}

.footer-mail {
  font-weight: 700;
  color: var(--teal-deep);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.footer-links a:focus-visible {
  color: var(--teal-deep);
}

.footer-legal {
  border-top: 1px solid rgba(0, 125, 106, 0.18);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-company {
  font-size: 0.88rem;
  font-weight: 600;
}

.footer-disclaimer {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 76ch;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social svg {
  width: 28px;
  height: 28px;
  color: var(--teal-deep);
}

/* ---------- legacy pages (contact, delete-account, qr, 404) ---------- */
.lang-bar {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}

.lang-toggle {
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
}

.contact-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
}

.contact-page img {
  width: 230px;
  height: 200px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.contact-name {
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
}

.contact-email {
  color: var(--secondary);
  /* clamp: the address is wider than a small phone at a fixed 28px */
  font-size: clamp(16px, 6vw, 28px);
}

.contact-page .footer-social {
  margin-top: 1rem;
}

.contact-page .footer-social svg {
  width: 50px;
  height: 50px;
  color: var(--primary);
}

.content-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.content-page img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.content-page h1 {
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
}

.content-page h2 {
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
  margin-top: 1rem;
}

.content-page p,
.content-page li {
  color: var(--secondary);
  line-height: 1.6;
}

.content-page ul {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.content-page .content-highlight a {
  color: var(--secondary);
  /* clamp: the address is wider than a small phone at a fixed 24px */
  font-size: clamp(17px, 7vw, 24px);
  font-weight: 700;
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
}

/* /qr fallback: the page a non-phone visitor sees instead of the store redirect. */
.store-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 4rem 1.5rem;
}

.store-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 20rem;
  margin: 1rem 0;
}

.store-button {
  display: block;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.store-button:hover,
.store-button:focus-visible {
  background: var(--secondary);
  color: #fff;
}

/* ---------- responsive ---------- */

/* tablet and below: the hero collapses to the centred stack, the couple and the phone sit
   under the badges. (Until 2026-09-03 the split survived down to 881px; with the phone
   the figure box is 1.17x wider than tall, and in the 881-1024px band it left the panel
   text ~340px wide and the photo under 0.9x.) */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-height: 0;
    max-width: 760px;
  }

  .hero-copy {
    align-self: auto;
    gap: 1.25rem;
    margin-left: 0; /* the glass panel stays */
    margin-bottom: 0; /* the figure sits below the panel here: no hanging into the padding */
    padding-left: clamp(1.25rem, 4vw, 2.5rem); /* symmetric again: nothing overlaps it */
  }

  /* the box follows the art: as wide as the column up to the canvas's native 584px (a wide
     tablet would otherwise upscale it), its height from the 584x500 ratio. It still hangs into the bottom padding, so
     the couple's crop stands on the section edge and the section ends right there — a
     taller box would only put an empty band between the panel and the photo (2026-09-04:
     a viewport-filling row left ~115px of it on a 390x844 phone) */
  .hero-figure {
    order: 0; /* back under the badges */
    align-self: end;
    justify-self: center;
    width: 100%;
    height: auto;
    max-width: min(100%, 584px);
    margin-top: 0;
    margin-right: 0;
  }

  .hero-figure::before {
    left: -30%;
  }

  /* stacked: nothing sits to the right of the couple, so no haze */
  .hero-figure::after {
    display: none;
  }

  /* the 1.1fr visual bias is a desktop nicety; equal columns keep the copy readable */
  .duo-grid,
  .labs-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 880px) {
  .engine {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .engine-sources,
  .engine-outputs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .engine-node {
    flex: 1 1 160px;
  }

  /* vertical variant: hide the horizontal streams, keep the beating core. The
     460x420 viewBox letterboxes ~58px of empty space above and below the core at
     this width; the negative margins pull the nodes and chips in over it */
  .engine-core {
    width: 220px;
    max-width: 100%;
    margin: -3.5rem auto;
  }

  .engine-core path {
    display: none;
  }

  .engine-sources {
    position: relative;
    padding-bottom: 1.5rem;
  }

  .engine-sources::after,
  .engine-outputs::before {
    content: "";
    width: 2px;
    height: 1.25rem;
    background: repeating-linear-gradient(180deg, var(--teal) 0 5px, transparent 5px 10px);
    position: absolute;
    left: 50%;
  }

  .engine-sources::after {
    bottom: 0;
  }

  .engine-outputs {
    position: relative;
    padding-top: 1.5rem;
  }

  .engine-outputs::before {
    top: 0;
  }

  .duo-grid,
  .labs-grid,
  .collect-row {
    grid-template-columns: 1fr;
  }

  .duo-visual,
  .labs-visual {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  /* compact nav: brand + toggle + pill still fit on one line in Polish */
  .nav {
    gap: 0.5rem;
  }

  .nav-actions {
    gap: 0.4rem;
  }

  .nav-brand {
    font-size: 1.1rem;
  }

  .nav-lang {
    font-size: 0.85rem;
  }

  .nav-cta {
    font-size: 0.85rem;
    padding: 0 0.9rem;
  }

  /* first-viewport budget: the store badges must end above the fold of a 360x740
     phone in Polish */
  .hero {
    padding-top: 1.25rem;
  }

  .hero-copy {
    gap: 0.8rem;
  }

  /* three blurred discs are the most expensive paint on the page for a phone GPU */
  .aurora {
    filter: blur(36px);
  }

  .engine-node {
    padding: 0.75rem 1rem;
  }

  /* the three result chips become full-width tap rows instead of an uneven wrap */
  .engine-chip {
    flex: 1 1 100%;
    justify-content: center;
  }

  .collect-grid {
    grid-template-columns: 1fr;
  }
}

/* the narrowest phones: the rosette alone identifies the brand in the bar (the link
   keeps its aria-label; the full wordmark sits in the hero right below) */
@media (max-width: 400px) {
  .nav .nav-brand .wordmark {
    display: none; /* .nav-brand is reused in the footer, which keeps its wordmark */
  }
}

/* ---------- hover affordances only where a hover pointer exists. On touch, :hover
   sticks after a tap (an in-page anchor keeps the engine chip's pulse paused), so
   touch gets a short press feedback instead. focus-visible variants stay above. ---------- */
@media (hover: hover) {
  .store-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px var(--glow);
  }

  .nav-lang:hover,
  .footer-links a:hover {
    color: var(--teal-deep);
  }

  .nav-cta:hover {
    background: var(--teal-deep);
    transform: translateY(-1px);
  }

  .poster:hover .poster-play {
    transform: scale(1.08);
  }

  .engine-chip:hover {
    animation-play-state: paused;
    opacity: 1;
    transform: translateY(-2px);
    background: rgba(0, 195, 165, 0.18);
    box-shadow: 0 8px 22px var(--glow);
  }

  .pill:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
  }

  .partner-logos img:hover {
    filter: none;
    opacity: 1;
  }
}

.engine-chip:active,
.store-badge:active,
.nav-cta:active {
  transform: scale(0.98);
}

/* ---------- touch: 44px tap targets where the desktop pitch is tighter ---------- */
@media (pointer: coarse) {
  .footer-links {
    gap: 0;
  }

  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- reduced motion: every loop stops, nothing is ever hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-copy > *,
  .hero-figure > img,
  .hero-figure::before,
  .hero-figure::after,
  .aurora span,
  .flow-dash,
  .heart,
  .ring-spin,
  .engine-chip,
  .ticker,
  .caro-slide .shot-card,
  .final-rosette {
    animation: none !important;
  }

  .faq-item summary::after {
    transition: none;
  }
}