/* Sokratik — portal (strona wejściowa).
 *
 * Ta sama paleta i ta sama siedmiostopniowa skala co aplikacja: portal ma
 * wyglądać jak przedsionek tego samego produktu, a nie jak osobna reklama.
 * Stąd żadnych nowych rozmiarów pisma i żadnych nowych kolorów — wszystko
 * przez tokeny z app.css.
 */

.portal-root { scroll-behavior: smooth; scroll-padding-top: 84px; }

.portal .wrap { padding-top: 0; }
.portal__main { padding-bottom: 0; }

/* Czerwony margines to według manifestu „kręgosłup strony", a na portalu
   był praktycznie niewidoczny (opacity .32 na beżu). Skoro ma coś znaczyć,
   musi być widać. W nim żyją numery sekcji — dokładnie jak na kartce,
   po której ktoś przeszedł długopisem. */
.portal .wrap::before { opacity: .55; }

.porownanie, .kroki, .cennik, .faq, .konczaca { position: relative; }
.porownanie::before, .kroki::before, .cennik::before,
.faq::before, .konczaca::before {
  position: absolute; left: -68px; top: 66px;
  font-family: var(--math); font-size: var(--t-lead);
  color: var(--red); opacity: .8;
}
.porownanie::before { content: "1."; }
.kroki::before      { content: "2."; }
.cennik::before     { content: "3."; }
.faq::before        { content: "4."; }
.konczaca::before   { content: "5."; }

/* W aplikacji marka jest przyciskiem, w portalu odnośnikiem — a odnośnik
   dostaje od przeglądarki niebieski kolor i podkreślenie. Bez tego marka
   wyglądała jak zwykły link w treści, a nie jak logotyp. */
.portal .brand { text-decoration: none; color: var(--ink); }
.portal .brand:hover { color: var(--pen); }

.portal__nav {
  margin-left: auto; display: flex; align-items: center; gap: 26px;
  font-size: var(--t-meta);
}
.portal__nav a { color: var(--ink-2); text-decoration: none; }
.portal__nav a:hover { color: var(--ink); }
/* Podkreślenie wjeżdża od strony, z której nadchodzi kursor, i wyjeżdża
   w drugą — ruch ma kierunek zamiast migać. */
.portal__nav a:not(.portal__cta) { position: relative; }
.portal__nav a:not(.portal__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--spokojnie) var(--ease);
}
.portal__nav a:not(.portal__cta):hover::after { transform: scaleX(1); transform-origin: left; }
.portal__cta {
  border: 1px solid var(--ink); padding: 8px 16px; font-weight: 650;
  color: var(--ink) !important;
  transition: background var(--szybko) var(--ease), color var(--szybko) var(--ease);
}
.portal__cta:hover { background: var(--ink); color: var(--paper) !important; }

/* ---- teza ---- */
/* UWAGA na `max-width` w jednostce `ch` na KONTENERZE: `ch` liczy się
   względem szerokości cyfry w foncie tego elementu, a nie nagłówka. Ustawione
   tu wcześniej `26ch` ściskało całą sekcję — akapit i przyciski lądowały
   w kolumnie węższej niż nagłówek, który miał własne ograniczenie. Szerokość
   ograniczamy ELEMENTOM, nie sekcji. */
.hero {
  padding: 76px 0 84px;
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px; align-items: center;
}
.hero__label { color: var(--red); display: block; margin-bottom: 18px; }
.hero h1 {
  margin: 0 0 26px; font-family: var(--math); font-size: var(--t-display);
  line-height: 1.02; letter-spacing: -.028em; font-weight: 700;
  text-wrap: balance;
}
.hero h1 u { text-decoration: none; box-shadow: inset 0 -.13em 0 #f0d9d5; }
.hero__lead {
  margin: 0 0 30px; font-size: var(--t-lead); color: var(--ink-2);
  max-width: 46ch; line-height: 1.6; text-wrap: pretty;
}
.hero__akcje { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__drobne { margin: 14px 0 0; font-size: var(--t-meta); color: var(--ink-3); }

/* ---- pokaz sprawdzania ---- */
.hero__pokaz { justify-self: end; width: 100%; max-width: 420px; }
.kartka {
  background: var(--white); border: 1px solid var(--rule-2);
  padding: 20px 22px 0;
  /* Kartka leży na biurku, a nie w siatce — pół stopnia wystarczy, żeby to
     poczuć, i jest za mało, żeby zauważyć jako „efekt”. */
  transform: rotate(-.55deg);
}
.kartka__gora {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 11px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.kartka__gora b { color: var(--red); font-weight: 700; }
.kartka__tresc {
  margin: 15px 0 6px; font-family: var(--math); font-size: var(--t-body);
  line-height: 1.45;
}
.kartka__tresc .wzor { white-space: nowrap; }
.kartka__tresc i { font-style: italic; }

.kartka__zapis { list-style: none; margin: 0; padding: 4px 0 14px; }
.kartka__zapis li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px; padding: 6px 0;
}
/* Pismo ucznia: ten sam niebieski co na kanwie w aplikacji, pochylenie
   i drobne przekrzywienie każdej linijki osobno — równy druk zdradziłby,
   że to nie jest ręka. */
.pismo {
  position: relative; justify-self: start;
  font-family: var(--math); font-style: italic; font-size: 23px;
  color: var(--pen); white-space: nowrap; line-height: 1.3;
}
.kartka__zapis li:nth-child(1) .pismo { transform: rotate(-.5deg); }
.kartka__zapis li:nth-child(2) .pismo { transform: rotate(.35deg) translateX(3px); }
.kartka__zapis li:nth-child(3) .pismo { transform: rotate(-.25deg) translateX(1px); }
.pismo--zle::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px;
  height: 1.5px; background: var(--red); transform-origin: left;
}
.uwaga {
  font-family: var(--math); font-size: var(--t-meta); white-space: nowrap;
  transform: rotate(-1.3deg);
}
.uwaga--ok { color: var(--green); font-weight: 700; }
.uwaga--zle { color: var(--red); font-style: italic; }

.kartka__wynik {
  margin: 0 -22px; padding: 13px 22px;
  border-top: 1px solid var(--rule); background: var(--paper);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--t-meta); color: var(--ink-3);
}
.kartka__wynik b {
  font-family: var(--math); font-size: var(--t-lead); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero__podpis {
  margin: 16px 0 0; font-size: var(--t-meta); color: var(--ink-3);
  line-height: 1.5; text-wrap: pretty;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  padding: 13px 26px; font-size: var(--t-meta); font-weight: 650;
  font-family: inherit;
  transition: background var(--szybko) var(--ease),
              border-color var(--szybko) var(--ease),
              color var(--szybko) var(--ease),
              transform var(--szybko) var(--ease);
}
.btn:hover { background: var(--pen); border-color: var(--pen); color: var(--white); }
/* Przycisk ugina się pod naciśnięciem — jedyny piksel, jaki jest tu
   potrzebny, żeby kliknięcie miało odpowiedź w tej samej klatce. */
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.btn--glowny { background: var(--ink); color: var(--paper); }

/* ---- liczby ----
   JEDYNY ciemny element na stronie i jedyny, jaki jest tu potrzebny.
   Cała reszta to druk na papierze, więc bez tego blok po bloku wychodził
   beż na beżu — nic nie miało prawa się wyróżnić i strona czytała się jak
   dokument, a nie jak produkt.

   To nie jest odejście od punktu odniesienia: prawdziwy arkusz CKE też ma
   pełne czarne pola (nagłówek, kod, ramka dla zespołu nadzorującego).
   Czarny prostokąt na papierze jest z tego świata — cień i gradient nie. */
.liczby {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  background: var(--ink); color: var(--paper);
  padding: 34px 36px; margin: 8px 0 0;
}
.liczby > div { padding: 0; }
.liczby b {
  display: block; font-family: var(--math); font-size: 46px; line-height: 1;
  color: var(--paper); font-weight: 700; margin-bottom: 10px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.liczby span {
  font-size: var(--t-meta); line-height: 1.5;
  color: rgba(251, 250, 247, .64);
}

/* ---- wspólny nagłówek sekcji ---- */
.porownanie h2, .kroki h2, .faq h2, .cennik h2, .konczaca h2 {
  font-family: var(--math); font-size: var(--t-h2, 34px); font-weight: 700;
  letter-spacing: -.018em; margin: 0 0 28px; text-wrap: balance; max-width: 24ch;
}
.porownanie, .kroki, .faq { padding: 72px 0; }
.porownanie { border-bottom: 1px solid var(--rule); }

.porownanie__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 44px; }
.porownanie__poz h3 {
  margin: 0 0 9px; font-size: var(--t-body); font-weight: 700;
  padding-left: 14px; border-left: 3px solid var(--red);
}
.porownanie__poz p {
  margin: 0; font-size: var(--t-meta); color: var(--ink-2);
  line-height: 1.65; padding-left: 17px;
}

/* ---- kroki ---- */
.kroki ol {
  list-style: none; margin: 0; padding: 0; counter-reset: krok;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-2);
}
.kroki li {
  counter-increment: krok; padding: 22px 24px 26px 0;
  border-right: 1px solid var(--rule);
}
.kroki li:last-child { border-right: none; }
.kroki li::before {
  content: counter(krok); display: block; font-family: var(--math);
  font-size: 26px; color: var(--red); line-height: 1; margin-bottom: 12px;
}
.kroki b { display: block; font-size: var(--t-body); margin-bottom: 7px; }
.kroki p { margin: 0; font-size: var(--t-meta); color: var(--ink-2); line-height: 1.6; }

/* ---- cennik ---- */
.cennik { padding: 64px 0; border-top: 1px solid var(--rule-2); }
.cennik__head { max-width: 62ch; margin-bottom: 40px; }
.cennik__head .label { color: var(--red); display: block; margin-bottom: 14px; }
.cennik__head p { margin: 0; font-size: var(--t-body); color: var(--ink-2); line-height: 1.65; }

.cennik__plany { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  position: relative; border: 1px solid var(--rule-2); background: var(--white);
  padding: 28px 24px 26px; display: flex; flex-direction: column;
  transition: border-color var(--spokojnie) var(--ease),
              transform var(--spokojnie) var(--ease);
}
/* Podniesienie o trzy piksele zamiast cienia — karta reaguje, a strona
   dalej jest zrobiona z linii i światła. */
.plan:hover { transform: translateY(-3px); border-color: var(--ink-3); }
.plan--wyrozniony:hover { border-color: var(--ink); }
/* Wyróżnienie planu robimy grubszą ramką i listwą, nie cieniem ani kolorem
   tła — w tym projekcie kolor niesie znaczenie, a nie ozdobę. */
.plan--wyrozniony { border-color: var(--ink); border-top: 4px solid var(--ink); }
.plan__wstega {
  position: absolute; top: 0; right: 20px; transform: translateY(-50%);
  background: var(--ink); color: var(--paper); padding: 4px 10px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.plan__nazwa {
  font-size: var(--t-label); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.plan__ceny { display: flex; align-items: baseline; gap: 7px; }
.plan__cena {
  font-family: var(--math); font-size: 42px; font-weight: 700; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.plan__okres { font-size: var(--t-meta); color: var(--ink-3); }
.plan__przeliczenie {
  margin-top: 7px; font-size: var(--t-meta); color: var(--green); font-weight: 650;
}
.plan__opis { margin: 14px 0 18px; font-size: var(--t-meta); color: var(--ink-2); }
.plan__zalety { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.plan__zalety li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  font-size: var(--t-meta); color: var(--ink-2); line-height: 1.55;
}
.plan__zalety li::before {
  content: ""; position: absolute; left: 0; top: calc(.7em - 2px);
  width: 5px; height: 5px; background: var(--red);
}
.plan__btn { width: 100%; text-align: center; }

.cennik__nota {
  margin: 26px 0 0; padding: 14px 18px; font-size: var(--t-meta);
  border-left: 3px solid var(--amber); background: var(--amber-soft);
  color: var(--ink-2); display: none; max-width: 70ch;
}
.cennik__nota--widoczna { display: block; }
.cennik__blad { font-size: var(--t-meta); color: var(--red); }

/* ---- pytania ---- */
.faq { border-top: 1px solid var(--rule-2); }
.faq dl { margin: 0; }
.faq dt {
  font-size: var(--t-body); font-weight: 700; margin-top: 24px;
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.faq dl > dt:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.faq dd {
  margin: 8px 0 0; font-size: var(--t-meta); color: var(--ink-2);
  line-height: 1.7; max-width: 74ch;
}

/* ---- zamknięcie ---- */
.konczaca {
  padding: 64px 0; border-top: 2px solid var(--ink);
}
.konczaca p { margin: 0 0 26px; font-size: var(--t-body); color: var(--ink-2); max-width: 56ch; }

.stopka-portal {
  border-top: 1px solid var(--rule-2); padding: 30px 28px 60px 96px;
  max-width: 1040px; margin: 0 auto;
  font-size: var(--t-meta); color: var(--ink-3);
}
.stopka-portal__drobne { margin-top: 8px; max-width: 70ch; }

/* ------------------------------------------------------------------ */
/* Ruch                                                                */
/* ------------------------------------------------------------------ */
/* Dwie zasady, którym podlega tu wszystko:
   1. Animujemy WYŁĄCZNIE `opacity`, `transform` i `clip-path` — te trzy
      rzeczy przeglądarka robi bez przeliczania układu strony, więc ruch
      nie zacina się nawet przy przewijaniu.
   2. Animacja albo coś opowiada, albo jej nie ma. Wejście sekcji mówi
      „to jest osobna myśl”; sekwencja na kartce opowiada, co robi produkt.
      Nic tu nie rusza się dla ozdoby. */

@keyframes sok-wejscie {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Klasę `gotowe` dokłada skrypt. Bez JS-u strona jest po prostu widoczna
   od razu — animacja nie może być warunkiem przeczytania treści. */
.gotowe [data-krok] {
  animation: sok-wejscie var(--wejscie) var(--ease) backwards;
  animation-delay: calc(var(--krok, 0) * 90ms);
}

/* Kartka: uczeń pisze trzy linijki, dopiero potem wchodzi korekta.
   Czasy dobrane tak, by całość zamknęła się w ~3 s — dłuższy pokaz
   zaczyna być czekaniem. */
@keyframes sok-pisanie {
  from { clip-path: inset(0 100% -30% 0); }
  to   { clip-path: inset(0 -8% -30% 0); }
}
@keyframes sok-kreska { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sok-korekta {
  from { opacity: 0; transform: translateX(10px) rotate(-1.3deg) scale(.94); }
  to   { opacity: 1; transform: translateX(0) rotate(-1.3deg) scale(1); }
}

.gotowe .pismo { animation: sok-pisanie 430ms var(--ease) backwards; }
.gotowe .kartka__zapis li:nth-child(1) .pismo { animation-delay: 700ms; }
.gotowe .kartka__zapis li:nth-child(2) .pismo { animation-delay: 1160ms; }
.gotowe .kartka__zapis li:nth-child(3) .pismo { animation-delay: 1620ms; }

.gotowe .pismo--zle::after {
  animation: sok-kreska 240ms var(--ease) backwards;
  animation-delay: 2320ms;
}
.gotowe .uwaga { animation: sok-korekta 380ms var(--ease-sprezyna) backwards; }
.gotowe .uwaga--ok  { animation-delay: 2150ms; }
.gotowe .uwaga--zle { animation-delay: 2460ms; }
.gotowe .kartka__wynik {
  animation: sok-wejscie 420ms var(--ease) backwards;
  animation-delay: 2720ms;
}

/* Ujawnianie przy przewijaniu — klasę też dokłada skrypt, więc brak JS-u
   nie chowa treści. Opóźnienie liczone od pozycji w rodzeństwie, żeby
   cztery liczby czy cztery kroki wchodziły po kolei, a nie jednym blokiem. */
.ujawnij { opacity: 0; transform: translateY(16px); }
.ujawnij--widoczny {
  opacity: 1; transform: none;
  transition: opacity var(--wejscie) var(--ease), transform var(--wejscie) var(--ease);
  transition-delay: calc(var(--krok, 0) * 70ms);
}

/* Wyłączony ruch to nie „mniej ruchu”, tylko jego brak — u kogoś z zaburzeniami
   przedsionkowymi przesuwanie treści potrafi wywołać zawroty głowy. */
@media (prefers-reduced-motion: reduce) {
  .portal-root { scroll-behavior: auto; }
  .gotowe [data-krok], .gotowe .pismo, .gotowe .uwaga,
  .gotowe .pismo--zle::after, .gotowe .kartka__wynik { animation: none; }
  .ujawnij { opacity: 1; transform: none; }
  .ujawnij--widoczny { transition: none; }
  .btn, .plan, .portal__cta, .portal__nav a:not(.portal__cta)::after { transition: none; }
  .btn:active, .plan:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Węższe ekrany                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 980px) {
  /* Kartka pod tekstem, nie obok — ściśnięta do 300 px przestaje być
     czytelnym pokazem i staje się ozdobnikiem. */
  .hero { grid-template-columns: 1fr; gap: 44px; padding-bottom: 60px; }
  .hero__pokaz { justify-self: start; max-width: 420px; }
}
@media (max-width: 900px) {
  .liczby, .kroki ol, .porownanie__grid, .cennik__plany { grid-template-columns: 1fr 1fr; }
  .kroki li, .liczby > div { border-right: none; }
}
@media (max-width: 620px) {
  .liczby, .kroki ol, .porownanie__grid, .cennik__plany { grid-template-columns: 1fr; }
  .liczby { padding: 26px 24px; gap: 22px; }
  /* Numery sekcji chowamy — na wąskim ekranie nie ma marginesu, w którym
     mogłyby stać, a wciśnięte w treść tylko przeszkadzają. */
  .porownanie::before, .kroki::before, .cennik::before,
  .faq::before, .konczaca::before { display: none; }
  .portal__nav a:not(.portal__cta) { display: none; }
  .stopka-portal { padding-left: 20px; }
  .hero { padding-top: 44px; }
  .kartka { transform: none; }        /* przekrzywienie na wąskim ekranie tylko przeszkadza */
}