/* =============================================
   HIIB 间距 & 留白优化
   目标：统一内边距、模块间距、浅灰分区
   版本：1.0 | 2026-05-06
   ============================================= */

/* ===== 设计 Token：间距变量 ===== */
:root {
  --space-section: 96px;      /* 模块上下间距 */
  --space-section-sm: 72px;   /* 较小模块间距 */
  --container-px: 120px;      /* 桌面左右内边距 */
  --container-px-md: 48px;    /* 平板左右内边距 */
  --container-px-sm: 20px;    /* 手机左右内边距 */

  /* 浅灰分区色阶 */
  --bg-white:   #FFFFFF;
  --bg-gray-1:  #F8FAFC;   /* 极浅灰，主交替色 */
  --bg-gray-2:  #F1F5F9;   /* 稍深灰，强调分区 */
  --bg-gray-3:  #EEF2FF;   /* 蓝调浅灰，CTA 区 */
}

/* ===== 容器：左右 120px 内边距 ===== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ===== Section 统一上下间距 80px ===== */
.section {
  padding: var(--space-section) 0;
}

/* ===== 浅灰分区：交替背景增强分区感 ===== */
/* 白色区 */
.section:not(.section-alt):not(.section-gray2):not(.cta-section) {
  background: var(--bg-white);
}

/* 极浅灰区（原 section-alt） */
.section-alt {
  background: var(--bg-gray-1);
  border-top: 1px solid #E8EDF3;
  border-bottom: 1px solid #E8EDF3;
}

/* 稍深灰区（新增，用于强调模块） */
.section-gray2 {
  background: var(--bg-gray-2);
  border-top: 1px solid #DDE3EC;
  border-bottom: 1px solid #DDE3EC;
}

/* ===== Section Header 间距 ===== */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-title {
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.section-subtitle {
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ===== 卡片内边距统一 ===== */
.product-card,
.case-card,
.partner-card,
.feature-card,
.news-card,
.credential-card {
  padding: 32px;
}

/* ===== Hero 区域呼吸感 ===== */
.hero {
  padding: 140px 0 100px;
}
.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ===== About Preview 区域 ===== */
.about-preview-grid {
  gap: 80px;
}

/* ===== CTA 区域 ===== */
.cta-section {
  background: var(--bg-gray-3);
  padding: var(--space-section) var(--container-px);
  border-top: 1px solid #C7D2FE;
  border-bottom: 1px solid #C7D2FE;
}

/* ===== Footer 上边距 ===== */
.footer {
  padding: 72px 0 40px;
}
.footer .container {
  padding: 0 var(--container-px);
}

/* ===== 页面内容区（detail、about 等子页） ===== */
.page-content,
.detail-grid,
.contact-grid {
  padding: var(--space-section) var(--container-px);
  max-width: 1440px;
  margin: 0 auto;
}

/* ===== 网格间距统一 ===== */
.grid-4 { gap: 28px; }
.grid-3 { gap: 28px; }
.grid-2 { gap: 40px; }

/* ===== 段落 & 列表呼吸感 ===== */
p + p { margin-top: 1em; }
.section p,
.section li {
  line-height: 1.85;
}

/* ===== 分隔线（模块间视觉分隔） ===== */
.section-divider {
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  margin: 0 auto 20px;
}

/* =============================================
   响应式：平板 ≤ 1200px
   ============================================= */
@media (max-width: 1200px) {
  :root {
    --container-px: var(--container-px-md);
    --space-section: 80px;
  }
  .hero-inner {
    padding: 0 var(--container-px-md);
  }
  .cta-section {
    padding: 80px var(--container-px-md);
  }
  .footer .container {
    padding: 0 var(--container-px-md);
  }
}

/* =============================================
   响应式：手机 ≤ 768px
   ============================================= */
@media (max-width: 768px) {
  :root {
    --container-px: var(--container-px-sm);
    --space-section: 56px;
    --space-section-sm: 40px;
  }

  .container {
    padding: 0 var(--container-px-sm);
  }
  .section {
    padding: var(--space-section) 0;
  }
  .section-header {
    margin-bottom: 36px;
  }
  .hero {
    padding: 90px 0 60px;
  }
  .hero-inner {
    padding: 0 var(--container-px-sm);
  }
  .cta-section {
    padding: 56px var(--container-px-sm);
  }
  .footer {
    padding: 48px 0 28px;
  }
  .footer .container {
    padding: 0 var(--container-px-sm);
  }
  .product-card,
  .case-card,
  .partner-card,
  .feature-card,
  .news-card,
  .credential-card {
    padding: 24px;
  }
  .grid-4, .grid-3, .grid-2 { gap: 16px; }
  .about-preview-grid { gap: 32px; }
}

/* =============================================
   响应式：小屏 ≤ 480px
   ============================================= */
@media (max-width: 480px) {
  :root {
    --space-section: 44px;
  }
  .container {
    padding: 0 16px;
  }
  .hero {
    padding: 72px 0 48px;
  }
  .section-header {
    margin-bottom: 28px;
  }
}