:root {
  --tlo: #f3f4f5;
  --tlo-blask: #fbfbfc;
  --bialy: #ffffff;
  --tusz: #121212;
  --tekst2: #5c6168;
  --cichy: #858a92;
  --linia: #e3e5e8;
  --czarny: #111213;
  --na-czarnym: #f1f2f3;
  --na-czarnym2: rgb(241 242 243 / 0.56);
  --na-czarnym-tlo: rgb(241 242 243 / 0.08);
  --zielony: #1baf7a;
  --zielony-wykres: #4fd1a1;

  --f-naglowek: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --f-tekst: "Inter", ui-sans-serif, system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --sprezyna: linear(0, 0.073 3.8%, 0.235 7.7%, 0.424 11.5%, 0.603 15.4%, 0.753 19.2%, 0.867 23.1%, 0.947 26.9%, 0.997 30.8%, 1.025 34.6%, 1.037 38.5%, 1.039 42.3%, 1.034 46.2%, 1.028 50%, 1.02 53.8%, 1.014 57.7%, 1.008 61.5%, 1.005 65.4%, 1.002 69.2%, 1 73.1%, 1 100%);

  --szer: 1160px;
  --margines: 20px;
  --sekcja: clamp(80px, 9vw, 128px);
  --promien: clamp(24px, 2.6vw, 34px);
  --cien-karty: 0 0 0 1px rgb(14 15 16 / 0.05), 0 34px 70px -30px rgb(14 15 16 / 0.42), 0 10px 24px -14px rgb(14 15 16 / 0.22);
}
@media (min-width: 700px) { :root { --margines: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--tlo); color: var(--tusz);
  font: 400 17px/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tusz); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pomin:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--zielony); outline-offset: 3px; }

.wrap { width: min(100%, var(--szer)); margin-inline: auto; padding-inline: var(--margines); }
.sekcja { padding-block: var(--sekcja); }
.sekcja--biala { background: var(--bialy); }
.srodek { text-align: center; }
.cichy { color: var(--cichy); }

.hero__h1, .tytul, .podpis {
  font-family: var(--f-naglowek); font-weight: 700; color: var(--tusz); margin: 0;
  text-wrap: balance;
}

.tytul { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -0.035em; }
.podpis { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
.sekcja__opis { margin: 22px auto 0; max-width: 56ch; color: var(--tekst2); }

.js [data-slowa] .sl { display: inline-block; opacity: 0; transform: translateY(0.42em); filter: blur(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out);
  transition-delay: calc(var(--n, 0) * 34ms); }
.js [data-slowa].widac .sl { opacity: 1; transform: none; filter: none; }

.js .odslona { opacity: 0; transform: translateY(24px); filter: blur(8px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms); }
.js .odslona.widac { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-slowa] .sl, .js .odslona { transform: none; filter: none; transition: opacity 300ms ease; transition-delay: 0ms; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--tusz); color: #fff; text-decoration: none;
  font: 600 16px/1 var(--f-tekst); letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.btn i { font-size: 18px; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #000; box-shadow: 0 12px 28px -14px rgb(14 15 16 / 0.6); } }
.btn--maly { height: 44px; padding: 0 20px; font-size: 14px; }
.btn--jasny { background: var(--bialy); color: var(--tusz); }
@media (hover: hover) and (pointer: fine) { .btn--jasny:hover { background: #fff; box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.8); } }
.btn--obrys { background: transparent; color: var(--tusz); box-shadow: inset 0 0 0 1.5px var(--tusz); }
@media (hover: hover) and (pointer: fine) { .btn--obrys:hover { background: var(--tusz); color: #fff; } }
.btn--pelny { width: 100%; }

.nav { position: sticky; top: 0; z-index: 20; background: rgb(243 244 245 / 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.nav.przewinieta { border-bottom-color: var(--linia); }
.nav__in { display: flex; align-items: center; gap: 24px; height: 68px; }
.marka { display: flex; align-items: center; }
.marka__logo { height: 18px; width: auto; }
.nav__linki { display: flex; gap: 28px; margin-left: auto; }
.nav__linki a { font-size: 15px; font-weight: 500; color: var(--tekst2); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__linki a:hover { color: var(--tusz); } }
@media (max-width: 860px) { .nav__linki { display: none; } .nav__in .btn { margin-left: auto; } }

@media (max-width: 520px) { .marka__logo { height: 14px; } .nav__in { gap: 12px; } .nav__in .btn--maly { padding: 0 16px; } }
@media (max-width: 389px) { .nav__reszta { display: none; } }

.hero { min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4vw, 56px) 0 clamp(24px, 4vw, 48px); background: radial-gradient(ellipse 60% 60% at 70% 30%, var(--tlo-blask) 0%, var(--tlo) 70%); }
.hero__in { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }

@media (min-width: 1000px) and (min-height: 500px) {

  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 56px); }
  .hero .film-scena { --wylew: clamp(0px, (100vw - var(--szer)) / 2 + var(--margines) - 40px, 160px); margin-right: calc(-1 * var(--wylew)); }
}

@media (max-width: 719px) {

  .hero__tekst { min-height: calc(100svh - 232px); display: flex; flex-direction: column; justify-content: center; }
}

.hero__tekst { container-type: inline-size; }
.hero__pigulka { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 22px; padding: 8px 15px 8px 11px; border-radius: 999px;
  background: rgb(27 175 122 / 0.12); color: #12805c; font: 600 14px/1.2 var(--f-tekst); }
.hero__pigulka i { font-size: 18px; color: var(--zielony); }

.hero__h1 { font-size: clamp(28px, 8.3cqi, 52px); line-height: 1.1; letter-spacing: -0.045em; max-width: 12.4em; }

.hero__h1-odp { display: block; }

.hero__h1 .akcent { color: #12805c; padding-bottom: 0.03em; background: linear-gradient(var(--zielony), var(--zielony)) 0 100% / 100% 0.075em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .hero__h1 .akcent { background-size: 0% 0.075em; }
.js .hero.rysuj .hero__h1 .akcent { background-size: 100% 0.075em; transition: background-size 720ms var(--ease-out) 150ms; }
.hero__opis { margin: 22px 0 0; max-width: 40ch; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--tekst2); }
.hero__akcja { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 34px); }

.hero__akcja .btn { padding-inline: clamp(18px, 4.6cqi, 28px); font-size: clamp(14px, 3.6cqi, 16px); }
@media (max-width: 520px) { .hero__akcja { flex-direction: column; } }

.hero__proba { order: 3; flex-basis: 100%; margin: 2px 0 0; font: 400 15px/1.4 var(--f-tekst); color: var(--tekst2); }
.hero__proba b { font-weight: 600; color: var(--tusz); }
@media (max-width: 520px) { .hero__proba { order: 0; flex-basis: auto; margin: -3px 0 5px; font-size: 14px; text-align: center; } }

.hero__autor { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.hero__awatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #0d1416; box-shadow: 0 0 0 2px var(--bialy), 0 0 0 3.5px var(--zielony); }
.hero__awatar img { display: block; width: 100%; height: 100%; }
.hero__autor > span:last-child { font: 400 14px/1.35 var(--f-tekst); color: var(--tekst2); }
.hero__autor b { display: block; font: 600 15px/1.3 var(--f-tekst); color: var(--tusz); }

.ramka { display: inline-block; height: 1.2em; line-height: 1.2em; padding: 0 0.2em; border-radius: 0.23em; background: var(--tusz); color: #fff; white-space: nowrap; }

.sklej { white-space: nowrap; }

.film-hero {
  position: relative; margin: 0; justify-self: center;
  width: min(100%, 400px); aspect-ratio: 9 / 16;
  border-radius: var(--promien); overflow: hidden; background: var(--tlo); cursor: pointer;
  box-shadow: 0 0 0 1px rgb(14 15 16 / 0.07), 0 50px 100px -50px rgb(14 15 16 / 0.4), 0 18px 40px -24px rgb(14 15 16 / 0.25);
}

@media (min-width: 720px) and (min-height: 500px) {
  .film-hero--poziomo { width: 100%; aspect-ratio: 16 / 9; }
}
.film-hero__wideo { display: block; width: 100%; height: 100%; object-fit: cover; }

.film-hero__start {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px 16px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 17px/1 var(--f-tekst); color: var(--na-czarnym); background: rgb(17 18 19 / 0.84); white-space: nowrap;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 18px 40px -16px rgb(0 0 0 / 0.5);
  transition: transform 160ms var(--ease-out), opacity 200ms ease;
}
.film-hero__start svg { width: 24px; height: 24px; }
.film-hero__start:active { transform: scale(0.96); }
.film-hero__start[hidden] { display: none; }

.film-hero__pasek {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: rgb(17 18 19 / 0.8); color: var(--na-czarnym);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out);
}
.film-hero.ruszyl.pauza .film-hero__pasek, .film-hero.ruszyl.aktywny .film-hero__pasek, .film-hero.ruszyl:focus-within .film-hero__pasek { opacity: 1; translate: 0 0; pointer-events: auto; }

.film-hero.ruszyl.koniec .film-hero__pasek { opacity: 0; pointer-events: none; }
.film-hero__ster { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / 0.1); color: inherit; transition: background-color 160ms ease, transform 160ms var(--ease-out); }
.film-hero__ster:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .film-hero__ster:hover { background: rgb(255 255 255 / 0.2); } }
.film-hero__ster svg { width: 20px; height: 20px; }
.film-hero__ster .ikona-graj { display: none; }
.film-hero.pauza .film-hero__ster .ikona-graj { display: inline; }
.film-hero.pauza .film-hero__ster .ikona-pauza { display: none; }
.film-hero__ster .cisza { display: none; }
.film-hero__ster[aria-pressed="false"] .fala { display: none; }
.film-hero__ster[aria-pressed="false"] .cisza { display: inline; }
.film-hero__postep { flex: 1; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.2); overflow: hidden; }
.film-hero__postep span { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.film-hero__czas { font: 500 13px/1 var(--f-tekst); font-variant-numeric: tabular-nums; color: var(--na-czarnym2); min-width: 2.6em; text-align: right; }

.nav__cta i { font-size: 16px; }
.btn i { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .ph-arrow-right { transform: translateX(3px); }
  .btn:hover .ph-arrow-down { transform: translateY(3px); }
}

.nav__postep { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--zielony); transform-origin: 0 50%; transform: scaleX(0); }

.hero--sygnet { position: relative; overflow: hidden; }
@media (min-width: 1000px) and (min-height: 500px) { .hero--sygnet { padding-bottom: 110px; } }
.hero--sygnet .hero__in { position: relative; z-index: 1; }
.hero-sygnet { position: absolute; top: 50%; right: clamp(16px, 3vw, 48px); z-index: 0; display: none; height: min(88%, 720px); width: auto; translate: 0 -50%;
  overflow: visible; pointer-events: none; fill: var(--tusz); }
@media (min-width: 1000px) and (min-height: 500px) { .hero-sygnet { display: block; } }

.hero-sygnet polygon:nth-child(1) { opacity: 0.07; }
.hero-sygnet polygon:nth-child(2) { opacity: 0.13; }
.hero-sygnet polygon:nth-child(3) { opacity: 0.21; }
.js .hero-sygnet polygon { translate: 24% 0; transform-box: fill-box; }
.js .hero.rysuj .hero-sygnet polygon { translate: 0 0; transition: translate 1200ms var(--sprezyna) calc(250ms + var(--k) * 120ms); }

.film-scena { position: relative; }
.film-scena .film-hero { position: relative; z-index: 1; }
@media (max-width: 719px) { .film-scena .film-hero { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero.rysuj .hero-sygnet polygon { transition: none; }
  .js .hero.rysuj .hero__h1 .akcent { transition: none; }
}

.karta { border-radius: var(--promien); box-shadow: var(--cien-karty); container-type: inline-size; }
.karta--czarna { background: var(--czarny); color: var(--na-czarnym); }
.karta--biala { background: var(--bialy); color: var(--tusz); }

.czym__etykieta { margin: 0 0 14px; font: 600 15px/1 var(--f-tekst); color: var(--na-czarnym2); }
.s2b2__tor { position: relative; }
.s2b2__nad { margin: 0 0 clamp(28px, 4vw, 40px); font: 700 clamp(34px, 4.6vw, 64px)/1.05 var(--f-naglowek); letter-spacing: -0.035em; color: var(--tusz); }
.s2b2__pytania, .s2b2__kroki, .s2b2__lacznik { display: none; }
.s2b2__karta { position: relative; max-width: 760px; padding: clamp(22px, 3vw, 34px); }
.s2b2__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.s2b2__para { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 18px 4px; border-top: 1px solid rgb(241 242 243 / 0.08);
  transition: opacity 320ms ease, background-color 320ms ease; }
.s2b2__para:first-child { padding-top: 4px; border-top: 0; }
.s2b2__pyt-lista { grid-column: 1 / -1; margin: 0; font: 700 19px/1.3 var(--f-naglowek); letter-spacing: -0.02em; color: var(--na-czarnym); text-wrap: balance; }
.s2b2__ikona { width: 40px; height: 40px; border-radius: 12px; background: transparent; color: var(--zielony-wykres); display: grid; place-items: center; font-size: 25px;
  transition: background-color 320ms ease, color 320ms ease; }
.s2b2__odp { margin: 0; font: 500 clamp(16px, 1.4vw, 18px)/1.45 var(--f-tekst); color: rgb(241 242 243 / 0.8); }

@media (min-width: 900px) and (min-height: 560px), (max-width: 899px) and (min-height: 460px) {
  .js .s2b2 { padding-block: 0; }
  .js .s2b2__tor { height: 340vh; }
  .js .s2b2__scena { position: sticky; top: 68px; height: calc(100svh - 68px); }
  .js .s2b2__nad { margin-bottom: 0.8em; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--cichy); }
  .js .s2b2__pytania { display: block; position: relative; height: 3.5em; }

  .js .s2b2__pyt { position: absolute; left: 0; right: 0; top: 0; margin: 0; font: 700 1em/1.14 var(--f-naglowek); letter-spacing: -0.035em; color: var(--tusz); text-wrap: balance;
    opacity: 0; transform: translateY(0.4em); filter: blur(8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), filter 420ms var(--ease-out); }
  .js .s2b2__pyt.aktywny { opacity: 1; transform: none; filter: none; }
  .js .s2b2__pyt.byl { transform: translateY(-0.4em); }

  .js .ramka-b2 { position: relative; isolation: isolate; display: inline-block; height: 1.2em; line-height: 1.2em; padding: 0 0.2em; color: var(--tusz); transition: color 200ms ease 300ms; }
  .js .ramka-b2::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.23em; background: var(--tusz);
    clip-path: inset(0 100% 0 0 round 0.23em); transition: clip-path 540ms var(--ease-out) 200ms; }
  .js .s2b2__pyt.aktywny .ramka-b2 { color: #fff; }
  .js .s2b2__pyt.aktywny .ramka-b2::before { clip-path: inset(0 0 0 0 round 0.23em); }

  .js .s2b2__pyt-lista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .js .s2b2__lacznik { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .js .s2b2__lacznik path { fill: none; stroke: var(--zielony-wykres); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
  .js .s2b2__lacznik circle { fill: var(--zielony-wykres); stroke: var(--tlo); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
}

@media (min-width: 900px) and (min-height: 560px) {
  .js .s2b2__scena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(56px, 6.5vw, 104px); align-items: center; }
  .js .s2b2__pytania { font-size: clamp(32px, 3.4vw, 50px); }
  .js .s2b2__kroki { display: flex; gap: 6px; margin-top: 30px; }
  .js .s2b2__kroki span { width: 44px; height: 4px; border-radius: 2px; background: #d9dce0; overflow: hidden; }
  .js .s2b2__kroki i { display: block; height: 100%; background: var(--zielony); transform-origin: 0 50%; transform: scaleX(0); }
  .js .s2b2__lista { gap: 4px; }
  .js .s2b2__para { padding: 12px; border-top: 0; border-radius: 16px; opacity: 0.32; }
  .js .s2b2__para.zrobiony { opacity: 0.62; }
  .js .s2b2__para.aktywny { opacity: 1; background: rgb(241 242 243 / 0.07); }
  .js .s2b2__ikona { background: transparent; color: var(--na-czarnym); }
  .js .s2b2__para.aktywny .s2b2__ikona { background: rgb(79 209 161 / 0.14); color: var(--zielony-wykres); }
}

@media (max-width: 899px) and (min-height: 460px) {
  .js .s2b2__scena { display: flex; flex-direction: column; justify-content: center; gap: clamp(40px, 7svh, 64px); padding-block: 8px 24px; }
  .js .s2b2__lewa { max-width: 620px; }
  .js .s2b2__pytania { font-size: clamp(26px, 7.6vw, 40px); }
  .js .s2b2__karta { width: 100%; max-width: 560px; padding: 22px; }

  .js .s2b2__karta .czym__etykieta { position: absolute; top: 84px; left: 22px; margin: 0; }
  .js .s2b2__lista { margin: 0; grid-template-columns: repeat(4, 44px) minmax(0, 1fr); grid-template-rows: 44px auto; column-gap: 8px; row-gap: 18px; }

  .js .s2b2__para { grid-area: 1 / 1 / 3 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: inherit; padding: 0; border-top: 0; }
  .js .s2b2__para:nth-child(1) .s2b2__ikona { grid-column: 1; }
  .js .s2b2__para:nth-child(2) .s2b2__ikona { grid-column: 2; }
  .js .s2b2__para:nth-child(3) .s2b2__ikona { grid-column: 3; }
  .js .s2b2__para:nth-child(4) .s2b2__ikona { grid-column: 4; }
  .js .s2b2__ikona { grid-row: 1; width: 44px; height: 44px; border-radius: 13px; background: transparent; color: rgb(241 242 243 / 0.42); font-size: 26px; }
  .js .s2b2__para.zrobiony .s2b2__ikona { color: rgb(241 242 243 / 0.82); }
  .js .s2b2__para.aktywny .s2b2__ikona { background: rgb(79 209 161 / 0.14); color: var(--zielony-wykres); }
  .js .s2b2__odp { grid-row: 2; grid-column: 1 / -1; padding-top: 25px; font-size: 17px; color: var(--na-czarnym);
    opacity: 0; transform: translateY(8px); filter: blur(6px); transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out), filter 380ms var(--ease-out); }
  .js .s2b2__para.aktywny .s2b2__odp { opacity: 1; transform: none; filter: none; transition-delay: 160ms; }

  .js .s2b2__lacznik circle:last-child { stroke: var(--czarny); }
}

@media (min-width: 900px) and (max-height: 559px), (max-width: 899px) and (max-height: 459px) {
  .js .s2b2__para > * { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
  .js .s2b2__para > :not(.s2b2__pyt-lista) { transition-delay: 420ms; }
  .js .s2b2__para.widac > * { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .s2b2__pyt, .js .s2b2__odp, .js .s2b2__para > * { transform: none !important; filter: none !important; transition: opacity 300ms ease !important; }
  .js .ramka-b2::before { transition: none !important; }
}

.korzysci .tytul { max-width: 18ch; }
.krok { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(88px, 11vw, 150px); align-items: center; }
.krok__tekst { max-width: 560px; }
.krok__opis { margin: 22px 0 0; max-width: 46ch; color: var(--tekst2); }
.krok__scena { display: flex; justify-content: center; container-type: inline-size; }
.krok__scena > * { width: min(100%, 540px); }
@media (min-width: 920px) {
  .krok { grid-template-columns: 1fr 1fr; }
  .krok--odwrotnie .krok__tekst { order: 2; }
  .krok--tydzien { grid-template-columns: 1fr 1fr; grid-template-areas: "a scena" "b scena"; row-gap: 56px; align-items: start; }
  .krok--tydzien .krok__tekst--a { grid-area: a; align-self: end; }
  .krok--tydzien .krok__tekst--b { grid-area: b; }
  .krok--tydzien .krok__scena--tydzien { grid-area: scena; align-self: center; }
}

.przelacznik { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 500 clamp(14px, 3.4cqi, 17px)/1 var(--f-tekst); color: var(--na-czarnym2); user-select: none; }
.przelacznik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.przelacznik__tor { position: relative; width: 52px; height: 30px; border-radius: 15px; background: rgb(241 242 243 / 0.2); transition: background-color 240ms ease; flex: none; }
.przelacznik__tor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
  transition: left 320ms var(--ease-out), width 160ms var(--ease-out), background-color 240ms ease; }
.przelacznik:active .przelacznik__tor::after { width: 30px; }
.przelacznik input:checked + .przelacznik__tor { background: var(--na-czarnym); }
.przelacznik input:checked + .przelacznik__tor::after { left: 25px; background: var(--czarny); }
.przelacznik:active input:checked + .przelacznik__tor::after { left: 19px; }
.przelacznik--zielony input:checked + .przelacznik__tor { background: var(--zielony); }
.przelacznik--zielony input:checked + .przelacznik__tor::after { background: #fff; }
.przelacznik input:focus-visible + .przelacznik__tor { outline: 2px solid var(--zielony); outline-offset: 3px; }

.zakladki { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: 999px; background: var(--na-czarnym-tlo); }
.zakladki button { position: relative; z-index: 1; height: clamp(40px, 9cqi, 48px); border: 0; background: none; border-radius: 999px; cursor: pointer;
  font: 600 clamp(13px, 3.2cqi, 16px)/1 var(--f-tekst); color: var(--na-czarnym2); transition: color 240ms ease; }
.zakladki button[aria-selected="true"] { color: var(--tusz); }
.zakladki__wskaznik { position: absolute; top: 6px; bottom: 6px; left: var(--x, 6px); width: var(--w, 33%); border-radius: 999px; background: var(--na-czarnym);
  transition: left 380ms var(--ease-out), width 380ms var(--ease-out); }

.powiad { position: relative; display: block; width: min(100%, max(62%, 250px)); height: 64px; margin: 0 auto; padding: 0; border: 0; border-radius: 32px;
  background: var(--czarny); color: var(--na-czarnym); cursor: pointer; overflow: hidden;
  box-shadow: var(--cien-karty);
  transition: width 640ms var(--ease-out), height 640ms var(--ease-out), border-radius 640ms var(--ease-out); }
.powiad.rozwiniete { width: 100%; height: 124px; border-radius: 30px; }
.powiad.wibruje { animation: wibracja 420ms ease-out; }
.powiad.od-nowa, .powiad.od-nowa * { transition: none !important; }
@keyframes wibracja { 0%, 100% { translate: 0; } 15% { translate: -7px; } 35% { translate: 6px; } 55% { translate: -4px; } 75% { translate: 2px; } }
.powiad__wyspa, .powiad__karta { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity 320ms var(--ease-out), filter 320ms var(--ease-out); }
.powiad__wyspa { gap: 12px; padding: 0 22px 0 20px; white-space: nowrap; }
.powiad__sygnet { width: 30px; height: 23px; color: #fff; flex: none; }
.powiad__dzien { font: 500 15px/1 var(--f-tekst); color: var(--na-czarnym2); }
.powiad__zegar { display: flex; margin-left: auto; font: 600 19px/1.15 var(--f-tekst); font-variant-numeric: tabular-nums; }
.powiad__zegar .cyfra { display: inline-block; height: 1.15em; overflow: hidden; }
.powiad__zegar .cyfra > span { display: block; transition: transform 520ms var(--ease-out); }
.powiad.osiemnasta .cyfra > span { transform: translateY(-50%); }
.powiad.osiemnasta .cyfra:nth-of-type(2) > span { transition-delay: 60ms; }
.powiad.osiemnasta .cyfra:nth-of-type(3) > span { transition-delay: 120ms; }
.powiad__karta { gap: clamp(12px, 3.4cqi, 16px); padding: 0 clamp(16px, 4.4cqi, 22px) 0 clamp(14px, 3.6cqi, 18px); opacity: 0; filter: blur(8px); text-align: left; }
.powiad.rozwiniete .powiad__wyspa { opacity: 0; filter: blur(8px); }
.powiad.rozwiniete .powiad__karta { opacity: 1; filter: none; transition-delay: 160ms; }
.powiad__ikona { flex: none; width: clamp(48px, 13cqi, 64px); height: clamp(48px, 13cqi, 64px); border-radius: clamp(13px, 3.5cqi, 17px); display: grid; place-items: center; background: linear-gradient(160deg, #32353c, #16171a); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.12); }
.powiad__ikona svg { width: clamp(26px, 7cqi, 34px); height: clamp(20px, 5.4cqi, 26px); color: #fff; }
.powiad__tresc { display: grid; gap: 3px; min-width: 0; flex: 1; }
.powiad__gora { display: flex; justify-content: space-between; font: 500 clamp(12px, 3.6cqi, 13px)/1.2 var(--f-tekst); color: rgb(241 242 243 / 0.5); }
.powiad__tytul { font: 600 clamp(15px, 4.6cqi, 17px)/1.25 var(--f-tekst); }
.powiad__opis { font: 400 clamp(13px, 4.2cqi, 15px)/1.3 var(--f-tekst); color: rgb(241 242 243 / 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tydzien { padding: clamp(18px, 5cqi, 28px); }
.tydzien__gora { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 14px; }
.tydzien__tytul { margin: 0; font: 700 clamp(22px, 5.6cqi, 30px)/1.1 var(--f-naglowek); letter-spacing: -0.035em; }
.tydzien__ile { margin: 0; padding: 8px 13px; border-radius: 999px; background: #f1f2f4; font: 500 clamp(12px, 2.8cqi, 14px)/1 var(--f-tekst); color: var(--tekst2); }
.tydzien__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.trening { position: relative; display: flex; align-items: center; gap: clamp(10px, 3cqi, 16px); width: 100%; padding: clamp(9px, 2.4cqi, 13px) clamp(10px, 3cqi, 14px);
  border: 0; border-radius: 18px; background: transparent; cursor: pointer; text-align: left; transition: background-color 220ms ease; }
.trening[aria-checked="true"] { background: #f3f4f6; }
@media (hover: hover) and (pointer: fine) { .trening:hover { background: #f6f7f8; } .trening[aria-checked="true"]:hover { background: #eef0f2; } }
.trening__znak { flex: none; width: clamp(26px, 6.4cqi, 32px); height: clamp(26px, 6.4cqi, 32px); border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2.5px #d6d9dd; color: #fff; font-size: clamp(14px, 3.4cqi, 17px); transition: background-color 200ms ease, box-shadow 200ms ease; }
.trening__znak i { transform: scale(0); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.trening[aria-checked="true"] .trening__znak { background: var(--tusz); box-shadow: none; }
.trening[aria-checked="true"] .trening__znak i { transform: scale(1); }
.trening:active .trening__znak { transform: scale(0.9); }
.trening__ikona { flex: none; width: clamp(34px, 8cqi, 42px); height: clamp(34px, 8cqi, 42px); border-radius: 12px; background: #f1f2f4; display: grid; place-items: center; font-size: clamp(18px, 4.4cqi, 23px); }
.trening[aria-checked="true"] .trening__ikona { background: #fff; }
.trening__nazwa { flex: 1; font: 600 clamp(15px, 3.8cqi, 19px)/1.2 var(--f-tekst); letter-spacing: -0.01em; }
.trening__typ { font: 500 clamp(12px, 3cqi, 15px)/1 var(--f-tekst); color: #9ba0a7; }

.pierscien { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 24px; margin-top: 32px; padding: clamp(22px, 3vw, 30px); max-width: 520px; }
.pierscien__svg { grid-row: 1 / 3; width: clamp(104px, 22cqi, 132px); height: auto; transform: rotate(-90deg); }
.pierscien__tor { fill: none; stroke: var(--na-czarnym-tlo); stroke-width: 10; }
.pierscien__luk { fill: none; stroke: var(--zielony-wykres); stroke-width: 10; stroke-linecap: round; transform-origin: 60px 60px;
  transition: stroke-dasharray 420ms var(--ease-out), transform 420ms var(--ease-out), opacity 200ms ease; }
.pierscien__srodek { display: flex; align-items: baseline; gap: 10px; }
.pierscien__liczba { font: 700 clamp(40px, 9cqi, 56px)/1 var(--f-naglowek); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pierscien__pod { font: 500 16px/1.2 var(--f-tekst); color: var(--na-czarnym2); }
.pierscien__tekst { margin: 0; font: 500 clamp(15px, 3.4cqi, 17px)/1.4 var(--f-tekst); color: var(--na-czarnym); }

.cwiczenie { padding: clamp(20px, 5cqi, 30px); }

.cwiczenie__film { position: relative; aspect-ratio: 320 / 210; border-radius: clamp(16px, 4.4cqi, 22px); overflow: hidden; background: #141517; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.07); }
.cwiczenie__svg { display: block; width: 100%; height: 100%; }
.cw-cialo { fill: #ebedf0; }
.cw-luka { fill: url(#cwSwiatlo); }
.cw-dalej { fill: #6f757d; }
.cw-talerz { fill: #32353b; stroke: #aab0b8; stroke-width: 2.2; }
.cw-talerz-w { fill: none; stroke: #50555c; stroke-width: 1.2; }
.cw-piasta { fill: #c6cbd1; }
.cw-hglowki { fill: #474c54; stroke: #aab0b8; stroke-width: 1.8; }
.cw-hgryf { fill: #aab0b8; }
.cw-podloga { stroke: rgb(241 242 243 / 0.1); stroke-width: 1; }
.cw-cien { fill: rgb(0 0 0 / 0.38); }
.cwiczenie__powt { position: absolute; left: 12px; top: 12px; padding: 5px 9px; border-radius: 999px; background: rgb(0 0 0 / 0.45);
  font: 600 12px/1 var(--f-tekst); color: rgb(241 242 243 / 0.8); font-variant-numeric: tabular-nums; }
.cwiczenie__duzy { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgb(17 18 19 / 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 24px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); transition: opacity 220ms ease, transform 260ms var(--ease-out); }
.cwiczenie__duzy i { margin-left: 3px; }
.cwiczenie.gra .cwiczenie__duzy { opacity: 0; transform: scale(0.85); pointer-events: none; }
.cwiczenie__opis { margin-top: clamp(14px, 3.8cqi, 18px); }
.cwiczenie__nazwa { display: grid; margin: 0; font: 600 clamp(17px, 4.4cqi, 22px)/1.25 var(--f-tekst); letter-spacing: -0.01em; }
.cwiczenie__a, .cwiczenie__b { grid-area: 1 / 1; align-self: start; text-wrap: balance; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), filter 320ms var(--ease-out); }
.cwiczenie__b { opacity: 0; transform: translateY(0.5em); filter: blur(6px); }
.cwiczenie.zamiennik .cwiczenie__a { opacity: 0; transform: translateY(-0.5em); filter: blur(6px); }
.cwiczenie.zamiennik .cwiczenie__b { opacity: 1; transform: none; filter: none; }
.cwiczenie__serie { margin: 8px 0 0; font: 500 clamp(14px, 3.4cqi, 16px)/1.3 var(--f-tekst); color: var(--na-czarnym2); }
.cwiczenie__pasek { position: relative; margin-top: clamp(16px, 4.4cqi, 22px); height: 6px; border-radius: 3px; background: rgb(241 242 243 / 0.16); }
.cwiczenie__postep { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 3px; background: var(--na-czarnym); }
.cwiczenie__postep::after { content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 240ms var(--ease-out); }
.cwiczenie.gra .cwiczenie__postep::after { transform: scale(1); }
.cwiczenie__czasy { display: flex; justify-content: space-between; margin-top: 10px; font: 500 13px/1 var(--f-tekst); color: rgb(241 242 243 / 0.5); font-variant-numeric: tabular-nums; }
.cwiczenie__dol { display: flex; align-items: center; justify-content: space-between; margin-top: clamp(16px, 4cqi, 24px); }
.cwiczenie__play { position: relative; width: clamp(48px, 12cqi, 58px); aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--na-czarnym); color: var(--tusz); cursor: pointer; display: grid; place-items: center;
  font-size: clamp(20px, 5cqi, 24px); transition: transform 160ms var(--ease-out); }
.cwiczenie__play:active { transform: scale(0.92); }
.cwiczenie__play i { grid-area: 1 / 1; transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.cwiczenie__play .ph-play { margin-left: 3px; }
.cwiczenie__play .ph-pause { opacity: 0; transform: scale(0.6); }
.cwiczenie.gra .cwiczenie__play .ph-play { opacity: 0; transform: scale(0.6); }
.cwiczenie.gra .cwiczenie__play .ph-pause { opacity: 1; transform: none; }

.seria { padding: clamp(20px, 5cqi, 30px); }
.seria__gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.seria__nazwa { margin: 0; font: 600 clamp(16px, 4cqi, 20px)/1 var(--f-tekst); }
.seria__nazwa span { font-weight: 500; color: rgb(241 242 243 / 0.5); }
.seria__srodek { display: flex; justify-content: space-between; align-items: flex-end; margin-top: clamp(16px, 4cqi, 24px); }
.seria__waga { display: flex; align-items: baseline; gap: 10px; font: 700 clamp(48px, 13cqi, 70px)/1 var(--f-naglowek); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.seria__waga span { font-size: 0.46em; font-weight: 600; letter-spacing: -0.02em; color: rgb(241 242 243 / 0.55); }
.seria__ostatnio { margin: 0 0 6px; display: grid; justify-items: end; gap: 6px; font: 500 clamp(13px, 3.2cqi, 15px)/1 var(--f-tekst); color: rgb(241 242 243 / 0.5); }
.seria__ostatnio strong { font: 600 clamp(17px, 4.2cqi, 21px)/1 var(--f-tekst); color: var(--na-czarnym); font-variant-numeric: tabular-nums; }
.seria__suwak { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: clamp(18px, 5cqi, 28px) 0 0; background: none; cursor: pointer; --p: 41.67%; }
.seria__suwak::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--na-czarnym) var(--p), rgb(241 242 243 / 0.16) var(--p)); }
.seria__suwak::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--na-czarnym) var(--p), rgb(241 242 243 / 0.16) var(--p)); }
.seria__suwak::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.4); transition: transform 160ms var(--ease-out); }
.seria__suwak::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.4); }
.seria__suwak:active::-webkit-slider-thumb { transform: scale(1.12); }
.seria__suwak:focus-visible { outline: none; }
.seria__suwak:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--zielony); outline-offset: 3px; }

.seria__kreski { display: flex; justify-content: space-between; margin: 8px 12px 0; }
.seria__kreski i { width: 6px; height: 6px; border-radius: 50%; background: rgb(241 242 243 / 0.28); }
.seria.zrobiona .seria__waga { color: var(--na-czarnym); }

.wykres { padding: clamp(18px, 4.6cqi, 28px); }
.wykres__etykieta { margin: clamp(20px, 5cqi, 28px) 0 0; font: 500 clamp(13px, 3.2cqi, 15px)/1 var(--f-tekst); color: var(--na-czarnym2); }
.wykres__liczba { margin: 10px 0 0; font: 700 clamp(42px, 11cqi, 62px)/1 var(--f-naglowek); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wykres__pod { margin: 10px 0 0; font: 500 clamp(14px, 3.4cqi, 16px)/1.2 var(--f-tekst); color: var(--na-czarnym2); }
.wykres__etykieta, .wykres__liczba, .wykres__pod { transition: opacity 220ms ease, filter 220ms ease, transform 220ms var(--ease-out); }
.wykres.zmiana .wykres__etykieta, .wykres.zmiana .wykres__liczba, .wykres.zmiana .wykres__pod { opacity: 0; filter: blur(6px); transform: translateY(6px); }

.wykres__svg { display: block; width: 100%; height: clamp(110px, 30cqi, 160px); margin-top: clamp(16px, 4cqi, 24px); overflow: visible; }
.wykres__svg line { stroke: rgb(241 242 243 / 0.08); stroke-width: 1.5; }
.wykres__pole { fill: url(#wykresGrad); transition: opacity 400ms ease; }
.wykres__linia { fill: none; stroke: var(--zielony-wykres); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease-in-out); }
.wykres.rysuje .wykres__linia { stroke-dashoffset: 1; transition: none; }
.wykres.rysuje .wykres__pole { opacity: 0; transition: none; }

.podsum { padding: clamp(20px, 5cqi, 30px); }
.podsum__tytul { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; font: 600 clamp(17px, 4.4cqi, 22px)/1.1 var(--f-tekst); letter-spacing: -0.01em; }
.podsum__ok { flex: none; width: clamp(32px, 8cqi, 40px); aspect-ratio: 1; border-radius: 50%; background: var(--zielony); color: #fff; display: grid; place-items: center; font-size: clamp(16px, 4cqi, 20px); }
.podsum__lista { margin: 0; }
.podsum__wiersz { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: clamp(11px, 3cqi, 15px) 0; border-top: 1px solid var(--na-czarnym-tlo); }
.podsum__wiersz dt { font: 500 clamp(14px, 3.6cqi, 17px)/1.2 var(--f-tekst); color: rgb(241 242 243 / 0.62); }
.podsum__wiersz dd { margin: 0; display: flex; align-items: baseline; gap: 14px; font: 600 clamp(16px, 4.2cqi, 20px)/1 var(--f-tekst); font-variant-numeric: tabular-nums; }
.podsum__wiersz dd span { min-width: 6.2em; text-align: right; font-size: 0.8em; font-weight: 500; color: rgb(241 242 243 / 0.5); }
.podsum__mala { margin: 14px 0 4px; font: 500 clamp(12px, 3cqi, 14px)/1 var(--f-tekst); color: rgb(241 242 243 / 0.42); }
.podsum__wiersz--zdjecia dd { gap: 8px; }
.podsum__foto { width: clamp(32px, 8cqi, 40px); height: clamp(42px, 10.6cqi, 54px); border-radius: 9px; background: var(--na-czarnym-tlo); display: grid; place-items: center; font-size: clamp(18px, 4.4cqi, 22px); color: rgb(241 242 243 / 0.45); min-width: 0 !important; }
.js .podsum .podsum__wiersz, .js .podsum .podsum__mala { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js .podsum.widac .podsum__wiersz, .js .podsum.widac .podsum__mala { opacity: 1; transform: none; }
.podsum.widac > .podsum__lista > :nth-child(2) { transition-delay: 160ms; }
.podsum.widac > .podsum__lista > :nth-child(3) { transition-delay: 240ms; }
.podsum.widac > .podsum__lista > :nth-child(4) { transition-delay: 320ms; }
.podsum.widac > .podsum__lista > :nth-child(5) { transition-delay: 400ms; }
.podsum.widac > .podsum__lista > :nth-child(6) { transition-delay: 480ms; }

.kalk { --b: #d2427c; --w: #c49a3a; --t: #3b78cf; display: grid; gap: clamp(10px, 2.8cqi, 14px); padding: clamp(14px, 4cqi, 22px); }
.kalk__blok { padding: clamp(14px, 4.2cqi, 22px); border-radius: clamp(18px, 4.6cqi, 24px); background: rgb(241 242 243 / 0.05); box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.08); }
.kalk__gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kalk__etykieta { margin: 0; padding-top: 4px; font: 600 clamp(11px, 2.8cqi, 13px)/1.2 var(--f-tekst); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(241 242 243 / 0.55); }
.kalk__pigulka { margin: 0; padding: 7px 12px; border-radius: 999px; background: #0b0c0d; box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.1);
  font: 600 clamp(12px, 3cqi, 14px)/1 var(--f-tekst); color: var(--na-czarnym); white-space: nowrap; }
.kalk__faza { margin: 2px 0 0; font: 500 clamp(14px, 3.6cqi, 16px)/1.2 var(--f-tekst); color: rgb(241 242 243 / 0.62); }
.kalk__liczba { display: flex; align-items: baseline; gap: 10px; margin: clamp(10px, 2.8cqi, 14px) 0 0; font: 700 clamp(38px, 10.5cqi, 54px)/1 var(--f-tekst); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalk__kcal { font-size: 0.4em; font-weight: 600; letter-spacing: -0.01em; color: rgb(241 242 243 / 0.55); }
.kalk__pod { margin: 10px 0 0; font: 500 clamp(12px, 3cqi, 14px)/1.3 var(--f-tekst); color: rgb(241 242 243 / 0.5); }
.kalk__belka { display: flex; gap: 4px; height: 10px; }
.kalk__belka i { flex: 1 1 0; min-width: 0; border-radius: 5px; transition: flex-grow 500ms var(--ease-out); }
.kalk__belka .b, .kalk__kafel[data-m="b"] .kalk__kropka { background: var(--b); }
.kalk__belka .w, .kalk__kafel[data-m="w"] .kalk__kropka { background: var(--w); }
.kalk__belka .t, .kalk__kafel[data-m="t"] .kalk__kropka { background: var(--t); }
.kalk__kafle { list-style: none; margin: clamp(12px, 3.2cqi, 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.8cqi, 10px); }
.kalk__kafel { display: grid; justify-items: center; align-content: start; gap: 5px; padding: clamp(10px, 2.8cqi, 14px) 4px; border-radius: 16px; background: rgb(241 242 243 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.08); text-align: center; }
.kalk__nazwa { font: 500 clamp(11px, 2.9cqi, 13px)/1.2 var(--f-tekst); color: rgb(241 242 243 / 0.62); }
.kalk__proc { font: 700 clamp(15px, 3.8cqi, 17px)/1 var(--f-tekst); color: rgb(241 242 243 / 0.62); }
.kalk__proc b { font-size: 1.5em; color: var(--na-czarnym); font-variant-numeric: tabular-nums; }
.kalk__g { display: inline-flex; align-items: center; gap: 6px; font: 600 clamp(13px, 3.4cqi, 15px)/1 var(--f-tekst); font-variant-numeric: tabular-nums; }
.kalk__g b { font-weight: 600; }
.kalk__kropka { width: 8px; height: 8px; border-radius: 50%; }
.kalk__min { min-height: 1em; font: 500 clamp(10px, 2.6cqi, 12px)/1 var(--f-tekst); color: rgb(241 242 243 / 0.42); }
.kalk__przyciski { display: flex; gap: 6px; margin-top: 4px; }
.kalk__przyciski button { width: clamp(28px, 7.4cqi, 34px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: #0b0c0d; color: var(--na-czarnym);
  display: grid; place-items: center; font-size: clamp(12px, 3cqi, 14px); cursor: pointer; transition: transform 140ms var(--ease-out), opacity 160ms ease; }
.kalk__przyciski button:active { transform: scale(0.92); }
.kalk__przyciski button:disabled { opacity: 0.3; cursor: default; }
.kalk__przyciski button:focus-visible { outline: 2px solid var(--zielony); outline-offset: 2px; }
.kalk__razem { margin: clamp(10px, 2.8cqi, 14px) 0 0; font: 600 clamp(13px, 3.4cqi, 15px)/1 var(--f-tekst); color: var(--zielony-wykres); }

.s5__tytul { margin: 0 auto; max-width: 16ch; text-align: center; }
.s5__krok-tyt { margin: 0; font: 700 clamp(20px, 1.7vw, 24px)/1.15 var(--f-naglowek); letter-spacing: -0.025em; }
.s5__krok-txt { margin: 8px 0 0; max-width: 32ch; font-size: 16px; line-height: 1.5; color: var(--tekst2); }

.s5a { padding-bottom: clamp(40px, 6vw, 72px); }
.s5a__kroki { position: relative; z-index: 1; list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; gap: 30px; }
.s5a__krok { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; align-content: start; }
.s5a__krok > :not(.s5a__wezel) { grid-column: 2; }
.s5a__wezel { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bialy);
  box-shadow: inset 0 0 0 1.5px var(--linia); font: 700 18px/1 var(--f-naglowek); color: var(--cichy);
  transition: background-color 280ms ease, color 280ms ease, box-shadow 280ms ease, transform 460ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.s5a__ikona { display: none; }

.s5a__krok.aktywny .s5a__wezel { background: #e3f5ee; color: var(--zielony); box-shadow: inset 0 0 0 1.5px rgb(27 175 122 / 0.35), 0 0 0 6px rgb(27 175 122 / 0.1); transform: scale(1.06); }
.s5a__krok .s5__krok-tyt { padding-top: 10px; }
@media (min-width: 900px) {
  .s5a__kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
  .s5a__krok { grid-template-columns: none; justify-items: start; row-gap: 0; }
  .s5a__krok > :not(.s5a__wezel) { grid-column: auto; }
  .s5a__wezel { grid-row: auto; }
  .s5a__ikona { display: grid; place-items: start; height: 52px; margin-top: 26px; color: var(--zielony); font-size: 40px; }
  .s5a__krok .s5__krok-tyt { padding-top: 18px; }
}

.js .s5a__krok > :not(.s5a__wezel) { opacity: 0.32; transform: translateY(6px); transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out); }
.js .s5a__krok.aktywny > :not(.s5a__wezel) { opacity: 1; transform: none; }
.s5a__linia { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.s5a__linia path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s5a__linia .tor { stroke: #e3e5e8; stroke-width: 3; }
.s5a__linia .pelna { stroke: var(--zielony-wykres); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.s5a__linia .grot { stroke: var(--zielony-wykres); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-4px) scale(0.6);
  transition: opacity 200ms ease, transform 320ms var(--ease-out); }
.s5a__linia.doszla .grot { opacity: 1; transform: none; }
.s5a__linia .glowa { fill: var(--zielony-wykres); stroke: var(--bialy); stroke-width: 3; opacity: 0; transition: opacity 200ms ease; }
.s5a__linia.jedzie .glowa { opacity: 1; }
.s5a__linia.doszla .glowa { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .s5a__krok > :not(.s5a__wezel) { transform: none; }
  .s5a__wezel { transition-duration: 1ms; }
}

.s4__tor { position: relative; }
.s4__nad { margin: 0; font: 700 clamp(34px, 4.6vw, 64px)/1.05 var(--f-naglowek); letter-spacing: -0.035em; color: var(--tusz); }
.s4__wstep { margin: clamp(28px, 3.6vw, 44px) 0 0; font: 700 clamp(20px, 2vw, 26px)/1.2 var(--f-naglowek); letter-spacing: -0.025em; color: var(--tusz); }
.s4__duzy, .s4__lacznik { display: none; }
.s4__kafle { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.s4__kafel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border-radius: 22px;
  background: var(--czarny); color: var(--na-czarnym2); box-shadow: var(--cien-karty); }
.s4__kafel p { margin: 0; font-size: 16px; line-height: 1.5; }
.s4__kafel b { font-weight: 600; color: var(--na-czarnym); padding-bottom: 2px;
  background: linear-gradient(var(--zielony-wykres), var(--zielony-wykres)) 0 100% / 100% 2px no-repeat; }
.s4__ikona { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--zielony-wykres); font-size: 28px; }
@media (min-width: 900px) {
  .s4__kafle { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 22px; }
  .s4__kafel { grid-template-columns: none; align-content: space-between; gap: 40px; min-height: 250px; padding: 30px; border-radius: 28px; }
  .s4__kafel p { font-size: 18px; }
  .s4__ikona { width: 56px; height: 56px; font-size: 34px; }
}
.s4__nie { margin-top: 18px; padding: 22px 20px; border-radius: 22px; background: var(--tlo); }
.s4__nie-tytul { margin: 0 0 16px; font: 700 18px/1.2 var(--f-naglowek); letter-spacing: -0.02em; }
.s4__nie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.s4__nie li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--tekst2); }

.s4__nie li > i { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; box-shadow: inset 0 0 0 1.5px #d9dce0; color: var(--tekst2); font-size: 20px; }
.s4__nie li > span { padding-top: 6px; }
.s4__nie a { color: var(--tusz); font-weight: 600; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .s4__nie { padding: 28px 30px; border-radius: 28px; }
  .s4__nie ul { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (min-width: 900px) and (min-height: 560px), (max-width: 899px) and (min-height: 460px) {
  .js .s4 { padding-top: 0; }

  .js .s4__tor { height: 330vh; }
  .js .s4__scena { position: sticky; top: 68px; height: calc(100svh - 68px); }
  .js .s4__nad { margin: 0 0 0.8em; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--cichy); }
  .js .s4__wstep { margin: 0 0 0.35em; font-size: var(--s4-wstep); line-height: 1.2; letter-spacing: -0.025em; color: var(--cichy); }
  .js .s4__duzy { display: grid; position: relative; font-size: var(--s4-duzy); }

  .js .s4__tekst { grid-area: 1 / 1; margin: 0; font: 700 1em/1.14 var(--f-naglowek); letter-spacing: -0.035em; color: var(--tusz); text-wrap: balance;
    opacity: 0; transform: translateY(0.4em); filter: blur(8px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), filter 420ms var(--ease-out); }
  .js .s4__tekst.aktywny { opacity: 1; transform: none; filter: none; }
  .js .s4__tekst.byl { transform: translateY(-0.4em); }
  .js .s4__tekst.aktywny .ramka-b2 { color: #fff; }
  .js .s4__tekst.aktywny .ramka-b2::before { clip-path: inset(0 0 0 0 round 0.23em); }
  .js .s4__kroki { display: none; }
  .js .s4__lacznik { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .js .s4__lacznik path { fill: none; stroke: var(--zielony-wykres); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
  .js .s4__lacznik circle { fill: var(--zielony-wykres); stroke: var(--bialy); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
  .js .s4__nie { margin-top: 0; }
}

@media (min-width: 900px) and (min-height: 560px) {
  .js .s4 { --s4-duzy: clamp(32px, 3.4vw, 50px); --s4-wstep: clamp(22px, 1.95vw, 28px); }

  .js .s4__nie { margin-top: -10svh; }
  .js .s4__scena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "kafle ." "kafle nad" "kafle wstep" "kafle duzy" "kafle ."; column-gap: clamp(56px, 6.5vw, 104px); }
  .js .s4__nad { grid-area: nad; }
  .js .s4__wstep { grid-area: wstep; }
  .js .s4__duzy { grid-area: duzy; }
  .js .s4__kroki { grid-row: 2; display: flex; gap: 6px; margin-top: 30px; }
  .js .s4__kroki span { width: 44px; height: 4px; border-radius: 2px; background: #d9dce0; overflow: hidden; }
  .js .s4__kroki i { display: block; height: 100%; background: var(--zielony); transform-origin: 0 50%; transform: scaleX(0); }
  .js .s4__kafle { grid-area: kafle; align-self: center; width: 100%; max-width: 520px; margin: 0; grid-template-columns: none; gap: 14px; }
  .js .s4__kafel { grid-template-columns: 52px minmax(0, 1fr); align-items: center; align-content: normal; gap: 18px; min-height: 0; padding: 22px 24px; border-radius: 24px; }
  .js .s4__kafel p { font-size: 17px; }
  .js .s4__ikona { width: 52px; height: 52px; font-size: 32px; background: transparent; color: var(--na-czarnym); transition: background-color 320ms ease, color 320ms ease; }
  .js .s4__kafel > * { opacity: 0.34; transition: opacity 320ms ease; }
  .js .s4__kafel.zrobiony > * { opacity: 0.62; }
  .js .s4__kafel.aktywny > * { opacity: 1; }
  .js .s4__kafel.aktywny .s4__ikona { background: rgb(79 209 161 / 0.14); color: var(--zielony-wykres); }
  .js .s4__kafel b { background-size: 0 2px; transition: background-size 640ms var(--ease-out) 260ms; }
  .js .s4__kafel.aktywny b, .js .s4__kafel.zrobiony b { background-size: 100% 2px; }
}

@media (max-width: 899px) and (min-height: 460px) {
  .js .s4 { --s4-duzy: clamp(26px, 7.4vw, 40px); --s4-wstep: clamp(18px, 5vw, 24px); }
  .js .s4__scena { display: flex; flex-direction: column; justify-content: center; padding-block: 8px 24px; }
  .js .s4__duzy { margin-bottom: clamp(36px, 6svh, 56px); }
  .js .s4__kafle { width: 100%; max-width: 560px; margin: 0; padding: 22px; border-radius: var(--promien); background: var(--czarny); box-shadow: var(--cien-karty);
    grid-template-columns: repeat(4, 44px) minmax(0, 1fr); grid-template-rows: 44px auto; column-gap: 8px; row-gap: 18px; }

  .js .s4__kafel { grid-area: 1 / 1 / 3 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: inherit; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .js .s4__kafel:nth-child(1) .s4__ikona { grid-column: 1; }
  .js .s4__kafel:nth-child(2) .s4__ikona { grid-column: 2; }
  .js .s4__kafel:nth-child(3) .s4__ikona { grid-column: 3; }
  .js .s4__kafel:nth-child(4) .s4__ikona { grid-column: 4; }
  .js .s4__ikona { grid-row: 1; background: transparent; color: rgb(241 242 243 / 0.42); font-size: 30px; transition: background-color 320ms ease, color 320ms ease; }
  .js .s4__kafel.zrobiony .s4__ikona { color: rgb(241 242 243 / 0.82); }
  .js .s4__kafel.aktywny .s4__ikona { background: rgb(79 209 161 / 0.14); color: var(--zielony-wykres); }
  .js .s4__kafel p { grid-row: 2; grid-column: 1 / -1; font-size: 17px;
    opacity: 0; transform: translateY(8px); filter: blur(6px); transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out), filter 380ms var(--ease-out); }
  .js .s4__kafel.aktywny p { opacity: 1; transform: none; filter: none; transition-delay: 160ms; }
  .js .s4__kafel b { background-size: 0 2px; transition: background-size 640ms var(--ease-out) 420ms; }
  .js .s4__kafel.aktywny b { background-size: 100% 2px; }

  .js .s4__lacznik circle:last-child { stroke: var(--czarny); }
}

@media (min-width: 900px) and (max-height: 559px), (max-width: 899px) and (max-height: 459px) {
  .js .s4__kafel { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
  .js .s4__kafel.widac { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .s4__tekst, .js .s4__kafel, .js .s4__kafel p { transform: none !important; filter: none !important; transition: opacity 300ms ease !important; }
  .js .s4__kafel b { transition: none !important; }
}

.s6d { position: relative; overflow: hidden; padding-top: 0; background: #0d1214; color: var(--na-czarnym); }
.s6d__foto { position: relative; height: min(74svh, 620px); margin-bottom: -20svh; }
.s6d__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% 24%; transform: scale(var(--s6d-skala, 1)); transform-origin: 45% 35%;
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 96%); mask-image: linear-gradient(to bottom, #000 50%, transparent 96%); }
.s6d__uklad { position: relative; z-index: 1; }
.s6d .tytul { margin: 0; color: var(--na-czarnym); }
.s6d .tytul .cichy { color: rgb(241 242 243 / 0.45); }
.s6d__czat { width: min(100%, 600px); margin: clamp(26px, 3vw, 40px) 0 0; padding: clamp(18px, 3vw, 26px); border-radius: var(--promien); background: rgb(255 255 255 / 0.05);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 30px 60px -30px rgb(0 0 0 / 0.7); }
.s6d__nag { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.s6d__mini { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #0d1416; box-shadow: 0 0 0 2px var(--zielony); }

.s6d__mini img { position: absolute; width: 263%; max-width: none; height: auto; left: -89.5%; top: -52.5%; }
.s6d__kto { display: grid; gap: 7px; justify-items: start; }
.s6d__kto b { font: 600 17px/1.2 var(--f-tekst); color: var(--na-czarnym); }
.s6d__kto img { width: auto; height: 16px; }
.s6d__dymki { position: relative; display: grid; gap: 10px; justify-items: start; }
.s6d__dymek { margin: 0; max-width: 94%; padding: 13px 17px; border-radius: 20px 20px 20px 6px; background: rgb(241 242 243 / 0.08); color: var(--na-czarnym); font-size: 16px; line-height: 1.5; }
.s6d__pisze { position: absolute; left: 0; top: 0; display: none; gap: 5px; padding: 15px 16px; border-radius: 18px 18px 18px 6px; background: rgb(241 242 243 / 0.08); }
.s6d__pisze i { width: 7px; height: 7px; border-radius: 50%; background: rgb(241 242 243 / 0.55); animation: s6d-kropka 1.1s ease-in-out infinite; }
.s6d__pisze i:nth-child(2) { animation-delay: 0.15s; }
.s6d__pisze i:nth-child(3) { animation-delay: 0.3s; }
@keyframes s6d-kropka { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.js .s6d__dymek { opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: 0 100%; transition: opacity 320ms ease, transform 460ms cubic-bezier(0.34, 1.25, 0.64, 1); }
.js .s6d__dymek.jest { opacity: 1; transform: none; }
.js .s6d__czat.pisze .s6d__pisze { display: inline-flex; }
@media (min-width: 900px) {
  .s6d__foto { position: absolute; top: 0; bottom: 0; left: 0; width: min(54%, 820px); height: auto; margin: 0; }
  .s6d__foto img { object-position: 50% 22%;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 22%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 22%); mask-composite: intersect; }

  .s6d { padding-block: clamp(48px, 5vw, 72px); }
  .s6d__uklad { min-height: max(520px, calc(100svh - 68px - 2 * clamp(48px, 5vw, 72px))); display: grid; align-items: center; justify-items: end; }
  .s6d__prawa { width: min(100%, 560px); }
  .s6d .tytul { max-width: 15ch; }
}
@media (prefers-reduced-motion: reduce) {
  .s6d__foto img { transform: none !important; }
  .js .s6d__dymek { transition-duration: 1ms; }
  .s6d__pisze i { animation: none; }
}

.s8__uklad { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .s8__uklad { grid-template-columns: minmax(0, 1fr) auto; } }
.s8__opis { margin: 22px 0 0; max-width: 42ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--tekst2); }
.s8__skroty { list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; display: grid; gap: 6px; max-width: 540px; }
.s8__skrot { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 18px 14px 14px; border: 0; border-radius: 20px;
  background: transparent; text-align: left; cursor: pointer; font: 400 15px/1.45 var(--f-tekst); color: var(--tekst2);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out); }
.s8__skrot i { font-size: 30px; margin-top: -2px; color: var(--zielony); }
.s8__skrot b { display: block; margin-bottom: 2px; font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--tusz); }
@media (hover: hover) and (pointer: fine) { .s8__skrot:hover { background: rgb(18 18 18 / 0.035); } }
.s8__skrot:active { transform: scale(0.99); }
.s8__skrot[aria-pressed="true"] { background: var(--bialy); box-shadow: var(--cien-karty); }
.s8__skrot:focus-visible, .s8__reset:focus-visible { outline: 2px solid var(--zielony); outline-offset: 2px; }
.s8__od-nowa { margin: 14px 0 0; }
.s8__reset { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #d9dce0; font: 600 14px/1 var(--f-tekst); color: var(--tekst2); transition: color 160ms ease, transform 160ms var(--ease-out); }
.s8__reset:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .s8__reset:hover { color: var(--tusz); } }
.s8:not(.dziala) .s8__od-nowa { display: none; }

@media (max-width: 959px) {
  .s8__tekst { display: contents; }
  .s8__uklad { gap: 0; }
  .s8__tekst > h2 { order: 1; }
  .s8__opis { order: 2; }
  .s8__miejsce { order: 3; margin-top: 36px; }
  .s8__skroty { order: 4; margin-top: 28px; justify-self: center; width: min(100%, 420px); }
  .s8__od-nowa { order: 5; justify-self: center; }
  .s8__skrot { grid-template-columns: 30px minmax(0, 1fr); align-items: center; padding: 11px 16px 11px 12px; }
  .s8__skrot i { font-size: 26px; margin-top: 0; }
  .s8__skrot span { font-size: 0; }
  .s8__skrot b { margin: 0; font-size: 16px; }
}

.s8__miejsce { --s: 0.82; justify-self: center; width: calc(410px * var(--s)); height: calc(900px * var(--s)); }
.s8__telefon { position: relative; width: 410px; height: 900px; padding: 10px; border-radius: 60px; background: #0c0d0f; transform: scale(var(--s)); transform-origin: 0 0;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.08), 0 60px 110px -50px rgb(14 15 16 / 0.65), 0 22px 40px -22px rgb(14 15 16 / 0.4); }
.s8__guzik { position: absolute; width: 4px; border-radius: 2px; background: #25272c; }
.s8__guzik--1 { left: -3px; top: 170px; height: 36px; }
.s8__guzik--2 { left: -3px; top: 230px; height: 66px; }
.s8__guzik--3 { right: -3px; top: 260px; height: 100px; }
.s8__ekran { position: relative; width: 390px; height: 880px; overflow: hidden; border-radius: 50px; background: #121315; }
.s8__pasek { position: relative; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 40px; color: #f1f2f3; font: 600 15px/1 var(--f-tekst); }
.s8__wyspa { position: absolute; top: 9px; left: 50%; width: 112px; height: 31px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.s8__ikony { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.s8__bateria { position: relative; width: 25px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.45); }
.s8__bateria::after { content: ""; position: absolute; inset: 2px 6px 2px 2px; border-radius: 2px; background: #f1f2f3; }
.s8__app { position: relative; width: 390px; height: 844px; }
.s8__zastepczy { position: absolute; inset: 0; width: 390px; height: 844px; border: 0; }

.s8__cele { position: absolute; inset: 0; z-index: 2; }
.s8__cele--czeka { pointer-events: none; }
.s8__cel { position: absolute; padding: 0; border: 0; border-radius: 14px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.s8__cel--kolo { border-radius: 50%; }
.s8__cel--dalej::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--zielony-wykres), 0 0 18px rgb(79 209 161 / 0.45); opacity: 0; animation: s8-puls 1.9s var(--ease-out) 0.5s infinite; }
@keyframes s8-puls { 0% { opacity: 0; transform: scale(0.97); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.s8__cel:focus-visible { outline: 2px solid var(--zielony-wykres); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .s8__cel:hover { background: rgb(128 128 128 / 0.14); } }
.s8__cel:active { background: rgb(128 128 128 / 0.2); }
.s8__stan { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .s8__cel--dalej::after { animation: none; opacity: 1; } }

.s7b { --zielony-tekst: #0f7a54; --perforacja: #c9cdd3; }
.s7b__proba { display: inline-flex; align-items: center; gap: 8px; margin: 24px 0 0; padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgb(27 175 122 / 0.1); color: var(--zielony-tekst); font: 600 15px/1.2 var(--f-tekst); }
.s7b__proba i { font-size: 19px; }

.s7b__plany { display: grid; gap: 20px; margin-top: clamp(36px, 4.4vw, 56px); }
@media (min-width: 860px) { .s7b__plany { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.s7b__plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 40px); }
.s7b__plan .btn { margin-top: auto; }

.s7b__plan--rok { background: var(--tlo); box-shadow: inset 0 0 0 1px var(--linia); }
.s7b__nazwa { margin: 0 0 16px; font: 600 18px/1.2 var(--f-tekst); color: var(--tekst2); }
.karta--czarna .s7b__nazwa { color: var(--na-czarnym2); }
.s7b__cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.s7b__kwota { font: 700 clamp(52px, 6vw, 80px)/1 var(--f-naglowek); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s7b__okres { font-size: 17px; color: var(--tekst2); }
.karta--czarna .s7b__okres { color: var(--na-czarnym2); }
.s7b__punkty { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 10px; }
.s7b__punkty li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; color: var(--tusz); }
.karta--czarna .s7b__punkty li { color: var(--na-czarnym); }

.s7b__punkty i { font-size: 20px; margin-top: 1px; color: var(--tusz); }
.karta--czarna .s7b__punkty i { color: var(--na-czarnym); }
.s7b__wstazka { position: absolute; top: clamp(22px, 3vw, 36px); right: clamp(20px, 3vw, 36px); margin: 0; overflow: hidden; border-radius: 999px; }
.s7b__wstazka span { display: block; padding: 7px 13px; background: var(--zielony); color: #fff; font: 600 13.5px/1.2 var(--f-tekst); white-space: nowrap; }
.js .s7b__wstazka span { transform: translateX(105%); transition: transform 600ms var(--ease-out) 450ms; }
.js .s7b__plan--rok.widac .s7b__wstazka span { transform: none; }

.s7b__platnosci { display: grid; gap: 22px; justify-items: center; margin-top: clamp(30px, 3.6vw, 44px); text-align: center; }
@media (min-width: 760px) {
  .s7b__platnosci { grid-template-columns: auto auto; justify-content: center; column-gap: 0; }
  .s7b__sposob { padding: 0 clamp(28px, 4vw, 52px); }
  .s7b__sposob + .s7b__sposob { border-left: 1px solid var(--linia); }
}
.s7b__sposob { display: grid; justify-items: center; gap: 12px; }
.s7b__sposob p { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--tekst2); }
.s7b__sposob b { color: var(--tusz); font-weight: 600; }
.s7b__loga { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.s7b__loga img { display: block; width: 56px; height: auto; border-radius: 6px; }
@media (min-width: 760px) { .s7b__loga img { width: 60px; } }
.s7b__przypis { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--cichy); }

.ze { margin-top: clamp(48px, 6vw, 80px); }
.ze__tytul { margin: 0 0 clamp(22px, 3vw, 34px); font: 700 clamp(26px, 2.8vw, 38px)/1.1 var(--f-naglowek); letter-spacing: -0.03em; text-align: center; text-wrap: balance; }
.ze__tytul .cichy { color: var(--cichy); }
.ze__karty { display: grid; gap: 20px; }

@media (min-width: 1040px) { .ze__karty { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: stretch; } }
@media (min-width: 640px) and (max-width: 1039px) { .ze__karta--nie .ze__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.ze__karta { border-radius: var(--promien); padding: clamp(24px, 3.2vw, 40px); }
.ze__karta--jest { background: var(--bialy); box-shadow: var(--cien-karty); }
.ze__karta--nie { display: flex; flex-direction: column; background: var(--tlo); }

.ze__glowka { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto 26px; padding: 7px 20px 7px 7px; border-radius: 999px;
  font: 700 clamp(19px, 1.8vw, 22px)/1.2 var(--f-naglowek); letter-spacing: -0.025em; }
.ze__glowka i { font-size: 30px; }
.ze__karta--jest .ze__glowka { background: rgb(27 175 122 / 0.12); color: #12805c; }
.ze__karta--jest .ze__glowka i { color: var(--zielony); }
.ze__karta--nie .ze__glowka { background: rgb(18 18 18 / 0.06); color: var(--tekst2); }
.ze__karta--nie .ze__glowka i { color: var(--tekst2); }
.ze__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 32px; }
@media (min-width: 640px) { .ze__karta--jest .ze__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ze__lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--tekst2); }

.ze__lista li > i { font-size: 30px; margin-top: -4px; color: var(--zielony); }
.ze__lista b { display: block; margin-bottom: 3px; font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--tusz); }
.ze__karta--nie .ze__lista { gap: 16px; }
.ze__karta--nie .ze__lista li > i { margin-top: -1px; color: var(--cichy); }
.ze__karta--nie .ze__lista b { margin-top: 3px; font-weight: 500; color: var(--tekst2); }
.ze__wspolpraca { margin: auto 0 0; padding-top: 26px; font-size: 15.5px; line-height: 1.5; color: var(--tekst2); }
.ze__wspolpraca a { color: var(--tusz); font-weight: 600; text-underline-offset: 3px; }

.js .s7b__platnosci.odslona, .js .ze.odslona { opacity: 1; transform: none; filter: none; }
.js .s7b__loga li, .js .s7b__sposob p, .js .s7b__przypis, .js .ze__lista li { opacity: 0; transform: translateY(10px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: calc(var(--n, 0) * 50ms); }
.js .s7b__sposob p { transition-delay: 260ms; }
.js .s7b__przypis { transition-delay: 380ms; }
.js .ze__karta--nie .ze__lista li { transition-delay: calc(300ms + var(--n, 0) * 60ms); }
.js .s7b__platnosci.widac :is(.s7b__loga li, .s7b__sposob p, .s7b__przypis), .js .ze.widac .ze__lista li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .s7b__loga li, .js .s7b__sposob p, .js .s7b__przypis, .js .ze__lista li { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .js .s7b__wstazka span { transform: none; transition: none; }
}

.s9 { position: relative; overflow: clip; }
.s9__uklad { position: relative; display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .s9__uklad { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
  .s9__lewa { position: sticky; top: 92px; height: calc(100svh - 124px); display: flex; align-items: center; }
}

@media (min-width: 1000px) and (max-height: 640px) { .s9__lewa { position: static; height: auto; } }
@media (max-width: 999px) { .s9__lewa { order: 2; } .s9__prawa { order: 1; } }

.s9__baner { position: relative; overflow: hidden; width: 100%; padding: clamp(22px, 2.4vw, 30px); border-radius: 26px; background: var(--czarny); color: var(--na-czarnym); }
.s9__kropki { position: absolute; inset: 0; pointer-events: none; opacity: 0.09; background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 16px 16px; }
.s9__baner > :not(.s9__kropki) { position: relative; }
.s9__baner-tytul { margin: 0; font: 700 clamp(25px, 2.2vw, 30px)/1.12 var(--f-naglowek); letter-spacing: -0.035em; color: var(--na-czarnym); text-wrap: balance; }

.s9__baner-tytul .cichy { color: rgb(241 242 243 / 0.45); }
.s9__baner-tekst { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgb(241 242 243 / 0.65); }
.s9__btn { margin-top: 18px; height: 48px; padding: 0 22px; font-size: 15px; }

.s9__powiad { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 20px; padding: 11px 13px; border-radius: 18px;
  background: rgb(241 242 243 / 0.1); box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.12), 0 20px 40px -22px rgb(0 0 0 / 0.9); }
.s9__powiad-ik { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--na-czarnym); }
.s9__powiad-ik svg { width: 22px; height: 17px; color: var(--czarny); }
.s9__powiad-tekst { display: grid; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.35; color: rgb(241 242 243 / 0.75); }
.s9__powiad-gora { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: rgb(241 242 243 / 0.5); }
.s9__powiad-gora b { font-weight: 600; letter-spacing: 0.04em; }
.s9__powiad-tekst > b { font-size: 14px; font-weight: 600; color: var(--na-czarnym); }
.js .s9__powiad { opacity: 0; transform: translateY(-18px) scale(0.96);
  transition: opacity 400ms var(--ease-out) 350ms, transform 680ms cubic-bezier(0.34, 1.3, 0.64, 1) 350ms; }
.js .s9__baner.widac .s9__powiad { opacity: 1; transform: none; }

.s9__licznik { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(241 242 243 / 0.1); }
.s9__nad { margin: 0; font: 600 11.5px/1 var(--f-tekst); letter-spacing: 0.1em; text-transform: uppercase; color: rgb(241 242 243 / 0.5); }
.s9__zegar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.s9__pole { display: grid; justify-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 14px; background: rgb(241 242 243 / 0.06); box-shadow: inset 0 0 0 1px rgb(241 242 243 / 0.09); }
.s9__pole b { display: block; font: 700 clamp(21px, 1.9vw, 26px)/1 var(--f-naglowek); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--na-czarnym); }
.s9__pole small { font: 600 10.5px/1 var(--f-tekst); color: rgb(241 242 243 / 0.5); }
.s9__pole:last-child b { color: var(--zielony-wykres); }
.s9__pole b.tik { animation: s9-tik 380ms var(--ease-out); }
@keyframes s9-tik { from { opacity: 0.25; transform: translateY(-0.25em); } to { opacity: 1; transform: none; } }

.s9__glowka { display: grid; justify-items: center; gap: 18px; text-align: center; }
.s9__glowka .tytul { font-size: clamp(34px, 3.6vw, 52px); }
.s9__pytajnik { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bialy); box-shadow: inset 0 0 0 1px var(--linia); font-size: 21px; color: rgb(18 18 18 / 0.8); }
.s9__lista { margin-top: clamp(28px, 3vw, 36px); border-radius: 22px; background: var(--bialy); box-shadow: inset 0 0 0 1px var(--linia); overflow: hidden; }
.s9__lista details + details { border-top: 1px solid #ececee; }
.s9__lista summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px clamp(20px, 2.4vw, 32px); cursor: pointer; list-style: none;
  font: 500 17px/1.5 var(--f-tekst); letter-spacing: -0.015em; color: var(--tusz); transition: background-color 150ms ease; }
.s9__lista summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .s9__lista summary:hover { background: rgb(243 244 245 / 0.7); } }
.s9__lista summary i { flex: none; margin-top: 4px; font-size: 18px; color: var(--tekst2); transition: transform 200ms var(--ease-out); }
.s9__lista details[open] summary i { transform: rotate(45deg); }
.s9__lista summary:focus-visible { outline: 2px solid var(--zielony); outline-offset: -2px; }
.s9__odp { max-width: 66ch; padding: 0 clamp(20px, 2.4vw, 32px) 26px; font-size: 16px; line-height: 1.8; color: var(--tekst2); }
.s9__odp p { margin: 0 0 12px; }
.s9__odp p:last-child { margin-bottom: 0; }
.s9__odp a { color: var(--tusz); text-underline-offset: 3px; }
.s9__lista details[open] .s9__odp { animation: s9-rozwin 300ms var(--ease-out); }
@keyframes s9-rozwin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .s9__lista details[open] .s9__odp, .s9__pole b.tik { animation: none; }
  .js .s9__powiad { transform: none; transition: opacity 300ms ease; }
}

.stopka { position: relative; background: var(--tlo); }
.stopka__linia { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--zielony); transform-origin: 0 50%; }
.js .stopka__linia { transform: scaleX(0); transition: transform 1200ms var(--ease-in-out); }
.js .stopka.widac .stopka__linia { transform: none; }
.stopka__gora { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; }
.stopka__gore { position: relative; display: grid; flex-shrink: 0; width: 46px; height: 46px; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--bialy); color: var(--tusz); box-shadow: inset 0 0 0 1px var(--linia); cursor: pointer; transition: transform 160ms var(--ease-out); }
.stopka__gore i { font-size: 18px; transition: transform 200ms var(--ease-out); }
.stopka__gore svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.stopka__gore circle { fill: none; stroke: var(--zielony); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.js .stopka__gore circle { stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease-out) 700ms; }
.js .stopka.widac .stopka__gore circle { stroke-dashoffset: 0; }
.stopka__gore:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .stopka__gore:hover i { transform: translateY(-2px); } }
.stopka__dol { display: grid; gap: 12px; padding-block: 16px 30px; border-top: 1px solid var(--linia); font-size: 13px; line-height: 1.6; color: var(--cichy); }
.stopka__rzad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; }
.stopka__dok { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.stopka__dok a { color: var(--tekst2); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .stopka__dok a:hover { color: var(--tusz); text-decoration-line: underline; } }
.stopka__social { display: flex; gap: 2px; margin-inline: -9px; }
.stopka__social a { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 8px; color: var(--tekst2);
  transition: background-color 150ms ease, color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .stopka__social a:hover { background: var(--linia); color: var(--tusz); } }
.stopka__ik { display: block; width: 17px; height: 17px; }
.stopka__dane { margin: 0; font-size: 12.5px; text-wrap: pretty; }
.stopka__dane a { color: inherit; }
.stopka :focus-visible { outline: 2px solid var(--zielony); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .js .stopka__linia, .js .stopka__gore circle, .stopka__gore i { transition: none; } }
.nw { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .powiad, .powiad__zegar .cyfra > span, .przelacznik__tor::after, .zakladki__wskaznik, .pierscien__luk, .kalk__belka i { transition-duration: 1ms; }
  .powiad.wibruje { animation: none; }
  .wykres__linia, .wykres__pole { transition: none; }
  .js .podsum .podsum__wiersz, .js .podsum .podsum__mala { transform: none; }
}

.s3__tytul { margin: 0 auto; max-width: 20ch; text-align: center; }
.strzalka-s3 { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.strzalka-s3 path { fill: none; stroke: var(--zielony-wykres); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.strzalka-s3 .linia { stroke-dasharray: 1; stroke-dashoffset: 1; }
.strzalka-s3 .grot { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-4px) scale(0.6); transition: opacity 200ms ease, transform 320ms var(--ease-out); }
.strzalka-s3.doszla .grot { opacity: 1; transform: none; }
.strzalka-s3 circle { fill: var(--zielony-wykres); stroke: var(--czarny); stroke-width: 3; opacity: 0; transition: opacity 200ms ease; }
.strzalka-s3.ruszyla circle { opacity: 1; }
.strzalka-s3.strzalka-s4 circle { stroke: var(--tlo); }

.s3c__in { display: grid; justify-items: center; }

.s3c__pasek { display: flex; gap: 4px; max-width: 100%; margin-top: clamp(28px, 4vw, 44px); padding: 8px; border-radius: 28px; background: var(--bialy);
  box-shadow: 0 0 0 1px var(--linia), 0 24px 50px -30px rgb(14 15 16 / 0.35); overflow-x: auto; scrollbar-width: none; }
.s3c__pasek::-webkit-scrollbar { display: none; }
.s3c__zakladka { position: relative; flex: none; display: grid; justify-items: center; gap: 7px; padding: 8px 10px 12px; border: 0; border-radius: 20px; background: none; cursor: pointer;
  font: 600 12.5px/1 var(--f-tekst); color: var(--tekst2); transition: color 200ms ease; }
.s3c__zakladka:focus-visible { outline: 2px solid var(--zielony); outline-offset: 2px; }
.s3c__ikona { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--linia); color: var(--tekst2);
  transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out); }
.s3c__zakladka:active .s3c__ikona { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .s3c__zakladka:hover .s3c__ikona { background: rgb(18 18 18 / 0.04); color: var(--tusz); } }
.s3c__zakladka[aria-selected="true"] { color: var(--tusz); }
.s3c__zakladka[aria-selected="true"] .s3c__ikona { background: rgb(27 175 122 / 0.1); box-shadow: none; color: var(--zielony); }

.s3c__czas { position: absolute; left: 16px; right: 16px; bottom: 3px; height: 3px; border-radius: 2px; overflow: hidden; }
.s3c__zakladka[aria-selected="true"] .s3c__czas { background: var(--linia); }
.s3c__czas i { display: block; height: 100%; background: var(--zielony); transform-origin: 0 50%; transform: scaleX(0); }
.s3c__zakladka[aria-selected="true"] .s3c__czas i { transform: scaleX(1); }
.s3c.gra .s3c__zakladka[aria-selected="true"] .s3c__czas i { animation: s3c-czas 7s linear both; }
.s3c.pauza .s3c__czas i { animation-play-state: paused !important; }
@keyframes s3c-czas { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.s3c__podpisy { position: relative; width: min(100%, 760px); margin-top: clamp(26px, 3.4vw, 40px); text-align: center; }
.s3c__podpis { margin: 0; text-align: center; font-size: clamp(24px, 2.4vw, 34px); }
.js .s3c__podpisy { display: grid; }
.js .s3c__podpis { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translateY(0.35em); filter: blur(6px); visibility: hidden;
  transition: opacity 160ms ease, filter 160ms ease, transform 0s linear 160ms, visibility 0s linear 160ms; }
.js .s3c__podpis.aktywny { opacity: 1; transform: none; filter: none; visibility: visible;
  transition: opacity 380ms var(--ease-out) 120ms, transform 480ms var(--ease-out) 120ms, filter 380ms var(--ease-out) 120ms, visibility 0s linear 0s; }

.s3c__okno { position: relative; width: min(100%, 520px); margin-top: clamp(24px, 3vw, 36px); display: grid; }
.s3c__panel { grid-area: 1 / 1; align-self: start; flex-direction: column; gap: 16px; }
.s3c__panel > :not(.powiad) { width: 100%; }
.s3c__panel .pierscien { margin-top: 0; max-width: none; }
.js .s3c__panel { visibility: hidden; opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 180ms ease, transform 0s linear 180ms, visibility 0s linear 180ms; }
.js .s3c__panel.aktywny { visibility: visible; opacity: 1; transform: none;
  transition: opacity 380ms var(--ease-out) 200ms, transform 560ms var(--ease-out) 200ms, visibility 0s linear 0s; }

.tydzien__gora .tydzien__ile { margin: 6px 0 0; padding: 0; background: none; border-radius: 0; font: 500 clamp(13px, 3.2cqi, 15px)/1.2 var(--f-tekst); color: var(--cichy); }
.tydzien__licznik { position: relative; flex: none; width: clamp(56px, 14cqi, 68px); aspect-ratio: 1; }
.tydzien__licznik .pierscien__svg { display: block; width: 100%; height: 100%; }
.tydzien__licznik .pierscien__tor { stroke: #e9ebee; }
.tydzien__licznik .pierscien__luk { stroke: var(--zielony); }
.tydzien__srodek { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1px; }
.tydzien__licznik .pierscien__liczba { font: 700 clamp(18px, 4.8cqi, 22px)/1 var(--f-naglowek); letter-spacing: -0.03em; color: var(--tusz); }
.tydzien__licznik .pierscien__pod { font: 600 clamp(10px, 2.6cqi, 11px)/1 var(--f-tekst); color: var(--cichy); }
@media (min-width: 640px) { .s3c__panel[data-typ="tydzien"] .trening { padding-block: 9px; } }
@media (max-width: 559px) {
  .s3c__pasek { gap: 0; padding: 6px; border-radius: 22px; }
  .s3c__zakladka { padding: 5px 3px 10px; }
  .s3c__ikona { width: 40px; height: 40px; font-size: 25px; border-radius: 12px; }
  .s3c__etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s3c__czas { left: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .strzalka-s3 .grot { transform: none; }
  .js .s3c__podpis, .js .s3c__panel { transform: none !important; filter: none !important; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .js .s3c__podpis.aktywny, .js .s3c__panel.aktywny { transition: opacity 300ms ease; }
  .s3c.gra .s3c__zakladka[aria-selected="true"] .s3c__czas i { animation: none; }
}

@media (min-width: 1180px) {
  .s3c__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(40px, 4vw, 64px); justify-items: start; }
  .s3c__in > .s3__tytul { grid-area: 2 / 1; margin: 0; max-width: 14ch; text-align: left; }
  .s3c__pasek { grid-area: 3 / 1; gap: 2px; }
  .s3c__zakladka { padding-inline: 4px; }
  .s3c__podpisy { grid-area: 4 / 1; width: 100%; text-align: left; }
  .s3c__podpis { text-align: left; font-size: clamp(24px, 2.1vw, 30px); }
  .s3c__okno { grid-area: 1 / 2 / 6 / 3; margin-top: 0; align-self: center; }
  .s3c__panel { align-self: center; }
}