/* ═══════════════════════════════════════════════════════════════════════
   silikatytrabki.pl – strona główna poza Adobe Muse
   Odtwarza wygląd oryginału, ale układem płynnym (grid/flex) zamiast
   współrzędnych. Progi: 992 / 768 / 480 / 390 / 320 / 280 px.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --ciemny: #28282e;
    --szary: #5b5b5b;
    --biel: #ffffff;
    --tlo-szare: #f4f4f6;
    --akcent: #50c0df;
    --maks: 1200px;
    --gutter: 40px;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--biel);
    color: var(--ciemny);
    font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--akcent); }

.wrap {
    max-width: var(--maks);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ── Pasek górny ──────────────────────────────────────────────────── */
.naglowek {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(24, 24, 24, .96);
    backdrop-filter: saturate(140%) blur(6px);
}

.naglowek .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
}

.naglowek .logo { display: flex; align-items: center; }
.naglowek .logo-okragle { height: 60px; width: 60px; border-radius: 50%; background: #fff; transition: height .25s, width .25s; }
.naglowek.zwiniety .logo-okragle { height: 44px; width: 44px; }
.stopka .logo-okragle-stopka { width: 96px; height: 96px; border-radius: 50%; background: #fff; }
@media (max-width: 480px) { .naglowek .logo-okragle { height: 48px; width: 48px; } .stopka .logo-okragle-stopka { width: 80px; height: 80px; } }
@media (max-width: 280px) { .naglowek .logo-okragle { height: 40px; width: 40px; } .stopka .logo-okragle-stopka { width: 64px; height: 64px; } }

.menu { display: flex; gap: 26px; }

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.menu a:hover { border-bottom-color: var(--akcent); }

.menu-przycisk {
    display: none;
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 10px;
}
.menu-przycisk span {
    display: block;
    height: 2px;
    background: #fff;
    margin: 5px 0;
    transition: .25s;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: #1b2430 url("../images/123.jpg") center/cover no-repeat;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* warstwowe przyciemnienie zamiast płaskiej płachty: góra pod pasek menu,
       środek jaśniejszy (zdjęcie żyje), dół pod napis „przewiń”, plus winieta */
    background:
        radial-gradient(120% 80% at 50% 45%, rgba(8, 14, 22, 0) 30%, rgba(8, 14, 22, .55) 100%),
        linear-gradient(180deg, rgba(8, 14, 22, .62) 0%, rgba(8, 14, 22, .26) 34%,
                        rgba(8, 14, 22, .34) 62%, rgba(8, 14, 22, .70) 100%);
}
.hero .tresc { position: relative; z-index: 2; padding: 0 20px; width: 100%; }

/* ── Typografia nagłówka ────────────────────────────────
   Trzy plany: rozstrzelony nadtytuł między kreskami, słowo-wyświetlacz
   (Saira 800, ciasne światło, gradient bieli + własny cień) i drobny podpis.
   Każda linia wyjeżdża spod krawędzi maski – stąd `overflow: hidden`. */
.hero .nad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.6vw, 22px);
    margin: 0 0 clamp(10px, 1.4vw, 20px);
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: clamp(11px, 1.15vw, 15px);
    font-weight: 500;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
.hero .nad .kreska-h {
    display: block;
    width: clamp(22px, 5vw, 78px);
    height: 1px;
    flex: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65));
    transform: scaleX(0);
    transform-origin: right center;
    animation: kreska-wjazd .9s cubic-bezier(.16,1,.3,1) .12s forwards;
}
.hero .nad .kreska-h:last-child {
    background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,0));
    transform-origin: left center;
}
@keyframes kreska-wjazd { to { transform: scaleX(1); } }

/* maska: tekst wyjeżdża spod krawędzi */
.hero .maska { display: block; overflow: hidden; }
.hero .maska .wnetrze {
    display: block;
    transform: translateY(115%);
    animation: wjazd-linii .95s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .nad .maska .wnetrze { animation-delay: .05s; margin-right: -.42em; }   /* zdejmuje światło po ostatniej literze – napis stoi optycznie na środku */
.hero .pod .maska .wnetrze { animation-delay: .34s; margin-right: -.3em; }
@keyframes wjazd-linii { to { transform: translateY(0); } }

.hero .slowo-maska {
    display: block;
    overflow: hidden;
    margin: 0;
    padding: .06em 0 .1em;              /* miejsce na ogonki ę/ą i akcenty */
    line-height: .94;
}
.hero .slowo {
    display: block;
    font-family: Saira, Lato, Arial, sans-serif;
    font-size: clamp(30px, 8.4vw, 124px);
    font-weight: 800;
    font-stretch: 104%;
    letter-spacing: -.012em;
    line-height: .94;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
    /* gradient bieli + własny cień – litery odklejają się od zdjęcia */
    background: linear-gradient(180deg, #ffffff 28%, rgba(255, 255, 255, .78) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .45)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
    animation: wjazd-slowa 1.05s cubic-bezier(.16,1,.3,1) .16s backwards;
}
@keyframes wjazd-slowa {
    from { transform: translateY(115%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* zmiana słowa: stare w górę i znika, nowe wjeżdża od dołu */
.hero .slowo.znika { animation: wyjazd-slowa .42s cubic-bezier(.7,0,.84,0) forwards; }
@keyframes wyjazd-slowa {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-115%); opacity: 0; }
}

/* na najwęższych ekranach słowo musi zostać w jednym wierszu */
@media (max-width: 360px) { .hero .slowo { font-size: 27px; } }
@media (max-width: 300px) { .hero .slowo { font-size: 24px; } }

.hero .pod {
    margin: clamp(22px, 3.2vw, 46px) 0 0;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: clamp(11px, 1.2vw, 14.5px);
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    text-wrap: balance;
}

/* Znacznik przewijania: animowany GIF 100×161 px, napis na jego dole
   (w oryginale ikona od y 620, napis od y 727 – stąd margines −54 px).
   Klasa „anim_swing" z Muse dawała kołysanie – odtworzone przy najechaniu. */
.hero .przewin {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
    width: 100px;
    color: #ffefe5;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .16em;
    text-align: center;
    white-space: nowrap;   /* nie łam „PRZEWIŃ W DÓŁ" na dwie linie */
    transform-origin: top center;
}

.hero .przewin img {
    display: block;
    width: 100px;
    height: 161px;
    margin: 0 auto;
}

.hero .przewin span {
    display: block;
    margin-top: -54px;
}

.hero .przewin:hover,
.hero .przewin:focus-visible {
    animation: kolysanie 1s ease-in-out;
}
.hero .przewin:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

@keyframes kolysanie {
    20%  { transform: translateX(-50%) rotate(13deg); }
    40%  { transform: translateX(-50%) rotate(-10deg); }
    60%  { transform: translateX(-50%) rotate(5deg); }
    80%  { transform: translateX(-50%) rotate(-5deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

/* ── Sekcje ───────────────────────────────────────────────────────── */
/* Odstępy dobrane tak, żeby zachować „przestronność" oryginału
   (w wersji Muse odległość między tytułami sekcji wynosiła 500–700 px). */
.sekcja { padding: 110px 0; }
.sekcja--szara { background: var(--tlo-szare); }

.sekcja--foto {
    position: relative;
    color: #fff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 560px;
    display: flex;
    align-items: center;
}
.sekcja--foto > .wrap { width: 100%; }
.sekcja--foto { overflow: hidden; }
.sekcja--foto .tlo {
    position: absolute;
    left: 0; right: 0;
    top: -15%; bottom: -15%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
}
.sekcja--foto::before { z-index: 1; }

.sekcja--wysoka { min-height: 780px; }
.sekcja--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 26, 34, .55);
}
.sekcja--foto .wrap { position: relative; z-index: 2; }

.tytul {
    font-size: clamp(28px, 4vw, 50px);
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    margin: 0 0 14px;
    color: var(--ciemny);
}
.sekcja--foto .tytul, .sekcja--ciemna .tytul { color: #fff; }

/* Każdy akapit-podtytuł jest wyśrodkowany i tej samej wielkości –
   nie tylko ten bezpośrednio po tytule (wcześniej ".tytul + .podtytul"). */
.podtytul {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto 10px;
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.5;
    color: #000;
}
.podtytul + .podtytul { margin-top: 14px; }
.sekcja--foto .podtytul { color: #fff; }

.lead-duzy {
    text-align: center;
    font-size: clamp(19px, 2.6vw, 32px);
    line-height: 1.45;
    max-width: 30ch;
    margin: 0 auto;
    color: #fff3f1;
}

/* ── Siatki ───────────────────────────────────────────────────────── */
.kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 46px 40px;
    margin-top: 54px;
}
.kolumny .kol { text-align: center; }
.kolumny .kol img { margin: 0 auto 18px; }
.kolumny .kol h3 {
    font-size: 20px;
    letter-spacing: .06em;
    margin: 0 0 10px;
    color: var(--ciemny);
}
.kolumny .kol p { font-size: 17px; color: var(--szary); margin: 0; }

/* Kafle zastosowań */
.kafle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* jak w oryginale: 2 × 2 */
    gap: 52px 64px;
    margin-top: 52px;
}
/* bez minmax(0,…) kolumna rozpychała się do min-content kafla (zdjęcie + tekst)
   i strona przewijała się w bok przy ~770–810 px */
.kafle .kafel { min-width: 0; }
.kafle .kafel > * { min-width: 0; }
@media (max-width: 900px) { .kafle { gap: 40px 34px; } }
@media (max-width: 768px) { .kafle { grid-template-columns: 1fr; } }
.kafel { display: flex; gap: 24px; align-items: flex-start; }
.kafel img { flex: 0 0 auto; width: 150px; }
/* Kafle ZASTOSOWANIE – typografia: tytuł w Sairze z krótką kreską akcentu,
   lista z równym rytmem i znacznikiem „check”, tekst do lewej (justowanie robiło
   dziury między słowami), łamanie „pretty” bez sierot w ostatnim wierszu. */
.kafel h3 {
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    font-stretch: 105%;
    letter-spacing: .02em;
    line-height: 1.2;
    margin: 0 0 14px;
    color: var(--ciemny);
}
.kafel h3::after {
    content: "";
    display: block;
    width: 36px; height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3ab6df, #1f93c7);
}
.kafel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kafel li {
    position: relative;
    margin: 0;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.55;
    color: #4a5763;
    text-align: left;
    text-wrap: pretty;
    hyphens: manual;
}
.kafel li::before {
    content: "";
    position: absolute;
    left: 0; top: .12em;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: #e6f4fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231f93c7' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ── Pełnoszerokościowe wideo (sekcja Dorstener) ──────────────────── */
.wideo {
    position: relative;
    min-height: 712px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #1b2430;
}
.wideo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.wideo::after {
    content: "";
    position: absolute;
    inset: 0;
    /* film po korekcie jest jaśniejszy, więc płachta lżejsza; góra i dół ciemniejsze
       pod tekst, środek kadru (prasa, bloczki) zostaje widoczny */
    background: linear-gradient(180deg, rgba(20, 26, 34, .58) 0%, rgba(20, 26, 34, .30) 45%,
                                rgba(20, 26, 34, .34) 60%, rgba(20, 26, 34, .62) 100%);
    z-index: 1;
}
.wideo .wrap { position: relative; z-index: 2; width: 100%; }

/* Galeria realizacji – w oryginale siatka 3 kolumny po 400 px */
.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 48px;
}
.galeria a {
    display: block;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.galeria a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 40, 0);
    transition: background .25s;
}
.galeria a:hover::after { background: rgba(11, 26, 40, .35); }

/* Przyciski */
.przyciski { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 44px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 30px;
    background: rgba(255, 255, 255, .12);
    border: 2px solid #fff;
    color: #fff !important;
    text-decoration: none;
    font-size: 17px;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
}
.btn:hover { background: #fff; color: var(--ciemny) !important; }

.btn--ciemny { border-color: var(--ciemny); color: var(--ciemny) !important; background: transparent; }
.btn--ciemny:hover { background: var(--ciemny); color: #fff !important; }

/* ── Oferta ───────────────────────────────────────────────────────── */
.oferta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }

/* ── Strefy transportowe ──────────────────────────────────────────── */
.strefy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 26px;
    margin-top: 48px;
}
.strefa { background: #ececec; text-align: center; padding-bottom: 28px; }
.strefa .pasek {
    color: #fff;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: .04em;
    padding: 20px 10px;
}
.strefa.i .pasek { background: #8b7aa8; }
.strefa.ii .pasek { background: #3fb6c9; }
.strefa.iii .pasek { background: #c9a400; }
.strefa .cena {
    font-size: clamp(34px, 5.4vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    margin: 24px 0 0;
    color: #000;
}
.strefa .netto { font-size: clamp(24px, 4vw, 56px); font-weight: 700; color: #000; line-height: 1.1; }
.strefa .rodzaj { font-size: clamp(17px, 2.2vw, 30px); font-weight: 700; letter-spacing: .04em; margin-top: 16px; }
.strefa.i .rodzaj { color: #b9a2d6; }
.strefa.ii .rodzaj { color: #60e6ff; }
.strefa.iii .rodzaj { color: #ebc600; }

.uwagi { margin-top: 40px; text-align: center; font-size: 14px; line-height: 1.7; }
.uwagi strong { display: block; margin-top: 12px; }

/* ── Statystyki ───────────────────────────────────────────────────── */
.statystyki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));   /* panel I/II (313 px w srodku) = 2 kolumny, III (592 px) = 3 */
    gap: 36px;
    margin-top: 52px;
    text-align: center;
    color: #fff;
}
.statystyki .licznik { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; line-height: 1.1; }
.statystyki .opis { font-size: 17px; letter-spacing: .05em; margin-top: 8px; }

/* ── Jakość i bezpieczeństwo ──────────────────────────────────────── */
.karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
    gap: 30px;
    margin-top: 52px;
}
/* Karty z dokumentami (CERTYFIKAT, DEKLARACJE, BEZPIECZEŃSTWO) – skan jako
   kartka z cieniem na szarym tle, żeby było widać krawędzie i rogi. */
.karta {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(16, 24, 32, .09), 0 2px 6px rgba(16, 24, 32, .05);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.karta:hover, .karta:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px rgba(16, 24, 32, .18), 0 4px 10px rgba(16, 24, 32, .07);
    border-color: #c9e4f3;
    outline: none;
}
.karta .obraz {
    position: relative;
    display: grid;
    place-items: center;
    padding: 26px 26px 22px;
    background: linear-gradient(180deg, #f8fafc 0%, #eaeff4 100%);
    border-bottom: 1px solid #e8ecf1;
}
.karta .obraz img {
    width: auto;
    max-width: 100%;
    max-height: 210px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 12px 26px rgba(16, 24, 32, .20), 0 2px 5px rgba(16, 24, 32, .12);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.karta:hover .obraz img, .karta:focus-visible .obraz img {
    transform: translateY(-4px) scale(1.035);
    box-shadow: 0 22px 44px rgba(16, 24, 32, .28), 0 4px 8px rgba(16, 24, 32, .14);
}
.karta .numer {
    position: absolute;
    top: 14px; right: 14px;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #1f93c7;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 6px 14px rgba(31, 147, 199, .35);
}
.karta .tresc { display: block; padding: 20px 22px 22px; text-align: center; }
.karta h3 {
    margin: 0 0 8px;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: clamp(17px, 1.9vw, 22px);
    font-weight: 700;
    font-stretch: 105%;
    letter-spacing: .02em;
    color: var(--ciemny);
    line-height: 1.2;
}
.karta .plik {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1f93c7;
    font-weight: 600;
}
.karta .plik svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.karta:hover .plik svg, .karta:focus-visible .plik svg { transform: translateX(4px); }
@media (max-width: 480px) {
    .karta .obraz { padding: 18px 18px 16px; }
    .karta .obraz img { max-height: 170px; }
    .karta .numer { width: 30px; height: 30px; font-size: 12px; top: 10px; right: 10px; }
    .karta .tresc { padding: 16px 16px 18px; }
}
@media (max-width: 280px) {
    .karta .obraz { padding: 14px; }
    .karta .obraz img { max-height: 140px; }
    .karta .plik { font-size: 12.5px; letter-spacing: .05em; }
}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.kontakt { background: #2b2b33; color: #fff; padding: 76px 0; }
.kontakt .siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.kontakt h2 { font-size: 18px; letter-spacing: .12em; margin: 0 0 26px; text-transform: uppercase; }
.kontakt .adresy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px; }
.kontakt .etykieta { font-size: 18px; color: #fffaff; margin: 0 0 8px; }
.kontakt .firma { font-size: 17px; margin: 0; }
.kontakt .linia { font-size: 17px; color: #ccc; margin: 0; }
.kontakt .tel { font-size: 18px; margin: 26px 0 0; }
.kontakt .mail { font-size: 18px; margin: 14px 0 0; }
.kontakt a { color: #fff; }

/* Formularz */
.pole { margin-bottom: 18px; }
.pole label { display: block; font-size: 14px; color: #b9c0c8; margin-bottom: 6px; }
.pole input, .pole textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #5a5a66;
    color: #fff;
    font: inherit;
    font-size: 16px;
    padding: 10px 2px;
    min-height: 44px;
}
.pole textarea { min-height: 110px; resize: vertical; }
.pole input:focus, .pole textarea:focus { outline: none; border-bottom-color: var(--akcent); }
.pole.blad input, .pole.blad textarea { border-bottom-color: #e0645a; }

.wyslij {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #3ab6df 0%, #1f93c7 100%);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(31, 147, 199, .38), inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.wyslij svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
/* przelot światła przy najechaniu */
.wyslij::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.30) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform .65s ease;
}
.wyslij:hover, .wyslij:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(31, 147, 199, .48), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.wyslij:hover svg, .wyslij:focus-visible svg { transform: translate(4px, -4px); }
.wyslij:hover::after { transform: translateX(130%); }
.wyslij:focus-visible { outline: 3px solid rgba(80, 192, 223, .6); outline-offset: 3px; }
.wyslij:active { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(31, 147, 199, .34); }
.wyslij[disabled] {
    opacity: .6;
    cursor: default;
    transform: none;
    box-shadow: 0 8px 18px rgba(31, 147, 199, .22);
}
.wyslij[disabled]::after { display: none; }
@media (max-width: 480px) {
    .wyslij { width: 100%; justify-content: center; padding: 15px 24px; font-size: 14px; letter-spacing: .1em; }
}
@media (max-width: 280px) { .wyslij { min-height: 48px; padding: 13px 16px; font-size: 13px; gap: 9px; } }

.komunikat { margin-top: 16px; font-size: 15px; min-height: 22px; }
.komunikat.ok { color: #7ae2a8; }
.komunikat.zle { color: #ff9b91; }

/* Mapa */
.mapa { line-height: 0; }
.mapa iframe { width: 100%; height: 420px; border: 0; }

/* ── Stopka ───────────────────────────────────────────────────────── */
.stopka { background: #1a1a1a; color: #aab4bf; padding: 40px 0 28px; font-size: 14.5px; }
.stopka a { color: #cfd8e0; }
/* Dyskretny wiersz linków do podstron – bez ramek, drobnym pismem,
   żeby nie ingerować w wygląd stopki z oryginału. */
.stopka .linki {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 12.5px;
}
.stopka .linki a { color: #7d8791; text-decoration: none; }
.stopka .linki a:hover { color: #cfd8e0; text-decoration: underline; }
.stopka .dol { display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: center; text-align: center; border-top: 1px solid #333; padding-top: 22px; }  /* jak w oryginale: logo nad podpisem, wyśrodkowane */
.stopka img { height: 26px; width: auto; }
.stopka .prawa { font-style: italic; }

/* ═══ 992 px ═══ */
@media (max-width: 992px) {
    .wideo { min-height: 560px; }
    :root { --gutter: 30px; }
    .hero { min-height: 620px; }
    .sekcja { padding: 78px 0; }
    .sekcja--foto { min-height: 460px; }
    .sekcja--wysoka { min-height: 560px; }
    .oferta { grid-template-columns: 1fr; gap: 28px; }
}

/* ═══ 768 px ═══ */
@media (max-width: 768px) {
    .hero .przewin { width: 78px; bottom: 16px; }
    .hero .przewin img { width: 78px; height: 126px; }
    .hero .przewin span { margin-top: -42px; font-size: 11px; }
    .wideo { min-height: 440px; }
    .galeria { grid-template-columns: repeat(2, 1fr); }
    :root { --gutter: 22px; }
    .naglowek .wrap { min-height: 58px; }
    .menu-przycisk { display: block; }
    .menu {
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        gap: 0;
        background: rgba(20, 20, 20, .98);
        padding: 8px 22px 18px;
        display: none;
    }
    .menu.otwarte { display: flex; }
    .menu a { padding: 13px 0; border-bottom: 1px solid #333; font-size: 14px; }
    .hero { min-height: 520px; }
    .sekcja { padding: 60px 0; }
    .sekcja--foto { min-height: 380px; }
    .sekcja--wysoka { min-height: 440px; }
    .kontakt .siatka { grid-template-columns: 1fr; gap: 40px; }
    .kolumny { gap: 36px 28px; margin-top: 40px; }
    .kafle { gap: 34px; margin-top: 38px; }
    .mapa iframe { height: 320px; }
}

/* ═══ 480 px ═══ */
@media (max-width: 480px) {
    .hero .przewin { width: 62px; bottom: 12px; }
    .hero .przewin img { width: 62px; height: 100px; }
    .hero .przewin span { margin-top: -34px; font-size: 10.5px; letter-spacing: .1em; }
    .wideo { min-height: 340px; }
    :root { --gutter: 16px; }
    body { font-size: 16px; }
    .hero { min-height: 440px; }
    .hero .pod { margin-top: 28px; letter-spacing: .08em; }
    .sekcja { padding: 46px 0; }
    .sekcja--foto { min-height: 320px; }
    .sekcja--wysoka { min-height: 360px; }
    .kafel { flex-direction: column; gap: 14px; }
    .kafel img { width: 110px; }
    .btn { width: 100%; }
    .strefa .cena { margin-top: 18px; }
    .stopka .dol { justify-content: center; text-align: center; }
}

/* ═══ 390 px ═══ */
@media (max-width: 390px) {
    .wideo { min-height: 300px; }
    :root { --gutter: 14px; }
    body { font-size: 15.5px; }
    .hero { min-height: 400px; }
    .kolumny { gap: 30px 20px; }
    .kolumny .kol p { font-size: 15.5px; }
    .karta .obraz { height: 130px; }
    .uwagi { font-size: 13px; }
}

/* ═══ 320 px ═══ */
@media (max-width: 320px) {
    .hero .przewin { width: 50px; bottom: 10px; }
    .hero .przewin img { width: 50px; height: 80px; }
    .hero .przewin span { margin-top: -28px; font-size: 10px; letter-spacing: .06em; }
    .wideo { min-height: 250px; }
    .galeria { grid-template-columns: 1fr; }
    :root { --gutter: 12px; }
    body { font-size: 15px; }
    .naglowek img { height: 26px; }
    .hero { min-height: 360px; }
    .sekcja { padding: 36px 0; }
    .sekcja--foto { min-height: 260px; }
    .sekcja--wysoka { min-height: 300px; }
    .galeria { grid-template-columns: 1fr; }
    .kafel li { font-size: 13.5px; }
    .pole input, .pole textarea { font-size: 16px; }
    .wyslij { width: 100%; padding: 14px 20px; }
}

/* ═══ 280 px – Samsung Fold ═══ */
@media (max-width: 280px) {
    .hero .przewin { width: 42px; bottom: 8px; }
    .hero .przewin img { width: 42px; height: 68px; }
    .hero .przewin span { margin-top: -24px; font-size: 9.5px; letter-spacing: 0; }
    .wideo { min-height: 210px; }
    :root { --gutter: 9px; }
    body { font-size: 14px; line-height: 1.55; }
    .naglowek img { height: 22px; }
    .naglowek .wrap { min-height: 50px; }
    .menu-przycisk { width: 38px; height: 38px; padding: 8px; }
    .hero { min-height: 320px; }
    .hero .pod { font-size: 12.5px; margin-top: 20px; }
    .sekcja { padding: 30px 0; }
    .sekcja--foto { min-height: 220px; }
    .sekcja--wysoka { min-height: 250px; }
    .tytul { letter-spacing: 0; }
    .kolumny { gap: 24px 14px; margin-top: 28px; }
    .kolumny .kol h3 { font-size: 16px; }
    .kolumny .kol p { font-size: 13.5px; }
    .kafel img { width: 86px; }
    .kafel h3 { font-size: 16px; }
    .kafel li { font-size: 12.5px; padding-left: 14px; margin-bottom: 7px; }
    .karta .obraz { height: 100px; }
    .karta .plik { font-size: 15px; }
    .btn { min-height: 44px; padding: 11px 14px; font-size: 14px; }
    .uwagi { font-size: 11.5px; }
    .statystyki { gap: 22px; }
    .statystyki .opis { font-size: 13.5px; }
    .kontakt { padding: 40px 0; }
    .kontakt .firma, .kontakt .linia { font-size: 14px; }
    .kontakt .tel, .kontakt .mail { font-size: 15px; }
    .pole input, .pole textarea { padding: 8px 2px; min-height: 40px; }
    .wyslij { padding: 12px 14px; font-size: 14px; min-height: 44px; }
    .mapa iframe { height: 240px; }
    .stopka { font-size: 12.5px; padding: 28px 0 20px; }
    .stopka .linki { gap: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    /* przewijanie zostaje płynne (prośba użytkownika); wyłączamy tylko ozdoby */
    .galeria a .foto, .btn, .karta .obraz { transition: none !important; }   /* wejscia sekcji zostaja */
}

@media (prefers-reduced-motion: reduce) {
    .hero .przewin:hover,
    .hero .przewin:focus-visible { animation: none; }
}

/* ── Tabele asortymentu (OFERTA, LOGISTYKA) ───────────────────
   Zastępują obrazki ceniikka21321.png i logistykasilikaty.jpg.
   Symetria: stałe szerokości kolumn (colgroup + table-layout: fixed),
   wszystkie liczby do prawej, cyfry tabelaryczne – kolumny kończą się
   na jednej linii. Miniatury w jednakowych kafelkach. ───────────── */
.tab-log {
    background: #fff;
    border: 1px solid #e9edf1;
    border-radius: 18px;
    box-shadow: 0 22px 52px rgba(16, 24, 32, .13), 0 2px 6px rgba(16, 24, 32, .05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 44px auto 40px;
    max-width: 1120px;
}
.tab-oferta { box-shadow: 0 10px 30px rgba(16, 24, 32, .09); margin: 0; max-width: none; }

.tab-log table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: var(--ciemny);
    font-variant-numeric: tabular-nums;
}
.tab-oferta table { table-layout: fixed; }

.tab-log th, .tab-log td {
    padding: 11px 12px;
    border-bottom: 1px solid #eef1f5;
    text-align: center;                 /* liczby pośrodku kolumn – nagłówek i wartość na tej samej osi */
    vertical-align: middle;
    white-space: nowrap;
}
.tab-log th:first-child, .tab-log td:first-child { padding-left: 20px; }
.tab-log th:last-child,  .tab-log td:last-child  { padding-right: 20px; }

/* główka */
.tab-log thead th {
    overflow-wrap: normal;            /* łamanie tylko na spacjach – „DL.”, „SZER.” nigdy w połowie słowa */
    hyphens: manual;
    -webkit-hyphens: manual;
    background: #f7f9fb;
    color: #6b7480;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.3;
    border-bottom: 1px solid #e3e8ed;
    white-space: normal;
}
.tab-log thead tr:last-child th { border-bottom: 2px solid #dfe5eb; }
.tab-log thead th.grupa { text-align: center; letter-spacing: .12em; }
.tab-log thead th.g-produkt { text-align: left; }

/* kolumny opisowe */
.tab-log td.lp, .tab-log th.lp { padding-left: 10px; padding-right: 6px; }
.tab-log td.lp { text-align: center; color: #9aa3ad; font-size: 12.5px; letter-spacing: .04em; }
.tab-log th.nazwa {
    text-align: left;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .035em;
    font-stretch: 105%;
}



.tab-log tbody tr { transition: background-color .2s ease; }
.tab-log tbody tr:hover { background: #f3f9fd; }
.tab-log tbody tr:last-child td, .tab-log tbody tr:last-child th { border-bottom: 0; }

@media (max-width: 768px) {
    .tab-log { margin: 30px 0 28px; border-radius: 14px; }
    .tab-log table { min-width: 880px; }
    .tab-oferta table { min-width: 700px; }
    .tab-log thead th { white-space: normal; }   /* nowrap przycinało etykiety w wąskich kolumnach */
    .tab-log th, .tab-log td { padding: 9px 10px; }
    .tab-log th:first-child, .tab-log td:first-child { padding-left: 14px; }
    .tab-log th:last-child,  .tab-log td:last-child  { padding-right: 14px; }
    .tab-log table { font-size: 14px; }
    .tab-log th.nazwa { font-size: 17px; }
}
@media (max-width: 480px) {
    .tab-log { border-radius: 12px; }
    .tab-log table { font-size: 13px; }
    .tab-log thead th { font-size: 11.5px; letter-spacing: .06em; }
    .tab-log th.nazwa { font-size: 15.5px; }
    .tab-log th, .tab-log td { padding: 8px 8px; }
    .tab-log th:first-child, .tab-log td:first-child { padding-left: 11px; }
    .tab-log th:last-child,  .tab-log td:last-child  { padding-right: 11px; }
}
@media (max-width: 280px) {
    .tab-log table { font-size: 12px; }
    .tab-log th.nazwa { font-size: 14px; }
    .tab-log th, .tab-log td { padding: 7px 6px; }
}
/* ── koniec tabel asortymentu ── */
/* ═══════════════════════════════════════════════════════════════════════
   WARSTWA DYNAMICZNA (assets/strona.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pokaz slajdów w nagłówku ─────────────────────────────────────── */
.hero { background: #1b2430; overflow: hidden; }
.hero .slajdy { position: absolute; inset: 0; z-index: 0; }
.hero .slajd {
    position: absolute;
    left: 0; right: 0;
    top: -15%; bottom: -15%;   /* zapas na paralaksę */
    will-change: transform, opacity;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity .9s ease-in-out;   /* transitionDuration Muse */
}
.hero .slajd.aktywny { opacity: 1; z-index: 2; animation: kenburns 9s ease-out forwards; }
.hero .slajd.aktywny.odchodzi { opacity: 0; z-index: 1; }   /* wygasza się pod nowym, animacja przybliżenia trwa dalej – bez skoku */   /* powolne przybliżenie – strona ma żyć (prośba firmy) */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero::after { z-index: 1; }

.hero .slowo { transition: opacity .45s ease, transform .45s ease; }
.hero .slowo.znika { opacity: 0; transform: translateY(8px); }

/* Kropki: pole dotyku 30 x 40 px, widoczna kropka rysowana pseudoelementem
   (sama kropka ma dalej 12 px i stoi dokładnie tam, gdzie wcześniej). */
.hero .kropki {
    position: absolute;
    right: 19px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    gap: 0;
}
.hero .kropki button {
    width: 30px; height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}
.hero .kropki button::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85);
    background: transparent;
    transition: background .25s, transform .25s;
}
.hero .kropki button.aktywny::before { background: #fff; transform: scale(1.15); }
.hero .kropki button:focus-visible { outline: 2px solid #fff; outline-offset: -8px; border-radius: 12px; }

/* ── Pasek menu zwija się po przewinięciu ─────────────────────────── */
.naglowek .wrap { transition: min-height .25s ease; }
.naglowek.zwiniety .wrap { min-height: 58px; }

.menu-przycisk.otwarty span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-przycisk.otwarty span:nth-child(2) { opacity: 0; }
.menu-przycisk.otwarty span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Galeria: powiększenie przy najechaniu + lightbox ────────────── */
.galeria a { background: none; }
.galeria a .foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.galeria a:hover .foto { transform: scale(1.07); }
.galeria a::after { z-index: 1; }
.galeria a::before {
    content: "+";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%) scale(.6);
    z-index: 2;
    width: 54px; height: 54px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font: 300 34px/50px Raleway, Arial, sans-serif;
    text-align: center;
    opacity: 0;
    transition: opacity .3s, transform .3s;
}
.galeria a:hover::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(12, 16, 22, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.lightbox.otwarty { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox img {
    max-width: 92vw;
    max-height: 82vh;
    width: auto; height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    transition: opacity .35s;
}
.lightbox.laduje img { opacity: .25; }
.lightbox figcaption { color: #aab4bf; font-size: 13px; letter-spacing: .1em; margin-top: 12px; }
.lightbox button {
    position: absolute;
    background: rgba(255,255,255,.08);
    border: 0;
    color: #fff;
    cursor: pointer;
    font: 300 30px/1 Arial, sans-serif;
    width: 54px; height: 54px;
    border-radius: 50%;
    transition: background .2s;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.lb-zamknij { top: 18px; right: 18px; font-size: 38px !important; }
.lb-poprz { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-nast { right: 18px; top: 50%; transform: translateY(-50%); }
body.bez-przewijania { overflow: hidden; }

/* ── Paralaksa: tła przesuwa JS ───────────────────────────────────── */

/* ── Karty i kafle: delikatne uniesienie przy najechaniu ─────────── */
.karta, .strefa, .kolumny .kol { transition: transform .35s ease, box-shadow .35s ease; }
.karta:hover, .strefa:hover { transform: translateY(-6px); }
.strefa:hover { box-shadow: 0 16px 34px rgba(0,0,0,.14); }
.karta .obraz { transition: transform .5s ease; }
.karta:hover .obraz { transform: scale(1.06); }
.kolumny .kol img { transition: transform .5s ease; }
.kolumny .kol:hover img { transform: translateY(-4px); }
.btn { transition: background .25s, color .25s, transform .25s; }
.btn:hover { transform: translateY(-2px); }

@media (max-width: 480px) {
    .hero .kropki { right: 4px; bottom: 0; }
    .hero .kropki button::before { width: 10px; height: 10px; }
    .lightbox button { width: 44px; height: 44px; font-size: 24px; }
    .lb-zamknij { top: 10px; right: 10px; }
    .lb-poprz { left: 6px; } .lb-nast { right: 6px; }
}
@media (max-width: 280px) {
    .hero .kropki { right: 0; bottom: 0; }
    .lightbox figcaption { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero .slajd { transition: opacity .9s ease-in-out; }   /* przyblizenie hero zostaje */
    .galeria a .foto, .btn, .karta .obraz { transition: none; }
}

/* Notka pod tabelą (np. o połówkach) */
.tab-log .uwaga {
    margin: 0;
    padding: 10px 14px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #5b6470;
    border-top: 1px solid #e6e8eb;
}
@media (max-width: 480px) { .tab-log .uwaga { font-size: 12px; padding: 8px 10px 10px; } }
@media (max-width: 280px) { .tab-log .uwaga { font-size: 11px; } }

/* ── Miniatury wyrobów i podgląd po najechaniu ────────────────────── */
/* wyglad miniatur: patrz blok „Tabele asortymentu” */

.podglad-bloczka {
    position: fixed;
    z-index: 900;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
    padding: 12px 12px 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.98);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}
.podglad-bloczka.widoczny { opacity: 1; visibility: visible; transform: none; }
.podglad-bloczka img { display: block; width: 100%; height: auto; border-radius: 6px; }
.podglad-bloczka .nazwa {
    margin: 10px 2px 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ciemny);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.podglad-bloczka .nazwa span { font-weight: 400; color: #6b7480; font-size: 13px; }
@media (max-width: 480px) { .podglad-bloczka { width: 250px; padding: 8px; } }
@media (max-width: 280px) { .podglad-bloczka { width: 210px; } .podglad-bloczka .nazwa { font-size: 13px; } }

/* Mapa stref transportowych nad kaflami STREFA I–III */
.mapa-stref { max-width: 1185px; margin: 0 auto 8px; }
.mapa-stref img { width: 100%; height: auto; display: block; }

/* ── Przycisk „do góry" ───────────────────────────────────────────── */
.do-gory {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(24, 24, 24, .88);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.do-gory.widoczny { opacity: 1; visibility: visible; transform: none; }
.do-gory:hover, .do-gory:focus-visible { background: var(--akcent); outline: none; }
@media (max-width: 480px) { .do-gory { right: 12px; bottom: 12px; width: 42px; height: 42px; } }
@media (max-width: 280px) { .do-gory { right: 8px; bottom: 8px; width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) { .do-gory { transition: none; } }






/* ── Mapa lokalizacji (Leaflet + OpenStreetMap): zakład i biuro ─────── */
.mapa { position: relative; line-height: 0; }
.mapa-plotno { width: 100%; height: 460px; background: #e9eef2; z-index: 0; }
.mapa-legenda {
    position: absolute; z-index: 500; left: 16px; top: 16px;
    display: flex; flex-direction: column; gap: 8px;
    line-height: 1.3;
}
.mapa-legenda .pin {
    display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: center;
    padding: 10px 14px 10px 12px;
    background: #fff; border: 0; border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.16);
    color: var(--ciemny); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mapa-legenda .pin:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.mapa-legenda .pin b { font-size: 13px; }
.mapa-legenda .pin span:last-child { grid-column: 2; font-size: 12px; color: #6b7480; }
.mapa-legenda .znak {
    grid-row: 1 / span 2; width: 14px; height: 14px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: #1d8fd0; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px rgba(0,0,0,.12);
}
.mapa-legenda .biuro .znak { background: #e0a800; }
.znacznik { background: none; border: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.leaflet-container { font-family: inherit; font-size: 13px; }
.leaflet-tooltip.etykieta {
    border: 0; border-radius: 6px; padding: 4px 9px;
    font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--ciemny);
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.leaflet-tooltip-right.etykieta::before { border-right-color: #fff; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { margin: 12px 16px; font-size: 14px; line-height: 1.5; }
.leaflet-popup-content b { display: block; font-size: 15px; margin-bottom: 2px; }
.leaflet-popup-content a.nawiguj { display: inline-block; margin-top: 8px; color: #1d8fd0; font-weight: 600; text-decoration: none; }
.leaflet-popup-content a.nawiguj:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .mapa-plotno { height: 380px; }
    .mapa-legenda { left: 10px; top: 10px; right: 10px; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .mapa-plotno { height: 320px; }
    .mapa-legenda .pin { padding: 8px 10px; font-size: 12px; }
    .mapa-legenda .pin span:last-child { display: none; }
    .mapa-legenda .znak { grid-row: 1; }
}
@media (max-width: 280px) { .mapa-plotno { height: 260px; } .mapa-legenda .pin { padding: 6px 8px; font-size: 11px; } }
/* ── koniec mapy ── */



/* ── Menu: dłuższa pozycja „Strona główna" obok napisu marki ─────── */
@media (min-width: 769px) and (max-width: 1180px) {
    .menu { gap: 18px; }
    .menu a { font-size: 12px; letter-spacing: .06em; }
}
@media (min-width: 769px) and (max-width: 980px) {
    .menu { gap: 14px; }
    .menu a { font-size: 11px; letter-spacing: .04em; }
    .naglowek .haslo { display: none; }     /* hasło ustępuje miejsca menu */
    .naglowek .nazwa { font-size: 18px; }
}
/* ── koniec menu ── */

/* ── Nagłówek: napis marki przy okrągłym logo ───────────────── */
/* Krój: Saira – odmiana zmienna z osią szerokości (wdth). Grotesk techniczny:
   wąskie światła wewnątrz liter i wysokie wersaliki czytają się jak opis techniczny
   – norma, precyzja wymiaru, atest. Nazwa: 800 / szerokość 112 % / ciasne światło
   (blok liter trzyma się razem). Hasło: 500, szerokości rozstrzelone – kontrast
   masy i lekkości, który oko czyta jako „produkcja + norma”.
   Oba wiersze mają być równej długości: nazwa jest powiększana w proporcji
   --marka-x, hasło justowane do jej szerokości. Rozmiar całości = --marka-h. */
.naglowek .logo { gap: 15px; color: #fff; text-decoration: none; }
.naglowek .marka {
    --marka-h: 11px;
    --marka-x: 2.84;            /* stosunek długości obu wierszy przy tym samym stopniu pisma */
    display: flex; flex-direction: column; align-items: stretch;
    line-height: 1.02;
}
.naglowek .nazwa {
    font-family: Saira, Raleway, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-stretch: 112%;                 /* oś wdth – litery szersze, „nośne” */
    font-size: calc(var(--marka-h) * var(--marka-x));
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    transition: font-size .25s;
}
.naglowek .nazwa em { font-style: normal; color: #2aa9e0; }
.naglowek .haslo {
    font-family: Saira, Raleway, "Helvetica Neue", Arial, sans-serif;
    margin-top: 7px;
    font-size: var(--marka-h);
    font-weight: 500;
    font-stretch: 100%;
    letter-spacing: .24em;
    font-variant-numeric: tabular-nums;  /* „1920” na równej siatce cyfr */
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    text-align: justify;
    text-align-last: justify;            /* rozciąga wiersz dokładnie do szerokości nazwy */
    transition: font-size .25s, margin .25s;
}
@media (min-width: 981px) { .naglowek.zwiniety .marka { --marka-h: 9.5px; } }
@media (max-width: 768px) { .naglowek.zwiniety .marka { --marka-h: 8px; } }
.naglowek.zwiniety .haslo { margin-top: 5px; }
@media (max-width: 1180px) { .naglowek .marka { --marka-h: 10px; } }
@media (min-width: 769px) and (max-width: 980px) {
    .naglowek .marka { --marka-h: 9px; }
    .naglowek .haslo { display: none; }          /* miejsce dla menu */
    .naglowek .nazwa { font-size: 18px; }
}
@media (max-width: 768px) { .naglowek .logo { gap: 12px; } .naglowek .marka { --marka-h: 9px; } }
@media (max-width: 560px) { .naglowek .marka { --marka-h: 8px; } }
@media (max-width: 480px) {
    .naglowek .logo { gap: 10px; }
    .naglowek .haslo { display: none; }
    .naglowek .nazwa { font-size: 17px; letter-spacing: .04em; font-stretch: 108%; }
}
@media (max-width: 390px) { .naglowek .nazwa { font-size: 15px; } }
@media (max-width: 320px) { .naglowek .nazwa { font-size: 13.5px; font-stretch: 104%; } }
@media (max-width: 280px) {
    .naglowek .logo { gap: 8px; }
    .naglowek .nazwa { font-size: 12px; letter-spacing: .02em; font-stretch: 100%; }
}
/* kafel strefy z listą – ponad kolejną sekcją (hover ma transform, więc kafel sam jest kontekstem) */
.strefa:hover, .strefa:focus-within, .strefa.otwarta { z-index: 40; }
/* ── koniec napisu marki ── */













/* ── Strefy: lista miejscowości z odległością od zakładu + nowy wygląd kafli ── */
.strefy { gap: 30px; align-items: stretch; }
.strefa {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    padding-bottom: 0;
    box-shadow: 0 12px 34px rgba(0,0,0,.08);
    cursor: pointer;
    outline: none;
}
.strefa:focus-visible { box-shadow: 0 0 0 3px rgba(63,182,201,.55), 0 12px 34px rgba(0,0,0,.08); }
.strefa .pasek {
    border-radius: 16px 16px 0 0;
    padding: 18px 10px;
    font-size: clamp(18px, 2vw, 24px);
    letter-spacing: .1em;
}
.strefa .cena { margin: 30px 0 0; font-size: clamp(38px, 4.6vw, 62px); letter-spacing: -.01em; }
.strefa .netto {
    margin-top: 2px;
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #7a828d;
}
.strefa .rodzaj {
    align-self: center;
    margin: 22px 0 0;
    padding: 9px 22px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: .14em;
}
.strefa.i .rodzaj   { color: #6f5c95; background: #efeaf6; }
.strefa.ii .rodzaj  { color: #1f8ea0; background: #e3f6f9; }
.strefa.iii .rodzaj { color: #8a7100; background: #faf3d3; }
.strefa .wskazowka {
    margin: 26px 0 0;
    margin-top: auto;
    padding: 15px 10px 14px;
    border-top: 1px solid #eceef1;
    font-size: 13px;
    letter-spacing: .04em;
    color: #6b7480;
    transition: color .2s ease;
}
.strefa .wskazowka::after {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin: 0 0 3px 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.strefa:hover .wskazowka, .strefa.otwarta .wskazowka { color: var(--ciemny); }
.strefa:hover .wskazowka::after, .strefa.otwarta .wskazowka::after { transform: rotate(-135deg) translateY(-3px); }
.strefa:hover { box-shadow: 0 18px 44px rgba(0,0,0,.14); }
.strefa .lista {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 30;
    background: #fff;
    text-align: left;
    padding: 16px 20px 14px;
    border-top: 3px solid #8b7aa8;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 26px 50px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.strefa.ii .lista  { border-top-color: #3fb6c9; }
.strefa.iii .lista { border-top-color: #c9a400; }
.strefa:hover .lista, .strefa:focus-visible .lista, .strefa.otwarta .lista {
    opacity: 1; visibility: visible; transform: none;
}
/* zabezpieczenie: przy przypiętym kaflu hover na innym nie pokazuje drugiego panelu */
.strefy:has(.strefa.otwarta) .strefa:not(.otwarta):hover .lista,
.strefy:has(.strefa.otwarta) .strefa:not(.otwarta):focus-visible .lista {
    opacity: 0; visibility: hidden; transform: translateY(8px);
}
.strefa .lista .kryterium {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-size: 14px; font-weight: 700;
    color: var(--ciemny);
}
.strefa .lista .kropka { width: 10px; height: 10px; border-radius: 50%; background: #8b7aa8; flex: none; }
.strefa.ii .lista .kropka  { background: #3fb6c9; }
.strefa.iii .lista .kropka { background: #c9a400; }
/* siatka zamiast kolumn wielolamowych: przy waskiej karcie sama schodzi
   do jednej kolumny, wiec „km” nigdy nie wypada poza kafel */
.strefa .lista ul {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));   /* panel I/II (313 px w srodku) = 2 kolumny, III (592 px) = 3 */
    column-gap: 24px;
}
/* strefa III ma ~40 miejscowości: szerszy panel (do prawej krawędzi kafla) i 3 kolumny */
@media (min-width: 769px) {
    .strefa.iii .lista { left: auto; right: 0; width: min(640px, calc(100vw - 32px)); padding: 16px 24px 14px; }
    .strefa.iii .lista ul { column-gap: 26px; }
}
.strefa .lista li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
    font-size: 14px; line-height: 1.5; padding: 3px 0;
    border-bottom: 1px dotted #e3e6ea;
    break-inside: avoid;
}
.strefa .lista li b { justify-self: end; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.strefa .lista .dalej { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--ciemny); }
.strefa .lista .zrodlo { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #6b7480; }
/* dotyk / wąskie ekrany: lista rozwija się w kaflu po stuknięciu */
@media (hover: none), (max-width: 768px) {
    .strefa .lista {
        position: static; max-height: 0; overflow: hidden;
        padding: 0 20px; border-top: 0; box-shadow: none; border-radius: 0 0 16px 16px;
        opacity: 1; visibility: visible; transform: none;
        transition: max-height .45s ease, padding .3s ease;
    }
    .strefa.otwarta .lista { max-height: 2400px; padding: 14px 20px 14px; }
    .strefa:hover { transform: none; box-shadow: 0 12px 34px rgba(0,0,0,.08); }
    .strefa:hover .wskazowka { color: #6b7480; }
    .strefa:hover .wskazowka::after { transform: rotate(45deg); }
    .strefa.otwarta .wskazowka { color: var(--ciemny); }
    .strefa.otwarta .wskazowka::after { transform: rotate(-135deg) translateY(-3px); }
}
/* notki pod kaflami */
.uwagi {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 26px 40px;
    align-items: center;
    margin-top: 44px;
    padding: 26px 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0,0,0,.06);
    text-align: left;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4a525d;
}
.uwagi p { margin: 0; }
.uwagi p + p { margin-top: 12px; }
.doplaty { display: grid; gap: 14px; }
.doplata {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    background: #f7f8fa;
}
.doplata svg { width: 32px; height: 32px; color: #3fb6c9; }
.doplata span { font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.4; }
.doplata b { font-size: 22px; font-weight: 700; letter-spacing: 0; color: var(--ciemny); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .uwagi { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
    .strefa .lista ul { grid-template-columns: 1fr; }   /* telefon: zawsze jedna kolumna */
    .strefa .lista li, .strefa .lista .kryterium { font-size: 13px; }
    .strefa .wskazowka { font-size: 12px; }
    .uwagi { padding: 20px 18px; font-size: 12px; }
    .doplata { padding: 12px 14px; gap: 10px; }
    .doplata b { font-size: 19px; }
}
@media (max-width: 320px) { .doplata { grid-template-columns: 28px minmax(0, 1fr); } .doplata b { grid-column: 2; } .doplata svg { width: 28px; height: 28px; } }
@media (max-width: 280px) {
    .strefa .lista { padding-left: 12px; padding-right: 12px; }
    .strefa.otwarta .lista { padding: 10px 12px 10px; }
    .strefa .lista li { font-size: 12px; }
    .strefa .lista .zrodlo { font-size: 11px; }
    .uwagi { padding: 16px 12px; font-size: 11px; letter-spacing: .02em; }
    .doplata b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .strefa .lista, .strefa .wskazowka::after { transition: none; } }
/* ── koniec stref ── */

/* ── Wybór środka transportu nad tabelą LOGISTYKA ─────────────────── */
.wybor-auta { margin: 34px auto 0; max-width: 1120px; }
.wybor-auta .etykieta {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}
.wybor-auta .opcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wybor-auta button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 168px;
    padding: 11px 20px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.wybor-auta button b { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.wybor-auta button span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.wybor-auta button:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.wybor-auta button:focus-visible { outline: 2px solid #3fb6c9; outline-offset: 2px; }
.wybor-auta button.wybrane {
    background: #fff;
    color: var(--ciemny);
    border-color: #fff;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.wybor-auta button.wybrane span { opacity: .6; }
.tab-log .auto-etykieta { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #6b7480; text-transform: none; }
.tab-log td.d-pal, .tab-log td.d-szt, .tab-log td.d-waga { transition: background-color .5s ease; }
.tab-log tr.przeliczone td.d-pal, .tab-log tr.przeliczone td.d-szt, .tab-log tr.przeliczone td.d-waga { background: #e6f6fb; }
@media (max-width: 768px) {
    .wybor-auta { margin-top: 26px; }
    .wybor-auta .opcje { gap: 8px; }
    .wybor-auta button { min-width: 0; flex: 1 1 calc(50% - 8px); padding: 9px 12px; align-items: center; }
}
@media (max-width: 480px) { .wybor-auta button b { font-size: 14px; } .wybor-auta button span { font-size: 10px; } .wybor-auta .etykieta { font-size: 12px; } }
@media (max-width: 320px) { .wybor-auta button { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .wybor-auta button, .tab-log td.d-pal, .tab-log td.d-szt, .tab-log td.d-waga { transition: none; } }
/* ── koniec wyboru auta ── */















/* ── Wejścia elementów przy przewijaniu (jak wow.js + animate.css) ──
   fadeInLeft / fadeInRight / fadeInUp, 0,8 s, schodek opóźnień jak w oryginale. */
.bez-przejsc .odslon { transition: none !important; }
.js .odslon {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.16,.72,.24,1);
    transition-delay: calc(var(--i, 0) * 200ms);
    will-change: opacity, transform;
}
.js .odslon--lewo  { transform: translate3d(-90px, 0, 0); }
.js .odslon--prawo { transform: translate3d(90px, 0, 0); }
.js .odslon--gora  { transform: translate3d(0, -52px, 0); }
.js .odslon--dol   { transform: translate3d(0, 52px, 0); }
.js .odslon.widoczny { opacity: 1; transform: none; }
.js .galeria a.odslon { transform: translate3d(0, 30px, 0) scale(.96); }
.js .galeria a.odslon.widoczny { transform: none; }
@media (max-width: 768px) {
    /* na wąskim ekranie łagodniej – żeby nie rozpychać strony w poziomie */
    .js .odslon--lewo  { transform: translate3d(-26px, 0, 0); }
    .js .odslon--prawo { transform: translate3d(26px, 0, 0); }
}
/* ── koniec wejść ── */

/* ── Więcej dynamiki (bez zmiany układu) ──────────────────────────── */
/* kreska pod tytułem sekcji rozjeżdża się przy wejściu */

/* sześciokątne zdjęcia produkcji i jakości – oddech przy najechaniu */
.kolumny .kol img, .karta .obraz, .kafel img {
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.kolumny .kol:hover img, .kafel:hover img { transform: scale(1.06) translateY(-4px); }
.karta:hover .obraz { transform: scale(1.05); }
.kolumny .kol { transition: transform .35s ease; }
.kolumny .kol:hover { transform: translateY(-6px); }

/* miniatury wyrobów w tabelach – wyraźniejsza reakcja */
.tab-log th.produkt img { transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .3s ease; }

/* przyciski – lekkie uniesienie i cień */
.btn { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }

/* kropki pokazu slajdów – pulsująca aktywna */
.hero .kropki button::before { transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease; }
.hero .kropki button[aria-current="true"]::before, .hero .kropki button.aktywna::before { transform: scale(1.35); }

/* znacznik „przewiń w dół" – delikatne kołysanie */
@keyframes kolysanie { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.hero .przewin img { animation: kolysanie 2.4s ease-in-out infinite; }

/* liczniki statystyk – subtelne podświetlenie po dojściu do celu */
.licznik { transition: color .4s ease, transform .4s ease; }
.statystyki > div:hover .licznik { transform: scale(1.06); }
/* ── koniec dynamiki ── */

/* ── Paralaksa obrazów w treści (mapa stref itp.) ─────────────────── */
.paralaksa-ramka { overflow: hidden; }
.paralaksa-ramka img { transform: scale(1.1); will-change: transform; }
/* ── koniec paralaksy obrazów ── */

/* ── Projekty unijne: baner urzędowy + ta sama treść tekstem ───────── */
.projekty { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 52px; text-align: left; }
.projekt {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(0,0,0,.09);
    transition: transform .35s ease, box-shadow .35s ease;
}
.projekt::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 2;
    background: linear-gradient(90deg, #d0342c 0%, #d0342c 22%, #1b3c7a 22%, #1b3c7a 100%);
}
.projekt--fe::before { background: linear-gradient(90deg, #ffd617 0%, #ffd617 18%, #003399 18%, #003399 100%); }
.projekt:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(0,0,0,.15); }
.projekt .baner { display: block; line-height: 0; background: #fff; }
.projekt .baner img { width: 100%; height: auto; display: block; }
.projekt .baner::after {
    content: "Kliknij, aby powiększyć";
    display: block;
    padding: 8px 30px 10px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a929c;
    line-height: 1.4;
    text-align: right;
}
.projekt .tresc-projektu {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 28px 40px;
    padding: 26px 30px 30px;
    border-top: 1px solid #eceef1;
}
.projekt .etap {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #eaf4f8;
    color: #1f7f95;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.projekt--fe .etap { background: #eef0f6; color: #3c4a6b; }
.projekt h3 {
    margin: 0 0 14px;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700; line-height: 1.35; letter-spacing: .01em;
    color: var(--ciemny);
}
.projekt p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #4a525d; }
.projekt .dane { margin: 0; align-self: start; background: #f7f8fa; border-radius: 12px; padding: 14px 18px; }
.projekt .dane div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 7px 0; }
.projekt .dane div + div { border-top: 1px dotted #e1e5ea; }
.projekt .dane dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7a828d; }
.projekt .dane dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--ciemny); font-variant-numeric: tabular-nums; }
.projekt .dane dd.kwota { font-size: 21px; color: #1b6e2f; }
.projekt .dane dd.drobne { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.projekt .mapa-dotacji { grid-column: 1 / -1; margin: 0; padding-top: 6px; }
.projekt .mapa-dotacji a { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #1d8fd0; text-decoration: none; }
.projekt .mapa-dotacji a:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .projekt .tresc-projektu { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 480px) {
    .projekty { gap: 28px; }
    .projekt .tresc-projektu { padding: 20px 18px 22px; }
    .projekt .baner::after { padding: 6px 18px 8px; font-size: 10px; }
    .projekt p { font-size: 14px; }
    .projekt .dane dd { font-size: 16px; }
    .projekt .dane dd.kwota { font-size: 19px; }
}
@media (max-width: 280px) {
    .projekt .tresc-projektu { padding: 16px 12px 18px; }
    .projekt p { font-size: 13px; }
    .projekt .dane { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .projekt { transition: none; } }
/* ── koniec projektów unijnych ── */

/* ── Bez poziomego paska przy wjazdach z boku ─────────────────────
   Elementy czekające na wjazd stoją przesunięte o 90 px w bok; bez tego
   przeglądarka pokazywała poziomy pasek (3–60 px). „clip" zamiast „hidden",
   żeby nie zepsuć przyklejonego nagłówka. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* ── koniec ── */


/* ── Kreska ze znakiem firmowym nad tytułem sekcji ─────────────────
   Linie rysuje CSS (zawsze ostre), znak to grafika 200 px pokazywana w 50 px. */
.separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 6px 0 20px;
    line-height: 0;
}
.separator .kreska { display: block; width: clamp(64px, 10vw, 128px); height: 1px; background: #2b2b2b; }
.separator .znak {
    width: 38px; height: 36px;   /* proporcje znaku 220×205 */
    display: block;
    background: #262626;
    -webkit-mask: url(../images/znak-silikaty-maska.png) center / contain no-repeat;
            mask: url(../images/znak-silikaty-maska.png) center / contain no-repeat;
}
/* starsze przeglądarki bez masek – zwykła grafika */
@supports not ((-webkit-mask-image: url(a)) or (mask-image: url(a))) {
    .separator .znak { background: url(../images/znak-silikaty-ciemny.png) center / contain no-repeat; }
    .sekcja--foto .separator .znak, .sekcja--ciemna .separator .znak, .kontakt .separator .znak {
        background-image: url(../images/znak-silikaty-bialy.png);
    }
}
.sekcja--foto .separator .kreska, .sekcja--ciemna .separator .kreska, .kontakt .separator .kreska { background: #fff; }
.sekcja--foto .separator .znak, .sekcja--ciemna .separator .znak, .kontakt .separator .znak { background-color: #fff; }
.podtytul.wstep { margin-bottom: 6px; }

/* zdjęcie bloczków pod „DBAMY O JAKOŚĆ" i logotyp w sekcji AKUSTYKA */
.foto-bloczki { margin: 38px 0 0; line-height: 0; text-align: center; }
.foto-bloczki img { width: min(760px, 92%); height: auto; display: inline-block; }
.logo-sekcji { margin: 30px 0 0; line-height: 0; text-align: center; }
.sekcja--foto .logo-sekcji { margin: 0 0 26px; }



@media (max-width: 480px) {
    .separator { gap: 12px; margin: 4px 0 16px; }
    .separator .znak { width: 32px; height: 30px; }
    .foto-bloczki { margin-top: 28px; }
    .logo-sekcji img { width: 180px; }
}
@media (max-width: 280px) {
    .separator { gap: 8px; }
    .separator .kreska { width: 40px; }
    .separator .znak { width: 28px; height: 26px; }
    .logo-sekcji img { width: 150px; }
}
/* ── koniec kreski ── */

/* ── Zdjęcie bloczków bez odstępu do kolejnej sekcji (jak w oryginale) ── */
#about-us { padding-bottom: 0; }
#about-us .foto-bloczki { margin-bottom: 0; }
#about-us .foto-bloczki img { margin-bottom: -2px; }   /* styka się z pasem zdjęcia */
/* ── koniec ── */

/* ── Okrągłe logo w sekcjach (tam, gdzie w oryginale był stary logotyp) ── */
.logo-sekcji { margin: 30px 0 0; line-height: 0; text-align: center; }
.sekcja--foto .logo-sekcji { margin: 0 0 28px; }
.logo-sekcji img {
    width: 110px; height: 110px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
@media (max-width: 480px) { .logo-sekcji img { width: 88px; height: 88px; } }
@media (max-width: 280px) { .logo-sekcji img { width: 72px; height: 72px; } }
/* ── koniec ── */


/* ── Karty plików do pobrania (pas AKUSTYKI) ──────────────────────── */
.pliki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 20px;
    max-width: 920px;
    margin: 0 auto;
    text-align: left;
}
.pliki .plik {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(18, 22, 28, .38);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
            backdrop-filter: blur(9px) saturate(120%);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 16px 38px rgba(0,0,0,.22);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pliki .plik:hover, .pliki .plik:focus-visible {
    transform: translateY(-5px);
    background: rgba(255,255,255,.96);
    border-color: #fff;
    color: var(--ciemny) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,.3);
    outline: none;
}
.pliki .ikona {
    display: grid; place-items: center;
    width: 58px; height: 58px;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.4);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.pliki .ikona svg { width: 30px; height: 30px; }
.pliki .plik:hover .ikona, .pliki .plik:focus-visible .ikona {
    background: #e64b3c; border-color: #e64b3c; color: #fff;
}
.pliki .nazwa {
    display: block;
    font-size: 19px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.25;
}
.pliki .opis { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; opacity: .88; }
.pliki .meta {
    display: block; margin-top: 8px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7;
}
.pliki .strzalka { display: grid; place-items: center; }
.pliki .strzalka svg { width: 24px; height: 24px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.pliki .plik:hover .strzalka svg, .pliki .plik:focus-visible .strzalka svg { transform: translateX(5px); }
@media (max-width: 480px) {
    .pliki .plik { grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 14px; padding: 16px; }
    .pliki .ikona { width: 46px; height: 46px; border-radius: 12px; }
    .pliki .ikona svg { width: 24px; height: 24px; }
    .pliki .nazwa { font-size: 16px; }
    .pliki .opis { font-size: 13px; }
}
@media (max-width: 280px) {
    .pliki .plik { grid-template-columns: 38px minmax(0, 1fr); padding: 14px 12px; }
    .pliki .strzalka { display: none; }
    .pliki .nazwa { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pliki .plik, .pliki .strzalka svg { transition: none; } }
/* ── koniec kart plików ── */

/* ── Najczęstsze pytania (FAQ) ─────────────────────────────────────── */
.pytania { max-width: 900px; margin: 46px auto 0; text-align: left; }
.pytanie {
    border: 1px solid #e4e7ea;
    border-radius: 14px;
    background: #fff;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.05);
    transition: box-shadow .25s ease, border-color .25s ease;
}
.pytanie[open] { border-color: #d3dae0; box-shadow: 0 14px 32px rgba(0,0,0,.09); }
.pytanie summary {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 20px 24px;
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 700; letter-spacing: .01em; color: var(--ciemny);
    cursor: pointer; list-style: none;
}
.pytanie summary::-webkit-details-marker { display: none; }
.pytanie summary::after {
    content: "";
    flex: none;
    width: 12px; height: 12px;
    border-right: 2px solid #6b7480; border-bottom: 2px solid #6b7480;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
}
.pytanie[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pytanie summary:hover { color: #1d8fd0; }
.pytanie .odpowiedz { padding: 0 24px 22px; }
.pytanie .odpowiedz p { margin: 0; font-size: 16px; line-height: 1.7; color: #4a525d; }
@media (max-width: 480px) {
    .pytanie summary { padding: 16px 16px; font-size: 15px; }
    .pytanie .odpowiedz { padding: 0 16px 18px; }
    .pytanie .odpowiedz p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pytanie, .pytanie summary::after { transition: none; } }
/* ── koniec pytań ── */


/* ── Nagłówek sekcji OFERTA ───────────────────────────────
   Pas redakcyjny nad tabelą: nadtytuł z kreską, tytuł po lewej, zdanie
   wprowadzające po prawej, włosowa linia pod całością. Dzięki temu tabela
   ma pełną szerokość, a słowo-wyświetlacz może być naprawdę duże.
   Krój Saira – ten sam co napis marki. ─────────────────────── */
.oferta .naglowki {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px) auto;
    grid-template-areas:
        "nad  nad   znak"
        "tyt  lead  znak";
    align-items: end;
    gap: 18px 44px;
    padding-bottom: 26px;
    border-bottom: 1px solid #e4e8ec;
}
.oferta .naglowki .nadtytul { grid-area: nad; }
.oferta .naglowki .tytul-oferty { grid-area: tyt; }
.oferta .naglowki .lead-oferty { grid-area: lead; }
.oferta .naglowki .znak-oferty {
    grid-area: znak;
    align-self: end;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 32, .10);
}
.oferta .naglowki .nadtytul {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 4px;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #1f93c7;
}
.oferta .naglowki .nadtytul::before {
    content: "";
    flex: none;
    width: 30px; height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.oferta .naglowki .tytul-oferty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-weight: 400;
}
.oferta .naglowki .wstepnie {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #737c86;
}
.oferta .naglowki .glowne {
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: clamp(28px, 4.2vw, 50px);
    font-weight: 700;
    font-stretch: 105%;
    line-height: .95;
    letter-spacing: .005em;
    text-transform: uppercase;
    color: var(--ciemny);
}
.oferta .naglowki .lead-oferty {
    margin: 0 0 4px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--szary);
}
@media (max-width: 860px) {
    .oferta .naglowki {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nad  znak"
            "tyt  tyt"
            "lead lead";
        align-items: start;
        gap: 14px 16px;
        padding-bottom: 20px;
    }
    .oferta .naglowki .znak-oferty { align-self: start; width: 64px; height: 64px; }
    .oferta .naglowki .lead-oferty { margin: 0; max-width: 62ch; }
}
@media (max-width: 390px) { .oferta .naglowki .znak-oferty { width: 52px; height: 52px; } }
@media (max-width: 280px) { .oferta .naglowki .znak-oferty { width: 44px; height: 44px; } }
@media (max-width: 320px) {
    .oferta .naglowki .glowne { font-size: 27px; }
    .oferta .naglowki .lead-oferty { font-size: 14.5px; }
}
@media (max-width: 280px) {
    .oferta .naglowki .glowne { font-size: 22px; }
    .oferta .naglowki .wstepnie { font-size: 11.5px; letter-spacing: .1em; }
    .oferta .naglowki .nadtytul { font-size: 10.5px; gap: 8px; }
    .oferta .naglowki .nadtytul::before { width: 20px; }
    .oferta .naglowki .lead-oferty { font-size: 14px; }
}
/* ── koniec nagłówka oferty ── */

/* ── Komórka produktu: zdjęcie + nazwa razem ────────────────────
   Wcześniej nazwa stała przy lewej krawędzi swojej kolumny, a zdjęcie
   pośrodku następnej – między nimi robiła się dziura. Teraz to jeden blok. */
.tab-log th.produkt { text-align: left; padding: 8px 12px 8px 20px; font-weight: 400; }
.tab-log th.produkt .box { display: flex; align-items: center; gap: 18px; }
.tab-log th.produkt img {
    flex: none;
    width: 112px; height: 88px;
    object-fit: contain;
    padding: 4px;
    background: #f6f8fa;
    border-radius: 12px;
    cursor: zoom-in;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.tab-log th.produkt .nazwa {
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .035em;
    font-stretch: 105%;
    white-space: nowrap;
}
.tab-log tbody tr:hover th.produkt img { background: #eaf5fb; box-shadow: 0 8px 20px rgba(16, 24, 32, .10); }
.tab-log th.produkt img:hover, .tab-log th.produkt img:focus-visible { transform: scale(1.05); outline: none; }

/* OFERTA: wartości wyśrodkowane w swoich kolumnach – kolumny są szerokie,
   a wszystkie liczby w kolumnie mają tę samą długość, więc środek daje równy rytm.
   (W LOGISTYCE zostaje wyrównanie do prawej – tam liczby są różnej długości.) */
.tab-oferta th, .tab-oferta td { text-align: center; }
.tab-oferta th.produkt { text-align: left; }
.tab-oferta thead th.g-produkt { text-align: left; }

@media (max-width: 992px) {
    .tab-log th.produkt img { width: 104px; height: 82px; }
    .tab-log th.produkt .nazwa { font-size: 18px; }
    .tab-log th.produkt .box { gap: 14px; }
}
/* obie tabele mają ten sam rozmiar zdjęć – żadnych wyjątków dla LOGISTYKI */
@media (max-width: 768px) {
    .tab-log th.produkt { padding-left: 14px; }
    .tab-log th.produkt img { width: 92px; height: 72px; }
}
@media (max-width: 480px) {
    .tab-log th.produkt { padding-left: 11px; }
    .tab-log th.produkt img { width: 78px; height: 62px; border-radius: 10px; }
    .tab-log th.produkt .nazwa { font-size: 16px; }
    .tab-log th.produkt .box { gap: 11px; }
}
@media (max-width: 280px) {
    .tab-log th.produkt img { width: 62px; height: 50px; padding: 2px; border-radius: 8px; }
    .tab-log th.produkt .nazwa { font-size: 14px; }
    .tab-log th.produkt .box { gap: 9px; }
}
/* ── koniec komórki produktu ── */

/* ── Tabela akustyki i ognia ────────────────────────────────
   Dziewięć kolumn liczbowych (Rₓ w trzech wariantach tynku) nie zmieściłoby się
   w tabeli asortymentu – stąd osobna, węższa tabela w tej samej sekcji. */
.tytul-akustyka {
    margin: 40px 0 6px;
    text-align: center;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: clamp(19px, 2.1vw, 26px);
    font-weight: 700;
    font-stretch: 105%;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--ciemny);
}
.wstep-akustyka { margin: 0 auto 18px; max-width: 78ch; text-align: center; font-size: 15px; line-height: 1.65; color: var(--szary); }
.tab-akustyka { text-align: left; margin-top: 0; }
.tab-akustyka table { table-layout: fixed; min-width: 900px; }
.tab-akustyka th, .tab-akustyka td { text-align: center; padding: 10px 6px; }
.tab-akustyka th:first-child, .tab-akustyka td:first-child { text-align: left; }
.tab-akustyka th:last-child, .tab-akustyka td:last-child { padding-right: 20px; }
.tab-akustyka th.nazwa-a {
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-stretch: 105%;
    letter-spacing: .035em;
    white-space: nowrap;
}
.tab-akustyka td.sciana { color: #6b7480; }
.tab-akustyka td.ogien { font-size: 13.5px; letter-spacing: .03em; color: #3a3f47; white-space: nowrap; }
.tab-akustyka td.brak { color: #b6bcc4; }
.tab-akustyka td.obl { color: #4a5763; }        /* wartości policzone, nie z badania */
.tab-akustyka .odn { font-size: .7em; color: #1f93c7; margin-left: 2px; }
.tab-akustyka thead th sub { font-size: .72em; }
/* delikatne rozdzielenie grup tynków */
.tab-akustyka tbody td:nth-child(3), .tab-akustyka tbody td:nth-child(6),
.tab-akustyka tbody td:nth-child(9), .tab-akustyka tbody td:nth-child(12),
.tab-akustyka thead tr:last-child th:nth-child(1), .tab-akustyka thead tr:last-child th:nth-child(4),
.tab-akustyka thead tr:last-child th:nth-child(7) { border-left: 1px solid #f0f3f6; }
@media (max-width: 768px) {
    .tab-akustyka th, .tab-akustyka td { padding: 9px 5px; }
    .tab-akustyka th:first-child, .tab-akustyka td:first-child { padding-left: 14px; }
    .tab-akustyka th.nazwa-a { font-size: 16px; }
    .wstep-akustyka { font-size: 14.5px; }
}
@media (max-width: 480px) {
    .tab-akustyka table { font-size: 13px; }
    .tab-akustyka th.nazwa-a { font-size: 15px; }
    .tab-akustyka td.ogien { font-size: 12.5px; }
    .tab-akustyka th:first-child, .tab-akustyka td:first-child { padding-left: 11px; }
}
@media (max-width: 280px) {
    .tab-akustyka table { font-size: 12px; }
    .tab-akustyka th.nazwa-a { font-size: 14px; }
}
/* ── koniec tabeli akustyki ── */

/* przypisy pod tabelą na podstronach */
.przypisy { margin: 10px 0 24px; font-size: 13.5px; line-height: 1.6; color: #6b7480; }
.przypisy sup { color: #1f93c7; font-weight: 700; }

/* ── Cele dotykowe na telefonie ──────────────────────────────
   Linki w stopce oraz telefon i e-mail miały 15–21 px wysokości – za mało,
   żeby trafić palcem. Powiększamy pole dotyku, nie zmieniając wyglądu tekstu. */
@media (max-width: 768px) {
    .stopka .linki a,
    .kontakt .tel a,
    .kontakt .mail a,
    .top nav a,
    .okruszki a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .stopka .linki { gap: 0 16px; }
    .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; }
}
/* ── koniec celów dotykowych ── */

/* ── Domknięcie audytu responsywności ────────────────────────
   Na telefonie dwie komórki główki tabeli OFERTA nie mieściły tekstu:
   „L.p.” (32 px treści w komórce 28 px) i „Klasa wytrzymałości” (118 w 105).
   Pierwszej dajemy węższe marginesy, drugiej pozwalamy przenieść długie słowo. */
@media (max-width: 768px) {
    .tab-oferta th.lp, .tab-oferta td.lp { padding-left: 6px; padding-right: 4px; }
    .mapa-legenda .pin { min-height: 40px; }
}
/* ── koniec ── */

/* ── Mega menu „Realizacje” ───────────────────────────────
   Panel wisi pod paskiem (absolutnie względem nagłówka), więc nie rozpycha menu.
   Pokazuje się tylko przy myszy i od 860 px – na telefonie pozycja jest zwykłym
   linkiem do sekcji REALIZACJE. */
.naglowek .mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #fff;
    color: var(--ciemny);
    box-shadow: 0 26px 52px rgba(10, 16, 22, .22);
    border-top: 1px solid rgba(255, 255, 255, .12);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1);
    z-index: 60;
}
.naglowek .mega.widoczne { opacity: 1; transform: none; }
.naglowek .mega-wrap {
    max-width: var(--maks);
    margin: 0 auto;
    padding: 26px var(--gutter) 30px;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 28px 36px;
    align-items: start;
}
.naglowek .mega-nad {
    margin: 0 0 8px;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #1f93c7;
}
.naglowek .mega-tytul {
    margin: 0 0 10px;
    font-family: Saira, Raleway, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    font-stretch: 105%;
    line-height: 1.12;
    color: var(--ciemny);
}
.naglowek .mega-tekst { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--szary); }
.naglowek .mega-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1f93c7;
    text-decoration: none;
}
.naglowek .mega-link svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.naglowek .mega-link:hover svg { transform: translateX(4px); }
.naglowek .mega-foty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.naglowek .mega-foty a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2f6;
    line-height: 0;
    box-shadow: 0 8px 20px rgba(10, 16, 22, .10);
}
.naglowek .mega-foty img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.naglowek .mega-foty a:hover img, .naglowek .mega-foty a:focus-visible img { transform: scale(1.07); }
.naglowek .mega-foty a:focus-visible { outline: 3px solid #1f93c7; outline-offset: 2px; }
@media (max-width: 1100px) {
    .naglowek .mega-wrap { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 22px 26px; }
    .naglowek .mega-foty img { height: 100px; }
    .naglowek .mega-tytul { font-size: 21px; }
}
/* wąskie ekrany i dotyk: żadnego panelu – zwykły link */
@media (max-width: 859px), (hover: none) {
    .naglowek .mega { display: none !important; }
}
/* ── koniec mega menu ── */

/* źródła pod pytaniami */
.zrodla-faq { margin: 18px 4px 0; font-size: 12.5px; line-height: 1.6; color: #6b7480; }
.zrodla-faq a { color: #1f93c7; }

/* ── RODO: nakładka na mapę, dane rejestrowe w stopce, klauzula pod formularzem ── */
.mapa-plotno { position: relative; }
.mapa-zgoda {
    position: absolute; inset: 0; z-index: 1000;
    display: grid; place-items: center; align-content: center; gap: 14px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,0)),
        repeating-linear-gradient(0deg, #e4e9ee 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, #e4e9ee 0 1px, transparent 1px 40px),
        #eef2f6;
}
.mapa-zgoda p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: #4a5763; }
.mapa-zgoda p b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ciemny); }
.mapa-zgoda a { color: #1f93c7; }
.mapa-zgoda button {
    padding: 13px 28px; min-height: 46px;
    border: 0; border-radius: 12px;
    background: linear-gradient(135deg, #3ab6df, #1f93c7); color: #fff;
    font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; box-shadow: 0 12px 26px rgba(31,147,199,.35);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.mapa-zgoda button:hover, .mapa-zgoda button:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31,147,199,.45); outline: none; }
.stopka .rejestr { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: #7d8791; text-align: center; }
.stopka .rejestr a { color: #9fb3c2; }
.stopka .rejestr a:hover { color: #cfd8e0; }
.kontakt .rodo { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: #9aa4ae; }
.kontakt .rodo a { color: #7cc7e6; }
@media (max-width: 480px) { .mapa-zgoda { padding: 18px 14px; } .mapa-zgoda p { font-size: 13px; } }
@media (max-width: 280px) { .mapa-zgoda button { padding: 11px 18px; font-size: 12.5px; } .stopka .rejestr { font-size: 11px; } }
/* ── koniec RODO ── */

/* ── Główki tabel bez łamania słów ───────────────────────────
   Krótkie etykiety (L.p., dł., szer., wys., ilość palet) zostają w jednej linii;
   LOGISTYKA (13 kolumn) ma stałą szerokość minimalną i przewija się w karcie,
   zamiast ściskać kolumny do szerokości jednej litery. */
.tab-log thead th.lp, .tab-log thead tr:last-child th { white-space: nowrap; }
.tab-log:not(.tab-oferta):not(.tab-akustyka) table { min-width: 1040px; }
/* LOGISTYKA: ciasniejsze marginesy komorek, zeby 13 kolumn zmiescilo sie w karcie 1118 px bez przewijania */
.tab-log:not(.tab-oferta):not(.tab-akustyka) th, .tab-log:not(.tab-oferta):not(.tab-akustyka) td { padding-left: 7px; padding-right: 7px; }
.tab-log:not(.tab-oferta):not(.tab-akustyka) th:first-child, .tab-log:not(.tab-oferta):not(.tab-akustyka) td:first-child { padding-left: 16px; }
.tab-log:not(.tab-oferta):not(.tab-akustyka) th:last-child, .tab-log:not(.tab-oferta):not(.tab-akustyka) td:last-child { padding-right: 16px; }
/* ── koniec ── */

/* ── Inspekcja responsywności 2 – drobne poprawki ────────────────────────
   280 px: tytuł „JAKOŚĆ I BEZPIECZEŃSTWO” był o 8 px szerszy od ekranu (jedno słowo 255 px
   przy 28 px); najmniejsze napisy podniesione do 11–11,5 px. */
@media (max-width: 280px) {
    .tytul { font-size: 26px; }
    .hero .przewin span { font-size: 10.5px; }
    .uwaga, .tab-log .uwaga { font-size: 11.5px; }
    .stopka .rejestr { font-size: 11.5px; }
    .oferta .naglowki .nadtytul { font-size: 11px; }
}
@media (max-width: 480px) {
    .wybor-auta .opcje button span { font-size: 11px; }
}
/* ── koniec ── */