/* ═══════════════════════════════════════════════════════════
   SUMMON MECHA — site.css
   导航 / Hero / 生态 / 方案 / AI召唤 / 全球网络 / 伙伴 / 页脚
   ═══════════════════════════════════════════════════════════ */

/* ══════════════ NAV ══════════════ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  transition:background-color .5s var(--e-out), border-color .5s var(--e-out);
  border-bottom:1px solid transparent;
}
.nav::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  opacity:0;
  transition:opacity .5s var(--e-out);
}
.nav.is-stuck{ border-bottom-color:var(--hair); }
.nav.is-stuck::before{ opacity:1; }

.nav__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
  height:104px;
  display:flex;
  align-items:center;
  gap:clamp(22px,3.2vw,56px);
  transition:height .5s var(--e-out);
}
.nav.is-stuck .nav__inner{ height:84px; }

/* 品牌 */
.brand{ display:inline-flex; align-items:center; gap:13px; flex:none; margin-left:max(calc(var(--pad) * -0.95 - 95px), -120px); }   /* 与 Hero 内容左缘完全对齐 */
.brand__mark{ width:34px; height:34px; flex:none; }
.brand__mark svg{ width:100%; height:100%; overflow:visible; }
.brand__mark .mk-hex{
  fill:none; stroke:rgba(11,13,17,.26); stroke-width:1.2;
  transition:stroke .45s var(--e-out);
}
.brand__mark .mk-core{
  fill:var(--blue);
  transition:fill .45s var(--e-out);
  transform-origin:16px 16px;
  animation:mkPulse 4.2s var(--e-io) infinite;
}
.brand__mark .mk-dot{ fill:#dceaff; }
@keyframes mkPulse{
  0%,100%{ opacity:.9; transform:scale(1); }
  50%    { opacity:1;  transform:scale(.88); }
}
.brand:hover .mk-hex{ stroke:rgba(47,128,255,.9); }
.brand:hover .mk-core{ fill:#5fa4ff; }

/* 图片版标志（顶部导航）：方形槽位装不下 16:9 的图形，改为按高度自适应宽度 */
.brand__mark--img{ width:auto; height:52px; }
.brand__mark--img img{
  display:block; width:auto; height:100%;
  transition:transform .45s var(--e-out), filter .45s var(--e-out);
}
.brand:hover .brand__mark--img img{ transform:scale(1.05); filter:saturate(1.08) brightness(1.03); }

.brand__text{ display:flex; flex-direction:column; line-height:1.06; }
.brand__en{
  font-family:var(--mono);
  font-size:22px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--fg);
}
.brand__cn{
  font-size:14px;
  letter-spacing:.38em;
  color:var(--fg-3);
  margin-top:3px;
}

/* 菜单 */
.nav__menu{ display:flex; align-items:center; gap:clamp(18px,2.1vw,38px); margin-left:auto; }
.nav__menu a{
  position:relative;
  font-size:21px;
  color:var(--fg-2);
  letter-spacing:.03em;
  padding:8px 0;
  transition:color .35s var(--e-out);
  white-space:nowrap;
}
.nav__menu a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--e-out);
}
.nav__menu a:hover{ color:var(--fg); }
.nav__menu a:hover::after,
.nav__menu a.is-current::after{ transform:scaleX(1); }
.nav__menu a.is-current{ color:var(--fg); }

.nav__actions{ display:flex; align-items:center; gap:18px; flex:none; margin-right:max(calc(var(--pad) * -0.95 - 95px), -120px); }   /* 与左缘 logo 完全对称外扩 */
.nav__actions .btn{ font-size:21px; }

/* 语言切换 */
.lang{
  display:flex; align-items:center; gap:9px;
  padding:8px 14px;
  border:1px solid var(--hair);
  border-radius:var(--r-pill);
}
.lang__btn{
  font-family:var(--mono);
  font-size:16.5px;
  letter-spacing:.08em;
  color:var(--fg-3);
  transition:color .35s var(--e-out);
}
.lang__btn:hover{ color:var(--fg); }
.lang__btn.is-active{ color:var(--blue-ink); }
.lang__sep{ width:1px; height:11px; background:var(--hair-2); }

/* 汉堡 */
.burger{ display:none; width:42px; height:42px; position:relative; }
.burger span{
  position:absolute; left:11px; width:20px; height:1.5px;
  background:var(--fg);
  transition:transform .45s var(--e-out), opacity .3s var(--e-out);
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ top:24px; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ══════════════ HERO ══════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:130px;
  padding-bottom:52px;
  overflow:hidden;
  isolation:isolate;
}

.hero__bg{ position:absolute; inset:0; z-index:0; }

/* ── Hero 背景：真实部署场景轮播 ──
   4 个场景各一层，叠放做交叉淡入；当前层跑 Ken Burns 慢速推拉。
   这是一段"没有视频文件的视频"：不依赖外部素材，也不会有卡通机器人那种翻车风险。
   若 assets/video/hero.mp4 存在，视频会盖在轮播之上（见 .hero__video）。 */
.hero__reel{ position:absolute; inset:0; z-index:0; }

.hero__scene{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  filter:saturate(.85) contrast(1.02) brightness(1.04);
  transition:opacity 1.15s var(--e-out);
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.hero__scene.is-on{ opacity:1; }

.hero__scene[data-scene="mall"] { background-image:url("../img/hero-mall.jpg"); }
.hero__scene[data-scene="hotel"]{ background-image:url("../img/hero-hotel.jpg"); }
.hero__scene[data-scene="expo"] { background-image:url("../img/hero-expo.jpg"); }
.hero__scene[data-scene="event"]{ background-image:url("../img/hero-event.jpg"); }

/* 每个场景推拉方向不同，避免看出是同一套动作 */
.hero__reel .is-on[data-scene="mall"] { animation:kbA var(--dwell, 7s) var(--e-io) forwards; }
.hero__reel .is-on[data-scene="hotel"]{ animation:kbB var(--dwell, 7s) var(--e-io) forwards; }
.hero__reel .is-on[data-scene="expo"] { animation:kbC var(--dwell, 7s) var(--e-io) forwards; }
.hero__reel .is-on[data-scene="event"]{ animation:kbD var(--dwell, 7s) var(--e-io) forwards; }

@keyframes kbA{
  from{ transform:scale(1.05) translate3d(0,0,0); }
  to  { transform:scale(1.17) translate3d(-1.4%,-1.2%,0); }
}
@keyframes kbB{
  from{ transform:scale(1.17) translate3d(1.6%,1.2%,0); }
  to  { transform:scale(1.055) translate3d(0,0,0); }
}
@keyframes kbC{
  from{ transform:scale(1.07) translate3d(1.2%,.6%,0); }
  to  { transform:scale(1.19) translate3d(-1.6%,-1%,0); }
}
@keyframes kbD{
  from{ transform:scale(1.15) translate3d(-1.4%,1%,0); }
  to  { transform:scale(1.06) translate3d(.9%,-.8%,0); }
}

/* 换场时扫过一道光，强化"切换"的观感 */
.hero__sweep{
  position:absolute; inset:0; z-index:4;
  overflow:hidden; pointer-events:none;
}
.hero__sweep::before{
  content:"";
  position:absolute; top:-25%; bottom:-25%; left:0; width:34%;
  background:linear-gradient(100deg, transparent, rgba(47,128,255,.12) 48%, transparent);
  transform:translateX(-170%) skewX(-14deg);
}
.hero__sweep.is-run::before{ animation:sweepX 2.6s var(--e-io); }
@keyframes sweepX{ to{ transform:translateX(330%) skewX(-14deg); } }

/* 轮播进度条：让用户知道画面会自己走，而不是卡住了 */
.scenes__prog{
  display:block;
  width:min(100%, 360px);
  height:2px;
  margin-top:10px;
  border-radius:2px;
  overflow:hidden;
  background:rgba(11,13,17,.12);
}
.scenes__prog i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(47,128,255,.35), var(--blue));
}
.scenes__prog.is-run i{ animation:progFill var(--dwell, 7s) linear forwards; }
@keyframes progFill{ from{ width:0; } to{ width:100%; } }
/* 视频在放时隐藏进度条：它反映的是底层场景轮播，此时不跑，显示出来会误导 */
.scenes__prog.is-hidden{ opacity:0; visibility:hidden; }
.scenes__prog{ transition:opacity .5s var(--e-out), visibility .5s; }

.hero__video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 38%;   /* 素材机器人偏画面上部，上移取景避开下方桌面/地板 */
  opacity:0;
  /* 素材是暖绿调的家用场景，压饱和 + 轻微降亮让其沉进黑白蓝的科技调性 */
  filter:saturate(.52) contrast(1.06) brightness(1.0);
  transition:opacity 1.4s var(--e-out);
}
.hero__video.is-on{ opacity:1; }
/* 用户点了场景按钮 → 视频让位给场景照片（否则切的是被视频遮住的图层，点了没反应） */
.hero__video.is-off{ opacity:0; }

/* 场景色调层：叠在实拍场景上做轻微染色。浅色主题下只做一点点氛围，
   压得太重会把照片糊死——这里是「调味」不是「盖盖子」 */
.hero__bg .art{
  position:absolute; inset:-4%;
  z-index:1;
  transform:scale(1.04);
  mix-blend-mode:soft-light;
  opacity:.22;
  transition:opacity .9s var(--e-out);
}

.hero__grid{
  position:absolute; inset:0; z-index:2;
  background-image:
    linear-gradient(90deg, rgba(11,13,17,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,13,17,.055) 1px, transparent 1px);
  background-size:94px 94px;
  -webkit-mask-image:radial-gradient(125% 95% at 64% 44%, #000 8%, transparent 74%);
  mask-image:radial-gradient(125% 95% at 64% 44%, #000 8%, transparent 74%);
}
.hero__glow{
  position:absolute; z-index:2;
  width:70vw; height:70vw; max-width:1100px; max-height:1100px;
  right:-14vw; top:-16vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,128,255,.14), rgba(47,128,255,.035) 42%, transparent 68%);
  filter:blur(30px);
  pointer-events:none;
}
.hero__grade{
  position:absolute; inset:0; z-index:3;
  /* 科技白主题：用「白色遮罩」而不是压暗。
     左 40% 是文字区，白到接近实底保证深色文字可读；右侧放开让实拍场景露出来。
     顶部/底部各压一层白，保证导航栏与底部信息条的对比度。 */
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.975) 0%,
      rgba(255,255,255,.955) 26%,
      rgba(255,255,255,.86)  40%,
      rgba(255,255,255,.48)  56%,
      rgba(255,255,255,.14)  72%,
      rgba(255,255,255,.08)  86%,
      rgba(255,255,255,.34)  100%),
    linear-gradient(180deg, rgba(255,255,255,.88) 0%, transparent 16%, transparent 74%, rgba(255,255,255,.92) 100%);
  pointer-events:none;
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  width:100%;
}

.hero__copy{
  position:relative; z-index:4; max-width:760px;
}
/* 压在实拍场景上时的可读性兜底。
   浅色主题用「白色光晕」，深色文字在照片上也能立住。
   注意：标题用了 background-clip:text —— 不能加 text-shadow（阴影会从透明字里透出来糊成一团），
   也不加 filter:drop-shadow（会强制分层，把渐变色栅格化得发灰发虚）。
   标题的可读性交给左侧的白色遮罩，标题本身保持锐利。 */
.hero__sub{ text-shadow:0 1px 16px rgba(255,255,255,.92), 0 1px 2px rgba(255,255,255,.8); }
.hero__copy .eyebrow{ text-shadow:0 1px 10px rgba(255,255,255,.9); }

.hero__title{
  font-size:clamp(46px, 6.9vw, 112px);
  line-height:.98;
  font-weight:600;
  letter-spacing:-.035em;
  display:flex;
  flex-direction:column;
  margin-bottom:clamp(24px, 3.6vh, 42px);
  text-wrap:balance;
}
.hero__title > span{ display:block; }
.hero__title-b{
  background:linear-gradient(92deg,#0b0d11 0%,#0b0d11 34%,#2f5a9e 70%,#2F80FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
html[data-lang="en"] .hero__title{ font-size:clamp(42px, 6.2vw, 100px); }

.hero__sub{
  font-size:clamp(15px, 1.15vw, 19px);
  line-height:1.78;
  color:var(--fg-2);
  max-width:46ch;
  font-weight:300;
  margin-bottom:clamp(28px, 4.6vh, 56px);
}

/* ── Hero 版式微调（2026-09-13 需求）──
   ① 内容块整体向左探出一点；② 副标桌面端一行；
   ③ 标题错落：「一声召唤」更靠左，「机甲登场」右移到「声」字正下方。 */
.hero__copy{ margin-left:max(calc(var(--pad) * -0.95 - 95px), -120px); max-width:700px; }   /* 内容靠左+收窄，右缘让出机器人 */
.hero__title > span:first-child{ margin-left:-.06em; }
.hero__title > .hero__title-b{ margin-left:.96em; }
@media (min-width:1025px){
  .hero__sub{ max-width:none; white-space:nowrap; }
  /* 标题桌面端单行铺开（左侧空间充足，不再叠行） */
  .hero__title{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:.3em; width:max-content; max-width:none; }
  .hero__title > .hero__title-b{ margin-left:0; }
  html[data-lang="en"] .hero__title{ font-size:clamp(42px,5.2vw,84px); }
  html[data-lang="ja"] .hero__title{ font-size:clamp(40px,5vw,80px); }
}
@media (max-width:1024px){
  .hero__copy{ margin-left:0; }            /* 窄屏不留出探空间 */
  .hero__title > .hero__title-b{ margin-left:.5em; }
}

/* 场景切换。用 vh 参与间距：首屏高度富余时把左栏铺开、矮屏自动收紧，
   避免内容挤在顶部而下方留一大块空白（.hero 是 min-height:100svh）。 */
.scenes{ display:flex; flex-direction:column; gap:14px; margin-top:clamp(20px, 3.4vh, 44px); }
.scenes__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--fg-4);
}
.scenes__list{ display:flex; flex-wrap:wrap; gap:9px; }

/* 底部 */
.hero__foot{
  position:relative; z-index:5;
  margin-top:auto; padding-top:38px;
}
.hero__foot-in{ display:flex; align-items:center; gap:20px; }
.hero__hint{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3); white-space:nowrap;
}
.hero__line{
  height:1px; flex:1; max-width:180px;
  background:linear-gradient(90deg, var(--hair-2), transparent);
  position:relative; overflow:hidden;
}
.hero__line::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  animation:slide 3.4s var(--e-io) infinite;
}
@keyframes slide{
  0%  { transform:translateX(-100%); }
  60% { transform:translateX(100%); }
  100%{ transform:translateX(100%); }
}
.hero__marks{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--fg-3); margin-left:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 底部信息条压在实拍场景上，用白色光晕托底 */
.hero__hint,.hero__marks{ text-shadow:0 1px 12px rgba(255,255,255,.95), 0 1px 2px rgba(255,255,255,.85); }

/* ══════════════ 场景合成视觉（Hero） ══════════════ */
.art::before,.art::after{ content:""; position:absolute; inset:0; }

/* 购物中心：中庭透视 + 灯带 + 地面网格 */
.art--sc-mall{
  background:
    radial-gradient(56% 38% at 50% 4%, rgba(184,216,255,.26), transparent 62%),
    radial-gradient(42% 30% at 50% 50%, rgba(47,128,255,.20), transparent 72%),
    linear-gradient(180deg, #131922 0%, #0b1017 44%, #06080b 100%);
}
.art--sc-mall::before{           /* 天花板灯带 */
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.14) 0 2px, transparent 2px 96px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 26%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 26%);
  opacity:.85;
}
.art--sc-mall::after{            /* 地面透视网格 */
  background-image:
    repeating-linear-gradient(90deg, rgba(47,128,255,.24) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(47,128,255,.20) 0 1px, transparent 1px 62px);
  transform:perspective(460px) rotateX(74deg) scale(1.9);
  transform-origin:50% 100%;
  top:52%;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 78%);
  mask-image:linear-gradient(180deg, #000, transparent 78%);
  opacity:.72;
}

/* 五星酒店：大理石列柱 + 水晶灯暖光 */
.art--sc-hotel{
  background:
    radial-gradient(46% 34% at 50% 2%, rgba(255,222,170,.34), transparent 64%),
    radial-gradient(60% 44% at 50% 46%, rgba(212,168,106,.14), transparent 72%),
    linear-gradient(180deg, #1a1510 0%, #100d0a 46%, #070605 100%);
}
.art--sc-hotel::before{          /* 立柱 */
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.055) 0 2px,
    transparent 2px 24px,
    rgba(255,236,205,.10) 24px 30px,
    transparent 30px 150px);
  -webkit-mask-image:linear-gradient(180deg, transparent 6%, #000 26%, #000 82%, transparent 98%);
  mask-image:linear-gradient(180deg, transparent 6%, #000 26%, #000 82%, transparent 98%);
}
.art--sc-hotel::after{           /* 地面反射 */
  background:
    linear-gradient(180deg, transparent 60%, rgba(255,214,150,.10) 78%, rgba(255,255,255,.50) 100%),
    radial-gradient(60% 22% at 50% 96%, rgba(255,214,150,.16), transparent 70%);
}

/* CES 展会：射灯锥 + 蓝色舞台 */
.art--sc-expo{
  background:
    radial-gradient(50% 40% at 50% 88%, rgba(47,128,255,.32), transparent 68%),
    linear-gradient(180deg, #05070c 0%, #070b12 52%, #04060a 100%);
}
.art--sc-expo::before{           /* 顶部射灯光锥 */
  background:repeating-conic-gradient(from 168deg at 50% -14%,
    rgba(150,196,255,.15) 0deg 1.6deg,
    transparent 1.6deg 11deg);
  -webkit-mask-image:linear-gradient(180deg, #000 4%, transparent 68%);
  mask-image:linear-gradient(180deg, #000 4%, transparent 68%);
  opacity:.9;
}
.art--sc-expo::after{            /* 舞台灯带 + 展台 */
  background:
    linear-gradient(180deg, transparent 74%, rgba(47,128,255,.42) 75.4%, transparent 77%),
    linear-gradient(180deg, transparent 78%, rgba(255,255,255,.10) 78.6%, transparent 80%),
    radial-gradient(38% 14% at 50% 92%, rgba(255,255,255,.20), transparent 72%);
}

/* 企业活动：舞台光束 + 观众光点 */
.art--sc-event{
  background:
    radial-gradient(46% 36% at 50% 6%, rgba(122,166,255,.30), transparent 66%),
    radial-gradient(56% 40% at 22% 84%, rgba(47,128,255,.16), transparent 70%),
    linear-gradient(180deg, #0a0c14 0%, #0a0a12 48%, #05060a 100%);
}
.art--sc-event::before{          /* 光束 */
  background:repeating-linear-gradient(104deg,
    transparent 0 58px,
    rgba(160,200,255,.11) 58px 68px,
    transparent 68px 122px);
  -webkit-mask-image:linear-gradient(180deg, #000 2%, transparent 72%);
  mask-image:linear-gradient(180deg, #000 2%, transparent 72%);
}
.art--sc-event::after{           /* 观众光点（虚化） */
  background-image:
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.55) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 28% 92%, rgba(150,196,255,.5) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 46% 86%, rgba(255,255,255,.45) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 63% 93%, rgba(150,196,255,.5) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 81% 88%, rgba(255,255,255,.5) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 92% 94%, rgba(255,255,255,.40) 0 1.2px, transparent 2.4px);
  filter:blur(1.1px);
  opacity:.8;
}

/* 生态卡片合成视觉 */
.art--humanoid{
  background:
    radial-gradient(38% 52% at 50% 44%, rgba(47,128,255,.22), transparent 70%),
    linear-gradient(180deg, #eef3fa 0%, #dde5f0 100%);
}
.art--humanoid::before{           /* 中央光柱 */
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 34%, rgba(47,128,255,.22) 62%, transparent);
  left:46%; right:46%;
  filter:blur(9px);
}
.art--humanoid::after{            /* 人形剪影 */
  background:radial-gradient(16% 21% at 50% 24%, rgba(0,0,0,.85), transparent 72%),
             linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 44%, rgba(0,0,0,.72) 84%, transparent 96%);
  left:38%; right:38%;
  -webkit-mask-image:linear-gradient(180deg, transparent 8%, #000 20%, #000 90%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 8%, #000 20%, #000 90%, transparent 100%);
}

/* 服务机器人：配送机身剪影 —— 托盘 + 圆角机身 + 光效面罩。
   （旧版是同心圆雷达意象，图面太虚、像空卡，2026-09-13 重做） */
.art--service{
  background:
    radial-gradient(46% 34% at 50% 16%, rgba(120,180,255,.28), transparent 70%),
    /* 托盘横杆 + 托盘立柱 */
    linear-gradient(rgba(16,18,24,.88), rgba(16,18,24,.88)) 50% 21% / 54% 4% no-repeat,
    linear-gradient(rgba(16,18,24,.55), rgba(16,18,24,.55)) 50% 25% / 3.2% 5% no-repeat,
    /* 地面投影 */
    radial-gradient(56% 10% at 50% 87%, rgba(11,13,17,.16), transparent 72%),
    linear-gradient(180deg, #eef2f8 0%, #dfe6f0 100%);
}
.art--service::before{            /* 机身：圆角方体 + 侧面模块缝 */
  left:32%; right:32%; top:28%; bottom:17%;
  border-radius:18% 18% 22% 22% / 16% 16% 24% 24%;
  background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) 18% 50% / 2.5% 58% no-repeat,
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)) 82% 50% / 2.5% 58% no-repeat,
    linear-gradient(180deg, #2a2e38 0%, #14161c 100%);
  box-shadow:0 10px 26px -12px rgba(11,13,17,.45);
}
.art--service::after{             /* 面罩光带 + 双眼 */
  left:38%; right:38%; top:41%; height:13%;
  border-radius:999px;
  background:
    radial-gradient(9% 46% at 30% 50%, #7db4ff 0 42%, transparent 60%),
    radial-gradient(9% 46% at 70% 50%, #7db4ff 0 42%, transparent 60%),
    linear-gradient(180deg, rgba(47,128,255,.85), rgba(28,74,156,.9));
  box-shadow:0 0 18px rgba(47,128,255,.55), inset 0 1px 2px rgba(255,255,255,.35);
}

.art--ai{
  background:
    radial-gradient(50% 50% at 50% 46%, rgba(47,128,255,.24), transparent 68%),
    linear-gradient(180deg, #edf2fb 0%, #dee7f5 100%);
}
.art--ai::before{                 /* 神经元节点 */
  background-image:
    radial-gradient(circle at 22% 30%, rgba(190,220,255,.75) 0 1.6px, transparent 3px),
    radial-gradient(circle at 40% 18%, rgba(47,128,255,.85) 0 2px, transparent 3.6px),
    radial-gradient(circle at 58% 34%, rgba(190,220,255,.6) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 74% 22%, rgba(47,128,255,.7) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 30% 58%, rgba(47,128,255,.7) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 52% 66%, rgba(190,220,255,.7) 0 1.6px, transparent 3px),
    radial-gradient(circle at 70% 54%, rgba(47,128,255,.85) 0 2px, transparent 3.6px),
    radial-gradient(circle at 84% 66%, rgba(190,220,255,.55) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 44% 84%, rgba(47,128,255,.6) 0 1.6px, transparent 3px);
}
.art--ai::after{
  background:
    linear-gradient(28deg, transparent 48.6%, rgba(47,128,255,.30) 49.2%, transparent 50%) 0 0/100% 100%,
    linear-gradient(-34deg, transparent 48.6%, rgba(120,180,255,.22) 49.2%, transparent 50%) 0 0/100% 100%;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 48%, #000, transparent 76%);
  mask-image:radial-gradient(60% 60% at 50% 48%, #000, transparent 76%);
}

.art--industrial{
  background:
    radial-gradient(44% 42% at 34% 62%, rgba(47,128,255,.20), transparent 70%),
    linear-gradient(180deg, #eef2f7 0%, #dfe6ee 100%);
}
.art--industrial::before{         /* 机械臂几何 */
  background:
    linear-gradient(58deg, transparent 43%, rgba(255,255,255,.14) 43.5%, rgba(255,255,255,.14) 46%, transparent 46.5%),
    linear-gradient(-24deg, transparent 55%, rgba(47,128,255,.30) 55.5%, rgba(47,128,255,.30) 58%, transparent 58.5%);
  -webkit-mask-image:radial-gradient(70% 70% at 40% 60%, #000, transparent 82%);
  mask-image:radial-gradient(70% 70% at 40% 60%, #000, transparent 82%);
}
.art--industrial::after{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 60%);
  mask-image:linear-gradient(180deg, transparent, #000 60%);
}

/* 定制机器人：模块化头甲剪影 —— 天线 + 头盔 + 可换装面甲。
   （旧版是淡网格+散点，几乎不可见，2026-09-13 重做） */
.art--custom{
  background:
    radial-gradient(50% 44% at 30% 26%, rgba(47,128,255,.20), transparent 70%),
    radial-gradient(46% 42% at 78% 72%, rgba(150,110,255,.20), transparent 72%),
    /* 天线杆 + 天线顶珠 */
    linear-gradient(rgba(16,18,24,.75), rgba(16,18,24,.75)) 50% 15% / 2.2% 9% no-repeat,
    radial-gradient(closest-side, rgba(150,110,255,.95) 0 40%, rgba(150,110,255,.28) 55% 100%, transparent 100%) 50% 11.5% / 3% 3% no-repeat,
    /* 地面投影 */
    radial-gradient(56% 10% at 50% 88%, rgba(11,13,17,.16), transparent 72%),
    linear-gradient(180deg, #f1f0fa 0%, #e4e2f2 100%);
}
.art--custom::before{             /* 头盔：圆角方甲 + 顶部高光 */
  left:31%; right:31%; top:24%; bottom:28%;
  border-radius:20% 20% 26% 26% / 24% 24% 30% 30%;
  background:
    linear-gradient(160deg, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(180deg, #2b2f3a 0%, #14161c 78%, #101218 100%);
  box-shadow:0 12px 28px -12px rgba(11,13,17,.5), inset 0 -2px 6px rgba(47,128,255,.25);
}
.art--custom::after{              /* 面甲光缝（模块化换装位）+ 左右耳模块 */
  left:0; right:0; top:0; bottom:0;
  background:
    /* 左右耳模块 */
    linear-gradient(rgba(47,128,255,.75), rgba(47,128,255,.55)) 30.5% 52% / 2.6% 14% no-repeat,
    linear-gradient(rgba(47,128,255,.75), rgba(47,128,255,.55)) 69.5% 52% / 2.6% 14% no-repeat,
    /* 面甲光缝 */
    linear-gradient(180deg, rgba(120,170,255,.95), rgba(47,128,255,.55)) 50% 48% / 40% 7% no-repeat,
    /* 下颌模块缝 */
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 50% 68% / 22% 2.6% no-repeat;
  border-radius:0;
  -webkit-mask-image:radial-gradient(78% 84% at 50% 50%, #000 62%, transparent 78%);
  mask-image:radial-gradient(78% 84% at 50% 50%, #000 62%, transparent 78%);
}

/* ══════════════ 3. SOLUTIONS ══════════════ */
.sec--sol{ background:var(--bg); }
/* 整块左移，与 Hero 文案 / AI 召唤中心左缘对齐。
   ⚠ 必须用 relative left 做纯视觉偏移——改 .wrap 的 margin 会破坏 auto 居中，
   把内容整体推到视口外（已经踩过一次）。 */
.sec--sol .wrap{ position:relative; left:max(calc(var(--pad) * -0.95 - 95px), -120px); }
/* 轮播轨道向右出血到视口右缘：左侧已对齐 AI 召唤中心，
   右侧剩余空白用来多露卡（卡片尺寸不变）。 -120px 抵消上面的 relative left；
   超出视口的部分被 body 的 overflow-x:hidden 裁掉。 */
.sec--sol .carousel__track{
  margin-right:calc(min((var(--wrap) - 100vw) / 2, 0px) - var(--pad) - 120px);
}
@media (max-width:1024px){
  .sec--sol .wrap{ left:0; }               /* 窄屏不留出探空间，同 hero__copy */
  .sec--sol .carousel__track{
    margin-right:calc(min((var(--wrap) - 100vw) / 2, 0px) - var(--pad));
    grid-auto-columns:clamp(200px,
      calc((100vw - var(--pad) * 2 - 4.5 * clamp(14px, 1.5vw, 24px)) / 5.5), 264px);
  }
}
/* 区块副标一行铺开（右侧有出血留白）。仅中文——英/日文案过长，
   强制单行会溢出被裁，恢复自动换行。 */
@media (min-width:1025px){
  html[data-lang="zh"] .sec--sol .head--split .lead{ white-space:nowrap; max-width:none; }
}

.grid--ind{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.4vw, 22px);
  scroll-margin-top:110px;
}
.ind{
  position:relative;
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-sm);
  transition:border-color .55s var(--e-out), transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.ind:hover{
  transform:translateY(-6px);
  border-color:rgba(47,128,255,.45);
  box-shadow:var(--sh-lift);
}
.ind__media{
  aspect-ratio:16/11;
  border-bottom:1px solid var(--hair);
}
/* 行业卡片的实拍图保持通透，只压一层极淡的蓝调统一冷暖 */
.ind__media .media__photo{ filter:saturate(.82) contrast(1.02) brightness(1.02); }
.ind__media::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, rgba(47,128,255,.07) 0%, transparent 46%, rgba(255,255,255,.16) 100%);
}
.ind:hover .art{ transform:scale(1.07); }
.ind:hover .media__photo{ transform:scale(1.05); }
.ind__body{ padding:clamp(22px, 2vw, 32px); }
.ind__body h3{
  font-size:clamp(19px, 1.6vw, 25px);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.35;
  margin-bottom:9px;
}
.ind__body p{
  font-size:17.5px;
  line-height:1.7;
  color:var(--fg-2);
  font-weight:400;
}

/* ── 方案轮播：横向 scroll-snap + 左右箭头 ── */
.carousel{ position:relative; scroll-margin-top:110px; }
.carousel__track{
  display:grid;
  grid-auto-flow:column;
/* 卡宽按"可视宽度 ÷ 5.5"反推：左缘对齐 AI 召唤中心、右缘吃满屏幕时，
   一屏恒定 5 张整卡 + 半张。可视宽度 = 100vw − 左侧空出 + 120px 左移补偿。
   下限 240px 保住窄屏一次约 1 张半的旧行为。 */
  grid-auto-columns:clamp(240px,
    calc((100vw - max((100vw - var(--wrap)) / 2, 0px) - var(--pad) + 120px
          - 4.5 * clamp(14px, 1.5vw, 24px)) / 5.5),
    400px);
  gap:clamp(14px, 1.5vw, 24px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 22px;              /* hover 上浮与阴影留出空间 */
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 96%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 96%, transparent 100%);
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track .ind{ scroll-snap-align:start; }
/* 鼠标拖拽 / 滚轮横滚 / 自动缓滑时：关掉 smooth 与 snap，逐帧改 scrollLeft 才跟手 */
.carousel__track.is-auto{ scroll-behavior:auto; scroll-snap-type:none; }
/* 自动滑动期间关掉卡片的事件命中：卡片从静止的鼠标下面滑过时，
   每张卡都会触发一遍上浮/阴影/滤镜长过渡（1s 级），这是"一卡一顿"的元凶 */
.carousel__track.is-auto .ind{ pointer-events:none; }
@media (hover:hover) and (pointer:fine){
  .carousel__track{ cursor:grab; }
  .carousel__track.is-drag{ cursor:grabbing; user-select:none; scroll-behavior:auto; scroll-snap-type:none; }
  .carousel__track.is-drag .ind{ pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  .carousel__track{ cursor:auto; }
}
/* 机器人卡：缩小版（无实拍图的用合成视觉补足） */
.ind--robot .ind__media{ aspect-ratio:16/10; }
.ind--robot .ind__body{ padding:18px 20px 22px; }
.ind--robot .ind__body h3{ font-size:16px; margin-bottom:6px; }
.ind--robot .ind__body p{
  font-size:13px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ind--robot .tag{ background:rgba(47,128,255,.1); color:var(--blue-ink); }
.carousel__nav{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:2px;
}
.cbtn{
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--hair);
  background:var(--surface);
  color:var(--fg-2);
  font-size:17px;
  cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .3s, color .3s, transform .3s, opacity .3s;
}
.cbtn:hover{ border-color:rgba(47,128,255,.5); color:var(--blue-ink); transform:translateY(-2px); }
.cbtn:disabled{ opacity:.32; cursor:default; transform:none; }
.cbtn:focus-visible{ outline:2px solid var(--blue-ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .carousel__track{ scroll-behavior:auto; }
}

/* 行业场景合成视觉 */
.art--retail{
  background:
    radial-gradient(46% 50% at 50% 22%, rgba(255,236,205,.26), transparent 66%),
    linear-gradient(180deg, #faf6f0 0%, #efe8dd 100%);
}
.art--retail::before{
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.07) 0 2px, transparent 2px 20px,
    rgba(255,222,170,.14) 20px 26px, transparent 26px 112px);
  -webkit-mask-image:linear-gradient(110deg, transparent 4%, #000 44%, transparent 92%);
  mask-image:linear-gradient(110deg, transparent 4%, #000 44%, transparent 92%);
}
.art--retail::after{
  background:linear-gradient(180deg, transparent 58%, rgba(255,214,150,.16) 78%, rgba(255,255,255,.45));
}

.art--hotel{
  background:
    radial-gradient(44% 44% at 50% 12%, rgba(255,222,170,.30), transparent 66%),
    linear-gradient(180deg, #faf6f0 0%, #f0e9de 100%);
}
.art--hotel::before{
  background:repeating-linear-gradient(90deg,
    rgba(255,240,215,.10) 0 3px, transparent 3px 30px,
    rgba(11,13,17,.10) 30px 46px);
  -webkit-mask-image:linear-gradient(180deg, transparent 8%, #000 34%, #000 84%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 8%, #000 34%, #000 84%, transparent 100%);
}
.art--hotel::after{
  background:
    radial-gradient(52% 26% at 50% 96%, rgba(255,214,150,.20), transparent 72%),
    linear-gradient(180deg, transparent 62%, rgba(255,255,255,.42));
}

.art--events{
  background:
    radial-gradient(50% 44% at 50% 96%, rgba(47,128,255,.30), transparent 68%),
    linear-gradient(180deg, #eef2fa 0%, #dfe6f3 100%);
}
.art--events::before{
  background:repeating-conic-gradient(from 172deg at 50% -12%,
    rgba(160,200,255,.16) 0deg 1.8deg, transparent 1.8deg 12deg);
  -webkit-mask-image:linear-gradient(180deg, #000 4%, transparent 72%);
  mask-image:linear-gradient(180deg, #000 4%, transparent 72%);
}
.art--events::after{
  background:
    linear-gradient(180deg, transparent 72%, rgba(47,128,255,.5) 73.4%, transparent 75%),
    radial-gradient(40% 16% at 50% 92%, rgba(255,255,255,.22), transparent 72%);
}

.art--tourism{
  background:
    radial-gradient(48% 46% at 30% 34%, rgba(160,110,255,.26), transparent 68%),
    radial-gradient(44% 44% at 76% 62%, rgba(47,128,255,.28), transparent 68%),
    linear-gradient(180deg, #f2f0fa 0%, #e5e2f2 100%);
}
.art--tourism::before{
  background:linear-gradient(120deg,
    transparent 26%, rgba(47,128,255,.24) 44%, rgba(160,110,255,.24) 58%, transparent 76%);
  filter:blur(14px);
}
.art--tourism::after{
  background-image:
    radial-gradient(circle at 20% 78%, rgba(255,255,255,.6) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 42% 66%, rgba(180,150,255,.65) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 64% 84%, rgba(140,190,255,.6) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 86% 70%, rgba(255,255,255,.45) 0 1.3px, transparent 2.6px);
  opacity:.75;
}

.art--edu{
  background:
    radial-gradient(50% 46% at 50% 40%, rgba(47,128,255,.20), transparent 70%),
    linear-gradient(180deg, #eef3fa 0%, #dfe8f2 100%);
}
.art--edu::before{
  background-image:
    linear-gradient(90deg, rgba(47,128,255,.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47,128,255,.16) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(68% 68% at 50% 46%, #000, transparent 84%);
  mask-image:radial-gradient(68% 68% at 50% 46%, #000, transparent 84%);
}
.art--edu::after{
  background:linear-gradient(94deg, transparent 22%, rgba(255,255,255,.28) 46%, transparent 62%);
  -webkit-mask-image:linear-gradient(160deg, transparent 46%, #000 52%, #000 62%, transparent 68%);
  mask-image:linear-gradient(160deg, transparent 46%, #000 52%, #000 62%, transparent 68%);
}

.art--enterprise{
  background:
    radial-gradient(52% 46% at 62% 30%, rgba(120,170,240,.20), transparent 70%),
    linear-gradient(180deg, #eef2f8 0%, #e0e7ef 100%);
}
.art--enterprise::before{
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.10) 0 1px, transparent 1px 26px,
    rgba(255,255,255,.045) 26px 52px, transparent 52px 78px);
  -webkit-mask-image:linear-gradient(180deg, transparent 12%, #000 44%, #000 88%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 12%, #000 44%, #000 88%, transparent 100%);
  transform:perspective(340px) rotateY(-16deg) scale(1.16);
}
.art--enterprise::after{
  background:linear-gradient(180deg, transparent 56%, rgba(47,128,255,.24) 82%, rgba(255,255,255,.48));
}

.console{
  position:relative;
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--sh-card);
  overflow:hidden;
  transition:border-color .5s var(--e-out), box-shadow .6s var(--e-out);
}
.console::before{
  content:""; position:absolute; top:0; left:12%; right:12%; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(47,128,255,.85), transparent);
  opacity:.7;
}
.console:focus-within{
  border-color:rgba(47,128,255,.55);
  box-shadow:0 0 0 1px rgba(47,128,255,.18), 0 34px 70px -34px rgba(47,128,255,.45);
}
/* ⚠️ 首屏提问条上挂着 .anim，而 heroIn 是 fill-mode:forwards —— 动画结束后
   opacity/transform 以「动画优先级」参与层叠，普通声明压不过它。
   所以这里不做整体 opacity 的 busy 态（压暗整条提问条本来就难看），
   忙碌反馈交给 .console__state 的 blink + 下方步骤点。 */
.console.is-busy{ pointer-events:none; }

.console__bar{
  display:flex; align-items:center; gap:14px;
  padding:14px clamp(18px,2vw,26px);
  border-bottom:1px solid var(--hair);
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.12em;
  color:var(--fg-3);
}
.console__dots{ display:flex; gap:6px; }
.console__dots i{
  width:8px; height:8px; border-radius:50%;
  background:var(--ink-400);
}
.console__dots i:first-child{ background:rgba(47,128,255,.7); }
.console__state{ margin-left:auto; color:var(--blue-ink); }
.console__state.is-busy{ animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* 标签行：说明这条输入是干什么的 */
.console__label{
  display:block;
  padding:clamp(24px,2.6vw,32px) clamp(24px,2.6vw,34px) 0;
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-3);
}

/* 单行提问行：提示符 + 输入 + 提交按钮同一行 */
.console__field{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
  padding:clamp(16px,1.9vw,26px) clamp(24px,2.6vw,34px) clamp(20px,2.3vw,28px);
}
.console__prompt{
  font-family:var(--mono);
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.6;
  color:var(--blue-ink);
  flex:none;
}
/* 用 <input> 而不是 <textarea>：单行条不该随长文本长高，且原生支持 Enter 提交。
   字号 ≥16px —— iOS Safari 在 <16px 的输入框聚焦时会自动放大整页。 */
.console__field input{
  flex:1; min-width:0;
  background:none;
  border:0;
  outline:none;
  font-family:var(--sans);
  font-size:clamp(17px,1.65vw,23px);
  line-height:1.6;
  font-weight:300;
  letter-spacing:.005em;
  color:var(--fg);
}
.console__field input::placeholder{ color:var(--fg-4); }
.console__field .btn{ flex:none; }

.console__foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:0 clamp(20px,2.2vw,28px) clamp(18px,2vw,24px);
}
.console__examples{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:15px;
  color:var(--fg-3);
}
.ex{
  padding:8px 16px;
  border:1px solid var(--hair);
  border-radius:var(--r-pill);
  font-size:15px;
  color:var(--fg-3);
  transition:all .35s var(--e-out);
}
.ex:hover{ color:var(--fg); border-color:var(--hair-2); background:rgba(255,255,255,.04); }

/* 匹配链路：原先是结果面板里的竖排 .result__chain，首屏太高，改为横向内联小节拍。
   平时半透明待命，提交后依次点亮（JS 加 .is-on）。 */
.console__steps{
  display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap;
  margin-left:auto;
  font-size:14px;
  color:var(--fg-4);
  opacity:.5;
  transition:opacity .4s var(--e-out);
}
.console--hero.is-busy .console__steps{ opacity:1; }
.console__steps .step{ position:relative; padding-left:14px; white-space:nowrap; }
.console__steps .step::before{
  content:""; position:absolute; left:0; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--ink-300);
  transition:background .35s var(--e-out), box-shadow .35s var(--e-out);
}
.console__steps .step.is-on{ color:var(--fg); }
.console__steps .step.is-on::before{
  background:var(--blue);
  box-shadow:0 0 10px rgba(47,128,255,.8);
}

/* ── 首屏提问条：出结果后收成一条 ──
   收掉的正是「标签行 + 示例/步骤行」，腾出的高度让结果面板落进首屏可见区，
   总高基本不变、结果不会掉到折叠线以下。
   输入框保留（内容也留着），可以直接改一改再问一次。 */
.console--hero.is-done .console__label,
.console--hero.is-done .console__foot{ display:none; }
.console--hero.is-done .console__bar{ border-bottom:0; }

/* 结果面板 */
.result{
  margin-top:clamp(26px,3vw,44px);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:border-color .6s var(--e-out), box-shadow .6s var(--e-out);
}
.result.is-done{
  border-color:rgba(47,128,255,.38);
  box-shadow:0 34px 70px -40px rgba(47,128,255,.5);
}
.result__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--hair);
}
.result__badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; letter-spacing:.03em;
  color:var(--fg-3);
}
.result__badge i{
  width:7px; height:7px; border-radius:50%;
  background:var(--ink-500);
  transition:background .4s var(--e-out);
}
.result.is-done .result__badge{ color:var(--fg); }
.result.is-done .result__badge i{ background:var(--blue); box-shadow:0 0 0 4px rgba(47,128,255,.18); }
.result__id{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--fg-4);
}

/* 结果网格：首屏内联后栏宽固定 ≤760px，4 格各约 190px，
   所以字号与内边距都要比原来的整段区块收紧，否则中文值会折行撑高。
   （原 .result__chain / .chain 竖排链路已废弃，改由 .console__steps 承担。） */
.result__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.rcell{
  padding:clamp(14px,1.4vw,18px) clamp(12px,1.3vw,16px);
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column; gap:7px;
}
.rcell:last-child{ border-right:0; }
.rcell__k{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-4);
}
.rcell__v{
  font-size:clamp(13px,1.05vw,16px);
  font-weight:500;
  letter-spacing:-.008em;
  line-height:1.45;
  color:var(--fg);
}

.result__note{
  padding:11px clamp(16px,1.8vw,22px);
  font-size:11.5px;
  line-height:1.7;
  color:var(--fg-4);
  font-weight:300;
}

/* ── 首屏结果面板：未生成时完全不占位 ── */
.result--hero{
  display:none;
  margin-top:16px;
}
.result--hero.is-shown{ display:block; }
.result--hero .result__head{ padding:12px clamp(16px,1.8vw,22px); }

/* ══════════════ 5. GLOBAL NETWORK ══════════════ */
.sec--net{ background:linear-gradient(180deg, var(--bg), var(--bg-soft) 42%, var(--bg)); }

.mapbox{
  position:relative;
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  overflow:hidden;
  padding:clamp(20px,2.6vw,48px) clamp(16px,2.4vw,44px) clamp(14px,1.8vw,26px);
  background:
    radial-gradient(72% 68% at 50% 46%, rgba(47,128,255,.10), transparent 70%),
    var(--surface);
  box-shadow:var(--sh-card);
}
.mapbox::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(11,13,17,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,13,17,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent 78%);
  mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent 78%);
  pointer-events:none;
}
.mapbox__map{ position:relative; z-index:2; }
.mapbox__map svg{ width:100%; height:auto; display:block; overflow:visible; }

.mapbox__legend{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:10px 26px;
  justify-content:center;
  margin-top:clamp(14px,2vw,26px);
  padding-top:18px;
  border-top:1px solid var(--hair);
}
.lg{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:16px; letter-spacing:.08em;
  color:var(--fg-2);
}
.lg__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 10px rgba(47,128,255,.9);
}
/* 二级枢纽（东京 / 新加坡）在图上更淡，图例同步 */
.lg__dot--dim{ background:rgba(47,128,255,.45); box-shadow:none; }

/* 窄屏上世界地图等比缩到 37%，城市标签变成 3.5px 没法看 ——
   那里改用这行文字列城市，桌面端隐藏 */
.mapbox__cities{
  display:none;
  position:relative; z-index:2;
  margin-top:14px;
  font-family:var(--mono); font-size:17px; letter-spacing:.06em; line-height:2;
  color:var(--fg-2); text-align:center; line-height:2;
}

/* 地图 SVG 元素（由 map.js 渲染）—— 进入视口加 .is-live 才开始播放 */
.wm-band{ opacity:0; }
#mapHost.is-live .wm-band{
  animation:dotIn .9s var(--e-soft) both;
  animation-delay:var(--bd, 0ms);
}
@keyframes dotIn{
  from{ opacity:0; transform:translateY(7px); }
  to  { opacity:1; transform:none; }
}

.wm-dot{ fill:rgba(11,13,17,.24); }
/* 重点市场国境：中国 / 美国境内整片转蓝，是图上"两个主角"的底层表达 */
.wm-dot--cn,
.wm-dot--us{ fill:rgba(47,128,255,.42); }

.wm-arcs{ opacity:0; }
#mapHost.is-live .wm-arcs{ opacity:1; transition:opacity .5s var(--e-out); }
.wm-arc{
  fill:none;
  stroke:url(#arcGrad);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
#mapHost.is-live .wm-arc{
  animation:arcDraw 3.2s var(--e-io) forwards;
  animation-delay:var(--ad, 0ms);
}
@keyframes arcDraw{ to{ stroke-dashoffset:0; } }

.wm-spark{
  fill:#2F80FF;
  opacity:0;
}
#mapHost.is-live .wm-spark{
  animation:sparkIn .6s var(--e-out) forwards;
  animation-delay:calc(var(--ad, 0ms) + 1400ms);
}
@keyframes sparkIn{ to{ opacity:.95; } }

.wm-hubs{ opacity:0; }
#mapHost.is-live .wm-hubs{ opacity:1; transition:opacity .4s var(--e-out) .55s; }

.wm-hub-core{ fill:var(--blue); }
.wm-hub-core--dim{ fill:rgba(47,128,255,.55); }
.wm-hub-halo{
  fill:none;
  stroke:rgba(47,128,255,.7);
  stroke-width:1;
  transform-origin:center;
  transform-box:fill-box;
  animation:hubPulse 3.2s var(--e-io) infinite;
  animation-delay:var(--ad, 0ms);
}
@keyframes hubPulse{
  0%  { transform:scale(.35); opacity:.9; }
  70% { transform:scale(2.8); opacity:0; }
  100%{ transform:scale(2.8); opacity:0; }
}
.wm-label{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.12em;
  fill:rgba(11,13,17,.85);
}
/* 国名标签（中国）：比城市名大一档、颜色更实 —— 读作"这一整片是中国"，
   而不是某个点。总部落在上海，由那里的枢纽点 + 「总部」标签体现 */
.wm-label--country{
  font-size:17px;
  font-weight:600;
  letter-spacing:.22em;
  fill:rgba(11,13,17,.92);
}

/* 数据 */
.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-top:clamp(40px,5vw,76px);
  border-top:1px solid var(--hair);
}
.stat{
  padding:clamp(28px,3vw,44px) clamp(16px,2vw,32px);
  border-right:1px solid var(--hair);
  display:flex; flex-direction:column; gap:10px;
}
.stat:last-child{ border-right:0; }
.stat__n{
  font-size:clamp(38px,4.4vw,68px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#0b0d11 16%,#2b4a7a 76%,#2F80FF 116%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__k{
  font-size:16px;
  color:var(--fg-3);
  letter-spacing:.04em;
}

/* ══════════════ 6. PARTNERS ══════════════ */
.sec--partners{ background:var(--bg); }

.pgrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
}
.pcard{
  position:relative;
  padding:clamp(30px,3.6vw,58px);
  border:1px solid var(--hair);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:border-color .55s var(--e-out), transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.pcard:hover{
  transform:translateY(-5px);
  border-color:rgba(47,128,255,.45);
  box-shadow:var(--sh-lift);
}
.pcard__glow{
  position:absolute; z-index:-1;
  width:60%; aspect-ratio:1;
  right:-18%; top:-30%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,128,255,.16), transparent 68%);
  filter:blur(30px);
  transition:opacity .6s var(--e-out);
  opacity:.6;
}
.pcard--alt .pcard__glow{
  background:radial-gradient(circle, rgba(150,110,255,.14), transparent 68%);
}
.pcard:hover .pcard__glow{ opacity:1; }
.pcard__label{
  font-family:var(--mono); font-size:15px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-ink);
  margin-bottom:18px;
}
.pcard h3{
  font-size:clamp(23px,2.3vw,36px);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.02em;
  margin-bottom:14px;
  max-width:26ch;
}
.pcard > p{
  font-size:20px;
  line-height:1.7;
  color:var(--fg-2);
  font-weight:400;
  margin-bottom:30px;
  max-width:40ch;
}
.pcard .btn{ margin-bottom:32px; }
.pcard__pts{
  display:flex; flex-direction:column; gap:12px;
  width:100%;
  padding-top:26px;
  border-top:1px solid var(--hair);
}
.pcard__pts li{
  position:relative;
  padding-left:28px;
  font-size:18.5px;
  color:var(--fg-2);
}
.pcard__pts li::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:10px; height:1px;
  background:var(--blue);
  transform:translateY(-50%);
}

/* ══════════════ 7. COMPANY BAND ══════════════ */
.band{
  position:relative;
  padding-block:clamp(80px,10vh,150px);
  border-top:1px solid var(--hair);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(47,128,255,.09), transparent 70%),
    var(--bg-soft);
  overflow:hidden;
}
.band__in{ max-width:1100px; }
.band__lead{
  font-size:clamp(26px,3.4vw,52px);
  line-height:1.22;
  font-weight:600;
  letter-spacing:-.025em;
  margin-bottom:26px;
  text-wrap:balance;
}
.band__body{
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.8;
  color:var(--fg-2);
  font-weight:300;
  max-width:70ch;
  margin-bottom:42px;
}
.tags{ display:flex; flex-wrap:wrap; gap:12px; }

/* ══════════════ FOOTER ══════════════ */
.footer{
  border-top:1px solid var(--hair);
  background:var(--bg);
  padding-top:clamp(56px,7vw,96px);
  padding-bottom:34px;
}
.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(32px,5vw,90px);
  padding-bottom:clamp(44px,5vw,72px);
  border-bottom:1px solid var(--hair);
}
.brand--footer{ margin-bottom:24px; }
.brand--footer .brand__en{ font-size:22px; }
.brand--footer .brand__cn{ font-size:14px; }
.footer__tag{
  display:flex; flex-direction:column; gap:8px;
  font-size:17px; color:var(--fg-2);
}
.footer__tag em{
  font-style:normal;
  font-family:var(--mono);
  font-size:13px; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-4);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);
}
.fcol{ display:flex; flex-direction:column; gap:13px; }
.fcol h4{
  font-family:var(--mono);
  font-size:14.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-4);
  margin-bottom:5px;
}
.fcol a,.flink{
  font-size:18px;
  white-space:nowrap;
  color:var(--fg-2);
  text-align:left;
  transition:color .35s var(--e-out), transform .35s var(--e-out);
  width:fit-content;
}
.fcol a:hover,.flink:hover{ color:var(--blue-ink); transform:translateX(3px); }

/* 双邮箱行：灰色小标签 + 邮箱地址。
   标签放在锚点外面——后台会把 #siteEmail 的文本整个替换成配置邮箱，
   标签写进锚点会被覆盖掉。 */
.fmail{ display:flex; align-items:baseline; gap:9px; width:fit-content; }
.fmail__k{
  font-size:16px;               /* 中文标签用正文字体——mono 族对中文是回退渲染，发虚 */
  font-weight:500;
  letter-spacing:.06em;
  color:var(--fg-2);
  flex:none;
}

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding-top:26px;
  font-size:18px;
  color:var(--fg-3);
}
.footer__beian{ display:flex; align-items:center; gap:14px; }
.footer__beian a{ color:inherit; text-decoration:none; }
.footer__beian a:hover{ color:var(--blue-ink); }
.footer__loc{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; }

/* ══════════════ MODAL ══════════════ */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__bg{
  position:absolute; inset:0;
  background:rgba(12,14,18,.44);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .45s var(--e-out);
}
.modal.is-open .modal__bg{ opacity:1; }
.modal__panel{
  position:relative;
  width:min(100%, 620px);
  max-height:calc(100svh - 48px);
  overflow-y:auto;
  padding:clamp(28px,3.4vw,48px);
  border:1px solid var(--hair-2);
  border-radius:var(--r-xl);
  background:var(--surface);
  box-shadow:0 50px 110px -40px rgba(16,24,40,.42), 0 0 0 1px rgba(47,128,255,.06);
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
}
.modal.is-open .modal__panel{ opacity:1; transform:none; }
.modal__x{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--hair);
  color:var(--fg-3);
  transition:all .35s var(--e-out);
}
.modal__x svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.modal__x:hover{ color:var(--fg); border-color:var(--hair-2); background:rgba(11,13,17,.05); }

.modal__label{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue-ink);
  margin-bottom:14px;
}
.modal__title{
  font-size:clamp(24px,2.4vw,34px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.2;
  margin-bottom:12px;
}
.modal__sub{
  font-size:14px; line-height:1.7; color:var(--fg-2); font-weight:300;
  margin-bottom:30px;
}

/* 表单 */
.form{ display:flex; flex-direction:column; gap:16px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field > span{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-4);
}
.field input,.field textarea{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--hair-2);
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:14.5px;
  font-weight:300;
  color:var(--fg);
  outline:none;
  resize:vertical;
  transition:border-color .35s var(--e-out), background-color .35s var(--e-out), box-shadow .35s var(--e-out);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-4); }
.field input:focus,.field textarea:focus{
  border-color:rgba(47,128,255,.65);
  background:rgba(47,128,255,.035);
  box-shadow:0 0 0 3px rgba(47,128,255,.12);
}
.field.is-error input,.field.is-error textarea{ border-color:#ff5a5a; }
/* 蜜罐字段：对人类不可见，机器人填了就会被后端静默丢弃 */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; }
.form__foot{
  display:flex; justify-content:flex-end; gap:12px;
  margin-top:10px;
}

/* ══════════════ TOAST ══════════════ */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:1100;
  transform:translate(-50%, 140%);
  max-width:min(92vw, 560px);
  padding:15px 26px;
  border:1px solid rgba(47,128,255,.38);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 22px 50px -22px rgba(16,24,40,.4), 0 0 0 4px rgba(47,128,255,.07);
  font-size:13.5px;
  color:var(--fg);
  text-align:center;
  transition:transform .6s var(--e-soft), opacity .5s var(--e-out);
  opacity:0;
  pointer-events:none;
}
.toast.is-show{ transform:translate(-50%, 0); opacity:1; }

/* ══════════════ 6b. FAQ ══════════════ */
.sec--faq{ background:var(--bg-soft, #f7f9fc); }
.faq__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(24px,3vw,44px);
}
.faq__item{
  background:var(--surface, #fff);
  border:1px solid var(--hair);
  border-radius:var(--r-lg, 16px);
  padding:clamp(20px,2.2vw,30px);
  transition:transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.faq__item:hover{ transform:translateY(-3px); box-shadow:var(--sh-card, 0 18px 44px -20px rgba(11,13,17,.16)); }
.faq__item h3{ font-size:clamp(17px,1.4vw,21px); font-weight:600; letter-spacing:-.012em; margin-bottom:10px; }
.faq__item p{ font-size:16.5px; line-height:1.72; color:var(--fg-2); }

/* ══ Hero CTA（F1）+ 卡片角标（F2）/报价按钮（F3）—— 超简、低噪声 ══ */
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:clamp(24px,3.4vh,42px); }
@media (max-width:520px){ .hero__cta .btn{ width:100%; } }
.ind{ position:relative; }
.ind__type{
  position:absolute; top:12px; left:12px; z-index:5;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--fg); background:rgba(255,255,255,.85);
  border:1px solid var(--hair-2); border-radius:999px;
  padding:4px 10px; backdrop-filter:blur(6px);
}
.t-sale{ color:#1B5FD9; border-color:rgba(47,128,255,.4); }
.t-custom{ color:#6a4bd8; border-color:rgba(120,100,240,.4); }
.card__quote{
  margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; border-bottom:1px solid var(--blue);
  padding:2px 0 4px; font-size:14.5px; color:var(--blue-ink);
  cursor:pointer; transition:gap .3s var(--e-out);
}
.card__quote::after{ content:"→"; transition:transform .3s var(--e-out); }
.card__quote:hover{ gap:12px; }

/* ══ F4 FAQ 手风琴 + F5 信任行 + F6 跳过链接（超简） ══ */
.faq__item p{ display:none; }
.faq__item.is-open p{ display:block; }
.faq__item h3{ cursor:pointer; margin-bottom:0; position:relative; padding-right:26px; }
.faq__item h3::after{ content:"+"; position:absolute; right:2px; top:0; color:var(--fg-3); font-weight:400; transition:transform .3s var(--e-out); }
.faq__item.is-open h3::after{ content:"–"; }
.faq__item.is-open h3{ margin-bottom:10px; }
.trustline{
  text-align:center; font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color:var(--fg-3); padding:clamp(18px,2vw,28px) 16px; border-top:1px solid var(--hair);
}
.skip-link{
  position:fixed; left:16px; top:-60px; z-index:200;
  background:var(--blue-ink); color:#fff; padding:10px 18px; border-radius:10px;
  transition:top .25s ease-out; font-size:14px;
}
.skip-link:focus{ top:12px; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

/* ══ F8: 非首屏渲染优化 ══ */
.sec--sol,.sec--net,.sec--partners,.sec--faq,.band,.footer{ content-visibility:auto; contain-intrinsic-size:auto 760px; }

/* ══ 站点公告条（A4）：低噪声细条 ══ */
.site-notice{
  position:sticky; top:0; z-index:120;
  background:rgba(47,128,255,.08); color:var(--blue-ink);
  font-size:14.5px; text-align:center;
  padding:9px 16px; border-bottom:1px solid rgba(47,128,255,.18);
  backdrop-filter:blur(8px);
}