@charset "utf-8";
/* =====================================================================
   WĘZEŁ — system projektowy makiety wielkafirma.pl (przebudowa premium)
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   Idea: duża organizacja to SCHEMAT POŁĄCZEŃ — węzły (role) i krawędzie
   (przekazania). Cała warstwa wizualna jest zbudowana z jednego motywu:
   krawędzie biegną wyłącznie pod kątem 0°, 45° i 90°, węzeł jest kwadratem
   obróconym o 45°, a liczby porządkowe składane są krojem o stałej szerokości.
   Granat korporacyjny niesie powierzchnie, bursztyn jest JEDNYM akcentem
   i pokazuje bieżący punkt schematu.

   ⚠ SCHEMAT JEST DEKORACJĄ (aria-hidden). Nie wnosi ani jednej informacji,
   której nie ma w tekście — sekcja 6B planu, nie 6A.

   ⚠ Kolejność ważna dla pułapek: reguły ogólne PRZED komponentami, a każdy
   komponent stojący w prozie ma prefiks „.tresc", żeby wygrać specyficzność
   z „.tresc p a" (0-1-2).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:          #F4F7FB;   /* chłodna biel — podłoże */
  --papier-karta:    #FFFFFF;   /* płyta, karta */
  --tlo-2:           #E6ECF5;   /* pasmo drugoplanowe */
  --wiodaca-jasna:   #D8E3F1;   /* plakietki, pola cichych bloków */
  /* pismo */
  --atrament:        #0F1A2B;   /* granatowa czerń — proza */
  --atrament-cichy:  #414E66;
  /* barwa wiodąca */
  --wiodaca:         #1D3E6E;   /* granat — powierzchnie, kreski, schemat */
  --wiodaca-ciemna:  #16325C;   /* nagłówki i odsyłacze na jasnym */
  --akcent:          #8A5309;   /* bursztyn przygaszony — TEKST akcentu na jasnym */
  --linia:           #6E7F99;   /* obwódki — element nietekstowy */
  --linia-cicha:     #C8D3E3;   /* włos — wyłącznie dekoracja */
  --na-wiodacej:     #FFFFFF;

  /* powierzchnie ciemne */
  --granat-noc:      #0B1526;   /* nagłówek, stopka */
  --granat:          #12233D;   /* hero, pasmo nocne */
  --granat-2:        #1B3357;   /* karta na ciemnym */
  --granat-3:        #1A2E4D;   /* plakietka na ciemnym */
  --bursztyn:        #E3A130;   /* AKCENT — ornament i powierzchnie na ciemnym */
  --na-ciemnym:      #EDF2FA;
  --na-ciemnym-cichy:#C6D4E8;
  --linia-noc:       #7F91AC;   /* obwódki na ciemnym — element nietekstowy */
  --ikona-noc:       #8FA3C0;

  /* przycisk — tokeny, żeby pasmo nocne przestawiło go jednym nadpisaniem */
  --przycisk-tlo:        var(--wiodaca-ciemna);
  --przycisk-tekst:      #FFFFFF;
  --przycisk-tlo-hov:    var(--bursztyn);
  --przycisk-tekst-hov:  var(--granat-noc);
  --fokus:               var(--wiodaca-ciemna);
  --cyfra:               #B6C6DD;   /* ozdobna liczba sekcji — dekoracja */

  /* ORNAMENT: kafel schematu połączeń (węzły + krawędzie 45°/90°).
     Tylko dekoracja. Kafel 168×168 px jest bezszwowy: krawędzie biegną
     przez punkty (0,84) (84,0) (168,84) (84,168), więc sąsiadujące kafle
     przedłużają te same linie. */
  --siatka-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='none' stroke='%231D3E6E' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 84L84 0L168 84L84 168Z'/%3E%3Cpath d='M0 0L168 168'/%3E%3Cpath d='M168 0L0 168'/%3E%3C/g%3E%3Cg fill='%231D3E6E' fill-opacity='.20'%3E%3Ccircle cx='84' cy='84' r='3.4'/%3E%3Ccircle cx='0' cy='84' r='2.6'/%3E%3Ccircle cx='168' cy='84' r='2.6'/%3E%3Ccircle cx='84' cy='0' r='2.6'/%3E%3Ccircle cx='84' cy='168' r='2.6'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='168' cy='0' r='2'/%3E%3Ccircle cx='0' cy='168' r='2'/%3E%3Ccircle cx='168' cy='168' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --siatka-bursztyn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='none' stroke='%23E3A130' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M0 84L84 0L168 84L84 168Z'/%3E%3Cpath d='M0 0L168 168'/%3E%3Cpath d='M168 0L0 168'/%3E%3C/g%3E%3Cg fill='%23E3A130' fill-opacity='.26'%3E%3Ccircle cx='84' cy='84' r='3.4'/%3E%3Ccircle cx='0' cy='84' r='2.6'/%3E%3Ccircle cx='168' cy='84' r='2.6'/%3E%3Ccircle cx='84' cy='0' r='2.6'/%3E%3Ccircle cx='84' cy='168' r='2.6'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='168' cy='0' r='2'/%3E%3Ccircle cx='0' cy='168' r='2'/%3E%3Ccircle cx='168' cy='168' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --siatka-biel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 84L84 0L168 84L84 168Z'/%3E%3Cpath d='M0 0L168 168'/%3E%3Cpath d='M168 0L0 168'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' fill-opacity='.16'%3E%3Ccircle cx='84' cy='84' r='3.4'/%3E%3Ccircle cx='0' cy='84' r='2.6'/%3E%3Ccircle cx='168' cy='84' r='2.6'/%3E%3Ccircle cx='84' cy='0' r='2.6'/%3E%3Ccircle cx='84' cy='168' r='2.6'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='168' cy='0' r='2'/%3E%3Ccircle cx='0' cy='168' r='2'/%3E%3Ccircle cx='168' cy='168' r='2'/%3E%3C/g%3E%3C/svg%3E");

  --krój-naglowek: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-tekst:    "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM ani w CH — jedna krawędź dla nagłówków, prozy
     i kresek; ch w kroju o wąskim zerze kłamie o ćwierć wiersza. */
  --kolumna:     36rem;   /* kolumna prozy (≈72 znaki) */
  --pas-szer:    84rem;   /* maksymalna szerokość pasma */
  --plyta-szer:  54rem;   /* biała płyta jest wyraźnie węższa od pasma */
  --margines:    clamp(20px, 5vw, 112px);
  --zwis:        3.4rem;  /* ile węzeł nagłówka wychodzi w lewą szynę */
  --zachodzenie: clamp(1.4rem, .9rem + 2vw, 3.6rem);

  --promien:     3px;     /* elegancja B2B: cienkie linie, ostre naroża */
  --cien-plyta:  0 30px 60px -34px rgba(11, 21, 38, .46), 0 2px 8px -4px rgba(11, 21, 38, .14);
  --cien-karta:  0 20px 40px -26px rgba(11, 21, 38, .44), 0 1px 3px -2px rgba(11, 21, 38, .16);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.72;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}" — pogrubienie samą wagą pisma */
strong, b { color: inherit; font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.5rem;
  background: var(--bursztyn); color: var(--granat-noc);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza stoi
   w środkowym torze (symetrycznie — bramka B13 odrzuca kompozycję
   jednostronną), a bloki oznaczone klasą .szeroki rozpychają się na pasmo.
   ⚠ Kolumna jest WYŚRODKOWANA w każdym wariancie kontenera, więc zmiana
   max-width płyty NIE przesuwa lewej krawędzi prozy — wszystkie pasma mają
   jedną krawędź tekstu. */
.kontener {
  position: relative;
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
.kontener--hero > * { grid-column: pelna-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  --fokus: var(--bursztyn);
  background-color: var(--granat-noc);
  background-image: var(--siatka-biel);
  background-size: 168px 168px;
  color: var(--na-ciemnym);
}
/* kreska konstrukcyjna pod paskiem: granat — bursztyn — cień */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 22%, var(--bursztyn) 22% 31%, var(--granat-2) 31% 100%);
}
/* ⚠ sygnatura ma 44 znaki, a cztery etykiety menu razem ponad 70 — na ŻADNEJ
   szerokości nie mieszczą się w jednym wierszu. Zamiast udawać, że się mieszczą
   (i dostawać przypadkowe zawinięcie), pasek jest ŚWIADOMIE dwupiętrowy:
   sygnatura, pod nią nawigacja. Ten sam układ na 360 i na 1920 px. */
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: .1rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.55rem, 1vw, 1.05rem);
}

/* sygnatura słowna — typograficzna; nigdy nie udaje logotypu firmy (T8, T9) */
.znak {
  flex: 1 1 100%;
  display: inline-flex; align-items: center; gap: .72em; min-height: 46px;
  max-width: 100%;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(.98rem, .9rem + .3vw, 1.32rem);
  line-height: 1.42; letter-spacing: -.005em;
  text-decoration: none; color: var(--na-ciemnym);
  padding-inline-end: .2em;
}
/* ⚠ podkreślenie o stałej szerokości wjeżdżało pod DRUGI wiersz sygnatury,
   gdy nazwa zawijała się na 390 px. Znakiem sygnatury jest więc WĘZEŁ —
   ten sam romb, którym opisany jest cały schemat — a nie kreska. */
.znak::before {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--bursztyn);
  transition: transform .3s ease;
}
.znak:hover::before { transform: rotate(135deg); }
.znak:hover .znak__tekst {
  text-decoration: underline; text-decoration-color: var(--bursztyn);
  text-decoration-thickness: 2px; text-underline-offset: .2em;
}

/* ⚠ nawigacja MA się kurczyć i zawijać — menu jest zwykłą listą, bez <details>,
   więc pułapka T7 (::details-content) w tym layoucie nie występuje. */
.menu { flex: 1 1 100%; min-width: 0; display: flex; justify-content: flex-start; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: .1rem clamp(.1rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .6em;
  font-weight: 500; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--na-ciemnym-cichy);
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .6em; width: 0; height: 2px;
  background: var(--bursztyn); transition: width .25s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { width: calc(100% - 1.2em); }
.menu__link[aria-current="page"] { color: var(--na-ciemnym); font-weight: 600; }
/* ⚠ pozycja bieżąca ma NIE TYLKO kolor: kreska + węzeł, czyli ten sam znak,
   którym opisany jest cały schemat (kolor nigdy nie jest jedynym nośnikiem). */
.menu__link[aria-current="page"]::after { width: calc(100% - 1.2em); height: 2px; }
.menu__link[aria-current="page"]::before {
  content: ""; position: absolute; inset-block-end: calc(.5rem - 3px);
  inset-inline-start: calc(.6em - 4px);
  width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--bursztyn);
}
@media (min-width: 1100px) { .menu__link { font-size: .78rem; padding-inline: .8em; } }
@media (max-width: 780px) {
  .menu__link { padding-inline: .45em; letter-spacing: .08em; }
  /* ⚠ TU BYŁ BŁĄD: wspólna reguła „::after, [aria-current]::after" ustawiała
     szerokość kreski dla KAŻDEJ pozycji, więc na 390 px podkreślone było całe
     menu i pozycja bieżąca przestawała się wyróżniać. Szerokość zostaje
     wyłącznie przy :hover i przy aria-current. */
  .menu__link::after { inset-inline-start: .45em; }
  .menu__link:hover::after,
  .menu__link[aria-current="page"]::after { width: calc(100% - .9em); }
  .menu__link[aria-current="page"]::before { inset-inline-start: calc(.45em - 4px); }
}
/* pasek przyklejony tylko tam, gdzie nie zjada ćwierci ekranu */
@media (max-width: 899px) { .naglowek { position: static; } }

/* --- 5. HERO --------------------------------------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  --fokus: var(--bursztyn);
  background-color: var(--granat);
  background-image:
    var(--siatka-biel),
    radial-gradient(74% 62% at 86% 2%, rgba(31, 66, 120, .85) 0%, rgba(31, 66, 120, 0) 62%),
    radial-gradient(48% 46% at 4% 96%, rgba(227, 161, 48, .12) 0%, rgba(227, 161, 48, 0) 68%),
    linear-gradient(163deg, #1A3157 0%, #12233D 52%, #0B1526 100%);
  background-size: 168px 168px, auto, auto, auto;
  color: var(--na-ciemnym);
  padding-block: clamp(3rem, 1.7rem + 4.6vw, 7.2rem) clamp(4.4rem, 2.4rem + 6vw, 9.2rem);
}
/* dolna krawędź hero — pasek konstrukcyjny z bursztynowym odcinkiem */
.hero::after {
  content: ""; position: absolute; z-index: 0;
  inset-block-end: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 26%, var(--bursztyn) 26% 34%, rgba(29, 62, 110, .25) 34% 100%);
}
/* ORNAMENT: schemat połączeń (inline SVG, aria-hidden) */
.hero__schemat {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -8%;
  width: clamp(340px, 46vw, 920px); aspect-ratio: 6 / 5;
  transform: translateY(-50%);
  color: var(--na-ciemnym-cichy);   /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
}
.hero__schemat svg { width: 100%; height: auto; display: block; }
.hero__schemat .kr { stroke-opacity: .26; }
.hero__schemat .kr--mocna { stroke: var(--bursztyn); stroke-opacity: .75; }
.hero__schemat .wezly { stroke-opacity: .42; }
.hero__schemat .rdzen { fill: var(--bursztyn); fill-opacity: .92; }
.hero__schemat .aureola { stroke: var(--bursztyn); stroke-opacity: .34; }
.hero__poswiata {
  position: absolute; z-index: 0;
  inset-block-start: -26%; inset-inline-start: -14%;
  width: clamp(300px, 44vw, 820px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 163, 192, .20) 0%, rgba(143, 163, 192, 0) 68%);
  pointer-events: none;
}
/* ZASŁONA — leży NAD schematem i POD tekstem (kolejność w DOM decyduje
   przy równym z-index). Bez niej krawędzie schematu przechodziły przez lid
   na 390 px. B6 mierzy tekst wobec background-color hero, a rzeczywisty render
   jest po zasłonie CIEMNIEJSZY, więc zapas kontrastu tylko rośnie. */
.hero__zaslona {
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(102deg,
    rgba(11, 21, 38, .84) 0%, rgba(11, 21, 38, .66) 32%,
    rgba(11, 21, 38, .16) 64%, rgba(11, 21, 38, 0) 82%);
}
@media (max-width: 899px) {
  /* na wąskim ekranie schemat i tekst leżą na sobie, więc zasłona jest okrągła:
     najgęstsza tam, gdzie stoi kolumna tekstu, i otwarta w prawym górnym rogu,
     żeby ornament w ogóle był widoczny */
  .hero__zaslona {
    background: radial-gradient(135% 104% at 4% 54%,
      rgba(11, 21, 38, .93) 0%, rgba(11, 21, 38, .85) 54%, rgba(11, 21, 38, .24) 100%);
  }
  .hero__schemat { opacity: .62; inset-inline-end: -22%; }
}
.hero .kontener { position: relative; z-index: 1; }

.hero .tytul {
  position: relative;
  margin: 0 0 clamp(1.1rem, .7rem + 1.1vw, 2.1rem);
  padding-block-start: clamp(2rem, 1.5rem + 1.3vw, 3.1rem);
  max-width: 14em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.4rem);
  line-height: 1.03; letter-spacing: -.026em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* krawędź schematu wchodząca w tytuł + węzeł na jej początku */
.hero .tytul::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px;
  width: clamp(74px, 10vw, 190px); height: 2px;
  background: linear-gradient(90deg, var(--bursztyn) 0 42%, rgba(227, 161, 48, .18) 100%);
}
.hero .tytul::after {
  content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 0;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--bursztyn);
}
.hero .lid, .hero .zajawka {
  margin: 0; max-width: 40rem;
  font-size: clamp(1.04rem, .96rem + .42vw, 1.34rem);
  line-height: 1.62; color: var(--na-ciemnym-cichy);
}
/* wpisy i podstrony: hero niższy, tytuł spokojniejszy */
.widok--wpis .hero, .widok--podstrona .hero, .widok--blog .hero, .widok--specimen .hero {
  padding-block: clamp(2.6rem, 1.5rem + 3.6vw, 5.6rem) clamp(3.6rem, 2rem + 5vw, 7.4rem);
}
.widok--wpis .hero .tytul, .widok--podstrona .hero .tytul,
.widok--blog .hero .tytul, .widok--specimen .hero .tytul {
  font-size: clamp(2rem, 1.1rem + 3.2vw, 4.3rem);
  max-width: 13em;
}

/* --- 6. PASMA I PŁYTY ------------------------------------------------ */
/* flow-root: ujemny margines płyty ma PRZESUNĄĆ płytę, a nie całe pasmo */
.pas { position: relative; display: flow-root; }
.pas > .kontener { position: relative; z-index: 1; }

.pas--papier {
  background-color: var(--papier);
  padding-block: clamp(2.4rem, 1.4rem + 2.8vw, 4.8rem);
}
/* ⚠ pasmo o płaskim papierze czytało się jak kartka papieru — trzeci rejestr
   pasma jest więc skośnym rozmyciem wiodącej jasnej, w tym samym kącie 45°,
   w którym biegną krawędzie schematu. */
.pas--pole {
  background-color: var(--papier);
  border-block-start: 1px solid var(--linia-cicha);
  background-image:
    var(--siatka-navy),
    linear-gradient(135deg, rgba(216, 227, 241, .95) 0%, rgba(240, 244, 250, .55) 46%, rgba(244, 247, 251, 0) 78%);
  background-size: 168px 168px, auto;
  padding-block: clamp(2.6rem, 1.5rem + 3.2vw, 5.4rem);
}
.pas--plansza {
  background-color: var(--tlo-2);
  background-image: var(--siatka-navy);
  background-size: 168px 168px;
  border-block: 1px solid var(--linia-cicha);
  padding-block: clamp(2.6rem, 1.5rem + 3.2vw, 5.4rem);
}
/* pasmo, na którym leży biała PŁYTA nachodząca na sąsiada z góry */
.pas--plyta {
  background-color: var(--papier);
  padding-block: 0 clamp(1.8rem, 1.1rem + 2.2vw, 3.6rem);
}
.plyta {
  z-index: 2;
  max-width: min(100%, var(--plyta-szer));
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(2rem, 1.3rem + 2.4vw, 4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien);
  box-shadow: var(--cien-plyta);
}
/* gzyms płyty — odcinek schematu na górnej krawędzi */
.plyta::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px; border-radius: var(--promien) var(--promien) 0 0;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 24%, var(--bursztyn) 24% 33%, var(--linia-cicha) 33% 100%);
}
.pas--plyta + .pas--plyta { padding-block-start: clamp(1rem, .6rem + 1.2vw, 2rem); }
.pas--plyta + .pas--plyta > .plyta { margin-block-start: 0; }

/* pasmo nocne — MOCNY AKCENT. Nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł (pułapka
   „globalny kolor na powierzchni o odwrotnej jasności"). */
.pas--noc {
  overflow: hidden;
  --papier:          var(--granat);
  --papier-karta:    var(--granat-2);
  --tlo-2:           var(--granat-3);
  --wiodaca-jasna:   var(--granat-3);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--na-ciemnym-cichy);
  --wiodaca:         var(--bursztyn);
  --wiodaca-ciemna:  var(--na-ciemnym);
  --akcent:          var(--bursztyn);
  --linia:           var(--linia-noc);
  --linia-cicha:     #2C4468;
  --na-wiodacej:     var(--granat-noc);
  --cyfra:           rgba(227, 161, 48, .40);
  --fokus:           var(--bursztyn);
  --przycisk-tlo:       var(--bursztyn);
  --przycisk-tekst:     var(--granat-noc);
  --przycisk-tlo-hov:   #FFFFFF;
  --przycisk-tekst-hov: var(--granat-noc);
  background-color: var(--granat);
  background-image:
    var(--siatka-bursztyn),
    radial-gradient(62% 58% at 92% 4%, rgba(31, 66, 120, .70) 0%, rgba(31, 66, 120, 0) 64%),
    radial-gradient(46% 42% at 2% 98%, rgba(227, 161, 48, .10) 0%, rgba(227, 161, 48, 0) 68%);
  background-size: 168px 168px, auto, auto;
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.7rem + 3.4vw, 5.8rem);
}
.pas--noc::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    rgba(227, 161, 48, .12) 0 62%, var(--bursztyn) 62% 71%, rgba(227, 161, 48, .12) 71% 100%);
}

/* ozdobna liczba porządkowa sekcji w lewej szynie — DEKORACJA, nie treść.
   Powstaje licznikiem CSS, więc nie ma jej w DOM-ie i nie jest dopiskiem. */
.tresc { counter-reset: sekcja; }
.pas--sek { counter-increment: sekcja; }
/* ⚠⚠ PSEUDOELEMENT ::after, NIE ::before. Płyta rysuje gzyms na „.plyta::before",
   a płyta JEST tym samym elementem co .kontener — wspólny ::before dawał jeden
   pseudoelement na dwa zadania: gzyms tracił 96 px z lewej, a liczba wylewała
   się z pudełka o wysokości 3 px.
   ⚠ Liczba stoi w PRAWEJ szynie: w lewej zderzała się z węzłem nagłówka sekcji.
   Kolumna prozy jest wyśrodkowana w pudełku kontenera, więc jej prawa krawędź
   leży dokładnie „50% + kolumna/2" od lewej krawędzi pudełka. */
.pas--sek > .kontener::after {
  content: counter(sekcja, decimal-leading-zero);
  display: none;
  position: absolute;
  inset-block-start: clamp(1.6rem, 1rem + 1.4vw, 2.8rem);
  inset-inline-start: calc(50% + var(--kolumna) / 2 + 1.2rem);
  font-family: var(--krój-maszyna); font-weight: 600;
  font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.9rem);
  line-height: 1; letter-spacing: .04em;
  color: var(--cyfra);
  pointer-events: none;
}
@media (min-width: 1200px) { .pas--sek > .kontener::after { display: block; } }

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.3rem, 1.5rem + 2vw, 3.6rem) 0 .9rem;
  padding-block-start: clamp(1.1rem, .8rem + 1vw, 1.9rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.48rem, 1.05rem + 1.45vw, 2.45rem);
  line-height: 1.16; letter-spacing: -.019em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* WĘZEŁ + KRAWĘDŹ przy każdym nagłówku sekcji — ten sam znak co w schemacie */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px;
  width: clamp(44px, 6vw, 104px); height: 2px;
  background: linear-gradient(90deg, var(--bursztyn) 0 46%, rgba(227, 161, 48, .2) 100%);
}
.tresc h2::after {
  content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 0;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--bursztyn);
}
.kontener > h2:first-child { margin-block-start: 0; }
/* od 1100 px węzeł ZWISA w lewą szynę i stoi przy PIERWSZYM WIERSZU nagłówka,
   a nie kilkadziesiąt pikseli nad nim */
@media (min-width: 1100px) {
  .tresc h2 { padding-block-start: clamp(.5rem, .3rem + .5vw, 1rem); }
  .tresc h2::before {
    inset-block-start: .56em;
    inset-inline-start: calc(-1 * var(--zwis) + 18px);
    width: calc(var(--zwis) - 26px);
  }
  .tresc h2::after { inset-block-start: calc(.56em - 4px); inset-inline-start: calc(-1 * var(--zwis)); }
}

.tresc h3 {
  position: relative;
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .5rem;
  padding-inline-start: 1.05em;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.12rem, 1.02rem + .34vw, 1.42rem);
  line-height: 1.32; color: var(--atrament);
}
.tresc h3::before {
  content: ""; position: absolute; inset-block-start: .34em; inset-inline-start: 0;
  width: 3px; height: 1em; background: var(--wiodaca);
}

.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }
.tresc .wprowadzenie {
  font-size: clamp(1.04rem, .98rem + .3vw, 1.22rem);
  line-height: 1.66; color: var(--atrament);
}

.tresc p a, .tresc li a {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--bursztyn);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tresc p a:hover, .tresc li a:hover { color: var(--akcent); }

/* --- 8. ODSYŁACZ KIERUNKOWY ------------------------------------------ */
/* akapit, którego CAŁĄ treścią jest odsyłacz — w źródle osobny wiersz.
   ⚠ bramka B7 traktuje go jak samodzielny cel UI, więc musi mieć 44 px.
   ⚠⚠ selektor MUSI mieć prefiks „.tresc", inaczej „.tresc p a" (0-1-2)
   przemaluje napis na kolor odsyłacza prozy. */
.tresc .przejscie { margin-block: 1.6em 1.9em; }
.tresc .przejscie a {
  position: relative;
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px;
  padding: .5em 1.5em .5em 1.7em;
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
  box-shadow: 0 14px 26px -22px rgba(11, 21, 38, .7);
}
/* węzeł na lewej krawędzi pola — znak schematu, nie ikona informacyjna */
.tresc .przejscie a::before {
  content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 50%;
  width: 10px; height: 10px; margin-block-start: -5px;
  transform: rotate(45deg); background: var(--bursztyn);
}
.tresc .przejscie a::after {
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform .25s ease;
}
.tresc .przejscie a:hover {
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border-color: var(--wiodaca-ciemna);
}
.tresc .przejscie a:hover::after { transform: translateX(4px); }
/* pozycja listy, której CAŁĄ treścią jest odsyłacz */
.tresc li > a:only-child { display: inline-flex; align-items: center; min-height: 44px; padding-block: .2rem; }

/* --- 9. PRZYCISK ----------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.8rem, 1.2rem + 1.4vw, 3rem) 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1), inaczej przycisk
   dostanie wygląd odsyłacza kierunkowego. */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 58px; padding: .85rem 2.1rem .85rem 2.3rem;
  background: var(--przycisk-tlo); color: var(--przycisk-tekst);
  border: 1px solid var(--przycisk-tlo); border-radius: var(--promien);
  font-weight: 600; font-size: 1.02rem; letter-spacing: .015em;
  text-decoration: none;
  box-shadow: 0 22px 40px -24px rgba(11, 21, 38, .85);
}
.tresc .przejscie a.przycisk::before {
  inset-inline-start: -6px; width: 12px; height: 12px; margin-block-start: -6px;
  background: var(--bursztyn);
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover {
  background: var(--przycisk-tlo-hov); color: var(--przycisk-tekst-hov);
  border-color: var(--przycisk-tlo-hov);
}
.tresc .przejscie a.przycisk:hover::before { background: var(--wiodaca-ciemna); }

/* --- 10. ZAJAWKA I BLOK CICHY ---------------------------------------- */
.tresc .zajawka { margin: 0; }
/* na jasnym podłożu (gdyby zajawka wypadła poza hero) */
.pas .zajawka {
  padding: 1.1em 1.3em 1.1em 1.5em;
  background: var(--wiodaca-jasna);
  border-inline-start: 3px solid var(--bursztyn);
  font-size: 1.08rem; color: var(--atrament);
}

/* --- 11. LISTA WPISÓW — KARTY JAK WĘZŁY ------------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.8rem, 1.2rem + 1.6vw, 3rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.9rem);
  counter-reset: wpis;
  align-items: stretch;   /* w RZĘDZIE równa wysokość czyta się lepiej */
}
@media (min-width: 860px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  border-radius: var(--promien) var(--promien) 0 0;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 30%, var(--bursztyn) 30% 42%, var(--linia-cicha) 42% 100%);
}
/* węzeł wystający ponad górną krawędź karty */
.tresc .zapowiedz::after {
  content: ""; position: absolute; inset-block-start: -6px;
  inset-inline-start: clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem);
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--bursztyn);
}
.tresc .zapowiedz__tytul {
  margin: 0 0 .6rem; padding: 0;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.14rem, 1.02rem + .42vw, 1.46rem);
  line-height: 1.26; letter-spacing: -.012em;
  color: var(--wiodaca-ciemna);
}
/* PLAKIETKA Z LICZBĄ — liczba krojem o stałej szerokości (licznik CSS) */
.tresc .zapowiedz__tytul::before {
  content: counter(wpis, decimal-leading-zero);
  position: static;
  display: flex; align-items: center; justify-content: center;
  width: 2.9em; height: 2.9em;
  margin-block-end: .95rem;
  background: var(--wiodaca-ciemna); color: #FFFFFF;
  border-radius: var(--promien);
  font-family: var(--krój-maszyna); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; line-height: 1;
}
.tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;                 /* B7 */
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--akcent); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1.3rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a {
  position: static;
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  padding: 0 .1rem; background: none; border: 0; box-shadow: none;
  color: var(--wiodaca-ciemna); font-weight: 600;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  border-block-end: 2px solid var(--bursztyn);
  border-radius: 0;
}
.tresc .zapowiedz .zapowiedz__wiecej a::before { content: none; }
.tresc .zapowiedz .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--wiodaca-ciemna); background: none; }

/* --- 12. KOMPONENTY PROZY (arkusz systemu, zapas dla motywu) ---------- */
.tresc .wyliczenie {
  margin: .5em 0 1.7em; padding: 0; list-style: none;
  display: grid; gap: .55rem;
}
.tresc .wyliczenie li {
  position: relative;
  padding: .8em 1.2em .8em 2.7em;
  background: var(--wiodaca-jasna);
  border-inline-start: 3px solid var(--wiodaca);
  border-radius: var(--promien);
  color: var(--atrament);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.25em; inset-block-start: 1.42em;
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--wiodaca);
}
.tresc .kroki {
  margin: .6em 0 1.9em; padding: 0; list-style: none;
  counter-reset: krok; display: grid; gap: .7rem;
}
.tresc .kroki li {
  counter-increment: krok; position: relative;
  padding: 1em 1.3em 1em 4.2em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 3px solid var(--bursztyn);
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero); position: absolute;
  inset-inline-start: 1em; inset-block-start: .95em;
  width: 2.6em; height: 2.6em;
  display: grid; place-items: center;
  background: var(--wiodaca-ciemna); color: #FFFFFF;
  border-radius: var(--promien);
  font-family: var(--krój-maszyna); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; line-height: 1;
}
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.3vw, 1.7rem) clamp(1rem, .6rem + 1.5vw, 1.9rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: var(--promien);
  font-family: var(--krój-maszyna);
  font-size: .92rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}
.tresc .odsylacz { color: var(--atrament); }

/* --- 13. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  --fokus: var(--bursztyn);
  background-color: var(--granat-noc);
  background-image:
    var(--siatka-bursztyn),
    radial-gradient(58% 92% at 90% 0%, rgba(31, 66, 120, .55) 0%, rgba(31, 66, 120, 0) 64%);
  background-size: 168px 168px, auto;
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.4rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--wiodaca) 0 22%, var(--bursztyn) 22% 31%, rgba(29, 62, 110, .5) 31% 100%);
}
.stopka__pas {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0; position: relative;
  padding-block-start: 1.1rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1rem, .92rem + .3vw, 1.34rem);
  color: var(--na-ciemnym); letter-spacing: -.005em;
}
.stopka__znak::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 18px;
  width: 68px; height: 2px;
  background: linear-gradient(90deg, var(--bursztyn) 0 46%, rgba(227, 161, 48, .18) 100%);
}
.stopka__znak::after {
  content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 0;
  width: 10px; height: 10px; transform: rotate(45deg); background: var(--bursztyn);
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.4rem, 1.8vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--na-ciemnym-cichy); font-weight: 500;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--bursztyn); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: .4em 1.3em;
  border: 1px solid var(--bursztyn); border-radius: var(--promien);
  color: var(--bursztyn); text-decoration: none;
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--bursztyn); color: var(--granat-noc); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha); border-radius: var(--promien);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 76px; }
.próbka__opis {
  display: block; padding: .78rem 1rem;
  font-family: var(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}

/* --- 15. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek { position: static; background: #FFFFFF !important; color: #000000 !important; }
  .naglowek::after, .stopka::before, .pas--noc::before, .hero::after { display: none !important; }
  .hero, .stopka, .pas--noc {
    background: #FFFFFF !important; color: #000000 !important;
  }
  .hero__schemat, .hero__poswiata { display: none !important; }
  .znak, .menu__link, .stopka__znak, .stopka__menu a, .do-gory { color: #000000 !important; }
  .pas--plansza, .pas--pole { background: #FFFFFF; }
  .plyta { box-shadow: none; margin-block-start: 0; }
  .tresc h2, .tresc p a { color: #000000; }
}