@charset "UTF-8";
/* ==========================================================================
   FreshGarage — wariant „WIĄZKA"
   Dołączany PO neon.css: tokeny, typografia, nawigacja i przyciski przychodzą
   stamtąd. Ten arkusz opisuje wyłącznie scenę nocy.

   Zasada sceny: jedno źródło (belka w prawym górnym rogu), jedna wiązka.
   Rodzi się w lampie, przechodzi przez nagłówek hero (część fotonów PRZED
   literami — stąd głębia), odbija się od szklanego lustra przy lewym boku,
   płynie poziomo POD taflami usług, odbija się od drugiego lustra i gaśnie
   w pustce na dole. Tło jest czarne; świeci wyłącznie mgła nad nim.
   Typografia nie świeci nigdy.
   ========================================================================== */

/* ------------------------------------------------------------- 1. SCENA */
.scena {
  position: relative;
  background: var(--noc);
  overflow: clip;
}

.scena__tyl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.scena section {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------- 1a. NAGŁÓWEK */
/* Sam napis FRESHGARAGE zamiast logo z kropką (decyzja klienta):
   rozstrzelony mono jak grawer na tabliczce — subtelny, techniczny.
   Menu: mniejsze, spokojniejsze litery i podkreślenie-światło, które
   rozjaśnia się od środka jak włókno lampy, bez neonowej poświaty. */
.logo {
  font-family: var(--font-mono);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  gap: 0;
  color: var(--dzien);
}
.logo .logo__punkt {
  display: none;
}
.logo b {
  font-weight: 500;
  color: var(--hot-core);
}

.menu-desktop a {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  padding: 0.55rem 0;
}
.menu-desktop a::after {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--hot-core) 30%,
    #fff 50%,
    var(--hot-core) 70%,
    transparent);
  box-shadow: 0 0 8px 0 rgba(255, 150, 70, 0.45);
  transform: scaleX(0);
  transform-origin: center;
}

.top__tel {
  letter-spacing: 0.08em;
}

/* Przyklejony pasek dostaje zamiast twardej linii delikatny gradient —
   jaśniejszy przy prawej, od strony lampy. */
.top.przyklejony {
  box-shadow: none;
}
.top.przyklejony::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 170, 95, 0.28) 88%,
    rgba(255, 200, 140, 0.4));
}

/* ------------------------------------------------------------- 2. ŹRÓDŁO */
/* Warsztatowa belka LED w prawym górnym rogu — mocniejsza niż w poprzednim
   wariancie, bo teraz zasila całą stronę. Kąt ustawia skrypt: belka staje
   prostopadle do wiązki. */
.zrodlo {
  position: absolute;
  /* Belka wisi pod panelem menu, zsunięta w dół i do prawej krawędzi —
     doszlifowane z klientem na żywo. Skrócona o 1/3, a środek przesunięty
     wzdłuż osi belki tak, żeby jej DOLNY koniec został w tym samym miejscu,
     co przed skróceniem. */
  top: calc(var(--header-h) + 85px);
  right: clamp(6px, 1vw, 16px);
  width: clamp(74px, 8.7vw, 134px);
  height: 8px;
  z-index: 2;
  border-radius: 5px;
  transform: rotate(var(--kat, 64deg));
  background: linear-gradient(90deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 14%,
    #fff 50%,
    var(--hot-core) 86%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow:
    0 0 16px 4px rgba(255, 176, 96, 0.9),
    0 0 56px 16px rgba(255, 122, 40, 0.5),
    0 0 150px 60px rgba(255, 100, 20, 0.22);
}
.zrodlo::after {
  content: "";
  position: absolute;
  inset: -5px -9px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
}

/* --------------------------------------------------------------- 3. HERO */
/* Hero jest celowo niższe niż w wariancie neonowym: im bliżej krawędzi hero
   wisi lustro A, tym stromiej wiązka opada i tym wyżej wchodzi w napis. */
.hero-w {
  min-height: 84vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 3.5rem) 0 4.5rem;
}

/* UWAGA: bez z-index. Ten element nie może tworzyć kontekstu stosu, bo
   „światłem" (z-index 4) musi wyjść PONAD canvas z przednimi fotonami (z 3). */
.hero-w__in {
  position: relative;
  /* Blok stoi klasycznie przy lewej. Przecięcie napisu z wiązką załatwia
     geometria toru (niskie hero + lustro A tuż pod jego krawędzią),
     nie przesuwanie tekstu na środek — klient to odrzucił. */
}

/* Skala pośrednia między domyślnym .d1 z neon.css (za duży, ściana) a wersją
   zmniejszoną (za wąska, blok w 1/3 strony). Szeroki blok = wiązka z narożnika
   wchodzi w litery wysoko, przy „światłem". */
.scena .d1 {
  font-size: clamp(2.75rem, 8.5vw, 7.75rem);
}
.scena .d2 {
  font-size: clamp(2.1rem, 5.5vw, 4.75rem);
}

/* Szeroka kolumna: „Pod naszym" mieści się w jednym wierszu, blok sięga
   daleko w prawo i wiązka z narożnika wchodzi w napis już przy „światłem". */
.hero-w h1 {
  max-width: 13ch;
}
/* Trzy plany głębi w napisie: fotony za literami (canvas tyłu), białe litery,
   fotony przed literami (canvas przodu, z 3), a NAD wszystkim „światłem".
   Cień pod spodem to nie poświata, tylko cień rzucany na snop — słowo ma się
   czytać jako uniesione nad strumień. Typografia nadal nie świeci. */
.hero-w h1 em {
  color: var(--hot);
  font-style: normal;
  position: relative;
  z-index: 4;
  text-shadow: 3px 4px 10px rgba(4, 5, 8, 0.65);
}

.hero-w__lead {
  max-width: 54ch;
  margin-top: 2rem;
}

.hero-w__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Fotony przelatujące przed literami. Ponad treścią, ale przepuszcza kursor. */
.hero-w .scena__przod {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* -------------------------------------------------------------- 4. LUSTRA */
/* Dwa odłamki tego samego szkła, z którego są tafle. Kąt (dwusieczna odbicia)
   ustawia skrypt — lustro stoi dokładnie tak, żeby odbicie się zgadzało. */
.lustro {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 150px;
  border-radius: 8px;
  transform: translate(-50%, -50%) rotate(var(--kat, 0deg));
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.13));
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 26px 4px rgba(255, 130, 50, 0.3),
    0 0 90px 26px rgba(255, 110, 30, 0.13);
}
/* Tor obiega sekcję polecanych ramą (układ klienta):
   lampa pod menu → A (lewy bok, granica hero/polecane) → poziomo w prawo →
   B (prawy bok, ta sama granica) → pionowo w dół prawym bokiem →
   C (prawy bok, granica polecane/zaufanie) → poziomo w lewo → PRYZMAT
   (lewy bok), który rozszczepia wiązkę w gasnącą tęczę. */
.lustro--a {
  left: clamp(10px, 1.6vw, 32px);
  top: 0;
}
.lustro--b,
.lustro--c {
  right: clamp(10px, 1.6vw, 32px);
  left: auto;
  top: 0;
  transform: translate(50%, -50%) rotate(var(--kat, 0deg));
}

/* Pryzmat jest niewidzialny — to czysta kotwica geometrii dla skryptu
   (klient odrzucił trójkątny kształt). Samo rozszczepienie w tęczę rysuje
   canvas: wiązka po prostu łamie się w ciemności. */
.pryzmat {
  position: absolute;
  left: clamp(12px, 1.8vw, 36px);
  top: 0;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* --------------------------------------------------- 5. TAFLE — szkło */
/* Szkło w duchu dzisiejszego Apple: rozmyty prąd świetlny pod spodem,
   jaśniejsza krawędź od strony lampy (góra i prawo), smuga zwierciadlana.
   Zdjęcia LEŻĄ na szkle (cień pod nimi), nagłówki są WYRYTE w głębi. */
.tafla {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tafla,
  .lustro {
    background: rgba(17, 21, 28, 0.92);
  }
}

/* Smuga zwierciadlana — pod kątem światła lampy. */
.tafla::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.055) 44%,
    transparent 58%);
}

a.tafla:hover,
a.tafla:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 44px 74px -24px rgba(0, 0, 0, 0.75);
}

.tafla__foto {
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 16px 30px -10px rgba(0, 0, 0, 0.75),
    0 3px 8px rgba(0, 0, 0, 0.5);
}
.tafla__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.38) contrast(1.18) brightness(0.68);
  transition: filter 0.5s var(--ease);
}
a.tafla:hover .tafla__foto img {
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.85) contrast(1.18) brightness(0.78);
}

/* Grafiki „malowane na szkle" (seria z Gemini, prompty §3b) niosą
   paletę same — filtr duotone zostaje wyłączony, a rowek zdjęcia
   znika: malunek MA się zlewać z taflą, nie leżeć w niej. */
.tafla__foto--malowane {
  box-shadow: none;
}
/* Rowek kafli usług siedzi na ::after — dla malunków też znika. */
.tafla--usluga .tafla__foto--malowane::after {
  display: none;
}
/* Malunki w usługach są W KOLORZE na stałe (decyzja klienta) —
   selektor musi przebić mono-filtr sekcji z 8a, stąd prefiks. */
.uslugi-w .tafla--usluga .tafla__foto--malowane img,
a.tafla--usluga:hover .tafla__foto--malowane img {
  filter: none;
}
.tafla__foto--malowane img,
a.tafla:hover .tafla__foto--malowane img {
  filter: none;
}

.tafla__gora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.tafla__cena {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--hot-core);
  white-space: nowrap;
}

/* Napis wyryty w głębi szkła: przygaszone wypełnienie, dolna-lewa krawędź
   rowka łapie światło, górna-prawa jest w cieniu (lampa świeci z góry z prawej). */
.ryte {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  color: rgba(233, 238, 246, 0.62);
  text-shadow:
    -1px 1px 0 rgba(255, 255, 255, 0.13),
    1px -1px 1px rgba(0, 0, 0, 0.9);
}

.tafla p {
  color: #aab3bf;
  font-size: 0.95rem;
  line-height: 1.55;
}

.tafla .strzalka {
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Plakietki — JEDNA forma dla wszystkich (decyzja klienta, „Promocja"
   nie jest inna): pole plakietki jest WGŁĘBIENIEM wyszlifowanym
   w szkle tafli — dno cofnięte w głąb (cień od górnej krawędzi,
   dolny rant łapie światło), a sam napis zostaje na wysokości
   powierzchni: bursztynowy, z cieniem rzucanym na dno wgłębienia. */
.plakietka {
  border-radius: 5px;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.38),
    rgba(10, 12, 16, 0.18) 55%,
    rgba(255, 255, 255, 0.045));
  color: var(--hot-core);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.65),
    inset 2px 0 4px -2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.85);
}
/* .plakietka--cichy z neon.css przegrywa kaskadą (ten arkusz jest
   później) — modyfikator zostaje w HTML, ale wygląd jest jeden. */

/* ------------------------------------------------------- 6. POLECANE */
.polecane {
  padding: calc(var(--sekcja) * 0.8) 0 var(--sekcja);
}

.polecane__siatka {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .polecane__siatka {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .polecane__siatka {
    grid-template-columns: repeat(5, 1fr);
  }
  .tafla--duza {
    grid-column: span 2;
  }
}

.tafla--duza .ryte {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
}
.tafla--duza .tafla__foto img {
  aspect-ratio: 21 / 9;
}

/* ------------------------------------------------------- 7. ZAUFANIE */
.zaufanie-w {
  padding: 0 0 var(--sekcja);
}

.zaufanie-w__siatka {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 3rem;
}
@media (min-width: 760px) {
  .zaufanie-w__siatka {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .zaufanie-w__siatka {
    grid-template-columns: 1.05fr 1fr 1fr 1fr;
  }
}

.tafla--ocena {
  gap: 0.5rem;
}
/* Prefiks .tafla--ocena jest konieczny: .tafla p ma wyższą specyficzność
   i bez niego zjada rozmiar liczby oraz kolor gwiazdek. */
.tafla--ocena .ocena__liczba {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 80;
  font-weight: 800;
  font-size: clamp(4rem, 5.5vw, 5.5rem);
  line-height: 0.9;
  color: var(--dzien);
}
.tafla--ocena .ocena__liczba small {
  font-size: 0.32em;
  font-weight: 600;
  color: var(--mgla);
}
.tafla--ocena .gwiazdki-w {
  color: var(--hot);
  letter-spacing: 0.18em;
  font-size: 1.15rem;
}
.tafla--opinia blockquote {
  color: #c3cad4;
  font-size: 0.95rem;
  line-height: 1.6;
}
.tafla--opinia figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--mgla);
}
.tafla--opinia figcaption [aria-label] {
  color: var(--hot);
  letter-spacing: 0.12em;
}

.zaufanie-w__fakty {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--mgla);
}

/* --------------------------------------------------------- 8. PUSTKA */
/* Tu wiązka dolatuje do lewego boku i gaśnie. Celowo nic tu nie ma —
   pustka jest częścią kompozycji, jak biel w wariancie noc → dzień. */
.pustka {
  height: 9vh;
}

/* ------------------------------------------------- 8a. USŁUGI + REFLEKTOR */
/* Drugi rozdział światła. Skrypt ustawia --jasnosc (0–1) z postępu scrolla;
   samą łunę w mgle rysuje canvas — tu tylko fizyczne źródło (soczewka)
   i reakcja szkła na rosnące światło. Bez JS --jasnosc zostaje 0 i sekcja
   stoi w mroku jak pozostałe. */
.uslugi-w {
  --jasnosc: 0;
  position: relative;
  padding: calc(var(--sekcja) * 0.3) 0 var(--sekcja);
}

/* Soczewka reflektora: mały okrągły punkt głęboko we mgle, na osi sekcji.
   Rozjaśnia się razem ze snopem. Reszta blasku należy do canvasu. */
.reflektor {
  position: absolute;
  /* W pasie mroku NAD nagłówkiem — punkt ma majaczyć w czarnej przerwie
     między sekcjami, nie wisieć na tekście. */
  top: -2.75rem;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0%,
    var(--hot-core) 34%,
    rgba(255, 150, 60, 0.55) 62%,
    rgba(255, 120, 40, 0) 100%);
  box-shadow:
    0 0 18px 6px rgba(255, 180, 100, 0.75),
    0 0 60px 22px rgba(255, 130, 45, 0.4),
    0 0 160px 70px rgba(255, 105, 25, 0.16);
  opacity: calc(0.3 + var(--jasnosc) * 0.7);
}
.reflektor::after {
  /* Obudowa lampy — ciemny pierścień, żeby punkt nie wisiał w próżni. */
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
}

.uslugi-w__siatka {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 3rem;
  grid-template-columns: 1fr 1fr;
}
/* DZIEWIĘĆ kafli po TRZY w rzędzie (decyzja klienta) — kwadrat 3×3 na
   każdej szerokości od 900 px w górę, bez piątej kolumny i bez chowania
   kafli. Dziesiąty kafel „Zobacz wszystkie" zastąpił przycisk pod siatką. */
@media (min-width: 900px) {
  .uslugi-w__siatka {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Dwie kolumny (600–899) dzielą dziewiątkę na 4 + 4 + sierotę. Ostatni
   kafel bierze więc oba pola i spłaszcza zdjęcie do 16:9 — zamiast
   samotnej kolumny domyka rząd szeroką klamrą. */
@media (min-width: 600px) and (max-width: 899px) {
  .uslugi-w__siatka .tafla--usluga:nth-child(9) {
    grid-column: span 2;
  }
  .uslugi-w__siatka .tafla--usluga:nth-child(9) .tafla__foto img {
    aspect-ratio: 16 / 9;
  }
}

/* Szkło PODŚWIETLONE OD TYŁU: rozbłysk reflektora prześwieca przez tafle,
   które w pełnym świetle mlecznieją (ciepła biel), a typografia płynnie
   ciemnieje — jak napisy na podświetlanej szybie. Wszystkie kolory jadą
   na jednej osi --jasnosc; pierwsza deklaracja każdej pary to zapas dla
   przeglądarek bez color-mix (zostają w nocnych barwach). */
.tafla--usluga {
  padding: clamp(0.85rem, 1.4vw, 1.15rem);
  gap: 0.6rem;
  /* Mleczność robi PÓŁPRZEZROCZYSTA biel + smugi — świecąca mgła ma
     prześwitywać przez szkło, a nie ginąć pod farbą. */
  background-color: rgba(248, 240, 229, calc(var(--jasnosc) * 0.4));
  background-image: linear-gradient(125deg,
    rgba(255, 255, 255, calc(0.1 + var(--jasnosc) * 0.22)),
    rgba(255, 255, 255, calc(0.03 + var(--jasnosc) * 0.05)) 45%,
    rgba(255, 255, 255, calc(0.06 + var(--jasnosc) * 0.14)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(0.2 + var(--jasnosc) * 0.35)),
    inset -1px 0 0 rgba(255, 255, 255, calc(0.09 + var(--jasnosc) * 0.16)),
    inset 1px 0 0 rgba(255, 255, 255, calc(0.04 + var(--jasnosc) * 0.1)),
    inset 0 -1px 0 rgba(255, 255, 255, calc(0.03 + var(--jasnosc) * 0.08)),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
}
/* Smuga zwierciadlana wyraźnieje w świetle — to ona sprzedaje taflę. */
.tafla--usluga::before {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, calc(0.055 + var(--jasnosc) * 0.12)) 44%,
    transparent 58%);
}
/* Zdjęcie nie leży NA szkle (cień pod spodem znika) — jest W szkle,
   jak podświetlany od tyłu diapozytyw: wpuszczone w głąb, z cienką
   jasną krawędzią rowka. */
.tafla--usluga .tafla__foto {
  position: relative;
  box-shadow: none;
}
.tafla--usluga .tafla__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, calc(0.35 + var(--jasnosc) * 0.2)),
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.06 + var(--jasnosc) * 0.14));
}
.tafla--usluga .tafla__foto img {
  aspect-ratio: 4 / 3;
  /* W świetle zdjęcia lekko odzyskują jasność — na mlecznym szkle
     duotone przy 0.68 robił się błotnisty. */
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.38) contrast(1.18)
    brightness(calc(0.68 + var(--jasnosc) * 0.2));
}
/* ZDJĘCIA KAFLI (seria `kafel-*`, prompty §3f) — WŁASNY, LEKKI FILTR.
   Duotone z /uslugi jest liczony pod zwykłe, jasne zdjęcia z warsztatu:
   przy `brightness(0.68)` i `saturate(0.38)` te kadry gasną, bo są ciemne
   już u źródła (zmierzona średnia jasność 0,07–0,19) i cały bursztyn,
   o który prosiliśmy prompt, znika. Zamiast tego zostawiamy im własną
   paletę i tylko dociągamy kontrast — rowek i cień zdjęcia zostają, więc
   kafel dalej czyta się jak na /uslugi, a nie jak malunek na szkle. */
.tafla--usluga .tafla__foto--zdjecie img {
  /* BEZ contrast() — przy zdjęciu o średniej jasności 0,07 mnożnik 1,12
     wokół punktu 0,5 spycha cały kadr w czerń (zmierzone: 0,070 → 0,046).
     Kontrast te kadry mają z generatora, tu wystarczy poziom jasności. */
  filter: saturate(0.95)
    brightness(calc(var(--foto-j, 1) * (1 + var(--jasnosc) * 0.14)));
}
a.tafla--usluga:hover .tafla__foto--zdjecie img {
  filter: saturate(1.1)
    brightness(calc(var(--foto-j, 1) * (1.12 + var(--jasnosc) * 0.14)));
}

.tafla--usluga .ryte {
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  color: rgba(233, 238, 246, 0.62);
  color: color-mix(in srgb, rgba(24, 27, 33, 0.82) calc(var(--jasnosc) * 100%), rgba(233, 238, 246, 0.62));
}
.tafla--usluga p {
  font-size: 0.88rem;
  color: #aab3bf;
  color: color-mix(in srgb, #333b45 calc(var(--jasnosc) * 100%), #aab3bf);
}

.usluga-w__rzad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mgla);
  color: color-mix(in srgb, var(--grafit) calc(var(--jasnosc) * 100%), var(--mgla));
}
.usluga-w__rzad span:first-child {
  color: var(--hot-core);
  /* --zar to jedyny wariant pomarańczu czytelny na jasnym (5,6:1). */
  color: color-mix(in srgb, var(--zar) calc(var(--jasnosc) * 100%), var(--hot-core));
}

/* Nagłówek sekcji ciemnieje razem z taflami — stoi najbliżej reflektora,
   więc w pełnym rozbłysku biel by się rozmyła. */
.uslugi-w .naglowek {
  position: relative;
  z-index: 1;
}
.uslugi-w .naglowek .d2 {
  color: var(--dzien);
  color: color-mix(in srgb, var(--tekst) calc(var(--jasnosc) * 100%), var(--dzien));
}
.uslugi-w .naglowek .lead {
  color: color-mix(in srgb, #242b34 calc(var(--jasnosc) * 100%), var(--mgla));
}
/* Zamknięcie sekcji: zdanie o reszcie usług + JEDEN wyraźny przycisk
   (klient — zamiast dziesiątego kafla i cienkiej strzałki). Mleczna
   pomarańczowa szybka `.btn--hot` czyta się w OBU stanach sekcji:
   na czerni jest jedynym jasnym polem, a w pełnym rozbłysku trzyma
   nasycony pomarańcz z ciemnym napisem, więc nie ginie na mlecznym
   szkle kafli. Konturowy przycisk odpadał — ma jasny napis i na
   rozświetlonej sekcji stawał się biały na białym. */
.uslugi-w__stopka {
  margin-top: clamp(2.4rem, 3.4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* Zdanie niesie treść zdjętego kafla — wylicza dziewięć pozostałych
   usług, więc informacja nie znika razem z kaflem. */
.uslugi-w__reszta {
  max-width: 46rem;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(233, 238, 246, 0.55);
  color: color-mix(in srgb, rgba(24, 27, 33, 0.72) calc(var(--jasnosc) * 100%), rgba(233, 238, 246, 0.55));
}

/* DWIE KLASY w selektorze (0,2,0) — pułapka §3 pkt 12: `.btn--hot` stoi
   niżej w pliku i jego shorthand `background` zerował tu `background-color`
   przy równej specyficzności. */
.uslugi-w .uslugi-w__wszystkie {
  min-height: 60px;
  /* Padding prawy/pionowy jawnie, LEWY z tej samej formuły co reszta
     przycisków — inaczej znów rozjechałby się z listwą. */
  padding: 1.05rem 2.4rem;
  padding-left: calc(var(--listwa-x) + var(--listwa-w) + var(--listwa-oddech));
  font-size: 1.02rem;
  /* JEDYNE miejsce, gdzie primary stoi na ROZŚWIETLONYM tle. Od 5. iteracji
     przycisk jest ciemnym szkłem z białym napisem, więc w pełnym rozbłysku
     reflektora rozpłynąłby się w mlecznej sekcji. Wraz z --jasnosc
     dokładamy mu więc nieprzezroczysty, nocny spód: na czerni bez zmian,
     w rozbłysku ciemna szyba z rozżarzoną listwą na jasnym tle. */
  background-color: rgba(11, 13, 17, calc(var(--jasnosc) * 0.88));
}

/* ----------------------------------- OKRUCH WEWNĄTRZ NAGŁÓWKA (SEO) */
/* Nagłówek niesie DWIE warstwy: okruch z frazą lokalną (dla wyszukiwarek
   i modeli) oraz hasło (dla ludzi). Oba siedzą w tym samym <h1>/<h2>,
   bo wizualnie i tak są jednym blokiem tytułowym — dzięki temu fraza
   trafia do nagłówka, a struktura dokumentu zostaje uczciwa: to, co
   WYGLĄDA na nagłówek, NIM JEST (WCAG 1.3.1). Odrzucone: zamiana ról,
   czyli okruch jako <h2> i hasło jako <div> — hasło jest wielkim napisem
   w display foncie, więc jako zwykły div łamie 1.3.1, a mapa nagłówków
   dla czytników ekranu zmienia się w listę słów-kategorii.
   ROZMIARY FONTÓW SIĘ NIE ZMIENIAJĄ — okruch zeruje dziedziczoną skalę
   nagłówka i odtwarza własną. */
.tag--w-naglowku {
  display: block;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hot);
}
/* Hasło odtwarza interlinię nagłówka — bez tego dziedziczyłoby 1,5
   z okrucha po drodze przez <span>. */
.naglowek__haslo {
  display: block;
  line-height: inherit;
}
/* `.naglowek` to grid z gap 1,25 rem; po wciągnięciu okrucha do środka
   nagłówka odstęp robi już margines okrucha, więc gap dotyczy tylko
   pary nagłówek–lead. */

/* ---------------------------------------------- 8b. PROCES — półmrok */
/* Zejście z rozbłysku do czerni. Bazowe .proces/.krok przychodzą
   z neon.css (cienkie linie, obrysowane numery) i pasują do nocy —
   tu tylko rytm sekcji i rząd CTA wyceny. Resztkę światła nad sekcją
   dorysowuje canvas (gasnąca kałuża w swiatla()). */
.proces-w {
  padding: calc(var(--sekcja) * 0.55) 0 var(--sekcja);
}
.proces-w .proces {
  margin-top: 3rem;
}
.proces-w__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* --------------------------------------------- 8c. PAKIETY — lampa */
/* Czarny warsztat po wygaśnięciu reflektora. Bazowe .pakiet z neon.css
   jest dzienne (beton) — tu karty wracają do nocnego szkła tafli,
   a hierarchię robi ŚWIATŁO: mała lampa robocza nad pakietem środkowym
   (stożek rysuje canvas), boczne stoją w półcieniu. */
.pakiety-w {
  /* Migot lampy (0–1) ustawia skrypt — CSS liczy z niego jasność belki
     i światła odebranego przez kartę. Bez JS: pełna jasność. */
  --migot: 1;
  padding: calc(var(--sekcja) * 0.4) 0 var(--sekcja);
}
.pakiety-w .pakiety {
  margin-top: 3rem;
}
.pakiety-w .pakiet {
  position: relative;
  border-radius: 22px;
  color: inherit;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02) 45%,
    rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    inset 1px 0 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pakiety-w .pakiet {
    background: rgba(17, 21, 28, 0.92);
  }
}
.pakiety-w .pakiet ul {
  color: #9aa4b1;
}
.pakiety-w .pakiet__cena small {
  color: var(--mgla);
}
/* Pakiet pod lampą: nie inny kolor, tylko więcej światła — jaśniejsze
   szkło, mocniejsza górna krawędź łapiąca blask, czytelniejsza lista. */
.pakiety-w .pakiet--hot {
  /* Światło ODEBRANE od lampy skaluje się z --migot: ciepły gradient,
     rozgrzana górna krawędź i poświata nad kartą gasną razem z belką. */
  background: linear-gradient(180deg,
    rgba(255, 236, 214, calc(0.05 + 0.11 * var(--migot))),
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0.07));
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 188, calc(0.14 + 0.31 * var(--migot))),
    inset -1px 0 0 rgba(255, 255, 255, 0.1),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 -20px 60px -12px rgba(255, 140, 55, calc(0.3 * var(--migot))),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
}
.pakiety-w .pakiet--hot li {
  color: #c3cad4;
}

/* Lampa robocza nad polecanym pakietem — mała belka jak źródło wiązki,
   tylko cichsza. Stożek światła pod nią rysuje canvas z jej realnej
   pozycji. Przy układzie w kolumnie (mobile) lampa znika. */
.lampka {
  position: absolute;
  opacity: calc(0.12 + 0.88 * var(--migot, 1));
  top: -3.1rem;
  left: 50%;
  width: 64px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 18%,
    #fff 50%,
    var(--hot-core) 82%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow:
    0 0 12px 3px rgba(255, 176, 96, 0.8),
    0 0 40px 12px rgba(255, 122, 40, 0.4),
    0 0 110px 40px rgba(255, 100, 20, 0.16);
}
.lampka::after {
  content: "";
  position: absolute;
  inset: -4px -7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 60%);
}
@media (max-width: 899px) {
  .lampka {
    display: none;
  }
}

.pakiety-w__stopka {
  margin-top: 2.5rem;
}

/* ---------------------------------------------- 8d. PRZYCISKI PREMIUM */
/* Przyciski to FREZOWANA BLACHA z warsztatu, nie pastylki z app store:
   ostre pudełka ze ściętymi po przekątnej narożnikami (ten sam kąt,
   co bieg wiązki), gruba szeroka Archivo jak na tabliczce znamionowej.
   „Hot" jest z rozgrzanego metalu — żar siedzi W materiale (ciemny
   rdzeń przy dole, jaśniejsza góra), nie w poświacie wokół; jedyne
   światło na zewnątrz to wąska linia żaru przy dolnej krawędzi.
   „Kontur" to ciemne szkło z pionową listwą LED przy lewej krawędzi —
   miniaturą lampy z hero. Po obu przelatuje smuga zwierciadlana. */
.btn {
  /* Ścięte narożniki klient odrzucił — czysty, ostry prostokąt z ledwie
     złamanym kantem. */
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 86;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.055em;
  line-height: 1;
}
/* Smuga zwierciadlana. Spoczywa poza przyciskiem, przelatuje na hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.32) 49%,
    rgba(255, 255, 255, 0.06) 53%,
    transparent 62%);
  transform: translateX(-130%);
  transition: none;
}
.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(130%);
  transition: transform 0.7s var(--ease);
}

.btn--hot {
  /* 5. ITERACJA (klient: mleczna szybka „za krzykliwa, niepasująca").
     Wracamy do doktryny całej strony: hierarchię robi ŚWIATŁO, nie farba.
     Primary to TO SAMO ciemne szkło co `.btn--kontur`, tylko mocniej
     oświetlone — listwa LED przy lewej krawędzi świeci pełnią, ciepło
     rozlewa się w głąb szyby, a pod przyciskiem stoi cicha łuna.
     Różnica między primary a secondary to ilość światła, nie kolor.
     Odrzucone po drodze: ciepłe szkło podświetlone OD GÓRY — nad czernią
     półprzezroczysty pomarańcz brudzi się na brąz (znana pułapka). */
  opacity: 1;
  color: #fff;
  /* ODDECH PRZY LISTWIE. Wcięcie napisu liczone z pozycji i grubości
     listwy, nie wpisane ręcznie — inaczej rozjeżdża się wszędzie tam,
     gdzie ktoś nadpisze `padding` shorthandem (tak padł przycisk
     w nagłówku: `.top .btn` z neon.css zbijał padding do 1,2 rem
     i napis siadał 4 px za listwą). */
  --listwa-x: 11px;
  --listwa-w: 4px;
  --listwa-oddech: 25px;
  padding-left: calc(var(--listwa-x) + var(--listwa-w) + var(--listwa-oddech));
  background: linear-gradient(100deg,
    rgba(255, 150, 70, 0.26),
    rgba(255, 140, 60, 0.08) 44%,
    rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 185, 130, 0.45),
    inset 0 1px 0 rgba(255, 228, 200, 0.5),
    inset 16px 0 30px -14px rgba(255, 150, 70, 0.9),
    0 16px 40px -22px rgba(255, 140, 60, 0.6);
}
/* Listwa LED — ta sama forma co w konturze, ale grubsza (4 px zamiast 3),
   na pełnej jasności i z mocniejszą poświatą. */
.btn--hot::before {
  content: "";
  position: absolute;
  left: var(--listwa-x);
  top: var(--listwa-y, 8px);
  bottom: var(--listwa-y, 8px);
  width: var(--listwa-w);
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 24%,
    #fff6ec 50%,
    var(--hot-core) 76%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow: 0 0 18px 4px rgba(255, 160, 80, 0.7);
  transition: box-shadow 0.25s var(--ease);
}
.btn--hot:hover {
  background: linear-gradient(100deg,
    rgba(255, 162, 86, 0.34),
    rgba(255, 148, 68, 0.11) 44%,
    rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 152, 0.58),
    inset 0 1px 0 rgba(255, 238, 216, 0.6),
    inset 18px 0 34px -14px rgba(255, 150, 70, 1),
    0 20px 48px -22px rgba(255, 140, 60, 0.8);
}
.btn--hot:hover::before {
  box-shadow: 0 0 24px 6px rgba(255, 160, 80, 0.9);
}
.btn--hot:active {
  background: linear-gradient(100deg,
    rgba(255, 140, 60, 0.2),
    rgba(255, 130, 50, 0.06) 44%,
    rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 0 0 1px rgba(255, 175, 120, 0.4),
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 14px 0 26px -14px rgba(255, 150, 70, 0.7);
}
/* Smuga zwierciadlana jak w konturze — na ciemnym szkle biel 0,32
   z bazowego `.btn::after` przelatywała jak błysk lustra. */
.btn--hot::after {
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.16) 49%,
    rgba(255, 255, 255, 0.04) 53%,
    transparent 62%);
}

.btn--kontur {
  opacity: 1;
  color: var(--dzien);
  --listwa-x: 10px;
  --listwa-w: 3px;
  --listwa-oddech: 23.8px;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02) 45%,
    rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  padding-left: calc(var(--listwa-x) + var(--listwa-w) + var(--listwa-oddech));
}
/* Pionowa listwa LED przy lewej krawędzi — miniatura lampy z hero.
   Na hover rozżarza się i oświetla wnętrze przycisku od lewej. */
.btn--kontur::before {
  content: "";
  position: absolute;
  left: var(--listwa-x);
  top: var(--listwa-y, 12px);
  bottom: var(--listwa-y, 12px);
  width: var(--listwa-w);
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 30%,
    #ffe9d2 50%,
    var(--hot-core) 70%,
    rgba(255, 210, 168, 0) 100%);
  opacity: 0.55;
  box-shadow: 0 0 8px 1px rgba(255, 160, 80, 0.35);
  transition: opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--kontur:hover {
  color: var(--hot-core);
  background: linear-gradient(105deg,
    rgba(255, 170, 100, 0.16),
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(255, 170, 95, 0.45),
    inset 0 1px 0 rgba(255, 220, 180, 0.4);
}
.btn--kontur:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px 3px rgba(255, 160, 80, 0.6);
}
.btn--kontur:active {
  background: linear-gradient(105deg,
    rgba(255, 170, 100, 0.1),
    rgba(255, 255, 255, 0.01) 55%,
    rgba(255, 255, 255, 0.03));
}
.btn--kontur::after {
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 49%,
    rgba(255, 255, 255, 0.03) 53%,
    transparent 62%);
}

/* PRZYCISK W NAGŁÓWKU jest niski (44 px) i wąski, więc dziedziczone
   proporcje listwy dławiły napis. `.top .btn` z neon.css ustawia padding
   SHORTHANDEM, który zbija `padding-left` — stąd selektor z trzema
   klasami i jawne wcięcie obok zmiennych. Listwa też schodzi: cieńsza,
   bliżej krawędzi i krótsza w pionie, proporcjonalnie do wysokości. */
.top .btn--hot,
.top .btn--kontur {
  --listwa-x: 9px;
  --listwa-w: 3px;
  --listwa-oddech: 13px;
  --listwa-y: 11px;
  padding-left: calc(var(--listwa-x) + var(--listwa-w) + var(--listwa-oddech));
}

.btn:focus-visible {
  outline: 2px solid var(--hot-core);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn::after {
    display: none;
  }
  .btn--hot:hover,
  .btn--hot:active,
  .btn--kontur:hover,
  .btn--kontur:active {
    transform: none;
  }
}

/* --------------------------------------------- 8e. GALERIA — pasmo */
/* Poziome pasmo światła przepychające tafle (pomysł klienta).
   Domyślnie (bez JS i przy reduced-motion) pas jest zwykłą przewijaną
   galerią we flexie; klasa .anim na <html> przełącza tor w tryb
   absolutny, w którym pozycje taflom nadaje fizyka fotonów w wiazka.js.
   Nacisk fotonów na taflę niesie --nacisk (0–1): lewa krawędź szkła
   rozgrzewa się, im więcej fotonów się przykleiło. */
.galeria-w {
  padding: calc(var(--sekcja) * 0.15) 0 calc(var(--sekcja) * 0.3);
}
.galeria-w__tor {
  position: relative;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  padding: 1.5rem var(--gutter);
  -webkit-overflow-scrolling: touch;
}
.anim .galeria-w__tor {
  display: block;
  overflow: visible;
  height: clamp(400px, 44vw, 620px);
  padding: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.anim .galeria-w__tor.ciagnie {
  cursor: grabbing;
}
.anim .galeria-w__tafla {
  cursor: pointer;
}

/* Powiększenie po kliknięciu tafli. */
.galeria-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 5, 8, 0.88);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  cursor: zoom-out;
}
.galeria-lightbox__zamknij {
  position: absolute;
  top: clamp(0.9rem, 2.5vw, 1.8rem);
  right: clamp(0.9rem, 2.5vw, 1.8rem);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--dzien);
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 24px -10px rgba(0, 0, 0, 0.8);
  transition: color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.galeria-lightbox__zamknij:hover,
.galeria-lightbox__zamknij:focus-visible {
  color: var(--hot-core);
  box-shadow:
    inset 0 0 0 1px rgba(255, 170, 95, 0.55),
    inset 0 1px 0 rgba(255, 220, 180, 0.45),
    0 8px 24px -10px rgba(0, 0, 0, 0.8);
}
.galeria-lightbox__zamknij:focus-visible {
  outline: 2px solid var(--hot-core);
  outline-offset: 3px;
}

.galeria-lightbox img {
  max-width: min(92vw, 1280px);
  max-height: 86vh;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 60px 120px -40px rgba(0, 0, 0, 0.9),
    0 0 90px -30px rgba(255, 130, 45, 0.35);
}

.galeria-w__tafla {
  flex: none;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    /* Lewa krawędź: tu napierają fotony. */
    inset 2px 0 0 rgba(255, 170, 90, calc(var(--nacisk, 0) * 0.6)),
    inset 14px 0 26px -12px rgba(255, 150, 60, calc(var(--nacisk, 0) * 0.55)),
    0 30px 55px -22px rgba(0, 0, 0, 0.65);
  padding: 7px;
}
.anim .galeria-w__tafla {
  position: absolute;
  top: 50%;
  left: 0;
  will-change: transform;
}
.galeria-w__tafla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.38) contrast(1.18) brightness(0.7);
}

/* Trzy rozmiary tafli — większa ma większą bezwładność (udźwig liczy
   skrypt z pola powierzchni). */
.galeria-w__tafla--s {
  width: clamp(150px, 15vw, 210px);
  height: clamp(190px, 19vw, 262px);
}
.galeria-w__tafla--m {
  width: clamp(200px, 20vw, 290px);
  height: clamp(240px, 24vw, 336px);
}
.galeria-w__tafla--l {
  width: clamp(250px, 26vw, 375px);
  height: clamp(210px, 21vw, 300px);
}

/* ---------------------------------------------- 8e2. LICZBY — czerń */
/* Pas czystej czerni między pasmem galerii a źródłami stopki — celowo
   bez żadnego światła, żeby sekcje się nie zlewały. Style .liczby
   i .liczba przychodzą z neon.css. */
.liczby-w {
  padding: calc(var(--sekcja) * 0.3) 0 calc(var(--sekcja) * 0.7);
}

/* ----------------------------------------------- 8f. STOPKA — finał */
/* Dwa pomarańczowe źródła po bokach (lustrzana odpowiedź na jedną
   lampę z początku strony) rozjaśniają się przy dojeździe do końca —
   skrypt niesie postęp w --zar-stopki (0–1). Treść leży na jednej
   wielkiej tafli szkła. Łuna bazowa jest czystym CSS-em, więc stopka
   wygląda dobrze także na podstronach bez silnika canvas. */
.stopka-w {
  --zar-stopki: 0;
  position: relative;
  background: transparent;
  padding-block: calc(var(--sekcja) * 0.5) 2.5rem;
}
.stopka-w::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 72% at 0% 58%,
      rgba(255, 122, 35, calc(0.14 + var(--zar-stopki) * 0.16)), transparent 70%),
    radial-gradient(58% 72% at 100% 58%,
      rgba(255, 122, 35, calc(0.14 + var(--zar-stopki) * 0.16)), transparent 70%);
}

/* Pionowe belki-źródła przy krawędziach. */
.zrodlo-stopki {
  position: absolute;
  top: 52%;
  width: 7px;
  height: clamp(110px, 14vw, 170px);
  transform: translateY(-50%);
  border-radius: 4px;
  opacity: calc(0.3 + var(--zar-stopki) * 0.7);
  background: linear-gradient(180deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 20%,
    #fff 50%,
    var(--hot-core) 80%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow:
    0 0 14px 3px rgba(255, 176, 96, 0.85),
    0 0 46px 14px rgba(255, 122, 40, 0.45),
    0 0 130px 50px rgba(255, 100, 20, 0.18);
}
.zrodlo-stopki::after {
  content: "";
  position: absolute;
  inset: -4px -5px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 60%);
}
.zrodlo-stopki--l {
  left: clamp(6px, 1vw, 16px);
}
.zrodlo-stopki--r {
  right: clamp(6px, 1vw, 16px);
}

/* Jedna wielka tafla szkła z całą treścią stopki. */
.stopka-w__tafla {
  position: relative;
  border-radius: 26px;
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
  background: linear-gradient(125deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 1px 0 0 rgba(255, 200, 150, calc(0.06 + var(--zar-stopki) * 0.16)),
    inset -1px 0 0 rgba(255, 200, 150, calc(0.06 + var(--zar-stopki) * 0.16)),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 40px 80px -30px rgba(0, 0, 0, 0.75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stopka-w__tafla {
    background: rgba(17, 21, 28, 0.92);
  }
}
.stopka-w .stopka__dol {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--mgla);
  font-size: 0.85rem;
}

/* ============================================ 8g. CENNIK — PODSTRONA */
/* Podstrona pakietów żyje w tej samej nocy, co strona główna: te same
   kotwice toru (lampa → A → B → C → pryzmat), to samo szkło, ta sama
   zasada hierarchii przez ŚWIATŁO, nie przez plakietkę. Jedyny nowy
   przyrząd to warsztatowy PRZEŁĄCZNIK wielkości auta — bo tylko tu
   cena zależy od nadwozia. */

/* Hero podstrony jest wysokie, bo zdjęcie pracuje w PIONIE: auto wisi
   u góry, lampa leży na dole i świeci w górę. Przy niskim kadrze silnik
   (dopasowanie „cover") ucinał albo auto, albo lampę. */
.hero-w--pod {
  min-height: 82vh;
  padding: calc(var(--header-h) + 3rem) 0 3.5rem;
}
.hero-w--pod h1 {
  max-width: 16ch;
}

/* Kotwica stożka w hero — sama nic nie rysuje. Stoi tam, gdzie na
   zdjęciu pali się lampa pod autem (ok. 68% szerokości, 82% wysokości),
   żeby snop w mgle wychodził z realnego źródła na fotografii. */
.zrodlo-foto {
  position: absolute;
  left: 68%;
  top: 82%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* Kotwica światła spod auta w sekcji kontroli — też niewidzialna. */
.zrodlo-dolne {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* SZYNA LAMP nad cennikiem: cienka listwa spinająca cztery belki
   w jedno stanowisko warsztatowe. Jaśnieje przy prawej, od strony
   pakietu polecanego. Poniżej 900 px znika razem z lampami. */
.szyna {
  position: relative;
  height: 1px;
  margin-top: 3.4rem;
  margin-bottom: -3.4rem;
  /* Listwa ma przechodzić przez GÓRNE krawędzie belek — lampy wiszą pod
     nią, nie obok niej. Przesunięcie transformem, żeby nie ruszyć rytmu
     sekcji (margines dodatni i ujemny znoszą się do 1 px). */
  transform: translateY(-16px);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.16) 30%,
    rgba(255, 200, 150, 0.3) 62%,
    rgba(255, 255, 255, 0.1));
}
.szyna::before,
.szyna::after {
  /* Wieszaki szyny — dwa krótkie pionowe zaczepy pod sufitem. */
  content: "";
  position: absolute;
  top: -10px;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.12);
}
.szyna::before { left: 12%; }
.szyna::after { right: 12%; }

/* Belka na szynie — ten sam przyrząd, co lampa nad pakietem na stronie
   głównej, tylko bez migotania: tu wisi ich kilka i szarpanie całego
   rzędu robiłoby jarmark. */
.lampa-szyny {
  position: absolute;
  top: -2.6rem;
  left: 50%;
  width: 58px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 4px;
  opacity: 0.72;
  background: linear-gradient(90deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 18%,
    #fff 50%,
    var(--hot-core) 82%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow:
    0 0 10px 2px rgba(255, 176, 96, 0.6),
    0 0 32px 9px rgba(255, 122, 40, 0.3),
    0 0 90px 32px rgba(255, 100, 20, 0.12);
}
.lampa-szyny--mocna {
  width: 70px;
  height: 6px;
  opacity: 1;
  box-shadow:
    0 0 13px 3px rgba(255, 176, 96, 0.85),
    0 0 44px 13px rgba(255, 122, 40, 0.45),
    0 0 120px 44px rgba(255, 100, 20, 0.18);
}
.lampa-szyny::after {
  content: "";
  position: absolute;
  inset: -4px -7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%);
}
@media (max-width: 899px) {
  .szyna,
  .lampa-szyny {
    display: none;
  }
}

/* Ścieżka nawigacji — mono jak numery na tabliczce, cicha. */
.okruchy ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mgla);
}
.okruchy li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(233, 238, 246, 0.28);
}
.okruchy a {
  color: var(--mgla);
  text-decoration: none;
}
.okruchy a:hover {
  color: var(--hot-core);
}

.cennik-w {
  padding: calc(var(--sekcja) * 0.8) 0 var(--sekcja);
}

/* PRZEŁĄCZNIK WIELKOŚCI AUTA — dźwignia z warsztatu: ciemna obudowa
   ze szkła, dwie pozycje, a czynną wskazuje dioda i rozjaśniona szybka.
   Bez JS element ma atrybut hidden (karty pokazują wtedy obie kwoty),
   więc nigdy nie wisi tu martwa dźwignia. */
.przelacznik {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}
.przelacznik[hidden] {
  display: none;
}
.przelacznik__opis {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mgla);
}
.przelacznik__pole {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 9px;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.42),
    rgba(10, 12, 16, 0.2) 60%,
    rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.przelacznik__poz {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.05rem;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  background: transparent;
  color: rgba(233, 238, 246, 0.62);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 86;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.045em;
  line-height: 1;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.przelacznik__poz small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--mgla);
}
/* Pozycja czynna: szybka rozjaśniona od środka, jak mleczny przycisk. */
.przelacznik__poz[aria-pressed="true"] {
  color: #240b00;
  background: linear-gradient(125deg,
    rgba(255, 206, 156, 0.95),
    rgba(255, 158, 74, 0.9) 45%,
    rgba(255, 186, 118, 0.93));
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 170, 0.5),
    inset 0 1px 0 rgba(255, 238, 216, 0.8),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
.przelacznik__poz[aria-pressed="true"] small {
  color: rgba(60, 20, 0, 0.72);
}
.przelacznik__poz:hover:not([aria-pressed="true"]) {
  color: var(--dzien);
  background: rgba(255, 255, 255, 0.05);
}
.przelacznik__poz:focus-visible {
  outline: 2px solid var(--hot-core);
  outline-offset: 2px;
}
/* Dioda pozycji — zgaszona żarzy się ledwo, czynna świeci na bursztyn. */
.przelacznik__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 190, 130, 0.22);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.przelacznik__poz[aria-pressed="true"] .przelacznik__led {
  background: #fff3e4;
  box-shadow:
    0 0 7px 2px rgba(255, 176, 96, 0.95),
    0 0 16px 5px rgba(255, 122, 40, 0.5);
}

/* Siatka czterech pakietów: kolumna → dwie → cztery.
   Odstęp od dźwigni musi zmieścić lampę roboczą, która wisi 3,1 rem
   nad kartą polecaną — przy ciaśniejszym marginesie jej łuna kładła się
   na przełączniku. */
.cennik {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: 5rem;
}
@media (min-width: 700px) {
  .cennik {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1240px) {
  .cennik {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dwie kwoty jedna pod drugą (stan bez JS). Skrypt zostawia widoczną
   tylko tę, którą wskazuje przełącznik. */
.cennik .pakiet__cena,
.pakiet--specjalny .pakiet__cena {
  display: grid;
  gap: 0.1rem;
  font-size: clamp(2rem, 3.1vw, 2.8rem);
}
.cena {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.cena__typ {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mgla);
}
.cennik-w[data-rozmiar="male"] .cena[data-rozmiar="duze"],
.cennik-w[data-rozmiar="duze"] .cena[data-rozmiar="male"] {
  display: none;
}
/* Gdy dźwignia działa, podpis przy kwocie tylko dubluje jej pozycję. */
.cennik-w[data-rozmiar] .cena__typ {
  display: none;
}

.pakiet__nota {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--mgla);
}
.pakiety-w .pakiet--hot .pakiet__nota {
  color: rgba(255, 205, 160, 0.85);
}

.cennik-w__nota {
  margin-top: 2rem;
  max-width: 62ch;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mgla);
}

/* ------------------------------------------- PAKIET SPECJALNY */
/* Ostatni przystanek toru: tu wiązka rozszczepia się w tęczę i gaśnie. */
.specjalny-w {
  padding: calc(var(--sekcja) * 0.5) 0 var(--sekcja);
}
.specjalny-w__uklad {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .specjalny-w__uklad {
    grid-template-columns: 1fr 1fr;
  }
}
.specjalny-w__tekst p {
  color: #aab3bf;
  line-height: 1.65;
  max-width: 54ch;
}
.specjalny-w__tekst p + p {
  margin-top: 1rem;
}
.specjalny-w__czas {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--hot-core);
}

/* Karta pakietu specjalnego nie ma nad sobą lampy — ciepło bierze
   z ostatniego światła toru: rozgrzana górna krawędź i cieplejsze szkło. */
.pakiet--specjalny {
  position: relative;
  border-radius: 22px;
  color: inherit;
  background: linear-gradient(180deg,
    rgba(255, 236, 214, 0.07),
    rgba(255, 255, 255, 0.03) 55%,
    rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  backdrop-filter: blur(22px) saturate(1.4) brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 188, 0.32),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pakiet--specjalny {
    background: rgba(17, 21, 28, 0.92);
  }
}
.pakiet--specjalny ul {
  color: #c3cad4;
}
.pakiet--specjalny .pakiet__cena small {
  color: var(--mgla);
}

/* ---------------------------------------- DARMOWA KONTROLA PODWOZIA */
.kontrola-w {
  padding: calc(var(--sekcja) * 0.4) 0 var(--sekcja);
}
.kontrola-w__uklad {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 3rem;
  align-items: start;
}
@media (min-width: 900px) {
  .kontrola-w__uklad {
    grid-template-columns: 1fr 1fr;
  }
}
.kontrola-w__tekst p {
  color: #aab3bf;
  line-height: 1.65;
  max-width: 54ch;
}
.kontrola-w__tekst p + p {
  margin-top: 1rem;
}
.kontrola-w__tafle {
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.kontrola-w__cta {
  margin-top: 2.5rem;
}

/* ============================================ 8h. USŁUGI — PODSTRONA */
/* Układ wg wskazówek klienta: hala warsztatu po zmroku. Hero bez zdjęcia —
   ciemność i pionowe lampy przy obu ścianach, których snopy sięgają w głąb
   i rozjaśniają mgłę. Niżej KAŻDY kafel ma własną lampę nad sobą (oświetla
   zdjęcie od góry i podgrzewa mgłę za szkłem), a całe pasmo kafli jest
   dodatkowo oświetlane reflektorami z boków sekcji. Snopy w mgle liczy
   silnik z elementów [data-stozek]. */

.hero-w--hala {
  min-height: 76vh;
}

/* Kurtyna pod treścią hero: zdjęcie hali jest teraz w pełnych barwach
   i jasności, więc lewa strona musi dostać ciemne podłoże, inaczej lead
   siada na rozświetlonej posadzce. Gradient kończy się w połowie kadru —
   prawa strona zdjęcia zostaje nietknięta. */
.hero-w--hala::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6, 7, 10, 0.94) 0%,
    rgba(6, 7, 10, 0.86) 26%,
    rgba(6, 7, 10, 0.45) 48%,
    rgba(6, 7, 10, 0) 68%);
}
.hero-w--hala .hero-w__in {
  position: relative;
  z-index: 2;
}

/* Kotwica naszego światła w lampie ze zdjęcia — sama nic nie rysuje.
   Pozycję nadaje silnik z data-foto-x/-y; te wartości to tylko zapas
   na czas, zanim fotografia się wczyta. */
.zrodlo-zdjecia {
  position: absolute;
  right: 8%;
  top: 34%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}
/* Zapasowa pozycja drugiej lampy (lewa strona hali) — realną nadaje
   silnik z data-foto-x/-y. */
.zrodlo-zdjecia--l {
  right: auto;
  left: 46%;
  top: 42%;
}

/* --------------------------------------------------- GRUPA USŁUG */
.grupa {
  position: relative;
  padding: calc(var(--sekcja) * 0.55) 0 calc(var(--sekcja) * 0.5);
}

/* SEKCJA USŁUG. Wielkie zdjęcie podwozia na całą szerokość nad grupami
   zostało USUNIĘTE na życzenie klienta — razem z nim odpadła rezerwa
   `padding-top: 38%`, którą `.uslugi-tlo` trzymała, żeby kafle nie
   zasłaniały lamp z tamtego kadru. Hala pokazuje się teraz w jednym
   miejscu: w prześwicie obok samotnego kafla.
   KOLEJNOŚĆ WARSTW zostaje krytyczna: co ma dostać mgłę i światło, musi
   leżeć POD canvasem mgły. Stąd: zdjęcia 0, mgła 1, sekcje z kaflami 2. */
.scena--hala .scena__tyl {
  z-index: 1;
}
.uslugi-tlo .grupa {
  z-index: 2;
}
.uslugi-tlo {
  position: relative;
}
/* PRZEŚWIT — czerń, która zostaje obok samotnego kafla, wypełniona kawałkiem
   tej samej hali. Odrzucone po drodze: pas 3:1 przez całą szerokość między
   grupami (klient: „miał dać tylko w to wolne pole czarne") oraz prześwit
   jako element SIATKI — siedział wtedy nad canvasem mgły i zdjęcie było
   martwe, bez mgły i bez światła na lampach.

   Dlatego zdjęcie leży osobno, w `.uslugi-tlo`, na tej samej warstwie co
   tło sekcji (z-index 0 wobec canvasu mgły 1). Miejsce i wysokość bierze
   z pustej komórki `.przeswit-slot`, a szerokość ciągnie aż za prawą
   krawędź okna — pozycję ustawia wiazka.js przy każdym pomiarze, bo luka
   w siatce nie jest wyrażalna w CSS. Kotwice lamp dostają wtedy piksele
   z tego samego dopasowania „cover", którym przeglądarka rysuje tło. */
.przeswit {
  position: absolute;
  display: none;
  z-index: 0;
  /* CAŁY kadr hali (2:1, cztery lampy), nie zbliżenie na jedną lampę —
     klient: „zmniejsz samo zdjęcie, aby więcej było go widać".
     Proporcja kadru siedzi w `data-kadr` w HTML: to z niej skrypt liczy
     pozycje lamp, więc przy podmianie zdjęcia trzeba ruszyć oba miejsca. */
  background-image: image-set(
    url("/assets/img/podwozie-lampy-1536.webp") 1x,
    url("/assets/img/podwozie-lampy-1536.webp") 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Ciemniej niż tło sekcji (0,85): prześwit stoi w rzędzie kafli i nie
     może przeciągać wzroku z treści na siebie. */
  opacity: 0.78;
}
/* Krawędzie gasną w czerń — to ma być dziura w mroku, przez którą widać
   halę, a nie trzecia tafla szkła w rzędzie. Z PRAWEJ wygaszenia nie ma:
   tam kadr wychodzi poza kontener i ucina go dopiero krawędź okna.
   U góry ramp jest DŁUŻSZY, bo w tym miejscu kadru leży jasne podwozie —
   przy krótkim widać było prostą linię cięcia przez całą szerokość. */
.przeswit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--noc) 0%,
      rgba(7, 8, 11, 0) 26%,
      rgba(7, 8, 11, 0) 70%,
      rgba(7, 8, 11, 0.85) 93%,
      var(--noc) 100%),
    linear-gradient(90deg,
      var(--noc) 0%,
      rgba(7, 8, 11, 0) 13%,
      rgba(7, 8, 11, 0) 100%);
}
/* Pusta komórka rezerwująca miejsce w siatce. Liczba w atrybucie to
   szerokość luki w komórkach przy danej liczbie kolumn — przy dwóch
   kolumnach rząd wychodzi pełny, więc luki nie ma i skrypt chowa wtedy
   zdjęcie (test getClientRects na slocie). */
.przeswit-slot {
  display: none;
}
@media (min-width: 1100px) {
  .przeswit-slot[data-luka-3="1"] { display: block; grid-column: span 1; }
  .przeswit-slot[data-luka-3="2"] { display: block; grid-column: span 2; }
}

/* Kotwica lampy w tle — sama nic nie rysuje, pozycję podaje styl w HTML
   (procenty zmierzone na zdjęciu). */
.lampa-tla {
  position: absolute;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Reflektory boczne w sekcjach usunięte na życzenie klienta. Zastąpiło je
   wielkie zdjęcie podwozia nad sekcją, a i ono zostało zdjęte — hala
   świeci dziś wyłącznie z prześwitu i z lamp nad kaflami. Źródła
   w stopce (.zrodlo-stopki) to osobny element i zostają. */

/* Siatka kafli. Odstęp w pionie jest DUŻY, bo nad każdym kaflem wisi
   lampa — przy ciasnym rytmie jej łuna kładła się na kaflu wyżej.
   Trzy kolumny na szerokim ekranie: kafle mają być duże, nie gęste. */
.stanowiska {
  display: grid;
  gap: clamp(3.4rem, 5vw, 5rem) clamp(0.9rem, 1.6vw, 1.4rem);
  margin-top: clamp(2.6rem, 4vw, 4rem);
}
@media (min-width: 640px) {
  .stanowiska {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .stanowiska {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stanowisko (nazwa .kafel jest zajęta przez neon.css razem
   z overflow:hidden, który ucinał lampę) to ta sama tafla szkła, co na stronie głównej — dochodzi tylko
   światło padające na zdjęcie z góry i mocniejsza górna krawędź, którą
   lampa rozgrzewa. */
.stanowisko {
  padding: clamp(1rem, 1.7vw, 1.4rem);
  gap: 0.75rem;
}
.stanowisko .tafla__foto {
  position: relative;
}
.stanowisko .tafla__foto img {
  aspect-ratio: 4 / 3;
}
/* Snop lampy na zdjęciu: rozjaśnienie przy górnej krawędzi, cień przy
   dolnej. Bez tego kafel wyglądał jak wycinek, a nie jak przedmiot
   stojący pod światłem. */
.stanowisko .tafla__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    rgba(255, 206, 155, 0.34),
    rgba(255, 175, 110, 0.12) 38%,
    rgba(255, 150, 80, 0) 62%);
}
.stanowisko .tafla__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 46%);
}
.stanowisko {
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 188, 0.34),
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 34px 60px -24px rgba(0, 0, 0, 0.7);
}
a.kafel:hover,
a.kafel:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.5),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 44px 74px -24px rgba(0, 0, 0, 0.8);
}
.stanowisko p {
  font-size: 0.9rem;
}

/* Lampa nad kaflem — ta sama belka, co nad pakietem na stronie głównej,
   tylko mniejsza. Poniżej 900 px znika: przy jednej kolumnie rząd lamp
   robił się listą kropek. */
.lampa-stanowiska {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  width: 54px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255, 210, 168, 0) 0%,
    var(--hot-core) 18%,
    #fff 50%,
    var(--hot-core) 82%,
    rgba(255, 210, 168, 0) 100%);
  box-shadow:
    0 0 11px 3px rgba(255, 176, 96, 0.75),
    0 0 36px 11px rgba(255, 122, 40, 0.35),
    0 0 100px 36px rgba(255, 100, 20, 0.14);
}
.lampa-stanowiska::after {
  content: "";
  position: absolute;
  inset: -4px -7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 60%);
}
/* Kursor na kaflu rozpala jego lampę: belka jaśnieje i puchnie łuną,
   zdjęcie dostaje mocniejszy snop od góry, a szkło cieplejszą krawędź.
   Snop w mgle podbija silnik (stozki[].goraco) — CSS i canvas grzeją
   się razem, więc światło jest jedno, a nie dwa osobne efekty. */
.stanowisko:hover .lampa-stanowiska,
.stanowisko:focus-visible .lampa-stanowiska {
  box-shadow:
    0 0 16px 4px rgba(255, 200, 140, 0.95),
    0 0 54px 18px rgba(255, 140, 60, 0.6),
    0 0 150px 56px rgba(255, 110, 30, 0.26);
}
.stanowisko .tafla__foto::before {
  transition: background 0.35s var(--ease);
}
.stanowisko:hover .tafla__foto::before,
.stanowisko:focus-visible .tafla__foto::before {
  background: linear-gradient(180deg,
    rgba(255, 219, 178, 0.52),
    rgba(255, 186, 124, 0.2) 40%,
    rgba(255, 150, 80, 0) 66%);
}
.stanowisko .tafla__foto img {
  transition: filter 0.4s var(--ease), transform 0.5s var(--ease);
}
.stanowisko:hover .tafla__foto img {
  transform: scale(1.02);
}

@media (max-width: 899px) {
  .lampa-stanowiska {
    display: none;
  }
}

/* =========================================== 8i. KONTAKT — PODSTRONA */
/* OTWARTA BRAMA. Główna prowadzi wiązkę przez lustra, /promocje kładzie
   lampę pod autem, /uslugi wiesza lampę nad każdym kaflem. Tu światło
   wchodzi Z BOKU, przy dolnej krawędzi hero, i kładzie się w głąb strony
   jak snop z rozsuniętych wrót warsztatu wieczorem — nisko, pod tekstem,
   żeby niczego nie zalewać.
   HIERARCHIĘ NIESIE ODLEGŁOŚĆ OD ŹRÓDŁA: kafel telefonu stoi najbliżej
   bramy i ma najjaśniejsze szkło, adres najdalej i najciemniejsze. To ta
   sama informacja, którą niesie kolejność — najszybsza droga na przedzie. */

.hero-w--brama {
  min-height: 74vh;
}
.hero-w--brama h1 {
  max-width: 15ch;
}

/* Kotwica bramy — niewidzialna, jak wszystkie źródła. Stoi PRZY LEWEJ
   KRAWĘDZI I NISKO: snop przechodzi pod blokiem tekstu, a nie przez
   niego. Wysunięta lekko poza kadr, żeby nie było widać punktu startu —
   światło ma wpadać zza ramy. */
.zrodlo-brama {
  position: absolute;
  left: -2%;
  top: 78%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* --------------------------------------------------------- KANAŁY */
.kanaly-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.5) 0 calc(var(--sekcja) * 0.45);
}
/* Snop ciągnie się dalej tą samą stroną co w hero — to wciąż to samo
   światło, tylko dalej od wrót. */
.zrodlo-kanalow {
  position: absolute;
  left: -2%;
  top: 64%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}
.kanaly {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
}
@media (min-width: 900px) {
  .kanaly {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* --blisko (1 → 0) to odległość od bramy. Steruje jasnością szkła,
   ciepłem górnej krawędzi i zewnętrzną poświatą — wszystkim naraz,
   jak realna odległość od lampy. Deklaracje po `.tafla`, więc wygrywają
   kaskadą przy tej samej specyficzności. */
.kanal {
  gap: 0.7rem;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  background: linear-gradient(125deg,
    rgba(255, 255, 255, calc(0.06 + var(--blisko) * 0.07)),
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, calc(0.04 + var(--blisko) * 0.04)));
  box-shadow:
    inset 0 1px 0 rgba(255, 206, 156, calc(0.14 + var(--blisko) * 0.46)),
    inset -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 0 calc(var(--blisko) * 48px) rgba(255, 122, 24, calc(var(--blisko) * 0.13)),
    0 34px 60px -24px rgba(0, 0, 0, 0.65);
}
.kanal .tag {
  color: rgba(255, 255, 255, calc(0.42 + var(--blisko) * 0.34));
}
.kanal p {
  color: #a7b0bd;
  line-height: 1.6;
  margin: 0;
}
/* Sama wartość — numer, adres zwrotny, ulica — idzie monospacem, bo to
   dane do przepisania, nie zdanie do przeczytania. */
.kanal__wartosc {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kanal__wartosc--adres {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
.kanal__wartosc a {
  position: relative;
  color: var(--hot-core);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 210, 168, 0.28);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Zapas na kciuk. Numer i adres to samodzielne cele dotykowe, a nie
   odnośniki w zdaniu — muszą mieć 44 px, mimo że kreska podkreślenia ma
   zostać tuż pod tekstem. Stąd niewidzialna nakładka zamiast paddingu,
   który odkleiłby podkreślenie. */
.kanal__wartosc a::after,
.godziny__linki a::after,
.po-wyslaniu__tel a::after {
  content: "";
  position: absolute;
  inset: -13px -6px;
}
.kanal__wartosc a:hover,
.kanal__wartosc a:focus-visible {
  color: #fff;
  border-color: var(--hot-core);
}

/* --------------------------------------------------------- DOJAZD */
.dojazd-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.45) 0;
}
/* Światło wychodzi z naszego punktu na mapie i rozlewa się wokół ramki —
   mapa jest nieprzezroczysta, więc w mgle widać łunę dookoła niej. */
.zrodlo-mapy {
  position: absolute;
  left: 32%;
  top: 62%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}
.dojazd {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .dojazd {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

/* MAPA JAKO SCENA, nie ilustracja: kadr wygaszony do nocy, a świeci na nim
   jeden punkt — nasza wizytówka. Osadzenie jest z Google (kod od klienta,
   wizytówka firmy), a odwrócenie barw to jedyny sposób, żeby cudza, jasna
   mapa dała się pogodzić z ciemną stroną; hue-rotate wraca po nim
   z niebieskiego, który zrobiłby się pomarańczowy i gryzł z naszym
   światłem. UWAGA: filtr leży na całej ramce, więc odwraca też kartę
   miejsca i logo Google. Jeśli klient chce mieć tam oryginalne barwy,
   wystarczy zdjąć `filter` — reszta oprawy (szkło, łuna, winieta) działa
   tak samo. */
.mapa-w {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 34px 60px -24px rgba(0, 0, 0, 0.7);
}
.mapa-w__ramka {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(0.82) contrast(1.08);
}
/* Winieta i ciepła łuna w środku kadru — tam, gdzie stoi warsztat. */
.mapa-w::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 138, 40, 0.22) 0%,
      rgba(255, 138, 40, 0.08) 24%,
      rgba(7, 8, 11, 0) 52%),
    radial-gradient(circle at 50% 50%,
      rgba(7, 8, 11, 0) 46%,
      rgba(7, 8, 11, 0.38) 88%,
      rgba(7, 8, 11, 0.55) 100%);
}
/* Winieta nie może zjeść podpisu i przycisków Google w rogach — mapa ma
   zostać używalna. Stąd łagodne rogi (0,38) i jawna kolejność warstw:
   mapa pod spodem, winieta nad nią. Własnej kropki światła na środku
   NIE MA: wizytówka Google niesie własną pinezkę i stały dwie na sobie. */
.mapa-w__ramka {
  position: relative;
  z-index: 1;
}
.mapa-w::after {
  z-index: 2;
}

/* Godziny to DANE — monospace, jedna para na wiersz, cienka linia
   podziału. Dwa różne zakresy (warsztat i telefon) są tu najważniejszą
   informacją na stronie, więc stoją osobno, nie w zdaniu. */
.godziny {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.godziny__lista {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}
.godziny__lista > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.godziny__lista > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.godziny__lista dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mgla);
  align-self: center;
}
.godziny__lista dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--dzien);
}
.godziny__uwaga {
  color: #a7b0bd;
  line-height: 1.6;
  max-width: 42ch;
}
.godziny__linki {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.godziny__linki a {
  position: relative;
}

/* --------------------------------------------------------- NAPISZ */
/* Najciszej oświetlona sekcja strony: tu się czyta i pisze. Jedna słaba
   lampa nad taflą, żeby formularz nie stał w czarnej dziurze. */
.napisz-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.45) 0 var(--sekcja);
}
.zrodlo-napisz {
  position: absolute;
  left: 50%;
  top: 26%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}
/* Formularz i „co dalej" stoją obok siebie: po lewej pisze się, po prawej
   czyta, czego się spodziewać. Pole tekstowe nie rozjeżdża się wtedy na
   całą szerokość kontenera, a prawa kolumna zajmuje czerń, która
   wcześniej po prostu tam leżała. */
.napisz {
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .napisz {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}
.formularz-w {
  gap: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}
.po-wyslaniu {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 0.4rem;
}
.po-wyslaniu__kroki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.po-wyslaniu__kroki li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  color: #a7b0bd;
  line-height: 1.6;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.po-wyslaniu__kroki li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Numer kroku monospacem i w bursztynie — mały, żeby nie konkurował
   z treścią kroku (kontur jak w `.krok__nr` na głównej byłby tu za
   duży: tam numer jest bohaterem kafla, tu tylko porządkuje listę). */
.po-wyslaniu__nr {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--hot);
  padding-top: 0.3rem;
}
.po-wyslaniu__tel {
  color: var(--mgla);
  font-size: 0.9rem;
}
.po-wyslaniu__tel a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--hot-core);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 210, 168, 0.28);
}
.po-wyslaniu__tel a:hover,
.po-wyslaniu__tel a:focus-visible {
  color: #fff;
  border-color: var(--hot-core);
}
.formularz-w__rzad {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 700px) {
  .formularz-w__rzad {
    grid-template-columns: 1fr 1fr;
  }
}
.pole-w {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.pole-w label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mgla);
}
.pole-w input,
.pole-w textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(6, 8, 12, 0.55);
  color: var(--dzien);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.pole-w textarea {
  resize: vertical;
}
.pole-w input::placeholder,
.pole-w textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.pole-w input:hover,
.pole-w textarea:hover {
  border-color: rgba(255, 255, 255, 0.24);
}
.pole-w input:focus-visible,
.pole-w textarea:focus-visible {
  outline: 2px solid var(--hot-core);
  outline-offset: 2px;
  border-color: rgba(255, 210, 168, 0.5);
  background: rgba(6, 8, 12, 0.75);
}
.pole-w__podpowiedz {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mgla);
}
/* Zgoda: kwadrat obok tekstu, nie pod nim — inaczej etykieta odkleja się
   od pola i nie wiadomo, czego dotyczy. */
.pole-w--zgoda {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}
.pole-w--zgoda input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin-top: 2px;
  padding: 0;
  accent-color: var(--hot);
}
.pole-w--zgoda label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: #a7b0bd;
}
.pole-w--zgoda a {
  color: var(--hot-core);
}
.formularz-w__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0.4rem 0 0;
}
.formularz-w__info {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mgla);
  max-width: 32ch;
}

/* ============================================== 8j. BLOG — PODSTRONY */
/* OŚ CZASU. Sześć wpisów z pięciu lat: gdyby leżały w równej siatce
   kafli, wyglądałyby jak katalog, w którym nic się nie dzieje. Tu wiszą
   na świetlnej szynie, a lampa stoi nad najnowszym — im starszy wpis,
   tym dalej od źródła i tym ciemniej. Data przestaje być podpisem pod
   tytułem: to ona ustawia wpis w świetle.
   Na stronie WPISU światło gaśnie do czytania (kolumna tekstu stoi
   w czystej czerni) i wraca dopiero pod tekstem. */

.hero-w--notes {
  min-height: 62vh;
}
.hero-w--notes h1 {
  max-width: 13ch;
}
/* Wpis: tytuł bywa długi (importowany ze starej strony), więc stopień
   niżej niż na pozostałych podstronach — inaczej zjada cały ekran. */
.hero-w--wpis {
  min-height: 58vh;
}
/* Selektor musi być DWUKLASOWY: `.scena .d1` (0,2,0) i `.hero-w h1` (0,1,1)
   biją pojedynczą klasę — to ta sama pułapka specyficzności, co przy
   `.tafla p` (§3, pkt 12). Tytuły wpisów są długie (import ze starej
   strony), a `d1` jest skrojone pod dwa–trzy słowa hasła: przy sześciu
   wierszach tytuł zjadał cały ekran i zajawka schodziła pod krawędź. */
.scena .d1--wpis {
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  line-height: 1.04;
  max-width: 22ch;
}
.hero-w--wpis .tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}

/* Lampa nad blatem — kotwica, jak wszystkie źródła, jest niewidzialna.
   W spisie wisi wysoko i świeci daleko w dół (obejmuje pierwsze wpisy),
   na stronie wpisu ma krótszy zasięg: ma oświetlić tytuł i zdjęcie,
   a zgasnąć nad tekstem. */
.zrodlo-notatnika {
  position: absolute;
  left: 34%;
  top: 44%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}
.zrodlo-wiecej,
.zrodlo-cta {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 2px;
  height: 2px;
  pointer-events: none;
}

/* ------------------------------------------------------- SPIS WPISÓW */
.os-czasu-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.35) 0 calc(var(--sekcja) * 0.5);
}
.os-czasu {
  position: relative;
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding-left: clamp(1.6rem, 3vw, 3rem);
}
/* Szyna: włókno światła biegnące przez cały spis, gasnące ku dołowi —
   ta sama fizyka, co w kaflach, tylko w pionie. */
.os-czasu__tor {
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 2rem;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 176, 106, 0.85) 0%,
    rgba(255, 138, 52, 0.4) 32%,
    rgba(255, 138, 52, 0.16) 64%,
    rgba(255, 138, 52, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 130, 40, 0.35);
}
/* Rok siedzi NA szynie — z kropką w miejscu styku. */
.os-czasu__rok {
  position: relative;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--mgla);
}
.os-czasu__rok:first-child {
  margin-top: 0;
}
.os-czasu__rok::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.6rem, 3vw, 3rem) - 3px);
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hot-core);
  box-shadow: 0 0 10px rgba(255, 150, 60, 0.8);
}

/* Kafel wpisu: zdjęcie po lewej, treść po prawej — bo w spisie czyta się
   tytuł i datę, a nie ogląda galerię. */
.wpis {
  padding: 0;
  overflow: hidden;
}
.wpis__link {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding: clamp(0.9rem, 1.6vw, 1.2rem);
  color: inherit;
  text-decoration: none;
}
@media (min-width: 760px) {
  .wpis__link {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: center;
  }
}
.wpis__foto {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 16px 30px -10px rgba(0, 0, 0, 0.75),
    0 3px 8px rgba(0, 0, 0, 0.5);
}
.wpis__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.38) contrast(1.18) brightness(0.68);
  transition: filter 0.5s var(--ease);
}
.wpis:hover .wpis__foto img,
.wpis__link:focus-visible .wpis__foto img {
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.85) contrast(1.18) brightness(0.78);
}
.wpis__tresc {
  display: grid;
  gap: 0.55rem;
  padding: 0.2rem clamp(0.2rem, 1vw, 0.8rem) 0.4rem 0;
}
.wpis__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mgla);
}
.wpis__czas {
  color: rgba(143, 154, 168, 0.75);
}
.wpis__tytul {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.25;
}
.wpis__lead {
  color: #a7b0bd;
  line-height: 1.6;
  max-width: 62ch;
}
.wpis .strzalka {
  margin-top: 0.2rem;
}
.wpis__link:focus-visible {
  outline: 2px solid var(--hot-core);
  outline-offset: 4px;
  border-radius: 18px;
}
.wpis:hover {
  transform: translateY(-3px);
}

/* Trzy wpisy na końcu artykułu: bez szyny (nie są osią czasu, tylko
   propozycją) i w kolumnach, żeby nie ciągnąć strony w nieskończoność. */
.os-czasu--wiecej {
  padding-left: 0;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
@media (min-width: 900px) {
  .os-czasu--wiecej {
    grid-template-columns: repeat(3, 1fr);
  }
  .os-czasu--wiecej .wpis__link {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* ------------------------------------------------------------- WPIS */
.wpis-w {
  position: relative;
  padding: 0 0 calc(var(--sekcja) * 0.4);
}
.wpis-w__foto {
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
  max-width: 48rem;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 34px 60px -24px rgba(0, 0, 0, 0.7);
}
.wpis-w__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(-24deg) saturate(0.5) contrast(1.12) brightness(0.74);
}
/* Kolumna tekstu. Miara 68 znaków, oddech 1,75 — to jedyne miejsce na
   stronie, gdzie liczy się wyłącznie czytanie. Żadnego szkła pod
   literami: tło zostaje czarne, bo szkło i mgła pod tekstem to dokładnie
   ten rodzaj efektu, który utrudnia czytanie. */
.tresc-w {
  max-width: 68ch;
  color: #b3bcc8;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.tresc-w p + p,
.tresc-w ul + p {
  margin-top: 1.15rem;
}
.tresc-w h2 {
  margin: clamp(2.2rem, 4vw, 3rem) 0 0.9rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.25;
}
.tresc-w ul {
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.tresc-w li {
  position: relative;
  padding-left: 1.5rem;
}
/* Znacznik listy: krótka świetlna kreska zamiast kropki — ten sam motyw,
   co szyna osi czasu. */
.tresc-w li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--hot);
  box-shadow: 0 0 8px rgba(255, 130, 40, 0.6);
}

.wiecej-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.4) 0;
}

/* -------------------------------------------------------------- CTA */
.cta-w {
  position: relative;
  padding: calc(var(--sekcja) * 0.4) 0 calc(var(--sekcja) * 0.7);
}
.cta-w__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

/* --------------------------------- 9pre. WYDAJNOŚĆ NA TELEFONIE I TABLECIE */
/* ZMIERZONE (6. sesja, 375 px): 38 elementów z `backdrop-filter`
   (blur 8–22 px). Każdy z nich zmusza przeglądarkę do osobnej warstwy
   kompozytora i rozmycia tego, co jest POD nim — przy przewijaniu
   przeliczanego na nowo w każdej klatce. Na słabszym GPU telefonu to
   główne źródło szarpania, mocniejsze niż sam canvas.
   Poniżej 900 px zdejmujemy rozmycie i nadrabiamy KOLOREM: tło szkła
   robi się odrobinę gęstsze, żeby tafla dalej czytała się jak szyba,
   a nie jak dziura. Desktop zostaje bez zmian — tam rozmycie jest
   znakiem firmowym i sprzęt je udźwignie.
   UWAGA: nie kasować `backdrop-filter` z reguł bazowych — ta sekcja
   działa jako nadpisanie i tylko na wąskich ekranach. */
@media (max-width: 899px) {
  .tafla,
  .btn--hot,
  .btn--kontur,
  .pakiet,
  .plakietka,
  .lustro,
  .pakiety-w .pakiet,
  .stopka-w__tafla,
  .plyta,
  .pole-w,
  .kanal,
  .przelacznik,
  .stanowisko,
  .top.przyklejony {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* PASEK NAGŁÓWKA musi być NIEPRZEZROCZYSTY. Bez rozmycia jego
     `rgba(7,8,11,0.86)` z neon.css przepuszczało treść przewijaną pod
     spodem — napisy nachodziły na logo i przycisk (złapane na zrzucie). */
  .top.przyklejony {
    background: var(--noc);
  }
  /* Rekompensata: szkło bez rozmycia potrzebuje ciut więcej własnego tła,
     inaczej na czerni wygląda jak sam obrys. */
  .tafla,
  .pakiety-w .pakiet,
  .stanowisko {
    background-color: rgba(20, 24, 31, 0.72);
  }
  /* WYJĄTEK: kafle usług na głównej jadą na osi --jasnosc (szkło
     PODŚWIETLONE OD TYŁU). Ciemna rekompensata wyżej ma tę samą
     specyficzność (0,1,0), ale stoi NIŻEJ w pliku, więc przebijała
     mleczne tło z §8 — kafel robił się ciemny, a typografia i tak
     ciemniała, bo jej reguły mają `.uslugi-w` (0,2,0). Wychodził
     czarny tekst na czarnym szkle (§3 pkt 12, znowu).
     Tu wracamy do mleczności, ale GĘŚCIEJ niż na desktopie: tam
     jasność dokłada `backdrop-filter: blur(22px) brightness(1.1)`,
     którego poniżej 900 px nie ma. Wartość dobrana pomiarem
     kontrastu, nie na oko. */
  .uslugi-w .tafla--usluga {
    background-color: rgba(248, 240, 229, calc(0.05 + var(--jasnosc) * 0.66));
  }
  .stopka-w__tafla {
    background-color: rgba(16, 19, 25, 0.78);
  }
}

/* ----------------------------------------------- 9. TELEFON I TABLET */
/* Telefon to INNA scena, nie zmniejszony monitor: opowieść światła
   jest pionowa. Jedno źródło u góry, zjazd wiązki wzdłuż prawej
   krawędzi (kotwice luster zostają — geometrię i tak liczy skrypt
   z ich realnych pozycji, pułapka 16), lustra zeszczuplone do
   odłamków, żeby bez rozpędzonej mgły nie czytały się jak guziki.
   Treść w jednej kolumnie, przyciski na pełną szerokość kciuka. */
@media (max-width: 760px) {
  .hero-w {
    min-height: 82vh;
    padding: calc(var(--header-h) + 2.75rem) 0 3.25rem;
  }
  .zrodlo {
    width: 84px;
    height: 7px;
  }
  .lustro {
    height: 72px;
    width: 8px;
    border-radius: 5px;
  }
  .pustka {
    height: 7vh;
  }

  /* Kciuk zamiast kursora: oba przyciski hero w jednej kolumnie,
     równe, na pełną szerokość — telefon pod spodem, nie obok. */
  .hero-w__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .proces-w__cta {
    flex-direction: column;
    align-items: stretch;
  }

  /* CTA w panelu menu: jeden wiersz zamiast łamania w blok. */
  .panel .btn {
    font-size: 0.88rem;
  }

  /* Podpisy liczb: ciaśniejszy mono, żeby nie łamały się co słowo. */
  .liczba span {
    letter-spacing: 0.06em;
  }

  /* PODSTRONY: hero bez wymuszonej wysokości — na telefonie i tak
     wypełnia ekran samym nagłówkiem. */
  .hero-w--pod {
    min-height: 0;
    padding: calc(var(--header-h) + 2.25rem) 0 2.75rem;
  }

  /* Dźwignia wielkości auta na pełną szerokość, obie pozycje równe
     i ułożone w pion — podpis nie ściska się wtedy z nazwą. */
  .przelacznik {
    align-items: stretch;
    gap: 0.8rem;
  }
  .przelacznik__pole {
    width: 100%;
  }
  .przelacznik__poz {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 0.85rem;
  }
  .przelacznik__poz small {
    font-size: 0.64rem;
  }
  /* Lampa robocza znika poniżej 900 px, więc zapas nad kartami
     przestaje być potrzebny — tu liczy się każdy ekran przewijania. */
  .cennik {
    margin-top: 2.5rem;
  }

  .kontrola-w__cta .btn {
    width: 100%;
  }

  /* KONTAKT. Brama świeci w poziomie, a na telefonie kadr jest wąski —
     źródło schodzi niżej i bliżej krawędzi, żeby snop przechodził pod
     tekstem, a nie przez niego. Mapa dostaje kwadratowy kadr: przy
     panoramicznym z ulic zostawał pasek. */
  .hero-w--brama {
    min-height: 78vh;
  }
  .zrodlo-brama {
    left: -6%;
    top: 84%;
  }
  .zrodlo-kanalow {
    left: -6%;
  }
  .mapa-w {
    aspect-ratio: 1 / 1;
  }
  .zrodlo-mapy {
    left: 50%;
    top: 40%;
  }
  .hero-w--brama .hero-w__cta .btn,
  .formularz-w__stopka .btn {
    width: 100%;
  }
  .formularz-w__info {
    max-width: none;
  }

  /* BLOG. Szyna osi czasu zostaje — na telefonie to ona trzyma rytm
     kolumny — ale zwęża się razem z odstępem, żeby nie zjadała szerokości
     kafla. Lampa schodzi do środka kadru, bo hero jest tu wąskie. */
  .hero-w--notes,
  .hero-w--wpis {
    min-height: 66vh;
  }
  .zrodlo-notatnika {
    left: 42%;
    top: 26%;
  }
  .os-czasu {
    padding-left: 1.25rem;
  }
  .os-czasu__rok::before {
    left: calc(-1.25rem - 3px);
  }
  .tresc-w {
    font-size: 1.02rem;
    line-height: 1.7;
  }
  .cta-w__akcje .btn {
    width: 100%;
  }
}

/* Wąski telefon: usługi w JEDNEJ kolumnie. Dwie kolumny przy 375 px
   łamały tekst co słowo, a kafle z malunkiem i bez rwały rytm siatki.
   Malunki wracają do proporcji 16:9 — kolumna oddaje im pełną
   szerokość, kafel zostaje niski. */
@media (max-width: 599px) {
  .uslugi-w__siatka {
    grid-template-columns: 1fr;
  }
  .tafla--usluga .tafla__foto img {
    aspect-ratio: 16 / 9;
  }
  /* Przy 375 px napis „WSZYSTKIE OSIEMNAŚCIE USŁUG" łamał się na dwa
     wiersze — ciaśniejszy padding i o włos mniejsza litera mieszczą go
     w jednej linii, a przycisk i tak wychodzi na pełną szerokość. */
  .uslugi-w .uslugi-w__wszystkie {
    --listwa-oddech: 14px;
    padding: 1.05rem 1.2rem;
    padding-left: calc(var(--listwa-x) + var(--listwa-w) + var(--listwa-oddech));
    font-size: 0.95rem;
  }
  .tafla--usluga .ryte {
    font-size: 1.1rem;
  }
  .usluga-w__rzad {
    font-size: 0.75rem;
  }

  /* Pasmo galerii niższe — tafle i tak są małe (clamp od dołu),
     400 px toru to była czarna przerwa nad i pod nimi. */
  .anim .galeria-w__tor {
    height: 350px;
  }

  /* Wiersz „Pakiet specjalny…" pod pakietami łamie się na dwie linie —
     strzałka ma stać przy tekście, nie uciekać do prawej krawędzi. */
  .pakiety-w__stopka .strzalka {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tafla,
  .tafla__foto img {
    transition: none;
  }
}