/* ============================================================
   元健康悦 · 企微蓝主题（body.wecom 作用域，仅 wecom.html 引用）
   色板取自企业微信图标：
   主蓝 #0084FF · 亮蓝 #4EA9FF · 深海军 #0A1B2E
   绿 #07C160 · 黄 #FFC300 · 橙 #FF7A00 · 白
   引入顺序：site.css 之后加载，覆盖赤金墨默认值
   ============================================================ */

/* ---- 横幅：企微蓝旗面 ---- */
.wecom .band .flag-base {
  background:
    radial-gradient(92% 72% at 16% 6%, rgba(150,205,255,.30) 0%, rgba(150,205,255,0) 58%),
    linear-gradient(180deg, #2E93FF 0%, #0084FF 44%, #0061C2 100%);
}
.wecom .band .flag-cloth {
  background: linear-gradient(103deg,
    #4EA9FF 0%, #0084FF 9%, #0459A8 16%, #3D9BFF 24%, #0084FF 33%, #064A8C 42%,
    #4EA9FF 52%, #0084FF 62%, #05539C 71%, #3D9BFF 80%, #0084FF 89%, #054787 100%);
}
.wecom .band .flag-cloth.b {
  background: linear-gradient(64deg,
    #0653A0 0%, #3D9BFF 22%, #0561B4 45%, #3D9BFF 68%, #05509A 88%, #0084FF 100%);
}
.wecom .band .shade {
  background:
    radial-gradient(52% 96% at 4% 54%, rgba(3,32,66,.46) 0%, rgba(3,32,66,0) 70%),
    linear-gradient(180deg, rgba(3,32,66,.30) 0%, rgba(3,32,66,0) 132px);
}
.wecom .band .fade-ink { background: linear-gradient(to bottom, rgba(10,27,46,0) 0%, #0A1B2E 100%); }
.wecom .band .crumb { color: rgba(214,236,255,.85); }
.wecom .band .band-facts i { background: #FFC300; }
.wecom .band .star.glow { filter: drop-shadow(0 0 14px rgba(255,195,0,.5)); }

/* ---- 导航与 Logo（蓝盘白星白字） ---- */
.wecom .logo { background: rgba(4,20,38,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.wecom .logo .wm {
  background: linear-gradient(168deg, #FFFFFF 0%, #EAF4FF 40%, #BBD9F7 68%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,20,45,.5)) drop-shadow(0 0 12px rgba(255,255,255,.18));
}
.wecom .logo .wm::after {
  background: linear-gradient(108deg,
    rgba(255,255,255,0) 34%, rgba(150,208,255,.72) 47%, rgba(255,255,255,.10) 56%, rgba(255,255,255,0) 68%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wecom .logo .wm-sub { color: rgba(255,255,255,.65); }
.wecom .nav .links a { color: rgba(255,255,255,.82); }
.wecom .nav .links a:hover { color: #FFC300; transform: translateY(-1.5px); }
.wecom .nav .links a.on { color: #FFFFFF; }
.wecom .nav .links a::after {
  background: linear-gradient(90deg, #FFE28A, #FFC300);
  box-shadow: 0 0 10px rgba(255,195,0,.55);
}
.wecom .nav .links a::before {
  background: linear-gradient(90deg, rgba(255,226,138,0), #FFC300 32%, #FFE28A 58%, rgba(255,226,138,0));
  box-shadow: 0 0 12px rgba(255,195,0,.7);
}
.wecom .nav-fixed {
  background: rgba(6,24,44,.9);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.18), 0 12px 32px rgba(0,0,0,.35);
}

/* ---- 深海军板块（原「墨」） ---- */
.wecom .s-ink { background: #0A1B2E; }
.wecom .s-ink .head h3 { color: #F2F8FF; }
.wecom .s-ink .head p { color: #8FA9C2; }
.wecom .s-ink .sub-h h4 { color: #FFC300; }
.wecom .s-ink .sub-h p { color: #8FA9C2; }
.wecom .feat { background: #132C47; }
.wecom .feat h5 { color: #FFC300; }
.wecom .feat h5 svg { stroke: #FFC300; }
.wecom .feat p { color: #B9CDE2; }
.wecom .stat { background: #132C47; }
.wecom .stat b { color: #FFC300; }
.wecom .stat span { color: #8FA9C2; }
.wecom .tbl { background: #132C47; }
.wecom .tbl th { background: rgba(255,255,255,.10); color: #FFD75E; }
.wecom .tbl td { color: #B9CDE2; border-top-color: rgba(255,255,255,.10); }
.wecom .tbl td:first-child { color: #F2F8FF; }
.wecom .tags span { color: #FFD75E; border-color: rgba(255,195,0,.45); background: rgba(255,195,0,.08); }
.wecom .wecom-strip { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.wecom .wecom-brand b { color: #F2F8FF; }
.wecom .wecom-strip > span { color: #FFC300; }
.wecom .wecom-strip p { color: rgba(255,255,255,.78); }
.wecom .wecom-strip p i { background: #FFC300; }

/* ---- 企微蓝板块（原「红」） ---- */
.wecom .s-red { background: #0084FF; }
.wecom .s-red::before {
  background:
    radial-gradient(92% 58% at 50% -4%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(130% 88% at 50% 116%, rgba(3,40,84,.5) 0%, rgba(3,40,84,0) 60%);
}
.wecom .s-red .head h3 { color: #FFFFFF; }
.wecom .s-red .head p { color: rgba(255,255,255,.85); }
.wecom .s-red .feat { background: rgba(3,30,62,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }
.wecom .s-red .feat h5 { color: #FFFFFF; }
.wecom .s-red .feat h5 svg { stroke: #FFC300; }
.wecom .s-red .feat p { color: rgba(255,255,255,.85); }
.wecom .s-red .stat { background: rgba(3,30,62,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20); }
.wecom .s-red .stat b { color: #FFC300; }
.wecom .s-red .stat span { color: rgba(255,255,255,.78); }
.wecom .s-red .stat .src { color: rgba(255,255,255,.5); }

/* ---- 页脚 ---- */
.wecom .foot { background: #081526; }
.wecom .foot .desc { color: rgba(255,255,255,.6); }
.wecom .foot-legal { border-top-color: rgba(255,255,255,.14); }
.wecom .foot-legal .copy a { color: #FFC300; }
.wecom .foot-legal .copy a:hover { color: #FFE28A; }
.wecom .foot-qr .qr-box { color: #0A3E77; }

/* ============================================================
   场景叙事版新增组件（仅 wecom.html 使用）
   ============================================================ */

/* ---- 横幅标签行（蓝底白纱变体） ---- */
.wecom .band .band-badges span {
  color: #FFF3C4; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45);
}

/* ---- 小标 / 卡片 / 引用条（深海军板块的黄 accents） ---- */
.wecom .kicker { color: #FFC300; }
.wecom .kicker::before { background: linear-gradient(90deg, rgba(255,195,0,.2), #FFC300); }
.wecom .s-red .kicker { color: #FFE28A; }
.wecom .card { background: #132C47; }
.wecom .card h4 { color: #FFC300; }
.wecom .card p { color: #B9CDE2; }
.wecom .pull { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,195,0,.26); border-left-color: #FFC300; }
.wecom .pull p { color: #F2F8FF; }
.wecom .pull p em { color: #FFC300; }

/* ---- 改变清单（gains） ---- */
.wecom .g-ico { background: rgba(255,195,0,.12); }
.wecom .g-ico svg { stroke: #FFC300; }
.wecom .g-tx h4 { color: #F2F8FF; }
.wecom .g-tx h4 em { color: #FFC300; }
.wecom .g-tx p { color: #B9CDE2; }
.wecom .gain + .gain { border-top-color: rgba(255,255,255,.12); }

/* ---- 场景行（图 + 文，交替方向） ---- */
.scene { display: grid; grid-template-columns: 480px 1fr; gap: 52px; align-items: center; margin-top: 64px; }
.scene-list .scene:first-child { margin-top: 56px; }
.scene.rev { grid-template-columns: 1fr 480px; }
.scene.rev .fig { order: 2; }
.fig { margin: 0; background: #FFFFFF; border-radius: 18px; padding: 12px;
  box-shadow: 0 24px 56px rgba(2,36,76,.4); }
.fig img { display: block; width: 100%; height: auto; border-radius: 10px; }
.scene .no { display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .28em; color: #FFE28A; }
.scene .no::after { content: ""; width: 36px; height: 1px; background: rgba(255,255,255,.45); }
.scene h4 { margin-top: 12px; font-size: 27px; font-weight: 600; color: #FFFFFF; line-height: 1.4; }
.scene p { margin-top: 14px; font-size: 16.5px; line-height: 1.9; color: rgba(255,255,255,.92); }
.scene p b { color: #FFF3C4; font-weight: 600; }
.scene .tags { margin-top: 20px; }
/* 蓝底上的标签：白纱描边（黄字对比度不足） */
.wecom .s-red .tags span { color: #FFF9F2; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }

/* ---- 六类角色：名字放大 + 逐个点亮轮转（9s 一轮，每 1.5s 换一个） ---- */
.wecom .roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.wecom .role {
  position: relative; border-radius: 16px; padding: 30px 28px 26px;
  background: rgba(3,30,62,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
  animation: roleGlow 9s cubic-bezier(.32,.72,0,1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes roleGlow {
  0%   { background: rgba(255,255,255,.15); transform: translateY(-7px) scale(1.025);
         box-shadow: inset 0 0 0 1.5px rgba(255,195,0,.92), 0 18px 44px rgba(2,36,76,.5); }
  15%  { background: rgba(3,30,62,.36); transform: none;
         box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 rgba(2,36,76,0); }
  100% { background: rgba(3,30,62,.36); transform: none;
         box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 0 0 rgba(2,36,76,0); }
}
.wecom .role .ri {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 15px;
  background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  animation: roleIco 9s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes roleIco {
  0%   { background: rgba(255,195,0,.28); box-shadow: inset 0 0 0 1.5px rgba(255,195,0,.95); }
  15%  { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  100% { background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
}
.wecom .role .ri svg { width: 30px; height: 30px; fill: none; stroke: #DCEBFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  animation: roleStroke 9s linear infinite; animation-delay: var(--d, 0s); }
@keyframes roleStroke {
  0%   { stroke: #FFE28A; }
  15%  { stroke: #DCEBFF; }
  100% { stroke: #DCEBFF; }
}
.wecom .role b { display: block; margin-top: 20px; font-size: 40px; font-weight: 700;
  letter-spacing: .02em; line-height: 1.15; color: #FFFFFF;
  animation: roleName 9s linear infinite; animation-delay: var(--d, 0s); }
@keyframes roleName {
  0%   { color: #FFC300; text-shadow: 0 0 26px rgba(255,195,0,.72); }
  15%  { color: #FFFFFF; text-shadow: 0 0 26px rgba(255,195,0,0); }
  100% { color: #FFFFFF; text-shadow: 0 0 26px rgba(255,195,0,0); }
}
.wecom .role p { margin-top: 12px; font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,.85); }
.wecom .role::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,195,0,.9); opacity: 0;
  animation: roleRing 9s cubic-bezier(.32,.72,0,1) infinite; animation-delay: var(--d, 0s);
}
@keyframes roleRing {
  0%   { opacity: .9; transform: scale(1); }
  14%  { opacity: 0; transform: scale(1.07); }
  100% { opacity: 0; transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .wecom .role, .wecom .role b, .wecom .role .ri, .wecom .role .ri svg, .wecom .role::after { animation: none !important; }
  .wecom .role b { color: #FFFFFF; }
}