/*! ============================================================================
 * ebeoo.com — 设计系统层（浅色 / Polo DESIGN_SPEC v1.0 合规）
 * ----------------------------------------------------------------------------
 * 基线来源：design-system/DESIGN_SPEC.md（Polo v5.9.9 提炼）
 * 令牌引子：css/design-tokens.css（须在本文件之前引入）
 *
 * 本层职责（只做这三件事，不重写框架）：
 *   1. 按规范补齐 Polo 编译产物缺失的部分（Bootstrap reboot / 字重 / 触控）
 *   2. 修正 DESIGN_SPEC §10.2 列出的已知瑕疵
 *   3. 品牌化（中文「逸柏」文字字标、Keenicons 图标接管）
 *
 * 本层**不定义配色** —— 配色一律走 style.css 的 #2250fc 原生主色，
 * 中性阶取自 design-tokens.css；改色只需改令牌文件 §1。
 *
 * 加载顺序（8 页统一）：
 *   plugins.css → style.css → iconfont.web.css → design-tokens.css → ebeoo-theme.css
 * ========================================================================== */

/* ===========================================================================
 * §0 · 字体栈
 * ---------------------------------------------------------------------------
 * 规范要求 Poppins（Google Fonts）。fonts.googleapis.com 在中国大陆不可达，
 * 为保证首屏不阻塞渲染，统一改用系统字体栈：西文取 SF Pro / Segoe UI，
 * 中文取苹方 / 微软雅黑。零外部请求。
 * ========================================================================= */
:root {
  --eb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Poppins",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             system-ui, sans-serif;
}
body, p, .lead, li, td, th, span, div, blockquote, label, input, select, textarea,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, button, #mainMenu nav > ul > li > a, #footer, #footer p,
#footer .widget .widget-title, #footer .widget h4 {
  font-family: var(--eb-font);
}

/* ===========================================================================
 * §1 · 基础重置（DESIGN_SPEC §10.2-7：Bootstrap reboot 未编译进产物）
 * ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
img,
svg,
video { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
a { text-decoration: none; }
::selection { background: rgba(34, 80, 252, .16); }

/* ===========================================================================
 * §2 · 排版（DESIGN_SPEC §2）
 * ---------------------------------------------------------------------------
 * 🔴 §10.2-1：原模板 h1 未声明 font-weight，回落浏览器默认 700，
 *    导致 h1(700) 比 h4(600) 还重、层级不连续。此处按规范建议显式统一。
 * ========================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #1e2022;                 /* --color-text-heading */
  letter-spacing: 0.5px;          /* 所有标题统一字距 */
  font-weight: 600;               /* 修正 h1 字重不连续 */
}
h5, h6, .h5, .h6 { font-weight: 500; }
p { color: #3c4043; }
/* 深色区块里必须给容器加 .text-light —— 见 DESIGN_SPEC §1.3 */
.text-light,
.text-light h1, .text-light h2, .text-light h3, .text-light h4,
.text-light h5, .text-light h6, .text-light p, .text-light li,
.text-light span, .text-light a, .text-light div { color: #fff; }
.text-light a:hover { color: rgba(255, 255, 255, .78); }

/* 移动端标题降档（DESIGN_SPEC §2.4） */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 33.2px; line-height: 1.318; }
  h2, .h2 { font-size: 25.1px; line-height: 1.364; }
  h3, .h3 { font-size: 19.1px; }
}

/* ===========================================================================
 * §3 · 区块节奏（DESIGN_SPEC §3.3）
 * ========================================================================= */
section { padding: 84px 0; }
@media (max-width: 768px) {
  section { padding: 40px 0; }
}
/* 靠 padding 制造间隔，不用 margin —— 否则背景色不连续（§9 反模式） */
.background-grey,
.bg-grey { background-color: #f9f9fa; }
.background-light { background-color: #fbfbfb; }

/* ===========================================================================
 * §4 · 按钮（DESIGN_SPEC §6.1）
 * ---------------------------------------------------------------------------
 * 🔴 §10.2-5：原模板移动端按钮仅 32px 高，低于 44px 触控建议值 → 此处补足。
 * 另：按钮内容为中文，去掉原模板的 text-transform: uppercase（对中文无意义）。
 * ========================================================================= */
.btn { font-weight: 600; letter-spacing: 0.5px; text-transform: none; }
.btn-primary { background-color: #2250fc; border-color: #2250fc; color: #fff; }
.btn-primary:hover,
.btn-primary:focus { background-color: #0333e8; border-color: #0333e8; color: #fff; }

@media (max-width: 992px) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ===========================================================================
 * §5 · Keenicons 图标：夺回字体控制权（🔴 缺此节全站图标静默空白）
 * ---------------------------------------------------------------------------
 * Polo(style.css) 有一条全局规则：
 *     i:not(.fa):not(.fab):not(.far):not(.fas) { font-family: inspiro-icons !important }
 * 特异性 (0,4,1)，而生成物里的 .ki-outline / .ki-solid 只有 (0,1,0) ——
 * 同为 !important 时按特异性决胜，于是所有 <i> 被强制成 inspiro-icons，
 * Keenicons 字形**静默不显示**（不报错、无 404，只是空白）。
 * 这里用同样的 :not() 结构 + 更高特异性夺回。
 * ========================================================================= */
i.ki.ki-outline:not(.fa):not(.fab):not(.far):not(.fas) {
  font-family: 'keenicons-outline' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}
i.ki.ki-solid:not(.fa):not(.fab):not(.far):not(.fas) {
  font-family: 'keenicons-solid' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
}
.ki { flex: none; }

/* ===========================================================================
 * §6 · 品牌化：中文「逸柏」文字字标（全站无图片 logo 依赖）
 * ========================================================================= */
#logo .brand-logo {
  font-family: var(--eb-font);
  font-size: 26px;
  font-weight: 700;
  color: #2250fc;
  letter-spacing: 4px;
  line-height: 38px;
}
#footer .footer-brand {
  display: inline-block;
  font-family: var(--eb-font);
  font-size: 26px;
  font-weight: 700;
  color: #1e2022;
  letter-spacing: 4px;
  line-height: 34px;
  margin-bottom: 14px;
}

/* ===========================================================================
 * §7 · 页脚合规信息（许可证 / 备案号属法定披露，用正文色不用弱化色）
 * ========================================================================= */
#footer { font-size: 14px; }
#footer p, #footer li, #footer .list li, #footer .list-unstyled li {
  color: #3c4043;
  font-size: 14px;
}
#footer .widget-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #1e2022;
}
#footer a { color: #2250fc; }
#footer a:hover { color: #0333e8; }
/* 反掉模板残留的内联黑字（许可证三行），统一到正文色 */
#footer .list-unstyled li[style*="color:#000"] { color: #3c4043 !important; }
#footer .list-unstyled li[style*="color:#000"] a { color: #2250fc !important; }

/* ===========================================================================
 * §8 · 可访问性
 * ========================================================================= */
:focus-visible { outline: 2px solid #2250fc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
 * §9 · 过渡期兼容（⚠️ 临时）
 * ---------------------------------------------------------------------------
 * 下面这套 .ebeoo-* 组件原为暗色主题层所写。8 个页面正在陆续迁移到
 * Polo 原生版式，未迁移完成的页面仍依赖这些类，故此处**转为浅色版本**
 * 临时保留，避免迁移过程中出现白底白字。
 * 全部页面迁移完毕后，本整节连同页面里的 .ebeoo-* 标记一并删除。
 * ========================================================================= */
.ebeoo-hero {
  background: #fbfbfb;
  border-bottom: 1px solid #e4e6ef;
  overflow: hidden;
}
.ebeoo-hero .hero-grid,
.ebeoo-hero .hero-glow { display: none; }
.ebeoo-hero h1 { color: #1e2022; }
.ebeoo-hero p.hero-sub { color: #3c4043; font-size: 18px; line-height: 1.7; }

.ebeoo-hero-panel,
.ebeoo-info-panel {
  background: #fff;
  border: 1px solid #e4e6ef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(31, 45, 61, .05);
}
.ebeoo-hero-panel .panel-bar,
.ebeoo-info-panel .panel-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: #fbfbfb;
  border-bottom: 1px solid #e4e6ef;
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #9aa0a6;
}
.ebeoo-hero-panel ul { list-style: none; margin: 0; padding: 6px 0; }
.ebeoo-hero-panel li {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid #f3f3f3;
  font-size: 14px; color: #3c4043;
}
.ebeoo-hero-panel li:last-child { border-bottom: none; }
.ebeoo-hero-panel .k { font-size: 11px; color: #9aa0a6; }
.ebeoo-hero-panel .en { font-size: 11px; color: #9aa0a6; letter-spacing: .04em; text-align: right; }
.ebeoo-hero-panel .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2250fc; display: inline-block; margin-right: 8px;
}
.ebeoo-hero-meta {
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #9aa0a6;
}
.ebeoo-info-panel dl { margin: 0; padding: 6px 0; }
.ebeoo-info-panel dl > div {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; align-items: baseline;
  margin: 0; padding: 15px 20px; border-bottom: 1px solid #f3f3f3;
}
.ebeoo-info-panel dl > div:last-child { border-bottom: none; }
.ebeoo-info-panel dt { font-weight: 600; font-size: 13px; color: #9aa0a6; }
.ebeoo-info-panel dd {
  margin: 0; text-align: right; font-size: 13px; color: #1e2022; word-break: break-all;
}
.ebeoo-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid #e4e6ef;
  border-radius: 14px; overflow: hidden;
}
.ebeoo-stat {
  padding: 30px 24px; text-align: center; border-right: 1px solid #e4e6ef;
}
.ebeoo-stat:last-child { border-right: none; }
.ebeoo-stat .num {
  font-size: 48px; font-weight: 600; line-height: 1; color: #1e2022;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.ebeoo-stat .num small { font-size: .45em; font-weight: 600; color: #9aa0a6; margin-left: 4px; }
.ebeoo-stat .lab { margin-top: 10px; font-size: 12px; letter-spacing: 1.2px; color: #9aa0a6; }
.ebeoo-cta {
  background: linear-gradient(135deg, #2250fc 0%, #4b72ff 100%);
  border-radius: 14px; padding: 64px 40px; text-align: center;
}
.ebeoo-cta h2 { color: #fff; }
.ebeoo-cta p { color: rgba(255, 255, 255, .85); }
.ebeoo-cta .btn-light {
  background-color: #fff; border-color: #fff; color: #2250fc;
}
.ebeoo-cta .btn-light:hover { background-color: #f1f5f9; color: #0333e8; }
.ebeoo-tile {
  height: 118px; display: flex; align-items: center; justify-content: center;
  background: #fbfbfb; border-bottom: 1px solid #e4e6ef;
}
.ebeoo-tile i { font-size: 42px; color: #2250fc; }
.ebeoo-tile--lg { height: 150px; } .ebeoo-tile--lg i { font-size: 52px; }
.ebeoo-tile--md { height: 132px; } .ebeoo-tile--md i { font-size: 46px; }
.ebeoo-contact-strong { color: #2250fc; font-weight: 700; }
.ebeoo-qr {
  width: 200px; height: 200px; border: 1px solid #e4e6ef;
  border-radius: 14px; padding: 8px; background: #fff;
}
.feature-box .feature-box-icon {
  background-color: rgba(34, 80, 252, .08);
  border: 1px solid #e4e6ef;
  border-radius: 10px;
  color: #2250fc;
}
.feature-box .feature-box-icon i { color: #2250fc; }
.feature-box .feature-box-icon--badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 16px;
}
.feature-box .feature-box-icon--badge i { font-size: 26px; }

@media (max-width: 991.98px) {
  .ebeoo-stats { grid-template-columns: repeat(2, 1fr); }
  .ebeoo-stat { border-right: none; border-bottom: 1px solid #e4e6ef; }
  .ebeoo-stat:nth-child(odd) { border-right: 1px solid #e4e6ef; }
}