:root {
  --primary: #F3BA2F;   /* Binance Yellow */
  --secondary: #03E1FF; /* 电光蓝，点缀 */
  --bg: #0B0E11;        /* Binance 深色背景 */
  --card-bg: #181A20;
  --text: #EDEDED;
  --muted: #9E9E9E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }

/* ---------- Header ---------- */
header {
  background: radial-gradient(at top left, rgba(243,186,47,0.25), transparent), url('https://images.unsplash.com/photo-1611078486245-e83e12fb6c9d?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
  position: relative;  overflow: hidden;
}
header::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }

/* ---------- Navbar ---------- */
.navbar {
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  gap:2rem;             /* 间距让 logo 与导航紧挨左侧 */
  padding:1rem 1.5rem;
  background:rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
}
.nav-logo img { height:42px; width:auto; }
.nav-links { list-style:none; display:flex; gap:1.5rem; }
.nav-links a { color:var(--text); font-weight:500; transition:color .3s; }
.nav-links a:hover { color:var(--primary); }

@media(max-width:768px){
  .navbar{ flex-wrap:wrap; gap:1rem; }
  .nav-links{ gap:1rem; flex-wrap:wrap; }
}

/* ---------- Hero ---------- */
.hero { position:relative; z-index:1; max-width:1100px; margin:2.5rem auto 0; }
.hero-grid { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:3rem; }
.hero-text { flex:1 1 340px; min-width:280px; }
.hero-text .logo { font-size:2.8rem; font-weight:700; color:var(--primary); text-shadow:0 0 10px var(--primary); margin-bottom:.6rem; }
.hero-text .tagline { font-size:1.2rem; color:var(--muted); margin-bottom:2rem; }
.hero-text .btn { display:inline-block; padding:.9em 2.2em; border-radius:50px; font-weight:600; background:var(--primary); color:#000; margin:.45rem .6rem .45rem 0; transition:background .3s; }
.hero-text .btn:hover { background:var(--secondary); color:#000; }
.hero-image { flex:1 1 300px; min-width:260px; text-align:center; }
.hero-image img { width:60%; max-width:340px; border-radius:1.2rem; box-shadow:0 0 20px rgba(0,0,0,.45); }

@media(max-width:768px){
  .hero-grid{ flex-direction:column; text-align:center; }
  .hero-text{ text-align:center; }
  .hero-text .btn{ margin:.45rem; }
}

/* ---------- Shared section styles ---------- */
section { padding:4em 1em; max-width:1100px; margin:auto; }
.section-title { font-size:2rem; text-align:center; color:var(--primary); margin-bottom:2rem; font-weight:700; text-shadow:0 0 6px var(--primary); }

/* Intro features */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; text-align:center; }
.feature-card { background:var(--card-bg); padding:2rem 1.2rem; border-radius:1rem; box-shadow:0 0 12px rgba(243,186,47,.15); transition:transform .3s; }
.feature-card:hover { transform:translateY(-6px); }
.feature-card i { font-size:2.4rem; color:var(--secondary); margin-bottom:1rem; }

/* Testimonials */
.testimonials { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.testimonial { background:var(--card-bg); border-left:4px solid var(--primary); padding:1.5rem 1.5rem 1.1rem; border-radius:.8rem; max-width:320px; position:relative; font-size:.95rem; }
.testimonial::before { content:"\f10d"; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:-14px; left:16px; font-size:2rem; color:var(--primary); opacity:.25; }
.testimonial h4 { margin-top:1rem; color:var(--secondary); font-weight:600; }

/* FAQ */
.faq { max-width:850px; margin:auto; }
.faq details { background:var(--card-bg); padding:1.2rem 1.4rem; border-radius:.8rem; margin-bottom:1rem; }
.faq summary { font-weight:600; cursor:pointer; }
.faq p { margin-top:.8rem; color:var(--muted); }

/* News */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.news-card { background:var(--card-bg); padding:1.3rem 1.2rem; border-radius:.8rem; border-top:4px solid var(--secondary); transition:transform .3s; }
.news-card:hover { transform:translateY(-5px); }
.news-date { font-size:.8rem; color:var(--muted); margin-bottom:.6rem; }

/* Footer */
footer { text-align:center; padding:3em 1em 2em; background:#000; color:var(--muted); font-size:.9rem; }