/* ==========================================================================
   湖北恒途信息技术有限公司 - 官方网站样式表
   视觉风格：极客深色未来科技风 (Cyber Dark Tech)
   ========================================================================== */

:root {
  --bg-primary: #070a12;
  --bg-card: rgba(16, 23, 40, 0.75);
  --bg-card-hover: rgba(22, 33, 58, 0.9);
  --bg-sunken: rgba(7, 10, 18, 0.65); /* 唯一例外：联络中心右栏，用于在卡片内再压深一层 */
  --border-color: rgba(0, 240, 255, 0.15);
  --border-glow: rgba(0, 240, 255, 0.5);
  --text-primary: #f0f6fc;
  --text-secondary: #94a3b8;
  --text-muted: #8b9bb0; /* 对 #070a12 约 6.99:1、对卡片底色 rgb(14,20,35) 约 6.49:1，满足 WCAG AA */
  --cyan-primary: #00f0ff;
  --cyan-glow: rgba(0, 240, 255, 0.35);
  --purple-accent: #8b5cf6;
  --gradient-tech: linear-gradient(135deg, #00f0ff 0%, #3b82f6 50%, #8b5cf6 100%);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --header-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.3s var(--ease-out);

  /* 圆角阶梯：收敛为 3 档 + 胶囊 */
  --radius-sm: 6px;   /* 小件：按钮、标签、徽标、输入类 */
  --radius-md: 12px;  /* 卡片、面板、图标容器 */
  --radius-lg: 16px;  /* 大容器 */
  --radius-pill: 999px;

  /* 字号阶梯：收敛为 7 档（首屏数字/单位等展示型字号单独处理） */
  --fs-2xs: 0.75rem;  /* 12px 眉标、微标签 */
  --fs-xs: 0.85rem;   /* 13.6px 辅助小字 */
  --fs-sm: 0.95rem;   /* 15.2px 正文小号 */
  --fs-base: 1rem;    /* 16px 正文 */
  --fs-md: 1.2rem;    /* 19.2px 卡片标题 */
  --fs-lg: 1.45rem;   /* 23.2px 区块导语 */
  --fs-xl: 2.2rem;    /* 35.2px 展示数字 */

  /* 字距阶梯：收敛为 2 档 */
  --ls-wide: 1.5px;   /* 全大写眉标 */
  --ls-tight: 0.5px;  /* 品牌名 / 域名 / 等宽串 */
}

/* 重置与基准样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(0, 240, 255, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* 键盘焦点可见性（全站统一）
   注：outline 会自动跟随元素自身的 border-radius，故此处不得再设圆角，
   否则 .btn / .mobile-nav-link 的 6px 圆角会在聚焦瞬间被改成别的值。 */
:focus-visible {
  outline: 2px solid var(--cyan-primary);
  outline-offset: 3px;
}

/* 容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 按钮规范 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  gap: 8px;
}

.btn-primary {
  background: var(--cyan-primary);
  color: #070a12;
  box-shadow: 0 0 20px var(--cyan-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 纯装饰性 hover 仅在支持 hover 的精确指针设备上生效，避免触屏"粘住" */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: #38f8ff;
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.6);
  }

  .btn-outline:hover {
    border-color: var(--cyan-primary);
    color: var(--cyan-primary);
    background: rgba(0, 240, 255, 0.05);
  }
}

/* 头部导航 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(7, 10, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.header.is-scrolled {
  background: rgba(7, 10, 18, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-primary);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--cyan-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 0 12px var(--cyan-glow);
}

.logo-icon svg {
  width: 22px;
  height: 22px;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.brand-cn {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  /* 页脚用的是全称（12 字）：320px 视口下只差 6px 就要折行，
     折行后按行均衡，避免末行只剩一个「司」字。 */
  text-wrap: balance;
}

.brand-en {
  font-size: var(--fs-2xs);
  color: var(--cyan-primary);
  letter-spacing: var(--ls-wide);
}

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

.nav-item {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  position: relative;
  padding: 8px 0;
  transition: var(--transition);
}

/* 状态类，必须留在 hover 媒体查询之外 */
.nav-item.active {
  color: var(--cyan-primary);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cyan-primary);
  box-shadow: 0 0 8px var(--cyan-primary);
}

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover {
    color: var(--cyan-primary);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: space-around;
}

.menu-toggle .bar {
  width: 100%;
  height: 2px;
  background: var(--cyan-primary);
  transition: var(--transition);
  border-radius: 2px;
}

.menu-toggle.open .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* 移动端抽屉 */
.mobile-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));   /* 回退：不支持 dvh 的浏览器 */
  height: calc(100dvh - var(--header-height));
  background: rgba(7, 10, 18, 0.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  padding: 30px 20px calc(30px + env(safe-area-inset-bottom));
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  /* 关闭态必须真正不可聚焦 / 不被读屏朗读 */
  visibility: hidden;
  transition: transform 0.35s var(--ease-out), visibility 0s 0.35s;
  z-index: 999;
}

.mobile-drawer.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s var(--ease-out), visibility 0s 0s;
}

/* 视口放大到桌面端后，汉堡按钮被隐藏，抽屉必须一并隐藏，避免全屏覆盖且无法关闭。
   注意：必须与下面的 max-width:768px 严格互补——负向查询保证 768~769 之间（浏览器缩放
   会产生 768.5px 这类分数型视口）不留 1px 空档；否则该区间内汉堡按钮已隐藏、抽屉却不隐藏，
   会全屏覆盖且页面上没有任何可见的关闭控件。 */
@media not all and (max-width: 768px) {
  .mobile-drawer {
    display: none;
  }
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-link {
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav-link:hover {
    background: rgba(0, 240, 255, 0.08);
    border-left-color: var(--cyan-primary);
    color: var(--cyan-primary);
  }
}

.mobile-contact {
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

.mobile-contact p {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.mobile-addr {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* 特异性需高于 .mobile-contact p (0,1,1)，否则会被其 color 压制 */
.mobile-contact .mobile-addr-strong {
  color: var(--text-primary);
  margin-top: 6px;
}

/* Hero 区域 */
.hero {
  position: relative;
  min-height: 100vh;   /* 回退：不支持 svh 的浏览器 */
  min-height: 100svh;
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.hero-glow-1 {
  width: 450px;
  height: 450px;
  background: var(--cyan-primary);
  top: 20%;
  left: -100px;
}

.hero-glow-2 {
  width: 500px;
  height: 500px;
  background: var(--purple-accent);
  bottom: 10%;
  right: -100px;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  /* 去脆弱化：原 max-width:900px 实际只有 860px 净宽（.container 左右各 20px 内边距），
     是按「主标题最长一行 13 字 ≈ 790.4px」标定的，余量仅 8%，
     文案再多 1~2 个字就会折行。这里放宽到与 .container 内容区同宽（净宽 1120px），
     让「字号」而不是「容器宽度」成为唯一的折行约束（见 .hero-title 的 cqi 方案）。
     其余子元素各自持有独立宽度上限（.hero-desc 820 / .hero-metrics 860），视觉不变。 */
  max-width: 1160px;
  /* 把 .hero-content 声明为查询容器，让 .hero-title 的字号可以用 cqi 跟随
     「标题真实可用宽度」，而不是跟随视口（vw 在容器封顶后仍继续增长，会形成断点悬崖）。 */
  container-type: inline-size;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--border-color);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 24px;
  /* 基础规则即设上限：481~560px 区间单行眉标余量极小，
     若字体回退到更宽字形，body 的 overflow-x:hidden 会静默裁掉 */
  max-width: 100%;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto; /* 眉标折行时保持正圆，不被压扁 */
  background: var(--cyan-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan-primary);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.badge-text {
  font-size: var(--fs-2xs);
  color: var(--cyan-primary);
  letter-spacing: var(--ls-wide);
  font-weight: 600;
  min-width: 0; /* 允许 flex 子项收缩折行，否则只会溢出而不会换行 */
  /* 被迫折行时按词均衡分行，避免末行只剩一个词 */
  text-wrap: balance;
}

.hero-title {
  /* 回退：不支持容器查询单位的浏览器 */
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  /* 5.4cqi = .hero-content 净宽的 5.4%（净宽 1120px 时 ≈ 60.5px，与原来的 3.8rem 封顶等效）。
     因为字号恒为净宽的固定比例，「每行可容字数」= 100 / 5.4 ≈ 18.5 个全角字，
     在任何视口下都恒定：不会再出现「某个宽度刚好差 2 个字就折行」的悬崖。
     文案超过 18 字时不再靠改短文案，而是折成两行，由下面的 text-wrap:balance 均衡。 */
  font-size: clamp(2.1rem, 5.4cqi, 3.8rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
  /* 实测 Chromium 会尊重 <br>：两个分段各自均衡分行，
     避免末行只剩 1~2 个字（320/375px 下从 9+3 变为 6+6）。 */
  text-wrap: balance;
}

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

.hero-desc {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  color: var(--text-secondary);
  line-height: 1.85;
  margin: 0 auto 36px;
  max-width: 820px;
  text-wrap: balance;
  word-break: break-word;
}

.hero-desc strong {
  color: var(--cyan-primary);
}

.hero-btns {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* 关键数据看板 */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 26px 20px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  /* .hero-content 放宽到净宽 1120px 后，看板需要自己封顶才能保持原有版式
     （860px 正是它此前的实际宽度）。这是版式宽度，与文案字数无关。 */
  max-width: 860px;
  margin-inline: auto;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 把每一格声明为查询容器：标签字号可用 cqi 跟随「该格真实列宽」，
     移动端 2 列变窄时自动缩小，不再依赖「10 个字刚好 136px」这种标定。 */
  container-type: inline-size;
}

/* 数字与单位必须在同一基线上，避免被拆成两行 */
.metric-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.metric-num {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--cyan-primary);
  line-height: 1.1;
}

.metric-unit {
  font-size: 1.1rem; /* 展示型单位字号，桌面与数字保持 2.2:1.1 的比例；≤768px 随数字一同缩小 */
  color: var(--cyan-primary);
  font-weight: 700;
  line-height: 1.1;
}

.metric-label {
  /* 回退：不支持容器查询单位的浏览器 */
  font-size: var(--fs-xs);
  /* 8.5cqi = 该格列宽的 8.5% ⇒ 一行恒可容 100 / 8.5 ≈ 11.7 个全角字。
     最长的合规限定语「本地响应（协议约定）」为 10 字：实测占列宽 375px 下 85%、
     320px 下 95%（字号触到 0.72rem 下限），四个宽度全部单行、四格等高。
     列宽变窄时字号自动跟随，不再出现「375px 下只剩 5% 余量、
     320px 下只有一格折行」的高度参差。 */
  font-size: clamp(0.72rem, 8.5cqi, var(--fs-xs));
  color: var(--text-muted);
  margin-top: 6px;
  /* 万一（字号下限 0.72rem 仍装不下时）折行，两行字数均衡而不是甩出孤字 */
  text-wrap: balance;
}

/* 数据看板合规脚注 */
.metrics-note {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  overflow-wrap: break-word; /* 窄屏兜底，避免任何长串撑出横向滚动 */
  /* 窄屏折行时两行字数均衡（否则末行只有 17/41 字，居中后左右明显不对称） */
  text-wrap: balance;
}

/* 通用区块排版与精准锚点跳转缓冲 */
section[id],
div[id],
.section {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

.section {
  padding: 100px 0;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.section-tag {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--cyan-primary);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  /* 700px 容器内标题最长 14 字（≈560px，余量 20%），本就宽松；
     文案变长折成两行时，居中版式下按行均衡，避免「14 字 + 2 字」的参差。 */
  text-wrap: balance;
}

.section-subtitle {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  text-wrap: balance;
}

/* 关于我们区域：左栏＝公司介绍（导语 + 两段正文 + 资质标签），右栏＝办公区位卡片
   沿革：原左栏的 .about-card-cyber 证书卡与其后的 .cert-list 合规清单已按用户决定移除
   （信用代码属工商法定信息，政企客户按公司名即可核验，官网列出无额外可验证性，
   且会稀释真正卖点），「交付准则」改由第 4 个资质标签承载。 */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  /* 两栏不等高时让它们共用同一条顶部基线：
     center 会把较矮的一栏在列内上下各留一截空白而显得「飘」；
     start 则把高度差全部落在较短一栏的下方，读起来是正常的两栏版式。 */
  align-items: start;
}

.about-lead {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  margin-bottom: 20px;
  font-weight: 600;
  line-height: 1.4;
  /* 480px 及以下会折成两行：均衡分行，避免末行只剩两三个字 */
  text-wrap: balance;
}

.text-p {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.8;
}

.license-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 30px;
}

.license-pill {
  font-size: var(--fs-xs);
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* 核心业务网格 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 32px 26px;
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-tech);
  opacity: 0;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-glow);
    background: var(--bg-card-hover);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.12);
  }

  .service-card:hover::before {
    opacity: 1;
  }
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(0, 240, 255, 0.1);
  color: var(--cyan-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.service-icon svg {
  width: 26px;
  height: 26px;
}

.service-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
  /* 3 列时卡片内宽仅 315px：标题 13 字（≈250px）够用，
     但文案变长折行时按行均衡，6 张卡片的高度差最小。 */
  text-wrap: balance;
}

.service-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.service-points {
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
}

.service-points li {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  position: relative;
  padding-left: 14px;
}

.service-points li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--cyan-primary);
}

/* 解决方案 */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 34px 28px;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .solution-card:hover {
    border-color: var(--cyan-primary);
    transform: translateY(-4px);
  }
}

.solution-tag {
  display: inline-block;
  font-size: var(--fs-2xs);
  color: var(--cyan-primary);
  background: rgba(0, 240, 255, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-weight: 600;
}

.solution-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-primary);
  text-wrap: balance;
}

.solution-card p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.solution-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--cyan-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
}

/* 技术优势 */
.strengths-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.strength-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 30px 22px;
  border-radius: var(--radius-md);
  position: relative;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .strength-item:hover {
    transform: translateY(-4px);
    border-color: var(--cyan-primary);
  }
}

.strength-num {
  font-size: var(--fs-xl);
  font-weight: 900;
  /* 2.2rem/900 属大字号文本，AA 门槛 3:1。
     0.25 时对卡片底色仅约 1.9:1；提到 0.45 后约 3.5:1，
     仍是卡片内对比度最低的文字，弱化定位不受影响。 */
  color: rgba(0, 240, 255, 0.45);
  line-height: 1;
  margin-bottom: 16px;
  font-family: var(--font-mono);
}

.strength-item h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-wrap: balance;
}

/* 4 列时卡片内宽只有 226px：13 字的标题（≈250px）必然折成两行，
   而 9 字的「主体规范·信息可查」只有一行 —— 4 张卡片的正文起始线会参差。
   统一预留两行高度（line-height 1.6 × 2 = 3.2em），四格对齐。
   仅在这个「四列并排」的区间生效：1 列/2 列时标题本就单行，预留只会白占高度。
   与 .strengths-grid 的列数切换点（max-width:1024px → 2 列）严格互补。 */
@media not all and (max-width: 1024px) {
  .strength-item h4 {
    min-height: 3.2em;
    min-height: 2lh; /* 现代浏览器：直接按两行行高预留，跟随 line-height 变化 */
  }
}

.strength-item p {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   关于区右栏：办公区位卡（原「联系我们」通栏 .location-banner 改造而来）
   取消原来的 1.35fr:1fr 内部栅格与 .lb-left/.lb-right 内层容器，改为单栏纵向卡片。
   ========================================================================== */

.about-location {
  position: relative;
  /* 单栏纵向流：6 组内容（标题 / 地址框 / 3 条区位 / 2 个信息盒）用 gap 统一节奏 */
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  /* 裁掉顶线两端超出圆角的部分（与改造前的通栏卡一致） */
  overflow: hidden;
}

.about-location::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-tech);
}

/* 卡内节奏统一由 gap 承担，清掉这些子块独立使用时的外边距，
   否则 gap + margin 会叠加成不均匀的间距 */
.about-location .lb-title {
  margin-bottom: 0;
}

.about-location .contact-addr-box {
  margin: 0;
}

/* 「区位」与「商务信息」是两组不同性质的内容：
   在第二个信息盒前加一条分隔线，把 6 组内容分成 3 + 2 两个视觉段落 */
.about-location .lb-points + .lb-box {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 18px;
}

.lb-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-wrap: balance;
}

.contact-addr-box {
  background: rgba(0, 240, 255, 0.04);
  border-left: 3px solid var(--cyan-primary);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 16px 0 20px;
}

.addr-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--cyan-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 4px;
}

.addr-value {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  /* 38 字的完整驻所地址在 1.35fr 左栏（净宽 521px）恰好要 2 行，
     均衡分行后两行等长；窄屏同样。 */
  text-wrap: balance;
  overflow-wrap: break-word;
}

.lb-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.lb-points span {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* 文本是匿名 flex 项：折行时靠 text-wrap 继承让两行均衡 */
  text-wrap: balance;
}

.point-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--cyan-primary);
}

.lb-box {
  display: flex;
  flex-direction: column;
}

.lb-sub {
  font-size: var(--fs-2xs);
  color: var(--cyan-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 4px;
  font-weight: 600;
}

.lb-box strong {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 600;
}


.lb-desc-small {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  /* ≤375px 时右栏净宽只有 231px，21 字说明会折成两行 —— 均衡分行 */
  text-wrap: balance;
}

/* 页脚 (精简现代单页排版) */
.footer {
  background: #04060b;
  border-top: 1px solid var(--border-color);
  padding: 50px 0 32px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer-brand-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 24px;
}

.footer-tagline {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  /* 去脆弱化：删除原 max-width:620px —— 那是按「43 字 ≈ 584.8px」标定的硬编码，
     文案一改长就折行。现在宽度完全交给内容与容器：
       · 放得下时盒子 = 文本自然宽度（贴右边界）；
       · 放不下时先由 flex-wrap 换到独立一行（见下面的 margin-left:auto），
         再由 text-wrap:balance 均分成两行。
     任何字数都不会溢出，也不会出现孤字；折行最多 3 行，远低于 Chromium 的 6 行平衡上限。 */
  max-width: 100%;
  /* 关键修复：flex 换行后标语独占一行，justify-content:space-between 在单元素行上
     会退回 flex-start（这就是 769~884px 区间「不靠右」的原因）。
     margin-left:auto 吃掉整行剩余空间，把它稳稳推到右边界，与上方 logo 形成对角呼应。 */
  margin-left: auto;
  /* 独占一行或折成两行时都齐右边界，读起来是刻意的右对齐版式 */
  text-align: right;
  text-wrap: balance;
}

.footer-quick-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-quick-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .footer-quick-nav a:hover {
    color: var(--cyan-primary);
  }
}

.footer-quick-nav .nav-sep {
  color: rgba(255, 255, 255, 0.15);
  font-size: var(--fs-2xs);
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  /* 版权行在 320px 下已占 96% 宽度，变长即折行 —— 折行时均衡分行 */
  text-wrap: balance;
}

.beian-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.beian-group a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}

/* 公安联网备案：图标 + 备案号，图标按 36×40 原始比例缩半显示（高清屏不糊） */
.beian-police {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.beian-police img {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .beian-group a:hover {
    color: var(--cyan-primary);
  }
}

/* ==========================================================================
   韧性加固：网格/弹性项的最小宽度
   网格项与弹性项的 min-width 默认是 auto（= 最小内容宽度）。只要内部出现
   一段不可断行的长串（统一社会信用代码、域名、URL、长编号），整列就会被撑到
   比容器还宽，而 body 的 overflow-x:hidden 会把这部分静默裁掉——内容既看不见
   也滚不到。统一归零后，兜底行为从「撑破页面」变成「文本换行」。
   本规则对当前文案是零影响（现有内容的最小宽度均小于列宽），纯粹是防回归。
   ========================================================================== */
.about-grid > *,
.service-grid > *,
.solution-cards > *,
.strengths-grid > *,
.about-location > * {
  min-width: 0;
}

/* ==========================================================================
   响应式断点适配 (Responsive Breakpoints)
   ========================================================================== */

/* 平板端 (768px ~ 1024px) */
@media (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .strengths-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 与业务网格、优势网格保持一致，避免 769~1024px 出现三列过窄 */
  .solution-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 关于区塌成单列的断点：1024 → 900。
   901~1024px 保持左右两栏后，区位卡落在 373~429px 的窄栏里，卡内各条目仍为
   单行、最长的 .lb-points 最多两行，不再出现「卡全宽 728~984px、短条目只占左侧
   三分之一、右侧大片空白」的观感。900 及以下才单列，与 ≤768 的移动端布局衔接。 */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* 移动端 (<= 768px) */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }

  /* 首屏收紧信息密度，确保 CTA 落在首屏可视区内 */
  .hero {
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 56px;
  }
  .hero-title {
    font-size: 2.1rem;
  }
  .hero-desc {
    font-size: var(--fs-sm);
    line-height: 1.7;
  }
  .hero-btns {
    margin-bottom: 32px;
  }
  .hero-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px 16px;
  }
  .metric-num {
    font-size: 1.8rem;
  }
  /* 单位随数字一同缩小，避免小屏上单位相对数字过大 */
  .metric-unit {
    font-size: var(--fs-sm);
  }

  .section {
    padding: 64px 0;
  }

  .service-grid, .solution-cards, .strengths-grid {
    grid-template-columns: 1fr;
  }

  .about-location {
    padding: 24px 20px;
  }

  .footer-brand-wrap {
    flex-direction: column;
    text-align: center;
  }
  /* .logo 是 flex 容器，text-align 无效，需显式居中 */
  .footer-brand-wrap .logo {
    justify-content: center;
  }
  /* 列布局下必须还原桌面端的右对齐方案：
     auto 外边距在交叉轴上会把标语推到右边，text-align:right 也会覆盖父级居中 */
  .footer-tagline {
    margin-left: 0;
    text-align: center;
    max-width: 100%;
  }
  .footer-quick-nav {
    gap: 10px;
  }
  /* 触屏点击目标 >= 44px（WCAG 2.5.8） */
  .footer-quick-nav a {
    font-size: var(--fs-xs);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }
  .beian-group a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }
  .footer-legal {
    flex-direction: column;
    gap: 10px;
  }
  .beian-group {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* 小屏手机 (<= 480px)：宽度约束已提升到基础规则，此处只收紧字号与字距 */
@media (max-width: 480px) {
  .badge-text {
    font-size: 0.62rem;
    letter-spacing: 0.2px;
    line-height: 1.3;
  }
  /* 320~480px 的 2 列看板把内边距与列间距再收紧一点，
     让每格列宽从 115px 提到 122px（375px 下 149px），
     配合 .metric-label 的 cqi 字号，10 字的合规限定语稳定单行。 */
  .hero-metrics {
    padding: 20px 12px;
    gap: 12px;
  }
}

/* ==========================================================================
   无障碍：尊重"减少动态效果"系统偏好 (WCAG 2.2.2 / 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    /* 必须一并归零延迟：否则 .mobile-drawer 的 visibility 仍延迟 0.35s 翻转，
       抽屉移出屏外后仍有一段时间可被键盘聚焦 */
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}