/* ==========================================================================
   首页专用样式
   结构只有两块：首屏（标语 + 简历实样）+ 全部功能（九卡平铺）。
   其余版块已删 —— 首页的职责是「说清这是什么、有哪些功能、点哪里进」，
   不是把所有卖点都铺一遍。
   ========================================================================== */

/* ---------- 首屏 ---------- */
.hero {
  /* overflow:hidden 兜住 hero-glow 的柔光；徽标在 .hero-visual 内，不会被裁 */
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff6ee 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 52px;
}

/* 珊瑚柔光：给首屏一层暖调氛围，不承载信息。
   用 radial-gradient 而不是色块 —— 边缘必须是无感的，看得出边界就假了。 */
.hero-glow {
  position: absolute;
  top: -140px;
  right: -80px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 74, .13) 0%, rgba(255, 107, 74, 0) 66%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* 🔴 minmax(0, 1fr) 不能写成 1fr：简历纸面是固定 794px 宽，
     grid 列默认 min-width:auto 会被它撑开，整页横向溢出（2026-10-31 实测）。 */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--sp-9);
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid rgba(255, 107, 74, .18);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}

/* H1 就是首页指定文案本身，不拆词、不换说法、不加装饰符号。
   字号给足，让它自己撑起首屏的分量。 */
.hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.22;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-body-lg);
  color: var(--ink-2);
  line-height: var(--lh-relaxed);
  max-width: 25em;
  margin-bottom: var(--sp-5);
}

.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero-note {
  margin-top: 10px;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

.hero-visual { position: relative; padding-right: var(--sp-5); min-width: 0; }

.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--shadow-2);
  height: 372px;
  /* 裁掉超出容器的 794px 纸面，不让它参与父级宽度计算 */
  overflow: hidden;
  min-width: 0;
}

.hero-card .zj-paper {
  width: 794px;
  min-height: 1123px;
  transform-origin: top left;
  box-shadow: none;
}

.hero-badge {
  position: absolute;
  right: -6px;
  bottom: 34px;
  /* 实色薄荷底：白卡堆里需要一块有颜色的东西，否则首屏全是白与暖白，缺焦点。
     🔴 底色用 --ok-ink 而不是 --ok：白字压亮绿只有 2.2:1，压深绿是 5.2:1。 */
  background: var(--ok-ink);
  border: 1px solid var(--ok-ink);
  border-radius: var(--r-md);
  box-shadow: 0 10px 24px -8px rgba(15, 138, 99, .5);
  padding: 10px 16px;
  text-align: center;
  min-width: 88px;
  z-index: 2;
}
.hero-badge strong {
  display: block;
  font-size: var(--fs-t3);
  color: #fff;
  line-height: 1.2;
}
.hero-badge span { font-size: var(--fs-micro); color: rgba(255, 255, 255, .9); }

/* ---------- 全部功能 ---------- */
.section { padding: 44px 24px 64px; }

.section-head { margin-bottom: var(--sp-6); }
.section-head h2 { margin-bottom: 6px; }
/* 功能区副标题是价值标语，不是说明段落：比正文大一档 + 微字距，
   与产品页那种「说明文字」拉开层次，但字号仍明显小于 h2，不抢标题。 */
.section-head p {
  color: var(--ink-2);
  font-size: var(--fs-body);
  letter-spacing: .04em;
  margin-top: 8px;
}

/* 两个重点：大一号，独占一行，与下面八个小卡形成明确主次。
   如果十个卡都平铺成同一种尺寸，用户看不出哪个是重点。 */
.fn-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.fn-key .fn-card {
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  padding: var(--sp-6);
}
.fn-key .fn-glyph { width: 48px; height: 48px; font-size: var(--fs-t3); }
.fn-key .fn-name { font-size: var(--fs-t4); }
.fn-key .fn-desc { font-size: var(--fs-ui); margin-top: 6px; }

/* 八个常规入口：4 列 × 2 行，正好排满不留空位 */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.fn-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* 只有真的能点的卡片才浮起 —— 首页这里全是链接，所以统一给反馈 */
.fn-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  color: inherit;
}

/* 汉字图标：项目零依赖，不用图标字体 / 图标 CDN。
   九个同色系，不做九种颜色 —— 一屏一处强调（橙色主 CTA）已经够了。 */
.fn-glyph {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-size: var(--fs-t4);
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fn-card:hover .fn-glyph { background: var(--brand); color: #fff; }

.fn-body { display: block; min-width: 0; }
.fn-name {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.fn-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}

.fn-arrow {
  color: var(--ink-4);
  font-size: var(--fs-body);
  line-height: 1.35;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fn-card:hover .fn-arrow { color: var(--brand); transform: translateX(3px); }

.fn-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  line-height: var(--lh-relaxed);
}
.fn-note a { color: var(--brand); }
.fn-note a:hover { color: var(--brand-ink); text-decoration: underline; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .hero-inner { gap: var(--sp-7); }
}

@media (max-width: 1080px) {
  /* 4 列在这个宽度每张只剩 220 左右，说明会断成三行；降到 2 列，8 个正好 4 行 */
  .fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .hero-visual { padding-right: 0; }
  .hero-card { height: 320px; }
  .hero-badge { right: 4px; bottom: -10px; }
}

@media (max-width: 860px) {
  .hero { padding: 32px 0 40px; }
  .hero h1 { font-size: 26px; line-height: 1.35; letter-spacing: -.01em; }
  .hero-sub { font-size: var(--fs-body); margin-bottom: var(--sp-5); }
  .hero-actions .btn { flex: 1; }
  .hero-card { height: 240px; }
  .hero-badge { padding: 8px 13px; min-width: 74px; }
  .hero-badge strong { font-size: var(--fs-t4); }

  .section { padding: 38px 16px 56px; }
  .fn-card { padding: var(--sp-4); gap: var(--sp-3); grid-template-columns: 36px minmax(0, 1fr) 12px; }
  .fn-glyph { width: 36px; height: 36px; font-size: var(--fs-body); }
}

@media (max-width: 720px) {
  /* 手机上两列会把说明文字压成三行，改单列，一屏能看到 3–4 个入口 */
  .fn-key, .fn-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .fn-key { margin-bottom: var(--sp-3); }
  .fn-key .fn-card { padding: var(--sp-4); grid-template-columns: 40px minmax(0, 1fr) 14px; }
  .fn-key .fn-glyph { width: 40px; height: 40px; font-size: var(--fs-t4); }
  .fn-key .fn-desc { font-size: var(--fs-caption); }
}

/* ---------- 证据带：真实在架数量 ---------- */
.proof {
  margin: 8px auto 0;
  padding: 30px 24px 24px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.proof-head h2 { font-size: var(--fs-t3); margin-bottom: 6px; }
.proof-head p { color: var(--ink-2); font-size: var(--fs-ui); line-height: var(--lh-relaxed); }
.proof-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.proof-item {
  min-width: 0;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.proof-item strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.proof-item span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--ink);
}
.proof-item em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--ink-3);
}
.proof-note {
  margin-top: 14px;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  line-height: 1.7;
}

/* ---------- 三步流程 ---------- */
.steps { padding-top: 40px; }
.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-item {
  min-width: 0;
  padding: 20px 18px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-n {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .08em;
}
.step-item h3 { margin: 10px 0 6px; font-size: var(--fs-t4); }
.step-item p { color: var(--ink-2); font-size: var(--fs-ui); line-height: var(--lh-relaxed); }
.step-cta { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .proof-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .proof { padding: 22px 16px 18px; border-radius: 12px; }
  .proof-item { padding: 14px; }
  .proof-item strong { font-size: 26px; }
  .proof-nums { gap: 10px; }
  .step-cta .btn { flex: 1; }
}