*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Arial,"Microsoft YaHei",sans-serif;
  background:#050505;
  color:#fff;
}
a{text-decoration:none;color:inherit}
.header{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8%;
  border-bottom:1px solid #1d1d1d;
}
.logo{
  font-size:26px;
  font-weight:800;
  letter-spacing:.5px;
}
.nav a{
  margin-left:32px;
  color:#aaa;
  font-size:15px;
}
.nav a:hover{color:#fff}
.btn{
  background:#fff;
  color:#000;
  padding:13px 24px;
  border-radius:28px;
  font-weight:700;
}
.hero{
  padding:90px 8% 80px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.badge{
  display:inline-block;
  padding:8px 16px;
  border:1px solid #333;
  border-radius:30px;
  color:#ddd;
  margin-bottom:28px;
}
h1{
  font-size:64px;
  line-height:1.08;
  margin-bottom:24px;
}
h1 span{color:#00ff9c}
.desc{
  color:#aaa;
  font-size:20px;
  line-height:1.8;
  max-width:620px;
  margin-bottom:36px;
}
.actions{
  display:flex;
  align-items:center;
  gap:18px;
}
.outline{
  border:1px solid #333;
  padding:13px 24px;
  border-radius:28px;
  color:#ddd;
}
.panel{
  background:linear-gradient(145deg,#111,#050505);
  border:1px solid #242424;
  border-radius:32px;
  padding:36px;
  box-shadow:0 0 60px rgba(0,255,156,.12);
}
.reward{
  font-size:22px;
  color:#aaa;
  margin-bottom:18px;
}
.amount{
  font-size:76px;
  font-weight:900;
  color:#00ff9c;
}
.card{
  margin-top:30px;
  padding:24px;
  border-radius:22px;
  background:#0c0c0c;
  border:1px solid #222;
}
.card p{color:#aaa;line-height:1.8}
.section{
  padding:70px 8%;
}
.title{
  font-size:42px;
  margin-bottom:18px;
}
.sub{
  color:#aaa;
  font-size:18px;
  margin-bottom:40px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature{
  background:#0b0b0b;
  border:1px solid #222;
  border-radius:26px;
  padding:32px;
}
.icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#00ff9c;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  margin-bottom:24px;
}
.feature h3{
  font-size:24px;
  margin-bottom:14px;
}
.feature p{
  color:#aaa;
  line-height:1.8;
}
.cta{
  margin:80px 8%;
  padding:56px;
  border-radius:36px;
  background:linear-gradient(135deg,#00ff9c,#8cffd2);
  color:#000;
  text-align:center;
}
.cta h2{
  font-size:46px;
  margin-bottom:18px;
}
.cta p{
  font-size:18px;
  margin-bottom:30px;
}
.cta .btn{
  display:inline-block;
  background:#000;
  color:#fff;
}
.footer{
  padding:36px 8%;
  color:#777;
  border-top:1px solid #1d1d1d;
  font-size:14px;
  line-height:1.8;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  h1{font-size:44px}
  .grid{grid-template-columns:1fr}
  .nav{display:none}
}