:root {
  --bg-deep: #06080c;
  --bg-base: #0c0f16;
  --bg-surface: #141820;
  --bg-card: #1a1f2b;
  --bg-elevated: #1f2533;
  --border-subtle: #1e2533;
  --border-default: #2a3243;
  --border-active: #3d4a63;
  --text-primary: #e8ecf1;
  --text-secondary: #8b95a8;
  --text-muted: #525b6e;
  --accent-400: #60a5fa;
  --accent-500: #3b82f6;
  --accent-600: #2563eb;
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #3b82f6 100%);
  --font-display: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: Consolas, "Courier New", ui-monospace, monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --container-max: 1280px;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

.dot-grid-overlay {
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, var(--border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.container-narrow {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 120px;
}

.section-sm {
  padding-block: 80px;
}

.section-divider {
  width: 100%;
  height: 1px;
  background: var(--border-subtle);
  margin-block: 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-400);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.section-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text-primary);
  margin-bottom: 16px;
}

.section-subheading {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}

.page-header {
  padding: 160px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.breadcrumb a:hover {
  color: var(--accent-400);
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

.nav.scrolled,
.nav.fixed {
  background-color: rgba(6, 8, 12, 0.85);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border-subtle);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo img {
  height: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
}

/* 下拉导航（SKILL §7.3 标准：服务范围=大类；解决方案/技术服务/成功案例/资讯动态=子栏目） */
.nav-drop-wrap{position:relative;display:inline-block}
.nav-drop-wrap .nav-drop{position:absolute;top:100%;left:0;min-width:190px;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:8px 6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.22s;z-index:999;display:flex;flex-direction:column}
.nav-drop-wrap:hover .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-wrap .nav-drop a{display:block;padding:8px 14px;border-radius:6px;font-size:14px;color:var(--text-secondary)!important;white-space:nowrap;text-decoration:none;background:transparent!important}
.nav-drop-wrap .nav-drop a:hover{background:var(--bg-card)!important;color:var(--text-primary)!important}
.nav-drop-wrap>a::after{content:"";display:inline-block;margin-left:5px;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65}

.nav-cta .btn {
  margin-left: 16px;
}

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}

.nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: 0.3s;
}

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: var(--bg-base);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.nav-mobile-menu.open {
  display: flex;
}

.nav-mobile-menu a {
  font-size: 1.25rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.nav-mobile-menu a:hover {
  color: var(--text-primary);
}

/* --- Components --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
}

.btn-primary:hover {
  background: var(--accent-600);
  border-color: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover {
  border-color: var(--accent-400);
  color: var(--accent-400);
  transform: translateY(-1px);
}

.btn-arrow::after {
  content: '\2192';
  transition: transform 0.2s;
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.tag-active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-400);
  border-color: rgba(59, 130, 246, 0.3);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chips .tag {
  cursor: pointer;
  transition: all 0.2s;
}

.filter-chips .tag:hover,
.filter-chips .tag.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-400);
  border-color: rgba(59, 130, 246, 0.3);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.pagination a:hover {
  border-color: var(--accent-400);
  color: var(--accent-400);
}

.pagination .active {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}

/* --- Cards --- */
.service-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.work-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.work-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.work-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-surface);
}

.work-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.work-card:hover .work-card-media img {
  transform: scale(1.04);
}

.work-card-info {
  padding: 24px;
}

.work-card-info h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.work-card-info p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.list-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, transform 0.2s;
}

.list-card:hover {
  border-color: var(--border-active);
  transform: translateX(4px);
}

.team-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, transform 0.3s;
}

.team-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
}

.stat-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

.tech-item:hover {
  border-color: var(--border-active);
}

.tech-item img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.work-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.work-tag-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 100px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-400);
}

/* --- Hero --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
  z-index: 0;
}

.hero-ring {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 24px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-400);
  margin-bottom: 32px;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 24px;
}

.hero-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.8rem;
  animation: float 2s ease-in-out infinite;
}

.hero-scroll-indicator span {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* --- Hero 三屏轮播（§5.1 / §11.1 单层背景 / §11.6 无 JS 降级） --- */
.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 560px;
  margin-inline: auto;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, visibility .6s ease;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 6;
}
.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-active);
  opacity: .5;
  cursor: pointer;
  transition: .3s;
}
.hero-dot.active {
  width: 28px;
  border-radius: 6px;
  background: var(--accent-400);
  opacity: 1;
}
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 24, 32, .55);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  transition: .2s;
}
.hero-arrow:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-400);
}
.hero-prev { left: 6px; }
.hero-next { right: 6px; }
.no-js .hero-carousel { min-height: auto; }
.no-js .hero-slide {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: none;
}
.no-js .hero-slide:first-child { display: flex; }
@media (max-width: 768px) {
  .hero-carousel { min-height: 480px; }
  .hero-arrow { display: none; }
}

/* --- Stats --- */
.stats-section {
  padding-block: 80px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

/* --- Process Timeline (home) --- */
.process-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 40px; }
.process-timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 1px; background: var(--border-default); }
.process-step { display: flex; gap: var(--space-4); padding: var(--space-6) 0; position: relative; }
.process-step::before { content: ''; position: absolute; left: -29px; top: 28px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--border-default); z-index: 1; transition: all 0.4s; }
.process-step:hover::before { border-color: var(--accent-500); background: var(--accent-500); box-shadow: 0 0 12px rgba(59,130,246,0.4); }
.process-number { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-400); letter-spacing: 0.1em; flex-shrink: 0; width: 32px; }
.process-content h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.process-content p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.process-cta { text-align: center; margin-top: var(--space-8); }

/* --- Sidebar --- */
.sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.sidebar-widget { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.sidebar-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.sidebar-list li a { font-size: 0.85rem; color: var(--text-secondary); transition: color 0.2s; display: block; padding: var(--space-1) 0; }
.sidebar-list li a:hover { color: var(--accent-400); }
.sidebar-tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- CTA --- */
.cta-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Timeline --- */
.timeline-compact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-step {
  display: flex;
  gap: 24px;
  position: relative;
  padding-bottom: 40px;
}

.tl-step:last-child {
  padding-bottom: 0;
}

.tl-dot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
}

.tl-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-400);
  position: relative;
  z-index: 2;
}

.process-line-fill {
  position: absolute;
  top: 48px;
  width: 2px;
  flex: 1;
  background: var(--border-default);
}

.tl-step:last-child .process-line-fill {
  display: none;
}

.tl-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.tl-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Article --- */
.article-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.article-body h2 {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-top: 48px;
  margin-bottom: 16px;
}

.article-body h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-body p {
  margin-bottom: 20px;
}

.article-body ul,
.article-body ol {
  margin-bottom: 20px;
  padding-left: 24px;
}

.article-body li {
  margin-bottom: 8px;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-surface);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--accent-400);
}

.article-body pre {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-x: auto;
  margin-bottom: 24px;
}

.article-body pre code {
  background: none;
  padding: 0;
}

.article-body blockquote {
  border-left: 3px solid var(--accent-500);
  padding-left: 20px;
  margin: 24px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.article-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 24px 0;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.article-figure {
  margin: 32px 0;
}

.article-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.article-figure figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}

/* --- Footer --- */
.footer {
  padding: 36px 0 18px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 20px;
}

.footer-brand {
  max-width: 320px;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 16px;
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent-400);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-geo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Geometric --- */
.geo-ring {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  opacity: 0.2;
  pointer-events: none;
}

.geo-shape {
  position: absolute;
  border: 1px solid var(--border-subtle);
  opacity: 0.15;
  pointer-events: none;
}

.angle-line {
  position: absolute;
  width: 120px;
  height: 1px;
  background: var(--border-subtle);
  transform-origin: left center;
  pointer-events: none;
}

.geo-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.06;
  pointer-events: none;
}

.cta-geo-ring {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  opacity: 0.12;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --- Animations ---
   关键：默认完全可见，元素永远不会因为动画初始状态而"消失"。
   仅 transform 偏移做"滑入"动画，opacity 始终 1，避免"页面大量空白"问题。 */
.reveal {
  opacity: 1; transform: translateY(20px);
  transition: transform 0.7s ease;
}
.reveal.visible {
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.reveal-left {
  opacity: 1; transform: translateX(-20px);
  transition: transform 0.7s ease;
}
.reveal-left.visible {
  transform: translateX(0);
}

.reveal-right {
  opacity: 1; transform: translateX(20px);
  transition: transform 0.7s ease;
}
.reveal-right.visible {
  transform: translateX(0);
}

.reveal-scale {
  opacity: 1; transform: scale(0.97);
  transition: transform 0.7s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Contact Layout --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-info-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.contact-info-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

/* --- Blog List --- */
.blog-list-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- Engagement Cards --- */
.engagement-card {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, transform 0.3s;
}

.engagement-card:hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
}

/* --- Sidebar --- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sidebar-widget {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.sidebar-widget h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.sidebar-widget ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-widget ul a {
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.sidebar-widget ul a:hover {
  color: var(--accent-400);
}

/* --- Page Header Styles --- */
.page-header {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%);
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin-inline: auto;
  margin-top: 12px;
  line-height: 1.7;
}

/* --- Responsive: 1024px --- */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-grid .footer-brand {
    grid-column: 1 / -1;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Responsive: 768px --- */
@media (max-width: 768px) {
  .section {
    padding-block: 80px;
  }

  .section-sm {
    padding-block: 60px;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

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

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }

  .hero-description {
    font-size: 1rem;
  }

  .page-header {
    padding: 120px 0 60px;
  }

  .page-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .tl-step {
    gap: 16px;
  }

  .timeline-compact {
    padding-left: 0;
  }
}

/* --- Responsive: 480px --- */
@media (max-width: 480px) {
  .container {
    padding-inline: 16px;
  }

  .container-narrow {
    padding-inline: 16px;
  }

  .section {
    padding-block: 60px;
  }

  .section-sm {
    padding-block: 48px;
  }

  .grid-6 {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .page-header {
    padding: 100px 0 48px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .contact-grid {
    gap: 32px;
  }

  .service-card {
    padding: 24px;
  }

  .stat-card {
    padding: 24px;
  }

  .article-body {
    font-size: 1rem;
  }
}

/* --- Responsive: 380px --- */
@media (max-width: 380px) {
  .btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .btn-lg {
    padding: 12px 28px;
    font-size: 0.95rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .pagination a,
  .pagination span {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .filter-chips {
    gap: 6px;
  }

  .hero-ring {
    width: 300px;
    height: 300px;
  }
}

/* --- City Links / Friend Links --- */
.city-links-section, .friend-links-section { padding: 24px 0; border-top: 1px solid var(--border-subtle); }
.city-links-section h3, .friend-links-section h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; text-align: center; }
.city-links-grid, .friend-links-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.city-links-grid a, .friend-links-grid a { display: inline-block; padding: 4px 12px; font-size: 12px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); text-decoration: none; transition: all 0.2s; }
.city-links-grid a:hover, .friend-links-grid a:hover { color: var(--accent-400); border-color: var(--accent-500); }

/* --- Float Widget --- */
.zfkf-float { position: fixed; right: 20px; bottom: 120px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.zfkf-item { position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: all 0.25s; cursor: pointer; }
.zfkf-item:hover { transform: scale(1.08); color: #fff; }
.zfkf-phone { background: var(--accent-500); }
.zfkf-wechat { background: #07c160; }
.zfkf-consult { background: var(--warm-500, #f59e0b); }
.zfkf-top { background: #334155; }
.zfkf-tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: rgba(0,0,0,0.78); color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 10001; }
.zfkf-item:hover .zfkf-tip { opacity: 1; }
.zfkf-wechat-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: center; justify-content: center; }
.zfkf-wechat-mask.zfkf-show { display: flex; }
.zfkf-wechat-box { background: #fff; border-radius: 12px; padding: 24px; text-align: center; position: relative; max-width: 80vw; }
.zfkf-wechat-box img { width: 180px; height: 180px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; }
.zfkf-wechat-noimg { width: 180px; height: 80px; display: flex; align-items: center; justify-content: center; background: #f6f7f9; border-radius: 8px; font-size: 16px; color: #07c160; font-weight: 600; }
.zfkf-wechat-box p { margin: 12px 0 0; font-size: 14px; color: #333; }
.zfkf-wechat-close { position: absolute; top: 8px; right: 12px; font-size: 22px; color: #666; cursor: pointer; line-height: 1; }
@media (max-width: 768px) { .zfkf-float { right: 10px; bottom: 100px; } .zfkf-item { width: 42px; height: 42px; } .zfkf-tip { display: none; } }


/* ========== 追加：标准组件块（Hero轮播/信任条/4列卡/导航下拉/页脚底/移动端/动画） ========== */
/* ========== Hero 三屏轮播 ========== */
.hero{position:relative;overflow:hidden}
.hero-carousel{position:relative;min-height:480px;z-index:2}
.hero-slide{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease,visibility .6s}
.hero-slide.active{opacity:1;visibility:visible;transform:none}
.no-js .hero-slide{display:none}
.no-js .hero-slide:first-child{display:flex}
.hero-content{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1;padding:40px 0}
.hero-icon-main{font-size:48px;margin-bottom:18px;color:var(--accent)}
.hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--text);margin-bottom:14px;line-height:1.2}
.hero-subtitle{font-size:clamp(20px,2.4vw,30px);font-weight:800;color:var(--text);margin:14px 0 10px;line-height:1.3}
.hero-desc{max-width:740px;margin:0 auto 20px;color:#475569;font-size:16px;line-height:1.85}
.hero-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 24px;padding:0;list-style:none}
.hero-points li{position:relative;padding-left:22px;color:#334155;font-size:15px}
.hero-points li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:3}
.hero-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--primary);background:transparent;cursor:pointer;padding:0;transition:.25s}
.hero-dot.active{background:var(--primary);transform:scale(1.15)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.85);color:var(--primary);font-size:24px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.12);transition:.25s}
.hero-arrow:hover{background:var(--primary);color:#fff}
.hero-prev{left:18px}
.hero-next{right:18px}
@media(max-width:768px){.hero-carousel{min-height:440px}.hero-arrow{display:none}.hero-dots{bottom:12px}}

/* ========== 信任数据条 ========== */
.trust-bar{background:var(--primary);padding:40px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff}
.trust-icon{width:34px;height:34px;color:#fff;opacity:.92}
.trust-num{font-size:30px;font-weight:800;color:#fff;line-height:1}
.trust-num i{font-style:normal;font-size:20px;margin-left:2px}
.trust-label{font-size:14px;color:rgba(255,255,255,.85)}
@media(max-width:768px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ========== 区块通用 ========== */
.section{padding:64px 0}
.section-header{text-align:center;max-width:720px;margin:0 auto 44px}
.section-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:rgba(35,131,226,.1);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.section-header h2{font-size:30px;font-weight:800;color:var(--text);margin-bottom:12px}
.section-desc{font-size:16px;color:#64748b;line-height:1.7}
.section-footer{text-align:center;margin-top:36px}

/* ========== 核心服务 4 列 ========== */
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{display:block;background:#fff;border-radius:14px;border:1px solid #ececec;padding:32px 28px;transition:all .25s ease;position:relative;box-shadow:0 2px 12px rgba(0,0,0,.04);text-decoration:none}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(35,131,226,.12);border-color:var(--accent)}
.card-icon{font-size:28px;margin-bottom:16px;color:var(--accent)}
.card h3{font-size:18px;color:var(--text);margin-bottom:12px}
.card p{font-size:15px;color:#64748b;line-height:1.7;margin-bottom:16px}
.card-link{font-size:15px;color:var(--primary);font-weight:600}
@media(max-width:1023px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:576px){.card-grid{grid-template-columns:1fr}}

/* ========== 中部 / 底部 CTA ========== */
.section-cta-mid{background:linear-gradient(135deg,var(--accent),var(--primary));text-align:center}
.section-cta-mid .cta-content h2{color:#fff}
.section-cta-mid .cta-content p{color:rgba(255,255,255,.88);margin-bottom:28px;font-size:18px}
.cta-section{background:var(--bg-alt,#f7f7f5);padding:64px 0;text-align:center}
.cta-content h2{font-size:30px;font-weight:800;color:var(--text);margin-bottom:12px}
.cta-content p{font-size:17px;color:#64748b;margin-bottom:28px}
.cta-section .cta-content h2,.cta-section .cta-content p{color:var(--text)}

/* ========== 资讯 ========== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:#fff;border:1px solid #ececec;border-radius:14px;padding:28px;transition:.25s ease;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.news-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(35,131,226,.1)}
.news-date{display:block;font-size:13px;color:#94a3b8;margin-bottom:10px}
.news-card h3{font-size:17px;margin-bottom:10px;line-height:1.5}
.news-card h3 a{color:var(--text);text-decoration:none}
.news-card h3 a:hover{color:var(--primary)}
.news-card p{font-size:15px;color:#64748b;line-height:1.6}
@media(max-width:768px){.news-grid{grid-template-columns:1fr}}

/* ========== 导航下拉 ========== */
.nav-drop-wrap{position:relative;display:inline-block}
.nav-drop-wrap>a{cursor:pointer}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:180px;background:#fff;border:1px solid #ececec;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:8px 0;opacity:0;visibility:hidden;transition:.25s;z-index:300}
.nav-drop-wrap:hover .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop a{display:block;padding:10px 20px;font-size:14px;color:var(--text);white-space:nowrap;text-decoration:none;border-radius:6px;background:transparent}
.nav-drop a:hover{background:rgba(35,131,226,.08);color:var(--primary)}
.nav-drop-wrap>a::after{content:"";display:inline-block;margin-left:5px;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
@media(max-width:768px){.nav-drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:0 0 6px}.nav-drop a{padding:8px 20px;color:#52525b}}

/* ========== 页脚背景（浅色模板白字可读） ========== */
.site-footer{background:var(--primary);color:#fff;padding:56px 0 28px}
.site-footer .footer-col h4{color:#fff}
.site-footer .footer-col p{color:rgba(255,255,255,.78)}
.site-footer .footer-col ul a{color:rgba(255,255,255,.82)}
.site-footer .footer-col ul a:hover{color:#fff}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.site-footer .footer-bottom a{color:rgba(255,255,255,.82)}

/* ========== 移动端导航抽屉 ========== */
@media(max-width:768px){.nav-toggle{display:flex}.main-nav{position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;background:#fff;flex-direction:column;padding:80px 24px 24px;transform:translateX(100%);transition:transform .3s ease;z-index:1000;box-shadow:-8px 0 30px rgba(0,0,0,.15);overflow-y:auto}.main-nav.open{transform:translateX(0)}.main-nav .nav-list{flex-direction:column;gap:0}.main-nav .nav-list>li{width:100%;border-bottom:1px solid #f0f0f0}.main-nav .nav-list>li>a{display:block;padding:14px 0;color:var(--text)!important}}

/* ========== 进场动画 ========== */
.section,.card,.news-card,.trust-item{opacity:1}
.reveal,.in-view{opacity:1!important}

/* 微信弹窗兼容 class */
.zfkf-wechat-mask.show{display:flex}

/* ========== ontic 暗色主题适配（标准组件块在暗底上的可读性） ========== */
.hero{background:linear-gradient(180deg,#0c0f16 0%,#141820 100%);color:#e8ecf1}
.hero h1,.hero-subtitle{color:#e8ecf1}
.hero-desc{color:#9fb0c3}
.hero-points li{color:#9fb0c3}
.hero-points li::before{background:#3b82f6}
.hero-icon-main{color:#3b82f6}
.hero-dot{border-color:#3b82f6}
.hero-dot.active{background:#3b82f6}
.hero-arrow{background:rgba(255,255,255,.08);color:#e8ecf1;border:1px solid #2a3243}
.hero-arrow:hover{background:#3b82f6;color:#fff}
.trust-bar{background:#3b82f6}
.trust-num,.trust-label,.trust-icon{color:#fff}
.section-header h2{color:#e8ecf1}
.section-desc{color:#8b95a8}
.section-icon{background:rgba(59,130,246,.12);color:#3b82f6}
.card{background:#1a1f2b;border:1px solid #2a3243;color:#e8ecf1}
.card h3{color:#e8ecf1}
.card p{color:#8b95a8}
.card-icon{color:#3b82f6}
.card-link{color:#3b82f6}
.card:hover{border-color:#3b82f6;box-shadow:0 16px 36px rgba(59,130,246,.12)}
.news-card{background:#1a1f2b;border:1px solid #2a3243;color:#e8ecf1}
.news-card h3 a{color:#e8ecf1}
.news-card h3 a:hover{color:#3b82f6}
.news-card p{color:#8b95a8}
.news-date{color:#525b6e}
.news-card:hover{border-color:#3b82f6}
.section-cta-mid{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.section-cta-mid .cta-content h2,.section-cta-mid .cta-content p{color:#fff}
.cta-section{background:#141820}
.cta-content h2{color:#e8ecf1}
.cta-content p{color:#8b95a8}
.cta-section .cta-content h2{color:#e8ecf1}
.cta-section .cta-content p{color:#8b95a8}

/* ========== ontic 暗色适配补充（修复 footer 空白与浅色污染） ========== */
/* 1) footer 装饰 SVG 固定尺寸，消除 flex 拉伸撑高（原 1424px 空白） */
.footer-geo svg { width: 180px; height: 180px; flex: none; }

/* 2) 站点 header_code 注入的浅色规则覆盖（body 前缀提权，加载顺序在注入块之前） */
body .city-links-section { background: var(--bg-surface, #141820); border-top-color: var(--border-subtle, #1e2533); }
body .city-links-section h3 { color: var(--text-muted, #525b6e); }
body .city-links-grid a { color: var(--text-secondary, #8b95a8); border-color: var(--border-subtle, #1e2533); }
body .city-links-grid a:hover { background: rgba(59,130,246,.15); color: #60a5fa; border-color: #3b82f6; }
body .friend-links-section { background: var(--bg-surface, #141820); border-top-color: var(--border-subtle, #1e2533); }
body .friend-links-section h3 { color: var(--text-muted, #525b6e); }
body .friend-links a { color: var(--text-secondary, #8b95a8); }
body .friend-links a:hover { color: #60a5fa; }

/* 3) 服务页/列表页公共浅色卡片覆盖（sp-page-wrap / sidebar 系列） */
body .sp-page-wrap .service-section h2,
body .sp-page-wrap .service-card h3,
body .sp-page-wrap .step h4,
body .sp-page-wrap .advantage-item strong { color: var(--text-primary, #e8ecf1); }
body .sp-page-wrap .service-card,
body .sp-page-wrap .advantage-item,
body .sp-page-wrap .step { background: var(--bg-card, #1a1f2b); border-color: var(--border-default, #2a3243); }
body .sp-page-wrap .service-card p,
body .sp-page-wrap .step p,
body .sp-page-wrap .advantage-item span { color: var(--text-secondary, #8b95a8); }
body .sp-page-wrap .alt-bg { background: var(--bg-surface, #141820); }
body .sidebar-widget > ul > li > a { background: var(--bg-card, #1a1f2b); color: var(--text-secondary, #8b95a8); }
body .sidebar-widget > ul > li > a:hover { background: var(--bg-elevated, #1f2533); color: #60a5fa; }

/* 4) .btn-outline 补全（ontic 原生仅有 .btn-secondary，home.html 使用 .btn-outline） */
.btn-outline { background: transparent; color: var(--text-primary, #e8ecf1); border-color: var(--border-default, #2a3243); }
.btn-outline:hover { border-color: var(--accent-400, #60a5fa); color: var(--accent-400, #60a5fa); transform: translateY(-1px); }