/* 🍞 @FILE static/about.css — 对外展示页 /about 的专属样式
 * @WHY 设计令牌、reset、.wrap/.btn/.foot/.reveal 等**通用层**已上移到 static/base.css（单一真源）；
 *      本文件只保留 /about 独有的版式（Hero、能力卡、场景、服务对象、关于我们、CTA）。
 * @GOTCHA 加载顺序必须是 base.css → about.css，否则令牌未定义（页面会整体失色）
 * @COUPLED static/base.css（通用层来源）、templates/about.html（本文件唯一使用方）
 */
/* 顶部导航 */
/* @WHY 毛玻璃顶栏（ui-ux-pro-max 的 Glassmorphism + Depth Layering）：滚动时内容从半透明层下穿过，
        形成前后景深关系 —— 纯不透明白底顶栏是"扁平廉价感"的主要来源之一。
        @GOTCHA 用 @supports 兜底：不支持 backdrop-filter 的浏览器回落到不透明底，避免文字压字。 */
.top{ position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--color-border); }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .top{ background:var(--glass-bg); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); }
}
.top-in{ max-width:var(--maxw); margin:0 auto; padding:var(--s3) var(--s5); display:flex; align-items:center; gap:var(--s5); }
.brand{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; color:var(--color-primary); text-decoration:none; letter-spacing:.02em; }
.brand i{ width:32px; height:32px; border-radius:8px; background:var(--color-primary); color:#fff; display:grid; place-items:center; font-size:16px; font-weight:800; font-style:normal; }
.top nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.top nav a{ padding:10px 14px; border-radius:8px; font-size:15px; color:var(--color-secondary); text-decoration:none; transition:color .2s,background-color .2s; }
.top nav a:hover{ color:var(--color-primary); background:var(--color-muted); }
.top .btn{ margin-left:var(--s3); }

/* Hero */
.hero{ background:var(--color-primary); color:#fff; padding:var(--s9) 0; position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(780px 380px at 78% -6%,rgba(3,105,161,.38),transparent 66%); pointer-events:none; }
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; gap:var(--s8); grid-template-columns:1fr; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:var(--s2); font-size:13px; font-weight:600; letter-spacing:.08em; color:#93c5fd; margin-bottom:var(--s5); }
.eyebrow::before{ content:""; width:24px; height:2px; background:#93c5fd; }
/* @WHY 字号上限 48px（对标竞品 H1 为 58px，但我们不能照搬）：竞品标题是**英文**，
        中文同字号占位宽约 2 倍 —— 实测 56px 时 12 个汉字的标题宽 672px 而 Hero 左栏仅约 583px，
        会把「信息」挤成第 3 行（"碎词"）。48px 下约 576px，刚好一行放下，气势与可读性兼顾。
        下限 30px 保证 375px 下仍醒目。改字号后须跑 verify_visual 的「H1 行数 ≤ 2」断言复核。 */
.hero h1{ color:#fff; font-size:clamp(30px,4vw,48px); font-weight:800; }
.hero h1 span{ color:#7dd3fc; }
.hero .lead{ margin-top:var(--s5); font-size:clamp(16px,1.6vw,18px); color:rgba(255,255,255,.82); max-width:56ch; }
.hero-actions{ margin-top:var(--s7); display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.34); }
.hero .btn-outline:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
/* @WHY 首屏产品示意加强 Z 轴：外层玻璃框 + 强投影 + 顶部高光边，让它"浮"在深色 Hero 之上 */
.shot{ position:relative; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
       border:1px solid rgba(255,255,255,.24); padding:14px;
       box-shadow:0 40px 80px rgba(0,0,0,.42), 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28); }
.shot-bar{ display:flex; gap:6px; margin-bottom:12px; }
.shot-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.34); }
/* 界面示意：HTML/CSS 绘制（**不用真实截图** —— 后台截图必含会员 PII，不可入库）
   @COUPLED templates/_hero_ui.html（class 名须同步；该片段内数据必须保持明显虚构） */
.ui{ display:flex; border-radius:8px; overflow:hidden; background:#fff; font-size:11px; line-height:1.5;
     aspect-ratio:16/10; box-shadow:inset 0 0 0 1px rgba(15,23,42,.06); }
.ui-side{ flex:0 0 27%; background:#0F172A; color:rgba(255,255,255,.66); padding:12px 10px; display:flex; flex-direction:column; gap:10px; }
.ui-logo{ display:flex; align-items:center; gap:6px; color:#fff; font-weight:800; font-size:11.5px; }
.ui-logo i{ width:17px; height:17px; border-radius:5px; background:#0369A1; color:#fff; display:grid; place-items:center; font-size:9px; font-style:normal; }
.ui-side nav{ display:flex; flex-direction:column; gap:3px; }
.ui-side nav span{ padding:5px 7px; border-radius:5px; white-space:nowrap; }
.ui-side nav span.on{ background:rgba(255,255,255,.14); color:#fff; font-weight:600; }
.ui-main{ flex:1; min-width:0; padding:12px; display:flex; flex-direction:column; gap:10px; background:#F8FAFC; }
.ui-bar{ display:flex; align-items:center; gap:8px; }
.ui-search{ flex:1; background:#fff; border:1px solid #E2E8F0; border-radius:999px; padding:5px 10px; color:#94a3b8; }
.ui-chip{ background:#EBF4FB; color:#0369A1; border-radius:999px; padding:4px 8px; font-weight:600; white-space:nowrap; }
.ui-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ui-stats > div{ background:#fff; border:1px solid #E2E8F0; border-radius:7px; padding:7px 8px; }
.ui-stats b{ display:block; font-size:14px; color:#020617; font-weight:800; letter-spacing:-.02em; }
.ui-stats em{ font-style:normal; color:#64748b; font-size:10px; }
.ui-table{ flex:1; background:#fff; border:1px solid #E2E8F0; border-radius:7px; overflow:hidden; }
.ui-tr{ display:grid; grid-template-columns:1.7fr .9fr .7fr .8fr; gap:6px; padding:6px 9px;
        border-bottom:1px solid #F1F5F9; align-items:center; }
.ui-tr:last-child{ border-bottom:0; }
.ui-tr span{ color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-th,.ui-th span{ background:#F8FAFC; color:#64748b; font-weight:600; }
.ui-tr span.ui-ok{ color:#15803D; font-weight:600; }
.ui-tr span.ui-wait{ color:#B45309; font-weight:600; }
.hero-foot{ margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.14); display:grid; gap:var(--s4); }
.hero-foot div{ font-size:14px; color:rgba(255,255,255,.74); display:flex; gap:10px; align-items:flex-start; }
.hero-foot svg{ flex:0 0 18px; margin-top:3px; color:#7dd3fc; }

/* 通用区块 */
section{ padding:var(--s9) 0; }
.sec-head{ max-width:66ch; margin-bottom:var(--s7); }
.sec-head h2{ font-size:clamp(22px,2.8vw,32px); }
.sec-head p{ margin-top:var(--s3); font-size:16px; color:var(--color-muted-foreground); }

/* 平台保障 */
.proof{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); padding:var(--s7) 0; }
.proof-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
.proof-item{ display:flex; gap:var(--s4); align-items:flex-start; }
.proof-item i{ flex:0 0 40px; height:40px; border-radius:9px; background:#EBF4FB; color:var(--color-accent); display:grid; place-items:center; }
.proof-item h3{ font-size:15.5px; margin-bottom:2px; }
.proof-item p{ font-size:14px; color:var(--color-muted-foreground); }

/* 卡片网格 */
.grid-3,.grid-4{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
/* @WHY 卡片用 --radius-lg(16px) 与双层轻阴影：对标实测竞品卡片为 17px 且**几乎无阴影**，
        我们在圆角上对齐、在阴影上略强一点（分区底色 + 轻阴影 = 层次更清楚）。 */
.card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg);
       padding:var(--s6) var(--s5); box-shadow:var(--shadow-card);
       transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease; }
.card:hover{ box-shadow:var(--shadow-float); border-color:#cbd8e6; transform:translateY(-4px); }
.card i{ display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:var(--color-primary); color:#fff; margin-bottom:var(--s4); }
.card h3{ font-size:17px; margin-bottom:var(--s2); }
.card p{ font-size:14.5px; color:var(--color-muted-foreground); }

/* 应用场景 */
/* @WHY 改回浅底（原为白底）：加入「为什么选择商慧云」后，白底区块变成三个，
        会与本段形成连续同色。分区底色序列为 深→白→浅 交替，详见 templates/about.html 的注释。 */
.use{ background:var(--color-background); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.use-item{ background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--s5); }
.use-item span{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--color-accent); margin-bottom:var(--s2); }
.use-item h3{ font-size:16px; margin-bottom:var(--s2); }
.use-item p{ font-size:14px; color:var(--color-muted-foreground); }

/* 服务对象 */
/* @WHY 本段用白底：前一段「实施与交付流程」为浅底，两者相邻时须一深一浅（序列见 templates/about.html） */
#audience{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.who-grid{ display:grid; gap:var(--s6); grid-template-columns:1fr; }
.who-item{ padding-left:var(--s5); border-left:2px solid var(--color-accent); }
.who-item h3{ font-size:17px; margin-bottom:var(--s2); }
.who-item p{ font-size:14.5px; color:var(--color-muted-foreground); }

/* 关于 / 联系 */
/* @WHY 本段用浅底：前一段「服务对象」已改白底，此处回到浅底以维持交替；
        同时卡片本身是白色（.card），浅底能让白卡浮起来，比"白卡压白底"层次更清楚。 */
#about{ background:var(--color-background); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.two{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
.dl{ font-size:15px; }
.dl > div{ display:flex; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--color-border); }
.dl > div:last-child{ border-bottom:0; }
.dl dt{ flex:0 0 88px; color:var(--color-muted-foreground); }
.dl dd{ color:var(--color-foreground); font-weight:500; word-break:break-word; }
.dl a{ color:var(--color-accent); text-decoration:none; }
.dl a:hover{ text-decoration:underline; }

/* CTA 收尾 */
.cta{ background:var(--color-primary); color:#fff; text-align:center; }
.cta h2{ color:#fff; font-size:clamp(22px,2.8vw,30px); }
.cta p{ margin-top:var(--s4); color:rgba(255,255,255,.78); max-width:56ch; margin-left:auto; margin-right:auto; }
.cta .btn{ margin-top:var(--s6); }

/* 响应式：375 / 768 / 1024 / 1440 */
@media (min-width:768px){
  .proof-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .who-grid{ grid-template-columns:repeat(3,1fr); }
  .two{ grid-template-columns:1.05fr .95fr; }
  .hero-foot{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .proof-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767px){
  .top nav a:not(.btn){ display:none; }
  .hero{ padding:var(--s8) 0; }
  section{ padding:var(--s8) 0; }
}
/* 小屏极简版：375px 实测放不下「侧边栏 + 4 列表格」（文字互挤、表格只剩表头）→
   改为只保留「搜索条 + 三张统计卡」的窗口式示意，仍保有产品感但不再挤成一团 */
@media (max-width:560px){
  .ui{ aspect-ratio:auto; }
  .ui-side,.ui-table{ display:none; }
  .ui-main{ padding:14px; gap:12px; }
  .ui-search{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ui-stats b{ font-size:19px; }
  .ui-stats em{ font-size:11px; white-space:nowrap; }
}