* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f7fb;
  color: #0b1220;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.topbar {
  background: #08111f;
  color: #eaf1fb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px;
  border-bottom: 1px solid rgba(74, 144, 226, .35);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; line-height: 1.2; }
.brand strong { font-size: 20px; color: #ffffff; }
.brand span { font-size: 13px; color: #9db9de; }
.topnav { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; color: #c9d8eb; flex: 1; flex-wrap: wrap; }
.topnav a:hover { color: #ffffff; }
.nav-drop { position: relative; }
.nav-btn {
  background: none;
  border: 0;
  color: #c9d8eb;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  padding: 8px 2px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.nav-btn:hover, .nav-drop.active .nav-btn { color: #ffffff; }
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #0d1a2e;
  border: 1px solid rgba(74, 144, 226, .35);
  border-radius: 8px;
  padding: 8px;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.nav-drop.active .nav-menu { display: block; }
.nav-menu a {
  display: block;
  padding: 8px 10px;
  color: #dbe7f7;
  border-radius: 6px;
  font-size: 14px;
}
.nav-menu a:hover { background: rgba(74, 144, 226, .18); color: #ffffff; }
.nav-menu .empty { display: block; padding: 8px 10px; color: #7f97b5; font-size: 13px; }
.verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 13px;
  color: #8ce0c0;
  border: 1px solid rgba(74, 222, 174, .4);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 83, 60, .35);
}

.hero {
  background: linear-gradient(135deg, #0a1424 0%, #102338 62%, #123a5c 100%);
  color: #ffffff;
  padding: 64px 40px 56px;
}
.hero-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 48px;
  align-items: center;
}
.eyebrow {
  color: #79b8ff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
h1 { font-size: 42px; line-height: 1.2; font-weight: 700; margin-bottom: 18px; }
.hero p { color: #c9d8eb; max-width: 760px; font-size: 17px; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.tag {
  border: 1px solid rgba(121, 184, 255, .4);
  color: #cfe4ff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(74, 144, 226, .12);
}
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4a90e2;
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.stat {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 18px;
  border-radius: 8px;
}
.stat strong { display: block; font-size: 28px; color: #ffffff; }
.stat span { font-size: 13px; color: #a9bed7; }

.page { max-width: 1240px; margin: 0 auto; padding: 40px; }
.breadcrumb { font-size: 13px; color: #60748f; margin-bottom: 18px; }
.breadcrumb a { color: #4a90e2; }
.back { display: inline-block; margin-bottom: 22px; color: #4a90e2; font-size: 14px; }
.section { padding: 44px 0; border-top: 1px solid #e2e8f0; }
.section-title {
  font-size: 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before { content: ""; width: 4px; height: 22px; background: #4a90e2; border-radius: 2px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.card {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 20px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.card h3 { font-size: 17px; color: #10233d; margin-bottom: 6px; }
.card .series { font-size: 13px; color: #4a90e2; font-weight: 600; margin-bottom: 10px; }
.card p { font-size: 14px; color: #44566b; margin-bottom: 14px; flex: 1; }
.card .spec { font-size: 13px; color: #23344a; border-top: 1px solid #edf1f6; padding-top: 12px; }
.card a { color: #4a90e2; font-weight: 600; }

.dir-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  overflow: hidden;
}
.dir-table th, .dir-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  font-size: 14px;
}
.dir-table th { background: #f0f5fc; color: #10233d; }
.dir-table tr:last-child td { border-bottom: 0; }
.dir-table a { color: #4a90e2; font-weight: 600; }
.dir-scroll { max-height: 260px; overflow-y: auto; border-radius: 8px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
}
.spec-table th, .spec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  font-size: 14px;
}
.spec-table th { background: #f0f5fc; color: #10233d; width: 240px; }
.spec-table tr:last-child td { border-bottom: 0; }

.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.detail {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 20px;
}
.detail h3 { font-size: 17px; margin-bottom: 10px; color: #10233d; }
.detail p { font-size: 14px; color: #44566b; }

details {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px 20px;
}
summary { font-weight: 600; cursor: pointer; color: #10233d; font-size: 16px; }
details p { margin-top: 10px; color: #44566b; font-size: 15px; }

.contact {
  background: #08111f;
  color: #ffffff;
  text-align: center;
  padding: 44px 40px;
}
.contact h2 { font-size: 26px; margin-bottom: 14px; }
.contact p { color: #a9bed7; margin-bottom: 22px; }
.contact .meta { color: #7f97b5; font-size: 13px; margin-top: 18px; }

footer {
  background: #050b14;
  color: #60748f;
  text-align: center;
  padding: 20px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .topbar { padding: 14px 20px; flex-wrap: wrap; gap: 12px; }
  .topnav { order: 3; width: 100%; }
  .topnav { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; padding: 44px 20px 40px; }
  .page { padding: 28px 20px; }
  h1 { font-size: 32px; }
  .stat strong { font-size: 24px; }
}