:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg2: #f3f4f6;
  --line: #e5e7eb;
  --line2: #d1d5db;
  --ink: #111827;
  --ink2: #1f2937;
  --muted: #5b6673;
  --accent: #f47a20;
  --accent-l: #ff9a3c;
  --accent-s: #d96a12;
  --accent-x: #a8500b;
  --accent-d: #c2600f;
  --ok: #16a34a;
  --ok-bg: #ecfdf3;
  --ok-t: #15803d;
  --warn: #d97706;
  --warn-t: #b45309;
  --warn-bg: #fef6e7;
  --accent-bg: #fffaf5;
  --err: #f04438;
  --err-t: #b42318;
  --err-bg: #fef3f2;

  --fd: "Fraunces", Georgia, serif;
  --fb: "Source Sans 3", system-ui, Arial, sans-serif;
  --fm: "IBM Plex Mono", Menlo, monospace;

  --maks: 1180px;
  --luz: clamp(64px, 9vw, 128px);
  --promien: 22px;
  --cien: 0 24px 60px rgba(17, 24, 39, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Nagłówek jest przyklejony na wysokości 68 px: skok do kotwicy, scrollIntoView i przewinięcie do fokusu (Tab)
   zostawiają nad celem 84 px (nagłówek + 16 px) — tytuł sekcji ani odnośnik nie parkują pod paskiem (WCAG 2.4.11). */
html { scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.przeskocz {
  position: fixed; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
}
.przeskocz:focus { left: 0; }

.obrys { max-width: var(--maks); margin: 0 auto; padding: 0 24px; }

/* ——— znak ——— */
.znak {
  font-family: var(--fd); font-weight: 700; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none; font-size: 27px; line-height: 1;
  display: inline-flex; align-items: baseline; white-space: nowrap;
}
.znak i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 7px; flex: none; }

/* ——— nawigacja ——— */
.gora {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.gora[data-przewiniete="tak"] { border-bottom-color: var(--line); }
.gora .obrys { display: flex; align-items: center; gap: 28px; height: 68px; }
.gora nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
/* „Umów rozmowę” (.przycisk) stoi w nav#menu — reguły odnośników menu go omijają. */
.gora nav a:not(.przycisk) {
  font-size: 15px; color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.gora nav a:not(.przycisk):hover, .gora nav a:not(.przycisk):focus-visible { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 860px) { .gora nav { display: none; } }

/* ——— przyciski ——— */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fb); font-size: 16px; font-weight: 600;
  padding: 14px 26px; border-radius: 12px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease;
}
.przycisk-glowny { background: var(--accent-x); color: #fff; }
.przycisk-glowny:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(168, 80, 11, 0.28); }
.przycisk-drugi { background: #fff; color: var(--ink); border-color: var(--line2); }
.przycisk-drugi:hover { border-color: var(--ink); }
.przycisk:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.przycisk[hidden] { display: none; } /* display: inline-flex wygrywał z atrybutem hidden (np. „Od początku” bez JS) */
/* Pauza ruchu (WCAG 2.2.2) pod potokiem, lejkiem i na scenie historii. Miejsce zajęte od pierwszego malowania (bez przesunięcia),
   widoczny dopiero, gdy skrypt uruchomi ruch (klasa .gotowy); przy ograniczonym ruchu w ogóle go nie ma. Etykieta stała,
   stan niesie aria-pressed (wzorzec przełącznika APG) i wygląd wciśnięty. */
.przycisk-pauza { visibility: hidden; font-size: 13px; padding: 7px 12px; border-radius: 9px; gap: 6px; margin-top: 12px; }
.przycisk-pauza.gotowy { visibility: visible; }
.przycisk-pauza[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .przycisk-pauza { display: none; } }

/* ——— nadtytuł mono ——— */
.nadtytul {
  font-family: var(--fm); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px;
}

/* ——— pasek akcentu ——— */
.rule { height: 5px; width: 84px; background: var(--accent); border-radius: 3px; margin: 28px 0; }

/* ——— hero ——— */
#hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 var(--luz); }
#hero::before {
  content: ""; position: absolute; right: -280px; top: -320px;
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 122, 32, 0.20), rgba(244, 122, 32, 0) 70%);
  pointer-events: none;
}
#hero h1 {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(40px, 5.6vw, 76px); line-height: 1.03; letter-spacing: -0.03em;
  margin: 0; color: var(--ink);
}
#hero h1 span { display: block; color: var(--accent-d); }
#hero .wstep {
  font-size: clamp(19px, 2.1vw, 25px); color: var(--muted); max-width: 40ch; margin: 0 0 34px;
}
#hero .wstep b { color: var(--ink); font-weight: 600; }
.akcje { display: flex; flex-wrap: wrap; gap: 14px; }

/* ——— film ——— */
/* position: relative — kotwica przycisku „Włącz dźwięk” (.dzwiek) na środku ramki. */
.ramka-filmu {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  overflow: hidden;
  background: var(--bg2);
}
/* Wejście z kodu QR startuje film wyciszony (przeglądarki blokują start z dźwiękiem
   bez gestu); ten przycisk włącza lektora i puszcza film od początku. */
.dzwiek {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 600 1.05rem/1 var(--fb, inherit); letter-spacing: 0.01em;
  padding: 18px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-x); color: #fff;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.35);
}
.dzwiek:hover { background: var(--accent-d); }
.dzwiek:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dzwiek[hidden] { display: none; }
.ramka-filmu video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--bg2);
}
/* Telefon obrócony poziomo: film 16:9 na całą szerokość był wyższy niż okno — dół z kontrolkami pod krawędzią.
   Wysokość do okna pod nagłówkiem (84 px) z obrysem ramki (2 px), szerokość z proporcji, ramka wyśrodkowana. */
@media (orientation: landscape) and (max-height: 520px) {
  .ramka-filmu { width: fit-content; margin-inline: auto; }
  .ramka-filmu video { max-height: calc(100svh - 86px); width: auto; max-width: 100%; }
}

/* ——— wspólny rytm sekcji ——— */
.sekcja { padding: var(--luz) 0; border-top: 1px solid var(--line); }
.sekcja-cieniowana { background: var(--bg2); }

.naglowek-sekcji { max-width: 42ch; margin: 0 0 52px; }
.naglowek-sekcji h1, .naglowek-sekcji h2 {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0; color: var(--ink);
}
.naglowek-sekcji p:not(.nadtytul) { color: var(--muted); font-size: 19px; margin: 18px 0 0; }

/* ——— karty ——— */
.karty { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* Wspólna powierzchnia kart (także karty ścieżek na /); padding i kroje — w regułach poszczególnych kart. */
.karta, .skladnik, .dane-kontakt, .sciezka-karta, .sciezka-mala {
  background: #fff; border: 1px solid var(--line); border-radius: var(--promien); box-shadow: var(--cien);
}
.karta { padding: 28px; }
.karta i { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--accent); margin-bottom: 20px; }
.karta h3 {
  font-family: var(--fd); font-weight: 600; font-size: 22px; letter-spacing: -0.015em;
  margin: 0 0 10px; color: var(--ink);
}
.karta p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* ——— lista punktów korzyści ——— */
.punkty { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
.punkt { border-top: 2px solid var(--line); padding-top: 20px; }
.punkt h3 {
  font-family: var(--fd); font-weight: 600; font-size: 21px; letter-spacing: -0.015em;
  margin: 0 0 8px; color: var(--ink);
}
.punkt p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* ——— sześć źródeł danych ——— */
.zrodla { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 44px; }
/* Sześć kafli ma leżeć 3×2 jak plansza „Źródła danych" w filmie. `auto-fit` układał
   pięć w rzędzie i jeden sierotę, więc siatka jest tu jawna, a nie wyliczana z minimum. */
@media (max-width: 720px) { .zrodla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .zrodla { grid-template-columns: 1fr; } }
.zrodlo {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  font-size: 15.5px; color: var(--ink2);
}
.zrodlo span {
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.1em;
  color: var(--accent-x); border: 1px solid var(--accent); border-radius: 6px;
  padding: 3px 7px; flex: none;
}
.zbieg {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--accent-bg); border: 2px solid var(--accent); border-radius: 18px;
  padding: 20px 26px; margin-bottom: 52px;
  font-family: var(--fd); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.02em; text-align: center;
}
.zbieg::before { content: "↓"; color: var(--accent-d); font-family: var(--fb); font-size: 26px; }

/* ——— ścieżka pisma: doręczenie → … → eskalacja ——— */
.sciezka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 52px; padding: 0; list-style: none;
}
.sciezka li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink2); white-space: nowrap;
}
.sciezka li b {
  font-weight: 500; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 13px;
}
.sciezka li:not(:last-child)::after { content: "→"; color: var(--accent-x); font-size: 15px; }
.sciezka li:last-child b { border-color: var(--warn); color: var(--warn-t); background: var(--warn-bg); }

/* ——— finał: trzy składniki → produkt ——— */
.skladniki { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 26px; }
.skladnik {
  padding: 26px; border-radius: 18px; text-align: center;
  font-family: var(--fd); font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
}
.skladnik i { display: block; width: 48px; height: 5px; border-radius: 3px; background: var(--accent); margin: 0 auto 16px; }
.produkt {
  background: var(--accent-bg); border: 2px solid var(--accent); border-radius: var(--promien);
  padding: 30px; text-align: center; box-shadow: 0 28px 70px rgba(244, 122, 32, 0.18);
  font-family: var(--fd); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em;
}
.zamkniecie { text-align: center; color: var(--muted); font-size: 19px; margin: 34px auto 0; max-width: 48ch; }

/* ——— kontakt ——— */
.kontakt-uklad { display: grid; gap: 44px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 720px) { .kontakt-uklad { grid-template-columns: 1fr; } }

.pole { margin-bottom: 20px; }
.pole label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink2); margin-bottom: 7px; }
.opcjonalnie { font-weight: 400; color: var(--muted); }
.pole input, .pole textarea {
  width: 100%; font-family: var(--fb); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line2); border-radius: 11px; padding: 13px 15px;
}
.pole input:focus-visible, .pole textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.pole textarea { min-height: 130px; resize: vertical; }
.pole .blad { color: var(--err-t); font-size: 14px; margin-top: 6px; display: block; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zgoda { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.zgoda input { margin-top: 4px; flex: none; width: 18px; height: 18px; accent-color: var(--accent-x); }
.zgoda label { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

.klauzula { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 22px; }
.klauzula a { color: var(--accent-x); }

.komunikat { border-radius: 12px; padding: 15px 18px; font-size: 15.5px; margin-bottom: 20px; }
.komunikat[data-stan="sukces"] { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok-t); }
.komunikat[data-stan="blad"] { background: var(--err-bg); border: 1px solid var(--err); color: var(--err-t); }
.komunikat[hidden] { display: none; }

.dane-kontakt { padding: 30px; }
.dane-kontakt h2 { font-family: var(--fd); font-weight: 600; font-size: 22px; margin: 0 0 14px; letter-spacing: -0.015em; }
.dane-kontakt p { color: var(--muted); font-size: 16px; margin: 0 0 12px; }
.dane-kontakt a { color: var(--accent-x); font-weight: 600; }

/* ——— stopka ——— */
.dol { border-top: 1px solid var(--line); padding: 46px 0; background: var(--bg2); }
.dol .drobne { font-size: 14px; color: var(--muted); margin: 0; }
.dol a { color: var(--muted); }

/* ——— wejścia elementów: ta sama sygnatura co wyłanianie się znaku w filmie ——— */
.wchodzi {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 620ms ease;
}
.wchodzi[data-widoczne="tak"] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .wchodzi, .wchodzi[data-widoczne="tak"] {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .przycisk:hover { transform: none; }
}

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

/* ——— strona prywatności ——— */
.dokument { max-width: 74ch; padding-block: var(--luz); }
.dokument h1 { font-family: var(--fd); font-weight: 600; font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.025em; margin: 0 0 10px; }
.dokument h2 { font-family: var(--fd); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 12px; }
.dokument p, .dokument li { color: var(--ink2); }
/* Odnośniki w treści dokumentu (/prywatnosc) jak w odpowiedziach FAQ: akcent, waga 600, podkreślenie domyślne. */
.dokument p a, .dokument li a { color: var(--accent-x); font-weight: 600; }
.dokument .aktualizacja { font-family: var(--fm); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ——— stopka w kolumnach ——— */
.dol-siatka { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .dol-siatka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .dol-siatka { grid-template-columns: 1fr; } }
.dol-marka p { font-size: 15px; color: var(--muted); margin: 14px 0 0; max-width: 34ch; }
.dol-kolumna { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.dol-kolumna a { color: var(--muted); text-decoration: none; }
.dol-kolumna a:hover, .dol-kolumna a:focus-visible { color: var(--ink); }
.dol-tytul { font-family: var(--fm); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 4px; }
.dol .akcenty { font-family: var(--fm); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 36px auto 0; }

/* ——— wspólny blok CTA ——— */
.cta h2 { font-family: var(--fd); font-weight: 600; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.025em; margin: 0 0 12px; }
.cta p:not(.nadtytul) { color: var(--muted); font-size: 19px; max-width: 48ch; margin: 0 0 26px; }
.pod-filmem { margin: 18px 0 0; font-size: 16px; }
.pod-filmem a { color: var(--accent-x); font-weight: 600; }

/* ——— menu na telefonie ——— */
.menu-przycisk {
  display: none; font: 600 15px/1 var(--fb); padding: 11px 14px; margin-left: auto;
  border: 1px solid var(--line2); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer;
}
.menu-przycisk:focus-visible { outline: 2px solid var(--accent-x); outline-offset: 2px; }
@media (max-width: 860px) {
  .menu-przycisk { display: inline-flex; }
  html[data-menu="otwarte"] { overflow: hidden; }
  /* .gora ma backdrop-filter i jest blokiem zawierającym dla potomków z pozycją fixed — dlatego panel
     jest absolute względem przyklejonego nagłówka, tuż pod nim, na resztę wysokości okna. */
  html[data-menu="otwarte"] .gora nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100dvh - 68px); margin: 0; padding: 12px 24px 40px; background: #fff;
    border-top: 1px solid var(--line); overflow: auto; z-index: 40;
  }
  html[data-menu="otwarte"] .gora nav a:not(.przycisk) {
    font-family: var(--fd); font-size: 24px; letter-spacing: -0.02em; color: var(--ink);
    padding: 16px 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  html[data-menu="otwarte"] .gora nav .przycisk { margin-top: 24px; padding: 16px 26px; font-size: 17px; }
}

/* ——— przejścia między stronami (progresywne: bez wsparcia = zwykła nawigacja) ——— */
@view-transition { navigation: auto; }
.gora .znak { view-transition-name: znak; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ——— hero w dwóch kolumnach ——— */
.hero-uklad { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-uklad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }

/* ——— potok: scena animacji w hero ——— */
/* Obszary nazwane także poniżej 720 px: bez nich trzy strefy z grid-area trafiały do jednej komórki i nachodziły na siebie. */
.potok { position: relative; display: grid; gap: 16px; grid-template-columns: 1fr; grid-template-areas: "zrodla" "kartoteka" "wyniki" "licznik"; min-height: 420px; align-content: start; }
@media (min-width: 720px) { .potok { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); grid-template-areas: "zrodla kartoteka" "wyniki wyniki" "licznik licznik"; } }
@media (min-width: 1024px) { .potok { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "zrodla kartoteka wyniki" "licznik licznik licznik"; } }
/* Głębia (6.10.2026, „wow” hero): scena lekko się kołysze w perspektywie (hero.js), plany przesuwają się za kursorem. */
.potok-kadr { perspective: 1600px; }
.potok-zrodla { grid-area: zrodla; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .potok-zrodla { grid-template-columns: 1fr; } }
/* Etykieta źródła się zawija, zamiast być uciętą w pół słowa: poniżej 720 px (trzy wąskie kolumny) kod stoi nad etykietą,
   od 720 px obok niej, a dłuższa etykieta przechodzi do drugiego wiersza. */
.potok-zrodla li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; line-height: 1.2; color: var(--ink2);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (min-width: 720px) { .potok-zrodla li { flex-direction: row; align-items: center; gap: 8px; } }
.potok-zrodla li span { font-family: var(--fm); font-size: 10px; letter-spacing: 0.08em; color: var(--accent-x); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 5px; flex: none; }
.potok-zrodla li.aktywne { border-color: var(--accent); box-shadow: 0 8px 20px rgba(244, 122, 32, 0.18); }
.potok-linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.potok-linia { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.potok-pismo {
  position: absolute; left: 0; top: 0; z-index: 2; width: 220px; opacity: 0;
  background: #fff; border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; box-shadow: var(--cien); font-size: 13px; color: var(--muted);
}
.potok-pismo b { display: block; font-family: var(--fd); font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.potok-kartoteka { grid-area: kartoteka; position: relative; z-index: 0; }
/* minmax(0, 1fr): przy 360–376 px najmniejsza szerokość kalendarza i karty zadania była większa niż kolumna — scena wystawała
   poza margines i zmieniała szerokość z każdym tytułem zadania (drobne przesunięcia kafli źródeł). */
.potok-wyniki { grid-area: wyniki; position: relative; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
@media (min-width: 1024px) { .potok-wyniki { grid-template-columns: 1fr; } }
/* ——— potok: warstwy efektów (hero.js; bez JS i przy ograniczonym ruchu zostaje stan końcowy: liczniki, osoba, poświata) ——— */
.potok-poswiata {
  position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 122, 32, 0.22), rgba(244, 122, 32, 0.07) 55%, rgba(244, 122, 32, 0) 72%);
}
.potok-zrodla, .potok-wyniki, .potok-licznik { position: relative; z-index: 1; } /* kartoteka zostaje z-index 0: linia pisma rysuje się nad nią */
.potok-slad { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; opacity: 0.22; filter: blur(4px); }
.potok-kometa { fill: #fff; stroke: var(--accent); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 6px rgba(244, 122, 32, 0.9)); }
.potok-ping, .potok-pierscien {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 3; pointer-events: none; opacity: 0;
  border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 18px rgba(244, 122, 32, 0.45);
}
.potok-iskry { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; }
.potok-iskry i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: var(--accent); box-shadow: 0 0 10px rgba(244, 122, 32, 0.8); }
.potok-iskry i:nth-child(3n) { width: 5px; height: 5px; background: #ffd2a8; }
.potok-skan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(244, 122, 32, 0) 0%, rgba(244, 122, 32, 0.10) 42%, rgba(244, 122, 32, 0.55) 50%, rgba(244, 122, 32, 0.10) 58%, rgba(244, 122, 32, 0) 100%);
}
.potok-pole { position: relative; }
.potok-pole::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent);
  opacity: 0; transition: opacity 260ms ease;
}
.potok-pole.czyta::before { opacity: 1; }
.zadanie { position: relative; padding-right: 52px; }
.zadanie-osoba {
  position: absolute; right: 10px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--fm); font-size: 11px; letter-spacing: 0.04em;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--accent);
}
.potok-licznik {
  grid-area: licznik; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .potok-licznik { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.potok-licznik li {
  display: flex; align-items: baseline; gap: 8px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.2; color: var(--muted); overflow: hidden;
}
.potok-licznik b { display: inline-block; min-width: 2.2ch; font-family: var(--fd); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.potok-licznik .potok-licznik-zero b { color: var(--accent-d); }
@media (prefers-reduced-motion: reduce) { .potok-pismo, .potok-linie, .potok-ping, .potok-pierscien, .potok-iskry, .potok-skan { display: none; } }

/* ——— ramka produktu (makieta interfejsu na danych fikcyjnych) ——— */
.ramka-produktu { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--cien); overflow: hidden; }
.ramka-pasek {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg2);
  font-family: var(--fm); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.ramka-pasek i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ramka-tresc { padding: 16px; position: relative; }
.kartoteka-sygnatura { font-family: var(--fd); font-size: 22px; letter-spacing: -0.02em; margin: 0 0 2px; color: var(--ink); }
.kartoteka-strony { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.kartoteka-pola { display: grid; gap: 10px; margin: 0; }
.kartoteka-pola div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.kartoteka-pola dt { font-family: var(--fm); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.kartoteka-pola dd { margin: 0; color: var(--ink2); }
.chip {
  display: inline-block; font-family: var(--fm); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 8px; padding: 5px 9px; border: 1px solid var(--accent); color: var(--accent-x); background: var(--accent-bg);
}
.chip-pelny { background: var(--accent-x); color: #fff; border-color: var(--accent-x); }
.wezel { position: absolute; right: 16px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; }
.wezel.pelny { background: var(--accent); }
.mini-kalendarz, .mini-zadania { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.mini-kalendarz b, .mini-zadania b { display: block; font-family: var(--fm); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
/* Kalendarz mieści się w kolumnie wyników także przy 1024–1100 px: kolumny bez minimum z treści, cyfry z line-height 1.
   Wcześniej numery dni wpisywane przez hero.js poszerzały kalendarz poza scenę (ucięty brzeg i przesunięcie przy starcie). */
.mini-kalendarz ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mini-kalendarz li { aspect-ratio: 1; line-height: 1; display: grid; place-items: center; font-size: 12px; border-radius: 6px; color: var(--ink2); background: var(--bg2); }
.mini-kalendarz li.wolny { color: var(--muted); background: transparent; }
.mini-kalendarz li.wybrany { background: var(--accent-x); color: #fff; font-weight: 600; }
.zadanie { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.zadanie-tytul { font-weight: 600; font-size: 14px; color: var(--ink); }
.zadanie-kto { font-size: 12.5px; color: var(--muted); }
.plakietka {
  position: absolute; right: 12px; bottom: 12px; opacity: 0; font-family: var(--fm); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--warn-bg); color: var(--warn-t); border: 1px solid var(--warn); border-radius: 8px; padding: 6px 9px;
}
/* Do 720 px (wyniki w dwóch wąskich kolumnach): plakietka w siatce wyników, pod kalendarzem — nie zasłania karty
   zadania (miejsce zarezerwowane). */
@media (max-width: 720px) { .potok-wyniki .plakietka { position: static; justify-self: start; } }

/* ——— strona główna: pasek zaufania, ścieżki, zajawki ——— */
.pasek-zaufania {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 auto; padding-bottom: clamp(32px, 4vw, 48px);
  font-family: var(--fm); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.pasek-zaufania span { display: inline-flex; align-items: center; gap: 10px; }
.pasek-zaufania span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.sciezki { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin-bottom: 24px; }
.sciezka-karta, .sciezka-mala { padding: 32px; }
.sciezka-karta h3, .sciezka-mala h3 { font-family: var(--fd); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 14px; }
.sciezka-karta .kto, .sciezka-mala .kto { font-family: var(--fm); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-x); margin: 0 0 14px; }
.sciezka-karta ul { margin: 0 0 24px; padding-left: 20px; color: var(--muted); }
.sciezka-karta li { margin-bottom: 8px; }
.sciezka-mala { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.sciezka-mala > div { flex: 1 1 380px; }
.sciezka-mala p:last-child { color: var(--muted); margin: 0; }
.pod-sekcja { margin: 28px 0 0; font-size: 17px; }
.pod-sekcja a { color: var(--accent-x); font-weight: 600; }
.zajawka .punkty { margin-top: 8px; }
.punkty-pod-kartami { margin-top: 40px; }

/* ——— karty: uniesienie i cień przy hover (spec §7.6) ——— */
.karta, .sciezka-karta, .zasada { transition: transform 200ms ease, box-shadow 200ms ease; }
.karta:hover, .sciezka-karta:hover, .zasada:hover { transform: translateY(-2px); box-shadow: 0 28px 64px rgba(17, 24, 39, 0.16); }
@media (prefers-reduced-motion: reduce) { .karta:hover, .sciezka-karta:hover, .zasada:hover { transform: none; } }
/* Hover wyżej ma tę samą specyficzność co .wchodzi (main.js) i stoi po niej, więc bez tej reguły nadpisywałby przejście wejścia karty. */
@media (prefers-reduced-motion: no-preference) { .karta.wchodzi, .sciezka-karta.wchodzi, .zasada.wchodzi { transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 620ms ease, box-shadow 200ms ease; } }
/* Po wejściu (klasa .weszla z main.js po transitionend wejścia) uniesienie i powrót przy najechaniu w 200 ms jak bez .wchodzi
   (620 ms przejścia wejścia było ociężałe). Nie na samym [data-widoczne] — to ono włącza przejście wejścia, które ma trwać 620 ms. */
@media (prefers-reduced-motion: no-preference) { .karta.wchodzi.weszla, .sciezka-karta.wchodzi.weszla, .zasada.wchodzi.weszla { transition: transform 200ms ease, box-shadow 200ms ease; } }

/* ——— /film: odtwarzacz rozdziałów ——— */
.film-uklad { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .film-uklad { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.ramka-filmu video[hidden] { display: none; }
.film-teraz { display: flex; gap: 12px; align-items: baseline; margin: 0; padding: 12px 20px 14px; font-family: var(--fd); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.rozdzialy ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.rozdzialy a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: #fff;
  transition: border-color 200ms ease, background 200ms ease;
}
.rozdzialy a:hover, .rozdzialy a:focus-visible { border-color: var(--accent); }
.rozdzialy a[aria-current="true"] { border-color: var(--accent); background: var(--accent-bg); }
.rozdzial-numer { font-family: var(--fm); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; color: var(--accent-x); }
.rozdzial-tytul { font-weight: 600; font-size: 15.5px; }
.rozdzial-czas { font-family: var(--fm); font-size: 12px; color: var(--muted); }

/* ——— hero stron wewnętrznych ——— */
.hero-strony { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 48px); }
.hero-strony h1 { font-family: var(--fd); font-weight: 600; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 20px; max-width: 20ch; }
.hero-strony .wstep { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 62ch; margin: 0; }
.hero-strony .wstep b { color: var(--ink); font-weight: 600; }

/* ——— historia: przyklejona scena + kroki ——— */
.historia-uklad { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.scena { position: sticky; top: 92px; aspect-ratio: 16 / 10; align-self: start; }
.scena figure {
  position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(16px); filter: blur(8px); pointer-events: none;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1), filter 300ms ease;
}
.scena figure.aktywna { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.scena .klip, .klip-obok .klip { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--cien); background: var(--bg2); }
.scena .makieta { height: 100%; overflow: hidden; }
/* Przycisk pauzy na scenie (poza figurami z aria-hidden): w rogu, nad klipem — jedzie razem z przyklejoną sceną. */
.scena .przycisk-pauza { position: absolute; right: 12px; bottom: 12px; z-index: 2; margin: 0; }
.kroki { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 28px; }
.historia-pasek { display: block; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.historia-pasek i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0.08); transition: transform 400ms ease; }
.krok { position: relative; padding: 4px 0; }
.krok::before { content: ""; position: absolute; left: -27px; top: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line2); background: var(--bg); transition: border-color 200ms, background 200ms; }
.krok[aria-current="step"]::before { border-color: var(--accent); background: var(--accent); }
.krok-godzina { font-family: var(--fm); font-size: 12px; letter-spacing: 0.12em; color: var(--accent-x); }
.krok h3 { font-family: var(--fd); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 4px 0 8px; }
.krok p { margin: 0; color: var(--muted); }
.krok-film { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--accent-x); }
.makieta-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.makieta-tabela th { font-family: var(--fm); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 8px 8px 0; border-bottom: 1px solid var(--line); }
.makieta-tabela td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; }
.chip-ok { border-color: var(--ok); color: var(--ok-t); background: var(--ok-bg); }
.chip-uwaga { border-color: var(--warn); color: var(--warn-t); background: var(--warn-bg); }
.z-klipem { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .z-klipem { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.klip-obok { position: sticky; top: 92px; }
.klip-obok .klip { aspect-ratio: 16 / 9; height: auto; }
.klip-obok .krok-film { margin-top: 12px; }
/* Pauza klipu obok treści: w wierszu odnośnika „Obejrzyj z lektorem”, pod klipem (bez przesunięcia treści obok). */
.klip-obok .przycisk-pauza { margin-left: 16px; }
/* Do 1024 px scena 4:3 i zwarta typografia makiet: treść mieści się w scenie bez ucinania (sprawdzone 360–1280 px).
   Klip 16:9 mieści się w ramce 4:3 w całości (contain; pasy wypełnia tło --bg2) — cover ucinał znak w rogu i kartę plakatu. */
@media (max-width: 1024px) {
  .scena { aspect-ratio: 4 / 3; }
  .scena .klip { object-fit: contain; }
  .scena .makieta { line-height: 1.4; }
  .scena .ramka-tresc { padding: 12px; }
  .scena .kartoteka-sygnatura { font-size: 18px; }
  .scena .kartoteka-strony { margin-bottom: 8px; }
  .scena .kartoteka-pola { gap: 6px; }
  .scena .kartoteka-pola div { grid-template-columns: 72px minmax(0, 1fr); gap: 6px; font-size: 12.5px; }
  .scena .makieta-tabela { font-size: 12px; }
  .scena .makieta-tabela td { padding: 7px 6px 7px 0; }
}
@media (max-width: 860px) {
  .historia-uklad { display: block; }
  /* Tło: kroki przewijają się pod sceną i nie mogą prześwitywać przez figury w przejściu ani w zaokrąglonych rogach.
     Limit wysokości: przyklejona scena zostawia pod sobą na kroki co najmniej 160 px okna (np. 683×657, 860×600);
     przez aspect-ratio zwęża się też szerokość, więc scena stoi pośrodku. */
  .scena { top: 68px; z-index: 5; margin-bottom: 24px; background: var(--bg); max-height: calc(100svh - 68px - 160px); margin-inline: auto; }
  /* Zwężona scena nie może odsłaniać po bokach kroków, które przewijają się pod nią: pas tła na całą szerokość okna
     w wysokości sceny. Cień nie wpływa na układ ani nie daje przewijania w poziomie; cienie figur zostają. */
  .scena::before { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
  /* Historia w sekcji zacienionej (/windykacja, tło --bg2): tło sceny i pas w kolorze sekcji, nie białe. */
  .sekcja-cieniowana .scena { background: var(--bg2); }
  .sekcja-cieniowana .scena::before { box-shadow: 0 0 0 100vmax var(--bg2); }
  /* Fokus pod przyklejoną sceną (WCAG 2.4.11): gdy przeglądarka przewija do odnośnika kroku, zostawia nad nim wysokość sceny
     (4:3 z szerokości treści albo limit wysokości) — do tego 84 px scroll-padding (nagłówek + 16 px). Odnośnik, który jest
     w oknie, ale pod sceną, przewija historia() w ruch.js (focusin): przeglądarka takiego nie rusza. */
  .historia .kroki a { scroll-margin-top: min((100vw - 48px) * 0.75, 100svh - 228px); }
  .kroki { gap: 24px; }
  .klip-obok { position: static; }
}
/* Niskie okno (telefon poziomo): przyklejona scena zasłaniałaby wszystkie kroki — stoi nad nimi i mieści się w oknie.
   Zostaje pozycjonowana, bo figury mają position: absolute. Scena jest tu niska (ok. 200 px), więc makiety dostają zwarty
   zestaw z bloku 440 px (lista zapytań niżej) i ciaśniejsze odstępy. */
@media (max-width: 860px) and (max-height: 520px) {
  .scena { position: relative; top: auto; aspect-ratio: 16 / 9; max-height: 55vh; margin-bottom: 16px; }
  .historia .kroki a { scroll-margin-top: 0; }
  .scena .ramka-tresc { padding: 8px 12px; }
  .scena .kartoteka-strony { margin-bottom: 4px; }
  .scena .kartoteka-pola { gap: 4px; }
}
@media (max-width: 720px) {
  .sciezka { flex-direction: column; align-items: flex-start; }
  .sciezka li:not(:last-child)::after { content: "↓"; }
}
@media (max-width: 440px), (max-width: 860px) and (max-height: 520px) {
  .scena .makieta { line-height: 1.3; }
  .scena .ramka-pasek { padding: 7px 12px; }
  .scena .kartoteka-sygnatura { font-size: 16px; }
  .scena .kartoteka-pola div { grid-template-columns: 64px minmax(0, 1fr); font-size: 12px; }
  .makieta-tabela .kolumna-opcjonalna { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scena figure, .historia-pasek i { transition: none; } }

/* ——— lejek: droga sprawy (SMIL) ——— */
.lejek { margin: 0; }
.lejek svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Przełączniki widoku z przedrostkiem .lejek (0,2,0): gołe klasy (0,1,0) przegrywały z .lejek svg (0,1,1) i widać było oba SVG. */
.lejek .lejek-pionowy { display: none; max-width: 320px; }
.lejek-tor { fill: none; stroke: var(--line2); stroke-width: 2; }
.lejek-wezel circle { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.lejek-wezel text { font-family: var(--fb); font-size: 15px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.lejek-pionowy .lejek-wezel text { text-anchor: start; }
.lejek-wezel text.lejek-chip { font-family: var(--fm); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.lejek-wezel text.lejek-chip.samo { fill: var(--accent-x); }
.lejek-wezel text.lejek-chip.decyzja { fill: var(--muted); }
.lejek-kropki circle, .lejek-kropki-statyczne circle { fill: var(--accent); }
.lejek-kropki-statyczne { display: none; }
/* Tekst SVG skaluje się z szerokością (viewBox 1000): do 1024 i do 860 px poziomy lejek dostaje większe kroje, żeby od 721 px chipy
   nie spadały poniżej ok. 11 px. Selektor chipów (0,3,1) musi przebić regułę etykiet (0,2,1), która stoi po bazowej regule chipów. */
@media (max-width: 1024px) { .lejek-poziomy .lejek-wezel text { font-size: 17px; } .lejek-poziomy .lejek-wezel text.lejek-chip { font-size: 13.5px; } }
@media (max-width: 860px) { .lejek-poziomy .lejek-wezel text { font-size: 19px; } .lejek-poziomy .lejek-wezel text.lejek-chip { font-size: 16px; } }
@media (max-width: 720px) { .lejek .lejek-poziomy { display: none; } .lejek .lejek-pionowy { display: block; } }
@media (prefers-reduced-motion: reduce) { .lejek-kropki { display: none; } .lejek-kropki-statyczne { display: block; } }

/* ——— pytania (details/summary) ——— */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; }
.faq details[open] { border-color: var(--accent); }
.faq summary { cursor: pointer; padding: 18px 0; font-family: var(--fd); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
/* Znak „+”/„–” z pustym tekstem alternatywnym: nie wchodzi do nazwy pytania; pierwsza deklaracja dla przeglądarek bez tej składni. */
.faq summary::after { content: "+"; content: "+" / ""; color: var(--accent-x); font-family: var(--fb); font-weight: 400; font-size: 26px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; content: "–" / ""; }
.faq summary:focus-visible { outline: 2px solid var(--accent-x); outline-offset: 4px; border-radius: 8px; }
.faq details p { margin: 0 0 20px; color: var(--muted); }
/* Odnośniki w treści odpowiedzi jak .dane-kontakt a i .pod-sekcja a: podkreślenie domyślne, fokus z globalnego :focus-visible. */
.faq details p a { color: var(--accent-x); font-weight: 600; }

/* ——— zasady ——— */
.zasady { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zasada { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.zasada > span { font-family: var(--fm); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-x); }
.zasada h3 { font-family: var(--fd); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; margin: 8px 0 8px; }
.zasada p { margin: 0; color: var(--muted); font-size: 15.5px; }
/* 3 + 2 z wyśrodkowanym drugim rzędem (sześć ścieżek, karta na dwie): auto-fit dawał 4 + 1 od 1142 px, a pięciu kolumn nie mieści karta
   „Bezpieczeństwo od pierwszego dnia” (minimum 204,7 px). Do 860 px 2 + 2 + 1 z piątą na całą szerokość, poniżej 586 px jedna kolumna. */
.zasada { grid-column: span 2; }
.zasada:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 860px) {
  .zasady { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .zasada, .zasada:nth-child(4) { grid-column: auto; }
  .zasada:last-child { grid-column: 1 / -1; }
}

/* ——— oś etapów: animacja wyłącznie CSS, wyzwalana data-widoczne (sygnatura wejścia) ——— */
/* min-content zamiast 0: kolumna nie schodzi poniżej najdłuższego słowa (przy 1025 px „Przygotowanie” wystawało o 6,6 px). */
.os { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(7, minmax(min-content, 1fr)); gap: 16px; }
/* Bez JS (i przy ograniczonym ruchu) oś jest w stanie końcowym: linia pełna, węzły wypełnione. Stan początkowy wejścia
   tylko z klasą .wchodzi, którą daje main.js. */
.os-linia { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--accent); transform-origin: left; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.os.wchodzi .os-linia { transform: scaleX(0); }
.os.wchodzi[data-widoczne="tak"] .os-linia { transform: scaleX(1); }
.os-etap { position: relative; padding-top: 34px; }
.os-wezel { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent); transition: background 250ms ease; }
.os.wchodzi .os-wezel { background: #fff; }
.os.wchodzi[data-widoczne="tak"] .os-wezel { background: var(--accent); }
.os-etap:nth-child(2) .os-wezel { transition-delay: 150ms; }
.os-etap:nth-child(3) .os-wezel { transition-delay: 300ms; }
.os-etap:nth-child(4) .os-wezel { transition-delay: 450ms; }
.os-etap:nth-child(5) .os-wezel { transition-delay: 600ms; }
.os-etap:nth-child(6) .os-wezel { transition-delay: 750ms; }
.os-etap:nth-child(7) .os-wezel { transition-delay: 900ms; }
.os-etap:nth-child(8) .os-wezel { transition-delay: 1050ms; }
.os-etap h3 { font-family: var(--fd); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin: 0 0 4px; }
.os-czas { font-family: var(--fm); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-x); margin: 0 0 8px; }
/* Liczba z jednostką w jednym wierszu: przy 1027–1074 px „3–4” łamało się po półpauzie (text-wrap: balance przenosiło łamanie na 769–909 px). */
.os-czas span { white-space: nowrap; }
.os-etap p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 1024px) { .os { grid-template-columns: repeat(4, minmax(0, 1fr)); } .os-linia { display: none; } }
@media (max-width: 720px) {
  .os { grid-template-columns: 1fr; gap: 22px; padding-left: 34px; }
  .os-linia { display: block; left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .os.wchodzi .os-linia { transform: scaleY(0); }
  .os.wchodzi[data-widoczne="tak"] .os-linia { transform: scaleY(1); }
  .os-etap { padding-top: 0; }
  .os-wezel { left: -34px; top: 2px; }
  /* Pionowa oś jest wyższa niż okno: węzeł wypełnia wejście jego etapu (main.js oznacza każdy .os-etap), nie wejście całej osi. */
  .os.wchodzi[data-widoczne="tak"] .os-wezel { background: #fff; }
  .os.wchodzi .os-etap[data-widoczne="tak"] .os-wezel { background: var(--accent); transition-delay: 200ms; }
}
@media (prefers-reduced-motion: reduce) { .os-linia, .os-wezel { transition: none; } .os-linia { transform: none; } .os-wezel { background: var(--accent); } }

/* ——— customizacja i filary na /: cztery karty 4 / 2 + 2 / 1 (auto-fit z .karty dawał 3 + 1 przy 808–1067 px) ——— */
.karty.custom, #filary .karty { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .karty.custom, #filary .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .karty.custom, #filary .karty { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } }


/* ——— zajawka animacji na `/` (statyczny kadr; animacja i jej ciemne tokeny tylko na /jak-to-dziala) ——— */
.zajawka-animacji-uklad { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .zajawka-animacji-uklad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.zajawka-animacji .naglowek-sekcji { margin-bottom: 0; }
.zajawka-animacji-kadr { display: block; border-radius: var(--promien); overflow: hidden; box-shadow: var(--cien); }
.zajawka-animacji-kadr img { display: block; width: 100%; height: auto; }

/* ——— ANIMACJA „Od pierwszego kontaktu do sądu” (/jak-to-dziala, styl B „Nocna zmiana”) ———
   ⚑ ZMIANA SPECU §6.1 (6.10.2026, decyzja Marcina TG 1561): ciemne tokeny --n-* istnieją WYŁĄCZNIE w zakresie [data-animacja]
   (sekcja na /jak-to-dziala). :root (22 tokeny) bez zmian; test/animacja.test.mjs pilnuje, że --n-* nie wychodzą poza zakres,
   a reguły tej części dotyczą tylko klas animacji. W jednym arkuszu z resztą serwisu, bo osobny arkusz był dodatkowym
   zasobem blokującym renderowanie (Lighthouse: ok. 0,5 s do LCP) — zamiast tego ok. 2 kB gzip w styles.css.
   Ruch tylko transform / opacity / filter / stroke-dashoffset (spec §6.4). Stan z HTML+CSS = stan końcowy scen;
   prefers-reduced-motion i brak JS (css/animacja-bez-js.css) = statyczna sekwencja 7 kadrów. */
[data-animacja] {
  --n-tlo: #0b0f17;
  --n-tlo2: #121826;
  --n-tlo3: #1a2233;
  --n-tekst: #e8eaee;
  --n-szary: #9aa3af;
  --n-szklo: rgba(255, 255, 255, 0.06);
  --n-szklo2: rgba(255, 255, 255, 0.1);
  --n-brzeg: rgba(255, 255, 255, 0.14);
  --n-blask: rgba(244, 122, 32, 0.55);
  --n-ok: #4ade80;
  --n-uwaga: #fbbf24;
  --n-proporcja: 16 / 9;
}

.animacja-sekcja {
  background: radial-gradient(70% 50% at 50% 0%, #22160d 0%, var(--n-tlo) 70%), var(--n-tlo);
  color: var(--n-tekst); padding: var(--luz) 0 calc(var(--luz) * 0.8);
}
.animacja-sekcja .nadtytul { color: var(--n-szary); }
/* Nagłówek strony bez wejścia z main.js (.naglowek-sekcji przygasa 620 ms — tu to H1 i LCP strony, jak .hero-strony na podstronach). */
.anim-naglowek { max-width: 48ch; margin: 0 0 40px; }
.anim-naglowek h1, .anim-naglowek h2 {
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0; color: #fff;
}
.anim-naglowek .wstep { margin: 18px 0 0; }
.animacja-sekcja .wstep { color: var(--n-szary); font-size: 18px; }
.pod-animacja { margin: 18px 0 0; color: var(--n-szary); font-size: 14px; }
.pod-animacja a { color: var(--accent-l); }

/* ——— scena i ujęcia ——— */
.anim-scena {
  position: relative; aspect-ratio: var(--n-proporcja); border-radius: var(--promien); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 80% at 50% 58%, #2a1a0e 0%, var(--n-tlo2) 48%, var(--n-tlo) 100%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--n-brzeg);
}
.anim-poswiata {
  position: absolute; left: 50%; top: 58%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255, 154, 60, 0.32) 0%, rgba(255, 154, 60, 0) 65%); pointer-events: none;
}
.anim-ujecia { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 1; }
.ujecie { position: absolute; inset: 0; container-type: inline-size; }
.anim:not(.anim-gotowa) .ujecie:not(.u1) { visibility: hidden; }

.a-napis { position: absolute; left: 5%; top: 7%; width: 46%; z-index: 4; }
.a-nr { margin: 0 0 0.9cqi; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.05cqi); letter-spacing: 0.14em; color: var(--n-szary); }
.a-tytul { margin: 0; font-family: var(--fd); font-weight: 600; font-size: 3.4cqi; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.a-pod { margin: 1cqi 0 0; font-size: max(14px, 1.55cqi); color: var(--n-szary); }
.a-pod b { color: var(--accent-l); font-weight: 600; }
.a-plac { position: absolute; inset: 0; z-index: 2; }
.a-plac > * { position: absolute; }

.a-mono { display: block; margin: 0 0 0.5cqi; font-family: var(--fm); font-size: max(10px, 0.95cqi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-szary); }
.a-chip { display: inline-block; font-family: var(--fm); font-size: max(10px, 0.95cqi); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 0.7cqi; padding: 0.45cqi 0.8cqi; border: 1px solid var(--n-brzeg); color: var(--n-szary); white-space: nowrap; }
.a-chip-pelny { background: var(--accent); border-color: var(--accent); color: var(--n-tlo); }
.a-chip-ok { border-color: rgba(74, 222, 128, 0.5); color: var(--n-ok); }
.a-chip-uwaga { border-color: rgba(251, 191, 36, 0.55); color: var(--n-uwaga); }
.a-szklo, .a-karta, .a-pismo, .a-kartoteka, .a-kalendarz, .a-zadanie, .a-wniosek, .a-sad, .a-raport, .a-kolejka li, .a-mini-pismo {
  background: var(--n-szklo); border: 1px solid var(--n-brzeg); border-radius: 1.4cqi;
  box-shadow: 0 2.6cqi 7cqi rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.a-pasek { display: flex; align-items: center; gap: 0.7cqi; margin: -1.4cqi -1.6cqi 1.2cqi; padding: 0.9cqi 1.3cqi; border-bottom: 1px solid var(--n-brzeg); font-family: var(--fm); font-size: max(10px, 0.95cqi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-szary); background: rgba(255, 255, 255, 0.03); border-radius: 1.4cqi 1.4cqi 0 0; }
.a-kropka { width: 0.75cqi; height: 0.75cqi; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* rdzeń „Wasza instalacja” */
.a-rdzen { width: 9cqi; aspect-ratio: 1; }
.a-rdzen-kula { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--accent-l) 24%, var(--accent) 52%, rgba(244, 122, 32, 0) 72%); box-shadow: 0 0 9cqi 3cqi var(--n-blask); }
.a-pierscien { position: absolute; inset: -40%; border-radius: 50%; border: 1px solid rgba(244, 122, 32, 0.35); }
.a-pierscien-2 { inset: -90%; border-color: rgba(244, 122, 32, 0.16); }

/* ——— 1 · Poniedziałek, 8:00 ——— */
.a-zegar { position: absolute; right: 3%; top: 2%; margin: 0; z-index: 1; font-family: var(--fd); font-weight: 600; font-size: 21cqi; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09); }
.a-karta { width: 23%; padding: 1.4cqi 1.5cqi; }
.a-karta-tresc { margin: 0; font-size: max(13px, 1.35cqi); line-height: 1.35; color: var(--n-tekst); }
.a-ikona { width: 2.2cqi; height: 2.2cqi; min-width: 18px; min-height: 18px; margin-bottom: 0.8cqi; fill: none; stroke: var(--accent-l); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-karta-mail { left: 6%; top: 46%; rotate: -6deg; }
.a-karta-telefon { left: 29%; top: 63%; rotate: 4deg; }
.a-karta-skan { left: 51%; top: 42%; rotate: -3deg; }
.a-karta-edor { left: 71%; top: 60%; rotate: 5deg; border-color: rgba(244, 122, 32, 0.6); box-shadow: 0 2.6cqi 7cqi rgba(0, 0, 0, 0.5), 0 0 3cqi rgba(244, 122, 32, 0.35); }
.a-fala { position: absolute; right: 1.2cqi; top: 1.2cqi; width: 1.6cqi; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent-l); opacity: 0.7; }

/* ——— 2 · Jedno wejście ——— */
.u2 .a-rdzen { left: 46%; top: 50%; translate: -50% -50%; width: 11cqi; }
.a-rdzen-podpis { left: 46%; top: 70%; translate: -50% 0; margin: 0; font-family: var(--fm); font-size: max(11px, 1.05cqi); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-l); white-space: nowrap; }
.a-kolejka { right: 5%; top: 24%; width: 28%; margin: 0; padding: 0; list-style: none; display: grid; gap: 1cqi; }
.a-kolejka li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2cqi 1cqi; padding: 1cqi 1.3cqi; font-size: max(13px, 1.3cqi); }
.a-kolejka .a-mono { grid-column: 1 / -1; margin: 0; }

/* ——— 3 · Odczyt pisma ——— */
.a-pismo { left: 5%; top: 33%; width: 47%; padding: 1.6cqi 1.8cqi; overflow: hidden; }
.a-pismo-tytul, .a-kartoteka-tytul { margin: 0 0 0.9cqi; font-family: var(--fd); font-weight: 600; font-size: max(17px, 2cqi); line-height: 1.15; color: #fff; }
.a-pismo-tresc { margin: 0; font-size: max(13px, 1.4cqi); line-height: 1.55; color: var(--n-tekst); }
.a-mark { position: relative; white-space: nowrap; color: #fff; }
.a-mark i { position: absolute; left: -0.2em; right: -0.2em; bottom: 0.05em; height: 0.55em; z-index: -1; border-radius: 3px; background: rgba(244, 122, 32, 0.45); box-shadow: 0 0 12px rgba(255, 154, 60, 0.45); transform-origin: 0 50%; }
.a-skan { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(180deg, rgba(255, 154, 60, 0) 0%, rgba(255, 154, 60, 0.22) 80%, rgba(255, 154, 60, 0.7) 100%); opacity: 0; pointer-events: none; }
.a-etykiety { left: 56%; top: 36%; width: 20%; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.4cqi; }
.a-etykiety .a-mono { margin-bottom: 0.4cqi; }
.u3 .a-rdzen-maly { right: 9%; top: 52%; width: 7cqi; }

/* ——— 4 · Kartoteka ——— */
.a-mini-pismo { left: 5%; top: 40%; width: 13%; padding: 1cqi; display: grid; gap: 0.6cqi; rotate: -4deg; }
.a-mini-pismo .a-mono { font-size: max(9px, 0.8cqi); margin: 0; }
.a-mini-pismo span { display: block; height: 0.5cqi; min-height: 4px; border-radius: 2px; background: var(--n-szklo2); }
.a-mini-pismo span:nth-child(2) { background: rgba(244, 122, 32, 0.5); width: 70%; }
.a-tory { inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.a-tor { fill: none; stroke: var(--accent-l); stroke-width: 2; stroke-linecap: round; opacity: 0.55; filter: drop-shadow(0 0 4px #ff9a3c); vector-effect: non-scaling-stroke; }
.a-kartoteka { left: 56%; top: 20%; width: 39%; padding: 1.4cqi 1.6cqi; box-shadow: 0 2.6cqi 7cqi rgba(0, 0, 0, 0.5), 0 0 5cqi rgba(244, 122, 32, 0.18); }
.a-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqi 1.4cqi; margin: 0 0 1.2cqi; }
.a-pola dt { font-family: var(--fm); font-size: max(10px, 0.9cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-szary); }
.a-pola dd { margin: 0.2cqi 0 0; font-weight: 600; font-size: max(13px, 1.35cqi); color: #fff; }
.a-historia { margin: 0; padding: 1cqi 0 0; list-style: none; border-top: 1px solid var(--n-brzeg); display: grid; gap: 0.6cqi; font-size: max(12px, 1.15cqi); color: var(--n-tekst); }
.a-historia .a-mono { display: inline; margin-right: 0.8cqi; color: var(--accent-l); }

/* ——— 5 · Termin i zadanie ——— */
.a-kalendarz { left: 5%; top: 36%; width: 44%; padding: 1.4cqi 1.6cqi; }
.a-dni { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7cqi; }
.a-dni li { position: relative; display: grid; place-items: center; aspect-ratio: 1.25; border-radius: 0.8cqi; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--fm); font-size: max(12px, 1.3cqi); color: var(--n-szary); }
.a-dni .a-dzien-termin { color: #fff; border-color: var(--accent); background: rgba(244, 122, 32, 0.18); box-shadow: 0 0 2.4cqi rgba(244, 122, 32, 0.45); }
.a-dzien-termin .a-chip { position: absolute; left: 50%; top: -1.6cqi; translate: -50% 0; font-size: max(9px, 0.8cqi); padding: 0.25cqi 0.6cqi; }
.a-zadania { left: 55%; top: 30%; width: 40%; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.2cqi; }
.a-zadanie { display: grid; gap: 0.3cqi; padding: 1.2cqi 1.4cqi; font-size: max(13px, 1.3cqi); color: var(--n-tekst); }
.a-zadanie b { font-size: max(15px, 1.6cqi); color: #fff; font-weight: 600; }
.a-zadanie .a-chip { justify-self: start; margin-top: 0.5cqi; }

/* ——— 6 · Do e-Sądu ——— */
.a-wniosek { left: 7%; top: 31%; width: 34%; padding: 1.4cqi 1.6cqi; }
.a-bloki { margin: 0 0 1.2cqi; padding: 0; list-style: none; display: grid; gap: 0.6cqi; }
.a-bloki li { padding: 0.8cqi 1cqi; border-radius: 0.8cqi; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--n-brzeg); font-size: max(13px, 1.3cqi); color: var(--n-tekst); }
.a-pieczec { display: inline-block; margin: 0 1cqi 0 0; padding: 0.5cqi 1cqi; border: 2px solid var(--n-ok); border-radius: 0.6cqi; font-family: var(--fm); font-size: max(10px, 0.95cqi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-ok); rotate: -4deg; }
.a-wyslij { display: inline-block; margin: 0; padding: 0.8cqi 1.4cqi; border-radius: 0.8cqi; background: var(--accent); color: var(--n-tlo); font-weight: 600; font-size: max(13px, 1.3cqi); box-shadow: 0 0 3cqi rgba(244, 122, 32, 0.5); }
.a-impuls { inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.a-impuls-tor { fill: none; stroke: var(--accent-l); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff9a3c); vector-effect: non-scaling-stroke; }
.a-sad { left: 67%; top: 30%; width: 25%; padding: 1.6cqi; text-align: center; box-shadow: 0 2.6cqi 7cqi rgba(0, 0, 0, 0.5), 0 0 5cqi rgba(74, 222, 128, 0.12); }
.a-sad-ikona { width: 5cqi; height: 5cqi; min-width: 40px; min-height: 40px; fill: none; stroke: var(--n-tekst); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.a-sygn { margin: 0 0 1cqi; font-family: var(--fm); font-size: max(12px, 1.2cqi); color: #fff; }
.a-statusy { display: flex; justify-content: center; gap: 0.6cqi; flex-wrap: wrap; margin: 0; }

/* ——— 7 · Raport i domknięcie ——— */
.a-raport { left: 5%; top: 31%; width: 40%; padding: 1.4cqi 1.6cqi; }
.a-kafle { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqi; }
.a-kafle li { padding: 1.1cqi 1.2cqi; border-radius: 1cqi; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--n-brzeg); font-size: max(12px, 1.15cqi); color: var(--n-szary); }
.a-kafle b { display: block; font-family: var(--fd); font-size: max(22px, 3cqi); line-height: 1; color: #fff; margin-bottom: 0.4cqi; }
.a-droga { left: 50%; top: 33%; width: 45%; padding: 2cqi 1.6cqi 1.6cqi; border: 1px dashed rgba(244, 122, 32, 0.45); border-radius: 1.6cqi; }
.a-droga-rama { position: absolute; left: 1.6cqi; top: -1cqi; margin: 0; padding: 0 0.6cqi; background: var(--n-tlo2); color: var(--accent-l); }
.a-droga-linia { position: absolute; left: 4%; right: 4%; top: 2.9cqi; width: 92%; height: 1.2cqi; overflow: visible; }
.a-droga-linia path { fill: none; stroke: var(--accent-l); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff9a3c); vector-effect: non-scaling-stroke; }
.a-droga-punkty { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4cqi; font-family: var(--fm); font-size: max(9px, 0.85cqi); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-szary); text-align: center; }
.a-droga-punkty li::before { content: ""; display: block; width: 1.6cqi; height: 1.6cqi; min-width: 12px; min-height: 12px; margin: 0 auto 0.8cqi; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.6cqi var(--accent); }
.a-marka { left: 50%; top: 62%; width: 46%; margin: 0; font-family: var(--fd); font-weight: 600; font-size: max(18px, 2.05cqi); line-height: 1.15; color: #fff; }
.a-znak { display: block; margin-bottom: 0.6cqi; font-size: max(28px, 3.6cqi); letter-spacing: -0.035em; color: var(--accent-l); text-shadow: 0 0 3cqi rgba(244, 122, 32, 0.5); }

/* ——— sterowanie ——— */
.anim-sterowanie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.anim-sterowanie .przycisk-pauza { margin-top: 0; }
.animacja-sekcja .przycisk-drugi { background: transparent; color: var(--n-tekst); border-color: var(--n-brzeg); }
.animacja-sekcja .przycisk-pauza[aria-pressed="true"] { background: var(--n-tekst); color: var(--n-tlo); border-color: var(--n-tekst); }
.anim-od-nowa { visibility: hidden; font-size: 13px; padding: 7px 12px; border-radius: 9px; }
.anim-gotowa .anim-od-nowa { visibility: visible; }
.anim-kropki { display: flex; gap: 6px; visibility: hidden; }
.anim-gotowa .anim-kropki { visibility: visible; }
.anim-kropki button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.anim-kropki button::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--n-brzeg); transition: background 200ms; }
.anim-kropki button[aria-current="step"]::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.anim-kropki button:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px; }
.anim-postep { flex: 1 1 120px; height: 3px; border-radius: 2px; background: var(--n-brzeg); overflow: hidden; visibility: hidden; }
.anim-gotowa .anim-postep { visibility: visible; }
.anim-postep i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ——— średnie okno: scena 4:3 ——— */
@media (max-width: 860px) {
  [data-animacja] { --n-proporcja: 4 / 3; }
  .a-napis { width: 60%; }
  .a-tytul { font-size: 4.4cqi; }
}

/* ——— telefon: scena pionowa 4:5, kompozycja jedna kolumna ——— */
@media (max-width: 720px) {
  [data-animacja] { --n-proporcja: 4 / 5; }
  .animacja-sekcja .obrys .anim { margin-inline: -8px; }
  .a-napis { left: 6%; top: 5%; width: 88%; }
  .a-nr { font-size: 11px; }
  .a-tytul { font-size: 7.2cqi; }
  .a-pod { font-size: 15px; margin-top: 1.6cqi; }
  .a-zegar { font-size: 40cqi; right: -4%; top: 30%; }
  .a-karta { width: 82%; padding: 2.4cqi 3.4cqi; border-radius: 3cqi; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3cqi; align-items: center; }
  .a-ikona { grid-row: 1 / 3; margin: 0; }
  .a-karta .a-mono { margin: 0; }
  .a-karta-tresc { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-karta-mail { left: 4%; top: 34%; }
  .a-karta-telefon { left: 13%; top: 50%; }
  .a-karta-skan { left: 5%; top: 66%; }
  .a-karta-edor { left: 12%; top: 82%; }
  .a-fala { right: 3cqi; top: 3cqi; width: 4cqi; }
  .u2 .a-rdzen { left: 50%; top: 44%; width: 20cqi; }
  .a-rdzen-podpis { left: 50%; top: 56%; }
  .a-kolejka { left: 6%; right: auto; top: 66%; width: 88%; gap: 2cqi; }
  .a-kolejka li { padding: 2.4cqi 3cqi; border-radius: 3cqi; }
  .a-kolejka li:nth-child(n+3) { display: none; }
  .a-pismo { left: 6%; top: 31%; width: 88%; padding: 4cqi; border-radius: 3cqi; }
  .a-pismo-tytul, .a-kartoteka-tytul { font-size: 19px; }
  .a-pismo-tresc { font-size: 14px; }
  .a-etykiety { left: 6%; top: 82%; width: 88%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqi; }
  .a-etykiety .a-chip { white-space: normal; }
  .u3 .a-rdzen-maly, .a-tory, .a-mini-pismo { display: none; }
  .a-kartoteka { left: 6%; top: 31%; width: 88%; padding: 3.6cqi 4cqi; border-radius: 3cqi; }
  .a-pasek { margin: -3.6cqi -4cqi 3cqi; padding: 2.4cqi 3.6cqi; border-radius: 3cqi 3cqi 0 0; }
  .a-pola { gap: 2.4cqi 3cqi; margin-bottom: 3cqi; }
  .a-historia { gap: 1.6cqi; padding-top: 2.4cqi; }
  .a-kalendarz { left: 6%; top: 31%; width: 88%; padding: 3.6cqi 4cqi; border-radius: 3cqi; }
  .a-dni { gap: 1.6cqi; }
  .a-dni li { border-radius: 2cqi; aspect-ratio: 1.7; }
  .a-dzien-termin .a-chip { top: -3.4cqi; }
  .a-zadania { left: 6%; top: 57%; width: 88%; gap: 2.4cqi; }
  .a-zadanie { padding: 2.4cqi 3.4cqi; border-radius: 3cqi; }
  .a-zadanie > span:not(.a-mono):not(.a-chip) { display: none; }
  .a-zadanie:first-child .a-chip { display: none; }
  .a-wniosek { left: 6%; top: 30%; width: 56%; padding: 3.4cqi; border-radius: 3cqi; }
  .a-bloki li { padding: 1.8cqi 2.4cqi; border-radius: 2cqi; }
  .a-pieczec { display: block; width: max-content; margin: 0 0 2cqi; }
  .a-impuls { display: none; }
  .a-sad { left: 65%; top: 42%; width: 31%; padding: 3cqi 2cqi; border-radius: 3cqi; }
  .a-sad .a-sygn { font-size: 10.5px; }
  .a-statusy { flex-direction: column; align-items: center; }
  .a-raport { left: 6%; top: 30%; width: 88%; padding: 3.6cqi 4cqi; border-radius: 3cqi; }
  .a-kafle { gap: 2.4cqi; }
  .a-kafle li { padding: 2.4cqi 3cqi; border-radius: 2.4cqi; }
  .a-droga { display: none; }
  .a-marka { left: 6%; top: 79%; width: 88%; font-size: 17px; }
}

/* ——— ograniczony ruch: statyczna sekwencja 7 kadrów (stan końcowy każdej sceny) ——— */
@media (prefers-reduced-motion: reduce) {
  .anim-scena { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .anim-poswiata { display: none; }
  .anim-ujecia { position: static; display: grid; gap: 24px; }
  .ujecie { position: relative; inset: auto; aspect-ratio: var(--n-proporcja); overflow: hidden; border-radius: var(--promien); visibility: visible !important;
    background: radial-gradient(90% 80% at 50% 58%, #2a1a0e 0%, var(--n-tlo2) 48%, var(--n-tlo) 100%); box-shadow: inset 0 0 0 1px var(--n-brzeg); }
  .anim-sterowanie { display: none; }
}