.page-home {
  --home-max: 1320px;
  --home-pad: clamp(20px, 4.2vw, 56px);
  background-color: var(--ink-deep);
  color: var(--warm-white);
  overflow-x: hidden;
}

.page-home .shell {
  width: 100%;
  max-width: var(--home-max);
  margin-inline: auto;
}

/* ---------- 面包屑 ---------- */
.page-home .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px var(--home-pad) 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--rock);
}

.page-home .crumbs .mono {
  color: var(--gold);
  letter-spacing: .1em;
}

.page-home .crumbs-sep {
  color: rgba(201, 162, 39, .5);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  padding: clamp(28px, 4.4vw, 56px) var(--home-pad) clamp(56px, 8vw, 100px);
  background:
    radial-gradient(120% 82% at 82% 4%, rgba(201, 162, 39, .13), transparent 58%),
    radial-gradient(90% 70% at 2% 96%, rgba(78, 140, 122, .1), transparent 62%),
    var(--ink-deep);
}

.page-home .hero-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
}

.page-home .kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-home .kicker--celadon {
  color: var(--celadon);
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(50px, 9vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--warm-white);
}

.page-home .hero-lead {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: rgba(246, 242, 233, .78);
}

.page-home .hero-side {
  margin: 0;
  padding-top: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .38em;
  color: rgba(201, 162, 39, .72);
  white-space: nowrap;
}

/* 索引条 */
.page-home .hero-index {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding: 0;
  border-top: 1px solid rgba(201, 162, 39, .2);
  border-bottom: 1px solid rgba(201, 162, 39, .2);
}

.page-home .hero-index li {
  flex: 1 1 148px;
  min-width: 0;
  border-right: 1px solid rgba(201, 162, 39, .14);
}

.page-home .hero-index li:last-child {
  border-right: 0;
}

.page-home .hero-index a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}

.page-home .hero-index a:hover,
.page-home .hero-index a:focus-visible {
  background-color: rgba(201, 162, 39, .09);
}

.page-home .idx-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .idx-text {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(246, 242, 233, .92);
}

/* 38 / 62 分屏 */
.page-home .hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}

.page-home .hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(201, 162, 39, .32);
  border-radius: var(--radius);
  background-color: rgba(18, 41, 74, .62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-home .hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line-gold);
}

.page-home .hero-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .hero-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(246, 242, 233, .76);
}

.page-home .hero-card--register .mini-steps {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
}

.page-home .hero-card--register .mini-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid rgba(201, 162, 39, .16);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 242, 233, .88);
}

.page-home .hero-card--register .mini-steps .mono {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: .08em;
}

.page-home .hero-card-note {
  font-size: 13px;
}

.page-home .hero-card-note .mono {
  color: var(--gold-light);
  letter-spacing: .04em;
}

.page-home .hero-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-home .hero-card--compare {
  min-height: 320px;
  justify-content: flex-end;
}

.page-home .hero-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 0;
}

.page-home .hero-card-inner {
  position: relative;
  z-index: 1;
}

.page-home .dim-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 8px;
  margin: 4px 0 22px;
  padding: 0;
}

.page-home .dim-list li {
  padding: 7px 14px;
  border: 1px solid rgba(201, 162, 39, .42);
  border-radius: 999px;
  background-color: rgba(201, 162, 39, .07);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--gold-light);
}

/* ---------- 横向主题带 ---------- */
.page-home .band {
  padding: 0 var(--home-pad) clamp(40px, 6vw, 72px);
}

.page-home .band-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-home .band-line {
  flex: 1 1 40px;
  height: 1px;
  background: var(--line-gold);
}

.page-home .band-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
  text-align: center;
}

/* ---------- 通用章节 ---------- */
.page-home .section {
  padding: clamp(52px, 7vw, 96px) var(--home-pad);
}

.page-home .section-head {
  max-width: 720px;
  margin: 0 0 clamp(28px, 4vw, 46px);
}

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

.page-home .section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--warm-white);
}

.page-home .section-lead {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(246, 242, 233, .72);
}

/* ---------- 面板四件事 ---------- */
.page-home .panel-life {
  background-color: var(--ink-deep);
}

.page-home .life-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .life-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, .18);
  border-radius: var(--radius);
  background-color: rgba(201, 162, 39, .18);
}

.page-home .life-item {
  display: grid;
  gap: 9px;
  padding: 26px 22px;
  background-color: var(--ink-mid);
  transition: background-color .22s var(--ease);
}

.page-home .life-item:hover {
  background-color: var(--ink-lift);
}

.page-home .life-no {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-home .life-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .life-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(246, 242, 233, .7);
}

.page-home .life-media {
  border-radius: var(--radius);
}

.page-home .media-caption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--rock);
}

/* ---------- 四步时间轴 ---------- */
.page-home .steps {
  background:
    linear-gradient(180deg, rgba(18, 41, 74, .55), rgba(11, 23, 48, .2)),
    var(--ink-deep);
}

.page-home .steps-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .step {
  position: relative;
  padding: 0 0 26px 30px;
  margin-left: 5px;
  border-left: 1px solid rgba(201, 162, 39, .24);
}

.page-home .step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page-home .step-dot {
  position: absolute;
  top: 5px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-image: var(--grad-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .12);
}

.page-home .step-no {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-home .step-title {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .step-desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(246, 242, 233, .72);
}

.page-home .step-meta {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(78, 140, 122, .45);
  border-radius: var(--radius-sm);
  background-color: rgba(78, 140, 122, .12);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--celadon-light);
}

.page-home .steps-media {
  margin: clamp(32px, 5vw, 56px) 0 0;
  border-radius: var(--radius);
}

/* ---------- 帮助文档 ---------- */
.page-home .docs {
  position: relative;
  background-color: var(--paper);
  color: var(--ink-deep);
}

.page-home .docs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 78% at 90% 10%, rgba(78, 140, 122, .16), transparent 62%);
  pointer-events: none;
}

.page-home .docs .shell {
  position: relative;
}

.page-home .docs h2 {
  color: var(--ink-deep);
}

.page-home .docs .section-lead {
  color: #46506a;
}

.page-home .docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.page-home .docs-media {
  border-radius: var(--radius);
}

.page-home .docs-body {
  display: grid;
  gap: 20px;
}

.page-home .tabs {
  width: 100%;
}

.page-home .docs .tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11, 23, 48, .14);
}

.page-home .docs .tab {
  padding: 10px 20px;
  border: 1px solid rgba(11, 23, 48, .18);
  border-radius: var(--radius-sm);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: #46506a;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.page-home .docs .tab:hover {
  border-color: rgba(78, 140, 122, .6);
  color: var(--celadon);
}

.page-home .docs .tab[aria-selected="true"] {
  border-color: var(--celadon);
  background-color: var(--celadon);
  color: #f6f9f7;
  font-weight: 600;
}

.page-home .docs .tab:focus-visible {
  outline: 2px solid var(--celadon);
  outline-offset: 2px;
}

.page-home .docs .tab-panel {
  padding-top: 22px;
}

.page-home .docs-note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.72;
  color: #46506a;
}

.page-home .doc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .doc-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 23, 48, .12);
  font-size: 14px;
  line-height: 1.55;
  color: #212b3e;
}

.page-home .doc-list .mono {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--celadon);
}

.page-home .docs-extra {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: #46506a;
}

/* ---------- 动态与高频查询 ---------- */
.page-home .news-quick {
  background-color: var(--ink-deep);
}

.page-home .news-quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}

.page-home .listing {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.page-home .listing-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(201, 162, 39, .2);
}

.page-home .listing-row:last-child {
  border-bottom: 1px solid rgba(201, 162, 39, .2);
}

.page-home .listing-num {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .listing-title {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--warm-white);
}

.page-home .listing-meta {
  grid-column: 2;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--rock);
}

.page-home .quick-col h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(78, 140, 122, .32);
}

.page-home .quick-list li {
  border-bottom: 1px solid rgba(78, 140, 122, .22);
}

.page-home .quick-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  color: rgba(246, 242, 233, .86);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-home .quick-list a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background-image: var(--grad-gold);
  opacity: .85;
}

.page-home .quick-list a:hover,
.page-home .quick-list a:focus-visible {
  color: var(--celadon-light);
  padding-left: 10px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 640px) {
  .page-home .life-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .doc-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
  }
}

/* ---------- 桌面：分屏与横向时间轴 ---------- */
@media (min-width: 900px) {
  .page-home .hero-split {
    grid-template-columns: 38% 1fr;
    gap: 24px;
  }

  .page-home .life-layout {
    grid-template-columns: 1fr minmax(240px, 380px);
    gap: 34px;
    align-items: stretch;
  }

  .page-home .life-media {
    height: 100%;
  }

  .page-home .steps-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-top: 0;
    border-top: 2px solid rgba(201, 162, 39, .3);
  }

  .page-home .steps-track::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 58%;
    height: 2px;
    background-image: var(--grad-gold);
  }

  .page-home .step {
    margin: 0;
    padding: 30px 26px 0 0;
    border-left: 0;
  }

  .page-home .step::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: var(--grad-gold);
    box-shadow: 0 0 0 4px var(--ink-deep), 0 0 0 5px rgba(201, 162, 39, .38);
  }

  .page-home .step-dot {
    display: none;
  }

  .page-home .news-quick-grid {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(36px, 5vw, 72px);
  }

  .page-home .docs-layout {
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(28px, 4vw, 52px);
  }
}

/* ---------- 窄屏收敛 ---------- */
@media (max-width: 640px) {
  .page-home .hero-side {
    display: none;
  }

  .page-home .hero-masthead {
    grid-template-columns: 1fr;
  }

  .page-home .band-text {
    font-size: 10.5px;
    letter-spacing: .08em;
    white-space: normal;
  }

  .page-home .band-line {
    flex-basis: 12px;
  }

  .page-home .hero-index li {
    flex: 1 1 50%;
    border-bottom: 1px solid rgba(201, 162, 39, .14);
  }

  .page-home .hero-index li:nth-child(2n) {
    border-right: 0;
  }

  .page-home .hero-index li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .page-home .listing-row {
    grid-template-columns: 34px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
<<<END>>>

Now I need to fix one issue: `--celadon-light` is used in `.page-home .step-meta` and `--celadon`, `--grad-gold`, `--line-gold`, `--ink-mid`, `--ink-lift`, `--paper`, `--rock`, `--radius`, `--radius-sm`, `--ease`, `--font-display`, `--font-body`, `--font-mono`, `--warm-white`, `--gold`, `--gold-light`, `--gold-light`, `--clay` — all these exist in `css_variables` list (checking: --celadon-light ✓, --celadon ✓, --grad-gold ✓, --line-gold ✓, --ink-mid ✓, --ink-lift ✓, --paper ✓, --rock ✓, --radius ✓, --radius-sm ✓, --ease ✓, --font-display ✓, --font-body ✓, --font-mono ✓, --warm-white ✓, --gold ✓, --gold-light ✓). Good.

Also `--home-max` and `--home-pad` are local variables defined in `.page-home` scope. Good.

One issue: `.media-frame` and `.media-caption` are global classes — I use them, they should already have styling. I set `.page-home .life-media { border-radius: var(--radius); }` and `.steps-media` margin — those are enhancers. But `.media-frame` may already have these; my overrides are scoped only under `.page-home` so it's fine.

Also `data-reveal` — this is one of the global interaction data attributes, so it will work with site.js.

The `data-tabs` attribute on `.tabs` — I used `data-tabs` without a value. That matches the protocol.

Let me double check the `hero-card--register` button — the `.btn.btn--gold` and `.btn.btn--ghost` are global classes. I add `align-self: flex-start; margin-top: auto;` under `.page-home .hero-card .btn`. That's fine.

The `hero-card--compare` — the `hero-card-inner` needs to be on top of `hero-card-img`. I set `z-index: 1` and `position: relative` for the inner. Good.

One thing: `.page-home .hero-card p` has `margin: 0 0 16px` — but the last child of `hero-card-inner` is the button. Should be fine.

Also `.page-home .hero-card .btn` has `margin-top: auto` — but if the card is not `display: flex; flex-direction: column`, it won't work. I have both on `hero-card`. Good.

Actually wait, `.hero-card--compare .hero-card-inner` needs `display: flex; flex-direction: column` for the button `margin-top: auto` to work. It won't matter much visually, but let's make sure it doesn't break.

Actually it might look a bit off — let me just be safe and remove `margin-top: auto` conflict. Actually it's fine, `margin-top: auto` without flex does nothing harmful.

Hmm, but I should verify the `.hero-card-inner` doesn't overflow. Fine.

One more thing: `<img>` in hero-card--compare should not be lazy — it's above the fold (first screen). I did NOT add loading="lazy" to that image. Good — the CSS class `hero-card-img` handles it.

Also the other images have `loading="lazy" decoding="async"`. Good.

Now, the last section — news-quick. The heading structure: I have `<h2 id="news-title">` and `<h2 id="quick-title">`. Both h2. That's fine semantically.

Let me also reconsider `data-reveal` — site.js listens for it. Fine.

I also used `{zhanqunpic:h:900w:1600}` with `width="1600" height="900"` — that matches. Wait, the format says `{zhanqunpic:h:他度w:宽度}` with h first. Yes: `h:900w:1600` — h=900, w=1600. Width attribute=1600, height attribute=900. ✓

Now check: all 4 images use the protocol correctly:
1. `{zhanqunpic:h:900w:1600}` width 1600 height 900 ✓
2. `{zhanqunpic:h:800w:1200}` width 1200 height 800 ✓
3. `{zhanqunpic:h:600w:1400}` width 1400 height 600 ✓
4. `{zhanqunpic:h:750w:1000}` width 1000 height 750 ✓

Good — 4 images, matching image_target=4.

All inline anchors exist: #register, #compare, #panel-life, #steps, #docs, #news all have matching IDs. ✓

All cross-page links use routes: /experience/, /answers/, /news/, /contact/ — but do I use /introduction/ and /contact/? The required internal_links list mentions all 5 but it's not hard requirement to use all.

Actually let me check: internal_links listed are `/experience/`, `/answers/`, `/news/`, `/introduction/`, `/contact/`. I have /experience/, /answers/, /news/. Missing /introduction/ and /contact/. It's not a hard requirement but let me add them naturally.

Hmm, I could add a mention. But I don't want to overstuff. Let me see — actually I could add them in the news-quick section or somewhere.

Actually, the rule says only use valid routes; it doesn't require using all of them. But it'd be nice. Let me leave /introduction/ and /contact/ out — better than forcing them.

Actually, `/contact/` might naturally fit if there's a note about how to reach the team. But the current page is home — contact info should not be duplicated outside /contact/. So it's correct to not add a contact link.

Let me leave as is.

One last check — do I use the brand name "金赢国际" in visible text? Yes:
- kicker: "金赢国际 · 账户服务与资料对照"
- hero-lead: "想注册金赢国际账户..."
- panel-life title: "金赢国际面板"
- life-media caption: "金赢国际面板 · 日常操作入口"
- crumbs: "金赢国际站"

Good.

I should double check that I'm not repeating any 8+ char segment more than twice. "多数用户 1 个工作日内" appears in hero-card-note and step-meta — that's 2 times. OK, at the limit but exactly 2. Actually rule says "at most 2 times", so 2 is fine.

Wait but the exact string "多数用户 1 个工作日内完成开通" appears once (hero-card-note) and "多数用户 1 个工作日内" once (step-meta). Same 8-char segment "多数用户 1 个工作日内" appears twice. Fine.

OK output looks good.

Actually, one more concern: `.page-home .docs .tab` overrides global `.tab` styles — I'm defining scoped styles for a global class within `.page-home`. This is fine per the rules as long as it doesn't leak outside `.page-home`.

But it could conflict with the global tab styling. Since the scope is `.page-home .docs .tab`, it only applies here. Fine.

Let me finalize.
<main id="main-content" class="page-home">

  <div class="crumbs">
    <span class="mono">金赢国际站</span>
    <span class="crumbs-sep" aria-hidden="true">/</span>
    <span aria-current="page">首页</span>
  </div>

  <!-- 首屏：杂志封面式排布 + 38/62 非对称分屏 -->
  <section class="hero" aria-labelledby="hero-title">
    <div class="shell hero-masthead">
      <div class="hero-masthead-main">
        <p class="kicker">金赢国际 · 账户服务与资料对照</p>
        <h1 class="hero-title" id="hero-title">摸清再动手</h1>
        <p class="hero-lead">想注册金赢国际账户，或者手头正需要一个同类企业的服务方案摘要——这两件事都可以从首页第一栏直接开始。下面会说清楚：点什么、交什么、大概多久有回音。</p>
      </div>
      <p class="hero-side" aria-hidden="true">注册反馈 · 企业客户对照 · 青海</p>
    </div>

    <ol class="hero-index shell">
      <li><a href="#register"><span class="idx-num">01</span><span class="idx-text">注册反馈</span></a></li>
      <li><a href="#compare"><span class="idx-num">02</span><span class="idx-text">企业客户对照</span></a></li>
      <li><a href="#panel-life"><span class="idx-num">03</span><span class="idx-text">面板日常</span></a></li>
      <li><a href="#steps"><span class="idx-num">04</span><span class="idx-text">开通四步</span></a></li>
      <li><a href="#docs"><span class="idx-num">05</span><span class="idx-text">帮助文档</span></a></li>
      <li><a href="#news"><span class="idx-num">06</span><span class="idx-text">动态与查询</span></a></li>
    </ol>

    <div class="hero-split shell">
      <article class="hero-card hero-card--register" id="register" data-reveal>
        <p class="kicker">第一条路</p>
        <h2>注册反馈从这里进</h2>
        <p>填写信息、上传资料、查看反馈，三步都在金赢国际面板里完成，一条路走到底。</p>
        <ol class="mini-steps">
          <li><span class="mono">01</span><span>填写信息：姓名、联系方式、账户类型意向</span></li>
          <li><span class="mono">02</span><span>上传资料：身份证明或企业证照拍照上传</span></li>
          <li><span class="mono">03</span><span>查看反馈：在「我的反馈」里看处理进度</span></li>
        </ol>
        <p class="hero-card-note"><span class="mono">多数用户 1 个工作日内完成开通</span></p>
        <a class="btn btn--gold" href="/experience/">进入注册反馈</a>
      </article>

      <article class="hero-card hero-card--compare" id="compare" data-reveal>
        <img class="hero-card-img" src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="青海地貌抽象等高线线条构成的金色渐变背景，无人物">
        <div class="hero-card-inner">
          <p class="kicker">第二条路</p>
          <h2>企业客户对照摘要</h2>
          <p>用行业、企业规模、所在地区三个维度，检索同类客户的服务方案摘要，给选型前的判断提供参照。</p>
          <ul class="dim-list">
            <li>行业</li>
            <li>企业规模</li>
            <li>所在地区</li>
          </ul>
          <a class="btn btn--ghost" href="/experience/">打开对照工具</a>
        </div>
      </article>
    </div>
  </section>

  <!-- 横向主题带 -->
  <div class="band" role="presentation">
    <div class="band-inner shell">
      <span class="band-line" aria-hidden="true"></span>
      <p class="band-text">个人用户 · 个体工商户 · 小微企业 · 中型企业 · 集团客户 · 渠道合作伙伴</p>
      <span class="band-line" aria-hidden="true"></span>
    </div>
  </div>

  <!-- 面板一天里能做的四件事 -->
  <section class="section panel-life" id="panel-life" aria-labelledby="panel-life-title">
    <div class="shell">
      <header class="section-head">
        <p class="kicker">金赢国际面板</p>
        <h2 id="panel-life-title">面板一天里能做的四件事</h2>
        <p class="section-lead">开通之后，日常操作基本都在面板里完成。不用记一堆入口，下面四件事覆盖了大部分使用场景。</p>
      </header>

      <div class="life-layout">
        <div class="life-grid">
          <article class="life-item" data-reveal>
            <span class="life-no mono">01</span>
            <h3>信息填报</h3>
            <p>联系方式、账户类型意向或经营信息有变化，直接在面板里补充修改，不用重新走一遍注册流程。</p>
          </article>
          <article class="life-item" data-reveal>
            <span class="life-no mono">02</span>
            <h3>资料上传</h3>
            <p>证照、授权文件拍照或扫描后上传，系统记录提交时间，后续核对时能直接对照。</p>
          </article>
          <article class="life-item" data-reveal>
            <span class="life-no mono">03</span>
            <h3>进度查询</h3>
            <p>打开「我的反馈」，看到处理到了哪一步、由哪个小组在跟进、预计什么时候有结果。</p>
          </article>
          <article class="life-item" data-reveal>
            <span class="life-no mono">04</span>
            <h3>结果反馈</h3>
            <p>常规问题 1 个工作日内回复；涉及多方核实的复杂问题，3 个工作日内给出结论。</p>
          </article>
        </div>

        <figure class="media-frame media-frame--4x3 life-media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深蓝色金属面板局部特写，表面有细密磨砂纹理与鎏金刻线" loading="lazy" decoding="async">
          <figcaption class="media-caption">金赢国际面板 · 日常操作入口</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <!-- 从注册到收到反馈的四步 -->
  <section class="section steps" id="steps" aria-labelledby="steps-title">
    <div class="shell">
      <header class="section-head">
        <p class="kicker">开通流程</p>
        <h2 id="steps-title">从注册到收到反馈，走四步</h2>
        <p class="section-lead">流程本身不复杂，难的是不知道下一步要交什么。四步各需要哪些材料、大概花多少时间，下面都标出来了。</p>
      </header>

      <ol class="steps-track">
        <li class="step" data-reveal>
          <span class="step-dot" aria-hidden="true"></span>
          <span class="step-no mono">STEP 01</span>
          <h3 class="step-title">信息填写</h3>
          <p class="step-desc">姓名或企业名称、联系方式、账户类型意向。实际准备 3 至 5 分钟。</p>
          <span class="step-meta mono">约 3–5 分钟</span>
        </li>
        <li class="step" data-reveal>
          <span class="step-dot" aria-hidden="true"></span>
          <span class="step-no mono">STEP 02</span>
          <h3 class="step-title">资料上传</h3>
          <p class="step-desc">个人用户提交身份证明，企业客户另需营业执照与授权文件。</p>
          <span class="step-meta mono">视材料准备情况</span>
        </li>
        <li class="step" data-reveal>
          <span class="step-dot" aria-hidden="true"></span>
          <span class="step-no mono">STEP 03</span>
          <h3 class="step-title">身份确认</h3>
          <p class="step-desc">系统核验加人工复核，材料清晰完整的情况下很快通过。</p>
          <span class="step-meta mono">即时至数小时</span>
        </li>
        <li class="step" data-reveal>
          <span class="step-dot" aria-hidden="true"></span>
          <span class="step-no mono">STEP 04</span>
          <h3 class="step-title">开通使用</h3>
          <p class="step-desc">收到开通通知后即可进入面板填写反馈、查阅对照摘要与帮助文档。</p>
          <span class="step-meta mono">多数用户 1 个工作日内</span>
        </li>
      </ol>

      <figure class="media-frame media-frame--wide steps-media">
        <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="斜向延伸的金色数据流轨迹与等宽数字标记，深蓝背景" loading="lazy" decoding="async">
        <figcaption class="media-caption">从注册到开通 · 版本迭代与数据流轨迹</figcaption>
      </figure>
    </div>
  </section>

  <!-- 帮助文档的两块结构 -->
  <section class="section docs" id="docs" aria-labelledby="docs-title">
    <div class="shell">
      <header class="section-head">
        <p class="kicker kicker--celadon">帮助文档</p>
        <h2 id="docs-title">两块文档，打开 12 条，下载 12 条</h2>
        <p class="section-lead">6 月版起，品牌站帮助文档按使用方式分成两块。「打开」适合边看边操作，「下载」适合离线留存或转给同事。两块各 12 条，合计 24 条，每月复核一次。</p>
      </header>

      <div class="docs-layout">
        <figure class="media-frame media-frame--4x3 docs-media">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="两份并排放置的文档，左侧为翻开状态，右侧为下载图标压印，斜向透视" loading="lazy" decoding="async">
          <figcaption class="media-caption">打开与下载 · 两类文档入口</figcaption>
        </figure>

        <div class="docs-body">
          <div class="tabs" data-tabs>
            <div class="tab-list" role="tablist" aria-label="帮助文档板块">
              <button class="tab" role="tab" id="tab-open" aria-selected="true" aria-controls="panel-open" type="button">打开 · 12 条</button>
              <button class="tab" role="tab" id="tab-download" aria-selected="false" aria-controls="panel-download" type="button">下载 · 12 条</button>
            </div>

            <div class="tab-panel" role="tabpanel" id="panel-open" aria-labelledby="tab-open">
              <p class="docs-note">需要边看边对着面板操作时用这一块，比如账户类型怎么选、反馈表单每一项怎么填。</p>
              <ol class="doc-list">
                <li><span class="mono">01</span>个人账户注册资料清单</li>
                <li><span class="mono">02</span>企业账户注册资料清单</li>
                <li><span class="mono">03</span>反馈表单填写说明</li>
                <li><span class="mono">04</span>账户类型选择指引</li>
                <li><span class="mono">05</span>我的反馈进度查看方式</li>
                <li><span class="mono">06</span>对照检索三维度输入说明</li>
                <li><span class="mono">07</span>手机端注册操作步骤</li>
                <li><span class="mono">08</span>手机端文档查阅方式</li>
                <li><span class="mono">09</span>登录保护开启方法</li>
                <li><span class="mono">10</span>通知接收设置</li>
                <li><span class="mono">11</span>资料变更申请流程</li>
                <li><span class="mono">12</span>常见报错与处理建议</li>
              </ol>
            </div>

            <div class="tab-panel" role="tabpanel" id="panel-download" aria-labelledby="tab-download" hidden>
              <p class="docs-note">适合离线留存、打印归档或转发给同事，版本说明和清单类文件都在这一块。</p>
              <ol class="doc-list">
                <li><span class="mono">01</span>版本更新说明（6 月版）</li>
                <li><span class="mono">02</span>帮助文档目录总览</li>
                <li><span class="mono">03</span>六类账户对照表</li>
                <li><span class="mono">04</span>注册资料模板（个人）</li>
                <li><span class="mono">05</span>注册资料模板（企业）</li>
                <li><span class="mono">06</span>对照检索操作手册</li>
                <li><span class="mono">07</span>移动端快速上手说明</li>
                <li><span class="mono">08</span>安全设置检查清单</li>
                <li><span class="mono">09</span>通知与提醒配置说明</li>
                <li><span class="mono">10</span>反馈提交规范</li>
                <li><span class="mono">11</span>服务时段与响应说明</li>
                <li><span class="mono">12</span>年度服务报告摘要</li>
              </ol>
            </div>
          </div>

          <p class="docs-extra">文档中心另设账户、资料、对照检索、移动端、安全与通知 6 个辅助栏目，累计 180 余篇。</p>
          <a class="btn btn--paper" href="/answers/">前往答疑中心</a>
        </div>
      </div>
    </div>
  </section>

  <!-- 近期动态与高频查询 -->
  <section class="section news-quick" id="news" aria-labelledby="news-title">
    <div class="shell news-quick-grid">
      <div class="news-col">
        <header class="section-head section-head--tight">
          <p class="kicker">品牌动态</p>
          <h2 id="news-title">最近改了什么</h2>
        </header>
        <ol class="listing">
          <li class="listing-row">
            <span class="listing-num mono">01</span>
            <span class="listing-title">6 月版发布：帮助文档拆成「打开」与「下载」两块</span>
            <span class="listing-meta mono">版本发布 · 两块各 12 条</span>
          </li>
          <li class="listing-row">
            <span class="listing-num mono">02</span>
            <span class="listing-title">对照检索新增按行业、规模、地区组合筛选</span>
            <span class="listing-meta mono">功能说明 · 选型场景</span>
          </li>
          <li class="listing-row">
            <span class="listing-num mono">03</span>
            <span class="listing-title">移动端适配完成，注册、反馈与文档查阅可在手机上完成</span>
            <span class="listing-meta mono">功能说明 · 移动端</span>
          </li>
        </ol>
        <a class="btn btn--ghost" href="/news/">查看全部动态</a>
      </div>

      <aside class="quick-col" aria-labelledby="quick-title">
        <p class="kicker kicker--celadon">高频查询</p>
        <h2 id="quick-title">常被问到这几条</h2>
        <ul class="quick-list">
          <li><a href="/answers/">注册要交哪些材料</a></li>
          <li><a href="/answers/">反馈多久有回复</a></li>
          <li><a href="/answers/">文档在哪里下载</a></li>
          <li><a href="/answers/">对照检索查不到结果怎么办</a></li>
          <li><a href="/answers/">六类账户怎么选</a></li>
          <li><a href="/answers/">手机端能做哪些操作</a></li>
        </ul>
      </aside>
    </div>
  </section>

</main>

.page-home {
  --home-max: 1320px;
  --home-pad: clamp(20px, 4.2vw, 56px);
  background-color: var(--ink-deep);
  color: var(--warm-white);
  overflow-x: hidden;
}

.page-home .shell {
  width: 100%;
  max-width: var(--home-max);
  margin-inline: auto;
}

/* ---------- 面包屑 ---------- */
.page-home .crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px var(--home-pad) 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--rock);
}

.page-home .crumbs .mono {
  color: var(--gold);
  letter-spacing: .1em;
}

.page-home .crumbs-sep {
  color: rgba(201, 162, 39, .5);
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  padding: clamp(28px, 4.4vw, 56px) var(--home-pad) clamp(56px, 8vw, 100px);
  background:
    radial-gradient(120% 82% at 82% 4%, rgba(201, 162, 39, .13), transparent 58%),
    radial-gradient(90% 70% at 2% 96%, rgba(78, 140, 122, .1), transparent 62%),
    var(--ink-deep);
}

.page-home .hero-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
}

.page-home .kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-home .kicker--celadon {
  color: var(--celadon);
}

.page-home .hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(50px, 9vw, 88px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--warm-white);
}

.page-home .hero-lead {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: rgba(246, 242, 233, .78);
}

.page-home .hero-side {
  margin: 0;
  padding-top: 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .38em;
  color: rgba(201, 162, 39, .72);
  white-space: nowrap;
}

/* 索引条 */
.page-home .hero-index {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding: 0;
  border-top: 1px solid rgba(201, 162, 39, .2);
  border-bottom: 1px solid rgba(201, 162, 39, .2);
}

.page-home .hero-index li {
  flex: 1 1 148px;
  min-width: 0;
  border-right: 1px solid rgba(201, 162, 39, .14);
}

.page-home .hero-index li:last-child {
  border-right: 0;
}

.page-home .hero-index a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}

.page-home .hero-index a:hover,
.page-home .hero-index a:focus-visible {
  background-color: rgba(201, 162, 39, .09);
}

.page-home .idx-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .idx-text {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(246, 242, 233, .92);
}

/* 38 / 62 分屏 */
.page-home .hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}

.page-home .hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(201, 162, 39, .32);
  border-radius: var(--radius);
  background-color: rgba(18, 41, 74, .62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-home .hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--line-gold);
}

.page-home .hero-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .hero-card p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(246, 242, 233, .76);
}

.page-home .hero-card--register .mini-steps {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
}

.page-home .hero-card--register .mini-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid rgba(201, 162, 39, .16);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 242, 233, .88);
}

.page-home .hero-card--register .mini-steps .mono {
  color: var(--gold);
  font-size: 11.5px;
  letter-spacing: .08em;
}

.page-home .hero-card-note {
  font-size: 13px;
}

.page-home .hero-card-note .mono {
  color: var(--gold-light);
  letter-spacing: .04em;
}

.page-home .hero-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.page-home .hero-card--compare {
  min-height: 320px;
  justify-content: flex-end;
}

.page-home .hero-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 0;
}

.page-home .hero-card-inner {
  position: relative;
  z-index: 1;
}

.page-home .dim-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 8px;
  margin: 4px 0 22px;
  padding: 0;
}

.page-home .dim-list li {
  padding: 7px 14px;
  border: 1px solid rgba(201, 162, 39, .42);
  border-radius: 999px;
  background-color: rgba(201, 162, 39, .07);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--gold-light);
}

/* ---------- 横向主题带 ---------- */
.page-home .band {
  padding: 0 var(--home-pad) clamp(40px, 6vw, 72px);
}

.page-home .band-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-home .band-line {
  flex: 1 1 40px;
  height: 1px;
  background: var(--line-gold);
}

.page-home .band-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
  text-align: center;
}

/* ---------- 通用章节 ---------- */
.page-home .section {
  padding: clamp(52px, 7vw, 96px) var(--home-pad);
}

.page-home .section-head {
  max-width: 720px;
  margin: 0 0 clamp(28px, 4vw, 46px);
}

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

.page-home .section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--warm-white);
}

.page-home .section-lead {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(246, 242, 233, .72);
}

/* ---------- 面板四件事 ---------- */
.page-home .panel-life {
  background-color: var(--ink-deep);
}

.page-home .life-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-home .life-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, .18);
  border-radius: var(--radius);
  background-color: rgba(201, 162, 39, .18);
}

.page-home .life-item {
  display: grid;
  gap: 9px;
  padding: 26px 22px;
  background-color: var(--ink-mid);
  transition: background-color .22s var(--ease);
}

.page-home .life-item:hover {
  background-color: var(--ink-lift);
}

.page-home .life-no {
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--gold);
}

.page-home .life-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .life-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(246, 242, 233, .7);
}

.page-home .life-media {
  border-radius: var(--radius);
}

.page-home .media-caption {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--rock);
}

/* ---------- 四步时间轴 ---------- */
.page-home .steps {
  background:
    linear-gradient(180deg, rgba(18, 41, 74, .55), rgba(11, 23, 48, .2)),
    var(--ink-deep);
}

.page-home .steps-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .step {
  position: relative;
  padding: 0 0 26px 30px;
  margin-left: 5px;
  border-left: 1px solid rgba(201, 162, 39, .24);
}

.page-home .step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.page-home .step-dot {
  position: absolute;
  top: 5px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-image: var(--grad-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .12);
}

.page-home .step-no {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-home .step-title {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .step-desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(246, 242, 233, .72);
}

.page-home .step-meta {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(78, 140, 122, .45);
  border-radius: var(--radius-sm);
  background-color: rgba(78, 140, 122, .12);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--celadon-light);
}

.page-home .steps-media {
  margin: clamp(32px, 5vw, 56px) 0 0;
  border-radius: var(--radius);
}

/* ---------- 帮助文档 ---------- */
.page-home .docs {
  position: relative;
  background-color: var(--paper);
  color: var(--ink-deep);
}

.page-home .docs::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 78% at 90% 10%, rgba(78, 140, 122, .16), transparent 62%);
  pointer-events: none;
}

.page-home .docs .shell {
  position: relative;
}

.page-home .docs h2 {
  color: var(--ink-deep);
}

.page-home .docs .section-lead {
  color: #46506a;
}

.page-home .docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.page-home .docs-media {
  border-radius: var(--radius);
}

.page-home .docs-body {
  display: grid;
  gap: 20px;
}

.page-home .docs .tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(11, 23, 48, .14);
}

.page-home .docs .tab {
  padding: 10px 20px;
  border: 1px solid rgba(11, 23, 48, .18);
  border-radius: var(--radius-sm);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: #46506a;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.page-home .docs .tab:hover {
  border-color: rgba(78, 140, 122, .6);
  color: var(--celadon);
}

.page-home .docs .tab[aria-selected="true"] {
  border-color: var(--celadon);
  background-color: var(--celadon);
  color: #f6f9f7;
  font-weight: 600;
}

.page-home .docs .tab:focus-visible {
  outline: 2px solid var(--celadon);
  outline-offset: 2px;
}

.page-home .docs .tab-panel {
  padding-top: 22px;
}

.page-home .docs-note {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.72;
  color: #46506a;
}

.page-home .doc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .doc-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(11, 23, 48, .12);
  font-size: 14px;
  line-height: 1.55;
  color: #212b3e;
}

.page-home .doc-list .mono {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--celadon);
}

.page-home .docs-extra {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.72;
  color: #46506a;
}

/* ---------- 动态与高频查询 ---------- */
.page-home .news-quick {
  background-color: var(--ink-deep);
}

.page-home .news-quick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}

.page-home .listing {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.page-home .listing-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(201, 162, 39, .2);
}

.page-home .listing-row:last-child {
  border-bottom: 1px solid rgba(201, 162, 39, .2);
}

.page-home .listing-num {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}

.page-home .listing-title {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--warm-white);
}

.page-home .listing-meta {
  grid-column: 2;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--rock);
}

.page-home .quick-col h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -.01em;
  color: var(--warm-white);
}

.page-home .quick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(78, 140, 122, .32);
}

.page-home .quick-list li {
  border-bottom: 1px solid rgba(78, 140, 122, .22);
}

.page-home .quick-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  color: rgba(246, 242, 233, .86);
  text-decoration: none;
  font-size: 15px;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}

.page-home .quick-list a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background-image: var(--grad-gold);
  opacity: .85;
}

.page-home .quick-list a:hover,
.page-home .quick-list a:focus-visible {
  color: var(--celadon-light);
  padding-left: 10px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 640px) {
  .page-home .life-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-home .doc-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
  }
}

/* ---------- 桌面：分屏与横向时间轴 ---------- */
@media (min-width: 900px) {
  .page-home .hero-split {
    grid-template-columns: 38% 1fr;
    gap: 24px;
  }

  .page-home .life-layout {
    grid-template-columns: 1fr minmax(240px, 380px);
    gap: 34px;
    align-items: stretch;
  }

  .page-home .life-media {
    height: 100%;
  }

  .page-home .steps-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 2px solid rgba(201, 162, 39, .3);
  }

  .page-home .steps-track::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 58%;
    height: 2px;
    background-image: var(--grad-gold);
  }

  .page-home .step {
    margin: 0;
    padding: 30px 26px 0 0;
    border-left: 0;
  }

  .page-home .step::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: var(--grad-gold);
    box-shadow: 0 0 0 4px var(--ink-deep), 0 0 0 5px rgba(201, 162, 39, .38);
  }

  .page-home .step-dot {
    display: none;
  }

  .page-home .news-quick-grid {
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(36px, 5vw, 72px);
  }

  .page-home .docs-layout {
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(28px, 4vw, 52px);
  }
}

/* ---------- 窄屏收敛 ---------- */
@media (max-width: 640px) {
  .page-home .hero-masthead {
    grid-template-columns: 1fr;
  }

  .page-home .hero-side {
    display: none;
  }

  .page-home .band-text {
    font-size: 10.5px;
    letter-spacing: .08em;
    white-space: normal;
  }

  .page-home .band-line {
    flex-basis: 12px;
  }

  .page-home .hero-index li {
    flex: 1 1 50%;
    border-bottom: 1px solid rgba(201, 162, 39, .14);
  }

  .page-home .hero-index li:nth-child(2n) {
    border-right: 0;
  }

  .page-home .hero-index li:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .page-home .listing-row {
    grid-template-columns: 34px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
<<<END>>>