/* ==========================================================================
   EduPlaner 2026 — sekcje strony głównej, część II
   Autorka · cennik · materiały · formularz zamówienia · FAQ · rozwój · CTA

   Wartości przeniesione 1:1 ze stylów inline szablonu (linie 486–1149
   oraz renderVals 1904–2004). Wersja mobilna na końcu pliku.
   ========================================================================== */

/* ==========================================================================
   Elementy wspólne
   ========================================================================== */

.ep-link-podkreslony {
  font-size: 15.5px;
  color: var(--ep-fiolet-900);
  border-bottom: 1px solid rgba(107, 92, 165, 0.35);
  transition: color .2s ease, border-color .2s ease;
}
.ep-link-podkreslony:hover { color: var(--ep-koral-700); border-color: var(--ep-koral); }

.ep-pole { display: flex; flex-direction: column; gap: 7px; }
.ep-pole__etykieta {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-braz-ciemny);
}
.ep-input--duzy {
  padding: 12px 14px;
  font-size: 15px;
  background: linear-gradient(170deg, #FFFFFF, #FBF6EF);
  border: 1px solid rgba(59, 49, 86, 0.24);
  box-shadow: inset 0 2px 5px rgba(51, 43, 84, 0.09);
  min-height: 0;
}
textarea.ep-input--duzy { resize: vertical; font-family: var(--ep-font); color: var(--ep-tekst); }

.ep-blad { font-size: 14px; color: var(--ep-blad); margin: 0 0 14px; }
.ep-blad[hidden] { display: none; }

/* Pułapka na boty. Nie `display:none` — część automatów pomija pola ukryte
   w ten sposób. Wyjeżdża poza ekran i jest wyłączona z odczytu ekranowego. */
.ep-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Komunikat po wysyłce bez JavaScriptu */
.ep-komunikat {
  padding: 18px 22px;
  border-radius: var(--ep-promien-md);
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.6;
}
.ep-komunikat--ok {
  border: 1px solid var(--ep-fiolet-500);
  background: linear-gradient(155deg, #F5F0FC, #EDE5F8);
  color: var(--ep-fiolet-900);
}
.ep-komunikat--blad {
  border: 1px solid var(--ep-koral-300);
  background: var(--ep-koral-100);
  color: var(--ep-koral-800);
  margin-bottom: 26px;
}

.ep-druk__numer { margin: -8px 0 16px; font-size: 14px; color: var(--ep-braz-ciemny); }
.ep-druk__numer strong { color: var(--ep-fiolet-900); }
.ep-mat-przyjete__numer { margin: 10px 0 0; font-size: 14px; color: var(--ep-braz-ciemny); }
.ep-mat-przyjete__numer::before { content: 'Numer zgłoszenia: '; }
.ep-mat-przyjete__numer[hidden] { display: none; }

/* Wizytówka kontaktowa — sekcja autorki i panel potwierdzenia */
.ep-wizytowka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 620px;
  padding: 26px 28px;
  background: var(--ep-grad-karta-fiolet);
  border-color: #C6BAE6;
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 18px 34px -18px rgba(51, 43, 84, 0.3);
}
.ep-wizytowka__naglowek {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 12px;
}
.ep-wizytowka__wiersz { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ep-wizytowka__wiersz--gora { align-items: flex-start; }
.ep-wizytowka__wiersz svg { flex: none; }
.ep-wizytowka__przycisk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 18px;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.ep-wizytowka__wydawca { border-left: 1px solid rgba(59, 49, 86, 0.16); padding-left: 28px; }
.ep-wizytowka__logo { width: 38px; height: 38px; object-fit: contain; flex: none; }
.ep-wizytowka__nazwa { display: flex; flex-direction: column; gap: 3px; }
.ep-wizytowka__nazwa strong { font-size: 15.5px; line-height: 1.35; color: var(--ep-fiolet-900); }
.ep-wizytowka__nazwa > span { font-size: 13px; letter-spacing: 0.1em; color: var(--ep-braz-ciemny); }

/* Przyciski wyboru — terminy i formy zapłaty */
.ep-wybor { display: grid; gap: 12px; }
.ep-wybor--2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ep-wybor--3 { grid-template-columns: repeat(3, 1fr); }
.ep-wybor__opcja {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  border-radius: var(--ep-promien-md);
  transition: all .2s ease;
  border: 1px solid var(--ep-ramka-slaba);
  background: linear-gradient(160deg, #FFFFFF, #FBF6EF);
}
.ep-wybor__opcja--aktywna {
  border-color: var(--ep-fiolet);
  background: var(--ep-grad-panel);
  box-shadow: 0 10px 22px -12px rgba(51, 43, 84, 0.5);
}
.ep-wybor--2 .ep-wybor__opcja--aktywna { transform: none; }
.ep-wybor--3 .ep-wybor__opcja--aktywna { transform: translateY(-2px); }
.ep-wybor__kropka {
  width: 13px; height: 13px;
  margin-top: 4px;
  flex: none;
  border: 1px solid rgba(59, 49, 86, 0.38);
  background: transparent;
}
.ep-wybor__kropka--okragla { border-radius: 50%; }
.ep-wybor__opcja--aktywna .ep-wybor__kropka {
  border-color: var(--ep-fiolet);
  background: var(--ep-fiolet);
  box-shadow: 0 0 0 3px rgba(145, 130, 198, 0.22);
}
.ep-wybor--2 .ep-wybor__opcja--aktywna .ep-wybor__kropka { box-shadow: none; }
.ep-wybor__tresc { display: flex; flex-direction: column; gap: 3px; }
.ep-wybor__nazwa { font-weight: 700; font-size: 15.5px; }
.ep-wybor--3 .ep-wybor__nazwa { font-size: 16px; }
.ep-wybor__opis { font-size: 12.5px; color: var(--ep-braz-ciemny); }

/* ==========================================================================
   1. Autorka
   ========================================================================== */

.ep-autorka { padding-top: 88px; }
.ep-autorka__uklad { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 56px; align-items: start; }

.ep-autorka__portret {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ep-powierzchnia);
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.08),
              0 32px 58px -22px rgba(51, 43, 84, 0.44);
}
.ep-autorka__portret img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }

.ep-autorka__imie { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 20px; }
.ep-autorka__cytat {
  font-size: 21px;
  line-height: 1.3;
  color: #544778;
  margin: 0 0 22px;
  max-width: 40ch;
  font-weight: 600;
}
.ep-autorka__akapit {
  margin: 0 0 16px;
  color: var(--ep-akapit);
  font-size: 16px;
  line-height: 1.65;
  max-width: 62ch;
}
.ep-autorka__podpis-blok { margin: 0 0 26px; }
.ep-autorka__podpis-wstep { font-size: 15px; color: var(--ep-akapit); margin-bottom: 6px; }
.ep-autorka__podpis {
  font-family: var(--ep-font-podpis);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ep-podpis);
}
.ep-autorka__stopka {
  margin: 0 0 28px;
  color: var(--ep-braz-ciemny);
  font-size: 15px;
  line-height: 1.6;
}

/* ==========================================================================
   2. Cennik
   ========================================================================== */

.ep-cennik { padding-top: 88px; }

.ep-cennik__karta {
  background: linear-gradient(152deg, #F6F1FC 0%, #EDE5F8 52%, #F5EADF 100%);
  border-color: var(--ep-fiolet-500);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 52px;
  padding: 48px 46px 50px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
              0 40px 70px -26px rgba(51, 43, 84, 0.45),
              0 80px 110px -70px rgba(51, 43, 84, 0.4);
}
.ep-cennik__nadtytul {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-braz);
  margin-bottom: 12px;
}
.ep-cennik__cena { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ep-cennik__kwota {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ep-cennik__jednostka { font-size: 20px; color: var(--ep-braz-ciemny); }
.ep-cennik__nota { font-size: 13.5px; color: var(--ep-braz-ciemny); margin-bottom: 30px; line-height: 1.55; }
.ep-cennik__cta { width: 100%; padding: 15px 22px; font-size: 15px; letter-spacing: 0.04em; }

.ep-cennik__zawiera {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  align-content: start;
}
.ep-cennik__zawiera-naglowek {
  grid-column: span 2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
}
.ep-cennik__pozycja { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: #3B3229; }
.ep-cennik__pozycja > span:first-child { color: var(--ep-fiolet-500); flex: none; }

/* --- Panel przedsprzedaży --- */
.ep-przedsprzedaz {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #FDF3EC, #FBE3D5);
  border-color: var(--ep-koral);
  padding: 26px 30px 28px;
  margin-top: 26px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.06),
              0 22px 40px -20px rgba(122, 36, 4, 0.3);
}
.ep-przedsprzedaz__wstega {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--ep-koral-400), var(--ep-koral));
}
.ep-przedsprzedaz__tresc { padding-left: 8px; }
.ep-przedsprzedaz__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 10px;
}
.ep-przedsprzedaz__tytul { font-size: 25px; margin: 0 0 12px; }
.ep-przedsprzedaz__kroki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 14px;
}
.ep-przedsprzedaz__krok {
  border-radius: var(--ep-promien-md);
  border: 1px solid rgba(122, 36, 4, 0.22);
  background: rgba(255, 255, 255, 0.75);
  padding: 14px 16px;
}
.ep-przedsprzedaz__krok-numer {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ep-koral-700);
  margin-bottom: 6px;
}
.ep-przedsprzedaz__krok-tresc { font-size: 14.5px; line-height: 1.5; color: var(--ep-lista); }
.ep-przedsprzedaz__akapit {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ep-braz-ciemny);
}
.ep-przedsprzedaz__cta { padding: 13px 22px; font-size: 15px; letter-spacing: 0.04em; }

.ep-harmonogram {
  border-radius: var(--ep-promien-md);
  border: 1px solid rgba(122, 36, 4, 0.22);
  background: rgba(255, 255, 255, 0.8);
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}
.ep-harmonogram__naglowek {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 12px;
}
.ep-harmonogram__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ep-harmonogram__pozycja { display: flex; gap: 12px; }
.ep-harmonogram__wstega {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ep-koral-400), var(--ep-koral));
  flex: none;
}
.ep-harmonogram__tresc { display: flex; flex-direction: column; gap: 3px; }
.ep-harmonogram__tresc strong { font-size: 15.5px; color: var(--ep-fiolet-900); }
.ep-harmonogram__tresc span { font-size: 14px; line-height: 1.5; color: var(--ep-akapit); }

/* ==========================================================================
   3. Materiały (produkty)
   ========================================================================== */

.ep-produkty { padding-top: 76px; }
.ep-produkty__glowa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.ep-produkty__tytul { max-width: 26ch; margin: 0; }
.ep-produkty__lead-obok {
  max-width: 34ch;
  color: var(--ep-akapit);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}
.ep-produkty__nota { margin: 20px 0 0; font-size: 13px; color: var(--ep-braz-ciemny); }
.ep-produkty__siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* --- Filtry kategorii ---
   Zwykłe przyciski, nie odnośniki: filtrowanie dzieje się na miejscu,
   bez zmiany adresu. `aria-pressed` niesie stan dla czytników ekranu. */
.ep-filtry {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ep-filtr {
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ep-font-naglowek);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border: 1px solid var(--ep-ramka-slaba);
  background: #FFFFFF;
  color: var(--ep-fiolet-800);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ep-filtr:hover { background: var(--ep-fiolet-100); transform: translateY(-1px); }
.ep-filtr--aktywny,
.ep-filtr--aktywny:hover {
  border-color: var(--ep-fiolet-600);
  background: linear-gradient(160deg, #8676BE, #6B5CA5);
  color: var(--ep-na-koralu);
}

/* --- Karta produktu ---
   Zdjęcie na górze, treść pod spodem, licznik na samym dole. `flex:1`
   na opisie wyrównuje stopki kart w rzędzie, nawet gdy tytuły mają
   różną liczbę linii. */
.ep-produkt {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  padding: 0;
  border-color: rgba(59, 49, 86, 0.2);
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 18px 34px -16px rgba(72, 55, 40, 0.26);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.ep-produkt:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(51, 43, 84, 0.07),
              0 30px 52px -18px rgba(72, 55, 40, 0.34);
}
.ep-produkt--wybrany {
  border-color: var(--ep-fiolet-500);
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 24px 44px -18px rgba(72, 55, 40, 0.36);
}
.ep-produkt[hidden] { display: none; }

/* Wstęga biegnie przez całą kartę, także po zdjęciu — ten sam znak
   rozpoznawczy co w krokach przedsprzedaży i harmonogramie. Musi być
   nad zdjęciem, stąd z-index. */
.ep-produkt__wstega {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  z-index: 2;
  background: var(--ep-grad-pion);
}

.ep-produkt__ekran {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid rgba(59, 49, 86, 0.16);
  background: #F7F3EE;
}
.ep-produkt__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Okładki broszur są pionowe (A4) — kadr od góry pokazuje tytuł
     i grafikę okładki, kadr środkowy trafiał w sam tekst. */
  object-position: center top;
  display: block;
}
.ep-produkt__zastepnik {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Neutralne, ciepłe paski zamiast fioletu — wstęga po lewej ma być
     najmocniejszym akcentem karty, a nie ginąć w tle zastępnika. */
  background: repeating-linear-gradient(
    135deg,
    #F8F4EF 0 11px,
    #F1EBE3 11px 22px
  );
  color: var(--ep-braz-ciemny);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 16px;
}
.ep-produkt__zastepnik svg { opacity: .55; }

.ep-produkt__odznaka {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(51, 43, 84, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F1EAFB;
}

.ep-produkt__tresc {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px 26px;
}
.ep-produkt__tytul {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ep-tekst);
  margin-bottom: 8px;
}
.ep-produkt__opis {
  margin: 0 0 16px;
  flex: 1;
  color: var(--ep-braz-ciemny);
  font-size: 13.5px;
  line-height: 1.55;
}
.ep-produkt__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ep-produkt__cena {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ep-fiolet-800);
}
.ep-produkt__ilosc { display: flex; align-items: center; gap: 6px; }
.ep-produkt__krok {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--ep-ramka-slaba);
  background: #FFFFFF;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ep-fiolet-300);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ep-produkt--wybrany .ep-produkt__krok { color: var(--ep-fiolet-800); }
.ep-produkt__krok--plus {
  border-color: var(--ep-fiolet-500);
  background: linear-gradient(160deg, #EFE7FB, #DFD4F2);
  color: var(--ep-fiolet-800);
  font-weight: 700;
}
.ep-produkt__krok--plus:hover { background: #E4D9F6; }
.ep-produkt__sztuk {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 17px;
  min-width: 22px;
  text-align: center;
  color: var(--ep-braz-ciemny);
}
.ep-produkt--wybrany .ep-produkt__sztuk { color: var(--ep-fiolet-900); }

/* --- Pozycja zapowiadana („wkrótce") ---
   Karta zostaje w siatce, żeby było widać, co nadchodzi, ale wygląda
   jak nieaktywna: cały obraz przyciemniony zasłoną, odznaka „Wkrótce"
   na samym środku, teksty przygaszone, zamiast licznika etykieta.
   Przycisków nie ma w ogóle — nie da się „kliknąć w zablokowane",
   bo nie ma czego kliknąć. */
.ep-produkt--wkrotce { border-color: rgba(59, 49, 86, 0.12); }
.ep-produkt--wkrotce:hover { transform: none; }
.ep-produkt--wkrotce .ep-produkt__wstega { opacity: .3; }
.ep-produkt--wkrotce .ep-produkt__foto { filter: grayscale(1); }
.ep-produkt--wkrotce .ep-produkt__tytul,
.ep-produkt--wkrotce .ep-produkt__opis { color: var(--ep-braz-ciemny); opacity: .62; }
.ep-produkt--wkrotce .ep-produkt__cena { color: var(--ep-braz-ciemny); opacity: .55; }

/* Napis „Zdjęcie ze szkolenia" prześwitywał spod zasłony i gryzł się
   z odznaką na środku — na zapowiedzi zostaje samo pasiaste tło. */
.ep-produkt--wkrotce .ep-produkt__zastepnik { color: transparent; }
.ep-produkt--wkrotce .ep-produkt__zastepnik svg { display: none; }

/* Zasłona przykrywa i zdjęcie, i pusty zastępnik — brzydka pustka znika
   pod jednolitym przyciemnieniem. Odznaki muszą stać nad nią. */
.ep-produkt--wkrotce .ep-produkt__ekran::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(51, 43, 84, 0.45);
}
.ep-produkt--wkrotce .ep-produkt__odznaka { z-index: 2; }

.ep-produkt__odznaka--wkrotce {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 9px 20px;
  font-size: 12px;
  background: rgba(38, 31, 62, 0.88);
  color: #FBF6F0;
  box-shadow: 0 10px 24px -10px rgba(20, 15, 40, 0.6);
}

.ep-produkt__wkrotce {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ep-braz-ciemny);
  opacity: .7;
}

.ep-produkty__pusto {
  margin: 4px 0 0;
  padding: 28px 24px;
  border-radius: var(--ep-promien-md);
  border: 1px dashed var(--ep-ramka-slaba);
  text-align: center;
  color: var(--ep-braz-ciemny);
  font-size: 14.5px;
}
.ep-produkty__pusto[hidden] { display: none; }

/* --- Formularz zamówienia materiałów --- */
.ep-mat-form {
  margin-top: 26px;
  background: linear-gradient(160deg, #FFFFFF 0%, #FCF7F1 100%);
  padding: 32px 32px 34px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.05),
              0 24px 44px -20px rgba(51, 43, 84, 0.3);
}
.ep-mat-form__przelacznik {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--ep-tekst);
}
.ep-mat-form__naglowek { display: flex; flex-direction: column; gap: 6px; }
.ep-mat-form__naglowek .ep-eyebrow { margin-bottom: 0; font-weight: 700; }
.ep-mat-form__tytul {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 26px;
  letter-spacing: -0.01em;
}
.ep-mat-form__znak {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--ep-koral-700);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--ep-koral-300);
  background: var(--ep-koral-100);
}
.ep-mat-form__body[hidden] { display: none; }
.ep-mat-form__lead {
  margin: 18px 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ep-akapit);
  max-width: 62ch;
}
.ep-mat-form__pola { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.ep-mat-form__uwagi { margin-bottom: 20px; }
.ep-mat-form__stopka {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ep-mat-form__suma { display: flex; align-items: baseline; gap: 10px; }
.ep-mat-form__kwota {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ep-fiolet-900);
}
.ep-mat-form__wyslij { padding: 14px 26px; font-size: 15px; letter-spacing: 0.04em; }

.ep-koszyk { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.ep-koszyk__glowa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 18px;
  transition: all .2s ease;
  border: 1px solid rgba(59, 49, 86, 0.2);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ep-tekst);
}
.ep-koszyk__glowa[aria-expanded="true"],
.ep-koszyk__grupa--wybrana .ep-koszyk__glowa {
  border-color: var(--ep-fiolet);
  background: var(--ep-grad-panel);
  box-shadow: 0 8px 18px -12px rgba(51, 43, 84, 0.45);
}
.ep-koszyk__glowa .ep-grupa__znak { color: var(--ep-fiolet-500); font-size: 18px; }
.ep-koszyk__nazwa { flex: 1; }
.ep-koszyk__licznik {
  font-family: var(--ep-font);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ep-braz-ciemny);
}
.ep-koszyk__lista { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px; }
.ep-koszyk__lista[hidden] { display: none; }
.ep-koszyk__wiersz {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  transition: all .2s ease;
  border: 1px solid rgba(59, 49, 86, 0.16);
  background: rgba(255, 255, 255, 0.72);
}
.ep-koszyk__wiersz--wybrany {
  border-color: var(--ep-fiolet);
  background: linear-gradient(160deg, #F7F3FD, #EFE8F9);
}
.ep-koszyk__pozycja { flex: 1; font-size: 14px; line-height: 1.4; }
.ep-koszyk__cena {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 16px;
  white-space: nowrap;
  color: var(--ep-fiolet-800);
}
.ep-koszyk__ilosc { display: flex; align-items: center; gap: 6px; flex: none; }
.ep-koszyk__krok {
  width: 26px; height: 26px;
  border: 1px solid rgba(59, 49, 86, 0.3);
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--ep-fiolet-800);
}
.ep-koszyk__krok:hover { background: #EAE1F6; }
.ep-koszyk__licznik-sztuk {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 17px;
  min-width: 22px;
  text-align: center;
  color: #9a9188;
}
.ep-koszyk__wiersz--wybrany .ep-koszyk__licznik-sztuk { color: var(--ep-fiolet-900); }

.ep-mat-przyjete {
  border-radius: var(--ep-promien-lg);
  border: 1px solid var(--ep-fiolet-500);
  background: linear-gradient(155deg, #F5F0FC, #EDE5F8);
  padding: 26px 28px;
  margin-top: 26px;
}
.ep-mat-przyjete[hidden] { display: none; }
.ep-mat-przyjete__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 8px;
}
.ep-mat-przyjete__tytul { font-size: 24px; margin: 0 0 8px; }
.ep-mat-przyjete__opis { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ep-akapit); max-width: 62ch; }

/* ==========================================================================
   4. Formularz zamówienia
   ========================================================================== */

.ep-zam-form { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: start; }

.ep-zam-form__pola {
  background: linear-gradient(160deg, #FFFFFF 0%, #FCF7F1 100%);
  padding: 36px 34px 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.05),
              0 28px 52px -22px rgba(51, 43, 84, 0.34);
}
.ep-pole--pelna { grid-column: span 2; }
.ep-zam-form__aplikacja { grid-column: span 2; }
.ep-zam-form__aplikacja .ep-pole__etykieta { display: block; margin-bottom: 12px; }
.ep-zam-form__podnaglowek { display: block; margin-bottom: 12px; }

.ep-zam-aplikacja {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--ep-promien-md);
  border: 1px solid var(--ep-fiolet-500);
  background: linear-gradient(160deg, #F6F1FC, #EDE5F8);
}
.ep-zam-aplikacja__opis { display: flex; flex-direction: column; gap: 4px; }
.ep-zam-aplikacja__opis > strong { font-size: 16px; color: var(--ep-fiolet-900); }
.ep-zam-aplikacja__opis > span { font-size: 13px; color: var(--ep-braz-ciemny); }
.ep-zam-aplikacja__opis > span strong { color: var(--ep-fiolet-800); }
.ep-zam-aplikacja__cena {
  white-space: nowrap;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 22px;
  color: var(--ep-fiolet-900);
}

.ep-podsumowanie {
  background: linear-gradient(155deg, #F5F0FC 0%, #EBE3F7 100%);
  border-color: var(--ep-fiolet-500);
  padding: 34px 30px 36px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
              0 34px 60px -24px rgba(51, 43, 84, 0.42);
}
.ep-podsumowanie__naglowek {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ep-braz);
  margin-bottom: 12px;
}
.ep-podsumowanie__moduly { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ep-modul-opcja {
  padding: 11px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 16px;
  transition: all .2s ease;
  border: 1px solid var(--ep-ramka-slaba);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ep-tekst);
}
.ep-modul-opcja--aktywna {
  border-color: var(--ep-fiolet);
  background: var(--ep-fiolet);
  color: var(--ep-tlo);
  box-shadow: 0 8px 18px -10px rgba(51, 43, 84, 0.5);
}
.ep-podsumowanie__licencja {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14.5px;
  color: var(--ep-akapit);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(59, 49, 86, 0.2);
}
.ep-podsumowanie__cena { white-space: nowrap; font-weight: 700; color: var(--ep-fiolet-900); }
.ep-podsumowanie__wybrane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  font-size: 14px;
  color: var(--ep-akapit);
}
.ep-podsumowanie__wybrane[hidden] { display: none; }
.ep-podsumowanie__wybrane > div { display: flex; justify-content: space-between; gap: 16px; }
.ep-podsumowanie__wybrane span:last-child { white-space: nowrap; }
.ep-podsumowanie__razem {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(59, 49, 86, 0.2);
}
.ep-podsumowanie__razem-etykieta {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 20px;
}
.ep-podsumowanie__kwota {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  font-size: 32px;
  letter-spacing: -0.02em;
}

.ep-zam-form__stopka {
  grid-column: span 2;
  background: linear-gradient(160deg, #FFFFFF 0%, #FCF7F1 100%);
  padding: 26px 30px 28px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.05),
              0 22px 42px -20px rgba(51, 43, 84, 0.3);
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.ep-zam-form__zgoda-blok { flex: 1; min-width: 280px; }
.ep-zgoda {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3B3229;
  margin-bottom: 10px;
  cursor: pointer;
}
.ep-zgoda input { margin-top: 3px; accent-color: var(--ep-fiolet-500); flex: none; }
.ep-zam-form__nota { font-size: 12.5px; color: var(--ep-braz-ciemny); line-height: 1.55; }
.ep-zam-form__wyslij { flex: none; padding: 16px 30px; font-size: 16px; letter-spacing: 0.04em; }

/* --- Panel po wysłaniu --- */
.ep-przyjete[hidden] { display: none; }
.ep-przyjete__wnetrze {
  background: linear-gradient(155deg, #F5F0FC 0%, #EFE7F8 60%, #F6EBE0 100%);
  padding: 48px 44px;
  box-shadow: 0 34px 60px -28px rgba(51, 43, 84, 0.4);
}
.ep-przyjete__glowa {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ep-przyjete__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 10px;
}
.ep-przyjete__tytul { font-size: 34px; margin: 0; }
.ep-przyjete__przelacznik {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(59, 49, 86, 0.28);
  background: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--ep-fiolet-800);
  transition: background .2s ease, transform .2s ease;
}
.ep-przyjete__przelacznik:hover { background: var(--ep-fiolet-200); transform: translateY(-1px); }
.ep-przyjete__body[hidden] { display: none; }
.ep-przyjete__wstep {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ep-akapit);
  max-width: 62ch;
}
.ep-przyjete__mailto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 14px 24px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
.ep-wizytowka--zamowienie {
  max-width: 660px;
  padding: 24px 26px;
  gap: 26px;
  background: linear-gradient(158deg, #FFFFFF 0%, #F7F3FD 100%);
}
.ep-wizytowka--zamowienie .ep-wizytowka__wydawca { padding-left: 26px; }

.ep-zaplata {
  border-radius: var(--ep-promien-lg);
  border: 1px solid var(--ep-fiolet-500);
  background: rgba(255, 255, 255, 0.8);
  padding: 22px 24px 24px;
  margin-bottom: 26px;
  max-width: 760px;
}
.ep-zaplata__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 6px;
}
.ep-zaplata__tytul { font-size: 22px; margin: 0 0 6px; }
.ep-zaplata__kwota-blok {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--ep-promien-md);
  border: 1px solid rgba(59, 49, 86, 0.2);
  background: linear-gradient(160deg, #F6F1FC, #EDE5F8);
}
.ep-zaplata__kwota-opis { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ep-braz-ciemny); }
.ep-zaplata__kwota-etykieta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-braz);
}
.ep-zaplata__kwota {
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-mocna);
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ep-fiolet-900);
}
.ep-zaplata__forma-etykieta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ep-braz);
  margin-bottom: 10px;
}
.ep-zaplata__forma-opis { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--ep-akapit); }
.ep-zaplata__stopka { font-size: 13px; color: var(--ep-braz-ciemny); margin-top: 14px; line-height: 1.55; }

/* --- Druk potwierdzenia --- */
.ep-druk {
  border-radius: var(--ep-promien-lg);
  border: 1px solid var(--ep-ramka-slaba);
  background: #FFFFFF;
  padding: 34px 36px 36px;
  margin-bottom: 26px;
  max-width: 760px;
}
.ep-druk__glowa {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--ep-fiolet);
}
.ep-druk__producent { display: flex; align-items: center; gap: 12px; }
.ep-druk__producent > span { display: flex; flex-direction: column; line-height: 1.15; }
.ep-druk__producent strong { font-size: 17px; color: var(--ep-fiolet-900); }
.ep-druk__producent span span { font-size: 12.5px; color: var(--ep-braz-ciemny); }
.ep-druk__logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.ep-druk__kontakt { text-align: right; font-size: 12.5px; color: var(--ep-braz-ciemny); line-height: 1.5; }
.ep-druk__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 6px;
}
.ep-druk__tytul { font-size: 22px; margin: 0 0 18px; }
.ep-druk__dane { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px; margin-bottom: 18px; }
.ep-druk__pole { display: flex; flex-direction: column; gap: 3px; }
.ep-druk__etykieta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-braz);
}
.ep-druk__wartosc { font-size: 14.5px; color: var(--ep-fiolet-900); }
.ep-druk__akapit { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--ep-akapit); }
.ep-druk__podpisy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 22px; }
.ep-druk__podpisy > div {
  border-top: 1px solid rgba(59, 49, 86, 0.35);
  padding-top: 8px;
  font-size: 12px;
  color: var(--ep-braz-ciemny);
}
.ep-druk__przycisk {
  padding: 12px 22px;
  font-size: 14.5px;
  background: linear-gradient(165deg, #FFFFFF, #F7F1EA);
  border-color: rgba(59, 49, 86, 0.28);
  box-shadow: 0 6px 14px -8px rgba(51, 43, 84, 0.35);
  transition: transform .2s ease;
}
.ep-druk__przycisk:hover { transform: translateY(-2px); }

/* ==========================================================================
   5. FAQ
   ========================================================================== */

.ep-faq {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(59, 49, 86, 0.16);
  border: 1px solid rgba(59, 49, 86, 0.16);
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.05),
              0 26px 48px -24px rgba(51, 43, 84, 0.34);
}
.ep-faq__pozycja { background: linear-gradient(165deg, #FFFFFF, #FBF6EF); }
.ep-faq__pytanie {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ep-font-naglowek);
  font-weight: var(--ep-waga-naglowek);
  font-size: 20px;
  color: #2C2521;
  transition: background .2s ease;
}
.ep-faq__pytanie:hover { background: #F4F0FA; }
.ep-faq__pytanie .ep-grupa__znak { color: var(--ep-fiolet-500); font-size: 20px; width: 16px; }
.ep-faq__odpowiedz {
  padding: 0 24px 26px 60px;
  max-width: 80ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4A3F38;
}
.ep-faq__odpowiedz[hidden] { display: none; }

/* ==========================================================================
   6. Rozwój
   ========================================================================== */

.ep-rozwoj__tytul { max-width: 30ch; }
.ep-rozwoj__lead  { max-width: 64ch; }
.ep-rozwoj__uklad { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 44px; align-items: start; }
.ep-rozwoj__karty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.ep-karta-rozwoju {
  background: var(--ep-grad-karta-fiolet);
  border-color: #C6BAE6;
  padding: 26px 24px 28px;
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 14px 28px -16px rgba(51, 43, 84, 0.24);
}
.ep-karta-rozwoju__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 10px;
}
.ep-karta-rozwoju__tytul { font-size: 21px; margin: 0 0 8px; }
.ep-karta-rozwoju__opis { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ep-akapit); }

.ep-wspolpraca {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  background: linear-gradient(152deg, #F6F1FC 0%, #EDE5F8 55%, #F6EBE0 100%);
  border-color: var(--ep-fiolet-500);
  padding: 30px 32px 32px;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
              0 30px 56px -24px rgba(51, 43, 84, 0.42);
}
.ep-wspolpraca__wstega {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--ep-grad-pion);
}
.ep-wspolpraca__tytul { font-size: 26px; margin: 0 0 10px; padding-left: 8px; }
.ep-wspolpraca__opis {
  margin: 0 0 18px;
  padding-left: 8px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ep-akapit);
  max-width: 60ch;
}
.ep-wspolpraca__cta { margin-left: 8px; padding: 13px 22px; font-size: 15px; letter-spacing: 0.04em; }

.ep-awatar {
  overflow: hidden;
  background: linear-gradient(160deg, #F4EFFC, #EDE5F8);
  border-color: var(--ep-fiolet-500);
  padding: 0;
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.07),
              0 30px 56px -24px rgba(51, 43, 84, 0.42);
}
.ep-awatar__ramka {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #F4EFFC, #EDE5F8);
}
.ep-awatar__ramka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ep-awatar__tresc { padding: 18px 20px 22px; }
.ep-awatar__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ep-koral-700);
  margin-bottom: 6px;
}
.ep-awatar__opis { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ep-akapit); }

/* ==========================================================================
   7. Końcowe wezwanie do działania
   ========================================================================== */

.ep-cta-sekcja { padding: 80px var(--ep-kontener-pad) 96px; }
.ep-cta {
  position: relative;
  overflow: hidden;
  background: var(--ep-grad-ciemny);
  border-color: var(--ep-fiolet-800);
  color: var(--ep-na-ciemnym);
  padding: 60px 56px;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
              0 44px 76px -30px rgba(36, 30, 60, 0.6);
}
.ep-cta__poswiata {
  position: absolute;
  right: -90px; top: -90px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 69, 10, 0.28), rgba(232, 69, 10, 0) 68%);
  pointer-events: none;
}
.ep-cta__tytul {
  position: relative;
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--ep-na-ciemnym);
}
.ep-cta__opis { margin: 0; font-size: 17px; line-height: 1.6; color: #D6CCEC; max-width: 56ch; }
.ep-cta__przyciski { display: flex; flex-direction: column; gap: 12px; }
.ep-cta__glowny {
  padding: 15px 24px;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.55), 0 3px 0 var(--ep-koral-700);
}
.ep-cta__drugi {
  border-color: rgba(247, 242, 234, 0.35);
  color: var(--ep-na-ciemnym);
  padding: 15px 24px;
  font-size: 15px;
}
.ep-cta__drugi:hover { color: var(--ep-na-ciemnym); background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   8. Wersja mobilna — do 1000 px
   ========================================================================== */

@media (max-width: 1000px) {

  /* --- Autorka --- */
  .ep-autorka { padding-top: 44px; }
  .ep-autorka__uklad { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ep-autorka__portret { max-width: 320px; }
  .ep-autorka__imie { font-size: 26px; }
  .ep-autorka__cytat { font-size: 18px; }
  .ep-autorka__podpis { font-size: 30px; }
  .ep-wizytowka { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 18px; }
  .ep-wizytowka__wydawca { border-left: 0; border-top: 1px solid rgba(59, 49, 86, 0.16); padding-left: 0; padding-top: 18px; }
  .ep-wizytowka__przycisk { width: 100%; }

  /* --- Cennik --- */
  .ep-cennik { padding-top: 44px; }
  .ep-cennik__karta { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 20px 28px; }
  .ep-cennik__kwota { font-size: 48px; }
  .ep-cennik__zawiera { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ep-cennik__zawiera-naglowek { grid-column: span 1; }
  .ep-przedsprzedaz { padding: 20px 18px 22px; }
  .ep-przedsprzedaz__tytul { font-size: 21px; }
  .ep-przedsprzedaz__kroki { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ep-harmonogram__siatka { grid-template-columns: minmax(0, 1fr); }
  .ep-przedsprzedaz__cta { width: 100%; }

  /* --- Materiały --- */
  .ep-produkty { padding-top: 44px; }
  .ep-produkty__glowa { margin-bottom: 24px; gap: 16px; }
  .ep-produkty__lead-obok { max-width: none; }
  /* Karta produktu jest o połowę niższa od dawnego kafla kategorii, więc
     na tablecie mieszczą się dwie w rzędzie bez ścisku. Do jednej kolumny
     schodzimy dopiero poniżej 700 px — niżej w tym pliku. */
  .ep-produkty__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  /* Pigułki filtrów zawijają się do dwóch rzędów — celowo bez przewijania
     w poziomie, żeby żadna kategoria nie chowała się poza kadrem. */
  .ep-filtry { gap: 8px; margin-bottom: 22px; }
  .ep-filtr { padding: 9px 15px; font-size: 13px; }
  .ep-produkt__tresc { padding: 20px 18px 22px 22px; }
  .ep-produkt__tytul { font-size: 18px; }
  /* Na telefonie klika się palcem, nie kursorem — 30 px to za mało. */
  .ep-produkt__krok { width: 38px; height: 38px; font-size: 18px; }
  .ep-produkt__sztuk { font-size: 18px; min-width: 26px; }
  .ep-produkt:hover { transform: none; }
  .ep-mat-form { padding: 22px 18px 24px; }
  .ep-mat-form__tytul { font-size: 21px; }
  .ep-mat-form__przelacznik { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ep-mat-form__pola { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ep-mat-form__stopka { flex-direction: column; align-items: stretch; gap: 16px; }
  .ep-mat-form__wyslij { width: 100%; }
  .ep-koszyk__wiersz { flex-wrap: wrap; gap: 10px; }
  .ep-koszyk__pozycja { flex: 1 1 100%; }

  /* --- Formularz zamówienia --- */
  .ep-zam-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ep-zam-form__pola { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 24px; gap: 16px; }
  .ep-pole--pelna,
  .ep-zam-form__aplikacja { grid-column: span 1; }
  .ep-zam-aplikacja { flex-direction: column; gap: 10px; }
  .ep-wybor--2,
  .ep-wybor--3 { grid-template-columns: minmax(0, 1fr); }
  .ep-podsumowanie { padding: 24px 18px 26px; }
  .ep-podsumowanie__kwota { font-size: 26px; }
  .ep-zam-form__stopka { grid-column: span 1; padding: 20px 18px 22px; flex-direction: column; align-items: stretch; gap: 18px; }
  .ep-zam-form__wyslij { width: 100%; }

  .ep-przyjete__wnetrze { padding: 26px 18px 30px; }
  .ep-przyjete__tytul { font-size: 25px; }
  .ep-zaplata { padding: 18px 16px 20px; }
  .ep-zaplata__kwota { font-size: 24px; }
  .ep-druk { padding: 22px 18px 24px; }
  .ep-druk__dane { grid-template-columns: minmax(0, 1fr); }
  .ep-druk__podpisy { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ep-druk__kontakt { text-align: left; }
  .ep-przyjete__mailto { width: 100%; }

  /* --- FAQ --- */
  .ep-faq__pytanie { font-size: 17px; padding: 18px 16px; gap: 14px; }
  .ep-faq__odpowiedz { padding: 0 16px 20px 46px; font-size: 15px; }

  /* --- Rozwój --- */
  .ep-rozwoj__uklad { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ep-rozwoj__karty { grid-template-columns: minmax(0, 1fr); }
  .ep-wspolpraca { grid-column: span 1; padding: 24px 20px 26px; }
  .ep-wspolpraca__tytul { font-size: 22px; }
  .ep-wspolpraca__cta { width: calc(100% - 8px); }
  .ep-awatar__ramka { aspect-ratio: 4 / 3; }

  /* --- CTA --- */
  .ep-cta-sekcja { padding: 40px var(--ep-kontener-pad) 56px; }
  .ep-cta { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px 34px; }
  .ep-cta__tytul { font-size: 26px; }
  .ep-cta__opis { font-size: 15.5px; }
  .ep-cta__poswiata { display: none; }
}

/* Telefon: karty produktów schodzą do jednej kolumny. Osobny próg, bo
   siatka materiałów jest jedyną, która na tablecie utrzymuje dwie. */
@media (max-width: 700px) {
  .ep-produkty__siatka { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Osobna strona materiału (E12)

   Włączana przełącznikiem przy produkcie. Układ czyta się z góry na dół:
   skąd wróciłam → co to jest → ile trwa i dla kogo → z czego się składa
   → ile kosztuje i jak zamówić.
   ========================================================================== */

.ep-material { padding-top: 44px; padding-bottom: 72px; }

.ep-material__powrot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ep-braz-ciemny);
  transition: color .2s ease, gap .2s ease;
}
.ep-material__powrot:hover { color: var(--ep-koral-700); gap: 12px; }

.ep-material__glowa {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 52px;
}

.ep-material__glowa--bez-foto { grid-template-columns: minmax(0, 1fr); }

.ep-material__tytul {
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 24ch;
  text-wrap: pretty;
}
.ep-material__glowa--bez-foto .ep-material__tytul { max-width: 30ch; }

.ep-material__wstep {
  margin: 0 0 26px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ep-akapit);
}

/* Pasek faktów — każda rubryka nieobowiązkowa, pusta po prostu nie istnieje. */
.ep-fakty {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ep-fakt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #C6BAE6;
  background: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ep-fiolet-900);
}
.ep-fakt__ikona { display: flex; flex: none; }

.ep-material__foto {
  position: relative;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 4 / 3;
  background: #F7F3EE;
  border-color: rgba(59, 49, 86, 0.2);
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.06),
              0 26px 48px -20px rgba(72, 55, 40, 0.34);
}
.ep-material__obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Jak na kafelku: pionowa okładka kadrowana od góry, nie od środka. */
  object-position: center top;
  display: block;
}
/* Ta sama wstęga co na kafelku — strona ma wyglądać na przedłużenie karty,
   z której się na nią weszło. */
.ep-material__wstega {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  z-index: 2;
  background: var(--ep-grad-pion);
}

/* --- Program --- */

.ep-program { margin-bottom: 46px; }
.ep-program__tytul {
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
}
.ep-program__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ep-ramka-wlos);
  border-radius: var(--ep-promien-md);
  overflow: hidden;
  background: var(--ep-ramka-wlos);
  box-shadow: 0 2px 4px rgba(51, 43, 84, 0.05),
              0 22px 42px -22px rgba(51, 43, 84, 0.34);
}
.ep-punkt {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 24px;
  background: #FFFFFF;
  transition: background .2s ease;
}
.ep-punkt:hover { background: #FDFAF6; }

/* Numer jest ozdobą, nie treścią — kolejność niesie już znacznik <ol>,
   dlatego znika dla czytników ekranu. */
.ep-punkt__numer {
  flex: none;
  width: 44px;
  font-family: var(--ep-font-naglowek);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Duży pogrubiony numer: kontrast co najmniej 3:1 do białej karty (WCAG 1.4.3). */
  color: #8a7fb0;
}
.ep-punkt__tresc { min-width: 0; }
.ep-punkt__temat {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ep-tekst);
}
.ep-punkt__opis {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ep-akapit);
  max-width: 68ch;
}

/* --- Podgląd stron („Zajrzyj do środka") ---
   Obrazy z galerii produktu — celowo w obniżonej rozdzielczości i ze
   znakiem wodnym, więc nie ma tu powiększania ani lupy: to zapowiedź
   materiału, nie jego treść. */

.ep-zajrzyj { margin-bottom: 56px; }
.ep-zajrzyj__tytul {
  font-family: var(--ep-font-naglowek);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ep-tekst);
  margin: 0 0 6px;
}
.ep-zajrzyj__nota {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ep-braz-ciemny);
}
.ep-zajrzyj__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ep-zajrzyj__strona {
  margin: 0;
  border: 1px solid rgba(59, 49, 86, 0.16);
  border-radius: var(--ep-promien-md);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(51, 43, 84, 0.05),
              0 16px 30px -18px rgba(72, 55, 40, 0.28);
}
.ep-zajrzyj__obraz {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Zamówienie --- */

.ep-material__zakup {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 30px 34px 32px 38px;
  background: var(--ep-grad-karta-fiolet);
  border-color: var(--ep-fiolet-500);
  box-shadow: var(--ep-cien-panel);
}
.ep-material__cena-blok { display: flex; flex-direction: column; gap: 4px; }
.ep-material__cena-etykieta {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ep-braz-ciemny);
}
.ep-material__cena {
  font-family: var(--ep-font-naglowek);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ep-fiolet-900);
}
.ep-material__akcje {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ep-material__kup { padding: 15px 30px; font-size: 15px; letter-spacing: 0.04em; }
.ep-material__inne {
  font-size: 14.5px;
  color: var(--ep-fiolet-900);
  border-bottom: 1px solid rgba(107, 92, 165, 0.35);
  transition: color .2s ease, border-color .2s ease;
}
.ep-material__inne:hover { color: var(--ep-koral-700); border-color: var(--ep-koral); }
.ep-material__wkrotce {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ep-braz-ciemny);
  opacity: .75;
}

/* --- Odnośnik „zobacz program" na kafelku --- */

.ep-produkt__tytul--link {
  display: block;
  color: var(--ep-tekst);
  transition: color .2s ease;
}
.ep-produkt__tytul--link:hover { color: var(--ep-fiolet-800); }

.ep-produkt__program {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ep-koral-700);
  transition: gap .2s ease, color .2s ease;
}
.ep-produkt__program:hover { gap: 10px; color: var(--ep-koral); }

/* Strona materiału na telefonie: wszystko w jednej kolumnie, zdjęcie nad
   treścią, cena i przycisk jeden pod drugim. */
@media (max-width: 1000px) {
  .ep-material { padding-top: 28px; padding-bottom: 48px; }
  .ep-material__glowa { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 36px; }
  .ep-material__opis-blok { order: 2; }
  .ep-material__foto { order: 1; aspect-ratio: 16 / 10; }
  .ep-material__tytul { font-size: 28px; max-width: none; }
  .ep-material__wstep { font-size: 16px; }
  .ep-fakt { font-size: 13.5px; padding: 9px 14px; }

  .ep-zajrzyj { margin-bottom: 40px; }
  .ep-zajrzyj__tytul { font-size: 24px; }
  .ep-zajrzyj__siatka { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .ep-program__tytul { font-size: 24px; margin-bottom: 18px; }
  .ep-punkt { flex-direction: column; gap: 8px; padding: 18px 18px 20px; }
  .ep-punkt__numer { width: auto; font-size: 20px; }
  .ep-punkt__temat { font-size: 17px; }

  .ep-material__zakup {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 24px 20px 26px 24px;
  }
  .ep-material__cena { font-size: 34px; }
  .ep-material__akcje { flex-direction: column; align-items: stretch; gap: 16px; }
  .ep-material__kup { width: 100%; }
  .ep-material__inne { text-align: center; }
}