:root{
  --bg:#111111;
  --teal:#2ECC71;
  --ink:#111111;
  --white:#ffffff;
  --muted:#c8d4cc;
  --line:#1e2a22;
  --surface:#161c18;
  --max:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--white)}
body{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:16.5px;line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 1.5rem));margin-inline:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:#111;
  border-bottom:3px solid var(--teal);
}
.header-bar{
  display:flex;align-items:center;gap:.65rem;
  min-height:70px;padding:.4rem 0;
  position:relative;
}
.hang-hook{
  position:absolute;left:46%;top:-8px;width:28px;height:42px;
  pointer-events:none;color:var(--teal);
  transform-origin:top center;
  animation:hookSway 3.6s ease-in-out infinite;
}
.hang-hook svg{width:28px;height:42px;display:block}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
.brand-mark{
  width:48px;height:48px;flex:0 0 48px;
  display:grid;place-items:center;
  background:transparent;
}
.brand-mark img{
  width:44px;height:44px;object-fit:contain;
  animation:mascotFloat 4.2s ease-in-out infinite;
}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-name{
  font-family:"Oswald",sans-serif;
  font-size:1.35rem;letter-spacing:.04em;line-height:1.05;
  color:var(--white);text-transform:uppercase;
  padding-top:.12rem;
}
.brand-tag{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#111;background:var(--teal);padding:.08rem .38rem;width:max-content;font-weight:800;
}
.site-nav{display:flex;flex-wrap:wrap;gap:.1rem .28rem;margin-left:auto}
.nav-link{
  text-decoration:none;font-family:"Oswald",sans-serif;font-size:.98rem;
  letter-spacing:.05em;padding:.22rem .42rem;color:#fff;text-transform:uppercase;
}
.nav-link.is-active,.nav-link:hover{color:#111;background:var(--teal)}
.header-actions{display:flex;align-items:center;gap:.4rem;margin-left:.35rem}
.nav-toggle{display:none;background:transparent;border:0;width:42px;height:42px;padding:8px}
.nav-toggle span{display:block;height:2px;background:var(--teal);margin:6px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.5rem 1rem;text-decoration:none;font-weight:800;
  font-family:"Oswald",sans-serif;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--teal);border-radius:2px;
}
.btn-accent{background:var(--teal);color:#111}
.btn-ghost{background:transparent;color:var(--teal)}
.btn:hover{filter:brightness(1.08)}
.header-cta{white-space:nowrap}

.live-strip{
  background:var(--teal);color:#111;
  font-family:"Oswald",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  min-height:36px;overflow:hidden;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#111;
  animation:mascotFloat 1.4s ease-in-out infinite;
}
.clock{font-variant-numeric:tabular-nums;margin-left:auto;font-weight:700}

.hero{padding:0 0 1.2rem}
.hero-shell{display:grid;grid-template-columns:.92fr 1.08fr;gap:0;align-items:stretch}
.hero-copy{
  background:#111;color:#fff;padding:1.55rem 1.25rem 1.35rem;
  border-left:8px solid var(--teal);
}
.eyebrow{
  font-family:"Oswald",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  font-size:.88rem;margin-bottom:.4rem;color:var(--teal);
}
.hero-copy h1{
  font-family:"Oswald",sans-serif;font-size:clamp(1.9rem,5.4vw,3.15rem);
  line-height:.98;margin:0 0 .5rem;text-transform:uppercase;
}
.hero-copy h1 span{
  display:block;font-size:.46em;letter-spacing:.03em;margin-top:.38rem;font-weight:500;color:var(--teal);
}
.lead{margin:0 0 1rem;font-size:1.02rem;max-width:38rem;color:#e8f5ee}
.cta-row{display:flex;flex-wrap:wrap;gap:.48rem;margin-bottom:.8rem}
.hero-chips{display:flex;flex-wrap:wrap;gap:.38rem}
.chip{
  display:inline-flex;align-items:center;text-decoration:none;
  border:2px solid var(--teal);padding:.18rem .5rem;
  font-family:"Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);
}
.chip-hot{background:var(--teal);color:#111}

.hero-visual{position:relative;min-height:318px;background:#000;overflow:hidden}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:top center;min-height:318px}
.lineup-float{
  position:absolute;right:4%;bottom:7%;
  width:min(220px,42%);
  animation:mascotFloat 5s ease-in-out infinite;
  pointer-events:none;
}
.lineup-float img{width:100%;height:auto;filter:drop-shadow(0 8px 16px #000)}

.providers-block{padding:1rem 0}
.providers-label{
  font-family:"Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.4rem;
}
.providers-strip{display:flex;flex-wrap:wrap;gap:.36rem}
.provider-chip{
  text-decoration:none;background:transparent;color:var(--teal);
  border:2px solid var(--teal);font-weight:800;padding:.3rem .58rem;font-size:.82rem;
}

.promo-fx{
  position:relative;display:grid;grid-template-columns:1.35fr .95fr auto;
  align-items:center;min-height:172px;overflow:hidden;text-decoration:none;
  border:2px solid var(--teal);margin:1rem 0;background:#0a0a0a;
}
.promo-media{position:absolute;inset:0}
.promo-media img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  animation:kenBurns 18s ease-in-out infinite alternate;
}
.promo-fx::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,17,.72) 0%,rgba(17,17,17,.18) 62%,transparent 100%);
  pointer-events:none;
}
.promo-fx::before{
  content:"";position:absolute;top:0;left:-40%;width:28%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);animation:sheen 5.5s ease-in-out infinite;z-index:2;
}
.promo-copy{position:relative;z-index:3;padding:1rem 1.05rem;color:#fff}
.promo-kicker,.promo-badge{
  font-family:"Oswald",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
}
.promo-badge{position:absolute;top:.5rem;right:.6rem;z-index:3;background:#111;padding:.08rem .42rem;border:2px solid var(--teal)}
.promo-title{font-family:"Oswald",sans-serif;font-size:1.55rem;line-height:1.05;text-transform:uppercase}
.promo-sub{margin:.22rem 0 0;max-width:34rem}
.promo-cta{
  position:relative;z-index:3;margin:.7rem;background:var(--teal);color:#111;
  font-family:"Oswald",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:.52rem .86rem;font-size:1.05rem;white-space:nowrap;
  animation:ctaSpring 2.8s cubic-bezier(.22,1.4,.36,1) infinite;
}

.section{padding:1.4rem 0 1.6rem}
.section-alt{background:var(--surface)}
.section-head h2{
  font-family:"Oswald",sans-serif;font-size:1.85rem;margin:0;text-transform:uppercase;letter-spacing:.04em;
}
.mute{color:var(--muted);margin:.22rem 0 0}
.card-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:1rem;
}
.game-card a{text-decoration:none;display:block;background:#0c0c0c;color:#fff;border:2px solid var(--teal)}
.game-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center}
.card-meta{padding:.42rem .5rem}
.tag{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.card-meta h3{margin:0;font-family:"Oswald",sans-serif;font-size:1.08rem;text-transform:uppercase}
.grid-more{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.8rem}
.grid-more.trio .btn{flex:1;min-width:8rem}

.odds-sports{display:flex;flex-wrap:wrap;gap:.32rem;margin:1rem 0 .7rem}
.odds-sport{
  text-decoration:none;background:transparent;border:2px solid var(--teal);
  color:var(--teal);padding:.22rem .55rem;font-family:"Oswald",sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
.odds-sport.is-active{background:var(--teal);color:#111}
.odds-board{display:grid;gap:.42rem}
.odds-row{
  display:grid;grid-template-columns:1.4fr auto auto;gap:.65rem;align-items:center;
  background:#0c0c0c;padding:.62rem .75rem .62rem 1.05rem;
  border:1px dashed #2ECC71;
  box-shadow:inset 8px 0 0 var(--teal);
  position:relative;
}
.odds-row::before,.odds-row::after{
  content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--bg);
  top:50%;transform:translateY(-50%);
}
.odds-row::before{left:-6px}
.odds-row::after{right:-6px}
.odds-meta{color:var(--teal);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.odds-match{display:flex;align-items:center;gap:.5rem;font-family:"Oswald",sans-serif;font-size:1.18rem;text-transform:uppercase}
.odds-vs{color:var(--teal)}
.odds-prices{display:flex;gap:.32rem}
.price{background:var(--teal);color:#111;min-width:3.3rem;text-align:center;padding:.18rem .32rem;font-weight:800}
.price small{display:block;font-size:.62rem}

.seo-stack{padding:1.3rem 0}
.seo-stack h2{font-family:"Oswald",sans-serif;text-transform:uppercase}
.seo-stack p{max-width:58rem}
.faq-list{display:grid;gap:.38rem;margin-top:.75rem}
.faq-item{background:#0c0c0c;border:2px solid var(--teal)}
.faq-item summary{cursor:pointer;padding:.68rem .82rem;font-weight:800}
.faq-item p{margin:0;padding:0 .82rem .72rem}

.page-hero{padding:0 0 1.1rem}
.page-hero-shell{display:grid;grid-template-columns:.88fr 1.12fr}
.page-hero-copy{background:#111;color:#fff;padding:1.35rem 1.15rem;border-left:8px solid var(--teal)}
.page-hero-copy h1{font-family:"Oswald",sans-serif;font-size:clamp(1.8rem,4.8vw,2.9rem);line-height:.98;margin:0 0 .48rem;text-transform:uppercase}
.page-hero-copy h1 span{display:block;font-style:normal;font-size:.46em;margin-top:.28rem;color:var(--teal)}
.page-hero-visual{min-height:252px;overflow:hidden}
.page-hero-visual img{width:100%;height:100%;object-fit:cover;object-position:top center;min-height:252px}

.chapters{padding:1.2rem 0}
.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.75rem}
.chapter{background:#0c0c0c;border-top:4px solid var(--teal);padding:.75rem}
.chapter-n{font-family:"Oswald",sans-serif;color:var(--teal);font-size:1.28rem}
.chapter h3{margin:.12rem 0 .3rem;font-family:"Oswald",sans-serif;text-transform:uppercase}
.related{padding:1rem 0 1.3rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.38rem;margin-top:.45rem}
.chip-row .chip{color:var(--teal);border-color:var(--teal)}

.cta-band{background:var(--teal);color:#111;padding:1.3rem 0}
.cta-inner h2{font-family:"Oswald",sans-serif;text-transform:uppercase;margin:0}
.site-footer{background:#0a0a0a;padding:1.3rem 0 1.7rem;border-top:3px solid var(--teal)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}
.footer-brand{font-family:"Oswald",sans-serif;font-size:1.55rem;color:var(--teal);letter-spacing:.06em;text-transform:uppercase}
.foot-nav{display:flex;flex-wrap:wrap;gap:.32rem .65rem}
.foot-nav a{color:var(--teal);text-decoration:none}
.legal{margin-top:1rem;color:#8f9a93;font-size:.84rem}

@keyframes hookSway{
  0%,100%{transform:rotate(-9deg)}
  50%{transform:rotate(8deg)}
}
@keyframes mascotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes kenBurns{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.08) translate(-1.4%,-1%)}
}
@keyframes sheen{
  0%{left:-42%}
  55%,100%{left:130%}
}
@keyframes ctaSpring{
  0%,100%{transform:translateY(0)}
  40%{transform:translateY(-3px)}
  62%{transform:translateY(1px)}
}

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

@media (max-width:1099px){
  .header-bar{flex-wrap:wrap}
  .hang-hook{display:none}
  .site-nav{
    display:none;width:100%;flex-direction:column;background:#111;padding:.35rem 0 .65rem;
  }
  body.nav-open .site-nav{display:flex}
  .nav-toggle{display:block;margin-left:auto}
  .header-actions{margin-left:0}
  .hero-shell,.page-hero-shell{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .chapter-grid{grid-template-columns:1fr 1fr}
  .odds-row{grid-template-columns:1fr;gap:.38rem}
  .promo-fx{grid-template-columns:1fr;min-height:196px}
  .promo-cta{justify-self:start}
}

@media (max-width:420px){
  .wrap{width:calc(100% - 1.05rem)}
  .lead,.promo-sub,.hero-copy,.page-hero-copy{overflow-wrap:anywhere}
  .cta-row .btn{flex:1 1 auto}
  .brand-name{font-size:1.12rem}
  .card-grid{grid-template-columns:1fr 1fr}
  .chapter-grid{grid-template-columns:1fr}
}