/* ============================================================
   BRAND 2026 — warstwa odświeżenia wyglądu system10h.com
   Szkic makiety 15.09.2026 (@coo, mandat usera „refresh brandu").
   Ładowana PO stylach strony — nadpisuje wykonanie, nie treść.
   Źródła kierunku: materialy/system10h/2026-09-15_DR_brand-refresh-sv-2026.md
   (Gemini DR: KEEP Fraunces + Geist Mono · EVOLVE Inter przez zestawy
   stylistyczne · akcent w skali OKLCH · karty 12 px z włoskowatym
   obramowaniem · sekcje 96–128 px · motion 150/320 ms) oraz
   brandbook v1.1 (jeden akcent, zero gradientów, zero glow).
   Dwa motywy na TYM SAMYM markupie: domyślny ciemny, `html[data-theme="light"]`
   = ciepły jasny (decyzja właścicielska, makieta pokazuje oba).
   ============================================================ */

/* ------------------------------------------------------------
   0. TOKENY v3 — uzupełnienie design_tokens.css (nie zamiana)
   ------------------------------------------------------------ */
:root {
  /* powierzchnie: canvas → surface (+3 %) → surface-2 (+6 %) */
  --color-surface:        #14110E;
  --color-surface-2:      #1B1713;
  --color-bg-secondary:   var(--color-surface);       /* alias używany przez sekcje 06.09 */
  /* włoskowate linie: neutralna + bursztynowa (15 %) */
  --color-line:           #221E1A;
  --color-line-amber:     rgba(212, 165, 116, 0.16);
  --color-line-amber-hi:  rgba(212, 165, 116, 0.38);
  /* skala akcentu (3 stopnie) */
  --color-accent-text:    #E0B88B;   /* tekst/link na ciemnym — jaśniej, 9,4:1 */
  /* Napis NA bursztynie. Jeden i ten sam w obu motywach, bo bursztyn w obu
     jest ten sam. ⛔ NIE bierz tu `--color-bg` — to tło strony, nie tło
     przycisku; widżet demo robił tak i w motywie jasnym dał 2,10:1. */
  --color-on-accent:      #1A1814;
  --color-accent-wash:    rgba(212, 165, 116, 0.06);
  /* radii semantyczne */
  --radius-badge: 4px;
  --radius-ctl:   8px;
  --radius-card:  12px;
  /* rytm sekcji — P3 17.09: wartość Kino (materialy/system10h/wizualy/2026-09-15_kino/
     makieta-kino*.html, --sekcja), §12 wygrywa nad §9.7 tam, gdzie się różnią */
  --section-y:    clamp(76px, 8.2vw, 124px);
  --nav-h:        64px;
  /* motion */
  --duration-fast: 150ms;
  --duration-med:  320ms;
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --color-bg:          oklch(12.5% 0.006 70);
    --color-surface:     oklch(15.5% 0.008 70);
    --color-surface-2:   oklch(18.5% 0.010 70);
    --color-accent-text: oklch(80% 0.075 70);
  }
}

/* ---------- MOTYW JASNY (wariant B makiety) ---------- */
html[data-theme="light"] {
  --color-bg:              #FAF8F4;
  --color-bg-raised:       #FFFFFF;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F3EFE8;
  --color-bg-secondary:    #FFFFFF;
  --color-text-primary:    #1A1814;
  --color-text-secondary:  #5A5248;
  --color-text-tertiary:   #6F6760;
  --color-border:          #E7E0D5;
  --color-border-subtle:   #D6CCBD;
  --color-line:            #E7E0D5;
  --color-line-amber:      rgba(166, 127, 83, 0.22);
  --color-line-amber-hi:   rgba(166, 127, 83, 0.55);
  --color-accent:          #D4A574;
  --color-accent-dim:      #B8874F;
  --color-accent-text:     #8F6537;   /* tekst/link na jasnym — 5,2:1 */
  --color-accent-faint:    rgba(212, 165, 116, 0.14);
  --color-accent-wash:     rgba(212, 165, 116, 0.09);
  --color-signal:          #C9462C;
  --color-success:         #5A7A4E;
  color-scheme: light;
}
html[data-theme="light"] body::before { opacity: 0.028; }
html[data-theme="light"] .display-h2 em,
html[data-theme="light"] .section-headline em,
html[data-theme="light"] .chapter-marker,
html[data-theme="light"] .brand-accent,
html[data-theme="light"] .kwalifikator-cta,
html[data-theme="light"] .polka-cena { color: var(--color-accent-text); }
html[data-theme="light"] .btn-primary { color: #1A1814; }
html[data-theme="light"] .btn-primary:hover { background: var(--color-accent-dim); border-color: var(--color-accent-dim); }

/* ------------------------------------------------------------
   1. BAZA — typografia i rytm
   ------------------------------------------------------------ */
body { font-feature-settings: 'cv01', 'ss03', 'zero', 'kern', 'liga'; }
h1.display-h2, .hero .display-h2 {
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.display-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; }
.section-body { padding-bottom: var(--section-y); }
.section-headline { margin-bottom: var(--space-5); }
.section-lead { margin-bottom: var(--space-10); }
.section-headline em, .display-h2 em { color: var(--color-accent-text); }

/* P3 17.09 (brandbook §9.8): kolumna tekstu 60-75 ch w treści sekcji; hero i tabele
   wyłączone (mają własne, węższe/szersze reguły — .hero-sublead ma już 58ch). */
.section p { max-width: 68ch; }
.hero p, .section table p, .pricing-table p { max-width: none; }

/* P3 17.09 (brandbook §9.10): cyfry tabelaryczne w cenach i tabelach — ceny/drabina/
   tabela porównawcza/wydruk (wydruk ma już regułę w wow.css, tu dokładamy resztę). */
.cn-card-price,
.pricing-table,
.pricing-table td,
.pricing-table th,
.polka-cena {
  font-variant-numeric: tabular-nums;
}

/* P3 17.09 (brandbook R4/R8): breadcrumb widoczny na stronach klasy B (branżowe,
   cennik, tryb poufny, o mnie) — etykiety reużyte z istniejącego BreadcrumbList
   JSON-LD tych stron, nie nowa treść. */
.breadcrumb-strona {
  max-width: var(--container-wide, 1180px);
  margin: 0 auto;
  padding: var(--space-4, 12px) var(--space-6, 24px) 0;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}
.breadcrumb-strona a { color: var(--color-accent-text); text-decoration: none; }
.breadcrumb-strona a:hover, .breadcrumb-strona a:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------
   2. PASEK NAWIGACJI — jeden rząd, 64 px, przyklejony, jedno wykonanie
      dla całej witryny (index · branżowe · blog · cennik · case study)
   ------------------------------------------------------------ */
.navbar,
body > .navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-line);
  /* pełne tło, bez rozmycia: backdrop-filter nad ziarnem body::before (mix-blend overlay)
     kosztował sekundy rastrowania i dublował pasek w kompozytorze (pomiar makiety 15.09) */
  background: var(--color-bg);
}
.navbar-inner,
body > .navbar .navbar-inner {
  display: flex !important;              /* gasi dwurzędowy grid ≥1270 px z index.html */
  grid-template-areas: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-wide);
  min-height: var(--nav-h);
  margin: 0 auto;
}
.navbar .brand, body > .navbar .brand {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 24, 'SOFT' 0, 'wght' 600;
  font-size: 1.125rem;
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.navbar .brand-accent { color: var(--color-accent-text); }
.navbar .nav-links, body > .navbar .nav-links {
  display: flex;
  gap: var(--space-1);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  justify-self: center;
}
.navbar .nav-links a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--radius-ctl);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-std), background var(--duration-fast) var(--ease-std);
}
.navbar .nav-links a:hover,
.navbar .nav-links a:focus-visible,
.navbar .nav-links a[aria-current="page"] { color: var(--color-text-primary); background: var(--color-surface-2); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.nav-mode-slot, body > .navbar .nav-mode-slot { display: none; }   /* przełącznik trybu schodzi z paska do menu i sekcji */
.nav-mode-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-ctl);
  white-space: nowrap;
}
.nav-mode-link:hover { color: var(--color-text-primary); background: var(--color-surface-2); }
.navbar .btn-primary, body > .navbar .btn-primary {
  padding: 9px 14px !important;
  font-size: 0.9rem;
  border-radius: var(--radius-ctl);
  white-space: nowrap;
}
.navbar .hamburger-toggle { display: none; }
@media (max-width: 899px) {
  .navbar, body > .navbar { padding: 0 var(--space-4); }
  .navbar .nav-links, body > .navbar .nav-links { display: none; }
  .nav-mode-link { display: none; }
  .navbar .hamburger-toggle { display: inline-flex; }
  .navbar-inner, body > .navbar .navbar-inner { min-height: 56px; gap: var(--space-3); }
}
/* 2b. HAMBURGER — kreski (odbiór LIVE 18.09, zrzut 390 px: na podstronach przycisk
   renderował się jako kwadracik 4×4 px, bo pełną regułę kresek ma tylko index.html
   w <style> inline; wspólny arkusz włączał sam `display`, a trzy <span> bez wymiarów
   są niewidoczne). Ta reguła jest wspólna dla 16 podstron z przyciskiem; index
   nadpisuje ją własną, identyczną w wyglądzie. */
.navbar .hamburger-toggle {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.navbar .hamburger-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
}
/* 2c. NAKŁADKA MENU NA TELEFONIE — ten sam odbiór 18.09: sześć podstron
   (cennik, blog, case-study, audit-pack, mechano, self-discovery) ma markup
   `#mobile-menu` i skrypt otwierania, ale ŻADNEGO CSS nakładki — po kliknięciu
   menu wypadało jako goła lista w treści. Reguły skopiowane 1:1 ze <style>
   inline index.html (tam zostają — nadpisują te identyczną treścią). */
.mobile-menu-overlay[hidden] { display: none; }
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + env(safe-area-inset-top, 0));
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: white;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}
.mobile-menu-nav ul { list-style: none; padding: 0; margin: var(--space-12) 0 0; }
.mobile-menu-nav li { margin-bottom: var(--space-4); }
.mobile-menu-nav a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  display: block;
  padding: var(--space-3) 0;
  min-height: 44px;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 900px) and (max-width: 1100px) {
  .navbar .nav-links a { padding: 6px 7px; font-size: 0.85rem; }
  .nav-mode-link { display: none; }
}

/* ------------------------------------------------------------
   3. PRZYCISKI — 8 px, bez pigułki, bez unoszenia
   ------------------------------------------------------------ */
.btn { border-radius: var(--radius-ctl); min-height: 44px; font-weight: 500; }
.btn-secondary { border-color: var(--color-line-amber); }
.btn-secondary:hover { border-color: var(--color-line-amber-hi); background: var(--color-accent-wash); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   4. KARTY — jedna rodzina: powierzchnia +3 %, 12 px, włoskowata linia
   ------------------------------------------------------------ */
.dowod-item, .kwalifikator-kafel, .polka-pozycja, .pricing-card,
.artifact-card, .bento-item, .zespol-blok, .wydruk, .hero-founder-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: border-color var(--duration-med) var(--ease-std), background var(--duration-med) var(--ease-std);
}
.dowod-item:hover, .kwalifikator-kafel:hover, .polka-pozycja:hover, .bento-item:hover {
  border-color: var(--color-line-amber);
  transform: none;
}
.kwalifikator-kafel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.zespol-blok { border-left: 1px solid var(--color-line); padding: var(--space-8); }
.zespol-blok::before {
  content: ''; display: block; width: 40px; height: 2px; background: var(--color-accent); margin-bottom: var(--space-5); border-radius: 2px;
}
.polka-slot { background: transparent; border-style: dashed; border-color: var(--color-border-subtle); }

/* siatka dowodów: asymetryczne bento na desktopie (pierwszy dowód szerszy) */
@media (min-width: 900px) {
  .dowod-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
  .dowod-grid > .dowod-item { grid-column: span 3; }
  .dowod-grid > .dowod-item:first-child { grid-column: span 4; }
  .dowod-grid > .dowod-item:nth-child(2) { grid-column: span 2; }
  .kwalifikator-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}

/* ------------------------------------------------------------
   5. HERO — karta architekta na powierzchni, cena jako wers, więcej powietrza
   ------------------------------------------------------------ */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--section-y); }
.hero-split { gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-split-aside figure.hero-founder-card { padding: var(--space-4); }
.hero-founder-card picture img, .hero-founder-card img { border-radius: calc(var(--radius-card) - 4px); }
.hero-sublead { font-size: 1.125rem; line-height: 1.6; color: var(--color-text-secondary); max-width: 58ch; }
.hero-price { font-size: clamp(1.35rem, 2vw, 1.75rem) !important; }
.cta-note { color: var(--color-text-tertiary); }
.hero-przeglad-dnia .wydruk { padding: var(--space-6) var(--space-7, 28px); }
.wydruk-header { border-bottom: 1px solid var(--color-line); }

/* ------------------------------------------------------------
   6. DRABINA CEN — wyróżnienie przez pas bursztynu u góry, nie przez obrys
   ------------------------------------------------------------ */
.drabina-grid { gap: var(--space-5); }
.pricing-card { padding: var(--space-8) var(--space-7, 28px); gap: var(--space-5); overflow: hidden; }
.drabina-karta-wyrozniona {
  border-color: var(--color-line-amber-hi);
  box-shadow: none;
  background: linear-gradient(180deg, var(--color-accent-wash), transparent 45%), var(--color-surface);
  position: relative;
}
.drabina-karta-wyrozniona::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-accent);
}
.pricing-tier { color: var(--color-accent-text); letter-spacing: 0.08em; }
.pricing-price { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
.drabina-opis { font-size: 0.975rem; }
.drabina-mikrotekst { color: var(--color-text-tertiary); }

/* ------------------------------------------------------------
   7. TABELA PORÓWNAWCZA, FAQ, ZAMKNIĘCIE
   ------------------------------------------------------------ */
.wa0-wrap { border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface); }
.wa0-table th, .wa0-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); }
.wa0-table tbody tr:last-child td, .wa0-table tbody tr:last-child th { border-bottom: 0; }
.wa0-table .wa0-nasza { background: var(--color-accent-wash); }
@media (max-width: 720px) { .wa0-wrap { border: 0; background: transparent; } .wa0-table tr { border-radius: var(--radius-card); background: var(--color-surface); border-color: var(--color-line) !important; } }
.faq-list { max-width: 760px; }
details.faq-item { border-bottom: 1px solid var(--color-line) !important; }
.faq-summary { padding: var(--space-2) 0; }
.faq-plus { color: var(--color-accent-text); font-family: var(--font-mono); transition: transform var(--duration-fast) var(--ease-std); }
#zamkniecie { text-align: center; }
#zamkniecie .section-headline, #zamkniecie .section-lead { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   8. STOPKA — jedno wykonanie: marka + claim, 3 kolumny, linia prawna
   ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--color-line); margin-top: 0; padding: var(--space-16) var(--space-6) var(--space-10); background: var(--color-surface); }
.footer-inner-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-10); max-width: var(--container-wide); margin: 0 auto; }
/* Baza kolumn stopki — do 28.09 żyła tylko w <style> strony głównej, handlowców i producentów,
   więc na pozostałych stronach listy miały kropki, a nagłówki domyślny rozmiar. */
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-6); width: 100%; }
.footer-claim { margin: var(--space-3) 0 0; max-width: 46ch; font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-secondary); }
.footer-col-h { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 400; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { font-size: var(--text-sm); }
.footer-legal { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .footer-inner-cols { grid-template-columns: 1.4fr 2fr; }
  .footer-legal { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}
.footer-brandline .brand { font-family: var(--font-display); font-size: 1.25rem; font-variation-settings: 'opsz' 24, 'SOFT' 0, 'wght' 600; color: var(--color-text-primary); text-decoration: none; }
.footer-brandline .brand-accent { color: var(--color-accent-text); }
.footer-col-h { color: var(--color-text-tertiary); }
.footer-col a { text-decoration: none; color: var(--color-text-secondary); }
.footer-col a:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { border-top: 1px solid var(--color-line); padding-top: var(--space-6); }
.footer-year { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-text-tertiary); }

/* ------------------------------------------------------------
   9. RUCH — mniej „kinetic", ten sam scroll-reveal
   ------------------------------------------------------------ */
.kinetic:not(.display-h1):not(h1) { transition-property: opacity, transform; }


/* ============================================================
   14. PIERWSZY KADR — jedna kompozycja zamiast dwóch środków ciężkości
   ------------------------------------------------------------
   Zmierzone 15.09 na trzech wzorcach 2026 (zrzuty na żywo, 1440×860):
   Anthropic stawia punkt ciężkości w samym nagłówku i odsuwa tekst pomocniczy
   w prawo I W DÓŁ. Linear stawia w pierwszym kadrze produkt wypełniony
   prawdziwą treścią, przyklejony do dolnej krawędzi i przycięty. Vercel stawia
   jedno źródło światła w czerni. Trzy różne mechanizmy, jedno wspólne prawo:
   PIERWSZY KADR TO JEDNA KOMPOZYCJA Z JEDNYM PUNKTEM CIĘŻKOŚCI, a pod nią
   widać początek następnej rzeczy.

   Strona 10H łamała je na dwa sposoby naraz: nagłówek po lewej i portret po
   prawej konkurowały o wzrok jako dwa osobne obiekty na płaskim tle, a wydruk
   „Przegląd dnia" — jedyne miejsce, gdzie widać PRODUKT — zaczynał się 109 px
   PONIŻEJ zgięcia (zmierzone: górna krawędź 1009 px przy oknie 900 px).

   Lekarstwo: wspólne tło. Zdjęcie warsztatu pod obiema kolumnami scala je
   w jeden kadr. Nie jest ilustracją, jest FAKTURĄ — gaśnie do koloru tła,
   zanim zacznie się wydruk, żeby wydruk stał na czystej powierzchni.

   ⛔ KADR SIEDZI NA .hero-split, NIE NA .hero. Pierwsza wersja wisiała na
   .hero i zdjęcie było nieczytelną mazią. Powód zmierzony: .hero ma 1821 px
   wysokości, a zdjęcie proporcję 2,36:1 — `cover` na polu 1440×1821 skaluje
   je do 4297 px szerokości i pokazuje wąski pionowy pasek ze środka. Na polu
   .hero-split (≈1440×780, czyli 1,85:1) przycięcie jest umiarkowane i widać
   ławę, lampę i frezarkę. Przy zmianie wysokości hero NIE przenosić tego
   z powrotem — sprawdzić proporcję pola, nie wygląd na jednym ekranie.
   ------------------------------------------------------------ */

.hero-split {
  position: relative;
  isolation: isolate;
  /* SCENA TEJ STRONY. Domyślnie warsztat, bo to jedyne miejsce, które ta firma
     naprawdę ma. Podstrona, która dostanie własne zdjęcie (rozdział 07 makiety:
     „każda podstrona dostaje jedną scenę"), nadpisuje te dwie zmienne jedną
     linią we własnym <style> — reszta reguły zostaje bez zmian.
     ⛔ Zmiennej NIE WOLNO zostawić niezdefiniowanej: zmierzone sondą, że
     `image-set(var(--nieistniejąca) 1x)` daje `background-image: none`, czyli
     kadr znika BEZ ŻADNEGO BŁĘDU. Dlatego wartości domyślne stoją tutaj. */
  --kadr-1x: url("/assets/warsztat-noc-1600.webp");
  --kadr-2x: url("/assets/warsztat-noc-2400.webp");
}

html[data-theme="light"] .hero-split {
  --kadr-1x: url("/assets/warsztat-dzien-1600.webp");
  --kadr-2x: url("/assets/warsztat-dzien-2400.webp");
}

.hero-split::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* pełna szerokość okna, nie kolumny 1200 px — kadr filmowy nie ma marginesu */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  /* w górę: pod przyklejony pasek i pod górne powietrze hero, żeby kadr
     zaczynał się od krawędzi ekranu, a nie od pierwszej litery */
  top: calc(-1 * (var(--nav-h, 64px) + clamp(28px, 3.4vw, 48px)));
  /* w dół: kawałek poniżej bloku, żeby wygaszenie miało gdzie się wydarzyć */
  bottom: calc(-1 * var(--space-10, 64px));
  background:
    /* warstwa na wierzchu: wygaszenie do koloru tła. Pełne krycie na 82 %
       wysokości pola, czyli zanim zacznie się wydruk. */
    linear-gradient(180deg,
      rgba(10, 9, 8, 0.42) 0%,
      rgba(10, 9, 8, 0.50) 26%,
      rgba(10, 9, 8, 0.72) 58%,
      rgba(10, 9, 8, 0.94) 74%,
      var(--color-bg) 86%) 0 0 / 100% 100% no-repeat,
    /* pod spodem: samo zdjęcie */
    image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
      center 54% / cover no-repeat;
  /* nasycenie ściągnięte, żeby bursztyn lampy był JEDYNYM kolorem w kadrze */
  filter: saturate(0.70) contrast(1.06);
  pointer-events: none;
}

/* Dzień to ten sam warsztat dziesięć godzin później, nie inne zdjęcie.
   Jaśniejsza powierzchnia znosi mniej obrazu, więc wygaszenie zaczyna się wyżej. */
html[data-theme="light"] .hero-split::before {
  background:
    linear-gradient(180deg,
      rgba(250, 248, 244, 0.52) 0%,
      rgba(250, 248, 244, 0.62) 24%,
      rgba(250, 248, 244, 0.82) 54%,
      rgba(250, 248, 244, 0.96) 72%,
      var(--color-bg) 84%) 0 0 / 100% 100% no-repeat,
    image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
      center 54% / cover no-repeat;
  filter: saturate(0.74) contrast(1.02);
}

/* Na telefonie pole jest pionowe (≈390×1400), więc `cover` przycina zdjęcie
   2,36:1 jeszcze mocniej niż na .hero desktopowym. Tu zdjęcie NIE MA szans być
   czytelne i nie udajemy, że ma: zostaje wyłącznie jako ciepła poświata u góry,
   wygaszona po 22 % wysokości. */
@media (max-width: 760px) {
  .hero-split::before {
    background:
      linear-gradient(180deg,
        rgba(10, 9, 8, 0.50) 0%,
        rgba(10, 9, 8, 0.78) 14%,
        var(--color-bg) 22%) 0 0 / 100% 100% no-repeat,
      image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
        center 46% / cover no-repeat;
  }
  html[data-theme="light"] .hero-split::before {
    background:
      linear-gradient(180deg,
        rgba(250, 248, 244, 0.58) 0%,
        rgba(250, 248, 244, 0.86) 12%,
        var(--color-bg) 20%) 0 0 / 100% 100% no-repeat,
      image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
        center 46% / cover no-repeat;
  }
}

/* ⛔ NIE robić paska przezroczystym nad kadrem. Kusi, bo kryjące tło paska
   kładzie na zdjęciu poziomą kreskę — ale strona NIE NADAJE żadnej klasy przy
   przewijaniu (sprawdzone: `navbar-scrolled` nie występuje w index.html ani
   razu, przy kontroli pozytywnej `navbar-inner` = 6 trafień). Przezroczysty
   pasek zostałby przezroczysty na CAŁEJ stronie i tekst wjechałby pod tekst.
   Zamiast tego zdjęcie wchodzi POD pasek, a pasek zostaje kryjący w tym samym
   `--color-bg`, do którego zdjęcie i tak jest u góry przyciemnione. */

/* ------------------------------------------------------------
   15. RYTM PIERWSZEGO KADRU — żeby wydruk był widoczny, nie domyślany
   ------------------------------------------------------------
   Pomiar przed: przy oknie 1440×900 górna krawędź wydruku stała na 1009 px,
   czyli 109 px pod zgięciem — człowiek nie miał POWODU przewijać.
   Trzy cięcia, żadne nie rusza treści: górne powietrze hero, wysokość portretu
   i odstęp między blokiem nagłówka a wydrukiem.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .hero { padding-top: clamp(20px, 2.6vw, 36px); }
  .hero-split {
    margin-bottom: var(--space-6) !important;
    align-items: start;
    /* Kolumna nagłówka dostaje 1,6 części zamiast dotychczasowych ~1,2, a odstęp
       między kolumnami schodzi z 80 px do 56 px. Powód nie jest estetyczny:
       w znaczniku h1 stoi jawny `<br>` po „Dostajesz pracownika AI," — czyli
       autor chciał DWÓCH wierszy. Przy kolumnie 577 px ten wiersz się nie mieścił
       i łamał się na dwa, więc nagłówek miał CZTERY wiersze zamiast trzech.
       Szerszą kolumną nie zmieniamy ani jednego słowa — pozwalamy złamaniu
       zadziałać tak, jak zostało napisane. */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
    gap: clamp(24px, 3.4vw, 56px) !important;
  }
  /* Portret nie dyktuje już wysokości bloku (kolumna nagłówka jest wyższa), więc
     jego wysokość jest wyłącznie decyzją kompozycyjną: 320 px trzyma proporcję
     bliską 4:3 przy węższej kolumnie. Kadr zostaje na twarzy
     (`object-position: center 20%` w index.html) — ucina się tło, nie osoba. */
  .hero-split-aside img,
  .hero-founder-card picture img,
  .hero-founder-card img { max-height: 320px !important; width: 100%; object-fit: cover; }
}

/* ------------------------------------------------------------
   16. ZGODA NA CIASTECZKA — PRZENIESIONE DO cookie-consent.js
   ------------------------------------------------------------
   Karta w rogu zamiast pasa przez cały ekran stała najpierw tutaj, ale baner
   pokazuje się na WSZYSTKICH stronach, a ten arkusz ładują cztery. Kształt
   siedzi więc teraz w `cookie-consent.js`, czyli tam, gdzie powstaje reszta
   jego stylu: jedno źródło zamiast dwóch, które mogłyby się rozjechać.
   ⛔ Nie przywracać reguły tutaj — szukaj `.s10h-cc-banner` w tamtym pliku.
   ------------------------------------------------------------ */

/* ============================================================
   17. KLISZA — jedna korekta barwna dla wszystkich zdjęć serwisu
   ------------------------------------------------------------
   Rozdział 04 makiety. Zdjęcia w tym serwisie pochodzą z różnych aparatów,
   różnych lat i różnych temperatur barwowych: portret zrobiony przy oknie
   (zimne światło dzienne), zdjęcie u klienta w złotej godzinie, sala
   warsztatowa oświetlona monitorami na niebiesko, kadry wygenerowane.
   Postawione obok siebie czytają się jak materiał z czterech różnych firm.

   Korekta siedzi w CSS, nie w plikach, więc waży ZERO kilobajtów i da się
   ją cofnąć jedną linią. Trzy stopnie, bo jeden nie starczy: źródło ciepłe
   potrzebuje ledwie muśnięcia, źródło zimne potrzebuje przesunięcia odcienia.

   ⛔ NIE NAKŁADAĆ na zrzuty ekranu, dokumenty i certyfikaty. Tam filtr nie
   ujednolica, tylko utrudnia odczyt — a certyfikat ma być czytelny, bo jest
   dowodem, nie fakturą.
   ------------------------------------------------------------ */

.klisza-lekki  { filter: saturate(0.88) contrast(1.06) brightness(0.96) sepia(0.10); }
.klisza-sredni { filter: saturate(0.60) contrast(1.13) brightness(0.85) sepia(0.30) hue-rotate(-6deg); }

/* Portret założyciela stoi w pierwszym kadrze OBOK zdjęcia warsztatu, które
   jest już po kliszy. Bez korekty portret jest o dwa stopnie chłodniejszy
   od tła, na którym leży, i wygląda jak wklejka. */
/* ⛔ Chwyt na `.hero-split-aside`, NIE tylko na `.hero-founder-card`. Zmierzone
   sondą: ukraińska wersja strony ma ten sam portret w figurze BEZ tej klasy
   (styl wpisany w atrybut), więc reguła celująca w samą klasę nie trafiała
   w nic i nie dawała żadnego błędu — dwa zrzuty wychodziły bajt w bajt
   identyczne. `.hero-split-aside` stoi na obu wersjach. */
.hero-split-aside img,
.hero-founder-card img,
.hero-founder-card picture img {
  filter: saturate(0.88) contrast(1.06) brightness(0.96) sepia(0.10);
}

/* W motywie dziennym powierzchnia jest jasna, więc przyciemnianie nie jest
   potrzebne — zostaje samo ujednolicenie barwy. */
html[data-theme="light"] .hero-split-aside img,
html[data-theme="light"] .hero-founder-card img,
html[data-theme="light"] .hero-founder-card picture img,
html[data-theme="light"] .klisza-lekki {
  filter: saturate(0.90) contrast(1.03) sepia(0.08);
}
/* PORT-KINO-V13: `.klisza-sredni` miała noc, ale nie dzień (`.klisza-lekki` wyżej
   dostała wariant dzienny 16.09, ten nie — luka, nie decyzja). Ten sam wzorzec
   co makieta (materialy/.../makieta-kino-home.html: tylko brightness .85→.935,
   reszta bez zmian), odbiorca to `.kadr-filmowy` w #twoje-dane (rozdział 05). */
html[data-theme="light"] .klisza-sredni {
  filter: saturate(0.60) contrast(1.13) brightness(0.935) sepia(0.30) hue-rotate(-6deg);
}

/* Kadr filmowy 2.39:1 (rozdział 05). Poniżej 760 px schodzi do 2:1, bo pas
   163 px wysokości na telefonie to szpara, nie kadr. */
.kadr-filmowy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: #000;
}
.kadr-filmowy > img,
.kadr-filmowy > picture > img { width: 100%; height: 100%; object-fit: cover; }
/* winieta: ściąga wzrok do środka kadru, tak samo jak w makiecie */
.kadr-filmowy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(118% 96% at 50% 44%, transparent 34%, rgba(8, 6, 4, 0.74) 100%);
}
@media (min-width: 760px) { .kadr-filmowy { aspect-ratio: 2.39 / 1; } }

/* ============================================================
   18. PRZEŁĄCZNIK ŚWIATŁA W PASKU (decyzja właściciela 15.09.2026)
   ------------------------------------------------------------
   Kształt z makiety: dwa pola w jednej ramce, wciśnięte pole na bursztynie.
   ⛔ Bez kroju maszynowego — L-720 trzyma mono wyłącznie w wydruku; tu idzie
   Inter wersalikami ze światłem międzyliterowym, tak jak inne etykiety paska.
   Zachowanie: /motyw.js. Ustawienie przy starcie: skrypt wpisany w <head>.
   ============================================================ */
.przelacznik-swiatla {
  display: inline-flex;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  flex-shrink: 0;
}
.przelacznik-swiatla button {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 11px;
  cursor: pointer;
  line-height: 1.2;
  transition: background-color var(--duration-fast, .15s) var(--ease-out, ease),
              color var(--duration-fast, .15s) var(--ease-out, ease);
}
.przelacznik-swiatla button:hover { color: var(--color-text-primary); }
.przelacznik-swiatla button[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent, #1A1814);
}
.przelacznik-swiatla button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
/* Skrót w paśmie, w którym pasek robi się ciasny: zostają same znaki.
   Etykieta tekstowa nie znika z dostępności — siedzi w aria-label guzika. */
.przelacznik-swiatla .znak { display: none; }
@media (max-width: 1439px) {
  .przelacznik-swiatla .slowo { display: none; }
  .przelacznik-swiatla .znak { display: inline; font-size: 15px; line-height: 1; letter-spacing: 0; }
  .przelacznik-swiatla button { padding: 6px 9px; }
}
/* Na wąskim ekranie pasek chowa menu do hamburgera — przełącznik zostaje,
   bo to jedna z dwóch rzeczy, których szuka się w pasku od razu. */
/* ⛔ NA TELEFONIE PRZELACZNIK SCHODZI Z PASKA DO MENU. Zmierzone 16.09 przy
   390 px: dolozenie przelacznika do `.nav-actions` wypchnelo pasek poza ekran
   o 15 px na stronie glownej i o 51 px na wersji ukrainskiej (przed zmiana oba
   mieScily sie CO DO PIKSELA). To byla regresja wprowadzona przez ten element,
   nie usterka zastana. W pasku zostaje logo, hamburger i CTA; przelacznik stoi
   pierwszy w menu pod hamburgerem, gdzie ma miejsce na pelne etykiety. */
@media (max-width: 640px) {
  .navbar .przelacznik-swiatla { display: none; }
}
.mm-swiatlo { display: flex; align-items: center; gap: var(--space-3); }
.mm-swiatlo .przelacznik-swiatla .slowo { display: inline; }
.mm-swiatlo .przelacznik-swiatla .znak { display: none; }
.mm-swiatlo .przelacznik-swiatla button { padding: 9px 16px; font-size: 12px; }

@media (max-width: 480px) {
  .przelacznik-swiatla button { padding: 5px 8px; }
}

/* ------------------------------------------------------------
   WYDRUK NA STRONACH OFERTY (P2b, 17.09.2026) — brandbook §11.3 R3.8.
   Bazowe reguły `.wydruk*` żyły WYŁĄCZNIE w lokalnym <style> index.html
   (linie ~1686-1775 tego pliku w chwili pisania) — siedem stron ofertowych
   (ai-dla-*.html, cennik/, tryb-poufny/) ładują teraz ten plik + wow.css,
   ale wow.css niesie tylko WARSTWĘ RUCHU/RESPONSYWNOŚCI wydruku
   (`.hero-split-aside .wydruk-lista`, toggle mobile), nie samą kartę.
   Kopia jeden-do-jednego z index.html, zero nowych wartości — ⛔ WOW.CSS
   i INDEX.HTML NIE SĄ EDYTOWANE tym zadaniem (P2b brief), więc baza karty
   ląduje tutaj, żeby siedem stron miało z czego renderować wydruk.
   ------------------------------------------------------------ */
.wydruk {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.wydruk-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: none;
}
.wydruk-label  { color: var(--color-text-primary); }
.wydruk-czas   { color: var(--color-text-tertiary); }
.wydruk-zakres {
  margin-left: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  white-space: normal;
}

.wydruk-lista {
  counter-reset: wydruk;
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.wydruk-lista > li {
  counter-increment: wydruk;
  position: relative;
  padding-left: 3.2ch;
}

.wydruk-lista > li::before {
  content: counter(wydruk, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.wydruk-lista strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.wydruk-stopka {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

@media (min-width: 720px) {
  .wydruk { padding: var(--space-6) var(--space-8); }
}