/* =============================================
   HIIB 品牌色 & VI 统一规范
   版本：1.0 | 2026-05-06
   目标：
     1. 确立主色 #165DFF（科技蓝）+ 辅助色体系
     2. 统一字体栈、字号规范、行高、字重
     3. LOGO 放大突出，导航层级清晰
     4. 标题→正文→辅助文字 4 级信息层级
   ============================================= */

/* =============================================
   一、品牌色系 Token 覆盖
   ============================================= */
:root {
  /* ── 主色：科技蓝 ── */
  --primary:        #165DFF;   /* 主品牌色，替换原 #2563EB */
  --primary-dark:   #0E42D2;   /* 深按压态 */
  --primary-light:  #E8F0FF;   /* 浅背景/hover */
  --primary-mid:    #4080FF;   /* 渐变中间色 */

  /* ── 辅助色：深青（替换原紫色，更贴合科技/建筑） ── */
  --secondary:      #0FC6C2;   /* 青绿辅助，用于标签/图标点缀 */
  --secondary-dark: #0A9E9A;

  /* ── 中性色：统一灰阶 ── */
  --dark:           #0A1629;   /* 最深，主标题 */
  --text:           #1D2B45;   /* 正文 */
  --text-light:     #5A6A85;   /* 辅助文字 */
  --text-muted:     #8FA0B8;   /* 占位/禁用 */
  --border:         #DDE4EF;   /* 边框 */
  --bg-page:        #F5F7FB;   /* 页面底色 */

  /* ── 功能色 ── */
  --success:  #00B42A;
  --warning:  #FF7D00;
  --danger:   #F53F3F;

  /* ── 阴影（蓝调） ── */
  --shadow:    0 2px 8px rgba(22, 93, 255, 0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(22, 93, 255, 0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 48px rgba(22, 93, 255, 0.16);
}

/* =============================================
   二、字体规范
   ============================================= */

/* 全局字体栈：优先思源黑体 / Inter，回退系统无衬线 */
body {
  font-family:
    'Inter',
    'Noto Sans SC',
    -apple-system,
    BlinkMacSystemFont,
    'PingFang SC',
    'Microsoft YaHei',
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 15px;          /* 基准字号 */
  line-height: 1.7;         /* 正文行高 */
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 字号规范（4 级信息层级）── */

/* L1：页面主标题 / Hero H1 */
.hero h1,
h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--dark);
}

/* L2：区块大标题 */
.section-title,
h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dark);
}

/* L3：卡片标题 / 小节标题 */
h3 {
  font-size: 1.125rem;   /* 18px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--dark);
}

/* L4：正文 */
p, li, td, th {
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.75;
  color: var(--text);
}

/* 辅助文字 */
.section-subtitle,
.text-muted,
small,
figcaption {
  font-size: 0.875rem;   /* 14px */
  line-height: 1.6;
  color: var(--text-light);
}

/* =============================================
   三、LOGO 放大 & 导航强化
   ============================================= */

/* Header 高度微调，给 LOGO 更多呼吸感 */
.header-inner {
  height: 76px;
}

/* LOGO 图片：横版 SVG，固定高度不变形 */
.logo img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  background: transparent;
}
.logo:hover img {
  transform: none;
  box-shadow: none;
}

/* LOGO 文字：加大字号，强化品牌名 */
.logo-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.01em;
}

/* LOGO 英文副标：用主色，字间距拉开 */
.logo-en {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* 导航链接：字号加大，颜色加深 */
.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}
.nav a:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.nav a.active {
  color: var(--primary);
  font-weight: 600;
  background: var(--primary-light);
}

/* 电话按钮：主色渐变，更有品牌感 */
.phone {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.phone:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 6px 18px rgba(22, 93, 255, 0.4);
  transform: translateY(-2px);
}

/* =============================================
   四、Hero 区域品牌感强化
   ============================================= */

/* Hero 背景：主色调渐变，更有科技感 */
.hero {
  background: linear-gradient(135deg, #EBF1FF 0%, #F0F5FF 40%, #F8FAFC 100%);
}
.hero::before {
  background: radial-gradient(circle, rgba(22, 93, 255, 0.12) 0%, transparent 70%);
}

/* Hero 标签：主色实底 */
.hero-badge {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
  font-weight: 600;
}

/* Hero 副标题：主色 */
.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

/* Hero 描述文字：加深，提升可读性 */
.hero-desc {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.85;
}

/* Hero 数字统计：主色 */
.stat-num {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
}
.stat-label {
  font-size: 0.9rem;
  color: var(--text-light);
  font-weight: 500;
}

/* Hero 视觉盒子：主色渐变 */
.hero-box {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  box-shadow: 0 25px 60px rgba(22, 93, 255, 0.3);
}
.hero-glow {
  background: radial-gradient(circle, rgba(22, 93, 255, 0.18) 0%, transparent 70%);
}

/* =============================================
   五、Section 标题层级强化
   ============================================= */

/* 区块标签（tag）：主色系 */
.tag {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(22, 93, 255, 0.15);
}

/* Section 标题下方装饰线 */
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-mid));
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Section 副标题 */
.section-subtitle {
  font-size: 0.9375rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* =============================================
   六、按钮品牌色统一
   ============================================= */

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  box-shadow: 0 4px 14px rgba(22, 93, 255, 0.3);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  box-shadow: 0 6px 20px rgba(22, 93, 255, 0.4);
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  background: transparent;
}
.btn-outline:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* =============================================
   七、卡片标题层级统一
   ============================================= */

.product-card h3,
.case-card h3,
.partner-card h4,
.feature-card h3,
.news-card h3 {
  font-size: 1.0625rem;  /* 17px */
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.product-card p,
.case-card p,
.partner-card p,
.feature-card p,
.news-card p {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.75;
}

/* 卡片 hover 时标题变主色 */
.product-card:hover h3,
.case-card:hover h3,
.feature-card:hover h3 {
  color: var(--primary);
  transition: color 0.2s;
}

/* =============================================
   八、Dropdown 下拉菜单品牌色
   ============================================= */

.dropdown-content a:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.dropdown-content a i {
  color: var(--primary);
}

/* =============================================
   九、Footer 品牌色
   ============================================= */

.footer-brand .logo-text {
  color: #FFFFFF;
}
.footer-brand .logo-en {
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================
   十、CTA 区域品牌色
   ============================================= */

.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, #1E6FFF 50%, var(--primary-mid) 100%);
  border: none;
}

/* =============================================
   十一、响应式字号微调
   ============================================= */

@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.65;
  }

  .logo img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  background: transparent;
}
  .logo-text {
    font-size: 1.05rem;
  }
  .logo-en {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
  }

  .section-title::after {
    margin: 10px auto 0;
  }

  .stat-num {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .logo-en {
    display: none;  /* 极小屏隐藏英文副标，保持简洁 */
  }
}