:root {
  --bg: #f6f8fc;  --surface: #ffffff;  --surface-muted: #edf3fc;  --text: #12213d;  --muted: #596884;  --brand: #0d5ab5;  --brand-soft: #dce9ff;  --line: #d8e2f2;  --ok: #117a4b;  --warn: #be7a1f;  --danger: #b42318;  --radius-lg: 18px;  --radius-md: 12px;  --radius-sm: 8px;}

* {
  box-sizing: border-box;}

html,
body {
  margin: 0;  padding: 0;}

body {
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;  color: var(--text);  background: radial-gradient(circle at top right, #e9f1ff 0%, var(--bg) 46%, #f3f7fd 100%);  line-height: 1.6;}

a {
  color: inherit;  text-decoration: none;}

.container {
  width: min(1120px, 92vw);  margin: 0 auto;}

.site-header {
  position: sticky;  top: 0;  z-index: 50;  backdrop-filter: blur(8px);  background: rgba(246, 248, 252, 0.9);  border-bottom: 1px solid var(--line);}

.header-inner {
  min-height: 66px;  display: flex;  align-items: center;  justify-content: space-between;  gap: 18px;}

.brand {
  display: inline-flex;  align-items: center;  gap: 10px;  font-size: 18px;  font-weight: 700;  white-space: nowrap;}

.brand-dot {
  width: 30px;  height: 30px;  border-radius: 9px;  background: linear-gradient(135deg, #5ea1ff, var(--brand));  box-shadow: 0 8px 20px rgba(13, 90, 181, 0.28);}

.main-nav {
  display: flex;  gap: 16px;  flex-wrap: wrap;}

.nav-link {
  font-size: 14px;  color: var(--muted);  padding: 8px 12px;  border-radius: var(--radius-sm);}

.nav-link:hover,
.nav-link.active {
  color: var(--brand);  background: var(--brand-soft);}

.site-main {
  padding: 28px 0 48px;}

.hero {
  background: linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);  border: 1px solid var(--line);  border-radius: var(--radius-lg);  padding: 28px;  display: grid;  grid-template-columns: 1.2fr 0.8fr;  gap: 20px;  align-items: center;  margin-bottom: 24px;}

.hero h1 {
  margin: 8px 0 10px;  line-height: 1.3;  font-size: clamp(25px, 3.2vw, 36px);}

.hero p {
  margin: 0;  color: var(--muted);  font-size: 15px;}

.hero-tag {
  display: inline-flex;  align-items: center;  gap: 8px;  color: var(--brand);  background: var(--brand-soft);  border-radius: 999px;  padding: 6px 12px;  font-size: 13px;  font-weight: 600;}

.hero-side {
  background: var(--surface);  border: 1px solid var(--line);  border-radius: var(--radius-md);  padding: 14px;}

.hero-side h3 {
  margin: 4px 0 8px;  font-size: 15px;}

.hero-side p {
  margin: 0;  color: var(--muted);  font-size: 13px;}

.section {
  background: var(--surface);  border: 1px solid var(--line);  border-radius: var(--radius-lg);  padding: 24px;  margin-bottom: 18px;}

.section-title {
  margin: 0 0 8px;  font-size: 22px;}

.section-desc {
  margin: 0;  color: var(--muted);  font-size: 14px;}

.split {
  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr));  gap: 16px;}

.grid-3 {
  display: grid;  grid-template-columns: repeat(3, minmax(0, 1fr));  gap: 14px;}

.card {
  border: 1px solid var(--line);  border-radius: var(--radius-md);  background: var(--surface);  padding: 16px;}

.card h3,
.card h4 {
  margin: 0 0 6px;  font-size: 16px;}

.card p {
  margin: 0;  color: var(--muted);  font-size: 14px;}

.meta-item {
  border: 1px dashed var(--line);  border-radius: var(--radius-md);  padding: 14px;  background: var(--surface-muted);}

.meta-label {
  display: block;  color: var(--muted);  font-size: 12px;}

.meta-value {
  margin-top: 4px;  display: block;  font-size: 15px;  font-weight: 600;  word-break: break-all;}

.list {
  margin: 10px 0 0;  padding-left: 18px;  color: var(--muted);  font-size: 14px;}

.list li + li {
  margin-top: 6px;}

.timeline {
  display: grid;  gap: 10px;}

.timeline-item {
  display: grid;  grid-template-columns: 120px 1fr;  gap: 12px;  border: 1px solid var(--line);  border-radius: var(--radius-md);  padding: 12px;  background: var(--surface-muted);}

.timeline-time {
  color: var(--brand);  font-size: 13px;  font-weight: 700;}

.timeline-body {
  font-size: 14px;  color: var(--text);}

.contact-grid {
  display: grid;  grid-template-columns: 1fr 1fr;  gap: 16px;}

.contact-item {
  border: 1px solid var(--line);  border-radius: var(--radius-md);  padding: 14px;}

.contact-item h4 {
  margin: 0 0 6px;  font-size: 15px;}

.contact-item p {
  margin: 0;  color: var(--muted);  font-size: 14px;}

.simple-form {
  display: grid;  gap: 10px;}

.simple-form label {
  font-size: 13px;  color: var(--muted);}

.simple-form input,
.simple-form textarea {
  width: 100%;  border: 1px solid var(--line);  border-radius: 10px;  background: #fff;  font-size: 14px;  padding: 10px 12px;  font-family: inherit;}

.simple-form textarea {
  min-height: 90px;  resize: vertical;}

.btn {
  display: inline-flex;  justify-content: center;  align-items: center;  border: 0;  border-radius: 10px;  font-size: 14px;  font-weight: 600;  padding: 10px 14px;  cursor: pointer;}

.btn-primary {
  color: #fff;  background: linear-gradient(135deg, #2a7ae4, var(--brand));}

.badge {
  display: inline-flex;  align-items: center;  padding: 4px 8px;  border-radius: 999px;  font-size: 12px;  font-weight: 600;  margin-right: 6px;}

.badge.ok {
  background: #def7ea;  color: var(--ok);}

.badge.warn {
  background: #fff3dd;  color: var(--warn);}

.badge.danger {
  background: #fde7e7;  color: var(--danger);}

.legal-article {
  background: var(--surface);  border: 1px solid var(--line);  border-radius: var(--radius-lg);  padding: 24px;}

.legal-article h1 {
  margin: 0 0 10px;  font-size: 28px;}

.legal-article h2 {
  margin: 18px 0 8px;  font-size: 18px;}

.legal-article p {
  margin: 0;  color: var(--muted);  font-size: 14px;}

.legal-article p + p,
.legal-article ul + p,
.legal-article p + ul {
  margin-top: 8px;}

.legal-article ul {
  margin: 0;  padding-left: 18px;  color: var(--muted);  font-size: 14px;}

.legal-article li + li {
  margin-top: 6px;}

.notice {
  margin-top: 14px;  border: 1px solid var(--line);  border-radius: var(--radius-md);  background: var(--surface-muted);  padding: 12px;  color: var(--muted);  font-size: 13px;}

.site-footer {
  border-top: 1px solid var(--line);  background: #f1f5fc;  padding: 24px 0 36px;}

.footer-grid {
  display: grid;  grid-template-columns: 1.4fr 1fr 1fr;  gap: 18px;}

.footer-grid h4 {
  margin: 0 0 8px;  font-size: 14px;}

.footer-grid p,
.footer-grid a {
  margin: 0;  color: var(--muted);  font-size: 13px;}

.footer-grid a:hover {
  color: var(--brand);}

.footer-links {
  display: grid;  gap: 6px;}

.records {
  margin-top: 14px;  border-top: 1px dashed var(--line);  padding-top: 12px;  color: var(--muted);  font-size: 12px;  display: flex;  flex-wrap: wrap;  gap: 10px;}

.records a {
  color: var(--brand);}

.muted {
  color: var(--muted);}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;  }

  .split,
  .grid-3,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;  }

  .timeline-item {
    grid-template-columns: 1fr;  }
}

@media (max-width: 640px) {
  .header-inner {
    flex-direction: column;    align-items: flex-start;    padding: 10px 0;  }

  .main-nav {
    gap: 8px;  }

  .section,
  .legal-article,
  .hero {
    padding: 18px;  }
}