/* style.css */
:root {
    /* === PALETA (kontrast weryfikowany wg WCAG 2.1) ===
       Mięta   #A8D5B2 — kolor GŁÓWNY (marka). Jest JASNY, więc wszędzie tam,
                         gdzie jest tłem (pasek nawigacji, menu mobilne,
                         pływający przycisk), tekst i logo muszą być CIEMNE:
                         #050505 daje 9.26:1 na pasku, biały tylko 2.09:1.
                         Jako tekst na ciemnym tle strony: 11.11:1.
       Slate   #45636B — kolor AKCJI / CTA. Jest CIEMNY, więc tekst na nim
                         musi być JASNY: #F9F9F9 = 6.14:1 (czarny tylko 3.15:1).
                         UWAGA: nie używać go jako koloru tekstu na ciemnym
                         tle strony — daje tam 2.81:1.
       Szary   #9DA092 — kolor DODATKOWY: drugorzędne przyciski, obramowania,
                         drobne elementy. Na ciemnym tle 6.82:1; gdy jest tłem,
                         tekst na nim ciemny (#050505 = 7.64:1).
       Bez zmian: #050505 (czarny), #F9F9F9 (biały), #1E2321 i #3D4542
       (ciemne szarości — nietykane zgodnie z ustaleniem).                   */
    --bg-main: #141614;
    --text-main: #F7FAF7;
    --bg-secondary: #0B0C0B;

    --accent: #A8D5B2;          /* główny (jasny) */
    --custom-btn: #45636B;      /* akcja / CTA (ciemny) */
    --secondary: #9DA092;       /* dodatkowy — 2. przyciski, obramowania */

    /* Semantyczne kolory tekstu — używać ZAMIAST wpisywania kolorów wprost,
       żeby nie zgubić kontrastu przy kolejnej zmianie palety. */
    --text-on-light: #050505;   /* na #A8D5B2 i #9DA092 */
    --text-on-accent: #F9F9F9;  /* na #45636B */

    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    --neon: #35D89B;

    /* --- Tokeny spójności: aliasy + zmienne używane w podstronach (uslugi-szczegoly.css, zobacz-jak.css) --- */
    --sage-green: var(--accent);
    --dark-bg: var(--bg-secondary);
    --text-light: rgba(247, 250, 247, 0.82);
    --text-muted: rgba(247, 250, 247, 0.70);
    /* --border-light: subtelne linie ozdobne (celowo ledwo widoczne).
       --border-ui: obramowania elementów sterujących — kolor dodatkowy
       #9DA092 daje 6.82:1 na tle strony, znacznie powyżej wymogu 3:1. */
    --border-light: rgba(247, 250, 247, 0.18);
    --border-ui: var(--secondary);

    /* Powierzchnie (zastępują kolory wpisywane na sztywno) */
    --bg-darker: #101210;
    --bg-elevated: #232623;
    --bg-deep: #0E100E;

    /* Skala promieni zaokrągleń */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Offset pod sticky-header */
    --header-height: 80px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
    /* custom cursor */
}

html {
    scroll-behavior: smooth;
    scrollbar-color: var(--accent) var(--bg-main);
    scrollbar-width: thin;
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1C1D1C;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 4px;
}

/* Po najechaniu suwak rozjaśnia się do koloru głównego — wcześniej ciemniał
   do wariantu starej, ciemnej zieleni, co przy jasnej palecie było odwrotnie
   niż trzeba (na ciemnym torze suwak ma stawać się bardziej widoczny). */
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.btn {
    font-family: var(--font-heading);
}

.main-hero-logo {
    width: 600px;
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-logo-container.scrolled-down {
    opacity: 0;
    transform: translate(-50%, -80%);
}

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


/* ---------- Lockup marki: sygnet + napis (oba kadrowane z oryginalow) ---------- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    /* Oddech nad i pod logo — pasek nawigacji rośnie razem z nim */
    margin-block: 6px;
}

/* =====================================================================
   LOGO — kadrowanie oryginalnych plikow bezposrednio w CSS.
   Pliki z logo maja ok. 90% pustego pola dookola napisu, wiec wstawione
   wprost renderowalyby sie mikroskopijnie. Zamiast tworzyc przyciete
   kopie (ktore trzeba pamietac o wgraniu na serwer) wycinamy wlasciwy
   fragment tlem, uzywajac wylacznie plikow, ktore juz na serwerze sa.

   Zmienne opisuja plik:  --pw/--ph = plotno,  --cx/--cy = pozycja napisu,
   --cw/--ch = rozmiar samego napisu.

   ROZMIAR USTAWIA SIE PRZEZ --mark-h (nie przez height!). Szerokosc, skala
   tla i przesuniecie kadru wyliczaja sie z tej jednej wartosci, wiec dziala
   przy dowolnej wysokosci. Ustawienie samego `height` NIE zadziala — element
   bedzie mial zla szerokosc i zle wykadrowane tlo.
   ===================================================================== */
.brand-mark {
    display: block;
    flex-shrink: 0;
    /* Rozmiar steruje JEDNA zmienna --mark-h; reszta liczy sie z niej.
       Poprzednia wersja uzywala `aspect-ratio: var() / var()` oraz
       `calc(... / (var(--pw) - var(--cw)) * 100%)`. Dzielenie przez wyrazenie
       w nawiasach jest niezgodne ze specyfikacja (po prawej stronie `/` musi
       byc zwykla liczba) — Chrome to wybaczal, Safari odrzucal cala deklaracje
       i logo na iPhonie renderowalo sie mikroskopijnie. Tutaj kazde dzielenie
       jest przez pojedyncza zmienna liczbowa (--ch), co parsuje sie wszedzie. */
    height: var(--mark-h);
    width: calc(var(--cw) / var(--ch) * var(--mark-h));
    background-repeat: no-repeat;
    background-size: calc(var(--pw) / var(--ch) * var(--mark-h)) auto;
    background-position: calc(-1 * var(--cx) / var(--ch) * var(--mark-h)) calc(-1 * var(--cy) / var(--ch) * var(--mark-h));
    /* --mark-h samo sie nie animuje (nie jest zarejestrowana), ale wyliczone
       z niej height/width/background-size juz tak — stad plynne kurczenie. */
    transition: height 0.3s, width 0.3s, background-size 0.3s;
}

/* Napis „Sybernetic" — wersja CZARNA: pasek nawigacji i menu mobilne mają
   teraz jasne, miętowe tło (#A8D5B2), więc ciemny napis daje 9.26:1,
   a biały tylko 2.09:1. */
.brand-mark.logo,
.brand-mark.mobile-nav-logo {
    --pw: 1600;
    --ph: 397;
    --cx: 105;
    --cy: 133;
    --cw: 1392;
    --ch: 133;
    background-image: url("assets/nowe-logo-sybernetic12.png");
}

/* Napis „Sybernetic" — wersja BIAŁA: stopka pozostaje ciemna (19.6:1). */
.footer-col.branding .brand-mark.logo {
    --pw: 1600;
    --ph: 1600;
    --cx: 248;
    --cy: 750;
    --cw: 1104;
    --ch: 100;
    background-image: url("assets/Sybernetic PNG_AREA 23.png");
}

/* Sygnet */
.brand-sygnet {
    --pw: 728;
    --ph: 728;
    --cx: 149;
    --cy: 81;
    --cw: 433;
    --ch: 555;
    background-image: url("assets/nowe-logo-sybernetic8.png");
    /* Plik sygnetu jest czarny — na jasnym, miętowym pasku zostaje czarny
       (9.26:1), więc żaden filtr nie jest potrzebny. */
    /* Sygnet trzyma proporcję ~1,5x względem napisu */
    --mark-h: clamp(30px, 2.9vw, 45px);
    transition: height 0.3s;
}

.sticky-header.scrolled .brand-sygnet {
    --mark-h: clamp(26px, 2.45vw, 38px);
}

/* W stopce jest sam napis — bez sygnetu (decyzja z 2026-08-19). */

/* Nazwa firmy dla czytnikow ekranu i robotow — logo jest tlem, wiec sam
   obrazek nie niesie tekstu. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Custom Cursor */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, transform 0.1s linear;
}

body.hovering #custom-cursor {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section {
    padding: 100px 0;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    font-weight: 700;
}

/* Top Banner */
.top-banner {
    background-color: #2b2c2b;
    /* Dark gray to fit the theme */
    color: var(--accent);
    /* Accent text */
    text-align: center;
    padding: 0.34rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1001;
    /* Above header */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Chudy pasek z adresem (nielepki — przewija się razem z górą strony) */
.address-banner {
    background-color: #232423;
    color: var(--text-muted);
    text-align: center;
    padding: 0.28rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.address-banner svg {
    width: 13px;
    height: 13px;
    color: var(--accent);
    flex-shrink: 0;
}

/* Header */
.sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: rgba(168, 213, 178, 0.85);
    /* #A8D5B2 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    z-index: 1000;
    transition: padding 0.3s;
}

.sticky-header .logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-on-light);
    /* pliki są ciasno przycięte (proporcja ~8.7), więc wysokość jest mniejsza
       niż przy dawnym logo z dużym marginesem — realna wielkość napisu ta sama */
    /* Płynnie z szerokością okna: ~20px przy 1200px, ~25px przy 1440px,
       maks. 30px. Sztywne 27px mieściło się przy 1280px na styk (11px luzu),
       a przy 1201px lockup + menu + przyciski już by się nie zmieściły. */
    --mark-h: clamp(20px, 1.95vw, 30px);
    transition: transform 0.3s, height 0.3s;
}

.sticky-header.scrolled .logo {
    --mark-h: clamp(17px, 1.65vw, 26px);
    /* Shrinks slightly on scroll */
}

.sticky-header .logo:hover {
    transform: scale(1.03);
}

.main-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.mobile-nav-logo,
.mobile-only-link {
    display: none;
}

/* Lockup wewnątrz .main-nav jest wyłącznie dla rozwiniętego menu mobilnego.
   Na desktopie ukryty był tylko napis (.mobile-nav-logo), więc sam sygnet
   zostawał widoczny i wisiał między logo a pozycjami menu. */
.main-nav .brand-lockup {
    display: none;
}

.main-nav a {
    /* Pasek jest jasną miętą, więc tekst ciemny: 9.26:1 (jasny dałby 2.09:1) */
    color: var(--text-on-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    padding: 0.5rem 0;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--bg-secondary);
    transition: width 0.3s;
}

.main-nav a:hover::after {
    width: 100%;
}

.action-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: inline-block;
    transition: all 0.3s;
}

.btn-high-contrast {
    /* Tło przycisku to ciemny #45636B — jasny tekst daje 6.14:1
       (ciemny dałby tylko 3.15:1). */
    color: var(--text-on-accent);
}

.btn-custom {
    background-color: var(--custom-btn);
    border: 1px solid var(--custom-btn);
}

.btn-neon {
    background-color: var(--neon);
    border: 1px solid var(--neon);
}

.btn-high-contrast:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-contact {
    border: 1px solid rgba(5, 5, 5, 0.45);
    color: var(--text-on-light);
    background: transparent;
}

.btn-contact:hover {
    background: var(--text-on-light);
    color: var(--text-main);
}

/* Gray Outlined Button */
.btn-gray-outline {
    background: transparent;
    /* Przycisk drugorzędny — kolor dodatkowy #9DA092 (6.82:1 na tle strony) */
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 1rem 2rem;
    border-radius: 4px;
    /* Slight rounding */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-gray-outline:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
}

.btn-gray-outline:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

/* Floating Contact Dropdown */
.floating-contact-wrapper {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1500;
}

.floating-contact-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--text-on-light);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-contact-btn:hover {
    transform: scale(1.1);
}

.floating-contact-btn svg {
    width: 28px;
    height: 28px;
}

.floating-contact-menu {
    position: absolute;
    bottom: 80px;
    right: 0;
    background: rgba(30, 35, 33, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.floating-contact-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
}

.floating-contact-menu a {
    padding: 1rem 1.5rem;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, color 0.2s;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.floating-contact-menu a:hover {
    background: var(--bg-main);
    color: var(--accent);
}

.floating-contact-menu a:last-child {
    border-bottom: none;
}

.mobile-toggle {
    display: none;
}

/* Scroll To Top Button */
.scroll-to-top-wrapper {
    position: fixed;
    bottom: 6.5rem;
    /* Above the contact button */
    right: 2rem;
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.scroll-to-top-wrapper.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Contact Dropdown */
.contact-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.contact-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: rgba(30, 35, 33, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    overflow: hidden;
}

.contact-dropdown.active {
    display: flex;
    flex-direction: column;
}

.contact-dropdown a {
    padding: 1rem;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, color 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-dropdown a:hover {
    background: var(--bg-main);
    color: var(--accent);
}

.contact-dropdown a:last-child {
    border-bottom: none;
}

/* Hero Section Split */
.hero-split {
    display: flex;
    /* WYSOKOŚĆ HERO — liczona z budżetu pierwszego ekranu, nie „na oko".
       Warunek nadrzędny: nagłówek następnej sekcji („Czym zajmujemy się
       w Sybernetic") musi zostać widoczny bez przewijania. Odejmowane 340 px
       to zmierzone koszty stałe nad hero i pod nim:
         nad:  27 baner + 24 pasek adresu + 89 nagłówek            = 140
         pod:  67 pasek CTA + 80 odstęp sekcji + 23 nagłówek        = 170
         zapas, żeby nagłówek nie dotykał krawędzi ekranu           =  30
       UWAGA na 89 px: `.sticky-header` KURCZY SIĘ przy przewijaniu (do 65 px).
       Liczy się stan przed przewinięciem — czyli ten wyższy — bo o widoczności
       „powyżej zagięcia" decyduje pierwszy widok strony. Pomiar zrobiony na
       przewiniętej stronie zaniża tę wartość i zjada cały zapas.
       Przy 1920×1080 daje to hero 740 px i 30 px zapasu pod nagłówkiem
       (sprawdzone pomiarem na żywej stronie).

       Sufit 820 px: bez niego na monitorze 1440 px wysokości wracałby stary
       problem — treść wyśrodkowana w ogromnej sekcji i 300 px pustki nad
       nagłówkiem.

       `min-height`, a nie `height`: przy dłuższym tytule albo powiększonej
       czcionce w przeglądarce sztywna wysokość razem z `overflow: hidden`
       ucinała pierwszy wiersz. Poniżej ~1000 px wysokości okna wyrażenie
       schodzi pod wysokość samej treści i przestaje obowiązywać — sekcja
       zachowuje się wtedy dokładnie jak dotąd. */
    min-height: min(calc(100vh - 340px), 820px);
    overflow: hidden;
}

/* Zamiana stron: odzyskiwanie danych po lewej, serwis laptopów po prawej.
   Robione przez `order`, a nie przenoszenie bloków w index.php — kolejność
   w kodzie zostaje, więc parallax w script.js (trzyma referencje po klasach)
   i kolejność czytania przez roboty pozostają nietknięte. */
.hero-split .hero-data {
    order: 1;
}

.hero-split .hero-pc {
    order: 2;
}

.hero-side {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Pion odrobinę luźniej niż 4rem — po skróceniu hero treść siedziała
       zbyt ciasno przy krawędziach. Poziom zostaje bez zmian. */
    padding: 5rem 4rem;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    overflow: hidden;
    /* Ensure bg shapes don't spill */
}

/* Geometric Background in Hero */
.geo-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.geo-shape {
    position: absolute;
    opacity: 0.08;
    /* Subtle */
}

.geo-circle {
    width: 600px;
    height: 600px;
    border: 2px solid #fff;
    border-radius: 50%;
    top: -150px;
    left: -200px;
    animation: rotateSlow 60s linear infinite;
    transform-origin: center;
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.05);
}

.geo-line-1 {
    width: 150%;
    height: 1px;
    background: #fff;
    top: 30%;
    left: -25%;
    transform: rotate(35deg);
}

.geo-line-2 {
    width: 150%;
    height: 1px;
    background: #fff;
    bottom: 20%;
    left: -25%;
    transform: rotate(-15deg);
}

.geo-cross {
    width: 100px;
    height: 100px;
    bottom: 15%;
    left: 20%;
    background-image: none;
    opacity: 0.08;
}

.geo-polygon {
    width: 150px;
    height: 150px;
    top: 10%;
    right: 15%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
    animation: pulsePolygon 15s infinite alternate ease-in-out;
}

@keyframes pulsePolygon {
    0% { transform: rotate(45deg) scale(0.9); opacity: 0.05; }
    100% { transform: rotate(135deg) scale(1.2); opacity: 0.15; }
}

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-pc {
    background-color: var(--bg-main);
    transform: translateX(-100%);
    animation: slideInLeft 1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-pc-darker {
    background-color: var(--bg-darker);
    /* Darkened for contrast */
}

.hero-data {
    background-color: var(--bg-secondary);
    transform: translateX(100%);
    animation: slideInRight 1s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

.hero-split:hover .hero-side {
    filter: brightness(0.6);
    flex: 0.85;
}

.hero-split .hero-side:hover {
    filter: brightness(1);
    flex: 1.15;
}

/* Delikatna obwódka po najechaniu. Rysuje się od środka na zewnątrz i lekko
   rozjaśnia — ma dopełniać istniejące rozsuwanie, a nie konkurować z nim.
   pointer-events: none, żeby ramka nie przechwytywała kliknięć w treść. */
.hero-split .hero-side::after {
    content: "";
    position: absolute;
    inset: 1.25rem;
    border: 1px solid rgba(168, 213, 178, 0.35);
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-split .hero-side:hover::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

    .hero-split .hero-side::after {
        transition: opacity 0.2s ease;
        transform: none;
    }
}

@keyframes slideInLeft {
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        transform: translateX(0);
    }
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    background-size: 30px 30px;
    pointer-events: none;
}

.hero-content {
    position: relative;
    /* Wyzej niz .hero-graphic (z-index 2): oba byly na 2, a grafika jest dalej
       w kodzie, wiec malowala sie NA tekscie i przyciskach. Przy powiekszonych
       rysunkach bylo to widac — teraz rysunek przechodzi za trescia. */
    z-index: 3;
    max-width: 600px;
}

.hero-side h1 {
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.hero-side h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 5px;
    background: var(--accent);
    border-radius: 3px;
    box-shadow: 0 0 15px var(--accent);
}

.hero-side p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.9;
    font-weight: 300;
}

.btn-outline {
    border: 1px solid var(--text-main);
    color: var(--text-main);
    padding: 1rem 2rem;
}

.btn-outline:hover {
    background: var(--text-main);
    color: var(--bg-secondary);
}

.sub-headline {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

/* Tags in Hero */
.hero-tags {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0.9;
}

.tag-link {
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag-link:hover {
    background: rgba(168, 213, 178, 0.15);
    border-color: var(--accent);
    color: var(--accent);
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Zielone tagi zawsze w osobnym rzędzie pod białymi */
.tag-row-green {
    margin-top: 0.5rem;
}

/* Zielony wariant tagu = „co robimy” (type = rozwiazanie) */
.tag-green {
    color: var(--accent);
    border-color: rgba(168, 213, 178, 0.55);
    background: rgba(168, 213, 178, 0.12);
    opacity: 1;
}

.tag-green.tag-link:hover {
    background: rgba(168, 213, 178, 0.28);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(168, 213, 178, 0.25);
}

.tag-row-secondary .tag {
    color: var(--accent);
    border-color: rgba(168, 213, 178, 0.3);
}

/* Graphics */
.hero-graphic {
    position: absolute;
    /* Hero jest niższy niż kiedyś, więc rysunki schodzą w sam róg — przy
       starych 15% wchodziły środkiem na akapit i przyciski. */
    bottom: 6%;
    right: 6%;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.2s ease-out;
}

/* Powiekszony laptop siega dalej w prawo niz przedtem — bez tego odsuniecia
   wchodzilby w sasiednia polowe hero (a parallax w script.js dorzuca +/-15px).
   Tylko dla ukladu dwukolumnowego: ponizej 1200px hero jest jednokolumnowe
   i to odsuniecie spychaloby rysunek poza ekran. */
@media (min-width: 1201px) {
    .hero-graphic.graphic-pc {
        right: 10%;
    }

    /* Węższa kolumna tekstu zostawia rysunkom własny pas po prawej.
       Przy pełnych 600px wiersze wchodziły pod laptop/telefon. */
    .hero-content {
        max-width: 34rem;
    }
}

/* Precision PC / Laptop */
.graphic-pc .precision-elements {
    position: relative;
    width: 300px;
    height: 200px;
    /* Powiekszenie ~1,75x. Skala dopisana do istniejacej transformacji 3D —
       osobna deklaracja transform by ja nadpisala i laptop stracilby perspektywe.
       Skalujemy transformacja, a nie width/height, bo czesci laptopa sa
       pozycjonowane absolutnie w pikselach i nie skalowalyby sie razem. */
    transform: perspective(800px) rotateX(20deg) rotateY(-20deg) scale(var(--skala-laptop, 1.25));
}

.graphic-pc .white-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.graphic-pc .white-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 8px #fff;
    animation: drawLine 3s infinite ease-in-out;
}

@keyframes drawLine {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }

    50% {
        transform: scaleX(1);
        transform-origin: left;
    }

    50.1% {
        transform-origin: right;
    }

    100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

@keyframes drawLineY {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    50.1% {
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

.graphic-pc .line-1 {
    top: 20px;
    right: 0;
    width: 150px;
    height: 1px;
}

.graphic-pc .line-2 {
    bottom: 40px;
    left: -40px;
    width: 200px;
    height: 1px;
}

.graphic-pc .line-3 {
    top: 60px;
    left: 60px;
    width: 1px;
    height: 100px;
}

.graphic-pc .line-3::after {
    animation: drawLineY 3s infinite ease-in-out;
}

.graphic-pc .blueprint-laptop {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 160px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.graphic-pc .blueprint-laptop .screen {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 160px;
    height: 110px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transform-origin: bottom;
    transform: rotateX(15deg);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

/* Cracked screen overlay for laptop */
.graphic-pc .blueprint-laptop .screen::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 80px;
    height: 80px;
    background-image: none;
    opacity: 0.5;
}

.graphic-pc .blueprint-pc {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 70px;
    height: 140px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.graphic-pc .blueprint-pc .panel {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Spiderweb overlay for PC */
.graphic-pc .blueprint-pc .panel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background: transparent;
    opacity: 0.6;
}

/* Blueprint Data Recovery Phone */
.graphic-data .blueprint-phone {
    width: 120px;
    height: 240px;
    border: 1px solid rgba(168, 213, 178, 0.6);
    border-radius: 12px;
    position: relative;
    background: transparent;
    box-shadow: 0 0 20px rgba(168, 213, 178, 0.05);
}

.graphic-data .phone-screen {
    position: absolute;
    top: 10px;
    left: 8px;
    right: 8px;
    bottom: 30px;
    border: 1px dashed rgba(168, 213, 178, 0.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.graphic-data .phone-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: rgba(168, 213, 178, 0.4);
}

.extraction-arrow-down {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid var(--accent);
    animation: extractLoopDown 2s infinite ease-in-out;
    margin-top: 15px;
}

@keyframes extractLoopDown {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(40px);
        opacity: 0;
    }
}

.data-stream {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: 15%;
}

.particle {
    width: 4px;
    height: 8px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0;
    box-shadow: 0 0 6px rgba(168, 213, 178, 0.8);
    animation: dataFlow 2s infinite linear;
}

.p1 {
    animation-delay: 0s;
}

.p2 {
    animation-delay: 0.4s;
}

.p3 {
    animation-delay: 0.8s;
}

.p4 {
    animation-delay: 1.2s;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(168, 213, 178, 0.8);
    box-shadow: 0 0 15px rgba(168, 213, 178, 1);
    animation: scanPhone 3s infinite ease-in-out;
    will-change: transform;
}

/* Transform zamiast 'top' -> animacja na GPU (kompozytor), zero przeliczeń layoutu */
@keyframes scanPhone {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(200px); opacity: 0; }
}

@keyframes dataFlow {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

/* === Zaawansowane animacje grafik hero (laptop / PC / telefon) — lekkie: transform + opacity === */

/* Delikatne unoszenie sprzętu; różne czasy i opóźnienia = organiczny, niesynchroniczny ruch */
/* Skala siedzi w keyframes, bo animacja transformu ma pierwszenstwo nad
   zwykla deklaracja transform i skasowalaby ja. Fallback 1 sprawia, ze
   element bez --skala-hero (laptop, skalowany na rodzicu) nie zmienia sie. */
@keyframes heroFloatY {
    0%, 100% { transform: translateY(0) scale(var(--skala-hero, 1)); }
    50% { transform: translateY(-9px) scale(var(--skala-hero, 1)); }
}

.graphic-pc .blueprint-laptop {
    animation: heroFloatY 6s ease-in-out infinite;
    will-change: transform;
}

.graphic-pc .blueprint-pc {
    animation: heroFloatY 7s ease-in-out infinite 0.6s;
    will-change: transform;
}

.graphic-data .blueprint-phone {
    --skala-hero: 1.2;
    animation: heroFloatY 6.5s ease-in-out infinite 0.3s, phoneGlow 4s ease-in-out infinite;
    will-change: transform;
}

/* Pulsująca poświata krawędzi telefonu */
@keyframes phoneGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(168, 213, 178, 0.05); }
    50% { box-shadow: 0 0 34px rgba(168, 213, 178, 0.28); }
}

/* Linia "diagnostycznego skanu" przesuwająca się po ekranie laptopa */
.graphic-pc .blueprint-laptop .screen .inner-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
}

.graphic-pc .blueprint-laptop .screen .inner-screen::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 35%;
    background: transparent;
    transform: translateY(-120%);
    animation: heroScanDown 3.2s ease-in-out infinite;
    will-change: transform;
}

/* Analogiczny skan na panelu jednostki PC (przesunięty w czasie) */
.graphic-pc .blueprint-pc .panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30%;
    background: transparent;
    transform: translateY(-120%);
    animation: heroScanDown 3.8s ease-in-out infinite 0.8s;
    will-change: transform;
    z-index: 1;
}

@keyframes heroScanDown {
    0%, 12% { transform: translateY(-120%); opacity: 0; }
    22% { opacity: 1; }
    78% { opacity: 1; }
    100% { transform: translateY(330%); opacity: 0; }
}

/* Sections */
.dark-section {
    background: var(--bg-secondary);
}

.mid-dark-section {
    background: var(--bg-main);
}

.accent-section {
    background: var(--accent);
}

.text-dark {
    color: var(--bg-secondary);
}

/* About / Dlaczego My */
.relative-section {
    position: relative;
    overflow: hidden;
}

.video-bg-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Lżejszy overlay — film w tle jest bardziej widoczny (mniej tekstu go zasłania) */
    background: transparent;
    z-index: 1;
}

/* Panele tekstowe nad wideo: ciemniejsze tło + blur dla czytelności mimo lżejszego overlay */
.video-bg-section .text-panel {
    background: rgba(14, 15, 14, 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Sekcja "Dlaczego my?" — teaser + rozwijana pełna treść */
.about-teaser {
    opacity: 0.92;
    line-height: 1.6;
    margin: 0;
}

.about-more {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease;
}

.about-more.open {
    max-height: 600px;
    opacity: 1;
    margin-top: 1rem;
}

.about-more p {
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.about-more p:last-child {
    margin-bottom: 0;
}

.about-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.2rem;
    padding: .55rem 1.1rem;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.about-toggle:hover {
    border-color: var(--accent);
    background: rgba(168, 213, 178, 0.08);
}

.about-toggle-ico {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
}

.about-toggle[aria-expanded="true"] .about-toggle-ico {
    transform: rotate(180deg);
}

/* === Reveal-on-scroll (efekt "Apple") — wyłącznie transform/opacity (GPU) === */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Subtelny "stagger" w obrębie siatki kart */
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .30s; }

/* === Poszanowanie prefers-reduced-motion: maksymalnie lekko, bez zbędnego ruchu === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .bg-video {
        display: none;
    }
}

.user-foreground-photo {
    position: absolute;
    bottom: 0;
    right: 5%;
    height: 85%;
    max-height: 800px;
    z-index: 2;
    object-fit: contain;
    object-position: bottom;
    pointer-events: none;
    filter: drop-shadow(0 -10px 30px rgba(0, 0, 0, 0.5));
}

.z-index-high {
    z-index: 3;
    position: relative;
    width: 100%;
}

.content-above-canvas {
    position: relative;
    z-index: 2;
}

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.glass-panel:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.animated-border {
    position: relative;
    z-index: 1;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: var(--accent);
    z-index: -1;
    animation: rotate-gradient 4s linear infinite;
    opacity: 0.6;
}

.animated-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--bg-elevated);
    /* match photo-placeholder background */
    z-index: -1;
}

@keyframes rotate-gradient {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.float-anim {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, background 0.3s !important;
    will-change: transform;
    z-index: 2;
}

.magnetic-btn:hover {
    box-shadow: 0 0 20px rgba(168, 213, 178, 0.4);
    z-index: 10;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}

.about-grid-new {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Zostawiamy miejsce na zdjęcie po prawej */
    gap: 2rem;
    align-items: center;
}

.text-panel {
    background: rgba(20, 20, 20, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.photo-placeholder {
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.user-photo {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 400px;
    border-radius: 50%;
    /* Circle shape as requested */
    margin: 0 auto;
}

.about-content h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.cert-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Process Section */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.step-card {
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-top: 2px solid var(--accent);
    position: relative;
}

.step-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 1rem;
    right: 1rem;
    line-height: 1;
}

.step-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.step-card p {
    font-size: 0.95rem;
    opacity: 0.7;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

/* Laboratory Grid */
.lab-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.lab-item {
    text-align: left;
}

.lab-photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    margin-bottom: 1.5rem;
}

.lab-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    color: var(--accent);
}

.lab-item p {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.5;
}

/* How We Work Values */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.value-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.4s;
}

.value-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.icon-square {
    width: 60px;
    height: 60px;
    background: var(--bg-main);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--accent);
}

.value-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.value-card p {
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.8;
    font-size: 1.05rem;
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 400px;
    gap: 1.5rem;
}

.gallery-item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #111;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s;
    filter: grayscale(80%) contrast(1.2);
}

.gallery-item:hover img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(1);
}

/* Social */
.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.btn-social {
    color: var(--bg-secondary);
    border: 1px solid var(--bg-secondary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-social:hover {
    background: var(--bg-secondary);
    color: var(--accent);
}

.btn-social .icon {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

/* Blog */
.blog-preview-card {
    display: flex;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.4s ease;
}

.blog-preview-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.blog-image {
    flex: 1;
    background: var(--bg-elevated);
    min-height: 400px;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%);
}

.blog-content {
    flex: 1;
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.blog-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -1px;
}

.blog-content p {
    opacity: 0.7;
    line-height: 1.7;
    font-size: 1.1rem;
}

.margin-top {
    margin-top: 2.5rem;
    align-self: flex-start;
}

/* FAQ Accordion */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(30, 35, 33, 0.2);
    margin-bottom: 1rem;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.5rem 0;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    transition: transform 0.3s;
}

.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    color: rgba(30, 35, 33, 0.8);
}

.faq-answer p {
    padding-bottom: 1.5rem;
    line-height: 1.6;
}

.faq-btn-invert {
    color: #1E2321 !important;
    border-color: #1E2321 !important;
    transition: all 0.3s ease;
}

.faq-btn-invert:hover {
    background-color: #1E2321 !important;
    color: var(--text-main) !important;
}

/* Testimonials */
.testimonial-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    height: 280px;
    /* Lock height to prevent layout shifts */
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    text-align: center;
    transform: translateX(50px);
}

.testimonial.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
    transform: translateX(0);
}

.quote {
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.author {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer & Map */
.map-wrapper {
    height: 450px;
    width: 100%;
    position: relative;
    line-height: 0;
    /* szałwiowa kreska oddzielająca mapę od stopki (zamiast pustego odstępu) */
    border-bottom: 4px solid var(--accent);
}

.map-consent-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    line-height: 1.5;
    text-align: center;
    background: #111715;
    color: var(--text-muted);
}

.map-consent-placeholder[hidden] { display: none; }

.dark-map {
    filter: grayscale(100%) invert(92%) contrast(85%);
    display: block;
    width: 100%;
    height: 100%;
    /* iframe wypełnia wrapper -> brak 50px luki pod mapą */
}

.footer-info {
    background: var(--bg-deep);
    padding: 5rem 0 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-layout {
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(145px, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    margin-bottom: 4rem;
}

.footer-col {
    min-width: 0;
}

.footer-col h4 {
    margin-bottom: 1.5rem;
    color: var(--accent);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.footer-col a,
.footer-col p {
    display: block;
    margin-bottom: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.3s;
    font-size: 0.95rem;
}

.footer-col a:hover {
    opacity: 1;
    color: var(--accent);
}

.footer-cookie-settings {
    display: block;
    padding: 0;
    margin: 0 0 0.8rem;
    border: 0;
    background: none;
    color: inherit;
    opacity: 0.6;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.3s;
}

.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
    opacity: 1;
    color: var(--accent);
}

@media (max-width: 1120px) and (min-width: 769px) {
    .footer-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-col.branding { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .footer-layout { grid-template-columns: 1fr; }
    .footer-col.branding { grid-column: auto; }
}

/* Baner zgody: jednakowo dostępne przyjęcie i odmowa. */
.cookie-banner {
    position: fixed;
    z-index: 5000;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 980px;
    margin: 0 auto;
    padding: 1px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.55);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem;
    border-radius: 15px;
    background: #111715;
}

.cookie-banner__copy { max-width: 650px; }
.cookie-banner h2 { margin: 0 0 0.45rem; font-size: 1.2rem; color: var(--text-main); }
.cookie-banner p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: 0.92rem; }
.cookie-banner a { color: var(--accent); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

.cookie-btn {
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 9px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cookie-btn--primary { background: var(--accent); color: #07110b; }
.cookie-btn--secondary { background: transparent; color: var(--text-main); }
.cookie-btn:focus-visible { outline: 3px solid rgba(168, 213, 178, 0.4); outline-offset: 2px; }

@media (max-width: 760px) {
    .cookie-banner { left: 0.65rem; right: 0.65rem; bottom: 0.65rem; }
    .cookie-banner__inner { align-items: stretch; flex-direction: column; gap: 1rem; }
    .cookie-banner__actions { display: grid; grid-template-columns: 1fr; }
    .cookie-btn { width: 100%; }
}

.branding .logo {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
    /* Podniesione z 17px — przy powiększonym logo w pasku stopka wyglądała
       na niedopasowaną. Stopka ma pełną szerokość, więc miejsca nie brakuje. */
    --mark-h: 26px;
    display: block;
}

.tagline {
    opacity: 0.5;
    font-size: 1rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    font-size: 0.85rem;
    opacity: 0.4;
}

/* Modals */
.modal {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--bg-secondary);
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95) translateY(30px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.close-modal:hover {
    color: #fff;
}

.modal-flex {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.modal-photo {
    flex: 1;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    min-height: 200px;
}

.modal-caption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--accent);
    opacity: 0.8;
}

.text-content h2 {
    margin-bottom: 1.5rem;
}

.text-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    opacity: 0.9;
}

/* Responsiveness */
@media (max-width: 1500px) and (min-width: 1200px) {

    /* Grafiki maja staly rozmiar w px, a polowa hero zwezasie razem z ekranem —
       przy 1,75x laptop wychodzil poza swoja polowe. Telefon ma wiecej luzu
       (stoi blizej krawedzi ekranu), wiec zostaje w pelnej skali. */
    .graphic-pc .precision-elements {
        --skala-laptop: 1.55;
    }

    .hero-side h1 {
        font-size: 2.2rem;
    }

    .hero-side p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .gallery-grid {
        grid-auto-rows: 300px;
    }
}

@media (max-width: 1200px) {
    .hero-split {
        flex-direction: column;
        height: auto;
    }

    .hero-side {
        min-height: 50vh;
        transform: translateX(0);
        animation: none;
        /* Górny odstęp o połowę mniejszy niż dawne 6rem — ta sama korekta co
           na desktopie: nagłówek startował daleko poniżej krawędzi ekranu. */
        padding: 3rem 2rem 4rem;
    }

    .hero-side h1 {
        font-size: 2.0rem;
    }

    .hero-split:hover .hero-side {
        flex: 1;
        filter: none;
    }

    .hero-split .hero-side:hover {
        flex: 1;
        filter: none;
    }

    .hero-graphic {
        opacity: 0.3;
    }

    .blog-preview-card {
        flex-direction: column;
    }

    .blog-content {
        padding: 3rem 2rem;
    }

    .about-grid,
    .about-grid-new {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .user-foreground-photo {
        height: 60%;
        right: -5%;
    }

    .process-steps,
    .lab-grid {
        grid-template-columns: 1fr 1fr;
    }

    .action-buttons {
        display: none !important;
    }

    /* Mniejsze logo + ciaśniejszy nagłówek, by nie najeżdżał na hamburger */
    .sticky-header {
        padding: 0.7rem 1.1rem;
        /* KLUCZOWE: backdrop-filter tworzy containing block dla fixed potomków —
           menu (.main-nav) liczyłoby top:0 od headera (spchniętego przez górne
           paski), przez co ostatnie pozycje (Blog) były ucięte na górze strony.
           Na mobile wyłączamy blur i rekompensujemy kryciem tła. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(168, 213, 178, 0.97);
    }

    /* Logo na telefonie skaluje się PŁYNNIE z szerokością ekranu, zamiast
       skakać na progach. Powód: napis ma proporcję 10,5:1, więc to on zjada
       szerokość — sztywna wartość musiałaby być dobrana pod najwęższy telefon
       i na S23 Ultra (412px) marnowałaby ~70px wolnego miejsca.
       Wyliczenie daje ok. 18px przy 320px, 22px przy 375px i 25px przy 412px;
       sygnet trzyma stałą proporcję ~1,7x względem napisu i sięga niemal
       wysokości paska, który rośnie o margines z .brand-lockup. */
    .sticky-header .logo {
        --mark-h: clamp(18px, 5.8vw, 25px);
    }

    .sticky-header .brand-sygnet {
        --mark-h: clamp(30px, 10vw, 43px);
    }

    /* Po zjechaniu w dół pasek kurczy się o 35%. Logo, margines i padding
       skalowane tym samym współczynnikiem 0,65, żeby proporcje zostały
       nienaruszone — pasek schodzi z ~75px do ~49px. Klasę .scrolled dodaje
       script.js po przewinięciu 50px, ta sama co na desktopie. */
    .sticky-header.scrolled {
        padding: 0.455rem 1.1rem;
    }

    .sticky-header.scrolled .brand-lockup {
        margin-block: 4px;
    }

    .sticky-header.scrolled .logo {
        --mark-h: clamp(11.7px, 3.77vw, 16.25px);
    }

    .sticky-header.scrolled .brand-sygnet {
        --mark-h: clamp(19.5px, 6.5vw, 28px);
    }

    /* Górny pasek („Bezpłatna diagnoza…") znika na telefonie */
    .top-banner {
        display: none;
    }

    .brand-lockup { gap: 0.5rem; }

    /* Lockup w rozwiniętym menu — sygnet nad napisem. display przywracany
       jawnie, bo globalnie ten lockup jest ukryty (potrzebny tylko tutaj). */
    .main-nav .brand-lockup {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .main-nav .brand-sygnet { --mark-h: 54px; }

    /* Setup fullscreen nav base state - hidden via clip-path */
    .main-nav {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(168, 213, 178, 0.98);
        padding: 4vh 1.5rem 3vh;
        box-shadow: none;
        z-index: 1001;
        opacity: 0;
        /* Fade in combination with clip path */
        pointer-events: none;
        overflow-y: auto;
        clip-path: circle(0px at calc(100% - 40px) 40px);
        transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease-out;
    }

    .mobile-nav-logo {
        display: block;
        /* Menu jest pełnoekranowe, więc logo może być wyraźnie większe
           niż w samym pasku. Sterujemy wysokością (jak reszta logo), bo
           szerokość wylicza się z niej automatycznie: 20px -> ~209px. */
        --mark-h: 20px;
        flex-shrink: 0;
        margin-bottom: 0.6rem;
    }

    .main-nav a:first-child {
        margin-bottom: 0.6rem;
        flex-shrink: 0;
        border: none;
    }

    .mobile-only-link {
        display: block;
    }

    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        z-index: 1002;
    }

    .mobile-toggle span {
        width: 30px;
        height: 2px;
        background: var(--text-on-light);
        transition: 0.3s;
    }

    /* Mobile Nav Overlay Active State */
    .main-nav.mobile-active {
        opacity: 1;
        pointer-events: auto;
        clip-path: circle(150% at calc(100% - 40px) 40px);
    }

    .main-nav.mobile-active a:not(:first-child) {
        color: var(--text-on-light);
        font-family: var(--font-heading);
        font-size: clamp(0.9rem, 2.4vh, 1.05rem);
        font-weight: 700;
        padding: clamp(0.4rem, 1.3vh, 0.7rem) 0;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        border-bottom: 1px solid rgba(30, 35, 33, 0.12);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-align: center;
    }

    .main-nav.mobile-active a:not(:first-child):last-child {
        border-bottom: none;
    }

    .modal-content {
        width: 95%;
        padding: 2rem;
    }

    .modal-flex {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-photo img {
        max-height: 250px !important;
        width: auto !important;
    }

    .blog-preview-card {
        transform: scale(0.95);
        margin: 0 auto;
    }

    .blog-image {
        min-height: 200px;
    }

    .user-foreground-photo {
        height: 50%;
        right: -10%;
        opacity: 0.5; /* Lekko przyciemniamy na najmniejszych ekranach dla lepszej czytelności tekstu */
    }

    .blog-content {
        padding: 1.5rem;
    }

    .blog-content .badge {
        margin-bottom: 1rem;
    }

    .blog-content h2 {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }

    .blog-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .testimonial-container {
        padding: 1.5rem;
        height: 350px;
        /* Taller on mobile to account for wrapping text */
    }

    .quote {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {

    /* Na telefonie rysunek laptopa (staly rozmiar w px) w pelnej skali bylby
       przyciety z obu stron — tu jest tylko tlem (opacity 0.3), wiec dostaje
       mniejsze powiekszenie, ktore miesci sie w ekranie. Telefon w 1,75x
       miesci sie bez zmian. */
    .graphic-pc .precision-elements {
        --skala-laptop: 1.25;
    }


    .two-column-grid {
        grid-template-columns: 1fr;
    }

    /* Kafelki pod karuzelą: po 2 obok siebie również na telefonach */
    .gallery-grid,
    .lab-grid,
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-auto-rows: 180px;
    }

    /* Proces realizacji: jeden pod drugim + ściśnięty tekst (naprawa poziomego overflow) */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .step-card {
        padding: 1.5rem 1.5rem 1.25rem;
    }

    .step-card h3 {
        font-size: 1.2rem;
        margin-top: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .step-card p {
        font-size: 0.9rem;
    }

    .step-number {
        font-size: 2.4rem;
    }

    .footer-layout {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-col.branding { grid-column: 1 / -1; }

    /* Sekcja "Sprawdź naszą działalność": same ikony w jednym poziomym rzędzie */
    .social-links {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .social-links .btn-social {
        font-size: 0;
        /* ukrywa tekst, ikona (stałe 24px) zostaje */
        padding: 0;
        width: 48px;
        height: 48px;
        justify-content: center;
        gap: 0;
        border-radius: 50%;
    }

    .social-links .btn-social .icon {
        width: 22px;
        height: 22px;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    #custom-cursor {
        display: none;
    }

    /* Disable custom cursor */
    * {
        cursor: auto !important;
    }
}

/* --- Added for tech marquee --- */

.tech-marquee-wrapper {
    background: #111;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
}

.tech-marquee {
    display: flex;
    align-items: center;
    width: max-content;
    /* dwie równe grupy -> -50% wypada idealnie, bez przerwy */
    animation: marquee-scroll 25s linear infinite;
    will-change: transform;
}

/* Jedna grupa = jeden pełny zestaw elementów. Symetryczny padding (2rem+2rem)
   sprawia, że odstęp na szwie między grupami = wewnętrzny gap (4rem). */
.marquee-group {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 0 2rem;
    flex-shrink: 0;
}

.tech-marquee span:not(.marquee-dot) {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    transition: color 0.3s, transform 0.3s;
}

.tech-marquee span:not(.marquee-dot):hover {
    color: var(--accent);
    transform: scale(1.05);
}

.tech-marquee .marquee-dot {
    color: var(--text-main);
    opacity: 0.3;
    font-size: 1.2rem;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* === THEMATIC SERVICES GRID (HOMEPAGE) === */
.services-thematic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media(max-width: 900px) {
    .services-thematic-grid {
        grid-template-columns: 1fr;
    }
}

.thematic-group {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.thematic-group-sidebar {
    display: flex;
    flex-direction: column;
}

.thematic-group-title {
    color: var(--bg-main);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.thematic-link-card {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    color: var(--bg-main);
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.thematic-link-card:last-child {
    margin-bottom: 0;
}

.thematic-link-card:hover {
    transform: translateX(10px) translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background: var(--bg-main);
    color: #fff;
    border-color: var(--bg-main);
}

/* ===================================================================
   NOWA SEKCJA: Interaktywny panel usług na tle wideo
   =================================================================== */
.uslugi-video-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5rem 0;
    min-height: 480px;
    /* desktop: niski, panoramiczny, kinowy profil */
    background: var(--bg-secondary);
    /* fallback, zanim wideo zostanie wgrane */
}

.uslugi-video-section .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.uslugi-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
}

.uslugi-cards-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
}

.uslugi-section-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--text-main);
    margin: 0 0 1.75rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
}

/* auto-fit => siatka sama dostosowuje układ przy dodaniu/usunięciu kart w CMS */
.uslugi-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.usluga-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--radius-lg);
    background: rgba(15, 16, 15, 0.45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: var(--text-main);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
    will-change: transform;
}

.usluga-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: rgba(15, 16, 15, 0.62);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(168, 213, 178, 0.25);
}

.usluga-card-ico {
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    color: var(--accent);
    transition: transform .35s ease;
}

.usluga-card-ico svg {
    width: 100%;
    height: 100%;
}

.usluga-card:hover .usluga-card-ico {
    transform: scale(1.08) translateY(-2px);
}

.usluga-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 .6rem;
}

.usluga-card p {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 600px) {
    .uslugi-video-section {
        /* mobile: wysokość elastycznie dopasowuje się do treści */
        min-height: 0;
        padding: 3rem 0;
    }

    .uslugi-cards-grid {
        /* mobile: kafelki jeden pod drugim (stary układ) */
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ===================================================================
   PRZEBUDOWANA "DLACZEGO MY?" — 2 kolumny: portret (lewo) + treść (prawo)
   =================================================================== */
.dlaczego-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: center;
}

.dlaczego-photo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: 320px;
}

/* Poświata, z której "wyłania się" wycięta postać na ciemnym tle strony */
.dlaczego-photo::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 80%;
    height: 80%;
    transform: translateX(-50%);
    background: transparent;
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.dlaczego-portrait {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 605px;
    /* Łagodne zanikanie tylko dołu koszulki, poniżej skrzyżowanych rąk. */
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}

.dlaczego-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* identyczny odstęp jak między kartami w sekcji usług wyżej */
}

@media (max-width: 900px) {
    .dlaczego-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .dlaczego-photo {
        min-height: 0;
        order: -1;
        /* na mobile portret nad treścią */
    }

    .dlaczego-portrait {
        max-height: 454px;
    }
}

/* =========================================================================
   GALERIA: podpisy (hover) + lightbox (podgląd / strzałki / X) + paginacja
   ========================================================================= */
.gallery-item {
    cursor: pointer;
}

.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1rem 0.9rem;
    font-size: 0.9rem;
    color: #fff;
    background: rgba(5, 7, 6, .82);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-caption,
.gallery-item:focus-visible .gallery-caption {
    transform: translateY(0);
    opacity: 1;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 9, 8, 0.94);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}

.lightbox.open {
    display: flex;
    opacity: 1;
}

.lightbox-stage {
    max-width: 90vw;
    max-height: 86vh;
    text-align: center;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    margin-top: 1rem;
    color: #e6e6e6;
    font-size: 1rem;
    min-height: 1.2em;
}

.lightbox-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .2s ease, border-color .2s ease;
}

.lightbox-btn:hover {
    background: rgba(168, 213, 178, 0.25);
    border-color: var(--accent);
}

.lightbox-close {
    top: 22px;
    right: 22px;
}

.lightbox-prev {
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 600px) {
    .lightbox-btn {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;
    }
}

/* Paginacja galerii */
.gallery-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 3rem;
}

.gallery-pagination .page-link {
    min-width: 42px;
    height: 42px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-heading);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.gallery-pagination .page-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.gallery-pagination .page-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-secondary);
}

/* Najwezsze telefony (360 px): lockup + hamburger nie miescily sie w jednej
   linii, wiec napis i sygnet dostaja mniejsza wysokosc. Szerokosc wylicza sie
   sama z aspect-ratio, wiec wystarczy zmienic height. */