/* uro-active.eu — skorka ua_ (28.09.2026)
 *
 * Kazda domena w portfelu ma wlasny silnik i wlasny wyglad — ta idzie
 * w grafit z czerwonym akcentem, bo grupa docelowa to mezczyzni 40+.
 *
 * ZASADA UKLADU, ktora kosztowala juz jedna domene (pkt 354): liczba kolumn
 * siatki NIGDY nie idzie w atrybut `style`, tylko w klase `.ua-k2/.ua-k3/.ua-k4`.
 * Atrybut `style` ma wyzsza wage niz arkusz, wiec zapytania medialne nie
 * mialyby jak zadzialac i strona rozjechalaby sie na telefonie.
 */

:root{
  --ua-graf:#171a1f;        /* tlo ciemnych sekcji */
  --ua-graf2:#1f242c;
  --ua-czerw:#d81f2a;       /* akcent */
  --ua-czerw-ciemny:#a5121c;
  --ua-biel:#ffffff;
  --ua-tlo:#f4f5f7;
  --ua-tekst:#232830;
  --ua-szary:#5e6672;
  --ua-linia:#e2e5ea;
  --ua-r:14px;
  --ua-cien:0 10px 30px rgba(23,26,31,.10);
  --ua-cien-m:0 4px 14px rgba(23,26,31,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ua-biel);color:var(--ua-tekst);
  font:16.5px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ua-czerw)}
h1,h2,h3,h4{line-height:1.22;margin:0 0 14px;letter-spacing:-.01em}
h1{font-size:40px;font-weight:800}
h2{font-size:29px;font-weight:800}
h3{font-size:20px;font-weight:700}
p{margin:0 0 15px}

.ua-w{max-width:1140px;margin:0 auto;padding:0 20px}

/* ——— pasek gorny ——— */
.ua-nav{background:var(--ua-graf);color:#fff;padding:13px 0;position:sticky;top:0;z-index:50}
.ua-nav .ua-w{display:flex;align-items:center;gap:22px}
.ua-logo{font-weight:800;font-size:22px;color:#fff;text-decoration:none;letter-spacing:-.02em}
.ua-logo b{color:var(--ua-czerw)}
.ua-menu{display:flex;gap:18px;margin-left:auto;font-size:14.5px}
.ua-menu a{color:#c9ced6;text-decoration:none}
.ua-menu a:hover{color:#fff}

/* ——— przyciski ——— */
.ua-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--ua-czerw);color:#fff;text-decoration:none;font-weight:800;
  padding:15px 30px;border:0;border-radius:11px;font-size:16.5px;
  box-shadow:0 8px 20px rgba(216,31,42,.26);transition:transform .14s,box-shadow .14s;
}
.ua-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(216,31,42,.32)}
.ua-btn-ciemny{background:var(--ua-graf2);box-shadow:none}

/* ——— hero ——— */
.ua-hero{background:var(--ua-graf);color:#fff;padding:52px 0 58px;position:relative;overflow:hidden}
.ua-hero:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 420px at 78% 18%,rgba(216,31,42,.22),transparent 62%);
}
.ua-hero .ua-w{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.ua-hero h1{color:#fff}
.ua-hero h1 span{color:var(--ua-czerw)}
.ua-lead{font-size:18.5px;color:#cfd5de;max-width:56ch}
.ua-lead b{color:#fff}
.ua-punkty{list-style:none;padding:0;margin:20px 0 26px}
.ua-punkty li{position:relative;padding-left:30px;margin-bottom:11px;color:#dfe4ea;font-size:16px}
.ua-punkty li:before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--ua-czerw);box-shadow:0 0 0 4px rgba(216,31,42,.18);
}
.ua-foto{position:relative;text-align:center}
.ua-foto img{margin:0 auto;filter:drop-shadow(0 26px 44px rgba(0,0,0,.45))}
.ua-zaufanie{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:14px;color:#aab2bd}
.ua-zaufanie div{display:flex;align-items:center;gap:8px}
.ua-zaufanie svg{width:18px;height:18px;stroke:var(--ua-czerw);fill:none;stroke-width:2}

/* ——— sekcje ——— */
.ua-sek{padding:56px 0}
.ua-sek-szara{background:var(--ua-tlo)}
.ua-sek-ciemna{background:var(--ua-graf);color:#fff}
.ua-sek-ciemna h2,.ua-sek-ciemna h3{color:#fff}
.ua-sek-ciemna .ua-wst{color:#c3cad3}
.ua-wst{font-size:18px;color:var(--ua-szary);max-width:64ch;margin:0 0 26px}

/* ——— siatki: liczba kolumn TYLKO klasa, nigdy atrybut style ——— */
.ua-siatka{display:grid;gap:18px}
.ua-k2{grid-template-columns:repeat(2,1fr)}
.ua-k3{grid-template-columns:repeat(3,1fr)}
.ua-k4{grid-template-columns:repeat(4,1fr)}
.ua-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}
.ua-duo-52{grid-template-columns:1fr 1fr}

/* ——— kafelki ——— */
.ua-kafel{
  background:var(--ua-biel);border:1px solid var(--ua-linia);border-radius:var(--ua-r);
  padding:24px 20px;box-shadow:var(--ua-cien-m);
}
.ua-sek-ciemna .ua-kafel{background:var(--ua-graf2);border-color:#2b323c}
.ua-kafel b{display:block;font-size:16.5px;margin-bottom:6px}
.ua-kafel span{color:var(--ua-szary);font-size:15px}
.ua-sek-ciemna .ua-kafel span{color:#aeb6c0}
.ua-numer{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;margin-bottom:12px;
  background:rgba(216,31,42,.12);color:var(--ua-czerw);font-weight:800;
}

/* ——— skladniki ——— */
.ua-skl{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center;
  background:var(--ua-biel);border:1px solid var(--ua-linia);border-radius:var(--ua-r);
  padding:18px;margin-bottom:16px;box-shadow:var(--ua-cien-m)}
.ua-skl img{border-radius:10px}
.ua-skl ul{margin:0;padding-left:18px;color:var(--ua-szary)}
.ua-skl li{margin-bottom:5px}

/* ——— liczba na opakowaniu ——— */
.ua-liczba{text-align:center;padding:26px 0}
.ua-liczba b{display:block;font-size:66px;font-weight:800;color:var(--ua-czerw);line-height:1}
.ua-liczba span{display:block;font-size:13.5px;letter-spacing:.14em;color:var(--ua-szary);text-transform:uppercase;margin-top:6px}

/* ——— cena i formularz ——— */
.ua-cena{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.ua-cena b{font-size:46px;font-weight:800;color:var(--ua-czerw);line-height:1}
.ua-cena span{color:var(--ua-szary);font-size:15px}
.ua-form{background:var(--ua-biel);border:1px solid var(--ua-linia);border-radius:var(--ua-r);
  padding:26px;box-shadow:var(--ua-cien)}
.ua-form label{display:block;font-size:14px;color:var(--ua-szary);margin:0 0 6px}
.ua-form input{width:100%;padding:14px 15px;font:inherit;font-size:16px;
  border:1px solid var(--ua-linia);border-radius:11px;margin-bottom:14px;outline:none;background:#fbfbfc}
.ua-form input:focus{border-color:var(--ua-czerw);box-shadow:0 0 0 3px rgba(216,31,42,.14)}
.ua-form .ua-btn{width:100%;justify-content:center}
/* pulapka na boty: poza ekranem, ale NIE display:none — czesc botow to wykrywa */
.ua-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ua-odp{font-size:15px;margin:12px 0 0;min-height:22px}
.ua-drobne{font-size:13px;color:var(--ua-szary);margin:10px 0 0}

/* zastrzezenie rynkowe przy formularzu — regulamin oferty wymaga, zeby bylo
   widoczne PRZED zostawieniem numeru, nie po */
.ua-uwaga{
  border:1px solid rgba(216,31,42,.35);background:rgba(216,31,42,.06);
  border-radius:11px;padding:13px 15px;font-size:14.5px;font-weight:600;margin:0 0 16px;
}

/* ——— kroki ——— */
.ua-kroki{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ua-krok{background:var(--ua-biel);border:1px solid var(--ua-linia);border-radius:12px;padding:18px 16px}
.ua-krok b{display:block;font-size:15.5px;margin-bottom:4px}
.ua-krok span{font-size:14px;color:var(--ua-szary)}

/* ——— FAQ ——— */
.ua-faq details{border-bottom:1px solid var(--ua-linia);padding:15px 0}
.ua-faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.ua-faq summary::-webkit-details-marker{display:none}
.ua-faq summary:after{content:"+";color:var(--ua-czerw);font-weight:800;font-size:22px;line-height:1}
.ua-faq details[open] summary:after{content:"–"}
.ua-faq .ua-tresc{color:var(--ua-szary);margin-top:10px}

/* ——— stopka ——— */
.ua-stopka{background:var(--ua-graf);color:#98a1ac;padding:40px 0 0;font-size:14.5px}
.ua-stopka .ua-w{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;padding-bottom:28px}
.ua-stopka h4{color:#fff;font-size:15px;margin-bottom:9px}
.ua-stopka .ua-logo{color:#fff}
.ua-dol{border-top:1px solid #2b323c;padding:16px 0;font-size:13px;color:#7b8590}

/* ——— pasek zamowienia na telefonie ——— */
.ua-pasek{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:12px;
  padding:10px 14px;background:rgba(23,26,31,.97);border-top:1px solid #2b323c;
  transform:translateY(115%);transition:transform .28s ease;
}
.ua-pasek.ua-pasek-on{transform:none}
.ua-pasek-opis{flex:1;min-width:0;font-size:13px;color:#aab2bd;line-height:1.3}
.ua-pasek-opis b{display:block;color:#fff;font-size:15px}
.ua-pasek .ua-btn{padding:11px 18px;font-size:15px;white-space:nowrap}

/* ——— telefon ——— */
@media (max-width:980px){
  h1{font-size:31px}h2{font-size:24px}
  .ua-hero .ua-w,.ua-duo,.ua-duo-52{grid-template-columns:1fr;gap:26px}
  .ua-k4{grid-template-columns:repeat(2,1fr)}
  .ua-kroki{grid-template-columns:repeat(2,1fr)}
  .ua-skl{grid-template-columns:1fr}
  .ua-stopka .ua-w{grid-template-columns:1fr}
  .ua-menu{display:none}
  .ua-pasek{display:flex}
  body{padding-bottom:64px}
}
@media (max-width:640px){
  .ua-k2,.ua-k3,.ua-k4{grid-template-columns:1fr}
  .ua-kroki{grid-template-columns:1fr}
  .ua-liczba b{font-size:52px}
  .ua-cena b{font-size:38px}
}

/* ---------- korzen: wybor kraju ---------- */
.ua-kraje{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0 0}
.ua-kraj{
  display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--ua-linia);
  border-radius:var(--ua-r);padding:18px 20px;text-decoration:none;color:var(--ua-tekst);
  box-shadow:var(--ua-cien-m);transition:transform .15s,box-shadow .15s,border-color .15s}
.ua-kraj:hover{transform:translateY(-2px);box-shadow:var(--ua-cien);border-color:var(--ua-czerw)}
.ua-kraj-kod{
  flex:0 0 46px;height:46px;border-radius:10px;background:var(--ua-graf);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  letter-spacing:.04em}
.ua-kraj-tekst b{display:block;font-size:17px;margin-bottom:2px}
.ua-kraj-tekst span{display:block;color:var(--ua-szary);font-size:14.5px}
.ua-kraj-cena{margin-left:auto;font-weight:800;color:var(--ua-czerw);font-size:17px;white-space:nowrap}
/* stopka korzenia ma dwa akapity, nie trzy kolumny jak na stronach rynkowych */
.ua-stopka-korzen .ua-w{grid-template-columns:1fr;max-width:860px}
@media(max-width:900px){.ua-kraje{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ua-kraje{grid-template-columns:1fr}}

/* ---------- zdjecia: marginesy i ramki klasami, nie w atrybucie style ---------- */
.ua-kafle-pod{margin-top:18px}
.ua-foto-ramka{border-radius:var(--ua-r);box-shadow:var(--ua-cien)}
.ua-podpis-foto{font-size:13.5px;color:var(--ua-szary);margin:10px 2px 0;line-height:1.5}
.ua-sek-ciemna .ua-podpis-foto{color:#9aa3ae}

/* ---------- artykul ---------- */
.ua-art-glowa{background:var(--ua-graf);color:#fff;padding:46px 0 40px}
.ua-art-glowa h1{color:#fff;max-width:20ch}
.ua-art-nad{color:var(--ua-czerw);font-weight:700;font-size:13.5px;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 10px}
.ua-art-tresc{max-width:760px;padding-top:34px;padding-bottom:10px}
.ua-art-tresc h2{margin:34px 0 12px;font-size:25px}
.ua-art-tresc h3{margin:24px 0 8px;font-size:19px}
.ua-art-tresc p{font-size:17px;line-height:1.72}
.ua-art-tresc ul{padding-left:22px;margin:0 0 16px}
.ua-art-tresc li{margin-bottom:8px;font-size:17px;line-height:1.65}
.ua-art-tabela{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15.5px}
.ua-art-tabela th,.ua-art-tabela td{border:1px solid var(--ua-linia);padding:10px 12px;text-align:left;
  vertical-align:top}
.ua-art-tabela th{background:var(--ua-tlo);font-weight:700}
.ua-zrodla{margin:38px 0 6px;padding-top:22px;border-top:2px solid var(--ua-linia)}
.ua-zrodla h2{font-size:20px;margin:0 0 10px}
.ua-zrodla ol{padding-left:20px;margin:0}
.ua-zrodla li{font-size:14.5px;color:var(--ua-szary);line-height:1.6;margin-bottom:7px}

/* trzy wejscia sprzedazowe */
.ua-box{background:#fff;border:1px solid var(--ua-linia);border-left:4px solid var(--ua-czerw);
  border-radius:var(--ua-r);box-shadow:var(--ua-cien-m);margin:26px 0}
.ua-box-maly{display:flex;align-items:center;gap:20px;padding:18px 22px}
.ua-box-maly b{display:block;font-size:16.5px;margin-bottom:3px}
.ua-box-maly span{color:var(--ua-szary);font-size:15px}
.ua-box-maly .ua-btn{margin-left:auto;white-space:nowrap}
.ua-box-sredni{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:center;
  padding:22px}
.ua-box-sredni b{display:block;font-size:18px;margin-bottom:8px}
.ua-box-sredni ul{padding-left:20px;margin:0 0 10px}
.ua-box-sredni li{font-size:15.5px;margin-bottom:5px}
.ua-box-cena{font-size:22px;font-weight:800;color:var(--ua-czerw);margin:0}
.ua-box-cena span{font-size:14px;font-weight:400;color:var(--ua-szary);display:block}
.ua-box-duzy{margin-top:36px}
.ua-box-duzy .ua-w{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center}
@media(max-width:760px){
  .ua-box-maly{flex-direction:column;align-items:flex-start}
  .ua-box-maly .ua-btn{margin-left:0}
  .ua-box-sredni{grid-template-columns:1fr}
  .ua-box-duzy .ua-w{grid-template-columns:1fr}
  .ua-art-tabela{font-size:14.5px}
}

/* ---------- uklad v2: trzynascie sekcji ---------- */
.ua-duo-pod{margin-top:34px}
.ua-nota-pod{margin-top:18px}
.ua-blok-zamow{margin-top:30px}
.ua-form-h3{color:var(--ua-tekst)}
.ua-form-p{font-size:14.5px;color:var(--ua-szary)}
.ua-pod-listami{margin-top:22px;max-width:68ch}
.ua-h2-dalej{margin-top:44px}
.ua-kroki-szer{margin-top:6px}
.ua-pas-cta{margin-top:26px}
.ua-wie ul,.ua-niewie ul{list-style:none;padding:0;margin:10px 0 0}
.ua-wie li,.ua-niewie li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16px;
  line-height:1.6}
.ua-wie li:before{content:"";position:absolute;left:4px;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--ua-czerw)}
.ua-niewie li:before{content:"";position:absolute;left:2px;top:12px;width:13px;height:2px;
  background:var(--ua-szary)}
.ua-sek-ciemna .ua-wie li,.ua-sek-ciemna .ua-niewie li{color:#dfe4ea}

/* Packshot ma teraz wlasny ksztalt (przezroczyste tlo), wiec cien idzie za
   sylwetka sloika. Ograniczamy WYSOKOSC, nie szerokosc: plik jest wysoki
   i bez tego na waskim ekranie zajmowal 70 % szerokosci. */
.ua-foto img{max-height:min(620px,64vh);width:auto}