/* Shared visual foundation for every Zhixing page. Page styles follow this file. */
:root {
  --zx-blue: #2c4a7c;
  --zx-blue-deep: #1e3a66;
  --zx-blue-overlay: #23426f;
  --zx-blue-footer: #142a4a;
  --zx-gold: #e8943a;
  --zx-gold-soft: #f4c888;
  --zx-cream: #f4efe4;
  --zx-white: #ffffff;
  --zx-ink: #18242f;
  --zx-muted: #5c6b7e;
  --zx-border: #5c7ba8;
  --zx-radius: 8px;
  --zx-card-radius: 12px;
  --zx-max-width: 1440px;
  --zx-font-cn: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --zx-font-display: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --zx-font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--zx-font-cn);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
section { max-width: none; scroll-margin-top: 90px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

/* Both header markup variants used by the legacy pages share one shell. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(30, 58, 102, .97);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header .header-inner,
.site-header .nav-inner {
  width: min(100%, var(--zx-max-width));
  min-height: 72px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5.55vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .logo,
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-header .logo-mark,
.site-header .brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--zx-radius); background: var(--zx-gold); color: var(--zx-blue-footer);
  font-family: var(--zx-font-display); font-size: 20px; font-weight: 700;
}
.site-header .logo-text,
.site-header .brand-text { color: var(--zx-white); font-size: 18px; font-weight: 700; letter-spacing: .3px; }
.site-header .nav-menu,
.site-header .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
.site-header .nav-menu a,
.site-header .nav-links a { color: rgba(255, 255, 255, .82); font-size: 14px; transition: color .2s ease; }
.site-header .nav-menu a:hover,
.site-header .nav-menu a.active,
.site-header .nav-links a:hover,
.site-header .nav-links a.active { color: var(--zx-gold); }
.site-header .nav-cta,
.site-header .header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border: 0; border-radius: var(--zx-radius);
  background: var(--zx-gold); color: var(--zx-blue-footer); font-size: 14px; font-weight: 700;
}
.site-header .nav-toggle { display: none; padding: 7px; background: transparent; border: 0; }
.site-header .nav-toggle span { display: block; width: 24px; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--zx-white); }

/* Shared utility controls. More specific page rules can still choose their own geometry. */
.btn, .btn-primary, .btn-gold, .btn-outline, .btn-ghost, .header-cta, .nav-cta, .cta-btn {
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(232, 148, 58, .45);
  outline-offset: 3px;
}
.back-top, .to-top { z-index: 120; }

@media (max-width: 768px) {
  .site-header .nav-toggle { display: block; }
  .site-header .nav-cta, .site-header .header-cta { display: none; }
  .site-header .nav-menu,
  .site-header .nav-links {
    position: absolute; top: 72px; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 16px; background: var(--zx-blue-deep);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .site-header .nav-menu.open,
  .site-header .nav-links.open,
  .site-header.open .nav-menu,
  .site-header.open .nav-links { display: flex; }
  .site-header .nav-menu a,
  .site-header .nav-links a { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .site-header .nav-menu a:last-child,
  .site-header .nav-links a:last-child { border-bottom: 0; }
}