:root {
    --color-green: rgb(17, 70, 52);
    --color-white: #ffffff;
    --color-black: #000000;
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
}

/* FARBOWANIE PRZEGLĄDARKI (Multi-Color Overscroll Fix) */
html {
    background-color: var(--color-green); /* Omalowuje całą nieskończoną próżnię poza stroną (np. przyciągnięcie iOS) twardą zielenią stopki, trwale niszcząc "biały pasek" pod dołem bez sztucznego wydłużania witryny! */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Ochrona przed ewentualnym skalowaniem subpikseli wypychającym proporcje */
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-black);
    background-color: var(--color-white);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-top: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

img {
    max-width: 100%;
}

.container {
    max-width: 1440px; /* Rozszerzona szerokość maksymalna dająca więcej powietrza na stronie */
    margin: 0 auto;
    padding: 0 40px;
}

.section-padding {
    padding: 80px 0;
}

.bg-white {
    background-color: var(--color-white);
    color: var(--color-black);
}

.bg-green {
    background-color: var(--color-green);
    color: var(--color-white);
}

.section-title {
    font-size: 2rem; /* Znaczne odchudzenie i pomniejszenie nagłówków */
    font-weight: 400; /* Zgodnie z poleceniem usunięto pogrubienie, waga standardowa */
    margin-bottom: 1.5rem; 
}

/* ================== SEKCJA WPROWADZAJĄCA ================== */
.intro {
    background-color: var(--color-white);
    color: var(--color-black);
    padding-top: 80px; /* Odstęp od góry by nagłówek nie dotykał krawędzi ekranu */
}

.hero-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Obie połowy będą miały jednakową wysokość */
}

/* LEWA POŁOWA */
.hero-left {
    flex: 1.2; /* Przeważenie kolumny na korzyść tekstu i podpisów. Było "flex: 1" */
    padding-top: 0px; /* Skasowanie celowego opuszczenia. Zrównuje wizualnie górę nagłówka H1 idealnie z górną ramką obrazu po prawej "na sztywno" */
    padding-right: 40px; /* Zmniejszono z 60px by zredukować barierę dzielącą z prawą stroną */
    padding-bottom: 60px; 
}

.hero-heading {
    font-size: 3.3rem; /* Ostateczne powiększenie rozmiaru, by zajął do cna nową granicę lewej połówki */
    font-weight: 400; /* Wartość standardowa "nie wyboldowana" */
    text-decoration: none; /* Skasowanie natywnego podkreślenia */
    border-bottom: 1px solid var(--color-black); /* Dokładnie 1-pikselowy czarny separator na dole... */
    padding-bottom: 15px; /* Odstawia linię lekko w dół */
    display: inline-block; /* ...szerokością ograniczony wyłącznie do "Jasne zasady. Proste decyzje.", uniemożliwia 100% szerokości ekranu */
    white-space: nowrap; /* Twarde zachowanie tekstu w jednej jedynej linii bez dopuszczania automatycznych zawinięć i akapitów */
    margin-top: 0; /* Zapewnia wyrównanie wysokości ze zdjęciem */
    margin-bottom: 2rem;
    line-height: 1.1; /* Niskie napięcie linii żeby wizualnie nagłówek zaczynał się blisko krawędzi boxu */
}

.hero-text {
    font-size: 1.125rem;
    line-height: 1.6;
}

.hero-highlight {
    font-size: 1.125rem; /* Zrównane z resztą tekstu .hero-text */
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.hero-signature {
    display: inline-flex; /* Kontener dopasuje się najszerszego elementu (obrazka), a nie całej kolumny */
    flex-direction: column; 
    align-items: center; /* Dzięki inline-flex wyśrodkuje tekst idealnie do środka podpisu, ale cały blok pozostanie wyrównany do skraju akapitu */
    gap: 0px; /* Całkowicie skasowany odstęp */
}

.advocate-title {
    font-weight: 400; /* Zwykła waga */
    font-size: 1.125rem; /* Zwykły rozmiar tekstu */
    line-height: 1; /* Eliminacja naddatków od interlinii */
    margin-bottom: -5px; /* Dodatkowe mechaniczne przysunięcie dopisku w dół w kierunku skanowanego obrazka */
}

.signature-img {
    height: 70px;
    object-fit: contain;
    opacity: 0; /* Element ukryty podczas startu strony */
    animation: fadeInDelay 1.8s ease-out forwards; /* 1.8s całości = opóźnienie + rozjaśnienie */
}

/* PRAWA POŁOWA - ZDJĘCIE */
.hero-right {
    flex: 0.8; /* Pomniejszony obszar uderzeniowy wyważający flex-grow lewej ściany, by obie ładnie domykały środek */
    display: flex;
    flex-direction: column; 
    align-items: flex-end; /* Przy zmniejszonym do 80% zdjęciu trzyma je konsekwentnie po prawej skrajnej ze stabilizacją */
}

.hero-photo {
    width: 80%; /* Skurczenie o wymarzone 20% na wniosek klienta */
    height: auto;
    object-fit: cover;
    object-position: top center;
    display: block;
    opacity: 0; /* Element ukryty podczas startu strony */
    animation: fadeInDelay 1.5s ease-out forwards; /* Odrobinę szybsza pętla niż podpis */
}

/* SEPARATOR NA SAMYM DOLE SEKCJI */
.hero-separator {
    height: 3px; /* "Wąski separator" */
    background-color: var(--color-black);
    width: 100%;
    /* Zdjęcie przylega do niego, bo separator znajduje się bezpośrednio po .hero-container */
}

/* ================== O MNIE ================== */
.about {
    color: var(--color-white);
    -webkit-font-smoothing: antialiased; /* Niszczy efekt "rozlania" białego tekstu na urządzeniach Apple */
    -moz-osx-font-smoothing: grayscale; /* Poprawia ostrość jasnej czcionki na ciemnym kontenerze Firefox/Mac */
}

.about-container {
    display: flex;
    justify-content: center; /* Wyśrodkowanie całej zawartości niwelujące zjawisko naturalnego trzymania lewej krawędzi */
    align-items: center;
    gap: 100px;
}

.about-left {
    flex: 0 0 auto; /* Logo swobodnie podąży ku środkowi */
}

.about-logo {
    max-width: 250px;
    height: auto;
}

.about-right {
    flex: 0 1 800px; /* Tekst nie potężnieje powyżej tej miary, chroniąc centralny i czysty wygląd na wielkich rozdzielczościach */
}

.about-content p {
    font-size: 1.125rem;
}

.about-content a {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 4px;
    font-weight: 500;
    transition: text-decoration-color 0.3s ease;
}

.about-content a:hover {
    text-decoration-color: var(--color-white);
}

/* Przełamanie schematu podkreślanych linków we fragmencie na rzecz surowego numeru licencji (WAW/Adw/6291) */
.about-content a.registry-link {
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.3s ease;
}

.about-content a.registry-link:hover {
    text-decoration: none;
    opacity: 0.8; /* Zyskujemy wciąż widoczny marker interakcji poprzez muśnięcie przygaszenia w miejce kreski */
}

@media (max-width: 900px) {
    .about-container {
        flex-direction: column;
        gap: 40px;
    }
    .about-left {
        flex: 1;
        width: 100%;
        max-width: 250px;
    }
}

/* ================== OBSZARY PRAKTYKI ================== */
.practice {
    -webkit-font-smoothing: antialiased; /* Działa również dla czarnego tekstu na białym tle, wyłączając jego subpikselowe renderowanie na macach, przez co litery pozbywają się obrzęku. */
    -moz-osx-font-smoothing: grayscale;
}

.practice-container {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    align-items: stretch; /* Obie kolumny będą równej wysokości */
}

.practice-left {
    flex: 2; /* Gwarantuje bardzo dużą szerokość roboczą (⅔ całego wiersza) rozwiązując problem zawężenia pionowego otwartych warstw */
}

.practice-right {
    flex: 1; /* Pozostała ⅓ wiersza dedykowana logotypowi */
    display: flex;
    justify-content: center; /* Powoduje centralizację logo w jego zmniejszonej "komorze" */
    align-items: center; 
}

.practice-logo {
    width: 100%;
    max-width: 250px; /* Stanowczo zmniejszone docelowe pole, aby logo było widoczne ale kompaktowe */
    height: auto;
}

.accordion {
    display: flex;
    flex-direction: column;
}

.accordion-item {
    border-bottom: 1px solid var(--color-black); /* Zmniejszono separator do 1 pixela */
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.25rem; /* Zmniejszono z 1.5rem */
    font-weight: 600; /* Zmniejszono z 700 */
    padding: 24px 0;
    list-style: none; /* Hide default triangle */
}

/* Usuwamy domyślny marker w Chrome i Safari */
.accordion-header::-webkit-details-marker {
    display: none;
}

.accordion-header .icon {
    position: relative;
    width: 14px; /* Pomniejszono cały moduł z 20px - ikony są teraz mniejsze */
    height: 14px; /* Proporcjonalne obniżenie wysokości by zachować kwadratową geometrię znaku */
    display: inline-block;
    flex-shrink: 0;
}

/* Rysujemy dwie fizyczne kreski zamiast generowania czcionki znaku specjalnego */
.accordion-header .icon::before,
.accordion-header .icon::after {
    content: '';
    position: absolute;
    top: 6px; /* Skorygowany, bezwzględny środek oparty o matematykę dla boxu 14px */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-black);
    transition: transform 0.4s ease; /* Zastosowanie płynnego powlekania przez rotację */
}

/* Pozioma belka */
.accordion-header .icon::before {
    transform: rotate(0deg);
}

/* Pionowa belka tworząca krzyżyk (PLUS) */
.accordion-header .icon::after {
    transform: rotate(90deg);
}

/* Zmieniony kąt z 180deg (w prawo) na 0deg (w lewo). Obraca pionową kreskę plusa gładkim pociągnięciem przeciwnym do obrotu zegara w kierunku poziomego poziomu zera, tworząc minus */
details[data-open="true"] .accordion-header .icon::after {
    transform: rotate(0deg);
}

.accordion-content {
    font-size: 1.125rem;
    overflow: hidden; /* Odcięcie treści przy zwijaniu */
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out, padding-bottom 0.25s ease-out; /* Bardzo szybka animacja rozwijania/zwijania (0.25s) */
    padding-right: 40px; /* Utrzymuje tekst w bezpiecznej odległości i twardo powstrzymuje od zajmowania całej szerokości pojemnika pod kolumną "ikony działania" */
    text-align: justify; /* Poprawa estetyki poprzez wymuszenie trzymania obustronnego marginesu w tekstach akapitów warstwy */
}

.accordion-content p {
    margin-bottom: 1rem;
}

.accordion-content ol {
    margin-top: 0;
    padding-left: 40px; /* Bezpieczna szerokość marginesu dla generowanych obok cyfr i kropek listy */
    margin-bottom: 1.5rem;
}

.accordion-content li {
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    .practice-container {
        flex-direction: column-reverse; /* Logo przenosimy na dół lub do góry (column-reverse da logo na dół) */
        gap: 40px;
    }
    .practice-right {
        flex: 1;
        width: 100%;
        max-width: 250px;
        align-self: flex-start;
    }
}

/* ================== ANIMACJE PRZY ŁADOWANIU ================== */

@keyframes fadeInDelay {
    0% { opacity: 0; }
    50% { opacity: 0; } /* Połowa czasu trwania tej animacji stanowi pusty "postój", pełniący rolę płynnego opóźnienia w wyświetleniu obiektu z bieli do jego standardowego miejsca */
    100% { opacity: 1; }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Klasy wykorzystujące powyższe klatki – "fast" czas wjazdu (0.5s) */
.about-logo {
    animation: slideInLeft 0.5s ease-out forwards;
}

.practice-logo {
    animation: slideInRight 0.5s ease-out forwards;
}

/* ================== STOPKA ================== */
.footer {
    padding-top: 80px;
    font-weight: 300; /* Wprost żądamy wariantu "Light" z zaimportowanych Google Fonts */
    -webkit-font-smoothing: antialiased; /* Niszczy efekt "pogrubiania" białych znaków na macOS */
    -moz-osx-font-smoothing: grayscale;
    margin-bottom: 0 !important; /* Szlaban na dziedziczone dolne pozycje */
    padding-bottom: 1px; /* Anty-collapse */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 60px; /* Odstęp do separatora na dole */
}

/* Kolumna lewa */
.footer-left {
    flex: 1;
    text-align: center; /* "wyrównana do środka treść" */
    font-size: 1.125rem;
    line-height: 1.8;
}

.footer-left p {
    margin-bottom: 0;
}

/* Kolumna prawa */
.footer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Usytuowanie zawartości symetrycznie na środku połowy ekranu */
    gap: 20px;
}

/* Element w prawej kolumnie - blok z ikonką wyrównany do skraju ikonek dla estetyki */
.footer-contact-item {
    display: flex;
    align-items: center; /* "wyśrodkowana treść" - numer w pionię równo z ikonką */
    justify-content: flex-start; /* wyśrodkowane do lewej ikony - wymuszone */
    gap: 15px; 
    width: 280px; /* Box o dedykowanej szerokości utrzyma krawędź obu ikon w jednej stałej osi X */
    font-size: 1.125rem;
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-contact-item:hover {
    opacity: 0.8;
}

/* Wprawiamy daną ikonkę w drgnięcie po najechaniu myszką */
.footer-contact-item:hover .footer-icon {
    animation: twitch 0.3s ease-in-out;
}

/* Klatki animacji drgnięcia - delikatnie na boki ze skalą dla płynności */
@keyframes twitch {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.05); }
    50% { transform: rotate(8deg) scale(1.05); }
    75% { transform: rotate(-8deg) scale(1.05); }
}

.footer-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* "Biały separator grubości 1 piksela i szerokości całej strony" */
.footer-separator {
    width: 100%;
    height: 1px;
    background-color: var(--color-white);
}

.footer-bottom {
    padding: 30px 40px;
    text-align: center;
}

/* "Klauzula RODO" z zachowaniem subtelnego efektu linku dla białego i zielonego tła */
.rodo-link {
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 300; /* Zredukowano z 500 do 300 */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 4px;
    transition: text-decoration-color 0.3s ease;
}

.rodo-link:hover {
    text-decoration-color: var(--color-white);
}

@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        gap: 60px;
    }
}

/* ================== RODO ================== */
.rodo-page {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 0; /* ZABÓJCA BŁĘDU: Zlikwidowano gigantyczny, 80-pikselowy margines (padding), który wbijał się pod zieloną stopkę dnem taga body! */
    -webkit-font-smoothing: antialiased; /* Narzuca ten sam reżim ostrości dla ściany tekstu prawniczego, zapobiegając rozlewaniu farby na subpikselach Apple */
    -moz-osx-font-smoothing: grayscale;
}

.rodo-container {
    max-width: 1440px; /* Sztywna integracja obrysu z "max-width: 1440px" znanym z całej szerokości strony głównej */
    padding-top: 80px; /* Przeniesiona odległość górna chroniąca nagłówek, ale uwolniona od dołu */
}

.rodo-title {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.4;
}

.rodo-content {
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: justify; /* Pełne wyjustowanie bloku prawnego */
    padding: 0 80px; /* Duże obustronne wewnętrzne marginesy trzymające sam tekst w czytelnych ryzach, po to by kontener mógł fizycznie sięgać pełnej krawędzi okna */
}

.rodo-content h2 {
    font-size: 1.35rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: 400; /* Zniesienie "wyboldowania" dla punktów 1. 2. 3. i 4. - lżejszy tekst staje się smuklejszy */
}

.rodo-content p {
    margin-bottom: 1rem;
}

.rodo-footer {
    margin-top: 5rem;
    margin-bottom: 5rem; /* Wolna przestrzeń pod przyciskiem */
    text-align: center;
}

.btn-return {
    display: inline-block;
    padding: 10px 30px; /* Zredukowano wielkość przycisku do dyskretniejszych proporcji */
    font-size: 1rem; /* Mniejsza czcionka o ton lżejszej wagi */
    font-weight: 500;
    color: var(--color-black);
    border: 1px solid rgba(0,0,0,0.2); /* Lekka, transparentna obwódka zamiast 2-pikselowej sztywnej czerni */
    border-radius: 40px; /* Pełne, miękkie zaokrąglenie w kształcie tzw. tabletki na polecenie "za ostre krawędzie" */
    text-decoration: none;
    transition: all 0.3s ease; /* Łagodna, prosta zmiana stylu, ucieczka od skomplikowanych matematyk kubicznych (cubic) */
    background-color: transparent;
}

.btn-return:hover {
    border-color: var(--color-black); /* Podczas spotkania subtelnie wyostrza obwódkę... */
    background-color: rgba(0,0,0,0.03); /* ...oraz bardzo nieznacznie muśnięciem barwi wnętrze na łagodne, przezroczyste szare tło unikając ataku wzroku ciężką farbą solid black */
}

/* Klasa ukrywająca łamanie tekstu na komputerach stacjonarnych */
.mobile-break {
    display: none;
}

/* Klasa zachowująca klasyczną "spację" między wyrazami w widoku pulpitowym */
.desktop-space {
    display: inline;
}

/* ================== SZTYWNA RESPONSYWNOŚĆ (TABLETY / TELEFONY) ================== */
@media (max-width: 900px) {
    /* Aktywacja ukrytych znaków nowej linii wyłącznie na telefonach */
    .mobile-break {
        display: block; /* Przełamuje H1 oraz długą nazwę własną w stopce */
    }
    
    /* Na smartfonach z kolei kasujemy podwójną spację (po kropce), ponieważ wyraz opada wizualnie do nowej odciętej linii */
    .desktop-space {
        display: none;
    }

    /* Uwolnienie bocznych więzów i dociśnięcie marginesów oddające cenne miejsce smartfonom */
    .container {
        padding: 0 20px;
    }
    
    .section-padding {
        padding: 50px 0;
    }

    .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }
    
    .intro {
        padding-top: 40px; /* Zredukowana pusta przestrzeń nad nagłówkiem H1 dla widoku smartfona */
    }

    /* SEKCJA HERO - Kolizja naprawiona przez rotację osi w dół (kolumnowanie zdjęć) */
    .hero-container {
        flex-direction: column;
        gap: 30px; 
    }

    .hero-left {
        flex: 1;
        padding-right: 0px; 
        padding-bottom: 0px; 
    }

    .hero-heading {
        font-size: 2.1rem; 
        white-space: normal; 
        line-height: 1.25;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--color-black); /* Przywrócenie separatora na wniosek - powrót z "none" */
        padding-bottom: 15px; 
        display: inline-block; /* Konieczne, by separator rysował się proporcjonalnie do najdłuższego wersu wyrazu rozbitego na dwa wiersze */
        text-align: left;
    }

    .hero-text {
        font-size: 1.05rem;
    }

    .hero-right {
        flex: 1;
        align-items: center; 
        width: 100%;
        margin-top: 10px;
    }

    .hero-photo {
        width: 100%; 
        max-width: 400px; /* Sztywne ograniczenie w dół przed szaleńczym rozrostem na tabletach rozsuwających box horyzontalnie za krawędź uśmiechu */
        object-position: top center;
    }
    
    /* SEKCJA O MNIE */
    .about-right {
        flex: 1 1 auto; /* Resetujemy bazę 800px ze stacjonarnego widoku, która po zmianie ekranu na kolumnę zamieniała się ze swej szerokości w sztuczną narzuconą wybujałą WYSOKOŚĆ (giant green space bug)!!! */
        width: 100%;
    }
    
    .about.section-padding {
        padding-bottom: 40px !important; /* Przyznajemy ręczny sztywny margines dolny taki sam jak góra sekcji */
    }
    .about-content p:last-child {
        margin-bottom: 0px !important; /* Blokujemy narost marginesu z akapitu */
    }

    /* OBSZARY PRAKTYKI */
    .practice-right {
        align-self: center; /* Wyśrodkowanie celi chroniące przed trzymaniem lewej krawędzi */
        width: 100%;
    }
    
    .practice-logo {
        max-width: 160px; /* Widoczne pomniejszenie logo Adwokatury */
        margin: 0 auto;
        display: block; /* Ubezpieczenie naturalnego wyśrodkowania za pośrednictwem marginesów */
    }

    .accordion-header {
        font-size: 1.15rem; 
        padding: 18px 0;
    }

    .accordion-content {
        padding-right: 0px; /* Ulga dla rygorystycznego wcięcia dedykowanego pod minus/plus z komputera, oddająca miejsce małym ekranom */
        font-size: 0.95rem; /* Kolejne pomniejszenie akapitu */
        text-align: left; /* Twarde wyłączenie justowania "text-align: justify" wędrującego z nadrzędnego pliku */
    }

    .accordion-content ol {
        padding-left: 20px;
    }

    /* DOKUMENT RODO */
    .rodo-page {
        padding: 0; /* ZABÓJCA BŁĘDU NA TELEFONACH: Reset marginesów z taga Body */
    }
    
    .rodo-container {
        padding-top: 50px;
    }

    .rodo-title {
        font-size: 1.4rem;
        margin-bottom: 2rem;
    }

    .rodo-content {
        padding: 0 10px; /* Dekonstrukcja pancerza 80 pikseli. Przywraca oddychanie teksów do wewnątrz ekranu komórki */
        font-size: 1.05rem;
        text-align: left; /* Twarde porzucenie wyjustowania na ekranach mobilnych na życzenie */
    }

    .rodo-content h2 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }
    
    /* WIDOK STOPKI NA TELEFONIE */
    .rodo-footer {
        margin-top: 3.5rem;
        margin-bottom: 3.5rem;
    }
    
    .footer-right {
        align-items: center; /* Przyciągamy kontener numerów do środka */
        width: 100%;
    }

    .footer-contact-item {
        justify-content: center; /* Precyzyjne ułożenie i wymieszanie w środku ikon + tekstów (www/telefon) by ucięły nawyk ustawiania się równo z lewej */
        width: 100%;
    }
    
    .footer-container {
        padding-bottom: 80px !important; /* Ręczne zrównanie dystansu pod blokiem maila/www względem separatora z 80-pikselowym dystansem od góry stopki dającym osiową symetrię */
    }
    
    .footer-bottom {
        padding-top: 40px !important; /* Zmniejszono odstępy o połowę wedle instrukcji (było 80) */
        padding-bottom: 40px !important; /* Zmniejszono w dół o połowę do krawędzi okna dla RODO */
    }
}

/* Ekstremalne zawężenie (Ciasne ekrany iPhone SE / old Android) */
@media (max-width: 480px) {
    .container {
        padding: 0 15px; 
    }
    .hero-heading {
        font-size: 1.8rem;
    }
    .rodo-title {
        font-size: 1.25rem;
    }
    .btn-return {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    .footer-contact-item {
        width: 100%;
        max-width: 250px;
        font-size: 0.95rem; /* By nie złamał się mail adwokata w ciasnym kontenerze przy samej krawędzi bloku 320px... */
    }
}

/* ================== DEDYKOWANA WYSPA DLA iPADÓW I TABLETÓW (768px - 1024px) ================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Blokada przełamywania linii */
    .mobile-break { display: none !important; } 
    .desktop-space { display: inline !important; }
    
    .hero-container {
        flex-direction: row !important; /* Twarde wymuszenie architektury "zdjęcie obok tekstu" wypaczonej przez zapętlenie z telefonami w 900px */
        align-items: stretch !important; /* Przywraca naturalną mechanikę kontenera, opierając go o całą wysokość, by zdjęcie zjechało do krawędzi separatora */
    }
    
    .intro {
        padding-top: 20px !important; /* Redukcja dystansu z sufitu względem zjeżdżających treści */
    }
    
    .hero-left {
        flex: 1.3 !important; 
        padding-right: 20px !important; /* Maksymalna likwidacja przepaści łączącej tekst ze zdjęciem */
        padding-top: 40px !important; /* Ręczne posłanie tekstu w dół na prośbę "tekst trochę obniży" */
        padding-bottom: 70px !important; /* Idealne podbicie dolnego światła, by blok nie stykał się z linią - 70px to proporcja 1:1 wobec pikseli grafiki z podpisem Adwokata */
    }
    
    .hero-heading {
        font-size: 2.1rem !important; /* Agresywne ucięcie z desktopowych 3.3 by zmieściło się sztywno w jednym wierszu bez łamania H1 na wąskim iPadzie */
        white-space: nowrap !important; /* Wymuszenie jednego wiersza */
        border-bottom: 1px solid var(--color-black) !important; /* Przywrócenie odciętego separatora wprost na życzenie */
        padding-bottom: 15px !important; /* Wypoziomowanie odzyskanego paska */
        display: inline-block !important; /* Usztywnienie podtrzymujące widzialność paska */
        margin-bottom: 1rem !important;
    }
    
    .hero-right {
        flex: 1 !important; 
        align-items: flex-end !important; /* Przykucie portretu absolutnie najdalej prawej krawędzi szyby pomimo węższych proporcji tabletu */
        justify-content: flex-end !important; /* Zdecydowane strącenie i dociśnięcie fotografii wózkiem aż do oporu na dolnym separatorze */
    }
    
    .hero-photo {
        width: 100% !important; /* Maksymalne zagęszczenie przestrzeni do prawej */
        max-width: 320px !important;
    }
}