/* =========================================================
   DIABEBUDDY by Natashka — Global Stylesheet
   [REBUILD 2026-07-20] Paleta jasna zostaje (Bone zamiast czystej bieli —
   cieplejszy, bardziej ludzki odcień tła), różowy #FF3D8F + fioletowy
   #9B5DE5 BEZ ZMIAN (ustalona tożsamość marki z 19.07). Typografia:
   Bebas Neue → Bricolage Grotesque (nagłówki, mocny grotesk o wyrazistym
   charakterze), + JetBrains Mono do liczb/danych/etykiet (świadome
   nawiązanie do odczytu glukometru/CGM).
   [FIX 2026-07-20, feedback klientki] Linia-sygnatura (SVG "linia-zapis"
   biegnąca przez całą stronę) USUNIĘTA CAŁKOWICIE — bezpośredni feedback:
   "ten pasek postępu przewijania jest paskudny". Kierunek zmienia się na
   gęstszą, bardziej "appkową" wizualnie stronę (floating fact-cards,
   kolorowe akcenty, więcej zdjęć/ikon) inspirowaną przesłanym referencyjnym
   mockiem, zamiast edytorialskiej ciszy z jednym sygnaturowym elementem.
   ========================================================= */

/* ---------------------------------------------------------
   TOKENY
   --------------------------------------------------------- */
:root {
  /* Bone — ciepły, przełamany biel. Różnica względem czystej bieli jest
     celowo subtelna (nie kremowy-terakotowy AI-domyślny look — patrz
     krytyka w briefie), ale wystarcza, żeby strona przestała czytać się
     jak "apka" i zaczęła czytać się jak coś zaprojektowanego. */
  --bg:          #FAF6F2;
  --bg-2:        #FBEEE7; /* cieplejszy różowy odcień — naprzemienne sekcje */
  --bg-3:        #F3ECF6; /* cieplejszy fioletowy odcień — karty */
  --text:        #201A22;
  --text-muted:  #6E6675;
  --accent:      #FF3D8F;
  --secondary:      #9B5DE5;
  --secondary-dark: #7A3FC0;
  /* #FF3D8F na jasnym tle daje ~3.3:1 — poniżej progu WCAG AA (4.5:1) dla
     drobnego tekstu. --accent zostaje jasny/żywy do dużych liczb, ikon,
     obwódek i gradientów (spełniają próg 3:1 dla dużego tekstu/grafiki).
     --accent-text to głębszy róż używany WYŁĄCZNIE tam, gdzie akcent jest
     małym/normalnym tekstem lub tłem przycisku z białym napisem. */
  --accent-text: #C2185B;
  --accent-dark: #9E1350;
  --border:      rgba(32,26,34,0.08);
  /* Bricolage Grotesque zastępuje Bebas Neue jako główny nagłówek — mocny,
     geometryczny grotesk z wyrazistym charakterem, z optical sizing (auto). Bebas Neue
     była jednym z głównych sygnałów "generyczny szablon siłowni" —
     usunięta z tokenów i z fonts.css (WP)/Google Fonts linku (statyczny). */
  --font-head:   'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:   'DM Sans', sans-serif;
  /* Utility/dane — używana WYŁĄCZNIE tam, gdzie pojawiają się liczby/dane
     (ceny, fakty, numeracja procesu, telefon, etykiety-eyebrow) — nigdy
     jako trzeci styl dekoracyjny obok Bricolage Grotesque. */
  --font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --max-w:       1180px;
  --r:           8px;
  /* Border-radius scale */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;
  /* Overlay opacity scale — scrim CIEMNY celowo, używany WYŁĄCZNIE na
     zdjęciach (hero, cytat "o mnie") dla czytelności jasnego tekstu na
     zdjęciu; niezależny od jasnej palety reszty strony. */
  --overlay-xs: rgba(20,16,24,0.3);
  --overlay-sm: rgba(20,16,24,0.55);
  --overlay-md: rgba(20,16,24,0.75);
  --overlay-lg: rgba(20,16,24,0.88);
  --overlay-xl: rgba(20,16,24,0.97);
  --text-ghost: rgba(31,27,36,0.04);
  --text-faint: rgba(31,27,36,0.12);
  --text-dim:   rgba(31,27,36,0.2);
  /* Tekst na zdjęciu — hero i cytat "o mnie" leżą na przyciemnionym zdjęciu,
     więc zostają jasne niezależnie od globalnie ciemnego --text. */
  --on-photo:       #FFFFF5;
  --on-photo-muted: rgba(255,255,245,0.8);
}

/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  /* !important na background celowo: Blocksy drukuje DODATKOWY inline
     blok <style id="ct-main-styles-inline-css"> bezpośrednio w <head>,
     który ląduje w dokumencie PO naszym linkowanym style.css i zawiera
     własną regułę "body{background-color:...}" (jasny, domyślny kolor
     Blocksy). Ten sam selektor "body", ta sama specyficzność — a przy
     remisie wygrywa reguła, która jest PÓŹNIEJ w dokumencie, więc mimo
     wcześniejszej poprawki kolejności ładowania arkuszy (priorytet 20
     w wp_enqueue_scripts) to Blocksy i tak wygrywał tło body. Sekcje
     z własnym jawnym tłem (.hero, .section-bg-dark, footer) są bezpieczne,
     ale sekcje bez lokalnego tła (np. "moja historia") pokazywały jasne
     tło Blocksy, na którym nasz (poprawny) jasny kolor tekstu stawał się
     niewidoczny. !important gwarantuje wygraną niezależnie od tego, gdzie
     i kiedy Blocksy wstrzykuje swoje inline style. */
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Blocksy (rodzic) deklaruje WPROST h1{color:...}...h6{color:...} na
   samych selektorach elementów. Nasze nagłówki (.hero-h1, zwykłe h2 w
   sekcjach itd.) nigdy nie ustawiały własnego "color" — polegały na
   dziedziczeniu z body/sekcji nadrzędnej. Jawnie zadeklarowana reguła
   ZAWSZE wygrywa z dziedziczeniem, niezależnie od kolejności ładowania
   arkuszy czy specyficzności selektorów — więc kolor Blocksy nadpisywał
   nasz nawet po poprawce kolejności CSS. Rozwiązanie: wymusić z powrotem
   dziedziczenie jawną regułą "color: inherit", żeby nagłówki brały kolor
   z najbliższego kontekstu (sekcja jasna/ciemna), tak jak było zamierzone. */
h1, h2, h3, h4, h5, h6 { color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ---------------------------------------------------------
   ACCESSIBILITY — skip link (SOP sekcja 7)
   --------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only--focusable:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--accent-text);
  color: #fff;
  font-weight: 600;
  border-radius: var(--r-sm);
  z-index: 9999;
}

/* ---------------------------------------------------------
   TYPOGRAFIA
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-transform: none;
}
/* [REBUILD 2026-07-20] Bricolage Grotesque zastępuje Bebas Neue — wersaliki na dużym,
   mocnym groteskie (poprzednie h1{text-transform:uppercase}) robią się
   ciężkie do czytania i "krzykliwe" przy tej skali; mixed-case w dużym
   rozmiarze to edytorialski, nie fitness-template, sygnał. Waga wizualna
   utrzymana przez font-weight (700) + rozmiar, nie przez capsy. */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3, h4 { font-weight: 500; }
h1 { font-size: clamp(2.6rem, 11vw, 6.4rem); }
h2 { font-size: clamp(2rem, 6.4vw, 4.2rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2.4rem); }
h4 { font-size: clamp(1.15rem, 3vw, 1.6rem); }
p  { font-size: clamp(0.9rem, 2.2vw, 1.05rem); color: var(--text); text-wrap: pretty; }

.accent { color: var(--accent); }
/* [FIX 2026-07-21, feedback klientki] Akcent w treści (nie w nagłówku) —
   ten sam zabieg co "schudnąć"/"nauczę" w hero (.hero-h1-italic), do
   zastępowania pogrubienia tam, gdzie trzeba postawić nacisk w akapicie. */
.accent-italic { color: var(--accent); font-style: italic; }
/* [FIX 2026-07-21 #2] Wariant BEZ różu — tylko dla "Dlaczego właśnie
   DIABEBUDDY?" (klientka chciała standardowy kolor wyłącznie tam,
   reszta .accent-italic w treści zostaje różowa jak wcześniej). */
.text-italic { color: var(--text); font-style: italic; }
.muted  { color: var(--text-muted); }

/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* [FIX 2026-07-24, feedback klientki "odstępy między sekcjami za duże"]
   5.5rem/9rem→3.5rem/5.5rem — cofnięcie w drugą stronę względem audytu
   z 2026-07-20 (patrz komentarz niżej), tym razem na wyraźne życzenie
   klientki, nie inicjatywę audytu. */
section { padding: 3.5rem 0; }
/* [FIX 2026-07-21, "wygląda jak blok tekstu"] Duży, blado wydrukowany numer
   sekcji w tle — jedyny wizualny "oddech" dla sekcji, które są czystym
   tekstem (Hej jestem Natashka, Trening dopasowany, Nie zostaniesz sama,
   Żywienie — 4 z 9 sekcji nie mają ani zdjęcia, ani karty). Nie zmienia
   treści (którą trzymamy jak najbliżej dokumentu klientki), tylko dokłada
   realną warstwę designu na sekcjach, które inaczej są jednym blokiem
   akapitów od góry do dołu ekranu. */
section[data-num] { position: relative; }
section[data-num] > .container { position: relative; z-index: 1; }
section[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: 2.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(6rem, 16vw, 12rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
@media (max-width: 640px) { section[data-num]::before { display: none; } }
/* [FIX 2026-07-20, wg audytu wizualnego] 8.5rem→9rem (136px→144px) —
   audyt trafnie wskazał, że stronie brakowało "oddechu" między sekcjami;
   to systemowa zmiana dla WSZYSTKICH sekcji na desktopie, nie punktowa. */
@media (min-width: 768px) { section { padding: 5.5rem 0; } }
/* [Premium Refresh 2026-07-20, pkt 4] Więcej powietrza między blokami wewnątrz
   sekcji — mt-2 zostaje (małe odstępy śródsekcyjne), mt-3 dla większych skoków
   (np. między intro historii a osią czasu). */
.mt-3 { margin-top: 2.75rem; }

/* [REBUILD 2026-07-20] Eyebrow/etykiety sekcji na mono — spójna reguła
   sitewide: Bricolage Grotesque = słowa/nagłówki, DM Sans = tekst, JetBrains Mono =
   etykiety/dane. Ta klasa jest współdzielona przez WSZYSTKIE podstrony,
   więc zmiana "spływa" automatycznie (propagacja tokenów). */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

/* [FIX 2026-07-20, wg audytu wizualnego] SYGNATURA SEKCJI — numeracja +
   cienka pionowa linia, inspirowane edytorialskim systemem magazynów.
   Wypełnia lukę po usuniętej linii-zapis (odrzucona przez klientkę jako
   "paskudna") — bezpieczniejszy, statyczny odpowiednik: bez animacji,
   bez ryzyka, że coś "pełznie" po stronie, tylko spójny rytm 01→09
   prowadzący przez główną narrację strony głównej. Używane WYŁĄCZNIE
   na dziewięciu głównych sekcjach treści (nie na FAQ/pasku faktów/CTA —
   te są zamknięciem, nie częścią numerowanej narracji). */
.section-signature {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.section-signature .section-label { margin-bottom: 0; }
.section-number {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
}
.section-signature-line {
  width: 64px;
  height: 2px;
  background: var(--text);
  opacity: 0.2;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   PRZYCISKI
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  min-height: 44px;
}
.btn:active { transform: scale(0.96); }
/* [FIX 2026-07-20, wg audytu wizualnego] Lekkie uniesienie przy hover —
   przyciski wcześniej reagowały tylko na :active (kliknięcie), bez żadnej
   informacji zwrotnej na najechanie kursorem na desktopie. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn-primary,
.btn-primary:visited {
  background: var(--accent-text);
  color: #fff;
  border-color: var(--accent-text);
}
/* [FIX 2026-07-21, feedback klientki "hover świeci na niebiesko"] Bez
   :visited/:hover jawnie ustawiających color, przeglądarka potrafiła
   sięgnąć po domyślny niebieski kolor odwiedzonego linku zamiast trzymać
   biały tekst przycisku. */
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: rgba(31,27,36,0.35);
}
.btn-outline:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.btn-ghost {
  background: transparent;
  color: var(--accent-text);
  border-color: var(--accent-text);
}
.btn-ghost:hover {
  background: var(--accent-text);
  color: #fff;
}

/* ---------------------------------------------------------
   NAWIGACJA
   --------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

/* ---------------------------------------------------------
   NAV — WARIANT "NA CIEMNYM HERO" (start transparentny)
   Strony z pełnoekranowym, ciemnym zdjęciem pod nawigacją
   (home, plan-treningowy-online) startują
   z przezroczystym paskiem + jasnym tekstem, żeby wtopić się
   w hero zamiast tworzyć twardą białą belkę na zdjęciu.
   JS (main.js → initNav) dodaje .nav-scrolled po >60px scrolla —
   te reguły są napisane PO .nav--on-dark, więc przy tej samej
   specyficzności selektora .nav-scrolled naturalnie wygrywa
   w kaskadzie, bez potrzeby !important.
   --------------------------------------------------------- */
.nav.nav--on-dark {
  background: transparent;
  border-bottom-color: transparent;
}
.nav.nav--on-dark .nav-logo-diabe { color: #fff; }
.nav.nav--on-dark .nav-logo-sub { color: rgba(255,255,245,0.75); }
.nav.nav--on-dark .nav-links a { color: rgba(255,255,245,0.85); }
.nav.nav--on-dark .nav-links a:hover,
.nav.nav--on-dark .nav-links a.active { color: #fff; }
.nav.nav--on-dark .lang-btn { color: rgba(255,255,245,0.7); }
.nav.nav--on-dark .lang-btn.active { color: var(--accent); }
.nav.nav--on-dark .lang-sep { color: rgba(255,255,245,0.3); }
.nav.nav--on-dark .nav-hamburger span { background: #fff; }
.nav.nav--on-dark .btn-outline { color: var(--on-photo); border-color: rgba(255,255,245,0.5); }
.nav.nav--on-dark .btn-outline:hover { color: var(--accent); border-color: var(--accent); }

/* Po przewinięciu >60px (patrz main.js) — powrót do stałego,
   czytelnego paska niezależnie od wariantu startowego. */
.nav.nav-scrolled {
  background: rgba(255,255,255,0.85);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 24px rgba(31,27,36,0.06);
}
.nav.nav-scrolled .nav-logo-diabe { color: var(--text); }
.nav.nav-scrolled .nav-logo-sub { color: var(--text-muted); }
.nav.nav-scrolled .nav-links a { color: var(--text-muted); }
.nav.nav-scrolled .nav-links a:hover,
.nav.nav-scrolled .nav-links a.active { color: var(--text); }
.nav.nav-scrolled .lang-btn { color: var(--text-muted); }
.nav.nav-scrolled .lang-btn.active { color: var(--accent-text); }
.nav.nav-scrolled .lang-sep { color: var(--border); }
.nav.nav-scrolled .nav-hamburger span { background: var(--text); }
.nav.nav-scrolled .btn-outline { color: var(--text); border-color: rgba(31,27,36,0.35); }
.nav.nav-scrolled .btn-outline:hover { color: var(--accent-text); border-color: var(--accent-text); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* .nav-logo-img — logo w formie obrazka (dalej używany w stopce,
   patrz .footer-logo). W navbarze logo jest teraz tekstowe
   (.nav-logo-text), bo tylko tak da się utrzymać fragment "BUDDY"
   zawsze różowy niezależnie od stanu paska (na ciemnym/po scrollu) —
   płaski obrazek + filter nie pozwalał pokolorować jego części. */
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.nav-logo-text {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-logo-diabe { color: var(--text); transition: color 0.35s ease; }
/* Kolor marki — zawsze różowy, w KAŻDYM stanie navbara (ciemny/transparentny
   hero, po scrollu). Klientka chce ten fragment logo stały, niezależnie
   od tła paska nawigacji. Nie dodawać tu żadnych override'ów w .nav--on-dark
   / .nav-scrolled. */
.nav-logo-buddy { color: var(--accent-text); }
.nav-logo-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 2px;
  transition: color 0.35s ease;
}

/* desktop links */
.nav-links {
  display: none;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* CTA w nav ukryty na mobile — jest w nav-mobile */
.nav-right .btn {
  display: none;
}
@media (min-width: 900px) {
  .nav-right .btn { display: inline-flex; }
}

/* przełącznik języka */
.lang-switch {
  display: none;
  gap: 0.25rem;
  align-items: center;
}
@media (min-width: 900px) { .lang-switch { display: flex; } }
.lang-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  transition: color 0.15s;
}
.lang-btn.active { color: var(--accent-text); }
.lang-btn:hover { color: var(--text); }
.lang-sep { color: var(--border); font-size: 0.7rem; }

/* hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}
@media (min-width: 900px) { .nav-hamburger { display: none; } }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu overlay */
.nav-mobile {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 899;
  flex-direction: column;
  padding: 1.5rem 1.25rem;
  gap: 0.25rem;
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
/* [FIX 2026-07-21, feedback klientki] 2.2rem (35px) na link + 1rem odstępu
   między nimi robiło z menu coś w rodzaju plakatu — nieproporcjonalnie
   wielkie jak na listę 5 linków. Mniejsza, bardziej standardowa skala. */
.nav-mobile a {
  font-family: var(--font-head);
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.nav-mobile a:hover { color: var(--accent); }
.nav-mobile .mobile-lang {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.nav-mobile .lang-btn { font-size: 0.9rem; }
.nav-mobile .nav-mobile-cta { margin-top: auto; }

/* ---------------------------------------------------------
   PAGE SPACER (pod fixed nav)
   --------------------------------------------------------- */
.page-top { padding-top: 64px; }

/* ---------------------------------------------------------
   HERO — O MNIE
   --------------------------------------------------------- */
/* [FIX 2026-07-21, feedback klientki "hero jest ciężki"] Pełnoekranowe,
   przyciemnione zdjęcie zastąpione lekkim, jasnym tłem marki + wycinanką
   Natashki (bez tła) po prawej — czytelny, "oddychający" hero zamiast
   ciemnej, fotograficznej ściany. Tekst przechodzi z jasnego-na-ciemnym
   (--on-photo) na ciemny-na-jasnym (--text), spójnie z resztą strony. */
.hero {
  position: relative;
  /* [FIX 2026-07-21 #4, feedback klientki "odstęp nie został usunięty"]
     Znaleziona prawdziwa przyczyna: .hero (7.5rem/120px top) I
     .hero-scroll-content (2rem/32px top) NAKŁADAŁY SIĘ — razem 152px nad
     treścią, z czego .nav-inner (64px, position:fixed) zasłania tylko
     część, zostawiając ~88px widocznej pustki. Poprzednie poprawki (svh →
     min-height → padding) nigdy nie usunęły tego drugiego, ukrytego
     źródła paddingu. Teraz .hero jest JEDYNYM źródłem górnego odstępu —
     .hero-scroll-content ma zerowy padding-top (patrz niżej). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 0 4rem;
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
}
@media (max-width: 767px) {
  .hero { padding: 6.5rem 0 3rem; }
}
/* [FIX 2026-07-21, "w złym miejscu"] Źródłowe zdjęcie jest poziome (1920×1080,
   Natashka siedzi nisko i szeroko) — poprzednie pudełko było wysokie i
   przypięte do dołu sekcji, więc object-fit:contain kurczył obraz do
   szerokości pudełka, zostawiając ogromną pustą przestrzeń nad nią i
   spychając ją w mały, obcięty róg. Teraz pudełko ma wysokość wynikającą
   wprost z proporcji zdjęcia (width: 100% → height: auto) i jest
   wyśrodkowane w pionie tak samo jak blok tekstu — jedna spójna kompozycja
   zamiast tekstu na środku i sylwetki przyklejonej w rogu. */
/* [FIX 2026-07-24, feedback klientki "pamiętaj o mobile"] Wcześniej
   .hero-cutout-wrap miało display:none poniżej 768px — na telefonie hero
   był czystym tekstem, sylwetka nie pokazywała się wcale. Teraz mobile-first:
   bazowe reguły renderują mniejszą, wyśrodkowaną wersję NAD tekstem (w
   normalnym flow, position:relative — .hero-cutout-wrap jest w markupie
   przed .hero-scroll-content, więc w .hero{display:flex;flex-direction:column}
   wyląduje jako pierwszy wiersz), dopiero od 768px wraca position:absolute
   po prawej, tak jak dotychczas. */
.hero-cutout-wrap {
  display: block;
  position: relative;
  width: 68%;
  max-width: 300px;
  margin: 0 auto 1.25rem;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 768px) {
  /* [FIX 2026-07-24 #2, feedback klientki "obrazek hero nadal nie
     dostosowany"] Dwie kolejne próby z magicznymi %/calc (patrz historia w
     .claude/agent-memory) wciąż wymagały zgadywania rozmiaru pod konkretne
     zdjęcie. Zamiast tego .hero-cutout-wrap przeniesiony w HTML DO ŚRODKA
     .hero-scroll-content, obok nowego wrappera .hero-text-col (patrz niżej)
     — zajmuje kolumnę 2 siatki grida wprost, position:absolute odrzucony
     całkowicie. Rozmiar = szerokość kolumny "1fr" (566px w kontenerze
     1180px, skaluje się w dół razem z tekstem poniżej tego progu) —
     nachodzenie na kolumnę tekstu jest teraz strukturalnie niemożliwe, nie
     tylko "policzone, żeby się mieściło" dla jednej konkretnej szerokości
     ekranu. */
    margin: 0;
    width: 100%;
  }
}
/* Miękka, kolorowa poświata za sylwetką (accent/secondary, rozmyta) imituje
   światło otoczenia i tonuje krawędź wycięcia, żeby nie wyglądała na
   wyklejoną na płaskim tle. [Sprawdzone 2026-07-22 przy zmianie hero-cutout.png:
   inset jest w %, więc skaluje się automatycznie z nowym rozmiarem
   .hero-cutout-wrap — nie wymagało zmiany.] */
.hero-cutout-wrap::before {
  content: '';
  position: absolute;
  inset: -14% -8%;
  background: radial-gradient(closest-side, rgba(255,61,143,0.24), rgba(155,93,229,0.16) 55%, transparent 78%);
  filter: blur(48px);
  z-index: 0;
}
/* [USUNIĘTE 2026-07-22, feedback klientki "usuń cień"] Spłaszczony cień
   "dotyku" pod sylwetką (.hero-cutout-wrap::after) na nowym zdjęciu
   wyglądał jak brzydka szara smuga zamiast subtelnego cienia — usunięty
   całkowicie, nie tylko ściszony. */
.hero-cutout {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 28px rgba(32,26,34,0.14));
}
.hero-scroll-content {
  position: relative;
  z-index: 10;
  /* Bez górnego paddingu — .hero (patrz wyżej) jest teraz jedynym źródłem
     odstępu od nawigacji, żeby te dwie wartości znów się nie sumowały. */
  padding: 0 1.25rem calc(2.25rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
@media (min-width: 768px) {
  .hero-scroll-content {
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
    display: grid;
    /* [FIX 2026-07-21] 46%→52% — kolumna tekstu potrzebowała więcej miejsca
       (patrz .hero-h1 niżej: bug "samodzielni / e."). */
    grid-template-columns: 52% 1fr;
    align-items: center;
  }
  /* [FIX 2026-07-24 #2, poprawka] .hero-text-col grupuje WSZYSTKIE elementy
     tekstowe w jeden element grida (zamiast każdy osobno w kolumnie 1) —
     bez tego "grid-row: 1 / -1" na .hero-cutout-wrap nie miałoby czego
     rozpiąć (siatka niejawna/implicit nie ma zdefiniowanej liczby wierszy,
     więc -1 nie wskazywałoby ostatniego wiersza tekstu). Teraz są dokładnie
     dwa elementy grida w jednym, wspólnym wierszu — .hero-text-col w
     kolumnie 1, .hero-cutout-wrap w kolumnie 2 — więc align-items:center
     wyżej wyśrodkowuje obraz względem CAŁEJ wysokości bloku tekstu bez
     żadnych sztuczek z grid-row. */
  .hero-text-col { grid-column: 1; }
  .hero-cutout-wrap { grid-column: 2; }
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --accent na jasnym tle nie spełnia WCAG AA dla drobnego tekstu —
     --accent-text (głębszy róż) to konwencja używana sitewide (patrz
     .section-label) dla eyebrow/etykiet na jasnym tle. */
  color: var(--accent-text);
  margin-bottom: 0.75rem;
}
.hero-h1 {
  /* [FIX 2026-07-21] Ręczne <br> zastąpione naturalnym zawijaniem +
     text-wrap:balance — poprzednie sztywne złamania ("Nauczę Cię /
     trenować / samodzielnie.") przy realnej szerokości kontenera same
     zawijały się drugi raz, zostawiając osierocone "e." na własnej
     linii. Balance rozkłada słowa równo bez ręcznego strojenia punktów
     złamania pod każdy viewport. */
  /* [FIX 2026-07-21 #3] Nagłówek zamieniony na dużo dłuższe zdanie
     ("Pomogę Ci schudnąć, wyrzeźbić sylwetkę..." — ~2.4× więcej znaków niż
     poprzedni "Nauczę Cię trenować samodzielnie."). Sufit rozmiaru obniżony
     proporcjonalnie, żeby dłuższy tekst nie zajął pionowo połowy hero. */
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  margin-bottom: 0.5rem;
  max-width: 100%;
  hyphens: none;
  color: var(--text);
  text-wrap: balance;
}
/* [FIX 2026-07-21, feedback klientki] "schudnąć" i "nauczę" wyróżnione w
   nagłówku — kursywa + różowy (.accent, spójny z akcentem używanym w
   pozostałych nagłówkach sekcji). */
.hero-h1-italic { font-style: italic; }
@media (min-width: 768px) {
  .hero-h1 {
    /* [FIX 2026-07-21, prawdziwa przyczyna sieroty "e."] 7.6vw/6.2rem skalowało
       się względem SUROWEJ szerokości ekranu, ale realna kolumna tekstu jest
       ograniczona przez --max-w (1180px) × 52% ≈ max ~610px — na bardzo
       szerokich ekranach czcionka rosła (vw) szybciej niż kolumna (capped),
       więc "samodzielnie." przestawało się mieścić i przeglądarka łamała je
       w środku słowa. Niższy sufit (4.4rem) + wolniejszy narost (5.4vw)
       trzymają najdłuższe słowo w granicach kolumny na każdej szerokości. */
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    margin-bottom: 1rem;
    /* Bez własnego max-width w ch — jedynym ograniczeniem szerokości ma
       być kolumna grida (.hero-scroll-content), żeby nie mieć dwóch
       niezależnych, potencjalnie sprzecznych limitów szerokości. */
    max-width: 100%;
  }
}
.hero-sub {
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  color: var(--text-muted);
  max-width: 36ch;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .hero-sub { margin-bottom: 2rem; }
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 599px) {
  /* Dwa CTA obok siebie na wąskim ekranie zawsze łamały się do nierównego
     drugiego wiersza (dociskając resztę treści niżej) — pełna szerokość
     + układ kolumnowy to przewidywalny, łatwy w dotyku wzorzec mobilny. */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
}
/* [FIX 2026-07-21, feedback klientki "dołożyć: o mnie"] Sekcja z historią
   T1D przeniesiona na osobną podstronę (patrz o-mnie.html) — hero
   potrzebował własnego, widocznego odnośnika do niej, nie tylko wpisu
   w nawigacji. */
.hero-story-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-story-link:hover { color: var(--accent-dark); }
.hero-scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .hero-scroll-hint { margin-top: 3rem; }
}
.hero-scroll-hint::before {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--secondary), var(--accent));
}
.scroll-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  animation: scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}
@media (max-width: 599px) {
  .hero-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-chevron { animation: none; }
}

/* ============================================================
   [PRZEBUDOWA 2026-07-20, treść wg intake/Diabebuddy teksty na
   stronę.pdf] DŁUGOFORMATOWE SEKCJE TREŚCI — wspólny system dla
   9 bloków tekstowych z dokumentu źródłowego (Hej jestem Natashka,
   Nauczę Cię trenować, Trening dopasowany, Dla kobiet na siłowni/w
   domu, Nie zostaniesz sama, Cukrzyca T1, Żywienie). Naprzemienne
   tła (.doc-bg / .doc-bg--alt) różnicują kolejne sekcje przy długim
   scrollu, bez potrzeby kart/ikon tam, gdzie tekst niesie treść sam.
   ============================================================ */
.doc-bg { background: var(--bg); }
.doc-bg--alt { background: var(--bg-2); }
.doc-block { max-width: 68ch; }
.doc-block--intro { max-width: 60ch; }
.doc-lead {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--text);
  margin-bottom: 1.25rem;
}
.doc-block p {
  /* [FIX 2026-07-20, wg audytu wizualnego] 1rem→1.0625rem (17px→~19px na
     domyślnej bazie 18px body) — długoformatowy tekst z dokumentu klientki
     czyta się swobodniej przy nieco większym rozmiarze, bliżej "premium
     editorial" skali (audyt sugerował 19px). */
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
}
.doc-block p:last-child { margin-bottom: 0; }
.doc-block strong { color: var(--text); font-weight: 600; }
.doc-block h3 {
  margin-bottom: 1rem;
}
.doc-quote {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem) !important;
  line-height: 1.25 !important;
  color: var(--text) !important;
  margin: 0.5rem 0 1.15rem !important;
}
.doc-highlight {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.3rem) !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem !important;
}
.doc-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
}
.doc-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.doc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.doc-list--quotes li { font-style: normal; color: var(--text); font-weight: 500; }

/* Układ tekst + zdjęcie (sekcje "Nauczę Cię trenować" i "Cukrzyca T1") */
.doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 860px) { .doc-layout { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } }
/* [FIX 2026-07-24, feedback klientki "powiększyć lekko zdjęcie" w sekcji
   "Nauczę Cię trenować"] Kolumna zdjęcia 0.85fr → 1fr (tekst 1.15fr → 1fr) —
   zdjęcie dostaje więcej miejsca niż domyślny .doc-layout, ale tekst
   nadal ma równą kolumnę, nie węższą niż zdjęcie. */
@media (min-width: 860px) { .doc-layout--photo-lg { grid-template-columns: 1fr 1fr; } }
#historia .doc-layout { grid-template-columns: 1fr; }
@media (min-width: 700px) { #historia .doc-layout { grid-template-columns: 0.8fr 1.2fr; gap: 2.75rem; align-items: start; } }
.doc-photo {
  position: relative;
  /* [FIX 2026-07-20, wg audytu wizualnego] 16px→28px — zdjęcia z wyraźnie
     większym zaokrągleniem niż karty/przyciski, zgodnie z zaleconą skalą
     (obrazy > karty > przyciski), premium/edytorialski szczegół. */
  border-radius: 28px;
  overflow: hidden;
  outline: 1px solid rgba(32,26,34,0.06);
  outline-offset: -1px;
}
.doc-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
/* [FIX 2026-07-23, feedback klientki "bez ramki, wtop w stronę"] Zdjęcie-
   cutout (tło przezroczyste) pływające bezpośrednio na tle sekcji, bez
   karty/zaokrąglenia/obwódki i bez przycinania do stałych proporcji —
   ten sam duch co .hero-cutout, ale bez poświaty/cienia (klientka wcześniej
   poprosiła o usunięcie cienia spod sylwetki w herze, ta sama logika
   dotyczy tu). Używać dla zdjęć-wycinanek w .doc-layout zamiast .doc-photo,
   które zakłada pełnokadrowe zdjęcie fotograficzne (jak content1/2.jpg),
   nie wycinankę. position:relative zostaje (nawet bez karty) — potrzebne
   jako punkt zaczepienia dla .doc-cutout-quote, gdyby kiedyś wrócił wariant
   nałożony na siebie (patrz sekcja "Moje podejście"). */
.doc-cutout {
  position: relative;
}
.doc-cutout img {
  width: 100%;
  height: auto;
  display: block;
}
/* [FIX 2026-07-24, klientka dostarcza teraz zdjęcia bez dodatkowego
   kadrowania pliku — dużo pustego, przezroczystego marginesu wokół
   właściwej treści (surowy eksport narzędzia do usuwania tła). Zgodnie z
   zasadą "nie edytuj plików w img/" kadrowanie robimy WYŁĄCZNIE w CSS
   (aspect-ratio + object-fit:cover), plik graficzny zostaje nietknięty.
   Kadruje tylko w pionie (dopasowuje szerokość, przycina górę/dół) — nie
   próbuje też przycinać w poziomie, żeby uniknąć kruchej matematyki
   transform/scale bez możliwości podglądu na żywo. */
.doc-cutout--crop {
  overflow: hidden;
}
.doc-cutout--crop img {
  height: 100%;
  object-fit: cover;
}
/* Sekcja 01 "Hej, jestem Natashka" — natashka-intro.png ma pusty margines
   TYLKO u góry (treść sięga do samego dołu kadru), więc kotwiczymy kadr do
   dołu. */
.doc-cutout--intro { aspect-ratio: 0.8; }
.doc-cutout--intro img { object-position: center bottom; }
/* Sekcja 02 "Nauczę Cię trenować" — natashka-metoda.png ma treść
   wyśrodkowaną z marginesem z każdej strony (góra/dół zbliżone), więc
   kotwiczymy kadr do środka. */
.doc-cutout--metoda { aspect-ratio: 0.9; }
.doc-cutout--metoda img { object-position: center center; }
/* [FIX 2026-07-21, "podstrona do zmiany"] Podopieczni — .historia-narrative-grid
   i .historia-photo używane w markupie nie miały żadnej pasującej reguły CSS,
   więc zdjęcie renderowało się jako surowy, nieprzycięty <img> (bez grida,
   bez zaokrąglenia, bez kadrowania) w jednej kolumnie na każdej szerokości —
   stąd ogromne, niedopasowane zdjęcie i wrażenie "pustki" pod nim. Te same
   wartości co .doc-layout/.doc-photo dla spójności z resztą strony. */
.historia-narrative-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 700px) { .historia-narrative-grid { grid-template-columns: 0.8fr 1.2fr; gap: 2.75rem; } }
.historia-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  outline: 1px solid rgba(32,26,34,0.06);
  outline-offset: -1px;
}
.historia-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
/* [FIX 2026-07-23, feedback klientki "usuń kartę, cytat zrób tak żeby
   pasował"] Zdjęcie w sekcji "Moje podejście" przeszło z .doc-photo (karta
   z ramką) na .doc-cutout (wycinanka bez ramki, patrz wyżej) — ciemny
   pull-quote nałożony NA zdjęcie (poprzedni wzorzec, .doc-photo-quote)
   przestał mieć sens bez karty pod spodem, więc cytat zszedł POD zdjęcie
   jako osobny, jasny blok — ten sam duch co .doc-highlight (tło --bg-3,
   pasek akcentu z lewej), nie ciemny overlay. */
.doc-cutout-quote {
  margin: 1.25rem 0 0;
  background: var(--bg-3);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 1.1rem 1.35rem;
}
/* [FIX 2026-07-24, feedback klientki "podnieść cytat"] Zdjęcie w tej
   sekcji urosło (patrz .doc-layout--photo-lg), więc domyślny margines
   1.25rem odsuwał cytat za daleko od zdjęcia. Ujemny margines podciąga go
   bliżej/lekko na zdjęcie, zamiast biernie odziedziczyć większy odstęp. */
.doc-cutout-quote--raised {
  margin-top: -0.5rem;
}
.doc-cutout-quote p {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.92rem, 1.8vw, 1.02rem);
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

/* Dwie kolumny (Dla kobiet na siłowni / Dla kobiet w domu) */
.doc-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 860px) { .doc-two-col { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
/* [FIX 2026-07-21, feedback klientki "z sekcji 4 zrób slider"] Na mobile
   dwie długie kolumny (W domu / Na siłowni) stały jedna pod drugą — dużo
   scrolla, zanim dotrzesz do drugiej. Poniżej 860px .doc-slider-track
   (ta sama klasa .doc-two-col, więc desktop dziedziczy grid bez zmian)
   zamienia się w poziomy scroll-snap slider z kropkami do przełączania. */
@media (max-width: 859px) {
  /* [FIX 2026-07-21 #2, feedback klientki "od razu wiadomo, że to slider"]
     Poprzednia wersja (pełna szerokość, bez obramowania, kropki-bez-opisu)
     na pierwszy rzut oka wyglądała jak zwykła sekcja tekstu. Dwie zmiany
     robią to jednoznaczne: 1) karta ma widoczną krawędź (tło+cień) i jest
     węższa niż ekran, więc kawałek DRUGIEJ karty "wystaje" z prawej strony
     — klasyczny, natychmiast czytelny sygnał "przesuń, jest więcej";
     2) kropki zamienione na podpisane zakładki (W domu / Na siłowni). */
  .doc-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .doc-slider-track::-webkit-scrollbar { display: none; }
  .doc-slider-slide {
    flex: 0 0 88%;
    width: 88%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #fff;
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: 0 10px 28px rgba(32,26,34,0.08);
  }
  .doc-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
  }
  .doc-slider-dot {
    padding: 0.5rem 1.15rem;
    border: 1.5px solid rgba(32,26,34,0.16);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }
  .doc-slider-dot.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
}
@media (min-width: 860px) {
  .doc-slider-dots { display: none; }
}
/* Podetykieta kolumny (Na siłowni / W domu) — bez własnej numeracji sekcji,
   bo obie kolumny należą do jednej numerowanej sekcji "04". */
.doc-sublabel {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  margin-bottom: 0.75rem;
}

/* Plakietka z faktem (T1D) na zdjęciu w sekcji "Cukrzyca T1" — reużywa
   .historia-badge (identyczny styl jak wcześniej). */

/* ---------------------------------------------------------
   SEKCJA — O MNIE HISTORIA
   --------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: stretch; }
}
.about-text p + p { margin-top: 1rem; }
.about-text strong { color: var(--accent-text); font-weight: 600; }
.about-text p { max-width: 62ch; }

.about-left {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}
.about-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 3/2;
  border-radius: var(--r-md);
}
.about-quote {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 5vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(20,16,24,1) 0%, rgba(20,16,24,0.97) 45%, rgba(20,16,24,0.6) 70%, rgba(20,16,24,0) 100%);
  color: var(--on-photo);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  margin: 0;
}
@media (min-width: 768px) {
  .about-left {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .about-photo {
    aspect-ratio: unset;
    flex: 1;
    min-height: 300px;
  }
  .about-quote {
    padding: 5rem 2rem 2.5rem;
  }
}

/* ---------------------------------------------------------
   SEKCJA — USP KARTY
   --------------------------------------------------------- */
.usp-bg { background: var(--bg-2); }
.usp-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .usp-header { gap: 4rem; }
}
.usp-header-img img {
  width: 100%;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  object-position: center top;
}
@media (min-width: 768px) {
  .usp-header-img img { aspect-ratio: 3 / 2; }
}
.usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (min-width: 600px) { .usp-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 600px) and (max-width: 899px) { .usp-card h4 { font-size: 1.4rem; } }
@media (min-width: 900px) { .usp-grid { grid-template-columns: repeat(4, 1fr); } }
.usp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 10px rgba(31,27,36,0.05);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  .usp-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(255,61,143,0.18); }
}
.usp-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 8px 20px rgba(255,61,143,0.3);
  color: #fff;
}
.usp-icon svg { width: 26px; height: 26px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.usp-icon--secondary {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  box-shadow: 0 8px 20px rgba(155,93,229,0.3);
}
.usp-card h4 {
  font-family: var(--font-head);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.usp-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }

/* ---------------------------------------------------------
   SEKCJA — LEAD MAGNET
   --------------------------------------------------------- */
.lead-magnet {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lead-magnet-inner {
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 3.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lead-magnet-inner::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,61,143,0.14) 0%, rgba(155,93,229,0.08) 55%, transparent 75%);
  pointer-events: none;
}
.lead-magnet-inner h2 { margin-bottom: 1rem; }
.lead-magnet-inner p { margin: 0 auto 2rem; max-width: 52ch; color: var(--text-muted); }
.text-readable { max-width: 62ch; }
.lead-magnet-inner .btn { font-size: 0.9rem; padding: 1rem 2.2rem; }

/* ---------------------------------------------------------
   SEKCJA — FAQ ACCORDION
   --------------------------------------------------------- */
.faq-bg { background: var(--bg-2); }
.faq-list { margin-top: 3rem; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  text-align: left;
  padding: 1.4rem 0.5rem;
  margin: 0 -0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  font-weight: 500;
  min-height: 44px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.faq-question:hover { color: var(--accent-text); background: var(--bg-3); }
.faq-question[aria-expanded="true"] { color: var(--accent-text); }
/* [Premium Refresh 2026-07-20, pkt 5] Chevron przeniesiony do okrągłego
   "badge'a", który przy hover/otwarciu wypełnia się gradientem marki —
   wyraźniejszy target dotykowy niż sama strzałka. */
.faq-chevron-wrap {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.faq-question:hover .faq-chevron-wrap,
.faq-question[aria-expanded="true"] .faq-chevron-wrap {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
}
.faq-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), stroke 0.25s ease;
}
.faq-question:hover .faq-chevron,
.faq-question[aria-expanded="true"] .faq-chevron { stroke: #fff; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.faq-answer-inner {
  padding-bottom: 1.4rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq-answer-inner strong { color: var(--text); }

/* ---------------------------------------------------------
   OFERTA — MOBILE KARTA PADDING
   --------------------------------------------------------- */
@media (max-width: 599px) {
  .pricing-card {
    padding: 1.25rem;
  }
}

/* ---------------------------------------------------------
   OFERTA — CENNIK
   --------------------------------------------------------- */
/* [FIX 2026-07-20, feedback klientki] Ten sam lekki blob co .method-bg,
   przeciwny róg dla odmiany — strona główna ma sekcję cennika bez
   dedykowanego tła, blob dodaje trochę koloru bez zmiany layoutu kart. */
#oferta-online {
  position: relative;
  overflow: hidden;
}
#oferta-online::before {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -180px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155,93,229,0.13) 0%, rgba(255,61,143,0.08) 55%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
#oferta-online .container { position: relative; z-index: 1; }
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  /* [FIX 2026-07-20, wg audytu wizualnego — dyscyplina koloru] Różowy
     gradient na KAŻDEJ karcie rozmywał, która jest naprawdę ważna. Zwykłe
     karty dostają czystą, neutralną powierzchnię — róż zostaje wyłącznie
     na .featured (poniżej), gdzie ma realne znaczenie: "to jest ta". */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
  .pricing-card:hover {
    border-color: rgba(32,26,34,0.16);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(20,20,20,0.1);
  }
}
.pricing-card.featured {
  background: linear-gradient(135deg, rgba(255,61,143,0.08) 0%, var(--bg-2) 100%);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(255,61,143,0.2);
}
@media (hover: hover) {
  .pricing-card.featured:hover {
    box-shadow: 0 0 0 1px var(--accent), 0 16px 40px rgba(255,61,143,0.25);
  }
}
.pricing-badge {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  background: var(--accent-text);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 0 0 4px 4px;
}
.pricing-card .name, .pricing-card h3.name {
  font-family: var(--font-head);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--text);
}
.pricing-card .price-main {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pricing-card .price-main span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.pricing-card .price-total {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.pricing-card .saving {
  font-size: 0.78rem;
  color: var(--accent-text);
  font-weight: 600;
}
.pricing-card .desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.pricing-card .btn { margin-top: auto; width: 100%; justify-content: center; }

.pricing-section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}
.pricing-section-subtitle {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* online konsultacja — duży kafel */
.online-card {
  margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255,61,143,0.04) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .online-card { grid-template-columns: 1fr auto; align-items: center; }
}
.online-card .badge-remote {
  display: inline-block;
  background: rgba(255,61,143,0.12);
  border: 1px solid rgba(255,61,143,0.3);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-full);
  margin-bottom: 1rem;
}
.online-card .online-price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 3.4rem;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .online-card .online-price { text-align: center; }
  .online-card > div:last-child { text-align: center; }
}
.online-card .online-price span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

/* warunki */
.terms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .terms-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .terms-grid { grid-template-columns: repeat(3, 1fr); } }
.term-item {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
  transition: border-left-color 0.2s;
}
@media (hover: hover) {
  .term-item:hover { border-left-color: var(--accent); }
}
.term-item .term-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.4rem;
}
.term-item p { font-size: 0.88rem; color: var(--text-muted); }

/* ---------------------------------------------------------
   PODOPIECZNI — coming soon hero
   --------------------------------------------------------- */
.coming-soon-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.25rem;
}
.coming-soon-hero--compact {
  min-height: auto;
  padding: 4rem 1.25rem 3rem;
  align-items: flex-start;
  justify-content: flex-start;
}

/* pionowy akcent bar po lewej krawędzi */
.cs-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  pointer-events: none;
}

/* watermark typograficzny "WKRÓTCE" */
.cs-watermark {
  position: absolute;
  bottom: -0.15em;
  right: -0.05em;
  font-family: var(--font-head);
  font-size: clamp(8rem, 28vw, 22rem);
  line-height: 1;
  color: var(--secondary);
  opacity: 0.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* treść sekcji */
.cs-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 700px;
}
.coming-soon-hero h1 {
  line-height: 0.9;
  max-width: 14ch;
  margin: 0;
}
.coming-soon-hero p {
  margin: 0;
  max-width: 42ch;
  color: var(--text-muted);
}

/* CTA row */
.cs-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 480px) {
  .coming-soon-hero { padding: 5rem 1.25rem; }
  .cs-cta-row { flex-direction: column; align-items: stretch; }
  .cs-cta-row .btn { justify-content: center; }
}

/* opinie — skeleton carousel */
.reviews-carousel {
  overflow: hidden;
  margin-top: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2rem;
}
.reviews-placeholder {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* metamorfozy skeleton */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 600px) { .meta-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .meta-grid { grid-template-columns: repeat(3, 1fr); } }
.meta-card-skeleton {
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.meta-img-slot {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg-3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: rgba(31,27,36,0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   KONTAKT
   --------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-item .contact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.contact-item a, .contact-item p {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 500;
  color: var(--text);
  transition: color 0.15s;
}
.contact-item a:hover { color: var(--accent-text); }
.contact-item .sub { font-size: 0.85rem; color: var(--text-muted); }

.map-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  margin-top: 3rem;
}
.map-placeholder svg { width: 32px; height: 32px; stroke: var(--accent); fill: none; stroke-width: 2; }
.map-placeholder-label { max-width: none; font-size: 0.8rem; text-align: center; color: var(--text-muted); }

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s;
}
.social-link:hover { border-color: var(--accent-text); color: var(--accent-text); }
.social-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------------------------------------------------------
   BLOG
   --------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (min-width: 600px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255,61,143,0.05) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
  .blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255,61,143,0.15);
    border-color: rgba(255,61,143,0.4);
  }
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31,27,36,0.2);
  overflow: hidden;
}
.blog-card-img img {
  border-radius: 14px 14px 0 0;
}
.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.blog-card-cat {
  display: inline-block;
  background: rgba(255,61,143,0.12);
  border: 1px solid rgba(255,61,143,0.3);
  color: var(--accent-text);
  border-radius: var(--r-full);
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: flex-start;
}
.blog-card h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.blog-card p { font-size: 0.85rem; color: var(--text-muted); flex: 1; }
.blog-card .read-more {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.15s;
}
@media (hover: hover) {
  .blog-card:hover .read-more { gap: 0.6rem; }
}

/* ---------------------------------------------------------
   STOPKA
   --------------------------------------------------------- */
.footer {
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}
.footer-logo {
  font-family: var(--font-head);
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.footer-logo span { color: var(--accent-text); }
.footer-tagline {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  max-width: 28ch;
}
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
.footer-col ul a:hover { color: var(--text); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 2rem auto 0;
  padding: 1.5rem 1.25rem 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   UTLILITIES
   --------------------------------------------------------- */
.divider { width: 48px; height: 3px; background: linear-gradient(to right, var(--accent), var(--secondary)); margin-bottom: 2rem; border-radius: 2px; }
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.text-readable { max-width: 62ch; }

/* Klasy zastępujące inline styles */
.page-h1           { line-height: 0.9; margin-bottom: 1.25rem; }
.page-intro        { max-width: 52ch; color: var(--text-muted); margin-top: 1rem; }
.page-intro--wide  { max-width: 60ch; color: var(--text-muted); margin-top: 1rem; }
.online-card-title { margin-bottom: 0.75rem; }
.online-card-desc  { color: var(--text-muted); max-width: 50ch; margin-bottom: 1.5rem; }
.online-price-col  { text-align: center; }
.online-price-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem; }
.online-price-note--tight { font-size: 0.8rem; margin-top: 0.25rem; }

/* [FIX 2026-07-20, treść wg intake/Diabebuddy teksty na stronę.pdf]
   Tabela porównawcza Plan treningowy vs Prowadzenie online. */
.compare-wrap { margin-top: 3rem; }
.compare-table-scroll { overflow-x: auto; margin-top: 1.5rem; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table tbody td:not(:first-child) { text-align: center; font-family: var(--font-mono); }
.compare-table tbody td:first-child { color: var(--text); }
/* [FIX 2026-07-21, feedback klientki] Fajki/x jako pełnoprawne odznaki
   ikonowe zamiast cienkich glifów unicode (✓/✕ na 0.9rem, "no" na 20%
   opacity — praktycznie niewidoczne). Grubszy stroke + kolorowe tło dają
   realny kontrast bez zmiany logiki kolumny "no" (dalej wyraźnie cichsza
   niż "yes", ale czytelna). */
.compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.compare-icon svg { width: 15px; height: 15px; }
.compare-icon--yes { background: rgba(255,61,143,0.14); color: var(--accent-text); }
.compare-icon--no { background: rgba(31,27,36,0.08); color: var(--text-muted); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.contact-card-gap  { margin-bottom: 2rem; }
.contact-value     { font-size: clamp(1rem, 3vw, 1.3rem); font-weight: 500; color: var(--text); }
.blog-more-text    { text-align: center; color: var(--text-muted); font-size: 0.82rem; margin-top: 3rem; letter-spacing: 0.06em; }
.center-block      { display: flex; justify-content: center; margin-top: 1.5rem; }
.container--relative { position: relative; }

/* Nav mobile CTA — usuwa inline style="width:100%;justify-content:center;" */
.nav-mobile-cta .btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------
   SEKCJA HEADER — wzorzec powtarzający się na podstronach
   --------------------------------------------------------- */
.page-section-header {
  padding-top: 4rem;
  padding-bottom: 3rem;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
.section-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--accent) 30%, var(--secondary) 70%, transparent 100%);
  pointer-events: none;
}
.section-bg-dark { background: var(--bg); }
.section-bg-mid  { background: var(--bg-2); }

/* Checklist item (treningi grupowy / online w oferta.html) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.checklist-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.checklist-item .check-icon {
  color: var(--accent-text);
  margin-top: 0.1rem;
  flex-shrink: 0;
}
/* [FIX 2026-07-21, feedback klientki] Podlista dla "Indywidualny plan
   treningowy dopasowany do:" — jedyny punkt checklisty z własnymi
   podpunktami (cel/poziom/tryb życia/sprzęt/czas). */
.checklist-sublist {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.checklist-sublist li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.2rem;
}
.checklist-sublist li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* [FIX 2026-07-21, feedback klientki "teksty oferty do zmiany"] Pełna
   lista tego, co obejmuje dany pakiet — bezpośrednio w karcie cennika,
   zamiast tylko w osobnej wspólnej sekcji. */
.pricing-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.pricing-card-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.pricing-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.pricing-card-note {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.pricing-card-tagline {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------------------------------------------------------
   REVEAL ANIMACJA — fade-in przy scrollowaniu
   --------------------------------------------------------- */
/* Wariant "lift" — karty w gridach (usp/pricing/blog/toolkit itd.):
   drobny fade-up, z reguły ze staggerem ustawionym w JS (main.js). */
.js-ready .reveal--lift {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-ready .reveal--lift.visible {
  opacity: 1;
  transform: none;
}
/* Wariant "fade" — bloki tekstowe/pojedyncze (cytaty, zdjęcia narracyjne,
   FAQ, fakty): tylko opacity, bez przesunięcia — celowo "szept", nie
   powtórzenie tego samego efektu co karty (checklist pkt 6). */
.js-ready .reveal--fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.js-ready .reveal--fade.visible {
  opacity: 1;
}

/* ---------------------------------------------------------
   LANG SWITCH — widoczność treści
   --------------------------------------------------------- */
[data-lang] { display: none; }
body.lang-pl [data-lang="pl"],
body.lang-en [data-lang="en"] { display: revert; }
/* dla elementów blokowych inline-flex itp. — override */
body.lang-pl .nav-links [data-lang="pl"],
body.lang-en .nav-links [data-lang="en"] { display: flex; }

/* ---------------------------------------------------------
   FOCUS & ACCESSIBILITY
   --------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------
   SEKCJA — ogólny CTA bar na dole sekcji
   --------------------------------------------------------- */
.section-cta {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ---------------------------------------------------------
   KONTAKT — PAGE HEADER (wzorzec oferta.html)
   --------------------------------------------------------- */
.contact-page-header {
  padding-top: 4rem;
  padding-bottom: 3rem;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
}
.contact-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent 0%, var(--accent) 30%, var(--secondary) 70%, transparent 100%);
  pointer-events: none;
}
.contact-page-h1 {
  line-height: 0.9;
}

/* ---------------------------------------------------------
   KONTAKT — KARTY (wzorzec pricing-card)
   --------------------------------------------------------- */
.contact-item-card {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255,61,143,0.05) 100%);
  border: 1px solid var(--border);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
  .contact-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255,61,143,0.15);
    border-color: rgba(255,61,143,0.4);
  }
}

/* ---------------------------------------------------------
   KONTAKT — MAPA PLACEHOLDER
   --------------------------------------------------------- */
.map-placeholder {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------
   KONTAKT — HERO Z ZDJĘCIEM (redesign 2026-07-19)
   Zastępuje suchy nagłówek tekstowy realnym zdjęciem Natashki —
   ta sama logika co reszta strony ("zdjęcia z intencją" zamiast
   samego tekstu/ikon).
   --------------------------------------------------------- */
.contact-hero-flex {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .contact-hero-flex { flex-direction: row; align-items: flex-end; gap: 3rem; }
  .contact-hero-flex > .contact-hero-text { flex: 1; }
}
.contact-hero-photo {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 12px 28px rgba(31,27,36,0.14);
}
.contact-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
@media (min-width: 768px) {
  .contact-hero-photo { width: 180px; height: 180px; }
}

/* Karta "jak dojechać" — link-out do Google Maps zamiast osadzonej
   mapy/placeholdera. Uczciwe rozwiązanie: prawdziwy, działający link,
   nie udawany embed z etykietą "w przygotowaniu". */
.directions-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  .directions-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,61,143,0.14); }
}
.directions-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 8px 18px rgba(255,61,143,0.3);
}
.directions-card-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.directions-card-body { flex: 1; }
.directions-card-body p.contact-value { margin-bottom: 0.2rem; }
.directions-card-body .sub { display: block; }
.directions-card-arrow { flex-shrink: 0; color: var(--accent-text); font-weight: 700; font-size: 1.3rem; }

/* ---------------------------------------------------------
   PODOPIECZNI — PRZEMIANY
   --------------------------------------------------------- */
.transformations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .transformations-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .transformations-grid { grid-template-columns: repeat(3, 1fr); } }

.transformation-card {
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255,61,143,0.05) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
  .transformation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(255,61,143,0.15);
    border-color: rgba(255,61,143,0.4);
  }
}

/* Before/After slider */
.ba-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: col-resize;
  user-select: none;
  touch-action: pan-y;
}
.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ba-after {
  clip-path: inset(0 50% 0 0);
}
.ba-img-placeholder {
  width: 100%;
  height: 100%;
  background: #EDE7F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: rgba(31,27,36,0.25);
  letter-spacing: 0.1em;
}
.ba-img-placeholder--after {
  background: linear-gradient(135deg, #F7EEFB 0%, rgba(255,61,143,0.15) 100%);
  color: rgba(194,24,91,0.4);
}
.ba-img-placeholder img,
.ba-before img,
.ba-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-label {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-photo-muted);
  background: rgba(20,16,24,0.8);
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  pointer-events: none;
}
.ba-label--after {
  left: auto;
  right: 0.6rem;
  color: var(--accent);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  opacity: 0.9;
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.ba-knob svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  stroke: var(--accent);
}

.transformation-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.transformation-stats {
  display: flex;
  gap: 1.5rem;
}
.transformation-stat {
  display: flex;
  flex-direction: column;
}
.stat-val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.transformation-quote {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}
/* ============================================================
   OFFER TABS
   ============================================================ */
.offer-tabs-nav {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 64px;
  z-index: 90;
}
.offer-tabs-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  gap: 0;
}
.offer-tab {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 1.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.offer-tab:hover { color: var(--text); }
.offer-tab[aria-selected="true"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}
@media (max-width: 480px) {
  .offer-tab { padding: 0.9rem 1rem; font-size: 0.82rem; }
}

/* ============================================================
   LP SECTIONS EMBEDDED IN OFFER TAB
   ============================================================ */
.lp-trust {
  background: var(--bg-2);
  padding: 2rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.lp-trust-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 600px) {
  .lp-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
.lp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.lp-trust-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(255,61,143,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-trust-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-trust-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.lp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.lp-whom-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
}
.lp-whom-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(255,61,143,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.lp-whom-card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-whom-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; }
.lp-whom-card p { font-size: 0.88rem; color: var(--text-muted); }
.lp-steps-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
  max-width: 680px;
}
.lp-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.lp-step-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--accent);
  min-width: 2.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lp-step-body h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.lp-step-body p { font-size: 0.9rem; color: var(--text-muted); }
.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  max-width: 640px;
}
.lp-big-tel {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 4rem);
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
  transition: letter-spacing 0.2s;
  margin: 1.5rem 0 1rem;
  font-variant-numeric: tabular-nums;
}
.lp-big-tel:hover { letter-spacing: 0.06em; }
.lp-review-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 2.5rem;
  max-width: 600px;
  margin: 2rem auto 0;
  position: relative;
}
.lp-review-quote-mark {
  font-family: var(--font-head);
  font-size: 6rem;
  line-height: 0.6;
  color: var(--accent);
  opacity: 0.3;
  display: block;
  margin-bottom: 0.5rem;
}
.lp-review-text {
  font-size: 1rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.lp-review-author {
  font-size: 0.82rem;
  color: var(--accent-text);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-final-subtext {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.transformation-name {
  font-size: 0.78rem;
  color: var(--accent-text);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =========================================================
   DODANE PRZY KONWERSJI DO WORDPRESSA (motyw-dziecko Blocksy)
   Style dla dynamicznego wpisu blogowego (single.php) i
   paginacji listy wpisów (page-templates/template-blog.php).
   Reszta pliku powyżej to 1:1 kopia oryginalnego css/style.css
   ze statycznej wersji strony — nie zmieniaj jej.
   ========================================================= */

/* ---------------------------------------------------------
   META WPISU — data pod tytułem w nagłówku single.php
   --------------------------------------------------------- */
.entry-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------
   OBRAZEK WYRÓŻNIAJĄCY — single.php
   --------------------------------------------------------- */
.entry-thumb-section { padding-top: 0; }
.entry-thumb {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.entry-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------
   TREŚĆ WPISU (the_content()) — ostylowanie edytora WP pod
   markę, żeby h2/h3/p/listy/cytaty/linki w każdym przyszłym
   artykule z planu SEO wyglądały spójnie z resztą strony.
   --------------------------------------------------------- */
.entry-content { max-width: 720px; }
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin-top: 2.5rem;
  text-transform: none;
  line-height: 1.15;
}
.entry-content h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2rem;
  text-transform: none;
}
.entry-content p {
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 68ch;
}
.entry-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--accent-dark); }
.entry-content strong { color: var(--text); }
.entry-content em { color: var(--text); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; color: var(--text-muted); max-width: 68ch; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.entry-content li::marker { color: var(--accent); }
.entry-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0;
  color: var(--text);
  font-style: italic;
  font-size: 1.05rem;
}
.entry-content img {
  border-radius: var(--r-md);
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
}
.entry-content figcaption {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  text-align: center;
}
.entry-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ---------------------------------------------------------
   PAGINACJA LISTY WPISÓW — template-blog.php (paginate_links)
   --------------------------------------------------------- */
.blog-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.blog-pagination ul { display: flex; gap: 0.5rem; flex-wrap: wrap; list-style: none; }
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s;
}
.blog-pagination .page-numbers:hover { border-color: var(--accent-text); color: var(--accent-text); }
.blog-pagination .page-numbers.current { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }

/* ============================================================
   HOMEPAGE REDESIGN 2026-07-19
   Brief_Kreatywny_Redesign_Homepage_2026-07-19.md
   ============================================================ */

/* Teaser "wkrótce historie podopiecznych" */
.podopieczni-teaser {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: border-color 0.15s, color 0.15s;
}
.podopieczni-teaser:hover { border-color: var(--accent); color: var(--accent-text); }
.podopieczni-teaser svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--secondary); }

/* [Audyt 2026-07-20, pkt 8] Krawędź sekcji jako dodatkowy, twardszy sygnał
   granicy między sekcjami o zbliżonych, jasnych odcieniach tła — kolor sam
   w sobie bywał za subtelny przy szybkim scrollu na mobile. */
.section-seam { border-top: 1px solid var(--border); }

/* ---------------------------------------------------------
   MIKRO-CYTAT — zastępuje pusty divider między "Jedna osoba
   prowadzi" a paskiem faktów (Audyt 2026-07-20, pkt 7:
   dawny divider bez treści wyglądał jak niedokończony fragment strony).
   --------------------------------------------------------- */
.micro-quote-bar {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  padding: 2.5rem 0;
}
.micro-quote-bar p {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--accent-text);
}


/* ---------------------------------------------------------
   SEKCJA 5 — WSZYSTKO W JEDNYM MIEJSCU (toolkit, bez apki)
   --------------------------------------------------------- */
.toolkit-bg { background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); }
.toolkit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) { .toolkit-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .toolkit-grid { grid-template-columns: repeat(4, 1fr); } }
.toolkit-card {
  background: #fff;
  border: 1px solid rgba(255,61,143,0.25);
  border-radius: var(--r-sm);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 10px rgba(31,27,36,0.05);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  .toolkit-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 16px 34px rgba(255,61,143,0.2); }
}
.toolkit-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 8px 18px rgba(255,61,143,0.3);
  color: #fff;
}
.toolkit-icon svg { width: 24px; height: 24px; stroke: currentColor; }
.toolkit-icon--secondary {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  box-shadow: 0 8px 18px rgba(155,93,229,0.3);
}
.toolkit-card--featured .toolkit-icon {
  background: rgba(255,255,255,0.22);
  box-shadow: none;
}
.toolkit-card h4 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.toolkit-card p { font-size: 0.85rem; color: var(--text-muted); }
.toolkit-card--featured {
  background: linear-gradient(150deg, var(--accent) 0%, var(--secondary) 130%);
  border-color: transparent;
}
.toolkit-card--featured h4, .toolkit-card--featured p { color: var(--on-photo); }

/* ---------------------------------------------------------
   SEKCJA 7 — PASEK FAKTÓW (jedyne ciemne tło na stronie)
   --------------------------------------------------------- */
.facts-bar { background: var(--text); padding: 4rem 0; overflow: hidden; }
/* [FIX 2026-07-20, feedback klientki] 3 równe kolumny, te same prawdziwe
   liczby (3 pakiety / 100% online / 0 zł) — żywsza, lekko "skośna"
   typografia inspirowana przesłanym mockiem referencyjnym (tam duże,
   pochylone liczby budują energię paska statystyk). Skos wyłącznie
   dekoracyjny na samej liczbie — etykieta pod spodem zostaje prosta
   i w pełni czytelna. */
.facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  text-align: center;
}
@media (min-width: 700px) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }
.facts-value {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.facts-item--tilt-a .facts-value { transform: rotate(-3deg); }
.facts-item--tilt-b .facts-value { transform: rotate(2.5deg); color: var(--secondary); }
.facts-label {
  font-size: 0.85rem;
  color: rgba(255,255,245,0.75);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .facts-value { transform: none; }
}

/* ---------------------------------------------------------
   SEKCJA 8 — FINALNE CTA (gradient różowo-fioletowy)
   --------------------------------------------------------- */
/* [FIX 2026-07-21, audyt CRO] Gradient przeniesiony z karty (.final-cta-inner)
   na całą sekcję — final-cta była jedynym pasem na stronie bez tła
   pełnoszerokościowego, przez co wyglądała jak wklejony baner na jasnym
   tle strony zamiast kolejnego pasa w tym samym rytmie co facts-bar/faq-bg. */
.final-cta { background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%); }
.final-cta-inner {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}
.final-cta-inner h2 { color: var(--on-photo); margin-bottom: 1rem; }
/* [FIX 2026-07-20] Bez kursywy (Bricolage Grotesque jej nie ma) — lżejsza
   waga wobec pogrubionego h2 daje ten sam "cichszy dopowiedziany" efekt. */
.final-cta-inner .italic-accent { font-weight: 400; opacity: 0.85; }
.final-cta-inner p {
  color: rgba(255,255,245,0.9);
  max-width: 46ch;
  margin: 0 auto 2rem;
}
.final-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
/* [FIX 2026-07-21, feedback klientki] "lub" między dwoma CTA — jasne, że to
   alternatywy, nie dwa kroki jednego procesu. */
.final-cta-or {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,245,0.75);
}
@media (max-width: 480px) {
  .final-cta-or { text-align: center; }
}
.final-cta .btn-primary {
  background: #fff;
  color: var(--accent-text);
  border-color: #fff;
}
.final-cta .btn-primary:hover { background: rgba(255,255,255,0.85); }
.btn-outline--on-gradient {
  color: var(--on-photo);
  border-color: rgba(255,255,245,0.6);
}
.btn-outline--on-gradient:hover { border-color: #fff; color: #fff; }
@media (max-width: 480px) {
  .final-cta-btns { flex-direction: column; align-items: stretch; }
  .final-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   PREMIUM REFRESH 2026-07-20 (zakres uzgodniony — patrz brief sesji)
   Punkty: 1) sticky CTA, 2) floating fact-cards hero, 6) panel Instagram,
   7) animowane liczniki dla prawdziwych liczb. (Punkty 3/4/5 wdrożone
   powyżej, przy odpowiednich sekcjach: historia / spacing / faq.)
   ============================================================ */

/* ---------------------------------------------------------
   PKT 2 (POPRZEDNIA WERSJA) — FLOATING FACT-CARDS NA HERO — USUNIĘTE
   [REBUILD 2026-07-20] Glassmorphism floating stat-cards nad zdjęciem
   hero to dokładnie ten sam AI-domyślny wzorzec "SaaS template" (frosted
   glass + wielka liczba + etykieta), którego ten rebuild ma się pozbyć.
   Te same 3 fakty żyją teraz wyłącznie w .facts-bar (i w panelu metody) —
   hero zostaje czysty: eyebrow + nagłówek + kontekst + CTA + linia-zapis.
   Markup usunięty z index.html/template-home.php. Nie usuwam .hero-fact-value
   z listy [data-count] w JS świadomie — initCounters() i tak działa
   selektorem generycznym, nic tu nie trzeba było zmieniać w main.js.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   PKT 1 — STICKY CTA
   Ukryty na starcie (patrz .sticky-cta bez .visible), JS main.js
   (initStickyCta) dodaje .visible po >600px scrolla i chowa go przy
   zbliżaniu się do stopki.
   --------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
}
.sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 420px;
  background: var(--accent-text);
  color: #fff;
  padding: 0.9rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 44px;
  box-shadow: 0 10px 30px rgba(194,24,91,0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}
.sticky-cta-link:hover { background: var(--accent-dark); }
.sticky-cta-link:active { transform: scale(0.96); }
.sticky-cta-link svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (min-width: 900px) {
  .sticky-cta { justify-content: flex-end; padding: 0 1.75rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .sticky-cta-link { width: auto; }
}

/* ---------------------------------------------------------
   PKT 6 — PANEL INSTAGRAM W STOPCE
   Brak realnych zdjęć IG w img/ — czysty panel z linkiem zamiast
   fabrykowanej siatki postów.
   --------------------------------------------------------- */
.footer-instagram {
  max-width: var(--max-w);
  margin: 2.5rem auto 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255,61,143,0.07), rgba(155,93,229,0.07));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  transition: border-color 0.2s ease;
}
.footer-instagram:hover { border-color: var(--accent); }
@media (min-width: 700px) {
  .footer-instagram { flex-direction: row; align-items: center; justify-content: space-between; margin-left: 1.25rem; margin-right: 1.25rem; }
}
.footer-instagram-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.footer-instagram-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-instagram-icon svg { width: 22px; height: 22px; stroke: #fff; }
.footer-instagram-title { display: block; font-weight: 600; font-size: 0.92rem; color: var(--text); }
.footer-instagram-handle { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.1rem; }
.footer-instagram-btn { flex-shrink: 0; pointer-events: none; }

/* ---------------------------------------------------------
   PKT 7 — LICZNIKI: tabular-nums, żeby liczba "3" nie skakała
   w trakcie animacji JS (initCounters w main.js).
   --------------------------------------------------------- */
.facts-value { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------
   REVEAL — wariant "slide" dla osi czasu (historia-timeline-item):
   subtelne wejście z lewej, spójne z liniowym charakterem timeline,
   odróżnione od reveal--lift (karty) i reveal--fade (cytaty/zdjęcia).
   --------------------------------------------------------- */
.js-ready .reveal--slide {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}
.js-ready .reveal--slide.visible {
  opacity: 1;
  transform: none;
}

/* [FIX 2026-07-20, feedback klientki] Okrągła plakietka-naklejka na
   zdjęciu w sekcji "Cukrzyca T1" (patrz .doc-photo) — prawdziwy fakt
   (rok 2017), nie zmyślona liczba lat/wiek. */
.historia-badge {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  color: var(--on-photo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  box-shadow: 0 10px 28px rgba(20,16,24,0.35);
  border: 2px solid rgba(255,255,255,0.4);
}
.historia-badge svg { width: 18px; height: 18px; margin-bottom: 0.15rem; }
.historia-badge span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .historia-badge { width: 108px; height: 108px; right: 1.5rem; bottom: 1.5rem; }
  .historia-badge span { font-size: 0.65rem; }
}

/* ============================================================
   REBUILD 2026-07-20 — METODA: PANEL ODCZYTU
   Hairline/tabelaryczny charakter — świadome nawiązanie do wydruku
   wyniku badania/raportu, nie ogólny styl broadsheet zastosowany na
   całej stronie.
   ============================================================ */
.method-bg {
  position: relative;
  /* [FIX 2026-07-21, feedback klientki] Było var(--bg-2) — identyczne z
     .doc-bg--alt na sekcji 04 tuż nad tą sekcją, więc dwie sekcje z rzędu
     miały to samo tło i zlewały się wizualnie. */
  background: var(--bg);
  overflow: hidden;
}
/* [FIX 2026-07-20, feedback klientki] Kolorowy "blob" w tle — czysty CSS,
   bez nowych grafik — wstrzykuje trochę energii/koloru referencyjnego
   mocka w miejsce, które wcześniej było płaskim, jednolitym tłem. */
.method-bg::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,61,143,0.16) 0%, rgba(155,93,229,0.1) 55%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.method-bg .container { position: relative; z-index: 1; }
.method-intro {
  color: var(--text-muted);
  max-width: 56ch;
  margin-top: 1rem;
  margin-bottom: 2.75rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}
.method-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 860px) {
  .method-layout { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
}
/* [FIX 2026-07-20] Bez zdjęcia panel zajmuje całą szerokość, ale
   ograniczony max-width żeby nie rozciągał się na całą, szeroką
   sekcję — czyta się jak jeden zwarty "dokument", nie rozlana tabela. */
.method-layout--panel-only {
  grid-template-columns: 1fr;
  max-width: 720px;
}
@media (min-width: 860px) {
  .method-layout--panel-only { grid-template-columns: 1fr; }
}
/* [FIX 2026-07-24, feedback klientki "na razie usuń zdjęcie i rozciągnij
   na całą szerokość"] W odróżnieniu od .method-layout--panel-only (celowo
   wąski, "dokumentowy" max-width:720px) ten wariant NIE ogranicza
   szerokości — panel ma zająć całą dostępną szerokość .container, skoro
   nie ma już drugiej kolumny ze zdjęciem. */
.method-layout--full {
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .method-layout--full { grid-template-columns: 1fr; }
}
.method-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.method-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.method-panel-head span:last-child { color: var(--accent-text); }
.method-rows { display: flex; flex-direction: column; }
.method-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.method-rows:last-child .method-row:last-child { border-bottom: none; }
.method-row-num {
  flex-shrink: 0;
  width: 2.4rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  opacity: 0.7;
  padding-top: 0.1rem;
}
.method-row-check {
  flex-shrink: 0;
  width: 2.4rem;
  display: flex;
  padding-top: 0.15rem;
}
.method-row-check svg { width: 16px; height: 16px; color: var(--accent-text); }
.method-row-body { flex: 1; min-width: 0; }
/* [FIX 2026-07-21, feedback klientki "rozwijane"] Kroki procesu jako
   akordeon — ta sama logika interakcji co FAQ (przycisk + kolapsujący
   panel), ale własne klasy (method-*), żeby kliknięcie tutaj nie zamykało
   otwartego pytania w sekcji FAQ i odwrotnie. */
.method-question {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}
.method-question h4 {
  font-size: 1.05rem;
  color: var(--text);
  transition: color 0.2s ease;
}
.method-question:hover h4,
.method-question[aria-expanded="true"] h4 { color: var(--accent-text); }
.method-chevron-wrap {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.method-question:hover .method-chevron-wrap,
.method-question[aria-expanded="true"] .method-chevron-wrap {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
}
.method-chevron {
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), stroke 0.25s ease;
}
.method-question:hover .method-chevron,
.method-question[aria-expanded="true"] .method-chevron { stroke: #fff; }
.method-question[aria-expanded="true"] .method-chevron { transform: rotate(180deg); }
.method-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.method-answer-inner { padding-top: 0.6rem; }
.method-answer-inner p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 48ch;
  margin-bottom: 0.6rem;
}
.method-answer-inner p:last-child { margin-bottom: 0; }
/* ============================================================
   REBUILD 2026-07-20 — OFERTA NA STRONIE GŁÓWNEJ
   Homepage jako landing page: 3 pakiety pokazane wprost, blisko końca,
   reużywa 1:1 .pricing-grid/.pricing-card z oferta.html (te same ceny,
   ten sam markup) — tylko dodatkowy link do pełnych warunków.
   ============================================================ */
.home-pricing-more {
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.home-pricing-more a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------
   PRZEWIŃ DO GÓRY — [FIX 2026-07-21, feedback klientki] Brakowało
   przycisku powrotu na górę strony przy długim scrollu. Pokazuje się po
   tym samym progu co .sticky-cta (>600px), żeby zachowania czuły się
   spójnie. Na stronach ze .sticky-cta (na razie tylko strona główna)
   .above-sticky podbija przycisk nad pasek, żeby się nie nakładały —
   na pozostałych stronach ta klasa nigdy się nie włącza (JS sprawdza,
   czy #stickyCta w ogóle istnieje), więc przycisk zostaje w rogu.
   --------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 840;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(32,26,34,0.14);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { border-color: var(--accent-text); color: var(--accent-text); }
.back-to-top.above-sticky { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 860px) {
  .back-to-top { right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .back-to-top.above-sticky { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}