/* ============================================================
   ZAUFANIE — pasek statystyk, zaplecze VOTUM, opinie,
   aktualnosci prawne, karty wyrokow, zajawki bloga.
   Struktura wzorowana na odzyskajswoje.com.pl (wariant tego samego
   przedstawiciela), ale w palecie tej strony: granat #240082 +
   niebieski #066AAB + zielony CTA. Zadnego zielonego tla.
   Wszystkie komponenty maja tlo wpisane wprost — motyw ciemny
   jest na tej stronie wylaczony swiadomie (patrz naglowek style.css).
   ============================================================ */

/* ---------- 1. PASEK ZAUFANIA — WERSJA PRZEWIJANA (marquee) ----------
   Pasek jedzie sam z prawej w lewo, bez konca. Mechanika: tor zawiera
   DWIE identyczne kopie tresci, animacja przesuwa go o dokladnie -50%,
   wiec w momencie przeskoku klatka wyglada tak samo — szwu nie widac.
   Kopia druga ma aria-hidden, zeby czytnik ekranu nie czytal dwa razy.
   Zatrzymuje sie po najechaniu i przy prefers-reduced-motion. */
.pasek-zaufania{
  background:var(--navy-900); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden;
}
.pasek-zaufania .pz-okno{ overflow:hidden; }
.pasek-zaufania .pz-tor{
  display:flex; width:max-content;
  animation:pz-jedzie 42s linear infinite;
}
.pasek-zaufania:hover .pz-tor,
.pasek-zaufania:focus-within .pz-tor{ animation-play-state:paused; }
.pasek-zaufania .pz-grupa{ display:flex; align-items:center; padding:13px 0; }
@keyframes pz-jedzie{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .pasek-zaufania .pz-tor{ animation:none; }
}

.pasek-zaufania .pz-poz{
  display:flex; align-items:baseline; gap:7px; flex:0 0 auto;
  padding:0 22px; font-size:15px; line-height:1.3; white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.22);
}
.pasek-zaufania .pz-liczba{ font-weight:800; color:#fff; }
.pasek-zaufania .pz-opis{ color:rgba(255,255,255,.82); }
.pasek-zaufania .pz-marka{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.pasek-zaufania .pz-marka strong{ color:#fff; letter-spacing:0; text-transform:none; font-size:15px; }

@media (max-width:900px){
  .pasek-zaufania .pz-poz{ padding:0 16px; font-size:13.5px; }
}

/* Na telefonie pasek MUSI byc niski. Zmierzone: wersja zawijana miala 136px,
   a razem z topbarem i nawigacja dawala 245px chromu przed trescia na ekranie
   812px (30%) i spychala pierwsze CTA na 973px. Marquee rozwiazuje to sam —
   jest jednym wierszem z definicji — wiec tu tylko zmniejszamy pismo i tempo. */
@media (max-width:700px){
  .pasek-zaufania .pz-grupa{ padding:9px 0; }
  .pasek-zaufania .pz-poz{ padding:0 13px; font-size:12.5px; gap:5px; }
  .pasek-zaufania .pz-marka{ font-size:11.5px; }
  .pasek-zaufania .pz-marka strong{ font-size:12.5px; }
  .pasek-zaufania .pz-tor{ animation-duration:30s; }
}

/* ---------- 2. KARTY STATYSTYK (w hero) ---------- */
.karty-stat{
  background:var(--navy-900); color:#fff; border-radius:var(--radius-lg);
  padding:26px 28px 0; box-shadow:var(--shadow-md);
}
.karty-stat-rzad{ display:flex; gap:10px; text-align:center; }
.karty-stat-poz{ flex:1 1 0; min-width:0; }
.karty-stat-liczba{
  font-family:Cambria,Georgia,serif; font-size:34px; font-weight:700;
  line-height:1.05; color:#fff; letter-spacing:-.01em;
}
.karty-stat-etykieta{
  margin-top:6px; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.karty-stat-stopka{
  margin:24px -28px 0; padding:14px 28px;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.14);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
@media (max-width:520px){
  .karty-stat{ padding:20px 18px 0; }
  .karty-stat-liczba{ font-size:26px; }
  .karty-stat-etykieta{ font-size:10.5px; letter-spacing:.08em; }
  .karty-stat-stopka{ margin:18px -18px 0; padding:12px 18px; font-size:11.5px; }
}

/* ---------- 3. ZAPLECZE VOTUM — podzial rol ---------- */
.role-karta{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm);
}
.role-karta h3{ font-size:18px; margin:0 0 14px; color:var(--ink-mocny); }
.role-lista{ list-style:none; margin:0; padding:0; }
.role-lista li{
  display:flex; gap:11px; padding:11px 0;
  border-top:1px solid var(--line); font-size:15.5px; line-height:1.55;
}
.role-lista li:first-child{ border-top:0; padding-top:0; }
.role-lista .strzalka{ color:var(--navy-800); font-weight:700; flex:0 0 auto; }
.zaplecze-siatka{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; }
@media (max-width:860px){ .zaplecze-siatka{ grid-template-columns:1fr; gap:22px; } }

.liczby-votum{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-top:26px;
}
.liczby-votum > div{ padding:20px 18px; border-left:1px solid var(--line); }
.liczby-votum > div:first-child{ border-left:0; }
.liczby-votum b{
  display:block; font-family:Cambria,Georgia,serif; font-size:26px;
  color:var(--ink-mocny); line-height:1.1; font-weight:700;
}
.liczby-votum span{ display:block; margin-top:5px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; }
@media (max-width:760px){
  .liczby-votum{ grid-template-columns:repeat(2,1fr); }
  .liczby-votum > div:nth-child(3){ border-left:0; }
  .liczby-votum > div:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- 4. OPINIE ---------- */
.opinie-naglowek{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ocena-plakietka{
  display:flex; align-items:center; gap:14px; flex:0 0 auto;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 20px; box-shadow:var(--shadow-sm);
}
.ocena-plakietka .ocena-cyfra{
  font-family:Cambria,Georgia,serif; font-size:34px; font-weight:700;
  color:var(--ink-mocny); line-height:1;
}
.ocena-plakietka .gwiazdki{ color:#E8A317; font-size:15px; letter-spacing:1px; }
.ocena-plakietka .ocena-zrodlo{ font-size:13px; color:var(--ink-soft); margin-top:3px; }

/* scroll-snap jest tu CELOWO wylaczony: karuzela jedzie sama (przewijanie.js
   rusza scrollLeft o ulamki piksela), a snap co klatke szarpalby ja z powrotem
   do krawedzi karty. Reczne przewijanie palcem i myszka nadal dziala. */
.opinie-tor{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,1fr);
  gap:16px; overflow-x:auto; padding:24px 4px 8px;
  scroll-behavior:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.opinie-tor::-webkit-scrollbar{ height:8px; }
.opinie-tor::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
/* margin:0 jest OBOWIAZKOWY — <figure> ma domyslny margines 1em 40px,
   ktory zjadal 80px z kazdej karty (zmierzone: track 273px, karta 192px,
   akapit 70px = nieczytelny). To samo dotyczy <blockquote> w srodku. */
.opinia{
  margin:0;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.opinia blockquote{ margin:0; display:contents; }
.opinia .gwiazdki{ color:#E8A317; font-size:14px; letter-spacing:1px; margin-bottom:11px; }
.opinia p{ margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--ink); flex:1 1 auto; }
.opinia-autor{ display:flex; align-items:center; gap:11px; }
.opinia-inicjaly{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--navy-100); color:var(--ink-mocny);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}
.opinia-autor b{ display:block; font-size:14.5px; color:var(--ink-mocny); }
.opinia-autor span{ display:block; font-size:12.5px; color:var(--ink-soft); }
.opinie-zastrzezenie{ margin-top:14px; font-size:13px; color:var(--ink-soft); text-align:center; }

/* ---------- 5. AKTUALNOSCI PRAWNE ---------- */
.aktualnosci-siatka{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:860px){ .aktualnosci-siatka{ grid-template-columns:1fr; gap:24px; } }

.wydanie-karta{
  background:var(--navy-900); color:#fff;
  border-radius:var(--radius-lg); padding:26px 28px; box-shadow:var(--shadow-md);
}
.wydanie-glowka{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.wydanie-plakietka{
  background:var(--gold-500); color:#08243b; font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:5px 10px; border-radius:6px;
}
.wydanie-data{ font-size:13px; color:rgba(255,255,255,.72); }
.wydanie-karta h3{ font-size:21px; line-height:1.25; margin:0 0 16px; color:#fff; }
.wydanie-punkty{ list-style:none; margin:0; padding:0; }
.wydanie-punkty li{
  display:flex; gap:10px; padding:11px 0; font-size:15px; line-height:1.55;
  border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.9);
}
.wydanie-punkty li:first-child{ border-top:0; padding-top:0; }
.wydanie-punkty .romb{ color:var(--gold-500); flex:0 0 auto; }
.wydanie-punkty b{ color:#fff; }

/* ---------- 6. KARTY WYROKOW ---------- */
.wyroki-siatka{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:860px){ .wyroki-siatka{ grid-template-columns:1fr; gap:24px; } }
.wyroki-lista{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.wyrok{ padding:20px 22px; border-top:1px solid var(--line); }
.wyrok:first-child{ border-top:0; }
.wyrok-sygnatura{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy-800); font-weight:700; margin-bottom:7px;
}
.wyrok h3{ font-size:17px; margin:0 0 7px; color:var(--ink-mocny); line-height:1.3; }
.wyrok p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }

/* ---------- 7. BLOG ---------- */
.blog-siatka{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
@media (max-width:900px){ .blog-siatka{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .blog-siatka{ grid-template-columns:1fr; } }
.wpis{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.wpis-okladka{
  background:var(--navy-900); color:#fff; padding:24px 22px 20px;
}
.wpis-liczba{
  font-family:Cambria,Georgia,serif; font-size:36px; font-weight:700;
  line-height:1; color:var(--gold-500);
}
.wpis-podpis{
  margin-top:7px; font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.wpis-tresc{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.wpis-kategoria{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy-800); font-weight:700; margin-bottom:8px;
}
.wpis-tresc h3{ font-size:17px; line-height:1.32; margin:0 0 10px; color:var(--ink-mocny); }
.wpis-tresc p{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); flex:1 1 auto; }
.wpis-stopka{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:12px;
}

/* ---------- wspolne ---------- */
.nadtytul{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--navy-800); font-weight:700; margin-bottom:12px;
}
.nadtytul::before{ content:""; width:34px; height:2px; background:var(--navy-800); flex:0 0 auto; }
.nadtytul.center{ justify-content:center; }

/* ---------- 8. PODSTRONA ARTYKULU ---------- */
.wpis-strona{ padding:34px 0 10px; }
.wpis-okruchy{ font-size:13.5px; color:var(--ink-soft); margin:0 0 18px; }
.wpis-strona h1{ font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin:0 0 16px; }
.wpis-meta{ font-size:13.5px; color:var(--ink-soft); margin:0 0 30px;
  padding-bottom:18px; border-bottom:1px solid var(--line); }
.wpis-strona h2{ font-size:clamp(21px,2.6vw,26px); margin:38px 0 14px; color:var(--ink-mocny); }
.wpis-strona p{ font-size:17px; line-height:1.72; margin:0 0 16px; }
.wpis-strona .lead{ font-size:19.5px; line-height:1.62; color:var(--ink-soft); }
.wpis-cytat{
  margin:22px 0; padding:18px 22px; background:var(--paper-soft);
  border-left:4px solid var(--navy-800); border-radius:0 var(--radius) var(--radius) 0;
  font-size:16.5px; line-height:1.66;
}
.wpis-lista{ margin:0 0 18px; padding-left:22px; }
.wpis-lista li{ font-size:17px; line-height:1.68; margin-bottom:10px; }
.wpis-tabela{
  width:100%; border-collapse:collapse; margin:20px 0 24px;
  font-size:15.5px; display:block; overflow-x:auto;
}
.wpis-tabela th, .wpis-tabela td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
}
.wpis-tabela thead th{
  background:var(--paper-soft); color:var(--ink-mocny); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.wpis-tabela tbody tr:last-child td{ border-bottom:0; }
.wpis-cta{
  margin:40px 0 8px; padding:26px 28px;
  background:var(--navy-900); color:#fff; border-radius:var(--radius-lg);
}
.wpis-cta h2{ color:#fff; margin:0 0 10px; }
.wpis-cta p{ color:rgba(255,255,255,.9); }
.wpis-zastrzezenie{
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px !important; line-height:1.6 !important; color:var(--ink-soft);
}
.wpis-tresc h3 a{ color:inherit; text-decoration:none; }
.wpis a.wpis-link{ position:absolute; inset:0; }
.wpis{ position:relative; transition:box-shadow .18s ease, transform .18s ease; }
.wpis:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.wpis:focus-within{ outline:2px solid var(--navy-800); outline-offset:2px; }

/* ---------- 9. BLOK VOTUM NAD FORMULARZEM ----------
   Zastapil blok z Bartoszem (author-mini). Decyzja z 07.09.2026:
   nad formularzem ma stac to, co realnie prowadzi sprawe — Grupa VOTUM
   z liczbami z raportow gieldowych. Osoba przedstawiciela schodzi na dol
   strony, do sekcji "Twoj opiekun" (ujawnienie operatora zostaje). */
.votum-mini{
  display:flex; gap:20px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
/* 07.09.2026 — POPRAWKA. Bylo tu background:var(--navy-900) (#240082).
   Logo VOTUM to ciemnoszary napis (#404040) i ciemna czerwien (#800000)
   na przezroczystym tle — na ciemnym fiolecie praktycznie znikalo.
   Bialy kartonik, tak jak w .votum-badge w naglowku. Kolor na sztywno,
   nie zmienna: logo jest ciemne, wiec tlo MUSI byc biale takze w trybie
   ciemnym, inaczej wraca ten sam problem. */
.votum-mini-znak{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; box-shadow:var(--shadow-sm);
}
.votum-mini-znak img{ display:block; height:30px; width:auto; }
.votum-mini p{ margin:0 0 10px; font-size:15.5px; line-height:1.6; }
.votum-mini p:last-child{ margin-bottom:0; }
.votum-mini .votum-mini-akcja{
  padding:11px 14px; background:var(--navy-100);
  border-radius:10px; color:var(--ink);
}
@media (max-width:640px){
  .votum-mini{ flex-direction:column; gap:14px; padding:16px 16px; }
  .votum-mini-znak{ align-self:flex-start; }
  .votum-mini p{ font-size:15px; }
}

/* ---------- 10. SEKCJA "TWOJ OPIEKUN" (dol strony) ---------- */
.opiekun-karta{
  display:flex; gap:20px; align-items:flex-start; margin-top:18px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm);
}
.opiekun-foto{
  flex:0 0 auto; width:96px; height:96px; border-radius:50%;
  object-fit:cover; border:3px solid var(--navy-100);
}
.opiekun-karta p{ margin:0 0 10px; font-size:15.5px; line-height:1.62; }
.opiekun-karta p:last-child{ margin-bottom:0; }
@media (max-width:560px){
  .opiekun-karta{ flex-direction:column; gap:14px; padding:18px; }
  .opiekun-foto{ width:76px; height:76px; }
}

/* ---------- 11. PASEK ZAUFANIA W SRODKU STRONY ----------
   Wariant jasny, zeby nie wygladal jak przypadkowa kopia gornego.
   Powod istnienia: strona jest dluga i wiekszosc czytelnikow nigdy
   nie wraca na gore, wiec dowod skali musi wrocic w polowie drogi. */
.pasek-srodek{
  background:var(--paper-soft); color:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pasek-srodek .pz-liczba{ color:var(--ink-mocny); }
.pasek-srodek .pz-opis{ color:var(--ink-soft); }
.pasek-srodek .pz-poz{ border-right-color:var(--line); }
.pasek-srodek .pz-marka{ color:var(--navy-800); }
.pasek-srodek .pz-marka strong{ color:var(--ink-mocny); }
.pasek-srodek .pz-grupa{ padding:16px 0; }
.pasek-srodek .pz-tor{ animation-duration:54s; }
@media (max-width:700px){
  .pasek-srodek .pz-grupa{ padding:12px 0; }
  .pasek-srodek .pz-tor{ animation-duration:38s; }
}