/* ============================================================
   明亮商务主题（覆盖层）
   配色取自 SWTC 商标：深海军蓝 + 橙色点缀 + 大面积留白
   纹理：去掉深色渐变与光斑，改为极淡的制图网格与细分隔线
   ============================================================ */
:root{
  --ink:#132a45;
  --ink-2:#2c4058;
  --muted:#5f7189;
  --muted-2:#8c9aad;
  --brand:#1b4a86;
  --brand-d:#123562;
  --brand-l:#eef4fc;
  --accent:#df7a2a;
  --accent-l:#fdf3e9;
  --line:#e3eaf4;
  --soft:#f7fafd;
  --soft-2:#eef3fa;
  --ok:#0e7c6b;
  --ok-l:#e8f7f3;
  --warn:#a8620c;
  --warn-l:#fdf4e8;
  --bad:#b3261e;
  --bad-l:#fdeceb;
  --radius:10px;
  --radius-s:7px;
  --shadow:0 1px 2px rgba(19,42,69,.05),0 8px 20px -14px rgba(19,42,69,.18);
  --shadow-l:0 2px 6px rgba(19,42,69,.06),0 24px 48px -28px rgba(19,42,69,.24);
}

body{background:#fff;color:var(--ink)}

/* ---------- 头部 ---------- */
.site-head{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:none}
.brand{gap:12px}
.brand-logo{display:block;height:40px;width:auto;border-radius:6px}
.brand-text strong{font-size:15.5px;color:var(--ink)}
.brand-text em{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.nav a{color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--brand)}

/* ---------- 按钮 ---------- */
.btn{background:var(--brand);box-shadow:none;border-radius:8px;font-weight:600}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--brand);border-color:#c9d9ef}
.btn.ghost:hover{background:var(--brand-l);border-color:#b3c9e6}

/* ---------- 首屏：亮色 ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 0% 0%, #fff6e8 0%, rgba(255,246,232,0) 46%),
    linear-gradient(112deg,#fdfaf4 0%,#f8fbfe 52%,#eef5fd 100%);
  color:var(--ink);
  padding:64px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero:before{
  background-image:
    linear-gradient(rgba(27,74,134,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,74,134,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0));
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0));
}
.hero:after{background-image:none}
.hero h1{color:var(--ink)}
.hero h1 .hl{
  background:none;color:var(--brand);
  border-bottom:3px solid var(--accent);padding-bottom:2px;
}
.hero-sub{color:var(--ink-2)}
.hero-sub strong{color:var(--ink)}
.hero-tag{
  color:var(--brand);border:1px solid #cfe0f5;background:#eef5fe;
  letter-spacing:.03em;
}
.hero-cta .btn.ghost{background:#fff;color:var(--brand);border-color:#c9d9ef}
.hero-cta .btn.ghost:hover{background:var(--brand-l)}
.hero-stats b{color:var(--brand)}
.hero-stats span{color:var(--muted)}
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);backdrop-filter:none;
}
.hc-head{color:var(--muted)}
.hc-item{border-top:1px solid var(--line);color:var(--ink-2)}
.hc-item b{color:var(--ink)}
.hc-item span{color:var(--muted)}
.hc-item:hover{background:var(--soft);border-radius:8px}
.hc-foot{color:var(--brand)}

/* ---------- 区块与卡片 ---------- */
.sec.alt{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.panel{background:#fff;border:1px solid var(--line);box-shadow:none}
.panel.good{background:var(--ok-l);border-color:#cfe9e2}
.panel.info{background:var(--brand-l);border-color:#d5e3f5}
.panel.warn{background:var(--warn-l);border-color:#f2ddbe}
.panel.bad{background:var(--bad-l);border-color:#f7d5d2}
.rel-item{border:1px solid var(--line);background:#fff}
.rel-item:hover{border-color:#c3d6ee;background:var(--soft)}

/* ---------- 表格 ---------- */
table th{background:var(--soft-2);color:var(--ink)}
table td,table th{border-color:var(--line)}

/* ---------- 页脚：由深色改为亮色商务 ---------- */
.site-foot{
  background:#f6f9fd;color:var(--ink-2);
  border-top:1px solid var(--line);
  padding:48px 0 24px;
}
.site-foot h4{color:var(--ink)}
.site-foot a{color:var(--ink-2)}
.site-foot a:hover{color:var(--brand)}
.fbottom{border-top:1px solid var(--line);color:var(--muted)}
.fbottom strong{color:var(--ink-2)}
.fbottom a{color:var(--muted)}
.fbottom .muted{color:var(--muted-2)}
.boundary{background:var(--soft);border-top:1px solid var(--line)}
.boundary h2{color:var(--ink)}

/* ---------- 强调元素用橙色点缀 ---------- */
.badge{background:var(--brand-l);color:var(--brand);border:1px solid #d5e3f5}
.tag-hot,.hl-accent{color:var(--accent)}
.cta-band{background:linear-gradient(180deg,#f3f8ff,#ffffff);border:1px solid #dbe8f8;border-radius:14px}

/* ---------- 给左侧常驻二维码让位（1200–1610px 区间） ---------- */
@media (min-width:1200px) and (max-width:1610px){
  main#main{padding-left:244px}
}
/* ============================================================
   首屏图形：发光证件卡片 + 暖光（纯 CSS，无图片）
   参考：暖白背景 + 半透明文档卡片漂浮 + 柔和光晕
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:2}
.hero-art{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 100%);
}
/* 左上暖光 */
.ha-glow{
  position:absolute;left:-6%;top:-32%;width:64%;height:150%;
  background:radial-gradient(closest-side,rgba(255,238,214,.95),rgba(255,244,229,.55) 45%,rgba(255,255,255,0) 78%);
  filter:blur(2px);
}
/* 文档卡片 */
.ha-doc{
  position:absolute;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:20px 18px;border-radius:16px;
  background:linear-gradient(158deg,rgba(255,255,255,.95),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    0 28px 60px -26px rgba(27,74,134,.42),
    0 0 0 1px rgba(210,226,245,.55),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(7px) saturate(120%);
  animation:haFloat 11s ease-in-out infinite alternate;
}
.ha-doc i{
  display:block;height:8px;border-radius:5px;
  background:linear-gradient(90deg,rgba(150,180,215,.55),rgba(200,218,238,.30));
}
.ha-doc i:nth-child(2){width:82%}
.ha-doc i:nth-child(3){width:64%}
.ha-doc i:nth-child(4){width:48%}
.ha-doc-1{right:7%;top:7%;width:238px;height:266px;animation-delay:-1s}
.ha-doc-2{right:30%;top:2%;width:162px;height:186px;opacity:.82;animation-delay:-4s}
.ha-doc-3{right:0;top:36%;width:128px;height:150px;opacity:.5;animation-delay:-7s}
/* 印章/认证标记 */
.ha-seal{
  position:absolute;right:24%;top:10%;width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(223,122,42,.42);
  box-shadow:0 0 0 6px rgba(223,122,42,.07),0 10px 26px -12px rgba(223,122,42,.4);
  opacity:.75;animation:haFloat 9s ease-in-out infinite alternate-reverse;
}
.ha-seal:after{
  content:"";position:absolute;left:12px;top:11px;width:14px;height:8px;
  border-left:2.5px solid rgba(223,122,42,.6);border-bottom:2.5px solid rgba(223,122,42,.6);
  transform:rotate(-45deg);border-radius:1px;
}
@keyframes haFloat{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-14px,0)}
}
@media (prefers-reduced-motion:reduce){ .ha-doc,.ha-seal{animation:none} }
@media (max-width:900px){
  .hero-art{display:none}
}
/* ============================================================
   平台概览区块：文字 + 商务顾问形象（SVG 绘制）
   ============================================================ */
.ov-grid{display:grid;grid-template-columns:1fr 236px;gap:36px;align-items:center}
.ov-text{min-width:0}
.hero-mascot{
  position:relative;width:200px;margin:0 auto;cursor:pointer;
  filter:drop-shadow(0 18px 34px rgba(19,42,69,.16));
  transition:transform .25s ease;
}
.hero-mascot:hover{transform:translateY(-4px)}
.hero-mascot:focus-visible{outline:3px solid rgba(27,74,134,.35);outline-offset:6px;border-radius:50%}
.hm-svg{display:block;width:200px;height:230px}
/* 眼睛：每 5.2 秒眨一次 */
.hm-eyes{transform-origin:100px 101px;animation:hmBlink 5.2s infinite}
@keyframes hmBlink{
  0%,92%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.12)}
}
/* 轻微呼吸 */
.hero-mascot{animation:hmBreath 6s ease-in-out infinite}
@keyframes hmBreath{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.hero-mascot:hover{animation-play-state:paused}

/* 说话气泡：三条文案轮播（位于头像上方） */
.hm-bubble{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);
  width:236px;min-height:62px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;box-shadow:0 14px 34px -16px rgba(19,42,69,.3);
  font-size:13px;line-height:1.6;color:var(--ink-2);
}
.hm-bubble:after{
  content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;width:12px;height:12px;
  background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.hm-bubble span{
  position:absolute;inset:11px 14px;opacity:0;
  animation:hmSay 15s infinite;
}
.hm-bubble span:nth-child(1){animation-delay:0s}
.hm-bubble span:nth-child(2){animation-delay:5s}
.hm-bubble span:nth-child(3){animation-delay:10s}
@keyframes hmSay{
  0%{opacity:0;transform:translateY(4px)}
  4%,28%{opacity:1;transform:translateY(0)}
  33%,100%{opacity:0;transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .hero-mascot,.hm-eyes,.hm-bubble span{animation:none}
  .hm-bubble span:nth-child(1){opacity:1}
}
@media (max-width:1180px){ .ov-grid{grid-template-columns:1fr 200px;gap:24px} .hm-bubble{left:-198px;width:190px;font-size:12px} }
@media (max-width:980px){ .ov-grid{grid-template-columns:1fr} .hero-mascot{display:none} }
/* ============================================================
   悬浮数字人（抠像视频，WebM+Alpha）
   ============================================================ */
.dh{
  position:fixed;right:-64px;bottom:0;width:340px;z-index:58;
  cursor:pointer;pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(19,42,69,.18));
}
.dh-video{
  display:block;width:100%;height:auto;pointer-events:auto;
  transition:transform .25s ease;
}
.dh:hover .dh-video{transform:translateY(-4px)}
.dh:focus-visible{outline:3px solid rgba(27,74,134,.35);outline-offset:-6px;border-radius:18px}
/* 客服按钮挪到她侧前方，避免挡住人物 */
.dh ~ .chat-launcher{right:22px;bottom:14px;z-index:60}
/* 所有气泡统一从她头顶冒出 */
.dh ~ .chat-bubble{right:26px;bottom:236px;z-index:60}
/* 聊天面板打开时收起人物，避免遮挡 */
body.chat-open .dh{opacity:0;visibility:hidden;transform:translateY(12px);transition:.2s}
/* 客服窗头像 */
.chat-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(27,74,134,.15);background:#eef4fc}

@media (max-width:1180px){
  .dh{width:300px;right:-24px}
  .dh ~ .chat-bubble{bottom:212px}
}
@media (max-width:900px){
  .dh{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dh-video{display:none}
  .dh{width:200px;height:200px;background:url('/assets/dh-poster.png') center bottom/contain no-repeat}
}