.page-home{
  --home-line-ink:rgba(246,243,236,.16);
  --home-line-paper:rgba(11,23,38,.14);
}

/* ---------- 首屏拼贴 ---------- */
.page-home .hero{
  position:relative;
  overflow:hidden;
}
.page-home .hero .wrap{
  position:relative;
  z-index:1;
}
.page-home .hero .crumb{
  margin-bottom:clamp(1.2rem,3vw,2.2rem);
}
.page-home .hero-collage{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,2.6vw,1.9rem);
}
.page-home .hero-lead .display{
  margin:.55rem 0 1rem;
}
.page-home .hero-lead .lede{
  max-width:44ch;
}
.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.5rem;
}

.page-home .hero-frame{
  position:relative;
  margin:0;
  aspect-ratio:16 / 11;
  border:1px solid var(--home-line-ink);
  background:var(--ink-soft);
  overflow:hidden;
  isolation:isolate;
}
.page-home .hero-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.78;
}
.page-home .hero-frame__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.page-home .hero-glass{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:grid;
  gap:.18rem;
  padding:clamp(.9rem,2.4vw,1.5rem);
  background:linear-gradient(to top,rgba(11,23,38,.94),rgba(11,23,38,.12));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.page-home .hero-glass__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mint);
}
.page-home .hero-glass__v{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:700;
  color:var(--paper);
}
.page-home .hero-glass__n{
  font-size:.82rem;
  line-height:1.6;
  color:var(--mist);
}

.page-home .hero-tags{
  display:grid;
  gap:.6rem;
}
.page-home .hero-tag{
  display:grid;
  gap:.3rem;
  padding:.85rem 1rem;
  border:1px solid var(--home-line-ink);
  text-decoration:none;
  color:var(--paper);
  background:rgba(20,40,61,.38);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease);
}
.page-home .hero-tag:hover,
.page-home .hero-tag:focus-visible{
  border-color:var(--mint);
  background:rgba(95,242,194,.1);
  transform:translateY(-2px);
}
.page-home .hero-tag__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--rust);
}
.page-home .hero-tag__t{
  font-size:1rem;
  font-weight:700;
}
.page-home .hero-tag__d{
  font-size:.8rem;
  line-height:1.55;
  color:var(--mist);
}

.page-home .hero-panel{
  padding:clamp(1.1rem,2.6vw,1.7rem);
  border:1px solid rgba(95,242,194,.34);
  background:rgba(20,40,61,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px #000;
}
.page-home .hero-panel__label{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mint);
}
.page-home .hero-panel__ver{
  margin:.35rem 0 .9rem;
  font-family:var(--font-mono);
  font-size:clamp(2.2rem,6vw,3.2rem);
  line-height:1;
  color:var(--paper);
}
.page-home .hero-panel__ver span{
  margin-left:.25rem;
  font-family:var(--font-sans);
  font-size:.9rem;
  color:var(--gold);
}
.page-home .hero-panel__list{
  margin:0;
  display:grid;
  gap:.5rem;
}
.page-home .hero-panel__list div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.7rem;
  align-items:baseline;
  padding-top:.5rem;
  border-top:1px solid var(--home-line-ink);
}
.page-home .hero-panel__list dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--mint);
}
.page-home .hero-panel__list dd{
  margin:0;
  font-size:.84rem;
  line-height:1.6;
  color:var(--mist);
  text-align:right;
}

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

@media (min-width:900px){
  .page-home .hero-collage{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
    gap:clamp(1.1rem,2.2vw,1.9rem);
  }
  .page-home .hero-lead{
    grid-column:1 / 8;
    grid-row:1;
  }
  .page-home .hero-frame{
    grid-column:8 / 13;
    grid-row:1 / 4;
    align-self:stretch;
    aspect-ratio:auto;
    min-height:clamp(380px,42vw,560px);
    margin-top:clamp(.5rem,1.4vw,1.4rem);
  }
  .page-home .hero-tags{
    grid-column:1 / 7;
    grid-row:2;
    align-self:end;
  }
  .page-home .hero-panel{
    grid-column:5 / 9;
    grid-row:3;
    position:relative;
    z-index:2;
    margin-top:-1.2rem;
  }
}

/* ---------- 三条路径 ---------- */
.page-home .paths{
  --line:var(--home-line-paper);
}
.page-home .paths-grid{
  display:grid;
  gap:clamp(1.1rem,2.6vw,1.8rem);
  margin-top:clamp(1.6rem,4vw,2.6rem);
}
.page-home .path{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.page-home .path__label{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--rust);
}
.page-home .path__label::before{
  content:"";
  width:22px;
  height:2px;
  background:currentColor;
}
.page-home .path__title{
  margin:0;
  font-size:clamp(1.22rem,2.2vw,1.6rem);
  line-height:1.35;
  font-weight:700;
}
.page-home .path__text{
  margin:0;
  max-width:52ch;
  line-height:1.8;
}
.page-home .path__facts{
  list-style:none;
  margin:.3rem 0 0;
  padding:0;
  display:grid;
  gap:.45rem;
  font-size:.9rem;
}
.page-home .path__facts li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}
.page-home .path__facts li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  margin-top:.62em;
  background:var(--mint);
  transform:rotate(45deg);
}
.page-home .path__meta{
  margin:.2rem 0 0;
  font-family:var(--font-mono);
  font-size:.79rem;
  letter-spacing:.04em;
  color:var(--stone);
}
.page-home .path__meta span{
  font-size:1rem;
  color:var(--rust);
}
.page-home .path__link{
  margin-top:auto;
  align-self:flex-start;
  padding-top:.7rem;
  font-family:var(--font-mono);
  font-size:.79rem;
  letter-spacing:.06em;
  color:var(--rust);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .3s var(--ease);
}
.page-home .path__link:hover,
.page-home .path__link:focus-visible{
  color:var(--ink);
}

.page-home .path--sub{
  padding:clamp(1.4rem,3.4vw,2.6rem);
  background:var(--ink);
  color:var(--paper);
}
.page-home .path--sub .path__label{
  color:var(--mint);
}
.page-home .path--sub .path__text,
.page-home .path--sub .path__facts{
  color:var(--mist);
}
.page-home .path--sub .path__link{
  color:var(--mint);
}
.page-home .path--sub .path__link:hover,
.page-home .path--sub .path__link:focus-visible{
  color:var(--gold);
}

.page-home .path--lib{
  padding:clamp(1.3rem,3vw,2rem);
  background:var(--pale);
  color:var(--ink);
}
.page-home .path__body{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.page-home .path__figure{
  margin:0;
  overflow:hidden;
}
.page-home .path__figure img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:10 / 7;
  object-fit:cover;
}

.page-home .path--col{
  padding:clamp(1.2rem,2.6vw,1.8rem) 0 0;
  border-top:2px solid var(--gold);
}

@media (min-width:900px){
  .page-home .paths-grid{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
  }
  .page-home .path--sub{
    grid-column:1 / 6;
    grid-row:1 / 3;
  }
  .page-home .path--lib{
    grid-column:6 / 13;
    grid-row:1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(1rem,2.4vw,1.9rem);
    align-items:center;
  }
  .page-home .path--col{
    grid-column:6 / 13;
    grid-row:2;
  }
}

/* ---------- 观察半径 ---------- */
.page-home .local{
  position:relative;
  overflow:hidden;
}
.page-home .local::before{
  content:"";
  position:absolute;
  inset:-15%;
  background:repeating-radial-gradient(circle at 78% 22%,rgba(95,242,194,0) 0 46px,rgba(95,242,194,.09) 46px 47px);
  pointer-events:none;
}
.page-home .local .wrap{
  position:relative;
  z-index:1;
}
.page-home .local-grid{
  display:grid;
  gap:clamp(1.6rem,4vw,3rem);
}
.page-home .local-head .lede{
  margin:1rem 0 1.5rem;
  max-width:40ch;
}
.page-home .local-list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .local-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.25rem 1.2rem;
  align-items:baseline;
  padding:.95rem 0;
  border-top:1px solid var(--home-line-ink);
}
.page-home .local-item:last-child{
  border-bottom:1px solid var(--home-line-ink);
}
.page-home .local-item__num{
  display:inline-flex;
  align-items:baseline;
  gap:.18rem;
  font-family:var(--font-mono);
  font-size:clamp(1.35rem,3vw,1.85rem);
  line-height:1;
  color:var(--mint);
}
.page-home .local-item__unit{
  font-size:.72rem;
  color:var(--mist);
}
.page-home .local-item__text{
  font-size:.93rem;
  line-height:1.7;
  color:var(--mist);
}

@media (min-width:900px){
  .page-home .local-grid{
    grid-template-columns:5fr 7fr;
    align-items:start;
  }
}

/* ---------- 客户端与帮助 ---------- */
.page-home .client{
  --line:var(--home-line-paper);
}
.page-home .client-grid{
  display:grid;
  gap:clamp(1.8rem,4vw,3rem);
}
.page-home .client-main .section__title{
  margin-bottom:1rem;
}
.page-home .client-main p{
  max-width:56ch;
  line-height:1.8;
}
.page-home .client-figure{
  margin:clamp(1.2rem,3vw,1.9rem) 0;
}
.page-home .client-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.page-home .client-help{
  padding:clamp(1.2rem,3vw,2rem);
  background:var(--pale);
  border-left:2px solid var(--gold);
  color:var(--ink);
}
.page-home .client-help__title{
  margin:0 0 .5rem;
  font-size:clamp(1.15rem,2vw,1.35rem);
  line-height:1.4;
}
.page-home .client-help__note{
  margin:0 0 1rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--stone);
}
.page-home .step-list{
  list-style:none;
  margin:0 0 1.4rem;
  padding:0;
  counter-reset:step;
  border-top:1px solid var(--home-line-paper);
}
.page-home .step-list li{
  counter-increment:step;
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:.6rem 0;
  font-size:.93rem;
  border-bottom:1px solid var(--home-line-paper);
}
.page-home .step-list li::before{
  content:counter(step,decimal-leading-zero);
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--rust);
}

@media (min-width:900px){
  .page-home .client-grid{
    grid-template-columns:7fr 5fr;
    align-items:start;
  }
}

/* ---------- 信任收束 ---------- */
.page-home .trust-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2.2vw,1.6rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0;
}
.page-home .trust-stats .stat{
  padding-top:.85rem;
  border-top:2px solid var(--rust);
}
.page-home .trust-stats .stat__value{
  font-family:var(--font-mono);
  font-size:clamp(1.8rem,5vw,2.6rem);
  line-height:1;
  color:var(--paper);
}
.page-home .trust-stats .stat__unit{
  margin-left:.12rem;
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--mint);
}
.page-home .trust-stats .stat__label{
  margin:.55rem 0 0;
  font-size:.84rem;
  color:var(--mist);
}
.page-home .trust-foot{
  display:grid;
  gap:clamp(1.2rem,3vw,1.8rem);
}
.page-home .trust-notes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--mist);
}
.page-home .trust-notes li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
}
.page-home .trust-notes li::before{
  content:"";
  flex:none;
  width:16px;
  height:1px;
  margin-top:.92em;
  background:var(--gold);
}
.page-home .trust-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

@media (min-width:780px){
  .page-home .trust-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-home .trust-foot{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home .hero-tag,
  .page-home .path__link{
    transition:none;
  }
  .page-home .hero-tag:hover,
  .page-home .hero-tag:focus-visible{
    transform:none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

抱歉，上面的输出多了一个无效标记。以下为严格的最终输出：


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

  <section class="section hero canvas canvas--ink">
    <div class="wrap">
      <nav class="crumb" aria-label="页面位置">
        <ol class="crumb__list">
          <li class="crumb__item"><a class="crumb__link" href="/">乐思赛场</a></li>
          <li class="crumb__item"><span aria-current="page">首页</span></li>
        </ol>
      </nav>

      <div class="hero-collage">
        <div class="hero-lead" data-reveal="1">
          <p class="eyebrow">云南昆明 · 赛事观察与订阅</p>
          <h1 class="display">稳处一隅<br>看清整座赛场</h1>
          <p class="lede">从赛前一天的阵容提醒，到终场之后的战术复盘，乐思赛场把球队状态、伤停变化与作者观点放进同一片视野。你不必同时开着好几个页面，也知道这场球该往哪里看。</p>
          <div class="hero-actions">
            <a class="btn btn--mint" href="/products/">查看产品与服务</a>
            <a class="btn btn--ghost" href="/column/">读专家专栏</a>
          </div>
        </div>

        <figure class="hero-frame" data-reveal="2">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="云南山地与城市天际线在深墨蓝夜色中层层延展，前景覆着半透明的球场边线与战术标记">
          <svg class="hero-frame__lines" viewBox="0 0 400 500" aria-hidden="true" focusable="false">
            <g fill="none" stroke="rgba(95,242,194,.42)" stroke-width="1">
              <path d="M0 372H400"></path>
              <path d="M200 372V500"></path>
              <circle cx="200" cy="372" r="54"></circle>
              <path d="M58 500V292H342V500"></path>
            </g>
            <g fill="none" stroke="rgba(246,243,236,.16)" stroke-width="1">
              <path d="M-40 118C90 58 210 188 440 88"></path>
              <path d="M-40 168C90 108 210 238 440 138"></path>
              <path d="M-40 218C90 158 210 288 440 188"></path>
            </g>
          </svg>
          <figcaption class="hero-glass">
            <span class="hero-glass__k">当前视野</span>
            <span class="hero-glass__v">38 个联赛与杯赛</span>
            <span class="hero-glass__n">本地赛事与全国主流联赛同屏观察</span>
          </figcaption>
        </figure>

        <div class="hero-tags" data-reveal="3">
          <a class="hero-tag" href="#paths">
            <span class="hero-tag__k">01</span>
            <span class="hero-tag__t">赛事订阅</span>
            <span class="hero-tag__d">赛前提醒接到赛后复盘</span>
          </a>
          <a class="hero-tag" href="#paths">
            <span class="hero-tag__k">02</span>
            <span class="hero-tag__t">球队库</span>
            <span class="hero-tag__d">主客场与伤停一栏可查</span>
          </a>
          <a class="hero-tag" href="#client">
            <span class="hero-tag__k">03</span>
            <span class="hero-tag__t">2026 客户端</span>
            <span class="hero-tag__d">四类终端，换机接着用</span>
          </a>
        </div>

        <aside class="hero-panel" data-reveal="4">
          <p class="hero-panel__label">2026 客户端</p>
          <p class="hero-panel__ver">3.2<span>版</span></p>
          <dl class="hero-panel__list">
            <div><dt>终端</dt><dd>Windows / macOS / Android / iOS</dd></div>
            <div><dt>设备</dt><dd>同一账号 3 台之间切换</dd></div>
            <div><dt>换机</dt><dd>重新登录即可继续</dd></div>
          </dl>
        </aside>
      </div>
    </div>
  </section>

  <section class="section paths canvas canvas--paper" id="paths">
    <div class="wrap">
      <header class="section__head">
        <p class="eyebrow">三条常用路径</p>
        <h2 class="section__title">同一场球，三种看法</h2>
        <p class="section__note">想要现成结论就订阅，想自己推演就翻球队库，想听不同角度就读专栏。三条路径对着同一份赛场信息，你按自己的节奏取用。</p>
      </header>

      <div class="paths-grid">
        <article class="path path--sub" data-reveal="1">
          <p class="path__label">01 / 赛事订阅</p>
          <h3 class="path__title">开赛前，先把该知道的知道</h3>
          <p class="path__text">赛前 24 小时和开赛前 30 分钟各推一次提醒，附上阵容变化与伤停摘要；终场后接一份复盘，把比赛里的转折点单独标出来。守着一支队，整个赛季都能顺着这条线看下去。</p>
          <ul class="path__facts">
            <li>38 个联赛与杯赛纳入订阅范围</li>
            <li>两档提醒，卡住临场前的变动</li>
            <li>赛后复盘接在结果之后</li>
          </ul>
          <a class="path__link" href="/products/">看看订阅怎么用</a>
        </article>

        <article class="path path--lib" data-reveal="2">
          <div class="path__body">
            <p class="path__label">02 / 球队库</p>
            <h3 class="path__title">按栏目名，翻到你要的那一栏</h3>
            <p class="path__text">主客场战绩、伤停状态、近期表现各自归位。输入队名之后，按联赛、球队、主客场、伤停状态和近期表现逐层收窄，几秒钟就停在你关心的那一栏。</p>
            <p class="path__meta"><span>1,286</span> 支球队 · <span>18,400</span> 名球员条目</p>
            <a class="path__link" href="/products/">进球队库看看</a>
          </div>
          <figure class="path__figure">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="一个人物侧影站在窗前望向球场轮廓，桌上摊着球队资料，屏幕的光落在手边" loading="lazy" decoding="async">
          </figure>
        </article>

        <article class="path path--col" data-reveal="3">
          <p class="path__label">03 / 专家专栏</p>
          <h3 class="path__title">二十四位签约作者，各看各的角度</h3>
          <p class="path__text">战术拆解、数据研究、青训观察三类内容交替更新，每周二和周五上新。单篇平均阅读六分钟，够在通勤路上读完一篇，也够在开赛前把一件事想清楚。</p>
          <p class="path__meta"><span>2,400</span> 篇分析文章 · 另有 <span>96</span> 位合作作者持续供稿</p>
          <a class="path__link" href="/column/">翻翻最近的分析</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section local canvas canvas--night">
    <div class="wrap">
      <div class="local-grid">
        <div class="local-head" data-reveal="1">
          <p class="eyebrow">观察半径</p>
          <h2 class="section__title">站在云南，看得到多远</h2>
          <p class="lede">服务从云南起步，视野却不止于本地。城市联赛的看台、青少年赛事的边线、全国主流联赛的转播画面，都被放进同一套观察方法里读完。</p>
          <a class="btn btn--ghost" href="/story/">了解我们怎么观察</a>
        </div>
        <ul class="local-list" data-reveal="2">
          <li class="local-item">
            <span class="local-item__num">14<span class="local-item__unit">项</span></span>
            <span class="local-item__text">云南本地赛事，涵盖城市联赛、青少年赛事与群众体育活动</span>
          </li>
          <li class="local-item">
            <span class="local-item__num">31<span class="local-item__unit">个</span></span>
            <span class="local-item__text">省级行政区有用户在订阅，其中省外用户占到 63%</span>
          </li>
          <li class="local-item">
            <span class="local-item__num">12<span class="local-item__unit">家</span></span>
            <span class="local-item__text">地方体育媒体，另有 8 家赛事运营机构一同做内容共建</span>
          </li>
          <li class="local-item">
            <span class="local-item__num">5<span class="local-item__unit">所</span></span>
            <span class="local-item__text">高校体育院系，长期承接实习与内容研究合作</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="section client canvas canvas--paper" id="client">
    <div class="wrap">
      <div class="client-grid">
        <div class="client-main" data-reveal="1">
          <p class="eyebrow">2026 客户端 3.2 版</p>
          <h2 class="section__title">换台设备，接着往下看</h2>
          <p>这次更新把换设备的步骤压到了最短：在新设备上重新登录，订阅、关注的球队和读到一半的分析都还在原位。四类终端通用，同一账号可在 3 台设备之间切换，通勤路上看的半篇复盘，回家打开电脑接着读完。</p>
          <figure class="client-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面屏幕与手机并排显示赛事提醒和球队资料界面，深墨蓝背景上点缀暖金标记" loading="lazy" decoding="async">
          </figure>
          <a class="btn btn--mint" href="/products/">了解 2026 客户端</a>
        </div>

        <div class="client-help" data-reveal="2">
          <h3 class="client-help__title">七步走完常用设置</h3>
          <p class="client-help__note">帮助文档把上手动作按顺序排好，照着做就能完成大部分日常操作，卡住时再找客服。</p>
          <ol class="step-list">
            <li>下载并安装客户端</li>
            <li>登录并绑定常用设备</li>
            <li>管理赛事订阅</li>
            <li>按栏目名检索球队库</li>
            <li>设置比赛与专栏通知</li>
            <li>检查账号安全</li>
            <li>提交问题反馈</li>
          </ol>
          <a class="btn btn--ghost" href="/support/">去支持中心</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section trust canvas canvas--ink">
    <div class="wrap">
      <header class="section__head">
        <p class="eyebrow">长期在做的几件事</p>
        <h2 class="section__title">四十多万人在这里看赛场</h2>
        <p class="section__note">68 人的内容与服务团队分在编辑与数据标注、产品技术、客户服务与运营三条线上，签约作者与合作作者每周供稿；工作时间内的客服工单，平均 18 分钟给出首次响应。</p>
      </header>

      <div class="trust-stats" data-reveal="1">
        <div class="stat">
          <span class="stat__value">42</span><span class="stat__unit">万</span>
          <p class="stat__label">注册用户</p>
        </div>
        <div class="stat">
          <span class="stat__value">11.6</span><span class="stat__unit">万</span>
          <p class="stat__label">月活跃用户</p>
        </div>
        <div class="stat">
          <span class="stat__value">2,400</span><span class="stat__unit">篇</span>
          <p class="stat__label">专家专栏分析文章</p>
        </div>
        <div class="stat">
          <span class="stat__value">68</span><span class="stat__unit">人</span>
          <p class="stat__label">内容与服务团队</p>
        </div>
      </div>

      <div class="trust-foot" data-reveal="2">
        <ul class="trust-notes">
          <li>连续三年入选省级体育产业数字化服务案例</li>
          <li>2025 年内容总阅读量 1.8 亿次</li>
          <li>每周发布一次版本维护说明，每月发布一次功能更新摘要</li>
        </ul>
        <div class="trust-actions">
          <a class="btn btn--mint" href="/products/">开始订阅</a>
          <a class="btn btn--gold" href="/cooperation/">谈商务合作</a>
          <a class="btn btn--ghost" href="/support/">找客服帮忙</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home{
  --home-line-ink:rgba(246,243,236,.16);
  --home-line-paper:rgba(11,23,38,.14);
}

.page-home .hero{
  position:relative;
  overflow:hidden;
}
.page-home .hero .wrap{
  position:relative;
  z-index:1;
}
.page-home .hero .crumb{
  margin-bottom:clamp(1.2rem,3vw,2.2rem);
}
.page-home .hero-collage{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1rem,2.6vw,1.9rem);
}
.page-home .hero-lead .display{
  margin:.55rem 0 1rem;
}
.page-home .hero-lead .lede{
  max-width:44ch;
}
.page-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.5rem;
}
.page-home .hero-frame{
  position:relative;
  margin:0;
  aspect-ratio:16 / 11;
  border:1px solid var(--home-line-ink);
  background:var(--ink-soft);
  overflow:hidden;
  isolation:isolate;
}
.page-home .hero-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.78;
}
.page-home .hero-frame__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
.page-home .hero-glass{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:grid;
  gap:.18rem;
  padding:clamp(.9rem,2.4vw,1.5rem);
  background:linear-gradient(to top,rgba(11,23,38,.94),rgba(11,23,38,.12));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.page-home .hero-glass__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mint);
}
.page-home .hero-glass__v{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:700;
  color:var(--paper);
}
.page-home .hero-glass__n{
  font-size:.82rem;
  line-height:1.6;
  color:var(--mist);
}
.page-home .hero-tags{
  display:grid;
  gap:.6rem;
}
.page-home .hero-tag{
  display:grid;
  gap:.3rem;
  padding:.85rem 1rem;
  border:1px solid var(--home-line-ink);
  text-decoration:none;
  color:var(--paper);
  background:rgba(20,40,61,.38);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease);
}
.page-home .hero-tag:hover,
.page-home .hero-tag:focus-visible{
  border-color:var(--mint);
  background:rgba(95,242,194,.1);
  transform:translateY(-2px);
}
.page-home .hero-tag__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--rust);
}
.page-home .hero-tag__t{
  font-size:1rem;
  font-weight:700;
}
.page-home .hero-tag__d{
  font-size:.8rem;
  line-height:1.55;
  color:var(--mist);
}
.page-home .hero-panel{
  padding:clamp(1.1rem,2.6vw,1.7rem);
  border:1px solid rgba(95,242,194,.34);
  background:rgba(20,40,61,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 70px -40px #000;
}
.page-home .hero-panel__label{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--mint);
}
.page-home .hero-panel__ver{
  margin:.35rem 0 .9rem;
  font-family:var(--font-mono);
  font-size:clamp(2.2rem,6vw,3.2rem);
  line-height:1;
  color:var(--paper);
}
.page-home .hero-panel__ver span{
  margin-left:.25rem;
  font-family:var(--font-sans);
  font-size:.9rem;
  color:var(--gold);
}
.page-home .hero-panel__list{
  margin:0;
  display:grid;
  gap:.5rem;
}
.page-home .hero-panel__list div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.7rem;
  align-items:baseline;
  padding-top:.5rem;
  border-top:1px solid var(--home-line-ink);
}
.page-home .hero-panel__list dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--mint);
}
.page-home .hero-panel__list dd{
  margin:0;
  font-size:.84rem;
  line-height:1.6;
  color:var(--mist);
  text-align:right;
}

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

@media (min-width:900px){
  .page-home .hero-collage{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
    gap:clamp(1.1rem,2.2vw,1.9rem);
  }
  .page-home .hero-lead{
    grid-column:1 / 8;
    grid-row:1;
  }
  .page-home .hero-frame{
    grid-column:8 / 13;
    grid-row:1 / 4;
    align-self:stretch;
    aspect-ratio:auto;
    min-height:clamp(380px,42vw,560px);
    margin-top:clamp(.5rem,1.4vw,1.4rem);
  }
  .page-home .hero-tags{
    grid-column:1 / 7;
    grid-row:2;
    align-self:end;
  }
  .page-home .hero-panel{
    grid-column:5 / 9;
    grid-row:3;
    position:relative;
    z-index:2;
    margin-top:-1.2rem;
  }
}

.page-home .paths{
  --line:var(--home-line-paper);
}
.page-home .paths-grid{
  display:grid;
  gap:clamp(1.1rem,2.6vw,1.8rem);
  margin-top:clamp(1.6rem,4vw,2.6rem);
}
.page-home .path{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.page-home .path__label{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--rust);
}
.page-home .path__label::before{
  content:"";
  width:22px;
  height:2px;
  background:currentColor;
}
.page-home .path__title{
  margin:0;
  font-size:clamp(1.22rem,2.2vw,1.6rem);
  line-height:1.35;
  font-weight:700;
}
.page-home .path__text{
  margin:0;
  max-width:52ch;
  line-height:1.8;
}
.page-home .path__facts{
  list-style:none;
  margin:.3rem 0 0;
  padding:0;
  display:grid;
  gap:.45rem;
  font-size:.9rem;
}
.page-home .path__facts li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}
.page-home .path__facts li::before{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  margin-top:.62em;
  background:var(--mint);
  transform:rotate(45deg);
}
.page-home .path__meta{
  margin:.2rem 0 0;
  font-family:var(--font-mono);
  font-size:.79rem;
  letter-spacing:.04em;
  color:var(--stone);
}
.page-home .path__meta span{
  font-size:1rem;
  color:var(--rust);
}
.page-home .path__link{
  margin-top:auto;
  align-self:flex-start;
  padding-top:.7rem;
  font-family:var(--font-mono);
  font-size:.79rem;
  letter-spacing:.06em;
  color:var(--rust);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  transition:color .3s var(--ease);
}
.page-home .path__link:hover,
.page-home .path__link:focus-visible{
  color:var(--ink);
}
.page-home .path--sub{
  padding:clamp(1.4rem,3.4vw,2.6rem);
  background:var(--ink);
  color:var(--paper);
}
.page-home .path--sub .path__label{
  color:var(--mint);
}
.page-home .path--sub .path__text,
.page-home .path--sub .path__facts{
  color:var(--mist);
}
.page-home .path--sub .path__link{
  color:var(--mint);
}
.page-home .path--sub .path__link:hover,
.page-home .path--sub .path__link:focus-visible{
  color:var(--gold);
}
.page-home .path--lib{
  padding:clamp(1.3rem,3vw,2rem);
  background:var(--pale);
  color:var(--ink);
}
.page-home .path__body{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.page-home .path__figure{
  margin:0;
  overflow:hidden;
}
.page-home .path__figure img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:10 / 7;
  object-fit:cover;
}
.page-home .path--col{
  padding:clamp(1.2rem,2.6vw,1.8rem) 0 0;
  border-top:2px solid var(--gold);
}

@media (min-width:900px){
  .page-home .paths-grid{
    grid-template-columns:repeat(12,1fr);
    align-items:start;
  }
  .page-home .path--sub{
    grid-column:1 / 6;
    grid-row:1 / 3;
  }
  .page-home .path--lib{
    grid-column:6 / 13;
    grid-row:1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(1rem,2.4vw,1.9rem);
    align-items:center;
  }
  .page-home .path--col{
    grid-column:6 / 13;
    grid-row:2;
  }
}

.page-home .local{
  position:relative;
  overflow:hidden;
}
.page-home .local::before{
  content:"";
  position:absolute;
  inset:-15%;
  background:repeating-radial-gradient(circle at 78% 22%,rgba(95,242,194,0) 0 46px,rgba(95,242,194,.09) 46px 47px);
  pointer-events:none;
}
.page-home .local .wrap{
  position:relative;
  z-index:1;
}
.page-home .local-grid{
  display:grid;
  gap:clamp(1.6rem,4vw,3rem);
}
.page-home .local-head .lede{
  margin:1rem 0 1.5rem;
  max-width:40ch;
}
.page-home .local-list{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .local-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.25rem 1.2rem;
  align-items:baseline;
  padding:.95rem 0;
  border-top:1px solid var(--home-line-ink);
}
.page-home .local-item:last-child{
  border-bottom:1px solid var(--home-line-ink);
}
.page-home .local-item__num{
  display:inline-flex;
  align-items:baseline;
  gap:.18rem;
  font-family:var(--font-mono);
  font-size:clamp(1.35rem,3vw,1.85rem);
  line-height:1;
  color:var(--mint);
}
.page-home .local-item__unit{
  font-size:.72rem;
  color:var(--mist);
}
.page-home .local-item__text{
  font-size:.93rem;
  line-height:1.7;
  color:var(--mist);
}

@media (min-width:900px){
  .page-home .local-grid{
    grid-template-columns:5fr 7fr;
    align-items:start;
  }
}

.page-home .client{
  --line:var(--home-line-paper);
}
.page-home .client-grid{
  display:grid;
  gap:clamp(1.8rem,4vw,3rem);
}
.page-home .client-main .section__title{
  margin-bottom:1rem;
}
.page-home .client-main p{
  max-width:56ch;
  line-height:1.8;
}
.page-home .client-figure{
  margin:clamp(1.2rem,3vw,1.9rem) 0;
}
.page-home .client-figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.page-home .client-help{
  padding:clamp(1.2rem,3vw,2rem);
  background:var(--pale);
  border-left:2px solid var(--gold);
  color:var(--ink);
}
.page-home .client-help__title{
  margin:0 0 .5rem;
  font-size:clamp(1.15rem,2vw,1.35rem);
  line-height:1.4;
}
.page-home .client-help__note{
  margin:0 0 1rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--stone);
}
.page-home .step-list{
  list-style:none;
  margin:0 0 1.4rem;
  padding:0;
  counter-reset:step;
  border-top:1px solid var(--home-line-paper);
}
.page-home .step-list li{
  counter-increment:step;
  display:flex;
  align-items:baseline;
  gap:.9rem;
  padding:.6rem 0;
  font-size:.93rem;
  border-bottom:1px solid var(--home-line-paper);
}
.page-home .step-list li::before{
  content:counter(step,decimal-leading-zero);
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--rust);
}

@media (min-width:900px){
  .page-home .client-grid{
    grid-template-columns:7fr 5fr;
    align-items:start;
  }
}

.page-home .trust-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,2.2vw,1.6rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0;
}
.page-home .trust-stats .stat{
  padding-top:.85rem;
  border-top:2px solid var(--rust);
}
.page-home .trust-stats .stat__value{
  font-family:var(--font-mono);
  font-size:clamp(1.8rem,5vw,2.6rem);
  line-height:1;
  color:var(--paper);
}
.page-home .trust-stats .stat__unit{
  margin-left:.12rem;
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--mint);
}
.page-home .trust-stats .stat__label{
  margin:.55rem 0 0;
  font-size:.84rem;
  color:var(--mist);
}
.page-home .trust-foot{
  display:grid;
  gap:clamp(1.2rem,3vw,1.8rem);
}
.page-home .trust-notes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--mist);
}
.page-home .trust-notes li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
}
.page-home .trust-notes li::before{
  content:"";
  flex:none;
  width:16px;
  height:1px;
  margin-top:.92em;
  background:var(--gold);
}
.page-home .trust-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}

@media (min-width:780px){
  .page-home .trust-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-home .trust-foot{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home .hero-tag,
  .page-home .path__link{
    transition:none;
  }
  .page-home .hero-tag:hover,
  .page-home .hero-tag:focus-visible{
    transform:none;
  }
}