:root {
    --white: #dbdbdb;
    --black: #1b1821;
    --shade: #353535;
    --accent: #4CAF50; /* Цвет акцента для анимаций */
}

/* Основной фон с градиентной анимацией */
body, html {
    background: linear-gradient(135deg, var(--black), var(--shade));
    background-size: 400% 400%;
    animation: gradientBackground 15s ease infinite;
}

@keyframes gradientBackground {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* Стили для карточек и элементов */
.product-card, .server-card {
    background: var(--black);
    border: 2px solid var(--shade);
    border-radius: 8px;
    padding: 20px;
    margin: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

/* Анимация появления элементов */
.fade-in {
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Стили для кнопок */
button {
    background: var(--shade);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

button:hover {
    background: var(--accent);
    color: var(--black);
}

/* Стили для текста с переливающейся анимацией */
.text-glow {
    color: var(--white);
    text-shadow: 
        0 0 10px var(--accent),
        0 0 20px var(--accent);
    animation: glow 1.5s ease-in-out infinite;
}

@keyframes glow {
    0% { text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); }
    50% { text-shadow: 0 0 30px var(--accent), 0 0 40px var(--accent); }
    100% { text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); }
}

/* Общие стили для форм и модальных окон */
.form-control, .modal-content, .bg-soft {
    background-color: var(--black);
    border: 2px solid var(--shade);
    border-radius: 6px;
    padding: 12px;
}

input:focus {
    outline: none;
    box-shadow: 0 0 10px var(--accent);
}