:root { /* 定义全站可复用的主题变量。 */
  --color-primary: #102A43; /* 设置主色为深藏青。 */
  --color-primary-soft: #243B53; /* 设置辅助深色。 */
  --color-accent: #B33A32; /* 设置沉稳朱红强调色。 */
  --color-green: #2F855A; /* 设置少量绿色用于视觉平衡。 */
  --color-bg: #F5F7FA; /* 设置浅背景色。 */
  --color-surface: #FFFFFF; /* 设置卡片和面板背景色。 */
  --color-text: #263238; /* 设置正文文字色。 */
  --color-muted: #60717C; /* 设置辅助文字色。 */
  --color-border: #D9E2EC; /* 设置边框色。 */
  --shadow-soft: 0 18px 44px rgba(16, 42, 67, 0.12); /* 设置柔和阴影。 */
  --shadow-small: 0 8px 24px rgba(16, 42, 67, 0.08); /* 设置小型阴影。 */
  --radius: 8px; /* 设置统一圆角。 */
  --header-height: 76px; /* 设置顶部导航高度。 */
  --content-width: 1160px; /* 设置内容最大宽度。 */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Microsoft YaHei", sans-serif; /* 设置系统字体栈。 */
} /* 主题变量定义结束。 */

* { /* 统一所有元素盒模型。 */
  box-sizing: border-box; /* 让宽高包含边框和内边距。 */
} /* 全局盒模型规则结束。 */

html { /* 设置根元素行为。 */
  scroll-behavior: smooth; /* 启用锚点平滑滚动。 */
  scroll-padding-top: var(--header-height); /* 为固定导航预留滚动偏移。 */
} /* 根元素规则结束。 */

body { /* 设置页面主体基础样式。 */
  margin: 0; /* 移除浏览器默认外边距。 */
  min-width: 320px; /* 确保最小移动宽度可读。 */
  color: var(--color-text); /* 应用正文文字颜色。 */
  background: var(--color-surface); /* 应用页面背景色。 */
  font-family: var(--font-stack); /* 应用系统字体栈。 */
  line-height: 1.7; /* 设置中日文适合的行高。 */
  overflow-x: hidden; /* 防止横向溢出。 */
} /* 页面主体规则结束。 */

a { /* 设置链接基础样式。 */
  color: inherit; /* 让链接继承文字颜色。 */
  text-decoration: none; /* 移除默认下划线。 */
} /* 链接规则结束。 */

img, svg { /* 设置媒体元素基础样式。 */
  display: block; /* 避免行内元素底部空隙。 */
  max-width: 100%; /* 防止媒体超出容器。 */
} /* 媒体元素规则结束。 */

[hidden] { /* 修正隐藏元素在自定义 display 下仍占位的问题。 */
  display: none !important; /* 强制隐藏带 hidden 属性的元素。 */
} /* hidden 属性规则结束。 */

button, a { /* 设置可交互元素点击体验。 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮。 */
} /* 可交互元素基础规则结束。 */

button { /* 设置按钮字体继承。 */
  font: inherit; /* 让按钮继承页面字体。 */
} /* 按钮基础规则结束。 */

:focus-visible { /* 设置键盘焦点样式。 */
  outline: 3px solid rgba(179, 58, 50, 0.38); /* 绘制清晰焦点轮廓。 */
  outline-offset: 3px; /* 设置焦点轮廓间距。 */
} /* 键盘焦点样式结束。 */

.sr-only { /* 设置仅屏幕阅读器可见文本。 */
  position: absolute; /* 将文本脱离正常布局。 */
  width: 1px; /* 设置极小宽度。 */
  height: 1px; /* 设置极小高度。 */
  padding: 0; /* 移除内边距。 */
  margin: -1px; /* 隐藏文本占位。 */
  overflow: hidden; /* 隐藏溢出内容。 */
  clip: rect(0, 0, 0, 0); /* 兼容旧浏览器裁剪。 */
  white-space: nowrap; /* 防止文本换行。 */
  border: 0; /* 移除边框。 */
} /* 屏幕阅读器文本规则结束。 */

.skip-link { /* 设置跳过导航链接。 */
  position: fixed; /* 固定在视口顶部。 */
  top: 12px; /* 设置顶部距离。 */
  left: 12px; /* 设置左侧距离。 */
  z-index: 2000; /* 确保显示在导航之上。 */
  padding: 10px 14px; /* 设置可点击区域。 */
  color: var(--color-surface); /* 设置文字为白色。 */
  background: var(--color-primary); /* 设置深色背景。 */
  border-radius: var(--radius); /* 设置圆角。 */
  transform: translateY(-140%); /* 默认移出视口。 */
  transition: transform 160ms ease; /* 设置出现动画。 */
} /* 跳过导航链接基础规则结束。 */

.skip-link:focus { /* 设置跳过导航聚焦状态。 */
  transform: translateY(0); /* 聚焦时显示链接。 */
} /* 跳过导航聚焦规则结束。 */

.site-header { /* 设置顶部导航外层。 */
  position: sticky; /* 让导航在滚动时吸顶。 */
  top: 0; /* 吸附到视口顶部。 */
  z-index: 1000; /* 确保导航高于内容。 */
  background: rgba(255, 255, 255, 0.94); /* 设置半透明白色背景。 */
  border-bottom: 1px solid rgba(217, 226, 236, 0.8); /* 设置底部分隔线。 */
  backdrop-filter: blur(16px); /* 设置玻璃模糊效果。 */
} /* 顶部导航外层规则结束。 */

.header-inner { /* 设置导航内部布局。 */
  display: flex; /* 使用弹性布局。 */
  align-items: center; /* 垂直居中导航内容。 */
  justify-content: space-between; /* 左右分散导航内容。 */
  gap: 18px; /* 设置导航内容间距。 */
  width: min(100% - 32px, var(--content-width)); /* 设置响应式内容宽度。 */
  min-height: var(--header-height); /* 设置导航最小高度。 */
  margin: 0 auto; /* 水平居中导航内容。 */
} /* 导航内部布局规则结束。 */

.brand { /* 设置品牌链接。 */
  display: inline-flex; /* 使用行内弹性布局。 */
  align-items: center; /* 垂直居中品牌内容。 */
  gap: 10px; /* 设置品牌图文间距。 */
  min-width: 0; /* 允许品牌文字在小屏收缩。 */
  font-weight: 700; /* 设置品牌文字加粗。 */
  color: var(--color-primary); /* 设置品牌文字颜色。 */
} /* 品牌链接规则结束。 */

.brand-mark { /* 设置品牌图形。 */
  display: grid; /* 使用网格居中文本。 */
  place-items: center; /* 水平垂直居中标记。 */
  width: 38px; /* 设置标记宽度。 */
  height: 38px; /* 设置标记高度。 */
  flex: 0 0 auto; /* 防止标记被压缩。 */
  color: var(--color-surface); /* 设置标记文字颜色。 */
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); /* 设置克制品牌渐变。 */
  border-radius: 8px; /* 设置标记圆角。 */
} /* 品牌图形规则结束。 */

.brand-name { /* 设置品牌名称。 */
  overflow: hidden; /* 防止长文本溢出。 */
  text-overflow: ellipsis; /* 超出时显示省略号。 */
  white-space: nowrap; /* 保持品牌名称单行。 */
} /* 品牌名称规则结束。 */

.site-nav { /* 设置桌面导航。 */
  display: flex; /* 使用弹性布局排列链接。 */
  align-items: center; /* 垂直居中链接。 */
  justify-content: center; /* 水平居中链接组。 */
  gap: 4px; /* 设置链接间距。 */
  flex: 1 1 auto; /* 允许导航占用剩余空间。 */
} /* 桌面导航规则结束。 */

.site-nav a { /* 设置导航链接。 */
  padding: 10px 12px; /* 设置链接点击区域。 */
  color: var(--color-primary-soft); /* 设置导航文字颜色。 */
  font-size: 14px; /* 设置导航字号。 */
  border-radius: 8px; /* 设置导航悬停圆角。 */
  transition: color 160ms ease, background 160ms ease; /* 设置状态过渡。 */
} /* 导航链接规则结束。 */

.site-nav a:hover { /* 设置导航链接悬停状态。 */
  color: var(--color-accent); /* 悬停时使用强调色。 */
  background: rgba(179, 58, 50, 0.08); /* 悬停时显示浅强调背景。 */
} /* 导航链接悬停规则结束。 */

.language-switch { /* 设置语言切换容器。 */
  display: inline-grid; /* 使用网格布局。 */
  grid-template-columns: 1fr 1fr; /* 设置两个等宽按钮。 */
  padding: 3px; /* 设置内边距。 */
  background: var(--color-bg); /* 设置浅色背景。 */
  border: 1px solid var(--color-border); /* 设置边框。 */
  border-radius: 8px; /* 设置控件圆角。 */
} /* 语言切换容器规则结束。 */

.language-button { /* 设置语言按钮。 */
  min-width: 72px; /* 保持按钮稳定宽度。 */
  padding: 8px 10px; /* 设置按钮内边距。 */
  color: var(--color-primary-soft); /* 设置按钮文字颜色。 */
  background: transparent; /* 设置透明背景。 */
  border: 0; /* 移除默认边框。 */
  border-radius: 6px; /* 设置按钮圆角。 */
  cursor: pointer; /* 显示可点击指针。 */
} /* 语言按钮规则结束。 */

.language-button.is-active { /* 设置当前语言按钮状态。 */
  color: var(--color-surface); /* 设置当前按钮文字为白色。 */
  background: var(--color-primary); /* 设置当前按钮背景为主色。 */
} /* 当前语言按钮规则结束。 */

.menu-toggle { /* 设置手机菜单按钮。 */
  display: none; /* 桌面端隐藏菜单按钮。 */
  width: 44px; /* 设置按钮宽度。 */
  height: 44px; /* 设置按钮高度。 */
  place-items: center; /* 居中按钮线条。 */
  padding: 10px; /* 设置按钮内边距。 */
  background: var(--color-bg); /* 设置按钮背景。 */
  border: 1px solid var(--color-border); /* 设置按钮边框。 */
  border-radius: 8px; /* 设置按钮圆角。 */
  cursor: pointer; /* 显示可点击指针。 */
} /* 手机菜单按钮规则结束。 */

.menu-toggle-line { /* 设置菜单按钮线条。 */
  display: block; /* 让线条独占一行。 */
  width: 20px; /* 设置线条宽度。 */
  height: 2px; /* 设置线条高度。 */
  margin: 3px 0; /* 设置线条间距。 */
  background: var(--color-primary); /* 设置线条颜色。 */
  border-radius: 999px; /* 设置线条圆角。 */
} /* 菜单按钮线条规则结束。 */

.section { /* 设置页面区块基础样式。 */
  padding: 92px 0; /* 设置区块上下留白。 */
} /* 页面区块基础规则结束。 */

.section-muted { /* 设置浅色背景区块。 */
  background: var(--color-bg); /* 应用浅背景色。 */
} /* 浅色背景区块规则结束。 */

.section-inner { /* 设置区块内容宽度。 */
  width: min(100% - 32px, var(--content-width)); /* 设置响应式最大宽度。 */
  margin: 0 auto; /* 水平居中内容。 */
} /* 区块内容宽度规则结束。 */

.hero { /* 设置首屏区块。 */
  min-height: calc(100vh - var(--header-height)); /* 让首屏接近整屏高度。 */
  padding-top: 78px; /* 设置首屏顶部留白。 */
  background: radial-gradient(circle at 88% 18%, rgba(47, 133, 90, 0.14), transparent 28%), linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%); /* 设置非单色首屏背景。 */
} /* 首屏区块规则结束。 */

.hero-grid { /* 设置首屏网格布局。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr); /* 设置左右两栏比例。 */
  align-items: center; /* 垂直居中首屏内容。 */
  gap: 56px; /* 设置左右栏间距。 */
} /* 首屏网格规则结束。 */

.hero-copy h1, .section-heading h2, .contact-copy h2 { /* 设置主要标题公共样式。 */
  margin: 0; /* 移除默认外边距。 */
  color: var(--color-primary); /* 设置标题主色。 */
  line-height: 1.18; /* 设置标题行高。 */
  letter-spacing: 0; /* 保持正常字距。 */
} /* 主要标题公共规则结束。 */

.hero-copy h1 { /* 设置首屏标题。 */
  max-width: 780px; /* 限制标题宽度。 */
  font-size: 68px; /* 设置桌面端标题大小。 */
} /* 首屏标题规则结束。 */

.hero-lead { /* 设置首屏说明文字。 */
  max-width: 700px; /* 限制说明文字宽度。 */
  margin: 24px 0 0; /* 设置说明文字上方间距。 */
  color: var(--color-primary-soft); /* 设置说明文字颜色。 */
  font-size: 18px; /* 设置说明文字字号。 */
} /* 首屏说明文字规则结束。 */

.hero-actions { /* 设置首屏按钮组。 */
  display: flex; /* 使用弹性布局。 */
  flex-wrap: wrap; /* 小屏允许按钮换行。 */
  gap: 14px; /* 设置按钮间距。 */
  margin-top: 32px; /* 设置按钮组上方间距。 */
} /* 首屏按钮组规则结束。 */

.hero-visual { /* 设置首屏视觉容器。 */
  position: relative; /* 为装饰层提供定位上下文。 */
  padding: 18px; /* 设置视觉容器留白。 */
} /* 首屏视觉容器规则结束。 */

.hero-visual::before { /* 设置首屏视觉背景块。 */
  position: absolute; /* 使用绝对定位。 */
  inset: 42px 0 0 34px; /* 设置背景块位置。 */
  content: ""; /* 生成伪元素。 */
  background: rgba(16, 42, 67, 0.08); /* 设置淡色背景。 */
  border-radius: 8px; /* 设置背景块圆角。 */
} /* 首屏视觉背景块规则结束。 */

.route-illustration { /* 设置首屏 SVG 插画。 */
  position: relative; /* 让插画位于伪元素之上。 */
  z-index: 1; /* 设置插画层级。 */
  width: 100%; /* 插画占满容器宽度。 */
  filter: drop-shadow(0 24px 34px rgba(16, 42, 67, 0.16)); /* 设置插画阴影。 */
} /* 首屏 SVG 插画规则结束。 */

.eyebrow { /* 设置眉题文本。 */
  margin: 0 0 14px; /* 设置眉题外边距。 */
  color: var(--color-accent); /* 设置眉题强调色。 */
  font-size: 14px; /* 设置眉题字号。 */
  font-weight: 700; /* 设置眉题加粗。 */
} /* 眉题文本规则结束。 */

.section-heading { /* 设置区块标题区域。 */
  max-width: 560px; /* 限制标题区域宽度。 */
} /* 区块标题区域规则结束。 */

.section-heading.centered { /* 设置居中标题区域。 */
  max-width: 760px; /* 设置居中标题最大宽度。 */
  margin: 0 auto 42px; /* 居中并设置底部间距。 */
  text-align: center; /* 文本居中。 */
} /* 居中标题区域规则结束。 */

.section-heading h2 { /* 设置区块二级标题。 */
  font-size: 42px; /* 设置桌面端二级标题字号。 */
} /* 区块二级标题规则结束。 */

.section-heading p:last-child { /* 设置标题说明段落。 */
  margin: 18px auto 0; /* 设置说明文字间距。 */
  color: var(--color-muted); /* 设置说明文字颜色。 */
} /* 标题说明段落规则结束。 */

.split-layout { /* 设置双栏内容布局。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr); /* 设置双栏比例。 */
  gap: 56px; /* 设置双栏间距。 */
  align-items: start; /* 顶部对齐双栏内容。 */
} /* 双栏内容布局规则结束。 */

.body-copy p { /* 设置正文段落。 */
  margin: 0 0 18px; /* 设置段落间距。 */
  color: var(--color-primary-soft); /* 设置正文颜色。 */
  font-size: 17px; /* 设置正文字号。 */
} /* 正文段落规则结束。 */

.card-grid { /* 设置卡片网格。 */
  display: grid; /* 使用网格布局。 */
  gap: 18px; /* 设置卡片间距。 */
} /* 卡片网格规则结束。 */

.services-grid { /* 设置服务卡片网格。 */
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* 桌面端显示五列。 */
} /* 服务卡片网格规则结束。 */

.info-card, .license-card { /* 设置信息卡片和资质卡片公共样式。 */
  min-height: 100%; /* 保持卡片高度稳定。 */
  padding: 24px; /* 设置卡片内边距。 */
  background: var(--color-surface); /* 设置卡片背景。 */
  border: 1px solid rgba(217, 226, 236, 0.9); /* 设置卡片边框。 */
  border-radius: var(--radius); /* 设置卡片圆角。 */
  box-shadow: var(--shadow-small); /* 设置卡片阴影。 */
} /* 信息卡片和资质卡片规则结束。 */

.card-index { /* 设置服务卡片序号。 */
  display: inline-flex; /* 使用行内弹性布局。 */
  align-items: center; /* 垂直居中序号。 */
  justify-content: center; /* 水平居中序号。 */
  width: 42px; /* 设置序号宽度。 */
  height: 42px; /* 设置序号高度。 */
  color: var(--color-surface); /* 设置序号文字颜色。 */
  background: var(--color-primary); /* 设置序号背景。 */
  border-radius: 8px; /* 设置序号圆角。 */
  font-weight: 700; /* 设置序号加粗。 */
} /* 服务卡片序号规则结束。 */

.info-card h3, .feature-item h3, .license-card h3 { /* 设置三级标题公共样式。 */
  margin: 18px 0 10px; /* 设置标题外边距。 */
  color: var(--color-primary); /* 设置标题颜色。 */
  font-size: 20px; /* 设置标题字号。 */
  line-height: 1.35; /* 设置标题行高。 */
} /* 三级标题公共规则结束。 */

.info-card p, .feature-item p { /* 设置卡片正文。 */
  margin: 0; /* 移除默认段落外边距。 */
  color: var(--color-muted); /* 设置卡片正文颜色。 */
} /* 卡片正文规则结束。 */

.feature-list { /* 设置优势列表。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 桌面端显示四列。 */
  gap: 18px; /* 设置优势项间距。 */
} /* 优势列表规则结束。 */

.feature-item { /* 设置优势项。 */
  padding: 24px 8px; /* 设置优势项内边距。 */
  border-top: 2px solid var(--color-border); /* 设置顶部边线。 */
} /* 优势项规则结束。 */

.feature-icon { /* 设置优势图标。 */
  display: grid; /* 使用网格居中图标文字。 */
  place-items: center; /* 居中图标文字。 */
  width: 46px; /* 设置图标宽度。 */
  height: 46px; /* 设置图标高度。 */
  color: var(--color-accent); /* 设置图标文字颜色。 */
  background: rgba(179, 58, 50, 0.1); /* 设置图标背景。 */
  border-radius: 8px; /* 设置图标圆角。 */
  font-weight: 700; /* 设置图标加粗。 */
} /* 优势图标规则结束。 */

.license-grid { /* 设置资质卡片网格。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 桌面端显示两列。 */
  gap: 18px; /* 设置资质卡片间距。 */
} /* 资质卡片网格规则结束。 */

.license-card { /* 设置资质卡片。 */
  min-height: 190px; /* 设置资质卡片稳定高度。 */
} /* 资质卡片规则结束。 */

.license-label { /* 设置资质标签。 */
  margin: 0; /* 移除默认外边距。 */
  color: var(--color-accent); /* 设置标签颜色。 */
  font-weight: 700; /* 设置标签加粗。 */
} /* 资质标签规则结束。 */

.license-number { /* 设置资质编号。 */
  margin: 12px 0 0; /* 设置编号外边距。 */
  color: var(--color-muted); /* 设置编号颜色。 */
  font-size: 18px; /* 设置编号字号。 */
} /* 资质编号规则结束。 */

.company-list { /* 设置公司概要列表。 */
  margin: 0; /* 移除默认外边距。 */
  background: var(--color-surface); /* 设置列表背景。 */
  border: 1px solid var(--color-border); /* 设置列表边框。 */
  border-radius: var(--radius); /* 设置列表圆角。 */
  overflow: hidden; /* 裁剪内部边框。 */
  box-shadow: var(--shadow-small); /* 设置列表阴影。 */
} /* 公司概要列表规则结束。 */

.company-row { /* 设置公司概要行。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: 180px minmax(0, 1fr); /* 设置标签和值列宽。 */
  gap: 18px; /* 设置列间距。 */
  padding: 18px 22px; /* 设置行内边距。 */
  border-bottom: 1px solid var(--color-border); /* 设置行分隔线。 */
} /* 公司概要行规则结束。 */

.company-row:last-child { /* 设置最后一行。 */
  border-bottom: 0; /* 移除最后一行分隔线。 */
} /* 最后一行规则结束。 */

.company-row dt { /* 设置概要标签。 */
  color: var(--color-primary); /* 设置标签颜色。 */
  font-weight: 700; /* 设置标签加粗。 */
} /* 概要标签规则结束。 */

.company-row dd { /* 设置概要值。 */
  margin: 0; /* 移除默认外边距。 */
  color: var(--color-primary-soft); /* 设置值颜色。 */
  word-break: break-word; /* 防止长文本溢出。 */
} /* 概要值规则结束。 */

.contact-section { /* 设置联系区块背景。 */
  color: var(--color-surface); /* 设置联系区默认文字颜色。 */
  background: linear-gradient(135deg, var(--color-primary), #173B57 58%, #7E2F2A); /* 设置克制深色背景。 */
} /* 联系区块背景规则结束。 */

.contact-panel { /* 设置联系面板布局。 */
  display: grid; /* 使用网格布局。 */
  grid-template-columns: minmax(0, 1fr) auto; /* 设置文字和按钮两列。 */
  gap: 32px; /* 设置联系面板间距。 */
  align-items: center; /* 垂直居中面板内容。 */
} /* 联系面板布局规则结束。 */

.contact-copy h2 { /* 设置联系标题。 */
  color: var(--color-surface); /* 设置联系标题为白色。 */
  font-size: 42px; /* 设置桌面端联系标题字号。 */
} /* 联系标题规则结束。 */

.contact-copy p { /* 设置联系正文。 */
  max-width: 760px; /* 限制联系正文宽度。 */
  color: rgba(255, 255, 255, 0.84); /* 设置联系正文颜色。 */
} /* 联系正文规则结束。 */

.contact-copy .eyebrow { /* 设置联系眉题。 */
  color: #F7C9C5; /* 设置联系眉题浅红色。 */
} /* 联系眉题规则结束。 */

.disclaimer { /* 设置免责声明。 */
  margin-top: 18px; /* 设置免责声明上方间距。 */
  font-size: 14px; /* 设置免责声明字号。 */
} /* 免责声明规则结束。 */

.contact-actions { /* 设置联系按钮组。 */
  display: grid; /* 使用网格布局。 */
  gap: 12px; /* 设置按钮间距。 */
  min-width: 220px; /* 设置按钮组稳定宽度。 */
} /* 联系按钮组规则结束。 */

.button { /* 设置按钮公共样式。 */
  display: inline-flex; /* 使用行内弹性布局。 */
  align-items: center; /* 垂直居中按钮文字。 */
  justify-content: center; /* 水平居中按钮文字。 */
  min-height: 48px; /* 设置按钮最小高度。 */
  padding: 12px 18px; /* 设置按钮内边距。 */
  border: 1px solid transparent; /* 设置默认透明边框。 */
  border-radius: 8px; /* 设置按钮圆角。 */
  font-weight: 700; /* 设置按钮加粗。 */
  cursor: pointer; /* 显示可点击指针。 */
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease; /* 设置按钮状态过渡。 */
} /* 按钮公共规则结束。 */

.button:hover { /* 设置按钮悬停状态。 */
  transform: translateY(-1px); /* 悬停时轻微上移。 */
  box-shadow: var(--shadow-small); /* 悬停时显示阴影。 */
} /* 按钮悬停规则结束。 */

.button-primary { /* 设置主按钮。 */
  color: var(--color-surface); /* 设置主按钮文字颜色。 */
  background: var(--color-accent); /* 设置主按钮背景。 */
} /* 主按钮规则结束。 */

.button-secondary { /* 设置次按钮。 */
  color: var(--color-primary); /* 设置次按钮文字颜色。 */
  background: var(--color-surface); /* 设置次按钮背景。 */
  border-color: var(--color-border); /* 设置次按钮边框。 */
} /* 次按钮规则结束。 */

.button-light { /* 设置深色背景上的浅按钮。 */
  color: var(--color-primary); /* 设置浅按钮文字颜色。 */
  background: var(--color-surface); /* 设置浅按钮背景。 */
} /* 浅按钮规则结束。 */

.site-footer { /* 设置页脚。 */
  padding: 28px 0; /* 设置页脚上下留白。 */
  color: rgba(255, 255, 255, 0.78); /* 设置页脚文字颜色。 */
  background: #0B1F31; /* 设置页脚深色背景。 */
} /* 页脚规则结束。 */

.footer-inner { /* 设置页脚内部布局。 */
  display: grid; /* 使用网格布局。 */
  gap: 8px; /* 设置页脚行距。 */
} /* 页脚内部布局规则结束。 */

.footer-inner p { /* 设置页脚段落。 */
  margin: 0; /* 移除默认外边距。 */
  font-size: 14px; /* 设置页脚字号。 */
} /* 页脚段落规则结束。 */

.modal-backdrop { /* 设置弹窗遮罩。 */
  position: fixed; /* 固定覆盖视口。 */
  inset: 0; /* 占满整个视口。 */
  z-index: 1800; /* 设置弹窗层级。 */
  display: grid; /* 使用网格居中弹窗。 */
  place-items: center; /* 将弹窗置于中心。 */
  padding: 20px; /* 设置移动端安全留白。 */
  background: rgba(11, 31, 49, 0.62); /* 设置半透明遮罩。 */
} /* 弹窗遮罩规则结束。 */

.wechat-modal { /* 设置微信弹窗主体。 */
  position: relative; /* 为关闭按钮提供定位上下文。 */
  width: min(100%, 440px); /* 设置弹窗响应式宽度。 */
  padding: 30px; /* 设置弹窗内边距。 */
  color: var(--color-text); /* 设置弹窗文字颜色。 */
  background: var(--color-surface); /* 设置弹窗背景。 */
  border-radius: var(--radius); /* 设置弹窗圆角。 */
  box-shadow: var(--shadow-soft); /* 设置弹窗阴影。 */
} /* 微信弹窗主体规则结束。 */

.modal-close { /* 设置弹窗关闭按钮。 */
  position: absolute; /* 使用绝对定位。 */
  top: 14px; /* 设置顶部距离。 */
  right: 14px; /* 设置右侧距离。 */
  width: 38px; /* 设置按钮宽度。 */
  height: 38px; /* 设置按钮高度。 */
  color: var(--color-primary); /* 设置关闭按钮颜色。 */
  background: var(--color-bg); /* 设置关闭按钮背景。 */
  border: 1px solid var(--color-border); /* 设置关闭按钮边框。 */
  border-radius: 8px; /* 设置关闭按钮圆角。 */
  cursor: pointer; /* 显示可点击指针。 */
} /* 弹窗关闭按钮规则结束。 */

.wechat-modal h2 { /* 设置弹窗标题。 */
  margin: 0 36px 10px 0; /* 设置标题外边距。 */
  color: var(--color-primary); /* 设置标题颜色。 */
  line-height: 1.35; /* 设置标题行高。 */
} /* 弹窗标题规则结束。 */

.wechat-modal p { /* 设置弹窗段落。 */
  color: var(--color-muted); /* 设置弹窗段落颜色。 */
} /* 弹窗段落规则结束。 */

.wechat-qr { /* 设置微信二维码图片。 */
  width: min(100%, 320px); /* 设置竖版二维码图片响应式宽度。 */
  height: auto; /* 按图片原始比例显示高度。 */
  max-height: 58vh; /* 限制弹窗内图片最大高度。 */
  margin: 20px auto; /* 设置二维码居中和间距。 */
  object-fit: contain; /* 保持二维码完整显示。 */
  border: 1px solid var(--color-border); /* 设置二维码边框。 */
  border-radius: 8px; /* 设置二维码圆角。 */
} /* 微信二维码图片规则结束。 */

.wechat-id { /* 设置微信号展示行。 */
  margin: 0 0 18px; /* 设置微信号外边距。 */
  text-align: center; /* 微信号居中显示。 */
} /* 微信号展示行规则结束。 */

.copy-status { /* 设置复制状态提示。 */
  min-height: 24px; /* 保持提示区域高度稳定。 */
  margin: 12px 0 0; /* 设置提示外边距。 */
  text-align: center; /* 提示文字居中。 */
} /* 复制状态提示规则结束。 */

.reveal { /* 设置进入动画初始状态。 */
  opacity: 1; /* 默认直接显示内容。 */
  transform: none; /* 默认不隐藏或位移内容。 */
  transition: opacity 520ms ease, transform 520ms ease; /* 设置进入动画过渡。 */
} /* 进入动画初始规则结束。 */

.reveal.is-visible { /* 设置进入动画完成状态。 */
  opacity: 1; /* 显示元素。 */
  transform: translateY(0); /* 回到原始位置。 */
} /* 进入动画完成规则结束。 */

body.modal-open { /* 设置弹窗打开时的页面状态。 */
  overflow: hidden; /* 防止背景滚动。 */
} /* 弹窗打开页面规则结束。 */

@media (max-width: 1080px) { /* 设置中等屏幕断点。 */
  .services-grid { /* 调整服务网格。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 中等屏幕显示两列。 */
  } /* 服务网格中屏规则结束。 */
  .feature-list { /* 调整优势列表。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 中等屏幕显示两列。 */
  } /* 优势列表中屏规则结束。 */
} /* 中等屏幕断点结束。 */

@media (max-width: 860px) { /* 设置平板和手机断点。 */
  .header-inner { /* 调整导航内部布局。 */
    min-height: 66px; /* 降低导航高度。 */
  } /* 导航内部布局小屏规则结束。 */
  .menu-toggle { /* 显示手机菜单按钮。 */
    display: grid; /* 小屏显示菜单按钮。 */
  } /* 手机菜单按钮显示规则结束。 */
  .site-nav { /* 设置手机导航面板。 */
    position: fixed; /* 固定导航面板。 */
    top: 66px; /* 放置在导航下方。 */
    left: 16px; /* 设置左侧间距。 */
    right: 16px; /* 设置右侧间距。 */
    display: grid; /* 使用网格排列链接。 */
    gap: 4px; /* 设置链接间距。 */
    padding: 12px; /* 设置面板内边距。 */
    background: var(--color-surface); /* 设置面板背景。 */
    border: 1px solid var(--color-border); /* 设置面板边框。 */
    border-radius: var(--radius); /* 设置面板圆角。 */
    box-shadow: var(--shadow-soft); /* 设置面板阴影。 */
    transform: translateY(-12px); /* 默认略微上移。 */
    opacity: 0; /* 默认透明。 */
    pointer-events: none; /* 默认不可点击。 */
    transition: opacity 160ms ease, transform 160ms ease; /* 设置面板动画。 */
  } /* 手机导航面板规则结束。 */
  .site-nav.is-open { /* 设置手机导航打开状态。 */
    transform: translateY(0); /* 打开时恢复位置。 */
    opacity: 1; /* 打开时显示。 */
    pointer-events: auto; /* 打开时可点击。 */
  } /* 手机导航打开状态结束。 */
  .site-nav a { /* 调整手机导航链接。 */
    padding: 12px 14px; /* 增大手机点击区域。 */
  } /* 手机导航链接规则结束。 */
  .language-switch { /* 调整语言切换控件。 */
    margin-left: auto; /* 将语言切换推到右侧。 */
  } /* 语言切换控件小屏规则结束。 */
  .language-button { /* 调整语言按钮。 */
    min-width: 62px; /* 缩小小屏按钮宽度。 */
    padding: 7px 8px; /* 缩小小屏按钮内边距。 */
  } /* 语言按钮小屏规则结束。 */
  .hero { /* 调整首屏区块。 */
    min-height: auto; /* 小屏不强制整屏高度。 */
    padding-top: 56px; /* 缩小首屏顶部留白。 */
  } /* 首屏小屏规则结束。 */
  .hero-grid, .split-layout, .contact-panel { /* 调整多列布局。 */
    grid-template-columns: 1fr; /* 小屏改为单列。 */
    gap: 34px; /* 调整小屏间距。 */
  } /* 多列布局小屏规则结束。 */
  .hero-copy h1 { /* 调整首屏标题。 */
    font-size: 48px; /* 设置平板端标题大小。 */
  } /* 首屏标题小屏规则结束。 */
  .hero-visual { /* 调整首屏视觉。 */
    max-width: 520px; /* 限制小屏插画最大宽度。 */
    margin: 0 auto; /* 插画居中。 */
  } /* 首屏视觉小屏规则结束。 */
  .section { /* 调整区块留白。 */
    padding: 70px 0; /* 缩小小屏区块留白。 */
  } /* 区块小屏规则结束。 */
  .contact-actions { /* 调整联系按钮。 */
    width: 100%; /* 联系按钮组占满宽度。 */
  } /* 联系按钮小屏规则结束。 */
} /* 平板和手机断点结束。 */

@media (max-width: 640px) { /* 设置手机断点。 */
  .header-inner { /* 调整手机导航宽度。 */
    width: min(100% - 24px, var(--content-width)); /* 缩小导航左右边距。 */
  } /* 手机导航宽度规则结束。 */
  .brand-name { /* 调整品牌名称。 */
    max-width: 138px; /* 防止品牌名称挤压控件。 */
  } /* 品牌名称手机规则结束。 */
  .section-inner { /* 调整手机内容宽度。 */
    width: min(100% - 24px, var(--content-width)); /* 缩小内容左右边距。 */
  } /* 手机内容宽度规则结束。 */
  .services-grid, .feature-list, .license-grid { /* 调整卡片网格。 */
    grid-template-columns: 1fr; /* 手机端显示单列。 */
  } /* 卡片网格手机规则结束。 */
  .company-row { /* 调整公司概要行。 */
    grid-template-columns: 1fr; /* 手机端标签和值上下排列。 */
    gap: 6px; /* 缩小标签和值间距。 */
    padding: 16px; /* 缩小手机内边距。 */
  } /* 公司概要行手机规则结束。 */
  .hero-actions { /* 调整首屏按钮组。 */
    display: grid; /* 手机端按钮堆叠。 */
    grid-template-columns: 1fr; /* 按钮占满一列。 */
  } /* 首屏按钮组手机规则结束。 */
  .button { /* 调整手机按钮。 */
    width: 100%; /* 手机按钮占满容器。 */
  } /* 手机按钮规则结束。 */
  .wechat-modal { /* 调整手机弹窗。 */
    padding: 24px 18px; /* 缩小弹窗内边距。 */
  } /* 手机弹窗规则结束。 */
  .hero-copy h1 { /* 调整手机首屏标题。 */
    font-size: 36px; /* 设置手机端标题大小。 */
  } /* 手机首屏标题规则结束。 */
  .section-heading h2, .contact-copy h2 { /* 调整手机二级标题。 */
    font-size: 30px; /* 设置手机二级标题大小。 */
  } /* 手机二级标题规则结束。 */
} /* 手机断点结束。 */

@media (prefers-reduced-motion: reduce) { /* 响应减少动态效果偏好。 */
  html { /* 调整根元素滚动行为。 */
    scroll-behavior: auto; /* 关闭平滑滚动。 */
  } /* 根元素减少动画规则结束。 */
  *, *::before, *::after { /* 调整所有动画元素。 */
    transition-duration: 0.01ms !important; /* 近似关闭过渡。 */
    animation-duration: 0.01ms !important; /* 近似关闭动画。 */
    animation-iteration-count: 1 !important; /* 限制动画循环。 */
  } /* 减少动画全局规则结束。 */
  .reveal { /* 调整进入动画元素。 */
    opacity: 1; /* 直接显示元素。 */
    transform: none; /* 取消位移动画。 */
  } /* 进入动画减少动态规则结束。 */
} /* 减少动态效果媒体查询结束。 */