/* Ułamek — wygląd. Nazewnictwo ITCSS: o- (układ), c- (element), u- (pomocnicze), is- (stan). */

/* ===== ustawienia ===== */
:root {
  --tlo: #14202b;
  --tlo-2: #1c2d3b;
  --tlo-3: #243849;
  --tekst: #e8eef2;
  --tekst-przygaszony: #b3c2cd;
  --akcent: #5fb3a1;
  --na-akcencie: #0e1a22;
  --piasek: #e8b47a;
  --linia: #3a5063;

  --czcionka-naglowki: "Playfair Display", Georgia, "Times New Roman", serif;
  --czcionka-tresc: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* skala 1,618 */
  --s-1: 0.875rem;
  --s0: 1.0625rem;
  --s1: 1.272rem;
  --s2: 1.618rem;
  --s3: clamp(2.1rem, 4.4vw, 2.618rem);
  --s4: clamp(2.5rem, 7vw, 4.236rem);

  --odstep: 3rem;
  --odstep-maly: 1rem;
  --pole: 1.25rem;
  --linia-grubosc: 1px;
  --cien: 6px 6px 0 #0a131a;
  --miara: 70ch;
  --wysokosc-naglowka: 4.25rem;
  --luk: 42% 42% 0 0 / 24% 24% 0 0;
}

/* ===== elementy ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--tlo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900' fill='none' stroke='%235fb3a1' stroke-width='1' opacity='.09'%3E%3Ccircle cx='900' cy='0' r='260'/%3E%3Ccircle cx='900' cy='0' r='360'/%3E%3Ccircle cx='900' cy='0' r='520'/%3E%3Ccircle cx='0' cy='900' r='200'/%3E%3Ccircle cx='0' cy='900' r='330'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right top;
  color: var(--tekst);
  font-family: var(--czcionka-tresc);
  font-size: var(--s0);
  line-height: 1.65;
  min-height: 100vh;
  padding-top: var(--wysokosc-naglowka);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--czcionka-naglowki);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 var(--odstep-maly);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--s4); }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s1); font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--miara); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; max-width: var(--miara); }
li { margin-bottom: .35em; }
img { display: block; max-width: 100%; height: auto; }
hr { border: 0; border-top: var(--linia-grubosc) solid var(--linia); margin: 2rem 0; }
strong { font-weight: 800; }

a {
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 3px solid var(--akcent);
  transition: color .15s;
}
a:hover { color: var(--piasek); border-bottom-color: var(--piasek); text-decoration: underline; text-underline-offset: .2em; }

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

::selection { background: var(--akcent); color: var(--na-akcencie); }

/* ===== pomocnicze ===== */
.u-wizualnie-ukryte {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.u-bez-przewijania { overflow: hidden; }
.u-maly { font-size: var(--s-1); color: var(--tekst-przygaszony); }
.u-pastka { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.c-pomin {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--piasek); color: var(--na-akcencie);
  padding: .6rem 1rem; font-weight: 800; border-bottom: 0;
}
.c-pomin:focus { top: 1rem; color: var(--na-akcencie); }

/* ===== nagłówek ===== */
.c-naglowek {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--wysokosc-naglowka);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}
.c-naglowek > * { pointer-events: auto; }

.c-logo {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--tlo-2);
  padding: .5rem .9rem .5rem .6rem;
  border-bottom: 0;
  font-family: var(--czcionka-naglowki);
  font-weight: 800; font-size: var(--s1);
  color: var(--tekst);
  box-shadow: var(--cien);
}
.c-logo:hover { color: var(--tekst); text-decoration: none; }
.c-logo svg { width: 1.7rem; height: 1.7rem; }

.c-menu-przycisk {
  font: inherit; font-weight: 800; color: var(--tekst);
  background: var(--tlo-2); border: 0; cursor: pointer;
  padding: .7rem 1rem; box-shadow: var(--cien);
}
.c-menu-przycisk:hover { text-decoration: underline; text-underline-offset: .2em; }

.c-menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; max-width: none; }
.c-menu-lista li { margin: 0; }
.c-menu-lista a {
  display: inline-block; border-bottom: 0;
  padding: .45rem .8rem .45rem 1.4rem; position: relative;
  font-weight: 800; color: var(--tekst);
}
.c-menu-lista a:hover { color: var(--piasek); text-decoration: underline; text-underline-offset: .25em; }
.c-menu-lista a[aria-current="page"]::before {
  content: ""; position: absolute; left: .5rem; top: 50%;
  width: .55rem; height: .55rem; margin-top: -.275rem;
  border-radius: 50%; background: var(--akcent);
}

.c-nakladka {
  position: fixed; inset: 0; z-index: 60;
  background: var(--tlo); padding: 1.25rem 1rem;
  display: none; flex-direction: column; gap: 2rem; overflow-y: auto;
}
.c-nakladka.is-otwarte { display: flex; }
.c-nakladka .c-menu-lista a { font-family: var(--czcionka-naglowki); font-size: var(--s2); }
.c-nakladka__gora { display: flex; justify-content: space-between; align-items: center; }

.c-menu-poziome { display: none; }

/* ===== układ rozdziałów (rozdzielony ekran) ===== */
.o-rozdzial { display: block; }
.o-rozdzial__kadr { padding: 1rem 1rem 0; }
.o-rozdzial__tresc { padding: var(--odstep-maly); }

.o-rama {
  border: var(--linia-grubosc) solid var(--linia);
  background: rgba(20, 32, 43, .86);
  padding: 1.5rem 1.25rem;
  margin-bottom: var(--odstep);
}

.o-blok { display: block; }

/* ===== kadr (zdjęcie z łukiem) ===== */
.c-kadr {
  position: relative; margin: 0;
  border-radius: var(--luk);
  overflow: hidden; background: var(--tlo-3);
  aspect-ratio: 4 / 3;
}
.c-kadr img { width: 100%; height: 100%; object-fit: cover; }
.c-kadr__podpis {
  position: absolute; left: 0; bottom: 0;
  background: var(--tlo); color: var(--tekst-przygaszony);
  font-size: var(--s-1); padding: .35rem .8rem .35rem .7rem;
  max-width: 85%;
}

/* ===== tytuły sekcji ===== */
.c-tytul-sekcji { margin-bottom: 1.25rem; }
.c-tytul-sekcji h2 { margin: 0; }
.c-tytul-sekcji h2::before {
  content: ""; display: block; width: 3rem; height: .45rem;
  background: var(--akcent); margin-bottom: .8rem;
}
.c-tytul-sekcji p { color: var(--tekst-przygaszony); margin: .7rem 0 0; }

.o-blok-z-tytulem { display: block; }

/* ===== wezwania do działania ===== */
.c-wezwanie {
  display: inline-block; font: inherit; font-weight: 800; font-size: var(--s1);
  color: var(--akcent); background: none; border: 0; cursor: pointer;
  padding: 0; margin: 0 1.5rem .5rem 0;
  text-decoration: underline; text-decoration-thickness: .2em;
  text-underline-offset: .28em; text-decoration-color: var(--akcent);
  border-bottom: 0;
}
.c-wezwanie::after { content: " \2192"; }
.c-wezwanie:hover { color: var(--piasek); text-decoration-color: var(--piasek); text-decoration-thickness: .2em; }
.c-wezwanie--cichy { color: var(--tekst); text-decoration-color: var(--linia); }
.c-wezwanie--cichy::after { content: ""; }
.c-wezwania { margin-top: 1.5rem; }

/* ===== plakietki ===== */
.c-plakietka {
  display: inline-block; background: var(--piasek); color: var(--na-akcencie);
  font-size: var(--s-1); font-weight: 800; padding: .1rem .55rem; margin: 0 .4rem .4rem 0;
}
.c-plakietka--akcent { background: var(--akcent); }
.c-plakietki { margin: 0 0 1rem; padding: 0; list-style: none; max-width: none; }
.c-plakietki li { display: inline-block; margin: 0; }

/* ===== wstawka ===== */
.c-wstawka {
  background: var(--akcent); color: var(--na-akcencie);
  padding: 1rem 1.25rem; margin: 1.5rem 0; font-weight: 600; max-width: var(--miara);
}
.c-wstawka p { margin: 0; color: inherit; }
.c-wstawka--piasek { background: var(--piasek); }

/* ===== pierwszy ekran ===== */
.c-wstep h1 { margin-bottom: 1.25rem; }
.c-wstep__lead { font-size: var(--s1); color: var(--tekst-przygaszony); max-width: 48ch; }
.c-wstep__notatka {
  margin-top: 2rem; padding: 1rem 1.25rem; max-width: 34rem;
  background: var(--tlo-2); box-shadow: var(--cien);
  font-family: var(--czcionka-naglowki); font-style: italic;
}
.c-wstep__notatka b { color: var(--piasek); font-style: normal; font-weight: 800; }
.c-wstep__notatka small { display: block; margin-top: .4rem; font-family: var(--czcionka-tresc); font-style: normal; color: var(--tekst-przygaszony); font-size: var(--s-1); }

/* ===== lista usług (details) ===== */
.c-oferta { border-top: var(--linia-grubosc) solid var(--linia); max-width: none; }
.c-oferta:last-of-type { border-bottom: var(--linia-grubosc) solid var(--linia); }
.c-oferta summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem;
  align-items: baseline; padding: 1rem 0;
}
.c-oferta summary::-webkit-details-marker { display: none; }
.c-oferta__nazwa { font-family: var(--czcionka-naglowki); font-weight: 800; font-size: var(--s1); }
.c-oferta__termin { grid-column: 1; color: var(--tekst-przygaszony); font-size: var(--s-1); }
.c-oferta__cena {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font-family: var(--czcionka-naglowki); font-weight: 800; font-size: var(--s2); color: var(--piasek);
  line-height: 1;
}
.c-oferta__cena small { display: block; font-family: var(--czcionka-tresc); font-weight: 600; font-size: .75rem; color: var(--tekst-przygaszony); margin-top: .25rem; }
.c-oferta summary:hover .c-oferta__nazwa { text-decoration: underline; text-underline-offset: .2em; }
.c-oferta__szczegoly { padding: 0 0 1.25rem; }
.c-oferta__szczegoly p { margin-bottom: .8rem; }

/* wspólny szewron */
.c-pytanie summary::after, .c-granica-pytanie summary::after {
  content: ""; display: inline-block; width: .55rem; height: .55rem;
  border-right: 2px solid var(--akcent); border-bottom: 2px solid var(--akcent);
  transform: rotate(45deg); margin-left: .6rem; transition: transform .2s; flex: none;
}
details[open] > summary::after { transform: rotate(-135deg); }

/* ===== rozmowa (proces) ===== */
.c-rozmowa {
  list-style: none; padding: 0; margin: 0; max-width: none;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem .5rem;
}
.c-rozmowa__wypowiedz { margin: 0; grid-column: 1 / span 11; }
.c-rozmowa__wypowiedz:nth-child(even) { grid-column: 2 / span 11; }
.c-rozmowa__kto {
  display: block; font-size: var(--s-1); font-weight: 800; color: var(--akcent);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem;
}
.c-rozmowa__wypowiedz:nth-child(even) .c-rozmowa__kto { color: var(--piasek); }
.c-rozmowa__tekst {
  display: block; background: var(--tlo-2); padding: .9rem 1.1rem;
  border-left: 4px solid var(--akcent);
}
.c-rozmowa__wypowiedz:nth-child(even) .c-rozmowa__tekst { border-left-color: var(--piasek); background: var(--tlo-3); }
.c-rozmowa__krok { font-family: var(--czcionka-naglowki); font-weight: 800; color: var(--tekst-przygaszony); margin-right: .4rem; }

/* ===== granice zakresu (zagnieżdżone ramki) ===== */
.c-zakres {
  border: var(--linia-grubosc) dashed var(--tekst-przygaszony);
  border-radius: 14rem 14rem 0 0 / 5rem 5rem 0 0;
  padding: 3.2rem 1.25rem 1.25rem;
  position: relative; max-width: none;
}
.c-zakres__etykieta {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: var(--tlo); padding: 0 .6rem; white-space: nowrap;
  font-size: var(--s-1); font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.c-zakres--poza > .c-zakres__etykieta { top: -.8rem; color: var(--piasek); }
.c-zakres__poza { margin-bottom: 1.25rem; }
.c-zakres__poza li { color: var(--tekst-przygaszony); }
.c-zakres__wewnatrz {
  position: relative; border: 2px solid var(--akcent); background: var(--tlo-2);
  border-radius: 9rem 9rem 0 0 / 3.5rem 3.5rem 0 0;
  padding: 2.8rem 1.25rem 1rem; max-width: none;
}
.c-zakres__wewnatrz .c-zakres__etykieta { top: -.8rem; color: var(--akcent); background: var(--tlo-2); }
.c-zakres ul { max-width: none; }

/* ===== akordeon i FAQ ===== */
.c-granica-pytanie, .c-pytanie { border-top: var(--linia-grubosc) solid var(--linia); max-width: none; }
.c-granica-pytanie:last-of-type, .c-pytanie:last-of-type { border-bottom: var(--linia-grubosc) solid var(--linia); }
.c-granica-pytanie summary, .c-pytanie summary {
  list-style: none; cursor: pointer; padding: .9rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-weight: 800;
}
.c-granica-pytanie summary::-webkit-details-marker, .c-pytanie summary::-webkit-details-marker { display: none; }
.c-granica-pytanie summary:hover, .c-pytanie summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.c-granica-pytanie > div, .c-pytanie > div { padding: 0 0 1rem; }

.c-szukajka { position: relative; margin: 0 0 1rem; max-width: 26rem; transform: translateX(-.6rem); }
.c-szukajka input {
  width: 100%; font: inherit; color: var(--tekst);
  background: var(--tlo-3); border: 0; border-bottom: 3px solid var(--akcent);
  padding: .75rem 1rem;
}
.c-szukajka input::placeholder { color: var(--tekst-przygaszony); }
.c-szukajka__wynik { margin: .5rem 0 0; font-size: var(--s-1); color: var(--tekst-przygaszony); min-height: 1.5em; }
.c-brak-wynikow { padding: 1rem; background: var(--tlo-2); }

/* ===== wywiad ===== */
.c-wywiad { margin: 0; max-width: none; }
.c-wywiad dt {
  font-family: var(--czcionka-naglowki); font-style: italic; color: var(--piasek);
  font-size: var(--s1); margin-top: 1.4rem;
}
.c-wywiad dt:first-child { margin-top: 0; }
.c-wywiad dd { margin: .3rem 0 0; max-width: var(--miara); }

/* ===== formularz ===== */
.c-pas-formularza { background: var(--tlo-2); padding: 1.5rem 1rem 2rem; margin-top: var(--odstep); border-top: 6px solid var(--akcent); }
.c-formularz { max-width: 44rem; }
.c-pole { margin: 0 0 var(--pole); }
.c-pole label, .c-pole legend { display: block; font-weight: 800; margin-bottom: .35rem; padding: 0; }
.c-pole input[type="text"], .c-pole input[type="email"], .c-pole input[type="tel"],
.c-pole select, .c-pole textarea {
  width: 100%; font: inherit; color: var(--tekst);
  background: var(--tlo-3); border: 0; border-bottom: 3px solid transparent;
  padding: .8rem 1rem; border-radius: 0; appearance: none;
}
.c-pole select {
  background-image: linear-gradient(45deg, transparent 50%, var(--akcent) 50%), linear-gradient(135deg, var(--akcent) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - .9rem) 1.35rem;
  background-size: .4rem .4rem; background-repeat: no-repeat; padding-right: 2.5rem;
}
.c-pole select option { color: #fff; background: var(--tlo-2); }
.c-pole textarea { min-height: 9rem; resize: vertical; }
.c-pole input:focus, .c-pole select:focus, .c-pole textarea:focus { outline: none; border-bottom-color: var(--akcent); }
.c-pole input:focus-visible, .c-pole select:focus-visible, .c-pole textarea:focus-visible { outline: 3px solid var(--piasek); outline-offset: 2px; }
.c-pole__podpowiedz { font-size: var(--s-1); color: var(--tekst-przygaszony); margin: .3rem 0 0; }
.c-pole__blad { color: var(--piasek); font-weight: 800; margin: .35rem 0 0; font-size: var(--s-1); }
.c-pole--blad input, .c-pole--blad select, .c-pole--blad textarea { border-bottom-color: var(--piasek); }
.c-zgoda { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.c-zgoda input { width: 1.4rem; height: 1.4rem; margin: .2rem 0 0; accent-color: var(--akcent); }
.c-zgoda label { font-weight: 400; margin: 0; }
.c-komunikat {
  padding: 1rem 1.25rem; margin: 0 0 1.25rem; max-width: 44rem;
  background: var(--piasek); color: var(--na-akcencie); font-weight: 800;
}
.c-komunikat[hidden] { display: none; }
.c-formularz__wyslij[disabled] { opacity: .5; cursor: progress; }

/* ===== panel diagnozy (boczny) ===== */
.c-zakladka {
  position: fixed; right: 0; top: 55%; z-index: 30;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--akcent); color: var(--na-akcencie);
  font: inherit; font-weight: 800; border: 0; cursor: pointer;
  padding: 1rem .6rem; box-shadow: -6px 6px 0 #0a131a;
}
.c-zakladka:hover { background: var(--piasek); text-decoration: underline; text-underline-offset: .2em; }
.c-panel-diagnozy {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(25rem, 100%); background: var(--tlo-2);
  border-left: 4px solid var(--akcent);
  padding: 1.25rem; overflow-y: auto;
  transform: translateX(105%); visibility: hidden; transition: transform .25s, visibility 0s .25s;
}
.c-panel-diagnozy.is-otwarte { transform: none; visibility: visible; transition: transform .25s; }
.c-panel-diagnozy__gora { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.c-panel-diagnozy h2 { font-size: var(--s2); }
.c-zamknij { font: inherit; font-weight: 800; background: none; border: 0; color: var(--tekst); cursor: pointer; padding: .3rem .5rem; }
.c-zamknij:hover { color: var(--piasek); text-decoration: underline; }
.c-wynik { margin-top: 1.25rem; padding: 1rem; background: var(--tlo); border-left: 4px solid var(--piasek); }
.c-wynik[hidden] { display: none; }
.c-wynik__cena { font-family: var(--czcionka-naglowki); font-weight: 800; font-size: var(--s2); color: var(--piasek); }
.c-tlo-panelu { position: fixed; inset: 0; z-index: 65; background: rgba(10, 19, 26, .7); display: none; }
.c-tlo-panelu.is-otwarte { display: block; }
.c-wybor { border: 0; margin: 0 0 var(--pole); padding: 0; }
.c-wybor legend { font-weight: 800; margin-bottom: .4rem; padding: 0; }
.c-wybor label { display: flex; gap: .6rem; align-items: start; margin: 0 0 .4rem; }
.c-wybor input { accent-color: var(--akcent); margin-top: .35rem; }

/* ===== ciasteczka ===== */
.c-ciasteczka {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 90;
  width: min(30rem, calc(100% - 2rem));
  background: var(--tlo-2); border: 2px solid var(--akcent);
  padding: 1rem 1.1rem; box-shadow: var(--cien);
  font-size: .95rem;
}
.c-ciasteczka[hidden] { display: none; }
.c-ciasteczka h2 { font-size: var(--s1); margin-bottom: .4rem; }
.c-ciasteczka h2:focus { outline: none; }
.c-ciasteczka p { margin-bottom: .6rem; }
.c-ciasteczka__przyciski { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.c-ciasteczka__przycisk {
  font: inherit; font-weight: 800; cursor: pointer; padding: .7rem .5rem;
  background: var(--tlo-3); color: var(--tekst); border: 2px solid var(--tekst-przygaszony);
}
.c-ciasteczka__przycisk:hover { border-color: var(--piasek); text-decoration: underline; text-underline-offset: .2em; }
.c-ciasteczka__ustawienia { grid-column: 1 / -1; }
.c-ciasteczka__kategorie { margin: .6rem 0; padding: 0; border: 0; }
.c-ciasteczka__kategorie label { display: flex; gap: .6rem; align-items: start; margin-bottom: .4rem; }
.c-ciasteczka__kategorie input { accent-color: var(--akcent); margin-top: .35rem; }

/* ===== stopka (wizytówka) ===== */
.c-stopka { padding: var(--odstep) 1rem 5rem; }
.c-wizytowka {
  max-width: 46rem; margin: 0 auto 0 0; background: var(--tlo-2);
  border: var(--linia-grubosc) solid var(--linia); border-top: 6px solid var(--piasek);
  padding: 1.5rem 1.25rem; box-shadow: var(--cien);
  display: grid; gap: 1.5rem;
}
.c-wizytowka__nazwa { font-family: var(--czcionka-naglowki); font-weight: 800; font-size: var(--s2); margin: 0 0 .3rem; }
.c-wizytowka address { font-style: normal; }
.c-wizytowka ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.c-wizytowka li { margin-bottom: .3rem; }
.c-wizytowka__uwaga { font-size: var(--s-1); color: var(--tekst-przygaszony); }
.c-przycisk-tekstowy { font: inherit; background: none; border: 0; padding: 0; color: var(--tekst); cursor: pointer; border-bottom: 3px solid var(--akcent); }
.c-przycisk-tekstowy:hover { color: var(--piasek); border-bottom-color: var(--piasek); text-decoration: underline; text-underline-offset: .2em; }

/* ===== dokumenty prawne i tabele ===== */
.c-dokument h2 { font-size: var(--s2); margin-top: 2rem; }
.c-dokument h2::before { display: none; }
.c-dokument h3 { margin-top: 1.5rem; }
.c-dokument ol, .c-dokument ul { max-width: var(--miara); }
.c-uzupelnij { background: var(--piasek); color: var(--na-akcencie); font-weight: 800; padding: 0 .3em; }
.c-tabela-obwoluta { overflow-x: auto; margin: 0 0 1.5rem; }
.c-tabela { border-collapse: collapse; min-width: 34rem; width: 100%; font-size: .95rem; }
.c-tabela th, .c-tabela td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: var(--linia-grubosc) solid var(--linia); }
.c-tabela th { background: var(--tlo-3); font-weight: 800; }

.c-decor-luki { aspect-ratio: 4 / 3; border-radius: var(--luk); border: var(--linia-grubosc) solid var(--linia); background: var(--tlo-2); display: grid; place-items: center; overflow: hidden; }
.c-decor-luki svg { width: 70%; height: auto; }

.c-okruszki { margin: 0 0 1rem; font-size: var(--s-1); color: var(--tekst-przygaszony); }


.c-ekran-bledu { min-height: 55vh; display: grid; align-content: center; }
.c-ekran-bledu__numer { font-family: var(--czcionka-naglowki); font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; color: var(--akcent); line-height: 1; margin: 0; }

/* ===== punkty przerwania ===== */
@media (min-width: 30em) {
  .o-rozdzial__tresc { padding: 1rem 1.5rem; }
  .c-wizytowka { grid-template-columns: 1.2fr 1fr; }
}

@media (min-width: 50em) and (max-aspect-ratio: 1 / 1) {
  .o-rozdzial__kadr .c-kadr, .o-rozdzial__kadr .c-decor-luki { max-height: 45vh; margin-inline: auto; }
  .c-menu-poziome { display: block; }
  .c-menu-poziome .c-menu-lista { flex-direction: row; background: var(--tlo-2); box-shadow: var(--cien); }
  .c-menu-przycisk { display: none; }
}

@media (min-width: 50em) and (min-aspect-ratio: 1 / 1) {
  .c-menu-poziome { display: block; }
  .c-menu-poziome .c-menu-lista { flex-direction: row; background: var(--tlo-2); box-shadow: var(--cien); }
  .c-menu-przycisk { display: none; }

  body { padding-top: 0; }
  .o-rozdzial {
    display: grid; grid-template-columns: 5fr 7fr; align-items: stretch;
    min-height: 100vh;
  }
  .o-rozdzial--krotki { min-height: 0; }
  .o-rozdzial__kadr { padding: 1rem 0 1rem 1rem; }
  .o-rozdzial__kadr .c-kadr, .o-rozdzial__kadr .c-decor-luki {
    position: sticky; top: 1rem;
    height: calc(100vh - 2rem); max-height: 100%; aspect-ratio: auto;
  }
  .o-rozdzial__tresc { padding: 6rem 2rem 1rem 3rem; }
  .o-rozdzial--wstep .o-rozdzial__tresc { padding-top: 7rem; }
  .o-rozdzial:not(.o-rozdzial--wstep) .o-rozdzial__tresc { padding-top: 4rem; }
  .o-rozdzial--wstep h1 {
    position: relative; z-index: 3;
    margin-left: -6.5rem; padding: .3rem 1rem .3rem 0;
    background: var(--tlo); width: calc(100% + 6.5rem);
  }

  .o-blok-z-tytulem { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .o-blok-z-tytulem > .c-tytul-sekcji { position: sticky; top: 1.5rem; }
  .o-blok-z-tytulem > .c-tytul-sekcji h2 { font-size: var(--s2); }

  .c-stopka { padding-left: calc(41.666% + 3rem); }
  .c-wstep__notatka { transform: translateX(-3rem); }
}

@media (min-width: 64em) {
  .o-blok-z-tytulem { grid-template-columns: 13rem minmax(0, 1fr); }
  .o-rozdzial__tresc { padding-right: 4rem; }
}

@media (max-width: 49.99em) {
  .c-zakladka { top: auto; bottom: 5.5rem; right: 0; }
  .c-wstep h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .c-naglowek, .c-zakladka, .c-panel-diagnozy, .c-ciasteczka, .c-pomin { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .o-rozdzial { display: block; }
  .c-kadr { display: none; }
  a { color: #000; }
}

/* ===== warianty ===== */
.c-cena-duza { font-family: var(--czcionka-naglowki); font-weight: 800; font-size: var(--s3); color: var(--piasek); line-height: 1; }
.c-podtytul { margin-top: 2rem; }
.c-wstep--dokument h1 { font-size: var(--s3); }
.c-kadr--prawo img { object-position: 82% 50%; }