/* ─────────────────────────────────────────────────────────────────────────────
   Witryna R-Księgowość — warstwa wizualna.

   Styl rodzinny, wspólny z r-finanse.pl i r-invest.pl: Montserrat, OSTRE
   KRAWĘDZIE (border-radius: 0), przyciski wersalikami, kontener 1240 px,
   jeden mocny akcent na markę. Różni je wyłącznie kolor akcentu:
   finanse — zieleń, invest — czerwień, księgowość — błękit ze znaku firmowego.

   Kolor akcentu przychodzi ze zmiennej --marka, którą wstrzykuje index.php
   z ustawień w panelu; tutaj są tylko wartości awaryjne.
   ───────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
:root{
  --marka:#3275b7; --marka-ciemny:#265d92; --marka-rgb:50,117,183;
  --granat:#0c3082;
  --ink:#0F172A; --ink-soft:rgba(15,23,42,.68); --ink-muted:rgba(15,23,42,.45);
  --white:#fff; --off-white:#F8F8F8; --gray:#F2F2F0; --line:#E5E5E5; --black:#000;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);line-height:1.7;
  font-family:var(--czcionka,'Montserrat'),system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(36px,5.5vw,68px);font-weight:800;line-height:1.08}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(17px,1.6vw,20px)}

.w-wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* ── Nagłówek ───────────────────────────────────────────────────────── */
.w-gora{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
/* Pasek ma 100 px wysokości: wysokość bierzemy z `min-height`, a nie z paddingu,
   bo padding trzeba by przeliczać przy każdej zmianie wysokości logo (logo jest
   ustawieniem z panelu i klient może je zmienić). `align-items:center` ustawia
   logo i menu pionowo na środku niezależnie od tego, jak duże jest logo. */
.w-gora-in{display:flex;align-items:center;gap:24px;padding:8px 0;min-height:100px}
.w-logo{display:flex;align-items:center;text-decoration:none;font-weight:800;
  font-size:19px;letter-spacing:-.02em;color:var(--ink)}
/* Wysokość logo i rozmiar menu są USTAWIENIEM (Witryna www → Wygląd) — zmienne
   podstawia `w_zmienne_wygladu()`. Liczby w `var(...)` to zapas na wypadek, gdyby
   ustawienie było puste: dokładnie te wymiary były tu wpisane wcześniej. */
.w-logo img{height:var(--logo-wys,38px);width:auto;transition:height .15s}
.w-nav{margin-left:auto;display:flex;align-items:center;gap:var(--menu-odstep,4px);flex-wrap:wrap}
.w-nav a{text-decoration:none;font-size:var(--menu-rozmiar,13px);font-weight:600;color:var(--ink-soft);
  padding:10px 14px;letter-spacing:.02em}
.w-nav a:hover{color:var(--marka)}
.w-nav a.akt{color:var(--ink);box-shadow:inset 0 -2px 0 var(--marka)}
.w-nav-panel{background:linear-gradient(120deg,var(--marka),var(--marka-ciemny));color:#fff!important;font-weight:700!important;
  text-transform:uppercase;letter-spacing:.05em;padding:12px 20px!important}
.w-nav-panel:hover{background:var(--marka-ciemny)}
.w-burger{display:none;margin-left:auto;background:none;border:2px solid var(--line);
  padding:8px 12px;font-size:20px;cursor:pointer;line-height:1;color:var(--ink)}

/* ── Przyciski ──────────────────────────────────────────────────────── */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border:2px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:all .22s ease;white-space:nowrap;font-family:inherit}
.w-btn:hover{background:var(--ink);color:#fff}
.w-btn-glowny{background:linear-gradient(120deg,var(--marka),var(--marka-ciemny));border-color:transparent;color:#fff}
.w-btn-glowny:hover{background:var(--marka-ciemny);border-color:var(--marka-ciemny);color:#fff}

/* ── Sekcje ─────────────────────────────────────────────────────────── */
.w-sek{padding:clamp(60px,10vw,100px) 0}
.w-sek:nth-of-type(even){background:var(--off-white)}
.w-sek>.w-wrap>h1,.w-sek>.w-wrap>h2{text-align:center;max-width:22ch;margin-inline:auto}
.w-sek-opis{text-align:center;color:var(--ink-soft);max-width:64ch;margin:0 auto 48px;font-size:17px}

.w-hero{padding:clamp(70px,11vw,130px) 0;background:var(--gray);
  border-bottom:1px solid var(--line)}
.w-hero h1{max-width:18ch}
.w-hero-sub{font-size:clamp(16px,1.9vw,21px);color:var(--ink-soft);max-width:60ch;margin:0 0 36px}
.w-hero-akcje{display:flex;gap:12px;flex-wrap:wrap}

/* ── Kafle ──────────────────────────────────────────────────────────── */
.w-karty{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border:1px solid var(--line)}
.w-karta{display:flex;flex-direction:column;gap:10px;background:var(--white);
  padding:32px 28px;text-decoration:none;color:inherit;transition:background .22s ease}
a.w-karta:hover{background:var(--gray)}
.w-karta-ic{width:44px;height:44px;background:var(--marka);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:6px}
.w-karta strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.w-karta span{color:var(--ink-soft);font-size:15px;line-height:1.6}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.w-faq .w-wrap{max-width:900px}
.w-faq-poz{background:var(--white);border:1px solid var(--line);padding:20px 24px;margin-bottom:-1px}
.w-faq-poz summary{cursor:pointer;font-weight:700;list-style:none;font-size:16px;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.w-faq-poz summary::-webkit-details-marker{display:none}
.w-faq-poz summary::after{content:"+";color:var(--marka);font-weight:800;font-size:22px;line-height:1}
.w-faq-poz[open] summary::after{content:"−"}
.w-faq-odp{color:var(--ink-soft);padding-top:14px;font-size:15px}

/* ── Wezwanie do działania ──────────────────────────────────────────── */
.w-cta{background:var(--granat);color:#fff}
.w-cta .w-wrap{text-align:center}
.w-cta h1,.w-cta h2{color:#fff}
.w-cta p{color:rgba(255,255,255,.72);max-width:58ch;margin:0 auto 36px;font-size:17px}
.w-cta .w-btn{border-color:#fff;color:#fff}
.w-cta .w-btn:hover{background:#fff;color:var(--granat)}
.w-cta .w-btn-glowny{background:var(--marka);border-color:var(--marka);color:#fff}
.w-cta .w-btn-glowny:hover{background:#fff;color:var(--granat);border-color:#fff}

/* ── Proza (treść redakcyjna) ───────────────────────────────────────── */
.w-proza{max-width:78ch;margin-inline:auto;font-size:16px;color:var(--ink-soft)}
.w-proza h2,.w-proza h3,.w-proza h4{color:var(--ink);margin-top:1.8em;text-align:left}
.w-proza h3{font-size:20px}
.w-proza a{color:var(--marka);text-decoration:underline;text-underline-offset:3px}
.w-proza ul,.w-proza ol{padding-left:1.3em}
.w-proza li{margin-bottom:.4em}
.w-proza table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.w-proza td,.w-proza th{border:1px solid var(--line);padding:10px 14px;text-align:left}
.w-proza th{background:var(--gray);font-weight:700;color:var(--ink)}
.w-proza blockquote{border-left:3px solid var(--marka);margin:1.4em 0;padding:.2em 0 .2em 1.2em;color:var(--ink)}

/* ── Kontakt ────────────────────────────────────────────────────────── */
.w-kontakt-siatka{display:grid;gap:56px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
.w-kontakt-siatka h1,.w-kontakt-siatka h2{text-align:left;margin-inline:0;max-width:none}
.w-dane{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:18px}
.w-dane li{display:flex;gap:14px;align-items:flex-start;font-size:16px;color:var(--ink-soft)}
.w-dane i{color:var(--marka);font-size:19px;line-height:1.5}
.w-dane a{text-decoration:none;font-weight:600;color:var(--ink)}
.w-dane a:hover{color:var(--marka)}
.w-form{display:grid;gap:16px;background:var(--white);border:1px solid var(--line);padding:36px}
.w-form label{display:grid;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-muted)}
.w-form input,.w-form textarea,.w-form select{font:inherit;font-size:15px;padding:13px 15px;
  border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--ink);width:100%}
/* Strzałka rysowana w tle, bo natywna kontrolka wygląda inaczej w każdym systemie,
   a formularz ma trzymać ten sam ostry styl co reszta witryny. */
.w-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:44px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230F172A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px}
.w-form input:focus,.w-form textarea:focus,.w-form select:focus{outline:none;border-color:var(--marka)}
/* Gwiazdka przy polu wymaganym — kolor marki, nie czerwień: to informacja,
   a nie błąd, a formularz z ośmioma czerwonymi znakami wygląda na zepsuty. */
.w-wym{color:var(--marka);font-weight:700}
.w-form .w-etyk{display:block}

/* ── Zgody ───────────────────────────────────────────────────────────────────
   Wyłamują się z siatki etykiet: treść zgody to zdanie prawnicze, a nie nazwa
   pola — wersalikami i w rozstrzelonym druku jest nie do przeczytania. */
.w-form label.w-zgoda{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-soft);line-height:1.55}
.w-form label.w-zgoda input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;padding:0;
  accent-color:var(--marka);cursor:pointer;flex-shrink:0}
.w-form label.w-zgoda a{color:var(--marka);text-decoration:underline}
.w-form .w-btn{width:100%;margin-top:6px}

/* ── Formularz w dwóch kolumnach ─────────────────────────────────────────────
   Jak na starej stronie: krótkie pola parami, wiadomość i zgody na całą szerokość.
   Formularz z ośmioma polami jedno pod drugim wygląda na dłuższy, niż jest, i
   zniechęca do wypełnienia — a to jest główny formularz na stronie biura. */
.w-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.w-form > *{grid-column:1/-1}
.w-form .w-pol{grid-column:auto}

/* ── Osoba do kontaktu ───────────────────────────────────────────────────── */
.w-osoba{display:flex;gap:22px;align-items:flex-start;margin:26px 0 22px}
.w-osoba-foto{width:150px;height:auto;flex-shrink:0;object-fit:cover;display:block}
.w-osoba-dane{display:flex;flex-direction:column;gap:5px;padding-top:6px;min-width:0}
.w-osoba-imie{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.w-osoba-rola{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--marka);margin-bottom:6px}
.w-osoba-dane a{color:var(--ink-soft);text-decoration:none;font-size:14.5px}
.w-osoba-dane a:hover{color:var(--marka)}
.w-osoba-dane a i{color:var(--marka);margin-right:6px}

/* ── Godziny pracy ───────────────────────────────────────────────────────── */
.w-godziny{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.w-godziny strong{display:block;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px}
.w-godziny p{margin:0;color:var(--ink-soft);line-height:1.7}
.w-pulapka{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

.w-komunikat{margin:28px 0 0;padding:16px 20px;background:var(--gray);
  border-left:3px solid var(--marka);font-weight:600;font-size:15px}

/* ── Stopka ─────────────────────────────────────────────────────────── */
/* Stopka na granacie, nie na czerni: czerń była jedynym miejscem na stronie,
   które nie należało do palety marki. Kreska u góry oddziela ją od granatowej
   sekcji CTA, która na części podstron kończy treść. */
/* Stopka wraca na CZARNO — granatowy gradient zlewał się z sekcjami wyżej.
   Kolor marki zostaje jako akcent: kreska u góry, odnośniki na najechanie i ikony. */
.w-dol{background:var(--black);color:rgba(255,255,255,.7);
  padding:64px 0 0;font-size:14px;border-top:3px solid var(--marka)}
.w-dol-in{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.w-dol strong{color:#fff;display:block;margin-bottom:18px;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.w-dol p{margin:.35em 0;line-height:1.7}
.w-dol a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .15s}
.w-dol a:hover{color:var(--marka)}
.w-dol nav a{display:block;padding:.2em 0}
.w-dol-stopka{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding:24px 0;
  font-size:13px;color:rgba(255,255,255,.4)}

@media (max-width:900px){
  .w-kontakt-siatka{grid-template-columns:1fr;gap:40px}
  .w-burger{display:block;flex:0 0 auto;padding:7px 11px;font-size:19px}
  /* Nagłówek na telefonie: logo może się zwęzić (bez `min-width:0` element flex
     nie schodzi poniżej swojej zawartości i wypycha hamburger poza ekran),
     a odstęp między nimi jest mniejszy niż na monitorze. */
  /* Na telefonie 100 px paska zjada pół ekranu — zostaje niższy. */
  .w-gora-in{gap:12px;padding:12px 0;min-height:68px}
  /* Nagłówek ma zapas przy krawędziach większy niż reszta treści: logo i hamburger
     stoją najbliżej ramki telefonu i bez tego wyglądają, jakby z niej wypadały. */
  .w-gora .w-wrap{padding-left:20px;padding-right:20px}
  .w-logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .w-logo img{height:var(--logo-wys-mob,32px);max-width:min(56vw,240px);object-fit:contain;object-position:left center}
  /* Menu wisi POD nagłówkiem liczonym na bieżąco (`top:100%`), a nie od stałych
     71 px — po zmianie wysokości logo albo odstępów nie zostaje szpara ani zakładka. */
  .w-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;display:none;
    max-height:78dvh;overflow-y:auto;box-shadow:0 16px 32px rgba(15,23,42,.10)}
  .w-nav.otwarte{display:flex}
  /* Na telefonie menu jest listą na całą szerokość, więc ma własny rozmiar —
     ten sam co na desktopie bywa tam za mały na kciuk. */
  .w-nav a{padding:15px 0;font-size:var(--menu-rozmiar-mob,15px);border-bottom:1px solid var(--line)}
  .w-nav a.akt{box-shadow:none;color:var(--marka)}
  .w-nav-panel{margin-top:16px;text-align:center;justify-content:center;border-bottom:none!important}
  .w-form{padding:28px 22px;grid-template-columns:1fr}
  .w-form .w-pol{grid-column:1/-1}
  .w-osoba{gap:16px}
  .w-osoba-foto{width:110px}
  .w-karta{padding:28px 24px}
}

/* ── Pasek kontaktowy i „oko” — dołożone razem ze stylem rodzinnym ──── */
/* Górny pasek: gradient marki zamiast płaskiego granatu i czytelniejszy tekst —
   przy 62%% bieli numer telefonu na ciemnym tle ledwo było widać. */
.w-pasek{background:linear-gradient(120deg,var(--granat),var(--marka));color:rgba(255,255,255,.82);font-size:13px}
.w-pasek-in{display:flex;align-items:center;justify-content:flex-end;gap:28px;padding:10px 24px}
.w-pasek-pyt{color:rgba(255,255,255,.66)}
.w-pasek a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:color .15s}
.w-pasek a:hover{color:#cfe3f6}
.w-pasek i{color:#a9cdee;font-size:12px}
@media (max-width:760px){.w-pasek{display:none}}
/* Najwęższe telefony (SE, starsze Androidy): węższy margines strony i logo,
   żeby nagłówek mieścił się w całości razem z hamburgerem. */
@media (max-width:400px){
  .w-logo img{max-width:min(50vw,180px)}
  .w-burger{padding:6px 9px;font-size:18px}
}

.w-oko{display:block;color:var(--marka);font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
.w-sek>.w-wrap>.w-oko{text-align:center}

/* ── Podmenu (Oferta → usługi) ──────────────────────────────────────── */
.w-nav-grupa{position:relative;display:inline-flex;align-items:center}
.w-nav-grupa>a i{font-size:10px;margin-left:6px;opacity:.6}
.w-nav-roz{display:none}
.w-podmenu{position:absolute;top:100%;left:0;min-width:270px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(15,23,42,.28);
  padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:210}
.w-nav-grupa:hover .w-podmenu,.w-nav-grupa:focus-within .w-podmenu{opacity:1;visibility:visible;transform:none}
.w-podmenu a{display:block;padding:10px 20px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.w-podmenu a:hover{background:var(--gray);color:var(--marka)}

@media (max-width:900px){
  .w-nav-grupa{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  .w-nav-grupa>a{flex:1;border-bottom:none!important}
  .w-nav-grupa>a i{display:none}
  /* Na telefonie nie ma najechania kursorem — podmenu rozwija osobny przycisk,
     żeby dotknięcie rodzica nadal prowadziło na jego stronę. */
  .w-nav-roz{display:block;background:none;border:none;padding:12px;font-size:16px;
    color:var(--ink-muted);cursor:pointer;line-height:1}
  .w-nav-roz[aria-expanded="true"] i{transform:rotate(180deg);display:inline-block}
  .w-podmenu{position:static;min-width:0;border:none;box-shadow:none;padding:0 0 8px 16px;
    opacity:1;visibility:visible;transform:none;display:none;width:100%}
  .w-nav-grupa.rozwinieta .w-podmenu{display:block}
  .w-podmenu a{padding:11px 0;border-bottom:1px solid var(--line)}
  .w-podmenu a:last-child{border-bottom:none}
}

/* Turnstile w formularzu — wyśrodkowany, bez własnego tła. */
.w-ts{display:flex;justify-content:center;margin:.2rem 0}

/* ── Ekran logowania klienta ────────────────────────────────────────── */
.w-login .w-wrap{max-width:460px;text-align:center}
.w-login h1{font-size:clamp(30px,4vw,42px)}
.w-login .w-oko{text-align:center}
.w-login-lead{color:var(--ink-soft);margin:0 0 32px}
.w-login-form{text-align:left;margin-top:8px}
.w-login-blad{background:#fef2f2;border-left:3px solid #dc2626;padding:14px 18px;
  margin-bottom:20px;text-align:left;font-size:15px;color:#991b1b}
.w-login-info{font-size:14px;color:var(--ink-muted);margin-top:24px;line-height:1.6}

/* Ogłoszenie w pasku górnym — po lewej, żeby nie wypychało telefonu i maila. */
/* Biała czcionka: bursztyn był dobrany pod krótki alert („KSeF od lutego"),
   a tu stoi zdanie o usłudze — w tej roli kolor ostrzegawczy krzyczy bez powodu. */
.w-pasek-ogl{margin-right:auto;color:#fff;font-weight:600}
@media (max-width:980px){.w-pasek-ogl{display:none}}

/* ── Tekst + obraz 50/50 ────────────────────────────────────────────── */
.w-to-siatka{display:grid;gap:clamp(32px,4vw,64px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center}
.w-to-odwrot .w-to-tresc{order:2}
.w-to .w-to-tresc h1,.w-to .w-to-tresc h2{text-align:left;margin-inline:0;max-width:24ch}
.w-to .w-proza{max-width:none;margin-inline:0}
.w-to-obraz img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
@media (max-width:900px){
  .w-to-siatka{grid-template-columns:1fr;gap:28px}
  .w-to-odwrot .w-to-tresc{order:0}
  .w-to-obraz img{aspect-ratio:16/10}
}

/* ── Tabele w treści redakcyjnej ─────────────────────────────────────────────
   Treść przeniesiona ze starej witryny zawiera cenniki w tabelach. Bez stylu
   rysowały się jako luźne kolumny tekstu bez linii — czytelnik nie widział, że
   patrzy na tabelę, a przy trzech kolumnach cen to jest różnica między cennikiem
   a listą losowych liczb.

   Zasięg: WYŁĄCZNIE treść bloków i sekcji. `.adm-table` panelu i tabele Google
   Maps to osobne sprawy. */
.oplixo-pb-htext-b table,
.oplixo-pb-text table,
.w-proza table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem}
.oplixo-pb-htext-b th,.oplixo-pb-text th,.w-proza th{
  text-align:left;font-weight:800;color:var(--ink);background:var(--gray);
  padding:.75rem .9rem;border:1px solid var(--line)}
.oplixo-pb-htext-b td,.oplixo-pb-text td,.w-proza td{
  padding:.7rem .9rem;border:1px solid var(--line);vertical-align:top;color:var(--ink-soft)}
.oplixo-pb-htext-b tbody tr:nth-child(even),
.oplixo-pb-text tbody tr:nth-child(even),
.w-proza tbody tr:nth-child(even){background:var(--off-white)}

/* Wąskie ekrany: tabela przewija się w poziomie WEWNĄTRZ swojej ramki, zamiast
   rozpychać całą stronę. Owijkę robi CSS, bo treść pochodzi z edytora i nie ma
   jak dołożyć do niej dodatkowego znacznika. */
@media (max-width:700px){
  .oplixo-pb-htext-b table,.oplixo-pb-text table,.w-proza table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── Stopka: logo, profile, nota producenta ─────────────────────────────────── */
.w-dol-logo{display:block;max-width:190px;height:auto;margin:0 0 16px;
  /* Logo jest ciemne, a stopka ma ciemne tło — odwracamy jasność, zamiast trzymać
     drugi plik w białej wersji, który trzeba by podmieniać razem z pierwszym. */
  filter:brightness(0) invert(1);opacity:.92}
.w-dol-spol{margin-top:22px}
.w-dol-spol strong{display:block;margin-bottom:10px}
.w-dol-ikony{display:flex;gap:12px}
.w-dol-ikony a,.w-dol-ikony .w-dol-ikona-bez{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font-size:18px;
  transition:background .15s,border-color .15s,color .15s}
.w-dol-ikony a:hover{background:var(--marka);border-color:var(--marka);color:var(--marka-ink,#fff)}
/* Ikona bez adresu — ta sama ramka, ale bez kursora wskazującego: nie udajemy,
   że da się w nią kliknąć. */
.w-dol-ikony .w-dol-ikona-bez{color:rgba(255,255,255,.55);cursor:default}

/* Dwie noty w jednym pasie: klienta po lewej, producenta po prawej. Na wąskim
   ekranie jedna pod drugą, wyśrodkowane. */
/* Podpis producenta zawsze na środku — to jedyna nota w tym pasku, więc
   rozpychanie jej do krawędzi wyglądałoby na zgubioną resztkę. */
.w-dol-stopka{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:center;text-align:center}
/* Nota producenta ma być CZYTELNA — przy 70%% krycia na czerni ginęła. */
.w-dol-oplixo{opacity:1;color:#fff;font-weight:600;font-size:.84em;letter-spacing:.01em}
.w-dol-oplixo a{color:var(--marka);text-decoration:underline;font-weight:700}
.w-dol-oplixo a:hover{color:#fff}
@media (max-width:700px){
  .w-dol-stopka{flex-direction:column;text-align:center;gap:6px}
}

/* ── Kafelki kontaktowe (strona Kontakt) ──────────────────────────────────────
   Zastąpiły listę z myślnikami. Telefon i e-mail są odnośnikami wielkości
   przycisku — na telefonie to jedno kliknięcie, a nie zaznaczanie numeru. */
.w-kkafle{display:grid;gap:12px;grid-template-columns:1fr;margin:26px 0 0}
.w-kkafel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;padding:18px 20px;background:var(--white);
  border:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:border-color .18s,box-shadow .18s,transform .18s}
a.w-kkafel:hover{border-color:var(--marka);box-shadow:0 12px 28px rgba(15,23,42,.10);transform:translateY(-2px)}
.w-kkafel-ic{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;background:rgba(50,117,183,.10);color:var(--marka);font-size:18px}
.w-kkafel-et{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.w-kkafel-w{font-weight:700;font-size:15.5px;line-height:1.45;color:var(--ink);min-width:0;overflow-wrap:anywhere}
a.w-kkafel:hover .w-kkafel-w{color:var(--marka)}
/* Adres i godziny bywają dwulinijkowe — ikona wraca wtedy na górę, żeby nie
   „pływała” w połowie wysokości kafelka. */
.w-kkafel.is-info{align-items:start}
.w-kkafel.is-info .w-kkafel-ic{margin-top:2px}
.w-kkafel.is-info .w-kkafel-w{font-weight:600;font-size:14.5px}
@media (max-width:520px){.w-kkafel{padding:15px 16px}}


/* ── Logo nad danymi kontaktowymi ─────────────────────────────────────────── */
.w-kontakt-logo{display:block;width:100%;max-width:300px;height:auto;margin:0 0 20px}
.w-kontakt-lead{margin:0 0 4px;font-size:17px;color:var(--ink-soft)}

/* ── Strona logowania: karta na kolorowym tle ─────────────────────────────────
   Biała strona na białym tle wyglądała jak pusty formularz w próżni. Karta na
   gradiencie marki mówi „to jest wejście do panelu", a nie „to jest błąd". */
/* Tło CZARNE — dokładnie jak ekran logowania panelu. Klient zaczyna tutaj,
   a drugi składnik podaje w panelu: między jednym a drugim nie może zmienić
   mu się świat. Granat zostaje pozostałym sekcjom strony. */
.w-login{background:#000;background-image:radial-gradient(circle at 50% 45%,#0a0a12 0%,#000 62%);
  /* Orbita kręciła się dokładnie POD kartą — a karta ma 700 px i szkło z
     rozmyciem, więc zasłaniała całą animację. Dlatego na szerokim ekranie
     karta idzie w lewo, a orbita ma własne miejsce po prawej (`--orbita-x`
     = odległość jej środka od prawej krawędzi okna). */
  --orbita-x:clamp(210px,23vw,340px);
  padding:clamp(56px,8vw,104px) 0}
.w-login .w-wrap{max-width:580px;background:var(--white);padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,34px);
  box-shadow:0 26px 60px rgba(4,20,50,.28);text-align:center}
.w-login .w-oko{color:var(--marka)}
.w-login h1{margin:.2em 0 .4em}
.w-login-lead{color:var(--ink-soft)}
/* Formularz logowania nie jest kartą w karcie — ramkę i tło ma sama karta. */
.w-login-form{background:transparent;border:0;padding:0;margin-top:22px;gap:4px}
.w-login .w-btn{width:100%;justify-content:center}
.w-login-info{margin-top:18px;font-size:13px;color:var(--ink-soft);line-height:1.6}
.w-login-blad{background:#fdecec;border-left:3px solid #dc2626;color:#7f1d1d;
  padding:12px 16px;margin:0 0 16px;text-align:left;font-size:14px}


/* ── Animowane tło strony logowania ───────────────────────────────────────────
   Dokumenty, kłódki, tarcze i wykresy płyną powoli po granatowym tle. To ten sam
   zestaw motywów, co na ciemnych pasach strony (`_b_dekor_svg('ikony')`), tylko
   tu wpisany w CSS, bo sekcja logowania nie idzie przez kreator. Ruch wyłącza się
   przy `prefers-reduced-motion`. */
.w-login{position:relative;overflow:hidden}
.w-login::before{content:"";position:absolute;inset:-200px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 18h26l10 10v34H20z'/%3E%3Cpath d='M46 18v10h10'/%3E%3Cpath d='M27 42h22M27 50h22M27 58h14'/%3E%3Crect x='104' y='34' width='34' height='26' rx='3'/%3E%3Cpath d='M111 34v-7a10 10 0 0 1 20 0v7'/%3E%3Cpath d='M121 44v7'/%3E%3Cpath d='M40 104l18-7 18 7v16c0 12-8 19-18 23-10-4-18-11-18-23z'/%3E%3Cpath d='M50 120l6 6 12-12'/%3E%3Cpath d='M112 140V116M124 140V104M136 140V124'/%3E%3Cpath d='M104 148h40'/%3E%3Cpath d='M150 20l-14 18'/%3E%3Ccircle cx='150' cy='38' r='4'/%3E%3Ccircle cx='136' cy='20' r='4'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;opacity:.045;
  animation:wLoginPlyn 90s linear infinite;will-change:transform}
.w-login .w-wrap{position:relative;z-index:1}
@keyframes wLoginPlyn{from{transform:translate(0,0)}to{transform:translate(180px,180px)}}
@media(prefers-reduced-motion:reduce){.w-login::before{animation:none}}


/* ── „Orbita autoryzacji" — tylko strona logowania ────────────────────────────
   Trzy pierścienie krążą wokół karty, a ikony (kłódka, klucz, odcisk palca, sejf,
   pieczątka) jadą po nich i KONTRUJĄ obrót, więc nigdy nie stoją do góry nogami.
   Pierścienie są większe niż okno — sekcja ma `overflow:hidden`, żeby nie zrobiły
   poziomego paska przewijania. */
/* Środek orbity siedzi po PRAWEJ: kontener ma szerokość dwóch odległości od
   prawej krawędzi, a `place-items:center` ustawia pierścienie dokładnie w tym
   punkcie. Przycinaniem zajmuje się `.w-login{overflow:hidden}` — tu musi być
   `visible`, inaczej boczne łuki urywałyby się w połowie. */
.w-orbita{position:absolute;top:0;bottom:0;right:0;left:auto;width:calc(var(--orbita-x) * 2);
  pointer-events:none;display:grid;place-items:center;overflow:visible}
.w-orbita-poswiata{position:absolute;width:min(600px,82vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--marka-rgb),.24),rgba(255,255,255,0) 62%);filter:blur(8px)}
.w-orbita-pierscien{position:absolute;border:1px dashed rgba(255,255,255,.16);border-radius:50%;
  aspect-ratio:1;will-change:transform}
.w-orbita-1{width:min(330px,62vw);animation:wOrbita 24s linear infinite}
.w-orbita-2{width:min(510px,92vw);border-style:solid;border-color:rgba(var(--marka-rgb),.32);
  animation:wOrbita 40s linear infinite reverse}
.w-orbita-3{width:min(700px,126vw);animation:wOrbita 62s linear infinite}
.w-orbita-ikona{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  display:inline-flex;align-items:center;justify-content:center;font-size:26px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  /* Ikona jedzie po obwodzie: obrót o swój kąt, przesunięcie na promień, obrót z powrotem. */
  transform:rotate(var(--kat)) translateY(calc(var(--promien, 210px) * -1)) rotate(calc(var(--kat) * -1))}
.w-orbita-1 .w-orbita-ikona{--promien:min(165px,31vw)}
.w-orbita-2 .w-orbita-ikona{--promien:min(255px,46vw)}
.w-orbita-3 .w-orbita-ikona{--promien:min(350px,63vw);opacity:.85}
/* Ikony kontrują obrót pierścienia, żeby stały prosto. */
.w-orbita-1 .w-orbita-ikona{animation:wOrbitaKontra 24s linear infinite reverse}
.w-orbita-2 .w-orbita-ikona{animation:wOrbitaKontra 40s linear infinite}
.w-orbita-3 .w-orbita-ikona{animation:wOrbitaKontra 62s linear infinite reverse}
@keyframes wOrbita{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wOrbitaKontra{
  from{transform:rotate(var(--kat)) translateY(calc(var(--promien) * -1)) rotate(calc(var(--kat) * -1)) rotate(0)}
  to  {transform:rotate(var(--kat)) translateY(calc(var(--promien) * -1)) rotate(calc(var(--kat) * -1)) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .w-orbita-pierscien,.w-orbita-ikona{animation:none}
}
/* Karta logowania ma leżeć NAD orbitą i mieć własne, mocniejsze tło. */
.w-login .w-wrap{position:relative;z-index:2}
/* Karta w lewo — tylko tam, gdzie jest na to miejsce. Poniżej 1180 px wraca na
   środek, a orbita znów robi za tło (na wąskim ekranie nie ma jej gdzie odsunąć). */
@media(min-width:1180px){
  .w-login .w-wrap{margin-left:max(28px,calc(50vw - 640px));margin-right:0}
}
@media(max-width:1179px){
  /* Bez miejsca po prawej orbita wraca pod kartę — wtedy duże ikony tylko
     przeszkadzają w czytaniu formularza, więc maleją i przygasają. */
  .w-login{--orbita-x:50vw}
  .w-orbita-ikona{width:50px;height:50px;margin:-25px 0 0 -25px;font-size:20px;opacity:.85}
}
@media(max-width:640px){
  .w-orbita-ikona{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:18px}
  .w-orbita-3{display:none}
}


/* ── Karta logowania: szkło na orbicie ────────────────────────────────────────
   Biała karta na kolorowym tle wyglądała jak wycięty prostokąt. Półprzezroczyste
   szkło z rozmyciem trzyma kontakt z animacją pod spodem, a pola formularza mają
   własny, ciemniejszy kontrast — tekst musi być czytelny na każdym kadrze orbity. */
/* ── Karta BEZ przezroczystości ───────────────────────────────────────────
   Była szkłem, więc jej barwa powstawała z mieszania z tłem — a to znaczy, że
   przy każdej zmianie tła zmieniała kolor sama z siebie: na granacie wychodził
   czytelny granat, na czerni prawie czerń. Teraz kolor jest PEŁNY i jest tym,
   co napisane. Rozmycie tła zniknęło razem z przezroczystością: pod krytą
   powierzchnią nie miało czego rozmywać, a kosztowało osobną warstwę
   rysowaną przez kartę graficzną. */
.w-login .w-wrap{background:#122f63;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 70px rgba(0,0,0,.55);color:#fff}
.w-login-znak{display:block;width:54px;height:54px;margin:0 auto 14px;object-fit:contain}
.w-login .w-oko{color:#9fc6ec}
.w-login h1{color:#fff}
.w-login-lead{color:rgba(255,255,255,.82)}
.w-login-form label{color:rgba(255,255,255,.7)}
.w-login-form input{background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,.32);
  color:#fff;padding-left:2px;padding-right:2px;transition:border-color .18s}
.w-login-form input:focus{outline:none;background:transparent;border-bottom-color:#9fc6ec;box-shadow:none}
.w-login-form input::placeholder{color:rgba(255,255,255,.5)}
.w-login-form input:-webkit-autofill{-webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(9,26,64,.9) inset;caret-color:#fff}
/* Biały przycisk jest dobrany pod GRANAT KARTY, nie pod tło sekcji — karta
   została granatowa, więc i przycisk zostaje biały. */
.w-login .w-btn-glowny{background:#fff;background-image:none;color:var(--granat);border:0}
.w-login .w-btn-glowny:hover{background:#e8f0fa;color:var(--granat)}
.w-login-info{color:rgba(255,255,255,.7)}
.w-login-blad{background:rgba(220,38,38,.18);border-left:3px solid #f87171;color:#ffe4e6}
/* Trzy obietnice u dołu karty — nie ozdoba, tylko odpowiedź na „czy to bezpieczne". */
.w-login-bezp{display:flex;flex-wrap:wrap;gap:8px 13px;justify-content:center;
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:11px;color:rgba(255,255,255,.72)}
.w-login-bezp span{display:inline-flex;align-items:center;gap:6px}
.w-login-bezp i{color:#9fc6ec}

/* Pola w karcie logowania: etykieta osobno, pole osobno, odstęp między nimi —
   bez tego etykieta i input zlewały się w jeden prostokąt z jedną ramką. */
.w-login-form label{display:grid;gap:7px;margin-bottom:16px;text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.w-login-form input{padding:12px 2px;font-size:16px;font-family:inherit}
.w-login-form .w-btn{margin-top:4px;letter-spacing:.08em}


/* ── Orbita: radar, fale i dodatkowe pierścienie ──────────────────────────────
   Do trzech pierścieni z ikonami dochodzi obracający się „promień radaru"
   (gradient stożkowy), trzy rozchodzące się fale i dwa pierścienie z samymi
   kropkami. Wszystko na `transform`/`opacity`, więc przeglądarka rysuje to na
   karcie graficznej i nie zajmuje procesora. */
.w-orbita-radar{position:absolute;width:min(700px,126vw);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(var(--marka-rgb),.32),rgba(255,255,255,0) 28%,rgba(255,255,255,0) 100%);
  animation:wOrbita 10s linear infinite;mix-blend-mode:screen;opacity:.8}
.w-orbita-fala{position:absolute;width:min(285px,52vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--marka-rgb),.55);animation:wFala 5.4s ease-out infinite;opacity:0}
.w-orbita-fala-2{animation-delay:1.8s}
.w-orbita-fala-3{animation-delay:3.6s}
@keyframes wFala{
  0%{transform:scale(.6);opacity:.55}
  70%{opacity:.12}
  100%{transform:scale(2.6);opacity:0}}
.w-orbita-4{width:min(420px,76vw);border-style:dotted;border-color:rgba(255,255,255,.14);
  animation:wOrbita 32s linear infinite reverse}
.w-orbita-5{width:min(610px,110vw);border-style:dashed;border-color:rgba(255,255,255,.12);
  animation:wOrbita 50s linear infinite}
.w-orbita-kropka{position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:var(--marka);box-shadow:0 0 16px rgba(var(--marka-rgb),.9);
  transform:rotate(var(--kat)) translateY(calc(var(--promien,270px) * -1))}
.w-orbita-4 .w-orbita-kropka{--promien:min(210px,38vw)}
.w-orbita-5 .w-orbita-kropka{--promien:min(305px,55vw);opacity:.75}
@media(prefers-reduced-motion:reduce){
  .w-orbita-radar,.w-orbita-fala{animation:none}
  .w-orbita-fala{opacity:.18}
}
@media(max-width:640px){.w-orbita-5{display:none}}

/* ── Laptop 15,6" — cała karta ma się zmieścić bez przewijania ────────────────
   Sterujemy WYSOKOŚCIĄ okna, nie szerokością: 15,6" to zwykle 1366×768 albo
   1920×1080 przy powiększeniu 125–150%, czyli w obu przypadkach ok. 620–700 px
   miejsca po odjęciu paska przeglądarki i nagłówka strony. Na dużym monitorze
   ten blok w ogóle nie wchodzi, więc karta zostaje przestronna.
   Widget Cloudflare ma stałe 65 px i nie da się go zmniejszyć — resztę odstępów
   docinamy wokół niego. */
@media (max-height:1000px){
  .w-login{padding:clamp(24px,3vh,40px) 0}
  .w-login .w-wrap{padding:clamp(20px,2.6vh,30px) clamp(22px,3vw,34px)}
  .w-login-znak{width:42px;height:42px;margin-bottom:9px}
  .w-login-oko{margin-bottom:9px}
  .w-login-tytul{font-size:clamp(24px,2.6vw,30px);margin-bottom:.32em}
  .w-login-lead{font-size:13.5px;line-height:1.55;margin:0 0 4px}
  .w-login-form{margin-top:14px}
  .w-login-form label{margin-bottom:10px;gap:5px}
  .w-login-form input{padding:9px 2px;font-size:15px}
  .w-login .w-ts{margin:2px 0 10px}
  .w-login-info{margin-top:12px;font-size:12.5px;line-height:1.5}
  .w-login-bezp{margin-top:13px;padding-top:10px}
}
/* Laptop 15,6" w 1366×768: po odjęciu paska przeglądarki zostaje ok. 680 px,
   a nagłówek strony zjada 123 — karta musi zmieścić się w ~540. Dlatego tniemy
   wszystkie odstępy i CHOWAMY drugie zdanie leadu oraz drugą linię informacji
   (`.w-login-dod`). Zdania zostają w kodzie; wracają, gdy ekran ma miejsce. */
@media (max-height:900px){
  /* Górny pasek kontaktowy (42 px) zabiera dokładnie tyle, ile brakuje karcie
     do zmieszczenia się na 1366×768. Chowamy go WYŁĄCZNIE na stronie logowania
     (`:has`) — telefon i mail są w stopce i w nagłówku, a tu liczy się to, żeby
     formularz był widoczny w całości bez przewijania. */
  body:has(.w-login) .w-pasek{display:none}
  .w-login{padding:14px 0}
  .w-login .w-wrap{padding:16px clamp(20px,3vw,30px)}
  .w-login-znak{width:32px;height:32px;margin-bottom:6px}
  .w-login-oko{margin-bottom:6px;font-size:9.5px;letter-spacing:.16em}
  .w-login-oko::before,.w-login-oko::after{width:24px}
  .w-login-tytul{font-size:23px;margin-bottom:.24em}
  .w-login-lead{font-size:12.5px;line-height:1.45;margin:0 0 2px}
  .w-login-dod{display:none}
  .w-login-form{margin-top:10px;gap:0}
  .w-login-form label{margin-bottom:7px;gap:4px;font-size:10px}
  .w-login-form input{padding:6px 2px;font-size:14.5px}
  .w-login .w-ts{margin:2px 0 8px}
  .w-login .w-btn{padding-top:11px;padding-bottom:11px}
  .w-login-info{margin-top:9px;font-size:12px;line-height:1.45}
  .w-login-bezp{margin-top:9px;padding-top:8px;font-size:10.5px;gap:6px 11px}
}

/* Widget Turnstile na ciemnej karcie: wyśrodkowany, z odstępem od pól. */
.w-login .w-ts{display:flex;justify-content:center;margin:6px 0 14px}
.w-kontakt .w-ts{margin:6px 0 14px}

/* Lead i informacja o kodzie mają mieścić się w jednej linii na monitorze;
   na wąskim ekranie wracają do normalnego łamania. */
/* Zdanie o kodzie ma zostać w jednej linii; lead jest dłuższy i łamie się normalnie. */
@media (min-width:760px){
  .w-login-info{white-space:nowrap}
}

/* „Panel logowania" — jedyny nagłówek karty. Wersaliki i rozstrzelenie, bo to
   etykieta wejścia do systemu, a nie tytuł artykułu. */
/* Nagłówek karty: mała etykieta z kreskami po bokach + tytuł normalną wielkością
   liter. Wersaliki w dużym stopniu robiły z tego betonowy klocek; drugie słowo jest
   jaśniejsze, więc lockup ma rytm, a nie jedną plamę. */
.w-login-oko{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 14px}
.w-login-oko::before,.w-login-oko::after{content:"";height:1px;width:34px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45))}
.w-login-oko::after{background:linear-gradient(90deg,rgba(255,255,255,.45),transparent)}
.w-login-tytul{font-size:clamp(28px,3.4vw,38px);letter-spacing:-.01em;line-height:1.15;
  font-weight:800;color:#fff;margin:0 0 .45em}
.w-login-tytul span{font-weight:300;color:rgba(255,255,255,.82)}
.w-login-lead{max-width:520px;margin-left:auto;margin-right:auto;line-height:1.65}



/* ── Pas „Jesteśmy częścią grupy" ─────────────────────────────────────────────
   Stoi między treścią a czarną stopką, więc ma jasne tło — inaczej zlewałby się
   ze stopką w jeden ciemny blok. Logotypy są w różnych proporcjach (od 425×90 do
   1169×253), dlatego wysokość ograniczamy, a szerokość zostawiamy automatyczną:
   `object-fit:contain` pilnuje, żeby żaden się nie rozciągnął. */
/* Pas jest CIEMNY, bo takie są logotypy: sprawdzone pikselowo — średni kolor
   widocznych punktów to ok. rgb(200,200,200), czyli są rysowane pod ciemne tło.
   Na jasnym pasie znikały. Ciemny pas domyka stronę razem ze stopką, a delikatna
   linia u góry oddziela go od treści. */
.w-grupa{background:#0a0a12;border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(34px,4vw,54px) 0}
.w-grupa-tytul{margin:0 0 clamp(18px,2.4vw,28px);text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.w-grupa-lista{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,64px)}
.w-grupa-el{display:flex;align-items:center;justify-content:center}
.w-grupa-el img{max-height:50px;width:auto;max-width:min(240px,42vw);object-fit:contain;display:block;
  /* BEZ wyszarzenia: każda spółka ma własny kolor w znaku i to jest jej znak
     rozpoznawczy. Szare logotypy na czarnym pasie zlewały się ze stopką w jedną
     szarą wstęgę — pas grupy przestawał wyglądać na cokolwiek. */
  opacity:.92;transition:opacity .2s,transform .2s}
.w-grupa-el a:hover img,.w-grupa-el a:focus-visible img{opacity:1;transform:translateY(-2px)}
@media(max-width:620px){
  .w-grupa-lista{gap:26px 22px}
  .w-grupa-el img{max-height:38px}
}
@media(prefers-reduced-motion:reduce){.w-grupa-el img{transition:none}}