/* ==========================================================================
   首页 · 版式（黑白灰大图风格，机器人主视觉）
   依赖 site.css 的变量与基础层
   区块顺序：首屏 / 四张服务卡 / 行业解决方案 / 动态 / 三卡引导 / 关于我们 + FAQ / CTA
   ========================================================================== */

/* 首页局部调深次级文字：site.css 的 --muted(#86868b) 在浅色底上实测 3.2—3.5:1，
   未达 WCAG AA 的 4.5:1。首页全部次级文字都在浅底上，故在本页覆盖；
   内页含深色节奏带，暂不改全局变量。 */
:root { --muted: #6b6b70; }

/* ---------- 首屏 ---------- */
.hx-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 640px;
  max-height: 1040px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, #f4f3f1 0%, #efeeec 48%, #f2f1ef 100%);
  isolation: isolate;
}
/* 极淡网格：给大片浅色底一点结构，不抢主体 */
.hx-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(18, 19, 23, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 19, 23, .05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(118% 92% at 58% 26%, #000 0%, rgba(0, 0, 0, .4) 60%, transparent 86%);
  mask-image: radial-gradient(118% 92% at 58% 26%, #000 0%, rgba(0, 0, 0, .4) 60%, transparent 86%);
}
/* 底部雾化：只让脚踝以下轻轻融进浅色底，小腿与脚背保持清楚 */
.hx-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(to top, #f2f1ef 0%, rgba(242, 241, 239, .7) 45%, rgba(242, 241, 239, 0) 100%);
}
/* 3D 机器人的脚是实的，不像素材那样自带柔边。
   沿用 14% 的雾化会把脚踝以下整段洗成半透明，看着像没渲染出来——
   这里只留最底部一条做过渡。 */
.hx-hero.has-3d::after {
  height: 7%;
  background: linear-gradient(to top, #f2f1ef 0%, rgba(242, 241, 239, .55) 62%, rgba(242, 241, 239, 0) 100%);
}
/* 舞台层不设 z-index：一旦构成层叠上下文，层内的 darken 只能与本层空底相混，
   视频的浅灰底会盖住网格并在边界露出来；保持 z-index:auto 才能与页底渐变、网格真正相乘 */
.hx-hero-stage { position: absolute; inset: 0; pointer-events: none; }
/* 背后巨字：被机器人压住一部分，只作纹理 */
.hx-hero-word {
  position: absolute; left: 50%; top: 36%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 18vw, 18rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
  color: rgba(18, 19, 23, .07);
  user-select: none;
  animation: hx-word 11s ease-in-out infinite;
}
@keyframes hx-word {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}
.hx-hero-art {
  position: absolute; left: 56%; bottom: 0;
  margin: 0;
  height: 78%;
  /* 两层媒体都是绝对定位，盒子尺寸靠素材原生比例撑出来（768×1106），
     与视频帧同比例，cover 不裁切，静态图与视频逐像素重合 */
  aspect-ratio: 768 / 1106;
  perspective: 1600px;
  /* 鼠标跟随：位移与旋转都走 CSS 变量，JS 只写变量，不逐帧拼 transform */
  transform: translateX(-50%) translate3d(var(--hx-tx, 0px), var(--hx-ty, 0px), 0)
             rotateX(var(--hx-rx, 0deg)) rotateY(var(--hx-ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
  animation: hx-float 7.5s ease-in-out infinite;
}
/* 位移用 translate，不用 transform：transform 留给鼠标跟随 */
@keyframes hx-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
.hx-hero-art img, .hx-hero-video { display: block; height: 100%; width: auto; }
/* 静态图与视频都自带 alpha 通道（透明 WebP / VP9-alpha WebM），直接叠在页面上即可。
   这里不再用 mix-blend-mode：.hx-hero-art 上有 perspective 和 transform 动画，
   会自建层叠上下文，把混合树隔断，darken 实际是空操作——
   旧版看似“融合干净”，只是素材底色(240)与页面底色(242)恰好只差 2 级。 */
.hx-hero-art .hx-hero-poster,
.hx-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
}
/* 视频就绪后，静态海报必须让位。两层的几何完全重合（同为 768×1106 源、
   同盒同 object-fit），但视频里的机器人在摆动手臂与头部，海报是冻结的一帧——
   两层同时可见就会露出两套轮廓，看起来像几个机器人叠在一起。
   用很短的淡出而不是 0.8s：交叉期越短，错位的双影越看不出来。 */
.hx-hero-art .hx-hero-poster { transition: opacity .18s linear; }
.hx-hero-art.is-playing .hx-hero-poster { opacity: 0; }
.hx-hero-video { opacity: 0; }
.hx-hero-video.is-ready { opacity: 1; }

/* 3D 层：最后由它接管首屏，海报与视频都要让位。
   注意 is-3d 下必须停掉父级的 float 动画和鼠标跟随——
   3D 场景自己会做跟随，两层叠加会变成双倍位移。 */
.hx-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.hx-hero-art.is-3d { transform: translateX(-50%); transition: none; animation: none; }
.hx-hero-art.is-3d .hx-hero-canvas { opacity: 1; }
.hx-hero-art.is-3d .hx-hero-poster,
.hx-hero-art.is-3d .hx-hero-video { opacity: 0; }

.hx-hero-inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(16px, 1.8vw, 26px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
}
.hx-hero-copy { max-width: 640px; min-width: 0; }
.hx-hero-tag {
  font-size: 12.5px; letter-spacing: .12em; color: #6b6b6e;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.hx-hero h1 {
  font-size: clamp(1.9rem, 1.05rem + 2.5vw, 3.1rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.045em;
  color: var(--ink);
}
.hx-hero h1 span { display: block; }
.hx-hero h1 .hx-hero-accent { color: var(--accent); }
.hx-hero-sub {
  margin-top: clamp(14px, 1.6vw, 18px);
  font-size: clamp(14.5px, .85rem + .2vw, 16.5px);
  line-height: 1.85;
  color: #54545a;
  max-width: 36em;
}
.hx-hero-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(20px, 2.2vw, 30px);
}
.hx-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(29, 29, 31, .38);
  font-size: 15px; color: var(--ink);
  transition: color .25s ease, border-color .25s ease, gap .25s ease;
}
.hx-hero-cta:hover { color: var(--accent); border-color: var(--accent); gap: 16px; }
.hx-hero-tel {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(29, 29, 31, .16);
  font-size: 15px; color: #45454a;
  font-variant-numeric: tabular-nums;
  transition: color .25s ease, border-color .25s ease;
}
.hx-hero-tel:hover { color: var(--accent); border-color: var(--accent); }

/* 右侧服务索引：四条，与下面四张服务卡一一对应 */
.hx-hero-side { flex: 0 0 auto; width: clamp(210px, 20vw, 300px); }
.hx-hero-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(29, 29, 31, .18); }
.hx-hero-index li { border-bottom: 1px solid rgba(29, 29, 31, .18); }
.hx-hero-index a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  padding: clamp(10px, 1.1vw, 13px) 0;
  color: inherit;
}
.hx-hero-index .n {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; color: #232327;
  transition: color .25s ease;
}
.hx-hero-index .k {
  flex: 0 0 auto;
  font-size: 11.5px; color: #6b6b70; text-align: right;
}
.hx-hero-index a:hover .n { color: var(--accent); }
.hx-new {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; line-height: 1.6; letter-spacing: .02em;
}
.hx-hero-scroll {
  position: relative; z-index: 3;
  width: 100%; max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(16px, 1.8vw, 24px);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .05em; color: var(--muted);
}
.hx-hero-scroll .arw { font-size: 13px; line-height: 1; }

/* ---------- 四张服务卡（2×2） ---------- */
.hx-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px) 0;
  background: #fff;
}
.hx-card {
  position: relative;
  display: block;
  height: clamp(400px, 46vw, 700px);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: #1b1c1f;
  color: #fff;
}
.hx-card-pic { position: absolute; inset: 0; margin: 0; }
.hx-card-pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.hx-card:hover .hx-card-pic img { transform: scale(1.045); }
.hx-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, .32) 56%, rgba(0, 0, 0, .82) 100%);
  transition: opacity .5s ease;
}
.hx-card-txt {
  position: absolute; left: 0; right: 0; z-index: 2;
  padding: 0 clamp(20px, 2.4vw, 36px);
  text-align: center;
}
.hx-card-txt--bottom { bottom: clamp(28px, 3.4vw, 46px); }
.hx-card-txt--top { top: clamp(30px, 3.6vw, 54px); }
/* 顶部文字卡：上方加一层深色渐隐，保证白字压得住亮图 */
.hx-card--top::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .48) 26%, rgba(0, 0, 0, .1) 58%, rgba(0, 0, 0, 0) 76%);
}
/* 顶部文字卡的下缘再压一道暗角：图片底部不至于过亮，也盖掉素材自带的角标 */
.hx-card--top::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .58) 32%, rgba(0, 0, 0, 0) 100%);
}
/* 亮图上的深色卡（APP）：把底部压得更实，长段落才读得清 */
.hx-card--deep::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .42) 34%, rgba(0, 0, 0, .78) 68%, rgba(0, 0, 0, .93) 100%);
}
.hx-card-kicker {
  display: block;
  font-size: 11px; letter-spacing: .12em;
  opacity: .88; margin-bottom: 14px;
}
.hx-card-txt h3 {
  max-width: 20em; margin-inline: auto;
  font-size: clamp(1.75rem, 1.05rem + 1.7vw, 2.4rem);
  font-weight: 500; letter-spacing: -.04em; color: #fff; line-height: 1.25;
}
.hx-card-txt p {
  margin: 12px auto 0;
  max-width: 24em;
  font-size: clamp(13.5px, .8rem + .18vw, 16px);
  line-height: 1.7;
  opacity: .92;
}
/* 每张服务卡两行：一句定义 + 一句交付 */
.hx-card-txt .hx-card-deliver {
  margin-top: 8px;
  font-size: clamp(12.5px, .78rem + .1vw, 14px);
  opacity: .76;
}
.hx-card-more {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 24px;
  border-radius: 999px;
  background: #fff; color: #000;
  font-size: 14px; line-height: 1.3;
  transition: background-color .3s ease, color .3s ease;
}
.hx-card:hover .hx-card-more { background: var(--accent); color: #fff; }

/* 亮色卡（H5 营销活动）：文字转深色，遮罩转浅灰，与前三张深色卡形成节奏
   底色与边框必须比所在白底区块更暗一档，否则卡片会塌进背景看不出轮廓 */
.hx-card--light { color: #232327; background: #f5f5f7; border: 1px solid #e6e6ea; }
.hx-card--light::before {
  background: linear-gradient(180deg, rgba(245, 245, 247, 0) 26%, rgba(245, 245, 247, .86) 56%, rgba(245, 245, 247, .98) 84%, #f5f5f7 100%);
}
.hx-card--light .hx-card-txt h3 { color: var(--ink); }
.hx-card--light .hx-card-kicker { color: #4f4f56; opacity: 1; }
.hx-card--light .hx-card-txt p { color: #3f3f45; opacity: 1; }
.hx-card--light .hx-card-txt .hx-card-deliver { color: #4f4f56; opacity: 1; }
.hx-card--light .hx-card-more { background: var(--ink); color: #fff; }
.hx-card--light:hover .hx-card-more { background: var(--accent); color: #fff; }

/* ---------- 区块标题 ---------- */
.hx-head {
  max-width: 1560px;
  margin: 0 auto clamp(30px, 3.6vw, 52px);
  padding-inline: clamp(4px, 1vw, 8px);
}
.hx-head h2 {
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.1rem);
  font-weight: 500; letter-spacing: -.045em; line-height: 1.2;
}
.hx-head > p {
  color: var(--muted); font-size: 16px; line-height: 1.85;
  margin-top: 18px; max-width: 46em;
}

/* ---------- 行业解决方案：横向大图卡 ---------- */
.hx-solutions { background: #fff; padding: clamp(64px, 8vw, 128px) 0 clamp(56px, 7vw, 104px); }
.hx-sol-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  max-width: 1560px; margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.hx-sol-top .hx-head { margin: 0; padding-inline: 0; }
.hx-sol-nav { flex: 0 0 auto; display: flex; gap: 10px; padding-bottom: 6px; }
.hx-sol-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: #fff; color: var(--ink);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hx-sol-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hx-sol-btn:disabled { opacity: .32; cursor: default; }
.hx-sol-btn:disabled:hover { background: #fff; color: var(--ink); border-color: var(--line-2); }

.hx-sol-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(74%, 1080px);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 42px);
  padding: 0 clamp(20px, 4vw, 56px) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(20px, 4vw, 56px);
  -webkit-overflow-scrolling: touch;
}
.hx-sol-rail::-webkit-scrollbar { height: 6px; }
.hx-sol-rail::-webkit-scrollbar-thumb { background: rgba(18, 19, 23, .18); border-radius: 3px; }
.hx-sol-rail::-webkit-scrollbar-track { background: transparent; }
.hx-sol-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.hx-sol {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #151619;
  color: #fff;
  isolation: isolate;
}
.hx-sol-pic { position: absolute; inset: 0; margin: 0; }
.hx-sol-pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.hx-sol:hover .hx-sol-pic img { transform: scale(1.03); }
.hx-sol::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .1) 38%, rgba(0, 0, 0, .62) 76%, rgba(0, 0, 0, .88) 100%);
}
.hx-sol-txt {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%;
  padding: clamp(22px, 2.6vw, 40px);
}
.hx-sol-txt h3 {
  color: #fff;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.3;
}
.hx-sol-txt p {
  margin-top: 12px;
  max-width: 44em;
  font-size: clamp(13.5px, .82rem + .2vw, 15.5px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .8);
}
.hx-sol-more {
  align-self: flex-end;
  margin-top: clamp(16px, 2vw, 26px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .46);
  font-size: 13.5px; color: #fff;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hx-sol-more:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- 动态：左浅灰大卡 + 右 2×2 无框图文（对齐参考站） ---------- */
.hx-news { background: var(--soft); padding: clamp(64px, 8vw, 128px) clamp(20px, 4vw, 56px); }
.hx-news-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(20px, 2vw, 26px);
  max-width: 1560px; margin: 0 auto;
  align-items: stretch;
}

/* 左：浅灰底，标题在上，机器人从底部长出来，身后压一行品牌巨字 */
.hx-news-feature {
  position: relative;
  /* isolate 让下方 darken 只与本卡底色混合，不与页面底色串味 */
  isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(320px, 34vw, 470px);
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: 16px;
  overflow: hidden;
  /* 约束：此底色必须比 news-robot.webp 背景的所有像素都暗（素材已纯白 255，
     余量 15 级）。若换回带暗角的 hero-robot.webp，darken 会露出浅灰矩形。 */
  background: #f0efed;
  color: var(--ink);
}
.hx-news-feature-word {
  position: absolute; left: 0; right: 0; top: 30%; z-index: 0;
  text-align: center;
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
  color: rgba(0, 75, 200, .12);
  white-space: nowrap; pointer-events: none; user-select: none;
}
/* 机器人装进「宽 58% × 高 62%」的约束盒：object-fit 保证不变形，底边对齐卡片底 */
.hx-news-feature-art {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  transform: translateX(-50%);
  width: 58%; height: 62%;
  object-fit: contain; object-position: 50% 100%;
  mix-blend-mode: darken;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .55) 96%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgba(0, 0, 0, .55) 96%, rgba(0, 0, 0, 0) 100%);
  transition: transform .6s ease;
}
.hx-news-feature-body {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hx-news-feature-k { font-size: 11.5px; letter-spacing: .16em; color: #6b6b70; }
.hx-news-feature h3 {
  margin: 14px 0 0;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .3s ease;
}
.hx-news-feature-more {
  /* 贴卡片左下：与右下角「交付复盘」胶囊形成一条底行，机器人从中间长出来 */
  position: absolute; left: clamp(24px, 2.4vw, 36px); bottom: clamp(24px, 2.4vw, 36px); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #4a4a4f;
  transition: gap .25s ease, color .2s ease;
}
.hx-news-feature-tag {
  position: absolute; right: 18px; bottom: 16px; z-index: 4;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 11px; color: #4f4f56;
}
.hx-news-feature:hover h3 { color: var(--accent); }
.hx-news-feature:hover .hx-news-feature-more { gap: 14px; color: var(--accent); }
.hx-news-feature:hover .hx-news-feature-art { transform: translateX(-50%) translateY(-6px); }

/* 右：无框，整幅图 → 虚线标签 + 日期 → 两行标题 */
.hx-news-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 24px);
  align-content: start;
}
.hx-news-item { display: block; color: var(--ink); }
.hx-news-pic {
  display: block; aspect-ratio: 1.6;
  border-radius: 12px; overflow: hidden;
  background: #e9e9ec;
}
.hx-news-pic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.hx-news-item:hover .hx-news-pic img { transform: scale(1.04); }
.hx-news-meta { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.hx-news-tag {
  padding: 1px 7px;
  border: 1px dashed #c9c9cf;
  font-size: 11px; line-height: 1.7; color: #6b6b70;
}
.hx-news-date {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.hx-news-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 8px;
  font-size: clamp(15px, .85rem + .16vw, 16.5px);
  line-height: 1.55;
  transition: color .3s ease;
}
.hx-news-item:hover .hx-news-t { color: var(--accent); }

.hx-news-all {
  max-width: 1560px; margin: clamp(22px, 2.6vw, 34px) auto 0;
  text-align: right;
}
.hx-news-all a {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(29, 29, 31, .28);
  font-size: 14px; color: var(--ink);
  transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.hx-news-all a:hover { color: var(--accent); border-color: var(--accent); gap: 14px; }

/* ---------- 三卡引导：上部文字 + 下部整幅竖图 ---------- */
.hx-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: clamp(64px, 8vw, 128px) clamp(20px, 4vw, 56px);
  background: #fff;
}
.hx-guide-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fbfbfa;
}
.hx-guide-txt {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 30px);
}
.hx-guide-kicker { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); }
.hx-guide-txt h3 {
  font-size: clamp(1.15rem, .95rem + .5vw, 1.4rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.38;
}
.hx-guide-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 13.5px; color: var(--ink);
  transition: border-color .25s ease, color .25s ease;
}
.hx-guide-btn .plus {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1;
  transition: translate .3s ease, background-color .3s ease;
}
.hx-guide-btn:hover { border-color: var(--ink); color: var(--ink); }
.hx-guide-btn:hover .plus { translate: 3px 0; background: var(--accent); }
.hx-guide-pic { margin: auto 0 0; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }
.hx-guide-pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.hx-guide-card:hover .hx-guide-pic img { transform: scale(1.04); }

/* ---------- 关于我们：左文右 FAQ ---------- */
.hx-about {
  position: relative;
  background: var(--soft);
  padding: clamp(64px, 8vw, 128px) clamp(20px, 4vw, 56px);
  overflow: hidden;
}
/* 极淡网格，让大面积浅色底不至于空 */
.hx-about::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 19, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 19, 23, .05) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(74% 62% at 30% 20%, #000 0%, rgba(0, 0, 0, .45) 54%, transparent 84%);
  mask-image: radial-gradient(74% 62% at 30% 20%, #000 0%, rgba(0, 0, 0, .45) 54%, transparent 84%);
}
.hx-about-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  max-width: 1420px; margin: 0 auto;
  align-items: start;
}
.hx-about-copy { min-width: 0; }
.hx-about-copy h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.85rem);
  font-weight: 500; letter-spacing: -.045em; line-height: 1.12;
}
.hx-about-copy p {
  margin-top: clamp(14px, 1.6vw, 18px);
  max-width: 34em;
  font-size: clamp(14.5px, .88rem + .16vw, 16px);
  line-height: 1.95;
  color: #4a4a4f;
}
.hx-about-copy .hx-about-metrics {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: 12.5px; letter-spacing: .05em; line-height: 1.7;
  color: var(--muted);
}
.hx-about-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 14px; color: var(--ink);
  transition: border-color .25s ease, color .25s ease;
}
.hx-about-btn .plus {
  display: grid; place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 13px; line-height: 1;
  transition: translate .3s ease, background-color .3s ease;
}
.hx-about-btn:hover { border-color: var(--ink); color: var(--ink); }
.hx-about-btn:hover .plus { translate: 3px 0; background: var(--accent); }

.hx-about-faq { min-width: 0; }
.hx-faq-list { border-top: 1px solid var(--line-2); }
.hx-faq-list details { border-bottom: 1px solid var(--line-2); }
.hx-faq-list summary {
  position: relative; cursor: pointer; list-style: none;
  padding: clamp(16px, 1.8vw, 22px) 40px clamp(16px, 1.8vw, 22px) 0;
  font-size: clamp(15px, .9rem + .25vw, 16.5px);
  font-weight: 500; color: var(--ink); line-height: 1.55;
}
.hx-faq-list summary::-webkit-details-marker { display: none; }
.hx-faq-list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 300; color: var(--muted); line-height: 1;
  transition: color .2s ease;
}
.hx-faq-list details[open] summary::after { content: "–"; color: var(--accent); }
.hx-faq-list details > p {
  padding: 0 40px clamp(18px, 2vw, 24px) 0;
  max-width: 68ch;
  font-size: 14.5px; line-height: 1.95; color: #5a5a5f;
}

/* ---------- 末尾 CTA：浅色过渡，避免首屏以下连续两块深色 ---------- */
.hx-cta { background: #fff; border-top: 1px solid var(--line); }
.hx-cta-inner {
  max-width: 1560px; margin: 0 auto;
  padding: clamp(44px, 5.4vw, 76px) clamp(20px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.hx-cta h2 {
  color: var(--ink);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 500; letter-spacing: -.045em; line-height: 1.2;
}
.hx-cta p {
  margin-top: 12px; color: var(--muted);
  font-size: 14.5px; line-height: 1.8; max-width: 40em;
}
.hx-cta-actions { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap; }
.hx-cta-tel {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  font-weight: 500; color: var(--ink); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hx-cta-tel:hover { color: var(--accent); }
.hx-cta-btn {
  display: inline-flex; align-items: center;
  padding: 13px 30px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14.5px;
  transition: background-color .3s ease, color .3s ease;
}
.hx-cta-btn:hover { background: var(--accent); color: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .hx-sol-rail { grid-auto-columns: min(86%, 900px); }
}

@media (max-width: 1024px) {
  /* 首屏：仍占一屏，但机器人右移并缩小，给文案让出宽度 */
  .hx-hero { min-height: 600px; }
  .hx-hero-art { left: 64%; height: 68%; }
  .hx-hero-word { font-size: clamp(3.8rem, 17vw, 11rem); }
  .hx-hero-copy { max-width: 520px; }
  .hx-hero-side { width: clamp(180px, 23vw, 230px); }
  .hx-hero-index .k { display: none; }
  .hx-news-grid { grid-template-columns: 1fr; }
  /* 平板：单列后卡片变横长，改成「左文右机器人」，机器人贴底右侧 */
  .hx-news-feature { min-height: 320px; }
  .hx-news-feature-body { max-width: 58%; }
  .hx-news-feature-art { left: auto; right: 1%; transform: none; width: 40%; height: 86%; }
  .hx-news-feature-word { top: 44%; left: 0; right: 0; text-align: center; font-size: 52px; }
  .hx-news-feature:hover .hx-news-feature-art { transform: translateY(-6px); }
  .hx-about-grid { grid-template-columns: 1fr; gap: 34px; }
  .hx-about-copy p { max-width: 46em; }
}

@media (max-width: 860px) {
  /* 首屏改为流式：文案 → 服务索引 → 机器人，不再强制一屏 */
  .hx-hero {
    height: auto; min-height: 0; max-height: none;
    justify-content: flex-start;
    padding-top: calc(var(--hd) + 26px);
  }
  .hx-hero::after { display: none; }
  .hx-hero-inner {
    order: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-top: 0;
  }
  .hx-hero-copy { max-width: 100%; }
  .hx-hero h1 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.4rem); }
  .hx-hero-side { width: 100%; }
  .hx-hero-index a { padding: 11px 0; }
  .hx-hero-index .k { display: block; }
  .hx-hero-stage {
    position: relative; inset: auto;
    order: 3;
    display: flex; align-items: flex-end; justify-content: center;
    height: clamp(250px, 60vw, 380px);
    margin-top: 8px;
    overflow: hidden;
  }
  .hx-hero-art {
    position: relative; left: auto; bottom: auto;
    transform: none;
    height: 100%;
    animation: none;
  }
  .hx-hero-word { top: 46%; font-size: clamp(3.2rem, 21vw, 7.5rem); animation: none; }
  .hx-hero-scroll { order: 4; padding-bottom: 22px; }

  .hx-sol-top { flex-direction: column; align-items: flex-start; }
  .hx-sol-nav { display: none; }
  .hx-sol-rail {
    grid-auto-columns: 86%;
    scroll-padding-inline: 18px;
    padding-inline: 18px;
  }
  .hx-guide { grid-template-columns: 1fr; }
  .hx-guide-pic { aspect-ratio: 16 / 11; object-position: 50% 62%; }
}

@media (max-width: 640px) {
  .hx-cards { grid-template-columns: 1fr; }
  .hx-card { height: 78vw; min-height: 340px; }
  .hx-news-list { grid-template-columns: 1fr; }
  .hx-news-feature { min-height: 400px; padding: 22px 20px; }
  .hx-news-feature h3 { -webkit-line-clamp: 2; margin-top: 10px; }
  .hx-news-feature-more { margin-top: 14px; }
  .hx-news-feature-body { max-width: 100%; }
  .hx-news-feature-art { left: 50%; right: auto; transform: translateX(-50%); width: 56%; height: 54%; }
  /* 必须重写 hover：1024 断点里那条 hover 只写 translateY，特异性更高会把居中位移吃掉 */
  .hx-news-feature:hover .hx-news-feature-art { transform: translateX(-50%) translateY(-6px); }
  .hx-news-feature-word { top: 52%; left: 0; right: 0; text-align: center; font-size: 40px; }
  .hx-sol { aspect-ratio: 3 / 4; }
  .hx-sol-rail { grid-auto-columns: 88%; }
  .hx-sol-txt p { font-size: 13.5px; }
  .hx-sol-more { align-self: flex-start; }
  .hx-cta-inner { flex-direction: column; align-items: flex-start; }
  .hx-faq-list details > p { padding-right: 8px; }
  .hx-about-copy p { max-width: none; }
  .hx-guide-pic { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .hx-hero h1 { font-size: 1.8rem; }
  .hx-hero-sub { font-size: 14px; }
  .hx-hero-art { height: 96%; }
  .hx-card { height: 104vw; min-height: 380px; }
  .hx-card-more { margin-top: 18px; }
  .hx-cta-actions { width: 100%; justify-content: space-between; }
  .hx-news-all { text-align: left; }
  .hx-guide-txt { padding: 20px 18px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-card-pic img, .hx-guide-pic img, .hx-sol-pic img { transition: none; }
  .hx-hero-art, .hx-hero-word { animation: none; }
  .hx-hero-video { display: none; }
  .hx-sol-rail { scroll-behavior: auto; }
}

/* 触屏没有真实 hover：点按后 :hover 会一直粘住，导致卡片配图停在放大态、
   同一屏里几张卡大小不一致。这里统一复位，!important 用于压过各类 :hover 的选择器特异性。 */
@media (hover: none) {
  .hx-card-pic img,
  .hx-news-pic img,
  .hx-guide-pic img,
  .hx-sol-pic img { transform: none !important; }
}