/* ==========================================================================
   MP-Technik | Narzędzia wiertnicze HDD – jasny motyw, jedna czcionka: Inter
   Spis treści:
   0. Czcionka                 5. Hero                 10. Podstrony
   1. Zmienne i podstawy       6. Atuty                11. Galeria i lightbox
   2. Typografia i przyciski   7. Oferta (asortyment)  12. Opinie Google
   3. Nagłówek i nawigacja     8. Marki wiertnic       13. Kontakt i formularz
   4. Kategorie w menu         9. (usunięte)           14. Stopka
      mobilnym, siatka kafli
                                                       15. Animacje i responsywność
   ========================================================================== */

/* 0. Czcionka (serwowana lokalnie – bez połączeń z Google Fonts) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 1. Zmienne i podstawy --------------------------------------------------- */
:root {
    --tusz: #0e1c33;
    --tekst: #25324a;
    --tekst-2: #5b6779;
    --niebieski: #0a77bd;
    --niebieski-ciemny: #07609a;
    --granat: #12366b;
    --granat-2: #0e2a55;
    --akcent: #ff6a13;
    --akcent-ciemny: #d94f06;
    --papier: #f4f7fb;
    --blekit: #e8f2fa;
    --linia: #e0e7f0;
    --bialy: #fff;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --kontener: 1360px;
    --margines: clamp(18px, 4vw, 40px);
    --promien: 16px;
    --cien: 0 22px 50px -24px rgba(18, 54, 107, .28);
    --cien-maly: 0 8px 24px -14px rgba(18, 54, 107, .3);
    --plynnie: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--tekst);
    background: var(--bialy);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.bez-przewijania { overflow: hidden; }

::selection { background: var(--niebieski); color: var(--bialy); }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, address, blockquote { margin: 0; }
address { font-style: normal; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[id] { scroll-margin-top: 104px; }

.kontener { width: 100%; max-width: calc(var(--kontener) + 2 * var(--margines)); margin-inline: auto; padding-inline: var(--margines); }
.kontener--waski { max-width: calc(880px + 2 * var(--margines)); }

.ikona { width: 1.2em; height: 1.2em; flex: none; }
.ikona3d { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(10, 119, 189, .22)); }

.pomin { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--niebieski); color: var(--bialy); padding: 10px 16px; font-weight: 600; border-radius: 8px; }
.pomin:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--niebieski); outline-offset: 3px; }

/* 2. Typografia i przyciski ---------------------------------------------- */
.tytul {
    font-weight: 800;
    font-size: clamp(27px, 3.1vw, 42px);
    line-height: 1.14;
    letter-spacing: -.028em;
    color: var(--tusz);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.tytul::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; border-radius: 4px; background: var(--akcent); }
.tytul--srodek { text-align: center; }
.tytul--srodek::after { margin-inline: auto; }

/* Znak firmy w zakładce „O firmie”: duży napis z granatowym gradientem (połysk pośrodku) i miękkim cieniem */
.tytul--marka { font-size: clamp(44px, 5.6vw, 78px); line-height: 1; letter-spacing: -.055em; }
.tytul--marka span { display: inline-block; padding: .04em .07em .1em 0; color: var(--granat); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .tytul--marka span {
        background: linear-gradient(105deg, #071630 0%, #0f2f60 28%, #2463ad 56%, #12366b 78%, #081a38 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        filter: drop-shadow(0 10px 18px rgba(18, 54, 107, .22));
    }
}
.tytul--marka::after { width: 92px; height: 5px; margin-top: 14px; background: linear-gradient(90deg, var(--akcent), #ffb25c); }

.podtytul { font-weight: 800; font-size: clamp(21px, 2vw, 27px); line-height: 1.2; letter-spacing: -.022em; color: var(--tusz); }
.podtytul--maly { font-size: 16px; font-weight: 700; letter-spacing: 0; margin: 28px 0 12px; }

.nadtytul {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    font-weight: 700; font-size: 12.5px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
    color: var(--niebieski);
}
.nadtytul::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.nadtytul--jasny { color: var(--bialy); }

.lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; font-weight: 500; color: var(--tusz); }

.sekcja { padding-block: clamp(56px, 7vw, 104px); }
.sekcja--szara { background: var(--papier); }
.sekcja--galeria { padding-block: clamp(36px, 4.5vw, 64px); }
.sekcja__naglowek { margin-bottom: clamp(30px, 4vw, 52px); }
.sekcja__naglowek--srodek { text-align: center; max-width: 860px; margin-inline: auto; }
.sekcja__naglowek--srodek .tytul::after { margin-inline: auto; }
.sekcja__naglowek .lead { margin-top: 24px; }

.sekcja p + p { margin-top: 1em; }
.sekcja .tytul + p, .sekcja .tytul + .lead { margin-top: 26px; }
.sekcja .lead + p { margin-top: 18px; }

.przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 24px;
    font-weight: 600; font-size: 15px; line-height: 1.2;
    border-radius: 999px;
    transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--plynnie);
    white-space: nowrap;
}
.przycisk .ikona { transition: transform .3s var(--plynnie); }
.przycisk:hover { transform: translateY(-2px); }
.przycisk:hover .ikona { transform: translateX(4px); }
.przycisk--akcent { background: var(--akcent); color: var(--tusz); box-shadow: 0 10px 24px -12px rgba(255, 106, 19, .8); }
.przycisk--akcent:hover { background: var(--tusz); color: var(--bialy); box-shadow: none; }
.przycisk--niebieski { background: var(--niebieski); color: var(--bialy); box-shadow: 0 10px 24px -12px rgba(10, 119, 189, .9); }
.przycisk--niebieski:hover { background: var(--granat); }
.przycisk--ciemny { background: var(--granat); color: var(--bialy); }
.przycisk--ciemny:hover { background: var(--niebieski); }
.przycisk--bialy { background: var(--bialy); color: var(--granat); }
.przycisk--bialy:hover { background: var(--akcent); color: var(--tusz); }
.przycisk--obrys { background: rgba(255, 255, 255, .75); color: var(--tusz); border: 1px solid #b4c1d1; }
.przycisk--obrys:hover { border-color: var(--niebieski); color: var(--niebieski); background: var(--bialy); }
.przycisk--duzy { padding: 16px 30px; font-size: 16px; }
/* Główny przycisk w hero: większy, z pomarańczowym gradientem i poświatą; po najechaniu gradient przesuwa się ku jaśniejszemu */
.przycisk--hero {
    padding: 19px 36px; gap: 12px;
    font-weight: 700; font-size: 17.5px;
    color: var(--tusz);
    background: linear-gradient(120deg, #ffb347 0%, #ff8a1f 34%, #ff5a0a 68%, #ff8a1f 100%);
    background-size: 220% 100%; background-position: 0 0;
    box-shadow: 0 16px 34px -12px rgba(255, 98, 10, .75), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: background-position .5s var(--plynnie), box-shadow .3s, transform .25s var(--plynnie);
}
.przycisk--hero .ikona { width: 1.3em; height: 1.3em; }
.przycisk--hero:hover { background-position: 100% 0; box-shadow: 0 20px 40px -12px rgba(255, 98, 10, .9), inset 0 1px 0 rgba(255, 255, 255, .45); transform: translateY(-3px); }
.przycisk--maly { padding: 11px 18px; font-size: 14px; }
.sekcja .przycisk { margin-top: 32px; }

.link-strzalka {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-weight: 600; font-size: 15px;
    color: var(--niebieski);
    transition: color .2s;
}
.link-strzalka .ikona { transition: transform .3s var(--plynnie); }
.link-strzalka:hover { color: var(--akcent-ciemny); }
.link-strzalka:hover .ikona { transform: translateX(4px); }

/* 3. Nagłówek i nawigacja ------------------------------------------------- */
.naglowek { position: sticky; top: 0; z-index: 100; }

.nawigacja { position: relative; background: var(--bialy); border-bottom: 1px solid var(--linia); transition: box-shadow .3s; }
.naglowek.jest-przewiniety .nawigacja { box-shadow: 0 12px 30px -20px rgba(18, 54, 107, .45); }
.nawigacja__wiersz { display: flex; align-items: stretch; gap: 24px; height: 84px; }

.logo { display: flex; align-items: center; flex: none; }
.logo img { width: auto; height: 42px; }

.menu { margin-left: auto; display: flex; }
.menu__lista { display: flex; align-items: stretch; gap: 2px; }
.menu__pozycja { display: flex; }
.menu__link {
    position: relative;
    display: flex; align-items: center; gap: 5px;
    padding-inline: 15px;
    font-weight: 600; font-size: 15.5px;
    color: var(--tusz);
    transition: color .2s;
    white-space: nowrap;
}
.menu__link::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--niebieski); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--plynnie); }
.menu__link:hover, .menu__link.jest-aktywny { color: var(--niebieski); }
.menu__link:hover::after, .menu__link.jest-aktywny::after { transform: scaleX(1); }
.menu__link:focus-visible { outline-offset: -4px; }

.jezyki { display: flex; flex: none; align-items: center; gap: 6px; }
.jezyki__link { display: block; padding: 4px; border: 2px solid transparent; border-radius: 8px; opacity: .55; transition: opacity .2s, border-color .2s; }
.jezyki__link img { width: 27.8px; height: 18.2px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(14, 28, 51, .14); }
.jezyki__link:hover { opacity: 1; }
.jezyki__link.jest-aktywny { opacity: 1; border-color: var(--niebieski); }

/* Kontakt w nagłówku: e-mail i telefon. Na węższych oknach przyciski zwijają się do samych ikon (zob. sekcja 15). */
.nawigacja__kontakt { display: flex; flex: none; align-items: center; align-self: center; gap: 10px; }
.nawigacja__mail, .nawigacja__telefon { padding: 11px 17px; gap: 8px; font-size: 14.5px; }
.nawigacja__mail { background: var(--bialy); border-color: #c5d2e2; }
.nawigacja__mail .ikona { color: var(--niebieski); }
.nawigacja__kontakt .przycisk:hover .ikona { transform: none; }
.hamburger { display: none; align-self: center; width: 46px; height: 46px; place-items: center; background: var(--papier); color: var(--tusz); border: 1px solid var(--linia); border-radius: 12px; }
.hamburger .ikona { width: 24px; height: 24px; }

/* 4. Kategorie w menu mobilnym i siatka kwadratów (asortyment) ------------ */
/* Kafelki kategorii – zdjęcie wypełnia niemal cały kafelek */
.kat-siatka { display: grid; gap: 16px 14px; }
.kat { display: flex; flex-direction: column; gap: 9px; height: 100%; }
.kat__foto {
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 6 / 5;
    background: var(--papier);
    border-radius: var(--promien);
    overflow: hidden;
    transition: background-color .3s, box-shadow .3s, transform .4s var(--plynnie);
}
.kat__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--niebieski); opacity: 0; transition: opacity .25s; }
/* Zdjęcie wypełnia całe pole (position: absolute), a margines daje padding samego obrazka. Dzięki temu rozmiar zdjęcia
   nie zależy od tego, jak przeglądarka liczy wysokość w procentach – Safari przy „height: 100%” ucinało zdjęcia od dołu. */
.kat__foto img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 4%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--plynnie); }
/* Nazwy: całe wyrazy przechodzą do nowej linii – bez automatycznego dzielenia łącznikiem */
.kat__nazwa {
    font-weight: 600; font-size: 14px; line-height: 1.3; text-align: center;
    color: var(--tusz);
    transition: color .2s;
    hyphens: manual;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.kat:hover .kat__foto, .kat:focus-visible .kat__foto { background: #fff; box-shadow: var(--cien-maly); transform: translateY(-4px); }
.kat:hover .kat__foto::after, .kat:focus-visible .kat__foto::after { opacity: 1; }
.kat:hover .kat__foto img, .kat:focus-visible .kat__foto img { transform: scale(1.06); }
.kat:hover .kat__nazwa, .kat:focus-visible .kat__nazwa { color: var(--niebieski); }
.kat:focus-visible { outline: none; }

.kat-siatka--mobilna { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.kat-siatka--mobilna .kat__nazwa { font-size: 13.5px; }

/* Ułożenie wybranych zdjęć w kafelku (pole 'kadr' w inc/kategorie.php) – reguła na końcu, żeby miała pierwszeństwo przed marginesami siatek.
   'gora' = produkt jest ucięty u góry już na zdjęciu źródłowym, więc „wchodzi” w kafelek od górnej krawędzi. */
.kat-siatka .kat__foto--gora img { padding-top: 0; object-position: 50% 0; }

/*
 * Asortyment – siatka idealnych kwadratów rozdzielonych cienką linią (podstrona „Produkty”: wszystkie kategorie;
 * strona główna: jeden rząd pięciu).
 *  • Linie to 1-pikselowe odstępy siatki, przez które prześwituje tło kontenera – wszystkie mają tę samą grubość,
 *    także na obwodzie (padding 1 px), i nigdy się nie dublują.
 *  • Kwadrat wymusza aspect-ratio 1 / 1, a jego treść jest pozycjonowana absolutnie, więc długość nazwy ani zdjęcie
 *    nie mogą zmienić wymiarów pola (także w Safari).
 *  • W środku: zdjęcie produktu na przezroczystym tle wpisane w górną część i nazwa w dwóch wierszach na dole.
 *  • Liczba kolumn (--kol) jest tak dobrana do liczby pól, żeby ostatni rząd zawsze był pełny.
 */
.kafle { --kol: 5; --pad: 24px; --f: 15.5px; --kafle-linia: #cbd6e6; margin-top: clamp(20px, 2.4vw, 30px); }
.kafle__siatka { display: grid; grid-template-columns: repeat(var(--kol), minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--kafle-linia); }
.kafel { position: relative; aspect-ratio: 1 / 1; min-width: 0; background: var(--bialy); }
.kafel__link { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--pad) var(--pad) calc(var(--pad) * .8); color: var(--tusz); transition: background-color .25s; }
.kafel__foto { position: relative; flex: 1 1 0; min-height: 0; }
.kafel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transition: transform .5s var(--plynnie); }
/* produkt ucięty u góry już na zdjęciu źródłowym „wchodzi” w kwadrat od górnej krawędzi */
.kafel__foto--gora { margin-top: calc(-1 * var(--pad)); }
.kafel__foto--gora img { object-position: 50% 0; }
.kafel__nazwa {
    flex: none; display: flex; align-items: center; justify-content: center;
    min-height: 2.5em; margin-top: calc(var(--pad) * .6);
    font-weight: 650; font-size: var(--f); line-height: 1.25; letter-spacing: -.012em; text-align: center;
    hyphens: manual; overflow-wrap: break-word; text-wrap: balance;
    transition: color .2s;
}
.kafel__link:focus-visible { outline: 3px solid var(--niebieski); outline-offset: -3px; }
@media (hover: hover) {
    .kafel__link:hover { background: var(--papier); }
    .kafel__link:hover .kafel__foto img { transform: scale(1.05); }
    .kafel__link:hover .kafel__nazwa { color: var(--niebieski); }
}

/* Kwadrat „zobacz wszystkie” – jedyny wypełniony */
.kafel--cta .kafel__link { align-items: center; justify-content: center; background: linear-gradient(150deg, #1789d2, var(--granat) 85%); color: var(--bialy); }
.kafel__cta { display: grid; justify-items: center; gap: .6em; font-size: var(--f); text-align: center; }
.kafel__cta b { font-weight: 800; font-size: 1.4em; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.kafel__cta > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #cfe6f7; transition: color .2s; }
.kafel__cta .ikona { transition: transform .3s var(--plynnie); }
@media (hover: hover) {
    .kafel--cta .kafel__link:hover { background: linear-gradient(150deg, #1b93df, #17437f 85%); }
    .kafel--cta .kafel__link:hover .kafel__cta > span { color: var(--bialy); }
    .kafel--cta .kafel__link:hover .ikona { transform: translateX(4px); }
}
/* pasek na stronie głównej: pięć kategorii w jednym rzędzie – szósty kwadrat pojawia się dopiero przy 3 i 2 kolumnach */
.kafle--pasek .kafel--cta { display: none; }

/* Pełna siatka: 5 kolumn (24 + „zobacz wszystkie”), niżej 4 / 3 / 2 kolumny po 24 pola */
@media (max-width: 1099px) {
    .kafle { --kol: 4; --pad: 16px; --f: 14.5px; }
    .kafle:not(.kafle--pasek) .kafel--cta { display: none; }
}
@media (max-width: 759px) {
    .kafle { --kol: 3; --pad: 12px; --f: 13.5px; }
}
@media (max-width: 519px) {
    .kafle { --kol: 2; --pad: 12px; --f: 13.5px; }
}
@media (max-width: 359px) {
    .kafle { --pad: 9px; --f: 12.5px; }
}
/* Pasek: 5 kolumn od 900 px, niżej 3 × 2 i 2 × 3 (z kwadratem „zobacz wszystkie”) */
@media (min-width: 900px) and (max-width: 1099px) {
    .kafle--pasek { --kol: 5; --pad: 14px; --f: 14px; }
}
@media (max-width: 899px) {
    .kafle--pasek { --kol: 3; }
    .kafle--pasek .kafel--cta { display: block; }
}
@media (max-width: 519px) {
    .kafle--pasek { --kol: 2; }
}

/* Menu mobilne (szuflada) */
.szuflada {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: var(--bialy); color: var(--tusz);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .45s var(--plynnie), visibility 0s .45s;
}
.szuflada.jest-otwarta { transform: none; visibility: visible; transition: transform .45s var(--plynnie), visibility 0s; }
.szuflada__gora { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--margines); background: var(--bialy); border-bottom: 1px solid var(--linia); }
.szuflada__gora img { height: 36px; width: auto; }
.szuflada__zamknij { display: grid; place-items: center; width: 46px; height: 46px; background: var(--papier); border: 1px solid var(--linia); border-radius: 12px; }
.szuflada__zamknij .ikona { width: 24px; height: 24px; }
.szuflada__menu { padding: 6px var(--margines) 24px; }
.szuflada__menu > a, .szuflada__produkty summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 0;
    font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.015em;
    border-bottom: 1px solid var(--linia);
    cursor: pointer;
}
.szuflada__menu > a.jest-aktywny, .szuflada__produkty[open] summary { color: var(--niebieski); }
.szuflada__produkty summary { list-style: none; }
.szuflada__produkty summary::-webkit-details-marker { display: none; }
.szuflada__produkty summary .ikona { transition: transform .3s; }
.szuflada__produkty[open] summary .ikona { transform: rotate(180deg); }
.szuflada__produkty[open] { padding-bottom: 24px; border-bottom: 1px solid var(--linia); }
.szuflada__produkty[open] summary { border-bottom: 0; }
.szuflada__produkty .link-strzalka { margin-top: 20px; }
.szuflada__dol { margin-top: auto; padding: 22px var(--margines) 28px; display: grid; gap: 14px; background: var(--papier); border-top: 1px solid var(--linia); }
.szuflada__dol > a, .szuflada__dzial { display: flex; align-items: center; gap: 14px; }
.szuflada__dol > a .ikona, .szuflada__dzial > .ikona { width: 22px; height: 22px; color: var(--niebieski); }
.szuflada__dzial { align-items: flex-start; }
.szuflada__dzial > .ikona { margin-top: 26px; }
.szuflada__dzial a { display: block; padding-block: 9px; }
.szuflada__dzial small { margin-bottom: 0; }
.szuflada__dol small { display: block; font-size: 12.5px; line-height: 1.2; color: var(--tekst-2); }
.szuflada__dol b { font-size: 17px; line-height: 1.3; }
.szuflada__dol .jezyki { margin-top: 6px; }

/* 5. Hero ----------------------------------------------------------------- */
.hero { position: relative; height: clamp(580px, calc(100vh - 84px), 800px); background: var(--bialy); color: var(--tusz); overflow: hidden; isolation: isolate; }
.hero__slajd { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; }
.hero__slajd.jest-aktywny { opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; z-index: 1; }
.hero__tlo { position: absolute; inset: 0 0 0 36%; z-index: -1; overflow: hidden; }
.hero__tlo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hero__slajd.jest-aktywny .hero__tlo img { animation: hero-zoom 9s linear forwards; }
.hero__tlo::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .94) 16%, rgba(255, 255, 255, .55) 36%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 18%);
}
.hero__tresc { position: relative; padding-bottom: 110px; }
.hero__tresc > * { opacity: 0; transform: translateY(28px); }
.hero__slajd.jest-aktywny .hero__tresc > * { animation: hero-wjazd .9s var(--plynnie) forwards; }
.hero__slajd.jest-aktywny .hero__tresc > :nth-child(2) { animation-delay: .12s; }
.hero__slajd.jest-aktywny .hero__tresc > :nth-child(3) { animation-delay: .26s; }
.hero__slajd.jest-aktywny .hero__tresc > :nth-child(4) { animation-delay: .4s; }
.hero__tytul { font-weight: 800; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.06; letter-spacing: -.035em; hyphens: manual; overflow-wrap: break-word; }
.hero__tytul span { display: block; }
.hero__tytul, .hero__opis { text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }
.hero__tytul-akcent { color: var(--niebieski); }
.hero__opis { max-width: 540px; margin: 24px 0 34px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.65; color: var(--tekst); }

.hero__sterowanie { position: absolute; left: 0; right: 0; bottom: 118px; z-index: 5; pointer-events: none; }
.hero__sterowanie-wiersz { display: flex; align-items: center; justify-content: space-between; }
.hero__numery, .hero__strzalki { display: flex; gap: 10px; pointer-events: auto; }
.hero__numery button { display: flex; align-items: center; gap: 12px; padding: 12px 6px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--tekst-2); transition: color .3s; }
.hero__numery button i { position: relative; display: block; width: 34px; height: 3px; border-radius: 3px; background: rgba(14, 28, 51, .16); overflow: hidden; transition: width .5s var(--plynnie); }
.hero__numery button i::after { content: ""; position: absolute; inset: 0; background: var(--akcent); transform: scaleX(0); transform-origin: left; }
.hero__numery button.jest-aktywny { color: var(--tusz); }
.hero__numery button.jest-aktywny i { width: 88px; }
.hero__numery button.jest-aktywny i::after { animation: hero-pasek var(--hero-czas, 7s) linear forwards; }
.hero__strzalki button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tusz); box-shadow: var(--cien-maly); transition: background-color .25s, color .25s; }
.hero__strzalki button:hover { background: var(--niebieski); color: var(--bialy); }
.hero__strzalki .ikona { width: 24px; height: 24px; }

@keyframes hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes hero-wjazd { to { opacity: 1; transform: none; } }
@keyframes hero-pasek { to { transform: scaleX(1); } }

/* 6. Atuty ---------------------------------------------------------------- */
.atuty { position: relative; z-index: 6; margin-top: -84px; }
.atuty__siatka { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bialy); border-radius: calc(var(--promien) + 4px); box-shadow: var(--cien); overflow: hidden; }
.atut { position: relative; padding: clamp(24px, 2.8vw, 38px); background: var(--bialy); }
.atut + .atut { border-left: 1px solid var(--linia); }
.atut__ikona { display: block; width: 66px; height: 66px; margin-bottom: 16px; }
.atut__tytul { font-weight: 800; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -.02em; color: var(--tusz); margin-bottom: 8px; }
.atut p { color: var(--tekst-2); }
.atut--akcent { background: linear-gradient(135deg, var(--niebieski), var(--granat)); border-left: 0; }
.atut--akcent .atut__tytul { color: var(--bialy); font-size: clamp(23px, 2.2vw, 30px); }
.atut--akcent p { color: rgba(255, 255, 255, .9); }
.atut--akcent .atut__nadtytul { font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; color: #bfe1f6; }
.atut--akcent .przycisk { margin-top: 20px; }

/* 7. Oferta: pasek z przyciskiem nad siatką asortymentu ------------------- */
.nadtytul--srodek { justify-content: center; }
.oferta .sekcja__naglowek { margin-bottom: clamp(24px, 3vw, 38px); }
.oferta__pasek { display: flex; align-items: center; gap: 12px 16px; padding: 12px 12px 12px 16px; background: var(--blekit); border-radius: 999px; }
.oferta__ikona { display: block; flex: none; width: 50px; height: 50px; }
.oferta__haslo { flex: 1; min-width: 0; font-size: 17px; line-height: 1.4; color: var(--tekst); }
.oferta__haslo strong { font-weight: 800; color: var(--tusz); }
.oferta .oferta__pasek .przycisk { flex: none; margin-top: 0; }

/* 8. Marki wiertnic: pasek z logotypami w ruchu ---------------------------- */
/* Płynność: animowany jest wyłącznie „transform” jednej taśmy (pracuje na karcie graficznej, niezależnie od reszty strony),
   obrazki mają stałe wymiary i nie są wczytywane leniwie, a brzegi wygaszają zwykłe gradienty zamiast maski.
   Tempo jest spokojne i stałe (ok. 32 px na sekundę): czas pętli wylicza PHP z szerokości taśmy (inc/marki-pasek.php). */
.marki { padding-block: clamp(32px, 4vw, 54px); background: var(--blekit); overflow: hidden; }
.marki__okno { position: relative; overflow: hidden; }
.marki__okno::before, .marki__okno::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(36px, 9vw, 170px); pointer-events: none; }
.marki__okno::before { left: 0; background: linear-gradient(90deg, var(--blekit), rgba(232, 242, 250, 0)); }
.marki__okno::after { right: 0; background: linear-gradient(270deg, var(--blekit), rgba(232, 242, 250, 0)); }
.marki__tasma { --skala: 1; --odstep: 18px; display: flex; width: max-content; animation: marki-przesuw var(--czas, 190s) linear infinite; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.marki__grupa { display: flex; flex: none; align-items: center; justify-content: space-around; gap: var(--odstep); min-width: 100vw; padding-right: var(--odstep); }
.marka { display: flex; align-items: center; justify-content: center; gap: calc(12px * var(--skala)); flex: none; height: calc(92px * var(--skala)); padding-inline: calc(34px * var(--skala)); background: var(--tlo, var(--bialy)); border: 1px solid #d9e5f1; border-radius: 18px; }
.marka--ciemna { border-color: transparent; }
.marka img { width: calc(var(--w) * var(--skala) * 1px); max-width: none; height: auto; }
/* Nazwa wypisana obok znaku, który sam jej nie zawiera (Ditch Witch) */
.marka__nazwa { font-weight: 800; font-size: calc(19px * var(--skala)); line-height: 1; letter-spacing: -.02em; color: #141414; white-space: nowrap; }
@keyframes marki-przesuw { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* 10. Podstrony ----------------------------------------------------------- */
.baner { position: relative; display: flex; align-items: center; min-height: clamp(280px, 30vw, 420px); padding-block: clamp(40px, 5vw, 64px); background: var(--granat); color: var(--bialy); overflow: hidden; isolation: isolate; }
.baner__tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.baner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 42, 85, .78) 0%, rgba(14, 42, 85, .42) 55%, rgba(14, 42, 85, .12) 100%); }
.baner--ciemny::after { background: linear-gradient(90deg, rgba(8, 20, 42, .88) 0%, rgba(8, 20, 42, .7) 50%, rgba(8, 20, 42, .52) 100%); }
.baner__tytul { overflow-wrap: break-word; text-wrap: balance; font-weight: 800; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.06; letter-spacing: -.035em; text-shadow: 0 2px 24px rgba(14, 28, 51, .35); }
.baner__lede { max-width: 620px; margin-top: 14px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; text-shadow: 0 1px 14px rgba(14, 28, 51, .5); }
.baner__lede span { display: block; text-wrap: balance; }
.okruszki { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.okruszki .ikona { width: 14px; height: 14px; opacity: .7; }
.okruszki a:hover { text-decoration: underline; }
.okruszki [aria-current] { color: var(--bialy); font-weight: 600; }

.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.dwie-kolumny--gora { align-items: start; }
.przyklejona { position: sticky; top: 120px; }

.rama { position: relative; margin: 0 18px 18px 0; }
.rama img { position: relative; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--promien); }
.rama::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--promien); background: var(--blekit); }
.rama--lewa { margin: 0 0 18px 18px; }
.rama--lewa::before { inset: 18px 18px -18px -18px; background: #d3e8f6; }

.lista-ptaszki { display: grid; gap: 10px; }
.sekcja p + .lista-ptaszki { margin-top: 24px; }
.sekcja--szara .lista-ptaszki li { background: var(--bialy); }
.lista-ptaszki li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; background: var(--papier); border-radius: 12px; font-weight: 500; }
.lista-ptaszki .ikona { width: 24px; height: 24px; margin-top: 1px; padding: 4px; background: var(--niebieski); color: var(--bialy); border-radius: 50%; stroke-width: 2.8; }

.powody { display: grid; gap: 4px; margin-top: 30px; }
.powod { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--linia); }
.powod__ikona { display: block; flex: none; width: 60px; height: 60px; }
.powod__tytul { font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.015em; color: var(--tusz); margin-bottom: 6px; }
.powod p { color: var(--tekst-2); }

/* 11. Galeria i lightbox -------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galeria li:first-child { grid-column: span 2; grid-row: span 2; }
.galeria a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 12px; background: var(--granat); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--plynnie), opacity .3s; }
.galeria a:hover img { transform: scale(1.08); opacity: .6; }
.galeria__lupa { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bialy); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--plynnie); }
.galeria__lupa .ikona { width: 54px; height: 54px; padding: 13px; background: var(--bialy); color: var(--niebieski); border-radius: 50%; }
.galeria a:hover .galeria__lupa { opacity: 1; transform: none; }

.lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 70px 76px; background: rgba(10, 20, 38, .92); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.lightbox.jest-otwarty { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.lightbox__foto { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lightbox__podpis { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: #d5dceb; font-size: 14px; font-weight: 500; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--bialy); background: rgba(255, 255, 255, .14); transition: background-color .2s, color .2s; }
.lightbox button:hover { background: var(--bialy); color: var(--tusz); }
.lightbox button .ikona { width: 26px; height: 26px; }
.lightbox__zamknij { top: 14px; right: 14px; }
.lightbox__lewo { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__prawo { right: 12px; top: 50%; transform: translateY(-50%); }

/* 12. Opinie Google ------------------------------------------------------- */
.opinie { background: linear-gradient(180deg, var(--bialy) 0%, var(--papier) 100%); overflow: hidden; }
.opinie__widzet { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: center; }
.opinie__podsumowanie { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px; text-align: center; }
.opinie__slowo { font-weight: 800; font-size: 20px; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: var(--tusz); }
.opinie__ocena { display: flex; align-items: center; gap: 9px; }
.opinie__liczba { font-weight: 800; font-size: 23px; line-height: 1; color: var(--tusz); }
.gwiazdki { display: inline-flex; gap: 2px; color: #fbbc04; }
.gwiazdki svg { width: 20px; height: 20px; flex: none; }
.gwiazdki .jest-pusta { color: #d7dde5; }
.opinie__baza { font-size: 14px; color: var(--tekst-2); }
.opinie__google { display: inline-flex; align-items: center; gap: 8px; margin-block: 8px 12px; font-size: 19px; font-weight: 600; color: #3c4043; }
.opinie__google svg { width: 24px; height: 24px; }
.opinie__podsumowanie .przycisk { margin-top: 0; }
.opinie__podsumowanie .przycisk:hover .ikona { transform: translate(2px, -2px); }

.opinie__karuzela { min-width: 0; }
.opinie__tor {
    --odstep: 18px;
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--odstep)) / 3); gap: var(--odstep);
    align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: -12px -14px 0; padding: 12px 14px 30px; scroll-padding-inline: 14px;
}
.opinie__tor::-webkit-scrollbar { display: none; }
.opinie__tor:focus-visible { outline-offset: -3px; }
.opinia { scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 262px; padding: 19px 20px 16px; background: var(--bialy); border-radius: 16px; box-shadow: 0 1px 2px rgba(14, 27, 41, .06), 0 12px 28px -16px rgba(14, 27, 41, .22); }
.opinia__glowa { display: flex; align-items: center; gap: 12px; width: 100%; }
.opinia__awatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: var(--bialy); font-weight: 700; font-size: 17px; line-height: 1; }
.opinia__kto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--tusz); }
.opinia__g { display: flex; flex: none; }
.opinia__g svg { width: 20px; height: 20px; }
.opinia__tresc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; font-size: 15px; line-height: 1.6; color: #2b3d51; }
.opinia__tresc p { margin: 0; }
.opinia.jest-rozwinieta .opinia__tresc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.opinia__wiecej { margin-top: auto; padding: 6px 0; font-weight: 600; font-size: 14px; color: #3c4b5e; text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.opinia__wiecej:hover { color: var(--niebieski); }

.opinie__ster { display: flex; align-items: center; justify-content: center; gap: 12px; }
.opinie__strzalka { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bialy); color: var(--tusz); box-shadow: 0 1px 2px rgba(14, 27, 41, .1), 0 8px 18px -10px rgba(14, 27, 41, .35); transition: background-color .2s, color .2s, opacity .2s; }
.opinie__strzalka .ikona { width: 22px; height: 22px; }
.opinie__strzalka:hover:not(:disabled) { background: var(--niebieski); color: var(--bialy); }
.opinie__strzalka:disabled { opacity: .45; box-shadow: none; cursor: default; }
.opinie__kropki { display: flex; align-items: center; }
.opinie__kropki button { display: grid; place-items: center; min-width: 28px; height: 40px; padding-inline: 3px; }
.opinie__licznik { min-width: 64px; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.opinie__kropki button::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 8px; background: #b3bdca; transition: width .3s var(--plynnie), background-color .3s; }
.opinie__kropki button.jest-aktywna::before { width: 22px; background: var(--niebieski); }

/* 13. Kontakt i formularz ------------------------------------------------- */
.sekcja--kontakt { background: linear-gradient(180deg, var(--papier), var(--bialy) 70%); }
/* Dwie kolumny o równej wysokości: mapa rozciąga się tak, żeby link pod nią kończył się równo z dolną krawędzią formularza */
.kontakt { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(32px, 5.5vw, 80px); align-items: stretch; max-width: 1160px; margin-inline: auto; }
.kontakt__formularz { display: grid; }

.karta-formularz { padding: clamp(22px, 3.2vw, 42px); background: var(--bialy); border: 1px solid var(--linia); border-radius: 22px; box-shadow: var(--cien-maly); }
.karta-formularz__tytul { margin-bottom: 20px; font-weight: 800; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: -.022em; color: var(--tusz); }
.formularz { display: grid; align-content: start; gap: 17px; }
.formularz .nadtytul { margin-bottom: -8px; }
.pole label { display: block; margin-bottom: 7px; font-weight: 600; font-size: 14px; color: var(--tusz); }
.wymagane { color: var(--tekst-2); font-weight: 400; }
.formularz input[type="text"], .formularz input[type="email"], .formularz input[type="tel"], .formularz textarea {
    width: 100%; padding: 14px 16px;
    background: var(--papier); border: 1px solid #cfd9e5; border-radius: 12px;
    font-size: 16px;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.formularz textarea { resize: vertical; min-height: 120px; }
.formularz input:focus, .formularz textarea:focus { outline: none; border-color: var(--niebieski); background: var(--bialy); box-shadow: 0 0 0 4px rgba(10, 119, 189, .14); }
.formularz ::placeholder { color: #9aa6b6; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--tekst-2); cursor: pointer; }
.zgoda input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--niebieski); }
.zgoda a { color: var(--niebieski); text-decoration: underline; }
.formularz .przycisk { justify-self: start; margin-top: 6px; }
.formularz.jest-wysylany .przycisk { opacity: .6; pointer-events: none; }
.pole-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.komunikat, .formularz__status { padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.komunikat--ok, .formularz__status.jest-ok { background: #e4f6ea; color: #14603a; }
.komunikat--blad, .formularz__status.jest-blad { background: #fde8e4; color: #9c2b14; }

.kontakt__bok { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(22px, 3vw, 34px); }
.kontakt__bok .link-strzalka { align-self: end; justify-self: start; min-height: 0; margin-top: -10px; line-height: 1.3; }
.firma-karta { padding: clamp(22px, 3vw, 34px); background: var(--bialy); border-radius: 22px; box-shadow: var(--cien); }
.firma-karta__nazwa { margin-bottom: 12px; font-weight: 800; font-size: clamp(27px, 3vw, 38px); line-height: 1.1; letter-spacing: -.035em; color: var(--granat); }
.firma-karta__nazwa span { font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--niebieski); }
.firma-karta__dane li { display: grid; grid-template-columns: 40% 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--linia); }
/* Kolumna etykiet ma szerokość najdłuższej etykiety (wspólną dla wszystkich wierszy), więc adres mieści się w jednej linii */
@supports (grid-template-columns: subgrid) {
    .firma-karta__dane { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(18px, 2.4vw, 34px); }
    .firma-karta__dane li { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; }
}
.firma-karta__dane li:first-child { border-top: 0; }
.firma-karta__dane span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2); }
.firma-karta__dane b { font-weight: 600; font-size: 16.5px; line-height: 1.45; color: var(--niebieski-ciemny); overflow-wrap: anywhere; }
.firma-karta__dane a:hover { text-decoration: underline; }
.firma-karta__telefony { display: grid; gap: 4px; justify-items: start; font-variant-numeric: tabular-nums; }

.mapa { position: relative; min-height: clamp(260px, 26vw, 320px); border-radius: 22px; overflow: hidden; background: #e4e7ea; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 14. Stopka -------------------------------------------------------------- */
/* Stopka – układ i styl jak w serwis-kretow.pl: wyśrodkowany znak z podpisem, cztery równe kolumny rozdzielone liniami,
   wyśrodkowane ikony społeczności i pasek prawny. */
.stopka { background: linear-gradient(168deg, #0d2a52 0%, #123663 46%, #16407a 100%); color: rgba(255, 255, 255, .76); font-size: clamp(14px, 13.6px + .12vw, 16px); line-height: 1.66; }
.stopka a { color: rgba(255, 255, 255, .82); transition: color .2s; }
.stopka a:hover { color: var(--bialy); }
.stopka__znak { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(30px, 3.6vw, 48px) var(--margines) clamp(24px, 3vw, 36px); text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.stopka__logo { display: block; }
.stopka__logo img { width: clamp(160px, 18vw, 200px); height: auto; }
.stopka__znak-pod { font-size: 10.25px; font-weight: 700; line-height: 1.66; letter-spacing: .2em; text-transform: uppercase; color: #9cc4ff; }
.stopka__kontener { max-width: calc(1200px + 2 * var(--margines)); }
.stopka__siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: clamp(34px, 3.6vw, 52px) clamp(30px, 3.4vw, 44px); }
.stopka__tytul { margin-bottom: 14px; font-size: 11.85px; font-weight: 700; line-height: 1.06; letter-spacing: .16em; text-transform: uppercase; color: var(--bialy); opacity: .72; }
.stopka__intro { margin-bottom: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.stopka__tel { display: flex; align-items: center; gap: 11px; padding-block: 8px; }
.stopka__tel .ikona { width: 17px; height: 17px; color: #9cc4ff; }
.stopka__tel b { display: block; font-size: 14.7px; font-weight: 700; line-height: 1.66; letter-spacing: -.02em; color: var(--bialy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stopka__tel small { display: block; font-size: 12.5px; line-height: 1.66; color: rgba(255, 255, 255, .62); }
.stopka__lista { display: grid; gap: 8px; }
.stopka__lista a { display: inline-block; }
.stopka__adres { font-size: 14.4px; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.stopka__adres strong { display: block; margin-bottom: 4px; font-weight: 700; color: var(--bialy); }
.stopka__lista--ikony { margin-top: 14px; gap: 10px; }
.stopka__lista--ikony li { display: flex; align-items: flex-start; gap: 9px; }
.stopka__lista--ikony .ikona { width: 15px; height: 15px; margin-top: 5px; color: #9cc4ff; }
.stopka__lista--ikony a, .stopka__lista--ikony span { font-size: 14.4px; }
.stopka__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; padding-bottom: clamp(26px, 3vw, 38px); }
.stopka__social a { display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: 9px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: var(--bialy); transition: background-color .25s, color .25s, border-color .25s; }
.stopka__social a:hover { background: var(--bialy); border-color: var(--bialy); color: var(--granat); }
.stopka__social .ikona { width: 16px; height: 16px; }
.stopka__social-tekst { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.stopka__dol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 20px 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.8px; line-height: 1.6; color: rgba(255, 255, 255, .62); }
.stopka .stopka__dol a { color: rgba(255, 255, 255, .72); }
.stopka .stopka__dol a:hover { color: var(--bialy); }
@media (min-width: 700px) {
    .stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .stopka__dol { justify-content: center; gap: 10px 26px; text-align: center; }
}
/* Cztery kolumny dopiero od 1200 px: Inter jest szerszy niż krój serwis-kretow.pl, a żadna pozycja nie może się zawijać */
@media (min-width: 1200px) {
    .stopka__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 36px); }
    .stopka__kolumna + .stopka__kolumna { padding-left: clamp(16px, 1.7vw, 26px); border-left: 1px solid rgba(255, 255, 255, .1); }
}

.do-gory { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--niebieski); color: var(--bialy); box-shadow: var(--cien-maly); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .3s var(--plynnie), visibility 0s .3s, background-color .2s; }
.do-gory .ikona { width: 24px; height: 24px; transform: rotate(180deg); }
.do-gory.jest-widoczny { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--plynnie), visibility 0s, background-color .2s; }
.do-gory:hover { background: var(--granat); }

/* Strona 404 */
.blad404 { text-align: center; }
.blad404__kod { font-weight: 800; font-size: clamp(110px, 20vw, 220px); line-height: .9; letter-spacing: -.05em; color: var(--niebieski); }
.blad404 .tytul::after { margin-inline: auto; }

/* 15. Animacje i responsywność ------------------------------------------- */
.js .odslon { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--plynnie), transform .8s var(--plynnie); transition-delay: var(--opoznienie, 0s); }
.js .odslon.jest-widoczny { opacity: 1; transform: none; }

/* Niskie ekrany laptopów: ciaśniejszy hero, żeby przycisk nie stykał się ze sterowaniem slidera */
@media (min-width: 1100px) and (max-height: 820px) {
    .hero { height: clamp(600px, calc(100vh - 84px), 800px); }
    .hero__tytul { font-size: clamp(34px, 3.7vw, 52px); }
    .hero__opis { margin: 18px 0 26px; }
    .hero__tresc { padding-bottom: 150px; }
    .hero__sterowanie { bottom: 108px; }
}

/* Nagłówek: adres e-mail jako pełny przycisk tylko tam, gdzie mieści się obok menu (od 1500 px – wtedy odstępy są
   odrobinę ciaśniejsze, żeby całość zmieściła się w szerokości strony); niżej sama ikona */
@media (min-width: 1500px) {
    .nawigacja__wiersz { gap: 18px; }
    .logo img { height: 40px; }
    .menu__link { padding-inline: 11px; }
    .menu__link::after { left: 11px; right: 11px; }
    .jezyki { gap: 3px; }
    .nawigacja__kontakt { gap: 8px; }
    .nawigacja__mail, .nawigacja__telefon { padding-inline: 14px; font-size: 14px; }
}
@media (max-width: 1499px) {
    .nawigacja__wiersz { gap: 20px; }
    .nawigacja__mail { width: 44px; height: 44px; padding: 0; }
    .nawigacja__mail span { display: none; }
    .nawigacja__mail .ikona { width: 20px; height: 20px; }
}

@media (max-width: 1299px) {
    .nawigacja__telefon { width: 44px; height: 44px; padding: 0; }
    .nawigacja__telefon span { display: none; }
    .nawigacja__telefon .ikona { width: 20px; height: 20px; }
    .nawigacja__kontakt { gap: 8px; }
    .nawigacja__wiersz { gap: 16px; }
    .logo img { height: 38px; }
    .menu__link { padding-inline: 11px; font-size: 15px; }
    .menu__link::after { left: 11px; right: 11px; }
}

@media (max-width: 1099px) {
    /* nagłówek mobilny: logo, flagi, przycisk menu (telefon i e-mail są w szufladzie) */
    .menu, .nawigacja__kontakt { display: none; }
    .nawigacja .jezyki { margin-left: auto; gap: 4px; }
    .nawigacja .jezyki__link { padding: 11px 5px; }
    .hamburger { display: grid; }
    .nawigacja__wiersz { height: 70px; gap: 14px; }
    .logo img { height: 36px; }
    [id] { scroll-margin-top: 90px; }

    .hero { height: auto; display: grid; }
    .hero__slajd { position: relative; inset: auto; grid-area: 1 / 1; flex-direction: column; align-items: stretch; padding-bottom: 96px; }
    .hero__tlo { position: relative; inset: auto; height: clamp(200px, 52vw, 400px); }
    .hero__tlo::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 30%); }
    .hero__tytul, .hero__opis { text-shadow: none; }
    .hero__tresc { padding-block: 22px 0; }
    .hero__opis { margin: 16px 0 24px; }
    .hero__tytul { font-size: clamp(27px, 6.6vw, 48px); }
    .hero__sterowanie { bottom: 24px; }
    .atuty { margin-top: 0; padding-top: 8px; }
    .dwie-kolumny, .kontakt { grid-template-columns: 1fr; }
    .mapa { min-height: clamp(280px, 56vw, 420px); }
    .kontakt__bok .link-strzalka { min-height: 44px; margin-top: -14px; }
    .dwie-kolumny--odwrotnie > :first-child, .dwie-kolumny--gora > :first-child { order: 2; }
    .przyklejona { position: static; }
    .galeria { grid-template-columns: repeat(3, 1fr); }
    .opinie__widzet { grid-template-columns: 1fr; }
    .opinie__tor { grid-auto-columns: calc((100% - var(--odstep)) / 2); }

    /* większe pola dotyku w stopce (wiersz co najmniej 40 px) */
    .stopka__logo { padding-block: 7px; }
    .stopka__znak { gap: 2px; }
    .stopka__lista { gap: 0; }
    .stopka__lista a, .stopka__lista--ikony span { padding-block: 9px; }
    .stopka__lista--ikony { gap: 0; }
    .stopka__lista--ikony .ikona { margin-top: 14px; }
    .stopka__social a { min-width: 42px; height: 42px; }
    .stopka__dol a { padding-block: 11px; }
}

@media (max-width: 760px) {
    .hero__strzalki button { width: 46px; height: 46px; }
    .hero__numery button.jest-aktywny i { width: 52px; }
    .hero__numery button i { width: 20px; }
    .atuty__siatka { grid-template-columns: 1fr; border: 1px solid var(--linia); }
    .atut + .atut { border-left: 0; border-top: 1px solid var(--linia); }
    .atut--akcent { border-top: 0; }
    .oferta__pasek { flex-wrap: wrap; padding: 16px; border-radius: 22px; }
    .oferta .oferta__pasek .przycisk { width: 100%; }
    .marki__tasma { --skala: .82; --odstep: 12px; animation-duration: var(--czas-m, 180s); }
    .marka { border-radius: 14px; }
    .galeria { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .opinie__tor { --odstep: 14px; grid-auto-columns: 86%; }
    .firma-karta__dane { display: block; }
    .firma-karta__dane li { grid-template-columns: 1fr; gap: 2px; }
    .lightbox { padding: 64px 10px 70px; }
    .lightbox__lewo, .lightbox__prawo { top: auto; bottom: 10px; transform: none; }
    .lightbox__podpis { bottom: 26px; padding-inline: 70px; }
    .rama { margin: 0 12px 12px 0; }
    .rama::before { inset: 12px -12px -12px 12px; }
    .rama--lewa { margin: 0 0 12px 12px; }
    .rama--lewa::before { inset: 12px 12px -12px -12px; }
}

@media (max-width: 560px) {
    .oferta__ikona { width: 44px; height: 44px; }
    .oferta__haslo { font-size: 16px; }
    .powod { gap: 16px; }
    .powod__ikona { width: 50px; height: 50px; }
}

@media (max-width: 460px) {
    .przycisk--hero { padding: 16px 26px; font-size: 16px; }
    .nawigacja__wiersz { height: 64px; gap: 10px; }
    [id] { scroll-margin-top: 80px; }
    .logo img { height: 29px; }
    .nawigacja .jezyki { gap: 0; }
    .nawigacja .jezyki__link { padding: 10px 3px; }
    .nawigacja .jezyki__link img { width: 25.7px; height: 17.1px; }
    .hamburger { width: 42px; height: 42px; border-radius: 11px; }
    .hero__numery { gap: 6px; }
    .hero__numery button { gap: 8px; }
    .hero__numery button i { width: 14px; }
    .hero__numery button.jest-aktywny i { width: 40px; }
    .stopka__social { gap: 6px; }
}

@media (max-width: 350px) {
    .przycisk--hero { padding: 15px 20px; gap: 9px; font-size: 15px; }
    .nawigacja__wiersz { gap: 8px; }
    .logo img { height: 25px; }
    .nawigacja .jezyki__link { padding: 11px 2px; }
    .nawigacja .jezyki__link img { width: 22.5px; height: 15px; }
    .hamburger { width: 40px; height: 40px; }
    .hero__numery { gap: 2px; }
    .hero__numery button { gap: 6px; }
    .hero__numery button i { width: 12px; }
    .hero__numery button.jest-aktywny i { width: 30px; }
    .hero__strzalki { gap: 6px; }
    .hero__strzalki button { width: 42px; height: 42px; }
    .oferta .oferta__pasek .przycisk { padding-inline: 16px; }
    .stopka__social { gap: 4px; }
    .stopka__social a { min-width: 40px; padding-inline: 6px; }
}

@media (min-width: 560px) {
    .kat-siatka--mobilna { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .odslon { opacity: 1; transform: none; }
    .hero__tresc > * { opacity: 1; transform: none; }
    /* pasek marek bez ruchu: jeden zestaw logotypów, zawijany i wyśrodkowany */
    .marki__okno::before, .marki__okno::after { display: none; }
    .marki__tasma { width: auto; animation: none; }
    .marki__grupa { flex-wrap: wrap; justify-content: center; min-width: 0; padding: 0 var(--margines); }
    .marki__grupa[aria-hidden], .marka[aria-hidden] { display: none; }
}