/* ==========================================================================
 * 站点首页样式（index.html）
 * --------------------------------------------------------------------------
 * 版式：hero band（冰蓝画布直接承载内容，无卡片）——超大显示字体（Lan display
 * 字阶，思源黑体 900）描述服务作用 + 唯一 Tech Blue CTA 胶囊按钮（README 下载）。
 * 尺寸以 rem 表达（1rem = 10 设计px，375 基准，见 global.css 说明）；
 * 颜色全部引用 global.css 的 Lan 语义令牌。
 * ========================================================================== */

/* 页面骨架：内容区撑满页眉页脚之间并垂直水平居中（flex:1 同 auth/doc 页；
   header-footer.css 的骨架白名单未含本页类名，故在此声明） */
.index-page {
  flex: 1 0 auto;
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--page-bg-color);
  padding: 4.8rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ===== 超大标题（Lan display 字阶：思源黑体 900，文案「认证、授权、审计」） =====
   手机取 display-lg 字号 47px（8 个全角字符约 376px，窄屏单行不可容将自然换行），宽屏升级 display-xxl 96px；
   行高令牌按拉丁字面 0.85 倍设计、不适中文 900 字重的多行排布，按 1.15 倍汉字行距处理 */
.index-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Source Han Sans SC", "Noto Sans SC", "思源黑体", Inter, system-ui, -apple-system, sans-serif;
  font-size: 4.7rem;
  line-height: 1.15;
  font-weight: 900;
}

/* ===== 副标题（body-lg：20px/400，限宽保证长文案换行可读） ===== */
.index-subtitle {
  margin: 2.4rem 0 0;
  max-width: 56rem;
  color: var(--color-text-secondary);
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 400;
}

/* ===== 下载按钮（Lan button-primary：Tech Blue 胶囊 CTA，唯一主操作） =====
   高 56px 高于表单按钮 48px 以突出；hover 与全站登录按钮一致以轻微降透明度反馈 */
.index-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  padding: 0 4.8rem;
  box-sizing: border-box;
  margin: 4.8rem 0 0;
  background: var(--color-brand-bg);
  border: none;
  border-radius: 2.4rem;
  color: var(--color-text-inverse);
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.index-download-btn:hover {
  opacity: 0.85;
  color: var(--color-text-inverse);
}

/* ===== 按钮下说明（body-sm 弱文本） ===== */
.index-download-hint {
  margin: 1.6rem 0 0;
  color: var(--color-text-tertiary);
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
}

/* ===== 宽屏（≥768px，1rem=10px）：标题升级 display-xxl 96px ===== */
@media screen and (min-width: 768px) {
  .index-title {
    font-size: 9.6rem;
  }
}