/* 基础变量 */
:root {
  --bg:#0b1220;
  --panel:#0f172a;
  --card:#111827;
  --muted:#9ca3af;
  --brand:#38bdf8;
  --brand-2:#22c55e;
  --text:#e5e7eb;
  --white:#fff;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

html,body {
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:linear-gradient(180deg,#081022,#0b1220 35%,#0a1328 100%);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
}

main {
  flex: 1; /* 自动撑开剩余空间 */
}

a { color:var(--brand); text-decoration:none; }

.container { max-width:1160px; margin:0 auto; padding:0 20px; }

/* Header */
header {
  position:sticky;
  top:0;
  backdrop-filter:saturate(150%) blur(8px);
  background:rgba(10,19,40,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:50;
}
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:28px; height:28px; border-radius:8px; background:conic-gradient(from 180deg at 50% 50%,#34d399,#22c55e,#38bdf8,#60a5fa,#34d399); box-shadow:0 6px 16px rgba(56,189,248,.45); }
.brand b { letter-spacing:.3px; }
.nav a { color:var(--text); opacity:.9; margin-left:20px; }
.nav a:hover { opacity:1; }

/* Hero */
.hero { padding:72px 0; }
.hero .wrap { display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; }
.title { font-size:40px; line-height:1.2; margin:0 0 12px 0; }
.subtitle { font-size:18px; color:var(--muted); max-width:720px; }
.highlight { color:var(--brand); }

.badges { display:flex; gap:12px; margin:22px 0 32px; flex-wrap:wrap; }
.kbd { font:600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); }

.device { height:300px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,#0f172a,#0b1220); box-shadow:var(--shadow); padding:18px; display:grid; grid-template-rows:auto 1fr; }
.mock { margin-top:10px; border-radius:12px; border:1px dashed rgba(255,255,255,.12); padding:12px; display:grid; gap:10px; }
.mock .row { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,.04); padding:10px; border-radius:10px; }

/* Sections */
section { padding:56px 0; border-top:1px solid rgba(255,255,255,.06); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow); }
.card h3 { margin:4px 0 6px; }
.card p { margin:0; color:var(--muted); }

/* Footer */
footer { border-top:1px solid rgba(255,255,255,.08); padding:26px 0; color:#cbd5e1; font-size:14px; }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; }
.icp { opacity:.85; margin-left:10px; }

/* Responsive */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .title { font-size:32px; }
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  color: var(--text);
  cursor: pointer;
}
@media (max-width: 768px) {
  .nav-menu {
    position: relative;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
  }
  .nav-menu nav {
    display: none;
    flex-direction: column;
    background: var(--panel);
    position: absolute;
    top: 64px;
    right: 0;
    width: 200px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 10px 0;
    z-index: 1000;
  }
  .nav-menu nav.active {
    display: flex;
  }
  .nav-menu nav a {
    margin: 0;
    padding: 10px 16px;
    color: var(--text);
    opacity: .9;
  }
  .nav-menu nav a:hover {
    background: rgba(255,255,255,.06);
    opacity: 1;
  }
}