:root {    
            --font-family-header: 'Dela Gothic One', sans-serif;
            --font-family: 'Open Sans', sans-serif;
            --gradient-color-1: rgb(40, 100, 200);   /* Светло-синий/Голубой */
            --gradient-color-2: rgb(0, 70, 150);     /* Средне-синий */
            --gradient-color-3: rgb(0, 40, 100);
        }

/* Сброс стандартных отступов */
body {
    margin: 0;
    padding: 0;

}

/* Растягиваем canvas на весь экран */
#gradientCanvas {
    display: block;
    position: fixed; /* Фиксируем его как фон */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100; /* Помещаем его под весь контент */
}

        /* ==================================
        КРИТИЧЕСКИЕ СТИЛИ ДЛЯ CANVAS-ФОНА
        ================================== */
        #background-canvas {
            /* 1. Покрытие всего окна */
            position: fixed; /* Фиксируем относительно окна браузера */
            top: 0;
            left: 0;
            width: 100vw; /* 100% ширины viewport (окна) */
            height: 100vh; /* 100% высоты viewport (окна) */
    
            /* 2. Позиционирование под всем содержимым */
            z-index: -1; /* Устанавливаем самый низкий z-index */
    
            /* 3. Предотвращение взаимодействия */
            pointer-events: none; /* Гарантируем, что клики проходят сквозь него */
    
            /* 4. На всякий случай */
            display: block; 
        }


        /* ==================================
        СТИЛИЗАЦИЯ ШАПКИ (HEADER)
        ================================== */
        .main-header {
            background-color: transparent; 
            position: relative; 
            padding: 15px 0; 
            
        }

        .header-container {
            display: flex;
            justify-content: space-between; 
            align-items: center;
            width: 100%;
            margin: 0 auto; 
            padding: 0 20px; 
            box-sizing: border-box;
        }
        
        .main-header h1 {
            font-family: var(--font-family-header);
            font-size: 36px; 
            margin: 0;
            color: #ffffff; 
        }
        .site-nav a,
        .site-nav button {
            color: #fff;
            text-decoration: none;
            padding: 12px 22px; 
            border-radius: 25px; 
            font-weight: 600;
            transition: all 0.3s ease;

            background: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
            
        }

        .site-nav a:hover,
        .site-nav button:hover {
             opacity: 0.95;
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); 
        }

        /* Общие стили для кнопки, чтобы соответствовала стилю в шапке */
        .btn-target {
            color: #fff;
            text-decoration: none;
            padding: 12px 22px; 
            border-radius: 25px; 
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block; /* Для кнопки в тексте */
            background: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
            box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3); 
            border: none;
            cursor: pointer;
            font-family: var(--font-family);
            font-size: 16px;
        }

        .btn-target:hover {
             opacity: 0.95;
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); 
        }