@import url('fonts.css');

/* =====================================================================
   BIURO KOSZTORYSOWE BYWALEC — arkusz stylów
   Kolor wiodący #003366 pobrany bezpośrednio z logo.
   ===================================================================== */

:root{
  /* Granat marki */
  --granat:        #003366;
  --granat-ciemny: #002247;
  --granat-noc:    #001629;
  --granat-jasny:  #0a4a8a;
  --granat-mgla:   #eef2f7;
  --granat-linia:  #d3dde8;

  /* Akcent — bursztyn. Kolor oznakowania robót drogowych,
     stonowany, używany oszczędnie. */
  --akcent:        #b56a00;
  --akcent-jasny:  #e8a317;
  --akcent-mgla:   #fdf6e8;

  /* Neutralne */
  --atrament:      #14181d;
  --tekst:         #333c47;
  --tekst-slaby:   #5f6b7a;
  --linia:         #e2e7ee;
  --linia-slaba:   #eef1f5;
  --tlo:           #ffffff;
  --tlo-alt:       #f7f9fb;

  /* Stan */
  --blad:          #b3261e;
  --blad-tlo:      #fdf0ef;
  --sukces:        #1d6b3f;
  --sukces-tlo:    #eef7f1;

  --cien-s: 0 1px 2px rgba(16,24,40,.05);
  --cien-m: 0 4px 16px rgba(16,24,40,.07);
  --cien-l: 0 18px 44px rgba(0,34,71,.13);

  --promien:   4px;
  --promien-l: 8px;

  --szer: 1180px;
  --szer-tekst: 68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--tekst);
  background:var(--tlo);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--granat);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--granat-jasny)}
h1,h2,h3,h4,h5{
  font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  font-weight:600;
  color:var(--atrament);
  letter-spacing:-.018em;
  line-height:1.18;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);font-weight:700;letter-spacing:-.028em}
h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);font-weight:700;letter-spacing:-.024em}
h3{font-size:1.2rem}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.45em}
strong{font-weight:600;color:var(--atrament)}
hr{border:0;border-top:1px solid var(--linia);margin:2.5rem 0}
::selection{background:var(--granat);color:#fff}

:focus-visible{
  outline:2px solid var(--akcent-jasny);
  outline-offset:2px;
  border-radius:2px;
}

/* Pomijanie nawigacji — dla czytników ekranu i klawiatury */
.pomin{
  position:absolute;left:-9999px;top:0;
  background:var(--granat);color:#fff;padding:12px 20px;z-index:200;
  font-weight:600;
}
.pomin:focus{left:0}

/* ---------------------------------------------------------------- Układ */
.kontener{width:100%;max-width:var(--szer);margin-inline:auto;padding-inline:24px}
.kontener-waski{max-width:820px}
.sekcja{padding-block:clamp(56px,7vw,104px)}
.sekcja-alt{background:var(--tlo-alt);border-block:1px solid var(--linia-slaba)}
.sekcja-granat{background:var(--granat-ciemny);color:#c9d6e5}
.sekcja-granat h2,.sekcja-granat h3,.sekcja-granat h4{color:#fff}
.sekcja-zwarta{padding-block:clamp(40px,4.5vw,64px)}

.proza{max-width:var(--szer-tekst)}
.proza h2{margin-top:2.2em}
.proza h2:first-child{margin-top:0}
.proza h3{margin-top:1.8em}

/* --------------------------------------------------------- Typografia */
.nadtytul{
  display:flex;align-items:center;gap:12px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.75rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--akcent);
  margin:0 0 18px;
}
.nadtytul::before{content:"";width:26px;height:2px;background:var(--akcent);flex:none}
.sekcja-granat .nadtytul{color:var(--akcent-jasny)}
.sekcja-granat .nadtytul::before{background:var(--akcent-jasny)}

.lead{
  font-size:1.12rem;
  line-height:1.62;
  color:var(--tekst-slaby);
  max-width:62ch;
}
.sekcja-granat .lead{color:#a8bcd2}

.naglowek-sekcji{max-width:64ch;margin-bottom:clamp(36px,4vw,56px)}

/* -------------------------------------------------------------- Przyciski */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.95rem;font-weight:600;line-height:1;
  padding:15px 28px;
  border-radius:var(--promien);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn-glowny{background:var(--granat);color:#fff;border-color:var(--granat)}
.btn-glowny:hover{background:var(--granat-jasny);border-color:var(--granat-jasny);color:#fff}

.btn-akcent{background:var(--akcent);color:#fff;border-color:var(--akcent)}
.btn-akcent:hover{background:#9c5c00;border-color:#9c5c00;color:#fff}

.btn-obrys{background:transparent;color:var(--granat);border-color:var(--granat-linia)}
.btn-obrys:hover{border-color:var(--granat);background:var(--granat-mgla);color:var(--granat)}

.btn-jasny{background:#fff;color:var(--granat);border-color:#fff}
.btn-jasny:hover{background:var(--granat-mgla);color:var(--granat-ciemny)}

.btn-duch{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-duch:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}

.strzalka{transition:transform .16s ease}
.btn:hover .strzalka{transform:translateX(3px)}

/* Odnośnik ze strzałką */
.link-dalej{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--granat);text-decoration:none;
}
.link-dalej::after{content:"→";transition:transform .16s ease}
.link-dalej:hover::after{transform:translateX(4px)}

/* ------------------------------------------------------------ Nagłówek */
.pasek-info{
  background:var(--granat-noc);
  color:#8ea6c0;
  font-size:.83rem;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.pasek-info .kontener{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pasek-info-lista{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.pasek-info-el{display:inline-flex;align-items:center;gap:8px}
.pasek-info-el svg{width:14px;height:14px;flex:none;opacity:.75}

.naglowek{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linia);
}
.naglowek.przypiety{box-shadow:var(--cien-m)}
.naglowek .kontener{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}

.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.logo img{height:32px;width:auto}
.logo-podpis{
  display:block;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.7rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--tekst-slaby);
  border-left:1px solid var(--linia);
  padding-left:14px;
  line-height:1.35;
  max-width:118px;
}

.nawigacja{display:flex;align-items:center;gap:4px;margin-left:auto}
.nawigacja a{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.94rem;font-weight:500;
  color:var(--tekst);
  text-decoration:none;
  padding:10px 15px;
  border-radius:var(--promien);
  position:relative;
  transition:color .15s,background-color .15s;
}
.nawigacja a:hover{color:var(--granat);background:var(--granat-mgla)}
.nawigacja a[aria-current="page"]{color:var(--granat);font-weight:600}
.nawigacja a[aria-current="page"]::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;
  background:var(--akcent);border-radius:2px;
}
.naglowek-akcje{display:flex;align-items:center;gap:14px;flex:none}

/* Przycisk menu mobilnego */
.menu-przycisk{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--linia);
  border-radius:var(--promien);cursor:pointer;
  color:var(--granat);
}
.menu-przycisk span{
  display:block;width:19px;height:2px;background:currentColor;border-radius:2px;
  position:relative;transition:background-color .2s;
}
.menu-przycisk span::before,.menu-przycisk span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s ease;
}
.menu-przycisk span::before{top:-6px}
.menu-przycisk span::after{top:6px}
.menu-przycisk[aria-expanded="true"] span{background:transparent}
.menu-przycisk[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-przycisk[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------- Sekcja tytułowa */
.hero{
  position:relative;
  background:var(--granat-ciemny);
  color:#fff;
  overflow:hidden;
  padding-block:clamp(64px,8vw,116px);
}
/* Delikatna siatka — nawiązanie do papieru milimetrowego */
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 0%,#000,transparent 72%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;right:-8%;top:-30%;
  width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(10,74,138,.45),transparent 68%);
  pointer-events:none;
}
.hero .kontener{position:relative;z-index:2}
.hero h1{color:#fff;max-width:19ch}
.hero .lead{color:#b3c6db;font-size:1.18rem;margin-top:22px;max-width:56ch}
.hero-akcje{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-siatka{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}

/* Karta z podsumowaniem w hero */
.hero-karta{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--promien-l);
  padding:30px;
  backdrop-filter:blur(4px);
}
.hero-karta h2{font-size:1.02rem;color:#fff;margin-bottom:20px;letter-spacing:0}
.hero-karta dl{margin:0;display:grid;gap:0}
.hero-karta div{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);
}
.hero-karta div:last-child{border-bottom:0;padding-bottom:0}
.hero-karta dt{color:#93aac4;font-size:.9rem}
.hero-karta dd{
  margin:0;text-align:right;color:#fff;font-weight:600;font-size:.92rem;
  font-family:'IBM Plex Sans',sans-serif;
}

/* Nagłówek podstrony */
.naglowek-strony{
  background:var(--granat-ciemny);
  color:#fff;
  padding-block:clamp(48px,5.5vw,78px);
  position:relative;overflow:hidden;
}
.naglowek-strony::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(105deg,#000,transparent 68%);
  -webkit-mask-image:linear-gradient(105deg,#000,transparent 68%);
}
.naglowek-strony .kontener{position:relative;z-index:2}
.naglowek-strony h1{color:#fff;margin-bottom:.35em}
.naglowek-strony .lead{color:#b3c6db}

/* Okruszki */
.okruszki{font-size:.85rem;margin-bottom:20px;color:#8ea6c0}
.okruszki ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.okruszki li{margin:0;display:flex;align-items:center;gap:8px}
.okruszki li+li::before{content:"/";color:rgba(255,255,255,.3)}
.okruszki a{color:#b3c6db;text-decoration:none}
.okruszki a:hover{color:#fff;text-decoration:underline}
.okruszki [aria-current]{color:#fff}

/* ------------------------------------------------------------- Pasek liczb */
.pasek-liczb{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--linia);border-radius:var(--promien-l);
  background:#fff;overflow:hidden;
}
.pasek-liczb > div{padding:28px 26px;border-right:1px solid var(--linia)}
.pasek-liczb > div:last-child{border-right:0}
.pasek-liczb .liczba{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:1.5rem;font-weight:700;color:var(--granat);
  letter-spacing:-.02em;line-height:1.2;
}
.pasek-liczb .opis{font-size:.88rem;color:var(--tekst-slaby);margin-top:6px}

/* ------------------------------------------------------------------ Siatki */
.siatka{display:grid;gap:24px}
.siatka-2{grid-template-columns:repeat(2,1fr)}
.siatka-3{grid-template-columns:repeat(3,1fr)}
.siatka-4{grid-template-columns:repeat(4,1fr)}
.siatka-tekst{grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:start}

/* ------------------------------------------------------------------- Karty */
.karta{
  background:#fff;
  border:1px solid var(--linia);
  border-radius:var(--promien-l);
  padding:30px 28px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  display:flex;flex-direction:column;
}
.karta:hover{border-color:var(--granat-linia);box-shadow:var(--cien-m);transform:translateY(-2px)}
.karta h3{margin-bottom:.5em}
.karta p{color:var(--tekst-slaby);font-size:.97rem}
.karta-numer{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;
  color:var(--akcent);margin-bottom:16px;
}
.karta-ikona{
  width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--granat-mgla);color:var(--granat);
  border-radius:var(--promien);margin-bottom:20px;
}
.karta-ikona svg{width:22px;height:22px}
.karta-stopka{margin-top:auto;padding-top:20px}

/* Karta na ciemnym tle */
.sekcja-granat .karta{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.12);
}
.sekcja-granat .karta:hover{border-color:rgba(255,255,255,.25);box-shadow:none}
.sekcja-granat .karta p{color:#a8bcd2}
.sekcja-granat .karta-ikona{background:rgba(255,255,255,.09);color:var(--akcent-jasny)}

/* --------------------------------------------------------------- Listy */
.lista-znaczniki{list-style:none;padding:0;margin:0}
.lista-znaczniki li{
  position:relative;padding-left:28px;margin-bottom:12px;
  color:var(--tekst-slaby);font-size:.97rem;
}
.lista-znaczniki li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:1px;
  background:var(--akcent);transform:rotate(45deg);
}
.lista-znaczniki strong{color:var(--atrament);font-weight:600}
.sekcja-granat .lista-znaczniki li{color:#a8bcd2}

/* Lista numerowana — proces */
.proces{list-style:none;padding:0;margin:0;counter-reset:krok}
.proces li{
  counter-increment:krok;
  position:relative;padding-left:62px;padding-bottom:34px;margin:0;
}
.proces li::before{
  content:counter(krok,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--granat);color:#fff;
  font-family:'IBM Plex Sans',sans-serif;font-size:.82rem;font-weight:600;
}
.proces li::after{
  content:"";position:absolute;left:18.5px;top:44px;bottom:6px;
  width:1px;background:var(--linia);
}
.proces li:last-child{padding-bottom:0}
.proces li:last-child::after{display:none}
.proces h3{font-size:1.05rem;margin-bottom:.35em}
.proces p{color:var(--tekst-slaby);font-size:.97rem;margin:0}

/* ------------------------------------------------------------- Etykiety */
.etykiety{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.etykiety li{margin:0}
.etykieta{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 19px;
  border:1px solid var(--linia);border-radius:999px;
  background:#fff;
  font-size:.93rem;font-weight:500;color:var(--tekst);
  transition:border-color .15s,background-color .15s,color .15s;
}
.etykieta::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--akcent);flex:none;
}
.etykieta:hover{border-color:var(--granat);background:var(--granat-mgla);color:var(--granat)}
.sekcja-granat .etykieta{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#dbe6f2;
}
.sekcja-granat .etykieta:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);color:#fff}

/* --------------------------------------------------------- Wyróżnienie */
.wyroznienie{
  border-left:3px solid var(--akcent);
  background:var(--akcent-mgla);
  padding:22px 26px;
  border-radius:0 var(--promien) var(--promien) 0;
}
.wyroznienie p{color:#5b4408;font-size:.97rem}
.wyroznienie p:last-child{margin-bottom:0}

/* ----------------------------------------------------------- Pas wezwania */
.pas-cta{
  background:var(--granat);
  color:#fff;
  padding-block:clamp(48px,5.5vw,72px);
  position:relative;overflow:hidden;
}
.pas-cta::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 14px);
  pointer-events:none;
}
.pas-cta .kontener{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;
}
.pas-cta h2{color:#fff;margin-bottom:.3em;font-size:clamp(1.4rem,1.1rem + 1.2vw,1.95rem)}
.pas-cta p{color:#b3c6db;margin:0;max-width:52ch}
.pas-cta-akcje{display:flex;gap:14px;flex-wrap:wrap;flex:none}

/* ------------------------------------------------------------ Kontakt */
.kontakt-siatka{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:start}

.kontakt-pozycja{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--linia)}
.kontakt-pozycja:first-child{padding-top:0}
.kontakt-pozycja:last-child{border-bottom:0}
.kontakt-pozycja-ikona{
  width:42px;height:42px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--granat-mgla);color:var(--granat);border-radius:var(--promien);
}
.kontakt-pozycja-ikona svg{width:19px;height:19px}
.kontakt-pozycja h3{font-size:.8rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tekst-slaby);margin-bottom:7px}
.kontakt-pozycja p{margin:0;font-size:1rem;color:var(--atrament)}
.kontakt-pozycja .drobne{font-size:.9rem;color:var(--tekst-slaby);margin-top:4px}

/* Chronione dane kontaktowe */
.kontakt-chroniony{display:inline-block}
.kontakt-odsloniecie{
  display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-size:1rem;
  color:var(--granat);
  background:transparent;border:0;
  cursor:pointer;text-align:left;
  /* Powiększony obszar dotyku (26 px + 2×9 px = 44 px) przy zachowaniu
     dotychczasowego układu — ujemny margines kompensuje wyściółkę. */
  padding:9px 0;
  margin:-9px 0;
}
.kontakt-maska{
  font-variant-numeric:tabular-nums;
  color:var(--tekst-slaby);
  letter-spacing:.02em;
}
.kontakt-akcja{
  font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--akcent);
  border:1px solid currentColor;border-radius:3px;
  padding:2px 8px;
  white-space:nowrap;
  transition:background-color .15s,color .15s;
}
.kontakt-odsloniecie:hover .kontakt-akcja{background:var(--akcent);color:#fff}
/* Stan po odsłonięciu — element zamienia się w zwykły odnośnik */
.kontakt-chroniony a{
  font-weight:600;color:var(--granat);
  text-decoration:none;border-bottom:1px solid var(--granat-linia);
}
.kontakt-chroniony a:hover{border-bottom-color:var(--granat)}
/* Zapis bez JavaScriptu — tekst odwrócony przez CSS */
.kontakt-rtl{unicode-bidi:bidi-override;direction:rtl;font-weight:600;color:var(--granat)}

/* Karta godzin */
.karta-godziny{
  background:var(--granat-ciemny);color:#fff;
  border-radius:var(--promien-l);padding:30px;
}
.karta-godziny h3{color:#fff;font-size:1.02rem;margin-bottom:18px}
.karta-godziny dl{margin:0}
.karta-godziny div{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.11);
  font-size:.95rem;
}
.karta-godziny div:last-child{border-bottom:0;padding-bottom:0}
.karta-godziny dt{color:#a8bcd2;margin:0}
.karta-godziny dd{margin:0;font-weight:600;color:#fff;font-family:'IBM Plex Sans',sans-serif}

/* ---------------------------------------------------------------- Formularz */
.formularz{
  background:#fff;
  border:1px solid var(--linia);
  border-radius:var(--promien-l);
  padding:clamp(26px,3.4vw,40px);
  box-shadow:var(--cien-s);
}
.formularz-siatka{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pole{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.pole-szerokie{grid-column:1 / -1}
.pole label{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.88rem;font-weight:600;color:var(--atrament);
}
.pole .wymagane{color:var(--blad);margin-left:2px}
.pole .podpowiedz{font-size:.83rem;color:var(--tekst-slaby);font-weight:400}

.pole input[type="text"],
.pole input[type="email"],
.pole input[type="tel"],
.pole select,
.pole textarea{
  width:100%;
  font-family:inherit;font-size:1rem;color:var(--atrament);
  background:#fff;
  border:1.5px solid var(--linia);
  border-radius:var(--promien);
  padding:13px 15px;
  transition:border-color .15s,box-shadow .15s;
}
.pole textarea{min-height:158px;resize:vertical;line-height:1.6}
.pole select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f6b7a' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:42px;cursor:pointer;
}
.pole input:hover,.pole select:hover,.pole textarea:hover{border-color:var(--granat-linia)}
.pole input:focus,.pole select:focus,.pole textarea:focus{
  outline:none;
  border-color:var(--granat);
  box-shadow:0 0 0 3px rgba(0,51,102,.12);
}
.pole input::placeholder,.pole textarea::placeholder{color:#9aa5b3}

.pole.blad input,.pole.blad select,.pole.blad textarea{border-color:var(--blad)}
.pole.blad input:focus,.pole.blad select:focus,.pole.blad textarea:focus{
  box-shadow:0 0 0 3px rgba(179,38,30,.12);
}
.komunikat-pola{font-size:.84rem;color:var(--blad);display:none}
.pole.blad .komunikat-pola{display:block}

/* Zgoda RODO */
.pole-zgoda{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}
.pole-zgoda input[type="checkbox"]{
  width:19px;height:19px;flex:none;margin:2px 0 0;
  accent-color:var(--granat);cursor:pointer;
}
.pole-zgoda label{font-size:.88rem;line-height:1.55;color:var(--tekst-slaby);font-weight:400;font-family:inherit}
.pole-zgoda.blad label{color:var(--blad)}

/* Licznik znaków */
.licznik-znakow{font-size:.8rem;color:var(--tekst-slaby);text-align:right;margin-top:-2px}
.licznik-znakow.blisko{color:var(--akcent)}

/* Pole plików */
.strefa-plikow{
  border:1.5px dashed var(--granat-linia);
  border-radius:var(--promien);
  background:var(--tlo-alt);
  padding:26px 22px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.strefa-plikow:hover,.strefa-plikow.nad{border-color:var(--granat);background:var(--granat-mgla)}
.strefa-plikow input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.strefa-plikow-tekst{font-size:.95rem;color:var(--tekst);margin:0}
.strefa-plikow-tekst strong{color:var(--granat)}
.strefa-plikow-drobne{font-size:.82rem;color:var(--tekst-slaby);margin:6px 0 0}
.lista-plikow{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.lista-plikow li{
  display:flex;align-items:center;gap:12px;margin:0;
  background:#fff;border:1px solid var(--linia);border-radius:var(--promien);
  padding:10px 14px;font-size:.9rem;
}
.lista-plikow .nazwa{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.lista-plikow .rozmiar{color:var(--tekst-slaby);font-size:.84rem;flex:none}
.lista-plikow .usun{
  background:transparent;border:0;cursor:pointer;color:var(--tekst-slaby);
  font-size:1.2rem;line-height:1;padding:0 4px;flex:none;
}
.lista-plikow .usun:hover{color:var(--blad)}

/* Honeypot — pułapka na automaty. Niewidoczna dla ludzi,
   ale dostępna w kodzie, więc bot ją wypełni i się zdradzi. */
.pulapka{
  position:absolute!important;
  left:-10000px!important;top:auto!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
}

/* Komunikaty formularza */
.komunikat{
  border-radius:var(--promien);
  padding:18px 22px;
  margin-bottom:26px;
  font-size:.96rem;
  display:flex;gap:14px;align-items:flex-start;
}
.komunikat svg{width:20px;height:20px;flex:none;margin-top:2px}
.komunikat p{margin:0}
.komunikat p+p{margin-top:6px}
.komunikat-sukces{background:var(--sukces-tlo);color:var(--sukces);border:1px solid #bfe0cc}
.komunikat-blad{background:var(--blad-tlo);color:var(--blad);border:1px solid #f3cdcb}
.komunikat strong{color:inherit}

.formularz-stopka{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.formularz-stopka .drobne{font-size:.85rem;color:var(--tekst-slaby);margin:0}

/* Wskaźnik wysyłania */
.wirujacy{
  width:16px;height:16px;flex:none;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:obrot .7s linear infinite;
}
@keyframes obrot{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ Stopka */
.stopka{background:var(--granat-noc);color:#8ea6c0;padding-block:56px 0;font-size:.93rem}
.stopka a{color:#b3c6db;text-decoration:none}
.stopka a:hover{color:#fff;text-decoration:underline}
.stopka h3{
  color:#fff;font-size:.78rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px;
}
.stopka-siatka{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
.stopka-logo img{height:30px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.92}
.stopka-lista{list-style:none;padding:0;margin:0}
.stopka-lista li{margin-bottom:11px}
.stopka-dol{
  margin-top:48px;padding-block:22px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.86rem;color:#6d84a0;
}
.stopka-dol p{margin:0}

/* ----------------------------------------------------------- Animacja wejścia */
/*
 * Ukrycie treści włączamy WYŁĄCZNIE tam, gdzie działa JavaScript — to on
 * przywraca widoczność przy przewijaniu. Bez tego warunku wyłączony lub
 * zablokowany skrypt sprawiłby, że sekcje zostałyby niewidoczne na stałe.
 * Przeglądarki nieznające reguły (scripting) po prostu pokazują treść od razu.
 */
@media (scripting: enabled){
  .wejscie{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
}
.wejscie.widoczne{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .wejscie{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =====================================================================
   RESPONSYWNOŚĆ
   ===================================================================== */

@media (max-width:1080px){
  .stopka-siatka{grid-template-columns:1fr 1fr}
  .siatka-4{grid-template-columns:repeat(2,1fr)}
  .pasek-liczb{grid-template-columns:repeat(2,1fr)}
  .pasek-liczb > div:nth-child(2){border-right:0}
  .pasek-liczb > div:nth-child(-n+2){border-bottom:1px solid var(--linia)}
}

@media (max-width:940px){
  .hero-siatka{grid-template-columns:1fr;gap:40px}
  .siatka-tekst{grid-template-columns:1fr}
  .kontakt-siatka{grid-template-columns:1fr}
  .siatka-3{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .logo-podpis{display:none}
  .menu-przycisk{display:inline-flex}
  .pasek-info-lista{gap:16px}

  /* Rozmycie tła musi tu zniknąć. Element z backdrop-filter staje się
     układem odniesienia dla potomków z position:fixed — menu rozpinane
     na cały ekran zostałoby uwięzione wewnątrz paska nagłówka. */
  .naglowek{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#fff;
  }

  /* Menu mobilne wypełnia dokładnie ekran (inset:0). Nie odsuwamy go poza
     krawędź — panel wystający w bok rozciągałby stronę i włączał poziome
     przewijanie. Zamiast przesunięcia używamy wygaszania. */
  .nawigacja{
    position:fixed;inset:0;
    margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    padding:88px 24px 32px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
    z-index:120;
  }
  .nawigacja.otwarte{opacity:1;visibility:visible}
  .nawigacja a{
    padding:17px 4px;font-size:1.1rem;border-radius:0;
    border-bottom:1px solid var(--linia-slaba);
  }
  .nawigacja a[aria-current="page"]::after{left:4px;right:auto;width:22px;bottom:10px}
  .menu-przycisk{position:relative;z-index:130}
  body.menu-otwarte{overflow:hidden}
}

@media (max-width:720px){
  body{font-size:16px}
  .siatka-2,.siatka-3,.siatka-4{grid-template-columns:1fr}
  .formularz-siatka{grid-template-columns:1fr}
  .stopka-siatka{grid-template-columns:1fr;gap:34px}
  .pas-cta .kontener{flex-direction:column;align-items:flex-start;gap:24px}
  .naglowek-akcje .btn{display:none}
  .pasek-liczb{grid-template-columns:1fr}
  .pasek-liczb > div{border-right:0;border-bottom:1px solid var(--linia)}
  .pasek-liczb > div:last-child{border-bottom:0}
  .hero-akcje .btn{width:100%}
}

@media (max-width:560px){
  .pasek-info .kontener{justify-content:center;text-align:center}
  .kontener{padding-inline:18px}
}

/* ------------------------------------------------------------------ Druk */
@media print{
  .naglowek,.pasek-info,.pas-cta,.formularz,.menu-przycisk,.stopka-dol{display:none}
  body{font-size:11pt;color:#000}
  .hero,.naglowek-strony,.sekcja-granat{background:#fff!important;color:#000!important}
  .hero h1,.naglowek-strony h1,.sekcja-granat h2,.sekcja-granat h3{color:#000!important}
  .kontakt-maska,.kontakt-akcja{display:none}
  .kontakt-chroniony::after{content:attr(data-druk)}
}