/* ===========================
   电工力量 官方展示页
   设计：移动端优先 / logo 同款蓝橙渐变 / 电路科技纹理 / 橙色 CTA
   调色盘：深蓝 #0d3fa9 、 亮蓝 #1f7af5 、 活力橙 #ff6a00
   =========================== */

/* ---------- 重置与基础 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #f0f5fb;
  background: #072065;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(7, 32, 101, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 11px 20px;
  /* 顶栏总高锁死：这里 72（桌面 80）+ .nav 的 1px 下边框 = 移动 73 / 桌面 81。
     原先由 50/58px 的 logo 撑出来，logo 撤下后改由 min-height 顶住 ——
     这样首屏 .hero 的 160px 留位、以及所有断点的布局零变化 */
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; }
.brand-mark { display: inline-flex; }
/* ⏸ 顶栏 logo 已撤下（2026-09-28，设计不满意，吴歌：「还不如去掉，以后再说」）。
   index.html 里的 `.brand-mark > img` 已删；下面两条规则**有意保留**，将来恢复只需把 HTML 加回去即可生效。
   ⚠ 恢复时务必核算顶栏高度：它是锁死的（移动 73 / 桌面 81 = logo 高 + .nav-inner 垂直 padding×2 + 1px 下边框），
     若 logo 比 .nav-inner 的 min-height 高，就会把顶栏撑高、连带 .hero 的 160px 留位失准 —— 届时同步收窄垂直 padding。
   原设计：圆形裁切（logo.jpg 盾牌外轮廓在圆内不切角）+ 1px 白圈，全局 * { box-sizing: border-box } 故外径不变、图形区内缩 1px */
.brand-mark img { display: block; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #ffffff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 20px; }
/* 站名下的域名单行：小字 + 字距撑开，**文字实际宽度与「电工力量」四字严格等宽**
   （站名字号一改，这里必须跟着重算 letter-spacing。宽度 ≈ 10 字符 × 字宽 + 10 × 字距，
     实测：站名 20px → 82px 配 1.3px；站名 22px → 90px 配 1.5px，残差 ≤ 0.11px
     ⚠ 别用元素 getBoundingClientRect 验证 —— .brand-text 是 flex column，子项默认 stretch，
       量元素宽恒等于站名宽（假通过），必须用 Range 量文字宽） */
.brand-domain {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: #ffb84d;
  margin-top: 2px;
}

.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; background: transparent; border: 0; }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: #ffffff; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-links {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(7, 32, 101, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-direction: column;
  display: none;
  padding: 8px 0;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.nav-links.open { display: flex; }
.nav-links a {
  padding: 13px 20px;
  font-size: 17px;
  color: #c7d6f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a:active { background: rgba(255, 138, 26, 0.14); color: #ffb84d; }

/* ---------- 通用 Section ---------- */
.section { padding: 64px 20px; max-width: 1120px; margin: 0 auto; }
.section-alt {
  background: #0a2b7a;
  max-width: none;
}
.section-dark {
  background: #0a2b7a;
  max-width: none;
}
/* 满宽底色区块：底色仍然通栏，但内容宽与普通 .section 完全一致
   （.section 是 max-width:1120px + 左右各 20px 内边距，内容实宽 1080px） */
@media (min-width: 1160px) {
  .section.section-alt,
  .section.section-dark {
    padding-left: calc((100% - 1080px) / 2);
    padding-right: calc((100% - 1080px) / 2);
  }
}
.section-head { text-align: center; margin-bottom: 40px; }
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff6a00;
  background: rgba(255, 138, 26, 0.12);
  border: 1px solid rgba(255, 138, 26, 0.32);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.section-head h2 { font-size: 26px; margin: 0 0 10px; letter-spacing: 0.5px; color: #ffffff; }
.section-head p { color: #a8c4ec; margin: 0; font-size: 15px; }

/* ---------- Hero（蓝橙渐变 + 电路纹理）---------- */
.hero {
  position: relative;
  padding: 120px 20px 80px;
  /* 首屏独占一屏：min-height 取满视口，下一屏（SERVICES）不会在首屏露头。
     用 lvh（最大视口）而非 svh/vh：移动端地址栏收起时视口变高，lvh 保证两种状态都不漏出下一屏；
     旧浏览器不认 lvh，回落到上一行的 100vh */
  min-height: 100vh;
  min-height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* 底色：右黑蓝光晕 + 蓝色渐变底（左橙光晕已拆到 ::before，见下） */
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 70%, rgba(4, 10, 32, 0.88), transparent 62%),
    linear-gradient(160deg, #072065 0%, #0a2b7a 52%, #0d3fa9 100%);
  z-index: -1;
}
/* 左橙光晕独立成层 → 呼吸：明暗起伏 + 以自身为中心缓缓放大缩小 */
.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 138, 26, 0.48), transparent 56%);
  transform-origin: 20% 20%;
  animation: heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { opacity: 0.78; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.1); }
}
/* 网格层：48px 细网格，纯静态纹理（原先的 7s 通电脉冲已移除：
   alpha 0.045 × opacity 0.62~1 → 实际只在 0.028~0.045 间变化，肉眼不可辨） */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 76%);
}
/* 跑线层：多条亮线段沿网格线游走
   ① 位置吸附到 48px 网格，与网格层共用同一套径向遮罩 —— 否则线条会跑到网格
      已经淡出的区域外面，视觉上不协调
   ② z-index: 0 → 位于网格（.hero-bg, -1）之上、文字（.hero-inner, 2）之下，
      线条从字后穿过，是"字后走电"的层次而不是干扰阅读
   ③ 动画由 script.js 用 Web Animations API 逐轮生成：每跑完一轮就换到另一条
      网格线、重抽轴向/方向/长度/速度 —— 所以线段不会老死在同一条线上
      （纯 CSS 的 infinite 动画做不到这一点，位置会锁死） */
.hero-scan {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 76%);
}
.hero-scan i {
  position: absolute;
  display: block;
  border-radius: 2px;
  will-change: transform;
}

.hero-inner {
  max-width: 720px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ffb84d;
  background: rgba(255, 138, 26, 0.14);
  border: 1px solid rgba(255, 138, 26, 0.34);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.hero-title {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
/* 标题强调字：第一版橙色渐变 */
.hero-title .accent {
  color: #ff8a1a;
}
.hero-sub {
  color: #d2e1f8;
  font-size: 15px;
  line-height: 1.9;
  margin: 0 auto 28px;
  max-width: 720px;
}
.hero-cta {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.btn {
  /* 橙色基准：填充两端与光晕共用 —— 想整体调亮/调暗，只改这三行 */
  --btn-hi: 255, 138, 26;      /* 填充左端（亮端）  #ff8a1a */
  --btn-lo: 255, 106, 0;       /* 填充右端（稍深，制造体积感）  #ff6a00 */
  --btn-glow: 255, 106, 0;     /* 光晕 */
  position: relative;
  z-index: 0;                  /* 建立层叠上下文，把 ::before 填充层锁在按钮内部 */
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease,
              background 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); }

/* 橙色填充层。
   为什么不用 background 直接过渡：背景色 → 渐变(background-image) 无法插值，
   悬停瞬间会硬闪一下。改成盖一层伪元素、只过渡 opacity，就能平滑淡入。 */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;                 /* 盖住自身 1px 边框，圆角与按钮外沿完全重合 */
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--btn-hi)), rgb(var(--btn-lo)));
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: -1;                 /* 负值 → 压在文字之下、按钮自身背景之上 */
  pointer-events: none;
}

/* 主按钮：橙色实心常亮，默认无光晕 */
.btn-primary {
  background: none;
  color: #ffffff;
  /* 零透明度的同形阴影：与 hover 的两段光晕结构一致，才可平滑插值 */
  box-shadow: 0 6px 22px rgba(var(--btn-glow), 0), 0 0 14px rgba(var(--btn-glow), 0);
}
.btn-primary::before { opacity: 1; }

/* 次按钮：玻璃态；悬停时被同一块橙色填满 */
.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 6px 22px rgba(var(--btn-glow), 0), 0 0 14px rgba(var(--btn-glow), 0);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 悬停：主按钮起光晕，次按钮填橙 + 起光晕。
   用 (hover:hover) and (pointer:fine) 隔离，避免触摸设备出现 iOS 的 hover 粘滞 */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-primary:focus-visible {
    box-shadow: 0 6px 22px rgba(var(--btn-glow), 0.50), 0 0 16px rgba(var(--btn-glow), 0.34);
  }
  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(var(--btn-glow), 0.50), 0 0 16px rgba(var(--btn-glow), 0.34);
  }
  .btn-ghost:hover::before,
  .btn-ghost:focus-visible::before { opacity: 1; }
}

.hero-meta {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.hero-meta li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: #c7d6f0;
  display: flex; flex-direction: column; align-items: center;
  min-width: 90px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-meta strong {
  font-size: 16px;
  color: #ffb84d;
  margin-bottom: 2px;
}

/* ---------- 卡片网格 ---------- */
.cards { gap: 16px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* 桌面端：鼠标悬停上浮。
   用 (hover:hover) and (pointer:fine) 隔离，避免触摸设备出现 iOS 的 hover 粘滞 */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 26, 0.55);
    background: rgba(255, 138, 26, 0.12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
  }
  .card:hover .card-ico {
    background: linear-gradient(135deg, rgba(255, 138, 26, 0.38), rgba(255, 138, 26, 0.10));
    transform: scale(1.06);
  }
}
/* 触摸设备 / 按下瞬间：轻微下沉，保留触感 */
.card:active {
  transform: translateY(1px);
  border-color: rgba(255, 138, 26, 0.55);
  background: rgba(255, 138, 26, 0.12);
}
.card-ico {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(31, 122, 245, 0.25), rgba(31, 122, 245, 0.06));
  margin-bottom: 14px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.card h3 { margin: 0 0 6px; font-size: 17px; color: #ffffff; }
.card p { margin: 0; color: #c7d6f0; font-size: 14px; }

/* ---------- 流程步骤 ---------- */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.step {
  position: relative;
  padding: 24px 20px 24px 76px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.step-num {
  position: absolute;
  left: 18px; top: 22px;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff8a1a, #ff6a00);
  border: 1px solid rgba(255, 138, 26, 0.40);
  transition: transform 0.2s ease;
}
.step h3 { margin: 0 0 6px; font-size: 17px; color: #ffffff; }
.step p { margin: 0; color: #c7d6f0; font-size: 14px; }

/* ---------- 两列布局 ---------- */
.two { gap: 14px; }
.feature, .block {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.feature h3, .block h3 {
  margin: 0 0 8px;
  color: #ffa63d;
  font-size: 16px;
}
.feature p, .block p { margin: 0; color: #d2e1f8; font-size: 14px; }
.block ul { margin: 0; padding-left: 18px; color: #d2e1f8; font-size: 14px; }
.block ul li { margin-bottom: 4px; }
.section-dark .feature,
.section-dark .block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
/* 桌面端悬停：与 SERVICES 卡片（.card:hover）同一套上浮效果。
   FLOW 的 .step 徽标对应 .card-ico 的缩放反馈。 */
@media (hover: hover) and (pointer: fine) {
  .step:hover,
  .feature:hover,
  .block:hover,
  .section-dark .feature:hover,
  .section-dark .block:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 26, 0.55);
    background: rgba(255, 138, 26, 0.12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
  }
  .step:hover .step-num { transform: scale(1.06); }
}
/* 触摸设备 / 按下瞬间：轻微下沉，与 .card:active 保持一致 */
.step:active,
.feature:active,
.block:active {
  transform: translateY(1px);
  border-color: rgba(255, 138, 26, 0.55);
  background: rgba(255, 138, 26, 0.12);
}

/* ---------- 联系 ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.contact-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-qr {
  display: flex; justify-content: center;
  margin-bottom: 16px;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  width: fit-content;
  margin-left: auto; margin-right: auto;
}
.contact-card h3 { margin: 0 0 4px; color: #ffffff; }
.contact-card p { margin: 0; color: #c7d6f0; font-size: 14px; }

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 14px;
}
.contact-row:last-child { border-bottom: 0; }
.contact-row .label { color: #a8c4ec; }
.contact-row a, .contact-row span:last-child { color: #ffb84d; }

/* 桌面端悬停：与 SERVICES 卡片（.card:hover）同一套上浮效果，三栏一致。
   用 (hover:hover) and (pointer:fine) 隔离，避免触摸设备出现 iOS 的 hover 粘滞 */
@media (hover: hover) and (pointer: fine) {
  .contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 26, 0.55);
    background: rgba(255, 138, 26, 0.12);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.30);
  }
}
/* 触摸设备 / 按下瞬间：轻微下沉，与 .card:active 保持一致 */
.contact-card:active {
  transform: translateY(1px);
  border-color: rgba(255, 138, 26, 0.55);
  background: rgba(255, 138, 26, 0.12);
}

/* ---------- 页脚 ---------- */
.footer {
  background: #051b4f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 20px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.footer-brand {
  display: flex; align-items: center; gap: 8px;
  color: #ffffff;
  font-size: 14px;
}
.footer-meta, .footer-icp {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}
.footer-meta a { color: #ffb84d; }
.footer-icp a { color: #ffffff; transition: color 0.2s ease; }
.footer-icp a:hover { color: #ffb84d; }
.dot { color: #ffffff; }

/* ---------- 响应式 — 桌面端适配 ---------- */
@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .nav-links {
    position: static;
    display: flex !important;
    flex-direction: row;
    background: transparent;
    border: 0;
    padding: 0;
    gap: 4px;
    box-shadow: none;
  }
  .nav-links a {
    padding: 8px 12px;
    border: 0;
    font-size: 16px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav-links a:hover { background: rgba(255, 138, 26, 0.12); color: #ffb84d; }

  /* 桌面端：站名与导航项同步上调一号；菜单项文字 +1 号的同时把内边距收紧（10/16 → 8/12），
     菜单整体宽度反而略减。顶栏总高同为 81px（这里 80 + 1px 边框），logo 撤下后由 min-height 顶住 */
  .nav-inner { min-height: 80px; }
  .brand-mark img { width: 58px; height: 58px; }
  .brand-name { font-size: 22px; }
  .brand-domain { font-size: 12px; letter-spacing: 1.5px; }

  .hero { padding: 160px 20px 120px; }
  .hero-title { font-size: 48px; }
  .hero-sub { font-size: 17px; }

  .section { padding: 96px 20px; }
  .section-head h2 { font-size: 34px; }

  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid.two { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  /* 三栏并列：小程序码 / 客服码 / 联系方式。两个码卡居中，文字卡左对齐 */
  .contact-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .contact-card { text-align: left; }
  .contact-card--qr { text-align: center; }
  .contact-row { padding: 16px 4px; }

  .footer-inner { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .hero-title { font-size: 56px; }
  .grid { gap: 24px; }
  /* 四步流程固定两行两列，不随宽屏拉成一行四列 */
  .steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ---------- 减弱动效 — 用户偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  /* 保留色彩高亮，但去掉位移与缩放 */
  .card:hover, .card:active, .card:hover .card-ico,
  .step:hover, .step:active, .step:hover .step-num,
  .feature:active, .feature:hover,
  .block:active, .block:hover,
  .contact-card:active, .contact-card:hover { transform: none; }
  /* 跑线层：动画被禁用后会静止堆在网格上，直接隐藏（script.js 同样会跳过生成） */
  .hero-scan { display: none; }
}