*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:Arial,"Microsoft YaHei",sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:30px 8%}
.logo{font-weight:bold;letter-spacing:4px}
.navbtn,.download{background:#fff;color:#000;text-decoration:none;padding:12px 22px;border-radius:30px;margin-left:10px;font-weight:bold}
.hero{padding:40px 8% 30px}
h1{font-size:80px;line-height:.9;letter-spacing:5px;margin:0}
.hero h2{letter-spacing:3px}
.hero p{font-size:20px;color:#aaa;line-height:1.7}
.showcase{text-align:center;padding:30px 6%}
.showcase h2{letter-spacing:6px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.gallery img{width:100%;border-radius:28px;border:1px solid #333}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:60px 8%}
.features div,.oppo{background:#111;border:1px solid #222;border-radius:30px;padding:30px}
.oppo{margin:20px 8%;line-height:1.8}
footer{text-align:center;padding:40px;color:#777}
@media(max-width:800px){
h1{font-size:45px}
.gallery,.features{grid-template-columns:1fr 1fr}
}


.important{
margin:40px 8%;
padding:35px;
background:#180000;
border:2px solid #e00000;
border-radius:30px;
line-height:1.8;
}
.important h2{
color:#ff3333;
letter-spacing:4px;
}