/*
 * IUSpro - strona publiczna. Jeden plik, zero frameworków.
 *
 * Paleta wyprowadzona z logo: indygo #2A264A, czerń z fioletowym odcieniem,
 * grafitowo-fioletowe szarości, akcent #7813FE używany oszczędnie (podkreślenia,
 * kursywa akcentowa, focus). Nagłówki: serif redakcyjny (Georgia); tekst: sans
 * systemowy. Świadomie jedna sekcja "kartowa" (specjalizacje) - reszta to
 * kompozycje redakcyjne: łamy, linie włosowe, numeracja, asymetrie.
 */

:root {
    --atrament: #0f0d1a;
    --granat: #2a264a;
    --granat-2: #38335f;
    --grafit: #515068;
    --mgla: #807f91;
    --linia: #e3e1ea;
    --linia-ciemna: rgba(255, 255, 255, 0.14);
    --papier: #f7f6f2;
    --biel: #ffffff;
    --fiolet: #7813fe;
    --fiolet-cien: rgba(120, 19, 254, 0.28);
    --serif: Georgia, 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --kontener: 1240px;
    --naglowek-h: 76px;
}

/* ── Fundament ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--atrament);
    background: var(--biel);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.35rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--fiolet); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--granat); color: var(--biel); }

.kontener { max-width: var(--kontener); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
/* Szpalta tekstu ma 780 px TREŚCI, nie 780 px razem z oddechem kontenera -
   inaczej nagłówek posta (w tym kontenerze) zaczynałby się o szerokość
   paddingu dalej niż akapity poniżej (w .artykul-tresc). Ta sama liczba
   w obu miejscach to jedyny sposób, żeby lewa krawędź się zgadzała. */
.kontener--tekst { max-width: calc(780px + 2 * clamp(20px, 4vw, 48px)); }

.pomin {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--atrament); color: var(--biel); padding: 10px 18px; border-radius: 0 0 8px 0;
}
.pomin:focus { left: 0; }

/* ── Typograficzne drobiazgi ───────────────────────────────────────────── */
.zapowiedz {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--grafit); margin-bottom: 1.1em;
    display: flex; align-items: center; gap: 14px;
}
.zapowiedz::before { content: ''; width: 34px; height: 1px; background: var(--fiolet); flex-shrink: 0; }
.zapowiedz--jasna { color: rgba(255, 255, 255, 0.72); }

.odsylacz-strzalka {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--granat);
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size 0.25s ease, color 0.2s ease;
    padding-bottom: 2px;
}
.odsylacz-strzalka::after { content: '→'; transition: transform 0.25s ease; }
.odsylacz-strzalka:hover { background-size: 100% 1px; color: var(--fiolet); }
.odsylacz-strzalka:hover::after { transform: translateX(4px); }

/* ── Przyciski ─────────────────────────────────────────────────────────── */
.przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--granat); color: var(--biel);
    border: 1px solid var(--granat); border-radius: 8px;
    padding: 13px 26px; font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.przycisk:hover { background: var(--atrament); border-color: var(--atrament); transform: translateY(-1px); box-shadow: 0 6px 18px -8px var(--fiolet-cien); }
.przycisk:active { transform: translateY(0); }
.przycisk--duzy { padding: 16px 34px; font-size: 1rem; }
.przycisk--maly { padding: 9px 18px; font-size: 0.88rem; }
.przycisk--bialy { background: var(--biel); color: var(--atrament); border-color: var(--linia); }
.przycisk--bialy:hover { background: var(--biel); color: var(--atrament); border-color: var(--grafit); box-shadow: none; }

/* ── Nagłówek ──────────────────────────────────────────────────────────── */
/* Belka i mega menu idą na CAŁĄ szerokość okna - treść strony zostaje
   w kontenerze 1240 px, ale nawigacja korzysta z dużych ekranów: odstępy
   od krawędzi i między kolumnami rosną płynnie z viewportem (clamp),
   więc ciasny laptop ma zwarty układ, a szeroki monitor dostaje powietrze. */
.naglowek .kontener.naglowek-wiersz,
.mega .kontener.mega-siatka {
    max-width: none;
    padding-left: clamp(20px, 4.5vw, 128px);
    padding-right: clamp(20px, 4.5vw, 128px);
}
.naglowek {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.naglowek--przewinieta { border-color: var(--linia); box-shadow: 0 8px 30px -18px rgba(15, 13, 26, 0.25); }
.naglowek-wiersz { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 52px); height: var(--naglowek-h); }
.naglowek-logo { flex-shrink: 0; display: flex; }
.naglowek-logo img { height: 30px; width: auto; }

.naglowek-menu { margin-left: 8px; }
.naglowek-menu > ul { display: flex; gap: 4px; align-items: center; }
.menu-odsylacz {
    display: inline-flex; align-items: center; gap: 6px;
    /* line-height jawnie: <button> ma domyślnie inny niż <a> dziedziczący
       z body i pozycja „Usługi" odstawała w pionie od reszty menu. */
    padding: 9px 14px; font-size: 0.95rem; line-height: 1.6; font-weight: 500; color: var(--atrament);
    text-decoration: none; background: none; border: 0; border-radius: 8px;
    font-family: var(--sans); cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.menu-odsylacz:hover { background: var(--papier); color: var(--granat); }
.menu-przycisk svg { transition: transform 0.2s ease; }
.ma-mega:hover .menu-przycisk svg, .menu-przycisk[aria-expanded="true"] svg { transform: rotate(180deg); }

.naglowek-akcje { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.naglowek-jezyk {
    display: inline-flex; gap: 6px; font-size: 0.82rem; font-weight: 600;
    color: var(--mgla); text-decoration: none; letter-spacing: 0.04em;
}
.naglowek-jezyk .jezyk-aktywny { color: var(--atrament); }
.naglowek-jezyk:hover span:not(.jezyk-aktywny) { color: var(--fiolet); }
.naglowek-tel { font-weight: 600; font-size: 0.94rem; text-decoration: none; color: var(--granat); font-variant-numeric: tabular-nums; }
.naglowek-tel:hover { color: var(--fiolet); }

/* ── Mega menu ─────────────────────────────────────────────────────────── */
.ma-mega { position: static; }
.mega {
    position: absolute; left: 0; right: 0; top: var(--naglowek-h);
    background: var(--biel); border-top: 1px solid var(--linia);
    box-shadow: 0 32px 60px -32px rgba(15, 13, 26, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.ma-mega:hover .mega, .ma-mega:focus-within .mega, .mega.otwarte {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.mega-siatka {
    display: grid; grid-template-columns: repeat(4, 1fr) 0.9fr;
    gap: clamp(20px, 3.2vw, 96px); padding-top: 36px; padding-bottom: 42px;
}
.mega-tytul {
    display: block; font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
    color: var(--atrament); text-decoration: none; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--linia);
}
a.mega-tytul:hover { color: var(--fiolet); }
.mega-kolumna ul { display: flex; flex-direction: column; gap: 2px; }
.mega-kolumna ul a {
    display: block; padding: 5px 0; font-size: 0.88rem; color: var(--grafit);
    text-decoration: none; transition: color 0.15s ease, padding-left 0.15s ease;
}
.mega-kolumna ul a:hover { color: var(--atrament); padding-left: 4px; }
.mega-wyrozniony { color: var(--granat) !important; font-weight: 600; }
.mega-zajawka { font-size: 0.86rem; color: var(--grafit); }
.mega-kolumna--wybrane { background: var(--papier); margin: -14px; padding: 14px 18px 18px; border-radius: 10px; align-self: start; }
.mega-tytul--bez { border-bottom: 0; margin-bottom: 8px; }
.mega-wybrany { font-weight: 600; color: var(--granat) !important; }
.mega-wybrany:hover { color: var(--fiolet) !important; }

/* ── Menu mobilne ──────────────────────────────────────────────────────── */
.naglowek-burger { display: none; }
.mobilne { display: none; }

@media (max-width: 1080px) {
    .naglowek-menu, .naglowek-tel, .naglowek-akcje .przycisk { display: none; }
    .naglowek-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer;
    }
    .naglowek-burger span { display: block; height: 2px; background: var(--atrament); transition: transform 0.25s ease, opacity 0.2s ease; }
    .naglowek-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .naglowek-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .mobilne {
        display: block; position: fixed; inset: var(--naglowek-h) 0 0;
        background: var(--biel); overflow-y: auto; z-index: 99;
        padding: 18px clamp(20px, 4vw, 48px) 40px;
    }
    .mobilne[hidden] { display: none; }
    .mobilne > ul > li { border-bottom: 1px solid var(--linia); }
    .mobilne a, .mobilne summary {
        display: block; padding: 15px 4px; font-size: 1.05rem; font-weight: 500;
        text-decoration: none; color: var(--atrament); cursor: pointer;
    }
    .mobilne summary { list-style: none; position: relative; }
    .mobilne summary::-webkit-details-marker { display: none; }
    .mobilne summary::after { content: '+'; position: absolute; right: 8px; color: var(--mgla); }
    .mobilne details[open] summary::after { content: '−'; }
    .mobilne details ul { padding: 0 0 12px 16px; }
    .mobilne details ul a { font-size: 0.94rem; font-weight: 400; color: var(--grafit); padding: 8px 0; }
    .mobilne-akcje { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero::before {
    /* Pionowa linia siatki redakcyjnej - subtelny podpis kompozycji. */
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: linear-gradient(var(--linia), transparent); pointer-events: none;
}
.hero-siatka {
    display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 6vw, 90px);
    align-items: center; padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 110px);
}
.hero-tytul { margin: 0 0 0.45em; }
.hero-tytul em { font-style: italic; color: var(--granat); position: relative; }
.hero-tytul em::after {
    content: ''; position: absolute; left: 2px; right: 2px; bottom: 0.04em;
    height: 3px; background: var(--fiolet); opacity: 0.85;
}
.hero-opis { font-size: 1.16rem; color: var(--grafit); max-width: 34em; margin-bottom: 1.8em; }
.hero-akcje { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-tel { margin-top: 2.2em; font-size: 0.92rem; color: var(--mgla); }
.hero-tel a { font-weight: 700; color: var(--granat); text-decoration: none; font-variant-numeric: tabular-nums; }
.hero-tel a:hover { color: var(--fiolet); }
.hero-foto { position: relative; }
.hero-foto .foto { box-shadow: 28px 28px 0 -1px var(--papier), 29px 29px 0 0 var(--linia); }

/* ── Placeholder fotografii ────────────────────────────────────────────── */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--granat); }
.foto--szeroki { aspect-ratio: 16 / 10; }
.foto--pion { aspect-ratio: 4 / 5; }
.foto--kwadrat { aspect-ratio: 1; }
.foto--portret { aspect-ratio: 3 / 4; }
.foto-warstwa {
    position: absolute; inset: 0;
    background:
        radial-gradient(120% 90% at 85% 10%, rgba(120, 19, 254, 0.32), transparent 55%),
        radial-gradient(90% 110% at 10% 95%, rgba(58, 68, 233, 0.25), transparent 60%),
        linear-gradient(155deg, #353060 0%, var(--granat) 45%, var(--atrament) 100%);
}
.foto-warstwa::after {
    content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, 0.14);
}
.foto figcaption {
    position: absolute; left: 34px; right: 34px; bottom: 30px;
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55); line-height: 1.6;
}

/* ── Sekcje ────────────────────────────────────────────────────────────── */
.sekcja { padding: clamp(64px, 10vw, 132px) 0; }
.sekcja--papier { background: var(--papier); }
.sekcja--ciemna { background: var(--atrament); color: var(--biel); }
.sekcja--ciemna .zapowiedz { color: rgba(255, 255, 255, 0.6); }
.sekcja--ciemna .sekcja-opis { color: rgba(255, 255, 255, 0.68); }
.sekcja-naglowek { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.sekcja-naglowek--wiersz {
    max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
}
.sekcja-opis { font-size: 1.12rem; color: var(--grafit); }
.sekcja-tytul { margin-bottom: 0.9em; }

/* ── Zaufanie: manifest + numerowana lista (układ dzielony, nie karty) ── */
.kontener:has(> .zaufanie-siatka) {
    display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 100px);
    align-items: start;
}
.kontener:has(> .zaufanie-siatka) .sekcja-naglowek { position: sticky; top: calc(var(--naglowek-h) + 32px); margin-bottom: 0; }
.zaufanie-siatka { counter-reset: zaufanie; }
.zaufanie-punkt { counter-increment: zaufanie; position: relative; padding: 26px 0 22px 74px; border-top: 1px solid var(--linia); }
.zaufanie-punkt:last-child { border-bottom: 1px solid var(--linia); }
.zaufanie-punkt::before {
    content: counter(zaufanie, decimal-leading-zero);
    position: absolute; left: 0; top: 24px;
    font-family: var(--serif); font-style: italic; font-size: 1.7rem; color: var(--mgla);
    transition: color 0.25s ease;
}
.zaufanie-punkt:hover::before { color: var(--fiolet); }
.zaufanie-punkt h3, .zaufanie-punkt h2 { font-size: 1.22rem; margin-bottom: 0.35em; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
.zaufanie-punkt p { color: var(--grafit); font-size: 0.98rem; margin: 0; }

/* ── Specjalizacje: jedyna sekcja panelowa - ciemna, ostre krawędzie ──── */
.filary-siatka {
    display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--linia-ciemna);
}
.filar-karta {
    position: relative; padding: clamp(28px, 3.6vw, 52px);
    text-decoration: none; color: inherit;
    border: 0 solid var(--linia-ciemna);
    transition: background 0.25s ease;
}
.filar-karta:nth-child(odd) { border-right-width: 1px; }
.filar-karta:nth-child(-n+2) { border-bottom-width: 1px; }
.filar-karta:hover { background: rgba(255, 255, 255, 0.045); }
.filar-karta h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); margin-bottom: 0.4em; }
.filar-karta > p { color: rgba(255, 255, 255, 0.66); font-size: 0.97rem; max-width: 34em; }
.filar-karta-uslugi { margin: 18px 0 26px; display: flex; flex-direction: column; gap: 6px; }
.filar-karta-uslugi li { font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); padding-left: 18px; position: relative; }
.filar-karta-uslugi li::before { content: '—'; position: absolute; left: 0; color: var(--fiolet); }
.filar-karta .odsylacz-strzalka { color: var(--biel); }
.filar-karta:hover .odsylacz-strzalka { color: #b78aff; background-size: 100% 1px; }
.filar-karta:hover .odsylacz-strzalka::after { transform: translateX(4px); }

/* ── Usługi flagowe: numerowany indeks redakcyjny ──────────────────────── */
.flagowe-lista { border-top: 1px solid var(--linia); }
.flagowa {
    display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: clamp(16px, 3vw, 44px);
    padding: 26px 6px; border-bottom: 1px solid var(--linia);
    text-decoration: none; color: inherit; transition: padding-left 0.25s ease, background 0.25s ease;
}
.flagowa:hover { padding-left: 18px; background: linear-gradient(90deg, var(--papier), transparent 70%); }
.flagowa-numer { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--mgla); transition: color 0.25s ease; }
.flagowa:hover .flagowa-numer { color: var(--fiolet); }
.flagowa-tekst { display: flex; flex-direction: column; gap: 3px; }
.flagowa-tekst strong { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.01em; }
.flagowa-tekst > span { color: var(--grafit); font-size: 0.94rem; }
.flagowa-strzalka { font-size: 1.4rem; color: var(--mgla); transition: transform 0.25s ease, color 0.25s ease; }
.flagowa:hover .flagowa-strzalka { transform: translateX(6px); color: var(--granat); }

/* ── Proces: cztery kroki na wspólnej linii ────────────────────────────── */
.proces-siatka {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px);
    counter-reset: proces;
}
.proces-krok { position: relative; padding-top: 26px; border-top: 1px solid var(--linia); }
.proces-krok::before { content: ''; position: absolute; top: -1px; left: 0; width: 44px; height: 3px; background: var(--fiolet); }
.proces-numer {
    display: block; font-family: var(--serif); font-style: italic;
    font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--linia);
    -webkit-text-stroke: 1px var(--mgla); color: transparent;
    margin-bottom: 16px;
}
.proces-krok h3 { font-family: var(--sans); font-weight: 650; font-size: 1.12rem; letter-spacing: 0; }
.proces-krok p { color: var(--grafit); font-size: 0.95rem; margin: 0; }

/* ── Kancelaria (strona główna): łam z przesuniętą fotografią ──────────── */
.kancelaria-siatka {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 6vw, 96px); align-items: center;
}
.kancelaria-foto .foto { box-shadow: -24px 24px 0 -1px var(--papier), -25px 25px 0 0 var(--linia); }

/* ── Wiedza: artykuł prowadzący + dwa mniejsze ─────────────────────────── */
.artykuly-siatka { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.artykul-karta {
    display: flex; flex-direction: column; gap: 10px;
    padding-top: 22px; border-top: 1px solid var(--atrament);
    text-decoration: none; color: inherit;
}
.artykul-karta time { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mgla); }
.artykul-karta h3 { font-size: 1.3rem; margin: 0; transition: color 0.2s ease; }
.artykul-karta:first-child h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.artykul-karta:hover h3 { color: var(--fiolet); }
.artykul-karta p { color: var(--grafit); font-size: 0.94rem; margin: 0; flex: 1; }
.artykul-karta .odsylacz-strzalka { font-size: 0.88rem; }

/* ── Kontakt / konwersja: ciemny łam z poświatą, formularz uniesiony ──── */
.sekcja--kontakt {
    background:
        radial-gradient(90% 120% at 90% 0%, rgba(120, 19, 254, 0.22), transparent 55%),
        linear-gradient(160deg, var(--granat) 0%, var(--atrament) 70%);
    color: var(--biel);
}
.sekcja--kontakt .sekcja-opis { color: rgba(255, 255, 255, 0.72); }
.kontakt-siatka { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.kontakt-dane { margin-top: 2em; display: flex; flex-direction: column; gap: 10px; }
.kontakt-dane a { color: var(--biel); font-size: 1.3rem; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.kontakt-dane a:hover { color: #b78aff; }
.kontakt-dane--ciemne a { color: var(--atrament); }
.kontakt-dane--ciemne a:hover { color: var(--fiolet); }
.kontakt-dane li { color: rgba(255, 255, 255, 0.75); }
.kontakt-dane--ciemne li { color: var(--grafit); }

.kontakt-formularz .formularz-obszar {
    background: var(--biel); color: var(--atrament);
    padding: clamp(24px, 3vw, 44px); border-radius: 12px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
}

/* ── Formularz ─────────────────────────────────────────────────────────── */
.formularz-wiersz { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pole { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }
.pole label { font-size: 0.84rem; font-weight: 600; }
.pole input, .pole select, .pole textarea {
    font-family: var(--sans); font-size: 0.97rem; color: var(--atrament);
    background: var(--biel); border: 1px solid var(--linia); border-radius: 8px;
    padding: 12px 14px; width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pole textarea { resize: vertical; min-height: 120px; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
    outline: none; border-color: var(--granat); box-shadow: 0 0 0 3px rgba(42, 38, 74, 0.12);
}
.pole small { color: var(--mgla); font-size: 0.8rem; }
.pole--zgoda { flex-direction: row; align-items: flex-start; gap: 10px; }
.pole--zgoda label { font-weight: 400; font-size: 0.78rem; color: var(--grafit); line-height: 1.5; }
.pole--zgoda input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--granat); }
.formularz-pulapka { position: absolute; left: -9999px; top: -9999px; }
.formularz-blad { color: #b3261e; font-size: 0.9rem; font-weight: 600; }
.formularz-sukces h3 { font-size: 1.4rem; }
.formularz-sukces .naglowek-tel { font-size: 1.15rem; }
.formularz .przycisk { width: 100%; }

/* ── Podstrony: hero pomniejszone ──────────────────────────────────────── */
.podhero { padding: clamp(30px, 5vw, 60px) 0 clamp(28px, 4vw, 52px); border-bottom: 1px solid var(--linia); margin-bottom: clamp(36px, 5vw, 64px); }
.podhero--blad { border: 0; padding: clamp(80px, 14vh, 160px) 0; }
.podhero-siatka { max-width: 860px; }
.podhero-opis { font-size: 1.14rem; color: var(--grafit); max-width: 40em; }
.podhero .hero-akcje { margin-top: 1.6em; }

.okruszki { margin-bottom: 26px; }
.okruszki ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; color: var(--mgla); }
.okruszki li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--linia); }
.okruszki a { color: var(--mgla); text-decoration: none; }
.okruszki a:hover { color: var(--fiolet); }
.okruszki [aria-current] { color: var(--grafit); }

/* ── Szablon usługi ────────────────────────────────────────────────────── */
.usluga-uklad {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(36px, 5vw, 80px); align-items: start;
    /* Ostatnia sekcja treści dotykała ciemnego łamu kontaktu - siatka nie ma
       marginesu dolnego, a sekcje mają tylko górny. */
    padding-bottom: clamp(48px, 7vw, 96px);
}
.usluga-wstep { font-size: 1.12rem; color: var(--grafit); max-width: 44em; }
.usluga-wstep:first-of-type { font-size: 1.22rem; color: var(--atrament); }
.usluga-sekcja { margin-top: clamp(36px, 5vw, 60px); }
.usluga-sekcja h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.usluga-sekcja p { color: var(--grafit); max-width: 44em; }

.wyroznik {
    margin: clamp(28px, 4vw, 44px) 0; padding: clamp(22px, 3vw, 36px);
    background: var(--papier); border-left: 3px solid var(--fiolet);
}
.wyroznik h2 { font-size: 1.2rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
.wyroznik--artykul { margin-top: clamp(40px, 6vw, 64px); }
.zakres-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.zakres-lista li { position: relative; padding-left: 22px; font-size: 0.96rem; }
.zakres-lista li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 10px; height: 1px; background: var(--fiolet); }

.cytat {
    font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5;
    color: var(--granat); border-left: 3px solid var(--fiolet);
    padding: 6px 0 6px 24px; margin: 1.6em 0; max-width: 34em;
}

.faq { border-top: 1px solid var(--linia); }
.faq-pozycja { border-bottom: 1px solid var(--linia); }
.faq-pozycja summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 18px 44px 18px 0; font-weight: 600; font-size: 1.02rem;
}
.faq-pozycja summary::-webkit-details-marker { display: none; }
.faq-pozycja summary::after {
    content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--serif); font-size: 1.5rem; color: var(--mgla); transition: transform 0.2s ease, color 0.2s ease;
}
.faq-pozycja[open] summary::after { content: '−'; color: var(--fiolet); }
.faq-pozycja summary:hover::after { color: var(--fiolet); }
.faq-pozycja p { padding: 0 0 20px; margin: 0; color: var(--grafit); max-width: 46em; }

.powiazane-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.powiazana {
    display: flex; flex-direction: column; gap: 4px; padding: 18px 20px;
    border: 1px solid var(--linia); border-radius: 10px; text-decoration: none; color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.powiazana:hover { border-color: var(--granat); transform: translateY(-2px); }
.powiazana strong { font-size: 0.98rem; }
.powiazana span { font-size: 0.85rem; color: var(--grafit); }

/*
 * ⚠️ `align-self: stretch` jest warunkiem działania sticky w środku.
 *
 * Siatka `.usluga-uklad` ma `align-items: start`, więc kolumna boczna
 * przyjmowała wysokość swojej zawartości - czyli dokładnie tyle, ile ma
 * ramka. Element przyklejony nie miał w czym jechać: `position: sticky`
 * przewija się w granicach RODZICA, a rodzic kończył się razem z nim.
 * Efekt był taki, jakby sticky w ogóle nie zadziałało, choć było ustawione.
 *
 * Rozciągnięcie tylko tej kolumny, nie zmiana `align-items` na całej siatce -
 * kolumna z treścią ma zostać wyrównana do góry.
 */
.usluga-bok { position: relative; align-self: stretch; }
.plywajaca {
    position: sticky; top: calc(var(--naglowek-h) + 28px);
    display: flex; flex-direction: column; gap: 10px;
    padding: 26px; background: var(--papier); border-radius: 12px;
    border-top: 3px solid var(--granat);
}
.plywajaca h2 { font-size: 1.12rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; margin-bottom: 0; }
.plywajaca p { font-size: 0.88rem; color: var(--grafit); margin-bottom: 8px; }

.pasek-mobilny { display: none; }
@media (max-width: 900px) {
    .usluga-uklad { grid-template-columns: 1fr; }
    .usluga-bok { display: none; }
    .pasek-mobilny {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
        display: grid; grid-template-columns: 1fr 1fr;
        background: var(--biel); border-top: 1px solid var(--linia);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .pasek-mobilny a {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 15px 10px; font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--atrament);
    }
    .pasek-mobilny--glowny { background: var(--granat); color: var(--biel) !important; }
    body[data-page-type="usluga"] { padding-bottom: 56px; }
}

/* ── Filar ─────────────────────────────────────────────────────────────── */
.filar-wstep { font-size: 1.14rem; color: var(--grafit); max-width: 46em; margin-bottom: clamp(30px, 4vw, 48px); }
.filar-indeks { border-top: 1px solid var(--linia); margin-bottom: clamp(36px, 5vw, 60px); }
.indeks-pozycja {
    display: grid; grid-template-columns: minmax(200px, 0.9fr) 1.4fr auto; gap: clamp(14px, 3vw, 40px);
    align-items: center; padding: 20px 6px; border-bottom: 1px solid var(--linia);
    text-decoration: none; color: inherit; transition: padding-left 0.25s ease, background 0.25s ease;
}
.indeks-pozycja:hover { padding-left: 16px; background: linear-gradient(90deg, var(--papier), transparent 70%); }
.indeks-pozycja strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.indeks-pozycja > span:not(.flagowa-strzalka) { font-size: 0.9rem; color: var(--grafit); }
.indeks-pozycja:hover .flagowa-strzalka { transform: translateX(6px); color: var(--granat); }
.filar-faq { margin-bottom: clamp(36px, 5vw, 60px); }

/* ── Kancelaria (podstrona) ────────────────────────────────────────────── */
.kancelaria-wstep { font-size: 1.16rem; color: var(--grafit); max-width: 46em; margin-bottom: clamp(30px, 4vw, 48px); }
.kancelaria-foto-pelna { margin-bottom: clamp(36px, 5vw, 64px); }
.wartosci-siatka { margin-bottom: clamp(44px, 6vw, 80px); }
.wartosci-siatka .zaufanie-punkt:first-child { border-top: 1px solid var(--linia); }
.zespol { margin-bottom: clamp(44px, 6vw, 80px); }
.zespol-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.osoba h3 { font-size: 1.2rem; margin: 18px 0 2px; }
.osoba-rola { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mgla); margin-bottom: 10px; }
.osoba p:last-of-type { font-size: 0.92rem; color: var(--grafit); }
.osoba-mail { display: inline-block; margin-top: 4px; font-size: 0.86rem; font-weight: 600; color: var(--granat); text-decoration: none; }
.osoba-mail:hover { color: var(--fiolet); text-decoration: underline; }

/* ── Kontakt (podstrona) ───────────────────────────────────────────────── */
.kontakt-strona { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); margin-bottom: clamp(48px, 7vw, 100px); align-items: start; }
.kontakt-blok { padding: 24px 0; border-top: 1px solid var(--linia); }
.kontakt-blok h2 { font-size: 1.2rem; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
.kontakt-blok p { color: var(--grafit); font-size: 0.96rem; }
/* Beleczka pilna: nad formularzem, ta sama szerokość, inny odcień tła -
   ma być zauważona, ale nie konkurować z formularzem o uwagę. */
.beleczka-pilna {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 12px 18px; border-radius: 12px 12px 0 0;
    /* Ten sam papier co formularz, tylko o włos ciemniejszy - beleczka ma się
       odcinać jako osobny pasek, a nie jako obcy kolor. */
    background: #efeee9; border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    font-size: 0.86rem; line-height: 1.55;
}
.beleczka-pilna strong { color: var(--atrament); white-space: nowrap; }
.beleczka-pilna > span { color: var(--grafit); flex: 1 1 240px; }
.beleczka-pilna a { font-weight: 700; color: var(--granat); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleczka-pilna a:hover { color: var(--fiolet); text-decoration: underline; }
.beleczka-pilna { position: relative; overflow: hidden; }
.beleczka-ikona {
    position: absolute; right: 10px; bottom: -14px;
    width: 88px; height: 88px; color: var(--granat); opacity: 0.07;
    pointer-events: none;
}
@media (max-width: 620px) { .beleczka-ikona { display: none; } }
/* Formularz dokleja się do beleczki - stąd ścięte górne rogi. */
.beleczka-pilna + .formularz-obszar { border-radius: 0 0 12px 12px !important; }
.kontakt-strona-formularz .formularz-obszar {
    background: var(--papier); padding: clamp(24px, 3vw, 40px); border-radius: 12px;
}

/* ── Blog ──────────────────────────────────────────────────────────────── */
.blog-kategorie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.blog-kategorie a {
    padding: 7px 16px; border: 1px solid var(--linia); border-radius: 999px;
    font-size: 0.86rem; font-weight: 500; text-decoration: none; color: var(--grafit);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.blog-kategorie a:hover { border-color: var(--granat); color: var(--atrament); }
.blog-kategorie a[aria-current] { background: var(--granat); border-color: var(--granat); color: var(--biel); }
.blog-lista { border-top: 1px solid var(--linia); margin-bottom: clamp(48px, 7vw, 100px); }
.artykul-wiersz {
    display: grid; grid-template-columns: 150px 1fr auto; gap: clamp(16px, 3vw, 44px);
    align-items: baseline; padding: 26px 6px; border-bottom: 1px solid var(--linia);
    text-decoration: none; color: inherit; transition: padding-left 0.25s ease, background 0.25s ease;
}
.artykul-wiersz:hover { padding-left: 16px; background: linear-gradient(90deg, var(--papier), transparent 70%); }
.artykul-wiersz time { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mgla); }
.artykul-wiersz-tekst { display: flex; flex-direction: column; gap: 4px; }
.artykul-wiersz-tekst strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.artykul-wiersz-tekst > span { color: var(--grafit); font-size: 0.94rem; }
.artykul-wiersz:hover .flagowa-strzalka { transform: translateX(6px); color: var(--granat); }
.blog-pusto { color: var(--grafit); padding: 40px 0 80px; }

/* ── Paginacja listingu ────────────────────────────────────────────────── */
/* Sterowanie po lewej, licznik po prawej, jeden wiersz. */
.blog-lista + .paginacja-pas { margin-top: -36px; }
.paginacja-pas {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; padding-top: 28px;
    margin-bottom: clamp(48px, 7vw, 100px);
}
.paginacja { display: flex; align-items: center; gap: 10px; }
.paginacja-numery { display: flex; align-items: center; gap: 6px; }
.paginacja-numer {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px;
    border: 1px solid transparent; font-size: 0.92rem; font-weight: 500;
    text-decoration: none; color: var(--grafit);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
a.paginacja-numer:hover { border-color: var(--granat); color: var(--atrament); }
.paginacja-numer[aria-current] { background: var(--granat); border-color: var(--granat); color: var(--biel); }
.paginacja-przerwa { color: var(--mgla); padding: 0 2px; }
.paginacja-skok {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border: 1px solid var(--linia); border-radius: 999px;
    font-size: 0.9rem; font-weight: 500; text-decoration: none; color: var(--grafit);
    transition: border-color 0.2s ease, color 0.2s ease;
}
a.paginacja-skok:hover { border-color: var(--granat); color: var(--atrament); }
/* Krańce zostają na swoich miejscach, żeby numery nie skakały w bok. */
.paginacja-nieczynny { opacity: 0.32; }
.paginacja-podpis {
    color: var(--mgla); font-size: 0.84rem; letter-spacing: 0.08em;
    text-transform: uppercase; margin: 0; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
    .paginacja-pas { justify-content: center; }
    .paginacja { flex-wrap: wrap; justify-content: center; width: 100%; }
    .paginacja-numery { order: -1; width: 100%; justify-content: center; }
    .paginacja-skok { flex: 1 1 0; justify-content: center; }
}

.artykul-tresc { padding-bottom: clamp(48px, 7vw, 100px); }
.artykul-tresc h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-top: 1.8em; }
.artykul-tresc p { color: #3c3a4d; }

/* ── Stopka ────────────────────────────────────────────────────────────── */
.stopa { background: var(--atrament); color: rgba(255, 255, 255, 0.75); padding: clamp(48px, 7vw, 88px) 0 0; }
.stopa-siatka {
    display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 64px);
}
.stopa-marka img { filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 18px; }
.stopa-marka p { font-size: 0.92rem; max-width: 26em; color: rgba(255, 255, 255, 0.6); }
.stopa-kolumna h2 {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
    margin-bottom: 16px;
}
.stopa-kolumna ul { display: flex; flex-direction: column; gap: 9px; }
.stopa-kolumna a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.stopa-kolumna a:hover { color: #b78aff; }
.stopa-kolumna li { font-size: 0.92rem; }
.stopa-prawna {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 22px 0; border-top: 1px solid var(--linia-ciemna);
    font-size: 0.82rem; color: rgba(255, 255, 255, 0.45);
}
.stopa-prawna-linki { display: flex; gap: 22px; }
.stopa-prawna-linki a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.stopa-prawna-linki a:hover { color: #b78aff; }

/* ── Baner cookies ─────────────────────────────────────────────────────── */
.ciastka {
    position: fixed; left: 20px; bottom: 20px; z-index: 150; max-width: 420px;
    background: var(--biel); border: 1px solid var(--linia); border-radius: 12px;
    padding: 20px 22px; box-shadow: 0 24px 60px -24px rgba(15, 13, 26, 0.4);
}
.ciastka p { font-size: 0.85rem; color: var(--grafit); margin-bottom: 14px; }
.ciastka a { color: var(--granat); }
.ciastka-akcje { display: flex; gap: 10px; justify-content: flex-end; }

/* ══ Dopracowanie strony głównej - warstwa redakcyjna ══════════════════ */

/* Kotwice nie chowają się pod przyklejonym nagłówkiem. */
[id] { scroll-margin-top: calc(var(--naglowek-h) + 24px); }

/* Hero: fotografia zachodzi na sekcję zaufania - kompozycje się zazębiają,
   zamiast stać w osobnych pudełkach. */
@media (min-width: 1081px) {
    .hero-siatka { padding-bottom: 0; align-items: start; }
    .hero-tekst { padding: clamp(24px, 6vh, 72px) 0 clamp(64px, 10vh, 120px); }
    .hero-foto { margin-bottom: -72px; transform: translateX(clamp(0px, 2vw, 28px)); }
    .hero + .sekcja { padding-top: clamp(96px, 12vw, 160px); }
}

/* Znak wodny: wielki paragraf serif w tle hero - typograficzny, nie obrazkowy.
   Polskie prawo mówi paragrafami; to nasz odpowiednik herbu, bez togi i wagi. */
.hero { isolation: isolate; }
.hero::after {
    content: '§'; position: absolute; z-index: -1; right: -0.06em; top: -0.18em;
    font-family: var(--serif); font-size: clamp(20rem, 38vw, 34rem); line-height: 1;
    color: var(--papier); pointer-events: none; user-select: none;
}
@media (max-width: 1080px) { .hero::after { display: none; } }

/* Duże liczebniki-widma w narożnikach paneli specjalizacji. */
.filar-karta { counter-increment: filary; overflow: hidden; }
.filary-siatka { counter-reset: filary; }
.filar-karta::after {
    content: counter(filary, decimal-leading-zero);
    position: absolute; right: 18px; bottom: -22px;
    font-family: var(--serif); font-style: italic; font-size: 6.5rem; line-height: 1;
    color: rgba(255, 255, 255, 0.05); pointer-events: none;
    transition: color 0.3s ease, transform 0.3s ease;
}
.filar-karta:hover::after { color: rgba(120, 19, 254, 0.18); transform: translateY(-6px); }

/* Kaskada odsłon w siatkach - sekcja wchodzi falą, nie tąpnięciem. */
html.ma-js .zaufanie-punkt:nth-child(2).widoczne { transition-delay: 0.08s; }
html.ma-js .zaufanie-punkt:nth-child(3).widoczne { transition-delay: 0.16s; }
html.ma-js .zaufanie-punkt:nth-child(4).widoczne { transition-delay: 0.24s; }
html.ma-js .filar-karta:nth-child(2).widoczne { transition-delay: 0.08s; }
html.ma-js .filar-karta:nth-child(3).widoczne { transition-delay: 0.16s; }
html.ma-js .filar-karta:nth-child(4).widoczne { transition-delay: 0.24s; }
html.ma-js .proces-krok:nth-child(2).widoczne { transition-delay: 0.1s; }
html.ma-js .proces-krok:nth-child(3).widoczne { transition-delay: 0.2s; }
html.ma-js .proces-krok:nth-child(4).widoczne { transition-delay: 0.3s; }
html.ma-js .artykul-karta:nth-child(2).widoczne { transition-delay: 0.1s; }
html.ma-js .artykul-karta:nth-child(3).widoczne { transition-delay: 0.2s; }

/* Formularz kontaktowy unosi się nad ciemnym łamem. */
@media (min-width: 1081px) {
    .kontakt-formularz { transform: translateY(-56px); }
    .sekcja--kontakt { padding-bottom: clamp(40px, 6vw, 80px); }
    html.ma-js .kontakt-formularz.odslon { transform: translateY(-40px); }
    html.ma-js .kontakt-formularz.odslon.widoczne { transform: translateY(-56px); }
}

/* Wiedza: artykuł prowadzący dostaje mocniejszą kreskę i większy oddech. */
.artykul-karta:first-child { border-top: 3px solid var(--atrament); }

/* CTA w nagłówku delikatnie pulsuje obrysem po zatrzymaniu wzroku - raz. */
.naglowek-akcje .przycisk:hover { box-shadow: 0 0 0 4px rgba(120, 19, 254, 0.14); }

/* ── Odsłanianie przy przewijaniu - tylko z JS i bez reduced motion ───── */
html.ma-js .odslon { opacity: 0; transform: translateY(16px); }
html.ma-js .odslon.widoczne { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }
html.ma-js .odslon--pozniej.widoczne { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.ma-js .odslon { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Ciasne ekrany ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .hero-siatka { grid-template-columns: 1fr; padding-top: 40px; }
    .hero::before { display: none; }
    .hero-foto { max-width: 560px; }
    .kontener:has(> .zaufanie-siatka) { grid-template-columns: 1fr; }
    .kontener:has(> .zaufanie-siatka) .sekcja-naglowek { position: static; margin-bottom: 36px; }
    .kancelaria-siatka { grid-template-columns: 1fr; }
    .artykuly-siatka { grid-template-columns: 1fr; gap: 30px; }
    .kontakt-siatka { grid-template-columns: 1fr; }
    .kontakt-strona { grid-template-columns: 1fr; }
    .zespol-siatka { grid-template-columns: 1fr; max-width: 460px; }
    .proces-siatka { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .filary-siatka { grid-template-columns: 1fr; }
    .filar-karta:nth-child(odd) { border-right-width: 0; }
    .filar-karta:not(:last-child) { border-bottom-width: 1px; }
    .proces-siatka { grid-template-columns: 1fr; }
    .formularz-wiersz { grid-template-columns: 1fr; gap: 0; }
    .zakres-lista { grid-template-columns: 1fr; }
    .powiazane-siatka { grid-template-columns: 1fr; }
    .flagowa { grid-template-columns: 54px 1fr auto; }
    .flagowa-numer { font-size: 1.4rem; }
    .indeks-pozycja, .artykul-wiersz { grid-template-columns: 1fr auto; }
    .indeks-pozycja strong { display: block; }
    .indeks-pozycja > span:not(.flagowa-strzalka) { grid-column: 1 / -1; }
    .artykul-wiersz time { grid-column: 1 / -1; }
    .stopa-siatka { grid-template-columns: 1fr 1fr; }
    .stopa-marka { grid-column: 1 / -1; }
    .ciastka { left: 12px; right: 12px; bottom: 12px; max-width: none; }
    .hero-akcje .przycisk--duzy { width: 100%; }
}

/* ══ Rozbudowa: odbiorcy, opinie, newsletter, sytuacje, zdjęcia, miasta ══ */

/* ── Dla Ciebie / Dla firm: dwie bramy, nie karty ─────────────────────── */
.odbiorcy { display: grid; gap: 1px; background: var(--linia); border-block: 1px solid var(--linia); }
@media (min-width: 780px) { .odbiorcy { grid-template-columns: 1fr 1fr; } }
.odbiorca {
    background: var(--papier); padding: clamp(26px, 3.4vw, 44px);
    text-decoration: none; color: inherit; transition: background 0.25s ease;
}
.odbiorca:hover { background: var(--biel); }
.naglowek-lamany { text-wrap: initial; }
.odbiorca-etykieta {
    display: inline-block; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    margin-bottom: 8px; letter-spacing: -0.01em; color: var(--atrament); text-decoration: none;
}
.odbiorca-etykieta:hover { color: var(--fiolet); }
.odbiorca > p { color: var(--grafit); font-size: 0.96rem; margin-bottom: 18px; }
.odbiorca ul { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.odbiorca li a {
    display: inline-block; padding: 5px 13px; border: 1px solid var(--linia);
    border-radius: 999px; background: var(--biel); font-size: 0.83rem;
    color: var(--grafit); text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease;
}
.odbiorca:hover li a { border-color: rgba(0, 0, 0, 0.14); }
.odbiorca li a:hover { border-color: var(--granat); color: var(--atrament); }

/* ── Opinie ───────────────────────────────────────────────────────────── */
.opinie-siatka { display: grid; gap: clamp(20px, 2.6vw, 34px); }
@media (min-width: 760px) { .opinie-siatka { grid-template-columns: repeat(3, 1fr); } }
.opinia { margin: 0; padding-top: 20px; border-top: 1px solid var(--atrament); }
.opinia-gwiazdki { color: #e0a020; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 12px; }
.opinia-gwiazdki .pusta { color: var(--linia); }
.opinia blockquote {
    margin: 0 0 14px; padding: 0; border: 0;
    font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--atrament);
}
.opinia figcaption { font-size: 0.82rem; font-weight: 600; color: var(--grafit); }
.opinia figcaption span { display: block; font-weight: 400; color: var(--mgla); font-size: 0.78rem; }

/* ── Nagłówek indeksu usług ───────────────────────────────────────────── */
.indeks-naglowek { margin-bottom: 14px; align-items: baseline; }
.indeks-naglowek h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; }
.indeks-licznik { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgla); }

/* ── Pasek pomocy w artykule: pod nagłówkiem, nie na końcu ────────────── */
.pasek-pomocy {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    margin: 0 0 clamp(28px, 4vw, 40px); padding: 14px 18px;
    background: var(--papier); border-left: 3px solid var(--fiolet);
}
.pasek-pomocy-tekst { font-weight: 650; font-size: 0.95rem; margin-right: auto; }
.pasek-pomocy-tel {
    font-weight: 700; font-size: 0.95rem; color: var(--granat);
    text-decoration: none; font-variant-numeric: tabular-nums;
}
.pasek-pomocy-tel:hover { color: var(--fiolet); }
@media (max-width: 560px) {
    .pasek-pomocy-tekst { margin-right: 0; flex-basis: 100%; }
    .pasek-pomocy .przycisk { flex: 1; }
}

/* ── Paginacja listingu ───────────────────────────────────────────────── */
.paginacja {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 8px 18px; margin: clamp(28px, 4vw, 44px) 0 8px;
}
.paginacja-numery { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.paginacja-numer {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--linia); border-radius: 8px;
    font-size: 0.92rem; font-weight: 600; color: var(--grafit); text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.paginacja-numer:hover { border-color: var(--granat); color: var(--atrament); }
.paginacja-numer--biezacy { background: var(--granat); border-color: var(--granat); color: var(--biel); }
.paginacja-krok {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.92rem; font-weight: 600; color: var(--granat); text-decoration: none;
}
.paginacja-krok:hover { color: var(--fiolet); }
.paginacja-krok--nieaktywny { color: var(--linia-mocna, #c9c6d4); pointer-events: none; }
.paginacja-licznik {
    text-align: center; font-size: 0.8rem; color: var(--mgla);
    margin: 0 0 clamp(40px, 6vw, 80px); font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
    .paginacja { gap: 10px; }
    .paginacja-krok span[aria-hidden] { font-size: 1.1rem; }
}

/* ── Taśma „Dalej w serii" ────────────────────────────────────────────── */
.dalej { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); background: var(--papier); overflow: hidden; }
.dalej h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: clamp(20px, 3vw, 32px); }
.dalej-tasma { position: relative; }
/* Wygaszenie na krawędziach: taśma ma znikać, a nie urywać się w pół kafelka. */
.dalej-tasma::before, .dalej-tasma::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: clamp(24px, 6vw, 90px); z-index: 2; pointer-events: none;
}
.dalej-tasma::before { left: 0; background: linear-gradient(90deg, var(--papier), transparent); }
.dalej-tasma::after { right: 0; background: linear-gradient(270deg, var(--papier), transparent); }
.dalej-scieżka { display: flex; width: max-content; animation: dalejPrzesuw var(--czas, 44s) linear infinite; }
/* Jedna czy dwie pozycje: nie ma czego przewijać, więc stoją spokojnie
   i mieszczą się w kontenerze zamiast uciekać za krawędź. */
.dalej--krotka .dalej-scieżka { animation: none; width: auto; }
.dalej--krotka .dalej-lista { flex-wrap: wrap; padding-inline: clamp(20px, 4vw, 48px); max-width: var(--kontener); margin: 0 auto; }
.dalej--krotka .dalej-tasma::before, .dalej--krotka .dalej-tasma::after { display: none; }
.dalej--krotka .dalej-karta { width: clamp(240px, 30vw, 380px); }
.dalej-tasma:hover .dalej-scieżka,
.dalej-tasma:focus-within .dalej-scieżka { animation-play-state: paused; }
@keyframes dalejPrzesuw { to { transform: translateX(-50%); } }
.dalej-lista { display: flex; gap: 16px; padding-right: 16px; }
.dalej-karta {
    display: flex; flex-direction: column; gap: 6px; width: clamp(240px, 24vw, 320px); height: 100%;
    padding: 20px 22px; background: var(--biel); border: 1px solid var(--linia); border-radius: 12px;
    text-decoration: none; color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.dalej-karta:hover { border-color: var(--granat); transform: translateY(-2px); }
.dalej-seria { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fiolet); }
.dalej-karta strong { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.dalej-zajawka { font-size: 0.85rem; color: var(--grafit); }
@media (prefers-reduced-motion: reduce) {
    /* Bez animacji taśma zamienia się w zwykłą listę do przewinięcia palcem. */
    .dalej-scieżka { animation: none; width: auto; overflow-x: auto; }
    .dalej-scieżka .dalej-lista[aria-hidden] { display: none; }
}

/* ── Strona wypisu z newslettera ──────────────────────────────────────── */
.wypis-obszar { padding-bottom: clamp(48px, 7vw, 96px); }
.wypis-karta { padding: clamp(24px, 3vw, 40px); background: var(--papier); border-top: 3px solid var(--granat); border-radius: 12px; }
.wypis-wybor { border: 0; padding: 0; margin: 6px 0 22px; }
.wypis-wybor legend { padding: 0; font-size: 0.84rem; font-weight: 600; margin-bottom: 10px; }
.wypis-opcja { display: flex; gap: 12px; padding: 14px 16px; background: var(--biel); border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; }
.wypis-opcja + .wypis-opcja { margin-top: 10px; }
.wypis-opcja:has(input:checked) { border-color: var(--granat); box-shadow: 0 0 0 2px rgba(42, 38, 74, 0.1); }
.wypis-opcja input { margin-top: 4px; accent-color: var(--granat); }
.wypis-opcja > span { display: flex; flex-direction: column; gap: 2px; }
.wypis-opcja strong { font-size: 0.95rem; }
.wypis-opcja span span { font-size: 0.85rem; color: var(--grafit); }
.wypis-formularz .przycisk { width: 100%; }
.wypis-sukces h2 { font-size: 1.5rem; }
.wypis-sukces p { color: var(--grafit); }
.wypis-uwaga { margin-top: 20px; font-size: 0.82rem; color: var(--mgla); }
.newsletter-wypis { color: var(--granat); text-underline-offset: 2px; }
.newsletter-wypis:hover { color: var(--fiolet); }

/* ── Newsletter: pasek nad stopką + okno przy wyjściu ─────────────────── */
.pasek-newsletter { background: var(--papier); border-top: 1px solid var(--linia); }
.pasek-newsletter-wnetrze {
    display: grid; gap: 20px;
    padding-block: clamp(28px, 4vw, 48px);
}
@media (min-width: 860px) {
    .pasek-newsletter-wnetrze { grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
}
.newsletter-tekst h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 6px; }
.newsletter-tekst p { font-size: 0.93rem; color: var(--grafit); margin: 0; max-width: 46ch; }
.newsletter-wiersz { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter-wiersz input {
    flex: 1 1 220px; min-width: 0; font-family: var(--sans); font-size: 0.97rem;
    padding: 13px 16px; border: 1px solid var(--linia); border-radius: 8px; background: var(--biel);
}
.newsletter-wiersz input:focus { outline: none; border-color: var(--granat); box-shadow: 0 0 0 3px rgba(42, 38, 74, 0.12); }
.newsletter-zgoda { font-size: 0.76rem; color: var(--mgla); margin: 10px 0 0; }
.newsletter-stan { margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--granat); }
.tylko-dla-czytnika {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.okno-newsletter {
    width: min(480px, calc(100vw - 32px)); padding: clamp(26px, 4vw, 40px);
    border: 0; border-top: 3px solid var(--fiolet); border-radius: 12px;
    background: var(--biel); color: var(--atrament);
    box-shadow: 0 40px 90px -40px rgba(15, 13, 26, 0.6);
}
.okno-newsletter::backdrop { background: rgba(15, 13, 26, 0.55); backdrop-filter: blur(2px); }
.okno-newsletter h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-bottom: 8px; }
.okno-newsletter-opis { font-size: 0.95rem; color: var(--grafit); margin-bottom: 20px; }
/* ⚠️ W kolumnie `flex-basis` opisuje WYSOKOŚĆ, więc odziedziczone
   `flex: 1 1 220px` z paska rozdymało pole do 220 px wzwyż. */
.okno-newsletter .newsletter-wiersz { flex-direction: column; gap: 8px; }
.okno-newsletter .newsletter-wiersz input { flex: 0 0 auto; width: 100%; }
.okno-newsletter .newsletter-wiersz .przycisk { width: 100%; }
.okno-zamknij {
    position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
    display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
    background: none; border: 0; color: var(--mgla); cursor: pointer; border-radius: 8px;
}
.okno-zamknij:hover { color: var(--atrament); background: var(--papier); }
@media (prefers-reduced-motion: no-preference) {
    .okno-newsletter[open] { animation: oknoWchodzi 0.28s ease; }
    @keyframes oknoWchodzi { from { opacity: 0; transform: translateY(12px); } }
}

/* ── Sytuacje w formularzu ────────────────────────────────────────────── */
.sytuacje { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
.sytuacje-etykieta { font-size: 0.78rem; color: var(--mgla); margin-right: 2px; }
.sytuacja {
    font-family: var(--sans); font-size: 0.8rem; color: var(--grafit);
    background: var(--papier); border: 1px solid var(--linia); border-radius: 999px;
    padding: 5px 13px; cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sytuacja:hover { border-color: var(--granat); color: var(--atrament); }
.sytuacja[aria-pressed="true"] { background: var(--granat); border-color: var(--granat); color: var(--biel); }

/* ── Zdjęcia poza szpaltą artykułu ────────────────────────────────────────
 *
 * Do ~1150 px zdjęcia wracają do szpalty jako zwykłe ilustracje. Powyżej
 * wychodzą na marginesy, a ich pozycję pionową daje `position: absolute`
 * BEZ `top`: element zostaje na swojej statycznej wysokości, czyli dokładnie
 * przy akapicie, za którym stoi w kodzie.
 *
 * Krawędzie liczymy PROCENTAMI względem pełnoszerokiego kontenera, nigdy
 * jednostką `vw`. `50vw` obejmuje pasek przewijania, więc zdjęcie wystawałoby
 * poza okno o kilka pikseli i strona dostawałaby poziomy suwak.
 */
.poboczna { margin: 26px 0; }
.poboczna .foto { box-shadow: 14px 14px 0 -1px var(--papier), 15px 15px 0 0 var(--linia); }

.artykul-obszar { max-width: none; padding: 0; }
.artykul-obszar .artykul-tresc {
    max-width: calc(780px + 2 * clamp(20px, 4vw, 48px));
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 48px);
}

@media (min-width: 1150px) {
    /* Kontener jest pełnoszeroki i to WZGLĘDEM NIEGO liczymy krawędzie -
       stąd `left: 0` trafia dokładnie w lewą krawędź okna. */
    .artykul-obszar { position: relative; }
    .poboczna { position: absolute; margin: 0; --odstep: clamp(28px, 3vw, 64px); --polszpalty: 390px; }
    .poboczna .foto { box-shadow: none; }
    .poboczna .foto figcaption { left: 16px; right: 16px; bottom: 14px; font-size: 0.6rem; letter-spacing: 0.1em; }
    .poboczna .foto-warstwa::after { inset: 10px; }

    /* Kadr otwierający: zawsze przy lewej krawędzi okna, zawsze u góry.
       Szerokość wynika z obu krawędzi naraz, więc sam dopasowuje się
       do okna i nigdy nie wchodzi w szpaltę tekstu. */
    .poboczna--otwierajace {
        left: 0;
        right: calc(50% + var(--polszpalty) + var(--odstep));
        /* Ujemne `top` wciąga kadr w obszar nagłówka, więc przechodzi przez
           kreskę oddzielającą go od treści. z-index, bo kreska rysuje się
           obramowaniem sekcji wyżej w drzewie. */
        top: calc(-1 * var(--wyzej, 120px));
        z-index: 2;
    }

    /* Towarzyszące: raz dosunięte do prawej krawędzi, raz wiszące w głębi
       marginesu - o tym decyduje klasa nadana przy renderowaniu. */
    .poboczna--towarzyszace.poboczna--przyklejone {
        right: 0;
        left: calc(50% + var(--polszpalty) + var(--odstep));
    }
    .poboczna--towarzyszace:not(.poboczna--przyklejone) {
        left: calc(50% + var(--polszpalty) + var(--odstep));
    }
    .poboczna--towarzyszace:not(.poboczna--przyklejone).poboczna--mala { width: clamp(120px, 12vw, 175px); }
    .poboczna--towarzyszace:not(.poboczna--przyklejone).poboczna--srednia { width: clamp(140px, 15vw, 225px); }
    .poboczna--towarzyszace:not(.poboczna--przyklejone).poboczna--duza { width: clamp(160px, 19vw, 290px); }
}

/* Bardzo szerokie okna: kadr otwierający robiłby się nienaturalnie duży. */
@media (min-width: 1800px) {
    .poboczna--otwierajace { right: auto; width: 460px; }
    .poboczna--towarzyszace.poboczna--przyklejone { left: auto; width: 420px; }
}

.seria-odsylacz { color: var(--grafit); text-decoration: none; font-weight: 700; }
.seria-odsylacz:hover { color: var(--fiolet); }
.zapowiedz time { color: var(--mgla); font-weight: 500; letter-spacing: 0.06em; }
.artykul-wiersz-meta { display: flex; flex-direction: column; gap: 2px; }
.artykul-seria { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--granat); }

/* ── Kalkulator ───────────────────────────────────────────────────────── */
.kalkulator { padding: clamp(24px, 3vw, 36px); background: var(--papier); border-top: 3px solid var(--fiolet); }
.kalkulator .pole input { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kalk-tryb { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.kalk-tryb legend { padding: 0; font-size: 0.84rem; font-weight: 600; margin-bottom: 9px; }
.kalk-tryb label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--grafit); cursor: pointer; }
.kalk-tryb input { accent-color: var(--granat); }
.kalk-wynik { padding: 20px 0 0; border-top: 1px solid var(--linia-mocna, rgba(0,0,0,0.16)); }
.kalk-kwota { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kalk-kwota span { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mgla); }
.kalk-kwota strong {
    font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1;
    color: var(--granat); font-variant-numeric: tabular-nums; font-weight: 500;
}
.kalk-podstawa { font-size: 0.86rem; color: var(--grafit); margin: 10px 0 0; }
.kalk-uwaga { font-size: 0.8rem; color: var(--mgla); margin: 22px 0 0; line-height: 1.6; }

/* ── Miejscowości ─────────────────────────────────────────────────────── */
.miasto-fakty { display: grid; gap: 1px; background: var(--linia); border: 1px solid var(--linia); margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 720px) { .miasto-fakty { grid-template-columns: repeat(3, 1fr); } }
.miasto-fakty > div { background: var(--biel); padding: 18px 22px; }
.miasto-fakty span { display: block; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgla); margin-bottom: 4px; }
.miasto-fakty strong { font-size: 0.96rem; font-weight: 600; }
.miasto-pelna { font-size: 0.92rem; color: var(--grafit); margin-bottom: clamp(40px, 6vw, 72px); }
.miasto-pelna a { color: var(--granat); }

.stopa-miasta { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 20px 0; border-top: 1px solid var(--linia-ciemna); font-size: 0.84rem; }
.stopa-miasta span { color: rgba(255, 255, 255, 0.4); }
.stopa-miasta a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.stopa-miasta a:hover { color: #b78aff; }