/* =====================================================
   JUQING EA AGENCY PAGE V2
   QUANT FINTECH STYLE
===================================================== */


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

.jq-agency{

    width:100%;
    max-width:1400px;
    margin:auto;
    padding:40px 30px 100px;

    color:#ffffff;

}


.jq-agency h1,
.jq-agency h2,
.jq-agency h3{

    margin:0;

    color:#ffffff;

}


.jq-agency p{

    color:#93a8c8;

    line-height:1.8;

}





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


.jq-hero{


    min-height:430px;

    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:60px;


    border-radius:26px;


    background:

    linear-gradient(
    135deg,
    rgba(15,32,62,.95),
    rgba(5,12,28,.95)
    );


    border:1px solid rgba(90,150,220,.25);


    box-shadow:

    0 30px 80px rgba(0,0,0,.35);


}



.jq-hero-text{

    width:55%;

}


.jq-label{


    display:inline-block;

    padding:8px 22px;


    border-radius:30px;


    color:#67c5ff;


    letter-spacing:4px;


    font-size:13px;


    background:

    rgba(70,160,255,.12);


    border:1px solid rgba(100,180,255,.3);

}


.jq-hero h1{


    margin-top:25px;


    font-size:52px;


    font-weight:800;


}



.jq-hero h2{


    margin-top:15px;


    font-size:28px;


    color:#6bbcff;


}



.jq-hero p{


    margin-top:25px;


    font-size:17px;


    max-width:650px;

}



.jq-btns{


    margin-top:35px;

    display:flex;

    gap:20px;

}


.jq-btns button{


    padding:14px 35px;

    border-radius:10px;


    border:none;


    cursor:pointer;


    background:#e7b84b;


    color:#111;


    font-weight:700;


    transition:.3s;

}


.jq-btns button:hover{


    transform:translateY(-4px);


    box-shadow:

    0 10px 30px rgba(231,184,75,.35);

}



.jq-btn-dark{


    background:#132746!important;


    color:#72baff!important;


    border:1px solid rgba(100,170,255,.3)!important;

}





/* =========================
 ENGINE CIRCLE
========================= */


.jq-engine{


    width:380px;

    height:380px;


    display:flex;

    align-items:center;

    justify-content:center;


}


.engine-circle{


    width:300px;

    height:300px;


    border-radius:50%;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:

    radial-gradient(
    circle,
    #18365f,
    #07101f
    );


    border:

    1px solid rgba(100,180,255,.5);


    box-shadow:

    0 0 80px rgba(60,150,255,.35);

}


.engine-circle strong{


    font-size:36px;

}


.engine-circle span{


    margin-top:10px;

    color:#70baff;

    letter-spacing:4px;

}



.engine-items{


    margin-top:20px;

    color:#d6e4ff;

    text-align:center;

}



/* =========================
 CAPABILITY CARDS
========================= */


.jq-capability{


    display:grid;

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

    gap:18px;

    margin-top:35px;

}



.jq-capability div{


    height:150px;


    padding:25px;


    background:

    linear-gradient(
    145deg,
    #122542,
    #091526
    );


    border-radius:16px;


    border:

    1px solid rgba(90,150,220,.25);


    transition:.35s;


}



.jq-capability div:hover{


    transform:translateY(-8px);


    border-color:#4da7ff;


    box-shadow:

    0 20px 45px rgba(50,140,255,.25);

}



.jq-capability span{


    color:#e7b84b;

    font-size:22px;

}


.jq-capability h3{


    margin-top:15px;

    color:#ffffff;

}


.jq-capability p{


    font-size:14px;

}






/* =========================
 SECTION COMMON
========================= */


.jq-section,
.jq-dashboard,
.jq-process{


    margin-top:35px;


    padding:35px;


    border-radius:22px;


    background:

    linear-gradient(
    145deg,
    rgba(18,37,66,.9),
    rgba(8,18,35,.95)
    );


    border:

    1px solid rgba(90,150,220,.22);


}




.jq-section>h2,
.jq-dashboard h2,
.jq-process h2{


    font-size:30px;

    margin-bottom:12px;

}







/* =========================
 FLOW ARCHITECTURE
========================= */


.jq-flow{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:25px;


    margin-top:35px;

}



.jq-flow div{


    flex:1;


    min-height:150px;


    padding:30px;


    text-align:center;


    border-radius:18px;


    background:#10223d;


    border:1px solid rgba(90,160,255,.25);


    transition:.3s;


}



.jq-flow div:hover{


    transform:translateY(-6px);


    border-color:#63b5ff;


}



.jq-flow h3{


    color:#ffffff;

    margin-bottom:15px;

}


.jq-flow i{


    font-size:35px;

    color:#e7b84b;

}






/* =========================
 BENEFITS
========================= */


.jq-benefit{


    display:grid;


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


    gap:18px;


    margin-top:35px;

}




.jq-benefit>div{


    min-height:360px;


    padding:25px;


    border-radius:18px;


    background:#101f39;


    border:

    1px solid rgba(80,140,220,.25);


    transition:.35s;


}



.jq-benefit>div:hover{


    transform:translateY(-8px);


    box-shadow:

    0 25px 50px rgba(60,140,255,.25);


}




.jq-benefit h3{


    font-size:24px;


    color:#67b9ff;


    margin-bottom:25px;


}



.jq-benefit>div:nth-child(2) h3{


    color:#e7b84b;

}



.jq-benefit p{


    padding:13px;


    margin:12px 0;


    border-radius:10px;


    background:#152947;


    color:#d9e5ff;


    border:

    1px solid rgba(100,170,255,.15);


}






/* =========================
 DASHBOARD DATA
========================= */


.jq-data{


    display:grid;


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


    gap:25px;


    margin-top:30px;


}



.jq-data div{


    padding:30px;


    text-align:center;


    background:#10213d;


    border-radius:16px;


    color:#6ebcff;


    font-size:55px;


    border:

    1px solid rgba(100,170,255,.2);


}



.jq-data small{


    display:block;


    margin-top:15px;


    font-size:15px;


    color:#9db0cc;


}






/* =========================
 PROCESS
========================= */


.jq-process-list{


    display:grid;


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


    gap:18px;


    margin-top:30px;


}



.jq-process-item{


    padding:25px;


    min-height:180px;


    border-radius:16px;


    background:#10223e;


    border:

    1px solid rgba(90,150,220,.22);


    transition:.3s;


}



.jq-process-item:hover{


    transform:translateY(-8px);


    border-color:#6bbcff;


}



.jq-process-item b{


    color:#e7b84b;


    font-size:28px;


}



.jq-process-item h3{


    margin-top:20px;


    color:#ffffff;


}



.jq-process-item p{


    font-size:14px;


}






/* =========================
 RESPONSIVE
========================= */


@media(max-width:1000px){


.jq-hero{

flex-direction:column;

}


.jq-hero-text{

width:100%;

}



.jq-capability,
.jq-benefit,
.jq-process-list,
.jq-data{

grid-template-columns:1fr;

}


.jq-flow{

flex-direction:column;

}


}
/* =========================
   手机端适配
   不影响电脑端
========================= */

@media (max-width: 768px){

    /* 防止横向撑开 */
    html,body{
        width:100%;
        overflow-x:hidden;
    }


    /* 顶部导航手机化 */
    .navbar{
        flex-direction:column;
        height:auto;
        padding:15px;
    }


    .navbar nav{
        display:none;
    }


    .nav-actions{
        display:none;
    }


    /* logo缩小 */
    .logo-area h2{
        font-size:22px;
    }

    .logo-area p{
        font-size:10px;
    }



    /* 主标题区域 */
    h1,
    h2{
        font-size:32px;
        line-height:1.3;
    }


    /* 所有大盒子手机变单列 */
    .container,
    .section,
    .features,
    .cards,
    .modules{

        width:100%;
        display:block;
    }



    /* 五大模块这种横排改竖排 */
    .module,
    .card{

        width:90%;
        margin:20px auto;

    }



    /* 图片不要超屏 */
    img{

        max-width:100%;
        height:auto;

    }



    /* 文字不要被挤成一条 */
    p{

        font-size:16px;
        line-height:1.8;

    }

}