/* =========================
   全局
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body{

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;

    background:#f6f8fc;

    color:#111827;

}


a{

    text-decoration:none;

}




/* =========================
   顶部导航
========================= */


.header{


    height:76px;


    background:

    rgba(7,17,31,.92);


    backdrop-filter:blur(12px);


    border-bottom:

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


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 8%;


}



/* LOGO */


.logo{


    font-size:28px;


    font-weight:900;


    letter-spacing:1px;


    color:white;


}



.logo span{


    color:#2878ff;


    text-shadow:

    0 0 15px rgba(40,120,255,.8);


}





/* 导航 */


.header nav{


    display:flex;


    gap:12px;


}



.header nav a{


    color:#cbd5e1;


    font-size:15px;


    padding:8px 15px;


    border-radius:22px;


    transition:.3s;


}



.header nav a:hover{


    background:#2563eb;


    color:white;


}



.header nav a.active{


    background:#2563eb;


    color:white;


}



.mobile-menu{


    display:none;


    color:white;


    font-size:28px;


}







/* =========================
   Hero 首屏
========================= */


.hero{


    min-height:360px;


    background:


    radial-gradient(

    circle at 50% 0%,

    rgba(37,99,235,.2),

    transparent 45%

    ),


    linear-gradient(

    135deg,

    #06111f,

    #111d38

    );



    display:flex;


    align-items:center;


    justify-content:center;



    padding:50px 20px;



}



.hero-content{


    width:700px;


    text-align:center;


}



.hero h1{


    color:white;


    font-size:46px;


    font-weight:800;


    letter-spacing:2px;


    margin-bottom:22px;



}



.hero h2{


    color:white;


    font-size:34px;


    margin-bottom:20px;


    text-shadow:

    0 5px 20px rgba(0,0,0,.3);


}



.hero h2 span{


    color:#3b82f6;


}



.hero p{


    color:#cbd5e1;


    font-size:20px;


    margin-bottom:32px;


}



.hero-btn{


    display:inline-block;


    background:#2563eb;


    color:white;


    padding:

    15px 45px;


    border-radius:30px;


    font-size:17px;


    transition:.3s;


}



.hero-btn:hover{


    transform:translateY(-3px);


    box-shadow:

    0 10px 25px rgba(37,99,235,.4);


}







/* =========================
   标题
========================= */


.section-title{


    text-align:center;


    font-size:32px;


    margin:55px 0 35px;


    font-weight:bold;


}







/* =========================
   平台卡片
========================= */


.platform{


    padding:

    0 8% 40px;


}



.platform-box{


    display:flex;


    gap:30px;


    justify-content:center;


}



.exchange-card{


    background:white;


    width:520px;


    border-radius:18px;


    padding:35px;


    box-shadow:


    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


}



.exchange-card:hover{


    transform:translateY(-5px);


}





.exchange-head{


    display:flex;


    align-items:center;


    gap:20px;


    margin-bottom:25px;


}



.exchange-head img{


    width:80px;


    height:80px;


    border-radius:50%;


}



.exchange-head h3{


    font-size:28px;


}



.exchange-head p{


    color:#64748b;


}






.exchange-card ul{


    list-style:none;


    margin-bottom:25px;


}



.exchange-card li{


    line-height:35px;


    color:#475569;


}





/*按钮*/


.btn{


    display:block;


    text-align:center;


    padding:14px;


    border-radius:8px;


    margin:12px 0;


    color:white;


    font-size:17px;


    font-weight:bold;


}



.register{


    background:#111827;


}



.android{


    background:#22c55e;


}



.ios{


    background:#374151;


}



.binance-btn{


    background:#f5b900;


    color:#111;


}



.tutorial-link{


    display:block;


    text-align:center;


    margin-top:20px;


    color:#2563eb;


}








/* =========================
   新手流程
========================= */


.steps{


    padding:

    20px 8% 70px;


}



.step-box{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:30px;


}



.step{


    text-align:center;


}



.step img{


    width:70px;


    height:70px;


}



.step h3{


    margin:15px 0 8px;


}



.step p{


    color:#64748b;


    font-size:14px;


}



.arrow{


    font-size:35px;


    color:#2563eb;


}






/* =========================
 Footer
========================= */


footer{


    background:#07111f;


    color:white;


    text-align:center;


    padding:40px 20px;


}



.footer-logo{


    font-size:30px;


    font-weight:bold;


    margin-bottom:15px;


}



.footer-links{


    margin:25px 0;


}



.footer-links a{


    color:#cbd5e1;


    margin:0 15px;


}



.copyright{


    color:#94a3b8;


    margin-top:20px;


}






/* =========================
 手机端
========================= */


@media(max-width:768px){



.header{


    padding:0 20px;


}



.header nav{


    display:none;


}



.mobile-menu{


    display:block;


}





.hero{


    min-height:330px;


    padding:40px 20px;


}



.hero h1{


    font-size:30px;


}



.hero h2{


    font-size:25px;


}



.hero p{


    font-size:16px;


}



.hero-btn{


    padding:13px 35px;


}





.platform{


    padding:0 15px;


}



.platform-box{


    flex-direction:column;


}



.exchange-card{


    width:100%;


    padding:25px 20px;


}



.exchange-head img{


    width:65px;


    height:65px;


}



.exchange-head h3{


    font-size:22px;


}



.section-title{


    font-size:26px;


}




.step-box{


    flex-direction:column;


}



.arrow{


    transform:rotate(90deg);


}





.footer-links a{


    display:block;


    margin:15px;


}



}