/* ═══════════════════════════════════════════════
   样式设计风格主题覆盖 - Tencent Design System
   基于 TDesign 色彩体系 + 蓝品牌色
═══════════════════════════════════════════════ */
:root {
  /* ── 品牌色 ── */
  --accent-primary: #0052D9;
  --accent-secondary: #366EF4;
  --gradient-accent: linear-gradient(135deg, #0052D9 0%, #366EF4 50%, #00A870 100%);
  --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #0052D9 50%, #00A870 100%);

  /* ── 功能色（TDesign 规范） ── */
  --color-success: #00A870;
  --color-warning: #ED7B2F;
  --color-error: #E34D59;
  --color-processing: #0052D9;
  --color-idle: #4A5280;

  /* ── 背景（腾讯深蓝灰） ── */
  --bg-base: #06101D;
  --bg-card: #101927;
  --bg-card-hover: #162336;
  --bg-overlay: rgba(6, 16, 29, 0.94);
  --surface-card: linear-gradient(180deg, rgba(12, 20, 34, 0.90) 0%, rgba(8, 15, 27, 0.97) 100%);
  --surface-card-soft: linear-gradient(180deg, rgba(13, 22, 37, 0.76) 0%, rgba(9, 15, 27, 0.88) 100%);
  --surface-card-strong: linear-gradient(180deg, rgba(10, 18, 32, 0.94) 0%, rgba(8, 14, 26, 0.99) 100%);
  --surface-stroke: rgba(120, 150, 210, 0.18);
  --surface-stroke-strong: rgba(96, 165, 250, 0.26);

  /* ── 边框 ── */
  --border-default: rgba(45, 55, 75, 0.6);
  --border-subtle: rgba(45, 55, 75, 0.3);
  --border-strong: rgba(0, 82, 217, 0.5);

  /* ── 文字 ── */
  --text-primary: #E7ECF3;
  --text-secondary: #A3B1C6;
  --text-muted: #6C7A92;
  --text-code: #366EF4;

  /* ── 知识层颜色 ── */
  --knowledge-brand: #366EF4;
  --knowledge-rule: #E34D59;
  --knowledge-platform: #00A870;
  --knowledge-memory: #2BA471;
  --knowledge-trend: #ED7B2F;

  /* ── 架构层颜色 ── */
  --layer-ui: #0052D9;
  --layer-meta: #7C4DFF;
  --layer-biz: #ED7B2F;
  --layer-infra: #00A870;

  /* ── 阶段色板（腾讯/TDesign 延展色） ── */
  --phase-0: #0052D9;
  --phase-1: #366EF4;
  --phase-2: #00A870;
  --phase-3: #2BA471;
  --phase-4: #7C4DFF;
  --phase-5: #ED7B2F;
  --phase-6: #E34D59;
  --phase-7: #0594FA;
  --phase-8: #AB47BC;
  --phase-9: #5C6BC0;
}

/* ── 全局字体 ── */
body {
  font-family: var(--font-ui) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.10) 0%, transparent 20%),
    radial-gradient(circle at 78% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 16%),
    linear-gradient(180deg, #06101D 0%, #08131F 44%, #091119 100%) !important;
  background-attachment: fixed;
  color: var(--text-primary);
}

/* ── 导航栏 ── */
#global-nav {
  font-family: var(--font-text) !important;
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.96) 0%, rgba(8, 14, 26, 0.92) 100%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.10) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, 0.20) !important;
}

.nav-brand .brand-logo {
  background: var(--brand-logo-surface) !important;
  border-color: var(--brand-logo-border) !important;
  box-shadow: var(--brand-logo-shadow) !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
}

.nav-btn.active {
  color: #0052D9 !important;
  border-color: #0052D9 !important;
  background: rgba(0, 82, 217, 0.08) !important;
}

.nav-btn:hover {
  color: #2B7DE9 !important;
  background: rgba(0, 82, 217, 0.06) !important;
}

/* ── Hero 区域 ── */
.hero-section h1 {
  background: linear-gradient(135deg, #E8EAED 0%, #0052D9 50%, #00C853 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.btn-primary-lg {
  background: linear-gradient(135deg, #0052D9, #2B7DE9) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0, 82, 217, 0.3) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.btn-primary-lg:hover {
  box-shadow: 0 6px 24px rgba(0, 82, 217, 0.45) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  border: 1px solid rgba(0, 82, 217, 0.4) !important;
  color: #2B7DE9 !important;
  border-radius: 8px !important;
}

/* ── KPI 卡片 ── */
.kpi-card {
  border: 1px solid rgba(96, 165, 250, 0.12) !important;
  background: var(--surface-card-soft) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.28), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}

.kpi-value {
  color: #0052D9 !important;
}

/* ── 痛点卡片 ── */
.pain-card {
  border: 1px solid var(--surface-stroke) !important;
  background: var(--surface-card) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(2, 8, 23, 0.30), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.pain-card:hover {
  border-color: rgba(0, 82, 217, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 82, 217, 0.12) !important;
}

/* ── 护城河卡片 ── */
.moat-card {
  border: 1px solid var(--surface-stroke) !important;
  background: var(--surface-card) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(2, 8, 23, 0.30), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.moat-card:hover {
  border-color: rgba(0, 200, 83, 0.3) !important;
}

.moat-tag {
  background: rgba(0, 82, 217, 0.12) !important;
  color: #2B7DE9 !important;
  border-radius: 6px !important;
}

/* ── 阶段卡片 ── */
.phase-item {
  border: 1px solid var(--surface-stroke) !important;
  background: var(--surface-card-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 38px rgba(2, 8, 23, 0.24), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.phase-item:hover {
  border-color: var(--pc, #0052D9) !important;
  box-shadow: 0 4px 20px rgba(0, 82, 217, 0.15) !important;
}

/* ── Dashboard 卡片 ── */
.hero-dashboard-card {
  background: var(--surface-card-strong) !important;
  border: 1px solid var(--surface-stroke-strong) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.50), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 32px rgba(59, 130, 246, 0.08) !important;
}

/* ── ROI 区域 ── */
.roi-m-val.good {
  color: #00C853 !important;
}

.roi-m-val.bad {
  color: #E34D59 !important;
}

/* ── 驾驶舱 ── */
.ov2-header {
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.96) 0%, rgba(8, 14, 26, 0.88) 100%) !important;
  border-bottom: 1px solid rgba(96, 165, 250, 0.14) !important;
  box-shadow: 0 12px 32px rgba(2, 8, 23, 0.28) !important;
}

.ov2-panel {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-stroke) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 48px rgba(2, 8, 23, 0.34), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.ov2-mid-card {
  background: var(--surface-card-strong) !important;
  border: 1px solid var(--surface-stroke) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 46px rgba(2, 8, 23, 0.32), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.ov2-live-badge {
  color: #00C853 !important;
}

/* ── 背景光效 ── */
#bg-glow {
  background:
    radial-gradient(ellipse at 50% 14%, rgba(59, 130, 246, 0.08) 0%, transparent 28%),
    linear-gradient(112deg, transparent 0%, transparent 42%, rgba(96, 165, 250, 0.03) 42.4%, rgba(96, 165, 250, 0.03) 42.8%, transparent 43.2%, transparent 100%) !important;
}

#bg-grid {
  opacity: 0.18 !important;
  mix-blend-mode: normal;
}

#bg-nebula {
  background:
    radial-gradient(ellipse at 20% 14%, rgba(37, 99, 235, 0.08) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 78%, rgba(16, 185, 129, 0.04) 0%, transparent 24%) !important;
}

#cmd-overlay,
#demo-mode-picker {
  background: rgba(6, 12, 22, 0.56) !important;
  backdrop-filter: blur(10px) !important;
}

#demo-controls,
#cmd-panel,
#activity-panel,
#waterfall-overlay,
#auto-demo-bar,
.demo-picker-panel {
  font-family: var(--font-text) !important;
  background: var(--surface-card-strong) !important;
  border: 1px solid var(--surface-stroke) !important;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.36) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}

#demo-controls,
#cmd-panel,
#waterfall-overlay,
#auto-demo-bar,
.demo-picker-panel {
  border-radius: 18px !important;
}

.demo-step-label,
#tts-progress-text,
#tts-speed-label,
.tts-phase-info span,
.wf-skill,
.wf-bar,
.brand-version,
kbd {
  font-family: var(--font-mono) !important;
}

/* ── 状态指示 ── */
.status-dot.green {
  background: #00C853 !important;
  box-shadow: 0 0 6px #00C853 !important;
}

.ov2-sdot--green {
  background: #00C853 !important;
}

.ov2-stag--green {
  color: #00C853 !important;
  background: rgba(0, 200, 83, 0.1) !important;
}

.ov2-sdot--yellow {
  background: #FF9800 !important;
}

.ov2-stag--yellow {
  color: #FF9800 !important;
  background: rgba(255, 152, 0, 0.1) !important;
}

/* ── 进度条 ── */
.ov2-perf-bar {
  border-radius: 3px !important;
}

/* ── 品牌信任墙 ── */
.logo-wall {
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.76) 0%, rgba(8, 14, 26, 0.42) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.10) !important;
  border-radius: 24px !important;
  position: relative;
  overflow: hidden;
}

.logo-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(96, 165, 250, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 22%);
  pointer-events: none;
}

.logo-wall-img-wrap {
  background: linear-gradient(180deg, rgba(8, 15, 27, 0.82) 0%, rgba(6, 12, 22, 0.95) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 20px 54px rgba(2, 8, 23, 0.40) !important;
}

.logo-wall-title {
  color: var(--text-secondary) !important;
}

/* ── 滚动条 ── */
::-webkit-scrollbar-thumb {
  background: rgba(0, 82, 217, 0.3) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 82, 217, 0.5) !important;
}

/* ── 阶段详情页 ── */
.phase-header {
  background: rgba(13, 17, 23, 0.95) !important;
  border-bottom: 1px solid rgba(0, 82, 217, 0.12) !important;
}

.back-btn {
  color: #2B7DE9 !important;
}

.back-btn:hover {
  background: rgba(0, 82, 217, 0.08) !important;
}

/* ── 时间轴 ── */
.tl-step.state-active .tl-dot {
  background: #0052D9 !important;
  box-shadow: 0 0 8px rgba(0, 82, 217, 0.5) !important;
}

.tl-step.state-completed .tl-dot {
  background: #00C853 !important;
}

/* ── 命令面板 ── */
#cmd-panel {
  background: rgba(22, 27, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 12px !important;
}

#cmd-input {
  background: rgba(13, 17, 23, 0.8) !important;
  border: 1px solid rgba(48, 54, 61, 0.6) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.cmd-item:hover {
  background: rgba(0, 82, 217, 0.1) !important;
}

/* ── Landing badge ── */
.landing-badge {
  background: rgba(0, 82, 217, 0.1) !important;
  border: 1px solid rgba(0, 82, 217, 0.25) !important;
  color: #2B7DE9 !important;
  border-radius: 20px !important;
}

/* ── Section headers ── */
.section-header h2 {
  color: var(--text-primary) !important;
}

.section-summary {
  color: var(--text-muted) !important;
}

/* ── 架构卡片 ── */
.arch-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--surface-stroke) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(2, 8, 23, 0.30), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.arch-card:hover {
  border-color: rgba(96, 165, 250, 0.24) !important;
  box-shadow: 0 24px 56px rgba(2, 8, 23, 0.34), 0 0 0 1px rgba(96, 165, 250, 0.08) inset !important;
}

/* ── 粒子颜色 ── */
.bg-particle {
  box-shadow: 0 0 6px #0052D9 !important;
}

/* ── Nebula 光效 ── */
#bg-nebula {
  background:
    radial-gradient(ellipse at 14% 18%, rgba(37, 99, 235, 0.12) 0%, transparent 44%),
    radial-gradient(ellipse at 82% 22%, rgba(56, 189, 248, 0.08) 0%, transparent 34%),
    radial-gradient(ellipse at 84% 72%, rgba(167, 139, 250, 0.06) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 102%, rgba(16, 185, 129, 0.07) 0%, transparent 40%) !important;
}

/* ── ROI 比较区 ── */
.roi-col.after {
  border-color: rgba(0, 82, 217, 0.3) !important;
}

.roi-kpi-val {
  font-weight: 700 !important;
}

.roi-col-title {
  color: var(--text-secondary) !important;
}

/* ── Hero subtitle ── */
.hero-subtitle {
  color: var(--text-secondary) !important;
}

/* ── 痛点方案覆盖 ── */
.pain-solution-overlay {
  background: rgba(0, 82, 217, 0.95) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

.pain-solution {
  color: #0052D9 !important;
}

/* ── 飞轮中心 ── */
.ov2-fw-caption {
  color: var(--text-muted) !important;
}

.ov2-fw-dot {
  background: #00A870 !important;
  box-shadow: 0 0 6px rgba(0, 168, 112, 0.6) !important;
}

/* ── 左面板 ROI ── */
.ov2-roi-tag {
  font-weight: 600 !important;
}

/* ── 品牌版本号 ── */
.brand-version {
  color: #0052D9 !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

/* ── 导航状态 ── */
.nav-status {
  color: var(--text-secondary) !important;
}

/* ── 阶段进度流线 ── */
.phases-flow-line {
  background: linear-gradient(90deg, #0052D9, #00A870) !important;
}

.phases-flow-dot {
  background: #0052D9 !important;
  box-shadow: 0 0 8px rgba(0, 82, 217, 0.6) !important;
}

/* ── 底部阶段条 ── */
.ov2-phases-label {
  color: var(--text-muted) !important;
}

/* ── 入口卡片 ── */
.ov2-entry:hover {
  background: rgba(0, 82, 217, 0.08) !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

.ov2-entry-arr {
  color: #0052D9 !important;
}

/* ── 分割线 ── */
.ov2-divider {
  border-color: rgba(45, 55, 75, 0.4) !important;
}

/* ── dash 仪表板 ── */
.dash-header {
  border-bottom: 1px solid rgba(0, 82, 217, 0.1) !important;
}

.dash-dot {
  background: #00A870 !important;
  box-shadow: 0 0 4px rgba(0, 168, 112, 0.6) !important;
}

.dash-version {
  color: #0052D9 !important;
}

.dash-act-dot.green {
  background: #00A870 !important;
}

.dash-act-dot.blue {
  background: #0052D9 !important;
}

/* ── 最终 CTA ── */
.final-cta h2 {
  color: var(--text-primary) !important;
}

.final-cta p {
  color: var(--text-secondary) !important;
}

/* ── auth gate 登录页 ── */
.auth-gate-panel {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 16px !important;
}

.auth-gate-btn {
  background: linear-gradient(135deg, #0052D9, #366EF4) !important;
  border: none !important;
  border-radius: 8px !important;
}

/* ── 全局选中色 ── */
::selection {
  background: rgba(0, 82, 217, 0.3) !important;
  color: #fff !important;
}

/* ── 活动面板 ── */
#activity-panel {
  background: rgba(20, 24, 34, 0.95) !important;
  border: 1px solid rgba(45, 55, 75, 0.5) !important;
  border-radius: 12px !important;
}

/* ── Toast 通知 ── */
.toast {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.2) !important;
  border-radius: 8px !important;
}

/* ── 自动演示控制条 ── */
#auto-demo-bar {
  background: rgba(11, 14, 21, 0.96) !important;
  border-top: 1px solid rgba(0, 82, 217, 0.15) !important;
}

.tts-btn.primary {
  background: #0052D9 !important;
  color: #fff !important;
}

/* ── 管线瀑布图 ── */
#waterfall-overlay {
  background: rgba(20, 24, 34, 0.98) !important;
  border: 1px solid rgba(0, 82, 217, 0.15) !important;
  border-radius: 12px !important;
}

/* ═══════════════════════════════════════════════
   腾讯布局体系 - 间距/圆角/图标/排版
═══════════════════════════════════════════════ */

/* ── 全局圆角统一（TDesign 标准 8/12/16） ── */
.kpi-card, .pain-card, .moat-card, .arch-card,
.ov2-panel, .ov2-mid-card, .phase-item {
  border-radius: 12px !important;
}

.btn-primary-lg, .btn-secondary, .nav-btn,
.landing-badge, .moat-tag {
  border-radius: 8px !important;
}

.hero-dashboard-card, #cmd-panel, .auth-gate-panel {
  border-radius: 16px !important;
}

/* ── 间距加大（腾讯宽松风格） ── */
.pain-grid {
  gap: 24px !important;
}

.moat-grid {
  gap: 24px !important;
}

.phases-grid {
  gap: 16px !important;
}

.arch-grid {
  gap: 24px !important;
}

.hero-kpi-row {
  gap: 20px !important;
}

/* ── 卡片内边距加大 ── */
.pain-card, .moat-card, .arch-card {
  padding: 28px 24px !important;
}

.kpi-card {
  padding: 20px 16px !important;
}

.phase-item {
  padding: 20px 16px !important;
}

/* ── 图标风格：腾讯简洁线性风 ── */
.pain-icon, .moat-icon, .arch-icon {
  font-size: 32px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(0, 82, 217, 0.08) !important;
}

.moat-icon {
  background: rgba(0, 168, 112, 0.08) !important;
}

.arch-icon {
  background: rgba(54, 110, 244, 0.08) !important;
}

/* ── 导航图标按钮 ── */
.nav-icon-btn {
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  border: 1px solid rgba(45, 55, 75, 0.5) !important;
  background: rgba(20, 24, 34, 0.6) !important;
}

.nav-icon-btn:hover {
  background: rgba(0, 82, 217, 0.1) !important;
  border-color: rgba(0, 82, 217, 0.3) !important;
}

/* ── 导航按钮布局 ── */
.nav-btn {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

/* ── Hero 布局宽松 ── */
.hero-section {
  padding: 120px 60px 80px !important;
  gap: 60px !important;
}

.hero-section h1 {
  font-size: 3.2rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
}

.hero-subtitle {
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin-top: 16px !important;
}

/* ── Section 间距 ── */
.pain-section, .power-section, .moat-section,
.roi-section, .arch-section {
  padding: 80px 60px !important;
}

.section-header {
  margin-bottom: 48px !important;
}

.section-header h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}

/* ── 卡片标题与描述 ── */
.pain-title, .moat-title, .arch-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  color: var(--text-primary) !important;
}

.pain-text, .moat-text, .arch-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
}

/* ── 阶段编号 ── */
.phase-num {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.phase-name {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.phase-desc {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}

/* ── 驾驶舱布局 ── */
.ov2-panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  margin-bottom: 12px !important;
}

.ov2-mid-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── 入口卡片布局 ── */
.ov2-entry {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  gap: 12px !important;
}

.ov2-entry-ico {
  font-size: 22px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 82, 217, 0.06) !important;
  border-radius: 10px !important;
}

.ov2-entry-name {
  font-size: 14px !important;
  font-weight: 500 !important;
}

.ov2-entry-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* ── KPI 数值样式 ── */
.kpi-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

.kpi-label {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.kpi-detail {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}

/* ── 按钮间距 ── */
.hero-cta-group {
  gap: 16px !important;
  margin-top: 32px !important;
}

.btn-primary-lg {
  padding: 14px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.btn-secondary {
  padding: 14px 28px !important;
  font-size: 14px !important;
}

/* ── Logo 墙布局 ── */
.logo-grid {
  gap: 24px 32px !important;
}

.logo-item {
  padding: 12px 16px !important;
}

/* ── 时间轴布局 ── */
.tl-step {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}

.tl-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

.tl-step-name {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* ── 步进控制器 ── */
#step-controller {
  border-radius: 10px !important;
  gap: 12px !important;
}

#step-controller button {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* ── 全局阴影统一 ── */
.hero-dashboard-card {
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.50), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 32px rgba(59, 130, 246, 0.08) !important;
}

.ov2-panel {
  box-shadow: 0 20px 48px rgba(2, 8, 23, 0.34), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.ov2-mid-card {
  box-shadow: 0 20px 46px rgba(2, 8, 23, 0.32), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

#cmd-panel {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
              0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ── 返回顶部按钮 ── */
.back-to-top {
  border-radius: 10px !important;
  background: rgba(0, 82, 217, 0.9) !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.3) !important;
}

/* ── 品牌信任墙标题 ── */
.logo-wall-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── 最终 CTA 布局 ── */
.final-cta {
  padding: 80px 60px !important;
  text-align: center !important;
}

.final-cta h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.final-cta p {
  font-size: 16px !important;
  margin-bottom: 32px !important;
}

/* ── Final cascade cleanup：背景/浮层/字体统一收口 ── */
#bg-nebula {
  background:
    radial-gradient(ellipse at 18% 16%, rgba(37, 99, 235, 0.08) 0%, transparent 32%),
    radial-gradient(ellipse at 78% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 24%) !important;
}

#demo-controls,
#cmd-panel,
#waterfall-overlay,
#auto-demo-bar,
.demo-picker-panel {
  background: var(--surface-card-strong) !important;
  border: 1px solid var(--surface-stroke) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.36) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}

#activity-panel {
  background: var(--surface-card-strong) !important;
  border-top: 1px solid var(--surface-stroke) !important;
  border-left: 1px solid var(--surface-stroke) !important;
  border-bottom: 1px solid var(--surface-stroke) !important;
  border-right: none !important;
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: -20px 0 48px rgba(2, 8, 23, 0.30) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}