/* 🍞 @FILE static/about-visual.css — /about 视觉增强层（Z 轴层次 / 强调色 / 装饰层）
 * @WHY 依 ui-ux-pro-max 审查结论新增：
 *      ① Depth Layering 规范明确反对"纯扁平面板"（Don't: Flat opaque panels / bg-white），
 *         要求用 glass material 与 z-offset 区分内容与背景 → 毛玻璃顶栏、卡片浮起、示意投影。
 *      ② Accent for CTA only —— 强调色只用于主行动点，故页面上只有「申请开通」用橙色。
 * @GOTCHA 三层样式分工固定，勿混：base.css = 令牌与通用组件；about.css = 首屏与通用版式；
 *         about-sections.css = 内容型区块；本文件 = 视觉增强（阴影/玻璃/装饰/动效）。
 * @GOTCHA 所有动效必须尊重 prefers-reduced-motion（本文件末尾统一降级）。
 * @COUPLED static/base.css（令牌）、templates/about.html（引入方）
 */

/* ===== 1) 区块浮起：让"卡片层"与"页面背景"分离 ===== */
/* 内容型卡片的默认阴影整体升一档，配合分区底色形成层次，而不是贴平在背景上 */
.cap-shot,
.role-card,
.step-item,
.sec-block,
.why-item{ box-shadow:var(--shadow-card); }
.cap-shot{ box-shadow:var(--shadow-lift); }

/* 能力示意：外层玻璃框 + 内层白面，形成"屏幕"纵深 */
.cap-shot{ position:relative; overflow:hidden; }
.cap-shot::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 42%);
}

/* ===== 2) 首屏装饰层：网格 + 光晕（纯 CSS，不引图片）===== */
/* @WHY 首屏此前只有一层径向光晕，视觉信息量偏少；补一层极淡网格与底部渐隐，
       在不引入任何图片素材的前提下提升"纵向厚度"。 */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(680px 420px at 72% 26%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(680px 420px at 72% 26%,#000 0%,transparent 76%);
}
.hero::after{
  background:radial-gradient(820px 400px at 78% -6%,rgba(3,105,161,.42),transparent 66%),
             radial-gradient(520px 320px at 8% 96%,rgba(234,88,12,.16),transparent 72%);
}

/* ===== 2b) 图标升级（A 项）：从"单色小图标"升级为"彩色底块 + 语义色图标" ===== */
/* @WHY 原先所有区块的图标都是同一套深色底 + 白图标，视觉信息量单一，也是"简陋感"的来源之一。
        改为：更大的圆角底块 + 柔和渐变 + 语义化色调（蓝=能力 / 青=优势 / 橙=流程与重点），
        同时保持深海军蓝主色的权威感基调（底色浅、图标深，不引入高饱和色块）。 */
/* @GOTCHA .proof-item i 在 about.css 里是 flex 子项（flex:0 0 40px），
        flex-basis 非 auto 时会**压过 width** —— 只写 width 不生效（本次实测 46px 未落地）→ 必须同时改 flex。 */
.proof-item i,
.why-item i{
  width:46px; height:46px; border-radius:14px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 6px 16px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.proof-item i{ flex:0 0 46px; }
/* 平台保障（青蓝）：与能力区区分一档 */
.proof-item i{ background:linear-gradient(160deg,#E8F6F4,#D3EDE9); color:#0F766E; }
/* 为什么选我们（橙，呼应 CTA 强调色，但只用于图标底块不用于按钮） */
.why-item i{ background:linear-gradient(160deg,#FFF1E7,#FFE1CE); color:#C2410C; }

/* ===== 2c) 滚动错落（B 项）：同级卡片依次入场 ===== */
/* @WHY 原先所有元素同时淡入，节奏是"整块砸下来"；改为同级子项按序错开，形成自上而下的阅读引导。
        @GOTCHA 纯 CSS 实现（nth-child 延时），零 JS、零额外断言成本；禁用 JS 时元素本就全部可见，
                错落只影响过渡观感，不影响内容可读性。 */
.why-grid > *:nth-child(2),
.grid-4 > *:nth-child(2),
.step-grid > *:nth-child(2),
.role-grid > *:nth-child(2),
.proof-grid > *:nth-child(2){ transition-delay:.07s; }
.why-grid > *:nth-child(3),
.grid-4 > *:nth-child(3),
.step-grid > *:nth-child(3),
.role-grid > *:nth-child(3),
.proof-grid > *:nth-child(3){ transition-delay:.14s; }
.why-grid > *:nth-child(4),
.grid-4 > *:nth-child(4),
.step-grid > *:nth-child(4),
.proof-grid > *:nth-child(4){ transition-delay:.21s; }
.why-grid > *:nth-child(5){ transition-delay:.28s; }

/* ===== 3) 强调色点缀：只在"行动"与"数据"上使用 ===== */
.cap-points li::before,
.sec-points li::before,
.role-points li::before{ box-shadow:0 0 0 3px rgba(3,105,161,.12); }
.step-no{ background:#FFF1E7; color:#C2410C; }
.role-eyebrow{ color:#C2410C; }

/* ===== 4) 徽章条（Proof 层）：Hero 之下的可信事实 ===== */
/* @WHY ui-ux-pro-max 的落地页规范把 Proof 排在 Hero 之后第 2 位，且强调 Security badges。
        我们没有客户 Logo 授权，故用**可验证的事实**替代（备案号 / 数据境内 / 权限 / 可自部署）。 */
.proof-badges{ display:grid; gap:var(--s3); grid-template-columns:1fr; margin-top:var(--s7); }
.badge{ display:flex; align-items:center; gap:var(--s3); background:var(--glass-bg);
        border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); padding:12px 16px;
        color:rgba(255,255,255,.92); font-size:14px; }
.badge svg{ flex:0 0 18px; color:#7dd3fc; }
.badge b{ font-weight:700; color:#fff; }

/* ===== 5) 悬浮咨询入口（对标竞品的"在线咨询"）===== */
.fab{ position:fixed; right:20px; bottom:22px; z-index:40; display:flex; flex-direction:column; gap:8px; }
.fab a{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  background:var(--color-cta); color:#fff; border-radius:999px; text-decoration:none;
  font-size:14px; font-weight:600; box-shadow:0 10px 26px rgba(234,88,12,.34);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.fab a:hover{ background:#C2410C; transform:translateY(-2px); box-shadow:0 14px 32px rgba(234,88,12,.4); }
.fab a.ghost{ background:#fff; color:var(--color-primary); border:1px solid var(--color-border); box-shadow:var(--shadow-lift); }
.fab a.ghost:hover{ background:#F8FAFC; }

@media (min-width:768px){
  .proof-badges{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .proof-badges{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:560px){
  .fab{ right:14px; bottom:16px; }
  .fab a{ font-size:13px; padding:0 14px; }
  .hero::before{ background-size:40px 40px; }
}

/* ===== 6) 动效降级（统一出口）===== */
@media (prefers-reduced-motion:reduce){
  .fab a:hover,
  .card:hover{ transform:none; }
  .hero::before{ opacity:.35; }
  /* @GOTCHA 错落动画在 reduce-motion 下必须清零，否则"依次延时出现"会被当作动效而令人不适 */
  .why-grid > *, .grid-4 > *, .step-grid > *, .role-grid > *, .proof-grid > *{ transition-delay:0s !important; }
}