*{
box-sizing:border-box;
}


body{

margin:0;

background:#080b12;

color:#fff;

font-family:

"Microsoft YaHei",
Arial,
sans-serif;

}




.top{

height:70px;

display:flex;

align-items:center;

padding:0 25px;

background:#0d111a;

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

}



.brand{

display:flex;

align-items:center;

gap:12px;

font-size:20px;

font-weight:bold;

}



.brand img{

width:42px;

height:42px;

object-fit:contain;

}





.hero{

padding:60px 20px 40px;

}



.hero-box{

max-width:900px;

margin:auto;

text-align:center;

padding:50px 25px;

background:

linear-gradient(145deg,#151b2b,#0c1018);

border-radius:20px;

box-shadow:0 20px 60px rgba(0,0,0,.5);

}




.tag{

display:inline-block;

padding:8px 20px;

background:#222b45;

border-radius:30px;

color:#8ea4ff;

margin-bottom:20px;

}



h1{

font-size:42px;

line-height:1.3;

margin:10px 0;

}


h1 span:not(.price){

color:#6f8cff;

}


h1 .price{

color:#ff8a00 !important;

text-shadow:0 0 15px rgba(255,138,0,.5);

}


.hero p{

font-size:18px;

color:#b8c0d4;

}




.btn{

display:inline-block;

margin-top:30px;

padding:16px 45px;

background:#627cff;

border-radius:50px;

color:white;

text-decoration:none;

font-size:18px;

font-weight:bold;

}



.notice{

margin-top:35px;

padding:20px;

background:#101625;

border-radius:15px;

line-height:2;

color:#cfd5e5;

}




.container{

max-width:900px;

margin:auto;

padding:20px;

}



.card{

background:#111722;

border-radius:18px;

padding:30px;

margin-bottom:25px;

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

}



h2{

margin-top:0;

}



.items div{

padding:15px;

background:#171e2d;

margin:10px 0;

border-radius:10px;

}


.items b{

color:#55d6a3;

margin-right:10px;

}



.steps{

display:flex;

gap:20px;

}


.step{

flex:1;

background:#171e2d;

padding:20px;

border-radius:15px;

text-align:center;

}


.step span{

display:inline-flex;

width:40px;

height:40px;

align-items:center;

justify-content:center;

border-radius:50%;

background:#627cff;

font-size:20px;

font-weight:bold;

}




.faq p{

color:#cbd2e2;

line-height:1.8;

}





footer{

text-align:center;

padding:30px;

color:#777;

}





.float{


position:fixed;

right:25px;

bottom:25px;

background:#627cff;

padding:15px 28px;

border-radius:50px;

color:#fff;

text-decoration:none;

font-weight:bold;

box-shadow:0 10px 30px rgba(0,0,0,.5);

}




@media(max-width:700px){


h1{

font-size:30px;

}


.steps{

flex-direction:column;

}


.hero{

padding-top:30px;

}



}