/* ===========================================================================
   SELECTDIET — arkusz strony produktowej.

   STYL: układ i typografia wzorowane na szablonie Koalo (webflow) — ciepła
   biel zamiast czystej, wielkie nagłówki Rubik o ciasnym interlinii, tekst
   Manrope (w miejsce komercyjnego Satoshi), pigułkowe przyciski, duże
   zaokrąglone karty w pastelach, hojne odstępy i wejścia przy przewijaniu.

   KOLORY Z LOGO, nie z szablonu (polecenie właściciela 23.09.2026:
   „skopiuj czcionki i kolory, ale nawiązuj do logo"). Logo Selectdiet ma
   dwie barwy: turkus #0088AA (DIET) i grafit #484848 (SELECT). Turkus gra
   rolę granatu Koalo, grafit — koloru tekstu. Pastele kart to rozjaśnienia
   turkusu plus jeden ciepły piasek, żeby sekcje dało się odróżnić wzrokiem.

   Klasy zostają te same, co w poprzedniej wersji — arkusz obsługuje
   wszystkie sześć stron bez zmian w HTML (poza akordeonem FAQ).
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- barwy z logo --- */
  --turkus:        #0088AA;
  --turkus-ciemny: #00697F;
  --turkus-jasny:  #00A6CE;
  --grafit:        #484848;
  --grafit-ciemny: #2E2E2E;

  /* --- płótno (ciepła biel jak w Koalo) --- */
  --tlo:        #FDFCF8;
  --biel:       #FFFFFF;
  --szarosc:    #F4F3EE;
  --linia:      #E8E6DE;

  /* --- tekst --- */
  --tekst:       #2E2E2E;
  --tekst-tresc: #5D5D5D;
  --tekst-slaby: #8A8A85;
  --na-ciemnym:  #FFFFFF;
  --tresc-ciemna:#D3DEE2;

  /* --- pastele kart (rozjaśnienia turkusu + piasek) --- */
  --pastel-turkus: #E3F2F6;
  --pastel-szalwia:#EAF1EE;
  --pastel-piasek: #FBF0DC;
  --pastel-mgla:   #EDF0F4;
  --pastel-rozowy: #F8ECEC;

  /* --- role pomocnicze (stare nazwy, żeby HTML się nie zmieniał) --- */
  --czern:        #2E2E2E;
  --panel:        #10343E;
  --linia-twarda: #2E2E2E;
  --akcent:       var(--turkus);
  --akcent-jasny: var(--turkus-jasny);
  --akcent-ciemny:var(--turkus-ciemny);
  --akcent-tlo:   var(--pastel-turkus);
  --akcent-linia: #B7DCE6;
  --na-czerni:    #FFFFFF;
  --tresc-czern:  #D3DEE2;
  --obrys-czern:  rgba(255,255,255,.18);
  --dane-1: #00697F;
  --dane-2: #0088AA;
  --dane-3: #9CCEDC;

  /* --- kroje --- */
  --krojN: 'Rubik', system-ui, sans-serif;          /* nagłówki */
  --krojT: 'Manrope', system-ui, sans-serif;        /* treść */
  --krojC: 'Manrope', system-ui, sans-serif;        /* nadpisy, liczby */

  /* --- promienie i cienie --- */
  --r-mala:  10px;
  --r-duza:  16px;
  --r-karta: 24px;
  --r-pigulka: 100px;
  --cien:       0 1px 2px rgba(46,46,46,.04);
  --cien-karta: 0 10px 30px rgba(46,46,46,.06);
  --cien-uniesienie: 0 18px 40px rgba(0,136,170,.14);

  --przejscie: .28s cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst-tresc);
  font-family: var(--krojT);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--turkus-ciemny); text-decoration: none; }
a:hover { color: var(--turkus); }

:focus-visible { outline: 2px solid var(--turkus); outline-offset: 3px; border-radius: 4px; }

/* --- szkielet ----------------------------------------------------------- */

.kontener { width: min(1180px, 100% - 40px); margin-inline: auto; }

.sekcja { padding: clamp(64px, 9vw, 120px) 0; }
.sekcja.ciasna { padding: clamp(28px, 4vw, 44px) 0; }

/* Sekcja „wyróżniona" u Koalo to nie inny kolor tła strony, tylko wyspa:
   zaokrąglona, jaśniejsza płyta na ciepłej bieli. */
.sekcja.wyrozniona > .kontener {
  background: var(--biel);
  border-radius: var(--r-karta);
  padding: clamp(36px, 5vw, 64px);
  box-shadow: var(--cien-karta);
}

.sekcja.ciemna { color: var(--na-ciemnym); }
.sekcja.ciemna > .kontener {
  background: var(--panel);
  border-radius: var(--r-karta);
  padding: clamp(36px, 5vw, 64px);
}
.sekcja.ciemna .tytul-2, .sekcja.ciemna .tytul-3, .sekcja.ciemna h2, .sekcja.ciemna h3 { color: var(--na-ciemnym); }
.sekcja.ciemna p, .sekcja.ciemna li, .sekcja.ciemna .olowek { color: var(--tresc-ciemna); }
.sekcja.ciemna .nadpis { color: #7FD0E4; }
.sekcja.ciemna .karta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.sekcja.ciemna .karta p { color: var(--tresc-ciemna); }
.sekcja.ciemna .cytat { border-left-color: var(--turkus-jasny); color: var(--na-ciemnym); }
.sekcja.ciemna .slownik, .sekcja.ciemna .slownik > div { background: transparent; border-color: rgba(255,255,255,.14); }
.sekcja.ciemna .slownik dd { color: var(--tresc-ciemna); }
.sekcja.ciemna .slownik dt { color: #7FD0E4; }

.stos { display: grid; gap: 20px; align-content: start; }
.para-kolumny { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 900px) {
  .para-kolumny { grid-template-columns: 1fr; }
  .para-kolumny.odwrotnie > :first-child { order: 2; }
}

/* --- typografia --------------------------------------------------------- */

.nadpis {
  font-family: var(--krojC);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--turkus);
}

.tytul-1, .tytul-2, .tytul-3, h1, h2, h3 {
  font-family: var(--krojN);
  color: var(--tekst);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 0;
}

/* Wielki, ciasny nagłówek — znak rozpoznawczy szablonu. */
.tytul-1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .98; font-weight: 600; }
.tytul-2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.04; font-weight: 600; }
.tytul-3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; font-weight: 600; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.olowek { font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--tekst-tresc); max-width: 62ch; }
.drobne { font-family: var(--krojC); font-size: 13px; color: var(--tekst-slaby); }

.naglowek-sekcji { display: grid; gap: 14px; max-width: 64ch; margin-bottom: clamp(32px, 4vw, 52px); }

/* --- przyciski (pigułki) ------------------------------------------------ */

.przyciski { display: flex; flex-wrap: wrap; gap: 12px; }

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--krojC); font-size: 15px; font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--r-pigulka);
  border: 1px solid transparent;
  transition: transform var(--przejscie), box-shadow var(--przejscie),
              background-color var(--przejscie), color var(--przejscie),
              border-color var(--przejscie);
  will-change: transform;
}
.przycisk.glowny { background: var(--turkus); color: #fff; box-shadow: 0 8px 20px rgba(0,136,170,.22); }
.przycisk.glowny:hover { background: var(--turkus-ciemny); color: #fff; transform: translateY(-2px); box-shadow: var(--cien-uniesienie); }
.przycisk.obrys { background: transparent; color: var(--tekst); border-color: var(--linia); }
.przycisk.obrys:hover { border-color: var(--turkus); color: var(--turkus-ciemny); transform: translateY(-2px); background: var(--biel); }
.sekcja.ciemna .przycisk.obrys { color: #fff; border-color: rgba(255,255,255,.35); }
.sekcja.ciemna .przycisk.obrys:hover { background: rgba(255,255,255,.1); color: #fff; }

/* --- pasek górny -------------------------------------------------------- */

.pasek {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,252,248,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--przejscie), box-shadow var(--przejscie);
}
.pasek.przewinieta { border-bottom-color: var(--linia); box-shadow: 0 4px 20px rgba(46,46,46,.05); }
.pasek-w { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.znak img { height: 45px; width: auto; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a {
  font-family: var(--krojC); font-size: 15px; font-weight: 500; color: var(--tekst-tresc);
  padding: 9px 16px; border-radius: var(--r-pigulka);
  transition: background-color var(--przejscie), color var(--przejscie);
}
.menu a:hover { background: var(--szarosc); color: var(--tekst); }
.menu a.tu { background: var(--pastel-turkus); color: var(--turkus-ciemny); }
@media (max-width: 860px) {
  .pasek-w { flex-wrap: wrap; min-height: 0; padding: 14px 0; }
  .menu { width: 100%; gap: 2px; }
  .menu a { padding: 8px 12px; font-size: 14px; }
}

/* --- menu na telefonie: przycisk z trzema kreskami ----------------------- */
.menu-guzik {
  display: none;
  width: 44px; height: 44px; padding: 0; margin: 0 -8px 0 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--tekst);
  cursor: pointer; position: relative;
}
.menu-guzik span {
  position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--przejscie), opacity var(--przejscie), top var(--przejscie);
}
.menu-guzik span:nth-child(1) { top: 15px; }
.menu-guzik span:nth-child(2) { top: 21px; }
.menu-guzik span:nth-child(3) { top: 27px; }
.pasek.otwarte .menu-guzik span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.pasek.otwarte .menu-guzik span:nth-child(2) { opacity: 0; }
.pasek.otwarte .menu-guzik span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.menu-guzik:focus-visible { outline: 2px solid var(--turkus); outline-offset: 2px; }

@media (max-width: 860px) {
  .pasek-w { flex-wrap: nowrap; min-height: 68px; padding: 10px 0; }
  .menu-guzik { display: block; }
  .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; width: auto;
    padding: 10px 16px 18px;
    background: var(--tlo);
    border-bottom: 1px solid var(--linia);
    box-shadow: 0 18px 30px rgba(16,52,62,.12);
  }
  .pasek.otwarte .menu { display: flex; }
  .menu a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  /* otwarte menu: pasek jak po przewinięciu — jasny, z kolorowym logo */
  .pasek.otwarte { background: var(--tlo); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- karty i siatki ----------------------------------------------------- */

.siatka { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.siatka.dwie { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.bento { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.bento .szeroka { grid-column: span 2; }
@media (max-width: 820px) { .bento .szeroka { grid-column: span 1; } }

.karta {
  display: grid; gap: 12px; align-content: start;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--r-karta);
  padding: clamp(22px, 2.6vw, 30px);
  color: inherit;
  transition: transform var(--przejscie), box-shadow var(--przejscie), border-color var(--przejscie);
  will-change: transform;
}
a.karta:hover { transform: translateY(-6px); box-shadow: var(--cien-karta); border-color: transparent; color: inherit; }
.karta p { color: var(--tekst-tresc); font-size: 16px; }

/* Pastele — nazwy klas zostały z poprzedniej wersji, barwy są nowe:
   trzy odcienie turkusu z logo plus ciepły piasek. */
.karta.blekitna     { background: var(--pastel-turkus);  border-color: transparent; }
.karta.zielona      { background: var(--pastel-szalwia); border-color: transparent; }
.karta.pomaranczowa { background: var(--pastel-piasek);  border-color: transparent; }
.karta.fioletowa    { background: var(--pastel-mgla);    border-color: transparent; }

.znacznik {
  font-family: var(--krojC); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--turkus-ciemny);
}
.karta.pomaranczowa .znacznik { color: #9A6B1E; }

/* --- „Moduły" w układzie „Values" z szablonu -----------------------------
   Duża jasna płyta, na środku pigułka, wielki nagłówek i zdanie, pod spodem
   rząd pięciu kart. Karty na przemian: mocna (turkus z logo, biały tekst
   i ikona) i jasna (biel, turkusowa ikona) — jak żółte i białe w Koalo.
   Ikony własne, geometryczne, w jednym kolorze (`currentColor`).
   Karty nie ruszają się pod myszą — tylko prowadzą do opisu modułu. */

.wartosci-plyta {
  background: var(--pastel-mgla);
  border-radius: var(--r-karta);
  padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 40px) clamp(40px, 5vw, 56px);
}
.wartosci-gora { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px); }
.wartosci-gora .nadpis.odznaka { justify-self: center; }
.wartosci-gora .tytul-2 { max-width: 20ch; color: var(--tekst); }
.wartosci-gora .olowek { max-width: 46ch; }

.wartosci-rzad { display: grid; gap: 14px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .wartosci-rzad { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .wartosci-rzad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .wartosci-rzad { grid-template-columns: 1fr; } }

.wartosc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: var(--r-duza);
  padding: 26px 20px 28px;
  color: var(--tekst);
}
.wartosc:hover { color: inherit; }
.wartosc.mocna { background: var(--turkus); color: #fff; }
.wartosc.mocna:hover { color: #fff; }
.wartosc.jasna { background: var(--biel); }

.wartosc-etykieta { font-family: var(--krojC); font-size: 14px; color: inherit; opacity: .85; }
.wartosc-ikona { display: block; width: 72px; height: 72px; margin: 26px 0 24px; }
.wartosc-ikona svg { width: 100%; height: 100%; fill: currentColor; }
.wartosc.mocna .wartosc-ikona { color: #fff; }
.wartosc.jasna .wartosc-ikona { color: var(--turkus); }

.wartosc h3 {
  font-family: var(--krojN); font-size: clamp(1.1rem, 1.4vw, 1.3rem); font-weight: 600;
  line-height: 1.2; color: inherit; margin: 0;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
  padding-bottom: 14px; margin-bottom: 14px; width: 100%;
  border-bottom: 1px solid currentColor;
}
.wartosc.mocna h3 { border-bottom-color: rgba(255,255,255,.4); }
.wartosc.jasna h3 { border-bottom-color: var(--akcent-linia); }
.wartosc p { font-size: 15px; line-height: 1.5; margin: 0; color: inherit; opacity: .92; }
.wartosc.jasna p { color: var(--tekst-tresc); opacity: 1; }

/* --- BANER: laptop i telefon obok nagłówka --------------------------------
   Jak we wzorze: po prawej kompozycja urządzeń — duży laptop z prawdziwym
   zrzutem panelu dietetyka, przed nim telefon z ekranem „Dziś" pacjenta
   (przykładowy dzień, nie dane pacjenta). Za urządzeniami turkusowa plama
   z tym samym wzorem jedzenia, co w pasku licznika. Bez przycisków sklepów.
   Urządzenia rysowane w CSS — skalują się razem z kolumną
   (`container-type`, jednostki `cqw`). */

.baner { grid-template-columns: .9fr 1.1fr; }

.urzadzenia { position: relative; aspect-ratio: 1.18; container-type: inline-size; }

.urzadzenia-tlo {
  position: absolute; inset: 4% -3% 4% 8%;
  border-radius: 36px;
  border: 1.5px solid rgba(127,208,228,.45);
  transform: rotate(-7deg);
}
.urzadzenia-tlo::after {
  content: ''; position: absolute; inset: -22px -22px 22px 22px;
  border-radius: 44px;
  border: 1px solid rgba(127,208,228,.28);
}

.laptop { position: absolute; right: 0; top: 10%; width: 88%; }
.laptop-ekran {
  position: relative;
  background: #16252B;
  border-radius: 2.2cqw 2.2cqw 0 0;
  padding: 2.4cqw 2.4cqw 2.8cqw;
}
.laptop-kamera { position: absolute; top: .9cqw; left: 50%; width: .8cqw; height: .8cqw; border-radius: 50%; background: #3A4A50; transform: translateX(-50%); }
.laptop-ekran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: .6cqw; }
.laptop-podstawa {
  position: relative; height: 2.2cqw; margin: 0 -6.5%;
  background: linear-gradient(180deg, #E3E7EA 0%, #B9C1C6 100%);
  border-radius: 0 0 2cqw 2cqw;
}
.laptop-podstawa span { position: absolute; top: 0; left: 50%; width: 16%; height: 45%; transform: translateX(-50%); background: #C8CFD3; border-radius: 0 0 1cqw 1cqw; }

.telefon {
  position: absolute; left: 0; bottom: 0; width: 32%;
  aspect-ratio: 9 / 18.5;
  background: #16252B;
  border-radius: 5.2cqw;
  padding: 1.3cqw;
  box-shadow: 0 30px 50px rgba(16,52,62,.28);
  container-type: inline-size;
}
.telefon-ekran {
  position: relative; height: 100%; overflow: hidden;
  background: var(--tlo);
  border-radius: 13cqw;
  padding: 16cqw 7cqw 7cqw;
  display: flex; flex-direction: column; gap: 6cqw;
  font-family: var(--krojT);
}
.telefon-wyciecie { position: absolute; top: 3.5cqw; left: 50%; width: 32%; height: 7cqw; border-radius: 99px; background: #16252B; transform: translateX(-50%); }

.app-gora { background: var(--turkus); color: #fff; border-radius: 9cqw; padding: 7cqw 8cqw; display: grid; gap: 3cqw; }
.app-dzien { font-size: 6.5cqw; opacity: .9; }
.app-kcal { font-family: var(--krojN); font-size: 15cqw; font-weight: 600; line-height: 1; }
.app-kcal small { font-size: 7cqw; font-weight: 500; opacity: .85; }
.app-makro { display: flex; height: 3.4cqw; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.25); }
.app-makro i:nth-child(1) { background: #fff; }
.app-makro i:nth-child(2) { background: #BDE6F0; }
.app-makro i:nth-child(3) { background: #7FD0E4; }

.app-posilki { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.2cqw; }
.app-posilki li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 3cqw; align-items: center;
  background: var(--biel); border-radius: 6cqw; padding: 5cqw 5cqw;
  font-size: 5.8cqw; color: var(--tekst);
  box-shadow: 0 .6cqw 2cqw rgba(46,46,46,.06);
}
.app-posilki .app-godz { color: var(--turkus); font-weight: 600; }
.app-posilki .app-nazwa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-posilki .app-ile { color: var(--tekst-slaby); }
.app-posilki li.zjedzony { background: var(--pastel-turkus); }
.app-posilki li.zjedzony .app-nazwa { text-decoration: line-through; color: var(--tekst-slaby); }

.app-pasek { margin-top: auto; display: flex; justify-content: space-around; padding: 4cqw 2cqw 0; border-top: 1px solid var(--linia); }
.app-pasek i { width: 7cqw; height: 7cqw; border-radius: 2cqw; background: var(--linia); }
.app-pasek i.tu { background: var(--turkus); }

@media (max-width: 900px) {
  .baner { grid-template-columns: 1fr; }
  .urzadzenia { max-width: 620px; width: 100%; margin: 12px auto 0; }
}

/* --- PANEL W LAPTOPIE (24.09.2026) ---------------------------------------
   Ekran laptopa nie jest zdjęciem, tylko panelem narysowanym w HTML
   i CSS — jak ekran telefonu. Dzięki temu napisy są ostre przy każdym
   powiększeniu i gęstości ekranu. Pokazuje ten sam dzień, który pacjent
   widzi w telefonie obok (1 840 kcal, te same posiłki) — dane przykładowe.
   Jednostki `cqw` liczone od szerokości ekranu laptopa. */

.pm {
  container-type: inline-size;
  aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: .6cqw;
  display: grid; grid-template-columns: 17% 1fr;
  background: #F2F6F8;
  font-family: var(--krojT); color: #2E3A3F; line-height: 1.25;
}
.pm small { display: block; color: #7A8A90; font-weight: 500; }

.pm-bok {
  background: #fff; border-right: 1px solid #E4EBEE;
  padding: 2.6cqw 1.4cqw; display: flex; flex-direction: column; gap: .8cqw;
}
.pm-bok img { width: 9.5cqw; height: auto; margin: 0 0 2.2cqw 1cqw; }
.pm-bok span {
  display: flex; align-items: center; gap: 1cqw;
  font-size: 1.74cqw; font-weight: 500; color: #4A5A60;
  padding: .9cqw 1cqw; border-radius: 1cqw; white-space: nowrap;
}
.pm-bok span i { flex: none; width: 2.3cqw; height: 2.3cqw; border-radius: .7cqw; background: #E3F2F6; }
.pm-bok span.tu { background: #E3F2F6; color: #00697F; font-weight: 600; }
.pm-bok span.tu i { background: #0088AA; }

.pm-glowna { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.pm-gora {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.7cqw 2.6cqw;
  background: linear-gradient(90deg, #0088AA 0%, #2BB3D6 100%); color: #fff;
  font-size: 2.04cqw; font-weight: 600;
}
.pm-ja { display: flex; align-items: center; gap: .9cqw; font-size: 1.68cqw; font-weight: 500; opacity: .95; }
.pm-ja i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: rgba(255,255,255,.35); }

.pm-tresc {
  padding: 2cqw 2.4cqw; min-height: 0;
  display: grid; gap: 1.6cqw; grid-template-columns: 1.6fr 1fr; align-content: start;
}
.pm-naglowek, .pm-karta { background: #fff; border-radius: 1.4cqw; box-shadow: 0 .3cqw 1.2cqw rgba(16,52,62,.06); }
.pm-naglowek {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 2cqw;
}
.pm-naglowek b { display: block; font-family: var(--krojN); font-size: 2.52cqw; font-weight: 600; }
.pm-naglowek small { font-size: 1.62cqw; margin-top: .3cqw; }
.pm-status { font-size: 1.44cqw; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #2FB573; border-radius: .6cqw; padding: .6cqw 1cqw; }
.pm-guzik { margin-left: auto; font-size: 1.62cqw; font-weight: 600; color: #fff; background: #0088AA; border-radius: .7cqw; padding: .9cqw 1.5cqw; }

.pm-karta { padding: 1.6cqw 2cqw; min-width: 0; }
.pm-tytul { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1cqw; }
.pm-tytul b { font-family: var(--krojN); font-size: 2.04cqw; font-weight: 600; }
.pm-tytul small { font-size: 1.56cqw; }

.pm-dzien ul { list-style: none; margin: 0; padding: 0; }
.pm-dzien li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4cqw; align-items: center;
  padding: .7cqw 0; border-top: 1px solid #EEF2F4; font-size: 1.8cqw;
}
.pm-godz { font-weight: 600; color: #0088AA; }
.pm-co { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-co small { font-size: 1.38cqw; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0; }
.pm-kcal { color: #5D6D73; font-weight: 500; }

.pm-bilans { display: flex; flex-direction: column; }
.pm-paczek {
  width: 14cqw; aspect-ratio: 1; margin: .2cqw auto 1.2cqw; border-radius: 50%;
  background: conic-gradient(#0088AA 0 22%, #7FD0E4 22% 52%, #D5EEF5 52% 100%);
  display: grid; place-items: center;
}
.pm-paczek span { width: 70%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-content: center; text-align: center; }
.pm-paczek b { font-family: var(--krojN); font-size: 2.64cqw; font-weight: 600; line-height: 1; }
.pm-paczek small { font-size: 1.38cqw; }
.pm-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .8cqw; }
.pm-legenda li { display: flex; align-items: center; gap: .8cqw; font-size: 1.62cqw; color: #4A5A60; }
.pm-legenda li b { margin-left: auto; color: #2E3A3F; }
.pm-legenda i { width: 1.2cqw; height: 1.2cqw; border-radius: .35cqw; }
.pm-legenda i.b { background: #0088AA; }
.pm-legenda i.t { background: #7FD0E4; }
.pm-legenda i.w { background: #D5EEF5; }

/* --- „Tak wygląda panel" — układ z osią kroków (24.09.2026) ---------------
   Jak we wzorze: na środku znaczek i tytuł, pod nimi przez całą szerokość
   przerywana linia z etykietami kroków, od każdej etykiety pionowy
   przerywany łącznik do karty. Trzecia karta niżej. Karta: ciemna ikona
   w kwadracie, tytuł, dwie linijki, niżej zrzut w jasnym okienku.
   Karty stoją — bez ruchu pod myszą. */

.pokaz { overflow: hidden; }
.pokaz-gora { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.pokaz-gora .nadpis.odznaka { justify-self: center; }
.pokaz-gora .olowek { max-width: 52ch; }
.pokaz-gora .tytul-2 { max-width: 20ch; }
.pokaz-gora .olowek code { font-size: .85em; }

.pokaz-uklad {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
/* linia przez całą szerokość okna, na wysokości etykiet */
.pokaz-uklad::before {
  content: ''; position: absolute; top: 40px; left: calc(50% - 50vw); width: 100vw;
  border-top: 1px dashed #C4D0D4;
}
.pokaz-kolumna { display: flex; flex-direction: column; align-items: center; }
.pokaz-etykieta {
  height: 40px; display: flex; align-items: center;
  font-family: var(--krojC); font-size: 14px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst);
}
.pokaz-lacznik { display: block; width: 0; height: 44px; border-left: 1px dashed #C4D0D4; }
.pokaz-kolumna:nth-child(3) .pokaz-lacznik { height: 108px; }

.pokaz-karta {
  width: 100%;
  background: var(--biel);
  border: 1px solid var(--linia); border-radius: 22px;
  padding: clamp(20px, 2vw, 26px);
}
.pokaz-tytul { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pokaz-tytul h3 { font-family: var(--krojN); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.15; }
.pokaz-ikona { flex: none; width: 48px; height: 48px; color: var(--turkus); }
.pokaz-ikona svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.pokaz-karta p { font-size: 15px; line-height: 1.5; color: var(--tekst-tresc); margin: 0; }

/* szersza sekcja i szerokie okienko: zrzut widać w całości, jak najwiekszy */
.pokaz > .kontener { width: min(1340px, 100% - 40px); }
.pokaz-karta { padding: clamp(18px, 1.8vw, 24px); }
.pokaz-okno {
  margin-top: 20px; padding: 12px;
  background: #F2F5F6; border: 1px solid var(--linia); border-radius: 16px;
  container-type: inline-size;
}

/* EKRANY W KARTACH (24.09.2026) — rysowane w HTML jak panel w laptopie:
   ostre w każdym rozmiarze, napisy czytelne. Jednostki `cqw` liczone od
   szerokości okienka. Dane przykładowe. */
.ek {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(16,52,62,.13);
  font-family: var(--krojT); color: #2E3A3F; line-height: 1.25;
}
.ek small { display: block; color: #7A8A90; font-weight: 500; }
.ek-gora {
  display: flex; align-items: center; justify-content: space-between; gap: 3cqw;
  padding: 3.4cqw 4.4cqw;
  background: linear-gradient(90deg, #0088AA 0%, #2BB3D6 100%); color: #fff;
  font-size: 4.2cqw;
}
.ek-gora b { font-weight: 600; }
.ek-gora span { font-size: 3.4cqw; opacity: .9; }
.ek-tresc { padding: 3.6cqw 4.4cqw 4.4cqw; }

.ek-szukaj {
  font-size: 3.3cqw; color: #8A989D;
  border: 1px solid #E1E8EB; border-radius: 2.4cqw; padding: 2.4cqw 3cqw; margin-bottom: 2.4cqw;
}
.ek-lista { list-style: none; margin: 0; padding: 0; }
.ek-lista li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 3cqw; align-items: center;
  padding: 2.4cqw 0; border-top: 1px solid #EEF2F4;
}
.ek-lista li:first-child { border-top: 0; }
.ek-av {
  width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center;
  background: #E3F2F6; color: #00697F; font-style: normal; font-weight: 700; font-size: 3.2cqw;
}
.ek-lista b { display: block; font-size: 3.9cqw; font-weight: 600; }
.ek-lista small { font-size: 3cqw; margin-top: .4cqw; }
.ek-pill {
  font-style: normal; font-size: 2.7cqw; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #1E8A55; background: #DDF5E8; border-radius: 99px; padding: 1cqw 2.4cqw;
}

.ek-wizyta { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4cqw; align-items: end; }
.ek-pomiary { list-style: none; margin: 0; padding: 0; }
.ek-pomiary li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw;
  font-size: 3.4cqw; color: #5D6D73;
  padding: 2.1cqw 0 2.1cqw 2.4cqw; border-top: 1px solid #EEF2F4;
  border-left: .8cqw solid #0088AA;
}
.ek-pomiary li:first-child { border-top: 0; }
.ek-pomiary b { color: #2E3A3F; font-weight: 700; white-space: nowrap; text-align: right; }
.ek-pomiary b small { display: inline; font-size: 2.8cqw; font-weight: 500; }
.ek-sklad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; height: 100%; min-height: 40cqw; }
.ek-sklad div { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; background: #F1F5F7; border-radius: 2cqw; padding: 1.4cqw 1.4cqw 1cqw; }
.ek-sklad i { display: block; border-radius: 1.4cqw; background: #0088AA; }
.ek-sklad .t i { background: #7FD0E4; }
.ek-sklad .f i { background: #00697F; }
.ek-sklad small { font-size: 2.7cqw; margin-top: 1.4cqw; }

.ek-gora .ek-status {
  font-style: normal; font-size: 2.9cqw; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #2FB573; color: #fff; border-radius: 1.4cqw; padding: 1.2cqw 2.2cqw;
}
.ek-bilans { display: grid; gap: 2cqw; margin-bottom: 3.4cqw; }
.ek-bilans b { font-family: var(--krojN); font-size: 6cqw; font-weight: 600; line-height: 1; }
.ek-bilans b small { display: inline; font-family: var(--krojT); font-size: 3.2cqw; }
.ek-makro { display: flex; height: 2.2cqw; border-radius: 99px; overflow: hidden; }
.ek-makro i:nth-child(1) { background: #0088AA; }
.ek-makro i:nth-child(2) { background: #7FD0E4; }
.ek-makro i:nth-child(3) { background: #D5EEF5; }
.ek-tydzien { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8cqw; }
.ek-tydzien div { display: grid; gap: 1.4cqw; }
.ek-tydzien small { font-size: 3cqw; font-weight: 700; color: #00697F; text-align: center; }
.ek-tydzien i {
  font-style: normal; text-align: center; font-size: 3.1cqw; font-weight: 600; color: #00697F;
  background: #E3F2F6; border-radius: 1.8cqw; padding: 2.6cqw 0;
}
.ek-tydzien i:nth-of-type(2) { background: #F1F5F7; color: #5D6D73; }
.ek-tydzien i:nth-of-type(3) { background: #0088AA; color: #fff; }

@media (max-width: 900px) {
  .pokaz-uklad { grid-template-columns: 1fr; gap: 28px; }
  .pokaz-uklad::before, .pokaz-lacznik { display: none; }
  .pokaz-kolumna { align-items: stretch; }
  .pokaz-etykieta { height: auto; margin-bottom: 10px; color: var(--turkus); font-size: 13px; }
}

/* --- „Dieta dla pary" — grafika zamiast karty (24.09.2026) ----------------
   Sylwetki mężczyzny i kobiety na pastelowych kołach, pod każdą
   jej/jego kalorie, porcja kaszy i wymienniki. Wspólna lista zakupów — w tekście obok.
   Bez białej karty — grafika stoi wprost na tle strony. */

.para-grafika { display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: center; }
/* dół grafiki (pigułki) w jednej linii z przyciskiem „Jak działa dieta dla pary" */
@media (min-width: 901px) { #para .para-kolumny { align-items: end; } }

.para-osoby { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 36px); width: 100%; max-width: 440px; }
.para-osoba { display: flex; flex-direction: column; align-items: center; text-align: center; }
.para-postac { position: relative; width: 100%; aspect-ratio: 1 / .95; display: flex; justify-content: center; align-items: flex-end; }
.para-kolo { position: absolute; left: 2%; right: 2%; bottom: 0; aspect-ratio: 1; border-radius: 50%; }
.para-osoba.on .para-kolo { background: var(--pastel-turkus); }
.para-osoba.ona .para-kolo { background: var(--pastel-szalwia); }
.para-sylwetka { position: relative; height: 86%; width: auto; margin-bottom: 4%; fill: currentColor; }
.para-osoba.on .para-sylwetka { color: var(--turkus-ciemny); }
.para-osoba.ona .para-sylwetka { color: var(--turkus); }

.para-kto { margin-top: 18px; font-family: var(--krojN); font-size: 1.15rem; font-weight: 600; color: var(--tekst); }
.para-kcal { font-family: var(--krojN); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; color: var(--turkus-ciemny); line-height: 1.1; }
.para-pigulki { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.para-pigulki em {
  font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--turkus-ciemny);
  background: var(--pastel-turkus); border-radius: var(--r-pigulka); padding: 5px 12px;
}
.para-osoba.ona .para-pigulki em { background: var(--pastel-szalwia); }


/* --- „Czym Selectdiet różni się" — porównanie (24.09.2026) ---------------
   Trzy kolumny: obszar, co robi Selectdiet (turkusowy ptaszek), pytanie do
   innego dostawcy (szary znak zapytania). O innych programach nic nie
   twierdzimy — każdy wiersz Selectdietu sprawdzony w kodzie i w danych.
   Na telefonie wiersz staje się kartą. Wiersze stoją — bez ruchu pod myszą. */

.porownanie-gora { display: grid; justify-items: center; gap: 14px; text-align: center; margin: 0 auto clamp(32px, 4.5vw, 52px); max-width: 64ch; }
.porownanie-gora .nadpis.odznaka { justify-self: center; }
.porownanie-gora .tytul-2 { max-width: 20ch; }

.porownanie {
  max-width: 1120px; margin-inline: auto;
  background: var(--biel); border: 1px solid var(--linia); border-radius: 24px; overflow: hidden;
}
.porownanie-wiersz {
  display: grid; grid-template-columns: .8fr 1.45fr 1.15fr;
  border-top: 1px solid var(--linia);
}
.porownanie-wiersz > div { padding: 20px 24px; }
.porownanie-naglowek { border-top: 0; background: #F6F6F3; }
.porownanie-naglowek > div { display: flex; align-items: center; padding-block: 16px; font-family: var(--krojC); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-slaby); }
.porownanie-naglowek img { height: 34px; width: auto; }
.porownanie-co { font-family: var(--krojN); font-size: 1.05rem; font-weight: 600; color: var(--tekst); line-height: 1.3; }
.porownanie-my { background: rgba(227,242,246,.55); }
.porownanie-naglowek > div:nth-child(2) { background: var(--pastel-turkus); }
.porownanie-my, .porownanie-pytanie { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.porownanie-my span { color: var(--tekst); }
.porownanie-pytanie span { color: var(--tekst-slaby); }
.porownanie-my i, .porownanie-pytanie i { flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px; }
.porownanie-my i {
  background: var(--turkus) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.porownanie-pytanie i {
  background: #ECEDEA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A85' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 9a3 3 0 1 1 4.3 2.7c-.9.4-1.5 1.1-1.5 2.1v.4'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E") center / 15px no-repeat;
}

@media (max-width: 860px) {
  .porownanie { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 14px; }
  .porownanie-naglowek { display: none; }
  .porownanie-wiersz { grid-template-columns: 1fr; border: 1px solid var(--linia); border-radius: 20px; background: var(--biel); overflow: hidden; }
  .porownanie-wiersz > div { padding: 14px 18px; }
  .porownanie-co { padding-bottom: 4px !important; }
}

/* --- PANEL NA ŻYWO (24.09.2026) — prawdziwe ekrany programu na „Funkcjach" --
   W ramce okna przeglądarki `iframe` z folderu `panel/` (zapisane ekrany
   programu na danych pokazowych), zawsze w szerokim układzie programu
   pomniejszonym do szerokości ramki — wymiary i `--skala` ustawia skrypt
   na dole „Funkcji". */

.pd-wstep { display: grid; gap: 10px; margin-bottom: 22px; }
.pd-wstep .olowek { max-width: 72ch; }

.pd-okno { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -20px rgba(16,52,62,.35), 0 0 0 1px #E4EBEE; }
.pd-pasek-okna { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: #EEF2F4; border-bottom: 1px solid #E4EBEE; }
.pd-pasek-okna i { width: 11px; height: 11px; border-radius: 50%; background: #F06A5E; }
.pd-pasek-okna i:nth-child(2) { background: #F5BE4F; }
.pd-pasek-okna i:nth-child(3) { background: #5BC766; }
.pd-pasek-okna span { margin-left: 12px; font-size: 12.5px; color: #7A8A90; background: #fff; border-radius: 99px; padding: 3px 14px; }

/* wymiary ramki i ekranu ustawia skrypt na dole „Funkcji" (tu tylko zapas) */
.pd-ramka { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #F8F9FE; }
.pd-ramka[style*="height"] { aspect-ratio: auto; }
.pd-ramka iframe {
  position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0;
  transform-origin: 0 0; transform: scale(var(--skala, .8));
}
.pd-pelny { display: flex; justify-content: center; margin-top: 20px; }

/* --- „Aplikacja pacjenta" na głównej (24.09.2026, wersja 3) ---------------
   Bez tła (właściciel: „nie chcę tła żadnego"). Po lewej tekst i dwa
   sklepy; po prawej
   telefon z PRAWDZIWYM ekranem aplikacji (tryb pokazowy, dane wbudowane),
   z lewej wysunięta prawdziwa karta posiłku z białą etykietą. Karta i etykieta
   stoją PROSTO — obrót przeskalowywał zrzut i rozmywał litery. */

.apka-plyta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }

.apka-tekst { display: grid; gap: 18px; align-content: center; }
.apka-tekst .tytul-2 { max-width: 16ch; }
.apka-tekst .olowek { max-width: 48ch; }

.apka-etykieta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.apka-sklepy { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.apka-sklep {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0B1215; color: #fff; border-radius: 14px; padding: 10px 20px 10px 14px;
  font-family: var(--krojN); font-size: 18px; font-weight: 600; line-height: 1.05;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.45);
  transition: transform var(--przejscie);
}
.apka-sklep:hover { color: #fff; transform: translateY(-2px); }
.apka-sklep svg { width: 26px; height: 26px; flex: none; }
.apka-sklep small { display: block; font-family: var(--krojT); font-size: 11px; font-weight: 500; color: rgba(255,255,255,.75); }

.apka-scena { position: relative; height: 620px; }
.apka-telefon {
  position: absolute; right: 8%; top: 0; width: 290px;
  padding: 11px; border-radius: 48px; background: #0E1418;
  box-shadow: 0 40px 70px -22px rgba(16,52,62,.5), inset 0 0 0 2px #2A3338;
}
.apka-telefon img { display: block; width: 100%; height: auto; border-radius: 38px; }
.apka-wyspa { position: absolute; top: 21px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 99px; background: #0E1418; z-index: 1; }
.apka-karta {
  position: absolute; left: 0; bottom: 8%; width: 270px; z-index: 2;
  border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 34px 60px -18px rgba(16,52,62,.45), 0 0 0 1px rgba(16,52,62,.06);
}
.apka-karta img { display: block; width: 100%; height: auto; }
.apka-etykieta {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 6px 16px 6px 6px; border-radius: 99px; background: #fff; color: var(--tekst);
  font-family: var(--krojN); font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 28px -12px rgba(16,52,62,.45), 0 0 0 1px rgba(16,52,62,.06);
}
.apka-etykieta i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel-turkus); color: var(--turkus-ciemny); }
.apka-etykieta.e1 { left: 2%; bottom: calc(8% + 300px); }

@media (max-width: 1180px) {
  .apka-telefon { right: 0; width: 260px; }
  .apka-karta { width: 230px; }
  .apka-etykieta.e1 { bottom: calc(8% + 256px); }
  .apka-scena { height: 560px; }
}
@media (max-width: 900px) {
  .apka-plyta { grid-template-columns: 1fr; }
  .apka-scena { height: auto; aspect-ratio: 1 / 1.3; max-width: 440px; width: 100%; margin: 0 auto; container-type: inline-size; }
  .apka-telefon { right: 4cqw; width: 62cqw; padding: 2.4cqw; border-radius: 11cqw; }
  .apka-telefon img { border-radius: 9cqw; }
  .apka-wyspa { top: 4.6cqw; width: 19cqw; height: 5.4cqw; }
  .apka-karta { width: 54cqw; border-radius: 4cqw; bottom: 5%; }
  .apka-etykieta { font-size: 12.5px; padding: 4px 12px 4px 4px; }
  .apka-etykieta i { width: 26px; height: 26px; }
  .apka-etykieta.e1 { left: 0; bottom: calc(5% + 58cqw); }
}

/* --- TŁO BANERA (24.09.2026) ---------------------------------------------
   Jak we wzorze: wielka płyta w kolorze z logo (ciemny turkus przechodzący
   w turkus), obrócona tak, że dolna krawędź wznosi się w prawo, a lewy dół
   zostaje biały. Na płycie cienkie pionowe linie z kropkami, w rogu koło
   z obręczą, za urządzeniami obrysowane ramki. Pasek menu leży na płycie
   przezroczysty, z białym logo — po przewinięciu wraca do zwykłego. */

.bohater {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--pasek-wys, 76px));
  padding-top: calc(var(--pasek-wys, 76px) + clamp(36px, 6vw, 84px));
  padding-bottom: clamp(64px, 8vw, 120px);
}
.bohater-tlo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* licznik pod banerem odsunięty od łuku płyty */
.bohater + .sekcja { padding-top: clamp(56px, 7vw, 104px); }

.bohater-plyta {
  position: absolute;
  /* wielka elipsa, lekko obrócona: dół płyty to łuk, niżej z lewej,
     wyżej z prawej — bez prostych krawędzi i ostrych rogów */
  left: -30%; bottom: 3%;
  width: 150%; height: 210%;
  transform-origin: 50% 50%;
  transform: rotate(-7deg);
  border-radius: 50%;
  background: linear-gradient(200deg, #0A9CC2 0%, #00799A 38%, #005A71 100%);
}
/* pionowe linie stoją prosto (nie obracają się z płytą); biała kreska
   o niskim kryciu na jasnym tle strony jest niewidoczna, więc widać ją
   tylko na płycie. `::after` — rysuje się NAD płytą. */
.bohater-tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 12.5% 0 / 25% 100%;
}

.bohater-kolo {
  position: absolute; top: -118px; left: -118px;
  width: 210px; height: 210px; border-radius: 50%;
  background: linear-gradient(135deg, #7FD0E4 0%, #2BB3D6 100%);
}
.bohater-kolo::after {
  content: ''; position: absolute; inset: -22px; border-radius: 50%;
  border: 1.5px solid rgba(127,208,228,.55);
}
.bohater-obrecz {
  position: absolute; top: 18%; right: -120px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 2px solid rgba(127,208,228,.5);
}

.bohater-kropka {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  animation: kropka-plynie 7s ease-in-out infinite alternate;
}
.bohater-kropka.k1 { left: calc(12.5% - 4px); top: 16%; }
.bohater-kropka.k2 { left: calc(37.5% - 4px); top: 64%; animation-delay: -2s; }
.bohater-kropka.k3 { left: calc(62.5% - 4px); top: 22%; animation-delay: -4s; }
.bohater-kropka.k4 { left: calc(87.5% - 4px); top: 8%;  animation-delay: -1s; }
@keyframes kropka-plynie { from { transform: translateY(-18px); } to { transform: translateY(18px); } }

.bohater .nadpis { color: #9FE0F0; }
.bohater .tytul-1 { color: #fff; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: 1.04; max-width: 15ch; }
@media (min-width: 901px) { .bohater .baner { grid-template-columns: 1fr 1.05fr; } }
.bohater .olowek { color: #DCEFF4; }
.bohater .przycisk.glowny { background: #fff; color: var(--turkus-ciemny); box-shadow: 0 12px 28px rgba(0,40,52,.28); }
.bohater .przycisk.glowny:hover { background: var(--pastel-turkus); color: var(--turkus-ciemny); }
.bohater .przycisk.obrys { color: #fff; border-color: rgba(255,255,255,.45); }
.bohater .przycisk.obrys:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.bohater-uwaga { font-family: var(--krojC); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.66); }

/* laptop i telefon płasko, jeden przed drugim */
/* laptop wysunięty w prawo, żeby telefon zasłaniał tylko pasek boczny panelu */
@media (min-width: 901px) {
  .bohater .laptop { right: -9%; width: 94%; }
  .bohater .telefon { left: -3%; width: 30%; }
}
/* bez obrotu i bez `filter` — jedno i drugie zamienia ekran w obrazek
   i rozmywa napisy; cień zwykłym `box-shadow`, ostro jak w telefonie */
.bohater .laptop-ekran { box-shadow: 0 34px 60px -10px rgba(0,30,40,.38); }
.bohater .laptop-podstawa { box-shadow: 0 18px 30px -8px rgba(0,30,40,.35); }
.bohater .telefon { box-shadow: 0 34px 60px rgba(0,30,40,.38); }

/* pasek menu na płycie */
.pasek.na-banerze { transition: background-color var(--przejscie), border-color var(--przejscie), box-shadow var(--przejscie); }
.pasek.na-banerze:not(.przewinieta):not(.otwarte) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pasek.na-banerze:not(.przewinieta):not(.otwarte) .znak img { filter: brightness(0) invert(1); }
.pasek.na-banerze:not(.przewinieta):not(.otwarte) .menu a { color: rgba(255,255,255,.9); }
.pasek.na-banerze:not(.przewinieta):not(.otwarte) .menu-guzik { color: #fff; }
.pasek.na-banerze:not(.przewinieta):not(.otwarte) .menu a:hover { background: rgba(255,255,255,.12); color: #fff; }

@media (max-width: 900px) {
  .bohater-plyta { left: -30%; bottom: 2%; width: 160%; height: 140%; transform: rotate(-4deg); border-radius: 0 0 50% 50% / 0 0 14% 14%; }
  .bohater-kolo { top: -150px; left: -150px; }
  .bohater-obrecz { display: none; }
  .bohater .laptop { transform: none; }
}
/* węższy ekran: logo stoi przy lewym brzegu — koło w rogu weszłoby na nie, więc znika */
@media (max-width: 1320px) { .bohater-kolo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bohater-kropka { animation: none; }
}

/* --- licznik: kolorowy pasek jak we wzorze ------------------------------
   Zaokrąglony pasek w turkusie z logo (od jaśniejszego u góry do pełnego
   u dołu), na nim wzór z rysunków jedzenia białą kreską, liczby i podpisy
   na biało, wyśrodkowane, między nimi pionowe kreski. Liczby dobiegają od
   zera, gdy pasek pojawi się na ekranie (skrypt na dole strony); kto ma
   „ogranicz animacje", widzi od razu wartości końcowe. */

.liczby {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-radius: 28px; overflow: hidden;
  background-color: var(--turkus);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22 viewBox=%220 0 160 160%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Cpath d=%22M22 30c-8 0-12 7-12 14 0 9 6 18 12 18 3 0 4-2 6-2s3 2 6 2c6 0 12-9 12-18 0-7-4-14-12-14-3 0-4 2-6 2s-3-2-6-2z%22/%3E%3Cpath d=%22M28 30c0-5 2-8 5-10%22/%3E%3Cpath d=%22M29 24c4-3 8-2 10 0-3 3-7 3-10 0z%22/%3E %3Cpath d=%22M92 14l-26 40c-2 3 1 6 4 4l40-26%22/%3E%3Cpath d=%22M110 32l-6-6%22/%3E%3Cpath d=%22M104 26c2-6 6-8 10-8M110 32c6-2 8-6 8-10M107 29l9-9%22/%3E%3Cpath d=%22M80 40l4 4M74 48l4 4M88 32l4 4%22/%3E %3Cpath d=%22M18 100c8-10 22-12 34-6l10-8v24l-10-8c-12 6-26 4-34-2z%22/%3E%3Ccircle cx=%2228%22 cy=%2298%22 r=%221.5%22/%3E%3Cpath d=%22M40 94c2 3 2 7 0 10%22/%3E %3Cpath d=%22M100 84c-18 0-28 14-28 30 16 0 30-10 30-28z%22/%3E%3Cpath d=%22M72 114l22-20%22/%3E %3Cpath d=%22M126 70h24v10a12 12 0 0 1-24 0z%22/%3E%3Cpath d=%22M150 72h4a4 4 0 0 1 0 8h-4%22/%3E%3Cpath d=%22M132 64c0-3 3-3 3-6M142 64c0-3 3-3 3-6%22/%3E %3Cpath d=%22M140 116c-7 0-12 10-12 18a12 12 0 0 0 24 0c0-8-5-18-12-18z%22/%3E %3Cpath d=%22M8 140h44c0 12-10 18-22 18S8 152 8 140z%22/%3E%3Cpath d=%22M22 134c0-4 4-6 8-6s8 2 8 6%22/%3E %3C/svg%3E"),
    linear-gradient(200deg, #0A9CC2 0%, #00799A 38%, #005A71 100%);
  background-size: 160px 160px, 100% 100%;
  background-repeat: repeat, no-repeat;
  box-shadow: 0 2px 6px rgba(0,105,127,.08), 0 22px 48px -12px rgba(0,70,90,.32);
}
/* Wzór ma być ledwie widoczny — kreska 2 px na bieli przy 11% krycia. */
.liczby { position: relative; }
/* Nakładka tonuje wzór. Jej gradient musi mieć rozmiar całego paska —
   dziedziczony rozmiar kafla (160 px) powtarzał gradient i u dołu paska
   zaczynał się drugi, jasny pas, wyglądający jak ucięty cień. */
.liczby::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(200deg, #0A9CC2 0%, #00799A 38%, #005A71 100%) no-repeat;
  background-size: 100% 100%;
  opacity: .89;
}
.liczba {
  position: relative; z-index: 1;
  display: grid; gap: 6px; justify-items: center; align-content: center; text-align: center;
  padding: clamp(26px, 3.4vw, 40px) 14px;
  border-left: 1px solid rgba(255,255,255,.28);
}
.liczba:first-child { border-left: 0; }
.liczba b {
  font-family: var(--krojN); font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.liczba span { font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.92); max-width: 18ch; }

@media (max-width: 900px) {
  .liczby { grid-template-columns: repeat(3, 1fr); }
  .liczba { border-left: 0; border-top: 1px solid rgba(255,255,255,.28); }
  .liczba:nth-child(-n+3) { border-top: 0; }
  .liczba:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255,255,255,.28); }
}
@media (max-width: 560px) {
  .liczby { grid-template-columns: repeat(2, 1fr); }
  .liczba, .liczba:nth-child(-n+3) { border-top: 1px solid rgba(255,255,255,.28); border-left: 0; }
  .liczba:nth-child(-n+2) { border-top: 0; }
  .liczba:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.28); }
  .liczba:last-child { grid-column: 1 / -1; border-left: 0; }
}

/* --- „O systemie": sekcja jak „About" w szablonie ------------------------
   Wyśrodkowana pigułka, duży akapit, pod nim rząd płyt: pierwsza i ostatnia
   leżą płasko, dwie środkowe (ciemna i zrzut) są przechylone i zachodzą na
   sąsiadki — dokładnie ten układ, co w Koalo. Najechanie prostuje płytę. */

.opowiesc-gora { display: grid; justify-items: center; gap: 22px; text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.opowiesc-gora .nadpis.odznaka { justify-self: center; }
.opowiesc-tekst {
  font-family: var(--krojN); font-weight: 500;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.4; letter-spacing: -.01em;
  color: var(--tekst); max-width: 44ch; margin: 0;
}

/* RZĄD PŁYT, KTÓRE NA SIEBIE ZACHODZĄ — jak w szablonie. Każda płyta ma
   27% szerokości, a od drugiej w prawo każda wjeżdża na poprzednią (ujemny
   margines). Kolejność warstw jak we wzorze: 02 leży na 01, 03 na 02 i na
   04. Dwie środkowe są przechylone (−8° i +8°) i obniżone.
   `li.plyty-srodek` ma `display: contents` — w HTML trzyma parę razem, dla
   układu jej nie ma. */
.opowiesc-plyty {
  display: flex; justify-content: center; align-items: center;
  list-style: none; margin: 0; padding: 24px 0 56px;
}
.plyty-srodek { display: contents; }

.plyta {
  flex: 0 0 27%;
  min-height: 340px;
  border-radius: var(--r-karta);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  position: relative; z-index: 1;
}
.opowiesc-plyty .plyta + .plyta,
.plyty-srodek > .plyta:first-child,
.opowiesc-plyty > .plyta:last-child { margin-left: -4%; }

.plyta.turkusowa { background: var(--pastel-turkus); }
.plyta.piaskowa  { background: var(--pastel-piasek); }
.plyta.szalwiowa { background: var(--pastel-szalwia); }
.plyta.ciemna    { background: var(--panel); color: #fff; }

.plyty-srodek > .plyta:first-child { transform: translateY(34px) rotate(-8deg); z-index: 2; box-shadow: 0 24px 48px rgba(16,52,62,.24); }
.plyty-srodek > .plyta:last-child  { transform: translateY(34px) rotate(8deg);  z-index: 3; box-shadow: 0 24px 48px rgba(46,46,46,.16); }

/* Tam, gdzie płyta leży POD sąsiadką, tekst trzyma się dalej od krawędzi. */
.opowiesc-plyty > .plyta:first-child  { padding-right: clamp(52px, 5.4vw, 68px); }
.plyty-srodek > .plyta:first-child    { padding-right: clamp(68px, 7vw, 90px); }
.opowiesc-plyty > .plyta:last-child   { padding-left:  clamp(52px, 5.4vw, 68px); }

/* Płyty stoją nieruchomo — bez reakcji na mysz (właściciel 23.09.2026:
   „kafelki mają być stabilne i nie interaktywne"). */

/* Węższe ekrany: płyty NIE zachodzą na siebie — przy nachodzeniu tekst
   jednej chował się pod drugą (właściciel 24.09.2026). Do 1240 px siatka
   2 × 2 z lekkim przechyłem środkowych, do 640 px jedna kolumna prosto. */
@media (max-width: 1240px) {
  .opowiesc-plyty { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; padding: 8px 0 16px; }
  .plyta { min-height: 0; }
  .opowiesc-plyty .plyta + .plyta,
  .plyty-srodek > .plyta:first-child,
  .opowiesc-plyty > .plyta:last-child { margin-left: 0; }
  .plyty-srodek > .plyta:first-child { transform: rotate(-1.5deg); }
  .plyty-srodek > .plyta:last-child  { transform: rotate(1.5deg); }
  .opowiesc-plyty > .plyta:first-child, .plyty-srodek > .plyta:first-child,
  .opowiesc-plyty > .plyta:last-child { padding: clamp(22px, 2.6vw, 28px); }
}
@media (max-width: 640px) {
  .opowiesc-plyty { grid-template-columns: 1fr; gap: 16px; padding: 0; }
  .plyty-srodek > .plyta { transform: none; }
}

.plyta-liczba {
  font-family: var(--krojN); font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.03em;
  color: var(--turkus-ciemny);
}
.plyta.ciemna .plyta-liczba { color: #fff; }
.plyta.piaskowa .plyta-liczba { color: #8A5C12; }
.plyta.szalwiowa .plyta-liczba { color: #2F6B55; }

.plyta-dol h3 {
  font-family: var(--krojN); font-size: 1.2rem; font-weight: 600; color: var(--tekst);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(46,46,46,.18);
}
.plyta-dol p { font-size: 15px; color: var(--tekst-tresc); margin: 0; }
.plyta.ciemna .plyta-dol h3 { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.plyta.ciemna .plyta-dol p { color: var(--tresc-ciemna); }


/* --- kroki -------------------------------------------------------------- */

.kroki { counter-reset: krok; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kroki li {
  counter-increment: krok;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  background: var(--tlo);
  border-radius: var(--r-duza);
  padding: 22px 24px;
  transition: background-color var(--przejscie);
}
.sekcja.wyrozniona .kroki li { background: var(--tlo); }
.kroki li:hover { background: var(--pastel-turkus); }
.kroki li::before {
  content: counter(krok, decimal-leading-zero);
  font-family: var(--krojN); font-size: 1.3rem; font-weight: 600; color: var(--turkus);
}
.kroki strong { display: block; font-family: var(--krojN); font-size: 1.12rem; font-weight: 600; color: var(--tekst); margin-bottom: 4px; }
.kroki .opis { display: block; font-size: 16px; color: var(--tekst-tresc); }
@media (max-width: 560px) { .kroki li { grid-template-columns: 1fr; gap: 8px; } }

/* --- podgląd dnia (kolumna obok nagłówka) ------------------------------- */

.dzien {
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-karta);
  padding: 8px; box-shadow: var(--cien-karta);
}
.dzien-gora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px 12px; }
.dzien-gora b { font-family: var(--krojN); font-size: 15px; color: var(--tekst); font-weight: 600; }
.dzien-gora .suma { font-family: var(--krojC); font-size: 13px; color: var(--tekst-slaby); }
.posilek {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 18px; border-radius: var(--r-duza);
  transition: background-color var(--przejscie);
}
.posilek:hover { background: var(--pastel-turkus); }
.posilek .godzina { font-family: var(--krojC); font-size: 13px; color: var(--turkus); font-weight: 600; }
.posilek .nazwa { font-size: 15px; color: var(--tekst); line-height: 1.3; }
.posilek .nazwa small { display: block; font-size: 12px; color: var(--tekst-slaby); }
.posilek .kcal { font-family: var(--krojC); font-size: 13px; color: var(--tekst-tresc); white-space: nowrap; }
.dzien-dol { padding: 14px 18px 12px; display: grid; gap: 8px; }
.makro { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--szarosc); }
.makro i { display: block; height: 100%; }
.makro .b { background: var(--dane-1); }
.makro .t { background: var(--dane-2); }
.makro .w { background: var(--dane-3); }
.makro-opis { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--krojC); font-size: 12px; color: var(--tekst-slaby); }
.makro-opis span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: 6px; }
.makro-opis .b::before { background: var(--dane-1); }
.makro-opis .t::before { background: var(--dane-2); }
.makro-opis .w::before { background: var(--dane-3); }

/* --- słownik, tabele, cytat, fazy -------------------------------------- */

.slownik { display: grid; gap: 0; background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-karta); overflow: hidden; margin: 0; }
.slownik > div { background: var(--biel); padding: 18px 24px; display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: baseline; border-bottom: 1px solid var(--linia); }
.slownik > div:last-child { border-bottom: 0; }
.slownik dt { font-family: var(--krojC); font-size: 14px; font-weight: 600; color: var(--turkus); }
.slownik dd { margin: 0; font-size: 15px; color: var(--tekst-tresc); line-height: 1.5; }
@media (max-width: 520px) { .slownik > div { grid-template-columns: 1fr; gap: 4px; } }

.przewijak { overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--r-karta); background: var(--biel); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linia); }
th { font-family: var(--krojC); font-size: 13px; font-weight: 600; color: var(--tekst); background: var(--tlo); }
tr:last-child td { border-bottom: 0; }
td.brak { color: var(--tekst-slaby); }
td.jest { color: var(--turkus-ciemny); font-weight: 600; }

.cytat {
  border-left: 3px solid var(--turkus);
  padding: 6px 0 6px 22px;
  font-family: var(--krojN);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.25;
  color: var(--tekst); max-width: 34ch;
}

.faza, .faza.jedna, .faza.dwa, .faza.trzy {
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-karta);
  padding: clamp(22px, 2.6vw, 28px); display: grid; gap: 10px; align-content: start;
}
.faza.jedna { background: var(--pastel-turkus);  border-color: transparent; }
.faza.dwa   { background: var(--pastel-piasek);  border-color: transparent; }
.faza.trzy  { background: var(--pastel-szalwia); border-color: transparent; }
.faza .etap { font-family: var(--krojC); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--turkus-ciemny); }
.faza h3 { font-size: 1.25rem; color: var(--tekst); }
.faza p { font-size: 16px; color: var(--tekst-tresc); }

/* --- zrzuty panelu ------------------------------------------------------ */

.zrzuty { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.zrzut {
  display: grid; gap: 12px;
  background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-karta);
  padding: 14px; overflow: hidden;
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
.zrzut:hover { transform: translateY(-4px); box-shadow: var(--cien-karta); }
.zrzut img { border-radius: var(--r-duza); border: 1px solid var(--linia); }
.zrzut figcaption, .zrzut .opis { font-size: 14px; color: var(--tekst-slaby); padding: 0 6px 6px; }

/* --- FAQ (24.09.2026): jeden układ na wszystkich stronach ---------------
   Jak we wzorze: na środku mały napis z kwadracikiem, duży tytuł i zdanie,
   pod spodem jedna kolumna jasnych kart. Pytanie większą czcionką, po prawej
   kółko ze strzałką w dół — po otwarciu obraca się i wypełnia turkusem.
   Otwarte zostaje jedno pytanie naraz (skrypt na dole strony). Karty stoją. */

.faq-gora { display: grid; justify-items: center; gap: 14px; text-align: center; margin: 0 auto clamp(32px, 4.5vw, 52px); max-width: 60ch; }
.faq-gora .tytul-2 { max-width: 22ch; }
.faq-nadpis { display: inline-flex; align-items: center; gap: 8px; }
.faq-nadpis::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }

/* Nadpis nad nagłówkiem sekcji — sam tekst, bez pigułki w tle
   (właściciel 23.09.2026: „usuń w każdym te obramowania"). */
.nadpis.odznaka { justify-self: start; }

/* Przycisk z kółkiem i strzałką w środku. */
.przycisk.ze-strzalka { justify-self: start; padding-right: 8px; gap: 14px; }
.przycisk .strzalka {
  width: 34px; height: 34px; border-radius: 99px; flex: 0 0 auto;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088AA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform var(--przejscie);
}
.przycisk.ze-strzalka:hover .strzalka { transform: rotate(45deg); }

.faq { display: grid; gap: 16px; max-width: 1080px; margin-inline: auto; }
.faq-dol { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

.faq details { background: #F4F4F0; border-radius: 18px; }
.sekcja.wyrozniona .faq details { background: #F6F6F3; }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  list-style: none; cursor: pointer;
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  font-family: var(--krojN); font-size: clamp(1.08rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.3;
  color: var(--panel);
}
.faq summary::-webkit-details-marker { display: none; }
/* kółko ze strzałką w dół, po prawej */
.faq summary::after {
  content: ''; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid #D4D9DB; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310343E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform var(--przejscie), background-color var(--przejscie), border-color var(--przejscie);
}
.faq details[open] summary::after {
  transform: rotate(180deg); border-color: var(--turkus);
  background-color: var(--turkus);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}
.faq summary:hover::after { border-color: var(--turkus); }
.faq summary:focus-visible { outline: 2px solid var(--turkus); outline-offset: 2px; border-radius: 18px; }

.faq details > div {
  padding: 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
  font-size: 16px; line-height: 1.6; color: var(--tekst-tresc); max-width: 80ch;
}
.faq details[open] > div { animation: faq-rozwin .34s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-rozwin {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .faq summary::after { width: 40px; height: 40px; background-size: 18px; }
}

/* --- stopka: ciemna płyta jak w szablonie ------------------------------ */

.stopka { padding: 0 0 36px; margin-top: clamp(40px, 6vw, 80px); border: 0; }

.stopka-plyta {
  background: var(--panel);
  color: var(--na-ciemnym);
  border-radius: var(--r-karta);
  padding: clamp(32px, 5vw, 64px);
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}
@media (max-width: 900px) { .stopka-plyta { grid-template-columns: 1fr; } }

.stopka-lewa { display: grid; gap: 32px; align-content: start; }
.stopka-plyta .tytul-2 { color: var(--na-ciemnym); max-width: 18ch; }

.stopka-w { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; }
.stopka h4 { font-family: var(--krojC); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7FD0E4; margin: 0 0 12px; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stopka a { color: rgba(255,255,255,.86); transition: color var(--przejscie); }
.stopka a:hover { color: #fff; }

.stopka-adresy { display: grid; gap: 10px; }
.stopka .wskaz { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,.78); }
.strzalka-mala {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FD0E4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/14px no-repeat;
}

.stopka-prawa { display: grid; gap: 18px; align-content: start; justify-items: start; }
.stopka-zachęta { font-family: var(--krojN); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; color: #fff; margin: 0; max-width: 18ch; line-height: 1.2; }
.stopka-prawa .przycisk.glowny { background: #fff; color: var(--panel); box-shadow: none; }
.stopka-prawa .przycisk.glowny:hover { background: var(--pastel-turkus); color: var(--panel); }
.stopka-prawa .przycisk .strzalka { background-color: var(--panel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); }

.stopka-stopka {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding: 28px 8px 0;
}
.stopka-stopka .znak img { height: 26px; width: auto; }
.stopka-stopka .drobne { color: var(--tekst-slaby); }

.ukryte { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===========================================================================
   ANIMACJE
   Szablon Koalo wprowadza treść przy przewijaniu: sekcja pojawia się
   z lekkim uniesieniem, karty jedna po drugiej. Robimy to samo bez
   biblioteki — `IntersectionObserver` dokłada klasę `widoczne`
   (skrypt na dole każdej strony), CSS robi resztę.

   Kto ustawił w systemie „ogranicz animacje", dostaje stronę bez ruchu.
   =========================================================================== */

/* Ukrycie dotyczy WYLACZNIE tego, co lezy pod pierwszym ekranem: znacznik
   `data-wejscie` dokłada skrypt tylko takim elementom. Nagłówek widoczny od
   razu po wejściu na stronę nigdy nie miga i nie czeka na JavaScript. */
[data-wejscie] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--zwloka, 0ms);
}
[data-wejscie].widoczne { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-wejscie] { opacity: 1; transform: none; }
}

@media print {
  .pasek, .przyciski { display: none; }
  body { background: #fff; }
  .sekcja { padding: 16px 0; }
}