@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@700&display=swap');

/* Обновленные общие сбросы и базовые стили */
:root {
    --primary-color: #7F00FF; /* Насыщенный фиолетовый (Violet) */
    --primary-color-rgb: 127, 0, 255;
    --secondary-color: #C8A2C8; /* Светлый сиреневый (Lilac) */
    --secondary-color-rgb: 200, 162, 200;
    --accent-color: #DA70D6;    /* Орхидея (Orchid) */
    --accent-color-rgb: 218, 112, 214;
    /* Альтернативный акцент, если нужен более глубокий фиолетовый:
    --accent-color: #9370DB;  // MediumPurple
    --accent-color-rgb: 147, 112, 219;
    */

    --logo-dynamic-gradient: linear-gradient(120deg, 
        #EAE0FF 0%, /* Светло-лавандовый (почти белый) */
        var(--secondary-color) 25%, /* Светлый сиреневый (Lilac) */
        var(--accent-color) 50%,    /* Орхидея (Orchid) */
        var(--primary-color) 75%,   /* Насыщенный фиолетовый (Violet) */
        #EAE0FF 100% /* Светло-лавандовый (почти белый) */
    );

    --background-color: #0A001A; /* Очень темный фиолетово-пурпурный, для космической темы */
    --background-color-rgb: 10, 0, 26;
    --surface-color: #1A0A2E; /* Глубокий фиолетовый для поверхностей */
    --surface-color-rgb: 26, 10, 46;
    --border-color: rgba(var(--accent-color-rgb), 0.3); /* Границы с акцентным оттенком */
    
    --text-color: #EAE0FF; /* Светло-лавандовый для основного текста */
    --text-color-rgb: 234, 224, 255; 
    --text-light-color: #C0B0E0; /* Более приглушенный сиреневый для второстепенного текста */
    --text-heading-color: #FFFFFF; 
    --text-link-color: var(--accent-color);
    --text-link-hover-color: var(--primary-color);

    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 70%, var(--accent-color) 100%);
    --accent-gradient: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 60%, var(--secondary-color) 100%); 

    --body-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    --heading-font: 'Clash Display', system-ui, 'Inter', sans-serif; 

    --border-radius: 20px; /* Более футуристичное скругление */
    --border-radius-sm: 14px;
    --border-radius-lg: 28px;

    --shadow-sm: 0 4px 12px rgba(0,0,0,0.25);
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
    --shadow-lg: 0 18px 55px rgba(0,0,0,0.45);

    --shadow-glow-primary: 0 0 25px rgba(var(--primary-color-rgb), 0.35), 0 0 50px rgba(var(--primary-color-rgb), 0.2);
    --shadow-glow-accent: 0 0 25px rgba(var(--accent-color-rgb), 0.35), 0 0 50px rgba(var(--accent-color-rgb), 0.2);
    --shadow-card-hover: 0 12px 35px rgba(var(--secondary-color-rgb), 0.3); 

    --transition-ease: cubic-bezier(0.25, 0.8, 0.25, 1); /* Классический ease-out */
    --transition-speed: 0.35s;
    --transition-speed-fast: 0.2s;
    --transition-speed-slow: 0.6s;

    --container-width: 1360px; /* Немного шире контейнер */
    --container-padding: 35px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    overflow-y: auto;
    font-size: var(--base-font-size);
    /* height: 100%; */ /* Убрано для исправления двойной прокрутки */
    -webkit-tap-highlight-color: transparent;
    margin: 0; /* Явный сброс margin */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--background-color);
}

body {
    font-family: var(--body-font);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Возвращаем для правильного позиционирования футера */
    opacity: 0; 
    transition: opacity var(--transition-speed-slow) var(--transition-ease);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
}

body.page-loaded {
    opacity: 1;
}

header,
main,
footer,
section,
.container,
.section-padding,
.page-hero,
.dashboard-demo,
.roadmap-container,
.feedback-modal,
.preloader /* Прелоадер тоже должен быть над глобальным фоном */ {
    position: relative; 
    z-index: 1; 
}

a {
    color: var(--text-link-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease, filter var(--transition-speed-fast) ease;
}

a:hover {
    color: var(--text-link-hover-color);
    filter: brightness(1.15);
}

a.no-transition, 
a.no-transition:hover {
    transition: none !important;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    color: inherit; /* Наследование цвета для кнопок */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--text-heading-color);
    line-height: 1.3; 
    margin-bottom: 0.7em; 
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: clamp(2.7rem, 5.5vw, 4.2rem); 
}

h2 {
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
}

h3 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 600;
}

.highlight, .gradient-text {
    background: linear-gradient(120deg, var(--accent-color) 15%, var(--primary-color) 55%, var(--secondary-color) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section-padding {
    padding-top: clamp(90px, 15vh, 150px); 
    padding-bottom: clamp(90px, 15vh, 150px);
    position: relative;
}

.bg-light {
    /* background-color: rgba(var(--surface-color-rgb), 0.75); */ /* Убираем старый фон */
    background-color: rgba(var(--background-color-rgb), 0.4); /* Легкая подложка на основе основного фона */
    backdrop-filter: blur(15px) saturate(120%); /* Чуть меньше блюр и сатурация */
    /* border: 1px solid var(--border-color); */ /* Убираем рамку */
    border-top: 1px solid rgba(var(--accent-color-rgb), 0.15); /* Легкая верхняя граница для отделения */
    border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.15); /* Легкая нижняя граница */
    border-radius: var(--border-radius-lg); 
    margin-top: 40px; 
    margin-bottom: 40px;
    box-shadow: 0 0 40px rgba(var(--primary-color-rgb), 0.05); /* Очень легкая тень для глубины */
}

.text-center {
    text-align: center;
}

.section-title {
    margin-bottom: clamp(35px, 6vh, 65px); 
    position: relative;
}

.section-title-small {
    font-size: clamp(1.5rem, 3.2vw, 2.0rem); 
    font-weight: 600;
    margin-bottom: clamp(28px, 4.2vh, 45px);
}

.section-subtitle {
    font-size: clamp(1.05rem, 1.9vw, 1.25rem); 
    color: var(--text-light-color);
    max-width: 850px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(45px, 7vh, 80px);
    line-height: 1.85;
}

/* Обновленные стили кнопок */
.cta-button, .cta-button-secondary, .cta-button-outline, .cta-button-large {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap: 14px; /* Увеличил gap */
    font-family: var(--heading-font);
    font-weight: 600;
    text-decoration: none;
    padding: 18px 42px; /* Увеличил паддинги */
    border-radius: var(--border-radius); /* Используем новое скругление */
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    font-size: 1.1rem; /* Немного крупнее */
    letter-spacing: 0.06em;
    text-align: center;
    position: relative;
    overflow: hidden; /* Для ripple-эффекта */
    -webkit-backface-visibility: hidden; /* Для лучшей производительности анимаций */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0); /* Аппаратное ускорение */
    box-shadow: var(--shadow-sm);
}

.cta-button .button-icon, .cta-button-outline .button-icon {
    font-size: 1.3em; /* Иконки чуть больше */
    line-height: 1;
}

.cta-button {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: var(--shadow-glow-primary);
}

.cta-button::before { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
    opacity: 0;
    transition: opacity var(--transition-speed) var(--transition-ease);
    pointer-events: none;
    border-radius: var(--border-radius);
}

.cta-button:hover::before {
    opacity: 1;
}

.cta-button:hover {
    transform: translateY(-4px) scale(1.03); /* Более выраженный ховер */
    box-shadow: var(--shadow), var(--shadow-glow-primary);
    filter: brightness(1.1);
}

.cta-button-secondary {
    background: var(--accent-gradient);
    color: var(--background-color);
    box-shadow: var(--shadow-glow-accent);
}

.cta-button-secondary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--shadow), var(--shadow-glow-accent);
    filter: brightness(1.1);
}

.cta-button-outline {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: none;
}

.cta-button-outline:hover {
    background-color: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(var(--accent-color-rgb),0.3);
}

.cta-button-large {
    padding: 20px 48px; /* Еще больше */
    font-size: 1.15rem;
    letter-spacing: 0.07em;
}

.cta-button-large:hover {
    transform: translateY(-5px) scale(1.04);
}

/* Стили для header */
header {
    position: fixed; /* Фиксированный хедер */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Выше остального контента */
    padding: 20px 0;
    background-color: transparent; /* Изначально прозрачный */
    transition: background-color var(--transition-speed) var(--transition-ease), 
                box-shadow var(--transition-speed) var(--transition-ease), 
                padding var(--transition-speed) var(--transition-ease);
}

header.scrolled {
    background-color: rgba(var(--surface-color-rgb), 0.85); 
    backdrop-filter: blur(15px) saturate(120%);
    box-shadow: var(--shadow-soft);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

header nav {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between; /* Возвращаем space-between для правильного позиционирования */
}

.logo-container {
    flex: 1; /* Занимает доступное пространство */
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем логотип */
    transition: transform 0.8s var(--transition-ease), justify-content 0.8s var(--transition-ease); /* Плавная анимация */
    z-index: 1001;
}

.site-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Явный текстовый заголовок рядом с логотипом в хедере */
.site-title {
    margin-left: 14px;
    align-self: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-heading-color);
    letter-spacing: 0.02em;
    opacity: 0.9;
}

.logo-container.shifted {
    justify-content: flex-start; /* Сдвигаем влево при активном меню */
    transform: translateX(-50px); /* Дополнительно сдвигаем влево чтобы не заезжать на меню */
}

.menu-area {
    position: relative; 
    display: flex;
    align-items: center;
    z-index: 1002;
}

.desktop-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-weight: 500;
    color: var(--text-color);
    padding: 12px; 
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-speed-fast) ease, background-color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
    cursor: pointer;
    background: none;
    border: none;
    width: 48px;
    height: 48px;
}

.desktop-menu-trigger svg {
    transition: transform 0.3s var(--transition-ease);
    width: 24px;
    height: 24px;
}

.desktop-menu-trigger:hover,
.desktop-menu-trigger.active {
    color: var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.1);
    transform: scale(1.05);
}

.desktop-menu-trigger.active svg {
    transform: rotate(90deg);
}

/* Список меню - выезжает горизонтально слева от кнопки */
header nav ul#main-menu-list {
    position: absolute;
    top: 50%; 
    right: calc(100% + 15px); 
    transform: translateY(-50%); 
    background: none; 
    backdrop-filter: none; 
    box-shadow: none; 
    border: none; 
    border-radius: 0;
    padding: 0; 
    display: flex;
    flex-direction: row; 
    gap: 12px; 
    opacity: 0;
    visibility: hidden;
    /* Меню появляется СЛЕВА направо ОТНОСИТЕЛЬНО КНОПКИ, т.е. двигается вправо */
    transform: translateY(-50%) translateX(-30px) scale(0.9); 
    transition: opacity 0.6s var(--transition-ease), 
                visibility 0s linear 0.6s,
                transform 0.6s var(--transition-ease); 
    z-index: 1003;
    white-space: nowrap;
}

/* Скрыто на десктопе */
.menu-toggle {
    display: none;
    position: relative;
    width: 35px; 
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1005;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-heading-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Анимация гамбургера в крестик */
.menu-toggle.open span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

/* Hero Section */
.hero {
    padding-top: clamp(160px, 25vh, 280px); /* Больше отступ сверху */
    padding-bottom: clamp(100px, 18vh, 200px);
    min-height: 90vh; /* Минимальная высота для заполнения экрана */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* Для возможных фоновых элементов */
}

.hero .container {
    display: flex;
    flex-direction: column; /* По умолчанию, для мобильных можно будет изменить */
    align-items: center;
    text-align: center; /* Центрируем текст по умолчанию */
}

.hero-content {
    max-width: 900px; /* Максимальная ширина контента */
    margin-bottom: 50px;
}

.hero h1.display-title { 
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero .subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-light-color);
    margin-bottom: 40px;
    max-width: 750px; /* Шире подзаголовок */
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap; /* Для мобильных */
    justify-content: center;
    gap: 20px;
}

.hero-visual {
    width: 100%;
    max-width: 650px; /* Размер для Lottie */
    margin-top: 30px;
}

.visual-placeholder#hero-lottie-animation { 
    width: 100%;
    aspect-ratio: 1 / 1; /* Можно настроить под вашу анимацию */
    background-color: rgba(var(--surface-color-rgb), 0.3);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow-accent);
    border: 1px solid var(--border-color);
    overflow: hidden; /* Для Lottie */
}

.modern-shadow { 
    box-shadow: 
        0 2.8px 2.2px rgba(var(--secondary-color-rgb), 0.034),
        0 6.7px 5.3px rgba(var(--secondary-color-rgb), 0.048),
        0 12.5px 10px rgba(var(--secondary-color-rgb), 0.06),
        0 22.3px 17.9px rgba(var(--secondary-color-rgb), 0.072),
        0 41.8px 33.4px rgba(var(--secondary-color-rgb), 0.086),
        0 100px 80px rgba(var(--secondary-color-rgb), 0.12);
}

/* Стили для страниц с заголовком (напр., roadmap.html) */
.page-hero {
    padding-top: clamp(140px, 22vh, 240px);
    padding-bottom: clamp(70px, 12vh, 120px);
    text-align: center;
    background: linear-gradient(180deg, rgba(var(--surface-color-rgb),0.7) 0%, rgba(var(--surface-color-rgb),0.3) 70%, transparent 100%);
    border-bottom: 1px solid var(--border-color);
}

.page-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.0rem);
    margin-bottom: 20px;
}

.page-hero .subtitle {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--text-light-color);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}


/* Features Overview / About Section */
.features-overview .section-subtitle {
    margin-bottom: clamp(50px, 8vh, 90px);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Увеличил gap с 35px до 40px */
}

.feature-item {
    background: transparent;
    padding: 35px 30px; /* Увеличил паддинги */
    border-radius: var(--border-radius-lg);
    border: 1px solid transparent; /* Изначально прозрачная граница */
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    z-index: 1;
}

/* Убираем нумерацию */
/* .feature-item::before { 
    content: "0" counter(feature-counter);
    counter-increment: feature-counter;
    position: absolute;
    top: -10px;
    left: -5px;
    font-size: clamp(3.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(var(--primary-color-rgb), 0.06);
    z-index: -1;
    transition: color var(--transition-speed) var(--transition-ease);
    pointer-events: none;
} */

.feature-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(var(--secondary-color-rgb), 0.2), /* Усиленная тень */
                0 0 20px rgba(var(--accent-color-rgb), 0.25), /* Мягкое свечение */
                inset 0 0 0 1.5px rgba(var(--accent-color-rgb), 0.4); /* Внутренняя обводка */
    border-color: transparent; /* Убираем стандартную границу при ховере, если она была */
}

.feature-item:hover::before {
    opacity: 1; 
    transform: scale(1);
    /* animation-play-state: running; */ /* Убираем анимацию */
}

.feature-item-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по левому краю */
    text-align: left;
    height: 100%; /* Чтобы ссылка "Узнать больше" была внизу */
}

.feature-icon { 
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--accent-gradient);
    color: var(--background-color);
    margin-bottom: 25px;
    box-shadow: var(--shadow-glow-accent);
    transition: transform var(--transition-speed) var(--transition-ease);
}
.feature-icon svg {
    width: 32px;
    height: 32px;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

.feature-item h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--text-heading-color);
}

.feature-item p {
    color: var(--text-light-color);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1; /* Занимает доступное пространство, отодвигая ссылку вниз */
}

.feature-item .learn-more {
    font-weight: 600;
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* Прижимает ссылку к низу карточки */
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}

.feature-item .learn-more:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}
.feature-item .learn-more::after { /* Замена иконки на CSS стрелку */
    content: '\2192'; /* Код символа стрелки вправо */
    font-size: 1.2em;
    transition: transform 0.2s ease-out;
}

.feature-item .learn-more:hover::after {
    transform: translateX(3px);
}

/* How it Works Section (Timeline) */
.how-it-works .timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.how-it-works .timeline-content {
    background-color: rgba(var(--surface-color-rgb), 0.8);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
    border: 1px solid var(--border-color);
    text-align: center; /* Центрируем текст */
}

.how-it-works .timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.how-it-works .timeline-content h4 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.how-it-works .timeline-content p {
    font-size: 0.95rem;
    color: var(--text-light-color);
    line-height: 1.7;
}

.how-it-works .timeline-icon.step-icon {
    background: var(--accent-gradient);
    color: var(--background-color);
    box-shadow: var(--shadow-glow-accent);
}
.how-it-works .timeline-icon.step-icon svg {
    width: 26px; height: 26px; /* Убедимся, что SVG внутри иконки корректного размера */
}

.how-it-works .timeline::after { /* Линия таймлайна */
    background: var(--border-color);
    width: 3px;
}

/* Advantages Section */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px; /* Увеличил gap с 30px до 35px */
}

.advantage-card {
    background-color: rgba(var(--surface-color-rgb), 0.5);
    padding: 30px 25px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    text-align: left;
    transition: transform var(--transition-speed) var(--transition-ease), 
                box-shadow var(--transition-speed) var(--transition-ease);
    position: relative;
    overflow: hidden;
}

/* Убираем нумерацию */
/* .advantage-card::before {
    content: "0" counter(advantage-counter);
    counter-increment: advantage-counter;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(var(--primary-color-rgb), 0.05);
    z-index: 0;
    transition: color var(--transition-speed) var(--transition-ease);
    pointer-events: none;
} */

.advantage-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover), var(--shadow-glow-primary);
}

.advantage-card h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--text-heading-color);
}

.advantage-card p {
    font-size: 0.9rem;
    color: var(--text-light-color);
    line-height: 1.65;
}

/* CTA Section */
.cta-section {
    /* background: radial-gradient(ellipse at center, rgba(var(--primary-color-rgb), 0.15) 0%, transparent 70%),
                radial-gradient(ellipse at top left, rgba(var(--secondary-color-rgb), 0.1) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(var(--accent-color-rgb), 0.1) 0%, transparent 60%); */
    padding-top: clamp(80px, 12vh, 120px); 
    padding-bottom: clamp(80px, 12vh, 120px);
    /* border-top: 1px solid var(--border-color); */ /* Убираем рамки */
    /* border-bottom: 1px solid var(--border-color); */
    position: relative; /* Для псевдо-элемента подложки */
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--surface-color-rgb), 0.3); /* Очень легкая полупрозрачная подложка */
    backdrop-filter: blur(10px) saturate(110%);
    border-radius: var(--border-radius-lg); /* Можно добавить скругление если нужно */
    z-index: -1; /* Помещаем под контент секции */
    margin: 0 var(--container-padding); /* Ограничиваем ширину подложки контейнером */
    border: 1px solid rgba(var(--accent-color-rgb), 0.1);
}

.cta-section .section-title,
.cta-section .section-subtitle {
    color: #fff; /* Оставляем белый для лучшей читаемости на темном фоне */
}
.cta-section .section-subtitle {
    opacity: 0.9;
}
.cta-section .cta-button-large {
    background: #fff; /* Кнопка остается светлой для контраста */
    color: var(--primary-color); /* Текст кнопки - основной цвет темы */
    border-color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.cta-section .cta-button-large:hover {
    background: var(--accent-color); /* При наведении - акцентный цвет */
    color: var(--background-color); /* Текст становится темным */
    border-color: var(--accent-color);
    box-shadow: var(--shadow-glow-accent);
}

/* Footer */
footer {
    padding: clamp(50px, 8vh, 80px) 0 clamp(30px, 5vh, 50px) 0;
    background-color: rgba(var(--surface-color-rgb),0.4);
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Автоматический отступ сверху для прижатия к низу */
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

/* Общие стили логотипа */
.logo {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 2.4rem; /* Увеличиваем размер шрифта еще больше */
    background: var(--logo-dynamic-gradient); /* Новый градиент */
    background-size: 120% auto; /* Уменьшаем градиент для еще более быстрого эффекта */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 15px rgba(var(--primary-color-rgb), 0.4));
    letter-spacing: -0.02em;
    animation: logoGradientShift 0.8s ease-in-out infinite alternate; /* Анимация значительно быстрее */
}

.logo:hover {
    /* Можно оставить старый ховер или немного изменить, если нужно */
    background: var(--accent-gradient); 
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 180% auto; /* Согласовываем размер */
    transform: scale(1.05);
    text-shadow: 0 0 30px rgba(var(--accent-color-rgb), 0.5);
}

.footer-logo .logo {
    font-size: 1.6rem;
    margin-bottom: 10px;
    display: inline-block;
}
.footer-logo p {
    font-size: 0.9rem;
    color: var(--text-light-color);
    max-width: 280px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 60px;
}

.footer-links-column h4 {
    font-size: 1.1rem;
    color: var(--text-heading-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links-column ul li {
    margin-bottom: 12px;
}
.footer-links-column ul li a {
    color: var(--text-light-color);
    font-size: 0.95rem;
}
.footer-links-column ul li a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-light-color);
}

.social-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.social-links a {
    color: var(--text-light-color);
    display: inline-flex; /* Для ripple */
    align-items: center; /* Для ripple */
    justify-content: center; /* Для ripple */
    padding: 8px; /* Для ripple */
    border-radius: 50%; /* Для ripple */
    overflow: hidden; /* Для ripple */
    position: relative; /* Для ripple */
    transition: color var(--transition-speed-fast) ease, transform var(--transition-speed-fast) ease;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: scale(1.15);
}

.social-links a svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Preloader Styles */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity var(--transition-speed-slow) ease-in-out, visibility var(--transition-speed-slow) ease-in-out;
    visibility: visible;
}
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.preloader-content {
    text-align: center;
}
.preloader-star {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: var(--primary-color);
    border-right-color: var(--accent-color);
    animation: spin 1s linear infinite;
}
.preloader-text {
    font-size: 1.2rem;
    color: var(--text-color);
    font-family: var(--heading-font);
    letter-spacing: 0.05em;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: rgba(var(--accent-color-rgb), 0.15);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
    z-index: 999;
    backdrop-filter: blur(5px);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    background-color: rgba(var(--accent-color-rgb), 0.3);
    transform: scale(1.1);
}
.back-to-top svg {
    width: 24px;
    height: 24px;
    stroke: var(--accent-color);
}

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 1001; /* Выше хедера */
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    background: var(--accent-gradient);
    width: 0%;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    transition: width 0.1s linear; /* Плавность для прогресс бара */
}


/* Дополнительные стили для hover-эффектов на ссылках навигации и карточках */


.glow-border-hover {
    position: relative;
    transition: box-shadow var(--transition-speed) var(--transition-ease);
}

.glow-border-hover:hover {
    box-shadow: var(--shadow-glow-primary); /* Общее свечение для хедера/футера */
}




/* ---------- Mobile Styles ---------- */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }
    .hero-content {
        margin-bottom: 40px;
    }
    .visual-placeholder#hero-lottie-animation {
        max-width: 500px;
        margin: 0 auto;
    }
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    .advantages-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 25px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
        gap: 30px;
    }
    .footer-logo {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    /* Уменьшаем отступы для секций на мобильных */
    .section-padding {
        padding-top: clamp(35px, 6vh, 70px); /* Еще сильнее уменьшил отступы */
        padding-bottom: clamp(35px, 6vh, 70px);
    }

    /* Адаптация главного экрана */
    .hero {
        padding-top: clamp(110px, 20vh, 180px); /* Меньше отступ сверху */
        padding-bottom: clamp(60px, 15vh, 120px);
    }
    
    .hero h1.display-title {
        font-size: clamp(1.4rem, 5vw, 2.0rem) !important; /* Еще агрессивнее уменьшаем шрифт, уменьшил max */
        line-height: 1.25 !important; 
        word-break: break-all !important;
        word-wrap: break-word !important; 
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important;
        overflow-wrap: break-word !important; 
        -webkit-font-smoothing: subpixel-antialiased !important; /* Может помочь с рендерингом */
    }

    .hero .subtitle {
        font-size: clamp(0.8rem, 3vw, 1rem); /* Меньше шрифт подзаголовка */
        max-width: 100%; /* Полная ширина */
        margin-bottom: clamp(18px, 3vh, 30px);
    }
    
    /* Адаптация меню - сильно переработана */
    header {
        padding: 12px 0 !important; /* Принудительное уменьшение отступов хедера */
    }

    header.scrolled {
        padding: 8px 0 !important; /* И для проскролленного хедера */
    }

    
    .logo {
        font-size: clamp(1.8rem, 4.5vw, 2.2rem) !important; /* Увеличим немного и используем clamp для адаптивности */
        max-width: 280px !important; /* Увеличим немного максимальную ширину, если она была слишком мала */
    }
    
    /* Мобильная кнопка меню */
    .menu-toggle {
        display: flex !important;
        position: fixed !important;
        right: 15px !important;
        top: 15px !important;
        transform: none !important;
        width: 38px !important; 
        height: 38px !important;
        padding: 8px !important;
        z-index: 1005 !important;
        background-color: rgba(var(--surface-color-rgb), 0.7) !important;
        border-radius: var(--border-radius-sm) !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
        box-sizing: border-box !important;
    }
    
    .menu-toggle span {
        width: 100% !important;
        height: 2.5px !important;
        margin: 2.5px 0 !important;
        background-color: var(--text-heading-color) !important;
        box-sizing: border-box !important;
    }

    .menu-toggle.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
    }
    .menu-toggle.open span:nth-child(2) {
        opacity: 0 !important;
    }
    .menu-toggle.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
    }
    
    /* Скрываем десктопный триггер меню */
    .desktop-menu-trigger {
        display: none !important; 
    }
    
    /* Мобильное меню */
    header nav ul#main-menu-list {
        display: flex !important; /* Явно указываем flex */
        flex-direction: row !important;
        align-items: center !important;
        /* justify-content: center !important; */ /* Убираем центрирование, чтобы прокрутка начиналась с первого элемента */
        justify-content: flex-start !important; /* Выравнивание по левому краю для корректной прокрутки */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; 
        right: 0 !important;
        width: 100% !important; /* Ширина контейнера - 100% экрана */
        height: auto !important;
        min-height: 60px;
        background-color: rgba(10, 0, 26, 0.97) !important;
        backdrop-filter: blur(18px) saturate(160%) !important;
        padding: 15px !important; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important; 
        border-bottom: 2px solid var(--primary-color) !important;
        
        opacity: 0 !important; 
        transform: translateY(-120%) !important;
        visibility: hidden !important;
        transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1) !important;
        
        overflow-x: auto !important; /* Разрешаем горизонтальную прокрутку */
        overflow-y: hidden !important; /* Запрещаем вертикальную */
        white-space: nowrap !important; /* Гарантируем, что элементы не переносятся */
        -webkit-overflow-scrolling: touch !important; /* Плавная прокрутка на iOS */
    }
    
    header nav ul#main-menu-list.active {
        opacity: 1 !important; 
        visibility: visible !important; 
        transform: translateY(-50%) translateX(0) scale(1) !important;
        transition-delay: 0s !important;
    }
    
    /* Пункты мобильного меню - ОБНОВЛЕНО для немедленного отображения */
    header nav ul#main-menu-list li {
        display: inline-flex !important; /* Чтобы элементы выстраивались в ряд и не сжимались */
        /* или flex: 0 0 auto !important; если display: flex для ul */
        align-items: center; /* Вертикальное выравнивание для inline-flex */
        justify-content: center; /* Горизонтальное выравнивание для inline-flex */
        margin: 0 8px !important; 
        padding: 0 !important;
        opacity: 1 !important; 
        transform: translateX(0) scale(1) !important; 
        visibility: visible !important; 
        transition: none !important;
        flex-shrink: 0 !important; /* Запрещаем сжатие элемента */
        box-sizing: border-box !important;
        text-align: center !important;
        /* width: auto !important; - это свойство может быть избыточным с inline-flex или flex-shrink: 0 */
    }
    
    /* Это правило становится избыточным, если li всегда видимы, но оставим для ясности */
    header nav ul#main-menu-list.active li {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) scale(1) !important;
        transition-delay: 0s !important;
    }

    /* Убираем анимационные задержки для мобильного меню */
    header nav ul#main-menu-list.active li:nth-child(1),
    header nav ul#main-menu-list.active li:nth-child(2),
    header nav ul#main-menu-list.active li:nth-child(3),
    header nav ul#main-menu-list.active li:nth-child(4),
    header nav ul#main-menu-list.active li:nth-child(5),
    header nav ul#main-menu-list.active li:nth-child(6) {
        transition-delay: 0s !important;
    }
    
    /* Ссылки мобильного меню */
    header nav ul#main-menu-list li {
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
    }

    header nav ul#main-menu-list li a {
        padding: 10px 15px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: block !important;
        border: none !important;
        border-radius: var(--border-radius-sm) !important;
        background-color: transparent !important;
        color: var(--text-heading-color) !important;
        white-space: nowrap !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    header nav ul#main-menu-list li:hover,
    header nav ul#main-menu-list li:active,
    header nav ul#main-menu-list li:focus {
        background-color: transparent !important; /* Фон при наведении тоже убираем */
        color: var(--accent-color) !important; /* Меняем цвет текста при наведении */
        transform: scale(1.05) !important;
    }

    /* Скрытие логотипа при активном меню */
    .logo-container.logo-hidden-on-mobile-menu .logo {
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
    }

@media (max-width: 380px) {

    /* Для самых маленьких экранов можно еще уменьшить шрифт меню, если необходимо */
    header nav ul#main-menu-list li {
        height: 50px !important;
    }

    header nav ul#main-menu-list li a {
        padding: 8px 12px !important; /* Корректируем паддинги */
        font-size: 0.9rem !important;
    }

    header nav ul#main-menu-list {
        min-height: 50px;
        padding: 10px !important;
    }

}

/* Специальный класс для разделения длинных слов в заголовках */
.word-break-title {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Ripple Effect for Buttons */
.ripple-button {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0); /* for better performance on mobile */
}

.ripple-button .ripple {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.7s ease-out;
    pointer-events: none; /* Important */
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Cosmic Text Animation */
.cosmic-animate-text {
    display: inline-block; /* or block */
    position: relative;
    color: transparent; /* Hide original text */
    -webkit-background-clip: text;
    background-clip: text;
    /* Используем новый градиент и для этого класса, если он применяется к лого */
    background-image: var(--logo-dynamic-gradient);
    animation: cosmic-text-flow 2s ease-in-out infinite alternate, cosmic-text-reveal 1.5s ease-out forwards; /* Анимация потока быстрее */
    background-size: 180% 100%; /* Градиент короче */
    opacity: 0; /* Start hidden for reveal animation */
}

.cosmic-animate-text[data-text]::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: transparent; /* This will be clipped by the gradient */
    z-index: -1; /* Behind the gradient */
    white-space: nowrap; /* Prevent wrapping if text is long */
}

@keyframes cosmic-text-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes cosmic-text-reveal {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.gradient-text.cosmic-animate-text {
    /* Ensures gradient-text overrides the default cosmic-animate-text gradient */
    background-image: linear-gradient(120deg, var(--accent-color) 15%, var(--primary-color) 55%, var(--secondary-color) 95%);
}

/* Typewriter Text Effect for Preloader */
.typewriter-text-effect {
    display: inline-block;
    overflow: hidden; 
    white-space: nowrap; 
    border-right: .10em solid var(--accent-color); /* Курсор */
    animation: 
        typing 2s steps(30, end) forwards, 
        blink-caret .75s step-end infinite;
    opacity: 0; /* Start hidden */
    animation-delay: 0.3s; /* Delay before typing starts */
}

@keyframes typing {
    from { width: 0; opacity: 1; }
    to { width: 100%; opacity: 1; }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--accent-color); }
}

/* Arrow animation for learn-more links */
.learn-more.arrow-animation::after {
    content: '\2192'; /* → */
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 0.25s var(--transition-ease);
}

.learn-more.arrow-animation:hover::after {
    transform: translateX(6px);
}

/* Ensure SVG icons in feature items are correctly sized */
.feature-icon svg {
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
}

/* Ensure SVG icons in timeline items are correctly sized */
.how-it-works .timeline-icon.step-icon svg {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
}

/* Fix for menu toggle on smaller screens if using with ripple */
.menu-toggle.ripple-button {
    padding: 8px; /* Ensure some padding for ripple to be visible */
    border-radius: var(--border-radius-sm);
}

.section-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.section-header-centered .section-title {
    margin-bottom: 1rem;
    text-align: center;
}

.section-header-centered .section-subtitle {
    max-width: 750px; /* Ограничиваем ширину подзаголовка для лучшей читаемости */
    margin-left: auto;
    margin-right: auto;
}

/* Стили для отдельных элементов секций (если они не глобальные) */
.features-overview .section-subtitle { /* Если есть специфичный стиль для подзаголовка в features */
    margin-bottom: clamp(50px, 8vh, 90px);
}

/* Основной контейнер контента */
main {
    flex: 1; /* Занимает все доступное пространство между header и footer */
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden; /* Предотвращаем горизонтальную прокрутку */
}

/* Исправление подвала на главной странице уже в основных стилях body */

/* Анимация градиента логотипа */
@keyframes logoGradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; } /* Быстрее достигает другого края */
    50% { background-position: 0% 50%; } /* Быстрее возвращается */
    75% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Custom scrollbar for the site */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--surface-color-rgb), 0.2);
}

::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
    border: 2px solid var(--background-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* Custom override to show header menu on active click - moved to global styles */

/* Скрыто на десктопе */
}

/* ДЕСКТОПНЫЕ стили для активного меню - вынесены за пределы медиа-запроса */
header nav ul#main-menu-list.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    transition-delay: 0s !important;
}

header nav ul#main-menu-list.active li {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1) !important;
    transition-delay: 0s !important;
}

header nav ul#main-menu-list li {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) scale(1);
    transition: opacity 0.4s var(--transition-ease),
                transform 0.4s var(--transition-ease);
}

/* Анимация появления пунктов меню при активации */
header nav ul#main-menu-list.active li:nth-child(1) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

header nav ul#main-menu-list.active li:nth-child(2) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

header nav ul#main-menu-list.active li:nth-child(3) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

header nav ul#main-menu-list.active li:nth-child(4) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

header nav ul#main-menu-list.active li:nth-child(5) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

header nav ul#main-menu-list.active li:nth-child(6) {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

/* ДЕСКТОПНЫЕ стили для ссылок меню */
header nav ul#main-menu-list li {
    position: relative;
    height: 48px;
    display: flex;
    align-items: center;
}

header nav ul#main-menu-list li a {
    font-family: var(--body-font);
    font-weight: 500;
    color: var(--text-color);
    padding: 12px 20px;
    border-radius: var(--border-radius-sm);
    position: relative;
    overflow: hidden;
    display: block;
    transition: color 0.4s ease, background-color 0.4s ease, transform 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    background: none;
    backdrop-filter: none;
    border: none;
    width: 100%;
}

header nav ul#main-menu-list li::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gradient);
    transition: width 0.4s var(--transition-ease);
    border-radius: 1px;
}

header nav ul#main-menu-list li:hover::after,
header nav ul#main-menu-list li.active::after {
    width: 80%;
}