.page-home {
  --home-pad: clamp(16px, 4vw, 32px);
  --home-gap: clamp(16px, 3vw, 28px);
  display: block;
}

/* ---------- 面包屑 ---------- */
.page-home .breadcrumbs {
  padding-block: 18px 6px;
}
.page-home .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--dark-muted);
}
.page-home .breadcrumbs__list li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--glass-line-strong);
}
.page-home .breadcrumbs__list a {
  color: var(--dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.page-home .breadcrumbs__list a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.page-home .breadcrumbs__list [aria-current="page"] {
  color: var(--gold);
}

/* ---------- 首屏拼贴 ---------- */
.page-home .hero {
  position: relative;
  padding-top: 8px;
}
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 40% 0;
  background:
    radial-gradient(60% 55% at 18% 20%, rgba(216, 164, 69, .13), transparent 70%),
    radial-gradient(50% 45% at 88% 8%, rgba(122, 138, 160, .16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.page-home .hero > .shell {
  position: relative;
  z-index: 1;
}

.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  align-items: stretch;
}

.page-home .hero-search {
  background: linear-gradient(180deg, rgba(20, 38, 58, .92), rgba(10, 22, 34, .96));
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  padding: var(--home-pad);
  position: relative;
  overflow: hidden;
}
.page-home .hero-search::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 201, 107, .18), transparent 68%);
  pointer-events: none;
}

.page-home .hero-title {
  margin: 14px 0 12px;
  max-width: 20ch;
  color: #F6F1E6;
}

.page-home .hero-lead {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dark-muted);
}

.page-home .quickfind {
  border-top: 1px solid var(--glass-line);
  padding-top: 20px;
}
.page-home .quickfind__label {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--dark-muted);
  margin-bottom: 10px;
}
.page-home .quickfind__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-home .quickfind__input {
  flex: 1 1 220px;
  min-width: 0;
  background: rgba(122, 138, 160, .1);
  border: 1px solid var(--glass-line-strong);
  border-radius: var(--radius-sm);
  color: #EFE9DC;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.page-home .quickfind__input::placeholder {
  color: rgba(147, 163, 183, .7);
}
.page-home .quickfind__input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(242, 201, 107, .18);
}
.page-home .quickfind__go {
  flex: 0 0 auto;
}
.page-home .quickfind__recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.page-home .quickfind__recent-key {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dark-muted);
}
.page-home .quickfind__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-home .quickfind__chips .chip {
  text-decoration: none;
  font-size: 13px;
}

/* 版本状态块 */
.page-home .hero-version {
  background: linear-gradient(160deg, rgba(27, 48, 73, .55), rgba(10, 22, 34, .9));
  border: 1px solid var(--glass-line-strong);
  border-radius: var(--radius-panel);
  padding: var(--home-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-home .version-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.page-home .version-head__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--dark-muted);
}
.page-home .version-number {
  margin: 0;
  font-size: clamp(40px, 9vw, 62px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(216, 164, 69, .35);
}
.page-home .version-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-muted);
}
.page-home .version-facts {
  margin: 4px 0 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--glass-line);
  display: grid;
  gap: 8px;
}
.page-home .version-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.page-home .version-fact dt {
  color: var(--dark-muted);
}
.page-home .version-fact dd {
  margin: 0;
  color: #EFE9DC;
}

/* 首屏大图 */
.page-home .hero-media {
  margin-top: var(--home-gap);
  position: relative;
}
.page-home .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
  border: 1px solid var(--glass-line);
  pointer-events: none;
  z-index: 2;
}
.page-home .hero-media img {
  filter: saturate(.92) contrast(1.03);
}

/* 索引带 */
.page-home .index-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: var(--home-gap) 0 0;
  padding: 0;
  list-style: none;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-home .index-band a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "key text"
    "key hint";
  gap: 2px 14px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(10, 22, 34, .78);
  text-decoration: none;
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.page-home .index-band a:hover {
  background: rgba(27, 48, 73, .86);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 107, .45);
}
.page-home .index-band__key {
  grid-area: key;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: .04em;
}
.page-home .index-band__text {
  grid-area: text;
  font-size: 16px;
  font-weight: 600;
  color: #F1ECE0;
  letter-spacing: .01em;
}
.page-home .index-band__hint {
  grid-area: hint;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark-muted);
}

/* ---------- 通用区块头 ---------- */
.page-home .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-line);
  margin-bottom: var(--home-gap);
}
.page-home .section-head__title {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #F2EDE1;
}
.page-home .section-head .index-label {
  color: var(--dark-muted);
}

/* ---------- 客户端状态 ---------- */
.page-home .client-rail {
  align-items: start;
}

.page-home .tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.page-home .tab {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.page-home .change-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-home .change-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(20, 38, 58, .62);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.page-home .change-list li:hover {
  border-color: rgba(242, 201, 107, .45);
  transform: translateY(-2px);
}
.page-home .change-list li .status-dot {
  margin-top: 6px;
}
.page-home .change-list__text {
  font-size: 15px;
  line-height: 1.7;
  color: #DCE3EC;
}

.page-home .client-timeline {
  margin-top: var(--home-gap);
}

.page-home .status-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: var(--home-gap);
}
.page-home .status-legend__item {
  position: relative;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 34, .58);
  outline: none;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.page-home .status-legend__item .status-dot {
  position: absolute;
  left: 16px;
  top: 20px;
}
.page-home .status-legend__item:hover,
.page-home .status-legend__item:focus-visible {
  border-color: rgba(242, 201, 107, .5);
  background: rgba(20, 38, 58, .78);
}
.page-home .status-legend__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #F1ECE0;
  margin-bottom: 4px;
}
.page-home .status-legend__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.page-home .status-legend__item:hover .status-legend__desc,
.page-home .status-legend__item:focus-visible .status-legend__desc {
  max-height: 140px;
  opacity: 1;
}

.page-home .side-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-home .side-card {
  padding: 18px;
}
.page-home .side-card__key {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--dark-muted);
}
.page-home .side-card .stat__value {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -.01em;
}
.page-home .side-card__label {
  margin: 8px 0 0;
  font-size: 14px;
  color: #E4E9F0;
}
.page-home .side-card__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--dark-muted);
}
.page-home .side-media {
  border-radius: var(--radius-card);
}

/* ---------- 归档轨道 ---------- */
.page-home .archive-banner {
  margin-bottom: var(--home-gap);
}
.page-home .entries {
  display: grid;
  gap: 10px;
}
.page-home .entry-fold {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  background: rgba(20, 38, 58, .55);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.page-home .entry-fold:hover {
  border-color: rgba(242, 201, 107, .42);
  transform: translateY(-2px);
}
.page-home .entry-fold .fold__trigger {
  width: 100%;
  background: none;
  border: 0;
  padding: 16px var(--home-pad);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.page-home .entry-fold__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}
.page-home .entry-fold__id {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .04em;
}
.page-home .entry-fold__title {
  font-size: 15px;
  color: #F1ECE0;
  font-weight: 500;
}
.page-home .entry-fold__tag {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-line-strong);
  color: var(--dark-muted);
}
.page-home .entry-fold__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--dark-muted);
}
.page-home .entry-fold .fold__inner {
  padding: 0 var(--home-pad) 18px;
}
.page-home .entry-fold .fold__inner p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dark-muted);
}
.page-home .entry-link {
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 201, 107, .4);
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.page-home .entry-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.page-home .track-more {
  margin: var(--home-gap) 0 0;
}

/* ---------- 三条主线 ---------- */
.page-home .lines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}
.page-home .line-card {
  position: relative;
  display: block;
  padding: calc(var(--home-pad) + 6px);
  border-radius: var(--radius-card);
  text-decoration: none;
  background: var(--paper);
  color: var(--ink-text);
  border: 1px solid var(--paper-2);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  overflow: hidden;
}
.page-home .line-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), rgba(216, 164, 69, .25));
}
.page-home .line-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.page-home .line-card__no {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-muted);
}
.page-home .line-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-text);
}
.page-home .line-card__text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-muted);
}
.page-home .line-card__go {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #8A5F14;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

/* ---------- 折叠问答 ---------- */
.page-home .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.page-home .faq-grid .fold {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(20, 38, 58, .5);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out);
}
.page-home .faq-grid .fold:hover {
  border-color: rgba(242, 201, 107, .4);
}
.page-home .faq-grid .fold__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  color: #F1ECE0;
  text-align: left;
  cursor: pointer;
}
.page-home .faq-grid .fold__inner {
  padding: 0 18px 16px;
}
.page-home .faq-grid .fold__inner p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--dark-muted);
}

/* ---------- 订阅 ---------- */
.page-home .subscribe-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding: calc(var(--home-pad) + 6px);
  border-radius: var(--radius-panel);
  border: 1px solid var(--glass-line-strong);
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(216, 164, 69, .16), transparent 66%),
    linear-gradient(180deg, rgba(20, 38, 58, .92), rgba(10, 22, 34, .96));
}
.page-home .subscribe-title {
  margin: 12px 0 12px;
  color: #F6F1E6;
  max-width: 24ch;
}
.page-home .subscribe-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dark-muted);
  max-width: 60ch;
}
.page-home .subscribe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-home .subscribe-tabs .chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
}
.page-home .subscribe-eg {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .03em;
  word-break: break-word;
}
.page-home .subscribe-card__side {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--glass-line);
}
.page-home .subscribe-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-home .subscribe-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.7;
  color: #DCE3EC;
}
.page-home .subscribe-list li .status-dot {
  margin-top: 7px;
}
.page-home .subscribe-fine {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--dark-muted);
}

/* ---------- 收束 ---------- */
.page-home .closer {
  padding-bottom: clamp(40px, 8vw, 90px);
}
.page-home .closer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding-top: 24px;
  border-top: 1px solid var(--glass-line);
}
.page-home .closer-title {
  margin: 12px 0 0;
  color: #F2EDE1;
  max-width: 22ch;
}
.page-home .closer-grid__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-home .closer-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(10, 22, 34, .76);
  color: #E8E2D6;
  text-decoration: none;
  font-size: 15px;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.page-home .closer-link .mono {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .1em;
}
.page-home .closer-link:hover {
  background: rgba(27, 48, 73, .9);
  color: var(--amber);
}

/* ---------- 平板及以上 ---------- */
@media (min-width: 700px) {
  .page-home .hero-collage {
    grid-template-columns: 1.9fr 1fr;
    grid-template-areas: "search version";
  }
  .page-home .hero-search { grid-area: search; }
  .page-home .hero-version { grid-area: version; }
  .page-home .index-band {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .status-legend {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .lines {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-home .subscribe-card {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
  .page-home .subscribe-card__side {
    border-top: 0;
    border-left: 1px solid var(--glass-line);
    padding-top: 0;
    padding-left: var(--home-gap);
  }
  .page-home .closer-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 1024px) {
  .page-home .hero-collage {
    grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr);
  }
  .page-home .hero-title {
    font-size: clamp(34px, 3.6vw, 48px);
  }
  .page-home .version-number {
    font-size: 68px;
  }
  .page-home .status-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .entries {
    gap: 12px;
  }
  .page-home .closer-grid__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .line-card:hover,
  .page-home .entry-fold:hover,
  .page-home .change-list li:hover {
    transform: none;
  }
  .page-home .status-legend__desc {
    transition: none;
  }
}


<main id="main-content" class="page-home">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="页面位置">
      <ol class="breadcrumbs__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">记录查询与版本状态</li>
      </ol>
    </nav>
  </div>

  <section class="hero section--tight">
    <div class="shell">
      <div class="hero-collage">
        <div class="hero-search" data-reveal>
          <p class="index-label">记录查询 · 一级入口</p>
          <h1 class="display-1 hero-title">爱博国娱乐查询主页收藏，从这里开始</h1>
          <p class="hero-lead">查记录、比版本、下客户端，国内访问中文首页一步到位，常来的用户可以顺手把主页收进收藏夹。</p>

          <div class="quickfind" role="search">
            <label class="quickfind__label" for="record-input">输入记录编号或关键词</label>
            <div class="quickfind__row">
              <input id="record-input" class="quickfind__input mono" type="search" placeholder="例如 AB-2024-0573 或 客户端同步" autocomplete="off">
              <a class="btn btn--gold quickfind__go" href="/information/">开始查询</a>
            </div>
            <div class="quickfind__recent">
              <span class="quickfind__recent-key">最近查询</span>
              <ul class="quickfind__chips">
                <li><a class="chip" href="/information/">客户端 3.2.7 同步耗时</a></li>
                <li><a class="chip" href="/information/">账号记录归档规则</a></li>
                <li><a class="chip" href="/questions/">记录编号在哪里看</a></li>
              </ul>
            </div>
          </div>
        </div>

        <aside class="hero-version" data-reveal>
          <div class="version-head">
            <span class="status-dot" aria-hidden="true"></span>
            <span class="version-head__label">当前客户端版本</span>
          </div>
          <p class="version-number mono">3.2.7</p>
          <p class="version-note">覆盖 Windows、macOS、Android、iOS 与网页端；相较 3.1.x 系列，资料同步耗时平均缩短约 40%。</p>
          <dl class="version-facts">
            <div class="version-fact">
              <dt>安装包</dt>
              <dd class="mono">约 68 MB</dd>
            </div>
            <div class="version-fact">
              <dt>占用磁盘</dt>
              <dd class="mono">约 210 MB</dd>
            </div>
            <div class="version-fact">
              <dt>界面语言</dt>
              <dd>简中 / 繁中 / 英文</dd>
            </div>
          </dl>
          <a class="btn btn--paper btn--wide" href="/app-download/">查看 3.2.7 更新日志</a>
        </aside>
      </div>

      <div class="hero-media media-frame media-frame--wide">
        <img src="{zhanqunpic:h:1200w:1600}" width="1600" height="1200" alt="深墨蓝界面局部特写，成排的琥珀色状态灯与等宽数字整齐排列" decoding="async">
        <span class="media-frame__label">夜间仪表盘 · 状态层局部</span>
      </div>

      <ul class="index-band" data-reveal>
        <li><a href="/information/"><span class="index-band__key mono">01</span><span class="index-band__text">资料库检索</span><span class="index-band__hint">1,860 余条条目，按 12 个分类标签组织</span></a></li>
        <li><a href="/app-download/"><span class="index-band__key mono">02</span><span class="index-band__text">客户端下载</span><span class="index-band__hint">自动更新或手动校验，更新日志长期保留</span></a></li>
        <li><a href="/questions/"><span class="index-band__key mono">03</span><span class="index-band__text">常见说明</span><span class="index-band__hint">8 大主题、约 140 条问答，随查随看</span></a></li>
      </ul>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section" id="client-status">
    <div class="shell">
      <div class="section-head">
        <h2 class="section-head__title">客户端 3.2.7 当前状态</h2>
        <p class="index-label">是否升级，看完这一段就有答案</p>
      </div>

      <div class="rail client-rail">
        <div class="rail__main">
          <div class="tabs" data-reveal>
            <div class="tablist" role="tablist" aria-label="客户端版本要点">
              <button class="chip tab" type="button" role="tab" aria-selected="true" id="tab-327" aria-controls="panel-327">3.2.7 版</button>
              <button class="chip tab" type="button" role="tab" aria-selected="false" id="tab-31x" aria-controls="panel-31x">3.1.x 系列</button>
            </div>
            <div class="tabpanel" id="panel-327" role="tabpanel" aria-labelledby="tab-327">
              <ul class="change-list">
                <li><span class="status-dot" aria-hidden="true"></span><span class="change-list__text">资料同步耗时平均缩短约 40%，大批量条目拉取更省等待时间。</span></li>
                <li><span class="status-dot" aria-hidden="true"></span><span class="change-list__text">更新日志与资料库条目互相引用，比对差异不用来回切页面。</span></li>
                <li><span class="status-dot" aria-hidden="true"></span><span class="change-list__text">支持自动更新与手动校验两种升级方式，网络不稳时可自行重试。</span></li>
              </ul>
            </div>
            <div class="tabpanel" id="panel-31x" role="tabpanel" aria-labelledby="tab-31x" hidden>
              <ul class="change-list">
                <li><span class="status-dot status-dot--gold" aria-hidden="true"></span><span class="change-list__text">3.1.x 仍可正常查询，但同步策略较旧，大体量条目耗时更长。</span></li>
                <li><span class="status-dot status-dot--gold" aria-hidden="true"></span><span class="change-list__text">旧版对应的说明已归入资料库，按版本号即可调出当时条目。</span></li>
                <li><span class="status-dot status-dot--gold" aria-hidden="true"></span><span class="change-list__text">长期使用建议升级到 3.2.7，五端入口资料保持一致。</span></li>
              </ul>
            </div>
          </div>

          <div class="media-frame media-frame--wide client-timeline">
            <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="横向版本时间轴抽象图，节点用暖金与松石绿区分状态" loading="lazy" decoding="async">
            <span class="media-frame__label">2.4 版至今 · 6 个主版本分支</span>
          </div>

          <div class="status-legend">
            <div class="status-legend__item" tabindex="0">
              <span class="status-dot" aria-hidden="true"></span>
              <span class="status-legend__name">已核对</span>
              <p class="status-legend__desc">条目内容确认无误，可以放心引用的版本。</p>
            </div>
            <div class="status-legend__item" tabindex="0">
              <span class="status-dot status-dot--alert" aria-hidden="true"></span>
              <span class="status-legend__name">待确认</span>
              <p class="status-legend__desc">刚发布的变更，正在走核对流程，平均 2.5 个工作日完成。</p>
            </div>
            <div class="status-legend__item" tabindex="0">
              <span class="status-dot status-dot--gold" aria-hidden="true"></span>
              <span class="status-legend__name">已归档</span>
              <p class="status-legend__desc">旧版资料已沉淀入库，保留修订痕迹可逐条展开。</p>
            </div>
          </div>
        </div>

        <aside class="rail__side side-stack">
          <div class="panel-glass side-card">
            <p class="side-card__key mono">近一年</p>
            <p class="stat__value">57</p>
            <p class="side-card__label">条版本变更条目</p>
            <p class="side-card__note">其中 12 条为重大变更，发布当日另出单独条目。</p>
          </div>
          <div class="panel-glass side-card">
            <p class="side-card__key mono">每月</p>
            <p class="stat__value">20</p>
            <p class="side-card__label">条新增归档（约）</p>
            <p class="side-card__note">每月第一个工作日发布一次版本汇总。</p>
          </div>
          <div class="media-frame media-frame--square side-media">
            <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="暗色界面网格纹理的方形局部，边缘透出琥珀色数据光" loading="lazy" decoding="async">
            <span class="media-frame__label">同步层纹理</span>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section" id="archive-track">
    <div class="shell">
      <div class="section-head">
        <h2 class="section-head__title">最近归档的版本条目</h2>
        <p class="index-label">点开即看要点，细节在资料库</p>
      </div>

      <div class="media-frame media-frame--wide archive-banner">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="等距视角的档案柜与网格纹理，抽屉上标着版本编号" loading="lazy" decoding="async">
        <span class="media-frame__label">归档层 · 版本号与更新时间双维度</span>
      </div>

      <div class="entries">
        <div class="fold entry-fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span class="entry-fold__head">
              <span class="entry-fold__id mono">AB-3.2.7-014</span>
              <span class="entry-fold__title">客户端同步策略调整说明</span>
              <span class="entry-fold__tag">客户端</span>
              <span class="entry-fold__status"><span class="status-dot status-dot--alert" aria-hidden="true"></span>待确认</span>
            </span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>本次调整把大批量资料的同步批次改为按分类分片拉取，弱网环境下也能续传。发布当日起 2.5 个工作日内完成核对。</p>
              <a class="entry-link" href="/information/">在资料库中查看完整条目</a>
            </div>
          </div>
        </div>

        <div class="fold entry-fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span class="entry-fold__head">
              <span class="entry-fold__id mono">AB-3.2.7-011</span>
              <span class="entry-fold__title">记录编号展示位置变更</span>
              <span class="entry-fold__tag">记录</span>
              <span class="entry-fold__status"><span class="status-dot" aria-hidden="true"></span>已核对</span>
            </span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>记录编号从页面次级位置移到条目头部，复制按钮同步前移，方便直接粘贴到核对邮件里。</p>
              <a class="entry-link" href="/information/">在资料库中查看完整条目</a>
            </div>
          </div>
        </div>

        <div class="fold entry-fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span class="entry-fold__head">
              <span class="entry-fold__id mono">AB-3.1.x-238</span>
              <span class="entry-fold__title">旧版资料归档整理</span>
              <span class="entry-fold__tag">版本</span>
              <span class="entry-fold__status"><span class="status-dot status-dot--gold" aria-hidden="true"></span>已归档</span>
            </span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>2.4 版以后的旧资料按版本号与更新时间两条线索重新归位，历史修订记录逐条保留，可随时展开回看当时写法。</p>
              <a class="entry-link" href="/information/">在资料库中查看完整条目</a>
            </div>
          </div>
        </div>

        <div class="fold entry-fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span class="entry-fold__head">
              <span class="entry-fold__id mono">AB-3.2.7-009</span>
              <span class="entry-fold__title">反馈区标签与资料库同步</span>
              <span class="entry-fold__tag">说明</span>
              <span class="entry-fold__status"><span class="status-dot" aria-hidden="true"></span>已核对</span>
            </span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>反馈区沿用资料库的分类标签，筛完直接对照，讨论有结论的条目会转入资料库留档。切换栏目时上一次的筛选条件会保留。</p>
              <a class="entry-link" href="/information/">在资料库中查看完整条目</a>
            </div>
          </div>
        </div>
      </div>

      <p class="track-more"><a class="btn btn--ghost" href="/information/">进入资讯中心看全部汇总</a></p>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section" id="three-lines">
    <div class="shell">
      <div class="section-head">
        <h2 class="section-head__title">三条使用主线，对号入座就行</h2>
        <p class="index-label">按你眼下要办的事选</p>
      </div>

      <div class="lines">
        <a class="line-card" href="/information/">
          <p class="line-card__no mono">线索 01</p>
          <h3 class="line-card__title">要查一条记录</h3>
          <p class="line-card__text">适合手上已有编号或关键词的人。1,860 余条条目覆盖 2.4 版至今 6 个主版本分支，按 12 个分类标签归类，查到就能看到状态与修订记录。</p>
          <span class="line-card__go">去资料库检索</span>
        </a>
        <a class="line-card" href="/app-download/">
          <p class="line-card__no mono">线索 02</p>
          <h3 class="line-card__title">要装或升客户端</h3>
          <p class="line-card__text">适合还在 3.1.x 的人。五端入口一个下载页说清，自动更新和手动校验都能走，安装包约 68 MB，装完占盘约 210 MB。</p>
          <span class="line-card__go">打开下载页</span>
        </a>
        <a class="line-card" href="/questions/">
          <p class="line-card__no mono">线索 03</p>
          <h3 class="line-card__title">要先弄懂再做</h3>
          <p class="line-card__text">适合第一次上手的人。8 大主题、约 140 条问答把编号在哪看、筛选怎么用、升级会不会丢资料这些事讲明白，看完再动手更稳。</p>
          <span class="line-card__go">翻常见说明</span>
        </a>
      </div>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section" id="quick-answers">
    <div class="shell">
      <div class="section-head">
        <h2 class="section-head__title">高频问题，展开就能看</h2>
        <p class="index-label">问答中心精选</p>
      </div>

      <div class="faq-grid">
        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>记录编号在哪里能看到？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>每条记录都在条目头部显示编号，形如 AB-3.2.7-014，旁边有复制按钮。写核对邮件时贴上去就行，客服能直接定位。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>升级到 3.2.7 会不会影响已有记录？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>不会。本次版本只改同步批次与展示位置，历史记录与修订痕迹照旧保留，升级后可逐条展开回看。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>待确认和已核对差在哪？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>待确认是刚发布、还在核对流程里的变更，平均 2.5 个工作日转为已核对；已核对表示内容已经确认，可以直接引用。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>国内访问中文首页会卡吗？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>首页首屏只请求必要的字体与样式资源，加载路径更直接，收藏后下次打开会更快。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>查询和反馈为什么要分开？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>资料库负责归档与检索，反馈区负责提交与讨论，两者用同一套分类标签。在反馈区有结论的内容会转入资料库留档。</p>
            </div>
          </div>
        </div>

        <div class="fold" data-fold>
          <button class="fold__trigger" type="button" data-fold-trigger aria-expanded="false">
            <span>旧版本的说明还能查到吗？</span>
            <span class="fold__sign" aria-hidden="true"></span>
          </button>
          <div class="fold__panel" data-fold-panel>
            <div class="fold__inner">
              <p>能。旧版资料统一归入资料库，按版本号和更新时间双向归位，历史版本全部保留，修订过程可以逐条展开。</p>
            </div>
          </div>
        </div>
      </div>

      <p class="track-more"><a class="btn btn--ghost" href="/questions/">继续去问答中心查看常见说明</a></p>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section subscribe-section" id="subscribe">
    <div class="shell">
      <div class="subscribe-card">
        <div class="subscribe-card__main">
          <p class="index-label">变更提醒</p>
          <h2 class="display-2 subscribe-title">不想天天来翻，就让提醒来找你</h2>
          <p class="subscribe-text">按版本号盯一条分支，或按分类标签盯一类主题，有新的归档或重大变更发布时通知你。近一年 57 条变更条目中有 12 条是重大变更，这类会在发生当日单独提示。</p>
          <div class="subscribe-tabs">
            <button class="chip" type="button" aria-pressed="true">按版本号订阅</button>
            <button class="chip" type="button" aria-pressed="false">按分类标签订阅</button>
          </div>
          <p class="subscribe-eg mono">示例轨迹：3.2.x → 同步策略 · 客户端 · 版本</p>
        </div>
        <div class="subscribe-card__side">
          <ul class="subscribe-list">
            <li><span class="status-dot" aria-hidden="true"></span>重大变更当日提示，不用等月度汇总</li>
            <li><span class="status-dot" aria-hidden="true"></span>每月第一个工作日推送版本汇总</li>
            <li><span class="status-dot" aria-hidden="true"></span>订阅与取消都在联系入口办理</li>
          </ul>
          <a class="btn btn--gold btn--wide" href="/reach-us/">提交订阅申请</a>
          <p class="subscribe-fine">也可以直接写信给客服，说明要跟的版本号或标签。</p>
        </div>
      </div>
    </div>
  </section>

  <div class="breathe" aria-hidden="true"></div>

  <section class="section--tight closer">
    <div class="shell">
      <div class="closer-grid">
        <div class="closer-grid__lead">
          <p class="index-label">下一步</p>
          <h2 class="display-2 closer-title">先把主页收好，再决定从哪条线开始</h2>
        </div>
        <div class="closer-grid__links">
          <a class="closer-link" href="/information/"><span class="mono">01</span> 资料库与版本汇总</a>
          <a class="closer-link" href="/app-download/"><span class="mono">02</span> 客户端下载与更新日志</a>
          <a class="closer-link" href="/questions/"><span class="mono">03</span> 常见说明与自助解答</a>
          <a class="closer-link" href="/history/"><span class="mono">04</span> 品牌历程与团队情况</a>
          <a class="closer-link" href="/reach-us/"><span class="mono">05</span> 客服邮箱与服务电话</a>
          <a class="closer-link" href="/usage/"><span class="mono">06</span> 站点与客户端使用规范</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-pad: clamp(16px, 4vw, 32px);
  --home-gap: clamp(16px, 3vw, 28px);
  display: block;
}

.page-home .breadcrumbs {
  padding-block: 18px 6px;
}
.page-home .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--dark-muted);
}
.page-home .breadcrumbs__list li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--glass-line-strong);
}
.page-home .breadcrumbs__list a {
  color: var(--dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.page-home .breadcrumbs__list a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
.page-home .breadcrumbs__list [aria-current="page"] {
  color: var(--gold);
}

.page-home .hero {
  position: relative;
  padding-top: 8px;
}
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 40% 0;
  background:
    radial-gradient(60% 55% at 18% 20%, rgba(216, 164, 69, .13), transparent 70%),
    radial-gradient(50% 45% at 88% 8%, rgba(122, 138, 160, .16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.page-home .hero > .shell {
  position: relative;
  z-index: 1;
}

.page-home .hero-collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  align-items: stretch;
}

.page-home .hero-search {
  background: linear-gradient(180deg, rgba(20, 38, 58, .92), rgba(10, 22, 34, .96));
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  padding: var(--home-pad);
  position: relative;
  overflow: hidden;
}
.page-home .hero-search::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 201, 107, .18), transparent 68%);
  pointer-events: none;
}

.page-home .hero-title {
  margin: 14px 0 12px;
  max-width: 20ch;
  color: #F6F1E6;
}

.page-home .hero-lead {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--dark-muted);
}

.page-home .quickfind {
  border-top: 1px solid var(--glass-line);
  padding-top: 20px;
}
.page-home .quickfind__label {
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--dark-muted);
  margin-bottom: 10px;
}
.page-home .quickfind__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-home .quickfind__input {
  flex: 1 1 220px;
  min-width: 0;
  background: rgba(122, 138, 160, .1);
  border: 1px solid var(--glass-line-strong);
  border-radius: var(--radius-sm);
  color: #EFE9DC;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.page-home .quickfind__input::placeholder {
  color: rgba(147, 163, 183, .7);
}
.page-home .quickfind__input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(242, 201, 107, .18);
}
.page-home .quickfind__go {
  flex: 0 0 auto;
}
.page-home .quickfind__recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.page-home .quickfind__recent-key {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--dark-muted);
}
.page-home .quickfind__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-home .quickfind__chips .chip {
  text-decoration: none;
  font-size: 13px;
}

.page-home .hero-version {
  background: linear-gradient(160deg, rgba(27, 48, 73, .55), rgba(10, 22, 34, .9));
  border: 1px solid var(--glass-line-strong);
  border-radius: var(--radius-panel);
  padding: var(--home-pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-home .version-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.page-home .version-head__label {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--dark-muted);
}
.page-home .version-number {
  margin: 0;
  font-size: clamp(40px, 9vw, 62px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(216, 164, 69, .35);
}
.page-home .version-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-muted);
}
.page-home .version-facts {
  margin: 4px 0 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--glass-line);
  display: grid;
  gap: 8px;
}
.page-home .version-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.page-home .version-fact dt {
  color: var(--dark-muted);
}
.page-home .version-fact dd {
  margin: 0;
  color: #EFE9DC;
}

.page-home .hero-media {
  margin-top: var(--home-gap);
  position: relative;
}
.page-home .hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
  border: 1px solid var(--glass-line);
  pointer-events: none;
  z-index: 2;
}
.page-home .hero-media img {
  filter: saturate(.92) contrast(1.03);
}

.page-home .index-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: var(--home-gap) 0 0;
  padding: 0;
  list-style: none;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-home .index-band a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "key text"
    "key hint";
  gap: 2px 14px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(10, 22, 34, .78);
  text-decoration: none;
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.page-home .index-band a:hover {
  background: rgba(27, 48, 73, .86);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 107, .45);
}
.page-home .index-band__key {
  grid-area: key;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: .04em;
}
.page-home .index-band__text {
  grid-area: text;
  font-size: 16px;
  font-weight: 600;
  color: #F1ECE0;
  letter-spacing: .01em;
}
.page-home .index-band__hint {
  grid-area: hint;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark-muted);
}

.page-home .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-line);
  margin-bottom: var(--home-gap);
}
.page-home .section-head__title {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #F2EDE1;
}
.page-home .section-head .index-label {
  color: var(--dark-muted);
}

.page-home .client-rail {
  align-items: start;
}

.page-home .tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.page-home .tab {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.page-home .change-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-home .change-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(20, 38, 58, .62);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.page-home .change-list li:hover {
  border-color: rgba(242, 201, 107, .45);
  transform: translateY(-2px);
}
.page-home .change-list li .status-dot {
  margin-top: 6px;
}
.page-home .change-list__text {
  font-size: 15px;
  line-height: 1.7;
  color: #DCE3EC;
}

.page-home .client-timeline {
  margin-top: var(--home-gap);
}

.page-home .status-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: var(--home-gap);
}
.page-home .status-legend__item {
  position: relative;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(10, 22, 34, .58);
  outline: none;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.page-home .status-legend__item .status-dot {
  position: absolute;
  left: 16px;
  top: 20px;
}
.page-home .status-legend__item:hover,
.page-home .status-legend__item:focus-visible {
  border-color: rgba(242, 201, 107, .5);
  background: rgba(20, 38, 58, .78);
}
.page-home .status-legend__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #F1ECE0;
  margin-bottom: 4px;
}
.page-home .status-legend__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.page-home .status-legend__item:hover .status-legend__desc,
.page-home .status-legend__item:focus-visible .status-legend__desc {
  max-height: 140px;
  opacity: 1;
}

.page-home .side-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-home .side-card {
  padding: 18px;
}
.page-home .side-card__key {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--dark-muted);
}
.page-home .side-card .stat__value {
  margin: 0;
  font-size: clamp(30px, 6vw, 42px);
  line-height: 1;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -.01em;
}
.page-home .side-card__label {
  margin: 8px 0 0;
  font-size: 14px;
  color: #E4E9F0;
}
.page-home .side-card__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--dark-muted);
}
.page-home .side-media {
  border-radius: var(--radius-card);
}

.page-home .archive-banner {
  margin-bottom: var(--home-gap);
}
.page-home .entries {
  display: grid;
  gap: 10px;
}
.page-home .entry-fold {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  background: rgba(20, 38, 58, .55);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.page-home .entry-fold:hover {
  border-color: rgba(242, 201, 107, .42);
  transform: translateY(-2px);
}
.page-home .entry-fold .fold__trigger {
  width: 100%;
  background: none;
  border: 0;
  padding: 16px var(--home-pad);
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.page-home .entry-fold__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}
.page-home .entry-fold__id {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .04em;
}
.page-home .entry-fold__title {
  font-size: 15px;
  color: #F1ECE0;
  font-weight: 500;
}
.page-home .entry-fold__tag {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-line-strong);
  color: var(--dark-muted);
}
.page-home .entry-fold__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--dark-muted);
}
.page-home .entry-fold .fold__inner {
  padding: 0 var(--home-pad) 18px;
}
.page-home .entry-fold .fold__inner p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--dark-muted);
}
.page-home .entry-link {
  font-size: 13px;
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 201, 107, .4);
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.page-home .entry-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.page-home .track-more {
  margin: var(--home-gap) 0 0;
}

.page-home .lines {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
}
.page-home .line-card {
  position: relative;
  display: block;
  padding: calc(var(--home-pad) + 6px);
  border-radius: var(--radius-card);
  text-decoration: none;
  background: var(--paper);
  color: var(--ink-text);
  border: 1px solid var(--paper-2);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  overflow: hidden;
}
.page-home .line-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold), rgba(216, 164, 69, .25));
}
.page-home .line-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.page-home .line-card__no {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-muted);
}
.page-home .line-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-text);
}
.page-home .line-card__text {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-muted);
}
.page-home .line-card__go {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #8A5F14;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

.page-home .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.page-home .faq-grid .fold {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(20, 38, 58, .5);
  overflow: hidden;
  transition: border-color 180ms var(--ease-out);
}
.page-home .faq-grid .fold:hover {
  border-color: rgba(242, 201, 107, .4);
}
.page-home .faq-grid .fold__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  color: #F1ECE0;
  text-align: left;
  cursor: pointer;
}
.page-home .faq-grid .fold__inner {
  padding: 0 18px 16px;
}
.page-home .faq-grid .fold__inner p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--dark-muted);
}

.page-home .subscribe-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding: calc(var(--home-pad) + 6px);
  border-radius: var(--radius-panel);
  border: 1px solid var(--glass-line-strong);
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(216, 164, 69, .16), transparent 66%),
    linear-gradient(180deg, rgba(20, 38, 58, .92), rgba(10, 22, 34, .96));
}
.page-home .subscribe-title {
  margin: 12px 0;
  color: #F6F1E6;
  max-width: 24ch;
}
.page-home .subscribe-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--dark-muted);
  max-width: 60ch;
}
.page-home .subscribe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-home .subscribe-tabs .chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
}
.page-home .subscribe-eg {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .03em;
  word-break: break-word;
}
.page-home .subscribe-card__side {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}
.page-home .subscribe-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.page-home .subscribe-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.7;
  color: #DCE3EC;
}
.page-home .subscribe-list li .status-dot {
  margin-top: 7px;
}
.page-home .subscribe-fine {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--dark-muted);
}

.page-home .closer {
  padding-bottom: clamp(40px, 8vw, 90px);
}
.page-home .closer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--home-gap);
  padding-top: 24px;
  border-top: 1px solid var(--glass-line);
}
.page-home .closer-title {
  margin: 12px 0 0;
  color: #F2EDE1;
  max-width: 22ch;
}
.page-home .closer-grid__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.page-home .closer-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(10, 22, 34, .76);
  color: #E8E2D6;
  text-decoration: none;
  font-size: 15px;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.page-home .closer-link .mono {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .1em;
}
.page-home .closer-link:hover {
  background: rgba(27, 48, 73, .9);
  color: var(--amber);
}

@media (min-width: 700px) {
  .page-home .hero-collage {
    grid-template-columns: 1.9fr 1fr;
  }
  .page-home .index-band {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .status-legend {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .lines {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-home .subscribe-card {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
  .page-home .subscribe-card__side {
    border-top: 0;
    border-left: 1px solid var(--glass-line);
    padding-top: 0;
    padding-left: var(--home-gap);
  }
  .page-home .closer-grid {
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-home .hero-collage {
    grid-template-columns: minmax(0, 2.1fr) minmax(300px, 1fr);
  }
  .page-home .hero-title {
    font-size: clamp(34px, 3.6vw, 48px);
  }
  .page-home .version-number {
    font-size: 68px;
  }
  .page-home .closer-grid__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .line-card:hover,
  .page-home .entry-fold:hover,
  .page-home .change-list li:hover {
    transform: none;
  }
  .page-home .status-legend__desc {
    transition: none;
  }
}