/* Подчёркивание пунктов меню — только для устройств с hover */
.menu-link {
  position: relative;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #3478AE 30%,
    #3478AE 70%,
    transparent 100%
  );
  transform: translateX(-50%);
  transition: width 0.3s ease;
  pointer-events: none;
}

/* Hover только на десктопах/ноутах, где есть мышь */
@media (hover: hover) and (pointer: fine) {
  .menu-link:hover::after {
    width: 100%;
  }

  .menu-link:hover .tn-atom {
    color: #3478AE !important;
  }
}

/* На мобильных отключаем hover-линию, чтобы Safari не залипал */
@media (hover: none), (pointer: coarse) {
  .menu-link::after {
    display: none;
  }

  .menu-link:hover .tn-atom {
    color: inherit !important;
  }
}