/* 赛璞科技官网 - 图文展示组件
 * 首页与产品页共用：机制图卡 .diagram、图文交替 .lane，
 * 外加首页独有的 .home-hero / .fact-bar / .loop-steps / .recent-grid。
 * 设计目标：用机制图讲清楚业务，不靠大色块撑版面。
 */

/* ========== Hero：非对称双栏，左文右图 ========== */
.home-hero {
  padding: 118px 0 56px;
}
.home-hero .container {
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 56px; align-items: center;
}
/* grid item 默认 min-width:auto，会被里面最宽的不可断内容顶开，窄屏下溢出的是整个页面。
 * 归零之后该换行的换行、该裁的裁，容器说多宽就是多宽。 */
.home-hero .container > *, .lane > * { min-width: 0; }
/* 标题跟着视口走：1440 下 58px（原来 46px 在这个宽度上太小，撑不住版面），
 * 窄屏收回 34px。clamp 免得再写一堆断点。 */
.home-hero h1 {
  font-size: clamp(34px, 3.6vw, 58px); font-weight: 800; line-height: 1.18;
  letter-spacing: -.02em; margin-bottom: 20px;
}
/* 58px 的中文标题在 527px 的左栏里必然折两行，而中文默认可以在任意两字之间断，
 * 不管的话会断成「把 AI 做进行 / 业的核心流程」。前后两半各自 nowrap，
 * 断点就只能落在它们中间——「把 AI 做进行业的 / 核心流程」。 */
.home-hero h1 > span, .home-hero h1 em { white-space: nowrap; }
/* 强调的那半句走 brand → vivid 渐变。活力色原本全页只出现在 section-title 下面
 * 那条 32×3px 的小横线上，等于没用；放到首屏最大的字上才叫"活力色"。 */
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand) 0%, var(--vivid) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.home-hero .lead {
  font-size: 18.5px; line-height: 1.85; color: var(--text-secondary); margin-bottom: 20px;
}
/* 行业清单从两行灰字改成一排药丸：左栏原本只有标题+两段文字+按钮，
 * 内容量撑不起右边 370px 的图，给它一组有形状的东西。 */
.home-hero .sectors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.home-hero .sectors span {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--border-color); border-radius: 20px;
  padding: 4px 11px; line-height: 1.6;
  transition: border-color .2s, color .2s;
}
.home-hero .sectors span:hover { border-color: var(--brand); color: var(--brand); }
.home-hero .cta-group { display: flex; gap: 14px; flex-wrap: wrap; }
/* 首屏这张机制图是门面：底下托一层品牌色光晕。
 * 注意是光晕不是卡片——不描边、不给底色，图直接躺在页面上。
 * 一旦加了边框就又成了"一个有边界的盒子"，左边是裸文字，右边是个盒子，
 * 左右视觉重量立刻不对等。 */
.home-hero .diagram {
  filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--brand) 22%, transparent));
}

/* 机制图：不套卡片壳。
 * 图和左边那栏文字是同级内容，谁也不该比谁多一层容器——之前给图包了
 * 白底+边框+阴影+22px 内边距，左边却是裸文字，看着就是右边贴了个外来物。
 * 全站 44 处 .diagram 现在都带 .diagram-live，图自己吃 CSS 变量跟主题走，
 * 不需要白底给它兜浅色，所以壳可以整个摘掉。 */
.diagram img { display: block; width: 100%; height: auto; }

/* 新一代机制图：图本身只写 CSS 变量不写死颜色，js/diagrams.js 把它内联进页面之后
 * 就能吃到这里的令牌，深浅两套主题、各产品标识色都自动跟随，不用准备多套文件。
 * 第 2、3 批把产品页和白皮书的图也迁过来之后，这组规则并回 .diagram，删掉这个类。 */
.diagram-live {
  color: var(--text-primary);
}
.diagram-live svg { display: block; width: 100%; height: auto; }
/* 图上的字统一提半档字重。这些图按 640 宽画、落到 579px 的格子里，
 * 13px 会缩到 11.8px，常规字重在 1440 的版面上看着发虚像线框稿。
 * 内联之后 CSS 能直接选中 <text>，19 张一次全覆盖，不用改 SVG 文件。 */
.diagram-live svg text { font-weight: 500; }

/* ========== 窄屏：完整缩略图 + 点开看大图 ==========
 * 上一版在这里给图设了 min-width:520px 让容器横滑，想法是"宁可横滑也不把字压扁"。
 * 实测下来是错的：390 的屏上每张图只显示左半边，右边那半用户根本不知道存在——
 * 偃师的 14 个阶段只看得到前 8 个。半张图比小字糟得多。
 *
 * 改成完整显示。字确实只有 8px 上下读不了，但结构轮廓看得见，
 * 想读细节点角标开全屏——那是个用户主动发起的动作，预期清楚。 */
/* 角标由 JS 无条件插入（插入时没法可靠地知道之后会不会转屏），
 * 默认藏起来，只在窄屏亮出来。少这一条桌面端就会露出一排「点开看大图」。 */
.diagram .zoom-hint { display: none; }

@media (max-width: 720px) {
  .diagram { position: relative; cursor: zoom-in; }
  .diagram .zoom-hint {
    position: absolute; right: 0; bottom: -6px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-family: var(--font-mono);
    color: var(--text-muted);
    border: 1px solid var(--border-color); border-radius: 20px;
    padding: 3px 10px; background: var(--bg-card);
    pointer-events: none;   /* 点它等于点图，别自己吃掉事件 */
  }
}

/* 全屏查看层：由 js/diagrams.js 动态建出来挂到 body 上，26 个页面不用改 HTML */
.dgv-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dgv-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono);
}
.dgv-close {
  width: 34px; height: 34px; border: 1px solid var(--border-color);
  border-radius: 50%; background: var(--bg-card); color: var(--text-primary);
  font-size: 19px; line-height: 1; cursor: pointer;
}
/* pinch-zoom 交给浏览器原生做，不自己写手势——原生的惯性和边界处理比手写的稳 */
.dgv-scroll {
  flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom pan-x pan-y;
  display: flex; align-items: center; padding: 16px;
}
/* 780 是按"13px 的字放大到 15.8px"倒推的：再小读着费劲，再大横向要拖太多趟 */
.dgv-scroll svg { width: 780px; max-width: none; height: auto; flex: none; }
body.dgv-open { overflow: hidden; }

/* ========== 全宽色带：全站只用两处，别泛滥 ==========
 * 一处贴在 hero 下面（事实条），一处给"我们怎么运转自己"。
 * 目的是破掉"白卡片从头排到尾"——页面节奏本来是白白白灰白灰灰，
 * 插两段带子之后才有起伏。
 *
 * 带上的一切颜色都走 --band-*，一个都不碰 --text-*。
 * 不是因为那组跟主题翻——恰恰相反，--band-* 自己就是两套（见 tokens.css）：
 * 浅色主题下带子是浅的、字是深的，深色主题下带子是深的、字是白的。
 * 单独一组的意义在于"带上"和"带外"可以各自决定深浅，互不牵连。
 */
.band {
  background: var(--band-bg);
  color: var(--band-text);
  position: relative; z-index: 1;
}
/* 深色主题下页面底本身就暗，色带容易糊进背景，补一圈描边把边界立起来。
 * 浅色下不需要——深色块落在近白底上边界自明。 */
:root[data-theme="dark"] .band { border-block: 1px solid var(--border-color); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .band { border-block: 1px solid var(--border-color); }
}
.band .section-title, .band h2, .band h4 { color: var(--band-text); }
.band .section-desc, .band p { color: var(--band-muted); }
/* 标题下那条活力色小横线在带上看不清，改成跟标题同色 */
.band .section-title::after { background: var(--band-text); opacity: .85; }
.band a { color: var(--band-text); }
.band .lane-more { color: var(--band-text); }
.band .lane-more:hover { opacity: .8; }

/* ========== 事实条：可核验的数字，每个都能点进去 ========== */
.fact-bar { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact {
  text-align: center; padding: 6px 20px; position: relative;
  color: inherit; display: block;
}
.fact + .fact::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 46px; background: var(--border-color);
}
.fact .n {
  font-family: var(--font-mono); font-size: 40px; font-weight: 700;
  color: var(--text-primary); line-height: 1.1; letter-spacing: -.03em;
}
.fact .n small { font-size: 18px; color: var(--vivid-text); font-weight: 600; }
.fact .t { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
a.fact { border-radius: var(--radius-sm); transition: background .2s; }
a.fact:hover { background: var(--vivid-soft); }
a.fact:hover .n { color: var(--brand); }
a.fact:hover .t { color: var(--text-secondary); }

/* 事实条落在色带上：数字放大到 56px 当第一记视觉锤，
 * 分隔线和 hover 底色都走 --band-* 那套。
 *
 * 首页这条同时挂着 .metrics（style.css:229），那个类自带白底卡片外观——
 * 色带本身就是背景，上面再套一张卡片等于把带子挖掉一块，整个撤掉。 */
.band .metrics {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.band .fact-bar { padding: 8px 0; }
.band .fact .n { color: var(--band-text); font-size: 56px; }
.band .fact .n small { color: var(--band-text); opacity: .72; }
.band .fact .t { color: var(--band-muted); font-size: 13.5px; }
.band .fact + .fact::before { background: var(--band-line); height: 56px; }
.band a.fact:hover { background: color-mix(in srgb, var(--band-text) 8%, transparent); }
.band a.fact:hover .n, .band a.fact:hover .t { color: var(--band-text); }

/* ========== 业务主线：图文左右交替 ========== */
.lane {
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 56px; align-items: center;
  padding: 64px 0;
}
.lane + .lane { border-top: 1px solid var(--border-subtle); }
/* 图文换边时列宽也要跟着换：1.12fr 那一栏是留给图的。
 * 只调 order 不调列宽的话，lane-alt 的图会落进 1fr 的窄栏（少 62px），
 * 相邻两条 lane 的图一宽一窄，看着就是没对齐。 */
.lane-alt { grid-template-columns: 1.12fr 1fr; }
.lane-alt .lane-text { order: 2; }
.lane-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--lane-accent, var(--hero-accent, var(--brand)));
  background: color-mix(in srgb, var(--lane-accent, var(--hero-accent, var(--brand))) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--lane-accent, var(--hero-accent, var(--brand))) 24%, transparent);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
}
.lane-tag .ic { color: inherit; margin: 0; }
.lane h3 { font-size: 27px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.01em; }
.lane h3 .sub {
  display: block; font-family: var(--font-en); font-size: 13px;
  font-weight: 500; color: var(--text-muted); margin-top: 4px; letter-spacing: 0;
}
.lane p { font-size: 15px; color: var(--text-secondary); line-height: 1.85; }
.lane ul { list-style: none; margin: 18px 0 22px; }
.lane li {
  font-size: 14px; color: var(--text-secondary); line-height: 1.7;
  padding: 7px 0 7px 22px; position: relative;
  border-top: 1px solid var(--border-subtle);
}
.lane li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--lane-accent, var(--hero-accent, var(--brand)));
}
.lane-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--lane-accent, var(--hero-accent, var(--brand)));
}

/* ========== 自治闭环：四步横向流程 ========== */
.loop-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px;
}
.loop-step {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 26px 24px; position: relative;
}
.loop-step .idx {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--vivid-text); letter-spacing: .1em; margin-bottom: 10px;
}
.loop-step h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.loop-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.78; }
/* 步骤之间的箭头，说明这是一条闭环而不是四张并列卡 */
.loop-step:not(:last-child)::after {
  content: '→'; position: absolute; right: -14px; top: 50%;
  transform: translateY(-50%); color: var(--border-strong);
  font-size: 17px; line-height: 1;
}

/* 四步落在色带上：改成半透明玻璃卡。
 * 毛玻璃在浅色主题下一直做不了（白叠白 blur 出来还是白，只会让字发灰），
 * 所以这个效果原本只有深色用户看得到。色带底是深的，浅色主题下也成立——
 * 缺的那块高级感从这里补回来。
 *
 * 多带一层 .loop-steps 是为了压过 css/effects.css 那组
 * `:root[data-theme="dark"] .loop-step`——它同为 (0,2,0) 且加载在后，
 * 不提特异性的话深色主题下卡片底色会被它抢回 --bg-card。*/
.band .loop-steps .loop-step {
  background: var(--band-card);
  border-color: var(--band-line);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
/* .62 在渐变青端只有 3.87，跟正文说明取齐到 .74 才够 4.5。
 * 序号本来就靠字号和字重跟标题拉开层次，不差这点亮度。 */
.band .loop-steps .loop-step .idx { color: var(--band-text); opacity: .74; }
.band .loop-steps .loop-step h4 { color: var(--band-text); }
.band .loop-steps .loop-step p { color: var(--band-muted); }
.band .loop-steps .loop-step:not(:last-child)::after { color: var(--band-line); }
/* hover 用 color-mix 兑 --band-text 而不是写死白：
 * 浅色带上 band-text 是深色，兑出来是淡淡的暗色 hover；
 * 深色带上它是白，兑出来跟以前一样。一套写法两个主题都对。 */
.band .loop-steps .loop-step:hover {
  background: color-mix(in srgb, var(--band-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--band-text) 30%, transparent);
  box-shadow: var(--band-shadow);
}

/* ========== 最近动态：三条横排 ========== */
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.recent-item {
  display: block; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 22px 22px 24px;
  border-top: 2px solid var(--item-accent, var(--brand));
  transition: transform .3s, box-shadow .3s;
}
.recent-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: inherit; }
.recent-item .when {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.recent-item h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.recent-item p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; }

/* ========== 响应式 ========== */
@media (max-width: 900px) {
  .home-hero { padding: 104px 0 48px; }
  .home-hero .container { grid-template-columns: 1fr; gap: 36px; }
  /* 窄屏必须把 nowrap 放开：390 的屏上「把 AI 做进行业的」一块就有 310px，
   * 不许断行就直接把整页顶出视口。字小了断哪儿都不难看，不用管断点。 */
  .home-hero h1 > span, .home-hero h1 em { white-space: normal; }
  /* 色带上的数字在窄屏收回来，56px 两列排会挤成一团 */
  .band .fact .n { font-size: 38px; }
  .lane { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .lane-alt .lane-text { order: 0; }
  .lane h3 { font-size: 23px; }
  .fact-bar { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .fact:nth-child(3)::before { display: none; }
  .fact .n { font-size: 32px; }
  .recent-grid { grid-template-columns: 1fr; }
  /* 四步在窄屏排 2×2：折行后箭头的指向会失真，直接不画 */
  .loop-steps { grid-template-columns: repeat(2, 1fr); }
  .loop-step:not(:last-child)::after { display: none; }
}
@media (max-width: 480px) {
  .home-hero h1 { font-size: 28px; }
  .fact-bar { grid-template-columns: 1fr; }
  .fact + .fact::before { display: none; }
  .fact + .fact { border-top: 1px solid var(--border-subtle); padding-top: 20px; }
  /* 单列之后分隔线改画在上边，色带上 --border-subtle 是看不见的，换白半透明 */
  .band .fact + .fact { border-top-color: var(--band-line); }
  .band .fact .n { font-size: 32px; }
  .loop-steps { grid-template-columns: 1fr; }
  .loop-step:not(:last-child)::after {
    display: block; content: '↓'; right: 50%; top: auto; bottom: -14px; transform: translateX(50%);
  }
}