/* =========================================
   1. Сброс стилей и переменные
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #030005;
    --accent-orange: #f03c02;
    --accent-hover: #ff5e29;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --glass-bg: rgba(15, 15, 15, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background-color: #fff; /* Цвет на случай, если картинка долго грузится */
    color: var(--text-main);
    overflow: hidden;
}

/* =========================================
   2. Прелоадер (Security Check)
   ========================================= */
#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Кроссбраузерный переход */
    -webkit-transition: opacity 0.8s ease, visibility 0.8s ease;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader-content {
    text-align: center;
    /* Защита текста от прилипания к краям на маленьких телефонах */
    padding: 0 20px; 
    box-sizing: border-box;
}

.loader-content p {
    margin-top: 25px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    /* Кроссбраузерная анимация текста */
    -webkit-animation: pulseText 1.5s infinite;
    animation: pulseText 1.5s infinite;
}

/* === НОВЫЙ ГРАДИЕНТНЫЙ СПИННЕР === */
.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    
    /* Конусный градиент: от прозрачного -> розовый -> сиреневый */
    background: -webkit-conic-gradient(from 0deg, transparent 10%, #ff00cc 40%, #8288dd 100%);
    background: conic-gradient(from 0deg, transparent 10%, #ff00cc 40%, #8288dd 100%);
    
    /* Вырезаем центр (3px - это толщина полосы), работает на iOS и Android */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
    
    /* Кроссбраузерная анимация вращения */
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/* =========================================
   КЛЮЧИ АНИМАЦИИ ДЛЯ ПРЕЛОАДЕРА 
   (Заменяют ваши старые @keyframes)
   ========================================= */
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}

@-webkit-keyframes pulseText { 
    0%, 100% { opacity: 0.5; } 
    50% { opacity: 1; } 
}
@keyframes pulseText { 
    0%, 100% { opacity: 0.5; } 
    50% { opacity: 1; } 
}

/* =========================================
   3. Основная карточка (Glassmorphism)
   ========================================= */
.gateway-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 40px 20px 100px 20px; /* Отступ снизу для футера */
    background-color: #44494f; 
    /* 2. Используем background-image вместо сокращенного background, 
       чтобы не сбросить цвет выше */
    background-image: url('../img/dnex-bg.webp'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}


.glass-panel {
    /* 1. Делаем фон более прозрачным и добавляем диагональный блик */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    
    /* 2. Усиливаем размытие фона для эффекта глубины */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    /* 3. Тонкая светлая граница (эффект среза стекла) */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* 4. Внутреннее свечение (inset) создает эффект "толщины" стеклянной панели */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4), 
        inset 0 0 20px rgba(255, 255, 255, 0.05);

    /* Остальные ваши настройки без изменений */
    border-radius: 20px; /* Сделал чуть более скругленным для мягкости */
    padding: 60px 40px;
    text-align: center;
    transform: translateY(30px);
    opacity: 0;
    animation: fadeUpIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
    max-width: 650px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* =========================================
   4. Типографика
   ========================================= */
.h1-icon {
    height: 75px;
    width: auto;
    flex-shrink: 0;
    display: block;
    filter: none;
}

.brand-header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
    font-size: 42px;
}

.brand-header h1 span:first-child {
    /* Убрали flex: 1, чтобы контейнер не растягивался */
    padding-right: 25px; /* Ваш идеальный отступ от логотипа слева */
    color: #8288dd;
    font-weight: 700;
}

/* Цвет для MEDIA */
.media-color {
    /* Убрали flex: 1, чтобы контейнер не растягивался */
    padding-left: 25px; /* Ваш идеальный отступ от логотипа справа */
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    letter-spacing: 12px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    font-size: 36px;
    
    /* ИСПРАВЛЕНО: было margin-left, нужно margin-right, 
       чтобы компенсировать пустоту после буквы A */
    margin-right: -12px; 
}

/* Подпись digital technologies */
.subtitle {
    margin-top: 30px !important; /* ОПУСКАЕМ ПОНИЖЕ (увеличь цифру, если надо еще ниже) */
    font-family: 'Comfortaa';
    font-weight: 300;
    font-size: 20px;
    color: #a0a0a0;           /* Серый цвет как на фото */
    letter-spacing: 4px;      /* Разрядка для подписи */
    text-align: center;
    opacity: 0.8;
}

/* =========================================
   5. Кнопки роутера
   ========================================= */
.routing-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
	flex-wrap: wrap; 
    margin-top: 45px; 
}

.btn-outline {
    font-family: 'Comfortaa', cursive; /* Тот самый шрифт */
    display: inline-block;
    padding: 10px 25px;   /* Уменьшили отступы (сделали не конскими) */
    color: var(--text-main);
    text-decoration: none;
    font-size: 14px;      /* Размер текста */
    font-weight: 400;
    border: 1px solid #8288dd;
	border-radius: 7px;
    background: transparent;
    transition: all 0.3s ease;
    
    /* ГЛАВНОЕ: отключаем принудительные заглавные буквы */
    text-transform: none !important;
	white-space: nowrap;
}


.btn-outline:hover {
    background: transparent;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(240, 60, 2, 0.3);
	border: 1px solid #CF10EA;
	border-radius: 7px;
    transform: translateY(-1px);
}
/* =========================================
   6. Футер
   ========================================= */
#footer {
    font-family: system-ui;
    position: fixed;
    text-align: center; 
    bottom: 0;
    padding: 0px;
    /* Изменил фон футера на темно-бирюзовый */
    background: #303338;
    color: #fff;
    font-size: small;
    width: 100%;
}

/* =========================================
   7. Анимации и Адаптивность
   ========================================= */

/* Эту анимацию ОСТАВЛЯЕМ — она отвечает за плавное появление главной карточки */
@keyframes fadeUpIn { 
    to { opacity: 1; transform: translateY(0); } 
}

/* Этот блок ОСТАВЛЯЕМ — это главная адаптивность для мобильных телефонов (уменьшает шрифты и отступы) */
@media (max-width: 768px) {
    .glass-panel {
        padding: 40px 20px;
    }
    .brand-header h1 {
        font-size: 28px;
    }
}


/* =========================================
   7. КРОССБРАУЗЕРНОСТЬ И МОБИЛЬНЫЕ (Адаптация)
   ========================================= */
@keyframes fadeUpIn { 
    to { opacity: 1; transform: translateY(0); } 
}

/* Планшеты и телефоны */
@media (max-width: 768px) {
    .glass-panel {
        padding: 40px 20px;
        margin: 10px;
    }
    
    .brand-header h1 {
        font-size: 30px; /* Уменьшаем основной шрифт */
    }

    .media-color {
        font-size: 26px; /* Уменьшаем слово MEDIA */
        letter-spacing: 6px; /* Сужаем разрядку, чтобы влезло */
        padding-left: 10px;
    }

    .brand-header h1 span:first-child {
        padding-right: 10px;
    }

    .h1-icon {
        height: 40px; /* Уменьшаем логотип */
    }

    .subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .routing-actions {
        gap: 10px;
    }

    .btn-outline {
        padding: 10px 20px;
        font-size: 13px;
        flex: 1 1 40%; /* Кнопки занимают по пол-экрана на мобильном */
        max-width: 150px;
    }
}

/* Совсем маленькие телефоны (iPhone SE и т.д.) */
@media (max-width: 380px) {
    .brand-header h1 {
        font-size: 24px;
    }
    .media-color {
        font-size: 20px;
        letter-spacing: 4px;
    }
    .btn-outline {
        flex: 1 1 100%; /* Кнопки в одну колонку, если экран совсем узкий */
        max-width: 100%;
    }
}