/* FutureWeb V2 — system wizualny. Jedyne miejsce, gdzie mieszkają wartości.
   Kierunek: kontekst-strony/wyglad.md (+ zmiany 25.09), narzedzia/robocze/wzorzec-wizualny.md,
   badanie-designu.md. Decyzje z powodem: narzedzia/robocze/projektant-dziennik.md.
   Jeden motyw: ciemny (trybu jasnego nie ma — Jakub 30.10). Szkło ma dwa poziomy [data-szklo] na <html> (glowa.php): pelne · lekkie. */

:root {
  /* — barwy -------------------------------------------------------------
     Noc i tekst bez błękitu. Barwy logotypu STŁUMIONE jak okno preloadu
     (czesci/preload.php: #b85c68, #7f68ad, rgb(108,103,150)) — żyją w krawędziach
     szkła, liniach, znacznikach. Nigdy w całym zdaniu, nigdy jako wypełnienie. */
  --noc: #070912;
  --noc-2: #0c0d1a;
  --tekst: #ebe9f2;                  /* złamana biel — nie czysta */
  --tekst-2: #a7a5b9;                /* tekst ciągły, podpisy (7,9 : 1 na nocy) */
  --tekst-3: #908ea5;                /* trzeci stopień: znaczniki, komentarze, przypisy (6,2 : 1 na nocy, ≥ 4,5 : 1 na taflach) */
  --linia: rgba(235, 233, 242, .1);
  --czerwien: #b85c68;               /* lewe skrzydło logotypu, stłumione */
  --fiolet: #7f68ad;                 /* środek znaku, wyblakły */
  --fiolet-szary: #6c6796;           /* obrysy okna preloadu */
  --akcent: #d99aa4;                 /* niuans: strzałki, podkreślenia, fokus — jasna pochodna czerwieni */
  --akcja: #f0485f;                  /* GORĄCY — wyłącznie akcje, kilka procent powierzchni */
  --na-akcji: #0a0b16;
  --porcelana: #ecebf3;              /* „pomiń do treści", fokus na akcji */
  --tekst-akcji: #fff;               /* tekst na czerwonym szkle: ≥ 4,5 : 1 w obu trybach (pomiar 26.09) */
  --akcja-tlo: color-mix(in oklab, var(--akcja) 70%, var(--noc));   /* ≈ #a8364a — tekst porcelanowy 5,4 : 1 */
  --akcja-tlo-2: color-mix(in oklab, var(--akcja) 80%, var(--noc));

  /* — kroje (assets/css/czcionki.css): Jost zmienny + Martian Mono ------- */
  --kroj-naglowek: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --kroj-tekst: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --kroj-mono: 'FW Mono', ui-monospace, monospace;
  /* wagi — hierarchię robi stopień i powietrze, nie grubość (cała strona 240–500) */
  --w-rzezba: 240;
  --w-naglowek: 280;
  --w-lead: 340;
  --w-tekst: 400;
  --w-mocny: 500;
  --w-lekki: 300;                    /* zdania-wartości (cena, formularz-zdanie), nazwy kart */
  --w-srodek: 320;                   /* h3 */

  /* — skala (Jakub 25.09: mniejsza, „ale nie za mała"). Skoki, nie stopnie pośrednie.
     mini etykiety mono · 0 drobny · 1 tekst · 2 lead · 3 nazwy/h3 · 4 h2 · 5 nagłówek
     sekcji-rzeźba · 6 hero i klamra domknięcia */
  --r-mini: .6875rem;
  --r-0: .8125rem;
  --r-0-5: .9375rem;                /* tekst drugi: opisy, tafle na telefonie, przyciski */
  --r-1: 1rem;
  --r-lead: 1.0625rem;              /* lead w tafli — 17 px: ~58 znaków w wierszu tafli 30 rem */
  --r-2: 1.1875rem;
  --r-3: clamp(1.3125rem, 1.1rem + .7vw, 1.75rem);
  --r-4: clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem);
  --r-5: clamp(2.125rem, 1.35rem + 2.5vw, 3.375rem);
  --r-6: clamp(2.625rem, 1.2rem + 4.4vw, 5rem);

  /* — odstępy ------------------------------------------------------------ */
  --o-1: 4px; --o-2: 8px; --o-3: 12px; --o-4: 16px; --o-5: 24px;
  --o-6: 32px; --o-7: 48px; --o-8: 72px; --o-9: 112px;
  --margines: clamp(16px, 4vw, 56px);

  /* — znak 3D na ekranie (scena.js UDZIAL_SZEROKOSCI: 0,44 komputer, 0,86 < 700 px;
     bryła 1 : 0,536). Środek znaku = środek ekranu (50svh). Zmiana w scena.js → tu też. */
  --znak-szer: 44vw;
  --znak-polwys: 11.8vw;
  --szer-tekstu: 62ch;

  /* — promienie ---------------------------------------------------------- */
  --z-maly: 12px;
  --z-pigulka: 999px;

  /* — ruch --------------------------------------------------------------- */
  --e-lagodna: cubic-bezier(.2, .7, .2, 1);
  --e-sprezyna: cubic-bezier(.34, 1.36, .5, 1);
  --e-wyj: cubic-bezier(.55, 0, .25, 1);

  /* — nagłówek: sam logotyp (Jakub 25.09) --------------------------------- */
  /* napisy „Future" i „Web" zajmują 16,6% wysokości PNG: 84 px → litery ~14 px,
     po przewinięciu ×.86 → ~12 px (próg czytelności, prowadzący 25.09) */
  --logo-wys: 84px;
  --logo-po-przewinieciu: .86;
}
@media (max-width: 959px) { :root { --logo-wys: 68px; } }
@media (max-width: 699px) {
  /* telefon: 64 px (litery ~10,6 px — pismo markerowe grube, czyta się); przy przewijaniu
     w dół logotyp chowa się zamiast maleć, wraca przy przewijaniu w górę (menu.js) */
  :root { --logo-wys: 64px; --logo-po-przewinieciu: 1; --znak-szer: 86vw; --znak-polwys: 23vw; }
}

/* — podstawa -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--noc);
  color: var(--tekst);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;                   /* bezwładność kółka liczy przewijanie.js */
  /* pasek przewijania — widoczny (szybki przeskok przez stronę, wyglad.md), cichy */
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 165, 185, .32) var(--noc);
  -webkit-tap-highlight-color: transparent;  /* bez systemowego prostokąta przy dotknięciu — naciśnięcie pokazuje szkło (:active) */
}
/* sterowanie nie zaznacza się przy przytrzymaniu palcem; tekst treści — tak (cytat, adres) */
a, button, label, summary, [role="button"], .pigulka, .przycisk, .menu-okragle {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--noc);
  font: var(--w-tekst) var(--r-1)/1.62 var(--kroj-tekst);
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  font-kerning: normal;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
input, textarea, select { font: inherit; caret-color: var(--akcja); }
/* zaznaczenie — stłumiona czerwień logotypu, nie systemowy błękit */
::selection { background: rgba(184, 92, 104, .55); color: #fff; }
/* fokus — jasny różowy obrys z odstępem: widoczny na nocy i na szkle */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* nagłówek = rzeźba: lekki geometryczny krój, jedna waga na poziom, stopień robi hierarchię */
h1, h2, h3 {
  margin: 0;
  font-family: var(--kroj-naglowek);
  font-weight: var(--w-naglowek);
  line-height: 1.04;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h1 { font-size: var(--r-5); font-weight: var(--w-rzezba); }
h2 { font-size: var(--r-4); }
h3 { font-size: var(--r-3); font-weight: var(--w-srodek); line-height: 1.12; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
strong, b { font-weight: var(--w-mocny); }
.fakt {                                    /* twarde fakty — krój stałej szerokości, szept */
  font-family: var(--kroj-mono);
  font-weight: 400;
  font-size: var(--r-mini);
  line-height: 1.7;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.wiersz { display: block; }                /* ręczne łamanie nagłówka po sensie */
.ikona { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* odnośnik-duch — druga akcja obok jedynej pełnej (jedna pełna na ekran) */
.odnosnik-dalej {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: 44px;
  color: var(--tekst);
  font-weight: var(--w-mocny);
  font-size: var(--r-0-5);
  text-decoration: none;
}
.odnosnik-dalej > span {
  background: linear-gradient(var(--akcent), var(--akcent)) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .45s var(--e-lagodna);
}
.odnosnik-dalej:hover > span { background-size: 100% 1px; }
.odnosnik-dalej .ikona { width: 1.05em; height: 1.05em; color: var(--akcent); transition: transform .35s var(--e-lagodna); }
.odnosnik-dalej:hover .ikona { transform: translateX(4px); }

/* odnośnik cichy — dopowiedzenie, nie akcja: samo podkreślenie w stłumionej czerwieni
   (strzałka tylko przy akcjach prowadzących dalej — krytyka B, inspiracje 13) */
.odnosnik-cichy {
  display: inline-block;
  padding-block: 6px;
  color: inherit;
  text-decoration: underline 1px color-mix(in srgb, var(--czerwien) 80%, transparent);
  text-underline-offset: .3em;
  transition: text-decoration-color .3s ease;
}
.odnosnik-cichy:hover { text-decoration-color: var(--akcent); }
.tafla .odnosnik-cichy { color: var(--tafla-tekst); text-decoration-color: var(--tafla-akcent); }

.pomin-do-tresci {
  position: fixed; left: var(--o-4); top: var(--o-4); z-index: 60;
  padding: var(--o-3) var(--o-4);
  border-radius: var(--z-pigulka);
  background: var(--porcelana); color: var(--na-akcji);
  text-decoration: none;
  transform: translateY(-200%);
}
.pomin-do-tresci:focus { transform: none; }

/* strona bez sceny 3D: kadr galaktyki wyeksportowany z tej samej sceny */
.tlo-statyczne {
  background: var(--noc) url('../img/preload/tlo-poziom.webp') center / cover fixed no-repeat;
}
@media (max-aspect-ratio: 1/1) {
  .tlo-statyczne { background-image: url('../img/preload/tlo-pion.webp'); }
}

main { position: relative; z-index: 1; flex: 1; }

/* ==========================================================================
   SZKŁO — „Galaxy Liquid Glass" (wyglad.md; wzorce: szklo-wzorzec-ksztalt-samsung.png —
   gruba tafla z zaokrągloną, lśniącą krawędzią; szklo-wzorzec-barwy-apple.png —
   przezroczystość z opalizującymi odbarwieniami: fiolet, beż, niebieski).
   JEDYNE miejsce wyglądu szkła. Należą do niego: tafle z treścią (.tafla), pigułki
   nagłówka i narzędzi (.pigulka), przyciski (.przycisk--lekki, .przycisk--akcja).
   Widok daje tylko układ; zabarwienie elementu = --szklo-barwa.

   Budowa jednej tafli (od spodu):
     backdrop  — niebo PRZEZ szkło: „pelne" — rozmycie (bez soczewki — Jakub 01.10,
                 wydajność); „lekkie" — granat bez filtra.
     tło       — odbarwienia: cienka warstwa (szklo.js rysuje raz pole grubości → widmo,
                 obszary czystego szkła, mocniej przy brzegu), generatywne.
     podkład   — --szklo-podklad: lekko przyciemnia. Pod tekstem gęstszy (gwarancja kontrastu).
     ::before  — wnętrze: gwiezdna faktura, odbarwienia w barwach znaku, połysk
                 powierzchni i pas światła — ułożone według fazy (--faza).
     cienie    — grubość (--szklo-cienie): warga światła pod górnym rantem, światło zebrane
                 w dnie, fazka, ostry cień 1 px. Wspólne dla obu poziomów szkła.
     ::after   — rant (--szklo-rant): światło z góry, opalizująca obwódka (według fazy)
                 i plama połysku od znaku (--lx/--ly, szklo.js).
   RUCH (wyglad.md, Jakub 28.09): bez zapętlonego ruchu — każdy element stoi w swojej
   fazie (--szklo-los, szklo.js). Szkło odpowiada na człowieka: najechanie / naciśnięcie
   — rozjaśnienie (--szklo-rozjasn) i uniesienie; pod kursorem faza płynie tylko na tym
   jednym elemencie (szklo.js, --faza-js).
   ========================================================================== */
@property --faza { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --strzalka { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --szklo-rozjasn { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root {
  /* podkład: szkło odrobinę przyciemnia, ale samo nie gasi nieba —
     Jakub 25.09: +10–15% jasności; pomiar w narzedzia/robocze/agent-szklo.md) */
  --szklo-podklad: rgba(12, 14, 34, .05);        /* pigułki, przyciski lekkie */
  --szklo-podklad-tekst: rgba(14, 16, 36, .4);   /* tafla z tekstem */
  --szklo-podklad-gesty: rgba(8, 10, 24, .64);   /* znak za taflą — kontrast tekstu */
  --szklo-lekkie: rgba(17, 18, 38, .93);         /* poziom „lekkie" — bez filtra */
  --szklo-rozmycie: 2.5px;                       /* pigułki: gwiazdy widać jako miękkie punkty */
  --szklo-nasycenie: 145%;
  --szklo-jasnosc: 1.1;
  --szklo-promien: 22px;
  /* grubość rantu: przy DPR 1 pierścień 1,25 px rwał się na łuku w kreski (schodki —
     Jakub 26.09); 1,5 px daje ciągłą linię. Od DPR 2 zostaje 1,25 px (2,5 px ekranu) */
  --szklo-rant: 1.5px;
  --szklo-rant-krycie: .84;                      /* grubszy rant — ta sama ilość światła */
  /* światło */
  --szklo-swiatlo: rgba(255, 255, 255, .55);     /* górna krawędź */
  --szklo-swiatlo-dol: rgba(255, 255, 255, .1);  /* dolna krawędź — odbite */
  --szklo-lico: rgba(255, 255, 255, .066);       /* połysk powierzchni u góry */
  --szklo-pas: rgba(255, 255, 255, .045);        /* płynący pas światła */
  --szklo-odblask: rgba(255, 255, 255, .08);     /* sierp światła pod górnym rantem — wypukłość */
  --szklo-polysk: rgba(255, 255, 255, .7);       /* plama od znaku na rancie */
  --szklo-grubosc: rgba(255, 255, 255, .125);    /* światło zebrane pod rantem */
  --szklo-fazka-swiatlo: rgba(255, 255, 255, .08); /* miękki pas wzdłuż brzegu — grubość */
  --szklo-dno-swiatlo: rgba(138, 110, 235, .16); /* światło zebrane w dolnej krawędzi */
  --szklo-cien: 0 1px 2px rgba(2, 3, 10, .3);
  /* opalizowanie rantu — beż, fiolet, niebieski, róż (Apple) */
  --szklo-irys-bez: rgba(240, 214, 192, .6);
  --szklo-irys-fiolet: rgba(158, 132, 240, .6);
  --szklo-irys-niebieski: rgba(112, 152, 255, .55);
  --szklo-irys-roz: rgba(236, 128, 158, .5);
  /* odbarwienia wnętrza — barwy znaku, stłumione do prześwitu */
  --szklo-odb-fiolet: rgba(138, 60, 255, .13);
  --szklo-odb-niebieski: rgba(47, 107, 255, .12);
  --szklo-odb-czerwien: rgba(255, 45, 85, .08);
  --szklo-odb-bez: rgba(240, 214, 190, .06);
  /* odbarwienia cienkiej warstwy (szklo.js czyta): siła różu i fioletu — nie wybijają się
     (Jakub 01.10); morski domyka pętlę widma, przygaszony */
  --odb-k-roz: .85;
  --odb-k-fiolet: .73;
  --odb-morski: rgba(150, 214, 220, .4);
  --szklo-barwa: transparent;                    /* zabarwienie całego elementu */
  --szklo-rozjasn-hover: rgba(255, 255, 255, .04); /* najechanie / naciśnięcie — rozjaśnienie */
  --szklo-gwiazdy-kafel: 240px;                 /* gęstość gwiezdnej faktury */
  /* gwiezdna faktura w szkle — kafel 240 px, punkty 0,3–0,9 px */
  --szklo-gwiazdy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='18' r='.55' opacity='.7'/%3E%3Ccircle cx='47' cy='63' r='.4' opacity='.45'/%3E%3Ccircle cx='83' cy='11' r='.7' opacity='.8'/%3E%3Ccircle cx='121' cy='40' r='.45' opacity='.5'/%3E%3Ccircle cx='160' cy='22' r='.5' opacity='.6'/%3E%3Ccircle cx='228' cy='9' r='.35' opacity='.4'/%3E%3Ccircle cx='19' cy='97' r='.5' opacity='.5'/%3E%3Ccircle cx='102' cy='89' r='.35' opacity='.4'/%3E%3Ccircle cx='143' cy='112' r='.55' opacity='.6'/%3E%3Ccircle cx='188' cy='98' r='.4' opacity='.45'/%3E%3Ccircle cx='224' cy='131' r='.6' opacity='.65'/%3E%3Ccircle cx='8' cy='168' r='.45' opacity='.45'/%3E%3Ccircle cx='41' cy='203' r='.6' opacity='.6'/%3E%3Ccircle cx='90' cy='176' r='.4' opacity='.4'/%3E%3Ccircle cx='171' cy='160' r='.45' opacity='.5'/%3E%3Ccircle cx='213' cy='196' r='.5' opacity='.55'/%3E%3Ccircle cx='236' cy='232' r='.35' opacity='.35'/%3E%3Ccircle cx='58' cy='236' r='.3' opacity='.35'/%3E%3Ccircle cx='152' cy='77' r='.3' opacity='.3'/%3E%3C/g%3E%3Ccircle cx='66' cy='124' r='.9' fill='%23ffc9d4' opacity='.75'/%3E%3Ccircle cx='205' cy='51' r='.8' fill='%23c4d4ff' opacity='.8'/%3E%3Ccircle cx='131' cy='221' r='.75' fill='%23dccfff' opacity='.7'/%3E%3C/svg%3E");

  /* tafla: mniejsze wnętrze, węższa miara (Jakub: „obudówki mniejsze") */
  --tafla-wnetrze: clamp(18px, .9vw + 12px, 24px);
  --tafla-szer: 30rem;
  --tafla-promien: var(--szklo-promien);
  /* tekst na szkle — jasny w OBU trybach (tryby różnią się jasnością szkła, nie barwami) */
  --tafla-tekst: var(--tekst);
  --tafla-tekst-2: #b8b6c9;
  --tafla-akcent: var(--akcent);
  --tafla-blad: #ff9e8f;                     /* błędy formularzy — --akcja jest tylko dla akcji */
  --tafla-linia: rgba(235, 233, 242, .1);    /* podziały WEWNĄTRZ tafli, nie obrys */
  /* granica POLA formularza — element niosący informację: ≥ 3 : 1 (podloga-w-znaczniku.md) */
  --tafla-pole: rgba(235, 233, 242, .4);
  --pigulka-zazn: rgba(255, 255, 255, .07);  /* tło zaznaczonej pigułki wyboru */
  --tafla-pelna: rgba(14, 15, 32, .94);      /* pełne tło tafli — środek znaczników wyboru w konfiguratorze */
  --swiatlo-czerwien: rgba(184, 92, 104, .2);  /* światło znaku na kartach bez kadru */
  --swiatlo-fiolet: rgba(127, 104, 173, .16);
  /* składniki dla opraw spoza systemu tafli (rama bębna w glowna.css, znak.css, o-mnie.css,
     prelook) — liczone z tych samych świateł, więc przełączają się z trybem */
  --szklo-powierzchnia: linear-gradient(180deg, var(--szklo-lico), transparent 42%);
  --szklo-dno: radial-gradient(120% 60% at 50% 115%, var(--szklo-dno-swiatlo), transparent 62%);
  --szklo-warga: inset 0 1px 0 rgba(255, 255, 255, .3);
  --szklo-krawedz-gora: rgba(255, 255, 255, .2);
  --szklo-krawedz-dol: rgba(255, 255, 255, 0);
  --szklo-czerwien: rgba(184, 92, 104, .4);    /* rant od lewego skrzydła */
  --szklo-fiolet: rgba(127, 104, 173, .36);    /* rant od środka znaku */
  --szklo-tlo: rgba(16, 16, 34, .42);
  --szklo-linia: rgba(235, 233, 242, .12);
  --szklo-blysk: rgba(255, 255, 255, .3);

  /* rama — okno na inną stronę (kafle realizacji) */
  --rama-linia: rgba(235, 233, 242, .14);
  --rama-tlo: #0f1122;                       /* oprawa bębna: ton szkła ciemnego (+10–15%, 26.09) */
  --rama-promien: 16px;
}
@media (min-resolution: 2dppx) { :root { --szklo-rant: 1.25px; --szklo-rant-krycie: 1; } }

/* .menu-okrag i jego przyciski — okrągłe menu telefonu w szkle systemu (Jakub 01.10: było płaskie) */
.tafla, .pigulka, .przycisk--lekki, .przycisk--akcja {
  position: relative;
  isolation: isolate;
  background-color: var(--szklo-podklad);
  /* cztery cienie wewnętrzne i jeden ostry zewnętrzny. Opalizujący brzeg niesie bitmapa odbarwień
     (szklo.js — mocniej przy krawędzi) i rant ::after, nie cienie: każdy rozmyty cień to raster przy
     każdym przemalowaniu tafli, a duży cień zewnętrzny powiększał warstwę ×2 (tafla) i ×4 (pigułka) */
  --szklo-cienie:
    inset 0 1.5px 0 -.5px rgba(255, 255, 255, .34),                 /* warga: ostre światło pod górnym rantem */
    inset 0 9px 12px -11px var(--szklo-grubosc),                   /* światło pod górnym rantem */
    inset 0 -10px 16px -12px var(--szklo-dno-swiatlo),             /* światło zebrane w dnie */
    inset 0 0 12px -3px var(--szklo-fazka-swiatlo),                /* fazka: brzeg grubego szkła jaśniejszy */
    var(--szklo-cien);
  box-shadow: var(--szklo-cienie);
  transition: background-color .6s var(--e-lagodna), box-shadow .6s var(--e-lagodna),
    transform .45s var(--e-sprezyna), --szklo-rozjasn .4s var(--e-lagodna);
}
/* wnętrze: gwiezdna faktura, odbarwienia, połysk — ułożone według fazy elementu */
.tafla::before, .pigulka::before, .przycisk--lekki::before, .przycisk--akcja::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(var(--szklo-rozjasn), var(--szklo-rozjasn)),
    var(--szklo-strzalka, linear-gradient(transparent, transparent)),
    linear-gradient(112deg, transparent 38%, var(--szklo-pas) 50%, transparent 62%)
      calc(50% + 50% * sin(var(--faza))) 0 / 300% 100% no-repeat,
    var(--szklo-gwiazdy) calc(18px * cos(var(--faza))) calc(14px * sin(var(--faza))) / var(--szklo-gwiazdy-kafel) var(--szklo-gwiazdy-kafel),
    radial-gradient(55% 75% at calc(18% + 14% * cos(var(--faza))) calc(30% + 22% * sin(var(--faza))), var(--szklo-odb-fiolet), transparent 70%),
    radial-gradient(50% 70% at calc(82% - 12% * sin(var(--faza))) calc(72% + 20% * cos(var(--faza))), var(--szklo-odb-niebieski), transparent 70%),
    radial-gradient(40% 60% at calc(55% + 20% * sin(var(--faza) + 120deg)) calc(10% + 10% * cos(var(--faza))), var(--szklo-odb-bez), transparent 72%),
    radial-gradient(38% 55% at calc(8% + 6% * sin(var(--faza))) calc(88% - 10% * cos(var(--faza))), var(--szklo-odb-czerwien), transparent 72%),
    radial-gradient(64% 46% at 50% -6%, var(--szklo-odblask), transparent 72%),
    linear-gradient(180deg, var(--szklo-lico), transparent 42%),
    linear-gradient(var(--szklo-barwa), var(--szklo-barwa));
  pointer-events: none;
}
/* rant (--szklo-rant): światło z góry, opalizująca obwódka, połysk od znaku */
.tafla::after, .pigulka::after, .przycisk--lekki::after, .przycisk--akcja::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  padding: var(--szklo-rant);
  border-radius: inherit;
  opacity: var(--szklo-rant-krycie);
  background:
    radial-gradient(var(--polysk-r, 120px) circle at var(--lx, 24%) var(--ly, 0%), var(--szklo-polysk), transparent 66%),
    linear-gradient(180deg, var(--szklo-swiatlo), transparent 34%, transparent 70%, var(--szklo-swiatlo-dol)),
    conic-gradient(from var(--faza), var(--szklo-irys-bez), transparent 14%, var(--szklo-irys-fiolet) 27%, transparent 42%,
      var(--szklo-irys-niebieski) 56%, transparent 70%, var(--szklo-irys-roz) 84%, var(--szklo-irys-bez));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  transition: opacity .4s var(--e-lagodna);
}
/* RUCH TREŚCI (przewijanie.js: data-plyw, data-glebia) pisze `translate` co klatkę
   przewijania. Bez własnej warstwy przeglądarka malowała taflę od nowa w każdej klatce —
   ze szkłem: gradienty, faktura gwiazd (pomiar 28.09: tafla Tezy 154 malowania w 4 s,
   także przy wstrzymanej scenie; P11 „scena stoi": Cennik 33 kl/s przy 57 w hero).
   Własna warstwa = przesunięcie gotowego obrazu na karcie graficznej, bez malowania */
[data-plyw], [data-glebia] { will-change: translate; }
/* faza stoi: własna każdego elementu (--szklo-los — tafle nie wyglądają jednakowo);
   pod kursorem płynie (--faza-js, szklo.js). Bez animacji CSS — nic nie maluje się
   w spoczynku */
.tafla::before, .pigulka::before, .przycisk--lekki::before, .przycisk--akcja::before,
.tafla::after, .pigulka::after, .przycisk--lekki::after, .przycisk--akcja::after {
  --faza: var(--faza-js, calc(var(--szklo-los, 0) * 360deg));
}
/* najechanie (mysz) i naciśnięcie (palec): rozjaśnienie i uniesienie o 1,5 px */
@media (hover: hover) {
  :is(.tafla, .pigulka, .przycisk--lekki, .przycisk--akcja):hover {
    --szklo-rozjasn: var(--szklo-rozjasn-hover);
    transform: translateY(-1.5px);
  }
}
:is(.tafla, .pigulka, .przycisk--lekki, .przycisk--akcja):active { --szklo-rozjasn: var(--szklo-rozjasn-hover); }

/* poziomy szkła */
[data-szklo="pelne"] :is(.tafla, .pigulka, .przycisk--lekki, .przycisk--akcja) {
  -webkit-backdrop-filter: blur(var(--szklo-rozmycie)) saturate(var(--szklo-nasycenie)) brightness(var(--szklo-jasnosc));
  backdrop-filter: blur(var(--szklo-rozmycie)) saturate(var(--szklo-nasycenie)) brightness(var(--szklo-jasnosc));
}
/* tafla z tekstem: niebo × .83 — soczewka przygaszała pod tekstem ciemne niebo i gwiazdy (gamma);
   z odbarwieniami tafla ~25% jaśniejsza od dawnej — ton przyjęty przez Jakuba 01.10 (pomiar na /cennik) */
[data-szklo="pelne"] .tafla {
  -webkit-backdrop-filter: blur(var(--szklo-rozmycie)) saturate(var(--szklo-nasycenie)) brightness(calc(var(--szklo-jasnosc) * .83));
  backdrop-filter: blur(var(--szklo-rozmycie)) saturate(var(--szklo-nasycenie)) brightness(calc(var(--szklo-jasnosc) * .83));
}
[data-szklo="lekkie"] :is(.tafla, .pigulka, .przycisk--lekki, .przycisk--akcja) { background-color: var(--szklo-lekkie); }

/* tafla z tekstem: podkład gęstszy, wnętrze mleczniejsze, cichsze
   (wyglad.md: pod dłuższym tekstem spokojniej) */
.tafla {
  --szklo-podklad: var(--szklo-podklad-tekst);
  --szklo-rozmycie: 6px;
  --szklo-pas: rgba(255, 255, 255, .03);
  --szklo-odblask: rgba(255, 255, 255, .035);
  --szklo-gwiazdy-kafel: 460px;                  /* pod tekstem rzadziej */
  /* światła wnętrza jak dawniej — grubszy rant i podniesione niebo dają już +10–15% (pomiar 26.09) */
  --szklo-lico: rgba(255, 255, 255, .046);
  --szklo-fazka-swiatlo: rgba(255, 255, 255, .064);
  --szklo-grubosc: rgba(255, 255, 255, .09);
  max-width: var(--tafla-szer);
  padding: var(--tafla-wnetrze);
  border-radius: var(--tafla-promien);
  color: var(--tafla-tekst);
  --szklo-cien: 0 1px 2px rgba(2, 3, 10, .45);
}
[data-dotyk] .tafla { --szklo-rozmycie: 7px; }
/* adaptacja: znak przechodzi za taflą — podkład gęstnieje (szklo.js: .tafla--gesta) */
.tafla--gesta { --szklo-podklad: var(--szklo-podklad-gesty); }
.tafla .drugi { color: var(--tafla-tekst-2); }
.tafla a:not(.przycisk):not(.odnosnik-dalej) {
  color: var(--tafla-tekst);
  text-decoration: underline 1px var(--tafla-akcent);
  text-underline-offset: .28em;
}
.tafla .odnosnik-dalej { color: var(--tafla-tekst); }
.tafla .odnosnik-dalej .ikona { color: var(--tafla-akcent); }
.tafla .odnosnik-dalej > span { background-image: linear-gradient(var(--tafla-akcent), var(--tafla-akcent)); }
@media (hover: hover) {
  /* najechanie: światło krawędzi mocniej (do rozjaśnienia i uniesienia z bloku SZKŁO) */
  .tafla:hover { --szklo-swiatlo: rgba(255, 255, 255, .72); }
}

/* — przyciski ------------------------------------------------------------
   Jedna pełna akcja na ekran: CZERWONE SZKŁO (--akcja), porcelanowy tekst.
   Druga akcja: szkło bez zabarwienia albo odnośnik-duch. Ten sam wygląd na
   komputerze i telefonie — zabarwienie, rant i wnętrze są w CSS, nie w filtrze. */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--o-3);
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--z-pigulka);
  font-family: var(--kroj-tekst);
  font-weight: var(--w-mocny);
  font-size: var(--r-0-5);
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--e-sprezyna), background-color .4s ease, box-shadow .4s ease, color .3s ease,
    --szklo-rozjasn .4s var(--e-lagodna);
}
.przycisk:active { transform: scale(.97); }
.przycisk--akcja {
  /* czerwień logotypu jako barwa szkła: gęsta u dołu, jaśniejsza u góry (grubość),
     przez nią wciąż prześwituje niebo; odbarwienia wnętrza ciepłe */
  --szklo-podklad: rgba(204, 38, 74, .5);
  --szklo-barwa: rgba(255, 60, 96, .1);
  --szklo-jasnosc: .78;                        /* niebo za czerwienią przygaszone — kontrast tekstu */
  --szklo-nasycenie: 120%;
  --szklo-rozmycie: 3px;
  --szklo-odb-fiolet: rgba(150, 70, 255, .22);
  --szklo-odb-niebieski: rgba(120, 60, 220, .1);
  --szklo-odb-czerwien: rgba(255, 120, 140, .18);
  --szklo-odb-bez: rgba(255, 214, 196, .14);
  --szklo-lico: rgba(255, 214, 222, .26);
  --szklo-pas: rgba(255, 235, 238, .1);
  --szklo-odblask: rgba(255, 232, 238, .3);
  --szklo-swiatlo: rgba(255, 232, 238, .95);
  --szklo-swiatlo-dol: rgba(255, 160, 180, .35);
  --szklo-grubosc: rgba(255, 210, 220, .36);
  --szklo-fazka-swiatlo: rgba(255, 150, 175, .22);
  --szklo-dno-swiatlo: rgba(255, 96, 128, .45);
  --szklo-irys-bez: rgba(255, 222, 200, .5);
  --szklo-irys-fiolet: rgba(190, 120, 255, .45);
  --szklo-irys-niebieski: rgba(150, 150, 255, .25);
  --szklo-irys-roz: rgba(255, 140, 170, .45);
  --szklo-strzalka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.2 1.6 6.6 5 3.2 8.4' fill='none' stroke='%23ecebf3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    calc(100% - 20px + var(--strzalka)) 50% / 10px 10px no-repeat;
  padding-right: 42px;
  color: var(--tekst-akcji);
  text-shadow: 0 1px 2px rgba(60, 0, 18, .45);
  transition: transform .35s var(--e-sprezyna), background-color .4s ease, box-shadow .4s ease, --strzalka .35s var(--e-lagodna),
    --szklo-rozjasn .4s var(--e-lagodna);
}
.przycisk--akcja:hover { --szklo-podklad: rgba(220, 46, 84, .56); --szklo-swiatlo: rgba(255, 236, 240, 1); --strzalka: 3px; }
.przycisk--akcja:focus-visible { outline-color: var(--porcelana); }
[data-szklo="lekkie"] .przycisk--akcja { background-color: rgba(150, 36, 62, .96); }
/* SZKŁO W BARWACH — ta sama tafla / pigułka systemu, inne zabarwienie; jak „Wyceń stronę" barwią
   tylko podkład i zabarwienie całego elementu — faktura, odbarwienia, rant, światła zostają z systemu
   (wyglad.md: „element może mieć ogólne zabarwienie w jednej barwie"). Barwy przygaszone — paleta marki
   i jej sąsiedztwo (ochra, morski: słabo, żeby się nie wybijały — Jakub 30.09). Barwa:
   --sz-t: barwa szkła. Klasa obok .tafla / .pigulka.
   Pierwsze użycie: kafle kopuły /portfolio */
.szklo--czerwien { --sz-t: 190 44 78; }
.szklo--roz      { --sz-t: 170 78 128; }
.szklo--fiolet   { --sz-t: 112 76 200; }
.szklo--granat   { --sz-t: 34 40 104; }
.szklo--niebieski{ --sz-t: 52 84 196; }
.szklo--morski   { --sz-t: 40 112 124; --sz-a: .13; }
.szklo--ochra    { --sz-t: 146 112 48; --sz-a: .13; }
.szklo--bez      { --sz-t: 150 112 96; --sz-a: .14; }
.szklo--szary    { --sz-t: 142 146 168; --sz-a: .14; }
:is(.szklo--czerwien, .szklo--roz, .szklo--fiolet, .szklo--granat, .szklo--niebieski, .szklo--morski, .szklo--ochra, .szklo--bez, .szklo--szary) {
  --szklo-podklad: rgb(var(--sz-t) / var(--sz-a, .17));   /* przezroczyste — niebo prześwituje (Jakub 30.09); zabarwienie +40% (Jakub 05.10) */
  --szklo-barwa: rgb(var(--sz-t) / .09);
}
.przycisk--lekki { color: var(--tekst); }
.przycisk--lekki:hover { --szklo-swiatlo: rgba(255, 255, 255, .8); --szklo-podklad: rgba(40, 38, 70, .3); }
.przycisk--duzy { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.przycisk--akcja.przycisk--duzy { padding-right: 48px; }

/* ==========================================================================
   RAMA — kafel realizacji: okno na INNĄ stronę (wyglad.md: rama niesie znaczenie).
   Jedyny obrys w serwisie poza szkłem.
   ========================================================================== */
.rama {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rama-linia);
  border-radius: var(--rama-promien);
  background: var(--rama-tlo);
  color: var(--tekst);
}

/* ==========================================================================
   NAGŁÓWEK — sam logotyp z napisami (Jakub 25.09: bez pigułki i bez tekstu),
   menu w pigułkach lewitujących (od 960 px), pigułka profili (Instagram, LinkedIn). Po pierwszym
   przewinięciu logotyp płynnie maleje (html.przewiniete — menu.js).
   ========================================================================== */
.naglowek {
  position: fixed; z-index: 50;
  top: max(var(--o-3), env(safe-area-inset-top));
  left: var(--margines); right: var(--margines);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--o-3);
  pointer-events: none;                   /* klik przechodzi do sceny między elementami */
}
.naglowek > * { pointer-events: auto; }

.naglowek-logo {
  justify-self: start;
  display: block;
  height: var(--logo-wys);
  margin-left: -6px;                      /* optycznie: poświata farby ma własny margines */
  border-radius: var(--z-maly);
  transform-origin: 0 30%;
  transition: transform .7s var(--e-lagodna);
}
.naglowek-logo img { width: auto; height: 100%; }
html.przewiniete .naglowek-logo { transform: scale(var(--logo-po-przewinieciu)); }
/* treść wjeżdża pod nagłówek przez mgiełkę nocy — bez kreski (sekcje bez krawędzi) */
.naglowek::before {
  content: "";
  position: fixed; inset: 0 0 auto; z-index: -1;
  height: calc(var(--logo-wys) + 56px);
  background: linear-gradient(var(--noc) 0%, rgba(7, 9, 18, .74) 45%, transparent);
  opacity: 0;
  transition: opacity .5s var(--e-lagodna);
  pointer-events: none;
}
html.przewiniete .naglowek::before { opacity: 1; }
@media (max-width: 699px) {
  .naglowek-logo { transition: transform .45s var(--e-lagodna), opacity .45s var(--e-lagodna); }
  html.w-dol .naglowek-logo { transform: translateY(-130%); opacity: 0; }
}

.pigulka {
  display: flex; align-items: center;
  border-radius: var(--z-pigulka);
  --polysk-r: 90px;
}

.menu-pigulki { justify-self: center; padding: 4px; }
.menu-pigulki ul { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.menu-pigulki a {
  position: relative; z-index: 1;
  display: block;
  padding: 9px 16px;
  border-radius: var(--z-pigulka);
  color: var(--tekst-2);
  font-size: .875rem;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
.menu-pigulki a:hover, .menu-pigulki a[aria-current="page"] { color: var(--tekst); }
/* soczewka: kryształowa kropla jadąca pod kursorem — wraca na bieżącą pozycję.
   Szkło w szkle: jaśniejsze lico, rant z góry, światło zebrane w dnie */
.menu-soczewka {
  position: absolute; left: 0; top: 0; z-index: 0;
  height: 100%; width: 0;
  border-radius: var(--z-pigulka);
  background:
    radial-gradient(70% 90% at 50% 120%, var(--szklo-dno-swiatlo), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 4px 10px -6px rgba(2, 3, 10, .7);
  opacity: 0;
  transition: transform .5s var(--e-sprezyna), width .5s var(--e-sprezyna), opacity .25s ease;
  pointer-events: none;
}
.menu-soczewka.jest { opacity: 1; }

.naglowek-prawa { grid-column: 3; justify-self: end; display: flex; gap: var(--o-2); pointer-events: none; }
.naglowek-prawa > * { pointer-events: auto; }
.okragly-przycisk {
  width: 46px; height: 46px;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--tekst);
}
.okragly-przycisk .ikona { width: 19px; height: 19px; }
/* profile (Instagram, LinkedIn) — jedna pigułka w miejscu dawnego przełącznika trybu (Jakub 30.10):
   ta sama liczba warstw szkła w przewijaniu. Telefon: pod kołem okrągłego menu */
.naglowek-profile { gap: 2px; margin: 0; padding: 4px; list-style: none; }
.naglowek-profile a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--tekst-2);
  transition: color .25s ease;
}
.naglowek-profile a:hover, .naglowek-profile a:focus-visible { color: var(--tekst); }
.naglowek-profile .ikona { width: 19px; height: 19px; }

/* „?" podpowiedzi gestów — pigułka szkła jak menu; znak mono, szept. Gaśnie, gdy sekcja
   z podpowiedzią zjedzie z ekranu (menu.js, .poza) */
.znak-pomoc {
  font-family: var(--kroj-mono);
  font-size: var(--r-0);
  color: var(--tekst-2);
  transition: opacity .3s var(--e-lagodna), visibility 0s, color .25s ease;
}
.znak-pomoc:hover, .znak-pomoc[aria-expanded="true"] { color: var(--tekst); }
.znak-pomoc[hidden] { display: none; }
.znak-pomoc.poza { opacity: 0; visibility: hidden; transition: opacity .3s var(--e-lagodna), visibility 0s .3s; }

/* 960–1059 px ze „?" obok profili (/ i /o-mnie): pigułka menu zachodziła na profile albo stała
   1–3 px od nich — węższe pozycje tylko tu; reszta szerokości i podstrony bez „?" bez zmian */
@media (min-width: 960px) and (max-width: 1059.98px) {
  .naglowek:has(.znak-pomoc:not([hidden])) .menu-pigulki a { padding-inline: var(--o-2); }
}

.menu-otworz { display: none; }
@media (max-width: 959px) {
  .menu-pigulki, .naglowek-profile { display: none; }
  .menu-otworz { display: flex; }
  .okragly-przycisk { width: 44px; height: 44px; }
  /* telefon i tablet pionowo: menu, „?" pod przyciskiem menu */
  .naglowek-prawa { display: grid; }
  .menu-otworz { grid-area: 1 / 1; }
  .znak-pomoc { grid-area: 2 / 1; }
}

/* ==========================================================================
   OKRĄGŁE MENU — telefon (wyglad.md, 21st.dev — jeden do jednego).
   Geometria względem średnicy koła --d (420 px; na wąskim ekranie całość skaluje się razem):
   pozycja 80 px, promień 150 px, środek 48 px. Szkło płaskie — patrz „SZKŁO PŁASKIE" niżej.
   ========================================================================== */
.menu-okragle {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; align-content: center;
  margin: 0; padding: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  border: 0;
  background: transparent;
  color: var(--tekst);
}
.menu-okragle::backdrop { background: transparent; }
.menu-okragle:not([open]) { display: none; }
.menu-tlo {                                   /* czerń 80% — klik zamyka */
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .4s ease-in-out;
}
.menu-okrag {
  --d: min(420px, calc(100vw - 24px));        /* średnica koła — jednostka geometrii (zamiast cqw: bez kontenera zapytań) */
  position: relative;
  width: var(--d);
  aspect-ratio: 1;
  border-radius: 50%;                         /* szkło systemu (.pigulka), w wersji płaskiej — niżej */
  opacity: 0;
  transform: scale(0);
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
}
/* koło w szkle, ale tanie (Jakub 01.10 — S22: klatki spadały przy otwieraniu i zamykaniu): bez filtra tła
   (za kołem 80% czerni — rozmycie nic nie daje, a kosztuje w każdej klatce animacji); przyciski bez
   odbarwień i z krótkim zestawem cieni (warga, rant, fazka) — mniej do narysowania w pierwszej klatce;
   koło na własnej warstwie — skala i krycie bez przemalowań */
.menu-okrag, .menu-okrag a { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.menu-okrag { will-change: transform, opacity; }
[data-szklo] .menu-okrag a {              /* mocniej niż cienie poziomu „lekkie" — menu zawsze najtańsze */
  --szklo-cienie: inset 0 1.5px 0 -.5px rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 14px -3px var(--szklo-fazka-swiatlo);
}
/* SZKŁO PŁASKIE (Jakub 04.10: koło „okroić" — telefon). Koło i 6 przycisków to 7 elementów .pigulka, a każdy malował
   w pierwszej klatce otwarcia ::before (11 warstw: faktura gwiazd, cztery radialne z sin/cos, połysk) i ::after (obwódka
   z maską xor) — stąd ~0,1 s zacięcia. Zostaje podkład szkła systemu, warga światła, rant i jedna smuga światła od
   góry: ten sam język co kafle, ale bez pseudoelementów, bez zewnętrznych cieni i bez odbarwień. */
.menu-okrag::before, .menu-okrag::after, .menu-okrag a::before, .menu-okrag a::after { content: none; }
[data-szklo] .menu-okrag {
  --szklo-cienie: inset 0 1.5px 0 -.5px rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .07);
  background-image: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .07), transparent 70%);
}
.menu-okrag a { background-image: linear-gradient(180deg, rgba(255, 255, 255, .11), transparent 48%); }
.menu-okragle.otwarte .menu-tlo { opacity: 1; }
.menu-okragle.otwarte .menu-okrag { opacity: 1; transform: scale(1); }
.menu-okrag ul { margin: 0; padding: 0; list-style: none; }
.menu-okrag li {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--d) * .1905); height: calc(var(--d) * .1905);         /* 80 / 420 */
  margin: calc(var(--d) * -.09525) 0 0 calc(var(--d) * -.09525);
  /* obrót(kąt) → promień → obrót(−kąt): pozycja na obwodzie, sama prosta */
  transform: rotate(var(--kat)) translateY(calc(var(--d) * -.3571)) rotate(calc(-1 * var(--kat)));
}
.menu-okrag a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%;
  border-radius: 50%;                         /* szkło systemu (.pigulka) */
  color: var(--tekst);
  font-size: clamp(10px, calc(var(--d) * .027), 11.5px);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.menu-okrag a .ikona { width: calc(var(--d) * .0571); height: calc(var(--d) * .0571); max-width: 24px; max-height: 24px; }   /* 24 / 420 */
.menu-okrag a:hover, .menu-okrag a:focus-visible, .menu-okrag a[aria-current="page"] {
  background-color: #fff; background-image: none !important; color: #000;   /* najechanie odwraca na biel */
}
.menu-zamknij {
  position: absolute; left: 50%; top: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #fff; color: #000;
  cursor: pointer;
}
.menu-zamknij .ikona { width: 22px; height: 22px; }
/* profile pod kołem: bez szkła (za nimi 80% czerni), obrys i ikona — najechanie odwraca na biel jak przyciski koła */
.menu-profile {
  position: relative;
  display: flex; gap: var(--o-3);
  margin: var(--o-5) 0 0; padding: 0; list-style: none;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}
.menu-okragle.otwarte .menu-profile { opacity: 1; }
.menu-profile a {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--tekst);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: background-color .2s ease, color .2s ease;
}
.menu-profile a:hover, .menu-profile a:focus-visible { background-color: #fff; color: #000; }
.menu-profile .ikona { width: 22px; height: 22px; }

/* KANAŁY KONTAKTU — telefon, e-mail, profile: ikona w barwie akcentu i podpis (Jakub 30.10).
   Bez szkła pod ikoną — nic nie dochodzi do kosztu przewijania. Domknięcie głównej */
.kanaly { display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-5); margin: 0; padding: 0 var(--o-1); list-style: none; }
.kanaly a {
  display: inline-flex; align-items: center; gap: var(--o-2);
  padding-block: 2px; margin-block: -2px;   /* cel ≥ 24 px (było 21) bez zmiany układu */
  color: var(--tekst-2);
  font-size: var(--r-0);
  text-decoration: none;
  transition: color .25s ease;
}
.kanaly a:hover, .kanaly a:focus-visible { color: var(--tekst); }
.kanaly .ikona { flex: none; width: 18px; height: 18px; color: var(--akcent); }

/* ==========================================================================
   STOPKA — podpis autorski (reguła nienegocjowalna, system.md)
   ========================================================================== */
/* komputer i tablet: dwa piętra rozdzielone włoskową linią — góra: logotyp z krótką
   informacją po lewej, odnośniki do podstron po prawej; dół: kontakt, podpis i prawa
   po lewej, dokumenty po prawej. Wszystko do jednego lewego brzegu strony */
.stopka {
  position: relative; z-index: 1;
  padding: var(--o-7) var(--margines) max(var(--o-5), env(safe-area-inset-bottom));
  color: var(--tekst-2);
  font-size: var(--r-0);
  /* bez krawędzi sekcji — stopka wtapia się w noc (wyglad.md) */
  background: linear-gradient(to bottom, transparent, rgba(7, 9, 18, .85) 40%);
}
.stopka-gora {
  display: grid; grid-template-columns: auto minmax(0, 24rem) 1fr;
  align-items: center; gap: var(--o-5) var(--o-6);
  padding-bottom: var(--o-5);
  border-bottom: 1px solid var(--linia);
}
.stopka-logo { display: block; width: fit-content; padding: 0; }
.stopka-logo img { width: auto; height: 46px; }
.stopka-info { margin: 0; max-width: 24rem; line-height: 1.55; }
.stopka-mapa { justify-self: end; }
.stopka-dol {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--o-3) var(--o-6);
  padding-top: var(--o-5);
}
.stopka-lewa { display: grid; gap: var(--o-1); }
.stopka-podpis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-2) var(--o-4); margin: 0; }
.stopka-marka { display: inline-flex; align-items: center; gap: var(--o-2); color: var(--tekst); }
.stopka-marka .ikona { width: 20px; height: 20px; color: var(--akcent); }
.stopka ul { display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-5); margin: 0; padding: 0; list-style: none; }
.stopka a { display: inline-block; padding-block: 6px; color: var(--tekst-2); text-decoration: none; transition: color .2s ease; }
.stopka a:hover { color: var(--tekst); }
@media (max-width: 959px) {
  .stopka-gora { grid-template-columns: auto minmax(0, 1fr); }
  .stopka-mapa { grid-column: 1 / -1; justify-self: start; }
}
/* niskie okno komputera (np. 1830×725): domknięcie głównej + stopka mieszczą się
   w ekranie — stopka zwarta */
@media (min-width: 700px) and (max-height: 820px) {
  .stopka { padding-top: var(--o-5); }
  .stopka-gora { padding-bottom: var(--o-3); }
  .stopka-logo img { height: 36px; }
  .stopka-dol { padding-top: var(--o-3); }
  .stopka-lewa { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--o-6); }
}
@media (max-width: 699px) {
  /* telefon: zwarta (krytyka B: wysoka stopka wypychała klamrę domknięcia z ekranu) —
     mały znak bez napisów, pod nim podpis i prawa po lewej, dokumenty po prawej */
  .stopka { padding-top: var(--o-6); }
  .stopka-gora { display: block; padding-bottom: var(--o-3); border-bottom: 0; }
  .stopka-logo img { height: 30px; }
  .stopka-info, .stopka-mapa { display: none; }
  .stopka-dol { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--o-2) var(--o-4); padding-top: 0; }
  .stopka-podpis { flex-direction: column; align-items: flex-start; gap: 0; }
  .stopka-dokumenty { flex-direction: column; align-items: flex-end; gap: 0; }
  .stopka a { padding-block: 4px; }
}

/* — zgody na analitykę (assets/js/zgody.js) ------------------------------------
   Baner składa skrypt dopiero po załadowaniu i po animacji wejścia, więc nie bierze
   udziału w LCP. Dwa równorzędne przyciski (odmowa tak łatwa jak zgoda); przycisk
   w stopce otwiera go ponownie. */
.zgody {
  position: fixed; z-index: 80;
  left: var(--margines); bottom: max(var(--o-4), env(safe-area-inset-bottom));
  width: min(26rem, calc(100vw - 2 * var(--margines)));
  display: grid; gap: var(--o-3);
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s ease, transform .45s var(--e-lagodna);
}
.zgody--widoczne { opacity: 1; transform: none; }
.zgody-tytul { margin: 0; font-size: var(--r-1); font-weight: var(--w-mocny); line-height: 1.25; }
.zgody-opis { margin: 0; font-size: var(--r-0); line-height: 1.5; }
.zgody-akcje { display: flex; gap: var(--o-2); }
.zgody-akcje .przycisk { flex: 1 1 0; min-height: 44px; padding: 0 var(--o-3); }
.stopka button.stopka-zgody {
  display: inline-block; padding: 6px 0; border: 0; background: none;
  font: inherit; color: var(--tekst-2); cursor: pointer; transition: color .2s ease;
}
.stopka button.stopka-zgody:hover { color: var(--tekst); }
@media (max-width: 699px) {
  .stopka button.stopka-zgody { padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .menu-soczewka, .menu-tlo, .menu-okrag, .przycisk, .tafla, .naglowek-logo, .zgody { transition: none; }
}

.wizualnie-ukryte {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}