:root{
  --bg:#0b1220;
  --bg2:#0e1930;
  --card:#0f1f3b;
  --card2:#0c1a33;
  --text:#e6edf7;
  --muted:#c6d3ea;
  --line:rgba(255,255,255,.10);
  --accent:#2b7bff;
  --accent2:#1e4fd7;
  --ok:#3ddc97;
  --warn:#ffcf5a;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 700px at 15% -10%, rgba(43,123,255,.25), transparent 60%),
              radial-gradient(900px 600px at 95% 0%, rgba(61,220,151,.10), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, #070c16 100%);
  line-height:1.62;
  font-size:16px;
}

a{color:inherit}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; background:var(--card); padding:10px 12px; border-radius:12px; outline:2px solid var(--accent)}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,10,18,.55);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.logo{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(145deg, rgba(43,123,255,.95), rgba(30,79,215,.85));
  display:grid; place-items:center;
  box-shadow: 0 18px 40px rgba(43,123,255,.22);
}
.logo svg{width:22px; height:22px}
.brand strong{display:block; font-size:14px; letter-spacing:.2px}
.brand span{display:block; font-size:12px; color:var(--muted); margin-top:-2px}

nav ul{list-style:none; padding:0; margin:0; display:flex; gap:8px; align-items:center}
nav a{
  text-decoration:none; color:var(--muted);
  padding:10px 12px; border-radius:12px;
  transition:.18s ease;
  border:1px solid transparent;
}
nav a:hover{color:var(--text); background:rgba(255,255,255,.04); border-color:var(--line)}
nav a.active{color:var(--text); background:rgba(43,123,255,.12); border-color:rgba(43,123,255,.35)}

.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
  font-weight:650;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(43,123,255,.45)}
.btn.primary{
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(43,123,255,.18);
}
.btn.primary:hover{box-shadow: 0 18px 50px rgba(43,123,255,.25)}
.btn.small{padding:9px 12px; font-weight:600}
.hamb{display:none}

.hero{
  padding:56px 0 18px;
}
.grid-2{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:stretch;
}
@media (max-width: 920px){ .grid-2{grid-template-columns:1fr; } nav ul{display:none} .hamb{display:inline-flex} }
.card{
  background: linear-gradient(180deg, rgba(15,31,59,.92), rgba(12,26,51,.88));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card{padding:28px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(43,123,255,.10);
  border:1px solid rgba(43,123,255,.25);
  color: var(--text);
  font-weight:650;
  font-size:13px;
}
h1{margin:14px 0 10px; font-size:48px; line-height:1.04; letter-spacing:-.6px}
p.lead{margin:0 0 16px; color:var(--muted); font-size:18px; line-height:1.6}
.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:18px}
.kpi{padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02)}
.kpi strong{display:block; font-size:16px}
.kpi span{display:block; font-size:12px; color:var(--muted); margin-top:4px}

.section{padding:34px 0}
.section h2{font-size:30px; margin:0 0 12px; letter-spacing:-.25px}
.section p.sub{margin:0 0 18px; color:var(--muted); font-size:16px}
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
@media (max-width: 920px){ .cards{grid-template-columns: 1fr; } .kpis{grid-template-columns:1fr} }
.service{padding:20px}
.service h3{margin:0 0 8px; font-size:19px; letter-spacing:-.15px}
.service p{margin:0; color:var(--muted); font-size:15px}
.icon{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(43,123,255,.12);
  border:1px solid rgba(43,123,255,.25);
}

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

.calc{padding:18px}
.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px 12px;
}
@media (max-width: 720px){ .form-grid{grid-template-columns:1fr} }
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
input:focus, select:focus{border-color:rgba(43,123,255,.55); box-shadow: 0 0 0 4px rgba(43,123,255,.12)}
.help{font-size:12px; color:var(--muted); margin-top:6px}

.result{
  margin-top:14px;
  padding:14px 14px;
  border-radius:16px;
  background: rgba(43,123,255,.10);
  border:1px solid rgba(43,123,255,.25);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.result strong{font-size:20px}
.result small{color:var(--muted)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:12px;
}

.faq{padding:18px}
.accordion{border-top:1px solid var(--line); margin-top:8px}
.accordion button{
  width:100%;
  text-align:left;
  padding:14px 0;
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  display:flex; justify-content:space-between; gap:12px;
}
.accordion .a{
  padding:0 0 14px;
  color:var(--muted);
  display:none;
}
.accordion .item{border-bottom:1px solid var(--line)}
.accordion .item.open .a{display:block}
.chev{opacity:.75}

.footer{
  padding:28px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.footer .cols{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:16px;
}
@media (max-width: 920px){ .footer .cols{grid-template-columns:1fr} }
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--text)}
small.legal{display:block; margin-top:14px; color:rgba(169,183,208,.8)}

.notice{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color:var(--muted);
  font-size:13px;
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.table th{color:var(--muted); font-size:12px; letter-spacing:.2px; text-transform:uppercase}
.table tr:last-child td{border-bottom:0}
.price{
  font-size:22px; font-weight:800;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(61,220,151,.25);
  background: rgba(61,220,151,.08);
  color: var(--text);
  font-size:12px;
}

.mobile-menu{
  display:none;
  padding:0 0 14px;
}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--muted); border:1px solid transparent}
.mobile-menu a:hover{color:var(--text); background:rgba(255,255,255,.04); border-color:var(--line)}

/* Service lists */
.card.service ul{margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.55}
.card.service li{margin:6px 0}

/* =========================================================
   TYPOGRAPHY + UI REWORK (v3)
   Cel: czytelność i spójna hierarchia — bez "doklejonych" powiększeń
   ========================================================= */

:root{
  /* typografia */
  --bf-text: clamp(16px, 0.35vw + 15px, 18px);
  --bf-small: clamp(14px, 0.25vw + 13px, 16px);
  --bf-h1: clamp(36px, 2.1vw + 22px, 56px);
  --bf-h2: clamp(26px, 1.2vw + 18px, 38px);
  --bf-h3: clamp(19px, 0.7vw + 16px, 26px);

  /* kontrolki */
  --bf-control-h: 46px;
  --bf-control-pad: 12px 14px;
  --bf-border: rgba(43,123,255,.42);
  --bf-border-strong: rgba(43,123,255,.60);
  --bf-control-bg: rgba(255,255,255,.04);
}

/* baza */
html{ font-size: var(--bf-text); }
body{
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .15px;
}

/* nagłówki */
h1{ font-size: var(--bf-h1); line-height: 1.08; }
h2{ font-size: var(--bf-h2); line-height: 1.15; }
h3{ font-size: var(--bf-h3); line-height: 1.2; }

/* opisy/pomocnicze */
.section p.sub{ font-size: 1rem; opacity: .9; }
small, .legal, .muted, .help{ font-size: var(--bf-small); }

/* brand w headerze */
.brand strong{ font-size: 1rem; }
.brand span{ font-size: var(--bf-small); margin-top: 2px; }

/* menu / nawigacja */
nav a{ font-size: 1rem; font-weight: 650; }
nav ul, nav .menu ul{
  display:flex;
  gap:16px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width: 920px){
  nav ul, nav .menu ul{ display:none; }
}

/* przyciski */
.btn{ font-size: .98rem; padding: 12px 16px; }
.btn.small{ font-size: .95rem; padding: 10px 12px; }

/* karty i sekcje - minimalnie więcej oddechu dla większego tekstu */
.section{ padding: 44px 0; }
.card{ padding: 18px; }
.cards{ gap:16px; }
.kpi span{ font-size: var(--bf-small); }
.table th{ font-size: .78rem; } /* zostawiamy uppercase, ale większe niż 12px w praktyce */

/* FORMULARZE / KALKULATOR – czytelne etykiety i kontrolki */
label{
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  opacity: .88;
}
input, select{
  font-size: 1rem;
  min-height: var(--bf-control-h);
  padding: var(--bf-control-pad);
  border: 1px solid rgba(255,255,255,.14);
  background: var(--bf-control-bg);
}
input:focus, select:focus{
  border-color: var(--bf-border-strong);
  box-shadow: 0 0 0 4px rgba(43,123,255,.14);
}

/* selecty w ciemnym UI: opcje jasne */
select option{
  background: #ffffff;
  color: #111;
}

/* kalkulator: wynik + meta */
.result .muted{ font-size: var(--bf-small); }
.price{ font-size: clamp(28px, 1.4vw + 20px, 38px); font-weight: 850; }
.meta{ font-size: var(--bf-small); opacity:.92; }

/* mobile menu: czytelniej */
.mobile-menu a{ font-size: 1rem; padding: 12px 0; }

/* =========================================================
   SERVICES CARDS + CALCULATOR TOGGLES (v4)
   Cel: czytelny układ tytuł → lead → bullet'y, spójne checkboxy
   ========================================================= */
.cards.services {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 980px) {
  .cards.services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cards.services { grid-template-columns: 1fr; }
}

.service-card h3 {
  margin: 0 0 8px;
  font-size: 1.12rem;
  letter-spacing: -.2px;
}
.service-card p.lead {
  margin: 0 0 10px;
  font-size: 1rem;
  opacity: .9;
}
.service-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}
.service-card li {
  line-height: 1.45;
}

/* --- CALCULATOR TOGGLES (v4) --- */
#calc .calc-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) {
  #calc .calc-grid { grid-template-columns: 1fr; }
}
#calc .field {
  display:flex;
  flex-direction:column;
  gap: 8px;
}
#calc .field .help {
  margin-top: -2px;
  opacity: .9;
}

#calc input[type="number"],
#calc input[type="text"],
#calc select {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  min-height: var(--bf-control-h, 46px);
  padding: var(--bf-control-pad, 12px 14px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#calc select option {
  background:#fff;
  color:#111;
}

#calc .toggles {
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
}
#calc .toggle {
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: .98rem;
  line-height: 1;
}
#calc .toggle input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#calc .toggle .box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(43,123,255,.55);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  flex: 0 0 18px;
}
#calc .toggle .box::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(43,123,255,.95);
  transform: scale(0);
  transition: transform .15s ease;
}
#calc .toggle input:checked + .box::after {
  transform: scale(1);
}
#calc .toggle:hover {
  border-color: rgba(43,123,255,.35);
}

#calc .result {
  margin-top: 14px;
}

/* =========================================================
   HEADER + LIST BLOCKS REWORK (v5)
   Naprawy: menu nie może się "rozjeżdżać", listy (klocki) czytelne,
   kontakt bez drobnej czcionki, spójne przyciski.
   ========================================================= */

/* --- HEADER / MENU --- */
header .nav{ flex-wrap: nowrap; gap: 12px; }
header nav ul{ gap: 12px; }
header nav a{
  font-size: .96rem;
  font-weight: 650;
  padding: 10px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
header .actions{ gap: 10px; }
header .actions .btn.small{ font-size: .93rem; padding: 10px 12px; }
header .actions .btn.primary.small{ font-size: .93rem; padding: 10px 12px; }

/* jeśli robi się ciasno, chowamy nav wcześniej i zostawiamy hamburger */
@media (max-width: 1080px){
  header nav{ display:none; }
  header .actions .hamb{ display:inline-flex; }
}

/* --- LIST BLOCKS (klocki) --- */
.list{ display:grid; gap: 10px; margin-top: 12px; }
.list .li{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.list .li b{
  flex: 0 0 130px;
  font-size: 1rem;
  font-weight: 850;
  color: var(--text);
  letter-spacing: -.1px;
}
.list .li span{
  flex: 1 1 auto;
  font-size: .98rem;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 520px){
  .list .li{ flex-direction: column; gap: 6px; }
  .list .li b{ flex: 0 0 auto; }
}

/* --- NOTICE blocks (np. Kontakt) --- */
.notice{
  font-size: 1rem;
  line-height: 1.55;
}
.notice b{ font-weight: 850; }

/* --- CTA buttons row wrapping nicely --- */
.cta{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }

/* --- Kalkulator: tekst nie ma wypadać z pól --- */
#calc select, #calc input[type="number"]{
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   POLISH ROUND (v6)
   - Start/Usługi: większe tytuły kafelków (JDG / spółki)
   - Kontakt: lepsza czytelność bloków
   - Oferta: spójna typografia i kontrast
   - Mobilne menu/header: brak ucięć
   - Kalkulator: selecty nie ucinają tekstu
   ========================================================= */

/* globalny kontrast dla tekstów "muted" – było za słabo */
:root {
  --muted: rgba(230, 237, 247, .78);
}

/* START: kafelki usług – większy tytuł i lepszy rytm */
.service-card h3 {
  font-size: 1.22rem;
  margin-bottom: 10px;
}
.service-card p.lead {
  font-size: 1.02rem;
  line-height: 1.55;
}

/* KONTAKT: bloki – nie może być drobna czcionka */
.page-kontakt .notice,
.page-kontakt .sub,
.page-kontakt p {
  font-size: 1rem !important;
  opacity: .92;
}

/* OFERTA: spójna typografia i widoczność */
.page-oferta .badge {
  text-transform: none;
  letter-spacing: .2px;
  font-size: .92rem;
  opacity: .95;
}
.page-oferta .sub {
  font-size: 1rem !important;
  opacity: .9;
}
.page-oferta .card {
  color: var(--text);
}

/* HEADER: na małych ekranach pozwalamy na wrap, żeby nic nie uciekało */
@media (max-width: 520px) {
  header .nav{ flex-wrap: wrap; row-gap: 10px; }
  header .brand{ flex: 1 1 100%; }
  header .actions{ width: 100%; justify-content: flex-end; }
  header .actions .btn.small{ display:none; } /* zostawiamy primary + hamburger */
}

/* MOBILE MENU: zawsze mieści się w ekranie */
.mobile-menu {
  left: 12px;
  right: 12px;
  width: auto;
  max-width: calc(100vw - 24px);
}

/* KALKULATOR: selecty/inputy – nie ucinamy tekstu (szczególnie na desktop) */
#calc select,
#calc input[type="number"],
#calc input[type="text"] {
  height: 48px;
  line-height: 1.2;
  padding: 12px 44px 12px 14px; /* miejsce na strzałkę selecta */
}
#calc input[type="number"]{ padding-right: 14px; }
#calc select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* =========================================================
   LINKS + CONTRAST FIXES (v7)
   - mobile: hero tytuł zawsze jasny
   - sekcja usług: czytelność opisu
   - większe tytuły usług (JDG / sp. z o.o.)
   - selecty: brak obcinania tekstu (wysokość/line-height/appearance)
   ========================================================= */

:root {
  --muted: rgba(230, 237, 247, .84);
}

/* Hero: wymuszamy jasny tekst */
.hero, .hero * {
  color: var(--text);
}
.hero .lead {
  color: var(--muted);
}

/* Sekcja usług: opis pod H2 ma być czytelny */
#uslugi {
  background: rgba(0,0,0,.10);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#uslugi .sub {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Tytuły usług: większe i wyraźniejsze */
.service-card h3 {
  font-size: 1.32rem !important;
  font-weight: 900;
  letter-spacing: -.25px;
}

/* Selecty: stabilne i bez obcinania (desktop) */
#calc select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(230,237,247,.85) 50%),
    linear-gradient(135deg, rgba(230,237,247,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px !important;
  height: 52px !important;
  line-height: 1.35 !important;
}
#calc input[type="number"], #calc input[type="text"] {
  height: 52px !important;
  line-height: 1.35 !important;
}

/* =========================================================
   MOBILE CONTRAST + BUTTON SYSTEM (v8)
   Cel: zero ciemnych fontów na mobile + lepsze kafelki i przyciski
   ========================================================= */

/* 1) ZERO ciemnych fontów na mobile */
@media (max-width: 820px) {
  body,
  body :is(h1,h2,h3,h4,h5,h6,p,span,li,div,section,article,header,footer,nav,label,button,input,select,textarea,strong,b,small,a) {
    color: var(--text) !important;
  }
  body :is(.muted,.sub,.lead,.help,.meta) {
    color: var(--muted) !important;
  }
  body a:not(.btn) {
    color: rgba(89,140,255,.95) !important;
  }
}

/* 2) KAFELKI USŁUG – tytuły w 2 częściach */
.service-title {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  margin:0 0 10px !important;
  line-height:1.15;
}
.service-title .st-code {
  font-size: 1.38rem;
  font-weight: 950;
  letter-spacing: -.35px;
  color: var(--text);
}
.service-title .st-label {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--muted);
  letter-spacing: -.1px;
}
@media (max-width: 520px) {
  .service-title .st-code { font-size: 1.28rem; }
  .service-title .st-label { font-size: 1.02rem; }
}

/* 3) SYSTEM PRZYCISKÓW – spójny wygląd wszędzie */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 750;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn.primary {
  background: rgba(43,123,255,.95);
  color: #081021 !important;
  border: 1px solid rgba(43,123,255,.65);
  box-shadow: 0 10px 28px rgba(43,123,255,.18);
}
.btn.primary:hover {
  filter: brightness(1.04);
}
.btn:not(.primary) {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text) !important;
}
.btn:not(.primary):hover {
  border-color: rgba(43,123,255,.35);
  background: rgba(255,255,255,.05);
}

/* CTA rows – ładne zawijanie */
.cta {
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-top: 12px;
}
@media (max-width: 520px) {
  .cta .btn {
    width: 100%;
  }
}

/* 4) Kalkulator: selecty – dodatkowe poprawki wysokości i renderowania */
#calc select {
  height: 54px !important;
  line-height: 1.4 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
#calc input[type="number"], #calc input[type="text"] {
  height: 54px !important;
  line-height: 1.4 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* =========================================================
   H3 HOTFIX + USLUGI CONTRAST (v10)
   - H3 w Zakresie usług: większe + mocniejsze (działa też dla Gutenberga)
   - Kontrast tekstów opisowych pod Zakres usług
   ========================================================= */

#uslugi h3,
#uslugi h3.wp-block-heading,
#uslugi .wp-block-heading {
  font-size: clamp(20px, 0.9vw + 16px, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -.25px;
  line-height: 1.15 !important;
  margin: 18px 0 10px !important;
  color: var(--text) !important;
}

#uslugi p,
#uslugi li,
#uslugi .sub {
  color: rgba(230,237,247,.88) !important;
  opacity: 1 !important;
}

@media (max-width: 820px) {
  .hero, .hero * {
    color: var(--text) !important;
  }
  #uslugi, #uslugi * {
    color: var(--text) !important;
  }
  #uslugi :is(.sub,.lead,.muted,.help,.meta) {
    color: rgba(230,237,247,.88) !important;
  }
}

/* =========================================================
   OFERTA PRO (v12)
   Spójny rytm nagłówków i tekstu na stronie Oferta
   ========================================================= */
.page-oferta h2 { font-weight: 900; letter-spacing: -.25px; }
.page-oferta .sub { color: rgba(230,237,247,.86); opacity: 1; }
.page-oferta ul li b { font-weight: 850; color: var(--text); }

/* =========================================================
   LOGO IMAGE (v13)
   Nowe logo (obraz) w nagłówku
   ========================================================= */
.brand{ gap: 14px; }
.brand-mark{ display:block; line-height:0; }
.brand-logo{
  height: 38px;
  width: auto;
  max-width: 240px;
  display:block;
  object-fit: contain;
}
@media (max-width: 520px){
  .brand-logo{ height: 32px; max-width: 200px; }
}
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================================================
   STABLE SERVICE TITLE (v19)
   ========================================================= */
.service-title{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;line-height:1.15;margin:0 0 10px;}
.service-title .st-code{font-size:1.38rem;font-weight:950;letter-spacing:-.35px;color:var(--text);}
.service-title .st-label{font-size:1.05rem;font-weight:750;color:var(--muted);letter-spacing:-.1px;}
.bf-calc .calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.bf-calc .field{display:flex;flex-direction:column;gap:8px}
.bf-calc .field-inline{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bf-calc .check{display:flex;align-items:center;gap:10px}
.bf-calc .check input{width:18px;height:18px}
@media(max-width:700px){.bf-calc .calc-grid{grid-template-columns:1fr}}

/* =========================================================
   CONTRAST SYSTEM (v20)
   Cel: zero sytuacji „zlewa się z tłem”:
   - usuwamy białe tła wrapperów WP/Blocksy, żeby zawsze było widać ciemne tło strony
   - jeśli gdziekolwiek pojawi się blok z białym tłem (klasy WP), przełączamy tekst na ciemny
   ========================================================= */

/* 1) WP/Blocksy potrafi wstrzyknąć białe tła na wrapperach — wyłączamy je */
#page,
.site,
.site-content,
#content,
#primary,
#main,
.content-area,
.entry-content,
.wp-site-blocks,
.ct-container,
.ct-container-full,
.ct-content,
.ct-content-area,
.ct-panel,
.ct-inner-content{
  background: transparent !important;
}

/* 2) Poprawa czytelności „jasnych” tekstów (muted) */
:root{
  --muted: #d2deef;
}
.sub, .muted, .meta, .help{
  color: rgba(210, 222, 239, .90);
  opacity: 1;
}

/* 3) Gdy WordPress doda białe/jasne tło do bloku — przełączamy tekst na ciemny */
.has-white-background-color,
.has-very-light-gray-background-color,
.has-light-gray-background-color{
  background: #f5f7fb !important;
  color: #0b1220 !important;
}
.has-white-background-color h1, .has-white-background-color h2, .has-white-background-color h3,
.has-white-background-color h4, .has-white-background-color h5, .has-white-background-color h6,
.has-white-background-color p, .has-white-background-color li, .has-white-background-color span,
.has-white-background-color small, .has-white-background-color strong, .has-white-background-color b,
.has-white-background-color label, .has-white-background-color a{
  color: #0b1220 !important;
}
.has-very-light-gray-background-color h1, .has-very-light-gray-background-color h2, .has-very-light-gray-background-color h3,
.has-very-light-gray-background-color h4, .has-very-light-gray-background-color h5, .has-very-light-gray-background-color h6,
.has-very-light-gray-background-color p, .has-very-light-gray-background-color li, .has-very-light-gray-background-color span,
.has-very-light-gray-background-color small, .has-very-light-gray-background-color strong, .has-very-light-gray-background-color b,
.has-very-light-gray-background-color label, .has-very-light-gray-background-color a{
  color: #0b1220 !important;
}
.has-light-gray-background-color h1, .has-light-gray-background-color h2, .has-light-gray-background-color h3,
.has-light-gray-background-color h4, .has-light-gray-background-color h5, .has-light-gray-background-color h6,
.has-light-gray-background-color p, .has-light-gray-background-color li, .has-light-gray-background-color span,
.has-light-gray-background-color small, .has-light-gray-background-color strong, .has-light-gray-background-color b,
.has-light-gray-background-color label, .has-light-gray-background-color a{
  color: #0b1220 !important;
}
.has-white-background-color a, .has-very-light-gray-background-color a, .has-light-gray-background-color a{
  color: #1e4fd7 !important;
}

/* 4) Linki na ciemnym tle — czytelne i spójne */
a{ color: rgba(89,140,255,.95); }
a:hover{ color: rgba(89,140,255,1); }

/* 5) Drobny boost kontrastu tytułów poza kartami (gdyby theme je przygaszał) */
h1,h2,h3{ color: var(--text); }

/* =========================================================
   CALC LAYOUT + INPUT VISIBILITY (v21)
   Naprawa: checkboxy w jednej linii + widoczne selecty/inputs w kalkulatorze
   ========================================================= */

/* Kalkulator: widoczne pola na ciemnym tle */
#calc.bf-calc select,
#calc.bf-calc input[type="number"],
#calc.bf-calc input[type="text"] {
  background-color: rgba(11,18,32,.96) !important;
  color: var(--text) !important;
  border: 1px solid rgba(89,140,255,.55) !important;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  min-height: 52px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

#calc.bf-calc select:focus,
#calc.bf-calc input:focus {
  outline: none !important;
  border-color: rgba(89,140,255,.85) !important;
  box-shadow: 0 0 0 4px rgba(89,140,255,.18) !important;
}

/* Checkboxy: równe i w jednej linii (z zawijaniem na mobile) */
#calc.bf-calc .field-inline {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
#calc.bf-calc .field-inline .check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.02) !important;
}
#calc.bf-calc .field-inline .check input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  accent-color: rgba(89,140,255,.95);
}
#calc.bf-calc .field-inline .check span {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}

/* Wynik: bez „kafelków” w środku – czytelnie */
#calc.bf-calc .calc-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* =========================================================
   SAFE DARK WRAPPERS (v21)
   Jeśli gdziekolwiek przewija się jasne tło strony – stabilizujemy tło na ciemne.
   Zmieniamy tylko background-color (bez ingerencji w układ).
   ========================================================= */
html, body {
  background-color: var(--bg) !important;
}
#page, .site, .site-content, #content, #primary, #main, .content-area, .entry-content, .wp-site-blocks {
  background-color: var(--bg) !important;
}

/* Gdy WP ustawi inline białe tło, przechwyć i zamień na jasny panel + ciemny tekst */
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:rgb(255,255,255)"],
[style*="background-color: rgb(255,255,255)"] {
  background-color: #f5f7fb !important;
  color: #0b1220 !important;
}
[style*="background-color:#fff"] :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,b,label,a),
[style*="background-color:#ffffff"] :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,b,label,a),
[style*="background-color:rgb(255,255,255)"] :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,b,label,a) {
  color: #0b1220 !important;
}

/* =========================================================
   V22 CONTRAST + CALC PRICE FIX
   - Cena w kalkulatorze zawsze widoczna
   - Wszystkie jasne tła (WP blocks / inline) zamieniamy na ciemny panel, żeby nie było „jasne na jasnym”
   ========================================================= */

/* Kalkulator: cena zawsze na wierzchu */
#calc.bf-calc .price {
  display: block !important;
  color: var(--text) !important;
}

/* Jeśli WP doda jasne tła — zamiast przełączać tekst na ciemny, robimy spójny ciemny panel */
.has-white-background-color,
.has-very-light-gray-background-color,
.has-light-gray-background-color {
  background: rgba(15,31,59,.92) !important;
  color: var(--text) !important;
}
.has-white-background-color * ,
.has-very-light-gray-background-color * ,
.has-light-gray-background-color * {
  color: var(--text) !important;
}

[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:rgb(255,255,255)"],
[style*="background-color: rgb(255,255,255)"] {
  background-color: rgba(15,31,59,.92) !important;
  color: var(--text) !important;
}
[style*="background-color:#fff"] * ,
[style*="background-color:#ffffff"] * ,
[style*="background-color:rgb(255,255,255)"] * {
  color: var(--text) !important;
}

/* =========================================================
   V23 CALC CLIP + MOBILE CONTRAST
   - Usuwa ewentualne „ucięcie” HTML bloku (overflow)
   - Wymusza widoczność ceny i tekstów w kalkulatorze
   - Mobile: żadnych ciemnych tekstów na ciemnym tle
   ========================================================= */

/* HTML block bywa ograniczany przez motyw — nie pozwalamy ucinać kalkulatora */
.wp-block-html, .wp-block-html * {
  overflow: visible !important;
  max-height: none !important;
}

/* Kalkulator: nigdy nie chowaj wyniku */
#calc.bf-calc {
  overflow: visible !important;
}
#calc.bf-calc .price {
  font-size: clamp(26px, 1.4vw + 20px, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin-top: 6px !important;
  color: var(--text) !important;
}
#calc.bf-calc .help,
#calc.bf-calc .meta {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(210,222,239,.92) !important;
  opacity: 1 !important;
  line-height: 1.45 !important;
}

/* Mobile: dopnij kontrast tekstów wszędzie */
@media (max-width: 800px) {
  body, p, li, span, label {
    color: var(--text) !important;
  }
  .sub, .muted, .meta, .help {
    color: rgba(210,222,239,.92) !important;
  }
}

/* =========================================================
   CALC OVERFLOW SAFE (v24)
   Zapobiega ucinaniu wyniku/tekstu w HTML-block / theme wrapperach
   ========================================================= */
.wp-block-html, .entry-content .wp-block-html {
  overflow: visible !important;
  max-height: none !important;
}
#calc.bf-calc, #calc.bf-calc * {
  overflow: visible;
}
#calc.bf-calc .price {
  font-size: clamp(26px, 1.2vw + 18px, 36px) !important;
  font-weight: 950 !important;
  letter-spacing: -.25px;
}
#calc.bf-calc .meta {
  font-size: .95rem !important;
  color: rgba(210,222,239,.92) !important;
}

/* =========================================================
   INDYWIDUALNA WYCENA (v25)
   Cena może być tekstem – dopasuj typografię, żeby nie łamało layoutu.
   ========================================================= */
#calc.bf-calc .price{
  word-break: break-word;
  hyphens: auto;
}

/* =========================================================
   CONTACT LOGO + FORM (v26)
   ========================================================= */
.contact-brand{display:flex;align-items:center;gap:12px;margin:0 0 6px;}
.contact-logo{height:44px;width:auto;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));}
@media (max-width:520px){.contact-logo{height:40px}}

.bf-form textarea{
  background-color: rgba(11,18,32,.96) !important;
  color: var(--text) !important;
  border: 1px solid rgba(89,140,255,.45) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  min-height: 120px !important;
}
.bf-alert{
  padding:12px 14px;
  border-radius:12px;
  margin:0 0 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.bf-alert.success{border-color:rgba(77,199,133,.35)}
.bf-alert.error{border-color:rgba(255,92,92,.35)}

/* =========================================================
   KONTAKT LAYOUT (v27)
   Cel: Kontakt nie wygląda „biednie mało” na desktopie + przyciski Telefon/E-mail nie rozjeżdżają się.
   ========================================================= */

.page-kontakt .contact-wide {
  max-width: 1180px;
}

/* Na desktopie dajemy więcej miejsca formularzowi */
.page-kontakt .grid-2 {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}

/* Przyciski kontaktowe: jeden pod drugim, pełna szerokość */
.page-kontakt .contact-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.page-kontakt .contact-cta .btn {
  width: 100%;
  justify-content: center;
}

/* Długie adresy e-mail nie psują układu */
.page-kontakt a[href^="mailto:"] {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile: zostaje jedna kolumna */
@media (max-width: 900px) {
  .page-kontakt .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   KONTAKT STACK (v28)
   Kafelki Kontakt jeden pod drugim (desktop + mobile) i szeroko na ekranach komputerowych.
   ========================================================= */

.page-kontakt .contact-wide{
  max-width: 1180px;
}

.page-kontakt .contact-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.page-kontakt .contact-stack .contact-card{
  width: 100%;
}

/* Formularz: niech oddycha i nie wygląda „wąsko” */
.page-kontakt .bf-form{
  width: 100%;
}

/* CTA przy kontaktowych przyciskach zostaje w kolumnie */
.page-kontakt .contact-cta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.page-kontakt .contact-cta .btn{ width: 100%; justify-content:center; }

/* =========================================================
   FORM CHECKBOX ALIGN (v29)
   Cel: checkboxy (VAT/Kadry/E-commerce + zgoda) równe, po lewej, tekst obok na tej samej linii.
   ========================================================= */

/* Formularz: zawsze wyrównanie do lewej */
.bf-form, .bf-form * {
  text-align: left;
}

/* Wiersz checkboxów w formularzu */
.bf-form .field-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Każdy checkbox + opis */
.bf-form label.check {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.02) !important;
}

.bf-form label.check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  accent-color: rgba(89,140,255,.95);
}

.bf-form label.check span {
  display: inline !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
}

/* Zgoda: pełna szerokość, checkbox po lewej, tekst obok (może się zawijać) */
.bf-form .field[style*="grid-column:1/-1"] label.check {
  width: 100% !important;
  align-items: flex-start !important;
}
.bf-form .field[style*="grid-column:1/-1"] label.check input[type="checkbox"] {
  margin-top: 2px !important;
}
.bf-form .field[style*="grid-column:1/-1"] label.check span {
  white-space: normal !important;
}

/* =========================================================
   CALC CHECKBOX LEFT (v29)
   ========================================================= */
#calc.bf-calc .field-inline {
  justify-content: flex-start !important;
}
#calc.bf-calc .check {
  justify-content: flex-start !important;
}

/* =========================================================
   SELECT TEXT CENTER (v30)
   Naprawa: ucina tekst w selectach (Forma działalności / Branża) – ustawiamy stałą wysokość i line-height.
   ========================================================= */
#calc.bf-calc select,
.bf-form select {
  height: 52px !important;
  line-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* =========================================================
   FORM FIELD COLORS (v31)
   Formularz: rubryki mają być czytelne (ciemne tło, jasny tekst, wyraźna ramka)
   ========================================================= */
.bf-form input[type="text"],
.bf-form input[type="email"],
.bf-form input[type="tel"],
.bf-form input[type="number"],
.bf-form select,
.bf-form textarea {
  background-color: rgba(11,18,32,.96) !important;
  color: #e6edf7 !important;
  border: 1px solid rgba(89,140,255,.55) !important;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  min-height: 52px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.bf-form textarea{ min-height: 120px !important; line-height: 1.5 !important; padding-top: 12px !important; }

.bf-form input::placeholder,
.bf-form textarea::placeholder {
  color: rgba(230,237,247,.55) !important;
  opacity: 1 !important;
}

.bf-form select option {
  background: rgba(11,18,32,.98) !important;
  color: #e6edf7 !important;
}

/* =========================================================
   CALC EMP FIELD (v31)
   ========================================================= */
#calc.bf-calc .bf-emp-field {
  grid-column: 1 / -1;
}

/* =========================================================
   MOBILE SPACING + TYPO (v31)
   Mobile: więcej oddechu, większa czcionka, czytelniejsze sekcje
   ========================================================= */
@media (max-width: 820px) {
  body { line-height: 1.7; }
  .section { padding: 26px 0 !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .card { padding: 18px !important; }
  h1 { font-size: clamp(30px, 6.2vw, 40px) !important; }
  h2 { font-size: clamp(22px, 5.0vw, 28px) !important; }
  h3 { font-size: clamp(18px, 4.4vw, 22px) !important; }
  p, li, label, input, select, textarea { font-size: 1.02rem !important; }
  .sub, .meta, .help { font-size: .98rem !important; }
  .cta { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .btn { width: 100% !important; justify-content: center !important; padding: 14px 16px !important; }
  #calc.bf-calc .calc-grid, .bf-form .grid { gap: 14px !important; }
  #calc.bf-calc .field-inline, .bf-form .field-inline { gap: 10px !important; }
}

/* =========================================================
   SELECT FIX (v32)
   Selecty w formularzu i kalkulatorze: bez ucinania tekstu, poprawne wyrównanie pionowe.
   ========================================================= */
#calc.bf-calc select,
.bf-form select {
  height: 52px !important;
  min-height: 52px !important;
  line-height: 1.2 !important;
  padding: 0 12px !important;
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
}

/* =========================================================
   CONSENT CHECKBOX ALIGN (v32)
   Zgoda: checkbox po lewej, wyrównanie do góry, poprawna wysokość.
   ========================================================= */
.bf-form input[name="zgoda"] {
  width: 18px !important;
  height: 18px !important;
  margin: 2px 0 0 0 !important;
  flex: 0 0 18px !important;
  align-self: flex-start !important;
}
.bf-form input[name="zgoda"] + span {
  line-height: 1.35 !important;
}

/* =========================================================
   MOBILE READABILITY (v32)
   Mobile: większa czcionka i więcej separacji, kafelki usług 1 pod drugim.
   ========================================================= */
@media (max-width: 820px) {
  html { font-size: 18px !important; }

  .cards.services { grid-template-columns: 1fr !important; }
  .cards { grid-template-columns: 1fr !important; }

  .section { padding: 30px 0 !important; }
  .card { padding: 18px !important; }
  .service-card { padding: 18px !important; }

  p, li, label { font-size: 1.08rem !important; }
  input, select, textarea { font-size: 1.08rem !important; }
  .sub, .meta, .help { font-size: 1.02rem !important; }

  .lead { font-size: 1.08rem !important; }

  /* większe przerwy między blokami */
  .stack > * + * { margin-top: 14px !important; }
  #calc.bf-calc .calc-grid, .bf-form .grid { gap: 16px !important; }
  #calc.bf-calc .field-inline, .bf-form .field-inline { gap: 12px !important; }
}