.page-home{
  --page-gutter:1.25rem;
  --hero-min-h:600px;
  overflow-x:hidden;
  background:
    linear-gradient(180deg, rgba(212,175,55,.06) 0%, rgba(11,27,63,0) 28%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
}

.page-home img{
  max-width:100%;
  height:auto;
}

.page-home a{
  color:var(--gold-light);
  text-decoration:none;
}

.page-home .breadcrumb{ margin-bottom:1.25rem; }
.page-home .breadcrumb-list{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin:0; padding:0; list-style:none;
}
.page-home .breadcrumb-item{ font-size:.78rem; color:var(--muted); }
.page-home .breadcrumb-item a{ color:var(--gold-light); text-decoration:none; }
.page-home .breadcrumb-sep{ color:var(--muted); opacity:.6; }

.page-home .section-head{ margin-bottom:1.5rem; max-width:42rem; }
.page-home .index-number{
  display:inline-block;
  font-family:var(--font-head);
  font-size:.82rem;
  letter-spacing:.3em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:.4rem;
}
.page-home .kicker{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:.6rem;
}
.page-home .section-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.4rem, 4vw, 2.2rem);
  text-transform:uppercase;
  transform:skewX(-4deg);
  letter-spacing:.02em;
  margin:.25rem 0 0;
}
.page-home .section-sub{
  margin-top:.65rem;
  color:var(--muted);
  line-height:1.7;
  font-size:.95rem;
}

.page-home .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.72rem 1.35rem;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.page-home .btn:hover{ transform:translateY(-2px); }
.page-home .btn-gold{
  background:var(--gold);
  border-color:var(--gold-light);
  color:var(--bg-deep);
}
.page-home .btn-gold:hover{ background:var(--gold-light); }
.page-home .btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--gold-light);
}
.page-home .btn-ghost:hover{ background:rgba(212,175,55,.1); }

.page-home .hero-frame{
  position:relative;
  min-height:var(--hero-min-h);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin-bottom:1.25rem;
  border:1px solid var(--line);
  background:var(--bg-deep);
  isolation:isolate;
  overflow:hidden;
}
.page-home .hero-frame::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width:38%;
  height:4px;
  background:linear-gradient(90deg, transparent, var(--gold-light));
  z-index:1;
}
.page-home .hero-frame__media,
.page-home .hero-frame__veil{
  position:absolute;
  inset:0;
}
.page-home .hero-frame__media{ z-index:-2; }
.page-home .hero-frame__veil{
  z-index:-1;
  background:linear-gradient(112deg, rgba(11,27,63,.97) 0%, rgba(11,27,63,.88) 40%, rgba(20,42,94,.64) 74%, rgba(212,175,55,.2) 100%);
}
.page-home .hero-frame__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.15) contrast(1.05);
}
.page-home .hero-frame__inner{
  position:relative;
  z-index:2;
  padding:2.5rem var(--page-gutter) 7.5rem;
}
.page-home .hero-frame__title{
  font-family:var(--font-head);
  font-size:clamp(2.15rem, 8vw, 3.6rem);
  line-height:1.05;
  text-transform:uppercase;
  transform:skewX(-4deg);
  margin:.6rem 0 1rem;
  letter-spacing:.01em;
}
.page-home .hero-frame__cert{
  display:inline-block;
  margin-left:.55rem;
  padding:.28rem .6rem;
  border:1px solid var(--line);
  font-family:var(--font-body);
  font-size:.74rem;
  letter-spacing:.28em;
  color:var(--gold);
  transform:skewX(4deg);
  vertical-align:middle;
}
.page-home .hero-frame__lead{
  max-width:38rem;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.75;
  margin-bottom:1.5rem;
}
.page-home .hero-frame__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.page-home .frame-ticker{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow-x:auto;
  padding:.8rem var(--page-gutter);
  background:rgba(8,18,38,.92);
  border-top:1px solid var(--line);
  scrollbar-width:none;
}
.page-home .frame-ticker::-webkit-scrollbar{ display:none; }
.page-home .frame-ticker__item{
  flex:0 0 auto;
  padding:.32rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,212,200,.35);
  background:rgba(0,212,200,.08);
  color:var(--cyan);
  font-size:.78rem;
  letter-spacing:.06em;
}

.page-home .stack-panel{
  margin-bottom:1.25rem;
  padding:1.5rem var(--page-gutter);
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-home .league-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--page-gutter);
  width:72px;
  height:3px;
  background:var(--gold);
}
.page-home .league-panel__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
}
.page-home .league-panel__media{
  margin:0;
  padding:.4rem;
  border:1px solid var(--line);
  background:rgba(11,27,63,.4);
}
.page-home .league-panel__media img{
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-home .league-panel__list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.page-home .legend{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-bottom:.25rem;
}
.page-home .legend-item{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  color:var(--muted);
}
.page-home .legend-dot{
  width:8px;
  height:8px;
  border-radius:2px;
  display:inline-block;
}
.page-home .legend-dot--gold{ background:var(--gold); }
.page-home .legend-dot--orange{ background:var(--orange); }
.page-home .legend-dot--cyan{ background:var(--cyan); }

.page-home .league-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.75rem;
  align-items:center;
  padding:.85rem .9rem;
  background:rgba(11,27,63,.55);
  border:1px solid rgba(212,175,55,.16);
  border-left:3px solid var(--gold);
}
.page-home .league-row__badge{
  font-family:var(--font-head);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--gold);
  border:1px solid var(--line);
  padding:.2rem .5rem;
  white-space:nowrap;
}
.page-home .league-row__main strong{
  display:block;
  font-weight:600;
  font-size:.95rem;
}
.page-home .league-row__main span{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  margin-top:.1rem;
}
.page-home .league-row__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.35rem;
}
.page-home .league-row__fav{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
}
.page-home .league-row__fav[data-active="true"]{
  color:var(--gold);
}

.page-home .status-dot{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.24rem .5rem;
  border-radius:2px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(11,27,63,.55);
  border:1px solid var(--line);
  white-space:nowrap;
}
.page-home .status-dot::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.page-home .status-dot--live{ color:var(--cyan); border-color:rgba(0,212,200,.45); }
.page-home .status-dot--warn{ color:var(--orange); border-color:rgba(255,107,53,.45); }

.page-home .feature-panel{
  margin-bottom:1.25rem;
  padding:1.5rem var(--page-gutter);
  background:linear-gradient(135deg, rgba(212,175,55,.1) 0%, rgba(11,27,63,.25) 50%, rgba(0,212,200,.06) 100%), var(--bg-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.page-home .feature-panel__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
}
.page-home .feature-panel__items{
  display:flex;
  flex-direction:column;
}
.page-home .feature-item{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.95rem 0;
  border-bottom:1px dashed rgba(212,175,55,.25);
}
.page-home .feature-item:last-of-type{
  border-bottom:0;
}
.page-home .feature-item__icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:.5rem;
  color:var(--gold);
  border:1px solid var(--line);
  background:rgba(11,27,63,.6);
}
.page-home .feature-item__body h3{
  font-family:var(--font-head);
  font-size:1rem;
  margin:.1rem 0 .3rem;
  color:var(--text);
}
.page-home .feature-item__body p{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted);
}
.page-home .feature-panel__visual{
  margin:0;
  padding:.4rem;
  border:1px solid var(--line);
  background:rgba(11,27,63,.45);
}
.page-home .feature-panel__visual img{
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-home .feature-panel__items .btn{
  align-self:flex-start;
  margin-top:.5rem;
}

.page-home .updates-panel{
  margin-bottom:1.25rem;
  padding:1.5rem var(--page-gutter);
  background:var(--panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-home .updates-panel__bg{
  position:absolute;
  right:0; bottom:0;
  width:220px;
  height:110px;
  opacity:.2;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.page-home .updates-panel__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-home .updates-panel__head{
  position:relative;
  z-index:1;
}
.page-home .updates-tabs{
  position:relative;
  z-index:1;
  margin-top:1rem;
}
.page-home .tablist{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-bottom:1.1rem;
}
.page-home .tab-btn{
  padding:.45rem .9rem;
  background:rgba(11,27,63,.65);
  border:1px solid var(--line);
  color:var(--muted);
  font-family:var(--font-body);
  font-size:.8rem;
  cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.page-home .tab-btn[aria-selected="true"]{
  background:var(--gold);
  border-color:var(--gold-light);
  color:var(--bg-deep);
}
.page-home .tab-panel[hidden]{ display:none; }
.page-home .timeline{
  position:relative;
  padding-left:1.25rem;
}
.page-home .timeline::before{
  content:"";
  position:absolute;
  left:4px;
  top:.5rem;
  bottom:.5rem;
  width:1px;
  background:rgba(212,175,55,.35);
}
.page-home .timeline-item{
  position:relative;
  padding:0 .25rem .9rem 1rem;
}
.page-home .timeline-item::before{
  content:"";
  position:absolute;
  left:-1.25rem;
  top:.42rem;
  width:9px;
  height:9px;
  background:var(--cyan);
  border:2px solid var(--bg-deep);
  transform:rotate(45deg);
}
.page-home .timeline-item h3{
  font-family:var(--font-head);
  font-size:.98rem;
  margin:0 0 .28rem;
  color:var(--text);
}
.page-home .timeline-item p{
  margin:0;
  font-size:.87rem;
  line-height:1.6;
  color:var(--muted);
}
.page-home .chip{
  display:inline-block;
  margin-top:.4rem;
  padding:.2rem .55rem;
  font-size:.72rem;
  letter-spacing:.06em;
  border-radius:999px;
  background:rgba(0,212,200,.1);
  border:1px solid rgba(0,212,200,.3);
  color:var(--cyan);
}
.page-home .updates-panel .btn{
  margin-top:1rem;
}

.page-home .data-strip{
  margin-bottom:1.25rem;
  padding:1.25rem var(--page-gutter);
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transform:skewX(-4deg);
}
.page-home .data-strip__inner{
  transform:skewX(4deg);
}
.page-home .data-strip__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.25rem .75rem;
}
.page-home .data-strip__item{
  text-align:center;
}
.page-home .stat-num{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(1.45rem, 5vw, 2.3rem);
  line-height:1.1;
  color:var(--gold);
  white-space:nowrap;
}
.page-home .stat-label{
  display:block;
  margin-top:.3rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-home .data-strip__trust{
  margin-top:1.2rem;
  padding-top:.85rem;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.78rem;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem 1rem;
}
.page-home .data-strip__trust a{ color:var(--gold-light); }

@media (min-width: 1024px){
  .page-home{
    --page-gutter:clamp(2rem, 5vw, 5rem);
    --hero-min-h:680px;
  }
  .page-home .hero-frame__inner{
    padding:4rem var(--page-gutter) 8rem;
  }
  .page-home .hero-frame__title{
    max-width:15ch;
  }
  .page-home .frame-ticker{
    justify-content:center;
    gap:1.25rem;
  }
  .page-home .league-panel__grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:2rem;
    align-items:start;
  }
  .page-home .feature-panel__layout{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:2rem;
    align-items:start;
  }
  .page-home .feature-panel__items{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:0 1.5rem;
    align-items:start;
  }
  .page-home .feature-panel__items .btn{
    grid-column:1 / -1;
  }
  .page-home .data-strip__grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  .page-home .data-strip__item{
    padding:0 1rem;
    border-right:1px solid var(--line);
  }
  .page-home .data-strip__item:last-child{
    border-right:0;
  }
}
