/* ============================================================================
   BelCanto — warstwa strony (kierunek D).
   Wyprowadzona wylacznie z rol `--color-*` z tokens/colors.css.
   Zadnej wartosci barwy nie ma w tym pliku — paleta zyje w jednym miejscu.
   ============================================================================ */

:root{
  --bc-tlo:var(--color-surface-tint);
  --bc-tlo-mgla:var(--color-surface-tint-strong);
  --bc-tlo-glebia:color-mix(in srgb, var(--color-surface-tint-strong) 55%, var(--color-surface-tint));
  --bc-karta:var(--color-surface-elevated);
  --bc-karta-brzeg:transparent;
  --bc-karta-cien:var(--sh-3);

  --bc-tekst:var(--color-text-body);
  --bc-tekst-mocny:var(--color-text-primary);
  --bc-tekst-cichy:var(--color-text-muted);
  --bc-tekst-szept:var(--color-text-faint);
  --bc-kreska:var(--color-border-subtle);

  --bc-morski:var(--color-accent);
  --bc-zloto:var(--color-accent-gold);
  --bc-pas:var(--color-surface-band);
  --bc-pas-tekst:var(--color-text-on-band);
  --bc-pas-tekst-cichy:var(--color-text-on-band-muted);
  --bc-pas-akcent:var(--color-accent-on-band);

  /* Aureola i slad lotu wokol ptaka. Krycie dobrane liczbowo, nie na oko:
     plama ma kontrast 1,35:1 wzgledem tla w kazdym motywie — tak samo ledwie
     widoczna wszedzie. Przerywanego sladu lotu nie ma: zobacz P-49. */
  --bc-aura:color-mix(in srgb, var(--color-decor) 89%, transparent);

  --bc-margines:clamp(20px,5vw,100px);
  --bc-sekcja:clamp(48px,7vw,92px);
  --bc-szerokosc:1240px;
}

/* ── rodziny motywow ────────────────────────────────────────────────────────
   Warstwa strony nie zna nazw motywow z osobna, tylko dwie RODZINY. Dzieki temu
   dolozenie piatego motywu to jedno slowo w jednym selektorze, a nie polowanie
   po pieciu regulach — na to wlasnie ostrzega P-14.
   Rzeczy zalezne od motywu sa zmiennymi: logo naglowka i filtr zdjec. */
:root,
:root[data-theme="light"],
:root[data-theme="paper"]{
  --bc-logo-naglowka:url("./assets/logo-420.webp");
  --bc-filtr-zdjec:none;
  --bc-filtr-mapy:none;
}

/* Karte unosi wariant 4 z P-37: jasny brzeg u gory, cien pod spodem,
   blekitna poswiata dookola. W nocnym poswiata jest slabsza i neutralna —
   barwy marki schodza tam na drugi plan (P-37). */
:root[data-theme="dark"],
:root[data-theme="night"]{
  --bc-logo-naglowka:url("./assets/logo-bialy-420.webp");
  --bc-filtr-zdjec:brightness(.86) saturate(.92);
  --bc-filtr-mapy:brightness(.78) contrast(1.04) saturate(.9);
  --bc-karta-brzeg:var(--color-border-accent);
  --bc-karta-cien:0 18px 34px rgba(0,0,0,.42),
                  0 0 30px color-mix(in srgb, var(--color-accent) 16%, transparent);
  --bc-aura:color-mix(in srgb, var(--color-decor) 19%, transparent);
}
:root[data-theme="night"]{
  --bc-karta-cien:0 18px 34px rgba(0,0,0,.5),
                  0 0 30px color-mix(in srgb, var(--color-decor) 34%, transparent);
}

/* ── wielkosc pisma ─────────────────────────────────────────────────────────
   Cala skala typograficzna to trzynascie zmiennych --fs-* w tokens/typography.css,
   wszystkie w pikselach. Mnozymy je przez JEDEN wspolczynnik zamiast dopisywac
   osobna regule przy kazdym napisie — inaczej powiekszylaby sie tylko ta czesc
   strony, ktora akurat pamietalem.
   Naglowki rosna wolniej: przy 128% hero mialoby 113 px i wychodzilo poza ekran,
   a to nie naglowki sa trudne do przeczytania.
   Pasek na gorze NIE rosnie (patrz `.menu a`, `.motyw`, `.gora-akcje .btn`) —
   dziewiec pozycji menu i tak ledwie sie miesci przy 1000 px. */
:root{ --bc-pismo:1; --bc-pismo-naglowki:1; }
:root[data-pismo="2"]{ --bc-pismo:1.14; --bc-pismo-naglowki:1.06; }
:root[data-pismo="3"]{ --bc-pismo:1.28; --bc-pismo-naglowki:1.12; }

:root{
  --fs-3xs:calc(11px * var(--bc-pismo));
  --fs-2xs:calc(12px * var(--bc-pismo));
  --fs-xs:calc(13px * var(--bc-pismo));
  --fs-sm:calc(14px * var(--bc-pismo));
  --fs-base:calc(16px * var(--bc-pismo));
  --fs-md:calc(18px * var(--bc-pismo));
  --fs-lg:calc(20px * var(--bc-pismo));
  --fs-xl:calc(24px * var(--bc-pismo));
  --fs-2xl:calc(30px * var(--bc-pismo-naglowki));
  --fs-3xl:calc(38px * var(--bc-pismo-naglowki));
  --fs-4xl:calc(48px * var(--bc-pismo-naglowki));
  --fs-5xl:calc(60px * var(--bc-pismo-naglowki));
  --fs-6xl:calc(76px * var(--bc-pismo-naglowki));
  --fs-hero:calc(clamp(44px,6.2vw,88px) * var(--bc-pismo-naglowki));
  --fs-section:calc(clamp(30px,3.4vw,46px) * var(--bc-pismo-naglowki));
}

/* ── podstawa ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* Odnosnik dla klawiatury: pierwszy Tab na stronie przeskakuje dziewiec pozycji
   menu i laduje od razu w tresci. Widoczny dopiero po zlapaniu ogniska — poza
   tym stoi nad krawedzia okna. `clip` zamiast `display:none`, bo element ukryty
   przez `display` nie da sie zlapac Tabem. */
.pomin{
  position:fixed; left:16px; top:-80px; z-index:100;
  padding:13px 20px; border-radius:var(--r-md);
  background:var(--color-accent); color:var(--color-text-on-accent);
  text-decoration:none; font:var(--type-ui); font-size:15px;
  box-shadow:var(--sh-3); transition:top .15s ease;
}
.pomin:focus{ top:12px; }
main:focus{ outline:none; }

/* Tekst wylacznie dla czytnika ekranu. Nie `display:none` ani `visibility` —
   te dwa usuwaja element takze z odczytu. */
.tylko-dla-czytnika{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bc-tlo); color:var(--bc-tekst);
  font:var(--type-body); font-size:calc(16px * var(--bc-pismo));
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{ max-width:100%; }
/* Bez tego `display` z wlasnej reguly (np. `.pole{display:flex}`) bije domyslne
   `[hidden]{display:none}` przegladarki i element ukryty z JS nadal widac. */
[hidden]{ display:none !important; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:var(--fw-regular); color:var(--bc-tekst-mocny); }
p{ margin:0; }
a{ color:var(--bc-morski); }

/* Pasek na gorze jest przyklejony i ma 85 px. Bez tego odnosnik „przewin do
   sekcji" zatrzymywalby strone tak, ze naglowek sekcji chowa sie pod paskiem. */
section[id], footer[id], .kalk-pasek[id]{ scroll-margin-top:100px; }

.wrap{ max-width:var(--bc-szerokosc); margin:0 auto; padding-inline:var(--bc-margines); }
.sekcja{ padding-block:var(--bc-sekcja); }
.disp{ font-family:var(--font-display); }

.nadtytul{
  display:block; font:var(--type-eyebrow); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--bc-morski);
}

/* ── przyciski ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  border-radius:var(--r-pill); font:var(--type-ui); font-size:calc(15px * var(--bc-pismo));
  padding:16px 30px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-glowny{ background:var(--color-accent); color:var(--color-text-on-accent); box-shadow:var(--sh-2); }
.btn-zloty{ background:var(--bc-zloto); color:var(--color-text-on-gold); }
.btn-cichy{ background:transparent; color:var(--bc-morski); padding-inline:8px; }
.btn-maly{ padding:11px 22px; font-size:calc(14px * var(--bc-pismo)); }

/* ── nawigacja ────────────────────────────────────────────────────────────── */
.gora{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bc-tlo) 80%, transparent);
  backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--color-border-subtle);
}
.gora-rzad{ display:flex; align-items:center; gap:24px; padding-block:14px; }
/* Logo wybiera arkusz, nie skrypt. Gdy cokolwiek zmieni `data-theme` — przycisk,
   ustawienie systemu, strona nadrzedna — obrazek idzie za motywem natychmiast.
   Przegladarka pobiera tylko ten plik, ktory jest w danej chwili uzyty. */
.gora-logo{
  display:block; flex:none; width:119px; height:56px;
  background:var(--bc-logo-naglowka) left center / contain no-repeat;
}

.menu{ display:flex; gap:26px; margin-left:auto; }
/* Stale 14 px, niezalezne od wybranej wielkosci pisma — patrz komentarz przy
   `--bc-pismo`. Dziewiec pozycji rosnacych o 28% nie zmiescilo by sie w pasku. */
.menu a{
  font:var(--type-ui); font-size:14px; color:var(--bc-tekst-cichy); text-decoration:none;
  padding-block:6px; border-bottom:2px solid transparent;
}
.menu a:hover,.menu a[aria-current="page"]{ color:var(--bc-tekst-mocny); border-bottom-color:var(--bc-zloto); }
.gora-akcje{ display:flex; align-items:center; gap:14px; }
.gora-akcje .btn{ font-size:14px; }   /* pasek nie rosnie razem z pismem */

/* Przelacznik motywu musi WYGLADAC na przycisk. Szary okrag z blada ikona obok
   duzego zlotego przycisku czyta sie jak ozdoba — osoba techniczna go zobaczyla
   i nie rozpoznala. Stad slowo obok ikony, ramka i ikona w kolorze akcentu. */
.motyw{
  height:40px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:0 14px; border:1px solid var(--bc-morski); border-radius:var(--r-pill);
  background:transparent; color:var(--bc-morski);
  font:var(--type-ui); font-size:14px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.motyw:hover{ background:var(--bc-morski); color:var(--color-text-on-accent); }
.motyw:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
/* Ponizej 1100 px w pasku nie ma miejsca na slowo — zostaje sama ikona z dymkiem. */
@media (max-width:1100px){
  .motyw{ width:40px; padding:0; justify-content:center; }
  .motyw-slowo{ display:none; }
}

/* Panel wygladu: motyw i wielkosc pisma. JEDEN zestaw regul dla obu miejsc,
   w pasku i w menu telefonu — drugi zestaw rozjechalby sie przy pierwszej
   zmianie stylu. W menu panel przestaje byc dymkiem (`.wyglad-panel-w-menu`).
   Panel ma stale rozmiary pisma: gdyby rosl razem z wybrana wielkoscia, skakalby
   pod kursorem w trakcie wybierania.
   Probka kazdego motywu ma na sobie `data-theme` tego motywu, wiec `var(--color-*)`
   w srodku rozwiazuje sie do JEGO wartosci. Zaden kod koloru nie jest tu
   powtorzony — przy zmianie palety probki ida za nia same. */
.motywy{ position:relative; }
.wyglad-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  display:flex; flex-direction:column; gap:10px; min-width:220px; padding:8px;
  background:var(--color-surface-floating); border:1px solid var(--bc-kreska);
  border-radius:var(--r-lg); box-shadow:var(--sh-4);
}
.panel-grupa{ display:flex; flex-direction:column; }
.panel-grupa + .panel-grupa{ padding-top:10px; border-top:1px solid var(--bc-kreska); }
.panel-tytul{
  font:var(--type-eyebrow); font-size:11px; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--bc-morski); padding:2px 10px 7px;
}
.motyw-opcja{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:var(--r-md); background:transparent;
  cursor:pointer; text-align:left; font:var(--type-ui); font-size:14px;
  color:var(--bc-tekst); white-space:nowrap;
}
.motyw-opcja:hover{ background:var(--color-accent-quiet); }
.motyw-opcja[aria-checked="true"]{ color:var(--bc-tekst-mocny); font-weight:var(--fw-medium); }
.motyw-opcja[aria-checked="true"]::after{ content:"✓"; margin-left:auto; color:var(--bc-morski); }
.motyw-opcja:focus-visible,.pismo-opcja:focus-visible{ outline:none; box-shadow:var(--sh-focus); }

.probka{
  flex:none; width:20px; height:20px; border-radius:var(--r-pill);
  border:1px solid var(--color-border-strong);
  background:var(--color-surface-tint); position:relative; overflow:hidden;
}
.probka::after{
  content:""; position:absolute; inset:0; left:50%;
  background:var(--color-surface-elevated);
}
/* Probka trybu automatycznego to dwie polowki, kazda z wlasnym `data-theme` —
   dalej zero powtorzonych kodow koloru. */
.probka-auto{ display:flex; background:none; }
.probka-auto::after{ display:none; }
.probka-auto i{ display:block; width:50%; height:100%; background:var(--color-surface-tint); }

/* Trzy litery A rosnace tak, jak rosnie strona po ich wybraniu. */
.pismo-rzad{ display:flex; gap:6px; padding:0 4px; }
.pismo-opcja{
  flex:1 1 0; display:grid; place-items:center; min-height:42px;
  border:1px solid var(--bc-kreska); border-radius:var(--r-md);
  background:transparent; color:var(--bc-tekst); cursor:pointer;
  font-family:var(--font-text); font-weight:var(--fw-medium); line-height:1;
}
.pismo-opcja[data-pismo-opcja="1"]{ font-size:14px; }
.pismo-opcja[data-pismo-opcja="2"]{ font-size:17px; }
.pismo-opcja[data-pismo-opcja="3"]{ font-size:21px; }
.pismo-opcja:hover{ background:var(--color-accent-quiet); }
.pismo-opcja[aria-checked="true"]{
  background:var(--color-accent); color:var(--color-text-on-accent);
  border-color:var(--color-accent);
}
.panel-stopka{
  padding:0 10px 4px; font:var(--type-body-sm); font-size:12px;
  line-height:1.45; color:var(--bc-tekst-cichy); max-width:220px;
}

/* Na telefonie ten sam panel, ale rozlozony w menu — bez chowania w dymku. */
.menu-wyglad{ display:none; }
.js .menu .menu-wyglad{
  display:none; padding-top:12px; margin-top:6px; border-top:1px solid var(--bc-kreska);
}
.wyglad-panel-w-menu{
  position:static; min-width:0; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none;
}
.wyglad-panel-w-menu .motyw-opcja{ padding:11px 0; font-size:15px; }
.wyglad-panel-w-menu .motyw-opcja:hover{ background:transparent; }
.wyglad-panel-w-menu .panel-tytul{ padding-inline:0; }
.wyglad-panel-w-menu .pismo-rzad{ padding:0; }

.burger{ display:none; }
.burger .krzyzyk{ display:none; }
.burger[aria-expanded="true"] .kreski{ display:none; }
.burger[aria-expanded="true"] .krzyzyk{ display:block; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:60px; align-items:center; }
.hero-tresc{ display:flex; flex-direction:column; gap:24px; }
.hero h1{
  font-size:var(--fs-hero); font-weight:var(--fw-light);
  line-height:var(--lh-tight); letter-spacing:var(--ls-display);
}
.hero-lead{ max-width:44ch; font:var(--type-body); color:var(--bc-tekst-cichy); }
.hero-akcje{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:4px; }

.ptak{ position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; }
.ptak-tlo{ position:absolute; inset:0; width:100%; height:100%; }
.ptak img{
  position:relative; width:min(340px,88%); height:auto;
  filter:drop-shadow(0 22px 34px rgba(13,70,101,.26));
}

/* ── telefon ──────────────────────────────────────────────────────────────── */
/* Nawigacja zwija sie WCZESNIEJ niz reszta ukladu. Dziewiec pozycji menu plus
   logo, przelacznik i przycisk przestaja sie miescic juz kolo 950 px — pasek
   rozjezdzal sie w bok, zanim hamburger zdazyl sie pojawic przy 860 px.
   Uklad tresci nadal lamie sie przy 860; sam pasek robi to przy 1000. */
@media (max-width:1000px){
  /* Menu chowamy za hamburgerem TYLKO wtedy, gdy dziala JavaScript (klasa `js`
     nadawana przed pierwszym malowaniem). Inaczej hamburger byloby martwym
     przyciskiem, a nawigacja zniknelaby bez zadnego zastepstwa. */
  .js .menu{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0; padding:8px var(--bc-margines) 18px;
    background:var(--bc-tlo); border-bottom:1px solid var(--color-border-subtle);
    box-shadow:var(--sh-2);
  }
  .js .menu.otwarte{ display:flex; }
  .js .menu a{ padding-block:13px; border-bottom:1px solid var(--bc-kreska); }
  .js .menu a:last-child{ border-bottom:0; }
  .js .menu .menu-wyglad{ display:block; }
  .js .menu a:hover,.js .menu a[aria-current="page"]{ border-bottom-color:var(--bc-kreska); color:var(--bc-tekst-mocny); }
  .menu{ flex-wrap:wrap; gap:14px; margin-left:0; width:100%; order:3; }
  .js .burger{
    display:inline-grid; place-items:center; width:40px; height:40px; margin-left:auto;
    background:transparent; border:0; cursor:pointer; color:var(--bc-tekst-mocny);
  }
  .gora-logo{ width:85px; height:40px; }
  .gora-akcje .btn{ padding:10px 16px; font-size:13px; white-space:nowrap; }
  .gora-rzad{ gap:10px; }
}

@media (max-width:860px){
  .hero{ grid-template-columns:1fr; gap:26px; }
  .ptak{ min-height:240px; order:-1; }
  .hero-akcje{ flex-direction:column; align-items:stretch; }
  .hero-akcje .btn{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================================
   SEKCJE STRONY
   ============================================================================ */

:root{
  --bc-ikona:var(--color-accent);
  --bc-ikona-akcent:var(--color-accent-gold);
  --bc-pioro:color-mix(in srgb, var(--color-accent) 11%, transparent);
  --bc-pioro-zylka:var(--color-surface-elevated);
}

.pas-mgla{ background:var(--bc-tlo-mgla); }
.pas-glebia{ background:var(--bc-tlo-glebia); }
.szept{ color:var(--bc-tekst-szept); font-size:var(--fs-xs); }

.naglowek{ max-width:56ch; }
.naglowek h2{ font-size:var(--fs-section); line-height:var(--lh-display); margin:14px 0 0; }
.naglowek .lead{ margin-top:14px; font:var(--type-body); color:var(--bc-tekst-cichy); }
.naglowek.na-pasie h2{ color:var(--bc-pas-tekst); font-weight:var(--fw-light); }
.naglowek.na-pasie .lead{ color:var(--bc-pas-tekst-cichy); }
.naglowek.na-pasie .nadtytul{ color:var(--bc-pas-akcent); }

/* ── karta ────────────────────────────────────────────────────────────────── */
.karta{
  background:var(--bc-karta); border-radius:var(--r-xl);
  border-top:1px solid var(--bc-karta-brzeg);
  box-shadow:var(--bc-karta-cien); position:relative; overflow:hidden;
}
.karta-tresc{ position:relative; display:flex; flex-direction:column; gap:12px; height:100%; }
.karta h3{ font-size:var(--fs-xl); font-weight:var(--fw-medium); line-height:var(--lh-snug); }
.karta p{ font:var(--type-body-sm); font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); color:var(--bc-tekst-cichy); }
.meta{
  font:var(--type-eyebrow); font-size:var(--fs-3xs);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--bc-morski);
}

/* ── oferta ───────────────────────────────────────────────────────────────── */
.siatka-oferta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin-top:40px;
}
.karta-oferta .meta{ margin-top:auto; padding-top:12px; }
.karta-poziom .meta{ margin-top:-4px; }
.karta-oferta{
  padding:44px 28px 30px 36px; min-height:240px;
  /* zamach tylko w lewym gornym narozniku (P-40) — zawsze osobnymi wlasciwosciami */
  border-top-left-radius:104px;
  border-top-right-radius:var(--r-xl);
  border-bottom-right-radius:var(--r-xl);
  border-bottom-left-radius:var(--r-xl);
}
.pioro{ position:absolute; right:-26px; bottom:-24px; width:150px; height:150px; }
.ikona{ position:relative; display:block; }
/* Pieciu z jedenastu kart nie widac na wejsciu — sciana kafelkow byla pierwsza
   rzecza pod naglowkiem. Chowamy je TYLKO przy dzialajacym JavaScripcie, bo bez
   niego przycisk niczego by nie rozwinal, a piec pozycji oferty by zniknelo. */
.js .ukryta-oferta{ display:none; }
.js .siatka-oferta.rozwinieta .ukryta-oferta{ display:flex; }
.oferta-wiecej{ display:none; margin-top:26px; text-align:center; }
.js .oferta-wiecej{ display:block; }
.ile-wiecej{ color:var(--bc-tekst-szept); }
#wiecej-oferty[aria-expanded="true"] .ile-wiecej{ display:none; }

.cennik{ margin-top:34px; max-width:78ch; font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); color:var(--bc-tekst-cichy); }

/* ── nagrania ─────────────────────────────────────────────────────────────── */
/* Odnosniki, nie osadzone odtwarzacze. Osadzony YouTube wysyla adres IP kazdego
   odwiedzajacego do Google i stawia ciasteczka przy samym wejsciu na strone,
   zanim ktokolwiek kliknie „graj" — to samo zastrzezenie co przy mapie, BLK-01. */
/* Piec kart to liczba pierwsza — siatka o stalej liczbie kolumn zawsze zostawia
   w ostatnim rzedzie sierote dosunieta do lewej. Zawijanie z wysrodkowaniem
   ustawia reszte posrodku i wyglada na zamierzone. */
/* Zdjecie ze starej strony. Jego jezyk wizualny — fotografia z rysowanymi nutami —
   rozni sie od reszty, ale akurat tu pasuje: nagrania sa w wiekszosci dzieciece.
   Dol wycieniowany maska, zeby zielen nie ucinala sie ostro nad kartami. */
.nagrania-foto{
  margin-top:34px; border-radius:var(--r-2xl); overflow:hidden; line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
}
.nagrania-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Zdjecie stokowe tuz pod naglowkiem „Posluchaj naszych uczniow" bez tej noty
   sugerowaloby, ze to jedna z uczennic, ktorych nagrania sa nizej. */
.nota-nagrania{ margin-top:10px; }
.nagrania-foto img{ filter:var(--bc-filtr-zdjec); }

.siatka-nagrania{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:26px; }
.nagranie{ flex:1 1 190px; max-width:264px; }
.nagranie{
  display:flex; flex-direction:column; gap:7px; padding:24px 24px 22px;
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.nagranie-ikona{ margin-bottom:4px; }
.nagranie-tytul{ font-family:var(--font-display); font-size:var(--fs-lg); line-height:var(--lh-snug); color:var(--bc-tekst-mocny); }
@media (hover:hover) and (pointer:fine){
  .nagranie:hover{ transform:translateY(-4px); box-shadow:var(--sh-4); }
}

/* ── jak zaczac ───────────────────────────────────────────────────────────── */
.kroki-sekcja{ padding-block:clamp(34px,4.5vw,56px); }
/* Naglowek celowo mniejszy niz w pozostalych sekcjach — to pas orientacyjny,
   a nie rozdzial. Ma nazwac te trzy kroki, nie konkurowac z nimi o uwage. */
.kroki-tytul{ font-size:var(--fs-xl); line-height:var(--lh-snug); margin-bottom:22px; }
.kroki{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
}
.kroki li{ display:flex; gap:16px; align-items:flex-start; min-width:0; }
.krok-nr{
  flex:none; width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--r-pill); border:1px solid var(--bc-morski);
  font:var(--type-ui); font-size:calc(15px * var(--bc-pismo)); color:var(--bc-morski);
}
.krok-tresc{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.krok-tresc strong{ font-weight:var(--fw-medium); color:var(--bc-tekst-mocny); }
/* Kazdy krok prowadzi do sekcji, ktora go dotyczy. Kreska pod tekstem zamiast
   koloru odnosnika — naglowek kroku ma dalej czytac sie jak naglowek. */
.krok-tresc a{
  color:var(--bc-tekst-mocny); text-decoration:none;
  border-bottom:1.5px solid var(--bc-morski); padding-bottom:1px;
  transition:border-color .15s ease, color .15s ease;
}
.krok-tresc a:hover{ color:var(--bc-morski); border-bottom-color:var(--bc-zloto); }
.krok-tresc a:focus-visible{ outline:none; box-shadow:var(--sh-focus); border-radius:2px; }
.krok-tresc p{ font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); color:var(--bc-tekst-cichy); }

/* ── kalkulator ───────────────────────────────────────────────────────────── */
.kalk-karta{ padding:36px 38px; display:flex; flex-direction:column; gap:28px; }
.kalk-pola{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; }
.pole{ display:flex; flex-direction:column; gap:8px; }
.pole label{ font:var(--type-ui); font-size:var(--fs-xs); color:var(--bc-tekst-mocny); }
.pole select{
  appearance:none; width:100%; cursor:pointer;
  padding:13px 40px 13px 16px; font:var(--type-body); font-size:calc(15px * var(--bc-pismo));
  color:var(--bc-tekst); background:var(--color-field); border:1px solid var(--color-border);
  border-radius:var(--r-md);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.pole select:focus-visible{ outline:none; box-shadow:var(--sh-focus); }
.kalk-wynik{ display:flex; flex-direction:column; gap:7px; padding-top:26px; border-top:1px solid var(--bc-kreska); }
.kalk-wynik strong{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:var(--fw-medium); line-height:1; color:var(--bc-tekst-mocny); }
.kalk-wynik span{ font-size:var(--fs-sm); color:var(--bc-tekst-cichy); }

/* ── pelny cennik ─────────────────────────────────────────────────────────────
   Kalkulator odpowiada na "ile zaplace za swoj pakiet". Ta siatka odpowiada
   na "co jeszcze mozna kupic" — jedno miejsce na stronie z kompletem cen.
   Tabela pakietow jest generowana z tej samej formuly co kalkulator, wiec
   nie da sie jej rozjechac z wynikiem powyzej.
   ─────────────────────────────────────────────────────────────────────────── */
/* Cztery karty ustawiamy jawnie: 4 w rzedzie, potem 2x2, potem jedna pod druga.
   `auto-fit` zostawialby przy srednich szerokosciach 3 + 1, czyli osierocona
   karte obok pustego miejsca. */
.cennik-pelny{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:24px; align-items:start; }
.cennik-karta{ padding:30px 32px; display:flex; flex-direction:column; gap:6px; }
.cennik-pod{ margin-bottom:14px; }
.tabela{ width:100%; border-collapse:collapse; font-size:calc(15px * var(--bc-pismo)); }
.tabela th,.tabela td{ padding:11px 0; text-align:left; border-bottom:1px solid var(--bc-kreska); }
.tabela tr:last-child th,.tabela tr:last-child td{ border-bottom:0; padding-bottom:0; }
.tabela th{ font:var(--type-body-sm); font-size:calc(15px * var(--bc-pismo)); font-weight:var(--fw-regular); color:var(--bc-tekst-cichy); }
.tabela td{ text-align:right; white-space:nowrap; font-weight:var(--fw-medium); color:var(--bc-tekst-mocny); }
.cennik-nota{ margin-top:20px; padding-top:18px; border-top:1px solid var(--bc-kreska); font-size:calc(14px * var(--bc-pismo)) !important; }
/* Kolejne noty w tej samej karcie bez wlasnej kreski — trzy kreski pod rzad
   czytaja sie jak trzy osobne sekcje, a to jeden blok uwag do jednego produktu. */
.cennik-nota + .cennik-nota{ margin-top:12px; padding-top:0; border-top:0; }
/* Kalkulator stoi POD tabelami i jest wezszy — tabele odpowiadaja na pytanie
   „ile to kosztuje", kalkulator jest narzedziem dla niezdecydowanych. Hierarchia
   ma to mowic bez slow. */
.kalk-pasek{ max-width:760px; margin:56px auto 0; }
.naglowek-maly{ text-align:center; margin-bottom:22px; }
.naglowek-maly h3{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-regular); line-height:var(--lh-snug); }
.naglowek-maly .lead{ margin-top:6px; }
/* Luka miedzy „ile to kosztuje" a „policz moj wariant": tabele podaja ceny,
   kalkulator liczy, ale ani jedno, ani drugie nie mowi, CO wybrac. Te trzy
   zdania stoja dokladnie w miejscu, w ktorym czytajacy zaczyna wybierac. */
.wskazowki{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.wskazowki p{ font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); color:var(--bc-tekst-cichy); }
.wskazowki strong{ color:var(--bc-tekst-mocny); font-weight:var(--fw-medium); }
.wskazowki-lead{ margin-bottom:22px; text-align:center; }

.kalk-tryb{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.kalk-tryb legend{ padding:0; margin-bottom:12px; font:var(--type-ui); font-size:var(--fs-xs); color:var(--bc-tekst-mocny); }
.kalk-tryb label{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:13px 16px; border:1px solid var(--color-border); border-radius:var(--r-md);
  background:var(--color-field); font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-snug);
  transition:border-color .18s ease, background .18s ease;
}
.kalk-tryb input{ accent-color:var(--bc-morski); width:17px; height:17px; margin:0; flex:none; }
/* Druga linia nazywa produkt, bo „nieregularnie" nie mowi, ze chodzi o karnet
   albo voucher. Wybor ma byc zrozumialy bez czytania tabel wyzej. */
.tryb-tresc{ display:flex; flex-direction:column; gap:2px; }
.tryb-tresc strong{ font-weight:var(--fw-regular); color:var(--bc-tekst-mocny); }
.tryb-tresc span{ font-size:var(--fs-xs); color:var(--bc-tekst-szept); }
.kalk-tryb label:has(input:checked){ border-color:var(--bc-morski); background:var(--color-surface-tint); }
.kalk-tryb label:has(input:focus-visible){ box-shadow:var(--sh-focus); }
.kalk-stopka{ margin-top:18px; text-align:center; max-width:60ch; margin-inline:auto; }
.wizualnie-ukryte{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── poziomy ──────────────────────────────────────────────────────────────── */
.siatka-poziomy{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; margin-top:40px; }
.karta-poziom{ display:flex; flex-direction:column; }
.karta-poziom .karta-tresc{ padding:0 30px 32px; margin-top:-34px; gap:11px; }
/* Zdjecie znika w kolor karty maska, a nie wypalona biela (P-46). */
.foto{
  aspect-ratio:16/10; overflow:hidden; line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.42) 72%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 42%,rgba(0,0,0,.42) 72%,transparent 92%);
}
.foto img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.nota-foto{ margin-top:24px; font-style:italic; }

/* ── pas „dlaczego my" ────────────────────────────────────────────────────── */
.pas{ background:var(--bc-pas); padding-block:var(--bc-sekcja); }
.pas-siatka{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px; align-items:center; }
.powody{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.powody li{ display:flex; gap:13px; align-items:flex-start; color:var(--bc-pas-tekst-cichy); font-size:calc(16px * var(--bc-pismo)); line-height:var(--lh-relaxed); }
.powody svg{ width:20px; height:20px; flex:none; margin-top:4px; }
.pas-foto{ border-radius:var(--r-2xl); overflow:hidden; line-height:0; box-shadow:var(--sh-4); }
/* Nota na ciemnym pasie bierze kolor z rol pasa, nie z rol strony — inaczej
   szary tekst na granacie schodzi ponizej czytelnosci. */
.nota-na-pasie{ margin-top:14px; color:var(--bc-pas-tekst-cichy); }
.pas-foto img{ width:100%; height:auto; display:block; }

/* ── opinie ───────────────────────────────────────────────────────────────── */
.opinie-gora{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.gwiazdki{ display:flex; gap:3px; }
.gwiazdki svg{ width:15px; height:15px; }
.ocena{
  display:grid; grid-template-columns:auto auto; gap:4px 12px; align-items:center;
  padding:20px 26px; text-decoration:none; flex:none;
}
.ocena-liczba{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-medium); line-height:1; color:var(--bc-tekst-mocny); }
.ocena-podpis{ grid-column:1/-1; font-size:var(--fs-xs); color:var(--bc-tekst-szept); }
.ocena-link{ grid-column:1/-1; margin-top:6px; font:var(--type-ui); color:var(--bc-morski); }
.siatka-opinie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:40px; }
.siatka-opinie-dlugie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:24px; margin-top:24px; }
.opinia{ margin:0; padding:32px 30px; display:flex; flex-direction:column; gap:16px; }
.opinia blockquote{ margin:0; display:flex; flex-direction:column; gap:13px; }
.opinia blockquote,.opinia blockquote p{ font-size:calc(15px * var(--bc-pismo)); line-height:1.72; color:var(--bc-tekst); }
.opinia figcaption{ margin-top:auto; padding-top:20px; border-top:1px solid var(--bc-kreska); display:flex; flex-direction:column; gap:3px; }
.opinia figcaption strong{ font:var(--type-ui); font-size:var(--fs-sm); color:var(--bc-tekst-mocny); }
.opinia figcaption span{ font-size:var(--fs-2xs); color:var(--bc-tekst-szept); }

/* ── o mnie ───────────────────────────────────────────────────────────────── */
.o-mnie{ position:relative; overflow:hidden; }
.o-mnie .wrap{ position:relative; max-width:1000px; margin-inline:auto; }
.o-mnie-imie{ margin:14px 0 18px; font-size:calc(clamp(34px,4.4vw,56px) * var(--bc-pismo-naglowki)); line-height:var(--lh-display); }
.cytat{
  margin:0 0 34px; max-width:26ch; padding-left:22px; border-left:3px solid var(--bc-zloto);
  font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.4; color:var(--bc-morski);
}
.biogram{ columns:2; column-gap:56px; }
.biogram p{ margin:0 0 18px; font-size:calc(15.5px * var(--bc-pismo)); line-height:1.78; color:var(--bc-tekst-cichy); break-inside:avoid; }
.dopisek{ margin-top:30px; padding-top:22px; border-top:1px solid var(--bc-kreska); max-width:62ch; font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); color:var(--bc-tekst-cichy); }

/* ── pytania ──────────────────────────────────────────────────────────────── */
.faq-siatka{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.faq{ display:flex; flex-direction:column; gap:12px; }
.faq details{ padding:0; }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
  padding:22px 26px; font:var(--type-ui); font-size:calc(16px * var(--bc-pismo)); color:var(--bc-tekst-mocny); list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:18px; height:18px; flex:none; color:var(--bc-morski); transition:transform .2s ease; }
.faq details[open] summary svg{ transform:rotate(180deg); }
.faq details p{ margin:0; padding:0 26px 24px; }

/* ── dojazd ───────────────────────────────────────────────────────────────── */
.dojazd{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; margin-top:40px; align-items:stretch; }
/* Zrzut prawdziwej mapy zamiast rysunku. Lezy na naszym serwerze, wiec strona
   nadal nie odpytuje nikogo z zewnatrz — inaczej niz osadzona mapa. */
.mapa{ line-height:0; margin:0; position:relative; }
.mapa img{ width:100%; height:100%; object-fit:cover; display:block; }
.mapa-podpis{
  position:absolute; right:10px; bottom:8px; line-height:1.3;
  padding:3px 8px; border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bc-karta) 82%, transparent);
}
/* W ciemnym motywie jasna mapa swieci jak latarka — przygaszamy ja tyle,
   zeby usiadla obok ciemnych kart, ale zostala czytelna. */
.mapa img{ filter:var(--bc-filtr-mapy); }
.dojazd-obok{ display:flex; flex-direction:column; gap:16px; }
.dojazd-obok .karta{ padding:26px 28px; display:flex; flex-direction:column; gap:10px; }
/* Odnosniki, nie osadzona mapa: strona nie wysyla adresu IP odwiedzajacego do
   nikogo, dopoki sam nie kliknie. Osadzona mapa robilaby to przy kazdym wejsciu,
   zanim ktokolwiek na cokolwiek sie zgodzil — patrz BLK-01. */
.mapa-akcje{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.adres{ font-size:calc(16px * var(--bc-pismo)) !important; color:var(--bc-tekst) !important; }

/* ── stopka ───────────────────────────────────────────────────────────────── */
.stopka{ background:var(--bc-pas); color:var(--bc-pas-tekst-cichy); padding-block:var(--bc-sekcja) 28px; }
.stopka-siatka{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px; align-items:start; }
.stopka h2{ font-size:calc(clamp(30px,3.2vw,44px) * var(--bc-pismo-naglowki)); font-weight:var(--fw-light); line-height:var(--lh-display); color:var(--bc-pas-tekst); }
.stopka p{ margin:14px 0 22px; max-width:38ch; color:var(--bc-pas-tekst-cichy); }
.stopka-kontakt{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; font-size:calc(15px * var(--bc-pismo)); line-height:var(--lh-relaxed); }
.stopka-kontakt a{ color:var(--bc-pas-tekst); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
/* `.szept` to kolor dla JASNEGO tla. W stopce, ktora jest ciemnym pasem, dawal
   kontrast 2,0:1 — szary na granacie. Ten sam napis, inna rola koloru. */
.stopka .szept{ color:var(--bc-pas-tekst-cichy); }
.stopka-logo{ width:200px; height:auto; margin-top:22px; opacity:.92; }
.stopka-stopka{ margin-top:44px; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--bc-pas-tekst) 16%,transparent); font-size:var(--fs-2xs); color:var(--bc-pas-tekst-cichy); }

/* ── telefon ──────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .pas-siatka,.faq-siatka,.stopka-siatka,.dojazd{ grid-template-columns:1fr; gap:26px; }
  .biogram{ columns:1; }
  .karta-oferta{ padding:34px 22px 26px 26px; border-top-left-radius:76px; }
  .pioro{ width:104px; height:104px; right:-18px; bottom:-16px; }
  .opinie-gora{ flex-direction:column; align-items:stretch; gap:20px; }
  .ocena{ width:100%; }
  .siatka-opinie-dlugie{ grid-template-columns:1fr; }
  .kalk-wynik strong{ font-size:var(--fs-2xl); }
  .kalk-pasek{ margin-top:36px; }
  .kalk-karta{ padding:26px 24px; }
  .cennik-pelny{ grid-template-columns:1fr; gap:18px; }
  .kroki{ grid-template-columns:1fr; gap:18px; }
  .cennik-karta{ padding:26px 24px; }
}

/* ============================================================================
   RUCH
   Dwie rzeczy i nic wiecej: karta unosi sie pod kursorem, i karty wchodza
   przy przewijaniu. Obie ruszaja wylacznie opacity i transform — przegladarka
   robi je na karcie graficznej, wiec nie gubia klatek na tanim telefonie.

   Oba ruchy skladaja sie w JEDNYM transformie, przez dwie zmienne. Gdyby
   kazdy mial wlasna regule z `transform`, druga kasowalaby pierwsza i pod
   kursorem nic by sie nie dzialo — na to sie wlasnie nadzialem.
   ============================================================================ */

.karta-oferta,.karta-poziom,.opinia{
  --wejscie:0px;
  --uniesienie:0px;
  transform:translateY(calc(var(--wejscie) + var(--uniesienie)));
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .55s ease, box-shadow .25s ease;
  transition-delay:var(--zwloka,0ms);
}

/* Klase `wchodzi` nadaje skrypt — bez JavaScriptu karty sa widoczne od razu. */
.wchodzi{ opacity:0; --wejscie:18px; }
.wchodzi.widoczna{ opacity:1; --wejscie:0px; }

@media (hover:hover) and (pointer:fine){
  .karta-oferta:hover,.karta-poziom:hover,.opinia:hover{
    --uniesienie:-6px;
    box-shadow:var(--sh-4);
    transition-delay:0ms;
  }
  .pioro{ transition:opacity .25s ease; }
  .karta-oferta:hover .pioro{ opacity:.72; }
}

@media (prefers-reduced-motion:reduce){
  .karta-oferta,.karta-poziom,.opinia,
  .wchodzi,.wchodzi.widoczna{
    opacity:1; --wejscie:0px; --uniesienie:0px; transform:none; transition:none;
  }
}