/* =========================================================================
   SLai · Enterprise UI Layer v3
   -------------------------------------------------------------------------
   这一层只做"加法"，不覆盖 v2 的结构：
     · 更强的层次（hero 三段式 / 数据条 / 信任区）
     · 企业级细节（细分割线、数字对齐、悬停层次、焦点态）
     · 客服入口做成常驻而不是埋在页脚
     · 移动端与 4K 都保证留白节奏
   ========================================================================= */

/* ---------- 0. 令牌补充 ---------- */
:root{
  --ink-3:#0C0718;
  --panel-3:#1B1530;
  --line-hi:#5C4280;
  --violet-soft:rgba(168,85,247,.10);
  --violet-line:rgba(168,85,247,.26);
  --shadow-lift:0 18px 48px -22px rgba(0,0,0,.78);
  --shadow-glow:0 0 0 1px var(--violet-line), 0 24px 64px -32px rgba(168,85,247,.42);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
}

/* ---------- 1. 排版精修 ---------- */
body{font-size:15.5px;line-height:1.78}
h1,h2,h3{text-wrap:balance;letter-spacing:-.018em}
.sec-title{letter-spacing:-.02em}

/* 数字/版本/哈希统一等宽，避免抖动 */
.dl-hash,.stat b,.kpi b,.spec dd small,.metric b{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* ---------- 2. 导航：滚动后收窄 + 模糊背景 ---------- */
.nav{
  transition:background .28s ease, border-color .28s ease, padding .28s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,4,14,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
  padding-top:10px; padding-bottom:10px;
}
.brand-text em{font-style:normal;opacity:.5;letter-spacing:.2em;font-size:9.5px}
.brand-mark{
  box-shadow:0 0 0 1px var(--violet-line) inset, 0 6px 18px -8px rgba(168,85,247,.7);
}

/* ---------- 3. Hero：三段式 + 右侧仪表 ---------- */
.hero{
  padding-top:clamp(56px,8vw,104px);
  padding-bottom:clamp(56px,7vw,88px);
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:40px}
}

h1 .h-sub{
  display:block;
  margin-top:14px;
  font-size:clamp(14px,1.4vw,17px);
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted);
}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:26px;
  font-size:12.5px;
  color:var(--muted);
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta i{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(61,214,140,.14);
}

/* 信任徽标行（企业页常见：一眼看到资质/承诺） */
.trust-row{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:22px;
}
.trust-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(168,85,247,.07),rgba(168,85,247,.02));
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.trust-chip b{color:var(--paper);font-weight:600}
.trust-chip svg{width:13px;height:13px;opacity:.85}

/* ---------- 4. 数据条（KPI）---------- */
.kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 0 clamp(48px,6vw,80px);
}
@media(max-width:820px){.kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{
  padding:26px clamp(16px,2.2vw,30px);
  border-right:1px solid var(--line);
}
.kpi:last-child{border-right:0}
@media(max-width:820px){
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.kpi b{
  display:block;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:600;
  line-height:1.15;
  color:var(--paper);
}
.kpi b em{font-style:normal;font-size:.52em;color:var(--dim);margin-left:6px;letter-spacing:.08em}
.kpi span{
  display:block;margin-top:7px;
  font-size:12px;color:var(--dim);
  letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- 5. 卡片：企业级细边框 + 悬停抬升 ---------- */
.mrow,.doc,.dl-card,.prow{
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.mrow:hover{
  border-color:var(--violet-line);
  background:linear-gradient(180deg,var(--violet-soft),transparent 90%);
}
.doc:hover,.prow:hover{
  border-color:var(--violet-line);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
}
.dl-card{
  border-color:var(--line-2);
  box-shadow:var(--shadow-glow);
}

/* 卡片顶部 1px 高光：让深色面板有"切面感" */
.mrow{position:relative;overflow:hidden}
.mrow::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet-line),transparent);
  opacity:0;transition:opacity .22s ease;
}
.mrow:hover::before{opacity:1}

/* ---------- 6. 按钮：主按钮带光晕，次按钮描边更清晰 ---------- */
.btn-primary{
  position:relative;
  box-shadow:0 10px 30px -14px rgba(168,85,247,.85), 0 0 0 1px rgba(216,180,254,.22) inset;
  transition:transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.07);
  box-shadow:0 16px 40px -16px rgba(168,85,247,.95), 0 0 0 1px rgba(216,180,254,.34) inset;
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  border-color:var(--line-2);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover{
  border-color:var(--violet-line);
  background:var(--violet-soft);
  color:var(--paper);
}

/* ---------- 7. 章节标题：编号 + 细线 ---------- */
.sec-head{
  padding-top:clamp(8px,1vw,14px);
  border-top:1px solid var(--line);
  margin-bottom:clamp(28px,3.4vw,44px);
}
.sec-no{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--violet);
  opacity:.9;
}

/* ---------- 8. 常驻客服条（右下）---------- */
.support-dock{
  position:fixed;
  right:18px;bottom:18px;
  z-index:60;
  display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;
  font-size:13px;
}
.support-dock .dock-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid var(--violet-line);
  background:rgba(27,21,48,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--paper);
  cursor:pointer;
  box-shadow:0 14px 36px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(216,180,254,.12) inset;
  transition:transform .18s ease, border-color .2s ease, background .2s ease;
  font:inherit;
}
.support-dock .dock-toggle:hover{
  transform:translateY(-1px);
  border-color:var(--violet-hi);
  background:rgba(38,28,66,.96);
}
.support-dock .dock-toggle i{
  width:7px;height:7px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(61,214,140,.16);
}
.support-dock .dock-panel{
  width:min(300px,calc(100vw - 40px));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:rgba(14,9,25,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-lift);
  padding:16px;
  display:none;
}
.support-dock.open .dock-panel{display:block}
.support-dock .dock-panel h4{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:12px;
}
.support-dock .dock-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.support-dock .dock-row:last-of-type{border-bottom:0}
.support-dock .dock-row span{color:var(--muted);font-size:12.5px}
.support-dock .dock-row a,.support-dock .dock-row b{
  font-family:var(--mono);font-size:12.5px;color:var(--paper);
}
.support-dock .dock-row a:hover{color:var(--violet-hi)}
.support-dock .dock-note{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11.5px;color:var(--dim);line-height:1.7;
}
@media(max-width:640px){
  .support-dock{right:12px;bottom:12px}
  .support-dock .dock-toggle{padding:10px 14px;font-size:12px}
}

/* ---------- 9. 页脚：补法务与状态 ---------- */
.foot-support{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.foot-status{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding:16px 0;
  font-size:12px;color:var(--dim);
}
.foot-status span{display:inline-flex;align-items:center;gap:7px}
.foot-status i{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(61,214,140,.12);
}

/* ---------- 10. 可访问性 & 打印 ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .bg-glow,.bg-grid,.support-dock,.nav{display:none !important}
  body{background:#fff;color:#111}
}