/* 门面页专用。变量和基础样式沿用 layout.css，这里只写落地页自己的那套。 */

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  max-width: 1440px; margin: 0 auto; padding: var(--space-md) var(--space-xl);
}
.nav-right { display: flex; align-items: center; gap: var(--space-md); }
.nav-link {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-cta {
  font-family: var(--font-cn); font-size: 13.5px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule-hi); border-radius: var(--radius);
  padding: 7px 15px; white-space: nowrap;
  transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.nav-cta:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* 首屏两栏：左边说清是什么，右边直接摆代码。
   扒的那四家首屏右边都有东西（示例图、实时数据、客户 logo），
   之前这儿空着一大片，页面看着就失衡。 */
.hero {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(44px, 8vh, 88px) var(--space-xl) clamp(40px, 7vh, 72px);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-xl); align-items: center;
}
.hero-left { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.hero-right { min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule);
}
.code-title { font-family: var(--font-cn); font-size: 13px; font-weight: 600; color: var(--muted); }
.hero-right pre { font-size: 12.5px; line-height: 1.85; }
.eyebrow {
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.04em;
  color: var(--gold); font-weight: 600;
}
.hero h1 {
  margin: 0; font-family: var(--font-title);
  font-size: clamp(1.95rem, 3.7vw, 3rem);
  font-weight: 600; line-height: 1.24; letter-spacing: -0.01em;
  max-width: 24ch; overflow-wrap: anywhere; min-width: 0;
}
.hero p {
  margin: 0; font-family: var(--font-cn); font-size: clamp(14px, 1.2vw, 16px);
  color: var(--muted); line-height: 1.75; max-width: 46ch;
}
.hero-actions {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap; padding-top: var(--space-sm);
}
.cta {
  background: var(--gold); color: #0a0a0a; border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 14px 30px;
  font-family: var(--font-cn); font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.cta:hover:not(:disabled) { background: #ffd84d; border-color: #ffd84d; }
.cta:active:not(:disabled) { transform: translateY(1px); background: #dfb014; border-color: #dfb014; }
.cta:disabled { background: transparent; color: var(--neutral); border-color: var(--rule-hi); cursor: default; }
.cta-note { font-family: var(--font-cn); font-size: 14px; color: var(--neutral); }
.cta-err { font-family: var(--font-cn); font-size: 13.5px; color: var(--danger); min-height: 20px; }

.facts {
  max-width: 1440px; margin: 0 auto; padding: var(--space-lg) var(--space-xl) 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg); border-top: 1px solid var(--rule);
}
/* 三个大数字。原来套的是等宽体——等宽当装饰是界面红线点名的那条，
   而且金色等宽数字正是 AI 生成页最爱的长相。改成标题那套衬线。 */
.fact-n {
  font-family: var(--font-title); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.015em;
  color: var(--gold); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.fact-t { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); margin-top: 6px; line-height: 1.6; }

.roster {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) var(--space-xl) var(--space-xl);
}
.roster-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--rule);
}
.roster-title { font-family: var(--font-cn); font-size: 14px; font-weight: 600; }
.roster-note { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); white-space: nowrap; }
.roster .models { margin-top: var(--space-sm); }

.landing-foot {
  max-width: 1440px; margin: 0 auto;
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--rule);
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 0.02em; color: var(--neutral);
}

@media (max-width: 640px) {
  .nav { padding: var(--space-md); }
  .nav-link { display: none; }
  .hero, .facts, .roster, .landing-foot { padding-left: var(--space-md); padding-right: var(--space-md); }
  .hero { grid-template-columns: 1fr; gap: var(--space-lg); }
  .facts { grid-template-columns: 1fr; gap: var(--space-md); }
  .cta { flex: 1 1 auto; }
}

/* ── 三步上手：抄的是这行网站的标配，先让人知道流程再看代码 ──── */
.steps {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(48px, 7vh, 72px) var(--space-xl) 0;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--rule);
}
.section-title { font-family: var(--font-cn); font-size: 14px; font-weight: 600; }
.section-note { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); white-space: nowrap; }
.step-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg); padding-top: var(--space-md);
}
.step { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
/* 01 02 03。同样别用等宽——序号本来就是数字，用标题那套衬线更像排版。 */
.step-n {
  font-family: var(--font-title); font-size: 16px; font-weight: 600;
  color: var(--gold); letter-spacing: 0.01em; line-height: 1.2;
}
.step-h { font-family: var(--font-cn); font-size: 15px; font-weight: 600; }
.step-p { font-family: var(--font-cn); font-size: 13.5px; color: var(--neutral); line-height: 1.7; margin: 0; }

/* 模型行右边挂一句「一次大概花多少」 */
.model-row .cost {
  font-family: var(--font-cn); font-size: 13px; color: var(--neutral);
  white-space: nowrap; margin-left: auto; margin-right: var(--space-md);
}
.model-row:hover .cost { color: var(--muted); }

@media (max-width: 640px) {
  .steps { padding-left: var(--space-md); padding-right: var(--space-md); }
  .step-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* 首屏右边第二块（返回示例）的头 */
.code-head-2 { margin-top: var(--space-sm); }
.code-note { font-family: var(--font-cn); font-size: 13px; color: var(--neutral); white-space: nowrap; }