@import url("/css/fonty.css");

/* ==========================================================================
   WEBSORO - arkusz stylow
   ==========================================================================
   01. Tokeny (kolory, typografia, odstepy, cienie)
   02. Reset i baza
   03. Typografia
   04. Uklad i siatki
   05. Sekcje i tla
   06. Naglowki sekcji
   07. Przyciski
   08. Etykiety, chipy, odznaki
   09. Karty i bento
   10. Naglowek strony i nawigacja
   11. Hero
   12. Wizual hero (SERP i AI)
   13. Pasek zaufania i marquee
   14. Statystyki i liczby
   15. Proces i osie czasu
   16. Realizacje
   17. Persony i branze
   18. Cennik
   19. FAQ i akordeon
   20. Formularze
   21. Pasek CTA
   22. Stopka
   23. Naglowek podstrony i okruszki
   24. Tresc artykulu (prose) i spis tresci
   25. Tabele
   26. Cookie i elementy plywajace
   27. Animacje i ujawnianie przy scrollu
   28. Dostepnosc i druk
   ========================================================================== */

/* ==========================================================================
   01. TOKENY
   ========================================================================== */

:root {
  /* Marka
     Zrodlem prawdy jest gradient logotypu, odczytany wprost z pliku wektorowego:
       #006696  ->  #00A9B0 (52,14%)  ->  #9BBA57
     Srodek lezy na 52,14%, nie na 50% - zielen zaczyna sie ciut pozniej i tego
     nie zaokraglamy, bo na tym polega charakter tego gradientu.
     Odpowiedniki CMYK do druku: 91/53/21/5, 76/8/33/0, 46/7/78/3.

     Dwie osie kolorystyczne:
     - gradient-marka i marka-500/600/700 niosa tekst albo ikony, wiec spelniaja WCAG AA
     - gradient-akcent to czysta dekoracja (paski, kropki, obramowania), bez tresci na wierzchu
     Uwaga: turkus #00A9B0 (2,8:1 na bieli) i zielen #9BBA57 (2,2:1) nie przechodza AA,
     wiec nigdy nie moga niesc tekstu ani ikon informacyjnych. */
  --marka-500: #006696;
  --marka-600: #00527a;
  --marka-700: #003f5c;
  --marka-400: #00a9b0;
  --marka-300: #4eb184;
  --marka-200: #9bba57;
  --marka-100: #cce6ec;
  --marka-50: #ebf5f8;

  --gradient-marka: linear-gradient(100deg, #004f73 0%, #005f8a 52.14%, #006696 100%);
  --gradient-akcent: linear-gradient(100deg, #006696 0%, #00a9b0 52.14%, #9bba57 100%);
  --gradient-marka-pion: linear-gradient(170deg, #004f73 0%, #006696 100%);
  /* Uzywany tylko na <h1>, czyli duzym tekscie - prog AA to tam 3:1.
     Stopy przyciemnione wzgledem logotypu wlasnie po to: 6,3:1 / 3,4:1 / 3,2:1. */
  --gradient-tekst: linear-gradient(96deg, #006696 0%, #009aa1 52.14%, #7d9a3e 100%);
  --gradient-ciemny: linear-gradient(155deg, #0b1720 0%, #0e1f2a 55%, #0d2529 100%);

  /* Neutralne, chlodna os */
  --ink-900: #101820;
  --ink-800: #18222c;
  --ink-700: #243140;
  --ink-600: #41505f;
  --ink-500: #62717f;
  --ink-400: #8593a0;
  --ink-300: #adb9c4;
  --ink-200: #d7dee5;
  --ink-150: #e4eaef;
  --ink-100: #eef2f6;
  --ink-50: #f7f9fb;

  --papier-50: #fbfdfe;
  --papier-100: #f2f7fa;
  --papier-200: #e6eef3;

  --biel: #ffffff;

  /* Semantyczne */
  --tlo: var(--papier-50);
  --tlo-alt: var(--papier-100);
  --tlo-karta: var(--biel);
  --tekst: var(--ink-800);
  --tekst-slaby: var(--ink-500);
  --tekst-mocny: var(--ink-900);
  --linia: rgba(16, 24, 32, 0.10);
  --linia-mocna: rgba(16, 24, 32, 0.18);
  /* Zielen z rodziny logotypu, przyciemniona do 4,8:1 na bieli.
     Wczesniej stalo tu #0F9D58, czyli zielen Google - obca palecie. */
  --sukces: #547d28;
  --uwaga: #d97706;

  /* Typografia */
  --font-naglowek: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-tekst: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: clamp(1.03rem, 0.99rem + 0.2vw, 1.125rem);
  --t-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-2xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --t-3xl: clamp(1.95rem, 1.55rem + 1.8vw, 3rem);
  --t-4xl: clamp(2.15rem, 1.6rem + 2.5vw, 3.5rem);
  --t-5xl: clamp(2.4rem, 1.7rem + 3vw, 4.05rem);

  /* Odstepy */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;

  --sekcja-y: clamp(3.75rem, 2.5rem + 5vw, 7.5rem);
  --sekcja-y-mala: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  /* Zaokraglenia */
  --r-xs: 0px;
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --r-2xl: 0px;
  --r-pill: 0px;

  /* Cienie */
  --cien-xs: 0 1px 2px rgba(16, 24, 32, 0.05);
  --cien-sm: 0 2px 8px rgba(16, 24, 32, 0.06), 0 1px 2px rgba(16, 24, 32, 0.04);
  --cien-md: 0 6px 24px rgba(16, 24, 32, 0.07), 0 2px 6px rgba(16, 24, 32, 0.04);
  --cien-lg: 0 18px 48px rgba(16, 24, 32, 0.1), 0 4px 12px rgba(16, 24, 32, 0.05);
  --cien-xl: 0 32px 80px rgba(16, 24, 32, 0.14), 0 8px 20px rgba(16, 24, 32, 0.06);
  --cien-marka: 0 12px 32px rgba(0, 102, 150, 0.30);
  --cien-marka-mocny: 0 18px 44px rgba(0, 102, 150, 0.40);

  /* Uklad */
  --szer-max: 1240px;
  --szer-max-szeroki: 1400px;
  /* Uwaga na jednostke ch: mierzy szerokosc znaku "0", a nie sredniej litery.
     W Poppins zero jest o 14 procent szersze, wiec 72ch dawalo 84 znaki w wierszu.
     61ch daje realne 70 znakow, czyli srodek zalecanego przedzialu 45-75. */
  /* 76ch daje okolo 860 px, czyli 75 znakow w linii przy Raleway 21,6 px. Norma
     typograficzna to 45-75 znakow, WCAG 1.4.8 stawia granice na 80. Wczesniej stalo
     tu 61ch (690 px, 60 znakow) i kolumna czytala sie jak waski slupek. Decyzja
     wlascicielki 2026-08-24 po porownaniu czterech szerokosci na zywym akapicie. */
  /* 80ch to dokladnie gorna granica z WCAG 1.4.8 (Visual Presentation): szerokosc
     bloku tekstu nie wieksza niz 80 znakow. Jednostka ch mierzy szerokosc znaku "0",
     ktory w Raleway jest szerszy od sredniej malej litery, wiec realnie w linii miesci
     sie okolo 77 znakow, a w akapitach z krotkimi wyrazami do 87. To standardowy sposob
     zapisu tego kryterium i tego trzymamy sie swiadomie.
     Historia: 61ch (690 px) -> 76ch (860 px) -> 80ch. Wlascicielka 2026-08-24:
     "poszerz na maxa ale nadal zgodnie z WCAG". Szerzej sie nie da bez lamania normy. */
  --szer-max-tekst: 80ch;
  --margines: clamp(1.15rem, 4vw, 2.5rem);
  --wys-headera: 76px;

  /* Ruch */
  --tr-szybko: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-norm: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-wolno: 500ms cubic-bezier(0.22, 1, 0.36, 1);
  --tr-sprezyste: 450ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ==========================================================================
   02. RESET I BAZA
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wys-headera) + 1.5rem);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-tekst);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}

body.menu-otwarte {
  overflow: hidden;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--marka-600);
  text-decoration-color: rgba(0, 102, 150, 0.35);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--tr-szybko), text-decoration-color var(--tr-szybko);
}

a:hover {
  color: var(--marka-700);
  text-decoration-color: currentColor;
}

ul,
ol {
  padding-left: 1.25rem;
}

hr {
  border: none;
  border-top: 1px solid var(--linia);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--marka-200);
  color: var(--ink-900);
}

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

/* Pasek przewijania (webkit) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--ink-50);
}
::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: 99px;
  border: 3px solid var(--ink-50);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-300);
}

/* Pominiecie nawigacji */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 2000;
  padding: 0.85rem 1.5rem;
  background: var(--ink-900);
  color: var(--biel);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--tr-norm);
}

.skip-link:focus {
  top: 0;
  color: var(--biel);
}

/* ==========================================================================
   03. TYPOGRAFIA
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-naglowek);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--tekst-mocny);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-5xl);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--t-3xl);
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.2;
}

h4 {
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.3;
}

h5,
h6 {
  font-size: var(--t-md);
  font-weight: 700;
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 600;
  color: var(--tekst-mocny);
}

small {
  font-size: var(--t-sm);
}

.lead {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-600);
}

.tekst-mniejszy {
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
}

.gradient-tekst {
  background: var(--gradient-tekst);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Zapas z prawej. Naglowki maja ujemne swiatlo miedzyliterowe (-0,035em),
     ktore skraca pole OSTATNIEGO znaku - a background-clip: text maluje tylko
     w polu, wiec prawa krawedz ostatniej litery byla scinana. Zmierzone na H1
     strony glownej: tusz „co" wychodzil 1,35 px poza pole. */
  padding-right: 0.06em;
  /* Bez tego zapas dziala tylko na koncu CALEGO napisu. Gdy tekst lamie sie na
     kilka linii, ostatnia litera kazdej linii posrodku nadal byla scinana -
     tak jak „o" w wyrazie „co" na koncu drugiej linii H1. `clone` daje
     kazdemu fragmentowi linii wlasne pole, wiec zapas obowiazuje w kazdej. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.podkreslenie-marka {
  position: relative;
  white-space: nowrap;
}

.podkreslenie-marka::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.03em;
  height: 0.32em;
  background: linear-gradient(90deg, rgba(0, 169, 176, 0.28), rgba(155, 186, 87, 0.5));
  border-radius: 3px;
  z-index: -1;
}

.wyrownanie-srodek {
  text-align: center;
}

.tylko-desktop {
  display: none;
}

@media (min-width: 620px) {
  .tylko-desktop {
    display: inline;
  }
}

/* ==========================================================================
   04. UKLAD I SIATKI
   ========================================================================== */

/* Wyrownanie i marginesy trzymamy na wszystkich trzech klasach, nie tylko na .kontener.
   Wczesniej -szeroki i -waski byly czystymi modyfikatorami: ustawialy sama szerokosc
   maksymalna, wiec uzyte samodzielnie (bez .kontener) traca margin-inline: auto
   i przyklejaja sie do lewej krawedzi. Trafilo sie to w 8 miejscach na 4 podstronach.
   Teraz kazdy zapis dziala poprawnie, osobno i w parze. */
.kontener,
.kontener-szeroki,
.kontener-waski {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--margines);
}

.kontener {
  max-width: var(--szer-max);
}

.kontener-szeroki {
  max-width: var(--szer-max-szeroki);
}

.kontener-waski {
  max-width: 880px;
}

.siatka {
  display: grid;
  gap: var(--s-5);
}

/* Zabezpieczenie: element siatki nie moze rozpychac ukladu poza ekran */
.siatka > *,
.bento > *,
.hero-wnetrze > *,
.uklad-tresci > *,
.naglowek-sekcji-zrzad > *,
.naglowek-strony-wnetrze > *,
.cta-pasek-wnetrze > *,
.stopka-gora > *,
.proces > *,
.realizacje > *,
.persony > *,
.cennik > *,
.statystyki > * {
  min-width: 0;
}

.siatka-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Wariant naprawdę zawsze-2-kolumnowy: .siatka-2 potrafi przez auto-fit
   spakowac 3 karty w jednym rzedzie na szerokim ekranie (wtedy parzysta
   liczba kart, np. 4, laduje jako 3+1 zamiast 2+2). Uzywaj tego wariantu
   tam, gdzie liczba kart jest z gory znana i parzysta - patrz zasada
   w BRIEF-REDAKCYJNY.md sekcja 7. */
.siatka-2-stala {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .siatka-2-stala {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Siatka z DOKLADNIE czterema kartami: auto-fit ustawilby je 3+1, czyli
   z sierota w ostatnim rzedzie. Zasada: parzysta liczba boksow to 2+2,
   nigdy 3+1 (BRIEF-REDAKCYJNY.md sekcja 7). Wymuszamy to regula zamiast
   dopisywac .siatka-2-stala w kilkudziesieciu miejscach - dzieki temu
   kazda nowa sekcja z czterema kartami jest chroniona automatycznie.
   Selektor czyta sie: czwarte dziecko jest jednoczesnie ostatnim. */
@media (min-width: 640px) {
  .siatka-2:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.siatka-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.siatka-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.siatka-split {
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .siatka-split {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .siatka-split-tekst {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.stos {
  display: flex;
  flex-direction: column;
}

.stos > * + * {
  margin-top: var(--s-4);
}

.rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.rzad-srodek {
  justify-content: center;
}

/* ==========================================================================
   05. SEKCJE I TLA
   ========================================================================== */

.sekcja {
  padding-block: var(--sekcja-y);
  position: relative;
}

.sekcja-mala {
  padding-block: var(--sekcja-y-mala);
}

.sekcja-gora-mala {
  padding-top: var(--s-2);
}

/* Dla sekcji, ktora dzieli tlo z nastepna i ma czytac sie razem z nia jako
   jeden obszar. Bez tego oba dopelnienia sumuja sie w podwojna przerwe.
   Odpowiednik .sekcja-bez-gory z sekcji 24, tylko od drugiej strony. */
.sekcja-bez-dolu {
  padding-bottom: 0;
}

.sekcja-alt {
  background: var(--tlo-alt);
}

.sekcja-biala {
  background: var(--biel);
}

.sekcja-ciemna {
  background: var(--gradient-ciemny);
  color: var(--ink-200);
  --tekst: #d7dee5;
  --tekst-mocny: #ffffff;
  --tekst-slaby: #9aa8b5;
  --linia: rgba(255, 255, 255, 0.12);
  --linia-mocna: rgba(255, 255, 255, 0.22);
  --tlo-karta: rgba(255, 255, 255, 0.045);
  --cien-md: none;
  --cien-lg: none;
  overflow: hidden;
}

.sekcja-ciemna h1,
.sekcja-ciemna h2,
.sekcja-ciemna h3,
.sekcja-ciemna h4,
.sekcja-ciemna strong {
  color: #fff;
}

.sekcja-ciemna .lead {
  color: #b0bcc8;
}

.sekcja-ciemna a:not(.btn) {
  color: var(--marka-200);
}

.sekcja-ciemna a:not(.btn):hover {
  color: var(--marka-100);
}

/* Delikatna poswiata w rogu ciemnych sekcji */
.sekcja-ciemna::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 102, 150, 0.28) 0%, rgba(0, 102, 150, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.sekcja-ciemna > * {
  position: relative;
  z-index: 1;
}

/* Separator falisty */
.fala {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  color: var(--tlo-alt);
}

.fala svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Przerywnik z haslem ---------------------------------------------------
   Pelnoekranowa pauza miedzy trescia a dalsza czescia podstrony: cienka kreska
   pionowa, olbrzymi lekki napis, duzo powietrza. Renderuje sie wylacznie, gdy
   strona ma pole `haslo` we front matterze.

   Poppins 400, nie 700 - przy tym stopniu grubszy krój robi sie krzykliwy,
   a chodzi o wyciszenie. Wersji Light (300) nie mamy w `src/fonts/`, wiec 400
   jest najlzejszym dostepnym wariantem.

   Kreski to pseudoelementy akapitu, a nie osobne znaczniki - czytnik ekranu
   przeczyta samo haslo, bez pustych elementow po drodze. */
/* Wlasne, oszczedne dopelnienie zamiast .sekcja. Sekcja stoi miedzy dwiema
   zwyklymi sekcjami tresci, ktore dokladaja juz po okolo 112 px z gory i z dolu,
   wiec pelne --sekcja-y dawaloby lacznie ponad 600 px pustki miedzy akapitami. */
.haslo-przerywnik {
  text-align: center;
  padding-block: clamp(0.5rem, 0.2rem + 1vw, 1.25rem);
}

.haslo-przerywnik-tekst {
  font-family: var(--font-naglowek);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.1vw, 3.5rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--tekst-mocny);
  /* Ograniczenie dlugosci wiersza. Bez tego dluzsze hasla rozciagaja sie na
     cala szerokosc kolumny i przestaja czytac sie jak jedno zdanie. */
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

.haslo-przerywnik-tekst::before,
.haslo-przerywnik-tekst::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
  margin-inline: auto;
  background: var(--linia-mocna);
}

.haslo-przerywnik-tekst::before {
  margin-bottom: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}

.haslo-przerywnik-tekst::after {
  margin-top: clamp(1rem, 0.7rem + 1vw, 1.75rem);
}

/* ==========================================================================
   06. NAGLOWKI SEKCJI
   ========================================================================== */

.naglowek-sekcji {
  max-width: 760px;
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.naglowek-sekcji-srodek {
  margin-inline: auto;
  text-align: center;
}

.naglowek-sekcji h2 {
  margin-top: var(--s-3);
}

.naglowek-sekcji .lead {
  margin-top: var(--s-4);
}

.naglowek-sekcji-zrzad {
  display: grid;
  gap: var(--s-5);
  max-width: none;
  align-items: end;
}

@media (min-width: 900px) {
  .naglowek-sekcji-zrzad {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--s-8);
  }
}

/* ==========================================================================
   07. PRZYCISKI
   ========================================================================== */

.btn {
  --btn-tlo: var(--ink-900);
  --btn-kolor: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.65em;
  font-family: var(--font-naglowek);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  border-radius: var(--r-pill);
  background: var(--btn-tlo);
  color: var(--btn-kolor);
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--tr-szybko), box-shadow var(--tr-norm), background-color var(--tr-norm),
    color var(--tr-norm), border-color var(--tr-norm);
  white-space: nowrap;
}

.btn:hover {
  color: var(--btn-kolor);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--tr-norm);
}

.btn:hover svg.ikona-strzalka {
  transform: translateX(3px);
}

/* Glowny: gradient marki */
.btn-marka {
  background: var(--gradient-marka);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--cien-marka);
  transition: transform var(--tr-szybko), box-shadow var(--tr-norm), background-position var(--tr-wolno);
}

.btn-marka:hover {
  background-position: 100% 50%;
  box-shadow: var(--cien-marka-mocny);
  color: #fff;
}

/* Ciemny */
.btn-ciemny {
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--cien-md);
}

.btn-ciemny:hover {
  background: var(--ink-800);
  box-shadow: var(--cien-lg);
}

/* Obrys */
.btn-obrys {
  background: transparent;
  color: var(--tekst-mocny);
  border-color: var(--linia-mocna);
}

.btn-obrys:hover {
  border-color: var(--marka-500);
  color: var(--marka-600);
  background: rgba(0, 169, 176, 0.05);
}

.sekcja-ciemna .btn-obrys,
.cta-pasek .btn-obrys,
.stopka .btn-obrys {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.sekcja-ciemna .btn-obrys:hover,
.cta-pasek .btn-obrys:hover,
.stopka .btn-obrys:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* Jasny na ciemnym tle */
.btn-jasny {
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--cien-md);
}

.btn-jasny:hover {
  background: var(--papier-100);
  color: var(--ink-900);
}

/* Tekstowy ze strzalka */
.btn-tekst {
  background: none;
  padding: 0.35em 0;
  color: var(--marka-600);
  border-radius: 0;
  box-shadow: none;
}

.btn-tekst::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tr-norm);
}

.btn-tekst:hover {
  transform: none;
  color: var(--marka-700);
}

.btn-tekst:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Glowne CTA - "ciag dalszy logotypu".
   Gradient startuje na #9BBA57, czyli tam, gdzie konczy sie logo na literze "o"
   i podkresleniu, i prowadzi dalej w zolc. Przycisk nie jest nowym kolorem marki,
   tylko przedluzeniem znaku - wyroznia sie jasnoscia i nasyceniem, nie odcieniem.

   ZASADA: ten gradient wolno uzyc WYLACZNIE na glownym CTA konwersji.
   Nie na ikonie, nie na pasku nad karta, nie na odznace. Jedno uzycie, jedno znaczenie.
   W momencie, w ktorym pojawi sie na drugim elemencie, przestanie znaczyc "kliknij"
   i zostanie czterokolorowa paleta bez zadnej korzysci.

   Tekst MUSI byc ciemny. Biel na tej zolci daje 1,5:1 i napis znika.
   Zmierzony kontrast ciemnego tekstu: 8,14:1 na limonce, 12,29:1 na prawej
   krawedzi w spoczynku i 14,83:1 na zolci przy najechaniu - czyli AAA w kazdym
   punkcie i w kazdym stanie. Dlatego klasa nie narzuca rozmiaru - laczymy ja
   swobodnie z btn-duzy, btn-maly i btn-pelny, zaleznie od miejsca.

   REAKCJA NA NAJECHANIE (zmiana 2026-08-31, po probie z paleta zolto-magentowa,
   ktora wlascicielka odrzucila): przycisk nie przesuwa juz tla, tylko ROZJASNIA
   SIE OD LIMONKI W ZOLC. Sluzy do tego druga warstwa tla - soczysta zolc
   #FDEE00 o szerokosci zero, zakotwiczona przy PRAWEJ krawedzi, ktora przy
   najechaniu rosnie w lewo. Czolo fali jest rozmyte na pierwszych 30% jej
   szerokosci, zeby nie bylo twardej pionowej krawedzi, i dzieki temu lewa
   krawedz zostaje limonkowa. Efekt zostaje w rodzinie kolorow marki - przycisk
   dojrzewa, a nie zmienia barwe.

   CIEN USUNIETY. Wczesniej byla to zolta luna (0 12px 32px, krycie 45%), ktora
   na ciemnym pasku CTA czytala sie jak poswiata, a nie jak cien.

   Trzy linijki, ktore wygladaja na zbedne, a nie sa:
   - background-origin: border-box - .btn ma przezroczysta ramke 1 px, a tlo
     domyslnie wymierza sie do pola WEWNATRZ ramki, malujac sie RAZEM z ramka.
     Bez tego kafel jest o 2 px wezszy niz malowana powierzchnia i zawija sie,
     pokazujac na lewej krawedzi prawy koniec gradientu.
   - background-color: #cfd92e - przycisk ma ulamkowa wysokosc (50,77 - 57,2 px
     zaleznie od rozmiaru), wiec po zaokragleniu zostaje na dole szczelina
     ponizej piksela. Przy no-repeat widac w niej bylo domyslne tlo z .btn,
     czyli prawie czarny #101820 - stad ciemny pasek pod przyciskiem.
   - no-repeat na obu warstwach - bez tego warstwa fali kafelkowalaby sie. */
.btn-cta {
  --btn-kolor: var(--ink-900);
  background-image:
    linear-gradient(100deg, rgba(253, 238, 0, 0) 0%, rgba(253, 238, 0, 1) 30%, rgba(253, 238, 0, 1) 100%),
    linear-gradient(100deg, #9bba57 0%, #cfd92e 45%, #f7ec13 100%);
  background-size: 0% 100%, 160% 100%;
  background-position: 100% 50%, 0% 50%;
  background-repeat: no-repeat, no-repeat;
  background-origin: border-box;
  background-color: #cfd92e;
  color: var(--ink-900);
  box-shadow: none;
  transition: transform var(--tr-szybko), background-size var(--tr-wolno);
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background-size: 100% 100%, 160% 100%;
}
.btn-duzy {
  padding: 1.1em 2rem;
  font-size: var(--t-md);
}

.btn-maly {
  padding: 0.65em 1.2em;
  font-size: var(--t-sm);
}

/* Przycisk ma white-space: nowrap i overflow: hidden (potrzebne przy gradiencie
   CTA), wiec dluga etykieta na waskim ekranie byla po prostu ucinana. W serwisie
   jest 18 przyciskow z etykieta dluzsza niz 28 znakow, najdluzszy ma 45. Ponizej
   780 px pozwalamy im sie zawijac. Zgloszone przez wlascicielke 2026-09-02. */
@media (max-width: 780px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.btn-pelny {
  width: 100%;
}

.grupa-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* ==========================================================================
   08. ETYKIETY, CHIPY, ODZNAKI
   ========================================================================== */

.etykieta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-naglowek);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--marka-600);
}

/* Podkreslnik zamiast kreski z przodu.
   Motyw wziety z logotypu: w "websoro_" belka stoi ZA slowem, na linii bazowej,
   jest krotka, gruba i ma zaokraglone konce. Kreska przed slowem tego nie oddawala,
   bo ksztalt jest ten sam - roznica siedzi w pozycji i proporcji.

   Kolor to zielen konczaca gradient logotypu, czyli dokladnie ta z podkreslnika.
   Rysujemy prostokat przez content: "", a nie znak "_", wiec ozdoba nie trafia
   do tresci: Google jej nie widzi, czytnik ekranu jej nie czyta.
   Literalnego "_" nie wpisujemy do naglowkow ani etykiet. */
.etykieta::after {
  content: "";
  align-self: flex-end;
  width: 0.85em;
  height: 4px;
  margin-bottom: 0.16em;
  border-radius: var(--r-pill);
  background: var(--marka-200);
}

.etykieta-bez-znaku::after {
  display: none;
}

.sekcja-ciemna .etykieta {
  color: var(--marka-200);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.95em;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.35;
  border-radius: var(--r-pill);
  background: var(--biel);
  border: 1px solid var(--linia);
  color: var(--ink-600);
  box-shadow: var(--cien-xs);
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 680px) {
  .chip {
    white-space: normal;
    align-items: flex-start;
  }
  .chip svg {
    margin-top: 0.22em;
  }
}

.chip svg {
  width: 1em;
  height: 1em;
  color: var(--marka-500);
  flex: none;
}

.chip-marka {
  background: var(--marka-50);
  border-color: rgba(0, 169, 176, 0.25);
  color: var(--marka-700);
}

.chip-duch {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e2e8ee;
  box-shadow: none;
}

.chip-duch svg {
  color: var(--marka-300);
}

.odznaka {
  display: inline-flex;
  align-items: center;
  padding: 0.28em 0.7em;
  font-family: var(--font-naglowek);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  background: var(--gradient-marka);
  color: #fff;
  text-transform: uppercase;
}

.odznaka-cicha {
  background: var(--ink-100);
  color: var(--ink-600);
}

.karta > .odznaka,
.stos > .odznaka {
  align-self: flex-start;
}

/* Domyslny rozmiar ikony w tekscie */
.ikona {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}

/* Ikona w kolku */
.ikona-kolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: var(--r-md);
  background: var(--marka-50);
  color: var(--marka-600);
  flex: none;
  transition: transform var(--tr-sprezyste), background-color var(--tr-norm), color var(--tr-norm);
}

.ikona-kolo svg {
  width: 1.55rem;
  height: 1.55rem;
}

.ikona-kolo-gradient {
  background: var(--gradient-marka);
  color: #fff;
  box-shadow: var(--cien-marka);
}

.sekcja-ciemna .ikona-kolo {
  background: rgba(0, 169, 176, 0.14);
  color: var(--marka-300);
}

/* Ikony rastrowe - zestaw abstrakcyjny z ikonaR(), patrz makra.njk.
   Bez tla i bez odznaki koloru: same, czarne, wyraznie wieksze niz ikona-kolo -
   to swiadomy wybor sprawdzony w przegladzie z wlascicielka, nie provizorka. */
.ikona-r {
  display: block;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
  margin-bottom: var(--s-4);
}

.sekcja-ciemna .ikona-r {
  filter: invert(1);
}

/* Karta czysto dekoracyjna - wypelnia puste miejsce w siatce auto-fit,
   gdy liczba kart nie dzieli sie rowno na wiersze (np. 4 karty w siatka-2). */
.karta-dekoracyjna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: 12rem;
}

.karta-dekoracyjna-szeroka {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .karta-dekoracyjna-szeroka {
    grid-column: span 1;
  }
}

.karta-dekoracyjna-obraz {
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: auto;
}

/* ==========================================================================
   09. KARTY I BENTO
   ========================================================================== */

.karta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-radius: var(--r-lg);
  box-shadow: var(--cien-sm);
  transition: transform var(--tr-norm), box-shadow var(--tr-norm), border-color var(--tr-norm);
  height: 100%;
}

.karta h2,
.karta h3,
.krok h2,
.persona-tresc h2,
.realizacja h2 {
  font-size: var(--t-lg);
  line-height: 1.25;
}

.karta p {
  color: var(--tekst-slaby);
  font-size: var(--t-base);
  line-height: 1.65;
}

.karta-klikalna:hover,
a.karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-lg);
  border-color: rgba(0, 169, 176, 0.3);
}

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

.karta-obrys {
  background: transparent;
  box-shadow: none;
}

.karta-wyrozniona {
  border-color: rgba(0, 169, 176, 0.32);
  box-shadow: var(--cien-md);
}

/* Pasek gradientu na gorze karty */
.karta-pasek::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--gradient-akcent);
  opacity: 0;
  transition: opacity var(--tr-norm);
}

.karta-pasek:hover::before,
.karta-pasek.karta-wyrozniona::before {
  opacity: 1;
}

/* Link ze strzalka w rogu karty */
.karta-link {
  margin-top: auto;
  padding-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--marka-600);
  text-decoration: none;
  align-self: flex-start;
}

a.karta-link:hover {
  color: var(--marka-700);
}

a.karta-link:hover .ikona {
  transform: translateX(3px);
}

.karta-link svg {
  width: 1em;
  height: 1em;
  transition: transform var(--tr-norm);
}

a.karta:hover .karta-link svg,
.karta-klikalna:hover .karta-link svg {
  transform: translateX(4px);
}

/* Lista z checkami */
.lista-check {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.lista-check li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-base);
  line-height: 1.6;
}

/* Sam ptaszek, bez kolka pod spodem.
   Rysujemy go dwoma krawedziami kwadratu obroconego o 45 stopni - to jeden
   pseudo-element zamiast dwoch, ktore byly tu wczesniej (kolko + haczyk). */
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.46rem;
  height: 0.8rem;
  border: solid var(--sukces);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Na ciemnym tle zielen z tokenu --sukces jest za ciemna (1,6:1),
   wiec bierzemy jasna zielen konczaca gradient logotypu - 7,8:1. */
.sekcja-ciemna .lista-check li::before {
  border-color: var(--marka-200);
}

/* Lista bez ikon, z kropka marki */
.lista-kropki {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.lista-kropki li {
  position: relative;
  padding-left: 1.3rem;
}

.lista-kropki li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-akcent);
}

/* Bento */
.bento {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento-el {
    grid-column: span 2;
  }
  .bento-el-szeroki {
    grid-column: span 3;
  }
  .bento-el-pelny {
    grid-column: span 6;
  }
}

/* Deklaracja misji domykajaca siatke bento.
   Idzie przez cala szerokosc siatki na kazdym ekranie. Wczesniej przy szesciu
   kolumnach zwezala sie do trzech, bo domykala rzad po DZIESIECIU kartach.
   Od czasu, gdy SEO AI Friendly stalo sie cecha, a nie usluga (2026-08-29),
   kart jest dziewiec i ostatni rzad konczy sie rowno - wiec misja zostawala
   sama w polowie rzedu, z pusta polowa obok. */
.bento-misja {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-6);
  background: var(--biel);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
  text-align: center;
}

.misja-etykieta {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tekst-slaby);
  letter-spacing: 0.02em;
  margin: 0;
}

.misja-tekst {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--tekst-mocny);
  margin: 0;
  /* Skrzynka idzie przez cala szerokosc siatki, wiec bez ograniczenia zdanie
     rozciagaloby sie na 1300 px w jednej linii. 22ch trzyma je w dwoch. */
  max-width: 22ch;
  text-wrap: balance;
}

/* Podswietlenie kluczowej frazy gradientem marki, z bialym tekstem.
   Dwie rzeczy, ktore z gory odpadaja:
   - zolc z .btn-cta, zarezerwowana wylacznie dla glownego CTA konwersji,
   - gradient-akcent (pelny gradient logotypu), bo zaden jeden kolor tekstu
     nie przechodzi AA na calej jego dlugosci: bialy ginie na zieleni #9BBA57
     (2,2:1), a ciemny na granacie #006696 (2,9:1).
   gradient-marka trzyma sie zakresu #004F73 do #006696, wiec bialy tekst ma
   na kazdym jego punkcie co najmniej 6,3:1. */
.misja-akcent {
  background: var(--gradient-marka);
  color: var(--biel);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.06em 0.22em;
  margin: 0 -0.06em;
}

/* Karta uslugi */
.karta-uslugi {
  position: relative;
  overflow: hidden;
}

.karta-uslugi-tlo {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 169, 176, 0.12), rgba(0, 169, 176, 0) 70%);
  pointer-events: none;
  transition: transform var(--tr-wolno);
}

a.karta-uslugi:hover .karta-uslugi-tlo,
.karta-klikalna:hover .karta-uslugi-tlo {
  transform: scale(1.4);
}

a.karta-uslugi:hover .ikona-kolo,
.karta-klikalna:hover .ikona-kolo {
  transform: rotate(-6deg) scale(1.06);
  background: var(--gradient-marka);
  color: #fff;
}

/* --- Karta klikalna: link tylko pod naglowkiem, obszar klikalny na calej karcie ---
   Cala karta byla wczesniej jednym <a>, przez co tekstem kotwicy bylo ~25 slow
   (naglowek + akapit + "Poznaj szczegoly"), a czytnik ekranu odczytywal to jako
   jeden link. Teraz kotwica to sama fraza kluczowa, a ::after rozciaga klikalnosc.
   Warunek: wewnatrz .karta-klikalna NIE moze byc drugiego linku - przykrylby go
   ten pseudoelement. Dlatego "Poznaj szczegoly" pozostaje <span>. */
.karta-klikalna :where(h2, h3) a {
  color: inherit;
  text-decoration: none;
}

.karta-klikalna :where(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Obrys pokazujemy na calej karcie, nie na samym tekscie naglowka */
.karta-klikalna:has(:where(h2, h3) a:focus-visible) {
  outline: 2px solid var(--marka-600);
  outline-offset: 3px;
}

.karta-klikalna :where(h2, h3) a:focus-visible {
  outline: none;
}

/* --- Cytat zalozycieli (strona glowna, nad FAQ) ---
   Duzy rysunek, a na nim biala karta z cytatem zachodzaca na prawa czesc obrazu.
   Na szerokich ekranach realizuje to jedna siatka 12-kolumnowa: rysunek zajmuje
   kolumny 1-8, karta 7-12, wiec obie sa w tym samym wierszu i nachodza na dwoch
   kolumnach. Na waskich ekranach siatka wraca do jednej kolumny, a karta wjezdza
   na rysunek od dolu ujemnym marginesem. */
.cytat-zalozycieli {
  display: grid;
  /* minmax(0, 1fr), nie domyslne auto. Przy auto przegladarka wylicza szerokosc
     kolumny z wlasnego rozmiaru rysunku, a nie z szerokosci kontenera, przez co
     na telefonie obraz wychodzil poza ekran (392 px w kolumnie na 338 px). */
  grid-template-columns: minmax(0, 1fr);
}

.cytat-zalozycieli-foto {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.cytat-zalozycieli-karta {
  background: var(--tlo-karta);
  box-shadow: var(--cien-xl);
  padding: var(--s-6);
  text-align: center;
  /* Wjazd na rysunek od dolu. Marginesy boczne zwezaja karte wzgledem obrazu,
     zeby bylo widac, ze lezy na wierzchu, a nie stanowi jego dalszego ciagu. */
  margin: calc(var(--s-6) * -1) var(--s-4) 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .cytat-zalozycieli {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }

  /* Osiem kolumn na rysunek i szesc na karte, czyli DWIE kolumny wspolne.
     Przy trzech wspolnych (rysunek na 9 kolumn) karta wchodzila na obraz od
     67 procent jego szerokosci i zakrywala twarz Marcina razem z dlonia.
     Przy dwoch zaczyna sie dopiero na 75 procentach, wiec obie postacie
     zostaja odsloniete, a karta lezy juz tylko na tle rysunku. */
  .cytat-zalozycieli-foto {
    grid-area: 1 / 1 / 2 / 9;
  }

  .cytat-zalozycieli-karta {
    grid-area: 1 / 7 / 2 / 13;
    margin: 0;
    padding: var(--s-8) var(--s-6);
  }
}

/* Pasek ozdobny pod podpisem: cudzyslow, piec gwiazdek, cudzyslow zamykajacy.
   Wszystkie trzy elementy skaluja sie clampem z ta sama dolna granica, bo caly
   pasek musi zmiescic sie w szerokosci karty takze na najwezszym telefonie. */
.cytat-zalozycieli-ozdoba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  margin: var(--s-6) 0 0;
}

.cytat-zalozycieli-cudzyslow {
  display: inline-flex;
  color: var(--tekst-mocny);
  flex: none;
}

.cytat-zalozycieli-cudzyslow svg {
  width: clamp(1.3rem, 0.8rem + 2vw, 2.6rem);
  height: clamp(1.3rem, 0.8rem + 2vw, 2.6rem);
  fill: currentColor;
  stroke: none;
}

/* Cudzyslow zamykajacy to ten sam znak obrocony o polowe obrotu. */
.cytat-zalozycieli-cudzyslow-koniec {
  transform: rotate(180deg);
}

.cytat-zalozycieli-gwiazdki {
  display: inline-flex;
  gap: clamp(0.2rem, 0.1rem + 0.4vw, 0.5rem);
  color: var(--marka-500);
}

.cytat-zalozycieli-gwiazdki svg {
  width: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  height: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  fill: currentColor;
  stroke: none;
}

/* Celowo przeskalowana typografia - to ona niesie caly efekt tego bloku.
   Pierwsze zdanie jest pytaniem i dostaje najwiekszy stopien, druga czesc
   schodzi o poziom nizej, zeby para czytala sie jako pytanie i odpowiedz. */
.cytat-zalozycieli-tekst {
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.15rem + 2.7vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tekst-mocny);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

/* Podzial na dwie linie robi <br> w tresci, wiec bez text-wrap: balance -
   balansowanie walczyloby z jawnym lamaniem i tworzylo poszarpane odcinki. */
.cytat-zalozycieli-dalej {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 1.65rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--tekst);
  margin: 0 0 var(--s-6);
}

.cytat-zalozycieli-podpis {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--marka-600);
  letter-spacing: 0.02em;
  margin: 0;
}

/* ==========================================================================
   10. NAGLOWEK STRONY I NAWIGACJA
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(251, 253, 254, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--tr-norm), border-color var(--tr-norm), box-shadow var(--tr-norm);
}

.header.przewiniety {
  background: rgba(251, 253, 254, 0.95);
  border-bottom-color: var(--linia);
  box-shadow: 0 2px 20px rgba(16, 24, 32, 0.05);
}

.header-wnetrze {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--wys-headera);
}

.logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: opacity var(--tr-szybko);
}

.logo:hover {
  opacity: 0.85;
}

.logo img {
  height: 46px;
  width: auto;
}

@media (max-width: 480px) {
  .logo img {
    height: 36px;
  }
}

.nav {
  margin-left: auto;
  display: none;
}

@media (min-width: 1080px) {
  .nav {
    display: block;
  }
}

.nav-lista {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-el {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-naglowek);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--tr-szybko), background-color var(--tr-szybko);
  white-space: nowrap;
}

.nav-link:hover,
.nav-el:focus-within .nav-link {
  color: var(--marka-600);
  background: rgba(0, 169, 176, 0.07);
}

.nav-link[aria-current="page"] {
  color: var(--marka-600);
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-akcent);
}

.nav-strzalka {
  width: 0.7em;
  height: 0.7em;
  transition: transform var(--tr-norm);
}

.nav-el:hover .nav-strzalka,
.nav-el:focus-within .nav-strzalka {
  transform: rotate(180deg);
}

/* Rozwijane menu */
.podmenu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 250px;
  padding: 0.6rem;
  list-style: none;
  margin: 0;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-md);
  box-shadow: var(--cien-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--tr-norm), transform var(--tr-norm), visibility var(--tr-norm);
}

.nav-el:hover > .podmenu,
.nav-el:focus-within > .podmenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.podmenu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-xs);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  transition: background-color var(--tr-szybko), color var(--tr-szybko);
}

.podmenu a:hover {
  background: var(--marka-50);
  color: var(--marka-700);
}

/* Megamenu uslug */
/* Element listy z megamenu jest CELOWO position: static. Dzieki temu blokiem
   zawierajacym dla .megamenu staje sie .header (sticky, wiec pozycjonowany),
   a nie waski <li>. Wczesniej panel byl wysrodkowany na pozycji "Uslugi", ktora
   lezy na lewo od srodka strony - przy oknie 1280 px wychodzil 128 px poza lewa
   krawedz. Teraz srodek panelu to srodek okna. */
.nav-el-mega {
  position: static;
}

.megamenu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(1080px, calc(100vw - 3rem));
  padding: var(--s-5);
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-lg);
  box-shadow: var(--cien-xl);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr-norm), transform var(--tr-norm), visibility var(--tr-norm);
}

.nav-el:hover > .megamenu,
.nav-el:focus-within > .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.megamenu-siatka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
}

/* Etykieta grupy w megamenu. Mala, wersalikowa, oddziela filary od reszty. */
/* Sygnet przy etykiecie grupy: znak marki pojawia sie raz na grupe, a nie
   siedem razy obok siedmiu roznych uslug - inaczej odbieral liscie skanowalnosc. */
.etykieta-znak {
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.4rem;
  vertical-align: -0.15em;
}

.megamenu-etykieta {
  display: flex;
  align-items: center;
  margin: 0 0 0.5rem;
  padding-left: 0.8rem;
  font-family: var(--font-naglowek);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
}

/* Dwa filary: pelne karty z opisem, po polowie szerokosci. */
.megamenu-filary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
}

/* Pozostale uslugi: zwarta lista w trzech kolumnach, bez opisow.
   Opisy sa od tego na /uslugi/ - w menu tylko przeszkadzaly. */
/* Przeplyw KOLUMNOWY, nie wierszowy: przy siedmiu pozycjach i trzech wierszach
   pierwsza kolumna zbiera cale pozycjonowanie, druga budowe stron i sklepow,
   trzecia reszte. Wczesniej siatka wypelniala sie wierszami i rodzaje uslug
   rozjezdzaly sie w poprzek. */
.megamenu-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.15rem;
  align-items: start;
}

/* Wariant pieciokolumnowy: kazda kolumna to jeden rodzaj uslugi z naglowkiem.
   Kolumna „Pozycjonowanie" jest szersza od pozostalych, bo ma najdluzsze nazwy
   i cztery pozycje - rowny podzial lamalby je na dwie linie. */
/* Proporcje kolumn nie sa dobrane na oko: kazda odpowiada zmierzonej szerokosci
   najdluzszej pozycji w kolumnie, zeby naglowki grup mieszcily sie w jednej linii.
   Najszersza jest druga - "Automatyzacja procesow" - i to ona wymusza podzial. */
.megamenu-lista-5 {
  grid-template-columns: 1.27fr 1.17fr 1fr 0.66fr 0.71fr;
  gap: 0.5rem;
}

.megamenu-lista-5 .megamenu-etykieta {
  margin-bottom: 0.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linia);
}

@media (max-width: 900px) {
  .megamenu-lista-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
}

.megamenu-kolumna {
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.megamenu-poz {
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-sm);
  font-family: var(--font-naglowek);
  font-size: var(--t-sm);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--tr-szybko), color var(--tr-szybko);
}

/* Ikona w kaflu marki, tak jak w kartach filarow nad lista i w calym serwisie.
   Pelne tlo marki z biala ikona, nie jasne `--marka-50`: na bialym megamenu
   jasny wariant byl praktycznie niewidoczny i nie czytal sie jako element marki.
   Mniejszy kafel niz w filarach (1,9 zamiast 2,4 rem) i plaski kolor zamiast
   gradientu - to trzyma hierarchie: gradient nalezy do dwoch filarow. */
.megamenu-poz .ikona-kolo svg {
  width: 0.95rem;
  height: 0.95rem;
}

.megamenu-poz:hover,
.megamenu-poz:focus-visible {
  background: var(--papier-100);
  color: var(--marka-600);
}

@media (max-width: 900px) {
  .megamenu-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Bez ikony: karta filaru to teraz sam tytul i opis, wiec blok zamiast flexa
   z miejscem na kafel. Hierarchie wobec listy nizej niesie uklad, nie ikona. */
.megamenu-link {
  display: block;
  padding: 0.8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--tr-szybko);
}

.megamenu-link:hover {
  background: var(--papier-100);
  color: inherit;
}

.megamenu-link .ikona-kolo {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-sm);
}

.megamenu-link .ikona-kolo svg {
  width: 1.2rem;
  height: 1.2rem;
}

.megamenu-tytul {
  display: block;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tekst-mocny);
  margin-bottom: 0.15rem;
}

.megamenu-opis {
  display: block;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--tekst-slaby);
}

.megamenu-stopka {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* Akcje w headerze */
.header-akcje {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-left: var(--s-4);
}

@media (min-width: 1080px) {
  .header-akcje {
    display: flex;
  }
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ink-800);
  text-decoration: none;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-sm);
  transition: color var(--tr-szybko), background-color var(--tr-szybko);
}

.header-tel svg {
  width: 1.05em;
  height: 1.05em;
  color: var(--marka-500);
}

.header-tel:hover {
  color: var(--marka-600);
  background: rgba(0, 169, 176, 0.07);
}

/* Hamburger */
.hamburger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--linia);
  background: var(--biel);
  transition: border-color var(--tr-szybko), background-color var(--tr-szybko);
}

@media (min-width: 1080px) {
  .hamburger {
    display: none;
  }
}

.hamburger:hover {
  border-color: var(--marka-500);
}

.hamburger-kreski {
  position: relative;
  width: 20px;
  height: 14px;
}

.hamburger-kreski span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-800);
  transition: transform var(--tr-norm), opacity var(--tr-szybko), top var(--tr-norm);
}

.hamburger-kreski span:nth-child(1) {
  top: 0;
}
.hamburger-kreski span:nth-child(2) {
  top: 6px;
}
.hamburger-kreski span:nth-child(3) {
  top: 12px;
}

.hamburger[aria-expanded="true"] .hamburger-kreski span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-kreski span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-kreski span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Menu mobilne */
.menu-mobilne {
  position: fixed;
  inset: var(--wys-headera) 0 0 0;
  z-index: 890;
  background: var(--tlo);
  padding: var(--s-5) 0 var(--s-9);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--tr-norm), transform var(--tr-norm), visibility var(--tr-norm);
}

.menu-mobilne[data-otwarte="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1080px) {
  .menu-mobilne {
    display: none;
  }
}

.menu-mobilne-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.2rem;
}

.menu-mobilne-lista > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0.4rem;
  font-family: var(--font-naglowek);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tekst-mocny);
  text-decoration: none;
  border-bottom: 1px solid var(--linia);
}

/* Grupa zwijana w menu mobilnym. Summary udaje pozycje pierwszego poziomu,
   wiec dziedziczy te same odstepy i linie co zwykly link obok. */
.menu-grupa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 0.4rem;
  border-bottom: 1px solid var(--linia);
  cursor: pointer;
  list-style: none;
}

/* Domyslny trojkacik przegladarki - w Safari i Chrome trzeba go zdjac osobno. */
.menu-grupa > summary::-webkit-details-marker {
  display: none;
}

.menu-grupa > summary::marker {
  content: "";
}

.menu-grupa > summary > a {
  flex: 1;
  font-family: var(--font-naglowek);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tekst-mocny);
  text-decoration: none;
}

.menu-strzalka {
  display: inline-flex;
  flex: none;
  padding: 0.35rem;
  color: var(--ink-600);
  transition: transform var(--tr-szybko);
}

.menu-strzalka svg {
  width: 1rem;
  height: 1rem;
}

.menu-grupa[open] > summary .menu-strzalka {
  transform: rotate(180deg);
}

.menu-mobilne-pod {
  list-style: none;
  padding: 0.4rem 0 0.6rem 0.9rem;
  margin: 0;
  display: grid;
  gap: 0.1rem;
  border-left: 2px solid var(--marka-100);
  margin-left: 0.4rem;
}

/* Odstep pionowy 0,8 rem, a nie 0,5 - przy 0,5 wiersz mial okolo 34 px wysokosci,
   czyli ponizej 44 px zalecanych dla obszaru dotyku. Podlisty sa teraz zwiniete
   domyslnie, wiec wyzsze wiersze nie wydluzaja menu przy otwarciu. */
.menu-mobilne-pod a {
  display: block;
  padding: 0.8rem 0.6rem;
  font-size: 0.97rem;
  color: var(--ink-600);
  text-decoration: none;
  border-radius: var(--r-xs);
}

.menu-mobilne-pod a:hover {
  background: var(--marka-50);
  color: var(--marka-700);
}

.menu-mobilne-akcje {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-3);
}

.menu-mobilne-kontakt {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linia);
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
}

.menu-mobilne-kontakt a {
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================================
   11. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(2rem, 3vw, 2.75rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(78, 177, 132, 0.2), transparent 62%),
    radial-gradient(760px 520px at 4% 8%, rgba(0, 102, 150, 0.09), transparent 60%),
    var(--papier-50);
}

.hero::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -55%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  background: linear-gradient(140deg, rgba(0, 102, 150, 0.09), rgba(155, 186, 87, 0.16));
  filter: blur(6px);
  pointer-events: none;
}

.hero-wnetrze {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1020px) {
  .hero-wnetrze {
    grid-template-columns: 1.06fr 0.94fr;
  }
}

.hero-tresc {
  max-width: 44rem;
}

/* H1 strony glownej skalowal sie do 64,8 px, podczas gdy 130 podstron ma
   51 px (patrz regula .naglowek-strony h1 nizej). Kontener jest przyciety do
   1400 px, wiec na szerokim monitorze kolumna tekstu zostaje przy 666 px, a
   naglowek rosnie dalej - lamal sie na cztery linie i spychal przycisk CTA
   pod fold. Wyrownujemy do reszty serwisu. */
.hero h1 {
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: 51px;
}

/* H1 strony glownej na telefonie. Domyslnie skaluje sie do 38,45 px, przez co
   naglowek zajmowal 7 linii i 37% pierwszego ekranu - ten sam problem, ktory na
   hubach miejskich rozwiazuje przelacznik h1Dlugi (patrz OTWARTE-TEMATY).
   Tutaj rozwiazany na sztywno, bo strona glowna ma wlasne hero, nie layout
   podstrony. Prog 780 px ten sam co dla .naglowek-strony h1. */
@media (max-width: 780px) {
  .hero h1 {
    font-size: 28px;
  }
}

/* Fraza kategorii wpieta w h1. Wyglada jak chip nad naglowkiem, ale jest jego
   czescia, wiec liczy sie jako tresc h1. flex plus fit-content robi z niej blok
   zwezony do tresci - dzieki temu reszta naglowka schodzi do nowej linii, a
   pigulka nie rozciaga sie na cala szerokosc kolumny.
   letter-spacing i font-weight resetujemy, bo h1 narzuca swoje. */
.hero h1 .hero-h1-kategoria {
  display: flex;
  width: fit-content;
  margin-bottom: var(--s-4);
  font-weight: 500;
  letter-spacing: normal;
}

/* max-width 34rem zwezal akapit do 544 px w kolumnie majacej 666 px - tekst
   lamal sie na siedem linii zamiast pieciu. Kolumne i tak ogranicza
   .hero-tresc, wiec wystarczy nie zwezac jej drugi raz. */
.hero-lead {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 42rem;
}

/* Hero na telefonie: krotki akapit zamiast dlugiego i bez rysunku.
   Prog 780 px ten sam, co dla zmniejszonego H1 - ponizej niego kolumny hero
   ida jedna pod druga, wiec rysunek i tak nie stal obok tekstu, tylko pod nim,
   i tylko odsuwal przyciski od naglowka. */
/* Elementy chowane na telefonie. Nie usuwamy ich z kodu strony - Google
   i modele jezykowe nadal je czytaja - tylko zdejmujemy z malego ekranu to,
   co odsuwa uzytkownika od oferty.

   Regula dziala TYLKO w dol. Gdyby chowala domyslnie i przywracala display:
   block powyzej progu, zepsulaby elementy, ktore sa flexem albo siatka -
   trzy obietnice pod CTA ustawilyby sie jedna pod druga zamiast w rzedzie.

   Klasa jest zdublowana w selektorze CELOWO. Reguly wlasne tych elementow
   (.hero-pod-cta, .wizual-flow) stoja w arkuszu nizej i przy rownej sile
   wygrywalyby kolejnoscia. */
@media (max-width: 780px) {
  .bez-telefonu.bez-telefonu {
    display: none;
  }
}

.hero-lead-telefon {
  display: none;
}

@media (max-width: 780px) {
  .hero-lead-telefon {
    display: block;
  }

  .hero-lead-duzy {
    display: none;
  }

  /* Selektor z .hero jest CELOWO mocniejszy: regula .wizual-flow stoi w tym
     arkuszu nizej i przy rownej sile wygrywalaby kolejnoscia, wiec rysunek
     nadal by sie pokazywal. */
  .hero .wizual {
    display: none;
  }
}

.hero-cta {
  margin-top: var(--s-6);
}

.hero-pod-cta {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
}

.hero-pod-cta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.hero-pod-cta svg {
  width: 1em;
  height: 1em;
  color: var(--sukces);
  flex: none;
}

/* Rzad z liczbami mial 147 px z marginesem i wypychal hero pod fold na
   ekranach 940 px wysokosci. Zwezony: mniejszy odstep od gory, mniejsza
   liczba, podpisy skrocone tak, by miescily sie w dwoch linijkach zamiast
   trzech. Tresc bez zmian - cztery te same fakty. */
.hero-zaufanie {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--linia);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-4);
}

.hero-zaufanie-el .liczba {
  font-family: var(--font-naglowek);
  font-size: clamp(1.5rem, 1.15rem + 1vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--gradient-tekst);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-zaufanie-el p {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--tekst-slaby);
}

/* ==========================================================================
   12a. SCHEMAT NA PODSTRONIE
   ==========================================================================
   Ten sam jezyk co rysunek w hero, ale w slocie szerokim i niskim (445 x 262 px)
   zamiast prawie kwadratowego. Zastepuje panel `fakty` na stronach bez
   formularza w hero; strony miasto x usluga i artykuly zostaja bez zmian.
   Klasy sa osobne od .flow-*, bo proporcje i stopnie pisma sa inne - laczenie
   ich jedna klasa wymusiloby przesloniecia w obie strony.
   ========================================================================== */
.schemat-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.schemat {
  width: 100%;
  height: auto;
  overflow: visible;
}

.schemat-kabel {
  fill: none;
  stroke: var(--marka-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 4 8;
  opacity: 0.65;
  animation: schemat-plyn 2.2s linear infinite;
  animation-delay: var(--opoznienie, 0s);
}

/* 12 to suma dasharray, wiec petla wraca dokladnie w to samo miejsce. */
@keyframes schemat-plyn {
  to {
    stroke-dashoffset: -12;
  }
}

.schemat-zlacze {
  fill: var(--marka-500);
  opacity: 0.85;
}

.schemat-plytka {
  fill: var(--biel);
  stroke: var(--linia);
  stroke-width: 1;
}

.schemat-znak {
  stroke: none;
}

/* Wezly wejsciowe i liscie bez logotypu rysujemy kreska - jako jedyne nie sa
   znakami marek, i ta roznica sama tlumaczy, ze to nie narzedzia. */
.schemat-ikona {
  fill: none;
  stroke: var(--marka-600);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WSZYSTKIE napisy w schemacie ida wersalikami - decyzja wlascicielki
   2026-08-31: „musi byc czytelne, a tu literki sa mele". Wersaliki sa o okolo
   20% szersze niz tekst mieszany, wiec razem z ta zmiana trzeba bylo przesunac
   kolumny do srodka i skrocic dwa opisy kart. Odstep miedzyliterowy podniesiony,
   bo wersaliki bez niego zbijaja sie w blok.

   Stopnie sa dobrane pod najdluzsze napisy, jakie realnie wystepuja:
   „POZYCJONOWANIE LOKALNE" w tytule i „WDRAZAMY U KLIENTA" w podpisie. */
.schemat-tytul {
  font-family: var(--font-naglowek);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-mocny);
}

.schemat-opis {
  font-family: var(--font-naglowek);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-slaby);
}

.schemat-podpis {
  font-family: var(--font-naglowek);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-slaby);
  text-anchor: middle;
}

/* Na telefonie wylaczamy ruch. Stopni pisma NIE podnosimy tam dowolnie:
   karta ma stala szerokosc w ukladzie rysunku (223 jednostki), wiec wiekszy
   stopien nie miesci sie w niej i napis wychodzi poza plytke - tak bylo przy
   17 px, gdzie „POZYCJONOWANIE STRON" potrzebowalo 248 jednostek przy 199
   dostepnych. Tytul i opis zostaja wiec przy wartosciach biurkowych.

   Podpisy pod plytkami maja wiecej miejsca, bo leza poza karta - te mozna
   podniesc do 13 px, czyli do granicy, przy ktorej najdluzszy z nich
   („POZYCJONOWANIE") jeszcze miesci sie w rysunku. */
@media (max-width: 640px) {
  .schemat-kabel {
    animation: none;
  }

  .schemat-podpis {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schemat-kabel {
    animation: none;
  }
}

/* ==========================================================================
   12b. WIZUAL HERO - SCHEMAT POLACZEN
   ==========================================================================
   Plytki polaczone kablami lamanymi pod katem prostym, z kropka na kazdym
   zlaczu - jezyk schematow przeplywu, ktory klient zna z n8n czy Make.
   Poprzednia proba byla ukladem promienistym rysowanym „olowkiem": filtr
   drzenia reki plus podpisy pod kolkami. Odrzucona - podpisy nachodzily na
   kolka, a uklad czytal sie jak rozgwiazda, nie jak polaczenia.

   Reguly .wizual-panel, .serp i pokrewne zostaja nizej NIETKNIETE: pierwotny
   wizual (makieta TOP 3) ma wrocic jedna podmiana znacznikow, bez ruszania CSS.
   ========================================================================== */
.wizual-flow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow {
  width: 100%;
  max-width: 35rem;
  height: auto;
  overflow: visible;
}

/* Kabel: cienka kreska w kolorze marki. Kreskowanie plynie w strone srodka
   i dalej w prawo, czyli w kierunku, o ktorym mowi H1. */
.flow-kabel {
  fill: none;
  stroke: var(--marka-400);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  opacity: 0.65;
  animation: flow-plyn 2.4s linear infinite;
  animation-delay: var(--opoznienie, 0s);
}

/* 14 to suma dasharray, wiec petla wraca dokladnie w to samo miejsce. */
@keyframes flow-plyn {
  to {
    stroke-dashoffset: -14;
  }
}

/* Kropka na zlaczu - detal, ktory sprawia, ze schemat czyta sie jak schemat,
   a nie jak przypadkowe kreski. */
.flow-zlacze {
  fill: var(--marka-500);
  opacity: 0.85;
}

.flow-plytka {
  fill: var(--biel);
  stroke: var(--linia);
  stroke-width: 1;
}

/* Znaki dostaja WLASNE kolory marek - fill jest wpisany przy kazdej sciezce
   w szablonie, bo kazdy serwis ma inny. Tu zostaje tylko wyzerowany stroke,
   bo sa to ksztalty wypelnione, a nie ikony rysowane kreska jak reszta zestawu. */
.flow-znak {
  stroke: none;
}

/* Wezly wejsciowe rysujemy KRESKA, a nie wypelnieniem - jako jedyne nie sa
   znakami marek, i ta roznica sama tlumaczy, ze to nie kolejne narzedzia. */
.flow-ikona-wejscie {
  fill: none;
  stroke: var(--marka-600);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Podpisy pod wezlami wejsciowymi - jedyne podpisy pod plytkami w rysunku.
   Reszta plytek niesie logotypy, ktore tlumacza sie same. */
.flow-podpis {
  font-family: var(--font-naglowek);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-slaby);
  text-anchor: middle;
}

/* Wersaliki w calym rysunku - ta sama decyzja co przy schematach na
   podstronach (wlascicielka 2026-08-31). Sa o okolo 20% szersze niz tekst
   mieszany, wiec opisy kart trzeba bylo skrocic, a plotno podniesc z 590 na
   800, zeby zmiescily sie podpisy pod kazda plytka. Odstep miedzyliterowy
   podniesiony, bo wersaliki bez niego zbijaja sie w blok. */
.flow-tytul {
  font-family: var(--font-naglowek);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-mocny);
}

/* 10,5 px, a nie 11,5: przy wiekszym stopniu opis „przejmuje powtarzalna
   robote" wychodzil poza prawa krawedz karty. Skracanie tekstu odpadalo -
   „powtarzalna robota" to sformulowanie z akapitu obok i ma sie zgadzac. */
.flow-opis {
  font-family: var(--font-naglowek);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--tekst-slaby);
}

/* Na telefonie schemat zostaje, ale bez ruchu, a napisy ida w gore: rysunek
   skaluje sie tam do okolo 0,6 szerokosci, wiec 11,5 px renderowaloby sie
   jako 7 px i byloby nieczytelne. */
@media (max-width: 640px) {
  .flow-kabel {
    animation: none;
  }

  .flow-tytul {
    font-size: 20px;
  }

  .flow-opis {
    font-size: 16px;
  }

  .flow-podpis {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-kabel {
    animation: none;
  }
}

/* ==========================================================================
   12. WIZUAL HERO (SERP I AI)
   ========================================================================== */

.wizual {
  position: relative;
  perspective: 1400px;
}

.wizual-panel {
  position: relative;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-xl);
  box-shadow: var(--cien-xl);
  padding: 1.1rem;
  transform: rotateY(-4deg) rotateX(2deg);
  transition: transform var(--tr-wolno);
}

.wizual:hover .wizual-panel {
  transform: rotateY(0deg) rotateX(0deg);
}

.wizual-pasek {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.25rem 0.85rem;
  border-bottom: 1px solid var(--linia);
  margin-bottom: 0.9rem;
}

.wizual-kropki {
  display: flex;
  gap: 0.3rem;
}

.wizual-kropki i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-200);
}

.wizual-adres {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  font-size: 0.76rem;
  color: var(--ink-500);
  font-family: var(--font-tekst);
}

.wizual-adres svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--ink-400);
  flex: none;
}

/* Wynik wyszukiwania */
.serp {
  display: grid;
  gap: 0.55rem;
}

.serp-wynik {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--ink-50);
  border: 1px solid transparent;
  transition: all var(--tr-wolno);
}

.serp-wynik-nasz {
  background: linear-gradient(96deg, rgba(0, 102, 150, 0.09), rgba(155, 186, 87, 0.13));
  border-color: rgba(0, 169, 176, 0.32);
  box-shadow: 0 6px 20px rgba(0, 169, 176, 0.16);
}

.serp-poz {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--biel);
  border: 1px solid var(--linia);
  font-family: var(--font-naglowek);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-500);
}

.serp-wynik-nasz .serp-poz {
  background: var(--gradient-marka);
  border-color: transparent;
  color: #fff;
}

.serp-linie {
  flex: 1;
  display: grid;
  gap: 0.35rem;
}

.serp-linia {
  height: 7px;
  border-radius: 4px;
  background: var(--ink-200);
}

.serp-linia-tytul {
  height: 9px;
  width: 68%;
  background: var(--ink-300);
}

.serp-wynik-nasz .serp-linia-tytul {
  width: 74%;
  background: linear-gradient(90deg, var(--marka-500), var(--marka-300));
}

.serp-wynik-nasz .serp-linia {
  background: rgba(0, 169, 176, 0.28);
}

.serp-linia-krotka {
  width: 45%;
}

.serp-zmiana {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: var(--font-naglowek);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--sukces);
}

.serp-zmiana svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* Karta odpowiedzi AI */
.karta-ai {
  position: absolute;
  right: clamp(-1rem, -2vw, -2.5rem);
  bottom: clamp(-1.5rem, -3vw, -3rem);
  width: min(310px, 78%);
  padding: 1rem 1.1rem;
  background: var(--ink-900);
  color: #d7dee5;
  border-radius: var(--r-lg);
  box-shadow: 0 26px 60px rgba(16, 24, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: unosi 6s ease-in-out infinite;
}

.karta-ai-gora {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-naglowek);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marka-200);
}

.karta-ai-gora svg {
  width: 1rem;
  height: 1rem;
}

.karta-ai p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #c2ccd6;
}

.karta-ai-zrodlo {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: #fff;
  font-weight: 600;
}

.karta-ai-kropka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marka-400);
  box-shadow: 0 0 0 0 rgba(0, 169, 176, 0.6);
  animation: puls 2.4s infinite;
  flex: none;
}

/* Plywajaca odznaka */
.wizual-odznaka {
  position: absolute;
  left: clamp(-0.5rem, -1.5vw, -1.75rem);
  bottom: -1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-md);
  box-shadow: var(--cien-lg);
  animation: unosi 7s ease-in-out infinite 0.8s;
}

.wizual-odznaka .ikona-kolo {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-xs);
}

.wizual-odznaka .ikona-kolo svg {
  width: 1.1rem;
  height: 1.1rem;
}

.wizual-odznaka strong {
  display: block;
  font-family: var(--font-naglowek);
  font-size: 0.95rem;
  line-height: 1.1;
}

.wizual-odznaka span {
  font-size: 0.72rem;
  color: var(--tekst-slaby);
}

@keyframes unosi {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes puls {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 169, 176, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(0, 169, 176, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 169, 176, 0);
  }
}

/* Na waskich ekranach odznaka i karta AI wracaja do zwyklego przeplywu */
@media (max-width: 760px) {
  .wizual {
    perspective: none;
  }

  .wizual-panel {
    transform: none;
  }

  .wizual-odznaka,
  .karta-ai {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    margin-top: 1rem;
    animation: none;
  }

  .wizual-odznaka {
    width: fit-content;
    max-width: 100%;
  }
}

/* ==========================================================================
   13. PASEK ZAUFANIA I MARQUEE
   ========================================================================== */

.pasek-logo {
  padding-block: var(--s-6);
  border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia);
  background: var(--biel);
}

.pasek-logo-tytul {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  margin-bottom: var(--s-4);
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-tor {
  display: flex;
  gap: var(--s-6);
  width: max-content;
  animation: przesuw 38s linear infinite;
}

/* Tasma urosla z dziewieciu pozycji do trzynastu, wiec przy tych samych 38 s
   przesuwalaby sie o polowe szybciej w pikselach. Wydluzamy czas w tej samej
   proporcji, zeby predkosc czytania zostala bez zmian. */
.marquee-tor-dlugi {
  animation-duration: 55s;
}

.marquee:hover .marquee-tor {
  animation-play-state: paused;
}

.marquee-el {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink-500);
  white-space: nowrap;
  transition: color var(--tr-norm);
}

.marquee-el:hover {
  color: var(--ink-800);
}

.marquee-el svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--marka-400);
}

/* Znaki serwisow to ksztalty wypelnione, a nie ikony rysowane kreska jak reszta
   zestawu - stad jawny fill i wyzerowany stroke. Kolor zostaje turkusowy z reguly
   .marquee-el svg, czyli taki jak przy poprzednich ikonach; znaki idą jednym
   kolorem marki, a nie oryginalnymi barwami serwisow, zeby pasek byl spojny
   i zeby nie sugerowal partnerstwa z wlascicielami tych marek. */
.marquee-znak {
  fill: currentColor;
  stroke: none;
  opacity: 0.75;
  transition: opacity var(--tr-norm);
}

.marquee-el:hover .marquee-znak {
  opacity: 1;
}

@keyframes przesuw {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   14. STATYSTYKI I LICZBY
   ========================================================================== */

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

.stat {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  text-align: left;
}

.stat-liczba {
  font-family: var(--font-naglowek);
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gradient-tekst);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.stat-opis {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tekst-slaby);
}

/* ==========================================================================
   15. PROCES I OSIE CZASU
   ========================================================================== */

.proces {
  display: grid;
  gap: var(--s-5);
  counter-reset: krok;
}

@media (min-width: 760px) {
  .proces-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  /* Wczesniej ten breakpoint byl na 1080px - przy typowej szerokosci
     kontenera karty wychodzily wtedy wasko (ok. 240px) i tekst w nich
     wygladal scisniety. 4 kolumny obok siebie tylko wtedy, gdy realnie
     jest na to miejsce; ponizej zostajeukland 2x2 z media query 760px
     powyzej. Zasada ogolna: parzysta liczba kart nigdy nie laduje jako
     3+1, tylko 2+2. */
  .proces-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .proces-4 > .krok:not(:last-child)::after {
    /* Wchodzi celowo na obszar następnej karty, żeby wizualnie je łączyć.
       Wymaga will-change: auto na .widoczny (patrz sekcja 27) - inaczej
       karta trzyma wieczny kontekst warstwowania i przykrywa grot. */
    content: "";
    position: absolute;
    top: 1.35rem;
    right: -2.85rem;
    width: 4.2rem;
    height: 1.1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
  }

  /* Naprzemienny rytm: 1->2 w górę, 2->3 w dół, 3->4 znów w górę.
     Oryginalne pliki wektorowe (Figma, autorka: właścicielka) - _zrodla/ikony/strzalki/. */
  .proces-4 > .krok:nth-child(odd):not(:last-child)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='125' height='16' viewBox='0 0 125 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.168 10.3123V10.8123H124.019L122.42 9.88034L122.168 10.3123ZM92.6683 9.81233H92.1683V10.8123H92.6683V10.3123V9.81233ZM0.168251 14.9873L0.336503 15.4582C24.013 6.99754 42.4755 2.08932 60.9879 1.1615C79.495 0.233959 98.0869 3.28307 122.019 10.7894L122.168 10.3123L122.318 9.83525C98.3168 2.30713 79.6013 -0.772627 60.9379 0.162757C42.2797 1.09787 23.7086 6.04438 -5.66244e-07 14.5165L0.168251 14.9873ZM122.168 10.3123V9.81233H92.6683V10.3123V10.8123H122.168V10.3123ZM122.168 10.3123L122.42 9.88034L106.42 0.555341L106.168 0.987329L105.916 1.41932L121.916 10.7443L122.168 10.3123Z' fill='%2300A9B0'/%3E%3C/svg%3E");
  }

  .proces-4 > .krok:nth-child(even):not(:last-child)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='125' height='19' viewBox='0 0 125 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.168 5.14583V4.64583H124.1L122.411 5.58307L122.168 5.14583ZM102.168 5.64583H101.668V4.64583H102.168V5.14583V5.64583ZM0.168251 0.470833L0.336503 -7.62939e-06C24.013 8.46062 42.4755 13.3688 60.9879 14.2967C79.495 15.2242 98.0869 12.1751 122.019 4.66875L122.168 5.14583L122.318 5.62291C98.3168 13.151 79.6013 16.2308 60.9379 15.2954C42.2797 14.3603 23.7086 9.41378 -5.66244e-07 0.941673L0.168251 0.470833ZM122.168 5.14583V5.64583H102.168V5.14583V4.64583H122.168V5.14583ZM122.168 5.14583L122.411 5.58307L98.4108 18.8954L98.1683 18.4582L97.9257 18.0209L121.926 4.70859L122.168 5.14583Z' fill='%2300A9B0'/%3E%3C/svg%3E");
  }
}

.krok {
  position: relative;
  counter-increment: krok;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  transition: transform var(--tr-norm), box-shadow var(--tr-norm), border-color var(--tr-norm);
}

.krok:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-lg);
  border-color: rgba(0, 169, 176, 0.28);
}

.krok-numer {
  display: block;
  color: var(--ink-200);
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: var(--t-4xl);
  line-height: 1;
  margin-bottom: var(--s-3);
}

.krok-numer::after {
  content: ".";
}

.krok h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
}

.krok p {
  font-size: var(--t-base);
  color: var(--tekst-slaby);
  line-height: 1.6;
}

.krok-czas {
  /* margin-top: auto zamiast stalej wartosci - dzieki temu etykieta
     zawsze siada na dole karty i wyrownuje sie w linii z sasiednimi
     kartami w tym samym rzedzie, niezaleznie od dlugosci tekstu nad nia. */
  margin-top: auto;
  padding-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--marka-600);
}

/* Os pionowa */
.os {
  position: relative;
  display: grid;
  gap: var(--s-6);
  padding-left: 2.6rem;
}

.os::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--marka-500), var(--marka-200), transparent);
}

.os-el {
  position: relative;
}

/* Znacznik osi czasu to sygnet marki - ten sam pierscien co w logotypie.
   Wstawiamy go jako obraz tla z pliku wektorowego: skaluje sie ostro na kazdym
   ekranie i wazy okolo 400 B, czyli mniej niz kod, ktory rysowal poprzednie kolko.

   Otwor sygnetu jest przezroczysty, wiec pionowa linia osi przechodzi przez srodek
   jak nitka przez koralik. To celowe - dzieki temu znacznik dziala tak samo na jasnej
   i na ciemnej sekcji, bez nadpisywania kolorow tla pod spodem. */
.os-el::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.35rem;
  width: 1.9rem;
  height: 1.9rem;
  background: url("/images/logo-znak.svg") center / contain no-repeat;
}

/* Na ciemnym tle niebieski poczatek gradientu ma tylko 2,7:1 i pierscien
   wygaszalby sie po lewej stronie. Rozjasnienie wyrownuje go na calym obwodzie. */
.sekcja-ciemna .os-el::before {
  filter: brightness(1.45) saturate(1.05);
}

.os-el h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-2);
}

.os-el p {
  color: var(--tekst-slaby);
}

/* ==========================================================================
   16. REALIZACJE
   ========================================================================== */

.realizacje {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .realizacje {
    grid-template-columns: repeat(2, 1fr);
  }
}

.realizacja {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
  transition: transform var(--tr-norm), box-shadow var(--tr-norm);
  height: 100%;
}

.realizacja:hover {
  transform: translateY(-5px);
  box-shadow: var(--cien-lg);
}

/* Domena jako etykieta w tresci karty, nie napis na kolorowej okladce.
   Wczesniej kazda realizacja miala blok 16:9 wypelniony wlasnym gradientem
   (turkus, granat, bursztyn, fiolet). Cztery pary kolorow spoza palety marki
   zajmowaly wiecej miejsca niz sama tresc i nie niosly zadnej informacji -
   to nie sa zrzuty tych stron, tylko dekoracja. Przy okazji znika jedyny
   w projekcie atrybut style="" (patrz CLAUDE.md, zasada 8). */
.realizacja-domena {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--marka-600);
  letter-spacing: -0.01em;
  word-break: break-word;
  margin: 0;
}

.realizacja-domena svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--marka-400);
  flex: none;
}

.realizacja-tresc {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.realizacja-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.realizacja-meta span {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0.25em 0.6em;
  border-radius: var(--r-pill);
  background: var(--ink-100);
}

.realizacja h3 {
  font-size: var(--t-lg);
}

/* :not() jest tu konieczne - domena tez jest akapitem w tresci karty, a ta
   regula (0,2,1) bije .realizacja-domena (0,1,0) i cicho zabierala jej kolor
   marki oraz mniejszy stopien pisma. */
.realizacja-tresc p:not(.realizacja-domena) {
  font-size: var(--t-base);
  color: var(--tekst-slaby);
  line-height: 1.6;
}

.realizacja-zakres {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.realizacja-zakres li {
  font-size: 0.78rem;
  padding: 0.25em 0.65em;
  border-radius: var(--r-pill);
  border: 1px solid var(--linia);
  color: var(--ink-600);
}

/* ==========================================================================
   17. PERSONY I BRANZE
   ========================================================================== */

.persony {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.persona {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
  transition: transform var(--tr-norm), box-shadow var(--tr-norm);
  height: 100%;
}

.persona:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-lg);
}

.persona-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-100);
}

.persona-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform var(--tr-wolno);
}

.persona:hover .persona-foto img {
  transform: scale(1.05);
}

.persona-branza {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 2;
  padding: 0.4em 0.9em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  font-family: var(--font-naglowek);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-800);
  box-shadow: var(--cien-sm);
}

.persona-tresc {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.persona-tresc h3 {
  font-size: var(--t-lg);
  line-height: 1.25;
}

.persona-tresc p {
  font-size: var(--t-base);
  color: var(--tekst-slaby);
  line-height: 1.6;
}

/* Karta osoby (zespol) */
.osoba {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
}

@media (min-width: 560px) {
  .osoba {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
}

.osoba-awatar {
  width: 96px;
  height: 96px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--gradient-marka);
  color: #fff;
  font-family: var(--font-naglowek);
  font-size: 2.1rem;
  font-weight: 800;
  overflow: hidden;
  flex: none;
}

.osoba-awatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.osoba-rola {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--marka-600);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   18. CENNIK
   ========================================================================== */

.cennik {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  align-items: stretch;
}

.pakiet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: var(--r-lg);
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
  transition: transform var(--tr-norm), box-shadow var(--tr-norm);
}

.pakiet:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-lg);
}

.pakiet-wyrozniony {
  border-color: transparent;
  background: var(--biel);
  box-shadow: var(--cien-xl);
  z-index: 1;
}

.pakiet-wyrozniony::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-akcent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pakiet-etykieta {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pakiet-nazwa {
  font-family: var(--font-naglowek);
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pakiet-dla-kogo {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  line-height: 1.55;
  min-height: 3.4em;
}

.pakiet-cena {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linia);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pakiet-kwota {
  font-family: var(--font-naglowek);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tekst-mocny);
}

.pakiet-od {
  font-family: var(--font-naglowek);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--tekst-slaby);
  align-self: center;
}

.pakiet-okres {
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  font-weight: 600;
}

.pakiet-cena-opis {
  width: 100%;
  font-size: var(--t-xs);
  color: var(--tekst-slaby);
  margin-top: 0.2rem;
}

.pakiet-zakres {
  margin-top: var(--s-5);
  flex: 1;
}

.pakiet-akcja {
  margin-top: var(--s-5);
}

.pakiet-minimum {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--tekst-slaby);
  text-align: center;
  line-height: 1.45;
}

/* ==========================================================================
   19. FAQ I AKORDEON
   ========================================================================== */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 900px;
}

/* Lista wojewodztw (akordeon miast) - pelna szerokosc kontenera, w odroznieniu
   od zwyklego FAQ, ktore celowo trzyma sie waskiej szerokosci czytelniczej. */
.wojewodztwa-lista {
  max-width: none;
}

/* Lista miast w ciagu, po przecinku. Uzywana w DWOCH miejscach: w akordeonie
   wojewodztw (mapa strony, huby uslug) oraz w bloku "Ta usluga w innych miastach"
   na stronach usluga x miasto. Nazwa pochodzi od pierwszego z nich. */
.wojewodztwo-linki {
  line-height: 2;
}

.wojewodztwo-linki a {
  white-space: nowrap;
}

/* Odnosniki do hubow miejskich na stronie glownej. Lista w ciagu, rozdzielona
   przecinkami - nie siatka i nie karty. Powod: dwanascie kart albo kafelkow
   w tym miejscu czyta sie jak katalog wrzucony w srodek strony, a zdanie
   z nazwami miast zostaje trescia. Kotwica to pelna fraza "agencja marketingowa
   + miasto", bo to ona jest celem tych podstron.
   nowrap na linku, zeby nazwa uslugi nie odrywala sie od nazwy miasta. */
.linki-miasta {
  max-width: 62rem;
  margin-inline: auto;
  line-height: 2.2;
  text-align: center;
}

.linki-miasta a {
  white-space: nowrap;
  font-weight: 600;
}

/* Na telefonie kazda pozycja i tak zajmuje osobna linie (nowrap na pelnej
   frazie "agencja marketingowa + miasto"), wiec luzna interlinia z desktopu
   rozdmuchiwala sekcje do 933 px. Tutaj lista czyta sie jak spis, nie jak
   zdanie, i moze stac ciasniej. */
@media (max-width: 520px) {
  .linki-miasta {
    line-height: 1.9;
    font-size: var(--t-sm);
  }
}

/* Wariant ikony akordeonu: strzalka zamiast plusa/minusa z .faq-ikona.
   Obrot przy [open] i tlo/kolor dziedziczymy z .faq-el[open] .faq-ikona.

   Naglowek byl celowo wiekszy niz w zwyklym FAQ (t-xl, kolo 3rem), bo to lista
   nawigacyjna, nie kolumna pytan. Na telefonie okazalo sie to za duze: przy
   jednym miescie w wojewodztwie kafel rosl do trzech wierszy, a „Kujawsko-
   -pomorskie" lamalo sie na dwie linie. Zglosila wlascicielka 2026-09-02. */
.wojewodztwo-el .faq-pytanie {
  padding: 0.95rem 1.2rem;
  font-size: var(--t-md);
  font-weight: 600;
}

.wojewodztwo-el .faq-ikona {
  width: 2.2rem;
  height: 2.2rem;
}

.wojewodztwo-el .faq-odpowiedz {
  padding: 0 1.2rem 1rem;
}

.wojewodztwo-el .wojewodztwo-linki {
  line-height: 1.7;
}

@media (max-width: 780px) {
  .wojewodztwo-el .faq-pytanie {
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
  }

  .wojewodztwo-el .faq-ikona {
    width: 1.8rem;
    height: 1.8rem;
  }

  .wojewodztwo-el .faq-odpowiedz {
    padding: 0 0.9rem 0.85rem;
    font-size: 0.95rem;
  }
}

.wojewodztwo-ikona.faq-ikona::before,
.wojewodztwo-ikona.faq-ikona::after {
  content: none;
}

.wojewodztwo-ikona svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2px;
}

.wojewodztwo-el:not([open]) .wojewodztwo-ikona {
  background: var(--biel);
  border-color: var(--ink-200);
  color: var(--marka-600);
}

.wojewodztwo-el[open] .wojewodztwo-ikona.faq-ikona {
  background: var(--ink-100);
  border-color: var(--ink-200);
  color: var(--marka-600);
}

.faq-el {
  border: 1px solid var(--linia);
  border-radius: var(--r-md);
  background: var(--tlo-karta);
  overflow: hidden;
  transition: border-color var(--tr-norm), box-shadow var(--tr-norm);
}

.faq-el[open] {
  border-color: rgba(0, 169, 176, 0.32);
  box-shadow: var(--cien-md);
}

.faq-pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-naglowek);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tekst-mocny);
  transition: color var(--tr-szybko);
}

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

.faq-pytanie:hover {
  color: var(--marka-600);
}

.faq-ikona {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--linia-mocna);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform var(--tr-norm), background-color var(--tr-norm), border-color var(--tr-norm);
}

.faq-ikona::before,
.faq-ikona::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}

.faq-ikona::before {
  width: 0.7rem;
  height: 2px;
}

.faq-ikona::after {
  width: 2px;
  height: 0.7rem;
  transition: transform var(--tr-norm), opacity var(--tr-szybko);
}

.faq-el[open] .faq-ikona {
  background: var(--gradient-marka);
  border-color: transparent;
  color: #fff;
  transform: rotate(180deg);
}

.faq-el[open] .faq-ikona::after {
  transform: scaleY(0);
  opacity: 0;
}

.faq-odpowiedz {
  padding: 0 1.35rem 1.35rem;
  color: var(--tekst-slaby);
  line-height: 1.7;
  font-size: var(--t-base);
}

.faq-odpowiedz > * + * {
  margin-top: var(--s-3);
}

.faq-el[open] .faq-odpowiedz {
  animation: rozwin var(--tr-norm) ease;
}

@keyframes rozwin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   20. FORMULARZE
   ========================================================================== */

.formularz {
  display: grid;
  gap: var(--s-4);
}

.pole {
  display: grid;
  gap: 0.4rem;
}

.pole-pelne {
  grid-column: 1 / -1;
}

.pole label,
.pole legend {
  font-family: var(--font-naglowek);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--tekst-mocny);
  padding: 0;
}

.pole label .wymagane,
.pole legend .wymagane {
  color: var(--marka-600);
}

/* Pigulki wyboru - fieldset zresetowany do wygladu zwyklego .pole,
   ukryty natywny radio pod widocznym .pigulka-etykieta dla stylu przycisku. */
.pole-pigulki {
  border: none;
  margin: 0;
}

.pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.pigulka {
  position: relative;
}

.pigulka input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pigulka-etykieta {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.1em;
  border-radius: var(--r-pill);
  border: 1px solid var(--linia-mocna);
  background: var(--biel);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color var(--tr-szybko), background-color var(--tr-szybko), color var(--tr-szybko);
}

.pigulka:has(input:checked) .pigulka-etykieta {
  background: var(--gradient-marka);
  border-color: transparent;
  color: #fff;
}

.pigulka:has(input:focus-visible) .pigulka-etykieta {
  outline: 2px solid var(--marka-500);
  outline-offset: 2px;
}

.pole input,
.pole textarea,
.pole select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-sm);
  background: var(--biel);
  font-size: var(--t-base);
  color: var(--ink-800);
  transition: border-color var(--tr-szybko), box-shadow var(--tr-szybko);
}

.pole textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

.pole input::placeholder,
.pole textarea::placeholder {
  color: var(--ink-400);
}

.pole input:focus,
.pole textarea:focus,
.pole select:focus {
  outline: none;
  border-color: var(--marka-500);
  box-shadow: 0 0 0 4px rgba(0, 169, 176, 0.14);
}

.pole input[aria-invalid="true"],
.pole textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.pole-blad {
  font-size: var(--t-xs);
  color: #dc2626;
  font-weight: 600;
  min-height: 1em;
}

.pole-pomoc {
  font-size: var(--t-xs);
  color: var(--tekst-slaby);
}

.formularz-wiersz {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 640px) {
  .formularz-wiersz-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.zgoda {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tekst-slaby);
}

.zgoda input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  accent-color: var(--marka-500);
  cursor: pointer;
}

/* Pole honeypot */
.pulapka {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Pole audytu URL */
.audyt-pole {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.55rem;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-pill);
  box-shadow: var(--cien-md);
}

.audyt-pole input {
  flex: 1;
  min-width: 200px;
  border: none;
  background: none;
  padding: 0.65rem 1.1rem;
  font-size: var(--t-base);
}

.audyt-pole input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.audyt-pole .btn {
  flex: none;
}

@media (max-width: 520px) {
  .audyt-pole {
    border-radius: var(--r-lg);
  }
  .audyt-pole .btn {
    width: 100%;
  }
}

/* Komunikat formularza */
.komunikat {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  border: 1px solid;
  display: none;
}

.komunikat[data-widoczny="true"] {
  display: block;
}

.komunikat-sukces {
  background: rgba(84, 125, 40, 0.08);
  border-color: rgba(84, 125, 40, 0.3);
  color: #3f5d1e;
}

.komunikat-blad {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.28);
  color: #991b1b;
}

/* ==========================================================================
   21. PASEK CTA
   ========================================================================== */

.cta-pasek {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: clamp(2.25rem, 5vw, 4.25rem);
  background: var(--gradient-ciemny);
  color: #d7dee5;
  isolation: isolate;
}

.cta-pasek::before {
  content: "";
  position: absolute;
  inset: auto -8% -60% auto;
  width: min(72vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 102, 150, 0.4) 0%, rgba(0, 102, 150, 0) 68%);
  z-index: -1;
}

.cta-pasek::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-akcent);
}

.cta-pasek h2 {
  color: #fff;
  max-width: 22ch;
}

.cta-pasek p {
  color: #b0bcc8;
  max-width: 52ch;
  margin-top: var(--s-4);
  font-size: var(--t-lg);
}

.cta-pasek-wnetrze {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-pasek-wnetrze {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--s-8);
  }
}

.cta-pasek-akcje {
  display: grid;
  gap: var(--s-3);
}

.cta-pasek-kontakt {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 0.4rem;
  font-size: var(--t-sm);
  color: #9aa8b5;
}

.cta-pasek-kontakt a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.cta-pasek-kontakt a:hover {
  color: var(--marka-200);
}

/* ==========================================================================
   22. STOPKA
   ========================================================================== */

.stopka {
  background: var(--ink-900);
  color: #9aa8b5;
  padding-top: clamp(3rem, 5vw, 4.5rem);
  font-size: var(--t-sm);
  position: relative;
}

.stopka::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-akcent);
}

.stopka-gora {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}

@media (min-width: 760px) {
  .stopka-gora {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (min-width: 1080px) {
  .stopka-gora {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

.stopka-marka img {
  height: 50px;
  width: auto;
  margin-bottom: var(--s-4);
}

.stopka-marka p {
  max-width: 34ch;
  line-height: 1.65;
}

.stopka h3 {
  font-family: var(--font-naglowek);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}

.stopka-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

/* Element sterujacy JS (ustawienia cookies) musi byc <button>, nie <a href="#">,
   bo agent AI ani czytnik ekranu nie ustali z HTML, co robi link bez adresu.
   Ta klasa sprawia, ze przycisk wyglada jak zwykly tekst w otoczeniu. */
.przycisk-jak-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stopka-lista .przycisk-jak-link {
  color: #9aa8b5;
  text-decoration: none;
  transition: color var(--tr-szybko), padding-left var(--tr-szybko);
}

.stopka-lista .przycisk-jak-link:hover {
  color: #fff;
  padding-left: 3px;
}

.stopka-lista a {
  color: #9aa8b5;
  text-decoration: none;
  transition: color var(--tr-szybko), padding-left var(--tr-szybko);
}

.stopka-lista a:hover {
  color: #fff;
  padding-left: 3px;
}

/* Rozwijane silosy w stopce.
   Uzywamy <details>, wiec dziala bez JavaScriptu i obsluguje sie klawiatura.
   W <summary> siedza dwie rzeczy naraz: link do strony uslugi i strzalka.
   Klikniecie w napis prowadzi na strone uslugi, klikniecie obok rozwija liste -
   dzieki temu stopka nie przestala linkowac do siedmiu stron uslugowych. */
.stopka-silos > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

/* Domyslny trojkacik przegladarki - w Safari i Chrome trzeba go zdjac osobno. */
.stopka-silos > summary::-webkit-details-marker {
  display: none;
}

.stopka-silos > summary::marker {
  content: "";
}

.stopka-strzalka {
  display: inline-flex;
  flex: none;
  color: #6c7c8a;
  transition: transform var(--tr-szybko), color var(--tr-szybko);
}

.stopka-strzalka svg {
  width: 0.9rem;
  height: 0.9rem;
}

.stopka-silos[open] > summary .stopka-strzalka {
  transform: rotate(180deg);
  color: #9aa8b5;
}

.stopka-silos > summary:hover .stopka-strzalka {
  color: #fff;
}

/* Lista miast: mniejsza i wciecie, zeby bylo widac podleglosc wzgledem uslugi. */
.stopka-miasta {
  list-style: none;
  margin: 0.55rem 0 0.2rem;
  padding: 0 0 0 0.9rem;
  display: grid;
  gap: 0.45rem;
  border-left: 1px solid rgba(154, 168, 181, 0.22);
}

.stopka-miasta a {
  font-size: var(--t-sm);
  color: #8896a3;
}

.stopka-miasta a:hover {
  color: #fff;
}

.stopka-nap {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--s-5);
}

.stopka-nap-el {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  line-height: 1.5;
}

.stopka-nap-el svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--marka-400);
  flex: none;
  margin-top: 0.22rem;
}

.stopka-nap-el a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.stopka-nap-el a:hover {
  color: var(--marka-200);
}

.stopka-social {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--s-5);
}

.stopka-social a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c2ccd6;
  transition: background-color var(--tr-szybko), color var(--tr-szybko), transform var(--tr-szybko);
}

.stopka-social a:hover {
  background: var(--gradient-marka);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

.stopka-social svg {
  width: 1.15rem;
  height: 1.15rem;
}

.stopka-dol {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
}

.stopka-dol-linki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.stopka-dol a {
  color: #9aa8b5;
  text-decoration: none;
}

.stopka-dol a:hover {
  color: #fff;
}

/* ==========================================================================
   23. NAGLOWEK PODSTRONY I OKRUSZKI
   ========================================================================== */

.naglowek-strony {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 520px at 90% -20%, rgba(78, 177, 132, 0.2), transparent 60%),
    radial-gradient(620px 420px at 2% 0%, rgba(0, 102, 150, 0.08), transparent 62%),
    var(--papier-50);
  border-bottom: 1px solid var(--linia);
}

.naglowek-strony-wnetrze {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 980px) {
  .naglowek-strony-wnetrze-split {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: var(--s-8);
  }
}

.naglowek-strony h1 {
  font-size: var(--t-4xl);
  margin-top: var(--s-4);
}

.naglowek-strony .lead {
  margin-top: var(--s-5);
  max-width: 60ch;
}

.naglowek-strony-cta {
  margin-top: var(--s-6);
}

/* Wariant hero z wbudowanym formularzem (opt-in: front matter `formularzHero`) */
@media (min-width: 900px) {
  .naglowek-strony-wnetrze-formularz {
    align-items: start;
  }
}

.hero-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.hero-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--tekst-mocny);
}

.hero-checklist-ikona {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  color: var(--sukces);
}

.hero-zaufanie {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
}

.hero-fakty-mini {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linia);
  display: grid;
  gap: var(--s-3);
}

.hero-fakty-mini-el {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-naglowek);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--tekst);
}

.hero-fakty-mini-el svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--marka-500);
}

.hero-formularz {
  padding: clamp(1.5rem, 2.6vw, 2rem);
}

.hero-formularz h2 {
  font-size: var(--t-xl);
  margin-bottom: 0.3rem;
}

/* Zwijany formularz w hero. Na desktopie summary nie istnieje wizualnie -
   formularz wyglada dokladnie tak, jak przed zmiana. */
.formularz-zwijany > summary {
  display: none;
}

@media (max-width: 780px) {
  .formularz-zwijany > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: var(--s-4);
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--marka-500);
    border-radius: var(--r-pill);
    font-family: var(--font-naglowek);
    font-weight: 600;
    color: var(--marka-600);
    cursor: pointer;
    list-style: none;
  }

  .formularz-zwijany > summary::-webkit-details-marker {
    display: none;
  }

  .formularz-zwijany > summary::marker {
    content: "";
  }

  .formularz-zwijany[open] > summary {
    margin-bottom: var(--s-4);
  }

  .formularz-zwijany[open] > summary .menu-strzalka {
    transform: rotate(180deg);
  }
}

.hero-formularz-sub {
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  margin-bottom: var(--s-5);
}

.hero-formularz > .pole,
.hero-formularz > .formularz-wiersz,
.hero-formularz > fieldset {
  margin-bottom: var(--s-4);
}

.hero-formularz-btn {
  width: 100%;
  justify-content: center;
}

.okruszki {
  font-size: var(--t-sm);
}

.okruszki ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.okruszki li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tekst-slaby);
}

.okruszki li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-300);
}

.okruszki a {
  color: var(--ink-500);
  text-decoration: none;
}

.okruszki a:hover {
  color: var(--marka-600);
}

.okruszki [aria-current="page"] {
  color: var(--ink-700);
  font-weight: 600;
}

/* Panel z szybkimi faktami obok naglowka */
.fakty {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-md);
}

.fakty-el {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.fakty-el svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--marka-500);
  flex: none;
  margin-top: 0.28rem;
}

.fakty-el strong {
  display: block;
  font-family: var(--font-naglowek);
  font-size: var(--t-base);
  line-height: 1.3;
}

.fakty-el span {
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  line-height: 1.5;
}

/* ==========================================================================
   24. TRESC ARTYKULU (PROSE) I SPIS TRESCI
   ========================================================================== */

.tresc {
  max-width: var(--szer-max-tekst);
}

/* Tresc bez kolumny ze spisem wysrodkowujemy, zeby nie zostawiac pustej polowy ekranu */
.kontener > .tresc,
.kontener-szeroki > .tresc {
  margin-inline: auto;
}

.tresc > * + * {
  margin-top: var(--s-4);
}

.tresc h2 {
  font-size: var(--t-2xl);
  margin-top: var(--s-8);
  scroll-margin-top: calc(var(--wys-headera) + 2rem);
}

.tresc h3 {
  font-size: var(--t-xl);
  margin-top: var(--s-6);
  scroll-margin-top: calc(var(--wys-headera) + 2rem);
}

.tresc h4 {
  margin-top: var(--s-5);
}

.tresc ul,
.tresc ol {
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5rem;
}

.tresc li::marker {
  color: var(--marka-500);
  font-weight: 700;
}

.tresc blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--marka-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--marka-50);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-700);
}

.tresc blockquote p + p {
  margin-top: var(--s-3);
}

.tresc img {
  border-radius: var(--r-md);
  margin-block: var(--s-6);
}

.tresc code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--ink-100);
  color: var(--ink-800);
}

/* Odpowiedz pod AI Overviews - naturalny akapit, bez ramki i etykiety
   (swiadoma decyzja: tresc dalej jest samodzielna i cytowalna, ale wizualnie
   nie odstaje od reszty tekstu - zmiana z 2026-08-19, dotyczy calego serwisu). */
.odpowiedz {
  line-height: 1.65;
}

.odpowiedz-tytul {
  display: none;
}

/* Spis tresci */
.spis {
  position: sticky;
  top: calc(var(--wys-headera) + 1.5rem);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--biel);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-sm);
  font-size: var(--t-sm);
}

.spis h2,
.spis-tytul {
  font-family: var(--font-naglowek);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  margin: 0 0 var(--s-4);
}

.spis ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.15rem;
  counter-reset: spis;
}

.spis li {
  counter-increment: spis;
}

.spis a {
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--r-xs);
  color: var(--ink-600);
  text-decoration: none;
  line-height: 1.4;
  transition: background-color var(--tr-szybko), color var(--tr-szybko);
}

.spis a::before {
  content: counter(spis, decimal-leading-zero);
  font-family: var(--font-naglowek);
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--marka-400);
  flex: none;
  padding-top: 0.1rem;
}

.spis a:hover {
  background: var(--marka-50);
  color: var(--marka-700);
}

/* Wariant wysrodkowany, samodzielny (nie w parze z .uklad-tresci) - box na srodku
   strony, bez sticky, z prostymi kropkami zamiast numerow z zerem wiodacym. */
.spis-srodek {
  position: static;
  max-width: 640px;
  margin-inline: auto;
}

/* Wariant bez ograniczenia szerokosci, uzywany na stronach ofertowych i miejskich.
   Zmierzone 2026-08-24 na /pozycjonowanie-stron/warszawa/: 1160 px i okolo 116 znakow
   w linii, czyli powyzej progu 80 z WCAG 1.4.8. Wlascicielka zdecydowala tego NIE ruszac
   ("bez naprawiania szerokosci tresci w ofertowym, dla mnie jest ok"). To swiadomy wybor,
   nie przeoczenie - nie "naprawiaj" tego bez pytania. Poradniki uzywaja zwyklego .tresc
   z limitem 80ch. */
.tresc-szeroka {
  max-width: none;
}

.tresc-szeroka p:not(.etykieta),
.odpowiedz p:not(.etykieta) {
  text-align: justify;
}

/* Justowanie na waskiej kolumnie mobilnej robi brzydkie, rozjechane odstepy
   miedzy slowami - ponizej tej szerokosci wracamy do zwyklego wyrownania. */
@media (max-width: 640px) {
  .tresc-szeroka p:not(.etykieta),
  .odpowiedz p:not(.etykieta) {
    text-align: left;
  }
}

/* Domyslna czcionka akapitow w tresci stron - naglowki zostaja przy Poppins.
   Raleway hostowany lokalnie, patrz src/css/fonty.css. Scoping do #tresc-glowna,
   zeby nie nadpisac tekstu w nagłówku, stopce i banerze cookie. :where() zeruje
   specyficznosc selektora ID - inaczej ta reguła (1,0,1) bije kazdy komponentowy
   selektor w rodzaju ".krok p"/".karta p" (0,1,1), mimo ze te maja byc bardziej
   szczegolowe. Byl to realny bug: karty "proces-4" renderowaly tekst w rozmiarze
   akapitu (21.6px) zamiast wlasnego, mniejszego rozmiaru (18px), przez co robily
   sie za wysokie i "cisniete" przy 4 kolumnach. */
:where(#tresc-glowna) p {
  font-family: "Raleway", var(--font-tekst);
  /* 18 px / 30,6 px - dokladnie tak jak widoczni.com, zmierzone 2026-08-24 przy oknie
     1440 px. Wczesniej stalo tu var(--t-lg), czyli 21,6 px i interlinia 36,7 px, przez
     co przy tej samej szerokosci bloku w linii miescilo sie 75 znakow zamiast 84.
     Decyzja wlascicielki: zrownac gestosc tekstu z konkurencja. */
  font-size: 1.125rem;
  line-height: 1.7;
}

.krok p,
.karta p {
  font-size: var(--t-md);
}

.hero-checklist {
  gap: 0.6rem;
  margin-top: var(--s-4) !important;
}

/* Hero tej strony narosl (wieksze fonty, checklista, formularz) i wychodzil
   pod fold - przycinamy odstepy pionowe, nie fonty, zeby zmiescic wiecej
   tresci bez cofania wczesniejszych powiekszen czcionek. */
.naglowek-strony {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
}

/* Caly gorny blok hero (etykieta, h1, lead, checklista, formularz) byl wciaz
   za duzy - schodzimy o 3px na kazdym elemencie z tej sekcji. */
.naglowek-strony .etykieta,
.naglowek-strony .lead {
  font-size: 16.6px;
}

.naglowek-strony h1 {
  font-size: 51px;
}

.hero-formularz {
  padding: clamp(1.25rem, 2vw, 1.5rem);
}

.spis-srodek a {
  font-family: "Raleway", var(--font-tekst);
  font-size: var(--t-md);
}

/* Formularz w hero - wszystko drobne w domyslnym --t-sm, powiekszamy caly blok. */
.hero-formularz h2 {
  font-size: 31px;
}

.hero-formularz .hero-formularz-sub {
  font-size: 13px;
  margin-bottom: 0.5rem;
}

.hero-formularz .pole label,
.hero-formularz .pole legend {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-formularz .pole input,
.hero-formularz .pole textarea,
.hero-formularz .pole select {
  font-size: 11px;
}

.hero-formularz .pigulka-etykieta {
  font-size: 11px;
  padding: 0.55em 1.15em;
}

.hero-formularz .zgoda {
  font-size: 14px;
}

.hero-formularz .pole .zgoda label {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tekst-slaby);
}

.hero-formularz-btn {
  font-size: var(--t-md);
}


.hero-formularz > .pole,
.hero-formularz > .formularz-wiersz,
.hero-formularz > fieldset {
  margin-bottom: 0.25rem;
}

.hero-formularz .formularz-wiersz {
  gap: 0.25rem;
}

.hero-formularz .pole {
  gap: 0.1rem;
}

.hero-formularz .pole input,
.hero-formularz .pole textarea,
.hero-formularz .pole select {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.hero-checklist li {
  font-size: 15px;
  color: var(--marka-600);
}

.hero-checklist-ikona {
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0;
  color: transparent;
  background-image: url("/images/logo-znak.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-checklist li span {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Usuwamy mini-pasek faktow pod checklista (za duzo drobnych elementow). */
.hero-fakty-mini {
  display: none;
}

/* Powyzsze rozmiary w hero sa celowo na sztywno w px (klientka doprecyzowywala
   je co do piksela), wiec nie skaluja sie same w dol jak reszta serwisu na
   var(--t-*). Na telefonie byly przez to za duze - tutaj recznie przycinamy. */
@media (max-width: 780px) {
  .naglowek-strony h1 {
    font-size: 30px;
  }

  /* H1 z dluga fraza (np. "automatyzacja procesow biznesowych AI" na hubach
     miejskich) sklada sie z samych dlugich slow. Przy 30 px w kolumne 375 px
     mieszcza sie dwa slowa i naglowek rozlewa sie na 7 linii, czyli 28% pierwszego
     ekranu. Wlaczane front matterem h1Dlugi: true - reszta podstron zostaje
     na 30 px, bo tam naglowki maja krotsze slowa i mieszcza sie w czterech liniach. */
  .naglowek-strony-h1-dlugi h1 {
    font-size: 24px;
  }

  .naglowek-strony .etykieta,
  .naglowek-strony .lead {
    font-size: 15px;
  }

  .hero-checklist li {
    font-size: 14px;
  }

  .hero-formularz h2 {
    font-size: 24px;
  }

  .hero-formularz .hero-formularz-sub {
    font-size: 12px;
  }

  .hero-formularz .pole label,
  .hero-formularz .pole legend {
    font-size: 13px;
  }
}

/* Sekcja "dlaczego" - wieksze kolko ze znakiem marki zamiast drobnych ikon,
   wieksza czcionka nagłowka/tekstu w kartach, ciasniejsze odstepy. */
.ikona-kolo-marka {
  width: 4.4rem;
  height: 4.4rem;
  background: var(--marka-50);
}

.ikona-kolo-marka img {
  width: 2.4rem;
  height: 2.4rem;
}

#dlaczego .karta {
  gap: var(--s-2);
}

#dlaczego h3 {
  font-size: var(--t-xl);
}

#dlaczego .karta p {
  font-size: var(--t-md);
}

.spis-srodek ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.15rem;
}

.spis-srodek a::before {
  content: "•";
  font-weight: 800;
}

.uklad-tresci {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 1040px) {
  .uklad-tresci {
    grid-template-columns: 260px 1fr;
    gap: var(--s-8);
    align-items: start;
  }

  /* Kolumna 260 px powstala pod przyklejony spis tresci, ktorego nigdy tam nie
     wstawiono - pomiar z 2026-08-24 wykazal, ze jest pusta na 101 stronach ze 101,
     a tekst przez to siedzi 134 px za bardzo w prawo. Zamiast usuwac ja z szablonow
     (dotknelaby kazdej podstrony) skladamy siatke do jednej kolumny WTEDY i tylko
     wtedy, gdy pierwsze dziecko jest puste. Dzien, w ktorym cokolwiek do niej trafi,
     przywraca uklad dwukolumnowy sam z siebie.
     Bez tego kolumna tekstu nie zmiescilaby sie w nowych 860 px, bo 1fr obok 260 px
     daje tylko 852 px i .tresc bylaby po cichu przyciete. */
  .uklad-tresci:has(> div:first-child:empty) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .uklad-tresci > div:first-child:empty {
    display: none;
  }

  .uklad-tresci .tresc {
    /* Token, nie wartosc na sztywno - wczesniej stalo tu 74ch i ta reguła omijala
       --szer-max-tekst dokladnie na desktopie, czyli tam, gdzie czyta sie artykuly. */
    max-width: var(--szer-max-tekst);
  }
}

/* ==========================================================================
   25. TABELE
   ========================================================================== */

.tabela-otoczka {
  overflow-x: auto;
  border: 1px solid var(--linia);
  border-radius: var(--r-md);
  background: var(--biel);
  box-shadow: var(--cien-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
  min-width: 520px;
}

thead th {
  text-align: left;
  padding: 1rem 1.15rem;
  font-family: var(--font-naglowek);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--tekst-mocny);
  background: var(--papier-100);
  border-bottom: 1px solid var(--linia);
  white-space: nowrap;
}

tbody td {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--linia);
  vertical-align: top;
  line-height: 1.55;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--papier-50);
}

td strong {
  font-weight: 600;
}

.tabela-cena {
  font-family: var(--font-naglowek);
  font-weight: 800;
  color: var(--marka-700);
  white-space: nowrap;
}

/* ==========================================================================
   26. COOKIE I ELEMENTY PLYWAJACE
   ========================================================================== */

.cookie {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 130%);
  z-index: 1000;
  width: min(720px, calc(100vw - 2rem));
  padding: var(--s-5);
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-lg);
  box-shadow: var(--cien-xl);
  transition: transform var(--tr-sprezyste);
}

.cookie[data-widoczny="true"] {
  transform: translate(-50%, 0);
}

/* Tytul banera cookies - wizualnie jak naglowek, semantycznie zwykly akapit
   (patrz komentarz w base.njk). Dwie klasy (0,2,0) bija .cookie p (0,1,1),
   wiec nie przejmie mniejszego rozmiaru i szarego koloru akapitu. */
.cookie .cookie-tytul {
  font-family: var(--font-naglowek);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--tekst-mocny);
  margin-bottom: var(--s-2);
}

.cookie p {
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
  line-height: 1.6;
}

.cookie-akcje {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 560px) {
  .cookie-akcje .btn {
    flex: 1 1 100%;
  }
}

/* Sticky CTA na mobile */
.sticky-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(251, 253, 254, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linia);
  box-shadow: 0 -4px 20px rgba(16, 24, 32, 0.07);
}

@media (max-width: 780px) {
  /* Linki „nazwa uslugi + miasto" maja nowrap, zeby nazwa uslugi nie odrywala sie
     od nazwy miasta. Przy dlugiej nazwie („Automatyzacja procesow biznesowych
     Bialystok" to 44 znaki) na telefonie wychodzily poza kafel wojewodztwa.
     Zgloszone przez wlascicielke 2026-09-02: lepiej zeby sie zawijaly. */
  .wojewodztwo-linki a,
  .linki-miasta a {
    white-space: normal;
  }

  .sticky-mobile {
    display: flex;
  }
  body {
    padding-bottom: 4.5rem;
  }
  .cookie {
    bottom: 5rem;
  }
}

.sticky-mobile .btn {
  flex: 1;
  padding: 0.8em 1rem;
  font-size: 0.92rem;
}

/* Plakietka w pasku: staly rozmiar, nie rozciaga sie razem z przyciskami.
   Nie jest przyciskiem, wiec nie dostaje klasy .btn - ma byc znakiem, nie
   trzecia akcja konkurujaca z audytem i telefonem. */
.sticky-plakietka {
  flex: none;
  display: block;
  width: 2.9rem;
  line-height: 0;
}

.sticky-plakietka img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dolny pasek to dwa przyciski w jednym rzedzie - tu zawijanie tekstu robi pasek
   dwukrotnie wyzszym i zjada ekran. Zamiast zawijac, skracamy pismo i odstepy na
   najwezszych ekranach. Sprawdzone przy 326 px, gdzie „Bezplatny audyt" lamalo sie
   na dwie linie po globalnej zmianie z 2026-09-02. */
@media (max-width: 780px) {
  .sticky-mobile .btn {
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .sticky-mobile .btn {
    padding: 0.75em 0.6rem;
    font-size: 0.85rem;
  }
}

/* Plywajacy przycisk telefonu - tylko od tabletu w gore.
   Na mobile telefon jest juz w .sticky-mobile ("Zadzwon"), wiec drugi
   przycisk bylby powtorzeniem tej samej akcji na tym samym ekranie. */
.telefon-plywajacy {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 875;
  width: 3.4rem;
  height: 3.4rem;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-marka);
  color: #fff;
  box-shadow: var(--cien-marka);
  transition: transform var(--tr-szybko), box-shadow var(--tr-norm);
}

.telefon-plywajacy:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--cien-marka-mocny);
  color: #fff;
}

.telefon-plywajacy svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (min-width: 781px) {
  .telefon-plywajacy {
    display: grid;
  }
}

/* Powrot na gore - siedzi nad przyciskiem telefonu, zeby sie nie nakladaly */
.do-gory {
  position: fixed;
  right: 1.25rem;
  bottom: 5.05rem;
  z-index: 870;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--biel);
  border: 1px solid var(--linia);
  color: var(--ink-700);
  box-shadow: var(--cien-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tr-norm), transform var(--tr-norm), visibility var(--tr-norm),
    background-color var(--tr-szybko), color var(--tr-szybko);
}

.do-gory[data-widoczny="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.do-gory:hover {
  background: var(--gradient-marka);
  color: #fff;
  border-color: transparent;
}

.do-gory svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Plakietka "SEO AI Friendly" - siedzi po lewej od przycisku telefonu,
   zeby nie nakladac sie na klaster pływających przycisków w rogu. */
.plakietka-ai-friendly {
  position: fixed;
  right: 5.5rem;
  bottom: 1.1rem;
  z-index: 860;
  width: 4.6rem;
  display: block;
  transition: transform var(--tr-szybko);
}

.plakietka-ai-friendly:hover {
  transform: translateY(-2px) scale(1.05);
}

.plakietka-ai-friendly img {
  display: block;
  width: 100%;
  height: auto;
}

/* Na telefonie plywajaca plakietka znika - ta sama grafika stoi teraz w dolnym
   pasku, a dwie naraz to duplikat tego samego znaku na jednym ekranie.
   UWAGA: ta regula MUSI stac po `.plakietka-ai-friendly { display: block }`.
   Pierwsza proba 2026-09-02 wyladowala wyzej w arkuszu i przegrywala kolejnoscia,
   mimo media query - specyficznosc byla ta sama, wiec decydowala pozycja. */
@media (max-width: 780px) {
  .plakietka-ai-friendly {
    display: none;
  }
}

@media (max-width: 780px) {
  .do-gory {
    bottom: 5.25rem;
  }
}

/* Pasek postepu czytania */
.postep {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gradient-akcent);
  z-index: 950;
  transition: width 90ms linear;
}

/* ==========================================================================
   27. ANIMACJE I UJAWNIANIE PRZY SCROLLU
   ========================================================================== */

[data-ujawnij] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-ujawnij].widoczny {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-ujawnij="lewo"] {
  transform: translateX(-24px);
}

[data-ujawnij="prawo"] {
  transform: translateX(24px);
}

[data-ujawnij="skala"] {
  transform: scale(0.96);
}

[data-opoznienie="1"] {
  transition-delay: 90ms;
}
[data-opoznienie="2"] {
  transition-delay: 180ms;
}
[data-opoznienie="3"] {
  transition-delay: 270ms;
}
[data-opoznienie="4"] {
  transition-delay: 360ms;
}
[data-opoznienie="5"] {
  transition-delay: 450ms;
}

/* ==========================================================================
   28. DOSTEPNOSC I DRUK
   ========================================================================== */

.tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-ujawnij] {
    opacity: 1;
    transform: none;
  }

  .marquee-tor {
    animation: none;
  }

  .wizual-panel {
    transform: none;
  }
}

@media print {
  .header,
  .stopka,
  .cookie,
  .sticky-mobile,
  .telefon-plywajacy,
  .do-gory,
  .postep,
  .menu-mobilne,
  .cta-pasek {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    padding-bottom: 0;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  .sekcja {
    padding-block: 1rem;
    page-break-inside: avoid;
  }
}

/* Pomocnicze */
.srodek-auto { margin-inline: auto; }
.rozmiar-h3 { font-size: var(--t-lg); }
.etykieta-srodek { justify-content: center; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; }
.max-60 { max-width: 60ch; }
.max-52 { max-width: 52ch; }

/* ==========================================================================
   29. BAZA WIEDZY: FILTR KATEGORII I KAFELEK ARTYKULU
   ========================================================================== */

/* Filtr dziala WYLACZNIE po stronie przegladarki i nie zmienia adresu URL.
   To decyzja, nie niedoróbka: wedlug dokumentacji Google nawigacja fasetowa
   odpowiada za okolo polowe zglaszanych im problemow z indeksowaniem, a filtr,
   ktory nie zmienia adresu, nie ma na nie zadnego wplywu. Wszystkie kafelki
   zostaja w kodzie strony, ukrywamy je tylko wizualnie - dzieki temu Googlebot
   i roboty modeli AI widza komplet linkow niezaleznie od aktywnego przycisku.
   Patrz _tools/PLAN-BAZY-WIEDZY.md, sekcja "Architektura bazy wiedzy". */

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}

.filtr-btn {
  font-family: var(--font-naglowek);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.7em 1.15em;
  border-radius: var(--r-pill);
  border: 1px solid var(--linia);
  background: var(--tlo-karta);
  color: var(--ink-600);
  cursor: pointer;
  transition: background var(--tr-szybko), color var(--tr-szybko), border-color var(--tr-szybko);
}

.filtr-btn:hover {
  border-color: var(--marka-400);
  color: var(--marka-600);
}

.filtr-btn[aria-pressed="true"] {
  background: var(--gradient-akcent);
  border-color: transparent;
  color: #fff;
}

.filtr-btn:focus-visible {
  outline: 2px solid var(--marka-600);
  outline-offset: 2px;
}

/* Kafelek ukryty przez filtr. Zostaje w kodzie strony, znika tylko z widoku. */
.artykul-kafel[hidden] {
  display: none;
}

/* Metadane nad tytulem: kategoria i data. Wiersz ma byc cichy, zeby nie
   konkurowal z naglowkiem karty. */
.artykul-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  color: var(--tekst-slaby);
}

.artykul-meta .odznaka-cicha {
  font-family: var(--font-naglowek);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: var(--r-pill);
}

.artykul-meta time {
  font-variant-numeric: tabular-nums;
}

.filtr-pusto {
  margin-top: var(--s-6);
  text-align: center;
  color: var(--tekst-slaby);
}

/* Pasek nad siatka artykulow: cichy H2 po lewej, filtr po prawej.
   Zamiast pelnego naglowka sekcji, ktory razem z hero spychal pierwszy artykul
   o 985 px w dol. H2 jest potrzebny dla hierarchii (bez niego przeskok h1 -> h3),
   ale nie ma byc drugim hero. */
.artykuly-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.artykuly-pasek-tytul {
  font-size: var(--t-xl);
  margin: 0;
}

@media (max-width: 640px) {
  .artykuly-pasek {
    justify-content: flex-start;
  }
  .artykuly-pasek .filtry {
    justify-content: flex-start;
  }
}

/* Wiersz autorstwa i dat pod H1 artykulu. Cichy, ma informowac, nie krzyczec. */
.artykul-autorstwo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--tekst-slaby);
}

.artykul-autorstwo .artykul-autor {
  font-family: var(--font-naglowek);
  font-weight: 700;
  color: var(--tekst-mocny);
}

.artykul-autorstwo time {
  font-variant-numeric: tabular-nums;
}

.artykul-autorstwo > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: var(--s-3);
  border-radius: 50%;
  background: var(--ink-300);
  vertical-align: middle;
}

/* Ramka "Co zapamietac" na koncu artykulu. Razem z blokiem .odpowiedz na gorze
   daje dwa niezalezne, wyjmowalne fragmenty: odpowiedz na wejsciu i podsumowanie
   na wyjsciu. Wzorzec podpatrzony na tarasywesola.pl. */
.zapamietaj {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--marka-100);
  border-left: 4px solid var(--marka-500);
  border-radius: var(--r-lg);
  background: var(--marka-50);
}

.zapamietaj-tytul {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: var(--t-xl);
  color: var(--marka-700);
}

.zapamietaj-tytul svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

.zapamietaj .lista-check {
  margin: 0;
}

.sekcja-ciemna .zapamietaj {
  background: rgba(0, 169, 176, 0.08);
  border-color: rgba(0, 169, 176, 0.25);
}

/* Bio autora na koncu artykulu. Ten sam komponent .osoba co na stronie o nas,
   w ukladzie poziomym z awatarem po lewej. */
.osoba-bio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--linia);
  border-radius: var(--r-lg);
  background: var(--tlo-karta);
}

.osoba-bio-imie {
  margin: var(--s-2) 0 var(--s-1);
  font-size: var(--t-xl);
}

/* :not(.osoba-awatar) jest konieczne - awatar tez jest bezposrednim <div>,
   a `.osoba-bio > div` (0,2,0) bilo jego `flex: none` (0,1,0) i rozciagalo go
   do polowy szerokosci karty zamiast zostawic kwadrat 96 px. */
.osoba-bio > div:not(.osoba-awatar) {
  flex: 1 1 18rem;
  min-width: 0;
}

.osoba-bio p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   30. BLOK "W SKROCIE" (artykuly bazy wiedzy)
   ========================================================================== */

/* Otwiera kazdy poradnik, nad spisem tresci. Wizualnie ma byc cichy: to nie jest
   ramka sprzedazowa, tylko streszczenie. Stad brak tla w kolorze marki, brak ikony
   i brak cienia - zostaje sama pionowa kreska i przygaszone tlo. */
.w-skrocie {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.75rem);
  border-left: 3px solid var(--marka-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--tlo-alt);
}

.w-skrocie-tytul {
  font-family: var(--font-naglowek);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tekst-slaby);
  margin: 0 0 var(--s-4);
}

.w-skrocie-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.w-skrocie-lista li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.6;
}

.w-skrocie-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gradient-akcent);
}

/* Sekcja z blokiem stoi tuz pod naglowkiem strony, wiec wlasny odstep gorny
   dublowalby sie z dolnym odstepem naglowka. */
.sekcja-bez-gory {
  padding-top: 0;
}

/* Czas czytania w podpisie pod H1 - ta sama waga wizualna co daty obok. */
.artykul-czas {
  color: var(--tekst-slaby);
}

/* Obraz karty dekoracyjnej opakowany w <picture> (AVIF plus zapas WebP).
   .karta-dekoracyjna to flex z align-items: center, wiec <picture> jako element
   elastyczny dostaje szerokosc swojej zawartosci, a <img> w srodku ma width: 100%.
   Powstaje petla: obraz czeka na rodzica, rodzic na obraz, oba wychodza 0 px.
   Realny objaw: karta na /pozycjonowanie-stron/warszawa/ zwezila sie do 1160x192
   z pusta zawartoscia. Rozmiar musi wiec nosic <picture>, nie <img>. */
.karta-dekoracyjna picture {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.karta-dekoracyjna picture .karta-dekoracyjna-obraz {
  max-width: none;
}

/* Kolumna ze zdjeciem persony na /dla-kogo/ rozciaga sie do wysokosci tekstu obok,
   a .persona-foto trzymala sztywna proporcje 4:3. Powstawalo od 495 do 598 px pustej
   biali pod obrazem, w obrebie bialej ramki karty - zmierzone na wszystkich szesciu
   personach 2026-08-24. W ukladzie split proporcja ustepuje wysokosci kolumny, bo
   inaczej karta wyglada jak niedokonczona. Na stronie glownej persony stoja w innej
   siatce i tam 4:3 zostaje. */
.siatka-split > .persona {
  align-self: stretch;
}

.siatka-split > .persona .persona-foto {
  aspect-ratio: auto;
  height: 100%;
  min-height: 22rem;
}

/* Persony, ktorych obrazu nie wolno kadrowac - flaga bezKadru w persony.json.
   Domyslnie kadrujemy do wysokiej ramki, bo wypelniony obraz wyglada lepiej i tak
   dziala dla portretow oraz dla rysunku z pionowym telefonem. Wyjatek to rysunki,
   w ktorych tresc siega krawedzi: laptop z gabinetu ma na ekranie tekst i przycisk,
   ktore kadr ucinal w polowie. Takie pokazujemy w calosci przez contain, a pasy
   po bokach sa niewidoczne, bo rysunek ma biale tlo i karta persony tez. */
.persona-foto-calosc img {
  object-fit: contain;
}

/* Bez powiekszenia na hover: przy contain obraz odjezdzalby od krawedzi i widac
   byloby, ze to nie fotografia wypelniajaca ramke, tylko rysunek na tle. */
.persona:hover .persona-foto-calosc img {
  transform: none;
}

/* Rysunki nie maja czysto bialego tla, tylko papierowy odcien rgb(252, 251, 252).
   Przy object-fit: contain powstawal przez to widoczny szew miedzy rysunkiem
   a biala karta persony - roznica jest mala, ale na duzej plaszczyznie widac ja
   jako stopien. Ramka dostaje wiec ten sam odcien co papier, dzieki czemu pasy
   nad i pod rysunkiem znikaja, a jedyna krawedz wypada tam, gdzie i tak jest
   obramowanie karty. Odcien sprawdzasz probkujac rog pliku w src/images/persony/. */
.persona-foto-calosc {
  background: #fcfbfc;
}

/* ==========================================================================
   31. ILUSTRACJA W TRESCI PODSTRONY
   ========================================================================== */

/* Rysunek wstawiany miedzy akapity, jako przerwa dla oka w dlugiej kolumnie
   tekstu. Szerokosc 420 px jest celowo mniejsza od kolumny: rysunki sa pionowe
   w proporcji 2:3, wiec na pelnej szerokosci .tresc-szeroka (1160 px) mialyby
   1740 px wysokosci i rozpychaly strone.
   Tlo w odcieniu papieru rysunku, zeby nie powstal szew na krawedzi. */
.ilustracja-tresc {
  max-width: 420px;
  margin: var(--s-7) auto;
  background: #fcfbfc;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Zerowanie marginesu: obrazy w .tresc maja domyslnie 32 px z gory i z dolu,
   a .ilustracja-tresc tworzy wlasny kontekst formatowania przez overflow: hidden,
   wiec te marginesy nie wychodza na zewnatrz, tylko powiekszaja ramke o 64 px
   i tworza pasy w kolorze papieru nad i pod rysunkiem. */
.ilustracja-tresc img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* ==========================================================================
   PIERWSZY EKRAN NA TELEFONIE
   ==========================================================================
   Pomiar z 2026-09-01 na /pozycjonowanie-stron/ przy oknie 390 x 844:
   naglowek strony konczyl sie na 643 px, a rysunek dopiero na 896 - czyli
   115 px PONIZEJ uzytecznej wysokosci, bo dolny przyklejony pasek zabiera 63 px
   z 844. Zeby zobaczyc rysunek, trzeba bylo przewijac.

   Ponizsze zmniejsza naglowek, przyciski i odstepy tak, zeby caly blok
   otwierajacy - okruszki, etykieta, H1, lead, dwa CTA i rysunek - miescil sie
   na jednym ekranie. Zmiany dotycza WYLACZNIE telefonu; od 781 px w gore
   wszystko zostaje bez zmian.
   ========================================================================== */
@media (max-width: 780px) {
  /* Okruszki w JEDNEJ linii. Zmniejszanie pisma nie wchodzilo w gre:
     najdluzsza sciezka („Agencja marketingowa - Tworzenie sklepow
     internetowych - Warszawa") potrzebuje 567 px przy 353 px dostepnych,
     wiec musialaby zejsc do 7,8 px. Zamiast tego jedna linia z przewijaniem
     w bok - tekst zostaje czytelny, a nic nie zawija sie do drugiego wiersza
     i cala tresc podciaga sie w gore o 20 px.

     Maski po bokach nie dajemy, bo urwany napis przy krawedzi sam mowi,
     ze da sie przesunac. */
  .okruszki {
    font-size: 12.5px;
    line-height: 1.45;
  }

  /* Przewijanie i zakaz zawijania musza siedziec na LISCIE, nie na <nav> -
     to ona jest flexem z flex-wrap: wrap i to ona lamala sciezke na dwie linie. */
  .okruszki ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .okruszki ol::-webkit-scrollbar {
    display: none;
  }

  .okruszki li,
  .okruszki a,
  .okruszki span {
    white-space: nowrap;
  }

  /* Naglowek sekcji: mniej powietrza nad i pod. */
  .naglowek-strony {
    padding-block: 1rem 1.25rem;
  }

  .naglowek-strony .etykieta {
    margin-top: 0.5rem;
    font-size: 13.5px;
  }

  /* H1 z 30 na 25 px. Mniejszy stopien miesci wiecej znakow w linii, wiec
     naglowek nie tylko jest nizszy, ale czesto lamie sie na mniej wierszy. */
  .naglowek-strony h1 {
    font-size: 25px;
    margin-top: 0.6rem;
  }

  .hero h1 {
    font-size: 25px;
  }

  .naglowek-strony .lead,
  .hero-lead {
    margin-top: 0.85rem;
    font-size: 14px;
    line-height: 1.45;
  }

  /* Naglowki sekcji na telefonie. Pomiar z 2026-09-01: miedzy paskiem
     z logotypami a pierwsza karta uslugi stalo 554 px, z czego 239 px zajmowal
     sam akapit wprowadzajacy, a 120 px odstepy sekcji. Na telefonie to sciana
     tekstu miedzy czytelnikiem a oferta - dokladnie to, na co narzekala
     wlascicielka („ludzie nie maja cierpliwosci").

     Nie usuwamy tresci, tylko zmniejszamy stopien i odstepy. Akapit zostaje
     czytelny i widoczny dla Google. */
  .sekcja {
    padding-block: 2.25rem;
  }

  .naglowek-sekcji h2,
  .naglowek-sekcji-zrzad h2 {
    font-size: 24px;
  }

  .naglowek-sekcji .lead,
  .naglowek-sekcji-zrzad .lead {
    font-size: 14px;
    line-height: 1.45;
    margin-top: 0.75rem;
  }

  /* Przyciski w banerze ZNIKAJA na telefonie. Dolny przyklejony pasek ma
     „Zadzwon" i „Bezplatny audyt" na kazdej ze 130 stron, wiec przyciski
     w banerze byly trzecim i czwartym przyciskiem na tym samym ekranie,
     prowadzacym w to samo miejsce. Decyzja wlascicielki 2026-09-01.
     Podwojona klasa, bo .grupa-btn ma wlasny display: flex nizej w arkuszu. */
  .naglowek-strony .grupa-btn,
  .hero-cta.hero-cta {
    display: none;
  }

  /* Formularz w banerze na stronach usluga x miasto mial 941 px wysokosci,
     z czego 285 px zajmowal sam wybor tematu. Na telefonie go zdejmujemy -
     temat i tak wynika z podstrony, na ktorej klient wypelnia formularz.
     Pole ma wartosc domyslna, wiec wiadomosc dociera opisana. */
  .pole-pigulki {
    display: none;
  }
}

/* Przycisk „do gory" na telefonie przenosimy na LEWA strone.
   Przy 372 px zajmowal x od 306 do 352 px, a strzalka akordeonu wojewodztw
   x od 315 do 344 - nakladaly sie prawie dokladnie i przycisk blokowal
   rozwiniecie karty. Po lewej stronie na telefonie nie ma zadnych kontrolek.
   Zmierzone i poprawione 2026-09-02. */
@media (max-width: 780px) {
  .do-gory {
    right: auto;
    left: 1rem;
    width: 2.6rem;
    height: 2.6rem;
  }
}