/* ============================================================
   V3.9 · 产品页
   1) 端云协同三图：三列小卡 → 整幅大图逐张展示（视觉冲击优先）
   2) 配合 HTML：标准化交付区提前至性能区之上（区块顺序在
      products.html 内调整，本层只负责三图区新样式）
   ============================================================ */

/* ---------- 三张架构图 · 整幅大图 ---------- */
.arch-figures{display:flex;flex-direction:column;gap:40px;margin-top:38px}
.arch-figure{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 52px -34px rgba(62,44,22,.4);
}
.arch-figure .pic{position:relative;background:#0d1117;line-height:0}
.arch-figure .pic img{display:block;width:100%;height:auto}
.arch-figure .no{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(13,17,23,.72);color:#f3efe6;font-size:11.5px;letter-spacing:.12em;
  padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px);
}
.arch-figure .cap{
  display:flex;align-items:baseline;gap:10px 26px;flex-wrap:wrap;
  padding:18px 24px 20px;border-top:1px solid var(--line);
}
.arch-figure .cap h4{font-size:17px;font-weight:700;color:var(--ink);white-space:nowrap}
.arch-figure .cap p{flex:1;min-width:260px;font-size:13.5px;color:var(--muted);line-height:1.7}

@media (max-width:960px){
  .arch-figures{gap:30px}
}
@media (max-width:680px){
  .arch-figures{gap:24px;margin-top:28px}
  .arch-figure{border-radius:14px}
  .arch-figure .no{top:10px;left:10px;font-size:10.5px}
  .arch-figure .cap{padding:13px 16px 15px;gap:6px 0}
  .arch-figure .cap h4{white-space:normal}
  .arch-figure .cap p{min-width:0}
}