.page-home {
  --home-pad: clamp(48px, 8vw, 104px);
  --home-gap: clamp(20px, 4vw, 44px);
  color: var(--mist);
  background: var(--ink);
  overflow-x: clip;
}

.page-home [id] {
  scroll-margin-top: 24px;
}

.page-home .home-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-home a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-home .link {
  display: inline-block;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 2px;
  font-size: 15px;
  transition: color .18s ease, border-color .18s ease;
}

.page-home .link:hover,
.page-home .link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 首屏封面 ---------- */

.page-home .cover {
  position: relative;
  padding-block: clamp(36px, 6vw, 84px) clamp(48px, 8vw, 108px);
  background-image:
    radial-gradient(120% 80% at 84% 4%, rgba(255, 107, 26, .18), transparent 62%),
    linear-gradient(180deg, var(--ink-3), var(--ink));
}

.page-home .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 104px);
  opacity: .5;
  pointer-events: none;
}

.page-home .cover__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}

.page-home .cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--orange-soft);
  border-left: 3px solid var(--orange);
  padding-left: 12px;
  line-height: 1.4;
}

.page-home .cover__dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  transform: rotate(45deg);
}

.page-home .cover__title {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(34px, 7.4vw, 68px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--mist);
}

.page-home .cover__lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(15px, 2.3vw, 18px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .cover__index {
  display: grid;
  border-top: 1px solid var(--hair-strong);
}

.page-home .cover__index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hair);
  color: var(--mist);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}

.page-home .cover__index a:hover,
.page-home .cover__index a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
  padding-left: 10px;
}

.page-home .cover__no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
  flex: none;
}

.page-home .cover__index a:hover .cover__no,
.page-home .cover__index a:focus-visible .cover__no {
  color: var(--cyan);
}

.page-home .cover__index-text {
  display: inline-block;
  border-bottom: 1px solid transparent;
}

.page-home .cover__visual {
  margin: 0;
}

.page-home .cover__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .cover__frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 4px;
  background: var(--orange);
  z-index: 2;
}

.page-home .cover__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .cover__beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 178, 122, .26) 50%, transparent 60%);
  mix-blend-mode: screen;
}

.page-home .cover__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--line);
}

.page-home .cover__cap-tag {
  font-family: var(--font-mono);
  color: var(--cyan);
  flex: none;
}

/* ---------- 通用小节标题 ---------- */

.page-home .sec-head {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-home .sec-head__no {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--orange);
}

.page-home .sec-head__no::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--orange);
}

.page-home .sec-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .sec-head__lede {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

/* ---------- 本季看台焦点 ---------- */

.page-home .focus {
  padding-block: var(--home-pad);
  background: var(--ink);
}

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

.page-home .stands__row {
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--ink-2);
  background: linear-gradient(90deg, var(--ink-2), transparent 82%);
  transition: border-color .2s ease, background .2s ease;
}

.page-home .stands__row:hover {
  border-left-color: var(--orange);
}

.page-home .stands__no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.4vw, 30px);
  line-height: 1;
  color: var(--orange);
}

.page-home .stands__title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.4;
  color: var(--mist);
}

.page-home .stands__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--line);
}

.page-home .stands__tag {
  justify-self: start;
  align-self: start;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--cyan);
}

/* ---------- 关注列表卡 ---------- */

.page-home .watchcard {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--hair-strong);
  background: var(--ink-3);
}

.page-home .watchcard__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}

.page-home .watchcard__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.45;
  color: var(--mist);
}

.page-home .watchcard__chips {
  display: flex;
  gap: 8px;
}

.page-home .watchcard__chip {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--line);
  border: 1px solid var(--hair-strong);
  white-space: nowrap;
}

.page-home .watchcard__chip.is-active {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
  font-weight: 700;
}

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

.page-home .watchcard__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed var(--hair);
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-home .watchcard__star {
  color: var(--cyan);
  font-size: 13px;
  line-height: 1.75;
}

.page-home .watchcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

/* ---------- 赛程到赛后核对 ---------- */

.page-home .path {
  padding-block: var(--home-pad);
  background: var(--mist);
  color: var(--ink);
  background-image: repeating-linear-gradient(0deg, rgba(15, 27, 45, .05) 0 1px, transparent 1px 88px);
}

.page-home .path .sec-head__no {
  color: var(--orange-text);
}

.page-home .path .sec-head__no::after {
  background: var(--orange-text);
}

.page-home .path__grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.page-home .path h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--ink);
}

.page-home .path__lede {
  margin: 0 0 26px;
  max-width: 42ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--ink-2);
}

.page-home .path__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink-2);
}

.page-home .path__step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .path__no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 1;
  color: var(--orange-text);
  align-self: start;
}

.page-home .path__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.page-home .path__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}

.page-home .path__meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--orange-text);
}

/* ---------- 历史交锋档案架 ---------- */

.page-home .archive {
  padding-block: var(--home-pad);
  background: var(--ink-3);
}

.page-home .archive__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-home .archive h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .archive__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .steps {
  list-style: none;
  margin: 26px 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: none;
}

.page-home .steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  transition: border-color .2s ease;
}

.page-home .steps li:hover {
  border-color: var(--orange);
}

.page-home .steps__no {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  line-height: 1;
  color: var(--cyan);
  align-self: center;
}

.page-home .steps li strong {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--mist);
}

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

.page-home .archive__visual {
  margin: 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .archive__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-home .archive__cap {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--line);
  border-top: 1px solid var(--hair);
}

/* ---------- 家庭观赛席 ---------- */

.page-home .family {
  padding-block: var(--home-pad);
  background-image:
    radial-gradient(70% 60% at 10% 84%, rgba(61, 224, 255, .12), transparent 70%),
    linear-gradient(180deg, var(--ink), var(--ink-3));
}

.page-home .family__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.page-home .family__visual {
  margin: 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .family__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .family h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .family__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .family__list {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .family__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--line);
}

.page-home .family__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 12px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 资料维护与服务 ---------- */

.page-home .service {
  padding-block: var(--home-pad);
  background: var(--ink);
}

.page-home .stats {
  list-style: none;
  margin: 0 0 clamp(30px, 5vw, 52px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hair-strong);
  background: var(--hair-strong);
}

.page-home .stats li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 16px;
  background: var(--ink-2);
}

.page-home .stats__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 4.8vw, 40px);
  line-height: 1;
  color: var(--cyan);
}

.page-home .stats__lbl {
  font-size: 13px;
  line-height: 1.6;
  color: var(--line);
}

.page-home .service__cols {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-home .service__col {
  padding-top: 22px;
  border-top: 1px solid var(--hair-strong);
}

.page-home .service__col h3 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.4;
  color: var(--mist);
}

.page-home .service__col p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--line);
}

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

.page-home .service__contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  font-size: 15px;
}

.page-home .service__lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange-soft);
  min-width: 72px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 760px) {
  .page-home .stands__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 24px 22px;
  }

  .page-home .stands__row:nth-child(2) {
    margin-left: 18px;
  }

  .page-home .stands__row:nth-child(3) {
    margin-left: 36px;
  }

  .page-home .stands__tag {
    justify-self: end;
  }

  .page-home .path__step {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
  }

  .page-home .path__no {
    grid-row: auto;
    font-size: 28px;
  }

  .page-home .path__meta {
    grid-column: auto;
  }
}

@media (min-width: 900px) {
  .page-home .cover__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .path__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }

  .page-home .archive__grid,
  .page-home .family__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-home .family__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .page-home .service__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 72px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-home .cover__index a,
  .page-home .stands__row,
  .page-home .steps li,
  .page-home .link {
    transition: none;
  }
}


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

  <section class="cover" aria-labelledby="cover-h">
    <div class="home-wrap cover__grid">
      <div class="cover__text">
        <p class="cover__kicker"><span class="cover__dot" aria-hidden="true"></span>夜场坐标 · 火狐体育赛事内容</p>
        <h1 id="cover-h" class="cover__title">灯亮起之后，<br>每一场都有迹可循</h1>
        <p class="cover__lede">周末连看两场，最怕临时翻不到场次。火狐体育官网把足球、篮球等赛事的排期、对阵背景与赛后信息放在同一处看台：开赛前先排好顺序，想翻旧账就按队名把过往交锋找出来，终场后回到比分、阵容和关键事件里再看一遍。手机和平板都能打开，一家人围着同一块屏幕也不算吃力。</p>
        <nav class="cover__index" aria-label="页内索引">
          <a href="#focus"><span class="cover__no" aria-hidden="true">01</span><span class="cover__index-text">本季看点</span></a>
          <a href="#path"><span class="cover__no" aria-hidden="true">02</span><span class="cover__index-text">赛程与赛后</span></a>
          <a href="#archive"><span class="cover__no" aria-hidden="true">03</span><span class="cover__index-text">交锋档案</span></a>
          <a href="#family"><span class="cover__no" aria-hidden="true">04</span><span class="cover__index-text">家庭观赛</span></a>
          <a href="#service"><span class="cover__no" aria-hidden="true">05</span><span class="cover__index-text">团队与服务</span></a>
        </nav>
      </div>

      <figure class="cover__visual">
        <div class="cover__frame">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜晚球场看台与灯塔光束的广角抽象场景，深墨蓝底色上浮着橙色光晕，画面中没有人物面部">
          <span class="cover__beam" aria-hidden="true"></span>
        </div>
        <figcaption class="cover__cap"><span class="cover__cap-tag">灯塔 · 看台剖面</span>光束扫过层叠看台，信息也顺着这一层层往上排开。</figcaption>
      </figure>
    </div>
  </section>

  <section id="focus" class="focus" aria-labelledby="focus-h">
    <div class="home-wrap">
      <header class="sec-head">
        <p class="sec-head__no" aria-hidden="true">02</p>
        <h2 id="focus-h">本季看台焦点</h2>
        <p class="sec-head__lede">足球和篮球坐在主看台，另外十类赛事按各自的阶段陆续进场。赶上周末连看两场，你只要盯住一条按开赛顺序排下来的名单，不必临时翻找。</p>
      </header>

      <ol class="stands">
        <li class="stands__row">
          <span class="stands__no" aria-hidden="true">01</span>
          <div class="stands__main">
            <h3 class="stands__title">足球 · 篮球主看台</h3>
            <p class="stands__text">按联赛与阶段分栏，近几日的场次集中在一屏里，先看今晚、再排周末，前后顺序不会乱。</p>
          </div>
          <span class="stands__tag">主赛程</span>
        </li>
        <li class="stands__row">
          <span class="stands__no" aria-hidden="true">02</span>
          <div class="stands__main">
            <h3 class="stands__title">其余十类赛事的分区席</h3>
            <p class="stands__text">足球篮球之外的十个门类各有节奏，有的按轮次推进，有的按分站排开，进页面就能看清当前走到哪一步。</p>
          </div>
          <span class="stands__tag">分项排期</span>
        </li>
        <li class="stands__row">
          <span class="stands__no" aria-hidden="true">03</span>
          <div class="stands__main">
            <h3 class="stands__title">赛季专题与观赛长读</h3>
            <p class="stands__text">赛季专题、新手指南、交锋档案和家庭观赛四类内容分开摆放，赛前补背景、赛后慢慢读，都能挑到合适的入口。</p>
          </div>
          <span class="stands__tag">专题</span>
        </li>
      </ol>

      <div class="watchcard">
        <div class="watchcard__head">
          <h3 class="watchcard__title">关注列表：把常看的席位固定下来</h3>
          <div class="watchcard__chips" aria-hidden="true">
            <span class="watchcard__chip is-active">我的关注</span>
            <span class="watchcard__chip">全部赛事</span>
          </div>
        </div>
        <ul class="watchcard__list">
          <li><span class="watchcard__star" aria-hidden="true">★</span><span>收藏过的联赛会排到首页最前，打开就是自己关心的那几场。</span></li>
          <li><span class="watchcard__star" aria-hidden="true">★</span><span>在手机上打开时，收藏的球队同样优先出现在排期里。</span></li>
          <li><span class="watchcard__star" aria-hidden="true">★</span><span>一人最多放 30 个联赛或球队条目，够一家人各挑各的，也不会把版面塞满。</span></li>
        </ul>
        <div class="watchcard__foot">
          <a class="btn btn--sm" href="/tools/">设置我的关注</a>
          <a class="link" href="/stories/">翻一翻看台纪事</a>
        </div>
      </div>
    </div>
  </section>

  <section id="path" class="path" aria-labelledby="path-h">
    <div class="home-wrap path__grid">
      <div class="path__intro">
        <p class="sec-head__no" aria-hidden="true">03</p>
        <h2 id="path-h">从赛程到赛后核对</h2>
        <p class="path__lede">打开火狐体育移动端赛程，比赛按开赛顺序一场一场往下排，不用记住谁先谁后；终场之后回到同一处，比分、阵容和关键事件都摆在一起，复盘的时候心里有底。</p>
        <a class="btn" href="/tools/">打开观赛工具</a>
      </div>

      <ol class="path__steps">
        <li class="path__step">
          <span class="path__no" aria-hidden="true">01</span>
          <div class="path__body">
            <h3>先把一整天排顺</h3>
            <p>两场之间隔多久、下一场几点开球，顺着列表往下看就知道，不用另开窗口记时间。</p>
          </div>
          <span class="path__meta">按开赛顺序</span>
        </li>
        <li class="path__step">
          <span class="path__no" aria-hidden="true">02</span>
          <div class="path__body">
            <h3>看球时只盯两件事</h3>
            <p>当场比分和场上变化都在页面上，抬头看屏幕、低头看手机，眼睛不用来回适应。</p>
          </div>
          <span class="path__meta">单场焦点</span>
        </li>
        <li class="path__step">
          <span class="path__no" aria-hidden="true">03</span>
          <div class="path__body">
            <h3>终场后把账对清</h3>
            <p>赛后核对台把比分、阵容与关键事件并排放好，第二天再翻，看到的还是同一场。</p>
          </div>
          <span class="path__meta">三类并读</span>
        </li>
      </ol>
    </div>
  </section>

  <section id="archive" class="archive" aria-labelledby="archive-h">
    <div class="home-wrap archive__grid">
      <div class="archive__body">
        <p class="sec-head__no" aria-hidden="true">04</p>
        <h2 id="archive-h">历史交锋档案架</h2>
        <p class="archive__lede">本季档案里存着 2400 组以上对阵记录，覆盖 180 支球队。每支球队都分主客场、近期交锋和关键统计三种视图，第一次查也不会看懵。</p>

        <ol class="steps">
          <li>
            <span class="steps__no" aria-hidden="true">1</span>
            <strong>选赛事</strong>
            <span>先定足球还是篮球，范围立刻收窄。</span>
          </li>
          <li>
            <span class="steps__no" aria-hidden="true">2</span>
            <strong>查交锋</strong>
            <span>输入队名就能搜，也能按赛事类型和联赛再筛一遍。</span>
          </li>
          <li>
            <span class="steps__no" aria-hidden="true">3</span>
            <strong>看统计</strong>
            <span>主客场表现与近期战绩并排读，赛前聊球有料可讲。</span>
          </li>
        </ol>

        <a class="btn btn--ghost" href="/knowledge/">新手怎么查交锋</a>
      </div>

      <figure class="archive__visual">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="几何抽象的对阵热区图与球队档案卡片轮廓，荧光青标注统计区域" loading="lazy" decoding="async">
        <figcaption class="archive__cap">对阵关系以热区铺开，深浅一眼看出交锋密度。</figcaption>
      </figure>
    </div>
  </section>

  <section id="family" class="family" aria-labelledby="family-h">
    <div class="home-wrap family__grid">
      <figure class="family__visual">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="客厅场景中手机与平板同时浏览赛事页面的剪影，界面字号偏大、留白充足，画面中没有可识别人脸" loading="lazy" decoding="async">
      </figure>

      <div class="family__body">
        <p class="sec-head__no" aria-hidden="true">05</p>
        <h2 id="family-h">家庭观赛席</h2>
        <p class="family__lede">一个人看球用手机，几个人一起看就换平板。字号调大、行距放宽、多余颜色收掉，坐在稍远的位置，比分和队名照样认得出来。</p>
        <ul class="family__list">
          <li>正文放大到不用凑近屏幕，父母也念得出球队名字。</li>
          <li>元素间隔拉开，手指点错的机会更少。</li>
          <li>表格列宽随屏幕收放，手机上横向滑动也不会丢掉表头。</li>
          <li>每个季度做一次手机与平板的可读性回访，字号、间距和列宽跟着版本一起调。</li>
        </ul>
        <a class="link" href="/company/">看看是谁在做这件事</a>
      </div>
    </div>
  </section>

  <section id="service" class="service" aria-labelledby="service-h">
    <div class="home-wrap">
      <header class="sec-head">
        <p class="sec-head__no" aria-hidden="true">06</p>
        <h2 id="service-h">资料维护与服务</h2>
        <p class="sec-head__lede">一场球从排期到收尾要过好几道手。把这些手写清楚，你才知道翻到的每条信息是怎么来的。</p>
      </header>

      <ul class="stats">
        <li><span class="stats__num">12</span><span class="stats__lbl">覆盖的赛事类型</span></li>
        <li><span class="stats__num">300+</span><span class="stats__lbl">每周维护的赛程条目</span></li>
        <li><span class="stats__num">30</span><span class="stats__lbl">关注列表收藏上限</span></li>
        <li><span class="stats__num">26</span><span class="stats__lbl">内容与数据团队成员</span></li>
      </ul>

      <div class="service__cols">
        <div class="service__col">
          <h3>同一条信息，两个人过目</h3>
          <p>赛程、比分、阵容和关键事件分别归档，由两位成员交叉看过再放到页面上。26 人里赛事资料校对 9 人、内容编辑 8 人、前端体验 5 人、客服支持 4 人，各管一段，也互相看得见。</p>
          <p>我们还与多家区域体育内容机构保持资料协作，范围包括赛程校对、球队档案与专题内容，并曾在区域体育内容协作评选中获得年度内容组织奖。</p>
        </div>

        <div class="service__col">
          <h3>遇到问题，找得到人</h3>
          <p>资料写错、功能不会用、关注列表想重新排、家里一起看觉得字太小，都可以直接说。工作日 9:00-18:00 有人工回复；要紧的事在邮件主题里标一句“加急”，我们会在 2 小时内响应。</p>
          <ul class="service__contact">
            <li><span class="service__lbl">客服邮箱</span><a class="link" href="mailto:support@landmark-huohu.com.cn">support@landmark-huohu.com.cn</a></li>
            <li><span class="service__lbl">客服电话</span><a class="link" href="tel:40032782968">400-3278-2968</a></li>
          </ul>
          <a class="btn btn--sm" href="/reach-us/">服务联络</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-pad: clamp(48px, 8vw, 104px);
  --home-gap: clamp(20px, 4vw, 44px);
  color: var(--mist);
  background: var(--ink);
  overflow-x: clip;
}

.page-home [id] {
  scroll-margin-top: 24px;
}

.page-home .home-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-home a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-home .link {
  display: inline-block;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
  padding-bottom: 2px;
  font-size: 15px;
  transition: color .18s ease, border-color .18s ease;
}

.page-home .link:hover,
.page-home .link:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ---------- 首屏封面 ---------- */

.page-home .cover {
  position: relative;
  padding-block: clamp(36px, 6vw, 84px) clamp(48px, 8vw, 108px);
  background-image:
    radial-gradient(120% 80% at 84% 4%, rgba(255, 107, 26, .18), transparent 62%),
    linear-gradient(180deg, var(--ink-3), var(--ink));
}

.page-home .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 104px);
  opacity: .5;
  pointer-events: none;
}

.page-home .cover__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: end;
}

.page-home .cover__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  font-size: 12px;
  letter-spacing: .2em;
  line-height: 1.4;
  color: var(--orange-soft);
}

.page-home .cover__dot {
  width: 6px;
  height: 6px;
  background: var(--orange);
  transform: rotate(45deg);
}

.page-home .cover__title {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(34px, 7.4vw, 68px);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--mist);
}

.page-home .cover__lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(15px, 2.3vw, 18px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .cover__index {
  display: grid;
  border-top: 1px solid var(--hair-strong);
}

.page-home .cover__index a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--hair);
  color: var(--mist);
  text-decoration: none;
  font-size: 15px;
  transition: color .18s ease, border-color .18s ease, padding-left .18s ease;
}

.page-home .cover__index a:hover,
.page-home .cover__index a:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
  padding-left: 10px;
}

.page-home .cover__no {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}

.page-home .cover__index a:hover .cover__no,
.page-home .cover__index a:focus-visible .cover__no {
  color: var(--cyan);
}

.page-home .cover__index-text {
  display: inline-block;
}

.page-home .cover__visual {
  margin: 0;
}

.page-home .cover__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .cover__frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 4px;
  background: var(--orange);
  z-index: 2;
}

.page-home .cover__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .cover__beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 178, 122, .26) 50%, transparent 60%);
  mix-blend-mode: screen;
}

.page-home .cover__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--line);
}

.page-home .cover__cap-tag {
  flex: none;
  font-family: var(--font-mono);
  color: var(--cyan);
}

/* ---------- 小节标题 ---------- */

.page-home .sec-head {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-home .sec-head__no {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--orange);
}

.page-home .sec-head__no::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--orange);
}

.page-home .sec-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .sec-head__lede {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

/* ---------- 本季看台焦点 ---------- */

.page-home .focus {
  padding-block: var(--home-pad);
  background: var(--ink);
}

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

.page-home .stands__row {
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--ink-2);
  background: linear-gradient(90deg, var(--ink-2), transparent 82%);
  transition: border-color .2s ease;
}

.page-home .stands__row:hover {
  border-left-color: var(--orange);
}

.page-home .stands__no {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.4vw, 30px);
  line-height: 1;
  color: var(--orange);
}

.page-home .stands__title {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.4;
  color: var(--mist);
}

.page-home .stands__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--line);
}

.page-home .stands__tag {
  justify-self: start;
  align-self: start;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink);
  background: var(--cyan);
}

/* ---------- 关注列表 ---------- */

.page-home .watchcard {
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--hair-strong);
  background: var(--ink-3);
}

.page-home .watchcard__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}

.page-home .watchcard__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.45;
  color: var(--mist);
}

.page-home .watchcard__chips {
  display: flex;
  gap: 8px;
}

.page-home .watchcard__chip {
  padding: 5px 12px;
  border: 1px solid var(--hair-strong);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--line);
  white-space: nowrap;
}

.page-home .watchcard__chip.is-active {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
}

.page-home .watchcard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.page-home .watchcard__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed var(--hair);
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}

.page-home .watchcard__star {
  font-size: 13px;
  line-height: 1.75;
  color: var(--cyan);
}

.page-home .watchcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

/* ---------- 赛程到赛后核对 ---------- */

.page-home .path {
  padding-block: var(--home-pad);
  background-color: var(--mist);
  background-image: repeating-linear-gradient(0deg, rgba(15, 27, 45, .05) 0 1px, transparent 1px 88px);
  color: var(--ink);
}

.page-home .path .sec-head__no {
  color: var(--orange-text);
}

.page-home .path .sec-head__no::after {
  background: var(--orange-text);
}

.page-home .path__grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.page-home .path h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--ink);
}

.page-home .path__lede {
  margin: 0 0 26px;
  max-width: 42ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--ink-2);
}

.page-home .path__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink-2);
}

.page-home .path__step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.page-home .path__no {
  grid-row: span 2;
  align-self: start;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 1;
  color: var(--orange-text);
}

.page-home .path__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.page-home .path__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}

.page-home .path__meta {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--orange-text);
}

/* ---------- 历史交锋档案架 ---------- */

.page-home .archive {
  padding-block: var(--home-pad);
  background: var(--ink-3);
}

.page-home .archive__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.page-home .archive h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .archive__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .steps {
  list-style: none;
  margin: 26px 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  background: var(--ink-2);
  transition: border-color .2s ease;
}

.page-home .steps li:hover {
  border-color: var(--orange);
}

.page-home .steps__no {
  grid-row: span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  line-height: 1;
  color: var(--cyan);
}

.page-home .steps li strong {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--mist);
}

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

.page-home .archive__visual {
  margin: 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .archive__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
}

.page-home .archive__cap {
  padding: 12px 14px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  line-height: 1.7;
  color: var(--line);
}

/* ---------- 家庭观赛席 ---------- */

.page-home .family {
  padding-block: var(--home-pad);
  background-image:
    radial-gradient(70% 60% at 10% 84%, rgba(61, 224, 255, .12), transparent 70%),
    linear-gradient(180deg, var(--ink), var(--ink-3));
}

.page-home .family__grid {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.page-home .family__visual {
  margin: 0;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
}

.page-home .family__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .family h2 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.22;
  color: var(--mist);
}

.page-home .family__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.85;
  color: var(--line);
}

.page-home .family__list {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-home .family__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--line);
}

.page-home .family__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 12px;
  height: 1px;
  background: var(--cyan);
}

/* ---------- 资料维护与服务 ---------- */

.page-home .service {
  padding-block: var(--home-pad);
  background: var(--ink);
}

.page-home .stats {
  list-style: none;
  margin: 0 0 clamp(30px, 5vw, 52px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hair-strong);
  background: var(--hair-strong);
}

.page-home .stats li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 16px;
  background: var(--ink-2);
}

.page-home .stats__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 4.8vw, 40px);
  line-height: 1;
  color: var(--cyan);
}

.page-home .stats__lbl {
  font-size: 13px;
  line-height: 1.6;
  color: var(--line);
}

.page-home .service__cols {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-home .service__col {
  padding-top: 22px;
  border-top: 1px solid var(--hair-strong);
}

.page-home .service__col h3 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.4;
  color: var(--mist);
}

.page-home .service__col p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--line);
}

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

.page-home .service__contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  font-size: 15px;
}

.page-home .service__lbl {
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange-soft);
}

/* ---------- 响应式 ---------- */

@media (min-width: 760px) {
  .page-home .stands__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 24px 22px;
  }

  .page-home .stands__row:nth-child(2) {
    margin-left: 18px;
  }

  .page-home .stands__row:nth-child(3) {
    margin-left: 36px;
  }

  .page-home .stands__tag {
    justify-self: end;
  }

  .page-home .path__step {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
  }

  .page-home .path__no {
    grid-row: auto;
    font-size: 28px;
  }

  .page-home .path__meta {
    grid-column: auto;
  }
}

@media (min-width: 900px) {
  .page-home .cover__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .page-home .path__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }

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

  .page-home .family__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .page-home .service__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 72px);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .page-home .cover__index a,
  .page-home .stands__row,
  .page-home .steps li,
  .page-home .link {
    transition: none;
  }
}