@charset "utf-8";

/* =========================================================================
   MASZ Marketing — arkusz stylów strony jednostronicowej
   Kolejność: kroje pisma → zmienne → reset → typografia → elementy wspólne
              → sekcje w kolejności występowania → punkty graniczne
   ========================================================================= */

/* --- Kroje pisma (lokalne, bez odwołań do Google Fonts) ------------------ */

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Zmienne ------------------------------------------------------------- */

:root {
  --granat: #1B273F;
  --granat-ciemny: #141D30;
  --papier: #F4F6F9;
  --biel: #FFFFFF;
  --sport: #0076C0;
  --sport-ciemny: #005E9A;
  --sport-jasny: #4BA6E8;   /* niebieski do tekstu i cienkich linii na granacie */
  --grafit: #46505F;
  --linia: #DCE2EA;
  --blad: #C42B1C;
  --sukces: #1E9E57;

  --biel-80: rgba(255, 255, 255, 0.82);
  --biel-60: rgba(255, 255, 255, 0.62);
  --biel-linia: rgba(255, 255, 255, 0.16);

  --naglowki: "Oswald", "Segoe UI Condensed", system-ui, sans-serif;
  --tresc: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --kontener: 1140px;
  --margines: 24px;
  --odstep-sekcji: 96px;
  --promien: 10px;
  --pasek-wys: 64px;
}

/* --- Reset i podstawy ---------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--pasek-wys) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--granat);
  font-family: var(--tresc);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* Atrybut hidden ma chować element także wtedy, gdy klasa nadaje mu display.
   Bez tego formularz z display: grid zostawał na ekranie po wysłaniu. */
[hidden] { display: none !important; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--naglowki);
  margin: 0 0 16px;
  text-wrap: balance;
}

h1 {
  font-size: 64px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0;
}

h2 {
  font-size: 42px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
  max-width: 24ch;
}

h3 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}

/* Nazwa marki w nagłówku — prosto, bez pochylenia, bo to nazwa własna. */
.marka { color: var(--sport-jasny); }

/* Wyróżnienie w nagłówku. Oswald nie ma kursywy — pochyla ją przeglądarka,
   tak samo jak w większości sportowych identyfikacji. */
.akcent {
  color: var(--sport);
  font-style: italic;
}
.hero .akcent,
.sekcja--granat .akcent,
.przerywnik--dane .akcent { color: var(--sport-jasny); }

p { margin: 0 0 16px; text-wrap: pretty; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

small, .podpis { font-size: 14px; line-height: 1.5; }

strong { font-weight: 600; }

.ikony-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Stan skupienia klawiatury ------------------------------------------ */

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

.hero :focus-visible,
.sekcja--granat :focus-visible,
.stopka :focus-visible,
.baner-zgody :focus-visible {
  outline-color: var(--sport-jasny);
}

.skip-link {
  position: absolute;
  left: 24px;
  top: -100px;
  z-index: 200;
  background: var(--granat);
  color: var(--biel);
  padding: 12px 18px;
  border-radius: var(--promien);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* --- Siatka -------------------------------------------------------------- */

.kontener {
  width: 100%;
  max-width: var(--kontener);
  margin-inline: auto;
  padding-inline: var(--margines);
}

.sekcja { padding-block: var(--odstep-sekcji); }
.sekcja--papier { background: var(--papier); }
/* Kolor tekstu dziedziczy się z sekcji — dzięki temu biała karta formularza
   może go nadpisać jednym wpisem, bez walki o specyficzność selektorów. */
.sekcja--granat { background: var(--granat); color: var(--biel-80); }
.sekcja--granat h2,
.sekcja--granat h3,
.sekcja--granat strong { color: var(--biel); }

/* --- Przyciski i odnośniki ---------------------------------------------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--promien);
  font-family: var(--naglowki);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.przycisk--glowny {
  background: var(--sport);
  color: var(--biel);
}
.przycisk--glowny:hover { background: var(--sport-ciemny); }

.przycisk--obrys {
  background: transparent;
  color: var(--biel);
  border-color: rgba(255, 255, 255, 0.55);
}
.przycisk--obrys:hover { background: var(--biel); color: var(--granat); border-color: var(--biel); }

.przycisk--obrys-jasny {
  background: transparent;
  color: var(--granat);
  border-color: var(--linia);
}
.przycisk--obrys-jasny:hover { background: var(--biel); border-color: var(--granat); }

.przycisk--obrys-ciemny {
  background: transparent;
  color: var(--biel);
  border-color: rgba(255, 255, 255, 0.4);
}
.przycisk--obrys-ciemny:hover { background: rgba(255, 255, 255, 0.1); }

.link-tekstowy {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.link-tekstowy:hover { text-decoration-thickness: 2px; }

.do-uzupelnienia {
  display: inline-block;
  background: #FFF2CC;
  color: #6B4A00;
  border: 1px dashed #A87C00;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 600;
}

/* --- Belka górna --------------------------------------------------------- */

.pasek {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--pasek-wys);
  background: var(--papier);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.pasek--przewiniety { box-shadow: 0 1px 0 var(--linia), 0 6px 18px rgba(20, 29, 48, 0.07); }

/* Strona główna: belka leży na sekcji hero i jest przezroczysta. Ciemnieje
   dopiero po przewinięciu, żeby odnośniki nie zlewały się z treścią. */
.pasek--nad-hero {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  color: var(--biel);
}
.pasek--nad-hero.pasek--przewiniety {
  background: rgba(20, 29, 48, 0.88);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(20, 29, 48, 0.28);
}

.pasek__wnetrze {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding-block: 6px;          /* razem z wysokością znaku daje 44 px do kliknięcia */
  text-decoration: none;
}
.logo__znak { display: block; width: auto; height: 32px; }
.logo__nazwa {
  font-family: var(--naglowki);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--granat);
}
.logo__nazwa strong { font-weight: 700; }
.pasek--nad-hero .logo__nazwa { color: var(--biel); }

.nawigacja__lista {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nawigacja__lista a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--grafit);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 6px;
}
/* Podkreślenie wjeżdża od lewej i zostaje przy dziale, który właśnie czytasz. */
.nawigacja__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sport);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nawigacja__lista a:hover { color: var(--granat); }
.nawigacja__lista a:hover::after,
.nawigacja__lista a[aria-current="true"]::after { transform: scaleX(1); }
.pasek--nad-hero .nawigacja__lista a { color: var(--biel-80); }
.pasek--nad-hero .nawigacja__lista a::after { background: var(--sport-jasny); }
.pasek--nad-hero .nawigacja__lista a:hover,
.pasek--nad-hero .nawigacja__lista a[aria-current="true"] { color: var(--biel); }

.pasek__cta { min-height: 42px; padding: 8px 18px; font-size: 15px; white-space: nowrap; }

.pasek__telefon,
.pasek__hamburger { display: none; }

.pasek__telefon,
.pasek__hamburger {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--linia);
  border-radius: var(--promien);
  color: var(--granat);
  cursor: pointer;
  padding: 0;
}
.pasek--nad-hero .pasek__telefon,
.pasek--nad-hero .pasek__hamburger {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--biel);
}
.pasek--nad-hero .pasek__telefon:hover,
.pasek--nad-hero .pasek__hamburger:hover { background: rgba(255, 255, 255, 0.1); }

.pasek__telefon svg,
.pasek__hamburger svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Menu mobilne -------------------------------------------------------- */

.menu-mobilne {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 29, 48, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--biel);
  padding: 20px var(--margines) 32px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: menu-wejscie 0.2s ease;
}
@keyframes menu-wejscie {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.menu-mobilne[hidden] { display: none; }

.menu-mobilne__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 16px;
}
.menu-mobilne__tytul { font-family: var(--naglowki); font-size: 20px; font-weight: 600; }
.menu-mobilne__zamknij {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--promien);
  color: var(--biel);
  cursor: pointer;
}
.menu-mobilne__zamknij svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

.menu-mobilne__lista { list-style: none; margin: 0 0 24px; padding: 0; }
.menu-mobilne__lista a {
  display: block;
  padding: 16px 0;
  font-family: var(--naglowki);
  font-size: 24px;
  font-weight: 600;
  color: var(--biel);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.menu-mobilne__lista a:hover { color: var(--sport-jasny); }
.menu-mobilne__cta { width: 100%; }
.menu-mobilne__tel {
  margin-top: 16px;
  text-align: center;
  font-weight: 600;
  color: var(--biel-80);
  text-decoration: none;
}

/* --- Sekcja hero --------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  min-height: 100svh;
  padding-block: calc(var(--pasek-wys) + 40px) 56px;
  background: var(--granat);
  color: var(--biel);
  overflow: hidden;
}

/* Tło hero: film, a pod nim zasłona, żeby tekst zawsze miał kontrast.
   Bez pliku filmu zostaje sama zasłona na ciemnym tle — wygląda celowo. */
.hero__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--granat-ciemny);
}
.hero__wideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.hero--z-wideo .hero__wideo { opacity: 1; }
.hero__zaslona {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 54% at 78% 8%, rgba(0, 118, 192, 0.45) 0%, transparent 62%),
    linear-gradient(120deg, rgba(20, 29, 48, 0.96) 0%, rgba(20, 29, 48, 0.9) 48%, rgba(20, 29, 48, 0.66) 100%);
}

.hero__siatka {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hero h1 { max-width: 20ch; margin-bottom: 24px; }

/* Pisane słowo w nagłówku. Niewidoczna kopia najdłuższego hasła leży w tej
   samej komórce siatki co pisany tekst, więc pole ma stałą szerokość
   i nagłówek nie zmienia liczby wierszy między hasłami. */
.pisane {
  display: inline-grid;
  white-space: nowrap;
}
.pisane::before {
  content: attr(data-miara);
  grid-area: 1 / 1;
  visibility: hidden;
}
.pisane__tekst { grid-area: 1 / 1; }

/* Kursor pojawia się dopiero, gdy skrypt ruszy z animacją. Ujemny margines
   sprawia, że nie zajmuje miejsca w wierszu. Mruga tylko w przerwie między
   pisaniem a kasowaniem. */
.pisane--aktywne .pisane__tekst::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.8em;
  margin: 0 -0.14em 0 0.07em;
  vertical-align: -0.02em;
  background: var(--sport-jasny);
  animation: kursor 1.06s steps(1) infinite;
}
.pisane--pisze .pisane__tekst::after { animation: none; }

@keyframes kursor {
  50% { opacity: 0; }
}

.hero__lead { color: var(--biel-80); max-width: 46ch; margin-bottom: 32px; }

.hero__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

/* Kreska stoi przed każdym rodzajem zajęć, a pas jest wysunięty w lewo
   o kreskę z odstępami i w tym miejscu przycięty. Kreska na początku wiersza
   znika, więc przy zawijaniu żadna nie wisi na brzegu. */
.hero__zaufanie {
  --odstep: 14px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--biel-60);
  max-width: none;
  margin: 0 0 0 calc(-2 * var(--odstep) - 1px);
  clip-path: inset(0 0 0 calc(2 * var(--odstep) + 1px));
}
.hero__zaufanie span { display: inline-flex; align-items: center; }
.hero__zaufanie span::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-inline: var(--odstep);
  background: rgba(255, 255, 255, 0.28);
}

/* Liczby pod hero: to, co widać na stronie niżej, tylko od razu na wejściu */

.hero__liczby {
  list-style: none;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
}
.hero__liczba {
  display: block;
  font-family: var(--naglowki);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--biel);
}
.hero__opis {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--biel-60);
  max-width: 30ch;
}

/* Licznik */

.hero__licznik {
  justify-self: center;
  width: 100%;
  max-width: 360px;
  padding: 28px 26px 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(20, 29, 48, 0.35);
}

.stoper {
  position: relative;
  width: min(280px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.stoper__svg { width: 100%; height: 100%; }

.stoper__tor {
  fill: none;
  stroke: rgba(220, 226, 222, 0.22);
  stroke-width: 10;
}
.stoper__postep {
  fill: none;
  stroke: var(--sport-jasny);
  stroke-width: 10;
  stroke-dasharray: 804.248;
  stroke-dashoffset: 804.248;
}
.stoper__kreski {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 2;
  stroke-linecap: round;
}
.stoper__kreski--duze { stroke: rgba(255, 255, 255, 0.62); stroke-width: 3; }

.stoper__odczyt {
  position: absolute;
  inset: 0;
  margin: 0;
  max-width: none;
  display: grid;
  place-items: center;
  font-family: var(--naglowki);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sport-jasny);
}
.stoper__grupa { display: flex; align-items: baseline; gap: 5px; }
.stoper__sekundy { font-size: 86px; line-height: 1; }
.stoper__jednostka {
  font-size: 26px;
  font-weight: 600;
  color: var(--biel-60);
}

.stoper__podpisy {
  position: relative;
  margin-top: 24px;
  min-height: 52px;
}
.stoper__podpis {
  position: absolute;
  inset-inline: 0;
  top: 0;
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--biel-80);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.stoper__podpis.jest-aktywny { opacity: 1; }

.stoper__podpisy--lista { min-height: 0; }
.stoper__podpisy--lista .stoper__podpis {
  position: relative;
  opacity: 1;
  padding-left: 18px;
  margin-bottom: 10px;
  transition: none;
}
.stoper__podpisy--lista .stoper__podpis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--sport-jasny);
}
.stoper__podpisy--lista .stoper__podpis--koniec { color: var(--biel); font-weight: 600; }

.stoper__powtorz { margin-top: 14px; font-size: 14px; color: var(--biel-60); }
.stoper__wiecej {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 10px;
  font-family: var(--naglowki);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sport-jasny);
  text-decoration: none;
}
.stoper__wiecej::after {
  content: "";
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}
.stoper__wiecej:hover { color: var(--biel); }
.stoper__wiecej:hover::after { transform: rotate(45deg) translate(1px, 1px); }

/* --- Pasek liczb --------------------------------------------------------- */


/* --- Problem ------------------------------------------------------------- */

.problem__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
}
.problem__puenta {
  font-family: var(--naglowki);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--granat);
  border-left: 3px solid var(--sport);
  padding-left: 20px;
  max-width: 34ch;
}

/* --- Oś czasu (System 60 Sekund) ---------------------------------------- */

.os {
  --os-x: 132px;
  list-style: none;
  margin: 48px 0 56px;
  padding: 0;
}

.os__etap {
  position: relative;
  display: grid;
  grid-template-columns: var(--os-x) minmax(0, 1fr);
  column-gap: 40px;
  padding-bottom: 44px;
}
.os__etap:last-child { padding-bottom: 0; }

.os__etap::before {
  content: "";
  position: absolute;
  left: var(--os-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.os__etap:first-child::before { top: 13px; }
.os__etap:last-child::before { display: none; }

.os__etap::after {
  content: "";
  position: absolute;
  left: var(--os-x);
  top: 7px;
  margin-left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sport);
}

.os__czas {
  grid-column: 1;
  margin: 0;
  padding-right: 24px;
  text-align: right;
  font-family: var(--naglowki);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--biel);
  line-height: 1.3;
}
.os__sep { color: var(--biel-60); }
.os__jedn {
  display: block;
  font-family: var(--tresc);
  font-size: 13px;
  font-weight: 400;
  color: var(--biel-60);
}

.os__opis { grid-column: 2; }
.os__opis h3 { margin: 0 0 8px; color: var(--biel); }
.os__opis p { margin: 0; color: var(--biel-80); }

.os__etap--meta .os__opis h3 { font-size: 20px; color: var(--sport); }

.limity {
  background: var(--granat-ciemny);
  border-radius: var(--promien);
  padding: 32px;
}
.limity h3 { margin-bottom: 12px; }

/* --- Dla kogo ------------------------------------------------------------ */

.kafelki {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
.kafelek {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 500;
}
.ikona {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--granat);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wykluczenia {
  background: #F0EEE8;
  border-left: 3px solid var(--granat);
  border-radius: var(--promien);
  padding: 24px 28px;
}
.wykluczenia p { color: var(--grafit); max-width: 78ch; }

/* --- Co dostajesz -------------------------------------------------------- */

/* --- Wyniki -------------------------------------------------------------- */

.wyniki {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.wynik {
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 28px;
}
.wynik__klient { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wynik__logo { width: auto; height: 32px; }
.wynik__tytul { font-size: 20px; margin-bottom: 16px; }

.wynik__liczby { margin: 0 0 18px; }
.wynik__liczby > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-top: 1px solid var(--linia);
}
.wynik__liczby dt { font-size: 15px; color: var(--grafit); }
.wynik__liczby dd {
  margin: 0;
  font-family: var(--naglowki);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--granat);
}
.wynik__podsumowanie { font-size: 15px; color: var(--grafit); margin: 0; }


/* --- Przerywniki między działami ----------------------------------------
   Dwa pasy przecinające stronę: jeden z liczbami, drugi z zaproszeniem do
   rozmowy. Mają przerywać ciąg jednakowych sekcji, nie zaczynać nowego
   wątku — dlatego nie mają numeracji ani wstępu.
   ------------------------------------------------------------------------ */

.przerywnik { position: relative; padding-block: 80px; }

.przerywnik__siatka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* Pas z liczbami: ścięty, gradient z niebieskiego w granat */
.przerywnik--dane {
  color: var(--biel);
  padding-block: 104px;
  /* Pas ma nachodzić skosem na sąsiednie działy, więc nic tu nie przycinamy,
     a warstwa wyżej niż sąsiedzi pilnuje, żeby skos nie został zakryty. */
  z-index: 1;
}
.przerywnik--dane .przerywnik__tlo {
  position: absolute;
  inset: -56px 0;
  z-index: -1;
  transform: skewY(-3deg);
  background: linear-gradient(104deg, var(--sport) 0%, #0A5C96 46%, var(--granat) 100%);
}
.przerywnik--dane h2 { color: var(--biel); max-width: 18ch; }
.przerywnik--dane p { color: var(--biel-80); margin-bottom: 28px; max-width: 46ch; }

.slupki { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.slupek__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  max-width: none;
}
.slupek__podpis { font-size: 15px; color: var(--biel-80); }
.slupek__wartosc {
  font-family: var(--naglowki);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.slupek__pasek {
  display: block;
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.slupek__pasek::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--udzial);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sport-jasny), var(--biel));
  transition: width 0.9s ease;
}
.slupek--tansza { --udzial: 64%; }
.slupek--sredni { --udzial: 77%; }
.slupek--kampania { --udzial: 100%; }

/* Słupki dojeżdżają dopiero, gdy pas wejdzie na ekran. Skrypt najpierw
   ustawia je na zero, więc bez JavaScriptu od razu widać pełne długości. */
.slupki--start .slupek__pasek::before { width: 0; }
.slupki--pokazane .slupek__pasek::before { width: var(--udzial); }

/* Pas z zaproszeniem do rozmowy */
.przerywnik--rozmowa { background: linear-gradient(180deg, var(--papier) 0%, #E8EEF6 100%); }
.przerywnik--rozmowa h2 { max-width: 15ch; }
.przerywnik--rozmowa p { max-width: 44ch; }
.przerywnik__przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.przerywnik__zdjecie { margin: 0; }
.przerywnik__zdjecie img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(20, 29, 48, 0.28);
}

/* --- Zapis na żywo: dwa telefony -----------------------------------------
   Rodzic wybiera termin i dostaje potwierdzenie, a chwilę później
   powiadomienie wjeżdża na telefon prowadzącego. Wszystko rysowane stylami,
   bez ani jednego pliku graficznego. Bez skryptu albo przy ograniczeniu
   ruchu obie sceny są po prostu widoczne w stanie końcowym.
   ------------------------------------------------------------------------ */

.zapis { margin-bottom: 48px; }

.zapis__telefony {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 28px 56px;
}

.telefon { margin: 0; width: 230px; }
.telefon__ekran {
  position: relative;
  height: 390px;
  padding: 16px 14px;
  background: var(--biel);
  border: 8px solid #10182A;
  border-radius: 28px;
  box-shadow: 0 22px 44px rgba(20, 29, 48, 0.22);
  overflow: hidden;
}
.telefon__ekran--ciemny { background: var(--granat-ciemny); color: var(--biel); }
.telefon__podpis {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--grafit);
}

/* Ekrany telefonu rodzica leżą jeden na drugim i zmieniają się w trakcie sceny.
   Bez animacji widać ostatni z nich — tak samo jak na końcu przebiegu. */
.ekran {
  position: absolute;
  inset: 0;
  padding: 16px 14px;
  background: var(--biel);
}
.ekran--formularz { opacity: 0; }

/* Oba banery, które w stanie końcowym są już niewidoczne, muszą startować
   schowane — inaczej widać je, zanim ruszy ich animacja. */
.sms--link { opacity: 0; }

.pole-udawane {
  margin: 0 0 10px;
  padding: 9px 11px;
  font-size: 13px;
  color: var(--granat);
  border: 1.5px solid var(--linia);
  border-radius: 10px;
}
.pole-udawane__etykieta {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafit);
}
.przycisk-udawany {
  margin: 14px 0 0;
  padding: 10px;
  text-align: center;
  font-family: var(--naglowki);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--biel);
  background: var(--sport);
  border-radius: 10px;
}

.telefon__pasek {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linia);
  font-family: var(--naglowki);
  font-size: 14px;
  font-weight: 600;
  color: var(--granat);
}
.telefon__pytanie { margin: 0 0 12px; font-size: 13px; color: var(--grafit); }

.terminy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.termin {
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--granat);
  border: 1.5px solid var(--linia);
  border-radius: 12px;
}
.termin--wybrany { background: var(--sport); border-color: var(--sport); color: var(--biel); }

/* SMS wjeżdżający na telefon rodzica na końcu sceny */
.sms {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 2;
  display: flex;
  gap: 9px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--linia);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(20, 29, 48, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
}
.sms__znak {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--sukces);
  border-radius: 9px;
  font-family: var(--naglowki);
  font-size: 11px;
  font-weight: 700;
  color: var(--biel);
}
.sms__tytul {
  margin: 0 0 2px;
  font-family: var(--naglowki);
  font-size: 13px;
  font-weight: 600;
  color: var(--granat);
}
.sms__tresc { margin: 0; font-size: 11px; line-height: 1.35; color: var(--grafit); }

.potwierdzenie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 16px 24px;
  background: var(--biel);
  border-top: 1px solid var(--linia);
  text-align: center;
}
.ptaszek--male { width: 40px; height: 40px; margin: 0 auto 8px; }
.potwierdzenie__tytul {
  margin: 0 0 4px;
  font-family: var(--naglowki);
  font-size: 18px;
  font-weight: 600;
  color: var(--granat);
}
.potwierdzenie__opis { margin: 0; font-size: 13px; color: var(--grafit); }

.telefon__godzina {
  margin: 28px 0 20px;
  text-align: center;
  font-family: var(--naglowki);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}
.powiadomienie {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.powiadomienie > div,
.sms > div { min-width: 0; }

.powiadomienie__znak {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--sport);
  border-radius: 9px;
}
.powiadomienie__znak img { width: 20px; height: auto; }
.powiadomienie__tytul {
  margin: 0 0 2px;
  font-family: var(--naglowki);
  font-size: 14px;
  font-weight: 600;
  color: var(--biel);
}
.powiadomienie__tresc { margin: 0; font-size: 12px; line-height: 1.4; color: var(--biel-80); }

.zapis__powtorz { margin: 10px 0 0; max-width: none; text-align: center; font-size: 14px; color: var(--grafit); }
.zapis__powtorz .link-tekstowy { display: inline-block; padding-block: 10px; }

/* Stan przed odtworzeniem — nadaje go skrypt, więc bez skryptu nic nie znika */
.zapis--start .ekran--terminy,
.zapis--start .termin,
.zapis--start .potwierdzenie,
.zapis--start .telefon--trener,
.zapis--start .powiadomienie,
.zapis--start .sms--potwierdzenie { opacity: 0; }

/* Przebieg zgodny z drogą rodzica: formularz z reklamy, SMS z linkiem,
   wybór terminu, potwierdzenie SMS-em i mailem. Powiadomienie dla
   prowadzącego wchodzi między wybór a potwierdzenie. */
.zapis--gra .ekran--formularz { animation: zapis-ekran 2.2s ease 0.2s forwards; }
.zapis--gra .sms--link { animation: zapis-baner 2.2s ease 1.7s forwards; }
.zapis--gra .ekran--terminy { animation: zapis-pojaw 0.4s ease 2.4s forwards; }
.zapis--gra .termin { animation: zapis-termin 0.35s ease forwards; }
.zapis--gra .termin:nth-child(1) { animation-delay: 2.5s; }
.zapis--gra .termin:nth-child(2) { animation-delay: 2.65s; }
.zapis--gra .termin:nth-child(3) { animation-delay: 2.8s; }
.zapis--gra .termin--wybrany { animation: zapis-termin 0.35s ease 2.65s forwards, zapis-wybor 0.5s ease 3.3s; }
.zapis--gra .potwierdzenie { animation: zapis-potwierdzenie 0.45s ease 3.8s forwards; }
.zapis--gra .telefon--trener { animation: zapis-telefon 0.5s ease 4.3s forwards; }
.zapis--gra .powiadomienie { animation: zapis-powiadomienie 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 4.8s forwards; }
.zapis--gra .sms--potwierdzenie { animation: zapis-powiadomienie 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 5.5s forwards; }

@keyframes zapis-ekran {
  0% { opacity: 0; transform: translateY(6px); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes zapis-baner {
  0% { opacity: 0; transform: translateY(-16px); }
  16% { opacity: 1; transform: none; }
  72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes zapis-pojaw {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes zapis-termin {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes zapis-wybor {
  50% { transform: scale(1.06); box-shadow: 0 8px 20px rgba(0, 118, 192, 0.45); }
}
@keyframes zapis-potwierdzenie {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}
@keyframes zapis-telefon {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes zapis-powiadomienie {
  from { opacity: 0; transform: translateY(-18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* --- Cennik -------------------------------------------------------------- */

.warianty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}
.wariant {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--granat-ciemny);
  border: 1px solid var(--biel-linia);
  border-radius: var(--promien);
  padding: 32px;
}
.wariant--polecany { border: 2px solid var(--sport-jasny); padding: 31px; }

.wariant__etykieta {
  align-self: flex-start;
  background: var(--sport);
  color: var(--biel);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  margin: 0 0 16px;
}
.wariant__nazwa { font-size: 20px; margin-bottom: 12px; }
.wariant__cena { margin-bottom: 16px; }
.wariant__kwota {
  font-family: var(--naglowki);
  font-size: 34px;
  font-weight: 700;
  color: var(--biel);
}
.wariant__okres { font-size: 15px; color: var(--biel-60); }
.wariant__opis { margin-bottom: 24px; }
.wariant__cta { margin-top: auto; align-self: flex-start; }

/* Trzy karty obok siebie na węższym ekranie: mniej powietrza, a „netto
   miesięcznie” zawsze pod kwotą, żeby ceny łamały się tak samo w każdej karcie. */
@media (min-width: 901px) and (max-width: 1100px) {
  .wariant { padding: 24px; }
  .wariant--polecany { padding: 23px; }
  .wariant__okres { display: block; }
}

.warunki { list-style: none; margin: 0 0 48px; padding: 0; }
.warunki li {
  padding-block: 22px;
  border-top: 1px solid var(--biel-linia);
  color: var(--biel-80);
  max-width: 84ch;
}
.warunki li:last-child { border-bottom: 1px solid var(--biel-linia); }
.warunki strong { color: var(--biel); }

.dodatek,
.proba {
  background: var(--granat-ciemny);
  border-radius: var(--promien);
  padding: 28px 32px;
}
.dodatek { margin-bottom: 20px; }
.proba { border-left: 3px solid var(--sport-jasny); }
.dodatek h3,
.proba h3 { font-size: 20px; margin-bottom: 10px; }

/* --- Jak zaczynamy ------------------------------------------------------- */



/* --- Pytania ------------------------------------------------------------- */

.pytania { max-width: 860px; }

.pytanie { border-top: 1px solid var(--linia); }
.pytanie:last-child { border-bottom: 1px solid var(--linia); }

.pytanie > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 48px 22px 0;
  font-family: var(--naglowki);
  font-size: 19px;
  font-weight: 600;
  color: var(--granat);
}
.pytanie > summary::-webkit-details-marker { display: none; }

.pytanie > summary::before,
.pytanie > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--granat);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.pytanie > summary::before { width: 16px; height: 2px; margin-top: -1px; }
.pytanie > summary::after { width: 2px; height: 16px; margin-top: -8px; right: 15px; }
.pytanie[open] > summary::after { transform: rotate(90deg); opacity: 0; }

.pytanie__tresc { padding: 0 48px 24px 0; }
.pytanie__tresc p { color: var(--grafit); margin: 0; }

/* --- Formularz ----------------------------------------------------------- */

.kontakt__siatka {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 56px;
  align-items: start;
}
.kontakt__wstep h2 { max-width: 18ch; }
.kontakt__bezposredni { margin-top: 24px; color: var(--biel-60); font-size: 15px; }
.kontakt__bezposredni a {
  display: block;
  margin-top: 4px;
  font-family: var(--naglowki);
  font-size: 26px;
  font-weight: 600;
  color: var(--sport-jasny);
  text-decoration: none;
}
.kontakt__bezposredni a:hover { text-decoration: underline; text-underline-offset: 4px; }

.karta-formularza {
  background: var(--biel);
  border-radius: var(--promien);
  padding: 32px;
  color: var(--grafit);
}
.karta-formularza h3,
.karta-formularza strong { color: var(--granat); }

.formularz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.formularz__pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pole { display: flex; flex-direction: column; gap: 6px; }
.pole--szerokie,
.zgoda,
.formularz__stopka,
.formularz__blad-ogolny { grid-column: 1 / -1; }

.pole label {
  font-size: 15px;
  font-weight: 600;
  color: var(--granat);
}
/* Etykieta z dopiskiem „nieobowiązkowe" łamie się na dwa wiersze i zbijała
   pole niżej niż sąsiednie. Dwa wiersze wysokości trzymają pola w równej linii. */
@media (min-width: 641px) {
  .formularz .pole > label { min-height: 48px; }   /* dwa wiersze: etykieta + dopisek */
}
.pole__wymagane { color: var(--blad); }
.pole__opcjonalne { font-weight: 400; color: var(--grafit); font-size: 13px; }

.pole input,
.pole select,
.pole textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--tresc);
  font-size: 16px;
  line-height: 1.4;
  color: var(--granat);
  background: var(--biel);
  border: 1.5px solid var(--linia);
  border-radius: var(--promien);
}
.pole textarea { resize: vertical; min-height: 84px; }
.pole select { appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4A45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
}
.pole input:hover,
.pole select:hover,
.pole textarea:hover { border-color: #C3CCC7; }
.pole input:focus,
.pole select:focus,
.pole textarea:focus { border-color: var(--sport); }

.pole__podpowiedz { font-size: 13px; color: var(--grafit); margin: 0; }
.pole__blad { font-size: 14px; font-weight: 500; color: var(--blad); margin: 0; }
.pole--blad input,
.pole--blad select,
.pole--blad textarea { border-color: var(--blad); }

.zgoda {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
}
.zgoda input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--granat);
}
.zgoda label { font-size: 15px; line-height: 1.45; color: var(--grafit); }
.zgoda .pole__blad { grid-column: 2; }
.zgoda--blad label { color: var(--blad); }

.formularz__stopka { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.formularz__wyslij { align-self: flex-start; min-width: 220px; }
.formularz__wyslij[disabled] { opacity: 0.7; cursor: progress; }
.formularz__klauzula { font-size: 13px; line-height: 1.5; color: var(--grafit); margin: 0; }
.formularz__klauzula a { color: var(--granat); }

.formularz__blad-ogolny {
  margin: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--blad);
  border-radius: var(--promien);
  color: var(--blad);
  font-size: 15px;
}
.formularz__blad-ogolny a { color: var(--blad); font-weight: 600; }

.formularz__sukces { padding: 24px 0; }

/* Zielony ptaszek po wysłaniu zgłoszenia. Kółko i znak rysują się kreską,
   więc nie trzeba żadnego pliku graficznego. */
.ptaszek { display: block; width: 56px; height: 56px; margin-bottom: 12px; }
.ptaszek svg { width: 100%; height: 100%; overflow: visible; }
.ptaszek__kolo,
.ptaszek__znak {
  fill: none;
  stroke: var(--sukces);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ptaszek__kolo {
  stroke-width: 3;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: ptaszek-kolo 0.45s ease forwards;
}
.ptaszek__znak {
  stroke-width: 4;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: ptaszek-znak 0.3s 0.35s ease forwards;
}
@keyframes ptaszek-kolo { to { stroke-dashoffset: 0; } }
@keyframes ptaszek-znak { to { stroke-dashoffset: 0; } }
.formularz__sukces h3 { color: var(--granat); margin-bottom: 8px; }
.formularz__sukces p { color: var(--grafit); }
.formularz__sukces a { color: var(--granat); font-weight: 600; }

/* --- Stopka -------------------------------------------------------------- */

.stopka {
  background: var(--granat-ciemny);
  color: var(--biel);
  padding-block: 56px 28px;
}
.stopka__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}
.stopka__naglowek {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--biel-60);
  margin-bottom: 14px;
  max-width: none;
}
.stopka__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stopka__lista a,
.stopka__lista .link-tekstowy { color: var(--biel); text-decoration: none; font-size: 16px; }
.stopka__lista a:hover { text-decoration: underline; text-underline-offset: 4px; }
.stopka__lista .link-tekstowy { text-decoration: underline; text-underline-offset: 4px; }

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--biel-linia);
}
.stopka__prawa { font-size: 14px; color: var(--biel-60); margin: 0; }

/* --- Podstrony treściowe ------------------------------------------------- */

.dokument { padding-block: 64px 96px; }
.dokument__tresc { max-width: 68ch; }
.dokument__tresc h2 { font-size: 26px; margin-top: 40px; max-width: none; }
.dokument__tresc h3 { font-size: 19px; margin-top: 28px; max-width: none; }
.dokument__tresc ul,
.dokument__tresc ol { padding-left: 22px; color: var(--grafit); }
.dokument__tresc li { margin-bottom: 8px; }
.dokument__powrot { margin-bottom: 24px; font-size: 15px; }
.dokument__data { font-size: 14px; color: var(--grafit); }

/* =========================================================================
   Punkty graniczne: 1140, 900, 640, 380
   ========================================================================= */

@media (max-width: 1140px) {
  .os { --os-x: 116px; }
}

/* Belka: zanim wejdzie hamburger, odnośniki i nazwa robią się ciaśniejsze. */
@media (max-width: 1180px) {
  .pasek__wnetrze { gap: 16px; }
  .nawigacja__lista { gap: 13px; }
  .nawigacja__lista a { font-size: 13px; }
  .logo__nazwa { font-size: 17px; letter-spacing: 0.1em; }
  .pasek__cta { padding: 8px 14px; font-size: 14px; }
}

/* Belka: przy tej szerokosci komplet odnosnikow przestaje sie miescic,
   wiec wchodzi menu pod hamburgerem. */
@media (max-width: 1040px) {
  .nawigacja,
  .pasek__cta { display: none; }
  .pasek__telefon,
  .pasek__hamburger { display: inline-flex; }
}

@media (max-width: 900px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }

  .hero { padding-block: calc(var(--pasek-wys) + 28px) 48px; }
  .hero__siatka { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero h1 { max-width: 18ch; }
  .hero__lead { max-width: 60ch; }
  .hero__licznik { justify-self: start; max-width: 100%; padding: 24px 20px 18px; }
  .hero__liczby { gap: 16px 20px; }
  .hero__liczba { font-size: 24px; }
  .stoper { margin-inline: 0; }
  .stoper__podpisy { min-height: 46px; }


  .problem__kolumny { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wyniki,
  .warianty { grid-template-columns: minmax(0, 1fr); }


  .przerywnik { padding-block: 56px; }
  .przerywnik--dane { padding-block: 72px; }
  .przerywnik__siatka { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .przerywnik--rozmowa .przerywnik__zdjecie { order: -1; }

  .zapis__telefony { gap: 20px; }
  .telefon { width: min(46%, 190px); }
  .telefon__ekran { height: 330px; padding: 12px 10px; border-width: 6px; border-radius: 22px; }
  .termin { padding: 9px 10px; font-size: 12px; }
  .telefon__godzina { font-size: 32px; margin: 18px 0 14px; }
  .potwierdzenie__tytul { font-size: 16px; }
  .ekran { padding: 12px 10px; }

  .kontakt__siatka { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  .stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (max-width: 640px) {
  :root { --odstep-sekcji: 64px; }

  h1 { font-size: 34px; line-height: 1.1; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }

  .hero { padding-block: calc(var(--pasek-wys) + 20px) 40px; }
  .hero h1 { max-width: none; margin-bottom: 16px; }
  .hero__lead { margin-bottom: 24px; }
  .hero__przyciski { flex-direction: column; align-items: stretch; margin-bottom: 20px; }
  .hero__przyciski .przycisk { width: 100%; }
  .hero__siatka { gap: 32px; }
  .hero__liczby { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
  .hero__liczba { font-size: 18px; }
  .hero__opis { display: none; }
  .hero { gap: 24px; }
  .hero__licznik { padding: 18px 16px 14px; }
  .hero__liczby { padding-top: 12px; }
  .stoper { width: min(190px, 54vw); }
  .stoper__sekundy { font-size: 60px; }
  .stoper__sekundy { font-size: 72px; }

  .os { --os-x: 6px; }
  .os__etap {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 30px;
    padding-bottom: 36px;
  }
  .os__czas {
    grid-column: 1;
    text-align: left;
    padding-right: 0;
    margin-bottom: 8px;
    font-size: 17px;
  }
  .os__jedn { display: inline; }
  .os__opis { grid-column: 1; }

  .limity,
  .dodatek,
  .proba { padding: 24px; }


  .formularz { grid-template-columns: minmax(0, 1fr); }
  .karta-formularza { padding: 24px 20px; }
  .formularz__wyslij { align-self: stretch; width: 100%; }

  .pytanie > summary { font-size: 17px; padding-right: 40px; }
  .pytanie__tresc { padding-right: 0; }

  .stopka__dol { flex-direction: column; align-items: flex-start; }
}

/* Wąskie ekrany: dwa telefony obok siebie robią się nieczytelne,
   więc ustawiają się jeden pod drugim. */
@media (max-width: 560px) {
  .zapis__telefony { flex-direction: column; align-items: center; gap: 24px; }
  .telefon { width: min(270px, 84vw); }
  .telefon__ekran { height: 380px; padding: 14px 12px; }
  .ekran { padding: 14px 12px; }
  .termin { padding: 10px 12px; font-size: 13px; }
  .sms__tresc { font-size: 12px; }
  .powiadomienie__tresc { font-size: 12px; }
  .stopka__lista a,
  .stopka__lista .link-tekstowy { display: inline-block; padding-block: 8px; }
  /* Dwie kolumny mają tu po 159 px — adres e-mail się w nich nie mieści
     i wchodzi na sąsiednią. Kolumny stopki ustawiają się więc jedna pod drugą. */
  .stopka__siatka { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 380px) {
  :root { --margines: 18px; }
  h1 { font-size: 30px; }
  .kafelki { grid-template-columns: minmax(0, 1fr); }
}

/* Niskie ekrany — hero ma się zmieścić bez przewijania.
   Dwa stopnie: telefony pełnowymiarowe (iPhone 15) i najniższe (iPhone SE, 667 px). */

@media (max-width: 900px) and (max-height: 900px) {
  .hero { padding-block: calc(var(--pasek-wys) + 10px) 18px; gap: 16px; }
  .hero__licznik { padding: 14px 14px 10px; }
  .hero__siatka { gap: 22px; }
  .hero h1 { margin-bottom: 14px; }
  .hero__lead { line-height: 1.5; margin-bottom: 18px; }
  .hero__przyciski { gap: 8px; margin-bottom: 18px; }
  .hero__zaufanie { font-size: 13px; row-gap: 6px; --odstep: 12px; }
  .hero__liczby { display: none; }      /* na niskim ekranie liczby ustępują miejsca */
  .hero { gap: 20px; }
  .hero__zaufanie { font-size: 12px; row-gap: 4px; --odstep: 10px; }
  .stoper { width: min(140px, 40vw); }
  .stoper__sekundy { font-size: 52px; }
  .stoper__jednostka { font-size: 17px; }
  .stoper__podpisy { margin-top: 10px; min-height: 34px; }
  .stoper__podpis { font-size: 14px; }
  .stoper__powtorz { margin-top: 8px; }
}

@media (max-width: 900px) and (max-height: 700px) {
  .hero { padding-block: calc(var(--pasek-wys) + 8px) 14px; }
  .hero__licznik { padding: 14px 14px 10px; }
  .hero__siatka { gap: 12px; }
  .hero h1 { font-size: 30px; margin-bottom: 10px; }
  .hero__lead { line-height: 1.45; margin-bottom: 14px; }
  .hero__przyciski { margin-bottom: 14px; }
  .hero__przyciski .przycisk { min-height: 44px; padding: 8px 18px; }
  .hero__zaufanie { font-size: 12px; row-gap: 4px; --odstep: 10px; }
  .hero__liczby { display: none; }
  .stoper { width: min(120px, 34vw); }
  .stoper__sekundy { font-size: 40px; }
  .stoper__jednostka { font-size: 13px; }
  .stoper__podpisy { margin-top: 8px; min-height: 32px; }
  .stoper__podpis { font-size: 13px; }
  .stoper__powtorz { margin-top: 6px; font-size: 13px; }
}

/* --- Ograniczenie ruchu -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__wideo { display: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Sekcje dodane po zmianie struktury strony
   ========================================================================= */

/* --- Zdanie wprowadzające pod nagłówkiem sekcji -------------------------- */

.sekcja__wstep {
  font-size: 18px;
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: 40px;
}

/* --- Kim jesteśmy i jak pracujemy ---------------------------------------- */

/* --- Cennik: co wchodzi w pakiet ----------------------------------------- */

.wariant__lista { list-style: none; margin: 0 0 24px; padding: 0; }
.wariant__lista li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--biel-80);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.wariant__lista li:first-child { border-top: 0; }
.wariant__lista li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 18px;
  width: 10px;
  height: 2px;
  background: var(--sport-jasny);
}

/* --- Cennik: rozwijana lista usług dodatkowych --------------------------- */

.dodatkowe {
  border-top: 1px solid var(--biel-linia);
  border-bottom: 1px solid var(--biel-linia);
  margin-bottom: 48px;
}
.dodatkowe > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 48px 22px 0;
  font-family: var(--naglowki);
  font-size: 20px;
  font-weight: 600;
  color: var(--biel);
}
.dodatkowe > summary::-webkit-details-marker { display: none; }
.dodatkowe > summary::before,
.dodatkowe > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--sport-jasny);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.dodatkowe > summary::before { width: 16px; height: 2px; margin-top: -1px; }
.dodatkowe > summary::after { width: 2px; height: 16px; margin-top: -8px; right: 15px; }
.dodatkowe[open] > summary::after { transform: rotate(90deg); opacity: 0; }
.dodatkowe__tresc { padding-bottom: 16px; }

.cennik-dodatkowy { margin: 0; }
.cennik-dodatkowy > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.cennik-dodatkowy dt { color: var(--biel-80); }
.cennik-dodatkowy dd {
  margin: 0;
  font-family: var(--naglowki);
  font-weight: 600;
  color: var(--biel);
  white-space: nowrap;
}

/* --- Oś czasu na jasnym tle ---------------------------------------------- */

.os--jasna .os__etap::before { background: var(--linia); }
.os--jasna .os__czas { color: var(--granat); }
.os--jasna .os__sep,
.os--jasna .os__jedn { color: var(--grafit); }
.os--jasna .os__opis h3 { color: var(--granat); }
.os--jasna .os__opis p { color: var(--grafit); }
.os--jasna .os__etap--meta .os__opis h3 { color: var(--granat); }

.limity--jasne {
  background: #F0EEE8;
  border-left: 3px solid var(--sport);
}
.limity--jasne h3 { color: var(--granat); }
.limity--jasne p { color: var(--grafit); }
.limity--jasne strong { color: var(--granat); }



/* --- Kontakt: WhatsApp ---------------------------------------------------- */

.kontakt__whatsapp { margin-top: 14px; font-size: 15px; color: var(--biel-60); }
.kontakt__bezposredni a { display: inline-block; padding-block: 8px; }

/* --- Punkty graniczne dla nowych sekcji ----------------------------------- */

@media (max-width: 900px) {
}

@media (max-width: 640px) {
  .sekcja__wstep { font-size: 17px; margin-bottom: 32px; }
  .dodatkowe > summary { font-size: 18px; padding-right: 40px; }
  .cennik-dodatkowy > div { flex-direction: column; gap: 2px; }
}

/* Wyrównanie kart cennika: karta bez etykiety rezerwuje tyle samo miejsca,
   żeby nazwy pakietów i ceny stały w jednej linii. */
.wariant:not(.wariant--polecany)::before {
  content: "";
  display: block;
  height: 25px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .wariant:not(.wariant--polecany)::before { display: none; }
}


/* =========================================================================
   Podział pracy: co robimy my, co robisz Ty
   ========================================================================= */

.strony {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 8px;
}

.strona {
  border-radius: var(--promien);
  padding: 32px;
}

.strona--my {
  background: var(--granat);
  color: var(--biel);
}
.strona--ty {
  background: var(--biel);
  border: 1px solid var(--linia);
}


.strona__naglowek {
  font-size: 26px;
  margin-bottom: 22px;
}
.strona--my .strona__naglowek { color: var(--biel); }

.strona__lista { list-style: none; margin: 0; padding: 0; }
.strona__lista li {
  position: relative;
  padding: 11px 0 11px 32px;
  font-size: 16px;
  line-height: 1.45;
}
.strona--my .strona__lista li {
  color: var(--biel);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.strona--ty .strona__lista li {
  color: var(--granat);
  border-top: 1px solid var(--linia);
}
.strona__lista li:first-child { border-top: 0; }

/* Znak potwierdzenia rysowany dwiema krawędziami, bez dodatkowego pliku */
.strona__lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 7px;
  height: 12px;
  border-right: 2px solid var(--sport-jasny);
  border-bottom: 2px solid var(--sport-jasny);
  transform: rotate(42deg);
}
.strona--ty .strona__lista li::before { border-color: var(--granat); }

.strona__puenta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linia);
  font-family: var(--naglowki);
  font-size: 18px;
  font-weight: 600;
  color: var(--granat);
}

/* =========================================================================
   Kroki: karty z numerem plus karta z wezwaniem do działania
   ========================================================================= */

.kroki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.krok {
  display: flex;
  flex-direction: column;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 22px 20px;
}

.krok__numer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--granat);
  color: var(--biel);
  font-family: var(--naglowki);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.krok__tytul { font-size: 18px; margin-bottom: 8px; }
.krok__opis { font-size: 15px; line-height: 1.5; color: var(--grafit); margin: 0; }

.krok--cta {
  background: var(--granat);
  border-color: var(--granat);
  justify-content: center;
}
.krok--cta .krok__tytul { color: var(--biel); font-size: 20px; }
.krok--cta .krok__opis { color: var(--biel-80); margin-bottom: 18px; }
.krok__cta { align-self: flex-start; min-height: 44px; padding: 8px 18px; font-size: 15px; }

@media (max-width: 1040px) {
  .kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .strony { grid-template-columns: minmax(0, 1fr); }
  .strona { padding: 26px; }
}

@media (max-width: 820px) {
  .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .strona__naglowek { font-size: 22px; }
}

/* Karta z zadaniami klienta jest niższa od naszej — puenta ląduje na dole,
   żeby nie zostawała pusta przestrzeń w środku. */
.strona--ty { display: flex; flex-direction: column; }
.strona--ty .strona__puenta { margin-top: auto; }

/* =========================================================================
   Kafelki usług — siatka pozostaje równa, szczegóły wysuwają się pod rzędem
   ========================================================================= */

.uslugi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.usluga { display: flex; }

.usluga__przycisk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 132px;
  padding: 20px 44px 20px 20px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  font-family: var(--tresc);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.usluga__przycisk:hover {
  transform: translateY(-2px);
  border-color: #B4C0BA;
  box-shadow: 0 6px 18px rgba(20, 29, 48, 0.08);
}
.usluga__przycisk[aria-expanded="true"] {
  border-color: var(--granat);
  box-shadow: 0 6px 18px rgba(20, 29, 48, 0.1);
}

.usluga__ikona {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--granat);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.usluga__przycisk:hover .usluga__ikona { transform: scale(1.08); }

.usluga__nazwa {
  display: block;
  font-family: var(--naglowki);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--granat);
  margin-bottom: 5px;
}
.usluga__skrot { display: block; font-size: 14px; line-height: 1.4; color: var(--grafit); }

/* Znak plus, który przy rozwinięciu obraca się w minus */
.usluga__znak {
  position: absolute;
  top: 24px;
  right: 18px;
  width: 14px;
  height: 14px;
}
.usluga__znak::before,
.usluga__znak::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--granat);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.usluga__znak::after { transform: rotate(90deg); }
.usluga__przycisk[aria-expanded="true"] .usluga__znak::after {
  transform: rotate(0deg);
  opacity: 0;
}

/* Opis widoczny, dopóki nie przejmie go skrypt */
.usluga__opis { display: none; }
.uslugi:not(.uslugi--interaktywne) .usluga { flex-direction: column; }
.uslugi:not(.uslugi--interaktywne) .usluga__opis {
  display: block;
  padding: 14px 20px 18px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-top: 0;
  border-radius: 0 0 var(--promien) var(--promien);
}
.uslugi:not(.uslugi--interaktywne) .usluga__przycisk {
  border-radius: var(--promien) var(--promien) 0 0;
}
.uslugi:not(.uslugi--interaktywne) .usluga__znak { display: none; }
.usluga__opis p { font-size: 15px; line-height: 1.55; color: var(--grafit); margin: 0; }

/* --- Wysuwany panel ze szczegółami --------------------------------------- */

.uslugi__panel {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 0;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.uslugi__wnetrze {
  position: relative;
  padding: 26px 28px;
  background: var(--granat);
  border-radius: var(--promien);
  color: var(--biel-80);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease 0.06s, transform 0.28s ease 0.06s;
}
.uslugi__panel--otwarty .uslugi__wnetrze { opacity: 1; transform: none; }

/* Trójkąt wskazujący kafelek, z którego panel został otwarty */
.uslugi__wnetrze::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--strzalka, 60px);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--granat);
  transform: rotate(45deg);
  border-radius: 2px;
  transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.uslugi__tytul {
  font-size: 22px;
  color: var(--biel);
  margin-bottom: 10px;
}
.uslugi__tresc p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--biel-80);
  margin: 0;
  max-width: 78ch;
}
.uslugi__zamknij {
  margin-top: 18px;
  color: var(--sport);
  font-size: 15px;
}

@media (max-width: 1040px) {
  .uslugi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .uslugi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .uslugi { grid-template-columns: minmax(0, 1fr); }
  .usluga__przycisk { min-height: 0; }
  .uslugi__wnetrze { padding: 22px; }
}

/* =========================================================================
   Współprace: liczby, logotypy klientów
   ========================================================================= */

.podnaglowek {
  font-size: 15px;
  font-weight: 600;
  color: var(--grafit);
  margin: 48px 0 16px;
  max-width: none;
}

.dane {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dana {
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 22px 20px;
}
.dana__wartosc {
  font-family: var(--naglowki);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--granat);
  margin: 0 0 8px;
}
.dana__podpis { font-size: 14px; line-height: 1.45; color: var(--grafit); margin: 0; }

.klienci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.klient {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 18px 20px;
}
.klient__logo {
  flex: 0 0 auto;
  width: 92px;
  height: 54px;
  object-fit: contain;
}
.klient__nazwa {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--granat);
}

@media (max-width: 900px) {
  .dane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .klienci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .klienci { grid-template-columns: minmax(0, 1fr); }
  .dana__wartosc { font-size: 28px; }
}

/* Dwie sąsiadujące sekcje na tym samym tle dokładały po 96 px każda, czyli
   192 px pustki. Przy zmianie koloru tła tego nie widać, przy dwóch jasnych
   robi się dziura. Odstęp między sekcjami ma wynosić 96 px i tyle wynosi. */
.sekcja--papier + .sekcja--papier { padding-top: 0; }

/* =========================================================================
   Zgoda na pliki cookie — baner i okno ustawień
   Przyciski „Akceptuję wszystkie” i „Odrzucam wszystkie” mają identyczny
   wygląd: różnica w kolorze albo wielkości byłaby nakłanianiem do zgody.
   ========================================================================= */

.baner-zgody {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  max-width: 1108px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px 24px;
  background: var(--granat-ciemny);
  color: var(--biel);
  border: 1px solid var(--biel-linia);
  border-radius: var(--promien);
  box-shadow: 0 10px 30px rgba(20, 29, 48, 0.25);
}
.baner-zgody[hidden] { display: none; }
.baner-zgody__tresc { flex: 1 1 480px; }
.baner-zgody__tytul { font-size: 17px; margin: 0 0 6px; color: var(--biel); max-width: none; }
.baner-zgody__opis { font-size: 14px; line-height: 1.5; color: var(--biel-80); margin: 0; max-width: 76ch; }
.baner-zgody__opis a { color: var(--sport-jasny); }
.baner-zgody__przyciski { display: flex; flex-wrap: wrap; gap: 10px; }

.baner-zgody .przycisk,
.zgoda-okno .przycisk { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.baner-zgody__wybor { background: var(--sport); color: var(--biel); }
.baner-zgody__wybor:hover { background: var(--sport-ciemny); }
.baner-zgody__ustawienia { background: transparent; color: var(--biel); border-color: rgba(255, 255, 255, 0.45); }
.baner-zgody__ustawienia:hover { background: rgba(255, 255, 255, 0.1); }

.zgoda-okno {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.zgoda-okno[hidden] { display: none; }
.zgoda-okno__tlo { position: absolute; inset: 0; background: rgba(20, 29, 48, 0.55); }
.zgoda-okno__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  background: var(--biel);
  color: var(--granat);
  border-radius: var(--promien);
}
.zgoda-okno__glowa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.zgoda-okno__glowa h2 { font-size: 24px; margin: 0; max-width: none; }
.zgoda-okno__zamknij {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--linia);
  border-radius: var(--promien);
  color: var(--granat);
  cursor: pointer;
}
.zgoda-okno__zamknij svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zgoda-okno__wstep { font-size: 15px; color: var(--grafit); margin: 0 0 16px; }
.zgoda-okno a { color: var(--granat); }

.zgoda-kat { border-top: 1px solid var(--linia); padding-block: 16px; }
.zgoda-kat__glowa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.zgoda-kat__nazwa { font-size: 18px; margin: 0; }
.zgoda-kat__zawsze { font-size: 14px; font-weight: 600; color: var(--grafit); }
.zgoda-kat__opis { font-size: 15px; line-height: 1.5; color: var(--grafit); margin: 6px 0 8px; }
.zgoda-kat__szczegoly summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--granat); }
.zgoda-kat__szczegoly ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--grafit); }
.zgoda-kat__szczegoly li { margin-bottom: 4px; }

.zgoda-kat__przelacznik { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.zgoda-kat__przelacznik input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zgoda-kat__suwak {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #AEB9B3;
  transition: background-color 0.15s ease;
}
.zgoda-kat__suwak::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--biel);
  transition: transform 0.15s ease;
}
.zgoda-kat__przelacznik input:checked ~ .zgoda-kat__suwak { background: var(--granat); }
.zgoda-kat__przelacznik input:checked ~ .zgoda-kat__suwak::after { transform: translateX(20px); }
.zgoda-kat__przelacznik input:focus-visible ~ .zgoda-kat__suwak { outline: 3px solid var(--granat); outline-offset: 2px; }

.zgoda-okno__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--linia);
}

body.zgoda-otwarta { overflow: hidden; }

@media (max-width: 640px) {
  .baner-zgody { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; gap: 12px; }
  .baner-zgody__tytul { font-size: 15px; margin-bottom: 4px; }
  .baner-zgody__opis { font-size: 13px; line-height: 1.45; }
  /* Akceptacja i odrzucenie w jednym rzędzie po równo — na wąskim ekranie
     zawijanie dawało jednemu przyciskowi pełną szerokość, a drugiemu połowę. */
  .baner-zgody__przyciski { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .baner-zgody__przyciski .przycisk { min-height: 42px; padding: 6px 10px; font-size: 14px; }
  .baner-zgody__ustawienia { grid-column: 1 / -1; }
  .zgoda-okno__panel { padding: 20px; }
  .zgoda-okno__przyciski .przycisk { flex: 1 1 100%; }
}

/* Tabela plików cookie w polityce prywatności */
.tabela-przewijana { overflow-x: auto; margin: 8px 0 16px; }
.tabela-cookies { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.tabela-cookies th,
.tabela-cookies td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linia); }
.tabela-cookies th { font-weight: 600; color: var(--granat); background: #F0EEE8; }
.tabela-cookies td { color: var(--grafit); }