/* Theme */
:root{
  --bg: #1F212E;
  --text: #ffffff;
  --text-dim: #E0F2FF;
  --accent-1: rgb(0, 232, 143);
  --accent-2: rgb(255, 218, 71);
  --link: rgb(64, 102, 255);
  --gradient-start: rgb(0, 255, 174);
  --gradient-end: rgb(255, 221, 0);
  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
img{display:block;max-width:100%;height:auto;border-radius:16px}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(31,33,46,0.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:Montserrat, Poppins, sans-serif;font-weight:700;letter-spacing:0.5px}
.logo span{background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{margin:0 12px;color:var(--text)}
.hamburger{display:none;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 12px}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-gradient{position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 0%, rgba(0,255,174,0.15), transparent),radial-gradient(1200px 600px at 80% 100%, rgba(255,221,0,0.15), transparent)}
.hero-content{position:relative;padding:100px 0;text-align:center}
.hero h1{font-size:48px;line-height:1.05;margin:0 0 16px}
.hero p{color:var(--text-dim);font-size:18px;margin:0 0 28px}
.hero-actions{display:flex;gap:12px;justify-content:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:14px;border:1px solid var(--border);transition:all .2s ease;box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));color:#232323;border:none}
.btn-primary:hover{filter:saturate(1.15) brightness(1.05)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{border-color:var(--accent-2);box-shadow:0 0 24px rgba(255,221,0,0.35)}

/* Features */
.features{padding:72px 0}
.features h2{font-size:32px;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transform:translateY(12px);opacity:0;animation:fadeUp .6s ease .15s forwards}
.card img{width:70%;margin:12px auto}
.card-content{padding:16px}
.card h3{margin:0 0 8px;font-size:20px}
.card p{margin:0;color:var(--text-dim)}

/* Highlights */
.highlights{padding:72px 0}
.highlights h2{font-size:32px;margin:0 0 8px}
.highlights .sub{color:var(--text-dim);margin:0 0 24px}
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.highlight-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);padding:20px}
.highlight-card::after{content:"";position:absolute;left:20px;right:20px;bottom:16px;height:2px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));opacity:.6}
.highlight-card:hover{box-shadow:0 0 24px rgba(255,221,0,0.25)}

/* Stats */
.stats{padding:48px 0;background:linear-gradient(90deg, rgba(0,255,174,0.06), rgba(255,221,0,0.06))}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:center}
.stat{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;text-align:center}
.stat .num{font-family:Montserrat, Poppins, sans-serif;font-size:28px;background:linear-gradient(90deg,var(--gradient-start),var(--gradient-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .label{color:var(--text-dim)}

@media (max-width:1024px){
  .highlight-grid{grid-template-columns:repeat(2,1fr)}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .highlight-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr}
}

/* CTA */
.cta{padding:72px 0;background:linear-gradient(90deg, rgba(0,255,174,0.08), rgba(255,221,0,0.08))}
.cta h2{font-size:32px;margin:0 0 8px}
.cta p{color:var(--text-dim);margin:0 0 20px}
.cta-actions{display:flex;gap:12px}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 0;color:var(--text-dim)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-inner a{color:var(--text-dim)}
.footer-inner a:hover{color:#fff}

/* Animations */
.fade-in{animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .slide{flex-basis:clamp(200px, 52vw, 520px)}
}
@media (max-width:640px){
  .nav{display:none}
  .hamburger{display:inline-block}
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column}
  .slide{flex-basis:clamp(180px, 88vw, 460px)}
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;       /* 自动换行，防止太挤 */
  justify-content: center;
  gap: 16px;             /* 链接之间的间距 */
}

.site-footer .links a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.site-footer .links a:hover {
  text-decoration-thickness: 2px;
}