/* ==========================================================================
   爱智星 AIDEASTAR — 官方网站样式
   广州爱迪凯兴信息科技有限公司
   Light theme · 响应式 · 无外部依赖（可离线打开）
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #0b1b2b;
  --ink-2: #1c3348;
  --body: #4a5d71;
  --muted: #7c8fa3;
  --line: #e3ebf4;
  --line-soft: #eff4f9;
  --bg: #ffffff;
  --bg-soft: #f4f8fc;
  --bg-blue: #eef4fb;
  --deep: #08243f;
  --deep-2: #0c3055;

  --brand: #14498f;
  --brand-dark: #0b2c58;
  --brand-light: #2a76d2;
  --cyan: #16b0dd;
  --logo-slate: #69819a;
  --gold: #b8862a;

  /* 强调橙：文字选中色块、导航当前页下划线、导航悬停色块（2026-09-24 加） */
  --accent: #ea6a12;          /* 白底对比度 3.07:1 → 可作图形/下划线用 */
  --accent-dark: #c4550c;     /* 橙色文字用（与白底 4.4:1） */
  --accent-soft: #fff4ea;     /* 浅橙底（悬停色块） */

  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-xl: 30px;

  --shadow-s: 0 1px 2px rgba(11, 44, 88, .05), 0 4px 14px rgba(11, 44, 88, .05);
  --shadow: 0 2px 4px rgba(11, 44, 88, .05), 0 16px 40px rgba(11, 44, 88, .08);
  --shadow-l: 0 30px 70px -20px rgba(11, 44, 88, .28);

  --ff: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
        "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-num: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 72px;
  --maxw: 1240px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.85;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.28; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; }
/* 拖动选中文字后的色块：橙色（默认是浏览器蓝） */
::selection { background: var(--accent); color: #fff; }

/* ---------- 3. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-wide { max-width: 1440px; }
/* 锚点跳转时避开吸顶导航与页内导航（--sticky-h 由 main.js 实测写入，兜底 92px） */
[id] { scroll-margin-top: var(--sticky-h, 92px); }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-soft { background: var(--bg-soft); }
.section-blue { background: linear-gradient(180deg, #f2f7fd 0%, #ffffff 100%); }
.section-deep { background: var(--deep); color: #c6d6e6; }
.section-deep h2, .section-deep h3, .section-deep h4 { color: #fff; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.grid { display: grid; gap: 28px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.split-flip .split-media { order: -1; }

/* ---------- 4. Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); font-family: var(--ff-num); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand); border-radius: 2px; }
.section-deep .eyebrow { color: #7fc4f5; }
.section-deep .eyebrow::before { background: #7fc4f5; }
.h-1 { font-size: clamp(2.1rem, 4.3vw, 3.5rem); }
.h-2 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); }
.h-3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.lead { font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--body); max-width: 62ch; line-height: 1.9; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; line-height: 1.75; }
.mono { font-family: var(--ff-num); font-variant-numeric: tabular-nums; }
.text-brand { color: var(--brand); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(20, 73, 143, .6); }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(20, 73, 143, .65); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink-2); background: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .4); }
.btn-outline-light { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.link-more {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--brand); font-size: 14.5px;
}
.link-more::after { content: "→"; transition: transform .3s var(--ease); }
.link-more:hover::after { transform: translateX(5px); }

/* ---------- 6. Header ---------- */
.topbar {
  background: var(--deep); color: #a9c2da; font-size: 13px;
  font-family: var(--ff-num); letter-spacing: .02em;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 20px; }
.topbar a:hover { color: #fff; }
.topbar .tb-left { display: flex; gap: 22px; align-items: center; }
.topbar .tb-tag { color: #7fc4f5; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 30px -22px rgba(11, 44, 88, .5); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
/* 【已停用 2026-09-24】logo 右侧两行小字已按用户要求从 6 页 HTML 删除。
   规则保留，粘回 <span class="brand-sub">…</span> 即复活；原文见
   tools/已删除区块-页头品牌副标题-备份.md */
.brand-sub {
  padding-left: 14px; border-left: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; color: var(--muted); letter-spacing: .02em;
}
/* 导航撑满 logo 与右侧电话/按钮之间的整段空间：内部等距分布，
   任意视口宽度都自动适配，不写死像素值（2026-09-24）。
   字号连续退档：6 项文字共 23 个字宽 ≈ 23em，加左右内边距 6×32＝192px，
   可得「放得下」的下限——页头三条两侧固定缝各 24px、logo 118px、
   右侧电话+按钮 229px，故可用宽 ≈ 视口宽 − 443px。
   取 1.45vw 使 ≥1241px 时稳定在 18px，1024px 档（导航即将隐藏）退到 15.5px 下限。 */
.nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: space-between; }
.nav a {
  position: relative; padding: 10px 16px; border-radius: 999px;
  font-size: clamp(15.5px, 1.45vw, 18px); font-weight: 500; color: var(--ink-2);
  transition: color .22s, background-color .22s;
}
.nav a:hover { color: var(--brand); background: var(--accent-soft); }
.nav a.active { color: var(--brand); font-weight: 600; }
.nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: translateX(-50%);
}
.header-cta { display: flex; align-items: center; gap: 14px; }
.header-tel { font-family: var(--ff-num); font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: .01em; }
.header-tel small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .06em; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 19px; height: 2px; background: var(--ink-2); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 88;
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 24px 28px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .32s var(--ease), opacity .22s;
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.mobile-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.mobile-panel a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line-soft); font-size: 16px; color: var(--ink-2); font-weight: 500; }
.mobile-panel a:last-of-type { border-bottom: 0; }
.mobile-panel .btn { width: 100%; margin-top: 18px; }

/* ---------- 7. Hero（首页 · 科创空间实景轮播大图） ---------- */
.hero { position: relative; background: var(--bg-soft); padding-block: 26px 56px; }

/* 7.1 图框：宽度由外层 .wrap 决定，左右边界与正文平齐；圆角卡片承载轮播与文案 */
.hero-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-l);
  background: var(--deep); color: #d6e6f5;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
/* 非激活 slide 用 opacity 隐去，但【不能加 visibility:hidden】——
   浏览器不会为 visibility:hidden 的 <video> 推进解码，
   会导致切到该张时 readyState 恒为 0、只有静态图不动（2026-10-11 实测）。
   改用 pointer-events:none 屏蔽误触，视觉与交互都正确。 */
.hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .95s var(--ease);
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide .hero-poster {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* 蒙板变薄后补一点鲜艳度：轻微加饱和 + 抬亮 4%（评测脚本已把这 4% 计入对比度） */
  filter: saturate(1.12) contrast(1.02) brightness(1.04);
  transform: scale(1.06); transition: transform 9s linear;
}
.hero-slide.is-active .hero-poster { transform: scale(1); }

/* Hero 视频（2026-10-11）：与 .hero-poster 同层堆叠，视频就位后海报淡出 */
.hero-video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  /* 与海报同一套色彩处理，保证切换时色调不跳变 */
  filter: saturate(1.12) contrast(1.02) brightness(1.04);
  opacity: 0; transition: opacity .6s var(--ease);
  pointer-events: none;
  /* 视频已就绪时（.is-ready 由 main.js 添加）淡入 */
}
.hero-video.is-ready { opacity: 1; }
.hero-slide .hero-poster { position: absolute; inset: 0; z-index: 0; }

/* 7.2 遮罩：文案改成「顶带 + 底带」两段后，蒙板也跟着拆成两条带，中间整片放开。
   【为什么】2026-09-24 把标签/按钮从标题下方移到了图框底部，文字不再是一大片，
      而是分成两处（实测）：
        顶带  h1        y 8.9%~28.8%，横向只到 x 52.4%
        底带  tags      y 77.7%~83.4%
              btn       y 86.1%~93.9%（横向只到 37.5%）
              cap 字幕  y 86.3%~93.9%（右侧 81.6%~93.6%）
      => ① ::after  = 顶部文案带（只覆盖 y 0~36%，横向渐变到 80% 处归零）；
         ② ::before = 底边文案带（y 60% 起渐入，托住左下标签/按钮与右下字幕）。
      中间 y 36%~60% 完全不加蒙板 —— 这是「画面鲜艳明亮」的主要来源。
   【数值】三断点（1440 / 1180 / 1024）都用 tools/13_hero_mask_eval.py 实测过：
      整幅感知亮度 110.0 / 109.2 / 110.3（上一版 v13 是 107.1 / 106.3 / 107.4），
      各文字行对比度反而更好（h1 白字 4.77~4.81，tags 5.10~6.32，btn 8.85~9.49，
      cap 字幕 4.56~6.20），全部达标。
      ★ 两条带的横向曲线与底带纵向曲线**三断点共用**，只有顶带的关闭位置
        （inset 的第三个值）在 ≤1180 时放宽容一点，因为图框更扁、h1 落得更低。
   【改前必做】改文案宽度 / padding / 行数后，先重跑 tools/hero-probe.html 重新量行盒，
      再用 tools/13_hero_mask_eval.py 复核；不要凭感觉调。 */

/* 7.2a 底边文案带：覆盖 y 60%~100%，全宽（右下字幕与左下标签/按钮都在其中） */
.hero-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 20, 36, 0) 60%, rgba(3, 20, 36, .30) 72%,
                                     rgba(3, 20, 36, .54) 82%, rgba(3, 20, 36, .66) 92%,
                                     rgba(3, 20, 36, .70) 100%);
}
/* 7.2b 顶部文案带：只覆盖 y 0~36%（inset 下边距 64%），横向渐变在 52% 后放开 */
.hero-frame::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: 0 0 64% 0;
  background: linear-gradient(92deg,
    rgba(3, 20, 36, .62) 0%, rgba(3, 20, 36, .62) 16%, rgba(3, 20, 36, .60) 32%,
    rgba(3, 20, 36, .56) 44%, rgba(3, 20, 36, .48) 52%, rgba(3, 20, 36, .34) 60%,
    rgba(3, 20, 36, .17) 68%, rgba(3, 20, 36, .05) 74%, rgba(3, 20, 36, 0) 80%);
  /* 纵向用 mask 做软边（不要把 inset 直接压小，那样上下会留硬边） */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* 7.3 内容：上下两端分布 —— 顶部只放标题，标签/按钮与轮播控件落到图框底部
   （2026-09-24 调整：原顶部把「SINCE 2011 徽标 + 标题 + 标签 + 按钮」四层叠在一起，
     中间大片实景被挡住；现改为 上=标题 / 下=标签+按钮，中间整片放开） */
.hero-inner {
  position: relative; z-index: 2;
  min-height: clamp(560px, 52vw, 720px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 38px;
  padding: 64px 76px 44px;
}
.hero-copy { max-width: 640px; }
.hero-copy h1 {
  color: #fff; margin-bottom: 0;   /* 标题下方已无内容，去掉原来的 22px 下边距 */
  /* 收紧 + 加深：蒙板变薄后标题会落在接近纯白的顶棚上（第 3 张实景就是），
     靠「小半径紧投影」把字形边缘从亮底上拎出来；半径不要放大，亮底上会糊成一团。 */
  text-shadow: 0 1px 3px rgba(3, 20, 36, .8), 0 2px 10px rgba(3, 20, 36, .52);
}
.hero-copy h1 em { font-style: normal; color: #8ecdfa; }
/* 首页 Hero 里的公司简介段落已于 2026-09-23 按用户要求删除（它压在实景上影响主图观感，
   内容在公司简介页 #profile 有完整版本）。此规则暂留，便于需要时把 <p class="lead"> 粘回去；
   没有它的话，恢复后段落会沿用全站 .lead 的深灰字色，在深色蒙板上读不清。 */
.hero-copy .lead {
  color: rgba(234, 244, 255, .96); max-width: 56ch; font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(3, 20, 36, .55), 0 0 12px rgba(3, 20, 36, .3);
}
/* 【已停用】.hero-badge —— 2026-09-24 按用户要求从 Hero 删除，规则保留以便还原 */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px;
  background: rgba(6, 22, 40, .44); border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px; font-size: 13px; color: #eaf4fd; margin-bottom: 26px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-badge b { background: #fff; color: var(--brand); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; font-family: var(--ff-num); }

/* 标签 + 按钮：2026-09-24 起位于图框底部左侧（原来紧跟标题、在图框上半部）。
   行内间距交给父级 .hero-actions 的 gap，本身不再带外边距。 */
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-tags span {
  padding: 7px 15px; background: rgba(6, 22, 40, .44); border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px; font-size: 13.5px; color: #eaf4fd;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* 7.4 底部信息条：左侧「标签 + 按钮」/ 右侧「圆点 + 当前实景名」 */
.hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* 【已停用】.hero-stats / .hero-stat / .hf-num / .hf-txt —— 2026-09-24 按用户要求删除图框内的
   500+ / 1000+ 数据卡（数据在紧随其后的 #stat-strip 数据看板里仍有完整呈现）。规则保留以便还原。 */
.hero-stats { display: flex; gap: 14px; }
.hero-stat {
  display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-radius: 15px;
  background: rgba(6, 22, 40, .44); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-stat .hf-num { font-family: var(--ff-num); font-size: 23px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.hero-stat .hf-txt { font-size: 12.5px; line-height: 1.5; color: rgba(228, 240, 252, .92); }
.hero-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.hero-cap { text-align: right; color: #fff; }
.hero-cap b {
  display: block; font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(3, 20, 36, .62), 0 2px 14px rgba(3, 20, 36, .5);
}
.hero-cap span {
  display: block; margin-top: 3px; font-size: 12.5px; color: rgba(228, 240, 252, .92);
  text-shadow: 0 1px 2px rgba(3, 20, 36, .6), 0 0 10px rgba(3, 20, 36, .4);
}
.hero-cap.swap > b, .hero-cap.swap > span { animation: hero-cap-in .55s var(--ease) both; }
@keyframes hero-cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 7.5 左右箭头（无 JS 时不出现，避免死按钮） */
.hero-arrow {
  display: none; position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(9, 34, 58, .42); border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
}
.js .hero-arrow { display: flex; }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .62); }
.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }
.hero-dots { display: none; gap: 9px; }
.js .hero-dots { display: flex; }
.hero-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .42); transition: width .35s var(--ease), background-color .35s; }
.hero-dot:hover { background: rgba(255, 255, 255, .78); }
.hero-dot.is-active { width: 30px; background: #fff; }
/* 图框内的描边按钮：补一层深色玻璃底，避免白字落在亮部 */
.hero-frame .btn-outline-light {
  background: rgba(6, 22, 40, .4); border-color: rgba(255, 255, 255, .42);
}
.hero-frame .btn-outline-light:hover { background: rgba(255, 255, 255, .18); }

/* ---------- 8. Stat strip ---------- */
.stat-strip { background: #fff; border-block: 1px solid var(--line); }
.stat-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 44px 26px; border-right: 1px solid var(--line); position: relative;
  transition: background-color .3s;
}
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--bg-soft); }
.stat-num { font-family: var(--ff-num); font-size: clamp(2rem, 3.1vw, 2.9rem); font-weight: 800; color: var(--brand); line-height: 1; letter-spacing: -.03em; }
.stat-num sup { font-size: .5em; font-weight: 700; top: -.75em; margin-left: 1px; }
.stat-label { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.stat-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- 9. Business cards ---------- */
.biz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.biz {
  position: relative; padding: 38px 30px 42px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); transition: background-color .35s var(--ease);
}
.biz:last-child { border-right: 0; }
.biz:hover { background: var(--bg-soft); }
.biz-idx { font-family: var(--ff-num); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }
.biz h3 { margin: 22px 0 12px; font-size: 1.22rem; }
.biz p { font-size: 14.2px; line-height: 1.85; }
.biz ul { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.biz ul li { font-size: 12.5px; padding: 4px 11px; background: var(--bg-blue); color: var(--brand); border-radius: 999px; }
.biz .biz-num {
  margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line);
  font-family: var(--ff-num); font-size: 20px; font-weight: 800; color: var(--ink);
}
.biz .biz-num span { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 8px; font-family: var(--ff); }

/* ---------- 10. Product feature ---------- */
.prod-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 58px; align-items: center; }
.prod-shot { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); }
.feat-list { display: grid; gap: 2px; margin-top: 30px; }
.feat {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.feat:last-child { border-bottom: 1px solid var(--line); }
.feat-key {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--bg-blue); color: var(--brand); font-family: var(--ff-num); font-weight: 800; font-size: 14px;
}
.feat h4 { font-size: 1.02rem; margin-bottom: 4px; }
.feat p { font-size: 14px; line-height: 1.8; }

.spec-table { width: 100%; font-size: 14.2px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-table th, .spec-table td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.spec-table thead th { background: var(--bg-soft); font-size: 13px; letter-spacing: .06em; color: var(--ink-2); font-weight: 700; }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child th { border-bottom: 0; }
.spec-table tbody th { width: 168px; background: #fbfdff; color: var(--ink-2); font-weight: 600; }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: #f7fbff; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 规格表在窄屏会横向溢出 → 容器内可横向滚动，并给表格一个不小于屏宽的下限，
   保证列内容不被挤成竖排（2026-10-11） */
.table-scroll .spec-table { min-width: 520px; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 10b. Robot product line（AI 机器人产品线） ---------- */
.robot-tier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 30px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.robot-tier h3 { font-size: 1.35rem; }
.robot-tier .tier-tag { font-family: var(--ff-num); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--brand); background: var(--bg-blue); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.robot-tier .tier-note { font-size: 13.5px; color: var(--muted); margin-left: auto; }
.robot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.robot-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* 奇数项（如 5 项）时末卡横跨 2 列，填满尾行而非留空格（2026-10-11 加）。
   ⚠️ 本块必须放在下方 .robot-media / .robot-media img 规则之后，否则被覆盖。 */
.robot-grid .is-span2 { grid-column: span 2; }
.robot-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.robot-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: #cfe0f2; }
.robot-media {
  position: relative; aspect-ratio: 16 / 10; background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
/* 绝对定位 + contain：图片始终完整落在图区内，避免百分比高度在 grid 中失解析而被裁切 */
.robot-media img {
  position: absolute; inset: 16px;
  width: calc(100% - 32px); height: calc(100% - 32px);
  object-fit: contain;
}
.robot-body { padding: 24px 26px 28px; flex: 1; }

/* ---- 奇数项末卡跨 2 列（须在本块之后以覆盖 .robot-media 的定位与比例） ---- */
.robot-grid .is-span2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.robot-grid .is-span2 .robot-media {
  position: static; aspect-ratio: auto; border-bottom: 0;
  border-right: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.robot-grid .is-span2 .robot-media img {
  position: static; inset: auto; width: 100%; height: 100%; max-height: 360px;
}
.robot-grid .is-span2 .robot-body { border-bottom: 0; }
@media (max-width: 860px) {
  .robot-grid .is-span2 { display: flex; }
  .robot-grid .is-span2 .robot-media {
    position: relative; aspect-ratio: 16 / 10; border-right: 0;
    border-bottom: 1px solid var(--line-soft); display: block;
  }
  .robot-grid .is-span2 .robot-media img {
    position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px);
    max-height: none;
  }
}
.robot-sub { display: block; font-family: var(--ff-num); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--brand-light); margin-bottom: 9px; }
.robot-body h4 { font-size: 1.1rem; }
.robot-body p { font-size: 13.6px; line-height: 1.8; margin-top: 12px; }
.robot-body ul { margin-top: 16px; display: grid; gap: 9px; }
.robot-body li { position: relative; padding-left: 16px; font-size: 13.2px; line-height: 1.75; color: var(--ink-2); }
.robot-body li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-light); }
.robot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.robot-foot p { font-size: 14px; color: var(--muted); }

/* ---------- 10c. Product line entry（首页产品线入口） ---------- */
.pl-entry { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; }
.pl-card {
  position: relative; display: flex; flex-direction: column;
  padding: 34px 30px 28px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.pl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: #cfe0f2; }
.pl-idx { font-family: var(--ff-num); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.pl-card h3 { margin: 12px 0 0; font-size: 1.26rem; }
.pl-card p { margin: 12px 0 0; font-size: 13.8px; line-height: 1.85; color: var(--body); }
.pl-more {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; font-size: 13.2px; font-weight: 700; color: var(--brand);
}
.pl-more .arrow { transition: transform .3s var(--ease); }
.pl-card:hover .pl-more .arrow { transform: translateX(4px); }
.pl-tag {
  position: absolute; top: -12px; left: 30px;
  font-family: var(--ff-num); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 13px; border-radius: 999px; background: var(--brand); color: #fff;
}
/* 行内品类标签：排在编号行下方、标题上方（.pl-tag 是绝对定位的主推角标，不适用） */
.pl-tag-inline {
  /* .pl-card 是 flex 容器，子项默认 stretch 会把标签拉满整行宽度 → 需 align-self 收回 */
  display: inline-block; align-self: flex-start; width: fit-content;
  margin-top: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 12px; border-radius: 999px; background: var(--bg-blue); color: var(--brand);
}
.pl-tag-inline + h3 { margin-top: 12px; }
/* 三张产品卡统一视觉：同色渐变底 + 白字 + 1.5rem 大标题（2026-10-11 定稿）
   主推卡（01）只保留 is-primary 的额外标识，不再改变底色与字号 */
.pl-card.is-primary {
  background: linear-gradient(155deg, #1a55a4 0%, var(--brand-dark) 100%);
  border-color: transparent; box-shadow: 0 24px 54px -26px rgba(20, 73, 143, .65);
}
.pl-card.is-primary:hover { border-color: transparent; }

/* 统一：三张卡共用同一套底色与文字层级 */
.pl-entry .pl-card {
  background: linear-gradient(155deg, #1a55a4 0%, var(--brand-dark) 100%);
  border-color: transparent;
}
.pl-entry .pl-card .pl-idx { color: rgba(255, 255, 255, .62); }
.pl-entry .pl-card h3 { color: #fff; font-size: 1.5rem; }
.pl-entry .pl-card p { color: rgba(255, 255, 255, .84); }
.pl-entry .pl-card .pl-more { color: #fff; border-top-color: rgba(255, 255, 255, .22); }
/* 统一后的标签在深底上也要换成半透明白，否则浅蓝底看不清 */
.pl-entry .pl-card .pl-tag-inline { background: rgba(255, 255, 255, .16); color: #fff; }
.pl-entry .pl-card.is-primary { box-shadow: 0 28px 62px -26px rgba(20, 73, 143, .8); }
.pl-card.is-primary .pl-tag { background: var(--cyan); color: #05304a; }

/* 首页同一区块内连续两个产品详情块之间的间距 */
.pl-entry + .prod-hero { margin-top: 78px; }
.prod-hero + .prod-hero { margin-top: 84px; }

/* ---------- 10d. AI Digital Human（AI 数字人产品线） ---------- */
.dh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.dh-tags li {
  font-size: 12.5px; font-weight: 600; padding: 5px 13px;
  border-radius: 999px; background: var(--bg-blue); color: var(--brand);
}
.dh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dh-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.dh-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: #cfe0f2; }
.dh-media {
  position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
/* 绝对定位 + contain：75/55/10.1 寸产品图长宽比差异大，均需完整显示不被裁切 */
.dh-media img {
  position: absolute; inset: 18px;
  width: calc(100% - 36px); height: calc(100% - 36px);
  object-fit: contain;
}
.dh-body { padding: 22px 24px 26px; flex: 1; }
.dh-size { display: flex; align-items: baseline; gap: 9px; }
.dh-size strong { font-family: var(--ff-num); font-size: 1.75rem; font-weight: 800; color: var(--brand); line-height: 1; }
.dh-size span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--brand-light); }
.dh-body h4 { margin-top: 9px; font-size: 1.06rem; }
.dh-spec { margin-top: 16px; display: grid; gap: 8px; }
.dh-spec li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; font-size: 13.1px; line-height: 1.7; color: var(--ink-2); }
.dh-spec li b { font-weight: 600; color: var(--muted); }
.dh-scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dh-scene {
  position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius);
  overflow: hidden; background: #dde6ef; box-shadow: var(--shadow-s);
}
.dh-scene img { width: 100%; height: 100%; object-fit: cover; }
.dh-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 36, 63, 0) 38%, rgba(8, 36, 63, .74) 100%);
}
.dh-scene span {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 11px;
  text-align: center; color: #fff; font-size: 12.5px; font-weight: 700;
}

/* ---------- 10e. Open hardware（AI 开源硬件产品线） ---------- */
.hw-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.hw-item { padding: 20px 0; border-top: 1px solid var(--line); }
.hw-item h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 1.02rem; }
.hw-item h4 em {
  font-family: var(--ff-num); font-style: normal; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--brand-light);
}
.hw-item p { margin-top: 8px; font-size: 13.3px; line-height: 1.78; color: var(--ink-2); }

/* 9 项 / 3 项固定 3 列 → 3+3+3、3 满，避免 2 列尾行留 1 格（2026-10-11 加） */
.hw-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
@media (max-width: 1024px) { .hw-list.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hw-list.cols-3 { grid-template-columns: 1fr; } }
.hw-note {
  margin-top: 34px; padding: 26px 30px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-l);
}
.hw-note p { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.hw-note strong { color: var(--ink); }

/* ---------- 10f. AI Low-Altitude Tech（AI 低空技术，2026-09-29 加） ---------- */
/* 两列产品参数内容较长，窄屏下走 .table-scroll 横向滚动，不要挤压列宽 */
.la-spec { min-width: 680px; }

/* ---------- 10g. AI Brain Science（AI 脑科学，2026-10-01 扩充） ---------- */
.bs-lead { margin-top: 16px; font-size: 14.6px; line-height: 1.95; color: var(--body); }
.bs-fig { margin: 0; }
.bs-fig figcaption { display: block; margin-top: 14px; }
.bs-t { display: block; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.5; }
.bs-tag {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-family: var(--ff-num); font-size: 11px; font-weight: 700; letter-spacing: .07em;
  color: var(--brand-light); background: var(--bg-blue); padding: 3px 10px; border-radius: 999px;
}
.bs-d { display: block; margin-top: 7px; font-size: 13.2px; line-height: 1.85; color: var(--muted); }
/* 两图并排：统一图片高度，保证左右两列图注起点与底部平齐（2026-10-01 加） */
.bs-pair { align-items: start; }
.bs-pair .prod-shot { aspect-ratio: 5 / 6; }
.bs-pair .prod-shot img { width: 100%; height: 100%; object-fit: cover; }
.bs-pair .bs-fig { display: flex; flex-direction: column; }
.bs-pair .bs-fig figcaption { margin-top: auto; padding-top: 14px; }
@media (max-width: 860px) {
  .bs-t { font-size: 14.4px; }
  .bs-d { font-size: 12.8px; }
}

/* v3 重构新增：四层递进流程条 + 模块标题条 */
.bs-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bs-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 28px 24px 26px;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.bs-step:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cfe0f2; }
.bs-step-n {
  display: inline-block; font-family: var(--ff-num); font-size: 11.5px; font-weight: 800;
  letter-spacing: .14em; color: var(--brand); background: var(--bg-blue);
  padding: 4px 12px; border-radius: 999px;
}
.bs-step-t { display: block; margin-top: 14px; font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.bs-step-d { display: block; margin-top: 9px; font-size: 13.1px; line-height: 1.82; color: var(--muted); }

.bs-mod {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
  padding-bottom: 16px; margin-bottom: 32px; border-bottom: 1px solid var(--line);
}
.bs-mod-n {
  font-family: var(--ff-num); font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--brand); background: var(--bg-blue); padding: 5px 13px; border-radius: 999px;
}
.bs-mod h3 { font-size: 1.5rem; }
.bs-mod-d { font-size: 13.6px; color: var(--muted); margin-left: auto; }
@media (max-width: 1180px) { .bs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .bs-flow { grid-template-columns: 1fr; }
  .bs-mod-d { margin-left: 0; }
}

/* ---------- 11. Space grid ---------- */
.space-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.space {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 10.5; background: #dde6ef; box-shadow: var(--shadow-s);
  transition: transform .45s var(--ease), box-shadow .45s;
}
.space:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); }
.space img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.space:hover img { transform: scale(1.05); }
.space::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 36, 63, .06) 30%, rgba(8, 36, 63, .84) 100%);
}
.space-cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.space-cap strong { display: block; font-size: 1.05rem; font-weight: 700; }
.space-cap span { font-size: 12.5px; color: rgba(255, 255, 255, .78); line-height: 1.6; display: block; margin-top: 3px; }
.space-tag {
  position: absolute; z-index: 2; top: 16px; left: 16px;
  background: rgba(255, 255, 255, .92); color: var(--brand);
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em;
  font-family: var(--ff-num);
}

/* ---------- 12. Zone cards (学习/展示/赛事中心) ---------- */
.zone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.zone {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 40px 34px; position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.zone:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #cfe0f2; }
.zone::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.zone:hover::before { transform: scaleX(1); }
.zone-idx { font-family: var(--ff-num); font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: .14em; }
.zone h3 { margin: 18px 0 14px; font-size: 1.32rem; }
.zone p { font-size: 14.4px; }
.zone-list { margin-top: 26px; display: grid; gap: 10px; }
/* 用 block + 绝对定位标记，避免 flex/grid 把 li 内的 <b> 拆成独立项目、
   导致其后的文本节点被压缩成逐字换行。 */
.zone-list li { position: relative; padding-left: 17px; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.zone-list li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-light); }

/* ---------- 13. Course / service list ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
/* 6 项固定 3 列 → 3+3，避免 4+2 尾行留 2 格（2026-10-11 加） */
.course-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 974px) { .course-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .course-grid.cols-3 { grid-template-columns: 1fr; } }
.course {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px;
  background: #fff; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.course:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #cfe0f2; }
.course-n { font-family: var(--ff-num); font-size: 12px; font-weight: 800; color: var(--brand-light); letter-spacing: .12em; }
.course h4 { margin: 14px 0 9px; font-size: 1.06rem; }
.course p { font-size: 13.4px; line-height: 1.78; }

/* 13b. 课程卡片科技概念底图（仅 #course；不影响 AI 低空技术 / solutions 的 .course）
   设计：文字区保持纯白（保证可读性），主题底图只占据卡片下部色块，与文字零重叠。 */
#course .course { display: flex; flex-direction: column; padding: 26px 24px 0; overflow: hidden; }
#course .course p { margin-bottom: 22px; }
#course .course-art {
  position: relative; margin: auto -24px 0; aspect-ratio: 48 / 17;
  background: var(--deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
#course .course-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
#course .course:hover .course-art img { transform: scale(1.05); }
@media (max-width: 974px) {
  #course .course-art { aspect-ratio: 24 / 7; }
}

/* ---------- 14. Timeline ---------- */
.timeline { position: relative; margin-top: 12px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 34px 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand-light);
}
.tl-item.is-key::before { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 5px rgba(20, 73, 143, .12); }
.tl-date { font-family: var(--ff-num); font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.tl-item h4 { margin: 7px 0 6px; font-size: 1.03rem; }
.tl-item p { font-size: 13.8px; }

/* ---------- 15. Case feature ---------- */
.case-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); background: #fff; }
.case-hero-media { position: relative; min-height: 420px; }
.case-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero-body { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.case-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .1em; font-family: var(--ff-num); margin-bottom: 16px; }
.case-tag::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.case-hero-body h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); margin-bottom: 16px; }
.case-points { display: grid; gap: 14px; margin: 26px 0; }
/* 同 .zone-list：block + 绝对定位标记，保证 <b> 与后续文字在同一行内自然排版 */
.case-points li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); line-height: 1.75; }
.case-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 800; }
.case-metrics { display: flex; gap: 34px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.case-metrics div b { display: block; font-family: var(--ff-num); font-size: 1.5rem; font-weight: 800; color: var(--brand); line-height: 1.2; }
.case-metrics div span { font-size: 12.5px; color: var(--muted); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.media-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 4/3; background: #e6edf5; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.media-grid figure:hover img { transform: scale(1.06); }
.media-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
  font-size: 12.5px; color: #fff; font-weight: 600;
  background: linear-gradient(180deg, rgba(8,36,63,0), rgba(8,36,63,.85));
}

/* ---------- 16. Client wall ---------- */
.client-group { display: grid; grid-template-columns: 190px 1fr; gap: 30px; padding: 32px 0; border-top: 1px solid var(--line); }
.client-group:last-child { border-bottom: 1px solid var(--line); }
.client-group h4 { font-size: 1rem; padding-top: 4px; }
.client-group h4 span { display: block; font-family: var(--ff-num); font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .1em; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  font-size: 13.2px; padding: 6px 13px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.chips li:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-2px); }
.chips.chips-more li { background: #fff; color: var(--muted); border-style: dashed; }

/* ---------- 18. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--deep); color: #cfe0f0; }
.cta-band::before {
  content: ""; position: absolute; left: -140px; bottom: -240px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 118, 210, .3), rgba(42, 118, 210, 0) 70%);
}
.cta-band .wrap { position: relative; padding: 84px 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { font-size: 1rem; max-width: 52ch; }
.cta-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ---------- 19. Page hero (sub pages) ---------- */
.page-hero { position: relative; background: var(--deep); color: #bed3e8; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(8,36,63,.94) 0%, rgba(8,36,63,.78) 55%, rgba(8,36,63,.6) 100%); }
.page-hero .wrap { position: relative; padding: 76px 24px 72px; }
.crumb { font-size: 13px; color: #8aa9c4; margin-bottom: 20px; font-family: var(--ff-num); letter-spacing: .04em; }
.crumb a:hover { color: #fff; }
.page-hero h1 { color: #fff; margin-bottom: 18px; }
.page-hero .lead { color: #bdd2e6; max-width: 68ch; }
.page-hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero-facts span {
  font-size: 13.2px; padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); color: #e2eefb;
}

/* ---------- 20. Anchor nav ---------- */
.anchor-nav { position: sticky; top: var(--nav-h); z-index: 70; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.anchor-nav .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 11px; }
/* products 固定两排：第一排 7 项、第二排 5 项；窄屏时各排内部自行折行，分组关系不丢 */
.anchor-nav .wrap.is-2row { flex-direction: column; align-items: flex-start; gap: 10px; }
.anchor-nav .nav-row { display: flex; flex-wrap: wrap; gap: 8px; }
.anchor-nav a { white-space: nowrap; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.5; padding: 8px 16px; border-radius: 999px; color: var(--ink-2); transition: background-color .25s, color .25s; }
.anchor-nav a:hover, .anchor-nav a.active { background: var(--brand); color: #fff; }
/* 窄屏（≤860 起色带折成 3 行以上）：吸顶会吃掉大半屏 → 取消吸顶，选项仍全部完整可见 */
@media (max-width: 860px) {
  .anchor-nav { position: static; }
}
/* products 两排导航更高，3 行拐点在 930px（≤940 仍 2 行、≤930 变 3 行）→ 提前取消吸顶，其余页仍走上面的 860 */
@media (max-width: 930px) {
  .anchor-nav-2row { position: static; }
}

/* ---------- 21. Team / tables ---------- */
.person { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; transition: box-shadow .3s, transform .3s var(--ease); }
.person:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.person-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.person-name i { font-style: normal; width: 32px; height: 32px; border-radius: 10px; background: var(--bg-blue); color: var(--brand); display: grid; place-items: center; font-size: 13px; font-weight: 800; font-family: var(--ff-num); }
.person ul { margin-top: 16px; display: grid; gap: 9px; }
.person li { font-size: 13.2px; display: flex; gap: 9px; line-height: 1.7; }
.person li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--brand-light); }
.person li b { color: var(--ink-2); font-weight: 600; }

.org-list { display: grid; gap: 0; }
.org-list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.org-list li:first-child { border-top: 1px solid var(--line); }
.org-list li span { font-size: 13px; color: var(--brand); background: var(--bg-blue); padding: 3px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- 22. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 40px 36px; box-shadow: var(--shadow-s); }
.info-item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px dashed var(--line); }
.info-item:last-child { border-bottom: 0; }
.info-ico { width: 44px; height: 44px; border-radius: 13px; background: var(--bg-blue); display: grid; place-items: center; color: var(--brand); }
.info-item h4 { font-size: 13px; letter-spacing: .08em; color: var(--muted); font-family: var(--ff-num); text-transform: uppercase; margin-bottom: 6px; }
.info-item p { font-size: 15.5px; color: var(--ink); font-weight: 600; line-height: 1.6; }
.info-item p a:hover { color: var(--brand); }
.info-item .sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 4px; }
/* 官方二维码（2026-09-27 加）：联系方式卡片内 */
.info-qr { display: flex; gap: 14px; flex-wrap: wrap; }
.info-qr figure { margin: 0; display: grid; gap: 7px; justify-items: center; }
.info-qr img {
  width: 118px; height: 118px; display: block;
  border-radius: var(--radius-s); border: 1px solid var(--line); background: #fff; padding: 5px;
}
.info-qr figcaption { font-size: 12.5px; color: var(--muted); font-weight: 500; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 40px 36px; box-shadow: var(--shadow-s); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field label i { color: #c0392b; font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; font-size: 14.6px; color: var(--ink); background: #fcfdff;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-light); background: #fff;
  box-shadow: 0 0 0 4px rgba(42, 118, 210, .1);
}
.field .err { font-size: 12.5px; color: #c0392b; display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #e08c82; }
.field.has-error .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.7; }
.form-success {
  display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-s);
  background: #eef8f1; border: 1px solid #cfe8d8; color: #1f6b41; font-size: 14px;
}
.form-success.show { display: block; }
.form-success.is-err { background: #fdf0ee; border-color: #f0cdc7; color: #a5352a; }
.form-success a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------- 23. Footer ---------- */
.site-footer { background: #061c33; color: #93aec8; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; padding: 68px 0 54px; }
.site-footer h4 { color: #fff; font-size: 14.5px; margin-bottom: 20px; letter-spacing: .02em; }
.site-footer img { height: 38px; margin-bottom: 20px; }
.footer-about p { font-size: 13.4px; line-height: 1.9; max-width: 40ch; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { font-size: 13.8px; transition: color .22s; }
.footer-links a:hover { color: #fff; }
.footer-contact li { margin-bottom: 13px; font-size: 13.6px; display: flex; gap: 10px; line-height: 1.7; }
.footer-contact b { color: #dbe8f5; font-family: var(--ff-num); font-weight: 600; }
/* 官方二维码（2026-09-27 加）：页脚「联系我们」列下方 */
.footer-qr { margin-top: 22px; }
.footer-qr > span { display: block; font-size: 12.8px; color: #6f8dab; margin-bottom: 10px; letter-spacing: .04em; }
.footer-qr-box { display: flex; gap: 14px; }
.footer-qr-box figure { margin: 0; display: grid; gap: 7px; justify-items: center; }
/* 深色底上二维码必须做白底，否则对比度不足扫不出来 */
.footer-qr-box img { width: 92px; height: 92px; display: block; border-radius: 8px; background: #fff; padding: 5px; }
.footer-qr-box figcaption { font-size: 11.6px; color: #8ba7c2; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09); padding: 22px 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.8px; color: #6f8dab; font-family: var(--ff-num);
}

/* ---------- 23b. Accent space card (纯色收尾卡) ---------- */
.space-plain { display: grid; place-items: center; background: linear-gradient(145deg, #0c3055 0%, #1a5fae 100%); }
.space-plain::after { display: none; }
.space-plain .sp-inner { position: relative; z-index: 2; padding: 30px 26px; text-align: center; color: #fff; }

/* ---------- 23c. FAQ（accordion） ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 44px 24px 4px; position: relative;
  font-size: 1.04rem; font-weight: 600; color: var(--ink); line-height: 1.6;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }
.faq-item summary::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease);
}
.faq-item[open] summary { color: var(--brand); }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-body { padding: 0 44px 26px 4px; font-size: 14.6px; line-height: 1.9; }
.faq-body p { max-width: 78ch; }

/* ---------- 24. Reveal animation ----------
   渐进增强：初始隐藏仅在 <html class="js"> 时生效（由各页 <head> 内联脚本添加），
   这样在禁用 JS、脚本加载失败或被安全策略拦截时，正文依旧完整可见，
   不会被判为「空白页面」。 */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }
.js .reveal[data-delay="5"] { transition-delay: .4s; }

/* ---------- 25. Responsive ---------- */
/* 视口收窄时图框同步变窄，文案左右留白收一档（仍让开两侧箭头） */
@media (max-width: 1360px) {
  .hero-inner { padding-inline: 68px; }
}
@media (max-width: 1180px) {
  /* 导航字号改由 .nav a 的 clamp() 连续控制，此处不再覆盖 */
  .brand-sub { display: none; }
  .hero-copy { max-width: 600px; }
  /* 图框变扁（1117×614）、h1 落到 y 10.4%~31.6%，比 1440 更低。
     顶带的横向曲线与底带渐晕两断点共用（数值已在 1180 复核），
     只把顶带的关闭位置从 64% 放宽到 60%，给 h1 下沿留出余量。 */
  .hero-frame::after { inset: 0 0 60% 0; }
  .biz-grid { grid-template-columns: repeat(2, 1fr); }
  .biz:nth-child(2n) { border-right: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 1024px) {
  .section { padding: 76px 0; }
  .nav, .header-tel { display: none; }
  .nav-toggle { display: flex; }
  :root { --nav-h: 64px; }
  .hero-inner { min-height: clamp(540px, 58vw, 640px); padding: 54px 60px 40px; }
  .hero-copy { max-width: 560px; }
  /* 图框 961×594，h1 落在 y 9.1%~28.1%（比 1180 档靠上），
     顶带关闭位置回到基准的 64%，让中间打开的区间尽量大。 */
  .hero-frame::after { inset: 0 0 64% 0; }
  .hero-arrow { width: 42px; height: 42px; margin-top: -21px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-flip .split-media { order: 0; }
  .prod-hero { grid-template-columns: 1fr; gap: 40px; }
  .space-grid, .zone-grid, .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .case-hero { grid-template-columns: 1fr; }
  .case-hero-media { min-height: 300px; }
  .case-hero-body { padding: 38px 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-band .wrap { grid-template-columns: 1fr; padding: 64px 24px; }
  .client-group { grid-template-columns: 1fr; gap: 16px; }
  .pl-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-card.is-primary { grid-column: 1 / -1; }
  .dh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-entry + .prod-hero { margin-top: 62px; }
  .prod-hero + .prod-hero { margin-top: 62px; }
}
/* 窄屏：图框内改为「上图 + 下文」两段式，避免大面积文字压在图上 */
@media (max-width: 860px) {
  .hero { padding-block: 16px 44px; }
  .hero-frame { border-radius: var(--radius-l); }
  /* 两段式：图不再压字，蒙板两层全部撤掉，改用 .hero-slides::after 的底部窄渐变 */
  .hero-frame::before, .hero-frame::after { display: none; }
  .hero-slides { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero-slides::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 20, 36, 0), rgba(3, 20, 36, .46));
  }
  .hero-slide .hero-poster, .hero-slide.is-active .hero-poster { transform: none; }
  .js .hero-arrow { display: none; }
  .hero-inner { min-height: 0; gap: 30px; padding: 30px 26px 34px; }
  .hero-copy { max-width: none; }
  .hero-copy .lead { max-width: none; font-size: 1rem; }
  .hero-copy h1 { text-shadow: none; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 22px; }
  /* .hero-stats / .hero-stat 规则已停用（数据卡 2026-09-24 删除） */
  .hero-ctrl { align-items: flex-start; gap: 14px; }
  .hero-cap { text-align: left; }
  .hero-cap b { text-shadow: none; }
}

@media (max-width: 720px) {
  body { font-size: 15.4px; }
  .wrap { padding-inline: 18px; }
  .section { padding: 58px 0; }
  .section-head { margin-bottom: 36px; }
  .header-cta { gap: 10px; }
  .header-cta .btn { padding: 10px 16px; font-size: 14px; }
  .stat-strip .wrap { grid-template-columns: 1fr 1fr; }
  .stat { padding: 28px 18px; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .biz-grid { grid-template-columns: 1fr; }
  .biz { border-right: 0; padding: 30px 22px 34px; }
  .space-grid, .zone-grid, .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: 1fr; }
  .robot-grid, .robot-grid.cols-3 { grid-template-columns: 1fr; gap: 20px; }
  .robot-tier { gap: 10px; }
  .robot-tier .tier-note { margin-left: 0; flex-basis: 100%; }
  .robot-body { padding: 20px 22px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; padding: 48px 0 36px; gap: 34px; }
  .topbar .tb-left { gap: 14px; }
  .topbar .tb-hide { display: none; }
  .table-scroll { border-radius: var(--radius-s); }
  .spec-table tbody th { width: 110px; }
  .spec-table th, .spec-table td { padding: 12px 13px; font-size: 13.4px; }
  .info-card, .form-card { padding: 28px 22px; }
  .info-qr img { width: 104px; height: 104px; }
  .page-hero .wrap { padding: 54px 18px 52px; }
  .hero-tags { gap: 8px; }
  .hero { padding-block: 12px 38px; }
  .hero-inner { padding: 26px 20px 30px; }
  /* .hero-stat 相关规则已停用（数据卡 2026-09-24 删除） */
  .pl-entry { grid-template-columns: 1fr; gap: 16px; }
  .pl-card { padding: 30px 22px 24px; }
  .pl-card.is-primary h3 { font-size: 1.34rem; }
  .dh-grid { grid-template-columns: 1fr; }
  .dh-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-spec li { grid-template-columns: 52px 1fr; }
  .hw-list { grid-template-columns: 1fr; }
  .pl-entry + .prod-hero { margin-top: 48px; }
  .prod-hero + .prod-hero { margin-top: 54px; }
}

/* ---------- 26. A11y / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  /* 选择器需与上方 .js .reveal 同级，否则被其覆盖 */
  .js .reveal { opacity: 1; transform: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--brand); color: #fff;
  padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top .25s;
}
.skip-link:focus { top: 0; }