@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-page: #F8F9FB;
    --color-dark: #1E1B2E;
    --color-dark-alt: #151322;
    --text-main: #111827;
    --text-muted: #6B7280;
    --radius-bento: 32px;
    
    /* Цветовая палитра блоков Bento */
    --color-courses: linear-gradient(135deg, #E2E5FA 0%, #D0D5F7 100%);
    --color-crypto: #E6E9FA;
    --color-moex: #EDE6FA;
    --color-funding: #EAEBED;
}

body {
    background-color: var(--bg-page);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* Шапка */
.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Делим шапку на 3 равные зоны */
    align-items: center;
    padding: 24px 50px;
}

.logo {
    display: flex;
    flex-direction: row; /* Жестко указываем направление в одну линию */
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    justify-self: start;
    color: var(--text-main);
    white-space: nowrap; /* Строго запрещаем перенос текста на новую строку */
}

.logo-img {
    height: 36px;
    width: 36px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0; /* Картинка никогда не будет сплющиваться */
}

.navigation {
    display: flex;
    gap: 32px;
    justify-self: center; /* Меню встает строго по центру всей страницы */
}

.navigation a {
    text-decoration: none;
    color: var(--text-muted); /* Исходный серый цвет #6B7280 */
    font-weight: 500;         /* Исходная полужирная насыщенность */
    font-size: 0.95rem;       /* Исходный размер шрифта */
    transition: color 0.2s ease;
}

.navigation a:hover, .navigation a.active {
    color: var(--text-main);  /* При наведении цвет становится темным #111827 */
}

.auth-block {
    justify-self: end; /* Кнопка "Войти" прижимается к правому краю */
}

/* Кнопки */
.btn {
    padding: 12px 28px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    display: inline-block;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-login {
    background-color: var(--color-dark);
    color: #fff;
}

.btn-primary {
    background-color: #2563EB; /* Яркий акцентный синий */
    color: #fff;
}

.btn-primary:hover {
    background-color: #1D4ED8;
    transform: translateY(-2px);
}

.btn-outline-light {
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    text-align: center;
}

/* =========================================
   НОВАЯ КАРУСЕЛЬ БАННЕРОВ
========================================= */
.hero-ad-section {
    padding: 0 50px 30px;
}

.carousel-container {
    position: relative;
    height: 480px;
    border-radius: var(--radius-bento);
    overflow: hidden;
    background-color: var(--color-dark); /* Резервный фон */
}

/* =========================================
   КАРУСЕЛЬ БАННЕРОВ (FINAL CORE FIX)
========================================= */
.hero-ad-section {
    padding: 0 50px 30px;
}

.carousel-container {
    position: relative;
    height: 480px;
    border-radius: 32px;
    overflow: hidden;
    background-color: #0f172a;
}

.carousel-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none; /* Прячем все слайды */
    align-items: center;
    padding: 60px;
    box-sizing: border-box;
    z-index: 1;
}

.carousel-slide.active {
    display: flex; /* Показываем только активный */
}

/* ФОНОВЫЙ СЛОЙ */
.slide-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2; /* Самый низ */
}

.slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.7);
    z-index: -1; /* Над фоном, но под текстом */
}

.ad-content {
    position: relative;
    z-index: 100; /* Гарантированно сверху */
    max-width: 650px;
    color: #ffffff !important;
}

.ad-tag {
    display: inline-block;
    background: #2563eb;
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.ad-content h1 {
    font-size: 3.2rem;
    line-height: 1.1;
    margin: 0 0 20px 0;
    color: #ffffff !important;
    font-weight: 800;
}

.ad-content p {
    font-size: 1.15rem;
    color: #ffffff !important;
    margin-bottom: 35px;
    line-height: 1.5;
}

/* Навигация (те самые 5 линий) */
.carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 60px;
    z-index: 200;
    display: flex;
    gap: 12px;
}

.dot {
    width: 35px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
}

.dot.active {
    background-color: #2563eb;
    width: 60px;
}

/* Точки навигации */
.carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 60px;
    z-index: 20;
    display: flex;
    gap: 12px;
}

.dot {
    width: 35px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background-color: #2563eb;
    width: 60px;
}

.ad-content h1 {
    font-size: 3.2rem;
    line-height: 1.15;
    margin: 20px 0;
    letter-spacing: -1px;
    color: #ffffff;
}

.ad-content p {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 35px;
    line-height: 1.5;
}

/* Полоски навигации карусели */
.carousel-indicators {
    position: absolute;
    bottom: 40px;
    left: 60px;
    z-index: 3;
    display: flex;
    gap: 12px;
}

.dot {
    width: 35px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.4s ease, width 0.4s ease;
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.dot.active {
    background-color: #2563EB;
    width: 60px;
}


/* =========================================
   ОБНОВЛЕННАЯ СЕТКА BENTO (PREMIUM 3D STYLE)
========================================= */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 30px;
    padding: 0 50px;
}

.bento-card {
    text-decoration: none;
    border-radius: var(--radius-bento);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
}

.bento-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    transition: transform 0.8s ease, opacity 0.5s ease;
    z-index: 0;
}

.bento-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.bento-card:hover::after {
    transform: scale(1.1);
    opacity: 0.25;
}

.bento-card > * {
    position: relative;
    z-index: 2;
}

/* Специфические стили для карточек */

/* 1. КУРСЫ (Light Abstract) */
.card-courses {
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    flex-direction: row !important;
    align-items: center;
}
.card-courses::after {
    background-image: url('https://images.unsplash.com/photo-1633167606207-d840b5070fc2?q=80&w=1000&auto=format&fit=crop');
    opacity: 0.4;
}

/* 2. КРИПТО (Neon Cyber) */
.card-crypto {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
    color: #fff !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}
.card-crypto::after {
    background-image: url('https://images.unsplash.com/photo-1639762681485-074b7f938ba0?q=80&w=1000&auto=format&fit=crop');
    opacity: 0.2;
}
.card-crypto:hover {
    box-shadow: 0 30px 60px rgba(56, 189, 248, 0.2);
}

/* 3. МОЕКС (Professional Blue) */
.card-moex {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(49, 46, 129, 0.9) 100%);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.card-moex::after {
    background-image: url('https://images.unsplash.com/photo-1642790103517-1355e100e28c?q=80&w=1000&auto=format&fit=crop');
    opacity: 0.2;
}
.card-moex:hover {
    box-shadow: 0 30px 60px rgba(49, 46, 129, 0.3);
}

/* 4. РОБОТЫ (Tech Dark) */
.card-robots {
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
    color: #fff !important;
}
.card-robots::after {
    background-image: url('https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=1000&auto=format&fit=crop');
    opacity: 0.25;
}
.card-robots:hover {
    box-shadow: 0 30px 60px rgba(37, 99, 235, 0.2);
}
.card-robots p { color: #94a3b8 !important; }

/* 5. ФАНДИНГ (Data Flow) */
.card-funding {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.card-funding::after {
    background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1000&auto=format&fit=crop');
    opacity: 0.2;
}

.col-span-3 { grid-column: span 3; }
.col-span-2 { grid-column: span 2; }
.row-span-2 { grid-row: span 2; }

/* Внутренние элементы */
.card-courses h2 { font-size: 2.8rem; margin: 10px 0; letter-spacing: -1px; }
.card-courses p { max-width: 500px; color: #1e293b; font-size: 1.1rem; }

.bento-card h2 { font-size: 1.8rem; font-weight: 700; margin: 15px 0 10px; line-height: 1.1; }
.bento-card p { font-size: 1rem; line-height: 1.5; opacity: 0.9; }

.card-badge-light { background: rgba(255,255,255,0.8); backdrop-filter: blur(4px); padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #1e293b; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.card-badge-dark { background: rgba(0,0,0,0.1); backdrop-filter: blur(4px); padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: inherit; }
.card-badge-blue { background: #2563eb; color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }

.card-arrow { font-size: 2.5rem; font-weight: 300; opacity: 0.3; transition: opacity 0.3s, transform 0.3s; }
.bento-card:hover .card-arrow { opacity: 1; transform: translateX(10px); }

.funding-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.arrow-big { font-size: 3rem; font-weight: 200; opacity: 0.2; transition: all 0.3s; }
.bento-card:hover .arrow-big { opacity: 1; transform: translateX(15px); color: #2563eb; }

/* Кнопка в роботах */
.btn-outline-light {
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    margin-top: 20px;
    backdrop-filter: blur(4px);
}
.bento-card:hover .btn-outline-light {
    background: #fff;
    color: #0f172a;
    border-color: #fff;
}

/* =========================================
   АВТОРИЗАЦИЯ И МОДАЛЬНЫЕ ОКНА
========================================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: transparent; border: none;
    font-size: 1.2rem; color: #94a3b8; cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover { color: #0f172a; }

.auth-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 2px solid #f1f5f9;
}

.auth-tab {
    background: none; border: none;
    font-size: 1.1rem; font-weight: 600; color: #94a3b8;
    padding-bottom: 10px; cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.auth-tab.active {
    color: #0f172a;
    border-bottom-color: #2563eb;
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.input-group { margin-bottom: 15px; text-align: left; }
.input-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 6px; }
.input-group input { 
    width: 100%; padding: 12px 15px; border-radius: 12px;
    border: 1px solid #e2e8f0; background: #f8fafc;
    font-size: 0.95rem; color: #0f172a; outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.input-group input:focus { border-color: #2563eb; background: #fff; }

.btn-full { width: 100%; padding: 14px; font-size: 1rem; margin-top: 10px; }

.auth-error {
    color: #ef4444; font-size: 0.85rem; font-weight: 500;
    margin-bottom: 15px; min-height: 20px;
}

/* Блокируем внутренности контейнера */
.pro-locked-container {
    position: relative !important;
    overflow: hidden;
    user-select: none;
    pointer-events: none; /* Запрещаем клики внутри */
}

/* Создаем само наложение с размытием */
.pro-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 24, 39, 0.6); /* Темный фон с прозрачностью */
    backdrop-filter: blur(4px); /* Эффект размытия */
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: auto; /* Разрешаем кликать по самому замку */
    cursor: pointer;
    transition: all 0.3s ease;
}

.pro-overlay:hover {
    background: rgba(17, 24, 39, 0.7);
}

.pro-icon {
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5)); /* Свечение вокруг замка */
}

.pro-text {
    color: #FCD34D;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.pro-locked-container {
    position: relative !important;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}
.pro-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 24, 39, 0.4);
    backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 50; pointer-events: auto; cursor: pointer; transition: all 0.3s ease;
}
.pro-overlay:hover { background: rgba(17, 24, 39, 0.7); }
.pro-icon { font-size: 32px; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5)); }
.pro-text { color: #FCD34D; font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }