:root {
  --bg: #081018;
  --bg-soft: #0d1721;
  --panel: rgba(8,18,28,.56);
  --panel-strong: rgba(10,22,34,.76);
  --text: #f5f7fb;
  --muted: #c6d0dd;
  --line: rgba(255,255,255,.14);
  --gold: #35d3e5;
  --gold-soft: #7fe8ff;
  --accent: #5ca8ff;
  --shadow: 0 24px 60px rgba(0,0,0,.36);
  --radius: 22px;
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 18% 12%, rgba(44,213,226,.1),transparent 22%),radial-gradient(circle at 80% 8%, rgba(93,111,255,.14),transparent 24%),linear-gradient(180deg,#061019 0%,#09121d 46%,#0a1017 100%);
  line-height: 1.75;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(255,255,255,.02),transparent 18%,rgba(0,0,0,.1)),radial-gradient(circle at 82% 10%,rgba(78,102,255,.1),transparent 22%),radial-gradient(circle at 18% 18%,rgba(31,205,210,.1),transparent 20%);
  z-index: -1;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(calc(100% - 32px),var(--max)); margin:0 auto; }

/* 导航 - 精简稳定版 */
.header {
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(4,10,16,.82);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px; gap:20px;
}
.brand { display:flex; gap:14px; align-items:center; }
.brand-mark {
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg,#1fd4d6,#5776ff);
  position:relative;
}
.brand-mark::before {
  content:"♪"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:22px; color:#1b1714; font-weight:700;
}
.brand h1, .brand span { margin:0; line-height:1.2; }
.brand h1 { font-size:1rem; }
.brand span { color:var(--muted); font-size:.84rem; }

.nav-links {
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:flex-end;
}
.nav-links a {
  color:var(--muted); font-size:.95rem; padding:8px 0; position:relative;
}
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:4px; width:0; height:1px;
  background:linear-gradient(90deg,#22d3c5,#6288ff); transition:width .25s;
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }

.nav-item { position:relative; display:flex; align-items:center; }
.nav-item .top-link { display:inline-flex; align-items:center; gap:6px; }
.nav-item .top-link::before {
  content:"▾"; font-size:.75rem; color:var(--gold-soft); margin-left:4px;
}

.submenu {
  position:absolute; top:100%; left:0; min-width:260px; padding:10px;
  background:rgba(12,12,12,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s;
  z-index:200;
}
.nav-item:hover .submenu { opacity:1; visibility:visible; transform:translateY(0); }
.submenu a {
  display:block; padding:10px 12px; border-radius:10px; color:var(--muted);
}
.submenu a:hover { color:var(--text); background:rgba(255,255,255,.06); }

.submenu-group { position:relative; width:100%; }
.submenu-level-2 {
  position:absolute; left:100%; top:-10px; min-width:220px; padding:10px;
  background:rgba(12,12,12,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateX(8px); transition:.22s;
}
.submenu-group:hover .submenu-level-2 { opacity:1; visibility:visible; transform:translateX(0); }

/* 主体 */
.hero, .page-hero { position:relative; overflow:hidden; isolation:isolate; }
.hero::before, .page-hero::before {
  content:""; position:absolute; inset:0; background-position:center; background-size:cover; opacity:.78; z-index:-3;
}
.hero::after, .page-hero::after {
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(90deg,rgba(3,10,17,.94),rgba(4,10,18,.88)24%,rgba(4,10,18,.74)42%,rgba(4,10,18,.48)66%,rgba(4,10,18,.34)),linear-gradient(180deg,rgba(4,10,16,.2),rgba(4,10,16,.58)68%,rgba(4,10,16,.88)),linear-gradient(90deg,rgba(35,212,198,.18),rgba(98,136,255,.16)38%,transparent 64%);
}
.hero { padding:92px 0 56px; }
.page-hero { padding:82px 0 36px; }
.hero-grid { display:grid; grid-template-columns:1.25fr .9fr; gap:28px; align-items:stretch; }
.hero-card, .section-card {
  background:linear-gradient(180deg,rgba(9,20,32,.72),rgba(7,16,26,.62));
  border:1px solid rgba(255,255,255,.11); border-radius:var(--radius); box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}
.hero-card { padding:42px; position:relative; overflow:hidden; }
.eyebrow { display:inline-block; color:var(--gold-soft); font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.hero h2, .page-hero h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.18; margin:0 0 18px; }
.hero p.lead, .page-hero p.lead { font-size:1.04rem; color:var(--muted); margin:0 0 24px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; border:1px solid var(--line);
  transition:.22s; font-weight:600;
}
.btn.primary { background:linear-gradient(135deg,#22d3c5,#6288ff); color:#061018; border-color:transparent; }
.btn.secondary { color:var(--text); background:rgba(255,255,255,.03); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.18); }

.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:28px; position:relative; }
.stat { padding:22px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.stat strong { display:block; font-size:2rem; color:var(--gold-soft); line-height:1; }
.stat span { color:var(--muted); font-size:.95rem; margin-top:10px; }

.section { padding:30px 0 60px; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-header h3 { margin:0; font-size:clamp(1.45rem,2.4vw,2.2rem); }
.section-header p { margin:0; color:var(--muted); max-width:720px; }

.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-2,.grid-3,.grid-4 { display:grid; gap:18px; }

.section-card { padding:14px; position:relative; overflow:hidden; }
.section-card h4 { margin:0 0 12px; font-size:1.16rem; }
.section-card p, .section-card li { color:var(--muted); margin-top:20px; }
.section-card ul { margin:22px 0 0; padding-left:1.2rem; }

.band { margin:22px 0; padding:22px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(90deg,rgba(34,211,197,.12),rgba(98,136,255,.1),rgba(255,255,255,.03)); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.04); }
table { width:100%; border-collapse:collapse; min-width:680px; }
th,td { padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); }
th { color:var(--gold-soft); font-weight:700; background:rgba(255,255,255,.03); }
.badge { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:.84rem; background:rgba(34,211,197,.14); color:var(--gold-soft); border:1px solid rgba(34,211,197,.2); }

.timeline { display:grid; gap:16px; }
.timeline-item { display:grid; grid-template-columns:110px 1fr; gap:18px; padding:10px 0; border-bottom:1px solid var(--line); }
.timeline-year { color:var(--gold-soft); font-weight:700; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.field { display:grid; gap:8px; }
.field label { color:var(--gold-soft); font-size:.94rem; }
.field input,.field select,.field textarea {
  width:100%; padding:14px 15px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--text); font:inherit;
}
.field textarea { min-height:130px; resize:vertical; }
.field.full { grid-column:1/-1; }

/* 底部 */
.footer { margin-top:30px; border-top:1px solid var(--line); background:rgba(0,0,0,.32); }
.footer-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:24px; padding:18px 0; }
.copyright { padding:14px 0 28px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); }

/* 组件 */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:30px; }
.video-card { position:relative; border-radius:12px; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.video-card:hover { transform:translateY(-5px); }
.video-card img { width:100%; aspect-ratio:9/16; object-fit:cover; }
.play-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; background:rgba(196,0,0,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; }

.quick-links { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quick-links a { padding:18px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.quick-links a strong { display:block; margin-bottom:8px; }
.quick-links a span { color:var(--muted); font-size:.93rem; }

/* 响应式 */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; }
  .quick-links { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .video-grid { grid-template-columns:1fr; }
  .hero-card h2 { font-size:28px; }
  .hero-actions { flex-direction:column; }
  .grid-2,.grid-3,.grid-4,.footer-grid { grid-template-columns:1fr; }
  .quick-links { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .nav { flex-direction:column; align-items:flex-start; padding:12px 0; }
  .nav-links { justify-content:flex-start; width:100%; }
  .submenu,.submenu-level-2 { position:static; transform:none; opacity:1; visibility:visible; width:100%; background:rgba(255,255,255,.04); box-shadow:none; margin-top:6px; }
  .hero { padding:72px 0 42px; }
  .page-hero { padding:68px 0 28px; }
}