@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=Barlow+Condensed:wght@500;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --pom:#d4491e;
  --ciemny:#0e141b;
  --ciemny-2:#151d26;
  --jasny:#e9edf0;
  --jasny-2:#fff;
  --tekst:#e8edf3;
  --tekst-ciemny:#12181f;
  --szary:#93a3b4;
  --szary-jasny:#5a6672;
  --kreska:#1e2a37;
  --kreska-jasna:#d3dae0;
}
html{scroll-behavior:smooth}
body{
  background:var(--ciemny);color:var(--tekst);
  font-family:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 34px}

/* ---- naglowek ---- */
header{position:sticky;top:0;z-index:20;background:rgba(14,20,27,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--kreska)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:34px;height:74px}
.logo{font-size:19px;font-weight:600;letter-spacing:.15em;white-space:nowrap}
.logo span{color:var(--pom)}
nav{display:flex;gap:32px;font-size:16px;color:#b4c1cf;font-weight:400}
nav a:hover{color:var(--pom)}
.prawa{display:flex;align-items:center;gap:22px}
.jez{display:flex;gap:12px;font-size:14px;color:#75879a;font-weight:500}
.jez a.tu{color:var(--pom)}
.jez a:hover{color:var(--tekst)}
.btn{background:var(--pom);color:#fff;padding:11px 25px;font-size:16px;font-weight:500;
  border-radius:2px;transition:background .18s}
.btn:hover{background:#b53d16}

/* ---- hero ---- */
.hero{padding:86px 0 72px}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.1;font-weight:400;
  letter-spacing:-.022em;max-width:20ch}
.hero .pod{margin-top:22px;max-width:58ch;color:var(--szary);font-size:18px;line-height:1.62}
.cta{display:inline-block;margin-top:32px;background:var(--pom);color:#fff;
  padding:16px 40px;font-size:17px;font-weight:500;border-radius:2px;transition:background .18s}
.cta:hover{background:#b53d16}

/* ---- pas z danymi ---- */
.pas{background:var(--ciemny-2);border-top:1px solid var(--kreska);
  border-bottom:1px solid var(--kreska);padding:34px 0}
.dane{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--kreska)}
.dane > div{background:var(--ciemny-2);padding:22px 26px}
.dane .duza{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:600;
  color:var(--pom);line-height:1;letter-spacing:-.01em}
.dane .opis{margin-top:9px;font-size:15px;color:var(--szary);line-height:1.45}

/* ---- sekcje ---- */
section{padding:74px 0}
.jasna{background:var(--jasny);color:var(--tekst-ciemny)}
.jasna .tresc{color:var(--szary-jasny)}
.jasna .karta{background:var(--jasny-2);border-color:var(--kreska-jasna)}
.jasna .karta p{color:var(--szary-jasny)}
.jasna .karta .miara{color:var(--pom)}
.jasna h4{color:var(--szary-jasny)}

.dwie{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start}
h2{font-size:clamp(26px,2.9vw,36px);line-height:1.2;font-weight:400;letter-spacing:-.018em;max-width:20ch}
.tresc{color:var(--szary);font-size:16.5px;line-height:1.74}
.tresc p + p{margin-top:19px}

/* ---- kafle ---- */
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:18px;margin-top:40px}
.karta{background:var(--ciemny-2);border:1px solid var(--kreska);border-radius:6px;
  padding:26px 26px 30px}
.karta .miara{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:600;
  color:var(--pom);line-height:1;margin-bottom:18px;letter-spacing:-.01em}
.karta h3{font-size:21px;font-weight:500;margin-bottom:13px;letter-spacing:-.012em}
.karta p{color:var(--szary);font-size:16px;line-height:1.68}

/* ---- kontakt ---- */
.kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:28px;margin-top:36px}
.kontakt h4{font-size:15px;font-weight:600;color:var(--szary);margin-bottom:10px}
.kontakt p{line-height:1.74}
.kontakt a{color:var(--pom)}
.kontakt a:hover{text-decoration:underline}

/* ---- stopka ---- */
footer{border-top:1px solid var(--kreska);padding:38px 0 42px}
.rejestr{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:26px;font-size:15px;line-height:1.7;color:var(--szary);
  padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid var(--kreska)}
.rejestr dt{font-size:13.5px;color:var(--szary-jasny);margin-bottom:3px}
.rejestr dd{color:#adbccb}
.rejestr .nazwa{color:var(--tekst);font-weight:500}
.dol{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:14.5px;color:#6d7f92}


/* formularz zapytania ofertowego */
.zapytanie{margin-top:34px;max-width:760px}
.zapytanie .pola{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zapytanie label{display:flex;flex-direction:column;gap:6px;font-size:13px;
  letter-spacing:.02em;opacity:.72}
.zapytanie label.pelna{grid-column:1/-1}
.zapytanie input,.zapytanie textarea{font:inherit;font-size:15px;padding:11px 13px;
  border:1px solid var(--kreska);border-radius:4px;background:transparent;
  color:inherit;width:100%}
.zapytanie textarea{resize:vertical;min-height:84px}
.zapytanie input:focus,.zapytanie textarea:focus{outline:2px solid var(--pom);
  outline-offset:-1px;border-color:var(--pom)}
.zapytanie button{margin-top:18px;background:var(--pom);color:#fff;border:0;
  border-radius:3px;padding:14px 34px;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer}
.zapytanie button:hover{background:#b93d17}
.zapytanie button:disabled{opacity:.55;cursor:default}
.komunikat{margin-top:14px;font-size:14.5px;min-height:1.3em}
.komunikat.ok{color:#1f8a4c}
.komunikat.zle{color:#c0392b}
/* pole-pulapka na boty: poza ekranem, niedostepne z klawiatury */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:880px){.zapytanie .pola{grid-template-columns:1fr}}

@media(max-width:880px){
  nav{display:none}
  .dwie{grid-template-columns:1fr;gap:30px}
  .hero{padding:74px 0 66px}
  section{padding:70px 0}
  .wrap{padding:0 22px}
  .hero h1{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}