/* ═══════════════════════════════════════════════════════════════════
   Pomoc Drogowa Zgorzelec — arkusz stylów
   Samodzielny. Nie wymaga Tailwinda ani bundla Astro.
   Każda klasa użyta w HTML jest zdefiniowana tutaj.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonty (self-hosted, bez CDN) ───────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/fonts/inter-display-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ── Tokeny ─────────────────────────────────────────────────────── */
:root {
  /* Powierzchnie — drabina od tła strony do elementów wypukłych.
     Każdy szczebel ma własny kolor, nie przezroczystość: przezroczyste
     warstwy kumulują się i tracą przewidywalność przy nakładaniu. */
  --ink-900: #0d0d0f;
  --ink-800: #141418;
  --ink-700: #1b1b21;
  --ink-600: #22222a;

  --line: #2a2a33;
  --line-strong: #3d3d48;

  --fg: #f4f4f5;
  --fg-muted: #a6a6b0;
  /* #74747f dawało 4,1:1 na tle strony — poniżej progu 4,5:1.
     Ten odcień trafia na etykiety i stopkę, więc musi przejść. */
  --fg-dim: #8b8b96;

  /* Bursztyn — kolor marki. Tekst NA bursztynie jest zawsze ciemny
     (kontrast 12,4:1). Biały dawał 1,75:1, poniżej progu WCAG. */
  --amber: #facc15;
  --amber-bright: #fde047;
  --amber-deep: #eab308;
  --amber-wash: rgba(250, 204, 21, 0.1);
  --on-amber: #17170d;

  --green: #22c55e;
  --green-deep: #16a34a;

  /* Skala typograficzna — stosunek 1,25, płynna przez clamp().
     Dzięki temu nie ma skokowych zmian rozmiaru na breakpointach. */
  --step-00: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.0625rem, 0.99rem + 0.36vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
  --step-3: clamp(1.5rem, 1.24rem + 1.3vw, 2.05rem);
  --step-4: clamp(1.85rem, 1.35rem + 2.5vw, 2.9rem);
  --step-5: clamp(2.3rem, 1.4rem + 4.4vw, 4.2rem);

  /* Rytm pionowy — jedna skala dla odstępów wewnątrz i między sekcjami */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: clamp(3.25rem, 2rem + 5vw, 5.5rem);

  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;

  --ring: 0 0 0 3px rgba(250, 204, 21, 0.45);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  /* Szerokość treści. 72rem to ~1150px — powyżej tego wiersze tekstu
     robią się za długie i oko gubi początek następnej linii. */
  --wrap: 72rem;
  --wrap-narrow: 42rem;

  --z-header: 20;
  --z-callbar: 30;
  --z-consent: 50;

  color-scheme: dark;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kotwice nie chowają się pod przyklejonym nagłówkiem */
  scroll-padding-top: 5.5rem;
}

body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Miejsce na przyklejony pasek telefonu na mobile */
  padding-bottom: env(safe-area-inset-bottom);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Widoczny focus na wszystkim, co klikalne — wymóg dostępności */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ── Typografia ─────────────────────────────────────────────────── */
h1,
h2,
h3 {
  font-family: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3 {
  font-size: var(--step-1);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

/* Długość wiersza 60–70 znaków. Powyżej tego czytelność wyraźnie spada. */
.lede {
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 34ch;
}

.prose {
  color: var(--fg-muted);
  max-width: 62ch;
}

.muted {
  color: var(--fg-muted);
}

.dim {
  color: var(--fg-dim);
}

/* Nadtytuł sekcji */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step-00);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.eyebrow::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 2px;
  background: var(--amber);
  flex: none;
}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap {
  inline-size: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--s-9);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-end: var(--s-7);
  max-width: 46ch;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Siatka auto-dopasowująca. Kluczowa zmiana wobec poprzedniej wersji:
   nie ma tu breakpointów do zgubienia — kolumny wynikają z dostępnej
   szerokości, więc układ nie może „zapomnieć" o wariancie md/lg. */
/* 20rem min → trzy kolumny na desktopie, dwie na tablecie, jedna na
   telefonie. Sześć kart usług układa się w 2 równe rzędy po 3. */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* Węższy próg → cztery kolumny na desktopie. Dla sekcji z 4 krokami. */
.grid-4 {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.grid-2 {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

/* ── Przyciski ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  /* 44px minimalnej wysokości — próg wygodnego celu dotykowego */
  min-block-size: 2.75rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex: none;
}

.btn-primary {
  background: var(--amber);
  color: var(--on-amber);
}

.btn-primary:hover {
  background: var(--amber-bright);
}

.btn-whatsapp {
  background: var(--green-deep);
  color: #fff;
}

.btn-whatsapp:hover {
  background: var(--green);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-lg {
  min-block-size: 3.5rem;
  padding: 1rem 2rem;
  font-size: var(--step-1);
}

.btn-block {
  display: flex;
  inline-size: 100%;
}

/* ── Nagłówek ───────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(13, 13, 15, 0.82);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}

/* Własna klasa zamiast `.site-header .wrap` — tamten selektor wygrywał
   specyficznością z `.nav-mobile` i zamieniał panel menu w rząd flex. */
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-block-size: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

.brand-name {
  font-family: "Inter Display", sans-serif;
  font-size: var(--step-00);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.brand-name b {
  display: block;
  color: var(--amber);
  font-weight: 600;
}

.nav {
  display: none;
  gap: var(--s-1);
  margin-inline: auto;
}

.nav a {
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.nav a:hover {
  color: var(--fg);
  background: var(--ink-700);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--fg);
}

.nav-toggle[aria-expanded="true"] {
  border-color: var(--amber);
  color: var(--amber);
}

/* Panel nawigacji na mobile — wysuwany spod nagłówka */
.nav-mobile {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) 0 var(--s-5);
  border-block-start: 1px solid var(--line);
}

.nav-mobile[hidden] {
  display: none;
}

.nav-mobile a {
  padding: 0.85rem 0.5rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  color: var(--fg-muted);
}

.nav-mobile a:hover {
  color: var(--fg);
  background: var(--ink-700);
}

/* Poniżej 62rem nagłówek się zwija: WhatsApp i pełny numer siedzą już
   w przyklejonym pasku na dole, więc w górze zostaje sama ikona
   słuchawki i hamburger. Inaczej rząd nie mieści się na 390 px. */
@media (max-width: 61.999rem) {
  .header-actions .btn-whatsapp {
    display: none;
  }
  .header-actions .btn-text {
    display: none;
  }
  .header-actions .btn-primary {
    padding-inline: 0.9rem;
  }
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
  }
  .nav-toggle,
  .nav-mobile {
    display: none;
  }
  .header-actions {
    margin-inline-start: 0;
  }
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--s-7) var(--s-8);
  display: grid;
  gap: var(--s-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-9);
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Wskaźnik dostępności — najmocniejszy sygnał zaufania dla kogoś,
   kto stoi na poboczu o trzeciej w nocy */
.live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--step-00);
  font-weight: 600;
  color: var(--fg-muted);
}

.live-dot {
  position: relative;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--r-full);
  background: var(--green);
  flex: none;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  animation: ping 2s var(--ease) infinite;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.checklist {
  display: grid;
  gap: var(--s-3);
}

.checklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s-3);
  align-items: start;
  color: var(--fg-muted);
}

.checklist svg {
  margin-block-start: 0.28em;
  color: var(--amber);
}

/* Panel z danymi — prawa kolumna hero */
.panel {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
}

.stat-num {
  display: block;
  font-family: "Inter Display", sans-serif;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--amber);
  margin-block-end: var(--s-2);
}

.stat-label {
  font-size: var(--step-00);
  color: var(--fg-muted);
  line-height: 1.45;
}

.panel-foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}

/* ── Karty ──────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
  flex: 1;
}

/* Cała karta jest linkiem — powiększony cel kliknięcia zamiast
   samego napisu na dole. Pseudoelement rozciąga obszar klikalny. */
.card-link {
  position: relative;
}

.card-link:hover {
  border-color: var(--line-strong);
  background: var(--ink-700);
  transform: translateY(-2px);
}

.card-link:focus-within {
  border-color: var(--amber);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-md);
  background: var(--amber-wash);
  color: var(--amber);
  margin-block-end: var(--s-1);
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--amber);
}

.card-more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link:hover .card-more {
  color: var(--amber-bright);
}

.card-more svg {
  transition: transform var(--dur) var(--ease);
}

.card-link:hover .card-more svg {
  transform: translateX(3px);
}

/* ── Kroki (jak zgłosić awarię) ─────────────────────────────────── */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-full);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: "Inter Display", sans-serif;
  font-weight: 600;
  font-size: var(--step-0);
}

.step p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* ── Obszar działania ───────────────────────────────────────────── */
.slab {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tag {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-size: var(--step-00);
  color: var(--fg-muted);
}

.tag-strong {
  border-color: var(--amber);
  color: var(--amber);
}

.tag-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-block-end: var(--s-3);
}

/* ── Opinie ─────────────────────────────────────────────────────── */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.quote p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.quote footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}

.quote cite {
  font-style: normal;
  font-size: var(--step-00);
  font-weight: 700;
}

.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--amber);
}

.verify {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verify:hover {
  color: var(--amber);
}

/* ── CTA ze zdjęciem ────────────────────────────────────────────── */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--s-5);
  text-align: center;
  isolation: isolate;
}

.cta img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Gradient zamiast płaskiej czarnej płachty: zdjęcie zostaje czytelne
   przy krawędziach, a tekst i tak siedzi na ciemnym tle. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse 65% 75% at center,
      rgba(13, 13, 15, 0.92) 0%,
      rgba(13, 13, 15, 0.72) 55%,
      rgba(13, 13, 15, 0.3) 100%
    ),
    linear-gradient(rgba(13, 13, 15, 0.55), rgba(13, 13, 15, 0.55));
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  max-inline-size: 32rem;
  margin-inline: auto;
}

/* ── Stopka ─────────────────────────────────────────────────────── */
.site-footer {
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--s-9);
  padding-block: var(--s-8) var(--s-6);
}

.footer-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.footer-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-block-end: var(--s-4);
}

.footer-links {
  display: grid;
  gap: var(--s-1);
}

.footer-links a {
  padding-block: 0.35rem;
  color: var(--fg-muted);
  font-size: 0.9375rem;
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover {
  color: var(--amber);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--step-00);
  color: var(--fg-dim);
}

.footer-bar a:hover {
  color: var(--fg-muted);
}

.colophon {
  text-align: center;
  margin-block-start: var(--s-6);
  font-size: 0.75rem;
}

.colophon a {
  color: #4a4a55;
  transition: color var(--dur) var(--ease);
}

.colophon a:hover {
  color: var(--amber);
}

/* ── Przyklejony pasek telefonu (mobile) ────────────────────────── */
/* Na tej stronie liczy się jedna rzecz: żeby numer był zawsze pod
   kciukiem. Pasek zabiera 4,5rem u dołu i oddaje je body przez padding. */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-callbar);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2);
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(13, 13, 15, 0.95);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 62rem) {
  .callbar {
    display: none;
  }
}

@media (max-width: 61.999rem) {
  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

/* ── Baner zgody ────────────────────────────────────────────────── */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-consent);
  background: var(--ink-800);
  border-block-start: 1px solid var(--line-strong);
  padding: var(--s-4) var(--s-5);
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  max-inline-size: var(--wrap);
  margin-inline: auto;
}

.consent p {
  flex: 1;
  min-inline-size: 15rem;
  font-size: var(--step-00);
  color: var(--fg-muted);
}

.consent a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  display: flex;
  gap: var(--s-3);
  flex: none;
}

/* ── Skip link ──────────────────────────────────────────────────── */
.skip {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -6rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--amber);
  color: var(--on-amber);
  border-radius: var(--r-md);
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}

.skip:focus {
  top: var(--s-3);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Animacja wejścia ───────────────────────────────────────────── */
/* Zasada bezpieczeństwa: treść jest domyślnie WIDOCZNA. Ukrywa ją
   dopiero skrypt, dodając .js-anim na <html>. Bez JS, przy błędzie
   skryptu albo w starym WebView strona po prostu się wyświetla. */
.js-anim [data-a] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js-anim [data-a].in {
  opacity: 1;
  transform: none;
}

.js-anim [data-a][data-d="1"] {
  transition-delay: 60ms;
}
.js-anim [data-a][data-d="2"] {
  transition-delay: 120ms;
}
.js-anim [data-a][data-d="3"] {
  transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-anim [data-a] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .live-dot::after {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PODSTRONY — okruszki, treść artykułu, FAQ, kafle usług
   ═══════════════════════════════════════════════════════════════════ */

/* ── Okruszki ───────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step-00);
  color: var(--fg-dim);
}

.breadcrumb a {
  color: var(--fg-muted);
  transition: color var(--dur) var(--ease);
}

.breadcrumb a:hover {
  color: var(--amber);
}

.breadcrumb svg {
  color: var(--fg-dim);
}

/* ── Nagłówek podstrony ─────────────────────────────────────────── */
.page-hero {
  padding-block: var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: flex-start;
  max-inline-size: 46rem;
}

.page-hero h1 {
  font-size: var(--step-4);
}

/* ── Treść artykułu ─────────────────────────────────────────────── */
/* Jedna kolumna 68ch. Odstępy sterowane przez rodzeństwo (lobotomized
   owl), więc nie trzeba pamiętać o marginesach przy każdym elemencie. */
.article {
  max-inline-size: 68ch;
  min-inline-size: 0;
}

/* Odstępy przypisane do ELEMENTU, nie do bezpośredniego dziecka.
   Treść przeniesiona ze starego szablonu bywa opakowana w warstwy
   pustych <div>, więc reguła `> * + *` gubiłaby rytm na zagnieżdżeniach.
   :where() trzyma specyficzność na zerze — nadpisanie klasą działa. */
.article :where(p, ul, ol, table, .faq, .chips, div, blockquote) {
  margin-block-start: var(--s-4);
}

.article :where(h2) {
  margin-block-start: var(--s-8);
  font-size: var(--step-3);
}

.article :where(h3) {
  margin-block-start: var(--s-5);
}

.article :where(:first-child) {
  margin-block-start: 0;
}

.article p,
.article li {
  color: var(--fg-muted);
}

.article strong {
  color: var(--fg);
  font-weight: 700;
}

.article a:not(.btn):not(.chip-link) {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article a:not(.btn):not(.chip-link):hover {
  color: var(--amber-bright);
}

.article code {
  padding: 0.15em 0.4em;
  background: var(--ink-700);
  border-radius: var(--r-sm);
  font-size: 0.9em;
}

.article ol,
.article ul {
  display: grid;
  gap: var(--s-3);
  padding-inline-start: 0;
}

.article ol {
  counter-reset: step;
}

/* Wcięcie wiszące zamiast siatki. Siatka rozbijała każdy <li>, który
   zaczyna się od elementu inline — np. <li><strong>Miasto:</strong> reszta</li>
   — bo tekst po <strong> lądował w nowej, 20-pikselowej komórce.
   Pozycjonowanie absolutne punktora jest odporne na dowolną zawartość. */
.article ol > li {
  position: relative;
  padding-inline-start: 2.5rem;
  counter-increment: step;
  min-block-size: 1.75rem;
}

.article ol > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--r-full);
  background: var(--amber-wash);
  color: var(--amber);
  font-size: var(--step-00);
  font-weight: 700;
}

.article ul > li {
  position: relative;
  padding-inline-start: 1.4rem;
}

.article ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.3rem;
  inset-block-start: 0.62em;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: var(--r-full);
  background: var(--amber);
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}

.faq-item {
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.faq-item h3 {
  margin-block-end: var(--s-2);
}

.faq-item p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

/* ── Kafle „inne usługi" ────────────────────────────────────────── */
.chips {
  display: grid;
  gap: var(--s-3);
  /* 20rem → trzy kolumny, czyli sześć kafli w dwóch równych rzędach.
     Przy węższym progu wychodziło 5 + 1 sierota w drugim rzędzie. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.chip-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.chip-link svg {
  color: var(--amber);
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.chip-link:hover {
  background: var(--ink-700);
  border-color: var(--line-strong);
}

.chip-link:hover svg {
  transform: translateX(3px);
}

/* ── Układ podstrony: treść + przyklejona karta kontaktu ────────── */
/* Sam artykuł na 68ch zostawiał pustą prawą połowę ekranu 1440 px.
   Karta wypełnia ją treścią, która i tak jest celem strony: numerem. */
.article-layout {
  display: grid;
  gap: var(--s-7);
  align-items: start;
  /* minmax(0,…) zamiast domyślnego auto: bez tego szeroka tabela w treści
     rozpycha kolumnę siatki ponad szerokość ekranu, bo element siatki ma
     domyślnie min-width:auto = rozmiar zawartości. */
  grid-template-columns: minmax(0, 1fr);
}

.article-layout > * {
  min-inline-size: 0;
}

@media (min-width: 64rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s-9);
  }
  .aside-card {
    position: sticky;
    top: 6rem;
  }
}

.aside-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.aside-card h2 {
  font-size: var(--step-1);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aside-facts {
  display: grid;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}

.aside-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--step-00);
}

.aside-fact dt {
  color: var(--fg-dim);
}

.aside-fact dd {
  margin: 0;
  font-weight: 700;
  color: var(--fg);
  text-align: right;
}

/* ── Tabela (cennik) ────────────────────────────────────────────── */
/* Zawijana w kontener z overflow-x — szeroka tabela przewija się sama,
   zamiast rozpychać całą stronę w poziomie na telefonie. */
.table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.table-wrap table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table-wrap th,
.table-wrap td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-block-end: 1px solid var(--line);
}

.table-wrap th {
  background: var(--ink-800);
  font-weight: 700;
  font-size: var(--step-00);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.table-wrap td {
  color: var(--fg-muted);
}

.table-wrap tr:last-child th,
.table-wrap tr:last-child td {
  border-block-end: 0;
}

.table-wrap tbody tr:hover td {
  background: var(--ink-800);
}

/* ── Karta wpisu na blogu ───────────────────────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.post-card:hover {
  background: var(--ink-700);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.post-card h2,
.post-card h3 {
  font-family: "Inter", sans-serif;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.post-card p {
  color: var(--fg-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* ── Numer kroku w artykule ─────────────────────────────────────── */
/* Poradniki na blogu numerują sekcje osobnym <span>1</span> przed
   nagłówkiem. Bez stylu zostawała goła cyfra wisząca nad tytułem. */
.article .step-marker {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--r-full);
  background: var(--amber-wash);
  color: var(--amber);
  font-size: var(--step-00);
  font-weight: 700;
  margin-block-end: var(--s-2);
}