/* ============================================================================
   basrium.com 站点样式表

   本文件由以下两个文件合并而成（2026-09-17）：
     1. res/webui/css/basrium.css   （原基线样式，在先）
     2. css/main.css               （原站点主样式，在后）

   ⚠️ 合并原则：保持原有层叠顺序 —— 原 basrium 的规则在前、原 main 的规则在后。
      后续新增样式一律追加到文件末尾，以免被前面的同名规则压住。
   引入顺序：spectre.min.css → remixicon.css → 本文件

   注意：spectre.min.css 自带一套蓝（#2563eb 等），且部分选择器权重更高
        （如 .btn.btn-primary / .btn:focus / .bg-gray!important），已在本文件内用
        等权或更高权重的写法覆盖，改动按钮样式时勿删。
   ============================================================================ */

:root {
  /* ---------- 原 basrium.css 变量（先声明） ---------- */
  --brand: #0a4fb4;          /* = logo 主色 */
  --ink: #16273d;
  --muted: #5d7191;
  --bg: #ffffff;
  --bg-soft: #f3f7fe;
  --border: #e3e9f3;

  /* ---------- 原 css/main.css 变量 ---------- */
  /* ===== ① 深色表面层：明快中调蓝（整体提亮，去"深沉感"） ===== */
  --surface-950: #12314f;   /* 页脚 */
  --surface-900: #16395c;   /* Hero 顶 */
  --surface-800: #1b4468;   /* 深色区主底 */
  --surface-700: #204d74;
  --surface-600: #26567f;   /* 提亮端 */
  /* ===== ② 品牌蓝阶：亮端收敛，按钮不再"跳" ===== */
  --blue-900: #0a2f5e;
  --blue-800: #0d3f88;   /* 深色标题（= 别名 --blue） */
  --blue-700: #0a4fb4;   /* ★ 主色 = logo 实测色 */
  --blue-600: #1157bd;   /* 链接 / 按钮亮端 */
  --blue-400: #6aa2ea;   /* 深底浅蓝 */
  --blue-100: #e6eefc;   /* 浅蓝块底 */
  --blue-50:  #f3f7fe;   /* 极浅底 */
  /* ===== ③ 强调色：同色系蓝（H216°，与品牌蓝同色相，靠明度分层） ===== */
  --accent-500: #0b4a8f;  /* 浅底强调文字/图标，白底 8.8:1 */
  --accent-400: #1757c2;  /* 主 CTA 按钮深端（白字 6.6:1） */
  --accent-300: #1f6feb;  /* 主 CTA 按钮浅端（白字 4.6:1） */
  --accent-200: #c8dffc;  /* 深底小字（4.7:1） */
  --accent-100: #e6eefc;  /* 浅底块 */
  --on-accent: #ffffff;   /* 强调色上的文字 */
  --accent-graphic: #8fbcf5;   /* 深底上的强调图形，≥3:1 */
  --accent-a50: rgba(143,188,245,.5);
  --accent-a25: rgba(31,111,235,.3);
  --accent-a12: rgba(31,111,235,.15);
  --shadow-accent: rgba(31,111,235,.3);
  /* ===== ④ 光晕 ===== */
  --glow-1: rgba(38,86,127,.5);
  --glow-2: rgba(106,162,234,.2);
  --glow-3: rgba(31,111,235,.22);
  /* ===== ⑤ 中性色 ===== */
  --gray:       #f4f7fb;
  --gray-2:     #e3e9f3;
  --text:       #1b2b45;
  --text-muted: #5d7191;
  --text-light: #94a4bd;
  --white:      #ffffff;
  /* ===== 语义别名（HTML 内联样式依赖 --blue / --text-muted，勿改名） ===== */
  --blue:       var(--blue-800);
  --blue-2:     var(--blue-600);
  --blue-light: var(--blue-100);
  --blue-soft:  var(--blue-50);
  --gold:       var(--accent-400);
  --gold-light: var(--accent-300);
  --gold-pale:  var(--accent-100);
  --gold-ink:   var(--accent-500);
  /* ===== 圆角：卡片 10px、按钮 5px（克制但保留亲和力） ===== */
  --radius-lg: 50px;
  --radius: 10px;     /* 卡片、面板 */
  --radius-sm: 8px;   /* 小卡片、小面板 */
  --radius-btn: 5px;  /* 按钮 / 输入框 / 标签 / 图标块 */
  --shadow-sm: 0 4px 12px rgba(18,49,79,.06);
  --shadow: 0 12px 40px rgba(18,49,79,.09);
  --shadow-lg: 0 20px 60px rgba(18,49,79,.12);
}

/* ============================================================================
   原 res/webui/css/basrium.css
   ============================================================================ */

/* ============ 基础 ============ */
html { font-size: 18px; scroll-behavior: smooth; }
body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: .85rem;
    color: var(--text);
    line-height: 1.75;
    background: var(--bg);
}
h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; }
img { display: block; max-width: 100%; }
[id] { scroll-margin-top: 88px; }

/* 图标统一行高，避免撑高行内元素 */
[class^="ri-"], [class*=" ri-"] { line-height: 1; }

/* 容器与栅格：统一 24px 水平槽 + 24px 行距 */
.container.grid-xl {
    max-width: 1200px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}
.columns { margin-left: -.75rem; margin-right: -.75rem; row-gap: 1.35rem; }
.column { padding-left: .75rem; padding-right: .75rem; }

/* ============ 按钮（覆盖 Spectre 固定高度，改为弹性垂直居中） ============ */
.btn {
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem 1.45rem;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 8px;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-block { display: flex; width: 100%; }

/* ============ 通用区块 ============ */
section.block { padding: 4.5rem 0; }

.eyebrow {
    display: inline-block;
    color: var(--brand);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: .55rem;
}

/* ============ 头部 ============ */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .2s;
}
.header.scrolled { box-shadow: 0 4px 20px rgba(15,23,42,.07); }
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 1.5rem;
}
.logo img { height: 44px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a {
    color: var(--ink);
    font-size: .87rem;
    font-weight: 500;
    transition: color .2s;
    padding: .4rem 0;
}
.nav-links a:hover { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: .8rem; }
.header-actions .tel {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
}
.header-actions .tel i { color: var(--brand); font-size: 1.05rem; }
.mobile-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 1.5rem;
    color: var(--ink);
    cursor: pointer;
    padding: .3rem;
    line-height: 1;
}

/* ============ Hero ============ */
.hero-cols { position: relative; z-index: 1; align-items: center; }
.hero-content { padding-right: 2rem; }
/* 注：首页 Hero 的完整样式见本文件「原 css/main.css」段的 .hero-home / .hero-title / .hero-lead */
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ============ Hero 行星系统（3D 倾斜轨道） ============ */
/* 各行星配色（彩色光晕 + 球面明暗，告别纯深色底） */

/* 恒星核心 */

/* ============ 核心业务（图卡） ============ */

/* AIGC 卡片徽章配色 */

/* ============ 行业解决方案 ============ */


/* ============ 服务优势 ============ */
.why-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.7rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid rgba(10,79,180,.07);
    background: linear-gradient(135deg, #ffffff, #e9f0f8);
    box-shadow: 0 3px 12px rgba(10,79,180,.07);
    transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.why-card:hover {
    border-color: rgba(10,79,180,.16);
    box-shadow: 0 14px 32px rgba(10,79,180,.15);
    transform: translateY(-4px);
}
.why-card > i {
    font-size: 2.1rem;
    color: var(--brand);
    margin-bottom: .9rem;
}
.why-card h4 { font-size: 1rem; margin: 0 0 .4rem; }
.why-card p { margin: 0; color: var(--muted); font-size: .8rem; }

/* ============ 客户墙 ============ */
.client-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    max-width: 900px;
    margin: 0 auto;
}
.client-tag {
    display: inline-flex;
    align-items: center;
    padding: .52rem 1.25rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--text);
    transition: background .2s, color .2s, border-color .2s;
}
.client-tag:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ============ 关于我们（图片 + 悬浮数据牌） ============ */
.about-text h2 { font-size: 1.85rem; margin: 0 0 1.1rem; }
.about-text p { color: var(--muted); margin: 0 0 .9rem; }

/* ============ 联系我们 ============ */




.contact-form .form-group { margin-bottom: 1.05rem; }
.contact-form .form-label {
    padding: 0 0 .4rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink);
}
.contact-form .form-input,
.contact-form .form-select {
    height: auto;
    padding: .58rem .85rem;
    font-size: .87rem;
    border-radius: 8px;
    border-color: var(--border);
}
.contact-form .form-input:focus,
.contact-form .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .1rem rgba(10,79,180,.14);
}
.contact-form textarea.form-input { resize: vertical; }

/* ============ 页脚 ============ */
.site-footer {
    background: #0b1220;
    color: rgba(255,255,255,.55);
    padding: 3rem 0 0;
    font-size: .8rem;
}
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-bottom: 2.2rem;
}
.footer-brand img { height: 38px; margin-bottom: .8rem; }
.footer-brand p { max-width: 400px; margin: 0; line-height: 1.7; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer-bottom a { color: rgba(255,255,255,.68); }
.footer-bottom a:hover { color: #fff; }

/* ============ 滚动浮现（由 JS 挂载，无 JS / 减动效时正常显示） ============ */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: fade-up .55s ease backwards; }
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ============ 响应式（对齐 Spectre md 断点 840px） ============ */@media (max-width: 840px){
    .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: .5rem 1.2rem 1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0,0,0,.07);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: .75rem 0; border-bottom: 1px solid var(--bg-soft); }
    .nav-links a:last-child { border-bottom: 0; }
    .mobile-toggle { display: block; }
    .hero-content { padding-right: 0; }
    
    
    
    
}
@media (max-width: 600px){
    .header-actions .tel { display: none; }
    
    
}

/* ============================================================================
   原 css/main.css（站点主样式）
   ============================================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.8;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-2); text-decoration: none; transition: color .25s; }
a:hover { color: var(--gold-ink); }

.container.grid-xl { max-width: 1240px; }

/* 按钮 */
.btn {
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn i { transition: transform .3s ease; }
.btn:hover { transform: translateY(-3px); }
.btn:hover i { transform: translateX(3px); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(18,49,79,.25);
}
.btn-primary:hover {
  box-shadow: 0 12px 32px rgba(18,49,79,.35);
  filter: brightness(1.05);
}
.btn-accent {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 8px 24px var(--shadow-accent);
}
.btn-accent:hover { color: var(--on-accent); box-shadow: 0 12px 32px var(--shadow-accent); filter: brightness(1.05); }
.btn-outline {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}
.btn-outline:hover { background: var(--blue); color: #fff; box-shadow: var(--shadow); }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-block { display: flex; width: 100%; }

/* ============ 覆盖 spectre 基础层自带的一套蓝 ============
   res/webui/css/spectre.min.css 里 .btn:focus / .btn:active / .btn.btn-primary 等
   选择器权重为 (0,2,0)~(0,3,0)，会压过上面的单类选择器。
   历史上这导致「立即咨询」等按钮恒定显示 #2563EB 亮蓝，完全脱离配色系统。
   下面用「类+类 / 类+伪类」的等权或更高权重压回去，并与主题色对齐。 */
.btn.btn-primary,
.btn.btn-primary:active { background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%); border-color: transparent; color: #fff; }
.btn.btn-primary:hover,
.btn.btn-primary:focus { background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-700) 100%); border-color: transparent; color: #fff; }
.btn.btn-accent,
.btn.btn-accent:active { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); border-color: transparent; color: var(--on-accent); }
.btn.btn-accent:hover,
.btn.btn-accent:focus { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); border-color: transparent; color: var(--on-accent); }
.btn.btn-outline,
.btn.btn-outline:active { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn.btn-outline:hover,
.btn.btn-outline:focus { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.btn-outline-light,
.btn.btn-outline-light:active { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn.btn-glass,
.btn.btn-glass:active { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.btn.btn-glass:hover,
.btn.btn-glass:focus { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); color: #fff; }
/* 焦点环改用主题色，替代 spectre 的蓝色外发光 */
.btn:focus { box-shadow: 0 0 0 3px var(--accent-a50); }
.btn.btn-accent:focus { box-shadow: 0 0 0 3px var(--accent-a25); }
/* spectre 还给 a:visited / a:focus 设了自带蓝 */
a:visited { color: var(--blue-2); }
a:focus { box-shadow: 0 0 0 3px var(--accent-a12); border-radius: var(--radius-btn); }
/* 下拉框的底色（spectre 用 background 简写写了 #fff + 箭头，需同权重覆盖底色） */
.contact-form .form-select:not([multiple]):not([size]) { background-color: var(--gray); }

/* 通用 section */
section.block { padding: 7rem 0; position: relative; }
section.block.bg-tint { background: var(--gray); }

section.block.bg-blue-soft { background: var(--blue-soft); }
section.block.bg-gold-pale { background: var(--gold-pale); }

.section-head {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}
.section-head.text-left { text-align: left; margin-left: 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--gold-ink);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.eyebrow::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  opacity: .5;
}
.section-head h2 {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  color: var(--blue);
  margin: 0 0 1.1rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.section-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* 头部 */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(233,237,242,.8);
  transition: all .3s ease;
}
.header.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 32px rgba(18,49,79,.08);
  border-color: transparent;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 1.5rem;
}
.logo { display: flex; align-items: center; }
.logo img { min-height: 30px; max-height: 40px; max-width: 100%;}
.nav-links { display: flex; align-items: center; gap: 2.4rem; }
.nav-links a {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  transition: color .25s;
  padding: .4rem 0;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-actions .tel {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  transition: color .25s;
}
.header-actions .tel:hover { color: var(--blue); }
.header-actions .tel i { color: var(--gold); font-size: 1.1rem; }
.mobile-toggle {
  display: none;
  background: var(--gray);
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-btn);
  font-size: 1.35rem;
  color: var(--blue);
  cursor: pointer;
  padding: .45rem .6rem;
  line-height: 1;
  transition: all .25s;
}
.mobile-toggle:hover { background: var(--blue-soft); border-color: var(--blue-light); }

/* ============ 首页 Hero（v2 重设计） ============ */
.hero-home {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(80px + 2.5rem) 0 4rem;
  background: linear-gradient(155deg, var(--surface-900) 0%, var(--surface-800) 38%, var(--surface-600) 132%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* 底部金色细线，与下方数据带自然衔接 */
.hero-home::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14) 22%, var(--accent-a50) 50%, rgba(255,255,255,.14) 78%, transparent);
}
/* 极光光晕 */
.hero-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
.hero-aurora .a1 { width: 620px; height: 620px; top: -22%; right: -8%; background: var(--glow-1); animation: aurora-drift 20s ease-in-out infinite alternate; }
.hero-aurora .a2 { width: 460px; height: 460px; bottom: -24%; left: -6%; background: var(--glow-2); animation: aurora-drift 26s ease-in-out infinite alternate-reverse; }
.hero-aurora .a3 { width: 420px; height: 420px; top: 2%; left: 4%; background: var(--glow-3); animation: aurora-drift 32s ease-in-out infinite alternate; }
@keyframes aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-40px, 30px, 0) scale(1.12); }
}
/* 科技网格底纹（径向遮罩渐隐） */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 40px 40px, 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 72% at 62% 38%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 72% at 62% 38%, #000 18%, transparent 78%);
}
.hero-home .container { position: relative; z-index: 3; }
.hero-home .hero-cols { align-items: center; }
.hero-content { padding-right: 2.5rem; }

/* 标识徽章 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .6px;
  color: rgba(255,255,255,.9);
  margin-bottom: 1.7rem;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,.16);
  animation: badge-pulse 2.6s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.14); }
  50%      { box-shadow: 0 0 0 7px rgba(74,222,128,.04); }
}
/* 主标题 */
.hero-title {
  font-size: clamp(2.15rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -1.6px;
  color: #fff;
  margin: 0 0 1.5rem;
}
.hero-title .line { display: block; }
.hero-title .grad {
  position: relative;
  background: linear-gradient(100deg, var(--accent-graphic) 0%, var(--accent-200) 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-title .grad::after {
  content: "";
  position: absolute;
  left: 0; right: 8%; bottom: .04em;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent-graphic), transparent);
}
.hero-lead {
  font-size: 1.06rem;
  line-height: 1.85;
  color: rgba(255,255,255,.72);
  max-width: 560px;
  margin: 2rem 0;
}
.hero-lead strong { color: #fff; font-weight: 600; }
/* 深色底上的玻璃按钮 */
.btn-glass {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.6);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
/* 移动端能力标签（仅在窄屏显示） */
.hero-chips-mobile { display: none; }
.hero-chips-mobile span {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .76rem;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}
.hero-chips-mobile span i { color: var(--accent-graphic); font-size: .95rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-actions .btn { padding: 1rem 2.2rem; }

/* 底部信任条 */
.hero-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem 2rem;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative;
  z-index: 3;
}
.rail-item { display: flex; align-items: flex-start; gap: .85rem; }
.rail-item > i {
  flex: none;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--accent-graphic);
  font-size: 1.15rem;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.rail-item:hover > i {
  background: var(--glow-3);
  border-color: var(--accent-a50);
  color: #fff;
  transform: translateY(-2px);
}
.rail-item strong { display: block; font-size: .92rem; font-weight: 600; color: #fff; line-height: 1.5; }
.rail-item span { display: block; font-size: .78rem; color: rgba(255,255,255,.58); line-height: 1.6; }

/* 入场动效 */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-content > *, .hero-visual, .hero-rail {
  animation: hero-in .95s cubic-bezier(.16,1,.3,1) backwards;
}
.hero-content > *:nth-child(1) { animation-delay: .06s; }
.hero-content > *:nth-child(2) { animation-delay: .16s; }
.hero-content > *:nth-child(3) { animation-delay: .26s; }
.hero-content > *:nth-child(4) { animation-delay: .36s; }
.hero-content > *:nth-child(5) { animation-delay: .46s; }
.hero-visual { animation-delay: .3s; }
.hero-rail   { animation-delay: .5s; }

/* ============ 右侧能力视觉（纯 CSS 构图，无需图片） ============ */
.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.hv-stage {
  position: relative;
  width: 100%;
  max-width: min(480px, 52vh);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  container-type: inline-size;
}
.hv-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-2), rgba(38,86,127,.06) 52%, transparent 74%);
}
.hv-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.hv-ring.r1 { inset: 6%; border: 1px solid rgba(255,255,255,.12); }
.hv-ring.r2 { inset: 19%; border: 1px dashed rgba(255,255,255,.18); animation: hv-spin 60s linear infinite; }
.hv-ring.r3 {
  inset: 0;
  border: 1px solid transparent;
  border-top-color: var(--accent-graphic);
  border-right-color: var(--accent-a12);
  animation: hv-spin 28s linear infinite reverse;
}
@keyframes hv-spin { to { transform: rotate(360deg); } }
/* 中央玻璃核心 */
.hv-core {
  position: absolute;
  inset: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55cqw;
  padding: 3cqw;
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(2,12,30,.5), inset 0 1px 0 rgba(255,255,255,.32);
  animation: hv-breathe 7s ease-in-out infinite;
}
@keyframes hv-breathe {
  0%, 100% { box-shadow: 0 30px 70px rgba(2,12,30,.5), inset 0 1px 0 rgba(255,255,255,.32); }
  50%      { box-shadow: 0 30px 90px rgba(0,120,220,.35), inset 0 1px 0 rgba(255,255,255,.45); }
}
.hv-core .core-icon {
  width: 9.5cqw; height: 9.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, var(--accent-300), var(--accent-400));
  color: var(--on-accent);
  font-size: 4.8cqw;
  margin-bottom: .6cqw;
}
.hv-core strong { font-size: 4.6cqw; font-weight: 800; color: #fff; line-height: 1.2; }
.hv-core span {
  font-size: 2.1cqw;
  color: rgba(255,255,255,.62);
  letter-spacing: .12cqw;
  text-transform: uppercase;
}
/* 漂浮能力标签 */
.hv-chip {
  --tx: 0;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 34px rgba(2,12,30,.38);
  animation: hv-float 7s ease-in-out infinite;
  /* 延迟期间应用 0% 帧：否则 .c1/.c4 的 translateX(-50%) 居中在动画启动前不生效，导致横跳 */
  animation-fill-mode: backwards;
}
.hv-chip i { font-size: .95rem; }
.hv-chip.c1 { top: 1%;    left: 50%;  --tx: -50%; animation-delay: 0s; }
.hv-chip.c2 { top: 20%;   right: -4%; animation-delay: .9s; }
.hv-chip.c3 { top: 63%;   right: -1%; animation-delay: 1.8s; }
.hv-chip.c4 { bottom: 1%; left: 50%;  --tx: -50%; animation-delay: 2.7s; }
.hv-chip.c5 { top: 20%;   left: -4%;  animation-delay: 3.6s; }
.hv-chip.c1 i { color: var(--blue-400); }
.hv-chip.c2 i { color: #4ade80; }
.hv-chip.c3 i { color: var(--accent-300); }
.hv-chip.c4 i { color: #a78bfa; }
.hv-chip.c5 i { color: var(--cyan); }
@keyframes hv-float {
  0%, 100% { transform: translate(var(--tx, 0), 0); }
  50%      { transform: translate(var(--tx, 0), -12px); }
}

/* 减动效偏好 */@media (prefers-reduced-motion: reduce){
  .hero-aurora span, .hv-ring, .hv-core, .hv-chip,
  .hero-badge .dot,
  .hero-content > *, .hero-visual, .hero-rail { animation: none !important; }
}

/* 内页页头 */
.page-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(150deg, var(--surface-800) 0%, var(--surface-600) 100%);
  color: #fff;
  overflow: hidden;
  padding: calc(80px + 4rem) 0 7rem;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .5;
}
.page-hero::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 90px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--accent-200); justify-content: center; }
.page-hero .eyebrow::before { background: var(--accent-graphic); }
.page-hero .eyebrow::after { background: var(--accent-graphic); }
.page-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: #fff;
  margin: 0 0 1.1rem;
  font-weight: 800;
  letter-spacing: -1px;
}
.page-hero .page-desc {
  color: rgba(255,255,255,.85);
  font-size: 1.08rem;
  max-width: 950px;
  margin: 0 auto;
  line-height: 1.75;
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.6rem;
  font-size: .84rem;
  color: rgba(255,255,255,.7);
}
.breadcrumb a { color: #fff; position: relative; }
.breadcrumb a:hover { color: var(--accent-200); }
.breadcrumb i { color: var(--accent-graphic); }

.stats-band { padding: 0 0 7rem 0; }
.stats-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 4rem 3.5rem;
  background: linear-gradient(150deg, var(--surface-800) 0%, var(--surface-700) 58%, var(--surface-600) 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
/* 网格底纹 */
.stats-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 82% 0%, #000 12%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 92% at 82% 0%, #000 12%, transparent 74%);
  pointer-events: none;
}
/* 顶部金线 */
.stats-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-graphic) 25%, var(--accent-200) 50%, var(--accent-graphic) 75%, transparent);
  opacity: .85;
}
.stats-glow {
  position: absolute;
  top: -170px; right: -90px;
  width: 430px; height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-2), transparent 68%);
  pointer-events: none;
}
.stats-panel-head {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 0 2.6rem;
}
.stats-panel-head .eyebrow { color: var(--accent-200); }
.stats-panel-head .eyebrow::before,
.stats-panel-head .eyebrow::after { background: var(--accent-graphic); }
.stats-panel-head h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: #fff;
  margin: 0 0 .7rem;
  font-weight: 800;
  letter-spacing: -.5px;
}
.stats-panel-head p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .98rem;
}
.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  position: relative;
  padding: 0 1.8rem;
  border-right: 1px solid rgba(255,255,255,.13);
}
.stat-card:first-child { padding-left: 0; }
.stat-card:last-child { padding-right: 0; border-right: 0; }
/* 悬浮柔光 */
.stat-card::after {
  content: "";
  position: absolute;
  inset: -1.2rem -.6rem;
  border-radius: var(--radius-btn);
  background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.09), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.stat-card:hover::after { opacity: 1; }
.stat-card > i {
  display: block;
  font-size: 1.35rem;
  color: var(--accent-graphic);
  margin-bottom: .9rem;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.stat-card:hover > i { transform: translateY(-4px) scale(1.08); }
.stat-card strong {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.3rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  background: linear-gradient(120deg, #ffffff 0%, var(--accent-200) 62%, var(--accent-graphic) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-card .stat-sfx { font-size: .62em; }
.stat-label {
  display: block;
  margin-top: .75rem;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
}
.stat-card em {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.6;
  font-style: normal;
  color: rgba(255,255,255,.68);
}

/* split 布局 */
.section-split { display: flex; gap: 5rem; }
.section-split .split-left {
  flex: 0 0 320px;
  position: sticky;
  top: 110px;
  align-self: flex-start;
}
.section-split .split-left h2 {
  font-size: 2.4rem;
  color: var(--blue);
  margin: 0 0 1.2rem;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.section-split .split-left p { color: var(--text-muted); margin: 0; font-size: 1.02rem; }
.section-split .split-right { flex: 1; }

/* 服务列表 */
.service-list { display: flex; flex-direction: column; gap: 1.2rem; }
.service-item {
  display: flex;
  gap: 1.8rem;
  padding: 2rem 2.2rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--gray-2);
  transition: all .35s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}
.service-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform .35s ease;
  border-radius: 0;
}
.service-item:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateX(10px);
}
.service-item:hover::before { transform: scaleY(1); }
.service-item .service-icon {
  flex: none;
  width: 62px; height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: var(--gold-pale);
  border: 1px solid var(--accent-a25);
  color: var(--gold-ink);
  font-size: 1.7rem;
  border-radius: var(--radius-btn);
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.service-item:hover .service-icon {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(18,49,79,.28);
}
.service-item h3 {
  font-size: 1.3rem;
  color: var(--blue);
  margin: 0 0 .5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.service-item p { color: var(--text-muted); margin: 0 0 1rem; line-height: 1.75; }
.service-item .tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.service-item .tags span {
  font-size: .75rem;
  color: var(--blue-2);
  background: var(--blue-soft);
  padding: .3rem .85rem;
  border-radius: var(--radius-btn);
  font-weight: 500;
}

/* 交错图文块 */

.stagger-pic {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stagger-pic::before {
  content: "";
  position: absolute;
  top: 22px; left: 22px; right: -22px; bottom: -22px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: .8;
}
.stagger-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.stagger-pic:hover img { transform: scale(1.03); }

.feature-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--text);
  font-size: .94rem;
  font-weight: 500;
}
.feature-list li i {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: var(--gold-pale);
  color: var(--gold-ink);
  font-size: .8rem;
  flex: none;
  border-radius: var(--radius-btn);
}

/* 优势卡片 */
.why-grid { row-gap: 1.5rem; }
.why-card {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 2.2rem;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transition: transform .35s ease;
}
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: var(--gold-light);
}
.why-card:hover::before { transform: scaleX(1); }
.why-card > i {
  font-size: 2.2rem;
  color: var(--gold-ink);
  margin-bottom: 1.2rem;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-pale);
  border-radius: var(--radius-btn);
}
.why-card h4 { font-size: 1.15rem; color: var(--blue); margin: 0 0 .4rem; font-weight: 700; }
.why-card p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.7; }

/* 客户墙 */
.client-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.client-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem .8rem;
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius-btn);
  font-size: .84rem;
  color: var(--text);
  transition: all .3s cubic-bezier(.16,1,.3,1);
  min-height: 76px;
  font-weight: 500;
}
.client-tag:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 10px 26px rgba(18,49,79,.22);
  transform: translateY(-3px);
}

/* 引用块 */
.quote-block {
  background: linear-gradient(160deg, var(--surface-900) 0%, var(--surface-800) 42%, var(--surface-600) 134%);
  color: #fff;
  border-radius: var(--radius);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}
.quote-block::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border: 3px solid var(--accent-a25);
  border-radius: 50%;
}
.quote-block i {
  font-size: 3.2rem;
  color: var(--gold);
  margin-bottom: 1.2rem;
  position: relative;
}
.quote-block p {
  font-size: 1.25rem;
  line-height: 1.75;
  margin: 0 0 1.8rem;
  position: relative;
  font-weight: 400;
}
.quote-block .author {
  color: var(--accent-200);
  font-weight: 600;
  font-size: .95rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.quote-block .author::before {
  content: "";
  width: 30px; height: 2px;
  background: var(--accent-graphic);
  border-radius: 2px;
}

/* 案例网格 */
.case-grid { row-gap: 1.5rem; }
.case-card {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all .4s cubic-bezier(.16,1,.3,1);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.case-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-light);
}
.case-card .card-pic { position: relative; overflow: hidden; }
.case-card .card-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,49,79,.6) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.case-card:hover .card-pic::after { opacity: 1; }
.case-card .card-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.case-card:hover .card-pic img { transform: scale(1.08); }

.case-card .card-body { padding: 1.8rem; flex: 1; display: flex; flex-direction: column; }
.case-card h3 { font-size: 1.18rem; margin: 0 0 .5rem; color: var(--blue); font-weight: 700; }
.case-card p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.75; }
.case-card .case-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--gold-ink);
  margin-top: auto;
  padding-top: 1.2rem;
  font-weight: 600;
}

/* 特色案例大卡片 */
.featured-case {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-2);
  box-shadow: var(--shadow);
  transition: all .4s ease;
}
.featured-case:hover { box-shadow: var(--shadow-lg); border-color: var(--gold-light); }
.featured-case .fc-pic { overflow: hidden; position: relative; }
.featured-case .fc-pic img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; transition: transform .6s ease; }
.featured-case:hover .fc-pic img { transform: scale(1.05); }
.featured-case .fc-body { padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; }
.featured-case .fc-body .eyebrow { margin-bottom: 1rem; }
.featured-case .fc-body h3 { font-size: 1.95rem; color: var(--blue); margin: 0 0 1.1rem; font-weight: 800; letter-spacing: -0.5px; }
.featured-case .fc-body p { color: var(--text-muted); margin: 0 0 1.8rem; line-height: 1.85; }

/* CTA 区块 */
.cta-block {
  position: relative;
  padding: 5.5rem 0;
  text-align: center;
  background: linear-gradient(150deg, var(--surface-700) 0%, var(--surface-600) 58%, var(--surface-800) 100%);
  color: #fff;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cta-block::after {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--accent-a12);
}
.cta-block .container { position: relative; z-index: 2; }
.cta-block h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: #fff;
  margin: 0 0 1.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.cta-block p {
  color: rgba(255,255,255,.9);
  max-width: 950px;
  margin: 0 auto 2.2rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

/* 关于我们 */
.about-intro { align-items: center; }
.about-intro .about-text h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--blue);
  margin: 0 0 1.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.25;
}
.about-intro .about-text p { color: var(--text-muted); margin: 0 0 1.1rem; line-height: 1.85; }

.value-cards { row-gap: 1.5rem; }
.value-card {
  background: #fff;
  border: 1px solid var(--gray-2);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  height: 100%;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.value-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transition: transform .35s ease;
}
.value-card:hover { transform: translateY(-8px); border-color: var(--gold-light); box-shadow: var(--shadow); }
.value-card:hover::after { transform: scaleX(1); }
.value-card i {
  font-size: 2.4rem;
  color: var(--gold-ink);
  margin: 0 auto 1.2rem;
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-pale);
  border-radius: var(--radius-btn);
}
.value-card h4 { color: var(--blue); margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; }
.value-card p { color: var(--text-muted); margin: 0; font-size: .9rem; line-height: 1.7; }

/* 时间轴 */
.timeline-wrap { display: flex; gap: 4rem; align-items: center; }
.timeline-wrap .timeline-pic { flex: 1; }
.timeline-wrap .timeline-pic img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow); }
.timeline { position: relative; padding-left: 2.4rem; flex: 1; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gray-2), var(--gold));
  border-radius: 2px;
}
.timeline-item { position: relative; padding-bottom: 2.4rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.4rem; top: 2px;
  width: 18px; height: 18px;
  border-radius: var(--radius-btn);
  background: #fff;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 4px var(--gold-pale);
}
.timeline-item .year {
  display: inline-block;
  font-size: .75rem;
  color: var(--blue);
  background: var(--gold-pale);
  padding: .2rem .8rem;
  border-radius: var(--radius-btn);
  margin-bottom: .5rem;
  font-weight: 700;
}
.timeline-item h4 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--blue); font-weight: 700; }
.timeline-item p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.7; }

/* 业务详情 */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-2);
  margin-bottom: 3rem;
  box-shadow: var(--shadow);
  transition: all .4s ease;
}
.service-detail:hover { box-shadow: var(--shadow-lg); border-color: var(--gold-light); }
.service-detail:last-child { margin-bottom: 0; }
.service-detail.reverse { direction: rtl; }
.service-detail.reverse > * { direction: ltr; }
.service-detail .sd-pic { overflow: hidden; }
.service-detail .sd-pic img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform .6s ease; }
.service-detail:hover .sd-pic img { transform: scale(1.05); }
.service-detail .sd-body { padding: 3.5rem; display: flex; flex-direction: column; justify-content: center; }
.service-detail h3 { color: var(--blue); margin: 0 0 1rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.5px; }
.service-detail h3 i {
  color: var(--gold);
  margin-right: .7rem;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-pale);
  border-radius: var(--radius-btn);
  font-size: 1.4rem;
}
.service-detail p { color: var(--text-muted); margin: 0 0 1.5rem; line-height: 1.85; }
.service-detail ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}
.service-detail li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  color: var(--text);
  font-weight: 500;
}
.service-detail li i { color: var(--gold); font-size: 1.1rem; }

/* 流程步骤 */
.step-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  position: relative;
}
.step-flow::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--gray-2) 0%, var(--gold) 50%, var(--gray-2) 100%);
  z-index: 0;
}
.step-flow-item {
  position: relative;
  z-index: 1;
  text-align: center;
  background: #fff;
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-2);
  transition: all .3s ease;
}
.step-flow-item:hover { border-color: var(--gold-light); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.step-flow-item .num {
  width: 58px; height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 2px solid var(--gray-2);
  color: var(--blue);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 auto 1rem;
  transition: all .3s ease;
}
.step-flow-item:hover .num {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-700));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(18,49,79,.25);
}
.step-flow-item h4 { font-size: 1.05rem; color: var(--blue); margin: 0 0 .3rem; font-weight: 700; }
.step-flow-item p { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.65; }

/* 联系我们 */
.contact-split {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-2);
  box-shadow: var(--shadow-lg);
}
.contact-info-side {
  background: linear-gradient(155deg, var(--surface-800) 0%, var(--surface-700) 60%, var(--surface-600) 100%);
  color: #fff;
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.contact-info-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.contact-info-side > * { position: relative; }
.contact-info-side .eyebrow { color: var(--accent-200); }
.contact-info-side .eyebrow::before,
.contact-info-side .eyebrow::after { background: var(--accent-graphic); }
.contact-info-side h2 { color: #fff; font-size: 2rem; margin: 0 0 1rem; font-weight: 800; letter-spacing: -0.5px; }
.contact-info-side > p { color: rgba(255,255,255,.85); margin: 0 0 2.2rem; line-height: 1.75; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-list .item { display: flex; align-items: center; gap: 1.1rem; }
.contact-info-list .item > i {
  flex: none;
  width: 50px; height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.1);
  color: var(--accent-graphic);
  font-size: 1.3rem;
  transition: all .3s ease;
}
.contact-info-list .item:hover > i { background: var(--gold-light); color: var(--on-accent); transform: scale(1.05); }
.contact-info-list .item strong { display: block; font-size: .9rem; color: #fff; line-height: 1.4; font-weight: 600; }
.contact-info-list .item span { font-size: .86rem; color: rgba(255,255,255,.75); }
.contact-form-side { padding: 3.5rem; }
.contact-form-side h3 { font-size: 1.7rem; color: var(--blue); margin: 0 0 .4rem; font-weight: 800; letter-spacing: -0.5px; }
.contact-form-side > p { color: var(--text-muted); margin: 0 0 2rem; }
.contact-form .form-group { margin-bottom: 1.2rem; }
.contact-form .form-label {
  padding: 0 0 .5rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text);
}
.contact-form .form-input,
.contact-form .form-select {
  height: auto;
  padding: .85rem 1.1rem;
  font-size: .92rem;
  border-radius: var(--radius-btn);
  border-color: var(--gray-2);
  background: var(--gray);
  color: var(--text);
  transition: all .25s ease;
}
.contact-form .form-input::placeholder { color: var(--text-light); }
.contact-form .form-input:focus,
.contact-form .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem var(--accent-a12);
  background: #fff;
}
.contact-form textarea.form-input { resize: vertical; }

/* 地图占位 */
.map-placeholder {
  width: 100%;
  min-height: 400px;
  background: linear-gradient(135deg, var(--gray) 0%, #fff 100%);
  border: 2px dashed var(--gray-2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: .8rem;
}
.map-placeholder i { font-size: 2.6rem; color: var(--gold); }

/* 页脚 */
.site-footer {
  background: linear-gradient(160deg, var(--surface-950) 0%, var(--surface-800) 100%);
  color: rgba(255,255,255,.7);
  padding: 5rem 0 0;
  font-size: .86rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  padding-bottom: 3.5rem;
  position: relative;
}
.footer-brand img { height: 40px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 360px; margin: 0; line-height: 1.85; color: rgba(255,255,255,.75); }
.footer-cols { display: flex; gap: 5rem; flex-wrap: wrap; }
.footer-col h4 {
  color: #fff;
  font-size: .95rem;
  margin: 0 0 1.2rem;
  font-weight: 700;
  position: relative;
  padding-bottom: .6rem;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--accent-graphic);
  border-radius: 2px;
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.footer-col a { color: rgba(255,255,255,.75); transition: all .25s; }
.footer-col a:hover { color: var(--accent-200); padding-left: 4px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.footer-bottom a { color: rgba(255,255,255,.75); }
.footer-bottom a:hover { color: var(--accent-200); }

/* 滚动浮现 */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: fade-up .8s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(35px); }
  to   { opacity: 1; transform: none; }
}

/* 装饰 */

/* 响应式 */@media (max-width: 1000px){
  .hero-rail { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; }
  .stats-panel { padding: 3rem 2.5rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .stat-card { padding: 0 1.6rem 0 0; border-right: 0; }
  .stat-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.13); }
  .stat-card:nth-child(even) { padding-left: 1.6rem; }
  .stat-card:nth-child(3),
  .stat-card:nth-child(4) { border-top: 1px solid rgba(255,255,255,.13); padding-top: 2.4rem; }
}
@media (max-width: 840px){
  section.block { padding: 5rem 0; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: .5rem 1.2rem 1.2rem;
    border-bottom: 1px solid var(--gray-2);
    box-shadow: 0 16px 36px rgba(18,49,79,.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 1rem 0; border-bottom: 1px solid var(--gray-2); }
  .nav-links a:last-child { border-bottom: 0; }
  .mobile-toggle { display: block; }
  .hero-home { min-height: auto; padding: calc(80px + 2.75rem) 0 3rem; }
  .hero-content { padding-right: 0; }
  .hero-title { font-size: clamp(1.95rem, 6.4vw, 2.7rem); letter-spacing: -1px; }
  .hero-badge { font-size: .71rem; padding: .42rem .9rem; margin-bottom: 1.3rem; }
  .hero-lead { font-size: .98rem; margin-bottom: 1.7rem; }
  .hero-rail {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem 1.4rem;
    margin-top: 2.6rem;
    padding-top: 1.7rem;
  }
  .hero-chips-mobile {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin-top: 1.5rem;
    padding-bottom: .3rem;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .hero-chips-mobile::-webkit-scrollbar { display: none; }
  .stats-panel-head { margin-bottom: 2rem; }
  .section-split { flex-direction: column; gap: 2.5rem; }
  .section-split .split-left { position: static; flex: auto; }
  .client-wall { grid-template-columns: repeat(3, 1fr); }
  .featured-case { grid-template-columns: 1fr; }
  .featured-case .fc-body { padding: 2.5rem; }
  .service-detail { grid-template-columns: 1fr; }
  .service-detail.reverse { direction: ltr; }
  .service-detail .sd-body { padding: 2.5rem; }
  .timeline-wrap { flex-direction: column; }
  .step-flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .step-flow::before { display: none; }
  .contact-split { grid-template-columns: 1fr; }
  .footer-cols { gap: 2.5rem; }
}
@media (max-width: 600px){
  .header-actions .tel { display: none; }
  .hero-title { font-size: 1.92rem; letter-spacing: -.6px; }
  .hero-actions .btn { width: 98%; }
  .hero-rail { grid-template-columns: repeat(2, 1fr); gap: .9rem 1rem; }
  .rail-item { gap: .6rem; }
  .rail-item > i { width: 34px; height: 34px; font-size: 1rem; }
  .rail-item span { display: none; }
  .stats-panel { padding: 2.4rem 1.8rem; }
  .stats-grid { grid-template-columns: 1fr; row-gap: 0; }
  .stat-card,
  .stat-card:nth-child(odd),
  .stat-card:nth-child(even) {
    padding: 1.7rem 0 0;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.13);
  }
  .stat-card:first-child { padding-top: 0; border-top: 0; }
  .client-wall { grid-template-columns: repeat(2, 1fr); }
  .service-detail ul { grid-template-columns: 1fr; }
  .service-detail h3 { font-size: 1.4rem; }
  .service-detail h3 i { width: 40px; height: 40px; font-size: 1.2rem; }
  .contact-info-side, .contact-form-side { padding: 2.5rem; }
  .quote-block { padding: 2.5rem; }
}
@media (max-width: 460px){
  .hero-rail { grid-template-columns: 1fr; }
  .rail-item span { display: block; }
}