.category-btn {
    background: #000;                   /* 🔲 Чёрный фон кнопки — создаёт контраст и ощущение глубины */
    color: #007bff;                     /* 🔵 Цвет текста — ярко-синий (основной акцент на кнопке) */
    border: 1px solid #0000ff;          /* 🔷 Граница — синяя, подчёркивает границы кнопки */
    border-radius: 10px;                /* 🟦 Скругление углов — делает кнопку более мягкой и современной */
    padding: 10px 20px;                 /* 📏 Отступы внутри кнопки: 10px сверху/снизу и 20px по бокам */
    font-weight: 600;                   /* 🅱️ Полужирный текст для лучшей читаемости и акцента */
    text-shadow: none;                  /* 🚫 Убрано свечение текста, чтобы текст оставался чётким */
    box-shadow:                         /* ✨ Эффект подсветки — создаёт ощущение свечения кнопки */
        inset 0 0 6px #00ccff,          /* Внутреннее неоновое свечение голубым цветом */
        0 0 8px rgba(0, 204, 255, 0.2); /* Внешнее мягкое свечение, полупрозрачное */
    transition: 0.3s ease;              /* ⏳ Плавный переход всех анимируемых свойств за 0.3 секунды */
}



.category-btn:hover {
    background: #001828;               /* 🔵 При наведении — тёмно-синий фон с оттенком, сохраняет атмосферу */
    box-shadow:                        /* 💡 Усиление свечения при наведении */
        inset 0 0 16px #007bff,        /* Сильное внутреннее свечение синим цветом */
        0 0 25px #007bff,              /* Внешнее синее свечение */
        0 0 35px #007bff;              /* Ещё один уровень внешнего свечения — делает кнопку «светящейся» */
    transform: translateY(-1px);       /* 🔽 Немного приподнимает кнопку вверх — создаёт ощущение «нажатия» */
    color: #ffffff;                    /* ⚪ При наведении текст становится белым для лучшей читаемости */
}




.profession-btn {
    background: #000;               /* Фон кнопки — глубокий чёрный, как у категорий */
    color: #44944A;                /* Цвет текста — мягкий неоново-зелёный */
    border: 1px solid #44944A;     /* Граница — того же цвета, что и текст */
    border-radius: 10px;           /* Скругление углов — для плавного, аккуратного вида */
    padding: 10px 20px;            /* Отступы внутри кнопки — 10px сверху/снизу, 20px слева/справа */
    font-weight: 600;              /* Толщина текста — полужирный */
    box-shadow:                    /* Неоновое свечение кнопки */
        inset 0 0 4px #44944A,     /* Внутреннее лёгкое свечение */
        0 0 6px rgba(102, 255, 204, 0.25); /* Внешнее слабое неоновое свечение */
    transition: all 0.3s ease;     /* Плавность всех изменений */
    transition-delay: 0s;          /* Без задержки при убирании мышки */
}

/* Hover эффект — при наведении курсора */
.profession-btn:hover {
    background: #003322;           /* Чуть подсвеченный тёмно-зелёный фон */
    box-shadow:                    /* Усиленное свечение */
        inset 0 0 12px #44944A,    /* Внутреннее более яркое свечение */
        0 0 10px #44944A,          /* Внешнее мягкое свечение */
        0 0 15px #44944A;          /* Дополнительное внешнее неоновое свечение */
    transform: translateY(-1px);   /* Лёгкое "приподнимание" кнопки вверх */
    color: #ffffff;               /* Цвет текста становится белым для контраста */
    transition-delay: 0s; /* ⏱️ задержка начала свечения при наведении */
}


.section-title {
    color: #e0e0e0;        /* светлый серый, хорошо читаемый на тёмном фоне дубльдубль*/
    text-align: center;    /* выравнивание по центру дубльдубль*/
    font-size: 2rem;       /* размер шрифта дубль дубль*/
    font-weight: 700;      /* жирность шрифта дубль дубль*/
    margin-top: 2rem;      /* верхний отступ дубль дубль*/
    margin-bottom: 1rem;   /* нижний отступ дубль дубль*/
}


.review-title {
    color: #00cfff;                 /* Яркий неоново-голубой цвет текста */
    text-align: center;             /* Выравниваем заголовок по центру */
    margin-top: 2rem;               /* Отступ сверху — чтобы не слипалось с верхом страницы */
    margin-bottom: 1.5rem;          /* Отступ снизу — для воздуха перед следующим блоком */
    font-weight: 700;               /* Жирный текст — чтобы заголовок выделялся */
    text-shadow: 0 0 10px #00cfff;  /* Свечение вокруг текста — создаёт неоновый эффект */
    font-size: 2rem;                /* Размер заголовка — заметный, но не гигантский */
}


/* 🌟 Единый стиль заголовков категорий и разделов */
.section-title,
.neon-heading {
    color: #00ccff;                            /* Яркий голубой цвет */
    text-align: center;                        /* Центровка */
    margin-top: 1.5rem;                        /* Верхний отступ */
    margin-bottom: 0.5rem;                     /* Нижний отступ */
    font-size: 2rem;                           /* Размер шрифта */
    font-weight: 700;                          /* Жирный текст */
    text-shadow:                               /* Неоновое синее свечение */
        0 0 3px #007bff,
        0 0 10px rgba(0, 123, 255, 0.5),
        0 0 6px rgba(0, 123, 255, 0.3);
}


/* === 🟩 КНОПКА "Сравнение (N)" в навбаре === */
.compare-navbar-btn {
    background: #1c1f30;
    color: #44d444;
    border: 1px solid #44d444;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;           /* ⬆️ Толще кнопка по высоте и ширине */
    font-size: 15px;              /* 🔠 Чуть крупнее текст */
    text-decoration: none; /* ❌ убирает подчеркивание */
    box-shadow: inset 0 0 4px #44d444, 0 0 8px rgba(68, 212, 68, 0.3);
    transition: 0.3s ease;
}

/* ✨ Hover-эффект — неоновое зелёное свечение */
.compare-navbar-btn:hover {
    box-shadow: 0 0 10px #44d444, 0 0 20px #44d444;
    background-color: #44d444;
    color: #000;
}


/* === 🔴 Кнопка "Выйти" в неоновом стиле === */
.compare-navbar-btn-red {
    background: #1c1f30;
    color: #ff0033;
    border: 1px solid #ff0033;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #ff0033, 0 0 8px rgba(255, 0, 51, 0.3);
    transition: 0.3s ease;
}

.compare-navbar-btn-red:hover {
    box-shadow: 0 0 10px #ff0033, 0 0 20px #ff0033;
    background-color: #ff0033;
    color: #000;
}


/* === 🟩 Кнопка "Войти" в зелёном неоновом стиле === */
.compare-navbar-btn {
    background: #1c1f30;
    color: #44d444;
    border: 1px solid #44d444;
    font-weight: 500;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 15px;
    text-decoration: none;
    box-shadow: inset 0 0 4px #44d444, 0 0 8px rgba(68, 212, 68, 0.3);
    transition: 0.3s ease;
}

.compare-navbar-btn:hover {
    box-shadow: 0 0 10px #44d444, 0 0 20px #44d444;
    background-color: #44d444;
    color: #000;
}

/* === 🧱 БАЗОВЫЙ СТИЛЬ для всех неоновых кнопок === */
.neon-btn {
    /* 🎨 Настраиваемые переменные — переопределяются в HTML через style="..." */
    --btn-color: #44d444;                /* Основной цвет кнопки (граница + текст) */
    --btn-bg: transparent;               /* Фон по умолчанию (может быть прозрачным или цветным) */
    --btn-hover-bg: var(--btn-color);    /* Фон при наведении */
    --btn-text-color: var(--btn-color);  /* Цвет текста */
    --btn-radius: 12px;                  /* Скругление углов */
    --btn-padding: 8px 20px;             /* Отступы внутри кнопки */
    --btn-font-size: 16px;               /* Размер текста */

    background: var(--btn-bg);
    color: var(--btn-text-color);
    border: 1px solid var(--btn-color);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 4px var(--btn-color), 0 0 8px rgba(0, 0, 0, 0.2);
}

/* === 🌟 Поведение при наведении */
.neon-btn:hover {
    background-color: var(--btn-hover-bg);
    color: #000; /* Цвет текста при наведении */
    box-shadow: 0 0 10px var(--btn-color), 0 0 20px var(--btn-color);
}

/* Выравнивает содержимое по центру по вертикали */
.nav-item.align-center {
    display: flex;
    align-items: center;
}