/* ============================================================
   VertGrow 官网视觉增强层  v1.0
   作用：统一设计语言、提升质感与层次，不改结构、不改文案
   加载：置于 </head> 前，所有规则带 html body 前缀以压过 Tailwind 生成样式
   ============================================================ */

:root {
  /* 品牌 */
  --vg-orange: #FF7F24;
  --vg-orange-d: #E86A12;
  --vg-orange-l: #FFA45C;
  --vg-navy: #0F4C81;
  --vg-navy-d: #0B3861;
  --vg-navy-l: #1A629E;

  /* 中性 */
  --vg-ink: #111827;
  --vg-body: #475569;
  --vg-mute: #667085;
  --vg-line: #E8EDF4;
  --vg-line-2: #F1F5F9;
  --vg-canvas: #F6F8FC;

  /* 圆角 */
  --vg-r-1: 14px;
  --vg-r-2: 20px;
  --vg-r-3: 26px;
  --vg-r-4: 34px;

  /* 阴影（三层柔光，替代 Tailwind 生硬单层阴影） */
  --vg-sh-1: 0 1px 2px rgba(15, 32, 56, .05);
  --vg-sh-2: 0 1px 2px rgba(15, 32, 56, .04), 0 6px 16px -6px rgba(15, 76, 129, .13);
  --vg-sh-3: 0 2px 6px rgba(15, 32, 56, .04), 0 18px 38px -16px rgba(15, 76, 129, .21);
  --vg-sh-4: 0 8px 16px rgba(15, 32, 56, .05), 0 34px 64px -24px rgba(15, 76, 129, .30);
  --vg-sh-brand: 0 3px 8px -2px rgba(180, 75, 0, .28), 0 12px 26px -10px rgba(180, 75, 0, .42);
  --vg-sh-brand-h: 0 5px 14px -2px rgba(180, 75, 0, .32), 0 20px 38px -12px rgba(180, 75, 0, .48);
  --vg-sh-navy: 0 3px 8px -2px rgba(15, 76, 129, .24), 0 14px 30px -12px rgba(15, 76, 129, .44);

  /* 渐变 */
  --vg-grad-brand: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%);
  --vg-grad-navy: linear-gradient(150deg, #1A629E 0%, #0F4C81 52%, #0A3355 100%);

  /* 动效 */
  --vg-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. 全局底噪 ---------- */

html { -webkit-text-size-adjust: 100%; }

html body {
  background-color: var(--vg-canvas);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--vg-body);
}

html body ::selection { background: rgba(255, 127, 36, .24); color: #1A1207; }

@supports (scrollbar-width: thin) {
  html { scrollbar-width: thin; scrollbar-color: #C6D2E2 transparent; }
}

html body .bg-bg-gray { background-color: var(--vg-canvas); }

/* ---------- 2. 文字对比度修复（无障碍 AA） ---------- */

html body .bg-white .text-gray-400,
html body .bg-bg-gray .text-gray-400,
html body .bg-\[\#F8FAFC\] .text-gray-400,
html body .bg-\[\#F5F5F5\] .text-gray-400,
html body .bg-gray-50 .text-gray-400,
html body .bg-slate-50 .text-gray-400 {
  color: #667085;
}
html body .bg-white .text-gray-500,
html body .bg-bg-gray .text-gray-500 {
  color: #5B6779;
}

html body h1,
html body h2,
html body h3 { text-wrap: balance; }
html body p { text-wrap: pretty; }
html body h1 { letter-spacing: -.028em; }
html body h2 { letter-spacing: -.022em; }

/* ---------- 3. 卡片系统 ---------- */

html body .rounded-xl.border,
html body .rounded-2xl.border,
html body .rounded-3xl.border,
html body .rounded-\[24px\].border,
html body .rounded-\[28px\].border,
html body .rounded-\[32px\].border {
  border-color: var(--vg-line);
}

html body .bg-white.rounded-2xl,
html body .bg-white.rounded-3xl,
html body .bg-white.rounded-xl {
  transition: box-shadow .38s var(--vg-ease), transform .38s var(--vg-ease), border-color .38s var(--vg-ease);
}

/* 三层柔光整体替代单层硬阴影 */
html body .shadow-sm { box-shadow: var(--vg-sh-1); }
html body .bg-white.border.shadow-sm { box-shadow: var(--vg-sh-2); }
html body .shadow-md { box-shadow: var(--vg-sh-2); }
html body .shadow-lg { box-shadow: var(--vg-sh-3); }
html body .shadow-xl,
html body .shadow-2xl { box-shadow: var(--vg-sh-4); }

/* 可点击卡片：上浮 + 描边点亮 */
@media (hover: hover) {
  html body a.bg-white.border:hover,
  html body a.bg-white.border.shadow-sm:hover,
  html body a.bg-white.border.shadow-md:hover {
    transform: translateY(-3px);
    box-shadow: var(--vg-sh-3);
    border-color: rgba(255, 127, 36, .38);
  }
  html body .group:hover .group-hover\:shadow-xl { box-shadow: var(--vg-sh-4); }
}

/* 深色底上的半透明卡片，统一边框与内发光 */
html body [class~="bg-white/5"],
html body [class~="bg-white/10"] {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- 4. 按钮系统 ---------- */

html body a[class~="bg-brand"],
html body button[class~="bg-brand"],
html body a[class~="bg-[#FF7F24]"],
html body button[class~="bg-[#FF7F24]"],
html body a[class~="bg-[#FF8A3D]"] {
  background-image: var(--vg-grad-brand);
  box-shadow: var(--vg-sh-brand);
  transition: transform .26s var(--vg-ease), box-shadow .26s var(--vg-ease), filter .26s var(--vg-ease);
}

html body a[class~="bg-[#0F4C81]"],
html body button[class~="bg-[#0F4C81]"],
html body a[class~="bg-[#0b3861]"] {
  background-image: var(--vg-grad-navy);
  box-shadow: var(--vg-sh-navy);
  transition: transform .26s var(--vg-ease), box-shadow .26s var(--vg-ease), filter .26s var(--vg-ease);
}

@media (hover: hover) {
  html body a[class~="bg-brand"]:hover,
  html body button[class~="bg-brand"]:hover,
  html body a[class~="bg-[#FF7F24]"]:hover,
  html body button[class~="bg-[#FF7F24]"]:hover,
  html body a[class~="bg-[#0F4C81]"]:hover,
  html body button[class~="bg-[#0F4C81]"]:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
  }
  html body a[class~="bg-brand"]:hover,
  html body a[class~="bg-[#FF7F24]"]:hover { box-shadow: var(--vg-sh-brand-h); }
}

html body a[class~="bg-brand"]:active,
html body button[class~="bg-brand"]:active,
html body a[class~="bg-[#FF7F24]"]:active,
html body button[class~="bg-[#FF7F24]"]:active,
html body a[class~="bg-[#0F4C81]"]:active,
html body button[class~="bg-[#0F4C81]"]:active { transform: translateY(0); }

/* 描边按钮 */
html body a.border-2,
html body button.border-2 {
  transition: transform .26s var(--vg-ease), box-shadow .26s var(--vg-ease), background-color .26s var(--vg-ease), color .26s var(--vg-ease);
}
@media (hover: hover) {
  html body a.border-2:hover,
  html body button.border-2:hover {
    transform: translateY(-2px);
    box-shadow: var(--vg-sh-2);
  }
}

/* ---------- 5. 导航栏 ---------- */

html body nav.sticky,
html body nav[class*="sticky"] {
  transition: box-shadow .34s var(--vg-ease), background-color .34s var(--vg-ease);
  border-bottom-color: rgba(15, 76, 129, .08);
}
html body nav.vg-scrolled {
  background-color: rgba(255, 255, 255, .93);
  box-shadow: 0 1px 0 rgba(15, 32, 56, .05), 0 10px 26px -14px rgba(15, 32, 56, .22);
}

/* ---------- 6. 首屏装饰（网格 + 光晕） ---------- */

html body .vg-page-hero { position: relative; isolation: isolate; }

html body .vg-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 400px at 50% -6%, rgba(255, 127, 36, .13), transparent 68%),
    radial-gradient(720px 360px at 8% 6%, rgba(15, 76, 129, .075), transparent 70%),
    radial-gradient(720px 360px at 94% 4%, rgba(15, 76, 129, .06), transparent 70%);
}

html body .vg-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 76, 129, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 76, 129, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 70%);
  opacity: .85;
}

html body .vg-page-hero.vg-hero-dark::before {
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(255, 255, 255, .13), transparent 66%),
    radial-gradient(700px 340px at 90% 10%, rgba(255, 164, 92, .16), transparent 70%);
}
html body .vg-page-hero.vg-hero-dark::after { opacity: .28; }

/* ---------- 7. 深色区块层次 ---------- */

html body [class~="bg-[#0B2B55]"],
html body [class~="bg-[#0b2447]"],
html body [class~="bg-[#15598E]"],
html body [class~="bg-[#0F4C81]"] {
  background-image:
    radial-gradient(1000px 460px at 50% 0%, rgba(255, 255, 255, .10), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, .045), transparent 42%);
}

html body [class~="bg-[#0B2B55]"] { background-color: #0C2C57; }
html body [class~="bg-[#15598E]"] { background-color: #14568A; }

/* ---------- 8. 页脚 ---------- */

html body footer[class~="bg-[#0b2447]"],
html body footer[class~="bg-[#0B2B55]"] {
  background-image: linear-gradient(180deg, #0E2B52 0%, #0A2143 100%);
  position: relative;
}
html body footer[class~="bg-[#0b2447]"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 127, 36, .55), rgba(255, 164, 92, .30), transparent);
}
html body footer img[src*="kefu"],
html body footer img[src*="fuwuhao"],
html body footer img[src*="yingxiaozhinengti"] {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .3s var(--vg-ease), border-color .3s var(--vg-ease);
}
@media (hover: hover) {
  html body footer img[src*="kefu"]:hover,
  html body footer img[src*="fuwuhao"]:hover { transform: translateY(-3px); border-color: rgba(255, 127, 36, .5); }
}

/* ---------- 9. 媒体与图标 ---------- */

html body video {
  border-radius: var(--vg-r-3);
  box-shadow: var(--vg-sh-4);
  outline: 1px solid rgba(15, 76, 129, .10);
  outline-offset: 0;
}
html body img { border-radius: inherit; }

/* 圆形图标底座内的 lucide 图标统一描边 */
html body [class*="rounded-full"] > svg[class*="lucide"] { stroke-width: 2.1; }

/* ---------- 10. 滚动入场 ---------- */

.vg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .68s var(--vg-ease), transform .68s var(--vg-ease);
  will-change: opacity, transform;
}
.vg-reveal.vg-in { opacity: 1; transform: none; }

/* ---------- 11. 焦点与动效可访问性 ---------- */

html body a:focus-visible,
html body button:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible,
html body input:focus-visible {
  outline: 3px solid rgba(255, 127, 36, .55);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .vg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html body a,
  html body button,
  html body .bg-white.rounded-2xl,
  html body .bg-white.rounded-3xl { transition: none !important; }
  html body a:hover,
  html body button:hover { transform: none !important; }
}

/* ---------- 12. 响应式微调 ---------- */

@media (max-width: 640px) {
  html body .text-xs { font-size: .8125rem; line-height: 1.55; }
  html body .text-\[11px\],
  html body .text-\[10px\] { font-size: .75rem; line-height: 1.5; }
  html body video { border-radius: var(--vg-r-2); }
  html body .vg-page-hero::after { background-size: 40px 40px; opacity: .6; }
  html body h1 { letter-spacing: -.02em; }
}

@media (min-width: 1536px) {
  html body .vg-page-hero::after { background-size: 64px 64px; }
}

/* ============================================================
   13. 关键区块专属增强（首页 / 内页共用）
   ============================================================ */

/* ---- 首屏数据指标条 ---- */
html body .vg-stats { gap: 14px; }

html body .vg-stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--vg-r-2);
  border-color: var(--vg-line);
  background-color: #fff;
  background-image: none;
  box-shadow: var(--vg-sh-2);
  padding-top: 28px;
  transition: transform .34s var(--vg-ease), box-shadow .34s var(--vg-ease);
}

html body .vg-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--vg-grad-brand);
  opacity: .92;
}
html body .vg-stat:nth-child(even)::before { background: var(--vg-grad-navy); }

html body .vg-stat > p:first-child {
  color: #667085;
  letter-spacing: .015em;
}

/* 数字与单位基线对齐 —— 原版上下错位 */
html body .vg-stat > p:last-child {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
html body .vg-stat > p:last-child > span {
  font-size: clamp(1.95rem, 3.5vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.04em;
}

@media (hover: hover) {
  html body .vg-stat:hover { transform: translateY(-4px); box-shadow: var(--vg-sh-3); }
}

/* ---- 主视频：演示窗口感 ---- */
html body .vg-video-frame {
  border-radius: var(--vg-r-3);
  background-color: #0A1826;
  box-shadow:
    var(--vg-sh-4),
    0 0 0 1px rgba(15, 76, 129, .12),
    0 0 90px -22px rgba(15, 76, 129, .34);
}

html body .vg-hero-home { padding-bottom: 4rem; }

/* ---- 顶部粗线条卡片：统一圆角与层次 ---- */
html body article[class*="border-t-[4px]"],
html body div[class*="border-t-[4px]"] {
  border-radius: var(--vg-r-2);
  box-shadow: var(--vg-sh-2);
  border-top-width: 4px;
  transition: transform .34s var(--vg-ease), box-shadow .34s var(--vg-ease);
}
@media (hover: hover) {
  html body article[class*="border-t-[4px]"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--vg-sh-3);
  }
}

/* ---- 橙色描边强调卡：仅限浅色底卡片，避免深色底白字失读 ---- */
html body [class~="border-[#FF7F24]"][class*="border-2"][class~="bg-[#FFFDFB]"],
html body [class~="border-[#FF7F24]"][class*="border-2"][class~="bg-white"],
html body [class~="border-brand"][class*="border-2"][class~="bg-white"] {
  border-color: rgba(255, 127, 36, .40);
  background-image: linear-gradient(180deg, #FFF9F4 0%, #FFFFFF 58%);
  box-shadow: var(--vg-sh-2);
}

/* ---- 深色区块内的半透明卡片：只统一圆角，不改边框与背景 ---- */
html body [class*="bg-white/[0.055]"],
html body [class*="bg-white/[0.06]"] {
  border-radius: var(--vg-r-2);
}

/* ---- 价格对比卡 ---- */
html body .rounded-3xl.shadow-2xl,
html body [class*="shadow-[0_16px_30px"] {
  box-shadow: var(--vg-sh-3);
}

/* ---- 折叠问答（FAQ） ---- */
html body summary {
  cursor: pointer;
  transition: color .24s var(--vg-ease);
}
html body details {
  border-radius: var(--vg-r-2);
  transition: box-shadow .3s var(--vg-ease), border-color .3s var(--vg-ease);
}
@media (hover: hover) {
  html body details:hover {
    border-color: rgba(255, 127, 36, .32);
    box-shadow: var(--vg-sh-2);
  }
}

/* ---- 内页 hero 区域留白节奏 ---- */
html body .vg-page-hero.vg-hero-dark { color: #fff; }

/* ============================================================
   14. 文字对比度达标修复（WCAG 2.1 AA）
   正文 ≥4.5:1；≥24px 或 ≥18.66px/700 大字 ≥3:1
   注：底色含浅灰/浅蓝/浅橙，故按最差底色取值
   ============================================================ */

/* ---- 灰色正文：原 #9CA3AF 仅 2.54:1 ---- */
html body .text-gray-400 { color: #667085; }        /* 白底 4.97 / 浅灰底 4.68 */

/* ---- 橙色文字（浅底正文档）：原 #FF7F24 仅 2.53:1 ---- */
html body .text-brand,
html body .text-brand-accent,
html body [class~="text-[#FF7F24]"],
html body [class~="text-[#FF8A3D]"],
html body [class~="text-[#FF6B1A]"],
html body [class~="text-[#FF6F1E]"] {
  color: #B04E00;                                    /* 白底 4.88 / 浅灰 4.60 */
}

/* ---- 大字号标题：放宽至 3:1，保留品牌橙的鲜亮 ---- */
html body :is(h1, h2, h3) .text-brand,
html body :is(h1, h2, h3) .text-brand-accent,
html body :is(h1, h2, h3) [class~="text-[#FF7F24]"],
html body :is(h1, h2, h3)[class*="text-brand"],
html body [class*="text-4xl"] .text-brand,
html body [class*="text-4xl"][class*="text-brand"],
html body [class*="text-5xl"] .text-brand,
html body [class*="text-5xl"][class*="text-brand"],
html body [class*="text-6xl"] .text-brand,
html body [class*="text-6xl"][class*="text-brand"] {
  color: #D9610A;                                    /* 白底 3.71 / 浅灰 3.50 */
}

/* ---- 浅色底上同元素承载橙字（徽标类） ---- */
html body [class~="bg-orange-50"][class*="text-brand"],
html body [class~="bg-orange-50"][class~="text-[#FF7F24]"],
html body [class~="bg-blue-50"][class*="text-brand"],
html body [class~="bg-\[\#FFF7ED\]"][class*="text-brand"],
html body [class~="bg-\[\#FFFDFB\]"][class*="text-brand"] {
  color: #A64B00;                                    /* 浅橙底 5.45 / 浅蓝底 6.1 */
}

/* ---- 深色页脚 / 深蓝区块内的灰字：原 gray-500 仅 3.25:1 ---- */
html body footer [class~="text-gray-300"],
html body footer [class~="text-gray-400"],
html body footer [class~="text-gray-500"],
html body footer [class~="text-gray-600"],
html body footer [class~="text-gray-700"],
html body [class~="bg-[#0b2447]"] [class~="text-gray-400"],
html body [class~="bg-[#0b2447]"] [class~="text-gray-500"],
html body [class~="bg-[#0b2447]"] [class~="text-gray-600"] {
  color: rgba(255, 255, 255, .74);                   /* 8.6:1 */
}

/* ---- 主 CTA 按钮：白字原 2.53:1，配深橙渐变提升至 3.7–4.5:1 ---- */
html body [class~="bg-[#FF7F24]"],
html body [class~="bg-brand"],
html body [class~="bg-brand-accent"] {
  background-color: #D9610A;
  background-image: linear-gradient(135deg, #EE6A0F 0%, #C2570A 100%);
}
html body [class~="bg-[#FF8A3D]"],
html body [class~="bg-[#FF6B1A]"] {
  background-color: #DE5E08;
  background-image: linear-gradient(135deg, #EE6A0F 0%, #CE5C08 100%);
}
/* 深色按钮底上的白字同样加对比保护 */
html body [class~="bg-[#0F4C81]"],
html body [class~="bg-[#0b3861]"] { background-color: #0F4C81; }

/* ---- 语义警示色 ---- */
html body [class~="text-[#FF4D4F]"],
html body [class~="text-red-400"] { color: #C42216; }   /* 原 2.77:1 */
html body [class~="text-red-600"] { color: #B42318; }   /* 浅红底上更稳 */

/* ---- 表头与徽标内的浅灰 ---- */
html body thead [class~="text-gray-400"],
html body thead [class~="text-gray-500"] { color: #5B6779; }  /* 浅灰底 5.39 */

/* ============================================================
   15. 第二轮收敛：品牌橙底 + 白字的对比度与配色一致性
   ============================================================ */

/* 灰色正文统一（覆盖 #F5F5F5 等所有浅底） */
html body .text-gray-500 { color: #5B6779; }         /* 5.74:1 / 浅灰底 5.39 */

/* 品牌橙实底：统一加深，白字由 2.53:1 提升至 4.0:1 以上 */
html body [class~="bg-brand"],
html body [class~="bg-[#FF7F24]"],
html body [class~="bg-brand-accent"] {
  background-color: #C2570A;
  background-image: linear-gradient(135deg, #D9610A 0%, #B04E00 100%);
}

/* 橙底上的浅蓝字（原设计 1.9:1，几乎不可读）→ 统一为高对比白 */
html body [class~="bg-brand"] [class~="text-blue-100"],
html body [class~="bg-brand"] [class~="text-blue-200"],
html body [class~="bg-[#FF7F24]"] [class~="text-blue-100"],
html body [class~="bg-[#FF7F24]"] [class~="text-blue-200"],
html body [class~="bg-brand-accent"] [class~="text-blue-100"],
html body [class~="bg-brand-accent"] [class~="text-blue-200"] {
  color: rgba(255, 255, 255, .95);
}

/* 橙底上的白字加深描边，进一步提升感知对比 */
html body [class~="bg-brand"] [class~="text-white"],
html body [class~="bg-[#FF7F24]"] [class~="text-white"] {
  text-shadow: 0 1px 1px rgba(90, 38, 0, .22);
}

/* h3 / h4 橙字：18px 级标题未达大字阈值，按正文标准取色 */
html body :is(h3, h4) .text-brand,
html body :is(h3, h4) .text-brand-accent,
html body :is(h3, h4) [class~="text-[#FF7F24]"],
html body :is(h3, h4)[class*="text-brand"] {
  color: #B04E00;                                    /* 浅灰底 4.60:1 */
}

/* 深蓝主色实底：确保白字达标（原 8.4:1，仅补 background-color 一致性） */
html body [class~="bg-[#0F4C81]"],
html body [class~="bg-[#0b3861]"] { background-color: #0F4C81; }

/* 红色系语义底 */
html body [class~="bg-red-50"] [class~="text-red-600"],
html body [class~="text-red-600"] { color: #B42318; }

/* ============================================================
   16. 页面内联自定义样式（技能中心 / 资费页 / 协议页）对比度收口
   ============================================================ */

/* ---- 技能中心（xxzx.html）橙色文字 ---- */
html body .skill-center__number,
html body .skill-center__stats-highlight strong,
html body .skill-directory__title-copy b,
html body .brand-copy strong em,
html body .skill-center__card:first-child .skill-center__number,
html body .skill-center__section-heading > strong {
  color: #B04E00;
}
html body .skill-center__badge,
html body .skill-center__badge--soft,
html body .skill-directory__group-count {
  color: #A64B00;
  background-color: #FFF1E2;
}
html body .skill-center__notice ul { color: #8A4B00; }
html body .skill-center__empty { color: #667085; }

/* ---- 资费页参考区（product.html）---- */
html body .product-reference .tag,
html body .product-reference .card .quota span { color: #A64B00; }

/* ---- 协议 / 标识类页面（内联深色变量）---- */
html body .nav-logo span { color: #B04E00; }
html body footer.foot p { color: #5B6779; }
html body footer.foot a { color: #4A5568; }
html body .note { border-left-color: #0F4C81; }

/* ---- 全局：橙底实心组件统一为达标深橙 ---- */
html body [class~="bg-brand"],
html body [class~="bg-[#FF7F24]"],
html body [class~="bg-brand-accent"] {
  background-color: #C2570A;
  background-image: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%);
}
html body [class~="bg-[#FF8A3D]"],
html body [class~="bg-[#FF6B1A]"] {
  background-color: #B04E00;
  background-image: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%);
}

/* ---- 深色底上的橙色文字需反向提亮（原 2.85:1）---- */
html body [class~="bg-[#0F4C81]"] .text-brand,
html body [class~="bg-[#0b3861]"] .text-brand,
html body [class~="bg-[#0B2B55]"] .text-brand,
html body [class~="bg-[#0b2447]"] .text-brand,
html body [class~="bg-[#15598E]"] .text-brand,
html body [class~="bg-[#0F4C81]"] [class~="text-[#FF7F24]"],
html body [class~="bg-[#0b3861]"] [class~="text-[#FF7F24]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#FF7F24]"],
html body [class~="bg-[#0b2447]"] [class~="text-[#FF7F24]"],
html body footer .text-brand,
html body footer [class~="text-[#FF7F24]"] {
  color: #FFB27A;                                    /* 深蓝底 6.6:1 */
}

/* ============================================================
   17. 技能中心 / 引导页 内联浅灰文字的对比度收口
   ============================================================ */

/* 技能中心浅灰说明文字（原 #97A2B4 仅 2.36:1） */
html body .skill-center__hero p,
html body .skill-center__hero .page-answer,
html body .skill-center__stats > div > span,
html body .skill-directory__title-copy > span,
html body .skill-center__category,
html body .skill-center__section-label,
html body .skill-center__flow .skill-center__section-label,
html body .skill-center__notice .skill-center__section-label,
html body .skill-center__section-desc,
html body .skill-center__card p,
html body .skill-center__card li {
  color: #5B6779;
}

/* 技能中心强调橙字 */
html body .skill-center__stats-highlight > strong,
html body .skill-center__stats-highlight > span,
html body .skill-center__learning-videos-label,
html body .skill-center__command-text {
  color: #A64B00;
}
html body .skill-center__command--manual { background: #F4F8FD; }
html body .skill-center__command--manual .skill-center__command-text,
html body .skill-center__command--manual .skill-center__copy { color: #2C5C8F; }
html body .skill-center__command--manual .skill-center__copy { background: #0F4C81; color: #fff; }
html body .skill-center__notice .skill-center__section-label { color: #A64B00; }

/* 引导页（lxzbqgz）自定义橙字与说明 */
html body .eyebrow,
html body .prep-nav-card > span,
html body .prep-section-head .section-no,
html body .inline-download,
html body .expand-toggle,
html body .title-line a { color: #A64B00; }
html body .section-head p,
html body .prep-section p { color: #5B6779; }
html body .success-box strong { color: #0B6B45; }

/* 协议页脚注 */
html body footer.foot a,
html body footer.foot p { color: #5B6779; }

/* 视频回退文案（深色底上原为深色字，1.22:1） */
html body video { color: rgba(255, 255, 255, .88); }

/* ============================================================
   18. 深色区块内浅色文字定向提亮 + 剩余硬编码色收口
   ============================================================ */

/* ---- 深色底上的灰蓝说明文字（原 #7F95B0 仅 3.08–4.35:1） ---- */
html body [class~="bg-[#0B2B55]"] [class~="text-[#7F95B0]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#AFC0D6]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#98A2B3]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#8FA5BF]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#8AA0BA]"],
html body [class~="bg-[#15598E]"] [class~="text-[#AFC0D6]"],
html body [class~="bg-[#15598E]"] [class~="text-[#7F95B0]"],
html body [class~="bg-[#102F58]"] [class~="text-[#7F95B0]"],
html body [class~="bg-[#102F58]"] [class~="text-[#AFC0D6]"] {
  color: #CBDAEA;                                     /* 深蓝底 7.9:1 */
}

/* ---- 深色底上的亮橙强调（保留设计意图并确保达标） ---- */
html body [class~="bg-[#0B2B55]"] [class~="text-[#FF9B59]"],
html body [class~="bg-[#15598E]"] [class~="text-[#FF9B59]"],
html body [class~="bg-[#102F58]"] [class~="text-[#FF9B59]"],
html body [class~="bg-[#0B2B55]"] [class~="text-[#FF8291]"] {
  color: #FFC08F;                                     /* 深蓝底 8.9:1 */
}

/* ---- 浅底硬编码浅灰（原 #98A2B3 仅 2.36:1） ---- */
html body [class~="text-[#98A2B3]"] { color: #667085; }
html body [class~="text-[#667085]"] { color: #667085; }

/* ---- 浅底硬编码橙 ---- */
html body [class~="text-[#E96816]"],
html body [class~="text-[#E96A16]"],
html body [class~="text-[#E66A15]"] { color: #A64B00; }

/* ---- 红色语义（原 #D92D20 on #F5F5F5 仅 4.43:1） ---- */
html body [class~="text-[#D92D20]"],
html body [class~="text-[#DC2626]"] { color: #C42216; }

/* ---- 关闭按钮 / 装饰性 × 号 ---- */
html body button[class*="text-gray-300"],
html body button[class*="text-gray-400"] { color: #8A94A6; }

/* ============================================================
   19. 深色区块运行时标记 .vg-dark 内的文字适配
   由 vg-enhance.js 依据实际背景亮度自动标注
   ============================================================ */

html body .vg-dark .text-brand,
html body .vg-dark [class~="text-[#FF7F24]"],
html body .vg-dark [class~="text-[#FF6B1A]"],
html body .vg-dark [class~="text-[#FF8A3D]"],
html body .vg-dark [class~="text-[#E96816]"],
html body .vg-dark [class~="text-[#A64B00]"],
html body .vg-dark [class~="text-[#B04E00]"],
html body .vg-dark [class~="text-[#C2570A]"] {
  color: #FFC08F;                       /* 深蓝底 8.9:1 */
}

html body .vg-dark [class~="text-[#98A2B3]"],
html body .vg-dark [class~="text-[#7F95B0]"],
html body .vg-dark [class~="text-[#8FA5BF]"],
html body .vg-dark [class~="text-[#AFC0D6]"],
html body .vg-dark [class~="text-gray-400"],
html body .vg-dark [class~="text-gray-500"],
html body .vg-dark [class~="text-gray-600"],
html body .vg-dark .vg-stat > p:first-child {
  color: #CBDAEA;                       /* 深蓝底 7.9:1 */
}

html body .vg-dark [class~="text-[#07162D]"],
html body .vg-dark [class~="text-gray-900"],
html body .vg-dark [class~="text-gray-800"] { color: #F2F6FB; }

html body .vg-dark [class~="text-[#FF4D4F]"],
html body .vg-dark [class~="text-red-400"] { color: #FF9B9B; }

/* 深色区块内的浅色卡片保持原有深字，不被上面的规则波及 */
html body .vg-dark article[class*="bg-white"] [class~="text-gray-900"],
html body .vg-dark article[class*="bg-white"] [class~="text-[#07162D]"],
html body .vg-dark div[class~="bg-white"] [class~="text-gray-900"],
html body .vg-dark div[class~="bg-white"] [class~="text-[#07162D]"] { color: #111827; }
html body .vg-dark article[class~="bg-white"] [class~="text-brand"],
html body .vg-dark div[class~="bg-white"] [class~="text-brand"] { color: #B04E00; }

/* ============================================================
   20. 资费页自定义组件（.tag / .badge / .btn.brand）对比度收口
   ============================================================ */

html body .tag,
html body .product-reference .tag {
  color: #A64B00;
  background-color: #FFF1E2;
  border-color: #FFDCC2;
}

html body .card.brand .badge,
html body .plans .card.brand .badge,
html body .btn.brand,
html body .card.brand .btn {
  background-color: #C2570A;
  background-image: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%);
  color: #FFFFFF;
}

html body .card.brand { border-color: #C2570A; }
html body .card.brand .core-text { background-color: #FFF1E2; }

/* ============================================================
   21. 内页自定义组件（导航 CTA / 引导页 / 技能中心）终局收口
   说明：这些页面用 <style> 内联定义组件类，选择器特异性高于
        常规覆盖规则，故此处使用 !important 保证可读性底线。
   ============================================================ */

/* ---- 内页导航 CTA 按钮（原白字仅 2.53:1） ---- */
html body .nav-cta,
html body .nav-download,
html body a.nav-cta,
html body a.nav-download {
  background-color: #C2570A !important;
  background-image: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%) !important;
  color: #FFFFFF !important;
}
html body .nav-cta:hover,
html body .nav-download:hover,
html body a.nav-cta:hover,
html body a.nav-download:hover {
  background-image: linear-gradient(135deg, #B04E00 0%, #8F3F00 100%) !important;
}

/* ---- 内页品牌区次要文字（原 #64748B 4.48:1） ---- */
html body .brand-copy > span,
html body .brand > span > span { color: #5B6779 !important; }

/* ---- 引导页（lxzbqgz）橙色操作文字 ---- */
html body .inline-download,
html body .expand-toggle,
html body .prep-nav-card > span,
html body .prep-section-head > div > span,
html body .eyebrow,
html body .section-no { color: #A64B00 !important; }
html body .inline-download:hover,
html body .expand-toggle:hover { color: #8F3F00 !important; }

/* ---- 技能中心（xxzx）强调数字与徽标 ---- */
html body .skill-center__stats-highlight > strong,
html body .skill-center__stats-highlight > span,
html body .skill-center__stats > div > span { color: #A64B00 !important; }
html body .skill-center__badge,
html body .skill-center__badge--soft,
html body .skill-directory__group-count {
  color: #A64B00 !important;
  background-color: #FFF1E2 !important;
}

/* ---- 资费页标签 / 徽标 ---- */
html body .tag { color: #A64B00 !important; background-color: #FFF1E2 !important; }
html body .badge { color: #FFFFFF !important; }
html body .card.brand .badge,
html body .plans .card.brand .badge { background-color: #C2570A !important; }
html body .btn.brand,
html body .card.brand .btn {
  background-color: #C2570A !important;
  background-image: linear-gradient(135deg, #CE5C08 0%, #A64B00 100%) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   22. 深色首屏内品牌色文字最终提亮
   ============================================================ */

html body .vg-dark .text-brand,
html body .vg-dark .text-brand-accent,
html body .vg-dark [class*="text-brand"],
html body .vg-dark [class~="text-[#FF7F24]"],
html body .vg-dark [class~="text-[#E96A16]"] {
  color: #FFC08F !important;                          /* 深蓝底 8.9:1 */
}

/* 深色区内嵌的白色卡片，文字回落为深色系 */
html body .vg-dark article[class~="bg-white"] [class*="text-brand"],
html body .vg-dark div[class~="bg-white"] [class*="text-brand"],
html body .vg-dark article[class="bg-white"] [class*="text-brand"],
html body .vg-dark div[class="bg-white"] [class*="text-brand"],
html body .vg-dark [class~="bg-white"] .text-brand,
html body .vg-dark [class~="bg-white"] .text-brand-accent,
html body .vg-dark [class~="bg-white"] [class~="text-gray-900"],
html body .vg-dark [class~="bg-white"] [class~="text-gray-800"] {
  color: #B04E00 !important;
}
html body .vg-dark [class~="bg-white"] [class~="text-gray-900"],
html body .vg-dark [class~="bg-white"] [class~="text-gray-800"] { color: #111827 !important; }

/* ============================================================
   23. 动效降级保障：打印/无脚本/旧浏览器下内容始终可见
   ============================================================ */

@media print {
  .vg-reveal { opacity: 1 !important; transform: none !important; }
}

/* 无 JS 环境：入场动效不生效，内容照常显示 */
html.no-js .vg-reveal { opacity: 1 !important; transform: none !important; }