/* ---------- Kroje pisma (hostowane u nas) ----------
   Wczesniej strona wczytywala fonty z fonts.googleapis.com / fonts.gstatic.com.
   Dwa powody zmiany:
   1. Prywatnosc - kazde wejscie na dowolna z 39 stron wysylalo adres IP
      odwiedzajacego do Google, jeszcze przed jakakolwiek interakcja.
   2. Szybkosc - arkusz z obcej domeny blokuje renderowanie i wymaga dwoch
      dodatkowych par DNS + TLS przed pojawieniem sie pierwszego tekstu.
   Oba kroje sa zmienne (jeden plik obsluguje caly zakres wag), dlatego mamy
   cztery pliki, nie dziesiec: dwa kroje x dwa zakresy znakow.
   Zakresy: latin + latin-ext (polskie znaki diakrytyczne). Cyrylica, greka
   i wietnamski celowo pominiete - nieuzywane, a byly wieksza czescia wagi.
   Licencja: SIL Open Font License 1.1, pelny tekst w assets/fonts/. */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* ============================================================
   PSAI DESIGN SYSTEM v1.0 - base.css (jeden plik, linkowany na wszystkich 39 stronach)
   01 kolor: monochrom / 02 typo: Space Grotesk+JetBrains Mono
   03 zdjecia: kolor naturalny / 04 ramki: hairline bez ozdobnikow
   05 przyciski: radius 4px / 06 hero: foto + gradient (PI)
   07 karty foto: twardy kadr w ramce

   Budowa 2026: skonsolidowany z 39 osobnych kopii <style> (RWD overhaul do
   baseline 1920px, patrz plan "PSAI - RWD overhaul"). Zrodlem bazowym byl
   index.html (najpelniejsza strona referencyjna); dodatkowe komponenty
   uzywane tylko na wybranych typach stron (artykuly, adopt/oferta, zespol,
   legal, faq, media, kontakt) zostaly domerge'owane z ich oryginalnych
   plikow. Drobny dryf (px paddingu/marginesu) zostal znormalizowany do
   jednej kanonicznej wartosci - to zamierzony efekt ujednolicenia, nie pomylka.

   BREAKPOINTY - dokumentacja referencyjna:
   Legacy komponentowe (desktop-first, poza 768 ktore jest min-width):
     520px  - drobne komponenty mobilne (skonsolidowane z dawnych 480/520/560)
     600px  - booking-fab / modal (telefon)
     640px  - modal pelny ekran (telefon, safe-area)
     700px  - drobne siatki 2->1 kolumna
     768px  (min-width) - container padding 24->48px
     900px  - siatki 2/3->1 kolumna (skonsolidowane z dawnych 800/860/900;
              WYJATEK: modal-panel uzywa min-width:888px celowo, to osobna,
              swiadoma wartosc powiazana z wlasna matematyka layoutu cal.com -
              patrz komentarz przy .modal-panel, NIE laczyc z klastrem 900)
     1000px - nav -> hamburger (NIE ruszane, kluczowy prog calego serwisu)
   Nowe, duze checkpointy (kotwice dla clamp(), nie bramki display:none):
     1280px / 1440px / 1920px - baseline skalowania typografii/kontenera/
     rytmu sekcji (patrz --container, h1-h6, --sec-y nizej)
   ============================================================ */
:root{
  --black:#050506; --ink-90:#0d0d10; --ink-80:#17171c; --ink-70:#24242b;
  /* Sekcyjnosc: tlo pasa .section-alt i linia miedzy sekcjami maja wlasne tokeny,
     zeby w ciemnym motywie byly wyrazniejsze bez zmiany palety marki (2026-10-07). */
  --band:#141418; --rule:#222229;
  --grey-50:#82828d; --grey-30:#a9a9b6; --white:#f5f5f8;
  --mono:'JetBrains Mono',monospace; --sans:'Space Grotesk',sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;--s16:128px;--s24:192px;
  --r:4px;
  /* Podswietlenia i cienie zalezne od motywu (2026-10-11): rgba(255,255,255,...)
     znikalo w jasnym motywie, a czarny cien przycisku spotkania byl tam za ciezki. */
  --hover-tint:rgba(255,255,255,.03); --hover-tint-soft:rgba(255,255,255,.02);
  --btn-glow:rgba(255,255,255,.18);
  --shadow-float:0 12px 40px rgba(0,0,0,.5); --shadow-float-hover:0 16px 48px rgba(0,0,0,.6);
  /* Kontener: fluid clamp zamiast sztywnego 1400px, zakotwiczony na
     checkpointach 1280/1440/1920 - patrz plan RWD overhaul. Efekt:
     1280px viewport -> ~1280px (bez zmian, container po prostu wypelnia
     dostepna szerokosc, max-width nigdy nie wymusza overflow), 1440px ->
     dotyka 1440px (krawedz), 1920px -> ~1574px (realny wzrost, mieszczacy
     sie w zadanym zakresie 1440-1600px). Powyzej ~1950px zatrzymuje sie
     na 1600px, zeby ultra-szerokie monitory nie dostaly nieczytelnie
     dlugich linii tekstu. */
  --container: clamp(1440px, 82vw, 1600px);
  --ease:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  /* Nav-bg: ujednolicone na .7 (wartosc wiekszosciowa - 36/39 stron; index.html
     i o-nas.html mialy .6, kompas.html ma swiadomy override .75 w kompas.css). */
  --nav-bg:rgba(5,5,6,.7);
  /* Informuje przegladarke, zeby natywne kontrolki (scrollbary, pola formularza,
     menu <select>) renderowala w tym samym motywie co strona. */
  color-scheme:dark;
  /* Jawna lista animowanych wlasciwosci zamiast `transition:all` - `all` lapie tez
     wlasciwosci ukladu (width/height/padding), co wymusza kosztowny relayout przy
     kazdej zmianie i potrafi animowac rzeczy, ktorych nikt nie zamierzal animowac. */
  --t-ui:color 200ms var(--ease), border-color 200ms var(--ease), background-color 200ms var(--ease), opacity 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  --t-ui-220:color 220ms var(--ease), border-color 220ms var(--ease), background-color 220ms var(--ease), opacity 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
  --t-ui-250:color 250ms var(--ease), border-color 250ms var(--ease), background-color 250ms var(--ease), opacity 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease);
  --acc-1:#8b7cff; --acc-2:#4aa8ff; --acc-3:#2fd3b4;
  --accent:var(--acc-2);
  --fn-accent:linear-gradient(100deg,var(--acc-1) 0%,var(--acc-2) 50%,var(--acc-3) 100%);
  /* Rytm sekcji: fluid clamp zastepuje dawne sztywne 128px/96px (desktop/
     mobile). Dwie kolejne wersje (176px, potem 144px max) nadal wygladaly
     na zbyt duzy odstep miedzy sekcjami w praktyce - polowa poprzedniej
     wersji (48-72px) okazala sie wlasciwa skala. */
  --sec-y: clamp(48px, 42.17px + 1.55vw, 72px);

  /* ---------- Typografia UI/body: sformalizowana skala (audyt wrzesien 2026) ----------
     Audyt wykryl 217 deklaracji font-size w bazowym CSS rozrzuconych na ~60 roznych
     wartosci - efekt dokladnie taki, na jaki uzytkownik sie skarzyl: "albo wielkie,
     albo bardzo male", bez systemu. Ponizsze tokeny sa jedynym dopuszczalnym zrodlem
     wartosci dla tekstu UI/body (nie-naglowkowego). Wybrane na podstawie faktycznego
     "centrum ciezkosci" strony (najczesciej uzywane realne wartosci), nie wymyslone:
       --fs-body-lg   18px - wieksze akapity/lead na stronach artykulu
       --fs-body      16px - bazowy tekst body (body{}), cytaty, dluzsze akapity
       --fs-body-sm   14px - domyslny tekst UI/karty/linki (najczestszy rozmiar w pliku,
                              wchlania dawne 13/13.5/14.5/15px jednorazowki)
       --fs-label     12px - etykiety mono UPPERCASE (.mono, przyciski, nav-separator)
       --fs-label-sm  11px - male etykiety mono (stopka, meta, badge) - byla najczestsza
                              pojedyncza wartosc w calym pliku (45 wystapien)
       --fs-micro     10px - najmniejsze etykiety/specyfikacje (wchlania 9/10.5px)
     Naglowkowa skala (h1-h6, .lead) zostaje PONIZEJ, nietknieta - juz zbudowana
     wg tej samej metodologii fluid 375->1920px zanim ten audyt sie zaczal. Zweryfikowana
     w ramach tego audytu: h1->h2->h3 maja >=1.25x skoku na obu kotwicach (375/1920px),
     h3->h4->h5 kompresuja sie do ok. 1.06-1.27x przy dolnej krawedzi skali (typowe w
     produkcyjnych skalach typograficznych blisko granicy z body-textem, np. Material
     Design robi to samo) - swiadomie NIE poszerzone, zeby nie zaburzyc dziesiatek
     istniejacych uzyc h4/h5 dla marginalnego zysku czytelnosci. */
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px;
  --fs-label:12px; --fs-label-sm:11px; --fs-micro:10px;
  /* Lede/opis pod naglowkiem - byl w TRZECH wariantach o roznej wielkosci dla
     identycznej roli wizualnej: .lead (fluid 16-22px, na adopt/kontakt/faq/...),
     .article-lead (staly 18px = --fs-body-lg, na oferta + 25 artykulow),
     .hero-main .lead (fluid 13-15px, tylko index/kompas). Jedna skala teraz
     wszedzie, ta sama metoda co h1-h3 (kotwica 375->1920px). */
  --fs-lead: clamp(14px, 12.79px + 0.324vw, 19px); /* zmniejszone proporcjonalnie z 16-22px na wyrazna prosbe - bylo za duze */

  /* ---------- "Kompaktowe" naglowki - h3/h4 w gestych kartach/akordeonach ----------
     Kanoniczny h3/h4 (patrz nizej) jest za duzy dla tytulu w gestej siatce kart -
     dawniej kazdy taki komponent wymyslal wlasna wartosc (14-21px, >15 roznych liczb
     dla tej samej roli wizualnej). Dwa kroki zastepuja cala te rozrzutke: */
  --fs-card-h:16px;     /* standardowy tytul karty / pytania FAQ / kroku procesu */
  --fs-card-h-lg:20px;  /* wiekszy tytul karty (CTA-w-karcie, kategoria, naglowek profilu) */

  /* ---------- Nazwane wyjatki: udokumentowane, swiadome fluid-clampy ----------
     Kazdy zastepuje 2-3 niemal-identyczne, niezaleznie wymyslone clampy ktore robily
     to samo z lekko innymi liczbami. Ta sama metodologia co h1-h6: kotwica 375->1920px,
     slope=(max-min)/1545, intercept=min-slope*375. */
  /* USUNIETE (byla przyczyna niespojnosci miedzy podstronami, na wyrazna prosbe -
     "jedna identyczna skala wszedzie, zero wyjatkow"): --fs-h1-hero, --fs-h1-page,
     --fs-feature-h, --fs-h2-compact, --fs-article-h3. Wszystkie h1/h2/h3 ktore ich
     uzywaly teraz dziedzicza zwykle h1{}/h2{}/h3{} z bazowej skali wyzej. */
  --fs-claim-line: clamp(17px, 16.03px + 0.26vw, 21px);  /* wyroznione zdanie-porownanie (ADOPT claims) */
  --fs-quote-emphasis: clamp(22px, 19.57px + 0.65vw, 32px); /* wyeksponowana teza/cytat (step-claim, philosophy-quote) */
  --fs-testi-quote: 21px;  /* cytat w komponentach testimonial - ujednolicone (bylo 19/21/22px w 3 miejscach dla tej samej roli) */
  --fs-stat-num: clamp(32px, 28.6px + 0.91vw, 46px);      /* duza liczba-statystyka (pull-quote, sekcje stat) */
  --fs-stat-num-sm: clamp(28px, 25.09px + 0.78vw, 40px);  /* liczba-statystyka w gestym rzedzie (home "liczby, nie obietnice") */
  --fs-stat-num-xs: clamp(18px, 16.54px + 0.39vw, 24px);  /* liczba-statystyka w plaskim pasku zaufania / stat profilu osoby */
  --fs-newsletter-h: clamp(28px, 23.63px + 1.17vw, 46px); /* naglowek newslettera w stopce */
  --fs-nav-link: var(--fs-label);   /* link nawigacji glownej - byl osobnym fluid clampem rosnacym do 15px,
                                        za duzy wzgledem reszty etykiet UI. Teraz = --fs-label (12px), jak
                                        przyciski i inne etykiety mono, zgodnie z zasada "jedna skala". */
  --fs-legal-h2: 19px; /* h2 w dokumentach prawnych - swiadomie STATYCZNY (nie fluid): gesty,
                          dlugi tekst prawny chce przewidywalnej, nie-dramatycznej hierarchii */
}
/* Tryb jasny - te same zmienne, odwrocona paleta. Caly design system stoi na
   custom properties, wiec reszta CSS adaptuje sie automatycznie bez zmian. */
[data-theme="light"]{
  --black:#f7f7f9; --ink-90:#eeeef1; --ink-80:#e2e2e6; --ink-70:#cfcfd6;
  --band:#eeeef1; --rule:#e2e2e6;
  --grey-50:#6b6b76; --grey-30:#45454f; --white:#0a0a0c; --nav-bg:#f7f7f9;
  color-scheme:light;
  --acc-1:#5b3fd9; --acc-2:#0b6fc9; --acc-3:#077a66;
  --hover-tint:rgba(10,10,12,.04); --hover-tint-soft:rgba(10,10,12,.03);
  --btn-glow:rgba(10,10,12,.22);
  --shadow-float:0 10px 30px rgba(10,10,12,.14); --shadow-float-hover:0 14px 36px rgba(10,10,12,.2);
  --accent:var(--acc-2);
  --fn-accent:linear-gradient(100deg,var(--acc-1) 0%,var(--acc-2) 50%,var(--acc-3) 100%);
}*{margin:0;padding:0;box-sizing:border-box;}
body{transition:background 250ms ease, color 250ms ease;background:var(--black);color:var(--white);font-family:var(--sans);font-size:var(--fs-body);line-height:1.65;overflow-x:hidden;}
::selection{background:var(--white);color:var(--black);}@media(min-width:768px){.container{padding-left:48px;padding-right:48px;}}

/* ---------- Typografia: fluid interpolation 375px -> 1920px ----------
   Zastepuje dawne, przypadkowe wspolczynniki vw ktore urywaly skalowanie
   juz ok. 1300px. Body (16px) zostaje STATYCZNE (swiadoma decyzja UX -
   fluid body-text na szerokich ekranach pogarsza czytelnosc). Kontrola
   dlugosci linii na duzym desktopie idzie przez max-width w ch (.lead itd). */
/* text-wrap:balance rozklada naglowek na rowne wiersze zamiast zostawiac
   pojedyncze slowo w ostatnim. Zmierzone przy 890x626: dwa naglowki mialy
   ostatni wiersz o szerokosci 15-16%, po wlaczeniu zero. Na 1440 problem
   nie wystepowal wcale - to jest dokladnie ten rodzaj wady, ktory widac
   dopiero przy przemiataniu rozdzielczosci, a nie na trzech breakpointach. */
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.06;letter-spacing:-.03em;text-wrap:balance;}
/* h1-h3: modularna skala, stosunek 1.25x miedzy kazdym poziomem, na OBU kotwicach
   (375px i 1920px) - dzieki temu stosunek zostaje ten sam przy KAZDEJ szerokosci
   okna, nie tylko na skrajach. h1 max obnizony z 96px do 64px na wyrazna prosbe -
   96px bylo za duze. Jedna skala dla WSZYSTKICH h1/h2/h3 na calej stronie, bez
   wyjatkow (patrz usuniete --fs-h1-hero/--fs-h1-page/--fs-h2-compact/--fs-article-h3/
   --fs-feature-h nizej w pliku - to byla przyczyna niespojnosci miedzy podstronami). */
/* ---------- Sufit wysokosciowy skali ----------
   Skala pozostaje JEDNA formula dla calego serwisu - kazda podstrona przy tej
   samej rozdzielczosci ma identyczny naglowek, wiec zasada "zero wyjatkow
   miedzy stronami" jest nienaruszona. Zmienia sie to, ze formula liczy sie
   z OBU wymiarow okna, nie z samej szerokosci.
   Skladnik min(..., Nsvh) jest SUFITEM, nie mnoznikiem: aktywuje sie dopiero,
   gdy okno jest na tyle niskie, ze naglowek zjadlby ekran. Zmierzone progi
   zadzialania: h1 ponizej ~525 px wysokosci okna, h2 ponizej ~490 px.
   Powyzej tych wysokosci wartosci sa CO DO PIKSELA takie jak wczesniej -
   1440x900, 1920x1080, 375x812 i wszystkie pozycje telefonu skladanego
   pozostaja nietkniete. */
h1{font-size:min(clamp(42px,36.66px + 1.424vw,64px), 8svh);}
h2{font-size:min(clamp(34px,29.87px + 1.1vw,51px), 7svh);}
h3{font-size:min(clamp(27px,23.6px + 0.906vw,41px), 6svh);letter-spacing:-.01em;}
h4{font-size:clamp(17px,15.8px + 0.3vw,22px);letter-spacing:-.01em;}
h5{font-size:clamp(16px,15.3px + 0.2vw,19px);letter-spacing:-.01em;}
/* h6: mono eyebrow-style naglowek (jak .mono), nie skalowany wizualnie jak h1-h5. */
h6{font-family:var(--mono);font-size:clamp(12px,11.5px + 0.13vw,14px);font-weight:500;text-transform:uppercase;letter-spacing:.12em;line-height:1.4;}
.lead{font-size:var(--fs-lead);color:var(--grey-30);max-width:620px;font-weight:400;}
/* Link w leadzie: ten sam wzór co w artykułach (.article-body a), bez fioletu :visited. */
.lead a{color:var(--white);text-decoration:underline;text-decoration-color:var(--ink-70);text-underline-offset:2px;transition:text-decoration-color 200ms var(--ease);}
.lead a:hover{text-decoration-color:var(--grey-30);}
.mono{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--grey-50);}
.fig{color:var(--grey-50);}

/* ---------- Pomijanie renderowania tresci poza kadrem ----------
   Zmierzone na tej stronie: 72% elementow lezy pod zgieciem, a przegladarka i
   tak liczy ich uklad przy kazdym przeliczeniu. Koszt przeliczenia ukladu przy
   890x626: 106 ms bez tej reguly, 51 ms z nia (-52%); przy 1440x900: 109 -> 73 ms.
   To ma bezposrednie przelozenie na cytowalnosc w AI - szybkie strony sa
   cytowane wielokrotnie czesciej niz wolne.

   contain-intrinsic-size z ODMIANA auto: przegladarka zapamietuje realna
   wysokosc sekcji po pierwszym wyrenderowaniu i pozniej uzywa jej zamiast
   zgadywanej. Wartosc 780px to zmierzona MEDIANA wysokosci sekcji w tym
   serwisie (rozrzut 77-5831 px, 56 sekcji na pieciu stronach) - ma znaczenie
   wylacznie do pierwszego renderu, potem zastepuje ja pomiar.

   Pierwsza sekcja jest wylaczona: jest nad zgieciem, wiec nie ma czego pomijac,
   a zgadywana wysokosc psulaby pozycje paska przewijania od razu po wejsciu. */
section:not(:first-of-type),
.section:not(:first-of-type){
  content-visibility:auto;
  contain-intrinsic-size:auto 780px;
}

/* ---------- Sections: fluid rytm, bez sztywnego skoku na 768px ---------- */
section{padding:var(--sec-y) 0;position:relative;}

h1,h2,h3{font-weight:500;line-height:1.06;letter-spacing:-.03em;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-family:var(--mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:.12em;border-radius:var(--r);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:var(--t-ui-220);}

.btn-sm{padding:11px 20px;}


.btn svg{transition:transform 220ms var(--ease);}

.btn:hover svg{transform:translate(2px,-2px);}

.btn-primary{background:var(--white);color:var(--black);}

.btn-primary:hover{box-shadow:0 6px 28px var(--btn-glow);}

.btn-outline{background:transparent;color:var(--white);border-color:var(--ink-70);}

.btn-outline:hover{border-color:var(--grey-50);background:var(--hover-tint);}

/* ---------- Frame (hairline, no corner glyphs) ---------- */
.frame{border:1px solid var(--ink-80);position:relative;}

.frame:hover{border-color:var(--ink-70);}

/* ---------- Nav ---------- */
nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:14px 0;background:var(--nav-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:border-color 300ms var(--ease);}

nav.scrolled{border-bottom-color:var(--ink-80);}.logo{font-family:var(--mono);font-size:var(--fs-body-sm);font-weight:500;letter-spacing:.06em;color:var(--white);text-decoration:none;text-transform:uppercase;}

.nav-links{display:flex;gap:var(--s4);flex:1;}.nav-links a sup{color:var(--grey-50);font-size:var(--fs-micro);margin-left:2px;}

.nav-links a:hover{color:var(--white);}

@media(max-width:1000px){.nav-links{display:none;}}
/* 2026-10-07: dluzsza etykieta "Transformacja cyfrowa" lamala sie przy 1001-1200px
   (pasek rosl do 79px). Etykiety nie lamia sie, a w tym zakresie odstep miedzy nimi
   maleje. Prog hamburgera 1000px zostaje bez zmian (kluczowy prog serwisu). */
.nav-links a{white-space:nowrap;}
@media(min-width:1001px) and (max-width:1200px){.nav-links{gap:var(--s3);}.nav-inner{gap:var(--s4);}}

/* ---------- Hero: foto + gradient overlay (styl PI) ---------- */
.above-fold{display:flex;flex-direction:column;}

/* Dwa pliki zdjęcia (ciemny/jasny wariant, ten sam kadr) - przełączane czystym CSS
   przez [data-theme], zero JS, zero flasha złego zdjęcia. Scrim i tekst wracają do
   zwykłych zmiennych motywu, bo teraz OBA zdjęcia są zaprojektowane pod swój motyw. */
header.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ink-80);display:flex;align-items:stretch;}

/* Padding dopasowany do .container (24px/48px) - bez tego zdjęcie i tekst wychodziły
   48px poza kolumnę, do której wyrównane jest wszystko inne na stronie. */
.hero-inner{max-width:var(--container);margin-left:auto;margin-right:auto;width:100%;position:relative;display:grid;aspect-ratio:21/9;background:var(--black);padding-left:24px;padding-right:24px;}

@media(min-width:768px){.hero-inner{padding-left:48px;padding-right:48px;}}

/* Zdjecie hero jest teraz w <picture> (osobny kadr mobilny), wiec elementem
   siatki jest <picture>, nie <img> - inaczej nakladanie warstw hero na
   desktopie przestaloby dzialac. */
.hero-inner picture{grid-area:1/1;display:block;min-height:0;min-width:0;}
.hero-photo{grid-area:1/1;width:100%;height:100%;object-fit:contain;object-position:right center;display:block;min-height:0;min-width:0;}

/* Wariant jasny hero jest TLEM CSS, nie tagiem <img> - i to celowo.
   Dwa <img> (ciemny + jasny) powodowaly, ze przegladarka pobierala OBA przy
   kazdym wejsciu, choc widoczny jest tylko jeden (display:none nie blokuje
   pobierania). loading="lazy" na ukrytym teoretycznie to rozwiazuje, ale
   zalezy od wewnetrznego IntersectionObservera przegladarki - zbyt kruche
   dla obrazu hero. Tlo CSS z niepasujacej reguly NIE jest pobierane w zadnej
   przegladarce, a po przelaczeniu motywu pobiera sie natychmiast.
   Ciemny wariant zostaje prawdziwym <img> z alt - to on niesie tresc dla
   wyszukiwarek i jest obrazem LCP. */
.hero-photo-light{display:none;background-repeat:no-repeat;background-size:contain;background-position:right center;}

[data-theme="light"] .hero-photo-dark{display:none;}

[data-theme="light"] .hero-photo-light{display:block;background-image:url("../../img/hero/zespol-jasne-1000.jpg");background-image:image-set(url("../../img/hero/zespol-jasne-1000.webp") type("image/webp"),url("../../img/hero/zespol-jasne-1000.jpg") type("image/jpeg"));background-size:cover;}
@media(max-width:600px){
  [data-theme="light"] .hero-photo-light{background-image:url("../../img/hero/zespol-jasne-mobile.jpg");background-image:image-set(url("../../img/hero/zespol-jasne-mobile.webp") type("image/webp"),url("../../img/hero/zespol-jasne-mobile.jpg") type("image/jpeg"));}
}

@media(min-width:901px){
  /* od 901px wraca szeroki kadr 21:9 i dopasowanie do wysokosci kontenera */
  [data-theme="light"] .hero-photo-light{background-image:url("../../img/hero/zespol-jasne-2000.jpg");background-image:image-set(url("../../img/hero/zespol-jasne-2000.webp") type("image/webp"),url("../../img/hero/zespol-jasne-2000.jpg") type("image/jpeg"));background-size:contain;}
}

@media(max-width:900px){
  .hero-photo-light{background-position:center center;}
}

.hero-scrim{grid-area:1/1;min-height:0;min-width:0;background:linear-gradient(90deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.18) 32%, transparent 46%);pointer-events:none;}

[data-theme="light"] .hero-scrim{background:linear-gradient(90deg, rgba(247,247,249,.7) 0%, rgba(247,247,249,.25) 32%, transparent 46%);}

.hero-text-col{grid-area:1/1;position:relative;z-index:5;min-height:0;min-width:0;display:flex;align-items:flex-end;padding:56px 40px 40px 0;}

.hero-main{max-width:460px;min-width:0;}

.hero-main .lead{max-width:46ch;}

.hero-main h1{max-width:16ch;margin:14px 0;}
/* ============================================================
   WYBOR UKLADU HERO: KSZTALT OKNA, NIE PROG SZEROKOSCI
   ============================================================
   Wczesniej granica byla @media(max-width:900px). Prog w szerokosci znaczy, ze
   okno 900x1200 (tablet w pionie) i 900x626 (telefon skladany rozlozony poziomo)
   dostaja ten sam uklad, mimo ze maja zupelnie inny ksztalt - a okna 900 i 920
   dostaja UKLADY ROZNE, choc roznia sie o 20 px. Zmierzone: skok wysokosci hero
   o 376 px przy przejsciu 900 -> 920 px.

   Uklad z nakladka (tekst na zdjeciu) potrzebuje okna SZERSZEGO niz wyzszego i
   miejsca na kolumne tekstu obok zdjecia. Oba warunki sa ciagle wlasnosciami
   okna, nie klasami urzadzen:
     - proporcja co najmniej 1,1 (okno szersze niz wysokie),
     - co najmniej 640 px szerokosci (miejsce na kolumne tekstu).
   Ponizej ktoregokolwiek z nich wchodzi uklad jeden pod drugim. Zapis
   "max-aspect-ratio ALBO max-width" to dokladne zaprzeczenie tych dwoch
   warunkow, wiec oba uklady pokrywaja calą przestrzen rozdzielczosci bez luki
   i bez nakladania. */
@media (max-aspect-ratio:11/10), (max-width:639px){
  .hero-inner{aspect-ratio:auto;display:block;padding-left:0;padding-right:0;}
  /* Na mobile wchodzi osobny kadr zdjecia (img/hero/zespol-mobile, 1060x763,
     ciasniej wokol trojki zalozycieli) i to on narzuca proporcje kontenera.
     Wczesniej bylo tu height:44vh + object-fit:contain, czyli kadr 21:9 wpisany
     w pudelko o proporcji ~1:1 - zdjecie renderowalo sie na 375x160, a pozostale
     ~197 px wysokosci bylo pusta czernia. Teraz cover na wlasnej proporcji kadru
     nie obcina nikogo i nie zostawia martwego miejsca. */
  /* Wysokosc zdjecia to UDZIAL w wysokosci okna, ograniczony wlasna proporcja
     kadru. Nie ma juz progu 600 px, przy ktorym zdjecie skakalo z 421 na 259 px:
     kadr mobilny obowiazuje w calym ukladzie pionowym, a max-height pilnuje,
     zeby na wysokim oknie nie zjadl ekranu przed tekstem. Kadrujemy od gory,
     bo twarze sa w gornej czesci zdjecia. */
  .hero-photo{position:relative;height:auto;aspect-ratio:900/648;max-height:34svh;
    object-fit:cover;object-position:center 26%;background:var(--black);}
  .hero-scrim{display:none;}
  .hero-text-col{position:relative;padding:0;display:block;background:var(--black);}
  .hero-main{max-width:100%;padding:28px 24px 32px;}
}

/* ============================================================
   EKRANY SKLADANE I NIETYPOWE PROPORCJE (iPhone Duo i podobne)
   ============================================================
   Do tej pory cały układ decydował się WYŁĄCZNIE po szerokości. Na telefonie
   z jednym ekranem to działa, bo szerokość i wysokość idą w parze. Na ekranie
   składanym już nie: ten sam serwis dostaje 466x678 (złożony), 890x626
   (rozłożony poziomo), 626x890 (rozłożony pionowo) i ~440x626 (Split View,
   dwie apki obok siebie). Trzy z tych czterech kadrów są NISKIE, a hero
   dobierane po samej szerokości urosło tam do 121-141% wysokości ekranu -
   wezwanie do działania lądowało pod zgięciem.

   Zasada: o układzie decyduje też WYSOKOŚĆ, a jednostką jest svh (small
   viewport height), czyli wysokość przy rozwiniętym pasku przeglądarki.
   Dzięki temu to, co ma się zmieścić, mieści się także zanim pasek zniknie -
   a przy składaniu i rozkładaniu urządzenia przelicza się samo, bez
   przeładowania strony. */

/* Niskie okno: uklad wybrala juz proporcja (patrz wyzej), tutaj zostaja
   wylacznie poprawki wynikajace z braku WYSOKOSCI. Dziala niezaleznie od tego,
   czy okno ma 678 px szerokosci czy 1920 - liczy sie tylko to, ze jest niskie. */
@media (max-height:700px) and (min-aspect-ratio:11/10) and (min-width:640px){
  /* Wysokosc bierze sie z tekstu, nie ze sztywnej proporcji 21:9. Przy proporcji
     blok tekstu bywa wyzszy od kadru i wysrodkowanie w pionie wypycha pierwszy
     wiersz naglowka POD przyklejony pasek nawigacji. */
  .hero-inner{aspect-ratio:auto;min-height:min(56svh,420px);padding-left:24px;padding-right:24px;}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:cover;object-position:right center;}
  .hero-text-col{position:relative;display:flex;align-items:center;padding:84px 0 24px;background:none;}
  /* Kolumna szersza niz na duzym ekranie: przy 369 px naglowek lamal sie na trzy
     wiersze, a dwa przyciski nie miescily sie w jednym rzedzie - razem 104 px
     zmarnowanej wysokosci tam, gdzie jej najbardziej brakuje. */
  .hero-main{max-width:min(78%,460px);padding:0;}
  .hero-main .lead{max-width:38ch;}
  .hero-main .hero-actions{gap:10px;margin-top:18px;flex-wrap:nowrap;}
  .hero-main .hero-actions > .btn{width:auto;white-space:nowrap;}
}

/* Niskie okno w ukladzie pionowym: sam odstep tekstu. Zdjecie ma juz ciagle
   ograniczenie wysokoscia okna (max-height:38svh), wiec nie potrzebuje progu. */
@media (max-height:760px){
  .hero-main{padding-top:20px;padding-bottom:24px;}
  .hero-main h1{margin:10px 0;}
  .hero-actions{margin-top:18px;}
}

/* Przyciski hero na pelna szerokosc na waskim oknie: rowne, wieksze pole
   dotyku i brak dwoch roznych szerokosci jeden pod drugim. To jedyne, co
   zostalo z dawnego progu 600 px - kadr zdjecia nie zalezy juz od progu,
   tylko od udzialu w wysokosci okna (patrz .hero-photo wyzej). */
@media(max-width:600px){
  .hero-actions{gap:12px;}
  .hero-actions > .btn{width:100%;justify-content:center;}
}

/* ---------- Pola dotyku na telefonie (WCAG 2.2, kryterium 2.5.8) ----------
   Wytyczna wymaga celu 24x24 px. Wyjątek dla linków wewnątrz zdania nas nie
   dotyczy przy samodzielnych akcjach: "Poznaj cały zespół", "Sprawdź w Kompasie",
   adres e-mail i numer telefonu na /kontakt, linki do materiałów prasowych.
   Zmierzone przed poprawką: 16-23 px wysokości, a checkbox zgody RODO w
   formularzu kontaktowym miał 13x16 px, mimo że bez niego nie da się wysłać
   formularza. Powiększamy WYŁĄCZNIE obszar dotyku (inline-flex + min-height),
   krój, kolor i pozycja tekstu zostają bez zmian. Okruszki nawigacyjne celowo
   pomijamy - to linki w wierszu tekstu, objęte wyjątkiem "inline".

   Warunek obejmuje tablety i każdy ekran dotykowy, nie tylko telefony:
   (pointer:coarse) łapie urządzenie sterowane palcem niezależnie od szerokości,
   bo na 768 px problem jest dokładnie ten sam co na 375 px. Na desktopie z
   myszką zostaje ciaśniejszy układ - tam te linki spełniają wyjątek "odstęp"
   (wokół każdego jest z zapasem 24 px wolnej przestrzeni). */
@media(max-width:1024px), (pointer:coarse){
  .info-row a,
  .sec-head a.mono,
  .section-head .mono a,
  .media-strip-links a,
  .apply-step a,
  .asset-meta .mono a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Linki prawne w stopce (18 px wysokosci) i linki nawigacji na tablecie
     w orientacji poziomej, gdzie od 1000 px wraca menu desktopowe (20 px).
     .nav-inner a.mono to powrotny link na stronie 404, ktora ma wlasna,
     uproszczona nawigacje (zasada 23) i nie lapie sie na .nav-links. */
  .footer-social a,
  .nav-inner a.mono,
  /* link autora w pasku artykulu: 137x23 px, brakowalo jednego piksela.
     To nie jest link w zdaniu, tylko samodzielne wskazanie autora (sygnal
     E-E-A-T prowadzacy do strony profilowej), wiec wyjatek "inline" go nie
     obejmuje. */
  .article-meta .who a,
  .nav-links a{display:inline-flex;align-items:center;min-height:24px;}
  .form-consent input[type="checkbox"],
  .fn-consent input[type="checkbox"]{width:24px;height:24px;margin-top:0;flex-shrink:0;}
  .form-consent{align-items:center;}
}

/* ---------- Zaufanie: sam pasek logotypów ----------
   Liczby (przeszkolone osoby, zrealizowane szkolenia) przeniesione do sekcji
   "Liczby, nie obietnice" niżej - tam stoją obok zdjęcia z warsztatu, co
   czyni je bardziej wiarygodnymi niż samotny rządek pod hero. Ten pasek to
   czysty dowód społeczny: KTO nam zaufał, nie ile razy. */
.trust-section{border-bottom:1px solid var(--ink-80);background:var(--black);}

.trust-inner{max-width:var(--container);margin-left:auto;margin-right:auto;}

.trust-logos{display:flex;align-items:center;overflow:hidden;padding-left:0;}

/* .trust-inner (w odroznieniu od .container) nie ma wlasnego padding-left -
   marquee logotypow ma bledowac do prawdziwej krawedzi ekranu, ale to samo
   zerowe padding zostawialo przycisk pauzy (pierwszy element w rzedzie) z
   samym swoim staly 24px, podczas gdy reszta strony od 768px uzywa 48px -
   stad "wychodzenie poza grid". Lewy padding przycisku rosnie teraz razem
   z .container, prawy (przed marquee) zostaje 24px - to juz jest czysto
   dekoracyjny odstep od separatora, nie wyrownanie do kolumny. */
.trust-logos-pause{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:76px;padding:0 24px;border:none;border-right:1px solid var(--ink-80);background:transparent;color:var(--grey-50);font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-label-sm);white-space:nowrap;cursor:pointer;transition:color 200ms var(--ease);}
@media(min-width:768px){.trust-logos-pause{padding-left:48px;}}

@media(max-width:640px){.trust-logos-pause span{display:none;} .trust-logos-pause{padding:0 16px;}}

.trust-logos-pause:hover{color:var(--white);}

.trust-logos-pause:focus-visible{outline:2px solid var(--white);outline-offset:-2px;}

.trust-logos-pause svg{flex-shrink:0;}

.logos-slider-viewport{flex:1 1 auto;position:relative;overflow:hidden;padding-left:24px;mask-image:linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);}

/* Odstep jako margin-right kazdego logotypu, nie gap: przy gap 34 elementy maja
   33 odstepy, wiec -50% w logoScroll konczy sie 32 px przed kopia listy i petla
   przeskakuje. Z marginesem polowa toru to dokladnie jedna kopia. */
.logos-track{display:flex;align-items:center;width:max-content;animation:logoScroll 55s linear infinite;will-change:transform;}

.logos-track.paused{animation-play-state:paused;}

@media(prefers-reduced-motion:reduce){.logos-track{animation-play-state:paused;}}

.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:76px;margin-right:64px;}

/* Logotypy to jednokolorowe SVG (jasny fill, myślane pod ciemne tło) - w trybie
   jasnym filter:invert() zamienia jasny fill na ciemny, więc logo zostaje czytelne
   na jasnym tle bez potrzeby osobnego pliku na każdy motyw. */
.logo-item img{height:34px;width:auto;display:block;opacity:.85;transition:opacity 200ms var(--ease), filter 200ms var(--ease);}

/* Ministerstwo Cyfryzacji ma prawdziwe kolory herbu (czerwień/żółć), nie jednokolorowy
   jasny fill jak reszta - invert() by je zepsuł. Zostaje identyczne w obu motywach. */
[data-theme="light"] .logo-item img:not(.logo-no-invert){filter:invert(1);}

/* Wyjątek w wyjątku: sam napis "Ministerstwo Cyfryzacji" w tym logo był czystą bielą
   bez żadnego konturu, więc na jasnym tle znikał całkowicie (w odróżnieniu od orła,
   który ma ciemne linie konturu i zostaje widoczny na obu tłach). Zamiast invert()
   (zepsułby czerwień/żółć herbu) - dwa pliki, przełączane jak .hero-photo-dark/light:
   ten sam wzorzec co zdjęcia w hero, zero JS. */
.logo-item .ministerstwo-light{display:none;}
[data-theme="light"] .logo-item .ministerstwo-dark{display:none;}
[data-theme="light"] .logo-item .ministerstwo-light{display:block;}

.logo-item:hover img{opacity:1;}

@keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}.sec-head h2 b{font-weight:500;}
/* ---------- Feature blocks ---------- */

.panel{background:var(--ink-90);display:flex;flex-direction:column;min-height:320px;position:relative;}

.gauge-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--ink-80);font-family:var(--mono);font-size:var(--fs-label);}

.gauge-row:last-child{border-bottom:none;}
/* Wskazniki gauge sa na stronie glownej (panel Kompasu) i na 404 (panel diagnostyczny),
   wiec ich reguly musza byc w base.css. Wczesniej lezaly wylacznie w 404.css - efekt:
   na stronie glownej piec pasekow renderowalo sie w rozmiarze 0x0, czyli bylo niewidoczne. */
.gauge-row span:first-child{color:var(--grey-30);}
.gauge-bar{width:38%;height:4px;background:var(--ink-70);position:relative;overflow:hidden;}
.gauge-val{min-width:38px;text-align:right;font-variant-numeric:tabular-nums;}

.gauge-row span{color:var(--grey-30);}@keyframes fill{from{transform:scaleX(0);}}

.module{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-bottom:8px;border:1px solid var(--ink-80);background:rgba(255,255,255,.015);font-family:var(--mono);font-size:var(--fs-label);transition:border-color 200ms var(--ease);}

.module:hover{border-color:var(--grey-50);}

.module b{font-weight:400;color:var(--grey-30);}

.module .ok{color:var(--white);}

.params{font-family:var(--mono);font-size:var(--fs-label);}

.params div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--ink-80);}

.params div:last-child{border-bottom:none;}

.params span:first-child{color:var(--grey-50);}

.params span:last-child{color:var(--white);}

.photo-card{overflow:hidden;}.photo-card .cap{padding:16px 20px;border-top:1px solid var(--ink-80);display:flex;justify-content:space-between;align-items:center;}

.photo-card .cap span{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

/* ---------- Testimonials ---------- */
/* Układ samodopasowujący zamiast progu szerokości. auto-fit dzieli dostępną
   szerokość na tyle kolumn, ile zmieści się przy minimum 260px, a min(100%, 260px)
   gwarantuje, że na wąskim ekranie kolumna nigdy nie jest szersza od kontenera
   (to ten warunek, którego brak powodował poziome przewijanie). Efekt: 1 kolumna
   na telefonie, 3 na rozłożonym ekranie 890 px, 3 na desktopie - bez ani jednego
   progu. Przy takim zapisie nowe urządzenie o nieznanej dziś rozdzielczości nie
   wymaga dopisywania kolejnego media query. */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

.testi{background:var(--black);padding:32px;display:flex;flex-direction:column;justify-content:space-between;min-height:260px;}

.testi .quote{font-size:var(--fs-body);font-weight:400;line-height:1.55;letter-spacing:-.005em;color:var(--grey-30);}

.testi .quote::before{content:"\201E";color:var(--grey-50);}

.testi .quote::after{content:"\201D";color:var(--grey-50);}

.testi .who{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ink-80);}

.testi .avatar{width:36px;height:36px;border:1px solid var(--ink-70);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-30);flex-shrink:0;}

.testi .who div{font-size:var(--fs-body-sm);}

.testi .who b{font-weight:500;display:block;color:var(--white);}

.testi .who span{display:block;margin-top:4px;color:var(--grey-50);font-family:var(--mono);font-size:var(--fs-label-sm);line-height:1.4;text-transform:uppercase;letter-spacing:.06em;}

/* ---------- Split testimonial (styl PI, monochrom) ---------- */
.testi-split{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--ink-80);margin-bottom:20px;overflow:hidden;}

@media(max-width:900px){.testi-split{grid-template-columns:1fr;}}

/* overflow:clip zamiast samego hidden: hidden tworzy kontener przewijania, wiec
   przewiniecie do przycisku "Czytaj cala rekomendacje" moglo przesunac tresc panelu
   o wystajacy znak A (bottom:-56px) i uciac nazwe firmy. hidden zostaje dla starszych przegladarek. */
.ts-panel{padding:44px;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;overflow:hidden;overflow:clip;}

.ts-light{background:var(--white);color:var(--black);}

.ts-dark{background:var(--black);color:var(--white);}

.ts-arcs{position:absolute;right:-24px;bottom:-56px;width:320px;height:320px;opacity:.5;pointer-events:none;}

.ts-light .ts-arcs{opacity:.12;}

.ts-dark .ts-arcs{opacity:.15;}

.ts-panel .quote{font-size:var(--fs-testi-quote);font-weight:400;letter-spacing:-.01em;line-height:1.4;position:relative;z-index:1;max-width:46ch;}

/* Skrot cytatu + rozwiniecie (pole "skrot"): wrapper trzyma cytat i przycisk razem,
   bo panel rozklada dzieci przez space-between. Pelny tekst ma typografie .testi .quote. */
.ts-cytat{position:relative;z-index:1;}

.ts-more{margin-top:20px;}

.ts-more summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;opacity:.7;transition:opacity .2s;}

.ts-more summary::-webkit-details-marker{display:none;}

.ts-more summary::after{content:"+";}

.ts-more[open] summary::after{content:"−";}

.ts-more[open] .ts-more-otworz,.ts-more:not([open]) .ts-more-zwin{display:none;}

@media(hover:hover) and (pointer:fine){.ts-more summary:hover{opacity:1;}}

.ts-full{margin-top:16px;max-width:62ch;font-size:var(--fs-body);font-weight:400;line-height:1.55;letter-spacing:-.005em;}

.ts-full p + p{margin-top:.75em;}

.ts-who{display:flex;align-items:center;gap:14px;margin-top:32px;position:relative;z-index:1;}

.ts-mark{width:38px;height:38px;border:1px solid currentColor;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-label);flex-shrink:0;opacity:.8;}

.ts-who b{display:block;font-size:var(--fs-body-sm);font-weight:500;}

.ts-who span{display:block;margin-top:4px;font-family:var(--mono);font-size:var(--fs-label-sm);line-height:1.4;text-transform:uppercase;letter-spacing:.06em;opacity:.55;}

.ts-company{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;opacity:.55;position:relative;z-index:1;}

.cta .container{position:relative;z-index:2;}

.cta-frame{padding:clamp(40px,6vw,96px) var(--s4);}

.cta h2{max-width:17ch;margin-left:auto;margin-right:auto;margin-bottom:var(--s3);}

.cta .lead{margin-left:auto;margin-right:auto;margin-bottom:var(--s6);}/* ---------- Footer ---------- */
footer{border-top:1px solid var(--ink-80);padding:64px 0 32px;}

/* ---------- Newsletter w stopce ---------- */
/* Uklad otwarty, bez karty: duza typografia + pole podkreslone linia zamiast
   ramki. Gradient na slowie akcentowym idzie ze wspolnego bloku KOLOR nizej
   (selektor .fn-head b jest juz w liscie .sec-head h2 b/.stat-num/...), wiec
   tu zostaje tylko biały fallback dla przegladarek bez background-clip. */
/* padding-top daje sekcji oddech od poprzedniej tresci - bez niego newsletter
   "zlewal sie" z koncem strony i byl niezauwazalny mimo duzej typografii. */
/* Panel newslettera (zmiana 2026-10): otwarty uklad w jednej kolumnie gubil sie
   na stronie, a w trybie ciemnym szare pole na czerni bylo prawie niewidoczne.
   Teraz: wyrazny panel (tlo --ink-90 + hairline), dwie kolumny, pole z ramka
   i prawdziwy przycisk zamiast samej strzalki. Wszystko na zmiennych motywu. */
.footer-newsletter{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px clamp(40px,5vw,96px);align-items:center;
  padding:clamp(28px,4vw,56px);margin-bottom:56px;background:var(--ink-90);border:1px solid var(--ink-80);
}
.fn-label{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.14em;color:var(--grey-50);margin-bottom:18px;}
.fn-copy .fn-sub{margin-bottom:0;}
.footer-newsletter .fn-form{max-width:none;border-bottom:none;padding-bottom:0;gap:8px;}
.footer-newsletter .fn-form input{
  min-height:52px;padding:0 16px;background:var(--black);border:1px solid var(--ink-70);border-radius:var(--r);
  font-size:var(--fs-body);transition:border-color 200ms var(--ease);
}
.footer-newsletter .fn-form input:focus{border-color:var(--white);}
.footer-newsletter .fn-form input:focus:not(:focus-visible){outline:none;}
.footer-newsletter .fn-form:focus-within{border-color:transparent;}
.footer-newsletter .fn-submit{width:auto;height:auto;min-height:52px;padding:0 24px;transform:none;background:var(--white);color:var(--black);border:1px solid var(--white);}
.footer-newsletter .fn-submit:hover{transform:none;}
.footer-newsletter .fn-consent{margin-top:14px;}
@media(max-width:900px){.footer-newsletter{grid-template-columns:1fr;align-items:start;}}
@media(max-width:520px){.footer-newsletter .fn-form{flex-direction:column;align-items:stretch;}.footer-newsletter .fn-submit{justify-content:center;}}

.fn-head{
  font-size:var(--fs-newsletter-h);font-weight:500;line-height:1.04;letter-spacing:-.03em;
  color:var(--grey-50);margin-bottom:14px;max-width:20ch;text-wrap:balance;
}

.fn-head b{color:var(--white);font-weight:500;}

.fn-sub{
  font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--grey-50);margin-bottom:30px;max-width:60ch;
}

/* Linia pod polem to jednoczesnie wskaznik focusa - jasnieje, gdy pole jest aktywne
   (patrz .fn-form:focus-within w bloku KOLOR, tam juz w kolorze akcentu). */
.fn-form{
  display:flex;align-items:center;gap:12px;max-width:520px;
  border-bottom:1px solid var(--ink-70);padding-bottom:14px;
  transition:border-color 200ms var(--ease);
}

.fn-form input{
  flex:1;min-width:0;background:transparent;border:none;padding:0;
  color:var(--white);font-family:var(--mono);font-size:var(--fs-body-sm);letter-spacing:.03em;
}

.fn-form input::placeholder{color:var(--grey-50);text-transform:uppercase;font-size:var(--fs-label);letter-spacing:.1em;}

.fn-submit{
  flex-shrink:0;width:40px;height:40px;background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--grey-30);
  transition:color 200ms var(--ease), transform 200ms var(--ease);
}

.fn-submit:hover{color:var(--white);transform:translateX(4px);}

.fn-consent{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-label);color:var(--grey-50);margin-top:18px;max-width:70ch;}

.fn-consent input{width:15px;height:15px;margin-top:2px;accent-color:var(--white);flex-shrink:0;}

.fn-consent a{color:var(--grey-30);}

@media(max-width:700px){.footer-newsletter{margin-bottom:40px;}}

/* Pole e-mail jest bez tła i bez ramki (linia należy do formularza), więc jego
   wysokość to sama wysokość wiersza tekstu: 18 px. Na desktopie z myszką to
   działa, na telefonie jest za małym celem (WCAG 2.2 wymaga 24 px, wytyczne
   dotykowe mówią o 44 px). Powiększamy SAM obszar dotyku - wygląd zostaje,
   bo pole nadal nie ma własnego tła; odstęp do linii kompensujemy paddingiem
   formularza, żeby wysokość całego wiersza się nie zmieniła. */
@media(max-width:1024px), (pointer:coarse){
  .fn-form{padding-bottom:8px;}
  .fn-form input{min-height:44px;}
  .fn-consent{align-items:center;}
}

.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:64px;}

@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}

.footer-brand p{color:var(--grey-30);font-size:var(--fs-body-sm);max-width:280px;margin-top:16px;}

.footer-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:12px 20px;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--ink-70);border-radius:var(--r);color:var(--white);text-decoration:none;transition:var(--t-ui);}

.footer-cta:hover{border-color:var(--grey-50);background:var(--hover-tint);}

.footer-col h3{font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--grey-50);margin-bottom:16px;}

.footer-col a{display:block;color:var(--grey-30);text-decoration:none;font-size:var(--fs-body-sm);padding:5px 0;transition:color 200ms var(--ease);}

.footer-col a:hover{color:var(--white);}.footer-bottom .left{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}

.footer-bottom span{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

.footer-status{display:flex;align-items:center;gap:8px;}

.footer-status i{width:6px;height:6px;border-radius:50%;background:var(--grey-30);display:inline-block;}

.footer-social{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;}

.footer-social a{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;transition:color 200ms var(--ease);}

.footer-social a:hover{color:var(--white);}

/* ---------- Przełącznik jasny/ciemny motyw ---------- */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--ink-70);border-radius:var(--r);padding:8px 12px;color:var(--grey-50);font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:var(--t-ui);}

.theme-toggle:hover{border-color:var(--grey-50);color:var(--white);}

.theme-toggle .icon-moon{display:none;}

[data-theme="light"] .theme-toggle .icon-sun{display:none;}

[data-theme="light"] .theme-toggle .icon-moon{display:block;}.reveal.visible{opacity:1;transform:none;}

/* ---------- Mobile nav (hamburger + fullscreen overlay) ---------- */
/* 22 px ikona + 11 px odstepu = cel dotykowy 44 px */
.nav-toggle{display:none;background:none;border:none;color:var(--white);cursor:pointer;padding:11px;margin:-11px -11px -11px auto;}

@media(max-width:1000px){.nav-toggle{display:flex;}}

.nav-toggle svg{width:22px;height:22px;}.mobile-nav.open{display:flex;}

.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;}

.mobile-nav-close{background:none;border:1px solid var(--ink-70);border-radius:var(--r);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--grey-30);cursor:pointer;}

.mobile-nav-links{display:flex;flex-direction:column;}

.mobile-nav-links a{font-family:var(--mono);font-size:var(--fs-card-h-lg);text-transform:uppercase;letter-spacing:.06em;color:var(--white);text-decoration:none;padding:20px 0;border-top:1px solid var(--ink-80);}

.mobile-nav-links a:first-child{border-top:none;}@media(max-width:1000px){.nav-inner > .btn-primary{display:none;}}

.mobile-nav-cta{margin-top:32px;width:100%;justify-content:center;}

/* ---------- Logo SVG - dziedziczy kolor tekstu, automatycznie zmienia się z motywem ---------- */
.logo-mark{height:42px;width:auto;display:block;color:inherit;}

.footer-brand .logo-mark{height:55px;}

/* Logo w nav +20% na desktopie (42px -> 50px), na prosbe - mobile/tablet
   (poniewaz nav-links i tak sie chowaja pod hamburger) zostaje bez zmian. */
@media(min-width:1000px){nav .logo-mark{height:50px;}}

/* ---------- Booking widget: floating button ---------- */
.booking-fab{
  /* env(safe-area-inset-*): na iPhone z paskiem gestow przycisk nie laduje na wskazniku Home */
  position:fixed;bottom:calc(28px + env(safe-area-inset-bottom,0px));right:calc(28px + env(safe-area-inset-right,0px));z-index:200;
  display:inline-flex;align-items:center;gap:10px;padding:16px 24px;
  background:var(--white);color:var(--black);border-radius:var(--r);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  border:none;cursor:pointer;box-shadow:var(--shadow-float);
  transition:var(--t-ui-220);
}

.booking-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-float-hover);}

.booking-fab svg{flex-shrink:0;}

@media(max-width:600px){
  .booking-fab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:14px 18px;font-size:var(--fs-label-sm);}
}

/* Warunek jest podwojny, bo problem ma dwa zrodla. Na waskim ekranie przyciski
   hero sa pelnej szerokosci i siegaja pod plywajacy przycisk. Na ekranie NISKIM
   (skladany telefon rozlozony poziomo: 890x626, zlozony poziomo: 678x466) hero
   zajmuje prawie cala wysokosc, wiec jego wlasne CTA konczy sie dokladnie tam,
   gdzie siedzi plywajacy pasek. W obu przypadkach w hero jest juz "Umow rozmowe",
   wiec plywajacy przycisk jest tam zdublowany - pokazuje sie dopiero, gdy hero
   zjedzie z ekranu. Ta sama logika, ktora kazala pominac go na /kontakt, gdzie
   zaslanial formularz. */
@media(max-width:600px), (max-height:700px){
  .booking-fab{transition:opacity 260ms var(--ease),transform 260ms var(--ease),visibility 260ms;}
  /* Kierunek jest odwrocony celowo: domyslnie przycisk JEST widoczny, a klase
     .na-hero nadaje dopiero obserwator, gdy potwierdzi, ze hero jest w kadrze.
     Gdyby JS albo IntersectionObserver zawiodly, zostaje stan dzisiejszy
     (przycisk widoczny) - nigdy odwrotnie, czyli akcja ukryta na zawsze. */
  body.na-hero .booking-fab{opacity:0;visibility:hidden;transform:translateY(10px);}
}

/* ---------- Modal popup ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(5,5,6,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:70px 24px 24px;
}

.modal-overlay.open{display:flex;}

/* Wąski wariant (domyślny): cal.com renderuje układ jednokolumnowy, w którym sam
   ukrywa swój branding. Panel trzymamy poniżej 768px, żeby ten układ był pewny. */
/* #111111 na .modal-panel/.modal-close/.modal-body/.modal-body iframe jest CELOWO
   niezależne od motywu (nie theme-aware) - dopasowuje się do własnego, zawsze
   ciemnego chrome'u embedu cal.com, nie do jasnego/ciemnego motywu strony. */
/* 85dvh, nie 85vh: vh to wysokosc przy SCHOWANYM pasku przegladarki, wiec
   przy widocznym pasku modal wystawal poza ekran razem z przyciskiem
   zamykania. dvh sledzi realnie widoczna wysokosc i przelicza sie sam
   przy skladaniu urzadzenia oraz obrocie. */
.modal-panel{background:#111111;border:1px solid var(--ink-70);border-radius:var(--r);width:100%;max-width:700px;height:85dvh;display:flex;flex-direction:column;position:relative;}

/* Przycisk zamknięcia siedzi NAD panelem, na przyciemnionym tle - wewnątrz
   kadru nachodziłby na przełącznik "12 godz./24 h" cal.com. */
.modal-close{
  position:absolute;top:-54px;right:0;z-index:10;
  width:44px;height:44px;border:1px solid var(--ink-70);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--grey-30);
  background:#111111;cursor:pointer;transition:var(--t-ui);flex-shrink:0;
}

.modal-close:hover{border-color:var(--grey-50);color:var(--white);}

/* Alternatywa dla kalendarza: nad panelem, po lewej, na zawsze ciemnym tle nakladki
   (kolory jak .modal-close, niezalezne od motywu). Na telefonie panel zajmuje caly
   ekran i nie ma na to miejsca - tam "Kontakt" jest w menu. */
.modal-alt{position:absolute;top:-36px;left:0;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;color:#a9a9b6;text-decoration:none;transition:var(--t-ui);}
.modal-alt:hover{color:#f5f5f8;}
@media(max-width:640px){.modal-alt{display:none;}}

.modal-body{flex:1;min-height:0;overflow:hidden;position:relative;background:#111111;border-radius:var(--r);overscroll-behavior:contain;}

.modal-body iframe{width:100%;height:100%;border:none;display:block;background:#111111;}

/* Szeroki wariant: przy ≥888px okna panel ma ≥840px, więc cal.com przełącza się na
   układ dwukolumnowy. Strona cal.com = booker + stopka "Cal.com" (82px), centrowana
   w iframe. Gdy iframe ma wysokość całej strony, booker startuje od samej góry,
   a stopka wypada pod panelem i jest przycięta przez overflow. Wysokość bookera
   zależy od kroku (kalendarz ~480px, formularz ~776px), więc psai.js ustawia ją
   na bieżąco z komunikatu cal.com. Poniżej wartości startowe dla kalendarza. */
@media(min-width:888px){
  .modal-panel{max-width:920px;height:480px;max-height:calc(100dvh - 94px);}
  .modal-body iframe{height:562px;}
}

/* Telefon: modal na pełny ekran, treść przewija się wewnątrz iframe. Nad panelem
   nie ma już miejsca, więc przycisk zamknięcia wraca do środka - w układzie
   jednokolumnowym prawy górny róg cal.com jest pusty, więc nic nie zasłania. */
@media(max-width:640px){
  /* Padding = safe area: na iPhonie z notchem panel zaczyna się PONIŻEJ paska
     statusu, więc przycisk zamknięcia jest klikalny. Na urządzeniach bez notcha
     env() zwraca 0, czyli zachowanie bez zmian. Skrypt dopasowujący czyta
     clientHeight panelu, więc sam z siebie uwzględnia ten margines. */
  .modal-overlay{
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    align-items:stretch;justify-content:stretch;
  }
  .modal-panel{width:100%;max-width:100%;height:100%;border-radius:0;border:none;}
  .modal-body{border-radius:0;}
  .modal-close{top:10px;right:10px;width:44px;height:44px;}
}

.modal-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:var(--fs-label);color:var(--grey-50);text-transform:uppercase;letter-spacing:.1em;
}

.skip-link{position:absolute;top:-100px;left:16px;z-index:1000;background:var(--white);color:var(--black);padding:12px 20px;font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-radius:var(--r);transition:top 200ms var(--ease);}

.skip-link:focus{top:16px;}

/* ---------- Dostępność: focus, redukcja ruchu, dotyk ---------- */
/* Widoczny wskaźnik focusa dla nawigacji klawiaturą. :focus-visible zamiast :focus,
   więc obrys pojawia się przy Tabie, ale nie po kliknięciu myszą. Kolor bierzemy ze
   zmiennej, dzięki czemu działa w obu motywach (w jasnym --white jest ciemne). */
/* Regula :focus-visible jest nizej (obrys w kolorze akcentu). Pola formularzy maja
   outline:none tylko dla fokusu myszą (:focus:not(:focus-visible)), wiec klawiatura
   zawsze dostaje pelny obrys. */
/* Powiększony obszar dotyku i brak 300 ms opóźnienia na mobile. */
a,button,input[type="checkbox"],input[type="radio"],select,textarea,label,summary{touch-action:manipulation;}
/* Podswietlenie tapniecia wylaczone celowo: stan :active (scale .97) jest naszym feedbackiem. */
a,button,label,summary{-webkit-tap-highlight-color:transparent;}

/* Menu mobilne przewija się samo, bez pociągania strony pod spodem. */
.mobile-nav{position:fixed;inset:0;z-index:250;background:var(--black);display:none;flex-direction:column;padding:24px;overflow-y:auto;overscroll-behavior:contain;}

/* Poszanowanie systemowego ustawienia "ogranicz ruch". Kluczowe dla .reveal:
   bez tego każdy blok treści wjeżdża 700 ms animacją. Ustawiamy tu też opacity:1
   i transform:none, żeby treść była widoczna od razu, a nie dopiero po zadziałaniu
   IntersectionObservera. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .logos-track{animation-play-state:paused;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   WARSTWA RUCHU (design-taste)
   Krzywa --ease podniesiona w :root z cubic-bezier(.4,0,.2,1)
   na cubic-bezier(.23,1,.32,1) - mocniejsze wyhamowanie sprawia,
   że ruch startuje natychmiast i "czuć" reakcję interfejsu.
   ============================================================ */
/* --- Przyciski muszą reagować na wciśnięcie. Bez tego interfejs
       sprawia wrażenie martwego pod palcem. 100-160 ms to zakres
       dla feedbacku wciśnięcia. */
.btn,.booking-fab,.fn-submit,.modal-close,.theme-toggle,
.trust-logos-pause,.nav-toggle{
  transition:transform 140ms var(--ease), color 140ms var(--ease),
             border-color 140ms var(--ease), background-color 140ms var(--ease);
}

.btn:active,.booking-fab:active,.fn-submit:active,.modal-close:active,
.theme-toggle:active,.trust-logos-pause:active{
  transform:scale(.97);
}

/* --- Hover nie istnieje na dotyku. Bez tej bariery telefon "przykleja"
       stan hover po tapnięciu i element zostaje przesunięty. */
@media (hover:none),(pointer:coarse){
  .booking-fab:hover{transform:none;}
  .photo-card:hover img{transform:none;}
  .btn-primary:hover{box-shadow:none;}
}

/* --- Cel dotykowy min. 44 px (WCAG 2.5.5). Powiększamy obszar klikalny
       bez zmiany wyglądu, pseudo-elementem. */
@media (pointer:coarse){
  /* male linki i przyciski tekstowe: 44 px wysokosci bez zmiany wygladu */
  a.hm-all,a.on-all,a.kexp-step,.kr-foot button,.of-chip,.theme-toggle{min-height:44px;display:inline-flex;align-items:center;}
  .footer-col a,.footer-social a,.nav-links a{position:relative;}
  .footer-col a::before,.footer-social a::before,.nav-links a::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}

/* --- Kaskada wejścia. Elementy pojawiające się razem wyglądają
       na wysypane; 60 ms odstępu buduje kierunek czytania.
       Zmienną --d ustawia obserwator w skrypcie. */
/* ---------- Wejscia sekcji: tresc widoczna Z ZALOZENIA ----------
   Kierunek zaleznosci jest odwrocony celowo. Wczesniej .reveal startowal z
   opacity:0, a JavaScript musial DODAC klase, zeby tresc sie pokazala -
   czyli widocznosc tresci zalezala od powodzenia skryptu. Kazda awaria po
   drodze (blad JS, brak IntersectionObserver, nietypowe srodowisko, przyszla
   interakcja z pomijaniem renderowania) zostawiala pusta strone.
   Teraz jest odwrotnie: tresc jest widoczna, a JavaScript wlacza jedynie
   ANIMACJE, dodajac .js-reveal na <html>. Gdy czegokolwiek zabraknie,
   uzytkownik traci efekt wejscia - nigdy tresc.
   To ma znaczenie takze dla crawlerow AI: tresc nie zalezy od wykonania JS. */
.reveal{transition:opacity 700ms var(--ease), transform 700ms var(--ease);transition-delay:var(--d,0ms);}
.js-reveal .reveal:not(.visible){opacity:0;transform:translateY(20px);}

/* KOLOR: gradient na duzych napisach i jeden akcent dla drobnicy - jedna definicja
   nizej (sekcja "KOLOR"). Tu animacja gradientu i podkreslenia linkow. */
@keyframes gradDrift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* --- Podkreslenia: cienka kreska wyjezdza od lewej. */
.footer-col a,.nav-links a,.footer-social a{position:relative;}

.footer-col a::after,.nav-links a::after,.footer-social a::after{
  content:"";position:absolute;left:0;bottom:1px;height:1px;width:0;
  background:var(--accent);
  transition:width 220ms var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .footer-col a:hover::after,.nav-links a:hover::after,.footer-social a:hover::after{width:100%;}
}

/* --- Aktywna pozycja menu (aria-current="page" nadaje build, src/lib/nawigacja.js).
       Desktop: biały tekst i stała kreska w gradiencie marki - odróżnia się od kreski
       hover (jednolity akcent). Menu mobilne: kropka w gradiencie za nazwą. */
.nav-links a[aria-current="page"]{color:var(--white);}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--fn-accent);}
.mobile-nav-links a[aria-current="page"]::after{content:"";display:inline-block;width:8px;height:8px;margin-left:14px;border-radius:50%;vertical-align:middle;background:var(--fn-accent);}

/* --- Focus w kolorze akcentu: widoczniejszy niz bialy obrys,
       a nadal spelnia prog kontrastu. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

.fn-form:focus-within{border-color:var(--accent);}

/* --- Karty: nitka na gornej krawedzi, tylko na urzadzeniach z kursorem. */
@media (hover:hover) and (pointer:fine){
  .frame,.photo-card{position:relative;}
  .frame::before,.photo-card::before{
    content:"";position:absolute;top:0;left:50%;height:1px;width:0;
    background-image:var(--fn-accent);
    transition:width 320ms var(--ease), left 320ms var(--ease);
    pointer-events:none;z-index:2;
  }
  .frame:hover::before,.photo-card:hover::before{width:100%;left:0;}
}

/* ============================================================
   SIATKI (design-taste: zakaz trzech identycznych kart)
   Rozroznienie celowe:
   - karty funkcji (01/naglowek/tekst x3) -> uklad asymetryczny
   - listy tresci (artykuly, kursy) -> auto-fit bez breakpointow
   ============================================================ */
/* --- Karty funkcji: pierwszy element dostaje wieksza wage i wysokosc
       dwoch pozostalych. Znika rzad trzech blizniakow, powstaje hierarchia. */
@media(min-width:860px){
  .principles,.mvv-grid{
    grid-template-columns:1.45fr 1fr;
    grid-auto-rows:minmax(0,auto);
  }
  .principles > *:first-child,
  .mvv-grid > *:first-child{
    grid-row:span 2;
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* --- Listy tresci: siatka sama dobiera liczbe kolumn do szerokosci,
       wiec nie ma sztywnych trzech kolumn ani skokow na breakpointach. */
.related-grid,.article-grid,.course-grid,.asset-grid{
  grid-template-columns:repeat(auto-fill,minmax(clamp(260px,26vw,340px),1fr));
}

/* ---------- Liczby, nie obietnice: zdjecie + liczniki ----------
   Zastępuje dawny pasek liczb pod hero. Liczba obok twarzy z warsztatu jest
   bardziej wiarygodna niż samotna liczba w nagłówku - to samo zdjęcie co w
   materiałach o procesie, więc nie dokładamy nowego zasobu. */
.proof{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s8);align-items:center;}

@media(max-width:1000px){.proof{grid-template-columns:1fr;}}
/* Cztery statystyki w swiadomej siatce 2x2 zamiast flex-wrap. Przy flexie suma
   szerokosci (522px) plus odstepy przekraczala prawa kolumne sekcji .proof (617px),
   wiec ostatnia pozycja spadala do drugiego wiersza i uklad wygladal na zepsuty. */

/* Odstep zmniejszony z --s8 na --s6: przy czterech statystykach 64px lamalo
   rzad do ukladu 3+1 w prawej kolumnie sekcji .proof. */
/* Nazwy klientow jako widoczny tekst pod liczbami. Logotypy niosa je tylko w alt,
   a czytelny ciag nazw jest wyciagany zarowno przez czlowieka, jak i przez modele. */

/* Pasek obowiazku prawnego (AI Act) - tresc i CTA obok siebie na szerokim ekranie. */

/* ---------- Framework ADOPT - zajawka na stronie glownej ----------
   Skrocona wersja: same litery i markery, bez dlugich akapitow z podstrony
   /adopt. Litery to prawdziwa sekwencja (A-D-O-P-T), nie ozdobne numerowanie -
   dlatego moga zostac duze i w gradiencie bez konfliktu z zasada anty-eyebrow. */
/* Bez color tutaj: kolor (gradient lub jego fallback) ustawia wczesniejszy
   blok KOLOR - dopisanie go tu ponownie wygralby kolejnoscia w zrodle i
   nadpisalo gradient, co wlasnie sie stalo przy pierwszej probie. */
/* position:relative+inline-block, zeby podkreslnik (pseudo-element) mial
   wzgledem czego sie pozycjonowac i nie lamal ukladu w rzedzie flex. */

/* Ponizej 560px limit 240px zostawial ~90px martwego miejsca po prawej stronie
   kazdej karty (kontener ma wtedy 327px). Na waskim ekranie karta ma wypelnic wiersz. */

/* Ten sam wzorzec co na podstronie /adopt: krotkie zdanie streszczajace
   istote etapu, nie pelny opis - to jest zajawka, nie kopia tresci. */

/* Sygnal = skrocony "marker przejscia" z pelnej wersji /adopt - konkretny,
   obserwowalny znak, ze etap zostal osiagniety, nie ogolnik. */

.container{max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;width:100%;}

/* COFNIETE: proba odseparowania nav-inner od .container (wlasny max-width:1800px)
   psula wyrownanie z kolumna tresci ponizej - w polaczeniu z .nav-links{flex:1}
   (oryginalna regula) dawala przesadna, "krzywo" wygladajaca pusta przestrzen
   przed przyciskiem CTA. Nav wraca do .container - identyczne wyrownanie jak
   reszta strony, bez wlasnego zestawu regul tutaj. */
.nav-inner{gap:var(--s6);display:flex;align-items:center;justify-content:space-between;}

/* Bez background-image: skrot "background" ponizej niego i tak zerowal obrazek,
   wiec gradient nigdy sie nie renderowal - pasek jest jednolicie szary. */
.gauge-bar i{position:absolute;inset:0;background:var(--grey-30);transform-origin:left;animation:fillbar 1.1s var(--ease) both;}

@keyframes fillbar{from{transform:scaleX(0);}}


.nav-links a{transition:color 200ms var(--ease);font-family:var(--mono);font-size:var(--fs-nav-link);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-30);text-decoration:none;}

.nav-links a.active{color:var(--white);}.breadcrumb a{color:var(--grey-50);text-decoration:none;}

.breadcrumb a:hover{color:var(--white);}/* CTA tuż pod leadem - naprawia brak wyraznego wezwania do dzialania na
   stronach pojedynczych szkolen (zamiast tylko na koncu strony). */
.hero-cta-row{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}

/* Pasek szybkich faktow - forma / czas / grupa / dla kogo */
.spec-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px;padding-top:26px;border-top:1px solid var(--ink-80);}

@media(max-width:900px){.spec-bar{grid-template-columns:1fr 1fr;gap:20px;}}

.spec-item{display:flex;flex-direction:column;gap:6px;}

.spec-item .k{font-family:var(--mono);font-size:var(--fs-micro);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

.spec-item .v{font-size:var(--fs-body-sm);color:var(--white);font-weight:500;line-height:1.4;}.article-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* article-body: font-size 17px zostaje jako swiadomy, odrebny "reading size" dla
   dlugiej tresci (typowa praktyka wydawnicza - troche wiekszy niz bazowy body 16px) -
   audyt: max-width 700px daje ~64ch przy tym rozmiarze, w docelowym zakresie 65-75ch.
   line-height obniżone z 1.85 do 1.65 - poza gorna granica wytycznej 1.5-1.6 dla body,
   1.65 to swiadomy kompromis (dluzszy tekst redakcyjny znosi troche wiecej oddechu),
   ale 1.85 bylo realnie za rozlazle. */
.article-body{max-width:680px;width:100%;margin:0 auto;color:var(--grey-30);font-size:var(--fs-body);line-height:1.75;}

.article-body p{margin:0 0 1.25em;}

.article-body h2{color:var(--white);margin:1.6em 0 .5em;scroll-margin-top:110px;}



.article-body strong{color:var(--white);font-weight:500;}

.article-body a{color:var(--white);text-decoration:underline;text-decoration-color:var(--ink-70);text-underline-offset:2px;}

.article-body a:hover{text-decoration-color:var(--grey-30);}

/* Banner CTA w polowie strony - drugi, wyrazny moment konwersji, nie tylko
   na samym dole. To bylo glowna luka zgloszona przez uzytkownika. */
.mid-cta{max-width:700px;margin:16px auto 48px;padding:36px 40px;border:1px solid var(--white);border-radius:var(--r);text-align:center;background:var(--ink-90);}

.mid-cta h3{font-size:var(--fs-card-h-lg);font-weight:500;margin-bottom:10px;}

.mid-cta p{color:var(--grey-30);font-size:var(--fs-body-sm);margin-bottom:22px;max-width:48ch;margin-left:auto;margin-right:auto;}

.mid-cta .btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}.article-cta h3{font-size:var(--fs-card-h-lg);font-weight:500;margin-bottom:10px;}

.article-cta p{color:var(--grey-30);font-size:var(--fs-body-sm);margin-bottom:20px;}

.article-cta .btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.related{max-width:1000px;margin:80px auto 0;}

.related .mono{margin-bottom:20px;display:block;}

.r-card{border:1px solid var(--ink-80);padding:20px;text-decoration:none;color:inherit;display:block;}

.r-card span{font-family:var(--mono);font-size:var(--fs-micro);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

.r-card h4{font-size:var(--fs-card-h);font-weight:500;margin-top:10px;line-height:1.4;}.honest-box li{margin-bottom:10px;color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;}

.adopt-callout{border:1px solid var(--white);padding:24px 28px;margin:32px 0;border-radius:var(--r);display:flex;gap:20px;align-items:flex-start;}

.adopt-callout-icon{flex-shrink:0;width:40px;height:40px;border:1px solid var(--white);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;color:var(--white);}

.adopt-callout .label{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--white);margin-bottom:8px;}

.adopt-callout p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;margin-bottom:0;}.mini-faq .q:first-child{border-top:none;}

.mini-faq h3{font-size:var(--fs-card-h);font-weight:500;margin-bottom:8px;line-height:1.06;color:var(--white);}

.mini-faq p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;margin-bottom:0;}

.footer-bottom{align-items:center;padding-top:24px;border-top:1px solid var(--ink-80);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

/* div.hero (nie header.hero): wariant tekstowy hero bez zdjecia (adopt/oferta/artykuly).
   Musi byc scoped do tagu div - bez tego padding-top wyciekal na header.hero
   (index/kompas), odsuwajac zdjecie od nav o zbedne 148px. */
/* Odstep pionowy naglowka liczy sie z DWOCH wymiarow okna, nie z samej
   szerokosci. Na skladanym ekranie 678x466 stare clamp(96px,11vw,148px)
   dawalo maksymalny odstep dokladnie wtedy, gdy wysokosci brakowalo
   najbardziej: 160 px samej pustej przestrzeni na 466 px ekranu.
   Skladnik svh sprawia, ze odstep kurczy sie razem z wysokoscia okna i
   przelicza sie sam przy skladaniu urzadzenia. Wartosci na desktopie
   (1440x900 i 1920x1080) wychodza identyczne jak wczesniej. */
div.hero{padding:clamp(64px,10svh + 4vw,148px) 0 clamp(44px,7svh + 2.6vw,96px);border-bottom:1px solid var(--rule);}.section{padding:clamp(72px,9vw,132px) 0;border-bottom:1px solid var(--rule);}

.section:last-of-type{border-bottom:none;}

/* Rozbicie monotonii dlugiej strony - co druga sekcja dostaje jasniejszy pas.
   Pomija .mid-cta i .honest-box, ktore juz maja wlasne tlo --ink-90 i zlalyby sie
   z sekcja gdyby ta tez je dostala.
   2026-10-07: w ciemnym motywie pas byl tylko o 8 poziomow jasniejszy od tla
   (#0d0d10 na #050506), a linia podzialu ginela, wiec strony czytaly sie jak
   jedna sciana tekstu. Pas ma teraz token --band, a WEWNATRZ niego linie
   i powierzchnie ida o stopien w gore, zeby karty, tabele i FAQ zachowaly te same
   proporcje co na zwyklym tle. Jasny motyw bez zmian. */
.section-alt{background:var(--band);}
html:not([data-theme="light"]) .section-alt,
html:not([data-theme="light"]) .tr-sec.alt{--ink-90:var(--band);--ink-80:#26262e;--ink-70:#32323c;}/* 5 liter frameworku - oś pionowa */
/* Statystyki rynkowe - duzy, oddychajacy uklad z cienka gradientowa kreska,
   inspirowany referencja Future Mind: mniej elementow, wiecej przestrzeni,
   liczby robia cala robote. */

/* USP - trzy kompetencje */
/* CTA w połowie strony */
.mid-cta-split{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;border:1px solid var(--ink-70);background:var(--ink-90);padding:48px;}

.mid-cta-split h2{margin:10px 0 12px;}

.mid-cta-split p{color:var(--grey-30);font-size:var(--fs-body-sm);max-width:52ch;}

.mid-cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}

@media(max-width:700px){.mid-cta-split{padding:32px;flex-direction:column;align-items:flex-start;}}

/* Dlaczego istnieje - dwie kolumny */
/* Powiązane usługi */
/* Układ samodopasowujący zamiast progu szerokości. auto-fit dzieli dostępną
   szerokość na tyle kolumn, ile zmieści się przy minimum 240px, a min(100%, 240px)
   gwarantuje, że na wąskim ekranie kolumna nigdy nie jest szersza od kontenera
   (to ten warunek, którego brak powodował poziome przewijanie). Efekt: 1 kolumna
   na telefonie, 3 na rozłożonym ekranie 890 px, 3 na desktopie - bez ani jednego
   progu. Przy takim zapisie nowe urządzenie o nieznanej dziś rozdzielczości nie
   wymaga dopisywania kolejnego media query. */
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;}

/* FAQ jako natywny accordion (details/summary) - progresywne ujawnianie
   zamiast czterech w pelni rozwinietych akapitow naraz. */
.mini-faq .q{padding:20px 0;border-top:1px solid var(--ink-80);}

.mini-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 0;cursor:pointer;list-style:none;}

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

.mini-faq summary h3{font-size:var(--fs-card-h);font-weight:500;line-height:1.35;margin:0;}

.mini-faq .q-icon{flex-shrink:0;width:22px;height:22px;border:1px solid var(--ink-70);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--grey-50);transition:transform 240ms var(--ease),border-color 200ms var(--ease);}

.mini-faq .q[open] .q-icon{transform:rotate(45deg);border-color:var(--grey-50);}

.mini-faq .q-body{padding:0 0 22px;color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;max-width:74ch;}

@media(hover:hover) and (pointer:fine){.mini-faq summary:hover h3{color:var(--white);}}

.trademark-note{background:var(--ink-90);border:1px solid var(--ink-80);padding:16px 20px;font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);margin-top:32px;}.sources-block .label{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--grey-50);margin-bottom:16px;}.sources-block ol li{padding-bottom:6px;}

.sources-block a{color:var(--grey-30);text-decoration:underline;text-decoration-color:var(--ink-70);}

.sources-block a:hover{color:var(--white);}
/* ---------- Honest box ---------- */

.honest-box{margin:32px 0;border-radius:var(--r);border:1px solid var(--ink-80);background:var(--ink-90);padding:28px 32px;}

.honest-box .label{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--grey-50);margin-bottom:20px;}

.honest-box ul{margin:0 0 0 20px;padding-left:20px;color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.7;}

.honest-box ul li{padding-bottom:10px;}

.honest-box strong{color:var(--white);font-weight:500;}

/* ---------- Decision table ---------- */
.decision-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.decision-table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm);}

.decision-table th,.decision-table td{border:1px solid var(--ink-80);padding:14px 18px;text-align:left;vertical-align:top;line-height:1.5;}

.decision-table thead th{font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);font-weight:500;background:var(--ink-90);}

.decision-table td{color:var(--grey-30);}

.decision-table td:first-child{color:var(--white);font-weight:500;}

.decision-table tbody tr:hover td{background:var(--hover-tint-soft);}

/* Kolumna "Framework ADOPT™" to nasz wlasny wiersz odniesienia w porownaniu -
   wyrozniona naszym gradientem (--fn-accent, ten sam co na akcentowanym tekscie
   gdzie indziej) zamiast plaskiego tla, zeby oko od razu wiedzialo, ktora
   kolumna czytac jako punkt odniesienia. Tekst na sztywnym #fff (nie var(--white),
   ktore w motywie jasnym staje sie ciemne) - kolorowe tlo potrzebuje jasnego
   tekstu w OBU motywach, to swiadomy wyjatek od reguly "tekst dziedziczy motyw". */
.decision-table th.own,.decision-table td.own{background-image:var(--fn-accent);color:#fff;font-weight:500;}

.decision-table thead th.own{color:#fff;}

@media(max-width:700px){.decision-table th,.decision-table td{padding:10px 12px;font-size:var(--fs-body-sm);}}

/* Triptyk myśl/emocja/zachowanie - zastępuje gęstą tabelę 2x4 czytelniejszym
   podziałem na trzy kolumny, każda ze swoim "co się pojawia" / "jak pracujemy". */
.cbt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:900px){.cbt-grid{grid-template-columns:1fr;}}

.cbt-col{background:var(--black);padding:28px;}

.section-alt .cbt-col{background:var(--ink-90);}

.cbt-col h3{font-size:var(--fs-card-h);font-weight:500;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--ink-80);}

.cbt-block{margin-bottom:22px;}

.cbt-block:last-child{margin-bottom:0;}

.cbt-block .lbl{display:block;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);margin-bottom:8px;}

.cbt-block.how .lbl{color:var(--accent);}

.cbt-block p{font-size:var(--fs-body-sm);color:var(--grey-30);line-height:1.6;}

/* ============================================================
   KOLOR (wariant testowy 3.0)
   Zwezona paleta: fiolet -> blekit -> turkus.
   Gradient rezerwujemy dla kilku momentow o najwyzszej wadze;
   drobne elementy dostaja jeden kolor (--accent), zeby strona
   nie zamienila sie w tapete. Kolor NIE wchodzi na tla.
   Kontrast zweryfikowany: najslabszy odcien 4.93:1 w trybie jasnym.
   ============================================================ */
/* --- Gradient: tylko duze, wazne napisy. Druga czesc kazdego naglowka h1/h2
   zapisana w <b> - na kazdej stronie, bez dopisywania kolejnych kontenerow
   (wczesniej lista .hero/.sec-head/.section-head/.close-block omijala np.
   zamkniecie strony glownej, Transformacje i Kompas). */
:is(h1,h2) > b,
.fn-head b{
  background-image:var(--fn-accent);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:gradDrift 18s ease-in-out infinite;
}

/* Bez wsparcia background-clip tekst bylby przezroczysty, czyli niewidoczny. */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  :is(h1,h2) > b,.fn-head b{color:var(--acc-2);}
}

/* --- Jeden kolor dla drobnicy: linie, wskazniki, akcenty inline. */
.gauge-val,
.footer-col a:hover,
.footer-social a:hover,
.nav-links a:hover{color:var(--accent);}

@media(prefers-reduced-motion:reduce){
  :is(h1,h2) > b,.fn-head b{animation:none;}
}

/* Znak "A" rysowany linia w gradiencie marki, z dwoma echami (partials/znak-a.html):
   hero O nas i Szkolen. Rozmiar i polozenie ustawia kontener na stronie. */
.znak-a{fill:url(#znak-a-grad);fill-opacity:.07;stroke:url(#znak-a-grad);stroke-width:1.6;stroke-linejoin:round;
  animation:znak-a-draw 2400ms cubic-bezier(.65,0,.35,1) both,znak-a-fill 1200ms var(--ease) 2000ms backwards;}
.znak-a-2{animation-delay:300ms,2200ms;}
.znak-a-echo{fill:none;stroke:var(--grey-50);stroke-width:1;stroke-linejoin:round;
  animation:znak-a-fade 1400ms var(--ease) backwards;}
.znak-a-echo-1{stroke-opacity:.35;animation-delay:1500ms;}
.znak-a-echo-2{stroke-opacity:.16;animation-delay:1900ms;}
/* kreska tylko na czas rysowania (pathLength=1); po animacji obrys jest ciagly */
@keyframes znak-a-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1;}to{stroke-dasharray:1 1;stroke-dashoffset:0;}}
@keyframes znak-a-fill{from{fill-opacity:0;}}
@keyframes znak-a-fade{from{opacity:0;}}
@media(prefers-reduced-motion:reduce){.znak-a,.znak-a-echo{animation:none;}}

/* ============================================================
   SIATKI (design-taste: zakaz trzech identycznych kart)
   Rozroznienie celowe:
   - karty funkcji (01/naglowek/tekst x3) -> uklad asymetryczny
   - listy tresci (artykuly, kursy) -> auto-fit bez breakpointow
   ============================================================ */
/* --- Karty funkcji: pierwszy element dostaje wieksza wage i wysokosc
       dwoch pozostalych. Znika rzad trzech blizniakow, powstaje hierarchia. */
@media(min-width:860px){
  .principles,
  .mvv-grid{
    grid-template-columns:1.45fr 1fr;
    grid-auto-rows:minmax(0,auto);
  }
  .principles > *:first-child,
  .mvv-grid > *:first-child{
    grid-row:span 2;
    display:flex;flex-direction:column;justify-content:center;
  }
}

/* ============================================================
   SPECYFIKACJA FRAMEWORKU (produktowy landing page dla ADOPT)
   ============================================================ */
/* scroll-padding-top: przy skoku do kotwicy albo fokusie Tabem cel nie wjezdza pod przyklejone menu.
   scrollbar-gutter: otwarcie modala (overflow:hidden) nie przesuwa ukladu o szerokosc paska przewijania.
   Blokada przewijania pod modalem: klasa psai-lock na <html> (psai.js), na html i body, bo samo
   body{overflow:hidden} nie dziala w Safari na iOS. */
html{transition:background 250ms ease;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:88px;scrollbar-gutter:stable;}

html.psai-lock,html.psai-lock body{overflow:hidden;}

.lead,.article-body p,.tr-body p,.kexp-desc,.q-body p{text-wrap:pretty;}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

.hero[id],.section[id]{scroll-margin-top:88px;}

/* --- Diagram metodologii (SVG animowany) --- */
.diagram-wrap{overflow-x:auto;padding:8px 0 4px;}

.diagram-svg{width:100%;min-width:760px;height:auto;display:block;}

.diagram-caption{margin-top:20px;font-size:var(--fs-body-sm);color:var(--grey-50);max-width:64ch;}

.diagram-line{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1500ms var(--ease);}

.reveal.visible .diagram-line{stroke-dashoffset:0;}

.diagram-node{opacity:0;transform:scale(.82);transform-origin:center;transition:opacity 480ms var(--ease),transform 480ms var(--ease);transition-delay:calc(var(--dn,0) * 130ms + 200ms);}

.reveal.visible .diagram-node{opacity:1;transform:scale(1);}

.diagram-band{opacity:0;transition:opacity 600ms var(--ease);transition-delay:900ms;}

.reveal.visible .diagram-band{opacity:1;}

.diagram-node-circle{fill:var(--black);stroke:var(--ink-70);stroke-width:1.5;}

.diagram-node-t .diagram-node-circle{stroke:var(--acc-3);}

.diagram-node-letter{font-family:var(--mono);font-weight:500;fill:var(--white);text-anchor:middle;dominant-baseline:central;}

/* Wyjatek od tokenow: font-size etykiet SVG jest w jednostkach viewBox rysunku
   (skaluje sie razem z diagramem), nie w px ekranu. */
.diagram-node-label{font-family:var(--sans);font-weight:500;fill:var(--white);text-anchor:middle;font-size:15px;}

.diagram-band-label{font-family:var(--mono);fill:var(--grey-50);text-anchor:middle;font-size:10.5px;}

.diagram-band-title{font-family:var(--mono);fill:var(--grey-50);text-anchor:start;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}

@media(prefers-reduced-motion:reduce){.diagram-line,.diagram-node,.diagram-band{transition:none;}}

/* --- Sposób zastosowania: kroki numerowane --- */
.apply-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:900px){.apply-grid{grid-template-columns:1fr 1fr;}}

@media(max-width:520px){.apply-grid{grid-template-columns:1fr;}}

.apply-step{background:var(--black);padding:28px;display:flex;flex-direction:column;gap:14px;}

.section-alt .apply-step{background:var(--ink-90);}

.apply-step .mono{display:block;}

.apply-step h3{font-size:var(--fs-card-h);font-weight:500;line-height:1.15;}

.apply-step p{font-size:var(--fs-body-sm);color:var(--grey-30);line-height:1.6;}

.apply-step a{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--accent);text-decoration:none;margin-top:auto;padding-top:4px;}

.apply-step a:hover{text-decoration:underline;}

/* --- Przykłady: oś cytatów + scenariusz ilustracyjny --- */
/* ============================================================
   LANDING FRAMEWORKU - warstwa sprzedazowa
   Kazda sekcja ma INNA rodzine ukladu (kontrast / stepper /
   triptyk / os / domkniecie), zeby strona nie czytala sie
   jako jeden ciag akapitow.
   ============================================================ */
/* --- Kontrast: co robi rynek vs co robimy my --- */
.split-claim{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:820px){.split-claim{grid-template-columns:1fr;}}

.claim-side{background:var(--black);padding:clamp(28px,3.4vw,44px);}

.section-alt .claim-side{background:var(--ink-90);}

.claim-side.ours{position:relative;}

.claim-side.ours::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background-image:var(--fn-accent);}

.claim-lbl{display:block;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--grey-50);margin-bottom:22px;}

.claim-side.ours .claim-lbl{color:var(--accent);}

.claim-line{font-size:var(--fs-claim-line);font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--grey-30);padding:14px 0;border-top:1px solid var(--ink-80);}

.claim-line:first-of-type{border-top:none;padding-top:0;}

.claim-side.ours .claim-line{color:var(--white);}

/* --- Stepper etapow: jedna litera na raz, zamiast pieciu akapitow --- */
.stepper-rail{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px);}

.step-btn{
  position:relative;flex:1 1 auto;min-width:104px;background:transparent;cursor:pointer;
  border:1px solid var(--ink-80);border-radius:var(--r);padding:18px 16px 16px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;
  transition:border-color 240ms var(--ease),background 240ms var(--ease);
}

.step-btn .l{font-family:var(--mono);font-size:var(--fs-stat-num-xs);font-weight:500;line-height:1;color:var(--grey-50);transition:color 240ms var(--ease);}

.step-btn .n{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);transition:color 240ms var(--ease);}

.step-btn::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background-image:var(--fn-accent);transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease);}

.step-btn[aria-selected="true"]{background:var(--ink-90);border-color:var(--ink-70);}

.section-alt .step-btn[aria-selected="true"]{background:var(--black);}

.step-btn[aria-selected="true"]::after{transform:scaleX(1);}

.step-btn[aria-selected="true"] .l,.step-btn[aria-selected="true"] .n{color:var(--white);}

@media(hover:hover) and (pointer:fine){.step-btn:hover .l,.step-btn:hover .n{color:var(--white);}}

.step-btn:active{transform:scale(.985);}

.step-panel[hidden]{display:none;}

.step-panel{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,4vw,56px);animation:stepIn 420ms var(--ease);}

@media(max-width:900px){.step-panel{grid-template-columns:1fr;}}

@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

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

.step-claim{font-size:var(--fs-quote-emphasis);font-weight:500;line-height:1.2;letter-spacing:-.02em;margin-bottom:18px;max-width:20ch;text-wrap:balance;}

.step-panel p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.7;max-width:60ch;}

.step-aside{display:flex;flex-direction:column;gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);align-self:start;}

.step-fact{background:var(--black);padding:20px 22px;}

.section-alt .step-fact{background:var(--ink-90);}

.step-fact span{display:block;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--grey-50);margin-bottom:8px;}

.step-fact b{font-size:var(--fs-body-sm);font-weight:500;color:var(--white);line-height:1.5;display:block;}

.step-fact.signal b{color:var(--accent);}

/* --- Triptyk USP: trzy dziedziny, trzy kolory --- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:820px){.trio{grid-template-columns:1fr;}}

.trio-card{background:var(--black);padding:clamp(26px,3vw,36px);position:relative;overflow:hidden;}

.section-alt .trio-card{background:var(--ink-90);}

.trio-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--c);transform:scaleX(.2);transform-origin:left;transition:transform 420ms var(--ease);}

.reveal.visible .trio-card::before{transform:scaleX(1);transition-delay:calc(var(--i,0) * 120ms);}

.trio-card h3{font-size:var(--fs-card-h-lg);font-weight:500;margin-bottom:12px;}

.trio-card .k{display:block;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--c);margin-bottom:20px;}

.trio-card p{font-size:var(--fs-body-sm);color:var(--grey-30);line-height:1.65;}

/* --- Domkniecie strony --- */
.close-block{text-align:center;max-width:64ch;margin:0 auto;}

.close-block h2{margin-bottom:18px;max-width:20ch;margin-left:auto;margin-right:auto;}

.close-block p{color:var(--grey-30);margin:0 auto 32px;max-width:52ch;}

.close-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.article-head{max-width:680px;margin:0 auto;padding:40px 0 32px;text-align:left;}

.article-head h1{margin:16px 0 20px;}

.article-lead{font-size:var(--fs-lead);color:var(--grey-30);max-width:700px;}

.article-meta{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--ink-80);}

/* Awatar autora nie moze sie kurczyc. Bez tego flex sciskal go na waskim
   ekranie do 19x40 px zamiast 40x40 - z kola robil sie elipsa, a pole
   dotyku spadalo ponizej wymaganych 24 px. Wymiary sa w atrybucie style
   w szablonie, ale flex-shrink nie, wiec regula z arkusza dziala. */
.a-avatar{flex-shrink:0;}

.a-avatar{width:40px;height:40px;border:1px solid var(--ink-70);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-label);color:var(--grey-30);}

.article-meta .who b{display:block;font-size:var(--fs-body-sm);font-weight:500;}

.article-meta .who span{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;}

.article-meta .sep{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);color:var(--grey-50);display:flex;gap:20px;}

.article-hero-img{border:1px solid var(--ink-80);aspect-ratio:16/7;margin:0 auto 64px;max-width:1100px;overflow:hidden;background:var(--ink-90);}.pull-quote .stat{font-family:var(--mono);font-size:var(--fs-stat-num);font-weight:500;color:var(--white);letter-spacing:-.02em;line-height:1;display:block;}.pull-quote cite{display:block;margin-top:10px;font-family:var(--mono);font-size:var(--fs-label-sm);font-style:normal;color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;}

.article-body h3{color:var(--white);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:1.4em 0 .45em;}

.article-body h4{color:var(--white);font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:1.4em 0 .4em;}

.article-cta{max-width:680px;margin:64px auto 0;padding:36px;border:1px solid var(--ink-80);text-align:center;}

/* ---------- Źródła - dyskretny blok, nie osobna, ciężka sekcja ---------- */
.sources-block{padding:28px 0 0;border-top:1px solid var(--ink-80);padding-top:20px;}

.sources-block .mono{display:block;margin-bottom:10px;}

.sources-block ol{padding-left:20px;color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.8;list-style:none;padding:0;margin:0;counter-reset:src;}

.sources-block li{counter-increment:src;font-size:var(--fs-body-sm);line-height:1.6;color:var(--grey-30);margin-bottom:6px;padding-left:18px;position:relative;}

.sources-block li::before{content:counter(src) ".";position:absolute;left:0;color:var(--grey-50);font-family:var(--mono);font-size:var(--fs-label);}

.sources-block li.placeholder{color:var(--grey-50);font-style:italic;}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s12);flex-wrap:wrap;padding-top:96px;}

.sec-head h1{max-width:16ch;margin-top:18px;line-height:1.04;}

/* Filtr kategorii - funkcjonalny podgląd struktury, nie tylko dekoracja */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s8);}

.filters button{
  font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;
  padding:10px 18px;border:1px solid var(--ink-70);background:transparent;color:var(--grey-30);
  border-radius:var(--r);cursor:pointer;transition:var(--t-ui);
}

.filters button.active,.filters button:hover{border-color:var(--grey-50);color:var(--white);}
/* karty ukryte filtrem (psai.js) - .a-card ma wlasne display, wiec [hidden] trzeba wymusic */
.article-grid [hidden]{display:none;}

.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 32px;}

@media(max-width:1000px){.article-grid{grid-template-columns:1fr;gap:32px;}}

.a-card{
  border:1px solid var(--ink-80);position:relative;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:border-color 200ms var(--ease);
}

.a-card:hover{border-color:var(--ink-70);}

.a-card .frame-tag{position:absolute;top:-9px;left:20px;background:var(--black);padding:0 10px;font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-50);z-index:2;}

.a-card-thumb{aspect-ratio:16/10;background:var(--ink-90);border-bottom:1px solid var(--ink-80);overflow:hidden;}

.a-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease);}

.a-card:hover .a-card-thumb img{transform:scale(1.05);}

.a-card-body{padding:32px 28px 26px;flex:1;}

.a-card-body h3{margin-bottom:14px;line-height:1.18;font-size:var(--fs-card-h-lg);font-weight:500;letter-spacing:-.01em;}

.a-card-body p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;}

.a-card-meta{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-top:1px solid var(--ink-80);font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;}

/* Featured - pierwszy, wyróżniony artykuł na pełną szerokość */
.a-featured{grid-column:span 3;display:grid;grid-template-columns:1.1fr 1fr;gap:0;margin-bottom:16px;text-decoration:none;color:inherit;border:1px solid var(--ink-80);transition:border-color 200ms var(--ease);}

.a-featured:hover{border-color:var(--ink-70);}

@media(max-width:1000px){.a-featured{grid-column:span 1;grid-template-columns:1fr;}}

.a-featured .a-featured-img{background:var(--ink-90);min-height:360px;overflow:hidden;border-right:1px solid var(--ink-80);}

@media(max-width:1000px){.a-featured .a-featured-img{border-right:none;border-bottom:1px solid var(--ink-80);min-height:260px;}}

.a-featured .a-featured-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease);}

.a-featured:hover .a-featured-img img{transform:scale(1.04);}

.a-featured .a-card-body{padding:52px;display:flex;flex-direction:column;justify-content:center;}

@media(max-width:640px){.a-featured .a-card-body{padding:32px 28px;}}

.a-featured h3{line-height:1.1;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.faq-cat{margin-bottom:48px;}

.faq-cat h2{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--ink-80);}

.faq-item{border:1px solid var(--ink-80);padding:22px 24px;margin-bottom:12px;}.faq-item p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;}

.cta-block{text-align:center;padding:56px 0;border-top:1px solid var(--ink-80);}

.cta-block p{color:var(--grey-30);margin-bottom:20px;}

.frame-tag{z-index:4;position:absolute;top:-9px;left:20px;background:var(--black);padding:0 10px;font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-50);}

.logo span{color:var(--grey-50);}

@media(max-width:1000px){.nav-toggle{display:flex;}.nav-inner > .btn-primary{display:none;}}.hero-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;}

/* ---------- Pull-quote (stat) ---------- */
.pull-quote{border-left:2px solid var(--grey-30);padding:8px 0 8px 28px;margin:48px 0 0;position:relative;}

/* ---------- Pulsująca kropka "live" przy liczniku ---------- */
/* bez tla: turkusowe tlo (pozostalosc z pierwszej wersji) robilo z licznika nieczytelny pasek */
.live-dot{display:inline-flex;align-items:center;gap:12px;margin-top:14px;font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

.live-dot .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--scale-green);flex-shrink:0;}

.live-dot .dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--scale-green);animation:livepulse 2.2s var(--ease) infinite;}

@keyframes livepulse{0%{transform:scale(.4);opacity:.9;}100%{transform:scale(1.6);opacity:0;}}

/* ---------- Interaktywny kompas w perspektywie, po prawej stronie ---------- */
/* Dwie warstwy dla efektu głębi ostrości: rozmyte "tło" (echo kompasu, blur)
   + ostry pierwszy plan (właściwy kompas). Igła podąża za kursorem myszy (JS).
   Sześć znaczników na obwodzie = sześć obszarów diagnozy, kolor jako cienki
   akcent, nie wypełnienie. Zewnętrzny pierścień wolno się obraca (ambient). */

/* ---------- Widmowe cyfry w tle kart obszarów ---------- */

.pull-quote p{color:var(--grey-30);font-size:var(--fs-body);margin-top:10px;max-width:52ch;}.section-head .mono{display:block;margin-bottom:12px;}
/* ---------- Areas grid (6 obszarów, pogrupowane po 2 w 3 warstwy) ---------- */

.faq-item h3{font-weight:500;line-height:1.4;font-size:var(--fs-card-h);margin-bottom:8px;}

/* ---------- Kontakt: dwie kolumny ---------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s8);align-items:start;padding-top:96px;padding-bottom:80px;}

.kontakt-grid > *{min-width:0;}

@media(max-width:900px){.kontakt-grid{grid-template-columns:1fr;gap:var(--s6);}}

.kontakt-info h1{margin:16px 0 16px;line-height:1.06;}

.info-row{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--ink-80);font-size:var(--fs-body-sm);}

.info-row:last-child{border-bottom:1px solid var(--ink-80);}

.info-row b{color:var(--grey-50);font-weight:500;min-width:90px;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;padding-top:1px;}

.info-row span{color:var(--grey-30);}

.info-row a{color:var(--grey-30);text-decoration:none;}

.info-row a:hover{color:var(--white);}

.media-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:36px 0;border-top:1px solid var(--ink-80);}

.media-strip-text{display:flex;align-items:flex-start;gap:20px;max-width:520px;}

.media-strip-icon{flex-shrink:0;width:45px;height:45px;display:flex;align-items:center;justify-content:center;color:var(--grey-30);transition:color 300ms var(--ease);}

.media-strip:hover .media-strip-icon{color:var(--white);}

.media-strip-icon .megaphone-body{transition:transform 300ms var(--ease);}

.media-strip:hover .media-strip-icon .megaphone-body{transform:translateX(-1px);}

.sound-wave{opacity:0;transform:translateX(-3px);transition:opacity 280ms var(--ease), transform 280ms var(--ease);}

.media-strip:hover .sound-wave-1{opacity:1;transform:translateX(0);transition-delay:0ms;}

.media-strip:hover .sound-wave-2{opacity:1;transform:translateX(0);transition-delay:90ms;}

.media-strip:hover .sound-wave-3{opacity:1;transform:translateX(0);transition-delay:180ms;}

.media-strip-text p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;margin-top:6px;}

.media-strip-links{display:flex;gap:28px;flex-wrap:wrap;}

.media-strip-links a{font-family:var(--mono);font-size:var(--fs-label);color:var(--white);text-decoration:none;white-space:nowrap;transition:color 200ms var(--ease);}

.media-strip-links a:hover{color:var(--grey-30);}

/* ---------- Formularz kontaktowy ---------- */
.contact-form{padding:36px;}

.form-row{margin-bottom:20px;}

.form-row label{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--grey-50);margin-bottom:8px;}

.form-row input,.form-row textarea,.form-row select{
  width:100%;background:var(--ink-90);border:1px solid var(--ink-70);border-radius:var(--r);
  padding:13px 14px;color:var(--white);font-family:var(--sans);font-size:var(--fs-body);
  transition:border-color 200ms var(--ease);
}

.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--grey-30);}
.form-row :is(input,textarea,select):focus:not(:focus-visible){outline:none;}

/* Pole wiadomosci rosnie razem z trescia, zamiast zmuszac do przewijania w
   srodku malego okienka. field-sizing:content jest w Baseline od czerwca
   2026; przegladarki, ktore go nie znaja, po prostu zachowuja dotychczasowe
   zachowanie - min-height i resize dzialaja tak samo, wiec nie ma potrzeby
   zadnego zapasowego rozwiazania. max-height pilnuje, zeby na niskim oknie
   (telefon w poziomie, ekran skladany) pole nie wypchnelo przycisku wyslania
   poza kadr. */
.form-row textarea{resize:vertical;min-height:120px;field-sizing:content;max-height:52svh;}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

@media(max-width:520px){.form-row-2{grid-template-columns:1fr;}}

.form-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-label);color:var(--grey-50);margin-bottom:24px;}

.form-consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--white);}

.form-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

.form-note{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);}
/* Formularze zapytan (psai.js -> netlify/functions/zapytanie.mjs). Ukryte pole dla botow
   i komunikat o wyniku wysylki; kolory wyniku z semantycznej skali Kompasu. */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{margin-top:18px;padding:14px 16px;border:1px solid var(--ink-70);border-left-width:1px;font-size:var(--fs-body-sm);line-height:1.55;color:var(--white);}
.form-status.is-ok{border-color:#3ddc7a;}
.form-status.is-blad{border-color:#e5484d;}
.contact-form button[type="submit"][disabled]{opacity:.6;cursor:progress;}.head-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;}/* Boilerplate - do skopiowania */
.copy-block{position:relative;}

.copy-block p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.75;}

.copy-btn{float:right;margin:0 0 12px 16px;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);border:1px solid var(--ink-70);padding:6px 10px;border-radius:var(--r);background:transparent;cursor:pointer;}

.copy-btn:hover{color:var(--white);border-color:var(--grey-50);}

/* Fact sheet */
/* Siatka kafli bez progow: liczba kolumn wynika z dostepnej szerokosci.
   Wzor minmax(max(260px, (100% - 1*1px) / 2), 1fr) robi dwie rzeczy naraz:
   skladnik procentowy USTALA GORNY LIMIT 2 kolumn (tor nie moze byc wezszy niz
   1/2 kontenera, wiec wiecej sie nie zmiesci), a skladnik 260px wymusza mniej
   kolumn, gdy kazda z nich zrobilaby sie za waska. Przejscia sa stopniowe:
   1 -> 2 -> ... -> 2, zamiast przeskoku wymuszonego progiem. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(260px, calc((100% - 1 * 1px) / 2)), 1fr));gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

.fact{background:var(--black);padding:20px 24px;}

.fact .mono{display:block;margin-bottom:6px;}

.fact div{font-size:var(--fs-body-sm);color:var(--white);}

/* Logo / assets grid */
/* Siatka kafli bez progow: liczba kolumn wynika z dostepnej szerokosci.
   Wzor minmax(max(240px, (100% - 2*16px) / 3), 1fr) robi dwie rzeczy naraz:
   skladnik procentowy USTALA GORNY LIMIT 3 kolumn (tor nie moze byc wezszy niz
   1/3 kontenera, wiec wiecej sie nie zmiesci), a skladnik 240px wymusza mniej
   kolumn, gdy kazda z nich zrobilaby sie za waska. Przejscia sa stopniowe:
   1 -> 2 -> ... -> 3, zamiast przeskoku wymuszonego progiem. */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(240px, calc((100% - 2 * 16px) / 3)), 1fr));gap:16px;}

.asset-card{border:1px solid var(--ink-80);}

/* Stałe kolory (nie var(--black)/var(--white)) - te dwa podglądy pokazują kontrast
   logo względem CZARNEGO i BIAŁEGO tła, niezależnie od motywu strony. Gdyby użyć
   zmiennych motywu, w trybie jasnym oba podglądy zamieniłyby się miejscami i oba
   warianty logo stałyby się nieczytelne (jasne-na-jasnym, ciemne-na-ciemnym). */
.asset-preview{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ink-80);}

.asset-preview.dark{background:#050506;}

.asset-preview.light{background:#f5f5f8;}

.asset-preview span{font-family:var(--mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.04em;}

.asset-preview.dark span{color:var(--white);}

.asset-preview.light span{color:var(--black);}

.asset-meta{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;}

.asset-meta span{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;}

.asset-meta a{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--white);text-decoration:none;}

/* Linki "SVG ↓" / "PNG ↓" to pobieranie plików, nie odnośniki w zdaniu, więc
   nie korzystają z wyjątku dla linków w tekście - na telefonie miały 36x18 px.
   Powiększamy pole dotyku do wymaganych 24 px bez zmiany kroju i koloru. */
@media(max-width:1024px), (pointer:coarse){
  .asset-meta a{display:inline-flex;align-items:center;min-height:24px;padding:0 4px;}
  .asset-meta{flex-wrap:wrap;gap:8px;}
}
/* Zdjęcia */
/* Siatka kafli bez progow: liczba kolumn wynika z dostepnej szerokosci.
   Wzor minmax(max(240px, (100% - 2*16px) / 3), 1fr) robi dwie rzeczy naraz:
   skladnik procentowy USTALA GORNY LIMIT 3 kolumn (tor nie moze byc wezszy niz
   1/3 kontenera, wiec wiecej sie nie zmiesci), a skladnik 240px wymusza mniej
   kolumn, gdy kazda z nich zrobilaby sie za waska. Przejscia sa stopniowe:
   1 -> 2 -> ... -> 3, zamiast przeskoku wymuszonego progiem. */

/* height:auto jest tu konieczne, nie ozdobne. Atrybuty width/height na <img>
   mapuja sie na wskazowke prezentacyjna height:<atrybut>px, a przy samym
   width:100% ta wysokosc wygrywa i aspect-ratio przestaje cokolwiek robic.
   Efekt przed poprawka: zdjecie warsztatu na stronie glownej renderowalo sie
   na telefonie jako 325x904 (zamiast 325x244), a zdjecie na /media jako
   327x822 zamiast 327x245 - w obu przypadkach object-fit:cover wycinal z
   fotografii waski, pionowy pasek. */
.photo-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}

.photo-card .asset-meta{border-top:1px solid var(--ink-80);}

/* Kolory / typografia */
.brand-colors{display:flex;flex-wrap:wrap;gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);margin-bottom:24px;}

/* Pięć próbek koloru w jednym rzędzie nie mieści się na telefonie - każda ma
   nieskracalny kod heks. Bez zawijania dawało to 45 px poziomego przewijania
   na /media. Na wąskim ekranie układają się po dwie w rzędzie. */
@media(max-width:600px){.bc{flex:1 1 calc(50% - 1px);min-width:0;padding:16px 12px;}}

.bc{flex:1;padding:20px 16px;background:var(--black);}

.bc b{display:block;width:32px;height:32px;border:1px solid var(--ink-70);margin-bottom:12px;}

.bc span{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);display:block;}
/* Leadership bios */
/* Siatka kafli bez progow: liczba kolumn wynika z dostepnej szerokosci.
   Wzor minmax(max(280px, (100% - 1*16px) / 2), 1fr) robi dwie rzeczy naraz:
   skladnik procentowy USTALA GORNY LIMIT 2 kolumn (tor nie moze byc wezszy niz
   1/2 kontenera, wiec wiecej sie nie zmiesci), a skladnik 280px wymusza mniej
   kolumn, gdy kazda z nich zrobilaby sie za waska. Przejscia sa stopniowe:
   1 -> 2 -> ... -> 2, zamiast przeskoku wymuszonego progiem. */

/* Kontakt prasowy */

/* ---------- Page header ---------- */
/* Ten sam mechanizm co .hero na index.html: prawdziwy <img> w CSS grid z
   object-fit:contain - zdjęcie zawsze mieści się w całości, bez ucinania boków.
   Desktop: grid z aspect-ratio dopasowanym do zdjęcia (1371x638). Mobile: zdjęcie
   po prostu skaluje się do szerokości (aspect-ratio:auto, wysokość sama się ustawia). */
/* Zdjęcie przypięte do góry gridu (object-position:top) - pod nim zostaje pas
   pustej przestrzeni na tekst, który dzięki temu NIE nakłada się na twarze/sylwetki
   (wcześniejsza wersja miała tekst wchodzący prosto w oczy/usta na środku zdjęcia -
   nieczytelne, poprawione sierpień 2026). */
/* "Dark island": hero zawsze ciemny (zdjęcie tonie w czerni), niezależnie od
   motywu jasny/ciemny na reszcie strony - w jasnym motywie biały scrim robił
   z tej fotografii mleczną, rozmazaną plamę. Ta sama technika co .ot-card
   (strony profilowe zespol-*.html): literalne wartości
   koloru zamiast zmiennych motywu. */

@media(max-width:768px){
/* Zdjęcie skaluje się do pełnej szerokości i tyle - tekst NIE nakłada się na nie,
     tylko idzie normalnym blokiem pod spodem (zdjęcie w tych proporcjach jest za
     niskie, żeby zmieścić pod sobą cały tekst nakładką, jak na desktopie). */

/* Nav jest position:fixed (wysokość ~71px) i nachodzi na górę strony - odstęp,
     żeby zdjęcie zaczynało się pod nawigacją, nie pod nią schowane. */

}

.sec-head h2{max-width:18ch;}

.mvv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:900px){.mvv-grid{grid-template-columns:1fr;}}
/* Wariant dwukolumnowy dla kart z dluzszym opisem i wlasnym CTA (oferta wg potrzeb).
   Zwykly .mvv-grid ma trzy kolumny, przy czterech kartach dawalby uklad 3+1. */

/* NAPRAWA konfliktu w design systemie (wrzesien 2026).
   Wyzej w pliku sa dwa bloki @media(min-width:860px), ktore robily z .mvv-grid
   uklad asymetryczny: 2 kolumny + pierwsza karta na `grid-row:span 2`.
   Regula `.mvv-grid{grid-template-columns:repeat(3,1fr)}` powyzej jest pozniej
   w pliku, wiec wygrywa i przywraca 3 rowne kolumny - ale `grid-row:span 2`
   na `:first-child` NIE zostalo cofniete i dalej dzialalo. Efekt: pierwsza karta
   rozciagala sie na dwa wiersze w trzykolumnowej siatce, powstawal pusty drugi
   wiersz (~36px) i karty w rzedzie mialy rozne wysokosci.
   Jesli kiedys wroci swiadomie uklad asymetryczny, usun te regule razem z
   przywroceniem `grid-template-columns:1.45fr 1fr`.
   2026-10-07: ten sam konflikt mialy karty .principles ("Jak pracuje" na profilach
   zespolu, 3 rowne kolumny ustawione nizej w pliku) - pod kartami 2 i 3 widac bylo
   szary pas tla siatki. Naprawa obejmuje teraz obie siatki. */
@media(min-width:860px){
  .mvv-grid > *:first-child,
  .principles > *:first-child{grid-row:auto;justify-content:flex-start;}
}
/* ---------- Duże portrety zespołu - centralny element strony o-nas ---------- */

.mvv{background:var(--black);padding:32px;}
/* Karta z wlasnym CTA (np. trzy sciezki wejscia na stronie glownej). Bez tego
   przycisk idzie zaraz za tekstem, wiec w rzedzie kart o roznej dlugosci opisu
   przyciski ustawiaja sie na roznych wysokosciach. */

.mvv .num{font-family:var(--mono);font-size:var(--fs-label);color:var(--grey-50);}

.mvv h3{margin:14px 0 10px;}

.mvv p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;text-align:center;}

.cta .hero-actions{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;}

.section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:32px;max-width:640px;}

.hero h1{margin:16px 0 20px;max-width:20ch;line-height:1.06;}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink-80);}

.process-step{padding:28px 24px;border-left:1px solid var(--ink-80);text-decoration:none;color:inherit;display:block;transition:background 200ms var(--ease);}

.process-step:first-child{border-left:none;}

.process-step:hover{background:var(--hover-tint-soft);}

.process-step h3{font-size:var(--fs-card-h);margin-bottom:8px;}

.process-step p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;}

@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr;}.process-step{border-left:none;border-top:1px solid var(--ink-80);}.process-step:nth-child(2n){border-left:1px solid var(--ink-80);}.process-step:first-child,.process-step:nth-child(2){border-top:none;}}

@media(max-width:520px){.process-grid{grid-template-columns:1fr;}.process-step{border-left:none !important;}.process-step:first-child{border-top:none;}}

.cat-block{margin-bottom:56px;}

.cat-block:last-child{margin-bottom:0;}

.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px;}

.cat-head h3{font-size:var(--fs-card-h-lg);font-weight:500;color:var(--white);}

.cat-head .count{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.08em;}

.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

@media(max-width:900px){.course-grid{grid-template-columns:1fr 1fr;}}

@media(max-width:640px){.course-grid{grid-template-columns:1fr;}}

.course-tile{
  border:1px solid var(--ink-80);position:relative;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:border-color 200ms var(--ease);
}

.course-tile:hover{border-color:var(--ink-70);}

.course-tile-thumb{aspect-ratio:16/10;background:var(--ink-90);border-bottom:1px solid var(--ink-80);overflow:hidden;}

.course-tile-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease);}

.course-tile:hover .course-tile-thumb img{transform:scale(1.05);}

.course-tile-body{padding:22px 22px 20px;flex:1;}

.course-tile-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}

.course-tag{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);border:1px solid var(--ink-70);border-radius:var(--r);padding:4px 9px;}

.course-tag-adopt{color:var(--white);border-color:var(--grey-50);}

.course-tile-body h4{margin-bottom:10px;line-height:1.22;font-size:var(--fs-card-h);font-weight:500;letter-spacing:-.01em;}

.course-tile-body p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;}

.course-tile-meta{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-top:1px solid var(--ink-80);font-family:var(--mono);font-size:var(--fs-micro);color:var(--grey-50);text-transform:uppercase;letter-spacing:.05em;gap:8px;}

.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;}

@media(max-width:900px){.faq-cols{grid-template-columns:1fr;}}

/* ---------- Treść prawna (polityka prywatności / regulamin) ---------- */
.legal{max-width:760px;margin:0 auto;padding:24px 0 96px;}

.legal-updated{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;margin-bottom:32px;display:block;}

.legal section{margin-bottom:40px;padding-top:32px;border-top:1px solid var(--ink-80);}

.legal section:first-of-type{border-top:none;padding-top:0;}

.legal h2{font-family:var(--sans);font-size:var(--fs-legal-h2);font-weight:500;text-transform:none;letter-spacing:normal;color:var(--white);margin-bottom:16px;}

.legal h3{font-size:var(--fs-card-h);font-weight:500;color:var(--grey-30);margin:20px 0 8px;}

.legal p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.75;margin-bottom:14px;}

.legal ul{margin:8px 0 14px;padding-left:20px;}

.legal li{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.7;margin-bottom:8px;}

.legal a{color:var(--white);text-decoration:underline;text-underline-offset:2px;}

.legal strong{color:var(--white);font-weight:500;}

.breadcrumb{padding:20px 0;margin-top:70px;font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);text-transform:uppercase;letter-spacing:.06em;}
/* ---------- Head: zdjęcie + podstawowe info ---------- */

/* ---------- Statystyki w hero (fakty, nie ozdoba) ---------- */

/* ---------- Filozofia: pull-quote + zasady ---------- */
.philosophy-quote{font-size:var(--fs-quote-emphasis);font-weight:500;line-height:1.25;max-width:20ch;margin-bottom:40px;letter-spacing:-.01em;}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-80);border:1px solid var(--ink-80);}

@media(max-width:700px){.principles{grid-template-columns:1fr;}}

.principle{background:var(--black);padding:28px;}

.principle .num{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--grey-50);display:block;margin-bottom:12px;}

.principle h3{font-size:var(--fs-card-h);font-weight:500;margin-bottom:8px;line-height:1.2;}

.principle p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.6;}

/* ---------- Członkostwa ---------- */
.memberships{display:flex;flex-direction:column;}

.membership-item{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--ink-80);}

.memberships .membership-item:first-child{border-top:none;}

@media(max-width:600px){.membership-item{grid-template-columns:1fr;gap:4px;}}

.membership-item .m-org{font-family:var(--mono);font-size:var(--fs-label);color:var(--white);}

.membership-item .m-org a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-70);text-underline-offset:3px;transition:var(--t-ui);}

.membership-item .m-org a:hover{text-decoration-color:var(--white);}

.membership-item .m-role{font-size:var(--fs-body-sm);color:var(--grey-30);line-height:1.5;}

/* ---------- W mediach ---------- */
.press-item{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--ink-80);padding:24px 0;transition:opacity 200ms var(--ease);}

.press-item:first-child{border-top:none;}

.press-item:hover{opacity:.75;}

.press-outlet{font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);display:block;margin-bottom:8px;}

.press-item h3{font-size:var(--fs-card-h);font-weight:500;margin-bottom:10px;line-height:1.3;}

.press-quote{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;font-style:italic;border-left:2px solid var(--ink-70);padding-left:14px;}

/* ---------- Kompetencje: chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}

.chip{font-family:var(--mono);font-size:var(--fs-label-sm);text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--ink-70);color:var(--grey-30);border-radius:var(--r);}

/* ---------- Sekcje ---------- */
.p-section{padding:56px 0;border-bottom:1px solid var(--rule);}

.p-section:last-of-type{border-bottom:none;}

.p-section > .mono{display:block;margin-bottom:24px;}

/* ---------- CTA ---------- */
.p-cta{text-align:center;padding:64px 0;}

.p-cta h2{margin-bottom:12px;line-height:1.06;}

.p-cta p{color:var(--grey-30);max-width:520px;margin:0 auto 28px;}

/* ---------- Mini-FAQ (widoczne, spięte z FAQPage schema w head) ---------- */
.p-faq{display:flex;flex-direction:column;}

.p-faq-item{border-top:1px solid var(--ink-80);padding:20px 0;}

.p-faq:first-child{border-top:none;}

.p-faq-item h3{font-size:var(--fs-card-h);font-weight:500;margin-bottom:8px;line-height:1.3;}

.p-faq-item p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;}

/* ---------- Inni członkowie ---------- */
.other-team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

@media(max-width:700px){.other-team{grid-template-columns:repeat(2,1fr);}}

/* Na wyraźną prośbę: dół karty zostaje ciemny w OBU motywach, podpis zawsze biały -
   nie konwertować (ten sam wzorzec co "dark island" wyżej). */
.ot-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0d0d10;border:1px solid var(--ink-80);text-decoration:none;color:inherit;display:block;}

.ot-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms var(--ease);}

.ot-card:hover img{transform:scale(1.06);}

.ot-card-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(5,5,6,.92) 0%, rgba(5,5,6,.35) 45%, transparent 70%);}

.ot-card-info{position:absolute;left:0;right:0;bottom:0;padding:16px;}

.ot-card h3{font-size:var(--fs-card-h);font-weight:500;line-height:1.15;color:#f5f5f8;}

.ot-card span{font-family:var(--mono);font-size:var(--fs-micro);color:#a9a9b6;text-transform:uppercase;letter-spacing:.06em;display:block;margin-top:4px;}

.head{padding:96px 0 56px;border-bottom:1px solid var(--rule);}
/* Strona potwierdzenia newslettera (newsletter-potwierdzenie.html): przycisk i komunikat pod leadem. */
.nl-potw{border-bottom:none;}
.nl-potw-akcje{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);}
.nl-potw .btn[hidden]{display:none;}
.nl-potw .form-status{max-width:56ch;}
body:has(.nl-potw) .footer-newsletter{display:none;}

.head h1{margin:16px 0 14px;max-width:14ch;line-height:1.06;}

/* ===== Artykuł: układ do długiego czytania (2026-10) =====
   Kolumna ~70 znaków (Baymard: 50-75), tekst --fs-body / 1.75, nagłówki z bazowej skali h1-h3,
   więcej miejsca nad nagłówkiem niż pod nim, spis treści przy lewej krawędzi od 1200px.
   Szerokości, marginesy i rozmiary tekstu .article-* są w jednym miejscu wyżej (.article-body,
   .article-head, .article-hero-img); tu tylko siatka ze spisem treści. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;}
.article-body > :first-child{margin-top:0;}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.3em;}
.article-body li{margin-bottom:.5em;padding-left:.2em;}
.article-body li::marker{color:var(--grey-50);}
.article-body .pull-quote{margin:2.4em 0;}
/* Tabela w tresci artykulu (np. poradnik: sytuacja zespolu -> szkolenie). Na telefonie wiersz
   staje sie blokiem, bo trzy kolumny w 375 px sa nieczytelne. */
.article-body table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:var(--fs-body-sm);line-height:1.55;}
.article-body th,.article-body td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-top:1px solid var(--ink-80);}
.article-body td:last-child,.article-body th:last-child{padding-right:0;}
.article-body tbody tr:last-child td{border-bottom:1px solid var(--ink-80);}
.article-body thead th{font-family:var(--mono);font-size:var(--fs-label-sm);font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-50);border-top:none;padding-top:0;}
@media(max-width:640px){
  .article-body thead{display:none;}
  .article-body tbody tr{display:block;padding:14px 0;border-top:1px solid var(--ink-80);}
  .article-body tbody tr:last-child{border-bottom:1px solid var(--ink-80);}
  .article-body td{display:block;padding:2px 0;border:none!important;}
  .article-body td[data-label]::before{content:attr(data-label);display:block;margin:8px 0 2px;font-family:var(--mono);
    font-size:var(--fs-label-sm);font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-50);}
}
/* Spis tresci to <nav>, a globalna regula nav{} (menu u gory) dawala mu position:fixed,
   z-index:100, tlo z rozmyciem i padding. Przy przewijaniu lista wjezdzala wtedy na naglowek
   strony (ten sam z-index, dalej w kodzie). Tu zerujemy wszystko, co dziedziczy po menu. */
.article-toc{display:none;position:static;inset:auto;z-index:auto;padding:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;border:0;}
@media(min-width:1200px){
  .article-layout.has-toc{grid-template-columns:1fr minmax(0,680px) 1fr;column-gap:48px;}
  .article-layout.has-toc .article-body{grid-column:2;margin:0;}
  /* max-height + przewijanie: dlugi spis (kilkanascie pytan) miesci sie pod menu zamiast ucinac sie u dolu */
  .article-toc{display:block;grid-column:1;grid-row:1;justify-self:end;width:220px;position:sticky;top:110px;align-self:start;
    max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
  .article-toc .mono{display:block;margin-bottom:14px;}
  .article-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--ink-80);}
  .article-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--grey-50);text-decoration:none;font-size:var(--fs-body-sm);line-height:1.4;}
  .article-toc a:hover,.article-toc a.is-active{color:var(--white);border-left-color:var(--white);}
}
@media(max-width:700px){.article-body{line-height:1.7;}.article-hero-img{margin-bottom:40px;}}
.article-faq{max-width:680px;}
.article-toc-mobile{max-width:680px;width:100%;margin:0 auto 40px;border:1px solid var(--ink-80);}
.article-toc-mobile summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:var(--mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;color:var(--grey-30);display:flex;justify-content:space-between;}
.article-toc-mobile summary::-webkit-details-marker{display:none;}
.article-toc-mobile summary::after{content:"+";}
.article-toc-mobile[open] summary::after{content:"−";}
.article-toc-mobile ol{margin:0;padding:4px 18px 16px 36px;border-top:1px solid var(--ink-80);}
.article-toc-mobile li{padding:6px 0;font-size:var(--fs-body-sm);line-height:1.45;}
.article-toc-mobile li::marker{color:var(--grey-50);font-family:var(--mono);font-size:var(--fs-label-sm);}
.article-toc-mobile a{color:var(--grey-30);text-decoration:none;}
@media(min-width:1200px){.article-toc-mobile{display:none;}}
@media(max-width:700px){
  .article-head{padding:16px 0 24px;}
  .article-meta{flex-wrap:wrap;row-gap:12px;margin-top:24px;padding-top:20px;}
  .article-meta .sep{margin-left:0;width:100%;gap:16px;flex-wrap:wrap;}
  .article-body h2{margin-top:1.4em;}
}
.article-meta .who{display:flex;flex-direction:column;gap:2px;}
.article-faq{margin:64px auto 0;}
.article-faq > .mono{display:block;margin-bottom:8px;}

.deliv{display:grid;gap:0 48px;}

.deliv-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.deliv-item{border-top:1px solid var(--ink-80);padding:24px 0 28px;}
.deliv-num{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--grey-50);letter-spacing:.06em;margin-bottom:14px;}
.deliv-item h3{font-size:var(--fs-card-h-lg);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--white);margin-bottom:10px;}
.deliv-item p{color:var(--grey-30);font-size:var(--fs-body-sm);line-height:1.65;max-width:52ch;}
@media(max-width:900px){.deliv-3{grid-template-columns:1fr;}}

/* Etykieta na karcie ze zdjęciem: karta przycina zawartość (overflow:hidden), więc etykieta
   nie może siedzieć na krawędzi jak w zwykłej ramce - trafia do środka, w lewy górny róg zdjęcia. */
.photo-card > .frame-tag{top:16px;left:16px;padding:4px 10px;}
/* Awatar autora opinii ze zdjęciem: większy, bez ramki, zdjęcie wypełnia kwadrat */
.ts-mark.has-photo,.testi .avatar.has-photo{width:48px;height:48px;padding:0;border:none;opacity:1;overflow:hidden;flex-shrink:0;}
.ts-mark.has-photo img,.testi .avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Tekst rozswietlany przewijaniem ([data-manifest], psai.js) ----------
   Stan przygaszony tylko z klasa .is-scrub, ktora nadaje skrypt; bez JS i przy
   "ogranicz ruch" tekst jest od razu w pelnym kolorze. */
[data-manifest].is-scrub .mw{opacity:.18;transition:opacity 240ms var(--ease);}
[data-manifest].is-scrub .mw.on{opacity:1;}