:root{
  --bg:#0b1220;
  --surface:#0f1a2e;
  --paper:#ffffff;
  --muted:#f4f6f8;
  --text:#0e1628;
  --text2:#3a465c;
  --brand:#23b36b;
  --brand2:#18a05c;
  --line:rgba(14,22,40,.12);
  --shadow:0 18px 45px rgba(11,18,32,.12);
  --radius:18px;
  --container:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
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:var(--paper);
  line-height:1.6;
}
a{color:inherit}
.container{width:min(var(--container), calc(100% - 2rem)); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.6rem .9rem; background:#fff; border:1px solid var(--line); border-radius:12px; z-index:9999}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(14,22,40,.08);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand__logo{height:52px; width:auto}

.nav{display:flex; align-items:center; gap:1rem}
.nav a{text-decoration:none; font-weight:600; color:rgba(14,22,40,.85); padding:.55rem .75rem; border-radius:999px}
.nav a:hover{background:rgba(35,179,107,.10)}
.nav__cta{background:var(--brand); color:#fff !important}
.nav__cta:hover{background:var(--brand2)}

.nav__toggle{display:none; background:transparent; border:0; padding:.6rem; border-radius:12px}
.nav__toggle span{display:block; width:24px; height:2px; background:rgba(14,22,40,.85); margin:5px 0; border-radius:2px}

.hero{position:relative; min-height:86vh; display:grid; align-items:center; overflow:hidden}
.hero__media{
  position:absolute; inset:0;
  background-image:url('../images/hero.jpg');
  background-size:cover; background-position:center;
  transform:translateZ(0);
}
.hero__fade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 42%, rgba(255,255,255,.30) 74%, rgba(255,255,255,0) 100%)}
.hero__content{position:relative; padding:5.5rem 0 3.2rem}
.hero__eyebrow{display:inline-flex; gap:.5rem; align-items:center; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(14,22,40,.7); background:rgba(255,255,255,.65); border:1px solid rgba(14,22,40,.10); padding:.45rem .75rem; border-radius:999px}
.hero h1{margin:.9rem 0 .6rem; font-size:clamp(2.1rem, 4.2vw, 3.4rem); line-height:1.1}
.hero h1 span{display:block; font-weight:650; color:rgba(14,22,40,.78); font-size:clamp(1.05rem, 1.7vw, 1.35rem); margin-top:.55rem}
.hero__lead{max-width:58ch; color:rgba(14,22,40,.78)}
.hero__actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; font-weight:800; padding:.9rem 1.1rem; border-radius:14px; background:var(--brand); color:#fff; box-shadow:0 12px 30px rgba(35,179,107,.22)}
.btn:hover{background:var(--brand2)}
.btn--ghost{background:rgba(255,255,255,.72); color:rgba(14,22,40,.9); border:1px solid rgba(14,22,40,.12); box-shadow:none}
.btn--ghost:hover{background:#fff}
.btn--small{padding:.7rem .95rem; border-radius:12px}

.hero__badges{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem}
.badge{background:rgba(255,255,255,.72); border:1px solid rgba(14,22,40,.10); border-radius:16px; padding:.75rem .9rem; min-width:165px}
.badge strong{display:block; font-size:1.05rem}
.badge span{color:rgba(14,22,40,.68); font-weight:650; font-size:.95rem}

.section{padding:4.2rem 0}
.section--muted{background:var(--muted)}
.section__head{margin-bottom:1.4rem}
.section__head p{max-width:70ch; color:rgba(14,22,40,.74); margin:.4rem 0 0}

.grid{display:grid; gap:1.4rem}
.grid--2{grid-template-columns:1.1fr .9fr; align-items:start}

.card{background:#fff; border:1px solid rgba(14,22,40,.10); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
.card--photo{padding:0; overflow:hidden}
.card--photo img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

.cards{display:grid; gap:1rem; grid-template-columns:repeat(4, 1fr)}
.cards .card{box-shadow:none}
.cards h3{margin:.2rem 0 .4rem}
.cards p{margin:0; color:rgba(14,22,40,.72)}

.callout{padding:1rem 1.1rem; background:rgba(35,179,107,.08); border:1px solid rgba(35,179,107,.22); border-radius:16px}

.parallax{position:relative; min-height:420px; display:grid; align-items:center; overflow:hidden}
.parallax__bg{position:absolute; inset:0; background-image:url('../images/realizacje/realizacja-2.jpg'); background-size:cover; background-position:center; transform:translateZ(0) scale(1.08)}
.parallax__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.66) 55%, rgba(11,18,32,.76) 100%)}
.parallax__content{position:relative; color:#fff; padding:4.2rem 0}
.parallax__content p{max-width:80ch; color:rgba(255,255,255,.86)}

.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem}
.chip{display:inline-flex; padding:.55rem .75rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); font-weight:700}

.gallery{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr)}
.gallery__item{background:#fff; border:1px solid rgba(14,22,40,.10); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.gallery__item img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.gallery__item--placeholder{display:grid; place-items:center; padding:1.2rem; color:rgba(14,22,40,.72)}
.muted{color:rgba(14,22,40,.65)}

.list{margin:.8rem 0 0; padding-left:1.1rem}
.list li{margin:.35rem 0}

.contact{display:grid; gap:.6rem; margin-top:1rem}
.contact__row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.7rem .9rem; border:1px solid rgba(14,22,40,.10); border-radius:14px; background:#fff}
.contact__row span{color:rgba(14,22,40,.62); font-weight:700}
.contact__row a{text-decoration:none}
.contact__row a:hover{text-decoration:underline}

.steps{margin:.7rem 0 0; padding-left:1.2rem}
.steps li{margin:.45rem 0}

.footer{background:#0b1220; color:rgba(255,255,255,.86); padding:1.6rem 0}
.footer__inner{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between}
.footer__links{display:flex; gap:.7rem; flex-wrap:wrap}
.footer__links a{color:rgba(255,255,255,.86); text-decoration:none; padding:.3rem .55rem; border-radius:999px}
.footer__links a:hover{background:rgba(255,255,255,.10)}

h2{font-size:clamp(1.6rem, 2.5vw, 2.1rem); margin:0 0 .7rem}

@media (max-width: 980px){
  .grid--2{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2, 1fr)}
  .gallery{grid-template-columns:repeat(2, 1fr)}
  .hero__fade{background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.35) 82%, rgba(255,255,255,0) 100%)}
}

@media (max-width: 720px){
  .nav__toggle{display:inline-flex}
  .nav{position:absolute; right:1rem; top:64px; background:rgba(255,255,255,.96); border:1px solid rgba(14,22,40,.12); border-radius:16px; padding:.6rem; display:none; flex-direction:column; width:min(320px, calc(100vw - 2rem)); box-shadow:var(--shadow)}
  .nav.is-open{display:flex}
  .nav a{width:100%}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .brand__logo{height:44px}
  .hero__content{padding:4.6rem 0 2.6rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .parallax__bg, .hero__media{transform:none !important}
}

.hero__fade {
  position: absolute; 
  inset: 0; 
  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

.hero__content {
  position: relative; 
  padding: 5.5rem 0 3.2rem;
  z-index: 2;
  color: #ffffff; /* Zmiana tekstu na biały dla kontrastu */
}

.hero h1 {
  margin: .9rem 0 .6rem; 
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); 
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero h1 span {
  color: rgba(255,255,255,0.9);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.hero__lead {
  max-width: 58ch; 
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.hero__eyebrow {
  color: #ffffff;
  background: rgba(35, 179, 107, 0.85); /* Zielony akcent dla czytelności */
  border: none;
}

.badge {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
}

.badge span {
  color: rgba(255,255,255,0.8);
}

@media (max-width: 980px) {
  .hero__fade {
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
  }
}