@charset utf-8;
/* ===========================================================
   盛讯软件 · 蓝金沉浸暗调版 · 样式表
   骨架：全出血 Hero / Bento 拼贴 / 纵向时间轴 / 瀑布流客户墙 / 玻璃导航
   =========================================================== */
@import url("./tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nv-800);color:var(--w-2);
  font-family:var(--f-body);font-size:var(--fs-body);
  line-height:1.85;letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gd-400)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:400;
  color:var(--w-1);line-height:1.35;letter-spacing:.015em}
p{margin:0 0 var(--s3)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 44px}

.gold{color:var(--gd-500)}

/* ---------- 金色按钮 ---------- */
.gbtn{display:inline-flex;align-items:center;justify-content:center;padding:15px 36px;
  font-size:var(--fs-sm);letter-spacing:.18em;color:var(--gd-400);
  border:1px solid var(--gd-600);background:transparent;border-radius:var(--r);
  cursor:pointer;transition:all .35s cubic-bezier(.4,0,.2,1)}
.gbtn:hover{background:var(--gd-400);color:var(--nv-900);border-color:var(--gd-400);
  box-shadow:0 8px 30px rgba(168,132,63,.30)}
.gbtn-fill{background:var(--gd-400);color:var(--nv-900);border-color:var(--gd-400)}
.gbtn-fill:hover{background:var(--gd-300);border-color:var(--gd-300);color:var(--nv-900)}

/* ===========================================================
   通栏顶栏（结构与 sxbw 完全同源，仅配色按蓝金暗调适配）
   原「悬浮玻璃胶囊 + 右侧电话球」方案废弃原因：
   胶囊导航与全出血 Hero 争夺视觉焦点，且非通栏形态在
   多页之间缺乏稳定的品牌锚点。改为通栏后：
     · 左 logo / 中导航 / 右热线+CTA，与 sxbw 信息层级一致
     · 深蓝半透明玻璃 + 底部金色细线，融入暗调而不打断沉浸感
     · 下滑后背景加深（is-solid），保证正文区可读
   =========================================================== */
.masthead{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(6,26,51,.62);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-w);
  transition:background .35s,border-color .35s,box-shadow .35s}
.masthead.is-solid{background:rgba(3,13,26,.90);
  border-bottom-color:var(--line-g);
  box-shadow:0 1px 28px rgba(2,8,16,.55)}
.mast-inner{position:relative;max-width:1280px;margin:0 auto;padding:0 48px;
  height:74px;display:flex;align-items:center;gap:var(--s5)}
.mast-logo{flex:0 0 auto;line-height:0}
/* LOGO 38px -> 46px：顶栏内容高 74px，46px 占 62%，
   上下各留 14px 呼吸空间，品牌存在感更强不显空。 */
.mast-logo img{height:46px;width:auto}

/* 导航项用 space-between 铺满 nav 盒子：项间距随可用空间自动放大，
   不再把 7 项挤在左侧、右边留一大块空白。
   gap 只作为最小间距；徽标隐藏时 nav 能拿到全部横向空间。 */
/* 左右 padding 8px：首项胶囊向左扩 8px、末项胶囊向右扩 8px，
   没有这 8px 就会被 nav 的 overflow:hidden 各切掉一截（"头尾显示不全"）。 */
.mast-nav{display:flex;gap:clamp(10px,1.15vw,17px);align-items:center;
  justify-content:space-between;padding:0 8px;
  flex:1 1 auto;min-width:0;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
/* 导航项：悬停 = 淡金底 + 下划线自中心向两侧展开 + 文字微发光。
   底色用 inset 的负值向外扩 8px，视觉上有"被选中"的胶囊感，
   但不占布局宽度（否则 7 项 + 徽标 + 电话 + CTA 排不下 1280 容器）。 */
.mast-nav a{position:relative;font-size:15px;font-weight:500;color:var(--w-2);
  padding:7px 0;transition:color .28s ease,text-shadow .28s ease;flex:0 0 auto}
.mast-nav a::before{content:"";position:absolute;inset:0 -8px;border-radius:10px;
  background:radial-gradient(130% 180% at 50% 132%,rgba(232,200,138,.20),rgba(232,200,138,.04) 72%);
  border:1px solid rgba(232,200,138,.20);
  opacity:0;transform:scale(.92);
  transition:opacity .3s ease,transform .32s cubic-bezier(.34,1.36,.5,1);
  pointer-events:none}
/* 下划线落在胶囊底边上（left/right 各 8px 正好是胶囊内宽），
   与底边描边融合成"底边中央被点亮"，而不是两条平行线。 */
.mast-nav a::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(232,200,138,0),var(--gd-400) 50%,rgba(232,200,138,0));
  transform:scaleX(0);transition:transform .34s cubic-bezier(.4,0,.2,1)}
.mast-nav a:hover{color:var(--gd-400);text-shadow:0 0 16px rgba(232,200,138,.45)}
.mast-nav a:hover::before{opacity:1;transform:scale(1)}
.mast-nav a:hover::after{transform:scaleX(1)}
/* 当前页：同一套特效常驻，下划线更亮更粗一点，与 hover 区分 */
.mast-nav a.on{color:var(--gd-400);text-shadow:0 0 13px rgba(232,200,138,.32)}
.mast-nav a.on::before{opacity:1;transform:scale(1);
  background:radial-gradient(130% 180% at 50% 132%,rgba(232,200,138,.11),rgba(232,200,138,.02) 72%)}
.mast-nav a.on::after{transform:scaleX(1);height:3px;bottom:0}

/* ---- 当前位置指示：当前板块徽标 + 顶栏阅读进度 ----
   需求（Devin 10-26）：顶栏要能看出"我现在看的是哪个板块"。
   做法：① 导航与电话之间放一枚板块徽标，随滚动切换到最近的
        .void-head 章节（01 — 产品体系 / 03 — 六大解决方案…）；
      ② 顶栏底边 2px 金色进度条表示整页阅读进度。
   徽标 pointer-events:none，不拦截点击；滚动到第一屏之前自动隐藏。 */
/* 当前板块徽标：绝对定位在顶栏左下方，**完全脱离横向布局**。
   这样无论徽标显示与否，导航拿到的宽度恒定，7 项用 space-between
   始终铺满（间距 38px），不会出现"展开徽标就把导航挤紧"的忽宽忽窄。
   （历史坑：徽标一旦占位，nav 可用宽度从 689 掉到 567，间距从 38 掉到 18。） */
.mast-section{position:absolute;left:48px;bottom:-32px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  height:25px;padding:0 13px;border:1px solid var(--line-g);border-radius:999px;
  background:rgba(6,26,51,.86);font-size:12px;letter-spacing:.04em;color:var(--gd-400);
  white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(-5px);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:opacity .3s,transform .3s;pointer-events:none}
.mast-section.show{opacity:1;transform:none}
/* 空间不足时（窄屏）徽标自动折叠：只留章节号；再不够就整体隐藏。
   由 foot.html 的 fit() 依据 nav.scrollWidth 动态切换，不靠固定断点。 */
.mast-section.fold{font-size:0;padding:0 9px}
..mast-section.fold::before{content:attr(data-num);font-size:12px;letter-spacing:.04em}
.mast-section.hidden{visibility:hidden}
.mast-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:rgba(255,255,255,.05)}
.mast-bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gd-500),var(--gd-400));
  transition:width .12s linear}

.mast-contact{flex:0 0 auto;display:flex;align-items:center;gap:var(--s4)}
.mast-tel{display:flex;flex-direction:column;line-height:1.25;
  padding-right:var(--s4);border-right:1px solid var(--line-g)}
.mast-tel-label{font-size:10px;color:var(--w-4);letter-spacing:.14em}
.mast-tel-num{font-family:var(--f-disp);font-size:15px;font-weight:700;
  color:var(--w-1);white-space:nowrap;transition:color .25s}
.mast-tel-num:hover{color:var(--gd-400)}
.mast-cta{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;
  padding:11px 24px;font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;
  background:var(--gd-500);color:var(--nv-900);
  border-radius:var(--r);transition:all .3s}
.mast-cta:hover{background:var(--gd-300);color:var(--nv-900)}

/* 汉堡按钮 */
.mast-toggle{display:none;flex-direction:column;justify-content:center;
  gap:5px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.mast-toggle span{display:block;width:22px;height:1.5px;background:var(--w-1);
  transition:transform .3s,opacity .3s}

/* ---------- 移动端抽屉 ---------- */
.drawer{position:fixed;inset:0;z-index:200;background:var(--nv-900);
  padding:24px;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.drawer.is-open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line-g)}
.drawer-head img{height:36px;width:auto}
.drawer-close{background:none;border:0;font-size:32px;line-height:1;
  color:var(--w-3);cursor:pointer;padding:0 4px}
.drawer-nav{flex:1;overflow-y:auto;padding-top:12px}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;border-bottom:1px solid var(--line-w);
  font-size:17px;font-weight:600;color:var(--w-1)}
.drawer-nav a span{color:var(--gd-600);font-size:15px}
.drawer-foot{padding-top:20px;border-top:1px solid var(--line-g);
  display:flex;flex-direction:column;gap:12px}
.drawer-tel{font-size:15px;font-weight:600;color:var(--w-1)}
.drawer-cta{display:flex;align-items:center;justify-content:center;padding:14px;
  background:var(--gd-500);color:var(--nv-900);font-size:var(--fs-body);
  letter-spacing:.06em;border-radius:var(--r)}

/* ===========================================================
   Hero · 全出血影像 + 底部浮出内容 + 玻璃指标卡
   =========================================================== */
/* 注意：.stage 必须是 block/flex-column 布局。
   若用 flex-row，.stage-content 与 .stage-float 会挤在同一行，
   窄屏下指标卡会被裁切。 */
.stage{position:relative;min-height:min(100vh,980px);
  display:flex;flex-direction:column;align-items:stretch;
  padding:calc(74px + var(--s8)) 0 0;overflow:hidden}
/* Hero 图容器比例锁定 8/5，与 hero.webp(1.60) 一致。
   关键：不能用 100vh 硬撑 —— 移动端 390×953 是竖屏 0.41，
   横图(1.60)塞进去会被 cover 裁得只剩中间一条。
   改为「高度随宽度走 + 最小高度兜底」，任何断点比例都恒定。 */
.stage-media{position:absolute;inset:0;z-index:0}
/* 桌面端：主体（金环+宝石）推到画面右侧，左半屏留给文案。
   object-position 72% 水平 + 46% 垂直，把主体从中央移到右侧三分之一。 */
.stage-media img{width:100%;height:100%;object-fit:cover;
  object-position:72% 46%;transform:scale(1.04)}
/* 遮罩改为「左侧纵向压暗 + 底部收尾」，既保证左侧文案可读，
   又保留右侧主体的通透感（不再全屏压黑） */
.stage-veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,13,26,.90) 0%,rgba(3,13,26,.62) 34%,rgba(3,13,26,.12) 62%,transparent 100%),
    linear-gradient(180deg,rgba(3,13,26,.50) 0%,transparent 26%,rgba(6,26,51,.72) 74%,var(--nv-800) 100%)}

.stage-content{position:relative;z-index:1;max-width:var(--container);width:100%;
  margin:0 auto;padding:0 44px var(--s7)}
.stage-tag{display:inline-flex;align-items:center;gap:11px;
  padding:8px 20px;border:1px solid var(--line-g);border-radius:999px;
  background:rgba(6,26,51,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:var(--fs-xs);letter-spacing:.2em;color:var(--gd-400);
  margin-bottom:var(--s5)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--gd-400);
  box-shadow:0 0 0 0 rgba(232,200,138,.6);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(232,200,138,.55)}
  70%{box-shadow:0 0 0 11px rgba(232,200,138,0)}
  100%{box-shadow:0 0 0 0 rgba(232,200,138,0)}
}
.stage-title{font-size:var(--fs-hero);line-height:1.12;letter-spacing:.01em;
  color:#fff;text-shadow:0 2px 18px rgba(2,8,16,.75),0 6px 50px rgba(2,8,16,.55)}
.stage-lead{margin-top:var(--s5);font-size:17px;line-height:2;
  color:var(--w-3);max-width:560px}
.stage-actions{margin-top:var(--s6);display:flex;gap:var(--s3);flex-wrap:wrap}

/* 玻璃指标卡：横向悬浮，压在 Hero 底部 */
.stage-float{position:relative;z-index:1;max-width:var(--container);width:100%;
  margin:auto auto 0;padding:0 44px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-w);
  border:1px solid var(--glass-brd);border-radius:var(--r-lg);overflow:hidden;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.gstat{background:var(--glass);padding:var(--s5) var(--s4);text-align:center}
.gstat-v{font-family:var(--f-num);font-size:46px;line-height:1;
  color:var(--gd-400);letter-spacing:.02em}
.gstat-v em{font-style:normal;font-size:20px;color:var(--gd-600);margin-left:3px}
.gstat-k{margin-top:10px;font-size:var(--fs-xs);color:var(--w-4);letter-spacing:.16em}

.stage-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:1;width:1px;height:44px;background:linear-gradient(180deg,
    transparent,rgba(212,175,106,.7))}
.stage-scroll span{display:block;width:1px;height:14px;background:var(--gd-500);
  animation:drop 1.9s ease-in-out infinite}
@keyframes drop{0%{transform:translateY(-14px);opacity:0}
  40%{opacity:1}100%{transform:translateY(44px);opacity:0}}

/* ===========================================================
   内容区骨架
   =========================================================== */
.void{padding:var(--s9) 0;position:relative}
.void-dim{background:var(--nv-900)}
.void-head{margin-bottom:var(--s8);max-width:760px}
.void-eyebrow{font-size:var(--fs-xs);letter-spacing:.26em;color:var(--gd-600);
  margin-bottom:var(--s3);display:flex;align-items:center;gap:12px}
.void-eyebrow::before{content:"";width:34px;height:1px;background:var(--gd-600);flex:0 0 34px}
.void-title{font-size:var(--fs-h2);line-height:1.28}
.void-lead{margin-top:var(--s4);font-size:16px;line-height:1.9;color:var(--w-3)}

/* ===========================================================
   01 Bento 不等高拼贴
   =========================================================== */
.bento{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(180px,auto);gap:var(--s4)}
.bn{position:relative;background:var(--nv-700);border:1px solid var(--line-w);
  border-radius:var(--r-lg);padding:var(--s6) var(--s5);overflow:hidden;
  transition:all .45s cubic-bezier(.4,0,.2,1)}
.bn:hover{border-color:var(--line-g);transform:translateY(-5px);
  box-shadow:0 16px 50px rgba(2,8,16,.55)}
/* 高卡跨两行 */
.bn-tall{grid-row:span 2;display:flex;flex-direction:column}
/* 宽卡跨两列 */
.bn-wide{grid-column:span 2}
.bn-gold{background:linear-gradient(140deg,rgba(212,175,106,.16),rgba(212,175,106,.04));
  border-color:var(--line-g);display:flex;align-items:center}
.bn-num{font-family:var(--f-num);font-size:var(--fs-xs);color:var(--gd-600);
  letter-spacing:.2em;margin-bottom:var(--s3)}
.bn h3{font-size:var(--fs-h3);margin-bottom:var(--s3)}
.bn p{color:var(--w-3);font-size:var(--fs-sm);line-height:1.9;margin:0}
.bn-mark{position:absolute;right:-16px;bottom:-16px;width:150px;height:150px;
  color:var(--gd-600);opacity:.16;pointer-events:none}
.bn-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.bn-chips span{padding:6px 14px;border:1px solid var(--line-g);border-radius:999px;
  font-size:var(--fs-xs);color:var(--gd-400);letter-spacing:.06em}
.bn-quote{display:flex;gap:var(--s4);align-items:flex-start}
.q-mark{font-family:var(--f-disp);font-size:62px;line-height:.7;
  color:var(--gd-600);opacity:.7;flex:0 0 auto}
.bn-quote p{font-family:var(--f-disp);font-size:19px;line-height:1.7;
  color:var(--w-1);margin:0}

/* ===========================================================
   02 产品 · 纵向时间轴
   =========================================================== */
.spine{position:relative;padding-left:0}
.spine::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-g) 12%,
    var(--line-g) 88%,transparent)}
.spine-node{position:relative;display:grid;
  grid-template-columns:56px minmax(0,1fr) 32px;gap:var(--s5);
  align-items:center;padding:var(--s5) var(--s5) var(--s5) 46px;
  border-radius:var(--r-lg);transition:all .4s}
.spine-node:hover{background:var(--nv-700)}
.spine-idx{font-family:var(--f-num);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.1em;color:var(--gd-600);position:relative;z-index:1;
  padding-top:2px}
.spine-node:hover .spine-idx{color:var(--gd-400)}
.spine-main h3{font-size:22px;margin-bottom:10px}
.spine-main p{color:var(--w-3);font-size:15px;line-height:1.85;margin:0;
  max-width:640px}
.spine-go{justify-self:end;font-size:18px;color:var(--w-4);transition:all .35s}
.spine-node:hover .spine-go{color:var(--gd-400);transform:translateX(6px)}

/* ===========================================================
   03 双图拼贴 + 竖排条目
   =========================================================== */
/* 双图拼贴：两张图比例刻意不同（4:3 与 3:4），形成错落。
   素材本身即 1.33 与 0.75，容器用 aspect-ratio 锁死，不做拉伸。 */
.duo{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--s4);
  align-items:end;margin-bottom:var(--s8)}
/* align-self:start 关键：grid item 默认 stretch 会覆盖 aspect-ratio。
   duo-media-b 素材是竖图 800x1060(0.75)，必须保持竖向不被拉正。 */
.duo-media{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-w);align-self:start;width:100%}
.duo-media img{width:100%;height:auto;display:block;transition:transform .9s}
.duo-media:hover img{transform:scale(1.04)}
/* 横图 4:3 */
.duo-media-a img{aspect-ratio:4/3;object-fit:cover}
/* 竖图 3:4 —— 移动端也保持竖向，不强行改成横图 */
.duo-media-b img{aspect-ratio:3/4;object-fit:cover}
.duo-media figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:44px 20px 16px;font-size:var(--fs-xs);color:var(--w-3);letter-spacing:.1em;
  background:linear-gradient(to bottom,transparent,rgba(3,13,26,.92) 62%)}
.duo-media figcaption span{color:var(--gd-500);font-family:var(--f-num);
  letter-spacing:.16em;margin-right:10px}

.stack{border-top:1px solid var(--line-w)}
.stack-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s6);
  padding:var(--s6) 0;border-bottom:1px solid var(--line-w);
  transition:background .4s}
.stack-row:hover{background:var(--nv-700)}
.stack-n{font-family:var(--f-num);font-size:30px;line-height:1;
  color:var(--gd-600);letter-spacing:.04em}
.stack-t h3{font-size:var(--fs-h3);margin-bottom:10px}
.stack-t p{color:var(--w-3);font-size:var(--fs-sm);line-height:1.9;margin:0;max-width:720px}

/* ===========================================================
   04 客户墙 · 瀑布流错落
   =========================================================== */
/* 裁边版 LOGO：画布贴合实体且高度已统一。
   column-count 无法控制格子宽度（由容器决定），故改为「行内 flex 居中 + 固定高」。
   每个格子高度固定，img 用 height:100% + width:auto 显示到最大。
   3 列时格子内容宽 ~380px：方标显示高约 110px，细长标（如金伯利 5.54:1）
   显示宽约 380px、高约 69px —— 都在可读范围内。 */
/* 用 grid 而非 column-count：
   column-count 在部分布局下会把所有格子排成单列（实测 16 个挤成一竖排），
   grid 行列明确可控，也能靠 margin-top 做错落。 */
.cascade{display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s3);padding:0 44px;max-width:1100px;margin:0 auto}
/* 占位严格统一：固定高度 150px + 3 等宽列 → 16 个格子尺寸完全一致。
   明确 height 覆盖 grid item 默认 align-self:stretch，不会被同行最高内容拉高。
   （用户反馈"大小不一"的主因：错落 margin + stretch 导致格子高矮不齐） */
.cas{height:150px;margin-bottom:0;border-radius:var(--r-lg);
  background:var(--nv-700);border:1px solid var(--line-w);
  padding:0;transition:all .4s;overflow:hidden}
/* 固定高度居中容器，保证 logo 显示尺寸一致 */
/* 格子内容高 150px：容纳方标（萃華 1x 高 135px）。
   注意：**不能用 height:100%** —— 那会把所有 logo 拉成等高，
   面积统一的成果被覆盖（实测全部 116px 高、面积差 3.57 倍）。
   img 用自身固有尺寸（HTML width/height 属性）+ max 约束。 */
.cas-in{display:flex;align-items:center;justify-content:center;
  height:100%;padding:var(--s2)}
.cas:hover{border-color:var(--line-g);transform:translateY(-3px)}
/* 关键：flex 容器里 img 的 width/height:auto + max-height:100%
   行为不可靠（实测仍被拉成等高 134px）。
   改用「按 HTML 属性尺寸渲染 + 仅超限时缩放」：
   img 已在 HTML 里带 width/height（1x 固有尺寸），
   CSS 只对超限者用 max-width/max-height 收口，其余保持原样。
   注意不能写死 height/width 的百分比，否则又回到等高模式。 */
.cas img{opacity:.86;transition:opacity .4s}
/* 超出格子时才缩放（细长标宽度超 309px 的会被收口） */
.cas img[style*="--w"]{max-width:100%}
.cas-in img{flex:0 0 auto}
.cas:hover img{opacity:1}

/* --- desk (1.00x) --- */
.cascade .cas:nth-child(1) img{width:142px;height:105px}
.cascade .cas:nth-child(2) img{width:110px;height:106px}
.cascade .cas:nth-child(3) img{width:119px;height:106px}
.cascade .cas:nth-child(4) img{width:208px;height:72px}
.cascade .cas:nth-child(5) img{width:116px;height:106px}
.cascade .cas:nth-child(6) img{width:288px;height:52px}
.cascade .cas:nth-child(7) img{width:116px;height:106px}
.cascade .cas:nth-child(8) img{width:79px;height:106px}
.cascade .cas:nth-child(9) img{width:173px;height:86px}
.cascade .cas:nth-child(10) img{width:173px;height:87px}
.cascade .cas:nth-child(11) img{width:98px;height:106px}
.cascade .cas:nth-child(12) img{width:208px;height:72px}
.cascade .cas:nth-child(13) img{width:152px;height:99px}
.cascade .cas:nth-child(14) img{width:155px;height:96px}
.cascade .cas:nth-child(15) img{width:196px;height:76px}
.cascade .cas:nth-child(16) img{width:235px;height:64px}

/* ===========================================================
   05 FAQ · 折叠单列
   =========================================================== */
.deepqa{max-width:900px}
.dqa{border-bottom:1px solid var(--line-w)}
.dqa summary{list-style:none;cursor:pointer;position:relative;
  padding:var(--s5) 56px var(--s5) 0;
  font-family:var(--f-disp);font-size:20px;color:var(--w-1);
  transition:color .3s}
.dqa summary::-webkit-details-marker{display:none}
.dqa summary:hover{color:var(--gd-400)}
.dqa-mark{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:26px;height:26px;flex:0 0 26px}
.dqa-mark::before,.dqa-mark::after{content:"";position:absolute;
  background:var(--gd-500);transition:transform .35s}
.dqa-mark::before{left:0;right:0;top:12px;height:1px}
.dqa-mark::after{top:0;bottom:0;left:12px;width:1px}
.dqa[open] .dqa-mark::after{transform:scaleY(0)}
.dqa p{padding:0 56px var(--s5) 0;color:var(--w-3);font-size:var(--fs-body);
  line-height:1.95;margin:0;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===========================================================
   06 收尾 · 居中金光
   =========================================================== */
.finale{position:relative;padding:var(--s9) 0 var(--s10);
  text-align:center;overflow:hidden;background:var(--nv-900)}
.finale-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(212,175,106,.16) 0%,transparent 66%)}
.finale-in{position:relative}
.finale-eyebrow{font-size:var(--fs-xs);letter-spacing:.3em;color:var(--gd-600);
  margin-bottom:var(--s4)}
.finale h2{font-size:var(--fs-h1);margin-bottom:var(--s5)}
.finale p{color:var(--w-3);font-size:16px;line-height:1.9;
  max-width:640px;margin:0 auto var(--s7)}
.finale-actions{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}

/* ===========================================================
   页脚
   =========================================================== */
.deep-foot{background:var(--nv-900);padding:var(--s8) 0 var(--s5);
  border-top:1px solid var(--line-w)}
.df-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.25fr;
  gap:var(--s6);padding-bottom:var(--s6);border-bottom:1px solid var(--line-w)}
.df-logo{height:40px;width:auto;margin-bottom:var(--s4)}
.df-intro{color:var(--w-4);font-size:var(--fs-sm);line-height:1.9;max-width:350px}
.df-qr{margin-top:var(--s5);display:flex;align-items:center;gap:14px}
.df-qr img{width:86px;height:86px;background:#fff;padding:6px;border-radius:var(--r)}
.df-qr span{font-size:var(--fs-xs);color:var(--w-4);letter-spacing:.08em}
.df-col h4{font-size:var(--fs-xs);letter-spacing:.22em;color:var(--gd-500);
  margin-bottom:var(--s4);text-transform:uppercase}
.df-col li{margin-bottom:13px}
.df-col a{color:var(--w-3);font-size:var(--fs-sm);transition:color .3s}
.df-col a:hover{color:var(--gd-400)}
.df-contact li{font-size:var(--fs-sm);line-height:1.85;color:var(--w-3)}
.df-contact span{display:block;font-size:var(--fs-xs);color:var(--w-4);
  letter-spacing:.12em;margin-bottom:3px}
.df-base{padding-top:var(--s4);display:flex;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--w-4)}

/* ===========================================================
   内页（同一套沉浸语言）
   =========================================================== */
.phead{position:relative;padding:180px 0 var(--s7);overflow:hidden;
  border-bottom:1px solid var(--line-w)}
.phead::before{content:"";position:absolute;top:-45%;right:-12%;width:760px;height:760px;
  background:radial-gradient(circle,var(--gd-glow) 0%,transparent 64%);pointer-events:none}
.phead-in{max-width:var(--container);margin:0 auto;padding:0 44px;position:relative}
.crumb{font-size:var(--fs-xs);letter-spacing:.16em;color:var(--w-4);margin-bottom:var(--s4)}
.crumb a{color:var(--w-3)}
.crumb a:hover{color:var(--gd-400)}
.phead h1{font-size:var(--fs-h1)}
.phead p{margin-top:var(--s4);color:var(--w-3);font-size:16px;max-width:700px}

.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.lcard{display:block;background:var(--nv-700);border:1px solid var(--line-w);
  border-radius:var(--r-lg);overflow:hidden;transition:all .45s}
.lcard:hover{transform:translateY(-6px);border-color:var(--line-g);
  box-shadow:0 18px 54px rgba(2,8,16,.55)}
.lcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--nv-800)}
.lcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.lcard:hover .lcard-img img{transform:scale(1.06)}
.lcard-body{padding:var(--s5)}
.lcard-body h3{font-size:var(--fs-h3);margin-bottom:10px}
.lcard-body p{color:var(--w-3);font-size:var(--fs-sm);line-height:1.8;margin:0 0 12px}
.lcard time{font-family:var(--f-num);font-size:var(--fs-xs);color:var(--w-4);letter-spacing:.14em}

.article-in{max-width:var(--container);margin:0 auto;padding:0 44px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7)}
.prose{font-size:16px;line-height:2.05;color:var(--w-2)}
.prose h2{font-size:var(--fs-h3);margin:var(--s6) 0 var(--s3)}
.prose h3{font-size:20px;margin:var(--s5) 0 var(--s2);color:var(--gd-500)}
.prose h4{font-size:var(--fs-body);margin:var(--s4) 0 var(--s2);color:var(--gd-600)}
.prose img{border-radius:var(--r-lg);margin:var(--s4) 0}
.prose p{margin:var(--s3) 0}
.prose ul,.prose ol{margin:var(--s3) 0 var(--s4);padding-left:22px}
.prose ul li{list-style:disc;color:var(--w-3)}
.prose ol li{list-style:decimal;color:var(--w-3)}
.prose ul li::marker,.prose ol li::marker{color:var(--gd-500)}
.prose strong{color:var(--w-1);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--line-w);margin:var(--s6) 0}
.prose a{color:var(--gd-400)}
.prose a:hover{text-decoration:underline}
/* 正文净化：后台内联深色样式压在暗底上会失效，统一重置 */
.prose p,.prose div,.prose span,.prose li{background:transparent !important}
.prose p,.prose li,.prose div{color:var(--w-3) !important}
.prose h1,.prose h2,.prose h3,.prose h4{background:transparent !important}
.prose h1,.prose h2{color:var(--w-1) !important}
.prose strong{color:var(--w-1) !important}
.prose span[style*="font-size"]{color:var(--w-4) !important;letter-spacing:.16em;font-size:12px !important}

.side-box{background:var(--nv-700);border:1px solid var(--line-w);
  border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s4)}
.side-box h4{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--gd-500);
  margin-bottom:var(--s4);text-transform:uppercase}
.side-box li{padding:7px 0;border-bottom:1px solid var(--line-w);
  font-size:var(--fs-sm);color:var(--w-3)}
.side-box a:hover{color:var(--gd-400)}

.pager{display:flex;justify-content:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s8)}
.pager a,.pager span{padding:10px 18px;border:1px solid var(--line-w);
  border-radius:var(--r);font-size:var(--fs-sm);color:var(--w-3)}
.pager .page-num-current{background:var(--gd-500);color:var(--nv-900);
  border-color:var(--gd-500);font-weight:700}

.form-field{margin-bottom:var(--s4)}
.form-field label{display:block;font-size:var(--fs-xs);letter-spacing:.14em;
  color:var(--w-3);margin-bottom:8px}
.form-field input,.form-field textarea,.form-field select{width:100%;
  background:var(--nv-700);border:1px solid var(--line-w);border-radius:var(--r);
  padding:14px 16px;font-family:var(--f-body);font-size:var(--fs-body);
  color:var(--w-1);outline:none;transition:border-color .3s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  border-color:var(--gd-500)}

.glass-card{background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);padding:var(--s6);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

.map-box{position:relative;border:1px solid var(--line-w);border-radius:var(--r-lg);
  overflow:hidden;background:var(--nv-700)}
.map-box img{display:block;width:100%;height:100%;object-fit:cover}
.map-tip{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;
  background:linear-gradient(to bottom,transparent,rgba(3,13,26,.94) 58%)}
.map-tip strong{display:block;color:#fff;font-family:var(--f-disp);font-size:16px;margin-bottom:4px}
.map-tip span{display:block;color:var(--w-3);font-size:var(--fs-xs);line-height:1.7}
.map-btn{position:absolute;right:14px;top:14px;padding:9px 18px;font-size:var(--fs-xs);
  background:var(--gd-500);color:var(--nv-900);border-radius:var(--r)}

.team-photo{margin:var(--s8) 0 var(--s6);border:1px solid var(--line-g);
  border-radius:var(--r-lg);overflow:hidden}
.team-photo img{display:block;width:100%;height:auto}

/* ---------- 揭示 ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}

/* 窄屏（≤1240px）：徽标展开会挤掉导航空间，强制折叠成只显示章节号。
   数值依据：1280 时 nav 可用 567px，1200 时降到 487px，
   而 7 项文字 + 6 个最小间距至少需要 494px。 */
@media(max-width:1240px){
  .mast-section.show{font-size:0;padding:0 9px}
  .mast-section.show::before{content:attr(data-num);font-size:12px;letter-spacing:.04em}
}

/* ===========================================================
   响应式
   =========================================================== */
@media(max-width:1180px){
  /* 顶栏响应式：导航收起为汉堡 */
  .mast-inner{padding:0 24px;gap:var(--s4)}
  .mast-nav{display:none}
  .mast-tel{display:none}
  .mast-section{display:none}
  .mast-toggle{display:flex}
  .stage{padding-top:96px;min-height:auto}
  .stage-float{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .bn-tall{grid-row:auto}
  .bn-wide{grid-column:span 2}
  .duo{grid-template-columns:1fr 1fr}
  /* 竖图保持 3/4，不在此处强制改横，否则素材会被压扁 */
  .cascade{grid-template-columns:1fr 1fr;padding:0 28px}
  .cas{height:128px}
  /* --- tab (0.72x) --- */
  .cascade .cas:nth-child(1) img{width:102px;height:76px}
  .cascade .cas:nth-child(2) img{width:79px;height:76px}
  .cascade .cas:nth-child(3) img{width:86px;height:76px}
  .cascade .cas:nth-child(4) img{width:150px;height:52px}
  .cascade .cas:nth-child(5) img{width:84px;height:76px}
  .cascade .cas:nth-child(6) img{width:207px;height:37px}
  .cascade .cas:nth-child(7) img{width:84px;height:76px}
  .cascade .cas:nth-child(8) img{width:57px;height:76px}
  .cascade .cas:nth-child(9) img{width:125px;height:62px}
  .cascade .cas:nth-child(10) img{width:125px;height:63px}
  .cascade .cas:nth-child(11) img{width:71px;height:76px}
  .cascade .cas:nth-child(12) img{width:150px;height:52px}
  .cascade .cas:nth-child(13) img{width:109px;height:71px}
  .cascade .cas:nth-child(14) img{width:112px;height:69px}
  .cascade .cas:nth-child(15) img{width:141px;height:55px}
  .cascade .cas:nth-child(16) img{width:169px;height:46px}  .cas-in{height:112px}
  /* --- tab (0.72x) --- */
  .cascade .cas:nth-child(1) img{width:102px;height:76px}
  .cascade .cas:nth-child(2) img{width:79px;height:76px}
  .cascade .cas:nth-child(3) img{width:86px;height:76px}
  .cascade .cas:nth-child(4) img{width:150px;height:52px}
  .cascade .cas:nth-child(5) img{width:84px;height:76px}
  .cascade .cas:nth-child(6) img{width:207px;height:37px}
  .cascade .cas:nth-child(7) img{width:84px;height:76px}
  .cascade .cas:nth-child(8) img{width:57px;height:76px}
  .cascade .cas:nth-child(9) img{width:125px;height:62px}
  .cascade .cas:nth-child(10) img{width:125px;height:63px}
  .cascade .cas:nth-child(11) img{width:71px;height:76px}
  .cascade .cas:nth-child(12) img{width:150px;height:52px}
  .cascade .cas:nth-child(13) img{width:109px;height:71px}
  .cascade .cas:nth-child(14) img{width:112px;height:69px}
  .cascade .cas:nth-child(15) img{width:141px;height:55px}
  .cascade .cas:nth-child(16) img{width:169px;height:46px}  .cas-in{height:112px}
  .article-in{padding:0 28px;grid-template-columns:1fr}
  .phead-in{padding:0 28px}
  .lgrid{grid-template-columns:1fr 1fr}
  .df-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .wrap,.stage-content,.stage-float,.cascade,.article-in,.phead-in{padding-left:20px;padding-right:20px}
  /* 移动端：Hero 高度按比例而非 100vh。
     100vh 在 390x844 视口下是 0.46 的竖向容器，横图(1.60)被 cover 裁掉 70%。
     改为 aspect-ratio:4/3 的横向块 + 最小高度兜底，主体（宝石与金环，
     位于画面中部）完整可见。 */
  /* masthead 为 fixed 74px，Hero 顶部留出等宽空间 */
  .stage{padding-top:74px;min-height:0}
  .stage-media{position:relative;z-index:0;width:calc(100% + 40px);
    margin:0 -20px;aspect-ratio:4/3;max-height:64vh}
  .stage-content{padding-top:var(--s6)}
  .stage-float{margin-top:var(--s5)}
  .stage-media img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
    transform:none}
  .stage-veil{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(3,13,26,.55) 0%,rgba(3,13,26,.22) 40%,
      rgba(6,26,51,.55) 78%,var(--nv-800) 100%)}
  .stage-media img{object-position:center 44%}
  .stage-content{padding-bottom:var(--s5)}
  .stage-title{font-size:38px}
  .stage-lead{font-size:15px}
  .stage-float{grid-template-columns:1fr 1fr}
  .gstat-v{font-size:32px}
  .void-title{font-size:27px}
  .bento{grid-template-columns:1fr;gap:var(--s3)}
  .bn-wide{grid-column:span 1}
  .bn{padding:var(--s5) var(--s4)}
  /* --- mob (0.62x) --- */
  .cascade .cas:nth-child(1) img{width:88px;height:65px}
  .cascade .cas:nth-child(2) img{width:68px;height:66px}
  .cascade .cas:nth-child(3) img{width:74px;height:66px}
  .cascade .cas:nth-child(4) img{width:129px;height:45px}
  .cascade .cas:nth-child(5) img{width:72px;height:66px}
  .cascade .cas:nth-child(6) img{width:179px;height:32px}
  .cascade .cas:nth-child(7) img{width:72px;height:66px}
  .cascade .cas:nth-child(8) img{width:49px;height:66px}
  .cascade .cas:nth-child(9) img{width:107px;height:53px}
  .cascade .cas:nth-child(10) img{width:107px;height:54px}
  .cascade .cas:nth-child(11) img{width:61px;height:66px}
  .cascade .cas:nth-child(12) img{width:129px;height:45px}
  .cascade .cas:nth-child(13) img{width:94px;height:61px}
  .cascade .cas:nth-child(14) img{width:96px;height:60px}
  .cascade .cas:nth-child(15) img{width:122px;height:47px}
  .cascade .cas:nth-child(16) img{width:146px;height:40px}  .cas-in{height:96px}
  .cascade .cas:nth-child(1) img{width:92px;height:68px}
  .cascade .cas:nth-child(2) img{width:79px;height:77px}
  .cascade .cas:nth-child(3) img{width:83px;height:74px}
  .cascade .cas:nth-child(4) img{width:133px;height:46px}
  .cascade .cas:nth-child(5) img{width:82px;height:75px}
  .cascade .cas:nth-child(6) img{width:176px;height:32px}
  .cascade .cas:nth-child(7) img{width:82px;height:75px}
  .cascade .cas:nth-child(8) img{width:58px;height:79px}
  .cascade .cas:nth-child(9) img{width:111px;height:56px}
  .cascade .cas:nth-child(10) img{width:110px;height:55px}
  .cascade .cas:nth-child(11) img{width:73px;height:79px}
  .cascade .cas:nth-child(12) img{width:134px;height:46px}
  .cascade .cas:nth-child(13) img{width:97px;height:63px}
  .cascade .cas:nth-child(14) img{width:100px;height:62px}
  .cascade .cas:nth-child(15) img{width:125px;height:48px}
  .cascade .cas:nth-child(16) img{width:151px;height:41px}
  .cas-in{height:96px}
  .deepqa .dqa summary{font-size:17px;padding-right:40px}
  .finale h2{font-size:29px}
  .finale{padding:var(--s8) 0 var(--s9)}
  .lgrid{grid-template-columns:1fr}
  .df-grid{grid-template-columns:1fr;gap:var(--s5)}
}
/* ===========================================================
   联系页：左正文 + 右地图
   地图固定 400×320px，与正文顶端对齐；素材正方形 602²，cover 取中部。
   =========================================================== */
.contact-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:var(--s7);align-items:start;max-width:1120px}
.contact-split .map-box{height:320px;margin-top:0}
.contact-text{font-size:16px;line-height:1.95;color:var(--w-3)}
.contact-text p{margin:var(--s3) 0}
.contact-text h3{font-size:19px;margin:var(--s5) 0 var(--s2);color:var(--gd-500)}
.contact-text h4{font-size:var(--fs-body);margin:var(--s4) 0 var(--s2);color:var(--gd-600)}
.contact-text div,.contact-text span{background:transparent !important;
  color:var(--w-3) !important}
.contact-text strong{color:var(--w-1) !important;font-weight:600}
@media(max-width:1180px){
  .contact-split{grid-template-columns:1fr;gap:var(--s5)}
  .contact-split .map-box{height:260px}
}


/* ===========================================================
   案例索引页：左主分类 / 右案例标题
   原方案是 Bento 拼贴 + 图文卡片列表全竖排堆叠，用户反馈
   「子类别全排在下方」且不利于 GEO 抓取区域客户案例。
   新方案：
     · 左侧竖排主分类（5 类门店），sticky 跟随滚动
     · 右侧纯标题链接密集索引（3 列，num=200 尽可能多）
     · 无图无描述 → 一屏可容纳 30+ 条，搜索引擎可一次抓全
   =========================================================== */
.case-intro{margin-bottom:var(--s7)}
.case-idx{display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:var(--s8);align-items:start}
/* 左：主分类。sticky top 100px 避开 74px 顶栏 + 呼吸 */
.case-cats{position:sticky;top:100px}
.case-cats-h{font-size:var(--fs-xs);letter-spacing:.18em;color:var(--w-4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-w);
  margin-bottom:var(--s3)}
.cc{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-left:2px solid transparent;border-radius:0 var(--r) var(--r) 0;
  color:var(--w-3);font-size:16px;transition:all .3s}
.cc-ico{width:22px;height:22px;flex:0 0 auto;opacity:.75;transition:opacity .3s}
.cc:hover{color:var(--gd-400);background:rgba(212,175,106,.06)}
.cc:hover .cc-ico{opacity:1}
.cc.on{color:var(--gd-400);background:rgba(212,175,106,.09);
  border-left-color:var(--gd-500);font-weight:600}
.cc.on .cc-ico{opacity:1}
.cc-ask{margin-top:var(--s3);border-top:1px solid var(--line-w);
  padding-top:var(--s4);border-radius:0 var(--r) var(--r) 0}
/* 右：标题索引容器。每个主分类自成 3 列网格（不用 column-count，避免布局坑） */
.case-titles{align-items:start}
/* 案例数量统计行：让「尽可能多」可感知 */
.case-count{font-size:var(--fs-xs);color:var(--w-4);
  letter-spacing:.12em;padding-bottom:var(--s3);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line-w)}
/* 主分类分组：组标题跨 3 列，下面是该组案例标题 */
.case-group{display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 var(--s6);margin-bottom:var(--s6)}
.case-group-h{grid-column:1 / -1;display:flex;align-items:baseline;gap:12px;
  font-family:var(--f-disp);font-size:var(--fs-body);font-weight:600;
  color:var(--gd-500);letter-spacing:.06em;
  padding-bottom:var(--s3);margin-bottom:var(--s1);
  border-bottom:1px solid var(--line-g)}
.case-group-h::after{content:"";flex:1;height:1px;background:var(--line-w)}
/* 空分组占位（该分类下暂无案例时的中性提示） */
.case-empty{grid-column:1 / -1;color:var(--w-4);font-size:14px;
  line-height:1.7;padding:14px 0;margin:0}
/* 左侧序号（编辑排版风的索引编号） */
.cc-no{font-family:var(--f-num);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--gd-600);flex:0 0 auto;transition:color .3s}
.cc:hover .cc-no,.cc.on .cc-no{color:var(--gd-400)}
/* 每类案例数量徽标（JS 填充），靠右对齐 */
.cc-n{margin-left:auto;font-family:var(--f-num);font-size:11px;
  color:var(--w-4);letter-spacing:.06em;padding-left:8px}
.cc:hover .cc-n,.cc.on .cc-n{color:var(--gd-400)}
/* 每类案例数量徽标（JS 填充），靠右对齐 */
.cc-n{margin-left:auto;font-family:var(--f-num);font-size:11px;
  color:var(--w-4);letter-spacing:.06em;padding-left:8px}
.cc:hover .cc-n,.cc.on .cc-n{color:var(--gd-400)}
/* 案例数量统计行：跨全部列，让「尽可能多」可感知 */
.case-count{grid-column:1 / -1;font-size:var(--fs-xs);color:var(--w-4);
  letter-spacing:.12em;padding-bottom:var(--s3);margin-bottom:var(--s1);
  border-bottom:1px solid var(--line-w)}
/* 每条案例：分类徽标 + 标题。徽标让归属一目了然（用户反馈看不出分类） */
.case-titles a{display:flex;align-items:baseline;gap:12px;
  padding:12px 0;font-size:15px;line-height:1.5;
  color:var(--w-2);border-bottom:1px solid var(--line-w);
  transition:color .25s}
.case-titles a:hover{color:var(--gd-400)}
.ct-cat{flex:0 0 auto;font-size:11px;letter-spacing:.08em;
  color:var(--gd-500);border:1px solid var(--line-g);
  border-radius:999px;padding:2px 10px;white-space:nowrap;
  transition:all .25s}
.case-titles a:hover .ct-cat{color:var(--gd-300);border-color:var(--gd-500)}
.ct-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
@media(max-width:1080px){
  .case-idx{grid-template-columns:200px minmax(0,1fr);gap:var(--s6)}
  .case-titles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .case-idx{grid-template-columns:1fr;gap:var(--s5)}
  /* 窄屏：主分类改横向滚动条，不占竖向空间 */
  .case-cats{position:static;display:flex;gap:var(--s2);
    overflow-x:auto;padding-bottom:var(--s2);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .case-cats::-webkit-scrollbar{display:none}
  .case-cats-h{display:none}
  .cc{flex:0 0 auto;white-space:nowrap;border-left:0;
    border-bottom:2px solid transparent;border-radius:var(--r);
    background:rgba(255,255,255,.03)}
  .cc.on{border-bottom-color:var(--gd-500)}
  .cc-ask{margin-top:0;padding-top:13px;border-top:0}
  .case-group{grid-template-columns:1fr}
}

/* ===========================================================
   新闻中心：左分类导航 / 右文章卡片（2026-10-22 第 14 轮新增）
   结构同服务案例页（左分类 + 右列表），交互为点击筛选；
   文章卡为横向卡（左缩略图 148px + 右标题/摘要/日期），
   双列网格。分类徽标复用 .ct-cat。
   =========================================================== */
.news-idx{display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:var(--s8);align-items:start}
.news-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
/* 统计行跨两列 */
.news-list .case-count{grid-column:1 / -1}
/* 文章卡片 */
.ncard{display:grid;grid-template-columns:148px minmax(0,1fr);
  gap:var(--s4);align-items:start;
  background:var(--nv-700);border:1px solid var(--line-w);
  border-radius:var(--r-lg);padding:var(--s4);
  transition:transform .45s,border-color .45s,box-shadow .45s}
.ncard:hover{transform:translateY(-4px);border-color:var(--line-g);
  box-shadow:0 18px 54px rgba(2,8,16,.55)}
.ncard-img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  background:var(--nv-800)}
.ncard-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s}
.ncard:hover .ncard-img img{transform:scale(1.06)}
.ncard-body{min-width:0}
.ncard-body h3{font-size:17px;line-height:1.5;margin:9px 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ncard-body p{color:var(--w-3);font-size:var(--fs-sm);line-height:1.75;
  margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ncard-body time{font-family:var(--f-num);font-size:var(--fs-xs);
  color:var(--w-4);letter-spacing:.14em}
/* 响应式：与案例页同源断点 */
@media(max-width:1080px){
  .news-idx{grid-template-columns:200px minmax(0,1fr);gap:var(--s6)}
}
@media(max-width:760px){
  .news-idx{grid-template-columns:1fr;gap:var(--s5)}
  .news-list{grid-template-columns:1fr}
  .case-cats{position:static;display:flex;gap:var(--s2);
    overflow-x:auto;padding-bottom:var(--s2);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .case-cats::-webkit-scrollbar{display:none}
  .case-cats-h{display:none}
  .cc{flex:0 0 auto;white-space:nowrap;border-left:0;
    border-bottom:2px solid transparent;border-radius:var(--r);
    background:rgba(255,255,255,.03)}
  .cc.on{border-bottom-color:var(--gd-500)}
  .cc-ask{margin-top:0;padding-top:13px;border-top:0}
  .ncard{grid-template-columns:104px minmax(0,1fr);gap:var(--s3);
    padding:var(--s3)}
  .ncard-body h3{font-size:15px}
}

/* ===========================================================
   第 15 轮：内页头部整体压缩（2026-10-22 Devin 反馈）
   "首页太空、标题太大、内容整体上移、主要是呈现章节内容"
   全部内页（产品/新闻/案例/关于/联系/招聘/FAQ/各详情页）共用
   .phead + .void 结构，因此全局压缩，而非只改新闻一页：
     · 头部上 padding 180→100（仍避开 74px 固定顶栏）
     · 页面大标题 46→32px，副标题 16→15px、上间距收紧
     · 头部底 padding 72→32，装饰光晕 760→480px
     · 内容区上 padding 150→64，章节内容整体上移
     · 列表页 intro 块收紧：标题 38→23px，行文 14px
   =========================================================== */
.phead{padding:100px 0 var(--s5)}
.phead::before{width:480px;height:480px;top:-36%}
.phead h1{font-size:32px}
.phead p{margin-top:var(--s3);font-size:15px;line-height:1.7}
/* 内容区与头部间距：150→64；底部 150→72（保持 finale 前呼吸） */
.void{padding:var(--s6) 0 var(--s7)}
/* 新闻/案例页 intro 块收紧 */
.case-intro{margin-bottom:var(--s6)}
.case-intro .void-title{font-size:var(--fs-h3)}
.case-intro .void-lead{font-size:14px;line-height:1.8}
.case-intro .void-eyebrow{margin-bottom:var(--s2)}
/* 移动端：头部再收一档 */
@media(max-width:640px){
  .phead{padding:86px 0 var(--s4)}
  .phead h1{font-size:26px}
  .phead p{font-size:14px;margin-top:var(--s2)}
}

/* ===========================================================
   第 16 轮：公司简介文字密集区（2026-10-22 Devin 要求 GEO/AI 抓取）
   .about-prose 为全站文字密度最高区块：概况/历程/优势/产品/
   方案/服务/客户/联系全部落成文字。版式参考智享无限公司简介页：
   窄栏（880px）居中、h3 金色小标题、段落 + 粗体引导词 + 列表。
   =========================================================== */
.about-prose{max-width:880px;margin:0 auto}
.about-prose h3{margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line-w)}
.about-prose h3:first-child{margin-top:0;padding-top:0;border-top:0}
.about-prose ul li{margin-bottom:var(--s3);line-height:1.9}
.about-prose ul li strong{color:var(--gd-400)}
@media(max-width:640px){
  .about-prose h3{margin-top:var(--s5);padding-top:var(--s4)}
}

/* ===========================================================
   第 18 轮：公司简介文字区去缩排 + 修空节（2026-10-22 Devin 反馈）
   1) .about-prose 原 max-width:880px 居中 → 文字比小节标题缩进
      约 200px。改为通栏（与标题左对齐），「不要做缩排」。
   2) 联系页专用 section 的条件判断从 section 内提到 section 外
      （模板层修复）——公司简介页不再渲染空 section，
      头部与文字区的 120px 空白消失，内容整体上移。
   =========================================================== */
.about-prose{max-width:none;margin:0}

/* ===========================================================
   第 20 轮：公司发展时间线（2026-10-22 Devin 反馈）
   原「2002年 公司创立」与其他数字卡并列，像没有下文的时间线
   开头。数字卡收敛为 3 张，另加完整五阶段时间线：
   左侧金色竖线 + 金点节点，年份（衬线金色）+ 阶段标题 + 一句说明。
   与文字区「二十四年发展历程」同源五阶段，互为印证。
   =========================================================== */
.hist{margin-top:var(--s7)}
.hist-h{font-size:var(--fs-xs);letter-spacing:.18em;color:var(--w-4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-w);
  margin-bottom:var(--s5)}
.hist-track{position:relative}
/* 竖线：左对齐金点（dot 13px，线居中于 left:6px） */
.hist-track::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;
  width:1px;background:linear-gradient(180deg,transparent,var(--line-g) 6%,
    var(--line-g) 94%,transparent)}
.hist-node{position:relative;padding:0 0 var(--s6) var(--s7)}
.hist-node:last-child{padding-bottom:0}
/* 金点：外圈用背景色遮罩竖线，形成"节点"感 */
.hist-node::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;
  border-radius:50%;background:var(--gd-500);
  box-shadow:0 0 0 5px var(--nv-800),0 0 14px rgba(212,175,106,.35)}
.hist-node:hover::before{background:var(--gd-300)}
.hist-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.hist-year{font-family:var(--f-num);font-size:22px;letter-spacing:.04em;
  color:var(--gd-500);flex:0 0 auto}
.hist-title{font-size:19px;color:var(--w-1);font-weight:600}
.hist-node p{color:var(--w-3);font-size:15px;line-height:1.85;
  margin:10px 0 0;max-width:820px}
/* 响应式：窄屏年份独占一行 */
@media(max-width:640px){
  .hist-node{padding-left:var(--s6)}
  .hist-year{font-size:19px}
  .hist-title{font-size:17px}
  .hist-head{gap:var(--s2)}
}