/* ===== 体验中心 · page-products ===== */

.page-products {
  --exp-gap: clamp(28px, 5vw, 56px);
  --exp-line: #1F2E29;
}

/* —— 首屏 —— */
.page-products .exp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  background:
    radial-gradient(900px 420px at 84% -14%, rgba(56, 244, 206, 0.12), transparent 62%),
    radial-gradient(700px 380px at 4% 110%, rgba(122, 46, 107, 0.22), transparent 68%),
    linear-gradient(180deg, var(--ink) 0%, var(--panel-2) 100%);
}

.page-products .exp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hair-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.55;
  pointer-events: none;
}

.page-products .exp-hero__inner {
  position: relative;
  display: grid;
  gap: 32px;
  padding: clamp(36px, 8vw, 84px) 0 clamp(30px, 6vw, 60px);
}

.page-products .exp-hero__title {
  margin: 12px 0 0;
  font-size: clamp(30px, 6.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.page-products .exp-hero__lede {
  margin: 16px 0 0;
  max-width: 46ch;
}

.page-products .exp-hero__actions {
  margin-top: 26px;
}

.page-products .exp-hero__side {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 18px 18px 20px;
}

.page-products .exp-rota {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .exp-rota__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .exp-rota__num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-products .exp-rota__item:nth-child(2) .exp-rota__num,
.page-products .exp-rota__item:nth-child(3) .exp-rota__num {
  color: var(--amber);
}

.page-products .exp-rota__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* —— 视图快捷条 —— */
.page-products .exp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}

.page-products .exp-tabs .chip {
  text-decoration: none;
}

/* —— 模块通用 —— */
.page-products .exp-module {
  padding-block: var(--exp-gap);
}

.page-products .exp-module__grid {
  display: grid;
  gap: 26px;
}

.page-products .exp-module__body > p {
  margin: 14px 0 0;
}

.page-products .exp-module__head {
  display: grid;
  gap: 12px;
  max-width: 70ch;
  margin-bottom: 26px;
}

.page-products .exp-module__head p {
  margin: 0;
}

.page-products .exp-module__visual {
  margin: 0;
}

.page-products .exp-table-cap {
  padding: 10px 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-products .data-table {
  min-width: 560px;
}

.page-products .data-table th[scope="col"] {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-products .exp-note {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--slate);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .exp-note--wide {
  max-width: 76ch;
  margin-top: 22px;
}

.page-products .exp-sport-chips {
  margin-top: 22px;
}

.page-products .exp-subtitle {
  margin: 30px 0 12px;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

/* —— 斜切分隔带 —— */
.page-products .exp-band {
  height: 46px;
  background: linear-gradient(90deg, var(--green) 0%, var(--panel-2) 100%);
  clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%);
}

.page-products .exp-band--odds {
  background: linear-gradient(90deg, rgba(122, 46, 107, 0.55) 0%, rgba(212, 70, 140, 0.3) 100%);
  clip-path: polygon(0 78%, 100% 0, 100% 100%, 0 22%);
}

/* —— 主客场拆分卡 —— */
.page-products .split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.page-products .split-card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 14px 14px 16px;
}

.page-products .split-card--cyan {
  border-top: 2px solid var(--cyan);
}

.page-products .split-card--amber {
  border-top: 2px solid var(--amber);
}

.page-products .split-card__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}

.page-products .split-card__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* —— 赔率模块 —— */
.page-products .odds-panel {
  border: 1px solid rgba(212, 70, 140, 0.32);
  border-radius: var(--r);
  background:
    linear-gradient(135deg, rgba(122, 46, 107, 0.42) 0%, rgba(212, 70, 140, 0.14) 58%, rgba(5, 16, 13, 0.9) 100%);
  padding: clamp(20px, 4vw, 40px);
}

.page-products .odds-panel__grid {
  display: grid;
  gap: 28px;
}

.page-products .odds-panel__body > p {
  margin: 14px 0 0;
}

.page-products .odds-panel__figure {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-products .kicker--magenta {
  color: var(--mag-b);
}

.page-products .odds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .odds-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.page-products .odds-legend__swatch {
  width: 22px;
  height: 8px;
  border-radius: 1px;
  display: inline-block;
}

.page-products .odds-legend__swatch--line {
  background: linear-gradient(90deg, var(--mag-a), var(--mag-b));
}

.page-products .odds-legend__swatch--band {
  background: rgba(122, 46, 107, 0.45);
  border: 1px solid rgba(212, 70, 140, 0.5);
}

.page-products .odds-legend__swatch--flag {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
}

.page-products .odds-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(212, 70, 140, 0.28);
  border-radius: var(--r);
  background: rgba(5, 16, 13, 0.55);
}

/* —— 青训分段 —— */
.page-products .stage-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.page-products .stage-item {
  border-left: 3px solid var(--slate);
  padding: 4px 0 4px 14px;
}

.page-products .stage-item__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .stage-item__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* —— 导出与订阅 —— */
.page-products .export-grid {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-products .export-card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 16px;
}

.page-products .export-card__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-products .export-card__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .export-card__meta {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-products .subscribe-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .subscribe-list__item {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .subscribe-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--cyan);
}

/* —— 角色入口 —— */
.page-products .role-grid {
  display: grid;
  gap: 14px;
}

.page-products .role-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r);
  background: var(--panel);
  padding: 18px;
}

.page-products .role-card:nth-child(even) {
  border-left-color: var(--amber);
}

.page-products .role-card__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.page-products .role-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-strong);
}

.page-products .role-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text);
}

.page-products .role-card__path {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(56, 244, 206, 0.4);
}

.page-products .role-card__path:hover,
.page-products .role-card__path:focus-visible {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
}

/* —— 结尾 —— */
.page-products .exp-cta-band {
  padding-block: var(--exp-gap);
}

.page-products .exp-cta {
  display: grid;
  gap: 22px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(56, 244, 206, 0.1), transparent 70%),
    var(--panel);
  padding: clamp(22px, 5vw, 44px);
}

.page-products .exp-cta__title {
  margin: 0;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.page-products .exp-cta__body p {
  margin: 14px 0 0;
  max-width: 54ch;
}

.page-products .exp-cta__actions {
  align-self: center;
}

.page-products .media-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* —— 平板及以上 —— */
@media (min-width: 720px) {
  .page-products .export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .page-products .exp-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: end;
  }

  .page-products .exp-module__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
  }

  .page-products .exp-module--flip .exp-module__grid > .exp-module__visual {
    order: -1;
  }

  .page-products .exp-module--flip .exp-module__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-products .odds-panel__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(24px, 4vw, 44px);
  }

  .page-products .exp-cta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    align-items: center;
  }

  .page-products .exp-cta__actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .exp-rota__num,
  .page-products .odds-svg {
    transition: none;
  }
}


<main id="main-content" class="page-products">
  <div class="shell">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep">/</span>
      <span aria-current="page">体验中心</span>
    </nav>
  </div>

  <header class="exp-hero">
    <div class="shell exp-hero__inner">
      <div class="exp-hero__copy">
        <p class="kicker">体验中心 · 视图与模块</p>
        <h1 class="exp-hero__title">从单场明细到分段复盘，三种视图怎么用</h1>
        <p class="lede exp-hero__lede">不管你是要查一场比赛的进失球落在哪一侧，还是要看一整季冠军走势的曲线形态，爱游戏中心把球类计分记录、主客场拆分和青训分段图表放在同一张工作台上。按赛季、地区、年龄段逐层筛选，几分钟就能调到你要的那一屏。</p>
        <div class="exp-hero__actions btn-row">
          <a class="btn btn--solid" href="#scoring">先看计分明细</a>
          <a class="btn btn--ghost" href="#roles">找我该用的视图</a>
        </div>
      </div>
      <aside class="exp-hero__side" aria-label="档案概况">
        <p class="annot">SEASON ARCHIVE · 07</p>
        <ul class="exp-rota">
          <li class="exp-rota__item">
            <span class="exp-rota__num">18,600</span>
            <span class="exp-rota__label">场赛事已建档</span>
          </li>
          <li class="exp-rota__item">
            <span class="exp-rota__num">42</span>
            <span class="exp-rota__label">个联赛与杯赛体系</span>
          </li>
          <li class="exp-rota__item">
            <span class="exp-rota__num">27</span>
            <span class="exp-rota__label">项细分指标</span>
          </li>
          <li class="exp-rota__item">
            <span class="exp-rota__num">3</span>
            <span class="exp-rota__label">种数据视图</span>
          </li>
        </ul>
      </aside>
    </div>
  </header>

  <div class="shell">
    <nav class="exp-tabs" aria-label="视图快捷入口">
      <a class="chip is-active" href="#scoring">单场拆解</a>
      <a class="chip" href="#split">主客场拆分</a>
      <a class="chip" href="#dual">净胜球排名</a>
      <a class="chip" href="#odds">赔率曲线</a>
      <a class="chip" href="#youth">青训分段复盘</a>
      <a class="chip" href="#exports">档案导出</a>
    </nav>
  </div>

  <section class="section exp-module" id="scoring">
    <div class="shell">
      <div class="exp-module__grid">
        <div class="exp-module__body" data-reveal>
          <p class="kicker">01 / 计分引擎</p>
          <h2 class="section__title">足球与篮球：两套规则，分开记、并列看</h2>
          <p>足球看的是上下半场的攻防走向，篮球看的是四节节奏与回合效率，两个项目的记录方式完全不同。引擎把它们各自编成一套独立字段，球类比分与棋牌类赛事的记录也分开存放，调取时不会互相串行。如果你同时关注棋牌类项目，爱游戏棋牌计分同样在这块看板上单独成列。</p>
          <p>一套计分体系分成四大类共 27 项细分指标，覆盖比分记录、进失球分布、时段控制与定位球统计。你可以只勾其中几项，让表格跟着你的关注点收窄。</p>
          <div class="chips exp-sport-chips" role="group" aria-label="选择项目类型查看字段">
            <button class="chip is-active" type="button" aria-pressed="true" data-filter="football" data-filter-group="sport" data-filter-target="#sport-fields">足球</button>
            <button class="chip" type="button" aria-pressed="false" data-filter="basketball" data-filter-group="sport" data-filter-target="#sport-fields">篮球</button>
          </div>
          <div class="table-scroll">
            <table class="data-table" id="sport-fields">
              <caption class="exp-table-cap">两套规则在同一张表里并列呈现，各自独立取数</caption>
              <thead>
                <tr>
                  <th scope="col">记录维度</th>
                  <th scope="col">足球</th>
                  <th scope="col">篮球</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">比分记录</th>
                  <td>上下半场比分分开记，加时与点球阶段单独标注</td>
                  <td>四节比分与加时分段，单节分差可单独调取</td>
                </tr>
                <tr>
                  <th scope="row">得失分布</th>
                  <td>进球与失球按主客场拆分，附带净胜球</td>
                  <td>得失分按主客场拆分，附带分差区间</td>
                </tr>
                <tr>
                  <th scope="row">时段控制</th>
                  <td>上下半场及补时段的射门与控球占比</td>
                  <td>四节攻防回合数与暂停后得分段</td>
                </tr>
                <tr>
                  <th scope="row">定位球统计</th>
                  <td>角球、任意球、点球来源的进球记录</td>
                  <td>边线球、罚球与二次进攻得分</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <figure class="exp-module__visual" data-reveal>
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1440}" width="1440" height="900" alt="数据面板界面示意，含等宽数字表格与指标卡片，界面文字已模糊处理">
            <figcaption class="media-frame__cap">单场拆解界面的排布方式：左侧字段树，中区明细表，右侧关键指标卡</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <div class="exp-band" aria-hidden="true"></div>

  <section class="section exp-module exp-module--flip" id="split">
    <div class="shell">
      <div class="exp-module__grid">
        <div class="exp-module__body" data-reveal>
          <p class="kicker">02 / 拆分面板</p>
          <h2 class="section__title">主客场拆开看，进失球落在哪里一目了然</h2>
          <p>同样一支梯队，主场能打出三球，客场可能连一次有效射正都凑不齐。把进球与失球各切成主场、客场两支流之后，赛程密集期的下滑、长途客场的体能拐点、主场压迫带来的定位球红利，都会在面板上显出形状。</p>
          <div class="split-grid">
            <article class="split-card split-card--cyan">
              <h3 class="split-card__name">主场进球</h3>
              <p class="split-card__desc">按上半场、下半场与补时相位分开计数，看清涨分集中在哪个时间段。</p>
            </article>
            <article class="split-card split-card--amber">
              <h3 class="split-card__name">客场进球</h3>
              <p class="split-card__desc">与主场并列对比，方便排课人员判断客场取分是否只依赖个别场次。</p>
            </article>
            <article class="split-card split-card--amber">
              <h3 class="split-card__name">主场失球</h3>
              <p class="split-card__desc">拆出定位球与运动战来源，定位球失分偏高的梯队会单独标记。</p>
            </article>
            <article class="split-card split-card--cyan">
              <h3 class="split-card__name">客场失球</h3>
              <p class="split-card__desc">配合赛程间隔一起看，连续客场之后的失球集中度会明显抬升。</p>
            </article>
          </div>
          <p class="exp-note">教练组常把它当赛前准备的第一屏：对手客场失球集中在收段，这一周的防守训练就围绕收段展开。</p>
        </div>
        <figure class="exp-module__visual" data-reveal>
          <div class="media-frame">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="左右对照的柱状分布抽象图，用荧光青与琥珀橙区分主客场维度" loading="lazy" decoding="async">
            <figcaption class="media-frame__cap">主客场两支流并列对照，颜色区分维度，长度表示量级</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section exp-module" id="dual">
    <div class="shell">
      <div class="exp-module__head" data-reveal>
        <p class="kicker">03 / 排名参考</p>
        <h2 class="section__title">净胜球两条轨道：小组赛一条，淘汰赛一条</h2>
        <p class="lede">杯赛里同一支球队的净胜球，放在小组赛和放在淘汰赛，含义并不相同。自 2021 赛季起，全部杯赛体系都按两套轨道分别出数，排名参考时你可以只选其中一条，也可以两条并排比对。</p>
      </div>
      <div class="table-scroll" data-reveal>
        <table class="data-table">
          <thead>
            <tr>
              <th scope="col">对照维度</th>
              <th scope="col">小组赛轨道</th>
              <th scope="col">淘汰赛轨道</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">纳入场次</th>
              <td>循环阶段全部轮次</td>
              <td>单场决胜与两回合系列</td>
            </tr>
            <tr>
              <th scope="row">计算方式</th>
              <td>累计净胜球，同分时进入下一层比较</td>
              <td>系列赛净胜球，加时与点球单独标注</td>
            </tr>
            <tr>
              <th scope="row">输出形式</th>
              <td>名次序列与净胜球条带</td>
              <td>晋级路径与分差走势</td>
            </tr>
            <tr>
              <th scope="row">复盘用途</th>
              <td>评估分组强度与出线容错空间</td>
              <td>评估关键回合的处理质量</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="exp-note exp-note--wide" data-reveal>数据研究机构常把两条轨道叠在一起看：一支球队在小组赛净胜球领先、淘汰赛却频繁小胜，往往说明它的进攻效率依赖特定节奏。</p>
    </div>
  </section>

  <div class="exp-band exp-band--odds" aria-hidden="true"></div>

  <section class="section exp-module" id="odds">
    <div class="shell">
      <div class="odds-panel" data-reveal>
        <div class="odds-panel__grid">
          <div class="odds-panel__body">
            <p class="kicker kicker--magenta">04 / 赔率模型</p>
            <h2 class="section__title">赔率曲线怎么读：一条主线、一层区间、一个背离提示</h2>
            <p>爱游戏联赛夺冠赔率的走势以一条主线呈现，主线上下包一层区间带，表示该轮样本下的浮动空间。图上同时标出样本量与更新轮次，样本偏薄的地区会被明确写出，避免你把早期波动当成趋势。</p>
            <p>当曲线走向与计分指标的变化方向明显不一致时，看板会在对应轮次打一个标记点，提示你先去看那一轮的进球分布和时段数据，再决定要不要调整判断。</p>
            <ul class="odds-legend">
              <li class="odds-legend__item"><span class="odds-legend__swatch odds-legend__swatch--line"></span>走势主线</li>
              <li class="odds-legend__item"><span class="odds-legend__swatch odds-legend__swatch--band"></span>样本区间带</li>
              <li class="odds-legend__item"><span class="odds-legend__swatch odds-legend__swatch--flag"></span>与计分指标背离的轮次</li>
            </ul>
          </div>
          <figure class="odds-panel__figure">
            <div class="media-frame media-frame--wide">
              <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="紫红渐变色调的曲线与区间带抽象图形，标注刻度但不含真实赔率数值" loading="lazy" decoding="async">
            </div>
            <svg class="odds-svg" viewBox="0 0 640 200" role="img" aria-label="赔率曲线、区间带与背离标记的示意图，不含具体数值">
              <defs>
                <linearGradient id="oddsBand" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stop-color="#7A2E6B" stop-opacity="0.55"></stop>
                  <stop offset="1" stop-color="#D4468C" stop-opacity="0.25"></stop>
                </linearGradient>
                <linearGradient id="oddsLine" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stop-color="#7A2E6B"></stop>
                  <stop offset="1" stop-color="#D4468C"></stop>
                </linearGradient>
              </defs>
              <path d="M0 150 L80 138 L160 120 L240 128 L320 96 L400 104 L480 74 L560 66 L640 52 L640 118 L560 124 L480 132 L400 150 L320 142 L240 168 L160 160 L80 176 L0 186 Z" fill="url(#oddsBand)"></path>
              <path d="M0 168 L80 156 L160 140 L240 148 L320 118 L400 126 L480 100 L560 94 L640 84" fill="none" stroke="url(#oddsLine)" stroke-width="2.5" stroke-linecap="round"></path>
              <circle cx="240" cy="148" r="5" fill="#FFA23A"></circle>
              <line x1="240" y1="148" x2="240" y2="186" stroke="#FFA23A" stroke-width="1" stroke-dasharray="3 3"></line>
            </svg>
            <figcaption class="media-frame__cap">曲线随轮次推进，区间带随样本量收放，橙色标记点提示需要回看计分明细的轮次</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="section exp-module exp-module--flip" id="youth">
    <div class="shell">
      <div class="exp-module__grid">
        <div class="exp-module__body" data-reveal>
          <p class="kicker">05 / 青训分段复盘</p>
          <h2 class="section__title">一场球切成四段，青训复盘看的不是总分</h2>
          <p>U9 到 U19 的孩子，注意力和体能曲线跟成年队完全不同。分段统计把一场比赛切成开段、中段、收段与终段四条时间区间，每段各自出数，哪一段掉强度、哪一段失误集中，图表上直接看得见。</p>
          <ol class="stage-list">
            <li class="stage-item">
              <span class="stage-item__tag">开段</span>
              <p class="stage-item__text">开场后的进入状态速度，看第一脚有效传接与压迫启动时机。</p>
            </li>
            <li class="stage-item">
              <span class="stage-item__tag">中段</span>
              <p class="stage-item__text">节奏稳定后的攻防回合质量，是分段图表里最厚的一段数据。</p>
            </li>
            <li class="stage-item">
              <span class="stage-item__tag">收段</span>
              <p class="stage-item__text">体能下降期的失球集中度，也是教练组调整换人节奏的主要依据。</p>
            </li>
            <li class="stage-item">
              <span class="stage-item__tag">终段</span>
              <p class="stage-item__text">补时与决胜阶段的处理质量，把定位球和临门一脚单独拎出来看。</p>
            </li>
          </ol>
          <p class="exp-note">档案覆盖 U9 至 U19 共 6 个年龄段、68 支梯队，按年龄段调取后可直接对比同一梯队不同场次的同一区间。</p>
        </div>
        <figure class="exp-module__visual" data-reveal>
          <div class="media-frame media-frame--tall">
            <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="四段式分段统计图抽象示意，冷灰蓝分区配荧光青数据条，无文字标签" loading="lazy" decoding="async">
            <figcaption class="media-frame__cap">四条时间区间各自成条，同一梯队多场比赛可叠在同一张图上比对</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <div class="exp-band" aria-hidden="true"></div>

  <section class="section exp-module" id="exports">
    <div class="shell">
      <div class="exp-module__grid">
        <div class="exp-module__body" data-reveal>
          <p class="kicker">06 / 导出与订阅</p>
          <h2 class="section__title">选好字段，带走整季档案</h2>
          <p>看完还要用得上。赛季档案支持 CSV 与 PDF 两种格式导出，字段可以逐个勾选：只要净胜球和主客场得失分布，或者把 27 项指标一次带走，都由你决定。每个赛季带独立版本号，用到哪一版、改过哪一项，都能回查。</p>
          <div class="export-grid">
            <article class="export-card">
              <h3 class="export-card__title">CSV</h3>
              <p class="export-card__text">适合直接进分析工具或自家数据表，字段名与看板保持一致，接上就能算。</p>
              <p class="export-card__meta">按字段勾选 · 支持多赛季合并</p>
            </article>
            <article class="export-card">
              <h3 class="export-card__title">PDF</h3>
              <p class="export-card__text">适合内部汇报与家长沟通，指标卡、分段图与明细表排成一份可直接传阅的文档。</p>
              <p class="export-card__meta">含图表页 · 保留版本号</p>
            </article>
          </div>
          <h3 class="exp-subtitle">四类专题，按你的关注点推送</h3>
          <ul class="subscribe-list">
            <li class="subscribe-list__item">计分方法论：规则调整与字段变化的说明</li>
            <li class="subscribe-list__item">赔率观察：曲线形态与样本量变化的周期整理</li>
            <li class="subscribe-list__item">青训复盘：分段统计中反复出现的共性问题</li>
            <li class="subscribe-list__item">版本更新：档案版本号与修订条目的变更通知</li>
          </ul>
          <p class="exp-note">常规赛每轮结束后更新，杯赛与淘汰赛在比赛当日更新，导出时取到的就是最新版本。</p>
        </div>
        <figure class="exp-module__visual" data-reveal>
          <div class="media-frame">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="文档与数据流抽象图形，表现导出与推送路径，不含真实文件名" loading="lazy" decoding="async">
            <figcaption class="media-frame__cap">从看板勾选字段到文件落地，再到专题推送的完整路径</figcaption>
          </div>
        </figure>
      </div>
    </div>
  </section>

  <section class="section exp-module" id="roles">
    <div class="shell">
      <div class="exp-module__head" data-reveal>
        <p class="kicker">07 / 入口建议</p>
        <h2 class="section__title">你该从哪一屏开始</h2>
        <p class="lede">功能不少，但没人需要一次看完。按你手上的活挑入口，第一屏就该是能直接用的那一屏。</p>
      </div>
      <div class="role-grid">
        <article class="role-card" data-reveal>
          <p class="role-card__role">青训教练</p>
          <h3 class="role-card__title">先开分段复盘，再看主客场拆分</h3>
          <p class="role-card__text">先把上一场切成四段找问题，再拿主客场两支流确认它是偶发还是习惯。需要按年龄段批量调取时，从帮助中心查筛选步骤。</p>
          <a class="role-card__path" href="/help/">查看操作说明</a>
        </article>
        <article class="role-card" data-reveal>
          <p class="role-card__role">赛事运营与竞猜产品</p>
          <h3 class="role-card__title">先开赔率曲线，叠上计分指标</h3>
          <p class="role-card__text">曲线看走势，区间带看样本厚度，背离标记点提示你回查那一轮的进球分布。看板支持曲线与指标并排挂载。</p>
          <a class="role-card__path" href="#odds">跳到赔率模块</a>
        </article>
        <article class="role-card" data-reveal>
          <p class="role-card__role">体育媒体与内容创作者</p>
          <h3 class="role-card__title">先开单场拆解，按图表取素材</h3>
          <p class="role-card__text">分段图、净胜球条带和走势曲线都是成体系的产出物，配合专题中心的拆解文章，选题和素材可以一起定。</p>
          <a class="role-card__path" href="/topics/">进入专题中心</a>
        </article>
        <article class="role-card" data-reveal>
          <p class="role-card__role">高校与研究机构</p>
          <h3 class="role-card__title">先开双轨净胜球，再导出全字段</h3>
          <p class="role-card__text">两条轨道分开出数，便于做赛制效应的对照研究。字段勾选后导出 CSV，带上版本号存档，回查链完整。</p>
          <a class="role-card__path" href="/mission/">了解团队与档案背景</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section exp-cta-band">
    <div class="shell">
      <div class="exp-cta" data-reveal>
        <div class="exp-cta__body">
          <h2 class="exp-cta__title">把你要看的那个赛季调出来</h2>
          <p>筛选条件、字段组合或对接方式有疑问，直接来信说明赛季与场次编号，我们会给出对应的视图路径和导出建议。需要长期使用，也可以谈谈档案定制与订阅安排。</p>
        </div>
        <div class="exp-cta__actions btn-row">
          <a class="btn btn--solid" href="/inquiry/">联系数据服务团队</a>
          <a class="btn btn--ghost" href="/help/">先看常见问题</a>
        </div>
      </div>
    </div>
  </section>
</main>

/* ===== 体验中心 · page-products ===== */

.page-products {
  --exp-gap: clamp(28px, 5vw, 56px);
}

/* —— 首屏 —— */
.page-products .exp-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hair);
  background:
    radial-gradient(900px 420px at 84% -14%, rgba(56, 244, 206, 0.12), transparent 62%),
    radial-gradient(700px 380px at 4% 110%, rgba(122, 46, 107, 0.22), transparent 68%),
    linear-gradient(180deg, var(--ink) 0%, var(--panel-2) 100%);
}

.page-products .exp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hair-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-2) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.55;
  pointer-events: none;
}

.page-products .exp-hero__inner {
  position: relative;
  display: grid;
  gap: 32px;
  padding: clamp(36px, 8vw, 84px) 0 clamp(30px, 6vw, 60px);
}

.page-products .exp-hero__title {
  margin: 12px 0 0;
  font-size: clamp(30px, 6.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.page-products .exp-hero__lede {
  margin: 16px 0 0;
  max-width: 46ch;
}

.page-products .exp-hero__actions {
  margin-top: 26px;
}

.page-products .exp-hero__side {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 18px 18px 20px;
}

.page-products .exp-rota {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .exp-rota__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-products .exp-rota__num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.page-products .exp-rota__item:nth-child(2) .exp-rota__num,
.page-products .exp-rota__item:nth-child(3) .exp-rota__num {
  color: var(--amber);
}

.page-products .exp-rota__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* —— 视图快捷条 —— */
.page-products .exp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}

.page-products .exp-tabs .chip {
  text-decoration: none;
}

/* —— 模块通用 —— */
.page-products .exp-module {
  padding-block: var(--exp-gap);
}

.page-products .exp-module__grid {
  display: grid;
  gap: 26px;
}

.page-products .exp-module__body > p {
  margin: 14px 0 0;
}

.page-products .exp-module__head {
  display: grid;
  gap: 12px;
  max-width: 70ch;
  margin-bottom: 26px;
}

.page-products .exp-module__head p {
  margin: 0;
}

.page-products .exp-module__visual {
  margin: 0;
}

.page-products .exp-table-cap {
  padding: 10px 0;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.page-products .data-table {
  min-width: 560px;
}

.page-products .data-table th[scope="col"] {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-products .exp-note {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--slate);
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-products .exp-note--wide {
  max-width: 76ch;
  margin-top: 22px;
}

.page-products .exp-sport-chips {
  margin-top: 22px;
}

.page-products .exp-subtitle {
  margin: 30px 0 12px;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}

/* —— 斜切分隔带 —— */
.page-products .exp-band {
  height: 46px;
  background: linear-gradient(90deg, var(--green) 0%, var(--panel-2) 100%);
  clip-path: polygon(0 0, 100% 22%, 100% 100%, 0 78%);
}

.page-products .exp-band--odds {
  background: linear-gradient(90deg, rgba(122, 46, 107, 0.55) 0%, rgba(212, 70, 140, 0.3) 100%);
  clip-path: polygon(0 78%, 100% 0, 100% 100%, 0 22%);
}

/* —— 主客场拆分卡 —— */
.page-products .split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.page-products .split-card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 14px 14px 16px;
}

.page-products .split-card--cyan {
  border-top: 2px solid var(--cyan);
}

.page-products .split-card--amber {
  border-top: 2px solid var(--amber);
}

.page-products .split-card__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-strong);
}

.page-products .split-card__desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* —— 赔率模块 —— */
.page-products .odds-panel {
  border: 1px solid rgba(212, 70, 140, 0.32);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(122, 46, 107, 0.42) 0%, rgba(212, 70, 140, 0.14) 58%, rgba(5, 16, 13, 0.9) 100%);
  padding: clamp(20px, 4vw, 40px);
}

.page-products .odds-panel__grid {
  display: grid;
  gap: 28px;
}

.page-products .odds-panel__body > p {
  margin: 14px 0 0;
}

.page-products .odds-panel__figure {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-products .kicker--magenta {
  color: var(--mag-b);
}

.page-products .odds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .odds-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.page-products .odds-legend__swatch {
  width: 22px;
  height: 8px;
  border-radius: 1px;
  display: inline-block;
}

.page-products .odds-legend__swatch--line {
  background: linear-gradient(90deg, var(--mag-a), var(--mag-b));
}

.page-products .odds-legend__swatch--band {
  background: rgba(122, 46, 107, 0.45);
  border: 1px solid rgba(212, 70, 140, 0.5);
}

.page-products .odds-legend__swatch--flag {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
}

.page-products .odds-svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(212, 70, 140, 0.28);
  border-radius: var(--r);
  background: rgba(5, 16, 13, 0.55);
}

/* —— 青训分段 —— */
.page-products .stage-list {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .stage-item {
  border-left: 3px solid var(--slate);
  padding: 4px 0 4px 14px;
}

.page-products .stage-item__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.page-products .stage-item__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

/* —— 导出与订阅 —— */
.page-products .export-grid {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.page-products .export-card {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  padding: 16px;
}

.page-products .export-card__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.page-products .export-card__text {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .export-card__meta {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-products .subscribe-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .subscribe-list__item {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
}

.page-products .subscribe-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 2px;
  background: var(--cyan);
}

/* —— 角色入口 —— */
.page-products .role-grid {
  display: grid;
  gap: 14px;
}

.page-products .role-card {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r);
  background: var(--panel);
  padding: 18px;
}

.page-products .role-card:nth-child(even) {
  border-left-color: var(--amber);
}

.page-products .role-card__role {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.page-products .role-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-strong);
}

.page-products .role-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text);
}

.page-products .role-card__path {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(56, 244, 206, 0.4);
}

.page-products .role-card__path:hover,
.page-products .role-card__path:focus-visible {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
}

/* —— 结尾 —— */
.page-products .exp-cta-band {
  padding-block: var(--exp-gap);
}

.page-products .exp-cta {
  display: grid;
  gap: 22px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(56, 244, 206, 0.1), transparent 70%),
    var(--panel);
  padding: clamp(22px, 5vw, 44px);
}

.page-products .exp-cta__title {
  margin: 0;
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.page-products .exp-cta__body p {
  margin: 14px 0 0;
  max-width: 54ch;
}

.page-products .exp-cta__actions {
  align-self: center;
}

.page-products .media-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* —— 平板及以上 —— */
@media (min-width: 720px) {
  .page-products .export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* —— 桌面 —— */
@media (min-width: 980px) {
  .page-products .exp-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: end;
  }

  .page-products .exp-module__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
  }

  .page-products .exp-module--flip .exp-module__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .page-products .exp-module--flip .exp-module__grid > .exp-module__visual {
    order: -1;
  }

  .page-products .odds-panel__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(24px, 4vw, 44px);
  }

  .page-products .exp-cta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    align-items: center;
  }

  .page-products .exp-cta__actions {
    justify-content: flex-end;
  }
}