:root{ --soft-bg:#f6f8ff; --ink:#0b1324; }
body{ color:var(--ink); }
.navbar{ backdrop-filter: blur(8px); background: rgba(255,255,255,.88); }
.hero{
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(13,110,253,.18), transparent 60%),
    radial-gradient(900px 400px at 90% 30%, rgba(32,201,151,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--soft-bg) 100%);
  padding: 6.5rem 0 3.5rem;
  border-bottom: 1px solid rgba(13,110,253,.08);
}
.badge-soft{
  background: rgba(13,110,253,.10);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.18);
}
.card-soft{
  border: 1px solid rgba(13,110,253,.10);
  box-shadow: 0 10px 30px rgba(11,19,36,.06);
  border-radius: 1rem;
}
.icon-pill{
  width: 44px; height: 44px; display: inline-grid; place-items:center;
  border-radius: 999px;
  background: rgba(13,110,253,.10);
  border: 1px solid rgba(13,110,253,.18);
  color: #0d6efd;
}
.section{ padding: 4.5rem 0; }
.section-alt{ background: var(--soft-bg); border-top: 1px solid rgba(13,110,253,.08); border-bottom: 1px solid rgba(13,110,253,.08); }
.kpi{
  border: 1px solid rgba(13,110,253,.10);
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
  height: 100%;
}
.footer{ background:#0b1324; color: rgba(255,255,255,.82); }
.footer a{ color: rgba(255,255,255,.82); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.btn{ border-radius: .9rem; }
.form-control, .form-select{ border-radius:.9rem; }
.small-muted{ color: rgba(11,19,36,.65); }
.page-hero{ padding: 5.5rem 0 2.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--soft-bg) 100%); border-bottom: 1px solid rgba(13,110,253,.08); }
.img-cover{ width:100%; height:100%; object-fit: cover; display:block; }
.card-img-top{ border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.map-embed{ width:100%; height: 100%; min-height: 360px; border:0; border-radius: 1rem; }
.footer h6{ color:#fff; }
.footer ul{ padding-left: 0; list-style: none; margin:0; }
.footer ul li{ margin: .35rem 0; }

/* --- Stałe rozmiary obrazków (podmień dowolne zdjęcie – będzie przycięte do ramki) --- */
.hero-media{ height: 420px; }
@media (max-width: 991.98px){ .hero-media{ height: 320px; } }

.img-fixed-sm{ height: 200px; }
.img-fixed-md{ height: 220px; }
.img-fixed-lg{ height: 260px; }

.img-fixed-sm, .img-fixed-md, .img-fixed-lg, .hero-media{
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Realizacje – delikatny zoom na hover + przycisk podglądu */
.real-card{ cursor: default; }
.real-img{ cursor: pointer; }
.real-card img{ transition: transform .25s ease; }
.real-card:hover img{ transform: scale(1.04); } /* hover tylko wizualny */

.real-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
  opacity:0; transition: opacity .2s ease;
}
.real-card:hover .real-overlay{ opacity:1; }
.real-overlay .badge{
  position:absolute; left:14px; bottom:14px;
}

.real-open{ display:block; }
.real-open .real-overlay{ pointer-events:none; }
.real-open{ cursor:pointer; }