/* ============================================================
   Wariant "ożywiony" — nakładka na styles.css.
   Ładowany wyłącznie przez strony próbne, nie rusza wersji bazowej.
   ============================================================ */

/* --- Pas naczelny ze zdjęciem --- */
.hero-foto { position: relative; overflow: hidden; background: var(--navy); }
.hero-foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  /* lekkie odbarwienie zamiast pełnej szarości — zielony odczyt monitora zostaje jako akcent */
  filter: grayscale(.55) contrast(1.05) brightness(.72);
}
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,27,36,.93) 0%, rgba(12,27,36,.74) 40%, rgba(12,27,36,.28) 100%);
}
.hero-foto .container { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.hero-foto .hero-tresc { max-width: 680px; text-align: left; }
.hero-foto .eyebrow { justify-content: flex-start; color: var(--gold); }
.hero-foto h1 {
  color: #fff; font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.04; margin: 10px 0 18px;
}
.hero-foto h1::after { display: none; }
.hero-foto p { color: rgba(255,255,255,.88); font-size: 1.12rem; line-height: 1.65; margin: 0 0 30px; }
.hero-foto .hero-akcje { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Nasycone koła ikon zamiast bladych kwadratów --- */
.card-ico.kolo {
  width: 62px; height: 62px; border-radius: 999px;
  background: var(--c); border: none; color: #fff;
  box-shadow: 0 12px 26px -12px var(--c);
}
.card-ico.kolo svg { width: 30px; height: 30px; stroke-width: 2.1; }

/* --- Zdjęcie w ciemnej sekcji zamiast wykresu-atrapy --- */
.foto-ramka { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); line-height: 0; }
.foto-ramka img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; filter: grayscale(.25) contrast(1.04); }

/* --- Mocniejsze nagłówki sekcji --- */
.zywa h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }

/* --- Statystyki: kolorowa liczba zamiast czarnej --- */
.zywa .stat-num { color: var(--blue); }

@media (max-width: 860px) {
  .hero-foto .container { padding-top: 64px; padding-bottom: 64px; }
  .foto-ramka img { max-height: 320px; }
}

/* --- Strona główna: zdjęcie jako warstwa pod istniejącym pasem naczelnym --- */
.zywa .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url('/assets/foto/okablowanie.jpg') center/cover no-repeat;
  filter: grayscale(.45) contrast(1.05) brightness(.45);
  opacity: .55;
}
.zywa .hero-glow { z-index: 1; }
.zywa .hero-inner { position: relative; z-index: 2; }