/* Tętno - strona demonstracyjna Telar
   Dwie części usługi w dwóch kolorach: morela to trening (wysiłek), szałwia to dieta
   (regeneracja), śliwka spina całość. Kroje: Unbounded (nagłówki), Onest (tekst),
   IBM Plex Mono (liczby: tętno, czasy, ceny). Wszystkie lokalnie, licencja SIL OFL. */

@font-face { font-family: "Unbounded"; src: url(fonts/unbounded-latin-ext.woff2) format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Unbounded"; src: url(fonts/unbounded-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url(fonts/onest-latin-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url(fonts/onest-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-500-latin-ext.woff2) format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-600-latin-ext.woff2) format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-600-latin.woff2) format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Jasny motyw: chłodna biel, grafit, morela na przyciskach (grafit na niej 7,4 : 1). */
:root {
  color-scheme: light;
  --tlo: #F5F6FA;
  --tlo-2: #ECEDF3;
  --tekst: #1E1B24;             /* 15,7 : 1 */
  --tekst-2: #5A5563;           /* 6,7 : 1 */
  --naglowki: #3B1F4A;          /* śliwka: 13,1 : 1 */
  --linia: #DCDCE6;
  --linia-mocna: #B9B7C6;
  --akcent: #FF8C61;            /* morela: tło przycisków */
  --akcent-hover: #FFA27F;
  --na-akcencie: #1E1B24;
  --morela-tekst: #97391A;      /* morela jako tekst: 6,7 : 1, na tle zegarka min. 5 : 1 */
  --szalwia-tekst: #4F6B49;     /* szałwia jako tekst: 5,5 : 1 */
  /* Tła sekcji półprzezroczyste - zegarek w tle ma prześwitywać przez całą stronę. */
  --tlo-trening: rgb(255 140 97 / .1);
  --tlo-dieta: rgb(167 196 160 / .2);
  --ramka-trening: #F6EBEB;       /* pełny kolor tła „Treningu” - obwódka małego zdjęcia */
  --zegarek-krycie: .11;       /* tekst na zegarku zostaje min. 5 : 1 */
  --pole: #FFFFFF;
  --stopka: #3B1F4A;
  --cien: rgb(30 27 36 / .12);

  /* Tarcza licznika to „zegarek” - te same kolory w obu motywach. */
  --sliwka: #3B1F4A;
  --morela: #FF8C61;
  --szalwia: #A7C4A0;

  --kroj-naglowek: "Unbounded", "Arial Black", sans-serif;
  --kroj: "Onest", system-ui, sans-serif;
  --kroj-liczby: "IBM Plex Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --okres: .833s;               /* 60 / tętno - ustawia skrypt, od tego zależy bicie serca i bieg linii pulsu */
  --margines: clamp(16px, 4vw, 48px);
  --szer: min(1180px, 100% - 2 * var(--margines));
  --naglowek-h: 66px;
}

/* Ciemny motyw: wieczór po treningu - głęboka śliwka zamiast czerni. */
:root[data-motyw="ciemny"] {
  color-scheme: dark;
  --tlo: #17121C;
  --tlo-2: #201A27;
  --tekst: #F1EEF5;             /* 16 : 1 */
  --tekst-2: #B7AFC2;           /* 8,7 : 1 */
  --naglowki: #F1EEF5;
  --linia: #2F2838;
  --linia-mocna: #4A4254;
  --akcent-hover: #FFA27F;
  --na-akcencie: #17121C;       /* 8 : 1 na moreli */
  --morela-tekst: #FF8C61;      /* 8 : 1 */
  --szalwia-tekst: #A7C4A0;     /* 9,7 : 1 */
  --tlo-trening: rgb(255 140 97 / .07);
  --tlo-dieta: rgb(167 196 160 / .07);
  --ramka-trening: #271B21;
  --zegarek-krycie: .2;
  --pole: #201A27;
  --stopka: #0F0B13;
  --cien: rgb(0 0 0 / .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 400 1.0625rem/1.65 var(--kroj);
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s, color .3s;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: var(--naglowki); }
h2 { font: 700 clamp(1.6rem, 3vw, 2.35rem)/1.15 var(--kroj-naglowek); letter-spacing: -.02em; margin-bottom: .6em; }
h3 { font: 600 1.1rem/1.3 var(--kroj-naglowek); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--morela-tekst); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--morela-tekst); outline-offset: 3px; }
::selection { background: var(--akcent); color: #1E1B24; }
.pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--akcent); color: #1E1B24; padding: .5em 1em; }
.pomin:focus { left: 8px; }
.sekcja { width: var(--szer); margin-inline: auto; padding-block: clamp(56px, 7vw, 96px); }
.sekcja__wstep { color: var(--tekst-2); max-width: 58ch; }
.znacznik { margin-bottom: .8rem; font: 600 .85rem/1 var(--kroj-liczby); letter-spacing: .06em; text-transform: uppercase; color: var(--morela-tekst); }
.znacznik--dieta { color: var(--szalwia-tekst); }

/* ---------- Przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .5em 1.5em; max-width: 100%; text-align: center;
  background: var(--akcent); color: var(--na-akcencie);
  border: 2px solid var(--akcent); border-radius: 999px;
  font: 600 1rem/1.15 var(--kroj); text-decoration: none;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.przycisk:active { transform: scale(.97); }
.przycisk--obrys { background: transparent; color: var(--tekst); border-color: var(--linia-mocna); }
.przycisk--maly { min-height: 42px; padding: 0 1.2em; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) {
  .przycisk:hover { background: var(--akcent-hover); border-color: var(--akcent-hover); }
  .przycisk--obrys:hover { background: transparent; border-color: var(--tekst); }
}

/* ---------- Nagłówek ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 50; height: var(--naglowek-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--margines);
  background: var(--tlo); border-bottom: 1px solid var(--linia);
  transition: background-color .3s;
}
.logo { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--naglowki); text-decoration: none; }
.logo__imie { font: 700 1.05rem/1 var(--kroj-naglowek); letter-spacing: -.01em; white-space: nowrap; }
.logo__marka { padding: .3rem .5rem .25rem; border-radius: 6px; background: var(--sliwka); color: var(--morela); font: 800 .7rem/1 var(--kroj-naglowek); letter-spacing: .12em; text-transform: uppercase; }
:root[data-motyw="ciemny"] .logo__marka { background: #2C1F36; }
.logo__znak { width: 34px; height: 20px; color: var(--morela-tekst); }
.nawigacja { display: flex; gap: clamp(1rem, 2vw, 1.8rem); }
.nawigacja a { color: var(--tekst); text-decoration: none; font-weight: 500; padding-block: .6rem; }
.nawigacja a:hover { color: var(--morela-tekst); }
.naglowek__narzedzia { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.motyw {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: transparent; color: var(--tekst); border: 2px solid var(--linia-mocna); border-radius: 50%; cursor: pointer;
  transition: border-color .2s ease;
}
.motyw:hover { border-color: var(--tekst); }
.motyw svg { width: 20px; height: 20px; }
.motyw .slonce, :root[data-motyw="ciemny"] .motyw .ksiezyc { display: none; }
:root[data-motyw="ciemny"] .motyw .slonce { display: block; }
.przelacznik { display: none; }
@media (max-width: 899px) {
  .przelacznik { display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
  .przelacznik span { display: block; width: 22px; height: 2px; background: var(--tekst); transition: transform .2s var(--ease-out), opacity .2s; }
  .przelacznik[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .przelacznik[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .przelacznik[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nawigacja {
    position: absolute; inset: var(--naglowek-h) 0 auto; display: none; flex-direction: column; gap: 0;
    background: var(--tlo); padding: .25rem var(--margines) 1rem; box-shadow: 0 16px 24px var(--cien); border-bottom: 1px solid var(--linia);
  }
  .nawigacja.otwarta { display: flex; }
  .nawigacja a { padding: .85rem 0; border-bottom: 1px solid var(--linia); font-size: 1.05rem; }
  .nawigacja a:last-child { border-bottom: 0; }
}
@media (max-width: 719px) { .naglowek__umow { display: none; } }

/* ---------- Wejście ---------- */
.wejscie {
  width: var(--szer); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center;
  min-height: min(calc(100svh - var(--naglowek-h) - 60px), 640px);
  padding-block: clamp(40px, 6vw, 72px);
}
.wejscie__tekst { container-type: inline-size; }
/* Unbounded jest bardzo szeroki - rozmiar liczony od szerokości kolumny, żeby „siłowni.” nie wyszło poza ekran. */
.wejscie h1 { font: 800 min(9.2cqi, 4.3rem)/1.05 var(--kroj-naglowek); letter-spacing: -.035em; margin-bottom: .5em; }
.wejscie__lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--tekst-2); max-width: 40ch; }
.wejscie__przyciski { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.wejscie__info { margin: 1.1rem 0 0; font-size: .95rem; color: var(--tekst-2); }

/* Tarcza licznika tętna - „zegarek sportowy”. */
.serce { width: 1em; height: .92em; flex: none; color: var(--morela); animation: bicie var(--okres) var(--ease-out) infinite; transform-origin: 50% 60%; }
@keyframes bicie {
  0%, 45%, 100% { transform: scale(1); }
  12% { transform: scale(1.22); }
  26% { transform: scale(1.06); }
}
/* ---------- Zegarek w tle ----------
   Przypięty do ekranu pod całą treścią (treść przewija się po nim). W wejściu na komputerze
   wyraźny, po przewinięciu przygasa do lekkiego tła, które nie przeszkadza w czytaniu. */
.tlo-zegarek {
  position: fixed; inset: var(--naglowek-h) 0 0; z-index: 0; pointer-events: none; overflow: hidden;
  display: grid; place-items: center;
  opacity: var(--zegarek-krycie); transition: opacity .6s ease;
}
main { position: relative; z-index: 1; }
/* Stopka: tło pod zegarkiem, tekst nad nim - zegarek widać też na ciemnym pasku stopki. */
.stopka__kolumny, .stopka__demo { position: relative; z-index: 1; }
.zegarek { --w: min(76vw, 44vh, 340px); display: grid; justify-items: center; }
/* Pasek: fragmenty u góry i u dołu, znikające w stronę krawędzi ekranu. */
.zegarek__pasek {
  width: 62%; height: calc(var(--w) * .55); background: #2A1535;
  box-shadow: inset 0 0 0 calc(var(--w) * .012) rgb(255 255 255 / .06);
}
.zegarek__pasek--gora {
  border-radius: calc(var(--w) * .05) calc(var(--w) * .05) 0 0; margin-bottom: calc(var(--w) * -.04);
  -webkit-mask: linear-gradient(to top, #000 45%, transparent); mask: linear-gradient(to top, #000 45%, transparent);
}
.zegarek__pasek--dol {
  margin-top: calc(var(--w) * -.04);
  /* dziurki paska */
  background: radial-gradient(circle, #17121C 0 calc(var(--w) * .022), transparent calc(var(--w) * .026)) 50% calc(var(--w) * .12) / 100% calc(var(--w) * .11) repeat-y, #2A1535;
  -webkit-mask: linear-gradient(to bottom, #000 45%, transparent); mask: linear-gradient(to bottom, #000 45%, transparent);
}
.tarcza {
  container-type: inline-size; position: relative;
  width: var(--w); aspect-ratio: 1; border-radius: 32%;
  display: grid; align-content: center; justify-items: center; gap: 2cqi; padding: 10%;
  background: var(--sliwka); color: #F5F6FA;
  box-shadow: 0 0 0 calc(var(--w) * .04) #2A1535, 0 30px 60px -30px rgb(59 31 74 / .7);
}
:root[data-motyw="ciemny"] .tarcza { box-shadow: 0 0 0 calc(var(--w) * .04) #2A1535, 0 0 0 calc(var(--w) * .07) rgb(255 140 97 / .06), 0 30px 60px -30px rgb(0 0 0 / .8); }
/* przycisk z boku koperty */
.tarcza::after { content: ""; position: absolute; right: -7.5%; top: 38%; width: 4%; height: 18%; border-radius: 0 6px 6px 0; background: #2A1535; }
@media (min-width: 900px) {
  .tlo-zegarek { justify-items: end; padding-right: max(var(--margines), (100vw - 1180px) / 2); }
  .zegarek { --w: min(40vh, 330px); }
}
/* W wejściu zegarek jest wyraźny; po przewinięciu przygasa do tła. */
:root:not(.po-wejsciu) .tlo-zegarek { opacity: 1; }
/* Telefon i tablet: zegarek stoi na górze wejścia, nad nagłówkiem - jak zdjęcie. Wejście ma nad
   tekstem tyle miejsca, ile zajmuje tarcza, więc w pierwszym widoku nic nie zasłania liczby. */
@media (max-width: 899px) {
  :root { --w-tel: 180px; --skala-tel: 1.6; }
  /* Przygasa szybko - tekst wejścia wjeżdża na tarczę od pierwszego przewinięcia. */
  .tlo-zegarek { align-items: start; transition: opacity .2s var(--ease-out); }
  /* Środek tarczy: 14 px odstępu + krótki górny pasek (0,16 szer.) + pół tarczy (0,5 szer.). */
  .zegarek {
    --w: var(--w-tel); margin-top: 14px;
    transform-origin: 50% calc(var(--w) * .66);
    transition: transform .7s var(--ease-out);
  }
  /* Po przewinięciu wejścia zegarek płynnie rośnie i zjeżdża na środek ekranu, przygasając do tła. */
  :root.po-wejsciu .zegarek {
    transform: translateY(calc((100vh - var(--naglowek-h)) / 2 - 14px - var(--w) * .66)) scale(var(--skala-tel));
    transform: translateY(calc((100dvh - var(--naglowek-h)) / 2 - 14px - var(--w) * .66)) scale(var(--skala-tel));   /* dvh: środek ekranu także przy pasku adresu */
  }
  .zegarek__pasek { height: calc(var(--w) * .2); }
}
.tarcza p { margin: 0; }
/* Wszystkie rozmiary w cqi (procent szerokości tarczy) - tarcza skaluje się w całości i zostaje kwadratem. */
.tarcza__gora { display: flex; align-items: center; gap: 2.5cqi; font: 500 max(11px, 5.2cqi)/1 var(--kroj-liczby); letter-spacing: .12em; text-transform: uppercase; color: #D9D2E0; }
.tarcza__gora .serce { font-size: 1.6em; }
.tarcza__liczba { display: flex; align-items: baseline; gap: 2cqi; font: 600 36cqi/1 var(--kroj-liczby); color: var(--morela); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.tarcza__jedn { font-size: .22em; letter-spacing: .08em; color: #D9D2E0; }
.tarcza__opis { font: 500 max(12px, 6cqi)/1.2 var(--kroj-liczby); color: var(--szalwia); }

/* Linia pulsu: pasek z jednym uderzeniem powtarzanym w poziomie, przesuwany o jedno uderzenie na okres. */
.puls { height: 44px; overflow: hidden; --puls-kolor: var(--morela-tekst); }
.puls--dieta { --puls-kolor: var(--szalwia-tekst); }
.puls--po-treningu { background: var(--tlo-trening); transition: background-color .3s; }
.puls__tasma {
  width: calc(100% + 140px); height: 100%; background: var(--puls-kolor); opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath d='M0 26h40l4-5 4 5h10l3 5 6-27 6 33 4-11h14q8-10 16 0h29' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 140px 44px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath d='M0 26h40l4-5 4 5h10l3 5 6-27 6 33 4-11h14q8-10 16 0h29' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 140px 44px repeat-x;
  animation: bieg var(--okres) linear infinite;
}
@keyframes bieg { to { transform: translateX(-140px); } }
@media (prefers-reduced-motion: reduce) {
  .serce, .puls__tasma { animation: none; }
}

/* ---------- O mnie ---------- */
.o-mnie { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.o-mnie__tekst > p { max-width: 56ch; }
/* Miejsce na zdjęcie trenerki: ramka w kolorach strony, z opisem, jakie zdjęcie tu trafi u klienta. */
.portret {
  margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; padding: clamp(20px, 3vw, 32px);
  display: grid; align-content: end; gap: 1rem;
  background:
    radial-gradient(circle at 72% 24%, rgb(255 140 97 / .35), transparent 50%),
    radial-gradient(circle at 18% 18%, rgb(167 196 160 / .22), transparent 40%),
    var(--sliwka);
  color: #F5F6FA;
}
.portret__znak { width: 48px; height: 48px; color: var(--morela); }
.portret figcaption { font-size: .98rem; line-height: 1.5; color: #D9D2E0; max-width: 32ch; }
.portret figcaption b { display: block; margin-bottom: .2rem; font: 700 1.15rem/1.3 var(--kroj-naglowek); color: #F5F6FA; }

/* ---------- Dla kogo ---------- */
.dla-kogo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.dla-kogo__foto { margin: 0; }
.dla-kogo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; border-radius: 28px; }
.sytuacje { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.sytuacje li { padding-top: 1.4rem; border-top: 1px solid var(--linia-mocna); }
.sytuacje h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: .45rem; }
.sytuacje p { margin: 0; color: var(--tekst-2); max-width: 52ch; }

/* ---------- Współpraca ---------- */
.kroki { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); counter-reset: krok; }
.kroki li { counter-increment: krok; position: relative; padding-top: 1.1rem; border-top: 3px solid var(--naglowki); }
.kroki li::before { content: "0" counter(krok); position: absolute; top: -1.55rem; right: 0; font: 600 .85rem/1 var(--kroj-liczby); color: var(--tekst-2); }
.kroki__kiedy { margin-bottom: .6rem; font: 500 .9rem/1.2 var(--kroj-liczby); color: var(--morela-tekst); }
.kroki h3 { margin-bottom: .45rem; }
.kroki li > p:last-child { color: var(--tekst-2); margin: 0; }

/* ---------- Trening ---------- */
.trening { background: var(--tlo-trening); transition: background-color .3s; }
.trening__srodek {
  width: var(--szer); margin-inline: auto; padding-block: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center;
}
.trening__tekst > p:not(.znacznik) { max-width: 54ch; }
.trening__gdzie-tytul { margin: 1.8rem 0 .6rem; }
.miejsca { list-style: none; margin: 0; padding: 0; }
.miejsca li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: .2rem 1rem; padding: .7rem 0; border-top: 1px solid var(--linia-mocna); }
.miejsca b { font-weight: 600; }
.miejsca span { color: var(--tekst-2); }
/* Dwa zdjęcia na zakładkę: duże z treningu, małe (hantle) nachodzi na jego lewy dolny róg. */
.trening__zdjecia { position: relative; margin: 0 0 clamp(24px, 4vw, 48px); padding-left: clamp(24px, 5vw, 64px); }
.trening__duze { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 40% 40%; border-radius: 24px; }
.trening__male {
  position: absolute; left: 0; bottom: clamp(-48px, -4vw, -24px); width: 34%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 20px; border: 6px solid var(--ramka-trening); transition: border-color .3s;
}
.fakty { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.fakty div { padding-top: .7rem; border-top: 1px solid var(--linia-mocna); }
.fakty dt { font: 500 .8rem/1.2 var(--kroj-liczby); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); }
.fakty dd { margin: .3rem 0 0; font-weight: 600; }

/* ---------- Dieta ---------- */
.dieta { background: var(--tlo-dieta); transition: background-color .3s; }
.dieta__srodek {
  width: var(--szer); margin-inline: auto; padding-block: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center;
}
.dieta__tekst > p:not(.znacznik) { max-width: 54ch; }
.dieta__zdjecia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dieta__foto { width: 100%; object-fit: cover; border-radius: 24px; }
.dieta__foto--1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.dieta__foto--2, .dieta__foto--3 { aspect-ratio: 1; }

/* ---------- Pakiety ---------- */
.pakiety__lista { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.pakiet { display: flex; flex-direction: column; padding: clamp(22px, 2.5vw, 32px); background: var(--pole); border: 1px solid var(--linia); border-radius: 24px; }
.pakiet--srodek { background: var(--sliwka); border-color: var(--sliwka); color: #F5F6FA; }
.pakiet--srodek h3 { color: #F5F6FA; }
.pakiet h3 { font-size: 1.3rem; }
.pakiet__cena { margin: .9rem 0 1.2rem; font: 500 1.05rem/1 var(--kroj-liczby); color: var(--tekst-2); }
.pakiet__cena span { font-size: clamp(2.4rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.03em; color: var(--morela-tekst); font-variant-numeric: tabular-nums; }
.pakiet--srodek .pakiet__cena { color: #D9D2E0; }
.pakiet--srodek .pakiet__cena span { color: var(--morela); }
.pakiet ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.pakiet li { display: grid; grid-template-columns: 1.3rem 1fr; }
.pakiet li::before { content: ""; width: .55rem; height: .55rem; margin-top: .55em; border-radius: 50%; background: var(--akcent); }
.pakiet__dla { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--linia); font-size: .95rem; color: var(--tekst-2); }
.pakiet--srodek .pakiet__dla { border-color: rgb(245 246 250 / .2); color: #D9D2E0; }
.pakiety__dopisek { margin: 1.4rem 0 0; font-size: .95rem; color: var(--tekst-2); }

/* ---------- Opinie ---------- */
.opinie__uwaga { color: var(--tekst-2); font-size: .95rem; }
.opinie__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 1.5rem; }
.opinia { margin: 0; padding-top: 1.2rem; border-top: 3px solid var(--akcent); }
.opinia p { font: 500 clamp(1.05rem, 1.5vw, 1.2rem)/1.5 var(--kroj); }
.opinia footer { font: 500 .9rem/1 var(--kroj-liczby); color: var(--tekst-2); }

/* ---------- Pytania ---------- */
.pytania { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.pytania h2 { position: sticky; top: calc(var(--naglowek-h) + 24px); }
.pytania__lista details { border-bottom: 1px solid var(--linia-mocna); }
.pytania__lista details:first-child { border-top: 1px solid var(--linia-mocna); }
.pytania__lista summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; padding: .8rem 0; font-weight: 600; font-size: 1.08rem; cursor: pointer; list-style: none; }
.pytania__lista summary::-webkit-details-marker { display: none; }
.pytania__lista summary::after { content: "+"; flex: none; font: 500 1.5rem/1 var(--kroj-liczby); color: var(--morela-tekst); transition: rotate .2s var(--ease-out); }
.pytania__lista details[open] summary::after { rotate: 45deg; }
.pytania__lista p { color: var(--tekst-2); max-width: 60ch; }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.kontakt__tekst > p { color: var(--tekst-2); }
.formularz { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.pole { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .35rem; }
.pole label, .pole legend { font-weight: 600; padding: 0; }
.pole legend { margin-bottom: .35rem; }
.pole input[type="text"], .pole select {
  width: 100%; min-height: 52px; padding: .6rem 1rem;
  background: var(--pole); color: var(--tekst); border: 2px solid var(--linia-mocna); border-radius: 14px;
  font: 400 1.05rem/1.3 var(--kroj);       /* ponad 16 px - telefon nie powiększa strony przy wpisywaniu */
}
.pole input:focus-visible, .pole select:focus-visible { outline-offset: 0; border-color: var(--morela-tekst); }
.pole input[aria-invalid="true"] { border-color: #B3261E; }
:root[data-motyw="ciemny"] .pole input[aria-invalid="true"] { border-color: #F2A19B; }
.pole__blad { margin: 0; font-size: .95rem; font-weight: 600; color: #A1231B; }
:root[data-motyw="ciemny"] .pole__blad { color: #F2A19B; }
.pole__blad:empty { display: none; }
.wybory { display: flex; flex-wrap: wrap; gap: .5rem; }
.wybory label { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem 1rem .4rem .8rem; background: var(--pole); border: 2px solid var(--linia-mocna); border-radius: 999px; font-weight: 500; cursor: pointer; }
.wybory label:has(input:checked) { border-color: var(--morela-tekst); }
.wybory input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #E46F45; }
.formularz .przycisk { justify-self: start; margin-top: .3rem; }

.kontakt__bok { display: grid; gap: 1.2rem; justify-items: start; }
.kontakt__telefon { margin: 0; }
.kontakt__telefon a { font: 600 clamp(1.7rem, 3vw, 2.3rem)/1 var(--kroj-liczby); color: var(--naglowki); text-decoration: none; letter-spacing: -.02em; }
.kontakt__telefon a:hover { color: var(--morela-tekst); }
.kontakt__godziny-tytul { margin-top: .8rem; }
.godziny { margin: 0; width: 100%; }
.godziny div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linia); }
.godziny div:first-child { border-top: 1px solid var(--linia); }
.godziny dd { margin: 0; font: 500 1rem/1.4 var(--kroj-liczby); white-space: nowrap; }
.kontakt__obszar { margin: 0; color: var(--tekst-2); }

/* ---------- Stopka ---------- */
.stopka { background: var(--stopka); color: #F1EEF5; padding: clamp(48px, 7vw, 80px) var(--margines) 2rem; }
.stopka :focus-visible { outline-color: #FF8C61; }
.stopka__kolumny { width: min(1180px, 100%); margin: 0 auto; overflow-wrap: anywhere; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; font-size: .98rem; }
.stopka__logo { display: flex; align-items: center; gap: .6rem; font: 700 1.5rem/1 var(--kroj-naglowek); letter-spacing: -.01em; margin-bottom: 1rem; }
.stopka__logo span { padding: .3rem .5rem .25rem; border-radius: 6px; background: #FF8C61; color: #1E1B24; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.stopka__kontakt { display: grid; justify-items: start; align-content: start; }
.stopka__kontakt a, .stopka__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: #F1EEF5; background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stopka__autorzy summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: flex; align-items: center; min-height: 44px; }
.stopka__autorzy p { font-size: .88rem; margin-top: .6rem; color: #CFC7D8; }
.stopka__demo { width: min(1180px, 100%); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid rgb(241 238 245 / .2); font-size: .88rem; color: #CFC7D8; }


/* ---------- Pasek na telefonie ---------- */
.pasek { display: none; }
@media (max-width: 719px) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .stopka { padding-bottom: calc(2rem + 72px + env(safe-area-inset-bottom)); }
  .pasek {
    display: flex; align-items: center; gap: 12px; position: fixed; inset: auto 0 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--tlo); border-top: 1px solid var(--linia);
    transform: translateY(100%); visibility: hidden;
    transition: transform .24s var(--ease-out), visibility 0s .24s, background-color .3s;
  }
  .pasek.widoczny { transform: none; visibility: visible; transition: transform .24s var(--ease-out), visibility 0s, background-color .3s; }
  .pasek .przycisk { flex: 1; }
}

/* ---------- Dymek (informacje demo) ---------- */
.dymek {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 12px);
  width: max-content; max-width: min(460px, calc(100vw - 32px)); padding: .9rem 1.2rem; border-radius: 16px;
  background: var(--naglowki); color: var(--tlo); font-size: .98rem; box-shadow: 0 10px 30px rgb(0 0 0 / .25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease-out);
}
.dymek.widoczny { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 719px) { .dymek { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Tablet i telefon ---------- */
@media (max-width: 899px) {
  /* miejsce na zegarek: odstęp + oba krótkie paski i tarcza (1,32 szerokości) + oddech */
  .wejscie { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: calc(14px + var(--w-tel) * 1.32 + 20px) 56px; }
  .o-mnie, .dla-kogo, .dieta__srodek, .pytania, .kontakt { grid-template-columns: minmax(0, 1fr); }
  .portret { aspect-ratio: auto; min-height: 240px; }
  .dla-kogo__foto img { aspect-ratio: 16 / 10; }
  .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.8rem; }
  .trening__srodek { grid-template-columns: minmax(0, 1fr); }
  .pakiety__lista, .opinie__lista { grid-template-columns: minmax(0, 1fr); }
  .pytania h2 { position: static; }
  .stopka__kolumny { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 899px) { :root { --skala-tel: 1.9; } }
@media (prefers-reduced-motion: reduce) { .zegarek { transition: none; } }
@media (max-width: 599px) {
  body { font-size: 1.0625rem; }
  .wejscie h1 { font-size: min(10.5cqi, 3.2rem); }
  .miejsca li { grid-template-columns: minmax(0, 1fr); }
  .logo__imie { font-size: .95rem; }
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .fakty { grid-template-columns: minmax(0, 1fr); }
}