:where([class^="ri-"])::before { content: "\f3c2"; }
.hero-bg { 
  background-image: url('/assets/hero.jpg'); 
  position: relative;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.25);
  transition: background-color 0.3s ease;
}
.hero-bg > * {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .hero-bg::before {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
  }
}

html { scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 3px solid #3b82f6; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }