.bg-wrapper {
  opacity: 0.5;
}

.bg-overlay, .bg-img {
  position: fixed;
  top: 0;
  z-index: -1;
  height: 100vh;
  width: 100vw;
  background-size: 100%;
  background-repeat: no-repeat;
}

.bg-img {
  filter: blur(20px);
}

.bg-overlay {
  background-image: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%), radial-gradient(transparent, rgba(0,0,0,0.5) 100%);
}

#app .btn-outline-custom:not(.active):not(:active):not(:hover) {
  background-color: var(--theme-bg-outlined);
}

.parallax { /* avoid overlap with index parallax */
  z-index: 0;
}

/* navbar and footer glassmorphism */
nav.navbar {
  background: rgba(28, 28, 32, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease;
}
nav.navbar:hover {
  background: rgba(28, 28, 32, 0.95) !important;
}

footer {
  background: rgba(28, 28, 32, 0.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease;
}
footer:hover {
  background: rgba(28, 28, 32, 0.95) !important;
}