/* ============================================================
 * ShowOS 首页 · 全新设计 《声控工程 · 现场演出系统》
 * 独立样式（仅作用于 index.html），不依赖共享 style.css 外观
 * 视觉：极深暗场 + 香槟金主光 + 冷银细节 + 等宽坐标参考线
 * 渲染：全部为静态 CSS 图层 / 一次绘制，无逐帧 JS 动画
 * ============================================================ */
:root {
  --bg: #05050a;
  --panel: rgba(255,255,255,0.025);
  --panel-2: rgba(255,255,255,0.05);
  --line: rgba(255,255,255,0.09);
  --line-gold: rgba(214, 179, 94, 0.26);
  --text: #f2f2f7;
  --soft: #b7b7c8;
  --muted: #80808f;
  --gold: #d6b35e;
  --gold-l: #e9d19a;
  --gold-d: #a8863d;
  --silver: #c7ccd8;
  --accent: #d6b35e;
  --accent-rgb: 214, 183, 94;
  --mask: linear-gradient(180deg, #0a0a14, transparent 42%);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ============ 仅首页（body.grad-home）纵向主题渐变；其他页维持各自原始整体色调 ============ */
body.grad-home {
  /* 整页背景：纵向主题色渐变(随滚动缓缓过渡) 叠加 金色氛围光带 + 深色基底
   颜色顺序：金(hero 主色, 多占) → 服务暖橘 → 案例暖白金 → 产品·下载页蓝(#7fa8ff)。
   顶部强化金色、暖橘下移，避免暖橘染到首屏 */
  background:
    linear-gradient(180deg,
      rgba(var(--accent-rgb),.16) 0%,
      rgba(var(--accent-rgb),.21) 9%,
      rgba(var(--accent-rgb),.16) 13%,
      rgba(184,143,72,.16) 18%,
      rgba(220,138,64,.18) 26%,
      rgba(240,152,84,.18) 31%,
      rgba(250,176,96,.15) 36%,
      rgba(248,202,138,.16) 41%,
      rgba(244,224,180,.20) 46%,
      rgba(244,228,193,.28) 52%,
      rgba(244,228,193,.30) 58%,
      rgba(244,228,193,.26) 63%,
      rgba(127,168,255,.18) 84%,
      rgba(127,168,255,.26) 100%),
    radial-gradient(40% 46% at 16% -6%, rgba(var(--accent-rgb),.18), transparent 72%),
    radial-gradient(34% 48% at 78% 4%, rgba(var(--accent-rgb),.16), transparent 72%),
    radial-gradient(38% 52% at 40% 30%, rgba(var(--accent-rgb),.13), transparent 70%),
    radial-gradient(46% 60% at 84% 62%, rgba(var(--accent-rgb),.15), transparent 66%),
    radial-gradient(70% 80% at 30% 104%, rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.07) 40%, transparent 66%),
    radial-gradient(30% 36% at 62% -4%, rgba(var(--accent-rgb),.05), transparent 58%),
    var(--bg);
}
/* 首页背景透出渐变：首页的 .bg-h 光带透明，避免盖住 body 纵向渐变 */
body.grad-home .bg-h {
  background: transparent;
}
/* 渲染优化：首页 body.grad-home 已内置完整渐变背景与金色光带，
   禁用叠加在其上的 fixed 装饰层(.bg-h::after)，避免看不到还被不透明盖住时仍消耗渲染 */
body.grad-home .bg-h,
body.grad-home .bg-h::after {
  display: none;
}
/* 首页保留细网格层（透明背景 + 细线，不遮挡渐变），格子效果可见 */

/* ---- 背景氛围层（静态、一次渲染） ---- */
/* 背景光带在下方 .bg-h 统一定义（中轴对齐、顶到底连贯），此处仅保留 ::after 渐变增强层 */
.bg-h {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: transparent;
}
.bg-h::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, transparent 24%, rgba(var(--accent-rgb),.16) 80%, rgba(var(--accent-rgb),.24) 100%);
}
.bg-grid-h {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  transform: translateZ(0); will-change: transform;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* ---- 通用按钮 ---- */
.btn-h {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border-radius: 4px;
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: all .3s;
}
.btn-h-primary {
  background: linear-gradient(135deg, var(--gold-l), var(--gold) 55%, var(--gold-d));
  color: #08080d;
  box-shadow: 0 12px 34px rgba(214,183,94,0.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-h-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(214,183,94,0.4), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-h-ghost { color: var(--soft); border-color: var(--line-gold); }
.btn-h-ghost:hover { color: var(--gold-l); border-color: var(--gold); }

/* ===================== HERO ===================== */
.hero-h {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 138px 28px 40px;
  overflow: visible;
}
/* 首屏不再叠加专属光，统一使用全站 bg-h 背景 */
.hero-grid-h {
  display: grid; grid-template-columns: 0.8fr 1.55fr; gap: 52px; align-items: center;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
/* ===== 首屏 · 3 标签手风琴（无外框；细线分隔；激活=金字+金色左条） ===== */
.hero-tabs{display:flex;flex-direction:column;width:100%}
.hero-tab-item{position:relative;padding-bottom:12px}
.hero-tab-item:not(:last-child){margin-bottom:14px}
.hero-tab-item:not(:last-child)::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;background:rgba(255,255,255,.10)}
/* 展开标签：仅文字特效 + 金色左条，不铺任何背景 */
.hero-tab-item.open .hero-tab{background:linear-gradient(90deg,rgba(233,212,167,.14),rgba(233,212,167,.02));border-radius:10px;margin:0 -4px;padding:16px 10px 16px 14px}
.hero-tab{display:flex;align-items:center;gap:12px;width:100%;padding:12px 6px 14px 12px;background:transparent;border:none;cursor:pointer;text-align:left;position:relative;transition:background .3s,font-size .3s}
.ht-label{flex:1;font-size:19px;letter-spacing:1px;color:var(--silver);white-space:nowrap;flex-shrink:0;min-width:0;transition:color .3s,font-size .3s}
.hero-tab:hover .ht-label{color:var(--gold-l)}
.hero-tab-item.open .ht-label{font-size:26px;font-weight:700;line-height:1.25}
.hero-tab-item.open .ht-arr{color:var(--gold-l)}
/* 标签文字：复用产品页标题特效（#fff ↔ 主题色 扫光渐变 + goldScanH），三标签各用一产品主题色 */
.hero-tab-item:nth-child(1) .hero-tab .ht-label{background:linear-gradient(90deg,#fff 0%,#f0ca7c 30%,#fff 58%,#f0ca7c 84%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldScanH 12s ease-in-out infinite alternate}
.hero-tab-item:nth-child(2) .hero-tab .ht-label{background:linear-gradient(90deg,#fff 0%,#6fb2ff 30%,#fff 58%,#6fb2ff 84%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldScanH 12s ease-in-out infinite alternate}
.hero-tab-item:nth-child(3) .hero-tab .ht-label{background:linear-gradient(90deg,#fff 0%,#6fdd8b 30%,#fff 58%,#6fdd8b 84%,#fff 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldScanH 12s ease-in-out infinite alternate}
.ht-arr{flex-shrink:0;font-size:20px;line-height:1;color:rgba(255,255,255,.28);transition:transform .28s,color .22s}
.hero-tab-item.open .ht-arr{transform:rotate(90deg);color:var(--gold-l)}
.hero-tab-body{overflow:hidden;opacity:0;transition:max-height .3s ease, opacity .28s ease;padding:2px 10px 4px}
.hero-tabs .hero-tab-title{font-weight:700}
.hero-tabs .hero-tab-body h1{font-size:clamp(1.1rem,2.4vw,1.5rem);line-height:1.3;margin:6px 0 4px;white-space:nowrap}
.hero-tabs .hero-tab-body h1 .hero-tab-title,.hero-tabs .hero-tab-body h1 .hm-sub{white-space:nowrap}
.hero-tabs .hero-tab-body .hero-tab-sub{font-size:clamp(.98rem,1.8vw,1.15rem);margin:6px 0 0;font-weight:500;letter-spacing:1.5px;white-space:nowrap;background:linear-gradient(90deg,#e9d4a7 0%,#fff7e0 22%,#e9d4a7 40%,#fff7e0 62%,#e9d4a7 80%,#fff7e0 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:goldScanH 12s ease-in-out infinite alternate}
.hero-tabs .hero-tab-body .lead-h{font-size:clamp(.92rem,1.6vw,1.05rem);color:var(--silver);margin:0}
.hero-tabs .hero-tab-body .acts-h{margin-top:12px}
.hero-tabs .hero-tab-body .btn-h-primary{box-shadow:none;background:linear-gradient(135deg,var(--gold-l),var(--gold) 55%,var(--gold-d))}
.hero-tabs .hero-tab-body .hero-data-h{margin:16px 0 6px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.visual-h{transition:opacity .55s ease}
.visual-h.out{opacity:0}
/* ============ 首屏文字区 · 极简大气 ============ */
.hero-copy-h{position:relative}
/* kicker：品牌小字，前一条短金线 */
.hero-kicker-h{
  display:inline-flex;align-items:center;gap:14px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:3px;color:var(--silver);
}
.hero-kicker-h::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero-kicker-h b{color:var(--gold);font-weight:600}
/* 大标题：统一金色渐变扫光，双行分层 */
.hero-h h1{
  margin:28px 0 0;line-height:1.16;font-weight:900;letter-spacing:1px;
  background:linear-gradient(90deg,#fff 0%,var(--accent) 30%,#fff 58%,var(--accent) 84%,#fff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:goldScanH 12s ease-in-out infinite alternate;
}
/* 首页标题第二行（掌控每一场演出）：细体，保留金光但更轻盈 */
.hero-h h1 .hm-sub{
  font-weight:200;letter-spacing:6px;
}
.hm-en{
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-size:clamp(40px,6vw,76px);font-weight:300;letter-spacing:3px;line-height:1;color:#fff;
}
.hm-cn{
  display:block;margin-top:18px;
  font-size:clamp(24px,2.8vw,36px);font-weight:600;letter-spacing:6px;color:#fff;
}
/* 英文副标 */
.hero-h .en-h{
  margin:24px 0 0;padding-top:16px;
  font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:3px;color:var(--muted);text-transform:uppercase;
  border-top:1px solid rgba(224,192,122,.35);
}
/* 主体简介 */
.hero-h .lead-h{
  margin:20px 0 0;max-width:480px;
  font-size:clamp(14px,1.35vw,16px);color:var(--soft);line-height:1.9;letter-spacing:.4px;
}
.hero-h .acts-h { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
/* 数据指标带：细竖线分隔，无网格 */
.hero-data-h {
  margin:46px 0 0;max-width: 540px;
  display: grid; grid-template-columns: repeat(4,1fr); gap:0;
}
.hd-h { padding: 0 18px; border-left:1px solid rgba(224,192,122,.22); }
.hd-h:first-child { padding-left:0; border-left:none; }
.hd-h .n {
  font-family:ui-monospace,Menlo,monospace;
  font-size: 16px; font-weight: 500; color: var(--gold-l); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hd-h .l { font-size: 10px; color: var(--muted); margin-top: 5px; letter-spacing: 1.5px; white-space: nowrap; }

@media (max-width: 960px) {
  .hero-grid-h { grid-template-columns: 1fr; gap: 44px; }
  .hero-h { padding-top: 130px; }
}

/* ---- 右侧轮换（保留机制，重做外观：专业监测面板） ---- */
.visual-h { position: relative; }
.visual-h::before {
  content: ""; position: absolute; inset: 0;
  background: transparent;
}
.stage-h {
  position: relative; z-index: 1;
  border-radius: 6px; overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}
.stage-bar-h {
  display: none;
}
.stage-bar-h .tag-h { display: flex; gap: 6px; align-items: center; }
.stage-bar-h .tag-h i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.stage-bar-h .rec { color: var(--gold-l); }
.stage-bar-h .rec i { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.stage-h .browser-slider { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; max-height: 72vh; margin: 0 auto; background: transparent; border-radius: 6px; }
.stage-h .browser-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .6s ease; }
.stage-h .browser-slide.active { opacity: 1; }
/* 首屏 lead 文案支持真实换行（firstscreen.js 用 \n） */
.lead-h { white-space: pre-line; }
/* 翻页按钮：移出图外两侧，层级置顶（不被裁切） */
.stage-nav-h {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-gold);
  background: rgba(8,8,15,.85); color: var(--gold-l); font-size: 24px; cursor: pointer;
  transition: all .3s; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.stage-nav-h.prev { left: -24px; } .stage-nav-h.next { right: -24px; }
.stage-nav-h:hover { background: rgba(214,183,94,.16); transform: translateY(-50%) scale(1.08); }
/* 页数圆点：移到图外下方 */
.dots-h { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.dots-h span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; transition: all .3s; }
.dots-h span.active { width: 22px; border-radius: 5px; background: linear-gradient(90deg, var(--gold-l), var(--gold)); box-shadow: 0 0 10px var(--gold-glow); }
@media (max-width: 560px) { .stage-nav-h.prev{left:0} .stage-nav-h.next{right:0} .hero-data-h{grid-template-columns:repeat(2,1fr)}
  /* 手机：首屏标题卡片加宽，占满屏宽（左右留白由 wrap padding 控制），标签居左 */
  .hero-grid-h{gap:20px}
  .ht-label{font-size:16px;letter-spacing:.3px}
  .hero-tab-item{padding-bottom:6px}
  .hero-tab-item:not(:last-child){margin-bottom:6px}
  .hero-tab-item.open .ht-label{font-size:20px}
  .hero-tab-item.open .hero-tab{padding:8px 6px;margin:0 -4px}
  .hero-tab{gap:10px;padding:8px 6px 9px 8px}
  .ht-arr{font-size:16px}
  .hero-tabs .hero-tab-body{padding:0 6px}
  /* 首屏文字紧凑：小屏下压小各元素尺寸与间距，让首屏图进可视区 */
  .hero-tabs .hero-tab-body h1{font-size:clamp(1.05rem,4.4vw,1.3rem);margin:4px 0 2px}
  .hero-tabs .hero-tab-body .hero-tab-sub{font-size:clamp(.9rem,3.8vw,1.05rem);margin:4px 0 0}
  .hero-tabs .hero-tab-body .lead-h{font-size:clamp(.82rem,3.4vw,.96rem);line-height:1.75}
  .hero-tabs .hero-tab-body .acts-h{margin-top:8px;gap:10px}
  .hero-tabs .hero-tab-body .btn-h{padding:.7em 1.4em;font-size:13px}
  .hero-tabs .hero-tab-body .hero-data-h{margin:10px 0 4px;padding-top:10px}
  .hd-h{padding:0 12px}
  .hd-h .n{font-size:14px}
  .hd-h .l{font-size:9px;letter-spacing:1px}
  .stage-h .browser-slider{max-height:50vh;aspect-ratio:16/10}
  .dots-h{margin-top:12px}
}

/* ===================== 通用 Section ===================== */
.sect-h { padding: 128px 0 0; }
.sec-head-h {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 56px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.sec-head-h .idx-h { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--gold); letter-spacing: 3px; }
.sec-head-h h2 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: 1px; margin-top: 6px; }
.sec-head-h .sub-h { color: var(--muted); font-size: 15px; margin-right: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .sec-head-h { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px; }
  .sec-head-h .sub-h { white-space: normal; }
}

/* ===== 手机：主营业务彩色标签更小、更紧凑整齐 ===== */
@media (max-width: 640px) {
  .soul-card { padding: 34px 22px 32px; }
  .soul-card .soul-biz { gap: 12px; margin-top: 22px; }
  .soul-card .soul-biz-tag { padding: 5px 14px; font-size: 12px; letter-spacing: 3px; }
  .soul-card .soul-biz-items { gap: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .soul-card .soul-biz-linebreak { display: none; }
  .soul-card .soul-biz-item {
    padding: 7px 8px;
    font-size: 12.5px; font-weight: 500; letter-spacing: 1px;
    line-height: 1;
    justify-content: center;
    white-space: nowrap;
  }
}

/* 能力 02/ 左侧等宽编号 */
.cap-grid-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .cap-grid-h{grid-template-columns:1fr} }
.cap-h {
  position: relative; padding: 34px 30px 30px;
  background: linear-gradient(180deg, var(--panel), transparent 70%), var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: all .35s;
}
.cap-h:hover { border-color: var(--line-gold); transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0,0,0,.42); }
.cap-h .no-h { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--gold); letter-spacing: 2px; }
.cap-h h3 { font-size: 22px; font-weight: 800; margin: 16px 0 10px; letter-spacing: 1px; }
.cap-h p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.cap-h::after { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold-l),transparent); opacity:0; transition:opacity .35s; }
.cap-h:hover::after{opacity:1}
/* 三大模块配色：播控绿 / 助理紫 / 信息金（与 App 内一致，含主题渐变底） */
.mod-ctrl{--mx:0,196,110}
.mod-assist{--mx:136,112,226}
.mod-info{--mx:204,168,104}
.cap-h.mod-ctrl,.cap-h.mod-assist,.cap-h.mod-info{overflow:hidden;border-color:rgba(var(--mx),.34);background:linear-gradient(170deg,rgba(var(--mx),.13),rgba(var(--mx),.03) 55%,rgba(var(--mx),.08)),linear-gradient(180deg,var(--panel),transparent 70%),var(--bg)}
.cap-h.mod-ctrl .no-h,.cap-h.mod-assist .no-h,.cap-h.mod-info .no-h{color:rgba(var(--mx),.95)}
.cap-h.mod-ctrl h3,.cap-h.mod-assist h3,.cap-h.mod-info h3{color:#fff}
.cap-h.mod-ctrl p,.cap-h.mod-assist p,.cap-h.mod-info p{color:rgba(var(--mx),.88)}
.cap-h.mod-ctrl::after,.cap-h.mod-assist::after,.cap-h.mod-info::after{background:linear-gradient(90deg,rgb(var(--mx)),transparent)}
/* 主题色渐变底：类似 App 配置管理页背景氛围（暗调） */
.cap-h.mod-ctrl::before,.cap-h.mod-assist::before,.cap-h.mod-info::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(120% 68% at 50% -6%,rgba(var(--mx),.24),transparent 58%),
    radial-gradient(150% 90% at 50% 112%,rgba(var(--mx),.13),transparent 55%);
}
.cap-h.mod-ctrl>*,.cap-h.mod-assist>*,.cap-h.mod-info>*{position:relative;z-index:1}
/* 模块卡片内底图：与卡片贴合一体 */
.cap-h{display:flex;flex-direction:column;will-change:transform;transition:transform .35s,box-shadow .2s,border-color .3s}
.cap-h .cap-img{display:block;width:calc(100% + 60px);margin:26px -30px -30px;border-top:1px solid var(--line);border-radius:0 0 6px 6px;object-fit:cover;flex:none;position:relative}
.cap-h:hover .cap-img{border-top-color:rgba(var(--mx),.5)}
/* 4 卡订阅并排（桌面） */
.price-grid-h.price-grid-h--4{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.price-grid-h--4 .price-h{min-width:0}
@media(max-width:900px){.price-grid-h--4{gap:12px}.price-grid-h--4 .price-h{padding:20px 16px}.price-h .pam-h{font-size:34px}.price-h li{font-size:12px}.price-h .pname-h{font-size:15px}.price-h .pper-h{font-size:12px}}
/* ShowOSControl 主程序：hero 右列 · 堆叠左转 50° · 金色背光 · hover 上跳 */
/* ===== ShowOSControl 首屏 · 左右分栏 + 右侧堆叠 ===== */
.page-hero-h{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;padding:80px 28px}
.page-hero-h .center,.page-hero-h .screen-scatter{display:none}
.ph-grid-h{display:grid;grid-template-columns:0.78fr 1.22fr;gap:60px;align-items:center}
.ph-copy-h{text-align:left}
.ph-copy-h .acts-h{justify-content:flex-start}
.ph-visual-h{position:relative;perspective:1800px;height:660px;transform:translateY(-40px) translateX(24px)}
.ph-visual-h .f{position:absolute;width:286px;line-height:0;transform-origin:right center;border-radius:16px;background:radial-gradient(130% 130% at 50% 8%,rgba(116,96,66,.95),rgba(88,72,50,.97));box-shadow:0 8px 22px rgba(0,0,0,.55),0 20px 46px rgba(0,0,0,.38),0 0 14px rgba(224,192,122,.18);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .2s ease;cursor:pointer;transform:rotateY(-35deg) translateZ(0);
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ph-visual-h .f img{width:100%;display:block}
.ph-visual-h .f:nth-child(1){left:-104px;top:286px;z-index:20}
.ph-visual-h .f:nth-child(2){left:-52px;top:270px;z-index:19}
.ph-visual-h .f:nth-child(3){left:0px;top:256px;z-index:18}
.ph-visual-h .f:nth-child(4){left:52px;top:242px;z-index:17}
.ph-visual-h .f:nth-child(5){left:104px;top:228px;z-index:16}
.ph-visual-h .f:nth-child(6){left:156px;top:214px;z-index:15}
.ph-visual-h .f:nth-child(7){left:208px;top:200px;z-index:14}
.ph-visual-h .f:nth-child(8){left:260px;top:186px;z-index:13}
.ph-visual-h .f:nth-child(9){left:312px;top:172px;z-index:12}
.ph-visual-h .f:nth-child(10){left:364px;top:158px;z-index:11}
.ph-visual-h .f:nth-child(11){left:416px;top:144px;z-index:10}
.ph-visual-h .f:nth-child(12){left:468px;top:130px;z-index:9}
.ph-visual-h .f:nth-child(13){left:520px;top:118px;z-index:8}
.ph-visual-h .f:nth-child(14){left:572px;top:106px;z-index:7}
.ph-visual-h .f:hover{transform:rotateY(-35deg) translateY(0) translateZ(0)}
/* hover 跳起仅在真正的鼠标设备生效；触摸(iPad/手机)保持不跳起，
   避免粘滞 hover 在重叠堆叠卡之间来回触发造成「轮流跳起循环不停」 */
@media (hover:hover) and (pointer:fine){
  .ph-visual-h .f:hover{transform:rotateY(-35deg) translateY(-96px) translateZ(0);box-shadow:0 16px 34px rgba(0,0,0,.45),0 34px 70px rgba(0,0,0,.3),0 0 20px rgba(224,192,122,.3);will-change:transform}
}
/* 触摸/无悬停设备：明确取消跳起（覆盖上方基线），杜绝粘滞交替 */
@media (hover:none),(pointer:coarse){
  .ph-visual-h .f:hover{transform:rotateY(-35deg) translateY(0) translateZ(0);box-shadow:none}
}
@media(max-width:900px){
  .ph-grid-h{grid-template-columns:1fr;gap:40px}
  .ph-visual-h{display:none}
  .ph-visual-h .f{width:min(38vw,254px)}
  .ph-visual-h .f:nth-child(1){left:0;top:min(0vw,0px)}
  .ph-visual-h .f:nth-child(2){left:min(5vw,28px);top:min(5vw,10px)}
  .ph-visual-h .f:nth-child(3){left:min(10vw,56px);top:min(10vw,40px)}
  .ph-visual-h .f:nth-child(4){left:min(15vw,84px);top:min(15vw,70px)}
  .ph-visual-h .f:nth-child(5){left:min(20vw,112px);top:min(20vw,100px)}
  .ph-visual-h .f:nth-child(6){left:min(25vw,140px);top:min(25vw,130px)}
  .ph-visual-h .f:nth-child(7){left:min(30vw,168px);top:min(30vw,160px)}
  .ph-visual-h .f:nth-child(8){left:min(35vw,196px);top:min(35vw,190px)}
  .ph-visual-h .f:nth-child(9){left:min(40vw,224px);top:min(40vw,220px)}
  .ph-visual-h .f:nth-child(10){left:min(45vw,252px);top:min(45vw,250px)}
  .ph-visual-h .f:nth-child(11){left:min(50vw,280px);top:min(50vw,280px)}
  .ph-visual-h .f:nth-child(12){left:min(55vw,308px);top:min(55vw,310px)}
  .ph-visual-h .f:nth-child(13){left:min(60vw,336px);top:min(60vw,340px)}
  .ph-visual-h .f:nth-child(14){left:min(65vw,364px);top:min(65vw,370px)}
}

/* 特性 03 左右分栏 */
.split-h { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 900px){ .split-h{grid-template-columns:1fr} }
.split-h .list-h { display: flex; flex-direction: column; gap: 18px; }
.row-h { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.row-h .ic-h { flex:none; width: 44px; height: 44px; border-radius:6px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-gold); color: var(--gold-l); font-size:20px; background: var(--panel-2); }
.row-h b { display: block; font-size: 17px; letter-spacing: .5px; }
.row-h p { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.7; }
/* 亮点行：悬停/选中反馈（深色暗调 + 主题色点缀） */
.feat-block{--hl:202,166,102;--d:24,20,13}
.feat-block--green{--hl:0,196,110;--d:8,34,24}
.feat-block--purple{--hl:134,108,224;--d:30,22,60}
.row-h{position:relative;border-radius:10px;margin:0 -12px;padding:16px 12px;border-top:1px solid var(--line);transition:background .3s,border-color .3s;will-change:background-color}
.row-h::before{content:"";position:absolute;left:2px;top:14px;bottom:14px;width:3px;border-radius:2px;background:linear-gradient(180deg,rgb(var(--hl)),rgba(var(--hl),.35));opacity:0;transition:opacity .3s;box-shadow:0 0 14px rgba(var(--hl),.5)}
.row-h:hover{background:linear-gradient(100deg,rgba(var(--hl),.2),rgba(var(--hl),.07) 60%,rgba(var(--d),.28));border-color:rgba(var(--hl),.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.row-h:hover::before{opacity:1}
.row-h .ic-h{transition:background .3s,color .3s,transform .3s,box-shadow .3s,border-color .3s}
.row-h:hover .ic-h{background:linear-gradient(150deg,rgb(var(--hl)),rgba(var(--hl),.5));color:#08080d;border-color:transparent;transform:translateY(-1px);box-shadow:0 6px 22px rgba(var(--hl),.45)}
.row-h:hover b{background:linear-gradient(90deg,#fff,rgb(var(--hl)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.row-h:hover p{color:var(--soft)}
.mono-note-h { font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing:2px; color:var(--gold); margin-bottom: 16px; }
/* 全新升级亮点 · 交替图文块（文字/图片左右对调） */
.feat-block{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:44px}
.feat-block .list-wrap{min-width:0}
.feat-block .feat-pic{display:flex;align-items:center;justify-content:center}
.feat-block .feat-pic img{width:auto;height:auto;max-width:100%;max-height:clamp(220px,30vw,400px);object-fit:contain;cursor:zoom-in}
.img-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:0;backdrop-filter:blur(3px)}
.img-modal img{max-width:78vw;max-height:72vh;border-radius:12px;object-fit:contain;box-shadow:0 0 0 1px rgba(224,192,122,.38),0 0 44px rgba(224,192,122,.35),0 32px 90px rgba(0,0,0,.65)}
@media(max-width:900px){.feat-block{grid-template-columns:1fr;gap:18px;margin-bottom:30px}.feat-block .feat-pic{order:0;width:100%}.feat-block .feat-pic img{width:100%;height:auto;max-height:none;object-fit:cover}.feat-block .list-wrap{order:1}.feat-block .row-h{padding:10px 0}.feat-block .row-h .ic-h{width:28px;height:28px;font-size:13px}.feat-block .row-h b{font-size:15px}.feat-block .row-h p{font-size:12px;margin-top:2px;line-height:1.5}}

/* ===================== 产品矩阵 ===================== */
.prod-grid-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .prod-grid-h{grid-template-columns:1fr} }
.prod-h {
  position: relative; padding: 40px 32px 36px; border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(214,183,94,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--bg);
  border: 1px solid var(--line); transition: all .35s; overflow: hidden; will-change: transform;
}
/* 金色渐变顶条 */
.prod-h::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-l), var(--gold), var(--gold-d), transparent);
  opacity: .75; transition: opacity .35s;
}
.prod-h:hover { border-color: var(--line-gold); transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.prod-h:hover::before { opacity: 1; }
.prod-h .ic-h {
  width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 24px;
  background: linear-gradient(150deg, rgba(214,183,94,.18), rgba(214,183,94,.04));
  border: 1px solid rgba(214,183,94,.4);
  color: var(--gold-l);
  box-shadow: inset 0 0 18px rgba(214,183,94,.12);
  transition: all .35s;
}
.prod-h:hover .ic-h {
  background: linear-gradient(150deg, var(--gold-l), var(--gold) 55%, var(--gold-d));
  color: #08080d; border-color: transparent;
  box-shadow: 0 10px 30px rgba(214,183,94,.4);
  transform: translateY(-2px);
}
.prod-h h3 { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.prod-h p { color: var(--muted); font-size: 14px; margin: 12px 0 20px; line-height: 1.8; min-height: 50px; }
.prod-h .tags-h { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-h .t-h {
  padding: 5px 14px; font-size: 12px; letter-spacing: .5px;
  border: 1px solid rgba(214,183,94,.3); border-radius: 30px; color: var(--soft);
  background: rgba(214,183,94,.05);
}
.prod-h .coming-h {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  font-size: 11px; letter-spacing: 1px; color: var(--gold-l);
  border: 1px solid rgba(214,183,94,.45); padding: 3px 12px; border-radius: 30px;
  background: rgba(214,183,94,.08);
}

/* ===================== 价格 ===================== */
.price-grid-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px){ .price-grid-h{grid-template-columns:1fr} }
.price-h { position: relative; padding: 38px 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); text-align: left; transition: all .35s; height: 100%; display: flex; flex-direction: column; }
.price-h .btn-h{ margin-top: auto; }
.btn-free{ background: linear-gradient(135deg,#8ce8a8,#5fdc7c); color:#08130c; border-color:transparent; box-shadow:0 12px 30px rgba(95,220,124,.3) !important; }
.btn-free:hover{ box-shadow:0 16px 40px rgba(95,220,124,.45) !important; transform:translateY(-2px); }
.price-h:hover { transform: translateY(-6px); }
.price-h.hot { border-color: var(--line-gold); box-shadow: 0 0 0 1px rgba(214,183,94,.2), 0 26px 70px rgba(0,0,0,.6); background: linear-gradient(180deg, rgba(214,183,94,.06), transparent 45%), var(--bg); }
.price-h .badge-h { position: absolute; top: -13px; left: 28px; padding: 4px 16px; background: linear-gradient(135deg,var(--gold-l),var(--gold)); color:#08080d; font-size: 12px; font-weight: 700; border-radius: 30px; letter-spacing: 1px; }
.price-h .pname-h { font-size: 16px; font-weight: 700; color: var(--soft); letter-spacing: 1px; }
.price-h .pam-h { margin: 20px 0 4px; font-size: 54px; font-weight: 900; letter-spacing: 1px; background: linear-gradient(120deg,#fff,var(--gold-l)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.price-h .pper-h { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.price-h ul { list-style: none; margin-bottom: 30px; border-top: 1px solid var(--line); }
.price-h li { display: flex; gap: 10px; padding: 11px 0; font-size: 14px; color: var(--soft); border-bottom: 1px solid var(--line); }
.price-h li::before { content: "+"; color: var(--gold); font-family: ui-monospace, Menlo, monospace; }
.price-h .btn-h { width: 100%; }

/* ===================== CTA + Footer ===================== */
.cta-h { padding: 150px 28px; text-align: center; position: relative; }
.cta-h h2 { font-size: clamp(28px,4vw,52px); font-weight: 900; letter-spacing: 1px; }
.cta-h .sub-h { color: var(--muted); margin: 18px auto 40px; max-width: 520px; font-size: 16px; }
.cta-h .acts-h { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.footer-h {
  border-top: 1px solid var(--line-gold);
  padding: 64px 0 40px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.5));
}
.foot-grid-h { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width: 800px){ .foot-grid-h{grid-template-columns:1fr 1fr} }
.footer-h h5 { font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-bottom: 18px; color: var(--soft); }
.footer-h a { display: block; color: var(--muted); font-size: 13px; text-decoration: none; padding: 5px 0; transition: color .3s; }
.footer-h a:hover { color: var(--gold-l); }
.footer-h .brand-h { font-size: 22px; font-weight: 900; letter-spacing: 2px; background: linear-gradient(90deg,#fff,var(--gold-l)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.footer-h .desc-h { color: var(--muted); font-size: 13px; margin-top: 14px; line-height: 1.8; max-width: 320px; }
.foot-bottom-h { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: ui-monospace,Menlo,monospace; font-size: 12px; color: var(--muted); letter-spacing: 1px; }

/* 轻量滚动浮现（可选，无 JS —— 仅 transform 过渡触发 hover，不启用入场动画以省开销） */

/* ============================================================
 * 舞台灯光感增强（金碧辉煌但克制，非奢华）· 卡片精修 · 内页
 * 全部静态图层，单次渲染
 * ============================================================ */
/* 全站背景光带：中轴对齐的连贯光带（顶部细亮 → 中段延续 → 底部扩散变粗占大半个屏）
   仅首页(body.grad-home)会将其透明化以露出纵向渐变，其余页维持此原始金色氛围 */
.bg-h {
  background:
    radial-gradient(34% 40% at 50% -6%, rgba(var(--accent-rgb),.30), transparent 72%),
    radial-gradient(30% 44% at 50% 10%, rgba(var(--accent-rgb),.23), transparent 70%),
    radial-gradient(36% 54% at 50% 36%, rgba(var(--accent-rgb),.18), transparent 68%),
    radial-gradient(48% 64% at 50% 64%, rgba(var(--accent-rgb),.21), transparent 64%),
    radial-gradient(80% 86% at 50% 106%, rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.10) 40%, transparent 66%),
    radial-gradient(16% 30% at 50% 0%, rgba(var(--accent-rgb),.05), transparent 58%),
    var(--bg);
}

/* 卡片：更通透的面板 + 顶部暖光带 + 内描边 */
.cap-h, .prod-h, .price-h {
  background:
    linear-gradient(180deg, rgba(255,215,150,0.045), transparent 34%),
    linear-gradient(180deg, var(--panel), transparent 78%),
    var(--bg);
  border-radius: 14px;
}
.cap-h::after, .prod-h::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,214,128,.6), transparent);
  opacity: .7;
}
.cap-h:hover, .prod-h:hover, .price-h:hover {
  box-shadow: 0 20px 54px rgba(0,0,0,.5), 0 0 0 1px rgba(255,205,120,.16);
}
.cap-h .no-h { display: none; }

/* ===================== 内页（产品/介绍） ===================== */
.page-h { padding: 132px 0 20px; }
.page-hero-h {
  padding: 118px 0 54px; position: relative;
  border-bottom: 1px solid var(--line);
}
.page-hero-h .pg-h {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 3px; color: var(--gold); text-transform: uppercase;
}
.page-hero-h h1 {
  margin-top: 18px; font-size: clamp(26px, 3.5vw, 46px); font-weight: 200; letter-spacing: 2px; line-height: 1.2;
  background: linear-gradient(90deg, #fff 0%, var(--accent) 30%, #fff 58%, var(--accent) 84%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 12s ease-in-out infinite alternate;
}
.page-hero-h .lead-h {
  margin-top: 22px; max-width: 640px; color: var(--soft); font-size: clamp(15px,1.6vw,18px); line-height: 1.9;
}
.sub-badge-h {
  display: inline-block; margin: 14px 0 4px; padding: 4px 14px;
  font-size: 12px; letter-spacing: 2px; color: var(--soft);
  border: 1px solid var(--line); border-radius: 1000px; background: var(--panel-2);
}
.page-hero-h .acts-h { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* 轮换标注文字（图片内容说明） */
.cap-txt-h {
  padding: 9px 16px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 2px;
  color: var(--gold-l); background: rgba(8,8,15,.5); border-top: 1px solid var(--line);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-num-h { color: var(--muted); margin-right: 8px; }

/* 产品卡「了解详情」链接 + 热门卡高亮 */
.link-h {
  display: inline-block; margin-top: 20px;
  color: var(--gold-l); font-size: 14px; letter-spacing: 1px; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .3s, border-color .3s;
}
.link-h:hover { color: #fff; border-color: var(--gold); }
.prod-h.hot {
  border-color: rgba(214,183,94,.5);
  box-shadow: 0 0 0 1px rgba(214,183,94,.16), 0 26px 64px rgba(0,0,0,.5);
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(214,183,94,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,215,150,.08), transparent 42%),
    linear-gradient(180deg, var(--panel), transparent 78%), var(--bg);
}
/* hot 卡顶条更亮 */
.prod-h.hot::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, #fff, var(--gold-l), var(--gold), transparent);
}
/* 购买产品入口块 */
.buy-cta-h {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 60px 24px; text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,215,150,0.05), transparent 42%),
    linear-gradient(180deg, var(--panel), transparent 80%), var(--bg);
}
.buy-cta-h p { color: var(--soft); font-size: 15px; max-width: 540px; line-height: 1.8; }
/* 每屏配图横幅 */
.sec-img-h {
  display: block; width: 100%; height: auto; margin: 0 auto 46px;
  border-radius: 12px; border: 1px solid var(--line-gold);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
/* 金光扫描特效（对齐顶部 logo）：横向光带扫过金色大标题，来回往返 */
@keyframes goldScanH {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ===== 每页配色主题：body.xxx 一处控制全页强调色与背景光带 ===== */
.theme-home{--accent:#e7c17a;--accent-rgb:231,193,122}      /* 首页 · 暖金 */
.theme-services{--accent:#ff9a5a;--accent-rgb:255,154,90}   /* 服务 · 暖橘 */
.theme-sos{--accent:#6fb2ff;--accent-rgb:111,178,255}        /* ShowOS 导演 · 蓝 */
.theme-soscontrol{--accent:#f0ca7c;--accent-rgb:240,202,124}/* ShowOSControl · 金 */
.theme-configs{--accent:#6fdd8b;--accent-rgb:111,221,139}   /* 定制配置 · 绿 */
.theme-pricing{--accent:#e7c17a;--accent-rgb:231,193,122}   /* 购买 · 金 */
.theme-downloads{--accent:#7fa8ff;--accent-rgb:127,168,255} /* 下载 · 靛蓝 */
.theme-cases{--accent:#f4e4c1;--accent-rgb:244,228,193}     /* 案例 · 暖白金 */
.theme-contact{--accent:#c7ccd8;--accent-rgb:199,204,216}   /* 联系 · 冷银 */

/* ===== 首页 · 服务板块 ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc-card{position:relative;padding:32px 28px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),var(--bg);text-decoration:none;color:inherit;display:block;overflow:hidden;transition:transform .35s,box-shadow .2s,border-color .3s;will-change:transform}
.svc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(var(--accent-rgb),.13),transparent 55%);opacity:0;transition:opacity .35s}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.5);box-shadow:0 14px 32px rgba(0,0,0,.42)}
.svc-card:hover::before{opacity:1}
.svc-card .svc-ic{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.4);margin-bottom:16px;position:relative;color:var(--accent)}
.svc-card h3{font-size:20px;font-weight:800;letter-spacing:.5px;position:relative}
.svc-card p{color:var(--muted);font-size:13px;line-height:1.7;margin-top:8px;position:relative}
.svc-link{display:inline-block;margin-top:16px;color:var(--accent);font-size:13px;position:relative}
.svc-link::after{content:"→";margin-left:5px}
/* 首页 · slogan 横幅 */
.slogan-h{letter-spacing:4px}
/* 三档订阅网格（ShowOS 导演平台等无免费档产品） */
.price-grid-h--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.price-grid-h--3{grid-template-columns:1fr}}

/* ============ 首页 · 声灵品牌介绍卡片（独立样式，仅用于 index.html #capabilities） ============ */
/* 服务区块占满一屏，卡片垂直居中，留出大块空白以承载暖橘渐变与内容 */
#capabilities {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
#capabilities .wrap { width: 100%; }
.soul-card {
  position: relative;
  padding: 74px 46px 64px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,154,90,.20), transparent 55%),
    linear-gradient(160deg, rgba(255,154,90,.14), transparent 46%, rgba(255,154,90,.09) 100%),
    linear-gradient(180deg, var(--panel), transparent 70%), var(--bg);
  border: 1px solid rgba(255,154,90,.55);
  border-radius: 14px;
  box-shadow: 0 34px 90px rgba(0,0,0,.45), 0 0 60px rgba(255,154,90,.20);
  text-align: center;
}
/* 中文主标题：细黑 + 宽字距 + 服务页主题色(暖橘) 扫光特效（与服务页大字一致） */
.soul-card .soul-title {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 30px);
  flex-wrap: wrap;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700; letter-spacing: 8px; line-height: 1.15;
  background: linear-gradient(90deg, #fff 0%, rgba(255,154,90,.55) 24%, #ff9a5a 34%, #fff 58%, #ffd0a8 78%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 12s ease-in-out infinite alternate;
}
/* 标题中间的大号金色圆点分隔符（垂直居中、醒目） */
.soul-card .soul-title .soul-title-divider {
  align-self: center;
  width: clamp(6px, 0.7em, 11px);
  height: clamp(6px, 0.7em, 11px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--gold-l) 38%, var(--gold) 60%, var(--gold-d) 100%);
  box-shadow: 0 0 10px rgba(214,179,94,.5), inset 0 1px 2px rgba(255,255,255,.5);
  flex: none;
}
/* 英文细副题：ShowOSControl 内页细体(goldScanH 金色渐变扫光) */
.soul-card .soul-sub {
  margin-top: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 300; letter-spacing: 6px; line-height: 1.2;
  background: linear-gradient(90deg, #d6b35e 0%, #fff 40%, #fff 60%, #d6b35e 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 12s ease-in-out infinite alternate;
}
/* 分隔线 */
.soul-card .soul-line {
  height: 1px; margin: 30px auto 24px; max-width: 640px;
  background: linear-gradient(90deg, transparent, rgba(214,179,94,.55) 20%, rgba(214,179,94,.55) 80%, transparent);
}
/* 品牌文案 */
.soul-card .soul-text {
  max-width: 720px;
  color: var(--soft); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.9; letter-spacing: .5px;
  margin: 0 auto 8px;
}
.soul-card .soul-text:last-child { margin-bottom: 0; }
/* 主营业务行：上边空一行 + 同号文案 */
.soul-card .soul-biz {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: 30px; line-height: 1.9; letter-spacing: .5px;
}
/* 金色描边小标签“主营业务” */
.soul-card .soul-biz-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px;
  font-size: clamp(13px, 1.4vw, 16px); font-weight: 700; letter-spacing: 4px;
  color: #0c0a05;
  border: 1px solid rgba(233,209,154,.8);
  border-radius: 1000px;
  background: linear-gradient(135deg, #f4e2b0, #d6b35e 55%, #b08c3a);
  box-shadow: 0 0 22px rgba(214,179,94,.35), inset 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap;
}
/* 主营内容：独立彩色胶囊标签组（每项各自主题色，--c 主色 / --c2 深色渐变端） */
.soul-card .soul-biz-items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.soul-card .soul-biz-item {
  --c: 214,183,94;   /* 默认金，可被下方 nth-child 覆盖 */
  --c2: 168,136,61;
  display: inline-flex; align-items: center;
  padding: 9px 22px;
  font-size: clamp(15px, 1.8vw, 19px); font-weight: 600; letter-spacing: 2px;
  color: #fff;
  border: 1px solid rgba(var(--c), .55);
  border-radius: 1000px;
  background:
    linear-gradient(180deg, rgba(var(--c), .16), rgba(var(--c), .03)),
    rgba(10,10,18,.62);
  box-shadow: inset 0 0 18px rgba(var(--c), .14), 0 2px 10px rgba(0,0,0,.3);
  text-shadow: 0 0 12px rgba(var(--c), .35);
  transition: all .3s;
}
/* hover：各自主题色实渐变，不套用主营业务的统一金色 */
.soul-card .soul-biz-item:hover {
  color: #0c0a05;
  border-color: rgba(var(--c), .95);
  background: linear-gradient(135deg, rgba(var(--c), 1), rgba(var(--c2), 1));
  box-shadow: 0 0 26px rgba(var(--c), .5), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: none;
  transform: translateY(-2px);
}
/* 每项独立主题色（注意 linebreak 占用第8个子元素位，后续顺延） */
.soul-biz-item:nth-child(1)  { --c: 233,209,154; --c2: 190,150,70; }   /* 演出统筹 · 香槟金 */
.soul-biz-item:nth-child(2)  { --c: 255,150,64;  --c2: 230,96,24; }      /* 现场调音 · 暖橙（显眼） */
.soul-biz-item:nth-child(3)  { --c: 255,204,96;  --c2: 220,158,30; }     /* 灯光 · 琥珀 */
.soul-biz-item:nth-child(4)  { --c: 158,128,255; --c2: 104,70,220; }     /* VJ · 紫电 */
.soul-biz-item:nth-child(5)  { --c: 255,116,168; --c2: 210,54,116; }     /* 后期制作 · 品红 */
.soul-biz-item:nth-child(6)  { --c: 96,158,255;  --c2: 46,104,220; }     /* 技术支持 · 宝蓝 */
.soul-biz-item:nth-child(7)  { --c: 240,196,120; --c2: 196,140,58; }     /* 导演团队 · 古金 */
.soul-biz-item:nth-child(9)  { --c: 84,204,214;  --c2: 32,152,168; }     /* 设备调配 · 青碧 */
.soul-biz-item:nth-child(10) { --c: 250,122,152; --c2: 212,64,104; }     /* 艺统/艺接 · 玫红 */
.soul-biz-item:nth-child(11) { --c: 110,222,140; --c2: 52,178,92; }      /* OB混音 · 翠绿 */
.soul-biz-item:nth-child(12) { --c: 255,112,84;  --c2: 220,52,40; }      /* 应急技术救援 · 警示红 */
.soul-biz-item:nth-child(13) { --c: 138,178,255; --c2: 80,124,222; }     /* 技术培训 · 晴蓝 */
/* 设备调配强制的换行占位：占满整行宽度断行 */
.soul-biz-items .soul-biz-linebreak {
  flex-basis: 100%;
  height: 0;
}
/* 现场调音（第2项）：默认态更突出 */
.soul-biz-item:nth-child(2) {
  border-width: 1.5px;
  box-shadow: inset 0 0 22px rgba(var(--c), .22), 0 0 16px rgba(255,150,64,.25), 0 2px 10px rgba(0,0,0,.3);
}

/* ============ 首页 · 案例展示随机图片墙（仅 index.html #engineering） ============ */
.case-wall {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 900px) { .case-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .case-wall { grid-template-columns: 1fr; } }
.case-wall-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: #08080f;
  transition: all .35s;
}
.case-wall-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.case-wall-card img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
.case-wall-card .case-wall-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(5,5,10,.85));
}
.case-wall-more {
  display: flex; justify-content: center; margin-top: 40px;
}

/* ============ 首页产品卡「金顶条发光卡」：覆盖通用卡规则（仅 #products） ============ */
#products .prod-h {
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(214,183,94,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--bg);
  border: 1px solid var(--line);
}
#products .prod-h::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, #f4e2b0, var(--gold), var(--gold-d), transparent);
  opacity: .8;
}

/* 三卡按对应产品详情页主题色分类：金 / 蓝 / 绿 渐变 */
#products .prod-h { --tm: 240,202,124; }                 /* ShowOS 导演平台 · 金 */
#products .prod-h:nth-child(2) { --tm: 111,178,255; }     /* ShowOSControl · 蓝 */
#products .prod-h:nth-child(3) { --tm: 111,221,139; }     /* 定制配置包 · 绿 */
#products .prod-h {
  border-color: rgba(var(--tm), .45);
  background:
    radial-gradient(120% 110% at 50% -10%, rgba(var(--tm), .22), transparent 55%),
    linear-gradient(160deg, rgba(var(--tm), .12), rgba(var(--tm), .03) 46%, rgba(var(--tm), .08) 100%),
    linear-gradient(180deg, var(--panel), transparent 80%), var(--bg);
}
#products .prod-h::after {
  background: linear-gradient(90deg, transparent, rgb(var(--tm)), transparent);
}
#products .prod-h .ic-h {
  color: rgb(var(--tm));
  border-color: rgba(var(--tm), .45);
  background: linear-gradient(150deg, rgba(var(--tm), .2), rgba(var(--tm), .05));
  box-shadow: inset 0 0 18px rgba(var(--tm), .14);
}
#products .prod-h:hover .ic-h {
  background: linear-gradient(150deg, rgb(var(--tm)), rgba(var(--tm), .6));
  color: #08080d; border-color: transparent;
  box-shadow: 0 10px 30px rgba(var(--tm), .45);
}
#products .prod-h .t-h {
  border-color: rgba(var(--tm), .4); color: var(--soft);
  background: rgba(var(--tm), .08);
}
#products .prod-h:hover { border-color: rgba(var(--tm), .7); }
#products .prod-h .coming-h {
  color: rgb(var(--tm));
  border-color: rgba(var(--tm), .55);
  background: rgba(var(--tm), .1);
}
/* 去掉卡片图标 */
#products .prod-h .ic-h { display: none; }
/* 标题用对应主题色文字渐变特效 */
#products .prod-h h3 {
  color: transparent;
  background: linear-gradient(120deg, #fff 0%, rgb(var(--tm)) 45%, rgb(var(--tm)) 55%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 10s ease-in-out infinite alternate;
}
/* 标签缩小并强制单行（按内容适配，不换行） */
#products .prod-h .tags-h {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden;
}
#products .prod-h .t-h {
  padding: 3px 9px;
  font-size: 11px; letter-spacing: .3px; white-space: nowrap;
  border-radius: 30px;
}
/* 「了解详情」按钮更明显：实色渐变胶囊 + 箭头 */
#products .prod-h .link-h {
  display: inline-block; margin-top: 22px;
  padding: 9px 20px;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: #08080d; text-decoration: none;
  border: none; border-radius: 1000px;
  background: linear-gradient(135deg, rgb(var(--tm)), rgba(var(--tm), .6));
  box-shadow: 0 8px 24px rgba(var(--tm), .35);
  transition: all .3s;
}
#products .prod-h .link-h:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(var(--tm), .5);
  color: #08080d;
}
/* 单行标签实在放不下时允许第4个省略，绝不换行 */
#products .prod-h .t-h { text-overflow: ellipsis; max-width: 140px; }

/* 「案例展示」标题：套用案例展示页主题色(暖白金 #f4e4c1) 扫光渐变 + goldScanH，保留粗体 */
#engineering .sec-head-h h2 {
  font-weight: 800;
  background: linear-gradient(90deg, #fff 0%, #f4e4c1 30%, #fff 58%, #f4e4c1 84%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 12s ease-in-out infinite alternate;
}

/* 「我们的产品」标题：套用下载中心页面大字的特效（白 + 靛蓝(下载页主题色#7fa8ff) 扫光渐变 + goldScanH），保留原粗体 */
#products .sec-head-h h2 {
  font-weight: 800;
  background: linear-gradient(90deg, #fff 0%, #7fa8ff 30%, #fff 58%, #7fa8ff 84%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: goldScanH 12s ease-in-out infinite alternate;
}

/* ============ 购买/下载/案例页 · 主次分明 ============
 * 顶部保留大英雄主标题；内容区块标题降级为克制的中号章节标题，
 * 避免与顶部大标题“撞”。仅作用于三个页面（scoped），不影响首页。 */
body.theme-pricing .sec-head-h,
body.theme-downloads .sec-head-h {
  margin-bottom: 40px;
  padding-bottom: 18px;
}
body.theme-pricing .sec-head-h .idx-h,
body.theme-downloads .sec-head-h .idx-h,
body.theme-cases .case-zone-head .zh {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
}
body.theme-pricing .sec-head-h h2,
body.theme-downloads .sec-head-h h2,
body.theme-cases .case-zone-head h2 {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 0;
  color: #fff;
}
body.theme-pricing .sec-head-h .sub-h,
body.theme-downloads .sec-head-h .sub-h {
  font-size: 14px;
  white-space: normal;
}
body.theme-cases .case-zone-head {
  margin-bottom: 26px;
}

/* ============ 方案A · 去金线 / 去分段线 / 适中留白 + 极简短竖线 ============
 * 不叠加顶部金线；cases 去掉每个区段底部分隔线；用适中留白 +
 * 内容标题前的极简短金竖线做极简分区。 */
body.theme-pricing section.sect-h:first-of-type,
body.theme-downloads section.sect-h:first-of-type {
  padding-top: 56px;
}
body.theme-cases .case-zone:first-of-type {
  margin-top: 40px;
}
body.theme-cases .case-zone-head {
  border-bottom: none;
}
/* 内容小标题前：极简短金竖线（渐变 + 呼吸辉光 + 轻微舒展，高级动态） */
@keyframes goldVlinePulse {
  0%, 100% { transform: scaleY(.8); opacity: .72; box-shadow: 0 0 4px rgba(214,183,94,.35); }
  50%      { transform: scaleY(1.06); opacity: 1;  box-shadow: 0 0 10px rgba(214,183,94,.65); }
}
body.theme-pricing .sec-head-h h2::before,
body.theme-downloads .sec-head-h h2::before,
body.theme-cases .case-zone-head .zh::before {
  content: ""; display: inline-block; width: 3px; height: 1.2em;
  background: linear-gradient(180deg, rgba(255,255,255,.95), var(--gold) 32%, rgba(214,183,94,.15) 100%);
  border-radius: 2px; margin-right: 11px; vertical-align: -3px;
  transform-origin: center;
  animation: goldVlinePulse 5s ease-in-out infinite;
}
/* ===== 可见再渲染：扫光 animation 默认运行，_io-off 时暂停（由首页脚本控制，滚动离开视口即停） ===== */
._io-off{animation-play-state:paused!important}