:root {
    --dark: #1D2633;
    --blue: #0087CD;
    --neon: #44EB99;
    --purple: #861BE3;
    --glass: rgba(29,38,51,0.88);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark);
    color: white;
    overflow-x: hidden;
}

/* ===== ФОН ===== */
.bg-gradient {
    position: fixed;
    width: 100%; height: 100%;
    z-index: -4;
    background: linear-gradient(135deg, var(--blue), var(--neon), var(--purple));
    background-size: 300% 300%;
    animation: gradientMove 18s ease infinite;
}
@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== НЕЙРОСЕТЬ ===== */
#neural {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* ===== HERO ===== */
.hero {
    padding: 80px 20px;
    text-align: center;
    position: relative;
    z-index: 10;
}
.hero-logo {
    width: 200px; height: auto;
    margin: 0 auto 10px;
    display: block;
    opacity: 0.9;
    transition: opacity 0.3s;
}
.hero-logo:hover { opacity: 1; }
.hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 25px; line-height: 1.2; }
.hero p {
    max-width: 800px; margin: 0 auto 40px;
    font-size: 18px; font-weight: 600; line-height: 1.8;
}

/* ===== КНОПКИ ===== */
.btn {
    padding: 16px 32px;
    background: var(--neon);
    border: none; border-radius: 10px;
    font-size: 16px;
    font-weight: 700; cursor: pointer;
    transition: 0.3s;
    color: #1D2633;
    -webkit-text-fill-color: #1D2633;
}
.btn:hover { transform: scale(1.05); }

.apply-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 18px 40px;
    background: var(--purple);
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    color: white;
    -webkit-text-fill-color: white;
    transition: 0.3s;
    cursor: pointer;
    text-align: center;
}
.apply-btn:hover { background: var(--neon); color: #1D2633; -webkit-text-fill-color: #1D2633; }

/* ===== ТЕСТ ===== */
.test {
    display: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== ЛОАДЕР OVERLAY ===== */
.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(29, 38, 51, 0.88);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(68, 235, 153, 0.8);
    border-radius: 20px;
    padding: 40px 30px;
    width: 90vw;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 40px rgba(68, 235, 153, 0.3);
    display: none;
}
.loading-overlay * { color: white; }

/* ===== КАРТОЧКА ===== */
.card {
    background: var(--glass);
    backdrop-filter: blur(14px);
    padding: 40px;
    border-radius: 22px;
    transition: opacity .3s ease, transform .3s ease;
    position: relative;
    z-index: 10;
}
.fade-out { opacity: 0; transform: translateY(10px); }

/* ===== ПРОГРЕСС ===== */
.progress {
    height: 8px;
    background: #334657;
    border-radius: 6px;
    margin-bottom: 20px;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--neon);
    border-radius: 6px;
    transition: width .4s ease;
}
.counter {
    margin-bottom: 15px;
    font-weight: 600;
    opacity: 0.8;
}

/* ===== ВОПРОСЫ ===== */
.question { font-size: 20px; font-weight: 700; margin-bottom: 25px; line-height: 1.4; text-align: center; }
.answers button {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 2px solid var(--neon);
    background: transparent;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
    line-height: 1.3;
}
.answers button:hover { background: var(--neon); color: #1D2633; }
.answers button:active { transform: scale(0.98); }

/* ===== РЕЗУЛЬТАТ ===== */
.result { display: none; margin-top: 40px; }
.result-flex { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; }

#resultActions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}
#resultActions .apply-btn { margin-top: 0; }
.feedback-btn { width: 100%; max-width: 600px; }
.result-actions-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

/* ===== СПИННЕРЫ ===== */
.loader-double {
    border: 4px solid rgba(68, 235, 153, 0.2) !important;
    border-top: 4px solid #44EB99 !important;
    border-bottom: 4px solid #44EB99 !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    animation: spin 1s ease-in-out infinite !important;
    margin: 0 auto 20px !important;
}
.loader-white {
    border: 3px solid rgba(255,255,255,0.2);
    border-top: 3px solid white;
    border-radius: 50%;
    width: 40px; height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== СТАТУСЫ ===== */
.status-wrapper {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 30px 20px; min-height: 200px; text-align: center;
}
.status-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.status-desc  { font-size: 16px; opacity: 0.8; margin-bottom: 10px; }
.status-meta  { font-size: 12px; opacity: 0.5; }

/* ===== АДАПТИВ — ПЛАНШЕТЫ ===== */
@media (max-width: 1024px) {
    .hero h1 { font-size: 34px; }
    .card { padding: 32px; }
}

/* ===== АДАПТИВ — МОБИЛЬНЫЕ ===== */
@media (max-width: 768px) {
    .hero {
        padding: 40px 16px 50px;
    }
    .hero-logo {
        width: 130px;
    }
    .hero h1 {
        font-size: 22px;
        margin-bottom: 14px;
    }
    .hero p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 28px;
    }
    .btn {
        width: 100%;
        max-width: 320px;
        padding: 15px 20px;
        font-size: 15px;
    }
    .test {
        padding: 10px;
    }
    .card {
        padding: 20px 14px;
        border-radius: 16px;
    }
    .question {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .answers button {
        padding: 15px 12px;
        font-size: 14px;
        min-height: 52px;
    }
    .result { margin-top: 24px; }
    #resultActions {
        flex-direction: column;
        align-items: center;
    }
    #resultActions .apply-btn {
        width: 100%;
        max-width: 340px;
        padding: 15px 16px;
        font-size: 14px;
    }
    .result-actions-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .feedback-btn { max-width: 340px; }
}

/* ===== АДАПТИВ — МАЛЕНЬКИЕ ТЕЛЕФОНЫ ===== */
@media (max-width: 400px) {
    .hero h1  { font-size: 19px; }
    .card     { padding: 16px 12px; }
    .question { font-size: 15px; }
    .answers button { font-size: 13px; }
}