/* ============================================================
   Portal wynajmijMINI.pl — design system (sesja P1)
   Tokeny spójne ze swiatmini.pl: czerń, biel, czerwony akcent MINI,
   Montserrat. Mobile-first. Bez Tailwinda/Bootstrapa (zasada projektu).
   ============================================================ */

:root {
  /* Kolory (1:1 ze swiatmini.pl i wizytówki) */
  --kolor-czern:        #000000;
  --kolor-ciemny:       #0a0a0a;
  --kolor-bialy:        #ffffff;
  --kolor-szary-jasny:  #f0f0f0;
  --kolor-szary:        #888888;
  --kolor-szary-ciemny: #333333;
  --kolor-akcent:       #ff0000;
  --kolor-akcent-hover: #cc0000;

  /* Powierzchnie i obrysy */
  --tlo-karty:          rgba(255, 255, 255, 0.03);
  --obrys:              rgba(255, 255, 255, 0.1);
  --obrys-hover:        rgba(255, 255, 255, 0.3);

  /* Typografia */
  --font:               'Montserrat', sans-serif;

  /* Rytm i kształty */
  --przejscie:          all 0.3s ease;
  --promien:            5px;
  --promien-duzy:       10px;
  --kontener:           1400px;
  --kontener-tekst:     900px;
  --naglowek-wys:       72px;
  --sekcja-pion:        clamp(64px, 10vw, 128px);
}

/* ── Baza ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kolor-bialy);
  background-color: var(--kolor-czern);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.menu-otwarte { overflow: hidden; }

main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--kolor-bialy); text-decoration: none; transition: var(--przejscie); }
a:hover { color: var(--kolor-akcent); }

/* Radio/checkbox — pułapka projektu: globalne szerokości psują kontrolki */
input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; }

::selection { background: var(--kolor-akcent); color: var(--kolor-bialy); }

/* ── Przyciski ── */
.przycisk {
  display: inline-block;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 34px;
  border-radius: var(--promien);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: var(--przejscie);
}
.przycisk-akcent {
  background: var(--kolor-akcent);
  color: var(--kolor-bialy);
}
.przycisk-akcent:hover {
  background: var(--kolor-akcent-hover);
  color: var(--kolor-bialy);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 0, 0, 0.3);
}
.przycisk-kontur {
  background: transparent;
  color: var(--kolor-bialy);
  border-color: rgba(255, 255, 255, 0.4);
}
.przycisk-kontur:hover {
  background: var(--kolor-bialy);
  color: var(--kolor-czern);
  border-color: var(--kolor-bialy);
  transform: translateY(-2px);
}

/* ── Nagłówek ── */
.naglowek {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.naglowek-przewiniety,
.strona-dokument .naglowek {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid var(--obrys);
}
.naglowek-srodek {
  max-width: var(--kontener);
  margin: 0 auto;
  padding: 0 20px;
  min-height: var(--naglowek-wys);
  display: flex;
  align-items: center;
  gap: 24px;
}
.strona-dokument main { padding-top: var(--naglowek-wys); }

.logo { display: flex; flex-direction: column; line-height: 1.15; }
.logo:hover { color: var(--kolor-bialy); }
.logo-tekst { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.logo-mini { color: var(--kolor-akcent); }
.logo-pod { font-size: 10.5px; color: var(--kolor-szary); font-weight: 300; letter-spacing: 0.04em; }

.nawigacja {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nawigacja a {
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kolor-szary-jasny);
  position: relative;
  padding: 6px 0;
}
.nawigacja a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--kolor-akcent);
  transition: right 0.25s ease;
}
.nawigacja a:hover { color: var(--kolor-bialy); }
.nawigacja a:hover::after { right: 0; }

.nawigacja-jezyk {
  border: 1px solid var(--obrys-hover);
  border-radius: var(--promien);
  padding: 5px 12px !important;
}
.nawigacja-jezyk::after { display: none; }
.nawigacja-jezyk:hover { border-color: var(--kolor-akcent); }

.naglowek-cta { padding: 11px 24px; font-size: 13px; }

/* Hamburger — widoczny tylko na wąskich ekranach */
.menu-przycisk {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-przycisk span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--kolor-bialy);
  border-radius: 2px;
  transition: var(--przejscie);
}
.menu-otwarte .menu-przycisk span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-otwarte .menu-przycisk span:nth-child(2) { opacity: 0; }
.menu-otwarte .menu-przycisk span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-tlo, .hero-tlo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.25) 100%);
}
.hero-tresc {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kontener);
  margin: 0 auto;
  padding: 0 20px clamp(72px, 12vh, 140px);
  animation: hero-wjazd 0.9s ease both;
}
@keyframes hero-wjazd {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero h1 {
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 .akcent { color: var(--kolor-akcent); }
.hero-podtytul {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 300;
  color: var(--kolor-szary-jasny);
  max-width: 52ch;
}
.hero-przyciski {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-strzalka {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  width: 26px;
  height: 26px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(255, 255, 255, 0.65);
  border-bottom: 2px solid rgba(255, 255, 255, 0.65);
  animation: strzalka-puls 2s ease-in-out infinite;
}
@keyframes strzalka-puls {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: 0.65; }
  50%      { transform: translateX(-50%) rotate(45deg) translate(6px, 6px); opacity: 1; }
}

/* ── Sekcje ── */
.sekcja { padding: var(--sekcja-pion) 0; }
.sekcja-ciemniejsza { background: var(--kolor-ciemny); }
.sekcja-srodek {
  max-width: var(--kontener);
  margin: 0 auto;
  padding: 0 20px;
}
.sekcja-naglowek { max-width: 640px; margin-bottom: clamp(36px, 6vw, 64px); }
.sekcja-naglowek h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.sekcja-naglowek h2 .akcent { color: var(--kolor-akcent); }
.sekcja-naglowek p {
  margin-top: 14px;
  color: var(--kolor-szary);
  font-size: 16.5px;
  font-weight: 300;
}

/* ── Filary ── */
.filary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.filar {
  position: relative;
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  transition: var(--przejscie);
}
.filar:hover {
  border-color: var(--kolor-akcent);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(255, 0, 0, 0.12);
}
.filar-numer {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 0, 0, 0.55);
  margin-bottom: 20px;
}
.filar h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.filar p {
  color: var(--kolor-szary);
  font-size: 15px;
  flex: 1;
}
.filar-cta {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kolor-akcent);
}
.filar-cta:hover { color: var(--kolor-bialy); }

/* ── Jak to działa ── */
.kroki {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: krok;
}
.krok { position: relative; padding-top: 8px; }
.krok-numer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kolor-akcent);
  color: var(--kolor-bialy);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.35);
}
/* linia łącząca kroki (tylko szerokie ekrany) */
.krok:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 33px;
  left: 76px;
  right: -10px;
  height: 1px;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), var(--obrys));
}
.krok h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.krok p { color: var(--kolor-szary); font-size: 15px; }

/* ── Dlaczego my ── */
.dlaczego {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.dlaczego-zdjecie img {
  border-radius: var(--promien-duzy);
  border: 1px solid var(--obrys);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.dlaczego-tresc .sekcja-naglowek { margin-bottom: 28px; }
.dlaczego-punkty { list-style: none; display: grid; gap: 20px; }
.dlaczego-punkty li {
  padding-left: 22px;
  border-left: 3px solid var(--kolor-akcent);
}
.dlaczego-punkty h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.dlaczego-punkty p { color: var(--kolor-szary); font-size: 14.5px; }

/* ── Pas CTA ── */
.pas-cta {
  position: relative;
  padding: clamp(84px, 14vw, 160px) 20px;
  text-align: center;
  overflow: hidden;
}
.pas-cta-tlo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.pas-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
}
.pas-cta-tresc { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.pas-cta-tresc h2 {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.pas-cta-tresc p {
  margin: 14px 0 30px;
  color: var(--kolor-szary-jasny);
  font-size: 16.5px;
  font-weight: 300;
}

/* ── Stopka ── */
.stopka {
  background: var(--kolor-ciemny);
  border-top: 1px solid var(--obrys);
  padding: clamp(44px, 7vw, 72px) 0 30px;
  color: var(--kolor-szary);
  font-size: 14px;
}
.stopka-srodek { max-width: var(--kontener); margin: 0 auto; padding: 0 20px; }
.stopka-kolumny {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 40px;
}
.stopka-marka .logo-tekst { font-size: 19px; }
.stopka-marka p { margin: 12px 0 18px; font-size: 13.5px; line-height: 1.7; max-width: 34ch; }
.stopka-social { display: flex; gap: 14px; }
.stopka-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--obrys);
  border-radius: 50%;
  color: var(--kolor-szary-jasny);
}
.stopka-social a:hover {
  color: var(--kolor-bialy);
  border-color: var(--kolor-akcent);
  background: rgba(255, 0, 0, 0.08);
  transform: translateY(-2px);
}
.stopka-social svg { width: 18px; height: 18px; }
.stopka-blok h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kolor-bialy);
  margin-bottom: 16px;
}
.stopka-blok ul { list-style: none; display: grid; gap: 9px; }
.stopka-blok a { color: var(--kolor-szary); font-size: 13.5px; }
.stopka-blok a:hover { color: var(--kolor-akcent); }
.stopka-kontakt li a { color: var(--kolor-szary-jasny); font-weight: 600; }
.stopka-adres { margin-top: 14px; font-size: 13px; line-height: 1.7; }
.stopka-notka {
  font-size: 12.5px;
  font-style: italic;
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--obrys);
}
.stopka-firma {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  padding-top: 18px;
  border-top: 1px solid var(--obrys);
}
.stopka-notka + .stopka-firma { border-top: none; padding-top: 0; }
.stopka-copyright { margin-top: 10px; font-size: 12.5px; font-weight: 300; }

/* ── Pasek cookies ── */
/* ⚠️ Reguła autora zawsze wygrywa z przeglądarkowym `[hidden] { display:none }` —
   bez tego wpisu `display: flex` niżej sprawiał, że pasek NIE ZNIKAŁ po kliknięciu
   (P6a: „nie da się zaakceptować cookies"). Nie usuwać! */
.cookie-pasek[hidden] { display: none; }
.cookie-pasek {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  background: #111111;
  border-top: 1px solid var(--obrys-hover);
  padding: 12px 18px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
}
.cookie-pasek p { margin: 0; color: var(--kolor-szary-jasny); font-size: 13px; line-height: 1.5; }
.cookie-pasek a { color: var(--kolor-akcent); }
.cookie-pasek a:hover { text-decoration: underline; }
.cookie-pasek button {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--kolor-bialy);
  background: var(--kolor-akcent);
  border: none;
  border-radius: var(--promien);
  padding: 8px 22px;
  cursor: pointer;
  transition: var(--przejscie);
}
.cookie-pasek button:hover { background: var(--kolor-akcent-hover); }

/* Baner zgody (sesja P5): nagłówek, treść i dwa przyciski wyboru */
.cookie-pasek__tresc { max-width: 720px; }
.cookie-pasek__naglowek {
  display: block;
  color: var(--kolor-bialy);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.cookie-pasek__przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
/* „Tylko niezbędne" musi być równie łatwe do kliknięcia jak zgoda (RODO) —
   inny kolor, ale ten sam rozmiar i waga */
.cookie-pasek button.cookie-pasek__wtorny {
  background: transparent;
  border: 1px solid var(--obrys-hover);
  color: var(--kolor-szary-jasny);
}
.cookie-pasek button.cookie-pasek__wtorny:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--kolor-bialy);
}

/* „Ustawienia cookies" w stopce — wycofanie zgody jednym kliknięciem */
.stopka-zgoda { margin-top: 10px; text-align: center; }
.stopka-zgoda__przycisk {
  font-family: var(--font);
  font-size: 13px;
  color: var(--kolor-szary-jasny);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.stopka-zgoda__przycisk:hover { color: var(--kolor-bialy); }

@media (max-width: 600px) {
  .cookie-pasek { justify-content: flex-start; }
  .cookie-pasek__przyciski { width: 100%; }
  .cookie-pasek__przyciski button { flex: 1; }
}

/* ── Podstrony dokumentów (regulamin, polityki, cennik) ── */
.podstrona {
  width: 100%;
  max-width: var(--kontener-tekst);
  margin: 0 auto;
  padding: 36px 20px 64px;
}
.karta-tresc {
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  padding: 36px 40px 40px;
  animation: karta-wjazd 0.5s ease;
}
@keyframes karta-wjazd {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.karta-tresc h1 { font-size: 25px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.karta-tresc h1 .akcent { color: var(--kolor-akcent); }
.meta-dokumentu { color: var(--kolor-szary); font-size: 13px; margin-bottom: 22px; }
hr.separator {
  width: 60px;
  height: 2px;
  background: var(--kolor-akcent);
  margin: 0 0 26px;
  border: none;
}

.dokument { color: var(--kolor-szary-jasny); font-size: 14.5px; }
.dokument h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--kolor-bialy);
  margin: 30px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--kolor-akcent);
}
.dokument h3 { font-size: 16px; font-weight: 600; color: var(--kolor-bialy); margin: 22px 0 10px; }
.dokument p { margin: 0 0 9px; line-height: 1.65; }
.dokument ul, .dokument ol { margin: 0 0 12px 22px; line-height: 1.65; }
.dokument li { margin-bottom: 5px; }
.dokument strong { color: var(--kolor-bialy); }
.dokument a { color: var(--kolor-akcent); }
.dokument a:hover { color: var(--kolor-akcent-hover); text-decoration: underline; }
.dokument .ql-indent-1 { padding-left: 1.7em; }
.dokument .ql-indent-2 { padding-left: 3.4em; }
.dokument .ql-align-center { text-align: center; }

/* Tabele cennika */
.tabela-cennik {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 22px;
  font-size: 14.5px;
}
.tabela-cennik th, .tabela-cennik td {
  border: 1px solid var(--obrys);
  padding: 10px 14px;
  text-align: left;
}
.tabela-cennik th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--kolor-bialy);
  font-weight: 600;
}
.tabela-cennik td { color: var(--kolor-szary-jasny); }
.tabela-cennik td.cena { color: var(--kolor-bialy); font-weight: 600; white-space: nowrap; }
.tabela-przewijana { overflow-x: auto; }

/* ── Strony-zapowiedzi (beta) ── */
.karta-wkrotce { text-align: center; padding: 56px 40px; }
.karta-wkrotce h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; }
.wkrotce-nazwa {
  color: var(--kolor-szary);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.karta-wkrotce hr.separator { margin: 24px auto; }
.karta-wkrotce > p { color: var(--kolor-szary-jasny); max-width: 46ch; margin: 0 auto 8px; }
.wkrotce-kontakt {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 20px 0 30px;
}
.wkrotce-kontakt a { font-size: 17px; font-weight: 600; }
.wkrotce-kontakt a:hover { color: var(--kolor-akcent); }

/* ── Animacje odsłaniania (scroll reveal) ── */
.odslon {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.odslon-widoczny { opacity: 1; transform: none; }
/* delikatne opóźnienia kaskadowe w siatkach */
.filary .odslon:nth-child(2), .kroki .odslon:nth-child(2) { transition-delay: 0.12s; }
.filary .odslon:nth-child(3), .kroki .odslon:nth-child(3) { transition-delay: 0.24s; }
.dlaczego-punkty .odslon:nth-child(2) { transition-delay: 0.1s; }
.dlaczego-punkty .odslon:nth-child(3) { transition-delay: 0.2s; }
.dlaczego-punkty .odslon:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .odslon { opacity: 1; transform: none; transition: none; }
  .hero-tresc { animation: none; }
  .hero-strzalka { animation: none; }
}

/* ── Responsywność ── */
@media (max-width: 1100px) {
  .nawigacja { gap: 18px; }
  .filary, .kroki { gap: 16px; }
}

@media (max-width: 960px) {
  /* Menu mobilne: pełnoekranowa nakładka */
  .menu-przycisk { display: flex; margin-left: auto; }
  .naglowek-cta { display: none; }
  .nawigacja {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    margin-left: 0;
  }
  .menu-otwarte .nawigacja { opacity: 1; visibility: visible; }
  .nawigacja a {
    font-size: 20px;
    padding: 12px 0;
    color: var(--kolor-bialy);
  }
  .nawigacja-jezyk { margin-top: 18px; padding: 8px 22px !important; }

  .filary { grid-template-columns: 1fr; }
  .kroki { grid-template-columns: 1fr; gap: 30px; }
  .krok:not(:last-child)::after { display: none; }
  .dlaczego { grid-template-columns: 1fr; }
  .dlaczego-zdjecie img { aspect-ratio: 16 / 10; }
  .stopka-kolumny { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .hero-przyciski .przycisk { flex: 1 1 100%; }
  .stopka-kolumny { grid-template-columns: 1fr; gap: 28px; }
  .podstrona { padding: 22px 12px 40px; }
  .karta-tresc { padding: 24px 16px 28px; }
  .karta-tresc h1 { font-size: 21px; }
  .dokument h2 { font-size: 16.5px; }
  .karta-wkrotce { padding: 40px 18px; }
}

/* ══════════════════════════════════════════════════════════
   FLOTA (sesja P2) — siatka kart + podstrony aut
   ══════════════════════════════════════════════════════════ */

/* Strona /flota jako podstrona zaczyna się pod sticky headerem */
.strona-flota .podstrona { padding: 0; }
/* P6b: /flota i /kontakt dostają PEŁNY kontener (jak strona główna) — kafelki
   potrzebują miejsca na 4 w rzędzie; domyślne 900 px podstron zostaje dla
   stron tekstowych (regulamin, polityki). Formularz kontaktu wraca do 860 px
   regułą przy .kontakt-uklad. */
.strona-flota .podstrona, .strona-kontakt .podstrona { max-width: var(--kontener); }
.sekcja-flota { padding-top: calc(var(--naglowek-wys) + 40px); }
.sekcja-flota .sekcja-naglowek h1 {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}
.sekcja-flota .sekcja-naglowek h1 .akcent { color: var(--kolor-akcent); }

/* ── Siatka kart ── */
/* Flexbox zamiast grida (P6a, decyzja Michała 07.08.2026): cztery karty w rzędzie
   na szerokich ekranach, a niepełny dolny rząd (np. piąte auto) WYŚRODKOWANY —
   grid nie umie środkować niepełnego rzędu. Przy okazji karty są mniejsze.
   Ta sama siatka obsługuje stronę główną („Nasza flota") i podstronę /flota. */
.flota-siatka {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.auto-karta {
  /* P6b: SZTYWNA podstawa bez flex-grow — każda karta ma IDENTYCZNĄ szerokość
     niezależnie od liczby kart w rzędzie (grow rozdymał niepełny dolny rząd;
     do tego stary max-width 480px z P2 siedział na końcu bloku i po cichu
     wygrywał z nowszym limitem — nie dopisywać tu żadnego max-width!). */
  flex: 0 1 320px;
  display: flex;
  flex-direction: column;
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  overflow: hidden;
  transition: var(--przejscie);
}
.auto-karta:hover {
  border-color: var(--obrys-hover);
  transform: translateY(-4px);
}
.auto-karta-zdjecie {
  display: block;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
/* `contain` + oddech, nie `cover` (P6a): zdjęcia z konfiguratora mają przezroczyste
   tło, a backend przycina ich puste marginesy — `contain` pokazuje CAŁE auto
   (cover ucinałby zderzaki przy autach o innych proporcjach), a jednolite tło
   kafelka prześwituje przez przezroczystość, więc niczego nie widać po bokach. */
.auto-karta-zdjecie img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px 14px;
  transition: transform 0.5s ease;
}
.auto-karta:hover .auto-karta-zdjecie img { transform: scale(1.04); }
.auto-karta-brak {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--kolor-szary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auto-karta-tresc {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
/* min-height = 2 linie (P6b): długie nazwy (np. „MINI JCW Countryman ALL4")
   łamią się na dwie linie i rozciągają SWÓJ rząd — bez rezerwy karta samotna
   w dolnym rzędzie była niższa (445 vs 470 px) niż karty w pełnym rzędzie */
.auto-karta-tresc h3 { font-size: 19px; font-weight: 700; line-height: 1.3; min-height: 2.6em; }
.auto-karta-tresc h3 a:hover { color: var(--kolor-akcent); }
.auto-karta-dane {
  color: var(--kolor-szary);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.5;
}
.auto-karta-cena {
  margin-top: 12px;
  color: var(--kolor-szary-jasny);
  font-size: 14px;
}
.auto-karta-cena strong {
  color: var(--kolor-bialy);
  font-size: 24px;
  font-weight: 800;
  margin: 0 2px;
}
.auto-karta-akcje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.auto-karta-wiecej {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kolor-szary-jasny);
  white-space: nowrap;
}
.auto-karta-wiecej:hover { color: var(--kolor-akcent); }
.auto-karta-przycisk { padding: 11px 18px; font-size: 12.5px; }

.flota-notka {
  margin-top: 26px;
  color: var(--kolor-szary);
  font-size: 13px;
  text-align: center;
}
.flota-wszystkie { margin-top: 34px; text-align: center; }
.flota-pusta { text-align: center; color: var(--kolor-szary-jasny); padding: 30px 0 10px; }

/* kaskada odsłaniania kart jak w filarach */
.flota-siatka .odslon:nth-child(2) { transition-delay: 0.12s; }
.flota-siatka .odslon:nth-child(3) { transition-delay: 0.24s; }

/* ── Podstrona auta ── */
.auto-strona {
  max-width: var(--kontener);
  margin: 0 auto;
  padding: calc(var(--naglowek-wys) + 34px) 20px 70px;
}
.okruszki { margin-bottom: 22px; }
.okruszki a {
  color: var(--kolor-szary);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.okruszki a:hover { color: var(--kolor-akcent); }
/* Ścieżka okruszków na stronach treściowych (sesja P4): separator i strona bieżąca */
.okruszki-sep { margin: 0 8px; color: var(--kolor-szary-ciemny); }
.okruszki span[aria-current] {
  color: var(--kolor-szary-jasny);
  font-size: 13.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auto-uklad {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: start;
}
.auto-galeria-glowne {
  display: block;
  border-radius: var(--promien-duzy);
  overflow: hidden;
}
.auto-galeria-glowne img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.auto-galeria .auto-karta-zdjecie { border-radius: var(--promien-duzy); }
.auto-galeria-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.auto-galeria-siatka a {
  display: block;
  border-radius: var(--promien);
  overflow: hidden;
}
.auto-galeria-siatka img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.auto-galeria-siatka a:hover img { transform: scale(1.05); opacity: 0.85; }

.auto-info h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.2; }
.auto-cena { margin-top: 14px; color: var(--kolor-szary-jasny); font-size: 16px; }
.auto-cena strong {
  color: var(--kolor-bialy);
  font-size: 34px;
  font-weight: 800;
  margin: 0 3px;
}
.auto-notka { margin-top: 6px; color: var(--kolor-szary); font-size: 12.5px; }
.auto-cta { margin-top: 20px; }
.auto-info h2 {
  margin-top: 34px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kolor-szary-jasny);
}
.auto-specyfikacja { margin-top: 14px; border-top: 1px solid var(--obrys); }
.auto-specyfikacja > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--obrys);
}
.auto-specyfikacja dt { color: var(--kolor-szary); font-size: 13.5px; }
.auto-specyfikacja dd { color: var(--kolor-bialy); font-size: 13.5px; font-weight: 600; }

@media (max-width: 960px) {
  .auto-uklad { grid-template-columns: 1fr; gap: 26px; }
  /* .flota-siatka jest flexem (P6a) — sama zmniejsza liczbę kolumn, bez nadpisań */
}

@media (max-width: 560px) {
  .auto-strona { padding-left: 12px; padding-right: 12px; }
  .auto-karta-akcje { flex-wrap: wrap; }
  .auto-karta-przycisk { flex: 1 1 100%; }
  .auto-galeria-siatka { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   TREŚCI I KONTAKT (sesja P4) — O nas, FAQ, Kontakt
   ══════════════════════════════════════════════════════════ */

/* Podstrony treściowe startują pod sticky headerem — jak strona floty */
.strona-onas .podstrona,
.strona-faq .podstrona,
.strona-kontakt .podstrona { padding: 0; }
.sekcja-onas,
.sekcja-faq,
.sekcja-kontakt { padding-top: calc(var(--naglowek-wys) + 40px); }

.sekcja-srodek-waska { max-width: 860px; }

.sekcja-onas h1,
.sekcja-faq .sekcja-naglowek h1,
.sekcja-kontakt .sekcja-naglowek h1 {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 14px;
}
.sekcja-onas h1 .akcent,
.sekcja-faq .sekcja-naglowek h1 .akcent,
.sekcja-kontakt .sekcja-naglowek h1 .akcent { color: var(--kolor-akcent); }

/* Wspólny pas zachęty pod treścią */
.sekcja-cta-prosty { text-align: center; }
.sekcja-cta-prosty h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 800;
  margin-bottom: 10px;
}
.sekcja-cta-prosty p {
  color: var(--kolor-szary-jasny);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

/* ── O nas ── */
.onas-naglowek { max-width: 820px; margin-bottom: clamp(30px, 5vw, 52px); }
.onas-lead {
  color: var(--kolor-szary-jasny);
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.6;
}
.onas-uklad {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.onas-tresc p {
  color: var(--kolor-szary-jasny);
  line-height: 1.8;
  margin-bottom: 18px;
}
.onas-serwis { color: var(--kolor-szary); font-size: 14.5px; }
.onas-serwis a { color: var(--kolor-bialy); font-weight: 600; }
.onas-serwis a:hover { color: var(--kolor-akcent); }
.onas-zdjecie {
  border-radius: var(--promien-duzy);
  overflow: hidden;
  border: 1px solid var(--obrys);
}
.onas-zdjecie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.onas-liczby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--obrys);
}
.onas-liczba { text-align: center; }
.onas-liczba-wartosc {
  display: block;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--kolor-bialy);
}
.onas-liczba-etykieta {
  display: block;
  margin-top: 10px;
  color: var(--kolor-szary);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.onas-atuty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.onas-atuty li {
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  padding: 28px 26px;
  transition: var(--przejscie);
}
.onas-atuty li:hover { border-color: var(--obrys-hover); transform: translateY(-4px); }
.onas-atuty h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.onas-atuty p { color: var(--kolor-szary-jasny); line-height: 1.7; font-size: 15px; }

/* ── FAQ (akordeon na <details> — działa bez JS) ── */
.faq-lista { display: flex; flex-direction: column; gap: 12px; }
.faq-pozycja {
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-pozycja:hover { border-color: var(--obrys-hover); }
.faq-pozycja summary {
  padding: 20px 54px 20px 24px;
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
  line-height: 1.45;
}
.faq-pozycja summary::-webkit-details-marker { display: none; }
.faq-pozycja summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--kolor-akcent);
  border-bottom: 2px solid var(--kolor-akcent);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.faq-pozycja[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-pozycja summary:hover { color: var(--kolor-szary-jasny); }
.faq-odpowiedz { padding: 0 24px 22px; }
.faq-odpowiedz p { color: var(--kolor-szary-jasny); line-height: 1.75; font-size: 15px; }
.faq-notka {
  margin-top: 28px;
  color: var(--kolor-szary);
  font-size: 13.5px;
  line-height: 1.7;
}
.faq-notka a { color: var(--kolor-szary-jasny); text-decoration: underline; }
.faq-notka a:hover { color: var(--kolor-akcent); }

/* ── Kontakt: kafle z danymi ── */
/* Flexbox zamiast grida (P6a, decyzja Michała 07.08.2026): cztery kafelki mają
   stać W JEDNYM rzędzie na szerokich ekranach, a gdy rząd się łamie, niepełny
   dolny MA BYĆ wyśrodkowany — grid nie umie środkować niepełnego rzędu. */
.kontakt-kafle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.kontakt-kafel {
  /* P6b: sztywna podstawa bez flex-grow = cztery IDENTYCZNE kafle w jednym
     rzędzie na pełnym kontenerze (4×305 + 3×20 = 1280 ≤ 1360, wchodzi też na
     laptopy 1366 px); węższe okno → 3+1 z wyśrodkowanym czwartym */
  flex: 0 1 305px;
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
  padding: 26px 24px;
  transition: var(--przejscie);
}
.kontakt-kafel:hover { border-color: var(--obrys-hover); transform: translateY(-4px); }
.kontakt-kafel h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kolor-szary);
  margin-bottom: 14px;
}
.kontakt-adres, .kontakt-dane { font-size: 17px; font-weight: 600; line-height: 1.5; }
/* P6b (decyzja Michała): adres e-mail MNIEJSZĄ czcionką, żeby zmieścił się
   w JEDNEJ linii kafla 305 px — nie łamiemy go do drugiego wiersza.
   Telefon i adres zostają na 17 px. `anywhere` to bezpiecznik na wąskie ekrany. */
.kontakt-dane[data-kontakt="email"] { font-size: 15.5px; }
.kontakt-dane { overflow-wrap: anywhere; }
.kontakt-dane a { color: var(--kolor-bialy); }
.kontakt-dane a:hover { color: var(--kolor-akcent); }
.kontakt-dopisek { margin-top: 10px; color: var(--kolor-szary); font-size: 13px; line-height: 1.6; }
.kontakt-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kolor-akcent);
}
.kontakt-link:hover { color: var(--kolor-akcent-hover); }
/* Dwie linie na wpis (P6a, decyzja Michała 07.08.2026): dni na górze, godziny
   pogrubione pod spodem — w wąskim kafelku układ „dni po lewej, godziny po
   prawej" łamał frazy w połowie („Poniedziałek –" / „Piątek") i wyglądał źle. */
.kontakt-godziny { display: flex; flex-direction: column; gap: 12px; }
.kontakt-godziny li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  color: var(--kolor-szary-jasny);
}
.kontakt-godziny strong { color: var(--kolor-bialy); font-weight: 600; font-size: 16px; }
.kontakt-noscript { margin-top: 18px; color: var(--kolor-szary); font-size: 13.5px; }

/* ── Kontakt: formularz + bok ── */
.kontakt-uklad {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  /* P6b: strona /kontakt ma od teraz pełny kontener (dla kafli), ale formularz
     z mapą zostaje w wygodnej szerokości tekstowej, wyśrodkowany */
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.kontakt-formularz h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: 10px; }
.kontakt-formularz > p { color: var(--kolor-szary-jasny); line-height: 1.7; margin-bottom: 26px; }
.kontakt-formularz form { display: flex; flex-direction: column; gap: 18px; }
.kontakt-formularz label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kolor-szary);
}
.kontakt-formularz .wymagane { color: var(--kolor-akcent); }
.kontakt-formularz input,
.kontakt-formularz textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  color: var(--kolor-bialy);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.kontakt-formularz textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.kontakt-formularz input::placeholder,
.kontakt-formularz textarea::placeholder { color: rgba(255, 255, 255, 0.28); }
.kontakt-formularz input:focus,
.kontakt-formularz textarea:focus {
  outline: none;
  border-color: var(--kolor-akcent);
  background: rgba(255, 255, 255, 0.06);
}
/* Pułapka na boty — niewidoczna dla człowieka, ale obecna w drzewie strony */
.pole-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formularz-wymagane, .formularz-rodo {
  color: var(--kolor-szary);
  font-size: 12.5px;
  line-height: 1.6;
}
.formularz-rodo a { color: var(--kolor-szary-jasny); text-decoration: underline; }
.formularz-rodo a:hover { color: var(--kolor-akcent); }
.formularz-komunikat {
  padding: 13px 16px;
  border-radius: var(--promien);
  font-size: 14.5px;
  line-height: 1.6;
  border: 1px solid var(--obrys);
}
.formularz-komunikat-ok {
  border-color: rgba(80, 200, 120, 0.5);
  background: rgba(80, 200, 120, 0.1);
  color: #a9e8c0;
}
.formularz-komunikat-blad {
  border-color: rgba(255, 0, 0, 0.45);
  background: rgba(255, 0, 0, 0.08);
  color: #ffb3b3;
}
.kontakt-formularz button { align-self: flex-start; }
.kontakt-formularz button:disabled { opacity: 0.6; cursor: default; transform: none; }

.kontakt-bok { display: flex; flex-direction: column; gap: 26px; }
.kontakt-zdjecie {
  border-radius: var(--promien-duzy);
  overflow: hidden;
  border: 1px solid var(--obrys);
}
.kontakt-zdjecie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kontakt-social h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kolor-szary);
  margin-bottom: 14px;
}

/* ── Kontakt: dojazd i mapa ── */
.kontakt-dojazd {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.kontakt-dojazd li {
  border-left: 2px solid var(--kolor-akcent);
  padding: 4px 0 4px 20px;
}
.kontakt-dojazd h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.kontakt-dojazd p { color: var(--kolor-szary-jasny); line-height: 1.7; font-size: 14.5px; }

.kontakt-mapa {
  margin-top: clamp(32px, 5vw, 52px);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  background: var(--tlo-karty);
  border: 1px solid var(--obrys);
  border-radius: var(--promien-duzy);
}
.kontakt-mapa h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.kontakt-mapa p {
  color: var(--kolor-szary);
  font-size: 14px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 20px;
}
.kontakt-mapa-wczytana { padding: 0; overflow: hidden; }
.kontakt-mapa-wczytana h3, .kontakt-mapa-wczytana p { display: none; }
.kontakt-mapa iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 45vw, 480px);
  border: 0;
}

@media (max-width: 960px) {
  .onas-uklad, .kontakt-uklad { grid-template-columns: 1fr; }
  .onas-zdjecie { order: -1; }
}

@media (max-width: 560px) {
  .faq-pozycja summary { padding: 17px 46px 17px 18px; font-size: 15.5px; }
  .faq-odpowiedz { padding: 0 18px 18px; }
  .kontakt-kafel, .onas-atuty li { padding: 22px 20px; }
  .kontakt-formularz button { align-self: stretch; width: 100%; }
}