* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/*
 * Базовые настройки html и body
 *
 * Первоначальная реализация использовала смешанную схему: html имел
 * `overflow-y: visible`, а body — `overflow-y: scroll`. В итоге в
 * десктопных браузерах появлялось две вертикальные полосы прокрутки.
 * Чтобы избежать этого, мы синхронизируем поведение: scroll будет
 * только на уровне body, а html занимает 100% высоты и передаёт
 * управление прокруткой вниз. При этом горизонтальная прокрутка
 * полностью запрещена.
 */
/*
 * Управление прокруткой.
 *
 * HTML занимает всю высоту, но не управляет прокруткой. Только body
 * получает вертикальный скролл. Это устраняет двойные полосы
 * прокрутки на десктопах: мы отключаем scroll у html, но разрешаем
 * его у body. Горизонтальная прокрутка запрещена на обоих уровнях.
 */
html {
    width: 100%;
    /* Высоту html оставляем авто, чтобы документ мог удлиняться. */
    height: auto;
    min-height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto; /* html прокручивается как единое целое */
}

body {
    /* Космический фон по умолчанию: плавный градиент, который подчёркивает
       тёмную тему. Звёзды добавляются слоем .starfield. */
    background: linear-gradient(180deg, #0a1022 0%, #0e1c45 100%);
    background-blend-mode: normal;
    color: #e2e8f0;
    position: relative;
    width: 100%;
    /* Минимальная высота = весь экран; высота не фиксируется, чтобы
       страницы с большим количеством контента могли прокручиваться. */
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible; /* body сам не создаёт дополнительную полосу, scroll на html */
    margin: 0;
    padding-top: 0;

    /* Отключаем резкое растягивание страницы при прокрутке на мобильных
       (эффект bounce) и ограничиваем жесты пинча/масштабирования. */
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

/* Частицы (фон) */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 3D плексус на фоне */
#background-plexus {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.2;
}

/* Анимации */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.8); }
}

@keyframes rotate3D {
    0% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(1000px) rotateX(10deg) rotateY(10deg); }
    100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); }
}

@keyframes holographicWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes neuralGrow {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

@keyframes sectionGlow {
    0% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
    50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.6); }
    100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
}

@keyframes popupReveal {
    0% {
        transform: perspective(1000px) scale(0) rotateX(-90deg);
        opacity: 0;
        box-shadow: 0 0 0 rgba(168, 85, 247, 0);
    }
    50% {
        transform: perspective(1000px) scale(1.2) rotateX(10deg);
        opacity: 0.7;
        box-shadow: 0 0 50px rgba(168, 85, 247, 0.5);
    }
    100% {
        transform: perspective(1000px) scale(1) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
    }
}

@keyframes iconSpin {
    0% { transform: perspective(500px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(500px) rotateX(180deg) rotateY(180deg); }
    100% { transform: perspective(500px) rotateX(360deg) rotateY(360deg); }
}

@keyframes heroLines {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes cosmicWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes holographicGlow {
    0% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3); }
    50% { text-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 30px rgba(168, 85, 247, 0.5); }
    100% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3); }
}

@keyframes neonFloat {
    0% { transform: translateY(0px) rotate(0deg); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
    50% { transform: translateY(-5px) rotate(2deg); box-shadow: 0 0 25px rgba(168, 85, 247, 0.8); }
    100% { transform: translateY(0px) rotate(0deg); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
}

@keyframes strategyHover {
    0% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
    50% { transform: perspective(1000px) rotateX(5deg) rotateY(5deg); box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
    100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg); box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
}

@keyframes lightningFlash {
    0% { opacity: 0; transform: scale(1) rotate(0deg); }
    20% { opacity: 1; transform: scale(1.2) rotate(10deg); }
    40% { opacity: 0; transform: scale(1) rotate(-10deg); }
    60% { opacity: 1; transform: scale(1.3) rotate(5deg); }
    80% { opacity: 0; transform: scale(1) rotate(-5deg); }
    100% { opacity: 0; transform: scale(1) rotate(0deg); }
}

@keyframes buttonEnergyPulse {
    0% { background-position: 0% 50%; box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
    50% { background-position: 100% 50%; box-shadow: 0 0 30px rgba(168, 85, 247, 0.8); }
    100% { background-position: 0% 50%; box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(168, 85, 247, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
}

/* Голографический эффект для заголовков */
.holographic {
    position: relative;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #3b82f6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    animation: holographicWave 5s infinite linear;
}

.holographic-3d {
    position: relative;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #3b82f6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
    animation: holographicGlow 3s infinite ease-in-out;
}

/* Нейронная сеть (анимация линий) */
.neural-network {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    /*
     * На мобильных устройствах отключаем или упрощаем анимации, чтобы
     * прокрутка была максимально плавной. Это касается светящихся
     * секций, кнопок, карт и других элементов. Анимации с
     * transform/box-shadow могут вызывать лаги на слабых устройствах.
     */
    .animated-section,
    .neon-button,
    .neon-button.pulsing,
    .card,
    .faq-item,
    .strategy-card,
    .status-scan,
    .hero-image img,
    .neon-progress {
        animation: none !important;
        transition: none !important;
    }

    /* Уменьшаем интенсивность тени у карточек на мобильных */
    .card,
    .faq-item,
    .about-ai .about-block {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
    }
    .neural-network {
        /* На мобильных перемещаем фон линий из фиксированного положения, чтобы не мешать прокрутке. */
        position: absolute;
        height: 100%;
        width: 100%;
    }
}

.neural-network::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Легкий сетчатый фон: уменьшаем яркость линий и убираем анимацию */
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E4NTVmNyIgc3Ryb2tlLW9wYWNpdHk9IjAuMiI+PHBhdGggZD0iTTEwMCw1MCBMNTAwLDYwMCBNNTAwLDUwIEwxMDAsNjAwIE0zMDAsMTAwIEw3MDAsNTAwIE03MDAsMTAwIEwzMDAsNTAwIiBzdHJva2UtZGFzaGFycmF5PSIxMDAwIiBzdHJva2UtZGFzaG9mZnNldD0iMTAwMCIvPjwvZz48L3N2Zz4=') no-repeat center;
    /* Ослабляем сетку, чтобы фон выглядел спокойнее */
    opacity: 0.06;
    animation: none;
}

/* Анимированные секции */
.animated-section {
    position: relative;
    margin: 20px 0;
    padding: 80px 20px;
    /* Фон секций: звёздный слой + затемнение */
    /* Единый фон секций: звёздный слой и плавный градиент */
    /* Убираем статичный звездный паттерн. Используем только градиент — звёзды создаёт слой .starfield */
    background: linear-gradient(180deg, rgba(10,16,34,0.9), rgba(10,16,34,0.6));
    background-blend-mode: normal;
    border-radius: 20px;
    /* Уменьшаем яркость тени и скорость мерцания для более спокойного эффекта */
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.15);
    animation: sectionGlow 6s infinite ease-in-out;
    transition: transform 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    will-change: transform;
}

.animated-section::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    /* Ослабляем подсветку внутренних краёв */
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1), transparent);
    z-index: -1;
    border-radius: 30px;
    animation: glow 3s infinite;
}

.animated-section:hover {
    transform: translateY(-5px);
}

/* Главная страница */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    position: relative;
    will-change: transform;
    width: 100%;
    max-width: 100%;
    /* Космический фон для hero */
    /* Используем 3D‑фон сети для hero, чтобы усилить футуристический стиль */
    /* Используем существующий фон dashboard-bg как основной для hero.
       Это предотвращает ошибку 404 на серверах, где network-bg.png отсутствует. */
    background: url('dashboard-bg.png') center/cover no-repeat;
    /* Позволяем содержимому выходить за пределы блока на мобильных, чтобы страница могла прокручиваться */
    overflow: visible;
    /* Убираем скругление и внешние отступы, чтобы исключить белую полосу сверху */
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .hero {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Затемнение поверх космического фона hero */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Делаем затемнение менее плотным на мобильных и десктопе, чтобы текст был читаемым, но фон оставался виден */
    /* Усиленное затемнение, чтобы текст контрастировал на новом фоне */
    background: linear-gradient(to bottom, rgba(10,16,34,0.85), rgba(10,16,34,0.95));
    z-index: -1;
}
/* удалили лишнюю закрывающую скобку, которая нарушала CSS и могла приводить к некорректному отображению */

/* Сетка для hero: текст и изображение */
/* Сетка hero теперь использует CSS grid для лучшего выравнивания */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-text {
        max-width: 100%;
        text-align: center;
    }
    .hero-image {
        order: -1;
    }
    .animated-section {
        padding: 60px 15px;
    }
    .control-panel, .overview-panel, .log-panel, .withdraw-panel {
        flex-direction: column;
        width: 100%;
    }
    .status-card, .form {
        width: 100%;
    }
    #withdraw-amount-input {
        margin-top: 10px;
    }
}
.hero-text {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-image img {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.6));
    animation: neonFloat 6s infinite ease-in-out;
}

@media screen and (max-width: 768px) {
    .hero-image img {
        /* Ограничиваем размер голограммы на мобильных устройствах, чтобы она не занимала всю высоту экрана */
        max-width: 250px;
        margin: 0 auto;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.8);
    line-height: 1.2;
}

@media screen and (max-width: 768px) {
    .hero h1 {
        /* Ещё больше уменьшаем размер заголовка и разрешаем перенос длинных слов */
        font-size: 2rem;
        line-height: 1.25;
        word-break: break-word;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.4;
        padding-left: 15px;
        padding-right: 15px;
    }
    .hero-text {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #cbd5e1;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.neon-button {
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #3b82f6);
    background-size: 200% 200%;
    border: none;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 240px;
    box-sizing: border-box;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    animation: buttonEnergyPulse 3s infinite ease-in-out, glow 2s infinite;
    z-index: 1;
}

.neon-button::before,
.neon-button::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 120%;
    height: 120%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXRoIGQ9Ik0wLDIwIEwyMCwwIEw0MCwyMCBMNjAsMCBMODAsMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2E4NTVmNyIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC41Ii8+PC9zdmc+') no-repeat center;
    background-size: contain;
    opacity: 0;
    z-index: -1;
    animation: lightningFlash 2s infinite ease-in-out;
}

.neon-button::after {
    top: auto;
    bottom: -10px;
    animation-delay: 0.5s;
}

.neon-button.pulsing {
    animation: pulse 2s infinite ease-in-out, glow 2s infinite, buttonEnergyPulse 3s infinite ease-in-out;
}

.neon-button:hover {
    transform: perspective(1000px) translateY(-5px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.7);
}

/* AI‑помощник */
.ai-assistant {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(10, 16, 34, 0.85);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    backdrop-filter: blur(10px);
    z-index: 1000;
    max-width: 320px;
}

/* 3D движущийся фон звёзд */
.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Помещаем звёзды позади основного контента, но выше слоя html, чтобы они были видны */
    z-index: -1;
    /* Комбинированный космический фон: сетевой фон поверх звёздного узора */
    /* Переносим основной космический фон на dashboard-bg.png, который уже присутствует.
       Второй слой — звёзды. */
    background-image: url('dashboard-bg.png'), url('stars.png');
    background-size: cover, 800px 800px;
    background-repeat: no-repeat, repeat;
    /* Плавное движение фона для ощущения глубины */
    animation: starScroll 120s linear infinite;
    /* Небольшая прозрачность, чтобы фон не отвлекал от основного контента */
    opacity: 0.6;
}

@media screen and (max-width: 768px) {
    .starfield {
        /* На мобильных оставляем статичный фон вместо динамического.
           Поддерживаем фиксированное позиционирование и размеры, чтобы
           фон не влиял на высоту документа и всегда покрывал экран.
           Отключаем анимацию для повышения производительности. */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
        display: block;
        animation: none;
        background-image: url('dashboard-bg.png'), url('stars.png');
        background-size: cover, 600px 600px;
        background-repeat: no-repeat, repeat;
        opacity: 0.5;
    }
}
.starfield::before {
    /* Псевдоэлемент отключён: теперь фон генерируется через фоновые изображения, а не box‑shadow */
    display: none;
}

@keyframes starScroll {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.ai-assistant .assistant-image {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6));
}

.ai-assistant .assistant-bubble {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-assistant .assistant-bubble p {
    margin: 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Реферальная панель */
.referral-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.referral-panel .referral-link-group {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.referral-panel input {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
    font-size: 0.9rem;
    width: 100%;
}

/* Стиль для поля ввода суммы вывода */
#withdraw-amount-input {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
    font-size: 0.9rem;
}

.referral-panel button {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-width: 120px;
}

/* Панель подписки в личном кабинете */
.subscription-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.subscription-panel button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 0.9rem;
    min-width: 180px;
}

/* Секция тренда AI‑трейдинга */
.ai-trends {
    padding: 60px 20px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}
.ai-trends p {
    font-size: 1rem;
    line-height: 1.5;
    color: #d1d5db;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
}

/* Попап подписки */
#subscription-popup .popup-content {
    max-width: 400px;
    padding: 30px;
    background: rgba(10, 16, 34, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
    text-align: center;
    color: #e2e8f0;
}

/* Блок "Что умеет TradeAI" с карточками */
.about-ai .about-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.about-ai .about-block {
    flex: 1 1 250px;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-ai .about-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.4);
}

.about-ai .about-block h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #a855f7;
}

.about-ai .about-block p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d1d5db;
}

#subscription-popup .popup-header {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

#subscription-popup .popup-icon {
    font-size: 2rem;
    color: #a855f7;
}

#subscription-popup .popup-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Космический фон для всех попапов */
.popup.cosmic .popup-content {
    background: url('dashboard-bg.png') center/cover no-repeat, rgba(10, 16, 34, 0.9);
    background-blend-mode: overlay;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero-lines {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.1), transparent, rgba(168, 85, 247, 0.1));
    background-size: 200% 200%;
    animation: heroLines 10s infinite linear;
    opacity: 0.5;
}

/*
 * Заголовки секций. По умолчанию они имели слишком большой отступ снизу,
 * что приводило к визуальному обрыву текста на мобильных. Уменьшаем
 * margin-bottom и задаём общие параметры размера. Отступы будут
 * корректироваться в медиа-запросах при необходимости.
 */
.advantages h2,
.how-it-works h2,
.features h2,
.cta h2,
.faq h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 30px;
}

/*
 * Секция «Преимущества AI‑трейдинга» иногда сдвигается вниз на мобильных
 * из‑за схлопывания отступов между заголовком и карточками. Задаём
 * дополнительный верхний отступ для контейнера карточек, чтобы
 * заголовок всегда располагался над ними с равномерным промежутком.
 */
.benefits h2 {
    margin-bottom: 25px;
}

.benefits .cards {
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .advantages h2,
    .how-it-works h2,
    .features h2,
    .cta h2,
    .faq h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

.cards, .faq-items {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.card, .faq-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    will-change: transform;
    position: relative;
    flex: 1 1 220px;
    max-width: 300px;
    width: 100%;
    box-sizing: border-box;
}

.card:hover, .faq-item:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.4);
}

.card .icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #a855f7;
}

/* Обёртка кнопки запуска бота с подсказкой */
.start-bot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.start-bot-hint-text {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #a855f7;
    text-align: center;
}

.card h3, .faq-item h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.card p, .faq-item p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #d1d5db;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.step {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    flex: 1 1 220px;
    max-width: 300px;
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    will-change: transform;
    width: 100%;
    box-sizing: border-box;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.4);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.step h3 {
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

.step p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d1d5db;
}

.cta p {
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto 30px;
}

footer {
    text-align: center;
    padding: 40px 20px;
    background: #0a1022;
    width: 100%;
    max-width: 100%;
}

.neon-line {
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    margin-bottom: 20px;
}

/*
 * Настройка холстов для панели статуса. Эти стили вынесены за пределы
 * медиа-запросов, чтобы графики были видны как на десктопах, так и на
 * мобильных. Высота задаётся явно, чтобы canvas не получал нулевых
 * размеров при инициализации.
 */
.status-card canvas {
    width: 100%;
    height: 200px;
    margin-top: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

/* График торгов: свечной график с небольшой высотой */
#trade-chart {
    width: 100%;
    height: 150px;
    margin-top: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
}


footer p {
    font-size: 1.2rem;
    font-weight: 400;
}

/* Личный кабинет */
.dashboard-container {
    max-width: 1100px;
    margin: 20px auto;
    padding: 20px;
    /* Космический фон для личного кабинета */
    background: url('dashboard-bg.png') center/cover no-repeat, linear-gradient(180deg, #0a1022 0%, #121f49 100%);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.5);
    position: relative;
    width: 100%;
    /* Убираем скрытие переполнения, чтобы контент панели
       мог растягивать страницу и появлялась основная прокрутка. */
    overflow: visible;
}

.dashboard-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(90deg, #3b82f6, #a855f7, #3b82f6);
    background-size: 200% 200%;
    animation: holographicWave 5s infinite linear;
    z-index: -1;
    border-radius: 16px;
    opacity: 0.3;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 15px;
}

.dashboard-header h2 {
    font-size: 2rem;
    margin-bottom: 5px;
}

.dashboard-header p {
    font-size: 0.9rem;
    color: #d1d5db;
    opacity: 0.8;
}

.dashboard-content {
    display: grid;
    grid-template-areas: 
        "overview overview overview"
        "control control withdraw"
        "log log log";
    grid-template-columns: 1fr 1fr 250px;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}

.overview-panel {
    grid-area: overview;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.overview-section {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.overview-section h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.overview-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px;
}

.overview-card p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #a855f7;
}

.control-panel {
    grid-area: control;
    display: flex;
    gap: 10px;
}

.control-status {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.control-status h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.status-card p {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #d1d5db;
}

#plexus-canvas {
    margin-top: 5px;
}

.neon-progress {
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    border-radius: 5px;
    transition: width 0.5s ease;
    width: 0%;
}

#plexus-canvas.pulsing {
    animation: pulse 2s infinite ease-in-out;
}

.control-settings {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px;
}

.control-settings h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 0.8rem;
    margin-bottom: 3px;
    color: #d1d5db;
}

.strategy-options {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.strategy-card {
    background: rgba(255, 255, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
    flex: 1 1 80px;
    max-width: 90px;
    cursor: pointer;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    animation: strategyHover 4s infinite ease-in-out;
}

.strategy-card.selected {
    border: 2px solid #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.strategy-card:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.strategy-icon {
    font-size: 1.2rem;
    margin-bottom: 3px;
}

.strategy-card h4 {
    font-size: 0.65rem;
    white-space: normal; /* Разрешаем перенос текста */
    word-break: break-word; /* Переносим длинные слова */
    line-height: 1.2; /* Улучшаем читаемость */
}

.input-group input, .input-group select {
    padding: 6px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    color: #e2e8f0;
    outline: none;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.input-group input:focus, .input-group select:focus {
    border-color: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.button-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.log-panel {
    grid-area: log;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px;
}

.log-panel h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

#log-messages {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 6px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.log-message {
    font-size: 0.75rem;
    line-height: 1.3;
    color: #d1d5db;
}

.withdraw-panel {
    grid-area: withdraw;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.withdraw-panel h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.withdraw-form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#withdraw-address {
    padding: 6px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    color: #e2e8f0;
    outline: none;
    transition: border-color 0.3s ease;
}

#withdraw-address:focus {
    border-color: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

#withdraw-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
}

#withdraw-status {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

#withdraw-status p {
    font-size: 0.75rem;
    color: #d1d5db;
}

/* Попапы */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 16, 34, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-x: hidden;
}

.popup-content {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.8), rgba(10, 16, 34, 0.9));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.5);
    animation: popupReveal 0.7s ease-out;
}

.popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.popup-icon {
    font-size: 2rem;
    margin-right: 10px;
    color: #a855f7;
    animation: iconSpin 5s infinite linear;
}

.popup-content h3 {
    font-size: 1.8rem;
}

.cosmic-text {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #d1d5db;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cosmicWave 5s infinite linear;
}

.popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.floating-neon {
    animation: neonFloat 3s infinite ease-in-out;
}

.instruction-step {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    text-align: left;
}

.step-number {
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 1rem;
}

.instruction-step p {
    font-size: 1rem;
    color: #d1d5db;
}

/* Общие стили для мобильных устройств */
@media (max-width: 768px) {
    .hero h1 {
        /* Для мобильных сокращаем заголовок до 2.2rem, чтобы текст не
           переносился некрасиво и не выходил за края экрана. */
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .advantages h2, .how-it-works h2, .features h2, .cta h2, .faq h2 {
        font-size: 2.5rem;
    }

    .cards, .steps {
        flex-direction: column;
        align-items: center;
    }

    .card, .step {
        max-width: 100%;
    }

    .faq-items {
        flex-direction: column;
        align-items: center;
    }

    .faq-item {
        max-width: 100%;
        width: 90%;
    }

    .dashboard-container {
        margin: 10px;
        padding: 15px;
        border-radius: 10px;
    }

/* Настройки холстов определены вне медиа-запросов. */

/* Скользящая линия сканирования для визуального эффекта работы ИИ */
.status-scan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(168,85,247,0.15) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: scanAnim 3s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes scanAnim {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Динамический текст о действиях бота */
.status-activity {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #a5b4fc;
    font-style: italic;
    min-height: 1.2rem;
}

/* Пульсирующая сфера внутри карты статуса.
   Служит визуальным индикатором работы ИИ: меняет размер и сияние. */
.bot-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 10px auto;
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.8), rgba(59, 130, 246, 0.6) 60%, rgba(168, 85, 247, 0) 100%);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    animation: orbPulse 3s infinite ease-in-out;
    pointer-events: none;
}

@keyframes orbPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 35px rgba(168, 85, 247, 0.8);
    }
}

    .dashboard-header h2 {
        font-size: 1.8rem;
    }

    .dashboard-header p {
        font-size: 0.8rem;
    }

    .dashboard-content {
        grid-template-areas: 
            "overview"
            "control"
            "withdraw"
            "log";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 8px;
    }

    .overview-panel {
        flex-direction: column;
        gap: 8px;
    }

    .control-panel {
        flex-direction: column;
        gap: 8px;
    }

    .withdraw-panel {
        padding: 10px;
    }

    .log-panel {
        padding: 10px;
    }

    .overview-section h3, .control-status h3, .control-settings h3, .withdraw-panel h3, .log-panel h3 {
        font-size: 1rem;
    }

    .overview-card p, .status-card p {
        font-size: 1rem;
    }

    #plexus-canvas {
        width: 100%;
        height: auto;
    }

    .input-group label {
        font-size: 0.75rem;
    }

    .input-group input, .input-group select {
        padding: 5px;
        font-size: 0.75rem;
        border-radius: 5px;
    }

    .strategy-card {
        max-width: 100%;
        padding: 5px;
        border-radius: 5px;
    }

    .strategy-icon {
        font-size: 1rem;
    }

    .strategy-card h4 {
        font-size: 0.6rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }

    .button-group {
        flex-direction: column;
        gap: 5px;
    }

    .neon-button {
        padding: 8px 20px;
        font-size: 0.9rem;
        border-radius: 40px;
    }

    #log-messages {
        max-height: 250px;
        padding: 5px;
        border-radius: 5px;
    }

    .log-message {
        font-size: 0.7rem;
        line-height: 1.2;
    }

    #withdraw-address, #withdraw-btn {
        padding: 5px;
        font-size: 0.75rem;
    }

    #withdraw-status p {
        font-size: 0.7rem;
    }
}