/* ==========================================================================
   Wypożyczalnia Busów Sumara - arkusz wspólny
   Paleta dobrana pod kolor busa (champagne/beż) - grafit + bursztyn.
   ========================================================================== */

:root {
  --c-dark: #15181d;
  --c-dark-2: #1e232a;
  --c-dark-3: #2a3038;
  --c-accent: #c8963e;
  --c-accent-light: #e2b567;
  --c-accent-dark: #a87a2c;
  --c-bg: #ffffff;
  --c-bg-alt: #f7f4ee;
  --c-text: #1a1d22;
  --c-muted: #5c6270;
  --c-border: #e6e0d4;
  --c-green: #2e7d5b;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 2px 12px rgba(21, 24, 29, .07);
  --shadow-lg: 0 18px 48px rgba(21, 24, 29, .16);
  --font-h: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-b: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wrap: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.68;
  font-size: 16.5px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-h);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
h1 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.25rem); margin-bottom: .9rem; }
h3 { font-size: 1.16rem; margin-bottom: .5rem; }
p { color: var(--c-muted); }
strong { color: var(--c-text); font-weight: 600; }

/* Elementy grida i flexa mają domyślnie min-width:auto, więc nie kurczą się poniżej
   swojej treści i na wąskich ekranach rozpychają stronę w poziomie. */
.spec > *, .pricing > *, .contact > *, .grid > *, .grid--okazje > *,
.locs > *, .steps > *, .pricetable__row > span { min-width: 0; }
body { overflow-wrap: break-word; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem; }
.wrap--narrow { max-width: 780px; }
.section { padding: 4.6rem 0; }
.section--tight { padding: 3.2rem 0; }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-dark); color: #e9ecf1; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #aeb6c2; }
.section--dark strong { color: #fff; }

.head { max-width: 680px; margin-bottom: 2.4rem; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-accent-dark); margin-bottom: .6rem;
}
.section--dark .eyebrow { color: var(--c-accent-light); }
.lead { font-size: 1.08rem; }

/* ---------- Ikony (SVG, dziedziczą kolor tekstu) ---------- */
.ico {
  width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card__ico { width: 1.9rem; height: 1.9rem; color: var(--c-accent-dark); margin-bottom: .85rem; }
.section--dark .card__ico { color: var(--c-accent-light); }
.btn .ico { width: 1.1rem; height: 1.1rem; stroke-width: 1.9; }
.nav__tel .ico { width: 1rem; height: 1rem; display: inline-block; vertical-align: -1px; }

/* Atut lokalizacji */
.atut {
  display: flex; align-items: flex-start; gap: .45rem; margin-bottom: .9rem;
  font-size: .88rem; font-weight: 650; color: var(--c-accent-dark);
}
.atut .ico { width: 1.05rem; height: 1.05rem; margin-top: .18rem; stroke-width: 2.2; }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.7rem; border-radius: var(--radius); font-weight: 650;
  font-size: .97rem; font-family: var(--font-b); cursor: pointer; border: none;
  transition: background .18s, transform .18s, box-shadow .18s; text-align: center;
}
.btn-primary { background: var(--c-accent); color: #16130b; }
.btn-primary:hover { background: var(--c-accent-light); transform: translateY(-1px); }
.btn-dark { background: var(--c-dark); color: #fff; }
.btn-dark:hover { background: var(--c-dark-3); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: var(--c-accent-light); color: var(--c-accent-light); }
.btn-outline { background: #fff; color: var(--c-text); border: 1.5px solid var(--c-border); }
/* WhatsApp - firmowa zieleń marki, żeby przycisk był rozpoznawalny na pierwszy rzut oka */
.btn-wa { background: #25D366; color: #06331a; }
.btn-wa:hover { background: #1fb857; transform: translateY(-1px); }
.btn-wa .ico { stroke: none; }
.btn-outline:hover { border-color: var(--c-accent); }
.btn--wide { width: 100%; }
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Górna belka + nawigacja ---------- */
.topbar {
  background: var(--c-dark); color: #b9c1cd; font-size: .82rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: var(--c-accent-light); font-weight: 600; }

.nav {
  position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.logo { display: flex; align-items: center; gap: .6rem; }
.logo__mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo__txt { line-height: 1.05; }
.logo__name { font-family: var(--font-h); font-weight: 800; font-size: 1.18rem; letter-spacing: .01em; display: block; }
.logo__sub { font-size: .63rem; letter-spacing: .17em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: 1.5rem; font-size: .92rem; font-weight: 550; }
.nav__links a { color: var(--c-text); padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.nav__cta { display: flex; align-items: center; gap: .8rem; }
.nav__tel { font-weight: 750; font-family: var(--font-h); white-space: nowrap; font-size: 1rem; display: inline-flex; align-items: center; gap: .4rem; }
.nav__toggle {
  display: none; background: none; border: 1.5px solid var(--c-border); color: var(--c-text);
  border-radius: 8px; padding: .6rem; cursor: pointer; line-height: 0;
}
/* Ikona menu przełącza się stanem aria-expanded, bez podmieniania znaku w JS. */
.nav__toggle .ico--close { display: none; }
.nav__toggle[aria-expanded="true"] .ico--menu { display: none; }
.nav__toggle[aria-expanded="true"] .ico--close { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--c-dark); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(21,24,29,.96) 0%, rgba(21,24,29,.82) 48%, rgba(21,24,29,.55) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 3.8rem; padding-bottom: 3.8rem; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--c-accent-light); white-space: nowrap; }
.hero strong { color: #fff; }
/* Karta z ceną leży wewnątrz .hero, ale ma białe tło - bez tego wyjątku
   pogrubiony tekst byłby biały na białym i znikał. */
.hero .pricecard strong { color: var(--c-text); }
.hero__sub { color: #c3cad5; font-size: 1.08rem; margin-bottom: 1.5rem; max-width: 33rem; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600;
  background: rgba(200,150,62,.14); border: 1px solid rgba(226,181,103,.38);
  color: var(--c-accent-light); padding: .38rem .9rem; border-radius: 100px; margin-bottom: 1.2rem;
}
.hero__points { list-style: none; display: grid; gap: .55rem; margin-bottom: 1.9rem; }
/* Uwaga: nie flex - <strong> i tekst po nim stałyby się osobnymi flex-itemami i rozjeżdżały w kolumny. */
.hero__points li { position: relative; padding-left: 1.6rem; color: #d6dce5; font-size: .97rem; }
.hero__points li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--c-accent-light); font-weight: 800; }

/* Karta ceny w hero */
.pricecard { background: #fff; color: var(--c-text); border-radius: var(--radius-lg); padding: 1.9rem; box-shadow: var(--shadow-lg); }
.pricecard__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--c-muted); font-weight: 700; }
.pricecard__price { font-family: var(--font-h); font-size: 3.2rem; font-weight: 800; line-height: 1; margin: .35rem 0 .1rem; }
.pricecard__price span { font-size: 1.05rem; font-weight: 600; color: var(--c-muted); }
.pricecard__note { font-size: .89rem; color: var(--c-muted); margin-bottom: 1.2rem; }
.pricecard__list { list-style: none; display: grid; gap: .5rem; margin-bottom: 1.4rem; font-size: .92rem; }
.pricecard__list li { position: relative; padding-left: 1.5rem; }
.pricecard__list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--c-green); font-weight: 800; }
.pricecard__foot { font-size: .82rem; color: var(--c-muted); text-align: center; margin-top: .8rem; }

/* ---------- Pasek atutów ---------- */
.strip { background: var(--c-accent); color: #16130b; padding: 1.1rem 0; }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.strip__item strong { display: block; font-family: var(--font-h); font-size: 1.15rem; font-weight: 800; }
.strip__item span { font-size: .82rem; opacity: .82; }

/* ---------- Siatki i karty ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Siatka dla nieparzystej liczby kafli (5 okazji) - ostatni rząd wyśrodkowany,
   żeby nie zostawała sierota w rogu. Flex zamiast grida, bo grid nie centruje niepełnego rzędu. */
.grid--okazje { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; align-items: stretch; }
/* Sztywna baza, bez grow - inaczej flex upycha 4 kafle w rzędzie zamiast 3. */
.grid--okazje > * { flex: 0 0 calc(33.333% - .94rem); max-width: calc(33.333% - .94rem); }
@media (max-width: 980px) { .grid--okazje > * { max-width: calc(50% - .7rem); } }
@media (max-width: 760px) { .grid--okazje > * { flex-basis: 100%; max-width: 100%; } }

.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card p { font-size: .94rem; }
.card__ico { font-size: 1.6rem; margin-bottom: .7rem; display: block; }
.card--link { display: block; }
.card--link .card__more { color: var(--c-accent-dark); font-weight: 650; font-size: .9rem; margin-top: .8rem; display: inline-block; }
.section--dark .card { background: var(--c-dark-2); border-color: var(--c-dark-3); }
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: #aeb6c2; }

/* ---------- Bus: specyfikacja ---------- */
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.spec__img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
/* Zdjęcia są pionowe (1050x1400, robione telefonem). Bez wymuszonych proporcji
   rozpychają sekcję na 700+ px i zostaje sam asfalt. */
.spec__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
.spec__table { list-style: none; display: grid; gap: 0; margin-top: 1.4rem; }
.spec__table li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .72rem 0; border-bottom: 1px solid var(--c-border); font-size: .94rem;
}
.spec__table li:last-child { border-bottom: none; }
.spec__table span:first-child { color: var(--c-muted); }
.spec__table span:last-child { font-weight: 650; text-align: right; }

/* ---------- Galeria ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery figure { border-radius: var(--radius); overflow: hidden; position: relative; background: var(--c-dark-2); }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(21,24,29,.88)); color: #fff;
  font-size: .84rem; font-weight: 600;
}

/* ---------- Kroki ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding-top: 3rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem;
  background: var(--c-accent); color: #16130b; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-h); font-weight: 800; font-size: 1.05rem;
}
.step p { font-size: .93rem; }

/* ---------- Cennik ---------- */
.pricing { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: start; }
.pricetable { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.pricetable__row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 1.5rem; border-bottom: 1px solid var(--c-border);
}
.pricetable__row:last-child { border-bottom: none; }
.pricetable__row--head { background: var(--c-dark); color: #fff; font-family: var(--font-h); font-weight: 700; }
.pricetable__row--hl { background: #fbf8f1; }
.pricetable__row strong { font-family: var(--font-h); font-size: 1.05rem; white-space: nowrap; }
.pricetable__row small { display: block; color: var(--c-muted); font-size: .84rem; font-weight: 400; }

.notebox { background: #fff; border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.notebox h3 { font-size: 1.02rem; }
.notebox ul { list-style: none; display: grid; gap: .5rem; font-size: .92rem; color: var(--c-muted); margin-top: .7rem; }
.notebox li { position: relative; padding-left: 1.1rem; }
.notebox li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--c-accent); font-weight: 800; }

/* ---------- Lokalizacje ---------- */
.locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.loc { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem; }
.loc__city { font-family: var(--font-h); font-weight: 800; font-size: 1.2rem; margin-bottom: .2rem; }
.loc__addr { font-size: .93rem; color: var(--c-muted); margin-bottom: .8rem; }
.loc__area { font-size: .86rem; color: var(--c-muted); border-top: 1px solid var(--c-border); padding-top: .8rem; margin-top: .8rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq details { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.4rem; font-weight: 650; font-family: var(--font-h);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--c-accent); font-weight: 400; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--c-border); }
.faq__body { padding: 1.1rem 1.4rem; }
.faq__body p { font-size: .95rem; }
.faq__body p + p { margin-top: .7rem; }

/* ---------- Pas CTA ---------- */
.ctaband { background: linear-gradient(120deg, var(--c-dark), var(--c-dark-3)); color: #fff; padding: 3.6rem 0; text-align: center; }
.ctaband h2 { color: #fff; }
.ctaband p { color: #b6bec9; max-width: 34rem; margin: 0 auto 1.7rem; }
.ctaband .btn-row { justify-content: center; }

/* ---------- Formularz ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; }
.form { display: grid; gap: .9rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form label { font-size: .87rem; font-weight: 650; display: block; margin-bottom: .3rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: .78rem .95rem; border: 1px solid var(--c-border); border-radius: var(--radius);
  font-family: var(--font-b); font-size: .95rem; background: #fcfbf8; color: var(--c-text);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--c-accent); background: #fff; }
.form textarea { resize: vertical; min-height: 96px; }
.form__consent { font-size: .78rem; color: var(--c-muted); line-height: 1.5; display: flex; gap: .55rem; align-items: flex-start; }
.form__consent input { width: auto; margin-top: .25rem; flex-shrink: 0; }
.form__msg { font-size: .9rem; padding: .8rem 1rem; border-radius: var(--radius); display: none; }
.form__msg--ok { background: #e8f5ee; color: var(--c-green); display: block; }
.form__msg--err { background: #fdecec; color: #b3261e; display: block; }
/* Pole-pułapka na boty. Chowamy je poza kadrem, a nie przez display:none -
   część botów pomija pola całkowicie ukryte, a to pole ma zostać wypełnione. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__opt { font-weight: 400; color: var(--c-muted); }
.contact__side { background: var(--c-bg-alt); border-radius: var(--radius-lg); padding: 1.8rem; }
.contact__tel { font-family: var(--font-h); font-size: 1.85rem; font-weight: 800; display: block; margin: .3rem 0 .1rem; }
.contact__tel:hover { color: var(--c-accent-dark); }

/* ---------- Okruszki ---------- */
.crumbs { font-size: .84rem; color: var(--c-muted); padding: 1rem 0 0; }
.crumbs a:hover { color: var(--c-accent-dark); text-decoration: underline; }
.crumbs span { margin: 0 .4rem; opacity: .5; }

/* ---------- Treść artykułu ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.7rem; font-size: 1.1rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.2rem; color: var(--c-muted); }
.prose li { margin-bottom: .5rem; }
.prose ul li::marker { color: var(--c-accent); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--c-border); }
.prose th { background: var(--c-bg-alt); font-family: var(--font-h); font-weight: 700; }
.prose td { color: var(--c-muted); }
.prose blockquote {
  border-left: 3px solid var(--c-accent); background: var(--c-bg-alt);
  padding: 1rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.4rem;
}
.prose blockquote p { margin-bottom: 0; }
.prose figure { border-radius: var(--radius); overflow: hidden; }
.prose figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
.prose a { color: var(--c-accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
/* Podpowiedź pojawia się tylko wtedy, gdy tabela faktycznie nie mieści się w kontenerze
   (klasę dokłada app.js po zmierzeniu szerokości). */
.table-scroll.jest-przewijana::after {
  content: 'Przesuń palcem, żeby zobaczyć całą tabelę';
  display: block; font-size: .78rem; color: var(--c-muted);
  padding-top: .5rem; font-style: italic;
}
@media (min-width: 761px) { .table-scroll.jest-przewijana::after { content: 'Przewiń w bok, żeby zobaczyć całą tabelę'; } }

.artmeta { font-size: .86rem; color: var(--c-muted); margin-bottom: 1.6rem; }
.toc { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-bottom: 2rem; }
.toc strong { font-family: var(--font-h); display: block; margin-bottom: .6rem; font-size: .95rem; }
.toc ol { margin: 0 0 0 1.1rem; }
.toc li { margin-bottom: .3rem; font-size: .93rem; }
.toc a { color: var(--c-accent-dark); }
.toc a:hover { text-decoration: underline; }

/* ---------- Stopka ---------- */
.footer { background: var(--c-dark); color: #9aa3b1; padding: 3.4rem 0 1.6rem; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.4rem; }
.footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: .9rem; }
.footer ul { list-style: none; display: grid; gap: .48rem; }
.footer a:hover { color: var(--c-accent-light); }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: #78818f; }
.footer__about { margin-top: .9rem; font-size: .88rem; line-height: 1.6; }
.footer__dane {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .82rem; color: #78818f;
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 1.3rem; margin-bottom: 1.1rem;
}
.footer__dane strong { color: #9aa3b1; font-weight: 650; }
.footer__bottom {
  padding-top: .2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: #78818f;
}
.footer__tel { color: var(--c-accent-light); font-weight: 700; font-size: 1.15rem; font-family: var(--font-h); }

/* ---------- Pasek mobilny (telefon zawsze pod ręką) ---------- */
.callbar { display: none; }

/* ---------- Responsywność ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .spec, .pricing, .contact { grid-template-columns: 1fr; gap: 2rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 3.2rem 0; }
  .grid-2, .grid-3, .grid-4, .gallery, .locs { grid-template-columns: 1fr; }
  .gallery { gap: .8rem; }
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--c-border); flex-direction: column;
    align-items: stretch; gap: 0; padding: .6rem 1.4rem 1.2rem; box-shadow: var(--shadow-lg);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .75rem 0; border-bottom: 1px solid var(--c-border); }
  .nav__links a:last-child { border-bottom: none; }
  .nav__toggle { display: block; }
  /* Numer w nagłówku chowamy w całości - jest w górnej belce i w dolnym pasku,
     a sama ikona byłaby celem dotykowym 16px i nie mówiłaby, że to telefon. */
  .nav__tel { display: none; }
  .form__row { grid-template-columns: 1fr; }
  /* iOS Safari przybliża stronę przy focusie na polu z fontem < 16px i nie wraca. */
  .form input, .form textarea, .form select { font-size: 16px; }
  .topbar .wrap { justify-content: center; text-align: center; font-size: .78rem; }
  .hero .wrap { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .pricecard__price { font-size: 2.7rem; }
  /* Zapas większy niż pasek (72px) + strefa bezpieczna iPhone'a z paskiem home. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: var(--c-dark); border-top: 1px solid var(--c-dark-3); gap: .6rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  }
  .callbar .btn { flex: 1; padding: .75rem 1rem; font-size: .92rem; }
  .footer { padding-bottom: 5rem; }

  /* Kolejność sekcji na stronie głównej - tylko mobile.
     Na wąskim ekranie użytkownik przewija jedną kolumną, więc konkret (co to za bus,
     jak wygląda) ma pierwszeństwo przed argumentacją. Na desktopie kolejność zostaje
     bez zmian, bo tam sekcje widać szybciej.
     Flexbox zamiast dwóch kopii treści - jeden HTML, zero duplikatów dla Google. */
  .strona-glowna { display: flex; flex-direction: column; }
  .strona-glowna > * { order: 7; }
  .strona-glowna > .hero { order: 1; }
  .strona-glowna > .strip { order: 2; }
  .strona-glowna > #dlaczego { order: 3; }
  .strona-glowna > #bus { order: 4; }
  .strona-glowna > #galeria { order: 5; }
  .strona-glowna > #atmosfera { order: 6; }
}

@media (max-width: 420px) {
  .strip__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .topbar, .callbar, .ctaband, .hero__bg { display: none; }
  body { font-size: 11pt; }
}