/* ══════════════════════════════════════════════════════════════════════
   Kursy matematyki · Mateusz Będkowski · Kalisz
   Strona jednoekranowa. Wersja 2.0

   Kierunek: spokojna, „szkolna" typografia z wyraźną hierarchią. Rodzic
   ocenia wiarygodność w kilka sekund, więc strona ma wyglądać na
   prowadzoną przez kogoś poważnego, nie na kampanię reklamową.

   Jeden kolor akcentu (--akcent) — przyciski i kluczowe wyróżnienia.
   Wszystko inne jest neutralne.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Kolory. Wartości akcentu dobrane pod kontrast 4,5:1 na bieli —
     jaśniejszy pomarańcz marki nie przechodzi tego progu w tekście,
     więc służy wyłącznie jako cienka linia albo tło. */
  --atrament:#16202B;
  --granat:#0F2436;
  --granat-2:#1A3A5C;
  --szary:#5B6875;
  --szary-2:#6B7681;
  --akcent:#8F4A05;          /* biały tekst na tym tle: 6,7:1 */
  --akcent-ciemny:#6E3904;
  --akcent-tlo:#FDF4E8;
  --akcent-linia:#E8C79A;
  --linia:#E3E1DC;
  --linia-2:#EFEDE8;
  --papier:#FFFFFF;
  --papier-2:#FAF9F6;
  --ostrzez:#8A4A12;
  --pelna:#5B6875;

  --f-naglowek:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-tekst:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

  --max:1180px;
  --pasek:68px;
  --r:10px;
  --cien:0 1px 2px rgba(15,36,54,.05),0 8px 24px rgba(15,36,54,.06);
  --cien-mocny:0 16px 44px rgba(15,36,54,.13);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--papier);color:var(--atrament);
  font-family:var(--f-tekst);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                  /* nic nie wychodzi w bok przy 360 px */
}
img,svg,video{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--f-naglowek);color:var(--granat);margin:0;line-height:1.18;letter-spacing:-.012em;font-weight:600}
p{margin:0 0 1em}
a{color:var(--akcent);text-decoration:none}
a:hover{color:var(--akcent-ciemny);text-decoration:underline}

/* Widoczny obrys przy nawigacji klawiaturą — na wszystkim, co interaktywne. */
:focus-visible{outline:3px solid var(--akcent);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--akcent);outline-offset:3px}

/* Liczby zawsze o stałej szerokości cyfr — ceny i miejsca nie „skaczą". */
.cyfry,.stat b,.cena-duza,.termin-tab td,.cennik-tab td,.wynik{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--granat);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0;color:#fff}

.wrap{width:min(var(--max),100% - 64px);margin-inline:auto}
@media(max-width:600px){ .wrap{width:min(var(--max),100% - 40px)} }

/* ─────────────── sekcje: wyraźny rytm, bo to jeden długi scroll ─────────── */
.sekcja{padding:76px 0;scroll-margin-top:calc(var(--pasek) + 14px)}
.sekcja-tlo{background:var(--papier-2);border-block:1px solid var(--linia-2)}
@media(max-width:768px){ .sekcja{padding:52px 0} }

.nad{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--akcent);margin-bottom:13px;font-size:21px;letter-spacing:.12em;
  text-shadow:0 -1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(15,36,54,.22);
}
.sekcja>.wrap>h2,.sekcja-glowa h2{font-size:clamp(31px,4vw,45px);margin-bottom:16px;text-wrap:balance}
.sekcja-glowa{max-width:66ch;margin-bottom:38px}
.sekcja-glowa p{font-size:19px;line-height:1.65;color:var(--szary);margin:0}

/* ─────────────── przyciski ─────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-tekst);font-weight:700;font-size:16.5px;line-height:1;
  padding:15px 26px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;text-align:center;transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-glowny{background:var(--akcent);color:#fff}
.btn-glowny:hover{background:var(--akcent-ciemny);color:#fff}
.btn-poboczny{background:transparent;color:var(--granat);border-color:var(--linia)}
.hero .btn-poboczny{color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn-poboczny:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.btn-poboczny:hover{border-color:var(--granat);color:var(--granat);background:#fff}
.btn-maly{padding:10px 17px;font-size:14.5px}
.btn-pelny{width:100%}

/* ─────────────── pasek górny ─────────────── */
.pasek{
  position:sticky;top:0;z-index:60;height:var(--pasek);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--linia);
}
.pasek-in{display:flex;align-items:center;gap:26px;height:100%}
.marka{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.marka b{font-family:var(--f-naglowek);font-weight:600;font-size:19px;color:var(--granat);letter-spacing:-.01em}
.marka span{font-size:11.5px;font-weight:600;color:var(--szary-2);letter-spacing:.07em;text-transform:uppercase}
.marka:hover{text-decoration:none}

.menu{display:flex;gap:3px;margin-left:auto;align-items:center}
.menu a{
  font-size:15.5px;font-weight:600;color:var(--atrament);
  padding:9px 13px;border-radius:8px;position:relative;
}
.menu a:hover{background:var(--papier-2);color:var(--granat);text-decoration:none}
.menu a[aria-current="true"]{color:var(--akcent)}
.menu a.btn-glowny{color:#fff}
.menu a.btn-glowny:hover{color:#fff}
.menu a.btn-poboczny{color:var(--granat)}
.menu a[aria-current="true"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--akcent);border-radius:2px;
}
.menu .btn{margin-left:10px}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--linia);border-radius:9px;cursor:pointer;
}
.burger i,.burger i::before,.burger i::after{
  content:"";display:block;width:19px;height:2px;background:var(--granat);border-radius:2px;position:relative;
}
.burger i::before{position:absolute;top:-6px}
.burger i::after{position:absolute;top:6px}

@media(max-width:1080px){
  .menu{display:none}
  .burger{display:inline-flex}
  .pasek-in .btn-pasek{display:inline-flex;margin-left:12px}
  .menu.otwarte{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--linia);
    padding:12px 20px 18px;box-shadow:var(--cien);
  }
  .menu.otwarte a{padding:13px;font-size:17px}
  .menu.otwarte .btn{margin:8px 0 0}
}
@media(min-width:1081px){ .btn-pasek{display:none} }
@media(max-width:420px){ .marka span{display:none} }

/* ─────────────── ekran startowy ─────────────── */
.hero{position:relative;background:var(--granat);color:#fff;padding:64px 0 0;overflow:hidden}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.12);
}
.hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:end;position:relative;z-index:1}
.hero-tekst{padding-bottom:64px}
.hero h1{color:#fff;font-size:clamp(31px,4.4vw,50px);margin-bottom:20px;text-wrap:balance;letter-spacing:-.018em}
.hero .oczko{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F3C489;
  border:1px solid rgba(244,196,137,.4);border-radius:99px;padding:6px 15px;
}
.hero .oczko b{color:#fff;font-weight:800;letter-spacing:.02em;text-transform:none;font-size:14px}
.hero .lid{font-size:19px;line-height:1.62;color:#C6D4E1;margin:0 0 30px;max-width:50ch}
.hero .lid b{color:#fff;font-weight:700}
.hero-akcje{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hero-nota{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#A9BDD0}
.hero-nota svg{flex-shrink:0;color:#F3C489}
.hero-foto{position:relative;align-self:end;margin:0;display:flex;justify-content:center;padding-bottom:34px}
.hero-foto::before{
  content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:min(430px,102%);height:88%;border-radius:230px 230px 26px 26px;
  background:radial-gradient(ellipse at 50% 40%,rgba(244,162,40,.14),rgba(255,255,255,.045) 62%,transparent 72%);
}
.hero-foto img{
  position:relative;display:block;width:min(360px,100%);aspect-ratio:4/5;object-fit:cover;
  object-position:50% 12%;border-radius:20px;
  border:5px solid #FDF9F2;box-shadow:0 26px 60px rgba(0,0,0,.42);
  transform:rotate(-1.4deg);
}
.hero-foto figcaption{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:1px;white-space:nowrap;
  background:#FDF9F2;color:var(--granat);border-radius:12px;padding:9px 20px;
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}
.hero-foto figcaption b{font-family:var(--f-naglowek);font-weight:600;font-size:16.5px;line-height:1.15}
.hero-foto figcaption span{font-size:12.5px;font-weight:600;color:#5B6B7C}
@media(max-width:900px){
  .hero{padding:34px 0 0}
  .hero-in{grid-template-columns:1fr;gap:0}
  .hero-tekst{padding-bottom:30px}
  .hero-foto{padding-bottom:30px}
  .hero-foto img{width:min(300px,72%)}
}
@media(max-width:600px){
  .hero-foto img{width:min(250px,78%)}
  .hero-foto figcaption{padding:7px 15px}
  .hero-foto figcaption b{font-size:15px}
}

/* ─────────────── pasek dowodu ─────────────── */
.dowody{background:var(--granat-2);color:#fff;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.dowody-in{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{text-align:center;padding:0 8px}
.stat b{
  display:block;font-family:var(--f-naglowek);font-weight:600;
  font-size:clamp(28px,3.4vw,38px);line-height:1.05;color:#fff;margin-bottom:5px;
}
.stat span{display:block;font-size:13.5px;line-height:1.4;color:#C3D0DC;font-weight:600}
@media(max-width:768px){
  .dowody-in{grid-template-columns:1fr 1fr;gap:22px 14px}
}

/* ─────────────── kursy: zakładki ─────────────── */
.kursy-taby{
  display:none;gap:8px;margin-bottom:0;border-bottom:2px solid var(--linia);
  padding-bottom:0;
}
.kursy-taby button{
  font-family:var(--f-tekst);font-weight:700;font-size:16px;
  background:none;border:0;border-bottom:3px solid transparent;
  padding:14px 20px;margin-bottom:-2px;cursor:pointer;color:var(--szary);
  border-radius:8px 8px 0 0;transition:color .15s,border-color .15s,background .15s;
}
.kursy-taby button:hover{color:var(--granat);background:var(--papier-2)}
.kursy-taby button[aria-selected="true"]{color:var(--akcent);border-bottom-color:var(--akcent)}

.kurs-akordeon{
  display:none;width:100%;text-align:left;
  font-family:var(--f-naglowek);font-weight:600;font-size:19px;color:var(--granat);
  background:#fff;border:1px solid var(--linia);border-radius:var(--r);
  padding:16px 18px;margin-bottom:10px;cursor:pointer;
  align-items:center;gap:12px;
}
.kurs-akordeon .strzalka{
  margin-left:auto;flex-shrink:0;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--akcent);transition:transform .2s;
}
.kurs-akordeon[aria-expanded="true"] .strzalka{transform:rotate(180deg)}
.kurs-akordeon small{display:block;font-family:var(--f-tekst);font-size:13.5px;font-weight:600;color:var(--szary)}

/* Bez JavaScriptu wszystkie trzy kursy są po prostu widoczne jeden pod drugim. */
.kurs-panel{padding-top:34px}
.kurs-panel + .kurs-panel{border-top:1px solid var(--linia);margin-top:8px}

html.js .kursy-taby{display:flex;flex-wrap:wrap}
html.js .kurs-panel{display:none;border-top:0;margin-top:0}
html.js .kurs-panel.aktywny{display:block}
@media(max-width:768px){
  html.js .kursy-taby{display:none}
  html.js .kurs-akordeon{display:flex}
  html.js .kurs-panel{padding-top:4px;padding-bottom:18px}
}

.kurs-format{
  display:inline-block;margin-bottom:12px;padding:5px 13px;
  border:1px solid var(--linia);border-radius:99px;background:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--szary);
}
.kurs-format-weekend{background:var(--akcent);border-color:var(--akcent);color:#fff}
.kurs-prowadzi{
  margin:10px 0 0;padding-left:12px;border-left:3px solid var(--akcent);
  font-size:15px;color:var(--szary);line-height:1.45;
}
.kurs-prowadzi b{color:var(--atrament);font-weight:600}
.kurs-prowadzi-zespol{max-width:46ch}
.kurs-glowa{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 28px;margin-bottom:8px}
.kurs-glowa-tekst{flex:1;min-width:min(100%,320px)}
.kurs-glowa h3{font-size:clamp(23px,2.7vw,30px);text-wrap:balance}
.kurs-cena-blok{text-align:right}
.cena-duza{
  display:block;font-family:var(--f-naglowek);font-weight:600;
  font-size:34px;line-height:1;color:var(--granat);
}
.cena-pod{display:block;font-size:13.5px;color:var(--szary);font-weight:600;margin-top:3px}
.kurs-zajawka{font-size:18px;color:var(--szary);margin:0 0 26px;max-width:62ch}

.miejsca-pigulka{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;border-radius:99px;padding:5px 13px;
  border:1.5px solid var(--linia);color:var(--szary);
}
.miejsca-pigulka.malo{border-color:var(--akcent-linia);background:var(--akcent-tlo);color:var(--ostrzez)}
.miejsca-pigulka.brak{border-color:var(--linia);background:var(--papier-2);color:var(--pelna)}
.miejsca-pigulka::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}

.kurs-siatka{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px;margin-bottom:30px}
@media(max-width:860px){ .kurs-siatka{grid-template-columns:1fr;gap:26px} }

.blok-tyt{
  font-family:var(--f-tekst);font-weight:700;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--akcent);margin:0 0 12px;
}
.profile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.profile li{
  position:relative;padding-left:26px;font-size:16.5px;line-height:1.55;
}
.profile li::before{
  content:"";position:absolute;left:0;top:10px;width:12px;height:2px;background:var(--akcent);border-radius:2px;
}
.wcenie{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wcenie li{position:relative;padding-left:27px;font-size:16px;line-height:1.5}
.wcenie li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:9px;
  border-left:2.2px solid var(--akcent);border-bottom:2.2px solid var(--akcent);
  transform:rotate(-45deg);
}

/* program — akordeon działów */
.program{border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;background:#fff}
.program details{border-bottom:1px solid var(--linia-2)}
.program details:last-child{border-bottom:0}
.program summary{
  list-style:none;cursor:pointer;padding:13px 17px;
  display:flex;align-items:baseline;gap:11px;
  font-weight:700;font-size:15.5px;color:var(--granat);
}
.program summary::-webkit-details-marker{display:none}
.program summary::after{
  content:"";margin-left:auto;flex-shrink:0;align-self:center;
  width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:6px solid var(--akcent);transition:transform .2s;
}
.program details[open] summary::after{transform:rotate(180deg)}
.program summary:hover{background:var(--papier-2)}
.program summary .ile{
  font-size:12.5px;font-weight:700;color:var(--szary);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.program .tresc{padding:0 17px 15px;font-size:15.5px;line-height:1.6;color:var(--szary)}

.kurs-stopa{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  padding:22px 24px;border:1px solid var(--linia);border-radius:var(--r);
  background:var(--papier-2);
}
.kurs-stopa .raty{font-size:15.5px;color:var(--szary);flex:1;min-width:min(100%,260px)}
.kurs-stopa .raty b{color:var(--atrament);font-weight:700}

/* Był tu blok deklaracji bez selektora — sam ogon reguły, której nazwa
   kiedyś zniknęła. Przeglądarka pomijała go w całości, więc nic nie
   robił; usunięty, żeby nie mylił przy kolejnych zmianach. */

/* ─────────────── metoda ─────────────── */
.metoda-wstep{
  font-size:19px;line-height:1.6;color:var(--szary);max-width:64ch;margin:0 0 40px;
}
.metoda-wstep b{color:var(--atrament);font-weight:600}
.bloki{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
@media(max-width:920px){ .bloki{grid-template-columns:1fr;gap:18px} }
.bloki article{position:relative;background:var(--papier);border:1px solid var(--linia);border-radius:14px;
  padding:30px 26px 28px;overflow:hidden}
/* Cienka linia akcentu u góry karty — jedyna ozdoba, jakiej ta sekcja potrzebuje. */
.bloki article::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--akcent)}
.blok-nr{display:block;font-family:var(--f-naglowek);font-size:34px;font-weight:700;line-height:1;
  color:var(--akcent);margin-bottom:16px;font-variant-numeric:tabular-nums}
.blok-nad{display:block;font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--akcent);margin-bottom:7px}
.bloki h3{font-size:21px;margin-bottom:10px;line-height:1.25}
.bloki p{font-size:16px;line-height:1.65;color:var(--szary);margin:0}
.arkusze-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
@media(max-width:920px){ .arkusze-in{grid-template-columns:1fr;gap:36px} }

/* Talia: trzy arkusze nachodzące na siebie jak na biurku. Obrót i przesunięcie
   dają głębię bez cieniowania całej sceny. Widoczna jest górna część każdej
   strony, bo tam siedzi nagłówek i pierwsze zadania. */
.talia{position:relative;aspect-ratio:1/1.12;padding-right:2%}
.talia img{
  position:absolute;width:74%;height:auto;aspect-ratio:794/900;
  object-fit:cover;object-position:top center;
  background:#fff;border:1px solid var(--linia);border-radius:8px;
  box-shadow:0 18px 40px rgba(15,36,54,.18);
  transition:transform .3s ease;
}
.talia .t3{left:2%;top:0;transform:rotate(-7deg)}
.talia .t2{left:13%;top:8%;transform:rotate(-1.5deg)}
.talia .t1{left:26%;top:16%;transform:rotate(4.5deg)}
.talia:hover .t3{transform:rotate(-9.5deg) translate(-8px,-6px)}
.talia:hover .t1{transform:rotate(6.5deg) translate(8px,6px)}
@media(prefers-reduced-motion:reduce){ .talia img,.talia:hover img{transition:none} }

.arkusze-lista{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.arkusze-lista li{padding-left:20px;border-left:2px solid var(--akcent-linia)}
.arkusze-lista b{
  display:block;font-family:var(--f-naglowek);font-weight:600;font-size:19px;
  color:var(--granat);margin-bottom:6px;
}
.arkusze-lista span{display:block;font-size:15.5px;line-height:1.65;color:var(--szary)}
.metoda-zamkniecie{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--linia);
  font-size:17px;line-height:1.65;color:var(--szary);max-width:62ch;
}

/* ─────────────── jak wygląda rok ─────────────── */
.kroki{list-style:none;margin:0;padding:0;counter-reset:kr;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:920px){ .kroki{grid-template-columns:1fr 1fr;gap:28px 22px} }
@media(max-width:560px){ .kroki{grid-template-columns:1fr} }
.kroki li{counter-increment:kr;position:relative;padding-top:52px}
.kroki li::before{
  content:counter(kr,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--f-naglowek);font-weight:600;font-size:15px;color:var(--akcent);
  border:1.5px solid var(--akcent-linia);border-radius:99px;padding:5px 13px;
  font-variant-numeric:tabular-nums;
}
.kroki h3{font-size:18.5px;margin-bottom:7px}
.kroki p{font-size:15.5px;line-height:1.55;color:var(--szary);margin:0}

/* ─────────────── cennik ─────────────── */
.karty-cen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}
@media(max-width:920px){ .karty-cen{grid-template-columns:1fr;gap:18px} }
.karta-ceny{
  background:#fff;border:1px solid var(--linia);border-radius:14px;
  padding:26px 26px 24px;display:flex;flex-direction:column;
}
.karta-ceny.wyroz{border:2px solid var(--akcent);box-shadow:var(--cien)}
.karta-ceny .plakietka{
  align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--akcent);color:#fff;border-radius:99px;padding:4px 12px;margin-bottom:14px;
}
.karta-ceny h3{font-size:20px;margin-bottom:14px}
.karta-ceny .kwota{font-family:var(--f-naglowek);font-weight:600;font-size:38px;line-height:1;color:var(--granat)}
.karta-ceny .za-lekcje{font-size:14.5px;color:var(--szary);font-weight:600;margin:6px 0 18px}
.karta-ceny dl{margin:0 0 20px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:15px}
.karta-ceny dt{color:var(--szary)}
.karta-ceny dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.karta-ceny .btn{margin-top:auto}

.tab-otoczka{overflow-x:auto;border:1px solid var(--linia);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:640px}
caption{text-align:left;padding:14px 18px 0;font-weight:700;color:var(--granat);font-family:var(--f-naglowek);font-size:18px}
th,td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--linia-2)}
thead th{
  background:var(--papier-2);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--szary);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:700;color:var(--granat)}

.dodatki{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media(max-width:860px){ .dodatki{grid-template-columns:1fr} }
.dodatek{border:1px solid var(--linia);border-radius:var(--r);padding:18px 20px;background:#fff}
.dodatek b{display:block;font-family:var(--f-naglowek);font-size:17px;color:var(--granat);margin-bottom:5px}
.dodatek span{font-size:15px;color:var(--szary)}
.dodatek .kw{display:block;margin-top:8px;font-weight:700;color:var(--atrament);font-variant-numeric:tabular-nums}

.zasady{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 34px}
@media(max-width:768px){ .zasady{grid-template-columns:1fr} }
.zasady li{position:relative;padding-left:24px;font-size:16px;line-height:1.55}
.zasady li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;border:2px solid var(--akcent)}
.zamkniecie{
  margin-top:34px;font-family:var(--f-naglowek);font-size:21px;color:var(--granat);
}

/* ─────────────── terminy ─────────────── */
.termin-tab td.miejsca{font-weight:700;white-space:nowrap}
.termin-tab td.miejsca.malo{color:var(--ostrzez)}
.termin-tab td.miejsca.brak{color:var(--pelna);font-weight:600}
.termin-tab .etykieta-pelna{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  border:1.5px solid var(--linia);border-radius:99px;padding:3px 11px;color:var(--pelna);background:var(--papier-2);
}
.aktualizacja{margin-top:14px;font-size:14.5px;color:var(--szary-2);font-style:italic}

/* ─────────────── opinie ─────────────── */
.opinie-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){ .opinie-siatka{grid-template-columns:1fr 1fr} }
@media(max-width:640px){
  .opinie-siatka{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-left:20px;
    margin-inline:-20px;padding:2px 20px 16px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  }
  .opinie-siatka::-webkit-scrollbar{height:4px}
  .opinie-siatka::-webkit-scrollbar-thumb{background:var(--linia);border-radius:4px}
  .opinie-siatka .opinia{
    flex:0 0 84%;scroll-snap-align:start;
  }
}
.opinia{border:1px solid var(--linia);border-radius:var(--r);padding:22px 24px;background:#fff;display:flex;flex-direction:column}
.opinia .kto{font-size:13.5px;font-weight:700;color:var(--szary);margin-bottom:12px;line-height:1.4}
.wynik{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-family:var(--f-naglowek);font-weight:600;font-size:25px;color:var(--granat);margin-bottom:12px;
}
.wynik s{text-decoration:none;color:var(--szary-2);font-size:20px}
.wynik em{font-style:normal;color:var(--akcent);font-size:17px}
.opinia blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--atrament)}
.opinia-pusta{border-style:dashed;color:var(--szary-2);align-items:center;justify-content:center;text-align:center;min-height:170px}
.opinia-pusta p{margin:0;font-size:14.5px;line-height:1.5}
.opinie-nota{margin-top:26px;font-size:14.5px;color:var(--szary);max-width:70ch}

/* ─────────────── o mnie ─────────────── */
.omnie-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
@media(max-width:900px){ .omnie-in{grid-template-columns:1fr;gap:28px} }
.omnie-foto{aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:var(--cien)}
.omnie-foto img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 14%}
.omnie-tresc p{font-size:17.5px;line-height:1.65}
/* Wykształcenie i staż — cztery pozycje jedna pod drugą, bo rodzic
   skanuje je wzrokiem, a nie czyta jak zdanie. */
.dorobek{list-style:none;margin:24px 0;padding:0;display:grid;gap:11px}
.dorobek li{display:flex;flex-direction:column;gap:2px;padding-left:17px;position:relative}
.dorobek li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--akcent)}
.dorobek b{font-family:var(--f-naglowek);font-weight:600;font-size:17px;color:var(--granat);line-height:1.25}
.dorobek span{font-size:15px;color:var(--szary);line-height:1.5}
.kluczowe{
  font-family:var(--f-naglowek);font-size:clamp(21px,2.5vw,27px);line-height:1.35;
  color:var(--granat);margin:0 0 24px;text-wrap:pretty;
}
.drobny-druk{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--linia);
  font-size:14px;line-height:1.6;color:var(--szary-2);
}

/* ─────────────── FAQ ─────────────── */
.faq-lista{border-top:1px solid var(--linia);max-width:900px}
.faq-lista details{border-bottom:1px solid var(--linia)}
.faq-lista summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-family:var(--f-naglowek);font-size:19px;font-weight:600;color:var(--granat);line-height:1.35;
}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{
  content:"";position:absolute;right:6px;top:50%;margin-top:-4px;
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--akcent);transition:transform .2s;
}
.faq-lista details[open] summary::after{transform:rotate(180deg)}
.faq-lista summary:hover{color:var(--akcent)}
.faq-lista .odp{padding:0 44px 22px 0;font-size:16.5px;line-height:1.65;color:var(--szary)}
.faq-lista .odp p:last-child{margin-bottom:0}
.faq-lista .odp b{color:var(--atrament)}

/* ─────────────── zapisy ─────────────── */
.zapisy-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start}
@media(max-width:900px){ .zapisy-in{grid-template-columns:1fr;gap:30px} }
.form-karta{background:#fff;border:1px solid var(--linia);border-radius:14px;padding:30px;box-shadow:var(--cien)}
@media(max-width:600px){ .form-karta{padding:22px 18px} }
.pola{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:680px){ .pola{grid-template-columns:1fr} }
.pole{display:flex;flex-direction:column;gap:6px}
.pole.szerokie{grid-column:1/-1}
.pole label{font-size:14.5px;font-weight:700;color:var(--granat)}
.pole label .opc{font-weight:600;color:var(--szary-2)}
.pole input,.pole select{
  font-family:var(--f-tekst);font-size:16.5px;color:var(--atrament);
  padding:12px 14px;border:1.5px solid var(--linia);border-radius:9px;background:#fff;
  transition:border-color .15s;width:100%;
}
.pole input:hover,.pole select:hover{border-color:var(--szary-2)}
.pole input:focus,.pole select:focus{border-color:var(--akcent);outline:none;box-shadow:0 0 0 3px rgba(143,74,5,.14)}
.pole .blad{font-size:13.5px;font-weight:700;color:#9B2C13;min-height:0}
.pole.zly input,.pole.zly select{border-color:#9B2C13}
.zgoda{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--szary)}
.zgoda input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--akcent)}
.miodek{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-stopa{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.form-nota{font-size:13.5px;color:var(--szary-2);line-height:1.5;margin:0}

.zapisy-bok{display:flex;flex-direction:column;gap:20px}
.bok-karta{border:1px solid var(--linia);border-radius:var(--r);padding:22px 24px;background:var(--papier-2)}
.bok-karta > b{display:block;font-family:var(--f-naglowek);font-size:18px;color:var(--granat);margin-bottom:8px}
.bok-karta p b{color:var(--granat)}
.bok-karta p{margin:0;font-size:15.5px;line-height:1.6;color:var(--szary)}
.bok-karta p + p{margin-top:10px}
.bok-tel{
  display:flex;align-items:center;gap:11px;font-family:var(--f-naglowek);font-size:23px;
  color:var(--granat);font-weight:600;margin-bottom:6px;
}
.bok-tel:hover{color:var(--akcent);text-decoration:none}

/* ─────────────── stopka ─────────────── */
.stopka{background:var(--granat);color:#C3D0DC;padding:52px 0 26px;margin-top:0}
.stopka-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:36px;padding-bottom:30px}
@media(max-width:860px){ .stopka-in{grid-template-columns:1fr;gap:26px} }
.stopka h3{color:#fff;font-size:16px;margin-bottom:12px}
.stopka a{color:#C3D0DC}
.stopka a:hover{color:#fff}
.stopka .marka b{color:#fff}
.stopka .marka span{color:#8FA4B8}
.stopka-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15.5px}
.stopka-dol{
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;
  font-size:13.5px;color:#8FA4B8;
}
.link-jak-btn{background:none;border:0;padding:0;color:#C3D0DC;font:inherit;cursor:pointer;text-decoration:underline}
.link-jak-btn:hover{color:#fff}

/* ─────────────── pasek mobilny ─────────────── */
.pasek-mob{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--linia);padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:8px;
}
.pasek-mob a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:13px;font-weight:700;padding:9px 4px;border-radius:9px;
  border:1.5px solid var(--linia);color:var(--granat);text-align:center;line-height:1.15;
}
.pasek-mob a small{font-size:10.5px;font-weight:600;color:var(--szary-2)}
.pasek-mob a.gl{background:var(--akcent);border-color:var(--akcent);color:#fff;flex:1.3}
.pasek-mob a:hover{text-decoration:none}
@media(max-width:768px){
  .pasek-mob{display:flex}
  body{padding-bottom:78px}
}

/* ─────────────── nakładka: polityka prywatności ─────────────── */
.naklad{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
}
.naklad[open],.naklad.otwarta{display:flex}
.naklad-tlo{position:absolute;inset:0;background:rgba(15,36,54,.5)}
.naklad-okno{
  position:relative;background:#fff;border-radius:14px;width:min(760px,100%);
  max-height:min(84vh,780px);overflow:auto;padding:34px 38px 32px;box-shadow:var(--cien-mocny);
}
@media(max-width:600px){ .naklad-okno{padding:24px 20px} }
.naklad-okno h2{font-size:26px;margin-bottom:16px;padding-right:44px}
.naklad-okno h3{font-size:17px;margin:22px 0 6px}
.naklad-okno p,.naklad-okno li{font-size:15.5px;line-height:1.6;color:var(--szary)}
.naklad-zamknij{
  position:absolute;top:16px;right:16px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--papier-2);border:1px solid var(--linia);border-radius:50%;cursor:pointer;
  color:var(--granat);font-size:20px;line-height:1;
}
.naklad-zamknij:hover{background:var(--linia-2)}

/* ─────────────── informacja dla zleceniodawcy (znika na produkcji) ── */
.do-uzupelnienia{
  border:1.5px dashed var(--akcent-linia);background:var(--akcent-tlo);
  border-radius:var(--r);padding:14px 18px;font-size:14.5px;line-height:1.55;color:var(--ostrzez);
}
.do-uzupelnienia b{display:block;font-weight:800;margin-bottom:3px}


/* Awaryjny kontakt — pokazywany, dopóki formularz nie ma punktu odbioru. */
.form-awaryjny{margin-top:1.2rem;padding:1.1rem 1.2rem;
  background:var(--akcent-tlo);border:1px solid var(--akcent-linia);
  border-radius:10px}
.form-awaryjny p{margin:0 0 .8rem}
.form-awaryjny p:last-child{margin-bottom:0}
.form-awaryjny-akcje{display:flex;flex-wrap:wrap;gap:.6rem}


/* Wariant weekendowy — szeroki pasek pod trzema progami.
   Musi stac PO regule .karta-ceny, bo obie maja te sama moc
   i wygrywa ta pozniejsza. Wczesniej moje reguly byly cicho
   nadpisywane i karta skladala sie w pion. */
/* (przeniesione) Trzy progi cenowe w rzedzie. Wariant weekendowy to inny FORMAT tej
   samej ceny co kurs tygodniowy, a nie czwarty prog — dlatego dostaje
   wlasny szeroki pasek pod nimi, zamiast udawac czwarta kolumne. */

.karta-ceny-szeroka{grid-column:1 / -1;display:grid;gap:14px 32px;
  grid-template-columns:minmax(15rem,20rem) 1fr;align-items:center;
  text-align:left}
.karta-ceny-szeroka h3{margin-bottom:2px}
.karta-ceny-szeroka .kwota{display:block}
.karta-ceny-szeroka .za-lekcje{margin-bottom:10px}
.karta-ceny-szeroka .naglowek-wariantu{display:flex;flex-direction:column;
  gap:2px}
.karta-ceny-szeroka dl{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:6px 18px;margin:0}
.karta-ceny-szeroka dl>div{display:flex;flex-direction:column}
.karta-ceny-szeroka dt{font-size:13px;color:var(--szary)}
.karta-ceny-szeroka dd{margin:0;font-weight:700}
.karta-ceny-szeroka .btn{justify-self:start;margin-top:6px}
@media(max-width:920px){
  .karta-ceny-szeroka{grid-template-columns:1fr}
}.karta-ceny-szeroka dd{text-align:left}
.karta-ceny-szeroka .naglowek-wariantu{align-items:flex-start}


/* Komunikat po odbiciu zgłoszenia. Siedzi WEWNĄTRZ formularza, nad
   polami — wstawiony przed nim trafiał do sąsiedniej kolumny układu
   i zajmował pół ekranu z dala od pól, których dotyczy. */
.form-komunikat{grid-column:1 / -1;margin:0 0 16px;padding:12px 15px;
  border-radius:var(--r);font-size:15.5px;line-height:1.5}
.form-komunikat p{margin:0}
.form-komunikat.udany{background:#eaf7f0;border:1px solid #bfe3cd;
  color:#12502f}
.form-komunikat.bledny{background:var(--akcent-tlo);
  border:1px solid var(--akcent-linia);color:var(--ostrzez)}


/* Pole na wiadomość — ten sam wygląd co pozostałe pola formularza.
   Bez tego textarea dziedziczy krój systemowy i odstaje od reszty. */
.pole textarea{font-family:var(--f-tekst);font-size:16.5px;
  color:var(--atrament);padding:12px 14px;border:1.5px solid var(--linia);
  border-radius:9px;background:#fff;resize:vertical;min-height:96px;
  line-height:1.55}
.pole textarea:hover{border-color:var(--szary-2)}
.pole textarea:focus{border-color:var(--akcent);outline:none;
  box-shadow:0 0 0 3px rgba(143,74,5,.14)}
.pole.zly textarea{border-color:#9B2C13}