/* ============================================================
   生菜 · 全流程官网 — 编辑杂志感
   paper #F3EFE7 · ink #1A1A1A · green #3E7B33 / #8CC63F · dark #141414
   纪律：2px 硬边、零阴影、发丝分隔线，靠排版撑质感
   ============================================================ */

:root {
  --paper: #F3EFE7;
  --ink: #1A1A1A;
  --green: #3E7B33;
  --green-bright: #8CC63F;
  --dark: #141414;
  --body: #3A3A3A;
  --muted: #6B6B63;
  --dim: #9A9A92;
  --hairline: rgba(26, 26, 26, 0.2);
  --hairline-soft: rgba(26, 26, 26, 0.12);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  --latin: "Playfair Display", Georgia, serif;
  --pad: clamp(20px, 4.45vw, 64px);
  --sec: clamp(72px, 8.35vw, 120px);
  --radius: 2px;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--green); color: var(--paper); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.25; }
h1 { font-weight: 900; }

/* 行内标记：正文里的加粗与代码片段。
   代码用 --mono（Roboto Mono），不用浏览器默认 monospace，免得掉气质。
   刻意不拿 box-shadow 做描边 —— 好让「全站只有两处 box-shadow」这句始终成立。 */
strong { font-weight: 700; color: var(--ink); }
code {
  font: 500 0.9em/1 var(--mono);
  padding: 0.14em 0.4em;
  border-radius: 3px;
  background: rgba(62, 123, 51, 0.08);
  color: var(--ink);
  white-space: nowrap;
}

.shell {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

.dark { background: var(--dark); color: var(--paper); }

/* ---------- Shared pieces ---------- */

.eyebrow {
  font: 500 12px/1.6 var(--sans);
  letter-spacing: 0.08em;
  color: var(--green);
}
.eyebrow-bright { color: var(--green-bright); }

.section-head {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.section-head h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.23; }
.section-head .lead {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.9;
  color: var(--body);
  max-width: 62em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 28px;
  border-radius: var(--radius);
  font: 500 15px/1 var(--sans);
  transition: background-color 0.25s ease;
}
.btn:hover { background: var(--green); }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }

.link-underline {
  font: 400 15px/1 var(--sans);
  color: var(--ink);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.55);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.link-underline:hover { color: var(--green); border-color: var(--green); }

/* ---------- 01 · Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: rgba(243, 239, 231, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-zh { font: 700 21px/1 var(--serif); }
.brand-en { font: 400 11px/1 var(--latin); letter-spacing: 0.18em; color: var(--green); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav > a {
  font: 400 14px/1 var(--sans);
  color: var(--body);
  transition: color 0.2s ease;
}
.site-nav > a:hover { color: var(--green); }
.site-nav .btn { color: var(--paper); }
.site-nav .btn:hover { color: var(--paper); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 40px;
  height: 40px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  height: 1.6px;
  width: 100%;
  background: var(--ink);
  transition: transform 0.3s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.3px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.3px) rotate(-45deg); }

/* ---------- 02 · Hero ---------- */

.hero {
  padding-top: clamp(56px, 5.8vw, 84px);
  padding-bottom: clamp(64px, 6.7vw, 96px);
}

.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.mono-label {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--green);
}
.meta-line { width: 56px; height: 1px; background: rgba(26, 26, 26, 0.3); }
.meta-note { font: 400 12px/1 var(--sans); color: var(--body); }

.hero-row {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: clamp(36px, 3.9vw, 56px);
  align-items: start;
  margin-top: 40px;
}

.kicker {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--green);
}

.hero-copy { display: grid; gap: 26px; justify-items: start; }

.hero-copy h1 {
  font-size: clamp(42px, 5.56vw, 80px);
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.hero-copy h1 em { font-style: normal; color: var(--green); }

.hero-sub {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.9;
  color: var(--body);
  max-width: 34em;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.hero-trust { font: 400 13px/1.7 var(--sans); color: var(--muted); }

/* overflow: hidden 是必需的——动效层给 img 加了 transform: scale(1.045)，
   不裁切的话缩放后的图会撑出文档宽度，移动端出现 9px 横向滚动。
   .band / .footer-band / .grow-fig 本来就有，这里补齐保持一致。 */
.hero-visual { overflow: hidden; }
.hero-visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.hero-visual figcaption {
  margin-top: 12px;
  font: 400 12px/1.7 var(--sans);
  color: var(--muted);
}

/* ---------- 03 · 问题与方案 ---------- */

.why, .profile, .abilities, .misc, .deliver, .process, .teardown, .faq {
  padding-block: var(--sec);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 2.8vw, 40px);
  margin-top: clamp(40px, 4vw, 56px);
}

.compare-col { display: grid; gap: 24px; align-content: start; }
.compare-col::before { content: ""; display: block; }
.col-them::before { height: 1px; background: rgba(26, 26, 26, 0.35); }
.col-me::before { height: 3px; background: var(--green); }

.compare-col h3 {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.04em;
}
.col-them h3 { color: var(--muted); }
.col-me h3 { color: var(--green); }

.compare-col li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.76;
}
.compare-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
}
.col-them li { color: var(--body); }
.col-them li::before { background: rgba(26, 26, 26, 0.4); }
.col-me li { color: var(--ink); }
.col-me li::before { background: var(--green); }

/* ---------- 04 · 三步流程 ---------- */

.process h2 { font-size: clamp(28px, 2.8vw, 40px) !important; }

.steps { margin-top: clamp(40px, 4vw, 56px); }

.step {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: start;
  padding-block: 32px;
  border-top: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 1px solid var(--hairline); }

.step-no { font: 700 22px/1.4 var(--mono); color: var(--green); }

.step-body { display: grid; gap: 12px; }
.step-body h3 { font-size: clamp(22px, 2.08vw, 30px); line-height: 1.33; }
.step-body p { font-size: 16px; line-height: 1.875; color: var(--body); max-width: 46em; }

.step-tag {
  font: 500 12px/1.6 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  padding-top: 8px;
}

/* ---------- 05 · 视觉分隔带 ---------- */

.band { height: clamp(140px, 16.7vw, 240px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 06 · 核心特性 ---------- */

.feature-list {
  display: grid;
  gap: clamp(56px, 5vw, 72px);
  margin-top: clamp(48px, 5vw, 72px);
}

.feature {
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  gap: clamp(32px, 3.9vw, 56px);
  align-items: center;
}
.feature:nth-child(even) { grid-template-columns: minmax(0, 520px) 1fr; }
.feature:nth-child(even) .feature-copy { order: 2; }

.feature-copy { display: grid; gap: 18px; justify-items: start; }
.feature-no { font: 700 14px/1 var(--mono); color: var(--green); }
.feature-copy h3 { font-size: clamp(26px, 2.78vw, 40px); line-height: 1.3; }
.feature-copy p { font-size: clamp(15px, 1.18vw, 17px); line-height: 1.88; color: var(--body); }

.feature-media { overflow: hidden; border-radius: var(--radius); }
.feature-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------- 07 · 特性网格 ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 4vw, 56px);
}

.card {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 28px;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--green); transform: translateY(-2px); }

.card h3 { font-weight: 600; font-size: clamp(19px, 1.53vw, 22px); line-height: 1.36; }
.card p { font-size: 15px; line-height: 1.8; color: var(--body); }

/* ---------- 08 · 数据与口碑（暗） ---------- */

.words { padding-block: clamp(80px, 7.6vw, 110px); }

.words .section-head h2 { color: var(--paper); }

.stats {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(44px, 4.4vw, 64px);
}

.stat dt {
  font: 700 clamp(34px, 3.75vw, 54px)/1.1 var(--mono);
  letter-spacing: -0.02em;
}
.stat-green { color: var(--green-bright); }
.stat dd {
  margin-top: 10px;
  font: 400 13px/1.6 var(--sans);
  color: var(--dim);
}

.quote-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 2.8vw, 40px);
  margin-top: clamp(44px, 4.4vw, 64px);
  padding-top: clamp(40px, 4.4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.quote { border-top: 2px solid rgba(255, 255, 255, 0.22); padding-top: 20px; }
.quote blockquote {
  font: 400 clamp(17px, 1.4vw, 20px)/1.7 var(--serif);
  color: var(--paper);
}
.quote figcaption {
  margin-top: 20px;
  font: 500 13px/1.6 var(--sans);
  color: var(--green-bright);
}

/* ---------- 生菜档案 ---------- */

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(40px, 4vw, 56px);
}

.profile-card {
  display: grid;
  gap: 22px;
  align-content: start;
  padding-top: 26px;
  border-top: 3px solid var(--green);
}
.profile-card:nth-child(2) { border-top-color: rgba(26, 26, 26, 0.35); }

.profile-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font: 600 clamp(21px, 1.8vw, 26px)/1.35 var(--serif);
}
.profile-en {
  font: 400 11px/1 var(--latin);
  letter-spacing: 0.16em;
  color: var(--green);
}

.factsheet { display: grid; }
.factsheet > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.factsheet > div:last-child { border-bottom: 0; }
.factsheet dt { font: 500 13px/1.72 var(--sans); color: var(--green); }
.factsheet dd { font-size: 15px; line-height: 1.72; color: var(--body); }

/* 生长四步 */

.grow-strip {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--hairline);
}
.grow-title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; }
.grow-lead {
  margin-top: 12px;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.85;
  color: var(--muted);
}
.grow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.8vw, 36px);
  margin-top: clamp(32px, 3.4vw, 48px);
}
.grow-steps li {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 20px;
}
/* 顶线：灰底 + 绿色「生长」——滚动到位时从 0 长到 100% */
.grow-steps li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(26, 26, 26, 0.14);
}
.grow-steps li::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .grow-steps.is-in li::after { transform: scaleX(1); }
.js .grow-steps.is-in li:nth-child(2)::after { transition-delay: 0.14s; }
.js .grow-steps.is-in li:nth-child(3)::after { transition-delay: 0.28s; }
.js .grow-steps.is-in li:nth-child(4)::after { transition-delay: 0.42s; }

.grow-fig { margin: 0 0 4px; overflow: hidden; border-radius: var(--radius); }
.grow-fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.grow-day {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--green);
}
.grow-steps h4 { font: 600 18px/1.4 var(--serif); }
.grow-steps p { font-size: 14px; line-height: 1.8; color: var(--body); }

/* ---------- 能力细则（feature 内附的交付 / 工具 / 边界）---------- */

.feature-spec {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-soft);
}
.feature-spec > div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; }
.feature-spec dt { font: 500 13px/1.72 var(--sans); color: var(--green); }
.feature-spec dd { font-size: 14px; line-height: 1.75; color: var(--muted); }

/* ---------- 交付与规矩 ---------- */

.deliver-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: clamp(40px, 4vw, 56px);
}

.deliver-col { display: grid; gap: 22px; align-content: start; }
.deliver-col > h3 {
  font: 600 clamp(19px, 1.6vw, 23px)/1.4 var(--serif);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--green);
}
.deliver-col:nth-child(2) > h3 { border-bottom-color: rgba(26, 26, 26, 0.35); }

.deliver-list { display: grid; }
.deliver-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.deliver-list li:last-child { border-bottom: 0; }
.deliver-list b { font: 500 14px/1.72 var(--sans); color: var(--green); }
.deliver-list span { font-size: 15px; line-height: 1.78; color: var(--body); }

.refuse {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 4.4vw, 60px);
  padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink);
}
.refuse h3 { font: 600 clamp(18px, 1.5vw, 21px)/1.4 var(--serif); }
.refuse ul { display: grid; gap: 11px; }
.refuse li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
}
.refuse li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 1.5px;
  background: var(--ink);
}

/* ---------- 拆开给你看 ---------- */

.teardown-list { margin-top: clamp(40px, 4vw, 56px); display: grid; }

.teardown-list > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(24px, 2.8vw, 40px);
  align-items: start;
  padding-block: 32px;
  border-top: 1px solid var(--hairline);
}
.teardown-list > li:last-child { border-bottom: 1px solid var(--hairline); }

.td-no { font: 700 22px/1.4 var(--mono); color: var(--green); }
.teardown-list h3 { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.4; }
.teardown-list p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.88;
  color: var(--body);
  max-width: 50em;
}

/* ---------- 坦白脚注 ---------- */

.trust-caveat { color: var(--dim); }

.stats-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 14px;
  line-height: 1.85;
  color: var(--dim);
  max-width: 60em;
}
.note-tag {
  flex: none;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.08em;
  color: var(--dark);
  background: var(--green-bright);
  padding: 6px 10px;
  border-radius: var(--radius);
}

/* ---------- 09 · 问与答 ---------- */

.faq-list { margin-top: clamp(40px, 4vw, 56px); }

.faq-item {
  border-top: 1px solid var(--hairline);
  padding-block: 28px;
}
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }

.faq-item dt {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font: 600 clamp(19px, 1.53vw, 22px)/1.45 var(--serif);
}
.faq-no { font: 700 14px/1 var(--mono); color: var(--green); }

.faq-item dd {
  margin: 10px 0 0 80px;
  font-size: 16px;
  line-height: 1.875;
  color: var(--body);
}

/* ---------- 10 · 最终 CTA ---------- */

.contact { padding-block: clamp(96px, 10.4vw, 150px); }

.contact-inner { display: grid; gap: 30px; justify-items: start; }

.accent-rule { width: 96px; height: 4px; background: var(--green); }

.contact-inner h2 {
  font-size: clamp(34px, 4.45vw, 64px);
  line-height: 1.25;
  font-weight: 900;
}
.contact-inner .lead { max-width: 40em; }

.contact-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.mail {
  font: 400 15px/1 var(--mono);
  color: var(--green);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.mail:hover { border-color: var(--green); }

/* ---------- 11 · Footer ---------- */

.footer-band { height: clamp(200px, 22vw, 320px); overflow: hidden; }
.footer-band img { width: 100%; height: 100%; object-fit: cover; }

.footer-body { padding-top: clamp(48px, 5vw, 72px); }

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-brand { display: grid; gap: 14px; justify-items: start; align-content: start; }
.brand-row { display: inline-flex; align-items: center; gap: 10px; }
.footer-zh { font: 700 22px/1 var(--serif); color: var(--paper); }
.footer-tag { font: 400 15px/1.7 var(--sans); color: var(--dim); }
.footer-mail { font: 400 14px/1 var(--mono); color: var(--green-bright); }
.footer-mail:hover { text-decoration: underline; }

.footer-cols { display: flex; gap: clamp(40px, 4.4vw, 64px); flex-wrap: wrap; }

.footer-col { display: grid; gap: 14px; align-content: start; }
.footer-col h4 {
  font: 500 13px/1 var(--sans);
  color: var(--dim);
  margin-bottom: 4px;
}
.footer-col a {
  font: 400 15px/1.6 var(--sans);
  color: var(--paper);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--green-bright); }
.footer-col .soon { font: 400 15px/1.6 var(--sans); color: var(--dim); cursor: default; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3vw, 40px);
  padding-block: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-bottom p { font: 400 12px/1.8 var(--sans); color: var(--muted); }
.footer-bottom .colophon { font-family: var(--mono); }

/* ============================================================
   动效层
   纪律：一个签名动效（印刷揭幕）+ 三处辅助（错峰、生长线、进度）
   不引任何库——原生 CSS，全站仍然零依赖
   ============================================================ */

/* ---------- 基础入场 ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 签名动效 · 印刷揭幕 ----------
   图片不是淡入，而是像印刷机滚筒扫过，从右往左把画面「盖」下来。
   clip-path 走 GPU，不触发重排。 */

.js .hero-visual img,
.js .feature-media img,
.js .grow-fig img,
.js .band img,
.js .footer-band img {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.045);
  transition: clip-path 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .hero-visual.is-in img,
.js .feature.is-in .feature-media img,
.js .grow-steps.is-in .grow-fig img,
.js .band.is-in img,
.js .footer-band.is-in img {
  clip-path: inset(0 0 0 0);
  transform: none;
}
/* 生长四阶段依次扫开 */
.js .grow-steps.is-in > li:nth-child(2) .grow-fig img { transition-delay: 0.13s; }
.js .grow-steps.is-in > li:nth-child(3) .grow-fig img { transition-delay: 0.26s; }
.js .grow-steps.is-in > li:nth-child(4) .grow-fig img { transition-delay: 0.39s; }

/* ---------- 辅助 · 列表错峰 ---------- */

.js .stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: 0.06s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: 0.12s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 0.18s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 0.24s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: 0.3s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: 0.36s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: 0.42s; }
.js .stagger.is-in > *:nth-child(9) { transition-delay: 0.48s; }
.js .stagger.is-in > *:nth-child(n + 10) { transition-delay: 0.54s; }

/* ---------- 辅助 · 阅读进度条 ---------- */

.read-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.read-progress i {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- 页脚彩蛋 ---------- */

.footer-egg { position: relative; }

.footer-giant {
  display: block;
  width: 100%;
  margin-top: clamp(32px, 4vw, 56px);
  text-align: center;
  font: 900 clamp(96px, 12.5vw, 180px)/1 var(--serif);
  color: rgba(243, 239, 231, 0.07);
  user-select: none;
  transition: color 0.45s ease, letter-spacing 0.45s ease;
}
.footer-giant:hover { color: rgba(140, 198, 63, 0.22); letter-spacing: 0.02em; }

.footer-egg-line {
  min-height: 1.9em;
  margin-top: 4px;
  text-align: center;
  font: 400 15px/1.9 var(--sans);
  color: var(--green-bright);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.footer-egg-line.on { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr minmax(0, 44%); }
  .feature:nth-child(even) { grid-template-columns: minmax(0, 44%) 1fr; }
  .grow-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
  .hero-visual img { aspect-ratio: 4 / 5; }

  .compare { grid-template-columns: 1fr; gap: 48px; }

  .profile-grid,
  .deliver-grid { grid-template-columns: 1fr; gap: 44px; }

  .feature,
  .feature:nth-child(even) { grid-template-columns: 1fr; }
  .feature-media { order: -1; }
  .feature-media img { aspect-ratio: 16 / 10; }

  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }

  .quote-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }

  .header-inner { height: 64px; }

  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px var(--pad) 24px;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--hairline);
  }
  .nav-open .site-nav { display: flex; }
  .site-nav > a { font-size: 18px; padding: 12px 0; }
  .site-nav .btn { margin-top: 12px; justify-content: center; }

  .step { grid-template-columns: 40px 1fr; }
  .step-tag { grid-column: 2; padding-top: 0; }

  .factsheet > div { grid-template-columns: 76px 1fr; gap: 14px; }
  .teardown-list > li { grid-template-columns: 40px 1fr; }
  .deliver-list li { grid-template-columns: 56px 1fr; gap: 14px; }
  .feature-spec > div { grid-template-columns: 42px 1fr; }

  .faq-item dd { margin-left: 56px; }

  .footer-top { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
  .contact-cta .btn { width: 100%; }
  .faq-item dd { margin-left: 0; }
  .grow-steps { grid-template-columns: 1fr; gap: 28px; }
  .deliver-list li { grid-template-columns: 1fr; gap: 4px; }
  .deliver-list b { color: var(--muted); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js .hero-visual img,
  .js .feature-media img,
  .js .grow-fig img,
  .js .band img,
  .js .footer-band img {
    clip-path: none;
    transform: none;
    transition: none;
  }
  .js .grow-steps li::after { transform: scaleX(1); transition: none; }
  .read-progress i { transition: none; }
  .card:hover { transform: none; }
  .footer-giant { transition: none; }
  .footer-giant:hover { letter-spacing: normal; }
}

/* ---------- 12 · 404 页 ---------- */
/* 单独一页，全部选择器以 .e404 起头，不碰主站任何规则 */

/* 注意：只能用 padding-top/bottom 长写。
   用 padding 简写会把 .shell 的 padding-inline: var(--pad) 一起清成 0，
   内容就会顶到视口边缘（实测移动端因此横向溢出） */
.e404 { padding-top: 96px; padding-bottom: 104px; }

.e404-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.e404-code {
  font: 700 clamp(70px, 11vw, 150px)/0.88 var(--mono);
  letter-spacing: -0.035em;
  color: var(--green);
  margin-bottom: 10px;
}

.e404 h1 { font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 18px; }

.e404 .lead { max-width: 44ch; }

.e404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}

.e404-links {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.e404-links h2 {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.e404-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.e404-links a {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.e404-links a:hover { color: var(--green); border-bottom-color: var(--green); }

@media (max-width: 900px) {
  .e404 { padding-top: 64px; padding-bottom: 72px; }
  .e404-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 640px) {
  .e404-actions .btn { width: 100%; text-align: center; }
  .e404-links ul { flex-direction: column; gap: 12px; }
}