/* ==========================================================================
   jkt.css — warstwa REMONTU wizualnego jktsystem.pl (10.08.2026)

   Leży w @layer remont, zadeklarowanej PO @layer baza (jkt-baza.css).
   Dzięki temu każda reguła stąd nadpisuje bazę niezależnie od specyficzności —
   nie trzeba podbijać selektorów ani używać !important.

   Zasada: zmiany klasowe. Jeśli coś poprawiam, poprawiam dla wszystkich
   16 stron naraz (5 języków), a nie punktowo na stronie głównej.
   ========================================================================== */

@layer baza, remont;

@layer remont {

/* ==========================================================================
   1. TOKENY — jedna paleta dla całego serwisu
   ========================================================================== */
:root {
  /* Granat brandowy — bazowa powierzchnia ciemna */
  --jkt-navy-900: #070E1B;
  --jkt-navy-800: #0A1628;
  --jkt-navy-700: #0F1F38;
  --jkt-navy-600: #16294A;

  /* Niebieski sygnałowy — akcja */
  --jkt-blue:     #1B5DBB;
  --jkt-blue-600: #1751A5;
  --jkt-blue-400: #4B87D8;
  --jkt-blue-50:  #EDF3FB;

  /* Czerwony — wyłącznie mikroakcent (podkreślenia etykiet), nigdy tło przycisku */
  --jkt-red:      #E31E24;

  /* Powierzchnie jasne */
  --jkt-white:    #FFFFFF;
  --jkt-mist:     #F4F6F9;
  --jkt-line:     #E2E6EC;

  /* Tekst */
  --jkt-ink:      #16202E;
  --jkt-ink-soft: #56637A;
  --jkt-on-dark:      rgba(255,255,255,0.94);
  --jkt-on-dark-soft: rgba(255,255,255,0.78);

  /* Promienie i cienie — spójne w całym serwisie */
  --jkt-r-sm: 8px;
  --jkt-r:    12px;
  --jkt-r-lg: 18px;
  --jkt-cien:      0 1px 2px rgba(16,32,56,.04), 0 8px 24px rgba(16,32,56,.06);
  --jkt-cien-mocny:0 2px 4px rgba(16,32,56,.05), 0 18px 44px rgba(16,32,56,.12);

  /* Wysokość nagłówka — do offsetów kotwic i hero */
  --jkt-header-h: 72px;
}

/* Paleta obowiązuje też strony, które miały własną (realizacje: DM Sans + inne
   odcienie niebieskiego i czerwieni — odstępstwo od identyfikacji, nie decyzja). */
body.p-realizacje {
  --color-primary: var(--jkt-blue);
  --color-primary-hover: var(--jkt-blue-600);
  --color-primary-light: var(--jkt-blue-400);
  --color-accent: var(--jkt-red);
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Barlow', system-ui, sans-serif;
  font-family: var(--font-body);
}
body.p-realizacje h1, body.p-realizacje h2, body.p-realizacje h3,
body.p-realizacje h4, body.p-realizacje .logo-text {
  font-family: var(--font-heading);
}

/* ==========================================================================
   2. TYPOGRAFIA
   Nagłówki NIE mogą łamać się w środku wyrazu. Na produkcji hero rozpadał się
   na „telekomunikacyjn / ą." — bo body ma overflow-wrap: break-word, a h1 miał
   max-width: 14ch, węższe niż sam wyraz (18 znaków). Poprawiamy oba warunki:
   nagłówki dostają normalne zawijanie i szerszy blok.
   ========================================================================== */
h1, h2, h3, h4, .hero-content h1, .page-hero h1 {
  /* `break-word` łamie wyraz TYLKO wtedy, gdy naprawdę nie mieści się w linii —
     polski hero rozpadał się nie przez tę regułę, lecz przez max-width: 14ch,
     czyli blok węższy niż sam wyraz. Blok jest już szerszy (21ch), więc
     zabezpieczenie może zostać: chroni przed wyjściem poza ekran. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
/* Niemieckie złożenia nie mieszczą się w bloku nagłówka NA ŻADNEJ szerokości:
   „Telekommunikationsinfrastruktur." ma 32 znaki przy bloku 21ch. Bez dzielenia
   `overflow-wrap: break-word` tnie wyraz w przypadkowym miejscu, bez myślnika —
   na produkcji wyszło „Telekommunikationsinfrastr / uktur.".
   Dlatego `hyphens: auto` obowiązuje na każdej szerokości, a nie tylko na mobile.
   Polskie nagłówki się od tego nie zmieniają: najdłuższy wyraz ma 18 znaków
   i mieści się w linii, więc przeglądarka nie ma czego dzielić (sprawdzone
   zrzutami wszystkich pięciu języków, desktop i mobile). */
h1, h2, .hero-content h1, .page-hero h1 { hyphens: auto; }
h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.018em; }
p, li { text-wrap: pretty; }

/* Etykieta sekcji — cienka, wersalikowa, z krótką czerwoną kreską pod spodem */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jkt-blue);
  border: 0;
  padding: 0 0 8px;
  margin-bottom: 18px;
  position: relative;
}
.section-label::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--jkt-red);
}

/* ==========================================================================
   3. HEADER — stałe ciemne szkło
   Na produkcji header był biały i przełączał klasę `scrolled` przy przewijaniu.
   Dwustanowy header gubi stan przy kotwicach i traci kontrast nad ciemnymi
   sekcjami. Tutaj jest jeden stan: granat + rozmycie, białe linki, zawsze.
   ========================================================================== */
.header,
.header.scrolled {
  background: color-mix(in srgb, var(--jkt-navy-800) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,.20);
}
.header .navbar { min-height: var(--jkt-header-h); }
.header .nav-links > a,
.header .nav-links a:not(.btn) {
  color: var(--jkt-on-dark-soft);
  font-weight: 500;
}
.header .nav-links a:not(.btn):hover,
.header .nav-links a:not(.btn):focus-visible { color: var(--jkt-white); }
.header .logo-brand, .header .logo-text, .header .logo-sub { color: var(--jkt-white); }
.header .logo-sub { color: rgba(255,255,255,0.62); }
.header .mobile-menu-btn span { background: var(--jkt-white); }
.header .nav-back, .header .topbar-back { color: var(--jkt-on-dark-soft); }

/* Podkreślenie linku zamiast zmiany tła całego paska */
.header .nav-links a:not(.btn) { position: relative; padding-bottom: 3px; }
.header .nav-links a:not(.btn)::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--jkt-red);
  transition: width .22s ease;
}
.header .nav-links a:not(.btn):hover::after { width: 100%; }

/* Pasek nad headerem (kontakt + języki) — ciemniejszy niż header, nie jaśniejszy */
.topbar {
  background: var(--jkt-navy-900);
  color: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar a { color: rgba(255,255,255,0.82); }
.topbar a:hover { color: var(--jkt-white); }
.lang-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.80);
  border-radius: 4px;
}
.lang-btn:hover { background: rgba(255,255,255,0.16); color: var(--jkt-white); }
.lang-btn.active {
  background: var(--jkt-blue);
  border-color: var(--jkt-blue);
  color: var(--jkt-white);
}

/* Menu mobilne rozwija się na ciemnym tle, spójnie z headerem */
@media (max-width: 992px) {
  .header .nav-links {
    background: color-mix(in srgb, var(--jkt-navy-900) 97%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .header .nav-links a:not(.btn) { color: var(--jkt-on-dark); font-size: 1.15rem; }
}

/* Logo w pasku FAQ ma człon „JKT" wpisany w SVG kolorem #0D1117. Na białym
   pasku było czytelne; po zmianie paska na granat zniknęło i zostawało samo
   czerwone „SYSTEM". Kolor nadpisujemy z CSS zamiast edytować pięć SVG. */
.topbar-logo svg text[fill="#0D1117"] { fill: var(--jkt-white); }

/* ==========================================================================
   4. HERO STRONY GŁÓWNEJ — pełnoekranowe zdjęcie jako TŁO SEKCJI

   UWAGA na zakres: klasy `.hero` używa też FAQ, ale tam sekcja nie ma
   kontenera — h1, akapit i statystyki leżą bezpośrednio w <section>.
   Ustawienie `display:flex` na wszystkich `.hero` ustawiło je w rzędzie
   i tekst nachodził na siebie. Dlatego reguły układu obowiązują wyłącznie
   hero z osadzonym zdjęciem (`.hero-bg`), czyli pięć stron głównych.
   ========================================================================== */
.hero:has(> .hero-bg) {
  position: relative;
  min-height: clamp(560px, 76vh, 760px);
  display: flex;
  align-items: center;
  padding: calc(var(--jkt-header-h) + 72px) 0 84px;
  background-color: var(--jkt-navy-900);
  overflow: hidden;
}
/* Zapas na wypadek braku obsługi :has() — ta sama piątka stron wprost. */
body.p-index .hero, body.p-de-index .hero, body.p-es-index .hero,
body.p-it-index .hero, body.p-ua-index .hero {
  position: relative;
  min-height: clamp(560px, 76vh, 760px);
  display: flex;
  align-items: center;
  padding: calc(var(--jkt-header-h) + 72px) 0 84px;
  background-color: var(--jkt-navy-900);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 38%, nie 55% — przy 55% kadr schodził w dół i ucinał czubek masztu z antenami,
     czyli jedyny element, po którym poznać, o jakiej infrastrukturze mowa. */
  object-position: center 38%;
  opacity: 1;                 /* przyciemnienie robi overlay, nie przezroczystość zdjęcia */
  filter: none;
}
/* Overlay dwuwarstwowy: pionowy pod header i poziomy pod kolumnę tekstu.
   Zdjęcie ma ciemną lewą strefę, więc gradient poziomy może być łagodny —
   motyw (maszt po prawej) zostaje widoczny. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,14,27,.72) 0%, rgba(7,14,27,.12) 26%, rgba(7,14,27,.10) 62%, rgba(7,14,27,.55) 100%),
    linear-gradient(90deg, rgba(7,14,27,.90) 0%, rgba(7,14,27,.74) 38%, rgba(7,14,27,.30) 68%, rgba(7,14,27,.10) 100%);
}
/* Na wąskim ekranie kolumna tekstu zajmuje całą szerokość, więc poziomy
   gradient (mocny po lewej) przykrywał zdjęcie w całości — zostawał sam
   granat. Tutaj overlay działa pionowo: ciemno pod tekstem u góry, jaśniej
   u dołu, gdzie widać maszt. Kadr przesunięty w prawo, żeby maszt w ogóle
   wszedł w wycinek 9:16. */
@media (max-width: 768px) {
  .hero-bg img { object-position: 72% 42%; }
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(7,14,27,.92) 0%, rgba(7,14,27,.86) 42%, rgba(7,14,27,.55) 68%, rgba(7,14,27,.72) 100%);
  }
  .hero:has(> .hero-bg),
  body.p-index .hero, body.p-de-index .hero, body.p-es-index .hero,
  body.p-it-index .hero, body.p-ua-index .hero {
    min-height: clamp(520px, 84vh, 680px);
    padding: calc(var(--jkt-header-h) + 48px) 0 56px;
  }
}

.hero .container { position: relative; z-index: 1; }
.hero-content { max-width: 720px; }
.hero-content h1 {
  color: var(--jkt-white);
  max-width: 21ch;            /* mieści najdłuższy wyraz PL/DE bez łamania w środku */
  font-size: clamp(2.1rem, 3.9vw, 3.4rem);
  line-height: 1.1;
  text-shadow: 0 10px 40px rgba(0,0,0,.5);
  margin-bottom: 1.25rem;
}
.hero-content p.lead {
  color: var(--jkt-on-dark);
  max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.7;
  text-shadow: 0 4px 22px rgba(0,0,0,.42);
  margin-bottom: 2.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Panel krajów w hero — cienki pasek „glass" zamiast bloku kafelków */
.country-panel {
  margin-top: 2.75rem;
  display: flex; flex-wrap: wrap; gap: 8px;
  background: none; border: 0; padding: 0; backdrop-filter: none;
}
.country-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.17);   /* podbite z /10 — na zdjęciu ginęło */
  border-radius: 999px;
  color: var(--jkt-on-dark);
  font-size: 0.85rem; font-weight: 500;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   5. PASEK ZAUFANIA pod hero — cienki, nie kafelkowy
   ========================================================================== */
.trust-bar {
  background: var(--jkt-navy-800);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 18px 0;
}
.trust-indicator { color: var(--jkt-on-dark-soft); font-size: 0.9rem; font-weight: 500; }
.trust-indicator svg { width: 18px; height: 18px; color: var(--jkt-blue-400); }

/* ==========================================================================
   6. SEKCJE, KARTY, PRZYCISKI
   ========================================================================== */
.bg-light { background: var(--jkt-mist); }

.card, .country-card, .testimonial-card, .together-card, .summary-card, .safety-card {
  background: var(--jkt-white);
  border: 1px solid var(--jkt-line);
  border-radius: var(--jkt-r);
  box-shadow: var(--jkt-cien);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .country-card:hover, .together-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jkt-cien-mocny);
  border-color: color-mix(in srgb, var(--jkt-blue) 32%, var(--jkt-line));
}
/* Ikona w karcie: sam znak w kolorze marki, bez kolorowego kwadratu pod spodem */
.card-icon {
  background: none;
  border: 0;
  width: auto; height: auto;
  color: var(--jkt-blue);
  margin-bottom: 18px;
}
.card-icon svg { width: 30px; height: 30px; }

.btn {
  border-radius: var(--jkt-r-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary {
  background: var(--jkt-blue);
  box-shadow: 0 6px 18px rgba(27,93,187,.28);
}
.btn-primary:hover {
  background: var(--jkt-blue-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(27,93,187,.36);
}
.btn-outline {
  border: 1px solid rgba(255,255,255,.42);   /* na fotografii /30 ginęło */
  background: rgba(255,255,255,.06);
  color: var(--jkt-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }

/* ==========================================================================
   7. SEKCJA WYMAGAŃ — zdjęcie zamiast linii energetycznych
   Stare tło (bg-wymagania.jpg) pokazywało słupy wysokiego napięcia, czyli
   infrastrukturę, której firma nie stawia. Nowe: pola, łąka, nieużytek i droga
   dojazdowa — dokładnie to, czego dotyczą wypisane obok kryteria.
   ========================================================================== */
.criteria-section {
  background-color: var(--jkt-navy-900);
  background-image:
    linear-gradient(100deg, rgba(7,14,27,.94) 0%, rgba(7,14,27,.86) 46%, rgba(7,14,27,.70) 100%),
    url('img/tlo-wymagania.webp');
  background-size: cover;
  background-position: center;
}
.criteria-section .section-label { color: var(--jkt-white); }
.criteria-section h2 { color: var(--jkt-white); }
.criteria-item { border-color: rgba(255,255,255,.12); }
.criteria-icon { background: rgba(255,255,255,.08); color: var(--jkt-blue-400); border: 1px solid rgba(255,255,255,.14); }
.criteria-text h3 { color: var(--jkt-white); }
.criteria-text p { color: rgba(255,255,255,.80); }   /* z #A1A1AA — na zdjęciu za słabe */

/* ==========================================================================
   8. FORMULARZ — zdjęcie ma być widoczne, nie rozmyte na biało
   Na produkcji overlay miał 91–94% bieli i zamieniał fotografię w szary brud.
   ========================================================================== */
.form-section {
  background-color: var(--jkt-mist);
  background-image:
    linear-gradient(180deg, rgba(244,246,249,.86) 0%, rgba(244,246,249,.80) 45%, rgba(244,246,249,.90) 100%),
    url('img/tlo-formularz.webp');
  background-size: cover;
  background-position: center 40%;
}
.form-wrapper {
  background: var(--jkt-white);
  border: 1px solid var(--jkt-line);
  border-radius: var(--jkt-r-lg);
  box-shadow: var(--jkt-cien-mocny);
}
.form-control {
  border-radius: var(--jkt-r-sm);
  border: 1px solid var(--jkt-line);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus {
  border-color: var(--jkt-blue);
  box-shadow: 0 0 0 3px rgba(27,93,187,.16);
  outline: none;
}

/* ==========================================================================
   9. FLAGI — rysowane CSS-em, nie emoji
   Emoji flagowe renderują się inaczej na każdym systemie (na Windowsie często
   jako dwie litery kodu kraju), a w kadrze czytają się jak clipart. Poniżej
   proste prostokąty w barwach urzędowych — flagi państw nie są znakami
   towarowymi, więc nie ma tu problemu, który mają logotypy operatorów.
   ========================================================================== */
.country-flag, .country-card .flag {
  font-size: 0;                 /* chowa znak emoji pozostawiony w HTML */
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}
.country-flag {
  width: 20px; height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28) inset;
}
.country-card .flag {
  width: 44px; height: 30px;
  border-radius: 3px;
  margin: 0 auto 14px;
  box-shadow: 0 0 0 1px rgba(22,32,46,.12) inset, 0 2px 6px rgba(16,32,56,.10);
}
.flaga-pl { background-image: linear-gradient(180deg, #FFF 0 50%, #DC143C 50% 100%); }
.flaga-de { background-image: linear-gradient(180deg, #000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6% 100%); }
.flaga-ua { background-image: linear-gradient(180deg, #0057B7 0 50%, #FFD700 50% 100%); }
.flaga-es { background-image: linear-gradient(180deg, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%); }
.flaga-it { background-image: linear-gradient(90deg, #008C45 0 33.3%, #F4F5F0 33.3% 66.6%, #CD212A 66.6% 100%); }

/* ==========================================================================
   10. PAS CTA — jeden komponent dla wszystkich sekcji leadowych
   ========================================================================== */
.cta-banner {
  position: relative;
  background-color: var(--jkt-navy-900);
  background-image:
    linear-gradient(90deg, rgba(7,14,27,.93) 0%, rgba(7,14,27,.80) 52%, rgba(7,14,27,.62) 100%),
    url('img/tlo-cta.webp');
  background-size: cover;
  background-position: center 62%;
  overflow: hidden;
}
.cta-banner h2 { color: var(--jkt-white); }
.cta-banner p { color: var(--jkt-on-dark); }
.cta-banner .btn-white {
  background: var(--jkt-white);
  color: var(--jkt-navy-800);
}
.cta-banner .btn-white:hover { background: var(--jkt-blue-50); }

/* ==========================================================================
   11. HERO PODSTRON — jedno tło dla wszystkich stron poza główną
   Wcześniej każda podstrona miała własny wariant (płaski gradient albo paski
   CSS), przez co serwis wyglądał jak zlepek trzech różnych stron.

   Uwaga: url() w arkuszu rozwiązuje się względem SAMEGO ARKUSZA, nie względem
   strony. Dlatego „img/…" działa tak samo dla /index.html jak dla /de/faq.html
   i nie trzeba osobnych reguł dla podkatalogów językowych. Właśnie na tym
   wykładały się stare tła: miały ścieżki wpisane inline w HTML, więc na /de/
   szukały pliku w /de/ i wracały z 404.
   ========================================================================== */
.page-hero,
body.p-faq .hero, body.p-de-faq .hero, body.p-es-faq .hero,
body.p-it-faq .hero, body.p-ua-faq .hero {
  position: relative;
  background-color: var(--jkt-navy-900);
  background-image:
    linear-gradient(100deg, rgba(7,14,27,.93) 0%, rgba(7,14,27,.82) 45%, rgba(7,14,27,.58) 100%),
    url('img/hero-podstrony.webp');
  background-size: cover;
  background-position: center 58%;
  padding-top: calc(var(--jkt-header-h) + 64px);
  padding-bottom: 72px;
}
/* Stare paski i gradienty dekoracyjne pod nowym zdjęciem tylko brudzą.
   Zerujemy też tło i content, żeby pseudo-element nie ciągnął swojego
   data:image/svg+xml mimo ukrycia.
   UWAGA: to NIE usuwa błędu 404 na /%EF%BF%BD widocznego w konsoli
   /umowa-dzierzawy — sprawdzone, występuje dalej i tak samo na produkcji.
   Źródło jest gdzie indziej (nie CSS, nie JS, nie żaden element w DOM);
   opisane w raporcie jako defekt zastany do osobnego zbadania. */
.page-hero::before, .page-hero::after,
body.p-faq .hero::before, body.p-de-faq .hero::before, body.p-es-faq .hero::before,
body.p-it-faq .hero::before, body.p-ua-faq .hero::before {
  display: none;
  background: none;
  content: none;
}

/* FAQ: hero jest wyśrodkowane i bez kontenera — dokładamy tylko oddech
   pod przyklejonym paskiem i kontrast tekstu na fotografii. */
body.p-faq .hero, body.p-de-faq .hero, body.p-es-faq .hero,
body.p-it-faq .hero, body.p-ua-faq .hero {
  padding: 108px 24px 84px;
}
body[class*="-faq"] .hero h1, body.p-faq .hero h1 { color: var(--jkt-white); }
body[class*="-faq"] .hero p, body.p-faq .hero p {
  color: var(--jkt-on-dark);
  opacity: 1;                    /* było .85 na gradiencie — na zdjęciu za mało */
  text-shadow: 0 3px 16px rgba(0,0,0,.45);
}
body[class*="-faq"] .hero-stat .num, body.p-faq .hero-stat .num { color: var(--jkt-white); }
body[class*="-faq"] .hero-stat .label, body.p-faq .hero-stat .label {
  color: var(--jkt-on-dark-soft);
  opacity: 1;
}

.page-hero h1 { color: var(--jkt-white); }
.page-hero .lead { color: var(--jkt-on-dark); }
.page-hero-badge {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: var(--jkt-on-dark);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   12. DROBNE UJEDNOLICENIA
   ========================================================================== */
/* Karty „O nas" na stronie głównej miały niebieskie tło i niebieskie nagłówki,
   podczas gdy wszystkie inne karty w serwisie są białe z obramowaniem. */
.benefit-item {
  background: var(--jkt-white);
  border: 1px solid var(--jkt-line);
  border-radius: var(--jkt-r);
  box-shadow: var(--jkt-cien);
}
.benefit-item h3, .benefit-item h4 { color: var(--jkt-ink); }

/* Karta opiekuna na /wspolpraca: adres e-mail był szary na ciemnym tle */
.page-hero .summary-card a,
.page-hero .summary-card-value,
.page-hero [class*="mail"] { color: var(--jkt-on-dark); }

/* Zdjęcia w kartach lokalizacji: równa wysokość niezależnie od proporcji pliku */
.location-img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ==========================================================================
   ELEMENTY UKRYTE WIZUALNIE, ALE NADAL W KOLEJNOŚCI FOKUSU
   Wspólna klasa błędu: `opacity: 0` (albo `max-height: 0`) chowa element przed
   oczami i przed myszą, ale klawiatura i czytniki ekranu widzą go dalej.
   Lekarstwem jest `visibility: hidden` — wyjmuje element z kolejności Tab
   i z drzewa dostępności. Sprawdzone tabowaniem: przed poprawką fokus wchodził
   w ukryte kontrolki, po poprawce ani razu.
   ========================================================================== */

/* Pole „Województwo" w formularzu chowa się po wybraniu kraju innego niż Polska.
   Przed poprawką użytkownik klawiatury i tak trafiał w listę polskich województw.
   Zwijanie ma dalej animować wysokość, więc visibility przełączamy dopiero
   po zakończeniu przejścia. */
#voivodeshipGroup {
  transition: max-height .3s ease, opacity .3s ease, visibility 0s linear .3s;
}
#voivodeshipGroup.hidden { visibility: hidden; }
#voivodeshipGroup.visible {
  visibility: visible;
  transition: max-height .3s ease, opacity .3s ease, visibility 0s linear 0s;
}

/* Zamknięty lightbox na /realizacje był ukryty samą przezroczystością
   (`opacity: 0; pointer-events: none`). Dla myszy to wystarcza, ale klawiatura
   pointer-events nie obchodzi: Tab wchodził w trzy niewidzialne przyciski
   (zamknij, poprzednie, następne), a czytnik ekranu je odczytywał.
   `visibility: hidden` wyjmuje je z kolejności fokusu i z drzewa dostępności,
   a animacja przezroczystości działa dalej. */
.lightbox { visibility: hidden; }
.lightbox.open { visibility: visible; }

/* Dekoracyjna siatka na gradiencie (sekcja o przyspieszonej realizacji na
   /umowa-dzierzawy). Wcześniej wpisana w atrybut style z cudzysłowami
   wewnątrz cudzysłowów — parser HTML rozbijał atrybut i przeglądarka pobierała
   uszkodzony adres (404 na /%EF%BF%BD). W arkuszu problem nie występuje. */
.jkt-siatka {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   13. STRONY PRAWNE I 404 — wpięcie w system
   Polityka prywatności, klauzula RODO i 404 stały poza serwisem: goły tekst
   na bieli, bez paska marki. Nie przebudowuję ich układu, dodaję tylko górną
   listwę w kolorze marki, żeby użytkownik wiedział, gdzie jest.
   ========================================================================== */
body.p-polityka-prywatnosci, body.p-klauzula-rodo { border-top: 4px solid var(--jkt-navy-800); }
body.p-polityka-prywatnosci .container,
body.p-klauzula-rodo .container { padding-top: 40px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
  padding: 9px 16px;
  background: var(--jkt-mist);
  border: 1px solid var(--jkt-line);
  border-radius: 999px;
  font-size: .875rem; font-weight: 600;
  color: var(--jkt-ink);
}
.back-link:hover { background: var(--jkt-blue-50); border-color: var(--jkt-blue-400); color: var(--jkt-blue-600); }

body.p-404 { background: var(--jkt-navy-900); }
body.p-404 main {
  background: var(--jkt-navy-800);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
body.p-404 h1 { color: var(--jkt-white); }
body.p-404 p { color: var(--jkt-on-dark-soft); }
body.p-404 a { background: var(--jkt-blue); }
body.p-404 a:hover { background: var(--jkt-blue-600); }

/* ==========================================================================
   14. STOPKA
   ========================================================================== */
.footer { background: var(--jkt-navy-900); }
.footer a { color: rgba(255,255,255,.74); }
.footer a:hover { color: var(--jkt-white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }

} /* koniec @layer remont */