/* 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;
}

/* brand lockup: rosette + DIAGME™ in one SVG (images/logo-wordmark.svg, 2632×678); sized by
   height wherever it appears, the width follows the aspect ratio */
.brand-lockup {
  height: 30px;
  width: auto;
}

/* the bare rosette stands in for the lockup only on the narrowest phones (nav, below) */
.brand-mark {
  display: none;
}

/* 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;
}

.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 devices (phone, watch, ring) 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
     fills the right half of the art up to its edge, so roughly reach − gap of it 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. 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: center; /* the devices float: figure and panel share one centre line */
  max-width: 1200px;
  margin: 0 auto;
}

/* frosted-glass panel: sits just right of the devices and blurs the haze and aurora that
   show through, so the blur sits behind the text */
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.25rem);
  margin-left: var(--hero-gap);
  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;
}

/* the 24/7 badge under the H1 (transparent cutout, 400x440): the sign-off where the closer
   line used to be */
.hero-badge {
  width: clamp(112px, 30vw, 140px);
  height: auto;
}

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

/* the lockup is as tall as the rosette used to be, so the slogan keeps its place */
.hero-brand .brand-lockup {
  height: clamp(44px, 12vw, 72px);
}

/* 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 devices art: one transparent cutout per language (design-src/hero), the phone on its
   right half. The box 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 art
   can sit above the panel while the glows stay under the glass */
.hero-figure {
  position: relative;
  order: -1;
  justify-self: end;
  /* the whole column plus the reach; 540px is ~1.8x under the 975x1150 export */
  width: min(calc(100% + var(--phone-reach)), 540px);
  margin-right: calc(-1 * var(--phone-reach));
  pointer-events: none;
}

/* soft blurred teal haze spilling from the phone 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 watch and the ring; bleeds left, away from the copy column */
.hero-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8%;
  left: -45%;
  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);
}

/* in front of the glass panel (z 2) */
.hero-figure img {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
}

/* 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 → 24/7 badge → store badges; the figure rises with the badge. The animation sits on
   the art and the glows, not on .hero-figure: an animated transform would make the box a
   stacking context and drop the phone under the panel */
.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 centred on the grid row, so a
   taller row only adds even space above and below them. 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 devices are at their size
       caps here, so past the content height every extra pixel is a band of empty aurora
       around them. 720px keeps that band small 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 .brand-lockup {
    height: clamp(72px, 6.5vw, 92px);
  }

  /* 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-badge {
    width: clamp(150px, 12.5vw, 180px);
  }

  /* 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;
}

/* the film's own still under the play button; the player takes the same box on click (js/film.js) */
.poster-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-player iframe {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.poster-play {
  position: relative;
  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 (mint wash) ---------- */
.flow {
  background: var(--mint-2);
}

/* the hexagon diagram is a transparent cutout drawn for a teal ground (white hexagons with
   a white glow), so it sits on a teal panel, not on the mint wash */
.flow-figure {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(0.75rem, 3vw, 2rem);
  border-radius: 28px;
  background: radial-gradient(circle at 50% 45%, #12c2b2, #07b0a3 70%);
  box-shadow: 0 18px 50px rgba(0, 90, 78, 0.18);
}

.flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.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;
}


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

.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 (P4 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;
}

/* ---------- P4: lab tests (white, between the mint flow and the mint DUOLIFE band) ---------- */
.labs {
  background: var(--paper);
}

.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;
}

/* the two partners behind an order, in their own colours: badania.pl takes the order and
   the payment, Diagnostyka draws the blood and runs the tests */
.partner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}

.partner-card {
  flex: 0 1 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.25rem;
  box-shadow: var(--shadow);
}

/* one box for both: the square-ish badania.pl mark fills its height, the long Diagnostyka
   wordmark its width */
.partner-card img {
  width: 100%;
  height: 68px;
  object-fit: contain;
}

.partner-card figcaption {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

/* ---------- P6: data & indicators (white collect row + mint understand band) ---------- */
/* section.block outranks a bare class: the understand band must end the section, flush
   with the partners strip below */
section.indicators {
  padding-bottom: 0;
}

/* the "200+ parameters" callout under the lede: the figure set large beside its label and the
   one-sentence argument, the lede's measure, no motion (entrance animation is hero-only) */
.stat-callout {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
  max-width: 680px;
}

.stat-number {
  flex: none;
  font-size: clamp(2.6rem, 2rem + 2.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

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

.stat-argument {
  margin-top: 0.25rem;
  color: var(--muted);
}

.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);
}

/* the connectable health apps, drawn like the app's own connect tiles (mobile PartnerTile):
   a white rounded tile carries the border, the partner's icon inside is left untouched
   (Apple's guidelines forbid a border on the icon; 44px is Garmin's minimum display size) */
.sources {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.sources-title {
  font-weight: 700;
  text-align: center;
}

.source-tiles {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.source-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--mint-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.6rem 1.1rem 0.6rem 0.6rem;
}

.source-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--paper);
  border: 1.5px solid var(--mint);
  border-radius: 16px;
}

.source-icon img {
  width: 44px;
  height: 44px;
}

.source-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.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;
}

/* six gauges, always in full rows: two columns on a phone, three on a tablet, one row on a
   desktop (auto-fit would leave a lone card on the last row at in-between widths) */
.gauges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 561px) {
  .gauges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .gauges {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.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%);
  }
}

/* ---------- P6b: partners (a short white strip between the mint understand band and the
   mint carousel): five logos in equal tiles, three and two on a desktop ---------- */
section.partners {
  background: var(--paper);
  padding: clamp(2.75rem, 6vw, 4rem) 0; /* a strip, not a chapter: tighter than section.block */
  scroll-margin-top: var(--nav-h);
}

.partners .sec-head {
  margin-bottom: 1.75rem;
}

.partners h2 {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
}

.partner-wall {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 960px;
  margin: 0 auto;
}

/* the logos run from 1.7:1 (DUOLIFE) to 7.8:1 (Żyję Świadomie): a wide tile lets the long
   wordmarks reach a readable size while the tall ones are held by the tile height */
.partner-wall li {
  flex: 0 1 300px;
  display: grid;
  place-items: center;
  height: 104px;
  padding: 1.1rem 1.5rem;
  background: var(--paper);
  border: 1.5px solid var(--mint);
  border-radius: 16px;
}

/* a fixed cap, not 100%: a percentage height has nothing to resolve against in the grid cell */
.partner-wall img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 64px;
}

/* ---------- 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 (#labs, #supplements, #tracking): 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 .brand-lockup {
  height: 28px;
}

.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 devices sit under the
   badges. (Until 2026-09-03 the split survived down to 881px; in the 881-1024px band it
   left the panel text ~340px wide.) */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 760px;
  }

  .hero-copy {
    gap: 1.25rem;
    margin-left: 0; /* the glass panel stays */
    padding-left: clamp(1.25rem, 4vw, 2.5rem); /* symmetric again: nothing overlaps it */
  }

  /* the art is portrait: at the full column width it would be a screen and a half tall on
     a phone, so it is capped by width and centred */
  .hero-figure {
    order: 0; /* back under the badges */
    justify-self: center;
    width: min(82%, 400px);
    margin-right: 0;
  }

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

  /* stacked: nothing sits to the right of the devices, 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) {
  .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-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);
  }

  /* the labels are part of the image: on a phone the panel bleeds to the screen edges so
     they stay readable (~11px at 390px wide) */
  .flow-figure {
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.75rem 0.25rem;
    border-radius: 0;
  }

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

  /* phone: the figure and its label share one line, the argument runs the full width below
     (beside an eight-line column the number floated mid-air). The label wraps to two lines
     next to the figure, so it is centred on it rather than hung from its baseline, which
     left the second line dangling alone under the number */
  .stat-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
  }

  .stat-text {
    display: contents;
  }

  .stat-label {
    line-height: 1.35;
  }

  .stat-argument {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* stacked: one column as wide as the longest name, so the three tiles line up */
  .source-tiles {
    display: grid;
  }
}

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

  .nav .nav-brand .brand-mark {
    display: block;
  }
}

/* ---------- hover affordances only where a hover pointer exists. On touch, :hover
   sticks after a tap, 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);
  }

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

.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,
  .ticker,
  .caro-slide .shot-card,
  .final-rosette {
    animation: none !important;
  }

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