/* Widok 01 — strona główna. Odnośnik wizualny serwisu: narzedzia/robocze/wzorzec-wizualny.md
   („świat krzyczy, interfejs szepcze"). Tylko układ; wartości z tokenów system.css.
   Znak 3D stoi pod treścią (płótno fixed); jego tor liczy scena z kotwic
   [data-znak-poza] — tu nic go nie pozycjonuje. Treść przepuszcza wskaźnik do
   sceny wszędzie poza tekstem i kontrolkami (obracanie, cięcie, rozbijanie). */

.glowna { pointer-events: none; }
.glowna :is(h1, h2, h3, p, li, a, button, .tafla, .beben, .podpowiedz) { pointer-events: auto; }
.glowna :is(h1, h2) { hyphens: manual; overflow-wrap: break-word; }
.kotwica { position: absolute; inset: 0; pointer-events: none; }
.kotwica--pol { top: 50%; bottom: auto; height: 1px; }   /* kotwica toru w połowie przejazdu sekcji */

/* wspólny lewy brzeg i rytm wszystkich sekcji — jedna przestrzeń, nie stos bloków */
.glowna > section { padding-inline: var(--margines); }

/* ==========================================================================
   1. HERO — telefon (bazowo): nagłówek · znak · fakty · akcje
   Astra i refero/Vercel: słowa po bokach obiektu, obiekt na osi, wokół pusto.
   Nagłówek to rzeźba w najlżejszej wadze; teza pod nim — zdanie, które da się
   kliknąć (dowód na /cennik); fakty — szept mono między włoskowymi liniami.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(8.5rem, 1fr) auto auto;
  grid-template-areas: "tytul" "scena" "fakty" "akcje";
  row-gap: var(--o-5);
  padding-top: calc(var(--logo-wys) + var(--o-6));
  padding-bottom: max(var(--o-6), env(safe-area-inset-bottom));
}
.hero-tytul {
  grid-area: tytul;
  container-type: inline-size;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
/* fraza — rzeźba: stopień liczony od szerokości kolumny („agencyjnej marży." w jednym wierszu) */
.hero-fraza {
  display: block;
  font-size: min(var(--r-6), 12.4cqi);
  font-weight: var(--w-rzezba);
  line-height: .98;
  letter-spacing: -.022em;
}
/* teza — zdanie, na którym stoi przewaga; klikalna. Kolor tylko w linii podkreślenia. */
.hero-teza {
  display: inline-block;
  max-width: 26ch;
  margin-top: var(--o-4);
  font-family: var(--kroj-tekst);
  font-size: var(--r-lead);
  font-weight: var(--w-lead);
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--tekst);
  text-decoration: underline 1px color-mix(in srgb, var(--czerwien) 80%, transparent);
  text-underline-offset: .32em;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.hero-teza:hover { text-decoration-color: var(--akcent); }
.hero-teza-ikona { display: inline-block; width: .8em; height: .8em; margin-left: .25em; vertical-align: -.04em; color: var(--akcent); }

.hero-scena { grid-area: scena; position: relative; min-width: 0; }
.hero-scena .podpowiedz { position: absolute; top: auto; bottom: 0; }

/* fakty — szept: mono, drobne, rozdzielone włoskową linią */
.hero-fakty {
  grid-area: fakty;
  margin: 0; padding: 0;
  list-style: none;
  color: var(--tekst);
}
.hero-fakty li { padding: 9px 0; border-top: 1px solid var(--linia); }
.hero-fakty li:last-child { border-bottom: 1px solid var(--linia); }

.hero-akcje {
  grid-area: akcje;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--o-3) var(--o-5);
}

/* „?" podpowiedzi stoi w nagłówku (naglowek.php, system.css) — w hero go nie ma (widok 01) */

/* komputer: trzy kolumny — nagłówek i akcje · znak · fakty (refero f24daf3a / Astra) */
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 32%) minmax(0, .75fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". scena ." "tytul scena fakty" "akcje scena fakty" ". scena .";
    column-gap: var(--o-6);
    row-gap: var(--o-6);
    padding-top: calc(var(--logo-wys) + var(--o-5));
  }
  .hero-tytul { align-self: end; }
  .hero-akcje { align-self: start; }
  .hero-fakty { align-self: center; justify-self: end; min-width: 17rem; }
  .hero-fakty li { white-space: nowrap; }
}
/* 960–1279: węższa kolumna znaku, żeby H1 został najwyższym stopniem strony */
@media (min-width: 960px) and (max-width: 1279px) {
  .hero { grid-template-columns: minmax(0, 1.45fr) minmax(0, 30%) minmax(0, .75fr); }
}

/* ==========================================================================
   2. TEZA — nagłówek z czterech linii z maski (scrollcraft): trzy ciche linie
   zapowiedzi w stopniu h2, puenta w stopniu rzeźby — jasna. H1 w hero zostaje
   najwyższym stopniem strony. Jedna tafla szkła dopowiada nagłówek, stoi niżej
   (od trzeciej linii). Znak jest ZA taflą — światło za tekstem.
   ========================================================================== */
.teza {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--o-9);
}
.teza-wnetrze { display: grid; gap: var(--o-6); transform-origin: 50% 40%; }
.teza-glos {
  font-size: var(--r-3);
  font-weight: var(--w-lekki);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: color-mix(in srgb, var(--tekst-2) 72%, var(--tekst));   /* ≈ #b8b6c8 — cienka kreska nie ginie na gwieździe */
}
.teza-uderzenie {
  margin-top: .45em;
  font-size: var(--r-5);
  font-weight: var(--w-rzezba);
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--tekst);
}
/* łamanie „po sensie" tylko tam, gdzie wiersz się mieści; węższe ekrany — balans
   (inaczej zostaje sierota „w centrum,") */
@media (max-width: 1199px) {
  .teza-glos { text-wrap: balance; }
  .teza-glos .wiersz:not(.teza-uderzenie) { display: inline; }
}
.teza-tafla { display: grid; gap: var(--o-3); color: var(--tafla-tekst-2); }
.teza-lead { color: var(--tafla-tekst); font-size: var(--r-lead); font-weight: var(--w-lead); line-height: 1.55; }
.teza-tafla p + p { padding-top: var(--o-3); border-top: 1px solid var(--tafla-linia); }
.teza-tafla .odnosnik-dalej { justify-self: start; margin-top: var(--o-1); }
@media (max-width: 699px) {
  .teza-tafla { font-size: var(--r-0-5); }
}
@media (min-width: 960px) {
  .teza-wnetrze {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--o-5);
    align-items: start;
  }
  .teza-glos { grid-column: 1 / span 7; grid-row: 1; }
  /* tafla od trzeciej linii zapowiedzi — dopowiada nagłówek, nie stoi obok jak kolumna */
  .teza-tafla { grid-column: 8 / -1; grid-row: 1; justify-self: end; width: 100%; margin-top: calc(var(--r-3) * 2.3); }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .teza-glos { grid-column: 1 / span 6; }
  .teza-tafla { grid-column: 7 / -1; }
}

/* ==========================================================================
   3. REALIZACJE — bęben: zamknięty walec o 6 WYGIĘTYCH ścianach (beben.js tnie kartę na
   pasy, każdy stoi na swoim kącie walca), oglądany z góry (--nachyl) — łuk widać w górnej
   krawędzi każdej karty. Obrót o jedną ścianę na gest — animacja transform (kompozytor).
   Wokół — pył znaku (scena 3D). Karta = rama-okno: oprawa ze szkła (tokeny szkła z system.css)
   + ekran z kadrem; cieniowanie łuku stałe w kaflu. Pod aktywną: nazwa, typ mono, akcja.
   Bez instrukcji gestów: sąsiednie karty wystają zza łuku, strzałki stoją po bokach.
   ========================================================================== */
.realizacje {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--logo-wys) + var(--o-5));
  padding-bottom: var(--o-7);
  padding-inline: 0 !important;             /* bęben wychodzi do krawędzi okna */
  overflow-x: clip;
}
.realizacje-wnetrze { display: grid; gap: var(--o-6); min-width: 0; transform-origin: 50% 50%; }
.realizacje-glowa {
  position: relative; z-index: 3;
  display: grid;
  gap: var(--o-2) var(--o-6);
  padding-inline: var(--margines);
}
.realizacje-glowa h2 { font-size: var(--r-4); font-weight: var(--w-naglowek); }
.realizacje-opis { max-width: 44ch; color: var(--tekst-2); font-size: var(--r-0-5); }
@media (min-width: 960px) {
  .realizacje-glowa { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
}

.beben {
  /* EKRAN karty ma proporcję KADRU (Jakub 26.09: kadry nie pasowały do pionowych kart) —
     telefon: zrzut 390×844 w całości (wys./szer. 2,164), od 700 px: zrzut 1440×900 (0,625).
     Szerokość telefonu z wysokości okna: karta + nagłówek sekcji + podpis mieszczą się
     w ekranie (375×667 → ~190 px, 390×844 → ~270 px), najwyżej 72vw. */
  --proporcja: 2.1641;                        /* wys./szer. ekranu karty = kadr telefonu */
  --karta: min(72vw, calc((100svh - 19rem) / var(--proporcja) + 14px));
  --nachyl: -11deg;                           /* kamera z góry: górna krawędź kart rysuje łuk */
  --oprawa: clamp(7px, calc(var(--karta) * .024), 15px);   /* grubość szklanej oprawy ramy */
  --wys-karty: calc((var(--karta) - 2 * var(--oprawa)) * var(--proporcja) + 2 * var(--oprawa));
  position: relative;
  outline-offset: 8px;
  border-radius: var(--rama-promien);
}
@media (min-width: 700px) { .beben { --karta: min(60vw, 34rem); --proporcja: .625; } }
@media (min-width: 960px) { .beben { --karta: min(46vw, 42rem); } }
.beben:focus-visible { outline: 2px solid var(--akcent); }
.beben-obrot { margin: 0; padding: 0; list-style: none; }
/* pole karty na wprost — dla sceny (data-znak-pole): środek aury pyłu = środek karty */
.beben-pole {
  position: absolute; left: 50%; top: 0;
  width: var(--karta); height: var(--wys-karty);
  margin-left: calc(var(--karta) / -2);
  pointer-events: none;
}

/* walec — tylko ze skryptem i bez ograniczenia ruchu */
.beben--3d {
  height: calc(var(--wys-karty) + 5.5rem);
  perspective: calc(var(--karta) * 2.6);
  perspective-origin: 50% calc(var(--wys-karty) * .5);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.beben--3d.ciagnie { cursor: grabbing; }
.beben--3d .beben-obrot {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% calc(var(--wys-karty) * .5);
  will-change: transform;
  z-index: 1;
}
/* karta = płaszczyzna przez oś walca (rotateY i·θ); jej wygięta twarz to pasy .beben-luk
   na promieniu R, podpis — wysunięty na R, pod twarzą */
.beben--3d .beben-karta {
  position: absolute; left: 50%; top: 0;
  width: var(--karta);
  margin-left: calc(var(--karta) / -2);
  padding-top: var(--wys-karty);
  transform-style: preserve-3d;
}
.beben--3d .beben-karta:not(.aktywna), .beben--3d .aktywna .beben-luk { cursor: pointer; }
.beben--3d.ciagnie .beben-karta { pointer-events: none; }
/* oryginał ramy: dla czytnika (alt kadru) i jako źródło obrazu podglądu — na ekranie pasy */
.beben--3d .beben-rama--zrodlo {
  position: absolute; top: 0; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
}
.beben-luk {
  position: absolute; left: 0; top: 0;
  width: 100%; height: var(--wys-karty);
  transform-style: preserve-3d;
}
/* ZAKŁADKA: pas wychodzi za swój styk o --zakl z każdej strony. Brzeg warstwy 3D jest
   wygładzany (półprzezroczysty), a telefon rasteryzuje ją rzadziej niż ekran — przy 1 px
   zakładki rozmyte brzegi obu sąsiadów leżały na sobie i prześwitywało tło: pionowe paski
   na jasnych kartach (Jakub 28.09, Aura na telefonie). Przy 2 px brzeg każdego pasa leży
   na pełnym obrazie sąsiada; rozjazd treści na zakładce < 0,05 px (kąt pasa ≤ 9°) */
.beben { --zakl: 2px; }
.beben-pasek {
  position: absolute; top: 0;
  left: calc(50% - var(--pasek) / 2 - var(--zakl));
  width: calc(var(--pasek) + 2 * var(--zakl));
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(calc((var(--j) + .5 - var(--pasy) / 2) * var(--kat-paska))) translateZ(var(--beben-r));
}
.beben-pasek > .beben-rama {
  position: absolute; top: 0;
  left: calc(var(--zakl) - var(--j) * var(--pasek));
  width: var(--karta); height: 100%;
  aspect-ratio: auto;
}
/* bez skryptu / ograniczony ruch: zwykły pas przewijany w bok, podpisy pod każdą kartą,
   strzałki przewijają pas o kartę (mysz bez gładzika — krytyka B, rzemiosło 12) */
.beben:not(.beben--3d) { overflow-x: auto; scrollbar-width: thin; }
.beben:not(.beben--3d) .beben-obrot { display: flex; gap: var(--o-5); padding: var(--o-3) var(--margines) var(--o-5); }
.beben:not(.beben--3d) .beben-karta { flex: 0 0 var(--karta); }
.beben:not(.beben--3d) .beben-strzalka { display: none; }
.beben-sterowanie { display: flex; justify-content: flex-end; gap: var(--o-2); padding-inline: var(--margines); margin-top: calc(-1 * var(--o-4)); }
.beben-sterowanie .beben-strzalka { position: static; display: grid; margin: 0; opacity: 1; }

/* RAMA-OKNO: .rama (system.css) + oprawa z grubego szkła wokół ekranu. Oprawa bierze
   język szkła z tokenów system.css (powierzchnia, dno, czerwień lewego skrzydła u góry,
   fiolet u dołu z prawej, warga i pierścień krawędzi) — bez filtra tła: na walcu każda
   karta to kilkanaście pasów, filtr na każdym zabiłby płynność obrotu.
   CIENIOWANIE dwie warstwy, obie stałe, nic się nie animuje. (1) Brzegi karty — lekko ciemniejsze,
   zapisane w kaflu (jak --pf-cien w kopule /portfolio), obracają się z kartą. (2) ZMIERZCH WALCA
   (.beben-zmierzch, beben.js) — cień od położenia na ekranie: środek jasny, boki w cieniu, więc
   karta na wprost jest czysta, a boczne oddalają się w mrok. Nakładka światła z 06.10 — wycofana. */
.beben { --beben-luk-cien: linear-gradient(90deg, color-mix(in srgb, var(--noc) 10%, transparent), transparent 30%, transparent 70%, color-mix(in srgb, var(--noc) 10%, transparent)); }
.beben-zmierzch {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--wys-karty);
  z-index: 2;                                /* nad walcem (1), pod strzałkami (3) */
  background: var(--beben-zmierzch);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
}
.beben-rama {
  height: var(--wys-karty);
  padding: var(--oprawa);
  border-radius: calc(var(--rama-promien) + var(--oprawa) * .5);
  background:
    var(--beben-luk-cien),
    var(--szklo-powierzchnia),
    radial-gradient(55% 40% at 0% 8%, var(--szklo-czerwien), transparent 72%),
    radial-gradient(55% 40% at 100% 94%, var(--szklo-fiolet), transparent 72%),
    var(--szklo-dno),
    var(--rama-tlo);
  box-shadow: var(--szklo-warga);
  container-type: inline-size;
}
/* pierścień krawędzi oprawy — 1 px, światło nierównomierne jak w szkle (system.css) */
.beben-rama::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background:
    radial-gradient(38% 70% at 24% 0%, var(--szklo-polysk), transparent 70%),
    radial-gradient(35% 45% at 0% 22%, var(--szklo-czerwien), transparent 72%),
    radial-gradient(35% 45% at 100% 82%, var(--szklo-fiolet), transparent 72%),
    linear-gradient(180deg, var(--szklo-krawedz-gora), var(--szklo-krawedz-dol) 30%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* ekran: szyba osadzona w oprawie — ciemna fuga dookoła, odbicie szkła u góry z lewej */
.beben-ekran {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rama-promien);
  background: var(--noc);
  box-shadow: 0 0 0 1px var(--noc);
}
.beben-ekran::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  background: var(--beben-luk-cien), linear-gradient(125deg, color-mix(in srgb, var(--szklo-polysk) 9%, transparent), transparent 34%);
  box-shadow: inset 0 0 0 1px var(--szklo-linia), inset 0 18px 30px -24px var(--noc);
  pointer-events: none;
}
.beben-kadr { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.beben-ekran picture { display: contents; }
/* okładka: obraz świata tej strony; w ramie jak w oknie — przesuwa się przeciwnie do obrotu (±4%) */
.beben-okladka { object-position: var(--ox, 50%) var(--oy, 50%); }
.beben-okladka--cala { object-fit: contain; object-position: 50% 50%; background: #000; }
.beben-karta--okladka .beben-ekran { background: #000; }
/* zaślepka (ani kadru, ani okładki) = karta tytułowa, nie udawany zrzut */
.beben-zaslepka {
  position: absolute; inset: 0;
  display: grid; align-content: end; gap: 4cqi;
  padding: 7cqi;
  background:
    radial-gradient(90% 120% at var(--swiatlo, 20%) 0%, var(--swiatlo-czerwien), transparent 60%),
    radial-gradient(70% 90% at calc(100% - var(--swiatlo, 20%)) 110%, var(--swiatlo-fiolet), transparent 62%),
    var(--noc-2);
}
.beben-zaslepka-typ { color: var(--tekst-2); font-size: max(10px, 2cqi); }
.beben-zaslepka-nazwa {
  font-family: var(--kroj-naglowek);
  font-weight: var(--w-rzezba);
  font-size: min(9cqi, var(--r-5));            /* zawsze poniżej H1 (krytyka B, rzemiosło 2) */
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--tekst);
}
/* karty z sensem: słowo zamiast kadru */
.beben-slowo {
  display: grid; align-content: center; gap: 3cqi;
  padding: 8cqi;
  background: radial-gradient(80% 100% at 50% 120%, var(--swiatlo-fiolet), transparent 60%), var(--noc-2);
}
.beben-slowo-tytul { font-family: var(--kroj-naglowek); font-weight: var(--w-rzezba); font-size: min(7.4cqi, var(--r-4)); line-height: 1.02; letter-spacing: -.02em; }
.beben-slowo-tekst { max-width: 34ch; color: var(--tekst-2); font-size: max(var(--r-0), 2.6cqi); line-height: 1.5; }
@media (max-width: 699px) {
  .beben-slowo { align-content: end; }
  .beben-slowo-tytul { font-size: 11cqi; }
  .beben-slowo-tekst { font-size: var(--r-0-5); }
}
/* podpis pod kartą na wprost: nazwa · typ (szept mono) · akcja — jedna linia bazowa */
.beben-podpis {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--o-1) var(--o-4);
  padding-top: var(--o-5);
  padding-inline: var(--oprawa);
}
.beben-nazwa { font-size: var(--r-3); font-weight: var(--w-lekki); line-height: 1.1; }
.beben-typ { color: var(--tekst-2); }
/* karta tytułowa (bez kadru i okładki) już niesie nazwę i typ — podpis nie powtarza ich na ekranie */
.beben-karta--bez-kadru :is(.beben-nazwa, .beben-typ) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.beben-podpis .odnosnik-dalej { margin-left: auto; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.beben-podpis .odnosnik-dalej > span.wizualnie-ukryte { position: absolute !important; }
/* transform = położenie na walcu (przód, promień R); wejście podpisu idzie osobną
   własnością translate — dwie mechaniki nie piszą do jednego transformu */
.beben--3d .beben-podpis {
  transform: translateZ(var(--beben-r));
  opacity: 0; translate: 0 8px;
  transition: opacity .35s var(--e-lagodna), translate .45s var(--e-lagodna);
}
.beben--3d .beben-karta.aktywna .beben-podpis { opacity: 1; translate: none; transition-delay: .12s; }
.beben--3d.ciagnie .beben-podpis { opacity: 0; transition-delay: 0s; transition-duration: .12s; }
@media (max-width: 699px) {
  .beben-podpis { row-gap: 0; }
  .beben-podpis .odnosnik-dalej { margin-left: 0; flex-basis: 100%; }
}

/* strzałki po bokach — okrągłe pigułki szkła (system.css), zawsze widoczne (komputer, tablet,
   telefon — Jakub 28.09): to one mówią, że walec się obraca (bez instrukcji tekstem) */
.beben-strzalka {
  position: absolute; top: calc(var(--wys-karty) * .5); z-index: 3;
  margin-top: -23px;
  color: var(--tekst-2);
  opacity: .8;
  transition: opacity .3s ease, color .3s ease;
}
.beben-strzalka .ikona { width: 22px; height: 22px; }
.beben-strzalka--wstecz { left: var(--margines); }
.beben-strzalka--dalej { right: var(--margines); }
.beben:is(:hover, :focus-within) .beben-strzalka, .beben-strzalka:focus-visible { opacity: 1; }
.beben-strzalka:hover { color: var(--tekst); }
/* dotyk: bez najechania — strzałki od razu w pełni widoczne */
@media (pointer: coarse) { .beben-strzalka { opacity: 1; color: var(--tekst); } }
/* telefon: strzałki bliżej krawędzi — stoją na zagiętych w głąb sąsiednich kartach */
@media (max-width: 699px) { .beben-strzalka--wstecz { left: 6px; } .beben-strzalka--dalej { right: 6px; } }

.realizacje-dalej { display: flex; justify-content: center; padding-inline: var(--margines); transition: opacity .35s var(--e-lagodna), visibility .35s; }
.realizacje--dalej-w-karcie .realizacje-dalej { opacity: 0; visibility: hidden; }

/* ==========================================================================
   4. CENNIK (skrót) — jedna kolumna, jedna oś czytania (Teza to para lewo/prawo,
   Domknięcie — oś środka): zdanie o wartości → cena zdaniem → jedna niska tafla
   (W cenie · Warunki) → najważniejszy przycisk strony i limit. Prawa strona ekranu
   wolna — tam przepływa znak.
   ========================================================================== */
/* za zatrzaskiem (Realizacje → Cennik) sekcja jest osobnym kadrem: pełne okno, treść
   wyśrodkowana pod pasem nagłówka — jak Realizacje (1440×900: nagłówek był 24 px pod
   logotypem, 145 px pustego pod limitem) */
.cennik-skrot {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--logo-wys) + var(--o-5));
  padding-bottom: var(--o-7);
}
.cennik-kolumna { display: grid; gap: var(--o-4); max-width: 34rem; }
.cennik-kolumna h2 { font-size: var(--r-4); font-weight: var(--w-naglowek); }
.cennik-zdanie {
  font-family: var(--kroj-naglowek);
  font-size: var(--r-3);
  font-weight: var(--w-lekki);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--tekst-2);
}
.cennik-kwota { color: var(--tekst); font-variant-numeric: tabular-nums lining-nums; }
.cennik-lead { max-width: 40ch; color: var(--tekst-2); }
.cennik-fakty { margin: var(--o-3) 0 0; display: grid; max-width: none; }
.cennik-wiersz { position: relative; display: grid; gap: var(--o-2); padding-block: var(--o-4); }
.cennik-wiersz + .cennik-wiersz::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--tafla-linia);
  transform-origin: 0 50%;
}
.cennik-wiersz:first-child { padding-top: 0; }
.cennik-wiersz:last-child { padding-bottom: 0; }
.cennik-wiersz dt { color: var(--tafla-tekst-2); padding-top: .2em; }
.cennik-wiersz dd { margin: 0; display: grid; gap: var(--o-1); color: var(--tafla-tekst); font-size: var(--r-0-5); line-height: 1.55; }
.cennik-wiersz .odnosnik-cichy { justify-self: start; font-size: var(--r-0); color: var(--tafla-tekst-2); }
.cennik-lista { margin: 0; padding: 0; list-style: none; }
.cennik-lista li { padding-block: 1px; color: var(--tafla-tekst); text-wrap: balance; }
@media (min-width: 560px) {
  .cennik-wiersz { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--o-4); }
}
.cennik-decyzja {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--o-3) var(--o-5);
  margin-top: var(--o-4);
}

/* ==========================================================================
   6. DOMKNIĘCIE — oś środka: znak ląduje w polu pod nagłówkiem strony (klamra z hero),
   pod nim krótki tytuł i jedna tafla z formularzem-zdaniem. Sekcja + stopka mieszczą
   się w ekranie (--stopka-wys mierzy glowna.js): w chwili decyzji widać klamrę.
   ========================================================================== */
.domkniecie {
  position: relative;
  min-height: calc(100vh - var(--stopka-wys, 7.5rem));
  min-height: calc(100svh - var(--stopka-wys, 7.5rem));
  display: grid;
  grid-template-rows: minmax(6.5rem, 1fr) auto;
  justify-items: center;
  row-gap: var(--o-4);
  /* o-6: scena wpisuje znak w pole proporcją bryły, a widoczny znak (grubość, poświata)
     jest ~11% wyższy — przy o-4 wystawał nad pole i stał ~5 px pod paskiem menu (1440×900) */
  padding-top: calc(var(--logo-wys) + var(--o-6));
  padding-bottom: var(--o-4);
}
.domkniecie-scena { width: min(100%, 40rem); min-height: 6.5rem; }
.domkniecie-dol { display: grid; gap: var(--o-4); width: min(100%, 34rem); }
.domkniecie-tytul { font-size: var(--r-3); font-weight: var(--w-lekki); color: var(--tekst-2); padding-inline: var(--o-1); }
/* niskie okno komputera: sekcja + stopka ≤ wysokość ekranu, pole znaku nie wchodzi
   pod nagłówek strony (tor liczy lądowanie z pola .domkniecie-scena) */
@media (min-width: 700px) and (max-height: 820px) {
  .domkniecie { padding-top: calc(var(--logo-wys) + var(--o-2)); row-gap: var(--o-3); grid-template-rows: minmax(5.5rem, 1fr) auto; }
  .domkniecie-scena { min-height: 5.5rem; }
}
@media (max-width: 699px) {
  .domkniecie { padding-top: calc(var(--logo-wys) + var(--o-2)); row-gap: var(--o-3); grid-template-rows: minmax(5.5rem, 1fr) auto; }
  .domkniecie-scena { min-height: 5.5rem; }
  .domkniecie-dol { gap: var(--o-3); }
}

/* formularz-zdanie: słowa zdania są etykietami, pola — lukami na linii */
.pierwszy-krok { display: grid; gap: var(--o-2); width: 100%; max-width: none; }
.pk-zdanie {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .4em;
  font-family: var(--kroj-naglowek);
  font-size: var(--r-3);
  font-weight: var(--w-lekki);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--tafla-tekst-2);
}
.pk-slowo { flex: none; cursor: default; }
.pk-luka { position: relative; flex: 1 1 8em; min-width: 0; display: flex; align-items: baseline; }
.pk-zdanie--pelne .pk-luka { flex-basis: 100%; }
@media (min-width: 560px) { .pk-zdanie--pelne .pk-luka { flex-basis: 10em; } }
.pk-luka :is(input, textarea, select) {
  width: 100%;
  margin: 0;
  padding: 4px 0 6px;
  border: 0;
  border-radius: 0;
  /* linia pola 3 : 1 (--tafla-pole); fokus — linia czerwień→fiolet rośnie od lewej */
  background:
    linear-gradient(90deg, var(--czerwien), var(--fiolet)) 0 100% / 0 2px no-repeat,
    linear-gradient(var(--tafla-pole), var(--tafla-pole)) 0 100% / 100% 1px no-repeat;
  color: var(--tafla-tekst);
  font: inherit;
  line-height: 1.35;
  resize: none;                                   /* bez natywnego uchwytu — pole rośnie samo */
  field-sizing: content;
  transition: background-size .45s var(--e-lagodna);
}
.pk-luka textarea { min-height: calc(1.35em + 10px); max-height: calc(5 * 1.35em + 10px); overflow-y: auto; }
.pk-luka :is(input, textarea)::placeholder { color: var(--tafla-tekst-2); opacity: .55; }
.pk-luka :is(input, textarea, select):focus { outline: none; background-size: 100% 2px, 100% 1px; }
.pk-luka :is(input, textarea, select):focus-visible { outline: 2px solid var(--tafla-akcent); outline-offset: 4px; }
.pk-luka--wybor { flex: 0 1 auto; }
.pk-luka select {
  appearance: none; -webkit-appearance: none;
  padding-right: 1.1em;
  cursor: pointer;
  text-overflow: ellipsis;
}
.pk-luka select option { color: #17161f; background: #ecebf3; font-size: 1rem; }
/* LISTA W SZKLE (Jakub 28.09: na komputerze systemowa lista — białe, kanciaste okienko —
   psuła imersję). Stylowalny <select> (Chrome/Edge 135+): dalej natywny — klawiatura,
   czytnik bez zmian; lista w warstwie nadrzędnej z tokenów szkła. Komputer i tablet —
   telefon zostaje przy liście systemowej (Jakub: „na telefonie jest fajnie"; tablet tak,
   telefon nie — 28.09). Tablet = dotyk od 700 px szerokości i 600 px wysokości (telefon
   poziomo ma < 600 px wysokości). Bez obsługi (Firefox, Safari) — lista systemowa */
@supports (appearance: base-select) { @media (hover: hover) and (pointer: fine), (pointer: coarse) and (min-width: 700px) and (min-height: 600px) {
  .pk-luka select, .pk-luka select::picker(select) { appearance: base-select; }
  .pk-luka select::picker-icon { display: none; }            /* grot: .pk-strzalka */
  .pk-luka select::picker(select) {
    margin-top: var(--o-2);
    padding: var(--o-1);
    min-width: anchor-size(width);
    border: 1px solid var(--szklo-linia);
    border-radius: var(--tafla-promien);
    background: var(--szklo-podklad-gesty);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: var(--szklo-warga), 0 18px 40px -12px rgba(0, 0, 0, .55);
    opacity: 0; translate: 0 -4px;
    transition: opacity .22s var(--e-lagodna), translate .22s var(--e-lagodna), display .22s allow-discrete, overlay .22s allow-discrete;
  }
  .pk-luka select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { .pk-luka select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  .pk-luka select option {
    padding: var(--o-2) var(--o-3);
    border-radius: calc(var(--tafla-promien) - var(--o-1));
    background: transparent;
    color: var(--tafla-tekst-2);
    font-size: inherit;
    cursor: pointer;
    transition: background-color .18s var(--e-lagodna), color .18s var(--e-lagodna);
  }
  .pk-luka select option::checkmark { display: none; }
  .pk-luka select option:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--tafla-tekst) 8%, transparent); color: var(--tafla-tekst); outline: none; }
  /* wybrana: jaśniejsza i z linią czerwień → fiolet, jak pole w fokusie */
  .pk-luka select option:checked {
    color: var(--tafla-tekst);
    background-image: linear-gradient(90deg, var(--czerwien), var(--fiolet));
    background-size: calc(100% - 2 * var(--o-3)) 1px;
    background-position: var(--o-3) calc(100% - 5px);
    background-repeat: no-repeat;
  }
  .pk-luka select selectedcontent { display: inline; }
} }
.pk-strzalka {                                    /* grot rozwinięcia — kierunek, nie ozdoba */
  position: absolute; right: .15em; top: 50%;
  width: .36em; height: .36em;
  margin-top: -.3em;
  border: solid var(--tafla-akcent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.pk-kropka { margin-left: -.3em; color: var(--tafla-tekst-2); }
.pk-luka--email { flex-basis: 11em; }
.pk-blad { flex-basis: 100%; color: var(--tafla-blad); font-family: var(--kroj-tekst); font-size: var(--r-0); font-weight: var(--w-tekst); line-height: 1.5; padding-top: var(--o-1); }
.pk-dol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3) var(--o-4); margin-top: var(--o-3); }
.pk-uwaga { flex: 1 1 13rem; color: var(--tafla-tekst-2); font-size: var(--r-0); line-height: 1.45; }

/* ==========================================================================
   RUCH SEKCJI — każda sekcja swój (wyglad.md, zakaz 6: nie jeden efekt na wszystkim).
   Oś przewijania przeglądarki (animation-timeline: view()), poza głównym wątkiem.
   Tekst NIGDY nie jest przezroczysty (fokus nie trafia w element o kryciu 0) —
   ruch niesie materiał, nie treść.
   Teza: tafla „zapala się jako szkło" — krawędź i połysk gasną → pełne, tekst od
   razu w 100%. Pozostałe sekcje: przy nich (etap B).
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .teza-tafla::after, .teza-tafla::before {
      animation: fw-zapal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes fw-zapal { from { opacity: 0; } }
/* Cennik: linie między wierszami rachunku rysują się od lewej, gdy tafla wjeżdża */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cennik-wiersz + .cennik-wiersz::before {
      animation: fw-linia linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes fw-linia { from { transform: scaleX(0); } }

/* ==========================================================================
   ZATRZASKI — Teza → Realizacje i Realizacje → Cennik (html.zatrzask-trwa). Krycie i skalę
   warstw w trakcie pisze glowna.js wprost na elementach; niżej tylko wartości domyślne.
   Kamera leci naprzód: Teza rośnie i gaśnie, Realizacje przychodzą z głębi.
   ========================================================================== */
html.zatrzask-trwa { overflow: hidden; }
html.zatrzask-trwa .teza-wnetrze {
  opacity: calc(1 - var(--zq-teza, 0));
  transform: scale(calc(1 + .16 * var(--zq-teza, 0)));
}
html.zatrzask-trwa .realizacje-wnetrze {
  opacity: var(--zq-pas, 1);
  transform: scale(calc(.8 + .2 * var(--zq-pas, 1)));
}

/* ==========================================================================
   5. LABORATORIUM — zajawka: zdanie, cztery wiersze-narzędzia na włoskowych liniach, przycisk.
   Znak mały w prawym górnym rogu (poza w index.php); treść w lewej kolumnie.
   ========================================================================== */
.laboratorium-skrot {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 86vh;
  min-height: 86svh;
  padding-block: calc(var(--logo-wys) + var(--o-5)) var(--o-8);
}
.laboratorium-kolumna { display: grid; gap: var(--o-4); max-width: 38rem; justify-items: start; }
.laboratorium-kolumna h2 { font-size: var(--r-4); font-weight: var(--w-naglowek); }
.laboratorium-lead { margin: 0; max-width: 46ch; color: var(--tekst-2); }
.laboratorium-lista { justify-self: stretch; margin: var(--o-2) 0 var(--o-3); padding: 0; list-style: none; }
.laboratorium-lista li { border-top: 1px solid var(--linia); }
.laboratorium-lista li:last-child { border-bottom: 1px solid var(--linia); }
.laboratorium-lista a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 1.1em; align-items: baseline; gap: var(--o-4);
  padding: 13px 0; color: var(--tekst); text-decoration: none;
  transition: padding-left .35s var(--e-lagodna), color .25s;
}
.laboratorium-nazwa { font-size: var(--r-2); font-weight: var(--w-lekki); }
.laboratorium-znacznik { color: var(--tekst-3); white-space: nowrap; transition: color .25s; }
.laboratorium-lista .ikona { align-self: center; color: var(--akcent); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--e-lagodna); }
.laboratorium-lista a:hover, .laboratorium-lista a:focus-visible { padding-left: var(--o-2); }
.laboratorium-lista a:hover .laboratorium-znacznik { color: var(--tekst-2); }
.laboratorium-lista a:hover .ikona, .laboratorium-lista a:focus-visible .ikona { opacity: 1; transform: none; }
@media (max-width: 599px) {
  .laboratorium-lista a { grid-template-columns: minmax(0, 1fr) 1.1em; row-gap: 2px; }
  .laboratorium-znacznik { grid-row: 2; grid-column: 1; }
  .laboratorium-lista .ikona { opacity: .7; transform: none; grid-row: 1 / span 2; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .laboratorium-lista a, .laboratorium-lista .ikona { transition: none; } }