/* Podkreślenie w menu: hover + aktywna sekcja (.active ustawiane przez JS) */
.main-nav a{ position: relative; }

.main-nav a::before{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:2px;
  background:var(--brand);
  opacity:0;
  transform:scaleX(.6);
  transition:opacity .2s ease, transform .2s ease;
}

.main-nav a:hover::before,
.main-nav a.active::before{
  opacity:1;
  transform:scaleX(1);
}