/* ============================================================
   Trener personalny — landing page
   Styl:   Minimal & Direct · Density 3/10 (spacious) · Motion 3/10 (subtle)
   Zasada: pomarańcz TYLKO na przyciskach i etykietach.
           Zielony TYLKO jako semantyka „spełnione”, nigdy jako CTA.
   ============================================================ */

:root{
  /* --- kolory --- */
  --bg:#ffffff;
  --surface:#f6f7f9;
  --surface2:#ffffff;
  --line:#e3e7eb;
  --txt:#14181d;
  --txt2:#3c444d;
  --mut:#5c6771;              /* 5,5:1 na --bg ✓ */
  --pri:#f97316;              /* CTA */
  --pri-hi:#c2410c;
  --pri-hover:#ea580c;        /* tlo przycisku po najechaniu */
  --on-pri:#1a1205;           /* ciemny tekst na pomarańczu — 4,81:1 ✓ */
  --ok:#127a3d;               /* wyłącznie semantyka */
  --err:#b3300b;                    /* blad w formularzu */
  --txt-strong:#000000;             /* wyroznienia w tresci */
  --hdr:255,255,255;                   /* tlo naglowka/paska, skladowe RGB */
  --ftr-bg:#f1f3f5;                 /* stopka */
  --slot-bg:rgba(0,0,0,.025);  /* puste miejsce na wideo */
  --uchwyt:#ffffff;                 /* uchwyt suwaka przed/po */
  --lbl-bg:rgba(0,0,0,.75);          /* plakietka PRZED */
  --lbl-txt:#f2f4f6;
  --hero-1:#eceff2; --hero-2:#f7f8fa; --hero-3:#ffffff;  /* gradient hero */

  /* --- typografia (para Sports/Fitness) --- */
  --head:'Barlow Condensed',Impact,sans-serif;
  --body:'Barlow','Barlow Condensed',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* --- spacing, Density 3/10 --- */
  --sp-xs:4px; --sp-sm:8px; --sp-md:24px; --sp-lg:32px;
  --sp-xl:48px; --sp-2xl:64px; --sp-3xl:96px;

  /* --- minimalny rozmiar etykiety: 12px, nie mniej --- */
  --fs-label:.78rem;

  --max:1120px;
  --ease:200ms cubic-bezier(.4,0,.2,1);
}


/* --- 2. STONOWANY: nadal ciemny, ale jasniejszy i o mniejszym kontrascie --- */

/* --- 3. BIALY: czysta biel, karty biale na hairline, pomaranczowy akcent ---
   Pomaranczy uzywamy w dwoch odcieniach, bo jeden nie spelnia obu rol:
     --pri      #F97316  wyrazisty, na TLA przyciskow (z ciemnym tekstem 6,4:1)
     --pri-hi   #C2410C  ciemniejszy, na TEKST (eyebrow, liczby) — 5,2:1 na bieli
   Zywy pomaranczowy jako tekst na bieli dawalby 2,8:1 i nie przechodzilby. */

/* --- 4. CIEPLY: papier zamiast bieli, ten sam uklad --- */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* fokus klawiatury — wymóg a11y, priorytet 1 */
:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--pri-hi);outline-offset:3px;border-radius:2px;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp-md)}
.wrap--mid{max-width:840px}
.wrap--narrow{max-width:760px}

/* ---------- TYPOGRAFIA ---------- */
.h2{
  font-family:var(--head);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.1;
  text-transform:uppercase;margin-bottom:var(--sp-md);text-wrap:balance;
}
.h2--c{text-align:center}
.eyebrow{
  font-size:var(--fs-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--pri-hi);margin-bottom:var(--sp-sm);
}
.lead{font-size:1.08rem;color:var(--txt2);max-width:68ch;margin-bottom:var(--sp-xl)}
.lead--c{text-align:center;margin-left:auto;margin-right:auto}
em{font-style:normal;color:var(--pri-hi)}
b,strong{font-weight:600;color:var(--txt-strong)}

/* ---------- IKONY (SVG, jeden zestaw — Lucide) ---------- */
.ico{width:20px;height:20px;flex-shrink:0}
.ico--ok{color:var(--ok);margin-top:5px}
.ico--shield{width:34px;height:34px;color:var(--ok)}

/* ---------- PRZYCISKI ---------- */
.btn{
  display:inline-block;background:var(--pri);color:var(--on-pri);text-decoration:none;
  font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:6px;border:1px solid var(--pri);
  transition:background var(--ease),box-shadow var(--ease);cursor:pointer;text-align:center;
}
.btn:hover{background:var(--pri-hover);border-color:var(--pri-hover);box-shadow:0 6px 20px rgba(226,87,30,.3)}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn--lg{font-size:1.06rem;padding:18px 38px}
.btn--sm{padding:11px 20px;font-size:.9rem}
.btn--full{display:block;width:100%}
.lnk{
  display:inline-block;padding:10px 0;color:var(--txt2);font-weight:500;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line);
  transition:color var(--ease),text-decoration-color var(--ease);
}
.lnk:hover{color:var(--txt);text-decoration-color:var(--pri)}

/* ---------- HEADER ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(var(--hdr),.62);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:background .25s,border-color .25s;
}
.hdr.is-stuck{background:rgba(var(--hdr),.97);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-lg);height:88px}
.logo{display:block;text-decoration:none;line-height:1.3;flex-shrink:0;padding:6px 0}
.logo__name{display:block;font-family:var(--head);font-weight:700;font-size:1.24rem;text-transform:uppercase;letter-spacing:.02em}
.logo__sub{display:block;font-size:var(--fs-label);letter-spacing:.06em;color:var(--mut)}
.nav{display:flex;gap:var(--sp-md);margin-left:auto}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;
  color:var(--mut);transition:color var(--ease);
  padding:12px 4px;                      /* cel dotykowy ≥44px */
}
.nav a:hover,.nav a.is-here{color:var(--txt)}
.hdr__cta{flex-shrink:0}
/* margin-left:auto tu, nie na .nav — na mobile .nav ma display:none i wypada
   z ukladu flex razem ze swoim auto-marginesem, wiec to hamburger musi sam
   pchac sie do prawej krawedzi. */
.burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:5px;padding:14px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--txt);transition:transform var(--ease),opacity var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;padding:160px 0 var(--sp-3xl);overflow:hidden}
.hero__bg{
  position:absolute;inset:0;
  background:radial-gradient(110% 85% at 78% 20%,var(--hero-1) 0%,var(--hero-2) 48%,var(--hero-3) 100%);
  /* ⬇ PODMIEŃ NA SWOJE ZDJĘCIE (poziome, sylwetka po prawej):
     background:url('img/hero.jpg') center/cover no-repeat; */
}
.hero__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--hdr),.95) 0%,rgba(var(--hdr),.8) 50%,rgba(var(--hdr),.45) 100%)}
.hero__in{position:relative;z-index:2}
.hero__h1{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.5rem,6.4vw,4.6rem);line-height:.98;letter-spacing:-.01em;margin-bottom:var(--sp-md);
}
.hero__sub{font-size:1.15rem;color:var(--txt2);max-width:52ch;margin-bottom:var(--sp-xl);line-height:1.6}
.hero__cta{display:flex;align-items:center;gap:var(--sp-lg);flex-wrap:wrap}

/* Wideo w hero. Do 900 px leży pod tekstem, powyżej staje obok niego —
   po prawej, czyli tam, gdzie zasłona hero jest najjaśniejsza. */
.hero__vid{
  position:relative;margin-bottom:var(--sp-xl);width:100%;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:#000;box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hero__vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* Chrome rysuje na wideo wlasny, szary przycisk odtwarzania, ktory przebijal
   spod naszej okladki jako jasna obwodka — dlatego go chowamy, ale TYLKO
   dopoki okladka (.hero__play) jest widoczna. Gdyby ta regula dzialala
   caly czas, po zapauzowaniu filmu w trakcie znikalby tez duzy, oczywisty
   przycisk „dotknij, zeby wznowic” — a to on jest glownym miejscem, w ktore
   ludzie klikaja, zwlaszcza na telefonie. :has() cofa to ukrycie od razu,
   gdy okladka dostaje klase is-off (patrz script.js). */
.hero__vid:has(.hero__play:not(.is-off)) video::-webkit-media-controls-overlay-play-button{display:none}

/* Okładka na posterze: sam przycisk odtwarzania. Znika po kliknięciu.
   Bez przyciemnienia — podpisu już tu nie ma, więc gradient tylko szarzył
   okładkę. Przycisk broni się kolorem i własnym cieniem. */
.hero__play{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sp-md);
  border:0;cursor:pointer;color:#fff;background:none;
  transition:opacity .18s ease;
}
.hero__play:hover .hero__playIco{transform:scale(1.06)}
.hero__play.is-off{display:none}
.hero__playIco{
  display:grid;place-items:center;width:76px;height:76px;border-radius:50%;
  background:var(--pri);color:var(--on-pri);
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .18s ease;
}
.hero__playIco svg{width:34px;height:34px;margin-left:3px}

@media (min-width:900px){
  /* Lewa kolumna: tekst i CTA jeden pod drugim. Prawa: wideo przez oba wiersze.
     Odstęp pionowy robią marginesy .hero__sub, dlatego row-gap jest zerowy. */
  .hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:0 var(--sp-2xl)}
  .hero__txt{grid-column:1;grid-row:1}
  .hero__cta{grid-column:1;grid-row:2}
  .hero__vid{grid-column:2;grid-row:1 / 3;align-self:center;margin-bottom:0}
  /* Nagłówek dostaje węższą kolumnę niż przy hero bez wideo — bez zejścia
     ze stopnia pisma rozbijałby się na cztery linie. */
  .hero__h1{font-size:clamp(2.5rem,4.6vw,3.6rem)}
}
@media (max-width:520px){
  .hero__playIco{width:60px;height:60px}
  .hero__playIco svg{width:26px;height:26px}
}

/* ---------- SEKCJE ---------- */
.sec{padding:var(--sp-3xl) 0}
.sec--dark{background:var(--surface)}
.sec--cta{background:var(--surface);border-top:1px solid var(--line)}

.note{
  color:var(--txt2);font-size:1rem;line-height:1.65;
  border-left:2px solid var(--pri);padding:4px 0 4px var(--sp-md);max-width:70ch;
}

/* ---------- EFEKTY / PRZED-PO ----------
   Jedna przemiana na wiersz, sekcja na pełnej szerokości — zdjęcia są tu dowodem,
   więc muszą być duże. Tekst obok zostaje w czytelnej mierze przez max-width na .lead. */
.tst{display:grid;gap:var(--sp-3xl);margin:var(--sp-xl) 0 0}
/* suwak po lewej, opis po prawej — inaczej jedna sylwetka 3:4 na całą szerokość
   dałaby ponad 1400px wysokości */
.tst__i{display:grid;gap:var(--sp-md)}

/* ---- suwak przed/po ----
   Ramka jest pozioma (3:2), bo zdjęcie „po” Mateusza kończy się krawędzią lustra
   w połowie wysokości — pełnej sylwetki po tej stronie fizycznie nie ma.
   Porównujemy tors do torsu, za to na tym samym poziomie. */
.ba2{
  position:relative;aspect-ratio:var(--ar,3/2);       /* rezerwuje miejsce → brak CLS */
  /* width:100% jest konieczne — margin-inline:auto wyłącza rozciąganie elementu
     siatki, a panele są pozycjonowane absolutnie, więc ramka zapadłaby się do zera */
  width:100%;max-width:var(--w,720px);margin-inline:auto;
  border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line);
  touch-action:pan-y;                                /* pion nadal przewija stronę */
}
/* UWAGA przy kalibracji: przy --z:1 sylwetka na ekranie jest tak duża, jak SZEROKA
   jest ramka — bo zdjęcie ma wtedy dokładnie jej szerokość. Podniesienie --ar dodaje
   tylko otoczenia nad i pod sylwetką, nie zmniejsza jej ani o piksel.
   Żeby realnie oddalić, zmniejsza się --w (szerokość ramki). */
/* przycięcie siedzi na nieprzetransformowanym opakowaniu — na skalowanym zdjęciu
   linia podziału jechałaby razem z transformacją */
.ba2__pane{position:absolute;inset:0;overflow:hidden}
.ba2__pane--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
/* --z (zoom) i --y (przesunięcie w górę) ustawiane per zdjęcie w atrybucie style;
   wyprowadzenie liczb w komentarzu w index.html */
.ba2__img{
  position:absolute;top:0;left:0;width:100%;height:auto;
  transform-origin:top center;
  transform:translateY(calc(-1 * var(--y,0%))) scale(var(--z,1));
  user-select:none;-webkit-user-drag:none;
}


.ba2__handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;z-index:3;
  background:var(--uchwyt);transform:translateX(-1px);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.ba2__handle svg{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:26px;padding:9px;box-sizing:content-box;
  background:var(--uchwyt);color:var(--on-pri);border-radius:50%;
  box-shadow:0 3px 14px rgba(0,0,0,.5);
}
/* sama kontrolka jest przezroczysta i przykrywa całe zdjęcie:
   klik lub przeciągnięcie w dowolnym miejscu ustawia podział */
.ba2__range{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;border:0;
  cursor:ew-resize;
}
.ba2__range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%;cursor:ew-resize}
.ba2__range::-moz-range-thumb{width:52px;height:100vh;border:0;background:transparent;cursor:ew-resize}
.ba2__range::-moz-range-track{background:transparent}
/* obrys przenosimy z przezroczystej kontrolki na widoczny uchwyt.
   Klasa, nie :has() — obrys fokusu nie może zależeć od jednej funkcji CSS. */
.ba2__range:focus,.ba2__range:focus-visible{outline:none}
.ba2.is-focus .ba2__handle svg{outline:3px solid var(--pri-hi);outline-offset:3px}

/* Podpis nad zdjeciem. Kluczowe: NIE moze wygladac jak naglowek sekcji —
   ten sam krój, wersaliki i waga sprawialy, ze imie czytalo sie jak ciag dalszy
   tytulu. Stad mniejszy rozmiar i pomaranczowa kreska, ktora oznacza etykiete. */
.tst__i figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-sm) var(--sp-md);
  border-left:3px solid var(--pri);padding:2px 0 2px 14px;
}
.tst__i figcaption>b{
  font-family:var(--head);font-weight:700;font-size:1.7rem;
  text-transform:uppercase;color:var(--txt-strong);line-height:1;letter-spacing:.01em;
}
.tst__res{color:var(--pri-hi);font-weight:600;font-size:1.1rem;line-height:1.2}
.tst__drag{
  margin-left:auto;
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
}
/* opinia, gdy dostaniesz ją od podopiecznego — łamie się na własny wiersz pod nazwiskiem */
.tst__q{flex:1 0 100%;order:1;font-size:1.05rem;color:var(--txt2);font-style:italic;line-height:1.6;max-width:70ch;margin-top:var(--sp-sm)}



/* ---------- DLA KOGO ---------- */
.who{list-style:none;display:grid;gap:var(--sp-md);max-width:64ch}
.who li{position:relative;padding-left:26px;color:var(--txt2);font-size:1.06rem}
.who li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--pri)}
.who__note{margin-top:var(--sp-lg);color:var(--txt);font-size:1.06rem;max-width:64ch}

/* ---------- O MNIE ---------- */
.about{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-xl);align-items:start}
/* prostokat, nie kolo — zdjecie jest pionowe 3:4 i w kole robilaby sie elipsa */
.about__ph img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block}
.about__t .h2{margin-bottom:var(--sp-md)}
.about__t p{color:var(--txt2);margin-bottom:var(--sp-md);max-width:66ch}

/* ---------- CENNIK ---------- */
.plan{
  max-width:640px;margin:0 auto var(--sp-lg);
  /* surface2 — sekcja cennika stoi na --surface */
  background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:var(--sp-lg);display:flex;flex-direction:column;gap:var(--sp-md);
}
.plan__n{font-family:var(--head);font-weight:700;font-size:1.75rem;text-transform:uppercase;letter-spacing:.02em;text-align:center}
.plan__d{font-size:.94rem;color:var(--mut);text-align:center;margin-top:-16px}
.stack{list-style:none;display:grid;gap:var(--sp-md);margin:var(--sp-sm) 0}
.stack li{display:flex;gap:14px;align-items:flex-start}
.stack b{display:block;font-size:1rem;color:var(--txt-strong);margin-bottom:2px;line-height:1.45}
.stack p{font-size:.94rem;color:var(--mut);line-height:1.55}
.plan__p{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sp-md) 0;text-align:center}
.plan__p span{font-family:var(--head);font-weight:700;font-size:3.3rem;color:var(--txt-strong);line-height:1;font-variant-numeric:tabular-nums}
.plan__p small{display:block;font-size:.88rem;color:var(--mut);margin-top:6px}
.plan__math{font-size:.94rem;color:var(--txt2);text-align:center;margin-top:-12px}

/* Za co realnie płaci klient — akapit nad listą, mocniejszy niż .plan__d. */
.plan__co{
  font-size:1rem;color:var(--txt2);line-height:1.6;text-align:center;
  max-width:52ch;margin:0 auto;
}

/* Lista bez opisów pod hasłami — sam znacznik i jedna linia. */
.stack--krotka{gap:var(--sp-sm)}
.stack--krotka li{align-items:center}
.stack--krotka b{margin-bottom:0}

/* Trzy warianty ceny. Wiersze, nie kolumny — karta ma 640 px, trzy kolumny
   ścisnęłyby kwoty do ~175 px i liczby przestałyby być czytelne. */
.tiers{border-bottom:1px solid var(--line)}
.tier{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-md);padding:var(--sp-md) 0}
.tier+.tier{border-top:1px solid var(--line)}
.tier__l b{
  display:block;font-family:var(--head);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--txt-strong);
}
.tier__l small{display:block;font-size:.9rem;color:var(--mut);line-height:1.5;margin-top:4px}
.tier__p{flex:none;text-align:right}
.tier__p span{
  font-family:var(--head);font-weight:700;font-size:2.1rem;line-height:1;
  color:var(--txt-strong);font-variant-numeric:tabular-nums;
}
.tier__p span i{
  font-style:normal;font-weight:500;font-size:1rem;color:var(--mut);margin-left:2px;
}
.tier--hi .tier__p span{color:var(--pri)}
.tier--hi .tier__p span i{color:var(--mut)}
@media (max-width:480px){
  .tier{flex-direction:column;align-items:flex-start;gap:8px}
  .tier__p{text-align:left}
}

.guarantee{
  max-width:640px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-md);align-items:start;
  border:1px solid rgba(34,197,94,.3);border-radius:10px;padding:var(--sp-md) var(--sp-md);
}
.guarantee h3{font-family:var(--head);font-weight:700;font-size:1.4rem;text-transform:uppercase;margin-bottom:var(--sp-sm)}
.guarantee p{color:var(--txt2);font-size:1rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{
  cursor:pointer;list-style:none;padding:20px 48px 20px 0;position:relative;
  font-size:1.08rem;font-weight:600;color:var(--txt);line-height:1.5;
}
.faq__i summary::-webkit-details-marker{display:none}
/* ikona SVG (Lucide chevron-down) przez mask — nie znak tekstowy */
.faq__i summary::after{
  content:"";position:absolute;right:6px;top:50%;margin-top:-10px;
  width:20px;height:20px;background-color:var(--mut);
  transition:transform var(--ease),background-color var(--ease);
  -webkit-mask:var(--chev) center/20px no-repeat;mask:var(--chev) center/20px no-repeat;
}
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.faq__i[open] summary::after{transform:rotate(180deg);background-color:var(--pri-hi)}
.faq__i>div{padding:0 48px 22px 0;color:var(--txt2);font-size:1rem}

/* ---------- LOKALIZACJA ---------- */
.loc{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-xl);align-items:stretch}
/* Bez ramki — sekcja stoi na bieli, więc biała karta tylko by się rozmyła.
   Kotwicą wizualną jest mapa obok. */
.loc__info{
  padding:var(--sp-md) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-sm);
}
.loc__gym{font-family:var(--head);font-weight:700;font-size:1.4rem;text-transform:uppercase;color:var(--txt-strong)}
.loc__addr{color:var(--txt2);line-height:1.6}
.loc__map{border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:320px}
.loc__map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* ---------- FORMULARZ ---------- */
.form{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:var(--sp-lg);display:grid;gap:var(--sp-md)}
.form label{display:grid;gap:var(--sp-sm);font-size:.86rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);cursor:pointer}
.form input,.form textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:14px 16px;
  color:var(--txt);font-family:var(--body);font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0;
  transition:border-color var(--ease);
}
.form input:focus,.form textarea:focus{border-color:var(--pri)}
.form textarea{resize:vertical}
.hint{font-size:.82rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--mut)}
.err{font-size:.85rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--err)}
.form input[aria-invalid="true"]{border-color:var(--err)}

/* checkbox: cel dotykowy przez całą etykietę, min 44px */
.form__chk{
  display:flex!important;flex-direction:row;align-items:center;gap:14px;
  min-height:44px;padding:var(--sp-sm) 0;
  text-transform:none;letter-spacing:0;font-weight:400;font-size:.92rem;color:var(--txt2);
}
.form__chk input{width:24px;height:24px;flex-shrink:0;accent-color:var(--pri);cursor:pointer}
.form__chk a{color:var(--pri-hi)}
.form__note{font-size:.88rem;color:var(--mut);text-align:center}
.form__note a{color:var(--txt2);text-decoration:underline;text-underline-offset:3px}
.form__ok{color:var(--ok);text-align:center;font-weight:600}
.form__blad{color:var(--err);text-align:center;font-weight:600}
.form__blad a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- STOPKA ---------- */
.ftr{background:var(--ftr-bg);border-top:1px solid var(--line);padding:var(--sp-2xl) 0;font-size:.92rem;color:var(--mut)}
/* Jeden rzad: nazwa dociagnieta do lewej krawedzi tresci, linki do prawej. */
.ftr__in{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-lg)}
.ftr__logo{font-family:var(--head);font-weight:700;font-size:1.24rem;text-transform:uppercase;color:var(--txt);margin-bottom:var(--sp-sm)}
.ftr a{color:var(--mut);text-decoration:none;transition:color var(--ease)}
.ftr a:hover{color:var(--txt)}
.ftr__meta{font-size:.84rem;line-height:1.55}
/* Adres e-mail podkreslamy — bez tego wyglada na zwykly tekst i nikt w niego
   nie klika, a to jedyna droga kontaktu poza formularzem. */
.ftr__meta a{text-decoration:underline;text-underline-offset:3px}
.ftr__links{display:flex;gap:var(--sp-md);flex:none;font-size:.84rem}
.ftr__links a{padding:4px 0;text-decoration:underline;text-underline-offset:3px}

/* ---------- MOBILNE STICKY CTA ---------- */
.mcta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;padding:10px 14px;
  background:rgba(var(--hdr),.97);border-top:1px solid var(--line);backdrop-filter:blur(10px);
  transform:translateY(100%);transition:transform var(--ease);
}
/* Widoczny dopiero po zjechaniu za wlasny przycisk hero (patrz script.js) —
   inaczej na starcie strony dwa identyczne CTA staly jeden nad drugim. */
.mcta.is-visible{transform:translateY(0)}
/* Na czas odtwarzania filmu w hero sticky CTA schodzi z ekranu — inaczej
   zaslania dolna krawedz kadru razem ze sterowaniem odtwarzacza. */
body.is-film .mcta{transform:translateY(100%)}

/* ---------- ZGODA NA COOKIES ----------
   Zakrywa cala strone i blokuje przewijanie do czasu decyzji. Oba przyciski
   sa widoczne od razu — RODO wymaga, zeby odmowa byla rownie latwa jak zgoda,
   wiec „Nie zgadzam sie” nie moze byc schowane ani wyszarzone do niewidocznosci. */
/* BEZ ANIMACJI WEJSCIA — celowo. Okno blokuje przewijanie strony, wiec gdyby
   animacja utknela na pierwszej klatce (opacity:0), uzytkownik dostalby pusta,
   zablokowana strone i nie mialby jak jej odblokowac. Zgoda na cookies jest
   wymagana prawnie, wiec jej widocznosc nie moze zalezec od tego, czy
   przegladarka zdazyla odtworzyc animacje. */
.ck{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:var(--sp-md);
  background:rgba(10,13,16,.72);backdrop-filter:blur(6px);
  opacity:1;
}
.ck__karta{
  width:100%;max-width:560px;background:var(--bg);border-radius:16px;
  padding:var(--sp-xl);box-shadow:0 30px 80px rgba(0,0,0,.4);
  opacity:1;
}
.ck__tyt{
  font-family:var(--head);font-weight:700;font-size:clamp(1.5rem,4vw,2rem);
  text-transform:uppercase;line-height:1.15;margin-bottom:var(--sp-md);color:var(--txt);
}
.ck__txt{color:var(--txt2);font-size:1rem;line-height:1.6;margin-bottom:var(--sp-md)}
.ck__txt--drobne{font-size:.9rem;color:var(--mut)}
.ck__txt a{color:var(--pri-hi);text-decoration:underline;text-underline-offset:3px}
.ck__akcje{display:flex;flex-direction:column;gap:var(--sp-sm);margin-top:var(--sp-lg)}
.ck__akcje .btn{width:100%}
.ck__nie{
  background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  padding:14px 20px;width:100%;
  font-family:var(--body);font-size:1rem;font-weight:600;color:var(--txt2);
  transition:border-color var(--ease),color var(--ease);
}
.ck__nie:hover{border-color:var(--mut);color:var(--txt)}
html.is-ck-open,html.is-ck-open body{overflow:hidden}
@media (min-width:560px){
  .ck__akcje{flex-direction:row-reverse;justify-content:flex-end}
  .ck__akcje .btn,.ck__nie{width:auto}
}

/* ---------- PODSTRONY: regulamin, polityka, podziekowanie ---------- */
.pod{padding:136px 0 var(--sp-3xl)}          /* 136 px = pasek naglowka + oddech */
.pod__wstecz{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--sp-lg);
  color:var(--mut);text-decoration:none;font-size:.94rem;
}
.pod__wstecz:hover{color:var(--txt)}
.pod__wstecz svg{width:18px;height:18px}
.pod__data{color:var(--mut);font-size:.9rem;margin-bottom:var(--sp-xl)}
/* Tresc prawna: waskie lamy czytaja sie latwiej niz pelna szerokosc. */
.pod__tresc{max-width:70ch}
.pod__tresc h2{
  font-family:var(--head);font-weight:700;font-size:1.5rem;text-transform:uppercase;
  line-height:1.2;margin:var(--sp-xl) 0 var(--sp-md);color:var(--txt);
}
.pod__tresc h2:first-child{margin-top:0}
.pod__tresc h3{font-size:1.05rem;font-weight:600;margin:var(--sp-md) 0 var(--sp-sm);color:var(--txt)}
.pod__tresc p{color:var(--txt2);margin-bottom:var(--sp-md)}
.pod__tresc ul,.pod__tresc ol{color:var(--txt2);margin:0 0 var(--sp-md) 22px}
.pod__tresc li{margin-bottom:8px}
.pod__tresc a{color:var(--pri-hi);text-decoration:underline;text-underline-offset:3px}
/* Miejsca do uzupelnienia przed publikacja — maja klic w oczy. */
.uzup{
  background:#fff3cd;border:1px dashed #b8860b;border-radius:4px;
  padding:1px 7px;font-weight:600;color:#7a5c00;white-space:nowrap;
}

/* ---------- STRONA PODZIĘKOWANIA ---------- */
.dzieki{min-height:100vh;display:grid;place-items:center;padding:var(--sp-2xl) var(--sp-md)}
.dzieki__box{max-width:560px;text-align:center}
.dzieki__ptak{
  width:84px;height:84px;border-radius:50%;margin:0 auto var(--sp-lg);
  display:grid;place-items:center;background:rgba(18,122,61,.1);color:var(--ok);
}
.dzieki__ptak svg{width:42px;height:42px}
.dzieki__h1{
  font-family:var(--head);font-weight:700;font-size:clamp(2rem,6vw,2.9rem);
  text-transform:uppercase;line-height:1.1;margin-bottom:var(--sp-md);
}
.dzieki__lead{font-size:1.1rem;color:var(--txt2);margin-bottom:var(--sp-xl)}
.dzieki__kroki{
  text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:var(--sp-lg);margin-bottom:var(--sp-xl);list-style:none;display:grid;gap:var(--sp-md);
}
.dzieki__kroki li{display:flex;gap:14px;align-items:flex-start;color:var(--txt2)}
.dzieki__nr{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--pri);color:var(--on-pri);font-family:var(--head);font-weight:700;font-size:.95rem;
}

/* ============================================================
   RESPONSYWNOŚĆ — 375 / 768 / 1024 / 1440
   ============================================================ */
@media (max-width:1024px){
  .nav{gap:var(--sp-sm)}
}

@media (max-width:980px){
  .nav{
    position:fixed;inset:88px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(var(--hdr),.99);border-bottom:1px solid var(--line);
    padding:var(--sp-sm) var(--sp-md) var(--sp-md);display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .burger{display:flex}
  .hdr__cta{display:none}
  .hdr__in{gap:var(--sp-sm)}
}

/* Blokada scrolla strony przy otwartym menu mobilnym (patrz script.js setMenu). */
html.is-nav-open,html.is-nav-open body{overflow:hidden}

@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:var(--sp-md)}
  .about__ph{max-width:220px}
  .loc{grid-template-columns:1fr;gap:var(--sp-md)}
  .loc__map{min-height:280px}
  .loc__map iframe{min-height:280px}
}

@media (max-width:680px){
  body{font-size:16px;padding-bottom:76px}
  .sec{padding:var(--sp-2xl) 0}
  .wrap{padding:0 18px}
  .hero{min-height:auto;padding:128px 0 var(--sp-2xl)}
  .hero__h1{font-size:clamp(2.1rem,9vw,3rem)}
  .hero__cta{flex-direction:column;align-items:stretch;gap:var(--sp-sm)}
  .hero__cta .btn{width:100%}
  .hero__cta .lnk{text-align:center}
  .phases{padding-left:var(--sp-md);gap:var(--sp-lg)}
  .ph::before{left:-30px}
  .ph h3{font-size:1.5rem}
  .tst{gap:var(--sp-2xl)}
  .ba2__handle svg{width:22px;height:22px;padding:8px}
  .tst__i figcaption>b{font-size:1.45rem}
  .tst__res{font-size:1rem}
  .tst__drag{margin-left:0;flex-basis:100%}
  .plan{padding:var(--sp-md) 20px}
  .plan__p span{font-size:2.8rem}
  .guarantee{grid-template-columns:1fr;gap:14px}
  .form{padding:var(--sp-md) 20px}
  .faq__i summary{font-size:1.02rem;padding-right:40px}
  .faq__i>div{padding-right:0}
  .mcta{display:block}
  /* Sticky CTA jest na ekranie, wiec przycisk w karcie cennika bylby drugim
     takim samym. Na desktopie sticky nie ma, wiec tam zostaje. */
  .plan__cta{display:none}
  .h2{font-size:clamp(1.7rem,6.5vw,2.2rem)}
  /* Na telefonie rzad stopki nie miesci sie obok siebie — nazwa nad linkami. */
  .ftr__in{flex-direction:column;align-items:flex-start;gap:var(--sp-md)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- ANIMACJA WEJŚCIA (Motion 3/10 — subtelna, 300ms) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 300ms ease,transform 300ms ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- PROCES — sześć kroków ----------
   Układ wzięty z infografiki (kafelki, oś, numeracja), ale zbudowany w HTML/CSS,
   nie w SVG: tekst w SVG skaluje się razem z obrazkiem i na telefonie miałby ~4px.
   Kolor akcentu to pomarańcz strony, nie zieleń z oryginału — zielony jest u nas
   zarezerwowany dla znaczenia „spełnione” (✓ w cenniku, gwarancja). */
.proc{list-style:none;display:grid;gap:var(--sp-md);margin-bottom:var(--sp-lg)}
.proc__s{
  position:relative;
  display:grid;grid-template-columns:56px 1fr;column-gap:20px;align-items:start;
  background:var(--surface2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}
/* pierwszy i ostatni krok wyróżnione — start i domknięcie pętli */
.proc__s.is-key{border-color:rgba(226,87,30,.45)}
/* oś łącząca kafelki */
.proc__s::after{
  content:"";position:absolute;left:52px;top:100%;
  width:1px;height:var(--sp-md);
  background:linear-gradient(var(--pri),transparent);opacity:.7;
}
.proc__s:last-child::after{display:none}
.proc__ico{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(226,87,30,.1);color:var(--pri-hi);
}
.proc__ico svg{width:22px;height:22px}
.proc__n{
  display:block;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pri-hi);
}
.proc__s h3{
  font-family:var(--head);font-weight:700;
  font-size:1.5rem;text-transform:uppercase;line-height:1.1;margin:2px 0 8px;
}
.proc__lead{color:var(--txt);font-size:1.02rem;margin-bottom:14px}
/* konkrety — to po nich klient poznaje, co dostaje */
.proc__l{list-style:none;display:grid;gap:8px}
.proc__l li{position:relative;padding-left:20px;color:var(--mut);font-size:.96rem;line-height:1.55}
.proc__l li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:8px;height:1px;background:var(--pri);opacity:.8;
}
.proc__loop{
  display:flex;gap:14px;align-items:flex-start;
  color:var(--txt2);font-size:1rem;line-height:1.65;max-width:70ch;
  border-left:2px solid var(--pri);padding:4px 0 4px var(--sp-md);
}
.proc__loop span{color:var(--pri-hi);font-size:1.4rem;line-height:1.2}

@media (max-width:680px){
  .proc__s{grid-template-columns:44px 1fr;column-gap:14px;padding:20px 18px}
  .proc__s::after{left:40px}
  .proc__s h3{font-size:1.3rem}
  .proc__ico{width:40px;height:40px;border-radius:10px}
  .proc__ico svg{width:19px;height:19px}
  .proc__lead{font-size:1rem}
}

/* ---------- PRZEWAGI — sześć kart ----------
   Sekcja odpowiada na „dlaczego to działa”, zanim strona wytłumaczy „jak”.
   Treść wyłącznie z rzeczy, które strona obiecuje gdzie indziej — bez liczby
   klientów i bez certyfikatów (świadome decyzje właściciela). */
.adv{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-md);margin-bottom:var(--sp-lg);
}
.adv__i{
  /* surface2, nie surface — sekcja stoi na --surface i karty by sie z nim zlaly */
  background:var(--surface2);border:1px solid var(--line);border-radius:14px;
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;
}
.adv__ico{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(226,87,30,.1);color:var(--pri-hi);
}
.adv__ico svg{width:20px;height:20px}
.adv__i h3{
  font-family:var(--head);font-weight:700;font-size:1.32rem;
  text-transform:uppercase;line-height:1.15;
}
.adv__i p{color:var(--mut);font-size:.97rem;line-height:1.6}

@media (max-width:680px){
  .adv{grid-template-columns:1fr;gap:14px}
  .adv__i{padding:20px 18px}
  .adv__i h3{font-size:1.2rem}
}

/* ---------- CO DOSTAJESZ — checklista korzyści ----------
   Bez ramek kart, w odróżnieniu od .adv — przy 9 pozycjach ramki
   robiłyby za dużo szumu. Ptaszek koloru --ok, bo to jedyne miejsce
   sensu "spełnione" (patrz zasada w nagłówku pliku). */
.incl{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-lg) var(--sp-xl);margin:var(--sp-lg) 0 var(--sp-xl);
}
.incl__i{display:flex;gap:12px;align-items:flex-start}
.incl__i svg{width:20px;height:20px;flex-shrink:0;margin-top:4px;color:var(--ok)}
.incl__i h3{
  font-family:var(--head);font-weight:700;font-size:1.05rem;
  text-transform:uppercase;line-height:1.25;margin-bottom:4px;
}
.incl__i p{color:var(--mut);font-size:.95rem;line-height:1.55}

@media (max-width:680px){
  .incl{grid-template-columns:1fr;gap:18px}
}

/* ---------- DLA KOGO — checklista kwalifikacyjna ---------- */
.fit{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-md) var(--sp-xl);margin-top:var(--sp-lg);
}
.fit__i{display:flex;gap:12px;align-items:flex-start}
.fit__i svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;color:var(--ok)}
.fit__i p{font-size:1.03rem;color:var(--txt2);line-height:1.55}

@media (max-width:680px){
  .fit{grid-template-columns:1fr;gap:14px}
}

/* ---------- OPINIE WIDEO ----------
   Sloty pod osadzenia z YouTube. Wideo nie da sie wtopic w plik jednoplikowy
   (data: URI dla kilku filmow to dziesiatki MB), wiec osadzenie jest jedyna
   opcja dzialajaca zarowno z serwera, jak i z pojedynczego pliku. */
.h3-sub{
  font-family:var(--head);font-weight:700;font-size:1.5rem;text-transform:uppercase;
  margin:var(--sp-2xl) 0 var(--sp-md);
}
/* Filmy sa PIONOWE (9:16 — nagrywane telefonem), wiec sloty tez.
   max-width trzyma je w rozsadnym rozmiarze: przy trzech w rzedzie
   pelna szerokosc kolumny dalaby slupy po ~600 px wysokosci. */
.vid{
  list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-md);
}
.vid__i{display:flex;flex-direction:column;gap:12px}
.vid__i .vid__slot{aspect-ratio:var(--vr,9/16)}
.vid__slot{
  /* --vr ustawiane na <li> — pierwsze wideo jest poziome 16/9,
     puste sloty czekaja na pionowe. Kazdy slot ma wlasne proporcje. */
  position:relative;aspect-ratio:var(--vr,9/16);border-radius:10px;overflow:hidden;
  background:#000;border:1px solid var(--line);
}
.vid__slot iframe,.vid__slot video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vid__slot video{object-fit:contain}
/* stan pusty — celowo wyglada na niedokonczony, zeby nie pomylic go z trescia */
.vid__slot--pusty{
  display:grid;place-items:center;gap:8px;align-content:center;
  background:var(--slot-bg);border:1px dashed var(--line);color:var(--mut);
}
.vid__slot--pusty svg{width:52px;height:52px;opacity:.55}
.vid__slot--pusty span{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}

@media (max-width:680px){
  .h3-sub{font-size:1.3rem;margin-top:var(--sp-xl)}
  /* Pelna szerokosc + 9:16 dawalyby sloty ~580px wysokosci — za duzo na telefonie,
     wiec zawezamy kolumne i wyrownujemy do srodka zamiast rozciagac na cala szerokosc. */
  .vid{grid-template-columns:1fr;gap:var(--sp-md);justify-items:center}
  .vid__i{width:100%;max-width:240px}
}


/* ---------- OPINIE PISANE — karuzela ----------
   Karty przewijane w poziomie, ze scroll-snap. Strzalki tylko wspomagaja;
   na dotyku dziala zwykly gest, a z klawiatury lista jest fokusowalna
   (tabindex="0"), wiec strzalki na klawiaturze tez przewijaja. */
.opi{position:relative;display:flex;align-items:center;gap:10px}
.opi__lista{
  list-style:none;display:flex;gap:var(--sp-md);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px var(--sp-sm);
  /* Pasek przewijania chowamy — nawigacje przejmuja kropki i strzalki. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.opi__lista::-webkit-scrollbar{display:none}

/* Strzalki + kropki w jednym rzedzie pod karuzela, wspolny srodek. */
.opi__nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-md);margin-top:var(--sp-md)}
/* Kropki nawigacji. Jedna na karte, aktywna po najblizszej krawedzi kadru. */
.opi__kropki{display:flex;justify-content:center;gap:10px}
.opi__kropka{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);transition:background var(--ease),transform var(--ease);
}
.opi__kropka:hover{background:var(--mut)}
.opi__kropka.is-akt{background:var(--pri);transform:scale(1.25)}
.opi__k{
  flex:0 0 300px;scroll-snap-align:start;
  background:var(--surface2);border:1px dashed var(--line);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:14px;
}
.opi__gora{display:flex;align-items:center;gap:12px}
.opi__aw{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(226,87,30,.12);color:var(--pri-hi);
  font-family:var(--head);font-weight:700;font-size:1.05rem;letter-spacing:.04em;
}
.opi__kto{display:flex;flex-direction:column;gap:3px;min-width:0}
.opi__kto b{font-size:1rem;color:var(--txt);font-weight:600}
/* Nagłówek z oceną obok. Na wąskich ekranach ocena schodzi pod tytuł. */
.h2rzad{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-md);flex-wrap:wrap;
}
.h2rzad .h2{margin-bottom:var(--sp-md)}
.ocena{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-md)}
.ocena__gw svg{width:96px;height:17px;fill:#f5b301;display:block}

.opi__ocena{display:flex;align-items:center;gap:8px}
.opi__gw{width:84px;height:15px;fill:var(--line)}          /* szare, dopoki brak oceny */
.opi__ocena.is-ocena .opi__gw{fill:#f5b301}
.opi__brak{font-size:var(--fs-label);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.opi__ocena.is-ocena .opi__brak{display:none}
/* Przycinamy dlugie opinie do 4 linii — bez tego .opi__lista (flex, stretch)
   rozciaga KAZDA karte do wysokosci najdluzszej, wiec jedna rozwlekla opinia
   robi z calego rzedu sciane pustego miejsca. */
.opi__t{
  color:var(--mut);font-size:.97rem;line-height:1.6;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.opi__t.is-open{-webkit-line-clamp:unset;overflow:visible}
.opi__wiecej{
  align-self:flex-start;background:none;border:0;padding:0;
  color:var(--pri-hi);font-weight:600;font-size:.9rem;cursor:pointer;
}
.opi__wiecej:hover{text-decoration:underline}
.opi__wiecej[hidden]{display:none}
.opi__zrodlo{width:20px;height:20px;margin-left:auto;flex-shrink:0}
.opi__strzalka[hidden]{display:none}
.opi__strzalka{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface2);border:1px solid var(--line);color:var(--txt2);
  transition:color var(--ease),border-color var(--ease);
}
.opi__strzalka:hover{color:var(--txt);border-color:var(--pri)}
.opi__strzalka svg{width:20px;height:20px}

@media (max-width:680px){
  /* Strzalki zostaja — stoja pod karuzela, wiec nie zabieraja jej szerokosci,
     a daja czytelny sygnal, ze karty da sie przewijac. 44 px to minimalny
     cel dotykowy. */
  .opi__strzalka{width:44px;height:44px}
  .opi__k{flex-basis:270px;padding:18px}
}


/* ---------- PRZED/PO: zawsze dwa kadry, bez suwaka ----------
   Na komputerze obok siebie, na telefonie jeden pod drugim.

   Dlaczego nie obok siebie takze na telefonie: przy szerokosci 165 px
   sylwetka Tomka mialaby 37 px zamiast 76. Pion kosztuje ~790 px wysokosci
   strony, ale zachowuje pelny rozmiar i pokazuje oba zdjecia bez klikania.

   WAZNE: panel ma TE SAMA proporcje co dawna ramka suwaka (--ar), inaczej
   zmieni sie widoczny wycinek i kalibracja --z/--y przestanie grac.

   Suwak zostal w kodzie, tylko ukryty — przywrocenie to zmiana samego CSS. */
.ba2{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  aspect-ratio:auto;max-width:none;
  background:transparent;border:0;border-radius:0;overflow:visible;
}
/* w HTML „po” jest pierwsze (bylo pod spodem suwaka) — tu odwracamy */
.ba2__pane{
  position:relative;aspect-ratio:var(--ar,3/2);
  border-radius:10px;border:1px solid var(--line);background:#000;order:2;
}
.ba2__pane--before{clip-path:none;order:1}
.ba2__handle,.ba2__range,.tst__drag{display:none}

@media (max-width:680px){
  /* jeden pod drugim — pelna szerokosc, sylwetka nie maleje */
  .ba2{grid-template-columns:1fr;gap:8px}
}