/* 🍞 @FILE static/about-sections.css — /about 加厚区块样式（能力 TAB / 为什么选我们 / 场景 / 角色 / FAQ）
 * @WHY 与 about.css 分离：about.css 管首屏与通用版式，本文件管新增的"内容型区块"，
 *      分开后两个文件都远离 300 行红线，也便于单独回归。
 * @GOTCHA 加载顺序：base.css → about.css → about-sections.css（本文件依赖前两者的令牌与 .card/.sec-head）
 * @COUPLED templates/_about_capability.html（.cap-*）、templates/about.html（引入方）
 */
/* ===== 能力 TAB ===== */
.cap-tablist{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6); }
.cap-tablist button{
  font:inherit; font-size:15px; font-weight:600; color:var(--color-secondary);
  background:var(--color-card); border:1px solid var(--color-border); border-radius:999px;
  padding:10px 18px; min-height:44px; cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.cap-tablist button:hover{ color:var(--color-primary); border-color:#cbd8e6; box-shadow:var(--shadow-card); }
.cap-tablist button[aria-selected="true"]{
  background:var(--color-primary); border-color:var(--color-primary); color:#fff; box-shadow:var(--shadow-lift);
}
.cap-panel{ animation:capIn .28s ease both; }
@keyframes capIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* @GOTCHA 渐进增强：默认**所有面板可见**（无 JS 时内容不丢）；
        仅当 JS 在容器上打了 data-tabs="on" 后才隐藏非当前面板。 */
[data-tabs="on"] .cap-panel{ display:none; }
[data-tabs="on"] .cap-panel.is-on{ display:block; }
.cap-grid{ display:grid; gap:var(--s6); grid-template-columns:1fr; align-items:start; }
.cap-copy h3{ font-size:20px; margin-bottom:var(--s3); }
.cap-copy > p{ font-size:15.5px; color:var(--color-muted-foreground); }
.cap-points{ list-style:none; margin-top:var(--s4); }
.cap-points li{ position:relative; padding-left:26px; margin:var(--s2) 0; font-size:14.5px; color:var(--color-secondary); }
.cap-points li::before{
  content:""; position:absolute; left:4px; top:.55em; width:7px; height:7px; border-radius:50%;
  background:var(--color-accent);
}
.cap-shot{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg);
           box-shadow:var(--shadow-card); padding:var(--s4); }
/* 示意内部通用：窗口条 */
.cap-shot .shot-bar{ display:flex; gap:6px; margin-bottom:10px; }
.cap-shot .shot-bar i{ width:9px; height:9px; border-radius:50%; background:var(--color-muted); }
/* 示意内部：表格型（企业信息 / 会员服务） */
.mini-table{ border:1px solid var(--color-border); border-radius:8px; overflow:hidden; font-size:12px; }
.mini-tr{ display:grid; gap:6px; padding:8px 10px; border-bottom:1px solid #F1F5F9; align-items:center; }
.mini-tr:last-child{ border-bottom:0; }
.mini-tr span{ color:var(--color-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-th,.mini-th span{ background:var(--color-background); color:var(--color-muted-foreground); font-weight:600; }
.mini-3{ grid-template-columns:1.6fr 1fr .9fr; }
.mini-4{ grid-template-columns:1.5fr .9fr .8fr .8fr; }
.mini-tag{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; }
.mini-ok{ background:#DCFCE7; color:#15803D; }
.mini-wait{ background:#FEF3C7; color:#B45309; }
.mini-off{ background:var(--color-muted); color:var(--color-muted-foreground); }

/* 示意内部：卡片流型（供需） */
.mini-flow{ display:grid; gap:8px; }
.mini-card{ border:1px solid var(--color-border); border-radius:8px; padding:9px 11px; background:var(--color-card); }
.mini-card b{ display:block; font-size:12.5px; color:var(--color-foreground); font-weight:600; }
.mini-card em{ display:block; font-style:normal; font-size:11.5px; color:var(--color-muted-foreground); margin-top:2px; }
.mini-kind{ display:inline-block; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:4px; margin-bottom:4px; }
.kind-need{ background:#E0F2FE; color:#0369A1; }
.kind-offer{ background:#DCFCE7; color:#15803D; }

/* 示意内部：匹配型（分数 + 理由） */
.mini-match{ border:1px solid var(--color-border); border-radius:8px; padding:11px; background:var(--color-card); }
.mini-match-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mini-match-top b{ font-size:12.5px; color:var(--color-foreground); }
.mini-score{ font-size:12px; font-weight:800; color:var(--color-accent); background:#EBF4FB; border-radius:999px; padding:2px 9px; }
.mini-bar{ height:6px; border-radius:999px; background:var(--color-muted); overflow:hidden; margin:6px 0 8px; }
.mini-bar i{ display:block; height:100%; background:var(--color-accent); border-radius:999px; }
.mini-reason{ font-size:11.5px; color:var(--color-muted-foreground); }

/* 示意内部：图表型（数据看板） */
.mini-chart{ display:flex; align-items:flex-end; gap:8px; height:104px; padding:0 2px; }
.mini-chart i{ flex:1; background:linear-gradient(180deg,#7dd3fc,#0369A1); border-radius:5px 5px 0 0; display:block; }
.mini-axis{ display:flex; gap:8px; margin-top:6px; font-size:10.5px; color:var(--color-muted-foreground); }
.mini-axis span{ flex:1; text-align:center; }

/* 示意内部：表单型（站点与表单） */
.mini-form{ display:grid; gap:9px; }
.mini-field{ border:1px solid var(--color-border); border-radius:7px; padding:8px 10px; font-size:11.5px; color:var(--color-muted-foreground); background:var(--color-card); }
.mini-field.is-fill{ color:var(--color-foreground); }
.mini-submit{ background:var(--color-primary); color:#fff; border-radius:7px; padding:9px; text-align:center; font-size:12px; font-weight:600; }

/* ===== 为什么选择商慧云（.why-*）===== */
.why{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.why-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
.why-item{ background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--s5); }
.why-item i{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius); background:var(--color-primary); color:#fff; margin-bottom:var(--s4); }
.why-item h3{ font-size:16.5px; margin-bottom:var(--s2); }
.why-item p{ font-size:14.5px; color:var(--color-muted-foreground); }

/* ===== 不同角色怎么用（.role-*）===== */
/* @WHY #roles 用白底：它与下方的「服务对象」形成深浅交替（分区底色序列见 about.css 顶部注释） */
#roles{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.role-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
.role-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); }
.role-eyebrow{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--color-accent); margin-bottom:var(--s2); }
.role-card h3{ font-size:18px; margin-bottom:var(--s3); }
.role-card > p{ font-size:14.5px; color:var(--color-muted-foreground); }
.role-points{ list-style:none; margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--color-border); }
.role-points li{ position:relative; padding-left:22px; margin:var(--s2) 0; font-size:14px; color:var(--color-secondary); }
.role-points li::before{ content:""; position:absolute; left:2px; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--color-accent); }

@media (min-width:768px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .role-grid{ grid-template-columns:repeat(3,1fr); gap:var(--s4); }
}
@media (min-width:1024px){
  .why-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ===== 实施与交付流程（.step-*）+ 安全与数据说明（.sec-*）===== */
.process{ background:var(--color-background); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.step-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; list-style:none; }
.step-item{ position:relative; background:var(--color-card); border:1px solid var(--color-border);
            border-radius:var(--radius-lg); padding:var(--s5); box-shadow:var(--shadow-card); }
.step-no{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.06em;
           color:var(--color-accent); background:#EBF4FB; border-radius:999px; padding:3px 10px; margin-bottom:var(--s3); }
.step-item h3{ font-size:16.5px; margin-bottom:var(--s2); }
.step-item p{ font-size:14.5px; color:var(--color-muted-foreground); }
.sec-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s7); }
.sec-block{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--s6) var(--s5); }
.sec-block h3{ font-size:17px; margin-bottom:var(--s3); }
.sec-points{ list-style:none; }
.sec-points li{ position:relative; padding-left:22px; margin:var(--s2) 0; font-size:14.5px; color:var(--color-secondary); }
.sec-points li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--color-accent); }

@media (min-width:768px){
  .step-grid{ grid-template-columns:repeat(2,1fr); }
  .sec-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .step-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ===== 常见问题（.faq-*）=====
   @WHY 用原生 <details>/<summary>：零 JS、键盘可达、可被浏览器页内查找命中。 */
.faq{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.faq-list{ display:grid; gap:var(--s3); max-width:860px; }
.faq-item{ background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius);
           padding:0 var(--s5); transition:border-color .2s ease,box-shadow .2s ease; }
.faq-item[open]{ box-shadow:var(--shadow-card); }
.faq-item summary{ list-style:none; cursor:pointer; padding:var(--s4) 0; padding-right:var(--s6);
                   font-size:15.5px; font-weight:600; color:var(--color-foreground); position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
                          font-size:20px; font-weight:400; color:var(--color-muted-foreground); transition:transform .2s ease; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item summary:hover{ color:var(--color-accent); }
.faq-item p{ font-size:14.5px; color:var(--color-muted-foreground); padding-bottom:var(--s4); margin:0; }

/* 示意内部：统计卡与图注（数据看板面板） */
.mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.mini-stats > div{ border:1px solid var(--color-border); border-radius:8px; padding:8px 10px; background:var(--color-card); }
.mini-stats b{ display:block; font-size:16px; font-weight:800; color:var(--color-foreground); letter-spacing:-.02em; }
.mini-stats em{ font-style:normal; font-size:11px; color:var(--color-muted-foreground); }
.mini-note{ margin-top:10px; font-size:11px; color:var(--color-muted-foreground); text-align:center; }

@media (min-width:1024px){
  .cap-grid{ grid-template-columns:1fr 1fr; gap:var(--s7); }
}
@media (max-width:560px){
  .cap-tablist button{ font-size:14px; padding:9px 14px; }
  .mini-4{ grid-template-columns:1.5fr .9fr; }
  .mini-4 span:nth-child(3){ display:none; }
}