.page-home{
  --home-pad:clamp(20px,5vw,56px);
  --home-gap:clamp(16px,2.6vw,28px);
  --home-sec:clamp(56px,8.5vw,104px);
  display:block;
  position:relative;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.page-home img{max-width:100%;height:auto;display:block}
.page-home ul,.page-home ol{list-style:none;margin:0;padding:0}
.page-home p{margin:0}

.page-home [data-league="england"]{--ch:var(--indigo);--ch-soft:rgba(71,99,228,.18)}
.page-home [data-league="spain"]{--ch:var(--sand);--ch-soft:rgba(217,168,92,.18)}
.page-home [data-league="italy"]{--ch:var(--berry);--ch-soft:rgba(216,67,79,.18)}
.page-home [data-league="germany"]{--ch:var(--citrus);--ch-soft:rgba(240,145,47,.18)}
.page-home [data-league="france"]{--ch:var(--kiwi);--ch-soft:rgba(47,191,113,.18)}

.page-home .home-section{
  position:relative;
  padding:var(--home-sec) 0;
  border-top:1px solid var(--line);
}
.page-home .home-section__inner{
  max-width:var(--shell-max);
  margin:0 auto;
  padding:0 var(--home-pad);
}
.page-home .home-section__title{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(26px,4.6vw,44px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:12px 0 0;
  color:var(--paper);
}
.page-home .home-section__note{
  margin-top:14px;
  max-width:38em;
  font-size:15px;
  line-height:1.85;
  color:var(--mist);
}

/* ---------- 首屏 ---------- */
.page-home .home-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  overflow:hidden;
  background:var(--grad-deep);
}
.page-home .home-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:80px;
  background:linear-gradient(180deg,transparent,rgba(12,16,14,.92));
  z-index:3;
  pointer-events:none;
}
.page-home .home-hero__bg{
  grid-area:1/1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  opacity:.38;
  filter:saturate(.82) contrast(1.06);
  z-index:0;
}
.page-home .home-hero__scrim{
  grid-area:1/1;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(12,16,14,.78) 0%,rgba(12,16,14,.62) 38%,rgba(12,16,14,.96) 100%),
    radial-gradient(110% 70% at 88% 12%,rgba(47,191,113,.22),transparent 62%),
    radial-gradient(90% 60% at 4% 92%,rgba(71,99,228,.18),transparent 60%);
}
.page-home .home-hero__inner{
  grid-area:1/1;
  z-index:2;
  width:100%;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:clamp(88px,16vh,180px) var(--home-pad) clamp(48px,7vw,84px);
  display:grid;
  gap:clamp(28px,4.5vw,56px);
  align-content:end;
  box-sizing:border-box;
}
.page-home .home-hero__context{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}
.page-home .home-hero__context-note{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist);
  padding-left:14px;
  border-left:1px solid var(--line-strong);
}
.page-home .home-hero__title{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(46px,12vw,108px);
  line-height:.92;
  letter-spacing:-.03em;
  margin:clamp(14px,2.4vw,26px) 0 0;
  color:var(--paper);
  text-shadow:0 4px 40px rgba(12,16,14,.7);
}
.page-home .home-hero__sub{
  margin-top:14px;
  font-family:var(--font-cond);
  font-size:clamp(15px,2.2vw,20px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--flesh);
}
.page-home .home-hero__lede{
  margin-top:clamp(16px,2.4vw,22px);
  max-width:34em;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.9;
  color:rgba(243,247,244,.82);
}
.page-home .home-hero__actions{
  margin-top:clamp(22px,3.4vw,34px);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-home .home-hero__hint{
  margin-top:16px;
  font-size:13px;
  line-height:1.8;
  color:var(--mist);
}
.page-home .home-hero__hint-link{
  color:var(--flesh);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-home .home-hero__hint-link:hover{color:var(--kiwi)}

.page-home .home-hero__index{
  align-self:end;
  padding:20px 18px;
  border:1px solid var(--line);
  border-top:2px solid var(--kiwi);
  background:rgba(20,28,24,.72);
  backdrop-filter:blur(8px);
}
.page-home .home-hero__index-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--mist);
  margin-bottom:12px;
}
.page-home .home-league-strip__item + .home-league-strip__item{margin-top:2px}
.page-home .home-league-strip__link{
  --ch:var(--kiwi);
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 8px;
  text-decoration:none;
  color:rgba(243,247,244,.9);
  border-left:2px solid transparent;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.page-home .home-league-strip__link:hover,
.page-home .home-league-strip__link:focus-visible{
  background:var(--ch-soft);
  border-left-color:var(--ch);
  outline:none;
}
.page-home .home-league-strip__dot{
  flex:0 0 auto;
  width:9px;
  height:9px;
  background:var(--ch);
  transform:rotate(45deg);
}
.page-home .home-league-strip__name{
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
}
.page-home .home-league-strip__memo{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.04em;
  color:var(--mist);
  text-align:right;
}
.page-home .home-hero__index-cta{
  display:inline-block;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--flesh);
  text-decoration:none;
}
.page-home .home-hero__index-cta:hover{color:var(--kiwi)}

/* ---------- 页内章节条 ---------- */
.page-home .home-toc{
  position:sticky;
  top:0;
  z-index:24;
  background:rgba(12,16,14,.88);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.page-home .home-toc__list{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:8px var(--home-pad);
  box-sizing:border-box;
}
.page-home .home-toc__list::-webkit-scrollbar{display:none}
.page-home .home-toc__link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  white-space:nowrap;
  font-size:13px;
  color:var(--mist);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.page-home .home-toc__link:hover{color:var(--paper)}
.page-home .home-toc__link.is-active{
  color:var(--flesh);
  border-bottom-color:var(--kiwi);
}

/* ---------- 联赛频道 ---------- */
.page-home .home-channels__head{
  display:grid;
  gap:18px;
}
.page-home .home-channels__list{
  margin-top:clamp(26px,4.4vw,44px);
  display:grid;
  gap:14px;
}
.page-home .home-channel{
  --ch:var(--kiwi);
  position:relative;
  padding:22px 20px 24px;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--ch);
  transition:transform .24s var(--ease),border-color .24s var(--ease);
}
.page-home .home-channel:hover{transform:translateY(-3px)}
.page-home .home-channel__code{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--ch);
}
.page-home .home-channel__name{
  margin:8px 0 0;
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(20px,3vw,26px);
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-home .home-channel__desc{
  margin-top:12px;
  font-size:14px;
  line-height:1.82;
  color:var(--mist);
}
.page-home .home-channel__memo{
  margin-top:16px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ch);
}

/* ---------- 赛季数据 ---------- */
.page-home .home-board__grid{
  display:grid;
  gap:clamp(26px,4vw,44px);
}
.page-home .home-board__figure{margin:22px 0 0}
.page-home .home-board__units{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.page-home .home-board__unit{
  padding:18px 16px 20px;
  background:linear-gradient(170deg,rgba(243,247,244,.07),rgba(243,247,244,.015));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(243,247,244,.06);
}
.page-home .home-board__num{
  display:block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,5.4vw,42px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--flesh);
}
.page-home .home-board__label{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--mist);
}

.page-home .home-offside{
  position:relative;
  height:2px;
  margin:0 var(--home-pad);
  overflow:hidden;
}
.page-home .home-offside::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--kiwi),var(--indigo),var(--sand),transparent);
  transform:skewY(-1.4deg);
  opacity:.55;
}

/* ---------- 订阅球队 ---------- */
.page-home .home-sub__grid{
  display:grid;
  gap:clamp(26px,4vw,48px);
}
.page-home .home-sub__media{margin:0}
.page-home .home-sub__body .home-sub__list{
  margin-top:clamp(22px,3.4vw,30px);
  border-top:1px solid var(--line);
}
.page-home .home-sub__item{
  display:flex;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.page-home .home-sub__idx{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--kiwi);
  padding-top:2px;
}
.page-home .home-sub__item-title{
  font-size:15px;
  font-weight:700;
  color:var(--paper);
  letter-spacing:.01em;
}
.page-home .home-sub__item-desc{
  margin-top:5px;
  font-size:13.5px;
  line-height:1.78;
  color:var(--mist);
}
.page-home .home-sub__foot{
  margin-top:18px;
  font-size:13px;
  line-height:1.8;
  color:rgba(143,227,176,.9);
}
.page-home .home-sub__body .btn{margin-top:20px}

/* ---------- 最新复盘 ---------- */
.page-home .home-notes__head{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
}
.page-home .home-notes__more{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--flesh);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid rgba(143,227,176,.4);
}
.page-home .home-notes__more:hover{color:var(--kiwi);border-color:var(--kiwi)}
.page-home .home-notes__grid{
  margin-top:clamp(24px,4vw,40px);
  display:grid;
  gap:clamp(24px,4vw,44px);
}
.page-home .home-notes__figure{margin:0}
.page-home .home-timeline{position:relative;padding-left:24px}
.page-home .home-timeline::before{
  content:"";
  position:absolute;
  left:4px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg,var(--kiwi),var(--indigo),rgba(12,16,14,0));
}
.page-home .home-timeline__item{
  position:relative;
  padding:0 0 26px;
}
.page-home .home-timeline__item:last-child{padding-bottom:0}
.page-home .home-timeline__item::before{
  content:"";
  position:absolute;
  left:-24px;
  top:6px;
  width:10px;
  height:10px;
  background:var(--panel);
  border:2px solid var(--kiwi);
  transform:rotate(45deg);
}
.page-home .home-timeline__when{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--mist);
}
.page-home .home-timeline__title{
  margin:6px 0 0;
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(17px,2.4vw,21px);
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-home .home-timeline__desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.85;
  color:var(--mist);
}

/* ---------- 为什么长期跟 ---------- */
.page-home .home-why__grid{
  margin-top:clamp(26px,4.4vw,44px);
  display:grid;
  gap:14px;
}
.page-home .home-why__card{
  position:relative;
  padding:24px 20px 26px;
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
}
.page-home .home-why__card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:110px;
  height:110px;
  background:var(--why-accent,var(--kiwi));
  opacity:.12;
  transform:rotate(45deg);
}
.page-home .home-why__card--lookup{--why-accent:var(--indigo)}
.page-home .home-why__card--compare{--why-accent:var(--citrus)}
.page-home .home-why__card--trace{--why-accent:var(--kiwi)}
.page-home .home-why__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--why-accent,var(--kiwi));
}
.page-home .home-why__card-title{
  margin:12px 0 0;
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(18px,2.8vw,23px);
  line-height:1.25;
  color:var(--paper);
}
.page-home .home-why__card-desc{
  margin-top:12px;
  font-size:14px;
  line-height:1.86;
  color:var(--mist);
}

/* ---------- 开始使用 ---------- */
.page-home .home-start__panel{
  display:grid;
  gap:clamp(22px,3.4vw,40px);
  padding:clamp(26px,4.4vw,48px);
  background:linear-gradient(150deg,rgba(47,191,113,.16),rgba(71,99,228,.10) 55%,rgba(12,16,14,0));
  border:1px solid var(--line-strong);
  clip-path:polygon(0 22px,22px 0,100% 0,100% 100%,0 100%);
}
.page-home .home-start__actions{
  display:grid;
  gap:12px;
  align-content:start;
}
.page-home .home-start__links{
  margin-top:clamp(22px,3.4vw,32px);
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.page-home .home-start__link{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 16px;
  font-size:13.5px;
  color:rgba(243,247,244,.86);
  text-decoration:none;
  background:rgba(243,247,244,.05);
  border:1px solid var(--line);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.page-home .home-start__link:hover{
  background:rgba(47,191,113,.14);
  border-color:rgba(47,191,113,.5);
  color:var(--paper);
}

@media (min-width:768px){
  .page-home .home-channels__head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    gap:clamp(20px,4vw,56px);
  }
  .page-home .home-channels__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .home-board__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .page-home .home-board__units{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-home .home-sub__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .page-home .home-notes__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .page-home .home-why__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .home-start__panel{grid-template-columns:minmax(0,1fr) minmax(230px,.55fr);align-items:center}
}

@media (min-width:1024px){
  .page-home .home-hero__inner{
    grid-template-columns:minmax(0,1.6fr) minmax(250px,.72fr);
    align-items:end;
    gap:clamp(32px,5vw,80px);
  }
  .page-home .home-channels__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-home .home-channels__list > :nth-child(4),
  .page-home .home-channels__list > :nth-child(5){grid-column:span 1}
  .page-home .home-board__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px)}
  .page-home .home-board__units{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .page-home .home-sub__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px)}
  .page-home .home-why__card{padding:30px 24px 34px}
}

@media (prefers-reduced-motion:reduce){
  .page-home *,
  .page-home *::before,
  .page-home *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .page-home .home-channel:hover{transform:none}
}
<<<END>>>