:root {
    --color-bg: #0A0A0A;
    --color-text: #E2E2E2;
    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-border: #374151;
    --color-card-bg: rgb(255 255 255 / 5%);
    --color-card-border: rgb(255 255 255 / 10%);
    --color-nav-bg: rgb(10 10 10 / 80%);
    --color-modal-bg: rgb(0 0 0 / 80%);
    --radius-lg: 1rem;
    --blur-md: 10px;
}

@media (prefers-color-scheme: light) {
    :root {
        --color-bg: #F3F4F6; /* Сделаем фон чуть менее резким */
        --color-text: #111827;
        --color-primary: #1D4ED8; /* Более спокойный синий для акцентов */
        --color-primary-hover: #1E40AF; /* Затемнение при наведении */
        --color-border: #D1D5DB; /* Светлая граница для кнопок и элементов */
        --color-card-bg: rgb(255 255 255 / 80%); /* Карточки сделаем белыми и полупрозрачными */
        --color-card-border: #E5E7EB; /* Едва заметная рамка для карточек */
        --color-nav-bg: rgb(255 255 255 / 75%);
        --color-modal-bg: rgb(0 0 0 / 50%);
    }

    /* Дополнительно скорректируем цвет текста на кнопках */
    .cta-secondary {
        color: var(--color-text); /* Текст вторичной кнопки должен быть основным */
    }

    .cta-secondary:hover {
        background-color: #E5E7EB; /* Легкий фон при наведении */
        color: #111827;
    }

    .modal-content {
        background-color: #FFFFFF; /* Фон модального окна должен быть светлым */
        border: 1px solid #E5E7EB;
    }

    .close-button:hover, .close-button:focus {
        color: #000; /* Цвет крестика в модальном окне */
    }

    /* Навбар в светлой теме: читаемые ссылки и ховеры */
    .sticky-nav a { color: #1f2937 !important; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: color .2s ease, background-color .2s ease; text-decoration: none; }
    .sticky-nav a:hover { color: var(--color-primary) !important; background-color: rgba(29, 78, 216, 0.08); }
    .sticky-nav .text-white { color: var(--color-text) !important; }

    /* Карточки в светлой теме: тёмный текст на светлом фоне */
    .glass-card h3 { color: var(--color-text) !important; }
    .glass-card .text-white { color: var(--color-text) !important; }
    .glass-card p { color: #374151; }

    /* Светлый, ненавязчивый hero-градиент и контрастные тексты */
    .hero-gradient {
        background: radial-gradient(circle at top, rgba(59, 130, 246, 0.12) 0%, rgba(255, 255, 255, 0) 55%);
    }
    section#home .hero-title { color: #0f172a !important; text-shadow: none; }
    section#home p { color: #374151 !important; }

    /* Контрасты второго экрана */
    section#expertise h2 { color: #0f172a !important; }
    section#expertise p { color: #4b5563 !important; }

    /* Блок integrations — контрасты в светлой теме */
    section#integrations h2 { color: #0f172a !important; }
    section#integrations p { color: #4b5563 !important; }
    section#integrations .feature-card { background: rgba(255,255,255,0.92) !important; border: 1px solid #E5E7EB !important; }
    section#integrations .feature-card h4 { color: #111827 !important; }

    /* WhatsApp кнопки — тёплый зелёный фон при наведении */
    a[href^="https://wa.me/"]:hover { background-color: rgba(16, 185, 129, 0.15) !important; color: #065f46 !important; border-color: #10B981 !important; }

    /* Форма обратной связи — светлая тема */
    section#contact .glass-card { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid #E5E7EB !important; }
    section#contact label { color: #374151 !important; }
    section#contact input[type="text"],
    section#contact input[type="tel"],
    section#contact input[type="email"] { background-color: #ffffff !important; color: #111827 !important; border: 1px solid #D1D5DB !important; }
    section#contact .cta-secondary { color: #111827; }
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Inter, sans-serif;
}

.hero-gradient {
    background: radial-gradient(circle at top, rgb(13 37 63 / 50%) 0%, rgb(10 10 10 / 0%) 50%);
}

.hero-title {
    letter-spacing: -0.02em;
    line-height: 1.08;
    text-shadow: 0 1px 8px rgb(59 130 246 / 25%);
}

.cta-primary {
    background-color: var(--color-primary);
    color: #FFF;
    transition: background-color 0.3s ease;
}

.cta-primary:hover {
    background-color: var(--color-primary-hover);
}

.cta-secondary {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s ease;
}

.cta-secondary:hover {
    background-color: #374151;
}

.glass-card {
    backdrop-filter: blur(var(--blur-md));
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
}

.sticky-nav {
    backdrop-filter: blur(12px);
    background: var(--color-nav-bg);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Modal */
.modal {
    background-color: var(--color-modal-bg);
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.modal-content {
    background-color: #111827;
    border: 1px solid #374151;
    border-radius: var(--radius-lg);
    margin: 10% auto;
    max-width: 600px;
    padding: 2rem;
    position: relative;
    width: 80%;
}

.close-button {
    color: #aaa;
    cursor: pointer;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 1.5rem;
    top: 1rem;
}

.focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ensure notice bar overlays content even if Tailwind lacks z-60 */
[id="noticeBar"] {
    z-index: 60;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
    }
}

.close-button:hover, .close-button:focus {
    color: #fff;
}

/* FINAL light-mode overrides to unify buttons site-wide */
@media (prefers-color-scheme: light) {
    .cta-primary { background-color: var(--color-primary) !important; color: #fff !important; border: 1px solid #1D4ED8 !important; }
    .cta-primary:hover { background-color: var(--color-primary-hover) !important; }

    .cta-secondary { background-color: #ffffff !important; color: #111827 !important; border: 1px solid #D1D5DB !important; }
    .cta-secondary:hover { background-color: #F3F4F6 !important; color: #0f172a !important; border-color: #9CA3AF !important; }
    .cta-secondary:active { background-color: #E5E7EB !important; }
}