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

   IDEA: wideospotkanie widzi się jako SIATKĘ KAFLI — każdy uczestnik ma
   swój prostokąt, każdy o innej jasności, a jeden świeci na zielono
   „połączono”. Makieta jest złożona z takich samych kafli: ciemnych pasm
   grafitu i granatu, płyt podniesionych nad tłem i pojedynczych PŁYT
   ROZJAŚNIONYCH (jasny kafel w ciemnej siatce). Zieleń jest barwą
   wiodącą — świadomie NIE błękit, którym posługuje się sam projekt
   Jitsi Meet (pułapka T9: serwis mówi o cudzym oprogramowaniu i nie
   może wyglądać na jego oficjalną stronę).

   ⚠ 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-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie ciemne — siatka kafli */
  --noc:            #070C14;   /* najgłębszy kafel: hero, stopka, pasmo nocne */
  --hero-1:         #17244A;   /* pierwszy stopień gradientu hero (granat)      */
  --hero-2:         #101A2C;   /* drugi stopień gradientu hero                  */
  --grafit:         #0F1826;   /* podłoże wszystkich widoków */
  --granat:         #142338;   /* pasmo drugoplanowe */
  --kafel:          #1A2537;   /* płyta treści, karta */
  --kafel-2:        #223148;   /* kafel podniesiony: nota, pole odsyłacza */

  /* pismo na ciemnym */
  --biel:           #EDF3FA;   /* proza                     15,95:1 na graficie */
  --biel-lid:       #D6E1EE;   /* lid pod tytułem hero      13,60:1 na nocy     */
  --biel-cicha:     #B4C4D8;   /* zajawki, menu             10,03:1 na graficie */

  /* barwa wiodąca i akcent */
  --zielen:         #3FDC9A;   /* „połączono”               10,11:1 na graficie */
  --zielen-ciemna:  #0B6B48;   /* wariant na jasnej płycie   5,82:1 na świetle  */
  --blekit:         #74B6F0;   /* wskazanie, hover           8,22:1 na graficie */
  --na-zieleni:     #070C14;   /* napis na zielonym polu    11,12:1             */

  /* kreski */
  --obwodka:        #6E8AAB;   /* obwódki elementów UI       3,68:1 najsłabsza  */
  --linia:          #2E3F58;   /* ornament — wyłącznie dekoracja                */
  --linia-mocna:    #47607E;   /* kreska działowa, nie tekst                    */

  /* kafel rozjaśniony (jasna płyta w ciemnej siatce) */
  --swiatlo:        #EEF2F7;
  --swiatlo-2:      #DCE5F0;
  --swiatlo-plyta:  #FFFFFF;
  --linia-swiatlo:  #C6D2E0;
  --linia-swiatlo-2:#93A6BC;
  --ink:            #0D1622;
  --ink-cichy:      #3E4E63;
  --obwodka-jasna:  #6B7F98;
  --blekit-ciemny:  #17537F;

  /* ornamenty — wyłącznie warstwa wizualna, nigdy nośnik informacji */
  --orn-siatka:     rgba(110, 138, 171, .16);
  --orn-siatka-2:   rgba(110, 138, 171, .07);
  --orn-zielen:     rgba(63, 220, 154, .16);
  --orn-blekit:     rgba(116, 182, 240, .13);
  /* mocniejszy komplet dla dużej siatki w paśmie zamykającym */
  --orn-kafel-a:    rgba(63, 220, 154, .26);
  --orn-kafel-b:    rgba(110, 138, 171, .22);
  --orn-kafel-c:    rgba(110, 138, 171, .11);
  --orn-kafel-d:    rgba(116, 182, 240, .22);

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

  /* ⚠⚠ MIARA W REM, NIE W EM ani ch — jedna krawędź dla nagłówków, prozy
     i kresek na każdej szerokości. 36rem ≈ 70 znaków wiersza dla IBM Plex. */
  --kolumna:        36rem;
  --pas-szer:       84rem;
  --margines:       clamp(18px, 4.5vw, 104px);

  --promien:        4px;
  --promien-kafla:  10px;
  --promien-plyty:  18px;
  --cien-plyta:     0 30px 70px -34px rgba(0, 0, 0, .85), 0 2px 12px -6px rgba(0, 0, 0, .6);
  --cien-kafla:     0 18px 40px -26px rgba(0, 0, 0, .8), 0 1px 4px -2px rgba(0, 0, 0, .5);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.4vw, 4.2rem);

  /* faktura siatki kafli — prostokąty o proporcji ekranu uczestnika */
  --tekstura:
    repeating-linear-gradient(90deg, var(--orn-siatka) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(0deg,  var(--orn-siatka) 0 1px, transparent 1px 82px);
}

/* --- 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.9rem + 0.33vw, 1.35rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grafit);
  color: var(--biel);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.74;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
}

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(--zielen);
  outline-offset: 3px;
  border-radius: var(--promien);
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt).
   ⚠⚠ Barwa MUSI być ustawiona także w stanie niezogniskowanym: bez niej odsyłacz
   dostaje domyślny błękit przeglądarki rgb(0,0,238), który na ciemnym podłożu ma
   1,9:1 — bramka B6 mierzy go w każdym widoku, choć oko go nie widzi (clip-path). */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  background: var(--grafit); color: var(--biel);
  width: 200px; 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.6rem;
  background: var(--zielen); color: var(--na-zieleni);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien-kafla) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy, bez siatki tekstu)     */
.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), a bloki oznaczone
   klasą szeroką rozpychają się na całe pasmo. Wszystko jest wyśrodkowane,
   więc lewa krawędź prozy jest IDENTYCZNA w każdym paśmie i na płycie. */
.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 > .kafle-przejsc,
.kontener > .lista-wpisow,
.kontener > .probki { grid-column: pelna-start / pelna-end; }
/* ⚠ JEDNA KRAWĘDŹ: tytuł hero zaczyna się dokładnie tam, gdzie proza
   widoku, i rośnie w prawo. Lid i nota zostają w torze prozy, żeby
   bramka B13 mierzyła zawsze tę samą kolumnę. */
.kontener--hero > .tytul { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 30;
  /* ⚠ faktura wygaszana WARSTWĄ TŁA, nie pseudoelementem: pseudoelement
     rozciągnięty poza pasek (inset-inline: -margines) dawał scrollWidth
     większy od okna o 4,5% na KAŻDEJ szerokości poniżej 1920 (bramka B5).
     W stosie background-image warstwa PIERWSZA maluje się na wierzchu. */
  background-color: var(--noc);
  background-image:
    linear-gradient(90deg, var(--noc) 0%, rgba(7, 12, 20, .55) 52%, rgba(7, 12, 20, .12) 100%),
    var(--tekstura);
  background-position: center;
  border-block-end: 1px solid var(--linia);
}
.naglowek::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg,
    var(--zielen) 0%, var(--zielen) 12%,
    var(--linia-mocna) 12%, var(--linia-mocna) 34%,
    var(--orn-blekit) 34%, var(--orn-blekit) 62%,
    var(--linia) 62%, var(--linia) 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — typograficzna, poprzedzona ORNAMENTEM z trzech kafli.
   Nie udaje logotypu firmy ani znaku cudzego projektu (pułapki T8 i T9). */
.znak {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 48px;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .92rem + .34vw, 1.42rem);
  line-height: 1.15; letter-spacing: .005em;
  text-decoration: none; color: var(--biel);
}
.znak__kafle {
  flex: none; width: 30px; height: 20px;
  background:
    linear-gradient(var(--zielen), var(--zielen))      0    0 / 13px 9px  no-repeat,
    linear-gradient(var(--obwodka), var(--obwodka))   17px  0 / 13px 9px  no-repeat,
    linear-gradient(var(--linia-mocna), var(--linia-mocna)) 0 11px / 13px 9px no-repeat,
    linear-gradient(var(--obwodka), var(--obwodka))   17px 11px / 13px 9px no-repeat;
  border-radius: 2px;
}
.znak__tekst { position: relative; padding-block-end: .1em; }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--zielen);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: nawigacja MA się kurczyć i zawijać. Menu stoi na zwykłej
   liście — bez <details>, więc pułapka T7 (::details-content) nie dotyczy. */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .1rem clamp(.1rem, .9vw, .9rem);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 780px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .8em;
  border-radius: var(--promien);
  background: transparent;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--biel-cicha);
  transition: background .2s ease, color .2s ease;
}
/* ⚠⚠ KAFEL POZYCJI JEST TŁEM ODSYŁACZA, NIE PSEUDOELEMENTEM. Pseudoelement
   ::before z position:absolute maluje się w fazie potomków pozycjonowanych,
   czyli PO tekście rodzica — kafel pozycji bieżącej zakrywał wtedy napis
   „START" i menu wyglądało na puste pole. */
.menu__link::after {
  content: ""; position: absolute; inset-block-end: 8px;
  inset-inline-start: .8em; width: 0; height: 2px;
  background: var(--zielen); transition: width .25s ease;
}
.menu__link:hover { color: var(--biel); background: var(--kafel-2); }
.menu__link:hover::after { width: calc(100% - 1.6em); }
/* pozycja bieżąca: kafel „połączony” — barwa NIE JEST jedynym nośnikiem,
   bo pozycja ma też pełne podkreślenie i mocniejszą wagę pisma */
.menu__link[aria-current="page"] { color: var(--biel); background: var(--kafel-2); }
.menu__link[aria-current="page"]::after { width: calc(100% - 1.6em); height: 3px; }

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(62% 58% at 84% 4%, rgba(63, 220, 154, .16) 0%, rgba(63, 220, 154, 0) 62%),
    radial-gradient(58% 52% at 4% 92%, rgba(116, 182, 240, .16) 0%, rgba(116, 182, 240, 0) 66%),
    linear-gradient(152deg, var(--hero-1) 0%, var(--hero-2) 44%, var(--noc) 100%);
  color: var(--biel);
  padding-block: clamp(2.6rem, 1.4rem + 4.4vw, 6.4rem) clamp(4rem, 2.2rem + 6vw, 9rem);
}
/* faktura siatki kafli na całej szerokości hero — pod treścią (pułapka 4) */
.hero::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image: var(--tekstura);
  background-position: center;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
  pointer-events: none;
}
/* ORNAMENT: siatka kafli uczestników (inline SVG), prawy górny narożnik */
.hero__siatka {
  position: absolute; z-index: 0;
  inset-block-start: -6%; inset-inline-end: -18%;
  width: clamp(360px, 54vw, 1060px); aspect-ratio: 1 / .78;
  color: var(--biel);              /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
  transform: rotate(-4deg);
}
.hero__siatka svg { width: 100%; height: auto; display: block; }
.hero__siatka .kafel-zywy { fill: var(--zielen); }
.hero__siatka .kafel-chlodny { fill: var(--blekit); }
/* ZASŁONA — miękki cień kładziony NA siatkę kafli, żeby proza hero nigdy nie
   stała na ornamencie. Musi być osobnym elementem STOJĄCYM PO siatce: oba mają
   z-index 0, więc o kolejności malowania decyduje kolejność w dokumencie. */
.hero__zaslona {
  position: absolute; z-index: 0; inset: 0;
  background: linear-gradient(100deg,
    rgba(7, 12, 20, .94) 0%, rgba(7, 12, 20, .80) 38%,
    rgba(7, 12, 20, .34) 68%, rgba(7, 12, 20, 0) 92%);
  pointer-events: none;
}
@media (max-width: 899px) {
  .hero__zaslona { background: linear-gradient(180deg,
    rgba(7, 12, 20, .70) 0%, rgba(7, 12, 20, .90) 46%, rgba(7, 12, 20, .96) 100%); }
}
.hero__poswiata {
  position: absolute; z-index: 0;
  inset-block-start: -30%; inset-inline-start: -14%;
  width: clamp(300px, 46vw, 880px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 220, 154, .17) 0%, rgba(63, 220, 154, 0) 66%);
  pointer-events: none;
}
.hero .kontener { position: relative; z-index: 1; }

/* pasek stanu nad tytułem — trzy kafle, jeden „połączony” */
.hero__stan {
  display: flex; align-items: center; gap: 8px;
  margin-block-end: clamp(1.1rem, .8rem + 1vw, 2.2rem);
}
.hero__stan i {
  display: block; height: 10px; border-radius: 2px;
  background: var(--linia-mocna);
}
.hero__stan i:nth-child(1) { width: 58px; background: var(--zielen); }
.hero__stan i:nth-child(2) { width: 26px; background: var(--blekit); opacity: .8; }
.hero__stan i:nth-child(3) { width: 14px; }

.hero .tytul {
  margin: 0 0 clamp(1.2rem, .8rem + 1.1vw, 2.2rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.1rem, 1.35rem + 3.1vw, 4.9rem);
  line-height: 1.02; letter-spacing: -.017em;
  color: var(--biel);
  text-wrap: balance;
  max-width: 17em;
}
.hero .lid {
  margin: 0;
  font-size: 1.16rem; line-height: 1.66;
  color: var(--biel-lid);
}
/* nota hero — kafel podniesiony z zieloną krawędzią „połączono” */
.hero .hero__nota {
  margin: clamp(1.3rem, .9rem + 1.2vw, 2.2rem) 0 0;
  padding: clamp(1rem, .7rem + 1vw, 1.6rem) clamp(1.1rem, .8rem + 1.1vw, 1.8rem);
  background: rgba(34, 49, 72, .78);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--zielen);
  border-radius: 0 var(--promien-kafla) var(--promien-kafla) 0;
  font-size: .99rem; line-height: 1.68;
  color: var(--biel-cicha);
  box-shadow: var(--cien-kafla);
}

/* --- 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; }
/* ⚠ overflow:hidden TYLKO na pasmach bez płyty: płyta ma UJEMNY margines górny
   i wychodzi ponad swoje pasmo — obcięcie zjadłoby jej górną krawędź. */
.pas--grunt, .pas--granat, .pas--noc, .pas--zamkniecie { overflow: hidden; }
.pas > .kontener { position: relative; z-index: 1; }

/* podłoże — grafit z delikatną siatką przy krawędziach */
.pas--grunt {
  background-color: var(--grafit);
  padding-block: clamp(2.4rem, 1.4rem + 3vw, 5rem);
}
.pas--grunt::before,
.pas--grunt::after {
  content: ""; position: absolute; z-index: 0; inset-block: 0;
  width: clamp(90px, 16vw, 320px);
  background-image: var(--tekstura);
  pointer-events: none;
}
.pas--grunt::before {
  inset-inline-start: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.85), transparent);
}
.pas--grunt::after {
  inset-inline-end: 0;
  -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.85), transparent);
  mask-image: linear-gradient(270deg, rgba(0,0,0,.85), transparent);
}

/* LINIA PROWADZĄCA — pionowa kreska w lewej szynie, dokładnie pod znacznikiem
   sekcji. ⚠ pułapka 19: ornament wisi na .kontener (który jest wyśrodkowany),
   nie na oknie — dlatego nigdy nie wjeżdża w łam tekstu ani poza ekran. */
@media (min-width: 1200px) {
  .pas--grunt > .kontener::after,
  .pas--granat > .kontener::after {
    content: ""; position: absolute; z-index: 0;
    inset-block: 1.1rem 1.1rem;
    inset-inline-start: calc(50% - var(--kolumna) / 2 - 4.7rem + 6px);
    width: 2px;
    background: linear-gradient(180deg,
      var(--zielen) 0 22px, var(--linia) 22px 100%);
    opacity: .55;
  }
}

/* pasmo granatowe — druga jasność kafla, skośna faktura */
.pas--granat {
  background-color: var(--granat);
  background-image:
    radial-gradient(52% 60% at 92% 0%, rgba(63, 220, 154, .10) 0%, rgba(63, 220, 154, 0) 64%),
    repeating-linear-gradient(118deg, var(--orn-siatka-2) 0 2px, transparent 2px 26px);
  padding-block: clamp(2.6rem, 1.5rem + 3.4vw, 5.6rem);
  border-block: 1px solid var(--linia);
}
/* szyna kafli przy prawej krawędzi pasma — czysta dekoracja */
.pas--granat .orn--szyna {
  position: absolute; z-index: 0;
  inset-block-start: 12%; inset-inline-end: clamp(8px, 2.4vw, 54px);
  width: clamp(40px, 6vw, 118px); height: 62%;
  background:
    linear-gradient(var(--orn-zielen), var(--orn-zielen))   0 0%   / 100% 16% no-repeat,
    linear-gradient(var(--orn-siatka), var(--orn-siatka))   0 22%  / 100% 16% no-repeat,
    linear-gradient(var(--orn-blekit), var(--orn-blekit))   0 44%  / 100% 16% no-repeat,
    linear-gradient(var(--orn-siatka-2), var(--orn-siatka-2)) 0 66% / 100% 16% no-repeat,
    linear-gradient(var(--orn-siatka), var(--orn-siatka))   0 88%  / 100% 16% no-repeat;
  border-radius: 3px;
  pointer-events: none;
}
@media (max-width: 899px) { .pas--granat .orn--szyna { display: none; } }

/* pasmo nocne — najgłębszy kafel, mocny akcent kompozycji */
.pas--noc {
  background-color: var(--noc);
  background-image:
    radial-gradient(56% 60% at 8% 4%, rgba(63, 220, 154, .14) 0%, rgba(63, 220, 154, 0) 62%),
    radial-gradient(46% 50% at 96% 92%, rgba(116, 182, 240, .12) 0%, rgba(116, 182, 240, 0) 68%);
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem);
}
.pas--noc::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background-image: var(--tekstura); background-position: center;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, rgba(0,0,0,.75), transparent);
  mask-image: radial-gradient(70% 80% at 50% 0%, rgba(0,0,0,.75), transparent);
  pointer-events: none;
}
.pas--noc::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--zielen) 0 14%, var(--linia-mocna) 14% 40%, var(--orn-blekit) 40% 100%);
}

/* pasmo zamykające widok — granat z zieloną krawędzią u dołu */
.pas--zamkniecie {
  background-color: var(--granat);
  background-image:
    linear-gradient(168deg, rgba(23, 36, 74, .94) 0%, rgba(7, 12, 20, .96) 100%),
    var(--tekstura);
  background-position: center;
  padding-block: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem) clamp(3.4rem, 2rem + 4vw, 6.6rem);
  border-block-start: 1px solid var(--linia);
}
.pas--zamkniecie::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--zielen) 0 34%, var(--linia-mocna) 34% 58%, transparent 58% 100%);
}

/* pasmo zamykające niesie ostatni akapit widoku — dostaje większy stopień
   pisma, a odsyłacze stojące W ZDANIU dostają własne pole kafla. To jedyne
   miejsce, w którym odsyłacz prozy wygląda jak element interfejsu; nie jest
   celem dotykowym w rozumieniu B7, bo stoi wewnątrz akapitu. */
.pas--zamkniecie .kontener > p { font-size: 1.1rem; }
.pas--zamkniecie .kontener > p:first-of-type { color: var(--biel); }
.tresc .pas--zamkniecie p a:where(:not(.przycisk):not(.kafel-link)) {
  padding: .08em .4em;
  background: var(--kafel-2);
  border-radius: var(--promien);
  text-decoration-color: var(--zielen);
  text-decoration-thickness: 2px;
}
.tresc .pas--zamkniecie p a:where(:not(.przycisk):not(.kafel-link)):hover {
  background: var(--zielen); color: var(--na-zieleni);
  text-decoration-color: var(--na-zieleni);
}
/* duża siatka kafli gasnąca przy prawej krawędzi pasma zamykającego */
.orn--kafle-duze {
  position: absolute; z-index: 0;
  inset-block-start: 8%; inset-inline-end: clamp(-40px, -2vw, 0px);
  width: clamp(150px, 26vw, 520px); height: 78%;
  background:
    linear-gradient(var(--orn-kafel-a), var(--orn-kafel-a))   0%   0%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-b), var(--orn-kafel-b))  35%   0%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-c), var(--orn-kafel-c))  70%   0%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-b), var(--orn-kafel-b))   0%  35%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-d), var(--orn-kafel-d))  35%  35%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-c), var(--orn-kafel-c))  70%  35%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-c), var(--orn-kafel-c))   0%  70%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-b), var(--orn-kafel-b))  35%  70%  / 30% 30% no-repeat,
    linear-gradient(var(--orn-kafel-c), var(--orn-kafel-c))  70%  70%  / 30% 30% no-repeat;
  -webkit-mask-image: linear-gradient(255deg, rgba(0,0,0,.95) 12%, transparent 90%);
  mask-image: linear-gradient(255deg, rgba(0,0,0,.95) 12%, transparent 90%);
  pointer-events: none;
}
@media (max-width: 899px) { .orn--kafle-duze { display: none; } }

/* pasmo, na którym leży PŁYTA nachodząca na sąsiada (warstwa nad warstwą) */
.pas--plyta,
.pas--jasny {
  background-color: var(--grafit);
  background-image: var(--tekstura);
  background-position: center;
  padding-block: 0 clamp(1.6rem, 1rem + 2vw, 3.6rem);
  padding-inline: clamp(8px, 2.2vw, 34px);
}
.plyta {
  position: relative; z-index: 2;
  /* płyta jest WĘŻSZA od pasma — ale nadal wyśrodkowana, więc lewa krawędź
     prozy zostaje ta sama co w pasmach bez płyty (jedna krawędź, bramka B13) */
  max-width: min(100%, 66rem);
  margin-inline: auto;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.8rem, 1.1rem + 2.6vw, 4rem);
  background: var(--kafel);
  border: 1px solid var(--linia);
  border-radius: var(--promien-plyty);
  box-shadow: var(--cien-plyta);
}
/* górna krawędź płyty — pasek kafli, jeden „połączony” */
.plyta::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline: clamp(20px, 8%, 150px); height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,
    var(--zielen) 0 26%, transparent 26% 30%,
    var(--linia-mocna) 30% 52%, transparent 52% 56%,
    var(--obwodka) 56% 68%, transparent 68% 100%);
}
/* ⚠⚠ KAFEL ROZJAŚNIONY. Nadpisujemy TOKENY, więc każdy komponent w środku
   dostaje wariant na jasnym bez osobnych reguł — to lekarstwo na pułapkę
   „globalna barwa na powierzchni o odwrotnej jasności”. */
.plyta--swiatlo {
  --grafit:        var(--swiatlo);
  --granat:        var(--swiatlo-2);
  --kafel:         var(--swiatlo-plyta);
  --kafel-2:       var(--swiatlo-2);
  --noc:           var(--swiatlo-2);
  --biel:          var(--ink);
  --biel-cicha:    var(--ink-cichy);
  --zielen:        var(--zielen-ciemna);
  --blekit:        var(--blekit-ciemny);
  --na-zieleni:    var(--swiatlo-plyta);
  --obwodka:       var(--obwodka-jasna);
  --linia:         var(--linia-swiatlo);
  --linia-mocna:   var(--linia-swiatlo-2);
  --orn-siatka:    rgba(13, 22, 34, .10);
  --orn-siatka-2:  rgba(13, 22, 34, .05);
  background: var(--swiatlo);
  background-image: repeating-linear-gradient(118deg, rgba(13,22,34,.035) 0 2px, transparent 2px 26px);
  border-color: var(--linia-swiatlo);
  color: var(--ink);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9);
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.6rem) 0 .8rem;
  padding-block-start: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.012em;
  color: var(--biel);
  text-wrap: balance;
}
/* znacznik sekcji — trzy kafle, jeden zielony (ornament, nie informacja) */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 50px; height: 12px;
  background:
    linear-gradient(var(--zielen), var(--zielen))            0 0 / 14px 12px no-repeat,
    linear-gradient(var(--obwodka), var(--obwodka))        18px 0 / 14px 12px no-repeat,
    linear-gradient(var(--linia-mocna), var(--linia-mocna)) 36px 0 / 14px 12px no-repeat;
  border-radius: 2px;
}
.kontener > h2:first-child { margin-block-start: 0; }

@media (min-width: 1200px) {
  .tresc h2 { padding-block-start: 0; }
  .tresc h2::before { inset-block-start: .38em; inset-inline-start: -4.7rem; }
}

/* nagłówek numerowany — numer POCHODZI Z TREŚCI ŹRÓDŁA, nie z licznika CSS */
.tresc h2.numerowany::before { content: none; }
.tresc h2 .nr {
  font-family: var(--krój-naglowek); font-weight: 700;
  color: var(--zielen); letter-spacing: -.02em;
}
@media (min-width: 1200px) {
  .tresc h2.numerowany { padding-block-start: 0; }
  .tresc h2 .nr {
    position: absolute; inset-inline-start: -5.4rem; inset-block-start: -.16em;
    font-size: 2.05em; line-height: 1; opacity: .92;
  }
}

.tresc h3 {
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.2rem, 1.06rem + .5vw, 1.6rem);
  line-height: 1.22; color: var(--biel);
}

.tresc p { margin: 0 0 1.15em; }
.tresc p:last-child { margin-block-end: 0; }
.tresc .wprowadzenie { font-size: 1.1rem; color: var(--biel); }

/* ⚠⚠ DWIE PUŁAPKI SPECYFICZNOŚCI NARAZ.
   1. Reguła odsyłacza prozy musi WYŁĄCZYĆ komponenty przyciskowe, inaczej napis
      przycisku dostaje barwę odsyłacza i znika na własnym tle.
   2. Łańcuch `:not(.przycisk):not(.kafel-link)` PODNOSI specyficzność do (0,3,2)
      i bije `.tresc .zapowiedz__tytul a` (0,2,1) — tytuły kart dostawały wtedy
      podkreślenie i barwę odsyłacza. Dlatego łańcuch stoi w `:where()`, które
      ma specyficzność ZERO: reguła prozy to (0,1,2), a każdy komponent z dwiema
      klasami ją wygrywa. Listy prozy wymieniamy z nazwy — `li a` bez ograniczenia
      trafiało w karty i w rejestr. */
.tresc p a:where(:not(.przycisk):not(.kafel-link)),
.tresc .wyliczenie li a:where(:not(.przycisk):not(.kafel-link)),
.tresc .kroki li a:where(:not(.przycisk):not(.kafel-link)) {
  color: var(--zielen);
  text-decoration-line: underline;
  text-decoration-color: var(--linia-mocna);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.tresc p a:where(:not(.przycisk):not(.kafel-link)):hover,
.tresc .wyliczenie li a:where(:not(.przycisk):not(.kafel-link)):hover,
.tresc .kroki li a:where(:not(.przycisk):not(.kafel-link)):hover {
  color: var(--blekit); text-decoration-color: var(--blekit); text-decoration-thickness: 2px;
}

/* --- 8. ODSYŁACZE KIERUNKOWE ----------------------------------------- */
/* 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. */
.tresc .przejscie { margin-block: 1.7em 1.9em; }
.tresc .przejscie:last-child { margin-block-end: 0; }

/* kafel odsyłacza — podniesiony prostokąt z zieloną szyną i strzałką */
.tresc .przejscie a.kafel-link,
.tresc a.kafel-link {
  display: inline-flex; align-items: center; gap: .9em;
  min-height: 56px; width: 100%;
  padding: .7em 1.3em .7em 1.2em;
  background: var(--kafel-2);
  border: 1px solid var(--obwodka);
  border-inline-start: 4px solid var(--zielen);
  border-radius: 0 var(--promien-kafla) var(--promien-kafla) 0;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: 1.06rem; letter-spacing: .005em; line-height: 1.28;
  color: var(--biel); text-decoration: none;
  box-shadow: var(--cien-kafla);
  transition: background .2s ease, transform .2s ease;
}
.tresc .przejscie a.kafel-link::after,
.tresc a.kafel-link::after {
  content: "→"; margin-inline-start: auto;
  font-size: 1.2em; line-height: 1; color: var(--zielen);
  transition: transform .25s ease;
}
.tresc .przejscie a.kafel-link:hover,
.tresc a.kafel-link:hover { background: var(--granat); transform: translateX(3px); }
.tresc .przejscie a.kafel-link:hover::after { transform: translateX(4px); }

/* PRZYCISK GŁÓWNY — pole „połączono”: zieleń z grafitowym napisem.
   ⚠⚠ SELEKTOR MUSI DORÓWNAĆ `.tresc .przejscie a` (0-2-1). */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; gap: .8em;
  justify-content: flex-start;
  min-height: 60px; padding: .8rem 1.7rem;
  background: var(--zielen); color: var(--na-zieleni);
  border: 1px solid var(--zielen); border-radius: var(--promien-kafla);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 1.1rem; letter-spacing: .01em; line-height: 1.24;
  text-decoration: none;
  box-shadow: 0 22px 44px -24px rgba(63, 220, 154, .55);
}
.tresc .przejscie a.przycisk::after,
.tresc a.przycisk::after {
  content: "→"; font-size: 1.15em; line-height: 1; color: var(--na-zieleni);
  transition: transform .25s ease;
}
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc .przejscie a.przycisk:hover { background: var(--blekit); border-color: var(--blekit); }
.tresc a.przycisk:hover::after { transform: translateX(4px); }

/* siatka kafli odsyłaczowych — kilka przejść stojących obok siebie */
.kafle-przejsc {
  display: grid; gap: clamp(.7rem, .4rem + 1vw, 1.3rem);
  margin-block: 1.8em 0;
}
@media (min-width: 900px)  { .kafle-przejsc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .kafle-przejsc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kafle-przejsc .przejscie { margin: 0; }
.kafle-przejsc .przejscie a.kafel-link { height: 100%; align-items: flex-start; }

/* --- 9. REJESTR (spis poradników na liście wpisów) ------------------- */
.tresc .rejestr {
  margin: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) 0 0; padding: 0;
  list-style: none; counter-reset: poz;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.9rem);
}
.tresc .rejestr__poz {
  counter-increment: poz;
  position: relative; overflow: hidden;
  padding: clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.1rem, .8rem + 1.2vw, 2rem)
           clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.1rem, .8rem + 1.4vw, 2.4rem);
  background: var(--kafel);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--linia-mocna);
  border-radius: 0 var(--promien-plyty) var(--promien-plyty) 0;
  box-shadow: var(--cien-kafla);
}
.tresc .rejestr__poz:hover { border-inline-start-color: var(--zielen); }
/* duża ozdobna cyfra — ornament w pseudoelemencie, nie nowa informacja */
.tresc .rejestr__poz::before {
  content: counter(poz, decimal-leading-zero);
  position: absolute; inset-block-start: -.24em; inset-inline-end: .1em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 6.4rem; line-height: 1;
  color: var(--kafel-2);
  pointer-events: none;
}
.tresc .rejestr__poz > * { position: relative; }
.tresc .rejestr__tytul { margin: 0 0 .45rem; }
.tresc .rejestr__opis { margin: 0 0 1.1rem; color: var(--biel-cicha); }
.tresc .rejestr .przejscie { margin: 0; }

/* --- 10. KARTY ZAPOWIEDZI (kafle uczestników) ------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.6rem, 1rem + 1.6vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.9rem);
  counter-reset: wpis;
  align-items: stretch;
}
@media (min-width: 900px)  { .tresc .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.3rem, 1rem + 1.2vw, 2.1rem);
  background: var(--kafel);
  border: 1px solid var(--linia);
  border-radius: var(--promien-plyty);
  box-shadow: var(--cien-plyta);
}
/* „ekran uczestnika” — pasek faktury na górze kafla */
.tresc .zapowiedz__ekran {
  display: block; height: clamp(70px, 9vw, 118px);
  margin-inline: calc(-1 * clamp(1.2rem, .9rem + 1.2vw, 2rem));
  margin-block-end: clamp(1rem, .8rem + .8vw, 1.7rem);
  background-color: var(--granat);
  background-image:
    radial-gradient(60% 90% at 84% 10%, var(--orn-zielen) 0%, rgba(63,220,154,0) 62%),
    var(--tekstura);
  border-block-end: 1px solid var(--linia);
  position: relative;
}
.tresc .zapowiedz__ekran::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: 38%; height: 3px; background: var(--zielen);
}
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.16em; inset-inline-end: .1em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 4.4rem; line-height: 1;
  color: var(--kafel-2);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; }
.tresc .zapowiedz__tytul {
  margin: 0 0 .6rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.18rem, 1.04rem + .52vw, 1.58rem); line-height: 1.2;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--biel); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--zielen); }
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--biel-cicha); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  padding-inline: .1rem; text-decoration: none;
  color: var(--zielen); font-family: var(--krój-naglowek); font-weight: 700;
  font-size: .92rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid var(--linia-mocna);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--blekit); border-block-end-color: var(--blekit); }

/* --- 11. BLOKI POMOCNICZE (arkusz systemu) --------------------------- */
.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.8em;
  background: var(--kafel-2);
  border: 1px solid var(--linia);
  border-radius: var(--promien-kafla);
  color: var(--biel);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: 1.15em; inset-block-start: 1.42em;
  width: .78em; height: .56em; border-radius: 2px;
  background: var(--zielen);
}
.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 4em;
  background: var(--kafel);
  border: 1px solid var(--linia);
  border-inline-start: 3px solid var(--zielen);
  border-radius: 0 var(--promien-kafla) var(--promien-kafla) 0;
  box-shadow: var(--cien-kafla);
}
.tresc .kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 1em; inset-block-start: .95em;
  width: 2.1em; height: 2.1em; display: grid; place-items: center;
  background: var(--kafel-2); color: var(--zielen);
  border-radius: var(--promien);
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 1em;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--noc);
  border: 1px solid var(--linia);
  border-inline-start: 5px solid var(--blekit);
  border-radius: 0 var(--promien-kafla) var(--promien-kafla) 0;
  font-family: var(--krój-maszyna);
  font-size: .92rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--biel);
}
.tresc .nota {
  margin: 1.4em 0 1.8em;
  padding: 1em 1.3em;
  background: var(--kafel-2);
  border: 1px solid var(--linia);
  border-inline-start: 4px solid var(--zielen);
  border-radius: 0 var(--promien-kafla) var(--promien-kafla) 0;
  color: var(--biel-cicha);
}

/* 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;
}

/* --- 12. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(56% 86% at 88% 0%, rgba(63, 220, 154, .13) 0%, rgba(63, 220, 154, 0) 62%),
    radial-gradient(44% 70% at 4% 100%, rgba(116, 182, 240, .11) 0%, rgba(116, 182, 240, 0) 66%);
  color: var(--biel);
  padding-block: clamp(2.4rem, 1.4rem + 2.8vw, 4.6rem);
}
.stopka__siatka {
  position: absolute; z-index: 0; inset: 0;
  background-image: var(--tekstura); background-position: center;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.85), transparent 78%);
  mask-image: linear-gradient(0deg, rgba(0,0,0,.85), transparent 78%);
  pointer-events: none;
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--zielen) 0 18%, var(--linia-mocna) 18% 42%,
    var(--orn-blekit) 42% 74%, var(--linia) 74% 100%);
  z-index: 1;
}
.stopka__pas {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .34vw, 1.45rem);
  color: var(--biel); letter-spacing: .005em;
  position: relative; padding-block-start: 1.1rem;
}
.stopka__znak::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 46px; height: 8px;
  background:
    linear-gradient(var(--zielen), var(--zielen))          0 0 / 13px 8px no-repeat,
    linear-gradient(var(--obwodka), var(--obwodka))      16px 0 / 13px 8px no-repeat,
    linear-gradient(var(--linia-mocna), var(--linia-mocna)) 32px 0 / 13px 8px no-repeat;
  border-radius: 2px;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.4rem, 1.8vw, 1.5rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .35em; text-decoration: none;
  color: var(--biel-cicha);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--biel); border-block-end-color: var(--zielen); }
.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(--zielen); border-radius: var(--promien-kafla);
  color: var(--zielen); text-decoration: none;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zielen); color: var(--na-zieleni); }

/* --- 13. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .probki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.4rem; padding: 0; list-style: none;
}
.probka {
  border: 1px solid var(--linia); border-radius: var(--promien-kafla);
  background: var(--kafel); padding: 0; overflow: hidden;
  box-shadow: var(--cien-kafla);
}
.probka__pole { display: block; height: 84px; }
.probka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .8rem;
  color: var(--biel); line-height: 1.6;
}
.tresc .skala { margin: 1.2rem 0 2rem; padding: 0; list-style: none; display: grid; gap: .9rem; }
.tresc .skala li {
  padding: .7rem 1rem; background: var(--kafel); border: 1px solid var(--linia);
  border-radius: var(--promien-kafla); color: var(--biel);
  font-family: var(--krój-naglowek); line-height: 1.15;
}
.tresc .skala li span { display: block; font-family: var(--krój-maszyna); font-size: .74rem;
  letter-spacing: .06em; color: var(--biel-cicha); margin-block-start: .35rem; }

/* --- 14. 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; }
  .hero, .stopka, .pas, .plyta {
    background: #FFFFFF !important; color: #000000 !important; box-shadow: none;
  }
  .hero__siatka, .hero__poswiata, .hero::before, .stopka__siatka,
  .pas--grunt::before, .pas--grunt::after, .pas--noc::before,
  .zapowiedz__ekran, .orn--szyna { display: none !important; }
  .plyta { margin-block-start: 0; border: 1px solid #000000; }
  a { color: #000000; }
}