/* ===== Baza ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --accent: #2563eb;
    --card-bg: rgba(255, 255, 255, .92);
    --text: #1e293b;
    --muted: #64748b;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(15, 23, 42, .10);
    /* Szerokość kolumny treści. Nagłówek, treść i stopka trzymają tę samą miarę,
       więc na szerokim monitorze nic się nie rozjeżdża. */
    --szerokosc: 1240px;
    /* Firmowy pasek — ta sama tęcza u góry strony i nad stopką */
    --pasek-firmowy: linear-gradient(90deg, #f59e0b 0%, #ea580c 22%, #dc2626 40%, #1d4ed8 68%, #16a34a 100%);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); }

/* ===== Nagłówek / marka ===== */
.site-header {
    background: var(--menu-bg);
    box-shadow: var(--shadow);
    /* Cienka, kolorowa krawędź u góry — pasek menu przestaje być samą bielą */
    border-top: 4px solid transparent;
    border-image: var(--pasek-firmowy) 1;
}
.site-brand-link { text-decoration: none; display: inline-flex; align-items: center; }
.site-logo { max-height: 48px; width: auto; display: block; }

.site-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--menu-text);
    text-decoration: none;
}
.site-brand-link:hover .site-title { color: var(--accent); }

.site-tagline {
    display: block;
    font-size: .82rem;
    color: color-mix(in srgb, var(--menu-text) 60%, transparent);
}

/* --- Odznaka z liczbą lat doświadczenia --- */
.odznaka-lat {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
    padding: .4rem .95rem .4rem .75rem;
    border-radius: 99px;
    background: #fff;
    border: 2px solid transparent;
    /* Kolorowa obwódka w firmowej palecie — tło pod spodem zostaje białe */
    background-image: linear-gradient(#fff, #fff), var(--pasek-firmowy);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .10);
    line-height: 1.1;
    white-space: nowrap;
}
.odznaka-liczba {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #ea580c;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .odznaka-liczba {
        background-image: linear-gradient(120deg, #f59e0b 0%, #ea580c 55%, #dc2626 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
.odznaka-opis {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--menu-text);
    max-width: 6.5rem;
    white-space: normal;
}

/* Na telefonie odznaka zostaje — to zbyt mocny argument, żeby go ukrywać.
   Zmniejszamy ją i pozwalamy jej zawinąć się pod nazwę firmy. */
@media (max-width: 900px) {
    .odznaka-lat {
        padding: .22rem .7rem .22rem .55rem;
        gap: .4rem;
        border-width: 2px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }
    .odznaka-liczba { font-size: 1.15rem; }
    .odznaka-opis {
        font-size: .62rem;
        letter-spacing: .03em;
        max-width: none;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    /* Na najwęższych ekranach sam skrót „20 lat" — pełny opis by się łamał */
    .odznaka-opis { max-width: 4.2rem; white-space: normal; line-height: 1.05; }
}

/* ===== Nawigacja ===== */
.site-nav ul { list-style: none; }
.site-nav > ul { display: flex; gap: .25rem; }

.site-nav a {
    display: block;
    padding: .55rem .95rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--menu-text);
    font-weight: 500;
    transition: background .15s, color .15s;
}
/* Podświetlenie po najechaniu — ciepłe i lekkie zamiast szarej plamy,
   z cienką kreską u dołu i delikatnym uniesieniem. */
.site-nav a:hover {
    background: color-mix(in srgb, #f59e0b 14%, #fff);
    color: #9a3412;
    box-shadow: inset 0 -2px 0 #ea580c;
    transform: translateY(-1px);
}
.site-nav a.active { background: var(--accent); color: #fff; }
.site-nav a.active:hover { background: var(--accent); color: #fff; box-shadow: none; }

/* Jedna pozycja wyróżniona subtelnie — delikatne tło i kropka z boku,
   żeby wybijała się z rzędu, ale nie krzyczała jak przycisk. */
.site-nav a.wyrozniony {
    position: relative;
    font-weight: 700;
    color: #0f766e;
    background: linear-gradient(100deg,
        color-mix(in srgb, #0d9488 10%, #fff) 0%,
        color-mix(in srgb, #16a34a 9%, #fff) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #0d9488 26%, transparent);
}
.site-nav a.wyrozniony::before {
    content: "";
    position: absolute;
    left: .42rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: linear-gradient(120deg, #0d9488, #16a34a);
}
.site-nav a.wyrozniony { padding-left: 1.25rem; }
.site-nav a.wyrozniony:hover {
    background: linear-gradient(100deg,
        color-mix(in srgb, #0d9488 17%, #fff) 0%,
        color-mix(in srgb, #16a34a 15%, #fff) 100%);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #0d9488 40%, transparent), inset 0 -2px 0 #0d9488;
}
.site-nav .caret { font-size: .68em; opacity: .7; }

/* Podmenu — wspólne */
.site-nav ul ul { flex-direction: column; }

/* ===== Hamburger (checkbox hack, bez JS) ===== */
.nav-toggle { display: none; }

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.burger span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transition: transform .25s, opacity .2s;
}
.nav-toggle:checked ~ .site-header .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle:checked ~ .site-header .burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .site-header .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-overlay { display: none; }

/* ===== Treść ===== */
.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--szerokosc);
    margin: 2rem auto;
    padding: 0 1rem;
}

.content-card {
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.2rem 2.4rem;
}

/* Boczne podmenu działu (kontekstowe) */
.site-main.has-section { display: flex; gap: 1.5rem; align-items: flex-start; }
.site-main.has-section .content-card { flex: 1; min-width: 0; }
.section-nav {
    flex-shrink: 0;
    width: 230px;
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
    position: sticky;
    top: 1rem;
}
.section-nav h4 { font-size: 1rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); }
.section-nav h4 a { color: var(--text); text-decoration: none; }
.section-nav ul { list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.section-nav a {
    display: block;
    padding: .5rem .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: .95rem;
}
.section-nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.section-nav a.active { background: var(--accent); color: #fff; font-weight: 600; }
@media (max-width: 760px) {
    .site-main.has-section { flex-direction: column; }
    .section-nav { width: 100%; position: static; }
}

.content-card h1 {
    /* Skaluje się z szerokością ekranu — dotąd na dużym monitorze wyglądał
       drobno i płasko w stosunku do reszty strony. */
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.45rem);
    line-height: 1.18;
    letter-spacing: -.015em;
    margin-bottom: 1.3rem;
    padding-bottom: .9rem;
    position: relative;
    border-bottom: 0;
}
/* Zamiast płaskiej kreski — krótki, kolorowy pasek przechodzący w cień */
.content-card h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(190px, 45%);
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, #f59e0b 0%, #ea580c 45%, #dc2626 100%);
}
.content-card h1::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: color-mix(in srgb, var(--text) 12%, transparent);
}

.page-content h2 { margin: 1.2rem 0 .6rem; font-size: 1.4rem; }
.page-content h3 { margin: 1rem 0 .5rem; font-size: 1.15rem; }
.page-content p, .page-content ul, .page-content ol { margin-bottom: .9rem; }
.page-content blockquote {
    border-left: 4px solid var(--accent);
    margin: 1rem 0;
    padding: .6rem 1.2rem;
    color: var(--muted);
    background: rgba(0, 0, 0, .03);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}
.page-content hr { border: none; border-top: 2px solid color-mix(in srgb, var(--text) 15%, transparent); margin: 1.4rem 0; }
.page-content ul, .page-content ol { padding-left: 1.5rem; }
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ===== Zdjęcia w treści: duże, miniaturki, galeria ===== */
/* Duże zdjęcie na całą szerokość treści */
.cms-large { display: block; margin: 1.2rem 0; cursor: zoom-in; }
.cms-large img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
    display: block;
}

/* Mała miniaturka „zajawkowa" oblewana tekstem */
.cms-thumb {
    float: left;
    width: 170px;
    margin: .3rem 1.1rem .6rem 0;
    cursor: zoom-in;
}
.cms-thumb img {
    width: 100%;
    height: auto; /* zachowaj naturalne proporcje miniaturki (bez kadrowania) */
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .15);
    display: block;
    transition: transform .15s;
}
.cms-thumb:hover img { transform: scale(1.03); }

/* Galeria — siatka kwadratowych kafelków */
.cms-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .6rem;
    margin: 1.2rem 0;
    clear: both;
}
.cms-gallery-item { cursor: zoom-in; }
.cms-gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
    transition: transform .15s, box-shadow .15s;
}
.cms-gallery-item:hover img { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .22); }

.page-content::after { content: ""; display: block; clear: both; }

/* Wyszukiwarka */
.site-search { display: flex; gap: .4rem; margin: 1rem 0; max-width: 560px; }
.site-search input {
    flex: 1; min-width: 0;
    padding: .7rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1rem;
    background: #fff;
}
.site-search input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.site-search button {
    background: var(--accent); color: #fff; border: none;
    border-radius: 10px; padding: .7rem 1.2rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.site-search button:hover { filter: brightness(1.08); }
.search-count { color: var(--muted); margin: .5rem 0 1rem; }
.search-item { padding: .8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.search-item h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.search-item a { text-decoration: none; color: var(--accent); }
.search-item a:hover { text-decoration: underline; }
.search-item small { color: var(--muted); font-weight: 400; }
.search-item mark, .blog-post-body mark { background: #fde68a; padding: 0 .1em; border-radius: 3px; }

/* Tagi pod wpisem */
.post-tags { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.post-tags a {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    text-decoration: none;
    padding: .25rem .7rem;
    border-radius: 99px;
    font-size: .85rem;
}
.post-tags a:hover { background: var(--accent); color: #fff; }

/* Mapa strony */
.sitemap h3 { margin: 1.2rem 0 .5rem; font-size: 1.15rem; }
.sitemap ul { list-style: none; padding-left: 1.1rem; }
.sitemap > ul { padding-left: 0; }
.sitemap li { margin: .3rem 0; position: relative; }
.sitemap ul ul { border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); margin-left: .3rem; padding-left: 1rem; }
.sitemap a { text-decoration: none; color: var(--accent); font-weight: 500; }
.sitemap a:hover { text-decoration: underline; }
.sitemap-posts small { color: var(--muted); font-weight: 400; }
.sitemap-xml {
    margin-top: 1.4rem;
    padding: .7rem 1rem;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
}
.sitemap-xml a { font-weight: 600; }
.sitemap-xml small { color: var(--muted); }

/* Mapa Google / osadzone iframe — responsywne 16:9 */
.page-content iframe { max-width: 100%; }
.page-content .map-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.2rem 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    clear: both;
}
.page-content .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Lightbox (przeglądarka zdjęć) ===== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 23, 42, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox.open { display: flex; }
.lb-stage { max-width: 92vw; max-height: 88vh; text-align: center; margin: 0; }
.lb-img {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .6);
}
.lb-count { color: #cbd5e1; margin-top: .8rem; font-size: .9rem; }
.lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    line-height: 1;
    transition: background .15s;
}
.lightbox button:hover { background: rgba(255, 255, 255, .28); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
    .cms-thumb { width: 120px; }
    .lightbox { padding: 1rem; }
    .lb-prev { left: .3rem; }
    .lb-next { right: .3rem; }
    .lightbox button { width: 44px; height: 44px; font-size: 1.3rem; }
}

/* ===== Stopka ===== */
.site-footer {
    display: block;
    width: 100%;
    margin: 3rem 0 0;
    padding: 2rem 1rem 1.2rem;
    color: var(--muted);
    font-size: .85rem;
    /* Ten sam kolorowy pasek co u góry strony — wyraźnie odcina stopkę od treści */
    border-top: 4px solid transparent;
    border-image: var(--pasek-firmowy) 1;
}

/* --- Trzy kolumny: firma, kontakt, nawigacja --- */
.stopka-kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.6rem 2.4rem;
    max-width: var(--szerokosc);
    margin: 0 auto;
    padding-bottom: 1.4rem;
    text-align: left;
}
.stopka-tytul {
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--text);
}
.stopka-opis { margin: 0 0 .8rem; font-size: .88rem; }
.stopka-naglowek {
    margin: 0 0 .6rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    position: relative;
    padding-bottom: .45rem;
}
.stopka-naglowek::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f59e0b 0%, #ea580c 55%, #dc2626 100%);
}
.stopka-dane {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 .5rem;
    line-height: 1.45;
}
.stopka-ikona {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: .85rem;
}
.stopka-dane a { color: var(--text); text-decoration: none; }
.stopka-dane a:hover { color: var(--accent); text-decoration: underline; }
.stopka-telefon { font-weight: 700; font-size: 1.02rem; }
.stopka-dane small { display: block; color: var(--muted); font-size: .78rem; }

.stopka-nawigacja { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.stopka-nawigacja a { color: var(--muted); text-decoration: none; }
.stopka-nawigacja a:hover { color: var(--accent); text-decoration: underline; }

/* --- Pas dolny z prawami autorskimi --- */
.stopka-dol {
    max-width: var(--szerokosc);
    margin: 0 auto;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    text-align: center;
    font-size: .82rem;
}

/* --- Pasek wykonawcy (Efekty z Reklamy): drobny i przygaszony, ale czytelny — nie ukryty --- */
.stopka__reklama {
    max-width: var(--szerokosc);
    margin: 0 auto;
    padding: .8rem 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    font-size: .78rem;
    line-height: 1.55;
    color: var(--muted);
}
.stopka__reklama p { margin: 0 0 .3em; }
.stopka__reklama a { color: var(--muted); text-decoration: underline; }
.stopka__reklama a:hover { color: var(--accent); }

@media (max-width: 560px) {
    .site-footer { padding: 1.5rem 1rem 1rem; }
    .stopka-kolumny { gap: 1.2rem; }
}

.nav-top .site-footer, .nav-full .site-footer {
    background: var(--card-bg);
    padding: 2rem 2rem 1.2rem;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    justify-content: center;
    max-width: var(--szerokosc);
    margin: 0 auto;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    font-size: .8rem;
}
/* Linki wymian mają być obecne, ale nierzucające się w oczy — klient
   przyszedł po ofertę, a nie po odnośniki do innych firm. */
.footer-links a {
    color: color-mix(in srgb, var(--text) 38%, transparent);
    text-decoration: none;
    font-weight: 400;
    font-size: .78rem;
}
.footer-links a:hover {
    color: color-mix(in srgb, var(--text) 62%, transparent);
    text-decoration: underline;
}
.footer-text { color: var(--muted); }
.admin-link { color: var(--muted); text-decoration: none; opacity: .8; }
.admin-link:hover { color: var(--accent); }

/* ===== Blog / Aktualności ===== */
.blog-layout { display: grid; grid-template-columns: 1fr 260px; gap: 1.8rem; align-items: start; }
.blog-main { min-width: 0; }
.blog-filter { background: rgba(0,0,0,.04); padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; }
.blog-filter a { text-decoration: none; }

.blog-card {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.blog-card-img { flex-shrink: 0; width: 150px; }
.blog-card-img img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; display: block; }
.blog-card-body { min-width: 0; }
.blog-card h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.blog-card h3 a { text-decoration: none; color: var(--text); }
.blog-card h3 a:hover { color: var(--accent); }
.blog-meta { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.blog-meta a { color: var(--accent); text-decoration: none; }
.blog-excerpt { margin: .3rem 0 .5rem; }
.blog-readmore { font-weight: 600; text-decoration: none; color: var(--accent); }

.blog-pager { display: flex; gap: .4rem; margin-top: 1.2rem; flex-wrap: wrap; }
.blog-pager a {
    display: inline-block; min-width: 36px; text-align: center;
    padding: .4rem .6rem; border-radius: 8px; text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); color: var(--text);
}
.blog-pager a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.blog-side { display: flex; flex-direction: column; gap: 1.2rem; }
.blog-search { display: flex; gap: .3rem; }
.blog-search input { flex: 1; min-width: 0; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: 8px; }
.blog-search button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: .5rem .9rem; cursor: pointer; font-weight: 600; }
.blog-widget { background: rgba(0,0,0,.03); border-radius: 10px; padding: .9rem 1.1rem; }
.blog-widget h4 { margin: 0 0 .5rem; font-size: 1rem; }
.blog-widget ul { list-style: none; padding: 0; margin: 0; }
.blog-widget li { padding: .25rem 0; }
.blog-widget a { text-decoration: none; color: var(--text); }
.blog-widget a:hover { color: var(--accent); }
.blog-widget span { color: var(--muted); font-size: .85rem; }

.blog-post-title { font-size: 1.6rem; margin: 0 0 .3rem; }
.blog-post-img { width: 100%; max-height: 380px; object-fit: cover; border-radius: 10px; margin: .8rem 0; }
.blog-back { text-decoration: none; font-weight: 600; color: var(--accent); }

@media (max-width: 700px) {
    .blog-layout { grid-template-columns: 1fr; }
    .blog-card { flex-direction: column; }
    .blog-card-img, .blog-card-img img { width: 100%; height: auto; }
}

/* ===== Formularz kontaktowy ===== */
.contact-form {
    margin: 1.2rem 0;
    max-width: 560px;
}
.contact-form label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .8rem;
}
.contact-form input,
.contact-form textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .8rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.contact-form .cf-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.contact-form .cf-row > label { flex: 1; min-width: 180px; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-submit {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .7rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.cf-submit:hover { filter: brightness(1.08); }
.cf-success, .cf-error {
    padding: .9rem 1.1rem;
    border-radius: 10px;
    margin: 1rem 0;
    font-weight: 500;
}
.cf-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; }
.cf-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* ===== Pływające przyciski „Zadzwoń" ===== */
.call-buttons {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    transition: transform .28s ease, opacity .28s ease;
}
.call-buttons.collapsed { transform: translateX(160%); opacity: 0; pointer-events: none; }
.call-hide {
    align-self: flex-end;
    width: 24px; height: 24px;
    border: none; border-radius: 50%;
    background: rgba(15, 23, 42, .55); color: #fff;
    font-size: 15px; line-height: 1; cursor: pointer;
    margin-bottom: -.2rem;
}
.call-hide:hover { background: rgba(15, 23, 42, .8); }
/* mały „dzióbek" przy krawędzi do wysunięcia numerów */
.call-tab {
    position: fixed;
    right: 0;
    bottom: 2rem;
    z-index: 60;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
    padding: .6rem .35rem;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 10px rgba(15, 23, 42, .25);
    cursor: pointer;
}
.call-tab:hover { filter: brightness(1.08); }

/* Nakładki dla zalogowanych (edycja / panel) — delikatne, półprzezroczyste */
.edit-overlay-group {
    position: fixed;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem; /* wyraźny odstęp, żeby przyciski się nie nakładały */
}
.edit-overlay {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    text-decoration: none;
    padding: .55rem 1rem;
    border-radius: 99px;
    font-weight: 600;
    font-size: .88rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    backdrop-filter: blur(3px);
    opacity: .6;
    transition: opacity .15s, background .15s, transform .15s;
    background: rgba(22, 163, 74, .55); /* zielony — edycja */
}
.edit-overlay:hover { opacity: 1; transform: translateY(-2px); background: rgba(22, 163, 74, .95); }
.settings-overlay { background: rgba(220, 38, 38, .55); } /* czerwony — panel/ustawienia */
.settings-overlay:hover { background: rgba(220, 38, 38, .95); }
@media (max-width: 560px) {
    .edit-overlay-group { left: 1rem; bottom: 1rem; }
    .edit-overlay { padding: .5rem .8rem; font-size: .82rem; }
}
.call-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: .8rem 1.3rem;
    border-radius: 99px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
    transition: transform .15s, filter .15s;
}
.call-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.call-icon { font-size: 1.2rem; }
@media (max-width: 560px) {
    .call-buttons { right: 1rem; bottom: 1rem; }
    .call-button { padding: .8rem; }
    .call-button .call-text { display: none; } /* na telefonie sama ikona */
    .call-icon { font-size: 1.5rem; }
}
/* Gdy widoczny jest baner cookie, unieś przyciski telefonu, żeby się nie nakładały */
@media (max-width: 720px) {
    body.has-cookie .call-buttons { bottom: 8.5rem; }
}

/* ===== Baner cookie ===== */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 640px;
    margin: 0 auto;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    z-index: 50;
}
/* Atrybut hidden musi wygrać z display:flex, inaczej baner nie znika po akceptacji */
.cookie-banner[hidden] { display: none !important; }
.cookie-text { flex: 1; min-width: 220px; font-size: .88rem; line-height: 1.5; }
.cookie-accept {
    flex-shrink: 0;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .6rem 1.4rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}
.cookie-accept:hover { filter: brightness(1.08); }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-reject {
    background: transparent;
    color: #e2e8f0;
    border: 1px solid rgba(226, 232, 240, .5);
    border-radius: 8px;
    padding: .6rem 1.2rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}
.cookie-reject:hover { background: rgba(255, 255, 255, .1); }
.cookie-more { color: #fff; text-decoration: underline; white-space: nowrap; }

/* =====================================================
   UKŁAD 1: KLASYCZNY — menu poziome u góry
   ===================================================== */
.nav-top .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Pasek nagłówka zostaje na całą szerokość ekranu, ale jego zawartość
       wyrównuje się do tej samej kolumny co treść — bez dodatkowego <div>. */
    padding: .9rem max(2rem, calc((100% - var(--szerokosc)) / 2));
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Desktop (>900px): rozwijane podmenu po najechaniu */
@media (min-width: 901px) {
    .nav-top .site-nav > ul { flex-wrap: wrap; }
    .nav-top .site-nav li { position: relative; }
    .nav-top .site-nav li ul {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 210px;
        background: var(--menu-bg);
        box-shadow: var(--shadow);
        border: 1px solid color-mix(in srgb, var(--menu-text) 14%, transparent);
        border-radius: 10px;
        padding: .35rem;
        display: none;
        z-index: 130;
    }
    /* Pozycje podmenu: jedna linijka, dopóki się mieści. Dłuższe zawijają się
       w obrębie ustalonej szerokości, zamiast rozpychać całe menu na pół ekranu. */
    .nav-top .site-nav li ul a {
        white-space: normal;
        max-width: 19rem;
        line-height: 1.35;
    }
    .nav-top .site-nav li ul li { max-width: 19rem; }
    .nav-top .site-nav li:hover > ul,
    .nav-top .site-nav li:focus-within > ul { display: block; }
    /* trzeci poziom rozwija się w bok */
    .nav-top .site-nav li ul ul { top: 0; left: 100%; }
    /* Bardzo długie podmenu (np. lista kilkudziesięciu miast) nie może
       wyjechać poza ekran — układa się w kolumny obok siebie.
       Siatka, nie flex: kolumnowy flex z zawijaniem nie poszerza pudełka
       pod kolejne kolumny i pozycje malowały się poza tłem menu. */
    .nav-top .site-nav li:hover > ul,
    .nav-top .site-nav li:focus-within > ul {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(9, auto);
        column-gap: .35rem;
        width: max-content;
        max-width: min(90vw, 44rem);
    }
    /* pozycje ostatniego działu nie mogą uciekać za prawą krawędź ekranu */
    .nav-top .site-nav > ul > li:nth-last-child(-n+3) > ul { left: auto; right: 0; }
}

/* Tablet i telefon (≤900px): menu chowa się pod hamburgerem */
@media (max-width: 900px) {
    /* Pasek może się zawinąć — odznaka z liczbą lat ma zostać widoczna,
       a nie zostać wypchnięta poza ekran przez hamburgera. */
    .nav-top .site-header { flex-wrap: wrap; row-gap: .5rem; }
    .nav-top .brand { flex: 1 1 auto; min-width: 0; }
    .nav-top .burger { display: flex; }
    .nav-top .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--menu-bg); /* pełne krycie, żeby treść nie prześwitywała */
        box-shadow: var(--shadow);
        border-top: 1px solid color-mix(in srgb, var(--menu-text) 12%, transparent);
        padding: .5rem;
        max-height: 80vh;
        overflow-y: auto;
    }
    .nav-top .nav-toggle:checked ~ .site-header .site-nav { display: block; }
    .nav-top .site-nav > ul { flex-direction: column; }
    .nav-top .site-nav a { padding: .75rem 1rem; }
    /* podstrony wcięte i zawsze widoczne (dotyk nie ma „hover") */
    .nav-top .site-nav ul ul {
        display: block;
        padding-left: .8rem;
        margin-left: .6rem;
        border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    }
    .nav-top .site-nav ul ul a { font-size: .95rem; opacity: .95; }
}

/* =====================================================
   UKŁAD 2: MENU BOCZNE — stały panel po lewej
   ===================================================== */
.nav-side { flex-direction: row; flex-wrap: wrap; }

.nav-side .site-header {
    width: 260px;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    position: sticky;
    top: 0;
    z-index: 100;
    align-self: flex-start;
}
.nav-side .site-nav > ul { flex-direction: column; gap: .3rem; }
.nav-side .site-nav ul ul { padding-left: .7rem; margin: .2rem 0 .3rem .3rem; border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.nav-side .site-nav ul ul a { font-size: .92rem; padding: .4rem .7rem; }
.nav-side .site-main { flex: 1; min-width: 0; }
.nav-side .site-footer { flex-basis: 100%; max-width: none; padding: 1rem 2rem; }
.nav-side .site-footer .footer-text { margin-left: auto; }
.nav-side .site-footer .admin-link { margin-right: auto; }

@media (max-width: 900px) {
    .nav-side { flex-direction: column; }
    .nav-side .site-header {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: .9rem 1.2rem;
        position: sticky;
    }
    .nav-side .burger { display: flex; }
    .nav-side .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 100;
        background: var(--menu-bg);
        box-shadow: var(--shadow);
        border-top: 1px solid color-mix(in srgb, var(--menu-text) 12%, transparent);
        padding: .5rem;
        max-height: 80vh;
        overflow-y: auto;
    }
    .nav-side .nav-toggle:checked ~ .site-header .site-nav { display: block; }
    .nav-side .site-nav a { padding: .7rem 1rem; }
}

/* Kliknięcie/dotknięcie poza menu (na przyciemnione tło) zamyka listę — układ klasyczny i boczny */
@media (max-width: 900px) {
    .nav-top .nav-toggle:checked ~ .nav-overlay,
    .nav-side .nav-toggle:checked ~ .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(15, 23, 42, .35);
    }
}

/* =====================================================
   UKŁAD 3: HAMBURGER — menu zawsze pod przyciskiem ☰
   ===================================================== */
.nav-full .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    /* bez backdrop-filter: tworzyłby containing block i uwięził
       pełnoekranowe menu (position: fixed) wewnątrz nagłówka */
    backdrop-filter: none;
}
.nav-full .burger { display: flex; }

.nav-full .site-nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: var(--menu-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
    overflow-y: auto;
}
.nav-full .nav-toggle:checked ~ .site-header .site-nav {
    opacity: 1;
    visibility: visible;
}
.nav-full .site-nav > ul {
    flex-direction: column;
    gap: .6rem;
    text-align: center;
    padding: 4rem 1rem;
}
.nav-full .site-nav a { font-size: 1.4rem; padding: .5rem 2.5rem; }
.nav-full .site-nav ul ul {
    gap: .2rem;
    margin-top: .2rem;
}
.nav-full .site-nav ul ul a { font-size: 1.05rem; opacity: .85; padding: .3rem; }

/* Przycisk ☰ musi zostać nad pełnoekranowym menu, żeby dało się je zamknąć */
.nav-full .nav-toggle:checked ~ .site-header .burger {
    position: fixed;
    top: .9rem;
    right: 1.5rem;
    z-index: 130;
    background: var(--menu-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* =====================================================
   OGÓLNE POPRAWKI RESPONSYWNOŚCI (telefon)
   ===================================================== */
@media (max-width: 560px) {
    .site-main { margin: 1rem auto; }
    .content-card { padding: 1.4rem 1.25rem; border-radius: 12px; }
    .content-card h1 { font-size: 1.5rem; }
    .page-content h2 { font-size: 1.25rem; }
    .page-content h3 { font-size: 1.08rem; }
    .nav-top .site-header,
    .nav-full .site-header { padding: .8rem 1rem; }
    .site-title { font-size: 1.15rem; }
    .site-footer { padding: 1rem !important; font-size: .8rem; }
    .cookie-banner { padding: .9rem 1rem; }
}

/* =====================================================
   WARIANTY WIZUALNE UKŁADÓW (na bazie mechanizmów nav-*)
   ===================================================== */

/* --- Wyśrodkowany: logo i menu na środku, węższa treść --- */
@media (min-width: 901px) {
    .theme-centered .site-header { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
    .theme-centered .brand { text-align: center; }
    .theme-centered .site-nav > ul { justify-content: center; flex-wrap: wrap; }
}
.theme-centered .site-main { max-width: 760px; }
.theme-centered .content-card h1 { text-align: center; border-bottom: none; }
.theme-centered .content-card h1::after {
    content: ""; display: block; width: 60px; height: 3px;
    background: var(--accent); margin: .7rem auto 0; border-radius: 2px;
}

/* --- Pasek z akcentem: kolorowa górna krawędź, zwarte menu wielkimi literami --- */
.theme-topbar .site-header { border-top: 5px solid var(--accent); padding-top: .65rem; padding-bottom: .65rem; }
.theme-topbar .site-nav a { text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; }

/* --- Pływające menu: przezroczysty nagłówek, menu jako zaokrąglona pigułka --- */
@media (min-width: 901px) {
    .theme-float .site-header { background: transparent; box-shadow: none; position: static; padding: 1.4rem 2rem; }
    .theme-float .site-nav > ul {
        background: var(--menu-bg);
        box-shadow: var(--shadow);
        border-radius: 99px;
        padding: .4rem .7rem;
    }
    .theme-float .site-main { margin-top: .5rem; }
}

/* --- Menu boczne po prawej: ta sama mechanika co lewe, odwrócona kolejność --- */
@media (min-width: 901px) {
    .theme-rightbar .site-main { order: 1; }
    .theme-rightbar .site-header { order: 2; }
    .theme-rightbar .site-footer { order: 3; }
}

/* =====================================================
   SZEROKIE EKRANY I TREŚĆ PRZENIESIONA ZE STAREJ WITRYNY
   ===================================================== */

@media (min-width: 1100px) {
    /* Menu działu może być szersze — pozycje w nim są długie */
    .section-nav { width: clamp(240px, 20vw, 320px); }
    .content-card { padding: 2.6rem 3rem; }
}

/* Bardzo szerokie monitory: nie rozciągamy tekstu bez końca —
   linijka dłuższa niż ok. 90 znaków źle się czyta. */
@media (min-width: 1500px) {
    :root { --szerokosc: 1360px; }
}

/* --- Ratunek dla treści z lat 2010–2019 --- */

/* Stare podstrony bywają zbudowane na tabelach z szerokościami w pikselach.
   Bez tego rozpychałyby stronę w bok, zwłaszcza na telefonie. */
.page-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}
.page-content td, .page-content th { padding: .35rem .5rem; vertical-align: top; }

/* Szerokie tabele przewijają się we własnej ramce, zamiast rozciągać stronę.
   Uwaga: „overflow-x: auto" na całym bloku treści przycinałoby też w pionie —
   przeglądarka wymusza wtedy overflow-y, przez co elementy z ujemnym marginesem
   górnym (pasy powitalne) traciły zaokrągloną krawędź. Dlatego przewijanie
   dotyczy wyłącznie samych tabel. */
.page-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* =====================================================
   STRONA GŁÓWNA — sekcje wprowadzające
   ===================================================== */

.hero {
    margin: .2rem 0 2rem;
    padding: 2rem 2.2rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, #fff) 0%,
        color-mix(in srgb, var(--accent) 4%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
/* --- Fragment nagłówka w kolorowym gradiencie (zapis {{...}}) ---
   Najpierw zwykły, czytelny kolor. Gradient nakładamy dopiero tam, gdzie
   przeglądarka umie przyciąć tło do kształtu liter — inaczej tekst zniknąłby. */
.tekst-gradient { color: #1d4ed8; }

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .tekst-gradient {
        background-image: linear-gradient(100deg, #1d4ed8 0%, #0d9488 34%, #16a34a 62%, #1d4ed8 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    /* Powolne przelewanie kolorów — wyłączone, gdy użytkownik prosi o mniej ruchu */
    @media (prefers-reduced-motion: no-preference) {
        .tekst-gradient {
            animation: przelew-kolorow 9s ease-in-out infinite;
        }
    }
}

@keyframes przelew-kolorow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Warianty kolorystyczne: {{p:}} {{z:}} {{n:}} {{c:}} {{s:}} {{w:}} */
.tg-pomarancz { color: #ea580c; }
.tg-zielen    { color: #15803d; }
.tg-blekit    { color: #1d4ed8; }
.tg-czerwien  { color: #be123c; }

/* Szary — spokojna końcówka, np. „.pl" w nazwie. Bez gradientu i bez animacji. */
.tg-szary {
    color: #94a3b8 !important;
    background-image: none !important;
    -webkit-text-fill-color: #94a3b8 !important;
    animation: none !important;
    font-weight: 400;
}

/* Mocny — fraza, która ma przyciągnąć wzrok najbardziej */
.tg-mocny {
    color: #0d9488;
    font-weight: 800;
    letter-spacing: -.01em;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    /* Pomarańcz to firmowy kolor „taniej reklamy" — od żółtego przez pomarańcz po czerwień */
    .tg-pomarancz { background-image: linear-gradient(100deg, #f59e0b 0%, #ea580c 38%, #dc2626 64%, #f59e0b 100%); }
    .tg-zielen    { background-image: linear-gradient(100deg, #16a34a 0%, #0d9488 45%, #65a30d 70%, #16a34a 100%); }
    .tg-blekit    { background-image: linear-gradient(100deg, #1d4ed8 0%, #0ea5e9 45%, #7c3aed 70%, #1d4ed8 100%); }
    .tg-czerwien  { background-image: linear-gradient(100deg, #be123c 0%, #e11d48 45%, #f97316 70%, #be123c 100%); }
    .tg-mocny     { background-image: linear-gradient(100deg, #0d9488 0%, #16a34a 40%, #1d4ed8 72%, #0d9488 100%); }
    .tg-pomarancz, .tg-zielen, .tg-blekit, .tg-czerwien, .tg-mocny { color: transparent; }
}

/* Logo firmy w treści — na stronie głównej i w kontakcie.
   W nagłówku zostaje nazwa tekstowa, żeby jej nie zastępować obrazkiem. */
.logo-firmy {
    display: block;
    width: auto;
    max-width: min(340px, 80%);
    height: auto;
    margin: 0 0 1.1rem;
    border-radius: 0;
}
.logo-kontakt { margin: 0 0 1rem; }

/* =====================================================
   PASEK MARKI POD NAGŁÓWKIEM
   Logo, nazwa i lista usług w jednym rzędzie — zamiast
   luźno rzuconego obrazka nad treścią.
   ===================================================== */
.pasek-marki {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.pasek-marki-logo { flex-shrink: 0; }
.pasek-marki-logo .logo-firmy { margin: 0; max-width: 250px; }
.pasek-marki-tekst { min-width: 0; }

.marka-nazwa {
    margin: 0 0 .45rem;
    font-size: 1rem;
    color: var(--muted);
}
.marka-nazwa strong {
    color: var(--text);
    letter-spacing: -.01em;
}

/* Usługi jako „pastylki" w trzech stopniach ważności:
   spokojne tło dla reszty oferty, cieplejsze dla drukarni,
   pełny gradient dla tego, co ma sprzedawać najmocniej. */
.marka-uslugi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .5rem;
    margin: 0;
}
.marka-uslugi span,
.marka-uslugi a {
    display: inline-block;
    padding: .28rem .78rem;
    border-radius: 99px;
    font-size: .82rem;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
}

/* Lekkie wyróżnienie — drukarnia (sprzedaż także jako pośrednik) */
.marka-uslugi .pastylka-lekka {
    color: #9a3412;
    font-weight: 600;
    background: color-mix(in srgb, #f59e0b 16%, #fff);
    border-color: color-mix(in srgb, #ea580c 32%, transparent);
}

/* Mocne wyróżnienie — strony www i pozycjonowanie */
.marka-uslugi .pastylka-mocna {
    padding: .38rem 1.05rem;
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    border: 0;
    background: linear-gradient(100deg, #1d4ed8 0%, #0d9488 55%, #16a34a 100%);
    box-shadow: 0 4px 14px rgba(29, 78, 216, .3);
    transition: transform .12s, box-shadow .14s, filter .14s;
}
a.pastylka-mocna:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(29, 78, 216, .38);
}

/* =====================================================
   BELKA ZASIĘGU — pasek pod menu, na każdej podstronie
   ===================================================== */
.belka-zasieg {
    background: #fff;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
.belka-wnetrze {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--szerokosc);
    margin: 0 auto;
}
.belka-czesc {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem;
    font-size: .88rem;
    line-height: 1.25;
    text-decoration: none;
    color: #fff;
    min-width: 0;
}
.belka-czesc strong { display: block; font-weight: 700; }
.belka-opis { opacity: .9; font-size: .82rem; }
.belka-ikona { flex-shrink: 0; font-size: 1.1rem; }

/* Ciepła połowa — oferta lokalna */
.belka-lokalnie { background: linear-gradient(100deg, #ea580c 0%, #f59e0b 100%); }
/* Chłodna połowa — oferta ogólnopolska, klikalna */
.belka-krajowo  { background: linear-gradient(100deg, #1d4ed8 0%, #0d9488 60%, #16a34a 100%); }

a.belka-krajowo { transition: filter .15s; }
a.belka-krajowo:hover { filter: brightness(1.09); }
.belka-strzalka {
    margin-left: auto;
    flex-shrink: 0;
    font-weight: 700;
    padding-left: .6rem;
}

@media (max-width: 620px) {
    .belka-wnetrze { grid-template-columns: 1fr; }
    .belka-czesc { padding: .55rem .9rem; }
}

/* --- Zasięg działania: lokalnie kontra cała Polska --- */
.zasieg-dzialania {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .7rem;
    margin: 0 0 1.4rem;
}
.znacznik {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--text);
}
.znacznik strong { display: block; font-size: .95rem; }
.znacznik-ikona {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    font-size: 1.05rem;
}
.znacznik-lokalny {
    background: linear-gradient(120deg,
        color-mix(in srgb, #ea580c 16%, #fff) 0%,
        color-mix(in srgb, #f59e0b 12%, #fff) 100%);
    border: 1px solid color-mix(in srgb, #ea580c 26%, transparent);
}
.znacznik-krajowy {
    background: linear-gradient(120deg,
        color-mix(in srgb, #1d4ed8 14%, #fff) 0%,
        color-mix(in srgb, #16a34a 12%, #fff) 100%);
    border: 1px solid color-mix(in srgb, #1d4ed8 24%, transparent);
}

/* Baner stoi nad hasłem, więc odstęp nad nim jest zbędny */
.zasieg-dzialania + .banner-promo { margin-top: 0; }
.banner-promo + .hero { margin-top: 0; }

@media (max-width: 560px) {
    .pasek-marki { gap: .9rem; }
    .pasek-marki-logo .logo-firmy { max-width: 200px; }
}

@media (max-width: 560px) {
    .logo-firmy { max-width: 100%; margin-bottom: .8rem; }
}

.hero-haslo {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 .6rem;
    color: var(--text);
}
.hero-lead {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 62ch;
    margin: 0 0 1.3rem;
}
.hero-akcje { display: flex; flex-wrap: wrap; gap: .7rem; }
.przycisk {
    display: inline-block;
    padding: .75rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: transform .12s, box-shadow .15s, background .15s;
}
.przycisk:hover { transform: translateY(-1px); }
.przycisk-glowny {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.przycisk-drugi {
    background: #fff;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- Kafle promocyjne (dawne guziki-obrazki) ---
   Stare guziki były plikami JPG z wtopionym tekstem i ceną: wyszukiwarki nie
   czytały z nich ani słowa, na telefonie się rozjeżdżały, a zmiana ceny
   wymagała przerabiania grafiki. Teraz to zwykły tekst w kaflach. */
.kafle-promo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.2rem;
}
.kafel-promo {
    --pk: var(--accent);
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.4rem 1.2rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--pk) 24%, transparent);
    border-top: 4px solid var(--pk);
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
    transition: transform .14s, box-shadow .14s;
}
.kafel-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .13);
}
.promo-naglowek {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pk);
    margin-bottom: .3rem;
}
.promo-tytul {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin-bottom: .45rem;
}
.promo-opis {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: .9rem;
}
.promo-cena {
    margin-top: auto;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pk);
    line-height: 1.15;
}
.promo-cena em {
    display: block;
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.promo-cena small { font-size: .78rem; font-weight: 600; color: var(--muted); }
.promo-strzalka {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: .88rem;
    font-weight: 700;
    color: var(--pk);
}

.promo-zielony      { --pk: #16a34a; }
.promo-niebieski    { --pk: #1d4ed8; }
.promo-turkus       { --pk: #0d9488; }
.promo-pomaranczowy { --pk: #ea580c; }

/* --- Kafle ofertowe: ta sama oferta, co na stronie głównej, ale szeroka ---
   Na stronie działu jest miejsce, żeby rozwinąć temat, więc cena stoi w osobnej
   kolumnie po prawej, a obok niej mieszczą się punkty „co dostajesz". */
.oferty-lead {
    max-width: 62ch;
    color: var(--muted);
    margin: -.4rem 0 1.1rem;
}
.kafle-oferty {
    display: grid;
    gap: 1.1rem;
    margin: 0 0 2.4rem;
}
.kafel-oferty {
    --pk: var(--accent);
    display: grid;
    grid-template-columns: 1fr minmax(190px, 15rem);
    gap: 1.6rem;
    align-items: stretch;
    padding: 1.6rem 1.7rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--pk) 7%, #fff), #fff 62%);
    border: 1px solid color-mix(in srgb, var(--pk) 26%, transparent);
    border-left: 5px solid var(--pk);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .07);
    transition: transform .14s, box-shadow .14s;
}
.kafel-oferty:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .15);
}
.oferty-tresc { min-width: 0; }
.oferty-nad {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pk);
}
.oferty-tytul {
    display: block;
    margin: .25rem 0 .5rem;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.oferty-opis {
    display: block;
    color: var(--muted);
    line-height: 1.6;
    max-width: 54ch;
}
.oferty-punkty {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .9rem;
    font-size: .87rem;
    font-weight: 600;
}
.oferty-punkty span::before {
    content: '✓';
    margin-right: .35rem;
    font-weight: 800;
    color: var(--pk);
}
/* Kolumna z ceną — oddzielona linią, żeby czytało się jak metka */
.oferty-cena {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.6rem;
    border-left: 1px solid color-mix(in srgb, var(--pk) 22%, transparent);
    text-align: left;
}
.oferty-cena em {
    font-style: normal;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.oferty-cena b {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--pk);
}
.oferty-cena small { font-size: .84rem; font-weight: 600; color: var(--muted); }
.oferty-przycisk {
    display: inline-block;
    margin-top: 1rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--pk);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}
.kafel-oferty:hover .oferty-przycisk {
    background: color-mix(in srgb, var(--pk) 82%, #000);
}

@media (max-width: 640px) {
    .kafel-oferty {
        grid-template-columns: 1fr;
        gap: 1.1rem;
        padding: 1.3rem 1.2rem;
    }
    .oferty-tytul { font-size: 1.35rem; }
    .oferty-cena {
        padding-left: 0;
        padding-top: 1rem;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--pk) 22%, transparent);
    }
    .oferty-przycisk { margin-top: .8rem; }
}

/* --- Blok statystyczny na stronach miast ---
   Duża liczba mieszkańców + przeliczenie na potencjalnych klientów. */
.miasto-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    align-items: center;
    margin: 1.8rem 0;
    padding: 1.3rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 10%, #fff),
        color-mix(in srgb, #16a34a 8%, #fff));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.miasto-stat .stat-liczba {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--accent);
    white-space: nowrap;
}
.miasto-stat .stat-tekst { line-height: 1.6; }
@media (max-width: 560px) {
    .miasto-stat { grid-template-columns: 1fr; gap: .6rem; text-align: left; }
}

/* --- Strona kontaktu ---
   Zamiast dawnej tabeli ze sztywnymi wysokościami: siatka, która na telefonie
   składa się do jednej kolumny i niczego nie wypycha poza ekran. */
.kontakt-siatka {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.6rem;
    align-items: start;
    margin: 1rem 0 1.8rem;
}
.kontakt-adres { font-size: 1.05rem; line-height: 1.65; }
.kontakt-dopisek { color: var(--muted); font-size: .92rem; }
.kontakt-dane img { max-width: 100%; height: auto; }
.kontakt-atuty {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: grid;
    gap: .55rem;
}
.kontakt-atuty li {
    padding: .65rem .9rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-left: 3px solid var(--accent);
    font-size: .95rem;
}
.kontakt-foto { display: grid; gap: 1rem; }
.kontakt-foto img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.kontakt-mapa iframe {
    width: 100%;
    height: 340px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
@media (max-width: 720px) {
    .kontakt-siatka { grid-template-columns: 1fr; }
    .kontakt-mapa iframe { height: 260px; }
}
/* --- Katalog pełnej oferty ---
   Kilkanaście grup po kilka–kilkanaście pozycji. Układ murowany (kolumny),
   żeby krótkie i długie grupy nie zostawiały dziur. */
.katalog {
    columns: 2;
    column-gap: 1.2rem;
    margin: 1.5rem 0 2rem;
}
@media (max-width: 780px) { .katalog { columns: 1; } }

.katalog-grupa {
    --k: var(--accent);
    break-inside: avoid;
    display: inline-block;   /* razem z break-inside trzyma grupę w jednej kolumnie */
    width: 100%;
    margin: 0 0 1.2rem;
    padding: 1.1rem 1.3rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-top: 3px solid var(--k);
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .05);
}
.katalog-grupa h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--k) 80%, #0f172a);
}
.katalog-ikona {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: color-mix(in srgb, var(--k) 13%, transparent);
    font-size: 1rem;
}
.katalog-opis { margin: 0 0 .7rem; font-size: .87rem; color: var(--muted); line-height: 1.55; }
.katalog-lista { list-style: none; padding: 0; margin: 0; }
.katalog-lista li {
    padding: .28rem 0 .28rem .95rem;
    font-size: .92rem;
    line-height: 1.45;
    position: relative;
}
.katalog-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--k);
}
.katalog-lista a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.katalog-lista a:hover { color: var(--k); }
/* Pozycja bez własnej podstrony — nadal czytelna, ale bez obietnicy kliknięcia */
.katalog-bez-strony { color: var(--muted); }
.katalog-bez-strony::before { opacity: .45; }
.katalog-zew { font-size: .8em; color: var(--muted); }

/* --- Róża wiatrów na stronach miejscowości ---
   Zamiast cudzych zdjęć miast: wektorowa tarcza, na której igła wskazuje
   prawdziwy kierunek z Częstochowy, a pod spodem stoi odległość.
   Dla każdego miasta wygląda inaczej, bo dla każdego inny jest kierunek. */
.roza-wiatrow { flex: none; overflow: visible; }
.roza-tarcza {
    fill: color-mix(in srgb, var(--k, var(--accent)) 8%, #fff);
    stroke: color-mix(in srgb, var(--k, var(--accent)) 30%, transparent);
    stroke-width: 1.5;
}
.roza-tarcza-2 {
    fill: none;
    stroke: color-mix(in srgb, var(--k, var(--accent)) 18%, transparent);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}
.roza-n {
    fill: color-mix(in srgb, var(--text) 45%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}
/* Igła: ostry szpic w stronę miasta */
.roza-igla { fill: var(--k, var(--accent)); }
/* Ogon igły — przeciwwaga, celowo bledsza, żeby oko szło za szpicem */
.roza-ogon { fill: color-mix(in srgb, var(--text) 26%, transparent); }
.roza-srodek{ fill: color-mix(in srgb, var(--text) 62%, transparent); }
.roza-km {
    fill: color-mix(in srgb, var(--text) 62%, transparent);
    font-size: 13px;
    font-weight: 800;
    text-anchor: middle;
}

/* Znaczek obsługi: uścisk dłoni = jeździmy, paczka = wysyłamy */
.znaczek-obslugi {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    padding: .18rem .55rem .18rem .35rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.znaczek-ikona { font-size: 1em; }
.znaczek-osobiscie {
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
}
.znaczek-wysylka {
    background: color-mix(in srgb, #1d4ed8 13%, transparent);
    color: #1d4ed8;
}
.znaczek-duzy {
    margin: 0 0 .5rem;
    padding: .3rem .8rem .3rem .55rem;
    font-size: .85rem;
}

/* Kafel miasta: róża po lewej, nazwa po prawej */
.kafel-miasta-gora {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .5rem;
}
.kafel-miasta-nazwa { min-width: 0; }
.kafel-miasta .kafel-dzialu-tytul { margin: 0; }

/* Nagłówek strony miasta */
.miasto-naglowek {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin: .2rem 0 1.5rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.miasto-dystans { margin: 0 0 .3rem; font-size: 1.05rem; }
.miasto-dystans strong { font-size: 1.35rem; color: var(--accent); }
.miasto-kier { color: var(--muted); font-size: .9rem; }
.miasto-dystans-opis { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 560px) {
    .miasto-naglowek { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* --- Osobne serwisy produktowe (pieczątki, wizytówki, ulotki) ---
   Wyraźnie oddzielone od reszty oferty: to nie kolejne kafle usług,
   tylko drogowskaz do serwisów, gdzie temat jest opisany szczegółowo. */
.serwisy-produktowe {
    margin: 2.4rem 0;
    padding: 1.6rem 1.7rem;
    border-radius: 18px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 7%, #fff),
        color-mix(in srgb, #16a34a 5%, #fff));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.serwisy-produktowe > h2 { margin-top: 0; }
.serwisy-wstep { max-width: 68ch; line-height: 1.65; }
.serwisy-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.3rem 0 1rem;
}
.serwis-karta {
    --k: var(--accent);
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--k) 22%, transparent);
    border-top: 4px solid var(--k);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
}
.serwis-ikona {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .6rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--k) 13%, transparent);
    font-size: 1.4rem;
}
.serwis-karta h3 {
    margin: 0 0 .4rem;
    font-size: 1.15rem;
    color: color-mix(in srgb, var(--k) 78%, #0f172a);
}
.serwis-lead { margin: 0 0 .8rem; font-size: .92rem; color: var(--muted); line-height: 1.6; }
.serwis-punkty {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .89rem;
}
.serwis-punkty li { padding: .18rem 0 .18rem 1rem; position: relative; }
.serwis-punkty li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--k);
}
/* Przejście do serwisu — ma wyglądać jak drzwi, nie jak zwykły odnośnik */
.serwis-przejdz {
    margin-top: auto;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: var(--k);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
    text-decoration: none;
}
.serwis-przejdz:hover { background: color-mix(in srgb, var(--k) 82%, #000); }
.serwisy-dopisek { margin: 0; font-size: .9rem; color: var(--muted); }

/* --- Galerie realizacji (folie na szyby) ---
   Równe kafelki zamiast rzędu miniatur różnej wysokości. */
.folia-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    margin: 1rem 0 1.5rem;
}
.folia-zdjecie {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    transition: transform .14s, box-shadow .14s;
}
.folia-zdjecie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.folia-zdjecie:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
}
/* Reszta zdjęć — schowana pod przyciskiem, żeby nie zasypywać strony */
.folia-wiecej { margin: 0 0 1.6rem; }
.folia-wiecej > summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    list-style: none;
}
.folia-wiecej > summary::-webkit-details-marker { display: none; }
.folia-wiecej > summary::before { content: "▾"; font-size: .85em; }
.folia-wiecej[open] > summary::before { content: "▴"; }
.folia-wiecej > summary:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* --- Zaproszenie do generatora kolorów (nad stopką, na każdej podstronie) --- */
.promo-narzedzie {
    max-width: var(--szerokosc);
    margin: 2rem auto 0;
    padding: 0 2rem;
}
.promo-narzedzie-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    padding: 1.3rem 1.5rem;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(120deg, #7c3aed 0%, #2563eb 45%, #0d9488 100%);
    box-shadow: 0 12px 32px rgba(37, 99, 235, .26);
    transition: transform .14s, box-shadow .14s;
}
.promo-narzedzie-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(37, 99, 235, .34);
}
.promo-narzedzie-ikona {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    font-size: 1.7rem;
}
.promo-narzedzie-tresc { flex: 1 1 18rem; min-width: 0; display: grid; gap: .15rem; }
.promo-narzedzie-nad {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}
.promo-narzedzie-tytul { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.promo-narzedzie-opis { font-size: .92rem; line-height: 1.55; opacity: .93; }
.promo-narzedzie-strzalka {
    flex: none;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-weight: 700;
    white-space: nowrap;
}
.promo-narzedzie-link:hover .promo-narzedzie-strzalka { background: rgba(255, 255, 255, .3); }

/* Wersja mocniejsza — strona główna i kontakt */
.promo-narzedzie-mocny .promo-narzedzie-link { padding: 1.8rem 1.8rem; gap: 1.2rem 1.6rem; }
.promo-narzedzie-mocny .promo-narzedzie-ikona { width: 68px; height: 68px; font-size: 2.1rem; }
.promo-narzedzie-mocny .promo-narzedzie-tytul { font-size: 1.6rem; }
.promo-narzedzie-mocny .promo-narzedzie-strzalka { font-size: 1.02rem; padding: .75rem 1.5rem; }
.promo-narzedzie-punkty {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    margin-top: .6rem;
}
.promo-narzedzie-punkty span {
    padding: .22rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: .8rem;
    font-weight: 600;
}
@media (max-width: 720px) {
    .promo-narzedzie { padding: 0 1rem; }
    .promo-narzedzie-strzalka { width: 100%; text-align: center; }
}

/* --- Generator zestawów kolorów --- */
.generator-kolorow { margin: 1.2rem 0; }

/* Wybierak jak w programach graficznych: kwadrat nasycenia i jasności
   plus tęczowy suwak odcienia pod spodem. */
.wybierak { margin-bottom: 1.2rem; }
.wyb-kwadrat {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 5 / 3;
    border-radius: 12px;
    cursor: crosshair;
    touch-action: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    overflow: hidden;
}
/* Biel od lewej i czerń od dołu — razem dają pełen zakres nasycenia i jasności */
.wyb-biel, .wyb-czern { position: absolute; inset: 0; }
.wyb-biel  { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.wyb-czern { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }
.wyb-celownik {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.wyb-tecza {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 26px;
    margin-top: .7rem;
    border-radius: 999px;
    cursor: ew-resize;
    touch-action: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
    background: linear-gradient(to right,
        #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
        #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.wyb-uchwyt {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 32px;
    margin: -16px 0 0 -10px;
    border: 3px solid #fff;
    border-radius: 7px;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    pointer-events: none;
}
.wyb-podpowiedz { max-width: 520px; margin-top: .5rem; }
.kolor-sterowanie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.4rem;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.kolor-wybieraki { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.kolor-pole-label {
    display: grid;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
}
.kolor-pole-label input[type="color"] {
    width: 84px;
    height: 46px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 10px;
    background: none;
    cursor: pointer;
}
.kolor-pole-label input[type="text"] {
    width: 8.5rem;
    padding: .6rem .7rem;
    font: 600 1rem/1 ui-monospace, "Cascadia Code", Consolas, monospace;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 10px;
}
.kolor-szybkie { display: flex; flex-wrap: wrap; gap: .4rem; }
.kolor-szybki {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
    cursor: pointer;
}
.kolor-szybki:hover { transform: scale(1.08); }

/* Podgląd i wartości */
.kolor-glowny {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 1.2rem;
    margin: 1.2rem 0 1.8rem;
    align-items: start;
}
.kolor-podglad {
    display: grid;
    place-items: center;
    min-height: 150px;
    border-radius: 14px;
    color: #fff;
    font: 800 1.25rem/1 ui-monospace, Consolas, monospace;
    letter-spacing: .04em;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.kolor-podglad.podglad-jasny { color: #0f172a; }
.kolor-wartosci { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.kolor-wartosci li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .8rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 10px;
}
.wart-etykieta {
    flex: none;
    width: 3.6rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--muted);
}
.wart-tekst { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }
.wart-kopiuj {
    flex: none;
    padding: .3rem .7rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.wart-kopiuj:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Próbki */
.kolor-probki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    margin: .8rem 0 1.6rem;
}
.kolor-probki-gesto { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.kolor-probka {
    display: grid;
    align-content: end;
    gap: .1rem;
    min-height: 92px;
    padding: .6rem .7rem;
    border: 0;
    border-radius: 10px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    transition: transform .12s;
}
.kolor-probka:hover { transform: translateY(-2px); }
.kolor-probka.probka-jasna { color: #0f172a; }
.kolor-probka { position: relative; }
/* Potwierdzenie skopiowania — pojawia się na chwilę na samym kafelku */
.probka-info {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 800;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.probka-skopiowana .probka-info { opacity: 1; }
.probka-jasna .probka-info { background: rgba(255, 255, 255, .78); color: #0f172a; }
/* Przycisk „ustaw jako podstawowy" — dyskretny, w rogu */
.probka-ustaw {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .3);
    color: inherit;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s, background .12s;
}
.kolor-probka:hover .probka-ustaw { opacity: 1; background: rgba(255, 255, 255, .55); }
.probka-jasna .probka-ustaw { background: rgba(15, 23, 42, .12); }
.probka-jasna:hover .probka-ustaw { background: rgba(15, 23, 42, .22); }

.probka-hex { font: 800 .82rem/1.2 ui-monospace, Consolas, monospace; }
.probka-cmyk { font-size: .68rem; opacity: .85; }
.probka-podpis { font-size: .7rem; font-weight: 700; opacity: .95; margin-top: .15rem; }
.kolor-probki-gesto .kolor-probka { min-height: 72px; }
.kolor-probki-gesto .probka-cmyk { display: none; }

/* Zestawy */
.kolor-zestawy { display: grid; gap: 1.4rem; margin-bottom: 1.5rem; }
.zestaw {
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 14px;
}
.zestaw h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.zestaw-opis { margin: 0 0 .8rem; font-size: .88rem; color: var(--muted); line-height: 1.55; }
.zestaw-probki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .5rem;
}
.zestaw-gradient {
    height: 44px;
    margin-top: .7rem;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.zestaw-kod {
    margin-top: .6rem;
    padding: .4rem .9rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.zestaw-kod:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* Mieszalnik gradientu — pasek z przeciąganymi punktami */
.mieszalnik { margin-top: 2rem; }
.mx-pasek {
    position: relative;
    height: 76px;
    margin: .8rem 0 1rem;
    padding-bottom: 22px;   /* miejsce, w którym siedzą kropki */
}
.mx-tlo {
    height: 54px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.mx-punkt {
    position: absolute;
    bottom: 0;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .35);
    cursor: grab;
}
.mx-punkt:active { cursor: grabbing; }
.mx-punkt-wybrany {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    transform: scale(1.15);
}
.mx-sterowanie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    margin-bottom: .9rem;
}
.mx-sterowanie select {
    padding: .55rem .7rem;
    font: inherit;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 10px;
    background: #fff;
}
.mx-kod {
    display: block;
    padding: .7rem .9rem;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    border-radius: 10px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .84rem;
    word-break: break-all;
}

.kolor-uwaga { font-size: .88rem; color: var(--muted); line-height: 1.6; margin: .2rem 0 .6rem; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .kolor-glowny { grid-template-columns: 1fr; }
}

/* --- Wyszukiwarka: pole z podpowiedziami --- */
.szukaj-pole { position: relative; flex: 1 1 16rem; min-width: 0; }
.szukaj-pole input { width: 100%; }
.szukaj-podpowiedzi {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    z-index: 140;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    padding: .3rem;
}
.szukaj-podpowiedz {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    line-height: 1.35;
}
.szukaj-podpowiedz:hover,
.szukaj-podpowiedz.wybrana {
    background: color-mix(in srgb, var(--accent) 11%, transparent);
}
.szukaj-podpowiedz-tytul { font-weight: 600; min-width: 0; }
.szukaj-podpowiedz-dzial {
    flex: none;
    font-size: .76rem;
    color: var(--muted);
    white-space: nowrap;
}
/* Najczęściej szukane — gotowe hasła do kliknięcia przy pustym polu */
.szukaj-czesto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--muted);
}
.szukaj-czesto a {
    padding: .2rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.szukaj-czesto a:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* Dział, z którego pochodzi wynik */
.search-dzial {
    margin: 0 0 .15rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Okruszki („gdzie jestem") ---
   Mają być ledwo widoczne: to pomoc dla zagubionego, a nie element oferty.
   Dopiero po najechaniu odnośnik nabiera koloru. */
.okruszki {
    max-width: var(--szerokosc);
    margin: .7rem auto -.3rem;
    padding: 0 2rem;
    font-size: .78rem;
    color: color-mix(in srgb, var(--text) 42%, transparent);
}
.okruszki ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .45rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.okruszki li { display: flex; align-items: center; gap: .45rem; }
.okruszki li + li::before {
    content: "›";
    opacity: .5;
    font-size: .95em;
}
.okruszki a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.okruszki a:hover {
    color: var(--accent);
    border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Bieżąca strona — bez odnośnika, odrobinę mocniejsza od reszty */
.okruszki [aria-current="page"] {
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-weight: 600;
}
@media (max-width: 720px) {
    .okruszki { padding: 0 1rem; font-size: .74rem; }
}

/* --- Baza wiedzy: autorskie poradniki --- */
.wiedza-grupa {
    --k: var(--accent);
    margin: 0 0 1.8rem;
    padding-left: 1.1rem;
    border-left: 3px solid color-mix(in srgb, var(--k) 55%, transparent);
}
.wiedza-grupa h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .35rem;
    font-size: 1.15rem;
    color: color-mix(in srgb, var(--k) 80%, #0f172a);
}
.wiedza-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .9rem;
    margin-top: .9rem;
}
.wiedza-karta {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .05);
    transition: transform .14s, box-shadow .14s, border-color .14s;
}
.wiedza-karta:hover {
    transform: translateY(-2px);
    border-color: var(--k);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .11);
}
.wiedza-tytul {
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .4rem;
    color: color-mix(in srgb, var(--k) 72%, #0f172a);
}
.wiedza-opis { font-size: .89rem; color: var(--muted); line-height: 1.6; }
.wiedza-wiecej {
    margin-top: .8rem;
    padding-top: .6rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: .85rem;
    font-weight: 700;
    color: var(--k);
}

/* --- Opinie klientów z Map Google --- */
.opinie { margin: 2.4rem 0; }
.opinie-naglowek {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.6rem;
    align-items: center;
    margin-bottom: 1.4rem;
}
.opinie-ocena {
    display: grid;
    justify-items: center;
    gap: .15rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 16%, #fff),
        color-mix(in srgb, #ea580c 8%, #fff));
    border: 1px solid color-mix(in srgb, #f59e0b 34%, transparent);
    text-align: center;
}
.opinie-liczba {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: #b45309;
}
.opinie-gwiazdki { color: #f59e0b; letter-spacing: .08em; font-size: 1.05rem; }
.opinie-ile { font-size: .78rem; font-weight: 600; color: var(--muted); max-width: 11rem; }
.opinie-wstep h2 { margin-top: 0; }
.opinie-wstep p { max-width: 62ch; }

.opinie-karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.opinia {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.2rem 1.3rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.opinia-gwiazdki { color: #f59e0b; letter-spacing: .1em; margin-bottom: .5rem; }
.opinia blockquote {
    margin: 0 0 .9rem;
    font-size: .94rem;
    line-height: 1.65;
    quotes: '„' '"';
}
.opinia blockquote::before { content: open-quote; }
.opinia blockquote::after  { content: close-quote; }
.opinia figcaption {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding-top: .8rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
/* Inicjał zamiast zdjęcia — nie ciągniemy awatarów z obcych serwerów */
.opinia-inicjal {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-weight: 800;
}
.opinia-kto { display: grid; line-height: 1.35; min-width: 0; }
.opinia-meta { font-size: .78rem; color: var(--muted); }

@media (max-width: 620px) {
    .opinie-naglowek { grid-template-columns: 1fr; gap: 1rem; }
    .opinie-ocena { justify-self: start; }
}

/* Zachęta do wystawienia opinii w Mapach Google */
.opinie-zacheta {
    margin: 2rem 0;
    padding: 1.5rem 1.6rem;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, #f59e0b 12%, #fff),
        color-mix(in srgb, #ea580c 7%, #fff));
    border: 1px solid color-mix(in srgb, #f59e0b 32%, transparent);
}
.opinie-zacheta h2 { margin-top: 0; }
.opinie-zacheta p { max-width: 62ch; line-height: 1.65; }

.kontakt-freelancer {
    margin: .9rem 0;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: color-mix(in srgb, #f59e0b 9%, transparent);
    border-left: 3px solid #f59e0b;
}
.kontakt-freelancer p { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.6; }
.kontakt-freelancer p:last-child { margin-bottom: 0; }

/* Kreator SMS-a — pomaga klientowi ułożyć wiadomość z kompletem informacji */
.sms-kreator {
    margin: 2rem 0;
    padding: 1.5rem 1.6rem;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, #fff),
        color-mix(in srgb, #16a34a 6%, #fff));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.sms-pola {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem;
    margin: 1rem 0;
}
.sms-kreator label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
}
.sms-kreator input,
.sms-kreator select,
.sms-kreator textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .55rem .7rem;
    font: inherit;
    font-weight: 400;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    border-radius: 8px;
    background: #fff;
}
.sms-kreator textarea { resize: vertical; }
.sms-podglad-etykieta { margin: .4rem 0 1rem; }
.sms-dopisek { margin-top: .7rem; font-size: .85rem; color: var(--muted); }
.sms-kreator .przycisk { cursor: pointer; border: 0; font: inherit; font-weight: 700; }

/* --- Kafle działów --- */
.karty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}
.karta {
    display: block;
    padding: 1.2rem 1.3rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.karta:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
    transform: translateY(-2px);
}
.karta-tytul { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.karta-opis  { display: block; font-size: .9rem; color: var(--muted); line-height: 1.5; }

/* --- Wyróżniony blok (strony www i pozycjonowanie) --- */
.blok-www {
    margin: 2rem 0;
    padding: 1.8rem 2rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 7%, #fff);
    border-left: 4px solid var(--accent);
}
.blok-www h2 { margin-top: 0; border: none; padding: 0; }

/* --- Atuty --- */
.atuty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 2rem;
    padding: 0;
    list-style: none;
}
.atuty li {
    padding: .9rem 1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    font-size: .94rem;
}
.atuty strong { display: block; margin-bottom: .2rem; }

@media (max-width: 560px) {
    .hero { padding: 1.4rem 1.2rem; }
    .blok-www { padding: 1.2rem 1.2rem; }
}

/* =====================================================
   STRONA DZIAŁU — sekcje sprzedażowe
   ===================================================== */

/* --- Pas powitalny z gradientem --- */
.pas-hero {
    /* Bez ujemnego marginesu — wychodził poza blok treści i bywał przycinany u góry */
    margin: .2rem 0 2rem;
    padding: 2.2rem 2.4rem;
    border-radius: 16px;
    color: #fff;
    /* Kolorowy gradient zamiast granatu — ta sama rodzina barw co baner
       na stronie głównej, dzięki czemu obie strony trzymają się razem. */
    background: linear-gradient(120deg, #1d4ed8 0%, #0d9488 55%, #16a34a 100%);
    box-shadow: 0 14px 40px rgba(29, 78, 216, .26);
}
.pas-hero-nad {
    margin: 0 0 .5rem;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 70%, transparent);
}
.pas-hero-tytul {
    margin: 0 0 .7rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25;
    color: #fff;
    border: none;
    padding: 0;
}
.pas-hero-tekst {
    margin: 0 0 1.4rem;
    max-width: 60ch;
    color: color-mix(in srgb, #fff 84%, transparent);
    font-size: 1.03rem;
}
.pas-hero .przycisk-drugi { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.pas-hero .przycisk-drugi:hover { background: rgba(255, 255, 255, .12); }

/* --- Kafle usług --- */
.kafle-uslug {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.2rem;
}
.kafel-uslugi {
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    transition: transform .14s, box-shadow .14s, border-color .14s;
}
.kafel-uslugi:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}
.kafel-ikona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: .7rem;
    border-radius: 12px;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.kafel-uslugi h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.kafel-uslugi p { margin: 0; font-size: .93rem; color: var(--muted); line-height: 1.6; }

/* Każdy kafel w innym kolorze — sama siatka szarych prostokątów była nudna.
   Kolor bierze się ze zmiennej --k, więc dodanie kolejnego wariantu to jedna linijka. */
.kafel-uslugi { --k: var(--accent); }
.kafel-uslugi .kafel-ikona { background: color-mix(in srgb, var(--k) 15%, transparent); }
.kafel-uslugi:hover { border-color: var(--k); }
.kafel-uslugi h3 { color: color-mix(in srgb, var(--k) 78%, #0f172a); }
.kafel-uslugi::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: .9rem;
    border-radius: 2px;
    background: var(--k);
    opacity: .55;
}
.kolor-blekit  { --k: #2563eb; }
.kolor-zielen  { --k: #16a34a; }
.kolor-bursztyn{ --k: #d97706; }
.kolor-fiolet  { --k: #7c3aed; }
.kolor-turkus  { --k: #0d9488; }
.kolor-malina  { --k: #e11d48; }
.kolor-indygo  { --k: #4f46e5; }
.kolor-grafit  { --k: #475569; }

/* --- Pasek korzyści (cena, skuteczność, komplet usług) --- */
.pasek-korzysci {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
    margin: 1.4rem 0 2.2rem;
    padding: 0;
    list-style: none;
}
.pasek-korzysci li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--k, var(--accent)) 26%, transparent);
    border-top: 3px solid var(--k, var(--accent));
    font-size: .93rem;
    line-height: 1.45;
}
.pasek-korzysci .znak {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
    background: color-mix(in srgb, var(--k, var(--accent)) 14%, transparent);
}
.pasek-korzysci strong { display: block; color: var(--text); font-size: 1rem; }
.pasek-korzysci span.opis { color: var(--muted); }

/* --- Baner promocyjny na stronie głównej --- */
.banner-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    margin: 1.6rem 0 2rem;
    padding: 1.5rem 1.8rem;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(120deg, #1d4ed8 0%, #0d9488 55%, #16a34a 100%);
    box-shadow: 0 12px 34px rgba(29, 78, 216, .28);
    transition: transform .14s, box-shadow .14s;
}
.banner-promo:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(29, 78, 216, .34); }
/* Drugi baner — o naprawianiu starych stron. Inny gradient (fiolet → indygo),
   żeby czytał się jako osobna wiadomość, a nie powtórka pierwszej. Stoi zaraz
   pod banerem o nowych stronach, więc zdejmujemy mu górny margines. */
.banner-naprawa {
    margin-top: -1rem;
    background: linear-gradient(120deg, #7c3aed 0%, #4f46e5 55%, #0d9488 100%);
    box-shadow: 0 12px 34px rgba(124, 58, 237, .26);
}
.banner-naprawa:hover { box-shadow: 0 16px 40px rgba(124, 58, 237, .32); }
/* Skok w obrębie strony (baner → sekcja o modernizacji): płynnie i z zapasem,
   żeby przyklejony nagłówek nie zasłonił tytułu, na który wjeżdżamy. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 6rem; }
/* Cały baner jest odnośnikiem, więc przeglądarka domyślnie próbuje go przeciągać
   zamiast zaznaczać tekst. To jest prawdziwy tekst (nie obrazek) i ma dać się
   zaznaczyć oraz skopiować. */
.banner-promo { -webkit-user-select: text; user-select: text; }
.banner-promo-tresc { min-width: 0; }
.banner-promo-nad {
    display: block;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: .25rem;
}
.banner-promo-tytul {
    display: block;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
}
.banner-promo-tekst { display: block; margin-top: .35rem; font-size: .93rem; opacity: .92; }
.banner-promo-strzalka {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.3rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    font-weight: 700;
    white-space: nowrap;
}
.banner-promo:hover .banner-promo-strzalka { background: rgba(255, 255, 255, .28); }

@media (max-width: 560px) {
    .banner-promo { padding: 1.2rem 1.1rem; }
    .banner-promo-strzalka { width: 100%; justify-content: center; }
}

/* --- Blok dla właścicieli istniejących stron --- */
.blok-masz-strone {
    margin: 2.2rem 0;
    padding: 1.8rem 2rem 1.4rem;
    border-radius: 16px;
    background:
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, #0d9488 10%, transparent) 0%, transparent 55%),
        color-mix(in srgb, var(--text) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.blok-masz-strone h2 { margin-top: 0; border: none; padding: 0; }
.blok-masz-strone-lead { color: var(--muted); max-width: 64ch; margin-bottom: 1.2rem; }
.blok-masz-strone-stopka {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    font-size: .95rem;
    color: var(--muted);
}
.blok-masz-strone-stopka strong { color: var(--text); }

/* Mniejsze kafle — w bloku pobocznym nie mają konkurować z ofertą główną */
.kafle-mniejsze { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-bottom: 0; }
.kafle-mniejsze .kafel-uslugi { padding: 1.1rem 1.15rem 1.2rem; }
.kafle-mniejsze .kafel-ikona { width: 38px; height: 38px; font-size: 1.25rem; margin-bottom: .55rem; }
.kafle-mniejsze .kafel-uslugi h3 { font-size: 1rem; }
.kafle-mniejsze .kafel-uslugi p { font-size: .89rem; }
.kafle-mniejsze .kafel-uslugi::after { margin-top: .7rem; width: 34px; }

@media (max-width: 560px) {
    .blok-masz-strone { padding: 1.2rem 1.1rem 1rem; }
}

/* --- Kroki procesu --- */
.kroki {
    counter-reset: krok;
    list-style: none;
    padding: 0;
    margin: 1rem 0 2.2rem;
    display: grid;
    gap: .8rem;
}
.kroki li {
    counter-increment: krok;
    position: relative;
    padding: 1rem 1.2rem 1.1rem 4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-left: 3px solid var(--accent);
    font-size: .95rem;
    color: var(--muted);
}
.kroki li::before {
    content: counter(krok);
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
.kroki strong { display: block; color: var(--text); margin-bottom: .2rem; font-size: 1.02rem; }

/* --- Pas wyróżniony --- */
.pas-wyroznik {
    margin: 2rem 0;
    padding: 1.8rem 2rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.pas-wyroznik h2 { margin-top: 0; border: none; padding: 0; }

/* --- Formularz zapytania na stronie działu --- */
.pas-formularz {
    margin: 2.2rem 0;
    padding: 1.8rem 2rem;
    border-radius: 16px;
    background: #fff;
    border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.pas-formularz h2 { margin-top: 0; border: none; padding: 0; }
.pas-formularz-lead { color: var(--muted); max-width: 62ch; margin-bottom: 1.2rem; }

.formularz-zapytania .pole-grupa {
    margin: 1rem 0;
    padding: .9rem 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.formularz-zapytania legend {
    padding: 0 .4rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
}
.radio-linia {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .35rem 0;
    font-size: .93rem;
    cursor: pointer;
    line-height: 1.45;
}
.radio-linia input { margin-top: .2rem; flex-shrink: 0; }
.radio-linia:hover { color: var(--accent); }
.cf-info { margin-top: .8rem; font-size: .88rem; color: var(--muted); }

@media (max-width: 560px) {
    .pas-formularz { padding: 1.2rem 1.1rem; }
}

/* --- Pas z wezwaniem do kontaktu --- */
.pas-cta {
    margin: 2.4rem 0 .5rem;
    padding: 2rem 2.2rem;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    /* Odwrócona kolejność barw względem pasa powitalnego — ta sama paleta,
       ale strona nie wygląda na sklejoną z dwóch identycznych klocków. */
    background: linear-gradient(120deg, #16a34a 0%, #0d9488 50%, #1d4ed8 100%);
    box-shadow: 0 12px 34px rgba(22, 163, 74, .22);
}
.pas-cta .przycisk-glowny { color: #0d9488; }
.pas-cta h2 { color: #fff; border: none; padding: 0; margin: 0 0 .5rem; }
.pas-cta p { margin: 0 auto 1.3rem; max-width: 52ch; color: color-mix(in srgb, #fff 88%, transparent); }
.pas-cta .hero-akcje { justify-content: center; }
.pas-cta .przycisk-glowny { background: #fff; color: var(--accent); box-shadow: none; }
.pas-cta .przycisk-drugi { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }

@media (max-width: 560px) {
    .pas-hero, .pas-wyroznik, .pas-cta { padding: 1.4rem 1.2rem; }
    .kroki li { padding: .9rem 1rem .9rem 3.4rem; }
    .kroki li::before { left: .8rem; }
}

/* --- Strona działu: wstęp i kafle podstron --- */
.dzial-wstep {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--text);
    max-width: 70ch;
    margin-bottom: 1.4rem;
}
.dzial-kontakt {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    font-size: .93rem;
    color: var(--muted);
}

.kafle-dzialu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
}
.kafel-dzialu {
    --k: var(--accent);
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.3rem 1.1rem;
    border-radius: 13px;
    text-decoration: none;
    color: var(--text);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
    border-left: 4px solid var(--k);
    transition: transform .13s, box-shadow .14s, border-color .14s;
}
.kafel-dzialu:hover {
    transform: translateY(-2px);
    border-color: var(--k);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
}
.kafel-dzialu-tytul {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .4rem;
    color: color-mix(in srgb, var(--k) 76%, #0f172a);
}
.kafel-dzialu-opis {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: .8rem;
}
.kafel-dzialu-wiecej {
    margin-top: auto;
    font-size: .85rem;
    font-weight: 700;
    color: var(--k);
}

/* --- Lista odnośników na stronie działu --- */
.dzial-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .5rem .9rem;
    margin: .5rem 0 0;
}
.dzial-lista li { margin: 0; }
.dzial-lista a {
    display: block;
    padding: .65rem .9rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    transition: background .15s, border-color .15s;
}
.dzial-lista a:hover {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border-color: var(--accent);
}