:root {
    /* Virtuosity Blue Palette */
    --v-dark: #0A1931;       /* Темно-синий (почти черный) - Основа */
    --v-mid: #1B3A60;        /* Средний синий - Вторичный фон */
    --v-text: #E0F7FA;       /* Светло-голубой/белый - Основной текст */
    --v-primary: #00BCD4;    /* Яркий циан/голубой - Основной акцент */
    --v-accent: #29B6F6;     /* Светлый аква/голубой - Вторичный акцент/Границы */
    --v-muted: #80CBC4;      /* Приглушенный циан - Вторичный текст */

    /* Переназначение старых переменных (для совместимости с Tailwind классами в HTML) */
    --color-bg: var(--v-dark);
    --color-text: var(--v-text);
    --color1: var(--v-mid);
    --color2: var(--v-text);
    --color3: var(--v-primary);
    --color4: var(--v-accent);
    --color5: var(--v-muted);
}

.font-sans {
    font-family: 'Open Sans', sans-serif;
}
.font-serif {
    font-family: 'Montserrat', serif;
}

html {
    scroll-behavior: smooth;
}

body {
    /* Градиент синего и голубого */
    background: linear-gradient(135deg, var(--v-dark) 0%, var(--v-mid) 100%);
    color: var(--color-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Убедитесь, что градиент покрывает всю область прокрутки */
    min-height: 100vh;
    background-attachment: fixed; /* Для фиксированного градиента при скролле */
}

/* Изменено: для фона главной секции (картинка) */
.main-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
    filter: brightness(0.2); /* Сделано темнее, чтобы текст был контрастным */
}

/* Оригинальный класс parallax-bg-img теперь относится только к второстепенным секциям */
.parallax-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -10;
    filter: brightness(0.25) opacity(0.3); /* Немного темнее и прозрачнее, чтобы не мешать основному градиенту */
}

.decorative-line {
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--v-primary); /* Используем основной акцентный цвет */
    opacity: 0.8;
}

.decorative-shape {
    position: absolute;
    z-index: -5;
    background-color: var(--v-accent); /* Используем вторичный акцентный цвет */
    opacity: 0.3;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: all 0.5s ease-out;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateY(-100%);
    background-color: var(--v-dark); /* Используем самый темный синий */
}

#mobile-menu.is-open {
    transform: translateY(0);
}

#notification-popup {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 0.5s ease-in-out;
    z-index: 100;
    background-color: var(--v-primary); /* Яркий акцент для уведомлений */
    color: var(--v-dark);
}

#notification-popup.show {
    bottom: 30px;
}

@media (max-width: 768px) {
    .parallax-element {
        transform: translateY(0) !important;
    }
}

.btn {
    @apply inline-block px-8 py-3 text-sm font-medium tracking-wide rounded-full transition-all duration-300 ease-out;
}

.btn-primary {
    background-color: var(--v-primary);
    color: var(--v-dark);
    @apply hover:bg-v-accent hover:shadow-lg;
}
.btn-secondary {
    border: 2px solid var(--v-muted);
    color: var(--v-muted);
    @apply hover:bg-v-primary hover:text-v-dark;
}

#cookie-popup {
    background-color: var(--v-mid);
    color: var(--v-muted);
    backdrop-filter: blur(10px);
}

#cookie-popup.show {
    transform: translateY(0);
}

#cookie-popup.hide {
    transform: translateY(100%);
}

@media (max-width: 768px) {
    #cookie-popup {
        padding: 1rem;
    }

    #cookie-popup .flex {
        flex-direction: column;
        gap: 1rem;
    }

    #cookie-popup .flex-shrink-0 {
        width: 100%;
    }

    #cookie-popup .flex-shrink-0 .btn {
        flex: 1;
        text-align: center;
    }
}

#contact-notification {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}
#contact-notification.is-visible {
    opacity: 1;
    visibility: visible;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}
.faq-item.is-open .faq-answer {
    max-height: 500px;
}
.faq-question .faq-toggle {
    transition: transform 0.3s ease-out;
}
.faq-item.is-open .faq-question .faq-toggle {
    transform: rotate(45deg);
}