/* ============================================================
   wooops.pl — Woo Ops landing (W1)
   Kierunek: hybryda A+B+C (docs/concept-scorecard.md)
   Tokeny: źródło prawdy OKLCH w tokens/*.tokens.json,
   hex poniżej wygenerowane skryptem (nie dobierać ręcznie).
   Reguły twarde: docs/system-rules.md
   ============================================================ */

/* ---------- fonts (self-hosted, variable 400–800) ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Głos display: Archivo (Omnibus-Type). Grotesk industrialny o ciasnych
   światłach wewnętrznych, czyta się jak druk urzędowy, nie jak SaaS.
   Manrope zostaje wszędzie tam, gdzie strona cytuje interfejs aplikacji
   (mockupy, przyciski, tekst bieżący) — parytet z EV2 jest ważniejszy
   niż konsekwencja typograficzna landingu. Rewizja decyzji 1
   z docs/authorship-notes.md. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/archivo-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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: raw → semantic ---------- */
:root {
  /* raw (EV2 + cyjan logo) */
  --ink: #16162b;            /* oklch(21.2% .041 282) */
  --ink-soft: #5a5b78;       /* oklch(48.2% .046 283) */
  --ink-muted: #8a8ca6;      /* oklch(64.7% .039 282) */
  --violet: #5b50e6;         /* oklch(53.5% .218 279) */
  --violet-deep: #4b3fd6;    /* oklch(48.4% .220 278) */
  /* gradient ops-card i dot sklepu: cytat 1:1 z EV2 (docs/design/woo-ops-v2.html) */
  --violet-g1: #6d5af0;
  --violet-g1b: #8257f5;
  --violet-g1c: #7a4df7;
  --violet-g2: #8b5cf6;
  --tint: #ecebfd;           /* oklch(94.6% .024 289) */
  --tint-soft: #f0effb;
  --bg: #eaebf4;             /* oklch(94.2% .012 281) */
  --surface: #fcfcfe;        /* oklch(99.2% .003 286) */
  --green: #0f7052;   /* 5,2:1 na --green-bg */
  --green-bg: #dcfaf0;
  --red: #c42b36;
  --red-bg: #fde7e7;
  --amber: #a34a08;   /* 5,1:1 na --amber-bg */
  --amber-bg: #fef0d3;
  --cyan: #22b8cf;           /* oklch(72% .119 211) — mikroakcent nie-tekstowy + tekst na ink */
  --cyan-text: #0c6e80;      /* oklch(50% .09 211) — cyjan tekstowy na jasnym tle, 4.97:1 */

  /* semantic */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-soft);
  /* realny tekst strony: muted = soft (4.5:1 na --bg); #8A8CA6 tylko
     w dekoracyjnych mockupach UI (aria-hidden), jak w aplikacji */
  --text-muted: var(--ink-soft);
  --text-on-brand: var(--surface);
  --text-on-inverse: var(--bg);
  --bg-page: var(--bg);
  --bg-surface: var(--surface);
  --bg-brand-tint: var(--tint);
  --bg-inverse: var(--ink);
  --cta-bg: var(--violet);
  --cta-bg-hover: var(--violet-deep);
  --hairline: rgba(20, 20, 50, 0.12);
  --hairline-strong: rgba(20, 20, 50, 0.22);
  --border-interactive: rgba(20, 20, 50, 0.54); /* obrysy elementów klikalnych, 3,1:1 na --bg */
  --focus-ring: var(--violet);
  --shadow-phone: 0 2px 4px rgba(20, 20, 50, 0.08), 0 22px 50px rgba(20, 20, 50, 0.14);
  --shadow-lift: 0 1px 2px rgba(20, 20, 50, 0.05), 0 12px 30px rgba(20, 20, 50, 0.08);
  --glass-bg: rgba(252, 252, 254, 0.78);

  /* spacing / radius */
  --container: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --section-gap: clamp(96px, 12vw, 144px);
  --r-control: 12px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-phone: 40px;

  /* typografia: para display + text */
  --font-text: "Manrope", system-ui, sans-serif;
  --font-display: "Archivo", "Manrope", system-ui, sans-serif;

  /* motion */
  --ease-nav: cubic-bezier(0.22, 0.8, 0.32, 1);
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* dock CTA jest fixed na dole poniżej 760px i mógł zakryć zafokusowany
     element (2.4.11 Focus Not Obscured) */
  scroll-padding-bottom: 80px;
  interpolate-size: allow-keywords; /* animacja height:auto (FAQ) w nowych przeglądarkach */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--violet);
}
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--bg-surface);
  color: var(--violet);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--r-control);
}
.skip-link:focus-visible {
  top: 12px;
}

/* ---------- typografia ról ---------- */
::selection {
  background: var(--violet);
  color: var(--surface);
}
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 61px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.display-l {
  font-family: var(--font-display);
  font-size: clamp(31px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

/* Głos display obejmuje też liczby wiodące: numer sekcji, godzinę na osi,
   dominantę finału i parametry. To one prowadzą wzrok po karcie operacyjnej,
   więc mówią tym samym krojem co nagłówki. Liczby wewnątrz mockupów
   telefonu zostają w Manrope: tam cytujemy aplikację, nie stronę. */
.section-no,
.moment .hour,
.day-final .value,
.download-spec dd,
.hero-param .value,
.plan .price,
.forwho-what h3,
.moment .what h3 {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
}
.body-l {
  font-size: 20px;
  max-width: 68ch;
}
.param-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.measure {
  max-width: 68ch;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.logo img {
  height: 30px;
  width: auto;
}
.footer .logo img {
  height: 26px;
}
.nav-inner nav {
  margin-left: auto; /* landmark <nav> jest dzieckiem flexa, to on się dosuwa */
}
/* hover-pill nawigacji (21st.dev: @ibelick animated-tabs, wariant hover; vanilla) */
.nav-links {
  position: relative;
}
.nav-hover-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 42px;
  width: 0;
  transform: translateY(-50%);
  border-radius: var(--r-control);
  background: var(--tint-soft);
  opacity: 0;
  pointer-events: none;
}
.nav-links > li {
  position: relative;
  z-index: 1;
}
.nav-links.has-pill a:not(.btn):not(.lang-link):hover {
  background: transparent;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-control);
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 15px;
  transition: color 140ms ease, background-color 140ms ease;
}
.nav-links a:hover {
  color: var(--text-primary);
  background: var(--tint-soft);
}
/* CTA w nav: nie dziedziczy koloru/hovera linków menu */
.nav-links a.btn {
  color: var(--text-on-brand);
  padding: 0 18px;
}
.nav-links a.btn:hover {
  background: var(--cta-bg-hover);
  color: var(--text-on-brand);
}
.nav-cta {
  margin-left: 8px;
}
.nav-links .lang-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  min-height: 36px;
  padding: 0 12px;
  align-self: center;
}
.lang-link .flag {
  display: block;
  width: 18px;
  height: 13px;
  border-radius: 2.5px;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 50, 0.12); /* obrys dla jasnych pól flagi */
}
.nav-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-interactive);
  border-radius: var(--r-control);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-burger[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--violet);
  color: var(--violet);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-control);
  border: 0;
  font: 700 17px/1 "Manrope", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn-primary {
  background: var(--cta-bg);
  color: var(--text-on-brand);
}
.btn-primary:hover {
  background: var(--cta-bg-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-interactive);
}
.btn-secondary:hover {
  border-color: var(--violet);
  color: var(--violet);
}
.btn-small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
/* dwutonowy focus na powierzchniach brandowych (ring ton-w-ton z tłem) */
.btn-primary:focus-visible,
.billing-toggle button[aria-pressed="true"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(48px, 7vw, 96px) 0;
  overflow: clip;
}
.hero-grid {
  display: grid;
  /* 7/5 na korzyść treści: hero ma mieć dominantę, a jest nią obietnica,
     nie mockup. Wcześniejsze 6/6 nie wskazywało niczego. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero-copy .display-xl {
  margin-top: 18px;
  max-width: 13ch;
  /* Obietnica jest dominantą hero, więc dostaje najwyższy stopień na stronie.
     overflow-wrap zostaje jako pas bezpieczeństwa dla długich złożeń
     w polskim i niemieckim. */
  font-size: clamp(40px, 6.4vw, 76px);
  overflow-wrap: break-word;
}
.hero-lead {
  margin: 24px 0 0;
  font-size: 20px;
  color: var(--text-secondary);
  max-width: 46ch;
}
.hero-note {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
.hero-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 34px;
}
.hero-price-link {
  color: var(--text-primary);
  font-weight: 700;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.hero-stores .store-badge img {
  height: 46px;
}
.hero-stores .store-badge-play img {
  height: 70px;
  margin: -12px -10px;
}
.hero-params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.hero-param {
  padding-block: 8px;
}
.hero-param .value {
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* parametry wiodące: darmowość i zero danych na serwerach */
.hero-param:first-child .value,
.hero-param.key .value {
  font-size: 41px;
}
.hero-param .label {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 24ch;
}

/* speed lines (brand motion, jedyna czysto brandowa animacja):
   trailing lines za telefonem jak w logo; poza viewportem mobile */
.phone-wrap {
  position: relative;
}
.speed-lines {
  position: absolute;
  left: -72px;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.speed-lines span {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--violet);
}
.speed-lines span:nth-child(1) { width: 44px; }
.speed-lines span:nth-child(2) { width: 26px; background: var(--cyan); }
.speed-lines span:nth-child(3) { width: 56px; }

/* karty wokół telefonu: teaser wartości (marża Pro, alert) */
.hero-float {
  position: absolute;
  z-index: 2;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 14px 18px;
  box-shadow: var(--shadow-lift); /* element celowo uniesiony */
}
.hero-float .param-label {
  font-size: 11px;
}
.hero-float .big {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 3px;
}
.hero-float .sub {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}
/* Przy siatce 7/5 i większym H1 karta nie może już zachodzić na kolumnę
   z treścią: nawiasy dekoracyjne nie wchodzą w drogę obietnicy. */
.hero-float.f1 {
  top: 132px;
  left: -52px;
}
.hero-float.f2 {
  bottom: 34px;
  right: -44px;
  max-width: 240px;
}
.hero-float.f2 .sub {
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 14px;
}
@media (max-width: 1180px) {
  .hero-float {
    display: none;
  }
}
@media (max-width: 980px) {
  .speed-lines {
    display: none;
  }
}

/* ============================================================
   PHONE — ekran „Dziś" odtworzony z EV2 (demo-data)
   Wartości = EV2 × 0.87 (390 → 340)
   ============================================================ */
.phone-wrap {
  display: flex;
  justify-content: center;
}
.phone {
  zoom: 1.24; /* skala desktopowa mockupu; wartości wewnątrz = projekt 340px */
  width: 340px;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid #d6d8e6;
  border-radius: var(--r-phone);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.phone * {
  line-height: 1.35;
}
.phone-status {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 24px 6px;
  font-weight: 700;
  font-size: 13px;
}
.phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 12px;
}
.phone-header .screen-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.4px;
}
.phone-header .screen-date {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}
.store-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 31px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid #e8e4f6;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.store-pill .dot {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--violet), var(--violet-g2));
}
.phone-body {
  flex: 1;
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ops-card {
  position: relative;
  border-radius: 20px;
  padding: 18px 18px 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--violet-g1) 0%, var(--violet-g1b) 52%, var(--violet-g1c) 100%);
  box-shadow: 0 12px 26px rgba(91, 80, 230, 0.32);
  color: var(--text-on-brand);
}
.ops-card::before,
.ops-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(252, 252, 254, 0.13);
}
.ops-card::before {
  top: -35px;
  right: -26px;
  width: 130px;
  height: 130px;
}
.ops-card::after {
  bottom: -44px;
  right: 35px;
  width: 96px;
  height: 96px;
  background: rgba(252, 252, 254, 0.08);
}
.ops-card > * {
  position: relative;
  z-index: 1;
}
.ops-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(252, 252, 254, 0.82);
}
.ops-number-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 3px;
}
.ops-number {
  font-weight: 800;
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: -1px;
}
.ops-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(252, 252, 254, 0.18);
  padding: 3px 9px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.ops-split {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.ops-split > div {
  flex: 1;
  background: rgba(252, 252, 254, 0.16);
  border-radius: 10px;
  padding: 8px 10px;
}
.ops-split .n {
  font-weight: 800;
  font-size: 16px;
}
.ops-split .l {
  font-size: 10px;
  color: rgba(252, 252, 254, 0.82);
}
.ops-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(252, 252, 254, 0.18);
  font-size: 11px;
  font-weight: 600;
}
.ops-footer .go {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.metric-row {
  display: flex;
  gap: 8px;
}
.metric {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 11px 12px;
  box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04);
}
.metric .label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.metric .value {
  font-weight: 800;
  font-size: 19px;
  margin-top: 5px;
  letter-spacing: -0.3px;
}
.metric .delta {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
}
.delta-up { color: var(--green); }
.delta-warn { color: var(--amber); }
.attention-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 2px 0;
}
.attention-head .t {
  font-size: 11.5px;
  font-weight: 700;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-violet { background: var(--tint); color: var(--violet); }
.strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(20, 20, 50, 0.04);
}
.strip .mono {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--violet);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.strip .who {
  flex: 1;
  min-width: 0;
}
.strip .who .name {
  font-weight: 700;
  font-size: 12px;
}
.strip .who .meta {
  font-size: 10.5px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.strip .right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.strip .amount {
  font-weight: 800;
  font-size: 13px;
}
.phone-nav {
  display: flex;
  padding: 7px 8px 18px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid var(--hairline);
}
.phone-nav > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 9.5px;
  font-weight: 600;
}
.phone-nav .active {
  color: var(--violet);
  font-weight: 700;
}
.phone-nav .ind {
  width: 45px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-nav .active .ind {
  background: var(--tint);
}

/* ============================================================
   aplikacja z bliska (pionowa legenda + scena telefonu)
   ============================================================ */
/* Pionowa legenda ekranów. Świadome zerwanie z segmented control:
   czarna pigułka jedzie po katalogach komponentów od 2023 roku, a lista
   z opisem niesie treść nawet wtedy, gdy nikt nic nie kliknie. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 40px);
}
.tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline-strong);
}
.tabs [role="tab"] {
  display: grid;
  gap: 5px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: 20px clamp(14px, 1.6vw, 22px);
  margin: 0;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background-color 180ms ease, color 180ms ease;
}
.tabs [role="tab"] .t {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--text-primary);
}
.tabs [role="tab"] .s {
  font-size: 15px;
  line-height: 1.45;
  max-width: 46ch;
}
.tabs [role="tab"]:hover {
  background: var(--tint-soft);
}
/* Stan wybrany niesiony pełną ramką, tłem i kolorem naraz. Samo --tint na
   --bg dawało 1,01:1, czyli stan istniał wyłącznie w kolorze tekstu:
   naruszenie 1.4.1 i 1.4.11. Ramka jest pełna, nie bocznym paskiem. */
.tabs [role="tab"][aria-selected="true"] {
  background: var(--bg-surface);
  border: 1px solid var(--violet);
  color: var(--text-primary);
}
.tabs [role="tab"][aria-selected="true"] .t {
  color: var(--violet-deep);
}
@media (max-width: 900px) {
  .showcase {
    grid-template-columns: minmax(0, 1fr);
  }
  .tabs [role="tab"] .s {
    max-width: none;
  }
}
.screen-stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.showcase-phone {
  display: flex;
  flex-direction: column;
}
.showcase-phone .screens {
  display: grid;
  flex: 1;
}
.showcase-phone .screen {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
}
.showcase-phone .screen.active {
  visibility: visible;
  opacity: 1;
}
.showcase-phone .phone-body {
  min-height: 470px;
}
/* nawigacja mockupu synchronizowana z zakładkami */
.showcase-phone .phone-nav > div {
  transition: color 180ms ease;
}
.showcase-phone .phone-nav .active {
  color: var(--violet);
  font-weight: 700;
}
/* pasek szukania / pole pytania AI (demo-data) */
.mock-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.mock-input .send {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
/* mini wykres słupkowy (demo-data) */
.bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 88px;
  padding: 4px 2px 0;
}
.bars span {
  flex: 1;
  border-radius: 6px 6px 3px 3px;
  background: var(--tint);
  min-height: 12px;
}
.bars span.hot {
  background: var(--violet);
}
.bars-caption {
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 6px;
}
/* skala treści AI wewnątrz mockupu: układ czatu */
.chat-user {
  align-self: flex-end;
  max-width: 82%;
  background: var(--violet);
  color: var(--text-on-brand);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
}
.suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.suggest span {
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 600;
}
.suggest .lbl {
  flex-basis: 100%;
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.showcase-phone .mock-input.pin {
  margin-top: auto;
}
.showcase-phone .ai-q {
  font-size: 13px;
  margin: 0 0 8px;
}
.showcase-phone .ai-a {
  font-size: 11.5px;
  padding: 12px 14px;
}
.showcase-phone .ai-a ol {
  margin: 8px 0;
  padding-left: 18px;
}
.showcase-phone .stat-head .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.showcase-phone .stat-head .value {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.5px;
  margin-top: 2px;
}

/* ============================================================
   sekcje 01–04
   ============================================================ */
.section {
  padding-top: var(--section-gap);
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--hairline-strong);
  padding-top: 16px;
}
.section-no {
  font-size: 15px;
  font-weight: 800;
  color: var(--violet);
}
/* dominanta na sekcję: 7/5 z rotacją, kto prowadzi (copy albo winieta) */
.feature-grid {
  display: grid;
  grid-template-columns: 7fr 5fr; /* copy dominuje, winieta prawa */
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}
.feature-grid.flip .feature-copy {
  order: 2; /* winieta dominuje z lewej (7fr) */
}
.feature-grid.lead-visual {
  grid-template-columns: 5fr 7fr; /* winieta dominuje z prawej */
}
.feature-grid.flip.minor {
  grid-template-columns: 5fr 7fr; /* winieta mała z lewej, copy dominuje z prawej */
}
.feature-copy .heading {
  max-width: 18ch;
}
.feature-copy p {
  color: var(--text-secondary);
  max-width: 52ch;
}
.feature-copy ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 17px;
}
.feature-copy li {
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 12px;
}
.feature-copy li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 9px;
  margin-top: 8px;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.pro-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--violet);
  background: var(--tint);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* winiety UI (demo-data); bez cienia: uniesiony zostaje tylko telefon */
.vignette {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vignette .strip .who .name { font-size: 16px; }
.vignette .strip .who .meta { font-size: 13.5px; }
.vignette .strip .amount { font-size: 17px; }
.vignette .strip .mono { width: 48px; height: 48px; font-size: 15px; }
.vignette .strip .pill { font-size: 12px; }
.snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--r-card);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
}
.snackbar .undo {
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stat-panel .big {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.stat-panel .rows {
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
}
.stat-panel .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
  color: var(--text-secondary);
}
.stat-panel .row .amount {
  font-weight: 800;
  color: var(--text-primary);
}
.ai-q {
  font-weight: 700;
  font-size: 18px;
}
.ai-a {
  background: var(--tint-soft);
  border-radius: var(--r-card);
  padding: 18px 20px;
  font-size: 16px;
  color: var(--text-secondary);
}
.ai-a .num { color: var(--text-primary); font-weight: 700; }
.ai-a ol {
  margin: 10px 0 12px;
  padding-left: 22px;
}
.ai-a li {
  padding: 3px 0;
}
.ai-a .next {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}
.ai-src {
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ============================================================
   oś czasu — jeden dzień
   ============================================================ */
.day-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
/* Jeden treatment dla wszystkich zdjęć na stronie: kadr 4:5, ta sama
   gradacja i ten sam promień. Wcześniej dwa kadry (3:2 i 4:3), dwa
   promienie i zero relacji z paletą, czyli stock wklejony w kartę. */
.day-photo {
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  filter: saturate(0.88);
}
.day .intro {
  max-width: 60ch;
  color: var(--text-secondary);
}
.timeline {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 0;
}
.moment {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 3vw, 48px);
  position: relative;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.moment::before {
  content: "";
  position: absolute;
  left: 118px;
  top: 8px;
  bottom: 0;
  width: 1px;
  background: var(--hairline-strong);
}
.moment:last-child::before {
  display: none;
}
.moment .hour {
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan-text);
  text-align: right;
  position: relative;
}
.moment .hour::after {
  content: "";
  position: absolute;
  right: -27px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--cyan);
  border: 2px solid var(--bg-page);
}
.moment .what {
  max-width: 56ch;
  margin-left: 24px;
}
.moment h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}
.moment p {
  margin: 0;
  color: var(--text-secondary);
}
/* kto działa w tym momencie: aplikacja / Ty / AI */
.moment .role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.role-app {
  background: var(--tint);
  color: var(--violet);
}
.role-user {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--hairline-strong);
}
.moment .quote {
  display: inline-block;
  margin-top: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 11px 15px;
  font-size: 15px;
  font-weight: 600;
}
.day-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}
.day-final {
  margin-left: calc(96px + 24px + clamp(20px, 3vw, 48px));
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lift);
  max-width: 780px;
}
.day-final .value {
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.day-final p {
  color: var(--ink-muted);
  margin: 14px 0 0;
  max-width: 44ch;
}
.day-final .param-label {
  color: var(--ink-muted); /* cyjan zarezerwowany dla godzin osi i speed lines */
}

/* ============================================================
   dla kogo — wiersze, nie trzy równe kolumny
   Dominanta: właściciel sklepu (jedyny ze zdjęciem, kadr 4:5).
   Dwa pozostałe wiersze prowadzone etykietą w kolumnie 96px,
   tym samym rytmem co godziny w .timeline.
   ============================================================ */
.forwho {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--hairline-strong);
}
.forwho-lead {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 3.5vw, 48px) 0;
}
.forwho-lead .photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-panel);
  border: 1px solid var(--hairline);
  filter: saturate(0.88);
}
.forwho-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--hairline-strong);
}
.forwho-key {
  color: var(--text-muted);
  line-height: 1.35;
}
.forwho-what h3 {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.4vw, 28px);
}
.forwho-lead .forwho-what h3 {
  font-size: clamp(26px, 3vw, 34px);
}
.forwho-what ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 68ch;
}
.forwho-what li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 12px;
}
.forwho-what li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 9px;
  margin-top: 8px;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (max-width: 760px) {
  .forwho-lead,
  .forwho-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
/* kto tworzy aplikację */
.maker-band {
  margin-top: clamp(48px, 6vw, 72px);
  background: var(--tint-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.maker-band img {
  width: 84px;
  flex: 0 0 auto;
}
.maker-band p {
  margin: 0;
  max-width: 72ch;
  color: var(--text-secondary);
}
.maker-band .param-label {
  display: block;
  margin-bottom: 8px;
}

/* ============================================================
   prywatność
   ============================================================ */
.privacy-diagram {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px 0;
  align-items: center;
}
.privacy-node {
  background: var(--bg-surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  padding: 18px 22px;
  text-align: center;
}
.privacy-node .t {
  font-weight: 700;
  font-size: 17px;
}
.privacy-node .s {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.privacy-node.cloud {
  background: var(--tint-soft);
  border-style: dashed;
  grid-column: 1;
}
.privacy-arrow-h {
  position: relative;
  width: clamp(80px, 12vw, 180px);
  height: 2px;
  background: var(--violet);
  margin: 0 2px;
}
.privacy-arrow-h::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 10px;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.privacy-arrow-h .lbl {
  position: absolute;
  left: 50%;
  top: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--violet);
}
.privacy-arrow-v {
  grid-column: 1;
  justify-self: center;
  position: relative;
  width: 2px;
  height: 44px;
  background-image: linear-gradient(var(--ink-muted) 55%, transparent 45%);
  background-size: 2px 9px;
}
.privacy-arrow-v::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -4px;
  width: 10px;
  height: 8px;
  background: var(--ink-muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.privacy-arrow-v .lbl {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
/* Wiersze z numerem wiodącym w kolumnie 96px, ten sam rytm co .moment
   i .forwho-row. Poprzednio: trzy równe kolumny z paskiem-akcentem 2px,
   czyli zakazany pasek obrócony o 90 stopni. */
.privacy-points {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 3vw, 40px) 0 0;
  counter-reset: privacy;
  border-top: 1px solid var(--hairline-strong);
}
.privacy-points li {
  counter-increment: privacy;
  position: relative;
  padding: 22px 0 22px calc(96px + clamp(20px, 3vw, 48px));
  font-size: 16px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--hairline);
  max-width: 88ch;
}
.privacy-points li::before {
  content: counter(privacy, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  width: 96px;
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1.2;
}
@media (max-width: 760px) {
  .privacy-points li {
    padding-left: 0;
    padding-top: 48px;
  }
  .privacy-points li::before {
    top: 18px;
  }
}
.privacy-points strong {
  color: var(--text-primary);
}
.privacy-more {
  display: inline-block;
  margin-top: 24px;
  font-weight: 700;
}
.privacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--hairline-strong);
}
.privacy-col {
  padding: 32px clamp(20px, 3vw, 48px) 8px 0;
}
.privacy-col + .privacy-col {
  border-left: 1px solid var(--hairline-strong);
  padding-left: clamp(20px, 3vw, 48px);
  padding-right: 0;
}
.privacy-col h3 {
  margin: 0;
  font-size: 20px;
}
.privacy-col .sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.privacy-col ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  color: var(--text-secondary);
}
.privacy-col li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 12px;
  font-size: 15px;
}
.privacy-col li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 9px;
  margin-top: 7px;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.privacy-note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 72ch;
}

/* ============================================================
   porównanie (moduł adaptowany z wzorca 21st.dev: comparison table)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.compare-wrap {
  margin-top: clamp(32px, 4vw, 56px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Maska krawędzi: sygnał „tabela jedzie dalej w prawo". Statyczna,
     bo orientacja to informacja o układzie, a nie zdarzenie do animowania. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
@media (min-width: 1100px) {
  .compare-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}
.compare th,
.compare td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.compare thead th {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--hairline-strong);
  vertical-align: bottom;
}
.compare thead th .sub {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}
.compare tbody th {
  font-weight: 600;
  color: var(--text-primary);
}
.compare td {
  color: var(--text-secondary);
  /* .sr-only jest position:absolute; bez pozycjonowanego przodka uciekał
     z kontenera overflow-x i rozpychał dokument o 220px na mobile. */
  position: relative;
}
/* Kolumna Woo Ops wyróżniona tintem i nagłówkiem na ink.
   Pasek 3px z góry usunięty: reguła globalna zakazuje pasków-akcentów
   grubszych niż 1px, a obrócenie go o 90 stopni nie zmienia, czym jest. */
.compare .us {
  background: var(--tint-soft);
  color: var(--text-primary);
  font-weight: 600;
}
.compare thead .us {
  background: var(--bg-inverse);
  color: var(--surface);
  border-bottom-color: var(--bg-inverse);
  border-radius: 10px 10px 0 0;
}
.compare tbody tr:last-child .us {
  border-radius: 0 0 10px 10px;
}
/* Brak funkcji nazwany wprost. Kreska (1,59:1) była zarazem poniżej progu
   kontrastu i dwuznaczna: nie odróżniała „nie ma tej funkcji" od „brak danych".
   W domenie, w której aplikacja rusza cudze pieniądze, to zła oszczędność. */
.compare .none {
  color: var(--text-muted);
  font-weight: 500;
}
.compare-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 78ch;
}

/* ============================================================
   cennik
   ============================================================ */
.billing-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg-surface);
  margin-top: 28px;
}
.billing-toggle button {
  border: 0;
  background: transparent;
  font: 700 15px "Manrope", system-ui, sans-serif;
  color: var(--text-secondary);
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--text-on-inverse);
}
.plans {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr; /* Pro jako realna dominanta cennika */
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
  align-items: start;
}
.plan {
  border-radius: var(--r-panel);
  padding: 28px;
  border: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
}
.plan-pro {
  background: var(--bg-brand-tint);
  border-color: rgba(91, 80, 230, 0.35);
  position: relative;
  padding: 36px 32px;
  box-shadow: var(--shadow-lift); /* element celowo uniesiony (dominanta sekcji) */
}
.plan-pro .price {
  font-size: 52px;
}
.plan-agency {
  background: var(--bg-surface);
}
.plan h3 {
  margin: 0;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan .for {
  font-size: 14.5px;
  color: var(--text-muted);
  margin-top: 4px;
  min-height: 40px;
}
/* kluczowe limity planu, od razu pod ceną */
.plan .meta {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.55;
}
.plan .price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}
.plan .price {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan .per {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}
.plan .price-note {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 8px;
  min-height: 20px;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 26px;
  font-size: 16px;
  color: var(--text-secondary);
  flex: 1;
}
.plan li {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 10px;
}
.plan li::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 6px;
  margin-top: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.plan li.carry {
  color: var(--text-muted);
}
.plan li.carry::before {
  border: 0;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  transform: none;
  background: var(--text-muted);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
}
.plan .btn {
  width: 100%;
}
.pricing-fineprint {
  margin-top: 28px;
  margin-inline: auto;
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 78ch;
  text-align: center;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  max-width: none; /* pełna szerokość kontenera, jak tabela porównawcza */
}
.faq details {
  border-top: 1px solid var(--hairline-strong);
}
.faq details:last-child {
  border-bottom: 1px solid var(--hairline-strong);
}
.faq .param-label {
  display: block;
  margin: 36px 0 10px;
}
.faq .param-label:first-child {
  margin-top: 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 4px;
  font-weight: 700;
  font-size: 18px;
  min-height: 48px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--violet);
  flex: 0 0 auto;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq .answer {
  padding: 0 4px 22px;
  color: var(--text-secondary);
  max-width: 68ch;
  font-size: 17px;
}
.faq .answer p {
  margin: 0 0 10px;
}
.faq-contact {
  margin-top: 28px;
  font-size: 16px;
  color: var(--text-secondary);
}

/* ============================================================
   pobranie + footer
   ============================================================ */
/* Finałowe CTA. Świadome zerwanie z wzorcem „CTA banner" (gradient 135° +
   okrągłe orby + wycięta postać ze stocka): to najbardziej wymienny moduł,
   jaki może stać na końcu landingu SaaS. Zamiast niego płaski blok ink
   w typografii .day-final, domknięty kolumną parametrów. Klamra: hero
   otwiera trzema liczbami, ta sekcja zamyka tymi samymi trzema. */
.download {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 56px);
}
.download .heading {
  color: var(--surface);
  margin-top: 20px;
}
.download p {
  color: rgba(234, 235, 244, 0.82);
  max-width: 52ch;
}
.download a:focus-visible {
  outline-color: var(--surface);
}
.download .download-logo {
  width: 72px;
  height: auto;
  border-radius: 20px;
}

/* kolumna parametrów: ten sam rytm co .hero-params, w odbiciu na ink */
.download-spec {
  margin: 0;
  display: grid;
  gap: 22px;
  min-width: 210px;
  border-left: 1px solid rgba(252, 252, 254, 0.18);
  padding-left: clamp(24px, 3vw, 40px);
}
.download-spec dt {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(234, 235, 244, 0.66);
}
.download-spec dd {
  margin: 4px 0 0;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--surface);
}
@media (max-width: 860px) {
  .download {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-spec {
    border-left: 0;
    border-top: 1px solid rgba(252, 252, 254, 0.18);
    padding-left: 0;
    padding-top: 28px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
.download .stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 22px;
}
.store-badge {
  display: inline-block;
  border-radius: 8px;
}
.store-badge img {
  display: block;
  height: 54px;
  width: auto;
}
.store-badge-play img {
  /* oficjalny PNG Google Play ma wbudowany margines: wyrównanie optyczne */
  height: 82px;
  margin: -14px -12px;
}
.store-soon {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
}
.download .store-soon {
  color: rgba(252, 252, 254, 0.75);
}
.footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--hairline-strong);
  padding: 48px 0 56px;
  font-size: 15px;
  color: var(--text-muted);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px 40px;
  align-items: start;
}
.footer a {
  color: var(--text-secondary);
  display: inline-block;
  padding-block: 8px; /* cel dotyku dla samodzielnych linków */
}
.footer .param-label {
  margin-bottom: 6px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .soon {
  display: inline-block;
  padding-block: 8px;
  color: var(--text-muted);
}
.footer .store-badge img {
  height: 44px;
}
.footer .store-badge-play img {
  height: 67px;
  margin: -11px -10px;
}
.footer .badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.footer .legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  margin-top: 8px;
  max-width: none;
  font-size: 13.5px;
}
@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   dock CTA na mobile (21st.dev: kategoria Docks; vanilla)
   pokazuje się po przescrollowaniu hero, znika przy sekcji pobrania
   ============================================================ */
.dock-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 60;
  display: none;
  box-shadow: 0 10px 28px rgba(91, 80, 230, 0.42);
  visibility: hidden;
  opacity: 0;
  transform: translateY(90px);
}
@media (max-width: 760px) {
  .dock-cta {
    display: inline-flex;
  }
  body.dock-on .dock-cta {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   motion (klasy: navigation / inform / feedback / brand)

   PODZIAŁ ODPOWIEDZIALNOŚCI (świadomy, patrz docs/authorship-notes.md):
   · GSAP + ScrollTrigger  → wejścia i sekwencje (navigation, inform, brand)
   · CSS                   → stany dyskretne: hover, focus, press, otwarcie
   Ruch orkiestrowany i ruch stanu nie mieszają się w jednym pliku, więc
   czasy się nie rozjeżdżają.

   pełny wariant reduced-motion: brak transform, treść widoczna
   ============================================================ */

/* Blokada anty-FOUC. Zdejmuje ją main.js (natychmiast) albo timeout 1200 ms
   ze skryptu w <head>, gdyby GSAP nie wstał. Bez JS klasa .js nie powstaje,
   więc ta reguła nigdy nie łapie i strona jest czytelna zawsze.
   Ukrywamy WYŁĄCZNIE opacity: gsap.from() czyta docelową wartość z CSS,
   więc w chwili tworzenia tweenów blokady już nie może tu być. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-ready) .reveal {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* kolory .btn animują się także przy reduced-motion (patrz .btn wyżej,
     token feedback: „reduced: bez transform, zostaje zmiana koloru").
     Tutaj dokładamy wyłącznie brakującą oś: press. */
  .btn {
    transition: background-color 180ms ease, color 180ms ease,
      border-color 180ms ease, transform 140ms ease;
  }
  .btn:active {
    transform: scale(0.98);
  }
  .faq summary::after {
    transition: transform 180ms ease; /* klasa feedback */
  }
  /* hover-pill nawigacji (feedback) */
  .nav-hover-pill {
    transition: transform 220ms var(--ease-nav), width 220ms var(--ease-nav),
      opacity 180ms ease;
  }
  /* FAQ: płynne rozwijanie (navigation); starsze przeglądarki: skok jak dotąd */
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 260ms var(--ease-nav), content-visibility 260ms allow-discrete;
  }
  .faq details[open]::details-content {
    height: auto;
  }
  /* dock CTA: wjazd (navigation) */
  .dock-cta {
    transition: transform 300ms var(--ease-nav), opacity 240ms ease,
      visibility 0s linear 300ms;
  }
  body.dock-on .dock-cta {
    transition-delay: 0s;
  }
  .showcase-phone .screen {
    transform: translateY(8px);
    transition: opacity 260ms var(--ease-nav), transform 260ms var(--ease-nav),
      visibility 0s linear 260ms;
  }
  .showcase-phone .screen.active {
    transform: none;
    transition-delay: 60ms, 60ms, 0s;
  }
  /* speed lines znaku (klasa brand) przeniesione do GSAP: to jedyny ruch
     czysto brandowy na stronie i ma startować z tego samego zegara,
     co reszta wejść hero. Patrz main.js, sekcja 4c. */

  /* Pigułka w mockupie telefonu jedzie tak samo jak pigułka tabów nad nim.
     Wcześniej wybór ekranu w legendzie miał przejście, a nawigacja w telefonie
     przeskakiwała bez niego, co zaprzeczało tezie „to ta sama aplikacja". */
  .phone-nav .ind {
    transition: background-color 300ms var(--ease-nav), color 300ms var(--ease-nav);
  }
}

/* ============================================================
   otwarcia sekcji + kolor ikon mockupu
   ============================================================ */
/* Powtarzany inline style przy każdym z sześciu nagłówków sekcji
   zamieniony na klasę. */
.section-h {
  margin-top: 32px;
}
.section-intro {
  margin-top: 18px;
  color: var(--text-secondary);
}

/* Hexy wpisane wprost w atrybuty SVG omijały tokeny. Ikony przeszły na
   currentColor, a kolor niesie kontener. W mockupach telefonu celowo
   zostają surowe wartości EV2 (--ink-muted zamiast --text-muted):
   wierność aplikacji jest tam ważniejsza niż kontrast strony,
   bo to treść aria-hidden z alternatywą w aria-label. */
.phone-status {
  color: var(--ink);
}
.store-pill svg,
.phone-nav > div {
  color: var(--ink-muted);
}
.phone-nav > div.active,
.strip .mono {
  color: var(--violet);
}
/* .ops-card to gradient fioletowy: ikony na nim muszą być jasne */
.ops-card,
.mock-input .send {
  color: var(--surface);
}

/* ============================================================
   dokumenty prawne (polityka, regulamin, powierzenie)
   Ta sama typografia co reszta strony: Archivo prowadzi, Manrope czyta.
   Miara 72ch, numeracja paragrafów tabularyczna, zero ozdobników:
   dokument ma być skanowalny i możliwy do wydrukowania.
   ============================================================ */
.doc {
  padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 112px);
}
.doc-head {
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.doc-head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 14px 0 0;
  text-wrap: balance;
}
.doc-meta {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
.doc-meta strong {
  color: var(--text-secondary);
}
.doc-body {
  max-width: 72ch;
}
.doc-body h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.25;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--hairline);
}
.doc-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 0;
}
.doc-body p,
.doc-body li {
  color: var(--text-secondary);
  font-size: 17px;
}
.doc-body p {
  margin: 14px 0 0;
}
.doc-body ul,
.doc-body ol {
  margin: 14px 0 0;
  padding-left: 1.4em;
}
.doc-body li {
  margin-top: 8px;
}
.doc-body li::marker {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.doc-body strong {
  color: var(--text-primary);
}
.doc-body a {
  color: var(--text-primary);
  text-underline-offset: 3px;
}
/* wyróżnienie rzeczy, które użytkownik musi zobaczyć, nawet skanując wzrokiem */
.doc-callout {
  margin: 24px 0 0;
  padding: 20px 22px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
}
.doc-callout p:first-child {
  margin-top: 0;
}
/* tabela kategorii danych / podprzetwarzających */
.doc-table {
  width: 100%;
  margin-top: 22px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
}
.doc-table th,
.doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.doc-table thead th {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--hairline-strong);
}
.doc-table td {
  color: var(--text-secondary);
}
.doc-wrap {
  overflow-x: auto;
}
/* spis treści */
.doc-toc {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 40px;
}
.doc-toc li {
  counter-increment: toc;
  break-inside: avoid;
  margin-top: 8px;
  font-size: 15.5px;
}
.doc-toc a {
  color: var(--text-secondary);
}
.doc-toc li::before {
  content: counter(toc, decimal-leading-zero) " ";
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  color: var(--violet);
  margin-right: 8px;
}
@media (max-width: 700px) {
  .doc-toc {
    columns: 1;
  }
}

/* ============================================================
   responsywność
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid,
  .feature-grid,
  .feature-grid.flip,
  .feature-grid.lead-visual,
  .feature-grid.flip.minor {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-grid.flip .feature-copy {
    order: 0;
  }
  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }
  .privacy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .privacy-col + .privacy-col {
    border-left: 0;
    border-top: 1px solid var(--hairline-strong);
    padding-left: 0;
    margin-top: 8px;
    padding-top: 32px;
  }
  .forwho-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .day-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .day-photo {
    width: 100%;
    max-width: 440px;
  }
  .privacy-diagram {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .privacy-arrow-h {
    width: 2px;
    height: 44px;
    margin: 0 0 0 40px;
  }
  .privacy-arrow-h::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    width: 10px;
    height: 8px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .privacy-arrow-h .lbl {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
  .privacy-arrow-v {
    justify-self: start;
    margin-left: 40px;
  }
  .maker-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .phone-wrap {
    order: 2;
  }
  .phone {
    zoom: 1; /* mobile: naturalna skala mockupu */
  }
}
@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px var(--pad) 16px;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--hairline-strong);
    box-shadow: var(--shadow-lift);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    min-height: 48px;
  }
  .nav-links a.nav-cta {
    justify-content: center;
    margin: 8px 0 0;
    color: var(--text-on-brand);
  }
  .nav-burger {
    display: inline-flex;
  }
  .moment {
    grid-template-columns: 56px 1fr;
  }
  .moment::before {
    left: 66px;
  }
  .moment .hour::after {
    right: -15px;
  }
  .moment .what {
    margin-left: 8px;
  }
  .day-final {
    margin-left: 0;
  }
  .download {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-params {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hero-param {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--hairline);
    padding-block: 12px;
  }
  .hero-param:last-child {
    border-bottom: 0;
  }
  .hero-param .value,
  .hero-param:first-child .value,
  .hero-param.key .value {
    font-size: 27px;
    flex: 0 0 auto;
  }
  .hero-param .label {
    max-width: none;
    margin: 0;
  }
}