html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Стили для активного пункта меню --- */

/* Активная ссылка в десктопном меню (шапка) */
.main-header nav a.active {
    color: #f97316; /* Ваш оранжевый цвет */
    font-weight: 600; /* font-semibold */
}

/* Активная ссылка в мобильном меню */
#mobile-menu nav a.active {
    background-color: #374151; /* Tailwind bg-gray-700 */
}

/* --- Дополнительные UI-улучшения --- */

/* Микро-эффект "нажатия" для кнопок. 
  Добавьте класс .btn-press к вашим кнопкам (<a> или <button>)
*/
.btn-press:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
}
/*
 * ===================================================
 * Стили для "Fade-in" (плавного появления при прокрутке)
 * ===================================================
 */

/* * Скрываем элементы по умолчанию. 
 * Они будут сдвинуты вниз (translateY(30px)) и невидимы (opacity: 0).
 */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Оптимизация для браузера */
}

/* * Когда JavaScript добавляет класс 'is-visible', 
 * элемент плавно "выплывает" на свое место.
 */
.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}