.page-home{
  --hm-line:rgba(24,35,58,.85);
  --hm-cyan-soft:rgba(0,229,208,.12);
  --hm-orange-soft:rgba(255,106,31,.12);
  --hm-panel:linear-gradient(180deg,rgba(6,48,58,.5),var(--ink-800));
  color:var(--paper-100);
  background:var(--ink-900);
  overflow-x:hidden;
}
.page-home img{max-width:100%;height:auto;display:block}

/* ---------- 上下文提示条 ---------- */
.page-home .hm-context{
  border-bottom:var(--line);
  background:linear-gradient(90deg,rgba(6,48,58,.65),rgba(7,11,20,0) 68%);
}
.page-home .hm-context__inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  max-width:var(--wrap);margin:0 auto;padding:10px var(--gutter);
  font-size:11px;letter-spacing:.18em;color:var(--mist-400);
}
.page-home .hm-context__here{color:var(--cyan-400)}
.page-home .hm-context__sep{color:var(--ink-700)}
.page-home .hm-context__live{display:inline-flex;align-items:center;gap:6px;color:var(--live-500)}
.page-home .hm-context__dot{width:6px;height:6px;background:var(--live-500);border-radius:1px;display:inline-block}

/* ---------- 开场 ---------- */
.page-home .hm-open{position:relative;overflow:hidden;padding-top:var(--sp-4)}
.page-home .hm-open::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--hm-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--hm-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 12% 0%,#000 12%,transparent 72%);
  mask-image:radial-gradient(120% 80% at 12% 0%,#000 12%,transparent 72%);
}
.page-home .hm-open::after{
  content:"";position:absolute;left:-10%;top:-25%;width:60%;height:70%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(0,229,208,.16),transparent 65%);
}
.page-home .hm-open__inner{
  position:relative;z-index:1;
  display:grid;gap:var(--sp-4);
}
.page-home .hm-open__kpi{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:var(--sp-2) 0 0;
  font-family:var(--font-mono);font-size:clamp(56px,15vw,88px);line-height:.9;
  color:var(--white-000);text-shadow:0 0 28px rgba(0,229,208,.35);
}
.page-home .hm-open__kpi .st-kpi__unit{
  font-family:var(--font-sans);font-size:13px;letter-spacing:.18em;color:var(--cyan-400);
}
.page-home .hm-open__title{
  margin:var(--sp-2) 0;
  font-size:clamp(32px,7.4vw,64px);line-height:1.06;letter-spacing:-.02em;
}
.page-home .hm-open__lede{max-width:38ch;color:var(--paper-100)}
.page-home .hm-open__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}

.page-home .hm-open__media{
  position:relative;margin:0;border:var(--line);background:var(--ink-800);overflow:hidden;
}
.page-home .hm-open__media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:contrast(1.1) saturate(.92) brightness(.82);
}
.page-home .hm-open__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,20,0) 42%,rgba(7,11,20,.82) 100%),
             linear-gradient(90deg,rgba(6,48,58,.4),transparent 55%);
}
.page-home .hm-vert{
  position:absolute;left:10px;bottom:var(--sp-2);z-index:2;
  writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.18em;color:var(--cyan-400);
  background:rgba(7,11,20,.72);padding:10px 5px;border-left:var(--line-cy);
}
.page-home .hm-open__plate{z-index:2}

/* ---------- 章节题头 ---------- */
.page-home .hm-head{margin-bottom:var(--sp-3);max-width:64ch}
.page-home .hm-head__lede{margin-top:var(--sp-2);color:var(--mist-400)}

/* ---------- 四模块 Bento ---------- */
.page-home .hm-mods-wrap{padding-top:0}
.page-home .hm-mods{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.page-home .hm-mod{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-3);background:var(--ink-800);border:var(--line);
  min-height:170px;
  transition:border-color .18s ease,background .18s ease;
}
.page-home .hm-mod::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--cyan-400);
  transition:width .25s ease;
}
.page-home .hm-mod:hover,.page-home .hm-mod:focus-within{border-color:var(--cyan-400);background:var(--hm-panel)}
.page-home .hm-mod:hover::before,.page-home .hm-mod:focus-within::before{width:76px;background:var(--orange-500)}
.page-home .hm-mod__title{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:0}
.page-home .hm-mod .st-cell__text{margin:0;color:var(--mist-400);font-size:15px;line-height:1.7}
.page-home .hm-mod__reveal{
  margin:0;color:var(--paper-100);font-size:14px;line-height:1.65;
  border-top:1px dashed var(--hm-line);padding-top:var(--sp-1);
}
.page-home .hm-mod__link{margin-top:var(--sp-2);align-self:flex-start}
.page-home .hm-mod__plate{z-index:2}
.page-home .hm-mod--lg{min-height:260px}

@media (min-width:720px){
  .page-home .hm-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .hm-mod--lg{grid-column:span 2}
}
@media (min-width:1024px){
  .page-home .hm-mods{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(96px,auto)}
  .page-home .hm-mod--lg{grid-column:span 6;grid-row:span 2}
  .page-home .hm-mod--md{grid-column:span 3}
  .page-home .hm-mod--wide{grid-column:span 6}
}
@media (hover:hover) and (min-width:1024px){
  .page-home .hm-mod__reveal{
    max-height:0;opacity:0;transform:translateY(6px);overflow:hidden;padding-top:0;border-top-color:transparent;
    transition:max-height .28s ease,opacity .22s ease,transform .28s ease,padding-top .28s ease;
  }
  .page-home .hm-mod:hover .hm-mod__reveal,
  .page-home .hm-mod:focus-within .hm-mod__reveal{
    max-height:150px;opacity:1;transform:none;padding-top:var(--sp-1);border-top-color:var(--hm-line);
  }
}

/* ---------- 横向比分数据带 ---------- */
.page-home .hm-weave{position:absolute;inset:0;width:100%;height:100%;opacity:.05;pointer-events:none}
.page-home .hm-scores{
  position:relative;overflow:hidden;
  background:var(--teal-900);
  border-top:var(--line);border-bottom:var(--line);
  padding:var(--sp-4) 0 var(--sp-3);
}
.page-home .hm-scores__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.page-home .hm-scores__layout{display:grid;gap:var(--sp-3);align-items:center}
.page-home .hm-scores__media{position:relative;margin:0;border:var(--line-cy);background:var(--ink-800);overflow:hidden}
.page-home .hm-scores__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.12) brightness(.85)}
.page-home .hm-scores__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,229,208,.09) 0 2px,transparent 2px 5px);
}
.page-home .hm-scores__plate{z-index:2}

.page-home .hm-scores__track{
  overflow-x:auto;overscroll-behavior-x:contain;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;border-left:var(--line);
}
.page-home .hm-scores__track::-webkit-scrollbar{display:none}
.page-home .hm-scores__track:active{cursor:grabbing}
.page-home .hm-scores__run{display:flex;width:max-content;animation:hm-run 40s linear infinite}
.page-home .hm-scores__track:hover .hm-scores__run,
.page-home .hm-scores__track:focus-within .hm-scores__run{animation-play-state:paused}
@keyframes hm-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.page-home .hm-score{
  flex:0 0 auto;width:260px;
  display:flex;flex-direction:column;gap:8px;
  padding:var(--sp-2) var(--sp-3);
  border-right:var(--line);
  background:rgba(7,11,20,.32);
}
.page-home .hm-score--live{background:rgba(255,59,87,.08)}
.page-home .hm-score__meta{
  display:flex;align-items:center;gap:6px;
  margin:0;font-size:11px;letter-spacing:.1em;color:var(--mist-400);
}
.page-home .hm-score__line{display:flex;align-items:baseline;gap:6px;margin:0;font-family:var(--font-mono)}
.page-home .hm-score__team{font-size:13px;letter-spacing:.14em;color:var(--mist-400)}
.page-home .hm-score__num{font-size:32px;line-height:1;color:var(--paper-100)}
.page-home .hm-score__num--lead{font-size:44px;color:var(--white-000);text-shadow:0 0 18px rgba(0,229,208,.4)}
.page-home .hm-score__sep{font-size:24px;color:var(--cyan-400)}
.page-home .hm-score__note{margin:0;font-size:13px;line-height:1.6;color:var(--mist-400)}

/* ---------- 复盘精选 ---------- */
.page-home .hm-filters{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.page-home .hm-reviews__body{display:grid;gap:var(--sp-3)}
.page-home .hm-reviews__media{position:relative;margin:0;border:var(--line);background:var(--ink-800);overflow:hidden}
.page-home .hm-reviews__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:contrast(1.14) brightness(.8) saturate(.9);
}
.page-home .hm-reviews__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,11,20,.8),transparent 55%),
             repeating-linear-gradient(0deg,rgba(0,229,208,.06) 0 1px,transparent 1px 6px);
}
.page-home .hm-reviews__plate{z-index:2}
.page-home .hm-reviews__list{display:grid;gap:var(--sp-2)}
.page-home .hm-review{
  border:var(--line);border-left:2px solid var(--ink-700);
  background:var(--ink-800);padding:var(--sp-3);
  transition:border-left-color .18s ease,background .18s ease;
}
.page-home .hm-review:hover{border-left-color:var(--cyan-400);background:var(--hm-panel)}
.page-home .hm-review .st-card__title{font-size:20px;line-height:1.34;margin:var(--sp-1) 0}
.page-home .hm-review .st-card__text{color:var(--mist-400);font-size:15px;line-height:1.7;margin:0}
.page-home .hm-review .st-card__meta{margin:0}
.page-home .hm-reviews__more{margin:var(--sp-3) 0 0}

@media (min-width:900px){
  .page-home .hm-reviews__body{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-4);align-items:start}
  .page-home .hm-reviews__media img{aspect-ratio:3/4}
}

/* ---------- 即时查排名 ---------- */
.page-home .hm-rank{
  background:linear-gradient(180deg,var(--ink-900),rgba(6,48,58,.45) 50%,var(--ink-900));
  border-top:var(--line);border-bottom:var(--line);
}
.page-home .hm-rank__inner{display:grid;gap:var(--sp-3)}
.page-home .hm-rank__text{max-width:40ch;color:var(--mist-400);line-height:1.75}
.page-home .hm-rank__stamp{
  display:inline-flex;align-items:center;
  margin:var(--sp-2) 0;padding:6px 10px;
  border:var(--line-cy);background:rgba(0,229,208,.07);
  font-size:12px;letter-spacing:.12em;color:var(--cyan-400);
}
.page-home .hm-rank__stats{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.page-home .hm-rank__stat{
  border:var(--line);background:var(--hm-panel);padding:var(--sp-3) var(--sp-2);
}
.page-home .hm-rank__num{
  margin:0;font-size:clamp(38px,9vw,56px);line-height:1;color:var(--white-000);
  display:flex;align-items:baseline;gap:6px;text-shadow:0 0 20px rgba(0,229,208,.3);
}
.page-home .hm-rank__unit{font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;color:var(--cyan-400)}
.page-home .hm-rank__label{margin:var(--sp-1) 0 0;font-size:13px;line-height:1.6;color:var(--mist-400)}

@media (min-width:900px){
  .page-home .hm-rank__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:var(--sp-4)}
}

/* ---------- 为什么选三亿看台 ---------- */
.page-home .hm-why__inner{display:grid;gap:var(--sp-3)}
.page-home .hm-why__text{max-width:42ch;color:var(--mist-400);line-height:1.75}
.page-home .hm-why__facts{
  display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-top:var(--sp-3);
}
.page-home .hm-fact{
  border-top:2px solid var(--ink-700);padding:var(--sp-2) 0 0;
}
.page-home .hm-fact:nth-child(3n+1){border-top-color:var(--cyan-400)}
.page-home .hm-fact:nth-child(3n+2){border-top-color:var(--orange-500)}
.page-home .hm-fact:nth-child(3n+3){border-top-color:var(--gold-400)}
.page-home .hm-fact__num{
  display:flex;align-items:baseline;gap:4px;margin:0;
  font-size:32px;line-height:1;color:var(--paper-100);
}
.page-home .hm-fact__unit{font-family:var(--font-sans);font-size:12px;letter-spacing:.12em;color:var(--mist-400)}
.page-home .hm-fact__label{margin:var(--sp-1) 0 0;font-size:13px;line-height:1.6;color:var(--mist-400)}
.page-home .hm-why__media{position:relative;margin:0;border:var(--line);background:var(--ink-800);overflow:hidden}
.page-home .hm-why__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.1) brightness(.85)}
.page-home .hm-why__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 78% 18%,rgba(255,106,31,.28),transparent 58%),
             linear-gradient(0deg,rgba(7,11,20,.72),transparent 60%);
}
.page-home .hm-why__plate{z-index:2}

@media (min-width:900px){
  .page-home .hm-why__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-4);align-items:start}
}

/* ---------- 四类访客入口 ---------- */
.page-home .hm-doors{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-900),rgba(6,48,58,.4));
  border-top:var(--line);
}
.page-home .hm-doors__inner{position:relative;z-index:1}
.page-home .hm-doors__grid{display:grid;gap:var(--sp-2);grid-template-columns:1fr}
.page-home .hm-door{
  display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-3);border:var(--line);background:rgba(14,22,38,.92);
  color:var(--paper-100);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.page-home .hm-door:hover,.page-home .hm-door:focus-visible{
  border-color:var(--orange-500);background:rgba(255,106,31,.09);transform:translateY(-3px);
}
.page-home .hm-door__title{margin:var(--sp-1) 0 0;font-size:19px;line-height:1.32}
.page-home .hm-door__text{margin:0;font-size:14px;line-height:1.66;color:var(--mist-400)}
.page-home .hm-door__go{margin-top:auto;padding-top:var(--sp-2);font-size:12px;letter-spacing:.14em;color:var(--cyan-400)}

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

/* ---------- 右下角查排名浮层 ---------- */
.page-home .hm-float{position:fixed;right:16px;bottom:16px;z-index:60}
.page-home .hm-float__btn{
  list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;
  padding:12px 18px;
  background:var(--cyan-400);color:var(--ink-900);
  font-size:14px;font-weight:700;letter-spacing:.06em;
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,229,208,.28);
}
.page-home .hm-float__btn::-webkit-details-marker{display:none}
.page-home .hm-float__btn::marker{content:""}
.page-home .hm-float[open] .hm-float__btn{background:var(--orange-500);color:var(--white-000);box-shadow:0 8px 24px rgba(255,106,31,.3)}
.page-home .hm-float__panel{
  position:absolute;right:0;bottom:calc(100% + 8px);
  width:min(296px,calc(100vw - 32px));
  padding:var(--sp-2);
  background:var(--ink-800);border:var(--line-cy);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.page-home .hm-float__title{margin:0 0 var(--sp-2);font-size:11px;letter-spacing:.12em;color:var(--cyan-400)}
.page-home .hm-float__list{list-style:none;margin:0 0 var(--sp-2);padding:0;display:grid;gap:6px}
.page-home .hm-float__list li{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 10px;background:rgba(7,11,20,.6);border-left:2px solid var(--ink-700);
}
.page-home .hm-float__list li:first-child{border-left-color:var(--gold-400)}
.page-home .hm-float__rank{font-size:13px;color:var(--mist-400)}
.page-home .hm-float__name{flex:1;font-size:14px;letter-spacing:.08em}
.page-home .hm-float__pt{font-size:18px;color:var(--paper-100)}
.page-home .hm-float__link{width:100%;text-align:center}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-home .hm-scores__run{animation:none}
  .page-home .hm-door,
  .page-home .hm-mod,
  .page-home .hm-review{transition:none}
  .page-home .hm-door:hover{transform:none}
}

/* ---------- 桌面栅格微调 ---------- */
@media (min-width:1024px){
  .page-home .hm-open__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4);align-items:start}
  .page-home .hm-scores__layout{grid-template-columns:280px minmax(0,1fr);gap:var(--sp-4)}
  .page-home .hm-open__media img{aspect-ratio:21/9}
}
