/*
 * XC权益数卡官网 v3.1.4 固定定位冲突根治版
 * 不推倒重做：继续基于现有 HTML、链接、图片和业务入口优化。
 * 重点：更轻的视觉层级、更稳定的响应式、更统一的卡片/按钮/间距。
 */

:root {
  --xc-primary: #1677ff;
  --xc-primary-2: #4f46e5;
  --xc-primary-dark: #0b5ed7;
  --xc-primary-soft: rgba(22, 119, 255, 0.10);
  --xc-bg: #f6f8fc;
  --xc-bg-2: #eef4ff;
  --xc-surface: rgba(255, 255, 255, 0.96);
  --xc-surface-soft: rgba(255, 255, 255, 0.72);
  --xc-border: rgba(29, 78, 216, 0.115);
  --xc-border-strong: rgba(29, 78, 216, 0.20);
  --xc-text: #152033;
  --xc-muted: #667085;
  --xc-light-muted: #8a97aa;
  --xc-radius-xl: 26px;
  --xc-radius-lg: 22px;
  --xc-radius-md: 16px;
  --xc-radius-sm: 12px;
  --xc-shadow: 0 18px 42px rgba(18, 38, 76, 0.08);
  --xc-shadow-soft: 0 8px 24px rgba(18, 38, 76, 0.055);
  --xc-sidebar: 256px;
  --xc-gap: 28px;
  --xc-header-h: 60px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  min-width: 320px;
  background:
    radial-gradient(circle at 8% -5%, rgba(22,119,255,.12), transparent 30%),
    radial-gradient(circle at 88% 4%, rgba(79,70,229,.09), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, var(--xc-bg) 44%, #f7f8fb 100%);
  color: var(--xc-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a, a:hover, a:focus { text-decoration: none; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ===== Layout 根基 ===== */
.site-wrapper {
  width: min(100% - 48px, 1280px) !important;
  max-width: 1280px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: var(--xc-sidebar) minmax(0, 1fr);
  gap: var(--xc-gap);
  align-items: start;
  position: relative;
}
header.left,
main.content { float: none !important; }
main.content { width: auto !important; min-width: 0; padding-bottom: 32px; }
section.white-bg,
section.shadow-blue,
section.shadow-dark {
  border-radius: var(--xc-radius-xl);
  box-shadow: var(--xc-shadow-soft) !important;
  border: 1px solid var(--xc-border);
  overflow: hidden;
}
section.white-bg { background: var(--xc-surface) !important; }
section.padding {
  padding: clamp(42px, 4.3vw, 58px) clamp(34px, 4.3vw, 52px) !important;
  margin-bottom: 26px;
}
section.padding + section.padding { margin-top: 0; }
.spacer { max-height: 24px; }
.row { align-items: stretch; }
.row > [class*="col-"] { min-width: 0; }

/* ===== Sidebar ===== */
header.left {
  width: var(--xc-sidebar) !important;
  height: auto !important;
  position: relative !important;
  top: auto !important;
  border-radius: var(--xc-radius-xl);
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: var(--xc-shadow) !important;
  backdrop-filter: blur(18px);
  overflow: visible;
  z-index: 20;
}
.header-inner { height: auto; padding: 22px 17px !important; }
header.left img { width: 52px; height: 52px; border-radius: 15px; object-fit: cover; box-shadow: 0 8px 18px rgba(22,119,255,.10); }
.site-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 850;
  color: #101828 !important;
  letter-spacing: -0.025em;
}
.site-title.dot:after,
.hero h1 .dot { display: none !important; }
.site-slogan { display: block; margin-top: 6px; color: var(--xc-muted); font-size: 12px; line-height: 1.55; }
header.left nav { width: 100%; margin-top: 20px; }
ul.vertical-menu { width: 100%; }
ul.vertical-menu li { margin: 3px 0 !important; }
ul.vertical-menu li a {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-height: 39px;
  padding: 9px 11px !important;
  border-radius: 13px;
  color: #344054 !important;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
ul.vertical-menu li a i { width: 18px; text-align: center; color: #93a4bc; }
ul.vertical-menu li a:hover,
ul.vertical-menu li a.active {
  background: linear-gradient(135deg, rgba(22,119,255,.105), rgba(79,70,229,.075));
  color: var(--xc-primary-dark) !important;
  transform: translateX(2px);
}
.header-cta-card {
  width: 100%;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(22,119,255,.08), rgba(255,255,255,.80));
  border: 1px solid var(--xc-border);
}
.header-cta-card p { color: var(--xc-muted); font-size: 12px; line-height: 1.55; }
header.left .footer { font-size: 11px; line-height: 1.65; color: #8a96aa; }
header.left .footer a { color: #667085 !important; }
header.left button.close { display: none; }

/* ===== Mobile Header / Menu ===== */
.mobile-header {
  display: none;
  position: relative;
  top: auto;
  z-index: 40;
  width: 100%;
  min-height: var(--xc-header-h);
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(18,38,76,.08);
  backdrop-filter: blur(16px);
}
.mobile-header img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.mobile-header .site-title { font-size: 15.5px; }
.menu-icon {
  width: 39px;
  height: 39px;
  border: 1px solid var(--xc-border);
  border-radius: 13px;
  background: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
}
.menu-icon span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #1f2937; transition: transform .2s ease, opacity .2s ease; }
body.menu-open .menu-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-icon span:nth-child(2) { opacity: 0; }
body.menu-open .menu-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.32); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; z-index: 69; }
body.menu-open .mobile-menu-backdrop { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.mobile-header.push,
main.content.push { transform: none !important; left: auto !important; }

/* ===== Hero：更短、更聚焦、更稳 ===== */
.hero {
  min-height: 560px !important;
  padding: clamp(58px, 6vw, 76px) clamp(34px, 5vw, 64px) !important;
  border-radius: var(--xc-radius-xl);
  background-size: cover !important;
  background-position: center !important;
  isolation: isolate;
  overflow: hidden;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,20,64,.78), rgba(15,78,216,.62) 45%, rgba(79,70,229,.52));
  z-index: 0;
}
.hero .overlay { display: none !important; }
.hero-glow { position: absolute; inset: auto -12% -30% 18%; height: 340px; background: radial-gradient(circle, rgba(110,193,255,.36), transparent 68%); z-index: 0; pointer-events: none; }
.hero .cta { position: relative; z-index: 2; width: min(100%, 780px); max-width: 780px; text-align: center; color: #fff; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  line-height: 1.35;
  backdrop-filter: blur(10px);
}
.hero h1,
.hero .hero-title-dual {
  margin: 20px 0 14px !important;
  color: #fff !important;
  font-size: clamp(35px, 4vw, 54px) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.045em;
  font-weight: 900 !important;
  white-space: normal !important;
  text-wrap: balance;
  overflow: visible !important;
}
.hero p,
.hero .hero-desc-dual {
  width: min(100%, 660px);
  margin: 0 auto !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  white-space: normal !important;
}
.hero-title-mobile,
.hero-desc-mobile { display: none; }
.hero-actions,
.hero-actions-focus { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 11px; margin: 22px auto 0; }
.hero-actions .btn,
.btn.btn-default,
.btn.btn-default2,
.btn.btn-border-light {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px !important;
  padding: 11px 18px !important;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.btn-default,
.hero-btn-primary { background: linear-gradient(135deg, #1677ff, #4f46e5) !important; border: 0 !important; color: #fff !important; box-shadow: 0 12px 24px rgba(22,119,255,.22) !important; }
.btn.btn-default2,
.hero-btn-secondary,
.hero-btn-tertiary,
.btn.btn-border-light { background: rgba(255,255,255,.11) !important; border: 1px solid rgba(255,255,255,.27) !important; color: #fff !important; }
section.white-bg .btn.btn-default2,
section.white-bg .btn.btn-border-light { color: var(--xc-primary-dark) !important; border-color: var(--xc-border-strong) !important; background: #f8fbff !important; }
.hero-scene-row,
.hero-trust-grid { display: grid; gap: 9px; margin-top: 16px; }
.hero-scene-row { grid-template-columns: repeat(4, minmax(0, 1fr)); color: rgba(255,255,255,.80); font-size: 11.5px; }
.hero-scene-row span,
.hero-trust-item { min-width: 0; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(8px); }
.hero-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-trust-item strong { display: block; color: #fff; font-size: 13.5px; margin-bottom: 4px; }
.hero-trust-item span { display: block; color: rgba(255,255,255,.73); font-size: 11.5px; line-height: 1.5; }

/* ===== Typography ===== */
.section-title { color: #111827 !important; font-size: clamp(23px, 2.2vw, 32px) !important; line-height: 1.24 !important; letter-spacing: -0.035em; font-weight: 900 !important; margin-bottom: 10px !important; }
.section-title:after { content: ""; display: block; width: 34px; height: 3px; margin-top: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--xc-primary), var(--xc-primary-2)); opacity: .88; }
.section-intro { max-width: 760px; color: var(--xc-muted) !important; font-size: 14.5px; line-height: 1.75; margin-bottom: 0 !important; }
p { color: var(--xc-muted); line-height: 1.72; }
h1, h2, h3, h4, h5, h6 { color: #111827; }
.text-dark { color: #1d2939 !important; }

/* ===== Unified Cards：轻量化系统 ===== */
.entry-hub-card,
.service-item,
.portfolio-item,
.price-item,
.quick-link-card,
.faq-card,
.testimonial-item,
.contact-qr-card,
.enhanced-contact-info,
.contact-note,
.timeline .entry .body,
.about-feature-list span,
.fact-item {
  border: 1px solid var(--xc-border) !important;
  border-radius: var(--xc-radius-md) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 7px 20px rgba(18, 38, 76, 0.045) !important;
}
.entry-hub-card:hover,
.quick-link-card:hover,
.price-item:hover,
.service-item:hover,
.portfolio-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18, 38, 76, 0.075) !important; }
.entry-hub-row,
.quick-links-row,
.price-row,
.faq-row,
.testimonials-wrapper { row-gap: 18px; }
.entry-hub-row > [class*="col-"],
.quick-links-row > [class*="col-"],
.portfolio-wrapper > [class*="col-"],
.faq-row > [class*="col-"],
.testimonials-wrapper > [class*="col-"] { margin-bottom: 18px; }
.entry-hub-card,
.quick-link-card { min-height: 100%; display: flex !important; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px !important; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.entry-hub-icon,
.quick-link-icon,
.service-item .icon-simple,
.price-icon { width: 42px; height: 42px; border-radius: 14px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--xc-primary-dark) !important; background: linear-gradient(135deg, rgba(22,119,255,.11), rgba(79,70,229,.07)); font-size: 19px; }
.entry-hub-card h4,
.quick-link-card h4,
.service-item h4,
.faq-card h4 { margin: 3px 0 0 !important; font-size: 16.5px !important; line-height: 1.35; font-weight: 850; }
.entry-hub-card p,
.quick-link-card p,
.service-item p,
.faq-card p { margin: 0 !important; font-size: 13.5px; line-height: 1.68; color: var(--xc-muted) !important; }
.entry-hub-action,
.quick-link-action,
.quick-link-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--xc-primary-dark); font-size: 13px; font-weight: 800; }
.service-item { height: 100%; padding: 22px 18px !important; transition: transform .18s ease, box-shadow .18s ease; }
.service-item .icon-simple { margin: 0 auto 2px; }
#services .row > [class*="col-"] { margin-bottom: 18px; }

/* ===== Timeline ===== */
.timeline { position: relative; }
.timeline .entry { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 15px; margin-bottom: 15px; }
.timeline .entry .title { width: auto !important; float: none !important; text-align: center; }
.timeline .entry .title span { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 15px; background: var(--xc-primary-soft); color: var(--xc-primary-dark); font-weight: 900; }
.timeline .entry .body { padding: 17px 19px !important; }
.timeline .entry .body h4 { font-size: 16.5px; font-weight: 850; margin-bottom: 6px; }
.timeline .entry .body p { margin-bottom: 0; font-size: 13.5px; }
.timeline-line { display: none !important; }

/* ===== Portfolio ===== */
.portfolio-wrapper { display: flex; flex-wrap: wrap; }
.portfolio-item { overflow: hidden; height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.portfolio-item .details { padding: 17px 17px 11px !important; position: static !important; opacity: 1 !important; color: var(--xc-text) !important; }
.portfolio-item .details h4 { font-size: 16.5px !important; font-weight: 850; margin: 0 0 4px !important; }
.portfolio-item .details span { color: var(--xc-muted) !important; font-size: 12.5px; }
.portfolio-item .thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 0 var(--xc-radius-md) var(--xc-radius-md); background: var(--xc-bg-2); }
.portfolio-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: none !important; }
.portfolio-item .plus-icon,
.portfolio-item .mask { display: none !important; }

/* ===== Pricing ===== */
.price-row { margin-left: -10px; margin-right: -10px; }
.price-row > [class*="col-"] { padding-left: 10px !important; padding-right: 10px !important; margin-top: 0 !important; margin-bottom: 18px !important; }
.price-item { padding: 24px 20px !important; height: 100%; position: relative; }
.price-item.recommended { border-color: rgba(22,119,255,.26) !important; background: linear-gradient(180deg, rgba(22,119,255,.075), rgba(255,255,255,.95)) !important; }
.price-item .plan { display: block; margin-top: 10px; font-size: 15px; font-weight: 850; color: #1d2939; }
.price-item .price { color: var(--xc-primary-dark) !important; font-size: 34px !important; line-height: 1.15; margin: 10px 0 12px !important; }
.price-item .price em { font-size: 18px; font-style: normal; }
.price-item .price span { color: var(--xc-muted); font-size: 13px; font-weight: 600; }
.price-item ul { text-align: left; padding-left: 0; margin: 16px 0; }
.price-item ul li { list-style: none; padding: 7px 0; border-bottom: 1px dashed rgba(15,35,80,.085); color: var(--xc-muted); font-size: 13.5px; line-height: 1.45; }
.price-item .btn { width: 100%; }

/* ===== About / FAQ / Testimonial / Contact ===== */
.about-feature-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.about-feature-list span { padding: 7px 11px; color: var(--xc-primary-dark); font-size: 12.5px; font-weight: 800; }
.fact-item { padding: 16px !important; }
.fact-item p { margin-bottom: 0; }
.faq-card { padding: 20px !important; height: 100%; }
.testimonial-item { padding: 20px !important; height: 100%; }
.testimonial-item .symbol { color: rgba(22,119,255,.23) !important; font-size: 20px; }
.testimonial-item p { font-size: 13.5px; margin-bottom: 0; }
.testimonial-details { display: flex; align-items: center; gap: 11px; margin-top: 14px; }
.testimonial-details .thumb img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.testimonial-details .info h4 { font-size: 15px; font-weight: 850; margin-bottom: 2px; }
.testimonial-details .info span { font-size: 12.5px; color: var(--xc-muted); }
.contact-info.enhanced-contact-info { display: flex; align-items: center; gap: 13px; padding: 15px !important; margin-bottom: 12px !important; }
.contact-info i { color: var(--xc-primary-dark) !important; font-size: 21px; flex: 0 0 auto; }
.contact-info h5 { margin: 0 0 3px; font-size: 14.5px; font-weight: 850; }
.contact-info span { color: var(--xc-muted); font-size: 13.5px; word-break: break-all; }
.contact-note { padding: 15px !important; color: var(--xc-muted); font-size: 13.5px; line-height: 1.7; }
.contact-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.contact-action-row .btn { margin: 0 !important; }
.contact-qr-card { padding: 22px !important; }
.contact-qr-card img { width: min(100%, 232px); border-radius: 20px; box-shadow: 0 10px 26px rgba(18,38,76,.09); }
.contact-qr-card h4 { font-size: 18px; font-weight: 850; }
.contact-qr-card p { font-size: 13.5px; }
.contact-qr-card .btn { width: 100%; }

/* ===== Floating / Bottom Actions ===== */
.floating-actions { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: 22px; flex-direction: column; gap: 9px; z-index: 50; }
.floating-actions a,
#return-to-top { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.92); border: 1px solid var(--xc-border); box-shadow: var(--xc-shadow-soft); color: var(--xc-primary-dark) !important; }
.mobile-bottom-bar {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 78;
  display: none;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 7px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 12px 28px rgba(18,38,76,.14);
  backdrop-filter: blur(16px);
}
.mobile-bottom-link { min-height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #344054; background: #f6f9ff; font-size: 13.5px; font-weight: 850; }
.mobile-bottom-link.primary { color: #fff; background: linear-gradient(135deg, #1677ff, #4f46e5); }

/* ===== Responsive ===== */
@media (max-width: 1199.98px) {
  :root { --xc-sidebar: 236px; --xc-gap: 22px; }
  .site-wrapper { width: min(100% - 32px, 1120px) !important; }
  section.padding { padding: 44px 32px !important; }
  .hero { min-height: 520px !important; padding: 56px 34px !important; }
  .hero-scene-row, .hero-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul.vertical-menu li a { font-size: 13px; padding-inline: 10px !important; }
}

@media (max-width: 991.98px) {
  body { padding-bottom: 76px; }
  .site-wrapper { width: min(100% - 28px, 860px) !important; display: block; margin-top: 0; }
  .mobile-header { display: flex !important; }
  header.left {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 300px) !important;
    height: 100dvh;
    border-radius: 0 22px 22px 0;
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 70;
  }
  header.left.open { transform: translateX(0); }
  header.left button.close { display: inline-flex; position: absolute; top: 13px; right: 13px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 12px; background: #f3f7ff; opacity: 1; z-index: 3; }
  .header-inner { padding-top: 54px !important; }
  main.content { width: 100% !important; }
  section.padding { padding: 38px 26px !important; margin-bottom: 20px; }
  .hero { min-height: auto !important; padding: 54px 28px 38px !important; }
  .hero .cta { width: 100%; }
  .hero h1 { font-size: clamp(29px, 5.8vw, 41px) !important; }
  .hero p { font-size: 14.5px !important; line-height: 1.68 !important; }
  .hero-actions .btn { min-width: 178px; }
  .hero-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-bottom-bar { display: grid; }
  .floating-actions { display: none !important; }
  .timeline .entry { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 767.98px) {
  .site-wrapper { width: min(100% - 22px, 680px) !important; }
  section.padding { padding: 32px 19px !important; border-radius: 20px; }
  .hero { border-radius: 20px; padding: 42px 19px 28px !important; }
  .hero-title-desktop,
  .hero-desc-desktop { display: none !important; }
  .hero-title-mobile,
  .hero-desc-mobile { display: inline !important; }
  .hero-badge { font-size: 11.5px; padding: 7px 11px; }
  .hero h1 { margin-top: 14px !important; font-size: clamp(27px, 7.7vw, 35px) !important; line-height: 1.16 !important; }
  .hero p { max-width: 520px; font-size: 13.5px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .hero-actions .btn { width: 100%; min-height: 42px; padding-block: 10px !important; }
  .hero-scene-row { display: none !important; }
  .hero-trust-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
  .hero-trust-item { padding: 9px; }
  .hero-trust-item span { display: none; }
  .section-title { font-size: 23px !important; }
  .section-title:after { margin-top: 10px; }
  .section-intro { font-size: 13.5px; line-height: 1.68; }
  .entry-hub-card,
  .quick-link-card,
  .service-item,
  .faq-card,
  .testimonial-item,
  .price-item { padding: 17px !important; }
  .portfolio-item .thumb { aspect-ratio: 16 / 9; }
  .contact-action-row .btn { width: 100%; }
  .contact-qr-card img { width: min(100%, 210px); }
}

@media (max-width: 575.98px) {
  body { padding-bottom: 82px; }
  .site-wrapper { width: calc(100% - 18px) !important; }
  .mobile-header { min-height: 56px; padding-inline: 10px !important; margin-bottom: 9px; }
  .mobile-header .site-title { font-size: 15px; }
  .hero { padding: 36px 15px 26px !important; }
  .hero h1 { font-size: clamp(25px, 7.6vw, 31px) !important; letter-spacing: -0.035em; }
  .hero p { font-size: 13px !important; }
  .hero-trust-grid { grid-template-columns: 1fr; }
  .hero-trust-item:nth-child(n+3) { display: none; }
  section.padding { padding: 28px 15px !important; margin-bottom: 15px; }
  .row { margin-left: -7px; margin-right: -7px; }
  .row > [class*="col-"] { padding-left: 7px; padding-right: 7px; }
  .entry-hub-row > [class*="col-"],
  .quick-links-row > [class*="col-"],
  .portfolio-wrapper > [class*="col-"],
  .faq-row > [class*="col-"],
  .testimonials-wrapper > [class*="col-"] { margin-bottom: 11px; }
  .entry-hub-card,
  .quick-link-card { gap: 8px; }
  .entry-hub-card h4,
  .quick-link-card h4,
  .service-item h4 { font-size: 15.5px !important; }
  .entry-hub-card p,
  .quick-link-card p,
  .service-item p,
  .faq-card p,
  .testimonial-item p { font-size: 13px; }
  .timeline .entry { grid-template-columns: 1fr; gap: 8px; }
  .timeline .entry .title { text-align: left; }
  .timeline .entry .title span { width: 42px; height: 42px; }
  .about-feature-list span { font-size: 12px; padding: 7px 10px; }
  .contact-info.enhanced-contact-info { padding: 13px !important; }
  .mobile-bottom-bar { grid-template-columns: repeat(3, 1fr); left: 8px; right: 8px; bottom: 8px; border-radius: 17px; }
  .mobile-bottom-link { min-height: 39px; font-size: 13px; }
  #return-to-top { display: none !important; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 24px !important; }
  .hero-badge { padding: 6px 9px; font-size: 11px; }
  .hero-actions .btn { font-size: 13px; }
  .section-title { font-size: 21px !important; }
  .mobile-header .site-title { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

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

/* ===== v3.1.2 Sidebar alignment and scroll behavior fix =====
   目标：修复桌面端左侧导航与右侧 Hero 顶部不对齐、侧栏内部滚动条异常、以及中宽屏/移动端菜单高度继承旧模板的问题。 */
main.content {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
}

@media (min-width: 992px) {
  .site-wrapper {
    margin-top: clamp(18px, 2.2vw, 32px) !important;
    align-items: start !important;
  }

  header.left {
    top: clamp(18px, 2.2vw, 32px) !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start !important;
  }

  header.left .header-inner {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  header.left nav {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  header.left .mCustomScrollBox,
  header.left .mCSB_container,
  header.left .mCSB_inside > .mCSB_container {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  header.left .mCSB_scrollTools {
    display: none !important;
  }

  header.left .footer {
    margin-top: 14px !important;
  }
}

@media (max-width: 991.98px) {
  main.content {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  header.left {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  header.left .header-inner {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  header.left .mCustomScrollBox,
  header.left .mCSB_container,
  header.left .mCSB_inside > .mCSB_container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  header.left .mCSB_scrollTools {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .site-wrapper {
    margin-top: 0 !important;
  }

  .hero {
    margin-top: 0 !important;
  }
}

/* ===== v3.1.3 Header/sidebar follow-page flow fix =====
   目标：手机端顶部栏、桌面端左侧导航都跟随页面自然滚动，不再固定在视口里；同时优化手机顶部栏视觉高度与留白。 */

@media (min-width: 992px) {
  header.left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .site-wrapper {
    align-items: start !important;
  }
}

@media (max-width: 991.98px) {
  .site-wrapper {
    margin-top: 10px !important;
  }

  .mobile-header {
    position: relative !important;
    top: auto !important;
    z-index: 40 !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    box-shadow: 0 8px 22px rgba(18, 38, 76, .08) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-header .site-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
  }

  .mobile-header img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .menu-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }

  header.left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .site-wrapper {
    width: calc(100% - 18px) !important;
    margin-top: 8px !important;
  }

  .mobile-header {
    min-height: 50px !important;
    padding: 7px 10px !important;
    margin-bottom: 9px !important;
    border-radius: 17px !important;
  }

  .mobile-header .site-title {
    font-size: 14.5px !important;
  }

  .hero {
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  .mobile-header .site-title {
    max-width: 170px !important;
  }

  .menu-icon {
    width: 36px !important;
    height: 36px !important;
  }
}


/* ===== v3.1.4 固定定位冲突根治：直接覆盖旧模板与历史补丁 =====
   桌面端左侧导航：必须跟随文档流自然滚动，不 sticky、不 fixed。
   手机端顶部栏：必须跟随页面自然滚动，不 sticky、不 fixed。
   手机端侧栏抽屉：仅在打开菜单时作为 fixed 抽屉使用，这是移动端菜单所需行为。 */
.site-wrapper {
  align-items: start !important;
}

@media (min-width: 992px) {
  header.left,
  body header.left,
  .site-wrapper > header.left {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start !important;
    transform: none !important;
    z-index: 20 !important;
  }

  header.left .header-inner,
  header.left .mCustomScrollBox,
  header.left .mCSB_container,
  header.left .mCSB_inside > .mCSB_container {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  header.left .mCSB_scrollTools {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 40 !important;
  }

  .mobile-header.push,
  main.content.push {
    transform: none !important;
    left: auto !important;
  }

  header.left {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    z-index: 80 !important;
    transform: translateX(-110%) !important;
  }

  header.left.open,
  body.menu-open header.left {
    transform: translateX(0) !important;
  }
}

/* ===== v3.1.5 全设备排版 UI 细节收口 =====
   目标：统一页面宽度、模块间距、卡片高度、按钮尺寸、移动端首屏与底部栏显示。
   注意：电脑左侧导航与手机顶部栏继续保持自然文档流，不做 fixed/sticky。 */
:root {
  --xc-page-max: 1320px;
  --xc-sidebar-v315: 248px;
  --xc-page-gap-v315: 26px;
  --xc-section-gap: 24px;
  --xc-card-radius: 18px;
  --xc-card-border: rgba(30, 64, 175, 0.10);
  --xc-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
  --xc-card-shadow-hover: 0 16px 36px rgba(22, 119, 255, 0.105);
}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 129, 255, .14), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(99, 102, 241, .10), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f4f7ff 42%, #f8fafc 100%) !important;
}

body.menu-open {
  overflow: hidden !important;
}

.site-wrapper {
  width: min(calc(100% - 44px), var(--xc-page-max)) !important;
  max-width: var(--xc-page-max) !important;
  margin: 22px auto 0 !important;
  display: grid !important;
  grid-template-columns: var(--xc-sidebar-v315) minmax(0, 1fr) !important;
  gap: var(--xc-page-gap-v315) !important;
  align-items: start !important;
}

@media (min-width: 992px) {
  header.left,
  body header.left,
  .site-wrapper > header.left {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: var(--xc-sidebar-v315) !important;
    border-radius: 22px !important;
    padding: 22px 18px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .075) !important;
    border: 1px solid rgba(30, 64, 175, .10) !important;
  }

  header.left .header-inner {
    gap: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header.left img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  header.left .site-title {
    font-size: 23px !important;
    line-height: 1.15 !important;
    margin-top: 18px !important;
    letter-spacing: -0.04em !important;
  }

  header.left .site-slogan {
    margin-top: 9px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #75839a !important;
  }

  header.left nav {
    margin-top: 18px !important;
  }

  header.left nav ul li {
    margin-bottom: 5px !important;
  }

  header.left nav ul li a {
    min-height: 39px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: #344054 !important;
  }

  header.left nav ul li a i {
    width: 20px !important;
    margin-right: 11px !important;
    font-size: 14px !important;
    color: #9aa8bd !important;
  }

  header.left nav ul li a.active,
  header.left nav ul li a:hover {
    background: linear-gradient(135deg, rgba(22,119,255,.10), rgba(79,70,229,.08)) !important;
    color: #175cd3 !important;
  }

  .header-cta-card {
    margin-top: 18px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.92)) !important;
    border: 1px solid rgba(30,64,175,.10) !important;
  }

  .header-cta-card p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #667085 !important;
  }

  .header-cta-card .btn {
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    box-shadow: 0 10px 22px rgba(22,119,255,.16) !important;
  }

  header.left .footer {
    margin-top: 16px !important;
    font-size: 10.5px !important;
    line-height: 1.65 !important;
    color: #a0a9ba !important;
  }
}

main.content {
  width: 100% !important;
  min-width: 0 !important;
}

main.content > section {
  margin-bottom: var(--xc-section-gap) !important;
}

section.white-bg,
section.shadow-blue,
section.shadow-dark {
  border-radius: 24px !important;
  border: 1px solid rgba(30, 64, 175, .095) !important;
  box-shadow: 0 16px 42px rgba(15,23,42,.055) !important;
}

section.padding {
  padding: clamp(38px, 4vw, 54px) clamp(30px, 4.2vw, 48px) !important;
}

.section-title {
  font-size: clamp(25px, 2.35vw, 34px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 12px !important;
  color: #101828 !important;
}

.section-title:after,
.section-title:before {
  border-radius: 999px !important;
}

.section-intro,
section p {
  color: #667085;
}

.section-intro {
  max-width: 760px !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

/* Hero：电脑大气，手机克制，避免一屏过长 */
.hero {
  min-height: clamp(500px, 43vw, 585px) !important;
  padding: clamp(52px, 5vw, 74px) clamp(28px, 5vw, 62px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 82%, rgba(118, 178, 255, .26), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, #183579 0%, #2467f2 58%, #4568f0 100%) !important;
}

.hero .cta {
  max-width: 820px !important;
  width: 100% !important;
}

.hero-badge {
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

.hero h1,
.hero .hero-title-dual {
  font-size: clamp(39px, 4.3vw, 58px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.07em !important;
  text-wrap: balance;
  margin-bottom: 16px !important;
}

.hero p,
.hero .hero-desc-dual {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.88) !important;
}

.hero-actions,
.hero-actions-focus {
  gap: 10px !important;
  margin-top: 22px !important;
}

.btn,
a.btn,
button.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.hero-actions .btn {
  min-height: 44px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
}

.hero-scene-row,
.hero-trust-grid {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-scene-row span,
.hero-trust-item {
  border-radius: 14px !important;
  background: rgba(255,255,255,.105) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
}

/* 卡片系统统一 */
.entry-hub-card,
.service-item,
.timeline-container,
.portfolio-item,
.price-item,
.quick-link-card,
.faq-card,
.testimonial-item,
.contact-qr-card,
.enhanced-contact-info,
.contact-info,
.funfact,
.fact-item {
  border-radius: var(--xc-card-radius) !important;
  border: 1px solid var(--xc-card-border) !important;
  box-shadow: var(--xc-card-shadow) !important;
  background: rgba(255,255,255,.94) !important;
}

.entry-hub-card:hover,
.service-item:hover,
.portfolio-item:hover,
.price-item:hover,
.quick-link-card:hover,
.faq-card:hover,
.contact-qr-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--xc-card-shadow-hover) !important;
}

.entry-hub-card,
.quick-link-card,
.service-item,
.price-item {
  height: 100% !important;
}

.entry-hub-row,
.quick-link-grid,
.price-row,
.portfolio-wrapper,
.row {
  row-gap: 18px !important;
}

.entry-hub-card {
  padding: 22px 20px !important;
  min-height: 196px !important;
}

.entry-hub-card h4,
.service-item h4,
.quick-link-card h4,
.price-item .plan,
.portfolio-item h4 {
  color: #101828 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.35 !important;
}

.entry-hub-card p,
.service-item p,
.quick-link-card p,
.price-item p,
.portfolio-item p,
.faq-card p,
.testimonial-item p {
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #667085 !important;
}

.entry-hub-icon,
.quick-link-icon,
.service-item .icon-simple {
  background: linear-gradient(135deg, rgba(22,119,255,.10), rgba(79,70,229,.08)) !important;
  color: #2563eb !important;
  box-shadow: none !important;
}

.service-item {
  min-height: 190px !important;
  padding: 24px 20px !important;
}

.portfolio-item {
  overflow: hidden !important;
}

.portfolio-item .thumb,
.portfolio-item img {
  border-radius: 16px !important;
}

.price-item {
  padding: 25px 22px !important;
}

.price-item .price,
.price-item .amount {
  letter-spacing: -0.04em !important;
}

.quick-link-card {
  min-height: 180px !important;
  padding: 22px 20px !important;
}

/* 联系与二维码收口 */
#contact .row {
  align-items: stretch !important;
}

.contact-qr-card img,
.contact-qr-card canvas,
.contact-qr-card .qr-img {
  max-width: min(190px, 58vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 右侧浮动动作：电脑端保留，手机端降低干扰 */
.floating-actions {
  right: 18px !important;
  bottom: 22px !important;
  gap: 8px !important;
}

.floating-actions a,
.floating-actions button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.10) !important;
}

.mobile-bottom-bar {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(30,64,175,.10) !important;
  box-shadow: 0 -10px 30px rgba(15,23,42,.12) !important;
}

.mobile-bottom-bar a {
  min-width: 0 !important;
}

/* 中宽屏：防止左侧和内容互相挤压 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    --xc-sidebar-v315: 232px;
    --xc-page-gap-v315: 20px;
  }
  .site-wrapper {
    width: min(calc(100% - 30px), 1120px) !important;
  }
  section.padding {
    padding: 38px 34px !important;
  }
  .hero {
    min-height: 500px !important;
    padding: 50px 30px !important;
  }
  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(36px, 4vw, 48px) !important;
  }
  .hero-trust-grid,
  .hero-scene-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 平板与手机：顶部栏自然滚动，不固定；内容单列 */
@media (max-width: 991.98px) {
  .site-wrapper {
    width: min(calc(100% - 28px), 820px) !important;
    display: block !important;
    margin-top: 12px !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 40 !important;
    min-height: 56px !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(30,64,175,.10) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.08) !important;
    transform: none !important;
  }

  .mobile-header img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .mobile-header .site-title {
    color: #101828 !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
  }

  .menu-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f3f6fb !important;
    border: 1px solid rgba(30,64,175,.08) !important;
  }

  .menu-icon span {
    width: 19px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #475467 !important;
  }

  header.left {
    width: min(82vw, 306px) !important;
    max-width: 306px !important;
    padding: 22px 18px !important;
    border-radius: 0 22px 22px 0 !important;
    background: rgba(255,255,255,.96) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main.content {
    width: 100% !important;
  }

  main.content > section {
    margin-bottom: 20px !important;
  }

  section.padding {
    padding: 34px 26px !important;
    border-radius: 22px !important;
  }

  .section-title {
    font-size: clamp(23px, 4.4vw, 30px) !important;
  }

  .section-intro {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  .hero {
    min-height: auto !important;
    padding: 42px 24px 32px !important;
    border-radius: 22px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(30px, 6vw, 42px) !important;
    line-height: 1.15 !important;
    margin-top: 15px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 14px !important;
    line-height: 1.72 !important;
    margin-bottom: 18px !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    min-height: 43px !important;
    padding: 11px 16px !important;
  }

  .hero-scene-row {
    display: none !important;
  }

  .hero-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 13px !important;
  }

  .hero-trust-item {
    padding: 10px 8px !important;
  }

  .hero-trust-item span {
    display: none !important;
  }

  .entry-hub-card,
  .service-item,
  .quick-link-card,
  .price-item {
    min-height: 0 !important;
  }

  .floating-actions {
    display: none !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-bottom-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    min-height: 54px !important;
    padding: 6px !important;
    border-radius: 18px !important;
  }

  .mobile-bottom-bar a {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 767.98px) {
  .site-wrapper {
    width: calc(100% - 22px) !important;
    margin-top: 10px !important;
  }

  section.padding {
    padding: 30px 18px !important;
    border-radius: 20px !important;
  }

  .hero {
    padding: 36px 16px 28px !important;
    border-radius: 20px !important;
  }

  .hero-badge {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(27px, 7.4vw, 34px) !important;
    letter-spacing: -0.06em !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 13.5px !important;
  }

  .hero-trust-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .entry-hub-card,
  .service-item,
  .quick-link-card,
  .price-item,
  .faq-card,
  .contact-qr-card,
  .enhanced-contact-info {
    padding: 19px 17px !important;
    border-radius: 17px !important;
  }

  .entry-hub-card h4,
  .service-item h4,
  .quick-link-card h4 {
    font-size: 16px !important;
  }
}

@media (max-width: 430px) {
  .site-wrapper {
    width: calc(100% - 16px) !important;
  }

  .mobile-header {
    min-height: 52px !important;
    padding: 7px 10px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }

  .mobile-header .site-title {
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  section.padding {
    padding: 28px 14px !important;
  }

  .section-title {
    font-size: 23px !important;
  }

  .hero {
    padding: 32px 14px 25px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(25px, 7.1vw, 31px) !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 13px !important;
  }

  .hero-trust-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-trust-item:nth-child(n+3) {
    display: none !important;
  }

  .entry-hub-card,
  .service-item,
  .quick-link-card,
  .price-item,
  .faq-card,
  .contact-qr-card,
  .enhanced-contact-info {
    padding: 17px 15px !important;
  }
}

@media (max-width: 370px) {
  .mobile-header .site-title {
    max-width: 150px !important;
  }

  .menu-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: 24px !important;
  }

  .mobile-bottom-bar a {
    font-size: 12px !important;
  }
}

/* ========================================================================
   XC权益数卡官网 v3.1.6 全设备细节收口版
   目标：修复截图中的数字统计可读性、代理卡片层级、移动端首屏厚重、全设备间距与卡片对齐。
   注意：保留 v3.1.4 后的自然滚动要求，桌面左侧和手机顶部均不 fixed / sticky。
======================================================================== */

:root {
  --xc-section-gap-v316: 18px;
  --xc-card-radius-v316: 18px;
  --xc-soft-border-v316: rgba(31, 65, 142, .105);
  --xc-soft-shadow-v316: 0 14px 34px rgba(15, 23, 42, .055);
  --xc-soft-shadow-hover-v316: 0 18px 44px rgba(15, 23, 42, .085);
}

html, body {
  overflow-x: clip !important;
  background: linear-gradient(180deg, #eef3ff 0%, #f7faff 42%, #f3f7ff 100%) !important;
}

/* 继续根治固定定位：不让旧模板、插件或后续样式把桌面左侧 / 手机顶部重新固定 */
@media (min-width: 992px) {
  header.left,
  body header.left,
  .site-wrapper > header.left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header.left .header-inner,
  header.left .mCustomScrollBox,
  header.left .mCSB_container,
  header.left .mCSB_inside > .mCSB_container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
  }

  .site-wrapper {
    align-items: flex-start !important;
  }
}

@media (max-width: 991.98px) {
  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
}

/* 页面整体：减少大块之间的空、统一卡片宽度和视觉密度 */
.site-wrapper {
  gap: var(--xc-page-gap-v315, 24px) !important;
}

main.content > section {
  margin-bottom: var(--xc-section-gap-v316) !important;
}

section.white-bg,
section.shadow-blue,
section.shadow-dark {
  border-radius: 23px !important;
  border-color: var(--xc-soft-border-v316) !important;
  box-shadow: var(--xc-soft-shadow-v316) !important;
}

section.padding,
section.padding-50 {
  padding: clamp(34px, 3.7vw, 48px) clamp(28px, 3.9vw, 44px) !important;
}

.section-title {
  margin-bottom: 10px !important;
  letter-spacing: -0.052em !important;
}

.section-title:before,
.section-title:after {
  height: 3px !important;
}

.section-intro {
  max-width: 820px !important;
  color: #667085 !important;
}

.spacer[data-height="34"] { height: 24px !important; }
.spacer[data-height="24"] { height: 18px !important; }
.spacer[data-height="20"] { height: 16px !important; }
.spacer[data-height="18"] { height: 14px !important; }

/* Hero：保留蓝色品牌感，但压缩移动端厚度，降低按钮堆叠造成的首屏压力 */
.hero {
  min-height: clamp(460px, 39vw, 545px) !important;
  padding: clamp(46px, 4.4vw, 64px) clamp(24px, 4.6vw, 56px) !important;
  border-radius: 23px !important;
}

.hero h1,
.hero .hero-title-dual {
  font-size: clamp(38px, 4.05vw, 54px) !important;
  line-height: 1.13 !important;
  margin-top: 16px !important;
  margin-bottom: 14px !important;
}

.hero p,
.hero .hero-desc-dual {
  font-size: 15px !important;
  line-height: 1.68 !important;
}

.hero-actions,
.hero-actions-focus {
  margin-top: 18px !important;
}

.hero-actions .btn {
  min-height: 42px !important;
  padding: 11px 22px !important;
}

.hero-scene-row,
.hero-trust-grid {
  margin-top: 13px !important;
}

.hero-scene-row span,
.hero-trust-item {
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, .095) !important;
}

.hero-trust-item strong {
  font-size: 13px !important;
}

.hero-trust-item span {
  font-size: 11px !important;
}

/* 入口 / 导航类卡片：高度统一但不死撑，减少厚重空白 */
.entry-hub-row > [class*="col-"],
.quick-links-row > [class*="col-"],
.faq-row > [class*="col-"],
.testimonials-wrapper > [class*="col-"] {
  display: flex !important;
}

.entry-hub-card,
.quick-link-card,
.faq-card,
.testimonial-item,
.service-item,
.portfolio-item,
.price-item,
.contact-qr-card,
.enhanced-contact-info,
.contact-info {
  width: 100% !important;
  border-radius: var(--xc-card-radius-v316) !important;
  border-color: var(--xc-soft-border-v316) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .045) !important;
}

.entry-hub-card:hover,
.quick-link-card:hover,
.faq-card:hover,
.service-item:hover,
.portfolio-item:hover,
.price-item:hover {
  box-shadow: var(--xc-soft-shadow-hover-v316) !important;
}

.entry-hub-card,
.quick-link-card {
  min-height: 174px !important;
  padding: 21px 20px !important;
}

.entry-hub-card h4,
.quick-link-card h4,
.service-item h4,
.faq-card h4 {
  font-size: 17px !important;
  margin-bottom: 9px !important;
}

.entry-hub-card p,
.quick-link-card p,
.service-item p,
.faq-card p {
  margin-bottom: 13px !important;
}

.entry-hub-icon,
.quick-link-icon,
.service-item .icon-simple {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  margin-bottom: 13px !important;
}

/* 截图问题：蓝色数据统计区卡片文字过白，完全不可读。这里改成白底深字、蓝色数字。 */
#facts {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 12% 100%, rgba(177, 215, 255, .36), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, .18), transparent 22%),
    linear-gradient(135deg, #5aa2ff 0%, #2f6cf0 100%) !important;
  box-shadow: 0 18px 46px rgba(47, 108, 240, .16) !important;
}

#facts .overlay,
#facts:before,
#facts:after {
  display: none !important;
}

#facts .row {
  margin-left: -8px !important;
  margin-right: -8px !important;
  row-gap: 14px !important;
}

#facts .row > [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

#facts .fact-item {
  min-height: 126px !important;
  padding: 20px 14px 17px !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(255, 255, 255, .56) !important;
  box-shadow: 0 14px 32px rgba(20, 65, 150, .12) !important;
  color: #1d2939 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#facts .fact-item i,
#facts .fact-item .icon-circle {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1677ff, #4f46e5) !important;
  box-shadow: 0 9px 18px rgba(22, 119, 255, .22) !important;
  margin-bottom: 9px !important;
}

#facts .fact-item h2,
#facts .fact-item .count {
  color: #1d4ed8 !important;
  text-shadow: none !important;
  font-size: clamp(24px, 2.3vw, 34px) !important;
  line-height: 1.05 !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.045em !important;
}

#facts .fact-item span {
  color: #667085 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

/* 关于我们：避免标题和图片区域显得散，移动端改成更轻的信息块 */
#about img {
  max-width: 132px !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08) !important;
}

#about h2 {
  font-size: clamp(22px, 2.15vw, 30px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.045em !important;
  color: #101828 !important;
  margin-bottom: 14px !important;
}

#about .about-feature-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#about .about-feature-list span {
  padding: 8px 11px !important;
  border-radius: 999px !important;
  background: #f4f7ff !important;
  border: 1px solid rgba(30, 64, 175, .08) !important;
  color: #344054 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

/* 代理方案：减少空白、统一高度、修复价格单位颜色过淡问题 */
.price-row {
  align-items: stretch !important;
}

.price-row > [class*="col-"] {
  display: flex !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.price-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 22px !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.price-item.recommended {
  transform: none !important;
  box-shadow: 0 18px 44px rgba(22, 119, 255, .10) !important;
}

.price-icon {
  margin: -34px auto 12px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

.price-item .plan {
  width: 100% !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 27px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1677ff, #3f74ee) !important;
  color: #fff !important;
  font-size: 13px !important;
  margin: 4px 0 10px !important;
}

.price-item .price,
.price-item .amount {
  color: #2f64d8 !important;
  font-size: clamp(30px, 2.6vw, 38px) !important;
  line-height: 1.05 !important;
  margin: 4px 0 16px !important;
}

.price-item .price em {
  color: #2f64d8 !important;
  font-size: 18px !important;
}

.price-item .price span,
.price-item .amount span {
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-left: 3px !important;
}

.price-content {
  flex: 1 1 auto !important;
}

.price-item ul {
  margin: 12px 0 20px !important;
}

.price-item ul li {
  padding: 6px 0 !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
  color: #667085 !important;
}

.price-item .btn {
  margin-top: auto !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 1px solid rgba(47, 100, 216, .22) !important;
  color: #285fd1 !important;
  box-shadow: none !important;
}

/* 桌面右侧浮动按钮降低干扰 */
.floating-actions {
  right: 14px !important;
  bottom: 18px !important;
}

.floating-actions a,
.floating-actions button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
}

/* 设备细化 */
@media (min-width: 1200px) {
  .site-wrapper {
    width: min(calc(100% - 44px), 1220px) !important;
  }

  main.content {
    max-width: 930px !important;
  }

  header.left {
    width: 250px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-wrapper {
    width: min(calc(100% - 28px), 1110px) !important;
  }
  header.left {
    width: 228px !important;
    padding: 22px 16px !important;
  }
  header.left nav ul li a {
    padding: 9px 11px !important;
    font-size: 13px !important;
  }
  main.content {
    min-width: 0 !important;
  }
  #facts .fact-item {
    min-height: 118px !important;
  }
}

@media (max-width: 991.98px) {
  main.content > section {
    margin-bottom: 18px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 30px 22px !important;
  }

  .hero {
    padding: 34px 20px 26px !important;
    min-height: auto !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(28px, 6.3vw, 38px) !important;
    margin-top: 13px !important;
    margin-bottom: 13px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 13.8px !important;
    line-height: 1.62 !important;
  }

  .hero-trust-grid {
    display: none !important;
  }

  .entry-hub-card,
  .quick-link-card,
  .service-item {
    min-height: 0 !important;
  }

  #facts .row > [class*="col-"] {
    width: 50% !important;
  }

  .price-row > [class*="col-"] {
    margin-bottom: 16px !important;
  }

  .price-icon {
    margin-top: 0 !important;
  }

  .price-item .plan {
    width: auto !important;
    padding: 0 18px !important;
    align-self: center !important;
  }

  .mobile-bottom-bar {
    min-height: 50px !important;
    padding: 5px !important;
  }

  .mobile-bottom-bar a {
    min-height: 39px !important;
  }
}

@media (max-width: 767.98px) {
  .site-wrapper {
    width: calc(100% - 20px) !important;
  }

  .mobile-header {
    min-height: 50px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 28px 16px !important;
    border-radius: 20px !important;
  }

  .section-title {
    font-size: 24px !important;
    line-height: 1.24 !important;
  }

  .section-intro {
    font-size: 13.5px !important;
  }

  .hero {
    padding: 32px 14px 24px !important;
    border-radius: 20px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(25px, 7.2vw, 31px) !important;
    line-height: 1.16 !important;
  }

  .hero-actions .btn {
    min-height: 40px !important;
    padding: 10px 14px !important;
  }

  #facts .row > [class*="col-"] {
    width: 50% !important;
  }

  #facts .fact-item {
    min-height: 112px !important;
    padding: 16px 10px 14px !important;
  }

  #facts .fact-item i,
  #facts .fact-item .icon-circle {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 13px !important;
  }

  #about img {
    max-width: 96px !important;
    margin-bottom: 8px !important;
  }

  #about h2 {
    font-size: 21px !important;
  }

  .price-item {
    padding: 20px 16px !important;
  }
}

@media (max-width: 430px) {
  .site-wrapper {
    width: calc(100% - 16px) !important;
    margin-top: 9px !important;
  }

  .mobile-header {
    min-height: 48px !important;
    padding: 6px 9px !important;
  }

  .mobile-header img {
    width: 32px !important;
    height: 32px !important;
  }

  .menu-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .hero-badge {
    font-size: 10.8px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(24px, 7vw, 29px) !important;
    letter-spacing: -0.055em !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 12.8px !important;
  }

  .entry-hub-card,
  .quick-link-card,
  .service-item,
  .faq-card,
  .testimonial-item,
  .price-item {
    padding: 16px 14px !important;
  }

  #facts .row {
    row-gap: 10px !important;
  }

  #facts .fact-item h2,
  #facts .fact-item .count {
    font-size: 23px !important;
  }

  #facts .fact-item span {
    font-size: 11.8px !important;
  }
}

@media (max-width: 370px) {
  section.padding,
  section.padding-50 {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  #facts .row > [class*="col-"] {
    width: 100% !important;
  }
}

/* ========================================================================
   XC权益数卡官网 v3.1.7 全设备排版与视觉精修版
   目标：根据最新截图继续收口桌面宽度、代理方案卡片、移动端首屏与模块间距。
   原则：不新增功能，不固定左侧/顶部，只做显示、适配、排版、UI 根部覆盖。
======================================================================== */

:root {
  --xc-page-max-v317: 1360px;
  --xc-sidebar-v317: 252px;
  --xc-page-gap-v317: 28px;
  --xc-main-max-v317: 1080px;
  --xc-section-gap-v317: 20px;
  --xc-radius-section-v317: 24px;
  --xc-radius-card-v317: 18px;
}

/* 桌面端整体宽度：减少右侧内容过窄导致的空白感，让模块更舒展 */
@media (min-width: 1200px) {
  .site-wrapper {
    width: min(calc(100% - 56px), var(--xc-page-max-v317)) !important;
    max-width: var(--xc-page-max-v317) !important;
    grid-template-columns: var(--xc-sidebar-v317) minmax(0, var(--xc-main-max-v317)) !important;
    gap: var(--xc-page-gap-v317) !important;
    justify-content: center !important;
  }

  header.left,
  body header.left,
  .site-wrapper > header.left {
    width: var(--xc-sidebar-v317) !important;
  }

  main.content {
    max-width: var(--xc-main-max-v317) !important;
    width: 100% !important;
  }
}

/* 中宽屏：防止内容压缩、卡片变窄 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-wrapper {
    width: min(calc(100% - 32px), 1140px) !important;
    grid-template-columns: 228px minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  main.content { max-width: none !important; }
}

/* 模块上下间距统一，避免某些区域贴得太近、某些区域空得太大 */
main.content > section {
  margin-bottom: var(--xc-section-gap-v317) !important;
}

main.content > section:last-child {
  margin-bottom: 0 !important;
}

section.white-bg,
section.shadow-blue,
section.shadow-dark {
  border-radius: var(--xc-radius-section-v317) !important;
}

section.padding,
section.padding-50 {
  padding: clamp(36px, 3.6vw, 50px) clamp(32px, 3.9vw, 50px) !important;
}

/* Hero 桌面端更稳：不要过高，也不要压得太扁 */
.hero {
  min-height: clamp(470px, 37vw, 560px) !important;
  padding: clamp(48px, 4.2vw, 66px) clamp(34px, 4.8vw, 66px) !important;
}

.hero .cta { max-width: 860px !important; }

.hero h1,
.hero .hero-title-dual {
  font-size: clamp(40px, 4.2vw, 58px) !important;
  line-height: 1.12 !important;
}

.hero-actions .btn {
  min-width: 160px !important;
}

/* 入口卡片：桌面端四列更均衡，避免卡片标题/正文过挤 */
.entry-hub-card {
  min-height: 188px !important;
  padding: 24px 22px !important;
}

.entry-hub-card p,
.quick-link-card p,
.service-item p {
  max-width: 100% !important;
}

/* 代理方案：修复图中图标悬在卡片外、顶部留白不自然、卡片过高的问题 */
#price {
  overflow: visible !important;
}

#price .spacer[data-height="34"] {
  height: 18px !important;
}

.price-row {
  margin-left: -11px !important;
  margin-right: -11px !important;
  align-items: stretch !important;
}

.price-row > [class*="col-"] {
  padding-left: 11px !important;
  padding-right: 11px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
}

.price-row .mt-3,
.price-row .my-5,
.price-row .my-md-0,
.price-row .mt-md-3,
.price-row .mt-0,
.price-row .px-md-0,
.price-row .pr-md-0,
.price-row .pl-md-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.price-item {
  width: 100% !important;
  min-height: 0 !important;
  padding: 22px 20px 20px !important;
  border-radius: 19px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .96) !important;
}

.price-item.recommended {
  background: linear-gradient(180deg, rgba(22,119,255,.055), rgba(255,255,255,.98)) !important;
  border-color: rgba(22,119,255,.22) !important;
  transform: none !important;
}

.price-icon,
.price-item .price-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  margin: 0 auto 13px !important;
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(22,119,255,.12), rgba(79,70,229,.09)) !important;
  color: #2563eb !important;
  box-shadow: none !important;
}

.price-item .plan {
  min-height: 25px !important;
  margin: 0 auto 11px !important;
  padding: 0 18px !important;
  width: auto !important;
  max-width: 88% !important;
  font-size: 12.8px !important;
}

.price-item .price,
.price-item .amount {
  font-size: clamp(31px, 2.55vw, 38px) !important;
  margin: 2px 0 14px !important;
}

.price-item ul {
  margin: 10px 0 18px !important;
}

.price-item ul li {
  padding: 5.8px 0 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
}

.price-item .btn {
  min-height: 38px !important;
}

/* 数据区：保持可读，但降低蓝色块体积，不压迫上下模块 */
#facts {
  padding-top: clamp(30px, 3.2vw, 42px) !important;
  padding-bottom: clamp(30px, 3.2vw, 42px) !important;
}

#facts .fact-item {
  min-height: 112px !important;
}

/* 关于/站点导航等大标题居中区域避免过度下沉 */
#about .spacer,
#skills .spacer,
#contact .spacer {
  max-height: 18px !important;
}

/* 手机端：顶部、Hero、首个入口模块的间距重新统一，避免红框区域显得太长或模块粘连 */
@media (max-width: 991.98px) {
  .site-wrapper {
    width: min(calc(100% - 28px), 820px) !important;
    margin-top: 10px !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    position: relative !important;
    min-height: 50px !important;
    margin-bottom: 12px !important;
    padding: 7px 10px !important;
    border-radius: 17px !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.075) !important;
  }

  main.content > section {
    margin-bottom: 18px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 30px 22px !important;
    border-radius: 21px !important;
  }

  .hero {
    margin-bottom: 18px !important;
    padding: 32px 20px 24px !important;
    border-radius: 21px !important;
  }

  .hero-badge {
    display: inline-flex !important;
    max-width: 92% !important;
    justify-content: center !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(27px, 6.2vw, 38px) !important;
    line-height: 1.14 !important;
    margin-top: 13px !important;
    margin-bottom: 12px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 13.6px !important;
    line-height: 1.58 !important;
    margin-bottom: 16px !important;
  }

  .hero-actions,
  .hero-actions-focus {
    margin-top: 0 !important;
    gap: 8px !important;
  }

  .hero-actions .btn {
    min-height: 40px !important;
    padding: 10px 14px !important;
  }

  #entry-hub {
    margin-top: 0 !important;
  }

  .entry-hub-card,
  .quick-link-card,
  .service-item {
    padding: 18px 16px !important;
    border-radius: 17px !important;
  }

  .price-row > [class*="col-"] {
    margin-bottom: 14px !important;
  }

  .price-row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }

  .price-item {
    padding: 20px 16px !important;
  }

  .price-icon,
  .price-item .price-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    margin-bottom: 11px !important;
  }

  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 767.98px) {
  .site-wrapper {
    width: calc(100% - 20px) !important;
    margin-top: 9px !important;
  }

  .mobile-header {
    min-height: 49px !important;
    margin-bottom: 12px !important;
  }

  .mobile-header .site-title {
    font-size: 14.5px !important;
  }

  .mobile-header img {
    width: 31px !important;
    height: 31px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 27px 16px !important;
  }

  .hero {
    padding: 30px 14px 23px !important;
    margin-bottom: 18px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(25px, 7vw, 31px) !important;
    letter-spacing: -0.052em !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 12.9px !important;
  }

  .section-title {
    font-size: 23px !important;
  }

  #entry-hub .section-title {
    font-size: 22px !important;
  }

  .entry-hub-icon,
  .quick-link-icon,
  .service-item .icon-simple {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 11px !important;
  }

  .entry-hub-card h4,
  .quick-link-card h4,
  .service-item h4 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  .entry-hub-card p,
  .quick-link-card p,
  .service-item p {
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
}

@media (max-width: 430px) {
  .site-wrapper {
    width: calc(100% - 18px) !important;
  }

  .mobile-header {
    border-radius: 16px !important;
  }

  .menu-icon {
    width: 35px !important;
    height: 35px !important;
  }

  .hero {
    padding: 28px 13px 22px !important;
    border-radius: 19px !important;
  }

  .hero-badge {
    font-size: 10.5px !important;
    padding: 6px 9px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(24px, 6.9vw, 29px) !important;
  }

  .hero-actions .btn {
    min-height: 39px !important;
    font-size: 13px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 25px 14px !important;
    border-radius: 19px !important;
  }

  .mobile-bottom-bar {
    left: 7px !important;
    right: 7px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    min-height: 48px !important;
    border-radius: 17px !important;
  }

  .mobile-bottom-bar a {
    min-height: 38px !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 370px) {
  .site-wrapper { width: calc(100% - 14px) !important; }
  .hero h1,
  .hero .hero-title-dual { font-size: 23.5px !important; }
  .hero p,
  .hero .hero-desc-dual { font-size: 12.4px !important; }
  .hero-actions .btn { min-height: 38px !important; }
}

/* ==========================================================
   v3.1.8 首屏轻量化专项版（加强版）
   目标：收短 Hero、弱化辅助信息、统一顶部/左侧自然滚动
   ========================================================== */
:root {
  --xc-hero-radius: 22px;
  --xc-hero-blue-1: #19327a;
  --xc-hero-blue-2: #2563eb;
  --xc-hero-blue-3: #4f46e5;
}

/* 彻底保持自然文档流：避免旧模板 fixed / sticky / push 残留影响 */
header.left,
body header.left,
.site-wrapper > header.left {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.mobile-header,
body .mobile-header,
.site-wrapper > .mobile-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 30;
}

.mobile-header.push,
main.content.push {
  transform: none !important;
  left: auto !important;
}

/* Hero：更短、更轻、更聚焦 */
.hero,
section.hero#home {
  min-height: clamp(410px, 34vw, 480px) !important;
  padding: clamp(42px, 4vw, 60px) clamp(26px, 4.4vw, 56px) !important;
  border-radius: var(--xc-hero-radius) !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.14) 0, rgba(255,255,255,.08) 11%, transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(125,188,255,.22) 0, transparent 30%),
    linear-gradient(135deg, var(--xc-hero-blue-1) 0%, var(--xc-hero-blue-2) 60%, var(--xc-hero-blue-3) 100%) !important;
  box-shadow: 0 24px 60px rgba(37, 99, 235, .16) !important;
  overflow: hidden !important;
}

.hero::before {
  opacity: .18 !important;
  filter: blur(1px) !important;
}

.hero-glow {
  opacity: .35 !important;
  height: 240px !important;
  inset: auto -14% -38% 12% !important;
}

.hero .cta,
section.hero#home .cta {
  max-width: 760px !important;
  width: min(100%, 760px) !important;
  margin-top: 0 !important;
  text-align: center !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: none !important;
  white-space: normal !important;
}

.hero h1,
.hero .hero-title-dual {
  max-width: 760px !important;
  margin: 18px auto 12px !important;
  font-size: clamp(36px, 3.75vw, 52px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.055em !important;
  color: #fff !important;
  text-wrap: balance;
  white-space: normal !important;
}

.hero p,
.hero .hero-desc-dual {
  max-width: 620px !important;
  margin: 0 auto !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  color: rgba(255,255,255,.82) !important;
  text-wrap: pretty;
}

.hero-actions,
.hero-actions-focus {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 20px auto 0 !important;
}

.hero-actions .btn,
.hero-actions-focus .btn {
  min-height: 44px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.hero-btn-primary {
  background: linear-gradient(135deg, #2f7bff 0%, #5947e8 100%) !important;
  box-shadow: 0 12px 26px rgba(31, 111, 255, .25) !important;
}

.hero-btn-secondary,
.hero-btn-tertiary {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.94) !important;
}

/* 桌面端只保留一行轻标签；不再显示大面积功能小卡 */
.hero-scene-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 16px auto 0 !important;
  max-width: 620px !important;
}

.hero-scene-row span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.hero-trust-grid,
.hero-trust-item {
  display: none !important;
}

main.content > section.hero + section,
section.hero#home + section {
  margin-top: 24px !important;
}

@media (max-width: 1199.98px) {
  .hero,
  section.hero#home {
    min-height: 390px !important;
    padding: 44px 30px 38px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(32px, 5vw, 44px) !important;
  }
}

@media (max-width: 991.98px) {
  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    min-height: 52px !important;
    margin: 10px 12px 12px !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(31, 66, 143, .10) !important;
  }

  header.left,
  body header.left,
  .site-wrapper > header.left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
  }

  header.left.open,
  body.menu-open header.left {
    transform: translateX(0) !important;
  }

  .hero,
  section.hero#home {
    min-height: auto !important;
    padding: 38px 22px 30px !important;
    border-radius: 20px !important;
  }

  .hero .cta,
  section.hero#home .cta {
    max-width: 620px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
    font-size: clamp(29px, 6vw, 39px) !important;
    line-height: 1.14 !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    max-width: 520px !important;
    font-size: 13.5px !important;
    line-height: 1.58 !important;
  }

  .hero-actions,
  .hero-actions-focus {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
  }

  .hero-scene-row,
  .hero-trust-grid {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  main.content > section.hero + section,
  section.hero#home + section {
    margin-top: 18px !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    min-height: 50px !important;
    margin: 9px 10px 12px !important;
    padding: 7px 10px !important;
    border-radius: 15px !important;
  }

  .mobile-header img {
    width: 30px !important;
    height: 30px !important;
  }

  .mobile-header .site-title {
    font-size: 14.5px !important;
    max-width: 160px !important;
  }

  .mobile-menu-toggle,
  .menu-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
  }

  .hero,
  section.hero#home {
    padding: 34px 16px 26px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 82% 8%, rgba(255,255,255,.10) 0, transparent 24%),
      linear-gradient(135deg, #1c347b 0%, #2f6fee 66%, #4c55e8 100%) !important;
  }

  .hero-badge {
    display: none !important;
  }

  .hero-title-desktop,
  .hero-desc-desktop {
    display: none !important;
  }

  .hero-title-mobile,
  .hero-desc-mobile {
    display: inline !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    max-width: 310px !important;
    margin: 0 auto 12px !important;
    font-size: clamp(27px, 7.4vw, 32px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.045em !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    max-width: 310px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .hero-actions,
  .hero-actions-focus {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    min-height: 42px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
  }

  .hero-actions .btn i {
    font-size: 14px !important;
  }
}

@media (max-width: 390px) {
  .hero,
  section.hero#home {
    padding: 30px 14px 24px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: clamp(25px, 7vw, 29px) !important;
    max-width: 288px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 12.6px !important;
    max-width: 286px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}


/* ==========================================================
   v3.1.9 手机端首屏专用重构与左右留白收口版
   目标：手机端 Hero 不再只是桌面缩小版；整体左右留白更克制。
   ========================================================== */

@media (max-width: 991.98px) {
  .site-wrapper {
    width: calc(100% - 22px) !important;
    margin-top: 0 !important;
    gap: 0 !important;
  }

  main.content {
    padding-bottom: 86px !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    width: 100% !important;
    margin: 10px 0 12px !important;
  }
}

@media (max-width: 575.98px) {
  :root {
    --xc-mobile-page-gutter: 8px;
    --xc-mobile-card-radius: 21px;
  }

  body {
    background:
      radial-gradient(circle at 10% 0%, rgba(74, 126, 255, .16), transparent 28%),
      radial-gradient(circle at 92% 12%, rgba(111, 80, 255, .12), transparent 26%),
      linear-gradient(180deg, #f4f7ff 0%, #f7f9fd 46%, #f8fafc 100%) !important;
  }

  .site-wrapper {
    width: calc(100% - var(--xc-mobile-page-gutter) * 2) !important;
    max-width: none !important;
    margin-left: var(--xc-mobile-page-gutter) !important;
    margin-right: var(--xc-mobile-page-gutter) !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    min-height: 48px !important;
    margin: 8px 0 10px !important;
    padding: 7px 10px !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(35, 84, 186, .09) !important;
    box-shadow: 0 8px 22px rgba(27, 55, 116, .075) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-header .menu-icon,
  .mobile-header #mobileMenuToggle {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(248, 250, 255, .92) !important;
    border: 1px solid rgba(22, 119, 255, .10) !important;
  }

  .mobile-header img {
    width: 29px !important;
    height: 29px !important;
    border-radius: 50% !important;
  }

  .mobile-header .site-title {
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
  }

  /* 手机端 Hero：独立设计，不再沿用桌面大海报感觉 */
  .hero,
  section.hero#home {
    display: block !important;
    min-height: 0 !important;
    padding: 22px 14px 14px !important;
    border-radius: var(--xc-mobile-card-radius) !important;
    background:
      radial-gradient(circle at 88% 12%, rgba(255,255,255,.22) 0, rgba(255,255,255,.08) 18%, transparent 34%),
      radial-gradient(circle at 0% 100%, rgba(118, 181, 255, .26) 0, transparent 35%),
      linear-gradient(145deg, #162b72 0%, #2466e9 58%, #5a49ea 100%) !important;
    box-shadow: 0 16px 34px rgba(38, 96, 219, .16) !important;
    overflow: hidden !important;
  }

  .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -40px -58px auto !important;
    width: 170px !important;
    height: 170px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.11) !important;
    filter: blur(.2px) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .hero::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 20px !important;
    width: 42px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.56) !important;
    opacity: .75 !important;
    pointer-events: none !important;
  }

  .hero-glow {
    display: none !important;
  }

  .hero .overlay {
    background: transparent !important;
    opacity: 0 !important;
  }

  .hero .cta,
  section.hero#home .cta {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .hero-badge {
    display: inline-flex !important;
    max-width: 100% !important;
    min-height: 26px !important;
    padding: 5px 10px !important;
    margin: 0 0 13px !important;
    border-radius: 999px !important;
    font-size: 10.8px !important;
    line-height: 1.15 !important;
    color: rgba(255,255,255,.82) !important;
    background: rgba(255,255,255,.09) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .hero-title-desktop,
  .hero-desc-desktop {
    display: none !important;
  }

  .hero-title-mobile,
  .hero-desc-mobile {
    display: inline !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    max-width: 275px !important;
    margin: 0 0 9px !important;
    font-size: clamp(26px, 7.2vw, 31px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.055em !important;
    text-align: left !important;
    text-wrap: balance !important;
    color: #fff !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    max-width: 292px !important;
    margin: 0 !important;
    font-size: 12.7px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    color: rgba(255,255,255,.78) !important;
  }

  /* 手机端按钮改成小型操作面板：主按钮整行，两个次按钮并排 */
  .hero-actions,
  .hero-actions-focus {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 18px 0 0 !important;
    padding: 8px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.105) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    backdrop-filter: blur(10px) !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    width: 100% !important;
    min-height: 39px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .hero-actions .btn i,
  .hero-actions-focus .btn i {
    font-size: 13px !important;
    margin-right: 6px !important;
  }

  .hero-btn-primary {
    grid-column: 1 / -1 !important;
    min-height: 42px !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%) !important;
    color: #155eef !important;
    box-shadow: 0 10px 20px rgba(16, 24, 40, .12) !important;
  }

  .hero-btn-secondary,
  .hero-btn-tertiary {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.94) !important;
    box-shadow: none !important;
  }

  .hero-scene-row,
  .hero-trust-grid,
  .hero-trust-item {
    display: none !important;
  }

  main.content > section.hero + section,
  section.hero#home + section {
    margin-top: 14px !important;
  }

  section.padding,
  section.padding-50,
  section.white-bg,
  section.shadow-blue,
  section.shadow-dark {
    border-radius: 20px !important;
  }

  section.padding,
  section.padding-50 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .entry-hub-card,
  .service-item,
  .portfolio-item,
  .price-item,
  .quick-link-card,
  .faq-card,
  .testimonial-item,
  .contact-qr-card,
  .enhanced-contact-info {
    border-radius: 16px !important;
  }

  .mobile-bottom-bar {
    left: 6px !important;
    right: 6px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  :root { --xc-mobile-page-gutter: 6px; }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    min-height: 46px !important;
    margin-top: 7px !important;
    margin-bottom: 9px !important;
  }

  .hero,
  section.hero#home {
    padding: 20px 13px 13px !important;
    border-radius: 20px !important;
  }

  .hero-badge {
    font-size: 10.3px !important;
    padding: 5px 9px !important;
    margin-bottom: 12px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    max-width: 250px !important;
    font-size: clamp(25px, 7.5vw, 29px) !important;
    margin-bottom: 8px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    max-width: 275px !important;
    font-size: 12.2px !important;
  }

  .hero-actions,
  .hero-actions-focus {
    gap: 7px !important;
    margin-top: 15px !important;
    padding: 7px !important;
    border-radius: 15px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    min-height: 37px !important;
    border-radius: 12px !important;
    font-size: 12.6px !important;
    padding: 8px 8px !important;
  }

  .hero-btn-primary {
    min-height: 40px !important;
  }

  section.padding,
  section.padding-50 {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

@media (max-width: 360px) {
  .hero-actions,
  .hero-actions-focus {
    grid-template-columns: 1fr !important;
  }

  .hero-btn-primary {
    grid-column: auto !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    min-height: 36px !important;
  }
}


/* ===== v3.2.0 手机端首屏专用重构与全页留白收口版 =====
   重点：手机端不再把桌面 Hero 缩小；Hero 更像移动端首屏主体，页面横向留白统一收口。
   桌面端仅做版本兼容，继续保持左侧导航自然滚动。 */
:root {
  --xc-mobile-gutter-v320: 8px;
  --xc-mobile-section-pad-v320: 15px;
}

@media (min-width: 992px) {
  header.left,
  body header.left,
  .site-wrapper > header.left {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 767.98px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    background:
      radial-gradient(circle at 15% -8%, rgba(80, 132, 255, .18), transparent 34%),
      radial-gradient(circle at 100% 4%, rgba(89, 86, 255, .13), transparent 32%),
      linear-gradient(180deg, #f4f7ff 0%, #f7f9ff 38%, #f8fafc 100%) !important;
  }

  .site-wrapper,
  body .site-wrapper {
    width: calc(100% - (var(--xc-mobile-gutter-v320) * 2)) !important;
    max-width: none !important;
    margin: 7px auto 0 !important;
    display: block !important;
  }

  .mobile-header,
  body .mobile-header,
  .site-wrapper > .mobile-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 8px !important;
    padding: 7px 9px !important;
    border-radius: 17px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    box-shadow: 0 8px 22px rgba(25, 40, 80, .075) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .mobile-header img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .mobile-header .site-title {
    font-size: 14.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  .menu-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(30,64,175,.13) !important;
  }

  .menu-icon span {
    width: 17px !important;
  }

  main.content {
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 88px !important;
  }

  /* 手机端 Hero：从“小蓝卡片”改为移动端主视觉区域 */
  .hero,
  section.hero#home {
    width: 100% !important;
    min-height: clamp(392px, 88vh, 472px) !important;
    margin: 0 0 14px !important;
    padding: 34px 20px 28px !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background:
      radial-gradient(circle at 84% 8%, rgba(255,255,255,.18), transparent 22%),
      radial-gradient(circle at 8% 94%, rgba(121, 191, 255, .30), transparent 34%),
      linear-gradient(145deg, #172d82 0%, #1f62f1 54%, #5649ee 100%) !important;
    box-shadow: 0 18px 38px rgba(31, 98, 241, .18) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    overflow: hidden !important;
  }

  .hero:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%),
      radial-gradient(circle at 100% 100%, rgba(255,255,255,.12), transparent 28%) !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  .hero:after {
    content: "" !important;
    position: absolute !important;
    right: -56px !important;
    bottom: -72px !important;
    width: 190px !important;
    height: 190px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.09) !important;
    filter: blur(.2px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  .hero-glow {
    display: none !important;
  }

  .hero .cta,
  section.hero#home .cta {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    text-align: left !important;
    color: #fff !important;
    z-index: 2 !important;
  }

  .hero-badge {
    align-self: flex-start !important;
    max-width: calc(100vw - 56px) !important;
    min-height: 26px !important;
    margin: 0 0 17px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: rgba(255,255,255,.84) !important;
    font-size: 10.7px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  .hero-title-desktop,
  .hero-desc-desktop {
    display: none !important;
  }

  .hero-title-mobile,
  .hero-desc-mobile {
    display: inline !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 0 14px !important;
    font-size: clamp(31px, 8.4vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.058em !important;
    font-weight: 930 !important;
    text-align: left !important;
    color: #fff !important;
    text-wrap: balance !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    width: 100% !important;
    max-width: 326px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 13.2px !important;
    line-height: 1.58 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .hero-actions,
  .hero-actions-focus {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 10px !important;
    border-radius: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12.7px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .hero-actions .btn i,
  .hero-actions-focus .btn i {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .hero-btn-primary,
  .hero-actions .hero-btn-primary,
  .hero-actions-focus .hero-btn-primary {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    background: #fff !important;
    color: #155eef !important;
    border: 0 !important;
    box-shadow: 0 12px 26px rgba(12, 27, 84, .18) !important;
  }

  .hero-btn-secondary,
  .hero-btn-tertiary,
  .hero-actions .hero-btn-secondary,
  .hero-actions .hero-btn-tertiary {
    min-height: 42px !important;
    background: rgba(255,255,255,.095) !important;
    color: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
  }

  .hero-scene-row,
  .hero-trust-grid,
  .hero-trust-item {
    display: none !important;
  }

  main.content > section.hero + section,
  section.hero#home + section {
    margin-top: 0 !important;
  }

  /* 手机端全页留白收口：Hero、section、卡片横向体系统一 */
  section.padding,
  section.padding-50,
  section.white-bg,
  section.shadow-blue,
  section.shadow-dark {
    width: 100% !important;
    border-radius: 21px !important;
  }

  section.padding,
  section.padding-50 {
    padding: 27px var(--xc-mobile-section-pad-v320) !important;
    margin-bottom: 14px !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .entry-hub-card,
  .quick-link-card,
  .service-item,
  .faq-card,
  .testimonial-item,
  .price-item,
  .contact-qr-card,
  .enhanced-contact-info {
    border-radius: 17px !important;
  }

  .entry-hub-card,
  .quick-link-card,
  .service-item,
  .faq-card,
  .testimonial-item {
    padding: 17px !important;
  }

  .section-title {
    font-size: clamp(22px, 6vw, 26px) !important;
    line-height: 1.2 !important;
  }

  .section-intro {
    font-size: 13.2px !important;
    line-height: 1.65 !important;
  }

  .mobile-bottom-bar {
    left: 7px !important;
    right: 7px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  :root {
    --xc-mobile-gutter-v320: 7px;
    --xc-mobile-section-pad-v320: 14px;
  }

  .hero,
  section.hero#home {
    min-height: clamp(374px, 86vh, 438px) !important;
    padding: 31px 18px 25px !important;
    border-radius: 23px !important;
  }

  .hero-badge {
    margin-bottom: 15px !important;
    padding: 5px 9px !important;
    font-size: 10.2px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    max-width: 300px !important;
    margin-bottom: 12px !important;
    font-size: clamp(29px, 8.1vw, 34px) !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    max-width: 302px !important;
    font-size: 12.8px !important;
    line-height: 1.55 !important;
  }

  .hero-actions,
  .hero-actions-focus {
    gap: 8px !important;
    margin-top: 24px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    min-height: 40px !important;
    border-radius: 14px !important;
    font-size: 12.2px !important;
    padding: 9px 8px !important;
  }

  .hero-btn-primary,
  .hero-actions .hero-btn-primary,
  .hero-actions-focus .hero-btn-primary {
    min-height: 46px !important;
  }

  section.padding,
  section.padding-50 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
}

@media (max-width: 360px) {
  :root {
    --xc-mobile-gutter-v320: 6px;
    --xc-mobile-section-pad-v320: 13px;
  }

  .hero,
  section.hero#home {
    min-height: 370px !important;
    padding: 28px 16px 23px !important;
  }

  .hero h1,
  .hero .hero-title-dual {
    font-size: 28px !important;
    max-width: 280px !important;
  }

  .hero p,
  .hero .hero-desc-dual {
    font-size: 12.5px !important;
    max-width: 280px !important;
  }

  .hero-actions,
  .hero-actions-focus {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  .hero-actions .btn,
  .hero-actions-focus .btn {
    font-size: 11.8px !important;
    min-height: 39px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ===== v3.2.1 首屏配色与渐变质感优化版 =====
   目标：从单一深蓝大色块升级为轻科技蓝色渐变系统；桌面端更有空间感，手机端更轻盈。 */
:root {
  --xc-hero-deep: #123bba;
  --xc-hero-mid: #3568f3;
  --xc-hero-bright: #7fb7ff;
  --xc-hero-cyan: #6fe3ff;
  --xc-hero-violet: #7c83ff;
  --xc-hero-title: #f8fbff;
  --xc-hero-sub: rgba(255,255,255,.84);
}

.hero,
section.hero#home {
  background-color: #3568f3 !important;
  background-image:
    radial-gradient(circle at 16% 12%, rgba(169, 212, 255, .62) 0%, rgba(127, 183, 255, .30) 22%, transparent 45%),
    radial-gradient(circle at 88% 10%, rgba(111, 227, 255, .34) 0%, rgba(111, 227, 255, .15) 20%, transparent 44%),
    radial-gradient(circle at 82% 82%, rgba(124, 131, 255, .35) 0%, rgba(124, 131, 255, .16) 24%, transparent 48%),
    linear-gradient(135deg, #153fbb 0%, #3568f3 43%, #5b87ff 72%, #7fb7ff 100%) !important;
  box-shadow: 0 24px 58px rgba(53, 104, 243, .18), 0 8px 22px rgba(18, 59, 186, .10) !important;
}

.hero:before,
section.hero#home:before {
  background:
    linear-gradient(135deg, rgba(9, 30, 103, .30) 0%, rgba(18, 59, 186, .12) 36%, rgba(91, 135, 255, .04) 70%, rgba(255,255,255,.06) 100%),
    radial-gradient(circle at 52% 8%, rgba(255,255,255,.12), transparent 34%) !important;
  opacity: 1 !important;
}

.hero:after,
section.hero#home:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 28% 78%, rgba(255,255,255,.10), transparent 28%);
  mix-blend-mode: screen;
  opacity: .82;
}

.hero-glow {
  inset: auto -16% -34% 12% !important;
  height: 360px !important;
  background:
    radial-gradient(circle, rgba(147, 197, 253, .38) 0%, rgba(111, 227, 255, .18) 34%, transparent 70%) !important;
  opacity: .88 !important;
}

.hero .cta {
  text-shadow: 0 2px 20px rgba(6, 24, 88, .12);
}

.hero h1,
.hero .hero-title-dual {
  color: var(--xc-hero-title) !important;
  text-shadow: 0 12px 34px rgba(6, 24, 88, .18) !important;
}

.hero p,
.hero .hero-desc-dual {
  color: var(--xc-hero-sub) !important;
  text-shadow: 0 5px 18px rgba(6, 24, 88, .10) !important;
}

.hero-badge {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 22px rgba(18,59,186,.10) !important;
}

.hero-btn-primary,
.hero-actions .hero-btn-primary,
.hero-actions-focus .hero-btn-primary,
.hero .btn.btn-default {
  background: linear-gradient(135deg, #4a78ff 0%, #5b87ff 44%, #7c83ff 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(52, 99, 246, .32), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.hero-btn-primary:hover,
.hero-actions .hero-btn-primary:hover,
.hero-actions-focus .hero-btn-primary:hover {
  background: linear-gradient(135deg, #5b87ff 0%, #6a95ff 45%, #858cff 100%) !important;
}

.hero-btn-secondary,
.hero-btn-tertiary,
.hero-actions .hero-btn-secondary,
.hero-actions .hero-btn-tertiary,
.hero .btn.btn-border-light {
  background: rgba(255,255,255,.125) !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.hero-scene-row span,
.hero-trust-item {
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* 桌面端：保留更丰富的浅蓝层次，但不做花哨装饰。 */
@media (min-width: 992px) {
  .hero,
  section.hero#home {
    background-image:
      radial-gradient(circle at 14% 16%, rgba(169, 212, 255, .72) 0%, rgba(147, 197, 253, .34) 22%, transparent 46%),
      radial-gradient(circle at 84% 14%, rgba(111, 227, 255, .36) 0%, rgba(111, 227, 255, .14) 21%, transparent 45%),
      radial-gradient(circle at 86% 82%, rgba(124, 131, 255, .42) 0%, rgba(124, 131, 255, .17) 24%, transparent 52%),
      linear-gradient(128deg, #123bba 0%, #1d43c9 25%, #3568f3 55%, #5b87ff 82%, #93c5fd 100%) !important;
  }
}

/* 手机端：更亮、更干净，减少深蓝压迫感。 */
@media (max-width: 575.98px) {
  .hero,
  section.hero#home {
    background-color: #4a78ff !important;
    background-image:
      radial-gradient(circle at 18% 0%, rgba(200, 228, 255, .68) 0%, rgba(147, 197, 253, .32) 24%, transparent 48%),
      radial-gradient(circle at 92% 12%, rgba(111, 227, 255, .28) 0%, rgba(111, 227, 255, .11) 24%, transparent 46%),
      radial-gradient(circle at 88% 96%, rgba(124, 131, 255, .28) 0%, rgba(124, 131, 255, .11) 24%, transparent 48%),
      linear-gradient(142deg, #1d43c9 0%, #3568f3 42%, #5b87ff 76%, #8ec5ff 100%) !important;
    box-shadow: 0 18px 38px rgba(53, 104, 243, .18), 0 6px 18px rgba(18,59,186,.08) !important;
  }

  .hero:before,
  section.hero#home:before {
    background:
      linear-gradient(150deg, rgba(4, 22, 88, .22) 0%, rgba(18, 59, 186, .08) 42%, rgba(255,255,255,.07) 100%),
      radial-gradient(circle at 42% 18%, rgba(255,255,255,.10), transparent 38%) !important;
  }

  .hero:after,
  section.hero#home:after {
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%) !important;
    opacity: .70 !important;
  }

  .hero-glow {
    height: 230px !important;
    inset: auto -28% -30% 18% !important;
    background: radial-gradient(circle, rgba(169, 212, 255, .26), transparent 68%) !important;
  }

  .hero-badge {
    background: rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.26) !important;
  }

  .hero-btn-primary,
  .hero-actions .hero-btn-primary,
  .hero-actions-focus .hero-btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%) !important;
    color: #155eef !important;
    box-shadow: 0 13px 28px rgba(12, 27, 84, .16), inset 0 1px 0 rgba(255,255,255,.86) !important;
  }

  .hero-btn-secondary,
  .hero-btn-tertiary,
  .hero-actions .hero-btn-secondary,
  .hero-actions .hero-btn-tertiary {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.28) !important;
  }
}