/* ==========================================================================
   Akademia Nauczyciela AI, warstwa prezentacji.

   Trzy zasady, na których stoi cały plik, bo od ich braku poprzednia wersja
   sie rozjezdzala:

   1. Jeden kontener. Kazda sekcja srodkuje tresc przez .kontener, wiec wszystkie
      zaczynaja sie w tej samej pionowej linii. Szerokosci nie ustawiamy nigdzie
      indziej, poza wariantem --waski dla dlugiego czytania.
   2. Kazdy obrazek ma jawny limit rozmiaru w CSS. Regula img { height:auto }
      kasuje atrybut height z HTML, wiec logo bez limitu w CSS rozpycha nagłowek
      i przez niego cala strone.
   3. Marginesy boczne pochodza z jednej zmiennej --pad. Sekcja nie dokłada
      wlasnego paddingu poziomego.
   ========================================================================== */

:root {
  /* Marka z PLAYBOOK-landingi.md. Kolor CTA to #40b181 i jest ten sam w kazdym
     przycisku: pasek, nawigacja, hero, cennik, domkniecie, okno wyjscia. */
  --navy:#20224d;
  --navy-2:#2b2e63;
  --green:#3ab07f;
  --green-l:#51ebac;
  --hero-green:#43ad89;
  --hero-green-deep:#27786b;
  --hero-navy:#242858;
  --brand-gradient:linear-gradient(112deg, #20224d 0%, #2b3262 25%, #26796f 62%, #43ad89 100%);
  --brand-grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  /* Zielen marki ma 2,7:1 z bielą, czyli za mało na drobny tekst. Ten sam odcień,
     przyciemniony do 5:1, jedzie w nadtytułach, etykietach, numerach i linkach.
     Kolor przycisków zostaje bez zmian, bo playbook rozstrzyga go na #40b181. */
  --green-tekst:#297d5a;
  --cta:#40b181;
  --cta-dk:#359a6e;
  /* Tła idą w jasną zieleń, nie w krem. Trzy odcienie zieleni plus krem jako
     przerywnik dają rytm sekcji bez wchodzenia w drugi kolor marki. */
  --mint:#edf9f3;      /* najjaśniejsza, pod akcenty i plakietki */
  --mint-2:#e7f6ee;    /* ramki i wtrącenia */
  --zielen-tlo:#e8f6ee;   /* podstawowe tło sekcji */
  --zielen-tlo-2:#dcf0e6; /* mocniejszy odcień na przeplot */
  --krem:#f6f4ee;         /* przerywnik między zieleniami */
  --ink:#1d1d1f;
  --muted:#666b7c;
  --line:#dfe9e4;
  --line-2:#e9f1ec;
  --bg:#e8f6ee;
  --paper:#ffffff;

  /* Jeden krój na całej stronie. Playbook przewidywał Source Sans 3 na treść
     i Caveat na akcent w nagłówku, ale Seba rozstrzygnął to na Montserrat wszędzie
     i bez pisanego akcentu. */
  --naglowki:"Montserrat", system-ui, sans-serif;
  --tresc:"Montserrat", system-ui, sans-serif;

  --pad:clamp(18px, 5vw, 56px);
  --shell:1024px;
  --waski:720px;
  --r:20px;
  --r-l:26px;
  --cien:0 1px 2px rgba(32,34,77,.04), 0 8px 24px rgba(32,34,77,.06);
  --cien-l:0 24px 60px rgba(32,34,77,.12);

  --pasek-h:36px;
  --nav-h:62px;
  --chrome-h:calc(var(--pasek-h) + var(--nav-h));
}

/* --------------------------------------------------------------- podstawa */

* { box-sizing:border-box; }

html {
  scroll-behavior:smooth;
  /* Kotwice musza sie zatrzymac pod przyklejonym paskiem i nawigacja,
     inaczej naglowek sekcji chowa sie za chrome. */
  scroll-padding-top:calc(var(--chrome-h) + 20px);
}

body {
  margin:0;
  padding-top:var(--chrome-h);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--tresc);
  font-size:1rem;
  font-weight:400;
  line-height:1.72;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  /* Ostatnia linia obrony przed poziomym scrollem. Zaden pojedynczy element nie
     powinien wystawac, ale na telefonie z reklamy nie ma miejsca na pomylke. */
  overflow-x:hidden;
}
body.bez-scrolla { overflow:hidden; }

img { display:block; max-width:100%; height:auto; }
a { color:var(--green-tekst); }
button { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }

h1, h2, h3, h4 {
  margin:0 0 18px;
  color:var(--navy);
  font-family:var(--naglowki);
  line-height:1.14;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1 { font-size:clamp(2.05rem, 4.6vw, 3.4rem); font-weight:900; }
h2 { font-size:clamp(2.05rem, 4.6vw, 3.7rem); font-weight:900; letter-spacing:-.038em; }
h3 { font-size:1.22rem; font-weight:800; letter-spacing:-.02em; }
p { margin:0 0 16px; }
p:last-child { margin-bottom:0; }

/* Druga linia nagłówka: ten sam krój, wyróżniona kolorem, bez pisma odręcznego. */
.pisane {
  display:inline-block;
  color:var(--green-tekst);
  font-weight:900;
  letter-spacing:-.03em;
}

/* Widoczny tylko dla klawiatury, przeskakuje chrome i cały hero. */
.pomin {
  position:fixed;
  z-index:500;
  top:10px;
  left:16px;
  padding:10px 16px;
  background:var(--navy);
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  transform:translateY(-200%);
}
.pomin:focus { transform:translateY(0); }

:focus-visible { outline:3px solid var(--cta); outline-offset:3px; }

/* ------------------------------------------------------------- kontenery */

.kontener {
  width:min(var(--shell), calc(100% - 2 * var(--pad)));
  margin-inline:auto;
}
.kontener--waski { width:min(var(--waski), calc(100% - 2 * var(--pad))); }

.sekcja { padding-block:clamp(64px, 8vw, 128px); }
/* Kreska nad i pod sekcja z tlem, wzorem landingu edubiznes: rozdziela pasy koloru
   bez dokladania im ramek i sprawia, ze przejscie miedzy odcieniami zieleni nie
   wyglada na przypadkowe. */
.sekcja--jasna, .sekcja--zielen, .sekcja--krem, .sekcja--mint {
  border-top:1px solid rgba(64,177,129,.18);
  border-bottom:1px solid rgba(64,177,129,.18);
}
.sekcja--jasna { background:var(--zielen-tlo); }
.sekcja--zielen { overflow:hidden; background:var(--zielen-tlo-2); }
.sekcja--krem { background:var(--krem); border-color:rgba(32,34,77,.09); }
.sekcja--mint { background:var(--mint); }
.sekcja--navy { background:var(--navy); color:#d7dae9; }
.sekcja--navy h2, .sekcja--navy h3 { color:#fff; }
.sekcja--navy .wstep { color:#aab0cc; }
.sekcja--navy .etykieta { color:var(--green-l); }

.naglowek-sekcji { margin-bottom:clamp(36px, 5vw, 64px); }
.naglowek-sekcji h2 { margin-bottom:18px; }

/* Naglowek wysrodkowany z plakietka nad nim. Daje sekcjom wspolny rytm: oko
   znajduje poczatek kazdej z nich w tym samym miejscu. */
.naglowek-sekcji--srodek { text-align:center; }
.naglowek-sekcji--srodek .wstep { margin-inline:auto; }
/* Etykieta nad naglowkiem jest u Milosza pelnowymiarowym napisem, nie drobnym
   drukiem: ten sam stopien co tekst, szeroki tracking, bez pigulki. */
.etykieta {
  display:block;
  margin-bottom:14px;
  color:var(--green-tekst);
  font-family:var(--naglowki);
  font-size:clamp(.85rem, 1.2vw, 1.12rem);
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.3;
  text-transform:uppercase;
}
/* W ukladzie dwukolumnowym naglowek nie moze byc srodkowany: stoi nad tekstem
   wyrownanym do lewej, wiec srodkowanie rozjezdza kolumne. */
.dwie-kolumny .naglowek-sekcji--srodek { text-align:left; }
.dwie-kolumny .naglowek-sekcji--srodek .wstep { margin-inline:0; }
.wstep { max-width:64ch; margin:0; color:var(--muted); font-size:1.06rem; }
.mocne { color:var(--navy); font-weight:600; }

.nadtytul {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:var(--green-tekst);
  font-family:var(--naglowki);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
}
.nadtytul::before { width:28px; height:2px; background:currentColor; content:""; }

/* -------------------------------------------------------------- przyciski */

.btn {
  display:inline-flex;
  min-height:52px;
  padding:14px 28px;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--cta);
  border:1px solid transparent;
  border-radius:999px;
  color:#fff;
  font-family:var(--naglowki);
  font-size:.98rem;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background:var(--cta-dk); transform:translateY(-2px); box-shadow:0 12px 28px rgba(64,177,129,.32); }
.btn:active { transform:translateY(0); }
.btn--maly { min-height:38px; padding:9px 18px; font-size:.78rem; white-space:nowrap; }
.btn--duzy { min-height:60px; padding:18px 38px; font-size:1.08rem; }
.btn--pelny { display:flex; width:100%; }
.btn--obrys { background:transparent; border-color:rgba(255,255,255,.34); color:#fff; }
.btn--obrys:hover { background:rgba(255,255,255,.1); box-shadow:none; }

.pod-cta { margin-top:14px; color:var(--muted); font-size:.88rem; }

/* ----------------------------------------------------------------- chrome

   Pasek oferty i nawigacja stoja na stale u gory. Razem maja --chrome-h,
   ktore body kompensuje paddingiem, a kotwice przez scroll-padding-top. */

.pasek {
  position:fixed;
  z-index:130;
  top:0;
  right:0;
  left:0;
  display:flex;
  height:var(--pasek-h);
  padding-inline:var(--pad);
  align-items:center;
  background-color:var(--navy);
  background-image:
    var(--brand-grain),
    radial-gradient(circle at 78% -220%, rgba(81,235,172,.48), transparent 52%),
    var(--brand-gradient);
  background-position:center, center, center;
  background-size:160px 160px, cover, cover;
  background-blend-mode:soft-light, screen, normal;
  color:#fff;
}
.pasek__srodek {
  display:flex;
  width:min(var(--shell), 100%);
  margin-inline:auto;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.pasek p {
  display:flex;
  margin:0;
  align-items:center;
  gap:9px;
  font-size:.76rem;
  font-weight:600;
  line-height:1;
}
.pasek b { font-family:var(--naglowki); font-weight:800; }
.pasek__cena { color:var(--green-l); font-weight:800; }
.pasek__kropka {
  width:7px;
  height:7px;
  flex:0 0 auto;
  background:var(--green-l);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(81,235,172,.16);
}
.pasek .btn { min-height:26px; padding:5px 14px; font-size:.7rem; }

.naglowek {
  position:fixed;
  z-index:120;
  top:var(--pasek-h);
  right:0;
  left:0;
  height:var(--nav-h);
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
  transition:box-shadow .25s ease, background .25s ease;
}
.naglowek.jest-scroll { background:rgba(255,255,255,.99); box-shadow:0 8px 28px rgba(32,34,77,.1); }
.naglowek__srodek {
  display:grid;
  width:min(var(--shell), calc(100% - 2 * var(--pad)));
  height:100%;
  margin-inline:auto;
  align-items:center;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
}

/* Logo dostaje twardy limit szerokosci. Bez tego regula img { height:auto }
   kasuje atrybut height z HTML i logo wchodzi w naturalnym rozmiarze. */
.logo { display:flex; width:132px; align-items:center; }
.logo img { width:100%; }
.naglowek .logo img { filter:none; }
.logo__dwukolor {
  display:block;
  width:100%;
  aspect-ratio:396 / 86;
  background:linear-gradient(90deg, var(--green) 0 29%, var(--navy) 29% 100%);
  -webkit-mask:url("assets/logo/web/ano-poziom.webp") center/contain no-repeat;
  mask:url("assets/logo/web/ano-poziom.webp") center/contain no-repeat;
}

.menu { display:flex; align-items:center; gap:clamp(14px, 1.8vw, 26px); }
.menu a {
  position:relative;
  color:#4a4f66;
  font-family:var(--naglowki);
  font-size:.78rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.menu a::after {
  position:absolute;
  right:0;
  bottom:-7px;
  left:0;
  height:2px;
  background:var(--cta);
  content:"";
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.menu a:hover::after, .menu a:focus-visible::after { transform:scaleX(1); }
/* Przycisk w szufladzie istnieje tylko na telefonie. Na szerokim ekranie CTA stoi
   po prawej stronie paska, wiec ten z menu musi zniknac, zeby nie byl drugi. */
.menu .btn { display:none; }
.naglowek__srodek > .btn { justify-self:end; background:var(--cta); color:#fff; }
.naglowek__srodek > .btn:hover { background:var(--cta-dk); }

/* Hamburger pojawia sie dopiero, gdy menu nie miesci sie w pasku. */
.hamburger {
  display:none;
  width:42px;
  height:42px;
  padding:0;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
}
.hamburger span { position:relative; display:block; width:18px; height:2px; background:var(--navy); }
.hamburger span::before, .hamburger span::after {
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:var(--navy);
  content:"";
  transition:transform .2s ease, top .2s ease;
}
.hamburger span::before { top:-6px; }
.hamburger span::after { top:6px; }
.hamburger[aria-expanded="true"] span { background:transparent; }
.hamburger[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }

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

   Zdjęcie na pełną szerokość pod treścią. Warstwy od spodu:
     1. kadr, object-position trzyma twarz w kadrze na każdej proporcji ekranu,
     2. przyciemnienie od góry, żeby nawigacja miała się na czym położyć,
     3. gradient schodzący do tła strony, żeby zdjęcie nie kończyło się kreską,
     4. treść,
     5. ruchoma listwa domykająca kadr.
   Wysokość liczona w svh, bo vh na telefonie skacze przy chowaniu paska adresu. */

.hero {
  position:relative;
  display:flex;
  /* Odjęcie chrome jest konieczne: body ma już padding-top pod przyklejonym paskiem
     i nawigacją, więc pełne 100svh wypychało dolną listwę pod zagięcie ekranu. */
  min-height:calc(100svh - var(--chrome-h));
  padding-block:clamp(24px, 4vh, 56px) clamp(88px, 11vh, 132px);
  /* Tresc siedzi przy dolnej krawedzi, zeby gorna polowa kadru zostala dla twarzy.
     Wysrodkowana lezala dokladnie na niej i zaslanialaby to, co ma byc widoczne. */
  align-items:flex-end;
  overflow:hidden;
  text-align:center;
}
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media picture { display:block; width:100%; height:100%; }
/* Kadry sa przyciete pod twarz przez docs/kadr-hero.py, wiec punkt zaczepienia
   zostaje na srodku. Wczesniej byl dobierany recznie i za kazdym razem pokazywal
   tulow zamiast glowy. */
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:center; }
/* Kadrowanie liczone pod polozenie twarzy w pliku, ktora siedzi na 54 procentach
   jego wysokosci. Im szerszy ekran, tym wezszy pas pionowego zdjecia sie miesci,
   wiec punkt zaczepienia musi wedrowac w dol pliku, inaczej kadr pokazuje sam tors.
   Przy 22 procentach twarz wypadala poza kadr na kazdym ekranie od laptopa w gore. */
.hero__media::before {
  position:absolute;
  inset:0;
  z-index:1;
  /* Sama winieta przy krawedziach. Przyciemnienie pod nawigacje jest zbedne, bo
     nawigacja ma wlasne biale tlo, a kazdy procent krycia tutaj zabiera twarz. */
  background:radial-gradient(ellipse 120% 86% at 50% 26%, rgba(32,34,77,0) 58%, rgba(32,34,77,.14) 100%);
  content:"";
}
/* Dolna połowa kadru przechodzi w tło strony, żeby tekst miał kontrast, a zdjęcie
   nie urywało się poziomą krawędzią. */
.hero__media::after {
  position:absolute;
  inset:0;
  z-index:1;
  /* Do 32 procent wysokosci kadr zostaje nietkniety, bo tam jest glowa. Nizej tlo
     narasta szybko, zeby tekst i szklany box mialy na czym stac. */
  background:linear-gradient(to bottom,
    rgba(232,246,238,0) 0%,
    rgba(232,246,238,0) 32%,
    rgba(232,246,238,.5) 45%,
    rgba(232,246,238,.88) 58%,
    var(--zielen-tlo) 72%);
  content:"";
}

.hero__tresc { position:relative; z-index:2; max-width:54rem; }
.hero h1 {
  margin-bottom:24px;
  font-size:clamp(2.3rem, 5.6vw, 4.4rem);
  letter-spacing:-.035em;
}
.hero .pisane { letter-spacing:-.035em; }
.hero .lead {
  max-width:44rem;
  margin-inline:auto;
  margin-bottom:34px;
  color:#3d4256;
  font-size:clamp(1.04rem, 1.5vw, 1.2rem);
}
.hero .pod-cta { margin-bottom:0; color:#4a5063; }
.hero .nadtytul { color:var(--green-tekst); }

.nadtytul--srodek { justify-content:center; }
.nadtytul--srodek::after { width:28px; height:2px; background:currentColor; content:""; }

/* ------------------------------------------------------ szklany box CTA

   Wzorem tafli z landingu webinarowego: rozmycie tego, co pod spodem, gradient
   dajacy wrazenie grubosci materialu i refleks przy gornej krawedzi. Box jest
   wiekszy niz sam przycisk, bo ma zebrac cala decyzje w jednym miejscu: przycisk,
   termin i warunek oferty. Lezy na zdjeciu, wiec tafla musi byc na tyle gesta,
   zeby tekst na niej trzymal kontrast. */

.cta-szklo {
  position:relative;
  display:inline-flex;
  max-width:min(34rem, 100%);
  padding:clamp(22px, 3vw, 30px) clamp(24px, 3.4vw, 38px);
  margin-inline:auto;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  box-shadow:0 22px 60px rgba(32,34,77,.18), inset 0 1px 0 rgba(255,255,255,.7);
  isolation:isolate;
  text-align:center;
}
/* Rozmycie i tafla ida osobno, zeby zaokraglenie obejmowalo obie warstwy. */
.cta-szklo::before,
.cta-szklo::after {
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:inherit;
  content:"";
  pointer-events:none;
}
.cta-szklo::before { backdrop-filter:blur(16px) saturate(1.7); }
.cta-szklo::after {
  background:
    linear-gradient(to bottom, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(232,246,238,.66) 48%, rgba(255,255,255,.76) 100%);
}
.cta-szklo .btn { width:100%; }
.cta-szklo .pod-cta { margin:0; color:#3d4256; }
.cta-szklo__cena {
  display:flex;
  margin:0;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  color:var(--navy);
  font-family:var(--naglowki);
  font-weight:900;
  letter-spacing:-.03em;
}
.cta-szklo__cena b { font-size:clamp(1.9rem, 4vw, 2.5rem); }
.cta-szklo__cena s { color:var(--muted); font-size:1.05rem; font-weight:600; }
.cta-szklo__cena span {
  padding:5px 12px;
  background:var(--cta);
  border-radius:999px;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ------------------------------------------------------- ruchoma listwa

   Wzięta z landingu webinarowego. Dwie identyczne połowy w torze, więc przesunięcie
   o -50% wraca dokładnie na start i szwu nie widać. */

.listwa {
  position:absolute;
  z-index:3;
  inset:auto 0 0 0;
  overflow:hidden;
  background:rgba(255,255,255,.96);
  border-top:1px solid rgba(32,34,77,.12);
  box-shadow:0 -10px 28px rgba(32,34,77,.08);
  backdrop-filter:blur(14px) saturate(1.2);
}
.listwa__tor { display:flex; width:max-content; animation:listwa 42s linear infinite; }
.listwa__polowa { display:flex; flex:0 0 auto; align-items:center; }
.listwa__tor span {
  display:flex;
  padding-block:.85rem;
  align-items:center;
  color:var(--navy);
  font-family:var(--naglowki);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Przerywnik rysowany tłem, nie znakiem: kropka w wersalikach siadałaby na linii bazowej. */
.listwa__tor i {
  width:6px;
  height:6px;
  flex:0 0 auto;
  margin-inline:1.4rem;
  background:var(--cta);
  border-radius:50%;
  font-size:0;
}
.listwa__ikona {
  width:19px;
  height:19px;
  flex:0 0 auto;
  margin-right:.7rem;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:none;
}
.listwa__ikona--ig { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320224d' stroke-width='1.9'><rect x='2' y='2' width='20' height='20' rx='5.5'/><circle cx='12' cy='12' r='4.2'/><circle cx='17.6' cy='6.4' r='1.2' fill='%2320224d' stroke='none'/></svg>"); }
.listwa__ikona--fb { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2320224d'><path d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0022 12z'/></svg>"); }
.listwa__ikona--yt { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2320224d'><path d='M23 12s0-3.5-.45-5.15a2.6 2.6 0 00-1.83-1.84C19.07 4.55 12 4.55 12 4.55s-7.07 0-8.72.46A2.6 2.6 0 001.45 6.85C1 8.5 1 12 1 12s0 3.5.45 5.15a2.6 2.6 0 001.83 1.84c1.65.46 8.72.46 8.72.46s7.07 0 8.72-.46a2.6 2.6 0 001.83-1.84C23 15.5 23 12 23 12zM9.75 15.02V8.98L15.5 12z'/></svg>"); }
.listwa__ikona--tt { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2320224d'><path d='M16.6 5.82A4.28 4.28 0 0115.54 3h-3.09v12.4a2.59 2.59 0 01-2.59 2.5 2.59 2.59 0 110-5.18c.27 0 .53.04.78.12v-3.1a5.72 5.72 0 00-.78-.06 5.69 5.69 0 105.69 5.69V9.01a7.35 7.35 0 004.3 1.38V7.3a4.29 4.29 0 01-3.25-1.48z'/></svg>"); }
@keyframes listwa {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* ----------------------------------------------------------- lista z checkiem */

.lista-check { list-style:none; margin:0 0 30px; padding:0; }
.lista-check li { position:relative; padding-left:32px; margin-bottom:11px; }
.lista-check li::before {
  position:absolute;
  left:0;
  top:.42em;
  width:18px;
  height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340b181' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/contain;
  content:"";
}

/* ----------------------------------------------------------------- lustro */

.cytaty { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(clamp(240px, 30vw, 320px), 1fr)); }
.cytaty blockquote {
  position:relative;
  margin:0;
  padding:clamp(24px, 2.6vw, 32px);
  background:var(--paper);
  border:2px solid rgba(64,177,129,.16);
  border-radius:var(--r-l);
  color:var(--navy);
  font-size:1rem;
  font-style:normal;
  line-height:1.55;
}
.cytaty blockquote::before {
  display:block;
  margin-bottom:6px;
  color:var(--cta);
  font-family:var(--naglowki);
  font-size:2rem;
  font-weight:900;
  line-height:.7;
  content:"\201E";
}

/* --------------------------------------------------------------- diagnoza */

.diagnoza p { font-size:1.08rem; }
.diagnoza .mocne {
  padding:20px 24px;
  margin-block:26px;
  background:var(--mint);
  border-left:4px solid var(--cta);
  border-radius:0 var(--r) var(--r) 0;
  font-size:1.1rem;
}

/* --------------------------------------------------------------- drabina

   Trzy poziomy to kolejnosc pracy, a nie zbior cech, wiec numerowane kroki
   z kolkiem i linia laczaca, jak plan w landingu edubiznes. Linia biegnie za
   kolkami i konczy sie na ostatnim, wiec widac, ze to jedna droga. */

.drabina { list-style:none; margin:0 0 36px; padding:0; }
.stopien {
  position:relative;
  display:grid;
  padding-bottom:clamp(26px, 4vw, 40px);
  align-items:start;
  gap:clamp(20px, 3vw, 32px);
  grid-template-columns:56px 1fr;
}
.stopien:last-child { padding-bottom:0; }
/* Linia laczaca kolka. Ostatni krok jej nie rysuje, zeby nie zwisala w prozni. */
.stopien:not(:last-child)::before {
  position:absolute;
  left:27px;
  top:52px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--cta) 0%, rgba(64,177,129,.2) 100%);
  content:"";
}
.stopien__nr {
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  background:var(--cta);
  border-radius:50%;
  box-shadow:0 0 0 5px var(--zielen-tlo-2), 0 0 0 7px rgba(64,177,129,.24);
  color:#fff;
  font-family:var(--naglowki);
  font-size:1.28rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
}
.stopien__tresc { padding-top:6px; }
.stopien h3 { margin-bottom:10px; font-size:clamp(1.24rem, 2.4vw, 1.6rem); letter-spacing:-.025em; }
.stopien p { color:var(--muted); font-size:1rem; }
.efekt {
  display:inline-flex;
  padding:10px 16px;
  margin-top:6px;
  align-items:center;
  gap:9px;
  background:var(--paper);
  border:1px solid rgba(64,177,129,.28);
  border-radius:999px;
  color:var(--navy) !important;
  font-size:.92rem;
  font-weight:600;
}
.efekt::before {
  width:15px;
  height:15px;
  flex:0 0 auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340b181' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/contain;
  content:"";
}

.ramka {
  padding:22px 26px;
  background:var(--mint-2);
  border-left:4px solid var(--cta);
  border-radius:0 var(--r) var(--r) 0;
  color:var(--navy);
}

/* ---------------------------------------------------------------- o mnie */

.dwie-kolumny { display:grid; align-items:center; gap:clamp(30px, 5vw, 60px); grid-template-columns:.82fr 1.18fr; }
.o-mnie__foto img { width:100%; border-radius:var(--r-l); box-shadow:var(--cien-l); }

.o-mnie-sticky {
  background-color:var(--hero-green-deep);
  background-image:
    var(--brand-grain),
    radial-gradient(circle at 18% 14%, rgba(81,235,172,.28), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(138deg, var(--hero-navy) 0%, var(--hero-green-deep) 42%, var(--hero-green) 100%);
  background-position:center, center, center, center;
  background-size:180px 180px, cover, cover, cover;
  background-blend-mode:soft-light, normal, normal, normal;
  color:#d9ddeb;
  border-block:1px solid rgba(81,235,172,.2);
}
.o-mnie-sticky__uklad { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 7vw, 86px); }
.o-mnie-sticky__foto {
  position:sticky;
  top:var(--chrome-h);
  display:flex;
  height:calc(100svh - var(--chrome-h));
  padding-block:48px;
  align-items:center;
}
.o-mnie-sticky__kadr {
  position:relative;
  width:100%;
  max-height:calc(100svh - var(--chrome-h) - 96px);
  overflow:hidden;
  aspect-ratio:3 / 4;
  border:1px solid rgba(255,255,255,.18);
  border-radius:30px;
  box-shadow:0 34px 90px rgba(0,0,0,.36);
}
.o-mnie-sticky__kadr::after {
  position:absolute;
  inset:55% 0 0;
  background:linear-gradient(transparent, rgba(9,12,34,.7));
  content:"";
}
.o-mnie-sticky__kadr img { width:100%; height:100%; object-fit:cover; object-position:center 14%; }
.o-mnie-sticky__podpis {
  position:absolute;
  z-index:2;
  right:18px;
  bottom:18px;
  left:18px;
  display:flex;
  padding:14px 16px;
  flex-direction:column;
  background:rgba(15,18,48,.7);
  border:1px solid rgba(81,235,172,.24);
  border-radius:15px;
  line-height:1.35;
  backdrop-filter:blur(16px);
}
.o-mnie-sticky__podpis b { color:#fff; font-size:.84rem; }
.o-mnie-sticky__podpis span { color:#aeb5d0; font-size:.7rem; }
.o-mnie-sticky__tresc { padding-block:clamp(78px, 9vw, 120px); }
.o-mnie-sticky__intro { padding-bottom:clamp(40px, 7vw, 80px); }
.o-mnie-sticky__intro h2 { color:#fff; }
.o-mnie-sticky__intro .etykieta, .o-mnie-sticky__nr { color:var(--green-l); }
.o-mnie-sticky__blok {
  display:flex;
  min-height:72svh;
  padding-block:clamp(55px, 8vw, 90px);
  flex-direction:column;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.1);
}
.o-mnie-sticky__blok h3 { max-width:13ch; color:#fff; font-size:clamp(1.75rem, 3.5vw, 2.75rem); }
.o-mnie-sticky__blok > p:not(.o-mnie-sticky__nr) { max-width:48ch; color:#b8bed4; }
.o-mnie-sticky__nr { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.o-mnie-sticky__stat {
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:12px 17px;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(81,235,172,.22);
  border-radius:14px;
}
.o-mnie-sticky__stat b { color:var(--green-l); font-size:1.2rem; }
.o-mnie-sticky__stat span { color:#c2c7da; font-size:.78rem; }

/* ---------------------------------------------------------------- opinie */

.opinie {
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(64,177,129,.09), transparent 24%),
    linear-gradient(180deg, #f7f9fb 0%, #f1f5f4 100%);
}
.opinie .kontener { width:min(1180px, calc(100% - 2 * var(--pad))); }
.opinie__ocena {
  display:flex;
  margin:-8px 0 38px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 12px;
  color:#667087;
  text-align:center;
}
.opinie__ocena b { color:var(--navy); font-size:1rem; }
.opinie__ocena > span:last-child { font-size:.9rem; }
.opinie__gwiazdy {
  width:108px;
  height:20px;
  flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5b301' d='m12 2.6 2.82 5.71 6.3.92-4.56 4.44 1.08 6.28L12 17l-5.64 2.95 1.08-6.28-4.56-4.44 6.3-.92L12 2.6Z'/%3E%3C/svg%3E") left center/20px 20px repeat-x;
}
.opinie__galeria {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.opinia-zrzut {
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:1;
  margin:0;
  padding:14px;
  background:#fff;
  border:1px solid #dde4e8;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(32,34,77,.08);
  break-inside:avoid;
  cursor:zoom-in;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.opinia-zrzut:hover {
  border-color:rgba(64,177,129,.46);
  box-shadow:0 18px 42px rgba(32,34,77,.14);
  transform:translateY(-4px);
}
.opinia-zrzut:focus-visible { outline:3px solid var(--green-l); outline-offset:4px; }
.opinia-zrzut img { width:100%; height:100%; display:block; object-fit:contain; }

/* ------------------------------------------------------- trzon i na zywo */

.dwa-kafle { display:grid; gap:16px; grid-template-columns:repeat(2, 1fr); margin-bottom:28px; }
.kafel {
  padding:clamp(30px, 3.4vw, 40px);
  background:var(--paper);
  border:2px solid rgba(64,177,129,.22);
  border-radius:var(--r-l);
}
.kafel--ciemny { background:var(--navy); border-color:var(--navy); color:#d7d9e8; box-shadow:var(--cien-l); }
.kafel--ciemny h3 { color:#fff; }
.kafel--wyrozniony {
  background:linear-gradient(145deg, #fff 0%, #eefaf4 100%);
  border-color:rgba(64,177,129,.45);
  box-shadow:0 24px 60px rgba(32,34,77,.11);
}
.kafel h3 { margin-bottom:14px; font-size:1.24rem; }
.kafel__etykieta {
  display:inline-flex;
  margin-bottom:14px;
  padding:5px 12px;
  background:var(--mint);
  border-radius:999px;
  color:var(--green-tekst);
  font-family:var(--naglowki);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.kafel--ciemny .kafel__etykieta { background:rgba(81,235,172,.14); color:var(--green-l); }
.kafel--ciemny .kafel-ikona { background:rgba(81,235,172,.12); border-color:rgba(81,235,172,.3); color:var(--green-l); }
.kafel--wyrozniony .kafel__etykieta { background:var(--navy); color:#fff; }

/* ------------------------------------------------------- ikona na kaflu

   Rysowana kreską w kolorze dziedziczonym, więc ten sam znacznik działa na kaflu
   jasnym i na wyróżnionym. Zastępuje zrzuty z platformy: zrzut jest nieczytelny
   na telefonie i starzeje się przy każdej zmianie w Skoolu. */

.kafel-ikona {
  display:grid;
  width:46px;
  height:46px;
  margin-bottom:16px;
  place-items:center;
  background:var(--mint);
  border:1px solid rgba(64,177,129,.22);
  border-radius:14px;
  color:var(--green-tekst);
}
.kafel-ikona svg { width:24px; height:24px; }

/* --------------------------------------------------------------- moduly */

.moduly { display:grid; gap:16px; grid-template-columns:repeat(3, 1fr); margin-bottom:32px; }
.podglad-skool {
  max-width:940px;
  margin:0 auto clamp(34px, 5vw, 58px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(32,34,77,.12);
  border-radius:26px;
  box-shadow:0 28px 70px rgba(32,34,77,.14);
}
.podglad-skool__pasek {
  display:grid;
  min-height:50px;
  padding:9px 16px;
  align-items:center;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  background:#f7f8f8;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}
.podglad-skool__pasek > img { width:42px; height:30px; object-fit:contain; }
.podglad-skool__pasek > span:last-child { justify-self:end; }
.podglad-skool__kropki { display:flex; gap:6px; }
.podglad-skool__kropki i { width:9px; height:9px; background:#d8dadc; border-radius:50%; }
.podglad-skool__kropki i:first-child { background:#51c394; }
.podglad-skool__ekrany {
  display:grid;
  padding:clamp(18px, 3vw, 30px);
  align-items:start;
  gap:clamp(14px, 2.2vw, 24px);
  grid-template-columns:1.08fr .92fr;
  background:
    radial-gradient(circle at 12% 0%, rgba(81,235,172,.16), transparent 34%),
    linear-gradient(145deg, #f4f7f8, #e8f3ef);
}
.podglad-skool__mockup {
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(32,34,77,.14);
  border-radius:17px;
  box-shadow:0 20px 44px rgba(32,34,77,.14);
}
.podglad-skool__mockup--dodatki { margin-top:clamp(26px, 4.4vw, 54px); }
.podglad-skool__mockup > span {
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  padding:6px 10px;
  background:rgba(32,34,77,.88);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  box-shadow:0 8px 20px rgba(12,17,44,.2);
  color:#fff;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
.podglad-skool__screen { display:block; width:100%; }
.podglad-skool figcaption { padding:16px 24px 19px; color:var(--muted); font-size:.88rem; text-align:center; }
.modul {
  position:relative;
  display:flex;
  padding:clamp(26px, 3vw, 36px);
  flex-direction:column;
  overflow:hidden;
  background:var(--paper);
  border:2px solid rgba(64,177,129,.22);
  border-radius:var(--r-l);
  transition:transform .2s ease, border-color .2s ease;
}
.modul:hover { transform:translateY(-4px); border-color:rgba(64,177,129,.55); }
/* Kreska u gory kafla, ta sama, ktora strona rozdziela reszte. Wyroznia kafel
   bez dokladania mu kolejnej ramki. */
.modul::before {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, var(--cta) 0%, var(--green-l) 100%);
  content:"";
}
/* Numer modułu jako duża cyfra w rogu. Porządkuje sześć kafli w kolejność,
   której same nagłówki nie niosą. */
.modul::after {
  position:absolute;
  right:14px;
  top:2px;
  color:var(--zielen-tlo-2);
  font-family:var(--naglowki);
  font-size:5.2rem;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
  pointer-events:none;
  content:counter(modul);
}
.moduly { counter-reset:modul; }
.modul { counter-increment:modul; }
.modul__nr {
  position:relative;
  z-index:1;
  margin-bottom:10px;
  color:var(--green-tekst);
  font-family:var(--naglowki);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.modul > * { position:relative; z-index:1; }
.modul h3 { margin-bottom:12px; font-size:1.2rem; }
.modul > p { color:var(--muted); font-size:.97rem; }
.modul__wynik {
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line-2);
  color:var(--navy) !important;
  font-weight:600;
  font-size:.93rem;
}

/* --------------------------------------------------------------- dodatki */

.dodatki {
  position:relative;
  display:grid;
  align-items:center;
  gap:clamp(34px, 6vw, 72px);
  grid-template-columns:.82fr 1.18fr;
}
.dodatki__intro { position:relative; padding:8px 0 8px 10px; }
.dodatki__platforma {
  display:inline-flex;
  padding:7px 11px;
  margin-bottom:18px;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(64,177,129,.22);
  border-radius:12px;
  box-shadow:0 8px 22px rgba(32,34,77,.06);
  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
}
.dodatki__platforma img { width:42px; height:30px; object-fit:contain; }
.dodatki__intro h3 { max-width:12ch; margin-bottom:14px; font-size:clamp(1.65rem, 3.4vw, 2.45rem); }
.dodatki__intro > p:not(.dodatki__dostep) { max-width:42ch; color:var(--muted); font-size:.94rem; }
.dodatki__screen {
  overflow:hidden;
  width:min(440px, 96%);
  margin:26px 0 22px;
  background:#fff;
  border:5px solid rgba(255,255,255,.82);
  border-radius:20px;
  box-shadow:0 24px 55px rgba(32,34,77,.15);
}
.dodatki__screen img { width:100%; }
.dodatki__dostep { display:flex; align-items:center; gap:9px; color:var(--navy); font-size:.78rem; font-weight:700; }
.dodatki__dostep > span { width:9px; height:9px; flex:0 0 auto; background:var(--cta); border-radius:50%; box-shadow:0 0 0 5px rgba(64,177,129,.13); }
.dodatki__panel {
  position:relative;
  min-width:0;
}
.dodatki__panel-gora {
  position:relative;
  z-index:2;
  display:flex;
  min-height:58px;
  margin-bottom:18px;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.dodatki__panel-gora > div { display:flex; flex-direction:column; line-height:1.35; }
.dodatki__panel-gora div > span { color:var(--green-tekst); font-size:.65rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.dodatki__panel-gora b { max-width:28ch; color:var(--navy); font-size:.95rem; }
.dodatki__licznik { padding:6px 10px; background:var(--navy); border-radius:999px; color:#fff; font-size:.63rem; font-weight:800; white-space:nowrap; }
.dodatki__lista { display:grid; position:relative; grid-template-columns:repeat(2, 1fr); gap:14px; }
.dodatek {
  --grafika-a:#43d39a;
  --grafika-b:#256f68;
  --karta-tlo:rgba(67,211,154,.1);
  position:relative;
  display:flex;
  min-width:0;
  min-height:150px;
  padding:16px 18px 16px 88px;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(112deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 68%, var(--karta-tlo) 100%);
  border:1px solid rgba(32,34,77,.11);
  border-radius:20px;
  box-shadow:0 15px 34px rgba(32,34,77,.11);
}
.dodatek::before {
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, var(--grafika-a), var(--grafika-b));
  content:"";
}
.dodatek::after {
  position:absolute;
  right:-38px;
  top:-48px;
  width:130px;
  height:130px;
  background:radial-gradient(circle, var(--karta-tlo) 0%, transparent 68%);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.dodatek:nth-child(1) { --grafika-a:#ff9c4a; --grafika-b:#f04d7a; --karta-tlo:rgba(255,125,86,.16); }
.dodatek:nth-child(2) { --grafika-a:#9c6cff; --grafika-b:#4857d6; --karta-tlo:rgba(119,93,231,.15); }
.dodatek:nth-child(3) { --grafika-a:#36cbb2; --grafika-b:#168b91; --karta-tlo:rgba(34,181,165,.15); }
.dodatek:nth-child(4) { --grafika-a:#3ab9ff; --grafika-b:#3158cc; --karta-tlo:rgba(52,137,234,.15); }
.dodatek:nth-child(5) { --grafika-a:#ff6fae; --grafika-b:#a94bd5; --karta-tlo:rgba(219,86,183,.14); }
.dodatek:nth-child(6) { --grafika-a:#55d68f; --grafika-b:#1e9b68; --karta-tlo:rgba(54,190,124,.15); }
.dodatek:nth-child(7) { --grafika-a:#ffc83d; --grafika-b:#f17935; --karta-tlo:rgba(245,166,54,.17); }
.dodatek:nth-child(8) { --grafika-a:#51c8de; --grafika-b:#4366d5; --karta-tlo:rgba(69,133,217,.15); }
.dodatek .kafel-ikona {
  position:absolute;
  left:17px;
  top:20px;
  width:54px;
  height:54px;
  margin:0;
  background:linear-gradient(145deg, var(--grafika-a), var(--grafika-b));
  border:1px solid rgba(255,255,255,.48);
  border-radius:17px;
  box-shadow:0 12px 24px color-mix(in srgb, var(--grafika-b) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;
}
.dodatek .kafel-ikona svg { width:27px; height:27px; stroke-width:1.9; }
.dodatek h3 { margin-bottom:5px; font-size:.94rem; }
.dodatek > p { margin-bottom:5px; color:var(--muted); font-size:.76rem; line-height:1.42; }
.dodatek__korzysc {
  margin:0 !important;
  padding:0;
  border:0;
  color:var(--green-tekst) !important;
  font-weight:700;
  font-size:.72rem !important;
}
.dodatki.dodatki--animowane .dodatki__lista { display:block; min-height:474px; }
.dodatki.dodatki--animowane .dodatek {
  --pozycja:4;
  position:absolute;
  z-index:calc(10 - var(--pozycja));
  top:0;
  right:0;
  left:0;
  min-height:150px;
  opacity:calc(1 - var(--pozycja) * .18);
  transform:translateY(calc(var(--pozycja) * 104px)) scale(calc(1 - var(--pozycja) * .024));
  transform-origin:top center;
  transition:opacity .4s ease, transform .56s cubic-bezier(.2, 1.35, .35, 1), border-color .35s ease, box-shadow .35s ease;
}
.dodatki.dodatki--animowane .dodatek--aktywny {
  border-color:color-mix(in srgb, var(--grafika-a) 58%, rgba(32,34,77,.12));
  box-shadow:0 22px 46px rgba(32,34,77,.16), 0 0 0 1px color-mix(in srgb, var(--grafika-a) 22%, transparent);
}
.dodatki.dodatki--animowane .dodatek--ukryty { opacity:0; pointer-events:none; }
.dodatki.dodatki--animowane .dodatek:hover { border-color:rgba(64,177,129,.5); }
@media (prefers-reduced-motion:reduce) {
  .dodatki.dodatki--animowane .dodatki__lista { display:grid; min-height:0; }
  .dodatki.dodatki--animowane .dodatek { position:relative; opacity:1; transform:none; transition:none; }
}

/* -------------------------------------------------------------- dla kogo

   Dwa panele w dwoch kolorach zamiast dwoch kolumn tekstu, wzorem landingu
   webinarowego. Granat niesie liste "to dla Ciebie" i to on ma zatrzymac wzrok,
   lista "to nie dla Ciebie" lezy obok na jasnym, bo jest tu po to, zeby pierwsza
   byla wiarygodna. */

.dwie-listy {
  display:grid;
  max-width:1000px;
  margin-inline:auto;
  gap:clamp(16px, 2.5vw, 24px);
  grid-template-columns:1.08fr .92fr;
}
.lista-tak, .lista-nie { padding:clamp(30px, 3.6vw, 44px); border-radius:var(--r-l); }
.lista-tak {
  background:linear-gradient(165deg, #2b2e63 0%, #20224d 100%);
  box-shadow:0 26px 70px rgba(10,11,30,.28);
  color:#dfe2ef;
}
.lista-tak h3 { color:#fff; }
.lista-nie { background:var(--paper); border:2px solid rgba(64,177,129,.18); color:var(--muted); }
.lista-tak h3, .lista-nie h3 { margin-bottom:20px; font-size:1.16rem; }
.lista-tak ul, .lista-nie ul { list-style:none; margin:0; padding:0; }
.lista-tak li, .lista-nie li { position:relative; padding-left:32px; margin-bottom:16px; }
.lista-tak li:last-child, .lista-nie li:last-child { margin-bottom:0; }
.lista-tak li::before {
  position:absolute;
  left:0;
  top:.42em;
  width:18px;
  height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351ebac' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/contain;
  content:"";
}
.lista-nie li::before {
  position:absolute;
  left:0;
  top:.42em;
  width:18px;
  height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949aad' stroke-width='3' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center/contain;
  content:"";
}

/* ---------------------------------------------------------------- oferta

   Kafel stoi na granatowej sekcji, więc sam jest o stopień jaśniejszym granatem
   z zieloną obwódką: gdyby był w tym samym kolorze co tło, zlałby się z nim,
   a gdyby był biały, wyglądałby jak dziura w sekcji. */

.oferta {
  padding:clamp(30px, 5vw, 48px);
  background:linear-gradient(165deg, #2b2e63 0%, #232653 62%, #20224d 100%);
  border:1px solid rgba(81,235,172,.34);
  border-radius:var(--r-l);
  box-shadow:0 30px 80px rgba(10,11,30,.42);
  color:#d7dae9;
}
.oferta__nazwa {
  margin-bottom:22px;
  color:#fff;
  font-family:var(--naglowki);
  font-size:1.12rem;
  font-weight:800;
}
.oferta .lista-check li { color:#e4e6f1; }
.oferta__dostep { color:#a9afcb; font-size:.95rem; }
.oferta__cena {
  display:flex;
  margin:26px 0 8px;
  align-items:baseline;
  justify-content:center;
  gap:14px;
  font-family:var(--naglowki);
}
.oferta__cena s { color:#8d94b5; font-size:1.5rem; font-weight:600; }
.oferta__cena b { color:#fff; font-size:clamp(2.6rem, 7vw, 3.4rem); font-weight:900; letter-spacing:-.03em; }
.oferta__termin { margin-bottom:24px; color:#e4e6f1; font-weight:600; text-align:center; }
#odliczanie {
  display:block;
  margin-top:6px;
  color:var(--green-l);
  font-family:var(--naglowki);
  font-size:.9rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.oferta .pod-cta { color:#a9afcb; text-align:center; }
.oferta__drobne, .oferta__omnibus { margin-bottom:8px; color:#9aa1c0; font-size:.83rem; }
.oferta__omnibus { margin-bottom:0; }
.oferta a { color:var(--green-l); }

/* -------------------------------------------------------------- fala

   Cztery warstwy tej samej ścieżki, każda z innym czasem i opóźnieniem, więc
   nakładają się nierówno i ruch nie wygląda na pętlę. Przeniesiona z landingu
   edubiznes. Stoi na styku sekcji kremowej z sekcją cennika, żeby przejście nie
   było poziomą kreską przez całą szerokość.

   Kolor musi siedzieć na grupie albo na samych `use`, bo `fill` jest dziedziczony,
   a klony w drzewie cienia `use` nie widzą reguł z dokumentu. Ustawienie go na
   ścieżce w `defs` nic nie daje i warstwy zjeżdżają do domyślnej czerni. */

.fala { position:relative; height:clamp(60px, 8vw, 110px); margin-bottom:-1px; line-height:0; }
.fala svg { display:block; width:100%; height:100%; }
.fala--do-granatu { background:var(--krem); }
/* Trzy górne warstwy to lekki zielony welon na kremie, ostatnia domyka falę
   dokładnie kolorem sekcji pod nią, więc styk jest niewidoczny. */
.fala--do-granatu .fala__warstwy { fill:#cfeadd; }
.fala--do-granatu .fala__w4 { fill:#edf9f3; }
.fala__warstwy > use { animation:fala-plynie 14s cubic-bezier(.55,.5,.45,.5) infinite; will-change:transform; }
.fala__w1 { animation-duration:11s; animation-delay:-2s; }
.fala__w2 { animation-duration:15s; animation-delay:-3s; }
.fala__w3 { animation-duration:20s; animation-delay:-4s; }
.fala__w4 { animation-duration:28s; animation-delay:-5s; }
@keyframes fala-plynie {
  0%   { transform:translate3d(-90px, 0, 0); }
  100% { transform:translate3d(85px, 0, 0); }
}

/* ------------------------------------------------------------------- FAQ */

.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  position:relative;
  padding:20px 44px 20px 0;
  color:var(--navy);
  font-family:var(--naglowki);
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  list-style:none;
  cursor:pointer;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  position:absolute;
  right:4px;
  top:50%;
  width:15px;
  height:15px;
  margin-top:-7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320224d' stroke-width='3' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center/contain;
  content:"";
  transition:transform .2s ease;
}
.faq details[open] summary { color:var(--green-tekst); }
.faq details[open] summary::after { transform:rotate(180deg); }
.faq details p { padding-bottom:20px; margin:0; color:var(--muted); }

.domkniecie { margin:40px 0 20px; color:var(--navy); font-weight:600; text-align:center; }

/* Ostatnie CTA na granatowym kaflu: po dwunastu pytaniach strona potrzebuje
   wyraźnego domknięcia, a nie kolejnego akapitu na jasnym tle. */
.kafel-cta {
  padding:clamp(30px, 5vw, 48px);
  margin-top:48px;
  background:linear-gradient(165deg, #2b2e63 0%, #20224d 100%);
  border:1px solid rgba(81,235,172,.28);
  border-radius:var(--r-l);
  box-shadow:0 26px 70px rgba(10,11,30,.3);
  text-align:center;
}
.kafel-cta h3 { color:#fff; font-size:clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing:-.025em; }
.kafel-cta p { max-width:44ch; margin-inline:auto; color:#b6bcd6; }
.kafel-cta .btn { margin-top:8px; }
.kafel-cta .pod-cta { color:#9aa1c0; }

/* ---------------------------------------------------------------- stopka */

.stopka {
  padding-block:24px;
  background:var(--navy);
  color:#c9cbdd;
  font-size:.88rem;
}
.stopka__srodek { display:flex; align-items:center; justify-content:space-between; gap:26px; }
.stopka__logo { width:128px; flex:0 0 auto; }
.stopka__logo img { width:100%; }
.stopka p { margin:0; text-align:center; }
.stopka a { color:var(--green-l); }
.stopka__linki { display:flex; gap:16px; white-space:nowrap; }
.stopka button { padding:0; background:none; border:0; color:var(--green-l); cursor:pointer; text-decoration:underline; }

/* ----------------------------------------------------- polityka w popupie */

.modal {
  position:fixed;
  z-index:450;
  inset:0;
  display:grid;
  padding:24px;
  place-items:center;
  background:rgba(20,22,54,.58);
  backdrop-filter:blur(8px);
}
.modal[hidden] { display:none; }
.modal__karta {
  position:relative;
  width:min(560px, 100%);
  max-height:calc(100svh - 48px);
  padding:clamp(30px, 5vw, 46px);
  overflow:auto;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  box-shadow:0 34px 90px rgba(14,16,48,.32);
}
.modal__karta h2 { font-size:clamp(1.7rem, 5vw, 2.35rem); }
.modal__karta > p:not(.etykieta) { color:var(--muted); }
.modal__zamknij {
  position:absolute;
  top:10px;
  right:12px;
  width:42px;
  height:42px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:2rem;
  cursor:pointer;
}

/* --------------------------------------------------- dolny pasek na telefonie

   Landing ma na telefonie kilkanascie tysiecy pikseli wysokosci. Bez tego paska
   osoba, ktora czyta FAQ, ma najblizszy przycisk zakupu kilka ekranow dalej.
   Pasek wchodzi dopiero za hero, zeby nie zaslanial pierwszego CTA. */

.mobilne-cta {
  position:fixed;
  z-index:110;
  right:0;
  bottom:0;
  left:0;
  display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 28px rgba(32,34,77,.12);
  backdrop-filter:blur(12px);
  transform:translateY(110%);
  transition:transform .25s ease;
}
.mobilne-cta.widoczny { transform:translateY(0); }
.mobilne-cta__cena { margin:0; color:var(--navy); font-family:var(--naglowki); font-size:1.24rem; font-weight:900; line-height:1.1; }
.mobilne-cta__cena s { display:block; color:var(--muted); font-size:.76rem; font-weight:600; }
.mobilne-cta .btn { flex:1 1 auto; max-width:62%; min-height:48px; padding:12px 18px; font-size:.92rem; }

/* -------------------------------------------------------- okno przy wyjsciu */

.wyjscie {
  position:fixed;
  z-index:400;
  inset:0;
  display:flex;
  padding:24px;
  align-items:center;
  justify-content:center;
  background:rgba(32,34,77,.55);
  backdrop-filter:blur(4px);
}
.wyjscie[hidden] { display:none; }
.wyjscie__karta {
  position:relative;
  max-width:460px;
  padding:44px 40px 40px;
  background:var(--paper);
  border-radius:var(--r-l);
  box-shadow:0 30px 80px rgba(32,34,77,.3);
  text-align:center;
}
.wyjscie__karta h3 { font-size:1.5rem; }
.wyjscie__karta p { color:var(--muted); }
.wyjscie__zamknij {
  position:absolute;
  right:12px;
  top:8px;
  width:40px;
  height:40px;
  background:none;
  border:none;
  color:var(--muted);
  font-size:1.9rem;
  line-height:1;
  cursor:pointer;
}

/* ------------------------------------------------------- wejscia sekcji */

.wejscie { opacity:0; transform:translateY(22px); }
.wejscie.widac { opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.22,.68,.36,1); }
/* Bez JS nic nie moze zostac niewidoczne. */
.brak-js .wejscie { opacity:1; transform:none; }

/* ========================================================== responsywnosc

   Cztery progi, kazdy ma powod:
   1080  moduly i dodatki z 4 i 3 kolumn schodza na 2, bo tekst robi sie waski
    920  hero i sekcje dwukolumnowe skladaja sie w pion, menu chowa sie w szufladzie
    620  wszystko idzie w jedna kolumne, pasek oferty skraca tresc
    380  najmniejsze telefony, zbijamy padding i skale
   ========================================================================== */

@media (max-width:1080px) {
  .dodatki { gap:34px; grid-template-columns:.72fr 1.28fr; }
  .moduly { grid-template-columns:repeat(2, 1fr); }

}

@media (max-width:920px) {
  .opinie__galeria { grid-template-columns:repeat(2, 1fr); }
  :root { --nav-h:58px; }

  .dwie-kolumny { grid-template-columns:1fr; }
  .dodatki { max-width:720px; margin-inline:auto; grid-template-columns:1fr; }
  .dodatki__intro { padding-inline:8px; }
  .dodatki__screen { width:min(520px, 96%); }
  .o-mnie__foto { max-width:440px; margin-inline:auto; }
  .o-mnie-sticky { padding-block:70px; }
  .o-mnie-sticky__uklad { grid-template-columns:1fr; gap:34px; }
  .o-mnie-sticky__foto { position:relative; top:auto; height:auto; padding:0; }
  .o-mnie-sticky__kadr { max-width:440px; max-height:none; margin-inline:auto; aspect-ratio:4 / 3; }
  .o-mnie-sticky__kadr img { object-position:center 16%; }
  .o-mnie-sticky__tresc { padding:0; }
  .o-mnie-sticky__intro { padding-bottom:24px; text-align:center; }
  .o-mnie-sticky__blok { min-height:auto; padding-block:38px; }
  .o-mnie-sticky__blok h3 { max-width:18ch; }

  /* Scena składa się w pion: najpierw twarz, potem dwa kafle obok siebie. */
  .scena { grid-template-columns:1fr 1fr; }
  .scena__foto { grid-column:1 / -1; max-width:460px; margin-inline:auto; }
  .scena__kafel--bok { transform:none; }
  .dwa-kafle, .dwie-listy { grid-template-columns:1fr; }
  .oferta__gora { grid-template-columns:1fr 230px; }
  .dwie-listy { max-width:38rem; }

  /* Menu w szufladzie. Rozwija sie pod nawigacja i nie zaslania calego ekranu,
     bo lista ma cztery pozycje, a nie dwadziescia. */
  .hamburger { display:flex; }
  .naglowek__srodek { grid-template-columns:auto 1fr; }
  .naglowek .btn { display:none; }
  .hamburger { justify-self:end; }
  .menu {
    position:absolute;
    top:100%;
    right:0;
    left:0;
    display:none;
    padding:18px var(--pad) 24px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:rgba(255,255,255,.99);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(32,34,77,.12);
  }
  .menu.otwarte { display:flex; }
  .menu a { padding:13px 0; border-bottom:1px solid var(--line-2); color:#4a4f66; font-size:.95rem; }
  .menu a::after { display:none; }
  .menu .btn { display:flex; margin-top:14px; }
}

@media (max-width:620px) {
  .cta-szklo { max-width:100%; }
  .mobilne-cta { display:flex; }
  /* Miejsce na dolny pasek, zeby nie przykrywal stopki ani ostatniego przycisku. */
  .stopka { padding-bottom:110px; }

  /* Zdjecie jako pas o ograniczonej wysokosci. W pelnej wysokosci zajmowalo caly
     pierwszy ekran i spychalo naglowek z CTA ponizej zagiecia, a to jest strona,
     na ktora ludzie wchodza z reklamy i decyduja w pierwszych sekundach. */
  .scena__foto img { max-height:40svh; object-fit:cover; object-position:center 18%; }
  .hero { padding-top:26px; }
  .hero h1 { margin-bottom:18px; letter-spacing:-.03em; }

  /* Kreska przed nadtytulem znika, bo przy zawijaniu na dwie linie zostawala
     samotnie w pierwszej i robila wciecie pod nia. */
  .nadtytul::before { display:none; }

  .moduly, .dodatki { grid-template-columns:1fr; }
  .dodatki__intro { padding-inline:0; }
  .dodatki__screen { width:100%; }
  .dodatki__panel { padding:0; border-radius:0; }
  .dodatki__panel-gora { margin-bottom:12px; }
  .dodatki__panel-gora b { font-size:.84rem; }
  .dodatki__licznik { padding:5px 8px; font-size:.58rem; }
  .dodatki__lista { grid-template-columns:1fr; }
  .dodatki.dodatki--animowane .dodatki__lista { min-height:558px; }
  .dodatki.dodatki--animowane .dodatek {
    min-height:180px;
    padding:15px 14px 15px 82px;
    transform:translateY(calc(var(--pozycja) * 132px)) scale(calc(1 - var(--pozycja) * .018));
  }
  .dodatek .kafel-ikona { left:14px; top:18px; }
  .oferta__gora, .oferta__lista, .oferta__decyzja { grid-template-columns:1fr; }
  .oferta__mockup { max-width:250px; margin-inline:auto; }
  .oferta__cena-wrap { padding-bottom:16px; border-right:0; border-bottom:1px solid rgba(255,255,255,.16); }
  .opinie__galeria { grid-template-columns:1fr; }
  .opinie__ocena { margin-bottom:28px; flex-direction:column; }
  .opinia-zrzut { aspect-ratio:auto; padding:10px; border-radius:16px; }
  .opinia-zrzut img { height:auto; }
  .o-mnie-sticky { padding-block:54px; }
  .o-mnie-sticky__kadr { aspect-ratio:1; border-radius:24px; }
  .o-mnie-sticky__stat { width:100%; }
  .cytaty { grid-template-columns:1fr; }
  /* W jednej kolumnie twarz idzie pierwsza, kafle pod nia. */
  .scena { grid-template-columns:1fr; }
  .scena__foto { order:-1; }

  /* Na telefonie w pasku zostaje sama cena z terminem. Przycisk znika, bo
     kciuk i tak ma CTA w hero, a trzy elementy w 36 pikselach sie tloczy. */
  .pasek__pelne { display:none; }
  .pasek .btn { display:none; }
  .pasek p { font-size:.72rem; }

  .kafel, .lista-tak, .lista-nie { padding:26px 22px; }
  .oferta__cena { gap:10px; }
  /* Plakietka schodzi o stopien, zeby zmiescic sie w dwoch liniach i nie zjadac
     polowy zdjecia. */
  .plakietka { right:10px; bottom:10px; padding:10px 12px; gap:9px; max-width:calc(100% - 20px); }
  .plakietka__ikona { width:30px; height:30px; }
  .plakietka__ikona svg { width:16px; height:16px; }
  .plakietka p { font-size:.78rem; }
  .plakietka small { font-size:.7rem; }
  .wyjscie__karta { padding:38px 24px 30px; }
}

/* Nizsze ekrany: hero ma sie domknac listwa w pierwszym ekranie, wiec odstepy
   i szklany box schodza, a tresc zostaje w calosci. */
@media (max-height:900px) {
  .hero { padding-block:clamp(16px, 2.6vh, 34px) clamp(76px, 9vh, 104px); }
  .hero h1 { margin-bottom:16px; }
  .hero .lead { margin-bottom:24px; font-size:1.02rem; line-height:1.6; }
  .cta-szklo { padding:20px 24px; gap:11px; border-radius:22px; }
  .cta-szklo__cena b { font-size:clamp(1.65rem, 3.2vw, 2.05rem); }
  .cta-szklo .btn--duzy { min-height:54px; font-size:1rem; }
}

@media (max-width:720px) and (max-height:780px) {
  .hero { padding-block:12px 72px; }
  .hero h1 { margin-bottom:12px; font-size:clamp(1.9rem, 7.8vw, 2.4rem); }
  .hero .lead { margin-bottom:18px; font-size:.98rem; line-height:1.5; }
  .hero .nadtytul { margin-bottom:8px; font-size:.7rem; }
  .cta-szklo { padding:16px 18px; gap:9px; }
  .cta-szklo__cena b { font-size:1.6rem; }
  .cta-szklo .pod-cta { font-size:.78rem; }
  .hero .btn--duzy { min-height:54px; }
  .hero .pod-cta { margin-top:10px; font-size:.82rem; }
}

@media (max-width:380px) {
  :root { --pad:16px; }
  .btn--duzy { min-height:54px; padding:15px 22px; font-size:1rem; }
  .stopien, .modul, .dodatek { padding:24px 20px; }
}

/* Playbook: animacje ustepuja, gdy system prosi o mniej ruchu. */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .wejscie { opacity:1; transform:none; }
}

/* ===================================================== odświeżony hero */

.hero {
  min-height:min(calc(100svh - var(--chrome-h)), 950px);
  padding-block:clamp(38px, 5vw, 68px) 90px;
  align-items:center;
  overflow:hidden;
  background-color:var(--hero-green-deep);
  background-image:
    radial-gradient(circle at 18% 14%, rgba(81,235,172,.28), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(138deg, var(--hero-navy) 0%, var(--hero-green-deep) 42%, var(--hero-green) 100%);
  text-align:left;
}
.hero::before {
  position:absolute;
  z-index:2;
  width:440px;
  height:440px;
  right:-170px;
  top:-180px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  box-shadow:inset 0 0 80px rgba(255,255,255,.35);
  content:"";
  pointer-events:none;
}
.hero::after {
  position:absolute;
  z-index:1;
  inset:0;
  background-image:var(--brand-grain);
  background-size:180px 180px;
  content:"";
  mix-blend-mode:soft-light;
  opacity:.12;
  pointer-events:none;
}
.hero__media { display:none; }
.hero__uklad {
  position:relative;
  z-index:2;
  display:block;
  width:min(1400px, calc(100% - 2 * var(--pad)));
}
.hero__tresc { width:58%; max-width:780px; }
.hero h1 { color:#fff; }
.hero .pisane { color:var(--green-l); font-size:1.08em; line-height:1.04; }
.hero h1 { margin-bottom:24px; font-size:clamp(1.9rem, 4.8vw, 4.85rem); line-height:1.08; }
.hero__linia { display:inline-block; white-space:nowrap; }
.hero .lead { max-width:57ch; margin:0 0 28px; color:rgba(255,255,255,.9); font-size:clamp(1.12rem, 1.5vw, 1.3rem); line-height:1.65; }
.hero__korzysci {
  display:flex;
  width:100%;
  max-width:760px;
  margin-bottom:28px;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.hero__korzysci span {
  padding:7px 11px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  font-size:.74rem;
  font-weight:700;
  backdrop-filter:blur(12px);
}
.hero__wizual { position:absolute; z-index:1; inset:0; min-width:0; padding:0; }
.hero__wizual::before {
  position:absolute;
  z-index:2;
  inset:0;
  background:
    linear-gradient(96deg,
      rgba(36,40,88,.98) 0%,
      rgba(39,120,107,.97) 31%,
      rgba(51,151,121,.88) 44%,
      rgba(59,169,134,.58) 53%,
      rgba(59,169,134,.16) 63%,
      rgba(59,169,134,0) 73%),
    linear-gradient(180deg,
      rgba(32,34,77,.22) 0%,
      rgba(39,120,107,0) 17%,
      rgba(39,120,107,0) 66%,
      rgba(39,120,107,.34) 100%);
  content:"";
  pointer-events:none;
}
.hero__foto {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  background:#dcece4;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.hero__foto::after {
  display:none;
}
.hero__foto picture { display:block; width:100%; height:100%; }
.hero__foto img { width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.hero__karta {
  position:absolute;
  z-index:2;
  display:flex;
  padding:15px 18px;
  flex-direction:column;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.88);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(32,34,77,.17);
  color:var(--navy);
  line-height:1.35;
  backdrop-filter:blur(18px) saturate(1.5);
}
.hero__karta b { font-size:.92rem; }
.hero__karta span { color:var(--muted); font-size:.72rem; }
.hero__karta--moduly { top:7%; left:-12%; }
.hero__karta--spolecznosc { right:-8%; bottom:5%; padding-left:42px; }
.hero__status { position:absolute; left:18px; top:20px; width:12px; height:12px; background:var(--cta); border-radius:50%; box-shadow:0 0 0 6px rgba(64,177,129,.14); }
.cta-szklo {
  position:relative;
  isolation:isolate;
  display:flex;
  width:100%;
  max-width:760px;
  padding:18px;
  margin:0;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  overflow:hidden;
  background:transparent;
  border:0;
  border-radius:24px;
  box-shadow:
    0 0 0 1px rgba(17,20,57,.42),
    0 28px 68px rgba(12,17,44,.42),
    0 12px 28px rgba(48,185,132,.16);
  backdrop-filter:blur(26px) saturate(1.7);
}
.cta-szklo::before {
  position:absolute;
  z-index:-2;
  inset:-300% -80%;
  display:block;
  background:conic-gradient(
    #f5fffb,
    #3cc891 12%,
    #fff 24%,
    #6974bd 38%,
    #20224d 50%,
    #fff 62%,
    #51ebac 76%,
    #8792d2 88%,
    #f5fffb
  );
  animation:cta-metal 8s linear infinite;
  content:"";
  pointer-events:none;
}
.cta-szklo::after {
  position:absolute;
  z-index:-1;
  inset:2px;
  display:block;
  background:
    radial-gradient(circle at 10% -18%, rgba(255,255,255,.44), transparent 31%),
    radial-gradient(circle at 91% 112%, rgba(81,235,172,.38), transparent 44%),
    linear-gradient(132deg, rgba(83,88,176,.97), rgba(40,45,112,.98) 43%, rgba(19,92,88,.97));
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(81,235,172,.2);
  content:"";
  pointer-events:none;
}
.cta-szklo > * { position:relative; z-index:1; }
.cta-szklo__glare {
  --glare-x:50%;
  --glare-y:0%;
  position:absolute;
  z-index:0;
  inset:2px;
  display:block;
  background:
    radial-gradient(390px circle at var(--glare-x) var(--glare-y), rgba(255,255,255,.74), rgba(91,241,178,.3) 24%, rgba(91,241,178,0) 58%);
  border-radius:22px;
  content:"";
  mix-blend-mode:screen;
  opacity:.2;
  pointer-events:none;
  transition:opacity .7s ease;
}
.cta-szklo:hover .cta-szklo__glare { opacity:.72; }
.cta-szklo__naglowek {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
}
.cta-szklo__meta {
  margin:0;
  color:rgba(239,255,248,.82);
  font-family:var(--naglowki);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.3;
  text-transform:uppercase;
}
.cta-szklo__glowna {
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px 18px;
}
.cta-szklo__tytul {
  margin:0;
  color:#fff;
  font-size:clamp(1.05rem, 1.7vw, 1.38rem);
  letter-spacing:-.02em;
  line-height:1.1;
}
.cta-szklo__cena { min-width:0; flex-wrap:wrap; gap:1px 8px; }
.cta-szklo__cena b {
  color:#fff;
  font-size:clamp(3rem, 4.6vw, 4rem);
  line-height:.95;
  text-shadow:0 5px 22px rgba(5,10,37,.34);
}
.cta-szklo__cena s { color:#c6cbe0; font-size:1.12rem; }
.cta-szklo__opis {
  max-width:56ch;
  margin:0;
  color:rgba(236,240,255,.8);
  font-size:.78rem;
  line-height:1.45;
}
.cta-szklo__stopka {
  width:100%;
  padding-top:1px;
}
.cta-szklo .btn {
  position:relative;
  z-index:0;
  isolation:isolate;
  width:100%;
  min-height:58px;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:0 16px 34px rgba(5,15,39,.38), 0 7px 18px rgba(44,194,137,.24);
}
.cta-szklo .btn::before {
  position:absolute;
  z-index:-2;
  inset:-300% -80%;
  background:conic-gradient(
    #effff8,
    #61f1b5 14%,
    #fff 27%,
    #8792d2 40%,
    #1f2458 52%,
    #fff 65%,
    #4bdc9f 80%,
    #effff8
  );
  animation:cta-metal 6s linear infinite reverse;
  content:"";
}
.cta-szklo .btn::after {
  position:absolute;
  z-index:-1;
  inset:2px;
  background:
    linear-gradient(180deg, rgba(107,239,181,.98), rgba(49,174,122,.98) 56%, rgba(35,137,96,.98));
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
  content:"";
}
.cta-szklo .btn:hover { background:transparent; box-shadow:0 20px 42px rgba(5,15,39,.42), 0 9px 24px rgba(44,194,137,.34); }
.cta-szklo .btn:hover::after { background:linear-gradient(180deg, #75f4be, #2ea975 58%, #23835e); }
.cta-szklo .pod-cta { order:0; color:#c7ccdd; text-align:center; padding:0; }
.cta-szklo .btn { order:1; }

@keyframes cta-metal {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce) {
  .cta-szklo__glare { display:none; }
}
.hero .nadtytul {
  width:fit-content;
  padding:9px 14px;
  justify-content:flex-start;
  background-color:var(--navy);
  background-image:
    var(--brand-grain),
    linear-gradient(112deg, rgba(32,34,77,.96), rgba(43,50,98,.94) 38%, rgba(38,121,111,.92) 72%, rgba(67,173,137,.92));
  background-position:center, center;
  background-size:130px 130px, cover;
  background-blend-mode:soft-light, normal;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(20,25,60,.22), inset 0 1px 0 rgba(255,255,255,.2);
  color:#fff;
  letter-spacing:.11em;
  backdrop-filter:blur(14px) saturate(1.35);
}
.hero .nadtytul::before {
  display:block;
  width:7px;
  height:7px;
  flex:0 0 auto;
  background:var(--green-l);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(81,235,172,.14);
}
.hero .nadtytul::after { display:none; }

/* ===================================================== jasny cennik */

.sekcja--cena { overflow:hidden; background:linear-gradient(180deg, #edf9f3 0%, #f9fcfa 100%); color:var(--ink); }
.sekcja--cena .kontener--waski { width:min(920px, calc(100% - 2 * var(--pad))); }
.sekcja--cena h2 { color:var(--navy); }
.sekcja--cena .etykieta { color:var(--green-tekst); }
.oferta {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--hero-green-deep);
  background-image:
    var(--brand-grain),
    radial-gradient(circle at 13% 4%, rgba(81,235,172,.3), transparent 32%),
    radial-gradient(circle at 88% 94%, rgba(255,255,255,.12), transparent 36%),
    linear-gradient(138deg, var(--hero-navy) 0%, var(--hero-green-deep) 52%, var(--hero-green) 100%);
  background-position:center, center, center, center;
  background-size:180px 180px, cover, cover, cover;
  background-blend-mode:soft-light, normal, normal, normal;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 32px 82px rgba(18,24,56,.28), inset 0 1px 0 rgba(255,255,255,.38);
  color:#e7eaf5;
}
.oferta::before {
  position:absolute;
  z-index:0;
  top:-190px;
  right:-140px;
  width:470px;
  height:470px;
  background:radial-gradient(circle, rgba(81,235,172,.28), rgba(81,235,172,0) 68%);
  border-radius:50%;
  content:"";
  pointer-events:none;
}
.oferta::after {
  position:absolute;
  z-index:0;
  top:-28%;
  bottom:-28%;
  left:-40%;
  width:16%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  opacity:0;
  transform:rotate(13deg) translateX(-180%);
  animation:oferta-polysk 7.5s 1.2s ease-in-out infinite;
  content:"";
  pointer-events:none;
}
.oferta > * { position:relative; z-index:1; }
.oferta__gora { display:grid; margin-bottom:28px; align-items:center; grid-template-columns:minmax(0, 1fr) 330px; gap:34px; }
.oferta__kicker { margin-bottom:10px; color:var(--green-l); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.oferta__nazwa { margin:0 0 12px; color:#fff; font-size:clamp(1.75rem, 4vw, 2.7rem); }
.oferta__nazwa span { color:var(--green-l); }
.oferta__lead { max-width:46ch; color:rgba(255,255,255,.88); }
.oferta__mockup {
  overflow:hidden;
  width:100%;
  background:#fff;
  border:4px solid rgba(255,255,255,.76);
  border-radius:18px;
  box-shadow:0 24px 54px rgba(11,18,52,.34), 0 0 0 1px rgba(81,235,172,.18);
  transform:none;
}
.oferta__mockup-pasek { display:flex; height:30px; padding:0 9px; align-items:center; gap:5px; background:#f2f4f3; color:#68717d; font-size:.58rem; }
.oferta__mockup-pasek i { width:6px; height:6px; background:#cdd2d0; border-radius:50%; }
.oferta__mockup-pasek i:first-child { background:var(--green); }
.oferta__mockup-pasek span { margin-left:auto; }
.oferta__mockup > img { width:100%; }
.oferta__lista { display:grid; margin-bottom:24px; grid-template-columns:repeat(2, 1fr); gap:10px 24px; }
.oferta .lista-check li { padding:14px 14px 14px 42px; margin:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; backdrop-filter:blur(12px); }
.oferta .lista-check li::before { left:14px; top:18px; background-color:var(--navy); border-radius:50%; }
.oferta .lista-check li b, .oferta .lista-check li span { display:block; }
.oferta .lista-check li b { color:#fff; font-size:.88rem; }
.oferta .lista-check li span { color:rgba(255,255,255,.76); font-size:.73rem; line-height:1.45; }
.oferta__decyzja { display:grid; padding:20px 24px; margin-bottom:14px; align-items:center; grid-template-columns:1fr 1fr; gap:24px; background:linear-gradient(145deg, rgba(56,62,139,.94), rgba(28,32,79,.96) 58%, rgba(18,70,75,.94)); border:1px solid rgba(255,255,255,.18); border-radius:20px; box-shadow:0 20px 46px rgba(10,16,45,.32), inset 0 1px 0 rgba(255,255,255,.22); }
.oferta__cena-wrap { border-right:1px solid rgba(255,255,255,.16); }
.oferta__dostep { display:flex; margin:0; flex-direction:column; }
.oferta__dostep b { color:#fff; font-size:1.05rem; }
.oferta__dostep span { color:#bfc4d9; font-size:.76rem; }
.oferta .pod-cta, .oferta__drobne, .oferta__omnibus { color:rgba(255,255,255,.78); }
.oferta__cena s { color:#3f5260; }
.oferta__cena { justify-content:flex-start; margin:0 0 4px; }
.oferta__cena b { color:#fff; }
.oferta__cena s { color:#aeb4cc; }
.oferta__termin { margin:0; color:#fff; text-align:left; font-size:.78rem; }
#odliczanie { margin-top:2px; color:var(--green-l); }
.oferta a { color:#fff; }
.oferta > .btn, .btn--lsni {
  position:relative;
  z-index:1;
  isolation:isolate;
  min-width:0;
  overflow:hidden;
  white-space:normal;
  background:transparent;
  border:0;
  color:#fff;
  box-shadow:0 18px 38px rgba(7,14,41,.38), 0 8px 22px rgba(49,197,140,.22);
}
.oferta > .btn::before, .btn--lsni::before {
  position:absolute;
  z-index:-2;
  inset:-300% -80%;
  background:conic-gradient(
    #effff8,
    #61f1b5 14%,
    #fff 27%,
    #8792d2 40%,
    #1f2458 52%,
    #fff 65%,
    #4bdc9f 80%,
    #effff8
  );
  animation:cta-metal 6s linear infinite reverse;
  content:"";
}
.oferta > .btn::after, .btn--lsni::after {
  position:absolute;
  z-index:-1;
  inset:2px;
  background:linear-gradient(180deg, rgba(107,239,181,.98), rgba(49,174,122,.98) 56%, rgba(35,137,96,.98));
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52);
  content:"";
}
.oferta > .btn:hover, .btn--lsni:hover { background:transparent; color:#fff; box-shadow:0 22px 46px rgba(7,14,41,.42), 0 10px 26px rgba(49,197,140,.32); }
.oferta > .btn:hover::after, .btn--lsni:hover::after { background:linear-gradient(180deg, #75f4be, #2ea975 58%, #23835e); }

@keyframes oferta-polysk {
  0%, 66% { opacity:0; transform:rotate(13deg) translateX(-180%); }
  74% { opacity:.46; }
  88%, 100% { opacity:0; transform:rotate(13deg) translateX(900%); }
}

@media (max-width:920px) {
  .hero { padding-block:40px 92px; }
  .hero__tresc { width:62%; max-width:720px; }
  .hero__wizual { inset:0; width:auto; margin:0; }
  .hero__foto { aspect-ratio:auto; }
  .hero__foto img { object-position:center 45%; }
  .oferta__gora { grid-template-columns:minmax(0, 1fr) 260px; gap:24px; }
}

@media (max-width:620px) {
  .hero { padding-block:30px 86px; }
  .hero__uklad { display:block; }
  .hero__tresc { position:relative; z-index:2; width:100%; }
  .hero h1 { font-size:clamp(1.62rem, 8.5vw, 2rem); }
  .hero .lead { margin-bottom:18px; font-size:1.05rem; line-height:1.55; }
  .hero__wizual { position:absolute; inset:16px 0 auto auto; width:104px; height:104px; padding:0; }
  .hero__wizual::before { display:none; }
  .hero__foto { width:104px; height:104px; aspect-ratio:1; border-radius:50%; box-shadow:0 14px 34px rgba(32,34,77,.18); }
  .hero__foto img { object-position:center 46%; }
  .hero__karta { display:none; }
  .hero .nadtytul { max-width:calc(100% - 112px); min-height:46px; }
  .cta-szklo { padding:13px; grid-template-columns:1fr; }
  .cta-szklo__cena { justify-content:center; }
  .cta-szklo__cena b { font-size:2.35rem; }
  .cta-szklo__cena s { font-size:.96rem; }
  .cta-szklo__cena span { font-size:.58rem; }
  .cta-szklo .pod-cta { grid-column:auto; }
  .stopka { padding-bottom:104px; }
  .stopka__srodek { flex-direction:column; gap:12px; }
  .stopka__linki { white-space:normal; }
  .podglad-skool { border-radius:18px; }
  .podglad-skool__pasek { grid-template-columns:auto 1fr; }
  .podglad-skool__pasek > img { justify-self:end; }
  .podglad-skool__pasek > span:last-child { display:none; }
  .podglad-skool__ekrany { padding:12px; grid-template-columns:1fr; gap:12px; }
  .podglad-skool__mockup--dodatki { margin-top:0; }
  .podglad-skool figcaption { padding:14px 16px 16px; font-size:.8rem; }
  .oferta__gora, .oferta__lista, .oferta__decyzja { grid-template-columns:1fr; }
  .oferta__mockup { width:min(340px, 100%); max-width:none; margin-inline:auto; }
  .oferta__cena-wrap { padding-bottom:16px; border-right:0; border-bottom:1px solid rgba(255,255,255,.16); }
}

/* Niższe laptopy: cały hero razem z ruchomą listwą mieści się w pierwszym widoku. */
@media (min-width:921px) and (max-height:900px) {
  .hero { padding-block:14px 58px; }
  .hero__uklad { gap:42px; }
  .hero h1 { margin-bottom:10px; font-size:clamp(2.55rem, 4.4vw, 3.85rem); }
  .hero .nadtytul { margin-bottom:8px; font-size:.68rem; }
  .hero .lead { margin-bottom:12px; font-size:1rem; line-height:1.48; }
  .hero__korzysci { margin-bottom:12px; }
  .hero__korzysci span { padding:5px 9px; font-size:.68rem; }
  .hero__wizual { padding:0; }
  .hero__foto { max-height:none; aspect-ratio:auto; }
  .cta-szklo { padding:9px; gap:5px; border-radius:19px; }
  .cta-szklo__cena b { font-size:2.65rem; }
  .cta-szklo__cena s { font-size:1rem; }
  .cta-szklo__cena span { font-size:.6rem; }
  .cta-szklo .pod-cta { font-size:.76rem; }
  .cta-szklo .btn { min-height:48px; padding-block:11px; font-size:.92rem; }
}