/* ============================================================
   开企宝官网 · 宽屏全屏框架（参考 qianwenai 结构）
   - 超宽版心 1560px，一屏一屏全屏切换（scroll-snap proximity）
   - 浅色 Fluent 毛玻璃 + 蓝紫渐变主题
   - 右侧屏标导航 + 首屏滚动提示
   ============================================================ */

:root {
  /* 色板 */
  --bg: #f4f6fb;
  --bg-2: #eaf0f8;
  --card: rgba(255, 255, 255, 0.7);
  --card-strong: rgba(255, 255, 255, 0.86);
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);

  --ink: #1b2735;
  --ink-2: #45526b;
  --ink-3: #71809b;

  --brand: #1a73e8;          /* 主蓝 · 取自设计稿 1A73E8 */
  --brand-lt: #32a6ff;       /* 亮蓝 · 取自设计稿 32A6FF */
  --brand-2: #6c7df5;        /* 浅蓝紫 · 仅作微量点缀 */
  --brand-grad: linear-gradient(115deg, #32a6ff 0%, #1a73e8 68%, #5e76f2 100%);
  --brand-soft: rgba(26, 115, 232, 0.1);

  --ok: #0e7a4d;

  /* Fluent 深度阴影 */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.1);
  --shadow-3: 0 4px 10px rgba(16, 24, 40, 0.08), 0 16px 40px rgba(16, 24, 40, 0.14);

  /* 尺寸：宽屏框架（版心随屏幕拉宽，两侧留白约 8%） */
  --wrap: 1680px;
  /* 全站统一左右留白：首页 banner / 导航 / 子页 hero 文案 / 正文版心共用
     约 8% 视口：--navleft = 8vw（≤200 封顶，移动端 18 下限）→ 1440≈115、1920≈154、2560=200，留白≈8% */
  --navleft: clamp(18px, 8vw, 200px);
  --header-h: 64px;
  --radius: 12px;
  --radius-lg: 18px;
  --acrylic: blur(24px) saturate(160%);
}

/* 版心随屏幕逐级拉宽，超宽屏也尽量吃满、减少两侧留白 */
@media (min-width: 1540px) { :root { --wrap: 1680px; } }
@media (min-width: 1920px) { :root { --wrap: 1680px; } }
@media (min-width: 2560px) { :root { --wrap: 1680px; } }

/* ---------------- 基础 ---------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 全屏切换：proximity 模式，长内容板块不会被强制吸附卡住 */
  /* scroll-snap 已移除：仅 hero 保持全屏，其余内容自适应高度 */
}

body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* hidden 属性兜底：author 样式里的 display 会覆盖 UA 的 [hidden]{display:none} */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
b, strong { font-weight: 600; }

/* 版心：左右留白与导航栏一致（--navleft），内容居中；
   超宽屏封顶在 --wrap + 两侧留白，内容保持居中紧凑（不无限拉宽） */
.wrap { max-width: calc(var(--wrap) + var(--navleft) * 2); margin: 0 auto; padding: 0 var(--navleft); width: 100%; }

::selection { background: rgba(26, 115, 232, 0.22); }

/* ---------------- 统一功能图标（与首页「自研技术底座」同款形态） ----------------
   毛玻璃浅蓝圆角方块 + 蓝色内嵌图标（技术底座 Figma 图标原色 #30A2FD）
   之后新增图标统一用 .ic（或 .ic--sm 小号）；历史容器类已对齐此形态。 */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(50, 166, 255, 0.18), rgba(108, 125, 245, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #30A2FD;
}
.ic img, .ic svg { width: 23px; height: 23px; display: block; margin: 0; }
.ic img { filter: none; }
/* 小号：紧凑列表 / 行内语义图标 */
.ic--sm {
  width: 38px; height: 38px;
  border-radius: 11px;
}
.ic--sm img, .ic--sm svg { width: 20px; height: 20px; }

/* ---------------- 背景光斑（浅色 Mica） ---------------- */

.bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; contain: paint; pointer-events: none; }
/* 防止固定装饰背景（.bg-fx 光晕/流星）在窄屏溢出产生横向滚动 */
html, body { overflow-x: clip; }

.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.g1 { width: 560px; height: 560px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(26, 115, 232, 0.16), transparent 70%); }
.g2 { width: 640px; height: 640px; right: -180px; top: 30%; background: radial-gradient(circle, rgba(105, 125, 245, 0.14), transparent 70%); }
.g3 { width: 560px; height: 560px; left: 30%; bottom: -220px; background: radial-gradient(circle, rgba(50, 145, 240, 0.13), transparent 70%); }

/* ---------------- 背景 AI 动效（流动色块 + 流星） ---------------- */

/* 流动色块：两侧留白处的科技感渐变团，缓慢漂移营造流动感 */
.bg-flow {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.66;
  will-change: transform;
}
.f1 { width: 440px; height: 440px; left: -150px; top: 18%;
  background: radial-gradient(circle, rgba(56, 150, 255, 0.36), transparent 70%);
  animation: flowDrift 14s ease-in-out infinite; }
.f2 { width: 400px; height: 400px; right: -140px; top: 54%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.32), transparent 70%);
  animation: flowDrift 17s ease-in-out infinite reverse; }
.f3 { width: 320px; height: 320px; left: 1%; bottom: 4%;
  background: radial-gradient(circle, rgba(45, 212, 225, 0.3), transparent 72%);
  animation: flowDrift 15s ease-in-out infinite; animation-delay: -9s; }

@keyframes flowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(96px, -66px, 0) scale(1.18); }
  66%      { transform: translate3d(-66px, 78px, 0) scale(0.88); }
}

/* 光斑极缓慢漂移，强化整体流动感（不透明度不变） */
.bg-glow { animation: glowDrift 34s ease-in-out infinite; }
.bg-glow.g2 { animation-duration: 40s; animation-delay: -12s; }
.bg-glow.g3 { animation-duration: 37s; animation-delay: -20s; }
@keyframes glowDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(34px, -28px, 0); }
}

@media (max-width: 680px) {
  .bg-flow.f3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-flow, .bg-glow { animation: none !important; }
}

/* ---------------- 滚动进度 ---------------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 120;
  background: transparent;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-grad);
}

/* ---------------- 顶部导航（腾讯云规格：56px 纯白实底 + 1px 分隔线） ---------------- */

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.4s ease;
}
/* 下滑隐藏 / 上滑显示（dobot 风格） */
.hdr.is-hidden { transform: translateY(-100%); pointer-events: none; }
.hdr.is-scrolled { box-shadow: var(--shadow-1); }
/* 首屏视频区内：透明底融入画面（JS 滚出 hero 后移除） */
.hdr.is-clear {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* 浅色图 hero（子页 .phero--bg）：顶边透明 + 深色导航文字 */
.hdr.is-clear-light {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* 下拉展开（或移动端抽屉打开）时：页头强制实底，避免透明叠 hero 导致文字看不清 */
.hdr:has(.nav-item:hover > .mega),
.hdr:has(.nav-item:focus-within > .mega),
.hdr.nav-open,
.hdr.mega-open {
  background: #fff;
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-1);
}
/* 下拉/抽屉展开时页头转白底：覆盖透明态的白色导航文字，保证展开态文字清晰可读
   （用 JS 加 .mega-open 类触发，避免 :has 兼容/触发时机问题） */
.hdr.is-clear.mega-open .nav-link,
.hdr.is-clear.nav-open .nav-link { color: var(--ink-2); }
.hdr.is-clear.mega-open .nav-link.is-active,
.hdr.is-clear.nav-open .nav-link.is-active { color: var(--brand); }
.hdr.is-clear.mega-open .nav-link:hover,
.hdr.is-clear.nav-open .nav-link:hover { color: var(--ink); }
.hdr.is-clear.mega-open .hdr-phone,
.hdr.is-clear.nav-open .hdr-phone { color: var(--ink-2); }
.hdr.is-clear.mega-open .nav-toggle span,
.hdr.is-clear.nav-open .nav-toggle span { background: var(--ink); }
.hdr-in { display: flex; align-items: center; height: var(--header-h); gap: 36px;
  max-width: none; width: 100%; padding-left: 5vw; padding-right: 5vw; }
/* 页头内容直接走全局 .wrap：左右留白 = --navleft（与 hero 文案/正文一致），
   超宽屏与正文一同封顶居中 —— 导航与版心永远同宽同缘 */

.brand img { height: 30px; width: auto; }

/* 导航紧随 logo（腾讯云排布），字号 16px */
.nav { display: flex; gap: 2px; }
.nav-link {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 16px;
  color: var(--ink-2);
  transition: background 0.2s, color 0.2s;
}
.nav-link:hover { background: rgba(15, 23, 42, 0.05); color: var(--ink); }
.nav-link.is-active { color: var(--brand); font-weight: 600; }

/* ---------------- 导航下拉面板（产品中心 / 解决方案） ---------------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > .nav-link { display: inline-flex; align-items: center; gap: 3px; }
.nav-caret { width: 12px; height: 12px; opacity: 0.45; transition: transform 0.25s, opacity 0.25s; }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 0.85; }

/* 面板：横贯视口、紧贴页头下沿；超宽屏与版心同宽居中，内容左缘永远对齐 logo */
.mega {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 30px 5vw 32px var(--mega-pad-l, 5vw);
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }

/* 产品中心：三列分组 */
.mega--prod .mega-in { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); gap: 0 24px; max-width: none; }
/* 解决方案：三项横向并列，排版 / 交互与产品下拉列头一致 */
.mega--sol .mega-in { display: block; max-width: 1180px; }
.mega--sol .mega-list--grid { display: block; }
.mega--sol .mega-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.mega--sol .mega-list > li { min-width: 0; padding: 10px 28px 12px; border-right: 1px solid rgba(23, 38, 63, .09); }
.mega--sol .mega-list > li:first-child { padding-left: 0; }
.mega--sol .mega-list > li:last-child { padding-right: 0; border-right: 0; }
.mega--sol .mega-list .mega-head { display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 5px 0; border-radius: 0; }
.mega--sol .mega-list .mega-head:hover { background: transparent; }
.mega--sol .mega-desc { max-width: 28em; margin-top: 8px; }
@media (max-width: 900px) { .mega--sol .mega-list { grid-template-columns: 1fr; } }

.mega-head {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  transition: color 0.2s;
}
.mega-head:hover { color: var(--brand); }
.mega-chev { width: 15px; height: 15px; color: var(--ink-2); opacity: 0.6; transition: transform 0.2s, color 0.2s, opacity 0.2s; }
.mega-head:hover .mega-chev { transform: translateX(2px); color: var(--brand); opacity: 1; }
.mega-desc { margin: 7px 0 0; font-size: 13px; color: #98a2b3; line-height: 1.55; }

.mega-list { margin: 14px 0 0; padding: 0; list-style: none; }
.mega-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s;
}
.mega-list a:hover { background: rgba(26, 115, 232, 0.07); color: var(--brand); }

/* 解决方案条目：主标题 + 数字员工副标题，多列网格 */
.mega-list--grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; margin-top: 14px; }
.mega-list--grid a { display: flex; align-items: flex-start; gap: 11px; padding: 11px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink-2); transition: background 0.18s, color 0.18s; }
.mega-list--grid a:hover { background: rgba(26, 115, 232, 0.06); color: var(--brand); }
.mega-list--grid .mi-t { display: block; font-size: 14.5px; font-weight: 500; color: inherit; transition: color 0.18s; }
.mega-list--grid .mi-s { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.mega-list--grid a:hover .mi-t { color: var(--brand); }

/* 下拉条目对应图标：无边框、与文字同色，仅作轻点缀 */
.mega-ic { flex: 0 0 auto; width: 18px; height: 18px; color: currentColor; display: inline-flex; align-items: center; justify-content: center; }
.mega-ic svg { width: 18px; height: 18px; display: block; }
.mega-ic-txt { min-width: 0; }
/* 图标光学中心与「主标题」行中心对齐（副标题在下，不参与对齐） */
.mega-list--grid .mega-ic { margin-top: 3px; }

/* 中宽屏：列数收敛，避免条目挤在一起 */
@media (max-width: 1280px) {
  .mega--prod .mega-in { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
  .mega--sol .mega-in { max-width: 1040px; }
  .mega-list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 下拉条目锚点跳转时避开固定页头 */
.psec, .pcard, .gcard { scroll-margin-top: calc(var(--header-h) + 24px); }

/* 右侧操作区：电话 + 双按钮（腾讯云右侧账户区排布） */
.hdr-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hdr-phone {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.hdr-phone:hover { color: var(--brand); }
.hdr-phone svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }

/* 导航右侧按钮固定宽度，不随浏览器宽度拉伸/收缩 */
.hdr-actions .btn {
  flex: 0 0 auto;
  width: 120px;
  white-space: nowrap;
  justify-content: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s; }

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.32);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26, 115, 232, 0.4); }

.btn-line {
  background: var(--card-strong);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  color: var(--brand);
  border: 1px solid rgba(26, 115, 232, 0.32);
}
.btn-line:hover { background: #fff; border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-2); }

.btn-ghost {
  background: rgba(15, 23, 42, 0.04);
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: #fff; color: var(--brand); border-color: rgba(26, 115, 232, 0.4); }

.btn-lg { padding: 15px 34px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------------- Hero（全屏第一屏 · 视频） ---------------- */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero 自适应文字（类 iOS 壁纸，纯 CSS 反色，稳定可靠）
   用 mix-blend-mode: difference + 白色文字，让导航与 hero 文案对任意明暗的视频底
   都自动反色（深底→浅字，浅底→深字）。不依赖 JS 取色，避免本地文件/跨域污染
   canvas 导致失效，或视频某帧被误判而文字看不清。即使混合未生效，文字也是白色，
   在当前深色 hero 上依然清晰可读。 */

/* 导航栏：透明态覆盖在 hero 上时整条与视频做反色混合；展开菜单/抽屉/实底时关闭 */
.hdr.is-clear:not(:has(.nav-item:hover > .mega)):not(:has(.nav-item:focus-within > .mega)):not(.nav-open) {
  mix-blend-mode: difference;
}
.hdr.is-clear .nav-link,
.hdr.is-clear .hdr-phone,
.hdr.is-clear .nav-caret { color: #fff; }
.hdr.is-clear .nav-link.is-active,
.hdr.is-clear .nav-link:hover { color: #fff; }
.hdr.is-clear .nav-toggle span { background: #fff; }
/* 彩色 logo 在 difference 下随底反色，无需切换反白版 */

/* Hero 文案区：文字直接对视频做反色混合，任意底色都清晰（按钮保持原配色） */
.hero .hero-eyebrow,
.hero .hero-title,
.hero .hero-lead,
.hero .hero-stats,
.hero .scroll-hint { mix-blend-mode: difference; color: #fff; }
.hero .hero-title { text-shadow: none; }
.hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }
.hero .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.16); }
.hero .scroll-hint .mouse { border-color: rgba(255,255,255,0.7); }
/* 统计条：反色下用半透白底即可，保持轻量、不抢戏 */
.hero .hero-stats {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 指标数字与标签强制白色，配合 difference 混合对任意底色自动反色 */
.hero .hero-stat-num { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.hero .hero-stat-label { color: #fff; }
.hero .hero-stat + .hero-stat::before { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.6), transparent); }

/* 科技感：极淡蓝紫网格（仅左侧可见，不压视频） */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(26, 115, 232, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 115, 232, 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.85), transparent 58%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.85), transparent 58%);
}

/* 品牌光晕：文字块后方柔和辉光，提升层次 */
.hero-glow {
  position: absolute;
  z-index: 1;
  left: -4%;
  top: 16%;
  width: 600px;
  height: 600px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(50, 145, 240, 0.26), rgba(105, 125, 245, 0.12) 42%, transparent 70%);
  filter: blur(34px);
}

/* 四角 HUD 角标，强化科技框架感 */
.hero-corner {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(26, 115, 232, 0.5);
  pointer-events: none;
}
.hero-corner.tl { top: 86px; left: 26px; border-right: 0; border-bottom: 0; }
.hero-corner.tr { top: 86px; right: 26px; border-left: 0; border-bottom: 0; }
.hero-corner.bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.hero-corner.br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }

/* 首屏内容顶到最左：脱离版心居中限制，只留跟随视口的左侧边距 */
.hero-in {
  position: relative;
  z-index: 2;
  width: 100%;                                    /* hero 为 flex 容器，需显式占满 */
  max-width: calc(var(--wrap) + var(--navleft) * 2);   /* 超宽屏与版心同宽居中 */
  margin: 0 auto;
  padding-left: var(--navleft);
  padding-right: 44px;
  padding-top: calc(var(--header-h) + 28px);
  padding-bottom: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 46px;
}

/* 文案主体（直接落视频，靠浅色托底保证可读） */
.hero-copy { max-width: 720px; }

/* 眉标题：发光小圆点 + 字间距 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 24px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5); }
  70% { box-shadow: 0 0 0 11px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}

.hero-title {
  color: var(--ink);
  font-size: clamp(48px, 7.4vw, 112px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(247, 250, 254, 0.6);
}
.hero-title .hl {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 渐变分隔线 */
.hero-rule {
  display: block;
  width: 96px;
  height: 5px;
  border-radius: 5px;
  margin: 26px 0 30px;
  background: var(--brand-grad);
  box-shadow: 0 2px 16px rgba(50, 145, 240, 0.55);
}

.grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 2.1;
  margin-bottom: 38px;
}

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-primary { box-shadow: 0 6px 22px rgba(26, 115, 232, 0.42); }
.hero .btn-primary:hover { box-shadow: 0 8px 28px rgba(26, 115, 232, 0.5); }

/* 关键指标：毛玻璃数据条 */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  width: fit-content;
  max-width: 660px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  padding: 22px 6px;
  box-shadow: 0 18px 50px rgba(26, 115, 232, 0.16);
}
.hero-stat {
  position: relative;
  padding: 4px 30px;
  text-align: left;
}
.hero-stat + .hero-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(26, 115, 232, 0.28), transparent);
}
.hero-stat-num {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stat-num i { font-style: normal; font-size: 0.6em; margin-left: 2px; }
.hero-stat-label {
  display: block;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* 首屏底部滚动提示（全屏分屏式） */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  pointer-events: none;
}
.scroll-hint .mouse {
  width: 24px; height: 38px;
  border: 1.5px solid rgba(27, 39, 53, 0.4);
  border-radius: 13px;
  position: relative;
}
.scroll-hint .mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px; height: 8px;
  border-radius: 2px;
  background: var(--brand);
  transform: translateX(-50%);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  70% { opacity: 0; transform: translateX(-50%) translateY(12px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* ---------------- 内容区块（自适应高度） ---------------- */

/* 除 hero 外各板块根据内容自适应高度，不再强制全屏 */
.sec {
  position: relative;
  padding: calc(var(--header-h) + 56px) 0 96px;
}
.sec > .wrap { width: 100%; }

.sec-head { text-align: center; max-width: 860px; margin: 0 auto 76px; }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.kicker.center { text-align: center; }

.sec-title { font-size: clamp(32px, 3.8vw, 54px); font-weight: 650; line-height: 1.28; letter-spacing: -0.01em; }
.sec-sub { color: var(--ink-3); font-size: 17px; margin-top: 14px; }

/* ---------------- 公司介绍（全屏 · 宽幅左右分栏） ---------------- */

.split { display: grid; grid-template-columns: 400px 1fr; gap: 96px; align-items: center; }

.split-title { font-size: clamp(34px, 3.4vw, 52px); font-weight: 650; line-height: 1.28; }

.bar {
  width: 64px; height: 4px;
  border-radius: 2px;
  background: var(--brand-grad);
  margin-top: 24px;
}

.lead-lg { font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; line-height: 1.68; margin-bottom: 20px; }
.lead-lg em {
  font-style: normal;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 2.05; margin-bottom: 34px; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips li {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(26, 115, 232, 0.2);
  padding: 10px 20px;
  border-radius: 999px;
}

/* ---------------- 飞轮链路 ---------------- */

.orbit {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-bottom: 100px;
}
.orbit-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--card-strong);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 30px 56px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.orbit-node:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(26, 115, 232, 0.4); }
.orbit-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.orbit-name { font-size: 23px; font-weight: 650; }
.orbit-map { font-size: 13px; color: var(--ink-3); }

.orbit-line {
  align-self: center;
  width: 120px;
  height: 2px;
  position: relative;
  background: linear-gradient(90deg, rgba(26, 115, 232, 0.15), rgba(105, 125, 245, 0.35), rgba(26, 115, 232, 0.15));
  overflow: hidden;
}
.orbit-line i {
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: flow 2.4s linear infinite;
}
@keyframes flow { to { left: 110%; } }

/* ---------------- 飞轮模块（每个模块亦按全屏节奏排布） ---------------- */

.module { margin-bottom: 120px; }
.module:last-child { margin-bottom: 0; }

.module-head { display: flex; align-items: flex-start; gap: 30px; margin-bottom: 46px; }

.module-num {
  font-size: clamp(52px, 5.4vw, 84px);
  font-weight: 750;
  line-height: 1;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.module-title { font-size: clamp(26px, 2.7vw, 38px); font-weight: 650; margin: 6px 0 8px; }
.module-desc { color: var(--ink-3); font-size: 16px; }

.module-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.module-body-2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.module-body-2 .product { display: flex; flex-direction: column; }
.module-body-2 .product .qr-row { margin-top: auto; }

/* ---------------- 毛玻璃卡片（Acrylic Card） ---------------- */

.gcard {
  background: var(--card);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid rgba(255, 255, 255, 0.75);
  outline: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 34px;
  transition: transform 0.25s, box-shadow 0.25s, outline-color 0.25s;
}
.gcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); outline-color: rgba(26, 115, 232, 0.28); }

.gcard-hi {
  background: linear-gradient(135deg, rgba(26, 115, 232, 0.1), rgba(105, 125, 245, 0.08)), var(--card);
  border-color: rgba(26, 115, 232, 0.3);
}

.gcard-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand);
  margin-bottom: 16px;
}

/* 列表 */
.tick-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 10px;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%231f6feb'/%3E%3C/svg%3E") center/12px no-repeat;
}

.icon-list li {
  display: flex;
  align-items: center; /* 图标与文字纵向居中对齐（原 flex-start 会让 34px 图标比文字行盒低约 6px） */
  gap: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.icon-list li:last-child { margin-bottom: 0; }
.icon-list svg {
  width: 34px; height: 34px;
  flex-shrink: 0;
  padding: 7px;
  color: #30A2FD;
  background: linear-gradient(145deg, rgba(50, 166, 255, 0.18), rgba(108, 125, 245, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  margin-top: 0; /* 原为 2px（顶对齐补偿）；改居中后归零，否则图标仍偏低 2px */
}

/* ============ 01 · GEO ============ */

.geo-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(120deg, rgba(26, 115, 232, 0.14), rgba(105, 125, 245, 0.12));
  border: 1px solid rgba(26, 115, 232, 0.25);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  margin-bottom: 24px;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 650;
}
.geo-banner b { color: var(--brand); }
.geo-banner-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #30A2FD;
  background: linear-gradient(145deg, rgba(50, 166, 255, 0.18), rgba(108, 125, 245, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 13px;
}
.geo-banner-icon svg { width: 23px; height: 23px; }

.geo-tags {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.geo-tags li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--card-strong);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.geo-tags li:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.geo-tags svg {
  width: 38px; height: 38px;
  flex-shrink: 0;
  padding: 8px;
  color: #30A2FD;
  background: linear-gradient(145deg, rgba(50, 166, 255, 0.18), rgba(108, 125, 245, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 11px;
}

/* GEO 价格区 */
.geo-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}

.geo-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: linear-gradient(150deg, rgba(26, 115, 232, 0.12), rgba(105, 125, 245, 0.1)), var(--card);
  border-color: rgba(26, 115, 232, 0.3);
}
.geo-promo-ring {
  width: 68px; height: 68px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  background: var(--brand-grad);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(26, 115, 232, 0.35), inset 0 0 0 5px rgba(255, 255, 255, 0.28);
  margin-bottom: 18px;
}
.geo-promo h4 { font-size: 23px; font-weight: 650; line-height: 1.45; margin-bottom: 10px; }
.geo-promo p { color: var(--ink-2); font-size: 14px; line-height: 1.8; margin-bottom: 18px; }

/* 配图占位（可替换） */
.media-slot {
  margin-top: auto;
  display: grid;
  place-items: center;
  min-height: 120px;
  border: 1.5px dashed rgba(26, 115, 232, 0.35);
  border-radius: var(--radius);
  background: rgba(26, 115, 232, 0.04);
  color: var(--ink-3);
  font-size: 13px;
  text-align: center;
  padding: 14px;
}

/* ============ 02 · 产品卡 ============ */

.product-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.product-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #30A2FD;
  background: linear-gradient(145deg, rgba(50, 166, 255, 0.18), rgba(108, 125, 245, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 13px;
}
.product-icon svg { width: 23px; height: 23px; }
.product-title { font-size: 21px; font-weight: 650; }

.role-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(26, 115, 232, 0.25);
  border-radius: 999px;
  padding: 2px 12px;
  margin-bottom: 4px;
}
.role-tag-purple {
  color: #6c7df5;
  background: rgba(105, 125, 245, 0.1);
  border-color: rgba(105, 125, 245, 0.28);
}

.product-sub { color: var(--ink-3); font-size: 14px; margin-bottom: 12px; }

.qr-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-strong);
}
.qr-slot {
  width: 96px; height: 96px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(26, 115, 232, 0.4);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}
.qr-row p { color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.qr-row b { color: var(--brand); }

/* ============ 价格卡 ============ */

.pricing-wrap { margin-top: 24px; }

.pricing-card { padding: 38px 36px 34px; }

.pricing-title { font-size: 21px; font-weight: 650; margin-bottom: 22px; text-align: center; }

.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 320px;
  max-width: 100%;
  margin: 0 auto 28px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 11px;
  padding: 4px;
}
.tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 10px 0;
  border-radius: 8px;
  transition: color 0.2s;
}
.tab.is-active { color: var(--ink); }
.tab-indicator {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s;
}

/* 价格卡横排：个人版 2 列、企业版 4 列，等宽等高 */
.plans { display: grid; gap: 20px; align-items: stretch; }
#plansPersonal { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
#plansEnterprise { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 价格卡基底：与 .gcard 玻璃卡一致，保证 GEO 与名片两套卡片样式统一 */
.plan {
  background: var(--card);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid rgba(255, 255, 255, 0.75);
  outline: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, outline-color 0.25s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); outline-color: rgba(26, 115, 232, 0.28); }
.plan .btn { margin-top: auto; }
.plan.is-featured {
  border-color: rgba(26, 115, 232, 0.45);
  background: linear-gradient(150deg, rgba(26, 115, 232, 0.09), rgba(105, 125, 245, 0.06)), var(--card-strong);
}
.plan.is-vip {
  border-color: rgba(105, 125, 245, 0.4);
  background: linear-gradient(150deg, rgba(105, 125, 245, 0.08), transparent), var(--card-strong);
}

.plan-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-grad);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 10px;
}

.plan-name { font-size: 16px; font-weight: 650; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 14px; }
.plan-price b {
  font-size: 32px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.plan-price span { font-size: 13px; color: var(--ink-3); }
.plan-price del { font-size: 13px; color: var(--ink-3); margin-left: 8px; opacity: 0.8; }

.plan-features { margin-bottom: 16px; }
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 7px;
}
.plan-features svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--ok); margin-top: 3px; }

.plan-annual {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 22px;
  font-size: 12px;
  font-weight: 600;
  color: #6e5414;
  background: rgba(196, 152, 64, 0.16);
  border: 1px solid rgba(196, 152, 64, 0.42);
  border-radius: 6px;
  padding: 0 10px;
  white-space: nowrap;
  margin-bottom: 12px;
}
.plan-annual:empty {
  background: none;
  border-color: transparent;
}

.pricing-cta { font-size: 13.5px; color: var(--ink-3); text-align: center; margin-top: 18px; }
.pricing-cta a { color: var(--brand); font-weight: 600; border-bottom: 1px solid rgba(26, 115, 232, 0.4); }

/* ============ 03 · 算力一体机 ============ */

.rig {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
  margin-top: 24px;
  background: linear-gradient(120deg, rgba(15, 23, 42, 0.05), transparent 55%), var(--card-strong);
  padding: 40px;
}
.rig-media .media-slot { min-height: 240px; margin-top: 0; }

.rig-badge {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid rgba(26, 115, 232, 0.28);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.rig-body h4 { font-size: 23px; font-weight: 650; margin-bottom: 10px; }
.rig-body > p { color: var(--ink-2); font-size: 15px; line-height: 1.85; margin-bottom: 20px; }

.rig-metric {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(26, 115, 232, 0.07);
  border: 1px solid rgba(26, 115, 232, 0.22);
  border-radius: var(--radius);
  padding: 18px 26px;
}
.rig-metric b {
  font-size: 44px;
  font-weight: 750;
  line-height: 1;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.rig-metric span { font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* 实施路径 */
.sub-head {
  font-size: 18px;
  font-weight: 650;
  margin: 52px 0 26px;
  padding-left: 14px;
  border-left: 3px solid var(--brand);
}

.steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--card-strong);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  padding: 13px 28px 13px 13px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.step i {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-grad);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.step-line {
  flex: 0 0 56px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(26, 115, 232, 0.4) 0 6px, transparent 6px 12px);
}

/* ---------------- 部署方案 ---------------- */

.deploy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.deploy { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 60px; }

/* 卡片：干净白卡（页面底色已是浅灰蓝 #f4f6fb，白卡才能形成设计稿那种「浮出」层次） */
.deploy .gcard {
  display: flex;
  flex-direction: column;
  padding: 64px 88px 62px;
  background: #fff;
  border-color: rgba(15, 23, 42, 0.05);
  outline-color: transparent;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

/* 卡片内中文小标签（覆盖全站 .kicker 的大写 + 宽字距风格） */
.deploy .kicker {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--brand);
  margin-bottom: 14px;
}
.deploy-hi .kicker { color: #10b981; }

.deploy h3 { font-size: 29px; font-weight: 700; letter-spacing: -0.01em; color: #14181f; margin-bottom: 28px; }

.deploy .tick-list { margin-bottom: 28px; }
.deploy .tick-list li {
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: #2b3445;
  margin-bottom: 16px;
}
/* 圆形勾选：左卡蓝、右卡绿（覆盖全站圆角方块 + 写死蓝色的 data-uri 勾） */
.deploy .tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: none;
  border: 1.5px solid rgba(26, 115, 232, 0.5);
}
.deploy .tick-list li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 7px;
  width: 4px;
  height: 8px;
  border: solid var(--brand);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
.deploy-hi .tick-list li::before { border-color: rgba(16, 185, 129, 0.55); }
.deploy-hi .tick-list li::after { border-color: #10b981; }

/* 适用说明：深色、比列表更醒目 */
.deploy-fit { font-size: 17px; font-weight: 500; color: #1f2937; line-height: 1.6; margin-bottom: 36px; }

/* 按钮：整宽、沉底 */
.deploy .btn { width: 100%; margin-top: auto; padding: 15px 24px; font-size: 16px; border-radius: 12px; }
/* 左卡按钮：白底浅边、深色字（非蓝字） */
.deploy .btn-line {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e4e8ef;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.deploy .btn-line:hover {
  background: #fff;
  color: #1f2937;
  border-color: #cdd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
/* 右卡按钮：蓝色渐变实心（.btn-primary 原样，仅补投影） */
.deploy .btn-primary { box-shadow: 0 8px 20px rgba(26, 115, 232, 0.3); }

/* 右卡不再用蓝色渐变底：两卡同底色，仅靠 kicker / 勾选变绿 + 实心按钮区分主次 */

/* ---------------- 标杆案例（横向手风琴 · 一宽四窄，参考腾讯云市场） ----------------
   收起卡 148 宽只露「图标 + 分类 + 序号」，展开卡吃掉剩余空间显示完整内容；
   底图由每张卡的 --case-img 提供（assets/static/cases/case-0N.jpg），
   缺失时自动落到兜底渐变，不会出现裂图。 */

.case-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* 行高由 JS 按「展开卡 16:9 的目标高度」算出并写入 --case-row-h。
     这样 hover 切换时行高恒定，不会随展开动画一起忽高忽低。 */
  height: var(--case-row-h, 410px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 底图按序绑定（路径相对本文件 → 即 assets/static/cases/）。
   ⚠️ 不能把 url() 写进 HTML 的 style="--case-img:..."：CSS 变量在别处被引用时，
   相对路径会按「引用它的样式表」解析，导致 404。换底图直接同名覆盖文件即可。 */
/* 首页标杆案例底图：与案例库保持同一套图源，新图补充前先不显示旧图（只保留渐变氛围底）。
   补图后按下面对应关系恢复即可，或直接同名覆盖 assets/static/cases/ 下的文件：
   1 → case-01、2 → case-02、3 → case-03、4 → case-04 */
.case-row > .case-card:nth-child(1) { --case-img: url("../static/cases/case-01-1.jpg"); }
.case-row > .case-card:nth-child(2) { --case-img: url("../static/cases/case-02-1.jpg"); }
.case-row > .case-card:nth-child(3) { --case-img: url("../static/cases/case-03-1.jpg"); }
.case-row > .case-card:nth-child(4) { --case-img: url("../static/cases/case-04-1.jpg"); }


.case-card {
  position: relative;
  flex: 0 1 148px;
  min-width: 0;
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transition: flex-grow 0.58s cubic-bezier(0.32, 0.72, 0.28, 1), box-shadow 0.4s ease;
}
.case-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.case-card.is-active {
  flex-grow: 1;
  cursor: pointer;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22);
}

/* 底图层：收起态虚化、展开态还原 */
.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    var(--case-img, none),
    radial-gradient(130% 100% at 82% 6%, rgba(50, 166, 255, 0.5) 0%, rgba(50, 166, 255, 0) 58%),
    linear-gradient(150deg, #16264a 0%, #0d1730 62%, #0a1124 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  transform: scale(1.1);
  /* 底图只做轻微柔化，亮度保持接近原图（压暗交给下面那层可控的蒙层，
     这样「图片好看」和「白字可读」可以分开调，不会一压就整张发黑） */
  filter: blur(3px) brightness(0.98) saturate(1.02);
  transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.32, 0.72, 0.28, 1);
}
.case-card.is-active::before {
  filter: blur(0.5px) brightness(1) saturate(1.05);
  transform: scale(1.02);
}
.case-card:not(.is-active):hover::before { filter: blur(2.6px) brightness(1) saturate(1.03); }

/* 压暗遮罩：只在「文字压着的地方」压深，中间尽量透，让底图看得见。
   白字的可读性由「局部压深 + 文字阴影」共同保证，不靠整张压黑。 */
.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 收起卡：两端轻压（顶部托住分类标签、底部托住序号），中段基本透亮 */
  background: linear-gradient(180deg, rgba(8, 13, 27, 0.52) 0%, rgba(8, 13, 27, 0.38) 34%, rgba(8, 13, 27, 0.34) 68%, rgba(8, 13, 27, 0.7) 100%);
  transition: background 0.5s ease;
}
/* 展开卡：压深范围只覆盖「文字实际占的那一栏」+ 底部数据行，右侧留通透区展示底图 */
.case-card.is-active::after {
  background:
    linear-gradient(100deg, rgba(8, 13, 27, 0.62) 0%, rgba(8, 13, 27, 0.46) 50%, rgba(8, 13, 27, 0.16) 80%, rgba(8, 13, 27, 0.04) 100%),
    linear-gradient(180deg, rgba(8, 13, 27, 0.04) 0%, rgba(8, 13, 27, 0.1) 50%, rgba(8, 13, 27, 0.56) 100%),
    radial-gradient(125% 105% at 86% 0%, rgba(50, 166, 255, 0.16) 0%, rgba(50, 166, 255, 0) 58%);
}

/* 收起态 / 展开态两层内容叠在同一张卡上 */
.case-face, .case-full {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 底图若为亮色界面截图，靠阴影托住白字对比度（这样才能把蒙层调透） */
  text-shadow: 0 2px 16px rgba(6, 10, 22, 0.62), 0 1px 3px rgba(6, 10, 22, 0.52);
}

.case-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 14px;
  transition: opacity 0.28s ease 0.12s, visibility 0s linear 0.4s;
}
/* 收起卡：图标与标题放大，竖向窄条也看得清（只作用于 .case-face，不波及展开卡） */
.case-face .case-ic { width: 40px; height: 40px; border-radius: 12px; }
.case-face .case-ic svg { width: 23px; height: 23px; }
.case-face .case-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.case-face .case-name { font-size: 17px; font-weight: 700; }
.case-card.is-active .case-face {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.case-full {
  display: flex;
  flex-direction: column;
  /* 宽度锁定成展开后的最终宽度：切换动画期间文字不再折行跳动 */
  width: var(--case-active-w, 100%);
  padding: 26px 28px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.4s;
}
.case-card.is-active .case-full {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease 0.18s, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s, visibility 0s;
}

/* 卡片头：图标 + 标题 + 分类胶囊 */
.case-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 10px; }
.case-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}
.case-ic svg { width: 19px; height: 19px; display: block; }
.case-head h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 2px 14px rgba(6, 10, 22, 0.45);
}
.case-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(6, 10, 22, 0.5);
}

.case-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
.case-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-lt); box-shadow: 0 0 8px rgba(50, 166, 255, 0.9); }

.case-desc {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.74);
}

/* 展开卡底部：直达案例库详情 */
.case-more {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 16px;
  font-size: 13.5px; font-weight: 600; color: #9ccbff;
  text-decoration: none; transition: color .24s ease, transform .24s ease;
}
.case-more svg { width: 16px; height: 16px; transition: transform .24s ease; }
.case-more:hover { color: #fff; transform: translateY(-1px); }
.case-more:hover svg { transform: translateX(4px); }

/* 底部数据：自动沉底，右侧留出序号位 */
.case-stats {
  margin: auto 0 0;
  padding: 0 50px 0 0;          /* 右侧留出序号位 */
  list-style: none;
  display: flex;
  flex-wrap: wrap;              /* 宽度不够时整项折行，不压缩导致标签断行 */
  gap: 12px clamp(14px, 2.2vw, 28px);
}
.case-stats li { min-width: 0; }
.case-stats b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(6, 10, 22, 0.45);
}
.case-stats em { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
/* 关键指标用亮蓝渐变强调 */
.case-stats li.is-kpi b {
  background: linear-gradient(112deg, #9ad2ff 0%, #4d97f0 62%, #7f8dfb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 序号：收起态在左下；展开态让位给数据 → 移到右下 */
.case-no {
  position: absolute;
  z-index: 3;
  left: 22px;
  bottom: 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}
.case-card.is-active .case-no { left: auto; right: 26px; }

/* ---------------- 技术底座 ---------------- */

.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }

.tech { text-align: center; padding: 40px 30px; }
.tech img { height: 56px; width: auto; margin: 0 auto 20px; }
.tech h3 { font-size: 18px; font-weight: 650; margin-bottom: 8px; }
.tech p { font-size: 13.5px; color: var(--ink-3); line-height: 1.75; }
.tech b { color: var(--brand); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat {
  text-align: center;
  background: var(--card);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 34px 20px;
}
.stat b {
  display: block;
  font-size: 48px;
  font-weight: 750;
  line-height: 1.15;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 13.5px; color: var(--ink-3); }

/* ---------------- CTA（蓝色渐变横幅 · 全站统一组件） ---------------- */

.cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-top: 0;
  color: #fff;
  padding: calc(var(--header-h) + 56px) 0 96px;
  background: var(--brand-grad);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 120% at 82% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(50% 120% at 8% 100%, rgba(105, 125, 245, 0.45), transparent 60%);
}
.cta-in { position: relative; z-index: 1; }
.cta h2 { color: #fff; font-size: clamp(34px, 4.4vw, 60px); font-weight: 650; line-height: 1.3; margin-bottom: 20px; }
.cta h2 span { color: #fff; background: none; -webkit-text-fill-color: #fff; }
.cta .cta-in > p { color: rgba(255, 255, 255, 0.88); font-size: 17px; margin-bottom: 40px; max-width: 680px; margin-left: auto; margin-right: auto; }

/* 白底实心按钮（CTA 用） */
.btn-light {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.26); }

/* ---- CTA 动效层：流星 + AI 元素 ---- */
.cta-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cta-fx .meteor {
  position: absolute; top: 0; left: 0; width: 138px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 56%, #ffffff 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  opacity: 0; transform: translate3d(-20vw, 0, 0);
  animation: meteorSweep 11s ease-in-out infinite; will-change: transform, opacity;
}
.cta-fx .m1 { top: 24%; }
.cta-fx .m2 { top: 50%; width: 104px; animation-delay: 3.1s; }
.cta-fx .m3 { top: 36%; width: 158px; animation-delay: 6s; }
.cta-fx .m4 { top: 64%; width: 92px; animation-delay: 8.4s; }
@keyframes meteorSweep {
  0%   { transform: translate3d(-20vw, 0, 0); opacity: 0; }
  14%  { opacity: 0.66; }
  54%  { opacity: 0.46; }
  90%  { opacity: 0; }
  100% { transform: translate3d(120vw, 0, 0); opacity: 0; }
}
.cta-fx .cta-ai {
  position: absolute; font-weight: 800; font-size: 56px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.1); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  user-select: none; animation: ctaAiFloat 8s ease-in-out infinite;
}
.cta-fx .ai1 { left: 5%; top: 14%; }
.cta-fx .ai2 { right: 7%; bottom: 10%; font-size: 76px; animation-delay: 3s; }
@keyframes ctaAiFloat {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-14px); opacity: 1; }
}
.cta-net {
  position: absolute; right: 3%; top: 50%; width: clamp(200px, 23vw, 320px);
  transform: translateY(-50%); opacity: 0.5;
}
.cta-net .net-nodes circle { transform-box: fill-box; transform-origin: center; animation: netBlink 2.6s ease-in-out infinite; }
.cta-net .net-nodes circle:nth-child(2n) { animation-delay: 0.45s; }
.cta-net .net-nodes circle:nth-child(3n) { animation-delay: 0.95s; }
@keyframes netBlink {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* CTA 响应式（全站统一） */
@media (max-width: 900px) {
  .cta-net { display: none; }
  .cta-fx .cta-ai { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-fx .meteor, .cta-fx .cta-ai, .cta-net .net-nodes circle { animation: none !important; }
  .cta-fx .meteor { opacity: 0.35; }
}

/* ---------------- 页脚（深色底） ---------------- */

.ftr {
  border-top: 1px solid rgba(255,255,255,.08);
  background: #0d1424;
  padding: 48px 0 32px;
}
.ftr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.ftr-brand img {
  /* 使用 logo2.png（品牌方提供的反白版），不再用滤镜强制反白，保留原始色值层次 */
  height: 32px; width: auto; margin-bottom: 10px;
  opacity: .94;
}
.ftr-brand p { font-size: 13px; color: rgba(255,255,255,.55); }

.ftr-phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700;
  color: #e8ecf4;
  font-variant-numeric: tabular-nums;
}
.ftr-phone img { height: 20px; width: auto; filter: brightness(0) invert(1) opacity(.8); }
.ftr-phone:hover { color: #6bb6ff; }

.ftr-copy {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(255,255,255,.42);
  text-align: center;
}

/* ---------------- 预约弹窗（左右分栏：左联系信息 / 右在线留言） ---------------- */

.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: 92vh;
  overflow: hidden auto;
  display: grid;
  grid-template-columns: 368px minmax(0, 1fr);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(9, 26, 62, 0.34);
  animation: modal-in 0.28s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* --- 左：蓝罩楼宇照 + 联系信息 --- */
.modal-side {
  position: relative;
  padding: 46px 34px;
  color: #fff;
  background-color: #0d3a8e;
  background-image:
    linear-gradient(165deg, rgba(26, 96, 214, 0.22), rgba(9, 40, 110, 0.4)),
    url("../static/modal-building.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.modal-side-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0 0 40px;
}
.modal-side-list { list-style: none; margin: 0; padding: 0; }
.modal-side-list > li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.modal-side-list > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.mico {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}
.mico svg { width: 25px; height: 25px; }
.mtxt { min-width: 0; }
.mlab { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.84); margin: 0 0 7px; }
.mval { font-size: 14.5px; font-weight: 500; line-height: 1.62; color: #fff; margin: 0; }
.mval-lg { font-size: 23px; font-weight: 700; letter-spacing: 0.4px; line-height: 1.24; margin: 0 0 3px; }
.msub { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin: 0; }

/* --- 右：在线留言表单 --- */
.modal-main { padding: 42px 46px 24px; min-width: 0; }
.modal-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 24px;
}
.modal-head h3 { font-size: 25px; font-weight: 700; color: #14181f; margin: 0; }
.modal-head p { font-size: 13.5px; color: #8a93a6; margin: 0; }

.modal-close {
  position: absolute;
  top: 24px; right: 26px;
  z-index: 2;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: #7b8494;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: rgba(15, 23, 42, 0.06); color: #14181f; }
.modal-close svg { width: 19px; height: 19px; }

.modal-form { margin: 0; }
.modal-form .frow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-bottom: 18px;
}
.modal-form label { display: block; font-size: 13.5px; font-weight: 600; color: #374151; margin: 0; }
.modal-form input,
.modal-form select,
.modal-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background-color: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-form input,
.modal-form select { height: 44px; padding: 0 14px; }
.modal-form textarea { padding: 11px 14px; min-height: 84px; line-height: 1.6; resize: vertical; }
.modal-form input::placeholder,
.modal-form textarea::placeholder { color: #9aa3b2; }
.modal-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}
.modal-form .flabel-full { display: block; margin-bottom: 20px; }

.modal-form .modal-submit {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  gap: 10px;
  background: var(--brand-grad);
  box-shadow: 0 10px 24px rgba(26, 115, 232, 0.26);
}
.modal-form .modal-submit:hover {
  transform: none;
  filter: brightness(1.05);
  box-shadow: 0 14px 30px rgba(26, 115, 232, 0.32);
}
.modal-submit .ma { font-weight: 400; opacity: 0.9; }
.modal-submit .mresp { font-weight: 500; opacity: 0.92; }

.modal-tip { font-size: 13px; font-weight: 400; color: var(--brand); text-align: center; margin: 12px 0 0; }
.modal-tip.is-ok { color: #10b981; }
.modal-tip[hidden] { display: none; }

.modal-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: #9aa3b2;
  margin: 14px 0 0;
}
.modal-privacy svg { width: 15px; height: 15px; flex: 0 0 auto; }

@media (max-width: 980px) {
  .modal-panel { grid-template-columns: 306px minmax(0, 1fr); }
  .modal-side { padding: 38px 26px; }
  .modal-main { padding: 38px 30px 22px; }
  .modal-side-title { font-size: 22px; margin-bottom: 30px; }
}
@media (max-width: 780px) {
  .modal { padding: 14px; }
  .modal-panel { grid-template-columns: minmax(0, 1fr); max-height: 94vh; }
  .modal-side { padding: 26px 22px 22px; }
  .modal-side-title { font-size: 20px; margin-bottom: 18px; }
  .modal-side-list > li { padding-bottom: 13px; margin-bottom: 13px; gap: 13px; }
  .mico { width: 40px; height: 40px; }
  .mico svg { width: 19px; height: 19px; }
  .mlab { font-size: 12.5px; margin-bottom: 5px; }
  .mval { font-size: 13.5px; }
  .mval-lg { font-size: 19px; margin-bottom: 2px; }
  .msub { font-size: 11.5px; }
  .modal-main { padding: 26px 22px 20px; }
  .modal-head { margin-bottom: 20px; }
  .modal-head h3 { font-size: 21px; }
  .modal-head p { font-size: 13px; }
  .modal-form .frow { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
  .modal-close { top: 12px; right: 12px; color: rgba(255, 255, 255, 0.85); }
}

/* ---------------- 滚动进场 ---------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0, 0.2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------- 动效降级 ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 1080px) {
  /* 中宽屏：内容自适应，hero 保持全屏（左右留白统一走 --navleft，不再单独收窄） */
  .sec { padding: 72px 0 80px; }
  .cta { padding: calc(var(--header-h) + 48px) 0 80px; }
  .hero { height: 100vh; height: 100svh; }
  .scroll-hint { display: none; }

  /* 移动端下拉菜单（默认收起，点汉堡展开） */
  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: var(--acrylic);
    backdrop-filter: var(--acrylic);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    padding: 12px 20px 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .hdr.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  /* 抽屉关闭时 nav 是 visibility:hidden，此前 .mega 强行 visible 会让下拉面板成为
     看不见却仍可点击的透明浮层，盖住页面顶部内容；改为仅在抽屉展开时才可见 */
  .hdr.nav-open .mega { visibility: visible; }
  .nav-toggle { display: flex; }

  /* 移动端：下拉面板改为抽屉内静态展开的子层级 */
  .nav-item { display: block; }
  .nav-item > .nav-link { display: block; }
  .nav-caret { display: none; }
  .mega {
    position: static;
    opacity: 1; transform: none;
    padding: 2px 0 10px 16px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--border);
    box-shadow: none;
  }
  .mega--prod .mega-in,
  .mega--sol .mega-in { display: block; max-width: none; }
  .mega-col + .mega-col { margin-top: 16px; }
  .mega-head { font-size: 15px; }
  .mega-chev { width: 13px; height: 13px; }
  .mega-desc { font-size: 12px; }
  .mega-list { margin-top: 8px; }
  .mega-list a { padding: 8px 10px; margin: 0; font-size: 14px; border-radius: 8px; }
  .mega-list a:hover { background: rgba(26, 115, 232, 0.07); }
  .mega-list--grid { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
  .mega-list--grid a { padding: 9px 10px; margin: 0; border-radius: 8px; }
  .mega-list--grid .mi-t { font-size: 14px; }
  .mega-list--grid .mi-s { font-size: 12px; margin-top: 2px; }
  .hdr-actions { margin-left: auto; gap: 10px; }
  .hdr-in { gap: 16px; }

  .geo-pricing { grid-template-columns: 1fr 1fr; }
  .geo-promo { grid-column: 1 / -1; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  /* 标杆案例：中宽屏收窄收起卡并压低整体高度 */
  .case-row { gap: 10px; }
  .case-card { flex-basis: 132px; }
  .case-full { padding: 22px 22px 20px; }
  .case-head h3 { font-size: 19px; }
  .case-desc { margin-top: 10px; font-size: 13px; }
  /* 收起卡内距/图标同步收小，保证「绿色低碳」这类 4 字分类仍与图标同行 */
  .case-face { padding: 18px 13px 16px; }
  .case-face .case-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .case-face .case-ic { width: 36px; height: 36px; border-radius: 11px; }
  .case-face .case-ic svg { width: 20px; height: 20px; }
  .case-face .case-name { font-size: 15px; }
  /* 数据行改 3 等分栅格：窄卡下标签整体折行对齐，不再出现孤零零的第三项 */
  .case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-right: 44px; }
  .case-stats b { font-size: 20px; }
  .case-stats em { font-size: 11px; }
  .module-body, .module-body-2 { grid-template-columns: 1fr; }
  #plansEnterprise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .rig { grid-template-columns: 1fr; }
}

/* 标杆案例：≤1000 展开卡已撑不出 16:9（宽度不足 → 高度只能由内容兜底），提前转为纵向堆叠 */
@media (max-width: 1000px) {
  /* 标杆案例：窄屏放弃手风琴，改为纵向堆叠、全部展开 */
  .case-row { display: block; height: auto; }
  .case-card { margin-bottom: 16px; border-radius: 18px; }
  /* 窄屏纵向堆叠：取消 16:9 与最小高度，避免比例反推宽度导致溢出 */
  .case-row > .case-card { aspect-ratio: auto; min-height: 0; }
  .case-card:last-child { margin-bottom: 0; }
  /* 移动端卡片文字横贯整卡 → 底图轻微柔化即可，压暗交给蒙层（文字所在区域才需要）
     ⚠️ 选择器必须写成 .case-row > .case-card，才能压过桌面的 .case-card.is-active::before/::after
     （两者优先级相同，靠书写顺序取胜），否则首张卡会套用桌面那套「右浅」蒙层，
     横贯整卡的右侧文字就会压在几乎不压暗的底图上。 */
  .case-row > .case-card::before { filter: blur(1.4px) brightness(0.98) saturate(1.02); transform: scale(1.05); }
  .case-row > .case-card::after {
    background: linear-gradient(180deg, rgba(8, 13, 27, 0.48) 0%, rgba(8, 13, 27, 0.44) 44%, rgba(8, 13, 27, 0.72) 100%);
  }
  .case-face { display: none; }
  .case-full {
    position: relative;
    inset: auto;
    min-height: 232px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .case-head h3 { font-size: 18px; }
  .case-desc { font-size: 13px; }
  .case-stats { padding-right: 40px; gap: 12px; }
  .case-no { left: auto; right: 20px; bottom: 18px; }
}

@media (max-width: 860px) {
  :root { --navleft: 16px; }

  /* 窄屏导航只留主按钮，电话与次按钮收起 */
  .hdr-phone, .hdr-actions .btn-line { display: none; }
  .hdr-actions { gap: 0; }

  .hero-in { padding-left: 16px; padding-right: 16px; padding-bottom: 64px; }
  /* 窄屏标题不换行，缩小字号避免横向溢出 */
  .hero-title { font-size: clamp(32px, 9.5vw, 60px); }

  /* 窄屏指标条：两列网格，去掉竖向分隔线 */
  .hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 16px 0; padding: 18px 6px; }
  .hero-stat { padding: 6px 18px; text-align: center; }
  .hero-stat + .hero-stat::before { display: none; }
  .hero-corner { display: none; }
  #plansPersonal, #plansEnterprise { grid-template-columns: 1fr; }
  .pricing-card { padding: 28px 20px 26px; }
  /* 窄屏文字铺满，白纱整体加深一档保证可读 */
  .hero-mask {
    background:
      linear-gradient(90deg, rgba(247, 250, 254, 0.85) 0%, rgba(247, 250, 254, 0.55) 45%, rgba(247, 250, 254, 0.1) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(244, 246, 251, 0) 12%);
  }

  .geo-tags { grid-template-columns: repeat(2, 1fr); }
  .geo-pricing { grid-template-columns: 1fr; }

  /* 标杆案例：窄屏放弃手风琴，改为纵向堆叠、全部展开 */
  .case-row { display: block; height: auto; }
  .case-card { margin-bottom: 16px; border-radius: 18px; }
  /* 窄屏纵向堆叠：取消 16:9 与最小高度，避免比例反推宽度导致溢出 */
  .case-row > .case-card { aspect-ratio: auto; min-height: 0; }
  .case-card:last-child { margin-bottom: 0; }
  /* 移动端卡片文字横贯整卡 → 底图轻微柔化即可，压暗交给蒙层（文字所在区域才需要）
     ⚠️ 选择器必须写成 .case-row > .case-card，才能压过桌面的 .case-card.is-active::before/::after
     （两者优先级相同，靠书写顺序取胜），否则首张卡会套用桌面那套「右浅」蒙层，
     横贯整卡的右侧文字就会压在几乎不压暗的底图上。 */
  .case-row > .case-card::before { filter: blur(1.4px) brightness(0.98) saturate(1.02); transform: scale(1.05); }
  .case-row > .case-card::after {
    background: linear-gradient(180deg, rgba(8, 13, 27, 0.48) 0%, rgba(8, 13, 27, 0.44) 44%, rgba(8, 13, 27, 0.72) 100%);
  }
  .case-face { display: none; }
  .case-full {
    position: relative;
    inset: auto;
    min-height: 232px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .case-head h3 { font-size: 18px; }
  .case-desc { font-size: 13px; }
  .case-stats { padding-right: 40px; gap: 12px; }
  .case-no { left: auto; right: 20px; bottom: 18px; }
  .deploy-grid { grid-template-columns: 1fr; }
  .deploy { padding-left: 40px; padding-right: 40px; }
  .deploy .gcard { padding-left: 44px; padding-right: 44px; }
  .stats { grid-template-columns: 1fr; }

  .orbit { flex-direction: column; align-items: stretch; gap: 0; }
  .orbit-node { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 18px 22px; }
  .orbit-line { width: 2px; height: 36px; margin: 0 auto; }
  .orbit-line i { animation: flow-v 2.4s linear infinite; }
  @keyframes flow-v { to { top: 110%; } }

  .module-head { flex-direction: column; gap: 10px; }
  .steps { justify-content: flex-start; }
  .step-line { display: none; }
  .steps { flex-direction: column; align-items: stretch; }
  .step { justify-content: flex-start; }
}

/* ================= 客服浮动按钮 ================= */
.cs-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font: 600 15px/1.1 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.36);
  -webkit-backdrop-filter: var(--acrylic);
  backdrop-filter: var(--acrylic);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: csFabIn .5s ease both;
}
.cs-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 115, 232, 0.46);
}
.cs-fab:active { transform: translateY(-1px) scale(.99); }

.cs-fab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  flex-shrink: 0;
}
.cs-fab-ico svg { width: 18px; height: 18px; }

/* 在线绿点（呼应文案“我们在线”） */
.cs-fab-on {
  position: absolute;
  top: 8px; left: 33px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2ee06a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}
.cs-fab-on::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #2ee06a;
  animation: csPulse 1.8s ease-out infinite;
}
@keyframes csFabIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes csPulse {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 移动端：紧凑；极窄屏只留图标 */
@media (max-width: 768px) {
  .cs-fab { right: 14px; bottom: 14px; padding: 11px 16px 11px 12px; gap: 8px; }
  .cs-fab-txt { font-size: 13px; }
}
@media (max-width: 420px) {
  .cs-fab { padding: 12px; }
  .cs-fab-txt { display: none; }
  .cs-fab-on { top: 7px; left: 31px; }
}

/* ================= 客服面板 ================= */
.cs-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 96;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  transform-origin: bottom right;
  animation: csPanelIn .28s cubic-bezier(.2, .8, .2, 1) both;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.cs-panel[hidden] { display: none; }
@keyframes csPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 13px 16px;
  background: var(--brand-grad);
  color: #fff;
}
.cs-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
}
.cs-panel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ee06a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
  animation: csPulse 1.8s ease-out infinite;
}
.cs-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.cs-panel-close:hover { background: rgba(255, 255, 255, .3); }
.cs-panel-close svg { width: 15px; height: 15px; }

.cs-panel-body { padding: 16px; }
.cs-panel-tip {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  background: rgba(26, 115, 232, .06);
  border-radius: 10px;
  padding: 10px 12px;
}

.cs-form .cs-field {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.cs-form .cs-field input,
.cs-form .cs-field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
}
.cs-form .cs-field input:focus,
.cs-form .cs-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}

.cs-upload-label { display: block; }
.cs-upload-zone { margin-top: 6px; }
.cs-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, .6);
  color: var(--ink-2);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.cs-upload-btn:hover { border-color: var(--brand); color: var(--brand); }
.cs-upload-btn svg { width: 16px; height: 16px; }
.cs-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cs-thumb {
  position: relative;
  width: 58px; height: 58px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
}
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, .6);
  color: #fff;
  padding: 0;
  cursor: pointer;
}
.cs-thumb-del svg { width: 11px; height: 11px; }
.cs-upload-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.cs-form .btn { margin-top: 4px; }

/* ============================================================
   全站交互体验增强
   统一键盘焦点、触控反馈、按压状态与动效降级，不改变业务结构。
   ============================================================ */
::selection { color: #fff; background: rgba(26, 115, 232, .82); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(26, 115, 232, .34);
  outline-offset: 3px;
  border-radius: 8px;
}

:where(a, button) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn,
.nav-link,
.mega-list a,
.mega-head,
.ftr a,
.cs-fab,
.cs-panel-close,
.modal-close {
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.btn:active,
.news-tab:active,
.news-more:active,
.cs-fab:active,
.modal-close:active {
  transform: translateY(1px) scale(.985);
}

.nav-link { position: relative; }
.nav-link::after { display: none; }

body.is-scroll-locked { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  :where(.gcard, .fcard, .pcard, .rcard, .case-card) {
    transition-duration: .28s;
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
  }
}

@media (max-width: 1080px) {
  .hdr.nav-open .nav { overscroll-behavior: contain; }
  .hdr.nav-open .nav-link { min-height: 46px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.cs-form-tip {
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: center;
  margin: 12px 0 0;
  min-height: 16px;
}
.cs-form-tip.is-ok { color: var(--ok); }
.cs-form-tip.is-err { color: #e5484d; }

/* 客服面板移动端适配 */
@media (max-width: 768px) {
  .cs-panel { right: 14px; bottom: 82px; width: calc(100vw - 28px); max-width: 360px; }
}
@media (max-width: 420px) {
  .cs-panel { right: 10px; left: 10px; bottom: 76px; width: auto; max-width: none; }
}