.page-home{
  --home-rule: rgba(11,42,62,.16);
  --home-rule-dark: rgba(232,238,240,.14);
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-home .section{
  position: relative;
  padding-block: clamp(40px,6vw,88px);
}
.page-home .section--paper{ background: var(--paper); }

.page-home .sec-head{
  position: relative;
  margin-bottom: clamp(20px,3vw,36px);
}
.page-home .sec-head--tight{ margin-bottom: clamp(16px,2.4vw,28px); }
.page-home .section-index{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(40px,7vw,84px);
  line-height: .9;
  letter-spacing: -.03em;
  color: rgba(11,42,62,.12);
  margin-bottom: 10px;
}
.page-home .sec-head h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px,4.4vw,48px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 6px 0 12px;
  max-width: 22em;
}
.page-home .sec-head__lead{
  font-size: 16px;
  line-height: 1.8;
  color: var(--reef);
  max-width: 34em;
  margin: 0;
}
.page-home .sec-head--onDark h2{ color: var(--sand); }
.page-home .sec-head--onDark .overline{ color: var(--gold); }
.page-home .sec-head--onDark .section-index{ color: rgba(232,238,240,.16); }

/* ---------- 首屏 ---------- */
.page-home .hero{
  position: relative;
  overflow: hidden;
  background: var(--deep-sea);
  color: var(--sand);
  padding: clamp(24px,4vw,48px) 0 clamp(40px,6vw,80px);
}
.page-home .hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--coral);
}
.page-home .hero__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,3vw,32px);
}
.page-home .hero__rail{
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-home .hero__rail-note{ color: var(--gold); }
.page-home .hero__vertical{
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--reef-soft);
  text-transform: uppercase;
}
.page-home .hero__kicker{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--coral);
}
.page-home .hero h1{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px,7.2vw,74px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: var(--sand);
}
.page-home .hero__lead{
  margin: 0;
  font-size: clamp(15px,1.6vw,17px);
  line-height: 1.85;
  color: rgba(244,239,230,.82);
  max-width: 30em;
}
.page-home .hero__index{
  list-style: none;
  margin: clamp(22px,3vw,32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--home-rule-dark);
}
.page-home .hero__index li{ border-bottom: 1px solid var(--home-rule-dark); }
.page-home .hero__index a{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 4px 12px;
  padding: 14px 6px;
  color: var(--sand);
  text-decoration: none;
  transition: background .2s ease, padding-left .2s ease;
}
.page-home .hero__index a:hover,
.page-home .hero__index a:focus-visible{
  background: rgba(255,107,61,.12);
  padding-left: 14px;
}
.page-home .hero__index-no{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--coral);
  line-height: 1.8;
}
.page-home .hero__index-text{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.page-home .hero__index-note{
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--reef-soft);
}
.page-home .hero__update{
  display: flex;
  align-items: center;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--reef-soft);
}
.page-home .hero__dot{
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--cyan);
  animation: home-pulse 2.4s ease-in-out infinite;
}
@keyframes home-pulse{
  0%,100%{ opacity: .35; }
  50%{ opacity: 1; }
}

/* ---------- 图片组件 ---------- */
.page-home .figure{
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--night);
}
.page-home .figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-home .figure--4x5{ aspect-ratio: 4 / 5; }
.page-home .figure--1x1{ aspect-ratio: 1 / 1; }
.page-home .figure__wash{
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(11,42,62,.05), rgba(6,26,40,.72));
  pointer-events: none;
}
.page-home .figure__grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34,224,214,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,224,214,.16) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.page-home .figure__cap{
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--sand);
  background: rgba(6,26,40,.76);
  border-left: 2px solid var(--coral);
}
.page-home .hero__figure{
  border-color: rgba(244,239,230,.24);
  box-shadow: 10px 10px 0 rgba(6,26,40,.55);
}

/* ---------- 轮次索引 ---------- */
.page-home .rounds{ overflow: hidden; }
.page-home .rounds__bg{
  position: absolute;
  top: 0;
  right: 0;
  width: min(52%,480px);
  height: auto;
  opacity: .08;
  filter: grayscale(1) contrast(1.1);
  pointer-events: none;
}
.page-home .rounds .wrap{
  position: relative;
  z-index: 1;
}
.page-home .rounds__filter{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: clamp(18px,2.6vw,28px);
}
.page-home .rounds__filter-label{
  margin: 0;
  color: var(--reef);
}
.page-home .rounds__leagues{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  max-width: 100%;
}
.page-home .rounds__leagues .league-pill{
  flex: 0 0 auto;
  scroll-snap-align: start;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.page-home .rounds__leagues .league-pill:hover{ background: var(--coral-soft); }
.page-home .rounds__leagues .league-pill[aria-pressed="true"]{
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.page-home .rounds__body{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px,3vw,32px);
}
.page-home .timeline{
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--home-rule);
}
.page-home .timeline li{
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
}
.page-home .timeline a{
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--home-rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--reef);
  transition: border-color .18s ease, background .18s ease;
}
.page-home .timeline a:hover{ border-color: var(--coral); }
.page-home .timeline__no{
  font-size: 16px;
  color: var(--ink);
}
.page-home .timeline__txt{ font-size: 12px; }
.page-home .timeline li.is-current a{
  border-color: var(--coral);
  background: var(--coral-soft);
  color: var(--coral-deep);
}
.page-home .timeline li.is-current .timeline__no{ color: var(--coral-deep); }

.page-home .round-table{
  border: 1px solid var(--line);
  background: var(--sand);
  box-shadow: var(--shell);
}
.page-home .round-table__head{ display: none; }
.page-home .round-table__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-home .round-row{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "no fee"
    "meta meta"
    "stat stat";
  gap: 4px 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--home-rule);
  transition: background .18s ease;
}
.page-home .round-row:first-child{ border-top: 0; }
.page-home .round-row:hover{ background: var(--coral-soft); }
.page-home .round-row__no{ grid-area: no; font-size: 13px; color: var(--reef); }
.page-home .round-row__meta{ grid-area: meta; font-size: 14px; font-weight: 600; }
.page-home .round-row__stat{ grid-area: stat; font-size: 13px; color: var(--reef); }
.page-home .round-row__fee{
  grid-area: fee;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--coral-deep);
}
.page-home .round-row.is-current{
  background: rgba(255,107,61,.08);
  box-shadow: inset 3px 0 0 var(--coral);
}

/* ---------- 控球率专区 ---------- */
.page-home .possession{
  background: var(--deep-sea);
  color: var(--sand);
  overflow: hidden;
}
.page-home .possession .overline{ color: var(--gold); }
.page-home .possession__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px,4vw,44px);
}
.page-home .possession h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px,4.6vw,52px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 8px 0 16px;
  color: var(--sand);
}
.page-home .possession__copy p{
  margin: 0;
  color: rgba(244,239,230,.8);
  line-height: 1.85;
  max-width: 32em;
}
.page-home .possession__switch{
  display: inline-flex;
  margin: 20px 0 14px;
  border: 1px solid var(--home-rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.page-home .possession__tab{
  font: inherit;
  font-size: 13px;
  padding: 10px 18px;
  border: 0;
  border-right: 1px solid var(--home-rule-dark);
  background: transparent;
  color: var(--sand);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.page-home .possession__tab:last-child{ border-right: 0; }
.page-home .possession__tab:hover{ background: rgba(34,224,214,.14); }
.page-home .possession__tab.is-active{ background: var(--coral); color: #fff; }
.page-home .possession__note{
  font-size: 14px;
  color: rgba(244,239,230,.65);
  margin-bottom: 20px;
}
.page-home .possession__visual{
  display: grid;
  gap: 16px;
}
.page-home .heat{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-dark);
  background: var(--night);
}
.page-home .heat__bg{ fill: var(--night); }
.page-home .heat__rule line{ stroke: rgba(34,224,214,.18); stroke-width: 1; }
.page-home .heat__zone rect{ fill: var(--cyan); }
.page-home .heat__path{
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
  stroke-linejoin: round;
}
.page-home .heat__dots circle{ fill: var(--coral); }
.page-home .possession__phone{
  width: min(64%,240px);
  margin-left: auto;
  border-color: rgba(34,224,214,.35);
  box-shadow: 12px 12px 0 rgba(6,26,40,.6);
}

/* ---------- 费用速览 ---------- */
.page-home .pricing__bars{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.page-home .rate-bar{
  padding: clamp(18px,2.4vw,28px);
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  background: var(--sand);
  box-shadow: var(--shell);
}
.page-home .rate-bar--season{
  border-left-color: var(--moss);
  background: var(--paper);
}
.page-home .rate-bar__label{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--reef);
}
.page-home .rate-bar__value{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: clamp(28px,4vw,44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--deep-sea);
  font-variant-numeric: tabular-nums;
}
.page-home .rate-bar__value span{
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--reef);
}
.page-home .rate-bar__note{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--reef);
}
.page-home .pricing__link{ margin-top: clamp(20px,3vw,30px); }
.page-home .pricing__ask{
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--reef);
}
.page-home .pricing__ask a{
  color: var(--coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 会员三档 ---------- */
.page-home .tiers{
  background: var(--night);
  color: var(--sand);
}
.page-home .tiers__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.page-home .tier{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px,2.4vw,28px);
  border: 1px solid var(--line-dark);
  background: var(--deep-sea);
  box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.page-home .tier--pro{
  background: var(--sand);
  color: var(--ink);
  border-color: var(--coral);
  box-shadow: 0 6px 0 var(--coral);
}
.page-home .tier__tag{
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  border: 1px solid var(--moss);
  color: var(--cyan);
  background: rgba(23,86,74,.5);
  border-radius: var(--radius);
}
.page-home .tier--pro .tier__tag{
  border-color: var(--coral);
  color: var(--coral-deep);
  background: var(--coral-soft);
}
.page-home .tier__price{
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(32px,4.4vw,44px);
  font-weight: 700;
  line-height: 1;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}
.page-home .tier--pro .tier__price{ color: var(--deep-sea); }
.page-home .tier__price span{
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--reef-soft);
}
.page-home .tier--pro .tier__price span{ color: var(--reef); }
.page-home .tier__season{
  margin: -6px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--reef-soft);
}
.page-home .tier--pro .tier__season{ color: var(--reef); }
.page-home .tier__list{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.page-home .tier__list li{
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244,239,230,.84);
}
.page-home .tier__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 2px;
  background: var(--coral);
}
.page-home .tier--pro .tier__list li{ color: var(--ink); }
.page-home .tier__for{
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--home-rule-dark);
  font-size: 13px;
  line-height: 1.7;
  color: var(--reef-soft);
}
.page-home .tier--pro .tier__for{
  border-top-color: var(--home-rule);
  color: var(--reef);
}
.page-home .tiers__foot{
  margin: clamp(22px,3vw,32px) 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(244,239,230,.78);
  max-width: 46em;
}
.page-home .tiers__foot a{
  color: var(--coral-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 赛事覆盖 ---------- */
.page-home .coverage__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px,4vw,40px);
}
.page-home .coverage h2{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px,4.2vw,44px);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 6px 0 14px;
}
.page-home .coverage__copy p{
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--reef);
  max-width: 34em;
}
.page-home .coverage__list{
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px 14px;
}
.page-home .coverage__list a{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--home-rule);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  transition: color .18s ease, border-color .18s ease;
}
.page-home .coverage__list a:hover{
  color: var(--coral-deep);
  border-color: var(--coral);
}
.page-home .coverage__list .mono{
  font-size: 11px;
  color: var(--reef);
}
.page-home .coverage__foot{
  margin: 16px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--reef);
}

/* ---------- 本期手记 ---------- */
.page-home .notes{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--home-rule);
}
.page-home .notes li{ border-bottom: 1px solid var(--home-rule); }
.page-home .notes a{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background .18s ease, padding-left .18s ease;
}
.page-home .notes a:hover{
  background: var(--coral-soft);
  padding-left: 12px;
}
.page-home .notes__round{
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--coral-deep);
}
.page-home .notes h3{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px,2vw,22px);
  line-height: 1.45;
}
.page-home .notes p{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--reef);
}
.page-home .save-hint{
  display: grid;
  gap: 16px;
  margin-top: clamp(24px,3vw,36px);
  padding: clamp(20px,3vw,32px);
  background: var(--deep-sea);
  color: var(--sand);
  border: 1px solid var(--line);
  border-top: 3px solid var(--coral);
}
.page-home .save-hint p{
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(244,239,230,.85);
}
.page-home .save-hint p a{
  color: var(--coral-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-home .save-hint .btn{
  justify-self: start;
  border: 1px solid var(--coral);
  color: var(--sand);
}

/* ---------- 平板 ---------- */
@media (min-width: 768px){
  .page-home .hero__index a{
    grid-template-columns: 34px 1fr auto;
    align-items: center;
  }
  .page-home .hero__index-note{ grid-column: auto; }

  .page-home .rounds__body{
    grid-template-columns: 190px 1fr;
    align-items: start;
  }
  .page-home .timeline{
    display: block;
    border-bottom: 0;
    border-left: 1px solid var(--line-strong);
    padding: 4px 0 4px 18px;
    overflow: visible;
  }
  .page-home .timeline li{ margin-bottom: 14px; }
  .page-home .timeline li::before{
    content: "";
    position: absolute;
    left: -24px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sand);
    border: 1px solid var(--line-strong);
  }
  .page-home .timeline li.is-current::before{
    background: var(--coral);
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(255,107,61,.16);
  }
  .page-home .timeline a{
    border: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    display: block;
  }
  .page-home .timeline li.is-current a{ background: none; }
  .page-home .timeline__no{ display: block; font-size: 20px; }
  .page-home .timeline__txt{ display: block; font-size: 12px; margin-top: 2px; }

  .page-home .round-table__head{
    display: grid;
    grid-template-columns: 92px 1.1fr 1.2fr 92px;
    gap: 12px;
    padding: 11px 16px;
    background: var(--night);
    color: var(--reef-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
  }
  .page-home .round-row{
    grid-template-columns: 92px 1.1fr 1.2fr 92px;
    grid-template-areas: none;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
  }
  .page-home .round-row__no,
  .page-home .round-row__meta,
  .page-home .round-row__stat,
  .page-home .round-row__fee{ grid-area: auto; }
  .page-home .round-row__fee{ text-align: right; }

  .page-home .coverage__list{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .page-home .notes a{
    grid-template-columns: 118px 1fr;
    align-items: baseline;
  }
  .page-home .notes h3,
  .page-home .notes p{ grid-column: 2; }
  .page-home .save-hint{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width: 900px){
  .page-home .hero__grid{
    grid-template-columns: repeat(12,1fr);
    align-items: start;
  }
  .page-home .hero__rail{
    grid-column: 1 / span 1;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
  }
  .page-home .hero__vertical{
    writing-mode: vertical-rl;
    letter-spacing: .42em;
    margin-top: 20px;
  }
  .page-home .hero__copy{ grid-column: 2 / span 5; }
  .page-home .hero__figure{ grid-column: 7 / span 6; }

  .page-home .possession__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }
  .page-home .possession__phone{ width: min(66%,260px); }

  .page-home .pricing__bars{ grid-template-columns: 1fr 1fr; }

  .page-home .tiers__grid{ grid-template-columns: repeat(3,1fr); }
  .page-home .tier--pro{ transform: translateY(-12px); }

  .page-home .coverage__grid{
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
  .page-home .coverage__list{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1100px){
  .page-home .rounds__body{ grid-template-columns: 210px 1fr; }
  .page-home .coverage__grid{ grid-template-columns: 4fr 8fr; }
}

@media (prefers-reduced-motion: reduce){
  .page-home .hero__dot{ animation: none; opacity: 1; }
  .page-home .hero__index a,
  .page-home .timeline a,
  .page-home .round-row,
  .page-home .notes a,
  .page-home .coverage__list a{ transition: none; }
  .page-home .tier--pro{ transform: none; }
}
<<<END>>>