.page-home{
  --home-hero-pad: calc(var(--header-h) + 1.5rem);
  --catalog-aside-w: 280px;
  background: var(--c-light);
  overflow-x: hidden;
}

/* ===== 首页首屏 ===== */
.page-home .home-hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--c-white);
  background: var(--c-space-deep);
  overflow: hidden;
}
.page-home .home-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transform: scale(1.03);
}
.page-home .home-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(6,19,42,.94) 0%, rgba(6,19,42,.78) 42%, rgba(0,230,138,.14) 100%);
  pointer-events: none;
}
.page-home .home-hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.25rem;
  padding-top: var(--home-hero-pad);
  padding-bottom: 3.25rem;
}
.page-home .home-hero-kicker{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
}
.page-home .home-kicker-text{
  position: relative;
  padding-left: 1rem;
}
.page-home .home-kicker-text::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .45rem;
  height: .45rem;
  background: var(--c-neon);
  transform: translateY(-50%) skewX(-18deg);
}
.page-home .home-hero-copy h1{
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 4.6vw, 2.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-white);
  text-shadow: 0 4px 24px rgba(6,19,42,.36);
}
.page-home .home-hero-lead{
  max-width: 34rem;
  margin: 0 0 1.5rem;
  font-size: .98rem;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}
.page-home .home-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.75rem;
}
.page-home .home-hero-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  max-width: 30rem;
}
.page-home .home-hero-stats li{
  display: grid;
  gap: .1rem;
}
.page-home .home-hero-stats b{
  font-family: var(--font-mono);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--c-neon);
}
.page-home .home-hero-stats span{
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
}

.page-home .home-preview{
  display: grid;
  gap: .7rem;
  align-self: center;
}
.page-home .home-preview-item{
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .1rem .85rem;
  align-items: center;
  padding: .95rem 1.15rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--c-white);
  text-decoration: none;
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.page-home .home-preview-item::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: .3rem;
  height: 100%;
  background: var(--c-neon);
  transform: skewX(-18deg) scaleY(0);
  transform-origin: bottom;
  transition: transform .35s var(--ease);
}
.page-home .home-preview-item:hover{
  transform: translateX(.35rem);
  background: rgba(255,255,255,.12);
  border-color: rgba(0,230,138,.5);
}
.page-home .home-preview-item:hover::after{
  transform: skewX(-18deg) scaleY(1);
}
.page-home .home-preview-index{
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-neon);
  line-height: 1.1;
}
.page-home .home-preview-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.35;
}
.page-home .home-preview-desc{
  font-size: .78rem;
  color: rgba(255,255,255,.62);
}

/* ===== 通用区块 ===== */
.page-home .home-section{
  padding: 4.25rem 0;
  position: relative;
}
.page-home .home-section-head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.25rem;
  margin-bottom: 2.5rem;
}
.page-home .home-section-heading{
  flex: 1 1 320px;
}
.page-home .home-section-head .section-index{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-neon);
  background: var(--c-space);
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  align-self: flex-start;
  margin-top: .2rem;
}
.page-home .home-section-head .section-title{
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--c-ink);
}
.page-home .home-section-head .section-sub{
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--c-muted);
}

/* ===== 赛事分类总览 ===== */
.page-home .home-section--catalog{
  background: var(--c-light);
}
.page-home .home-section--catalog::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--c-neon) 0%, transparent 70%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
  opacity: .7;
}
.page-home .catalog-layout{
  display: grid;
  gap: 1.5rem;
}
.page-home .catalog-aside{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-content: start;
}
.page-home .catalog-aside-media{
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.page-home .catalog-aside-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-home .catalog-aside-note{
  position: relative;
  padding: 1rem 1.1rem 1rem 1.25rem;
  background: var(--c-white);
  border-left: 3px solid var(--c-neon);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
}
.page-home .catalog-aside-index{
  display: inline-block;
  margin-bottom: .45rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--c-neon);
  background: var(--c-neon-soft);
  padding: .2rem .5rem;
  border-radius: 4px;
}
.page-home .catalog-aside-note p{
  margin: 0;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--c-muted);
}
.page-home .catalog-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
}
.page-home .catalog-tile{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-height: 96px;
  padding: .85rem .9rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--c-ink);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.page-home .catalog-tile::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-neon), transparent 90%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.page-home .catalog-tile:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
  border-color: rgba(0,230,138,.6);
}
.page-home .catalog-tile:hover::before{
  transform: scaleX(1);
}
.page-home .catalog-tile--lead{
  background: linear-gradient(135deg, var(--c-space) 0%, #10305e 60%, rgba(0,230,138,.18) 100%);
  border-color: transparent;
  color: var(--c-white);
}
.page-home .catalog-tile--lead .catalog-tile-count{
  color: var(--c-neon);
}
.page-home .catalog-tile-idx{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-neon);
}
.page-home .catalog-tile-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}
.page-home .catalog-tile-count{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--c-muted);
}

/* ===== 积分榜中心 ===== */
.page-home .home-section--standings{
  background: var(--c-space);
  color: var(--c-white);
  overflow: hidden;
}
.page-home .home-section--standings::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--c-neon) 0%, rgba(0,230,138,.25) 50%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%);
  z-index: 2;
}
.page-home .standings-bg{
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  pointer-events: none;
}
.page-home .standings-shade{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,30,60,.96) 0%, rgba(10,30,60,.72) 55%, rgba(0,230,138,.08) 100%);
  pointer-events: none;
}
.page-home .standings-inner{
  position: relative;
  z-index: 2;
}
.page-home .home-section--standings .home-section-head .section-index{
  background: rgba(255,255,255,.1);
  color: var(--c-neon);
}
.page-home .home-section--standings .home-section-head .section-title{
  color: var(--c-white);
}
.page-home .home-section--standings .home-section-head .section-sub{
  color: rgba(255,255,255,.68);
}
.page-home .standings-filters{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}
.page-home .standings-filter{
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
  text-decoration: none;
  background: rgba(255,255,255,.05);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.page-home .standings-filter.is-active,
.page-home .standings-filter:hover{
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-space);
}
.page-home .standings-leagues{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 1.75rem;
}
.page-home .league-chip{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--c-white);
  text-decoration: none;
  font-size: .86rem;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.page-home .league-chip:hover{
  background: rgba(255,255,255,.14);
  border-color: var(--c-neon);
  transform: translateY(-2px);
}
.page-home .league-chip--hot{
  border-color: rgba(255,90,54,.65);
  background: rgba(255,90,54,.14);
}
.page-home .league-chip--hot:hover{
  border-color: var(--c-orange);
  background: rgba(255,90,54,.22);
}
.page-home .league-chip-name{
  font-family: var(--font-display);
  font-weight: 700;
}
.page-home .league-chip-update{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: rgba(255,255,255,.68);
}
.page-home .league-chip--hot .league-chip-update{
  color: var(--c-orange);
}
.page-home .league-dot{
  width: .42rem;
  height: .42rem;
  background: var(--c-neon);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-neon);
}
.page-home .league-chip--hot .league-dot{
  background: var(--c-orange);
  box-shadow: 0 0 8px var(--c-orange);
}
.page-home .standings-inner .data-note{
  margin-top: .25rem;
}

/* ===== 重点场次 ===== */
.page-home .home-section--featured{
  background: var(--c-white);
}
.page-home .featured-layout{
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
.page-home .featured-media{
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-space);
}
.page-home .featured-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-home .featured-content{
  padding: .25rem 0;
}
.page-home .featured-content > .tag{
  margin-bottom: .9rem;
}
.page-home .featured-content h3{
  margin: 0 0 .75rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  color: var(--c-ink);
}
.page-home .featured-content p{
  margin: 0 0 1.15rem;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--c-muted);
}
.page-home .featured-list{
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.page-home .featured-list li{
  position: relative;
  padding-left: 1.35rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.page-home .featured-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .55rem;
  height: .18rem;
  background: var(--c-neon);
  transform: skewX(-18deg);
}

/* ===== 版本更新说明 ===== */
.page-home .home-section--update{
  background: var(--c-light);
}
.page-home .update-layout{
  display: grid;
  gap: 1.75rem;
}
.page-home .callout{
  position: relative;
  padding: 1.25rem 1.35rem;
  background: var(--c-white);
  border-left: 4px solid var(--c-orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
}
.page-home .callout-title{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
}
.page-home .callout p{
  margin: 0;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.page-home .faq-list{
  display: grid;
  gap: .65rem;
}
.page-home .faq-item{
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.page-home .faq-item:hover{
  border-color: rgba(0,230,138,.6);
  box-shadow: var(--shadow-float);
}
.page-home .faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: 1rem 1.15rem;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  text-align: left;
  color: var(--c-ink);
  cursor: pointer;
}
.page-home .faq-icon{
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  position: relative;
}
.page-home .faq-icon::before,
.page-home .faq-icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .65rem;
  height: 2px;
  background: var(--c-neon);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.page-home .faq-icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.page-home .faq-question[aria-expanded="true"] .faq-icon::after{
  transform: translate(-50%, -50%) rotate(0deg);
}
.page-home .faq-answer{
  padding: 0 1.15rem 1.05rem;
}
.page-home .faq-answer p{
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.page-home .faq-answer p::before{
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: .5rem;
  background: var(--c-neon);
  transform: skewX(-18deg);
  vertical-align: baseline;
}

/* ===== 底部信任条 ===== */
.page-home .home-trustbar{
  background: var(--c-space-deep);
  color: var(--c-white);
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
}
.page-home .home-trustbar::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--c-neon) 0%, transparent 65%);
}
.page-home .home-trustbar-inner{
  display: grid;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.page-home .home-trustbar-title{
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: var(--c-white);
}
.page-home .home-trustbar-sub{
  margin: 0;
  max-width: 44rem;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(255,255,255,.68);
}
.page-home .home-trustbar-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

/* ===== 图片容器适配 ===== */
.page-home .image-shell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 移动端优先增强 ===== */
@media (min-width: 540px){
  .page-home .catalog-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .page-home .catalog-aside{
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

@media (min-width: 768px){
  .page-home .home-hero-inner{
    grid-template-columns: 1.12fr .88fr;
    gap: 3rem;
    align-items: center;
    padding-top: calc(var(--header-h) + 2.5rem);
  }
  .page-home .home-hero{
    min-height: 80vh;
  }
  .page-home .home-preview{
    gap: .8rem;
  }
  .page-home .home-section{
    padding: 5rem 0;
  }
  .page-home .catalog-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .page-home .catalog-layout{
    grid-template-columns: var(--catalog-aside-w) 1fr;
    gap: 2rem;
  }
  .page-home .catalog-aside{
    grid-template-columns: 1fr;
    align-content: start;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
  .page-home .featured-layout{
    grid-template-columns: .9fr 1.1fr;
    gap: 3rem;
  }
  .page-home .update-layout{
    grid-template-columns: .85fr 1.15fr;
    gap: 2rem;
    align-items: start;
  }
  .page-home .home-trustbar-inner{
    grid-template-columns: 1fr auto;
    gap: 2rem;
  }
}

@media (min-width: 1024px){
  .page-home .catalog-grid{
    grid-template-columns: repeat(5, 1fr);
  }
  .page-home .home-hero-stats{
    gap: 1rem 2.5rem;
  }
  .page-home .standings-leagues{
    gap: .8rem;
  }
}

@media (max-width: 360px){
  .page-home .catalog-grid{
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }
  .page-home .catalog-tile{
    min-height: 88px;
    padding: .7rem .75rem;
  }
  .page-home .home-preview-item{
    padding: .8rem .9rem;
  }
}

@media (prefers-reduced-motion: no-preference){
  .page-home .home-preview-item::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(0,230,138,.16) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: home-scan 3.2s var(--ease) infinite;
    pointer-events: none;
  }
}

@keyframes home-scan{
  0%{
    transform: translateX(-100%);
  }
  60%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(100%);
  }
}