/* =========================================================
   MOBILE PREMIUM ADAPTIVE FINAL
========================================================= */

@media (max-width: 900px) {

    /* =========================================================
       GLOBAL
    ========================================================= */

    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    body {
        position: relative;
    }

    * {
        max-width: 100%;
    }

    .container {
        width: 100%;
        padding: 0 18px;
        overflow: hidden;
    }

    section {
        padding: 85px 0;
        overflow: hidden;
    }

    /* =========================================================
       GLOWS FIX
    ========================================================= */

    .glow,
    .glow-left,
    .why::before,
    .faq::before,
    .faq::after,
    .blog-section::before,
    .contact-pro::before,
    .contact-pro::after,
    .footer::before,
    body::after {
        max-width: 100vw;
        overflow: hidden;
        pointer-events: none;
    }

    /* =========================================================
       HEADER
    ========================================================= */

    .header-wrap {
        overflow: visible;
    }

    .nav {
        padding: 14px 0;
        flex-wrap: wrap;
        row-gap: 14px;
    }

    /* Промт №158 — .menu/.auth скрыты по умолчанию, но раскрываются кнопкой-бургером
       ниже (js/app.js переключает .active на обеих). order переносит бургер визуально
       сразу за лого на первой строке, а .menu/.auth с width:100% переносятся на
       отдельные строки flex-wrap'ом — без absolute-позиционирования, не зависит от
       того, есть ли на странице обёртка .header-wrap (её нет на article-template.html/
       kak-zarabotat-na-bankovskih-kartah.html). */
    .logo {
        order: 1;
    }

    .burger {
        display: flex;
        order: 2;
    }

    .menu {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: 0;
    }

    .menu.active {
        display: flex;
    }

    .menu a {
        width: 100%;
        padding: 12px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .auth {
        display: none;
        order: 4;
        width: 100%;
    }

    .auth.active {
        display: flex;
        padding-top: 4px;
    }

    .auth .btn {
        width: 100%;
    }

    /* крестик вместо трёх линий, пока меню открыто */
    .burger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .burger.active span:nth-child(2) {
        opacity: 0;
    }

    .burger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .logo {
        font-size: 21px;
    }

    .logo-img {
        width: 42px;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .hero {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
        padding-top: 30px;
        padding-bottom: 40px;
        gap: 30px;
        overflow: hidden;
    }

    .hero-left {
        max-width: 100%;
        z-index: 10;
    }

    h1 {
        font-size: 42px;
        line-height: 1.02;
        letter-spacing: -1.4px;
        margin-bottom: 18px;
    }

    .hero p {
        font-size: 15px;
        line-height: 1.9;
        margin-top: 0;
    }

    /* BUTTONS */

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        gap: 14px;
    }

    .btn {
        width: 100%;
        height: 56px;
        border-radius: 16px;
        font-size: 15px;
    }

    /* =========================================================
       HERO SCENE
    ========================================================= */

    .hero-right {
        width: 100%;
        height: 470px;
        position: relative;
        overflow: hidden;
    }

    /* убираем лагучие анимации */

    .phone,
    .ball,
    .card-left,
    .card-right-1,
    .card-right-2,
    .card-right-3,
    .coin1,
    .coin2 {
        animation: none !important;
    }

    /* PHONE */

    .phone {
        width: 430px;
        position: absolute;
        right: -30px;
        top: -10px;
        z-index: 5;
    }

    /* GLOW */

    .ball {
        width: 430px;
        position: absolute;
        right: -20px;
        top: 0;
        opacity: 0.95;
        z-index: 1;
    }

    /* LEFT CARD */

    .card-left {
        width: 115px;
        position: absolute;
        left: 0;
        top: 220px;
        z-index: 7;
    }

    /* RIGHT TOP */

    .card-right-1 {
        width: 125px;
        position: absolute;
        right: 0;
        top: 70px;
        z-index: 7;
    }

    /* RIGHT BOTTOM */

    .card-right-2 {
        width: 125px;
        position: absolute;
        right: 0;
        top: 240px;
        z-index: 7;
    }

    /* TOP CARD */

    .card-right-3 {
        width: 95px;
        position: absolute;
        right: 95px;
        top: 10px;
        z-index: 6;
    }

    /* COINS */

    .coin1 {
        width: 34px;
        position: absolute;
        left: 8px;
        bottom: 80px;
        z-index: 8;
    }

    .coin2 {
        width: 28px;
        position: absolute;
        right: 24px;
        bottom: 120px;
        z-index: 8;
    }

    /* =========================================================
       FEATURES
    ========================================================= */

    .features-new {
        flex-direction: column;
        gap: 12px;
    }

    .feature-item {
        width: 100%;
    }

    /* =========================================================
       HOW
    ========================================================= */

    .how {
        padding: 80px 0;
    }

    .how-container {
        flex-direction: column;
        gap: 40px;
    }

    .how-left {
        order: 1;
        max-width: 100%;
    }

    .how-right {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    .how-left h2 {
        font-size: 36px;
        line-height: 1.05;
    }

    .how-sub {
        font-size: 15px;
        line-height: 1.8;
    }

    .how-video {
        width: 100%;
        max-width: 340px;
        border-radius: 24px;
    }

    /* =========================================================
       WHY
    ========================================================= */

    .why {
        padding: 80px 0;
    }

    .why-head {
        margin-bottom: 34px;
    }

        .why-head h2 {
            font-size: 38px;
            line-height: 1.02;
        }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-card {
        height: 320px;
    }

    .why-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .why-btn {
        width: 100%;
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .faq {
        padding: 80px 0;
    }

    .faq-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .faq-head {
        grid-column: span 1;
        margin-bottom: 10px;
    }

        .faq-head h2 {
            font-size: 38px;
        }

    .faq-question {
        padding: 18px;
    }

        .faq-question h3 {
            font-size: 14px;
            line-height: 1.45;
        }

    .faq-answer {
        padding: 22px;
    }

        .faq-answer p {
            font-size: 14px;
            line-height: 1.95;
        }

    /* =========================================================
       BLOG
    ========================================================= */

    .blog-section {
        padding: 80px 0;
    }

    .blog-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .blog-head h2 {
        font-size: 38px;
        line-height: 1.05;
    }

    .blog-carousel {
        gap: 16px;
    }

    .blog-card {
        min-width: 290px;
        max-width: 290px;
    }

    .blog-image {
        height: 200px;
    }

    .blog-content h3 {
        font-size: 20px;
    }

    .blog-nav {
        display: none;
    }

    /* =========================================================
       CONTACT
    ========================================================= */

    .contact-pro {
        padding: 80px 0;
    }

    .contact-head {
        margin-bottom: 34px;
    }

        .contact-head h2 {
            font-size: 38px;
            line-height: 1.05;
        }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-right {
        margin-top: 0;
    }

    .contact-form {
        padding: 22px;
        border-radius: 24px;
    }

        .contact-form input,
        .contact-form textarea {
            font-size: 16px;
        }

    .contact-btn {
        height: 58px;
    }

    .contact-coin,
    .contact-coin3d {
        display: none;
    }

    /* =========================================================
       ARTICLES
    ========================================================= */

    .article-page {
        padding: 40px 0 90px;
    }

    .article-hero h1 {
        font-size: 38px;
        line-height: 1.02;
    }

    .article-sub {
        font-size: 16px;
        line-height: 1.9;
    }

    .article-cover {
        margin-bottom: 40px;
    }

        .article-cover img {
            height: auto;
            aspect-ratio: 16/10;
        }

    .article-content h2 {
        font-size: 30px;
        line-height: 1.1;
    }

    .article-content p,
    .article-content li {
        font-size: 16px;
        line-height: 2;
    }

    .article-highlight {
        font-size: 22px;
        line-height: 1.7;
        padding-left: 18px;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    /* =========================================================
       FOOTER
    ========================================================= */

    .footer {
        padding: 80px 0 30px;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-menu {
        top: 0;
        gap: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .footer-links {
        flex-direction: column;
        gap: 12px;
    }

    /* =========================================================
       POPUP
    ========================================================= */

    .success-popup-box {
        width: calc(100% - 24px);
        padding: 30px 22px;
    }
}

/* =========================================================
   NARROW PHONES (Промт №158)
   Декоративная графика hero (.phone/.ball/карточки/монеты) выше задана
   фиксированными px, одинаковыми для 899px планшета и 375px телефона —
   .hero-right { overflow: hidden } не даёт вылезти в горизонтальный скролл
   страницы, но на самых узких экранах картинка обрезается сильнее, чем
   нужно. Масштабируем весь кластер (~×0.72) и позиции внутри него —
   пропорции и композиция (кто где относительно .phone) не меняются.
========================================================= */

@media (max-width: 480px) {

    .hero-right {
        height: 340px;
    }

    .phone {
        width: 310px;
        right: -22px;
        top: -7px;
    }

    .ball {
        width: 310px;
        right: -14px;
    }

    .card-left {
        width: 83px;
        top: 158px;
    }

    .card-right-1 {
        width: 90px;
        top: 50px;
    }

    .card-right-2 {
        width: 90px;
        top: 173px;
    }

    .card-right-3 {
        width: 68px;
        right: 68px;
        top: 7px;
    }

    .coin1 {
        width: 24px;
        left: 6px;
        bottom: 58px;
    }

    .coin2 {
        width: 20px;
        right: 17px;
        bottom: 86px;
    }
}