/* ============================================================
   BSM Sp. z o.o. — bsm-gastro.pl
   /assets/style.css — system designu, plik wspólny dla całego serwisu
   Etap 1. Bez frameworków, bez bundlera, bez zależności zewnętrznych.
   Kierunek: nowoczesny techniczny („niemiecki industrial").
   Sygnatura wizualna: „tabliczka znamionowa" — dane liczbowe w DM Mono,
   w ramkach z narożnymi znacznikami, jak tabliczki na urządzeniach ze stali.
   ============================================================ */

/* ---------- 1. FONTY (lokalne, z preload w <head>) ----------
   [DO UZUPEŁNIENIA: pliki .woff2 w /assets/fonts/ — DM Sans 400/500/700,
   DM Mono 400/500. Do pobrania z Google Fonts i hostowania lokalnie
   (CWV + RODO). Do czasu wgrania działa stos systemowy z fallbacku.] */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- 2. ZMIENNE ---------- */
:root {
  /* Paleta — [DO WERYFIKACJI: HEX z pliku logo; jeśli inne, wygrywa logo] */
  --granat: #1F3A5F;        /* baza marki */
  --granat-ciemny: #16293F; /* tekst główny, tła ciemnych sekcji */
  --granat-glebia: #0F1E30; /* stopka, najgłębszy plan */
  --pomarancz: #E8833A;     /* akcent, CTA, stany alarmowe */
  --pomarancz-ciemny: #C9682A;
  --pomarancz-tekst: #A85517;  /* pomarańcz TEKSTOWY na jasnych tłach — 5.28:1 na bieli, 4.79:1 na stali */
  --pomarancz-jasny: #F09A5E;  /* pomarańcz TEKSTOWY na granatach — 5.19:1 na granacie */
  --stal: #F2F4F6;          /* tło jasnych sekcji, „szczotkowana stal" */
  --papier: #FFFFFF;
  --szary: #55677A;         /* tekst pomocniczy */
  --linia: #D6DDE4;         /* hairline na jasnym */
  --linia-ciemna: #33506F;  /* hairline na granacie */
  --ok: #2E7D52;
  --blad: #B3402A;

  /* Typografia */
  --f-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Skala typograficzna — 7 kroków, płynna */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);  /* etykiety mono */
  --t-s:    clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  --t-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --t-m:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-l:    clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --t-xl:   clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --t-xxl:  clamp(2.25rem, 1.6rem + 3.4vw, 4.25rem);      /* H1 hero */

  /* Odstępy — baza 8 px */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;   --s-8: 8rem;

  /* Promienie i cienie — oszczędnie, po 2 warianty */
  --r-s: 4px; --r-m: 10px;
  --cien-1: 0 1px 3px rgba(15, 30, 48, .10);
  --cien-2: 0 12px 32px rgba(15, 30, 48, .14);

  --szer: 74rem;           /* max szerokość treści */
  --pasek-awaria-h: 3.25rem;
}

/* ---------- 3. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--granat-ciemny);
  background: var(--papier);
  padding-bottom: var(--pasek-awaria-h); /* miejsce na sticky pasek mobilny */
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; background: var(--stal); } /* brak pliku nie łamie layoutu */
input, button, select, textarea { font: inherit; color: inherit; }
a { color: var(--granat); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pomarancz-ciemny); }
ul[class], ol[class] { list-style: none; padding: 0; }
:focus-visible {
  outline: 3px solid var(--pomarancz);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

@media (min-width: 64rem) {
  body { padding-bottom: 0; } /* pasek awaryjny tylko mobile */
}

/* ---------- 4. TYPOGRAFIA ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.015em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); line-height: 1.3; }
.mono, .liczba { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tekst-pom { color: var(--szary); }
.max-tekst { max-width: 42rem; }

/* Etykieta techniczna nad sekcją: mono + hairline */
.etykieta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pomarancz-tekst);
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.etykieta::after { content: ""; flex: 1; height: 1px; background: var(--linia); }
.sekcja--ciemna .etykieta { color: var(--pomarancz-jasny); }
.sekcja--ciemna .etykieta::after { background: var(--linia-ciemna); }

/* ---------- 5. SIATKA I SEKCJE ---------- */
.zawijka { width: min(var(--szer), 100% - 2.5rem); margin-inline: auto; }
.sekcja { padding-block: var(--s-7); }
.sekcja--ciasna { padding-block: var(--s-6); }
.sekcja--stal { background: var(--stal); }
.sekcja--ciemna { background: var(--granat-ciemny); color: #E8EDF3; }
.sekcja--ciemna h2, .sekcja--ciemna h3, .sekcja--ciemna h4 { color: #fff; }
.sekcja--ciemna a { color: #fff; }
.sekcja--ciemna .tekst-pom { color: #A9B8C8; }

.siatka { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) {
  .siatka--2 { grid-template-columns: repeat(2, 1fr); }
  .siatka--3 { grid-template-columns: repeat(3, 1fr); }
  .siatka--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .siatka--4 { grid-template-columns: repeat(4, 1fr); }
  .siatka--gl { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--s-6); }
}

/* ---------- 6. PRZYCISKI (primary / secondary / alarm) ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-s);
  border: 1.5px solid transparent;
  font-weight: 700; font-size: var(--t-base);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.przycisk:hover { transform: translateY(-1px); box-shadow: var(--cien-1); }
.przycisk:active { transform: translateY(0); }
.przycisk .ikona { width: 1.1em; height: 1.1em; }

.przycisk--primary { background: var(--granat); color: #fff; }
.przycisk--primary:hover { background: var(--granat-ciemny); color: #fff; }
.przycisk--secondary { background: transparent; color: var(--granat); border-color: var(--granat); }
.przycisk--secondary:hover { background: rgba(31, 58, 95, .06); color: var(--granat); }
.sekcja--ciemna .przycisk--secondary { color: #fff; border-color: #fff; }
.sekcja--ciemna .przycisk--secondary:hover { background: rgba(255,255,255,.08); }
.przycisk--alarm { background: var(--pomarancz); color: var(--granat-glebia); }
.przycisk--alarm:hover { background: var(--granat-glebia); color: #fff; }

/* ---------- 7. TABLICZKA ZNAMIONOWA (sygnatura serwisu) ----------
   Ramka z narożnymi znacznikami + dane w DM Mono. Używana dla liczb,
   czasów reakcji, stref dojazdu, wyniku kalkulatora. */
.tabliczka {
  position: relative;
  border: 1px solid var(--linia);
  background: var(--papier);
  padding: var(--s-3);
}
.tabliczka::before, .tabliczka::after,
.tabliczka > .narozniki::before, .tabliczka > .narozniki::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--pomarancz); border-style: solid;
}
.tabliczka::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.tabliczka::after { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.tabliczka > .narozniki::before { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.tabliczka > .narozniki::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.sekcja--ciemna .tabliczka { background: var(--granat-glebia); border-color: var(--linia-ciemna); }

.tabliczka__liczba {
  font-family: var(--f-mono); font-weight: 500;
  font-size: var(--t-xl); line-height: 1; color: var(--granat);
  font-variant-numeric: tabular-nums;
}
.sekcja--ciemna .tabliczka__liczba, .pasek-liczb .tabliczka__liczba { color: #fff; }
.tabliczka__opis {
  font-size: var(--t-s); color: var(--szary);
  margin-top: var(--s-1); line-height: 1.4;
}
.sekcja--ciemna .tabliczka__opis, .pasek-liczb .tabliczka__opis { color: #A9B8C8; }
.tabliczka__dopisek { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--pomarancz-tekst); }
.sekcja--ciemna .tabliczka__dopisek, .karta--ciemna .tabliczka__dopisek,
.stopka .tabliczka__dopisek, .pasek-liczb .tabliczka__dopisek { color: var(--pomarancz-jasny); }

/* ---------- 8. KARTA ---------- */
.karta {
  background: var(--papier);
  border: 1px solid var(--linia);
  border-radius: var(--r-m);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.karta { text-decoration: none; color: inherit; }
.karta:hover { transform: translateY(-3px); box-shadow: var(--cien-2); border-color: var(--granat); }
.karta__ikona {
  width: 2.5rem; height: 2.5rem; color: var(--pomarancz-ciemny);
}
.karta__stopka {
  margin-top: auto; padding-top: var(--s-2);
  font-weight: 700; color: var(--granat);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.karta:hover .karta__stopka { color: var(--pomarancz-ciemny); }
.karta--ciemna { background: var(--granat-glebia); border-color: var(--linia-ciemna); color: #E8EDF3; }
.karta--ciemna:hover { border-color: var(--pomarancz); }
.karta--ciemna .karta__stopka { color: #fff; }

/* ---------- 9. TABELA PORÓWNAWCZA ---------- */
.tabela-zawijka { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela {
  width: 100%; border-collapse: collapse; font-size: var(--t-s);
  min-width: 34rem;
}
.tabela th, .tabela td {
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--linia);
  text-align: left; vertical-align: top;
}
.tabela thead th {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--szary);
  border-bottom: 2px solid var(--granat);
}
.tabela td.liczba, .tabela th.liczba { font-family: var(--f-mono); white-space: nowrap; }

/* ---------- 10. AKORDEON FAQ ---------- */
.akordeon { border-top: 1px solid var(--linia); }
.akordeon__pozycja { border-bottom: 1px solid var(--linia); }
.akordeon__naglowek {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: var(--s-3) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--t-m);
}
.akordeon__znak {
  flex: none; width: 1.5rem; height: 1.5rem; color: var(--pomarancz-ciemny);
  transition: transform .2s ease;
}
.akordeon__naglowek[aria-expanded="true"] .akordeon__znak { transform: rotate(45deg); }
.akordeon__tresc { overflow: hidden; }
.akordeon__tresc[hidden] { display: none; }
.akordeon__tresc > div { padding: 0 0 var(--s-3); color: var(--szary); max-width: 46rem; }

/* ---------- 11. FORMULARZE ---------- */
.formularz { display: grid; gap: var(--s-3); }
.pole { display: grid; gap: 0.4rem; }
.pole label { font-weight: 700; font-size: var(--t-s); }
.pole .wskazowka { font-size: var(--t-xs); color: var(--szary); }
.pole input, .pole select, .pole textarea {
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--linia);
  border-radius: var(--r-s);
  background: var(--papier);
  width: 100%;
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: 3px solid var(--pomarancz); outline-offset: 0; border-color: var(--granat);
}
.pole--blad input, .pole--blad select, .pole--blad textarea { border-color: var(--blad); }
.pole__blad { color: var(--blad); font-size: var(--t-xs); font-weight: 700; display: none; }
.pole--blad .pole__blad { display: block; }
.formularz__status { font-weight: 700; display: none; padding: var(--s-2); border-radius: var(--r-s); }
.formularz__status--ok { display: block; background: #E7F3EC; color: var(--ok); }
.formularz__status--blad { display: block; background: #F9E9E4; color: var(--blad); }
/* honeypot — niewidoczny dla ludzi, widoczny dla botów */
.pole--miod { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
/* zgoda RODO */
.pole--zgoda { grid-template-columns: auto 1fr; align-items: start; }
.pole--zgoda input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--pomarancz); }
.pole--zgoda label { font-weight: 400; font-size: var(--t-s); color: var(--szary); }
.pole--zgoda .pole__blad { grid-column: 1 / -1; }

/* ---------- 12. PASEK STATYSTYK ---------- */
.pasek-liczb { background: var(--granat-ciemny); color: #fff; padding-block: var(--s-5); }
.pasek-liczb .siatka { gap: var(--s-2); }
.pasek-liczb .tabliczka { background: transparent; border-color: var(--linia-ciemna); }

/* ---------- 13. BLOK CYTATU ---------- */
.cytat {
  border-left: 3px solid var(--pomarancz);
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  font-size: var(--t-m); line-height: 1.5;
}
.cytat footer { margin-top: var(--s-2); font-size: var(--t-s); color: var(--szary); font-family: var(--f-mono); }

/* ---------- 14. BREADCRUMB ---------- */
.okruszki { font-size: var(--t-s); padding-block: var(--s-2); color: var(--szary); }
.okruszki ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.okruszki li + li::before { content: "→"; margin-right: 0.4rem; color: var(--linia); }

/* ---------- 15. NAGŁÓWEK / NAWIGACJA ---------- */
.szkielet-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pomarancz); color: var(--granat-glebia);
  padding: 0.7rem 1.2rem; font-weight: 700; border-radius: 0 0 var(--r-s) 0;
}
.szkielet-link:focus { left: 0; }

.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: var(--granat-ciemny); color: #fff;
  border-bottom: 1px solid var(--linia-ciemna);
}
.naglowek__gorny {
  display: none;
  border-bottom: 1px solid var(--linia-ciemna);
  font-size: var(--t-s);
}
.naglowek__gorny .zawijka {
  display: flex; justify-content: flex-end; gap: var(--s-4); padding-block: 0.45rem;
}
.naglowek__gorny a { color: #C9D4E0; text-decoration: none; display: inline-flex; gap: 0.45rem; align-items: center; }
.naglowek__gorny a:hover { color: #fff; }
.naglowek__gorny .mono { color: #fff; }
@media (min-width: 64rem) { .naglowek__gorny { display: block; } }

.naglowek__pasek {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: 0.8rem;
}
.logo { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; color: #fff; }
.logo img { height: 2.6rem; width: auto; background: none; }
.logo__podpis { font-family: var(--f-mono); font-size: var(--t-xs); color: #A9B8C8; letter-spacing: .08em; display: none; }
@media (min-width: 48rem) { .logo__podpis { display: block; } }

.nawigacja { display: none; }
.nawigacja ul { display: flex; gap: var(--s-3); align-items: center; }
.nawigacja a { color: #E8EDF3; text-decoration: none; font-weight: 500; padding: 0.4rem 0.2rem; }
.nawigacja a:hover, .nawigacja a[aria-current="page"] { color: var(--pomarancz); }
.nawigacja .przycisk { padding: 0.55rem 1.1rem; font-size: var(--t-s); }
@media (min-width: 64rem) { .nawigacja { display: block; } }

.hamburger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1.5px solid var(--linia-ciemna); border-radius: var(--r-s);
  color: #fff; padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 700;
}
@media (min-width: 64rem) { .hamburger { display: none; } }

.nawigacja-mobilna {
  display: none;
  background: var(--granat-glebia);
  border-top: 1px solid var(--linia-ciemna);
}
.nawigacja-mobilna.otwarta { display: block; }
.nawigacja-mobilna ul { padding: var(--s-2) 0; }
.nawigacja-mobilna a {
  display: block; color: #E8EDF3; text-decoration: none; font-weight: 500;
  padding: 0.8rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.nawigacja-mobilna a:hover { color: var(--pomarancz); }
.nawigacja-mobilna .alarm-link { color: var(--pomarancz); font-weight: 700; }

/* ---------- 16. STICKY PASEK AWARYJNY (mobile) ---------- */
.pasek-awaria {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  height: var(--pasek-awaria-h);
  background: var(--pomarancz);
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--granat-glebia); text-decoration: none; font-weight: 700;
  font-family: var(--f-mono); font-size: var(--t-base);
  box-shadow: 0 -4px 16px rgba(15,30,48,.25);
}
.pasek-awaria:hover { color: var(--granat-glebia); background: #F09250; }
.pasek-awaria .ikona { width: 1.2em; height: 1.2em; }
@media (min-width: 64rem) { .pasek-awaria { display: none; } }

/* ---------- 17. HERO ---------- */
.hero { background: var(--granat-ciemny); color: #E8EDF3; overflow: clip; }
.hero .zawijka { display: grid; gap: var(--s-5); padding-block: var(--s-6); }
@media (min-width: 64rem) {
  .hero .zawijka { grid-template-columns: 1.15fr 0.85fr; align-items: center; padding-block: var(--s-7); }
}
.hero h1 { color: #fff; }
.hero h1 .akcent { color: var(--pomarancz); }
.hero__zajawka { font-size: var(--t-m); color: #C9D4E0; max-width: 34rem; margin-top: var(--s-3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero__serwis {
  margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-s); color: #A9B8C8;
}
.hero__serwis a { color: #fff; text-decoration: none; font-weight: 500; }
.hero__serwis a:hover { color: var(--pomarancz); }
.hero__obraz { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--cien-2); }
.hero__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 18. ANIMACJE WEJŚCIA ---------- */
.wjazd { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.wjazd.widoczne { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wjazd { opacity: 1; transform: none; transition: none; }
  .przycisk, .karta { transition: none; }
}

/* ---------- 19. MAPA STREF DOJAZDU ---------- */
.mapa-stref { width: 100%; height: auto; }
.mapa-stref text { font-family: var(--f-mono); }

/* ---------- 20. KALKULATOR ---------- */
.kalkulator { display: grid; gap: var(--s-4); }
@media (min-width: 64rem) { .kalkulator { grid-template-columns: 1fr 1fr; align-items: start; } }
.kalkulator__wynik .tabliczka__liczba { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.kalkulator__wiersz { display: flex; justify-content: space-between; gap: var(--s-2); padding-block: 0.55rem; border-bottom: 1px solid var(--linia-ciemna); font-size: var(--t-s); }
.kalkulator__wiersz .liczba { color: #fff; }

/* ---------- 21. LOGOTYPY / MARKI ---------- */
.marki { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.marki li {
  font-family: var(--f-mono); font-size: var(--t-s); font-weight: 500;
  border: 1px solid var(--linia); border-radius: var(--r-s);
  padding: 0.5rem 1rem; color: var(--granat);
  background: var(--papier);
}
.marki li .dopisek { color: var(--szary); font-size: var(--t-xs); display: block; font-family: var(--f-sans); }

/* ---------- 22. STOPKA ---------- */
.stopka { background: var(--granat-glebia); color: #A9B8C8; font-size: var(--t-s); }
.stopka a { color: #E8EDF3; }
.stopka a:hover { color: var(--pomarancz); }
.stopka__glowna { display: grid; gap: var(--s-5); padding-block: var(--s-6); }
@media (min-width: 64rem) { .stopka__glowna { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.stopka h4 { color: #fff; font-size: var(--t-base); margin-bottom: var(--s-2); }
.stopka ul li { margin-bottom: 0.5rem; }
.stopka .mono { color: #E8EDF3; }
.stopka__znaki { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-3); }
.stopka__znaki img { height: 3.2rem; width: auto; background: none; }
.stopka__prawna {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; font-size: var(--t-xs);
}

/* ---------- 23. POMOCNICZE ---------- */
.tag-do-uzupelnienia {
  display: inline-block; font-family: var(--f-mono); font-size: var(--t-xs);
  background: #FCF3EA; color: var(--pomarancz-ciemny);
  border: 1px dashed var(--pomarancz); border-radius: var(--r-s);
  padding: 0.15rem 0.5rem;
}
.lista-fajki li {
  padding-left: 1.9rem; position: relative; margin-bottom: var(--s-2);
}
.lista-fajki .ikona {
  position: absolute; left: 0; top: 0.25em; width: 1.2rem; height: 1.2rem; color: var(--pomarancz-ciemny);
}
.sekcja--ciemna .lista-fajki .ikona { color: var(--pomarancz); }
.naglowek-sekcji { margin-bottom: var(--s-5); }
.naglowek-sekcji p { margin-top: var(--s-2); }

/* ---------- 24. BRAMKA PIN ---------- */
html:not(.pin-ok) body > *:not(#pin-bramka) { display: none !important; }
html:not(.pin-ok) body { overflow: hidden; background: var(--granat-glebia); }
#pin-bramka {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: var(--s-4);
  background: var(--granat-glebia);
  box-sizing: border-box;
  overflow: auto;
}
.pin-bramka__karta {
  width: 100%;
  max-width: 22rem;
  min-width: 0;
  box-sizing: border-box;
  color: #E8EDF3;
  background: var(--granat-ciemny);
  border-color: var(--linia-ciemna);
}
.pin-bramka__karta h1 { font-size: var(--t-l); color: #fff; margin-bottom: var(--s-2); }
.pin-bramka__karta .etykieta {
  color: var(--pomarancz-jasny);
  min-width: 0;
  overflow: hidden;
}
.pin-bramka__karta .etykieta::after { background: var(--linia-ciemna); min-width: 0; }
.pin-bramka__karta .tekst-pom { color: #A9B8C8; margin-bottom: var(--s-4); }
.pin-bramka__formularz { display: grid; gap: var(--s-2); min-width: 0; }
.pin-bramka__formularz .pole { color: #E8EDF3; }
.pin-bramka__formularz input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--linia-ciemna);
  border-radius: var(--r-s);
  background: var(--granat-glebia);
  color: #fff;
  letter-spacing: 0.2em;
  font-family: var(--f-mono);
  font-size: var(--t-m);
  text-align: center;
}
.pin-bramka__formularz .przycisk { width: 100%; }
.pin-bramka__formularz input:focus {
  outline: 3px solid var(--pomarancz); outline-offset: 0; border-color: var(--pomarancz);
}
.pin-bramka__formularz .pole__blad { color: #F3B4A8; font-size: var(--t-xs); font-weight: 700; }
.pin-bramka__formularz .pole__blad[hidden] { display: none; }