.page-home {
  --home-line: rgba(36, 64, 107, 0.6);
  --home-card-bg: rgba(11, 30, 58, 0.84);
  display: block;
  overflow-x: clip;
}

.page-home .crumbs {
  margin-top: 18px;
}

.page-home .sec-head {
  margin-bottom: 26px;
  max-width: 760px;
}

.page-home .sec-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ice);
  margin: 10px 0 14px;
}

.page-home .sec-head .lead {
  color: var(--mist);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.page-home .sec-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding: 22px 0 52px;
}

.page-home .hero-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

.page-home .hero-circuit circle {
  fill: var(--cyan);
  stroke: none;
}

.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-home .hero-grid > * {
  min-width: 0;
}

.page-home .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 9vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ice);
  margin: 12px 0 22px;
}

.page-home .hero-title .hot {
  background: linear-gradient(to top, rgba(255, 181, 71, 0.55) 0.2em, transparent 0.2em);
  padding: 0 0.04em;
  color: var(--gold);
}

.page-home .hero-lead {
  color: var(--ice);
  opacity: 0.86;
  font-size: 17px;
  line-height: 1.85;
  max-width: 34em;
  margin: 0 0 26px;
}

.page-home .hero-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .hero-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  background: rgba(11, 30, 58, 0.72);
  color: var(--ice);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-home .hero-role .mono {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .hero-role:hover,
.page-home .hero-role:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 224, 198, 0.12);
  transform: translateY(-2px);
}

.page-home .hero-role--gold {
  border-color: rgba(255, 181, 71, 0.7);
}

.page-home .hero-role--gold:hover,
.page-home .hero-role--gold:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 181, 71, 0.14);
}

.page-home .hero-visual {
  position: relative;
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.page-home .hero-glow {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .float-card {
  position: relative;
  z-index: 1;
  display: block;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  background: var(--home-card-bg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

.page-home .float-card--alt {
  border-color: rgba(0, 224, 198, 0.55);
}

.page-home .float-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-home .float-card--alt .float-kicker {
  color: var(--gold);
}

.page-home .float-line {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ice);
  line-height: 1.4;
}

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

.page-home .float-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 版本对照 ---------- */
.page-home .vs {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.92), rgba(6, 18, 37, 1));
}

.page-home .vs-art {
  margin: 0 0 24px;
}

.page-home .vs-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .vs-grid {
  display: grid;
  gap: 16px;
}

.page-home .vs-card {
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.page-home .vs-card--std {
  border-top: 3px solid var(--blue);
}

.page-home .vs-card--fam {
  border-top: 3px solid var(--cyan);
}

.page-home .vs-card-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--line);
}

.page-home .vs-ver {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .vs-card--fam .vs-ver {
  color: var(--cyan);
}

.page-home .vs-card-head h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--ice);
}

.page-home .vs-card-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .vs-list {
  margin: 0;
}

.page-home .vs-item {
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--home-line);
  transition: background 0.2s var(--ease);
}

.page-home .vs-item:last-child {
  border-bottom: 0;
}

.page-home .vs-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .vs-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ice);
}

.page-home .vs-item:hover {
  background: rgba(26, 92, 255, 0.14);
}

.page-home .vs-card--fam .vs-item:hover {
  background: rgba(0, 224, 198, 0.12);
}

.page-home .vs-more {
  margin: 24px 0 0;
}

/* ---------- 家庭场景横滑 ---------- */
.page-home .scenes {
  padding: 52px 0 40px;
}

.page-home .scene-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px max(22px, calc((100% - var(--wrap)) / 2)) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.page-home .scene-card {
  flex: 0 0 auto;
  width: min(80vw, 300px);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
}

.page-home .scene-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.page-home .scene-body {
  padding: 18px;
}

.page-home .scene-env {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-home .scene-body h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ice);
  line-height: 1.35;
}

.page-home .scene-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 帮助四步 ---------- */
.page-home .steps {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  background: rgba(4, 12, 26, 0.55);
}

.page-home .steps-art {
  margin: 0 0 26px;
}

.page-home .steps-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .step-axis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: step;
}

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

.page-home .step-num {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-home .step h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ice);
}

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

.page-home .steps-more {
  margin: 28px 0 0;
}

/* ---------- 数据带 ---------- */
.page-home .stats {
  padding: 52px 0;
  background-color: var(--ink-3);
  background-image:
    linear-gradient(var(--home-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--home-line) 1px, transparent 1px);
  background-size: 64px 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .stats-title {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ice);
}

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

.page-home .stat {
  padding: 18px;
  border-left: 3px solid var(--blue);
  background: rgba(6, 18, 37, 0.72);
}

.page-home .stat:nth-child(2) {
  border-left-color: var(--cyan);
}

.page-home .stat:nth-child(3) {
  border-left-color: var(--violet);
}

.page-home .stat:nth-child(4) {
  border-left-color: var(--gold);
}

.page-home .stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ice);
  margin-bottom: 10px;
}

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

.page-home .stats-link {
  margin: 26px 0 0;
}

.page-home .stats-link a {
  color: var(--link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 品牌日志 ---------- */
.page-home .journal {
  padding: 52px 0;
}

.page-home .journal-grid {
  display: grid;
  gap: 16px;
}

.page-home .post-card {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-home .post-card .tag {
  align-self: flex-start;
}

.page-home .post-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;
}

.page-home .post-card h3 a {
  color: var(--ice);
  text-decoration: none;
}

.page-home .post-card h3 a:hover,
.page-home .post-card h3 a:focus-visible {
  color: var(--cyan);
}

.page-home .post-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-home .post-meta {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--link);
}

/* ---------- 结尾行动 ---------- */
.page-home .start {
  padding: 52px 0 64px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.9), rgba(4, 12, 26, 1));
}

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

.page-home .start-grid > li {
  min-width: 0;
}

.page-home .start-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 44px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(6, 18, 37, 0.7);
  text-decoration: none;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), background 0.22s var(--ease);
}

.page-home .start-card:hover,
.page-home .start-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 224, 198, 0.1);
  transform: translateY(-2px);
}

.page-home .start-idx {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .start-card strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ice);
}

.page-home .start-card span:last-child {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .start-card--gold {
  border-color: rgba(255, 181, 71, 0.6);
}

.page-home .start-card--gold:hover,
.page-home .start-card--gold:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 181, 71, 0.14);
}

.page-home .start-note {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .start-note a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-home .hero-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-home .scene-card {
    width: 340px;
  }

  .page-home .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-home .step-axis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 900px) {
  .page-home .vs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .page-home .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .start-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-home .hero {
    padding: 34px 0 68px;
  }

  .page-home .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 40px;
  }

  .page-home .hero-visual {
    padding-top: 44px;
  }

  .page-home .hero-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    opacity: 0.52;
    border: 0;
  }

  .page-home .float-card {
    padding: 20px 20px 22px;
    backdrop-filter: blur(8px);
  }

  .page-home .float-card--alt {
    transform: translateX(-22px);
  }

  .page-home .sec-head h2 {
    font-size: clamp(30px, 3.6vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-role,
  .page-home .start-card,
  .page-home .vs-item {
    transition: none;
  }

  .page-home .hero-role:hover,
  .page-home .hero-role:focus-visible,
  .page-home .start-card:hover,
  .page-home .start-card:focus-visible {
    transform: none;
  }

  .page-home .float-card--alt {
    transform: none;
  }

  .page-home .scene-track {
    scroll-behavior: auto;
  }
}


<main id="main-content" class="page-home">
  <div class="wrap">
    <nav class="crumbs" aria-label="当前位置">
      <ol class="crumbs-list">
        <li class="crumbs-item"><span class="crumbs-current">首页</span></li>
      </ol>
    </nav>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <svg class="hero-circuit" viewBox="0 0 1440 480" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M-20 392 L260 392 L320 330 L620 330 L680 372 L980 372 L1044 308 L1460 308" />
      <path d="M-20 118 L196 118 L256 178 L520 178" />
      <path d="M1200 96 L1280 96 L1336 152 L1460 152" />
      <circle cx="320" cy="330" r="5" />
      <circle cx="680" cy="372" r="5" />
      <circle cx="1044" cy="308" r="5" />
      <circle cx="256" cy="178" r="4" />
    </svg>
    <div class="wrap hero-grid">
      <div class="hero-copy">
        <p class="eyebrow mono">CN 焕新 · 第 12 次全站大版本</p>
        <h1 class="hero-title" id="hero-title"><span class="hot">焕新</span>登场<br>全家的入口，重新排好</h1>
        <p class="hero-lead">奇迹电游中心服务家庭用户的数字娱乐与账户需求。这次把入门、账户、收藏与企业接入分成四条路，你按自己的情况选一条，往下走就有步骤可依。</p>
        <ul class="hero-roles">
          <li><a class="hero-role" href="/faq/">新手入门<span class="mono">01</span></a></li>
          <li><a class="hero-role" href="/projects/">家庭账户<span class="mono">02</span></a></li>
          <li><a class="hero-role" href="/faq/">老用户收藏<span class="mono">03</span></a></li>
          <li><a class="hero-role hero-role--gold" href="/connect/">企业入口<span class="mono">04</span></a></li>
        </ul>
      </div>

      <div class="hero-visual">
        <img class="hero-glow" src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="深墨蓝背景上展开的蓝色与青色光带，像电路在城市上空延伸，局部有暖金节点">
        <article class="float-card">
          <p class="float-kicker mono">家庭账户</p>
          <p class="float-line">1 位管理员 + 5 位家庭成员</p>
          <p class="float-note">共享内容清单、管理成员与设备、查看使用记录，最多 3 台设备同时在线。</p>
        </article>
        <article class="float-card float-card--alt">
          <p class="float-kicker mono">版本差异</p>
          <p class="float-line">五项差异，一张对照看得完</p>
          <p class="float-note">成员数量、设备并发、共享清单、记录周期、帮助权限。</p>
          <a class="float-link" href="/projects/">对照两个版本</a>
        </article>
      </div>
    </div>
  </section>

  <section class="vs" aria-labelledby="vs-title">
    <div class="wrap">
      <header class="sec-head" data-reveal>
        <p class="eyebrow mono">两个版本</p>
        <h2 id="vs-title">标准版还是家庭版，看这五项就够</h2>
        <p class="lead">一个人用，标准版 2.6 更轻省；一家人共用，家庭版 3.2 的成员、设备与记录规则都写在下面。</p>
      </header>

      <figure class="vs-art" data-reveal>
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="左右两组蓝色与青色几何模块并置，中间用暖金细线连接差异标记" loading="lazy" decoding="async">
      </figure>

      <div class="vs-grid" data-reveal>
        <article class="vs-card vs-card--std">
          <header class="vs-card-head">
            <p class="vs-ver mono">V 2.6</p>
            <h3>标准版</h3>
            <p>单人使用，入门与日常浏览的基本配套。</p>
          </header>
          <dl class="vs-list">
            <div class="vs-item"><dt>成员数量</dt><dd>单人使用</dd></div>
            <div class="vs-item"><dt>设备并发</dt><dd>2 台设备同时在线</dd></div>
            <div class="vs-item"><dt>共享清单</dt><dd>个人收藏</dd></div>
            <div class="vs-item"><dt>记录周期</dt><dd>个人使用记录</dd></div>
            <div class="vs-item"><dt>帮助权限</dt><dd>基础帮助文档</dd></div>
          </dl>
        </article>

        <article class="vs-card vs-card--fam">
          <header class="vs-card-head">
            <p class="vs-ver mono">V 3.2</p>
            <h3>家庭版</h3>
            <p>多人共享，客厅、平板与手机可以同时开用。</p>
          </header>
          <dl class="vs-list">
            <div class="vs-item"><dt>成员数量</dt><dd>1 位管理员 + 5 位家庭成员</dd></div>
            <div class="vs-item"><dt>设备并发</dt><dd>最多 3 台设备同时在线</dd></div>
            <div class="vs-item"><dt>共享清单</dt><dd>成员共享内容清单</dd></div>
            <div class="vs-item"><dt>记录周期</dt><dd>使用记录默认保留 12 个月</dd></div>
            <div class="vs-item"><dt>帮助权限</dt><dd>含家庭成员与设备管理指引</dd></div>
          </dl>
        </article>
      </div>

      <p class="vs-more"><a class="btn btn--ghost" href="/projects/">到项目中心看完整对照</a></p>
    </div>
  </section>

  <section class="scenes" aria-labelledby="scenes-title">
    <div class="wrap">
      <header class="sec-head" data-reveal>
        <p class="eyebrow mono">家庭日常</p>
        <h2 id="scenes-title">客厅一块屏，手里一台手机，都能接着用</h2>
        <p class="lead">家庭账户省掉的是反复交代的麻烦。四种常见环境，各自对应一个具体动作。</p>
      </header>
    </div>

    <div class="scene-track" tabindex="0" aria-label="家庭设备使用场景，可左右滚动">
      <article class="scene-card scene-card--media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="客厅大屏、平板和手机以半透明界面并置，成员头像用抽象几何图形代替真人" loading="lazy" decoding="async">
        <div class="scene-body">
          <p class="mono scene-env">客厅大屏</p>
          <h3>把一家人加进来</h3>
          <p>管理员发出邀请，五位家庭成员各自认领设备，谁在用哪台一眼看清。</p>
        </div>
      </article>

      <article class="scene-card">
        <div class="scene-body">
          <p class="mono scene-env">平板</p>
          <h3>共享一份内容清单</h3>
          <p>管理员勾选全家都能看的内容，成员打开平板就看到同一份清单。</p>
        </div>
      </article>

      <article class="scene-card">
        <div class="scene-body">
          <p class="mono scene-env">手机</p>
          <h3>翻一翻使用记录</h3>
          <p>使用记录默认保留 12 个月，孩子在手机上用了多久，家长随手可查。</p>
        </div>
      </article>

      <article class="scene-card">
        <div class="scene-body">
          <p class="mono scene-env">桌面设备</p>
          <h3>换机不重来</h3>
          <p>从客厅走到书桌，登录同一账户即可接上，收藏与清单都不用重新建。</p>
        </div>
      </article>
    </div>
  </section>

  <section class="steps" aria-labelledby="steps-title">
    <div class="wrap">
      <header class="sec-head" data-reveal>
        <p class="eyebrow mono">四步找到答案</p>
        <h2 id="steps-title">不知道从哪查，就按这四步走</h2>
        <p class="lead">186 篇帮助文档分成 6 个一级分类，按身份和问题走一遍，比在长列表里逐条翻要快得多。</p>
      </header>

      <figure class="steps-art" data-reveal>
        <img src="{zhanqunpic:h:500w:1200}" width="1200" height="500" alt="四个发光节点沿一条横向路径排列，节点旁有等宽数字标签和折叠面板轮廓" loading="lazy" decoding="async">
      </figure>

      <ol class="step-axis">
        <li class="step" data-reveal>
          <span class="step-num mono">STEP 01</span>
          <h3>先说你是谁</h3>
          <p>新手、家庭成员、老用户还是企业来访，入口不同，看到的说明也各不相同。</p>
        </li>
        <li class="step" data-reveal>
          <span class="step-num mono">STEP 02</span>
          <h3>挑出问题类型</h3>
          <p>账户、设备、内容、版本还是企业接入，六类里选一个，范围立刻缩小。</p>
        </li>
        <li class="step" data-reveal>
          <span class="step-num mono">STEP 03</span>
          <h3>照着步骤做</h3>
          <p>每篇文档顶部标出适用版本，2.6 和 3.2 的差别在哪一步，一眼能看到。</p>
        </li>
        <li class="step" data-reveal>
          <span class="step-num mono">STEP 04</span>
          <h3>把常看的存下来</h3>
          <p>常用页面保存在浏览器本地，不用登录，下次打开直接回到那一页。</p>
        </li>
      </ol>

      <p class="steps-more"><a class="btn btn--primary" href="/faq/">进帮助中心找答案</a></p>
    </div>
  </section>

  <section class="stats" aria-labelledby="stats-title">
    <div class="wrap">
      <h2 class="stats-title" id="stats-title">一直在更新，也一直有人在</h2>
      <div class="stats-grid">
        <div class="stat" data-reveal>
          <span class="stat-num mono">31</span>
          <p class="stat-label">个省级行政区的内容服务覆盖，南北家庭都能正常用起来。</p>
        </div>
        <div class="stat" data-reveal>
          <span class="stat-num mono">186</span>
          <p class="stat-label">篇帮助文档，分成入门、账户、设备、内容、版本、企业入口 6 个一级分类。</p>
        </div>
        <div class="stat" data-reveal>
          <span class="stat-num mono">第 3 版</span>
          <p class="stat-label">企业入口方案，3 种接入方式适配 12 类终端，上线流程压缩到 3 步。</p>
        </div>
        <div class="stat" data-reveal>
          <span class="stat-num mono">12</span>
          <p class="stat-label">次全站大版本迭代，CN 焕新是最近的一次。</p>
        </div>
      </div>
      <p class="stats-link"><a href="/about/">看看奇迹电游中心这几年是怎么走过来的</a></p>
    </div>
  </section>

  <section class="journal" aria-labelledby="journal-title">
    <div class="wrap">
      <header class="sec-head sec-head--split" data-reveal>
        <div>
          <p class="eyebrow mono">品牌日志</p>
          <h2 id="journal-title">最近改了什么，都写下来了</h2>
        </div>
        <a class="btn btn--quiet" href="/journal/">全部日志</a>
      </header>

      <div class="journal-grid">
        <article class="post-card" data-reveal>
          <span class="tag tag--cyan mono">版本札记</span>
          <h3><a href="/journal/">家庭版的记录页重做了一遍</a></h3>
          <p>使用记录按成员和设备分开展示，管理员确认设备在线状态少走几步。</p>
          <p class="post-meta mono">近两周</p>
        </article>

        <article class="post-card" data-reveal>
          <span class="tag tag--blue mono">家庭场景</span>
          <h3><a href="/journal/">客厅切到手机，不用重新登录</a></h3>
          <p>同一账户在不同设备之间接续使用，收藏和共享清单跟着一起走。</p>
          <p class="post-meta mono">上个月</p>
        </article>

        <article class="post-card" data-reveal>
          <span class="tag tag--gold mono">帮助文档更新</span>
          <h3><a href="/journal/">入门分类补了一批短步骤</a></h3>
          <p>新手最常卡住的创建账户与添加成员，拆成了更短的几步，照着做就能走完。</p>
          <p class="post-meta mono">本月</p>
        </article>
      </div>
    </div>
  </section>

  <section class="start" aria-labelledby="start-title">
    <div class="wrap">
      <header class="sec-head" data-reveal>
        <p class="eyebrow mono">从这里开始</p>
        <h2 id="start-title">按你现在的身份，挑一条路走</h2>
        <p class="lead">四条路各自通向对应的页面，不用先弄懂全部规则再动手。</p>
      </header>

      <ul class="start-grid">
        <li data-reveal><a class="start-card" href="/faq/"><span class="mono start-idx">01</span><strong>第一次来</strong><span>认识版本、创建账户、添加成员、收藏常用页面，四段走完就能上手。</span></a></li>
        <li data-reveal><a class="start-card" href="/projects/"><span class="mono start-idx">02</span><strong>一家人共用</strong><span>看看家庭账户怎么分设备、怎么管成员、记录保留多久。</span></a></li>
        <li data-reveal><a class="start-card" href="/faq/"><span class="mono start-idx">03</span><strong>老用户找页面</strong><span>常用页面的收藏方式与找回路径，都在帮助中心里说清楚。</span></a></li>
        <li data-reveal><a class="start-card start-card--gold" href="/connect/"><span class="mono start-idx">04</span><strong>企业客户</strong><span>第 3 版入口方案提供 3 种接入方式，适配 12 类终端。</span></a></li>
      </ul>

      <p class="start-note">使用前想先确认账号与设备规则，可以翻一翻<a href="/usage/">使用指引</a>；关心信息如何处理，见<a href="/privacy-notice/">隐私声明</a>。</p>
    </div>
  </section>
</main>

.page-home {
  --home-line: rgba(36, 64, 107, 0.6);
  --home-card-bg: rgba(11, 30, 58, 0.84);
  display: block;
  overflow-x: clip;
}

.page-home .crumbs {
  margin-top: 18px;
}

.page-home .sec-head {
  margin-bottom: 26px;
  max-width: 760px;
}

.page-home .sec-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ice);
  margin: 10px 0 14px;
}

.page-home .sec-head .lead {
  color: var(--mist);
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.page-home .sec-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding: 22px 0 52px;
}

.page-home .hero-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5;
}

.page-home .hero-circuit circle {
  fill: var(--cyan);
  stroke: none;
}

.page-home .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-home .hero-grid > * {
  min-width: 0;
}

.page-home .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 9vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ice);
  margin: 12px 0 22px;
}

.page-home .hero-title .hot {
  background: linear-gradient(to top, rgba(255, 181, 71, 0.55) 0.2em, transparent 0.2em);
  padding: 0 0.04em;
  color: var(--gold);
}

.page-home .hero-lead {
  color: var(--ice);
  opacity: 0.86;
  font-size: 17px;
  line-height: 1.85;
  max-width: 34em;
  margin: 0 0 26px;
}

.page-home .hero-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .hero-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  background: rgba(11, 30, 58, 0.72);
  color: var(--ice);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}

.page-home .hero-role .mono {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .hero-role:hover,
.page-home .hero-role:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 224, 198, 0.12);
  transform: translateY(-2px);
}

.page-home .hero-role--gold {
  border-color: rgba(255, 181, 71, 0.7);
}

.page-home .hero-role--gold:hover,
.page-home .hero-role--gold:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 181, 71, 0.14);
}

.page-home .hero-visual {
  position: relative;
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.page-home .hero-glow {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .float-card {
  position: relative;
  z-index: 1;
  display: block;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  background: var(--home-card-bg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}

.page-home .float-card--alt {
  border-color: rgba(0, 224, 198, 0.55);
}

.page-home .float-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-home .float-card--alt .float-kicker {
  color: var(--gold);
}

.page-home .float-line {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ice);
  line-height: 1.4;
}

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

.page-home .float-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 版本对照 ---------- */
.page-home .vs {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.92), rgba(6, 18, 37, 1));
}

.page-home .vs-art {
  margin: 0 0 24px;
}

.page-home .vs-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .vs-grid {
  display: grid;
  gap: 16px;
}

.page-home .vs-card {
  border: 1px solid var(--line);
  background: var(--ink-2);
}

.page-home .vs-card--std {
  border-top: 3px solid var(--blue);
}

.page-home .vs-card--fam {
  border-top: 3px solid var(--cyan);
}

.page-home .vs-card-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--line);
}

.page-home .vs-ver {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .vs-card--fam .vs-ver {
  color: var(--cyan);
}

.page-home .vs-card-head h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  color: var(--ice);
}

.page-home .vs-card-head p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .vs-list {
  margin: 0;
}

.page-home .vs-item {
  display: grid;
  gap: 5px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--home-line);
  transition: background 0.2s var(--ease);
}

.page-home .vs-item:last-child {
  border-bottom: 0;
}

.page-home .vs-item dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist);
}

.page-home .vs-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ice);
}

.page-home .vs-item:hover {
  background: rgba(26, 92, 255, 0.14);
}

.page-home .vs-card--fam .vs-item:hover {
  background: rgba(0, 224, 198, 0.12);
}

.page-home .vs-more {
  margin: 24px 0 0;
}

/* ---------- 家庭场景横滑 ---------- */
.page-home .scenes {
  padding: 52px 0 40px;
}

.page-home .scene-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px max(22px, calc((100% - var(--wrap)) / 2)) 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.page-home .scene-card {
  flex: 0 0 auto;
  width: min(80vw, 300px);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
}

.page-home .scene-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.page-home .scene-body {
  padding: 18px;
}

.page-home .scene-env {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-home .scene-body h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ice);
  line-height: 1.35;
}

.page-home .scene-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

/* ---------- 帮助四步 ---------- */
.page-home .steps {
  padding: 52px 0;
  border-top: 1px solid var(--line);
  background: rgba(4, 12, 26, 0.55);
}

.page-home .steps-art {
  margin: 0 0 26px;
}

.page-home .steps-art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.page-home .step-axis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

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

.page-home .step-num {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.page-home .step h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ice);
}

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

.page-home .steps-more {
  margin: 28px 0 0;
}

/* ---------- 数据带 ---------- */
.page-home .stats {
  padding: 52px 0;
  background-color: var(--ink-3);
  background-image:
    linear-gradient(var(--home-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--home-line) 1px, transparent 1px);
  background-size: 64px 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .stats-title {
  margin: 0 0 30px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ice);
}

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

.page-home .stat {
  padding: 18px;
  border-left: 3px solid var(--blue);
  background: rgba(6, 18, 37, 0.72);
}

.page-home .stat:nth-child(2) {
  border-left-color: var(--cyan);
}

.page-home .stat:nth-child(3) {
  border-left-color: var(--violet);
}

.page-home .stat:nth-child(4) {
  border-left-color: var(--gold);
}

.page-home .stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ice);
  margin-bottom: 10px;
}

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

.page-home .stats-link {
  margin: 26px 0 0;
}

.page-home .stats-link a {
  color: var(--link);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 品牌日志 ---------- */
.page-home .journal {
  padding: 52px 0;
}

.page-home .journal-grid {
  display: grid;
  gap: 16px;
}

.page-home .post-card {
  padding: 20px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-home .post-card .tag {
  align-self: flex-start;
}

.page-home .post-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 700;
}

.page-home .post-card h3 a {
  color: var(--ice);
  text-decoration: none;
}

.page-home .post-card h3 a:hover,
.page-home .post-card h3 a:focus-visible {
  color: var(--cyan);
}

.page-home .post-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--mist);
}

.page-home .post-meta {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--link);
}

/* ---------- 结尾行动 ---------- */
.page-home .start {
  padding: 52px 0 64px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.9), rgba(4, 12, 26, 1));
}

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

.page-home .start-grid > li {
  min-width: 0;
}

.page-home .start-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 44px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(6, 18, 37, 0.7);
  text-decoration: none;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), background 0.22s var(--ease);
}

.page-home .start-card:hover,
.page-home .start-card:focus-visible {
  border-color: var(--cyan);
  background: rgba(0, 224, 198, 0.1);
  transform: translateY(-2px);
}

.page-home .start-idx {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mist);
}

.page-home .start-card strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--ice);
}

.page-home .start-card span:last-child {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .start-card--gold {
  border-color: rgba(255, 181, 71, 0.6);
}

.page-home .start-card--gold:hover,
.page-home .start-card--gold:focus-visible {
  border-color: var(--gold);
  background: rgba(255, 181, 71, 0.14);
}

.page-home .start-note {
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .start-note a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-home .hero-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-home .scene-card {
    width: 340px;
  }

  .page-home .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-home .step-axis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 900px) {
  .page-home .vs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .page-home .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .journal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .start-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .page-home .hero {
    padding: 34px 0 68px;
  }

  .page-home .hero-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: 40px;
  }

  .page-home .hero-visual {
    padding-top: 44px;
  }

  .page-home .hero-glow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    opacity: 0.52;
    border: 0;
  }

  .page-home .float-card {
    padding: 20px 20px 22px;
    backdrop-filter: blur(8px);
  }

  .page-home .float-card--alt {
    transform: translateX(-22px);
  }

  .page-home .sec-head h2 {
    font-size: clamp(30px, 3.6vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-role,
  .page-home .start-card,
  .page-home .vs-item {
    transition: none;
  }

  .page-home .hero-role:hover,
  .page-home .hero-role:focus-visible,
  .page-home .start-card:hover,
  .page-home .start-card:focus-visible {
    transform: none;
  }

  .page-home .float-card--alt {
    transform: none;
  }

  .page-home .scene-track {
    scroll-behavior: auto;
  }
}