.page-home {
  --home-radius: 6px;
  --home-gap: 20px;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-top: 28px;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -30% -12% auto auto;
  width: 130%;
  height: 140%;
  background:
    linear-gradient(135deg, rgba(45, 226, 230, 0.16), rgba(10, 22, 40, 0) 52%),
    linear-gradient(212deg, rgba(255, 122, 61, 0.13), rgba(10, 22, 40, 0) 58%);
  transform: skewY(-6deg);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-home .breadcrumb {
  margin-bottom: 22px;
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--home-gap);
  align-items: start;
}

.page-home .scope-card,
.page-home .hero-main {
  grid-column: span 12;
}

/* 对照组卡片 */
.page-home .scope-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  padding: 18px 16px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -22px rgba(0, 0, 0, 0.9);
}

.page-home .scope-figure {
  margin: 0 0 12px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-700);
  border: 1px solid var(--hairline);
}

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

.page-home .scope-count {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mist-100);
}

.page-home .scope-count .mono {
  color: var(--cyan-400);
  font-size: 15px;
}

.page-home .scope-list {
  margin-top: 10px;
  max-height: 322px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

.page-home .scope-list::-webkit-scrollbar {
  width: 4px;
}

.page-home .scope-list::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border-radius: 2px;
}

.page-home .scope-item {
  border-bottom: 1px solid var(--hairline);
}

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

.page-home .scope-item > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease;
}

.page-home .scope-item > summary::-webkit-details-marker {
  display: none;
}

.page-home .scope-item > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--cyan-400);
}

.page-home .scope-item[open] > summary::after {
  content: "\2212";
}

.page-home .scope-item > summary:hover,
.page-home .scope-item > summary:focus-visible {
  color: var(--cyan-400);
  outline: none;
}

.page-home .scope-item[open] > summary {
  color: var(--cyan-200);
}

.page-home .scope-num {
  font-size: 11px;
  color: var(--slate-300);
  letter-spacing: 0.06em;
}

.page-home .scope-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 12px 26px;
}

.page-home .scope-sub .chip {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--slate-300);
  background: rgba(45, 226, 230, 0.04);
}

.page-home .scope-more {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  font-size: 13px;
}

/* 首屏右栏 */
.page-home .hero-main {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-home .home-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-home .home-lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
}
.page-home .home-lede {
  color: var(--mist-100);
  opacity: 0.88;
}

/* 版本差异面板 */
.page-home .ver-panel {
  margin-top: 4px;
  padding: 16px 16px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  background:
    linear-gradient(158deg, rgba(45, 226, 230, 0.08), rgba(16, 35, 59, 0.72) 42%),
    var(--ink-800);
}

.page-home .ver-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-home .ver-stamp {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-300);
}

.page-home .ver-chart {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .ver-legend {
  margin: 8px 0 14px;
  font-size: 12px;
  color: var(--slate-300);
}

.page-home .ver-legend .legend-now {
  color: var(--orange-500);
}

.page-home .ver-rows {
  display: grid;
}

.page-home .ver-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.page-home .ver-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-300);
  padding-left: 10px;
  position: relative;
}

.page-home .ver-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-700);
}

.page-home .ver-label--now {
  color: var(--orange-500);
}

.page-home .ver-label--now::before {
  background: var(--orange-500);
}

.page-home .ver-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* ---------- 四个来意分流 ---------- */
.page-home .tasks-head {
  margin-bottom: 26px;
}

.page-home .tasks-head .section-title {
  max-width: 22em;
}

.page-home .task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .task-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  background: var(--ink-800);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.page-home .task-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-400), rgba(45, 226, 230, 0));
  opacity: 0.6;
}

.page-home .task-card:hover,
.page-home .task-card:focus-visible {
  border-color: var(--cyan-400);
  background: var(--ink-700);
  transform: translateY(-2px);
  outline: none;
}

.page-home .task-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-home .task-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text);
}

.page-home .task-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-300);
}

.page-home .task-more {
  margin-top: auto;
  font-size: 13px;
  color: var(--orange-200);
  letter-spacing: 0.02em;
}

.page-home .task-more::after {
  content: " \2192";
}

/* ---------- 手机端评测 ---------- */
.page-home .eval {
  border-top: 1px solid var(--hairline);
}

.page-home .eval-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .eval-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-home .eval-main .section-title {
  margin: 0;
  max-width: 18em;
}

.page-home .eval-chips {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
}

.page-home .ev-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--cyan-200);
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: rgba(45, 226, 230, 0.06);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.page-home .ev-chip:hover,
.page-home .ev-chip:focus-visible {
  border-color: var(--cyan-400);
  color: var(--ink-900);
  background: var(--cyan-400);
  outline: none;
}

.page-home .ev-rows {
  display: grid;
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
}

.page-home .ev-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease, padding-left 0.18s ease;
}

.page-home .ev-row:hover,
.page-home .ev-row:focus-visible {
  background: rgba(45, 226, 230, 0.05);
  padding-left: 10px;
  outline: none;
}

.page-home .ev-num {
  font-size: 11px;
  color: var(--ink-700);
  color: var(--slate-300);
  letter-spacing: 0.06em;
}

.page-home .ev-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.page-home .ev-cat {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: var(--cyan-400);
}

.page-home .ev-when {
  font-size: 11px;
  color: var(--slate-300);
  white-space: nowrap;
}

.page-home .eval-media,
.page-home .check-media {
  margin: 0;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--ink-800);
}

.page-home .eval-media img,
.page-home .check-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .check-media img {
  aspect-ratio: 3 / 2;
}

.page-home .eval-media .media__caption,
.page-home .check-media .media__caption {
  position: static;
  display: block;
  padding: 10px 14px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-300);
  border-top: 1px solid var(--hairline);
  background: var(--ink-800);
}

/* ---------- 三步自查（浅色区） ---------- */
.page-home .check-band {
  --hairline: rgba(10, 22, 40, 0.16);
  --muted: #1B3554;
  --text: #0A1628;
  --slate-300: #46586E;
  --cyan-400: #0E8A8E;
  --ink-800: #FFFFFF;
  --surface: #FFFFFF;
  background: var(--paper);
  color: #0A1628;
  padding-top: 56px;
  padding-bottom: 56px;
}

.page-home .check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .check-media {
  border-color: rgba(10, 22, 40, 0.16);
  background: #FFFFFF;
}

.page-home .check-media .media__caption {
  color: #46586E;
  border-top-color: rgba(10, 22, 40, 0.14);
  background: #FFFFFF;
}

.page-home .check-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-home .check-main .section-title {
  margin: 0;
  max-width: 16em;
  color: #0A1628;
}

.page-home .check-main .lede {
  margin: 0;
  color: #46586E;
  font-size: 15px;
  line-height: 1.85;
}

.page-home .check-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.page-home .check-fold {
  border: 1px solid rgba(10, 22, 40, 0.16);
  border-radius: var(--home-radius);
  background: #FFFFFF;
  padding: 0 14px;
}

.page-home .check-fold .fold__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #0A1628;
  cursor: pointer;
  list-style: none;
}

.page-home .check-fold .fold__summary::-webkit-details-marker {
  display: none;
}

.page-home .check-step {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #0E8A8E;
  font-weight: 500;
}

.page-home .check-fold .fold__body {
  padding: 0 0 16px 0;
}

.page-home .check-fold .fold__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #46586E;
}

.page-home .check-main .btn--primary {
  justify-self: start;
  margin-top: 6px;
}

/* ---------- 运营与服务 ---------- */
.page-home .ops-head {
  margin-bottom: 24px;
}

.page-home .ops-head .section-title {
  max-width: 20em;
}

.page-home .stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--hairline);
}

.page-home .stat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  background: var(--ink-900);
}

.page-home .stat-cell .stat__value {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 500;
  line-height: 1;
  color: var(--cyan-400);
  letter-spacing: -0.01em;
}

.page-home .stat-plus {
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--orange-500);
}

.page-home .stat-cell .stat__label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-300);
}

.page-home .ops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}

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

.page-home .ops-text p:last-child {
  margin-bottom: 0;
}

.page-home .ops-aside {
  padding: 18px 16px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--orange-500);
  border-radius: var(--home-radius);
  background: var(--ink-800);
}

.page-home .ops-k {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan-400);
}

.page-home .ops-v {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .ops-cta {
  margin-top: 2px;
  font-size: 13px;
}

.page-home .ops-note {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--slate-300);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-home .hero {
    padding-top: 40px;
  }

  .page-home .hero-grid {
    gap: 24px;
  }

  .page-home .scope-card {
    grid-column: span 4;
    padding: 20px 18px 18px;
  }

  .page-home .hero-main {
    grid-column: span 8;
    gap: 18px;
  }

  .page-home .eval-grid {
    grid-template-columns: 7fr 5fr;
    gap: 36px;
  }

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

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

  .page-home .ver-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

@media (min-width: 1180px) {
  .page-home .hero-main {
    padding-left: 8px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-home .task-card,
  .page-home .ev-row,
  .page-home .ev-chip,
  .page-home .scope-item > summary {
    transition: none;
  }

  .page-home .task-card:hover,
  .page-home .task-card:focus-visible {
    transform: none;
  }

  .page-home .ev-row:hover,
  .page-home .ev-row:focus-visible {
    padding-left: 4px;
  }
}
<<<END>>>
```

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

  <section class="section hero">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="当前位置">
        <span class="breadcrumb__sep" aria-hidden="true">/</span>
        <a href="/">首页</a>
        <span class="breadcrumb__sep" aria-hidden="true">/</span>
        <span aria-current="page">栏目总览</span>
      </nav>

      <div class="hero-grid">

        <div class="scope-card" data-reveal>
          <p class="eyebrow">栏目对照</p>
          <figure class="scope-figure">
            <img src="{zhanqunpic:h:720w:960}" width="960" height="720" alt="深墨蓝底上的荧光青节点与连线，呈现一级栏目与二级栏目的层级对照关系">
          </figure>
          <p class="scope-count"><span class="mono">12</span> 个一级栏目 · <span class="mono">46</span> 个二级栏目</p>
          <div class="scope-list">

            <details class="scope-item">
              <summary><span class="mono scope-num">01</span>赛事速递</summary>
              <div class="scope-sub"><span class="chip">赛前速报</span><span class="chip">赛后战报</span><span class="chip">赛果集锦</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">02</span>联赛档案</summary>
              <div class="scope-sub"><span class="chip">赛季资料</span><span class="chip">积分排位</span><span class="chip">历史战绩</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">03</span>数据看板</summary>
              <div class="scope-sub"><span class="chip">实时统计</span><span class="chip">球队对比</span><span class="chip">趋势图</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">04</span>图文直播</summary>
              <div class="scope-sub"><span class="chip">文字直播</span><span class="chip">关键回合</span><span class="chip">现场图集</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">05</span>专题策划</summary>
              <div class="scope-sub"><span class="chip">赛季专题</span><span class="chip">人物专题</span><span class="chip">规则专题</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">06</span>球队与球员</summary>
              <div class="scope-sub"><span class="chip">阵容名单</span><span class="chip">球员资料</span><span class="chip">转会动态</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">07</span>赛程日历</summary>
              <div class="scope-sub"><span class="chip">月度赛程</span><span class="chip">焦点场次</span><span class="chip">观赛提醒</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">08</span>规则解读</summary>
              <div class="scope-sub"><span class="chip">判罚说明</span><span class="chip">规则问答</span><span class="chip">案例拆解</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">09</span>装备与场地</summary>
              <div class="scope-sub"><span class="chip">器材指南</span><span class="chip">场地标准</span><span class="chip">维护要点</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">10</span>青训与校园</summary>
              <div class="scope-sub"><span class="chip">梯队建设</span><span class="chip">校园联赛</span><span class="chip">训练方法</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">11</span>访谈与声音</summary>
              <div class="scope-sub"><span class="chip">教练访谈</span><span class="chip">球员问答</span><span class="chip">行业观察</span></div>
            </details>

            <details class="scope-item">
              <summary><span class="mono scope-num">12</span>服务公告</summary>
              <div class="scope-sub"><span class="chip">版本说明</span><span class="chip">服务安排</span><span class="chip">常见通知</span></div>
            </details>

          </div>
          <a class="btn btn--ghost scope-more" href="/features/">看完整对照表</a>
        </div>

        <div class="hero-main" data-reveal style="--reveal-delay:.08s">
          <p class="eyebrow">月度改版</p>
          <h1 class="home-h1">栏目在哪里、这次改了什么，先对上再动手</h1>
          <p class="home-lede">欧博体育汇为中文体育读者梳理出 12 个一级栏目与 46 个二级栏目的完整对照，每月随版本一起更新。这个月调整了哪几个入口、和上一个月差在哪几处，下面这条轴上一次就能比完。</p>

          <div class="ver-panel">
            <div class="ver-head">
              <span class="tag">版本差异</span>
              <span class="mono ver-stamp">本期 · 月度归档</span>
            </div>

            <svg class="ver-chart" viewBox="0 0 640 176" role="img" aria-label="近八期版本差异条目数量变化折线，最新一期差异条目最多，以暖橙色圆点标出">
              <defs>
                <linearGradient id="homeVerFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#2DE2E6" stop-opacity="0.34"/>
                  <stop offset="100%" stop-color="#2DE2E6" stop-opacity="0"/>
                </linearGradient>
              </defs>
              <g stroke="#1B3554" stroke-width="1" opacity="0.85">
                <line x1="0" y1="30" x2="640" y2="30"/>
                <line x1="0" y1="66" x2="640" y2="66"/>
                <line x1="0" y1="103" x2="640" y2="103"/>
                <line x1="0" y1="140" x2="640" y2="140"/>
              </g>
              <path d="M20 122 L106 103 L192 103 L278 85 L364 85 L450 67 L536 48 L620 30 L620 160 L20 160 Z" fill="url(#homeVerFill)"/>
              <polyline points="20,122 106,103 192,103 278,85 364,85 450,67 536,48 620,30" fill="none" stroke="#2DE2E6" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
              <g fill="#9BF6F7">
                <circle cx="20" cy="122" r="3"/>
                <circle cx="106" cy="103" r="3"/>
                <circle cx="192" cy="103" r="3"/>
                <circle cx="278" cy="85" r="3"/>
                <circle cx="364" cy="85" r="3"/>
                <circle cx="450" cy="67" r="3"/>
                <circle cx="536" cy="48" r="3"/>
              </g>
              <circle cx="620" cy="30" r="6" fill="#FF7A3D"/>
              <line x1="620" y1="30" x2="620" y2="160" stroke="#FF7A3D" stroke-width="1.5" stroke-dasharray="3 4" opacity="0.7"/>
            </svg>

            <p class="ver-legend"><span class="mono">趋势</span> 差异条目数量 · <span class="mono legend-now">橙点</span> 为本月版本</p>

            <div class="ver-rows">
              <div class="ver-row">
                <span class="mono ver-label ver-label--now">本月</span>
                <p>赛程日历补入 3 个二级入口，数据看板新增球队对比视图。</p>
              </div>
              <div class="ver-row">
                <span class="mono ver-label">上月</span>
                <p>规则解读按判罚场景重新分组，访谈与声音调整为双周更新。</p>
              </div>
              <div class="ver-row">
                <span class="mono ver-label">上一版本</span>
                <p>活动规则并入栏目对照说明，手机端评测按 6 类标签重新组织。</p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <section class="section tasks">
    <div class="wrap">
      <div class="tasks-head">
        <p class="eyebrow">按来意分流</p>
        <h2 class="section-title">你今天想解决哪一件事，直接走这条线</h2>
      </div>

      <div class="task-grid" data-reveal>
        <a class="task-card" href="/features/">
          <span class="task-tag mono">01 栏目</span>
          <h3 class="task-title">先看栏目对照</h3>
          <p class="task-body">一级栏目按内容类型归类，二级栏目按使用场景落位。换设备重新登录时，从这张表里定位最快。</p>
          <span class="task-more">进入栏目与功能</span>
        </a>

        <a class="task-card" href="/features/">
          <span class="task-tag mono">02 注册</span>
          <h3 class="task-title">注册与账号设置</h3>
          <p class="task-body">注册完成后，通知偏好、显示模式、安全选项与设备管理四组设置都集中在账号页，改哪一项都找得到。</p>
          <span class="task-more">查看注册指引</span>
        </a>

        <a class="task-card" href="/insights/">
          <span class="task-tag mono">03 评测</span>
          <h3 class="task-title">手机端体验怎么查</h3>
          <p class="task-body">界面导航、账号设置、内容加载、赛事数据、帮助文档、反馈记录六类逐条展开，双周更新 2 篇。</p>
          <span class="task-more">进入观察与评测</span>
        </a>

        <a class="task-card" href="/support/">
          <span class="task-tag mono">04 反馈</span>
          <h3 class="task-title">第一次访问遇到问题</h3>
          <p class="task-body">按三步把设备和栏目确认清楚，再写问题与期望结果，支持中心可以按设备与栏目回查记录。</p>
          <span class="task-more">进入支持中心</span>
        </a>
      </div>
    </div>
  </section>

  <section class="section eval">
    <div class="wrap">
      <div class="eval-grid">

        <div class="eval-main" data-reveal>
          <p class="eyebrow">观察与评测</p>
          <h2 class="section-title">手机上看比赛，六个方向逐条拆开</h2>
          <p class="lede">每条评测包含界面截图局部、实际操作路径和该分类下的结论三部分，专题系列跟着赛季阶段走。想比对某一项，先按下面的分类缩小范围。</p>

          <div class="cluster eval-chips">
            <a class="ev-chip" href="/insights/">界面导航</a>
            <a class="ev-chip" href="/insights/">账号设置</a>
            <a class="ev-chip" href="/insights/">内容加载</a>
            <a class="ev-chip" href="/insights/">赛事数据</a>
            <a class="ev-chip" href="/insights/">帮助文档</a>
            <a class="ev-chip" href="/insights/">反馈记录</a>
          </div>

          <div class="ev-rows">
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">01</span>
              <span class="ev-text"><span class="ev-cat">界面导航</span>底部标签在窄屏下的换行表现</span>
              <span class="mono ev-when">本期</span>
            </a>
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">02</span>
              <span class="ev-text"><span class="ev-cat">账号设置</span>通知偏好与显示模式的分组位置</span>
              <span class="mono ev-when">本期</span>
            </a>
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">03</span>
              <span class="ev-text"><span class="ev-cat">内容加载</span>长列表滚到底部时的加载节奏</span>
              <span class="mono ev-when">上期</span>
            </a>
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">04</span>
              <span class="ev-text"><span class="ev-cat">赛事数据</span>比分卡在小屏上的信息取舍</span>
              <span class="mono ev-when">上期</span>
            </a>
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">05</span>
              <span class="ev-text"><span class="ev-cat">帮助文档</span>检索框在手机端的输入体验</span>
              <span class="mono ev-when">本赛季</span>
            </a>
            <a class="ev-row" href="/insights/">
              <span class="mono ev-num">06</span>
              <span class="ev-text"><span class="ev-cat">反馈记录</span>按设备筛选记录的入口深浅</span>
              <span class="mono ev-when">本赛季</span>
            </a>
          </div>
        </div>

        <figure class="eval-media" data-reveal style="--reveal-delay:.1s">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" loading="lazy" decoding="async" alt="六组几何标签以错位网格排列，冷色叠加网格与标注线，表示手机端评测的六类观察方向">
          <figcaption class="media__caption">六类标签 · 双周更新 2 篇 · 按赛季阶段组织专题</figcaption>
        </figure>

      </div>
    </div>
  </section>

  <section class="section check-band">
    <div class="wrap">
      <div class="check-grid">

        <figure class="check-media" data-reveal>
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" loading="lazy" decoding="async" alt="三个编号步骤由细线连接，关键节点以暖橙色标记，表示首次访问的三步确认流程">
          <figcaption class="media__caption">三步走完，再进具体栏目</figcaption>
        </figure>

        <div class="check-main" data-reveal style="--reveal-delay:.08s">
          <p class="eyebrow">首次访问</p>
          <h2 class="section-title">头一回来，先花三分钟把这三件事做完</h2>
          <p class="lede">很多问题其实是入口没找对。先确认你在哪台设备上、进的哪个栏目，再看规则归属，最后才写问题描述，沟通会顺畅很多。</p>

          <div class="check-list">
            <details class="fold check-fold" open>
              <summary class="fold__summary"><span class="mono check-step">STEP 01</span>确认设备与所在栏目</summary>
              <div class="fold__body">
                <p>记下当前使用的设备类型和进入的栏目名称。后面查帮助文档也好、回看反馈记录也好，都按这两项定位，比笼统描述要准得多。</p>
              </div>
            </details>

            <details class="fold check-fold">
              <summary class="fold__summary"><span class="mono check-step">STEP 02</span>对照栏目归属与规则位置</summary>
              <div class="fold__body">
                <p>打开栏目对照说明，确认你想看的内容属于哪个一级栏目、下面哪个二级入口，活动规则通常就在同一个栏目的说明里。</p>
              </div>
            </details>

            <details class="fold check-fold">
              <summary class="fold__summary"><span class="mono check-step">STEP 03</span>写清问题与期望结果</summary>
              <div class="fold__body">
                <p>反馈表填四项：访问设备、所在栏目、问题描述、期望结果。填完之后，支持中心可以按设备与栏目查到这条记录，对照着看进展。</p>
              </div>
            </details>
          </div>

          <a class="btn btn--primary" href="/support/">去支持中心自查</a>
        </div>

      </div>
    </div>
  </section>

  <section class="section ops">
    <div class="wrap">
      <div class="ops-head">
        <p class="eyebrow">运营与服务</p>
        <h2 class="section-title">长期在做，才敢让你照着用</h2>
      </div>

      <div class="stat-band">
        <div class="stat-cell">
          <span class="stat__value mono">2019</span>
          <span class="stat__label">上线年份</span>
        </div>
        <div class="stat-cell">
          <span class="stat__value mono">320<span class="stat-plus">+</span></span>
          <span class="stat__label">累计发布的版本说明与栏目对照（期）</span>
        </div>
        <div class="stat-cell">
          <span class="stat__value mono">186</span>
          <span class="stat__label">帮助文档篇数</span>
        </div>
        <div class="stat-cell">
          <span class="stat__value mono">3<span class="stat-plus">分钟</span></span>
          <span class="stat__label">服务时间内平均首次响应</span>
        </div>
      </div>

      <div class="ops-grid">
        <div class="ops-text">
          <p>内容团队 28 人，其中内容编辑 12 人、产品与体验 9 人、客户服务 7 人。版本说明按月归档，每月发布 1 期；手机端评测双周更新 2 篇，专题系列跟着赛季阶段走。帮助文档检索命中率达到 92%，常用问题三次点击内就能到达。</p>
          <p>平台累计服务注册账号 86 万，覆盖 26 个省份，与 18 家数据服务商、媒体与内容伙伴保持长期合作。资料下载栏提供栏目说明、注册流程、设置清单、评测模板与反馈表 5 类文档，需要带走留档的时候可以直接取用。</p>
        </div>

        <aside class="ops-aside">
          <p class="ops-k mono">运营地区</p>
          <p class="ops-v">吉林省</p>
          <p class="ops-k mono">服务时间</p>
          <p class="ops-v">工作日 9:00–18:00，节假日咨询顺延至下一个工作日</p>
          <p class="ops-k mono">联系</p>
          <p class="ops-v">contact@oubotiyu.com.cn<br>400-5033-4474</p>
          <a class="btn btn--quiet ops-cta" href="/consult/">咨询服务与合作</a>
        </aside>
      </div>

      <p class="note ops-note">© 欧博体育汇 · 吉ICP备74334826号</p>
    </div>
  </section>

</main>

.page-home {
  --home-radius: 6px;
  --home-gap: 20px;
}

/* ---------- 首屏 ---------- */
.page-home .hero {
  position: relative;
  overflow: hidden;
  padding-top: 28px;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -30% -12% auto auto;
  width: 130%;
  height: 140%;
  background:
    linear-gradient(135deg, rgba(45, 226, 230, 0.16), rgba(10, 22, 40, 0) 52%),
    linear-gradient(212deg, rgba(255, 122, 61, 0.13), rgba(10, 22, 40, 0) 58%);
  transform: skewY(-6deg);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-home .breadcrumb {
  margin-bottom: 22px;
}

.page-home .hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--home-gap);
  align-items: start;
}

.page-home .scope-card,
.page-home .hero-main {
  grid-column: span 12;
}

/* 对照组卡片 */
.page-home .scope-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  padding: 18px 16px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -22px rgba(0, 0, 0, 0.9);
}

.page-home .scope-figure {
  margin: 0 0 12px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-700);
  border: 1px solid var(--hairline);
}

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

.page-home .scope-count {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mist-100);
}

.page-home .scope-count .mono {
  color: var(--cyan-400);
  font-size: 15px;
}

.page-home .scope-list {
  margin-top: 10px;
  max-height: 322px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

.page-home .scope-list::-webkit-scrollbar {
  width: 4px;
}

.page-home .scope-list::-webkit-scrollbar-thumb {
  background: var(--ink-700);
  border-radius: 2px;
}

.page-home .scope-item {
  border-bottom: 1px solid var(--hairline);
}

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

.page-home .scope-item > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s ease;
}

.page-home .scope-item > summary::-webkit-details-marker {
  display: none;
}

.page-home .scope-item > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--cyan-400);
}

.page-home .scope-item[open] > summary::after {
  content: "\2212";
}

.page-home .scope-item > summary:hover,
.page-home .scope-item > summary:focus-visible {
  color: var(--cyan-400);
  outline: none;
}

.page-home .scope-item[open] > summary {
  color: var(--cyan-200);
}

.page-home .scope-num {
  font-size: 11px;
  color: var(--slate-300);
  letter-spacing: 0.06em;
}

.page-home .scope-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 12px 26px;
}

.page-home .scope-sub .chip {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--slate-300);
  background: rgba(45, 226, 230, 0.04);
}

.page-home .scope-more {
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  font-size: 13px;
}

/* 首屏右栏 */
.page-home .hero-main {
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-home .home-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
}

.page-home .home-lede {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--mist-100);
  opacity: 0.88;
}

/* 版本差异面板 */
.page-home .ver-panel {
  margin-top: 4px;
  padding: 16px 16px 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  background:
    linear-gradient(158deg, rgba(45, 226, 230, 0.08), rgba(16, 35, 59, 0.72) 42%),
    var(--ink-800);
}

.page-home .ver-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-home .ver-stamp {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-300);
}

.page-home .ver-chart {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .ver-legend {
  margin: 8px 0 14px;
  font-size: 12px;
  color: var(--slate-300);
}

.page-home .ver-legend .legend-now {
  color: var(--orange-500);
}

.page-home .ver-rows {
  display: grid;
}

.page-home .ver-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.page-home .ver-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--slate-300);
  padding-left: 10px;
  position: relative;
}

.page-home .ver-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-700);
}

.page-home .ver-label--now {
  color: var(--orange-500);
}

.page-home .ver-label--now::before {
  background: var(--orange-500);
}

.page-home .ver-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* ---------- 四个来意分流 ---------- */
.page-home .tasks-head {
  margin-bottom: 26px;
}

.page-home .tasks-head .section-title {
  max-width: 22em;
}

.page-home .task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-home .task-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  background: var(--ink-800);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.page-home .task-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-400), rgba(45, 226, 230, 0));
  opacity: 0.6;
}

.page-home .task-card:hover,
.page-home .task-card:focus-visible {
  border-color: var(--cyan-400);
  background: var(--ink-700);
  transform: translateY(-2px);
  outline: none;
}

.page-home .task-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}

.page-home .task-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text);
}

.page-home .task-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate-300);
}

.page-home .task-more {
  margin-top: auto;
  font-size: 13px;
  color: var(--orange-200);
  letter-spacing: 0.02em;
}

.page-home .task-more::after {
  content: " \2192";
}

/* ---------- 手机端评测 ---------- */
.page-home .eval {
  border-top: 1px solid var(--hairline);
}

.page-home .eval-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .eval-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-home .eval-main .section-title {
  margin: 0;
  max-width: 18em;
}

.page-home .eval-chips {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
}

.page-home .ev-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--cyan-200);
  border: 1px solid var(--ink-700);
  border-radius: 999px;
  background: rgba(45, 226, 230, 0.06);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.page-home .ev-chip:hover,
.page-home .ev-chip:focus-visible {
  border-color: var(--cyan-400);
  color: var(--ink-900);
  background: var(--cyan-400);
  outline: none;
}

.page-home .ev-rows {
  display: grid;
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
}

.page-home .ev-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease, padding-left 0.18s ease;
}

.page-home .ev-row:hover,
.page-home .ev-row:focus-visible {
  background: rgba(45, 226, 230, 0.05);
  padding-left: 10px;
  outline: none;
}

.page-home .ev-num {
  font-size: 11px;
  color: var(--slate-300);
  letter-spacing: 0.06em;
}

.page-home .ev-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.page-home .ev-cat {
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: var(--cyan-400);
}

.page-home .ev-when {
  font-size: 11px;
  color: var(--slate-300);
  white-space: nowrap;
}

.page-home .eval-media,
.page-home .check-media {
  margin: 0;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--ink-800);
}

.page-home .eval-media img,
.page-home .check-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-home .check-media img {
  aspect-ratio: 3 / 2;
}

.page-home .eval-media .media__caption,
.page-home .check-media .media__caption {
  position: static;
  display: block;
  padding: 10px 14px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-300);
  border-top: 1px solid var(--hairline);
  background: var(--ink-800);
}

/* ---------- 三步自查（浅色区） ---------- */
.page-home .check-band {
  --hairline: rgba(10, 22, 40, 0.16);
  --muted: #1B3554;
  --text: #0A1628;
  --slate-300: #46586E;
  --cyan-400: #0E8A8E;
  --ink-800: #FFFFFF;
  --surface: #FFFFFF;
  background: var(--paper);
  color: #0A1628;
  padding-top: 56px;
  padding-bottom: 56px;
}

.page-home .check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
}

.page-home .check-media {
  border-color: rgba(10, 22, 40, 0.16);
  background: #FFFFFF;
}

.page-home .check-media .media__caption {
  color: #46586E;
  border-top-color: rgba(10, 22, 40, 0.14);
  background: #FFFFFF;
}

.page-home .check-main {
  display: grid;
  gap: 14px;
  align-content: start;
}

.page-home .check-main .section-title {
  margin: 0;
  max-width: 16em;
  color: #0A1628;
}

.page-home .check-main .lede {
  margin: 0;
  color: #46586E;
  font-size: 15px;
  line-height: 1.85;
}

.page-home .check-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.page-home .check-fold {
  border: 1px solid rgba(10, 22, 40, 0.16);
  border-radius: var(--home-radius);
  background: #FFFFFF;
  padding: 0 14px;
}

.page-home .check-fold .fold__summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #0A1628;
  cursor: pointer;
  list-style: none;
}

.page-home .check-fold .fold__summary::-webkit-details-marker {
  display: none;
}

.page-home .check-step {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #0E8A8E;
  font-weight: 500;
}

.page-home .check-fold .fold__body {
  padding: 0 0 16px 0;
}

.page-home .check-fold .fold__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #46586E;
}

.page-home .check-main .btn--primary {
  justify-self: start;
  margin-top: 6px;
}

/* ---------- 运营与服务 ---------- */
.page-home .ops-head {
  margin-bottom: 24px;
}

.page-home .ops-head .section-title {
  max-width: 20em;
}

.page-home .stat-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--home-radius);
  overflow: hidden;
  background: var(--hairline);
}

.page-home .stat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  background: var(--ink-900);
}

.page-home .stat-cell .stat__value {
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 500;
  line-height: 1;
  color: var(--cyan-400);
  letter-spacing: -0.01em;
}

.page-home .stat-plus {
  font-size: 0.55em;
  margin-left: 2px;
  color: var(--orange-500);
}

.page-home .stat-cell .stat__label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--slate-300);
}

.page-home .ops-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}

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

.page-home .ops-text p:last-child {
  margin-bottom: 0;
}

.page-home .ops-aside {
  padding: 18px 16px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--orange-500);
  border-radius: var(--home-radius);
  background: var(--ink-800);
}

.page-home .ops-k {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan-400);
}

.page-home .ops-v {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-home .ops-cta {
  margin-top: 2px;
  font-size: 13px;
}

.page-home .ops-note {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--slate-300);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-home .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-home .hero {
    padding-top: 40px;
  }

  .page-home .hero-grid {
    gap: 24px;
  }

  .page-home .scope-card {
    grid-column: span 4;
    padding: 20px 18px 18px;
  }

  .page-home .hero-main {
    grid-column: span 8;
    gap: 18px;
  }

  .page-home .eval-grid {
    grid-template-columns: 7fr 5fr;
    gap: 36px;
  }

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

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

  .page-home .ver-row {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

@media (min-width: 1180px) {
  .page-home .hero-main {
    padding-left: 8px;
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-home .task-card,
  .page-home .ev-row,
  .page-home .ev-chip,
  .page-home .scope-item > summary {
    transition: none;
  }

  .page-home .task-card:hover,
  .page-home .task-card:focus-visible {
    transform: none;
  }

  .page-home .ev-row:hover,
  .page-home .ev-row:focus-visible {
    padding-left: 4px;
  }
}