/* ZNACZNIK WERSJI PRZY ILUSTRACJACH (2026-09-23)
   Trzy pliki stopki trafily na serwer uciete przez zerwany transfer SFTP
   (footer-portrait 64 KB zamiast 105 KB, sky i fg po 0 B). Serwer oddawal je
   z kodem 200, wiec przegladarki zapisaly uszkodzone kopie i po naprawie
   plikow NADAL rysowaly czarne tlo - stad "nie widac astronauty na telefonie".

   Zapytanie ?v= zmienia adres, wiec kazda przegladarka pobiera plik od nowa,
   bez proszenia uzytkownika o czyszczenie pamieci. Przy kolejnej podmianie
   ilustracji podnies date. */
/**
 * Stopka Klikon Media - SZKIELET pelnoekranowy.
 *
 * Etap 1: uklad i strefy (naglowek + slot na formularz u gory, pasek
 * informacyjny na dole). Kolory/detale dopracowujemy w kolejnym kroku -
 * dlatego tu sa tylko podstawy: czern brandu, gradientowy akcent w naglowku
 * i wyrazna ramka slotu formularza.
 *
 * Nadpisuje stare reguly .site-footer z main.css (ten plik ladowany jest po
 * nim - patrz inc/enqueue.php).
 */

.site-footer {
    position: relative;
    background: var(--color-bg, #000408);
    color: rgba(255, 255, 255, .75);
    overflow: clip;
}

/* ── TLO: ilustracja + niebo z gwiazdami ─────────────────────
   Krajobraz (astronauta z flaga na skalach) siedzi przy DOLNEJ krawedzi i
   zajmuje ok. 2/3 wysokosci; nad nim puste niebo, na ktorym leca gwiazdy.
   Grafika: assets/img/footer-landscape.webp (Banana, paleta marki). */

.site-footer__scene {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(72%, 640px);
    z-index: 0;
    pointer-events: none;
}

/* Niebo z planetami - warstwa dalsza, jedzie WOLNIEJ, przez co planety
   ("slonce") plyna wzgledem gor. Wyciete z tej samej ilustracji, wiec
   kompozycja zostaje ta sama (edycja Banana, nie nowa grafika).
   --footer-par (0..1) ustawia footer-parallax w main.js. */
.site-footer__sky-layer {
    position: absolute;
    inset: 0;
    background-image: url('../img/footer-sky.webp?v=20260923');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform: translate3d(0, calc(var(--footer-par, 0) * 30px), 0) scale(1.05);
    will-change: transform;
    /* Gorna krawedz rozplywa sie w tlo sekcji - zero widocznego szwu. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
}

/* Gory + skala + astronauta - pierwszy plan, mocniejszy ruch w przeciwna
   strone. Ta warstwa ma przezroczyste niebo (green screen wyciety). */
.site-footer__terrain {
    position: absolute;
    inset: 0;
    background-image: url('../img/footer-terrain.webp?v=20260923');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform: translate3d(0, calc(var(--footer-par, 0) * -14px), 0);
    will-change: transform;
}

/* Mrugajace swiatelko na drzewcu flagi.
   POZYCJE USTAWIA main.js - procenty liczone wzgledem elementu byly pudlem,
   bo warstwa uzywa background-size:cover i obraz jest kadrowany. JS liczy
   realne skalowanie i przelicza punkt z pliku (75.6% / 28.9%) na piksele. */
.site-footer__flag-light {
    position: absolute;
    left: 0;
    top: 0;
    /* Wieksza i mocniej swiecaca (bylo 8 px - user: "slabo to widac"). */
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #ff8ef5 45%, rgba(204, 0, 166, .65) 75%, transparent 100%);
    box-shadow:
        0 0 14px 4px rgba(255, 110, 245, .9),
        0 0 40px 12px rgba(204, 0, 166, .5);
    animation: footer-flag-blink 2.2s ease-in-out infinite;
}

@keyframes footer-flag-blink {
    0%, 100% { opacity: .45; transform: scale(.7); }
    10%      { opacity: 1;   transform: scale(1.35); }
    22%      { opacity: .55; transform: scale(.95); }
    34%      { opacity: 1;   transform: scale(1.2); }
    58%      { opacity: .4;  transform: scale(.7); }
}

/* Niebo: delikatna poswiata marki + statyczne gwiazdki (tanie, jedna
   warstwa gradientow zamiast setek elementow). */
.site-footer__sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        /* MOST DO SEKCJI NAD STOPKA: sekcja konczy sie poswiata wychodzaca
           z jej dolnej krawedzi (elipsy przy 12% i 88% szerokosci), a wlasna
           poswiata stopki rozkrecala sie dopiero jakies 50 px nizej. Na styku
           robil sie przez to ciemniejszy pas, czyli dokladnie ta widoczna
           granica dwoch sekcji. Te dwie elipsy to gorne polowki tamtych -
           razem tworza jedno swiatlo przechodzace przez granice. */
        radial-gradient(ellipse 55% 30% at 12% 0%, rgba(204, 0, 166, .05), transparent 72%),
        radial-gradient(ellipse 50% 26% at 88% 0%, rgba(115, 56, 234, .07), transparent 72%),
        /* Trzecia elipsa: sekcja ma wlasna poswiate w prawym dolnym rogu
           (at 100% 90%), przez co przy prawej krawedzi swiatlo urywalo sie
           na granicy mocniej niz posrodku. To jej dolna polowa. */
        radial-gradient(ellipse 40% 28% at 100% 0%, rgba(115, 56, 234, .13), transparent 72%),
        radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(1.4px 1.4px at 28% 9%, rgba(255, 255, 255, .4), transparent 60%),
        radial-gradient(1.8px 1.8px at 41% 24%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(1.3px 1.3px at 57% 12%, rgba(255, 255, 255, .42), transparent 60%),
        radial-gradient(1.7px 1.7px at 69% 28%, rgba(255, 255, 255, .5), transparent 60%),
        radial-gradient(1.4px 1.4px at 81% 15%, rgba(255, 255, 255, .38), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 31%, rgba(255, 255, 255, .45), transparent 60%),
        radial-gradient(1.2px 1.2px at 19% 38%, rgba(255, 255, 255, .32), transparent 60%),
        radial-gradient(1.3px 1.3px at 47% 41%, rgba(255, 255, 255, .3), transparent 60%),
        radial-gradient(1.5px 1.5px at 74% 44%, rgba(255, 255, 255, .28), transparent 60%),
        radial-gradient(ellipse 55% 45% at 12% 8%, rgba(204, 0, 166, .09), transparent 70%),
        radial-gradient(ellipse 50% 40% at 88% 20%, rgba(115, 56, 234, .08), transparent 70%);
}

/* GWIAZDY MRUGAJACE - male kropki pulsujace skala i kryciem (model
   z referencji lialive.ai: 2-3 px, skala do ~1.6, rozne czasy). */
.site-footer__twinkle {
    position: absolute;
    border-radius: 50%;
    background: #f4f0ff;
    opacity: .35;
    animation-name: footer-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes footer-twinkle {
    0%, 100% { opacity: .3;  transform: scale(1); }
    50%      { opacity: .95; transform: scale(1.6); }
}

/* METEOR - cienka smuga zakonczona jasna glowka. Element to sam ogon
   (gradient od przezroczystego do bieli), obrocony o 150 stopni, wiec
   glowka "leci" w dol i w lewo, a ogon ciagnie sie za nia w gore i w prawo.
   Poprzednia wersja byla gruba, zbyt jasna kreska bez kierunku. */
.site-footer__star {
    position: absolute;
    width: 150px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(232, 121, 249, .18) 42%,
        rgba(255, 255, 255, .6) 82%,
        #ffffff 100%
    );
    opacity: 0;
    transform: rotate(150deg);
    transform-origin: 100% 50%;
    will-change: transform, opacity;
    /* Pozycje i czasy sa w atrybucie style (PHP) - rozrzucone po calej
       szerokosci nieba. Tutaj tylko wspolna animacja. */
    animation-name: footer-star-fall;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

/* UWAGA: wariant lecacy w prawo NIE odwraca gradientu ani polozenia glowki.
   Obrot o 30 stopni kieruje PRAWY koniec paska w dol-prawo, wiec jasna
   glowka (prawy koniec) i tak prowadzi, a ogon ciagnie sie za nia.
   Wczesniejsze lustrzane odbicie dawalo kulke na koncu smugi zamiast
   na czele (zgloszone przez usera). */

/* Glowka - jasny punkt na koncu ogona. */
.site-footer__star::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, .75);
}

/* Lot zajmuje tylko czesc cyklu - reszta to PRZERWA (meteor niewidoczny).
   Dwa warianty kierunku: domyslny leci w DOL-LEWO, modyfikator --right
   w DOL-PRAWO (user: "zeby tez z lewej spadaly"). */
@keyframes footer-star-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(150deg) scaleX(.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(-60px, 35px, 0) rotate(150deg) scaleX(1);
    }
    22% {
        opacity: .85;
    }
    32%, 100% {
        opacity: 0;
        transform: translate3d(-330px, 190px, 0) rotate(150deg) scaleX(.7);
    }
}

/* Lustrzany kierunek - glowka leci w prawo, ogon ciagnie sie w lewo. */
.site-footer__star--right {
    transform: rotate(30deg);
    transform-origin: 100% 50%;
    animation-name: footer-star-fall-right;
}

@keyframes footer-star-fall-right {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(30deg) scaleX(.35);
    }
    3% {
        opacity: 1;
        transform: translate3d(60px, 35px, 0) rotate(30deg) scaleX(1);
    }
    22% {
        opacity: .85;
    }
    32%, 100% {
        opacity: 0;
        transform: translate3d(330px, 190px, 0) rotate(30deg) scaleX(.7);
    }
}


/* Pelna wysokosc ekranu - min-height, nie height: przy dlugim menu albo
   duzym formularzu stopka ma urosnac, a nie przycinac tresc. */
.site-footer__stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── [1+2] Gorna czesc: naglowek | slot formularza ───────── */

/* Cala stopka ma sie zmiescic w JEDNYM ekranie (user: "nie moze wychodzic
   wyzej"), dlatego odstepy i typografia sa liczone w jednostkach wysokosci
   okna - przy niskim ekranie same sie zbijaja. */
.site-footer__top {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding-block: clamp(28px, 5vh, 64px);
}

.site-footer__headline {
    margin: 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    font-size: clamp(1.9rem, 3.4vw + .4vh, 3.6rem);
    color: #fff;
}

.site-footer__headline-accent {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-footer__sub {
    margin: clamp(12px, 1.8vh, 22px) 0 0;
    max-width: 46ch;
    font-size: clamp(.95rem, 1.1vw, 1.08rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

/* ── "Zamów rozmowę" ─────────────────────────────────────────
   Zastapilo powtorzony mail/telefon w lewej kolumnie (te same dane sa
   nizej, w pasku). Jedno pole + jeden przycisk: numer idzie tym samym
   backendem co formularz (form_type=callback). */
.footer-callback {
    margin: clamp(18px, 3vh, 34px) 0 0;
    /* Musi pomiescic pole i przycisk w JEDNEJ linii - przy 30rem przycisk
       zeskakiwal pod spod. */
    max-width: 36rem;
}

.footer-callback__title {
    margin: 0 0 .75em;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    font-weight: 700;
    color: #fff;
}

.footer-callback__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-callback__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 13rem;
    min-width: 12rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .2s ease, background .2s ease;
}

.footer-callback__field:focus-within {
    border-color: rgba(204, 0, 166, .85);
    background: rgba(255, 255, 255, .08);
}

.footer-callback__field .site-footer__icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: #e879f9;
}

.footer-callback__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: .98rem;
    font-family: inherit;
    outline: none;
}

.footer-callback__input::placeholder { color: rgba(255, 255, 255, .42); }

/* Przycisk zwezony wzgledem domyslnego btn-cyber - stoi w jednej linii z polem. */
.footer-callback__btn {
    flex: none;
    padding: .82rem 1.25rem;
    font-size: .76rem;
    letter-spacing: .04em;
}

.footer-callback__status {
    flex: 1 0 100%;
    margin: 0;
    min-height: 1.2em;
    font-size: .88rem;
    color: rgba(255, 255, 255, .72);
}

/* Klasy stanu ustawia form-validator.js (wspolne dla obu formularzy). */
.footer-callback__status.form-status--error,
.footer-form__status.form-status--error { color: #ff8fd0; }
.footer-callback__status.form-status--success,
.footer-form__status.form-status--success { color: #8df5c8; }

.footer-callback__note {
    margin: .7em 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .42);
}

.footer-callback__note a { color: rgba(255, 255, 255, .72); }

/* ── [2] FORMULARZ ───────────────────────────────────────────
   Wzorzec z referencji usera: etykieta nad polem, pole jako sama kreska
   (bez ramki), na ciemnym tle nieba. Wszystko przezroczyste, zeby
   ilustracja przebijala i bylo "widac, co sie dzieje". */

.site-footer__form-slot {
    display: flex;
}

.footer-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.9vh, 22px);
}

.footer-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 2vw, 24px);
}

/* Etykieta lezy NA polu (position:absolute) i znika przy focusie albo gdy
   cos juz wpisano. Dzieki temu z kazdego pola zostaje jedna linijka tekstu
   zamiast dwoch (etykieta + placeholder) - stopka jest duzo lzejsza. */
.footer-form__row {
    position: relative;
    display: flex;
    flex-direction: column;
}

.footer-form__label {
    position: absolute;
    left: 2px;
    top: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

/* Textarea ma ramke i wieksze wciecie - etykieta musi sie z nim zgadzac. */
.footer-form__row:has(.footer-form__textarea) .footer-form__label {
    left: 15px;
    top: 12px;
}

/* Klikniete albo wypelnione - etykieta znika. :placeholder-shown dziala, bo
   w markupie kazde pole ma placeholder=" " (spacja). */
.footer-form__input:focus + .footer-form__label,
.footer-form__input:not(:placeholder-shown) + .footer-form__label,
.footer-form__textarea:focus + .footer-form__label,
.footer-form__textarea:not(:placeholder-shown) + .footer-form__label {
    opacity: 0;
    transform: translateX(4px);
}

.footer-form__opt {
    font-weight: 500;
    color: rgba(255, 255, 255, .4);
}

.footer-form__input,
.footer-form__textarea {
    width: 100%;
    padding: 10px 2px;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.footer-form__textarea {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    resize: vertical;
    min-height: clamp(64px, 9vh, 96px);
    line-height: 1.5;
}

.footer-form__input::placeholder,
.footer-form__textarea::placeholder {
    color: rgba(255, 255, 255, .32);
}

.footer-form__input:focus,
.footer-form__textarea:focus {
    outline: none;
    border-color: #cc00a6;
    box-shadow: 0 2px 0 0 rgba(204, 0, 166, .35);
}

.footer-form__textarea:focus {
    box-shadow: 0 0 0 3px rgba(204, 0, 166, .18);
}

/* Zgoda RODO - wlasny checkbox w kolorach marki. */
.footer-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.footer-form__consent input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.footer-form__consent-box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .04);
    transition: background .2s ease, border-color .2s ease;
    position: relative;
}

.footer-form__consent input:checked + .footer-form__consent-box {
    background: linear-gradient(135deg, #cc00a6, #7338ea);
    border-color: transparent;
}

.footer-form__consent input:checked + .footer-form__consent-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.footer-form__consent input:focus-visible + .footer-form__consent-box {
    box-shadow: 0 0 0 3px rgba(204, 0, 166, .35);
}

.footer-form__consent-text {
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .55);
}

.footer-form__consent-text a {
    color: rgba(255, 255, 255, .8);
    text-decoration: underline;
}

.footer-form__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Wyglad przycisku bierze sie z .btn-cyber w main.css - ten sam co w calej
   stronie (user: "zeby nie odbiegal"). Tutaj tylko rozmiar i strzalka. */
.footer-form__submit {
    padding: .95rem 2rem;
    font-size: .88rem;
}

.footer-form__submit .site-footer__icon {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
}

.footer-form__submit:hover .site-footer__icon {
    transform: translateX(4px);
}

.footer-form__status {
    margin: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .7);
}

/* Komunikaty bledow z form-validator.js */
.footer-form .field-error {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    color: #ff7ad9;
}

.footer-form .error {
    border-color: #ff4fbe !important;
}

/* ── [3] Pasek dolny ─────────────────────────────────────── */

/* Pasek informacyjny lezy NA ilustracji. Zamiast plaskiego przyciemnienia
   (user: "zamien na gradientowy, ktory dochodzi do 100%") - gradient od
   przezroczystego u gory do pelnej czerni na dole, a cala tresc stopki
   siedzi na nim. Brak gornej kreski, zeby przejscie bylo bezszwowe. */
.site-footer__bottom {
    flex: 0 0 auto;
    /* WAZNE: main.css ma wlasna regule z border-top - stad brala sie
       dluga pozioma kreska przez cala szerokosc (zgloszone przez usera).
       Gradient ma przechodzic bezszwowo, wiec kreske kasujemy jawnie. */
    border-top: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 4, 8, 0) 0%,
        rgba(0, 4, 8, .45) 18%,
        rgba(0, 4, 8, .8) 38%,
        rgba(0, 4, 8, .95) 60%,
        #000408 100%
    );
    /* Gradient zaczyna sie wyzej niz sama tresc - dzieki temu nie ma
       widocznej krawedzi tam, gdzie zaczyna sie przyciemnienie. Ujemny
       margines rowny paddingowi, wiec pasek NIE dokłada wysokosci. */
    padding-top: clamp(56px, 10vh, 120px);
    margin-top: clamp(-120px, -10vh, -56px);
}

/* ── PASEK DOLNY: uklad poziomy ──────────────────────────────
   Rzad 1: logo | nawigacja pozioma | social
   Rzad 2: duzy mail + telefon (+ adres) w jednej linii
   Baseline: prawa zastrzezone + linki prawne + credit
   Calosc zajmuje ulamek wysokosci, ktora zjadala poprzednia siatka kolumn. */

.site-footer__bar {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vh, 24px);
    padding-block: clamp(12px, 2.4vh, 30px);
}

.site-footer__bar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 48px);
    flex-wrap: wrap;
}

/* Nawigacja w jednej linii - lista z main.css przestawiona na poziom. */
.site-footer__nav-h .site-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(16px, 2.2vw, 34px);
}

.site-footer__nav-h .site-footer__list li a {
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    transition: color .25s ease, background .25s ease;
}

/* Ta sama zasada co przy kontakcie - ciemna pigulka + jasny tekst. */
.site-footer__nav-h .site-footer__list li a:hover {
    padding-left: 12px;
    color: #fff;
    background: rgba(0, 4, 8, .72);
}

.site-footer__nav-h .site-footer__list li a::before {
    display: none;
}

/* Duzy kontakt - mail i telefon. Blok przeniesiony z paska na dole POD
   naglowek "Porozmawiajmy o Twoim projekcie" (prosba usera: "telefon i mail
   przeniesiemy wyzej"). Kreska nad nim oddziela go od akapitu wprowadzajacego. */
.site-footer__bar-contact {
    display: flex;
    align-items: center;
    gap: clamp(20px, 4vw, 64px);
    flex-wrap: wrap;
    margin-top: clamp(16px, 2.4vh, 28px);
    padding-top: clamp(12px, 1.8vh, 20px);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Ciemna "pigulka" pod kontaktem - pojawia sie na hover, wiec tekst zawsze
   ma czytelne tlo niezaleznie od tego, jak jasna jest pod nim ilustracja
   (wczesniej hover zmienial kolor na ciemny roz i numer gubil sie w gorach). */
.site-footer__big {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 6px;
    margin: -6px -14px -6px -6px;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: background .25s ease, box-shadow .25s ease;
}

.site-footer__big:hover {
    background: rgba(0, 4, 8, .72);
    box-shadow: 0 0 0 1px rgba(204, 0, 166, .35);
}

.site-footer__big-value {
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    font-weight: 700;
    color: #fff;
    transition: color .25s ease;
}

/* Jasniejszy, nie ciemniejszy - tekst na hover ma byc bardziej widoczny. */
.site-footer__big:hover .site-footer__big-value {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 110, 245, .45);
}

.site-footer__big:hover .site-footer__icon-badge {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 0 20px rgba(204, 0, 166, .4);
}

/* Linki prawne przy prawach zastrzezonych. */
.site-footer__legal .site-footer__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

.site-footer__legal .site-footer__list li a {
    font-size: .8rem;
    color: rgba(255, 255, 255, .45);
}

.site-footer__legal .site-footer__list li a:hover {
    padding-left: 0;
    color: rgba(255, 255, 255, .85);
}

.site-footer__legal .site-footer__list li a::before {
    display: none;
}

.site-footer__logo {
    display: inline-block;
}

/* Logo jest juz biale z fioletowym "ON" - zadnych filtrow. Wyzsze niz
   w belce, bo w stopce uzywamy PELNEJ wersji z napisem "MEDIA". */
.site-footer__logo img {
    /* Bylo clamp(38px, 4vh, 52px) - user chcial wyraznie wieksze. */
    height: clamp(58px, 7vh, 92px);
    width: auto;
    display: block;
}

.site-footer__logo-text {
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-size: 1.25rem;
    color: #fff;
}

.site-footer__tagline {
    margin: clamp(12px, 1.6vw, 18px) 0 0;
    max-width: 34ch;
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .5);
}

.site-footer__social {
    display: flex;
    gap: 12px;
    margin-top: clamp(16px, 2vw, 24px);
}

.site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    opacity: .75;
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

.site-footer__social a:hover {
    opacity: 1;
    border-color: rgba(204, 0, 166, .6);
    transform: translateY(-2px);
}

/* Naglowek kolumny z gradientowa kreska marki przed tekstem. */
.site-footer__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(16px, 2vw, 22px);
    font-family: var(--font-body), sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.site-footer__heading::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #cc00a6 0%, #7338ea 100%);
}

/* Ikonki inline - rozmiar dziedziczy z kontenera. */
.site-footer__icon {
    width: 1em;
    height: 1em;
    display: block;
}

/* Kolko pod ikona - gradientowa ramka, wypelnienie szklane. */
.site-footer__icon-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 17px;
    border-radius: 50%;
    color: #f0d6ff;
    background:
        linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)) padding-box,
        linear-gradient(135deg, rgba(204, 0, 166, .8), rgba(115, 56, 234, .8)) border-box;
    border: 1px solid transparent;
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}

/* ── Kolumna kontaktu ────────────────────────────────────── */

.site-footer__contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.site-footer__contact-list a,
.site-footer__contact-static {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.site-footer__contact-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

.site-footer__contact-value {
    display: block;
    margin-top: 2px;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: color .25s ease;
}

.site-footer__contact-list a:hover .site-footer__contact-value {
    color: #fff;
}

.site-footer__contact-list a:hover .site-footer__icon-badge {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 0 20px rgba(204, 0, 166, .4);
}

/* ── Przycisk CTA w stopce ───────────────────────────────── */

.site-footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(20px, 2.6vw, 28px);
    padding: .85rem 1.5rem;
    border-radius: var(--radius-full, 999px);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    box-shadow: 0 8px 26px rgba(204, 0, 166, .28);
    transition: transform .25s ease, box-shadow .25s ease;
}

.site-footer__cta .site-footer__icon {
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
}

.site-footer__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(204, 0, 166, .42);
}

.site-footer__cta:hover .site-footer__icon {
    transform: translateX(4px);
}

.site-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer__list li,
.site-footer__list li a {
    font-size: .95rem;
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
}

/* Link nawigacji: kropka marki wjezdza od lewej, tekst przesuwa sie
   delikatnie w prawo - drobny detal, ktory ozywia liste. */
.site-footer__list li a {
    position: relative;
    display: inline-block;
    padding-left: 0;
    transition: color .25s ease, padding-left .25s ease;
}

.site-footer__list li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cc00a6, #7338ea);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}

.site-footer__list li a:hover {
    color: #fff;
    padding-left: 16px;
}

.site-footer__list li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.site-footer__baseline {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    flex-wrap: wrap;
    padding-block: clamp(9px, 1.4vh, 18px);
    /* Bez kreski - separacje robi sam odstep (prosba usera). */
    border-top: 0;
}

.site-footer__baseline p {
    margin: 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .35);
}

.site-footer__credit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: .75rem;
    color: rgba(255, 255, 255, .35);
    text-decoration: none;
    transition: color .25s ease;
}

.site-footer__credit-link:hover {
    color: rgba(255, 255, 255, .7);
}

/* Powrot na sam poczatek - maly, w prawym dolnym rogu, obok creditu. */
.site-footer__to-top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .45rem .85rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .62);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.site-footer__to-top .site-footer__icon {
    width: 15px;
    height: 15px;
    transition: transform .25s ease;
}

.site-footer__to-top:hover {
    color: #fff;
    border-color: rgba(204, 0, 166, .8);
    background: rgba(204, 0, 166, .16);
    transform: translateY(-2px);
}

.site-footer__to-top:hover .site-footer__icon {
    transform: translateY(-2px);
}

/* ── Mobile ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .site-footer__star {
        animation: none;
        display: none;
    }
    .site-footer__twinkle {
        animation: none;
        opacity: .5;
    }
    .site-footer__flag-light {
        animation: none;
        opacity: .9;
    }
    .site-footer__sky-layer,
    .site-footer__terrain {
        transform: none;
    }
}

@media (max-width: 900px) {
    .site-footer__stage {
        min-height: 0;
    }
    /* ILUSTRACJA W PIONIE (9:16) zamiast kadrowanej panoramy.
       Panorama ma proporcje 2.36:1 - przy background-size:cover na ekranie
       390 px zostawala z niej srodkowa scianka gor, astronauta z flaga
       wypadal poza kadr. Portretowa wersja (768x1376, ta sama ilustracja
       przekomponowana) miesci sie CALA: przy 390 px szerokosci potrzebuje
       ~700 px wysokosci, wiec kadr nie jest ani zoomowany, ani przyciety.
       Parallax na dotyku i tak jest wylaczony, wiec zamiast dwoch warstw
       (niebo + teren) uzywamy jednej - mniej dekodowania na telefonie. */
    .site-footer__scene {
        height: min(78%, calc(100vw * 1.792));
    }
    .site-footer__sky-layer {
        display: none;
    }
    .site-footer__terrain {
        background-image: url('../img/footer-portrait.webp?v=20260923');
        background-position: center bottom;
        /* Ta sama maska co miala warstwa nieba w wersji panoramicznej. Bez
           niej gorna krawedz ilustracji tnie sie o tlo sekcji widocznym
           szwem, a jej wlasne (nieprzezroczyste) niebo zaslania spadajace
           gwiazdy i meteory z warstwy .site-footer__sky, ktora lezy pod
           spodem. Rozmycie do 34% zostawia meteory widoczne. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
    }
    .site-footer__top {
        grid-template-columns: 1fr;
        /* Gorny padding liczony od belki - naglowek "Porozmawiajmy..."
           wchodzil pod logo (audyt mobile 2026-09-16). */
        padding-top: calc(var(--nav-height, 64px) + 28px);
        padding-bottom: clamp(48px, 10vw, 72px);
    }

    /* Parallax warstw wylaczony - na dotyku scroll jest natywny i szybki,
       przesuwanie tla za nim daje efekt plywania zamiast glebi. Nadpisuje
       transformy sterowane zmienna --footer-par z main.js. */
    .site-footer__sky-layer {
        transform: scale(1.05);
    }
    .site-footer__terrain {
        transform: none;
    }

    /* Mniej meteorow (dzieci 1-12 to twinkle, 13-19 to meteory) - zostaja
       trzy pierwsze, reszta znika. Mniej animacji kompozytora na budzetowych
       telefonach. */
    .site-footer__sky span.site-footer__star:nth-child(n+16) {
        display: none;
    }

    /* iOS: pola < 16px powoduja auto-zoom przy fokusie. */
    .footer-form__input,
    .footer-form__textarea,
    .footer-callback__input {
        font-size: 16px;
    }
    .footer-form__grid {
        grid-template-columns: 1fr;
    }
    .site-footer__bottom-grid {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__brand {
        grid-column: 1 / -1;
    }

    /* ── WYSRODKOWANIE (prosba usera) ─────────────────────────
       Na waskim ekranie stopka jest jedna kolumna, wiec wszystko stoi na
       osi srodka: naglowek, akapit, kontakt, przyciski, logo, nawigacja,
       stopka prawna. JEDYNY wyjatek to pola formularza zapytania - tekst
       wpisywany do inputa i etykiety lezace NA polu musza trzymac sie lewej
       krawedzi, inaczej kursor skacze na srodek i pole wyglada na zepsute.
       Sam przycisk "Wyslij zapytanie" juz jest wysrodkowany. */
    .site-footer__top {
        text-align: center;
    }

    .site-footer__sub {
        margin-inline: auto;
    }

    /* Mail i telefon jeden pod drugim - w jednej linii nie mieszcza sie na
       390 px i lamia sie krzywo. Wysrodkowany jest CALY blok (width:fit-content
       + margin auto), a wiersze w nim stoja do lewej, dzieki czemu obie ikony
       leza na jednej osi. Przy align-items:center kazdy wiersz centrowalby sie
       osobno i kolka rozjezdzalyby sie wzgledem siebie. */
    .site-footer__bar-contact {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin-inline: auto;
        gap: 14px;
    }

    .footer-callback {
        margin-inline: auto;
    }

    .footer-callback__form {
        justify-content: center;
    }

    /* Pole na numer bierze cala szerokosc, przycisk siada pod nim na srodku. */
    .footer-callback__field {
        flex: 1 1 100%;
    }

    .footer-callback__btn {
        margin-inline: auto;
    }

    /* Uwaga pod przyciskiem tez na srodku (prosba usera). */
    .footer-callback__note,
    .footer-callback__status {
        text-align: center;
    }

    /* Formularz zapytania - jedyny blok trzymany do lewej. */
    .footer-form {
        text-align: left;
    }

    /* Kolumna, nie rzad: pusty <p> ze statusem jest nadal elementem flexa,
       wiec przy justify-content:center gap 16px zjezdzal przycisk o 8 px
       w lewo (zmierzone). W kolumnie przycisk siedzi dokladnie na osi. */
    .footer-form__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Pigulka hovera ma niesymetryczne padding/margin (6px z lewej, 14px
       z prawej) - w rzedzie to nie przeszkadza, ale wysrodkowany blok
       przesuwalo to o 4 px. Na mobile symetrycznie. */
    .site-footer__big {
        padding-inline: 10px;
        margin-inline: -10px;
    }

    .site-footer__bar-top {
        flex-direction: column;
        justify-content: center;
        gap: clamp(18px, 4vw, 32px);
    }

    .site-footer__nav-h .site-footer__list {
        justify-content: center;
    }

    .site-footer__social {
        margin-top: 0;
        justify-content: center;
    }

    .site-footer__baseline {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 14px;
    }

    /* Na szerokim ekranie credit jest dosuniety do prawej (margin-left:auto) -
       w kolumnie zepchnalby sie sam na dol. */
    .site-footer__credit-link {
        margin-left: 0;
    }

    .site-footer__legal .site-footer__list {
        justify-content: center;
    }

    /* PAS NA ILUSTRACJE POD TRESCIA.
       Scena jest zakotwiczona przy dolnej krawedzi stopki, a astronauta lezy
       w niej na wysokosci 54-69% obrazka, czyli ~220-330 px nad dolem. Bez
       tego zapasu ladowal dokladnie za logo i nawigacja (sprawdzone na
       stagingu). Padding powieksza stopke w dol, wiec tresc i ilustracja
       rozjezdzaja sie: tekst konczy sie nad astronauta, a on zostaje sam
       w kadrze jako zamkniecie strony.

       Gradient przyciemniajacy MUSI sie skonczyc zanim dojdzie do tego pasa -
       wersja desktopowa idzie do pelnej czerni na 100%, co zamalowaloby
       astronaute razem z mrugajaca flaga. Tutaj ciemnieje pod tekstem
       i wraca do przezroczystosci nizej. */
    .site-footer__bottom {
        padding-bottom: clamp(270px, 88vw, 360px);
        background: linear-gradient(
            180deg,
            rgba(0, 4, 8, 0) 0%,
            rgba(0, 4, 8, .5) 12%,
            rgba(0, 4, 8, .86) 26%,
            rgba(0, 4, 8, .88) 52%,
            rgba(0, 4, 8, .45) 68%,
            rgba(0, 4, 8, 0) 80%
        );
    }
}

@media (max-width: 560px) {
    .site-footer__bottom-grid {
        grid-template-columns: 1fr;
    }
}

/* Przycisk "Ustawienia cookies" ma wygladac i zachowywac sie jak pozostale
   linki prawne obok. Jest przyciskiem, a nie linkiem, bo nie prowadzi pod
   zaden adres, tylko otwiera okno wyboru. */
.site-footer__legal-cookies {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    opacity: .72;
    transition: opacity .2s ease;
}

.site-footer__legal-cookies:hover,
.site-footer__legal-cookies:focus-visible {
    opacity: 1;
    text-decoration: underline;
}