/*
  易曜云媒官网 · 共享样式
  视觉体系（红黑影院感，2026-10-27 定案）：
    内容宽 980 / 侧距 22 / hero 96 / 作品名 128 / 区块标题 64 / 正文 17
    底色 #0a0b0e（近黑）→ 抬升层 #101217 → 深场 #05060a
    文字 #edeae5 / 74% / 56% 三级；细线 rgba(255,255,255,.12)
    点缀色 品牌深红 #c9202a（块面用）、亮红 #e2404a（暗底上的文字与线）
  暗底上禁止再用深红 #8e0c0c 写字——对比度不足，只能作块面。
*/

:root {
  --w: 980px;
  --pad: 22px;
  --ink: #edeae5;
  --ink2: rgba(237, 234, 229, .74);
  --ink3: rgba(237, 234, 229, .56);
  --gray: #101318;
  --line: rgba(255, 255, 255, .12);
  --red: #c9202a;
  --deep: #05060a;
  --red-deep: #e2404a;
  --bg: #0a0b0e;
  --bg-lift: #171a21;
  --bg-red: #180b0e;
  --ff: "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --nav-h: 48px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(201, 32, 42, .38); color: #fff; }

a { color: var(--red-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img, video { max-width: 100%; display: block; }

.wrap {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- 区块明暗：黑 → 深场 → 抬升 → 黑 → … ---------- */
/* 相邻区块之间不用硬切线，改用 110px 的渐变消融——
   这是 Apple 页面「区块之间没有边界感」的来源。 */

.sec { padding: 96px 0; background: var(--bg); }
.sec-gray {
  background: linear-gradient(180deg,
    var(--bg) 0,
    var(--gray) 110px,
    var(--gray) calc(100% - 110px),
    var(--bg) 100%);
}
.sec-deep {
  color: var(--ink);
  background: linear-gradient(180deg,
    var(--bg) 0,
    var(--deep) 96px,
    var(--deep) calc(100% - 96px),
    var(--bg) 100%);
}
.sec-tight { padding: 64px 0; }

.eyebrow {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink3);
  margin: 0 0 14px;
  font-weight: 500;
}
.sec-deep .eyebrow { color: rgba(255, 255, 255, .55); }

h1.t, h2.t {
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.022em;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* 节内小标题：与 h2.t 同族，小一号。
   用于「同一节里再分一层」的场合（如平台页的案例区），
   开新的 <section> 太重，降一级 <h3> 但视觉仍要有分量。 */
h3.t-sub {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0;
  max-width: 40em;
}
.sec-deep .sub { color: rgba(255, 255, 255, .7); }

.lks { margin-top: 26px; display: flex; gap: 28px; flex-wrap: wrap; }
.lk { font-size: 17px; font-weight: 500; }
.lk::after {
  content: " ›";
  display: inline-block;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.lk:hover::after { transform: translateX(4px); }

/* ---------- 导航 48px 毛玻璃 ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: rgba(10, 11, 14, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-in {
  max-width: var(--w);
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 36px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-size: 12px;
}
.nav-links a, .nav-item > span {
  color: var(--ink2);
  font-size: 12px;
  line-height: var(--nav-h);
  display: block;
  cursor: pointer;
  white-space: nowrap;
}
.nav-links a:hover, .nav-item > span:hover { color: var(--red-deep); text-decoration: none; }

.nav-item { position: relative; }
.nav-item > span::after { content: " ▾"; font-size: 9px; color: var(--ink3); }

.panel {
  position: absolute;
  top: var(--nav-h);
  left: -18px;
  min-width: 320px;
  background: rgba(16, 18, 23, .96);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
}
.nav-item:hover .panel, .nav-item:focus-within .panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.panel .grp {
  font-size: 11px;
  color: var(--ink3);
  padding: 10px 20px 4px;
  letter-spacing: .04em;
}
.panel a {
  display: block;
  padding: 7px 20px;
  color: var(--ink);
  line-height: 1.4;
}
.panel a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.panel a em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--ink3);
}

.btn-pill {
  background: var(--red);
  color: #fff;
  font-size: 12px;
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-pill:hover { background: #a81820; text-decoration: none; }

.burger {
  display: none;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  margin: 6px 0;
}

/* ---------- 移动端全屏菜单 ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--deep);
  color: #fff;
  padding: 72px var(--pad) 0;
  overflow-y: auto;
  display: none;
}
.drawer.open { display: block; }
.drawer .dgrp { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.drawer .dgrp h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--red-deep);
  letter-spacing: .04em;
}
.drawer .dgrp a {
  display: block;
  color: #fff;
  font-size: 17px;
  padding: 6px 0;
}
.drawer .dfoot {
  padding: 22px 0 40px;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer .dfoot img { display: block; height: 26px; width: auto; }
.drawer-close {
  position: absolute;
  top: 14px;
  right: var(--pad);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero { padding: 110px 0 96px; text-align: left; }
h1.hero {
  /* 上限 100px：第二行「拥有新的影像形态。」9 字在 936px 可用宽内不折行。
     再大就会断成三行，首屏的整块气势就散了。 */
  font-size: clamp(46px, 7.2vw, 100px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.032em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero .sub, .hero-screen .sub { font-size: 21px; max-width: 42em; }

/* ---------- 作品位（深场 + 红辉，全站唯一有光的地方） ---------- */

.work {
  position: relative;
  padding: 116px 0 104px;
  overflow: hidden;
  background:
    radial-gradient(110% 88% at 82% -6%, rgba(201, 32, 42, .24), rgba(201, 32, 42, 0) 62%),
    var(--deep);
}
.work-name {
  font-size: 128px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  color: var(--ink);
}
.work-en {
  font-size: 13px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 10px;
}
.work-type {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--red-deep);
  margin: 0 0 26px;
}
.work-story {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  max-width: 34em;
  margin: 0;
}

/* ---------- 三拼业务地图 ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, .14);
}
/* 子页页尾「相关模块」只有两格 */
.tiles.two { grid-template-columns: repeat(2, 1fr); }
.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 60px 34px 44px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 92% at 50% -10%, #1b1e27 0%, #12141a 46%, #0d0f14 100%);
}
/* 底部红光：只在 hover 时升起，铺满就廉价了 */
.tile::after {
  content: "";
  position: absolute;
  inset: auto 0 -30% 0;
  height: 78%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 100% at 50% 100%, rgba(201, 32, 42, .30), rgba(201, 32, 42, 0) 72%);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1);
}
.tile:hover::after { opacity: 1; }
/* 深格：红黑调，顶部一道红色发丝线，不用整块红 */
.tile.dk {
  background:
    radial-gradient(120% 90% at 50% -10%, #241014 0%, #1a0c0f 50%, #12080a 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 0 rgba(226, 64, 74, .62);
}
.tile h3 { font-size: 34px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
.tile p { font-size: 15px; line-height: 1.6; color: var(--ink2); margin: 0; }
.tile.dk p { color: rgba(255, 255, 255, .7); }
.tile .lk { margin-top: auto; padding-top: 26px; font-size: 15px; }
.tile.dk .lk { color: var(--red-deep); }

/* 模块水印：极淡的产品名，承担 Apple 页里「产品图」的视觉分量。
   上限 56px 是算出来的——再大「AGENT」会压到左上角的「业务模块」标签。 */
.tile-no {
  position: absolute;
  right: 20px;
  top: 16px;
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .055);
  pointer-events: none;
  user-select: none;
}
.tile.dk .tile-no { color: rgba(226, 64, 74, .13); }

/* ---------- 三列文字列 ---------- */

.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.cols3 h4 {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink3);
  margin: 0 0 10px;
  font-weight: 500;
}
.cols3 p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink2); }

/* ---------- 资质卡 ---------- */

.cred {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 30px;
  background: var(--bg-lift);
}
.cred h4 { margin: 0 0 16px; font-size: 13px; letter-spacing: .06em; color: var(--ink3); font-weight: 500; }
.cred dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 10px 20px; font-size: 15px; }
.cred dt { color: var(--ink3); }
.cred dd { margin: 0; color: var(--ink); }

/* ---------- 步骤 / 阶段（不给卡片网格） ---------- */

.stages { margin-top: 42px; border-top: 1px solid var(--line); }
.stage {
  display: grid;
  grid-template-columns: 96px 200px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.sec-deep .stage { border-color: rgba(255, 255, 255, .14); }
.stage .no { font-size: 13px; letter-spacing: .1em; color: var(--red-deep); }
.sec-deep .stage .no { color: var(--red-deep); }
.stage h4 { margin: 0; font-size: 21px; font-weight: 600; }
.stage p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.6; }
.sec-deep .stage p { color: rgba(255, 255, 255, .7); }

/* ---------- 服务清单 / 条目行式列表 ---------- */

.rows { margin-top: 40px; border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.row h4 { margin: 0; font-size: 19px; font-weight: 600; }
.row p { margin: 0; font-size: 15px; color: var(--ink2); line-height: 1.6; }
.note, .fine {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink3);
}
.sec-deep .fine { color: rgba(255, 255, 255, .58); }

/* ---------- 售后三数 ---------- */

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 42px; }
.metric { background: var(--bg-lift); padding: 34px 26px; text-align: center; }
.metric .num { font-size: 48px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.metric .lbl { font-size: 13px; color: var(--ink3); margin-top: 8px; }

/* ---------- FAQ ---------- */

.faq { margin-top: 34px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--ink3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 22px; font-size: 15px; line-height: 1.75; color: var(--ink2); }

/* ---------- 联系三行 ---------- */

.ctriple { margin-top: 36px; border-top: 1px solid var(--line); }
.cline {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cline .k { width: 88px; flex: none; font-size: 13px; color: var(--ink3); }
.cline .v { flex: 1; font-size: 17px; word-break: break-all; }
.cline .v a { color: var(--ink); }
.cline .v a:hover { color: var(--red-deep); }
.copy {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink2);
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex: none;
}
.copy:hover { border-color: var(--ink3); color: var(--ink); }

/* ==================================================================
   影院银幕 · 素材位（图片 / 视频 / 虚拟制片）
   参照 Apple 产品页的画面处理：
     · 不给卡片描边，画面自己发光
     · 光源缓慢漂移——静态占位也有「正在放映」的生命感
     · 细颗粒 + 四边内投影，画面「陷」进近黑底
     · 真素材接入时只替换底图/插入 <img>，结构不动
   ================================================================== */

.fig { margin-top: 52px; }

.fig-box {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgba(255, 255, 255, .40);
  font-size: 12px;
  letter-spacing: .14em;
  isolation: isolate;
  background-color: #06070a;
  background-image:
    radial-gradient(46% 52% at 50% 30%, rgba(201, 32, 42, .22), rgba(201, 32, 42, 0) 70%),
    radial-gradient(84% 46% at 50% 104%, rgba(226, 64, 74, .10), rgba(226, 64, 74, 0) 72%),
    radial-gradient(122% 98% at 50% -8%, #1a1d26 0%, #0c0e13 42%, #04050a 100%);
}

/* 光源层：极慢漂移，24s 一个来回，不做回弹 */
.fig-box::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  background:
    radial-gradient(34% 30% at 34% 38%, rgba(226, 64, 74, .17), transparent 68%),
    radial-gradient(42% 34% at 68% 62%, rgba(255, 255, 255, .05), transparent 70%);
  filter: blur(18px);
  animation: screenBreath 24s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
@keyframes screenBreath {
  from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: .78; }
  to   { transform: translate3d(2%, -1.5%, 0) scale(1.08); opacity: 1; }
}

/* 颗粒 + 四边内投影：这一层让画面有「介质感」，不是纯色块 */
.fig-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  box-shadow:
    inset 0 0 120px 28px rgba(4, 5, 10, .88),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.fig-box > .fig-label {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 15px;
  text-align: center;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .34);
}

.fig-box.wide { aspect-ratio: 21 / 9; }
.fig-box.ultra { aspect-ratio: 2.39 / 1; max-height: 78vh; }
.fig-box.square { aspect-ratio: 4 / 3; }
.fig-box.portrait { aspect-ratio: 3 / 4; }
/* 剧照位：跟影片原生 2.35:1 走，不做竖裁——裁了就丢构图 */
.fig-box.cine { aspect-ratio: 2.35 / 1; }

/* ---------- 真素材接入后 ----------
   示意用的红色光源要关掉：画面自己就是光源，再叠一层红光会脏。
   颗粒与四边暗角保留——这两层是「介质感」的来源，不是占位用的。 */
.fig-box.has-media {
  background-image: none;
  background-color: #05060a;
}
.fig-box.has-media::before { display: none; }
.fig-box.has-media::after {
  opacity: .05;
  box-shadow:
    inset 0 0 130px 18px rgba(4, 5, 10, .60),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* 有播放键时，说明文字挂在播放键下方，避开左下角的时间码 */
.fig-box.play > .fig-label {
  bottom: auto;
  top: 50%;
  margin-top: 56px;
}

.fig-box > img,
.fig-box > video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
}
/* 视频播放器铺满画面，角标与时间码浮在其上 */
.fig-box.has-video { align-items: stretch; }
.fig-box.has-video::after { opacity: .03; }

/* 可点击的宽银幕：给键盘用户留焦点环，别只靠 hover */
.fig-box[role="button"] { cursor: pointer; }
.fig-box[role="button"]:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 5px;
}

/* 播放键：磨砂玻璃圆，红色只做外圈光晕，不做整块红 */
.play-btn {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 0 0 0 rgba(226, 64, 74, .30), 0 18px 50px rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1),
              background .45s ease, box-shadow .45s ease;
}
.play-btn::before {
  content: "";
  margin-left: 4px;
  border-left: 15px solid rgba(255, 255, 255, .96);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.fig-box:hover .play-btn {
  transform: scale(1.07);
  background: rgba(255, 255, 255, .15);
  box-shadow: 0 0 0 8px rgba(226, 64, 74, .10), 0 22px 60px rgba(0, 0, 0, .6);
}

/* 画面角标：时间码 / 生成标识，影视公司该有的细节 */
.frame-tc {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .30);
  font-variant-numeric: tabular-nums;
}
.frame-badge {
  position: absolute;
  z-index: 3;
  right: 18px;
  top: 16px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 2px;
  background: rgba(6, 7, 10, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fig-cap { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink3); }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.fig-pair .fig-box { margin: 0; }
/* 虚拟制片双图：每张图各挂一条图注，所以是 figure 而不是裸 fig-box */
.vp-fig { margin: 0; }
.fig-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink3);
}

/* ---------- 放映浮层：点宽银幕才载片，关掉即卸载（22MB 不常驻） ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(4, 5, 8, .93);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.lightbox.open { display: grid; }
.lightbox video {
  width: min(1560px, 92vw);
  max-height: 88vh;
  background: #000;
  border-radius: 3px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .34);
}

/* ==================================================================
   宽幅视觉列（Apple 的核心版式手法）
   文字恒在 980 版心内，画面可以更宽：
     · 视口 > 1460px  → 宽列上限 1400，两侧留边
     · 视口 ≤ 1460px  → 直接出血到视口边缘
   这样大屏不空、小屏有张力，且永不产生横向滚动条。
   ================================================================== */

.band-media {
  width: 100%;
  max-width: 1680px;
  margin: 56px auto;
  position: relative;
  --band-fade: var(--bg);
}

/* 画面上下方的暗场过渡：让视觉区与文字区之间没有硬切线 */
.band-media::before,
.band-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 5;
  pointer-events: none;
}
.band-media::before {
  top: -1px;
  background: linear-gradient(180deg, var(--band-fade) 0%, rgba(10, 11, 14, 0) 100%);
}
.band-media::after {
  bottom: -1px;
  background: linear-gradient(0deg, var(--band-fade) 0%, rgba(10, 11, 14, 0) 100%);
}
/* 作品区底色是深场，过渡色跟着换成 #05060a，否则会出现一道浅色硬边 */
.work .band-media { --band-fade: var(--deep); }

/* ---------- 顶部光束：整段唯一的「光从上面打下来」 ---------- */

.beam {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(760px, 78%);
  height: 360px;
  transform: translate(-50%, -34%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(226, 64, 74, .16), rgba(226, 64, 74, 0) 72%);
  filter: blur(46px);
}

/* ---------- 巨字数据横排（Apple 的 stats 条） ---------- */
/* 字号受过宽度验算约束：980/4 栏 = 245px，四位数在 84px 时宽 185px，
   留出 26px 内距仍不溢出。再大就压栏线，故上限锁 84。 */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.stat {
  padding: 38px 26px 34px 0;
  border-bottom: 1px solid var(--line);
}
.stat + .stat { padding-left: 26px; border-left: 1px solid var(--line); }
.stat-n {
  display: block;
  /* 数字走西文字体：中文无衬线在 200 字重上常缺字重，会回退成粗体，
     西文 Helvetica / SF 有真正的 Light，巨字才有 Apple 那种「薄」。 */
  font-family: "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat-u {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--red-deep);
}
.stat-i {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink3);
}
.stat-i b { color: var(--ink2); font-weight: 500; }

/* ---------- 视差容器：JS 只写两个 CSS 变量 ---------- */

[data-prlx] {
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1));
  will-change: transform;
}

/* ---------- 首页 Hero：影院海报式满屏 ---------- */

.hero-screen {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--deep);
}
/* 环境光：极慢呼吸，8s 一个来回，不做任何位移抖动 */
.hero-screen::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  z-index: 0;
  background:
    radial-gradient(42% 40% at 76% 12%, rgba(201, 32, 42, .30), rgba(201, 32, 42, 0) 68%),
    radial-gradient(56% 44% at 22% 78%, rgba(226, 64, 74, .10), rgba(226, 64, 74, 0) 72%);
  filter: blur(30px);
  animation: heroGlow 9s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
@keyframes heroGlow {
  from { opacity: .72; }
  to   { opacity: 1; }
}
.hero-screen > .wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-bottom: 13vh;
  padding-top: 24vh;
}
.hero-screen h1.hero { margin-bottom: 26px; }
.hero-kicker {
  font-size: 12px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--red-deep);
  margin: 0 0 34px;
  font-weight: 500;
}
/* 首屏底部一条极细的进度提示线，不写「向下滚动」这类字 */
.hero-rule {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 72px;
  z-index: 3;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(237, 234, 229, 0), rgba(237, 234, 229, .30));
}

/* ---------- 业务模块卡：Apple 式大留白卡 ---------- */

.tile { min-height: 420px; }

/* ---------- 页脚 ---------- */

.foot { background: var(--gray); border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 13px; color: var(--ink3); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 30px; }
.foot h5 { font-size: 12px; letter-spacing: .08em; color: var(--ink); margin: 0 0 12px; font-weight: 500; }
.foot ul { list-style: none; margin: 0 0 18px; padding: 0; }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--ink2); }
.foot-entity { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; line-height: 1.9; }
.foot-entity b { font-weight: 500; color: var(--ink2); }
.foot-legal { margin-top: 16px; line-height: 1.9; }
.foot-brand { margin-top: 22px; display: flex; align-items: center; gap: 14px; letter-spacing: .1em; color: var(--ink3); font-size: 11px; }
.foot-brand img { display: block; height: 30px; width: auto; opacity: .92; }

/* ---------- 占位标记：上线前必须替换 ---------- */

.ph {
  border-bottom: 1px dashed var(--red-deep);
  color: var(--red-deep);
  background: rgba(226, 64, 74, .08);
  padding: 0 2px;
}

/* ---------- 动效：滚动淡入 + hover 位移，双护栏 ---------- */
/* 电影感的入场是「慢起、长收」，不是弹一下：位移加大、时长拉长、
   缓动只走前段快后段慢，全程无回弹。 */

.rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .95s cubic-bezier(.22, .61, .36, 1),
              transform .95s cubic-bezier(.22, .61, .36, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (hover: hover) {
  .tile, .metric, .cred { transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease; }
  .tile:hover, .metric:hover, .cred:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .tile:hover, .metric:hover, .cred:hover { transform: none; }
  .fig-box::before, .hero-screen::before { animation: none; }
  [data-prlx] { transform: none !important; }
  * { scroll-behavior: auto; }
}

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

@media (max-width: 900px) {
  h1.hero { font-size: clamp(38px, 10.6vw, 54px); }
  h1.t, h2.t { font-size: clamp(30px, 8.4vw, 40px); }
  .work-name { font-size: 64px; }
  .tiles, .cols3, .metrics, .foot-cols { grid-template-columns: 1fr; }
  .tiles.two { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; gap: 8px; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .cred dl { grid-template-columns: 1fr; gap: 4px; }
  .cred dt { margin-top: 10px; }
  .sec { padding: 64px 0; }
  .hero { padding: 72px 0 60px; }
  .nav-links, .btn-pill { display: none; }
  .burger { display: block; }
  .metric .num { font-size: 38px; }
  .fig-pair { grid-template-columns: 1fr; }
  .cline { flex-wrap: wrap; gap: 8px 16px; }

  /* 视觉层移动端：pin 少、动效减、字不缩太狠 */
  .hero-screen { min-height: calc(100svh - var(--nav-h)); }
  .hero-screen > .wrap { padding-bottom: 9vh; padding-top: 18vh; }
  .hero-screen::before { filter: blur(24px); }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .stat { padding: 28px 16px 24px 0; }
  .stat + .stat { padding-left: 16px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat-n { font-size: clamp(40px, 12vw, 60px); }
  .stat-u { font-size: 11px; margin-top: 9px; letter-spacing: .1em; }
  .stat-i { font-size: 12px; margin-top: 7px; }
  /* 宽银幕在手机上会扁到看不清，改为 16:9 */
  /* 手机上 2.35:1 只剩一条，抬到 16:9 才看得清画面 */
  .fig-box.ultra, .fig-box.wide, .fig-box.cine { aspect-ratio: 16 / 9; }
  .play-btn { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .play-btn::before { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
  .fig { margin-top: 34px; }
  .frame-tc { left: 12px; bottom: 10px; font-size: 9px; }
  .frame-badge { right: 12px; top: 12px; font-size: 9px; }
  .band-media::before, .band-media::after { height: 48px; }
  .tile { min-height: 300px; padding: 44px 26px 36px; }
}

/* 触屏与低端设备：关掉持续动画，省电且不卡 */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .fig-box::before { animation: none; inset: -4%; }
}

/* ==================================================================
   智能体平台页（2026-10-28 新增）
   三个平台各成一节，结构统一：编号 → 名称 → 定位 → 管线 → 指标 → 场景。
   分工明确——文字只负责「说清」，视觉负责「看见」：
   图带（band-media）、管线节点（pipe）、巨字指标（kpis）。
   指标一律标明口径（自有项目 / 方案设定），不做既成业绩暗示。
   ================================================================== */

/* ---------- 平台名：比 h2.t 略小，长名不折行 ---------- */
h2.t-nm { font-size: clamp(32px, 4.4vw, 58px); }

/* 深场里的图带：上下消融色必须跟着换成 #05060a，
   否则会出现一道比底色浅的硬边（.work 区同理，见前文）。 */
.sec-deep .band-media { --band-fade: var(--deep); }


/* ---------- 三平台并置卡：图在上、字在下 ---------- */
/* 卡间缝改暗：默认的白缝会沿图片边缘压出一道硬框，破坏边缘消融 */
.tiles.pcards { background: rgba(0, 0, 0, .55); }
.tile.pcard { min-height: 0; padding: 0 34px 42px; }
.pcard-media {
  position: relative;
  margin: 0 -34px 30px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--deep);
}
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.tile.pcard:hover .pcard-media img { transform: scale(1.045); }
/* 画面下缘压暗，让编号与卡体衔接，不出现硬边 */
.pcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 10, 0) 42%, rgba(6, 7, 10, .78) 100%);
}
.pcard-no {
  position: absolute;
  z-index: 2;
  left: 20px;
  bottom: 14px;
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.tile.pcard h3 { font-size: 26px; line-height: 1.3; margin: 0 0 8px; }
.tile.pcard .pcard-en {
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--ink3);
  margin: 0 0 16px;
}
.tile.dk .pcard-en, .tile.pcard .pcard-en { color: rgba(255, 255, 255, .42); }
.tile.pcard p.desc { font-size: 14.5px; line-height: 1.66; }

/* ---------- 能力标签：一排细胶囊，替代长句罗列 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.tile.dk .chips li { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .16); }
.chips.on-deep li { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .16); }

/* ---------- 技术底座层次图 ----------
   上排是各自独立的产品，下排是共用的一层。
   中间只画一条断线标注，不画箭头——产品之间没有先后，也不构成某条路径。 */
.stack { margin-top: 62px; }
.stack-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stack-node {
  padding: 22px 20px 20px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 3px;
  background: rgba(255, 255, 255, .028);
}
.stack-node .no {
  display: block;
  margin-bottom: 14px;
  font-size: 10.5px;
  letter-spacing: .2em;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.stack-node b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.stack-node em {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .52);
}
/* 在研：虚线、无红标——不冒充已发布 */
.stack-node.soon { border-style: dashed; border-color: rgba(255, 255, 255, .13); background: none; }
.stack-node.soon .no { color: rgba(255, 255, 255, .42); }
.stack-node.soon b { color: rgba(255, 255, 255, .62); font-weight: 500; }
.stack-node.soon em { color: rgba(255, 255, 255, .46); }

/* 断线标注：上下各一小段竖线，落向两层 */
.stack-joint {
  position: relative;
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .5);
}
.stack-joint::before,
.stack-joint::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 9px;
  background: rgba(255, 255, 255, .28);
  transform: translateX(-50%);
}
.stack-joint::before { top: 3px; }
.stack-joint::after { bottom: 3px; }

.stack-base {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .045);
}
.stack-cell { padding: 22px 20px; }
.stack-cell + .stack-cell { border-left: 1px solid rgba(255, 255, 255, .15); }
.stack-cell b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.stack-cell p { margin: 7px 0 0; font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, .5); }

/* ---------- 技术内核：并列模块 ----------
   一个智能体内部的构成部件。故意不画箭头、不连线、不放节点圆点——
   四个模块之间没有先后，只是「这台机器由哪几块组成」。
   顶部一道 22px 红短线只做标记，不指向下一步。
   竖排变体（.v）给「图 + 内核」的左右分栏用。 */
.mods {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: 30px;
}
.mods .m { padding: 0 26px; border-left: 1px solid var(--line); }
.mods .m:first-child { padding-left: 0; border-left: 0; }
.mods .m:last-child { padding-right: 0; }
.mods .i {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.mods .i::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--red);
}
.mods h4 { margin: 0 0 9px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.mods p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink2); }
.sec-deep .mods .m { border-color: rgba(255, 255, 255, .14); }
.sec-deep .mods p { color: rgba(255, 255, 255, .7); }

/* 竖排：竖线在左，模块依次向下（用于「竖图 + 内核」分栏） */
.mods.v { display: block; margin-top: 0; border-left: 1px solid var(--line); }
.mods.v .m { padding: 24px 0 24px 26px; border-left: 0; border-top: 1px solid var(--line); }
.mods.v .m:first-child { padding-top: 0; border-top: 0; }
.mods.v .m:last-child { padding-bottom: 0; }
.sec-deep .mods.v { border-left-color: rgba(255, 255, 255, .14); }
.sec-deep .mods.v .m { border-top-color: rgba(255, 255, 255, .14); }

/* ---------- 指标：比首页 stats 小一档，口径写在第三行 ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 54px;
  border-top: 1px solid var(--line);
}
/* 指标数按内容来，不凑数：两项就两列，四项就四列 */
.kpis.c2 { grid-template-columns: repeat(2, 1fr); }
.kpis.c4 { grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 32px 24px 28px 0; border-bottom: 1px solid var(--line); }
.kpi + .kpi { padding-left: 24px; border-left: 1px solid var(--line); }
.kpi-n {
  display: block;
  font-family: "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-n small { font-size: .4em; font-weight: 300; letter-spacing: 0; margin-left: 5px; }
.kpi-u { display: block; margin-top: 13px; font-size: 12px; letter-spacing: .14em; color: var(--red-deep); }
.kpi-i { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink3); }
.sec-deep .kpis { border-color: rgba(255, 255, 255, .14); }
.sec-deep .kpi { border-color: rgba(255, 255, 255, .14); }
.sec-deep .kpi + .kpi { border-left-color: rgba(255, 255, 255, .14); }
.sec-deep .kpi-i { color: rgba(255, 255, 255, .56); }

/* ---------- 分层架构：应用 / 算法 / 数据 / 硬件 ----------
   直接对应院校方案第 5 页的建设内容全景，四层自上而下读，
   每层是一组并列条目，不是流程。 */
.layers { margin-top: 34px; border-top: 1px solid var(--line); }
.layer {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 26px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.layer > dt,
.layer > h5,
.layer > .ln {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--red-deep);
  font-weight: 500;
}
.layer > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.layer > ul li { position: relative; }
.layer > ul li + li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: .64em;
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}

/* ---------- 技术选型对比：三行路线，本方案高亮 ---------- */
.cmp { margin-top: 44px; border-top: 1px solid var(--line); font-size: 14px; }
.cmp .r {
  display: grid;
  grid-template-columns: 1.3fr .92fr 1.05fr .68fr;
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink2);
  align-items: baseline;
}
.cmp .r.hd {
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--ink3);
  padding: 12px 0;
}
.cmp .r.pick { position: relative; color: #fff; padding-left: 16px; margin-left: -16px; }
.cmp .r.pick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--red);
}
.cmp .r.pick span:first-child { font-weight: 500; }

/* ---------- 应用案例：编号 + 性质标记 ----------
   案例是「它做过的一件具体事」，不是「它能做的全部」。
   所以每个案例都带一枚虚线性质标记（技术链路演示 / 院校立项方案），
   在视觉上和产品本体区分开，读者不会把案例当能力清单。 */
.cases { margin-top: 40px; }
.case { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.case + .case { margin-top: 46px; }
.case-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.case-no {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}
.case-tag {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .64);
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 2px 10px 3px;
}
.case .case-title {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.4vw, 29px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #fff;
}
.case p.case-d { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.72; color: rgba(255, 255, 255, .72); }
.case .mods { margin-top: 28px; }

/* 输入 / 输出：一条低对比度的规格行，像参数表不像正文 */
.scope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 44px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .62);
}
.scope > span { display: block; }
.scope b {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--red-deep);
}

/* ---------- 左右分栏：竖图 + 管线 ---------- */
.split { display: grid; grid-template-columns: 352px 1fr; gap: 56px; margin-top: 60px; align-items: start; }
.split .fig-box { margin: 0; }

/* ---------- 图条：一行 N 张，等宽，不带卡片框 ---------- */
.strip { display: grid; gap: 14px; margin-top: 28px; }
.strip.c3 { grid-template-columns: repeat(3, 1fr); }
.strip.c4 { grid-template-columns: repeat(4, 1fr); }
.strip figure { margin: 0; }
.strip-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-lift);
  border: 1px solid var(--line);
}
.strip-img img { width: 100%; height: 100%; object-fit: cover; }
.strip.c3 .strip-img { aspect-ratio: 5 / 3; }
.strip figcaption {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink3);
}
.strip figcaption b { display: block; color: var(--ink2); font-weight: 500; font-size: 12.5px; margin-bottom: 2px; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .mods { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 26px; }
  .mods .m, .mods .m:first-child, .mods .m:last-child {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .mods .m:first-child { border-top: 0; padding-top: 0; }
  .mods.v .m:last-child { padding-bottom: 0; }
  .kpis { grid-template-columns: 1fr; margin-top: 38px; }
  .kpi, .kpi + .kpi { padding: 24px 0; border-left: 0; }
  .split { grid-template-columns: 1fr; gap: 38px; margin-top: 38px; }
  .split .fig-box { max-width: 320px; }
  .case { padding-top: 26px; }
  .case + .case { margin-top: 34px; }
  .case .mods { margin-top: 22px; }
  .scope { gap: 6px 26px; }
  .strip.c3, .strip.c4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile.pcard { padding: 0 22px 32px; }
  .pcard-media { margin: 0 -22px 24px; }
  .tile.pcard h3 { font-size: 22px; }
  .stack { margin-top: 40px; }
  /* 分层架构：层名另起一行，条目跟在后 */
  .layer { grid-template-columns: 1fr; gap: 7px; padding: 15px 0; }
  .layer > ul { font-size: 14px; gap: 4px 20px; }
  /* 选型对比：窄屏去掉表头，改「标签 · 值」逐条读 */
  .cmp .r.hd { display: none; }
  .cmp .r { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .cmp .r > span:first-child { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
  .cmp .r > span[data-l]::before { content: attr(data-l) " · "; color: rgba(255, 255, 255, .5); }
  .kpis.c4 { grid-template-columns: 1fr 1fr; }
  .stack-row, .stack-base { grid-template-columns: 1fr 1fr; }
  .stack-base .stack-cell:nth-child(3) { border-left: 0; }
  .stack-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .15); }
}
@media (max-width: 560px) {
  .stack-row, .stack-base { grid-template-columns: 1fr; }
  .stack-node + .stack-node { margin-top: 0; }
  .stack-cell, .stack-cell + .stack-cell { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); }
  .stack-cell:first-child { border-top: 0; }
}