/* ==========================================================================
   PROBET S.C. – węgiel, pellet, skup złomu Kłobuck
   Statyczny arkusz stylów. Bez frameworków, bez CDN, bez Google Fonts.

   Paleta: antracyt (baza) + czerwień z logo firmy (opał) + stal (złom).
   Czerwień jest wzięta wprost ze znaku "PROBET" – firma się w niej rozpozna.
   Odcień przyciemniony do #c81e1e, żeby biały tekst na przyciskach
   spełniał kontrast WCAG AA.
   ========================================================================== */

:root {
  --graphite:   #111827;
  --graphite-2: #1f2937;
  --graphite-3: #374151;
  --amber:      #c81e1e;
  --amber-dark: #a01717;
  --amber-soft: #fef2f2;
  --steel:      #0369a1;
  --steel-soft: #f0f9ff;
  --bg:         #f8fafc;
  --card:       #ffffff;
  --text:       #3f4a5a;
  --muted:      #64748b;
  --border:     #e2e8f0;
  --radius:     14px;
  --shadow:     0 1px 3px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* <picture> z WebP wstawia build.ps1 – sama oprawa nie może zmieniać układu */
picture { display: contents; }
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--graphite); line-height: 1.22; margin: 0 0 .6em; font-weight: 800; }
h1 { font-size: clamp(1.85rem, 4.6vw, 3.05rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); letter-spacing: -.015em; }
h3 { font-size: 1.14rem; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.3em; }
li { margin-bottom: .5em; }
strong { color: var(--graphite); font-weight: 700; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 840px; margin: 0 auto; padding: 0 20px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Przyciski --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .18s, box-shadow .18s, transform .18s, color .18s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary  { background: var(--amber); color: #fff; box-shadow: 0 4px 12px rgba(200,30,30,.3); }
.btn-primary:hover { background: var(--amber-dark); color: #fff; }
.btn-steel    { background: var(--steel); color: #fff; box-shadow: 0 4px 12px rgba(3,105,161,.28); }
.btn-steel:hover { background: #075985; color: #fff; }
.btn-ghost    { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-outline  { background: #fff; color: var(--graphite); border-color: #cbd5e1; }
.btn-outline:hover { border-color: var(--graphite-3); color: var(--graphite); }
.btn-lg { padding: 16px 32px; font-size: 1.06rem; }
.btn svg { flex: none; }
/* Ikona bez width/height rozlałaby się na cały przycisk – zabezpieczenie */
.btn svg:not([width]) { width: 1.25em; height: 1.25em; }

/* --- Nagłówek ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; }
.logo img { height: 40px; width: auto; }
/* „34 lata na rynku (od 1992 r.)” obok logo – liczbę lat przelicza build.ps1 i app.js */
.staz {
  margin: 0 auto 0 0; padding-left: 14px; border-left: 1px solid var(--border);
  flex: 0 1 auto; min-width: 0;
  color: #475569; font-size: .84rem; font-weight: 600; line-height: 1.2;
}
.staz b { color: var(--amber); font-weight: 800; font-size: 1.12em; white-space: nowrap; }
.staz small { display: block; color: #94a3b8; font-size: .9em; font-weight: 600; }
/* Niski baner „Jesteśmy na rynku już 34 lata (od 1992 roku)” – wygląda jak przycisk,
   ale się go nie klika. Wstawia go build.ps1 (dane\baner-staz.html) pod zdjęciem
   (znacznik <!--STAZ-->) albo nad godzinami otwarcia. */
.staz-baner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 800px; margin: 18px auto 24px; padding: 15px 30px;
  border-radius: 999px; border: 1px solid rgba(253,230,138,.35);
  background: linear-gradient(100deg, #111827 0%, #1f2937 55%, #4a1414 100%);
  color: #e5e7eb; font-weight: 700; font-size: 1.24rem; line-height: 1.3; text-align: center;
  box-shadow: 0 12px 28px -14px rgba(15,23,42,.75);
}
.staz-baner svg { width: 38px; height: 38px; flex: none; color: #fde68a; }
.staz-baner b { color: #fde68a; font-size: 1.14em; white-space: nowrap; }
.staz-baner small { color: #94a3b8; font-weight: 600; font-size: .84em; white-space: nowrap; }
.staz-wrap { padding-top: 10px; }   /* baner zaraz pod nagłówkiem strony */
@media (max-width: 520px) { .staz-baner { font-size: 1.06rem; padding: 12px 18px; gap: 10px; border-radius: 20px; } .staz-baner svg { width: 32px; height: 32px; } }
.main-nav a, .header-phone { white-space: nowrap; }
/* Wąski desktop: logo, „34 lata”, menu i telefon muszą się zmieścić w jednym rzędzie */
@media (min-width: 1000px) and (max-width: 1199px) {
  .logo img { height: 34px; }
  .main-nav { gap: 14px; }
}
@media (max-width: 520px) {
  .logo img { height: 30px; }
  .header-bar { gap: 10px; }
  .staz { padding-left: 10px; font-size: .74rem; }
}
.main-nav { display: none; gap: 20px; }
.main-nav a { color: #475569; font-weight: 600; font-size: .94rem; }
.main-nav a:hover { color: var(--amber); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--amber); border-bottom: 2px solid var(--amber); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--graphite); color: #fff; border: 0; cursor: pointer;
}
#mobile-menu { display: none; padding-bottom: 14px; }
/* Menu siedzi w przyklejonym nagłówku – bez limitu wysokości jego koniec („Kontakt i dojazd”)
   chował się pod paskiem z numerami i nie dało się go przewinąć. 140 px = nagłówek + pasek. */
#mobile-menu.open {
  display: block; overflow-y: auto; overscroll-behavior: contain;
  max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px);
}
#mobile-menu a {
  display: block; padding: 12px 4px; color: var(--graphite);
  font-weight: 600; border-bottom: 1px solid var(--border);
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--graphite);
  color: #e2e8f0;
  padding: 56px 0 64px;
  overflow: hidden;
}
/* Tło: pryzma ekogroszku o zmierzchu (hero-sklad-wegla-klobuck.jpg, 24.10.2026).
   Zdjęcie samo jest ciemne, pryzma stoi po prawej, a po lewej jest spokojne niebo –
   dlatego gradient przyciemnia głównie lewą stronę, pod tekstem (kontrast AA),
   a pryzmę zostawia widoczną. Na telefonie tekst zajmuje całą szerokość, więc
   przyciemnienie jest równe. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/hero-sklad-wegla-klobuck.jpg") 72% center / cover no-repeat;
  background-image: image-set(url("../images/hero-sklad-wegla-klobuck.webp") type("image/webp"), url("../images/hero-sklad-wegla-klobuck.jpg") type("image/jpeg"));
  opacity: .95;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(17,24,39,.80) 0%, rgba(17,24,39,.50) 55%, rgba(17,24,39,.12) 100%),
    linear-gradient(180deg, rgba(17,24,39,0) 55%, rgba(17,24,39,.85) 100%),
    radial-gradient(70% 90% at 85% 10%, rgba(200,30,30,.22), transparent 62%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(180deg, rgba(17,24,39,.55) 0%, rgba(17,24,39,.88) 100%); }
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: .45em; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero h1 em { font-style: normal; color: #fca5a5; }
.hero h1 .h1-pellet, .page-head h1 .h1-pellet { color: #fde68a; }   /* pastelowy żółty – kolor jasnego drewna */
.hero-lead { font-size: 1.14rem; color: #cbd5e1; max-width: 44ch; margin-bottom: 1.6em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

/* Godziny i płatność kartą na pierwszym ekranie (jak na starej stronie, gdzie
   godziny były od razu na górze). Godziny są też w bloku „Godziny otwarcia”
   w _src/index.html – zmieniając godziny, popraw oba miejsca. */
.hero-info { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: -.4em 0 1.6em; }
.hero-info p {
  margin: 0; display: inline-flex; align-items: center; gap: .5em;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  color: #e2e8f0; font-size: .98rem;
}
.hero-info p { flex-wrap: wrap; max-width: 100%; }   /* na wąskim telefonie godziny łamią się, a nie wychodzą za ekran */
@media (max-width: 520px) { .hero-info p { border-radius: 16px; row-gap: 2px; } .hero-godziny .kropka { display: none; } .hero-godziny b + .kropka + b { flex-basis: 100%; padding-left: calc(1.3em + .5em); } }
.hero-info b { color: #fff; white-space: nowrap; }
.hero-info svg { width: 1.3em; height: 1.3em; flex: none; color: #fca5a5; }
.hero-info .hero-karta { color: #fff; font-weight: 700; background: rgba(21,128,61,.55); border-color: rgba(134,239,172,.45); }
.hero-info .hero-karta svg { color: #bbf7d0; }
.fact--karta b { display: flex; align-items: center; gap: .35em; }
.fact--karta svg { width: 1em; height: 1em; flex: none; color: #86efac; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(200,30,30,.16); color: #fdba74;
  border: 1px solid rgba(200,30,30,.35);
  padding: 6px 15px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 640px; }
.fact {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 14px 16px;
}
.fact b { display: block; color: #fff; font-size: 1.5rem; line-height: 1.2; }
.fact span { font-size: .86rem; color: #94a3b8; }

/* --- Sekcje ------------------------------------------------------------ */
section { padding: 58px 0; }
.section-head { max-width: 62ch; margin-bottom: 34px; }
.section-head p { color: var(--muted); font-size: 1.06rem; margin: 0; }
.bg-white { background: #fff; }
.bg-steel { background: var(--steel-soft); }
.bg-dark  { background: var(--graphite); color: #cbd5e1; }
.bg-dark h2, .bg-dark h3 { color: #fff; }

/* --- Moduł „cena pod telefonem" ---------------------------------------- */
.price-note {
  background: var(--amber-soft);
  border: 1px solid #fed7aa;
  border-left: 5px solid var(--amber);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: grid; gap: 20px;
}
.price-note h2 { margin: 0 0 .35em; font-size: 1.35rem; }
.price-note p { margin: 0 0 .8em; }
.price-note p:last-of-type { margin-bottom: 0; }
.price-note .why { color: var(--muted); font-size: .96rem; }
.price-note-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Karty oferty ------------------------------------------------------ */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(15,23,42,.08), 0 18px 36px -18px rgba(15,23,42,.35); }
.card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* Kafelek w miejscu zdjęcia, którego jeszcze nie ma w www/images.
   Wstawia go build.ps1 – wygląda jak ilustracja, nie jak dziura po obrazku.
   Gdy plik o tej nazwie się pojawi, kolejny build podstawi zwykłe <img>.
   Lista nazw i prompty: PROMPTY-GRAFIKI.md. */
.foto-zast {
  width: 100%; aspect-ratio: 3/2; display: grid; place-items: center;
  background:
    radial-gradient(80% 90% at 78% 12%, rgba(200,30,30,.30), transparent 60%),
    linear-gradient(150deg, var(--graphite-2) 0%, var(--graphite) 100%);
  color: #fca5a5; border-radius: var(--radius);
}
.foto-zast svg { width: 30%; max-width: 116px; height: auto; }
.foto-zast--stal {
  background:
    radial-gradient(80% 90% at 78% 12%, rgba(56,189,248,.26), transparent 60%),
    linear-gradient(150deg, #1e3a4c 0%, #0f1f2b 100%);
  color: #bae6fd;
}
.card .foto-zast { border-radius: 0; }
.card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .4em; }
.card-body p { color: var(--muted); font-size: .97rem; margin-bottom: 1em; }
.card-body .more { margin-top: auto; font-weight: 700; color: var(--amber); }
.card-body .more::after { content: " →"; }
.tag {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.tag-coal  { background: var(--amber-soft); color: var(--amber-dark); }
.tag-steel { background: var(--steel-soft); color: var(--steel); }

/* --- Lista sortymentów ------------------------------------------------- */
.sorts { display: grid; gap: 12px; grid-template-columns: 1fr; }
.sort {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.sort .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sort b { display: block; color: var(--graphite); }
.sort span { font-size: .9rem; color: var(--muted); }

/* --- Grafika z godzinami otwarcia -------------------------------------- */
/* Wygląda jak baner, ale jest zwykłym HTML-em: Google odczytuje z niego
   godziny, tekst jest ostry na każdym ekranie i skaluje się na telefonie.
   Blok pojawia się na każdej podstronie – wstrzykuje go build.ps1. */
.godziny {
  display: grid; gap: 20px; align-items: center;
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--graphite) 0%, var(--graphite-2) 100%);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
  margin: 34px 0;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(15,23,42,.6);
}
.godziny::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--amber);
}
.godziny::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 92% 0%, rgba(200,30,30,.28), transparent 62%);
}
.godziny > * { position: relative; z-index: 1; }

.godziny-naglowek { display: flex; align-items: center; gap: 12px; }
.godziny-naglowek svg { flex: none; color: var(--amber); }
.godziny-naglowek span {
  color: #fff; font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em;
}
.godziny-naglowek small {
  display: block; color: #94a3b8; font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}

.godziny-lista { list-style: none; margin: 0; padding: 0; }
.godziny-lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 10px 0; margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.godziny-lista li:last-child { border-bottom: 0; }
.godziny-lista .dzien {
  color: #cbd5e1; font-weight: 600; font-size: .98rem; white-space: nowrap;
}
.godziny-lista .czas {
  color: #fff; font-weight: 800; font-size: 1.45rem; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.godziny-lista .nieczynne { color: #94a3b8; font-size: 1.05rem; font-weight: 700; }

.godziny-adres {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px;
  color: #94a3b8; font-size: .95rem;
}
.godziny-adres strong { color: #fff; display: block; margin-bottom: 2px; }
.godziny-adres a { color: #fff; font-weight: 800; font-size: 1.2rem; }
.godziny-adres a:hover { color: #fca5a5; text-decoration: none; }
.platnosci {
  list-style: none; margin: .7em 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .35em;
}
.platnosc {
  display: flex; align-items: center; gap: .45em; margin: 0;
  color: #fff; font-weight: 700; font-size: .95rem;
}
.platnosc svg { width: 1.35em; height: 1.35em; flex: none; color: #cbd5e1; }
.platnosc--karta, .platnosc--karta svg { color: #86efac; }
@media (min-width: 760px) { .platnosci { align-items: flex-end; } }

@media (min-width: 760px) {
  .godziny { grid-template-columns: auto 1fr auto; gap: 34px; padding: 26px 32px; }
  .godziny-naglowek { flex-direction: column; align-items: flex-start; gap: 8px; max-width: 190px; }
  .godziny-adres { border-top: 0; border-left: 1px solid rgba(255,255,255,.12); padding: 4px 0 4px 30px; text-align: right; }
}

/* --- Baner sekcji (wąski pas zdjęcia) ---------------------------------- */
.banner {
  border-radius: var(--radius); overflow: hidden; margin-bottom: 30px;
  border: 1px solid var(--border);
}
.banner img { width: 100%; height: 120px; object-fit: cover; }

/* --- Kontakt / osoby --------------------------------------------------- */
.people { display: grid; gap: 14px; grid-template-columns: 1fr; }
.person {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.person:hover { text-decoration: none; border-color: var(--amber); }
.person .ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--graphite); color: #fff;
}
.person .ico.steel { background: var(--steel); }
.person .role { font-size: .84rem; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.person .num { font-size: 1.28rem; font-weight: 800; color: var(--graphite); letter-spacing: .01em; }

.info-box {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px dashed var(--border); margin: 0;
}
.hours li:last-child { border-bottom: 0; }
.hours b { color: var(--graphite); }
.hours .closed { color: var(--muted); }

/* --- Mapa na klik ------------------------------------------------------ */
.map-slot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: #e5e7eb; min-height: 260px;
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.map-slot iframe { width: 100%; height: 340px; border: 0; display: block; }
.map-slot .hint { font-size: .88rem; color: var(--muted); margin: 12px 0 0; max-width: 40ch; }

/* --- Zaufanie ---------------------------------------------------------- */
.trust { display: grid; gap: 18px; grid-template-columns: 1fr; }
.trust div { display: flex; gap: 13px; align-items: flex-start; }
.trust .chk {
  width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: 2px;
  background: var(--amber); color: #fff; display: grid; place-items: center; font-size: .8rem;
}
.trust b { display: block; color: var(--graphite); margin-bottom: 2px; }
.trust p { margin: 0; font-size: .96rem; color: var(--muted); }
.bg-dark .trust p { color: #94a3b8; }
.bg-dark .trust b { color: #fff; }

/* --- Nagłówek podstrony + okruszki ------------------------------------- */
.page-head {
  background: linear-gradient(160deg, #0b1220 0%, var(--graphite) 55%, var(--graphite-2) 100%);
  color: #cbd5e1; padding: 40px 0 46px; position: relative;
}
.page-head::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 88% 0%, rgba(200,30,30,.26), transparent 60%);
  pointer-events: none;
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: #fff; margin-bottom: .4em; }
.page-head .lead { font-size: 1.1rem; color: #cbd5e1; max-width: 60ch; margin: 0; }

.crumbs { font-size: .87rem; color: #94a3b8; margin-bottom: 16px; }
.crumbs a { color: #cbd5e1; }
.crumbs span { padding: 0 7px; opacity: .6; }

/* --- Podstrony miejscowości: „Skup złomu <miejscowość>” ----------------- */
/* Wielki blok zaraz pod H1 – tytuł bloku tej samej wielkości co tytuł strony,
   żeby nikt nie miał wątpliwości, że skup jest w Kłobucku (wzór: skrzynie biegów,
   klasa dostarczenie--wielkie). */
.page-head h1 em { font-style: normal; color: #fca5a5; }
/* „Groszek Kłobuck” + mniejsza linijka „wcześniejsza nazwa: ekogroszek” w tym samym h1 */
.page-head h1 .h1-dawniej {
  display: block; margin-top: .3em;
  font-size: .42em; font-weight: 700; letter-spacing: .01em; color: #cbd5e1;
}
.page-head .eyebrow { margin-bottom: 14px; }
.adres-wielki {
  margin: .3em 0 1.4em; padding: 22px 26px 20px;
  background: var(--amber); border-radius: 14px;
  box-shadow: 0 16px 34px rgba(200,30,30,.35);
}
.adres-wielki p { margin: 0; color: #fff; }
.adres-wielki .adres-wielki__tytul {
  margin-bottom: .35em; font-weight: 800; line-height: 1;
  font-size: clamp(1.85rem, 4.6vw, 3.05rem);      /* tak samo jak h1 */
  text-transform: uppercase; letter-spacing: .005em; text-wrap: balance;
}
.adres-wielki .adres-wielki__tresc {
  margin-bottom: .6em; font-weight: 700; line-height: 1.25;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}
.adres-wielki strong { color: #ffe600; }
.adres-wielki .adres-wielki__adres {
  display: flex; gap: .5em; align-items: flex-start;
  font-weight: 600; font-size: 1rem; color: #fee2e2;
}
.adres-wielki__adres svg { width: 1.3em; height: 1.3em; flex: none; margin-top: .1em; color: #ffe600; }
@media (max-width: 700px) { .adres-wielki { padding: 18px 16px 16px; } }

/* Zielony blok pod czerwonym – ta sama wielkość (decyzja właściciela 24.10.2026):
   „Ale nie przejmuj się! Zadzwoń – dogadamy warunki i przyjedziemy / przywieziemy”. */
.adres-wielki--zielony {
  background: #15803d;
  box-shadow: 0 16px 34px rgba(21,128,61,.35);
}
/* Zdanie „Zadzwoń – dogadamy warunki…” wyraźnie większe – ma je zauważyć każdy
   (prośba właściciela 24.10.2026). */
.adres-wielki--zielony .adres-wielki__tresc {
  margin-bottom: .55em; font-weight: 800; line-height: 1.18;
  font-size: clamp(1.5rem, 3.7vw, 2.35rem); text-wrap: balance;
}
.adres-wielki .adres-wielki__akcje { margin-top: .2em; }
.btn-bialy { background: #fff; color: #14532d; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn-bialy:hover { background: #f0fdf4; color: #14532d; }
.btn-bialy svg { flex: none; }

/* Linki do pozostałych usług w tej samej miejscowości */
.inne-uslugi { font-size: .96rem; color: var(--muted); }
.inne-uslugi a { font-weight: 700; }
/* Odległość drogowa przy miejscowości na listach */
.miasta-lista a span { display: block; font-weight: 500; font-size: .86rem; color: var(--muted); }

.miasta-grupa {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 1.8em 0 .7em;
}
.wrap > .miasta-grupa:first-child { margin-top: 0; }
.miasta-lista {
  list-style: none; padding: 0; margin: 0 0 1.4em;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.miasta-lista li { margin: 0; }
.miasta-lista a {
  display: block; padding: 12px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  font-weight: 700; color: var(--graphite);
}
.miasta-lista a:hover { border-color: var(--steel); color: var(--steel); text-decoration: none; }

/* --- Kroki (jak to działa) --------------------------------------------- */
.steps { counter-reset: krok; display: grid; gap: 16px; grid-template-columns: 1fr; }
.step {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px 22px; position: relative;
}
.step::before {
  counter-increment: krok; content: counter(krok);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--amber); color: #fff; font-weight: 800; font-size: .95rem; margin-bottom: 12px;
}
.step b { display: block; color: var(--graphite); margin-bottom: 4px; }
.step p { margin: 0; font-size: .96rem; color: var(--muted); }

/* --- Tabela parametrów -------------------------------------------------- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
table.params { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .95rem; }
table.params th, table.params td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
table.params thead th { background: #f1f5f9; color: var(--graphite); font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; }
table.params tbody tr:last-child td { border-bottom: 0; }
table.params td.todo { color: var(--muted); font-style: italic; }

/* --- Lista z ptaszkami -------------------------------------------------- */
ul.ticks { list-style: none; padding: 0; }
ul.ticks li { position: relative; padding-left: 30px; }
ul.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--amber); font-weight: 800;
}

/* --- Formularz ---------------------------------------------------------- */
.form-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.form-row { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
.form-box label { display: block; font-weight: 700; color: var(--graphite); font-size: .92rem; margin-bottom: 5px; }
.form-box input, .form-box select, .form-box textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 10px;
  font: inherit; font-size: .97rem; color: var(--text); background: #fff;
}
.form-box textarea { min-height: 120px; resize: vertical; }
.form-box .hint { font-size: .86rem; color: var(--muted); margin: 0 0 16px; }
.honeypot { position: absolute; left: -9999px; }

/* --- Uwaga / ramka informacyjna ---------------------------------------- */
.uwaga {
  background: var(--steel-soft); border: 1px solid #bae6fd; border-left: 5px solid var(--steel);
  border-radius: var(--radius); padding: 18px 22px; margin: 24px 0;
}
.uwaga p:last-child { margin-bottom: 0; }

/* --- FAQ --------------------------------------------------------------- */
.faq details {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 20px; margin-bottom: 12px;
}
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--graphite);
  padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: .98rem; }

/* --- CTA pas ----------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--amber-dark) 0%, var(--amber) 55%, #dc2626 100%);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.92); max-width: 52ch; margin: 0 auto 1.6em; }

/* --- Stopka ------------------------------------------------------------ */
.site-footer { background: var(--graphite); color: #94a3b8; padding: 48px 0 26px; font-size: .95rem; }
.site-footer h2 { color: #fff; font-size: 1rem; margin: 0 0 .9em; letter-spacing: 0; }

/* Pasek wykonawcy – z _src/siec.txt (build.ps1). Mówi wykonawca strony, nie PROBET.
   Dyskretny, ale czytelny – nic ukrytego. */
.footer-siec {
  margin-top: 30px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .78rem; line-height: 1.55; color: #94a3b8;
}
.footer-siec p { margin: 0 0 .3em; }
.footer-siec p:last-child { margin-bottom: 0; }
.footer-siec + .footer-bottom { margin-top: 18px; }

/* Akapit z odnośnikiem do serwisu z innej branży – w treści, nie w stopce. */
.note-link {
  font-size: .95rem; color: var(--muted);
  border-left: 3px solid var(--border); padding-left: 14px;
}
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5em; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: .87rem; color: #94a3b8;
}

/* --- Przyklejony pasek telefonów --------------------------------------- */
/* Widoczny na każdym ekranie – na komórce pełna szerokość, na desktopie
   pływająca listwa wyśrodkowana nad dolną krawędzią. */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; background: var(--graphite); border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -6px 20px rgba(15,23,42,.28);
}
.call-bar a {
  flex: 1; padding: 11px 6px 9px; text-align: center; color: #fff;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
  border-right: 1px solid rgba(255,255,255,.1);
}
.call-bar a:last-child { border-right: 0; }
.call-bar a:hover { text-decoration: none; background: var(--graphite-2); }
.call-bar b { display: block; font-size: .9rem; font-weight: 800; }
.call-bar .primary { background: var(--amber); }
.call-bar .primary:hover { background: var(--amber-dark); }
body { padding-bottom: 62px; }

/* Wąskie telefony (375 px i mniej): cztery kolumny po ~94 px nie mieszczą
   numeru w pełnej czcionce i numer łamał się na dwie linie. */
@media (max-width: 420px) {
  .call-bar a { padding: 10px 2px 8px; font-size: .72rem; }
  .call-bar b { font-size: .76rem; white-space: nowrap; letter-spacing: -.01em; }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sorts  { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .trust  { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .price-note { grid-template-columns: 1.6fr 1fr; align-items: center; }
  .hero-facts { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Desktop – pasek telefonów znika, wraca pełne menu
   ========================================================================== */
@media (min-width: 1000px) {
  section { padding: 76px 0; }
  .hero { padding: 84px 0 92px; }
  .main-nav { display: flex; }
  .header-phone { display: inline-flex; }
  .nav-toggle { display: none; }
  #mobile-menu { display: none !important; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  /* Pasek telefonów zostaje także na desktopie – zamienia się w pływającą
     listwę, żeby numer był pod ręką bez przewijania na górę strony. */
  .call-bar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 18px; width: auto; max-width: 940px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    overflow: hidden; box-shadow: 0 12px 34px -8px rgba(15,23,42,.55);
  }
  .call-bar a { padding: 12px 26px; font-size: .82rem; white-space: nowrap; }
  .call-bar b { font-size: 1rem; }
  body { padding-bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .btn:hover { transform: none; }
}