.page-home{
  background:#12181F;
  color:#F0F4F5;
  font-family:var(--font-b);
  overflow-x:hidden;
}
.page-home img{
  max-width:100%;
  height:auto;
}
.page-home .home-section,
.page-home .home-cover{
  scroll-margin-top:5rem;
}

/* ===== 封面 ===== */
.page-home .home-cover{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg, rgba(10,61,46,.96) 0%, rgba(14,23,29,.94) 52%, rgba(18,24,31,1) 100%);
  padding:var(--space-7) 0 var(--space-6);
  overflow:hidden;
}
.page-home .home-cover__inner{
  position:relative;
  z-index:1;
}
.page-home .home-context{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:var(--c-text-dim);
  font-size:.875rem;
  margin-bottom:var(--space-6);
  letter-spacing:.02em;
}
.page-home .home-context__label{
  font-weight:700;
  color:var(--c-accent);
}
.page-home .home-context__divider{
  color:var(--c-line);
}
.page-home .home-cover__kicker{
  color:var(--c-accent);
  font-family:var(--font-h);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:var(--space-4);
}
.page-home .home-cover__title{
  font-family:var(--font-h);
  font-size:clamp(2.125rem, 5vw, 3.75rem);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 var(--space-5);
  max-width:15em;
  color:#F6FBF9;
}
.page-home .home-cover__lead{
  color:var(--c-text-dim);
  max-width:58rem;
  font-size:1rem;
  line-height:1.85;
  margin-bottom:var(--space-6);
}
.page-home .home-cover__aside{
  margin-bottom:var(--space-7);
}
.page-home .home-aside-note{
  display:inline-block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--c-text-dim);
  border-left:3px solid var(--c-accent);
  padding-left:var(--space-3);
  margin-bottom:var(--space-4);
}
.page-home .home-spec-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-3);
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .home-spec-list__item{
  background:rgba(27,42,46,.72);
  border:1px solid rgba(46,139,87,.34);
  padding:var(--space-4);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.page-home .home-spec-list__value{
  display:block;
  font-family:var(--font-d);
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  font-weight:700;
  line-height:1.1;
  color:var(--c-data);
}
.page-home .home-spec-list__label{
  display:block;
  color:var(--c-text-dim);
  font-size:.75rem;
  margin-top:var(--space-2);
}
.page-home .home-directory{
  border-top:1px solid rgba(46,139,87,.4);
  padding-top:var(--space-5);
}
.page-home .home-directory__title{
  font-family:var(--font-h);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--c-text-dim);
  margin:0 0 var(--space-4);
}
.page-home .home-directory__list{
  display:grid;
  gap:var(--space-3);
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .home-directory__link{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  text-decoration:none;
  color:var(--c-text);
  background:rgba(27,42,46,.66);
  padding:var(--space-4) var(--space-5);
  border-left:3px solid var(--c-line);
  transition:border-color var(--trans-base), background var(--trans-base), transform var(--trans-base);
}
.page-home .home-directory__link:hover,
.page-home .home-directory__link:focus-visible{
  border-left-color:var(--c-accent);
  background:rgba(255,107,53,.1);
  transform:translateX(4px);
}
.page-home .home-directory__num{
  font-family:var(--font-d);
  font-size:1rem;
  font-weight:700;
  color:var(--c-accent);
}
.page-home .home-directory__text{
  flex:1;
  font-weight:600;
}
.page-home .home-directory__arrow{
  color:var(--c-line);
  transition:color var(--trans-fast);
}
.page-home .home-directory__link:hover .home-directory__arrow{
  color:var(--c-accent);
}
.page-home .home-cover__stream{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  gap:clamp(1rem, 3vw, 3rem);
  opacity:.4;
}
.page-home .home-cover__stream span{
  display:block;
  writing-mode:vertical-rl;
  font-family:var(--font-d);
  font-size:clamp(.8rem, 1.4vw, 1.25rem);
  color:rgba(0,212,255,.14);
  text-shadow:0 0 24px rgba(0,212,255,.22);
  animation:homeStreamGlide 18s ease-in-out infinite alternate;
}
.page-home .home-cover__stream span:nth-child(even){
  animation-duration:23s;
  animation-direction:alternate-reverse;
}

/* ===== 章节通用 ===== */
.page-home .home-section{
  padding:var(--space-7) 0 var(--space-8);
  position:relative;
}
.page-home .home-section--flow{
  background:#0E171D;
}
.page-home .home-section--shots{
  background:linear-gradient(180deg, #0E171D 0%, #0A3D2E 100%);
}
.page-home .home-section--goals{
  background:#101820;
}
.page-home .home-section--expert{
  background:#0A2F25;
}
.page-home .home-section--quicknav{
  background:#0E171D;
}
.page-home .section-head{
  max-width:70rem;
  margin-bottom:var(--space-7);
}
.page-home .section-head__meta{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-d);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--c-accent);
  background:rgba(255,107,53,.1);
  border-left:3px solid var(--c-accent);
  padding:var(--space-2) var(--space-3);
  margin-bottom:var(--space-4);
}
.page-home .section-head__title{
  font-family:var(--font-h);
  font-size:clamp(1.75rem, 3.2vw, 3rem);
  line-height:1.16;
  margin:0 0 var(--space-4);
  color:var(--c-text);
}
.page-home .section-head__desc{
  color:var(--c-text-dim);
  max-width:44rem;
  font-size:1rem;
  line-height:1.8;
  margin:0;
}

/* ===== 01 实时战况 ===== */
.page-home .live-tabs{
  margin-bottom:var(--space-6);
}
.page-home .live-tabs__nav{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  border-bottom:1px solid rgba(46,139,87,.4);
  padding-bottom:var(--space-3);
  margin-bottom:var(--space-5);
}
.page-home .live-tabs__btn{
  appearance:none;
  background:transparent;
  border:1px solid rgba(46,139,87,.5);
  color:var(--c-text-dim);
  padding:var(--space-3) var(--space-5);
  font-family:var(--font-b);
  font-size:.9375rem;
  font-weight:700;
  cursor:pointer;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition:background var(--trans-base), color var(--trans-base), border-color var(--trans-base);
}
.page-home .live-tabs__btn[aria-selected="true"]{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:#0A1418;
}
.page-home .live-tabs__panel[hidden]{
  display:none;
}
.page-home .live-match-grid{
  display:grid;
  gap:var(--space-4);
}
.page-home .live-match{
  background:var(--c-panel);
  border:1px solid rgba(46,139,87,.3);
  padding:var(--space-5);
  position:relative;
  overflow:hidden;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.page-home .live-match::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--c-accent), var(--c-data), transparent);
  opacity:.7;
}
.page-home .live-match__topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--space-4);
}
.page-home .live-match__scoreline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.page-home .live-match__team{
  font-weight:700;
  font-size:1rem;
  color:var(--c-text);
}
.page-home .live-match__team--away{
  text-align:right;
}
.page-home .live-match__score{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-d);
  font-size:2rem;
  font-weight:700;
  color:var(--c-data);
}
.page-home .live-match__colon{
  color:var(--c-text-dim);
}
.page-home .live-match__metrics{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  color:var(--c-text-dim);
  font-size:.8125rem;
}
.page-home .live-match__metrics .data-text{
  color:var(--c-text);
}
.page-home .live-match__bar{
  height:4px;
  background:rgba(255,255,255,.08);
  margin-top:var(--space-4);
}
.page-home .live-match__bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--c-line), var(--c-data));
}
.page-home .video-strip{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  background:linear-gradient(90deg, rgba(10,61,46,.6), rgba(18,24,31,.65));
  border:1px solid rgba(46,139,87,.35);
  padding:var(--space-5);
  margin-top:var(--space-5);
}
.page-home .video-strip__text h3{
  font-family:var(--font-h);
  font-size:1.25rem;
  margin:0 0 var(--space-2);
  color:var(--c-text);
}
.page-home .video-strip__text p{
  margin:0;
  color:var(--c-text-dim);
  font-size:.9375rem;
  line-height:1.7;
}
.page-home .video-strip__labels{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .video-strip__labels li{
  background:rgba(0,212,255,.1);
  border:1px solid rgba(0,212,255,.24);
  color:var(--c-text);
  font-size:.8125rem;
  padding:var(--space-2) var(--space-3);
}
.page-home .video-strip__labels .data-text{
  color:var(--c-data);
}

/* ===== 02 射门统计 ===== */
.page-home .shots-layout{
  display:grid;
  gap:var(--space-7);
  align-items:center;
}
.page-home .shots-layout__kicker{
  font-family:var(--font-d);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--c-accent);
  margin:0 0 var(--space-5);
}
.page-home .shot-timeline{
  list-style:none;
  margin:0;
  padding:0;
}
.page-home .shot-timeline .timeline__item{
  position:relative;
  padding-left:30px;
  padding-bottom:var(--space-5);
}
.page-home .shot-timeline .timeline__item:last-child{
  padding-bottom:0;
}
.page-home .shot-timeline .timeline__item::before{
  content:"";
  position:absolute;
  top:8px;
  left:7px;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--c-accent), rgba(46,139,87,.5), transparent);
}
.page-home .shot-timeline .timeline__item:last-child::before{
  display:none;
}
.page-home .shot-timeline .timeline__point{
  position:absolute;
  top:6px;
  left:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--c-bg);
  border:3px solid var(--c-accent);
  box-shadow:0 0 0 3px rgba(255,107,53,.18);
}
.page-home .shot-timeline .timeline__date{
  display:block;
  font-family:var(--font-d);
  font-size:.8125rem;
  font-weight:700;
  color:var(--c-accent);
  margin-bottom:4px;
}
.page-home .shot-event__title{
  font-weight:700;
  color:var(--c-text);
  margin:0 0 2px;
}
.page-home .shot-event__meta{
  font-family:var(--font-d);
  font-size:.8125rem;
  color:var(--c-text-dim);
  margin:0;
}
.page-home .shot-chart{
  margin:0;
  min-width:0;
}
.page-home .shot-chart__caption{
  background:rgba(27,42,46,.6);
  border:1px solid rgba(46,139,87,.34);
  border-left:4px solid var(--c-accent);
  padding:var(--space-4);
  margin-bottom:var(--space-4);
}
.page-home .shot-chart__caption h3{
  font-family:var(--font-h);
  font-size:1.25rem;
  color:var(--c-text);
  margin:var(--space-3) 0 var(--space-2);
}
.page-home .shot-chart__caption p{
  color:var(--c-text-dim);
  font-size:.875rem;
  line-height:1.7;
  margin:0;
}
.page-home .shot-chart__image{
  width:100%;
  object-fit:cover;
  display:block;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

/* ===== 03 进失球分布 ===== */
.page-home .goals-layout{
  display:grid;
  gap:var(--space-6);
  align-items:center;
}
.page-home .goals-viz{
  margin:0;
  min-width:0;
}
.page-home .goals-viz img{
  display:block;
  width:100%;
  object-fit:cover;
  border:1px solid rgba(0,212,255,.3);
}
.page-home .goals-viz__legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-top:var(--space-4);
}
.page-home .goals-legend-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:.8125rem;
  color:var(--c-text-dim);
}
.page-home .goals-legend-chip::before{
  content:"";
  width:14px;
  height:14px;
  background:var(--c-accent);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
.page-home .goals-legend-chip--away::before{
  background:var(--c-data);
  clip-path:polygon(0 0, 100% 20%, 100% 100%, 0 100%);
}
.page-home .goals-reading{
  background:rgba(27,42,46,.55);
  border:1px solid rgba(46,139,87,.3);
  padding:var(--space-6);
  position:relative;
}
.page-home .goals-reading::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:52px;
  height:3px;
  background:var(--c-accent);
}
.page-home .goals-reading h3{
  font-family:var(--font-h);
  font-size:1.375rem;
  color:var(--c-text);
  margin:0 0 var(--space-5);
}
.page-home .goals-reading__list{
  list-style:none;
  margin:0 0 var(--space-5);
  padding:0;
  display:grid;
  gap:var(--space-4);
}
.page-home .goals-reading__list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-4);
}
.page-home .goals-reading__step{
  font-family:var(--font-d);
  font-size:1rem;
  font-weight:700;
  color:var(--c-data);
}
.page-home .goals-reading__list p{
  color:var(--c-text-dim);
  font-size:.9375rem;
  line-height:1.75;
  margin:0;
}
.page-home .goals-reading__foot{
  border-top:1px solid rgba(46,139,87,.35);
  color:var(--c-text);
  font-size:.875rem;
  line-height:1.7;
  padding-top:var(--space-4);
  margin:0;
}

/* ===== 04 专家专栏 ===== */
.page-home .expert-layout{
  display:grid;
  gap:var(--space-7);
}
.page-home .expert-feature{
  display:grid;
  gap:var(--space-5);
}
.page-home .expert-feature__art img{
  display:block;
  width:100%;
  object-fit:cover;
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.page-home .expert-feature__body{
  background:rgba(27,42,46,.6);
  border:1px solid rgba(46,139,87,.34);
  border-top:4px solid var(--c-gold);
  padding:var(--space-6);
}
.page-home .expert-feature__body h3{
  font-family:var(--font-h);
  font-size:1.375rem;
  color:var(--c-text);
  margin:var(--space-4) 0 var(--space-3);
}
.page-home .expert-feature__body p{
  color:var(--c-text-dim);
  font-size:.9375rem;
  line-height:1.8;
  margin:0 0 var(--space-5);
}
.page-home .expert-list{
  display:grid;
  gap:var(--space-4);
  align-content:start;
}
.page-home .expert-entry{
  background:rgba(18,24,31,.6);
  border:1px solid rgba(46,139,87,.3);
  border-left:4px solid var(--c-line);
  padding:var(--space-5);
}
.page-home .expert-entry h3{
  font-family:var(--font-h);
  font-size:1.125rem;
  color:var(--c-text);
  margin:var(--space-3) 0 var(--space-2);
}
.page-home .expert-entry p{
  color:var(--c-text-dim);
  font-size:.875rem;
  line-height:1.7;
  margin:0;
}

/* ===== 05 简版导航 ===== */
.page-home .quicknav-cards{
  display:grid;
  gap:var(--space-4);
  margin-bottom:var(--space-7);
}
.page-home .quicknav-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--space-4);
  background:rgba(27,42,46,.68);
  border:1px solid rgba(46,139,87,.34);
  padding:var(--space-5);
  color:var(--c-text);
  text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition:border-color var(--trans-base), background var(--trans-base);
}
.page-home .quicknav-card::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--c-accent);
  opacity:0;
  transition:opacity var(--trans-base);
}
.page-home .quicknav-card:hover,
.page-home .quicknav-card:focus-visible{
  border-color:var(--c-accent);
  background:rgba(255,107,53,.14);
}
.page-home .quicknav-card:hover::before,
.page-home .quicknav-card:focus-visible::before{
  opacity:1;
}
.page-home .quicknav-card__num{
  font-family:var(--font-d);
  font-size:.875rem;
  font-weight:700;
  color:var(--c-data);
  grid-row:span 2;
}
.page-home .quicknav-card__title{
  font-family:var(--font-h);
  font-size:1.125rem;
  color:var(--c-text);
}
.page-home .quicknav-card__note{
  grid-column:2;
  color:var(--c-text-dim);
  font-size:.8125rem;
  line-height:1.6;
}
.page-home .quicknav-desktop{
  margin:0 0 var(--space-6);
  position:relative;
}
.page-home .quicknav-desktop img{
  display:block;
  width:100%;
  object-fit:cover;
}
.page-home .quicknav-desktop__overlay{
  background:rgba(27,42,46,.8);
  border:1px solid rgba(46,139,87,.34);
  border-left:4px solid var(--c-gold);
  padding:var(--space-5);
}
.page-home .quicknav-desktop__overlay h3{
  font-family:var(--font-h);
  font-size:1.25rem;
  color:var(--c-text);
  margin:var(--space-3) 0 var(--space-2);
}
.page-home .quicknav-desktop__overlay p{
  color:var(--c-text-dim);
  font-size:.875rem;
  line-height:1.7;
  margin:0;
}
.page-home .home-trust{
  margin-top:var(--space-6);
}

/* ===== 动画 ===== */
@keyframes homeStreamGlide{
  from{ transform:translateY(-3%); }
  to{ transform:translateY(3%); }
}

/* ===== 媒体查询 · 平板 ===== */
@media (min-width: 640px){
  .page-home .home-cover__stream{
    opacity:.6;
  }
  .page-home .live-match-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .page-home .video-strip{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .page-home .video-strip__text{
    max-width:56%;
  }
  .page-home .quicknav-cards{
    grid-template-columns:repeat(2, 1fr);
  }
  .page-home .quicknav-desktop__overlay{
    position:absolute;
    right:var(--space-5);
    bottom:var(--space-5);
    max-width:340px;
    border:none;
    background:rgba(10,61,46,.9);
  }
}

/* ===== 媒体查询 · 桌面 ===== */
@media (min-width: 900px){
  .page-home .home-cover{
    padding:var(--space-8) 0 var(--space-7);
  }
  .page-home .home-cover__inner{
    display:grid;
    grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);
    gap:var(--space-7);
  }
  .page-home .home-cover__main{
    grid-column:1;
  }
  .page-home .home-cover__aside{
    grid-column:2;
    grid-row:1;
  }
  .page-home .home-directory{
    grid-column:1 / -1;
  }
  .page-home .home-directory__list{
    grid-template-columns:repeat(5, 1fr);
  }
  .page-home .home-directory__link{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-3);
    border-left:none;
    border-top:3px solid var(--c-line);
  }
  .page-home .home-directory__link:hover,
  .page-home .home-directory__link:focus-visible{
    border-top-color:var(--c-accent);
    transform:translateY(-4px);
  }
  .page-home .home-directory__arrow{
    align-self:flex-end;
  }
  .page-home .live-match-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  .page-home .shots-layout{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
    gap:var(--space-8);
  }
  .page-home .shot-chart__caption{
    position:relative;
    z-index:2;
    margin-bottom:var(--space-4);
  }
  .page-home .goals-layout{
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
    gap:var(--space-8);
  }
  .page-home .expert-layout{
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    gap:var(--space-8);
    align-items:start;
  }
  .page-home .quicknav-cards{
    grid-template-columns:repeat(5, 1fr);
  }
}

/* ===== 媒体查询 · 宽屏 ===== */
@media (min-width: 1200px){
  .page-home .home-section{
    padding:var(--space-8) 0 var(--space-9);
  }
  .page-home .section-head{
    margin-bottom:var(--space-8);
  }
  .page-home .home-cover__lead{
    font-size:1.0625rem;
  }
  .page-home .shots-layout{
    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
  }
  .page-home .home-directory__link{
    padding:var(--space-5) var(--space-6);
  }
}