.page-home{
  --hm-shadow: 0 24px 60px rgba(0,0,0,.38);
  --hm-cut: 12px;
  background: var(--ink);
  color: var(--warm);
  overflow-x: clip;
}
.page-home img{
  display: block;
  max-width: 100%;
}
.page-home .hm-wrap{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.page-home .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: 700 15px/1 var(--font-body);
  text-decoration: none;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.page-home .btn:hover{ transform: translateY(-2px); }
.page-home .btn--lime{ background: var(--lime); color: var(--char); border-color: var(--lime); }
.page-home .btn--ghost{ background: transparent; color: var(--warm); border-color: rgba(246,243,233,.38); }
.page-home .btn--ghost:hover{ border-color: var(--cyan); color: var(--cyan); }
.page-home .btn:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* 通用文字件 */
.page-home .hm-eyebrow{
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 1px solid rgba(200,255,77,.45);
  border-radius: var(--r-pill);
  font: 700 11px/1.6 var(--font-mono);
  letter-spacing: .18em;
  color: var(--lime);
}
.page-home .hm-eyebrow--dark{
  border-color: rgba(31,122,76,.5);
  color: var(--pitch);
}
.page-home .hm-h2{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 36px);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.page-home .hm-h2--dark{ color: var(--char); }
.page-home .hm-sub{
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--warm-72);
}

/* 首屏 */
.hm-hero{
  position: relative;
  padding-block: clamp(32px, 7vw, 88px) clamp(48px, 9vw, 110px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 62% at 84% 6%, rgba(200,255,77,.15), transparent 62%),
    radial-gradient(ellipse 62% 52% at 6% 96%, rgba(53,224,200,.12), transparent 60%),
    var(--ink);
}
.hm-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(92deg, rgba(31,122,76,.11) 0 2px, transparent 2px 48px);
  opacity: .55;
  pointer-events: none;
}
.hm-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 6vw, 60px);
}
.hm-crumb{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .1em;
  color: var(--warm-56);
}
.hm-hero__title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 8.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -.025em;
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.hm-hero__title span{ color: var(--lime); }
.hm-hero__lede{
  margin: clamp(18px, 3vw, 26px) 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--warm-72);
}
.hm-hero__facts{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4vw, 40px);
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.hm-hero__facts li{
  padding-top: 12px;
  border-top: 1px solid var(--line);
  min-width: 108px;
}
.hm-hero__facts b{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--lime);
}
.hm-hero__facts span{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--warm-56);
}
.hm-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 38px);
}

.hm-hero__board{ position: relative; }
.hm-board{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 46px rgba(0,0,0,.55));
}
.hm-board__tag{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  fill: rgba(246,243,233,.58);
}
.hm-board__score{
  font-family: var(--font-mono);
  font-size: 82px;
  font-weight: 700;
  fill: var(--lime);
}
.hm-board__colon{
  font-family: var(--font-mono);
  font-size: 52px;
  fill: rgba(246,243,233,.4);
}
.hm-board__team{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .1em;
  fill: rgba(246,243,233,.74);
}
.hm-board__meta{
  font-family: var(--font-mono);
  font-size: 12px;
  fill: rgba(246,243,233,.5);
}
.hm-hero__shot{
  margin: 18px 0 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--hm-shadow);
}
.hm-hero__shot img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.82) brightness(.78);
}

/* 数据面板 */
.hm-data{
  padding-block: clamp(48px, 8vw, 96px);
  background: var(--ink);
}
.hm-data__head{ margin-bottom: clamp(24px, 4vw, 36px); }
.hm-tabs__bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.hm-tab{
  appearance: none;
  cursor: pointer;
  padding: 11px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(18,58,43,.6);
  color: var(--warm-72);
  font: 700 15px/1.2 var(--font-body);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.hm-tab:hover{ border-color: rgba(200,255,77,.55); }
.hm-tab[aria-selected="true"],
.hm-tab.is-active{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--char);
}
.hm-tab:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.hm-panel{
  padding: clamp(18px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--stand), rgba(7,19,15,.92));
}
.hm-panel[hidden]{ display: none; }
.hm-panel__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.hm-stat{
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(7,19,15,.55);
}
.hm-stat__label{
  margin: 0;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--warm-56);
}
.hm-stat__value{
  margin: 8px 0 16px;
  font-family: var(--font-mono);
  font-size: clamp(38px, 7vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}
.hm-stat--amber .hm-stat__value{ color: var(--amber); }
.hm-stat__unit{
  margin-left: .15em;
  font-size: 14px;
  font-weight: 500;
  color: var(--warm-72);
}
.hm-stat__bar{
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(246,243,233,.12);
  overflow: hidden;
}
.hm-stat__bar span{
  display: block;
  width: var(--v, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pitch), var(--lime));
  animation: hm-breathe 6s ease-in-out infinite;
}
.hm-stat--amber .hm-stat__bar span{
  background: linear-gradient(90deg, var(--pitch), var(--amber));
}
.hm-stat__note{
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--warm-72);
}

.hm-form{ display: grid; gap: 16px; }
.hm-form__label{
  margin: 0;
  font: 600 12px/1.6 var(--font-mono);
  letter-spacing: .12em;
  color: var(--warm-56);
}
.hm-form__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-form__item{
  flex: 1 1 92px;
  padding: 14px 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(7,19,15,.55);
}
.hm-form__item b{
  display: block;
  margin: 6px 0 4px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--warm);
}
.hm-form__round,
.hm-form__side{
  display: block;
  font: 500 11px/1.5 var(--font-mono);
  color: var(--warm-56);
}
.hm-form__item.is-win{ border-color: rgba(200,255,77,.5); }
.hm-form__item.is-win b{ color: var(--lime); }
.hm-form__item.is-draw{ border-color: rgba(53,224,200,.42); }
.hm-form__item.is-draw b{ color: var(--cyan); }
.hm-form__item.is-loss{ border-color: rgba(107,92,255,.5); }
.hm-form__item.is-loss b{ color: var(--violet); }
.hm-form__sum{
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(216,222,214,.18);
  font-size: 14px;
  line-height: 1.8;
  color: var(--warm-72);
}

.hm-breath{
  position: relative;
  margin: clamp(26px, 5vw, 46px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hm-breath img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.7) brightness(.72);
}
.hm-breath figcaption{
  position: absolute;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 24px);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(7,19,15,.76);
  backdrop-filter: blur(4px);
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .08em;
  color: var(--warm-72);
}

/* 关注列表 */
.hm-watch{
  padding-block: clamp(48px, 8vw, 96px);
  background: var(--warm);
  color: var(--char);
}
.hm-watch__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 5vw, 52px);
  align-items: center;
}
.hm-watch__text{
  margin: 16px 0 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(23,26,27,.76);
}
.hm-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(20px, 3vw, 28px) 0;
}
.hm-chip{
  appearance: none;
  cursor: pointer;
  padding: 9px 20px;
  border: 1px solid rgba(23,26,27,.22);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--char);
  font: 600 14px/1.4 var(--font-body);
  transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.hm-chip[aria-pressed="true"]{
  background: var(--pitch);
  border-color: var(--pitch);
  color: var(--warm);
  box-shadow: 0 0 0 2px rgba(200,255,77,.85);
}
.hm-chip:focus-visible{
  outline: 2px solid var(--pitch);
  outline-offset: 3px;
}
.hm-watch__foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hm-fav{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 13px 26px;
  border: 1px solid var(--char);
  border-radius: var(--r-pill);
  background: var(--char);
  color: var(--warm);
  font: 700 15px/1 var(--font-body);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.hm-fav[aria-pressed="true"]{
  background: var(--lime);
  border-color: var(--lime);
  color: var(--char);
}
.hm-fav:focus-visible{
  outline: 2px solid var(--pitch);
  outline-offset: 3px;
}
.hm-watch__stat{
  margin: 0;
  flex: 1 1 200px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(23,26,27,.66);
}
.hm-watch__stat b{
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--pitch);
}
.hm-watch__shot{
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 26px 54px rgba(7,19,15,.25);
  transform: rotate(1.4deg);
}
.hm-watch__shot img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 换设备提醒 */
.hm-alertwrap{
  padding-block: clamp(34px, 6vw, 56px);
  background: var(--ink);
}
.hm-alert{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 34px);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--lime), #a8f02f);
  color: var(--char);
  box-shadow: 0 22px 44px rgba(200,255,77,.16);
}
.hm-alert__tag{
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--char);
  color: var(--lime);
  font: 700 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
  white-space: nowrap;
}
.hm-alert__text{
  margin: 0;
  flex: 1 1 260px;
  font-size: 14px;
  line-height: 1.75;
}
.hm-alert__link{
  flex: 0 0 auto;
  padding: 10px 22px;
  border: 1px solid rgba(23,26,27,.5);
  border-radius: var(--r-pill);
  color: var(--char);
  font: 700 14px/1 var(--font-body);
  text-decoration: none;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.hm-alert__link:hover{ background: var(--char); color: var(--lime); }

/* 分区导航 */
.hm-zones{
  padding-block: clamp(48px, 8vw, 96px);
  background: linear-gradient(180deg, var(--ink), var(--stand));
}
.hm-zones__head{ margin-bottom: clamp(26px, 4vw, 44px); }
.hm-zones__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.hm-zone{
  display: block;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(18,58,43,.95), rgba(7,19,15,.96));
  color: var(--warm);
  text-decoration: none;
  transition: border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
}
.hm-zone:hover{
  border-color: var(--lime);
  transform: translateY(-4px);
}
.hm-zone:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.hm-zone__tag{
  display: inline-block;
  padding: 5px 14px;
  background: var(--amber);
  color: var(--char);
  font: 700 11px/1.5 var(--font-mono);
  letter-spacing: .1em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hm-zone h3{
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.01em;
}
.hm-zone p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--warm-72);
}

/* 观察条目 */
.hm-notes{
  padding-block: clamp(48px, 8vw, 96px);
  background: var(--ink);
}
.hm-notes__head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 38px);
}
.hm-notes__more{
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--warm-72);
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  transition: border-color .22s var(--ease), color .22s var(--ease);
}
.hm-notes__more:hover{ border-color: var(--cyan); color: var(--cyan); }
.hm-notes__list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hm-note{
  display: block;
  height: 100%;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(18,58,43,.42);
  color: var(--warm);
  text-decoration: none;
  transition: border-color .28s var(--ease), background .28s var(--ease);
}
.hm-note:hover{
  border-color: rgba(53,224,200,.6);
  background: rgba(18,58,43,.72);
}
.hm-note:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.hm-note__tag{
  display: inline-block;
  font: 600 11px/1.6 var(--font-mono);
  letter-spacing: .12em;
  color: var(--amber);
}
.hm-note h3{
  margin: 12px 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.35;
}
.hm-note p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--warm-72);
}

/* 收尾 */
.hm-cta{
  position: relative;
  padding-block: clamp(56px, 9vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 88% 20%, rgba(200,255,77,.16), transparent 62%),
    radial-gradient(ellipse 50% 60% at 12% 90%, rgba(53,224,200,.12), transparent 60%),
    var(--ink);
}
.hm-cta__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.hm-cta__text{
  margin: 16px 0 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--warm-72);
}
.hm-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 34px);
}
.hm-cta__shot{
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  transform: rotate(-2deg);
  box-shadow: var(--hm-shadow);
}
.hm-cta__shot img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.8) brightness(.8);
}

@keyframes hm-breathe{
  0%, 100%{ opacity: .85; }
  50%{ opacity: 1; }
}

@media (min-width: 720px){
  .hm-panel__grid{ grid-template-columns: repeat(2, 1fr); }
  .hm-zones__grid{ grid-template-columns: repeat(2, 1fr); }
  .hm-notes__list{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px){
  .hm-hero__grid{
    grid-template-columns: 62fr 38fr;
    align-items: center;
  }
  .hm-hero__board{ margin-right: calc(var(--pad) * -1.1); }
  .hm-hero__shot{
    margin: -22% 0 0 10%;
    transform: rotate(1.8deg);
  }
  .hm-watch__grid{ grid-template-columns: 55fr 45fr; }
  .hm-cta__grid{ grid-template-columns: 55fr 45fr; }
  .hm-cta__shot{ margin-right: calc(var(--pad) * -.8); }
  .hm-breath img{ aspect-ratio: 16 / 6; }
}

@media (min-width: 1100px){
  .hm-panel__grid{ grid-template-columns: repeat(4, 1fr); }
  .hm-zones__grid{ grid-template-columns: repeat(3, 1fr); }
  .hm-zone:nth-child(3n+2){ margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .page-home .hm-stat__bar span{ animation: none; }
  .page-home .btn,
  .page-home .hm-zone,
  .page-home .hm-note,
  .page-home .hm-tab,
  .page-home .hm-chip,
  .page-home .hm-fav{
    transition: none;
  }
  .page-home .hm-zone:hover,
  .page-home .btn:hover{ transform: none; }
  .page-home .hm-hero__title,
  .page-home .hm-hero__shot,
  .page-home .hm-watch__shot,
  .page-home .hm-cta__shot{ transform: none; }
}

.page-home {
  --v: 1rem;
}