:root {
  --color-bg: #f4f6fb;
  --color-surface: #ffffff;
  --color-surface-dark: #0b132b;
  --color-accent: #0f4c81;
  --color-accent-soft: #d3e4ff;
  --color-text: #1f2937;
  --color-text-muted: #4b5563;
  --color-border: rgba(15, 76, 129, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 12px 24px rgba(15, 76, 129, 0.08);
  --shadow-md: 0 20px 40px rgba(11, 19, 43, 0.18);
  --container-width: min(1160px, 92vw);
  --transition: 0.28s ease;
  --spacing-section: clamp(72px, 12vw, 120px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

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

a:hover,
a:focus {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 76, 129, 0.06);
}

.header-container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}

.brand {
  display: grid;
  gap: 6px;
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand__title {
  font-size: 14px;
}

.brand__tagline {
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.16em;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.site-nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.site-nav a:hover,
.site-nav a:focus {
  background: rgba(15, 76, 129, 0.12);
  color: var(--color-accent);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text);
  display: block;
  margin: 4px auto;
  transition: transform var(--transition);
}

.nav-toggle__label {
  position: absolute;
  inset: auto auto 6px auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cta-button:hover,
.cta-button:focus {
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(120px, 18vw, 200px) 0 clamp(90px, 16vw, 160px);
  background: #020617;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 8s ease;
}

.hero__slide.is-active {
  opacity: 0.9;
  transform: scale(1.02);
}

.hero__content {
  position: relative;
  display: grid;
  gap: clamp(40px, 8vw, 80px);
  z-index: 1;
}

.hero__lead {
  max-width: 620px;
  display: grid;
  gap: 24px;
}

.hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 12px;
  opacity: 0.72;
}

.hero__lead h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.25;
  font-weight: 700;
}

.hero__summary {
  margin: 0;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.button--primary {
  background: linear-gradient(120deg, #2a6ef2, #143fa0);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.button--primary:hover,
.button--primary:focus {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  background: transparent;
}

.button--ghost:hover,
.button--ghost:focus {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.hero__metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.hero__metrics dt {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hero__metrics dd {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.section {
  padding: var(--spacing-section) 0;
}

.section--light {
  background: var(--color-bg);
}

.section--dark {
  background: var(--color-surface-dark);
  color: #f8fafc;
}

.section--accent {
  background: linear-gradient(130deg, rgba(15, 76, 129, 0.08), rgba(15, 76, 129, 0.02));
}

.section__header {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 56px);
  text-align: center;
  display: grid;
  gap: 12px;
}

.section__header h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
}

.section__header p {
  margin: 0;
  color: inherit;
  opacity: 0.8;
  font-size: 16px;
}

.card-grid {
  display: grid;
  gap: clamp(18px, 4vw, 24px);
}

.card-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.card-grid--three .feature-card,
.card-grid--four .feature-card {
  height: 100%;
}

.feature-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
  border: 1px solid rgba(15, 76, 129, 0.06);
}

.section--dark .feature-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  box-shadow: none;
}

.feature-card h3 {
  margin: 0;
  font-size: 20px;
}

.feature-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.section--dark .feature-card p {
  color: rgba(248, 250, 252, 0.76);
}

.feature-card--accent {
  background: #fff;
  border: 1px solid rgba(15, 76, 129, 0.12);
  box-shadow: 0 22px 40px rgba(15, 76, 129, 0.1);
}

.feature-card--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.feature-card time {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.text-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.case-card {
  padding: 24px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 10px;
}

.case-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.case-card p {
  margin: 0;
  font-size: 14px;
  color: rgba(248, 250, 252, 0.78);
}

/* 案例图片组样式 */
.case-image-group {
  grid-column: 1 / -1;
}

.case-image-group-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.case-image-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.case-image-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  padding: 12px;
}

.partner-grid span {
  background: #fff;
  border-radius: 999px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-weight: 600;
  color: var(--color-text);
}

.section--dark .partner-grid span {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  box-shadow: none;
}

.contact {
  position: relative;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.contact__details,
.contact__cta {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15, 76, 129, 0.08);
}

.contact__details h3,
.contact__cta h3 {
  margin-top: 0;
  margin-bottom: 14px;
}

.contact__details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.contact__details li {
  font-size: 15px;
  color: var(--color-text-muted);
}

.contact__details a {
  color: var(--color-accent);
  font-weight: 600;
}

.site-footer {
  background: #020617;
  color: rgba(248, 250, 252, 0.78);
  padding: 36px 0;
}

.footer__content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
}

.footer__record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer__record span {
  opacity: 0.4;
}

.chinese-calligraphy {
  font-family: '方正舒体', 'FZShuTi', '华文行楷', 'STXingkai', 'Microsoft YaHei', sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #8A2BE2; /* 紫色 */
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-weight: 600;
  transition: background var(--transition);
}

.back-to-top:hover,
.back-to-top:focus {
  background: rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

@media (max-width: 960px) {
  .site-nav {
    position: fixed;
    inset: 0 0 auto;
    top: 76px;
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(-110%);
    transition: transform var(--transition);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    gap: 0;
  }

  .site-nav li {
    width: 100%;
    border-bottom: 1px solid rgba(15, 76, 129, 0.08);
  }

  .site-nav a {
    width: 100%;
  }

  .site-nav.is-open {
    transform: translateY(0);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero__metrics {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .footer__content {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 680px) {
  .header-container {
    gap: 16px;
  }

  .brand {
    font-size: 13px;
  }

  .hero {
    padding-top: 140px;
  }

  .hero__lead h1 {
    font-size: 32px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact__details,
  .contact__cta {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__slide {
    transition: none;
  }
}