/* ============================================================
   merge.css —— 小程序功能合并到网站：新增组件样式
   复用 style.css 的设计令牌（--bg/--panel/--line/--muted/--blue）
   纯展示，无表单、无数据收集
   ============================================================ */

/* ---------- 业务矩阵（8 条业务线） ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc { display: flex; flex-direction: column; padding: 24px; background: #22394d; border: 1px solid var(--line); border-radius: 9px; transition: .25s; }
.svc:hover { transform: translateY(-4px); border-color: #6e9bd2; box-shadow: 0 18px 35px #0002; }
.svc .gl { font-size: 19px; color: #75aaf0; line-height: 1; }
.svc h3 { font-size: 17px; margin: 14px 0 3px; }
.svc .en { display: block; font: 9px monospace; color: #6d87a3; letter-spacing: 1px; margin-bottom: 10px; }
.svc p { font-size: 12px; color: var(--muted); margin: 0 0 16px; flex: 1; }
.svc .svc-link { color: #91bfff; font-size: 12px; }
.svc.now { border-color: #4a78ad; background: linear-gradient(140deg, #294966, #203c55); }

/* ---------- 服务详情页（services.html） ---------- */
.svc-block { padding: 40px 0; border-top: 1px solid #ffffff0f; }
.svc-block:first-of-type { border-top: 0; }
.svc-block .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.svc-block .head .gl { font-size: 22px; color: #75aaf0; }
.svc-block h2 { font-size: 26px; margin: 0; }
.svc-block .en { font: 10px monospace; color: #6d87a3; letter-spacing: 1px; }
.svc-block .intro { color: var(--muted); font-size: 14px; max-width: 780px; }
.svc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.svc-cols > div { padding: 20px; background: #22394d; border: 1px solid var(--line); border-radius: 8px; }
.svc-cols h4 { margin: 0 0 10px; font-size: 14px; color: #cfe0f2; }
.svc-cols ul { padding-left: 17px; margin: 0; }
.svc-cols li { font-size: 12px; color: var(--muted); margin: 7px 0; }
.svc-note { margin-top: 18px; padding: 15px 18px; border: 1px solid #4a6786; border-left: 3px solid #d8a657; border-radius: 6px; background: #22394d; font-size: 12px; color: #bccfdf; }

/* ---------- 案例库 ---------- */
.case-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.case-filter button { border: 1px solid var(--line); background: #1d3042; color: #9bb0c6; padding: 7px 15px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: .2s; }
.case-filter button:hover { color: #fff; border-color: #6e9bd2; }
.case-filter button.active { background: #3c79d3; border-color: #84baff; color: #fff; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.case { border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(140deg, #243c51, #1d3042); transition: .25s; overflow: hidden; }
.case:hover { border-color: #6e9bd2; box-shadow: 0 18px 35px #0002; }
.case-h { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 22px; cursor: pointer; font: inherit; }
.case-cat { display: inline-block; padding: 3px 9px; background: #2a465e; border: 1px solid #4c6882; border-radius: 4px; color: #b6d2f2; font: 10px monospace; }
.case-h h3 { font-size: 16px; margin: 13px 0 8px; line-height: 1.5; }
.case-meta { font-size: 11px; color: #8da8c2; margin: 0; }
.case-more { display: inline-block; margin-top: 12px; color: #91bfff; font-size: 12px; }
.case-more i { font-style: normal; display: inline-block; transition: .25s; }
.case.open .case-more i { transform: rotate(45deg); }
.case-b { display: none; padding: 0 22px 22px; }
.case.open .case-b { display: block; }
.case-b dl { margin: 0; border-top: 1px solid #ffffff12; padding-top: 16px; }
.case-b dt { font-size: 11px; color: #7fa0c0; letter-spacing: 1px; margin: 12px 0 4px; }
.case-b dd { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.8; }
.case-tags { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.case-tags span { padding: 3px 9px; border: 1px solid #3b566f; border-radius: 3px; font-size: 10px; color: #9fbcd8; background: #1d3042; }
.case-empty { grid-column: 1 / -1; text-align: center; color: #8097af; font-size: 12px; padding: 30px 0; }

/* ---------- 小程序导流 ---------- */
.mp { max-width: 900px; margin: auto; padding: 38px 34px; background: linear-gradient(110deg, #294765, #233b52); border: 1px solid #5b7ea2; border-radius: 10px; text-align: center; }
.mp h2 { margin: 8px 0 10px; font-size: 26px; }
.mp > p { color: #b7c7d6; font-size: 13px; max-width: 620px; margin: 0 auto 24px; }
.mp-cta { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mp-qr { width: 132px; height: 132px; border-radius: 8px; background: #1b2c3d; border: 1px dashed #5b7ea2; display: grid; place-items: center; color: #8ba4bd; font-size: 11px; line-height: 1.7; text-align: center; }
.mp-qr img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.mp-list { text-align: left; font-size: 13px; color: #c3d3e2; }
.mp-list b { display: block; margin-bottom: 8px; color: #eaf3ff; font-size: 13px; }
.mp-list ul { padding-left: 17px; margin: 0; }
.mp-list li { margin: 5px 0; }

/* ---------- 内页通用容器（服务详情页） ---------- */
.page { max-width: 900px; margin: auto; padding: 44px 0 76px; }
.page > h1 { font-size: 32px; margin: 8px 0 8px; }
.page > .sub { color: #8ba4bd; font-size: 12px; margin: 0 0 32px; }

/* ---------- 隐私页 / 服务详情页 通用排版 ---------- */
.legal { max-width: 860px; margin: auto; padding: 54px 0 74px; }
.legal h1 { font-size: 30px; margin: 6px 0 6px; }
.legal .eff { color: #8ba4bd; font-size: 12px; margin-bottom: 32px; }
.legal h2 { font-size: 17px; margin: 30px 0 10px; color: #cfe0f2; }
.legal p, .legal li { font-size: 13px; color: var(--muted); line-height: 1.9; }
.legal ul { padding-left: 19px; }
.legal .disc { margin-top: 34px; padding: 18px 20px; border: 1px solid #4a6786; border-radius: 8px; background: #22394d; font-size: 12px; color: #b7c7d6; }
.crumb { padding-top: 26px; font-size: 12px; color: #8ba4bd; }
.crumb a { color: #91bfff; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .svc-grid, .case-grid { grid-template-columns: 1fr; }
  .mp { padding: 28px 20px; }
  .mp-cta { gap: 18px; }
  .legal { padding: 40px 0 60px; }
  .legal h1 { font-size: 25px; }
}