/* ParkSys — strona ofertowa. Świat: oznakowanie obiektu (tablice, linie pasów, strefy wyłączone). Paleta ParkSys (czerwień marki). */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-ext-400-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-400-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-ext-500-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-ext-600-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-ext-700-normal.woff2) 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; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-700-normal.woff2) 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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-ext-600-normal.woff2) 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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-600-normal.woff2) 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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-ext-700-normal.woff2) 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; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-semi-condensed-latin-700-normal.woff2) 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 {
  /* Paleta ParkSys (tokeny --ps-* z panelu operatora) */
  --akcent: #E31B23;
  --akcent-ciemny: #C81820;
  --akcent-na-ciemnym: #FF4D55;
  --akcent-tint: #FDECEC;
  --tablica: #1A1A1A;
  --grafit: #1A1A1A;
  --ciemne-tlo: #1F1F1F;
  --szary: #6B6B6B;
  --tekst-2: #3D3D3D;
  --linia: #E3E3E3;
  --ramka: #D9D9D9;
  --tlo-alt: #F7F7F8;
  --tlo-wypukle: #EFEFEF;
  --ok: #14532D;
  --ok-ikona: #1A8A3E;
  --ok-tlo: #E6F4EA;
  --uwaga: #713F12;
  --uwaga-ikona: #C47F17;
  --uwaga-tlo: #FEF3CD;
  --blad: #B42318;
  --blad-tlo: #FEE2E2;
  /* Tekst drugorzędny na grafitowej tablicy i ciemnym tle (10,4:1) */
  --na-tablicy-2: #C8C8C8;
  --na-ciemnym-2: #C8C8C8;

  --font-tekst: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-znak: "Barlow Semi Condensed", "Barlow", "Arial Narrow", sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sekcja: clamp(56px, 3rem + 3.2vw, 100px);
  --promien: 4px;
  --promien-tablicy: 8px;
  --cien: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18);
  --ruch: cubic-bezier(.16, 1, .3, 1);
  --pas: repeating-linear-gradient(90deg, currentColor 0 22px, transparent 22px 36px);
  --szrafura: repeating-linear-gradient(-45deg, var(--akcent) 0 6px, #fff 6px 13px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scrollbar-color: #BDBDBD var(--tlo-alt); }
body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  line-height: 1.6;
  color: var(--grafit);
  background: #fff;
  caret-color: var(--akcent);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--akcent); color: #fff; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--akcent-ciemny); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--grafit); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--grafit); outline-offset: 3px; border-radius: 2px; }
.ico { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 50; padding: var(--s-3) var(--s-4); background: var(--grafit); color: #fff; font-weight: 600; }
.skip:focus { top: var(--s-4); }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
[hidden] { display: none !important; }

/* Typografia */
h1, h2, .liczba { font-family: var(--font-znak); font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.15rem); line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 1.35rem + 2vw, 2.9rem); line-height: 1.06; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.15rem, 1.05rem + .35vw, 1.3rem); line-height: 1.55; color: var(--tekst-2); max-width: 40em; }
.przypis { font-size: .9375rem; line-height: 1.55; color: var(--szary); max-width: 62ch; }
.tekst { max-width: 66ch; }
.tekst > * + * { margin-top: var(--s-4); }
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* Przyciski */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5);
  font: 600 1.0625rem/1 var(--font-tekst); text-decoration: none; letter-spacing: .005em;
  border: 2px solid transparent; border-radius: var(--promien); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ruch);
}
.przycisk .ico { width: 1.15em; height: 1.15em; transition: transform .2s var(--ruch); }
.przycisk:hover .ico { transform: translateX(3px); }
.przycisk:active { transform: translateY(1px); }
.przycisk--glowny { background: var(--akcent); color: #fff; }
.przycisk--glowny:hover { background: var(--akcent-ciemny); color: #fff; text-decoration: none; }
.przycisk--obrys { border-color: var(--grafit); color: var(--grafit); background: transparent; }
.przycisk--obrys:hover { background: var(--grafit); color: #fff; text-decoration: none; }
.przycisk--jasny { background: var(--akcent); color: #fff; }
.przycisk--jasny:hover { background: #fff; color: var(--grafit); text-decoration: none; }
.przycisk--maly { min-height: 44px; padding: 0 var(--s-4); font-size: 1rem; }
.przycisk[disabled] { opacity: .55; cursor: progress; }
.akcje { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.link-strzalka { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; text-decoration: none; color: var(--akcent); }
.link-strzalka:hover { text-decoration: underline; }
.link-strzalka .ico { transition: transform .2s var(--ruch); }
.link-strzalka:hover .ico { transform: translateX(3px); }

/* Nagłówek i menu */
.naglowek { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--linia); }
@supports (backdrop-filter: blur(1px)) { .naglowek { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(10px); } }
.naglowek__wiersz { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; }
.marka { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--grafit); margin-right: auto; }
.marka:hover { color: var(--grafit); text-decoration: none; }
.marka__znak { width: 34px; height: 34px; }
.marka__nazwa { font: 700 1.5rem/1 var(--font-znak); letter-spacing: -.01em; }
.marka__opis { font-size: .8125rem; line-height: 1.2; color: var(--szary); max-width: 11em; padding-left: var(--s-3); border-left: 1px solid var(--linia); }
.menu { display: flex; align-items: center; gap: var(--s-5); }
.menu ul { display: flex; gap: var(--s-1); }
.menu ul a { display: block; padding: var(--s-2) var(--s-3); color: var(--grafit); font-weight: 500; text-decoration: none; border-radius: var(--promien); }
.menu ul a:hover { background: var(--tlo-alt); }
.menu ul a[aria-current="page"] { color: var(--akcent-ciemny); box-shadow: inset 0 -3px 0 var(--akcent); border-radius: 0; }
.menu-przycisk { display: none; }
@media (max-width: 1040px) { .marka__opis { display: none; } }
@media (max-width: 900px) {
  .menu-przycisk {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3);
    font: 600 1rem/1 var(--font-tekst); color: var(--grafit); background: none; border: 1.5px solid var(--linia); border-radius: var(--promien); cursor: pointer;
  }
  .menu-przycisk .ico--zamknij, .menu-przycisk[aria-expanded="true"] .ico--otworz { display: none; }
  .menu-przycisk[aria-expanded="true"] .ico--zamknij { display: block; }
  .menu {
    display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: var(--s-4);
    padding: var(--s-4) clamp(16px, 4vw, 40px) var(--s-5); background: #fff; border-bottom: 1px solid var(--linia); box-shadow: var(--cien);
  }
  .menu.is-open { display: flex; }
  .menu ul { flex-direction: column; }
  .menu ul a { padding: var(--s-3) 0; font-size: 1.125rem; border-bottom: 1px solid var(--linia); border-radius: 0; }
  .menu ul a[aria-current="page"] { box-shadow: none; }
}

/* Sekcje */
.sekcja { padding-block: var(--sekcja); }
.sekcja--alt { background: var(--tlo-alt); }
.sekcja--ciasna { padding-top: 0; }
.sekcja__glowa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-5) var(--s-8); align-items: start; margin-bottom: clamp(32px, 2rem + 2vw, 64px); }
.sekcja__glowa > p, .sekcja__glowa > div > p { color: var(--tekst-2); max-width: 52ch; }
.sekcja__glowa > p:first-of-type { padding-top: .45em; }
.sekcja__glowa--sama { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
@media (max-width: 860px) { .sekcja__glowa { grid-template-columns: 1fr; } }

/* Otwarcie strony głównej — wideo poglądowe na pełną szerokość, tekst na przyciemnieniu */
.otwarcie { position: relative; display: grid; align-items: end; min-height: min(calc(100svh - 73px), 860px); padding-block: clamp(112px, 14vh, 180px) clamp(48px, 8vh, 96px); color: #fff; background: #141414; overflow: hidden; }
/* Wideo odbite w poziomie i poszerzone: podnoszący się szlaban ląduje po prawej, poza tekstem */
.otwarcie__wideo { position: absolute; top: 0; left: 0; width: 112%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scaleX(-1); }
.otwarcie__cien { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 14, 14, .88) 0%, rgba(14, 14, 14, .66) 36%, rgba(14, 14, 14, .12) 68%, rgba(14, 14, 14, 0) 100%), linear-gradient(0deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, 0) 40%); }
.otwarcie__tresc { position: relative; z-index: 1; }
.otwarcie h1 { color: #fff; max-width: 15ch; font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.4rem); }
.otwarcie .lead { margin-top: var(--s-5); color: #E6E6E6; max-width: 34em; }
.status { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--linia); font-size: .9375rem; line-height: 1.5; color: var(--szary); max-width: 46ch; }
.status .ico { margin-top: 2px; color: var(--akcent); }
.status strong { color: var(--grafit); font-weight: 600; }
.otwarcie .status { margin-top: var(--s-7); color: var(--na-ciemnym-2); border-top-color: rgba(255, 255, 255, .22); max-width: 52ch; }
.otwarcie .status strong { color: #fff; }
.otwarcie .status .ico { color: var(--akcent-na-ciemnym); }
.otwarcie__dol { position: absolute; right: clamp(16px, 4vw, 40px); bottom: var(--s-4); z-index: 2; display: flex; gap: var(--s-2); align-items: center; }
.otwarcie__opis { padding: 4px 10px; font-size: .8125rem; font-weight: 500; color: #fff; background: rgba(26, 26, 26, .72); border-radius: 3px; }
.otwarcie__sterowanie { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; font: 500 .8125rem/1 var(--font-tekst); color: #fff; background: rgba(26, 26, 26, .72); border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px; cursor: pointer; }
.otwarcie__sterowanie:hover { background: rgba(26, 26, 26, .92); border-color: #fff; }
.otwarcie__sterowanie .ico { width: 15px; height: 15px; }
.otwarcie__sterowanie .ico--ponownie, .otwarcie__sterowanie[data-stan="koniec"] .ico--pauza { display: none; }
.otwarcie__sterowanie[data-stan="koniec"] .ico--ponownie { display: block; }
.przycisk--jasny-obrys { border-color: #fff; color: #fff; background: transparent; }
.przycisk--jasny-obrys:hover { background: #fff; color: var(--grafit); text-decoration: none; }
@media (max-width: 800px) {
  .otwarcie { min-height: 0; padding-top: 56vw; }
  .otwarcie__wideo { width: 100%; height: 72vw; object-position: 50% 72%; }
  .otwarcie__cien { background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0) 52vw, #141414 70vw, #141414 100%); }
  .otwarcie__dol { top: var(--s-3); bottom: auto; }
  .otwarcie { padding-top: 66vw; }
}

/* Piktogramy kreślone linią przy pierwszym pokazaniu sekcji */
.js-ruch [data-rysuj] .ico > * { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.2s var(--ruch) calc(var(--i, 0) * 140ms), opacity .2s linear calc(var(--i, 0) * 140ms); }
.js-ruch [data-rysuj].is-narysowane .ico > * { stroke-dashoffset: 0; opacity: 1; }

/* Tablica — grafitowa tablica informacyjna z wewnętrzną ramką jak na znakach */
.tablica {
  position: relative; color: #fff; background: var(--tablica);
  border-radius: var(--promien-tablicy); padding: clamp(20px, 1rem + 1.5vw, 36px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 28px 60px -28px rgba(0, 0, 0, .5);
}
.tablica::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 4px; pointer-events: none; }
.tablica h2, .tablica h3 { color: #fff; }
.tablica p { color: var(--na-tablicy-2); }
.tablica a { color: #fff; }
.tablica--czerwona { background: var(--akcent); box-shadow: 0 2px 4px rgba(120, 10, 14, .15), 0 28px 60px -28px rgba(160, 12, 18, .55); }
.tablica--czerwona p { color: #fff; }
.tablica--czerwona::before { border-color: rgba(255, 255, 255, .7); }

/* Droga uprawnienia — sygnatura strony */
.trasa__naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.trasa__naglowek h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.trasa__dane { font-size: .8125rem; color: var(--na-tablicy-2); letter-spacing: .02em; }
.trasa__wybor { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.wybor { border: 0; margin: 0; padding: 0; min-width: 0; }
.wybor legend { padding: 0; margin-bottom: var(--s-2); font-size: .875rem; font-weight: 600; color: var(--na-tablicy-2); }
.wybor__opcje { display: flex; flex-wrap: wrap; gap: 6px; }
.wybor input { position: absolute; opacity: 0; pointer-events: none; }
.wybor label {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  border: 1.5px solid rgba(255, 255, 255, .6); border-radius: var(--promien); cursor: pointer;
  font-weight: 600; font-size: .9875rem; line-height: 1.2; color: #fff; transition: background-color .15s, color .15s, border-color .15s;
}
.wybor label:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.wybor input:checked + label { background: #fff; color: var(--grafit); border-color: #fff; }
.wybor input:focus-visible + label { outline: 3px solid #fff; outline-offset: 3px; }
.trasa__przystanki { position: relative; margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.trasa__przystanki::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 14px, transparent 14px 24px);
}
.przystanek { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.przystanek__znacznik {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--tablica); border: 2px solid #fff; border-radius: 6px;
  transition: background-color .3s var(--ruch), color .3s, transform .3s var(--ruch);
}
.przystanek__znacznik .ico { width: 22px; height: 22px; }
.przystanek h3 { font-size: 1.0625rem; line-height: 1.3; }
.przystanek p { margin-top: 2px; font-size: .9875rem; line-height: 1.45; }
.przystanek.is-aktywny .przystanek__znacznik { background: var(--akcent); color: #fff; border-color: var(--akcent); transform: scale(1.06); }
.przystanek.is-problem .przystanek__znacznik { background: var(--uwaga-tlo); color: var(--uwaga); border-color: var(--uwaga-ikona); }
.trasa__koniec { margin-top: var(--s-6); }
.trasa__koniec .trasa__wynik { margin-top: 0; }
.trasa__wynik {
  display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  background: #fff; color: var(--grafit); border-radius: var(--promien); font-weight: 600; line-height: 1.4;
  transition: background-color .25s;
}
.trasa__wynik .ico { color: var(--ok-ikona); margin-top: 1px; width: 1.4em; height: 1.4em; }
.trasa__wynik > span { display: block; }
.trasa__wynik strong { display: block; font-weight: 600; color: var(--grafit); }
.trasa__wynik [data-wynik-opis] { display: block; font-weight: 400; font-size: .9375rem; color: var(--tekst-2); margin-top: 2px; }
.trasa__wynik[data-stan="uwaga"] { background: var(--uwaga-tlo); }
.trasa__wynik[data-stan="uwaga"] .ico { color: var(--uwaga-ikona); }
.trasa__wynik .ico--uwaga, .trasa__wynik[data-stan="uwaga"] .ico--ok { display: none; }
.trasa__wynik[data-stan="uwaga"] .ico--uwaga { display: block; }

.przebieg h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.przebieg .trasa__przystanki { margin-top: var(--s-5); }
.przebieg .przystanek__znacznik { background: var(--akcent); color: #fff; border-color: var(--akcent); }

/* Wiersze — opis zmian w obsłudze, rozdzielane linią pasa */
.wiersze { display: grid; }
.wiersz { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-4) var(--s-8); padding-block: clamp(24px, 1rem + 1.5vw, 40px); position: relative; }
.wiersz + .wiersz::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; color: var(--linia); background: var(--pas); }
.wiersz__tytul { display: flex; gap: var(--s-4); align-items: flex-start; }
.wiersz__tytul .ico { width: 32px; height: 32px; color: var(--akcent); stroke-width: 1.5; }
.wiersz h3 { font-family: var(--font-znak); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9rem); line-height: 1.12; letter-spacing: -.005em; }
.wiersz__opis > * + * { margin-top: var(--s-3); }
.wiersz__opis { max-width: 60ch; }
.znaczek { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--grafit); background: var(--tlo-wypukle); border-radius: 3px; }
.znaczek .ico { width: 1em; height: 1em; color: var(--akcent); }
@media (max-width: 760px) { .wiersz { grid-template-columns: 1fr; } }

/* Drogowskaz — jedna tablica dzielona na pola identyfikatorów */
.drogowskaz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.drogowskaz__pole { position: relative; padding: clamp(24px, 1rem + 1.8vw, 44px); }
.drogowskaz__pole + .drogowskaz__pole { border-left: 1.5px solid rgba(255, 255, 255, .55); }
.drogowskaz__pole .ico { width: 48px; height: 48px; stroke-width: 1.5; }
.drogowskaz__pole h3 { margin-top: var(--s-5); font-family: var(--font-znak); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem); }
.drogowskaz__pole p { margin-top: var(--s-2); }
.drogowskaz__pole .uwaga-tablica { margin-top: var(--s-4); font-size: .9375rem; padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .35); }
@media (max-width: 820px) {
  .drogowskaz { grid-template-columns: 1fr; }
  .drogowskaz__pole + .drogowskaz__pole { border-left: 0; border-top: 1.5px solid rgba(255, 255, 255, .55); }
}
.pod-tablica { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; }

/* Spis obiektów — jak tablica informacyjna w holu budynku */
.spis { border-top: 2px solid var(--grafit); }
.spis__wiersz { display: grid; grid-template-columns: 52px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--s-2) var(--s-5); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--linia); }
.spis__wiersz--naglowek { padding-block: var(--s-3); font-size: .875rem; font-weight: 600; color: var(--szary); }
.tryb { display: grid; place-items: center; width: 40px; height: 40px; font: 700 1.35rem/1 var(--font-znak); color: #fff; background: var(--tablica); border-radius: 5px; box-shadow: inset 0 0 0 3px var(--tablica), inset 0 0 0 4.5px rgba(255, 255, 255, .6); }
.spis__obiekt { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.spis__obiekt a { color: var(--grafit); text-decoration-color: var(--akcent); }
.spis__obiekt a:hover { color: var(--grafit); }
.spis__problem { color: var(--tekst-2); line-height: 1.45; }
.spis__rozwiazanie { font-weight: 600; color: var(--grafit); line-height: 1.35; }
@media (max-width: 760px) {
  .spis__wiersz { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .spis__wiersz--naglowek { display: none; }
  .spis__problem, .spis__rozwiazanie { grid-column: 2; }
  .spis__wiersz .tryb { grid-row: span 3; }
}
.legenda { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-5); color: var(--tekst-2); }
.legenda li { display: inline-flex; align-items: center; gap: var(--s-3); }
.legenda .tryb { width: 30px; height: 30px; font-size: 1.05rem; }
.tryby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-bottom: clamp(40px, 2rem + 2vw, 72px); }
.tryby__pozycja { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
.tryby__pozycja h3 { font-family: var(--font-znak); font-weight: 700; font-size: 1.5rem; line-height: 1.1; align-self: center; }
.tryby__pozycja p { grid-column: 2; color: var(--tekst-2); }
@media (max-width: 900px) { .tryby { grid-template-columns: 1fr; } }

/* Cena i kalkulator */
.cena { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 2rem + 3vw, 80px); align-items: start; }
@media (max-width: 900px) { .cena { grid-template-columns: 1fr; } }
.stawki { display: grid; gap: 0; border-top: 2px solid var(--grafit); }
.stawka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, auto); gap: var(--s-1) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--linia); align-items: baseline; }
.stawka h3 { font-size: 1.125rem; }
.stawka > p:not(.liczba) { grid-column: 1 / -1; color: var(--tekst-2); max-width: 52ch; }
.stawka .liczba { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1; color: var(--akcent-ciemny); text-align: right; }
.stawki .przypis { margin-top: var(--s-5); }
.stawki--waskie .stawka .liczba { font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); }
.stawki--waskie + .przypis { margin-top: var(--s-5); }
.stawka .jednostka { display: block; text-align: right; font-size: .875rem; font-weight: 500; color: var(--szary); margin-top: 4px; font-family: var(--font-tekst); letter-spacing: 0; }
.kalkulator { background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-tablicy); padding: clamp(20px, 1rem + 1.5vw, 36px); box-shadow: var(--cien); }
.kalkulator h3 { font-family: var(--font-znak); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.kalkulator__pole { margin-top: var(--s-5); }
.kalkulator__pole label { display: block; font-weight: 600; }
.kalkulator__sterowanie { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-4); align-items: center; margin-top: var(--s-3); }
.kalkulator input[type="range"] { width: 100%; accent-color: var(--akcent); height: 44px; }
.kalkulator input[type="number"] { width: 100%; min-height: 48px; padding: 0 var(--s-3); font: 600 1.125rem var(--font-tekst); font-variant-numeric: tabular-nums; border: 1.5px solid #8F8F8F; border-radius: var(--promien); color: var(--grafit); }
.kalkulator input[type="number"]:focus { border-color: var(--akcent-ciemny); }
.kalkulator__wynik { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 2px solid var(--grafit); }
.kalkulator__suma { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.kalkulator__suma .liczba { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--akcent-ciemny); }
.kalkulator__suma span:last-child { color: var(--szary); font-weight: 500; }
.kalkulator__rozbicie { margin-top: var(--s-3); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.kalkulator__uruchomienie { margin-top: var(--s-6); }
.kalkulator__uruchomienie > p { font-weight: 600; }
.kalkulator__uruchomienie dl { margin-top: var(--s-2); }
.kalkulator__uruchomienie dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--linia); }
.kalkulator__uruchomienie dt { color: var(--tekst-2); }
.kalkulator__uruchomienie dd { font-weight: 600; color: var(--akcent-ciemny); }

/* Zakres i strefa wyłączona */
.zakres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.zakres--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zakres__tekst { margin-top: var(--s-3); color: var(--tekst-2); }
@media (max-width: 860px) { .zakres, .zakres--trzy { grid-template-columns: 1fr; } }
.zakres__strefa { padding: clamp(24px, 1rem + 1.5vw, 40px); border-radius: var(--promien-tablicy); background: #fff; border: 1px solid var(--linia); }
.zakres__strefa h3 { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-znak); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.zakres__strefa--w h3 .ico { color: var(--grafit); }
.zakres__strefa--poza { position: relative; padding-top: calc(clamp(24px, 1rem + 1.5vw, 40px) + 14px); overflow: hidden; }
.zakres__strefa--poza::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; background: var(--szrafura); opacity: .9; }
.zakres__strefa--poza h3 .ico { color: var(--szary); }
.lista { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lista li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); gap: var(--s-3); line-height: 1.5; }
.lista .ico { margin-top: .15em; width: 1.15em; height: 1.15em; color: var(--grafit); stroke-width: 2.25; }
.lista--poza .ico { color: var(--szary); }
.lista--dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-8); margin-top: 0; }
@media (max-width: 760px) { .lista--dwie { grid-template-columns: 1fr; } }
.lista strong { font-weight: 600; }
.zakres__dopisek { margin-top: var(--s-5); font-size: .9375rem; color: var(--szary); }

/* Nagłówek podstrony */
.strona-glowa { padding-block: clamp(40px, 2rem + 3vw, 88px) clamp(40px, 2rem + 2vw, 72px); border-bottom: 1px solid var(--linia); }
.strona-glowa__uklad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 2rem + 3vw, 80px); align-items: start; }
.strona-glowa__uklad--przebieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.strona-glowa h1 { max-width: 18ch; }
.strona-glowa .lead { margin-top: var(--s-5); }
.strona-glowa__fakty { align-self: start; margin-top: .5rem; }
.fakty { display: grid; gap: 0; }
.fakty div { display: grid; gap: 2px; padding-block: var(--s-3); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.fakty div:last-child { border-bottom: 0; }
.fakty dt { font-size: .9375rem; color: var(--na-tablicy-2); }
.fakty dd { font: 700 1.5rem/1.15 var(--font-znak); color: #fff; }
.fakty-zdania { display: grid; }
.fakty-zdania li { padding-block: var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, .3); color: var(--na-tablicy-2); font-size: 1.0625rem; line-height: 1.45; }
.fakty-zdania li:first-child { padding-top: var(--s-2); }
.fakty-zdania li:last-child { border-bottom: 0; padding-bottom: var(--s-2); }
.fakty-zdania strong { color: #fff; font-weight: 700; font-family: var(--font-znak); font-size: 1.3rem; letter-spacing: 0; white-space: nowrap; }
.tryby-znak { display: grid; }
.tryby-znak li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.tryby-znak li:last-child { border-bottom: 0; }
.tryby-znak .tryb { grid-row: span 2; background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.tryby-znak strong { font: 700 1.4rem/1.15 var(--font-znak); color: #fff; }
.tryby-znak span:last-child { color: var(--na-tablicy-2); font-size: .9875rem; line-height: 1.45; }
@media (max-width: 900px) { .strona-glowa__uklad { grid-template-columns: 1fr; } }

/* Kroki — sekwencja ma znaczenie, więc numery zostają */
.kroki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: krok; position: relative; }
.kroki::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 3px; color: #BDBDBD; background: var(--pas); }
.krok { position: relative; counter-increment: krok; }
.krok::before {
  content: counter(krok); display: grid; place-items: center; width: 44px; height: 44px; position: relative; z-index: 1;
  font: 700 1.4rem/1 var(--font-znak); color: #fff; background: var(--tablica); border-radius: 6px;
  box-shadow: 0 0 0 6px #fff;
}
.sekcja--alt .krok::before { box-shadow: 0 0 0 6px var(--tlo-alt); }
.krok h3 { margin-top: var(--s-5); }
.krok p { margin-top: var(--s-2); color: var(--tekst-2); }
@media (max-width: 900px) {
  .kroki { grid-template-columns: 1fr; gap: var(--s-6); }
  .kroki::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, currentColor 0 14px, transparent 14px 24px); }
  .krok { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); }
  .krok::before { grid-row: span 2; }
  .krok h3 { margin-top: 8px; }
}

/* Warstwy systemu — przekrój od decyzji do napędu */
.warstwy { display: grid; border-top: 2px solid var(--grafit); }
.warstwa { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--s-2) var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--linia); align-items: baseline; }
.warstwa__poziom { font-size: .875rem; font-weight: 600; color: var(--szary); }
.warstwa h3 { font-family: var(--font-znak); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.warstwa p { color: var(--tekst-2); }
.warstwa--opcja h3::after { content: "opcja"; margin-left: var(--s-3); vertical-align: middle; font: 600 .75rem/1 var(--font-tekst); letter-spacing: .02em; padding: 4px 8px; border-radius: 3px; color: var(--akcent-ciemny); background: var(--akcent-tint); }
@media (max-width: 860px) { .warstwa { grid-template-columns: 1fr; } }

/* Dwie kolumny treści */
.dwie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 2rem + 3vw, 80px); }
@media (max-width: 860px) { .dwie { grid-template-columns: 1fr; } }
.blok--przyklejony { position: sticky; top: 104px; }
.blok--przyklejony > p { margin-top: var(--s-4); color: var(--tekst-2); max-width: 46ch; }
.blok--przyklejony h2 { font-size: clamp(1.95rem, 1.35rem + 2vw, 2.9rem); }
.blok--przyklejony .link-strzalka { margin-top: var(--s-5); }
.cena > .stawki { position: sticky; top: 104px; }
.stawki--dwie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
@media (max-width: 860px) { .stawki--dwie { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .blok--przyklejony, .cena > .stawki { position: static; } }
.dwie--trasa { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 960px) { .dwie--trasa { grid-template-columns: 1fr; } }
.blok > h3 { font-family: var(--font-znak); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.blok > p { margin-top: var(--s-3); color: var(--tekst-2); max-width: 60ch; }
.blok + .blok { margin-top: var(--s-7); }
.dwie > .blok + .blok { margin-top: 0; }

.ostrzezenie { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-7); padding: var(--s-5); background: var(--uwaga-tlo); border-radius: var(--promien); max-width: 62rem; }
.ostrzezenie .ico { color: var(--uwaga-ikona); width: 1.4em; height: 1.4em; margin-top: 1px; }
.ostrzezenie p + p { margin-top: var(--s-2); }

/* Tabela */
.tabela-ramka { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.tabela caption { text-align: left; caption-side: bottom; padding-top: var(--s-4); font-size: .9375rem; color: var(--szary); }
.tabela th, .tabela td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--linia); }
.tabela thead th { background: var(--tablica); color: #fff; font-weight: 600; font-size: .9375rem; padding-block: var(--s-3); }
.tabela thead th:first-child { border-top-left-radius: var(--promien); }
.tabela thead th:last-child { border-top-right-radius: var(--promien); }
.tabela tbody tr:nth-child(even) { background: var(--tlo-alt); }
.tabela tbody th { font-weight: 600; }
.tabela tbody th small { display: block; font-weight: 400; color: var(--szary); font-size: .9375rem; }
.tabela .num { font-weight: 600; color: var(--akcent-ciemny); }
@media (max-width: 760px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela tr { padding: var(--s-4); border-bottom: 1px solid var(--linia); }
  .tabela tbody tr:nth-child(even) { background: transparent; }
  .tabela th, .tabela td { padding: 0; border: 0; }
  .tabela td { margin-top: var(--s-2); }
  .tabela td[data-etykieta]::before { content: attr(data-etykieta); display: block; font-size: .8125rem; font-weight: 600; color: var(--szary); }
}

/* Formularz */
.zgloszenie { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 2rem + 3vw, 80px); align-items: start; }
@media (max-width: 960px) { .zgloszenie { grid-template-columns: 1fr; } }
.formularz { background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-tablicy); padding: clamp(20px, 1rem + 2vw, 44px); box-shadow: var(--cien); }
.formularz h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.formularz__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.formularz__siatka .pelne { grid-column: 1 / -1; }
@media (max-width: 640px) { .formularz__siatka { grid-template-columns: 1fr; } }
.pole label, .pole .etykieta { display: block; font-weight: 600; margin-bottom: 6px; }
.pole .opcjonalne { font-weight: 400; color: var(--szary); }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; font: 400 1.0625rem/1.4 var(--font-tekst); color: var(--grafit);
  background: #fff; border: 1.5px solid #8F8F8F; border-radius: var(--promien); transition: border-color .15s, box-shadow .15s;
}
.pole select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.pole textarea { min-height: 140px; resize: vertical; }
.pole input::placeholder, .pole textarea::placeholder { color: #737373; }
.pole input:hover, .pole select:hover, .pole textarea:hover { border-color: var(--grafit); }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--akcent-ciemny); box-shadow: 0 0 0 3px rgba(227, 27, 35, .25); }
.pole input:user-invalid, .pole select:user-invalid, .pole textarea:user-invalid { border-color: var(--blad); }
.pole__blad { display: none; margin-top: 6px; font-size: .9375rem; color: var(--blad); }
.pole:has(:user-invalid) .pole__blad { display: block; }
.pole .is-sprawdzone:invalid { border-color: var(--blad); }
.pole:has(.is-sprawdzone:invalid) .pole__blad { display: block; }
.pole label.zgoda { display: grid; margin: 0; font-weight: 400; }
.zgoda { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: .9875rem; line-height: 1.5; }
.zgoda input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--akcent); }
.ukryte-pole { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formularz__wyslij { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.komunikat { display: none; margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--promien); background: var(--ok-tlo); line-height: 1.5; }
.komunikat.is-widoczny { display: block; }
.komunikat.is-blad { background: var(--blad-tlo); }
.komunikat.is-uwaga { background: var(--uwaga-tlo); }
.przygotuj h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.przygotuj .lista { margin-top: var(--s-5); }

/* Zdjęcia poglądowe — pas na pełną szerokość */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--tlo-wypukle); }
.foto img { display: block; width: 100%; height: clamp(240px, 30vw, 520px); object-fit: cover; }
.foto--wysokie img { height: clamp(300px, 42vw, 640px); }
.foto--wysokie .foto__opis { top: var(--s-4); bottom: auto; }
.foto__opis { position: absolute; left: clamp(16px, 4vw, 40px); bottom: var(--s-4); padding: 4px 10px; font-size: .8125rem; font-weight: 500; color: #fff; background: rgba(26, 26, 26, .72); border-radius: 3px; }
@supports (animation-timeline: view()) {
  .js-ruch .foto img { animation: foto-wjazd linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  @keyframes foto-wjazd { from { transform: scale(1.08); } to { transform: scale(1); } }
}

/* Drobne pomocnicze */
.tytul-sekcji { margin-bottom: clamp(32px, 2rem + 2vw, 56px); max-width: 24ch; }
.link-cichy { color: inherit; text-decoration: none; }
.link-cichy:hover { color: var(--akcent-ciemny); text-decoration: underline; }
.odstep { margin-top: var(--s-6); }
.pod-tablica--lewa { justify-content: flex-start; }
.sekcja--start { padding-top: clamp(40px, 2rem + 3vw, 88px); }
.przygotuj h1 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.4rem); }
.przygotuj .lead { margin-top: var(--s-5); }

/* Do uzupełnienia przed publikacją (strona o danych) */
.do-uzupelnienia { display: inline; padding: 2px 8px; border-radius: 3px; background: var(--uwaga-tlo); color: var(--uwaga); font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.prawne { max-width: 70ch; }
.prawne h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); margin-top: var(--s-7); }
.prawne h2:first-child { margin-top: 0; }
.prawne p { margin-top: var(--s-3); }

/* Zamknięcie — grafitowy pas przed stopką */
.zamkniecie { background: var(--ciemne-tlo); color: #fff; padding-block: clamp(56px, 3rem + 4vw, 112px); }
.zamkniecie__uklad { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 2rem + 3vw, 96px); align-items: center; }
.zamkniecie h2 { color: #fff; max-width: 16ch; }
.zamkniecie p { margin-block: var(--s-4) var(--s-6); color: var(--na-ciemnym-2); max-width: 48ch; }
.zamkniecie__lista { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.zamkniecie__lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid rgba(255, 255, 255, .18); color: var(--na-ciemnym-2); line-height: 1.5; }
.zamkniecie__lista .ico { width: 26px; height: 26px; color: var(--akcent-na-ciemnym); stroke-width: 1.5; }
.zamkniecie__lista strong { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .zamkniecie__uklad { grid-template-columns: 1fr; } }

/* Stopka */
.stopka { background: var(--tlo-alt); border-top: 1px solid var(--linia); font-size: .9875rem; color: var(--tekst-2); }
.stopka__uklad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 4fr) minmax(0, 2fr); gap: var(--s-6); padding-block: var(--s-8) var(--s-6); }
.stopka__nazwa { font: 700 1.4rem/1 var(--font-znak); color: var(--grafit); margin-bottom: var(--s-3); }
.stopka__marka p:not(.stopka__nazwa) { max-width: 36ch; }
.stopka__firma { margin-top: var(--s-4); }
.stopka__tytul { font-weight: 600; color: var(--grafit); margin-bottom: var(--s-3); }
.stopka ul { display: grid; gap: var(--s-2); }
.stopka__obiekty ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.stopka a { color: var(--tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--grafit); text-decoration: underline; }
.stopka__dol { padding-block: 0 var(--s-6); color: var(--szary); font-size: .875rem; }
.stopka__dol p { padding-top: var(--s-4); border-top: 1px solid var(--linia); }
@media (max-width: 860px) { .stopka__uklad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stopka__marka { grid-column: 1 / -1; } }

/* Postęp przewijania: linia pasa pod nagłówkiem */
@supports (animation-timeline: scroll()) {
  .naglowek::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: repeating-linear-gradient(90deg, var(--akcent) 0 18px, transparent 18px 28px);
    animation: postep linear both; animation-timeline: scroll(root block);
  }
  @keyframes postep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* Przejścia między podstronami */
@view-transition { navigation: auto; }
.naglowek { view-transition-name: naglowek; }
::view-transition-old(root) { animation: 140ms ease-in both strona-wyjscie; }
::view-transition-new(root) { animation: 320ms var(--ruch) both strona-wejscie; }
@keyframes strona-wyjscie { to { opacity: 0; } }
@keyframes strona-wejscie { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}