.page-home {
  --home-notch: 18px;
  display: block;
}

/* ---------- 首屏通道带 ---------- */
.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 64px) 0 48px;
  background: linear-gradient(155deg, #07100E 0%, var(--deep) 46%, #0E1D19 100%);
}

.page-home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
  filter: saturate(0.92) contrast(1.06);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(229, 72, 122, 0.22), transparent 58%),
    radial-gradient(90% 80% at 10% 92%, rgba(63, 169, 245, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(11, 20, 18, 0.62) 0%, rgba(11, 20, 18, 0.88) 64%, var(--ink) 100%);
}

.page-home .hero-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(120px, 22vw, 260px);
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}

.page-home .hero-inner {
  position: relative;
}

.page-home .hero-kicker {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.page-home .hero-title {
  margin: 0 0 20px;
  max-width: 15em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 6.2vw, 60px);
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  background: linear-gradient(96deg, #F7EBCD 0%, var(--gold-bright) 42%, #C9A227 78%, #F2C14E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}

.page-home .hero-lead {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: clamp(15px, 2.4vw, 17px);
  line-height: 1.8;
  color: #D8D2C4;
}

.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.page-home .hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0 0 26px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-home .hero-stats dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--rock);
}

.page-home .hero-stats dd {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gold-bright);
}

.page-home .hero-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .hero-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #CFC9BB;
  text-decoration: none;
  border: 1px solid var(--line);
  background: rgba(28, 58, 49, 0.34);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .hero-index a .mono {
  font-size: 11px;
  color: var(--gold);
}

.page-home .hero-index a:hover,
.page-home .hero-index a:focus-visible {
  color: var(--paper);
  border-color: var(--line-gold);
  background: rgba(201, 162, 39, 0.14);
}

/* ---------- 章节骨架 ---------- */
.page-home .chapter {
  position: relative;
  padding: 72px 0;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--header-h-sm) + 24px);
}

.page-home .section-head {
  margin-bottom: 36px;
  max-width: 64ch;
}

.page-home .section-num {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.page-home .section-num::after {
  content: "";
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-gold), transparent);
}

.page-home .section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.page-home .section-desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--rock);
}

/* ---------- 账户设置 ---------- */
.page-home .account-grid {
  display: grid;
  gap: 26px;
}

.page-home .steps {
  display: grid;
  gap: 14px;
}

.page-home .step {
  position: relative;
  padding: 22px 22px 22px 58px;
  background: linear-gradient(148deg, rgba(28, 58, 49, 0.92), rgba(16, 35, 30, 0.96));
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--home-notch)), calc(100% - var(--home-notch)) 100%, 0 100%);
}

.page-home .step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(201, 162, 39, 0));
}

.page-home .step-num {
  position: absolute;
  left: 20px;
  top: 22px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
}

.page-home .step-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--paper);
}

.page-home .step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--rock);
}

.page-home .guard {
  margin-top: 18px;
  padding: 24px;
}

.page-home .guard-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.page-home .guard-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rock);
}

.page-home .guard-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.page-home .guard-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.7;
  color: var(--rock);
}

.page-home .account-side {
  display: grid;
  gap: 18px;
}

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

.page-home .side-note {
  padding: 20px 22px;
  border-left: 2px solid var(--gold);
  background: rgba(28, 58, 49, 0.5);
}

.page-home .side-note-label {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
}

.page-home .side-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--rock);
}

/* ---------- 规则对照 ---------- */
.page-home .rules {
  position: relative;
  overflow: hidden;
  padding: 22px 18px 26px;
  background: var(--paper);
  color: var(--paper-ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-home .rules-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page-home .rules-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-home .rules-switch {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: rgba(26, 26, 24, 0.07);
  border: 1px solid rgba(26, 26, 24, 0.14);
}

.page-home .rules-tab {
  cursor: pointer;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #4A463C;
  border: 1px solid transparent;
  user-select: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .rules-tab:hover {
  color: var(--paper-gold);
}

.page-home #tab-quota:checked ~ .rules-switch .rules-tab[for="tab-quota"],
.page-home #tab-cycle:checked ~ .rules-switch .rules-tab[for="tab-cycle"] {
  background: var(--deep);
  color: var(--gold-bright);
  border-color: var(--deep);
}

.page-home #tab-quota:focus-visible ~ .rules-switch .rules-tab[for="tab-quota"],
.page-home #tab-cycle:focus-visible ~ .rules-switch .rules-tab[for="tab-cycle"] {
  outline: 2px solid var(--paper-gold);
  outline-offset: 2px;
}

.page-home .rules-panels {
  position: relative;
  z-index: 1;
}

.page-home .rules-panel {
  display: none;
}

.page-home #tab-quota:checked ~ .rules-panels #panel-quota,
.page-home #tab-cycle:checked ~ .rules-panels #panel-cycle {
  display: block;
  animation: page-home-fade 0.24s var(--ease);
}

.page-home .rule-row {
  display: grid;
  gap: 4px 18px;
  padding: 15px 0;
  border-bottom: 1px dashed rgba(26, 26, 24, 0.16);
}

.page-home .rule-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .rule-key {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--paper-gold);
  padding-top: 3px;
}

.page-home .rule-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--paper-ink);
}

@keyframes page-home-fade {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- 活动时间轴 ---------- */
.page-home .archive-banner {
  margin-bottom: 42px;
}

.page-home .timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}

.page-home .timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;
  left: 17px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-gold) 10%, var(--line-gold) 86%, transparent);
}

.page-home .tl-item {
  position: relative;
  padding-left: 50px;
  margin-bottom: 22px;
}

.page-home .tl-dot {
  position: absolute;
  left: 17px;
  top: 26px;
  z-index: 1;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--gold-bright);
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(242, 193, 78, 0.12);
  transform: translateX(-50%);
}

.page-home .tl-card {
  padding: 22px 22px 20px;
}

.page-home .tl-meta {
  margin: 0 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.page-home .tl-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--paper);
}

.page-home .tl-facts {
  margin: 0;
  display: grid;
  gap: 8px;
}

.page-home .tl-facts > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.page-home .tl-facts dt {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--rock);
}

.page-home .tl-facts dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #D6D0C2;
}

.page-home .tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 2px;
  border: 1px solid transparent;
}

.page-home .tag--live {
  color: #FFD9E4;
  background: rgba(229, 72, 122, 0.2);
  border-color: rgba(229, 72, 122, 0.55);
}

.page-home .tag--done {
  color: var(--rock);
  background: rgba(185, 178, 164, 0.12);
  border-color: var(--line);
}

.page-home .chapter-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 3px;
  font-size: 14px;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 193, 78, 0.35);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .chapter-more:hover,
.page-home .chapter-more:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- 更新记录 ---------- */
.page-home .updates-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--line);
}

.page-home .update-row {
  display: grid;
  gap: 4px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.page-home .update-row:hover,
.page-home .update-row:focus-visible {
  background: rgba(28, 58, 49, 0.42);
  padding-left: 12px;
}

.page-home .update-col {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--gold);
}

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

.page-home .update-time {
  font-size: 12px;
  color: var(--rock);
}

/* ---------- 服务咨询 ---------- */
.page-home .support-inner {
  display: grid;
  gap: 30px;
  padding: 34px 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(201, 162, 39, 0.18), transparent 55%),
    linear-gradient(140deg, var(--deep), #0D1B17 72%);
  border: 1px solid var(--line-gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-home .support-copy .section-num {
  margin-bottom: 12px;
}

.page-home .support-text {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--rock);
}

.page-home .support-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0 0;
}

.page-home .support-links a {
  font-size: 13.5px;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 169, 245, 0.4);
  padding-bottom: 2px;
}

.page-home .support-links a:hover,
.page-home .support-links a:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
}

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

.page-home .support-facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--rock);
}

.page-home .support-facts li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-home .support-facts .mono {
  flex: 0 0 auto;
  min-width: 34px;
  font-size: 21px;
  line-height: 1.2;
  color: var(--gold-bright);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-home .rule-row {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
  }

  .page-home .rules {
    padding: 28px 28px 30px;
  }
}

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

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

  .page-home .tl-facts > div {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .page-home .chapter {
    padding: 88px 0;
  }

  .page-home .account-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: start;
  }

  .page-home .rules {
    padding: 36px 40px 38px;
  }

  .page-home .timeline::before {
    left: 50%;
  }

  .page-home .tl-item {
    width: 50%;
    margin-bottom: 30px;
    padding-left: 0;
    padding-right: 46px;
  }

  .page-home .tl-dot {
    left: auto;
    right: -7px;
    top: 28px;
    transform: none;
  }

  .page-home .tl-item:nth-child(even) {
    margin-left: 50%;
    padding-left: 46px;
    padding-right: 0;
  }

  .page-home .tl-item:nth-child(even) .tl-dot {
    left: -7px;
    right: auto;
  }

  .page-home .update-row {
    grid-template-columns: 116px minmax(0, 1fr) 130px;
    align-items: baseline;
    gap: 22px;
  }

  .page-home .support-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: 44px;
    padding: 44px 40px;
  }
}

@media (max-width: 519px) {
  .page-home .hero {
    padding-top: calc(var(--header-h-sm) + 44px);
  }

  .page-home .chapter {
    padding: 54px 0;
  }

  .page-home .rules {
    padding: 18px 15px 22px;
  }

  .page-home .rules-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .page-home .timeline::before {
    left: 13px;
  }

  .page-home .tl-item {
    padding-left: 42px;
  }

  .page-home .tl-dot {
    left: 13px;
    width: 13px;
    height: 13px;
  }

  .page-home .step {
    padding: 20px 18px 20px 50px;
  }

  .page-home .step-num {
    left: 16px;
  }

  .page-home .support-inner {
    padding: 26px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .rules-panel {
    animation: none;
  }

  .page-home .hero-index a,
  .page-home .step,
  .page-home .update-row,
  .page-home .chapter-more,
  .page-home .support-links a {
    transition: none;
  }

  .page-home .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


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

  <section class="hero" aria-labelledby="hero-title">
    <img class="hero-bg" src="{zhanqunpic:h:900w:1920}" width="1920" height="900" alt="澳门城市夜景宽幅，霓虹灯牌与建筑轮廓，无人物">
    <svg class="hero-rail" viewBox="0 0 1440 260" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <defs>
        <linearGradient id="homeRailGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#3FA9F5" stop-opacity="0"></stop>
          <stop offset="34%" stop-color="#3FA9F5" stop-opacity="0.7"></stop>
          <stop offset="62%" stop-color="#E5487A" stop-opacity="0.85"></stop>
          <stop offset="100%" stop-color="#C9A227" stop-opacity="0"></stop>
        </linearGradient>
      </defs>
      <path d="M0 206 C 240 58, 470 236, 720 130 S 1180 32, 1440 174" fill="none" stroke="url(#homeRailGrad)" stroke-width="1.4"></path>
      <path d="M0 238 C 280 118, 520 258, 760 174 S 1200 94, 1440 212" fill="none" stroke="url(#homeRailGrad)" stroke-width="1" opacity="0.55"></path>
    </svg>

    <div class="wrap hero-inner">
      <p class="hero-kicker mono">MACAU · SINCE 2016 · V4.2</p>
      <h1 id="hero-title" class="hero-title">网页版通道，第一屏就能直达登录</h1>
      <p class="hero-lead">澳门游戏娱乐正版自 2016 年起持续运营，网页版澳门游戏娱乐正通道入口固定在页面顶端，点一次就进入登录页。验证通过后您先看到的是账户设置面板：设备管理、登录提醒与二次验证都排在同一屏。</p>

      <div class="hero-actions">
        <a class="btn btn--gold" href="/products/">进入网页版通道</a>
        <a class="btn btn--ghost" href="#account">看看登录后去哪</a>
      </div>

      <dl class="hero-stats">
        <div><dt>运营起始</dt><dd class="mono">2016 年</dd></div>
        <div><dt>注册账户</dt><dd class="mono">180 万+</dd></div>
        <div><dt>日均活跃访问</dt><dd class="mono">12 万人次</dd></div>
        <div><dt>当前版本</dt><dd class="mono">4.2</dd></div>
      </dl>

      <nav class="hero-index" aria-label="本页章节">
        <a href="#account"><span class="mono">01</span>登录之后</a>
        <a href="#rules"><span class="mono">02</span>额度与活动</a>
        <a href="#archive"><span class="mono">03</span>近期活动</a>
        <a href="#updates"><span class="mono">04</span>更新记录</a>
        <a href="#support"><span class="mono">05</span>找人帮忙</a>
      </nav>
    </div>
  </section>

  <section class="chapter chapter--account" id="account" aria-labelledby="account-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-num mono">01</p>
        <h2 class="section-title" id="account-title">登录后的第一站，是您的账户设置</h2>
        <p class="section-desc">验证一过，设备管理、登录提醒与二次验证开关已经排在眼前，不用再翻菜单找入口。</p>
      </header>

      <div class="account-grid">
        <div class="account-main">
          <div class="steps">
            <article class="step reveal" data-reveal-delay="0">
              <span class="step-num mono" aria-hidden="true">01</span>
              <h3 class="step-title">先确认这台设备</h3>
              <p>首次登录会记录您当前使用的设备。在有效期内再次登录，可以沿用原有的安全凭证，重复验证那几步就省掉了。</p>
            </article>
            <article class="step reveal" data-reveal-delay="80">
              <span class="step-num mono" aria-hidden="true">02</span>
              <h3 class="step-title">把登录提醒打开</h3>
              <p>提醒默认是开启的，异地登录会立刻通知到您。接收方式可以按习惯调整，换成短信或站内消息都行，改完即时生效。</p>
            </article>
            <article class="step reveal" data-reveal-delay="160">
              <span class="step-num mono" aria-hidden="true">03</span>
              <h3 class="step-title">顺手看一眼规则栏</h3>
              <p>额度说明与近期活动安排都收在规则栏里。第一次进来先花一分钟扫一遍，后面查什么都快。</p>
            </article>
          </div>

          <div class="guard panel panel--notch reveal" data-reveal-delay="240">
            <h3 class="panel-title">账户安全的四项能力</h3>
            <ul class="guard-list">
              <li>设备白名单，常用设备一次登记长期有效</li>
              <li>异地登录提醒，异常位置即时推送</li>
              <li>二次验证开关，敏感操作再加一道确认</li>
              <li>登录记录查询，每次进站都有迹可循</li>
            </ul>
            <p class="guard-note">后两项能力在 2023 年账户安全升级中补齐，至今仍在持续调优。</p>
          </div>
        </div>

        <aside class="account-side">
          <figure class="media media--tall reveal" data-reveal-delay="120">
            <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="手机屏幕与抽象锁形光纹的局部特写，冷色调，无人物" loading="lazy" decoding="async">
          </figure>
          <div class="side-note">
            <p class="side-note-label mono">换手机之前</p>
            <p>先确认两件事：新设备登录后，旧设备的登录记录仍然查得到；异地提醒保持开启。两处都在账户设置里，改完当场生效。</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="chapter chapter--rules" id="rules" aria-labelledby="rules-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-num mono">02</p>
        <h2 class="section-title" id="rules-title">额度与活动，同一屏里对着看</h2>
        <p class="section-desc">老用户最常做的两件事——看当前额度状态、对下一期活动时间——现在收在同一块规则栏，切换标签即可。</p>
      </header>

      <div class="rules reveal">
        <img class="rules-texture" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="规则文档纸面纹理与斜线网格，米白与墨绿双色" loading="lazy" decoding="async">
        <input class="rules-radio" type="radio" name="home-rules-tab" id="tab-quota" checked>
        <input class="rules-radio" type="radio" name="home-rules-tab" id="tab-cycle">

        <div class="rules-switch">
          <label class="rules-tab" for="tab-quota">额度说明</label>
          <label class="rules-tab" for="tab-cycle">活动周期</label>
        </div>

        <div class="rules-panels">
          <div class="rules-panel" id="panel-quota">
            <div class="rule-row">
              <span class="rule-key mono">在哪看</span>
              <p>登录后从账户设置面板往下，直接连到规则栏的额度说明页签，不用退回首页再找一次。</p>
            </div>
            <div class="rule-row">
              <span class="rule-key mono">看什么</span>
              <p>当前状态、最近一次变更的时间，以及变更原因的一句说明，三项并排显示，扫一眼就明白发生了什么。</p>
            </div>
            <div class="rule-row">
              <span class="rule-key mono">变了会怎样</span>
              <p>状态一有调整，页签上立刻标出来，同时写进公告记录，之后随时可以回看当时的说明原文。</p>
            </div>
          </div>

          <div class="rules-panel" id="panel-cycle">
            <div class="rule-row">
              <span class="rule-key mono">一期包含</span>
              <p>主题、参与条件、时间跨度与状态标识，四项齐全，缺一项的活动不会出现在列表里。</p>
            </div>
            <div class="rule-row">
              <span class="rule-key mono">状态怎么看</span>
              <p>进行中用霓虹玫红标记，已结束转为岩灰，两者放在一起也不会看混。</p>
            </div>
            <div class="rule-row">
              <span class="rule-key mono">去哪翻</span>
              <p>活动中心按最近三期排成时间轴，往上滚动就能看到更早的期次，每期都带着自己的编号。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="chapter chapter--archive" id="archive" aria-labelledby="archive-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-num mono">03</p>
        <h2 class="section-title" id="archive-title">最近三期活动，按时间排好了</h2>
        <p class="section-desc">每一期都留下主题、参与条件、时间跨度与状态，想翻回上一期，往上滚一屏就够。</p>
      </header>

      <figure class="media media--wide archive-banner reveal">
        <img src="{zhanqunpic:h:500w:1600}" width="1600" height="500" alt="抽象光轨曲线横穿深色背景，玫红与电光蓝渐隐" loading="lazy" decoding="async">
      </figure>

      <ol class="timeline">
        <li class="tl-item reveal" data-reveal-delay="0">
          <span class="tl-dot" aria-hidden="true"></span>
          <div class="tl-card panel panel--notch">
            <p class="tl-meta mono">第三期 · 当前</p>
            <h3 class="tl-title">夜间通道体验</h3>
            <dl class="tl-facts">
              <div><dt>参与条件</dt><dd>已完成二次验证的注册账户</dd></div>
              <div><dt>时间跨度</dt><dd>连续两周</dd></div>
              <div><dt>状态</dt><dd><span class="tag tag--live">进行中</span></dd></div>
            </dl>
          </div>
        </li>
        <li class="tl-item reveal" data-reveal-delay="80">
          <span class="tl-dot" aria-hidden="true"></span>
          <div class="tl-card panel panel--notch">
            <p class="tl-meta mono">第二期 · 上一期</p>
            <h3 class="tl-title">设备管理开放周</h3>
            <dl class="tl-facts">
              <div><dt>参与条件</dt><dd>近三个月内有登录记录的账户</dd></div>
              <div><dt>时间跨度</dt><dd>十天</dd></div>
              <div><dt>状态</dt><dd><span class="tag tag--done">已结束</span></dd></div>
            </dl>
          </div>
        </li>
        <li class="tl-item reveal" data-reveal-delay="160">
          <span class="tl-dot" aria-hidden="true"></span>
          <div class="tl-card panel panel--notch">
            <p class="tl-meta mono">第一期 · 较早</p>
            <h3 class="tl-title">规则速览月</h3>
            <dl class="tl-facts">
              <div><dt>参与条件</dt><dd>全部注册账户</dd></div>
              <div><dt>时间跨度</dt><dd>一个月</dd></div>
              <div><dt>状态</dt><dd><span class="tag tag--done">已结束</span></dd></div>
            </dl>
          </div>
        </li>
      </ol>

      <a class="chapter-more" href="/press/">翻完整活动归档 <span aria-hidden="true">→</span></a>
    </div>
  </section>

  <section class="chapter chapter--updates" id="updates" aria-labelledby="updates-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-num mono">04</p>
        <h2 class="section-title" id="updates-title">刚更新过的内容，都留在这一列</h2>
        <p class="section-desc">公告与指南的每一次改动都带着时间戳，按时间倒序排开，最近发生的事排在最上面。</p>
      </header>

      <ul class="updates-list">
        <li>
          <a class="update-row" href="/press/">
            <span class="update-col mono">公告记录</span>
            <span class="update-title">4.2 版本变更说明：变更项、影响范围与生效时间</span>
            <span class="update-time mono">更新于 3 天前</span>
          </a>
        </li>
        <li>
          <a class="update-row" href="/press/">
            <span class="update-col mono">公告记录</span>
            <span class="update-title">活动归档时间轴上线，历史期次支持按栏目筛选</span>
            <span class="update-time mono">更新于 11 天前</span>
          </a>
        </li>
        <li>
          <a class="update-row" href="/tutorial/">
            <span class="update-col mono">使用教程</span>
            <span class="update-title">换手机重登的三步走：确认设备、开提醒、看记录</span>
            <span class="update-time mono">更新于 18 天前</span>
          </a>
        </li>
        <li>
          <a class="update-row" href="/tutorial/">
            <span class="update-col mono">使用教程</span>
            <span class="update-title">登录记录查询怎么用：时间、设备与位置怎么看</span>
            <span class="update-time mono">更新于 1 个月前</span>
          </a>
        </li>
        <li>
          <a class="update-row" href="/press/">
            <span class="update-col mono">公告记录</span>
            <span class="update-title">规则栏标签页改版回顾，两类内容同屏切换</span>
            <span class="update-time mono">更新于 2 个月前</span>
          </a>
        </li>
      </ul>

      <a class="chapter-more" href="/tutorial/">打开使用教程 <span aria-hidden="true">→</span></a>
    </div>
  </section>

  <section class="chapter chapter--support" id="support" aria-labelledby="support-title">
    <div class="wrap">
      <div class="support-inner">
        <div class="support-copy">
          <p class="section-num mono">05</p>
          <h2 class="section-title" id="support-title">需要人帮忙的时候，我们在线</h2>
          <p class="support-text">客服团队现有 30 名专员，工作日 10:00-18:00 在线，节假日顺延。账户、通道与规则三类问题各有对应的处理顺序，把设备型号、出现时间和页面提示写清楚，第一轮就能定位大半。</p>
          <a class="btn btn--gold" href="/inquiry/">前往咨询通道</a>
          <p class="support-links">
            <a href="/story/">了解九年运营轨迹</a>
            <a href="/terms/">阅读使用条款</a>
          </p>
        </div>

        <ul class="support-facts">
          <li><span class="mono">30</span>名客服专员，工作日 10:00-18:00 在线</li>
          <li><span class="mono">45</span>人内容与客服协作团队，分布于澳门与广州两地</li>
          <li><span class="mono">9</span>次大版本迭代，当前运行 4.2 版本</li>
          <li><span class="mono">8</span>分钟通道故障平均响应，全天候可用性监控</li>
        </ul>
      </div>
    </div>
  </section>

</main>