/* ============================================================
   启橙建站 · 浅橙风格落地页
   主色：暖橙 #FF8A3D  辅助：奶油白 / 暖灰
   ============================================================ */
:root {
  --orange: #ff8a3d;
  --orange-deep: #f26a11;
  --orange-soft: #fff1e4;
  --orange-tint: #fff7ef;
  --orange-line: #ffdcc0;
  --grad-orange: linear-gradient(135deg, #ffa25c 0%, #ff7a1a 100%);
  --text: #33261c;
  --text-sub: #6b5a4c;
  --text-light: #9c8a7b;
  --cream: #fffaf4;
  --white: #ffffff;
  --border: #f3e6d9;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-sm: 0 2px 10px rgba(194, 105, 30, .06);
  --shadow-md: 0 10px 30px rgba(194, 105, 30, .10);
  --shadow-lg: 0 18px 44px rgba(194, 105, 30, .16);
  --max: 1350px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  /* 不再全局声明 scroll-behavior: smooth —— 它同样作用于滚动条拖动，
     会让页面"缓动"追向鼠标位置而不是直接跟手，快速拖动时明显滞后。
     锚点的平滑滚动改由 JS 在点击那一刻单独触发（见 main.js）。 */
  /* 固定导航高 70px，锚点跳转时预留顶部空间，避免标题被遮挡 */
  scroll-padding-top: 86px;
  /* 手机端关键：锁死字号，禁止浏览器"自作聪明"放大
     —— Android Chrome 的字体增强、iOS 横竖屏切换缩放都由此属性控制，
        不锁定时会出现文字忽大忽小的跳变 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 滚动条改为灰色调（Firefox / 新版 Safari 生效） */
  scrollbar-width: thin;
  scrollbar-color: #c4c4c4 #f1f1f1;
}
section[id], .section[id] { scroll-margin-top: 86px; }

/* 滚动条改为灰色调（Chrome / Edge / 旧版 Safari 走 WebKit 私有写法） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 999px;
  /* 两侧留 2px 内缩，滑块不贴轨道边缘，视觉更精致 */
  border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* 滚动进入的轻微淡入（少量平滑过渡） */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 防止 iOS 横屏时自动放大字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
svg { display: block; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 60px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }

.section-chip {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0px;
}

.section-desc { margin-top: 14px; font-size: 16px; color: var(--text-sub); }

.grad-text {
  background: var(--grad-orange);
  /* 渐变加宽到 200% 后左右缓慢流动：静态渐变的色带是死的，
     流动后标题才有"呼吸感"。字号足够大，7s 一轮不会晃眼 */
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradFlow 7s ease-in-out infinite;
}
@keyframes gradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 顶部滚动进度条：贴在最上层，随滚动显示已读进度，给长页面一个"进行中"的反馈 */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  /* 高于固定导航（z-index: 60），保证进度条压在导航之上 */
  z-index: 80;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: var(--grad-orange);
  /* 不加过渡：宽度由滚动事件逐帧写入，再加过渡会让进度条
     比实际滚动慢半拍，拖动时看着像"跟不上" */
}

/* ========== 按钮 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-solid {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 138, 61, .35);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 138, 61, .45); }
.btn-line {
  background: #fff;
  color: var(--orange-deep);
  border-color: var(--orange-line);
}
.btn-line:hover { border-color: var(--orange); background: var(--orange-tint); transform: translateY(-2px); }

/* ========== 顶部导航 ========== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(12px);
  /* 导航区下方常驻细线，固定导航与页面内容之间始终有清晰分界
     比通用的 --border(#f3e6d9) 略深，细线才不至于在奶油底上消失 */
  border-bottom: 1px solid #e9d9c4;
  transition: box-shadow .3s ease;
}
/* 滚动后追加投影，强化悬浮层次（细线始终保留） */
.header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
/* 顶栏电话按钮：号码前的小号白色电话图标，点击直接唤起拨号 */
.header-cta { gap: 6px; }
.header-cta .cta-phone-icon {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  /* 显式锁定白色，避免受按钮其它状态的颜色继承影响 */
  color: #fff;
}

/* 品牌区：logo 在上、品牌定位语在下，整体宽度由 logo 决定 */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  /* 图片底色为白，用 multiply 混色与奶油底自然融合 */
  mix-blend-mode: multiply;
}
/* 字号按 logo 宽度反推（11.5px × 15 字 ≈ 173px），使文字宽度与 logo 基本一致 */
.brand-tag {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.25;
  white-space: nowrap;
}
.brand:hover .brand-logo { opacity: .85; }

.nav { display: flex; gap: 34px; }
.nav a {
  position: relative;
  font-size: 16px; font-weight: 600;
  color: #33261c;
  padding-bottom: 7px;
  transition: color .25s ease;
  /* 导航项不允许在词内折行：宽度不足时 flex 会把「服务优势」逐字拆成两行，
     header 高度随之从 35px 涨到 63px，看起来像导航坏了一格 */
  white-space: nowrap;
}
/* 细横线：宽度 0 → 100%，以中线为轴向两侧延伸 */
.nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-orange);
  transform: translateX(-50%);
  transition: width .32s ease;
}
.nav a:hover { color: var(--orange-deep); }
/* 鼠标悬停、或滚动到对应板块时展开下划线 */
.nav a:hover::after,
.nav a.active::after { width: 100%; }
.nav a.active { color: var(--orange-deep); }

/* 汉堡按钮与移动端菜单（桌面端隐藏） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px; height: 40px;
  border: 1px solid var(--orange-line);
  border-radius: 11px;
  background: var(--orange-soft);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--orange-deep);
  transition: transform .3s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 10px 18px 18px;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  /* 改为弹性盒子：文字靠左、右侧小箭头靠右对齐 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 4px;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid #f5ece2;
  -webkit-tap-highlight-color: transparent;
}
/* 每行右侧的小箭头。
   用真正的 SVG，而不是 CSS 边框拼三角（那种做法缩放后失真、描边宽度不可控）。
   刻意不给 color 赋值：stroke 走 currentColor 继承 <a> 的文字色，
   于是「电话行本来是橙色」「当前板块高亮变橙」两种情况都自动跟着走 */
.mn-arrow {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  opacity: .45;
  transition: opacity .25s ease;
}
.mobile-nav a.active .mn-arrow { opacity: 1; }
/* 菜单底部电话入口：顶栏 CTA 在小屏移入菜单后，电话仍需一键可拨 */
.mobile-nav a:last-child {
  border-bottom: none;
  color: var(--orange-deep);
  font-weight: 600;
}
.mobile-nav .mobile-nav-tel {
  color: var(--orange-deep);
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
/* 移动端菜单：当前板块高亮 */
.mobile-nav a.active { color: var(--orange-deep); font-weight: 600; }

/* ========== 首屏 ========== */
.hero {
  position: relative;
  padding: 148px 0 64px;
  overflow: hidden;
  /* 首屏与下方板块之间的浅色分界细线 */
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(255, 176, 110, .22), transparent 60%),
    radial-gradient(900px 420px at 5% 10%, rgba(255, 205, 150, .18), transparent 60%),
    var(--cream);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
}
.blob-1 {
  width: 420px; height: 420px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, #ffc08a 0%, rgba(255, 192, 138, 0) 70%);
}
.blob-2 {
  width: 340px; height: 340px;
  bottom: -140px; left: -100px;
  background: radial-gradient(circle, #ffb37a 0%, rgba(255, 179, 122, 0) 70%);
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
}

.hero-copy { flex: 1 1 520px; }

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--orange-line);
  color: var(--orange-deep);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.hero-chip svg { width: 14px; height: 14px; }

.hero-title {
  margin-top: 24px;
  font-size: 46px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: 1px;
}

.hero-sub {
  margin-top: 20px;
  font-size: 16px;
  color: var(--text-sub);
  max-width: 720px;
}

.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* 首屏文案入场：加载后自上而下依次浮现，避免整块文字一次性砸出来。
   both 填充模式保证动画开始前就是隐藏态，不会出现先闪一下再淡入 */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-chip,
.hero-title,
.hero-sub,
.hero-actions {
  animation: heroIn .85s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-title   { animation-delay: .1s; }
.hero-sub     { animation-delay: .24s; }
.hero-actions { animation-delay: .38s; }

.hero-stats {
  margin-top: 44px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  min-width: 132px;
  box-shadow: var(--shadow-sm);
}
.stat strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--orange-deep);
  line-height: 1.3;
}
.stat span { font-size: 12.5px; color: var(--text-light); }

/* 首屏右侧视觉卡片 */
.hero-visual { flex: 0 1 520px; position: relative; }

.glass-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.gc-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px 20px;
  background: var(--orange-tint);
  border-bottom: 1px solid var(--border);
}
.gc-dot { width: 11px; height: 11px; border-radius: 50%; background: #ffd7b8; }
.gc-url {
  margin-left: 12px;
  font-size: 13.5px;
  color: var(--text-light);
  background: #fff;
  border-radius: 999px;
  padding: 3px 14px;
  border: 1px solid var(--border);
  /* 网址加长后：空间不足时胶囊自身收缩并以省略号收尾，不撑破浏览器条的宽度 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 打字机效果：等宽字体让逐字出现时宽度变化均匀，不跳动 */
  font-variant-numeric: tabular-nums;
}
/* 打字机光标：紧跟已打出的字符闪烁 */
.gc-url::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--orange);
  animation: gc-caret .9s steps(1) infinite;
}
@keyframes gc-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-url::after { animation: none; }
}
.gc-body { padding: 32px 30px 28px; }
.gc-line { height: 14px; border-radius: 7px; background: #f6ecdf; margin-bottom: 15px; }
.gc-line.big { height: 25px; width: 62%; background: var(--orange-line); margin-bottom: 22px; }
.gc-line.w-100 { width: 100%; }
.gc-line.w-80 { width: 78%; }
.gc-blocks { display: flex; gap: 13px; margin: 20px 0 24px; }
.gc-block {
  flex: 1;
  background: var(--orange-tint);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.gc-block span { width: 26px; height: 26px; border-radius: 8px; background: var(--orange-line); }
.gc-block i { height: 9px; border-radius: 5px; background: #f0e2d0; }
.gc-block i.short { width: 60%; }
.gc-btn {
  height: 48px;
  border-radius: 999px;
  background: var(--grad-orange);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(255, 138, 61, .35);
  cursor: pointer;
  transition: filter .25s ease, box-shadow .25s ease;
}
/* 悬停反馈：提示这是可跳转到页面表单的链接 */
.gc-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(255, 138, 61, .45);
}

.float-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--text-sub);
  padding: 9px 16px;
  box-shadow: var(--shadow-md);
}
.float-tag svg { width: 16px; height: 16px; color: var(--orange-deep); }
/* 卡片放大后，标签同步外移，保持"贴在卡片边缘"的层次感 */
.tag-ssl { top: 4px; right: -16px; }
.tag-resp { top: 44%; left: -30px; }
.tag-lead { bottom: 24px; right: -10px; }
/* 三个标签缓慢上下浮动：用负延迟错开相位，加载后立刻处于不同高度，
   不用等一个动画周期才分开 */
.float-tag { animation: tagFloat 5.2s ease-in-out infinite; }
.tag-resp { animation-delay: -1.7s; }
.tag-lead { animation-delay: -3.4s; }
@keyframes tagFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ========== 服务优势 ========== */
.advantages { background: #fff; }
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.adv-card {
  /* 图标与标题同一行：左侧 42px 图标列，右侧标题；
     正文另起一行，与图标左边缘对齐 */
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 12px;
  row-gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.adv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-line);
}
.adv-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--grad-orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  /* 与标题同行后不再需要下方留白，改由栅格的 row-gap 统一控制 */
  margin-bottom: 0;
  align-self: center;
  box-shadow: 0 6px 14px rgba(255, 138, 61, .3);
}
.adv-icon svg { width: 21px; height: 21px; }
.adv-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 0; align-self: center; }
/* 正文跨两列，回到与图标同一条左边界 */
.adv-card p { grid-column: 1 / -1; font-size: 14px; color: var(--text-sub); line-height: 1.75; }
/* 服务优势底部全宽「信任承诺」条：把"无套路 / 不卡用户 / 域名与源文件归客户"收进去，
   与上方 2×2 卡片栅格分离，避免 4 列网格里塞第 5 张孤卡破坏布局平衡 */
.adv-promise {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--orange-tint);
  border: 1px solid var(--orange-line);
  border-radius: 14px;
}
/* 头部：盾牌图标 + 标题/副标 */
.adv-promise .ap-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.adv-promise .ap-icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-deep);
  background: #fff;
  border: 1px solid var(--orange-line);
  border-radius: 10px;
}
.adv-promise .ap-icon svg { width: 22px; height: 22px; }
.adv-promise .ap-head h3 { margin: 0 0 1px; font-size: 17px; font-weight: 700; color: var(--text); }
.adv-promise .ap-head p { margin: 0; font-size: 13.5px; line-height: 1.3; color: var(--text-sub); }
/* 逐条承诺：把行业常见的"坑"掰开说清，2 列网格，移动端并 1 列 */
.adv-promise .ap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 22px;
}
.adv-promise .ap-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub);
}
.adv-promise .ap-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--orange-deep);
  font-weight: 700;
}
.adv-promise .ap-list strong { color: var(--text); font-weight: 700; }

/* ========== AI 可见度诊断 ========== */
.ai-audit {
  background: #fff;
}
.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.audit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.audit-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--orange-line);
}
.audit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.audit-card-head h3 { font-size: 18px; font-weight: 700; }
.audit-card-head p { margin-top: 6px; font-size: 13px; color: var(--text-light); }

/* 雷达图 */
.radar-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.radar { width: 100%; max-width: 370px; height: auto; }
.radar-grid polygon { fill: none; stroke: var(--orange-line); stroke-width: 1; }
.radar-axis line { stroke: var(--orange-line); stroke-width: 1; }
.radar-data {
  fill: url(#radarFill);
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linejoin: round;
  /* 入场动效：从雷达中心向外放大并淡入。
     默认即为最终状态，JS 会先加 .radar-pending 把它收起，
     滚动进入视口后再移除该类播放一次——JS 不可用时图表静态可见，不会空白 */
  transform-box: view-box;
  transform-origin: 160px 150px;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}
.radar-dots {
  /* 数据点跟随数据面一起从中心展开 */
  transform-box: view-box;
  transform-origin: 160px 150px;
  transition: transform .9s cubic-bezier(.22, .61, .36, 1), opacity .5s ease;
}
/* 未进入视口前收起 */
.radar-pending .radar-data,
.radar-pending .radar-dots { transform: scale(0); opacity: 0; }
/* 进入视口后展开到最终形态并静止 */
.radar-in-view .radar-data,
.radar-in-view .radar-dots { transform: scale(1); opacity: 1; }
.radar-dots circle { fill: #fff; stroke: var(--orange); stroke-width: 2; }
/* 复位瞬间关闭过渡（由 JS 添加 .no-anim），避免离场时看到图形反向回缩；
   复位完成后 JS 会移除该类，下次进入视口即可重新播放 */
.rm-bars.no-anim .rm-track i,
.radar-wrap.no-anim .radar-data,
.radar-wrap.no-anim .radar-dots { transition: none; }
/* 尊重系统「减弱动效」设置：直接显示最终状态 */
@media (prefers-reduced-motion: reduce) {
  .radar-data, .radar-dots { transition: none; }
}
.radar-labels text { font-size: 12px; fill: var(--text-sub); }

/* 报告预览 */
.report-mock {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  position: relative;
}
.rm-note {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 11px;
  color: var(--text-light);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.rm-tabs {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rm-tabs .on { color: var(--orange-deep); font-weight: 700; }
.rm-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.rm-metric {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 半圆贴合到卡片边缘后，用它裁掉超出圆角的方角 */
  overflow: hidden;
}
.rm-num {
  flex: 0 0 auto;
  min-width: 82px;
  /* 负外边距抵消卡片 12px 内边距：左、上、下三面紧贴卡片边框，不留缝隙 */
  align-self: stretch;
  margin: -12px 0 -12px -12px;
  /* 改用 flex 居中：拉伸到满高后仍能垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px 4px 12px;
  background: #fff;
  /* 只保留右侧弧线：其余三边不描边
     颜色取主橙（#ff8a3d）与浅橙线（#ffdcc0）之间，比主橙略浅一档 */
  border: none;
  border-right: 1.5px solid #ffa163;
  border-radius: 0 999px 999px 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--orange-deep);
}
.rm-num em { font-style: normal; font-size: 14.5px; font-weight: 600; }
/* 右侧两行（主说明 + 副说明）收紧行距，与放大后的数字更紧凑 */
.rm-metric-txt { min-width: 0; line-height: 1.35; }
.rm-metric-txt b { display: block; font-size: 12.5px; font-weight: 600; }
.rm-metric-txt span { font-size: 11px; color: var(--text-light); }
.rm-title { font-size: 12.5px; color: var(--text-sub); margin-bottom: 10px; }
.rm-bars li {
  display: grid;
  grid-template-columns: 62px 1fr 40px;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--text-sub);
}
.rm-track {
  height: 7px;
  border-radius: 4px;
  background: var(--orange-soft);
  overflow: hidden;
}
.rm-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--grad-orange);
  /* 入场动效：初始宽度 0，滚动进入视口后由 JS 加上 .in-view
     过渡到各条自己的目标宽度（--w），播完即静止在最终值 */
  width: 0;
  transition: width .9s cubic-bezier(.22, .61, .36, 1);
}
/* 进入视口后填充到目标比例 */
.rm-bars.in-view .rm-track i { width: var(--w, 0); }
/* 五条依次错开出场，形成自上而下的填充节奏 */
.rm-bars.in-view li:nth-child(1) i { transition-delay: 0s; }
.rm-bars.in-view li:nth-child(2) i { transition-delay: .1s; }
.rm-bars.in-view li:nth-child(3) i { transition-delay: .2s; }
.rm-bars.in-view li:nth-child(4) i { transition-delay: .3s; }
.rm-bars.in-view li:nth-child(5) i { transition-delay: .4s; }
/* 尊重系统「减弱动效」设置：直接显示最终状态 */
@media (prefers-reduced-motion: reduce) {
  .rm-track i { transition: none; }
}
.rm-bars em {
  font-style: normal;
  text-align: right;
  font-size: 11.5px;
  color: var(--text-light);
}

/* 价值主张 */
.audit-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.audit-values li {
  /* 图标移到文字左侧：左列 44px 放圆形图标，右列放标题与说明 */
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
  /* 内容整体贴顶：同一行卡片等高时，默认的 stretch 会把行高撑开、
     把文字往中间挤，导致各卡标题起始高度不一致 */
  align-content: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* 内边距收紧：卡片内容左对齐后，原来的 24/18 留白显得空 */
  padding: 18px 14px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.audit-values li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-line);
}
.av-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 跨满标题与说明两行，配合容器的 align-items: center，
     图标才能相对这两行文字整体上下居中（否则只与标题行居中） */
  grid-row: span 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-deep);
  /* 与文字同行后不再需要下方留白 */
  margin-bottom: 0;
}
.av-icon svg { width: 21px; height: 21px; }
/* 标题与说明文字之间的行距收紧：
   margin 收到 1px，并给标题单独设更紧的行高——
   否则标题继承全局 1.75 行高，上下各多出约 6px 空白，看着仍显松散 */
.audit-values b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 1px; line-height: 1.3; }
/* 说明文字固定在右侧文字列，避免自动排到图标下方那一格 */
.audit-values p { grid-column: 2; font-size: 13px; color: var(--text-sub); line-height: 1.7; }

/* ========== 建站流程 ========== */
.process { background: var(--orange-tint); }
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  counter-reset: step;
}
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-line);
}
/* 序号徽标：位于卡片右下角的圆形，圆只露出一部分（由 .step-badge 裁切）
   用独立包裹层裁切而非给卡片加 overflow:hidden，以免卡片间的连接箭头被裁掉 */
.step-badge {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  z-index: 0;
  pointer-events: none;
}
.step-num {
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 序号更纤细：字号略收 + 字重降到 200（PingFang / 系统字体的细体），
     描边同步由 2px 减到 1px，让整个序号徽标更轻 */
  font-size: 28px;
  font-weight: 200;
  line-height: 1;
  /* 默认浅橙，作为卡片角落的低调装饰 */
  color: #ffd3ad;
  background: var(--orange-tint);
  border: 1px solid var(--orange-line);
  border-radius: 50%;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
/* 鼠标停留在当前卡片时，序号提亮突出 */
.step:hover .step-num {
  color: var(--orange-deep);
  border-color: var(--orange);
  background: #fff;
}
/* 正文压在徽标之上，避免文字被圆形干扰 */
.step-body { position: relative; z-index: 1; }
.step-body h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.step-body p { font-size: 13.5px; color: var(--text-sub); line-height: 1.75; }
/* 步骤之间的连接箭头（桌面端） */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* 序号移入标题行后，标题中心约在 38px，箭头随之对齐 */
  top: 34px;
  right: -12px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--orange-line);
  border-right: 2px solid var(--orange-line);
  transform: rotate(45deg);
}

/* ========== GEO 实效案例 ========== */
.geo-cases { background: #fff; }
.geo-slider {
  overflow: hidden;           /* 旧浏览器兜底：竖向阴影会被裁，但轮播仍正常 */
}
/* 仅裁掉横向溢出（隐藏屏外卡片），竖向放行 → 卡片 hover 阴影不再被切。
   clip 不会像 hidden 那样把另一轴强制成 auto，故可单独放开竖向 */
@supports (overflow-x: clip) {
  .geo-slider {
    overflow-x: clip;
    overflow-y: visible;
  }
}
.geo-track {
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.geo-track .geo-card {
  flex: 0 0 calc(50% - 12px);
}
.geo-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.geo-dot {
  width: 26px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #e3e3e3;
  cursor: pointer;
  transition: background .3s, width .3s;
}
.geo-dot:hover { background: #cfcfcf; }
.geo-dot.active {
  width: 34px;
  background: var(--orange);
}
.geo-card {
  background: #fff;
  border: 1px solid var(--orange-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.geo-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange);
}
.geo-cover {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cover-edu {
  background: linear-gradient(135deg, #ffc48c 0%, #ff8f45 55%, #f97b28 100%);
}
/* 环保科技企业封面：工业厂区实景图（无蒙版，绿底兜底） */
.cover-eco {
  background-color: #2faf7a;
  background-image: url("../images/industrial-cover.jpg");
  background-size: cover;
  background-position: center;
}
/* GEO 案例描述里的客户官网链接：橙色可点，悬停加下划线 */
.geo-desc a { color: var(--orange-deep); font-weight: 600; text-decoration: none; }
.geo-desc a:hover { text-decoration: underline; }
.cover-chain {
  background: linear-gradient(135deg, #ffb07a 0%, #f77c3c 55%, #e8621f 100%);
}
/* 汽车服务（易审车）封面：高速公路车流实景图（无蒙版，蓝底兜底） */
.cover-auto {
  background-color: #1f6fc4;
  background-image: url("../images/auto-cover.jpg");
  background-size: cover;
  background-position: center;
}
/* 闪收虾封面：门店实拍图（取自官网 shanshouxia.com）；定位偏上以露出门头招牌 */
.cover-shan {
  background-color: #c9c9c9;
  background-image: url("../images/shanshouxia-cover.jpg");
  background-size: cover;
  background-position: center 30%;
}
/* 蓉易收封面：官网首屏背景图 hero-bg（取自官网 rongyishou.com，cover 铺满） */
.cover-rong {
  background-color: #2b2b2b;
  background-image: url("../images/rongyishou-cover.png");
  background-size: cover;
  background-position: center;
}
.geo-badge {
  position: absolute;
  z-index: 2;
  top: 14px; right: 14px;
  font-size: 12px;
  color: #555555;
  background: #fff;
  border-radius: 999px;
  padding: 4px 13px;
  box-shadow: 0 3px 10px rgba(150, 70, 10, .18);
}
.geo-body { padding: 22px 24px 24px; }
.geo-body h3 { font-size: 19px; font-weight: 700; color: var(--orange-deep); }
.geo-desc {
  margin-top: 8px;
  font-size: 13.5px;
  color: #555555;
  line-height: 1.8;
}
.geo-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.gm {
  background: #fff;
  border: 1px dashed var(--orange-line);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}
.gm b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
  color: #555555;
  letter-spacing: -.5px;
}
.gm b.rank { font-size: 25px; }
.gm b em { font-style: normal; font-size: 14px; margin-left: 2px; }
.gm b em.up { color: #555555; }
.gm b em.down { color: #555555; }
.gm span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: #555555;
  line-height: 1.4;
}
/* 按行业分色：环保卡浅绿调、审车卡浅蓝调 —— 卡片背景与文字/强调色同步更改，
   封面绿/蓝渐变原本就是这样，正好呼应 */
.geo-card.tone-green { background: #fff; border-color: var(--orange-line); }
.geo-card.tone-green .geo-desc a { color: var(--orange-deep); }
.geo-card.tone-green .geo-badge { color: #555555; }
.geo-card.tone-green .gm { background: #fff; border-color: var(--orange-line); }
.geo-card.tone-green .gm b { color: #555555; }
.geo-card.tone-green .gm b em.up { color: #555555; }
.geo-card.tone-green .gm b em.down { color: #555555; }
.geo-card.tone-green .gm span { color: #555555; }
.geo-card.tone-green:hover { border-color: var(--orange); }

.geo-card.tone-blue { background: #fff; border-color: var(--orange-line); }
.geo-card.tone-blue .geo-desc a { color: var(--orange-deep); }
.geo-card.tone-blue .geo-badge { color: #555555; }
.geo-card.tone-blue .gm { background: #fff; border-color: var(--orange-line); }
.geo-card.tone-blue .gm b { color: #555555; }
.geo-card.tone-blue .gm b em.up { color: #555555; }
.geo-card.tone-blue .gm b em.down { color: #555555; }
.geo-card.tone-blue .gm span { color: #555555; }
.geo-card.tone-blue:hover { border-color: var(--orange); }

/* ========== 常见问题 ========== */
.faq { background: #fff; }
.faq .section-title { font-weight: 400; }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  /* 左边框宽度参与过渡：展开时由 1px 增长到 5px */
  transition: border-color .25s ease, border-left-width .25s ease, box-shadow .25s ease;
}
/* 展开态：左边框加粗到 5px 并转为橙色。
   这里必须用真正的 border-left，而不是伪元素画竖条：
   边框是浏览器按 border-radius 渲染的，能顺着左上、左下两个圆角绕过去；
   伪元素会被 overflow: hidden 裁在圆角「内侧」，转角外沿那一圈
   仍是浅色边框，接缝处是断的 —— 就是上一版露白的原因。 */
.faq-item.open {
  border-color: var(--orange-line);
  border-left: 5px solid var(--orange);
  box-shadow: var(--shadow-sm);
}
/* 左边框 1px → 5px 会在 border-box 下挤掉 4px 内容宽度。
   把题目与答案的左内边距等量减 4px（24 → 20）抵消，
   文字全程停在原位，不会在展开瞬间横向跳一下 */
.faq-item.open .faq-q,
.faq-item.open .faq-a p { padding-left: 20px; }
/* 问题由 h3 承载（利于搜索与 AI 抽取），需清除标题默认样式 */
.faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  padding: 20px 24px;
  cursor: pointer;
  /* padding-left 参与过渡：与 .faq-item 左边框的宽度变化同步，
     两者一增一减，文字视觉位置保持不动 */
  transition: color .25s ease, padding-left .25s ease;
}
.faq-q:hover { color: var(--orange-deep); }
/* 当前展开的问题：标题加粗并转为橙色，与右侧箭头的橙色呼应，一眼看出在看哪一问 */
.faq-item.open .faq-q { font-weight: 700; color: var(--orange-deep); }
.faq-arrow {
  flex: 0 0 10px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.faq-item.open .faq-arrow { transform: rotate(225deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a p {
  padding: 0 24px 20px;
  font-size: 14.5px;
  color: var(--text-sub);
  line-height: 1.85;
  transition: padding-left .25s ease;
}

/* ========== 套餐 ========== */
.package { background: var(--orange-tint); }

.price-card {
  border-radius: 24px;
  padding: 2px;
  background: var(--grad-orange);
  box-shadow: var(--shadow-md);
  margin-bottom: 32px;
}
.price-card-inner {
  background: #fff;
  border-radius: 22px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.price-info { flex: 1 1 360px; }
.price-badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fff;
  background: var(--grad-orange);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.price-name { font-size: 22px; font-weight: 700; line-height: 1.5; }
.price-desc { margin-top: 10px; font-size: 14.5px; color: var(--text-sub); }
.price-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.price-tags li {
  font-size: 12.5px;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  padding: 5px 12px;
}

.price-figure { flex: 0 0 220px; text-align: center; }
.price-num {
  line-height: 1;
  /* 弹性布局：让货币符号与金额按各自行盒顶边对齐。
     原先靠 vertical-align: 30px 硬调像素，字号一变就会错位
     （窄屏下金额降到 48px，偏移量需要跟着改） */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}
.price-num .cur {
  font-size: 24px;
  /* 由 700 降到 500：符号只是前缀，笔画收细后与粗体金额形成主次，
     不再抢金额本身的视觉重心 */
  font-weight: 500;
  color: var(--orange-deep);
  line-height: 1;
  /* 行盒顶边对齐后，符号因字号小而仍偏高（两套字号 ascent 不同），
     这里补上差值，使其字形顶端与数字顶端齐平 */
  margin-top: 5px;
}
.price-num .val {
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -2px;
  /* 负字距会在末位字符后多留 2px，令整体视觉中心偏左，
     用等量负外边距抵消，保证金额在卡内真正居中 */
  margin-right: -2px;
  background: var(--grad-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-unit { display: block; font-size: 13px; color: var(--text-light); margin: 8px 0 18px; }

/* 服务清单 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.svc-card {
  /* 图标与标题同一行：左列 44px 放图标，右列放标题；
     正文跨满两列回到图标左缘，整卡共用一条左边界 */
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  row-gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-line);
  background: #fff;
}
.svc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
  /* 与标题同行后不再需要下方留白，改由卡片的 row-gap 统一控制 */
  margin-bottom: 0;
  align-self: center;
}
.svc-icon svg { width: 22px; height: 22px; }
.svc-icon.solid {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 138, 61, .35);
}
.svc-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 0; align-self: center; }
/* 正文跨满两列，与图标左边缘对齐 */
.svc-card p { grid-column: 1 / -1; font-size: 14px; color: var(--text-sub); line-height: 1.75; }
.svc-card-cta {
  display: grid;
  /* 与其余服务卡共用同一套栅格，但内容顶天、按钮贴底 */
  align-content: space-between;
  background: #fff;
  border-color: var(--orange-line);
}
.svc-card-cta .btn { grid-column: 1 / -1; justify-self: start; align-self: end; }

.faq-a strong { color: var(--orange-deep); font-weight: 700; }

/* 软转化引导 */
.soft-cta {
  margin-top: 28px;
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  text-align: center;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(255, 176, 110, .25), transparent 70%),
    var(--cream);
  border: 1px solid var(--orange-line);
}
.soft-cta p {
  max-width: 620px;
  margin: 0 auto 22px;
  font-size: 16px;
  color: var(--text-sub);
  line-height: 1.9;
}

/* ========== 案例 ========== */
.cases { background: var(--orange-tint); }
.case-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.case-card {
  grid-column: span 2;
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease,
              border-top-width .25s ease, padding-top .25s ease;
}
/* 展开态：卡片本体在自己内部变长。
   align-self: start 是必需的 —— Grid 默认 stretch，卡片会随行拉伸，
   变高之后既撑不出行、也放不下多出来的内容（卡片 overflow: hidden 会把它们裁掉）。
   改成按内容取高后向下溢出即可；行高由 JS 钉成确定值，所以不会影响其他卡片。
   z-index 50：让长出来的部分压在下面两排之上（低于导航 60、悬浮按钮 70） */
.case-card.open {
  align-self: start;
  z-index: 50;
  /* 顶部橙条在展开期间常驻：原本只由 :hover 提供，鼠标一移开橙条就没了，
     而鼠标往往停在按钮上、离开后卡片仍然是展开的，状态对不上。
     取值与 hover 完全一致，鼠标悬停与鼠标离开两种状态下的外观不会有差别 */
  border-top: 4px solid var(--orange);
  padding-top: 27px;   /* 同 hover：顶部边框多出的 3px 用内边距等量抵掉 */
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange-line);
  /* 顶部橙条：与「常见问题」卡片的左侧竖条同一套做法 —— 用真正的 border-top。
     伪元素和背景都是矩形色块，走到圆角处只能被裁成越来越窄的尖角，接不到边；
     border 是浏览器按 border-radius 沿着边缘描的，能顺着左上、右上两个圆角
     一路绕到卡片侧边。代价是必须放弃渐变，改为纯色 */
  border-top: 4px solid var(--orange);
  /* 顶部边框 1px → 4px 多占 3px 高度，等量减少上内边距，卡内文字不位移 */
  padding-top: 27px;
}



.case-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border);
}
.case-icon {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--orange-soft);
  color: var(--orange-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.case-icon svg { width: 29px; height: 29px; }
/* 悬停与展开共用同一套配色：图标转橙底白字。
   展开态必须一起写 —— 鼠标常常停在按钮上或已经移开，卡片却是展开的，
   配色若不跟着保持，就会出现「明明开着却看不出选中」 */
.case-card:hover .case-icon,
.case-card.open .case-icon {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 6px 14px rgba(255, 138, 61, .32);
}
.case-head-text { min-width: 0; }
.case-badge {
  display: inline-block;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 1.5px;
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: 6px;
  padding: 1px 9px;
  transition: background .25s ease, color .25s ease;
}
/* 案例编号同样在悬停与展开时转橙底白字，与左侧图标同步，
   一眼能看出当前在看哪一张 */
.case-card:hover .case-badge,
.case-card.open .case-badge {
  background: var(--grad-orange);
  color: #fff;
}
.case-head h3 {
  margin-top: 3px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.case-block .case-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--orange-deep);
  background: var(--orange-tint);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.case-block .case-label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.case-block p { font-size: 14.5px; color: var(--text-sub); line-height: 1.85; }
.case-quote {
  margin-top: auto;
  position: relative;
  background: var(--orange-tint);
  border-left: 3px solid var(--orange-light, var(--orange));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
}
.quote-mark {
  position: absolute;
  top: 10px; right: 14px;
  width: 22px; height: 22px;
  color: var(--orange-line);
}
.case-quote p { font-size: 14px; color: var(--text); line-height: 1.85; }

/* ---- 案例卡的折叠区与展开按钮 ---- */
/* 折叠区：默认收起（高度 0），展开时在文档流里把卡片本体撑高。
    上下属于同一个盒子，不存在两条需要对接的竖线，也就没有 ±1px 的错位 */
.case-more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* 收起态不占空间：再用等量负外边距抵掉卡片 gap 会贡献的那 16px，
     否则痛点正文与按钮之间会空出一段 */
  margin-top: -16px;
  transition: max-height .4s ease, margin-top .4s ease, opacity .3s ease;
}
.case-card.open .case-more { margin-top: 0; opacity: 1; }
/* 引言块原本靠 margin-top: auto 顶到卡片底部；进入折叠区后改为按内容自然排布 */
.case-more .case-quote { margin-top: 0; }

.case-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 同一行的卡片会被拉到等高，margin-top: auto 让按钮始终贴在卡片底边，
     整排按钮因此保持在同一水平线上，不会参差不齐 */
  margin-top: auto;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 13.5px;
  /* 常规字重，与正文一致：<button> 不继承字号字重，600 会让按钮字视觉上过实 */
  font-weight: 400;
  color:#333;
  background:#f9f9f9;
  border: 1px solid #d1d1d1;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease,
              color .25s ease;
}
/* 展开态：按钮转浅橙底＋深橙字，与卡内的编号、图标、顶部橙条同一套橙色体系，
   一眼看出这张卡正处于展开状态。
   刻意排在 :hover 之前 —— 两者特异性相同（都是 0,2,0），靠源码顺序决胜，
   放在前面才能让悬停反馈继续生效：鼠标移上来仍会变白底，只是文字保持深橙 */
.case-card.open .case-toggle {
  background: var(--orange-soft);
  border-color: var(--orange-line);
  color: var(--orange-deep);
}
.case-toggle:hover {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 4px 12px rgba(255, 138, 61, .18);
}
.case-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ct-chevron {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  transition: transform .3s ease;
}
/* 展开时箭头翻转朝上，与 FAQ 题卡的箭头同一套语义 */
.case-card.open .ct-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .case-more,
  .ct-chevron { transition: none; }
}

/* ========== 底部转化 ========== */
.contact {
  background: var(--orange-tint);
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.contact-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 18px;
}
.contact-copy > p { font-size: 16px; color: var(--text-sub); max-width: 580px; }
.contact-points { margin-top: 22px; }
.contact-scope {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  font-size: 14px;
  color: var(--text-sub);
}
.contact-scope .scope-tag {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 300;
  color: #fff;
  background: var(--grad-orange);
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: 0 3px 8px rgba(255, 138, 61, .3);
}
.contact-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-sub);
  margin-bottom: 16px;
}
.cp-text strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.6;
}
.cp-text span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.75;
}
.contact-points .tick {
  margin-top: 3px;
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-deep);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  /* 缓慢向外扩散一圈浅橙微光，像被逐条确认过 */
  animation: tickGlow 3.4s ease-in-out infinite;
  /* transform 用带回弹的曲线，配合入场形成"打勾"的弹跳感 */
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
              background-color .25s ease, color .25s ease;
}
/* 入场前的收起状态：勾选圈缩到 0.4 倍 */
.contact-copy.ct-pending .contact-points .tick { transform: scale(.4); }
/* 三个勾选圈错开相位，避免同时明暗显得机械 */
.contact-points li:nth-child(2) .tick { animation-delay: -1.1s; }
.contact-points li:nth-child(3) .tick { animation-delay: -2.2s; }
@keyframes tickGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 138, 61, .16); }
}
/* 鼠标划过整行时勾选圈填色，提示这三条是可核对的承诺；
   触屏没有 hover，用 @media (hover: hover) 排除，避免点按后残留 */
@media (hover: hover) {
  .contact-points li:hover .tick { background: var(--orange); color: #fff; }
}
/* 底部转化区入场：进入视口前各段从左侧淡入，离开后由 JS 复位以便重播 */
.contact-copy > *,
.contact-points li {
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.contact-copy.ct-pending > *,
.contact-copy.ct-pending .contact-points li {
  opacity: 0;
  transform: translateX(-16px);
}
/* 服务范围胶囊额外带一点缩放，入场时更"弹" */
.contact-copy.ct-pending .contact-scope { transform: translateX(-16px) scale(.96); }
/* 复位瞬间关闭过渡，避免离场时看到元素反向滑回 */
.contact-copy.no-anim > *,
.contact-copy.no-anim .contact-points li,
.contact-copy.no-anim .contact-points .tick { transition: none; }
.contact-phone { margin-top: 26px; font-size: 15px; color: var(--text-sub); }
/* 图标 + 号码整体可点击（图标替代了原来的"咨询电话："文字） */
.contact-phone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
/* 电话图标：橙色渐变实心圆 + 白色图标，配呼吸光晕，强化"可直接拨打"的感知 */
.contact-phone .phone-icon {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  padding: 9px;
  color: #fff;
  background: var(--grad-orange);
  border: none;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(255, 138, 61, .35);
  animation: phonePulse 2.6s ease-out infinite;
  transition: transform .25s ease;
}
/* 向外扩散的浅橙光晕，循环呼吸 */
@keyframes phonePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 138, 61, .45), 0 5px 14px rgba(255, 138, 61, .35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 138, 61, 0), 0 5px 14px rgba(255, 138, 61, .35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 61, 0), 0 5px 14px rgba(255, 138, 61, .35);
  }
}
.contact-phone a:hover .phone-icon {
  transform: scale(1.08);
  animation-play-state: paused;
}
/* 尊重系统"减少动效"偏好：关闭呼吸动画 */
@media (prefers-reduced-motion: reduce) {
  .contact-phone .phone-icon { animation: none; }
}
.contact-phone strong {
  font-size: 24px;
  color: var(--orange-deep);
  letter-spacing: .5px;
}
.contact-phone a { color: inherit; }
.contact-phone a:hover strong { color: var(--orange); }

/* 表单 */
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 34px 30px;
}
.form-title { font-size: 21px; font-weight: 700; margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 14px; color: var(--text-sub); margin-bottom: 8px; }
.form-group label em { color: var(--orange-deep); font-style: normal; margin-left: 2px; }
.form-group input,
.form-group textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--orange-tint);
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.form-group textarea { resize: vertical; min-height: 96px; }
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, .12);
  background: #fff;
}
.form-group input.error,
.form-group textarea.error { border-color: #e0703c; }
.err { display: none; font-size: 12px; color: #d9622a; margin-top: 6px; }
.err.show { display: block; }
.form-tip { margin-top: 12px; font-size: 12px; color: var(--text-light); text-align: center; }
.form-success {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  color: var(--orange-deep);
  font-size: 14px;
  text-align: center;
}
.form-success.show { display: block; }

/* ========== 页脚 ========== */
.footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.footer-left { flex: 1 1 400px; }
.footer-brand { margin-bottom: 16px; }
/* 页脚品牌定位语：小字号 + 加粗，作为 logo 的补充说明 */
.footer-slogan {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .2px;
  white-space: nowrap;
}
.footer-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 188px;
  /* 与页脚奶油底色自然融合 */
  mix-blend-mode: multiply;
}
.footer-mission {
  max-width: 460px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.9;
}

.footer-right {
  display: flex;
  gap: 72px;
  /* 三栏锁定在同一行：任何一栏文字增加时，只在自己栏内换行，
     不会因总宽超出而把右侧二维码那块挤到下一行 */
  flex-wrap: nowrap;
}
/* 配合 nowrap：允许各栏收缩到内容最小宽度以下，多余的宽度由文字换行消化 */
.footer-col { min-width: 0; }
.footer-col h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  position: relative;
  padding-left: 13px;
}
/* 联系方式使用 address 标签，需清除默认斜体 */
.footer-contact { font-style: normal; }
/* 联系栏说明文字：上限 260px，按栏宽自动折行。
   这句去掉 <br> 后整句连排，max-content 变宽，会把「联系我们」栏顶宽、
   连带把页脚右栏组撑到超过容器宽度而被迫整体换行；
   限宽后由文字在栏内消化，右栏组宽度稳定，页脚不再被撑开 */
.footer-contact li { max-width: 260px; }
.footer-col h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  /* 色条高度跟随标题字号（16px），视觉比例保持一致 */
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--grad-orange);
}
.footer-col li {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 11px;
  line-height: 1.7;
}
.footer-col a {
  color: var(--text-sub);
  transition: color .25s ease;
}
.footer-col a:hover { color: var(--orange-deep); }
/* 服务地区长尾词：2 列展示，列宽贴合文字避免折行。
   用 minmax(0, 1fr) 而非 max-content：骨架保持两列不变，
   但空间不足时允许收窄，配合外层不换行策略防止溢出撑乱版面 */
.footer-nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}
.footer-nav-list li { margin-bottom: 0; }
.footer-nav-list a { white-space: nowrap; }
.footer-col .footer-tel {
  font-size: 19px;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: .5px;
}
/* 微信二维码：加白底卡片保证扫码对比度，说明文字在图片下方并左右居中 */
.footer-qr { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.footer-qr img {
  flex: 0 0 104px;
  width: 104px; height: 104px;
  display: block;
  padding: 5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.footer-qr p {
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.75;
  /* 与二维码图形左右边界对齐：图片有 5px 内边距 + 1px 描边，
     故左右各留 6px，文字两端分散对齐后正好与黑白图形同宽 */
  width: 104px;
  padding: 0 6px;
  text-align: justify;
  text-align-last: justify;
}

.footer-bottom {
  background: #333333;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 16px 0;
}
.footer-sub { font-size: 12.5px; color: var(--text-light); text-align: center; }
.footer-copy {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-sub);
  text-align: center;
}
.footer-copy a {
  color: var(--text-sub);
  transition: color .25s ease;
}
.footer-copy a:hover { color: var(--orange-deep); }
.footer-divider { margin: 0 8px; color: var(--text-light); }
/* footer-bottom 深色区：内部文字反白，链接 hover 用橙色 */
.footer-bottom .footer-sub { color: rgba(255, 255, 255, .55); }
.footer-bottom .footer-copy,
.footer-bottom .footer-copy a,
.footer-bottom .footer-divider { color: rgba(255, 255, 255, .8); }
.footer-bottom .footer-copy a:hover { color: var(--orange); }

/* ========== 悬浮咨询按钮 ========== */
.float-btn {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(255, 138, 61, .45);
  transition: transform .25s ease, box-shadow .25s ease,
              opacity .25s ease, visibility .25s ease;
}
/* 联系区进入视口后收起悬浮按钮：表单就在眼前，无需再引导跳转，
   也避免它压住表单底部的「提交需求」按钮 */
.float-btn.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}
.float-btn svg { width: 18px; height: 18px; }
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255, 138, 61, .55); }

/* ========== 响应式 ========== */
/* 移动端（含平板）一律收进汉堡菜单。
   原本的断点是 960px，961~1200px 仍是横排导航 —— 7 个栏目按 34px 间距
   根本放不下，flex 收缩后中文被逐字折行（「服务优势」拆成两行），
   header 高度从 35px 跳到 63px。这一档与其勉强挤着，不如直接收进菜单，
   手机、平板、小笔记本的表现也就统一了。
   电话 CTA 保留可见（961~1200 宽度够放），仅在 ≤960px 才随菜单收走。

   这段必须放在 .nav-toggle 基准规则之后：两者特异性同为 (0,1,0)，
   写在前面会被后面的 display: none 覆盖，结果是导航和汉堡按钮双双消失 */
@media (max-width: 1200px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .audit-values { grid-template-columns: repeat(2, 1fr); }
  .geo-track .geo-card { flex: 0 0 100%; }
  .step:not(:last-child)::after { display: none; }
  .hero-title { font-size: 40px; }
  .hero-visual { flex: 0 1 440px; }
}

@media (max-width: 960px) {
  .section { padding: 46px 0; }
  .hero { padding: 122px 0 48px; }
  /* 竖排后：按钮组与下方示意图顶部之间的间距 */
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .hero-visual { width: 100%; max-width: 500px; }
  /* 移动端统一汉堡菜单：横排导航在 ≤960px 会与 logo、电话按钮挤在一起，
     这里全部收进菜单，手机与平板竖屏表现一致 */
  .nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .footer-inner { gap: 36px; }
  /* 固定两行栅格：服务地区独占一行，联系我们与微信咨询始终并列同一行。
     minmax(0, 1fr) 保证列可收缩——左栏文字再长也只在栏内换行，
     不会把右侧二维码那块挤到下一行 */
  .footer-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px 20px;
    width: 100%;
  }
  .footer-right .footer-col:first-child { grid-column: 1 / -1; }
  .tag-ssl { right: 0; }
  .tag-resp { left: -8px; }
  .tag-lead { right: 0; }
  .case-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
  .case-card { grid-column: span 1; }
  .audit-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .price-card-inner { padding: 30px 28px; }
  .price-figure { flex: 1 1 100%; text-align: left; }
  /* 必须保持 inline-flex：若退回 inline-block，符号与金额会回到
     行内基线对齐，顶部对齐失效 */
  .price-num { display: inline-flex; margin-right: 12px; }
  .price-unit { display: inline-block; margin: 0; vertical-align: 6px; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .footer { padding-top: 40px; }
  .footer-inner { padding-bottom: 28px; }
  /* 悬浮按钮是固定定位，页面滚到底时会压住备案信息；
     这里在页脚底部预留出按钮占用高度（18px 偏移 + 约 44px 高 + 余量） */
  .footer-bottom { padding: 16px 0 76px; }
  .footer-col .footer-tel { font-size: 18px; }
  .brand-logo { height: 34px; max-width: 160px; }
  /* logo 缩到 34px（约 147px 宽），定位语同步缩小保持宽度一致 */
  .brand-tag { font-size: 10px; }
  .footer-logo { height: 40px; max-width: 180px; }
  /* 小屏 logo 收窄，定位语同步减小 */
  .footer-slogan { font-size: 10.5px; }
  /* 二维码在小屏略微收窄，避免右侧文字被挤压 */
  .footer-qr img { flex: 0 0 96px; width: 96px; height: 96px; }
  /* 手机端：二维码与"扫码加微信"改为左对齐，
     与标题前的小色条（.footer-col h3::before，left: 0）同一条左边界 */
  .footer-qr { align-items: flex-start; }
  /* 图片缩到 96px，文字容器同步跟随，保持左右边界一致 */
  .footer-qr p { width: 96px; }
  /* 入场动画位移收窄：手机上快速滚动时，整段文字大幅滑入会被感知为"跳动" */
  .reveal { transform: translateY(10px); }
  /* 移动端收紧正文行距：小屏每行字数少，1.75~1.9 的行距会显得松散断层 */
  body,
  .hero-sub,
  .adv-card p,
  .svc-card p,
  .step-body p,
  .audit-values p,
  .geo-desc,
  .cp-text span,
  .case-block p,
  .case-quote p,
  .faq-a p,
  .soft-cta p,
  .footer-mission,
  .footer-col li,
  .footer-qr p { line-height: 1.62; }

  .section { padding: 40px 0; }
  .section-title { font-size: 25px; }
  .contact-title { font-size: 27px; }
  .section-head { margin-bottom: 26px; }
  .hero { padding: 108px 0 40px; }
  /* 手机端按钮与示意图顶部更紧凑 */
  .hero-inner { gap: 18px; }
  /* 手机端两行标题不折行：第一行约 13 个字宽，23px + 字距收窄后约 308px，
     375px 屏（容器可用 347px）可完整放下 */
  .hero-title { font-size: 29px; letter-spacing: .5px; white-space: nowrap; }
  .hero-sub { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stats { gap: 8px; flex-wrap: nowrap; }
  .stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 6px;
    text-align: center;
  }
  .stat strong { font-size: 19px; }
  .stat span { display: block; font-size: 11.5px; line-height: 1.4; }
  .service-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
  .adv-promise .ap-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { display: flex; align-items: flex-start; gap: 16px; }
  .step-num { margin-bottom: 0; }
  .faq-q { font-size: 15px; padding: 18px 20px; }
  .faq-a p { padding: 0 20px 18px; }
  .price-card-inner { padding: 26px 22px; }
  .price-num .val { font-size: 48px; }
  /* 金额降到 48px 后两套字号的 ascent 差值变小，符号偏移同步收 1px */
  .price-num .cur { margin-top: 4px; }
  .soft-cta { padding: 30px 22px; }
  .case-card { padding: 24px 20px; }
  .case-grid { grid-template-columns: 1fr; max-width: 560px; }
  .case-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; }
  .case-icon svg { width: 25px; height: 25px; }
  .case-head h3 { font-size: 18px; }
  .form-card { padding: 26px 20px 22px; }
  .float-btn { right: 16px; bottom: 18px; padding: 11px 18px; font-size: 14px; }
  .float-btn svg { width: 16px; height: 16px; }
  /* iOS 聚焦输入框自动缩放：字号需 ≥16px */
  .form-group input, .form-group textarea { font-size: 16px; }
  .geo-cover { height: 132px; }
  .geo-body { padding: 18px 18px 20px; }
  .geo-metrics { gap: 8px; }
  .gm { padding: 12px 6px; }
  .gm b { font-size: 19px; }
  .gm b.rank { font-size: 21px; }
  .gm span { font-size: 10.5px; }
  /* 窄屏（多为触屏）不显示顶部橙条：边框宽度与上内边距都回到常态值 */
  /* 窄屏不保留顶部橙条：这一档以触屏为主，hover 会「粘」住不放，
     橙条作为悬停反馈早已在这一档统统压回 1px。
     展开态一并压回 —— 否则 4px 橙条配上 27px 上内边距（比窄屏基准 24px 多 3px）
     会把卡内文字整体下推 6px，点开的一瞬间能看到一次跳动 */
  .case-card:hover,
  .case-card.open { border-top-width: 1px; padding-top: 24px; }
  /* 服务范围标签允许换行，避免窄屏溢出 */
  .contact-scope { flex-wrap: wrap; border-radius: 14px; }
  /* AI 可见度诊断：移动端单列 */
  .audit-values { grid-template-columns: 1fr; }
  .rm-metrics { grid-template-columns: 1fr; }
  .audit-card { padding: 22px 18px 20px; }
  .audit-card-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .audit-card-head .btn { width: 100%; }
  .radar-labels text { font-size: 13px; }
  /* 服务地区长尾词：手机端保持 2 列，行间距与链接内边距同步收紧 */
  .footer-nav-list { column-gap: 14px; row-gap: 5px; }
  .footer-nav-list li { margin-bottom: 0; text-align: center; }
  .footer-nav-list a {
    /* 改为弹性盒子并给出 44px 最小高度：
       手机上文字只有 13.5px，纯 padding 撑出的点击区不足 30px，
       容易点空；44px 是 iOS / Android 通用的可点击尺寸下限 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 2px;
    font-size: 13.5px;
  }
}

@media (max-width: 480px) {
  /* 保持两列并排，只收紧间距（沿用 640 断点的栅格） */
  .footer-right { gap: 22px 16px; }
  /* 窄屏下这行说明较长，降一档字号避免被挤成三行 */
  .footer-col li { font-size: 13px; }
  .hero-stats { gap: 8px; }
}

@media (max-width: 420px) {
  /* 极窄屏（320px 可用宽 292px）：再降一档，仍保证两行不折行 */
  .hero-title { font-size: 21px; }
  .tag-resp { display: none; }
  .stat strong { font-size: 17.5px; }
  .stat span { font-size: 11px; }
  /* 小屏头部防拥挤：logo 与咨询按钮同步收窄 */
  .brand-logo { height: 30px; max-width: 140px; }
  /* 极窄屏（≤420px）：定位语再收一档，避免顶栏拥挤 */
  .brand-tag { font-size: 9.5px; }
  .footer-qr img { flex: 0 0 88px; width: 88px; height: 88px; }
  .footer-qr p { width: 88px; font-size: 12px; }
  .header-cta { height: 34px; padding: 0 14px; font-size: 13.5px; }
  .container { padding: 0 14px; }
  .gm span { font-size: 10px; }
}

/* ============================================================
   触摸设备统一处理：消除手机上的"跳动"感
   ============================================================ */
/* 触屏上 :hover 在点按后会残留，位移不回位，看起来像元素"跳了一下"且卡住 */
@media (hover: none) {
  .btn-solid:hover,
  .btn-line:hover,
  .adv-card:hover,
  .audit-card:hover,
  .audit-values li:hover,
  .step:hover,
  .geo-card:hover,
  .svc-card:hover,
  .case-card:hover,
  .float-btn:hover { transform: none; }
  .contact-phone a:hover .phone-icon { transform: none; }
}

/* 移出移动端双击缩放判定：连点按钮时不会触发页面缩放，避免整页文字跟着放大 */
a, button, .btn, .faq-q { touch-action: manipulation; }

/* ============================================================
   动效总闸：系统开启「减弱动效」时关闭所有循环装饰动画。
   循环动画（光斑漂浮、标签浮动、按钮扫光、图标脉冲）持续占用注意力
   且易引发眩晕，必须统一跟随系统偏好关闭；
   一次性的入场 / 展开动效由各自的规则单独处理。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .float-tag { animation: none; }
  /* 首屏入场与渐变流动一并关闭，直接显示最终状态 */
  .hero-chip,
  .hero-title,
  .hero-sub,
  .hero-actions,
  .grad-text { animation: none; }
}