:root{
  --color-deep-blue:#0A1128;
  --color-neon-green:#00FF9C;
  --color-gold:#FFD700;
  --color-steel-blue:#1C2B59;
  --color-white:#FFFFFF;
  --color-light-steel:#A8B2D1;
  --color-dark-blue:#020617;
  --color-cool-gray:#D1D5DB;
  --font-display: Impact, "Arial Black", sans-serif;
  --font-body: Inter, "Noto Sans SC", sans-serif;
  --font-editorial: "Source Serif Pro", "Noto Serif SC", serif;
  --max-width: 1440px;
  --rail-width: 280px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 8px 32px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--color-deep-blue);color:var(--color-white);font-family:var(--font-body);line-height:1.75;-webkit-font-smoothing:antialiased;padding-top:64px;}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0;margin:0}
img{max-width:100%;display:block}
a{color:var(--color-neon-green);text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--color-neon-green);outline-offset:3px}
[hidden]{display:none !important}

.container{ width:min(100% - 2rem, var(--max-width)); margin-inline:auto; }
.section{ padding:4rem 1.5rem; }
.section--dark{ background:var(--color-dark-blue); }
.section--accent{ background:linear-gradient(135deg, rgba(0,255,156,.12), transparent 70%); }
.eyebrow{ font-family:var(--font-editorial); font-style:italic; letter-spacing:.08em; color:var(--color-gold); font-size:1.05rem; }
.display-title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; line-height:1.05; color:var(--color-white); }
.lead{ font-family:var(--font-editorial); font-size:1.2rem; line-height:1.6; color:var(--color-light-steel); }
.prose{ max-width:68ch; color:var(--color-light-steel); }
.prose h2,.prose h3{ color:var(--color-white); }
.button{ display:inline-block; padding:.75rem 1.35rem; border:1px solid var(--color-neon-green); color:var(--color-neon-green); font-weight:600; letter-spacing:.04em; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.button:hover{ background:rgba(0,255,156,.08); }
.button--primary{ background:var(--color-neon-green); color:var(--color-dark-blue); }
.button--primary:hover{ background:var(--color-gold); color:var(--color-dark-blue); }
.button--outline{ border-color:var(--color-light-steel); color:var(--color-white); }
.button--outline:hover{ border-color:var(--color-neon-green); color:var(--color-neon-green); }
.card{ background:var(--color-steel-blue); border:1px solid rgba(0,255,156,.12); padding:1.25rem; box-shadow:0 4px 20px rgba(0,0,0,.2); transition:transform .2s var(--ease), border-color .2s var(--ease); }
.card:hover{ transform:translateY(-2px); border-color:rgba(0,255,156,.35); }
.grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
.grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
@media (min-width:640px){ .grid--2, .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .grid--3, .grid--4{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; list-style:none; font-size:.8rem; color:var(--color-light-steel); }
.breadcrumbs li+li::before{ content:"/"; margin-right:.4rem; color:var(--color-light-steel); }
.breadcrumbs a{ color:var(--color-neon-green); }
.media{ position:relative; overflow:hidden; background:var(--color-steel-blue); border:1px solid rgba(0,255,156,.15); }
.media::after{ content:""; display:block; padding-bottom:56.25%; }
.media--4-3::after{ padding-bottom:75%; }
.media--1-1::after{ padding-bottom:100%; }
.media > img, .media > .media__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media--contain > img{ object-fit:contain; }
.is-hidden{ display:none !important; }
[data-filter-trigger].is-active{ background:var(--color-neon-green) !important; color:var(--color-dark-blue) !important; }

.site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; }
.site-skip-link{ position:fixed; top:-100px; left:1rem; z-index:3000; background:var(--color-neon-green); color:var(--color-dark-blue); font-weight:700; padding:.5rem 1rem; border-radius:2px; transition:top .2s var(--ease); }
.site-skip-link:focus{ top:.75rem; }

.site-header__rail{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; min-height:64px; padding:0 .75rem; background:rgba(2,6,23,.9); border-bottom:1px solid rgba(0,255,156,.18); box-shadow:var(--shadow-soft); }
.site-header__topbar{ flex-basis:100%; display:flex; align-items:center; gap:.5rem; padding:.35rem .1rem; border-bottom:1px solid rgba(168,178,209,.15); font-size:.625rem; letter-spacing:.08em; color:var(--color-light-steel); text-transform:uppercase; }
.site-header__ticker{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-header__ticker-dot{ display:inline-block; width:6px; height:6px; margin-right:.35rem; border-radius:50%; background:var(--color-neon-green); animation:pulse 2s infinite; }
.site-header__clock, .site-header__refresh, .site-header__league-count{ white-space:nowrap; }
.site-header__refresh{ background:var(--color-dark-blue); padding:.15rem .4rem; border-radius:2px; color:var(--color-white); }
.site-header__league-count{ color:var(--color-gold); }
.site-brand{ display:flex; align-items:center; gap:.65rem; color:var(--color-white); }
.site-brand__mark{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--color-neon-green); color:var(--color-dark-blue); font-family:var(--font-display); font-size:1.4rem; border-radius:2px; box-shadow:0 0 18px rgba(0,255,156,.35); }
.site-brand__text{ line-height:1.15; }
.site-brand__name{ display:block; font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em; }
.site-brand__sub{ display:block; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--color-light-steel); }
.site-nav{ display:none; flex-basis:100%; padding:1rem 0 .5rem; }
.site-header[data-open] .site-nav{ display:block; }
.site-nav__list{ display:flex; flex-direction:column; gap:.15rem; }
.site-nav__link{ display:flex; align-items:baseline; gap:.6rem; padding:.6rem .75rem; border-left:2px solid transparent; color:var(--color-white); transition:background .2s var(--ease), color .2s, border-color .2s; }
.site-nav__link:hover, .site-nav__link[aria-current="page"]{ border-left-color:var(--color-neon-green); color:var(--color-neon-green); background:rgba(0,255,156,.05); }
.site-nav__index{ font-family:var(--font-display); font-size:.8rem; color:var(--color-neon-green); }
.site-header__meta{ display:none; }
.site-header__progress{ display:none; }
.site-nav-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; background:transparent; border:1px solid rgba(0,255,156,.45); color:var(--color-neon-green); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.site-nav-toggle__bars{ display:inline-flex; flex-direction:column; gap:3px; width:18px; }
.site-nav-toggle__bars span{ height:2px; background:currentColor; transition:transform .25s var(--ease), opacity .2s; }
.site-header[data-open] .site-nav-toggle__bars span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.site-header[data-open] .site-nav-toggle__bars span:nth-child(2){ opacity:0; }
.site-header[data-open] .site-nav-toggle__bars span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
.site-header[data-open] .site-header__rail{ max-height:100vh; overflow-y:auto; }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(0,255,156,.6);} 50%{opacity:.6; box-shadow:0 0 0 4px rgba(0,255,156,0);} }

@media (max-width:480px){
 .site-header__ticker{ display:none; }
 .site-header__topbar{ justify-content:space-between; }
}

@media (min-width:1100px){
 body{ padding-top:0; padding-left:var(--rail-width); }
 .site-header{ right:auto; width:var(--rail-width); bottom:0; }
 .site-header__rail{
   height:100vh;
   flex-direction:column;
   align-items:stretch;
   justify-content:flex-start;
   min-height:0;
   padding:1.25rem;
   padding-bottom:1rem;
   background:linear-gradient(180deg, rgba(10,17,40,.92), rgba(2,6,23,.28));
   border-right:1px solid rgba(0,255,156,.15);
   border-bottom:none;
   box-shadow:none;
   overflow:hidden;
   transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
 }
 .site-header__rail::before{
   content:"";
   position:absolute; inset:0;
   pointer-events:none;
   background:linear-gradient(135deg, transparent 0%, rgba(0,255,156,.08) 100%);
   clip-path:polygon(0 0, 100% 0, 100% 20%, 78% 100%, 0 100%);
 }
 .site-header.is-scrolled .site-header__rail{
   background:linear-gradient(180deg, rgba(2,6,23,.98), rgba(10,17,40,.97));
   box-shadow:1px 0 40px rgba(0,0,0,.4);
 }
 .site-header__topbar{
   flex-basis:auto;
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:.35rem;
   padding:.6rem;
   margin-bottom:1.2rem;
   background:rgba(28,43,89,.45);
   border:1px solid rgba(168,178,209,.18);
 }
 .site-header__ticker{ grid-column:1/-1; display:flex; align-items:center; font-size:.6rem; }
 .site-header__clock, .site-header__refresh, .site-header__league-count{ background:var(--color-dark-blue); border-radius:2px; padding:.25rem .3rem; text-align:center; font-size:.58rem; }
 .site-header__league-count{ color:var(--color-gold); }
 .site-brand{ margin-bottom:1.4rem; margin-top:.2rem; }
 .site-nav{ display:block; flex:none; padding:0; }
 .site-nav__list{ gap:.1rem; }
 .site-nav__link{ padding:.65rem .6rem; }
 .site-header__meta{ display:block; margin-top:auto; }
 .site-header__trust{ font-size:.68rem; color:var(--color-light-steel); border-left:2px solid var(--color-neon-green); padding-left:.6rem; margin-bottom:.8rem; }
 .site-header__cta{ display:block; text-align:center; background:var(--color-neon-green); color:var(--color-dark-blue); font-family:var(--font-display); letter-spacing:.06em; padding:.7rem .5rem; transition:background .2s, color .2s; }
 .site-header__cta:hover{ background:var(--color-gold); }
 .site-header__progress{ display:block; position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(168,178,209,.15); }
 .site-header__progress::before{ content:""; position:absolute; top:0; left:0; height:100%; width:var(--progress,0%); background:linear-gradient(90deg, var(--color-neon-green), var(--color-gold)); }
 .site-nav-toggle{ display:none; }
}

.site-footer{ background:var(--color-dark-blue); border-top:1px solid rgba(0,255,156,.18); margin-top:4rem; }
.site-footer__top{ max-width:var(--max-width); margin:0 auto; padding:3rem 1.5rem 2rem; display:grid; gap:2.5rem; grid-template-columns:1fr; }
.site-footer__logo{ font-family:var(--font-display); font-size:1.7rem; color:var(--color-white); }
.site-footer__tagline{ color:var(--color-neon-green); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.2rem; }
.site-footer__desc{ color:var(--color-light-steel); max-width:38rem; margin-top:.8rem; }
.site-footer__heading{ font-family:var(--font-display); color:var(--color-white); font-size:1.05rem; margin-bottom:.75rem; border-left:3px solid var(--color-neon-green); padding-left:.6rem; }
.site-footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; color:var(--color-light-steel); font-size:.9rem; }
.site-footer__bottom{ border-top:1px solid rgba(168,178,209,.15); padding:1.25rem 1.5rem; max-width:var(--max-width); margin:0 auto; }
.site-footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.1rem; }
.site-footer__nav-link{ color:var(--color-light-steel); font-size:.75rem; letter-spacing:.04em; transition:color .2s; }
.site-footer__nav-link:hover{ color:var(--color-neon-green); }
.site-footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 2rem; margin-top:.8rem; color:var(--color-light-steel); font-size:.75rem; }
.site-footer__icp{ color:var(--color-cool-gray); }
.site-footer__copyright{ color:var(--color-light-steel); }

@media (min-width:980px){
 .site-footer__top{ grid-template-columns:1.4fr .8fr; align-items:start; }
 .site-footer__bottom{ display:flex; justify-content:space-between; align-items:center; }
 .site-footer__nav{ justify-content:flex-start; }
 .site-footer__legal{ margin-top:0; }
}

@media (prefers-reduced-motion: reduce){
 *, *::before, *::after{ animation:none !important; transition:none !important; }
 html{ scroll-behavior:auto; }
}
