/* ZdajWOP — strona sprzedażowa */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f6fa;
  --bg-deep: #0d1b34;
  --fg: #111827;
  --fg-mut: #5b6478;
  --line: #e2e5ee;
  --navy: #0d1b34;
  --blue: #1b4bb5;
  --gold: #c8963e;
  --gold-soft: #fdf6e8;
  --ok: #1c7a4a;
  --r: 14px;
  --shadow-s: 0 1px 2px rgba(13,27,52,.06), 0 4px 12px rgba(13,27,52,.05);
  --shadow-l: 0 2px 6px rgba(13,27,52,.06), 0 20px 48px rgba(13,27,52,.10);
  --max: 1140px;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }
img { max-width: 100%; }

h1, h2, h3, h4 { letter-spacing: -.025em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 780; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-weight: 730; }
h3 { font-size: 1.14rem; font-weight: 660; line-height: 1.3; }
p { margin: 0; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--gold);
}
.muted { color: var(--fg-mut); }
.center { text-align: center; }

section { padding: 5.5rem 0; }
section.tight { padding: 4rem 0; }
.sec-alt { background: var(--bg-alt); }
.sec-head { max-width: 62ch; margin-bottom: 3rem; }
.sec-head.center { margin-inline: auto; }
.sec-head p { color: var(--fg-mut); margin-top: .9rem; font-size: 1.05rem; }

/* ---------- nawigacja ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--navy); margin-right: auto; }
.logo-mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; background: var(--navy); color: #fff;
  font-weight: 800; font-size: 1.15rem; line-height: 1; color: var(--gold);
}
.logo-txt { font-weight: 780; font-size: 1.18rem; letter-spacing: -.03em; }
.nav-links { display: flex; gap: 1.6rem; }

/* Dwa przyciski w nagłówku: logowanie i zakup.
   „Zaloguj się" istnieje, bo kupujący nie miał ze stron sprzedażowych ŻADNEJ
   drogi do aplikacji — musiał znać adres /kurs.html. Jest drugorzędny
   (btn-ghost), żeby nie konkurował wzrokowo z zakupem.
   Przyciski w nagłówku są węższe niż domyślne: poniżej 900 px znikają linki
   nawigacji i zostaje sam logotyp z dwoma przyciskami, które przy pełnym
   paddingu nie mieściły się na wąskim telefonie. */
.nav-akcje { display: flex; align-items: center; gap: .55rem; flex: none; }
.nav-akcje .btn { padding: .6rem 1.15rem; font-size: .92rem; }

@media (max-width: 400px) {
  .nav-akcje { gap: .4rem; }
  .nav-akcje .btn { padding: .55rem .8rem; font-size: .86rem; }
  .logo-txt { display: none; }
}
.nav-links a { color: var(--fg-mut); text-decoration: none; font-size: .95rem; font-weight: 550; }
.nav-links a:hover { color: var(--navy); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--navy); color: #fff; text-decoration: none;
  font: inherit; font-weight: 640; font-size: .97rem; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-l); }
.btn-gold { background: var(--gold); color: #241a06; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); box-shadow: none; }
.btn-lg { padding: 1rem 2rem; font-size: 1.04rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row.center { justify-content: center; }

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

.hero {
  background: linear-gradient(168deg, #0d1b34 0%, #143059 58%, #1b4bb5 140%);
  color: #fff; padding: 5rem 0 5.5rem; position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: auto -10% -60% auto;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,150,62,.20), transparent 68%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; display: grid; gap: 3.5rem; grid-template-columns: 1.15fr .85fr; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 1.35rem; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-sub { font-size: 1.14rem; color: #c3cee2; max-width: 54ch; margin-bottom: 2.25rem; }
.hero .eyebrow { margin-bottom: 1rem; display: block; }
.hero-note { margin-top: 1.5rem; font-size: .88rem; color: #93a3c0; }

.hero-card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 1.9rem; backdrop-filter: blur(6px);
}
.hero-card h3 { color: #fff; margin-bottom: 1.25rem; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; font-size: .8rem; color: #93a3c0; }
.spec { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.spec:last-child { border-bottom: 0; padding-bottom: 0; }
.spec span { color: #c3cee2; font-size: .95rem; }
.spec b { color: #fff; font-size: 1.28rem; font-weight: 730; letter-spacing: -.02em; }
.spec b small { font-size: .8rem; font-weight: 500; color: #93a3c0; }

/* ---------- pasek liczb ---------- */

.strip { background: var(--navy); color: #fff; padding: 0; }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); }
.strip-cell { background: var(--navy); padding: 1.6rem 1.25rem; text-align: center; }
.strip-cell b { display: block; font-size: 1.9rem; font-weight: 760; letter-spacing: -.03em; color: var(--gold); }
.strip-cell span { font-size: .85rem; color: #a9b6ce; }

/* ---------- karty ---------- */

.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.6rem 1.65rem; box-shadow: var(--shadow-s);
}
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--fg-mut); font-size: .96rem; }
.card-ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold); font-size: 1.15rem; margin-bottom: 1rem;
}

/* ---------- problem / rozwiązanie ---------- */

.split { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.panel { border-radius: var(--r); padding: 1.85rem; border: 1px solid var(--line); }
.panel h3 { margin-bottom: 1rem; }
.panel ul { margin: 0; padding-left: 1.2rem; color: var(--fg-mut); }
.panel li { margin-bottom: .6rem; font-size: .97rem; }
.panel-bad { background: #fdf3f2; border-color: #f3d9d6; }
.panel-good { background: #f0f8f3; border-color: #cfe8db; }

/* ---------- program ---------- */

.mods { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-s); }
.mod { display: grid; grid-template-columns: 60px 1fr auto; gap: 1.25rem; align-items: center; padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--line); }
.mod:last-child { border-bottom: 0; }
.mod-n { font-size: 1.5rem; font-weight: 780; color: var(--line); letter-spacing: -.03em; }
.mod h3 { font-size: 1.04rem; margin-bottom: .25rem; }
.mod p { font-size: .92rem; color: var(--fg-mut); }
.mod-tag { font-size: .8rem; color: var(--fg-mut); white-space: nowrap; background: var(--bg-alt); padding: .35rem .75rem; border-radius: 99px; }

/* ---------- kroki ---------- */

.steps { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: s; }
.step { counter-increment: s; }
.step::before {
  content: counter(s); display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 720; margin-bottom: 1rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--fg-mut); font-size: .96rem; }

/* ---------- cennik ---------- */

.plans { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 820px; margin-inline: auto; align-items: start; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 2rem 1.85rem; box-shadow: var(--shadow-s); position: relative; }
.plan.best { border: 2px solid var(--navy); box-shadow: var(--shadow-l); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #241a06; font-size: .74rem; font-weight: 730;
  letter-spacing: .07em; text-transform: uppercase; padding: .32rem .9rem; border-radius: 99px;
  white-space: nowrap;
}
.plan h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.plan .plan-desc { color: var(--fg-mut); font-size: .92rem; margin-bottom: 1.35rem; }
.price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .35rem; }
.price b { font-size: 2.7rem; font-weight: 780; letter-spacing: -.035em; }
.price span { color: var(--fg-mut); font-size: .95rem; }
.price-note { font-size: .85rem; color: var(--fg-mut); margin-bottom: 1.6rem; }
.plan ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; padding: .48rem 0; font-size: .95rem; }
.plan li::before { content: '✓'; color: var(--ok); font-weight: 800; flex: none; }
.plan li.off { color: #a3aab9; }
.plan li.off::before { content: '—'; color: #c7ccd7; }
.plan .btn { width: 100%; }

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

.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 1.35rem .25rem;
}
.faq summary {
  cursor: pointer; font-weight: 620; font-size: 1.03rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 1.5rem; line-height: 1; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: .9rem; color: var(--fg-mut); font-size: .98rem; max-width: 66ch; }

/* ---------- CTA ---------- */

.cta { background: linear-gradient(150deg, #0d1b34, #1b4bb5 180%); color: #fff; text-align: center; }
.cta h2 { color: #fff; margin-bottom: 1rem; }
.cta p { color: #c3cee2; max-width: 52ch; margin: 0 auto 2.25rem; font-size: 1.06rem; }

/* ---------- placeholder ---------- */

.todo {
  border: 2px dashed var(--gold); background: var(--gold-soft);
  border-radius: var(--r); padding: 1.5rem 1.65rem; color: #6b5320;
}
.todo b { display: block; margin-bottom: .35rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.todo p { font-size: .94rem; }

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

.foot { background: var(--navy); color: #93a3c0; padding: 3.5rem 0 2.5rem; font-size: .9rem; }
.foot-in { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr; }
.foot h4 { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .9rem; font-weight: 700; }
.foot a { color: #93a3c0; text-decoration: none; display: block; padding: .22rem 0; }
.foot a:hover { color: #fff; }
.foot a.logo { display: flex; padding: 0; }
.foot .logo-txt { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .82rem; line-height: 1.6; }

/* ---------- responsywność ---------- */

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 2.5rem; }
  .strip-in { grid-template-columns: repeat(2, 1fr); }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  section { padding: 3.75rem 0; }
  /* Dwie kolumny: numer i blok tekstu. Etykieta MUSI dostać jawnie kolumnę 2 —
     bez tego trafia do drugiego rzędu, do kolumny szerokiej na 40 px.
     Wcześniej była tu po prostu ukrywana, ale na landingu olimpiady niesie
     jedyną informację odróżniającą blok zmienny bieżącej edycji od reszty
     programu; na telefonie ten wiersz wyglądał identycznie jak pozostałe. */
  .mod { grid-template-columns: 40px minmax(0, 1fr); row-gap: .6rem; }
  .mod-tag { grid-column: 2; justify-self: start; white-space: normal; }
  .foot-in { grid-template-columns: 1fr; }

  /* Na telefonie liczy sie kazdy piksel nad zgieciem ekranu: przycisk
     zakupu ma byc widoczny bez przewijania takze na 667 px wysokosci
     (iPhone SE i podobne). Naglowek strony olimpiady jest dlugi, bo musi
     zawierac pelna nazwe olimpiady - reszte sekcji scieramy, zeby to
     zmiescic. Nie zmniejszaj tych wartosci "na oko": sprawdz recznie
     na 375x667, czy .btn-primary w hero konczy sie nad krawedzia. */
  .hero { padding: 2rem 0 3.25rem; }
  .hero h1 { font-size: 1.78rem; margin-bottom: 1rem; }
  .hero .eyebrow { margin-bottom: .6rem; }
  .hero-sub { font-size: 1.04rem; margin-bottom: 1.4rem; }
}

/* ---------- okno zakupu ---------- */

.modal-bg {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 12, 26, .72);
  display: grid; place-items: center; padding: 1.25rem;
  backdrop-filter: blur(3px);
}
.modal {
  position: relative;
  width: min(430px, 100%);
  background: var(--bg-soft, #fff); color: var(--fg, #161c2e);
  border-radius: 14px; padding: 1.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.modal h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.modal-x {
  position: absolute; top: .6rem; right: .75rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--fg-mut, #5c6580);
}
.modal-x:hover { color: var(--fg, #161c2e); }

.modal .field { display: block; margin: 1rem 0 .9rem; }
.modal .field span { display: block; font-size: .85rem; color: var(--fg-mut, #5c6580); margin-bottom: .3rem; }
.modal .field input {
  width: 100%; padding: .65rem .75rem; border-radius: 9px;
  border: 1px solid var(--line, #dcdfeb); background: var(--bg, #f6f7fb);
  color: inherit; font: inherit;
}
.modal .field input:focus { outline: none; border-color: var(--gold, #c8963e); }

.modal .check { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem; }
.modal .check input { margin-top: .25rem; flex: none; }
.modal .check span { font-size: .82rem; color: var(--fg-mut, #5c6580); line-height: 1.5; }

.modal .msg-bad { color: #b3261e; font-size: .88rem; margin: .6rem 0 0; }
.modal .btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- karta z danymi (kontakt, potwierdzenia) ---------- */

.sheet {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.65rem; box-shadow: var(--shadow-s);
}

.dane { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.dane:first-child { padding-top: 0; }
.dane:last-child { border-bottom: 0; padding-bottom: 0; }
.dane span { color: var(--fg-mut); font-size: .92rem; flex: none; }
.dane b { font-weight: 650; text-align: right; overflow-wrap: anywhere; }

/* ---------- strony dokumentów (regulamin, polityka prywatności) ---------- */

.doc { max-width: 780px; margin: 0 auto; padding: 3.5rem 0 4.5rem; }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); letter-spacing: -.02em; margin-bottom: .5rem; }
.doc .doc-meta { color: var(--fg-mut); font-size: .92rem; margin-bottom: 2.5rem; }
.doc h2 {
  font-size: 1.12rem; margin: 2.5rem 0 .9rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--gold); letter-spacing: -.01em;
}
.doc h3 { font-size: 1rem; margin: 1.6rem 0 .6rem; }
.doc p, .doc li { color: #2b3444; line-height: 1.75; }
.doc p { margin-bottom: .9rem; }
.doc ul, .doc ol { margin: 0 0 1rem 1.4rem; }
.doc li { margin-bottom: .5rem; }
.doc a { color: var(--blue); }
.doc .lead { font-size: 1.05rem; color: var(--fg-mut); margin-bottom: 2rem; }

/* Miejsce, w które trzeba wpisać dane firmy — ma kłuć w oczy, dopóki jest puste. */
.doc mark, .luka {
  background: #fff4d6; color: #7a4b00; padding: .1rem .35rem;
  border-radius: 4px; font-weight: 650; font-size: .95em;
  border: 1px dashed #d9a441;
}

.doc-uwaga {
  background: var(--gold-soft); border: 1px solid #e8d3a8;
  border-left: 4px solid var(--gold); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 0 0 2.5rem;
}
.doc-uwaga p { margin: 0; font-size: .93rem; }
.doc-uwaga p + p { margin-top: .5rem; }

.doc-nawrot { display: inline-block; margin-bottom: 1.5rem; font-size: .92rem; color: var(--fg-mut); }

@media (max-width: 640px) {
  .dane { flex-direction: column; gap: .2rem; }
  .dane b { text-align: left; }
}

/* Skrypt npm run dane przełącza ten atrybut na ramce "dokument w przygotowaniu". */
[hidden] { display: none !important; }

/* --- tabele w tekście (blog, dokumenty) ---
   landing.css dlugo ich nie potrzebowal, bo zadna strona sprzedazowa nie miala
   tabeli. Pojawily sie z wpisami o punktacji olimpiady, gdzie tabela NIESIE
   tresc — bez stylu naglowki i komorki zlewaly sie w jeden ciag slow.
   Zawijanie w overflow-x chroni waskie ekrany: tabela przewija sie sama,
   zamiast rozpychac cala strone w poziomie. */
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: .93rem;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.doc table th,
.doc table td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--line, #dcdfeb);
  text-align: left;
  vertical-align: top;
}
.doc table th {
  font-weight: 650;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-mut, #5c6580);
  border-bottom-width: 2px;
}
.doc table tr:last-child td { border-bottom: 0; }

/* Tabela z PROZA w komorkach, a nie z krotkimi wartosciami. Domyslne
   white-space: nowrap rozciaga taka tabele na 1300+ px, wiec na telefonie
   trzeba przewijac pol ekranu, zeby przeczytac jedno zdanie. Tu zawijamy
   normalnie i przyjmujemy wezsze kolumny. Klasa jest OPT-IN: przy tabelach
   z liczbami nowrap jest wlasciwe, bo rozrywanie "-0,5 pkt" szkodzi. */
.doc table.proza {
  display: table;
  white-space: normal;
  table-layout: fixed;
}
.doc table.proza td,
.doc table.proza th { word-break: normal; overflow-wrap: anywhere; }

/* Na szerokich ekranach tabela moze zachowywac sie normalnie — zawijanie
   tekstu wraca, bo miejsca jest dosc. */
@media (min-width: 700px) {
  .doc table { display: table; white-space: normal; }
}