/* ===================================================================
   bartosz-kubiak.pl - wspólny arkusz stylów
   Kolejność: 1.zmienne  2.reset  3.typografia  4.layout
              5.komponenty  6.sekcje wspólne  7.sekcje per strona
              8.media queries (mobile na końcu)
   =================================================================== */

/* ===== 1. ZMIENNE :root ===== */
:root {
  /* kolory */
  --bg: #0B0B0C;
  --bg-alt: #131317;
  --surface: #141518;
  --surface-2: #1C1E22;
  --accent: #FDBA2B;
  --accent-hover: #E5A413;
  --accent-soft: rgba(253, 186, 43, 0.10);
  --text: #F2F0EA;
  --text-soft: #C9C6BE;   /* trzeci poziom tekstu - treść akapitów */
  --text-muted: #9C9A94;
  --border: #26282D;
  --navy: #1C2A4A;

  /* fonty */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* skala - desktop */
  --fs-h1: 60px;      --lh-h1: 1.05;   --fw-h1: 700;
  --fs-h2: 38px;      --lh-h2: 1.15;   --fw-h2: 700;
  --fs-h3: 22px;      --lh-h3: 1.3;    --fw-h3: 600;
  --fs-body: 18px;    --lh-body: 1.6;  --fw-body: 400;
  --fs-small: 15px;   --lh-small: 1.5;
  --fs-overline: 13px;
  --fs-number: 44px;
  --fs-button: 17px;  --fw-button: 600;

  --ls-overline: 0.1em;

  /* layout */
  --max-content: 760px;
  --max-wide: 1120px;
  --nav-h: 77px;
}

/* ===== 2. RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
/* zawsze rezerwuj miejsce na pasek przewijania - żeby krótkie i długie strony miały tę samą szerokość
   (inaczej wyśrodkowany nav przesuwa się między stronami) */
html { scrollbar-gutter: stable; }
/* płynne zjeżdżanie do kotwic (#jak-pomoge itd.); respektuje wyłączony ruch */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-sans);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
/* etykieta tylko dla czytnika ekranu (placeholder pełni rolę wizualną) */
.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;
}

/* ===== 3. TYPOGRAFIA ===== */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
p  { font-size: var(--fs-body); line-height: var(--lh-body); }
.accent { color: var(--accent); }
/* zakreślacz - czarny tekst na żółtym tle z zaokrąglonymi rogami */
.highlight {
  background: var(--accent);
  color: var(--bg);
  padding: 0.04em 0.28em;
  border-radius: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* odręczne podkreślenie "długopisem" - żółta falista kreska pod tekstem, klonowana na każdej zawijanej linii */
.hand-uline {
  display: inline;
  color: var(--text);
  background-color: transparent;
  font-weight: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='12' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M1 7 C 36 3.4, 71 9.2, 110 6 C 149 3, 184 9.4, 219 6.2' fill='none' stroke='%23FDBA2B' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 9px;
  padding-bottom: 7px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--text-muted);
}

/* ===== 4. LAYOUT ===== */
.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 48px;
}
.container-wide { max-width: var(--max-wide); }
section { padding: 112px 0; scroll-margin-top: var(--nav-h); }
section.section--alt { background: var(--bg-alt); }

/* ===== 5. KOMPONENTY ===== */
/* CTA primary */
.cta-primary {
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: var(--fw-button);
  font-size: var(--fs-button);
  padding: 16px 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: background 150ms ease;
}
.cta-primary:hover { background: var(--accent-hover); }
.cta-primary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* CTA secondary - wariant obrysowy */
.cta-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-weight: var(--fw-button);
  font-size: var(--fs-button);
  padding: 16px 32px;
  border-radius: 8px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  transition: border-color 150ms ease, color 150ms ease;
}
.cta-secondary:hover { border-color: var(--text-muted); }
.cta-secondary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* strzałka w CTA */
.cta-primary svg, .cta-secondary svg { width: 18px; height: 18px; flex-shrink: 0; }

/* TYTUŁ KARTY - wspólny komponent dla kart na wszystkich podstronach.
   Kontrast tytuł/treść budowany relacją: tytuł --fs-h3 waga 700 (--text) vs treść --fs-small (--text-muted).
   Rozmiary wyłącznie ze zmiennych skali - zmiana tutaj działa wszędzie naraz. */
.card-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--text);
}

/* NAV - sticky, wielostronicowy */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.nav-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.05;
}
.brand-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}
.brand-tag {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
  margin-top: 1px;
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: color 150ms ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }
/* "Kontakt" jako żółty button w nav */
.nav-links a.nav-cta {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  transition: background 150ms ease;
}
.nav-links a.nav-cta:hover { background: var(--accent-hover); color: var(--bg); }
.nav .cta-primary { padding: 10px 20px; min-height: 44px; font-size: 15px; }
/* nav minimalny (podstrony): button kompaktowy jak "Kontakt" na głównej - brand napędza wysokość nav */
.nav--minimal .cta-primary { padding: 9px 18px; min-height: 0; font-size: 15px; }

/* menu mobilne - natywny <details>, bez JS. Ukryte na desktopie. */
.nav-mobile { display: none; }

/* MENU NAWIGACJI (trzy kreski) - minimalistyczny rozwijany dropdown na podstronach, zero JS (natywny <details>) */
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-menu { position: relative; }
.nav-menu-btn {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  transition: background 150ms ease;
}
.nav-menu-btn::-webkit-details-marker { display: none; }
.nav-menu-btn:hover { background: var(--surface-2); }
.nav-menu-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.nav-menu-bars span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.nav-menu-list {
  position: absolute; right: 0; top: calc(100% + 12px);
  list-style: none; margin: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; min-width: 200px;
  display: flex; flex-direction: column; z-index: 200;
}
.nav-menu-list a {
  display: block; padding: 12px 14px; border-radius: 8px;
  color: var(--text-muted); text-decoration: none; font-size: var(--fs-small);
  white-space: nowrap; transition: color 150ms ease, background 150ms ease;
}
.nav-menu-list a:hover { color: var(--text); background: var(--surface-2); }

/* ===== 6. SEKCJE WSPÓLNE ===== */

/* ===== 7. SEKCJE PER STRONA ===== */

/* ----- STRONA GŁÓWNA ----- */
/* HERO */
#hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
  position: relative;
  overflow: hidden;
}
#hero .hero-bg {
  position: absolute; inset: 0;
  --pscale: 1.2;
  background-color: var(--bg);
  background-image: url('../obrazy/obraz-hero.webp');
  background-size: cover;
  background-position: center 22%;
  opacity: 0.4;
  transform: scale(1.2);   /* zapas na subtelny parallax (JS) - #hero ma overflow:hidden, obraz nadal pokrywa */
  will-change: transform;
  /* bardzo długa, łagodna strefa fade - zaczyna się wyżej, płynnie schodzi w czerń */
  -webkit-mask-image: linear-gradient(to bottom, #000 36%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 36%, transparent 100%);
  z-index: 0;
}
#hero .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(11, 11, 12, 0.6);
}
/* dolny pasek zbędny - płynny fade robi teraz maska radialna na .hero-bg */
#hero .hero-fade { display: none; }
#hero .container { position: relative; z-index: 2; text-align: center; }
#hero h1 { max-width: 1120px; margin: 0 auto; }
#hero h1 .line { display: block; }
#hero h1 .line + .line { margin-top: 0.35em; }
#hero .hero-sub {
  margin: 28px auto 0;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.55;
}
#hero .hero-sub + .hero-sub { margin-top: 12px; }
#hero .hero-cta { margin-top: 36px; }

/* ----- HERO PODSTRONY (wspólny dla /sesje-1-1/, /programy/ itd.) - pełny ekran jak główna ----- */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--bg);   /* ciemne tło hero (nie szare) */
}
/* miejsce na obraz w tle - Wiktor doda plik; do tego czasu widać samo --bg.
   Styl jak hero głównej: lekki zoom + długi, łagodny fade w dół w czerń (bez band). */
.page-hero .hero-bg {
  position: absolute; inset: 0;
  --pscale: 1.08;   /* mniejszy zoom niż główna - parallax (JS) czyta tę wartość */
  background-color: var(--bg);
  background-image: url('../obrazy/obraz-hero-sesje.webp');
  background-size: cover;
  background-position: center 22%;
  opacity: 0.55;
  transform: scale(1.08);
  will-change: transform;
  z-index: 0;
  /* zanik obrazu robi MASKA (kanał alfa) - nie kolorowy gradient, więc brak bandingu w ciemnych partiach.
     Obraz wchodzi u góry, wychodzi u dołu, odsłaniając szare tło sekcji = płynne przejście w Proces. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 68%, transparent 100%);
}
.page-hero .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(11, 11, 12, 0.55);
}
/* stary kolorowy fade w szary - USUNIĘTY (to on bandingował); przejście robi teraz szare tło sekcji + maska alfa */
.page-hero .hero-fade { display: none; }
.page-hero .container { position: relative; z-index: 2; text-align: center; }
.page-hero h1 { max-width: 900px; margin: 0 auto; }
.page-hero h1 .line { display: block; }
.page-hero h1 .line + .line { margin-top: 0.12em; }
.page-hero .page-hero-sub {
  margin: 24px auto 0;
  max-width: 50ch;
  text-wrap: balance;   /* równomierne linie - drugi wiersz nie zostaje z ochłapem */
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.55;
}
.page-hero .page-hero-sub + .page-hero-sub { margin-top: 12px; }
.page-hero .page-hero-cta { margin-top: 32px; }

/* PROCES (sesja 1:1) - przełącznik Reset/Pełna aktualizacja (zero JS: ukryte radio) + naprzemienny timeline */
#proces .container { text-align: center; }
#proces h2 { margin: 0 auto; }
#proces .proces-intro {
  margin: 20px auto 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.55;
}
.proces-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.proces-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 5px;
  margin: 40px auto 0;
}
.proces-tab {
  padding: 11px 22px;
  border-radius: 8px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.proces-tab:hover { color: var(--text); }
/* aktywna zakładka - radio tuż przed labelką, kuloodporne + */
.proces-radio:checked + .proces-tab {
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.proces-radio:focus-visible + .proces-tab {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* widoki - przełączane przez :has() (działa); płynny fade przy zmianie */
.proces-view { display: none; }
#proces:has(#view-reset:checked) .proces-view--reset { display: block; }
#proces:has(#view-pelna:checked) .proces-view--pelna { display: block; }
@media (prefers-reduced-motion: no-preference) {
  #proces:has(#view-reset:checked) .proces-view--reset,
  #proces:has(#view-pelna:checked) .proces-view--pelna { animation: proces-fade 260ms ease; }
}
@keyframes proces-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.proces-view-sub {
  margin: 40px auto 0;
  max-width: 58ch;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.6;
}
/* puenta - zamyka proces jako mocne zdanie z cienką żółtą kreską nad nim (bez pudełka) */
.proces-outcome {
  margin: 48px auto 0;
  max-width: 620px;
  text-align: center;
}
.proces-outcome::before {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--accent);
  margin: 0 auto 20px;
}
.proces-outcome p {
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
.proces-outcome .proces-outcome-sub {
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-muted);
}
/* timeline naprzemienny (przeniesiony z Neuro - spójność marki) */
#proces .timeline { position: relative; max-width: 960px; margin: 44px auto 0; text-align: left; }
#proces .timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%); background: var(--border);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
#proces .tl-step { position: relative; width: 50%; box-sizing: border-box; margin-bottom: 40px; }
#proces .tl-step:last-child { margin-bottom: 0; }
#proces .tl-left { left: 0; padding-right: 48px; }
#proces .tl-right { left: 50%; padding-left: 48px; }
#proces .tl-node {
  position: absolute; top: 30px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-alt); z-index: 1;
}
#proces .tl-left .tl-node { right: -7px; }
#proces .tl-right .tl-node { left: -7px; }
#proces .tl-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
}
/* Reset vs Pełna: identyczna typografia, kontrast przez TŁO.
   Reset = szara sekcja + szare kropki. Pełna = czarne tło (głębiej/premium) + żółte kropki.
   Oś zawsze szara. Boksy te same - ale na czerni odcinają się mocniej = drożej. */
#proces { transition: background 250ms ease; }
#proces:has(#view-pelna:checked) { background: var(--bg); }
#proces .proces-view--reset .tl-node { background: var(--text-muted); }         /* Reset: szare kropki */
#proces:has(#view-pelna:checked) .tl-node { border-color: var(--bg); }          /* czarny brzeg węzła na czarnym tle */
/* Reset: labelki w całości szare (numer też) */
#proces .proces-view--reset .tl-label,
#proces .proces-view--reset .tl-label .accent { color: var(--text-muted); }
/* Pełna: boksy bez szarego tła + złota ramka; labelki na złoto */
#proces .proces-view--pelna .tl-box { background: transparent; border-color: rgba(253, 186, 43, 0.6); }
#proces .proces-view--pelna .tl-label,
#proces .proces-view--pelna .tl-label .accent { color: var(--accent); }
#proces .tl-label {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--text-muted);
  margin-bottom: 12px;
}
#proces .tl-title { color: var(--text); margin-bottom: 10px; }
#proces .tl-text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }

/* OBIEKCJE (sesja 1:1) - tabela "Zamiast tego / Dostajesz to".
   Lewa (zamiast) mono szare, prawa (dostajesz) sans białe 600. Nagłówek kolumn BEZ linii pod spodem;
   cienkie kreski tylko MIĘDZY wierszami (payoff bez ozdób - kontrast przez relację font/kolor). */
#obiekcje .ob-wrap { max-width: 920px; margin: 0 auto; padding: 0 48px; }
#obiekcje .ob-heading { margin-bottom: 48px; text-align: center; }
#obiekcje .ob-thead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-bottom: 8px;
}
#obiekcje .ob-col {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
}
#obiekcje .ob-col--from { color: var(--text-muted); }
#obiekcje .ob-col--get { color: var(--accent); }
#obiekcje .ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 28px 0;
}
#obiekcje .ob-row + .ob-row { border-top: 1px solid var(--border); }
#obiekcje .ob-old {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.6;
}
#obiekcje .ob-new {
  color: var(--text);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.45;
}

/* POMOGĘ CI JEŚLI (sesja 1:1) - karty z obrazem u góry, który łagodnie fejduje w dół do tła karty
   (jak "Czy to brzmi znajomo?" w Neuro). Zwartsze niż w Neuro - mniej kopii.
   Obraz = tło karty; gradient ::before robi fade NAD obrazem, POD treścią; tekst startuje w strefie fade. */
#pomoge .container { text-align: center; }
#pomoge h2 { margin: 0 auto; }
#pomoge .pomoge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  text-align: left;
  /* lekki wyłom poza container-wide - karty mają więcej oddechu w poziomie */
  width: min(1220px, calc(100vw - 64px));
  margin-left: 50%;
  transform: translateX(-50%);
}
#pomoge .pomoge-box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center 18%;
  background-size: cover;
}
#pomoge .pomoge-1 { background-image: url('../obrazy/problem-1.webp'); }
#pomoge .pomoge-2 { background-image: url('../obrazy/problem-2.webp'); }
#pomoge .pomoge-3 { background-image: url('../obrazy/problem-3.webp'); }
#pomoge .pomoge-box::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(20, 21, 24, 0) 0%,
    rgba(20, 21, 24, 0) 20%,
    rgba(20, 21, 24, 0.65) 34%,
    rgba(20, 21, 24, 0.97) 46%,
    var(--surface) 55%);
}
#pomoge .pomoge-content {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px;
  padding-top: 150px;   /* strefa odsłoniętego obrazu nad tekstem */
}
#pomoge .pomoge-title { margin-bottom: 12px; }
#pomoge .pomoge-body {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}
/* puenta - tuż pod opisem, żółta kreska jak w "dla kogo" */
#pomoge .pomoge-punch { margin-top: 20px; }
#pomoge .pomoge-punch span {
  display: block;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.6;
  font-weight: 600;
}

/* CENNIK (sesja 1:1) - dwa boksy pricingowe w stylu oferty z Neuro: żółta ramka + subtelny glow.
   Świadome odstępstwo od "bez glow" - tylko te boksy pricingowe. Check jako inline SVG. */
#cennik .container { text-align: center; }
#cennik h2 { margin: 0 auto; }
#cennik { scroll-margin-top: 16px; }   /* skok z CTA prowadzi nieco głębiej - część górnego paddingu chowa się pod nav, całość wjeżdża wyżej (i bez szarego prześwitu: 16 < nav 71px) */
#cennik .cennik-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;   /* Reset ma mniej punktów - niższy box, bez pustego pola nad ceną */
  gap: 28px;
  max-width: 940px;
  margin: 56px auto 0;
}
#cennik .cennik-box {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;   /* Reset - bez wypełnienia, samo tło sekcji w obrysie ramki (stonowany) */
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  transition: transform 200ms ease;
}
#cennik .cennik-box:hover { transform: scale(1.02); }
/* wyróżniony pakiet - jaśniejsze tło (premium = więcej światła) + żółta ramka + glow. Tło i ramka mówią to samo. */
#cennik .cennik-box--featured {
  background: var(--surface-2);
  border-color: rgba(253, 186, 43, 0.45);
  box-shadow: 0 0 60px rgba(253, 186, 43, 0.12);
}
#cennik .cennik-name {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text);
  margin-bottom: 8px;
}
#cennik .cennik-for {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 34ch;
}
#cennik .cennik-for-label { font-style: italic; color: var(--text-soft); }
#cennik .cennik-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#cennik .cennik-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
#cennik .cennik-check {
  flex-shrink: 0;
  color: var(--accent);
  width: 20px; height: 20px;
  margin-top: 0.1em;
}
#cennik .cennik-check svg { display: block; width: 100%; height: 100%; }
#cennik .cennik-item-text { flex: 1; }
#cennik .cennik-item-text strong { font-weight: 700; }
/* stopka tuż pod listą - Reset zostaje niski, bez pustego pola nad ceną */
#cennik .cennik-foot { margin-top: 0; }
#cennik .cennik-divider { height: 1px; background: var(--border); margin: 28px 0; }
#cennik .cennik-price {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
/* cena za sesję - Space Mono, mała, --text-soft (to najsilniejszy argument, musi być czytelna). Pod ceną.
   W Resecie pusta (&nbsp;) - rezerwuje linię, żeby ceny leżały w jednej linii */
#cennik .cennik-per {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
  margin: 6px 0 0;
}
#cennik .cennik-cta { margin-top: 24px; }
#cennik .cennik-cta .cta-primary { width: 100%; }
#cennik .cennik-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--fs-small);
}
#cennik .cennik-secure svg { width: 17px; height: 17px; flex-shrink: 0; }

/* BHP (sesja 1:1) - announcement/disclaimer: karta z ikoną ostrzegawczą (żółty akcent). Pełna treść, nie chowana. */
#bhp .bhp-box {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
}
#bhp .bhp-icon {
  display: inline-flex;
  color: var(--accent);
  margin-bottom: 20px;
}
#bhp .bhp-icon svg { width: 40px; height: 40px; display: block; }
#bhp .bhp-box h2 { margin-bottom: 24px; }
#bhp .bhp-box p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
  text-align: left;
  max-width: 62ch;
  margin: 0 auto;
}
#bhp .bhp-box p + p { margin-top: 18px; }
#bhp .bhp-online strong { color: var(--text); font-weight: 700; }
#bhp .bhp-box a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FAQ (sesja 1:1) - akordeon (natywny <details>, zero JS). Ciemne tło jak BHP. */
#faq .container { text-align: center; }
#faq h2 { margin: 0 auto; }
#faq .faq-list { max-width: 720px; margin: 48px auto 0; text-align: left; }
#faq .faq-item { border-bottom: 1px solid var(--border); }
#faq .faq-item:first-child { border-top: 1px solid var(--border); }
#faq .faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
#faq .faq-item summary::-webkit-details-marker { display: none; }
/* wskaźnik +/- żółty po prawej */
#faq .faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1;
  margin-top: -2px;
}
#faq .faq-item[open] summary::after { content: '\2212'; }
#faq .faq-answer {
  padding: 0 44px 24px 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}
/* płynne rozwijanie/zwijanie FAQ - nowoczesny ::details-content (zero JS).
   Na starszych przeglądarkach degraduje się do natychmiastowego otwarcia. Wyłączone przy reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  #faq .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 320ms ease, opacity 260ms ease, content-visibility 320ms allow-discrete;
  }
  #faq .faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* KIM JESTEM */
#kim-jestem .kj-grid {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 1040px;
  margin: 0 auto;
}
#kim-jestem .kj-photo {
  flex: 0 0 360px;
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
#kim-jestem .kj-photo-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--surface);
  background-image: url('../obrazy/bartek-portret.webp');
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#kim-jestem .kj-photo-inner .placeholder-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
#kim-jestem .kj-text { flex: 1; min-width: 0; }
#kim-jestem .kj-label {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--accent);
  margin-bottom: 16px;
}
#kim-jestem h2 { margin-bottom: 28px; }
#kim-jestem .kj-note {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 40px 32px;
}
#kim-jestem .kj-note-copy { position: relative; }
#kim-jestem .kj-note p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
}
/* mocne, krótkie pojedyncze linie - białe, leciutko większe */
#kim-jestem .kj-note p.kj-line {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
/* rozwijana historia - natywny <details>, zero JS.
   flex + order: przełącznik ląduje POD treścią (zamknięty pod teaserem, otwarty na samym dole) */
#kim-jestem .kj-more {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
#kim-jestem .kj-more-body { order: 1; }
#kim-jestem .kj-more > summary {
  order: 2;
  align-self: flex-start;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 22px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: border-color 150ms ease, color 150ms ease;
}
#kim-jestem .kj-more > summary::-webkit-details-marker { display: none; }
#kim-jestem .kj-more > summary:hover { border-color: var(--accent); color: var(--accent); }
/* etykieta przełącza się na "Zwiń" po rozwinięciu; przełącznik otrzymuje odstęp nad sobą, gdy jest na dole */
#kim-jestem .kj-more .lbl-less { display: none; }
#kim-jestem .kj-more[open] .lbl-more { display: none; }
#kim-jestem .kj-more[open] .lbl-less { display: inline; }
#kim-jestem .kj-more[open] > summary { margin-top: 28px; }
/* podpis odręczny - jedyny akcent Caveat w treści strony */
#kim-jestem .kj-note p.kj-sign {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--accent);
  margin: 44px 0 0;
}

/* POMOGĘ CI JEŚLI (dla kogo) - lista edytorialna: cztery wiersze, każdy grid 38%/1fr.
   Bez tła sekcji, bez kart, bez ramek/zaokrągleń. Jedyny żółty w wierszu = konkluzja. */
#dla-kogo .dk-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 48px;
}
#dla-kogo .dk-heading { text-align: left; margin-bottom: 64px; }
#dla-kogo .dk-row {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
}
/* kolumna lewa: numer + nagłówek */
#dla-kogo .dk-num {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--accent);
  margin-bottom: 12px;
}
/* kolumna prawa: objawy + konkluzja */
#dla-kogo .dk-symptoms {
  font-size: var(--fs-body);
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 54ch;
  text-wrap: pretty;
}
#dla-kogo .dk-symptoms em { font-style: italic; }
/* konkluzja: pionowa żółta kreska (jak w Neuro) + tekst w --text, waga 600 */
#dla-kogo .dk-outcome {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  line-height: var(--lh-body);
}

/* JAK MOGĘ CI POMÓC - trzy drogi (Neurokreatorzy / Sesje 1:1 / Programy) */
/* sekcja na pełny ekran - treść wyśrodkowana w pionie */
#jak-pomoge {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
}
#jak-pomoge .jp-heading { text-align: center; }
#jak-pomoge .jp-sub {
  text-align: center;
  margin: 20px auto 0;
  max-width: 60ch;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.55;
}
#jak-pomoge .jp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
/* karta z obrazem u góry (styl Wrzoska); płynny, leciutki zoom na hover */
#jak-pomoge .path-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease;
}
#jak-pomoge .path-card:hover { transform: scale(1.02); }
#jak-pomoge .path-media {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  margin-bottom: 24px;
}
#jak-pomoge .path-media-1 { background-image: url('../obrazy/droga-neurokreatorzy.webp'); }
#jak-pomoge .path-media-2 { background-image: url('../obrazy/droga-sesje.webp'); }
#jak-pomoge .path-media-3 { background-image: url('../obrazy/droga-programy.webp'); }
#jak-pomoge .path-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}
#jak-pomoge .path-label {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--text-muted);
  margin-bottom: 14px;
}
#jak-pomoge .path-content .card-title { margin-bottom: 14px; }
#jak-pomoge .path-body {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-bottom: 28px;
}
/* baton na całą szerokość, dosunięty do dołu (równa linia mimo różnej długości opisu) */
#jak-pomoge .path-content .cta-primary,
#jak-pomoge .path-content .cta-secondary {
  margin-top: auto;
  width: 100%;
}
/* Programy - "Wkrótce": nieaktywny, nieklikalny - szara ramka, szary napis, bez wypełnienia */
#jak-pomoge .cta-soon {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
}
#jak-pomoge .cta-soon:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

/* KONTAKT - layout jak u Wrzoska (lewa: nagłówek, prawa: formularz), ciemna paleta */
/* sekcja na pełny ekran - karta wyśrodkowana w pionie (kotwica z nav ląduje na całej sekcji) */
#kontakt {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 48px;
  padding-bottom: 48px;
  scroll-margin-top: 16px;   /* skok z nav prowadzi nieco niżej - ląduje na czarnym, bez szarego prześwitu Opinii nad sekcją */
}
#kontakt .kontakt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
}
#kontakt .kontakt-intro .overline { margin-bottom: 20px; color: var(--accent); }
#kontakt .kontakt-intro h2 { margin-bottom: 20px; }
#kontakt .kontakt-lead {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}
#kontakt .kontakt-mail {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}
#kontakt .kontakt-mail a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
/* formularz */
#kontakt .kontakt-form { display: flex; flex-direction: column; gap: 16px; }
#kontakt .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#kontakt input,
#kontakt select,
#kontakt textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 15px 18px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;            /* min 16px - iOS nie zoomuje pola przy focusie */
  line-height: 1.4;
}
#kontakt textarea { resize: vertical; min-height: 130px; }
#kontakt select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* własna, żółta strzałka (chevron) zamiast czarnej systemowej - spójna z formularzem */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FDBA2B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 46px;
}
#kontakt input::placeholder,
#kontakt textarea::placeholder { color: var(--text-muted); }
#kontakt select:invalid { color: var(--text-muted); }   /* placeholder-option na szaro dopóki nic nie wybrano */
#kontakt input:focus,
#kontakt select:focus,
#kontakt textarea:focus { outline: none; border-color: var(--accent); }
#kontakt .form-privacy {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}
#kontakt .form-privacy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#kontakt .kontakt-form .cta-primary { align-self: flex-start; margin-top: 8px; }

/* komunikat błędu wysyłki (JS pokazuje przy nieudanym fetchu) */
#kontakt .form-error { color: #F08A7A; font-size: 14px; line-height: 1.5; margin: 0; }
#kontakt .form-error a { color: #F08A7A; text-decoration: underline; text-underline-offset: 2px; }

/* komunikat po udanej wysyłce (JS ukrywa formularz, pokazuje to) */
#kontakt .kontakt-success {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 24px 26px;
}
#kontakt .kontakt-success-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
#kontakt .kontakt-success-text { color: var(--text-soft); line-height: 1.6; margin: 0; }
#kontakt .kontakt-success-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* OPINIE - karuzela (auto-przesuw prawo->lewo + lightbox).
   ODSTĘPSTWO od "zero animacji" i "zero JS" - świadoma decyzja Wiktora, 1:1 z landingu Neuro. */
#opinie { scroll-margin-top: 16px; }   /* skok z nawigacji "Opinie" ląduje nieco niżej - bez szarego prześwitu nad sekcją */
#opinie .op-heading { text-align: center; }
#opinie .op-cta { text-align: center; margin-top: 44px; }

.opinie-strip {
  --op-item-w: 500px;   /* proporcja 5:4 (jak w Neuro) - obraz wypełnia item bez marginesów */
  --op-item-h: 400px;
  --op-gap: 16px;
  position: relative;
  background: transparent;   /* dziedziczy tło sekcji - seamless zarówno na szarej (główna) jak i ciemnej (sesje 1:1) */
  padding: 56px 0;
  margin-top: 40px;
  overflow: hidden;
}
/* okno paska - fade na lewej i prawej krawędzi. Przewijalne poziomo (JS + ręcznie), pasek ukryty. */
.opinie-viewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;              /* Firefox - ukryj pasek */
  cursor: grab;                       /* podpowiedź: można chwycić i przeciągnąć */
  user-select: none;                  /* drag nie zaznacza treści */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.opinie-viewport::-webkit-scrollbar { display: none; }   /* WebKit - ukryj pasek */
.opinie-viewport.is-dragging { cursor: grabbing; }
/* track: 3 zestawy obok siebie, przesuw o jeden zestaw = bezszwowa pętla.
   desktop: jeden zestaw = 6 x 500 + 6 x 16 = 3096px */
.opinie-track {
  display: flex;
  gap: var(--op-gap);
  width: max-content;
  animation: op-marquee 60s linear infinite;
}
@keyframes op-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-3096px); }
}
.opinie-item {
  flex: 0 0 var(--op-item-w);
  width: var(--op-item-w);
  height: var(--op-item-h);
  overflow: hidden;
  transition: transform 200ms ease;
  will-change: transform;
}
.opinie-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
  -webkit-user-drag: none;            /* nie startuj natywnego drag&drop obrazka podczas przewijania */
  user-select: none;
}
.opinie-item:hover { transform: scale(1.05); }
/* dostępność: brak ruchu = zatrzymana animacja */
@media (prefers-reduced-motion: reduce) {
  .opinie-track { animation: none; }
}
/* placeholder do czasu wgrania folderu opinii przez Wiktora (podmiana na <img> = trywialna) */
.opinie-item.is-placeholder {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.opinie-item.is-placeholder span {
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* LIGHTBOX opinii - fixed overlay, jeden reużywany element (JS podmienia src) */
.op-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.op-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
}
.op-lightbox-img {
  max-height: 85vh;
  max-width: 90vw;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  cursor: pointer;
  transform: scale(0.92);
  opacity: 0;
  transition: transform 280ms ease, opacity 280ms ease;
}
.op-lightbox.is-open .op-lightbox-img {
  transform: scale(1);
  opacity: 1;
}
.op-lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(11, 11, 12, 0.6);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: border-color 150ms ease, color 150ms ease;
}
.op-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* STOPKA */
.footer {
  background: var(--bg-alt);
  padding: 56px 0 40px;
}
.footer-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 48px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.05;
}
.footer-brand-name { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--text); }
.footer-brand-tag { font-family: var(--font-hand); font-weight: 600; font-size: 17px; color: var(--accent); margin-top: 1px; }
.footer-social { display: flex; align-items: center; gap: 16px; }
.footer-social-label { font-size: var(--fs-small); color: var(--text-muted); }
.footer-social-icons { display: flex; align-items: center; gap: 10px; }
.footer-social-icons a {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 150ms ease, color 150ms ease;
}
.footer-social-icons a:hover { border-color: var(--accent); color: var(--accent); }
.footer-social-icons svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.footer-legal { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); flex-wrap: wrap; }
.footer-legal a, .footer-cc {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer-legal a:hover, .footer-cc:hover { color: var(--accent); }
.footer-cc {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-small); padding: 0;
}
.footer-sep { color: var(--border); }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.footer-author { font-size: var(--fs-small); color: var(--text-muted); }
.footer-author a { color: var(--text-muted); text-decoration: none; transition: color 150ms ease; }
.footer-author a:hover { color: var(--accent); }
.footer-copy { font-size: var(--fs-small); color: var(--text-muted); }

/* ===== 8. MEDIA QUERIES - mobile ===== */
@media (max-width: 768px) {
  :root {
    --fs-h1: 30px;  --fs-h2: 28px;  --fs-h3: 20px;
    --fs-body: 17px; --fs-number: 34px; --fs-button: 16px;
  }
  .container, .nav-inner { padding: 0 20px; }
  section { padding: 72px 0; }

  /* nav: linki desktopowe chowamy, zostaje przełącznik Menu (strona główna).
     Na podstronach z minimalnym nav (.nav--minimal) CTA "Umów sesję 1:1" zostaje widoczny. */
  .nav-links { display: none; }
  .nav-mobile { display: block; position: relative; margin-left: auto; }
  .nav-mobile > summary .menu-caret { width: 16px; height: 16px; transition: transform 200ms ease; }
  .nav-mobile[open] > summary .menu-caret { transform: rotate(180deg); }
  .nav-mobile > summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-small);
    color: var(--text);
    padding: 10px 4px;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
  }
  .nav-mobile > summary::-webkit-details-marker { display: none; }
  .nav-mobile[open] > summary { color: var(--accent); }
  .nav-mobile ul {
    position: absolute; right: 0; top: 100%;
    margin-top: 12px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    display: flex; flex-direction: column;
  }
  .nav-mobile ul a {
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--fs-body);
    padding: 12px 14px;
    border-radius: 8px;
    display: block;
  }
  .nav-mobile ul a:hover,
  .nav-mobile ul a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

  /* hero - pełny widok (hero focus): treść wyśrodkowana w pionie, obraz za nagłówkiem */
  #hero { min-height: calc(100svh - var(--nav-h)); padding-top: 24px; padding-bottom: 24px; }
  #hero h1 { max-width: 100%; overflow-wrap: break-word; }
  #hero h1 br { display: none; }   /* na mobile zdanie zawija się naturalnie (~3 linie) */
  /* tło hero na mobile: kadr wyżej (twarze za nagłówkiem) i leciutko w lewo */
  #hero .hero-bg {
    transform: none;
    background-size: 128%;
    background-position: 56% 16%;   /* leciutko niżej - oczy między nagłówkiem a sub */
    background-repeat: no-repeat;
    opacity: 0.5;
  }

  /* kim jestem - stack, foto góra / tekst dół, bez sticky */
  #kim-jestem .kj-grid { flex-direction: column; gap: 32px; }
  #kim-jestem .kj-photo {
    flex: none; width: 100%; max-width: 320px;
    position: static; top: auto;
    margin: 0 auto;
  }
  #kim-jestem .kj-text { max-width: 100%; }
  #kim-jestem h2 { margin-bottom: 24px; }
  #kim-jestem .kj-note { padding: 28px 24px; }
  #kim-jestem .kj-note p.kj-line { font-size: 17px; }
  #kim-jestem .kj-note p.kj-sign { font-size: 38px; }

  /* dla kogo - lista edytorialna: jedna kolumna, numer i nagłówek na górze wiersza */
  #dla-kogo .dk-wrap { padding: 0 20px; }
  #dla-kogo .dk-heading { margin-bottom: 40px; }
  #dla-kogo .dk-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  #dla-kogo .dk-symptoms { max-width: none; }

  /* jak mogę Ci pomóc - jedna kolumna, bez pełnego ekranu (3 karty nie zmieszczą się w 1 widoku) */
  #jak-pomoge { min-height: 0; display: block; padding: 72px 0; }
  #jak-pomoge .jp-heading { line-height: 1.4; }   /* highlight "Ciebie" nie nachodzi na linię wyżej */
  #jak-pomoge .jp-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }

  /* opinie - na mobile auto-przesuw (JS) + swipe palcem; mniejsze itemy, fade i klik zostają */
  .opinie-strip { --op-item-w: 230px; --op-item-h: 184px; --op-gap: 10px; padding: 40px 0; }
  .opinie-viewport {
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  /* kontakt - jedna kolumna, mniejszy padding karty; bez sztywnego pełnego ekranu (formularz jest wysoki) */
  #kontakt { min-height: 0; display: block; }
  #kontakt .kontakt-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 22px;
  }
  #kontakt .form-row { grid-template-columns: 1fr; }
  #kontakt .kontakt-form .cta-primary { width: 100%; }

  /* stopka mobile: 3 grupy - (brand + sociale w rzędzie), (linki prawne wyśrodkowane), (© + autor wyśrodkowane) */
  .footer-inner { padding: 0 20px; }
  .footer-top { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 30px; margin-top: 44px; }
  .footer-legal { justify-content: center; }
  .footer-meta { align-items: center; text-align: center; gap: 8px; }

  /* sub-nagłówki: jeden, mniejszy rozmiar w całej stronie + balans linii (bez sierotek typu "temu.") */
  #hero .hero-sub,
  .page-hero .page-hero-sub,
  #jak-pomoge .jp-sub { font-size: 16px; max-width: 100%; text-wrap: balance; line-height: 1.5; }
  #hero .hero-fade { height: 72px; }
  #hero .hero-cta .cta-primary { width: 100%; }

  /* hero podstrony na mobile - pełny widok, treść wyśrodkowana w pionie (symetryczny padding) */
  .page-hero { padding-top: 32px; padding-bottom: 32px; }
  .page-hero .page-hero-cta .cta-primary { width: 100%; }
  .page-hero .hero-bg {
    transform: none;
    background-image: url('../obrazy/obraz-hero-sesje-mobile.webp');   /* osobny, pionowy kadr na telefon */
    background-size: 112%;                 /* lekki zoom (nieco większe niż contain) */
    background-position: center 50%;       /* leciutko wyżej niż wcześniej */
    background-repeat: no-repeat;
    opacity: 0.6;
  }

  /* proces - przełącznik pełnej szerokości, timeline jako jedna kolumna (linia po lewej) */
  /* intro procesu: mniejszy o tyle, by pierwsze zdanie zmieściło się w jednej linii (max 2 linie total) */
  #proces .proces-intro { font-size: 14px; line-height: 1.5; max-width: 100%; text-wrap: initial; }
  .proces-tabs { display: flex; width: 100%; }
  .proces-tab { flex: 1; text-align: center; padding: 10px 6px; font-size: 13px; }
  #proces .timeline { margin-top: 36px; }
  #proces .timeline::before { left: 7px; transform: none; }
  #proces .tl-step { width: 100%; left: 0; padding-left: 36px; padding-right: 0; margin-bottom: 24px; }
  #proces .tl-right { left: 0; }
  #proces .tl-left .tl-node,
  #proces .tl-right .tl-node { left: 1px; right: auto; }

  /* obiekcje - tabela stackuje się do jednej kolumny; nagłówek kolumn zbędny */
  #obiekcje .ob-wrap { padding: 0 20px; }
  #obiekcje .ob-heading { margin-bottom: 32px; }
  #obiekcje .ob-thead { display: none; }
  #obiekcje .ob-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  /* mobile: bez nagłówków kolumn "zamiast" trzeba oznaczyć inaczej - mała etykieta + przekreślenie,
     żeby nikt nie pomyślał, że to oferta */
  #obiekcje .ob-old {
    position: relative;
    padding-top: 20px;
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
    text-decoration-thickness: 1px;
  }
  #obiekcje .ob-old::before {
    content: "Zamiast";
    position: absolute;
    top: 0; left: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
  }
  #obiekcje .ob-new {
    position: relative;
    padding-top: 20px;
    padding-left: 14px;
    border-left: 2px solid var(--accent);
    font-size: 18px;
  }
  #obiekcje .ob-new::before {
    content: "Dostajesz";
    position: absolute;
    top: 0; left: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--accent);
  }

  /* pomogę Ci jeśli - jedna kolumna, fade zostaje */
  #pomoge .pomoge-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  #pomoge .pomoge-content { padding: 22px; padding-top: 140px; }
  #pomoge .pomoge-punch { margin-top: 16px; padding-top: 0; }

  /* cennik - boksy jeden pod drugim */
  #cennik .cennik-grid { grid-template-columns: 1fr; gap: 20px; max-width: 480px; margin-top: 40px; }
  #cennik .cennik-box { padding: 28px 22px; }
  #cennik .cennik-price { font-size: 38px; }

  /* bhp - mniejszy padding karty */
  #bhp .bhp-box { padding: 32px 24px; }

  /* faq - mniejszy nagłówek pytania, odpowiedź bez prawego marginesu */
  #faq .faq-item summary { font-size: 17px; }
  #faq .faq-answer { padding-right: 0; }
}