/* =====================================================================
   strona.css – jeden plik stylow dla strony glownej, podstron uslug i vouchera
   (2026-10-31; uporzadkowany w sekcje 2026-10-31 wieczorem)

   Sekcje: 1. PODSTAWY  2. UKLAD  3. ELEMENTY  4. STRONA GLOWNA  5. PODSTRONY  6. VOUCHER
   Kolory: tylko zmienne z :root (sekcja PODSTAWY). Kolory z przezroczystoscia zapisane
   jako rgba(var(--ciemny-rgb), 0.5) – zmiana koloru w jednym miejscu zmienia wszystkie.
   Kolejnosc regul w sekcji ma znaczenie (pozniejsze nadpisuja wczesniejsze).
   Stary /style.css zostaje na serwerze tylko dla kalkulatora.
   ===================================================================== */

/* =====================================================================
   1. PODSTAWY – zmienne, czcionki, reset, typografia ogolna, animacje wejscia, ograniczenie ruchu
   ===================================================================== */
:root {
    --ciemny-rgb: 13, 13, 13;
    --bialy-rgb: 255, 255, 255;
    --czarny-rgb: 0, 0, 0;
    --akcent-rgb: 212, 188, 163;
    --atrament-rgb: 33, 27, 22;
    --braz-rgb: 122, 91, 65;
    --rec-rgb: 229, 55, 47;
    --rec: #e5372f;
    --whatsapp: #25D366;
    --tekst-jasny: #cfcfd4;
    --bialy: #fff;
    --czarny: #000;
    --akcent-jasny: #e0cbb4;          /* linki uslug pod haslem hero, cena w wyborze uslugi */
    --tekst-oferta: #b8b8bf;          /* lista w karcie oferty (ciemne tlo) */
    --tekst-wyciszony: #a9a9b1;       /* opisy, ceny jednostkowe, etykiety pol */
    --tekst-notka: #a1a1aa;           /* drobna notka pod formularzem */
    --zakladka-wybrana: #d9cfc3;      /* podpis wybranej zakladki oferty (telefon) */
    --karta-wybrana: #fffdf9;         /* tlo karty oferty wskazanej przez wybor uslugi */
    --blad-tlo: #f7e3dc;              /* komunikat bledu formularza */
    --blad-tekst: #6b2416;
    --lightbox-rgb: 5, 5, 5;          /* tlo podgladu zdjec, o ton jasniejsze od czerni */
    --love-blask-rgb: 255, 190, 110;  /* cieply blask zapalanych liter LOVE */
    --love-blask-2-rgb: 255, 170, 90;
    /* Wyjatek: niebieska poswiata loga klienta (kolor marki referencji, uzyty raz) */
    --ref-niebieski-rgb: 78, 179, 255;
}
/* === CZCIONKI Z WLASNEGO SERWERA ===
   Wczesniej ladowane z Google Fonts, co wymagalo dwoch dodatkowych polaczen
   i opoznialo wyswietlenie tekstu hero (element LCP) o ok. 1,3 s. */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    /* optional zamiast swap: tekst rysuje sie tylko raz. Przy swap akapit hero
       byl rysowany dwukrotnie (czcionka zastepcza, potem Inter) i to drugie
       wyswietlenie bylo mierzone jako LCP. Czcionka jest wczytywana z wyprzedzeniem,
       wiec zwykle zdazy; jesli nie - przy nastepnym wejsciu bedzie juz w pamieci. */
    font-display: optional;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
:root {
    --bg-color: #0d0d0d;
    --surface-color: #121212;
    --surface-light: #181818;
    --text-primary: #f4f4f5;
    --text-secondary: #8a8a93;
    --accent-color: #d4bca3;
    --accent-hover: #e6d3c0;
    --border-color: rgba(var(--bialy-rgb), 0.05);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --spacing-xl: 12vw;
    --spacing-lg: 8vw;
    --spacing-md: 4rem;
    --spacing-sm: 2rem;
    --transition-smooth: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box }
/* Zabezpieczenie: zaden obraz nie moze byc szerszy niz jego kontener.
   Bez tego duze zdjecie rozpycha strone na boki i psuje uklad na telefonie. */
img { max-width: 100%; height: auto }
html { scroll-behavior: auto; font-size: 16px; background-color: var(--bg-color); color: var(--text-primary) }
body {
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none }
/* Elementy animowane przez JS startuja jako niewidoczne.
   Pierwszego ekranu juz tu NIE ma - jego tresc musi byc widoczna natychmiast,
   bo akapit hero jest elementem mierzonym jako LCP. */
.reveal-up, .reveal-blur, .reveal-text-scroll { opacity: 0; will-change: transform, opacity }
.italic-accent { font-style: italic; color: var(--accent-color); font-family: var(--font-heading); font-weight: 400 }
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 5vw }
.section-title {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}
.text-center { text-align: center }
.hover-underline { position: relative; display: inline-block }
.hover-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-color);
    transition: width var(--transition-fast);
}
.hover-underline:hover::after { width: 100% }
/* Zapas musi rosnac razem z czcionka, inaczej ogonki liter "y" i "j"
   zostaja przyciete przez overflow: hidden. Ujemny margines kompensuje
   ten zapas, zeby odstepy miedzy liniami zostaly bez zmian. */
.title-line { overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em }
.reveal-text { display: block }
section { padding: var(--spacing-xl) 0 }
/* Poszanowanie systemowego ustawienia ograniczenia ruchu.
   !important celowo: wylacza ruch takze tam, gdzie regula jest bardziej szczegolowa. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width: 768px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)) }
}
/* === STRONA TESTOWA – zmiany po krytyce Impeccable (2026-10-25) ===
   Ladowane po /style.css, wiec tylko nadpisuje. Ciemne zostaja hero, portfolio,
   opinie, "O mnie" (portret na czarnym tle), voucher i stopka; oferta i kontakt
   dostaja jasne, cieple tlo w kolorach dziennego reportazu. */
:root {
    --papier: #f3ede4;
    --papier-karta: #fbf8f3;
    --papier-linia: rgba(var(--atrament-rgb), 0.14);
    --atrament: #211b16;
    --atrament-2: #5b4f45;
    --braz: #7a5b41;
    --braz-hover: #5f4632;
}
/* naglowek sekcji nie chowa sie pod paskiem menu przy skoku do kotwicy */
html { scroll-padding-top: 110px }
::selection { background: var(--accent-color); color: var(--bg-color) }
.sekcja-jasna ::selection { background: var(--braz); color: var(--papier-karta) }
/* --- naglowki: jeden krój, bez slowa kursywa w kazdym H2 --- */
.section-title { font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: -0.01em; text-wrap: balance }
.section-title .italic-accent { font-style: normal; color: inherit }
.sekcja-jasna .section-title { color: var(--atrament) }
.sekcja-jasna .hover-underline::after { background-color: var(--braz) }
.sekcja-jasna .detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--atrament-2);
    margin-bottom: 10px;
}
/* =========================================================
   RUNDA 2 (2026-10-31)
   ========================================================= */
/* link "Przejdz do tresci" – widoczny tylko przy obsludze klawiatura */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: .7rem 1.2rem;
    border-radius: 40px;
    background: var(--accent-color);
    color: var(--bg-color);
    font-weight: 500;
    transform: translateY(-160%);
    transition: transform .2s ease;
}
/* wspolna obwodka fokusu dla klawiatury; sekcje jasne i elementy maja dalej wlasne warianty */
:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px }
.skip-link:focus { transform: none; outline: 2px solid var(--text-primary); outline-offset: 2px }
/* =========================================================
   RUNDA 4 (2026-10-31) – porzadki
   ========================================================= */
/* mniej pustego miejsca miedzy sekcjami (bylo 12vw, czyli ok. 170 px na laptopie) */
section { padding-top: clamp(4.5rem, 7vw, 7rem); padding-bottom: clamp(4.5rem, 7vw, 7rem) }
.sekcja-jasna .italic-accent { color: var(--braz) }

/* =====================================================================
   2. UKLAD – gorny pasek i menu, stopka, pasek kontaktu na telefonie
   ===================================================================== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 2.5rem 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    transition: background 0.5s ease, padding 0.5s ease;
}
.navbar.scrolled {
    background: rgba(var(--ciemny-rgb), 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1.5rem 5vw;
    border-bottom: 1px solid var(--border-color);
}
.nav-brand, .nav-brand a {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--text-primary);
}
.nav-links { display: flex; list-style: none; gap: 0.4rem; align-items: center }
.nav-links a {
    display: inline-block;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    color: var(--text-primary);
    padding: 0.65rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 40px;
    transition: var(--transition-fast);
}
/* Podswietlenie jak przycisk "Zobacz portfolio": biale wypelnienie, ciemny tekst */
.nav-links a:hover,
.nav-links a:focus-visible { background: var(--text-primary); color: var(--bg-color); border-color: var(--text-primary) }
.nav-contact {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1.4rem;
    row-gap: 0.15rem;
    align-items: center;
    justify-items: end;
    line-height: 1.35;
    text-shadow: 0 1px 10px rgba(var(--czarny-rgb), 0.6);
}
.nav-contact > a[href^="tel:"] { grid-column: 2; grid-row: 1 }
.nav-contact > .nav-email { grid-column: 2; grid-row: 2 }
.nav-contact a {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--accent-color);
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}
.nav-contact a[href^="tel:"] { display: inline-flex; align-items: center; gap: 0.5rem }
.nav-contact a[href^="tel:"]::before {
    content: "";
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-contact a[href^="tel:"]:hover { color: var(--text-primary) }
.nav-contact .nav-email {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--text-primary);
    opacity: 0.85;
    letter-spacing: 0.3px;
    transition: color 0.3s ease, opacity 0.3s ease;
}
.nav-contact .nav-email:hover { color: var(--accent-color); opacity: 1 }
/* === IKONY SOCIAL W GORNYM PASKU === */
.nav-social {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    padding-right: 1.4rem;
    border-right: 1px solid rgba(var(--bialy-rgb), 0.18);
    height: 2.6rem;
}
.nav-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--text-primary);
    opacity: 0.8;
    filter: drop-shadow(0 1px 6px rgba(var(--czarny-rgb), 0.55));
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.nav-social a svg { width: 100%; height: 100% }
.nav-social a:hover { color: var(--accent-color); opacity: 1; transform: translateY(-2px) }
/* Na wezszych ekranach (do 1500px) ikony wracaja pod kontakt, zeby nie nachodzily na menu */
@media (max-width: 1500px) {
    .nav-contact { display: flex; flex-direction: column; align-items: flex-end }
    .nav-social { height: auto; margin-top: 0.5rem; padding-right: 0; border-right: none }
}
/* W menu mobilnym ikony sa wieksze i wysrodkowane */
.nav-social-mobile { display: none }
.nav-social-mobile a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 0.9rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}
.nav-social-mobile a svg { width: 100%; height: 100% }
.nav-social-mobile a:hover { color: var(--accent-color) }
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; z-index: 101 }
.footer { padding: var(--spacing-lg) 0 2rem; background: var(--bg-color); border-top: 1px solid var(--border-color) }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 4rem }
.footer-links h4, .footer-social h4 {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}
.footer-links ul, .footer-social ul { list-style: none }
.footer-links li, .footer-social li { margin-bottom: 12px }
.footer-links a, .footer-social a { color: var(--text-secondary); font-size: 0.95rem; transition: color var(--transition-fast) }
.footer-links a:hover, .footer-social a:hover { color: var(--accent-color) }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
/* Menu przechodzi w hamburger juz przy 1280px - ponizej tej szerokosci
   szesc powiekszonych pozycji nie miesci sie miedzy marka a kontaktem. */
@media (max-width: 1280px) {
    .nav-links, .nav-contact { display: none }
    .mobile-menu-btn { display: block }
    .mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
    .mobile-menu-btn.active span:nth-child(2) { transform: translateY(-6px) rotate(-45deg) }
    .nav-links.nav-open {
        display: flex;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 99;
        animation: fadeInMenu 0.4s ease forwards;
    }
    .nav-links.nav-open a { font-size: 1.3rem }
    /* W otwartym menu pokazujemy ikony, w zwinietym pasku pozostaja ukryte */
    .nav-links.nav-open .nav-social-mobile { display: flex; margin-top: 1rem }
    .nav-links.nav-open .nav-social-mobile a { font-size: 0 }
    /* ikony nie dziedzicza ksztaltu "pigulki" z pozycji menu - inaczej odstep wewnetrzny je zgniata */
    .nav-links.nav-open .nav-social-mobile a { padding: 0; border: none; border-radius: 0 }
    .nav-links.nav-open .nav-social-mobile a:hover { background: none; color: var(--accent-color) }
    @keyframes fadeInMenu { from { opacity: 0; } to { opacity: 1; } }
    /* w pelnoekranowym menu podswietlenie ma byc delikatniejsze */
    .nav-links.nav-open a { padding: 0.7rem 2rem }
    /* pozycje maja wlasny odstep wewnetrzny, wiec przerwa miedzy nimi moze byc mniejsza */
    .nav-links.nav-open { gap: 0.6rem }
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 3rem }
    .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center }
}
/* Pasek Zadzwon / WhatsApp - tylko telefon */
.pasek-kontakt { display: none }
@media (max-width: 768px) {
    .pasek-kontakt {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(var(--ciemny-rgb), 0.94);
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .pasek-kontakt a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 48px;
        border-radius: 40px;
        font-size: .8rem;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 500;
    }
    .pasek-kontakt .pk-tel { background: var(--accent-color); color: var(--bg-color) }
    .pasek-kontakt .pk-wa { border: 1px solid var(--whatsapp); color: var(--whatsapp) }
}
/* pozycje menu w jednej linii (po dodaniu OPINIE "O MNIE" lamalo sie na dwie) */
.nav-links a { white-space: nowrap }
@media (max-width: 1440px) {
    .nav-contact .nav-email { display: none }
}
/* fokus z klawiatury na jasnych sekcjach (globalne obrysy sa jasne i znikaja na kremowym tle) */
.sekcja-jasna a:focus-visible,
.sekcja-jasna button:focus-visible { outline: 2px solid var(--braz); outline-offset: 3px; border-radius: 40px }
/* =========================================================
   TELEFON
   ========================================================= */
/* numer telefonu w menu mobilnym; na komputerze jest w pasku obok menu */
.nav-tel-mobile { display: none }
@media (max-width: 1280px) {
    .nav-links.nav-open .nav-tel-mobile { display: block; margin-top: 0.8rem }
}
@media (max-width: 768px) {
    .mobile-menu-btn { padding: 8px 7px; margin-right: -7px }
}
/* baner cookies wstawia wlasne style – wyzsza szczegolowosc */
@media (max-width: 768px), (pointer: coarse) {
    body .mn-cookies button { min-height: 44px }
}
.mbar-kontakt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: none;
    gap: .6rem;
    padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom,0px));
    background: rgba(var(--ciemny-rgb), .95);
    border-top: 1px solid rgba(var(--akcent-rgb), .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(110%);
    transition: transform .35s ease;
}
.mbar-kontakt.on { transform: none }
.mbar-kontakt .mk-tel { border: 1px solid rgba(var(--bialy-rgb), .25); color: var(--text-primary) }
.mbar-kontakt .mk-wa { background: var(--accent-color); color: var(--bg-color) }
@media (max-width:768px) {
    .mbar-kontakt { display: flex }
}

/* =====================================================================
   3. ELEMENTY – przyciski, podglad zdjec, formularz, karty opinii, FAQ, okruszki, lampka REC
   ===================================================================== */
.btn-primary {
    display: inline-block;
    padding: 1.2rem 3rem;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    transition: var(--transition-fast);
    background: rgba(var(--bialy-rgb), 0.02);
    backdrop-filter: blur(5px);
}
.btn-primary:hover { background: var(--text-primary); color: var(--bg-color); border-color: var(--text-primary) }
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--lightbox-rgb), 0.95);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lightbox.active { opacity: 1; pointer-events: auto }
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.lightbox.active .lightbox-img { transform: scale(1); opacity: 1; transition-delay: 0.1s }
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 40px;
    height: 40px;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}
.lightbox-close:hover { color: var(--accent-color); transform: rotate(90deg) }
.lightbox-close svg { width: 30px; height: 30px }
.lightbox-close { background: none; border: none; padding: 0 }
/* Obwodka fokusu tylko przy obsludze klawiatura, nie po klikniecu myszka */
.lightbox-close:focus:not(:focus-visible),
.lightbox-nav:focus:not(:focus-visible) { outline: none }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--czarny-rgb), 0.35);
    border: 1px solid rgba(var(--bialy-rgb), 0.15);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    z-index: 10;
}
.lightbox-nav:hover { background: var(--accent-color); color: var(--bg-color); border-color: var(--accent-color) }
.lightbox-nav svg { width: 26px; height: 26px }
.lightbox-prev { left: 30px }
.lightbox-next { right: 30px }
.lightbox-caption {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 10;
}
.lightbox-caption span + span { color: var(--accent-color); margin-left: 0.6rem }
@media (max-width: 768px) {
    .lightbox-nav { width: 44px; height: 44px }
    .lightbox-prev { left: 10px }
    .lightbox-next { right: 10px }
    .lightbox-close { top: 14px; right: 16px }
}
.reviews { background: var(--bg-color); position: relative }
.reviews-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--spacing-md) }
.rating-badge { text-align: right }
.stars { color: var(--accent-color); font-size: 1.2rem; letter-spacing: 2px }
.score {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reviews-stack { position: relative; padding-bottom: 10vh }
.review-card {
    position: sticky;
    top: 15vh;
    margin-bottom: 2rem;
    transform-origin: top center;
    will-change: transform, opacity;
}
.card-inner {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4rem 5rem;
    position: relative;
    box-shadow: 0 20px 40px rgba(var(--czarny-rgb), 0.6);
}
.quote-icon {
    position: absolute;
    top: 30px;
    right: 40px;
    font-family: var(--font-heading);
    font-size: 6rem;
    line-height: 1;
    color: rgba(var(--bialy-rgb), 0.03);
    pointer-events: none;
}
.review-stars { color: var(--accent-color); margin-bottom: 1.5rem; font-size: 1rem }
.review-text { font-family: var(--font-heading); color: var(--text-primary); margin-bottom: 2.5rem }
.review-author h3 { font-size: 1rem; color: var(--text-primary); font-weight: 500; margin-bottom: 5px }
.review-author span { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px }
.contact-section { background: var(--bg-color) }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg) }
.contact-desc { color: var(--text-secondary); margin-bottom: 3rem; font-size: 1.1rem; line-height: 1.8 }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem }
.detail-item h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.detail-item p { color: var(--text-primary) }
.contact-form-wrapper { position: relative }
.form-container {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem }
.form-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none }
.input-group { position: relative; margin-bottom: 2.5rem }
.input-group input, .input-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--bialy-rgb), 0.15);
    padding: 10px 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color var(--transition-fast);
}
.input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--accent-color) }
.input-group label {
    position: absolute;
    top: 10px;
    left: 0;
    color: var(--text-secondary);
    pointer-events: none;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) all;
    font-size: 1rem;
}
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label { top: -20px; font-size: 0.75rem; color: var(--accent-color); letter-spacing: 1px; text-transform: uppercase }
/* Pole daty: przegladarka zawsze pokazuje w nim format, wiec etykieta
   nie moze plywac - trzymamy ja na stale nad polem. */
/* Podpowiedz w polu terminu - jedyne pole z widocznym przykladem wpisu */
.input-group input#event_date::placeholder { color: var(--text-secondary) }
.input-group .label-static { top: -20px; font-size: 0.75rem; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase }
.input-group input:focus ~ .label-static { color: var(--accent-color) }
.input-group input[type="date"] { color-scheme: dark; min-height: 42px }
.input-group input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer }
.form-note { font-size: 0.75rem; letter-spacing: 1px; margin: -1.5rem 0 1.5rem }
.btn-submit {
    background: var(--text-primary);
    color: var(--bg-color);
    border: none;
    padding: 1.2rem 3rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 40px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
}
.btn-submit:hover { background: var(--accent-color) }
.btn-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.form-success-state {
    position: absolute;
    inset: 0;
    background: var(--surface-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.form-success-state.active { opacity: 1; pointer-events: all; z-index: 10 }
/* Po wyslaniu formularz jest ukrywany, wiec ramka by sie zapadla.
   Komunikat przechodzi wtedy do normalnego ukladu i sam wyznacza wysokosc ramki. */
.form-success-state.active { position: relative; inset: auto; min-height: 280px; padding: 1rem 0 }
.success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
.form-success-state h3 { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 10px; color: var(--accent-color) }
.form-success-state p { color: var(--text-secondary); line-height: 1.6 }
.footer-brand h3 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text-primary) }
.footer-brand p {
    color: var(--text-secondary);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-top: 10px;
}
.okruszki {
    margin-bottom: 2rem;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.okruszki a { color: var(--text-secondary); transition: color 0.3s ease }
.okruszki a:hover { color: var(--accent-color) }
.okruszki span { margin: 0 0.5rem }
.okruszki span[aria-current] { color: var(--accent-color); margin-left: 0 }
/* Lista pytan na podstronach uslugowych */
.faq-lista { max-width: 860px; margin: 4rem auto 0; display: grid; gap: 2.5rem }
/* === PRZYCISK "ZOBACZ FILMY NA YOUTUBE" z lampka nagrywania === */
.yt-cta-wrap { text-align: center; margin: -1rem 0 3rem }
.yt-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 2.4rem;
    border: 1px solid rgba(var(--bialy-rgb), 0.18);
    border-radius: 40px;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(var(--bialy-rgb), 0.02);
    transition: var(--transition-fast);
}
.yt-cta:hover {
    border-color: rgba(var(--rec-rgb), 0.7);
    background: rgba(var(--rec-rgb), 0.08);
}
/* czerwona lampka jak w kamerze podczas nagrywania – nieruchoma, bez poswiaty (decyzja Mariusza 2026-10-31) */
.rec-lampka {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rec);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .yt-cta { padding: 1rem 1.6rem; font-size: 0.82rem; letter-spacing: 1.5px; gap: 0.7rem }
}
/* Uwaga o zakresie uslugi - wyrozniona, bo rozstrzyga watpliwosc klienta */
/* Przycisk doczytywania reszty galerii */
.pokaz-wiecej {
    display: block;
    margin: 3rem auto 0;
    padding: 1.1rem 2.6rem;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    background: rgba(var(--bialy-rgb), 0.02);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-fast);
}
.pokaz-wiecej:hover { background: var(--accent-color); color: var(--bg-color); border-color: var(--accent-color) }
.pokaz-wiecej[hidden] { display: none }
.btn-oferta-main {
    display: inline-block;
    padding: 1.1rem 2.6rem;
    background: var(--accent-color);
    color: var(--bg-color);
    border: 1px solid var(--accent-color);
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.82rem;
    font-weight: 500;
    transition: var(--transition-fast);
}
.btn-oferta-main:hover { background: transparent; color: var(--accent-color) }
.btn-oferta-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 2.2rem;
    border: 1px solid var(--whatsapp);
    border-radius: 40px;
    color: var(--whatsapp);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.82rem;
    transition: var(--transition-fast);
}
.btn-oferta-wa:hover { background: var(--whatsapp); color: var(--bg-color) }
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: 4rem }
    .card-inner { padding: 3rem }
}
@media (max-width: 768px) {
    .form-container { padding: 2.5rem 1.5rem }
    .form-row { grid-template-columns: 1fr; gap: 0 }
    .card-inner { padding: 2.5rem 1.5rem }
    .quote-icon { display: none }
    .reviews-header { flex-direction: column; align-items: flex-start; gap: 1rem }
}
/* === KONWERSJA 2026-10 === */
/* Glowny przycisk w naglowku - pelny kolor, zeby od razu bylo widac, jak zapytac o termin */
.btn-cta {
    display: inline-block;
    padding: 1.2rem 2.8rem;
    border: 1px solid var(--accent-color);
    border-radius: 40px;
    background: var(--accent-color);
    color: var(--bg-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-fast);
}
.btn-cta:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-color) }
.input-group label, .input-group .label-static { color: var(--tekst-wyciszony) }
.input-group input#event_date::placeholder { opacity: .75 }
.form-note { color: var(--tekst-notka) }
/* --- opinie: czytelny tekst zamiast dlugiej kursywy --- */
.review-text { font-style: normal; font-size: 1.15rem; line-height: 1.75 }
/* WhatsApp jako spokojny przycisk drugorzedny w palecie strony */
.sekcja-jasna .btn-oferta-wa { border-color: var(--atrament); color: var(--atrament) }
.sekcja-jasna .btn-oferta-wa:hover { background: var(--atrament); color: var(--papier-karta) }
/* kontakt */
.sekcja-jasna .contact-desc { color: var(--atrament-2); margin-bottom: 2rem }
.sekcja-jasna .contact-details { grid-template-columns: 1fr 1fr }
.co-dalej {
    list-style: none;
    counter-reset: krok;
    margin: 0 0 3rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
    max-width: 46ch;
}
.sekcja-jasna .form-container {
    background: var(--papier-karta);
    border-color: var(--papier-linia);
    box-shadow: 0 1px 2px rgba(var(--atrament-rgb), 0.05), 0 24px 48px -28px rgba(var(--atrament-rgb), 0.35);
}
.sekcja-jasna .input-group input,
.sekcja-jasna .input-group textarea { color: var(--atrament); caret-color: var(--braz) }
.sekcja-jasna .input-group label,
.sekcja-jasna .input-group .label-static { color: var(--atrament-2) }
.sekcja-jasna .input-group input:focus,
.sekcja-jasna .input-group textarea:focus { border-color: var(--braz) }
/* wyrazny fokus z klawiatury (wczesniej tylko zmiana koloru linii) */
.sekcja-jasna .input-group input:focus-visible,
.sekcja-jasna .input-group textarea:focus-visible { box-shadow: 0 2px 0 0 var(--braz) }
.sekcja-jasna .input-group input:focus ~ label,
.sekcja-jasna .input-group input:not(:placeholder-shown) ~ label,
.sekcja-jasna .input-group textarea:focus ~ label,
.sekcja-jasna .input-group textarea:not(:placeholder-shown) ~ label,
.sekcja-jasna .input-group input:focus ~ .label-static { color: var(--braz) }
.sekcja-jasna .input-group input#event_date::placeholder { color: var(--atrament-2); opacity: 0.7 }
.sekcja-jasna .form-note { color: var(--atrament-2); letter-spacing: 0.02em; line-height: 1.6 }
.form-wyslij { display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap }
.form-czas { margin: 0; color: var(--atrament-2); font-size: 0.9rem }
.sekcja-jasna .btn-submit { background: var(--atrament); color: var(--papier-karta) }
.sekcja-jasna .btn-submit:hover { background: var(--braz) }
.sekcja-jasna .btn-submit:focus-visible { outline: 2px solid var(--braz); outline-offset: 3px }
.sekcja-jasna .btn-submit:disabled { cursor: progress; opacity: 0.85 }
.sekcja-jasna .btn-loader { border-color: var(--papier-karta); border-top-color: transparent }
/* blad wysylki w formularzu (zamiast okienka przegladarki) */
.form-blad {
    margin: 0 0 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    background: var(--blad-tlo);
    color: var(--blad-tekst);
    font-size: 0.92rem;
    line-height: 1.55;
}
.form-blad[hidden] { display: none }
.form-blad p + p { margin-top: 0.4rem }
.form-blad:focus { outline: 2px solid var(--blad-tekst); outline-offset: 2px }
.sekcja-jasna .form-success-state { background: var(--papier-karta) }
.sekcja-jasna .form-success-state h3 { color: var(--atrament) }
.sekcja-jasna .success-icon { border-color: var(--braz); color: var(--braz) }
.sekcja-jasna .detail-item a:focus-visible,
.sekcja-jasna .form-note a:focus-visible { border-radius: 2px }
@media (max-width: 1280px) {
    .nav-links.nav-open .nav-tel-mobile a {
        border: 1px solid var(--accent-color);
        border-radius: 40px;
        color: var(--accent-color);
        font-size: 1rem;
        letter-spacing: 0.08em;
    }
}
@media (max-width: 768px) {
    .sekcja-jasna .contact-details { grid-template-columns: 1fr; gap: 1.5rem }
    /* telefon, WhatsApp i e-mail jako wygodne cele dla kciuka (min. 44 px wysokosci) */
    .sekcja-jasna .detail-item a { display: inline-flex; align-items: center; min-height: 44px }
    .sekcja-jasna .detail-item br { display: none }
    .sekcja-jasna .detail-item p { display: flex; flex-direction: column; align-items: flex-start }
    .co-dalej { margin-bottom: 2.5rem }
    .form-wyslij { flex-direction: column; align-items: stretch; text-align: center }
}
/* --- "Dobrze wiedziec" --- */
.dobrze-wiedziec {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 1.6rem 1.8rem;
    border-radius: 12px;
    background: var(--papier-karta);
    border: 1px solid var(--papier-linia);
}
.dobrze-wiedziec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem }
/* --- formularz: rodzaj uroczystosci --- */
.rodzaj { border: 0; padding: 0; margin: 0 0 2.2rem; min-width: 0 }
.rodzaj legend {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--atrament-2);
    margin-bottom: .8rem;
}
.rodzaj-opcje { display: flex; flex-wrap: wrap; gap: .5rem }
.rodzaj-opcje label { position: relative; cursor: pointer }
.rodzaj-opcje input { position: absolute; opacity: 0; width: 1px; height: 1px }
.rodzaj-opcje label:hover span { border-color: var(--braz) }
.rodzaj-opcje input:checked + span { background: var(--atrament); border-color: var(--atrament); color: var(--papier-karta) }
.rodzaj-opcje input:focus-visible + span { outline: 2px solid var(--braz); outline-offset: 2px }
.pole-podp { display: block; margin-top: .45rem; font-size: .8rem; color: var(--atrament-2) }
/* wyrazniejsze pola: podpowiedzi i linia pod polem */
.sekcja-jasna .input-group input::placeholder,
.sekcja-jasna .input-group textarea::placeholder { color: var(--atrament-2) }
.sekcja-jasna .input-group input,
.sekcja-jasna .input-group textarea { border-bottom-color: rgba(var(--atrament-rgb), .55) }
.sekcja-jasna .form-success-state h3:focus { outline: none }
/* --- opinie: krotsze linie, podpis zamiast naglowka --- */
.review-text { max-width: 60ch }
.review-author cite {
    display: block;
    font-style: normal;
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 5px;
}
/* opinie ze zdjeciem z portfolio */
.card-inner:has(.review-foto) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 26vw, 320px);
    gap: 0 3rem;
    align-items: center;
}
.card-inner:has(.review-foto) > *:not(.review-foto) { grid-column: 1 }
.review-foto {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 380px;
    object-fit: cover;
    border-radius: 10px;
}
@media (max-width: 768px) {
    .card-inner:has(.review-foto) { grid-template-columns: 1fr }
    .review-foto { grid-column: 1; grid-row: auto; order: -1; min-height: 0; height: 180px; margin-bottom: 1.4rem }
    .card-inner:has(.review-foto) > *:not(.review-foto) { grid-column: 1 }
}
/* po wyslaniu: kolejne zapytanie */
.kolejne-zapytanie {
    margin-top: 1.4rem;
    min-height: 44px;
    padding: 0 1.4rem;
    border-radius: 40px;
    cursor: pointer;
    border: 1px solid var(--atrament);
    background: transparent;
    color: var(--atrament);
    font: inherit;
    font-size: .9rem;
}
.kolejne-zapytanie:hover { background: var(--atrament); color: var(--papier-karta) }
.pokaz-wiecej { margin-top: 1.2rem }
/* opinie: siatka kart zamiast stosu przyklejonych kart */
.reviews-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-bottom: 0 }
.reviews-siatka .review-card {
    position: static;
    top: auto;
    margin: 0;
    transform: none;
    opacity: 1;
    filter: none;
}
.reviews-siatka .card-inner,
.reviews-siatka .card-inner:has(.review-foto) { display: flex; flex-direction: column; height: 100%; padding: 0 0 1.6rem; overflow: hidden; gap: 0 }
.reviews-siatka .review-foto { order: -1; width: 100%; height: 220px; min-height: 0; max-height: none; border-radius: 0; margin: 0 0 1.4rem }
.reviews-siatka .quote-icon { display: none }
.reviews-siatka .review-stars,
.reviews-siatka .review-text,
.reviews-siatka .review-author { padding: 0 1.6rem }
.reviews-siatka .review-text { font-size: 1rem; line-height: 1.7; margin-bottom: 1.4rem; flex-grow: 1; max-width: none }
.reviews-more { margin-top: 2rem }
@media (max-width: 1024px) {
    .reviews-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
    .reviews-siatka { grid-template-columns: 1fr }
    .reviews-siatka .review-foto { height: 190px }
}
@media (max-width: 768px), (pointer: coarse) {
    .reviews .score { display: flex; align-items: center; min-height: 44px }
    .lightbox-close, .lightbox-nav { min-width: 44px; min-height: 44px }
}
/* ZAMKNIETY PODGLAD ZDJEC (2026-10-31): niewidoczny takze dla klawiatury i czytnikow */
.lightbox:not(.active) { visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s }
.reviews-more {
    display: block;
    margin: 0 auto 2rem;
    padding: 1rem 2.2rem;
    border-radius: 40px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background .4s ease,color .4s ease;
}
.reviews-more:hover { background: var(--accent-color); color: var(--bg-color) }
.review-card.is-collapsed { display: none }
.sekcja-jasna .btn-oferta-main { background: var(--atrament); border-color: var(--atrament); color: var(--papier-karta) }
.sekcja-jasna .btn-oferta-main:hover { background: var(--braz); border-color: var(--braz); color: var(--papier-karta) }
.sekcja-jasna .faq-pozycja { padding-bottom: 2.2rem; border-bottom: 1px solid var(--papier-linia) }
.sekcja-jasna .faq-pozycja:last-child { border-bottom: 0; padding-bottom: 0 }

/* =====================================================================
   4. STRONA GLOWNA – hero ze slajdami i LOVE, wybor uslugi, portfolio, oferta, o mnie, filmy
   ===================================================================== */
/* Pierwszy ekran: widoczny od razu, ruch tylko przez transform.
   Przesuniecie nie wstrzymuje pomiaru wyswietlenia tresci, w przeciwienstwie do opacity. */
.hero .reveal-text, .hero .hero-desc, .hero .hero-actions { opacity: 1; animation: hero-wjazd 0.7s cubic-bezier(0.16, 1, 0.3, 1) both }
.hero .reveal-text { animation-delay: 0.05s }
.hero .hero-desc { animation-delay: 0.20s }
.hero .hero-actions { animation-delay: 0.32s }
.hero .hero-scroll-indicator { opacity: 1 }
@keyframes hero-wjazd {
    from { transform: translateY(22px); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero .reveal-text, .hero .hero-desc, .hero .hero-actions { animation: none }
}
/* Zabezpieczenie: jesli biblioteka animacji sie nie wczyta, tresc i tak bedzie widoczna.
   !important celowo: musi przebic style wpisane w element przez biblioteke animacji (GSAP). */
.bez-animacji .reveal-up, .bez-animacji .reveal-blur, .bez-animacji .reveal-text-scroll { opacity: 1 !important; transform: none !important; filter: none !important }
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 170px 5vw 120px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center;
    z-index: -2;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--ciemny-rgb), 0.4) 0%, rgba(var(--ciemny-rgb), 0.8) 50%, rgba(var(--ciemny-rgb), 1) 100%);
    z-index: -1;
}
.hero-content { max-width: 1000px; margin-top: 5vh; display: flex; flex-direction: column; align-items: center }
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(4.5rem, 10vw, 9rem);
    line-height: 1.1;
    margin-bottom: 2.5rem;
}
.hero-desc {
    font-size: clamp(1.15rem, 1.9vw, 1.4rem);
    color: var(--tekst-jasny);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    text-shadow: 0 1px 12px rgba(var(--czarny-rgb), 0.55);
}
.hero-actions { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap }
.hero-scroll-indicator {
    position: absolute;
    bottom: 22px;
    opacity: 0.55;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
}
.mouse {
    width: 24px;
    height: 36px;
    border: 1px solid var(--text-secondary);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.wheel {
    width: 4px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}
.scroll-text { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary) }
@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}
/* === SEKCJA O MNIE - zdjecie obok tekstu === */
.omnie-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1240px;
    margin: 4rem auto 0;
}
.omnie-foto { position: relative; border-radius: 10px; overflow: hidden }
.omnie-foto img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(15%);
    transition: filter 0.6s ease, transform 0.6s ease;
}
.omnie-foto:hover img { filter: grayscale(0); transform: scale(1.03) }
/* Delikatna poswiata w kolorze akcentu, spojna z reszta strony */
.omnie-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(var(--ciemny-rgb), 0.55);
    pointer-events: none;
}
.omnie-tekst { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8 }
.omnie-tekst p:last-child { margin-bottom: 0 }
@media (max-width: 900px) {
    .omnie-grid { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem }
    .omnie-foto { max-width: 420px; margin: 0 auto }
}
.process { background: var(--bg-color) }
/* === SEKCJA FILMY - osadzona playlista YouTube === */
.filmy { padding: 6rem 0; background: var(--bg-color) }
.filmy-intro {
    max-width: 640px;
    margin: 2rem auto 3rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
}
.filmy-player {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
/* Plakatem jest logo, wiec nie kadrujemy go jak zdjecia - ma byc widoczne w calosci */
.filmy-player { background: var(--czarny) }
.filmy-player img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4% 4% 18%;
    transition: opacity 0.4s ease;
}
.filmy-player:hover img { opacity: 0.55 }
.filmy-play {
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--bialy-rgb), 0.35);
    border-radius: 50%;
    background: rgba(var(--ciemny-rgb), 0.55);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.filmy-play svg { width: 38px; height: 38px; margin-left: 4px }
.filmy-player:hover .filmy-play {
    background: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Po klinieciu zostaje sam odtwarzacz */
.filmy-player.video-loaded img, .filmy-player.video-loaded .filmy-play { display: none }
.filmy-player iframe { width: 100%; height: 100%; border: 0; display: block }
@media (max-width: 768px) {
    .filmy { padding: 4rem 0 }
    .filmy-play { width: 62px; height: 62px }
    .filmy-play svg { width: 28px; height: 28px }
}
.proces-kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1100px; margin: 4rem auto 0 }
.proces-krok { position: relative; padding-top: 2.5rem }
.proces-numer {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--accent-color);
    opacity: 0.55;
}
@media (max-width: 900px) {
    .proces-kroki { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem }
}
@media (max-width: 640px) {
    .proces-kroki { grid-template-columns: 1fr }
}
.cena-wyroz { color: var(--accent-color); font-weight: 400; font-size: 1.15rem }
/* === SEKCJA OFERTA === */
.oferta { padding: 6rem 0; background: var(--bg-color) }
.oferta-intro {
    max-width: 720px;
    margin: 2rem auto 4rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
}
.oferta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 900px; margin: 0 auto }
/* Przy czterech kartach uklad 2x2 czyta sie lepiej niz cztery waskie kolumny */
@media (max-width: 760px) {
    .oferta-grid { grid-template-columns: 1fr }
}
.oferta-jednostka {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.oferta-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    background: rgba(var(--bialy-rgb), 0.02);
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.oferta-card:hover { border-color: var(--accent-color); transform: translateY(-6px) }
.oferta-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.oferta-price {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}
.oferta-list { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1 }
.oferta-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}
.oferta-note { font-size: 0.85rem; margin-bottom: 2rem; font-style: italic }
.oferta-cta {
    display: inline-block;
    text-align: center;
    padding: 1rem 2rem;
    border: 1px solid var(--accent-color);
    border-radius: 40px;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    transition: var(--transition-fast);
}
/* Link do pelnej oferty - drugorzedny wobec przycisku, ale wyrazny */
.oferta-wiecej {
    display: block;
    text-align: center;
    margin-top: 1.1rem;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-color);
    border-bottom: 1px solid transparent;
    transition: var(--transition-fast);
}
.oferta-wiecej span { display: inline-block; margin-left: 0.35rem; transition: transform 0.3s ease }
.oferta-wiecej:hover { color: var(--accent-hover); border-bottom-color: rgba(var(--akcent-rgb), 0.4) }
.oferta-wiecej:hover span { transform: translateX(5px) }
.oferta-cta:hover { background: var(--accent-color); color: var(--bg-color) }
.oferta-kontakt { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2.5rem; flex-wrap: wrap }
.oferta-faktory { max-width: 760px; margin: 4rem auto 0; text-align: center }
.oferta-faktory h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
/* === KAFELKI FILMOWE === */
.portfolio-video { position: relative }
/* Miniatura z YouTube ma proporcje 4:3 z czarnymi pasami - przycinamy do 16:9 */
.portfolio-video .portfolio-img { aspect-ratio: 16 / 9; object-fit: cover }
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--bialy-rgb), 0.35);
    border-radius: 50%;
    background: rgba(var(--ciemny-rgb), 0.55);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 2;
}
.video-play svg { width: 30px; height: 30px; margin-left: 3px }
.portfolio-video:hover .video-play {
    background: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Po klinieciu miniatura i przycisk znikaja, zostaje sam odtwarzacz */
.portfolio-video.video-loaded .portfolio-img,
.portfolio-video.video-loaded .video-play,
.portfolio-video.video-loaded .portfolio-label { display: none }
.portfolio-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: 8px }
/* PORTFOLIO MASONRY GALLERY */
.portfolio { padding: 6rem 0; background: var(--bg-color) }
.portfolio .section-title { margin-bottom: 4rem }
.portfolio-grid { column-count: 3; column-gap: 1.5rem; margin-top: 3rem }
@media (max-width: 1280px) {
    .mobile-menu-btn span { display: block; width: 30px; height: 2px; background: var(--text-primary); margin: 8px 0; transition: 0.3s }
}
@media (max-width: 1024px) {
    .portfolio-grid { column-count: 2 }
}
/* Filtry */
.portfolio-filters { display: flex; justify-content: center; gap: 2rem; margin: 0 auto 4rem }
.portfolio-filter-btn {
    padding: 0.8rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.portfolio-filter-btn:hover { background: var(--text-primary); color: var(--bg-color); border-color: var(--text-primary) }
.portfolio-filter-btn.active { background: var(--accent-color); color: var(--bg-color); border-color: var(--accent-color) }
.portfolio-item { opacity: 1; animation: portfolioFadeIn 0.4s ease both }
.portfolio-item.hidden { display: none }
@keyframes portfolioFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}
.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(var(--bialy-rgb), 0.05);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.5rem;
    display: block;
}
.portfolio-img { width: 100%; height: auto; display: block; transition: transform 0.4s ease, filter 0.4s ease }
.portfolio-item:hover .portfolio-img { transform: scale(1.08); filter: brightness(0.85) }
.portfolio-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(var(--czarny-rgb), 0.8), transparent);
    padding: 2rem 1.5rem 1.5rem;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}
.portfolio-item:hover .portfolio-label { transform: translateY(0); opacity: 1 }
@media (max-width: 1024px) {
    .hero-title { font-size: 5rem }
}
@media (max-width: 768px) {
    .hero-title { font-size: 3rem }
    .hero-desc { font-size: 1rem }
    .portfolio-grid { column-count: 2; column-gap: 1rem }
    .oferta-card { padding: 2.5rem 1.75rem }
    .oferta { padding: 4rem 0 }
    .portfolio-item { margin-bottom: 1rem }
    .portfolio-filters { flex-wrap: wrap; gap: 0.75rem }
    .portfolio-filter-btn { padding: 0.6rem 1.2rem; font-size: 0.75rem }
}
/* === LOVE - zapalanie liter w tle hero (tylko komputer z myszka) === */
.love-lampy { position: absolute; z-index: -1; pointer-events: none; visibility: hidden }
.love-lampy.gotowe { visibility: visible }
.love-lampa, .love-swiatlo { position: absolute; opacity: 0; transition: opacity 0.5s ease }
.love-lampa {
    inset: 0;
    background-size: cover;
    background-position: 50% 50%;
    filter: brightness(0.92) saturate(1.15);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.love-swiatlo {
    background: radial-gradient(closest-side, rgba(var(--love-blask-rgb), 0.14), rgba(var(--love-blask-2-rgb), 0.05) 55%, transparent);
    mix-blend-mode: screen;
}
.love-lampa.zapalona { opacity: 0.85; transition: opacity 0.2s ease }
.love-swiatlo.zapalona { opacity: 1; transition: opacity 0.2s ease }
.hero .hero-ocena {
    margin: -0.6rem 0 1.6rem;
    font-size: 0.9rem;
    letter-spacing: .04em;
    color: var(--tekst-jasny);
    text-shadow: 0 1px 12px rgba(var(--czarny-rgb), 0.55);
}
.hero .hero-ocena a { color: inherit }
.hero .hero-ocena .gwiazdki { color: var(--accent-color); letter-spacing: 2px; margin-right: .35rem }
/* Galeria WebP: <picture> nie zmienia ukladu kafelka */
.portfolio-item picture { display: contents }
/* czytelnosc: linki do uslug pod naglowkiem, oferta i formularz */
.hero-uslugi { margin: -.5rem 0 2rem; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color); line-height: 2 }
.hero-uslugi a:hover, .hero-uslugi a:focus-visible { color: var(--bialy) }
@media (max-width:768px) {
    .hero-uslugi { font-size: .84rem; letter-spacing: .1em; line-height: 2.1 }
}
.oferta-note { color: var(--tekst-wyciszony); opacity: 1 }
/* telefon w pionie: caly napis LOVE nad haslem.
   !important celowo: przebija tlo wpisane w HTML (style=""), ktore czyta skrypt slajdow. */
@media (max-width:768px) and (orientation:portrait) {
    #home .hero-bg { background-image: url('/img-hero/love-mobile.webp?v=1')!important; background-position: center top }
    #home .love-intro i { background-position: center top; -webkit-mask-position: center top; mask-position: center top }
}
/* oferta */
.sekcja-jasna .oferta-intro,
.sekcja-jasna .oferta-faktory p { color: var(--atrament-2) }
.sekcja-jasna .oferta-card {
    background: var(--papier-karta);
    border-color: var(--papier-linia);
    box-shadow: 0 1px 2px rgba(var(--atrament-rgb), 0.05), 0 12px 32px -18px rgba(var(--atrament-rgb), 0.25);
}
.sekcja-jasna .oferta-card:hover { border-color: var(--braz) }
.sekcja-jasna .oferta-title,
.sekcja-jasna .oferta-faktory h4 { color: var(--atrament) }
.sekcja-jasna .oferta-price { color: var(--atrament-2); border-bottom-color: var(--papier-linia) }
.sekcja-jasna .oferta-price strong { color: var(--braz) }
.sekcja-jasna .oferta-jednostka { color: var(--atrament-2); letter-spacing: 0.04em }
.sekcja-jasna .oferta-list li { color: var(--atrament-2) }
.sekcja-jasna .oferta-list li::before { background: var(--braz) }
/* dopiski (np. cena sesji indywidualnej) maja byc widoczne, nie schowane w kursywie */
.sekcja-jasna .oferta-note { color: var(--atrament); opacity: 1; font-style: normal; font-size: 0.9rem; line-height: 1.6 }
.sekcja-jasna .oferta-cta { background: var(--atrament); border-color: var(--atrament); color: var(--papier-karta) }
.sekcja-jasna .oferta-cta:hover { background: var(--braz); border-color: var(--braz); color: var(--papier-karta) }
.sekcja-jasna .oferta-wiecej { color: var(--braz) }
.sekcja-jasna .oferta-wiecej:hover { color: var(--braz-hover); border-bottom-color: rgba(var(--braz-rgb), 0.4) }
/* o mnie */
.sekcja-jasna .omnie-tekst { color: var(--atrament-2); max-width: 65ch }
.sekcja-jasna .omnie-foto img { box-shadow: 0 18px 40px -20px rgba(var(--atrament-rgb), 0.45) }
.sekcja-jasna .detail-item p { color: var(--atrament) }
.co-dalej li::before {
    content: counter(krok);
    position: absolute;
    left: 0;
    top: -0.05rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--braz);
    color: var(--braz);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
}
.sekcja-jasna .form-note a { color: var(--braz) }
.sekcja-jasna .form-success-state p { color: var(--atrament-2); max-width: 40ch }
.sekcja-jasna .form-success-state a { color: var(--braz) }
/* na ekranach dotykowych podpisy zdjec w portfolio widac od razu (nie ma najechania) */
@media (hover: none) {
    .portfolio-label { opacity: 1; transform: none }
}
/* hero: przycisk musi sie zmiescic na ekranie laptopa (np. 1440x900); LOVE bez zmian */
@media (min-width: 769px) and (max-height: 1000px) {
    .hero { padding-top: 120px; padding-bottom: 80px }
    .hero-content { margin-top: 0 }
    .hero-title { font-size: clamp(4rem, 8vw, 7.2rem); margin-bottom: 1.6rem }
    .hero-desc { margin-bottom: 2rem; line-height: 1.65 }
}
/* --- "Na jaka uroczystosc?" --- */
.wybor { background: var(--bg-color); padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem) }
.wybor-tytul {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--text-primary);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    text-align: center;
    margin-bottom: 2rem;
}
.wybor-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem }
.wybor-kafel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 5;
    padding: 1.4rem;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    color: var(--text-primary);
}
.wybor-kafel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
}
.wybor-kafel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(var(--ciemny-rgb), .92) 0%, rgba(var(--ciemny-rgb), .55) 40%, rgba(var(--ciemny-rgb), 0) 72%);
}
.wybor-kafel:hover img { transform: scale(1.05); filter: brightness(1.05) }
.wybor-nazwa { font-family: var(--font-heading); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15 }
.wybor-cena { margin-top: .35rem; font-size: .88rem; color: var(--akcent-jasny) }
@media (max-width: 900px) {
    .wybor-lista { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
    .wybor-kafel { aspect-ratio: 1 / 1; padding: 1rem }
    .wybor-lista { gap: .8rem }
    .wybor-cena { font-size: .8rem }
}
/* --- oferta: zakladki tylko na telefonie --- */
.oferta-zakladki { display: none }
@media (max-width: 768px) {
    .oferta-zakladki { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; max-width: 900px; margin: 0 auto 1.2rem }
    .oferta-zakladka {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        min-height: 56px;
        padding: .6rem .9rem;
        border-radius: 10px;
        cursor: pointer;
        border: 1px solid var(--papier-linia);
        background: var(--papier-karta);
        color: var(--atrament);
        font: inherit;
        text-align: left;
    }
    .oferta-zakladka small { font-size: .78rem; color: var(--atrament-2) }
    .oferta-zakladka[aria-selected="true"] { background: var(--atrament); border-color: var(--atrament); color: var(--papier-karta) }
    .oferta-zakladka[aria-selected="true"] small { color: var(--zakladka-wybrana) }
    .oferta-zakladka:focus-visible { outline: 2px solid var(--braz); outline-offset: 2px }
    .oferta-card.karta-ukryta { display: none }
}
/* --- link do formularza obok WhatsAppa --- */
.oferta-formularz { align-self: center; color: var(--braz); font-size: .9rem }
.sekcja-jasna .oferta-formularz { color: var(--braz) }
/* =========================================================
   RUNDA 3 (2026-10-31)
   ========================================================= */
/* pod galeria: przejscie do oferty wybranej uroczystosci */
.portfolio-dalej { text-align: center; margin: 2rem 0 0 }
.portfolio-dalej a:hover { color: var(--bg-color) }
.portfolio-dalej[hidden] { display: none }
/* wybrana uroczystosc wyrozniona w ofercie */
.sekcja-jasna .oferta-card.karta-wybrana {
    border-color: var(--braz);
    box-shadow: 0 0 0 1px var(--braz), 0 18px 40px -22px rgba(var(--atrament-rgb), .45);
}
.hero { padding-top: 120px }
/* link ze zdjec do ceny: glowny przycisk pod galeria */
.portfolio-dalej { margin-top: 2.5rem }
.portfolio-dalej a:hover { background: var(--accent-hover); border-color: var(--accent-hover) }
/* wybrana uroczystosc: znacznik i delikatne tlo */
.karta-znacznik { display: none }
.sekcja-jasna .oferta-card.karta-wybrana { background: var(--karta-wybrana) }
.sekcja-jasna .oferta-card.karta-wybrana .karta-znacznik {
    display: inline-block;
    align-self: flex-start;
    margin: -1rem 0 1rem;
    padding: .3rem .8rem;
    border-radius: 40px;
    background: var(--braz);
    color: var(--papier-karta);
    font-size: .78rem;
    letter-spacing: .04em;
}
.wybor-cena-2 { margin-top: .1rem; font-size: .8rem; opacity: .9 }
/* przycisk po "O mnie" */
.omnie-cta {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 2rem;
    padding: 0 2rem;
    border-radius: 40px;
    background: var(--accent-color);
    color: var(--bg-color);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .82rem;
    font-weight: 500;
    transition: background .3s ease;
}
.omnie-cta:hover { background: var(--accent-hover) }
.omnie-cta:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px }
/* pauza pokazu w hero */
.hero-pauza {
    width: 34px;
    height: 34px;
    margin-top: .3rem;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(var(--bialy-rgb), .35);
    border-radius: 50%;
    background: rgba(var(--ciemny-rgb), .3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.hero-pauza::before, .hero-pauza::after { content: ""; width: 3px; height: 11px; background: var(--text-primary); border-radius: 1px }
.hero-pauza[aria-pressed="true"]::after { display: none }
.hero-pauza[aria-pressed="true"]::before { width: 9px; height: 12px; border-radius: 0; margin-left: 2px; clip-path: polygon(0 0, 100% 50%, 0 100%) }
.hero-pauza:hover { border-color: var(--accent-color) }
.hero-pauza:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px }
@media (max-width: 768px) {
    .hero-pauza { width: 40px; height: 40px; margin: 0 0 0 .3rem }
    /* kafle: krotsze podpisy, zeby nazwa nie wchodzila na twarze */
    .wybor-cena-2 { display: none }
    .wybor-nazwa { font-size: 1.2rem }
    /* pauza w jednym rzedzie z kropkami (nie wypada pod ekran) */
    .hero-slajder { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center }
    .hero-slajder .hero-podpis { flex-basis: 100%; text-align: center }
}
/* podpisy zdjec: krotkie wersaliki, ale bez szerokiego rozstrzelenia */
.portfolio-label { letter-spacing: .04em }
/* hero, slajd z chrzcin (komputer): nowy kadr z oryginalu, mama z dzieckiem po prawej
   stronie, obok napisu – plik /img-hero/chrzciny-bok-1600.webp (2400x1350) */
/* przelacznik slajdow w hero: w prawym dolnym rogu zamiast na srodku krawedzi,
   zeby podpis i kropki nie wypadaly na twarzach (slajd z chrzcin) */
@media (min-width: 769px) {
    .hero .hero-slajder { top: auto; bottom: 96px; transform: none }
}
/* slajdy z jasna gora zdjecia (chrzciny: okna, komunia: sciana): przyciemniony tylko pas pod menu,
   zeby napisy menu i numer telefonu mialy kontrast min. 4,5:1 (pomiar 2026-10-31, decyzja Mariusza) */
@media (min-width: 769px) {
    .hero-slajd.slajd-menu::after {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 210px;
        background: linear-gradient(to bottom, rgba(var(--ciemny-rgb), .25) 0, rgba(var(--ciemny-rgb), .22) 115px, rgba(var(--ciemny-rgb), 0) 100%);
        pointer-events: none;
    }
}
/* hero na telefonie, slajd z chrzcin: napisy zajmuja prawie caly ekran, wiec cale zdjecie
   jest pomniejszone u samej gory – twarze mamy i dziecka miedzy logo a menu, nad napisem.
   Plik /img-hero/chrzciny-gora-720.webp (caly kadr, 1100x733). */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-slajd.slajd-gora {
        background-color: var(--bg-color);
        background-size: 125% auto;
        background-position: 43% 20px;
        background-repeat: no-repeat;
    }
    /* dol zdjecia plynnie przechodzi w ciemne tlo (bez zdjecia z LOVE pod spodem) */
    .hero-slajd.slajd-gora::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, transparent 0, transparent 250px, var(--bg-color) 330px);
    }
}
/* link z ocena Google: wiekszy obszar klikniecia, ten sam uklad (ujemny margines) */
@media (max-width: 768px), (pointer: coarse) {
    .hero .hero-ocena a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0 }
    .hero .hero-kropki button { width: 44px; height: 44px }
    .hero-pauza { width: 44px; height: 44px }
    .portfolio-filter-btn { min-height: 44px }
    .oferta-formularz { display: inline-flex; align-items: center; min-height: 44px }
}
.mbar-kontakt svg { width: 16px; height: 16px; flex: none }
.hero-slajdy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.hero-slajd {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero-slajd.on { opacity: 1 }
.hero-slajd.kb { animation: hero-kb 8s ease-out both }
@keyframes hero-kb {from{transform:scale(1)}to{transform:scale(1.07)} }
.love-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    z-index: -1;
    pointer-events: none;
    opacity: .8;
    transition: opacity .6s;
}
.love-intro i {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    filter: brightness(1.02) saturate(1.15);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.love-intro i.puls { animation: love-puls 2.6s ease-in-out }
@keyframes love-puls {0%{opacity:0}18%{opacity:1}38%{opacity:.25}58%{opacity:1}100%{opacity:0} }
.hero.slajd-inny .love-lampy, .hero.slajd-inny .love-intro { opacity: 0; transition: opacity .6s }
@media (min-width:769px) {
    .hero .hero-overlay { transition: opacity 1s }
    .hero.slajd-inny .hero-overlay { opacity: .62 }
}
.hero.slajd-inny .hero-title, .hero.slajd-inny .hero-desc { text-shadow: 0 2px 22px rgba(var(--czarny-rgb), .55) }
.hero-slajder {
    position: absolute;
    right: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
    opacity: 0;
    transition: opacity .8s;
}
.hero-slajder.on { opacity: 1 }
.hero-podpis {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-color);
    text-shadow: 0 1px 8px rgba(var(--czarny-rgb), .6);
}
.hero-kropki { display: flex; flex-direction: column; align-items: flex-end }
.hero-kropki button {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.hero-kropki button::before {
    content: "";
    display: block;
    width: 12px;
    height: 2px;
    background: rgba(var(--bialy-rgb), .35);
    transition: width .4s,background .4s;
}
.hero-kropki button[aria-current="true"]::before { width: 22px; background: var(--accent-color) }
.hero-kropki button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -4px }
@media (max-width:768px) {
    .hero-scroll-indicator { display: none }
    .love-intro { opacity: .85 }
    .hero-slajder { right: auto; top: auto; left: 50%; transform: translateX(-50%); bottom: 26px; align-items: center; gap: .2rem }
    .hero-kropki { flex-direction: row }
    .hero-kropki button { width: 30px; height: 30px; justify-content: center }
}
@media (prefers-reduced-motion:reduce) {
    .hero-slajd, .love-intro i { transition-duration: .01s }
    .hero-slajd.kb, .love-intro i.puls { animation: none }
}
.sekcja-jasna .cena-wyroz { color: var(--braz); font-weight: 500 }
/* --- dla firm: kroki wspolpracy na jasnym tle, logo w referencji --- */
.sekcja-jasna .proces-numer { color: var(--braz); opacity: 1 }

/* =====================================================================
   5. PODSTRONY – podstrony uslug, dla firm, polityka prywatnosci
   ===================================================================== */
/* Lista uslug i blok wyceny w sekcji Dla firm */
.firmy-wycena { max-width: 760px; margin: 4rem auto 0; text-align: center }
.firmy-wycena h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
}
.firmy-wycena p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8; margin-bottom: 1.2rem }
.firmy-wycena .btn-oferta-main { margin-top: 1.2rem }
@media (max-width: 768px) {
    .firmy-wycena { margin-top: 3rem }
}
/* === PODSTRONA DLA FIRM === */
.page-hero-firmy { padding: 14rem 0 6rem; background: var(--bg-color); text-align: center }
.page-hero-firmy .hero-title { margin-bottom: 1.5rem; font-size: clamp(2.8rem, 6.5vw, 5.5rem) }
.page-hero-firmy .hero-desc { max-width: 700px; margin: 0 auto }
.firmy-sekcja { padding: 5rem 0; background: var(--bg-color) }
.firmy-karty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; max-width: 960px; margin: 4rem auto 0 }
.firmy-karta {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    background: rgba(var(--bialy-rgb), 0.02);
    transition: border-color 0.4s ease, transform 0.4s ease;
}
.firmy-karta:hover { border-color: var(--accent-color); transform: translateY(-5px) }
.firmy-karta h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.firmy-karta p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75 }
.firmy-proces { padding: 5rem 0 6rem; background: var(--bg-color) }
.proces-krok h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}
.proces-krok p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.75 }
.firmy-klienci { max-width: 760px; margin: 4rem auto 0; text-align: center }
.firmy-klienci h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.firmy-klienci-lista { list-style: none; padding: 0 }
.firmy-klienci-lista li { color: var(--text-secondary); font-size: 1rem; line-height: 1.9 }
.firmy-klienci-lista strong { color: var(--text-primary); font-weight: 500 }
@media (max-width: 640px) {
    .page-hero-firmy { padding: 10rem 0 4rem }
    .firmy-karty { grid-template-columns: 1fr }
}
.faq-pozycja h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
}
.faq-pozycja p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8 }
/* Linkowanie miedzy podstronami uslugowymi */
.inne-uslugi { padding: 4rem 0 5rem; background: var(--bg-color) }
.inne-uslugi-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; max-width: 900px; margin: 3rem auto 0 }
.inne-uslugi-link {
    padding: 1.1rem 2.2rem;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition-fast);
}
.inne-uslugi-link:hover { border-color: var(--accent-color); color: var(--accent-color) }
@media (max-width: 640px) {
    .inne-uslugi-lista { flex-direction: column; align-items: stretch }
    .inne-uslugi-link { text-align: center }
}
/* === OPINIE NA PODSTRONACH USLUGOWYCH === */
.opinie-podstrona { padding: 5rem 0; background: var(--bg-color) }
.opinie-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 3.5rem auto 0;
}
.opinia-karta {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    background: rgba(var(--bialy-rgb), 0.02);
    display: flex;
    flex-direction: column;
    transition: border-color 0.4s ease;
}
.opinia-karta:hover { border-color: rgba(var(--akcent-rgb), 0.35) }
.opinia-karta .review-stars { color: var(--accent-color); font-size: 0.9rem; letter-spacing: 3px; margin-bottom: 1.2rem }
.opinia-tekst {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    font-style: italic;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}
.opinia-autor h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.opinia-autor span { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary) }
.opinie-wiecej { text-align: center; margin-top: 3rem; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase }
.opinie-wiecej a { color: var(--accent-color) }
@media (max-width: 640px) {
    .opinie-podstrona { padding: 3.5rem 0 }
    .opinia-karta { padding: 2rem 1.5rem }
}
.oferta-price strong { font-size: 2.2rem; color: var(--accent-color); font-weight: 400 }
.oferta-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.9rem; font-size: 0.95rem; line-height: 1.6 }
.oferta-faktory p { color: var(--text-secondary); font-size: 1rem; line-height: 1.8 }
@media (max-width: 768px) {
    .oferta-price strong { font-size: 1.9rem }
}
/* Formularz na podstronach uslug */
.podstrona-formularz { max-width: 760px; margin: 2.5rem auto 0; text-align: left }
.podstrona-formularz .form-container { padding: 3rem }
.podstrona-kontakt-alt { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2rem }
.podstrona-kontakt-alt p { width: 100%; text-align: center; color: var(--text-secondary); font-size: .9rem; margin: 0 0 .2rem }
@media (max-width: 768px) {
    .podstrona-formularz .form-container { padding: 2.2rem 1.4rem }
}
.hero-uslugi a {
    display: inline-block;
    padding: .15em .1em;
    color: var(--akcent-jasny);
    text-shadow: 0 1px 10px rgba(var(--czarny-rgb), .85),0 0 2px rgba(var(--czarny-rgb), .6);
    transition: color .2s;
}
.oferta-list li { color: var(--tekst-oferta) }
.oferta-price, .oferta-jednostka, .oferta-intro, .oferta-faktory p { color: var(--tekst-wyciszony) }
/* 7 pozycji zamiast 6: na srednich ekranach ciasniej, a e-mail zostaje w stopce i kontakcie */
@media (max-width: 1600px) {
    .nav-links a { font-size: 0.92rem; letter-spacing: 1.5px; padding: 0.6rem 0.8rem }
}
/* =========================================================
   JASNE SEKCJE: oferta, o mnie, kontakt
   ========================================================= */
.sekcja-jasna { background: var(--papier); color: var(--atrament) }
.co-dalej li { counter-increment: krok; position: relative; padding-left: 2.6rem; color: var(--atrament-2); line-height: 1.6 }
.co-dalej strong { color: var(--atrament); font-weight: 500 }
.form-blad a { color: var(--blad-tekst); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 768px) {
    .oferta-zakladka span { font-family: var(--font-heading); font-size: 1.05rem }
}
.dobrze-wiedziec h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--atrament);
    margin-bottom: .9rem;
}
.dobrze-wiedziec li { color: var(--atrament-2); line-height: 1.6; font-size: .95rem }
.dobrze-wiedziec strong { color: var(--atrament); font-weight: 500 }
.rodzaj-opcje span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border-radius: 40px;
    border: 1px solid rgba(var(--atrament-rgb), .3);
    color: var(--atrament);
    font-size: .9rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.portfolio-dalej a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--accent-color);
    border-radius: 40px;
    transition: background .3s ease, color .3s ease;
}
.portfolio-dalej a {
    background: var(--accent-color);
    color: var(--bg-color);
    border-color: var(--accent-color);
    min-height: 52px;
    padding: 0 1.8rem;
    font-size: .85rem;
    letter-spacing: .02em;
    text-transform: none;
    font-weight: 500;
}
/* wieksze cele dotykowe na telefonie */
@media (max-width: 768px) {
    .hero-uslugi a { padding: .6em .15em }
}
/* =========================================================
   CELE DOTYKOWE (2026-10-31): na telefonie kazdy przycisk i link
   ma co najmniej 44 px wysokosci; wyglad zostaje ten sam
   ========================================================= */
@media (max-width: 768px), (pointer: coarse) {
    .nav-brand a { display: inline-flex; align-items: center; min-height: 44px }
    .footer-links li, .footer-social li { margin-bottom: 0 }
    .footer-links a, .footer-social a { display: inline-flex; align-items: center; min-height: 44px }
}
.mbar-kontakt a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem .5rem;
    border-radius: 40px;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}
/* Podstrony uslug (2026-10-31). Wszystko zawezone do body.podstrona,
   zeby nie ruszalo strony glownej. */
/* --- naglowek: tekst po lewej, zdjecie po prawej (twarze nigdy pod napisem) --- */
.podstrona .podstrona-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
    min-height: min(92vh, 900px);
    padding: 0;
    text-align: left;
    background: var(--bg-color);
}
.podstrona .podstrona-hero .hero-content { align-self: center; align-items: flex-start; max-width: 640px; margin: 0; padding: 130px 4vw 70px 5vw }
.podstrona .podstrona-hero .hero-title { font-size: clamp(2.6rem, 4.3vw, 4.3rem); margin-bottom: 1.4rem }
.podstrona .podstrona-hero .hero-desc { margin: 0 0 1.6rem; max-width: 34em; text-shadow: none }
.podstrona .podstrona-hero .okruszki { margin-bottom: 1.6rem }
.podstrona .podstrona-hero .hero-ocena { margin: 0 0 2rem }
.podstrona .podstrona-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem }
.podstrona .podstrona-hero .hero-actions .btn-cta,
.podstrona .podstrona-hero .hero-actions .btn-primary { margin: 0 }
.podstrona-cena { margin: 0 0 1.2rem; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--tekst-jasny) }
.podstrona-cena strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.9rem;
    letter-spacing: 0;
    color: var(--accent-color);
    margin-left: 0.3rem;
}
.podstrona-hero-foto { position: relative; overflow: hidden; min-height: 100% }
/* lewa krawedz zdjecia przechodzi w tlo strony */
.podstrona-hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-color) 0, rgba(var(--ciemny-rgb), 0) 22%),
    linear-gradient(0deg, rgba(var(--ciemny-rgb), 0.45) 0, rgba(var(--ciemny-rgb), 0) 30%);
    pointer-events: none;
}
@media (max-width: 900px) {
    .podstrona .podstrona-hero { grid-template-columns: 1fr; min-height: 0 }
    .podstrona-hero-foto { order: -1; height: min(66svh, 125vw); min-height: 0 }
    .podstrona-hero-foto::after {
        background: linear-gradient(0deg, var(--bg-color) 0, rgba(var(--ciemny-rgb), 0) 38%),
        linear-gradient(180deg, rgba(var(--ciemny-rgb), 0.55) 0, rgba(var(--ciemny-rgb), 0) 26%);
    }
    .podstrona .podstrona-hero .hero-content { padding: 0 20px 64px; margin-top: -3.5rem; position: relative; z-index: 1 }
    .podstrona .podstrona-hero .hero-title { font-size: clamp(2.5rem, 10.5vw, 3.6rem); margin-bottom: 1.2rem }
    .podstrona .podstrona-hero .hero-desc { font-size: 1.02rem }
    .podstrona .podstrona-hero .hero-actions { width: 100% }
    .podstrona .podstrona-hero .hero-actions a { flex: 1 1 100%; text-align: center }
}
@media (max-width: 768px), (pointer: coarse) {
    .podstrona .okruszki a { display: inline-flex; align-items: center; min-height: 44px; margin: -14px 0 }
}
/* --- jasne sekcje podstron: karty, cena, pytania --- */
.podstrona .sekcja-jasna.firmy-sekcja,
.podstrona .sekcja-jasna.firmy-proces { padding: clamp(4.5rem, 9vw, 7.5rem) 0 }
.sekcja-jasna .firmy-karta { background: var(--papier-karta); border-color: var(--papier-linia) }
.sekcja-jasna .firmy-karta:hover { border-color: var(--braz) }
.sekcja-jasna .firmy-karta h3,
.sekcja-jasna .firmy-wycena h3,
.sekcja-jasna .faq-pozycja h3 { color: var(--atrament) }
.sekcja-jasna .firmy-karta p,
.sekcja-jasna .firmy-wycena p,
.sekcja-jasna .faq-pozycja p { color: var(--atrament-2) }
.sekcja-jasna .firmy-wycena {
    background: var(--papier-karta);
    border: 1px solid var(--papier-linia);
    border-radius: 14px;
    padding: clamp(2rem, 4vw, 3rem);
}
/* --- opinie na podstronie: ta sama siatka co na glownej, bez zdjec --- */
.podstrona .reviews .review-card .card-inner { padding-top: clamp(2rem, 3vw, 2.6rem) }
/* --- pozostale uslugi --- */
.podstrona .inne-uslugi { border-top: 1px solid var(--border-color) }
.sekcja-jasna .proces-krok h3 { color: var(--atrament) }
.sekcja-jasna .proces-krok p { color: var(--atrament-2) }
.ref-logo { display: inline-block; margin-bottom: 2rem; padding: 6px 0; border-radius: 6px }
.ref-logo:hover img, .ref-logo:focus-visible img { opacity: 1; transform: scale(1.03); filter: brightness(1.25) drop-shadow(0 0 14px rgba(var(--ref-niebieski-rgb), .55)) }
.ref-logo:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 6px }
.podstrona #referencje .card-inner { max-width: 860px; margin: 4rem auto 0 }
/* --- polityka prywatnosci: jasna kartka do czytania --- */
.polityka { max-width: 780px }
.polityka h2:first-child { margin-top: 0 }
.polityka ul { padding-left: 1.2rem; margin-bottom: 1rem }
.polityka a { text-decoration: underline }
.polityka-tabela { overflow-x: auto; margin: 1.5rem 0 }
.polityka table { border-collapse: collapse; width: 100%; font-size: .9rem }
.polityka th, .polityka td { border: 1px solid var(--papier-linia); padding: .6rem .8rem; text-align: left; vertical-align: top }
.polityka th { font-weight: 500 }
.sekcja-jasna .polityka h2, .sekcja-jasna .polityka strong, .sekcja-jasna .polityka th { color: var(--atrament) }
.sekcja-jasna .polityka p, .sekcja-jasna .polityka li, .sekcja-jasna .polityka td { color: var(--atrament-2) }
.sekcja-jasna .polityka a { color: var(--braz) }
.podstrona-tekst .sekcja-jasna.firmy-sekcja { padding: clamp(3.5rem, 7vw, 6rem) 0 }
.podstrona-tekst .sekcja-jasna .container.polityka { margin: 0 auto }

/* =====================================================================
   6. VOUCHER – zapowiedz vouchera na stronie glownej i strona vouchera
   ===================================================================== */
/* fokus z klawiatury na ciemnych sekcjach – w kolorze strony zamiast domyslnego */
.portfolio-filter-btn:focus-visible,
.reviews-more:focus-visible,
.vpp-btn:focus-visible,
.btn-cta:focus-visible,
.btn-primary:focus-visible,
.wybor-kafel:focus-visible,
.portfolio-item:focus-visible,
.mbar-kontakt a:focus-visible,
.footer a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px }
.portfolio-item:focus-visible { outline-offset: -3px }
.portfolio-dalej a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px }
.vp-promo { padding: clamp(4rem,9vw,7rem) 5vw; border-top: 1px solid var(--border-color) }
.vp-promo .vpp-in {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem,5vw,4rem);
    align-items: center;
}
@media (min-width:900px) {
    .vp-promo .vpp-in { grid-template-columns: 1fr 1.1fr }
}
.vp-promo .vpp-eyebrow { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-color) }
.vp-promo h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2rem,4.6vw,3.2rem);
    line-height: 1.1;
    margin: .8rem 0 1.2rem;
}
.vp-promo h2 em { color: var(--accent-color) }
.vp-promo p { color: var(--text-secondary); max-width: 46ch; margin-bottom: 2rem; font-weight: 300 }
.vp-promo .vpp-btn {
    display: inline-flex;
    padding: 1.05rem 2.2rem;
    border-radius: 40px;
    background: var(--accent-color);
    color: var(--bg-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .8rem;
    font-weight: 500;
    transition: background .4s ease;
}
.vp-promo .vpp-btn:hover { background: var(--accent-hover) }
.vp-promo img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 60px rgba(var(--czarny-rgb), .55);
    transform: rotate(2deg);
}
.podstrona-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.ref-logo img {
    display: block;
    width: 320px;
    max-width: 80vw;
    height: auto;
    opacity: .85;
    transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}
.polityka h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; margin: 2.5rem 0 1rem }
.polityka p, .polityka li { line-height: 1.8; margin-bottom: 1rem }
.polityka li { list-style: disc; margin-bottom: .5rem }