:root {
  --navy: #0c2340;
  --navy-2: #14324f;
  --ink: #1a2433;
  --muted: #5b6b7f;
  --line: #e4e9f0;
  --bg-soft: #f5f8fb;
  --accent: #0e7f9c;
  --accent-dark: #0b6478;
  --accent-soft: #e8f4f7;
  --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand-navy { color: var(--navy); }
.brand-muted { color: var(--muted); }
.brand-accent { color: var(--accent); }

.bg-navy { background-color: var(--navy); }
.bg-navy-2 { background-color: var(--navy-2); }
.bg-soft { background-color: var(--bg-soft); }
.bg-accent-soft { background-color: var(--accent-soft); }

.border-line { border-color: var(--line); }

.btn-accent {
  background-color: var(--accent);
  color: #fff;
  transition: background-color .18s ease;
}
.btn-accent:hover { background-color: var(--accent-dark); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color .18s ease, color .18s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.link-accent { color: var(--accent); }
.link-accent:hover { color: var(--accent-dark); }

.topline {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(12, 35, 64, .82), rgba(12, 35, 64, .62));
}

.stat-value {
  font-size: 1.9rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover {
  box-shadow: 0 10px 30px rgba(12, 35, 64, .08);
  transform: translateY(-2px);
}

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
table.spec th, table.spec td {
  text-align: left;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.spec th {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 600;
}

.nav-link {
  color: #e6ecf5;
  font-size: .95rem;
  transition: color .15s ease;
}
.nav-link:hover { color: #ffffff; }

.footer-link { color: #b9c6d6; font-size: .9rem; }
.footer-link:hover { color: #ffffff; }

.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

.tag {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.lang-btn {
  font-size: .8rem;
  color: #e6ecf5;
  padding: .2rem .5rem;
  border: 1px solid rgba(230, 236, 245, .35);
  border-radius: 6px;
  transition: all .15s ease;
}
.lang-btn:hover { color: #fff; border-color: #fff; }
.lang-btn.active { background: #fff; color: var(--navy); border-color: #fff; }