/* =================================
   QUARKX MOBILE RESPONSIVE PATCH
================================= */


/* جلوگیری از اسکرول افقی */
html,
body {

    width: 100%;
    max-width: 100%;
    overflow-x: hidden;

}



/* همه تصاویر و SVG ها */
img,
svg {

    max-width: 100%;
    height: auto;

}



/* کانتینر اصلی */
.wrap {

    width: 100%;
    max-width: 1200px;

    padding-left: 20px;
    padding-right: 20px;

}



/* =========================
   TABLET
========================= */

@media (max-width:1024px) {


    .hero {

        grid-template-columns: 1fr;

        gap: 20px;

        text-align: center;

    }



    .hero p.lead {

        margin-left: auto;
        margin-right: auto;

    }



    .hero-ctas {

        justify-content: center;

    }



    .trust-row {

        justify-content: center;

    }



    .stage {

        height: 430px;

        order: -1;

    }



    .orbit-wrap {

        width: 340px;
        height: 340px;

    }



    .wallet-core-stage {

        width: 280px;
        height: 280px;

    }



    .networks-inner {

        justify-content: center;

    }



    .feature-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .security {

        padding: 40px;

    }


}





/* =========================
   MOBILE
========================= */

@media (max-width:600px) {



    body {

        overflow-x: hidden;

    }



    /* Header */

    nav {

        padding: 16px 20px;

    }



    .brand {

        font-size: 18px;

    }



    .nav-cta {

        padding: 9px 14px;

        font-size: 13px;

    }



    /* Hero */

    .hero {

        padding-top: 20px;

        padding-bottom: 20px;

    }



    h1 {

        font-size: 36px;

        line-height: 1.15;

    }



    .hero p.lead {

        font-size: 16px;

    }



    .hero-ctas {

        flex-direction: column;

        width: 100%;

    }



    .btn-primary,
    .btn-secondary {

        width: 100%;

        justify-content: center;

    }




    /* 3D stage */

    .stage {

        height: 350px;

        overflow: hidden;

    }



    .orbit-wrap {

        width: 260px;

        height: 260px;

    }



    .wallet-core-stage {

        width: 230px;

        height: 230px;

    }



    /* کوچک کردن هسته */

    .wallet-crystal {

        width: 110px;

        height: 110px;

        margin-left: -55px;

        margin-top: -55px;

    }



    .wallet-logo {

        font-size: 50px;

    }



    .wallet-orbit {

        width: 210px;

        height: 210px;

        margin-left: -105px;

        margin-top: -105px;

    }



    .wallet-data {

        font-size: 8px;

        letter-spacing: 1px;

    }



    /* Network */

    .networks-inner {

        padding: 18px;

    }



    .network-tiles {

        justify-content: center;

    }



    .ntile {

        width: 45px;

        height: 40px;

    }



    /* Sections */

    .section {

        padding: 60px 0;

    }



    .section-head {

        margin-bottom: 35px;

    }



    .section-head h2 {

        font-size: 28px;

    }



    .feature-grid {

        grid-template-columns: 1fr;

    }



    .fcard {

        padding: 22px;

    }



    /* Steps */

    .steps {

        grid-template-columns: 1fr;

    }



    .step {

        padding: 0;

    }



    /* Security */

    .security {

        padding: 25px 18px;

        border-radius: 20px;

    }



    .phrase-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* Download */

    .cta-block {

        padding: 70px 0 30px;

    }



    .store-badges {

        flex-direction: column;

    }



    .store-btn {

        justify-content: center;

    }



    /* Footer */

    .foot-row {

        flex-direction: column;

        text-align: center;

    }



    .foot-links {

        flex-wrap: wrap;

        justify-content: center;

    }


}




/* =========================
   SMALL PHONES
========================= */

@media(max-width:380px) {


    h1 {

        font-size: 32px;

    }


    .wallet-core-stage {

        transform: scale(.85);

    }



    .stage {

        height: 300px;

    }


    .network-tiles {

        gap: 8px;

    }



    .ntile {

        width: 40px;

        height: 36px;

        font-size: 10px;

    }



}







/* =================================
   HOW IT WORKS RESPONSIVE
================================= */


@media (max-width: 900px) {


    #how .section {

        padding-top: 70px;
        padding-bottom: 70px;

    }


    #how .section-head {

        text-align: center;

        margin-left: auto;
        margin-right: auto;

    }


    #how .steps {

        display: grid;

        grid-template-columns: 1fr;

        gap: 35px;

        margin-top: 40px;

    }


    #how .step {

        padding: 0;

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;

    }


    #how .step-badge {

        width: 52px;

        height: 52px;

        border-radius: 16px;

        margin-bottom: 18px;

        font-size: 16px;

    }


    #how .step h3 {

        font-size: 20px;

        margin-bottom: 10px;

    }


    #how .step p {

        max-width: 420px;

        font-size: 15px;

        line-height: 1.8;

    }


}




@media (max-width:600px) {


    #how .section {

        padding-top: 50px;

        padding-bottom: 50px;

    }


    #how .section-head h2 {

        font-size: 28px;

        line-height: 1.3;

    }


    #how .section-head p {

        font-size: 15px;

        padding: 0 10px;

    }


    #how .steps {

        gap: 28px;

    }


    #how .step {

        background: rgba(17, 20, 42, .65);

        border: 1px solid rgba(255, 255, 255, .08);

        border-radius: 20px;

        padding: 25px 18px;

    }


    #how .step-badge {

        width: 48px;

        height: 48px;

        font-size: 14px;

    }


    #how .step h3 {

        font-size: 18px;

    }


    #how .step p {

        font-size: 14px;

        line-height: 1.75;

    }


}



@media (max-width:380px) {


    #how .section-head h2 {

        font-size: 24px;

    }


    #how .step {

        padding: 20px 14px;

    }


    #how .step h3 {

        font-size: 17px;

    }


    #how .step p {

        font-size: 13.5px;

    }


}