/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext-500-700.woff2?v=054c266f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-500-700.woff2?v=a0d054c4) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-ext-400-600.woff2?v=ed3571ea) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/source-sans-3-latin-400-600.woff2?v=ac057a55) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* kolory — dosłownie z styl.md ## Kolory */
  --tlo: #ffffff;
  --tlo-blekit: #e4eefa;
  --tlo-granat: #0b1b33;
  --siatka: #1b2f50;
  --tlo-karta-ciemna: #132a4c;
  --tlo-granat-koniec: #143766;
  --tekst: #0f1f38;
  --tekst-pom: #4a5b73;
  --akcent: #1d5fd1;
  --akcent-mocny: #164aa6;
  --tekst-jasny: #eef4fb;
  --tekst-jasny-pom: #a9bcd6;
  --wyroznienie-start: #6ee0f5;
  --wyroznienie-koniec: #8fb8ff;
  --blekit-jasny: #8fd0ff;
  --blekit-jasny-mocny: #b8e2ff;
  --obrys-pola: #6b7b91;
  --blad: #b3261e;
  --obrys-karty: #c9d6e6;
  --linia-ciemna: #24406b;
  --fokus: #1d5fd1;
  --fokus-ciemny: #8fd0ff;
  /* nazwy wiążące podręcznika budowy (te same wartości ról ze styl.md) */
  --tekst-2: #4a5b73;
  --akcent-ciemny: #164aa6;
  --przycisk-tekst: #ffffff;
  --karta: #e4eefa;
  --link: #1d5fd1;
  /* typografia */
  --font-naglowki: 'Space Grotesk', system-ui, sans-serif;
  --font-tekst: 'Source Sans 3', system-ui, sans-serif;
  --roz-h1: clamp(40px, 5.6vw + 8px, 88px);
  --roz-h1-pod: clamp(42px, 4.6vw + 14px, 64px);
  --roz-h2: clamp(30px, 2.4vw + 18px, 48px);
  --roz-liczby: clamp(36px, 1.2vw + 28px, 44px);
  --roz-h3: clamp(22px, 0.8vw + 16px, 28px);
  --roz-lead: clamp(18px, 0.5vw + 14px, 21px);
  --roz-baza: clamp(16px, 0.2vw + 15px, 17px);
  --roz-maly: 16px;
  --roz-logo: 24px;
  --roz-logo-stopka: 28px;
  /* odstępy (krok 8 px) */
  --o-8: 8px; --o-16: 16px; --o-24: 24px; --o-32: 32px;
  --o-48: 48px; --o-64: 64px; --o-96: 96px; --o-128: 128px;
  --sekcja-pion: 72px;
  --margines: 24px;
  --szer-tresci: 1160px;
  --szer-waska: 640px;
  --zabieg-karta: 48px;
  --promien: 12px;
  --cel-min: 48px;
  --pole-h: 48px;
  --obrys-pola-gr: 1.5px;
  --ikona-kreska: 1.75px;
  --kolko-stan: 20px;
  --naglowek-h: 72px;
  --pasek-h: 72px;
  /* ruch — styl.md ## Ruch */
  --ruch-dystans: 12px;
  --ruch-czas: 350ms;
  --ruch-easing: cubic-bezier(.2,.7,.2,1);
  --ruch-opoznienie: 70ms;
  --ruch-linia: 900ms;
  --ruch-galezie: 600ms;
  --ruch-przycisk: 150ms;
}
@media (min-width: 900px) {
  :root { --sekcja-pion: 112px; --margines: 40px; --naglowek-h: 80px; }
}

/* ── reset i typografia ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: var(--roz-baza);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--naglowek-h) + var(--o-16));
  scroll-padding-bottom: calc(var(--pasek-h) + var(--o-16));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--tlo); padding-bottom: calc(var(--pasek-h) + env(safe-area-inset-bottom)); }
body.bez-paska { padding-bottom: 0; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
h1, h2, h3 { font-family: var(--font-naglowki); font-weight: 700; line-height: 1.15; margin: 0 0 var(--o-16); color: inherit; }
h1 { font-size: var(--roz-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--roz-h2); }
h3 { font-size: var(--roz-h3); }
p { margin: 0 0 var(--o-16); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--akcent-mocny); }
svg.ikona { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--ikona-kreska); stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.ciemne :focus-visible, .naglowek :focus-visible, .stopka :focus-visible, .pasek :focus-visible { outline-color: var(--fokus-ciemny); }

.skip {
  position: absolute; left: -9999px; top: var(--o-8); z-index: 50;
  background: var(--blekit-jasny); color: var(--tlo-granat);
  padding: var(--o-8) var(--o-16); border-radius: var(--promien); font-weight: 600;
}
.skip:focus { left: var(--o-8); }

.wnetrze { max-width: calc(var(--szer-tresci) + 2 * var(--margines)); margin: 0 auto; padding-left: var(--margines); padding-right: var(--margines); }
.sekcja { padding-top: var(--sekcja-pion); padding-bottom: var(--sekcja-pion); }
.ciemne { background: var(--tlo-granat); color: var(--tekst-jasny); }
.ciemne a { color: var(--blekit-jasny); }
.blekit { background: var(--tlo-blekit); }
.pom { color: var(--tekst-pom); }

/* ── przyciski ── */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--o-8);
  min-height: var(--cel-min); min-width: var(--cel-min); padding: 12px 22px;
  border-radius: var(--promien); border: 1.5px solid var(--akcent);
  background: var(--akcent); color: var(--przycisk-tekst);
  font-family: var(--font-tekst); font-size: var(--roz-baza); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--ruch-przycisk) ease-out, border-color var(--ruch-przycisk) ease-out, color var(--ruch-przycisk) ease-out;
}
.przycisk:hover, .przycisk:active { background: var(--akcent-mocny); border-color: var(--akcent-mocny); color: var(--przycisk-tekst); }
.przycisk svg.ikona { width: 20px; height: 20px; }
.przycisk--drugi { background: transparent; color: var(--akcent); }
.przycisk--drugi:hover, .przycisk--drugi:active { background: var(--tlo-blekit); border-color: var(--akcent); color: var(--akcent); }
.ciemne .przycisk, .naglowek .przycisk, .pasek .przycisk { background: var(--blekit-jasny); border-color: var(--blekit-jasny); color: var(--tlo-granat); }
.ciemne .przycisk:hover, .ciemne .przycisk:active, .pasek .przycisk:hover, .pasek .przycisk:active { background: var(--blekit-jasny-mocny); border-color: var(--blekit-jasny-mocny); color: var(--tlo-granat); }
.ciemne .przycisk--drugi, .naglowek .przycisk--drugi { background: transparent; color: var(--blekit-jasny); }
.ciemne .przycisk--drugi:hover, .ciemne .przycisk--drugi:active, .naglowek .przycisk--drugi:hover, .naglowek .przycisk--drugi:active { background: var(--tlo-karta-ciemna); border-color: var(--blekit-jasny); color: var(--blekit-jasny); }
.przyciski { display: flex; flex-wrap: wrap; gap: var(--o-16); align-items: center; }

/* ── nagłówek strony ── */
.naglowek {
  position: sticky; top: 0; z-index: 30;
  background: var(--tlo-granat); color: var(--tekst-jasny);
  border-bottom: 1px solid var(--linia-ciemna);
  transition: background-color var(--ruch-czas) ease-out, border-color var(--ruch-czas) ease-out;
}
/* nad otwarciem: tło nagłówka = tło otwarcia (granat), bez linii — wizualnie przezroczysty; po przewinięciu linia --linia-ciemna */
.js .naglowek--glowna:not(.przewiniete) { border-bottom-color: var(--tlo-granat); }
.naglowek--glowna { margin-bottom: calc(-1 * var(--naglowek-h)); }
.naglowek__wnetrze { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-16); min-height: var(--naglowek-h); padding-top: var(--o-8); padding-bottom: var(--o-8); }
.logo {
  display: inline-flex; align-items: center; min-height: var(--cel-min);
  font-family: var(--font-naglowki); font-weight: 700; font-size: var(--roz-logo); line-height: 1;
  color: var(--tekst-jasny); text-decoration: none;
}
.ciemne .logo, .naglowek .logo { color: var(--tekst-jasny); }
.naglowek .logo:hover { color: var(--tekst-jasny); }
.menu-przycisk {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--o-8);
  min-height: var(--cel-min); padding: 8px 16px; border-radius: var(--promien);
  border: 1.5px solid var(--blekit-jasny); background: transparent; color: var(--tekst-jasny);
  font: 600 var(--roz-baza)/1.2 var(--font-tekst); cursor: pointer;
}
.menu-przycisk:hover { background: var(--tlo-karta-ciemna); }
#menu { flex-basis: 100%; }
#menu ul { display: flex; flex-direction: column; gap: var(--o-8); padding: var(--o-8) 0 var(--o-16); }
#menu a {
  display: flex; align-items: center; min-height: var(--cel-min); padding: 8px 12px;
  border-radius: var(--promien); color: var(--tekst-jasny); text-decoration: none; font-weight: 600;
}
#menu a:hover { background: var(--tlo-karta-ciemna); color: var(--tekst-jasny); }
.js #menu[hidden] { display: none; }
.naglowek__zadzwon { display: none; }
@media (max-width: 899.98px) {
  .js .naglowek.menu-otwarte { background: var(--tlo-granat); border-bottom-color: var(--linia-ciemna); }
  .js .naglowek.menu-otwarte #menu { min-height: calc(100vh - var(--naglowek-h)); min-height: calc(100svh - var(--naglowek-h)); }
  .js .naglowek.menu-otwarte #menu a { font-size: var(--roz-h3); font-family: var(--font-naglowki); }
}
@media (min-width: 900px) {
  .menu-przycisk { display: none; }
  #menu { flex-basis: auto; margin-left: auto; }
  .js #menu[hidden] { display: block; }
  #menu ul { flex-direction: row; gap: var(--o-8); padding: 0; }
  .naglowek__zadzwon { display: inline-flex; }
}

/* ── wejścia sekcji (ruch) — ukrywanie tylko pod .js ── */
.js .rv { opacity: 0; transform: translateY(var(--ruch-dystans)); transition: opacity var(--ruch-czas) var(--ruch-easing), transform var(--ruch-czas) var(--ruch-easing); }
.js .rv.on { opacity: 1; transform: none; }
.js .rv:nth-child(2) { transition-delay: var(--ruch-opoznienie); }
.js .rv:nth-child(3) { transition-delay: calc(2 * var(--ruch-opoznienie)); }

/* ── #otwarcie ── */
.otwarcie { position: relative; padding-top: calc(var(--naglowek-h) + var(--o-48)); padding-bottom: var(--o-64); }
.otwarcie__siatka-pole { display: grid; gap: var(--o-48); }
.otwarcie h1 { margin-bottom: var(--o-24); max-width: 14ch; }
.wyroznienie { color: var(--wyroznienie-koniec); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wyroznienie {
    background: linear-gradient(90deg, var(--wyroznienie-start), var(--wyroznienie-koniec));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.otwarcie .lead { font-size: var(--roz-lead); line-height: 1.5; color: var(--tekst-jasny); max-width: 38em; margin-bottom: var(--o-24); }
.fakty { display: grid; gap: var(--o-8); margin-bottom: var(--o-32); }
.fakt { display: flex; gap: 12px; align-items: flex-start; color: var(--tekst-jasny); }
.fakt svg.ikona { color: var(--blekit-jasny); width: 22px; height: 22px; margin-top: 2px; }
.otwarcie__siatka { display: none; }
.karta-kontaktu {
  position: relative; z-index: 2;
  background: var(--tlo-karta-ciemna); color: var(--tekst-jasny);
  border: 1px solid var(--linia-ciemna); border-radius: var(--promien);
  padding: var(--o-32) var(--o-24);
}
.karta-kontaktu h2 { font-size: var(--roz-h3); margin-bottom: var(--o-24); }
.karta-kontaktu a { color: var(--blekit-jasny); }
.kanal { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--o-16); }
.kanal:last-child { margin-bottom: 0; }
.kanal svg.ikona { color: var(--blekit-jasny); margin-top: 3px; }
.kanal p { margin: 0; }
.kanal__telefon { display: inline-flex; align-items: center; min-height: var(--cel-min); font-family: var(--font-naglowki); font-weight: 700; font-size: var(--roz-h3); line-height: 1.1; text-decoration: none; }
.kanal__telefon:hover { text-decoration: underline; }
.kanal__mail { display: inline-flex; align-items: center; min-height: var(--cel-min); }
.kanal .pom-jasny { color: var(--tekst-jasny-pom); }
.karta-kontaktu .kanal--tel { margin-bottom: var(--o-8); }
.karta-kontaktu .kanal--tel svg.ikona { margin-top: 13px; }
.karta-kontaktu .kanal--mail svg.ikona { margin-top: 12px; }
.pom-jasny { color: var(--tekst-jasny-pom); }
@media (min-width: 900px) {
  .otwarcie { min-height: 88vh; min-height: 88svh; display: flex; align-items: center; padding-bottom: 0; }
  .otwarcie > .wnetrze { width: 100%; }
  .otwarcie__siatka-pole { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--o-24); align-items: end; }
  .otwarcie__tekst { grid-column: 1 / 8; padding-bottom: var(--o-96); align-self: center; }
  .otwarcie__bok { grid-column: 9 / 13; position: relative; align-self: end; }
  .karta-kontaktu { margin-bottom: calc(-1 * var(--zabieg-karta)); }
  .otwarcie__siatka {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    left: -48px; right: -48px; top: -96px; bottom: 0;
    background-image: linear-gradient(var(--siatka) 1px, transparent 1px), linear-gradient(90deg, var(--siatka) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(closest-side, black 40%, transparent 100%);
    mask-image: radial-gradient(closest-side, black 40%, transparent 100%);
  }
}

/* ── argument-waski ── */
.waska { max-width: var(--szer-waska); }
.argument p { font-size: var(--roz-lead); line-height: 1.5; }
.argument p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .slepe-strzaly { padding-top: calc(var(--sekcja-pion) + var(--zabieg-karta)); } }

/* ── proces-krokowy ── */
.podpis-krokow { color: var(--tekst-pom); margin-bottom: var(--o-48); }
.kroki-pole { position: relative; }
.kroki { position: relative; display: grid; gap: var(--o-32); counter-reset: krok; }
.krok { position: relative; padding-left: 72px; counter-increment: krok; }
.krok__nr::before { content: counter(krok, decimal-leading-zero); }
.krok__nr {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 56px; text-align: left;
  font-family: var(--font-naglowki); font-weight: 500; font-size: var(--roz-h2); line-height: 1; color: var(--akcent);
  background: var(--tlo);
}
.blekit .krok__nr { background: var(--tlo-blekit); }
.krok h3 { margin-bottom: var(--o-8); }
.krok p { margin: 0; }
.krok__tresc p.krok__opis { color: var(--tekst); }
/* linia trasy: rysuje się od kroku 01 do ostatniego (scale = odpowiednik stroke-dashoffset, ten sam czas i easing) */
.trasa { position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: var(--akcent); transform-origin: top; }
.js .rv .trasa { transform: scaleY(0); transition: transform var(--ruch-linia) var(--ruch-easing) var(--ruch-czas); }
.js .rv.on .trasa { transform: none; }
.galezie { display: grid; gap: var(--o-16); margin-top: var(--o-24); position: relative; }
.galaz {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: var(--tlo); border: 1px solid var(--obrys-karty); border-radius: var(--promien);
  padding: var(--o-16);
}
.galaz::before {
  content: ""; position: absolute; left: -26px; top: 26px; width: 26px; height: 2px; background: var(--akcent);
  transform-origin: left;
}
.js .rv .galaz::before { transform: scaleX(0); transition: transform var(--ruch-czas) var(--ruch-easing) calc(var(--ruch-czas) + var(--ruch-linia) + var(--ruch-galezie)); }
.js .rv.on .galaz::before { transform: none; }
.galaz p { margin: 0; }
.galaz strong { font-weight: 600; }
.kolko { flex: none; width: var(--kolko-stan); height: var(--kolko-stan); border-radius: 50%; border: 2px solid var(--akcent); margin-top: 3px; }
.kolko--pelne { background: var(--akcent); }
.kolko--pol { background: linear-gradient(90deg, var(--akcent) 50%, transparent 50%); }
.kolko--puste { background: transparent; }
@media (max-width: 899.98px) {
  .galezie::before { content: ""; position: absolute; left: -50px; top: -16px; height: 44px; width: 2px; background: var(--akcent); }
  .galaz::before { left: -50px; width: 50px; }
}
@media (min-width: 900px) {
  .jak-dziala .kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-32); }
  .jak-dziala .krok { padding-left: 0; padding-top: 80px; }
  .jak-dziala .trasa { left: 0; right: 0; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js .jak-dziala.rv .trasa { transform: scaleX(0); }
  .js .jak-dziala.rv.on .trasa { transform: none; }
  .jak-dziala .krok:last-child .trasa-koniec { display: none; }
  .jak-dziala .galezie { padding-left: 26px; }
  .jak-dziala .galezie::before { content: ""; position: absolute; left: 0; top: -24px; bottom: 26px; width: 2px; background: var(--akcent); transform-origin: top; }
  .js .jak-dziala.rv .galezie::before { transform: scaleY(0); transition: transform var(--ruch-czas) var(--ruch-easing) calc(var(--ruch-czas) + var(--ruch-linia) + var(--ruch-galezie) - var(--ruch-czas)); }
  .js .jak-dziala.rv.on .galezie::before { transform: none; }
  .jak-dziala .galaz::before { left: -26px; width: 26px; }
  .jak-dziala .trasa { right: 12%; }
}
.jak-dziala .krok__nr { background: var(--tlo); }
@media (min-width: 900px) { .jak-dziala .krok__nr { padding-right: 12px; width: auto; } }

.start h2 { margin-bottom: var(--o-48); }
/* #start: 5 kroków w rzędzie od 1100 px */
.rozliczenie { font-size: var(--roz-lead); line-height: 1.5; margin: var(--o-48) 0 0; padding-top: var(--o-24); border-top: 1px solid var(--obrys-karty); max-width: 46em; }
@media (min-width: 1100px) {
  .start .kroki { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--o-24); }
  .start .krok { padding-left: 0; padding-top: 80px; }
  .start .trasa { left: 0; right: 10%; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js .start.rv .trasa { transform: scaleX(0); }
  .js .start.rv.on .trasa { transform: none; }
  .start .krok__nr { width: auto; padding-right: 12px; }
}

@media (min-width: 900px) {
  .co-dalej .kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-32); }
  .co-dalej .krok { padding-left: 0; padding-top: 80px; }
  .co-dalej .trasa { left: 0; right: 20%; top: 23px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js .co-dalej.rv .trasa { transform: scaleX(0); }
  .js .co-dalej.rv.on .trasa { transform: none; }
  .co-dalej .krok__nr { width: auto; padding-right: 12px; }
}

/* ── #raport: dominanta dowodowa ── */
.raport__uklad { display: grid; gap: var(--o-32); margin-top: var(--o-48); }
.raport .wstep { max-width: var(--szer-waska); font-size: var(--roz-lead); line-height: 1.5; }
.schemat {
  background: var(--tlo); border: 1px solid var(--obrys-karty); border-radius: var(--promien);
  padding: var(--o-24);
}
.schemat__etykieta {
  display: inline-flex; align-items: center; gap: var(--o-8);
  font-size: var(--roz-maly); color: var(--tekst-pom); margin: 0 0 var(--o-24);
  padding-bottom: var(--o-16); border-bottom: 1px solid var(--obrys-karty); width: 100%;
}
.schemat__etykieta svg.ikona { color: var(--akcent); }
.schemat__czesc { padding: var(--o-24) 0; border-bottom: 1px solid var(--obrys-karty); }
.schemat__czesc:last-child { border-bottom: 0; padding-bottom: 0; }
.schemat__czesc:first-of-type { padding-top: 0; }
.schemat h3 { font-size: var(--roz-h3); margin-bottom: var(--o-16); display: flex; gap: 12px; align-items: center; }
.zarys { display: grid; gap: 10px; }
.zarys span { display: block; height: 10px; border-radius: 5px; background: var(--tlo-blekit); }
.zarys span:nth-child(1) { width: 88%; }
.zarys span:nth-child(2) { width: 64%; }
.zarys span:nth-child(3) { width: 76%; }
.instrumenty { display: grid; gap: 0; }
.instrument { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--o-8) var(--o-16); padding: 12px 0; border-top: 1px dashed var(--obrys-karty); }
.instrument:first-child { border-top: 0; }
.instrument__nazwa { font-weight: 600; }
.stan { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); }
.stan .kolko { margin-top: 0; }
.znacznik { flex: none; display: inline-flex; }
.znacznik svg.ikona { color: var(--akcent); }
.podpisy { display: grid; gap: var(--o-24); align-content: center; }
.podpis { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--tekst); }
.podpis .kolko, .podpis svg.ikona { margin-top: 3px; }
.podpis svg.ikona { color: var(--akcent); }
.podpis p { margin: 0; }
@media (min-width: 900px) {
  .raport__uklad { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--o-24); align-items: center; }
  .schemat { grid-column: 1 / 9; padding: var(--o-48); }
  .podpisy { grid-column: 9 / 13; padding-left: var(--o-24); gap: var(--o-48); }
  .podpis::before { content: ""; position: absolute; left: -48px; top: 13px; width: 36px; height: 0; border-top: 2px solid var(--akcent); }
}

/* ── #zakres ── */
.zakres__uklad { display: grid; gap: var(--o-48); }
.zakres__wstep p { font-size: var(--roz-lead); line-height: 1.5; }
.grupa-uslug + .grupa-uslug { margin-top: var(--o-32); }
.grupa-uslug__etykieta { font-family: var(--font-naglowki); font-weight: 500; font-size: var(--roz-maly); color: var(--tekst-pom); margin: 0 0 var(--o-16); }
.uslugi { display: grid; gap: var(--o-16); }
.usluga {
  display: flex; gap: var(--o-16); align-items: flex-start;
  border: 1px solid var(--obrys-karty); border-radius: var(--promien); padding: var(--o-16) var(--o-24);
  background: var(--tlo);
}
.usluga--zawsze { background: var(--karta); border-color: var(--karta); }
.usluga p { margin: 0; }
.usluga__nazwa { font-weight: 600; }
.usluga__opis { color: var(--tekst-pom); }
.ikona-kolko {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tlo-blekit); border: 1.5px solid var(--blekit-jasny); color: var(--akcent);
}
.usluga__tekst { align-self: center; }
@media (min-width: 900px) {
  .zakres__uklad { grid-template-columns: 4fr 8fr; gap: var(--o-64); align-items: start; }
  .uslugi--wybor { grid-template-columns: 1fr 1fr; }
}

/* ── #kto: pas konkretów ── */
.kto h2 { max-width: 20ch; }
.kto .lead-ciemny { font-size: var(--roz-lead); line-height: 1.5; color: var(--tekst-jasny-pom); max-width: var(--szer-waska); }
.konkrety { display: grid; gap: var(--o-24); margin: var(--o-48) 0 var(--o-32); }
.konkret + .konkret { border-top: 1px solid var(--linia-ciemna); padding-top: var(--o-24); }
.liczba { font-family: var(--font-naglowki); font-weight: 500; font-size: var(--roz-liczby); line-height: 1.1; color: var(--tekst-jasny); margin: 0 0 var(--o-8); }
.liczba-podpis { font-size: var(--roz-maly); color: var(--tekst-jasny-pom); margin: 0; }
.zastrzezenie { color: var(--tekst-jasny-pom); margin: 0; }
@media (min-width: 900px) {
  .konkrety { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .konkret + .konkret { border-top: 0; padding-top: 0; border-left: 1px solid var(--linia-ciemna); padding-left: var(--o-32); }
}

/* ── #kontakt: cta-finalowe ── */
.kontakt { background: linear-gradient(135deg, var(--tlo-granat), var(--tlo-granat-koniec)); }
.kontakt__uklad { display: grid; gap: var(--o-48); }
.kontakt .lead-ciemny { font-size: var(--roz-lead); line-height: 1.5; color: var(--tekst-jasny); max-width: 30em; }
.karta-kontaktu--duza { padding: var(--o-32) var(--o-24); }
.karta-kontaktu--duza .kanal__telefon { font-size: var(--roz-h2); }
.karta-kontaktu--duza .kanal--tel svg.ikona { margin-top: 18px; }
.karta-kontaktu--duza .przyciski { margin-top: var(--o-32); }
.sms-link { display: inline-flex; align-items: center; min-height: var(--cel-min); }
@media (min-width: 900px) {
  .kontakt__uklad { grid-template-columns: 5fr 7fr; gap: var(--o-64); align-items: center; }
  .karta-kontaktu--duza { padding: var(--o-48); }
}

/* ── stopka ── */
.stopka { background: var(--tlo-granat); color: var(--tekst-jasny); border-top: 1px solid var(--linia-ciemna); padding: var(--o-48) 0; }
.stopka a { color: var(--blekit-jasny); }
.stopka .logo { font-size: var(--roz-logo-stopka); margin: 0; }
.stopka__sep { display: none; }
.stopka__gora { display: grid; gap: var(--o-24); }
.stopka__kontakt { display: grid; gap: var(--o-8); }
.stopka__poz { display: flex; align-items: center; gap: 12px; min-height: var(--cel-min); margin: 0; color: var(--tekst-jasny-pom); font-size: var(--roz-maly); }
.stopka__poz svg.ikona { width: 20px; height: 20px; color: var(--blekit-jasny); }
.stopka__poz a { display: inline-flex; align-items: center; min-height: var(--cel-min); }
.stopka__linia { color: var(--tekst-jasny-pom); font-size: var(--roz-maly); margin: 0; }
.stopka__linia a { display: inline-block; padding: 12px 0; }
.stopka__dol { margin-top: var(--o-32); padding-top: 12px; border-top: 1px solid var(--linia-ciemna); }
@media (min-width: 900px) {
  .stopka__gora { grid-template-columns: repeat(12, 1fr); column-gap: var(--o-24); align-items: center; }
  .stopka .logo { grid-column: 1 / 5; }
  .stopka__kontakt { grid-column: 5 / 13; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--o-48); }
  .stopka__dol { margin-top: var(--o-48); }
}
.kontakt + .stopka { border-top-color: var(--linia-ciemna); }

/* ── dolny pasek na telefonie ── */
.pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; gap: var(--o-8);
  padding: var(--o-8) var(--o-16) calc(var(--o-8) + env(safe-area-inset-bottom));
  background: var(--tlo-granat); border-top: 1px solid var(--linia-ciemna);
  transition: transform var(--ruch-czas) var(--ruch-easing), visibility 0s linear 0s;
}
.pasek .przycisk { flex: 1; }
.pasek .przycisk--drugi { background: transparent; color: var(--blekit-jasny); }
.pasek .przycisk--drugi:hover, .pasek .przycisk--drugi:active { background: var(--tlo-karta-ciemna); border-color: var(--blekit-jasny); color: var(--blekit-jasny); }
.js .pasek.ukryty { transform: translateY(100%); visibility: hidden; transition: transform var(--ruch-czas) var(--ruch-easing), visibility 0s linear var(--ruch-czas); }
@media (min-width: 900px) { .pasek { display: none; } }

/* ── podstrona formularza ── */
.naglowek--waski .naglowek__wnetrze { min-height: 64px; }
.wstep-formularza { padding-top: var(--o-64); }
h1.h1-pod { font-size: var(--roz-h1-pod); line-height: 1.12; letter-spacing: -0.01em; }
.wstep-formularza h1 { max-width: 18ch; margin-bottom: var(--o-24); }
.wstep-formularza .przyciski { margin-top: var(--o-24); }
.formularz-sekcja .waska, .formularz-sekcja form { max-width: 720px; }
.formularz-sekcja h2 { margin-bottom: var(--o-24); }
.formularz-sekcja form { background: var(--tlo); border: 1px solid var(--obrys-karty); border-radius: var(--promien); padding: var(--o-24); }
@media (min-width: 900px) { .formularz-sekcja form { padding: var(--o-48); } }
.grupa { border: 0; margin: var(--o-48) 0 0; padding: 0; min-width: 0; }
.grupa > legend { padding: 0; margin-bottom: var(--o-8); }
.grupa > legend h3 { margin: 0; }
.grupa[hidden] { display: none; }
.pole { margin-top: var(--o-24); }
.pole > label, .pole > fieldset > legend, .etykieta { display: block; font-weight: 600; margin-bottom: var(--o-8); font-size: var(--roz-baza); line-height: 1.4; }
.wymagane { font-weight: 400; color: var(--tekst-pom); }
.pomoc { color: var(--tekst-pom); font-size: var(--roz-maly); margin: 0 0 var(--o-8); }
.pole fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pole fieldset > legend { padding: 0; }
input[type=text], input[type=tel], input[type=email], textarea {
  display: block; width: 100%; min-height: var(--pole-h);
  font-family: var(--font-tekst); font-size: var(--roz-baza); line-height: 1.4; color: var(--tekst);
  background: var(--tlo); border: var(--obrys-pola-gr) solid var(--obrys-pola); border-radius: var(--promien);
  padding: 11px 14px;
}
textarea { min-height: 120px; resize: vertical; }
input[readonly] { background: var(--tlo-blekit); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--blad); border-width: 2px; }
.kafelki { display: grid; gap: var(--o-16); }
@media (min-width: 640px) { .kafelki { grid-template-columns: repeat(3, 1fr); } }
.kafelek { position: relative; display: flex; }
.kafelek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kafelek span {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 72px; padding: var(--o-16); border-radius: var(--promien);
  border: var(--obrys-pola-gr) solid var(--obrys-pola); background: var(--tlo);
  font-weight: 600; cursor: pointer;
  transition: background-color var(--ruch-przycisk) ease-out, border-color var(--ruch-przycisk) ease-out;
}
.kafelek span:hover { border-color: var(--akcent); }
.kafelek input:checked + span { border: 2px solid var(--akcent); background: var(--tlo-blekit); }
.kafelek input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kafelki[aria-invalid=true] .kafelek span, .kafelki.blad-pola .kafelek span { border-color: var(--blad); }
/* pola wyboru: natywne pole na całą etykietę (cel ≥ 48 px), wygląd rysowany obok */
.wybor { position: relative; display: flex; align-items: flex-start; min-height: var(--cel-min); padding: 10px 0; cursor: pointer; }
.wybor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: var(--roz-baza); }
.wybor > span { position: relative; padding-left: 36px; }
.wybor > span::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  border: var(--obrys-pola-gr) solid var(--obrys-pola); border-radius: 6px; background: var(--tlo);
}
.wybor input[type=radio] + span::before { border-radius: 50%; }
.wybor input:checked + span::before { border: 2px solid var(--akcent); background: var(--akcent); box-shadow: inset 0 0 0 3px var(--tlo); }
.wybor input[type=checkbox]:checked + span::after {
  content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 12px;
  border: solid var(--tlo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.wybor input[type=checkbox]:checked + span::before { box-shadow: none; }
.wybor input:focus-visible + span::before { outline: 3px solid var(--fokus); outline-offset: 3px; }
.wybor input[aria-invalid=true] + span::before { border-color: var(--blad); border-width: 2px; }
.wybor:hover > span::before { border-color: var(--akcent); }
/* blok zgody na przetwarzanie danych (styl.md: nad przyciskiem wysyłki) */
.zgoda { margin-top: var(--o-48); padding-top: var(--o-48); border-top: 1px solid var(--obrys-karty); }
.zgoda h3 { margin-bottom: var(--o-16); }
.zgoda__administrator { color: var(--tekst-pom); font-size: var(--roz-maly); }
.zgoda__administrator p { margin: 0 0 var(--o-8); }
.zgoda__etykieta { font-weight: 600; }
.pole > .wybor--zgoda { font-weight: 400; margin-bottom: 0; }
.wybor--zgoda > span { line-height: 1.5; padding-left: 40px; }
.wybor--zgoda > span::before { width: 24px; height: 24px; top: 0; }
.wybor--zgoda input[type=checkbox]:checked + span::after { left: 8px; top: 4px; }
.wybor--zgoda a { position: relative; }
.wybory--poziomo { display: flex; flex-wrap: wrap; gap: 0 var(--o-32); }
.komunikat-wyboru { margin-top: var(--o-24); padding: var(--o-16) var(--o-24); border-left: 3px solid var(--akcent); background: var(--tlo-blekit); border-radius: 0 var(--promien) var(--promien) 0; }
.komunikat-wyboru[hidden] { display: none; }
.stan-nip { font-size: var(--roz-maly); color: var(--tekst-pom); margin: var(--o-8) 0 0; min-height: 0; }
.stan-nip:empty { display: none; }
.blad-pola-tekst { display: flex; gap: var(--o-8); align-items: flex-start; color: var(--blad); font-size: var(--roz-maly); margin: var(--o-8) 0 0; }
.blad-pola-tekst[hidden] { display: none; }
.blad-pola-tekst svg.ikona { width: 20px; height: 20px; margin-top: 2px; }
.wysylka { margin-top: var(--o-48); }
#formularz-stan { margin: var(--o-24) 0 0; }
#formularz-stan:empty { display: none; }
#formularz-stan.stan--blad { color: var(--blad); font-weight: 600; }
.potwierdzenie { background: var(--tlo-blekit); border-radius: var(--promien); padding: var(--o-32) var(--o-24); margin-top: var(--o-32); font-size: var(--roz-lead); line-height: 1.5; }
.potwierdzenie[hidden] { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── podstrona polityki prywatności ── */
.naglowek--waski .logo a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cel-min); }
.polityka { padding-top: var(--sekcja-pion); }
@media (min-width: 900px) { .polityka { padding-top: var(--o-96); } }
.polityka__kolumna { max-width: 720px; }
.polityka__wstep { font-size: var(--roz-lead); line-height: 1.5; color: var(--tekst-pom); }
.ramka-administratora { background: var(--tlo-blekit); border: 1px solid var(--obrys-karty); border-radius: var(--promien); padding: var(--o-24); margin: var(--o-32) 0 var(--o-48); color: var(--tekst); }
.ramka-administratora p:last-child { margin-bottom: 0; }
.polityka h2 { font-size: var(--roz-h3); margin: var(--o-48) 0 var(--o-16); }
.polityka ul { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--o-16); }
.polityka li { margin-bottom: var(--o-8); }
.polityka__data { font-size: var(--roz-maly); color: var(--tekst-pom); margin-top: var(--o-48); }

/* ── ograniczenie ruchu: zero ruchu, linie narysowane od razu ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .rv .trasa, .js .rv .galaz::before, .js .jak-dziala.rv .trasa, .js .start.rv .trasa, .js .jak-dziala.rv .galezie::before { transform: none; }
}
@media print {
  .pasek, .menu-przycisk, .naglowek__zadzwon, .otwarcie__siatka { display: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .naglowek { position: static; }
}