/* ============================================================
   Osiedle Portowe — system designu „Portowy premium"
   Paleta: granat #0F2B46 · błękit logo #1B75BB · piasek #F4EFE7
   Fonty self-hosted (RODO: zero zewnętrznych zasobów).
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/fraunces-v38-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}

:root {
    --granat: #0F2B46;
    --granat-jasny: #1A3C5E;
    --niebieski: #1B75BB;
    --niebieski-ciemny: #145E97;
    --piasek: #F4EFE7;
    --piasek-ciemny: #E9E1D3;
    --tlo: #FDFCF9;
    --antracyt: #24313D;
    --szary: #5A6874;
    --linia: #E4DFD4;
    --zielen: #2E7D4F;
    --zielen-tlo: #E5F3EA;
    --bursztyn: #9A6B00;
    --bursztyn-tlo: #FFF4D6;
    --szary-status: #757C83;
    --szary-status-tlo: #ECEEF0;
    --cien: 0 10px 30px rgba(15, 43, 70, .10);
    --promien: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.125rem;
    color: var(--antracyt);
    background: var(--tlo);
    line-height: 1.65;
    overflow-x: clip;
    /* sticky footer: stopka nigdy nie wjeżdża powyżej dolnej krawędzi ekranu */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
h1, h2, h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    color: var(--granat);
    line-height: 1.15;
    letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 0 0 .6em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2.2em 0 .7em; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--niebieski); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--niebieski-ciemny); }
img { max-width: 100%; height: auto; }
main { max-width: 74rem; width: 100%; flex: 1; margin: 0 auto; padding: 0 1.25rem 2rem; }
main > h1:first-child { margin-top: 2.2rem; }

/* ---------- nagłówek / nawigacja ---------- */
.naglowek {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    align-items: center;
    padding: .9rem clamp(1.25rem, 4vw, 3rem);
    background: rgba(253, 252, 249, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linia);
}
.naglowek .logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--granat);
    text-decoration: none;
    letter-spacing: .02em;
}
.logo-znak { width: 24px; height: 24px; flex-shrink: 0; }
.naglowek nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.naglowek nav a {
    color: var(--antracyt);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}
.naglowek nav a:hover { color: var(--niebieski); }
.naglowek nav a[aria-current="page"] { color: var(--niebieski); border-bottom-color: var(--niebieski); }

/* ---------- przyciski ---------- */
button, .przycisk, .przycisk-jasny {
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: .85rem 1.9rem;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
button, .przycisk {
    background: var(--niebieski);
    color: #fff;
}
button:hover, .przycisk:hover { background: var(--niebieski-ciemny); color: #fff; transform: translateY(-1px); }
.przycisk-jasny {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .75);
}
.przycisk-jasny:hover { background: rgba(255, 255, 255, .24); color: #fff; transform: translateY(-1px); }

/* ---------- hero strony głównej ---------- */
.hero {
    position: relative;
    margin: 0 calc(50% - 50vw);
    min-height: min(88vh, 820px);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: var(--granat);
}
.hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 26, 43, .92) 0%, rgba(10, 26, 43, .52) 48%, rgba(10, 26, 43, .18) 100%);
}
.hero figcaption {
    position: absolute;
    top: 1rem;
    right: 1.4rem;
    z-index: 2;
    color: rgba(255, 255, 255, .92);
    background: rgba(15, 43, 70, .45);
    padding: .18rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .04em;
}
.hero-nadtytul, .hero-tresc h1, .hero-opis { text-shadow: 0 2px 18px rgba(10, 26, 43, .5); }
.hero-tresc {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 74rem;
    margin: 0 auto;
    padding: 4rem clamp(1.25rem, 4vw, 3rem) 4.5rem;
}
.hero-nadtytul {
    color: #B9D6EE;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0 0 1rem;
}
@media (max-width: 40rem) {
    .hero-nadtytul { font-size: .78rem; letter-spacing: .14em; }
}
.hero-tresc h1 {
    color: #fff;
    font-size: clamp(2.3rem, 5.5vw, 4rem);
    max-width: 15em;
    margin: 0 0 .45em;
    text-wrap: balance;
}
.hero-opis {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    max-width: 34em;
    margin: 0 0 1.8rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- cinematic ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hero img { animation: hero-kadr 26s ease-in-out infinite alternate; will-change: transform; }
    .hero-tresc > * { opacity: 0; transform: translateY(26px); animation: hero-wejscie .9s cubic-bezier(.22, .7, .3, 1) forwards; }
    .hero-tresc > :nth-child(1) { animation-delay: .25s; }
    .hero-tresc > :nth-child(2) { animation-delay: .55s; }
    .hero-tresc > :nth-child(3) { animation-delay: .85s; }
    .hero-tresc > :nth-child(4) { animation-delay: 1.15s; }
}
@keyframes hero-kadr {
    from { transform: scale(1); }
    to { transform: scale(1.09) translateY(-1.2%); }
}
@keyframes hero-wejscie {
    to { opacity: 1; transform: none; }
}
.efekty-aktywne .do-odslony { opacity: 0; transform: translateY(18px); }
.efekty-aktywne .odslonione {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .7, .3, 1);
}
.efekty-aktywne .atuty li:nth-child(2).odslonione { transition-delay: .07s; }
.efekty-aktywne .atuty li:nth-child(3).odslonione { transition-delay: .14s; }
.efekty-aktywne .atuty li:nth-child(4).odslonione { transition-delay: .21s; }
.efekty-aktywne .liczba:nth-child(2).odslonione { transition-delay: .06s; }
.efekty-aktywne .liczba:nth-child(3).odslonione { transition-delay: .12s; }
.efekty-aktywne .liczba:nth-child(4).odslonione { transition-delay: .18s; }

/* ---------- pasek liczb ---------- */
.liczby {
    margin: 0 calc(50% - 50vw);
    background: var(--piasek);
    border-bottom: 1px solid var(--linia);
}
.liczby-srodek {
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.6rem clamp(1.25rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.2rem 2rem;
}
.liczba b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.8rem, 7vw, 3rem); /* 48px na desktopie, bez łamania na mobile */
    font-weight: 700;
    color: var(--granat);
    line-height: 1.05;
    white-space: nowrap;
}
.liczba span { color: var(--szary); font-size: 1rem; }

/* ---------- karty atutów ---------- */
.atuty {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.2rem;
    padding: 0;
    margin: 2rem 0;
    list-style: none;
}
.atuty li {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1.5rem 1.4rem 1.3rem;
}
.atut-ikona { display: block; margin-bottom: .7rem; }
.atut-ikona svg { width: 32px; height: 32px; display: block; }
.atuty b { display: block; color: var(--granat); font-size: 1.12rem; margin-bottom: .25rem; }
.atuty span { color: var(--szary); font-size: 1rem; }

/* ---------- sekcja wyróżnika ---------- */
.wyroznik {
    margin: 2.8rem calc(50% - 50vw) 0;
    background: var(--granat);
    color: #E8EEF5;
}
.wyroznik-srodek {
    max-width: 74rem;
    margin: 0 auto;
    padding: 3.2rem clamp(1.25rem, 4vw, 3rem) 3.6rem;
}
.wyroznik-nadtytul {
    color: #8FB8DE;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0 0 .8rem;
}
.wyroznik h2 { color: #fff; margin: 0 0 1.8rem; }
.wyroznik-siatka {
    display: grid;
    gap: 1.8rem 2.6rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.wyroznik-siatka b {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: .45rem;
}
.wyroznik-siatka p { margin: 0; color: #C7D6E4; font-size: 1rem; }

/* ---------- sekcja lokalizacji ---------- */
.lokalizacja {
    position: relative;
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 2.2rem clamp(1.4rem, 3vw, 2.6rem);
    margin: 2.5rem 0;
    overflow: hidden;
}
.lokalizacja::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 260px;
    height: 260px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231B75BB' stroke-width='1.6'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Cpath d='M50 8v14M50 78v14M8 50h14M78 50h14'/%3E%3Cpath d='M50 24 58 50 50 76 42 50z' fill='%231B75BB' fill-opacity='.25'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .16;
    pointer-events: none;
}
.lokalizacja h2 { margin-top: 0; }
.logo-inwestycji { margin: 0 0 1rem; }
.logo-inwestycji img { max-width: 165px; height: auto; }
.lokalizacja-siatka { display: grid; gap: 1.6rem 2.4rem; align-items: center; }
@media (min-width: 64rem) { .lokalizacja-siatka { grid-template-columns: 1fr 1.25fr; } }
.mapa a { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(15, 43, 70, .14); }
.mapa img { display: block; transition: transform .5s ease; }
.mapa a:hover img { transform: scale(1.03); }
.mapa figcaption { margin-top: .55rem; }

/* ---------- separator fali ---------- */
.fala {
    height: 26px;
    margin: 2.6rem 0 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8c10-8 20-8 30 0s20 8 30 0 20-8 30 0 20 8 30 0' fill='none' stroke='%231B75BB' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 120px 12px;
    background-position: center;
}

/* ---------- plan osiedla ---------- */
.plan-osiedla {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: clamp(.8rem, 2vw, 1.6rem);
    margin: 1.4rem 0 .8rem;
}
.plan-osiedla svg { width: 100%; height: auto; display: block; }
.plan-osiedla .dzialka { fill: var(--piasek); stroke: #C9BFA9; }
.plan-osiedla .dom { cursor: pointer; stroke: rgba(15, 43, 70, .55); rx: 5px; transition: filter .15s ease; }
.plan-osiedla .dom:hover { filter: brightness(1.08); }
.plan-osiedla .dom.status-wolny { fill: #4C9A68; }
.plan-osiedla .dom.status-zarezerwowany { fill: #D9A441; }
.plan-osiedla .dom.status-sprzedany { fill: #9AA0A6; }
.dom-podswietlony { outline: 3px solid var(--niebieski); outline-offset: 2px; }
.legenda-statusow { color: var(--szary); font-size: .95rem; }
.legenda-statusow .status-wolny,
.legenda-statusow .status-zarezerwowany,
.legenda-statusow .status-sprzedany {
    display: inline-block;
    padding: .1rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
}
.legenda-statusow .status-wolny { background: var(--zielen-tlo); color: var(--zielen); }
.legenda-statusow .status-zarezerwowany { background: var(--bursztyn-tlo); color: var(--bursztyn); }
.legenda-statusow .status-sprzedany { background: var(--szary-status-tlo); color: var(--szary-status); }

/* ---------- ceny: karty ofert (siatka na desktopie, kolumna na telefonie) ---------- */
.ceny-stan { color: var(--szary); font-size: .95rem; margin-bottom: .4rem; }
.tabela-scroll { margin: 1rem 0 1.6rem; }
/* <table> renderowana jako siatka kart — bez poziomego przewijania na żadnej
   szerokości; semantyka tabeli zostaje dla czytników ekranu. */
.tabela-cen { display: grid; grid-template-columns: 1fr; gap: 1.1rem; width: 100%; }
@media (min-width: 58rem) { .tabela-cen { grid-template-columns: 1fr 1fr; } }
.tabela-cen thead { display: none; }
.wiersz-domu {
    display: block;
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: .2rem 1.3rem 1rem;
}
.wiersz-domu > tr { display: block; }
.wiersz-domu td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem 1.2rem;
    padding: .6rem 0;
    border-bottom: 1px dashed #EAE3D6;
    text-align: right;
    font-size: 1rem;
}
.wiersz-domu td::before {
    content: attr(data-etykieta);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--szary);
    text-align: left;
    flex-shrink: 0;
}
/* Pierwsza komórka = nagłówek karty (numer domu + adnotacja) */
.wiersz-domu td.karta-tytul {
    display: block;
    text-align: left;
    padding: .9rem 0 .5rem;
    margin-bottom: .2rem;
    border-bottom: 2px solid var(--piasek-ciemny);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--granat);
}
.wiersz-domu td.karta-tytul::before { content: none; }
.wiersz-domu td.karta-tytul small {
    display: block;
    margin-top: .3rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 400;
    color: var(--szary);
}
.wiersz-domu .cena { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.35rem; color: var(--granat); }
.wiersz-domu small { color: var(--szary); }
/* Omnibus i historia: pełna szerokość pod danymi */
.omnibus { flex-basis: 100%; text-align: right; font-size: .85rem; margin: .2rem 0 0; color: var(--szary); }
.chip {
    display: inline-block;
    padding: .18rem .8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}
tr.status-wolny .chip { background: var(--zielen-tlo); color: var(--zielen); }
tr.status-zarezerwowany .chip { background: var(--bursztyn-tlo); color: var(--bursztyn); }
tr.status-sprzedany .chip { background: var(--szary-status-tlo); color: var(--szary-status); }
tr.status-sprzedany td { color: var(--szary-status); }
.historia-wiersz td { display: block; text-align: left; border-bottom: none; padding: .5rem 0 0; font-size: .92rem; }
.historia-wiersz td::before { content: none; }
.historia-wiersz summary { cursor: pointer; color: var(--niebieski); font-weight: 600; }
.historia-wiersz summary:hover { color: var(--niebieski-ciemny); }
.historia-wiersz ul { margin: .5rem 0 .3rem; padding-left: 1.1rem; }
.cennik-tymczasowy, .komunikat {
    background: var(--bursztyn-tlo);
    border: 1px solid #E4C567;
    border-radius: 12px;
    padding: .8rem 1.1rem;
    font-size: .95rem;
}
.przypis-metraz, .przypis-dzialka, .podpis-grafiki { font-size: .9rem; color: var(--szary); }
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--szary); }

/* ---------- standard wykonania ---------- */
.standard-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.2rem;
    margin: 1.6rem 0;
}
.standard-siatka section {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1.4rem 1.5rem;
}
.standard-siatka h2 { margin: 0 0 .7rem; font-size: 1.25rem; }
.standard-siatka ul { margin: 0; padding-left: 1.1rem; }
.standard-siatka li { margin-bottom: .45rem; color: var(--antracyt); font-size: 1rem; }
.standard-siatka li::marker { color: var(--niebieski); }

/* ---------- postęp prac ---------- */
.wpis {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1.6rem 1.7rem;
    margin: 1.4rem 0;
}
.wpis h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.wpis time { color: var(--szary); font-size: .88rem; font-weight: 600; letter-spacing: .04em; }
.wpis figure { display: inline-block; margin: .6rem 1rem .4rem 0; max-width: 340px; }
.wpis img { border-radius: 10px; }

/* ---------- formularz kontaktowy ---------- */
form.kontakt {
    background: #fff;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    padding: 1.8rem 1.9rem;
    margin: 1.4rem 0;
    max-width: 44rem;
}
form.kontakt label { display: block; margin-top: 1rem; font-weight: 600; color: var(--granat); font-size: .95rem; }
form.kontakt input, form.kontakt textarea {
    width: 100%;
    padding: .7rem .85rem;
    margin-top: .3rem;
    border: 1px solid #D8D2C6;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--tlo);
}
form.kontakt input:focus, form.kontakt textarea:focus {
    outline: 2px solid var(--niebieski);
    outline-offset: 1px;
    border-color: var(--niebieski);
}
form.kontakt .rodo { font-size: .85rem; color: var(--szary); }
form.kontakt .www-pole { position: absolute; left: -9999px; }
form.kontakt button { margin-top: 1.2rem; }

/* ---------- stopka ---------- */
.stopka {
    margin-top: 3.5rem;
    background: var(--granat);
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    padding: 2.2rem clamp(1.25rem, 4vw, 3rem) 2.4rem;
    line-height: 1.7;
}
.stopka a { color: #A8CDEB; }
.stopka a:hover { color: #fff; }
.stopka-autor { opacity: .7; font-size: .78rem; }

/* ---------- menu mobilne: hamburger + szklany panel ---------- */
.menu-przycisk { display: none; }
@media (max-width: 48rem) {
    .naglowek {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        /* Reguła Liquid Glass: przodek panelu NIE może mieć backdrop-filter,
           inaczej szkło panelu nie próbkuje strony pod spodem (backdrop root). */
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(253, 252, 249, .96);
    }
    .menu-przycisk {
        display: grid;
        gap: 5px;
        place-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 0;
        border-radius: 12px;
        padding: 0;
        cursor: pointer;
    }
    .menu-przycisk:hover { background: rgba(27, 117, 187, .08); transform: none; }
    .menu-przycisk span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--granat);
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }
    .menu-otwarte .menu-przycisk span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-otwarte .menu-przycisk span:nth-child(2) { opacity: 0; }
    .menu-otwarte .menu-przycisk span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Liquid Glass: refrakcyjna tafla — gradientowe wypełnienie, rozbłysk
       krawędzi (specular rim), połysk i sprężyste otwarcie. */
    .naglowek nav {
        position: fixed;
        top: 4.3rem;
        left: .7rem;
        right: .7rem;
        z-index: 60;
        background: linear-gradient(135deg,
            rgba(255, 255, 255, .30) 0%,
            rgba(255, 255, 255, .12) 45%,
            rgba(255, 255, 255, .22) 100%);
        -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
        backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
        /* Chromium: refrakcja przez displacement na backdropie; przeglądarki
           bez wsparcia url() zostają przy samym blur z linii wyżej. */
        backdrop-filter: blur(24px) saturate(1.8) brightness(1.06) url('#szklo-refrakcja');
        border-radius: 28px;
        box-shadow:
            inset 0 1.5px 1px rgba(255, 255, 255, .95),
            inset 0 -1px 1px rgba(255, 255, 255, .35),
            inset 1px 0 1px rgba(255, 255, 255, .5),
            inset -1px 0 1px rgba(255, 255, 255, .3),
            0 22px 55px rgba(15, 43, 70, .32),
            0 3px 10px rgba(15, 43, 70, .16);
        padding: .7rem;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-14px) scale(.94);
        transform-origin: top center;
        pointer-events: none;
        transition: opacity .3s ease, transform .38s cubic-bezier(.2, .95, .25, 1.2);
    }
    .naglowek nav::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg,
            rgba(255, 255, 255, .6) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, .22) 100%);
        pointer-events: none;
    }
    .menu-otwarte .naglowek nav { opacity: 1; transform: none; pointer-events: auto; }
    .naglowek nav ul { position: relative; flex-direction: column; gap: .2rem; }
    .naglowek nav a {
        display: block;
        padding: .85rem 1.1rem;
        font-size: 1.05rem;
        border-radius: 16px;
        border-bottom: none;
        transition: background .2s ease, box-shadow .2s ease;
    }
    .naglowek nav a:hover { background: rgba(255, 255, 255, .4); }
    .naglowek nav a[aria-current="page"] {
        background: rgba(255, 255, 255, .58);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 8px rgba(15, 43, 70, .12);
        border-bottom: none;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 40rem) {
    .hero { min-height: 76vh; }
    .hero-tresc { padding-bottom: 3rem; }
}