/* Tokeny. Jedno miejsce na kolor, odstęp i krój pisma. */
:root {
  color-scheme: light dark;

  /* Kolory marki: noc na trasie + światło reflektora. */
  --granat-900: #070d1a;
  --granat-800: #0d1626;
  --granat-700: #142339;
  --granat-600: #1d3050;
  --granat-400: #43597d;
  --bursztyn:   #e8a723;
  --bursztyn-jasny: #f7c85c;
  --bursztyn-ciemny: #b57c0a;

  /* MOTYW. Kazdy kolor jest zapisany RAZ, w funkcji light-dark():
     pierwsza wartosc to jasny, druga ciemny. Przelacznik w naglowku nie
     podmienia kolorow — zmienia tylko `color-scheme`, wiec nie ma drugiego
     zestawu barw, ktory moglby sie rozjechac z pierwszym (CLAUDE.md 1e).
     Linia bez light-dark() stoi wyzej jako zapas dla starszych przegladarek. */
  --tlo:        #f6f7f9;  --tlo:        light-dark(#f6f7f9, #0a1220);
  --tlo-karta:  #ffffff;  --tlo-karta:  light-dark(#ffffff, #101b2d);
  --tlo-cichy:  #eceff4;  --tlo-cichy:  light-dark(#eceff4, #16233a);
  --tekst:      #101826;  --tekst:      light-dark(#101826, #e9eef6);
  --tekst-cichy:#4d5a6e;  --tekst-cichy:light-dark(#4d5a6e, #a3b1c7);
  --obrys:      #dfe4ec;  --obrys:      light-dark(#dfe4ec, #1e2d47);
  --obrys-mocny:#c3ccda;  --obrys-mocny:light-dark(#c3ccda, #2c3f5f);

  --na-ciemnym:      #eef2f8;
  --na-ciemnym-cichy:#9dabc2;

  /* Skala pisma — płynna, bez skoków między telefonem a monitorem. */
  --pismo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --pismo-liczby: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                  Menlo, Consolas, monospace;

  --t-nano:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-mikro: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --t-mały:  clamp(0.92rem, 0.89rem + 0.18vw, 1.00rem);
  --t-baza:  clamp(1.00rem, 0.96rem + 0.22vw, 1.10rem);
  --t-lead:  clamp(1.08rem, 1.00rem + 0.42vw, 1.30rem);
  --t-h3:    clamp(1.25rem, 1.10rem + 0.75vw, 1.65rem);
  --t-h2:    clamp(1.75rem, 1.30rem + 2.10vw, 3.10rem);
  --t-h1:    clamp(2.40rem, 1.50rem + 4.20vw, 5.20rem);
  --t-ogrom: clamp(2.60rem, 1.40rem + 5.60vw, 6.00rem);

  /* Odstępy — jedna progresja, żeby rytm strony się nie rozjeżdżał. */
  --o-1: 0.25rem; --o-2: 0.5rem;  --o-3: 0.75rem; --o-4: 1rem;
  --o-5: 1.5rem;  --o-6: 2rem;    --o-7: 3rem;    --o-8: 4rem;
  --o-9: clamp(3.5rem, 2rem + 6vw, 7rem);

  --szer-tresc: 1240px;
  --szer-tekst: 68ch;
  --zaokr-s: 8px;
  --zaokr-m: 16px;
  --zaokr-l: 26px;
  --zaokr-xl: 34px;

  --cien-barwa: rgba(16, 24, 38, 1);
  --cien-barwa: light-dark(rgba(16, 24, 38, 1), rgba(0, 0, 0, 1));
  --cien-moc: .06;
  --cien-moc: light-dark(.06, .34);
  --cien-1: 0 1px 2px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 100%), transparent),
            0 2px 8px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 90%), transparent);
  --cien-2: 0 4px 12px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 140%), transparent),
            0 18px 44px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 170%), transparent);
  --cien-3: 0 10px 30px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 200%), transparent),
            0 40px 90px color-mix(in srgb, var(--cien-barwa) calc(var(--cien-moc) * 260%), transparent);

  --krzywa: cubic-bezier(.22, .61, .36, 1);
  --krzywa-wyraz: cubic-bezier(.16, 1, .3, 1);
  --czas-1: .18s;
  --czas-2: .35s;
  --czas-3: .7s;

  /* Cel dotyku. Wymóg platformy, nie preferencja — nigdy poniżej 48 px. */
  --dotyk: 48px;
}

/* Trzy stany przelacznika. "auto" nie ustawia niczego — wtedy decyduje system. */
:root[data-motyw="jasny"]  { color-scheme: light; }
:root[data-motyw="ciemny"] { color-scheme: dark; }

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

/* PRZYCZYNA NUMER JEDEN „ROZJEZDZANIA SIE".
   Element siatki i flexa ma domyslnie min-width: auto, czyli NIE kurczy sie
   ponizej swojej tresci — jedno dlugie slowo albo szerokie zdjecie rozpycha
   wtedy cala kolumne i strona jedzie w bok. To zdanie to wylacza wszedzie. */
*, *::before, *::after { min-width: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--pismo);
  font-size: var(--t-baza);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* clip zamiast hidden: przycina wystajace, ale NIE tworzy kontekstu
     przewijania, wiec position: sticky dalej dziala. */
  overflow-x: clip;
}

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

/* KAZDE ZDJECIE DOPASOWUJE SIE DO SWOJEGO POJEMNIKA, nie odwrotnie.
   Ramka trzyma proporcje (mozna ja nadpisac zmienna --proporcja),
   a obraz wypelnia ja kadrem — dzieki temu ten sam plik wyglada dobrze
   i w waskiej kolumnie na telefonie, i na calej szerokosci monitora. */
.foto__ramka, .klatka__ramka { aspect-ratio: var(--proporcja, 4 / 3); }
.foto__obraz, .klatka__obraz, .hero__tlo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:where(.dokument a, .zgoda a, .bok__lista a) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bursztyn-ciemny);
}

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

::selection { background: var(--bursztyn); color: var(--granat-900); }

/* Odnośnik dla klawiatury — pierwszy element strony. */
.pomin {
  /* Nie -9999px: taki element ma prawdziwy prostokat daleko poza ekranem
     i myli narzedzia mierzace uklad. Chowamy go NAD strona. */
  position: absolute;
  top: -120px;
  left: 0;
  z-index: 100;
  padding: var(--o-3) var(--o-5);
  background: var(--bursztyn);
  color: var(--granat-900);
  font-weight: 600;
  border-radius: 0 0 var(--zaokr-m) 0;
}
.pomin:focus { top: 0; }

/* Pojemnik treści — jedna szerokość dla całej strony. */
.sekcja,
.naglowek__pas,
.stopka__pas,
.stopka__dol,
.wezwanie {
  width: min(100% - 2.5rem, var(--szer-tresc));
  margin-inline: auto;
}
@media (max-width: 560px) {
  .sekcja, .naglowek__pas, .stopka__pas, .stopka__dol, .wezwanie {
    width: min(100% - 1.75rem, var(--szer-tresc));
  }
}

.sekcja { padding-block: var(--o-9); }
.sekcja + .sekcja { padding-top: 0; }

/* Sekcja ciemna wychodzi na pełną szerokość ekranu, treść zostaje w kolumnie. */
/* SEKCJA AKCENTOWA. W ciemnym motywie jest granatowa, w jasnym — chlodnym,
   przygaszonym panelem. W obu przypadkach ma robic to samo: ODCINAC SIE od
   reszty. Do tej pory byla zawsze niemal czarna, wiec w jasnym motywie
   wygladala jak dziura w stronie, a nie jak akcent. */
.sekcja--ciemna {
  --akcent-tekst: light-dark(#101826, #eef2f8);
  --akcent-cichy: light-dark(#4d5a6e, #9dabc2);

  width: 100%;
  max-width: none;
  padding-inline: max(1.25rem, calc((100vw - var(--szer-tresc)) / 2));
  padding-block: var(--o-9);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(232,167,35,.14), transparent 60%),
    linear-gradient(180deg,
      light-dark(#e7ebf3, var(--granat-900)),
      light-dark(#dde3ed, var(--granat-800)));
  color: var(--akcent-tekst);
  margin-block: var(--o-9);
}
.sekcja--ciemna + .sekcja { padding-top: 0; }
.sekcja--ciemna .sekcja__lead,
.sekcja--ciemna .sekcja__nad { color: var(--akcent-cichy); }

/* Ziarno — subtelna faktura zamiast płaskiego tła. Rysowane filtrem SVG,
   więc nie pobiera żadnego pliku. */
/* FAKTURA. Kiedys ta warstwa lezala NA CALEJ STRONIE (position: fixed,
   z-index: 3, mix-blend-mode: overlay, krycie 0.5) i podnosila polcienie
   wszystkiego pod soba — zdjecia i tekst wygladaly na sprane. Teraz jest
   tylko w scenie otwierajacej, delikatna i pod trescia. */
.ziarno {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)' opacity='.28'/%3E%3C/svg%3E");
}

.lista-znaczona { display: grid; gap: var(--o-3); margin-top: var(--o-5); }
.lista-znaczona li {
  position: relative;
  padding-left: var(--o-5);
  color: var(--tekst-cichy);
  font-size: var(--t-mały);
}
.lista-znaczona li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 14px; height: 2px;
  background: var(--bursztyn);
}

/* Tekst tylko dla czytnika ekranu: jest w drzewie dostepnosci,
   nie ma go na ekranie i NIE tworzy prostokata poza plotnem. */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ikona { width: 24px; height: 24px; flex: none; }
.ikona--mala { width: 17px; height: 17px; }

.przycisk {
  --tlo-przycisku: var(--bursztyn);
  --tekst-przycisku: var(--granat-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-2);
  min-height: var(--dotyk);
  padding: 0 var(--o-5);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tlo-przycisku);
  color: var(--tekst-przycisku);
  font: inherit;
  font-size: var(--t-mały);
  font-weight: 650;
  letter-spacing: .005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--czas-1) var(--krzywa),
              box-shadow var(--czas-2) var(--krzywa),
              background-color var(--czas-2) var(--krzywa),
              color var(--czas-2) var(--krzywa);
}

/* Światło przejeżdżające przez przycisk — jedna warstwa, transform na GPU. */
.przycisk::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .8s var(--krzywa-wyraz);
}
.przycisk:hover::before, .przycisk:focus-visible::before { transform: translateX(110%); }

.przycisk:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232,167,35,.34); }
.przycisk:active { transform: translateY(0); }

.przycisk__strzalka {
  width: 18px; height: 18px;
  transition: transform var(--czas-2) var(--krzywa-wyraz);
}
.przycisk:hover .przycisk__strzalka { transform: translateX(4px); }

.przycisk--obrys {
  background: transparent;
  color: var(--tekst);
  border-color: var(--obrys-mocny);
}
.przycisk--obrys:hover {
  border-color: var(--bursztyn);
  color: var(--tekst);
  box-shadow: 0 10px 26px rgba(16,24,38,.10);
}
.sekcja--ciemna .przycisk--obrys {
  color: var(--akcent-tekst, var(--tekst));
  border-color: light-dark(rgba(16,24,38,.18), rgba(238,242,248,.28));
}
/* Scena otwierajaca ma wlasny zestaw barw (05-hero.css) i przelacza sie
   z motywem — przycisk obrysowany musi isc za nia, a nie za ciemnym tlem. */
.hero .przycisk--obrys {
  color: var(--hero-tekst);
  border-color: var(--hero-kafel-obrys);
}
.sekcja--ciemna .przycisk--obrys:hover,
.hero .przycisk--obrys:hover { border-color: var(--bursztyn); }

.przycisk--maly { min-height: 44px; padding: 0 var(--o-4); font-size: var(--t-mikro); }

.przycisk--wyslij { min-width: min(220px, 100%); }
.przycisk__kolowrotek {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid rgba(7,13,26,.25);
  border-top-color: var(--granat-900);
  border-radius: 50%;
  opacity: 0;
  animation: obrot .8s linear infinite;
}
.formularz--wysyla .przycisk__kolowrotek { opacity: 1; }
.formularz--wysyla .przycisk__napis,
.formularz--wysyla .przycisk__strzalka { opacity: 0; }
.formularz--wysyla .przycisk--wyslij { pointer-events: none; }

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

.sekcja__akcje { display: flex; justify-content: center; margin-top: var(--o-7); }

/* ================== PRZYCISKI: SZKŁO, METAL I ŚWIATŁO =====================
   Wszystko rysowane wektorem i gradientem — nie ma tu ani jednego pliku
   graficznego, więc na ekranie 4K przycisk jest tak samo ostry jak na HD,
   a waży zero bajtów. Połysk działa w obu motywach, bo bierze kolory
   z tokenów, a nie z wpisanych na sztywno wartości. */

.przycisk--glowny {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bursztyn-jasny) 92%, #fff) 0%,
      var(--bursztyn) 46%,
      color-mix(in srgb, var(--bursztyn) 88%, #000) 54%,
      var(--bursztyn-ciemny) 100%);
  color: var(--granat-900);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 1px 2px rgba(90, 60, 0, .28),
    0 10px 24px rgba(232, 167, 35, .30);
}
/* Górna połowa dostaje delikatny rozbłysk — to on daje wrażenie szkła. */
.przycisk--glowny::after {
  content: "";
  position: absolute;
  inset: 1px 1px 45% 1px;
  border-radius: 999px 999px 60% 60% / 999px 999px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}
/* Napis i strzalka NAD polyskiem — inaczej rozblysk przykrywalby tekst
   i przycisk bylby ladny, ale nieczytelny. */
.przycisk > * { position: relative; z-index: 1; }
.przycisk--glowny:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    0 2px 4px rgba(90, 60, 0, .3),
    0 16px 34px rgba(232, 167, 35, .40);
}
.przycisk--glowny:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(90, 60, 0, .38),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 1px 2px rgba(90, 60, 0, .22);
}

/* Wariant obrysowany: szkło zamiast metalu. */
.przycisk--obrys {
  background: color-mix(in srgb, var(--tlo-karta) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
    0 1px 2px rgba(16, 24, 38, .06);
}
.sekcja--ciemna .przycisk--obrys {
  background: light-dark(rgba(255,255,255,.62), rgba(255,255,255,.07));
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.18)),
    0 6px 18px light-dark(rgba(16,24,38,.10), rgba(0,0,0,.22));
}
.hero .przycisk--obrys {
  background: light-dark(rgba(255,255,255,.62), rgba(255,255,255,.07));
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255,255,255,.9), rgba(255,255,255,.18)),
    0 6px 18px light-dark(rgba(16,24,38,.10), rgba(0,0,0,.22));
}

/* Ognisko klawiatury musi być widoczne NA połysku, nie pod nim. */
.przycisk:focus-visible { outline: 3px solid var(--bursztyn-ciemny); outline-offset: 3px; }
.sekcja--ciemna .przycisk:focus-visible { outline-color: light-dark(#b57c0a, var(--bursztyn-jasny)); }
.hero .przycisk:focus-visible { outline-color: var(--hero-akcent); }

/* Na słabym sprzęcie zostaje płaski, czytelny przycisk — bez rozmyć. */
.oszczedny .przycisk--glowny { background: var(--bursztyn); box-shadow: none; }
.oszczedny .przycisk--glowny::after { display: none; }
.oszczedny .przycisk--obrys { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
.oszczedny .przycisk::before { display: none; }

/* Słuchawka pokazuje się tylko tam, gdzie znika napis (patrz scena
   otwierająca na telefonie). Na szerokim ekranie napis wystarcza. */
.przycisk__sluchawka { display: none; width: 19px; height: 19px; }

.naglowek {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color var(--czas-2) var(--krzywa),
              box-shadow var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa);
  border-bottom: 1px solid transparent;
}
.naglowek--przy-gorze { background: transparent; }

/* TŁO NAGŁÓWKA BEZ UDZIAŁU JAVASCRIPTU — I BEZ BARW W KLATKACH.
   Pierwsza wersja animowała `background-color` wprost, z barwą wziętą ze
   zmiennej motywu. To był błąd: wartości w klatkach kluczowych przeglądarka
   wylicza RAZ, więc po przełączeniu motywu pasek zostawał w starych barwach
   aż do odświeżenia strony — dokładnie to było widać przy przewijaniu.

   Teraz tło jest osobną warstwą ze zwykłymi deklaracjami (te przeliczają się
   natychmiast razem z motywem), a animacja rusza WYŁĄCZNIE jej przezroczystość.
   Zasada do zapamiętania: w klatkach kluczowych nie umieszczamy barw
   zależnych od motywu — tylko `opacity` i `transform`. */
.naglowek::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--tlo) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--obrys);
  box-shadow: var(--cien-1);
  opacity: 0;
  transition: opacity var(--czas-2) var(--krzywa);
}
.naglowek--przewiniety::before { opacity: 1; }

@supports (animation-timeline: scroll()) {
  .naglowek::before {
    animation: naglowek-tlo linear both;
    animation-timeline: scroll(root block);
    animation-range: 8px 96px;
    transition: none;
  }
  @keyframes naglowek-tlo { to { opacity: 1; } }
}
/* Klasa ze skryptu zostaje jako zapas dla przegladarek bez osi czasu
   przewijania — steruje ta sama warstwa, wiec barwy sa jedne. */
/* Nad sceną otwierającą pasek bierze jej kolor tekstu — a ten przełącza się
   razem z motywem, więc w jasnym motywie napisy są ciemne, a w ciemnym jasne. */
.naglowek--na-hero { color: light-dark(#101826, #eef2f8); }
.naglowek--na-hero .przycisk--maly { color: var(--granat-900); }
.naglowek--na-hero .motyw { border-color: light-dark(rgba(16,24,38,.22), rgba(238,242,248,.3)); }

.naglowek__pas {
  display: flex;
  flex-wrap: nowrap;          /* pasek NIGDY sie nie zawija */
  align-items: center;
  gap: clamp(var(--o-2), 1.2vw, var(--o-5));
  min-height: 76px;
}

.znak { display: inline-flex; align-items: center; gap: var(--o-3); flex: none; min-height: var(--dotyk); }
.znak__godlo { max-width: clamp(84px, 9vw, 132px); }
.znak__godlo { width: 40px; height: 40px; color: var(--bursztyn); }
.znak__nazwa {
  font-size: var(--t-h3);
  font-weight: 800;
  letter-spacing: -.03em;
}

.menu { margin-inline: auto; min-width: 0; }
/* Pozycje stoja w JEDNEJ linii: nie zawijaja sie i nie lamia slow.
   Zamiast zawijania zacieskaja sie odstepy — plynnie, bez progow. */
.menu__lista { display: flex; flex-wrap: nowrap; gap: 0; }
.menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--dotyk);
  padding: 0 var(--o-4);
  border-radius: 999px;
  font-size: var(--t-mikro);
  font-weight: 550;
  letter-spacing: .01em;
  transition: color var(--czas-1) var(--krzywa), background-color var(--czas-1) var(--krzywa);
}
.menu__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 12px;
  width: 0; height: 2px;
  background: var(--bursztyn);
  transform: translateX(-50%);
  transition: width var(--czas-2) var(--krzywa-wyraz);
}
.menu__link:hover::after, .menu__link--tu::after { width: calc(100% - 2 * var(--o-4)); }

.naglowek__akcje { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(2px, .6vw, var(--o-3)); flex: none; }
.telefon-gorny {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  min-height: var(--dotyk);
  white-space: nowrap;
  padding-inline: var(--o-2);
  font-size: var(--t-mikro);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.telefon-gorny:hover { color: var(--bursztyn); }

/* Pasek postępu czytania — szerokość liczona przewijaniem strony. */
.naglowek__postep {
  height: 2px;
  background: linear-gradient(90deg, var(--bursztyn), var(--bursztyn-jasny));
  transform-origin: 0 50%;
  transform: scaleX(var(--postep, 0));
}
@supports (animation-timeline: scroll()) {
  .naglowek__postep {
    animation: postep linear both;
    animation-timeline: scroll(root block);
    transform: none;
  }
  @keyframes postep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}


@media (max-width: 900px) {
  .menu {
    position: fixed;
    inset: 76px 0 auto;
    margin: 0;
    padding: var(--o-4) 1.25rem var(--o-7);
    background: var(--tlo);
    border-bottom: 1px solid var(--obrys);
    box-shadow: var(--cien-2);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--czas-2) var(--krzywa),
                transform var(--czas-2) var(--krzywa-wyraz),
                visibility var(--czas-2);
  }
  .menu--otwarte { transform: none; opacity: 1; visibility: visible; }
  .menu__lista { flex-direction: column; gap: 0; }
  .menu__link {
    color: var(--tekst);
    justify-content: space-between;
    min-height: 56px;
    font-size: var(--t-lead);
    border-bottom: 1px solid var(--obrys);
    border-radius: 0;
  }
  .menu__link::after { display: none; }
}

/* PRZELACZNIK MOTYWU — trzy stany w jednej pigulce. */
/* PRZELACZNIK MOTYWU — tor i uniesiona pigulka.
   W jasnym motywie tor jest chlodnym szarym zaglebieniem (cien do wewnatrz),
   a stan biezacy bialym kafelkiem uniesionym nad nim. To ten sam uklad,
   ktory od lat dziala w przelacznikach systemowych: oko od razu widzi,
   co jest wybrane, bo wybrane jest WYZEJ, a nie tylko w innym kolorze. */
.motyw {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 1px solid light-dark(#d7dce6, rgba(238,242,248,.12));
  border-radius: 999px;
  background: light-dark(#e8ebf1, rgba(238,242,248,.06));
  box-shadow: inset 0 1px 2px light-dark(rgba(16,24,38,.07), rgba(0,0,0,.35));
}
.naglowek--na-hero .motyw {
  border-color: light-dark(rgba(16,24,38,.16), rgba(238,242,248,.26));
  background: light-dark(rgba(255,255,255,.55), rgba(7,13,26,.35));
}

.motyw__guzik {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* Nieaktywny stan ma byc CZYTELNY, nie ledwo widoczny — 0.55 to bylo
     za malo na jasnym tle (zlapala to sonda mierzaca krycie). */
  opacity: .72;
  transition: opacity var(--czas-1) var(--krzywa), color var(--czas-1);
}
.motyw__guzik svg { width: 19px; height: 19px; }
.motyw__guzik:hover { opacity: 1; }
.motyw__guzik[aria-pressed="true"] { opacity: 1; color: light-dark(#8a5c00, #f7c85c); }
.naglowek--na-hero .motyw__guzik[aria-pressed="true"] { color: light-dark(#8a5c00, var(--bursztyn)); }
.motyw__opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Pigulka jedzie pod wybrany stan zamiast mrugac tlem. */
.motyw__wskaznik {
  position: absolute;
  top: 3px; left: 3px;
  width: 44px; height: 44px;
  border-radius: 999px;
  /* W jasnym motywie pigulka jest BIALA i UNIESIONA nad szarym torem —
     oko widzi wybrany stan po wysokosci, nie tylko po barwie. W ciemnym
     zostaje bursztynowa poswiata, bo tam bialy kafelek by razil. */
  background: light-dark(#ffffff, color-mix(in srgb, var(--bursztyn) 22%, transparent));
  box-shadow:
    light-dark(0 1px 1px rgba(16,24,38,.10), 0 0 0 transparent),
    light-dark(0 2px 8px rgba(16,24,38,.14), 0 0 0 transparent),
    inset 0 0 0 1px light-dark(rgba(16,24,38,.07), color-mix(in srgb, var(--bursztyn) 45%, transparent)),
    inset 0 1px 0 light-dark(rgba(255,255,255,.92), transparent);
  transition: transform var(--czas-2) var(--krzywa-wyraz);
}
.motyw[data-wybrany="jasny"] .motyw__wskaznik { transform: translateX(44px); }
.motyw[data-wybrany="ciemny"] .motyw__wskaznik { transform: translateX(88px); }

@media (max-width: 420px) {
  .motyw__guzik, .motyw__wskaznik { width: 40px; }
  .motyw[data-wybrany="jasny"] .motyw__wskaznik { transform: translateX(40px); }
  .motyw[data-wybrany="ciemny"] .motyw__wskaznik { transform: translateX(80px); }
}

/* PASEK NA TELEFONIE — co zostaje, a co znika.
   Na wąskim ekranie w pasku muszą się zmieścić: logo, przełącznik motywu,
   telefon i menu. Wszystko inne przenosi się do panelu menu, bo ściśnięte
   przyciski poniżej 48 px łamią wymóg celu dotyku. */
.znak__godlo { width: auto; height: 40px; }

/* DRABINA ZACISKANIA — co znika i w jakiej kolejnosci, zeby pasek
   zostal w jednej linii az do progu telefonu (900 px). */
@media (max-width: 1280px) {
  .telefon-gorny span { display: none; }      /* zostaje sama sluchawka */
}
@media (max-width: 1140px) {
  .naglowek__akcje .ikona-link { display: none; }   /* Facebook jest w stopce */
}
@media (max-width: 1040px) {
  /* "Zamow busa" znika: to samo wezwanie stoi w hero i w kazdym panelu. */
  .naglowek__akcje .przycisk--maly { display: none; }
}
@media (max-width: 980px) {
  .menu__link { font-size: var(--t-nano); }
  .znak__godlo { max-width: 92px; }
}
@media (max-width: 900px) {
  /* CHOWANIE PRZY PRZEWIJANIU W DÓŁ.
     Ruch to jedno `translateY` — przeglądarka liczy je na karcie graficznej,
     więc pasek zjeżdża płynnie także na starym telefonie. Na komputerze
     ta reguła w ogóle nie obowiązuje: tam pasek zostaje przyklejony. */
  .naglowek {
    transition: transform .32s var(--krzywa-wyraz),
                background-color var(--czas-2) var(--krzywa),
                box-shadow var(--czas-2) var(--krzywa);
    will-change: transform;
  }
  .naglowek--schowany { transform: translateY(-100%); }

  /* NA TELEFONIE NAGŁÓWEK JEST ZAWSZE CZYTELNY.
     Przezroczysty pasek nad zdjęciem to luksus dużego ekranu — na telefonie
     treść przewija się tuż pod nim i napisy nakładałyby się na siebie. */
  .naglowek::before {
    animation: none !important;
    opacity: 1;
    background: color-mix(in srgb, var(--tlo) 88%, transparent);
  }
  .naglowek--na-hero { color: var(--tekst); }
  
  .naglowek__pas { min-height: 68px; }
  .znak__godlo { height: 34px; }
  .naglowek__akcje .ikona-link { display: none; }
  .menu {
    position: fixed;
    inset: 68px 0 auto;
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    margin: 0;
    padding: var(--o-4) 1.25rem calc(var(--o-7) + env(safe-area-inset-bottom));
  }
}
@media (max-width: 620px) {
  .naglowek__akcje .przycisk--maly { display: none; }
  /* Celu dotyku nie zmniejszamy — to wymog platformy, nie ozdoba.
     Zamiast tego z paska znika przycisk zamowienia (jest w panelu menu). */
  .telefon-gorny { padding-inline: var(--o-1); }
}
@media (max-width: 380px) {
  .znak__godlo { height: 28px; }
}

/* Menu otwarte na telefonie dostaje też przycisk zamówienia — ten sam,
   który znika z paska, żeby nie zniknął z zasięgu kciuka. */
.menu__dol {
  display: none;
  gap: var(--o-3);
  padding-top: var(--o-5);
  margin-top: var(--o-4);
  border-top: 1px solid var(--obrys);
}
@media (max-width: 900px) { .menu__dol { display: grid; } }

/* ============================================================================
   NAGŁÓWEK NA TELEFONIE — UNOSZĄCA SIĘ KAPSUŁA
   Ten sam język, co dolny pasek nawigacji: element ze szkła z marginesem od
   krawędzi, dużym promieniem i cieniem. Góra i dół zaczynają się zgadzać,
   a strona przestaje wyglądać jak dokument z paskiem doklejonym u szczytu.
   ========================================================================== */
@media (max-width: 900px) {
  /* KAPSULA JEST PUDELKIEM PASKA, NIE WARSTWA POD NIM.
     Wczesniej rysowala ja warstwa `::before`, ktorej granice liczylem
     z odstepow naglowka. Zmierzone: przycisk motywu zaczynal sie na 5 px,
     a kapsula dopiero na 8 px — wiec wystawal ponad nia o trzy piksele.
     Gdy kapsula JEST paskiem, jego dzieci sa w niej z definicji i nie ma
     czego liczyc. */
  .naglowek {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    box-shadow: none;
    --naglowek-gora: calc(8px + var(--gora-bezpieczna, 0px));
    padding-inline: max(10px, env(safe-area-inset-left));
    padding-bottom: 0;
  }
  .naglowek::before { display: none; }

  .naglowek__pas {
    min-height: 56px;
    padding-inline: var(--o-3);
    gap: var(--o-2);
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--obrys) 80%, transparent);
    background: color-mix(in srgb, var(--tlo-karta) 86%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
      0 2px 6px rgba(7, 13, 26, .10),
      0 12px 30px rgba(7, 13, 26, .18);
  }
  .znak__godlo { height: 34px; }

  /* ---------- CO STOI W KAPSULE I DLACZEGO --------------------------------
     Zrzut z iPhone'a: trzy male elementy zbite do lewej krawedzi i ponad
     polowa kapsuly pusta. Dwie przyczyny, obie do naprawy tutaj.

     PIERWSZA — rozpychanie zniklo razem z menu. Pasek rozpychalo `.menu`
     swoim `margin-inline: auto`. Na telefonie menu jest ukryte, wiec zniklo
     tez rozpychanie i wszystko osiadlo z lewej. Odstep musi byc wlasnoscia
     PASKA, a nie skutkiem ubocznym elementu, ktory na telefonie nie istnieje. */
  .naglowek__akcje { margin-left: auto; }

  /* DRUGA — sluchawka byla drugim egzemplarzem tej samej czynnosci.
     W dolnym pasku stoi zloty kafel „Zadzwon", pod kciukiem. Ta sama
     czynnosc powtorzona u gory ekranu, tam gdzie kciuk nie siega, nie
     dodaje niczego — zabiera miejsce i rozmywa to, po co ten pasek jest. */
  .telefon-gorny { display: none; }

  /* ZA TO WRACA WEZWANIE, ktore znikalo od 1040 px. Podzial jest teraz
     czysty: DZWONIENIE na dole (kciuk), PISANIE na gorze (formularz),
     tozsamosc po lewej. Kazda droga w jednym miejscu, zadna dwa razy. */
  .naglowek__akcje .przycisk--maly {
    display: inline-flex;
    min-height: var(--dotyk);
    padding-inline: var(--o-4);
    font-size: var(--t-nano);
    white-space: nowrap;
    transition: background-color var(--czas-2) var(--krzywa),
                box-shadow var(--czas-2) var(--krzywa),
                color var(--czas-2) var(--krzywa);
  }
  .naglowek__akcje .przycisk--glowny::after {
    transition: opacity var(--czas-2) var(--krzywa);
  }

  /* NAD SCENA OTWIERAJACA PRZYCISK JEST CICHY.
     Na pierwszym ekranie to samo wezwanie stoi w hero — duze, z opisem
     i z dowodem obok. Drugi zloty przycisk sto pikseli wyzej to nie nacisk,
     tylko halas; zapala sie dopiero, gdy hero zjedzie z ekranu.

     STANEM DOMYSLNYM JEST ZAPALONY. Cichy jest wyjatkiem dokladanym klasa.
     Gdyby skrypt nie ruszyl, przycisk zostaje w pelni widoczny — ozdoba nie
     ma prawa decydowac o tym, czy da sie zamowic bus. */
  .naglowek--na-hero .naglowek__akcje .przycisk--glowny {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
  }
  .naglowek--na-hero .naglowek__akcje .przycisk--glowny::after { opacity: 0; }

  /* Pasek postępu czytania idzie pod kapsułą, w jej świetle. */
  .naglowek__postep {
    margin-inline: max(18px, calc(env(safe-area-inset-left) + 8px));
    margin-top: 4px;
    border-radius: 2px;
  }

  /* Panel podrzędny startuje pod kapsułą, nie pod pełną szerokością paska. */
  .naglowek--schowany { transform: translateY(calc(-100% - 8px)); }
}
@media (max-width: 420px) {
  .naglowek__pas { min-height: 52px; padding-inline: var(--o-2); }
  /* Logo moze byc WIEKSZE, nie mniejsze: po dosunieciu dzialan do prawej
     krawedzi zostalo w srodku kapsuly 134 px wolnego (zmierzone przy 393 px).
     Wczesniej sciskalismy znak firmowy, zeby zmiescic elementy, ktore i tak
     stlaczaly sie z lewej. */
  .znak__godlo { height: 32px; }
  .motyw__guzik { width: 40px; height: 44px; }
  /* Odstepy sciskamy, CELU DOTYKU nie. 44 px to wymog platformy. */
  .naglowek__akcje .przycisk--maly { padding-inline: var(--o-3); }
}


/* ============================================================================
   PRZEŁĄCZNIK MOTYWU ZWIJA SIĘ DO JEDNEGO PRZYCISKU.
   Trzy przyciski po 44 px zajmowały w pasku telefonu tyle, co logo — widać to
   było na zrzucie z iPhone'a. Zostaje sam stan bieżący; dotknięcie przechodzi
   do następnego (auto → jasny → ciemny → auto). Cel dotyku pełne 44 px.
   (Ta reguła raz już tu była i zniknęła przy edycji pliku — dlatego pilnuje
   jej teraz test.)                                                          */
@media (max-width: 620px) {
  .motyw { border: 0; background: transparent; padding: 0; box-shadow: none; }
  .motyw__guzik { display: none; }
  .motyw__guzik[aria-pressed="true"] { display: grid; opacity: 1; }
  .motyw__wskaznik { display: none; }
}

/* PRZELACZNIK JEZYKA (naglowek.js: jezyki). Dwie litery w kapsule, jak
   przelacznik motywu obok; biezacy jezyk wypelniony, drugi to zwykly
   odnosnik z celem dotyku 40 px. W stopce ten sam znacznik, bez kapsuly. */
.jezyki { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--tlo-cichy); border: 1px solid var(--obrys); }
.jezyki__poz { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding-inline: .55rem;
  border-radius: 999px; font-size: var(--t-mikro); font-weight: 700; letter-spacing: .08em;
  color: var(--tekst-cichy); text-decoration: none; transition: background-color .2s, color .2s; }
.jezyki__poz:hover { color: var(--tekst); background: var(--tlo-karta); }
.jezyki__poz:focus-visible { outline: 2px solid var(--bursztyn); outline-offset: 2px; }
.jezyki__poz--tu { color: var(--tekst); background: var(--tlo-karta); box-shadow: var(--cien-1); }
.stopka__dol .jezyki { background: none; border: 0; padding: 0; }

.hero {
  /* BARWY SCENY OTWIERAJACEJ — WLASNY ZESTAW, KTORY PRZELACZA SIE Z MOTYWEM.
     Do tej pory scena byla zawsze ciemna, wiec w jasnym motywie odcinala sie
     od reszty strony jak wklejka. Kazda barwa jest zapisana RAZ, funkcja
     light-dark(): pierwsza wartosc to jasny, druga ciemny (CLAUDE.md 1e). */
  --hero-tlo:        light-dark(#eef1f7, #070d1a);
  --hero-tekst:      light-dark(#101826, #eef2f8);
  --hero-cichy:      light-dark(#4d5a6e, #9dabc2);
  --hero-akcent:     light-dark(#b57c0a, #f7c85c);
  --hero-cien-tekst: light-dark(0 1px 10px rgba(255,255,255,.55), 0 2px 18px rgba(7,13,26,.6));

  /* Zaslona na zdjeciu: w jasnym motywie rozjasnia, w ciemnym przyciemnia —
     w obu przypadkach po to, zeby tekst mial na czym stanac. */
  --hero-zaslona-1:  light-dark(rgba(238,241,247,.62), rgba(7,13,26,.86));
  --hero-zaslona-2:  light-dark(rgba(238,241,247,.10), rgba(7,13,26,.30));
  --hero-zaslona-3:  light-dark(rgba(238,241,247,.72), rgba(7,13,26,.72));

  --hero-kafel-tlo:   light-dark(rgba(255,255,255,.72), rgba(7,13,26,.46));
  --hero-kafel-obrys: light-dark(rgba(16,24,38,.14), rgba(238,242,248,.24));
  --hero-kreska:      light-dark(rgba(16,24,38,.14), rgba(238,242,248,.16));

  position: relative;
  display: grid;
  align-items: end;
  min-height: min(100svh, 900px);
  margin-top: -76px;
  padding: calc(76px + var(--o-8)) max(1.25rem, calc((100vw - var(--szer-tresc)) / 2)) var(--o-8);
  overflow: clip;
  color: var(--hero-tekst);
  background: var(--hero-tlo);
}

.hero__scena {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ---------- WEJSCIE FILMOWE ----------------------------------------------
   Kadr otwiera sie z lekkim domknieciem po bokach i zjazdem skali. Jedno
   `clip-path` i jedno `transform` — obie liczone na karcie graficznej,
   wiec efekt kosztuje tyle samo na nowym telefonie i na starym laptopie.  */
.hero__scena {
  animation: scena-wejscie 1.15s var(--krzywa-wyraz) both;
}
@keyframes scena-wejscie {
  from { clip-path: inset(0 10% 0 10% round var(--zaokr-l)); opacity: .55; }
  to   { clip-path: inset(0 0 0 0 round 0px); opacity: 1; }
}

/* Swiatlo przejezdza raz przez kadr — tak jak reflektor po lakierze. */
.hero__blysk {
  position: absolute;
  inset: -20% -60%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: blysk 1.9s .55s var(--krzywa-wyraz) both;
}
@keyframes blysk { to { transform: translateX(70%); } }
.hero__tlo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zdjecie jest juz PANORAMICZNYM KADREM (foto/hero-grupa-*), wiec
     wystarczy drobne przesuniecie ku gorze, zeby autobusy byly w osi. */
  object-position: 50% 38%;
  will-change: transform;
}

.hero__mgla {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      var(--hero-zaslona-1) 0%,
      var(--hero-zaslona-2) 30%,
      var(--hero-zaslona-3) 72%,
      var(--hero-tlo) 100%),
    radial-gradient(80% 55% at 50% 100%, rgba(232,167,35,.20), transparent 70%);
}

.hero__tresc {
  position: relative;
  z-index: 2;
  max-width: 62ch;
}

.hero__nadtytul {
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hero-akcent);
  margin-bottom: var(--o-4);
}

.hero__tytul {
  font-size: var(--t-ogrom);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: .98;
  margin-bottom: var(--o-5);
}

/* NAPIS, KTORY DOPISUJE SIE SAM. Kursor to jeden pseudoelement mrugajacy
   przezroczystoscia — najtansza animacja, jaka istnieje. */
.hero__pisze {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--o-2);
  margin-top: var(--o-4);
  font-size: clamp(1.05rem, .95rem + .9vw, 1.6rem);
  font-weight: 650;
  color: var(--hero-tekst);
}
.hero__pisze-etykieta {
  font-size: var(--t-nano);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hero-akcent);
  font-weight: 650;
}
.hero__pisze-slowo {
  position: relative;
  color: var(--hero-akcent);
  /* Miejsce zarezerwowane na najdluzsza pozycje — inaczej wiersz
     skakalby przy kazdej literze. */
  min-height: 1.3em;
}
.hero__pisze-slowo--zywe::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: 1.05em;
  margin-left: .08em;
  vertical-align: -.14em;
  background: var(--hero-akcent);
  animation: kursor 1.05s steps(1) infinite;
}
@keyframes kursor { 50% { opacity: 0; } }

.hero__lead {
  font-size: var(--t-lead);
  color: var(--hero-cichy);
  max-width: 52ch;
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-3);
  margin-top: var(--o-6);
}

/* Liczniki mieszkaja teraz w pasie zaufania (.zaufanie__liczba) —
   reguly sceny dla nich byly juz martwe. */

.hero__zjazd {
  position: absolute;
  right: max(1.25rem, calc((100vw - var(--szer-tresc)) / 2));
  bottom: var(--o-8);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--dotyk);
  height: 72px;
}
.hero__zjazd-kreska {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, var(--hero-akcent));
  overflow: hidden;
}
.hero__zjazd-kreska::after {
  content: "";
  display: block;
  width: 1px; height: 18px;
  background: var(--hero-tekst);
  animation: zjazd 2.2s var(--krzywa) infinite;
}
@keyframes zjazd {
  0%   { transform: translateY(-20px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* Przy przewijaniu hero odjeżdża wolniej niż treść — efekt głębi liczony
   przez przeglądarkę na osi czasu przewijania, bez ani jednego zdarzenia JS. */
@supports (animation-timeline: view()) {
  .hero__tresc {
    animation: hero-odjazd linear both;
    animation-timeline: view();
    animation-range: exit -10% exit 90%;
  }
  @keyframes hero-odjazd {
    to { transform: translateY(-60px) scale(.96); opacity: 0; }
  }
  /* ---------- NAJAZD STEROWANY PRZEWIJANIEM ------------------------------
     Roznica, ktora czuc: kadr nie jedzie sam z siebie w kolko, tylko
     REAGUJE na ruch czytelnika. W spoczynku widac CALE zdjecie; w miare
     przewijania kamera wjezdza w scene i przesuwa sie w bok, a tekst
     zostaje na miejscu. To jest ta sama zasada, co w filmie: ruch ma
     powod, a nie tylko ma byc.                                            */
  .hero__tlo {
    animation: hero-najazd linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 70%;
  }
  @keyframes hero-najazd {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.22) translate3d(-5%, 3%, 0); }
  }
}

/* DWIE DROGI — firma i osoba prywatna. Na telefonie to jest główny cel
   dotyku: dwa duże kafelki zamiast rzędu drobnych przycisków.
   (Ten blok został przypadkiem wycięty przy przebudowie sceny na telefon —
   bez niego SVG strzałki renderował się w domyślnym rozmiarze 300×150
   i rozpychał cały układ. Zapis dla następnego: przy cięciu pliku po
   indeksach zawsze sprawdź, co leży MIĘDZY znacznikami.) */
.tory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--o-3);
  margin-top: var(--o-6);
}
.tor { min-width: 0; }
.tor__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--o-3);
  min-height: 84px;
  height: 100%;
  padding: var(--o-4);
  border: 1px solid var(--hero-kafel-obrys);
  border-radius: var(--zaokr-m);
  background: var(--hero-kafel-tlo);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--hero-tekst);
  transition: border-color var(--czas-2) var(--krzywa),
              background-color var(--czas-2) var(--krzywa),
              transform var(--czas-2) var(--krzywa-wyraz);
}
.tor__link:hover { border-color: var(--bursztyn); background: light-dark(rgba(255,255,255,.92), rgba(7,13,26,.66)); transform: translateY(-3px); }
.tor__ikona {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  color: var(--hero-akcent);
  background: rgba(232,167,35,.16);
  border: 1px solid rgba(232,167,35,.34);
}
.tor__ikona .ikona { width: 22px; height: 22px; }
.tor__tresc { display: grid; gap: 1px; min-width: 0; }
.tor__etykieta {
  font-size: var(--t-nano);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hero-akcent);
  font-weight: 650;
}
.tor__tytul { font-weight: 700; font-size: var(--t-mały); }
.tor__opis { font-size: var(--t-nano); color: var(--hero-cichy); }
.tor__strzalka {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--hero-akcent);
  transition: transform var(--czas-2) var(--krzywa-wyraz);
}
.tor__link:hover .tor__strzalka { transform: translateX(4px); }

/* ================= TELEFON: SCENA OTWIERAJACA ==============================
   Zasada, z ktorej to wynika: na telefonie zdjecie ma byc WIDOCZNE W CALOSCI.
   Kadrowanie "cover" w wysokim pasie zawsze cos utnie — tu ucinalo przod
   bialego autokaru, czyli najwazniejszy pojazd w ofercie.
   Dlatego pas ma dokladnie proporcje kadru (16:9), nic nie jest przycinane,
   a tekst WCHODZI NA jego dolna krawedz — scena czyta sie jako jedna calosc,
   tak jak na monitorze, ale bez utraty ani jednego autobusu.
   ======================================================================== */
@media (max-width: 720px) {
  .hero {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    /* Bez wymuszonej pelnej wysokosci: scena ma byc ciasna, a nie rozciagnieta.
       Tresc idzie zaraz pod zdjeciem — `align-items: end` z reguly bazowej
       spychalo ja na dol i zostawialo pusty pas. */
    align-items: start;
    min-height: auto;
    padding-top: 74px;
    padding-bottom: calc(96px + var(--dol-bezpieczny, 0px));
    background: linear-gradient(180deg, var(--hero-tlo), light-dark(#e6eaf2, #0d1626));
  }

  .hero__scena {
    position: relative;
    inset: auto;
    grid-row: 1;
    aspect-ratio: 16 / 9;      /* proporcja kadru — zero przycinania */
    height: auto;
    overflow: hidden;
    /* Dolna krawedz wtapia sie w tlo, wiec nie ma linii ciecia. */
    -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0,0,0,.45) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 66%, rgba(0,0,0,.45) 86%, transparent 100%);
  }

  /* W SPOCZYNKU WIDAC CALE ZDJECIE: ramka ma proporcje kadru, wiec
     kadrowanie "cover" nic nie ucina przy skali 1. Ruch zaczyna sie dopiero
     wtedy, gdy czytelnik przewija — i wtedy kamera wjezdza w scene. */
  .hero__tlo { object-position: 50% 50%; }

  /* Zapas dla przegladarek bez osi czasu widoku: bardzo delikatny oddech,
     ktory nie chowa zadnego pojazdu (skala konczy sie na 1,04). */
  @supports not (animation-timeline: view()) {
    .hero__tlo {
      animation: hero-oddech 22s ease-in-out infinite alternate;
    }
    @keyframes hero-oddech {
      from { transform: scale(1); }
      to   { transform: scale(1.045); }
    }
  }

  .hero__mgla {
    background: linear-gradient(180deg,
      light-dark(rgba(238,241,247,.16), rgba(7,13,26,.30)) 0%,
      transparent 34%,
      light-dark(rgba(238,241,247,.34), rgba(7,13,26,.34)) 100%);
  }

  /* Tresc wchodzi na dolna krawedz zdjecia. */
  .hero__tresc {
    grid-row: 2;
    position: relative;
    z-index: 2;
    align-self: start;
    margin-top: -11vw;      /* tekst wchodzi na dolna krawedz zdjecia */
  }

  .hero__nadtytul { font-size: 10.5px; letter-spacing: .14em; margin-bottom: var(--o-2); }
  .hero__tytul {
    font-size: clamp(1.7rem, 6.8vw, 2.2rem);
    line-height: 1.06;
    letter-spacing: -.03em;
    text-wrap: balance;
    text-shadow: var(--hero-cien-tekst);
  }

  .hero__pisze {
    flex-wrap: nowrap;
    gap: var(--o-2);
    margin-top: var(--o-2);
    font-size: var(--t-mały);
    min-height: 1.6em;
    align-items: baseline;
  }
  .hero__pisze-etykieta { flex: none; font-size: 9.5px; letter-spacing: .16em; }
  .hero__pisze-slowo { min-height: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
  .hero__lead { display: none; }

  .tory { margin-top: var(--o-3); gap: var(--o-2); }
  .tor__link {
    min-height: 62px;
    padding: var(--o-3);
    gap: var(--o-3);
    border-radius: var(--zaokr-m);
    background: light-dark(rgba(255,255,255,.82), rgba(7, 13, 26, .55));
  }
  .tor__opis { display: none; }
  .tor__etykieta { font-size: 9.5px; letter-spacing: .13em; }
  .tor__tytul { font-size: var(--t-mikro); line-height: 1.25; }

  .hero__akcje {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dotyk);
    gap: var(--o-2);
    margin-top: var(--o-3);
  }
  .hero__akcje .przycisk { flex: initial; }
  .hero__akcje .przycisk--obrys { width: var(--dotyk); padding: 0; }
  .hero__akcje .przycisk--obrys span,
  .hero__akcje .przycisk--obrys .przycisk__strzalka { display: none; }
  .hero__akcje .przycisk--obrys .przycisk__sluchawka { display: block; }

  .hero__zjazd { display: none; }
  .ziarno { opacity: .12; }
}

@media (max-width: 480px) {
  .hero { padding-top: 70px; }
  .hero__nadtytul { display: none; }
  .hero__tytul { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .hero__tresc { margin-top: -9vw; }
}

/* ================= PAS ZAUFANIA (tuż pod sceną otwierającą) ==============
   Dowody i liczby wyprowadzone z hero: scena ma zmieścić się w pierwszym
   ekranie, a dziewięć elementów naraz tego nie zrobi. Tutaj są widoczne
   po najkrótszym ruchu w dół i nic nie przykrywają. */
/* Pas zaufania idzie za motywem tak samo jak scena nad nim. Wczesniej byl
   zawsze ciemny i pod jasna scena wygladal jak wklejka z innej strony. */
.zaufanie {
  --zaufanie-tekst: light-dark(#101826, #eef2f8);
  --zaufanie-cichy: light-dark(#4d5a6e, #9dabc2);
  --zaufanie-kreska: light-dark(rgba(16,24,38,.12), rgba(238,242,248,.16));

  width: 100%;
  padding: clamp(var(--o-5), 3vw, var(--o-7)) max(1.25rem, calc((100vw - var(--szer-tresc)) / 2));
  display: grid;
  gap: clamp(var(--o-4), 3vw, var(--o-7));
  color: var(--zaufanie-tekst);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(232,167,35,.14), transparent 62%),
    linear-gradient(180deg,
      light-dark(#e7ebf3, var(--granat-900)),
      light-dark(#dfe5ef, var(--granat-800)));
}
@media (min-width: 981px) { .zaufanie { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }

.zaufanie__dowody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--o-4);
}
.zaufanie__poz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o-3);
  align-items: start;
  font-size: var(--t-mikro);
  color: var(--zaufanie-cichy);
  line-height: 1.5;
}
.zaufanie__poz .ikona { color: var(--hero-akcent, var(--bursztyn)); margin-top: 2px; }
.zaufanie__poz strong { display: block; color: var(--zaufanie-tekst); font-weight: 650; }
.zaufanie__reszta { display: block; }
.zaufanie__poz a {
  display: inline-flex;
  align-items: center;
  min-height: var(--dotyk);
  color: light-dark(#b57c0a, #f7c85c);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 650;
}
.zaufanie__poz--link .zaufanie__reszta a { min-height: 0; font-weight: 500; }

.zaufanie__liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - var(--o-2), 150px), 1fr));
  gap: var(--o-4);
  padding-top: var(--o-4);
  border-top: 1px solid var(--zaufanie-kreska);
}
@media (min-width: 981px) {
  .zaufanie__liczby { padding-top: 0; border-top: 0; border-left: 1px solid var(--zaufanie-kreska); padding-left: var(--o-6); }
}
.zaufanie__liczba { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 2px; }
.zaufanie__liczba .licznik,
.zaufanie__liczba .zaufanie__staly,
.zaufanie__jednostka {
  font-family: var(--pismo-liczby);
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--zaufanie-tekst);
  font-variant-numeric: tabular-nums;
}
.zaufanie__jednostka { color: light-dark(#b57c0a, #e8a723); }
/* Jednostka dluzsza niz trzy znaki (np. "pojazdów") nie miesci sie w kroju
   liczb obok liczby: dostaje wlasny wiersz zwyklym pismem (pas-zaufania.js). */
.zaufanie__jednostka--slowo {
  grid-column: 1 / -1;
  font-family: var(--pismo);
  font-size: var(--t-mały);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.zaufanie__opis {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: var(--t-nano);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zaufanie-cichy);
  line-height: 1.4;
}

/* ============ DUŻY EKRAN: WEZWANIE I DWIE DROGI W JEDNYM RZĘDZIE =========
   Na komputerze jest miejsce, żeby przyciski i dwie ścieżki stały obok
   siebie, zamiast jedno pod drugim. Układ opisujemy obszarami siatki,
   więc kolejność w kodzie zostaje bez zmian (a to ona decyduje o tym,
   co czyta czytnik ekranu i w jakiej kolejności chodzi tabulator). */
@media (min-width: 981px) {
  .hero__tresc {
    max-width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(260px, auto) minmax(360px, 1fr);
    column-gap: clamp(var(--o-5), 3vw, var(--o-7));
    align-items: end;
    grid-template-areas:
      "nad   nad"
      "tytul tytul"
      "pisze pisze"
      "lead  lead"
      "akcje tory";
  }
  .hero__nadtytul { grid-area: nad; }
  .hero__tytul    { grid-area: tytul; max-width: 22ch; }
  .hero__pisze    { grid-area: pisze; }
  .hero__lead     { grid-area: lead; max-width: 56ch; }

  /* Przyciski jeden pod drugim, równej szerokości — kolumna wezwania. */
  .hero__akcje {
    grid-area: akcje;
    display: grid;
    gap: var(--o-3);
    margin-top: var(--o-6);
    align-self: stretch;
    align-content: end;
  }
  .hero__akcje .przycisk { width: 100%; justify-content: space-between; padding-inline: var(--o-5); }

  .tory {
    grid-area: tory;
    margin-top: var(--o-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
  }
  .tor__link { height: 100%; }
  /* Przy tej szerokości opis mieści się w całości — pokazujemy go. */
  .tor__opis { display: block; }
}

/* Między 861 a 980 px dwie drogi zostają obok siebie, ale wezwanie wraca
   pod spód — inaczej wszystko robi się za ciasne. */
@media (min-width: 861px) and (max-width: 980px) {
  .tory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sekcja__naglowek { max-width: var(--szer-tekst); margin-bottom: var(--o-7); }
.sekcja--flota .sekcja__naglowek,
.sekcja--mapa .sekcja__naglowek,
.sekcja--faq .sekcja__naglowek,
.sekcja--proces .sekcja__naglowek { margin-inline: auto; text-align: center; }

.sekcja__nad {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  font-size: var(--t-nano);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bursztyn-ciemny);
  margin-bottom: var(--o-3);
}
.sekcja__nad::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
}
.sekcja--ciemna .sekcja__nad { color: var(--bursztyn); }

.sekcja__tytul { font-size: var(--t-h2); }
.sekcja__lead {
  margin-top: var(--o-4);
  font-size: var(--t-lead);
  color: var(--tekst-cichy);
  max-width: 58ch;
}
.sekcja--flota .sekcja__lead,
.sekcja--mapa .sekcja__lead,
.sekcja--proces .sekcja__lead { margin-inline: auto; }

/* NAGLOWEK PODSTRONY — ten sam rytm co scena otwierajaca, ale bez pelnego
   ekranu. Barwy przelaczaja sie razem z motywem, dokladnie tak jak w scenie:
   kazda zapisana RAZ, funkcja light-dark(). Do tej pory baner byl zawsze
   ciemny, wiec w jasnym motywie kazda z 24 podstron zaczynala sie czarnym
   pasem, ktory nie pasowal do reszty. */
.naglowek-strony {
  --baner-tekst: light-dark(#101826, #eef2f8);
  --baner-cichy: light-dark(#4d5a6e, #9dabc2);
  --baner-akcent: light-dark(#b57c0a, #e8a723);

  position: relative;
  margin-top: -76px;
  padding: calc(76px + var(--o-8)) max(1.25rem, calc((100vw - var(--szer-tresc)) / 2)) var(--o-8);
  background:
    radial-gradient(900px 420px at 12% 0%,
      light-dark(rgba(232,167,35,.20), rgba(232,167,35,.18)), transparent 62%),
    linear-gradient(180deg,
      light-dark(#e9edf4, var(--granat-900)),
      light-dark(#dfe4ee, var(--granat-700)));
  color: var(--baner-tekst);
  overflow: clip;
}
.naglowek-strony__tytul { font-size: var(--t-h1); max-width: 20ch; }
.naglowek-strony__lead {
  margin-top: var(--o-4);
  max-width: 56ch;
  font-size: var(--t-lead);
  color: var(--baner-cichy);
}
.naglowek-strony .sekcja__nad { color: var(--baner-akcent); }
.naglowek-strony__smugi {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(115deg,
    transparent 0 58px,
    light-dark(rgba(16,24,38,.045), rgba(238,242,248,.05)) 58px 59px);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}

/* Rozłam: tekst obok zdjęcia. Na telefonie jedna kolumna. */
.rozlam {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--o-6), 4vw, var(--o-8));
  align-items: center;
}
.rozlam--waski { grid-template-columns: minmax(0, 1fr); max-width: var(--szer-tekst); }
.sekcja--rozlam-odwrotny .rozlam > :first-child { order: 2; }
.rozlam__akcje { margin-top: var(--o-6); }
@media (max-width: 860px) {
  .rozlam { grid-template-columns: minmax(0, 1fr); }
  .sekcja--rozlam-odwrotny .rozlam > :first-child { order: 0; }
}

/* Pas wezwania do działania. */
.wezwanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-6);
  margin-block: var(--o-9);
  padding: clamp(var(--o-6), 4vw, var(--o-8));
  border-radius: var(--zaokr-xl);
  color: var(--na-ciemnym);
  background:
    radial-gradient(700px 300px at 90% 10%, rgba(232,167,35,.22), transparent 65%),
    linear-gradient(135deg, var(--granat-800), var(--granat-600));
  box-shadow: var(--cien-3);
}
.wezwanie__tytul { font-size: var(--t-h2); max-width: 18ch; }
.wezwanie__lead { margin-top: var(--o-3); max-width: 46ch; color: var(--na-ciemnym-cichy); }
.wezwanie__akcje { display: flex; flex-wrap: wrap; gap: var(--o-3); }

/* Dokument tekstowy (polityka prywatności). */
.dokument { max-width: var(--szer-tekst); display: grid; gap: var(--o-4); }
.dokument h2 { font-size: var(--t-h3); margin-top: var(--o-5); }
.dokument p, .dokument li { color: var(--tekst-cichy); }
.dokument ul { display: grid; gap: var(--o-2); padding-left: var(--o-5); list-style: disc; }
.dokument__data { font-size: var(--t-mikro); color: var(--tekst-cichy); }

/* BANER PODSTRONY Z AKCJAMI I OBRAZEM (sekcje.js: banerStrony).
   Strona firmy przewozowej potrzebuje na kazdej podstronie dwoch rzeczy od
   razu pod tytulem: drogi do wyceny i telefonu. Obraz stoi po prawej tylko
   na szerokim ekranie; na telefonie schodzi pod tekst, zeby H1 i przyciski
   zostaly w pierwszym widoku. */
.naglowek-strony__akcje { display: flex; flex-wrap: wrap; gap: var(--o-3); margin-top: var(--o-6); }
.naglowek-strony--z-obrazem {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(var(--o-5), 4vw, var(--o-8));
  align-items: center;
}
.naglowek-strony--z-obrazem > .naglowek-strony__smugi,
.naglowek-strony--z-obrazem > style { grid-column: 1 / -1; }
.naglowek-strony__tekst { position: relative; min-width: 0; }
@media (max-width: 860px) {
  .naglowek-strony--z-obrazem { grid-template-columns: minmax(0, 1fr); }
}

/* OKRUSZKI: gdzie jestem i jedna droga w gore. Lista, bo to kolejnosc;
   separator rysuje CSS, wiec czytnik nie czyta ukosnikow. */
.okruszki { position: relative; margin-bottom: var(--o-5); }
.okruszki ol { display: flex; flex-wrap: wrap; gap: var(--o-2); list-style: none; padding: 0; margin: 0;
  font-size: var(--t-mikro); color: var(--baner-cichy, var(--tekst-cichy)); }
.okruszki li { display: inline-flex; align-items: center; gap: var(--o-2); }
.okruszki li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.okruszki a { display: inline-flex; align-items: center; min-height: 32px; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.okruszki a:hover { color: var(--baner-tekst, var(--tekst)); }
.okruszki [aria-current] { color: var(--baner-tekst, var(--tekst)); font-weight: 600; }

/* Dlugie slowo w tytule (np. "międzynarodowy") nie moze wyjsc poza kolumne:
   przegladarka przenosi je z dywizem tam, gdzie zna jezyk strony, a gdzie
   nie zna, lamie slowo zamiast przewijac strone w bok. */
.naglowek-strony__tytul { overflow-wrap: break-word; hyphens: auto; }

/* Wspólny szkielet karty — jedno miejsce na tło, obrys i uniesienie. */
.usluga, .atut, .pojazd-karta, .kontakt, .faq__pozycja, .flota__skrot, .liczba {
  background: var(--tlo-karta);
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  transition: transform var(--czas-2) var(--krzywa-wyraz),
              box-shadow var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa);
}
.sekcja--ciemna .atut {
  background: light-dark(rgba(255,255,255,.62), rgba(238,242,248,.045));
  border-color: light-dark(rgba(16,24,38,.10), rgba(238,242,248,.12));
}

/* USŁUGI */
.uslugi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--o-5); }
.usluga { overflow: hidden; display: flex; flex-direction: column; }
.usluga:hover { transform: translateY(-6px); box-shadow: var(--cien-2); border-color: var(--obrys-mocny); }
.usluga__tresc { padding: var(--o-5) var(--o-5) var(--o-6); display: flex; flex-direction: column; gap: var(--o-3); flex: 1; }
.usluga__skrot {
  font-size: var(--t-nano);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bursztyn-ciemny);
  font-weight: 650;
}
.usluga__nazwa { font-size: var(--t-h3); }
.usluga__opis { color: var(--tekst-cichy); font-size: var(--t-mały); }
.usluga__punkty { display: grid; gap: var(--o-2); margin-top: var(--o-1); }
.usluga__punkty li { display: flex; gap: var(--o-2); align-items: flex-start; font-size: var(--t-mały); color: var(--tekst-cichy); }
.usluga__punkty .ikona { color: var(--bursztyn-ciemny); margin-top: .25em; }
/* Cały kafelek jest celem kliknięcia: odnośnik rozciąga się na kartę,
   ale w kodzie zostaje JEDEN link — czytnik ekranu czyta nazwę usługi,
   a nie „czytaj więcej" pięć razy pod rząd. */
.usluga { position: relative; }
.usluga__caly::after { content: ""; position: absolute; inset: 0; }
.usluga__caly:focus-visible { outline: none; }
.usluga:has(.usluga__caly:focus-visible) { outline: 3px solid var(--bursztyn); outline-offset: 3px; }

.usluga__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  min-height: 44px;
  font-weight: 650;
  font-size: var(--t-mały);
  color: var(--tekst);
}
.usluga__link .ikona { transition: transform var(--czas-2) var(--krzywa-wyraz); color: var(--bursztyn-ciemny); }
.usluga__link:hover .ikona { transform: translateX(5px); }
@media (max-width: 960px) { .uslugi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .uslugi { grid-template-columns: minmax(0, 1fr); } }

/* ATUTY */
.atuty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--o-4); }
.atut { padding: var(--o-6) var(--o-5); display: grid; gap: var(--o-3); align-content: start; }
.atut:hover { transform: translateY(-4px); border-color: var(--bursztyn); }
.atut__ikona {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: var(--bursztyn);
  background: rgba(232,167,35,.12);
  border: 1px solid rgba(232,167,35,.28);
}
.atut__tytul { font-size: var(--t-h3); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.atut__tresc { font-size: var(--t-mały); color: var(--akcent-cichy, var(--tekst-cichy)); }
@media (max-width: 900px) { .atuty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .atuty { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; gap: var(--o-3); max-width: min(900px, 100%); margin-inline: auto; }
.faq__pozycja { padding: 0 var(--o-5); }
.faq__pozycja[open] { border-color: var(--obrys-mocny); box-shadow: var(--cien-1); }
.faq__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-4);
  min-height: 64px;
  padding-block: var(--o-3);
  font-size: var(--t-lead);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__znak { position: relative; width: 18px; height: 18px; flex: none; }
.faq__znak::before, .faq__znak::after {
  content: "";
  position: absolute; inset: 50% 0 auto;
  height: 2px;
  background: var(--bursztyn-ciemny);
  transition: transform var(--czas-2) var(--krzywa-wyraz);
}
.faq__znak::after { transform: rotate(90deg); }
.faq__pozycja[open] .faq__znak::after { transform: rotate(0deg); }
.faq__odpowiedz { padding-bottom: var(--o-5); color: var(--tekst-cichy); max-width: 70ch; }
.faq__pozycja[open] .faq__odpowiedz { animation: rozwin var(--czas-3) var(--krzywa-wyraz); }
@keyframes rozwin { from { opacity: 0; transform: translateY(-6px); } }

/* LICZBY */
.liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--o-4); }
.liczba {
  padding: var(--o-6) var(--o-5);
  display: grid; grid-template-columns: auto auto;
  align-items: baseline; justify-content: start; column-gap: 2px;
}
.liczba .licznik, .liczba__jednostka {
  font-family: var(--pismo-liczby);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.liczba__jednostka { color: var(--bursztyn-ciemny); }
.liczba__opis {
  grid-column: 1 / -1;
  margin-top: var(--o-2);
  font-size: var(--t-nano);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
}
@media (max-width: 860px) { .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* KONTAKTY */
.kontakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--o-4); margin-bottom: var(--o-7); }
.kontakt { padding: var(--o-5); display: grid; gap: var(--o-2); align-content: start; }
.kontakt:hover { transform: translateY(-4px); border-color: var(--bursztyn); }
.kontakt__ikona { color: var(--bursztyn-ciemny); }
.kontakt__tytul { font-size: var(--t-mikro); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-cichy); font-weight: 650; }
.kontakt__tresc { font-size: var(--t-lead); font-weight: 650; display: inline-flex; min-height: var(--dotyk); align-items: center; }
a.kontakt__tresc:hover { color: var(--bursztyn-ciemny); }
.kontakt__nota { font-size: var(--t-mikro); color: var(--tekst-cichy); }
@media (max-width: 800px) { .kontakty { grid-template-columns: minmax(0, 1fr); } }

/* FLOTA — skróty na stronie głównej */
.flota__skroty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--o-4);
  align-items: end;
}
.flota__skrot { overflow: hidden; display: grid; }
.foto--flota { --zaokr-foto: 0px; }
.foto--flota .foto__obraz { aspect-ratio: 4 / 3; }
.flota__opis { padding: var(--o-5); display: grid; gap: var(--o-1); }
.flota__skrot:hover { transform: translateY(-5px); box-shadow: var(--cien-2); border-color: var(--obrys-mocny); }
.flota__miejsca { font-size: var(--t-mały); color: var(--tekst-cichy); }
.flota__miejsca strong {
  font-family: var(--pismo-liczby);
  font-size: var(--t-h3);
  color: var(--tekst);
  letter-spacing: -.03em;
}
.flota__nazwa { font-weight: 650; }

@media (max-width: 820px) { .flota__skroty { grid-template-columns: minmax(0, 1fr); } }

/* FLOTA — karty na podstronie */
.pojazdy { display: grid; gap: var(--o-6); }
.pojazd-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--o-5), 3vw, var(--o-7));
  align-items: center;
  padding: clamp(var(--o-5), 3vw, var(--o-7));
}
.pojazd-karta:hover { border-color: var(--obrys-mocny); box-shadow: var(--cien-2); }
.foto--pojazd { --zaokr-foto: var(--zaokr-m); }
.foto--pojazd .foto__obraz { aspect-ratio: 4 / 3; }
.pojazd-karta__tresc { display: grid; gap: var(--o-4); justify-items: start; }
.pojazd-karta__nazwa { font-size: var(--t-h2); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.pojazd-karta__opis { color: var(--tekst-cichy); }

.dane-techniczne { display: flex; flex-wrap: wrap; gap: var(--o-5); margin: 0; }
.dane-techniczne div { display: grid; gap: 2px; }
.dane-techniczne dt {
  font-size: var(--t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
}
.dane-techniczne dd {
  margin: 0;
  font-family: var(--pismo-liczby);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.03em;
}
.wyposazenie { display: grid; gap: var(--o-2); }
.wyposazenie li { display: flex; align-items: center; gap: var(--o-2); font-size: var(--t-mały); color: var(--tekst-cichy); }
.wyposazenie .ikona { color: var(--bursztyn-ciemny); }

@media (max-width: 900px) { .pojazd-karta { grid-template-columns: minmax(0, 1fr); } }

/* MAPA TRAS */
.mapa { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--o-7); align-items: center; }
.mapa__plotno { position: relative; width: 100%; }
.mapa__kraj, .mapa__warstwa { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__kraj { opacity: light-dark(.82, .95); }
/* Warstwy prawdziwej mapy: woda, rzeki, granice. Kolejnosc rysowania
   odpowiada temu, co jest pod czym w terenie. */
.mapa__woda path { fill: none; stroke: #2b4a72; stroke-width: 1.6; }
.mapa__rzeki path { fill: none; stroke: #24405f; stroke-width: 1; opacity: .8; }
.mapa__granice path { fill: none; stroke: light-dark(rgba(16,24,38,.18), rgba(238,242,248,.16)); stroke-width: 1; }

.trasa {
  fill: none;
  stroke: var(--bursztyn);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  opacity: .85;
  animation: trasa-plynie 2.4s linear infinite;
  animation-delay: var(--zwloka, 0s);
}
@keyframes trasa-plynie { to { stroke-dashoffset: -44; } }

.punkt__rdzen { fill: var(--bursztyn-jasny); }
.punkt__puls {
  fill: none;
  stroke: var(--bursztyn);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: puls 2.6s var(--krzywa) infinite;
}
@keyframes puls {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.punkt__nazwa {
  fill: light-dark(#101826, #eef2f8);
  font-family: var(--pismo);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  paint-order: stroke;
  stroke: light-dark(rgba(255,255,255,.9), rgba(7,13,26,.85));
  stroke-width: 4px;
  stroke-linejoin: round;
}
.punkt__rdzen--baza { fill: #fff; stroke: var(--bursztyn); stroke-width: 3; }
.punkt__nazwa--baza { fill: var(--bursztyn-jasny); font-size: 17px; }

.lokalizacje { display: grid; gap: var(--o-4); }
.lokalizacja {
  padding-left: var(--o-4);
  border-left: 2px solid rgba(232,167,35,.4);
  scroll-margin-top: 120px;
}
.lokalizacja__nazwa { display: flex; align-items: center; gap: var(--o-2); font-size: var(--t-h3); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.lokalizacja__nazwa .ikona { color: var(--bursztyn); }
.lokalizacja__opis { font-size: var(--t-mały); color: var(--akcent-cichy, var(--tekst-cichy)); margin-top: var(--o-1); }

@media (max-width: 900px) { .mapa { grid-template-columns: minmax(0, 1fr); } }

/* ZDJĘCIA — serce ożywienia przy przewijaniu.
   Każde zdjęcie na stronie przechodzi przez ten jeden zestaw reguł:
   ramka się odsłania, obraz jedzie wolniej niż strona (paralaksa).
   Ruch opisany jest osią czasu widoku, więc liczy go przeglądarka
   poza wątkiem głównym — telefon nie gubi klatek. */

@property --foto-zoom { syntax: "<number>"; inherits: true; initial-value: 1.18; }

.foto {
  --zaokr-foto: var(--zaokr-xl);
  position: relative;
  margin: 0;
  border-radius: var(--zaokr-foto);
}

.foto__ramka {
  position: relative;
  overflow: hidden;
  border-radius: var(--zaokr-foto);
  background: var(--granat-800);
  box-shadow: var(--cien-2);
  isolation: isolate;
}
.foto__ramka::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.foto__obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.foto--usluga { --zaokr-foto: 0px; }
.foto--usluga .foto__ramka { box-shadow: none; }
.foto--usluga .foto__obraz { aspect-ratio: 4 / 3; }
.foto--rozlam .foto__obraz { aspect-ratio: 4 / 3; }

.foto__podpis {
  margin-top: var(--o-3);
  font-size: var(--t-mikro);
  color: var(--tekst-cichy);
  max-width: 46ch;
}
.sekcja--ciemna .foto__podpis { color: var(--akcent-cichy, var(--tekst-cichy)); }

/* 1. Ścieżka nowoczesna: oś czasu widoku. Zero JavaScriptu. */
@supports (animation-timeline: view()) {
  .foto__ramka {
    animation: foto-odsloniecie linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 85%;
  }
  @keyframes foto-odsloniecie {
    from { clip-path: inset(9% 9% 9% 9% round var(--zaokr-foto)); opacity: .72; }
    to   { clip-path: inset(0 0 0 0 round var(--zaokr-foto)); opacity: 1; }
  }

  .foto__obraz {
    animation: foto-paralaksa linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes foto-paralaksa {
    from { transform: scale(var(--foto-zoom)) translateY(-3.5%); }
    to   { transform: scale(var(--foto-zoom)) translateY(3.5%); }
  }
}

/* 2. Ścieżka zapasowa: klasa dokładana przez obserwatora przecięcia.
   Włącza się TYLKO wtedy, gdy skrypt wystartował (html.js) i przeglądarka
   nie zna osi czasu widoku — inaczej treść zostaje po prostu widoczna. */
@supports not (animation-timeline: view()) {
  .js .foto__ramka {
    clip-path: inset(9% 9% 9% 9% round var(--zaokr-foto));
    opacity: .72;
    transition: clip-path 1.1s var(--krzywa-wyraz), opacity .8s var(--krzywa);
  }
  .js .foto--widoczne .foto__ramka { clip-path: inset(0 0 0 0 round var(--zaokr-foto)); opacity: 1; }
  .js .foto__obraz { transform: scale(1.1); transition: transform 1.4s var(--krzywa-wyraz); }
  .js .foto--widoczne .foto__obraz { transform: scale(1); }
}

/* Delikatne przybliżenie pod kursorem. Sterowane zmienną, a nie własnością
   transform — inaczej animacja osi czasu widoku wygrałaby z przejściem
   i najechanie kursorem nie robiłoby NIC (zwykła pułapka kaskady). */
@media (hover: hover) {
  .foto { transition: --foto-zoom .9s var(--krzywa-wyraz); }
  .usluga:hover .foto, .foto--rozlam:hover { --foto-zoom: 1.27; }
}

@supports not (animation-timeline: view()) {
  .js .foto__obraz { transform: scale(var(--foto-zoom, 1.1)); }
  .js .foto--widoczne .foto__obraz { transform: scale(calc(var(--foto-zoom, 1.18) - .18)); }
}

/* SCENA DLA ZDJECIA WYCIETEGO Z TLA (pojazd bez tla, PNG/WebP z kanalem
   alfa). Zamiast prostokata z szarym tlem: jasna podloga, miekki cien pod
   kolami i poswiata marki za autem, jak w konfiguratorze samochodu.
   Zdjecie nigdy nie jest kadrowane (contain), wiec auto zawsze jest cale. */
.foto--scena .foto__ramka {
  --proporcja: 16 / 11;
  position: relative;
  display: grid;
  /* Jeden wiersz na cala wysokosc ramki: dopiero wtedy max-height: 100%
     obrazu ma od czego sie liczyc i auto nie wystaje ponad scene. */
  grid-template-rows: minmax(0, 1fr);
  place-items: end center;
  padding: clamp(var(--o-4), 4%, var(--o-7)) clamp(var(--o-4), 5%, var(--o-7)) clamp(var(--o-5), 6%, var(--o-7));
  border-radius: var(--zaokr-l);
  background:
    radial-gradient(60% 55% at 50% 38%, light-dark(rgba(232,167,35,.16), rgba(232,167,35,.14)), transparent 70%),
    linear-gradient(180deg, light-dark(#f4f6fa, #142036) 0 62%, light-dark(#e6eaf1, #0e182a) 62% 100%);
  border: 1px solid var(--obrys);
  overflow: hidden;
  isolation: isolate;
}
.foto--scena .foto__ramka::after {
  content: "";
  position: absolute;
  inset: auto 14% clamp(var(--o-4), 5.5%, var(--o-6));
  box-shadow: none;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, light-dark(rgba(16,24,38,.32), rgba(0,0,0,.55)), transparent);
  filter: blur(6px);
  z-index: -1;
}
.foto--scena .foto__obraz {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  animation: none;
  transform: none;
}

.kontakt-uklad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(var(--o-5), 3vw, var(--o-7));
  align-items: start;
}
@media (max-width: 940px) { .kontakt-uklad { grid-template-columns: minmax(0, 1fr); } }

.formularz {
  padding: clamp(var(--o-5), 3vw, var(--o-7));
  background: var(--tlo-karta);
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  box-shadow: var(--cien-1);
}
.formularz__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--o-4);
}
@media (max-width: 620px) { .formularz__siatka { grid-template-columns: minmax(0, 1fr); } }
.pole--szeroki { grid-column: 1 / -1; }

/* Pole z etykietą, która odjeżdża do góry. Etykieta jest prawdziwym
   <label>, nie tekstem zastępczym — czytnik ekranu ma co przeczytać. */
.pole { position: relative; display: grid; }
.pole__wejscie {
  width: 100%;
  min-height: var(--dotyk);
  padding: 22px var(--o-4) 8px;
  border: 1px solid var(--obrys-mocny);
  border-radius: var(--zaokr-m);
  background: var(--tlo);
  color: var(--tekst);
  font: inherit;
  font-size: var(--t-mały);
  transition: border-color var(--czas-1) var(--krzywa),
              box-shadow var(--czas-2) var(--krzywa),
              background-color var(--czas-1) var(--krzywa);
}
.pole__wejscie--tekst { padding-top: 26px; resize: vertical; min-height: 132px; line-height: 1.55; }
.pole__wejscie:hover { border-color: var(--granat-400); }
.pole__wejscie:focus {
  outline: none;
  border-color: var(--bursztyn);
  box-shadow: 0 0 0 4px rgba(232,167,35,.20);
  background: var(--tlo-karta);
}

.pole__etykieta {
  position: absolute;
  left: calc(var(--o-4) + 1px);
  top: 15px;
  font-size: var(--t-mały);
  color: var(--tekst-cichy);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--czas-2) var(--krzywa-wyraz), color var(--czas-1);
}
.pole__wejscie:focus + .pole__etykieta,
.pole__wejscie:not(:placeholder-shown) + .pole__etykieta,
.pole--wybor .pole__wejscie:valid + .pole__etykieta,
.pole__wejscie:-webkit-autofill + .pole__etykieta {
  transform: translateY(-9px) scale(.78);
  color: var(--bursztyn-ciemny);
}
.pole--wybor .pole__wejscie { appearance: none; cursor: pointer; }
.pole--wybor::after {
  content: "";
  position: absolute;
  right: var(--o-4); top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--tekst-cichy);
  border-bottom: 2px solid var(--tekst-cichy);
  transform: rotate(45deg);
  pointer-events: none;
}

.pole__podpowiedz { margin-top: var(--o-2); font-size: var(--t-nano); color: var(--tekst-cichy); }
.pole__blad {
  min-height: 0;
  margin-top: 0;
  font-size: var(--t-nano);
  font-weight: 600;
  color: #c0392b;
  opacity: 0;
  transition: opacity var(--czas-1);
}
.pole--zly .pole__wejscie { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.14); }
.pole--zly .pole__blad { opacity: 1; margin-top: var(--o-2); }

/* Pułapka na roboty. Ukryta przed człowiekiem i przed czytnikiem ekranu,
   ale obecna w drzewie — automat ją wypełni i zdradzi się. */
/* Pulapka musi zostac w drzewie (robot ma ja wypelnic), ale nie moze
   tworzyc prostokata daleko poza ekranem — mylilo to sonde ukladu.
   Chowamy ja NAD strona i oznaczamy jako niewidoczna dla czytnikow. */
.pulapka {
  position: absolute;
  top: -200px;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Celem dotyku jest CALA etykieta, nie sam kwadracik — dlatego to ona ma
   zadana wysokosc minimalna, a pole w srodku jest oznaczone dla sondy. */
.zgoda {
  min-height: var(--dotyk);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o-3);
  align-items: start;
  margin-top: var(--o-5);
  padding: var(--o-4);
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-m);
  background: var(--tlo);
  cursor: pointer;
}
.zgoda__pole { position: absolute; opacity: 0; width: 24px; height: 24px; }
.zgoda__znak {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin-top: 2px;
  border: 2px solid var(--obrys-mocny);
  border-radius: 7px;
  background: var(--tlo-karta);
  transition: background-color var(--czas-1), border-color var(--czas-1);
}
.zgoda__znak::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--granat-900);
  border-bottom: 2.5px solid var(--granat-900);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--czas-2) var(--krzywa-wyraz);
}
.zgoda__pole:checked + .zgoda__znak { background: var(--bursztyn); border-color: var(--bursztyn); }
.zgoda__pole:checked + .zgoda__znak::after { transform: rotate(-45deg) scale(1); }
.zgoda__pole:focus-visible + .zgoda__znak { outline: 3px solid var(--bursztyn); outline-offset: 3px; }
.zgoda__tekst { font-size: var(--t-nano); color: var(--tekst-cichy); line-height: 1.6; }

.formularz__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o-4);
  margin-top: var(--o-5);
}
.formularz__nota { font-size: var(--t-mikro); color: var(--tekst-cichy); }
.formularz__nota a { font-weight: 650; color: var(--tekst); }

.formularz__wynik {
  margin-top: var(--o-4);
  padding: 0 var(--o-4);
  max-height: 0;
  overflow: hidden;
  border-radius: var(--zaokr-m);
  font-size: var(--t-mały);
  font-weight: 600;
  transition: max-height var(--czas-3) var(--krzywa-wyraz), padding var(--czas-2);
}
.formularz__wynik--widoczny { max-height: 220px; padding: var(--o-4); }
.formularz__wynik--dobrze { background: rgba(46,160,90,.12); color: #1d7a45; border: 1px solid rgba(46,160,90,.3); }
.formularz__wynik--zle { background: rgba(192,57,43,.10); color: #a5302a; border: 1px solid rgba(192,57,43,.28); }

/* Bok strony kontaktowej */
.kontakt-uklad__bok {
  padding: clamp(var(--o-5), 3vw, var(--o-6));
  border-radius: var(--zaokr-l);
  color: var(--na-ciemnym);
  background: linear-gradient(160deg, var(--granat-800), var(--granat-600));
  display: grid;
  gap: var(--o-4);
  align-content: start;
}
.bok__tytul { font-size: var(--t-h3); }
.bok__tresc, .bok__godziny { font-size: var(--t-mały); color: var(--na-ciemnym-cichy); }
.bok__lista { display: grid; gap: var(--o-3); counter-reset: b; }
.bok__lista li {
  position: relative;
  padding-left: var(--o-7);
  font-size: var(--t-mały);
  color: var(--na-ciemnym-cichy);
  counter-increment: b;
}
.bok__lista li::before {
  content: counter(b);
  position: absolute;
  left: 0; top: -2px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(232,167,35,.16);
  border: 1px solid rgba(232,167,35,.4);
  color: var(--bursztyn-jasny);
  font-family: var(--pismo-liczby);
  font-size: var(--t-nano);
  font-weight: 700;
}
.bok__lista strong { color: var(--na-ciemnym); }
.bok__biuro { padding-top: var(--o-4); border-top: 1px solid rgba(238,242,248,.16); }
.bok__podtytul { font-size: var(--t-nano); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn); margin-bottom: var(--o-2); }
.bok__biuro address { font-style: normal; font-size: var(--t-mały); }

/* Pole opisu rośnie razem z tekstem — bez mierzenia wysokości w skrypcie.
   Przeglądarki, które tego nie znają, zostają przy zwykłym `rows` i suwaku. */
@supports (field-sizing: content) {
  .pole__wejscie--tekst {
    field-sizing: content;
    min-height: 132px;
    max-height: 46svh;
  }
}

.stopka {
  margin-top: var(--o-9);
  padding-top: var(--o-8);
  background: linear-gradient(180deg, var(--granat-900), #050912);
  color: var(--na-ciemnym);
}
.stopka__pas {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--o-6);
  padding-bottom: var(--o-8);
}
.stopka__kolumna { display: grid; gap: var(--o-3); align-content: start; }
.stopka__nazwa { font-size: var(--t-h3); font-weight: 800; letter-spacing: -.03em; }
.stopka__opis { font-size: var(--t-mikro); color: var(--na-ciemnym-cichy); max-width: 40ch; }
.stopka__telefon, .stopka__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  min-height: 44px;
  font-size: var(--t-mały);
  font-weight: 600;
  word-break: break-word;
}
.stopka__telefon:hover, .stopka__mail:hover { color: var(--bursztyn); }
.stopka__telefon .ikona, .stopka__mail .ikona { color: var(--bursztyn); }

.stopka__tytul {
  font-size: var(--t-nano);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bursztyn);
  font-weight: 650;
}
.stopka__kolumna ul { display: grid; gap: 0; }
.stopka__kolumna li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-mikro);
  color: var(--na-ciemnym-cichy);
  transition: color var(--czas-1), transform var(--czas-1) var(--krzywa);
}
.stopka__kolumna li a:hover { color: var(--na-ciemnym); transform: translateX(3px); }

.stopka__adres { font-style: normal; font-size: var(--t-mikro); color: var(--na-ciemnym-cichy); line-height: 1.9; }
.stopka__godziny { font-size: var(--t-nano); color: var(--na-ciemnym-cichy); }

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-4);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--o-5);
  border-top: 1px solid rgba(238,242,248,.12);
  font-size: var(--t-nano);
  color: var(--na-ciemnym-cichy);
}
.stopka__dol a { min-height: 44px; display: inline-flex; align-items: center; }
.stopka__dol a:hover { color: var(--bursztyn); }

@media (max-width: 1000px) {
  .stopka__pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stopka__kolumna--marka { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .stopka__pas { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   STOPKA NA TELEFONIE — I PODŚWIETLANIE ODNOŚNIKÓW
   Ten sam język, co w spisie treści: odnośnik jest wierszem, który zapala się
   bursztynową ramką. Dzięki temu stopka nie jest „listą linków na dole",
   tylko dalszym ciągiem tej samej strony.
   ========================================================================== */

.stopka__kolumna li a {
  --wiersz-tlo-akt: rgba(232, 167, 35, .16);
  --wiersz-obrys-akt: #f0b843;
  position: relative;
  width: 100%;
  padding: var(--o-2) var(--o-3);
  border-radius: var(--zaokr-s);
  border: 1px solid transparent;
  transition: color var(--czas-1) var(--krzywa),
              background-color var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa),
              transform var(--czas-2) var(--krzywa-wyraz);
}
.stopka__kolumna li a:hover,
.stopka__kolumna li a:focus-visible,
.stopka__kolumna li a.w-oku {
  color: var(--na-ciemnym);
  background: var(--wiersz-tlo-akt);
  border-color: var(--wiersz-obrys-akt);
  transform: translateX(4px);
}

/* Odnośniki zapalają się kolejno, gdy stopka wchodzi w kadr — tak samo
   jak wiersze spisu, na WŁASNEJ osi czasu każdego odnośnika. */
@supports (animation-timeline: view()) {
  .stopka__kolumna li a {
    animation: stopka-wiersz linear both;
    animation-timeline: view();
    animation-range: cover 42% cover 76%;
  }
  /* W klatkach TYLKO przesuniecie. Barwa zapalenia siedzi na warstwie
     ponizej — wartosci w klatkach kluczowych wyliczaja sie raz i po zmianie
     motywu zostalyby stare (zlapal to wlasny test arkusza). */
  @keyframes stopka-wiersz {
    0%   { transform: translateX(-8px); }
    45%  { transform: translateX(4px); }
    72%  { transform: translateX(3px); }
    100% { transform: none; }
  }

  /* Zapalenie ramki: osobna warstwa, animowana sama przezroczystoscia. */
  .stopka__kolumna li a::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: var(--wiersz-tlo-akt);
    box-shadow: inset 0 0 0 1px var(--wiersz-obrys-akt);
    opacity: 0;
    animation: stopka-blask linear both;
    animation-timeline: view();
    animation-range: cover 42% cover 76%;
  }
  @keyframes stopka-blask {
    0%   { opacity: 0; }
    45%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
  }
}
.oszczedny .stopka__kolumna li a,
.bez-osi .stopka__kolumna li a { animation: none !important; transform: none !important; }
.oszczedny .stopka__kolumna li a::before,
.bez-osi .stopka__kolumna li a::before { animation: none !important; opacity: 0 !important; }
.stopka__kolumna li a > * { position: relative; z-index: 1; }

/* ---------- UKŁAD NA TELEFONIE ------------------------------------------- */
@media (max-width: 760px) {
  .stopka { margin-top: var(--o-8); padding-top: var(--o-7); }
  .stopka__pas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--o-6);
    padding-bottom: var(--o-6);
  }

  /* Blok marki dostaje własną kartę — to on niesie telefon i adres. */
  .stopka__kolumna--marka {
    padding: var(--o-5);
    border-radius: var(--zaokr-l);
    background: rgba(238, 242, 248, .05);
    border: 1px solid rgba(238, 242, 248, .12);
  }
  .stopka__telefon {
    font-size: var(--t-h3);
    font-family: var(--pismo-liczby);
    letter-spacing: -.02em;
  }
  .stopka__spolecznosci { margin-top: var(--o-2); }

  /* Trzy listy odnośników obok siebie w dwóch kolumnach — bez przewijania
     przez pół ekranu, żeby dosięgnąć „Kontakt". */
  .stopka__kolumna:not(.stopka__kolumna--marka) ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    gap: 2px;
  }
  .stopka__kolumna li a { min-height: 46px; font-size: var(--t-mały); }
  .stopka__tytul { padding-inline: var(--o-3); }

  .stopka__adres, .stopka__godziny { padding-inline: var(--o-3); }
  .stopka__dojazd { margin-inline: var(--o-3); }

  .stopka__dol {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--o-2);
    text-align: left;
  }
}
@media (max-width: 420px) {
  .stopka__kolumna:not(.stopka__kolumna--marka) ul { grid-template-columns: minmax(0, 1fr); }
}

/* Wjazd treści przy przewijaniu.
   Zasada, której się trzymamy: element jest ukryty TYLKO wtedy, gdy coś
   na pewno go pokaże. Bez skryptu i bez osi czasu widoku treść po prostu
   stoi na miejscu — nigdy nie zostaje niewidoczna. */

[data-ozyw] { --zwloka-krok: 90ms; }

/* ============ CHOREOGRAFIA PRZEWIJANIA — CALA STRONA, KAZDA PODSTRONA =====

   Do tej pory element tylko WJEZDZAL i zostawal. Teraz ma pelny przelot:
   wjazd, spokojne trwanie w kadrze i odejscie w gore, kiedy schodzi z ekranu.
   To ono robi wrazenie, ze strona jest jednym ruchem, a nie ciagiem
   niezaleznych pojawien.

   DLACZEGO JEDNA ANIMACJA, A NIE DWIE. Kuszace jest dopisac osobna animacje
   "odejscia" obok "wjazdu". Nie wolno: obie ruszaja `transform`, a przy
   dwoch animacjach tej samej wlasciwosci wygrywa PoZNIEJSZA — wjazd
   przestalby dzialac w ogole. Dlatego caly przelot opisuje JEDEN zestaw
   klatek rozciagniety od wejscia w kadr do wyjscia z niego.                */
@supports (animation-timeline: view()) {
  [data-ozyw="wjazd"] {
    animation: przelot-tekstu linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    animation-delay: 0s;
  }
  [data-ozyw="karta"] {
    animation: przelot-karty linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  /* Opoznienie po numerze dziala nadal — przesuwa poczatek wjazdu
     wewnatrz tego samego przelotu. */
  [data-ozyw][data-zwloka="1"] { animation-range: entry -6% exit 100%; }
  [data-ozyw][data-zwloka="2"] { animation-range: entry -12% exit 100%; }
  [data-ozyw][data-zwloka="3"] { animation-range: entry -18% exit 100%; }
  [data-ozyw][data-zwloka="4"] { animation-range: entry -24% exit 100%; }
  [data-ozyw][data-zwloka="5"] { animation-range: entry -30% exit 100%; }
  [data-ozyw][data-zwloka="6"] { animation-range: entry -36% exit 100%; }
  [data-ozyw][data-zwloka="7"] { animation-range: entry -42% exit 100%; }
}

@keyframes przelot-tekstu {
  0%   { opacity: 0;   transform: translateY(30px); }
  20%  { opacity: 1;   transform: none; }
  76%  { opacity: 1;   transform: none; }
  100% { opacity: .22; transform: translateY(-24px); }
}
@keyframes przelot-karty {
  0%   { opacity: 0;   transform: translateY(38px) scale(.985); }
  22%  { opacity: 1;   transform: none; }
  76%  { opacity: 1;   transform: none; }
  100% { opacity: .18; transform: translateY(-30px) scale(.975); }
}

/* DROGA ZAPASOWA: ujawnianie obserwatorem przeciecia.
   Wchodzi w dwoch przypadkach — gdy silnik nie zna osi czasu przewijania
   (@supports) ALBO gdy zna, ale jej nie zwiazal (klasa `bez-osi` dokladana
   po POMIARZE przez js/03-ozyw.js). Oba prowadza do tego samego efektu. */
@supports not (animation-timeline: view()) {
  .js [data-ozyw] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .8s var(--krzywa) calc(var(--zwloka, 0) * var(--zwloka-krok)),
      transform .9s var(--krzywa-wyraz) calc(var(--zwloka, 0) * var(--zwloka-krok));
  }
  .js [data-ozyw].widoczne { opacity: 1; transform: none; }
}

.js.bez-osi [data-ozyw] {
  animation: none !important;
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s var(--krzywa) calc(var(--zwloka, 0) * var(--zwloka-krok)),
    transform .9s var(--krzywa-wyraz) calc(var(--zwloka, 0) * var(--zwloka-krok));
}
.js.bez-osi [data-ozyw].widoczne { opacity: 1; transform: none; }

@keyframes wjazd {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes karta-wjazd {
  from { opacity: 0; transform: translateY(38px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* NAGŁÓWEK SKŁADANY ZE SŁÓW.
   Każde słowo wjeżdża osobno, z opóźnieniem wynikającym z jego numeru.
   Bez skryptu i bez osi czasu widoku napis stoi normalnie — chowamy go
   wyłącznie wtedy, gdy na pewno mamy czym go pokazać. */
.rozsypane { display: block; }
.slowo { display: inline-block; }

@supports (animation-timeline: view()) {
  .slowo {
    animation: slowo-wjazd .7s var(--krzywa-wyraz) both;
    animation-timeline: view();
    animation-range: entry 0% entry 48%;
    animation-delay: calc(var(--nr) * 45ms);
  }
  @keyframes slowo-wjazd {
    from { opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
}
@supports not (animation-timeline: view()) {
  .js .rozsypane .slowo { opacity: 0; transform: translateY(.4em); transition: opacity .6s var(--krzywa) calc(var(--nr) * 45ms), transform .7s var(--krzywa-wyraz) calc(var(--nr) * 45ms); }
  .js .rozsypane.widoczne .slowo { opacity: 1; transform: none; }
}

/* TRASA, KTÓRA SIĘ RYSUJE.
   Linia z bazy do miasta powstaje w takt przewijania — długość kreski
   jest wprost przypięta do pozycji mapy w oknie. */
.trasa--rysowana {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: trasa-rysuje linear both;
}
@supports (animation-timeline: view()) {
  .trasa--rysowana { animation-timeline: view(); animation-range: entry 10% cover 55%; }
}
@supports not (animation-timeline: view()) {
  .trasa--rysowana { animation: trasa-rysuje 2.2s var(--krzywa) both; }
}
@keyframes trasa-rysuje { to { stroke-dashoffset: 0; } }

/* PRZEJŚCIE MIĘDZY PODSTRONAMI.
   To samo zdjęcie przejeżdża z kafelka na górę nowej strony, zamiast
   zniknąć i pojawić się gdzie indziej. Nazwę nadaje pomoc.js -> foto(). */
@view-transition { navigation: auto; }

/* KIERUNEK MA ZNACZENIE. Wejscie w glab serwisu wsuwa nowa strone z prawej,
   powrot wysuwa ja w lewo — tak jak w aplikacji. Rodzaj przejscia ustawia
   js/12-przejscia.js na podstawie tego, z ktorego poziomu dokad idziemy. */
::view-transition-old(root) { animation: znikanie .22s var(--krzywa) both; }
::view-transition-new(root) { animation: pojawianie .34s var(--krzywa-wyraz) both; }

html:active-view-transition-type(w-glab) {
  &::view-transition-old(root) { animation: wysuw-w-lewo .34s var(--krzywa) both; }
  &::view-transition-new(root) { animation: wsuw-z-prawej .42s var(--krzywa-wyraz) both; }
}
html:active-view-transition-type(wstecz) {
  &::view-transition-old(root) { animation: wysuw-w-prawo .34s var(--krzywa) both; }
  &::view-transition-new(root) { animation: wsuw-z-lewej .42s var(--krzywa-wyraz) both; }
}
@keyframes wysuw-w-lewo  { to { transform: translateX(-14%); opacity: 0; } }
@keyframes wsuw-z-prawej { from { transform: translateX(16%); opacity: 0; } }
@keyframes wysuw-w-prawo { to { transform: translateX(14%); opacity: 0; } }
@keyframes wsuw-z-lewej  { from { transform: translateX(-16%); opacity: 0; } }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: var(--krzywa-wyraz); }
.naglowek { view-transition-name: naglowek; }
@keyframes znikanie { to { opacity: 0; } }
@keyframes pojawianie { from { opacity: 0; transform: translateY(12px); } }

/* USUNIETE: content-visibility: auto na sekcjach.
   Powod jest konkretny: sekcja pominieta w malowaniu nie odgrywa animacji
   sterowanej przewijaniem, wiec element zostaje w KLATCE POCZATKOWEJ —
   a ta bywa przezroczysta. Efekt: tresc jest w kodzie, ale jej nie widac.
   Oszczednosc malowania nie jest warta znikajacej strony. */

/* WYŁĄCZNIK. Kto prosi system o mniej ruchu, dostaje stronę bez ruchu —
   ale z całą treścią. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-ozyw] { opacity: 1 !important; transform: none !important; }
  [data-ozyw] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .foto__ramka { clip-path: none !important; opacity: 1 !important; }
  .foto__obraz, .klatka__ramka, .krok__karta { transform: none !important; filter: none !important; opacity: 1 !important; }
  .hero__tlo { animation: none !important; transform: none !important; }
  .hero__scena { animation: none !important; clip-path: none !important; opacity: 1 !important; }
  .hero__blysk { display: none !important; }
  .slowo { opacity: 1 !important; transform: none !important; filter: none !important; }
  .trasa--rysowana { stroke-dashoffset: 0 !important; }
  .galeria__tor { transform: none !important; }
  @view-transition { navigation: none; }
}

/* Wydruk: bez ozdób, z pełną treścią i adresami odnośników. */
@media print {
  .naglowek, .hero__zjazd, .ziarno, .wezwanie__akcje, .formularz { display: none; }
  body { background: #fff; color: #000; }
  .sekcja--ciemna, .naglowek-strony, .stopka { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ============ PRZEŁĄCZENIE MOTYWU: ŚWIATŁO OD PRZYCISKU ==================
   Domyślne przenikanie tu przeszkadza — nowy motyw ma WYJŚĆ kołem z miejsca
   kliknięcia, a nie przetopić się w stary. Dlatego przy przejściu typu
   „motyw" zdejmujemy własne animacje z obu warstw i zostawiamy samo
   obcinanie, które nadaje js/06-motyw.js. */
html:active-view-transition-type(motyw),
html.motyw-przechodzi {
  &::view-transition-old(root) { animation: none; z-index: 0; }
  &::view-transition-new(root) { animation: none; z-index: 1; }
}

/* ============ SIATKA BEZPIECZEŃSTWA =======================================
   Klasę `bez-osi` dokłada js/15-osie.js, gdy zmierzy, że coś w polu widzenia
   wyszło niewidoczne — czyli gdy przeglądarka zna oś czasu przewijania,
   ale jej nie związała. Wtedy zdejmujemy wszystkie ukrywające animacje.
   Lepszy brak efektu niż brak treści. */
/* [data-ozyw] NIE jest tu wymienione celowo: w trybie zapasowym ma sie
   ujawniac obserwatorem przeciecia, a nie byc na sztywno pokazane.
   Wczesniej byl tu — i to wlasnie przez to na telefonie nie animowalo sie NIC. */
.bez-osi .spis__poz,
.bez-osi .spis__nr,
.bez-osi .klatka__podpis,
.bez-osi .klatka__obraz,
.bez-osi .rozdzial,
.bez-osi .rozdzial__nr,
.bez-osi .slowo,
.bez-osi .sekcja--ciemna,
.bez-osi .stopka,
.bez-osi .wezwanie,
.bez-osi .formularz,
.bez-osi .oswiadczenie,
.bez-osi .dobor__krok {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* GALERIA PRZEWIJANA W BOK.
   Sekcja jest wysoka, jej wnetrze przyklejone do gory ekranu, a tor ze
   zdjeciami jedzie w lewo w takt przewijania strony w dol. Ruch opisuje
   os czasu WIDOKU sekcji — przegladarka liczy go poza watkiem glownym,
   wiec nie ma tu ani jednego zdarzenia scroll w JavaScripcie. */

.galeria {
  --klatka: 34vw;
  --przerwa: 2vw;
  --margines: 6vw;
  position: relative;
  margin-block: var(--o-9);
  /* Ile trzeba przewinac w dol, zeby przejechac caly tor w bok. */
  min-height: calc(100svh + var(--ile) * 38vh);
  view-timeline: --galeria block;
}

.galeria__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: var(--o-5);
  padding-block: var(--o-7);
  overflow: hidden;
}

.galeria__glowa {
  padding-inline: max(var(--margines), calc((100vw - var(--szer-tresc)) / 2));
}
.galeria__wskazowka {
  display: inline-flex;
  align-items: center;
  gap: var(--o-2);
  margin-top: var(--o-4);
  font-size: var(--t-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
}
.galeria__strzalka {
  width: 46px; height: 2px;
  background: linear-gradient(90deg, var(--bursztyn), transparent);
  animation: wskaz 2.4s var(--krzywa) infinite;
}
@keyframes wskaz { 50% { transform: translateX(10px); opacity: .4; } }

.galeria__tor {
  display: flex;
  gap: var(--przerwa);
  align-items: center;
  padding-inline: max(var(--margines), calc((100vw - var(--szer-tresc)) / 2));
  will-change: transform;
}

.klatka { flex: 0 0 var(--klatka); margin: 0; }
.klatka__ramka {
  overflow: hidden;
  border-radius: var(--zaokr-l);
  background: var(--granat-800);
  box-shadow: var(--cien-2);
}
.klatka__obraz {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.klatka__podpis.w-oku { opacity: 1; }
.klatka__podpis {
  display: flex;
  align-items: baseline;
  gap: var(--o-3);
  margin-top: var(--o-3);
  font-size: var(--t-mikro);
  color: var(--tekst-cichy);
}
.klatka__podpis span {
  font-family: var(--pismo-liczby);
  font-size: var(--t-nano);
  color: var(--bursztyn-ciemny);
  letter-spacing: .08em;
}

/* 1. Sciezka nowoczesna: tor jedzie w bok osia czasu widoku sekcji. */
@supports (animation-timeline: view()) {
  .galeria__tor {
    animation: jazda-w-bok linear both;
    animation-timeline: --galeria;
    animation-range: contain 0% contain 100%;
  }
  @keyframes jazda-w-bok {
    to {
      transform: translateX(calc(-1 * (var(--ile) * (var(--klatka) + var(--przerwa)) - 100vw + var(--margines) * 2)));
    }
  }
  /* Klatka na srodku ekranu jest pelna, te przy krawedziach delikatnie
     mniejsze — i NIC WIECEJ.
     BLAD, KTORY TU BYL: klatki mialy `rotate(1.4deg)` w klatce poczatkowej
     i zakres konczacy sie w polowie. Poza zakresem animacja zostaje w stanie
     brzegowym, wiec wszystko po prawej stronie toru stalo PRZEKRZYWIONE
     i wyblakle — dokladnie tak, jak nie mialo wygladac.
     Dlatego teraz: zero obrotu i klatki SYMETRYCZNE (poczatek = koniec),
     dzieki czemu zaden stan brzegowy nie jest stanem zepsutym. */
  .klatka__ramka {
    animation: klatka-oddycha linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
  }
  @keyframes klatka-oddycha {
    /* ZERO przygaszania. Zdjecie ma byc widoczne w kazdym punkcie toru —
       jedyna zmiana to ulamek skali, zeby srodek ekranu byl wyrazniejszy. */
    0%   { transform: scale(.965); }
    50%  { transform: none; }
    100% { transform: scale(.965); }
  }
}

/* 2. Telefon i przegladarki bez osi czasu: ten sam tor jest zwyklym pasem
      przewijanym palcem, z zatrzaskiem na kazdym zdjeciu. Palec w lewo
      przesuwa zdjecia w lewo — dokladnie tak, jak reka sie spodziewa. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .galeria { min-height: 0; view-timeline: none; }
  .galeria__pin { position: static; height: auto; overflow: visible; }
  .galeria__tor { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margines); padding-bottom: var(--o-4); }
  .klatka { flex-basis: min(78vw, 420px); scroll-snap-align: center; }
  .klatka__ramka { animation: none; transform: none; opacity: 1; }
  .galeria__tor { animation: none; transform: none; }
}
@supports not (animation-timeline: view()) {
  .galeria { min-height: 0; }
  .galeria__pin { position: static; height: auto; overflow: visible; }
  .galeria__tor { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--o-4); }
  .klatka { flex-basis: min(78vw, 420px); scroll-snap-align: center; }
}

/* Pasek przewijania toru — cienki, w barwie marki, zamiast systemowego. */
.galeria__tor { scrollbar-width: thin; scrollbar-color: var(--bursztyn) transparent; }

/* Strzalki karuzeli rysowane przez przegladarke — bez ani jednego przycisku
   w kodzie i bez skryptu. To jest ta czesc CSS-owych karuzel, ktora
   w 2026 wchodzi do przegladarek; gdzie jej nie ma, zostaje samo
   przewijanie palcem. */
/* UWAGA — TU BYL BLAD. Ten blok nie mial ograniczenia do waskiego ekranu.
   Gdy przegladarka doczekala sie obslugi karuzel CSS, wstawila grupe
   przyciskow i kropek DO SRODKA toru, ktory na komputerze jest zwyklym
   rzedem flex — i rozbila uklad. Sterowanie karuzeli ma sens wylacznie
   tam, gdzie tor NAPRAWDE sie przewija, czyli na telefonie. */
@supports selector(::scroll-button(*)) {
  @media (max-width: 900px) {
  .galeria__tor {
    scroll-button-group: after;
    scroll-behavior: smooth;
  }
  .galeria__tor::scroll-button(*) {
    display: grid;
    place-items: center;
    width: var(--dotyk); height: var(--dotyk);
    margin-top: var(--o-4);
    border: 1px solid var(--obrys-mocny);
    border-radius: 999px;
    background: var(--tlo-karta);
    color: var(--tekst);
    font-size: 18px;
    cursor: pointer;
    transition: border-color var(--czas-1), transform var(--czas-1);
  }
  .galeria__tor::scroll-button(*):hover { border-color: var(--bursztyn); }
  .galeria__tor::scroll-button(*):disabled { opacity: .35; cursor: default; }
  .galeria__tor::scroll-button(left)  { content: "\2190"; }
  .galeria__tor::scroll-button(right) { content: "\2192"; }
  .galeria__tor::scroll-button-group { display: flex; gap: var(--o-2); justify-content: flex-end; }
  }
}

/* Kropki karuzeli tam, gdzie przegladarka juz je umie zrobic sama. */
@supports selector(::scroll-marker) {
  @media (max-width: 900px) {
    .galeria__tor { scroll-marker-group: after; }
    .galeria__tor::scroll-marker-group { display: flex; justify-content: center; gap: var(--o-2); padding-top: var(--o-4); }
    .klatka::scroll-marker {
      content: "";
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--obrys-mocny);
      transition: background-color var(--czas-1), transform var(--czas-1);
    }
    .klatka::scroll-marker:target-current { background: var(--bursztyn); transform: scale(1.4); }
  }
}

/* ============ RYTM WIELKOŚCI ==============================================
   Osiem kadrów tej samej szerokości czyta się jak krata w arkuszu. Co trzeci
   jest węższy, więc pas nabiera rytmu — i to jest cała różnica między
   „galerią" a „taśmą ze zdjęciami". */
.klatka--szeroka { flex-basis: var(--klatka); }
.klatka--waska   { flex-basis: calc(var(--klatka) * .68); }

/* ============ PASEK POSTĘPU ==============================================
   USUNIĘTY ŻYWY LICZNIK. Był zbudowany na animowanej własności
   niestandardowej podawanej do `counter()` — pomysł ładny, ale kruchy:
   `steps(var(--ile))` nie jest przyjmowane przez wszystkie silniki, a gdy
   podstawienie nie wyjdzie, licznik pokazuje 01, potem 00. Widać to było
   od razu. Zostaje uczciwy zakres „01 … 08" i pasek, który NAPRAWDĘ
   pokazuje położenie — bo rusza go sama oś czasu przewijania. */

.galeria__pasek {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--o-4);
  margin-top: var(--o-5);
  padding-inline: max(var(--margines), calc((100vw - var(--szer-tresc)) / 2));
  font-family: var(--pismo-liczby);
  font-size: var(--t-mikro);
  letter-spacing: .1em;
  color: var(--tekst-cichy);
}
.galeria__zakres { color: var(--bursztyn-ciemny); font-weight: 700; }
.galeria__szyna {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--obrys);
  overflow: hidden;
}
.galeria__suwak {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bursztyn-ciemny), var(--bursztyn));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@supports (animation-timeline: view()) {
  .galeria__suwak {
    animation: galeria-postep linear both;
    animation-timeline: --galeria;
    animation-range: contain 0% contain 100%;
  }
  @keyframes galeria-postep { to { transform: scaleX(1); } }

  /* PODPIS ZAPALA SIĘ, GDY KADR JEST NA ŚRODKU — oko dostaje informację
     dokładnie o tym zdjęciu, na które właśnie patrzy. */
  .klatka__podpis {
    animation: podpis-swieci linear both;
    animation-timeline: view(inline);
    animation-range: cover 12% cover 88%;
  }
  @keyframes podpis-swieci {
    0%   { opacity: .28; transform: translateY(6px); }
    45%  { opacity: 1;   transform: none; }
    55%  { opacity: 1;   transform: none; }
    100% { opacity: .28; transform: translateY(6px); }
  }

  /* PARALAKSA WEWNĄTRZ KADRU: zdjęcie sunie wolniej niż jego ramka,
     więc pas dostaje głębi zamiast płaskiego przesuwania. */
  .klatka__obraz {
    animation: klatka-paralaksa linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
  }
  @keyframes klatka-paralaksa {
    from { transform: scale(1.14) translateX(4%); }
    to   { transform: scale(1.14) translateX(-4%); }
  }
}

.oszczedny .galeria__suwak,
.oszczedny .klatka__podpis,
.oszczedny .klatka__obraz { animation: none !important; transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .galeria__suwak, .klatka__podpis, .klatka__obraz {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
}
@media (max-width: 900px) {
  .klatka--szeroka, .klatka--waska { flex-basis: min(78vw, 420px); }
  .galeria__pasek { display: none; }   /* na telefonie rolę tę pełnią kropki karuzeli */
}

/* KROKI, KTÓRE NACHODZĄ NA SIEBIE.
   Każda kartka przykleja się do góry ekranu i chowa poprzednią pod sobą —
   czytelnik widzi, jak proces się „układa", zamiast mijać cztery bliźniacze
   prostokąty. Cały efekt to position: sticky plus jedna animacja skalowania. */

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

@media (min-width: 861px) {
  .proces {
    /* Zapas wysokości potrzebny, żeby kartki miały się gdzie przyklejać. */
    padding-bottom: calc(var(--ile) * 3vh);
  }
  .krok {
    position: sticky;
    top: calc(92px + var(--nr) * 18px);
  }
  .krok__karta {
    background: var(--tlo-karta);
    border: 1px solid var(--obrys);
    border-radius: var(--zaokr-l);
    padding: clamp(var(--o-5), 3vw, var(--o-7));
    box-shadow: var(--cien-2);
    display: grid;
    gap: var(--o-3);
    align-content: start;
    min-height: 210px;
  }
  @supports (animation-timeline: view()) {
    .krok__karta {
      animation: krok-chowa linear both;
      animation-timeline: view();
      animation-range: exit -20% exit 60%;
      transform-origin: 50% 0;
    }
    @keyframes krok-chowa {
      to { transform: scale(.94); filter: brightness(.86); }
    }
  }
}

@media (max-width: 860px) {
  .krok__karta {
    background: var(--tlo-karta);
    border: 1px solid var(--obrys);
    border-radius: var(--zaokr-m);
    padding: var(--o-5);
    display: grid;
    gap: var(--o-2);
  }
}

.krok__numer {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--granat-800);
  color: var(--bursztyn);
  font-family: var(--pismo-liczby);
  font-weight: 700;
  font-size: var(--t-mały);
}
.krok__tytul { font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); }
.krok__tresc { font-size: var(--t-mały); color: var(--tekst-cichy); max-width: 62ch; }

/* ===================== MENU — KOMPUTER ===================================== */
.menu__poz { position: relative; display: flex; align-items: center; }

.menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--o-1);
  min-height: var(--dotyk);
  padding: 0 var(--o-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-mikro);
  font-weight: 550;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color var(--czas-1) var(--krzywa), background-color var(--czas-1) var(--krzywa);
}
.menu__link:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.menu__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  width: 0; height: 2px;
  background: var(--bursztyn);
  transform: translateX(-50%);
  transition: width var(--czas-2) var(--krzywa-wyraz);
}
.menu__link:hover::after,
.menu__link--tu::after,
.menu__link[aria-expanded="true"]::after { width: calc(100% - 2 * var(--o-4)); }

.menu__daszek { width: 14px; height: 14px; transition: transform var(--czas-2) var(--krzywa-wyraz); }
.menu__link--panel .menu__daszek { transform: rotate(90deg); }
.menu__link[aria-expanded="true"] .menu__daszek { transform: rotate(-90deg); }

/* ===================== MEGA-PANEL ========================================= */
.mega {
  position: fixed;
  inset: auto;
  top: calc(76px + var(--gora-bezpieczna, 0px));
  left: 50%;
  translate: -50%;
  width: min(1120px, calc(100vw - 2.5rem));
  max-height: min(70svh, 640px);
  overflow-y: auto;
  margin: 0;
  padding: clamp(var(--o-4), 2vw, var(--o-6));
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  background: var(--tlo-karta);
  box-shadow: var(--cien-3);
  color: var(--tekst);
  /* Wejście: przezroczystość i drobny zjazd. @starting-style opisuje stan
     SPRZED otwarcia — bez niego panel pojawia się skokiem. */
  opacity: 0;
  transform: translateY(-10px) scale(.99);
  transition:
    opacity .22s var(--krzywa),
    transform .28s var(--krzywa-wyraz),
    overlay .28s allow-discrete,
    display .28s allow-discrete;
}
.mega:popover-open { opacity: 1; transform: none; }
@starting-style { .mega:popover-open { opacity: 0; transform: translateY(-10px) scale(.99); } }
.mega::backdrop { background: rgba(7, 13, 26, .28); backdrop-filter: blur(2px); }
.oszczedny .mega::backdrop { backdrop-filter: none; }

.mega__pasek { display: none; }

.mega__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(var(--o-4), 2vw, var(--o-6));
  align-items: start;
}
.mega--miasta .mega__siatka { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.mega__lista { display: grid; gap: var(--o-1); }
.mega__lista--dwie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.mega__poz {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 62px;
  align-content: center;
  padding: var(--o-3) var(--o-4);
  padding-right: var(--o-7);
  border-radius: var(--zaokr-m);
  transition: background-color var(--czas-1) var(--krzywa);
}
.mega__poz:hover, .mega__poz:focus-visible { background: var(--tlo-cichy); }
.mega__poz--tu { background: color-mix(in srgb, var(--bursztyn) 14%, transparent); }
.mega__poz-nazwa { display: flex; align-items: center; gap: var(--o-2); font-weight: 650; font-size: var(--t-mały); }
.mega__poz-nazwa .ikona { color: var(--bursztyn-ciemny); }
.mega__poz-opis { font-size: var(--t-nano); color: var(--tekst-cichy); }
.mega__poz-strzalka {
  position: absolute;
  right: var(--o-4); top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  color: var(--bursztyn-ciemny);
  opacity: 0;
  transition: opacity var(--czas-1), transform var(--czas-2) var(--krzywa-wyraz);
}
.mega__poz:hover .mega__poz-strzalka { opacity: 1; transform: translateX(3px); }

.mega__promo {
  display: grid;
  gap: var(--o-3);
  padding: var(--o-3);
  border-radius: var(--zaokr-m);
  border: 1px solid var(--obrys);
  background: var(--tlo);
  transition: border-color var(--czas-1), transform var(--czas-2) var(--krzywa-wyraz);
}
.mega__promo:hover { border-color: var(--bursztyn); transform: translateY(-3px); }
.mega__obraz { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--zaokr-s); }
.mega__obraz--mapa { object-fit: contain; background: var(--granat-800); padding: var(--o-2); }
.mega__promo-tresc { display: grid; gap: 2px; }
.mega__promo-etykieta { font-size: var(--t-nano); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn-ciemny); font-weight: 650; }
.mega__promo-tytul { font-weight: 700; font-size: var(--t-mały); }
.mega__promo-opis { font-size: var(--t-nano); color: var(--tekst-cichy); }

.mega__kontakt {
  display: grid;
  gap: var(--o-3);
  align-content: start;
  padding: var(--o-4);
  border-radius: var(--zaokr-m);
  color: var(--na-ciemnym);
  background: linear-gradient(160deg, var(--granat-800), var(--granat-600));
}
.mega__kontakt-tytul { font-weight: 700; font-size: var(--t-mały); }
.mega__telefon {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: var(--dotyk);
  font-family: var(--pismo-liczby);
  font-weight: 700;
  color: var(--bursztyn-jasny);
}

/* Odnośniki-ikony (Facebook, Google, dojazd). */
.ikona-link {
  display: inline-grid;
  place-items: center;
  width: var(--dotyk); height: var(--dotyk);
  border-radius: 999px;
  color: inherit;
  transition: color var(--czas-1), background-color var(--czas-1);
}
.ikona-link:hover { color: var(--bursztyn); background: color-mix(in srgb, var(--bursztyn) 12%, transparent); }
.ikona-link--z-napisem {
  width: auto;
  min-height: var(--dotyk);
  grid-auto-flow: column;
  gap: var(--o-2);
  padding-inline: var(--o-4);
  border: 1px solid var(--obrys-mocny);
  font-size: var(--t-mikro);
  font-weight: 600;
}

/* ============ NAWIGACJA NA TELEFONIE — DOLNY PASEK JAK W APLIKACJI ==========
   Zamiast hamburgera chowającego całą nawigację: pasek przy kciuku
   z ikonami, PRZEWIJANY W BOK, z zatrzaskiem na pozycjach. Dwie pozycje
   otwierają panel pełnoekranowy, reszta to zwykłe odnośniki.
   Przewijanie jest natywne — działa bez JavaScriptu i bez bibliotek. */

.dolny { display: none; }

@media (max-width: 900px) {
  /* Górna lista znika: na telefonie nawigacja mieszka na dole. */
  .menu { display: none; }

  /* PASEK UNOSZACY SIE NAD TRESCIA — nie przyklejona do krawedzi listwa,
     tylko osobny element ze szkla, z marginesem, duzym promieniem i cieniem.
     Tak wygladaja paski nawigacji w aplikacjach mobilnych 2026. */
  /* PASEK PRZY SAMEJ KRAWEDZI, NIE UNOSZACY SIE.
     Na iPhonie pasek adresu Safari stoi na dole i zmienia wysokosc przy
     przewijaniu. Element odsuniety od krawedzi o 10 px raz przylegal, raz
     wisial w powietrzu nad paskiem adresu — wygladalo to, jakby menu
     "latalo po srodku". Przy krawedzi tego problemu nie ma: pasek zachowuje
     sie jak natywna listwa zakladek, a zaokraglone sa tylko gorne rogi. */
  .dolny {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 6px;
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + var(--dol-bezpieczny, 0px));
    border-radius: 22px 22px 0 0;
    background: color-mix(in srgb, var(--tlo-karta) 84%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--obrys) 80%, transparent);
    border-bottom: 0;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
      0 -2px 6px rgba(7, 13, 26, .08),
      0 -12px 34px rgba(7, 13, 26, .18);
  }

  .dolny__tor {
    display: flex;
    gap: var(--o-1);
    overflow-x: auto;
    scrollbar-width: none;
    /* ŻADNEJ maski gradientowej na krawędzi. Miała podpowiadać, że da się
       przewinąć — a wyglądała jak ucięte menu. Zamiast tego zapas na końcu
       toru, żeby ostatnia pozycja dawała się dosunąć do środka. */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    padding-inline: 2px;
    padding-bottom: 7px;   /* miejsce na kreske postepu pod kaflami */
  }
  .dolny__tor::-webkit-scrollbar { display: none; }

  /* KAZDY KAFEL MA TEN SAM ROZMIAR. Rowna szerokosc sprawia, ze pasek
     wyglada jak nawigacja aplikacji, a nie jak lista przycietych napisow.
     Co sie nie miesci przed przyciskiem "Zadzwon" — przewija sie w bok. */
  /* Elementem siatki flex jest <li>, nie odnosnik w srodku. Szerokosc
     ustawiona tylko na odnosniku sprawiala, ze <li> kurczylo sie ponizej
     tresci i NAPIS BYL PRZYCINANY. Rozmiar nadajemy obu. */
  .dolny__tor > li { flex: 0 0 var(--kafel, 78px); display: flex; }

  .dolny__poz,
  .dolny__telefon {
    position: relative;
    flex: 0 0 var(--kafel, 78px);
    width: var(--kafel, 78px);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 54px;
    padding: var(--o-2) 4px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--tekst-cichy);
    font: inherit;
    scroll-snap-align: start;
    cursor: pointer;
    transition: color var(--czas-1) var(--krzywa),
                background-color var(--czas-2) var(--krzywa),
                transform var(--czas-1) var(--krzywa);
  }
  .dolny__ikona { width: 22px; height: 22px; }
  .dolny__napis {
    font-size: 10.5px;
    letter-spacing: 0;
    font-weight: 600;
    white-space: nowrap;
    /* Gdyby kiedys pojawil sie dluzszy podpis — ma sie zmiescic, a nie
       wyjechac na sasiada. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pozycja biezaca: miekka bursztynowa pigulka z wewnetrznym swiatlem
     i delikatna poswiata — czytelna, a nie krzyczaca. */
  .dolny__poz--tu,
  .dolny__poz[aria-expanded="true"] {
    color: var(--bursztyn-ciemny);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bursztyn) 22%, transparent),
        color-mix(in srgb, var(--bursztyn) 12%, transparent));
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--bursztyn) 34%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
  }
  .dolny__poz--tu .dolny__ikona { transform: translateY(-1px); }
  .dolny__poz--tu .dolny__napis { font-weight: 700; }
  .dolny__poz:active { transform: scale(.93); }
  .dolny__poz:not(.dolny__poz--tu):hover { background: color-mix(in srgb, var(--tekst) 6%, transparent); }

  /* Przycisk "Zadzwon" NIE przewija sie razem z torem — stoi na swoim
     miejscu, oddzielony kreska, zawsze pod kciukiem. */
  .dolny__telefon {
    --kafel: 84px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--bursztyn-jasny), var(--bursztyn) 52%, var(--bursztyn-ciemny));
    color: var(--granat-900);
    font-weight: 700;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .55),
      inset 0 -1px 0 rgba(0, 0, 0, .18),
      0 6px 18px rgba(232, 167, 35, .34);
  }
  .dolny__telefon .dolny__napis { font-weight: 700; }
  /* Bez kreski na krawedzi. Tor ma wlasny promien, wiec kafel, ktory
     jeszcze sie nie zmiescil, jest przyciety ZAOKRAGLONYM rogiem — to
     czyta sie jako "jest tego wiecej", a nie jako zepsuty uklad. */
  .dolny__okno { position: relative; min-width: 0; display: grid; }
  .dolny__tor { border-radius: 20px; }

  /* WSKAZNIK POSTEPU TORU. Mowi dwie rzeczy naraz: ze da sie przewijac
     i ile jeszcze zostalo. Suwak jedzie osia czasu przewijania toru —
     to jest ten sam mechanizm, co pasek postepu czytania w naglowku. */
  .dolny__postep {
    position: absolute;
    left: 8px; right: 8px; bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--tekst) 12%, transparent);
    overflow: hidden;
    pointer-events: none;
  }
  .dolny__postep-suwak {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--bursztyn);
  }
  @supports (animation-timeline: scroll()) {
    .dolny__postep-suwak {
      animation: dolny-suwak linear both;
      animation-timeline: scroll(nearest inline);
      animation-range: 0% 100%;
    }
    @keyframes dolny-suwak { to { transform: translateX(138%); } }
  }
  @supports not (animation-timeline: scroll()) {
    .dolny__postep { display: none; }
  }

  /* Treść nie może chować się pod paskiem. */
  body { padding-bottom: calc(96px + var(--dol-bezpieczny, 0px)); }
  .stopka__dol { padding-bottom: var(--o-5); }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .dolny { animation: dolny-wjazd .5s var(--krzywa-wyraz) both; }
  @keyframes dolny-wjazd { from { transform: translateY(100%); } }
}
.oszczedny .dolny { backdrop-filter: none; background: var(--tlo); }

/* Panel podrzędny na telefonie: pełny ekran, wjazd z boku, pasek powrotu. */
@media (max-width: 900px) {
  .mega {
    top: calc(68px + var(--gora-bezpieczna, 0px));
    /* zapas na unoszacy sie pasek nawigacji */
    left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: none;
    translate: none;
    border: 0;
    border-radius: 0;
    padding: var(--o-4) 1.25rem calc(110px + var(--dol-bezpieczny, 0px));
    transform: translateX(28px);
  }
  .mega:popover-open { transform: none; }
  @starting-style { .mega:popover-open { transform: translateX(28px); opacity: 0; } }
  /* Panel nie siega az pod naglowek — nad nim zostaje pasek, przez ktory
     widac strone. Przezroczyste tlo czytalo sie tam jak dziura w ukladzie;
     przyciemnienie mowi wprost, ze panel LEZY NAD trescia. Bez rozmycia,
     bo na telefonie to najdrozszy efekt, jaki mozna wlaczyc na pelny ekran. */
  .mega::backdrop { background: rgba(7, 13, 26, .45); backdrop-filter: none; }

  .mega__pasek {
    display: flex;
    align-items: center;
    gap: var(--o-3);
    padding-bottom: var(--o-4);
    margin-bottom: var(--o-3);
    border-bottom: 1px solid var(--obrys);
  }
  .mega__wstecz {
    display: inline-flex;
    align-items: center;
    gap: var(--o-2);
    min-height: var(--dotyk);
    padding-inline: var(--o-2) var(--o-3);
    border: 1px solid var(--obrys-mocny);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--t-mikro);
    font-weight: 600;
    cursor: pointer;
  }
  .mega__wstecz-ikona { width: 16px; height: 16px; transform: rotate(180deg); }
  .mega__tytul { font-size: var(--t-lead); font-weight: 700; }
  .mega__poz { min-height: 68px; border-bottom: 1px solid var(--obrys); border-radius: 0; padding-inline: 0; }
  .mega__poz-nazwa { font-size: var(--t-lead); }
  .mega__poz-opis { font-size: var(--t-mikro); }

  /* ---------- JEDNA KOLUMNA, NIE TRZY --------------------------------------
     Panel na komputerze dzieli sie na trzy kolumny: lista uslug, kafelek
     floty, kafelek kontaktu. Ten podzial zostawal NIETKNIETY na telefonie —
     trzy kolumny wciskane w 370 px. Skutek widoczny na zrzucie od
     uzytkownika: "Przewozy pracownicze" lamane po jednym slowie, "Nie wiesz,
     co wybrac?" w pieciu wierszach, a zloty przycisk "Zamow wycene" szerszy
     niz swoja kolumna i przyciety prawa krawedzia panelu.

     Przyczyna byla prosta: blok telefoniczny nadpisywal WYGLAD pozycji
     (`.mega__poz`), ale ani razu nie dotknal SIATKI, ktora je ustawia.
     Nadpisanie wnetrza bez nadpisania ukladu zostawia uklad komputerowy. */
  .mega__siatka,
  .mega--miasta .mega__siatka {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--o-4);
  }
  .mega__lista--dwie { grid-template-columns: minmax(0, 1fr); }

  /* Kafelek polecenia lezy POZIOMO: mala miniatura obok napisu. Pionowa
     karta ze zdjeciem 16:10 zajmowala pol ekranu, zanim doszlo sie do
     kontaktu — a to kontakt jest tu celem. */
  .mega__promo {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: var(--o-3);
  }
  .mega__obraz { aspect-ratio: 1 / 1; height: 100%; }
  .mega__obraz--mapa { aspect-ratio: 4 / 3; height: auto; }

  /* Kafelek kontaktu na calej szerokosci: numer i przycisk maja gdzie stanac,
     wiec nic sie nie lamie ani nie wystaje. */
  .mega__kontakt { padding: var(--o-4); }
  .mega__kontakt .przycisk { width: 100%; }
  .mega__telefon { font-size: var(--t-lead); white-space: nowrap; }

  .mega__promo, .mega__kontakt { margin-top: var(--o-4); }
}

/* Układy treści podstron. Karty reagują na szerokość SWOJEGO POJEMNIKA,
   a nie ekranu — ta sama karta wygląda dobrze w kolumnie bocznej i w siatce
   na całą szerokość, bez mnożenia progów @media. */

.trojka, .miasta, .wpisy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--o-4);
}

.trojka__karta, .miasto-kafel, .wpis-kafel {
  container-type: inline-size;
  padding: clamp(var(--o-5), 2.5vw, var(--o-6));
  background: var(--tlo-karta);
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  display: grid;
  gap: var(--o-3);
  align-content: start;
  transition: transform var(--czas-2) var(--krzywa-wyraz),
              box-shadow var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa);
}
.trojka__karta:hover, .miasto-kafel:hover, .wpis-kafel:hover {
  transform: translateY(-5px);
  box-shadow: var(--cien-2);
  border-color: var(--obrys-mocny);
}
.sekcja--ciemna .trojka__karta {
  background: light-dark(rgba(255,255,255,.62), rgba(238,242,248,.045));
  border-color: light-dark(rgba(16,24,38,.10), rgba(238,242,248,.12));
}

.trojka__tytul, .miasto-kafel__nazwa, .wpis-kafel__tytul { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.trojka__tresc, .miasto-kafel__opis, .wpis-kafel__lead { font-size: var(--t-mały); color: var(--tekst-cichy); }
.sekcja--ciemna .trojka__tresc { color: var(--akcent-cichy, var(--tekst-cichy)); }

/* Powyżej 420 px SZEROKOŚCI KARTY tytuł urasta i wchodzi drugi wiersz opisu. */
@container (min-width: 420px) {
  .trojka__tytul, .miasto-kafel__nazwa, .wpis-kafel__tytul { font-size: var(--t-h3); }
  .trojka__tresc, .wpis-kafel__lead { font-size: var(--t-baza); }
}

.miasto-kafel { position: relative; }
.miasto-kafel__nazwa { display: flex; align-items: center; gap: var(--o-2); }
.miasto-kafel__nazwa .ikona { color: var(--bursztyn-ciemny); }
.miasto-kafel__nazwa a::after { content: ""; position: absolute; inset: 0; }
.miasto-kafel__wiecej, .wpis-kafel__wiecej {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: 44px; font-weight: 650; font-size: var(--t-mały);
}
.miasto-kafel__wiecej .ikona, .wpis-kafel__wiecej .ikona { color: var(--bursztyn-ciemny); transition: transform var(--czas-2) var(--krzywa-wyraz); }
.miasto-kafel:hover .ikona, .wpis-kafel:hover .ikona { transform: translateX(4px); }

.wpis-kafel { position: relative; }
.wpis-kafel__data { font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--bursztyn-ciemny); font-weight: 650; }
.wpis-kafel__tytul a::after { content: ""; position: absolute; inset: 0; }

/* Pary etykieta–wartość (dane rejestrowe, zasięg miasta). */
.para { display: grid; gap: var(--o-4); margin: 0; }
.para > div { display: grid; gap: 2px; }
.para dt {
  display: flex; align-items: center; gap: var(--o-2);
  font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-cichy);
}
.para dt .ikona { color: var(--bursztyn-ciemny); }
.para dd { margin: 0; font-weight: 600; }
.para--zwarta { gap: var(--o-2); }
.para--zwarta dd { font-size: var(--t-mały); font-weight: 500; color: var(--tekst-cichy); }
@media (min-width: 620px) { .para { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

.sasiedzi { display: flex; flex-wrap: wrap; gap: var(--o-3); }
.sasiedzi a {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: var(--dotyk); padding-inline: var(--o-4);
  border: 1px solid var(--obrys-mocny); border-radius: 999px;
  font-weight: 600; font-size: var(--t-mały);
  transition: border-color var(--czas-1), color var(--czas-1);
}
.sasiedzi a:hover { border-color: var(--bursztyn); color: var(--bursztyn-ciemny); }
.sasiedzi .ikona { color: var(--bursztyn-ciemny); }

.dane-firmy {
  display: grid; gap: var(--o-5);
  padding: clamp(var(--o-5), 3vw, var(--o-7));
  border: 1px solid var(--obrys); border-radius: var(--zaokr-l);
  background: var(--tlo-karta);
}
.dane-firmy__linki { display: flex; flex-wrap: wrap; gap: var(--o-3); }
.dane-firmy__nota { font-size: var(--t-mikro); color: var(--tekst-cichy); max-width: 70ch; }

/* Wpis poradnika — kolumna tekstu i przyklejone pudełko z kontaktem. */
.wpis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(16rem, 24vw, 20rem)); gap: clamp(var(--o-5), 4vw, var(--o-8)); align-items: start; }
.wpis__tresc { max-width: 68ch; display: grid; gap: var(--o-4); }
.wpis__tresc h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); margin-top: var(--o-4); }
.wpis__tresc p { color: var(--tekst-cichy); font-size: var(--t-lead); line-height: 1.75; }
.wpis__bok { position: sticky; top: 110px; }
.wpis__pudelko {
  display: grid; gap: var(--o-3);
  padding: var(--o-5);
  border-radius: var(--zaokr-l);
  color: var(--na-ciemnym);
  background: linear-gradient(160deg, var(--granat-800), var(--granat-600));
}
.wpis__pudelko p { font-size: var(--t-mały); color: var(--na-ciemnym-cichy); }
.wpis__pudelko-tytul { font-size: var(--t-h3); }
.wpis__telefon { font-family: var(--pismo-liczby); font-weight: 700; font-size: var(--t-lead); color: var(--bursztyn-jasny); min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .wpis { grid-template-columns: minmax(0, 1fr); }
  .wpis__bok { position: static; }
}

.wpis__dalej { margin-top: var(--o-9); }
.wpis__dalej ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--o-4); margin-top: var(--o-5); }
.wpis__dalej a {
  display: grid; gap: var(--o-2);
  padding: var(--o-5);
  border: 1px solid var(--obrys); border-radius: var(--zaokr-m);
  transition: border-color var(--czas-1), transform var(--czas-2) var(--krzywa-wyraz);
}
.wpis__dalej a:hover { border-color: var(--bursztyn); transform: translateY(-4px); }
.wpis__dalej-data { font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase; color: var(--bursztyn-ciemny); }
.wpis__dalej-tytul { font-weight: 650; }

.pojazd-karta__podtytul { font-size: var(--t-nano); letter-spacing: .14em; text-transform: uppercase; color: var(--bursztyn-ciemny); font-weight: 650; }
.pojazd-karta__haslo { font-size: var(--t-lead); color: var(--tekst-cichy); }
.pojazd-karta__podnaglowek { font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-cichy); }
.pojazd-karta__bezpieczenstwo { display: flex; gap: var(--o-2); font-size: var(--t-mały); color: var(--tekst-cichy); }
.pojazd-karta__bezpieczenstwo .ikona { color: var(--bursztyn-ciemny); flex: none; margin-top: 3px; }
.pojazd-karta__dla { font-size: var(--t-mały); color: var(--tekst-cichy); }

/* ============== INFORMACJA O PRYWATNOŚCI (nie baner zgody) ================ */
.prywatnosc {
  position: fixed;
  z-index: 47;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, var(--dol-bezpieczny, 0px));
  width: min(440px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--o-3);
  padding: var(--o-4);
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  background: color-mix(in srgb, var(--tlo-karta) 94%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--cien-3);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .32s var(--krzywa), transform .38s var(--krzywa-wyraz);
}
.prywatnosc--widoczna { opacity: 1; transform: none; }
.prywatnosc__ikona { color: var(--bursztyn-ciemny); }
.prywatnosc__tekst { font-size: var(--t-mikro); color: var(--tekst-cichy); line-height: 1.6; }
.prywatnosc__tekst strong { color: var(--tekst); }
.prywatnosc__tekst a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.prywatnosc .przycisk { grid-column: 2; justify-self: start; }
.prywatnosc__zamknij {
  position: absolute;
  top: 6px; right: 6px;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--tekst-cichy);
  cursor: pointer;
}
.prywatnosc__zamknij svg { width: 15px; height: 15px; }
.prywatnosc__zamknij:hover { background: var(--tlo-cichy); color: var(--tekst); }
.oszczedny .prywatnosc { backdrop-filter: none; background: var(--tlo-karta); }
@media (max-width: 900px) { .prywatnosc { left: 10px; bottom: calc(102px + var(--dol-bezpieczny, 0px)); width: calc(100vw - 20px); } }

/* ================== TABELA W DOKUMENCIE ================================== */
.dokument__wyroznienie {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o-4);
  padding: clamp(var(--o-4), 3vw, var(--o-6));
  border-radius: var(--zaokr-l);
  border: 1px solid color-mix(in srgb, var(--bursztyn) 34%, transparent);
  background: color-mix(in srgb, var(--bursztyn) 9%, transparent);
}
.dokument__wyroznienie .ikona { color: var(--bursztyn-ciemny); width: 30px; height: 30px; }
.dokument__wyroznienie h2 { margin-top: 0; font-size: var(--t-h3); }

.tabela-otoczka { overflow-x: auto; border: 1px solid var(--obrys); border-radius: var(--zaokr-m); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-mały); min-width: 520px; }
.tabela th, .tabela td { padding: var(--o-3) var(--o-4); text-align: left; vertical-align: top; }
.tabela thead th {
  font-size: var(--t-nano);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  background: var(--tlo-cichy);
  border-bottom: 1px solid var(--obrys);
}
.tabela tbody tr + tr td { border-top: 1px solid var(--obrys); }
.tabela td { color: var(--tekst-cichy); }
.tabela code, .dokument code {
  font-family: var(--pismo-liczby);
  font-size: .92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--tlo-cichy);
  color: var(--tekst);
}

/* TRYB APLIKACJI (PWA).
   Po zainstalowaniu strona chodzi bez paska przeglądarki, więc musi sama
   zadbać o dwie rzeczy, które normalnie robi przeglądarka: nie wchodzić pod
   wcięcie ekranu u góry i pod pasek gestów u dołu. */

/* Atrybut hidden musi wygrywać z display z klasy — inaczej ukryty przycisk
   instalacji i tak by się pokazał. */
[hidden] { display: none !important; }

:root {
  --gora-bezpieczna: env(safe-area-inset-top, 0px);
  --dol-bezpieczny: env(safe-area-inset-bottom, 0px);
}

/* Odstep u gory nadaje ZMIENNA, a nie ta regula wprost. Wczesniej stalo tu
   `padding-top`, a ten plik laduje sie PO 04-naglowek.css — wiec kasowal
   odstep zadany dla kapsuly na telefonie i pasek przywieral do krawedzi.
   Zmierzone: kapsula zaczynala sie na 0 px zamiast na 8 px. */
.naglowek { padding-top: var(--naglowek-gora, var(--gora-bezpieczna)); }
.stopka__dol { padding-bottom: calc(var(--o-5) + var(--dol-bezpieczny)); }

.aplikacja .naglowek {
  background: color-mix(in srgb, var(--tlo) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--obrys);
}
/* W zainstalowanej aplikacji nie ma czego instalować. */
.aplikacja #zainstaluj { display: none !important; }

/* Hero w trybie aplikacji nie chowa się pod pasek stanu. */
.aplikacja .hero,
.aplikacja .naglowek-strony { padding-top: calc(76px + var(--gora-bezpieczna) + var(--o-8)); }

/* Odbicie gumowe przy przewijaniu do końca wygląda w aplikacji jak błąd —
   tło strony musi być takie samo jak tło pod nią. */
html { background: var(--tlo); }

/* Element sterujący, którego dotyka się kciukiem, nie chowa się pod pasek
   gestów: menu i arkusz podmenu mają już własny zapas (patrz 04 i 15). */

/* ================= DOBÓR POJAZDU — opowieść sterowana przewijaniem =========
   Każdy krok przykleja się do góry ekranu na całą jego wysokość, a następny
   nasuwa się na poprzedni. Żadnych obliczanych zakresów animacji — tylko
   position: sticky i jedno wygaszanie przy wyjeździe, więc działa tak samo
   w Chrome, Safari i Firefoksie, a tam gdzie osi czasu nie ma, po prostu
   przewija się jak zwykła lista. */

.dobor {
  margin-block: var(--o-9);
  padding-inline: max(1.25rem, calc((100vw - var(--szer-tresc)) / 2));
}
.dobor__glowa { max-width: var(--szer-tekst); margin-bottom: var(--o-6); }
.dobor__kroki { display: grid; gap: var(--o-4); }

.dobor__krok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(var(--o-4), 3vw, var(--o-7));
  align-items: center;
  padding: clamp(var(--o-5), 3vw, var(--o-7));
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bursztyn) 10%, transparent), transparent 60%),
    var(--tlo-karta);
  box-shadow: var(--cien-2);
}

.dobor__ile { display: flex; align-items: baseline; gap: var(--o-2); }
.dobor__liczba {
  font-family: var(--pismo-liczby);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--bursztyn-ciemny);
}
.dobor__jednostka { font-size: var(--t-mikro); letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-cichy); }
.dobor__nazwa { font-size: clamp(1.2rem, 1rem + .8vw, 1.8rem); margin-top: var(--o-3); }
.dobor__opis { margin-top: var(--o-2); color: var(--tekst-cichy); font-size: var(--t-mały); }
.dobor__lista { display: grid; gap: var(--o-2); margin-top: var(--o-4); }
.dobor__lista li { display: flex; align-items: center; gap: var(--o-2); font-size: var(--t-mały); color: var(--tekst-cichy); }
.dobor__lista .ikona { color: var(--bursztyn-ciemny); }
.dobor__foto { margin: 0; border-radius: var(--zaokr-l); overflow: hidden; background: var(--granat-800); }
.dobor__obraz { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Sklejanie włączamy tylko tam, gdzie jest na to miejsce i moc. */
@media (min-width: 901px) {
  .dobor__kroki { gap: 0; }
  .dobor__krok { position: sticky; top: calc(76px + var(--o-4)); min-height: 62svh; margin-bottom: var(--o-6); }
  @supports (animation-timeline: view()) {
    .dobor__krok {
      animation: dobor-ustepuje linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 70%;
      transform-origin: 50% 0;
    }
    @keyframes dobor-ustepuje { to { transform: scale(.95) translateY(-14px); opacity: .35; } }
  }
}

/* ============================ TICKER ====================================== */
.ticker {
  --tempo: 42s;
  overflow: hidden;
  border-block: 1px solid var(--obrys);
  background: var(--tlo-cichy);
  margin-block: var(--o-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__tor { display: flex; width: max-content; animation: ticker-jedzie var(--tempo) linear infinite; }
.ticker__lista { display: flex; align-items: center; }
.ticker__poz {
  display: flex;
  align-items: center;
  gap: var(--o-4);
  padding: var(--o-4) var(--o-5);
  white-space: nowrap;
  font-size: var(--t-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--tekst-cichy);
}
.ticker__poz::after { content: "●"; color: var(--bursztyn); font-size: .5em; }
@keyframes ticker-jedzie { to { transform: translateX(-50%); } }
.ticker:hover .ticker__tor { animation-play-state: paused; }

/* ================= ŚWIATŁO POD KURSOREM I POCHYLENIE KART ================= */
@media (hover: hover) and (pointer: fine) {
  .usluga, .atut, .trojka__karta, .miasto-kafel, .wpis-kafel, .flota__skrot, .tor__link {
    transform: perspective(900px) rotateX(var(--obrot-x, 0deg)) rotateY(var(--obrot-y, 0deg));
    transition: transform var(--czas-2) var(--krzywa), box-shadow var(--czas-2) var(--krzywa), border-color var(--czas-2);
  }
  .usluga::before, .atut::before, .trojka__karta::before,
  .miasto-kafel::before, .wpis-kafel::before, .flota__skrot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in srgb, var(--bursztyn) 26%, transparent), transparent 70%);
    transition: opacity var(--czas-2) var(--krzywa);
  }
  .pod-kursorem::before { opacity: 1; }
  .usluga, .atut, .trojka__karta, .miasto-kafel, .wpis-kafel, .flota__skrot { position: relative; }
  .usluga > *, .atut > *, .trojka__karta > *, .miasto-kafel > *, .wpis-kafel > *, .flota__skrot > * { position: relative; z-index: 1; }
}

/* ======================== TRYB OSZCZĘDNY ==================================
   Włącza go js/00-wydajnosc.js po ZMIERZENIU pierwszych klatek albo po
   twardych wskazaniach systemu (mało rdzeni, mało pamięci, oszczędzanie
   danych). Znika wszystko, co kosztuje kartę graficzną. Treść zostaje. */
.oszczedny .foto__obraz,
.oszczedny .hero__tlo,
.oszczedny .klatka__ramka,
.oszczedny .galeria__tor,
.oszczedny .krok__karta,
.oszczedny .dobor__krok,
.oszczedny .slowo { animation: none !important; filter: none !important; opacity: 1 !important; }
/* Pelny przelot to najwiekszy z efektow — na slabym sprzecie znika w calosci,
   a tresc zostaje na miejscu i widoczna. */
.oszczedny [data-ozyw] { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Panorama w scenie otwierajacej: na slabym sprzecie zatrzymujemy ja
   na kadrze srodkowym, zamiast wylaczac transformacje calkiem — inaczej
   zdjecie skoczyloby do innego wycinka. */
.oszczedny .hero__tlo { animation: none !important; transform: none !important; }
.oszczedny .hero__scena { animation: none !important; clip-path: none !important; opacity: 1 !important; }
.oszczedny .hero__blysk { display: none; }
.oszczedny .naglowek--przewiniety,
.oszczedny .tor__link,
.oszczedny .aplikacja .naglowek { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.oszczedny .ziarno { display: none; }
.oszczedny .ticker__tor { animation-duration: calc(var(--tempo) * 2); }
.oszczedny .punkt__puls,
.oszczedny .trasa,
.oszczedny .przycisk::before,
.oszczedny .hero__zjazd-kreska::after { animation: none !important; }
.oszczedny .dobor__krok { position: static; min-height: 0; }
.oszczedny .krok { position: static; }
.oszczedny .galeria,
.bez-osi .galeria,
.bez-osi-nazwanych .galeria { min-height: 0; }
.oszczedny .galeria__pin,
.bez-osi .galeria__pin,
.bez-osi-nazwanych .galeria__pin { position: static; height: auto; overflow: visible; }
.oszczedny .galeria__tor,
.bez-osi .galeria__tor,
.bez-osi-nazwanych .galeria__tor { overflow-x: auto; scroll-snap-type: x mandatory; animation: none !important; transform: none !important; }
.oszczedny .klatka,
.bez-osi .klatka,
.bez-osi-nazwanych .klatka { flex-basis: min(78vw, 420px); scroll-snap-align: center; }

/* ============ ROZWIJANIE KONTENERÓW ============
   Dwie rzeczy, które w 2026 przeglądarka umie zrobić sama, a jeszcze rok
   wcześniej wymagały mierzenia wysokości w JavaScripcie. */

/* 1. Wysokość z „auto" da się animować — trzeba tylko na to pozwolić. */
:root { interpolate-size: allow-keywords; }

/* 2. Zawartość <details> ma własny pseudoelement, więc rozwija się płynnie
      zamiast skakać. Tam, gdzie przeglądarka tego nie zna, działa po staremu:
      otwiera się natychmiast — nic nie znika. */
@supports selector(details::details-content) {
  .faq__pozycja::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size .48s var(--krzywa-wyraz),
      opacity .32s var(--krzywa),
      content-visibility .48s allow-discrete;
  }
  .faq__pozycja[open]::details-content { block-size: auto; opacity: 1; }
  /* Przy otwartym elemencie nie potrzebujemy juz starej animacji wjazdu. */
  .faq__pozycja[open] .faq__odpowiedz { animation: none; }
}

/* Rozlewanie sie kontenerow przenieslo sie do 20-separatory.css —
   trzymamy JEDEN efekt w jednym miejscu, zamiast dwoch, ktore by sie biły. */

/* ================= WIELKIE ZDANIE Z ZAPALAJĄCYM SIĘ TEKSTEM =============== */
.oswiadczenie {
  width: min(100% - 2.5rem, var(--szer-tresc));
  margin: var(--o-9) auto;
  padding: clamp(var(--o-6), 5vw, var(--o-9)) clamp(var(--o-5), 4vw, var(--o-8));
  border-radius: var(--zaokr-xl);
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--bursztyn) 12%, transparent), transparent 60%),
    var(--tlo-cichy);
  border: 1px solid var(--obrys);
}
.oswiadczenie__tekst {
  font-size: clamp(1.5rem, .9rem + 3.4vw, 3.4rem);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.14;
  max-width: 22ch;
  /* Tekst jest oknem na gradient: przesuwając gradient, zapalamy słowa. */
  background: linear-gradient(100deg,
      var(--tekst) 0%, var(--tekst) 32%,
      color-mix(in srgb, var(--tekst) 22%, transparent) 46%,
      color-mix(in srgb, var(--tekst) 22%, transparent) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports (animation-timeline: view()) {
  .oswiadczenie__tekst {
    animation: zapalanie linear both;
    animation-timeline: view();
    animation-range: entry 18% cover 46%;
  }
  @keyframes zapalanie { to { background-position: 0 0; } }
}
/* Gdy nie ma osi czasu przewijania albo sprzęt jest słaby — tekst po prostu
   jest zapalony. Nigdy nie zostaje wygaszony. */
@supports not (animation-timeline: view()) {
  .oswiadczenie__tekst { background-position: 0 0; }
}
.oszczedny .oswiadczenie__tekst {
  animation: none !important;
  background: none !important;
  color: var(--tekst) !important;
  -webkit-text-fill-color: currentColor;
}
.oswiadczenie__stopka {
  margin-top: var(--o-5);
  font-size: var(--t-mikro);
  color: var(--tekst-cichy);
  letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
  .oswiadczenie__tekst { animation: none !important; background-position: 0 0 !important; }
}

/* ================= PASEK ROZDZIAŁU =========================================
   Nie jest to juz wysoki pas miedzy sekcjami — bral 280 px pustki i rozrywal
   strone na kawalki. Teraz pasek PRZYKLEJA SIE pod naglowkiem i jedzie razem
   z rozdzialem, a nastepny NASUWA SIE na niego, kiedy zaczyna sie kolejna
   czesc. Na ekranie zawsze widac dokladnie jeden — ten, ktory wlasnie czytasz.

   Dziala to bez zadnego opakowania w kodzie: wszystkie paski maja to samo
   `top`, wiec kolejny przykleja sie w tym samym miejscu, a rosnacy `z-index`
   sprawia, ze zakrywa poprzedni. Zero JavaScriptu, zero pomiarow.           */

.rozdzial {
  position: sticky;
  top: calc(76px + var(--gora-bezpieczna, 0px));
  z-index: calc(12 + var(--nr, 1));
  width: min(100% - 2.5rem, var(--szer-tresc));
  margin: var(--o-6) auto var(--o-5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(var(--o-3), 2vw, var(--o-5));
  padding: var(--o-2) var(--o-4);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--obrys) 70%, transparent);
  background: color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* ---------- WEJSCIE PASKA: KAPSULA SIE ROZWIJA -------------------------
   Pasek nie pojawia sie w calosci. Rozwija sie od numeru w prawo, jak
   rozwijana wstega — najpierw widac cyfre, potem linie, na koncu nazwe
   rozdzialu. Robi to `clip-path`, a nie `transform`: transformacja na
   elemencie przyklejonym zepsulaby przyklejanie, `clip-path` nie.        */
@supports (animation-timeline: view()) {
  .rozdzial {
    animation: rozdzial-rozwija linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 48%;
  }
  @keyframes rozdzial-rozwija {
    from { clip-path: inset(0 88% 0 0 round 999px); opacity: .35; }
    to   { clip-path: inset(0 0 0 0 round 999px); opacity: 1; }
  }
}
.oszczedny .rozdzial { animation: none !important; clip-path: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .rozdzial { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}

/* ---------- SWIATLO PRZEJEZDZA PO KAPSULE ------------------------------
   Raz, tuz po rozwinieciu — tak jak reflektor po lakierze. Jeden
   pseudoelement, jedna wlasciwosc `transform`.                            */
.rozdzial__blysk {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.rozdzial__blysk::before {
  content: "";
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(104deg,
    transparent 42%,
    color-mix(in srgb, var(--bursztyn) 38%, transparent) 50%,
    transparent 58%);
  transform: translateX(-130%);
}
@supports (animation-timeline: view()) {
  .rozdzial__blysk::before {
    animation: rozdzial-blysk linear both;
    animation-timeline: view();
    animation-range: entry 30% entry 92%;
  }
  @keyframes rozdzial-blysk { to { transform: translateX(130%); } }
}
.oszczedny .rozdzial__blysk { display: none; }
@media (prefers-reduced-motion: reduce) { .rozdzial__blysk { display: none; } }

/* ---------- NUMER WJEZDZA JAK LICZNIK ---------------------------------- */
.rozdzial__nr {
  position: relative;
  z-index: 2;
  font-family: var(--pismo-liczby);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--bursztyn-ciemny);
}
@supports (animation-timeline: view()) {
  .rozdzial__nr {
    animation: numer-wjezdza linear both;
    animation-timeline: view();
    animation-range: entry 6% entry 44%;
  }
  @keyframes numer-wjezdza {
    from { transform: translateY(70%); opacity: 0; filter: blur(3px); }
    to   { transform: none; opacity: 1; filter: none; }
  }
}
.oszczedny .rozdzial__nr { animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }

.rozdzial__linia {
  position: relative;
  z-index: 2;
  height: 1px;
  background: var(--obrys);
  overflow: hidden;
}
/* Swietlisty odcinek jedzie wzdluz linii — jeden element, jedna wlasciwosc. */
.rozdzial__linia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--bursztyn) 22%, var(--bursztyn) 78%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  .rozdzial__linia::after {
    animation: rozdzial-rysuje linear both;
    animation-timeline: view();
    animation-range: entry 25% cover 32%;
  }
  @keyframes rozdzial-rysuje { to { transform: scaleX(1); } }
}
@supports not (animation-timeline: view()) {
  .rozdzial__linia::after { transform: scaleX(1); }
}
.oszczedny .rozdzial__linia::after { animation: none; transform: scaleX(1); }

.rozdzial__etykieta {
  position: relative;
  z-index: 2;
  font-size: var(--t-mikro);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst);
  white-space: nowrap;
}
.rozdzial__opis {
  display: none;                       /* opis mieszka w spisie tresci */
}

@media (max-width: 900px) {
  .rozdzial {
    top: calc(10px + var(--gora-bezpieczna, 0px));
    margin: var(--o-5) auto var(--o-4);
    padding: 6px var(--o-3);
    column-gap: var(--o-3);
  }
  .rozdzial__etykieta { font-size: var(--t-nano); letter-spacing: .12em; }
}
.oszczedny .rozdzial { backdrop-filter: none; background: var(--tlo); }

/* Sekcja tuz po pasku nie dokłada juz swojego odstepu u gory —
   to on byl drugim zrodlem tej ogromnej pustki. */
.rozdzial + .sekcja,
.rozdzial + .galeria,
.rozdzial + .dobor,
.rozdzial + .oswiadczenie { padding-top: 0; margin-top: 0; }
.rozdzial + .sekcja--ciemna { margin-top: var(--o-5); }

/* ================= PRZELEWANIE SIĘ SEKCJI =================================
   Ciemne bloki nie zaczynają się linią, tylko „rozlewają" z zaokrąglonej
   kapsuły na pełną szerokość. Kształt zmienia clip-path — właściwość
   liczona sprzętowo, bez przeliczania układu strony. */
@supports (animation-timeline: view()) {
  .sekcja--ciemna, .oswiadczenie, .wezwanie, .formularz, .dobor__krok {
    animation: rozlew linear both;
    animation-timeline: view();
    animation-range: entry 2% entry 58%;
  }
  @keyframes rozlew {
    from { clip-path: inset(1.5% 7% 1.5% 7% round 42px); opacity: .86; }
    to   { clip-path: inset(0 0 0 0 round var(--zaokr-kurtyna, 0px)); opacity: 1; }
  }
  .wezwanie, .formularz, .dobor__krok, .oswiadczenie { --zaokr-kurtyna: var(--zaokr-xl); }
}
.oszczedny .sekcja--ciemna,
.oszczedny .oswiadczenie,
.oszczedny .wezwanie,
.oszczedny .formularz,
.oszczedny .dobor__krok { animation: none !important; clip-path: none !important; opacity: 1 !important; }

/* ================= KINETYKA POD KURSOREM ==================================
   Tekst przysuwa się do kursora, zdjęcie odsuwa w drugą stronę. Ułamek
   piksela na klatkę, dwie właściwości `translate` — złudzenie głębi bez
   ani jednego przeliczenia układu. Tylko tam, gdzie jest prawdziwy kursor. */
@media (hover: hover) and (pointer: fine) {
  .rozlam__tekst, .rozlam .foto {
    transition: translate var(--czas-2) var(--krzywa);
    will-change: translate;
  }
  .rozlam.pod-kursorem .rozlam__tekst { translate: calc(var(--kin-x, 0) * 7px) calc(var(--kin-y, 0) * 5px); }
  .rozlam.pod-kursorem .foto { translate: calc(var(--kin-x, 0) * -9px) calc(var(--kin-y, 0) * -6px); }
}
.oszczedny .rozlam__tekst, .oszczedny .rozlam .foto { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rozlam__tekst, .rozlam .foto { translate: none !important; }
  .rozdzial__linia::after { animation: none !important; transform: scaleX(1) !important; }
}

/* ============ PRZEJŚCIE MIĘDZY JASNYMI SEKCJAMI ==========================
   Ciemne bloki mają swój efekt (arkusz), duże pojedyncze bloki mają kurtynę.
   Brakowało go sekcjom jasnym — a to one wypełniają większość strony.
   Teraz i one wchodzą: lekkie uniesienie z rozjaśnieniem.

   ŚWIADOMIE POMINIĘTE: `.sekcja--proces`, `.sekcja--wpis`, `.dobor`
   i `.galeria`. Każda z nich ma w środku element przyklejony
   (`position: sticky`), a transformacja na przodku zmienia układ
   odniesienia i psuje przyklejanie. Jeden efekt nie może zabijać drugiego. */
@supports (animation-timeline: view()) {
  .sekcja--uslugi,
  .sekcja--flota,
  .sekcja--faq,
  .sekcja--pojazdy,
  .sekcja--miasta,
  .sekcja--blog,
  .sekcja--liczby,
  .sekcja--kontakt,
  .sekcja--dokument,
  .sekcja--sasiedzi,
  .sekcja--dane-firmy {
    animation: sekcja-podnosi linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 52%;
  }
  @keyframes sekcja-podnosi {
    from { transform: translateY(24px); opacity: .74; }
    to   { transform: none; opacity: 1; }
  }

  /* USUNIETE: numer-rozblysk. Ten sam element dostawal pozniej
     `numer-wjezdza`, wiec przy dwoch animacjach tej samej wlasciwosci
     rozblysk i tak nigdy sie nie odgrywal — a niosl barwy motywu
     w klatkach kluczowych, ktore nie przeliczaja sie po przelaczeniu. */

    to   { color: var(--bursztyn-ciemny); transform: none; letter-spacing: .12em; }
  }
}

.oszczedny .sekcja--uslugi,
.oszczedny .sekcja--flota,
.oszczedny .sekcja--faq,
.oszczedny .sekcja--pojazdy,
.oszczedny .sekcja--miasta,
.oszczedny .sekcja--blog,
.oszczedny .sekcja--liczby,
.oszczedny .sekcja--kontakt,
.oszczedny .sekcja--dokument,
.oszczedny .rozdzial__nr { animation: none !important; transform: none !important; opacity: 1 !important; }

/* ================= SPIS TREŚCI ===========================================
   Element książkowy: numerowana lista rozdziałów z odnośnikami do kotwic.
   Czytelnik dostaje mapę strony, a wyszukiwarka — adresy fragmentów.

   KAŻDY WIERSZ WYDZIELA SIĘ OSOBNO. Nie przez dziewięć niezależnych
   animacji, tylko przez JEDNĄ oś czasu nadaną całemu spisowi: wiersze
   sięgają po nią z własnym przesunięciem (--i), więc wjeżdżają po kolei,
   w tempie przewijania. To samo działa na telefonie i na monitorze —
   różni się tylko układ, nie mechanizm.                                   */
.spis {
  width: min(100% - 2.5rem, var(--szer-tresc));
  margin: var(--o-8) auto var(--o-7);
  padding: clamp(var(--o-5), 3vw, var(--o-6));
  border: 1px solid var(--obrys);
  border-radius: var(--zaokr-l);
  background: color-mix(in srgb, var(--tlo-karta) 70%, transparent);
  /* Nazwana os juz niepotrzebna — kazdy wiersz ma wlasna, anonimowa. */
}
.spis__tytul {
  font-size: var(--t-nano);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tekst-cichy);
  font-weight: 650;
  margin-bottom: var(--o-4);
}
.spis__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  column-gap: clamp(var(--o-4), 3vw, var(--o-6));
}
.spis__wiersz { min-width: 0; }

/* Kazdy wiersz jest osobnym kafelkiem z wlasna ramka. Barwy — jak wszedzie
   na tej stronie — zapisane RAZ, funkcja light-dark(): pierwsza wartosc
   jasna, druga ciemna.                                                     */
.spis__poz {
  --wiersz-tlo:     light-dark(rgba(255,255,255,.66), rgba(238,242,248,.035));
  --wiersz-obrys:   light-dark(rgba(16,24,38,.10), rgba(238,242,248,.10));
  --wiersz-tlo-akt: light-dark(rgba(232,167,35,.14), rgba(232,167,35,.16));
  --wiersz-obrys-akt: light-dark(#d29a1f, #f0b843);
  --wiersz-blask:   light-dark(0 6px 18px rgba(181,124,10,.18), 0 6px 20px rgba(232,167,35,.20));

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--o-4);
  min-height: 60px;
  margin-bottom: var(--o-2);
  padding: var(--o-3) var(--o-4);
  border: 1px solid var(--wiersz-obrys);
  border-radius: var(--zaokr-m);
  background: var(--wiersz-tlo);
  transition: background-color var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa),
              box-shadow var(--czas-2) var(--krzywa),
              transform var(--czas-2) var(--krzywa-wyraz);
}

/* STAN ZAPALONY JEST OSOBNA WARSTWA, nie zestawem barw w klatkach.
   Powod: wartosci w klatkach kluczowych przegladarka wylicza raz, wiec po
   przelaczeniu motywu zostawaly stare barwy az do odswiezenia strony.
   Warstwa ma zwykle deklaracje (przeliczaja sie natychmiast), a animacja
   rusza wylacznie jej `opacity`. */
.spis__poz::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--wiersz-tlo-akt);
  box-shadow: inset 0 0 0 1px var(--wiersz-obrys-akt), var(--wiersz-blask);
  opacity: 0;
  transition: opacity var(--czas-2) var(--krzywa);
}
.spis__nr, .spis__tresc, .spis__strzalka { position: relative; z-index: 1; }

/* Najechanie kursorem daje ten sam obraz, co dojscie przy przewijaniu —
   jeden jezyk dla obu sposobow wskazania. Klasa `w-oku` dokladana jest przez
   js/16-w-oku.js tam, gdzie osie czasu przewijania nie dzialaja (starsze
   Safari na iOS) — dzieki temu efekt jest ten sam, a nie zaden. */
.spis__poz:hover::before,
.spis__poz:focus-visible::before,
.spis__poz.w-oku::before { opacity: 1; }
.spis__poz:hover,
.spis__poz:focus-visible,
.spis__poz.w-oku { transform: translateX(4px); }
.spis__poz.w-oku .spis__nr {
  background: var(--wiersz-obrys-akt);
  border-color: var(--wiersz-obrys-akt);
  color: light-dark(#fff, #1b1204);
}
.spis__poz:hover .spis__strzalka,
.spis__poz:focus-visible .spis__strzalka { opacity: 1; transform: translateX(0); }
.spis__poz:hover .spis__nr,
.spis__poz:focus-visible .spis__nr {
  background: var(--wiersz-obrys-akt);
  border-color: var(--wiersz-obrys-akt);
  color: light-dark(#fff, #1b1204);
}
/* Ta sama warstwa zapala sie przy przewijaniu — patrz @keyframes spis-blask. */

.spis__nr {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bursztyn) 34%, transparent);
  background: color-mix(in srgb, var(--bursztyn) 10%, transparent);
  font-family: var(--pismo-liczby);
  font-size: var(--t-nano);
  font-weight: 700;
  color: var(--bursztyn-ciemny);
  transition: background-color var(--czas-2) var(--krzywa),
              border-color var(--czas-2) var(--krzywa),
              color var(--czas-2) var(--krzywa);
}
.spis__tresc { display: grid; gap: 1px; min-width: 0; }
.spis__etykieta { font-weight: 650; font-size: var(--t-mały); }
.spis__opis { font-size: var(--t-nano); color: var(--tekst-cichy); }
.spis__strzalka {
  width: 16px; height: 16px;
  color: var(--bursztyn-ciemny);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--czas-1), transform var(--czas-2) var(--krzywa-wyraz);
}

/* ---------- WIERSZE WYDZIELAJĄ SIĘ PO KOLEI ---------------------------- */
@supports (animation-timeline: view()) {
  /* ============================================================================
     DLACZEGO TU NIE MA JUZ NAZWANEJ OSI CZASU — dziesiec „dlaczego":

      1. W Safari wiersze sie nie podswietlaly.
      2. Bo warstwa `::before` nie zmieniala przezroczystosci z 0 na 1.
      3. Bo animacja nie postepowala — tkwila w fazie sprzed zakresu,
         czyli w klatce 0%.
      4. Bo jej os czasu `--spis` nie zostala ZWIAZANA.
      5. Bo nazwana os (`view-timeline-name`) to osobna zdolnosc silnika niz
         os anonimowa `view()` — i wdrazano je w roznym czasie.
      6. `animation-timeline: --spis` jest przy tym SKLADNIOWO POPRAWNE, wiec
         arkusz sie nie odrzuca; os po prostu nie zostaje znaleziona.
      7. Moje sprawdzenie `@supports (animation-timeline: view())` badalo os
         ANONIMOWA — czyli co innego, niz naprawde uzywalem.
      8. Siatka bezpieczenstwa tez tego nie zlapala, bo mierzyla przezroczystosc
         WIERSZA, a niewidoczny byl jego pseudoelement.
      9. Nazwanej osi uzylem dla idealnie rownego przesuniecia miedzy wierszami.
     10. Czyli optymalizowalem pod wrazenie zamiast pod niezawodnosc — przy
         funkcji, ktora ma dzialac wszedzie, kolejnosc jest odwrotna.

     Rozwiazanie: kazdy wiersz siega po WLASNA os anonimowa. Wiersze i tak leza
     na roznych wysokosciach, wiec przesuwaja sie naturalnie; `--i` dokłada juz
     tylko drobna korekte. Dziala wszedzie, gdzie `@supports` mowi prawde.     */
  .spis__poz {
    animation: spis-wjazd linear both;
    animation-timeline: view();
    /* GDZIE NA EKRANIE TO SIE DZIEJE.
       Faza `entry` zaczyna sie w chwili, gdy element dotyka DOLNEJ krawedzi
       okna — dlatego przy niej wiersze zapalaly sie tuz przy dolnym brzegu,
       gdzie oko ich nie sledzi. Faza `cover` liczy caly przejazd bloku przez
       okno, wiec przesunieciem startu ustawiamy WYSOKOSC, na ktorej to sie
       dzieje.

       LICZBY NIE SA WZIETE Z OKA. Przy oknie 900 px i bloku 520 px szczyt
       podswietlenia wypada dla kolejnych wierszy na 39%, 39% i 40% wysokosci
       okna — czyli TROCHE POWYZEJ srodka, tam, gdzie w badaniach sledzenia
       wzroku skupia sie uwaga przy przewijaniu. Krok 4% na wiersz jest
       dobrany tak, zeby kazdy wiersz zapalal sie NA TEJ SAMEJ wysokosci
       (przy kroku 3% ostatni wypadal 14 punktow nizej niz pierwszy).
       Odcinek 30% na wiersz daje ruch spokojny, a nie mrugniecie.         */
    animation-range: cover calc(44% + var(--i, 0) * 1%) cover calc(80% + var(--i, 0) * 1%);
  }
  /* TRZY STANY, NIE DWA. Wiersz nie tylko wjezdza — po drodze ZAPALA SIE
     tak samo, jak przy najechaniu kursorem, i dopiero potem osiada.
     Dzieki temu przy przewijaniu widac dokladnie, ktory punkt wlasnie
     "przychodzi", a nie tylko ze cos sie pojawilo.                        */
  /* CZTERY STANY: wejscie, zapalenie, PRZYTRZYMANIE i osadzenie.
     Przytrzymanie miedzy 40% a 72% jest tu najwazniejsze — bez niego szczyt
     trwal ulamek chwili i caly efekt czytalo sie jako mrugniecie.
     Latwosc miedzy klatkami nadaje `animation-timing-function` wpisana
     w klatke: przyspiesza wjazd, a wygaszanie zostawia lagodne.           */
  /* ZASADA, KTORA TU ZLAMALEM I NAPRAWIAM.
     Ozdobna animacja NIE MOZE decydowac o tym, czy tresc widac. Wczesniej
     klatka 0% miala `opacity: 0` i pelne przyciecie — a gdy przegladarka nie
     zwiaze animacji z osia czasu (nazwana os `--spis` nie zawsze sie wiaze,
     zwlaszcza w Safari), element zostaje w stanie sprzed zakresu, czyli
     W KLATCE 0%. Efekt: dziewiec niewidocznych wierszy i „spis nie dziala".
     Teraz w klatkach jest WYLACZNIE przesuniecie — nawet gdy animacja
     w ogole nie ruszy, wiersz jest czytelny, tylko bez wjazdu. */
  @keyframes spis-wjazd {
    0%   { transform: translateX(-10px) scale(.994);
           animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    40%  { transform: translateX(7px) scale(1.012);
           animation-timing-function: linear; }
    72%  { transform: translateX(5px) scale(1.008);
           animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
    100% { transform: none; }
  }

  /* Zapalenie wiersza: sama przezroczystosc warstwy. Barwy siedza
     w zwyklych deklaracjach, wiec ida za motywem natychmiast. */
  /* Pseudoelement dziedziczy os od swojego elementu — `view()` na
     `.spis__poz::before` odnosi sie do pudelka wiersza. */
  .spis__poz::before {
    animation: spis-blask linear both;
    animation-timeline: view();
    animation-range: cover calc(44% + var(--i, 0) * 1%) cover calc(80% + var(--i, 0) * 1%);
  }
  @keyframes spis-blask {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* Numer dochodzi chwilę po swoim wierszu — to on daje wrażenie,
     że lista „liczy się" sama. */
  .spis__nr {
    animation: spis-numer linear both;
    animation-timeline: view();
    animation-range: cover calc(46% + var(--i, 0) * 1%) cover calc(82% + var(--i, 0) * 1%);
  }
  @keyframes spis-numer {
    0%   { transform: scale(.82) rotate(-8deg);
           animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
    40%  { transform: scale(1.12) rotate(0deg);
           animation-timing-function: linear; }
    72%  { transform: scale(1.06);
           animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
    100% { transform: none; }
  }
}
/* TRYB OSZCZEDNY GASI RUCH, ALE NIE GASI WSKAZANIA.
   Wczesniej bylo tu `opacity: 0 !important` — czyli warstwa podswietlenia
   nie miala prawa sie zapalic RowNIEZ wtedy, gdy wskazuje ja palec albo
   obserwator przeciecia. Na sprzecie uznanym za slaby wiersze przestawaly
   reagowac na cokolwiek. Zdejmujemy tylko animacje sterowana przewijaniem;
   przejscie samej przezroczystosci nie kosztuje karty graficznej nic. */
.oszczedny .spis__poz::before { animation: none !important; }
.oszczedny .spis__poz,
.oszczedny .spis__nr { animation: none !important; opacity: 1 !important; clip-path: none !important; }
.oszczedny .spis__nr { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .spis__poz::before { animation: none !important; opacity: 0 !important; }
  .spis__poz, .spis__nr { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media (max-width: 620px) {
  .spis { margin-block: var(--o-6) var(--o-5); }
  .spis__poz { min-height: 56px; column-gap: var(--o-3); padding: var(--o-3); }
  .spis__nr { width: 32px; height: 32px; }
}

/* ============================================================================
   JEDNO PŁÓTNO POD CAŁĄ STRONĄ

   To jest ta różnica, której nie da się nadrobić animowaniem pojedynczych
   sekcji. Strona przestaje być stosem pudełek, a staje się JEDNĄ sceną,
   pod którą przesuwa się światło. Sekcje nie „zaczynają się" i nie „kończą" —
   płyną po wspólnym tle.

   Trzy plamy światła, każda przesuwana i wygaszana osią czasu przewijania
   całego dokumentu. Ruch to wyłącznie `transform` i `opacity`, czyli dwie
   właściwości, które przeglądarka liczy na karcie graficznej — cała rzecz
   kosztuje tyle, co nic, także na starym laptopie.
   ========================================================================== */

.plotno {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--tlo);
}
.plotno__warstwa {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform, opacity;
}
.plotno__warstwa--1 {
  width: 90vmax; height: 90vmax;
  top: -34vmax; left: -22vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--bursztyn) 26%, transparent), transparent 66%);
  opacity: .5;
}
.plotno__warstwa--2 {
  width: 78vmax; height: 78vmax;
  top: 26vmax; right: -30vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--granat-600) 60%, transparent), transparent 68%);
  opacity: .45;
}
.plotno__warstwa--3 {
  width: 96vmax; height: 96vmax;
  bottom: -46vmax; left: 8vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--bursztyn-ciemny) 20%, transparent), transparent 70%);
  opacity: .32;
}

@supports (animation-timeline: scroll()) {
  .plotno__warstwa {
    animation: plotno-plynie linear both;
    animation-timeline: scroll(root block);
  }
  .plotno__warstwa--1 { --dryf-x: 14vmax;  --dryf-y: 34vmax;  --krycie-do: .18; }
  .plotno__warstwa--2 { --dryf-x: -20vmax; --dryf-y: -26vmax; --krycie-do: .62; }
  .plotno__warstwa--3 { --dryf-x: 10vmax;  --dryf-y: -60vmax; --krycie-do: .5;  }

  @keyframes plotno-plynie {
    to {
      transform: translate3d(var(--dryf-x), var(--dryf-y), 0) scale(1.15);
      opacity: var(--krycie-do);
    }
  }
}

/* Sekcje muszą przepuszczać płótno — inaczej znów byłyby pudełkami. */
body { background: transparent; }
.sekcja--uslugi, .sekcja--flota, .sekcja--proces, .sekcja--faq,
.sekcja--pojazdy, .sekcja--blog, .sekcja--miasta, .sekcja--kontakt,
.sekcja--liczby, .sekcja--dokument, .sekcja--wpis { background: transparent; }

/* ============ SEKCJE NACHODZĄ NA SIEBIE ==================================
   Drugi filar tego wrażenia: bloki nie stoją obok siebie z przerwą, tylko
   NASUWAJĄ SIĘ jeden na drugi — zaokrąglona górna krawędź i cień od spodu
   sprawiają, że przewijanie wygląda jak przesuwanie arkuszy, a nie jak
   przeskakiwanie między ekranami. */
.zaufanie,
.sekcja--ciemna,
.stopka {
  position: relative;
  z-index: 1;
  border-radius: var(--zaokr-xl) var(--zaokr-xl) 0 0;
  margin-top: calc(-1 * var(--o-6));
  box-shadow: 0 -18px 48px rgba(7, 13, 26, .28);
}
.zaufanie { margin-top: 0; }        /* pierwsza po scenie — bez nachodzenia */
.hero + .zaufanie,
main > .zaufanie:first-child { border-radius: 0; }

/* Arkusz wsuwa się z dołu przy wchodzeniu w kadr. */
@supports (animation-timeline: view()) {
  .sekcja--ciemna, .stopka {
    animation: arkusz-wsuwa linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 46%;
  }
  @keyframes arkusz-wsuwa {
    from { transform: translateY(26px) scale(.985); }
    to   { transform: none; }
  }
}

/* ============ ŚWIATŁO NA SZWIE ===========================================
   Cienka linia na górnej krawędzi każdego arkusza rozjaśnia się, kiedy szew
   przechodzi przez środek ekranu. To ona „prowadzi" wzrok przez stronę. */
.zaufanie::before,
.sekcja--ciemna::before,
.stopka::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--bursztyn), transparent);
  opacity: .25;
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  .zaufanie::before,
  .sekcja--ciemna::before,
  .stopka::before {
    animation: szew-swieci linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
  }
  @keyframes szew-swieci {
    from { opacity: 0; transform: scaleX(.35); }
    60%  { opacity: 1; transform: scaleX(1); }
    to   { opacity: .3; transform: scaleX(1); }
  }
}

/* ============ WYŁĄCZNIK ================================================== */
/* Na slabym sprzecie zostaje JEDNA plama i lzejsze rozmycie — trzy warstwy
   po 70 px rozmycia to na zintegrowanej grafice z 2015 roku realny koszt. */
.oszczedny .plotno__warstwa { animation: none !important; filter: blur(36px); }
.oszczedny .plotno__warstwa--2,
.oszczedny .plotno__warstwa--3 { display: none; }
.oszczedny .sekcja--ciemna,
.oszczedny .stopka,
.oszczedny .zaufanie::before,
.oszczedny .sekcja--ciemna::before,
.oszczedny .stopka::before { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .plotno__warstwa { animation: none !important; }
  .sekcja--ciemna, .stopka { animation: none !important; transform: none !important; }
}

/* ============ MNIEJ PRZEZROCZYSTOŚCI ======================================
   Osobne ustawienie systemowe, niezależne od „mniej ruchu": część osób
   ma trudność z czytaniem tekstu na rozmytym, prześwitującym tle.
   Wtedy szkło zamienia się w zwykłą, pełną powierzchnię — układ zostaje
   ten sam, znika tylko przezroczystość. */
@media (prefers-reduced-transparency: reduce) {
  .naglowek--przewiniety,
  .dolny,
  .mega,
  .prywatnosc,
  .tor__link,
  .przycisk--obrys {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .naglowek--przewiniety { background: var(--tlo); }
  .dolny, .mega, .prywatnosc { background: var(--tlo-karta); }
  /* Tez musi isc za motywem — inaczej w jasnym motywie kafelki
     robilyby sie czarne przy wlaczonym "mniej przezroczystosci". */
  .tor__link { background: light-dark(rgba(255, 255, 255, .96), rgba(7, 13, 26, .88)); }
  .plotno__warstwa { opacity: .18 !important; }
}

/* ============================================================================
   JĘZYK DOTKNIĘCIA — ŚWIATŁA I PASY JEZDNI

   Cały słownik ruchu bierzemy z tego, co robi transport: światła przejeżdżają
   w bok, pasy na jezdni uciekają pod pojazd, a zatrzymanie ma dociąg jak
   hamowanie. Żadnych ikon, żadnego tłuczonego szkła — tylko światło i ruch.
   ========================================================================== */

/* ---------- SMUGA ŚWIATEŁ PRZY KLIKNIĘCIU -------------------------------- */
/* Klasa dokładana na czas trwania smugi — znika razem z nią, więc nie
   zostawia po sobie śladu w kodzie strony. */
.ma-smuge { position: relative; overflow: hidden; }
.smuga {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: var(--szer);
  height: 3px;
  margin-left: calc(var(--szer) / -2);
  margin-top: -1.5px;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--bursztyn) 55%, transparent) 28%,
    light-dark(#fff8e6, #fffdf5) 50%,
    color-mix(in srgb, var(--bursztyn) 55%, transparent) 72%,
    transparent);
  filter: blur(.5px);
  transform: scaleX(0) scaleY(.4);
  animation: smuga-przejazd .62s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes smuga-przejazd {
  0%   { transform: scaleX(0) scaleY(.35); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: scaleX(1.9) scaleY(1); opacity: 0; }
}

/* Druga warstwa: rozejście się światła w pionie — jak halo wokół reflektora. */
.smuga::before {
  content: "";
  position: absolute;
  inset: -14px -6%;
  border-radius: 999px;
  background: radial-gradient(60% 100% at 50% 50%,
    color-mix(in srgb, var(--bursztyn) 34%, transparent), transparent 72%);
  transform: scale(.2);
  opacity: 0;
  animation: smuga-halo .62s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes smuga-halo {
  0%   { transform: scale(.2); opacity: 0; }
  22%  { opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- PASY JEZDNI POD ODNOŚNIKIEM MENU ------------------------------
   Podkreślenie pod pozycją menu nie jest kreską, tylko przerywaną linią
   jak środek jezdni — a przy najechaniu ta linia RUSZA, tak jak pasy
   uciekające pod autokar. Przesuwa się tło jednej warstwy, nic więcej. */
.menu__link::after {
  background: repeating-linear-gradient(90deg,
    var(--bursztyn) 0 10px,
    transparent 10px 18px);
  background-size: 18px 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .menu__link:hover::after,
  .menu__link[aria-expanded="true"]::after {
    animation: pasy-jezdni .55s linear infinite;
  }
  @keyframes pasy-jezdni { to { background-position-x: -18px; } }
}
.oszczedny .menu__link::after { background: var(--bursztyn); animation: none; }

/* ---------- HAMOWANIE: WCIŚNIĘCIE MA DOCIĄG -------------------------------
   Wszystko, co klikalne, przy naciśnięciu lekko siada, a po puszczeniu
   wraca z dociągiem — jak pojazd, który staje i jeszcze chwilę się kołysze. */
.przycisk, .menu__link, .mega__poz, .dolny__poz, .spis__poz,
.tor__link, .motyw__guzik, .ikona-link, .sasiedzi a {
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
.przycisk:active, .mega__poz:active, .spis__poz:active,
.tor__link:active, .ikona-link:active, .sasiedzi a:active { transform: scale(.978); }
.dolny__poz:active, .dolny__telefon:active { transform: scale(.93); }

/* ---------- ŚWIATŁO REFLEKTORA PRZY NAJECHANIU ---------------------------
   Odnośniki w panelach i w spisie dostają wąską poświatę biegnącą przy
   dolnej krawędzi — czytelne „to jest teraz pod kursorem", bez ramki. */
@media (hover: hover) and (pointer: fine) {
  .mega__poz, .spis__poz { position: relative; }
  .mega__poz::after, .spis__poz::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--bursztyn), transparent);
    transform: scaleX(0);
    opacity: 0;
    transition: transform .42s var(--krzywa-wyraz), opacity .3s var(--krzywa);
    pointer-events: none;
  }
  .mega__poz:hover::after, .spis__poz:hover::after { transform: scaleX(1); opacity: .85; }
}

/* ---------- WYŁĄCZNIKI ---------------------------------------------------- */
.oszczedny .smuga { display: none; }
@media (prefers-reduced-motion: reduce) {
  .smuga { display: none; }
  .przycisk:active, .mega__poz:active, .spis__poz:active,
  .tor__link:active, .dolny__poz:active { transform: none; }
}

/* ==========================================================================
   BARITRANSS: nadpisania szablonu KS BUS. Doklejane na końcu arkusza
   szablonu przez zbuduj.cjs. Tylko to, co różni stronę firmy przewozowej
   od szablonu przewozów osób; komponenty i tokeny pochodzą z ksbus/css.
   ========================================================================== */

/* ---------- ZNAK I NAGŁÓWEK ------------------------------------------------ */
.znak strong { font-size: clamp(1.2rem, 2vw, 1.8rem); letter-spacing: -.05em; }
.znak--logo { display: inline-flex; align-items: center; color: var(--tekst); min-height: var(--dotyk); }
.znak--logo svg { display: block; height: clamp(28px, 2.1vw, 34px); width: auto; }
/* Logo jest szersze niż sam napis, więc pozycje menu nie mogą się łamać. */
.menu__link { white-space: nowrap; }
.stopka .znak--logo { color: var(--na-ciemnym, #eef2f8); }
.stopka .znak--logo svg { height: 40px; }
@media (max-width: 400px) { .znak--logo svg { height: 26px; } }
.naglowek__akcje { gap: var(--o-2); }

/* Telefon: na wąskim ekranie przycisk wyceny i przełączniki muszą się
   zmieścić w jednym pasie; przy powiększonym tekście pas się zawija. */
@media (max-width: 650px) {
  .naglowek__pas { flex-wrap: wrap; padding-block: .35rem; gap: .25rem; }
  .naglowek__akcje { max-width: 100%; flex-wrap: wrap; }
  .naglowek__akcje .przycisk { white-space: normal; text-align: center; }
  .jezyki__poz { min-width: 36px; padding-inline: .4rem; }
}
/* Na telefonie motyw i tak podąża za ustawieniem systemu (stan „auto”),
   a miejsce w pasie jest potrzebne na wybór języka i wycenę. */
@media (max-width: 650px) {
  .naglowek .motyw { display: none; }
}
/* Najwęższe telefony: w pasie zostaje tylko odnośnik do DRUGIEGO języka,
   bieżący widać po treści strony. Pas mieści się wtedy w jednym wierszu. */
@media (max-width: 400px) {
  .naglowek .jezyki { padding: 0; border: 0; background: none; }
  .naglowek .jezyki__poz--tu { display: none; }
  .naglowek .jezyki__poz { border: 1px solid var(--obrys); }
}

/* ---------- SCENA OTWIERAJĄCA ----------------------------------------------
   Od 1280 px zdjęcie na cały ekran (Ilya, 11.10.2026), tekst po lewej.
   Zdjęcie Ilyi ma busa bliżej środka, więc na ten układ idzie wersja
   „szeroka” (przedłużona w lewo o rozmyte lustro nieba i jeziora, ukryte pod
   przejściem w kolor tła). Bus leży w niej na 52–89% szerokości.
   Warunki, przy których bus jest cały i zawsze na prawo od tekstu:
   kadr w 66% (object-position), nagłówek nie wyższy niż szerokość / 1,7
   (od 1700 px: / 1,9), kolumna tekstu do min(520 px, 36vw). Policzone dla
   22 rozmiarów ekranu od 1280×720 do 3440×1300 i zmierzone (bus.mjs).
   Poniżej 1280 px: zdjęcie w oryginale 16:9 na całą szerokość nad tekstem. */
.hero {
  --hero-zaslona-mocna: light-dark(rgba(238,241,247,.97), rgba(7,13,26,.95));
  --hero-zaslona-srednia: light-dark(rgba(238,241,247,.8), rgba(7,13,26,.74));
  /* Prawa krawędź kolumny tekstu; przejście w tło kończy się tuż za nią,
     więc bus nigdy nie stoi pod mgłą. */
  --hero-tekst-koniec: calc(max(1.25rem, (100vw - var(--szer-tresc)) / 2) + min(520px, 36vw));
}
.hero__tlo { object-fit: cover; object-position: 50% 50%; opacity: 1; animation: none; transform: none; }
.hero__scena > picture { display: contents; }
.hero__blysk, .hero .ziarno { display: none; }
.hero__tresc { animation: none; }

@media (min-width: 1280px) {
  .hero { min-height: min(100svh, 100vw / 1.7); align-items: center; padding-top: calc(76px + var(--o-5)); padding-bottom: var(--o-7); }
  .hero__tlo { object-position: 66% 50%; }
  .hero__mgla {
    display: block;
    background:
      linear-gradient(90deg, var(--hero-zaslona-mocna) 0, var(--hero-zaslona-mocna) calc(var(--hero-tekst-koniec) - 380px), color-mix(in srgb, var(--hero-zaslona-mocna) 88%, transparent) calc(var(--hero-tekst-koniec) - 230px), color-mix(in srgb, var(--hero-zaslona-mocna) 66%, transparent) calc(var(--hero-tekst-koniec) - 110px), color-mix(in srgb, var(--hero-zaslona-mocna) 30%, transparent) calc(var(--hero-tekst-koniec) - 20px), color-mix(in srgb, var(--hero-zaslona-mocna) 8%, transparent) calc(var(--hero-tekst-koniec) + 20px), transparent calc(var(--hero-tekst-koniec) + 40px)),
      linear-gradient(0deg, var(--hero-tlo) 0%, transparent 14%),
      linear-gradient(180deg, var(--hero-zaslona-srednia) 0%, transparent 13%);
  }
  .hero__tresc { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: min(520px, 36vw); }
  .hero__tresc > * { max-width: 100%; }
  .hero__tytul { font-size: clamp(2.6rem, .8rem + 3vw, 4.6rem); max-width: 12ch; margin-bottom: var(--o-4); }
  /* Opis kończy się przed strefą przejścia w zdjęcie, więc stoi na pełnej mgle. */
  .hero__lead, .hero__pisze { max-width: calc(100% - 90px); margin-top: var(--o-2); }
  /* Kafelki dróg bez dopisków: zwarty nagłówek. */
  .hero .tor__opis { display: none; }
  .hero__akcje { order: 5; display: flex; flex-wrap: wrap; gap: var(--o-3); margin-top: var(--o-5); }
  .hero__akcje .przycisk { width: auto; }
  .hero .tory { order: 6; width: 100%; margin-top: var(--o-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .hero { min-height: min(100svh, 100vw / 1.9); }
}

@media (min-width: 721px) and (max-width: 1279px) {
  .hero {
    display: grid; align-items: start; min-height: 0; grid-template-columns: minmax(0, 1fr);
    padding-inline: 0; padding-top: 0; padding-bottom: var(--o-8);
  }
  .hero__scena {
    position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; max-height: 74svh;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero__mgla { display: block; background: linear-gradient(0deg, var(--hero-tlo) 0%, transparent 22%); }
  .hero__tresc { max-width: none; margin-top: calc(-1 * var(--o-7)); position: relative; z-index: 2; padding-inline: max(1.25rem, calc((100vw - var(--szer-tresc)) / 2)); }
}
@media (max-width: 860px) {
  .hero__lead { display: block; font-size: var(--t-mały); margin-top: var(--o-3); }
}

/* ---------- USŁUGI: CZTERY KARTY -------------------------------------------
   Szablon liczył na trzy usługi. Przy czterech ostatnia zostawała sama
   w rzędzie; teraz cztery w rzędzie na komputerze, dwie na tablecie. */
/* Sześć usług: trzy w rzędzie na komputerze (3 × 2), dwie na tablecie. */
.uslugi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.foto--usluga .foto__ramka { border: 0; border-bottom: 1px solid var(--obrys); border-radius: 0; }

/* ---------- ZDJĘCIA POJAZDÓW NA SCENIE ------------------------------------- */
.foto--rozlam.foto--scena .foto__ramka { padding: clamp(var(--o-5), 6%, var(--o-8)); }
.foto--menu { width: 100%; }
.foto--menu .foto__ramka { padding: var(--o-3); box-shadow: none; }
.dobor__foto {
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: end center; aspect-ratio: 16 / 11;
  padding: clamp(var(--o-4), 5%, var(--o-7));
  background:
    radial-gradient(60% 55% at 50% 38%, light-dark(rgba(232,167,35,.16), rgba(232,167,35,.14)), transparent 70%),
    linear-gradient(180deg, light-dark(#f4f6fa, #142036) 0 62%, light-dark(#e6eaf1, #0e182a) 62% 100%);
  border: 1px solid var(--obrys);
}
.dobor__obraz { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; animation: none; transform: none; }
/* Nazwa zabudowy w miejscu liczby miejsc z szablonu: słowo, więc zwykłym pismem. */
.dobor__liczba { font-family: var(--pismo); letter-spacing: -.035em; }
.naglowek-strony--z-obrazem .foto--scena { align-self: end; }
.naglowek-strony--z-obrazem .foto--scena .foto__ramka { box-shadow: var(--cien-2); }
.foto--pojazd.foto--scena .foto__obraz { aspect-ratio: auto; }

/* ---------- PAS ZAUFANIA ---------------------------------------------------- */
.zaufanie__liczby { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 420px) { .zaufanie__liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- PODSTRONY ------------------------------------------------------- */
.wpis--bez-boku { grid-template-columns: minmax(0, 1fr); }
.wpis__tresc h2:first-child { margin-top: 0; }
.fakty { display: grid; gap: var(--o-3); margin: var(--o-2) 0 var(--o-3); }
.fakty dt { font-size: var(--t-nano); letter-spacing: .12em; text-transform: uppercase; color: var(--na-ciemnym-cichy); }
.fakty dd { margin: 2px 0 0; font-weight: 600; font-size: var(--t-mały); color: var(--na-ciemnym); }
.wpis__pudelko .przycisk { justify-content: center; }

.lista-znaczona--dwie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: var(--o-6); }
.sekcja--przygotuj .dane-firmy, .sekcja--wzor .dane-firmy { gap: var(--o-4); }

/* Furgon obok plandeki: dwie sceny, nazwa i jedno zdanie. */
.porownanie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--o-5); }
.porownanie__karta { display: grid; gap: var(--o-3); align-content: start; }
.porownanie__nazwa { font-size: var(--t-h3); margin-top: var(--o-2); }
.porownanie__opis { color: var(--tekst-cichy); font-size: var(--t-mały); max-width: 46ch; }

/* Wzór zapytania: blok do skopiowania, czytelny także na telefonie. */
.wzor {
  margin: 0; padding: var(--o-5);
  border-radius: var(--zaokr-m);
  background: var(--tlo-cichy);
  border: 1px dashed var(--obrys-mocny);
  font-family: var(--pismo-liczby);
  font-size: var(--t-mikro);
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tekst);
}

/* Kontakt: telefon i e-mail jako największe elementy strony. */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--o-5); align-items: start; }
.kontakt__karta {
  display: grid; gap: var(--o-3); align-content: start;
  padding: clamp(var(--o-5), 3vw, var(--o-7));
  border: 1px solid var(--obrys); border-radius: var(--zaokr-l);
  background: var(--tlo-karta);
}
.kontakt__karta--glowna {
  color: var(--na-ciemnym);
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(232,167,35,.22), transparent 60%),
    linear-gradient(160deg, var(--granat-800), var(--granat-600));
  border-color: transparent;
}
.kontakt__etykieta { font-size: var(--t-nano); letter-spacing: .14em; text-transform: uppercase; color: var(--na-ciemnym-cichy); margin-top: var(--o-3); }
.kontakt__etykieta:first-child { margin-top: 0; }
.kontakt__wielki {
  display: inline-flex; align-items: center; gap: var(--o-3); min-height: var(--dotyk);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); font-weight: 750; letter-spacing: -.02em;
  color: var(--bursztyn-jasny); overflow-wrap: anywhere;
}
.kontakt__wielki--mail { font-size: clamp(1.05rem, .9rem + .9vw, 1.45rem); color: var(--na-ciemnym); }
.kontakt__wielki .ikona { flex: none; width: 1.1em; height: 1.1em; }
.kontakt__adres { font-style: normal; color: var(--na-ciemnym); line-height: 1.6; }
.kontakt__karta--glowna .ikona-link { color: var(--na-ciemnym); border-color: rgba(238,242,248,.22); }
@media (max-width: 860px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }

/* Spis podstron na stronie błędu i na głównej: bez ozdobnego zawijania. */
.sekcja .spis { margin-inline: 0; }
.stopka__mail { overflow-wrap: anywhere; }

/* Sześć atutów: dwa rzędy po trzy zamiast czterech i dwóch. */
.atuty { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Tytuły podstron: polskie słowa bywają długie („międzynarodowy”), więc obok
   zdjęcia i na wąskim telefonie tytuł jest o stopień mniejszy niż w szablonie. */
.naglowek-strony--z-obrazem .naglowek-strony__tytul { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); }
@media (max-width: 480px) { .naglowek-strony__tytul { font-size: clamp(1.9rem, 9.4vw, 2.4rem); } }
.dobor__liczba { font-size: clamp(2rem, 1rem + 4vw, 4rem); overflow-wrap: anywhere; }
.zaufanie__staly { padding-inline-end: .06em; }

/* ==========================================================================
   BANERY PODSTRON: ZDJĘCIE, MOZAIKA, ZNACZEK ZASIĘGU (grafiki.cjs)
   ========================================================================== */
/* Baner podstrony: wszystko, co ważne, w pierwszym ekranie. Mniejszy górny
   oddech niż w szablonie, tytuł o stopień niżej, fakty pod przyciskami. */
.naglowek-strony--z-obrazem { padding-top: calc(76px + var(--o-6)); padding-bottom: var(--o-7); align-items: center; }
.naglowek-strony--z-obrazem .naglowek-strony__tytul { font-size: clamp(2rem, 1rem + 2.5vw, 3.5rem); max-width: 22ch; }
.naglowek-strony--z-obrazem .naglowek-strony__lead { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); max-width: 58ch; }
.naglowek-strony--z-obrazem .okruszki { margin-bottom: var(--o-4); }
.fakty-baneru { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-5); list-style: none; padding: 0; margin: var(--o-3) 0 0; }
.fakty-baneru li { display: inline-flex; align-items: center; gap: var(--o-2); font-size: var(--t-mikro); font-weight: 600; color: var(--baner-tekst, var(--tekst)); }
.fakty-baneru .ikona { color: var(--bursztyn-ciemny); flex: none; }

.grafika-strony { margin: 0; display: grid; gap: var(--o-3); min-width: 0; }
/* Zdjęcie banera: kadr 4:3, zaokrąglenie i cień jak karty szablonu, cienka
   złota krawędź światła u góry (znak marki), bez ruchu przy przewijaniu. */
.grafika-strony__scena {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--zaokr-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--granat-800);
  box-shadow: var(--cien-3, var(--cien-2));
}
.grafika-strony__scena::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 2px 0 rgba(242,187,71,.55);
}
.grafika-strony__scena > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grafika-strony__zrodlo { opacity: .85; }
.grafika-strony__zrodlo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Mozaika na stronie usług: cztery zdjęcia, po jednym na usługę. */
.mozaika { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--granat-900); }
.mozaika__kafel { position: relative; overflow: hidden; }
.mozaika__kafel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mozaika .znak-zasiegu span { display: none; }

/* Znaczek zasięgu: flagi i krótki napis na matowym szkle w rogu zdjęcia. */
.znak-zasiegu {
  position: absolute; left: var(--o-3); bottom: var(--o-3); z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 7px; border-radius: 999px;
  background: rgba(10,18,30,.62); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--t-mikro); font-weight: 650; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.16);
}
.znak-zasiegu .flaga { width: 22px; height: 16.5px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.4); flex: none; }
.grafika-strony__podpis { font-size: var(--t-mikro); color: var(--baner-cichy, var(--tekst-cichy)); max-width: 52ch; }


/* Kontakt: karta z telefonem i e-mailem jako prawa kolumna banera. */
.kontakt__karta--baner { box-shadow: var(--cien-2); }
.kontakt--jedna { grid-template-columns: minmax(0, 1fr); }
.kontakt__podtytul { font-size: var(--t-h3); margin-top: var(--o-4); }
@media (max-width: 860px) {
  .naglowek-strony--z-obrazem { padding-top: calc(76px + var(--o-5)); }
  .grafika-strony { max-width: 520px; }
}

/* ---------- STAŁE KIERUNKI ZAGRANICZNE (grafiki.cjs: kierunki) ------------
   Flaga i nazwa kraju w kapsule; pod mapą Polski na głównej i na zasięgu,
   pod banerem transportu międzynarodowego. */
.kierunki { display: grid; gap: var(--o-2) var(--o-5); grid-template-columns: minmax(0, 1fr); align-items: center;
  padding: clamp(var(--o-5), 3vw, var(--o-6)); border-radius: var(--zaokr-l); border: 1px solid var(--obrys); background: var(--tlo-karta); }
.kierunki__tytul { font-size: var(--t-h3); font-weight: 750; letter-spacing: -.01em; }
.kierunki__opis { color: var(--tekst-cichy); font-size: var(--t-mały); }
.kierunki__lista { display: flex; flex-wrap: wrap; gap: var(--o-3); list-style: none; padding: 0; margin: var(--o-2) 0 0; }
.kierunki__kraj { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 10px;
  border-radius: 999px; border: 1px solid var(--obrys-mocny); background: var(--tlo); font-weight: 650; }
.kierunki__kraj .flaga { width: 32px; height: 24px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(16,24,38,.14); }
@media (min-width: 900px) {
  .kierunki { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "tytul lista" "opis lista"; }
  .kierunki__tytul { grid-area: tytul; align-self: end; } .kierunki__opis { grid-area: opis; align-self: start; }
  .kierunki__lista { grid-area: lista; justify-content: flex-end; margin: 0; }
}
.kierunki--na-ciemnym { margin-top: var(--o-7); background: light-dark(rgba(255,255,255,.7), rgba(238,242,248,.05)); border-color: light-dark(rgba(16,24,38,.1), rgba(238,242,248,.14)); }
.sekcja--kierunki { padding-bottom: var(--o-7); }
.sekcja--kierunki + .sekcja { padding-top: 0; }
.dla-firm { display: flex; gap: var(--o-2); align-items: flex-start; padding: var(--o-3) var(--o-4); border-radius: var(--zaokr-m);
  background: color-mix(in srgb, var(--bursztyn) 12%, transparent); font-size: var(--t-mały); font-weight: 600; }
.dla-firm .ikona { color: var(--bursztyn-ciemny); flex: none; margin-top: 2px; }

/* ==========================================================================
   GŁĘBIA TEKSTU: nagłówki „w powietrzu”, treść o stopień słabiej
   (Ilya, 11.10.2026). Trzy warstwy cienia: cienka jasna krawędź u góry
   (światło), bliski cień pod literą i szeroka miękka poświata niżej.
   Cień to wartość złożona, a light-dark() działa tylko na kolorach, więc
   motyw zmienia KOLORY warstw, nie samą listę. W elementach zawsze ciemnych
   (pas wezwania, stopka, karta kontaktu, pudełko „W skrócie”) wymuszamy
   kolory ciemne, inaczej biała krawędź obrysowałaby jasne litery.
   Bez zdania z gradientem w literach (.oswiadczenie__tekst): ma przezroczysty
   kolor tekstu, więc cień prześwitywałby przez litery.
   ========================================================================== */
:root {
  --glebia-swiatlo: light-dark(rgba(255,255,255,.9), rgba(255,255,255,0));
  --glebia-blisko: light-dark(rgba(16,24,38,.12), rgba(0,0,0,.5));
  --glebia-daleko: light-dark(rgba(16,24,38,.16), rgba(0,0,0,.55));
  --glebia-tekst-swiatlo: light-dark(rgba(255,255,255,.65), rgba(255,255,255,0));
  --glebia-tekst-daleko: light-dark(rgba(16,24,38,.07), rgba(0,0,0,.38));
  --glebia-naglowek: 0 1px 0 var(--glebia-swiatlo), 0 2px 3px var(--glebia-blisko), 0 14px 32px var(--glebia-daleko);
  --glebia-tresc: 0 1px 0 var(--glebia-tekst-swiatlo), 0 4px 14px var(--glebia-tekst-daleko);
}
.wezwanie, .stopka, .wpis__pudelko, .kontakt__karta--glowna, .grafika-strony__scena, .znak-zasiegu {
  --glebia-swiatlo: rgba(255,255,255,0);
  --glebia-blisko: rgba(0,0,0,.45);
  --glebia-daleko: rgba(0,0,0,.5);
  --glebia-tekst-swiatlo: rgba(255,255,255,0);
  --glebia-tekst-daleko: rgba(0,0,0,.32);
}
h1, h2, h3,
.hero__tytul, .naglowek-strony__tytul, .sekcja__tytul, .wezwanie__tytul, .kierunki__tytul,
.usluga__nazwa, .atut__tytul, .krok__tytul, .tor__tytul, .pojazd-karta__nazwa, .porownanie__nazwa,
.zaufanie__liczba .licznik, .zaufanie__staly, .dobor__liczba, .kontakt__wielki,
.hero__pisze-slowo, .stopka__telefon, .stopka__mail {
  text-shadow: var(--glebia-naglowek);
}
main p, main li, main dd, main address, .stopka p, .stopka li, .stopka address,
.hero__nadtytul, .sekcja__nad, .okruszki {
  text-shadow: var(--glebia-tresc);
}
.oswiadczenie__tekst, .oswiadczenie__tekst * { text-shadow: none; }
/* Przyciski i flagi mają własne światło. */
.przycisk, .przycisk *, .kierunki__kraj, .jezyki__poz, .dolny * { text-shadow: none; }

/* Odnośnik do spółki z grupy w treści: kolor marki, podkreślenie, znak ↗. */
.link-grupy { color: var(--bursztyn-ciemny); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link-grupy::after { content: " ↗"; font-weight: 500; }
.link-grupy:hover { color: var(--tekst); }

/* ==========================================================================
   EFEKTY PREMIUM ZDJĘĆ I AUT (Ilya, 12.10.2026)
   Auta wycięte z tła: cień kontaktowy pod kołami, dół wtopiony w podłogę,
   światło studyjne i ciemniejsze rogi sceny, uniesienie pod kursorem.
   Zdjęcia: wspólna kolorystyka (zdjęcia z różnych źródeł wyglądają jak
   z jednej sesji), winieta, cień warstwowy i powolne przybliżenie.
   Sam CSS: zero dodatkowych plików. Ruch tylko z myszką i bez prośby
   systemu o ograniczenie ruchu.
   ========================================================================== */
:root {
  --cien-zdjecia: 0 1px 2px rgba(16,24,38,.08), 0 10px 22px -8px rgba(16,24,38,.22), 0 34px 60px -30px rgba(16,24,38,.42);
  --cien-zdjecia-mocny: 0 1px 2px rgba(16,24,38,.1), 0 16px 30px -10px rgba(16,24,38,.28), 0 48px 80px -34px rgba(16,24,38,.5);
  --kolor-zdjec: contrast(1.06) saturate(1.08) brightness(1.01);
}

/* --- Auta na scenie --- */
.foto--scena .foto__ramka, .dobor__foto {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -60px 80px -60px light-dark(rgba(16,24,38,.10), rgba(0,0,0,.45)), var(--cien-zdjecia);
  background:
    radial-gradient(55% 45% at 50% 30%, light-dark(rgba(255,255,255,.95), rgba(60,80,110,.55)), transparent 70%),
    radial-gradient(60% 55% at 50% 40%, light-dark(rgba(232,167,35,.14), rgba(232,167,35,.12)), transparent 72%),
    radial-gradient(140% 120% at 50% 40%, transparent 55%, light-dark(rgba(16,24,38,.10), rgba(0,0,0,.4)) 100%),
    linear-gradient(180deg, light-dark(#f4f6fa, #142036) 0 64%, light-dark(#e3e7ee, #0d1626) 64% 100%);
}
.foto--scena .foto__obraz, .dobor__obraz {
  /* Cień kontaktowy: ciemny i wąski tuż pod oponami, miękki i szeroki niżej. */
  filter: drop-shadow(0 3px 2px light-dark(rgba(16,24,38,.45), rgba(0,0,0,.7))) drop-shadow(0 18px 18px light-dark(rgba(16,24,38,.22), rgba(0,0,0,.5)));
  transition: transform .5s var(--krzywa-wyraz, cubic-bezier(.2,.7,.2,1)), filter .5s;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foto--scena:hover .foto__obraz, .dobor__krok:hover .dobor__obraz {
    transform: translateY(-6px);
    filter: drop-shadow(0 8px 4px light-dark(rgba(16,24,38,.3), rgba(0,0,0,.6))) drop-shadow(0 28px 26px light-dark(rgba(16,24,38,.24), rgba(0,0,0,.5)));
  }
}

/* --- Zdjęcia --- */
.grafika-strony__scena img, .mozaika__kafel img, .foto--usluga .foto__obraz, .foto--rozlam:not(.foto--scena) .foto__obraz, .hero__tlo {
  filter: var(--kolor-zdjec);
}
.grafika-strony__scena, .foto--rozlam:not(.foto--scena) .foto__ramka { box-shadow: var(--cien-zdjecia); }
/* Winieta: ciemniejsze rogi prowadzą wzrok do środka kadru. */
.grafika-strony__scena::before, .mozaika__kafel::after, .foto--usluga .foto__ramka::before, .foto--rozlam:not(.foto--scena) .foto__ramka::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(8,14,24,.26) 100%);
}
.grafika-strony__scena img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .grafika-strony:hover .grafika-strony__scena { box-shadow: var(--cien-zdjecia-mocny); }
  .grafika-strony:hover .grafika-strony__scena > img { transform: scale(1.04); }
  .mozaika__kafel img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .mozaika__kafel:hover img { transform: scale(1.05); }
}
.znak-zasiegu { z-index: 2; }

/* KOREKCJA ZDJĘĆ, wersja wyważona (12.10.2026). Rozmycie i mocne
   przyciemnienie wszystkiego naraz wyglądały tanio (Ilya: „przesadziłeś”).
   Zdjęcia poglądowe to dobre zdjęcia profesjonalistów: dostają tylko lekką
   wspólną korektę koloru i delikatne przyciemnienie dołu kadru. Zdjęcie
   biura ma kadr i zmiękczenie wbudowane w plik, auta mają czyste krawędzie
   w plikach. Nic nie jest rozmywane w przeglądarce. */
:root { --kolor-zdjec: contrast(1.04) saturate(1.05); }
.grafika-strony__scena::before, .mozaika__kafel::after, .foto--usluga .foto__ramka::before, .foto--rozlam:not(.foto--scena) .foto__ramka::before {
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(8,14,24,.20) 100%),
    radial-gradient(140% 110% at 50% 40%, transparent 62%, rgba(8,14,24,.16) 100%);
}
/* Zdjęcie biura w sekcji grupy: kadr 16:10 (plik przycięty do ludzi i monitorów). */
#o-nas .foto { --proporcja: 16 / 10; }
#o-nas .foto__obraz { aspect-ratio: 16 / 10; }

/* Auta na scenie: jednolite tło jak w studiu (bez twardej linii podłogi),
   światło z góry i miękki cień pod autem. */
.foto--scena .foto__ramka, .dobor__foto {
  background:
    radial-gradient(70% 55% at 50% 28%, light-dark(#ffffff, #2a3a55) 0%, transparent 75%),
    radial-gradient(60% 18% at 50% 92%, light-dark(rgba(16,24,38,.10), rgba(0,0,0,.35)) 0%, transparent 100%),
    linear-gradient(180deg, light-dark(#f3f5f8, #172338) 0%, light-dark(#e6eaf0, #0f1828) 100%);
}

/* NASZA BAZA (O firmie): duże zdjęcie z drona i dwa mniejsze obok. */
.baza { display: grid; gap: var(--o-4); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.foto--baza-duze { grid-row: 1 / span 2; }
.foto--baza .foto__ramka { box-shadow: var(--cien-zdjecia); }
.foto--baza .foto__obraz { filter: var(--kolor-zdjec); }
.foto--baza-duze .foto__obraz { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .baza { grid-template-columns: minmax(0, 1fr); } .foto--baza-duze { grid-row: auto; } }