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

   IDEA. Płomień gazu jest chłodny — to jedyny ogień, który świeci na
   niebiesko. Cała strona stoi na tej obserwacji: głęboki granat jako noc
   kotłowni, błękit palnika jako światło, a rytm powtarzalnej fali
   (ornament) jako obraz spokojnego, równego spalania. Rachunek pokazujemy
   jako rzecz złożoną z pozycji, więc treść rozkłada się na ponumerowane
   karty i ciemne panele z jasnymi liczbami, a nie na goły wypunktowany
   tekst.
   ⚠ ZERO czerwieni i pomarańczu — to nie jest ogień z obrazka, tylko gaz.

   KOLEJNOŚĆ MA ZNACZENIE (katalog pułapek, sekcja 8 INSTRUKCJI):
   reguły ogólne PRZED komponentami; każdy odsyłacz prozy zapisany jako
   a:not(.przycisk), żeby nie przemalować przycisku na kolor jego tła.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* powierzchnie jasne */
  --papier:            #F2F6FA;  /* chłodne podłoże — „dzień" */
  --papier-karta:      #FFFFFF;  /* karta pozycji rachunku */
  --tlo-2:             #E3EDF6;  /* pasmo drugoplanowe */
  --wiodaca-jasna:     #CFE3F3;  /* plakietki, pola numerów */

  /* pismo na jasnym */
  --atrament:          #0A1A2B;  /* granatowa czerń — proza */
  --atrament-cichy:    #3D5570;  /* podpisy, zajawki */

  /* barwa wiodąca i akcent */
  --wiodaca:           #1C7FB6;  /* błękit palnika — KRESKI I POWIERZCHNIE */
  --wiodaca-ciemna:    #0B4E80;  /* ta sama barwa do pisma na jasnym */
  --akcent:            #0D6B75;  /* zimna zieleń morska — stan po najechaniu */
  --linia:             #5A7590;  /* obwódki — element nietekstowy */
  --linia-cicha:       #A9C1D6;  /* WYŁĄCZNIE ornament w tle, nigdy pod tekstem */

  /* powierzchnie ciemne */
  --noc:               #071A2F;  /* hero i stopka */
  --noc-2:             #040F1D;  /* dno stopki */
  --granat:            #0E2A4A;  /* pasmo ciemne */
  --granat-2:          #15406B;  /* panel podniesiony */
  --granat-3:          #1B5286;  /* najjaśniejszy punkt gradientu */

  /* pismo i światło na ciemnym */
  --na-ciemnym:        #EAF3FB;
  --na-ciemnym-cichy:  #B6D1E9;
  --plomien:           #57B8E8;  /* rdzeń płomienia — ornament, kreski */
  --plomien-jasny:     #8FD9F7;  /* światło płomienia — akcent na ciemnym */
  --na-plomieniu:      #061622;  /* pismo na jasnym błękicie przycisku */
  --biel:              #FFFFFF;  /* pismo na wiodącej ciemnej */

  /* ornamenty — wyłącznie warstwa wizualna */
  --orn-jasny:         rgba(28, 127, 182, .16);
  --orn-jasny-mocny:   rgba(28, 127, 182, .30);
  --orn-ciemny:        rgba(143, 217, 247, .16);
  --orn-ciemny-mocny:  rgba(143, 217, 247, .34);
  --welon-ciemny:      rgba(255, 255, 255, .12);
  --welon-ciemny-2:    rgba(255, 255, 255, .06);

  /* pismo */
  --krój-naglowek: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, "Liberation Sans", sans-serif;
  --krój-tekst:    "Source Sans 3", "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

  /* miary — ⚠ w REM, nie w em (pułapka 9: „ch" i „em" kłamią przy zmianie skali) */
  --kolumna:      34rem;   /* kolumna prozy — 34/1,05 rem ≈ 65 znaków w wierszu */
  /* ⭐⭐ ZARZUT KRYTYKA (2026-08-31): „przy 1920 rosną głównie marginesy" —
     pasmo miało 1472 px, a marginesy 217/230 px, choć reguła serii celuje
     w ~95 px. Powodem był twardy sufit 84 rem: powyżej ~1600 px pasmo
     zamierało i cały przyrost ekranu szedł w puste boki. Sufit 100 rem
     przy skali pisma z html{font-size} NIE ZWIĄZUJE poniżej ~2100 px, więc
     o szerokości pasma decyduje --brzeg: przy 1920 px daje 96 px marginesu
     i 1728 px pasma. Miary prozy pilnują komponenty (max-width w rem), a nie
     wąskie pasmo — inaczej szeroki ekran rozciągałby wiersz do 100 znaków. */
  --pas-szer:     100rem;  /* sufit pasma — patrz komentarz wyżej */
  --brzeg:        clamp(20px, 5vw, 104px);
  --rytm:         clamp(2.6rem, 1.6rem + 3vw, 5.4rem);   /* oddech pasma */
  --odstep-sekcji: clamp(2.2rem, 1.4rem + 1.6vw, 3.4rem); /* odstęp przed nagłówkiem H2 */
  /* ⭐⭐ BARK (od 1560 px) — rowek między nagłówkiem w lewej szynie a kolumną
     prozy. Szyna ma przy 1920 px 524 px, przy 1560 px 389 px; po odjęciu rowka
     zostaje 468 / 349 px na nagłówek. Najdłuższe słowo serii („kilowatogodziny")
     ma przy 1560 px 299 px, więc mieści się bez dzielenia wyrazu. */
  --rowek-barku:  clamp(2rem, 2.6vw, 3.4rem);

  --promien:      3px;
  --promien-duzy: 6px;
  --cien-karta:   0 22px 44px -30px rgba(7, 26, 47, .55), 0 2px 6px -3px rgba(7, 26, 47, .18);
  --cien-panel:   0 34px 70px -40px rgba(4, 15, 29, .75), 0 3px 10px -5px rgba(4, 15, 29, .35);
  --cien-pasek:   0 14px 34px -28px rgba(4, 15, 29, .9);

  /* fala płomienia — rytm powtarzalny, budowany z gradientów, nie z pliku */
  --fala-jasna:
    radial-gradient(10px 15px at 50% 100%, transparent 0 58%, var(--orn-jasny-mocny) 59% 70%, transparent 71%);
  --fala-ciemna:
    radial-gradient(10px 15px at 50% 100%, transparent 0 58%, var(--orn-ciemny-mocny) 59% 70%, transparent 71%);
}

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

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13).
     17,5 px przy 1366 → 20 px przy 1920; poniżej 1030 px trzyma 16 px. */
  font-size: clamp(1rem, 0.709rem + 0.451vw, 1.3rem);
  -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.68;
  overflow-wrap: break-word;         /* ⚠ pułapka 12 — nie „anywhere" */
  counter-reset: sekcja;
}
/* ⚠ pułapka 6: „clip" leczy przepełnienia pasów pełnej szerokości,
   nie psując position:sticky nagłówka. */
body { overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }

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

h1, h2, h3, h4 {
  font-family: var(--krój-naglowek);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--promien);
}
.pas--noc :focus-visible, .pas--glebia :focus-visible,
.naglowek :focus-visible, .stopka :focus-visible,
.plyta :focus-visible { outline-color: var(--plomien-jasny); }

/* 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: 200px; height: 48px;
  display: flex; align-items: center;
  margin: 0; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  color: var(--atrament); text-decoration: none;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.4rem;
  background: var(--plomien-jasny); color: var(--na-plomieniu);
  font-weight: 700; letter-spacing: .04em;
  border-radius: 0 0 var(--promien-duzy) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pas poziomy (nagłówek, stopka, hero) */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--brzeg);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza stoi
   w środkowym torze (symetrycznie — bramka B13 mierzy właśnie ten tor),
   a komponenty oznaczone .szeroki rozpychają się na całe pasmo.
   ⚠ pułapka 19: ornamenty wieszamy na tej siatce, NIGDY na oknie. */
.kontener {
  position: relative; z-index: 1;      /* ⚠ pułapka 4: ornament pasma ma zostać POD treścią */
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--brzeg);
  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 { grid-column: pelna-start / pelna-end; }
/* .szerszy — komponent wychodzi z kolumny w prawą szynę: asymetria, która
   trzyma lewą krawędź prozy (jedna krawędź czytania) i daje kompozycji oddech */
/* ⚠⚠ 56 rem dawało w .uwaga i .wybor wiersz ~95–105 znaków (zarzut krytyka
   „proza rozjeżdża się"). 40 rem to po odjęciu wyściółki komponentu ~34–36 rem
   tekstu, czyli 64–70 znaków przy KAŻDEJ szerokości ekranu (rem skaluje się
   razem z pismem, więc liczba znaków jest stała). */
.kontener > .szerszy { grid-column: tekst-start / pelna-end; max-width: 40rem; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 40;
  background-color: var(--noc);
  background-image:
    linear-gradient(102deg, var(--noc) 0%, var(--granat) 58%, var(--granat-2) 100%);
  box-shadow: var(--cien-pasek);
}
/* rant nagłówka: cienka szyna błękitu + rytm fali płomienia pod nią */
.naglowek::after {
  content: ""; display: block; height: 9px;
  background-color: var(--noc-2);
  background-image:
    var(--fala-ciemna),
    linear-gradient(90deg, var(--plomien) 0 14%, var(--wiodaca) 14% 34%, var(--granat-2) 34% 100%);
  background-size: 26px 9px, 100% 3px;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 9px, 0 0;
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.6rem, 1vw, 1.1rem);
}

/* sygnatura słowna — wyłącznie typograficzna (T8/T9: nigdy nie udaje logotypu) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(.98rem, .88rem + .3vw, 1.32rem);
  line-height: 1.18; letter-spacing: -.012em;
  color: var(--na-ciemnym); text-decoration: none;
  padding-inline-end: .3em;
}
.znak__tekst { position: relative; padding-block-end: .18em; }
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 2px;
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca));
  transition: width .28s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ pułapka B5: nawigacja MUSI móc się zwężyć i zawinąć.
   Menu jest zwykłą listą — bez <details>, więc pułapka T7 nie powstaje. */
.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: 0 clamp(.1rem, 1vw, 1.1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;
  padding-inline: .7em;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--na-ciemnym-cichy); text-decoration: none;
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem; inset-inline-start: .7em;
  width: 0; height: 2px; background: var(--plomien-jasny);
  transition: width .25s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { width: calc(100% - 1.4em); }
.menu__link[aria-current="page"] { color: var(--plomien-jasny); }
.menu__link[aria-current="page"]::after {
  width: calc(100% - 1.4em); height: 3px;
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca));
}
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; }
  .menu, .menu__lista { justify-content: flex-start; }
  .menu__link { padding-inline: .45em; letter-spacing: .08em; }
}

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--noc);
  background-image:
    radial-gradient(74% 58% at 88% 4%, rgba(87, 184, 232, .30) 0%, rgba(87, 184, 232, 0) 62%),
    radial-gradient(60% 52% at 4% 96%, rgba(27, 82, 134, .70) 0%, rgba(27, 82, 134, 0) 66%),
    radial-gradient(46% 34% at 62% 108%, rgba(143, 217, 247, .18) 0%, rgba(143, 217, 247, 0) 70%),
    linear-gradient(156deg, var(--granat-2) 0%, var(--granat) 42%, var(--noc) 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.2rem, 1.8rem + 5vw, 8rem) clamp(3.6rem, 2rem + 5.4vw, 8.6rem);
}
.hero__orn {
  position: absolute; inset: 0; z-index: 0;
  color: var(--plomien);
  display: block; pointer-events: none;
}
.hero__orn svg { position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 100%; height: 100%; }
.hero__blok { position: relative; z-index: 1; }

/* znacznik nad tytułem — kreska palnika, wyłącznie ornament */
.hero__blok::before {
  content: ""; display: block;
  width: clamp(4.6rem, 3rem + 4vw, 8rem); height: 5px;
  margin-block-end: clamp(1.2rem, 2vw, 2.2rem);
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca) 62%, transparent);
}
.tytul {
  font-size: clamp(2.3rem, 1.4rem + 3vw, 5rem);
  max-width: 19em;
  color: var(--na-ciemnym);
}
.hero--wpis .tytul, .hero--dluzszy .tytul { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.9rem); }
.hero--lista { padding-block: clamp(3.4rem, 2rem + 5vw, 8.4rem) clamp(3.4rem, 2rem + 5vw, 8.4rem); }
.hero--lista .tytul { font-size: clamp(3rem, 1.8rem + 4.6vw, 7rem); }
.lid {
  /* ⚠ POMIAR 2026-09-01: 41 rem dawało przy 1920 px 820 px lidu, czyli wiersz
     na granicy przyjętego zakresu (640–840 px). 38 rem to 760 px, około
     70 znaków — z zapasem, i bez zmiany czegokolwiek poniżej 1366 px poza
     samą miarą wiersza. */
  max-width: 38rem;
  margin-block-start: clamp(1.4rem, 2vw, 2.4rem);
  font-size: clamp(1.06rem, 1rem + .32vw, 1.42rem);
  line-height: 1.58;
  color: var(--na-ciemnym);
}
.lid--drugi {
  margin-block-start: 1.1rem;
  font-size: clamp(1rem, .96rem + .16vw, 1.14rem);
  color: var(--na-ciemnym-cichy);
}
.hero .cta { margin-block-start: clamp(1.8rem, 2.4vw, 2.8rem); }

/* --- 6. PASMA -------------------------------------------------------- */
.pas { position: relative; padding-block: var(--rytm); }
.pas--papier  { background-color: var(--papier); }
.pas--lazur   { background-color: var(--tlo-2); }
/* faktura pasm jasnych — rytm fali tak cichy, że czyta się jak papier,
   plus poświata palnika w narożniku; obie warstwy to wyłącznie ornament */
.pas--papier { background-image:
  radial-gradient(62% 46% at 100% 0%, rgba(28, 127, 182, .10) 0%, rgba(28, 127, 182, 0) 72%),
  radial-gradient(46% 40% at 0% 100%, rgba(13, 107, 117, .07) 0%, rgba(13, 107, 117, 0) 74%); }
.pas--lazur { background-image:
  radial-gradient(11px 16px at 50% 100%, transparent 0 60%, rgba(28, 127, 182, .10) 61% 72%, transparent 73%),
  radial-gradient(58% 44% at 4% 0%, rgba(28, 127, 182, .10) 0%, rgba(28, 127, 182, 0) 70%);
  background-size: 36px 27px, 100% 100%;
  background-repeat: repeat, no-repeat; }
.pas--noc     { background-color: var(--granat);  color: var(--na-ciemnym); }
.pas--glebia  { background-color: var(--noc);     color: var(--na-ciemnym); }

/* rytm fali na styku pasm — ornament, nie informacja */
.pas--noc::before, .pas--glebia::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 11px; pointer-events: none;
  background-image: var(--fala-ciemna);
  background-size: 30px 11px; background-repeat: repeat-x;
}
.pas--lazur::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 11px; pointer-events: none;
  background-image: var(--fala-jasna);
  background-size: 30px 11px; background-repeat: repeat-x;
}
/* ⭐ ŁAŃCUCH PŁOMIENIA w prawej szynie kolumny — wypełnia pole obok prozy.
   ⚠ pułapka 19: kotwiczymy go do ŚRODKA kolumny prozy (kontener jest wyśrodkowany,
   więc 50% pasma = środek kolumny), a poniżej 1180 px gasimy całkowicie, żeby
   nie miał jak wejść w tekst ani wyjechać poza ekran. */
.pas::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block: clamp(1.8rem, 3vw, 3.4rem);
  inset-inline-start: calc(50% + var(--kolumna) / 2 + 2.8rem);
  width: 15px;
  background-image:
    repeating-linear-gradient(180deg, var(--orn-jasny-mocny) 0 15px, transparent 15px 37px),
    linear-gradient(180deg, transparent 0, var(--orn-jasny) 8%, var(--orn-jasny) 92%, transparent 100%);
  background-size: 3px 100%, 1px 100%;
  background-position: 0 0, 14px 0;
  background-repeat: repeat-y, no-repeat;
}
.pas--noc::after, .pas--glebia::after {
  background-image:
    repeating-linear-gradient(180deg, var(--orn-ciemny-mocny) 0 15px, transparent 15px 37px),
    linear-gradient(180deg, transparent 0, var(--orn-ciemny) 8%, var(--orn-ciemny) 92%, transparent 100%);
}
@media (max-width: 1179px) { .pas::after { content: none; } }
/* delikatna poświata w głębi ciemnych pasm */
.pas--noc, .pas--glebia { background-image:
  radial-gradient(58% 46% at 96% 0%, rgba(87, 184, 232, .13) 0%, rgba(87, 184, 232, 0) 70%),
  radial-gradient(52% 40% at 2% 100%, rgba(143, 217, 247, .08) 0%, rgba(143, 217, 247, 0) 72%); }

/* --- 7. TYPOGRAFIA TREŚCI -------------------------------------------- */
.kontener > h2 {
  position: relative;
  margin-block: var(--odstep-sekcji) 1.1rem;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.5rem);
}
.kontener > *:first-child { margin-block-start: 0; }
.kontener > h2::after {
  content: ""; display: block; width: 3.6rem; height: 4px;
  margin-block-start: .85rem;
  background: linear-gradient(90deg, var(--wiodaca), var(--plomien));
}
.pas--noc .kontener > h2::after, .pas--glebia .kontener > h2::after {
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca));
}
/* ⭐ ozdobny numer sekcji w LEWEJ SZYNIE kolumny — kotwiczony do siatki
   treści (pułapka 19), więc nigdy nie wjeżdża w tekst ani poza ekran. */
.kontener > h2::before {
  counter-increment: sekcja;
  content: counter(sekcja, decimal-leading-zero);
  position: absolute; inset-block-start: -.34em;
  inset-inline-end: calc(100% + 1.6rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 2.9em; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wiodaca);
  opacity: .55;
}
.pas--noc .kontener > h2::before, .pas--glebia .kontener > h2::before {
  -webkit-text-stroke-color: var(--plomien);
  opacity: .75;
}
@media (max-width: 1179px) { .kontener > h2::before { content: none; } }

.kontener > h3 {
  margin-block: clamp(1.8rem, 1.2rem + 1vw, 2.6rem) .7rem;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--wiodaca);
  font-size: clamp(1.16rem, 1rem + .5vw, 1.6rem);
  font-weight: 600;
}
.pas--noc .kontener > h3, .pas--glebia .kontener > h3 { border-inline-start-color: var(--plomien); }

.kontener > p {
  margin-block: 0 1.05em;
  font-size: 1.05rem;
}
.kontener > p:last-child { margin-block-end: 0; }
.kontener > p.wstep {
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.5rem);
  line-height: 1.56;
  color: var(--atrament);
  margin-block-end: 1.4em;
}
.pas--noc .kontener > p, .pas--glebia .kontener > p { color: var(--na-ciemnym); }
.pas--noc .kontener > p.wstep, .pas--glebia .kontener > p.wstep { color: var(--na-ciemnym); }

/* odsyłacze prozy — ⚠⚠ pułapka 1: ZAWSZE :not(.przycisk) */
.tresc a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  text-decoration-color: var(--wiodaca);
}
.tresc a:not(.przycisk):hover { color: var(--akcent); text-decoration-color: var(--akcent); }
/* ⚠⚠ POWIERZCHNIA, NIE PASMO, decyduje o barwie odsyłacza. Bramka B6 złapała
   dokładnie ten błąd: ciemny panel duetu stojący na JASNYM paśmie dostawał
   odsyłacz w barwie pisma jasnego tła — 1,67:1, czyli tekst praktycznie
   niewidoczny. Dlatego lista poniżej wymienia wszystkie CIEMNE powierzchnie,
   a nie tylko ciemne pasma. */
.pas--noc a:not(.przycisk), .pas--glebia a:not(.przycisk),
.duet__pole--b a:not(.przycisk), .uwaga a:not(.przycisk), .konkluzja a:not(.przycisk),
.plyta a:not(.przycisk) {
  color: var(--plomien-jasny); text-decoration-color: var(--plomien);
}
.pas--noc a:not(.przycisk):hover, .pas--glebia a:not(.przycisk):hover,
.duet__pole--b a:not(.przycisk):hover, .uwaga a:not(.przycisk):hover,
.konkluzja a:not(.przycisk):hover,
.plyta a:not(.przycisk):hover { color: var(--na-ciemnym); text-decoration-color: var(--na-ciemnym); }
/* …a odwrotnie: JASNA karta stojąca na ciemnym paśmie wraca do ciemnego odsyłacza */
.pas--noc .duet__pole--a a:not(.przycisk), .pas--glebia .duet__pole--a a:not(.przycisk) {
  color: var(--wiodaca-ciemna); text-decoration-color: var(--wiodaca);
}
.pas--noc .duet__pole--a a:not(.przycisk):hover,
.pas--glebia .duet__pole--a a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-color: var(--akcent);
}

/* --- 8. PRZYCISKI I PRZEJŚCIA ---------------------------------------- */
.cta { margin-block: 1.9rem 0; }
.tresc .przycisk {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 54px; padding: .8rem 1.6rem;
  background-color: var(--wiodaca-ciemna);
  background-image: linear-gradient(102deg, var(--wiodaca-ciemna) 0%, var(--granat-3) 100%);
  color: var(--biel);
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: 1rem; letter-spacing: .012em;
  text-decoration: none;
  border-radius: var(--promien);
  box-shadow: var(--cien-karta);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tresc .przycisk::after {
  content: ""; width: .85em; height: .85em; flex: none;
  border-inline-end: 2px solid currentColor; border-block-start: 2px solid currentColor;
  transform: rotate(45deg); margin-block-start: .05em;
}
.tresc .przycisk:hover { background-color: var(--akcent); background-image: none; transform: translateY(-2px); }
.hero .przycisk, .pas--noc .przycisk, .pas--glebia .przycisk, .konkluzja .przycisk {
  background-color: var(--plomien-jasny); background-image: none; color: var(--na-plomieniu);
}
.hero .przycisk:hover, .pas--noc .przycisk:hover, .pas--glebia .przycisk:hover, .konkluzja .przycisk:hover {
  background-color: var(--na-ciemnym); color: var(--na-plomieniu);
}

.odsylacz { margin-block: 1.6rem 0; }
.pas--glebia.zamkniecie .odsylacz, .pas--noc.zamkniecie .odsylacz { margin-block: 0; }
.zamkniecie .odsylacz a { font-size: clamp(1.14rem, 1rem + .7vw, 1.8rem); min-height: 54px; }
.tresc .odsylacz a {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 600; font-size: 1.02rem;
}
.tresc .odsylacz a::after {
  content: ""; width: .8em; height: .8em; flex: none;
  border-inline-end: 2px solid currentColor; border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
}

/* --- 9. DUET — dwa różne rachunki, dwa układy, dwa dokumenty --------- */
/* ⭐⭐ ZARZUT KRYTYKA (2026-08-31, drugie czytanie): siatka wyrównywała obie
   karty do wysokości WYŻSZEJ, a że karty niosą akapity o różnej długości
   (na stronie głównej 4 wiersze wobec 6), pod prozą krótszej karty zostawało
   60–92 px pustki — zmierzone, nie wyczute. Wyrównania wysokości nie da się
   uratować proporcją torów: przy 1920 px akapit ma sufit 36 rem, więc szersza
   karta i tak nie łamie się na więcej wierszy. Dlatego karty PRZESTAJĄ BYĆ
   RÓWNEJ WYSOKOŚCI — każda kończy się tam, gdzie kończy się jej tekst, i obie
   zamyka ten sam znak (fala u dołu), więc krótsza nie wygląda na uciętą. */
.duet {
  display: grid; gap: clamp(1rem, 1.6vw, 1.9rem);
  margin-block: 1.4rem 1.9rem;
  align-items: start;
}
@media (min-width: 900px) { .duet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duet__pole {
  position: relative; min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
  border-radius: var(--promien-duzy);
  counter-increment: duet;
}
.duet { counter-reset: duet; }
.duet__pole::before {
  content: counter(duet, decimal-leading-zero);
  display: block; margin-block-end: .7rem;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 2.4rem; line-height: 1;
}
/* ⚠ przy pasmie 1728 px karta duetu ma ~850 px; bez sufitu wiersz sięgałby
   73+ znaków. 36 rem trzyma go na ~70 znakach i nie wiąże poniżej 1600 px. */
.duet__pole p { font-size: 1.02rem; margin: 0; max-width: 36rem; }
.duet__pole--a {
  background-color: var(--papier-karta);
  box-shadow: var(--cien-karta);
  border-block-start: 5px solid var(--wiodaca);
}
.duet__pole--a::before { color: var(--wiodaca); }
.duet__pole--b {
  background-color: var(--granat);
  background-image: linear-gradient(148deg, var(--granat-2) 0%, var(--noc) 100%);
  color: var(--na-ciemnym);
  box-shadow: var(--cien-panel);
  border-block-start: 5px solid var(--plomien);
}
.duet__pole--b::before { color: var(--plomien-jasny); }
.duet__pole--b p { color: var(--na-ciemnym); }
/* na ciemnym paśmie odwracamy role, żeby duet nadal był kontrastem */
.pas--noc .duet__pole--a, .pas--glebia .duet__pole--a {
  background-color: var(--papier-karta);
}
.pas--noc .duet__pole--a p, .pas--glebia .duet__pole--a p { color: var(--atrament); }
/* ornament: fala u dołu OBU pól — jasna karta dostaje falę w barwie kresek
   pasma jasnego, ciemna w barwie płomienia. To ten znak zamyka kartę, gdy
   sąsiadka jest wyższa. */
.duet__pole--a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 11px;
  background-image: var(--fala-jasna);
  background-size: 26px 11px; background-repeat: repeat-x;
  border-radius: 0 0 var(--promien-duzy) var(--promien-duzy);
}
.duet__pole--b::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 11px;
  background-image: var(--fala-ciemna);
  background-size: 26px 11px; background-repeat: repeat-x;
  border-radius: 0 0 var(--promien-duzy) var(--promien-duzy);
}

/* --- 9b. PŁYTA — ciemny panel rozstrzygający NA JASNYM PAŚMIE -------- */
/* ⭐⭐ ZARZUT KRYTYKA (2026-08-31): sekcje 01 i 04 strony głównej były TĄ SAMĄ
   kompozycją (biała karta po lewej, granatowa po prawej), przez co cała strona
   miała w praktyce trzy rozwiązania układu. Sekcja 04 dostaje więc komponent
   o innej wadze i innym podziale: JEDNA ciemna płyta zamiast dwóch kart, podział
   asymetryczny zamiast pół na pół, teza pisana krojem nagłówkowym zamiast dwóch
   równorzędnych akapitów prozy. Płyta jest też jedynym ciemnym obiektem stojącym
   na jasnym paśmie, więc rozbija ciąg trzech jasnych pasm pod rząd.
   ⚠ Teza i proza mają SUFITY W REM — płyta rozpycha się na całe pasmo (1728 px
   przy 1920), ale wiersz zostaje w mierze 60–75 znaków. */
.plyta {
  position: relative; overflow: hidden;
  margin-block: 1.5rem 1.2rem;
  padding: clamp(1.7rem, 1.1rem + 1.8vw, 3.2rem);
  padding-block-end: clamp(2.2rem, 1.6rem + 1.8vw, 3.7rem);
  background-color: var(--granat);
  background-image:
    radial-gradient(58% 62% at 96% 2%, rgba(87, 184, 232, .20) 0%, rgba(87, 184, 232, 0) 68%),
    linear-gradient(146deg, var(--granat-2) 0%, var(--granat) 46%, var(--noc) 100%);
  color: var(--na-ciemnym);
  border-radius: var(--promien-duzy);
  border-block-start: 5px solid var(--plomien);
  box-shadow: var(--cien-panel);
  display: grid; gap: clamp(1.2rem, 2vw, 2.6rem);
}
/* fala płomienia u dołu płyty — ten sam rytm co na styku pasm */
.plyta::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 12px;
  background-image: var(--fala-ciemna);
  background-size: 30px 12px; background-repeat: repeat-x;
}
.plyta__teza {
  /* ⚠ POMIAR 2026-09-01: to ONA była najszerszą prozą makiety — 876 px przy
     1920 px (≈88 znaków). Powodem był TOR (1,3 : 1 dawało 876 px), a nie sufit,
     więc naprawa idzie przez proporcję torów (niżej) plus sufit w REM zamiast
     w em — 40 rem trzyma miarę także powyżej 1920 px, gdzie tor rośnie dalej. */
  margin: 0; max-width: 40rem;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.16rem, 1rem + .72vw, 1.86rem);
  line-height: 1.32; letter-spacing: -.012em;
  color: var(--na-ciemnym);
}
.plyta__teza::before {
  content: ""; display: block;
  width: clamp(3.4rem, 2.4rem + 2vw, 5.4rem); height: 5px;
  margin-block-end: clamp(1rem, 1.4vw, 1.7rem);
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca) 68%, transparent);
}
.plyta__proza {
  margin: 0; max-width: 38rem;
  font-size: 1.05rem; color: var(--na-ciemnym);
}
/* ⚠ podział asymetryczny WŁĄCZAMY DOPIERO OD 1360 px: niżej tor prozy zjadałby
   tezie całą szerokość i lewa kolumna miałaby ~27 znaków w wierszu. Poniżej
   płyta składa się w pion — teza nad prozą, obie z własnym sufitem miary. */
/* ⭐⭐ ZARZUT KRYTYKA (2026-08-31, drugie czytanie): podział „reszta pasma
   dla tezy, 36 rem dla prozy" dawał TEZIE TOR WĘŻSZY OD PROZY (465 px wobec
   630 px przy 1366), choć teza jest pisana krojem nagłówkowym, a jej wiersz
   jest o ~28–45% wyższy od wiersza prozy. Efekt zmierzony na własnych
   zrzutach: teza łamała się na 7 wierszy przy 5 wierszach prozy i w prawym
   dolnym rogu płyty zostawało 65–125 px pustego granatu (najgorzej 1360–1500).
   NAPRAWA: tory w proporcji MASY OPTYCZNEJ tekstu, czyli 1,3 : 1 na rzecz
   tezy. Proporcję dobrano pomiarem — przemiatanie 1,10 / 1,20 / 1,26 / 1,30 /
   1,34 / 1,40 na trzynastu szerokościach 1360–1920 dla obu widoków z płytą
   (index i specimen). 1,30 daje resztkę najwyżej 16 px na stronie głównej
   i 26 px na arkuszu; sąsiednie wartości mają skoki 37–60 px, bo tam któryś
   tor przeskakuje o cały wiersz.
   ⚠ Do tego align-items: stretch — krótszy tor rozciąga się do dna płyty,
   więc cienka linia podziału biegnie CAŁĄ wysokość panelu i resztka jest
   wnętrzem kolumny, a nie dziurą po kompozycji. */
/* ⭐⭐ POMIAR 2026-09-01 (drugi przemiat, sześć szerokości 1360–1920 dla obu
   widoków z płytą): proporcja 1,30 była dobrana pod SZEROKI tor tezy i dawała
   przy 1920 px wiersz 876 px, czyli wadę „rozciągnięta proza". Przemiot 0,95 /
   1,00 / 1,05 / 1,10 / 1,15 / 1,18 pokazał, że sufit zakresu prozy (840 px)
   przekracza już 1,18 (839 px, bez zapasu). Zostaje 1,05: teza 794 px, proza
   756 px, oba tory WYPEŁNIONE tekstem (sufity 40 i 38 rem wiążą dopiero powyżej
   1920 px), a resztka pod krótszą kolumną mieści się w jednym wierszu prozy. */
@media (min-width: 1360px) {
  .plyta {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(2rem, 3.4vw, 4.4rem);
  }
  .plyta__proza {
    padding-inline-start: clamp(1.6rem, 2.4vw, 3rem);
    border-inline-start: 1px solid var(--welon-ciemny);
  }
}

/* --- 10. POZYCJE — karty rachunkowe z dużą liczbą -------------------- */
.pozycje {
  display: grid; gap: clamp(1rem, 1.5vw, 1.8rem);
  margin-block: 1.5rem 2rem;
  counter-reset: pozycja;
  align-items: stretch;           /* ⚠ pułapka 10: w RZĘDZIE równa wysokość wygląda lepiej */
  grid-template-columns: minmax(0, 1fr);
}
/* ⚠ liczba kolumn jest ZADANA liczbą kart, nie auto-fitem: auto-fit zostawiał
   czwartą kartę samą w drugim rzędzie, co wygląda jak usterka układu, a nie
   jak decyzja. Rzędy są pełne albo świadomie podzielone 3 + 2. */
@media (min-width: 620px)  { .pozycje { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .pozycje--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .pozycje--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1120px) {
  .pozycje--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pozycje--5 > .pozycja { grid-column: span 2; }
  .pozycje--5 > .pozycja:nth-child(4), .pozycje--5 > .pozycja:nth-child(5) { grid-column: span 3; }
}
.pozycja {
  position: relative; min-width: 0;
  counter-increment: pozycja;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  background-color: var(--papier-karta);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.pozycja::before {
  content: counter(pozycja, decimal-leading-zero);
  display: block;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.6rem, 2rem + 1.4vw, 3.8rem); line-height: .92;
  color: transparent; -webkit-text-stroke: 1.6px var(--wiodaca);
  margin-block-end: .55rem;
}
.pozycja::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px;
  background: linear-gradient(90deg, var(--wiodaca) 0%, var(--plomien) 68%, transparent 100%);
}
.pozycja p { margin: 0; font-size: 1rem; }
/* karty na ciemnym paśmie: panel z jasną liczbą */
.pas--noc .pozycja, .pas--glebia .pozycja {
  background-color: var(--granat-2);
  background-image: linear-gradient(150deg, var(--granat-2) 0%, var(--noc) 108%);
  box-shadow: var(--cien-panel);
  color: var(--na-ciemnym);
}
.pas--noc .pozycja p, .pas--glebia .pozycja p { color: var(--na-ciemnym); }
.pas--noc .pozycja::before, .pas--glebia .pozycja::before { -webkit-text-stroke-color: var(--plomien-jasny); }
.pas--noc .pozycja::after, .pas--glebia .pozycja::after {
  background: linear-gradient(90deg, var(--plomien-jasny) 0%, var(--wiodaca) 70%, transparent 100%);
}

/* --- 11. KROKI — ścieżka procedury ----------------------------------- */
.kroki {
  position: relative;
  margin-block: 1.6rem 2rem;
  counter-reset: krok;
  display: grid; gap: clamp(1rem, 1.4vw, 1.6rem);
}
.krok {
  position: relative; counter-increment: krok;
  padding-inline-start: clamp(3.6rem, 3rem + 1.6vw, 5.2rem);
  padding-block: .2rem .9rem;
}
.krok::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  width: clamp(2.6rem, 2.2rem + 1vw, 3.6rem); height: clamp(2.6rem, 2.2rem + 1vw, 3.6rem);
  display: flex; align-items: center; justify-content: center;
  background-color: var(--wiodaca-ciemna); color: var(--biel);
  font-family: var(--krój-naglowek); font-weight: 700; font-size: .95rem;
  border-radius: 50%;
}
/* nitka łącząca kroki — ornament prowadzący wzrok */
.krok::after {
  content: ""; position: absolute;
  inset-inline-start: calc(clamp(2.6rem, 2.2rem + 1vw, 3.6rem) / 2 - 1px);
  inset-block: clamp(2.6rem, 2.2rem + 1vw, 3.6rem) -.9rem;
  width: 2px; background: linear-gradient(180deg, var(--wiodaca), var(--linia-cicha));
}
.krok:last-child::after { content: none; }
.krok p { margin: 0; font-size: 1.02rem; }
.pas--noc .krok::before, .pas--glebia .krok::before {
  background-color: var(--plomien-jasny); color: var(--na-plomieniu);
}
.pas--noc .krok::after, .pas--glebia .krok::after {
  background: linear-gradient(180deg, var(--plomien), rgba(143, 217, 247, .15));
}
.pas--noc .krok p, .pas--glebia .krok p { color: var(--na-ciemnym); }

/* ⭐ WARIANT POZIOMY — ścieżka rozłożona na całe pasmo. Powstał, żeby sekcja 03
   strony głównej („zacznij od trzech rzeczy z faktury") przestała być drugim
   z rzędu rzędem kart: to samo trzy-po-trzy, ale bez powierzchni karty, za to
   z kółkami numerów spiętymi poziomą nitką. Inna waga, ten sam system. */
.kroki--pasmo { margin-block: 1.7rem 2.1rem; }
@media (min-width: 1080px) {
  .kroki--pasmo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.7rem, 2.6vw, 3.4rem);
  }
  .kroki--pasmo .krok {
    padding-inline-start: 0;
    padding-block: 0 .2rem;
  }
  /* kółko wraca do toku dokumentu — stoi NAD tekstem, nie obok niego */
  .kroki--pasmo .krok::before {
    position: static;
    margin-block-end: clamp(.9rem, 1.2vw, 1.5rem);
  }
  /* nitka biegnie w PRAWO, do sąsiedniego kroku; ostatni krok nitki nie ma */
  .kroki--pasmo .krok::after {
    inset-block-start: calc(clamp(2.6rem, 2.2rem + 1vw, 3.6rem) / 2 - 1px);
    inset-block-end: auto;
    inset-inline-start: calc(clamp(2.6rem, 2.2rem + 1vw, 3.6rem) + .55rem);
    inset-inline-end: calc(-1 * clamp(1.7rem, 2.6vw, 3.4rem));
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--wiodaca), var(--linia-cicha));
  }
  .pas--noc .kroki--pasmo .krok::after, .pas--glebia .kroki--pasmo .krok::after {
    background: linear-gradient(90deg, var(--plomien), rgba(143, 217, 247, .15));
  }
}
/* ⚠ PONIŻEJ 1080 px ścieżka wraca do pionu i wtedy CAŁE pasmo jest dla niej za
   szerokie: jeden akapit na 920 px to ~100 znaków w wierszu, czyli dokładnie ta
   wada, którą wytknął krytyk w sekcji 05. Ścieżka zaczyna się więc od kolumny
   tekstu, a akapit dostaje sufit miary. */
@media (max-width: 1079px) {
  .kontener > .kroki--pasmo { grid-column: tekst-start / pelna-end; }
  .kroki--pasmo .krok p { max-width: 36rem; }
}

/* --- 12. WYBÓR — bloki z prowadnicą ---------------------------------- */
.wybor { margin-block: 1.4rem 1.9rem; display: grid; gap: clamp(.7rem, 1vw, 1.1rem); }
.wybor__poz {
  position: relative;
  padding: clamp(1rem, .8rem + .6vw, 1.4rem) clamp(1rem, .8rem + .8vw, 1.6rem);
  padding-inline-start: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  background-color: var(--papier-karta);
  border-inline-start: 5px solid var(--wiodaca);
  border-radius: 0 var(--promien-duzy) var(--promien-duzy) 0;
  box-shadow: var(--cien-karta);
}
.wybor__poz p { margin: 0; font-size: 1.02rem; }
.pas--noc .wybor__poz, .pas--glebia .wybor__poz {
  background-color: var(--granat-2); border-inline-start-color: var(--plomien-jasny);
  box-shadow: var(--cien-panel);
}
.pas--noc .wybor__poz p, .pas--glebia .wybor__poz p { color: var(--na-ciemnym); }

/* ⭐⭐ WARIANT SCHODKOWY — odpowiedź na dwa zarzuty naraz.
   (1) „proza rozjeżdża się": pasek ma sufit 44 rem, więc po odjęciu wyściółki
       i toru liczby zostaje ~35 rem tekstu, czyli ~68 znaków w wierszu przy
       każdej szerokości ekranu (poprzednio ~105 znaków przy 815 px).
   (2) „przy 1920 rosną głównie marginesy": paski schodzą kaskadą w prawo, więc
       KOMPOZYCJA zajmuje całe pasmo, choć żaden wiersz się nie rozciąga.
   ⚠ PUŁAPKA: sam „margin-inline-start: 52%" wypycha ostatni pasek poza pasmo
   i zapala B5 (przewijanie poziome). Dlatego przesunięcie jest ograniczone
   przez min(…, 100% - 44rem) — pasek zatrzymuje się dokładnie na prawej
   krawędzi pasma. Reguła działa wyłącznie powyżej 1180 px, gdzie 44 rem jest
   na pewno węższe od pasma; niżej paski stoją w jednej kolumnie. */
.wybor--schody { counter-reset: wybor; }
.wybor--schody .wybor__poz {
  counter-increment: wybor;
  width: min(100%, 44rem);
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: clamp(.9rem, 1.4vw, 1.7rem);
  align-items: start;
}
.wybor--schody .wybor__poz::before {
  content: counter(wybor, decimal-leading-zero);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.6px var(--wiodaca);
}
.pas--noc .wybor--schody .wybor__poz::before,
.pas--glebia .wybor--schody .wybor__poz::before { -webkit-text-stroke-color: var(--plomien-jasny); }
@media (min-width: 1180px) {
  .wybor--schody .wybor__poz:nth-child(2) { margin-inline-start: min(26%, 100% - 44rem); }
  .wybor--schody .wybor__poz:nth-child(3) { margin-inline-start: min(52%, 100% - 44rem); }
}
/* ⚠ poniżej 1180 px schodów nie ma (przesunięcie zwinęłoby się do zera i dwa
   paski stanęłyby w jednej linii, co wygląda jak usterka). Kolumna pasków
   startuje wtedy od kolumny tekstu, żeby nie wisiała w połowie pustego pasma. */
@media (max-width: 1179px) {
  .kontener > .wybor--schody { grid-column: tekst-start / pelna-end; }
}

/* --- 13. UWAGA — blok o bezpieczeństwie (chłodny, nigdy czerwony) ---- */
.uwaga {
  position: relative; overflow: hidden;
  margin-block: 1.6rem 1.2rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.6rem);
  padding-inline-start: clamp(1.8rem, 1.2rem + 1.8vw, 3.2rem);
  background-color: var(--noc);
  background-image: linear-gradient(140deg, var(--granat-2) 0%, var(--noc) 72%);
  color: var(--na-ciemnym);
  border-inline-start: 7px solid var(--plomien-jasny);
  border-radius: 0 var(--promien-duzy) var(--promien-duzy) 0;
  box-shadow: var(--cien-panel);
}
.uwaga p { margin: 0; color: var(--na-ciemnym); font-size: 1.06rem; }
.uwaga::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 12px;
  background-image: var(--fala-ciemna);
  background-size: 28px 12px; background-repeat: repeat-x;
}

/* --- 14. KONKLUZJA — pełne pasmo zamykające -------------------------- */
.konkluzja { position: relative; }
.konkluzja p {
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + .95vw, 2.15rem);
  line-height: 1.32; letter-spacing: -.014em;
  color: var(--na-ciemnym);
  max-width: 24em;
}
.konkluzja .kontener > p::before {
  content: ""; display: block;
  width: clamp(4.2rem, 3rem + 2.6vw, 6.6rem); height: 5px; margin-block-end: 1.5rem;
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca) 70%, transparent);
}
.konkluzja .kontener > h2 { margin-block-start: 0; }
/* przycisk domykający pas konkluzji — pas ma już własny rytm pionowy,
   więc akapit z przyciskiem nie dokłada odstępu u góry */
.konkluzja .kontener > p.cta { margin-block-start: 0; }

/* ⭐⭐ ZARZUT KRYTYKA (2026-08-31, drugie czytanie): pas domykający strony
   głównej niesie JEDEN przycisk i włoskową kreskę. Przy 1920 px przycisk stoi
   w torze prozy (zmierzone: lewa krawędź 620 px, po prawej 741 px pustego
   granatu), więc pasmo pełnej szerokości było najcieńszym momentem strony.
   ⚠ Uwaga: to dotyczy WYŁĄCZNIE pasma z samym przyciskiem. Pasy domykające
   wpisów niosą zdanie krojem nagłówkowym i ciężar mają własny — nie ruszamy ich.
   NAPRAWA (trzy warstwy, żadnego nowego słowa):
   1. faktura pasma — rytm pionowych nitek co 10% szerokości, ten sam alfabet
      co siatka ornamentu hero, więc pas domykający zamyka KLAMRĘ otwartą
      przez hero, zamiast być płaską płachtą granatu;
   2. wiersz domykający idzie przez CAŁE pasmo, nie przez tor prozy: kreska
      palnika otwiera wiersz, przycisk stoi w nim jak słowo w zdaniu, a kreska
      wychodzi z przycisku i biegnie do prawej krawędzi pasma — przycisk
      przestaje wisieć w pustce, bo należy do linii, która przecina pasmo;
   3. przycisk rośnie razem z ekranem (54 px przy 390 → ~74 px przy 1920),
      bo w paśmie o tej wadze pismo 1 rem wyglądało na zgubione. */
.konkluzja { overflow: hidden; }
.konkluzja .kontener::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: calc(-1 * var(--rytm)); inset-inline: 0;
  background-image:
    radial-gradient(40% 130% at 90% 50%, rgba(87, 184, 232, .14) 0%, rgba(87, 184, 232, 0) 70%),
    repeating-linear-gradient(90deg,
      var(--welon-ciemny-2) 0 1px, transparent 1px 10%);
}
@media (min-width: 900px) {
  .konkluzja .kontener > p.cta {
    grid-column: pelna-start / pelna-end;
    max-width: none;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: clamp(1rem, 1.8vw, 2.2rem);
    /* ⚠ próbowałem tu jeszcze kreski nad wierszem (border-block-start): przy
       1920 px dawała DRUGĄ poziomą linię tuż nad ogonem wiersza i pasmo robiło
       się rysunkiem technicznym. Zostaje jedna linia — ta, w której stoi
       przycisk — a wyściółka pilnuje wokół niej powietrza. */
    padding-block: clamp(.8rem, .4rem + 1.1vw, 1.8rem);
  }
  /* kreska palnika przestaje być kreską NAD przyciskiem, a staje się znakiem
     otwierającym wiersz — ta sama grubość, inna rola w kompozycji */
  .konkluzja .kontener > p.cta::before {
    flex: none;
    width: clamp(3rem, 1.4rem + 3.2vw, 6.6rem);
    height: clamp(5px, 3px + .27vw, 8px);
    margin-block-end: 0;
  }
  /* ogon wiersza: kreska wychodzi z przycisku i dobiega do krawędzi pasma.
     ⚠ grubość rośnie razem z ekranem (5 px przy 900 → 8 px przy 1920): przy
     1920 px kreska 5 px ginęła w paśmie o wysokości 300 px, a to właśnie tam
     krytyk zobaczył „najcieńszy moment strony". */
  .konkluzja .kontener > p.cta::after {
    content: ""; flex: 1 1 6rem; min-width: 3rem;
    height: clamp(5px, 3px + .27vw, 8px);
    background: linear-gradient(90deg,
      var(--welon-ciemny) 0, var(--orn-ciemny-mocny) 34%, var(--plomien) 100%);
  }
  .konkluzja .przycisk {
    font-size: clamp(1rem, .84rem + .52vw, 1.34rem);
    min-height: clamp(54px, 34px + 2.1vw, 74px);
    padding-inline: clamp(1.6rem, 1rem + 1.4vw, 2.6rem);
  }
}

/* --- 15. ZAPOWIEDZI — karty wpisów ----------------------------------- */
.zapowiedzi {
  display: grid; gap: clamp(1.1rem, 1.6vw, 2rem);
  margin-block: .4rem 0;
  counter-reset: zapowiedz;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .zapowiedzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zapowiedzi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  counter-increment: zapowiedz;
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem);
  background-color: var(--papier-karta);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px;
  background: linear-gradient(90deg, var(--wiodaca), var(--plomien) 70%, transparent);
}
.zapowiedz::after {
  content: counter(zapowiedz, decimal-leading-zero);
  position: absolute; inset-block-start: .5rem; inset-inline-end: 1rem;
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 3.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--wiodaca-jasna);
}
.zapowiedz__tytul {
  position: relative; z-index: 1;
  margin-block: .5rem .8rem;
  font-size: clamp(1.22rem, 1.06rem + .55vw, 1.68rem);
  line-height: 1.2;
}
.tresc .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--atrament); text-decoration: none;
}
.tresc .zapowiedz__tytul a:hover { color: var(--wiodaca-ciemna); text-decoration: underline; }
.zapowiedz__tekst { margin: 0; color: var(--atrament-cichy); font-size: 1rem; }
.zapowiedz__wiecej { margin-block: auto 0; padding-block-start: 1.2rem; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .55em; min-height: 44px;
  font-family: var(--krój-naglowek); font-weight: 600;
  text-decoration: none; color: var(--wiodaca-ciemna);
  border-block-end: 2px solid var(--wiodaca);
}
.tresc .zapowiedz__wiecej a::after {
  content: ""; width: .75em; height: .75em; flex: none;
  border-inline-end: 2px solid currentColor; border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--akcent); }

/* --- 16. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative;
  background-color: var(--noc-2);
  background-image:
    radial-gradient(60% 60% at 92% 0%, rgba(87, 184, 232, .16) 0%, rgba(87, 184, 232, 0) 70%),
    linear-gradient(178deg, var(--noc) 0%, var(--noc-2) 74%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.6rem, 1.8rem + 2.4vw, 4.4rem) clamp(2rem, 1.4rem + 1.6vw, 3.2rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 12px;
  background-image: var(--fala-ciemna);
  background-size: 30px 12px; background-repeat: repeat-x;
}
.stopka__pas {
  display: grid; gap: clamp(1.4rem, 2vw, 2.6rem);
  align-items: start;
}
@media (min-width: 860px) {
  .stopka__pas { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; }
}
.stopka__znak {
  position: relative;
  font-family: var(--krój-naglowek); font-weight: 600;
  font-size: clamp(1.02rem, .94rem + .3vw, 1.34rem);
  line-height: 1.24; letter-spacing: -.012em;
  color: var(--na-ciemnym);
  padding-block-end: .9rem;
}
.stopka__znak::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 4.4rem; height: 4px;
  background: linear-gradient(90deg, var(--plomien-jasny), var(--wiodaca));
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 clamp(.8rem, 2vw, 1.8rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--na-ciemnym-cichy); text-decoration: none;
  font-size: .92rem; font-weight: 600; letter-spacing: .05em;
  border-block-end: 2px solid transparent;
}
.stopka__menu a:hover { color: var(--plomien-jasny); border-block-end-color: var(--plomien); }
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px; padding-inline: 1.05rem;
  color: var(--na-ciemnym); text-decoration: none;
  font-family: var(--krój-naglowek); font-weight: 600; font-size: .92rem;
  border: 2px solid var(--plomien-jasny);
  border-radius: var(--promien);
}
.do-gory svg { width: 1.05em; height: 1.05em; flex: none; }
.do-gory:hover { background-color: var(--plomien-jasny); color: var(--na-plomieniu); }

/* --- 17. SPECIMEN — arkusz systemu projektowego ---------------------- */
.probki {
  display: grid; gap: 1rem; margin-block: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.probka {
  min-width: 0; border-radius: var(--promien-duzy); overflow: hidden;
  background-color: var(--papier-karta); box-shadow: var(--cien-karta);
}
.probka__plama { display: block; height: 84px; }
.probka__opis { padding: .9rem 1.1rem 1.1rem; }
.probka__opis span { display: block; font-size: .88rem; color: var(--atrament-cichy); }
.probka__opis strong { font-family: var(--krój-naglowek); font-size: 1rem; }
.skala { display: grid; gap: 1.4rem; margin-block: 1.5rem 2rem; }
.okaz-wiersz { margin: 0; padding-block-end: 1.2rem; border-block-end: 1px solid var(--linia-cicha); }
.okaz { display: block; font-family: var(--krój-naglowek); font-weight: 700;
        line-height: 1.12; letter-spacing: -.018em; color: var(--atrament); }
.okaz-h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 5rem); }
.okaz-h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.5rem); }
.okaz-h3 { font-size: clamp(1.16rem, 1rem + .5vw, 1.6rem); font-weight: 600; }
.okaz-lid { font-family: var(--krój-tekst); font-weight: 400;
            font-size: clamp(1.06rem, 1rem + .32vw, 1.42rem); line-height: 1.5; letter-spacing: 0; }
.okaz-podpis { display: block; margin-block-start: .5rem;
               font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
               color: var(--atrament-cichy); }
.probka__opis span + span { margin-block-start: .18rem; }
.probka__opis strong { display: block; margin-block-end: .3rem; color: var(--atrament); }

/* --- 18. POWYŻEJ 1560 px — ODZYSKANA SZEROKOŚĆ DOSTAJE ROLĘ ---------- */
/* ⭐⭐ POMIAR WYJŚCIOWY (sonda skali, 2026-09-01, 1920 px): najszerszy moduł
   treści zostawiał po 96 px marginesu z każdej strony — to było DOBRE i tego
   nie ruszamy. Wadą była PROZA: 876 px w tezie płyty i 820 px w lidzie hero,
   czyli 85–88 znaków w wierszu. Wiersz tej długości męczy oko.
   ⚠ Samo zwężenie prozy oddałoby odzyskaną szerokość PUSTCE — a pustka po
   bokach to dokładnie ta wada, od której zaczęła się cała naprawa skali.
   Dlatego szerokość dostaje ROLĘ, a nie margines:

     • NAGŁÓWEK SEKCJI wychodzi z kolumny prozy do LEWEJ SZYNY pasma i staje
       się barkiem: proza układa się OBOK niego, od pierwszego wiersza w dół.
       Szyna miała 524 px czystej pustki przy 1920 px — teraz stoi w niej treść.
     • OZDOBNA LICZBA SEKCJI wychodzi spod krawędzi tekstu i staje się
       nagłówkiem barku (dotąd wisiała w pustce po lewej stronie nagłówka).
     • NAGŁÓWEK, po którym idzie komponent pełnego pasma (siatka kart, płyta,
       ścieżka kroków), nie ma obok czego stać: ten idzie przez CAŁE pasmo
       i ląduje dokładnie nad lewą krawędzią komponentu, który zapowiada.
       Jedne i drugie zaczynają się w tym samym miejscu — na lewej krawędzi
       pasma, w jednej linii ze znakiem w nagłówku strony i ze stopką.
     • KOLUMNA PROZY NIE ZMIENIA POŁOŻENIA. Bramka B13 mierzy właśnie ją
       (dominująca lewa krawędź akapitów) i nadal widzi układ symetryczny,
       który rośnie w pikselach: 595 px przy 1366 → 680 px przy 1920.

   ⚠⚠ PUŁAPKA Z przewodnikolsztyn.pl: body ma overflow-wrap: break-word, które
   w wąskim barku łamie NAGŁÓWEK W ŚRODKU SŁOWA („zagospodarowan|y"). Żadna
   bramka tego nie widzi. W barku łamiemy więc tylko na spacjach (hyphens: auto
   jako furtka). Sprawdzone pomiarem: najdłuższe słowo serii, „kilowatogodziny",
   ma przy 1560 px 299 px przy szynie 349 px — mieści się bez dzielenia.
   ⚠ PUŁAPKA UKŁADU: nagłówek w szynie musi obejmować CAŁĄ wysokość sekcji
   (grid-row: span 40), inaczej proza zaczyna się dopiero POD nim i cała
   operacja nic nie daje. Sekcje mają najwyżej 13 dzieci, więc 40 wierszy
   starcza z zapasem, a puste wiersze siatki mają zerową wysokość (kontener
   nie ma odstępu wierszowego), więc nie dokładają ani piksela. */
@media (min-width: 1560px) {
  .kontener > h2 {
    grid-column: pelna-start / tekst-start;
    padding-inline-end: var(--rowek-barku);
    overflow-wrap: normal;         /* ⚠⚠ patrz pułapka wyżej */
    hyphens: auto;
  }
  /* bark: nagłówek stoi obok prozy przez całą wysokość sekcji */
  .kontener > h2:not(:has(+ .szeroki)) {
    grid-row: span 40;
    align-self: start;
    margin-block-end: 0;
  }
  /* maszt: nagłówek zapowiadający komponent pełnego pasma idzie przez pasmo
     i trzyma jego lewą krawędź; sufit miary pilnuje, żeby wiersz nagłówka nie
     rozciągnął się na 1728 px */
  .kontener > h2:has(+ .szeroki) {
    grid-column: pelna-start / pelna-end;
    max-width: 24em;
    padding-inline-end: 0;
  }
  /* liczba sekcji: spod lewej krawędzi tekstu NAD nagłówek, w tę samą pionową
     linię co on — w barku jest jego szczytem, w maszcie znakiem otwierającym */
  .kontener > h2::before {
    position: static; display: block;
    margin-block-end: .06em;
    font-size: 2.5em; line-height: .84;
  }
  /* ⚠ nagłówek w barku przestaje być pierwszym wierszem sekcji, więc odstęp
     sekcyjny musi dostać także proza, która stoi OBOK niego — inaczej akapit
     zaczyna się wyżej niż nagłówek i sekcje zlewają się ze sobą */
  .kontener > h2:not(:first-child) + p { margin-block-start: var(--odstep-sekcji); }
}

/* --- 19. RUCH, DRUK -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .naglowek, .stopka__menu, .stopka__gora, .hero__orn { display: none; }
  body { background: #FFFFFF; color: #000000; }
  .pas, .hero { background: var(--biel); color: #000000; padding-block: 1rem; }
  .tresc .przycisk { border: 1px solid #000000; color: #000000; background: none; }
}