/* ====== GLOBAL BACKGROUND PATTERN ====== */
:root{
  /* intensywność "zamglenia" patternu jeśli będzie zbyt mocny */
  --pattern-opacity: 0.08; /* 0.06–0.12 zwykle wygląda najlepiej */
  --pattern-size: 360px;   /* wielkość kafelka – 240–480px */
}

/* Global, niepowtarzalne tło jako "tapeta" */
body.app::before {
  content: "";
  position: fixed;       /* pokrywa cały ekran niezależnie od scrolla */
  inset: 0;
  z-index: -1;           /* pod całą treścią */
  background-image: url("img/bg-electro.png");
  background-repeat: no-repeat;
  background-position: center top;   /* ewentualnie: center center */
  background-size: cover;            /* skaluje proporcjonalnie bez szwów */
  opacity: 0.9;                      /* podbij/obniż widoczność 0.75–1.0 */
}

/* Kontrast treści na tle */
main.container { backdrop-filter: saturate(120%) }
.app-bar, .app-footer { background-color: #1f2937; } /* już masz u siebie:contentReference[oaicite:0]{index=0} */

/* wariant ciemniejszy, np. pod sekcje hero – opcjonalnie */
.surface-translucent {
  background: rgba(255,255,255,0.75);
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: .75rem;
}

/* Upewniamy się, że nav i stopka są kryjące (już są, ale zachowajmy) */
.app-bar, .app-footer {
  background-color: #1f2937; /* grafit */
  color: #fff;
}


html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  background: #f8f9fa;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #ddd;
}

html, body { height: 100%; }
body.app { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 1 auto; }

/* Kolory nav + stopka (grafit, jasny tekst, akcent żółty) */
.app-bar, .app-footer {
  background-color: #1f2937; /* grafit (nie za ciemny, logo nie ginie) */
  color: #fff;
}

/* Linki w nav */
.navbar .nav-link { color: #e5e7eb; }                 /* jasna szarość */
.navbar .nav-link:hover, .navbar .nav-link.active {
  color: #facc15 !important;                           /* żółty akcent */
  font-weight: 600;
}

/* Logo w nav (60px jak chciałeś; responsywne) */
.brand-logo { height: 60px; width: auto; display: block; }

/* Stopka */
.app-footer {
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid #374151;
  font-size: .95rem;
}

/* Opcjonalnie: subtelny odstęp od góry na mobile */
@media (max-width: 575.98px) {
  .navbar { padding-top: .4rem; padding-bottom: .4rem; }
}


/* Półprzezroczysty panel jak na stronie głównej */
.panel-glass {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: .75rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* (opcjonalnie) mocniej na desktopie, delikatniej na telefonie */
@media (min-width: 768px) {
  .panel-glass { background: rgba(255,255,255,0.82); }
}