/* ==========================================================================
   RatMed24 — arkusz stylów
   Wersja 4 (23.09.2026). Napisany od zera: zawiera wyłącznie komponenty,
   które są faktycznie używane w kodzie stron. Nic z poprzednich wersji
   nie zostało przeniesione „na wszelki wypadek".

   Założenia projektowe:
   · papier ciepły, nie szary — strona ma wyglądać jak druk, nie jak panel
   · czerwień ambulansowa wyłącznie na akcje i akcenty, nigdy na tła sekcji
   · nagłówki sekcji numerowane jak pozycje w kosztorysie, z linią do końca kolumny
   · karty bez ramek dookoła — górna krawędź zamiast pudełka
   · dane liczbowe w monospace, cyfry tabelaryczne
   · bez ozdobników — żadnych pasów, gradientów ani cieni na sekcjach
   ========================================================================== */

:root{
  --czerwien:   #C8102E;
  --czerwien-2: #9E0B23;
  --czerwien-3: #FBEEF0;

  --atrament:   #121920;
  --stal:       #5B6B7A;
  --stal-2:     #8A98A6;

  --papier:     #F6F5F2;
  --papier-2:   #EDEBE5;
  --biel:       #FFFFFF;
  --kreska:     #E1DFD8;
  --kreska-2:   #CFCCC3;
  --tekst:      #2A333C;

  --zielen:     #1E7A45;

  --max: 1180px;
  --gut: 24px;
  --cien: 0 1px 2px rgba(18,25,32,.05), 0 10px 30px rgba(18,25,32,.06);
  --tempo: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--biel);
  color:var(--tekst);
  font-family:'Barlow','Segoe UI',system-ui,sans-serif;
  font-size:17.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; }
::selection{ background:var(--czerwien); color:#fff; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); position:relative; }

h1,h2,h3,h4{
  margin:0; color:var(--atrament); font-weight:700; line-height:1.08;
  font-family:'Barlow Condensed','Barlow',system-ui,sans-serif;
  letter-spacing:-.008em; text-wrap:balance;
}
h1{ font-size:clamp(34px,4.4vw,54px); font-weight:800; line-height:1.06; }
h2{ font-size:clamp(27px,3.2vw,40px); }
h3{ font-size:clamp(19px,1.7vw,24px); }
h4{ font-size:18px; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.mono{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* skok do treści — dla klawiatury i czytników ekranu */
.przeskocz{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--atrament); color:#fff; padding:12px 18px; font-weight:700; text-decoration:none;
}
.przeskocz:focus{ left:8px; top:8px; }

/* --------------------------------------------------------------------------
   Nagłówek sekcji
   -------------------------------------------------------------------------- */
.nad{
  display:flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stal); margin-bottom:18px;
}
.nad::before{ content:attr(data-nr); color:var(--czerwien); font-weight:600; letter-spacing:.06em; }
.nad::after{ content:""; flex:1; height:1px; background:var(--kreska); }
.nad--jasny{ color:var(--stal-2); }
.nad--jasny::before{ color:#F5919E; }
.nad--jasny::after{ background:rgba(255,255,255,.16); }

.olowek{ color:var(--stal); max-width:60ch; font-size:18.5px; line-height:1.6; }

.sekcja{ padding:clamp(60px,7vw,104px) 0; }
.sekcja--tlo{ background:var(--papier); }
.sekcja--ciemna{ background:var(--atrament); color:#C4CED8; }
.sekcja--ciemna h2,.sekcja--ciemna h3,.sekcja--ciemna h4{ color:#fff; }
.sekcja--ciemna .olowek{ color:var(--stal-2); }

.naglowek{ max-width:64ch; margin-bottom:clamp(32px,4vw,50px); }

/* --------------------------------------------------------------------------
   1. PASKI GÓRNE I NAWIGACJA
   -------------------------------------------------------------------------- */
.demo-pas{
  background:var(--papier-2); color:var(--stal); padding:9px 0; font-size:12.5px;
  text-align:center; border-bottom:1px solid var(--kreska);
}
.gorny{ background:var(--atrament); color:rgba(255,255,255,.72); font-size:13px; padding:9px 0; }
.gorny__rzad{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.gorny__poz{ display:flex; align-items:center; gap:7px; }
.gorny a{ color:#fff; font-weight:600; text-decoration:none; }
.gorny a:hover{ color:#F5919E; }

.nawigacja{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--kreska);
}
.nawigacja__rzad{ display:flex; align-items:center; gap:18px; height:74px; }

.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.logo__znak{ width:54px; height:54px; flex:none; display:block; }
.logo__nazwa{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:26px;
  letter-spacing:-.015em; color:var(--atrament); text-transform:uppercase; line-height:1;
}
.logo__nazwa span{ color:var(--czerwien); }
.logo__pod{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9px;
  letter-spacing:.18em; color:var(--stal); text-transform:uppercase; margin-top:4px;
}

.menu{ display:flex; gap:0; list-style:none; margin:0 0 0 auto; padding:0; white-space:nowrap; }
.menu a{
  display:block; padding:8px 11px; text-decoration:none; font-weight:600; font-size:14.8px;
  color:var(--atrament); position:relative; transition:color .16s var(--tempo);
}
.menu a::after{
  content:""; position:absolute; left:11px; right:11px; bottom:0; height:2px;
  background:var(--czerwien); transform:scaleX(0); transform-origin:left;
  transition:transform .18s var(--tempo);
}
.menu a:hover::after,.menu a[aria-current="page"]::after{ transform:scaleX(1); }
.menu a[aria-current="page"]{ color:var(--czerwien); }

.nawigacja__akcja{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }

.guzik{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; font-weight:700; font-size:15.5px; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:.16s var(--tempo);
  font-family:'Barlow',sans-serif;
}
.guzik svg{ width:18px; height:18px; flex:none; }
.guzik--czerwony{ background:var(--czerwien); color:#fff; border-color:var(--czerwien); }
.guzik--czerwony:hover{ background:var(--czerwien-2); border-color:var(--czerwien-2); }
.guzik--obrys{ background:transparent; color:var(--atrament); border-color:var(--kreska-2); }
.guzik--obrys:hover{ border-color:var(--atrament); background:var(--papier); }
.guzik--jasny{ background:#fff; color:var(--atrament); border-color:#fff; }
.guzik--jasny:hover{ background:var(--papier-2); border-color:var(--papier-2); }
.guzik--duzy{ padding:16px 28px; font-size:16.5px; }
.guzik--pelny{ width:100%; }

.hamburger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid var(--kreska-2); cursor:pointer;
}
.hamburger svg{ width:22px; height:22px; }

.okruchy{ border-bottom:1px solid var(--kreska); background:var(--biel); }
.okruchy .wrap{
  padding-top:12px; padding-bottom:12px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--stal);
}
.okruchy a{ text-decoration:none; }
.okruchy a:hover{ color:var(--czerwien); }
.okruchy span{ color:var(--atrament); }

/* --------------------------------------------------------------------------
   2. HERO STRONY GŁÓWNEJ
   -------------------------------------------------------------------------- */
.hero3{ background:var(--biel); }
.hero3__rzad{
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,4.6vw,66px);
  align-items:center; padding:clamp(50px,6vw,92px) 0 clamp(46px,5.5vw,80px);
}
.hero3 h1{
  margin-bottom:22px; text-transform:uppercase; letter-spacing:-.018em;
  font-size:clamp(36px,5vw,62px); line-height:1.02;
}
.hero3__lead{ font-size:19.5px; color:var(--stal); max-width:44ch; line-height:1.55; margin-bottom:28px; }
.hero3__akcje{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.hero3__pod{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding-top:24px; border-top:2px solid var(--atrament);
  font-size:13.5px; color:var(--stal); line-height:1.45;
}
.hero3__pod b{ display:block; color:var(--atrament); font-size:15px; margin-bottom:3px; }

.mozaika{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mozaika figure{ margin:0; overflow:hidden; background:var(--papier); }
.mozaika img{ width:100%; height:100%; object-fit:cover; display:block; }
.mozaika figure:first-child{ grid-column:1 / -1; aspect-ratio:16/8.4; }
.mozaika figure:not(:first-child){ aspect-ratio:4/3; }

/* --------------------------------------------------------------------------
   3. KAFLE USŁUG
   -------------------------------------------------------------------------- */
.kafle{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.kafel{
  display:flex; flex-direction:column; text-decoration:none; background:var(--biel);
  border-top:3px solid var(--atrament); transition:.2s var(--tempo);
}
.kafel:hover{ border-top-color:var(--czerwien); transform:translateY(-4px); }
.kafel__foto{ aspect-ratio:4/3; overflow:hidden; background:var(--papier); margin-top:18px; }
.kafel__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--tempo); }
.kafel:hover .kafel__foto img{ transform:scale(1.05); }
.kafel__tresc{ padding:18px 0 0; display:flex; flex-direction:column; flex:1; }
.kafel__nr{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  color:var(--stal); margin-bottom:9px;
}
.kafel h3{ margin-bottom:8px; }
.kafel p{ font-size:15px; color:var(--stal); margin-bottom:16px; }
.kafel__wiecej{
  margin-top:auto; font-weight:700; font-size:14.5px; color:var(--czerwien);
  padding-top:14px; border-top:1px solid var(--kreska);
}

/* --------------------------------------------------------------------------
   4. UKŁAD DWUKOLUMNOWY, ZDJĘCIA, LISTY, KARTY
   -------------------------------------------------------------------------- */
.dwie{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.2vw,58px); align-items:center; }
.dwie--odwrotnie > :first-child{ order:2; }
.dwie .nad{ margin-bottom:14px; }
.dwie h1,.dwie h2{ margin-bottom:16px; }

.foto{ margin:0; }
.foto img{ width:100%; height:auto; }
.foto figcaption{
  margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.06em; color:var(--stal); line-height:1.5;
}
.sekcja--ciemna .foto figcaption{ color:var(--stal-2); }

.lista-prosta{ list-style:none; margin:24px 0 0; padding:0; }
.lista-prosta li{
  position:relative; padding:12px 0 12px 26px; border-top:1px solid var(--kreska);
  font-size:16.5px; color:var(--stal);
}
.lista-prosta li:last-child{ border-bottom:1px solid var(--kreska); }
.lista-prosta li::before{
  content:""; position:absolute; left:0; top:22px; width:14px; height:2px; background:var(--czerwien);
}

.siatka{ display:grid; gap:24px; }
.siatka--3{ grid-template-columns:repeat(3,1fr); }
.karta{
  background:transparent; padding:22px 0 0; border-top:2px solid var(--atrament);
  display:flex; flex-direction:column;
}
.karta h3{ margin-bottom:10px; }
.karta p{ font-size:15.5px; color:var(--stal); }

.przepis{
  border-left:3px solid var(--czerwien); background:var(--papier); padding:22px 26px;
  font-size:16.5px; color:var(--stal); line-height:1.6;
}
.przepis b{ color:var(--atrament); }
.przepis__zrodlo{
  display:block; margin-top:14px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--stal);
}
.sekcja--ciemna .przepis{ background:rgba(255,255,255,.05); border-left-color:#F5919E; color:#B7C2CE; }
.sekcja--ciemna .przepis b{ color:#fff; }
.sekcja--ciemna .przepis__zrodlo{ color:var(--stal-2); }

.plakietka{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:500;
  background:var(--papier-2); color:var(--stal); border:1px solid var(--kreska);
}
.plakietka--czerwona{ background:var(--czerwien-3); color:var(--czerwien-2); border-color:#F0CDD3; }
.plakietka--zielona{ background:#E4F1E9; color:#155F35; border-color:#C4E0CF; }
.plakietka--limonka{ background:#F5EFD8; color:#6B5A24; border-color:#E4D9B6; }
.plakietka--ciemna{ background:rgba(255,255,255,.08); color:#C4CED8; border-color:rgba(255,255,255,.18); }

.dowody{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.dowod{ border-top:2px solid var(--atrament); padding-top:22px; }
.dowod svg{ width:24px; height:24px; color:var(--czerwien); margin-bottom:14px; }
.dowod b{ display:block; font-size:17px; color:var(--atrament); margin-bottom:6px; }
.dowod span{ font-size:14.5px; color:var(--stal); }

.kroki{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:krok; }
.krok{ padding-top:20px; border-top:2px solid var(--atrament); }
.krok::before{
  counter-increment:krok; content:counter(krok,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--czerwien);
  letter-spacing:.12em; display:block; margin-bottom:12px; font-weight:500;
}
.krok h4{ margin-bottom:8px; font-size:18.5px; }
.krok p{ font-size:14.8px; color:var(--stal); }

/* --------------------------------------------------------------------------
   5. PODSTRONY: SPIS, TREŚĆ, BOK, ZOBACZ TEŻ
   -------------------------------------------------------------------------- */
.spis{
  border-top:2px solid var(--atrament); border-bottom:1px solid var(--kreska);
  padding:20px 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 30px;
}
.spis__tytul{
  grid-column:1 / -1; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stal); margin-bottom:6px;
}
.spis a{
  text-decoration:none; font-weight:600; font-size:15px; color:var(--atrament);
  padding:5px 0; border-bottom:1px solid transparent;
}
.spis a:hover{ color:var(--czerwien); border-bottom-color:var(--czerwien); }

.podklad{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:clamp(32px,4.4vw,60px); align-items:start; }

.tresc{ max-width:72ch; }
.tresc h2{ margin-top:clamp(44px,4.6vw,64px); margin-bottom:16px; padding-top:22px; border-top:2px solid var(--atrament); }
.tresc > h2:first-child{ margin-top:0; }
.tresc h3{ margin-top:34px; margin-bottom:10px; }
.tresc p{ margin-bottom:1.05em; }
.tresc ul{ margin:0 0 1.3em; padding-left:0; list-style:none; }
.tresc ul li{ position:relative; padding:9px 0 9px 26px; border-top:1px solid var(--kreska); color:var(--stal); }
.tresc ul li::before{ content:""; position:absolute; left:0; top:19px; width:14px; height:2px; background:var(--czerwien); }
.tresc ul li:last-child{ border-bottom:1px solid var(--kreska); }
.tresc strong{ color:var(--atrament); font-weight:600; }
.tresc a{ color:var(--czerwien); text-underline-offset:3px; }

.bok{ position:sticky; top:92px; border-top:3px solid var(--czerwien); background:var(--papier); padding:24px; }
.bok h4{ margin-bottom:12px; }
.bok p{ font-size:14.5px; color:var(--stal); margin-bottom:16px; }
.bok__tel{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:31px; font-weight:800;
  color:var(--atrament); text-decoration:none; line-height:1; margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.bok__tel:hover{ color:var(--czerwien); }

.dalej{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dalej a{ text-decoration:none; border-top:2px solid var(--atrament); padding-top:16px; transition:.16s var(--tempo); }
.dalej a:hover{ border-top-color:var(--czerwien); }
.dalej b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:21px;
  text-transform:uppercase; color:var(--atrament); margin-bottom:5px; line-height:1.15;
}
.dalej span{ font-size:14.5px; color:var(--stal); }

/* --------------------------------------------------------------------------
   6. CENNIK
   -------------------------------------------------------------------------- */
.cennik{ border-top:2px solid var(--atrament); }
.cennik__wiersz{
  display:grid; grid-template-columns:1fr 200px; gap:24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--kreska);
}
.cennik__nazwa b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:21px; font-weight:700;
  text-transform:uppercase; color:var(--atrament); margin-bottom:4px; line-height:1.14;
}
.cennik__nazwa span{ font-size:14.5px; color:var(--stal); }
.cennik__cena{ text-align:right; }
.cennik__cena b{
  font-family:'Barlow Condensed',sans-serif; font-size:29px; font-weight:800;
  color:var(--atrament); line-height:1; display:block; font-variant-numeric:tabular-nums;
}
.cennik__cena small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--stal); margin-top:6px;
}
.cennik__nota{
  padding:16px 18px; background:var(--czerwien-3); border-left:3px solid var(--czerwien);
  font-size:14px; color:var(--stal); margin-top:20px;
}
.cennik__nota b{ color:var(--atrament); }

/* --------------------------------------------------------------------------
   7. KALKULATOR OBSADY
   -------------------------------------------------------------------------- */
.kalk{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); border-top:3px solid var(--czerwien); }
.kalk__wejscie{ padding:32px 34px 32px 0; }
.kalk__wynik{ padding:32px 0 32px 34px; border-left:1px solid rgba(255,255,255,.16); }

.pole{ margin-bottom:22px; }
.pole:last-child{ margin-bottom:0; }
.pole label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stal-2); margin-bottom:9px; font-weight:500;
}
.pole input,.pole select,.pole textarea{
  width:100%; padding:13px 15px; font:inherit; font-size:16.5px;
  background:var(--biel); color:var(--tekst); border:1px solid var(--kreska-2); border-radius:0;
}
.pole textarea{ min-height:118px; resize:vertical; }
.pole input:focus,.pole select:focus,.pole textarea:focus{ outline:2px solid var(--czerwien); outline-offset:-1px; }
.pole__pomoc{ font-size:13px; color:var(--stal-2); margin-top:8px; }

.wynik__poz{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:15px 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.wynik__poz span{ font-size:15.5px; color:var(--stal-2); }
.wynik__poz b{
  font-family:'Barlow Condensed',sans-serif; font-size:36px; font-weight:800; color:#fff;
  line-height:1; font-variant-numeric:tabular-nums;
}
.wynik__stopka{ margin-top:18px; font-size:13px; color:var(--stal-2); line-height:1.55; }

/* --------------------------------------------------------------------------
   8. MAPA ZASIĘGU
   Kontury z Natural Earth — nie edytować d="..." ręcznie.
   -------------------------------------------------------------------------- */
.plansza{ display:grid; grid-template-columns:1.12fr .88fr; border-top:3px solid var(--czerwien); }
.plansza__rysunek{ padding:clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) 0; }
.plansza__opis{
  padding:clamp(24px,3vw,34px) 0 clamp(24px,3vw,34px) clamp(24px,3vw,34px);
  border-left:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column;
}

.polska{ width:100%; height:auto; display:block; }
.polska .kraj{ fill:#1F2C38; stroke:#47596B; stroke-width:1.4; }
.polska .obce{ fill:#182029; stroke:#252F3A; stroke-width:1; }
.polska .siatka-mapy{ stroke:rgba(255,255,255,.05); stroke-width:.8; }
.polska .krag{
  fill:rgba(200,16,46,.14); stroke:var(--czerwien); stroke-width:1.6;
  stroke-dasharray:6 5; transition:.45s var(--tempo);
}
.polska .krag-opis{ fill:#E8919C; }
.polska .trasa{ fill:none; stroke:var(--czerwien); stroke-width:2.6; stroke-linecap:round; transition:.45s var(--tempo); }
.polska .tor-szary{ fill:none; stroke:#3A4A5A; stroke-width:1.6; transition:.45s var(--tempo); }
.polska .baza{ fill:var(--czerwien); transition:.45s var(--tempo); }
.polska .baza-obwod{ fill:none; stroke:var(--czerwien); stroke-width:1.4; opacity:.5; transition:.45s var(--tempo); }
.polska .punkt{ fill:#fff; stroke:var(--atrament); stroke-width:2; transition:.45s var(--tempo); }
.polska text{
  font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--stal-2);
  letter-spacing:.1em; text-transform:uppercase;
}
.polska text.mocny{
  fill:#fff; font-size:13px; letter-spacing:.01em; text-transform:none;
  font-family:'Barlow',sans-serif; font-weight:600;
}

.wybierak{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.wybierak__pole .mono{ display:block; color:var(--stal-2); margin-bottom:9px; }
.wybierak select{
  width:100%; padding:12px 14px; font:inherit; font-size:16px;
  background:var(--biel); color:var(--tekst); border:1px solid var(--kreska-2); border-radius:0;
}
.wybierak select:focus{ outline:2px solid var(--czerwien); outline-offset:-1px; }

.werdykt{ position:relative; padding:18px 20px 18px 22px; background:rgba(255,255,255,.05); }
.werdykt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--czerwien); }
.werdykt.nie::before{ background:var(--stal); }
.werdykt__mono{ color:var(--stal-2); display:block; margin-bottom:8px; }
.werdykt__tekst{
  margin:0; font-family:'Barlow Condensed',sans-serif; font-size:26px;
  font-weight:700; color:#fff; line-height:1.12;
}
.werdykt__pod{ margin:9px 0 0; font-size:14.5px; color:var(--stal-2); }

.fakty{ list-style:none; margin:26px 0 0; padding:0; }
.fakty li{
  display:flex; justify-content:space-between; gap:14px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.14); align-items:baseline;
}
.fakty li:last-child{ border-bottom:0; }
.fakty .mono{ color:var(--stal-2); }
.fakty b{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:15px; color:#fff;
  font-variant-numeric:tabular-nums;
}
.fakty b.akcent{ color:#F5919E; }

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq{ border-top:2px solid var(--atrament); }
.faq details{ border-bottom:1px solid var(--kreska); }
.faq summary{
  padding:20px 0; cursor:pointer; font-weight:700; font-size:17.5px; color:var(--atrament);
  list-style:none; display:flex; align-items:flex-start; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; margin-left:auto; color:var(--czerwien); font-size:24px;
  font-weight:400; line-height:1; flex:none;
}
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--czerwien); }
.faq__tresc{ padding:0 40px 22px 0; color:var(--stal); font-size:16.5px; max-width:76ch; }
.faq__tresc a{ color:var(--czerwien); }

/* --------------------------------------------------------------------------
   10. TABELA (strona źródeł zdjęć)
   -------------------------------------------------------------------------- */
.tabela-obudowa{ overflow-x:auto; }
.tabela{ width:100%; border-collapse:collapse; font-size:15px; min-width:620px; }
.tabela th,.tabela td{ padding:14px 16px 14px 0; text-align:left; border-bottom:1px solid var(--kreska); vertical-align:top; }
.tabela th{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stal); font-weight:500;
  border-bottom:2px solid var(--atrament);
}
.tabela code{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--atrament); }

/* --------------------------------------------------------------------------
   11. FORMULARZ I KONTAKT
   -------------------------------------------------------------------------- */
.kontakt__rzad{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,54px); align-items:start; }
.kontakt__dane{ list-style:none; margin:0; padding:0; }
.kontakt__dane li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--kreska); align-items:flex-start; }
.kontakt__dane li:first-child{ border-top:2px solid var(--atrament); }
.kontakt__dane svg{ width:20px; height:20px; color:var(--czerwien); flex:none; margin-top:4px; }
.kontakt__dane b{ display:block; font-size:16.5px; color:var(--atrament); }
.kontakt__dane span{ font-size:14.5px; color:var(--stal); }
.kontakt__dane a{ text-decoration:none; color:var(--atrament); font-weight:700; }
.kontakt__dane a:hover{ color:var(--czerwien); }

.formularz{ background:var(--biel); border-top:3px solid var(--atrament); padding:clamp(24px,3vw,34px) 0 0; }
.formularz .pole label{ color:var(--stal); }
.formularz .pole__pomoc{ color:var(--stal); }
.formularz__rzad{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.formularz__zgoda{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--stal); margin:6px 0 20px; }
.formularz__zgoda input{ width:auto; margin-top:4px; accent-color:var(--czerwien); }
.formularz__ok{ background:#E4F1E9; border-left:3px solid var(--zielen); color:#155F35; padding:16px 18px; font-size:15.5px; }

/* --------------------------------------------------------------------------
   12. SKLEP
   -------------------------------------------------------------------------- */
.sklep__pasek{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:18px 0; border-top:2px solid var(--atrament); border-bottom:1px solid var(--kreska);
  margin-bottom:34px; position:sticky; top:74px; background:var(--biel); z-index:40;
}
.filtr{
  padding:8px 15px; background:transparent; border:1px solid var(--kreska-2); cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--stal); transition:.15s var(--tempo);
}
.filtr:hover{ border-color:var(--atrament); color:var(--atrament); }
.filtr[aria-pressed="true"]{ background:var(--atrament); color:#fff; border-color:var(--atrament); }
.sklep__licznik{
  margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--stal);
}

.produkty{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px; }
.produkt{ display:flex; flex-direction:column; background:var(--biel); }
.produkt__foto{
  aspect-ratio:1/1; background:var(--papier); display:flex; align-items:center; justify-content:center;
  position:relative; transition:.2s var(--tempo);
}
.produkt:hover .produkt__foto{ background:var(--papier-2); }
.produkt__foto svg{ width:52%; height:52%; color:var(--atrament); opacity:.42; transition:.3s var(--tempo); }
.produkt:hover .produkt__foto svg{ opacity:.6; transform:scale(1.04); }
.produkt__znacznik{ position:absolute; top:12px; left:12px; }
.produkt__tresc{ padding:16px 0 0; display:flex; flex-direction:column; flex:1; }
.produkt__kat{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stal); margin-bottom:8px;
}
.produkt h3{ font-size:18px; margin-bottom:7px; line-height:1.18; }
.produkt__opis{ font-size:14px; color:var(--stal); margin-bottom:16px; line-height:1.5; }
.produkt__dol{
  margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; padding-top:14px; border-top:1px solid var(--kreska);
}
.produkt__cena{
  font-family:'Barlow Condensed',sans-serif; font-size:27px; font-weight:800;
  color:var(--atrament); line-height:1; font-variant-numeric:tabular-nums;
}
.produkt__cena small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.09em; color:var(--stal); font-weight:400; margin-top:5px; text-transform:uppercase;
}
.produkt__dodaj{
  padding:10px 15px; background:transparent; color:var(--atrament); cursor:pointer;
  border:1.5px solid var(--atrament); font-weight:700; font-size:14px;
  transition:.15s var(--tempo); white-space:nowrap;
}
.produkt__dodaj:hover{ background:var(--atrament); color:#fff; }
.produkt__dodaj[data-dodany="1"]{ background:var(--zielen); border-color:var(--zielen); color:#fff; }

.koszyk-guzik{ position:relative; }
.koszyk__znacznik{
  position:absolute; top:-7px; right:-9px; min-width:21px; height:21px; padding:0 5px;
  background:var(--czerwien); color:#fff; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border-radius:11px;
}
.koszyk{
  position:fixed; right:0; top:0; bottom:0; width:min(420px,92vw); background:var(--biel);
  box-shadow:-12px 0 44px rgba(18,25,32,.22); z-index:90; display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .28s var(--tempo); visibility:hidden;
}
.koszyk[data-otwarty="1"]{ transform:none; visibility:visible; }
.koszyk__gora{ padding:22px 24px; border-bottom:2px solid var(--atrament); display:flex; align-items:center; gap:12px; }
.koszyk__gora h3{ margin-right:auto; }
.koszyk__zamknij{ background:none; border:1px solid var(--kreska-2); width:38px; height:38px; cursor:pointer; font-size:18px; }
.koszyk__lista{ flex:1; overflow-y:auto; margin:0; padding:0; list-style:none; }
.koszyk__poz{ display:flex; gap:12px; padding:16px 24px; border-bottom:1px solid var(--kreska); align-items:center; }
.koszyk__poz b{ display:block; font-size:15.5px; color:var(--atrament); }
.koszyk__poz span{ font-size:13px; color:var(--stal); }
.koszyk__usun{ margin-left:auto; background:none; border:none; color:var(--stal); cursor:pointer; font-size:20px; line-height:1; }
.koszyk__usun:hover{ color:var(--czerwien); }
.koszyk__pusty{ padding:40px 24px; text-align:center; color:var(--stal); font-size:15px; }
.koszyk__dol{ padding:22px 24px; border-top:1px solid var(--kreska); background:var(--papier); }
.koszyk__suma{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.koszyk__suma b{
  font-family:'Barlow Condensed',sans-serif; font-size:31px; font-weight:800;
  color:var(--atrament); font-variant-numeric:tabular-nums;
}
.zaslona{
  position:fixed; inset:0; background:rgba(18,25,32,.5); z-index:85; opacity:0;
  visibility:hidden; transition:.24s; border:none; padding:0; cursor:pointer;
}
.zaslona[data-otwarty="1"]{ opacity:1; visibility:visible; }

/* --------------------------------------------------------------------------
   13. STOPKA I PASEK TELEFONU
   -------------------------------------------------------------------------- */
.stopka{ background:var(--atrament); color:var(--stal-2); padding:clamp(48px,5vw,70px) 0 0; font-size:15px; }
.stopka__rzad{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; padding-bottom:44px; }
.stopka h4{
  color:#fff; font-size:11.5px; margin-bottom:18px; font-family:'IBM Plex Mono',monospace;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.stopka ul{ list-style:none; margin:0; padding:0; }
.stopka li{ margin-bottom:10px; }
.stopka a{ text-decoration:none; }
.stopka a:hover{ color:#fff; }
.stopka__logo{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.stopka__znak{ width:84px; height:84px; flex:none; display:block; }
.stopka__jednostka{ font-size:13.5px; color:#9AA8B5; margin:-4px 0 14px; line-height:1.5; }
.stopka__jednostka i{ color:#fff; font-style:italic; }
.stopka__logo .logo__nazwa{ color:#fff; }
.stopka__dol{
  border-top:1px solid rgba(255,255,255,.14); padding:18px 0; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px;
}
.stopka__dol a{ color:#fff; }

.pasek-tel{ display:none; }

/* --------------------------------------------------------------------------
   15. ZESPÓŁ — POLAND RESCUE TEAM
   -------------------------------------------------------------------------- */
.hero3__jednostka{
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  font-size:14.5px; color:var(--stal); line-height:1.35;
}
.hero3__jednostka img{ width:46px; height:46px; flex:none; }
.hero3__jednostka b{ display:block; color:var(--atrament); font-size:15.5px; }

.etaty{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.etat{ border-top:2px solid var(--atrament); padding-top:18px; }
.etat--dowodca{ border-top-color:var(--czerwien); }
.etat__poziom{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; color:var(--stal); margin-bottom:10px;
}
.etat h3{ font-size:20px; margin:0 0 2px; }
.etat__en{ display:block; font-size:13.5px; color:var(--stal); margin-bottom:12px; }
.etat ul{ margin:0; padding-left:18px; font-size:15px; color:var(--tekst); line-height:1.5; }
.etat li + li{ margin-top:6px; }

.zespol-motto{
  display:flex; align-items:center; gap:22px; margin-top:44px; padding-top:26px;
  border-top:1px solid var(--kreska);
}
.zespol-motto img{ width:96px; height:96px; flex:none; }
.zespol-motto p{ margin:0; color:var(--stal); max-width:62ch; }
.zespol-motto b{ color:var(--atrament); }

.sekcja--ciemna .etat{ border-top-color:rgba(255,255,255,.28); }
.sekcja--ciemna .etat--dowodca{ border-top-color:var(--czerwien); }
.sekcja--ciemna .etat__poziom,.sekcja--ciemna .etat__en{ color:var(--stal-2); }
.sekcja--ciemna .etat ul{ color:#C4CED8; }
.sekcja--ciemna .zespol-motto{ border-top-color:rgba(255,255,255,.16); }
.sekcja--ciemna .zespol-motto p{ color:#C4CED8; }
.sekcja--ciemna .zespol-motto b{ color:#fff; }
.sekcja--ciemna .zespol-motto a{ color:#fff; }

.emblemat{ margin:0; display:grid; place-items:center; background:var(--papier); padding:clamp(24px,4vw,48px); }
.emblemat img{ width:min(100%,420px); height:auto; display:block; }

@media (max-width:1080px){
  .etaty{ grid-template-columns:repeat(2,1fr); gap:30px 24px; }
}
@media (max-width:660px){
  .etaty{ grid-template-columns:1fr; }
  .zespol-motto{ flex-direction:column; align-items:flex-start; }
  .logo__znak{ width:46px; height:46px; }
}

/* --------------------------------------------------------------------------
   14. RESPONSYWNOŚĆ
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .kafle{ grid-template-columns:repeat(2,1fr); }
  .kroki{ grid-template-columns:repeat(2,1fr); }
  .podklad{ grid-template-columns:1fr; }
  .bok{ position:static; }
  .produkty{ grid-template-columns:repeat(3,1fr); }
  .stopka__rzad{ grid-template-columns:1fr 1fr; }
  .dalej{ grid-template-columns:1fr; gap:0; }
  .dalej a{ padding-bottom:16px; }
}
@media (max-width:1080px){
  .menu{ display:none; }
  .menu[data-otwarte="1"]{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; right:0;
    background:var(--biel); border-bottom:1px solid var(--kreska); padding:8px 16px 16px;
    box-shadow:var(--cien); z-index:61; white-space:normal;
  }
  .menu[data-otwarte="1"] a{ padding:14px 8px; border-bottom:1px solid var(--kreska); }
  .menu[data-otwarte="1"] a::after{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:900px){
  .nawigacja__akcja a.guzik--czerwony{ display:none; }
  .hero3__rzad{ grid-template-columns:1fr; gap:34px; }
  .dwie{ grid-template-columns:1fr; }
  .dwie--odwrotnie > :first-child{ order:0; }
  .siatka--3,.dowody{ grid-template-columns:1fr; gap:24px; }
  .kalk,.plansza{ grid-template-columns:1fr; }
  .kalk__wejscie{ padding:28px 0; }
  .kalk__wynik{ padding:28px 0; border-left:none; border-top:1px solid rgba(255,255,255,.16); }
  .plansza__rysunek{ padding:20px 0; }
  .plansza__opis{ padding:24px 0; border-left:none; border-top:1px solid rgba(255,255,255,.16); }
  .kontakt__rzad{ grid-template-columns:1fr; }
}
@media (max-width:660px){
  body{ font-size:16.5px; padding-bottom:58px; }
  .hero3__pod{ grid-template-columns:1fr; gap:14px; }
  .kafle,.kroki{ grid-template-columns:1fr; }
  .produkty{ grid-template-columns:repeat(2,1fr); gap:26px 16px; }
  .stopka__rzad{ grid-template-columns:1fr; gap:28px; }
  .formularz__rzad,.wybierak{ grid-template-columns:1fr; }
  .cennik__wiersz{ grid-template-columns:1fr; gap:10px; }
  .cennik__cena{ text-align:left; }
  .sklep__pasek{ position:static; }
  .faq__tresc{ padding-right:0; }
  .pasek-tel{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .pasek-tel a{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:16px 8px; text-decoration:none; font-weight:700; font-size:15.5px;
  }
  .pasek-tel a:first-child{ background:var(--czerwien); color:#fff; }
  .pasek-tel a:last-child{ background:var(--atrament); color:#fff; }
  .pasek-tel svg{ width:18px; height:18px; }
}
@media (max-width:430px){
  .produkty{ grid-template-columns:1fr; }
}

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

@media print{
  .nawigacja,.pasek-tel,.demo-pas,.gorny,.koszyk,.zaslona,.bok,.sklep__pasek{ display:none !important; }
  body{ font-size:12pt; }
  .sekcja{ padding:18pt 0; }
}