/* ============================================================
   首页（营销层）
   《设计规范》v1.0 —— 取值全部来自 tokens.css。

   这一页的六条原则落在哪：
     01 成品即证据 —— hero 右侧铺真模板图，没有插画、没有装饰卡片堆
     02 一处一个数字 —— 全页数字只出现在 .spec-strip 一条里
     03 不做滚动动画 —— 没有任何 scroll-reveal，内容默认可见
     04 朱红只给行动 —— 全页朱红只落在主按钮、眉标和当前态上
     05 直角与零阴影 —— 没有一处 border-radius / box-shadow
     06 每屏一个下一步 —— 每个区块收在一个明确的入口上
   ============================================================ */

/* ════════════ HERO ════════════ */
.hero { padding: 72px 0 0; }
.hero-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-title {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  margin: 16px 0 20px;
  color: var(--ink);
}
.hero-sub {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-sub);
  margin: 0 0 32px;
  max-width: 540px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* 成品即证据：三张真模板图，中间那张高一档。直角 + 发丝线，没有投影。
   宽一点，是因为「证据」得看得清 —— 缩到 120px 宽的海报缩略图上面一个字都认不出，
   那就只剩装饰作用了。`flex-shrink: 1` 让它在窄屏上自己收，不必另设断点。 */
.hero-visual { flex: 0 1 620px; width: 620px; min-width: 0; }
.hero-card-stack { display: flex; gap: 14px; align-items: flex-end; }
.hero-card {
  margin: 0;
  border: var(--line-width) solid var(--line);
  background: var(--surface);
  padding: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.hero-card--side { flex: 1 1 0; }
.hero-card--main { flex: 1.4 1 0; }
.hero-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  background: var(--stage);
}
.hero-card--main img { aspect-ratio: 9 / 14; }
.hero-card figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 库里一张模板都没有时的占位 —— 平色块。**不用渐变**：高饱和渐变是
   「AI 出图廉价感」的主要来源（§2.4），拿它当占位等于把那种感觉请回来。 */
.hero-card--blank { background: var(--stage); height: 240px; }
.hero-card--blank.hero-card--main { height: 320px; }

/* ── 规格条：全页唯一的数字出口（原则 02）── */
.spec-strip {
  margin-top: 72px;
  border-top: var(--line-width) solid var(--line);
  border-bottom: var(--line-width) solid var(--line);
}
.spec-strip__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
}
.spec-strip__item {
  padding: 28px 0;
  border-right: var(--line-width) solid var(--line);
  padding-left: 24px;
}
.spec-strip__item:first-child { padding-left: 0; }
.spec-strip__item:last-child { border-right: none; }
.spec-strip__item dt { margin-bottom: 6px; }
.spec-strip__item dd {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
}

/* ════════════ 模板轮播 ════════════
   轨道渲染两遍（后半段与前半段逐字相同），CSS 位移 -50% 就是无缝循环。 */
.section-foot { margin: 32px 0 0; text-align: center; }
/* 轮播在 `.page-container` 里（1440 + 左右 56），盒子和导航、hero、规格条同一个 ——
   别把它挪到 section 下面直接挂：那样它两端伸到视口边上，跟页面上别的区块全对不齐。 */
.carousel-viewport {
  overflow: hidden;
  padding: 4px 0;
  /* 两端一小段淡出。卡片是 210px 宽，之前全出血时那 56px 的淡出是按视口边定的 ——
     收进内容栏之后同样 56px 会吃掉第一张卡的四分之一。28px 够把它从「被刀切」
     变成「滑出去了」，又不遮住卡上的字。走遮罩而不是叠一层渐变块：露出的是
     `.paper`，和页面底色本来就是一个色，不会多出一条色带。 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.carousel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: carousel-scroll 90s linear infinite;
}
.carousel-viewport:hover .carousel-track { animation-play-state: paused; }
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.carousel-card {
  flex: 0 0 210px;
  width: 210px;
  display: block;
  border: var(--line-width) solid var(--line);
  background: var(--surface);
  padding: 10px;
  transition: border-color var(--t-fast);
}
.carousel-card:hover { border-color: var(--ink); }
.carousel-thumb { background: var(--stage); }
.carousel-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}
.carousel-name {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════ 机制区（深色） ════════════
   §2：深色只用于三个场景，机制区是其中之一。深色区一律 --dark-accent，
   不得混用浅色区的 --accent —— 两者亮度不同，混用会有一处读不清。 */
.mechanism {
  background: var(--dark-bg);
  color: var(--dark-body);
  padding: 100px 0;
}
.mechanism .section-title { color: var(--paper); }
.mechanism .section-sub { color: var(--dark-body); }
.mechanism .t-eyebrow { color: var(--dark-label); }
.mechanism__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.mechanism__step {
  padding: 28px 32px 0 0;
  border-top: var(--line-width) solid var(--dark-line);
  margin-right: 32px;
}
.mechanism__step:last-child { margin-right: 0; padding-right: 0; }
.mechanism__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--dark-accent);
  margin-bottom: 18px;
}
.mechanism__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--paper);
  margin: 0 0 12px;
}
.mechanism__body { font-size: 15px; line-height: 1.9; color: var(--dark-body); margin: 0; }
.mechanism__foot { margin: 56px 0 0; }

/* ════════════ 分享到 ════════════
   13 个平台的图标排。**高度统一、宽度自适应** —— 里面有一个是横版 wordmark
   （YouTube 479×200），钉成正方形会把它压成一条看不清的横杠；`object-fit: contain`
   保住比例，`max-width` 兜住它不要比别的图标宽出一倍多。

   图标本身自带底色和圆角（是各家自己的品牌形状），所以这里**不加底板、不加边框** ——
   再套一层卡片就成了「卡片里的卡片」。 */
.platform-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.platform-row img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
}

/* ════════════ 能力 ════════════
   四张卡，没有图标 —— §8 禁止为了「更活泼」引入图标集或插画。 */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.cap-cell {
  border: var(--line-width) solid var(--line);
  background: var(--surface);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.cap-cell__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.cap-cell__body { font-size: 13px; line-height: 1.8; color: var(--ink-sub); margin: 0; }
.cap-cell__foot { margin: auto 0 0; padding-top: 16px; }

/* ════════════ CTA ════════════ */
.cta-band {
  display: flex;
  align-items: center;
  gap: 56px;
  border: var(--line-width) solid var(--line);
  background: var(--surface);
  padding: 48px;
}
.cta-copy { flex: 1 1 auto; min-width: 0; }
.cta-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 14px 0 12px;
}
.cta-sub { font-size: 15px; line-height: 1.9; color: var(--ink-sub); margin: 0 0 28px; max-width: 520px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-aside { flex: 0 0 300px; }
.cta-mini-stack { display: flex; gap: 14px; }
.cta-mini {
  flex: 1 1 0;
  min-width: 0;
  border: var(--line-width) solid var(--line);
  background: var(--stage);
  padding: 8px;
}
.cta-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  background: var(--stage);
}

/* ════════════ 窄屏 ════════════ */
@media (max-width: 1200px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .hero-inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .hero-visual { flex: 1 1 auto; width: auto; }
  .hero-card--blank { height: 180px; }
  .hero-card--blank.hero-card--main { height: 220px; }
  .spec-strip__row { grid-template-columns: repeat(2, 1fr); }
  .spec-strip__item { padding-left: 20px; }
  .spec-strip__item:nth-child(2) { border-right: none; }
  .spec-strip__item:nth-child(n + 3) { border-top: var(--line-width) solid var(--line); }
  .spec-strip__item:nth-child(3) { padding-left: 0; }
  .mechanism__steps { grid-template-columns: 1fr; }
  .mechanism__step { margin-right: 0; padding-right: 0; margin-bottom: 32px; }
  /* 图标排：13 个图标在 1024 下换两行，间距一起收 */
  .platform-row { gap: 20px 28px; }
  .cta-band { flex-direction: column; align-items: stretch; gap: 32px; padding: 32px; }
  .cta-aside { flex: 1 1 auto; }
}
@media (max-width: 768px) {
  .hero { padding: 40px 0 0; }
  .hero-title { font-size: 34px; margin: 12px 0 16px; }
  .hero-sub { font-size: 15px; margin-bottom: 24px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .spec-strip { margin-top: 48px; }
  .spec-strip__item { padding: 20px 0; padding-left: 16px; }
  .spec-strip__item dd { font-size: 22px; }
  .carousel-card { flex: 0 0 150px; width: 150px; }
  .mechanism { padding: 56px 0; }
  .mechanism__num { font-size: 32px; margin-bottom: 12px; }
  .mechanism__title { font-size: 20px; }
  .cap-grid { grid-template-columns: 1fr; }
  /* 手机上 13 个图标三行起步，再小一号免得挤成一团 */
  .platform-row { gap: 18px 24px; }
  .platform-row img { height: 38px; max-width: 84px; }
  .cta-band { padding: 24px; }
  .cta-actions .btn { flex: 1 1 auto; }
}