/*
 * 首页通用段落 + ③ 三种起点。② 作品展区在 works.css，五步流程与能力四段在 flow.css，效果 / 收尾在 home-story.css。
 */

.site-header.is-overlay { top: 0; }

/* ── 段落：大留白；标题左对齐，像杂志的篇章页 ── */
.section { position: relative; padding: var(--sp-section) 0 0; }
.section > .section-head, .section > .starts, .section > .flow, .section > .cap, .section > .proof-stack {
  width: min(var(--w-content), 100% - var(--page-x) * 2);
  margin-inline: auto;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
}

.section-title {
  margin-top: 20px;
  max-width: 14em;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--c-text-strong);
}

.section-lead {
  max-width: var(--w-text);
  margin-top: var(--sp-md);
  font-size: var(--fs-lead);
  color: var(--c-text-3);
}

/* ── ③ 三种起点 ── */
.starts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--sp-xl);
}

.start {
  position: relative;
  padding: 30px 30px 32px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  transition: border-color var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* 悬停时卡片顶上亮起一线主色微光 */
.start::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-primary-soft), transparent);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.start:hover { border-color: rgba(139, 124, 246, 0.28); transform: translateY(-4px); }
.start:hover::before { opacity: 1; }

.start-num { font-size: 13px; letter-spacing: 0.2em; color: var(--c-primary-soft); font-variant-numeric: tabular-nums; }
.start h3 { margin-top: 18px; font-size: var(--fs-h3); font-weight: var(--fw-regular); color: var(--c-text-strong); }
.start p { margin-top: 10px; font-size: 15px; color: var(--c-text-3); }
/* 两句各占一行，断在标点上；卡片窄到放不下时各自折行，不会撑出卡片 */
.start p > span { display: block; text-wrap: balance; }

/* ── 窄屏 ── */
@media (max-width: 860px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
  .starts { grid-template-columns: 1fr; }
}