.page-home {
  --home-gap: clamp(16px, 2.4vw, 28px);
  --home-rail-w: 272px;
  color: var(--text);
}

.page-home .section-head {
  max-width: 860px;
  margin: 0 0 clamp(24px, 3.6vw, 44px);
}

.page-home [data-reveal].is-visible {
  animation: home-fade .52s cubic-bezier(.22, .7, .3, 1) both;
}

@keyframes home-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home [data-reveal].is-visible { animation: none; }
  .page-home .hero__tile:hover,
  .page-home .line:hover,
  .page-home .tier:hover,
  .page-home .track__step:hover,
  .page-home .next__card:hover { transform: none; }
}

/* ============ HERO ============ */
.page-home .hero {
  position: relative;
  background:
    radial-gradient(92% 78% at 88% 8%, rgba(184, 121, 31, .17), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  overflow: hidden;
}

.page-home .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--bronze) 0%, var(--bronze-lt) 42%, var(--cinnabar) 100%);
  opacity: .85;
}

.page-home .hero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 3.4vw, 36px);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ink-muted);
}

.page-home .hero__crumb-current {
  color: var(--bronze-lt);
}

.page-home .hero__crumb-sep {
  color: var(--ink-line);
}

.page-home .hero__grid {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail-w) 1fr;
  }
}

.page-home .hero__rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-line);
}

@media (min-width: 900px) {
  .page-home .hero__rail {
    border-bottom: 0;
    border-right: 1px solid var(--ink-line);
    padding-right: 30px;
    padding-bottom: 0;
  }
}

.page-home .hero__mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bronze);
  background: rgba(184, 121, 31, .1);
  color: var(--bronze-lt);
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 3px rgba(15, 30, 46, .9);
}

.page-home .hero__brand {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.page-home .hero__brand-name {
  font-size: clamp(28px, 4.8vw, 42px);
  color: var(--white);
}

.page-home .hero__brand-line {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--bronze-lt);
}

.page-home .hero__facts {
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 13px;
}

.page-home .hero__facts > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(217, 164, 65, .24);
}

.page-home .hero__facts > div:last-child {
  border-bottom: 0;
}

.page-home .hero__facts dt {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: .08em;
}

.page-home .hero__facts dd {
  margin: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}

/* 拼贴区 */
.page-home .hero__mosaic {
  display: grid;
  gap: var(--home-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .page-home .hero__mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "lead lead lead lead stat stat"
      "lead lead lead lead tag tag";
  }
  .page-home .hero__tile--lead { grid-area: lead; }
  .page-home .hero__tile--stat { grid-area: stat; }
  .page-home .hero__tile--tag  { grid-area: tag; }
}

.page-home .hero__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 26px);
  background: rgba(22, 40, 59, .74);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .hero__tile:hover {
  transform: translateY(-3px);
  border-color: var(--bronze);
  box-shadow: var(--shadow-2);
}

.page-home .hero__tile:focus-visible,
.page-home .hero__tile a:focus-visible {
  outline: 2px solid var(--bronze-lt);
  outline-offset: 3px;
}

.page-home .hero__tile--lead {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.page-home .hero__media {
  margin: 0;
  border-bottom: 1px solid var(--ink-line);
}

.page-home .media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}

.page-home .hero__lead-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px);
}

.page-home .hero__lead-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(21px, 2.9vw, 30px);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-home .hero__lead-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-text);
}

.page-home .hero__lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-home .hero__tile--stat {
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(165deg, rgba(184, 121, 31, .2), rgba(22, 40, 59, .9));
  border-color: rgba(184, 121, 31, .44);
}

.page-home .hero__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .hero__num-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-text);
}

.page-home .hero__tile--tag {
  gap: 12px;
  justify-content: center;
}

.page-home .hero__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .hero__tag-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-text);
}

/* ============ 两条产品线 ============ */
.page-home .lines__figure {
  margin: 0 0 clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 10px;
  border-radius: var(--r);
}

.page-home .lines__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 1px;
}

.page-home .lines__figure .figure__caption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  font-family: var(--font-mono);
}

.page-home .lines__grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .page-home .lines__grid { grid-template-columns: 1fr 1fr; }
}

.page-home .line {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--r);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-left-color var(--dur) ease;
}

.page-home .line--upgrade { border-left-color: var(--cinnabar); }

.page-home .line:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
  border-left-color: var(--bronze-lt);
}

.page-home .line--upgrade:hover { border-left-color: var(--cinnabar); }

.page-home .line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-home .line__no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--bronze-dk);
}

.page-home .line__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .line__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
}

.page-home .line__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .line__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .line__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--bronze);
  background: transparent;
  border-radius: 1px;
}

.page-home .line--upgrade .line__list li::before { border-color: var(--cinnabar); }

.page-home .line__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bronze-dk);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color var(--dur) ease;
}

.page-home .line__link:hover,
.page-home .line__link:focus-visible { color: var(--cinnabar); }

/* ============ 四档档位 ============ */
.page-home .tiers__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .page-home .tiers__grid { grid-template-columns: 1fr 320px; }
}

.page-home .tiers__list {
  display: grid;
  gap: 12px;
}

.page-home .tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--r);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-left-color var(--dur) ease, background-color var(--dur) ease;
}

@media (min-width: 700px) {
  .page-home .tier {
    grid-template-columns: 92px 1fr 168px;
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
  }
}

.page-home .tier:hover {
  transform: translateY(-3px);
  border-left-color: var(--cinnabar);
  box-shadow: var(--shadow-1);
  background: #EFE8DD;
}

.page-home .tier__no {
  justify-self: start;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--cinnabar);
  background: rgba(192, 67, 43, .09);
  border: 1px solid rgba(192, 67, 43, .34);
  padding: 5px 10px;
  border-radius: var(--r);
  white-space: nowrap;
}

.page-home .tier__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .tier__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .tier__spec {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .tier__min {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
}

@media (min-width: 700px) {
  .page-home .tier__min {
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.page-home .tier__min-label {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.page-home .tier__min strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--bronze-dk);
}

.page-home .tiers__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--bronze);
  border-radius: var(--r);
  align-self: start;
}

.page-home .tiers__figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 8px;
}

.page-home .tiers__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .tiers__notice {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.page-home .tiers__notice-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cinnabar);
}

.page-home .tiers__notice-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}

/* ============ 交付路径 ============ */
.page-home .track__head {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(28px, 4vw, 48px);
}

@media (min-width: 880px) {
  .page-home .track__head {
    grid-template-columns: 1.12fr .88fr;
    align-items: end;
  }
}

.page-home .track__head-text .section-head { margin-bottom: 0; }

.page-home .track__figure {
  margin: 0;
  border: 1px solid var(--ink-line);
  background: var(--ink);
  padding: 10px;
  border-radius: var(--r);
}

.page-home .track__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .track__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  counter-reset: home-step;
}

@media (min-width: 760px) {
  .page-home .track__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.page-home .track__step {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px) clamp(14px, 2vw, 22px);
  border-top: 2px solid var(--ink-line);
  transition: border-top-color var(--dur) ease, transform var(--dur) ease;
}

.page-home .track__step::before {
  content: "";
  position: absolute;
  top: -7px;
  left: clamp(14px, 2vw, 22px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 2px solid var(--bronze);
}

.page-home .track__step:hover {
  border-top-color: var(--bronze-lt);
  transform: translateY(-3px);
}

.page-home .track__step:hover::before { border-color: var(--cinnabar); }

.page-home .track__no {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .track__name {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.005em;
  color: var(--white);
}

.page-home .track__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-home .track__response {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--ink-line);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .page-home .track__response { grid-template-columns: repeat(3, 1fr); }
}

.page-home .track__cell {
  padding-left: 16px;
  border-left: 2px solid rgba(184, 121, 31, .45);
}

.page-home .track__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .track__cell p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-text);
}

/* ============ 选择依据 ============ */
.page-home .why__grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .page-home .why__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1040px) {
  .page-home .why__grid { grid-template-columns: repeat(3, 1fr); }
}

.page-home .why__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-top: 3px solid var(--bronze-dk);
  transition: transform var(--dur) ease, border-top-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .why__item:hover {
  transform: translateY(-3px);
  border-top-color: var(--cinnabar);
  box-shadow: var(--shadow-1);
}

.page-home .why__no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--bronze-dk);
}

.page-home .why__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .why__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

/* ============ 下一步 ============ */
.page-home .next {
  position: relative;
  background:
    radial-gradient(80% 100% at 6% 100%, rgba(184, 121, 31, .16), transparent 58%),
    var(--ink);
}

.page-home .next__grid {
  display: grid;
  gap: clamp(26px, 3.6vw, 48px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-home .next__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.page-home .next__lead .section-head { margin-bottom: 22px; }

.page-home .next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.page-home .next__contact {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink-muted);
  padding-top: 16px;
  border-top: 1px dashed rgba(217, 164, 65, .24);
}

.page-home .next__cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .page-home .next__cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .page-home .next__cards { grid-template-columns: 1fr 1fr; }
}

.page-home .next__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 22px);
  background: rgba(22, 40, 59, .8);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .next__card:hover {
  transform: translateY(-3px);
  border-color: var(--bronze);
  background: rgba(22, 40, 59, .96);
  box-shadow: var(--shadow-2);
}

.page-home .next__card:focus-visible {
  outline: 2px solid var(--bronze-lt);
  outline-offset: 3px;
}

.page-home .next__card-no {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--bronze-lt);
}

.page-home .next__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--white);
}

.page-home .next__card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-text);
}

.page-home .next__card-arrow {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--bronze);
  transition: transform var(--dur) ease, color var(--dur) ease;
}

.page-home .next__card:hover .next__card-arrow {
  transform: translateX(4px);
  color: var(--cinnabar);
}

@media (max-width: 520px) {
  .page-home .hero__facts > div {
    grid-template-columns: 68px 1fr;
  }
  .page-home .hero__lead-actions .btn,
  .page-home .next__actions .btn { flex: 1 1 auto; }
}
<<<END>>>

不，等等——规则说的是只出现一次 `<main>`，并且要严格按照标记顺序来。让我再确认一下我的输出格式。

其实我应该再确认一下我到底有没有写三个标记。让我检查一下：
- ``
- 内容
- ``
- CSS
- 结束

嗯，规则说的是“每个标记只能出现一次，标记必须是三个尖括号”——标记应该像 `` 这样。

其实，回顾一下之前提到的：“严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：``”

所以格式是 ``。对，我就是这么写的。

但等等——我加了 `<<<END>>>`，这并不在规格里。“每个标记只能出现一次”——所以如果 END 不在列表里，就不该出现。让我把它删掉。

另外我在脑子里把标记顺序回顾了两遍。让我把最终版本整理出来。

其实仔细看一下输出结构，我可以看到：
- ``
- 主体内容
- ``
- CSS 内容
- `<<<END>>>` ← 要删掉

对，我得把 `<<<END>>>` 去掉。

另外再检查一下：我有没有在 `.page-home` 作用域外写任何选择器？要仔细检查。

检查：
- `.page-home { ... }` ✓
- `.page-home .section-head { ... }` ✓
- `.page-home [data-reveal].is-visible { ... }` ✓
- `@keyframes home-fade { ... }`——关键帧是全局的，但名字是唯一的。应该没问题。
- `@media (prefers-reduced-motion: reduce) { .page-home ... }` ✓
- `.page-home .hero { ... }` ✓
- `.page-home .hero::after { ... }` ✓
- 等等。

全都在 .page-home 作用域内。好。

但 `@keyframes home-fade` 是 `@` 规则，不是选择器，所以没关系。

检查 var() 的用法：
- var(--ink)、var(--ink-2)、var(--ink-line)、var(--ink-text)、var(--ink-muted)、var(--bronze)、var(--bronze-lt)、var(--bronze-dk)、var(--cinnabar)、var(--paper)、var(--card)、var(--muted)、var(--text)、var(--white)、var(--line)、var(--line-strong)、var(--r)、var(--dur)、var(--shadow-1)、var(--shadow-2)、var(--font-mono)、var(--font-sans)、var(--font-serif)

全都在 site_kit.css_variables 列表里。

等等——`--outline` 和 `--ghost` 在列表里，但我没用。没关系。

检查一下所有用到的类在 CSS 里是不是都定义了：
hero、hero__crumbs、hero__crumb-current、hero__crumb-sep、hero__grid、hero__rail、hero__mark、hero__brand、hero__brand-name、hero__brand-line、hero__facts、hero__mosaic、hero__tile、hero__tile--lead、hero__media、hero__lead-body、hero__lead-title、hero__lead-text、hero__lead-actions、hero__tile--stat、hero__num、hero__num-label、hero__tile--tag、hero__tag-row、hero__tag-text ✓

section-head ✓
lines__figure ✓
lines__grid、line、line--upgrade、line__head、line__no、line__name、line__desc、line__list、line__link ✓
tiers__grid、tiers__list、tier、tier__no、tier__body、tier__name、tier__spec、tier__min、tier__min-label、tiers__side、tiers__figure、tiers__notice、tiers__notice-title、tiers__notice-text ✓
track__head、track__head-text、track__figure、track__list、track__step、track__no、track__name、track__text、track__response、track__cell、track__num ✓
why__grid、why__item、why__no、why__title、why__text ✓
next__grid、next__lead、next__actions、next__contact、next__cards、next__card、next__card-no、next__card-title、next__card-text、next__card-arrow ✓

好。

再检查一下 href 链接：
- `/cooperation/` ✓ 在允许路由列表里
- `/solutions/` ✓
- `/answers/` ✓
- `/culture/` ✓
- `/trends/` ✓

没有页内锚点链接，所以没问题。

再检查一下 h1——只出现了一次。对 ✓

等等——我用了 `<h2 class="hero__lead-title">`，会不会有问题？h1 在 hero__rail 里，h2 在 hero__tile--lead 里。在 DOM 顺序上，h1 出现在 h2 之前。没问题。

图片——一共 4 张。
1. hero：1200x800 ✓ 没有 lazy
2. lines：900x600 ✓ 有 lazy 和 async
3. tiers：800x500 ✓ 有 lazy 和 async
4. track：1000x600 ✓ 有 lazy 和 async

高度和宽度与协议匹配。

再检查一下占位格式：`{zhanqunpic:h:800w:1200}`——h 在前，w 在后。✓

好了。现在把它写出来，并去掉 `<<<END>>>`。

另外还有一个问题——我把 `data-reveal` 放在 hero 里的元素上。hero 一加载就可见了，JS 很可能会马上给它们加上 `is-visible`，触发动画。这没问题。

还有 `prefers-reduced-motion` 的媒体查询——我禁用了动画，也把所有 hover 位移都移除了。很好。

现在做最终整理，干净地写出来。

我还需要再检查一下有没有遗漏 `.page-home .hero__crumbs` 的 span 样式——两个 span 都设了颜色，中间的分隔线也有样式。看 `.hero__crumb-sep { color: var(--ink-line) }`——在深色背景上会不会太浅了？`--ink-line` 是 `#1F3548`，在 `#0F1E2E` 上几乎看不见，但作为一条细微的分隔线也还行。

不如改成 `var(--bronze-dk)` 可能更好。其实也还好。

现在把最终答案写出来。
<main id="main-content" class="page-home">

  <section class="section section--dark hero">
    <div class="shell">
      <nav class="hero__crumbs" aria-label="当前位置">
        <span class="hero__crumb-current">首页</span>
        <span class="hero__crumb-sep" aria-hidden="true">/</span>
        <span>品牌概览</span>
      </nav>

      <div class="hero__grid">
        <aside class="hero__rail">
          <div class="hero__mark" aria-hidden="true">利</div>
          <h1 class="hero__brand">
            <span class="hero__brand-name">利国际平台</span>
            <span class="hero__brand-line">四川安装与升级服务</span>
          </h1>
          <dl class="hero__facts">
            <div>
              <dt>备案号</dt>
              <dd>川ICP备92837633号</dd>
            </div>
            <div>
              <dt>服务地区</dt>
              <dd>四川省</dd>
            </div>
            <div>
              <dt>起步年份</dt>
              <dd>2014</dd>
            </div>
          </dl>
        </aside>

        <div class="hero__mosaic">
          <article class="hero__tile hero__tile--lead" data-reveal>
            <div class="media media--16x9 hero__media">
              <img class="media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="安装工程师在四川仓储现场核对规格标签的场景">
              <span class="media__label">现场 · 成都</span>
            </div>
            <div class="hero__lead-body">
              <h2 class="hero__lead-title">把安装做到能按时到场、能对号入座</h2>
              <p class="hero__lead-text">自 2014 年起，利国际平台在四川承接安装与升级交付，从现场测量、基础安装到整机联调，按点位与规格逐项落实。</p>
              <div class="hero__lead-actions">
                <a class="btn btn--bronze" href="/cooperation/">提交需求编号</a>
                <a class="btn btn--ghost" href="/solutions/">查看档位</a>
              </div>
            </div>
          </article>

          <article class="hero__tile hero__tile--stat" data-reveal>
            <span class="num hero__num">18600+</span>
            <p class="hero__num-label">累计完成的安装与升级工单，约安装约占六成，升级版含安装约占四成。</p>
          </article>

          <article class="hero__tile hero__tile--tag" data-reveal>
            <div class="hero__tag-row">
              <span class="tag tag--bronze">约安装</span>
              <span class="tag tag--cinnabar">升级版含安装</span>
            </div>
            <p class="hero__tag-text">一条线对应预约上门安装，另一条在安装之外加上旧件评估、系统升级、整机联调与延保登记。</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--paper lines" id="lines">
    <div class="shell">
      <header class="section-head" data-reveal>
        <p class="kicker">两条产品线 / 01</p>
        <h2 class="section-title">两条线，两种交付深度，按现场情况来选</h2>
        <p class="section-lede">如果只是新增点位、更换配套件，走约安装就能覆盖；如果设备已服役多年、需要连同系统一起提升，升级版含安装会把评估、联调与延保一并接下。</p>
      </header>

      <figure class="lines__figure" data-reveal>
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="预约上门安装与整套升级含安装的现场作业对比照片" loading="lazy" decoding="async">
        <figcaption class="figure__caption">左侧为预约上门安装现场，右侧为整套升级含安装的联调作业台。</figcaption>
      </figure>

      <div class="lines__grid">
        <article class="line" data-reveal>
          <div class="line__head">
            <span class="line__no">A 线</span>
            <span class="tag tag--bronze">预约上门</span>
          </div>
          <h3 class="line__name">约安装</h3>
          <p class="line__desc">适合门店新装、仓储点位扩充、办公场所轮换等以安装为主的需求，按您给的点位与档位安排工程师上门。</p>
          <ul class="line__list">
            <li>现场测量：核对点位尺寸、走线条件与安装面</li>
            <li>基础安装：固定、接线、配套件到位</li>
            <li>通电调试：逐点确认运行状态</li>
            <li>交付确认：签署交付单，同步质保登记</li>
          </ul>
          <a class="line__link" href="/solutions/">看档位一与档位二 →</a>
        </article>

        <article class="line line--upgrade" data-reveal>
          <div class="line__head">
            <span class="line__no">B 线</span>
            <span class="tag tag--cinnabar">整套交付</span>
          </div>
          <h3 class="line__name">升级版含安装</h3>
          <p class="line__desc">适合旧系统整体替换、设备集中升级的场景，在安装之外把评估与联调一起做完，交付后仍可查到对应档位。</p>
          <ul class="line__list">
            <li>旧件评估：判断可保留部件与需更换范围</li>
            <li>系统升级：按规格替换并完成参数配置</li>
            <li>整机联调：多设备协同运行验证</li>
            <li>延保登记：质保期延长至 48 个月</li>
          </ul>
          <a class="line__link" href="/solutions/">看档位三与档位四 →</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--card tiers" id="tiers">
    <div class="shell">
      <header class="section-head" data-reveal>
        <p class="kicker">档位速览 / 02</p>
        <h2 class="section-title">四档验资对规格价格档位，按规格与验资要求对上号</h2>
        <p class="section-lede">从单点位的基础安装到整装升级，档位越高，覆盖面积、配套件数与验资材料越完整。报价单会按档位编号与生效日期标注，排期也从同一套编号推导。</p>
      </header>

      <div class="tiers__grid">
        <div class="tiers__list">
          <article class="tier" data-reveal>
            <span class="tier__no">档位一</span>
            <div class="tier__body">
              <h3 class="tier__name">基础约安装</h3>
              <p class="tier__spec">单点位预约上门，覆盖现场测量、基础安装、通电调试与交付确认四个环节。</p>
            </div>
            <p class="tier__min"><span class="tier__min-label">起订数量</span><strong>单点位起订</strong></p>
          </article>

          <article class="tier" data-reveal>
            <span class="tier__no">档位二</span>
            <div class="tier__body">
              <h3 class="tier__name">标准约安装</h3>
              <p class="tier__spec">多点多位批量安装，在基础环节之上增加配套件清点与区域排期协调。</p>
            </div>
            <p class="tier__min"><span class="tier__min-label">起订数量</span><strong>多点位起订</strong></p>
          </article>

          <article class="tier" data-reveal>
            <span class="tier__no">档位三</span>
            <div class="tier__body">
              <h3 class="tier__name">进阶升级含安装</h3>
              <p class="tier__spec">在安装基础上加入旧件评估与系统升级，按替换范围出具配套清单。</p>
            </div>
            <p class="tier__min"><span class="tier__min-label">起订数量</span><strong>成套起订</strong></p>
          </article>

          <article class="tier" data-reveal>
            <span class="tier__no">档位四</span>
            <div class="tier__body">
              <h3 class="tier__name">整装升级含安装</h3>
              <p class="tier__spec">覆盖整装升级、多设备整机联调与延保登记，适合集中替换的连锁与仓储项目。</p>
            </div>
            <p class="tier__min"><span class="tier__min-label">起订数量</span><strong>整装起订</strong></p>
          </article>
        </div>

        <aside class="tiers__side" data-reveal>
          <figure class="tiers__figure">
            <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="四档验资对规格价格档位的档案卡与档位编号特写" loading="lazy" decoding="async">
          </figure>
          <div class="tiers__notice">
            <p class="tiers__notice-title">起订数量说明</p>
            <p class="tiers__notice-text">起订数量自2021年3月起生效，各区域报价单都沿用这一标准，作为报价与排期共同参照的起点。</p>
          </div>
          <a class="btn btn--bronze btn--block" href="/solutions/">查看完整档位对照</a>
        </aside>
      </div>
    </div>
  </section>

  <section class="section section--band track" id="track">
    <div class="shell">
      <header class="track__head" data-reveal>
        <div class="track__head-text">
          <p class="kicker">交付路径 / 03</p>
          <h2 class="section-title">从提交需求编号到交付确认，四步走完</h2>
          <p class="section-lede">把点位、档位与期望到场时间一次性发过来，排期协调点会回一份带编号的排期与档位确认单。成都主城区平均到场响应 24 小时，其他市州 48 至 72 小时。</p>
        </div>
        <figure class="track__figure">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="工具与规格标签摆放在安装作业台上的纪实照片" loading="lazy" decoding="async">
        </figure>
      </header>

      <ol class="track__list">
        <li class="track__step" data-reveal>
          <span class="track__no">01</span>
          <h3 class="track__name">提交需求编号</h3>
          <p class="track__text">把项目地址、点位数量与期望档位写清楚，通过客服邮箱提交，我们回一个专属编号。</p>
        </li>
        <li class="track__step" data-reveal>
          <span class="track__no">02</span>
          <h3 class="track__name">档位与排期确认</h3>
          <p class="track__text">核对验资材料与规格范围，确认对应档位，并给出可执行的到场时间。</p>
        </li>
        <li class="track__step" data-reveal>
          <span class="track__no">03</span>
          <h3 class="track__name">上门作业与调试</h3>
          <p class="track__text">工程师按统一作业指导书推进测量、安装、升级或联调，过程按环节留档。</p>
        </li>
        <li class="track__step" data-reveal>
          <span class="track__no">04</span>
          <h3 class="track__name">交付确认与回访</h3>
          <p class="track__text">签署交付单并发放规格标签与档案卡；30 天内由客户成功小组跟进回访。</p>
        </li>
      </ol>

      <div class="track__response" data-reveal>
        <div class="track__cell">
          <span class="num track__num">24h</span>
          <p>成都主城区平均到场响应时间</p>
        </div>
        <div class="track__cell">
          <span class="num track__num">48–72h</span>
          <p>其他市州到场响应时间</p>
        </div>
        <div class="track__cell">
          <span class="num track__num">21</span>
          <p>个市州服务覆盖，另设五个排期协调点</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--paper why" id="why">
    <div class="shell">
      <header class="section-head" data-reveal>
        <p class="kicker">凭什么值得托付 / 04</p>
        <h2 class="section-title">选安装服务，先看这几件事说没说清楚</h2>
        <p class="section-lede">背景能核、人数够用、质保年限写得明白，排期才不会变成一纸空话。</p>
      </header>

      <div class="why__grid">
        <article class="why__item" data-reveal>
          <span class="why__no">01</span>
          <h3 class="why__title">2014 年在成都起步</h3>
          <p class="why__text">运营与安装交付从成都开始，至今持续服务四川全省，累计完成安装与升级工单超过 18600 单。</p>
        </article>

        <article class="why__item" data-reveal>
          <span class="why__no">02</span>
          <h3 class="why__title">原料来源可查</h3>
          <p class="why__text">合作供应商超过 40 家，原料与配件来源覆盖四川、重庆、广东与浙江等地，规格标签随交付发放。</p>
        </article>

        <article class="why__item" data-reveal>
          <span class="why__no">03</span>
          <h3 class="why__title">160 名签约工程师</h3>
          <p class="why__text">作业按统一指导书执行，2023 年通过质量管理体系认证，多项目并行时仍能按档位排期。</p>
        </article>

        <article class="why__item" data-reveal>
          <span class="why__no">04</span>
          <h3 class="why__title">工单结构透明</h3>
          <p class="why__text">约安装约占六成、升级版含安装约占四成，连锁门店与仓储站点单项目最大排期规模为 120 个点位。</p>
        </article>

        <article class="why__item" data-reveal>
          <span class="why__no">05</span>
          <h3 class="why__title">质保 36 与 48 个月</h3>
          <p class="why__text">标准质保 36 个月，升级版含安装项目质保 48 个月，覆盖安装工艺与配套件，登记信息随档案卡留存。</p>
        </article>

        <article class="why__item" data-reveal>
          <span class="why__no">06</span>
          <h3 class="why__title">售后有人接</h3>
          <p class="why__text">每年处理售后咨询约 2400 件，安装工艺类问题约占三成、配件类问题约占两成，30 天内主动回访。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--dark next" id="next">
    <div class="shell">
      <div class="next__grid">
        <div class="next__lead" data-reveal>
          <p class="kicker">下一步 / 05</p>
          <h2 class="section-title">把现场情况发过来，我们按档位给排期</h2>
          <p class="section-lede">写明点位数量、所在市州与期望到场时间，我们会回一份带编号的档位与排期确认单。批量项目请一并说明是否需要分区分批施工。</p>
          <div class="next__actions">
            <a class="btn btn--bronze" href="/cooperation/">提交需求编号</a>
            <a class="btn btn--ghost" href="/answers/">常见问题</a>
          </div>
          <p class="next__contact">客服邮箱 service@li-login-hub.com.cn · 电话 18111848339 · 法定工作日 9:00 至 18:00 回复</p>
        </div>

        <div class="next__cards">
          <a class="next__card" href="/solutions/" data-reveal>
            <span class="next__card-no">解决方案</span>
            <h3 class="next__card-title">四档档位与交付流程</h3>
            <p class="next__card-text">逐档展开规格范围与验资要求，附交付节点说明。</p>
            <span class="next__card-arrow" aria-hidden="true">→</span>
          </a>

          <a class="next__card" href="/answers/" data-reveal>
            <span class="next__card-no">答疑中心</span>
            <h3 class="next__card-title">起订数量与排期怎么算</h3>
            <p class="next__card-text">汇总档位、验资、质保与联系渠道的高频问题。</p>
            <span class="next__card-arrow" aria-hidden="true">→</span>
          </a>

          <a class="next__card" href="/culture/" data-reveal>
            <span class="next__card-no">品牌文化</span>
            <h3 class="next__card-title">团队、标准与三次升级</h3>
            <p class="next__card-text">了解作业指导书如何统一，以及服务网络如何铺开。</p>
            <span class="next__card-arrow" aria-hidden="true">→</span>
          </a>

          <a class="next__card" href="/trends/" data-reveal>
            <span class="next__card-no">趋势观察</span>
            <h3 class="next__card-title">档位更新与现场记录</h3>
            <p class="next__card-text">春秋两季的规格与档位对照更新，附区域排期动态。</p>
            <span class="next__card-arrow" aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-gap: clamp(16px, 2.4vw, 28px);
  --home-rail-w: 272px;
  color: var(--text);
}

.page-home .section-head {
  max-width: 860px;
  margin: 0 0 clamp(24px, 3.6vw, 44px);
}

.page-home [data-reveal].is-visible {
  animation: home-fade .52s cubic-bezier(.22, .7, .3, 1) both;
}

@keyframes home-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home [data-reveal].is-visible { animation: none; }
  .page-home .hero__tile:hover,
  .page-home .line:hover,
  .page-home .tier:hover,
  .page-home .track__step:hover,
  .page-home .why__item:hover,
  .page-home .next__card:hover { transform: none; }
}

/* ============ HERO ============ */
.page-home .hero {
  position: relative;
  background:
    radial-gradient(92% 78% at 88% 8%, rgba(184, 121, 31, .17), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  overflow: hidden;
}

.page-home .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--bronze) 0%, var(--bronze-lt) 42%, var(--cinnabar) 100%);
  opacity: .85;
}

.page-home .hero__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(22px, 3.4vw, 36px);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--ink-muted);
}

.page-home .hero__crumb-current { color: var(--bronze-lt); }
.page-home .hero__crumb-sep { color: var(--bronze-dk); }

.page-home .hero__grid {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: var(--home-rail-w) 1fr;
  }
}

.page-home .hero__rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink-line);
}

@media (min-width: 900px) {
  .page-home .hero__rail {
    border-bottom: 0;
    border-right: 1px solid var(--ink-line);
    padding-right: 30px;
    padding-bottom: 0;
  }
}

.page-home .hero__mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bronze);
  background: rgba(184, 121, 31, .1);
  color: var(--bronze-lt);
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 3px rgba(15, 30, 46, .9);
}

.page-home .hero__brand {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.12;
}

.page-home .hero__brand-name {
  font-size: clamp(28px, 4.8vw, 42px);
  color: var(--white);
}

.page-home .hero__brand-line {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--bronze-lt);
}

.page-home .hero__facts {
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 13px;
}

.page-home .hero__facts > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(217, 164, 65, .24);
}

.page-home .hero__facts > div:last-child { border-bottom: 0; }

.page-home .hero__facts dt {
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: .08em;
}

.page-home .hero__facts dd {
  margin: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}

.page-home .hero__mosaic {
  display: grid;
  gap: var(--home-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .page-home .hero__mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "lead lead lead lead stat stat"
      "lead lead lead lead tag tag";
  }
  .page-home .hero__tile--lead { grid-area: lead; }
  .page-home .hero__tile--stat { grid-area: stat; }
  .page-home .hero__tile--tag  { grid-area: tag; }
}

.page-home .hero__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 26px);
  background: rgba(22, 40, 59, .74);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  transition: transform var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .hero__tile:hover {
  transform: translateY(-3px);
  border-color: var(--bronze);
  box-shadow: var(--shadow-2);
}

.page-home .hero__tile:focus-visible,
.page-home .hero__tile a:focus-visible {
  outline: 2px solid var(--bronze-lt);
  outline-offset: 3px;
}

.page-home .hero__tile--lead {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.page-home .hero__media {
  margin: 0;
  border-bottom: 1px solid var(--ink-line);
}

.page-home .media__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-home .hero__lead-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px);
}

.page-home .hero__lead-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(21px, 2.9vw, 30px);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-home .hero__lead-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-text);
}

.page-home .hero__lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.page-home .hero__tile--stat {
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(165deg, rgba(184, 121, 31, .2), rgba(22, 40, 59, .9));
  border-color: rgba(184, 121, 31, .44);
}

.page-home .hero__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .hero__num-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-text);
}

.page-home .hero__tile--tag {
  gap: 12px;
  justify-content: center;
}

.page-home .hero__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .hero__tag-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-text);
}

/* ============ 两条产品线 ============ */
.page-home .lines__figure {
  margin: 0 0 clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  background: var(--card);
  padding: 10px;
  border-radius: var(--r);
}

.page-home .lines__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 1px;
}

.page-home .lines__figure .figure__caption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  font-family: var(--font-mono);
}

.page-home .lines__grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .page-home .lines__grid { grid-template-columns: 1fr 1fr; }
}

.page-home .line {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--r);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-left-color var(--dur) ease;
}

.page-home .line--upgrade { border-left-color: var(--cinnabar); }

.page-home .line:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
  border-left-color: var(--bronze-lt);
}

.page-home .line--upgrade:hover { border-left-color: var(--cinnabar); }

.page-home .line__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.page-home .line__no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--bronze-dk);
}

.page-home .line__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .line__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text);
}

.page-home .line__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-home .line__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .line__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--bronze);
  background: transparent;
  border-radius: 1px;
}

.page-home .line--upgrade .line__list li::before { border-color: var(--cinnabar); }

.page-home .line__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bronze-dk);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color var(--dur) ease;
}

.page-home .line__link:hover,
.page-home .line__link:focus-visible { color: var(--cinnabar); }

/* ============ 四档档位 ============ */
.page-home .tiers__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .page-home .tiers__grid { grid-template-columns: 1fr 320px; }
}

.page-home .tiers__list {
  display: grid;
  gap: 12px;
}

.page-home .tier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bronze);
  border-radius: var(--r);
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, border-left-color var(--dur) ease, background-color var(--dur) ease;
}

@media (min-width: 700px) {
  .page-home .tier {
    grid-template-columns: 92px 1fr 168px;
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
  }
}

.page-home .tier:hover {
  transform: translateY(-3px);
  border-left-color: var(--cinnabar);
  box-shadow: var(--shadow-1);
  background: #EFE8DD;
}

.page-home .tier__no {
  justify-self: start;
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  color: var(--cinnabar);
  background: rgba(192, 67, 43, .09);
  border: 1px solid rgba(192, 67, 43, .34);
  padding: 5px 10px;
  border-radius: var(--r);
  white-space: nowrap;
}

.page-home .tier__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-home .tier__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .tier__spec {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .tier__min {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
}

@media (min-width: 700px) {
  .page-home .tier__min {
    padding-top: 0;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

.page-home .tier__min-label {
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--muted);
}

.page-home .tier__min strong {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--bronze-dk);
}

.page-home .tiers__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 22px);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--bronze);
  border-radius: var(--r);
  align-self: start;
}

.page-home .tiers__figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 8px;
}

.page-home .tiers__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .tiers__notice {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.page-home .tiers__notice-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cinnabar);
}

.page-home .tiers__notice-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}

/* ============ 交付路径 ============ */
.page-home .track__head {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(28px, 4vw, 48px);
}

@media (min-width: 880px) {
  .page-home .track__head {
    grid-template-columns: 1.12fr .88fr;
    align-items: end;
  }
}

.page-home .track__head-text .section-head { margin-bottom: 0; }

.page-home .track__figure {
  margin: 0;
  border: 1px solid var(--ink-line);
  background: var(--ink);
  padding: 10px;
  border-radius: var(--r);
}

.page-home .track__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-home .track__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  counter-reset: home-step;
}

@media (min-width: 760px) {
  .page-home .track__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.page-home .track__step {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px) clamp(14px, 2vw, 22px);
  border-top: 2px solid var(--ink-line);
  transition: border-top-color var(--dur) ease, transform var(--dur) ease;
}

.page-home .track__step::before {
  content: "";
  position: absolute;
  top: -7px;
  left: clamp(14px, 2vw, 22px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-2);
  border: 2px solid var(--bronze);
}

.page-home .track__step:hover {
  border-top-color: var(--bronze-lt);
  transform: translateY(-3px);
}

.page-home .track__step:hover::before { border-color: var(--cinnabar); }

.page-home .track__no {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .track__name {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.005em;
  color: var(--white);
}

.page-home .track__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-text);
}

.page-home .track__response {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--ink-line);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .page-home .track__response { grid-template-columns: repeat(3, 1fr); }
}

.page-home .track__cell {
  padding-left: 16px;
  border-left: 2px solid rgba(184, 121, 31, .45);
}

.page-home .track__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bronze-lt);
}

.page-home .track__cell p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-text);
}

/* ============ 选择依据 ============ */
.page-home .why__grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  grid-template-columns: 1fr;
}

@media (min-width: 680px) {
  .page-home .why__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1040px) {
  .page-home .why__grid { grid-template-columns: repeat(3, 1fr); }
}

.page-home .why__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--bronze-dk);
  border-radius: var(--r);
  transition: transform var(--dur) ease, border-top-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .why__item:hover {
  transform: translateY(-3px);
  border-top-color: var(--cinnabar);
  box-shadow: var(--shadow-1);
}

.page-home .why__no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--bronze-dk);
}

.page-home .why__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text);
}

.page-home .why__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

/* ============ 下一步 ============ */
.page-home .next {
  position: relative;
  background:
    radial-gradient(80% 100% at 6% 100%, rgba(184, 121, 31, .16), transparent 58%),
    var(--ink);
}

.page-home .next__grid {
  display: grid;
  gap: clamp(26px, 3.6vw, 48px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-home .next__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.page-home .next__lead .section-head { margin-bottom: 22px; }

.page-home .next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.page-home .next__contact {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink-muted);
  padding-top: 16px;
  border-top: 1px dashed rgba(217, 164, 65, .24);
}

.page-home .next__cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .page-home .next__cards { grid-template-columns: 1fr 1fr; }
}

.page-home .next__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 22px);
  background: rgba(22, 40, 59, .8);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease;
}

.page-home .next__card:hover {
  transform: translateY(-3px);
  border-color: var(--bronze);
  background: rgba(22, 40, 59, .96);
  box-shadow: var(--shadow-2);
}

.page-home .next__card:focus-visible {
  outline: 2px solid var(--bronze-lt);
  outline-offset: 3px;
}

.page-home .next__card-no {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--bronze-lt);
}

.page-home .next__card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--white);
}

.page-home .next__card-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-text);
}

.page-home .next__card-arrow {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--bronze);
  transition: transform var(--dur) ease, color var(--dur) ease;
}

.page-home .next__card:hover .next__card-arrow {
  transform: translateX(4px);
  color: var(--cinnabar);
}

@media (max-width: 520px) {
  .page-home .hero__facts > div { grid-template-columns: 66px 1fr; }
  .page-home .hero__lead-actions .btn,
  .page-home .next__actions .btn { flex: 1 1 auto; }
}