.page-home {
  --home-gap: clamp(18px, 3vw, 40px);
  --home-hair: 1px solid rgba(201, 162, 74, 0.42);
  --home-rule: 1px solid rgba(10, 13, 20, 0.16);
  background: var(--paper);
  overflow-x: clip;
}

.page-home img {
  max-width: 100%;
  height: auto;
}

/* ============ 首屏 ============ */
.page-home .hero-home {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: var(--paper);
  padding: clamp(22px, 4vw, 44px) 0 clamp(46px, 6vw, 92px);
}

.page-home .hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 74, 0.07) 0,
    rgba(201, 162, 74, 0.07) 1px,
    transparent 1px,
    transparent 26px
  );
  pointer-events: none;
}

.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-home .home-context {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.12em;
  color: var(--gold);
}

.page-home .hero-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.page-home .hero-brand {
  font-size: var(--step-128);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
}

@supports not (-webkit-text-stroke: 1px red) {
  .page-home .hero-brand {
    color: var(--gold-lit);
  }
}

.page-home .hero-line {
  margin-top: 14px;
  font-size: clamp(24px, 4.2vw, 52px);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-home .hero-lede {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 30em;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.72;
  color: var(--paper);
}

.page-home .hero-prose {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(243, 238, 227, 0.72);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* 侧栏 */
.page-home .hero-aside {
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 3px solid var(--gold);
}

.page-home .aside-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold-lit);
}

.page-home .aside-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--step-13);
  color: rgba(243, 238, 227, 0.78);
}

.page-home .aside-status .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.page-home .status-lamp {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--celadon);
  box-shadow: 0 0 0 3px rgba(91, 140, 123, 0.28);
}

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

.page-home .shot-card {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--indigo-3);
  box-shadow: 6px 6px 0 rgba(201, 162, 74, 0.34);
}

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

.page-home .shot-card figcaption {
  padding: 6px 8px;
  border-top: var(--home-hair);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .aside-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: var(--home-hair);
}

.page-home .aside-stats dt {
  margin: 0 0 4px;
  font-size: var(--step-13);
  color: rgba(243, 238, 227, 0.6);
}

.page-home .aside-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-15);
  letter-spacing: 0.04em;
  color: var(--gold-lit);
  word-break: break-word;
}

/* ============ 编号轨 ============ */
.page-home .rail-num {
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .section--indigo .rail-num {
  color: var(--gold-lit);
}

.page-home .rail-body > .lede {
  margin-top: 14px;
  max-width: 38em;
}

/* ============ 三步路径 ============ */
.page-home .home-steps-list {
  display: grid;
  gap: 0;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}

.page-home .home-steps-list .step {
  padding: 20px 0;
  border-bottom: var(--home-rule);
}

.page-home .home-steps-list .step[data-state="current"] {
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}

.page-home .home-steps-list .step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .home-steps-list .step h3 {
  margin: 10px 0 8px;
  font-size: var(--step-20);
  line-height: 1.4;
  color: var(--ink);
}

.page-home .home-steps-list .step p {
  margin: 0 0 10px;
  font-size: var(--step-15);
  line-height: 1.75;
  color: rgba(10, 13, 20, 0.74);
}

.page-home .home-flow {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(10px, 2vw, 18px);
  border: 3px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 8px 8px 0 var(--indigo);
}

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

/* ============ 订阅状态 ============ */
.page-home .sub-grid {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-home .sub-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 3px solid var(--ink);
  background: rgba(201, 162, 74, 0.35);
}

.page-home .sub-legend .legend-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 14px 16px;
  background: var(--indigo-3);
}

.page-home .sub-legend .legend-dot {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  flex: 0 0 auto;
}

.page-home .sub-legend .legend-label {
  font-family: var(--font-mono);
  font-size: var(--step-15);
  letter-spacing: 0.08em;
  color: var(--gold-lit);
}

.page-home .sub-legend .legend-hint {
  grid-column: 2;
  margin: 0;
  font-size: var(--step-13);
  line-height: 1.7;
  color: rgba(243, 238, 227, 0.72);
}

.page-home .home-sub-shot {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--indigo-2);
  box-shadow: 8px 8px 0 rgba(201, 162, 74, 0.45);
}

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

.page-home .home-sub-note {
  margin: clamp(22px, 3vw, 30px) 0 0;
  max-width: 40em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(243, 238, 227, 0.8);
}

/* ============ 目录 ============ */
.page-home .home-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-home .cat-list {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}

.page-home .cat-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 0;
  border-bottom: var(--home-rule);
  transition: background-color 120ms linear, transform 120ms linear;
}

.page-home .cat-row[hidden] {
  display: none;
}

.page-home .cat-num {
  font-family: var(--font-mono);
  font-size: var(--step-17);
  letter-spacing: 0.08em;
  color: var(--gold);
  line-height: 1.5;
}

.page-home .cat-title {
  font-size: var(--step-17);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.page-home .cat-meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.08em;
  color: var(--gray);
}

.page-home .cat-row:hover {
  background: var(--paper-2);
  transform: translateX(4px);
}

.page-home .catalog-more {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 42em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(10, 13, 20, 0.76);
}

/* ============ 起步台 ============ */
.page-home .home-start {
  background: var(--paper-2);
  border-top: 3px solid var(--ink);
  padding: clamp(44px, 6vw, 80px) 0;
}

.page-home .start-list {
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .start-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  padding: 20px 0;
  border-top: var(--home-rule);
}

.page-home .start-num {
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  color: var(--gold);
}

.page-home .start-body h3 {
  margin: 0 0 6px;
  font-size: var(--step-20);
  line-height: 1.4;
  color: var(--ink);
}

.page-home .start-body p {
  margin: 0;
  font-size: var(--step-15);
  line-height: 1.75;
  color: rgba(10, 13, 20, 0.74);
}

.page-home .start-row .btn {
  grid-column: 2;
  justify-self: start;
}

.page-home .start-tail {
  margin: clamp(24px, 3vw, 32px) 0 0;
  max-width: 44em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(10, 13, 20, 0.76);
}

/* ============ 联系条 ============ */
.page-home .home-contact {
  padding: clamp(44px, 6vw, 84px) 0;
}

.page-home .contact-strip {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-home .contact-lead .lede {
  margin-top: 14px;
  max-width: 34em;
}

.page-home .contact-lead .btn {
  margin-top: clamp(20px, 3vw, 28px);
}

.page-home .contact-facts {
  display: grid;
  gap: 14px;
  margin: 0;
}

.page-home .contact-facts > div {
  padding-top: 10px;
  border-top: var(--home-hair);
}

.page-home .contact-facts dt {
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-home .contact-facts dd {
  margin: 4px 0 0;
  font-size: var(--step-17);
  line-height: 1.6;
  color: var(--paper);
  word-break: break-word;
}

/* ============ 响应式 ============ */
@media (min-width: 560px) {
  .page-home .sub-legend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 760px) {
  .page-home .home-steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-steps-list .step {
    padding: 24px 22px;
    border-bottom: 0;
    border-left: var(--home-rule);
  }

  .page-home .home-steps-list .step:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-home .home-steps-list .step[data-state="current"] {
    padding-left: 22px;
  }

  .page-home .cat-row {
    grid-template-columns: 64px minmax(0, 1fr) 200px;
    align-items: baseline;
  }

  .page-home .cat-meta {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
}

@media (min-width: 820px) {
  .page-home .start-row {
    grid-template-columns: 64px minmax(0, 1fr) 200px;
    align-items: center;
  }

  .page-home .start-row .btn {
    grid-column: 3;
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-home .sub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
  }

  .page-home .contact-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .cat-row {
    transition: none;
  }

  .page-home .cat-row:hover {
    transform: none;
  }
}


<main id="main-content" class="page-home">

  <section class="hero-home" aria-labelledby="hero-title">
    <div class="wrap hero-grid">
      <div class="hero-main">
        <p class="home-context">九五至尊3 · 中文官方内容站 · 首页</p>
        <h1 id="hero-title" class="hero-title">
          <span class="hero-brand">九五至尊3</span>
          <span class="hero-line">先认准入口，再动手办事</span>
        </h1>
        <p class="lede hero-lede">在安卓或 iOS 打开九五至尊3，第一屏就能看到品牌词。第一次来，先把双端入口认准；已经有账号，直接去会员中心看订阅。</p>
        <p class="prose hero-prose">六年运营，86 万会员在这里查状态、找工具、读评测。客服在工作日 9:00-18:00 在线，邮箱和电话都留在页面下方。</p>
        <div class="hero-actions">
          <a class="btn btn-gold" href="#platform-lines">看双端入口</a>
          <a class="btn btn-line" href="#subscription">查订阅状态</a>
        </div>
      </div>

      <aside class="hero-aside" aria-labelledby="aside-title">
        <h2 id="aside-title" class="aside-title">双端入口 · 状态速览</h2>
        <p class="aside-status"><span class="status-lamp" aria-hidden="true"></span><span class="mono">站点运行中 · 双端同一账号</span></p>
        <div class="aside-shots" id="platform-lines">
          <figure class="shot-card">
            <img src="{zhanqunpic:h:1440w:720}" width="720" height="1440" alt="安卓手机竖屏截图，屏幕顶部显示九五至尊3品牌词与首屏标题区，界面干净无人物">
            <figcaption>安卓 · 首屏</figcaption>
          </figure>
          <figure class="shot-card">
            <img src="{zhanqunpic:h:1440w:720}" width="720" height="1440" alt="iPhone 竖屏截图，同一首屏结构，可见状态栏与安全区，品牌词位置与安卓一致">
            <figcaption>iOS · 首屏</figcaption>
          </figure>
        </div>
        <dl class="aside-stats">
          <div><dt>注册会员</dt><dd>86 万</dd></div>
          <div><dt>月均访问</dt><dd>210 万人次</dd></div>
          <div><dt>覆盖范围</dt><dd>34 个省级行政区</dd></div>
        </dl>
      </aside>
    </div>
  </section>

  <section class="section section--paper home-steps" id="steps" aria-labelledby="steps-title">
    <div class="wrap rail" data-count="01">
      <span class="rail-num" aria-hidden="true">01</span>
      <div class="rail-body">
        <p class="eyebrow">路径 · 三步可达</p>
        <h2 id="steps-title" class="display display-m">从认入口到办成事，中间只有三步</h2>
        <p class="lede">安卓和 iPhone 走同一条路，每一步都能直接点进去，不用来回翻菜单。</p>
        <ol class="steps home-steps-list">
          <li class="step" data-state="current">
            <span class="step-num">01</span>
            <h3>选平台，确认品牌</h3>
            <p>在安卓或 iOS 打开九五至尊3，首屏出现品牌词，说明你进的就是官方入口。</p>
            <a class="link-inline" href="/services/">看双端入口说明</a>
          </li>
          <li class="step">
            <span class="step-num">02</span>
            <h3>查订阅或找工具</h3>
            <p>订阅情况在会员中心看；要用的功能在帮助文档里，按平台和场景分好了类。</p>
            <a class="link-inline" href="/questions/">看订阅与工具问答</a>
          </li>
          <li class="step">
            <span class="step-num">03</span>
            <h3>打开工具或定版本</h3>
            <p>状态看清之后，照评测和当季推荐挑一版，直接开始用。</p>
            <a class="link-inline" href="/services/">读当季推荐</a>
          </li>
        </ol>
        <figure class="media media--plot home-flow">
          <img src="{zhanqunpic:h:540w:960}" width="960" height="540" alt="横向三步流程示意：01 选择安卓或 iOS，02 进入会员中心查订阅或打开帮助文档，03 打开工具或查看当季推荐，三步由鎏金细线连接" loading="lazy" decoding="async">
          <figcaption class="media-caption">01 选平台 → 02 进会员中心或帮助文档 → 03 打开工具或查看推荐</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section section--indigo home-sub" id="subscription" aria-labelledby="sub-title">
    <div class="wrap rail" data-count="02">
      <span class="rail-num" aria-hidden="true">02</span>
      <div class="rail-body">
        <p class="eyebrow">订阅 · 状态对照</p>
        <h2 id="sub-title" class="display display-m">六种订阅状态，一眼认出自己属于哪种</h2>
        <p class="lede">会员中心把订阅情况写成标签。对照下面六种，你立刻知道下一步该做什么。</p>
        <div class="sub-grid">
          <ul class="legend sub-legend">
            <li class="legend-item" data-legend aria-controls="hint-active">
              <span class="legend-dot legend-dot--active" aria-hidden="true"></span>
              <span class="legend-label">生效中</span>
              <p class="legend-hint" id="hint-active">权益正在生效，工具和内容可以直接用。</p>
            </li>
            <li class="legend-item" data-legend aria-controls="hint-pending">
              <span class="legend-dot legend-dot--pending" aria-hidden="true"></span>
              <span class="legend-label">待生效</span>
              <p class="legend-hint" id="hint-pending">订单已确认，到开始日期后自动转为生效中。</p>
            </li>
            <li class="legend-item" data-legend aria-controls="hint-due">
              <span class="legend-dot legend-dot--due" aria-hidden="true"></span>
              <span class="legend-label">即将到期</span>
              <p class="legend-hint" id="hint-due">离结束不足一个周期，续上之后使用不中断。</p>
            </li>
            <li class="legend-item" data-legend aria-controls="hint-expired">
              <span class="legend-dot legend-dot--due" aria-hidden="true"></span>
              <span class="legend-label">已到期</span>
              <p class="legend-hint" id="hint-expired">权益已停止，重新订阅即可恢复使用。</p>
            </li>
            <li class="legend-item" data-legend aria-controls="hint-cancel">
              <span class="legend-dot legend-dot--unknown" aria-hidden="true"></span>
              <span class="legend-label">已取消</span>
              <p class="legend-hint" id="hint-cancel">不再自动续费，剩余周期内照常使用。</p>
            </li>
            <li class="legend-item" data-legend aria-controls="hint-refund">
              <span class="legend-dot legend-dot--pending" aria-hidden="true"></span>
              <span class="legend-label">退款处理中</span>
              <p class="legend-hint" id="hint-refund">退款申请已受理，处理完成后面板会显示结果。</p>
            </li>
          </ul>
          <figure class="media media--phone home-sub-shot">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="会员中心订阅状态面板截图，六类状态以色块与文字标签并列展示" loading="lazy" decoding="async">
            <figcaption class="media-caption">会员中心 · 订阅状态面板</figcaption>
          </figure>
        </div>
        <p class="home-sub-note">会员中心之外，帮助文档里也放了订阅查询入口，两个地方查到的都是当前状态。<a class="link-inline" href="/questions/">查看查询步骤</a></p>
      </div>
    </div>
  </section>

  <section class="section section--paper home-catalog" id="catalog" aria-labelledby="catalog-title">
    <div class="wrap rail" data-count="03">
      <span class="rail-num" aria-hidden="true">03</span>
      <div class="rail-body">
        <p class="eyebrow">内容目录 · 8 月版 · 夏季批次</p>
        <h2 id="catalog-title" class="display display-m">当季推荐 9 条，对比评测 64 篇</h2>
        <p class="lede">当季产品线推荐按入门、主力、进阶分成三组，一共 9 条；九五至尊3对比评测从启动速度、界面清晰度、订阅信息透明度、帮助可达性四个维度打分。目录每季度换一次大版本，每月补两批。</p>
        <div class="filter-bar home-filter" data-filter-group="catalog" role="group" aria-label="按分类筛选目录条目">
          <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部 14 条</button>
          <button type="button" class="filter-btn" data-filter="recommend" aria-pressed="false">当季推荐</button>
          <button type="button" class="filter-btn" data-filter="review" aria-pressed="false">对比评测</button>
          <button type="button" class="filter-btn" data-filter="entry" aria-pressed="false">入门组</button>
          <button type="button" class="filter-btn" data-filter="main" aria-pressed="false">主力组</button>
          <button type="button" class="filter-btn" data-filter="pro" aria-pressed="false">进阶组</button>
        </div>
        <ol class="cat-list" data-filter-list>
          <li class="cat-row" data-filter-item data-tags="recommend entry">
            <span class="cat-num">01</span>
            <span class="cat-title">装好就能用的基础组合，首屏即刻上手</span>
            <span class="cat-meta">推荐 · 入门</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend entry">
            <span class="cat-num">02</span>
            <span class="cat-title">一个账号，安卓与 iOS 状态同步</span>
            <span class="cat-meta">推荐 · 入门</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend entry">
            <span class="cat-num">03</span>
            <span class="cat-title">常用工具收在一屏之内，少走两步</span>
            <span class="cat-meta">推荐 · 入门</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend main">
            <span class="cat-num">04</span>
            <span class="cat-title">订阅状态与到期提示放在同一屏</span>
            <span class="cat-meta">推荐 · 主力</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend main">
            <span class="cat-num">05</span>
            <span class="cat-title">帮助文档带工具直达索引，找东西不看目录</span>
            <span class="cat-meta">推荐 · 主力</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend main">
            <span class="cat-num">06</span>
            <span class="cat-title">多场景来回切换，操作不被打断</span>
            <span class="cat-meta">推荐 · 主力</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend pro">
            <span class="cat-num">07</span>
            <span class="cat-title">批量工具与快捷入口搭配使用</span>
            <span class="cat-meta">推荐 · 进阶</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend pro">
            <span class="cat-num">08</span>
            <span class="cat-title">内容目录跟着季度批次走，版本心里有数</span>
            <span class="cat-meta">推荐 · 进阶</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="recommend pro">
            <span class="cat-num">09</span>
            <span class="cat-title">手机与桌面并行使用的配置方式</span>
            <span class="cat-meta">推荐 · 进阶</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="review">
            <span class="cat-num">10</span>
            <span class="cat-title">启动速度：双端冷启动实测记录</span>
            <span class="cat-meta">评测</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="review">
            <span class="cat-num">11</span>
            <span class="cat-title">界面清晰度：首屏信息密度对照</span>
            <span class="cat-meta">评测</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="review">
            <span class="cat-num">12</span>
            <span class="cat-title">订阅信息透明度：状态标签写法比较</span>
            <span class="cat-meta">评测</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="review">
            <span class="cat-num">13</span>
            <span class="cat-title">帮助可达性：三步路径逐一验证</span>
            <span class="cat-meta">评测</span>
          </li>
          <li class="cat-row" data-filter-item data-tags="review">
            <span class="cat-num">14</span>
            <span class="cat-title">版本横向对比：与上一版的差异清单</span>
            <span class="cat-meta">评测</span>
          </li>
        </ol>
        <p class="catalog-more">想看完整的评分维度与挑选建议，去 <a class="link-inline" href="/services/">服务与工具</a>；近期版本变化和评测补充写在 <a class="link-inline" href="/notes/">内容笔记</a>。</p>
      </div>
    </div>
  </section>

  <section class="section home-start" id="start" aria-labelledby="start-title">
    <div class="wrap">
      <p class="eyebrow">起点 · 三条最短路径</p>
      <h2 id="start-title" class="display display-m">第一次来，挑一条最像你的路</h2>
      <ul class="start-list">
        <li class="start-row">
          <span class="start-num" aria-hidden="true">A</span>
          <div class="start-body">
            <h3>先确认双端入口</h3>
            <p>适合刚听说九五至尊3、还没打开过的人。看清安卓和 iOS 各自的位置，再动手。</p>
          </div>
          <a class="btn btn-ink btn-sm" href="/services/">看入口说明</a>
        </li>
        <li class="start-row">
          <span class="start-num" aria-hidden="true">B</span>
          <div class="start-body">
            <h3>先查订阅状态</h3>
            <p>适合已经用过、想确认权益还剩多久的人。六种状态对照清楚，下一步做什么也写得明白。</p>
          </div>
          <a class="btn btn-ink btn-sm" href="#subscription">查订阅状态</a>
        </li>
        <li class="start-row">
          <span class="start-num" aria-hidden="true">C</span>
          <div class="start-body">
            <h3>先读一篇评测再决定</h3>
            <p>适合还没想好选哪一版的人。四个维度都打了分，看完再对照推荐更稳。</p>
          </div>
          <a class="btn btn-ink btn-sm" href="/notes/">读评测与笔记</a>
        </li>
      </ul>
      <p class="start-tail">想先了解我们怎么做事，可以看 <a class="link-inline" href="/values/">品牌价值</a>；文档里一时没找到答案，<a class="link-inline" href="/questions/">问答中心</a>按打开、登录、订阅、工具、内容、账号安全分了六类，多数问题一句话就能解决。</p>
    </div>
  </section>

  <section class="section section--indigo home-contact" aria-labelledby="contact-title">
    <div class="wrap contact-strip">
      <div class="contact-lead">
        <p class="eyebrow">联系 · 人工确认</p>
        <h2 id="contact-title" class="display display-m">拿不准的时候，直接问我们</h2>
        <p class="lede">订阅状态、工具位置、双端登录，客服在工作日 9:00-18:00 内回复；非工作时间提交的消息，次日处理。</p>
        <a class="btn btn-gold" href="/connect/">去联系通道</a>
      </div>
      <dl class="contact-facts">
        <div><dt>客服邮箱</dt><dd>email@royal-jiuwuzun.com.cn</dd></div>
        <div><dt>客服电话</dt><dd>15172785672</dd></div>
        <div><dt>服务时段</dt><dd>工作日 9:00-18:00</dd></div>
        <div><dt>通信地址</dt><dd>陕西省西安市雁塔区高新路69号数字大厦12层</dd></div>
        <div><dt>备案号</dt><dd>陕ICP备88032895号</dd></div>
      </dl>
    </div>
  </section>

</main>

.page-home {
  --home-gap: clamp(18px, 3vw, 40px);
  --home-hair: 1px solid rgba(201, 162, 74, 0.42);
  --home-rule: 1px solid rgba(10, 13, 20, 0.16);
  background: var(--paper);
  overflow-x: clip;
}

.page-home img {
  max-width: 100%;
  height: auto;
}

/* 首屏 */
.page-home .hero-home {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: var(--paper);
  padding: clamp(22px, 4vw, 44px) 0 clamp(46px, 6vw, 92px);
}

.page-home .hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 74, 0.07) 0,
    rgba(201, 162, 74, 0.07) 1px,
    transparent 1px,
    transparent 26px
  );
  pointer-events: none;
}

.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-home .home-context {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.12em;
  color: var(--gold);
}

.page-home .hero-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.page-home .hero-brand {
  font-size: var(--step-128);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold);
}

@supports not (-webkit-text-stroke: 1px red) {
  .page-home .hero-brand {
    color: var(--gold-lit);
  }
}

.page-home .hero-line {
  margin-top: 14px;
  font-size: clamp(24px, 4.2vw, 52px);
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.page-home .hero-lede {
  margin: clamp(20px, 3vw, 30px) 0 0;
  max-width: 30em;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.72;
  color: var(--paper);
}

.page-home .hero-prose {
  margin: 16px 0 0;
  max-width: 34em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(243, 238, 227, 0.72);
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* 侧栏 */
.page-home .hero-aside {
  display: grid;
  gap: 16px;
  padding-top: 18px;
  border-top: 3px solid var(--gold);
}

.page-home .aside-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold-lit);
}

.page-home .aside-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--step-13);
  color: rgba(243, 238, 227, 0.78);
}

.page-home .aside-status .mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.page-home .status-lamp {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--celadon);
  box-shadow: 0 0 0 3px rgba(91, 140, 123, 0.28);
}

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

.page-home .shot-card {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--indigo-3);
  box-shadow: 6px 6px 0 rgba(201, 162, 74, 0.34);
}

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

.page-home .shot-card figcaption {
  padding: 6px 8px;
  border-top: var(--home-hair);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .aside-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: var(--home-hair);
}

.page-home .aside-stats dt {
  margin: 0 0 4px;
  font-size: var(--step-13);
  color: rgba(243, 238, 227, 0.6);
}

.page-home .aside-stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-15);
  letter-spacing: 0.04em;
  color: var(--gold-lit);
  word-break: break-word;
}

/* 编号轨 */
.page-home .rail-num {
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .section--indigo .rail-num {
  color: var(--gold-lit);
}

.page-home .rail-body > .lede {
  margin-top: 14px;
  max-width: 38em;
}

/* 三步路径 */
.page-home .home-steps-list {
  display: grid;
  gap: 0;
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}

.page-home .home-steps-list .step {
  padding: 20px 0;
  border-bottom: var(--home-rule);
}

.page-home .home-steps-list .step[data-state="current"] {
  padding-left: 14px;
  border-left: 3px solid var(--gold);
}

.page-home .home-steps-list .step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-home .home-steps-list .step h3 {
  margin: 10px 0 8px;
  font-size: var(--step-20);
  line-height: 1.4;
  color: var(--ink);
}

.page-home .home-steps-list .step p {
  margin: 0 0 10px;
  font-size: var(--step-15);
  line-height: 1.75;
  color: rgba(10, 13, 20, 0.74);
}

.page-home .home-flow {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(10px, 2vw, 18px);
  border: 3px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 8px 8px 0 var(--indigo);
}

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

/* 订阅状态 */
.page-home .sub-grid {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(22px, 3vw, 34px);
}

.page-home .sub-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 3px solid var(--ink);
  background: rgba(201, 162, 74, 0.35);
}

.page-home .sub-legend .legend-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 14px 16px;
  background: var(--indigo-3);
}

.page-home .sub-legend .legend-dot {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  flex: 0 0 auto;
}

.page-home .sub-legend .legend-label {
  font-family: var(--font-mono);
  font-size: var(--step-15);
  letter-spacing: 0.08em;
  color: var(--gold-lit);
}

.page-home .sub-legend .legend-hint {
  grid-column: 2;
  margin: 0;
  font-size: var(--step-13);
  line-height: 1.7;
  color: rgba(243, 238, 227, 0.72);
}

.page-home .home-sub-shot {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--indigo-2);
  box-shadow: 8px 8px 0 rgba(201, 162, 74, 0.45);
}

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

.page-home .home-sub-note {
  margin: clamp(22px, 3vw, 30px) 0 0;
  max-width: 40em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(243, 238, 227, 0.8);
}

/* 目录 */
.page-home .home-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 30px);
}

.page-home .cat-list {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--ink);
}

.page-home .cat-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 0;
  border-bottom: var(--home-rule);
  transition: background-color 120ms linear, transform 120ms linear;
}

.page-home .cat-row[hidden] {
  display: none;
}

.page-home .cat-num {
  font-family: var(--font-mono);
  font-size: var(--step-17);
  letter-spacing: 0.08em;
  color: var(--gold);
  line-height: 1.5;
}

.page-home .cat-title {
  font-size: var(--step-17);
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
}

.page-home .cat-meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.08em;
  color: var(--gray);
}

.page-home .cat-row:hover {
  background: var(--paper-2);
  transform: translateX(4px);
}

.page-home .catalog-more {
  margin: clamp(20px, 3vw, 28px) 0 0;
  max-width: 42em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(10, 13, 20, 0.76);
}

/* 起步台 */
.page-home .home-start {
  background: var(--paper-2);
  border-top: 3px solid var(--ink);
  padding: clamp(44px, 6vw, 80px) 0;
}

.page-home .start-list {
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.page-home .start-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
  padding: 20px 0;
  border-top: var(--home-rule);
}

.page-home .start-num {
  font-family: var(--font-mono);
  font-size: var(--step-28);
  line-height: 1;
  color: var(--gold);
}

.page-home .start-body h3 {
  margin: 0 0 6px;
  font-size: var(--step-20);
  line-height: 1.4;
  color: var(--ink);
}

.page-home .start-body p {
  margin: 0;
  font-size: var(--step-15);
  line-height: 1.75;
  color: rgba(10, 13, 20, 0.74);
}

.page-home .start-row .btn {
  grid-column: 2;
  justify-self: start;
}

.page-home .start-tail {
  margin: clamp(24px, 3vw, 32px) 0 0;
  max-width: 44em;
  font-size: var(--step-15);
  line-height: 1.8;
  color: rgba(10, 13, 20, 0.76);
}

/* 联系条 */
.page-home .home-contact {
  padding: clamp(44px, 6vw, 84px) 0;
}

.page-home .contact-strip {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

.page-home .contact-lead .lede {
  margin-top: 14px;
  max-width: 34em;
}

.page-home .contact-lead .btn {
  margin-top: clamp(20px, 3vw, 28px);
}

.page-home .contact-facts {
  display: grid;
  gap: 14px;
  margin: 0;
}

.page-home .contact-facts > div {
  padding-top: 10px;
  border-top: var(--home-hair);
}

.page-home .contact-facts dt {
  font-family: var(--font-mono);
  font-size: var(--step-13);
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-home .contact-facts dd {
  margin: 4px 0 0;
  font-size: var(--step-17);
  line-height: 1.6;
  color: var(--paper);
  word-break: break-word;
}

/* 响应式 */
@media (min-width: 560px) {
  .page-home .sub-legend {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 760px) {
  .page-home .home-steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .home-steps-list .step {
    padding: 24px 22px;
    border-bottom: 0;
    border-left: var(--home-rule);
  }

  .page-home .home-steps-list .step:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-home .home-steps-list .step[data-state="current"] {
    padding-left: 22px;
  }

  .page-home .cat-row {
    grid-template-columns: 64px minmax(0, 1fr) 200px;
    align-items: baseline;
  }

  .page-home .cat-meta {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
}

@media (min-width: 820px) {
  .page-home .start-row {
    grid-template-columns: 64px minmax(0, 1fr) 200px;
    align-items: center;
  }

  .page-home .start-row .btn {
    grid-column: 3;
    justify-self: end;
  }
}

@media (min-width: 900px) {
  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }

  .page-home .sub-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: start;
  }

  .page-home .contact-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .cat-row {
    transition: none;
  }

  .page-home .cat-row:hover {
    transform: none;
  }
}