.page-home{
  --home-cut:3deg;
  --home-pad:52px;
  background:var(--bg);
  color:var(--text);
  overflow-x:clip;
}
.page-home .breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:18px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.07em;
  color:var(--gray);
}
.page-home .breadcrumbs a{
  color:var(--gray);
  text-decoration:none;
}
.page-home .breadcrumbs a:hover{color:var(--cyan);}

.page-home [data-reveal]{
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
.js .page-home [data-reveal]:not(.is-revealed){
  opacity:0;
  transform:translateY(18px);
}

.page-home .section-head{
  max-width:60ch;
  margin-bottom:26px;
}
.page-home .section-label{
  display:inline-block;
  margin:0 0 14px;
  padding:4px 14px;
  background:var(--cyan);
  color:var(--ink-950);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.12em;
  border-radius:4px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.page-home h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,4.4vw,44px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.page-home .section-lead{
  margin:0;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.7;
}

/* 首屏 */
.page-home .home-hero{padding-block:26px 56px;}
.page-home .hero-grid{display:grid;gap:28px;}
.page-home .hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:6px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  background:rgba(53,242,208,.08);
  color:var(--mist);
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.05em;
}
.page-home .hero-main h1{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(38px,9vw,96px);
  line-height:.99;
  letter-spacing:-.03em;
}
.page-home .hero-accent{
  display:block;
  color:var(--cyan);
}
.page-home .hero-accent::after{
  content:"";
  display:block;
  width:min(220px,58%);
  height:6px;
  margin-top:12px;
  border-radius:var(--pill);
  background:linear-gradient(90deg,var(--cyan),rgba(53,242,208,0));
  transform:skewX(-14deg);
}
.page-home .hero-lead{
  max-width:34em;
  margin:0 0 24px;
  color:var(--text-muted);
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.72;
}
.page-home .hero-actions{display:flex;flex-wrap:wrap;gap:10px;}
.page-home .hero-steps{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:24px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--text-muted);
}
.page-home .hero-steps li{display:inline-flex;align-items:center;gap:8px;}
.page-home .step-num{
  font-family:var(--font-data);
  font-size:12px;
  color:var(--cyan);
}
.page-home .pulse-line{
  display:block;
  width:100%;
  height:50px;
  margin-top:20px;
  color:var(--cyan);
  opacity:.85;
}

.page-home .hero-collage{
  display:grid;
  gap:14px;
  position:relative;
}
.page-home .hero-photo{
  margin:0;
  overflow:hidden;
  background:var(--ink-800);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
}
.page-home .hero-photo img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.page-home .hero-card{
  display:grid;
  gap:8px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-950));
  box-shadow:var(--shadow);
}
.page-home .hero-card--fixture{border-color:rgba(53,242,208,.34);}
.page-home .hero-card--help{border-left:3px solid var(--orange);}
.page-home .card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.page-home .card-id{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gray);
}
.page-home .card-title{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.32;
}
.page-home .card-meta{
  margin:0;
  font-size:13px;
  line-height:1.58;
  color:var(--text-muted);
}
.page-home .card-foot{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-data);
  font-size:12px;
  color:var(--mist);
}
.page-home .card-foot a{
  margin-left:auto;
  color:var(--cyan);
  text-decoration:none;
}
.page-home .status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(245,213,71,.16);
}
.page-home .card-link{
  font-size:13px;
  color:var(--cyan);
  text-decoration:none;
}
.page-home .card-link:hover{text-decoration:underline;}

/* 赛事目录 */
.page-home .home-directory{padding-block:var(--home-pad);}
.page-home .dir-layout{display:grid;gap:20px;}
.page-home .dir-photo{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--ink-800);
}
.page-home .dir-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}
.page-home .directory-panel{
  position:relative;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--surface);
}
.page-home .dir-radio{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.page-home .dir-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
  border-radius:var(--pill);
}
.page-home .dir-pills label{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  font-size:13px;
  color:var(--mist);
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.page-home .dir-pills label:hover{border-color:var(--cyan);color:var(--cyan);}
.page-home .dir-radio:focus-visible ~ .dir-pills{
  outline:2px solid var(--yellow);
  outline-offset:4px;
}
.page-home #dir-all:checked ~ .dir-pills label[for="dir-all"],
.page-home #dir-football:checked ~ .dir-pills label[for="dir-football"],
.page-home #dir-basketball:checked ~ .dir-pills label[for="dir-basketball"],
.page-home #dir-tennis:checked ~ .dir-pills label[for="dir-tennis"],
.page-home #dir-volleyball:checked ~ .dir-pills label[for="dir-volleyball"]{
  background:var(--cyan);
  border-color:transparent;
  color:var(--ink-950);
  font-weight:700;
}
.page-home #dir-football:checked ~ .fixture-list .fixture:not([data-sport="football"]),
.page-home #dir-basketball:checked ~ .fixture-list .fixture:not([data-sport="basketball"]),
.page-home #dir-tennis:checked ~ .fixture-list .fixture:not([data-sport="tennis"]),
.page-home #dir-volleyball:checked ~ .fixture-list .fixture:not([data-sport="volleyball"]){
  display:none;
}
.page-home .fixture-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-home .fixture{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg);
}
.page-home .fixture-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.page-home .fixture-time{
  font-family:var(--font-data);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--cyan);
}
.page-home .fixture-name{
  margin:0;
  font-size:15px;
  font-weight:600;
}
.page-home .fixture-meta{
  margin:0;
  font-size:12.5px;
  color:var(--gray);
}
.page-home .fixture-link{
  justify-self:start;
  margin-top:2px;
  font-size:12.5px;
  color:var(--mist);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
}
.page-home .fixture-link:hover{color:var(--cyan);border-color:var(--cyan);}

/* 名单与主客场 */
.page-home .home-split{
  padding-block:var(--home-pad);
  background:var(--charcoal);
}
.page-home .split-grid{display:grid;gap:28px;}
.page-home .split-col h3{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(19px,2.3vw,25px);
  letter-spacing:-.01em;
  line-height:1.24;
}
.page-home .roster-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-home .roster-list li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:baseline;
  padding:12px 14px;
  border-radius:var(--radius-md);
  border-left:2px solid var(--teal);
  background:rgba(53,242,208,.05);
}
.page-home .roster-key{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--cyan);
}
.page-home .roster-desc{
  font-size:13.5px;
  line-height:1.62;
  color:var(--text-muted);
}
.page-home .away-photo{
  margin:0 0 18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--ink-800);
}
.page-home .away-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}
.page-home .metric{margin-bottom:14px;}
.page-home .metric-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  font-size:13px;
}
.page-home .metric-name{color:var(--text-muted);}
.page-home .metric-val{
  font-family:var(--font-data);
  font-size:12.5px;
  color:var(--cyan);
}
.page-home .data-bar{
  height:8px;
  overflow:hidden;
  border-radius:var(--pill);
  background:rgba(169,247,230,.12);
}
.page-home .data-bar-fill{
  display:block;
  width:var(--value,0%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  transition:width .5s var(--ease);
}
.page-home .metric-note{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--gray);
  opacity:0;
  transition:opacity .2s var(--ease);
}
.page-home .metric:hover .metric-note,
.page-home .metric:focus-within .metric-note{opacity:1;}
.page-home .split-link{
  display:inline-block;
  margin-top:6px;
  font-family:var(--font-data);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(53,242,208,.4);
}
.page-home .split-link:hover{border-color:var(--cyan);}

/* 分层战报 */
.page-home .home-report{padding-block:var(--home-pad);}
.page-home .report-layers{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-home .layer{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(11,43,36,.92),rgba(4,22,18,.92));
}
.page-home .layer--conclusion{border-top:3px solid var(--cyan);}
.page-home .layer--key{border-top:3px solid var(--yellow);}
.page-home .layer--data{border-top:3px solid var(--orange);}
.page-home .layer-num{
  font-family:var(--font-data);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--gray);
}
.page-home .layer h3{
  margin:8px 0;
  font-size:20px;
  font-weight:800;
}
.page-home .layer p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}
.page-home .layer-time{
  display:inline-block;
  margin-top:14px;
  padding:3px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--pill);
  font-family:var(--font-data);
  font-size:11.5px;
  color:var(--mist);
}
.page-home .report-foot{margin-top:22px;}

/* 入口与排查 */
.page-home .home-help{
  padding-block:var(--home-pad);
  background:var(--ink-950);
}
.page-home .help-grid{display:grid;gap:24px;}
.page-home .help-lead{
  max-width:36em;
  margin:0 0 20px;
  font-size:15px;
  line-height:1.72;
  color:var(--text-muted);
}
.page-home .help-cards{display:grid;gap:10px;}
.page-home .help-card{
  display:grid;
  gap:4px;
  min-height:44px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(169,247,230,.04);
  color:inherit;
  text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.page-home .help-card:hover{
  border-color:var(--orange);
  background:rgba(255,106,42,.07);
  transform:translateY(-2px);
}
.page-home .help-card strong{
  font-size:15px;
  font-weight:700;
}
.page-home .help-card span{
  font-size:13px;
  line-height:1.55;
  color:var(--text-muted);
}
.page-home .help-card .help-go{
  margin-top:4px;
  font-family:var(--font-data);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--cyan);
}
.page-home .help-photo{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  background:var(--ink-800);
}
.page-home .help-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}

/* 规模与节奏 */
.page-home .home-scale{padding-block:var(--home-pad);}
.page-home .scale-grid{
  display:grid;
  gap:12px;
  margin-bottom:28px;
}
.page-home .scale-stat{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.page-home .scale-num{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(40px,7vw,64px);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--cyan);
}
.page-home .scale-unit{
  display:block;
  margin-top:6px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
}
.page-home .scale-stat p{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.62;
  color:var(--text-muted);
}
.page-home .cadence{
  padding-top:22px;
  border-top:1px solid var(--line);
}
.page-home .cadence h3{
  margin:0 0 14px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gray);
  font-weight:600;
}
.page-home .cadence ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-home .cadence li{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  font-size:14px;
  line-height:1.64;
  color:var(--text-muted);
}
.page-home .cadence-key{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--cyan);
  padding-top:2px;
}
.page-home .home-cta{
  display:grid;
  gap:14px;
  margin-top:28px;
  padding:22px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(53,242,208,.12),rgba(255,106,42,.1));
}
.page-home .home-cta p{
  margin:0;
  font-size:14.5px;
  line-height:1.62;
  color:var(--paper);
}

@media (min-width:760px){
  .page-home .scale-grid{grid-template-columns:repeat(3,1fr);}
  .page-home .home-cta{
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:16px;
  }
}

@media (min-width:860px){
  .page-home .dir-layout{
    grid-template-columns:4fr 8fr;
    gap:24px;
    align-items:start;
  }
  .page-home .fixture-list{grid-template-columns:1fr 1fr;}
}

@media (min-width:900px){
  .page-home .hero-grid{
    grid-template-columns:5fr 7fr;
    gap:44px;
    align-items:start;
  }
  .page-home .hero-card--fixture{margin-right:38px;}
  .page-home .hero-card--help{margin-left:38px;margin-top:-6px;}

  .page-home .split-grid{
    grid-template-columns:1fr 1fr;
    gap:36px;
    align-items:start;
  }
  .page-home .report-layers{
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    align-items:start;
  }
  .page-home .layer:nth-child(2){margin-top:26px;}
  .page-home .layer:nth-child(3){margin-top:52px;}

  .page-home .help-grid{
    grid-template-columns:7fr 5fr;
    gap:36px;
    align-items:center;
  }
}

@media (min-width:1200px){
  .page-home{--home-pad:72px;}
}

@media (hover:none){
  .page-home .metric-note{opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .page-home [data-reveal]{
    transition:opacity .3s linear;
    transition-delay:0s;
  }
  .js .page-home [data-reveal]:not(.is-revealed){transform:none;}
  .page-home .data-bar-fill{transition:none;}
  .page-home .help-card:hover{transform:none;}
}
<<<END>>>

.page-home {
  --reveal-delay: 0.3s;
  --value: 1rem;
}