/* OFERTA — końcowa sekcja sprzedażowa, osobna od magazynowej sekcji „Kurs od środka” (04.10.2026).
   Kuba po szklanym okienku zakupu: „chodziło mi o coś bardziej sprzedażowego… ostatnie wymienienie, co się zyskuje, czego się ktoś uczy…
   official… musi być informacja, że cena po pre-orderze idzie wyżej na 1299… oddzieliłbym to, żeby to nie było kolejną kafelką… wysoki panel”.
   Dlatego: WYSOKI CZARNY PANEL na całą szerokość strony (koniec szarego papieru = wyraźna granica sekcji), bez szkła i bez efektów.
   Z lewej tytuł, zdanie z hero i dwie listy: „Uczysz się” (siedem punktów słowo w słowo z tafli sekcji 2) i „W zestawie” (siedem pozycji z sekcji wyżej).
   Z prawej cena pre-orderu, zdanie o cenie po pre-orderze i przycisk. Telefon: jedna kolumna, przycisk na samym końcu strony.
   CENA: 1299 zł to zapowiedź ceny PO pre-orderze, podana zwykłym zdaniem. Bez przekreślenia i bez „oszczędzasz”, bo ta cena jeszcze nie obowiązywała
   (przekreślona wyglądałaby na obniżkę, a to już informowanie o obniżce ceny, UOKiK). */

.oferta{position:relative;z-index:2;background:var(--black);color:#fff;
  --f-etyk:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;--kreska:rgba(255,255,255,.2);
  padding:calc(var(--vh,1svh)*16) 5vw calc(var(--vh,1svh)*16)}
.oferta-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6.4vw,104px);align-items:end}

/* ——— lewa kolumna: co to jest i co się z tego ma ——— */
.of-etyk{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.of-etyk i{width:9px;height:2.5px;background:var(--baby)}
.of-h{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.06;letter-spacing:0;font-size:clamp(30px,3.7vw,52px)}
.of-lead{margin:18px 0 0;max-width:30em;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  line-height:1.45;color:rgba(255,255,255,.82)}
.of-listy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);margin-top:clamp(40px,4.6vw,68px)}
.of-lista h3{margin:0 0 10px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.of-lista ul{list-style:none;margin:0;padding:0}
.of-lista li{padding:11px 0 10px;border-top:1px solid var(--kreska);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
  font-size:17px;line-height:1.3;color:rgba(255,255,255,.94)}
.of-lista li:last-child{border-bottom:1px solid var(--kreska)}

/* ——— prawa kolumna: cena i przycisk; cena tuszem na pełną szerokość kolumny, czyli równo z krawędziami przycisku ——— */
.of-kup{container-type:inline-size}
.of-cena-etyk{display:block;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.of-cena{display:block;margin:16px 0 0 -.084em;font-family:var(--display);font-weight:900;font-style:italic;font-size:calc(100cqw/5.72);line-height:.86;
  text-transform:uppercase;white-space:nowrap}             /* „999 ZŁ” pochyłe = 5,85 em, tusz 5,68 em */
.of-potem{margin:20px 0 0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:17px;line-height:1.4;color:rgba(255,255,255,.82)}
.of-potem b{font-weight:600;color:#fff;white-space:nowrap}
.of-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:30px;padding:23px 26px 22px;background:#fff;color:var(--black);
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s,transform .18s}
.of-btn i{font-style:normal;transition:transform .18s}
.of-btn:hover{background:var(--orange);color:#fff;transform:translateY(-1px)}      /* jak każdy przycisk na stronie: po najechaniu pomarańcz */
.of-btn:hover i{transform:translateX(4px)}
.of-btn:focus-visible{outline:2px solid var(--baby);outline-offset:3px}
/* zdanie o akceptacji regulaminu: drobny druk pod przyciskiem, od lewej krawędzi kolumny jak cena i przycisk (wymóg Przelewy24, zamiast pola wyboru).
   Na komputerze wisi POD kolumną (absolute), żeby dół przycisku został równo z dolną kreską list z lewej; na telefonie stoi zwyczajnie w kolumnie. */
.of-kup{position:relative}
.of-zgoda{position:absolute;left:0;top:100%;margin:14px 0 0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.62)}
.of-zgoda a{color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .18s}
.of-zgoda a:hover{color:#fff}
.of-zgoda a:focus-visible{outline:2px solid var(--baby);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.of-btn,.of-btn i,.of-zgoda a{transition:none}}

@media(max-width:820px){
  .oferta{padding:calc(var(--vh,1svh)*11) 18px calc(var(--vh,1svh)*11)}
  .oferta-in{display:block}
  .of-etyk{margin-bottom:16px;font-size:9.5px;letter-spacing:.06em}
  .of-h{font-size:calc((100vw - 36px)/11.4)}                /* „DO KURSU” (dłuższa linia) zajmuje ok. 4/5 szerokości */
  .of-lead{margin-top:14px;font-size:16px}
  .of-listy{column-gap:16px;margin-top:30px}
  .of-lista h3{font-size:9.5px;margin-bottom:8px}
  .of-lista li{padding:9px 0 8px;font-size:14.5px;line-height:1.28}
  .of-kup{margin-top:38px}
  .of-cena-etyk{font-size:9.5px}
  .of-cena{margin-top:14px}
  .of-potem{margin-top:16px;font-size:15.5px}
  .of-btn{margin-top:24px;padding:19px 18px 18px;font-size:12.5px;letter-spacing:.08em}
  .of-zgoda{position:static;margin-top:12px;font-size:12.5px}
}