/*
  Czyste Łapki — warstwa designu.
  Zasady i uzasadnienie: design.md. Fakty i ograniczenia: CLAUDE.md.

  Krótko: tło zawsze jasne (biel / ciepła biel / lekki róż), czerwień tylko na
  akcje i akcenty, jeden krój (Sora). Jedyny duży czerwony blok to „Panel myjni”
  — makieta panelu maszyny.
*/

/* ---------- Font: Sora (lokalnie, SIL OFL) ---------- */
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Regular.woff2") format("woff2"),
       url("fonts/Sora-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Medium.woff2") format("woff2"),
       url("fonts/Sora-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-SemiBold.woff2") format("woff2"),
       url("fonts/Sora-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Bold.woff2") format("woff2"),
       url("fonts/Sora-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-ExtraBold.woff2") format("woff2"),
       url("fonts/Sora-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}

/* ---------- Tokeny ---------- */
:root {
  --white: #ffffff;
  --paper: #faf6f2;
  --blush: #fdeceb;
  --red: #d42027;
  --red-ink: #a5161c;
  --graphite: #313c46;
  --slate: #5b646e;
  --hairline: #e9e4df;

  --max: 960px;
  --prose: 64ch;

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(49, 60, 70, 0.06), 0 18px 40px -18px rgba(49, 60, 70, 0.18);

  /* Jedna ikona łapki, nakładana maską w kolorze akcentu (design.md §6) */
  --paw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.2" cy="10" r="2.6"/><circle cx="11.6" cy="7.3" r="2.8"/><circle cx="17" cy="10" r="2.6"/><circle cx="8.8" cy="15" r="2.3"/><circle cx="14.4" cy="15" r="2.3"/><path d="M11.6 12.2c3 0 5.2 2 5.2 4.4 0 1.9-1.6 2.9-3.6 2.9-.8 0-1.1-.3-1.6-.3s-.8.3-1.6.3c-2 0-3.6-1-3.6-2.9 0-2.4 2.2-4.4 5.2-4.4z"/></svg>');
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* żeby kotwice nie chowały się pod sticky-headerem */
  background: var(--white); /* baza pod przezroczystymi sekcjami i warstwą łapek */
}

body {
  margin: 0;
  font-family: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  color: var(--graphite);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--red-ink); }

::selection { background: rgba(212, 32, 39, 0.16); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--s2);
  top: var(--s2);
  z-index: 20;
  background: var(--white);
  padding: var(--s1) var(--s2);
  border: 2px solid var(--red);
  border-radius: 8px;
  font-weight: 600;
}

/* ---------- Nagłówek strony ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding-block: var(--s2);
  padding-inline: max(var(--s3), calc((100% - var(--max)) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  white-space: nowrap;
}
.logo::before {
  content: "";
  flex: none;
  width: 1.4em;
  height: 1.4em;
  background: var(--red);
  -webkit-mask: var(--paw) center / contain no-repeat;
          mask: var(--paw) center / contain no-repeat;
}
.logo:hover,
.logo:focus-visible { color: var(--red); }

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}
.site-header nav a {
  color: var(--slate);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Sekcje: pełna szerokość tła, treść w kontenerze ---------- */
section {
  padding-block: var(--s6);
  padding-inline: max(var(--s3), calc((100% - var(--max)) / 2));
  /* lekko przezroczyste, żeby łapki z warstwy .paw-field prześwitywały pod treścią;
     karty i panel w środku zostają kryjące */
  background: rgba(255, 255, 255, 0.88);
}
/* Tint tylko tam, gdzie coś znaczy: „Jak to działa” daje kontrast czerwonemu
   panelowi, „Gdzie jesteśmy” to akcja, „Ambasadorzy” zamykają stronę. */
#jak-to-dziala,
#ambasadorzy { background: rgba(250, 246, 242, 0.88); }
#lokalizacje { background: rgba(253, 236, 235, 0.88); }

h1, h2, h3 { color: var(--graphite); }
h1, h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); margin: 0 0 var(--s3); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); margin: 0 0 var(--s3); }
h3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 var(--s1);
}

/* Krótka czerwona kreska nad nagłówkiem sekcji (design.md §3) */
section > h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--red);
  margin-bottom: var(--s3);
}

p { margin: 0 0 var(--s2); }
section > p:last-child { margin-bottom: 0; }

.podpis-sekcji {
  margin: 0 0 var(--s4);
  color: var(--slate);
  max-width: var(--prose);
}

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--s5);
}
.hero-logo {
  display: block;
  width: min(300px, 64vw);
  height: auto;
  margin-bottom: var(--s3);
}
.hero h1 { max-width: 16ch; }
.hero h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--red);
  margin: var(--s3) auto 0;
}
.hero .lead {
  font-size: 1.15rem;
  max-width: 52ch;
  color: var(--slate);
}

/* Nadkreślnik / tagi w stylu etykiet z panelu maszyny */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--s2);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--blush);
  color: var(--red-ink);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.godziny {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--s3);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--slate);
  font-size: 0.8rem;
  font-weight: 600;
}
.godziny::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* ---------- Ambasadorzy: sekcja zamykająca stronę ---------- */
#ambasadorzy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#ambasadorzy > h2 { margin-bottom: 0; }
#ambasadorzy > h2::before { margin-left: auto; margin-right: auto; }
#ambasadorzy .kicker { margin-bottom: var(--s2); }

.ambasadorzy {
  margin: var(--s3) 0 0;
  max-width: 460px;
}
.ambasadorzy img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}
.ambasadorzy figcaption {
  margin-top: var(--s2);
  font-size: 0.9rem;
  color: var(--slate);
}
.haslo {
  margin: var(--s4) 0 0;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--red-ink);
}

/* ---------- Przyciski ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0 0;
}
.hero .cta-row { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border: 2px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  background: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--blush); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover {
  background: var(--red-ink);
  border-color: var(--red-ink);
  color: #fff;
}

.cta-row--center { justify-content: center; }

/* Duży przycisk „Obserwuj nas na Facebooku" z pulsującą obwódką */
.btn-fb {
  font-size: 1.1rem;
  padding: 1.15rem 2.2rem;
  gap: 0.7rem;
  animation: fb-pulse 2.8s ease-out infinite;
}
.btn-fb:hover { transform: translateY(-3px) scale(1.03); }
.btn-fb:active { transform: translateY(0) scale(1); }
.btn-fb__ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>') center / contain no-repeat;
}
.btn-fb:hover .btn-fb__ico { animation: fb-wiggle 0.5s ease; }
@keyframes fb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(212, 32, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0); }
}
@keyframes fb-wiggle {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-14deg); }
  65%      { transform: rotate(12deg); }
}

/* ---------- Karty: Dlaczego my ---------- */
.karty {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.karty > li {
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.karty > li h3 {
  position: relative;
  padding-left: 2rem;
}
.karty > li h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--red);
  -webkit-mask: var(--paw) center / contain no-repeat;
          mask: var(--paw) center / contain no-repeat;
}
.karty > li p:last-child { margin-bottom: 0; }

/* ---------- Jak to działa (rozwijana instrukcja — klik) ---------- */
.jak-dziala {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  counter-reset: krok;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.jak-dziala > li { counter-increment: krok; }
.jak-dziala > li + li { border-top: 1px solid var(--hairline); }

/* Nagłówek kroku = klikalny summary */
.krok-tytul {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  font-weight: 700;
  color: var(--graphite);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}
.krok-tytul::-webkit-details-marker { display: none; }
.krok-tytul:hover { background: var(--paper); }
.jak-dziala details[open] > .krok-tytul { background: var(--paper); }

.krok-tytul::before {
  content: counter(krok);
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
}
.krok-tytul::after {
  content: "+";
  margin-left: auto;
  flex: none;
  color: var(--red);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.jak-dziala details[open] > .krok-tytul::after { transform: rotate(45deg); }

.krok-szczegoly {
  padding: 0 var(--s3) var(--s3);
  animation: krok-in 0.28s ease both;
}
@keyframes krok-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.krok-szczegoly img {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: var(--s2);
}
.krok-szczegoly p { margin: 0; }

@media (min-width: 620px) {
  .krok-szczegoly {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: var(--s3);
    align-items: center;
    padding-left: calc(var(--s3) + 30px + var(--s2));
  }
  .krok-szczegoly img { max-width: none; margin-bottom: 0; }
}

/* Karta „zobacz film” pod instrukcją */
.film {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.film-ikona {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
}
.film-ikona::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.film-tresc h3 { margin: 0 0 0.15rem; }
.film-tresc p { margin: 0 0 var(--s2); color: var(--slate); }
.film-tresc .btn { margin: 0; }
@media (max-width: 520px) {
  .film { flex-direction: column; align-items: flex-start; }
}

/* ---------- Panel myjni: cennik + programy (element sygnaturowy) ---------- */
.panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: var(--s4) 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.panel > h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1rem;
  margin-top: var(--s3);
}
.panel .info-box {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.panel .info-box + .info-box {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.panel .info-box h3 { color: #fff; margin-bottom: 0.25rem; }
.panel .info-box p { color: rgba(255, 255, 255, 0.92); }
.panel .info-box p:last-child { margin-bottom: 0; }
.panel .koszt-kwota {
  color: #fff;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.35rem;
}
.panel .programy {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.panel .programy li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 0.95rem;
}
.panel .programy li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(2px);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}
.panel .programy strong { color: #fff; }

/* ---------- Porównanie: myjnia vs dom ---------- */
.porownanie {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.porownanie th,
.porownanie td {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.porownanie thead th {
  background: var(--paper);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate);
}
.porownanie tbody td { background: var(--white); }
.porownanie tbody td:first-child { background: var(--blush); }
.porownanie tbody td:first-child::before {
  content: "\2713\00A0";
  color: var(--red);
  font-weight: 800;
}
.porownanie tbody td:last-child::before {
  content: "\2715\00A0";
  color: var(--slate);
  font-weight: 800;
}

/* ---------- Opinie ---------- */
.opinie {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.opinie blockquote {
  margin: 0;
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.opinie blockquote::before {
  content: "\201E";
  display: block;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--red);
  font-weight: 800;
  margin-bottom: var(--s1);
}
.opinie blockquote p { margin: 0 0 var(--s2); }
.opinie cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--slate);
}

/* ---------- Galeria klientów: nieskończony przewijak ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--s2);
  width: max-content;
  animation: przewijanie-galerii 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img {
  flex-shrink: 0;
  height: 200px;
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
@keyframes przewijanie-galerii {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (min-width: 620px) {
  .marquee-track img { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--s1); }
.faq details {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-weight: 700;
  color: var(--graphite);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--red);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\00D7"; }
.faq details p {
  margin: 0;
  padding: 0 var(--s3) var(--s3);
  color: var(--slate);
}

/* ---------- Lokalizacje ---------- */
.lokalizacje-lista {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lokalizacje-lista > li {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.lokalizacje-lista img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 4px);
}
.lokalizacje-lista h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lokalizacje-lista h3::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--red);
  -webkit-mask: var(--paw) center / contain no-repeat;
          mask: var(--paw) center / contain no-repeat;
}
.lokalizacje-lista > li p { margin: 0; }
.lokalizacje-lista .btn {
  margin-top: auto;
  align-self: flex-start;
}

.uwaga-starogard {
  max-width: var(--prose);
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  background: var(--blush);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--slate);
  font-size: 0.95rem;
}
.uwaga-starogard strong { color: var(--graphite); }
.uwaga-starogard a { color: var(--red-ink); }

/* ---------- Stopka ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(250, 246, 242, 0.88);
  border-top: 1px solid var(--hairline);
  padding: var(--s5) var(--s3);
  color: var(--slate);
  font-size: 0.9rem;
  text-align: center;
}
.site-footer > * {
  max-width: var(--max);
}
.site-footer p { margin: var(--s1) 0; }
.site-footer strong { color: var(--graphite); }
.site-footer strong::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
  vertical-align: -0.2em;
  background: var(--red);
  -webkit-mask: var(--paw) center / contain no-repeat;
          mask: var(--paw) center / contain no-repeat;
}
.site-footer a { color: var(--red-ink); font-weight: 600; }
.footer-logo {
  width: 120px;
  height: auto;
  margin: 0 auto var(--s2);
}

/* ================= Dopasowanie do telefonów ================= */

/* Nagłówek: wordmark w rzędzie, nawigacja pod spodem jako przewijany pasek */
@media (max-width: 720px) {
  .site-header { gap: var(--s1); }
  .site-header nav {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav a { white-space: nowrap; }
}

/* Porównanie „myjnia vs dom”: z tabeli na kartki jedna pod drugą */
@media (max-width: 620px) {
  .porownanie,
  .porownanie tbody,
  .porownanie tr,
  .porownanie td { display: block; width: 100%; }
  .porownanie thead { display: none; }
  .porownanie tr {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    margin-bottom: var(--s2);
    overflow: hidden;
  }
  .porownanie td { border: 0; }
  .porownanie tbody td + td { border-top: 1px solid var(--hairline); }
  .porownanie tbody td:first-child::before { content: "\2713\00A0 Myjnia: "; }
  .porownanie tbody td:last-child::before  { content: "\2715\00A0 Dom: "; }
}

/* ================= Animacje (etap „Później” z ROADMAP.md) =================
   Tło: chodzące łapki przez całą stronę, piana + błysk wody (panel) — czysty CSS.
   Reveale przy scrollu robi Motion (motion.dev) — patrz <script> w index.html;
   strona działa też bez tego skryptu. Wszystko wyłącza prefers-reduced-motion. */

/* --- Łapki w tle — rozrzucone po całym widoku, widoczne też na telefonach.
       Warstwa fixed pod treścią; sekcje mają lekko przezroczyste tło, więc łapki
       delikatnie prześwitują spod spodu i nie zasłaniają tekstu. --- */
.paw-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
main,
.site-footer { position: relative; z-index: 1; }
.paw-field span {
  position: absolute;
  width: 52px;
  height: 52px;
  background: var(--graphite);
  -webkit-mask: var(--paw) center / contain no-repeat;
          mask: var(--paw) center / contain no-repeat;
  opacity: 0;
  animation: paw-pop var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.paw-field span:nth-child(1) { left: 42.2%; top: 24.6%; --r: 14deg; --sc: 1.09; --dur: 15.0s; --d: 6.3s; }
.paw-field span:nth-child(2) { left: 67.6%; top: 68.2%; --r: -16deg; --sc: 0.76; --dur: 12.0s; --d: 1.9s; }
.paw-field span:nth-child(3) { left: 56.9%; top: 93.3%; --r: -16deg; --sc: 0.67; --dur: 15.0s; --d: 3.0s; }
.paw-field span:nth-child(4) { left: 78.6%; top: 58.8%; --r: 14deg; --sc: 0.65; --dur: 12.4s; --d: 10.9s; }
.paw-field span:nth-child(5) { left: 83.8%; top: 21.1%; --r: 14deg; --sc: 1.08; --dur: 13.5s; --d: 4.0s; }
.paw-field span:nth-child(6) { left: 54.9%; top: 59.6%; --r: -24deg; --sc: 0.91; --dur: 14.7s; --d: 14.0s; }
.paw-field span:nth-child(7) { left: 88.7%; top: 87.5%; --r: -24deg; --sc: 0.68; --dur: 13.9s; --d: 12.1s; }
.paw-field span:nth-child(8) { left: 29.4%; top: 89.7%; --r: -24deg; --sc: 1.1; --dur: 11.5s; --d: 8.9s; }
.paw-field span:nth-child(9) { left: 64.6%; top: 26.7%; --r: -9deg; --sc: 0.97; --dur: 15.2s; --d: 9.3s; }
.paw-field span:nth-child(10) { left: 84.3%; top: 76.9%; --r: -9deg; --sc: 0.86; --dur: 15.6s; --d: 1.0s; }
.paw-field span:nth-child(11) { left: 38.2%; top: 58.1%; --r: 22deg; --sc: 1.03; --dur: 13.0s; --d: 6.2s; }
.paw-field span:nth-child(12) { left: 12.7%; top: 67.9%; --r: 8deg; --sc: 0.8; --dur: 15.3s; --d: 7.9s; }
.paw-field span:nth-child(13) { left: 5.5%; top: 37.5%; --r: 22deg; --sc: 0.74; --dur: 13.7s; --d: 13.9s; }
.paw-field span:nth-child(14) { left: 3.3%; top: 5.9%; --r: 14deg; --sc: 0.76; --dur: 12.0s; --d: 6.9s; }
.paw-field span:nth-child(15) { left: 35.8%; top: 42.1%; --r: -9deg; --sc: 0.96; --dur: 13.7s; --d: 3.7s; }
.paw-field span:nth-child(16) { left: 78.3%; top: 36.0%; --r: 22deg; --sc: 0.74; --dur: 14.4s; --d: 9.4s; }
.paw-field span:nth-child(17) { left: 81.2%; top: 1.0%; --r: 8deg; --sc: 0.89; --dur: 15.3s; --d: 5.1s; }
.paw-field span:nth-child(18) { left: 29.0%; top: 77.1%; --r: 14deg; --sc: 0.95; --dur: 16.2s; --d: 7.3s; }
.paw-field span:nth-child(19) { left: 65.9%; top: 11.5%; --r: 22deg; --sc: 1.02; --dur: 13.7s; --d: 6.4s; }
.paw-field span:nth-child(20) { left: 28.7%; top: 8.0%; --r: -24deg; --sc: 0.72; --dur: 17.9s; --d: 7.1s; }
.paw-field span:nth-child(21) { left: 3.8%; top: 90.9%; --r: -24deg; --sc: 0.62; --dur: 12.1s; --d: 1.6s; }
.paw-field span:nth-child(22) { left: 7.8%; top: 51.3%; --r: -16deg; --sc: 0.93; --dur: 12.0s; --d: 4.0s; }
.paw-field span:nth-child(23) { left: 7.6%; top: 21.7%; --r: -24deg; --sc: 0.68; --dur: 14.4s; --d: 15.6s; }
.paw-field span:nth-child(24) { left: 59.7%; top: 37.8%; --r: -16deg; --sc: 0.67; --dur: 13.4s; --d: 4.2s; }
@keyframes paw-pop {
  0%,
  100%  { opacity: 0; transform: rotate(var(--r, 0deg)) scale(calc(var(--sc, 1) * 0.7)); }
  12%   { opacity: 0.66; transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)); }
  46%   { opacity: 0.66; transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateY(-9px); }
  64%   { opacity: 0; transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateY(-16px); }
}

/* --- Panel myjni: piana i przesuwający się błysk wody --- */
.panel-foam {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.panel-foam span {
  position: absolute;
  bottom: -32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.4);
  opacity: 0;
  animation: foam-rise var(--d, 11s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}
.panel-foam span:nth-child(1) { left: 8%;  width: 14px; height: 14px; --d: 9s;    --delay: 0s; }
.panel-foam span:nth-child(2) { left: 22%; width: 22px; height: 22px; --d: 12s;   --delay: 2s; }
.panel-foam span:nth-child(3) { left: 37%; width: 11px; height: 11px; --d: 8s;    --delay: 1s; }
.panel-foam span:nth-child(4) { left: 52%; width: 18px; height: 18px; --d: 11s;   --delay: 3.5s; }
.panel-foam span:nth-child(5) { left: 68%; width: 13px; height: 13px; --d: 9.5s;  --delay: 2.6s; }
.panel-foam span:nth-child(6) { left: 81%; width: 20px; height: 20px; --d: 13s;   --delay: 1.4s; }
.panel-foam span:nth-child(7) { left: 92%; width: 10px; height: 10px; --d: 8s;    --delay: 4.2s; }
@keyframes foam-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  12%  { opacity: 0.95; }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-240px) scale(1); }
}
.panel::after {
  content: "";
  position: absolute;
  inset: -60% -25%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgba(255, 255, 255, 0.12) 44%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.12) 56%,
    transparent 66%
  );
  animation: water-sheen 6.5s ease-in-out infinite;
}
@keyframes water-sheen {
  0%, 100% { transform: translateX(-48%); }
  50%      { transform: translateX(48%); }
}

/* ---------- Ruch: wyłącz wszystko przy prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .paw-field,
  .panel-foam,
  .panel::after { display: none; }
  .btn-fb { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}