/* ============================================================
   WOYLD SOLUTIONS — Global Stylesheet
   Corporate, clean, light design (Asseco-inspired)
   Font: Plus Jakarta Sans
   ============================================================ */

/* --- FONTY ---
   Ładowane w <head> każdej strony (preconnect + link) zamiast @import,
   żeby nie blokować renderowania CSS. */

/* --- TOKENY ---------------------------------------------------------
   Nic tu nie jest przypadkowe: kazda wartosc nalezy do jednej rampy
   (kolor, material, promien, cien, rytm, ruch), zeby dalo sie ja obronic.
   -------------------------------------------------------------------- */
:root {
  /* ---- Kolor: role wspólne obu skórkom ----
     Wartości ról (--bg, --fg, --line…) stoją niżej, w blokach skórek.
     Tu zostaje tylko to, co w obu skórkach jest takie samo. */

  /* Tekst na wideo jest biały w OBU skórkach: hero zostaje ciemnym
     wydarzeniem, bo wideo żyje na własnych warunkach. */
  --on-film: #FFFFFF;
  /* Ton pod filmem: tło hero zanim przyjdzie plakat i kolor scrimu. */
  --film: #060606;
  /* Warstwy ratunkowe klipu hero (opis przy .hero--film): jedno źródło dla
     <video> i dla nieruchomego kadru przy reduced-motion. */
  --film-rescue-filter: blur(2px) saturate(.55) contrast(1.08);
  --film-rescue-scale: 1.06;

  /* Wysokość paska nagłówka — hero z filmem odejmuje ją od 100svh,
     żeby wypełnić ekran pod nagłówkiem bez drugiego paska przewijania. */
  --header-h: 4.75rem;

  /* Akcenty ramion — decyzja D1 czeka na właściciela. Do tego czasu
     neutralne (= --fg), żeby nic nie wróciło do starego niebieskiego. */
  --arm-solutions: var(--fg);
  --arm-logistics: var(--fg);
  --arm-label: var(--fg);

  --success: #0F8A4F;

  /* Powierzchnia odwrócona (dawne .bg-dark, .hero-dark; stopka tylko w
     jasnej skórce, przez --footer-* z bloków skórek): bierze
     tokeny przeciwnej roli, więc inwertuje się sama w obu skórkach.
     Tony pomocnicze to domieszka --fg do --bg, nie osobne szarości. */
  --inverse-fg-dim: color-mix(in srgb, var(--bg) 66%, var(--fg));
  /* 55%, nie 46%: niesie mały tekst stopki, a przy 46% w ciemnej skórce
     dawał 3,3:1 (audyt kontrastu, zadanie 9 — próg 4,5:1). */
  --inverse-fg-dimmer: color-mix(in srgb, var(--bg) 55%, var(--fg));
  --inverse-line: color-mix(in srgb, var(--bg) 16%, var(--fg));

  /* Linia pośrednia: obramowanie kontrolki i karty na hover. --line jest
     za słaba na krawędź przycisku, --line-strong to pełny atrament. */
  --line-mid: color-mix(in srgb, var(--fg) 16%, var(--bg));

  /* Aliasy starych nazw — role, tylko pod dawną nazwą. Do wygaszenia,
     gdy komponenty przejdą na nowe klasy (zadania 5+). */
  --ink: var(--fg);
  --ink-secondary: color-mix(in srgb, var(--fg) 80%, var(--bg));
  --muted: var(--fg-dim);
  --light: var(--fg-dimmer);
  --bg-alt: color-mix(in srgb, var(--fg) 6%, var(--bg));

  /* Błąd walidacji formularza — wspólny dla obu skórek, jak --success. */
  --danger: #E5484D;

  /* ---- Material: translucencja niesie hierarchie, nie dekoracje.
         Cienszy material = warstwa interakcyjna, grubszy = strukturalna.
         Cienki materiał to tło strony z przezroczystością, nie biel —
         biel byłaby jasnym paskiem nad ciemną skórką. ---- */
  --mat-thin: color-mix(in srgb, var(--bg) 60%, transparent);
  --mat-thick: var(--chrome);
  --mat-blur: blur(24px) saturate(180%);
  --mat-blur-strong: blur(40px) saturate(190%);

  /* ---- Promienie: jedna rampa zamiast 7px/8px/12px/20px obok siebie ---- */
  --r-xs: .5rem;
  --r-sm: .625rem;
  --r-md: .875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;
  --radius: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-sm: var(--r-sm);

  /* ---- Cien zalezy od powierzchni: wieksza plaszczyzna czyta sie
         jako grubsza, wiec ma glebszy i szerszy cien ---- */
  /* Atrament cienia i tła pod modalem: prawie czerń w obu skórkach.
     Reguły biorą go przez color-mix(… N%, transparent), nie przez rgba(). */
  --shadow-ink: #0B0B0E;
  --shadow-sm: 0 1px .125rem rgba(11,11,14,.05), 0 1px 1px rgba(11,11,14,.04);
  --shadow-md: 0 .125rem .375rem rgba(11,11,14,.05), 0 .625rem 1.75rem rgba(11,11,14,.07);
  --shadow-lg: 0 .25rem .75rem rgba(11,11,14,.06), 0 1.5rem 4rem rgba(11,11,14,.10);
  --shadow-float: 0 .375rem 1rem rgba(11,11,14,.08), 0 2rem 5rem rgba(11,11,14,.16);

  /* ---- Rytm w rem, nie w px: ukladu nie rozsadzi wiekszy tekst systemowy ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-14: 3.5rem; --s-16: 4rem;   --s-18: 4.5rem;
  --s-20: 5rem;   --s-24: 6rem;   --s-28: 7rem;   --s-32: 8rem;

  /* Środkowy człon miesza vw + rem, więc wartość rośnie i z oknem,
     i z czcionką. Samo `9vw` byłoby głuche na powiększony tekst
     (zmierzone: okno 1014px, tekst 200% — wartość nie drgnęła). */
  --pad: clamp(1.375rem, 1.5vw + .75rem, 2.5rem);
  --rhythm: clamp(4.5rem, 5vw + 2rem, 8rem);

  --maxw: 80rem;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Ruch -----------------------------------------------------------
     Krzywe linear() to probkowane sprezyny tlumione, opisane para
     (tlumienie, czas reakcji) zamiast mass/stiffness/damping.
     Tlumienie 1.0 = brak odbicia, domyslne dla UI.
     Tlumienie 0.8 = lekkie przeregulowanie, tylko gdy gest niosl ped.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(.32,.72,0,1);

  /* tlumienie 1.0 / reakcja 0.30 s */
  --spring-fast: linear(0, 0.0238, 0.0816, 0.1582, 0.2431, 0.3294, 0.4129, 0.4909, 0.562, 0.6256, 0.6819, 0.731, 0.7736, 0.8101, 0.8412, 0.8677, 0.89, 0.9088, 0.9246, 0.9377, 0.9487, 0.9578, 0.9653, 0.9716, 0.9767, 0.9809, 0.9844, 0.9873, 0.9896, 0.9916, 0.9931, 0.9944, 0.9955, 0.9963, 0.997, 0.9976, 0.998, 0.9984, 0.9987, 0.999, 1);
  --spring-fast-dur: .45s;

  /* tlumienie 1.0 / reakcja 0.40 s */
  --spring: linear(0, 0.0234, 0.0805, 0.1561, 0.2402, 0.3259, 0.4088, 0.4865, 0.5574, 0.6211, 0.6775, 0.7268, 0.7696, 0.8064, 0.8379, 0.8646, 0.8873, 0.9064, 0.9224, 0.9358, 0.947, 0.9563, 0.964, 0.9705, 0.9758, 0.9801, 0.9837, 0.9867, 0.9891, 0.9911, 0.9928, 0.9941, 0.9952, 0.9961, 0.9968, 0.9974, 0.9979, 0.9983, 0.9986, 0.9989, 1);
  --spring-dur: .595s;

  /* tlumienie 0.8 / reakcja 0.40 s — przeregulowanie ok. 1.5% */
  --spring-bounce: linear(0, 0.0204, 0.0728, 0.1458, 0.2306, 0.3206, 0.4107, 0.4975, 0.5785, 0.6523, 0.7182, 0.7758, 0.8254, 0.8674, 0.9023, 0.9308, 0.9538, 0.9719, 0.9858, 0.9962, 1.0038, 1.009, 1.0124, 1.0143, 1.0151, 1.0151, 1.0145, 1.0135, 1.0123, 1.0109, 1.0096, 1.0082, 1.007, 1.0058, 1.0047, 1.0038, 1.003, 1.0023, 1.0017, 1.0012, 1);
  --spring-bounce-dur: .545s;

  /* tlumienie 0.82 / reakcja 0.34 s — panel wysuwany */
  --spring-sheet: linear(0, 0.0213, 0.0757, 0.1508, 0.2374, 0.3286, 0.4193, 0.5059, 0.5863, 0.659, 0.7235, 0.7796, 0.8277, 0.8681, 0.9017, 0.9291, 0.951, 0.9683, 0.9816, 0.9917, 0.999, 1.0042, 1.0076, 1.0097, 1.0108, 1.0111, 1.0109, 1.0103, 1.0094, 1.0085, 1.0075, 1.0065, 1.0055, 1.0046, 1.0038, 1.0031, 1.0025, 1.0019, 1.0015, 1.0011, 1);
  --spring-sheet-dur: .475s;

  --transition: .22s var(--ease-out);
}

/* --- SKÓRKI ---------------------------------------------------------
   Skórkę wybiera atrybut data-skin na <html>. Poniżej tych dwóch bloków
   nie ma ANI JEDNEGO selektora zależnego od skórki — jeśli jakiś się
   pojawi, znaczy to, że token jest źle nazwany (opisuje kolor zamiast roli).
   -------------------------------------------------------------------- */

/* Jasna: Solutions, Logistics */
:root[data-skin="light"] {
  color-scheme: light;
  --bg: #FFFFFF;      --bg-raise: #FAFAFA;
  --line: #E6E6E8;    --line-strong: #0A0A0A;
  --fg: #0A0A0A;      --fg-dim: #63636B;    --fg-dimmer: #73737B;
  --btn-bg: #0A0A0A;  --btn-fg: #FFFFFF;
  --grain-opacity: .05;
  --chrome: rgba(255,255,255,.92);
  --blur-rgb: 255,255,255;
  --display: var(--font);
  /* Obcy logotyp w kolorze atramentu skórki (znaczek partnera na Label). */
  --logo-ink-filter: brightness(0);
  /* Stopka (R36): w jasnej skórce powierzchnia odwrócona, jak dotąd. */
  --footer-bg: var(--fg);
  --footer-fg: var(--bg);
  --footer-fg-dim: var(--inverse-fg-dim);
  --footer-fg-dimmer: var(--inverse-fg-dimmer);
  --footer-line: var(--inverse-line);
}

/* Ciemna: Label. Krój display to sygnatura Label (decyzja D5): Alte Haas
   Grotesk w nagłówkach, tekst ciągły zostaje w Plus Jakarta Sans. Plik
   kroju ładuje woyld-label.html; bez niego nagłówki spadają na Jakartę. */
:root[data-skin="dark"] {
  color-scheme: dark;
  --bg: #060606;      --bg-raise: #0E0E0E;
  --line: #1E1E1E;    --line-strong: #FFFFFF;
  --fg: #FFFFFF;      --fg-dim: #8A8A8A;    --fg-dimmer: #7B7B7B;
  --btn-bg: #FFFFFF;  --btn-fg: #060606;
  --grain-opacity: .14;
  --chrome: rgba(14,14,14,.90);
  --blur-rgb: 10,10,10;
  --display: 'Alte Haas Grotesk', 'Plus Jakarta Sans', sans-serif;
  --logo-ink-filter: brightness(0) invert(1);
  /* Stopka (R36): odwrócona dałaby biały blok pod ciemną stroną —
     tu to podniesiona powierzchnia ze zwykłym tekstem. */
  --footer-bg: var(--bg-raise);
  --footer-fg: var(--fg);
  --footer-fg-dim: var(--fg-dim);
  --footer-fg-dimmer: var(--fg-dim);
  --footer-line: var(--line);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5.625rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
/* Wczytujemy 300–600; domyślne bold (700) dobrałoby syntetyczne pogrubienie. */
b, strong { font-weight: 600; }

/* --- UTILITY --- */
/* padding-inline, nie skrót `padding`: margines boczny niesie --pad,
   a pion należy do sekcji. Próg 640px zbędny — --pad sam maleje z oknem. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* Link „Przejdź do treści": schowany nad krawędzią, wjeżdża przy fokusie. */
.skip-link {
  position: absolute;
  top: -3.75rem;
  left: var(--s-4);
  z-index: 1000;
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: var(--s-3) var(--s-5);
  font-size: .85rem;
  font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* --- TYPOGRAFIA -----------------------------------------------------
   Tracking jest funkcja stopnia pisma: im wiekszy tekst, tym ciasniej
   (litery przy duzym stopniu optycznie sie rozjezdzaja), im mniejszy,
   tym luzniej. Jedna wartosc letter-spacing dla calej skali jest zawsze
   zla w ktoryms jej koncu. Leading idzie odwrotnie: duzy naglowek ciasno,
   tekst ciagly luzno.
   -------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Krój display ze skórki: w jasnej to Plus Jakarta Sans (= --font), w ciemnej
   Alte Haas Grotesk. h4/h5 to nazwy kart i etykiety — zostają w kroju tekstu. */
h1, h2, h3 { font-family: var(--display); }
/* Wagi lekkie u góry skali: odcisk epoki 2021–23 niosły grube wagi
   (700/800) przy ciasnym trackingu, nie sam krój. Przy 300 cienkie litery
   zlewają się przy zbyt ciasnej interlinii, stąd leading h1 .96, nie .93. */
h1 { font-size: clamp(2.45rem, 5.4vw, 4rem);    font-weight: 400; line-height: .96; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem);   line-height: 1.08; letter-spacing: -.028em; }
h3 { font-size: clamp(1.22rem, 2.1vw, 1.55rem); line-height: 1.22; letter-spacing: -.018em; }
h4 { font-size: 1.06rem;                        line-height: 1.38; letter-spacing: -.006em; }
h5 { font-size: .95rem;                         line-height: 1.4;  letter-spacing: 0; }
h2, h3 { font-weight: 500; }
h4, h5 { font-weight: 600; }

p { text-wrap: pretty; }

/* Link w tekście ciągłym: akcent stał się atramentem, więc kolor już nie
   odróżnia linku od zdania (WCAG 1.4.1). Podkreślenie zamiast koloru —
   tylko w kontenerach treści; nawigacja, przyciski, karty i stopka mają
   własną formę i zostają bez kreski. */
:where(.section, .hero) :where(p, li) a:not(.btn), .cm-body a:not(.btn), .form-consent a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .18s var(--ease-out);
}
:where(.section, .hero) :where(p, li) a:not(.btn):hover, .cm-body a:not(.btn):hover, .form-consent a:hover {
  text-decoration-color: currentColor;
}

/* Drobna nota pod formularzem i potwierdzenie wysyłki: --fg-dim, nie
   --light — --light trzyma tylko próg 4,5:1 (audyt, zadanie 9), --fg-dim
   ma zapas. */
.form-note { font-size: .78rem; color: var(--fg-dim); margin-top: .25rem; }
.form-reply { color: var(--fg-dim); }

/* Etykieta (.lbl w spec §5; klasa .eyebrow zostaje — 89 miejsc wywołania,
   a jej tekst to treść indeksowalna). Maly tekst w wersalikach potrzebuje
   trackingu DODATNIEGO — odwrotnie niz naglowki. Bez kreski i w lżejszej
   wadze: etykieta ma prowadzić, nie konkurować z nagłówkiem. Kolor
   --fg-dim trzyma 4.5:1 przy tym stopniu. */
.eyebrow {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-block;
}
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-secondary);
  line-height: 1.58;
  letter-spacing: -.009em;
  max-width: 62ch;
}

/* --- PRZYCISKI ------------------------------------------------------
   Sprzezenie zwrotne pojawia sie na WCISNIECIU (:active), nie po
   puszczeniu — czekanie na klikniecie czyta sie jako martwy interfejs.
   Hover zmienia material (tlo, cien); dopiero nacisk zmienia geometrie.
   Zadnego unoszenia na hover: przycisk, ktory ucieka spod kursora,
   klamie o swoim polozeniu.
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font);
  font-size: .925rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  padding: .82rem 1.45rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  touch-action: manipulation;              /* kasuje ~300 ms zwloki tapniecia */
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .18s var(--ease-out),
    border-color     .18s var(--ease-out),
    color            .18s var(--ease-out),
    box-shadow       .24s var(--ease-out),
    transform var(--spring-fast-dur) var(--spring-fast);
}
/* Nacisk natychmiastowy; sprezyna wraca dopiero przy puszczeniu */
.btn:active {
  transform: scale(.97);
  transition-duration: .06s;
  transition-timing-function: ease-out;
}
/* Dwa warianty (spec §5): pełny i ghost. Stare nazwy zostają jako aliasy —
   .btn-white i .btn-dark to wariant pełny, .btn-outline to ghost — żeby nie
   ruszać ponad stu miejsc wywołania. Na powierzchni odwróconej wariant pełny
   bierze tokeny przeciwnej roli (reguła niżej), więc „biały" przycisk to
   po prostu pełny przycisk na ciemnym tle. Hover zmienia ton, bez cienia. */
.btn-primary, .btn-white, .btn-dark {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
.btn-primary:hover, .btn-white:hover, .btn-dark:hover {
  background: color-mix(in srgb, var(--btn-bg) 82%, var(--btn-fg));
  border-color: color-mix(in srgb, var(--btn-bg) 82%, var(--btn-fg));
}
.btn--ghost, .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-mid);
}
.btn--ghost:hover, .btn-outline:hover {
  border-color: var(--ink);
  background: var(--bg-raise);
}
:is(.hero-dark, .bg-dark, .cta-banner) :is(.btn-primary, .btn-white, .btn-dark) {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--bg);
}
:is(.hero-dark, .bg-dark, .cta-banner) :is(.btn-primary, .btn-white, .btn-dark):hover {
  background: color-mix(in srgb, var(--bg) 86%, var(--fg));
  border-color: color-mix(in srgb, var(--bg) 86%, var(--fg));
}

.btn .arrow { transition: transform var(--spring-fast-dur) var(--spring-fast); }
.btn:hover .arrow { transform: translateX(.1875rem); }

/* --- HEADER / NAV --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mat-thin);
  backdrop-filter: var(--mat-blur);
  -webkit-backdrop-filter: var(--mat-blur);
}
.site-header .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
}
.logo {
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -.03em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: .375rem;
}
.logo .suffix {
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
}
/* Tylko pozycje paska (`>`), nie linki w panelach — inaczej panel dziedziczył
   padding, zaokrąglenie, nowrap i tło na hover pozycji menu. */
.main-nav > a,
.main-nav .nav-item {
  white-space: nowrap; /* przy braku miejsca nie łamać „Dla firm” na dwie linie */
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-secondary);
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
}
.main-nav > a:hover,
.main-nav .nav-item:hover {
  color: var(--ink);
  background: var(--bg-raise);
}
.main-nav > a.active,
.main-nav .nav-item.active {
  color: var(--fg);
  font-weight: 600;
}
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown .nav-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.nav-dropdown .nav-item::after {
  content: '';
  width: 0;
  height: 0;
  border-left: .25rem solid transparent;
  border-right: .25rem solid transparent;
  border-top: .25rem solid currentColor;
  transition: transform .2s;
}
.nav-dropdown:hover .nav-item::after,
.nav-dropdown:focus-within .nav-item::after { transform: rotate(180deg); }
/* Panele podkategorii (spec §5.1): płaszczyzna, nie kafelek — pełne tło,
   hairline, bez cienia, promienia i ikon. Klasy zostają pod starymi nazwami
   (.dropdown-panel / .mega-panel) — stoją w partialu nagłówka. */
.dropdown-panel {
  position: absolute;
  top: calc(100% + .375rem);
  left: 50%;
  min-width: 15rem;
  transform: translateX(-50%) translateY(-.25rem);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-6);
  opacity: 0;
  visibility: hidden;
  z-index: 50;
}
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Mostek nad panelem: kursor przechodzi przez szczelinę między pozycją menu
   a panelem, nie gubiąc :hover. Ukryty panel (visibility) go nie łapie. */
.dropdown-panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: .5rem;
}
.dropdown-panel a {
  display: block;
  padding: var(--s-2) 0;
  font-size: .84rem;
  font-weight: 400;
  color: var(--fg-dim);
  transition: color .15s var(--ease-out);
}
.dropdown-panel a:hover { color: var(--fg); }

/* Mega-menu „Dla firm": trzy kolumny. Kotwiczone do nagłówka, nie do pozycji
   menu (spec §5.1, pkt 2) — przy absolute wychodziło poza prawą krawędź
   okna 1014px. fixed liczy się od nagłówka (backdrop-filter tworzy blok
   zawierający) albo od okna, gdy materiał jest wyłączony; w obu przypadkach
   top = wysokość nagłówka, bo nagłówek stoi przy górnej krawędzi. */
.mega-panel {
  position: fixed;
  top: var(--header-h);
  left: 50%;
  transform: translateX(-50%) translateY(-.25rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  width: 50rem;
  max-width: calc(100vw - 2 * var(--pad));
  background: var(--bg);
  border: 1px solid var(--line);
  padding: var(--s-6) var(--s-8) var(--s-5);
  opacity: 0;
  visibility: hidden;
  z-index: 50;
}
/* Mostek mega-menu stoi pod pozycją „Dla firm", nie nad panelem: panel ma
   50rem, więc mostek na jego szerokość leżał też pod sąsiednimi pozycjami
   i trzymał panel otwarty, gdy kursor szedł do „Woyld Logistics". Sięga od
   dołu pozycji do dolnej krawędzi nagłówka (pozycja stoi w nim pośrodku,
   % wysokości liczy się od .nav-dropdown) i łapie kursor tylko przy
   otwartym panelu — zamknięty nie powiększa celu najechania. */
.nav-dropdown--mega::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc((var(--header-h) - 100%) / 2 + 1px);
  pointer-events: none;
}
.nav-dropdown--mega:hover::after { pointer-events: auto; }
.nav-dropdown--mega:hover .mega-panel,
.nav-dropdown--mega:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-col { display: flex; flex-direction: column; }
/* Nagłówek kolumny w stylu .lbl. --fg-dim, nie --fg-dimmer: to klikalny
   link, musi trzymać 4.5:1. */
.mega-head {
  margin-bottom: var(--s-2);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .15s var(--ease-out);
}
a.mega-head:hover { color: var(--fg); }
.mega-link {
  display: block;
  padding: var(--s-2) 0;
}
.mega-txt { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.mega-t { font-size: .875rem; font-weight: 500; color: var(--fg); }
.mega-d { font-size: .76rem; font-weight: 400; color: var(--fg-dim); line-height: 1.4; transition: color .15s var(--ease-out); }
.mega-link:hover .mega-d { color: var(--fg); }

/* nagłówki grup w menu mobilnym */
.mobile-nav .mnav-head {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--light);
  padding: 1.125rem 0 .125rem;
  border-bottom: 0;
}
.mobile-nav a.mnav-sub { font-size: 1rem; font-weight: 500; padding-left: .875rem; }

/* Mobile nav */
.hamburger {
  display: none;
  width: 2.75rem;   /* min. 44px — wygodny tap-target */
  height: 2.75rem;
  padding: .75rem .5rem;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  width: 100%;
  height: .125rem;
  background: var(--ink);
  border-radius: .125rem;
  transition: var(--transition);
}
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;                 /* zawsze w drzewie, zeby dalo sie animowac
                                    i zeby gest mogl go zlapac w locie */
  flex-direction: column;
  gap: .125rem;
  background: var(--mat-thick);
  backdrop-filter: var(--mat-blur-strong);
  -webkit-backdrop-filter: var(--mat-blur-strong);
  padding: calc(5.5rem + env(safe-area-inset-top)) 1.75rem calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;           /* pion zostaje przegladarce, poziom bierze gest */
  opacity: 0;
  visibility: hidden;
  /* Wchodzi z prawej — tam, gdzie stoi hamburger — i tam wraca.
     Wejscie i wyjscie ta sama droga. */
  transform: translateX(100%);
  transition:
    opacity .22s var(--ease-out),
    visibility .5s,
    transform var(--spring-sheet-dur) var(--spring-sheet);
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* Podczas ciagniecia palcem panel idzie 1:1 z palcem — zadnej animacji */
.mobile-nav.dragging { transition: none; }

.mobile-nav a {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.012em;
  padding: .9375rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease-out), transform .06s ease-out;
}
.mobile-nav a:active { transform: scale(.985); color: var(--fg); }
.mobile-nav .btn { margin-top: 1.5rem; text-align: center; justify-content: center; }
.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: var(--transition);
}
.mobile-close:hover { background: var(--bg-raise); }

/* Próg 1120px (wcześniej 960px): po dodaniu Woyld Logistics menu ma 6 pozycji
   i potrzebuje ok. 637px. Tuż nad progiem zostaje ok. 60px od logo i 31px do
   przycisku — tyle, ile miało 5-pozycyjne menu przy starym progu (56/27px). */
@media (max-width: 70em) {
  .main-nav, .nav-right .btn { display: none; }
  .hamburger { display: flex; justify-self: end; margin-right: -.5rem; } /* wyrownanie optyczne kresek do krawedzi */
}

/* --- HERO SECTION --- */
.hero {
  padding: clamp(5rem, 12vw, 8.75rem) 0 clamp(3.75rem, 10vw, 7.5rem);
  position: relative;
  overflow: hidden;
}
.hero.hero-dark {
  background: var(--fg);
  color: var(--bg);
}
.hero.hero-dark h1, .hero.hero-dark h2, .hero.hero-dark h3 { color: var(--bg); }
.hero.hero-dark .lead { color: var(--inverse-fg-dim); }
/* Akcent na powierzchni odwróconej: atrament (--fg) zlałby się z tłem,
   więc etykieta i wyróżnienie biorą ton pomocniczy przeciwnej roli. */
.hero.hero-dark .eyebrow,
.hero.hero-dark h1 .accent { color: var(--inverse-fg-dim); }
.hero-dark :is(.btn--ghost, .btn-outline),
.bg-dark :is(.btn--ghost, .btn-outline) {
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 25%, transparent);
}
.hero-dark :is(.btn--ghost, .btn-outline):hover,
.bg-dark :is(.btn--ghost, .btn-outline):hover {
  border-color: var(--bg);
  background: color-mix(in srgb, var(--bg) 8%, transparent);
}
.hero .hero-content { max-width: 45rem; }
.hero .hero-eyebrow { margin-bottom: 1.25rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .accent { color: var(--fg); }
.hero .hero-btns { display: flex; gap: .875rem; margin-top: 2.25rem; flex-wrap: wrap; }
/* Treść nad warstwami filmu (wideo, scrim, ziarno) */
.hero > .wrap { position: relative; z-index: 1; }
/* Hero typograficzne na cały ekran pod nagłówkiem (strona główna). Treść
   na środku w pionie; pod nią gradient ze znaków ASCII reagujący na kursor
   (gradient-ascii.js, montowany w site-effects.js, sekcja 7) — warstwa tła, tekst stoi w miejscu. */
.hero--full {
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  min-height: calc(100lvh - var(--header-h) - 1px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
.hero--full > .wrap { width: 100%; }
.hero--full .gradient-ascii-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Film z panelu (film-loader.js) zastępuje tło ASCII i globus. */
.hero--film :is(.gradient-ascii-canvas, .star-globe-canvas) { display: none; }
/* Powiadomienia o przesyłkach (site-effects.js, sekcja 9): karty wskakują
   od dołu pod globusem, po prawej — lewy dolny róg należy do tekstu hero.
   Kolor z tekstu hero (currentColor), więc karty odwracają się ze skórką. */
.ship-feed {
  position: absolute;
  right: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  /* site-effects.js nadpisuje bottom tak, by dół kart zrównał się z dołem
     .hero-btns; to tylko zapas nad paskiem .gradual-blur, gdyby przycisków nie było */
  bottom: clamp(8rem, 18vh, 11rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .375rem;
  width: 19rem;
  pointer-events: none;
}
.ship-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .4375rem .875rem;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--fg) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .8125rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(1.25rem) scale(.98);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .25, 1.15);
}
.ship-toast.is-in { opacity: 1; transform: none; }
.ship-toast.is-out {
  opacity: 0;
  transform: translateY(-.75rem) scale(.98);
  transition: opacity .35s ease, transform .4s ease;
}
.ship-toast svg { width: 1.25rem; height: 1.25rem; opacity: .85; }
.ship-toast-body { display: flex; flex-direction: column; min-width: 0; }
.ship-toast-body strong { font-weight: 600; }
.ship-toast-body > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ship-toast-route { font-variant-numeric: tabular-nums; letter-spacing: .02em; opacity: .9; }
/* rodzaj transportu w tej samej linii co trasa — karta ma dwie linie, nie trzy */
.ship-toast-mode { opacity: .55; }
.ship-toast-mode::before { content: ' · '; }
.ship-toast time { align-self: start; font-size: .6875rem; opacity: .5; white-space: nowrap; }
.hero--film .ship-feed { display: none; }
/* Globus z gwiazd (Woyld Logistics, star-globe.js): warstwa pod treścią. */
.star-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Płaskie ilustracje „schematy systemów" (.hero-art, brand-art.js) usunięte:
   hero bez wideo jest wyłącznie typograficzne. */

/* --- HERO Z FILMEM (Woyld Label) ---
   Strona główna nie gra filmu z decyzji właściciela; jak go przywrócić,
   opisuje komentarz przy hero w index.html.
   0611-web-hero.mp4 to klip źródłowy przycięty z letterboxu do kadru 4:3
   (720×540) — czarne pasy przy object-fit: cover zjadłyby pół ekranu.
   Na szerokim ekranie to wciąż ok. 2,7× powiększenia, widać kompresję.
   Warstwy ratunkowe: lekkie rozmycie (przy 4:3 wystarczy 2px) i odbarwienie chowają
   artefakty, scale(1.06) chowa rozmyty brzeg, scrim i ziarno robią z obrazu
   tło, a nie temat. Przy materiale poziomym (spec §6.3) blur i scale znikają.
   Nagłówek to zwykły tekst w HTML — renderuje się bez czekania na wideo,
   więc LCP nie zależy od filmu (preload="none"). */
.hero--film {
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px); /* 1px: dolna krawędź nagłówka */
  min-height: calc(100lvh - var(--header-h) - 1px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--film);
  color: var(--on-film);
  isolation: isolate;
}
.hero--film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--film-rescue-filter);
  transform: scale(var(--film-rescue-scale));
}
/* Górny przystanek ≥ .60 (spec §7, wym. 4): próg czytelności nad tonem
   średnim. Dół ciemnieje mocniej, bo tam stoi tekst. */
.hero--film .scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--film) 70%, transparent) 0%,
      color-mix(in srgb, var(--film) 40%, transparent) 38%,
      color-mix(in srgb, var(--film) 88%, transparent) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 20%, color-mix(in srgb, var(--film) 55%, transparent) 100%);
}
.hero--film .grain {
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Tekst na filmie jest biały w OBU skórkach — film to ciemne wydarzenie
   niezależne od skórki, więc nie bierze --fg/--bg. */
.hero--film h1, .hero--film h1 .accent { color: var(--on-film); }
.hero--film .lead { color: color-mix(in srgb, var(--on-film) 78%, transparent); }
.hero--film .eyebrow { color: color-mix(in srgb, var(--on-film) 72%, transparent); }
.hero--film .btn-primary,
.portal-frame.has-media .btn-primary {
  background: var(--on-film);
  border-color: var(--on-film);
  color: var(--film);
}
.hero--film .btn-primary:hover,
.portal-frame.has-media .btn-primary:hover {
  background: color-mix(in srgb, var(--on-film) 84%, transparent);
  border-color: transparent;
}
.hero--film :is(.btn--ghost, .btn-outline) {
  color: var(--on-film);
  border-color: color-mix(in srgb, var(--on-film) 30%, transparent);
}
.hero--film :is(.btn--ghost, .btn-outline):hover {
  border-color: color-mix(in srgb, var(--on-film) 70%, transparent);
  background: color-mix(in srgb, var(--on-film) 8%, transparent);
}
/* Mniej ruchu: wideo znika, zostaje nieruchomy kadr z tymi samymi
   warstwami ratunkowymi (plakat jest częścią <video>, więc znika z nim). */
@media (prefers-reduced-motion: reduce) {
  .hero video { display: none; }
  .hero--film::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--film-poster, url("0611-web-poster.jpg")) center / cover no-repeat;
    filter: var(--film-rescue-filter);
    transform: scale(var(--film-rescue-scale));
  }
}

/* --- HERO W ROGU (Woyld Logistics) ---
   Tekst schodzi do lewego dolnego rogu, węższy i mniejszy — kadr należy do
   obrazu, nie do bloku tekstu. Działa samodzielnie (pełna wysokość ekranu,
   treść przyklejona do dołu) i z filmem (.hero--film): wtedy przyciemnienie
   trzyma się tylko rogu. Górny próg scrimu (≥ .60) chronił przezroczysty
   nagłówek nad filmem; nagłówek jest stałym paskiem, więc tu przyciemniamy
   wyłącznie pod tekstem. Plakat dla reduced-motion podaje strona przez
   --film-poster w atrybucie style sekcji. */
.hero--corner {
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  min-height: calc(100lvh - var(--header-h) - 1px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Róg musi unieść biały tekst także nad najjaśniejszą klatką (mgła, niebo),
   więc ciemnieje mocno, a gaśnie dopiero w połowie kadru. */
.hero--corner .scrim {
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--film) 80%, transparent) 0%, transparent 60%),
    radial-gradient(120% 95% at 0% 100%,
      color-mix(in srgb, var(--film) 90%, transparent) 0%,
      color-mix(in srgb, var(--film) 70%, transparent) 50%,
      transparent 100%);
}
/* Miękki cień pod literami domyka kontrast tam, gdzie gradient już gaśnie
   (górna linia nagłówka nad jasną klatką) — przyciemnia tylko okolicę
   liter, nie kadr. */
.hero--film.hero--corner :is(.eyebrow, h1, .lead) {
  text-shadow: 0 0 1.5rem color-mix(in srgb, var(--film) 65%, transparent),
               0 .0625rem .125rem color-mix(in srgb, var(--film) 50%, transparent);
}
/* W pionowym flexie .wrap z margin:auto kurczy się do treści i staje na
   środku — rozciągamy go, żeby tekst trzymał lewą krawędź siatki. */
.hero--film > .wrap,
.hero--corner > .wrap { width: 100%; }
/* Telefon: hero sięga do dołu ekranu (100lvh), także pod pasek przeglądarki
   (w Safari na iOS pływa nad stroną). Treść ma zostać nad paskiem, więc na
   końcu flexa stoi odstęp o wysokości paska (lvh − svh; na komputerze 0) —
   w .hero--corner unosi tekst o cały pasek, w wyśrodkowanych o połowę. */
:is(.hero--full, .hero--film, .hero--corner)::after {
  content: '';
  flex: none;
  height: calc(100lvh - 100svh);
}
/* Podpis do filmu, nie plakat: blok tekstu ma zająć mniej więcej ćwierć
   wysokości kadru, resztę oddać obrazowi. Selektory .hero.hero--corner
   wygrywają z globalnymi regułami .hero (także z mobilnym rozciąganiem
   przycisków niżej w arkuszu) bez zależności od kolejności. */
/* Jeden odstęp od dołu zamiast dwóch (hero + blok), żeby tekst siedział
   w rogu — ale ponad stałym gradual blur przy dolnej krawędzi ekranu
   (site-effects.css: clamp(3rem, 10vh, 6rem)), inaczej przyciski wpadają
   w rozmycie. Na telefonie blur nie powstaje, ale margines i tak nie razi. */
.hero.hero--corner { padding-bottom: calc(clamp(3rem, 10vh, 6rem) + var(--s-4)); }
.hero.hero--corner .hero-content { max-width: 26rem; }
.hero.hero--corner .hero-eyebrow { margin-bottom: var(--s-3); }
.hero.hero--corner h1 {
  font-size: clamp(1.6rem, .9vw + 1.2rem, 2.25rem);
  line-height: 1.08;
  margin-bottom: var(--s-3);
}
.hero.hero--corner .lead { font-size: .875rem; line-height: 1.55; }
.hero.hero--corner .hero-btns {
  margin-top: var(--s-5);
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
}
.hero.hero--corner .hero-btns .btn {
  width: auto;
  font-size: .8125rem;
  padding: var(--s-2) var(--s-4);
}
/* Kciuk potrzebuje ok. 44px celu — mysz nie, więc tylko na telefonie. */
@media (max-width: 30em) {
  .hero.hero--corner .hero-btns .btn { padding-block: var(--s-3); }
  /* Bez gradual blur nie trzeba zapasu 10vh — tekst schodzi na dół
     i odsłania globus; nad paskiem Safari trzyma go ::after. */
  .hero.hero--corner { padding-bottom: var(--s-4); }
}

/* --- SECTION STRUCTURE --- */
/* Sekcja → sekcja to zmiana tematu, więc niesie --rhythm. padding-block,
   żeby nie wyzerować poziomu, gdyby sekcja dostała też .wrap. */
.section {
  padding-block: var(--rhythm);
}
.section.bg-light { background: var(--bg-raise); }
.section.bg-dark { background: var(--fg); color: var(--bg); }
.section.bg-dark h2, .section.bg-dark h3, .section.bg-dark h4 { color: var(--bg); }
.section.bg-dark .lead { color: var(--inverse-fg-dim); }
.section.bg-dark .eyebrow { color: var(--inverse-fg-dim); }
.section-header {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  max-width: 42.5rem;
}
.section-header.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section-header.center .lead { margin-left: auto; margin-right: auto; }
.section-header .eyebrow { margin-bottom: 1rem; }
.section-header h2 { margin-bottom: 1.125rem; }

/* --- STAT GRID (.figs w spec §5) ---
   Pas liczb rysują wyłącznie linie: pełny atrament u góry, hairline między
   komórkami. Bez ramki, promienia i tła kafla. */
.stat-grid {
  display: grid;
  /* auto-fit w rem: 4 kolumny przy 1280px jak dotąd, ale przy większym
     tekście siatka zawija się sama, zanim kolumny się zgniotą. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line-strong);
}
/* Na powierzchni odwróconej atrament to --bg. */
.stat-grid.dark { border-top-color: var(--bg); }
.stat-cell {
  border-right: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  /* Fallback bez subgrid: para liczba+podpis dosunięta do dołu, żeby podpisy
     nie wisiały na różnych wysokościach, gdy liczby mają różną liczbę linii. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.stat-cell:last-child { border-right: 0; }
.stat-grid.dark .stat-cell { border-color: var(--inverse-line); }
.stat-grid.dark .stat-cell:last-child { border-right: 0; }
.stat-cell .stat-number {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--fg);
  line-height: 1.05;
  text-wrap: balance;
}
.stat-grid.dark .stat-cell .stat-number { color: var(--bg); }
.stat-cell .stat-label {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: .625rem;
  font-weight: 500;
  text-wrap: balance;
}
.stat-grid.dark .stat-cell .stat-label { color: var(--inverse-fg-dim); }

/* Wyrównanie w poprzek komórek: każda komórka dziedziczy dwa wiersze rodzica
   (jeden na liczby, jeden na podpisy), więc wysokości są wspólne dla całego
   pasa. Liczby siadają na dole swojego wiersza, podpisy startują u góry
   swojego — dzięki temu obie linie bazowe zgadzają się niezależnie od tego,
   ile linii zajmuje treść w której komórce. */
@supports (grid-template-rows: subgrid) {
  .stat-cell {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    /* justify-content: flex-end z wersji flex w siatce przesuwał kolumnę
       (liczbę i podpis) do prawej krawędzi komórki. */
    justify-content: normal;
    /* row-gap celowo zerowy (rodzic nie ma gap): odstęp liczba↔podpis
       zostaje na margin-top podpisu. */
  }
  .stat-cell .stat-number { align-self: end; }
  .stat-cell .stat-label  { align-self: start; }
}

/* Zdanie pod pasem: to, czego nie da się uczciwie podać liczbą, nie stoi
   w slocie na liczbę (docs/fakty-woyld.md — żadnych wymyślonych liczb). */
.stat-note {
  margin-top: var(--s-6);
  max-width: 60ch;
  font-size: .95rem;
  color: var(--fg-dim);
}
.section.bg-dark .stat-note { color: var(--inverse-fg-dim); }

@media (max-width: 48em) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* Dwie kolumny: druga komórka w rzędzie zamyka go bez linii, rzędy
     dzieli hairline. */
  .stat-grid .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-grid .stat-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat-grid.dark .stat-cell:nth-child(n+3) { border-top-color: var(--inverse-line); }
}

/* --- SERVICE CARDS --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
  gap: 1.25rem;
}
.service-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  border-color: var(--fg);
  box-shadow: var(--shadow-md);
  transform: translateY(-.1875rem);
}
.service-card .card-icon, .portal-copy .card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  background: var(--bg-raise);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.375rem;
}
.service-card h3 { margin-bottom: .75rem; }
.service-card p {
  color: var(--muted);
  font-size: .95rem;
  flex: 1;
}
.service-card .card-link, .portal-copy .card-link {
  margin-top: 1.375rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  transition: var(--transition);
}
.service-card .card-link:hover { gap: .625rem; }

/* --- SERVICE ROWS (numbered) --- */
.service-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  /* Numer, tytuł, opis. Tagi usunięte (spec §5) — ich frazy przeszły do opisu. */
  grid-template-columns: 5rem minmax(0, 1.2fr) minmax(0, 1.5fr);
  gap: 1.75rem;
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}
.service-row .row-num {
  font-size: .82rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .04em;
}
.service-row h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.service-row p { color: var(--muted); font-size: .95rem; max-width: 50ch; }
/* Link pod opisem, w kolumnie opisu (ostatniej) — także po zwinięciu siatki. */
.service-row > .btn { grid-column: -2; justify-self: start; }
@media (max-width: 53.75em) {
  .service-row {
    grid-template-columns: 3.75rem 1fr;
  }
  .service-row p { grid-column: 2; }
}

/* --- FEATURE CARDS (.card w spec §5) ---
   Jedna siatka: karty leżą na tle --line, a 1px przerwy między nimi to
   linie podziału. Bez cieni, promieni i własnych ramek kart. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature-card {
  padding: 1.625rem;
  background: var(--bg);
  transition: var(--transition);
}
.feature-card:hover { background: var(--bg-raise); }
.feature-card .fc-num {
  font-size: .72rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 1rem;
}
.feature-card h4 { margin-bottom: .5rem; }
.feature-card p { color: var(--muted); font-size: .92rem; }
/* Karta odwrócona: bierze tokeny przeciwnej roli, więc inwertuje się sama
   w obu skórkach — bez osobnej reguły per skórka. Stoi po regułach
   .feature-card, bo ma tę samą specyficzność. */
.card--invert {
  background: var(--fg);
  color: var(--bg);
}
.card--invert:hover { background: color-mix(in srgb, var(--fg) 92%, var(--bg)); }
.card--invert h3, .card--invert h4, .card--invert .fc-num { color: var(--bg); }
.card--invert p { color: var(--inverse-fg-dim); }

/* --- SPLIT SECTION (two columns) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 53.75em) {
  .split { grid-template-columns: 1fr; }
  .split.reverse { direction: ltr; }
}
.split-visual {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--bg-raise) 0%, var(--bg-alt) 100%);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-size: 3rem;
  color: var(--light);
  font-weight: 600;
}
/* Split bez kolumny wizualnej (dawny clipart): jedna kolumna o szerokości
   czytelnej linii zamiast pustej połowy siatki. */
.split--solo { grid-template-columns: minmax(0, 46rem); }

/* --- PROCESS (timeline) --- */
.process-list { border-top: 1px solid var(--line); }
.process-step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.process-step .step-num {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fg);
}
.process-step h3 { margin-bottom: .375rem; }
.process-step p { color: var(--muted); max-width: 60ch; }

/* --- TWO-COL MODEL (Ty/My) --- */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.model-col {
  padding: clamp(2rem, 5vw, 3.25rem);
}
.model-col + .model-col { border-left: 1px solid var(--line); }
.model-col.dark-col {
  background: var(--fg);
  color: var(--bg);
}
.model-col.dark-col h3 { color: var(--bg); }
.model-col .eyebrow { margin-bottom: 1.125rem; }
.model-col h3 { font-size: 1.5rem; margin-bottom: 1.25rem; }
.model-col ul { display: flex; flex-direction: column; gap: .875rem; }
.model-col li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: 1rem;
}
.model-col li::before {
  content: "—";
  color: var(--fg);
  font-weight: 600;
  flex-shrink: 0;
}
.model-col.dark-col li::before { color: var(--inverse-fg-dim); }
.model-col .footnote {
  margin-top: 1.75rem;
  font-size: .82rem;
  color: var(--muted);
}
.model-col.dark-col .footnote { color: var(--inverse-fg-dim); }
@media (max-width: 48em) {
  .model-grid { grid-template-columns: 1fr; }
  .model-col + .model-col { border-left: none; border-top: 1px solid var(--line); }
}

/* --- FAQ --- */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  transition: var(--transition);
}
.faq-list summary:hover { color: var(--fg); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--fg);
  transition: transform .2s;
  flex-shrink: 0;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-answer {
  color: var(--muted);
  padding: 0 0 1.5rem;
  max-width: 68ch;
  font-size: .95rem;
  line-height: 1.65;
}

/* --- TESTIMONIALS --- */
.testimonial-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2.25rem;
  align-items: center;
}
.testimonial-score {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
}
.testimonial-score span { font-size: .35em; color: var(--muted); font-weight: 600; }
.testimonial-cards { display: grid; gap: .875rem; }
.t-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--bg);
}
.t-card p { font-size: 1rem; margin-bottom: 1.125rem; line-height: 1.6; }
.t-card .author { display: flex; align-items: center; gap: .75rem; }
.t-card .avatar {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 600;
}
.t-card .author-name { font-weight: 600; font-size: .95rem; }
.t-card .author-role { font-size: .8rem; color: var(--muted); }
@media (max-width: 48em) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* --- CONTACT / FORM --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.contact-info .pts { display: flex; flex-direction: column; gap: 1.375rem; margin-top: 2rem; }
.contact-info .pt .pt-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg);
  margin-bottom: .25rem;
}
.contact-info .pt p { color: var(--muted); font-size: .95rem; }
.form-stack { display: flex; flex-direction: column; gap: 1rem; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .375rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--fg);
  box-shadow: 0 0 0 .1875rem var(--line);
}

/* Dark form (for dark sections) */
.bg-dark .form-group label { color: var(--inverse-fg-dim); }
.bg-dark .form-group input,
.bg-dark .form-group textarea {
  background: transparent;
  border-color: var(--inverse-line);
  color: var(--bg);
}
.bg-dark .form-group input:focus,
.bg-dark .form-group textarea:focus {
  border-color: var(--bg);
  box-shadow: 0 0 0 .1875rem var(--inverse-line);
}

/* Zgoda pod formularzem (Dołącz, Label): checkbox i zdanie obok. */
.form-consent {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--fg-dim);
}
.form-consent input { margin-top: .1875rem; flex: none; accent-color: var(--fg); }
.bg-dark .form-consent { color: var(--inverse-fg-dim); }
.bg-dark .form-consent input { accent-color: var(--bg); }

@media (max-width: 48em) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* --- CTA BANNER --- */
.cta-banner {
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.cta-banner h2 { color: var(--bg); margin-bottom: 1rem; }
.cta-banner p { color: var(--inverse-fg-dim); font-size: 1.1rem; max-width: 35rem; margin: 0 auto 2rem; }

/* --- CLIENTS / TRUST BAR --- */
.trust-bar {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}
.trust-bar .wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.trust-bar .trust-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.trust-logos {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}
.trust-logos .t-logo {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--light);
  opacity: .65;
  transition: var(--transition);
}
.trust-logos .t-logo:hover { opacity: 1; color: var(--ink); }

/* --- CHECK LIST --- */
.check-list { display: flex; flex-direction: column; gap: .875rem; }
.check-list li {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  font-size: 1rem;
  color: var(--ink-secondary);
}
.check-list li::before {
  content: "✓";
  color: var(--fg);
  font-weight: 600;
  flex-shrink: 0;
}
.bg-dark .check-list li { color: color-mix(in srgb, var(--bg) 80%, var(--fg)); }
.bg-dark .check-list li::before { color: var(--bg); }

/* --- QUOTE BLOCK --- */
.quote-block {
  border-left: .1875rem solid var(--fg);
  padding: 1.75rem 0 1.75rem 2rem;
  margin: 2.5rem 0;
}
.quote-block p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-secondary);
  max-width: 56ch;
}
.quote-block .quote-author {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--muted);
}

/* --- PRICING CARD --- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 1.5rem;
  align-items: start;
}
.pricing-card {
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pricing-card .pc-top {
  background: var(--fg);
  color: var(--bg);
  padding: 2rem;
}
.pricing-card .pc-top .eyebrow { color: var(--inverse-fg-dim); }
.pricing-card .pc-price {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-top: .5rem;
}
.pricing-card .pc-body {
  padding: 2rem;
}
.pricing-card .pc-body ul {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-bottom: 1.75rem;
}
.pricing-card .pc-body li {
  display: flex;
  gap: .75rem;
  font-size: .95rem;
}
.pricing-card .pc-body li::before {
  content: "✓";
  color: var(--success);
  font-weight: 600;
  flex-shrink: 0;
}
.pricing-aside {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--bg-raise);
}
.pricing-aside h3 { margin-bottom: .875rem; }
.pricing-aside p { color: var(--muted); font-size: .95rem; margin-bottom: 1.25rem; }
@media (max-width: 48em) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* --- FOOTER --- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg-dim);
  padding: 4rem 0 2.25rem;
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--footer-line);
}
.footer-brand .logo { color: var(--footer-fg); margin-bottom: .75rem; }
.footer-brand p { font-size: .88rem; max-width: 17.5rem; color: var(--footer-fg-dimmer); }
.footer-col h4 {
  color: var(--footer-fg);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  padding: .3125rem 0;
  font-size: .88rem;
  color: var(--footer-fg-dim);
  transition: var(--transition);
}
.footer-col a:hover { color: var(--footer-fg); }
.footer-legal {
  font-size: .72rem;
  color: var(--footer-fg-dimmer);
  line-height: 1.7;
  padding-top: 1.5rem;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  font-size: .78rem;
}
.footer-bottom a { transition: var(--transition); }
.footer-bottom a:hover { color: var(--footer-fg); }
/* „Ustawienia cookies" (parametr cookie-settings stopki, tylko Label):
   przycisk w formie linku stopki. Stoi tuż za polityką prywatności —
   auto-margines na linku spycha parę do prawej, zamiast rozstawiać trzy
   elementy na całą szerokość. */
.footer-bottom:has(.footer-cookie) > a { margin-left: auto; }
.footer-cookie {
  font: inherit;
  color: inherit;
  transition: var(--transition);
}
.footer-cookie:hover { color: var(--footer-fg); }
.footer-socials {
  display: flex;
  gap: 1rem;
}
.footer-socials a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--footer-line);
  display: grid;
  place-items: center;
  font-size: .8rem;
  transition: var(--transition);
}
.footer-socials a:hover {
  border-color: var(--footer-fg);
  color: var(--footer-fg);
}
@media (max-width: 48em) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 30em) {
  .footer-top { grid-template-columns: 1fr; }
}

/* --- RUCH I SPRZEZENIE ZWROTNE --------------------------------------
   Jedna warstwa ruchu zamiast dwoch nakladajacych sie zestawow regul.
   Zasady: reakcja natychmiastowa, geometria zmienia sie na nacisk,
   material na hover, a kazdy ruch idzie po sprezynie, nie po stalym
   czasie trwania.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Wejscie strony musi byc krotkie — kazda milisekunda tutaj to czas,
     w ktorym uzytkownik patrzy na pusty ekran. */
  body { animation: bodyIn .3s ease-out both; }
  @keyframes bodyIn { from { opacity: 0; } to { opacity: 1; } }

  /* Odsloniecie przy scrollu */
  .fade-up, .fade-scale, .fade-left, .fade-right {
    opacity: 0;
    transition:
      opacity .45s var(--ease-out),
      transform var(--spring-dur) var(--spring);
    transition-delay: calc(var(--i, 0) * 55ms);
    will-change: transform, opacity;
  }
  .fade-up    { transform: translateY(1.375rem); }
  .fade-scale { transform: scale(.97); }
  .fade-left  { transform: translateX(-1.5rem); }
  .fade-right { transform: translateX(1.5rem); }
  .fade-up.visible, .fade-scale.visible,
  .fade-left.visible, .fade-right.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Hero: kaskada konczy sie ponizej 0.8 s, nie po 1.2 s */
  .hero .eyebrow   { opacity: 0; animation: heroIn .5s var(--ease-out) .04s both; }
  .hero h1         { opacity: 0; animation: heroIn .55s var(--ease-out) .1s both; }
  .hero .lead      { opacity: 0; animation: heroIn .5s var(--ease-out) .17s both; }
  .hero .hero-btns { opacity: 0; animation: heroIn .5s var(--ease-out) .24s both; }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(.875rem); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-scale, .fade-left, .fade-right { opacity: 1; transform: none; }
  .hero .eyebrow, .hero h1, .hero .lead, .hero .hero-btns { opacity: 1; animation: none; }
}

/* --- POWIERZCHNIE KLIKALNE ------------------------------------------
   Karta jest przyciskiem, wiec zachowuje sie jak przycisk: material
   reaguje na hover, geometria na nacisk.
   -------------------------------------------------------------------- */
.service-card, .feature-card, .t-card, .career-card, .news-card {
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color .2s var(--ease-out),
    box-shadow   .26s var(--ease-out),
    background-color .2s var(--ease-out),
    transform var(--spring-fast-dur) var(--spring-fast);
}
.service-card:hover, .career-card:hover, .news-card:hover {
  border-color: var(--line-mid);
  box-shadow: var(--shadow-md);
}
.t-card:hover { box-shadow: var(--shadow-md); }

a.service-card:active, a.career-card:active,
a.news-card:active, .feature-card:active {
  transform: scale(.988);
  transition-duration: .06s;
  transition-timing-function: ease-out;
}

.service-card .card-link, .portal-copy .card-link {
  transition: gap var(--spring-fast-dur) var(--spring-fast), color .18s var(--ease-out);
}
.service-card:hover .card-link { gap: .625rem; }

/* Wiersz usługi: linia podziału stoi w miejscu, a hover to wyłącznie
   transform + opacity — zero zmian układu, więc kolumny nigdy nie skaczą.
   Tło wchodzi przenikaniem, numer i tytuł przesuwają się sprężyną
   (krytycznie tłumioną, bez odbicia — hover nie niesie pędu). */
.service-row { position: relative; isolation: isolate; }
.service-row::before {
  content: '';
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  opacity: 0;
  transition: opacity .2s var(--ease-out);
  pointer-events: none;
}
.service-row .row-num,
.service-row h3 { transition: transform var(--spring-fast-dur) var(--spring-fast); }
.service-row:hover::before { opacity: 1; }
.service-row:hover .row-num,
.service-row:hover h3 { transform: translateX(.375rem); }
/* Odpowiedź już na wciśnięciu, nie dopiero po puszczeniu */
.service-row:active::before { background: color-mix(in srgb, var(--fg) 7%, transparent); transition-duration: .06s; }

.stat-cell { transition: color .2s var(--ease-out); }
.stat-cell:hover .stat-number { color: var(--ink); }
.stat-grid.dark .stat-cell:hover .stat-number { color: var(--inverse-fg-dim); }

.process-step { transition: background-color .2s var(--ease-out); }

/* --- NAGLOWEK: material, nie belka ----------------------------------
   Chrome pojawia sie dopiero wtedy, gdy tresc pod nia wjezdza — i jest
   zamknieta miekka krawedzia, nie kreska 1 px.
   -------------------------------------------------------------------- */
.site-header {
  background: var(--mat-thin);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}
.site-header.scrolled {
  background: var(--mat-thick);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--shadow-ink) 5%, transparent),
    0 .75rem 2rem -1.5rem color-mix(in srgb, var(--shadow-ink) 45%, transparent);
}
.main-nav > a, .main-nav .nav-item {
  -webkit-tap-highlight-color: transparent;
  transition: color .16s var(--ease-out), background-color .16s var(--ease-out);
}

/* Panel menu wchodzi krótkim zjazdem i przenikaniem — płaszczyzna, nie
   materiał, więc bez rozmycia i skali. visibility .2s daje kursorowi chwilę
   na przejście szczeliny pod pozycją menu. */
.dropdown-panel, .mega-panel {
  transition:
    opacity .2s var(--ease-out),
    visibility .2s,
    transform var(--spring-fast-dur) var(--spring-fast);
}

/* --- LINKI W STOPCE --- */
.footer-col a {
  position: relative;
  transition: color .18s var(--ease-out);
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.125rem;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .28s var(--ease-out);
}
.footer-col a:hover::after { width: 100%; }


/* --- FAQ --- */
.faq-list details { overflow: hidden; }
.faq-list summary {
  -webkit-tap-highlight-color: transparent;
  transition: color .18s var(--ease-out);
}
.faq-list summary::after {
  transition: transform var(--spring-fast-dur) var(--spring-fast);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }

/* --- FOCUS --- */
:focus-visible {
  outline: .125rem solid var(--fg);
  outline-offset: .1875rem;
}

/* ============================================================
   RESPONSYWNOŚĆ MOBILNA — doszlifowanie
   ============================================================ */

/* Efekty hover tylko na urządzeniach z myszą/trackpadem —
   na dotyku eliminują "lepkie" stany po tapnięciu */
@media (hover: none) {
  .btn:hover,
  .service-card:hover,
  .feature-card:hover,
  .t-card:hover,
  .stat-cell:hover,
  .cta-banner:hover,
  .split:hover .split-visual { transform: none; box-shadow: none; }
  .service-row:hover, .process-step:hover { padding-left: 0; }
}

@media (max-width: 48em) {
  html { scroll-padding-top: 5.25rem; }
  .section { padding-block: 3.5rem; }
  .section-header { margin-bottom: 2.25rem; }
  /* wizualizacje dekoracyjne nie powinny dominować ekranu */
  .split-visual { aspect-ratio: auto; height: 12.5rem; }
  .split { gap: 1.75rem; }
  .quote-block { padding: 1.25rem 0 1.25rem 1.25rem; margin: 1.5rem 0; }
}

@media (max-width: 30em) {
  /* przyciski hero i CTA na pełną szerokość — łatwiejsze tapnięcie */
  .hero .hero-btns { flex-direction: column; align-items: stretch; }
  .hero .hero-btns .btn,
  .cta-banner .btn { width: 100%; justify-content: center; }
  /* statystyki w jednej kolumnie zamiast ciasnych dwóch */
  .stat-grid { grid-template-columns: 1fr; }
  .stat-cell { display: flex; align-items: baseline; gap: .875rem; }
  .stat-cell .stat-label { margin-top: 0; }
  /* węższe kolumny numerów w listach */
  .process-step { grid-template-columns: 3rem 1fr; gap: 1rem; }
  .service-row { grid-template-columns: 2.75rem 1fr; gap: 1rem; }
  .service-row p { grid-column: 2; }
  .footer-top { gap: 2rem; }
}

/* ============================================================
   KARIERA — siatka ofert, karty, modal
   ============================================================ */
.careers-loading {
  color: var(--muted);
  text-align: center;
  padding: 2.5rem 0;
}
.careers-grid {
  display: grid;
  gap: .875rem;
}
.career-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.career-card:hover {
  border-color: var(--fg);
  box-shadow: 0 .625rem 1.875rem color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  transform: translateY(-.125rem);
}
.cc-thumb {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: .875rem;
  flex: none;
  background: var(--bg-raise) center/cover no-repeat;
  display: grid;
  place-items: center;
}
.cc-letter {
  color: var(--fg);
  font-weight: 600;
  font-size: 1.5rem;
}
.cc-main { flex: 1; min-width: 0; }
.cc-main h3 { font-size: 1.18rem; margin: 0 0 .25rem; }
.cc-main p { color: var(--muted); margin: 0 0 .625rem; font-size: .95rem; }
.cc-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
/* Metadane ofert i aktualności (dział, miejsce, forma, data, kategoria):
   zwykły tekst rozdzielony kropką, nie pigułki — spec §5 usuwa .tag. */
.meta { font-size: .8rem; font-weight: 500; color: var(--fg-dim); }
.meta + .meta::before { content: '·'; margin-right: .375rem; }
.cc-arrow {
  flex: none;
  font-size: 1.3rem;
  color: var(--fg);
  transition: transform .2s;
}
.career-card:hover .cc-arrow { transform: translateX(.25rem); }

/* ---- Modal (kariera + aktualności) ---- */
.career-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.career-modal[hidden] { display: none; }
.career-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--shadow-ink) 50%, transparent);
  backdrop-filter: blur(2px);
}
.career-modal-box {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 40rem;
  max-height: 88vh;
  overflow: auto;
  padding: 2.5rem 2.75rem;
  box-shadow: 0 1.875rem 5rem color-mix(in srgb, var(--shadow-ink) 30%, transparent);
  animation: cmIn .25s ease;
}
@keyframes cmIn { from { opacity: 0; transform: translateY(.875rem); } to { opacity: 1; transform: none; } }
.career-modal-x {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  border: 0;
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.career-modal-x:hover { color: var(--ink); }
.cm-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; }
.career-modal-box h2 { font-size: 1.7rem; margin: 0 0 1.125rem; }
.cm-body { color: var(--ink-secondary); line-height: 1.7; }
.cm-body p { margin: 0 0 .875rem; }
.cm-body h4 { margin: 1.375rem 0 .5rem; font-size: 1.05rem; color: var(--ink); }
.cm-body ul { margin: 0 0 .875rem; padding-left: 1.25rem; }
.cm-body li { margin-bottom: .375rem; }
.cm-body a:not(.btn) { color: var(--fg); }
.cm-foot { margin-top: 1.75rem; }
.nm-cover {
  width: 100%;
  height: 15rem;
  border-radius: var(--radius);
  background: var(--bg-alt) center/cover no-repeat;
  margin-bottom: 1.25rem;
}

/* ============================================================
   AKTUALNOŚCI — siatka newsów
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.375rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.news-card:hover {
  border-color: var(--fg);
  box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  transform: translateY(-.1875rem);
}
.nc-cover {
  height: 11.25rem;
  background: var(--bg-raise) center/cover no-repeat;
}
.nc-cover-empty {
  display: grid;
  place-items: center;
  background: var(--fg);
}
.nc-cover-empty span {
  color: var(--bg);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  opacity: .9;
}
.nc-main { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.nc-meta { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; }
.nc-date { color: var(--muted); font-size: .82rem; font-weight: 600; }
.nc-main h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
.nc-main p { color: var(--muted); margin: 0 0 1rem; font-size: .94rem; flex: 1; }
.nc-link { color: var(--fg); font-weight: 600; font-size: .9rem; }

/* ============================================================
   REALIZACJE — case studies
   ============================================================ */
.cs-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.cs-filter {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.cs-filter:hover { border-color: var(--fg); color: var(--fg); }
.cs-filter[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.375rem;
}
.cs-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cs-card:hover {
  border-color: var(--fg);
  box-shadow: 0 .75rem 2rem color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  transform: translateY(-.1875rem);
}
.cs-card .nc-cover-empty span { font-size: 1.25rem; text-align: center; padding: 0 1rem; }
.cs-card--featured { grid-column: 1 / -1; flex-direction: row; }
.cs-card--featured .nc-cover { height: auto; min-height: 17.5rem; flex: 0 0 45%; }
.cs-card--featured h3 { font-size: 1.5rem; }
.cs-results {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.cs-results div { min-width: 6rem; }
.cs-results dt { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--fg); }
.cs-results dd { margin: .125rem 0 0; font-size: .82rem; color: var(--muted); }
.cs-results--lg { border-top: 0; padding-top: 0; margin-bottom: 1.5rem; }
.cs-results--lg dt { font-size: 1.75rem; }
.cs-cta { text-align: center; border-top: 1px solid var(--line); }
.cs-cta .lead { margin: .75rem auto 1.5rem; }

@media (max-width: 56em) {
  .cs-card--featured { grid-column: auto; flex-direction: column; }
  .cs-card--featured .nc-cover { min-height: 11.25rem; flex-basis: auto; }
}
@media (max-width: 37.5em) {
  .cs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 37.5em) {
  .career-card { padding: 1rem; gap: .875rem; }
  .cc-arrow { display: none; }
  .career-modal-box { padding: 1.875rem 1.375rem; }
  .career-modal-box h2 { font-size: 1.4rem; }
  .news-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   KARUZELA KAFELKÓW — .service-grid i .feature-grid w jednym rzędzie
   Przewijanie poziome ze snapem + strzałki (wstrzykiwane JS-em).
   ============================================================ */
.service-grid,
.feature-grid {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: .25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.service-grid { gap: 1.25rem; padding: .625rem .25rem 1.125rem; }
.feature-grid { gap: 1px; padding: 0; margin-block: .625rem 1.125rem; }
.service-grid::-webkit-scrollbar,
.feature-grid::-webkit-scrollbar { display: none; }

.service-grid > .service-card {
  flex: 0 0 min(21.25rem, 82vw);
  scroll-snap-align: start;
}
/* flex-grow: 1 — gdy kafelków jest mało i mieszczą się w rzędzie, rozciągają
   się na pełną szerokość zamiast zostawiać pustkę po prawej. Gdy jest ich
   dużo (5–6, np. punkty 01–06), baza wygrywa i rząd zaczyna się przewijać.
   Baza 280px ustawia próg tam, gdzie trzeba: przy szerokości treści 1216px
   cztery kafle (4×280 + 3×16 = 1168) jeszcze się mieszczą i strzałki znikają,
   pięć (1464) już nie. Jedna reguła obsługuje sekcje od 2 do 6 kafelków. */
.feature-grid > .feature-card {
  flex: 1 0 min(17.5rem, 80vw);
  scroll-snap-align: start;
}
.carousel-nav {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-bottom: 1.125rem;
}
.carousel-btn {
  width: 2.625rem;
  height: 2.625rem;
  border: .09375rem solid var(--line);
  border-radius: .4375rem;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition);
}
.carousel-btn:hover:not(:disabled) { border-color: var(--fg); color: var(--fg); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

/* ikony SVG w kafelkach usług (zamiast liter) */
.service-card .card-icon svg, .portal-copy .card-icon svg { width: 1.625rem; height: 1.625rem; }

/* ============================================================
   MENU MOBILNE — akordeony (mniej pozycji, podstrony schowane)
   ============================================================ */
.mobile-nav .mnav-acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.mobile-nav .mnav-acc::after {
  content: '';
  width: 0; height: 0;
  border-left: .3125rem solid transparent;
  border-right: .3125rem solid transparent;
  border-top: .3125rem solid currentColor;
  transition: transform .25s;
  opacity: .55;
}
.mobile-nav .mnav-acc.open::after { transform: rotate(180deg); opacity: 1; }
.mobile-nav .mnav-acc.open { color: var(--fg); }
.mobile-nav .mnav-panel { display: none; }
.mobile-nav .mnav-panel.open {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: .125rem 0 .75rem;
}
.mobile-nav .mnav-panel .mnav-head { display: block; margin-top: .75rem; }
.mobile-nav .mnav-panel a.mnav-sub { display: block; border-bottom: 0; padding: .5625rem 0 .5625rem .875rem; }

/* ============================================================
   MOBILE — kompaktowość: mniej scrollowania, więcej powietrza
   ============================================================ */
@media (max-width: 47.5em) {
  .section { padding-block: 2.75rem; }
  .hero { padding: 3.5rem 0 2.75rem; }
  .section-header { margin-bottom: 1.625rem; }
  .lead { font-size: 1.02rem; line-height: 1.55; }
  h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2rem); }

  /* kolekcje kart: przewijane poziomo zamiast długiej kolumny */
  .feature-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1px;
    padding: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .feature-grid::-webkit-scrollbar { display: none; }
  .feature-grid > .feature-card {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }

  /* statystyki: 2×2, mniejsze liczby */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 1.25rem 1rem; }
  .stat-number { font-size: 1.6rem; }

  /* listy procesu i usług: ciaśniej */
  .process-step { gap: .875rem; margin-bottom: .5rem; }
  .process-step p, .service-row p { font-size: .92rem; }
  .service-row { padding: 1.25rem 0; }

  /* FAQ zwarty */
  .faq-list details { padding: .875rem 0; }
}

/* ============================================================
   PASEK POSTĘPU SCROLLA — nad paskiem menu, na każdej stronie
   (element wstrzykiwany przez site-effects.js)
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: .1875rem;
  z-index: 400;
  pointer-events: none;
  background: transparent;
}
.scroll-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--fg);
  transition: width .08s linear;
}

/* ============================================================
   MOBILE — drugi „look": kompaktowy
   Desktop pozostaje pełny; telefon dostaje krótszą, lżejszą wersję:
   warstwa opisowa jest ograniczona do niezbędnego minimum.
   ============================================================ */
@media (max-width: 47.5em) {
  /* krótsza narracja: nagłówki sekcji bez leadów … */
  .section-header .lead { display: none; }
  /* …opisy w wierszach usług i krokach procesu przycięte do 3 linii */
  .service-row p:not(.lead),
  .process-step p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* elementy czysto narracyjne znikają */
  .quote-block { display: none; }
  .split > div > p:not(.lead) { display: none; }
}

/* ============================================================
   POZYCJE NIEAKTYWNE — Woyld Grow widoczny, ale wyłączony
   ============================================================ */
.main-nav .nav-item--disabled {
  color: var(--light);
  cursor: default;
}
.main-nav .nav-item--disabled:hover { background: transparent; color: var(--light); }
.link-disabled { color: var(--light); cursor: default; }
.mobile-nav .link-disabled {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: .875rem 0;
  border-bottom: 1px solid var(--line);
}
.service-card--disabled {
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   DOPRACOWANIE: dostępność, gest, drobne powierzchnie
   ============================================================ */

/* Hamburger zamienia się w krzyżyk — stan przycisku widać na nim samym */
.hamburger { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hamburger span { transition: transform var(--spring-fast-dur) var(--spring-fast), opacity .15s var(--ease-out); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.5625rem) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.5625rem) rotate(-45deg); }
.hamburger:active { transform: scale(.92); }

.mobile-nav a.btn { border-bottom: 0; }
.mobile-close { -webkit-tap-highlight-color: transparent; }
.mobile-close:active { transform: scale(.9); }

.carousel-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .18s var(--ease-out), color .18s var(--ease-out),
              transform var(--spring-fast-dur) var(--spring-fast);
}
.carousel-btn:active:not(:disabled) { transform: scale(.92); transition-duration: .06s; }

/* FAQ rozwija się po sprężynie tam, gdzie przeglądarka umie animować
   wysokość „auto"; w starszych po prostu otwiera się jak dotąd. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--spring-dur) var(--spring),
                content-visibility var(--spring-dur) allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* Mniej ruchu ≠ brak informacji zwrotnej: zostają krótkie przenikania,
   znikają przesunięcia, skale i sprężyny. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transform: none; transition: opacity .2s ease, visibility .2s; }
  .btn:active, a.service-card:active, a.career-card:active, a.news-card:active,
  .feature-card:active { transform: none; }
  .service-row:hover .row-num, .service-row:hover h3 { transform: none; }
  .dropdown-panel, .nav-dropdown:hover .dropdown-panel,
  .nav-dropdown:focus-within .dropdown-panel { transform: translateX(-50%); }
  .mega-panel, .nav-dropdown--mega:hover .mega-panel,
  .nav-dropdown--mega:focus-within .mega-panel { transform: translateX(-50%); }
}

/* Mniej przezroczystości: materiał staje się pełny, rozmycie znika */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.scrolled, .mobile-nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Wyższy kontrast: pełne tła i wyraźne krawędzie */
@media (prefers-contrast: more) {
  /* --line-mid też: niesie obramowanie .btn-outline, a jego domieszka 16%
     zostałaby słabsza od wzmocnionej --line. */
  :root[data-skin="light"] { --fg-dim: #3A3A42; --fg-dimmer: #5A5A64; --line: #8E8E96; --line-mid: #6A6A72; }
  :root[data-skin="dark"] { --fg-dim: #C8C8CE; --fg-dimmer: #A0A0A8; --line: #6A6A72; --line-mid: #8E8E96; }
  .site-header, .dropdown-panel, .mega-panel, .mobile-nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header { border-bottom: 1px solid var(--ink); }
  .dropdown-panel, .mega-panel { border-color: var(--ink); }
}

/* --- Pas liczb pod hero i klasy zamiast stylów inline --- */
.section.section-tight { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.split .lead { max-width: none; }
.body-muted { color: var(--muted); margin-top: 1.125rem; font-size: .98rem; max-width: 58ch; }

/* Liczba jest dowodem, nie dekoracją: atrament zamiast koloru akcentu,
   ciaśniejszy tracking, bo to największy stopień na pasie. */
.stat-cell .stat-number {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat-cell:hover .stat-number { color: var(--fg); }
.stat-cell .stat-label { color: var(--muted); }

/* Otwarty panel: nagłówek wychodzi NAD panel i traci własny materiał —
   dwie jasne, półprzezroczyste warstwy jedna na drugiej tracą czytelność.
   Hamburger-krzyżyk jest jedynym przyciskiem zamknięcia, więc drugi znika. */
body.nav-open .site-header {
  z-index: 210;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mobile-close { display: none; }

/* CTA w panelu mobilnym: reguła .mobile-nav a (atrament) wygrywała
   specyficznością z .btn-primary — tekst był czarny na niebieskim. */
.mobile-nav a.btn-primary,
.mobile-nav a.btn-primary:active { color: var(--btn-fg); }
.mobile-nav a.btn:active { transform: scale(.97); }

/* ============================================================
   WOYLD LABEL — komponenty strony woyld-label.html
   Label stoi na tym samym szkielecie co reszta (skórka ciemna przez
   data-skin). Tam, gdzie wspólny komponent już był, Label go używa:
   hero z filmem, .stat-grid, .feature-grid + .card--invert, .service-row,
   .model-grid, .faq-list, .contact-grid + .form-group, .cta-banner.
   Poniżej tylko to, czego reszta serwisu nie ma. Wszystko na tokenach
   ról — żadnej reguły zależnej od skórki; powierzchnia odwrócona bierze
   tokeny przeciwnej roli (--inverse-*), tak jak .card--invert.
   ============================================================ */

/* Druga połowa nagłówka w tonie pomocniczym: „Pięć filarów, jeden partner." */
.dim { color: var(--fg-dim); }
:is(.cta-banner, .card--invert, .model-col.dark-col, .section.bg-dark) .dim { color: var(--inverse-fg-dim); }

/* Etykieta na kolumnie odwróconej (Ty/My): --fg-dim zlałby się z tłem --fg. */
.model-col.dark-col .eyebrow { color: var(--inverse-fg-dim); }

/* Karty cech Label mają h3 (zarys strony: h2 sekcji → h3 karty); w innych
   miejscach karta ma h4, więc h3 dostaje tu jej stopień, nie stopień sekcji. */
.feature-card h3 {
  font-size: 1.06rem;
  line-height: 1.38;
  letter-spacing: -.006em;
  margin-bottom: .5rem;
}

/* Zdanie-teza między sekcjami: większe od h3, mniejsze od h2. */
.statement {
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.024em;
  max-width: 34ch;
}
.section-header .statement { margin-top: var(--s-3); }

/* Sekcja oddzielona od poprzedniej hairline'em zamiast odstępem tła. */
.section--rule { border-top: 1px solid var(--line); }

/* --- Pas zakresu (marquee) ---
   Dekoracja: ten sam zakres stoi w treści sekcji, więc pas jest aria-hidden.
   Treść jest zdublowana w HTML, przesunięcie o -50% zamyka pętlę. */
.marquee-strip {
  border-block: 1px solid var(--line);
  padding-block: var(--s-6);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: var(--s-16);
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  white-space: nowrap;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.marquee-item::after { content: '·'; color: var(--fg-dimmer); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --- Cytat-teza --- */
.quote-banner {
  padding-block: var(--rhythm);
  text-align: center;
}
.quote-banner p {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw + .6rem, 2.4rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
  max-width: 22ch;
  margin-inline: auto;
}
.quote-banner .quote-banner-src {
  font-family: var(--font);
  font-size: .75rem;
  letter-spacing: 0;
  color: var(--fg-dim);
  margin-top: var(--s-6);
}

/* --- Proces w pięciu krokach ---
   Jedna siatka hairline jak .feature-grid: krok leży na tle --line, a 1px
   przerwy to linie podziału. auto-fit w rem zawija kroki przy większym
   tekście, zamiast zgniatać pięć kolumn. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.process-card {
  background: var(--bg);
  padding: clamp(1.5rem, 2vw + .75rem, 2rem);
  transition: background-color .2s var(--ease-out);
}
.process-card:hover { background: var(--bg-raise); }
.process-num {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--fg-dim);
  margin-bottom: var(--s-5);
  font-variant-numeric: tabular-nums;
}
.process-card h3 { font-size: 1.06rem; line-height: 1.38; letter-spacing: -.006em; }
.process-card p { font-size: .88rem; color: var(--fg-dim); margin-top: var(--s-2); }

/* --- Porównanie: samodzielnie vs Woyld Label ---
   Tabela z hairline'ów. Kolumna Label to ta sama płaszczyzna podniesiona
   o ton (--bg-raise), nie kafel. Na wąskim ekranie wiersz staje się
   kartą: nazwa wiersza u góry, kolumny z etykietą z data-col. */
.compare { border: 1px solid var(--line); }
.compare__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.compare__row:last-child { border-bottom: 0; }
.compare__cell {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  font-size: .9rem;
  color: var(--ink-secondary);
}
.compare__cell:first-child { color: var(--fg-dim); }
.compare__row--head .compare__cell {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.compare__cell--highlight { background: var(--bg-raise); }
.compare__row--head .compare__cell--highlight,
.compare__yes { color: var(--fg); font-weight: 500; }
.compare__no { color: var(--fg-dim); }
.compare__icon { width: 1.25rem; flex-shrink: 0; text-align: center; }
@media (max-width: 43.75em) {
  .compare__row { grid-template-columns: 1fr; }
  .compare__row--head { display: none; }
  .compare__cell { padding: var(--s-3) var(--s-5); }
  .compare__cell:first-child { color: var(--fg); font-weight: 500; padding-top: var(--s-5); }
  .compare__cell[data-col]::before {
    content: attr(data-col);
    min-width: 7rem;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
}

/* --- Warunki modelu partnerskiego ---
   Dwa rzędy po trzy komórki podzielone hairline'ami. Komórki to siatka
   auto-fit w rem, więc przy węższym oknie lub większym tekście same
   przechodzą w jedną kolumnę. */
.terms { border: 1px solid var(--line); }
.terms__top,
.terms__bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
}
.terms__top { border-bottom: 1px solid var(--line); }
.terms__cell,
.terms__bottom-cell { background: var(--bg); }
.terms__cell { padding: clamp(2rem, 2vw + 1.25rem, 3rem); }
.terms__bottom-cell {
  display: flex;
  align-items: center;
  padding: var(--s-6) clamp(2rem, 2vw + 1.25rem, 3rem);
}
.terms__cell h3 { font-size: 1.06rem; line-height: 1.38; letter-spacing: -.006em; margin-bottom: var(--s-2); }
.terms__cell p { font-size: .88rem; color: var(--fg-dim); }
.terms__price {
  font-size: clamp(2rem, 2.5vw + 1.25rem, 3.2rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
}
.terms__per { font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--fg-dim); margin-left: .25rem; }
.terms__note { font-size: .85rem; color: var(--fg-dim); margin-top: var(--s-1); }
.terms__features { display: flex; flex-direction: column; gap: var(--s-3); }
.terms__features li {
  display: flex;
  gap: var(--s-3);
  font-size: .9rem;
  color: var(--ink-secondary);
}
.terms__features li::before { content: '+'; color: var(--fg-dim); }
.terms__label { font-size: .8rem; color: var(--fg-dim); }
.terms__value { font-size: .92rem; font-weight: 500; }
.terms__bottom-cell .btn { width: 100%; }

/* --- Formularz Label: walidacja i pełna szerokość przycisku --- */
.form-error {
  display: none;
  margin-top: .375rem;
  font-size: .78rem;
  color: var(--danger);
}
.form-error.show { display: block; }
.form-group :is(input, textarea).invalid { border-color: var(--danger); }
.btn--block { width: 100%; }

/* --- Powrót na górę ---
   Pełny przycisk (tokeny --btn-*), bez cienia: krąg odcina się od treści
   samym kontrastem przycisku. */
.back-top {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 150;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem);
  transition: opacity .3s var(--ease-out), visibility .3s, transform var(--spring-dur) var(--spring);
}
.back-top.show { opacity: 1; visibility: visible; transform: none; }

/* --- Komunikat po wysłaniu formularza --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-8);
  z-index: 500;
  max-width: calc(100vw - 2 * var(--pad));
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) translateY(5rem);
  transition: opacity .3s var(--ease-out), transform var(--spring-dur) var(--spring);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Znaczek partnera Shopify nad stopką ---
   Obcy logotyp bierze kolor atramentu skórki z tokenu --logo-ink-filter
   (czarny w jasnej, biały w ciemnej) i schodzi do tonu pomocniczego. */
.partner-strip {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
}
.partner-strip .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.partner-strip img {
  width: auto;
  height: 1.375rem;
  filter: var(--logo-ink-filter);
  opacity: .5;
}
.partner-strip span {
  font-size: .78rem;
  font-weight: 500;
  color: var(--fg-dim);
}

/* --- Informacja o cookies --- */
.cookie-banner {
  position: fixed;
  left: var(--s-6);
  bottom: var(--s-6);
  z-index: 250;
  display: none;
  max-width: 24rem;
  padding: var(--s-6);
  background: var(--bg-raise);
  border: 1px solid var(--line);
}
.cookie-banner.show { display: block; }
.cookie-banner h4 { margin-bottom: var(--s-2); }
.cookie-banner p { font-size: .8rem; color: var(--fg-dim); margin-bottom: var(--s-4); }
.cookie-banner__actions { display: flex; gap: var(--s-2); }
.cookie-banner .btn { padding: .55rem 1.1rem; font-size: .8rem; }
@media (max-width: 30em) {
  .cookie-banner { left: var(--s-3); right: var(--s-3); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .back-top, .toast { transition: opacity .2s ease, visibility .2s; }
  .back-top { transform: none; }
}

/* ── Obszary: pełnoekranowe kadry linii biznesowych przenikające się
   przy przewijaniu; nagłówek stoi nad nimi. ── */
.portal { position: relative; height: 400vh; }
.portal-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.portal-frame {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 0;
  background: var(--bg); color: var(--fg); text-decoration: none;
  will-change: opacity;
}
.portal-frame:nth-child(2) { background: color-mix(in srgb, var(--fg) 3%, var(--bg)); }
.portal-copy {
  position: absolute; z-index: 2; inset: 0; margin: auto; height: fit-content;
  max-width: 47.5rem; padding: 0 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.portal-copy h2 { margin: 0 0 1rem; }
.portal-copy .lead { margin: 0 0 2rem; }
.portal-frame.has-media .portal-copy .lead, .portal-frame.has-media .portal-copy .eyebrow { color: color-mix(in srgb, var(--on-film) 80%, transparent); }
.section-portal { padding-block: 0; }
.portal-head {
  position: absolute; inset: 0; z-index: 50; margin: auto; height: fit-content;
  max-width: 47.5rem; padding: 0 1.5rem; pointer-events: none;
}
.portal-stage.on-media .portal-head { color: var(--on-film); }
.portal-stage.on-media .portal-head .lead, .portal-stage.on-media .portal-head .eyebrow { color: color-mix(in srgb, var(--on-film) 80%, transparent); }
/* Tło kadru: zdjęcie lub wideo z atrybutu data-bg (patrz site-effects.js). */
.portal-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.portal-media--crop { transform: scale(1.3); }
.portal-frame.has-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--film) 45%, transparent); }
.portal-frame.has-media .portal-copy, .portal-frame.has-media .portal-copy h2 { color: var(--on-film); }
.portal-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .portal { display: none; }
  .portal-fallback { display: grid; }
  .wrap.portal-fallback { display: block; }
  .section-portal { padding-block: var(--rhythm); }
}