:root {
  --bg: #030a12;
  --bg-soft: #07131f;
  --panel: #091725;
  --panel-2: #0e2031;
  --text: #f7fafc;
  --muted: #9fb0bf;
  --green: #13d36c;
  --green-dark: #087d47;
  --red: #ef233c;
  --blue: #175cff;
  --line: rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 70% 0%, rgba(0, 112, 255, .13), transparent 35%),
    linear-gradient(180deg, #020810 0%, #06111c 48%, #020810 100%);
  font-family: Inter, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
  background: rgba(3,10,18,.88);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.brand-mark {
  width: 37px; height: 37px;
  display: grid; place-items: center;
  background: var(--green);
  color: #04110a;
  border-radius: 12px 12px 12px 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 28px rgba(19,211,108,.35);
}
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong { display:block; font-size: 21px; letter-spacing: -.8px; }
.brand strong span { color: var(--green); }
.brand small { display:block; margin-top: 2px; font-size: 7px; color: var(--muted); letter-spacing: .8px; }

.main-nav { display: flex; justify-content: center; align-items:center; gap: 32px; }
.main-nav a { position:relative; padding: 26px 0 23px; font-size: 13px; font-weight: 700; }
.main-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  transform: scaleX(0); background:var(--green); transition:.2s;
}
.main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); }
.main-nav a.active { color: var(--green); }

.header-actions { display:flex; align-items:center; gap:12px; }
.location-btn, .icon-btn, .menu-toggle {
  color:var(--text); border:0; background:transparent;
}
.location-btn { font-size:12px; font-weight:600; }
.icon-btn { font-size:27px; }
.menu-toggle { display:none; font-size:24px; }

main { width:min(1500px, 100%); margin:auto; }

.hero {
  min-height: 560px;
  display:grid;
  grid-template-columns: 43% 57%;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-copy { padding:58px 3vw 44px 3vw; position:relative; z-index:2; }
.eyebrow { color:var(--green); font-size:11px; font-weight:800; letter-spacing:1.5px; }
.hero h1 {
  margin:12px 0 20px;
  font-size:clamp(43px, 4.3vw, 74px);
  line-height:.98;
  letter-spacing:-3px;
}
.green { color:var(--green); }
.red { color:var(--red); }
.hero-subtitle { max-width:520px; margin:0 0 26px; color:#c7d1d9; line-height:1.7; font-size:17px; }

.hero-search { width:min(520px, 100%); display:flex; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.hero-search input { flex:1; min-width:0; padding:18px 19px; border:0; outline:0; color:#17202a; }
.hero-search button { width:58px; border:0; background:linear-gradient(135deg, #18d873, #0a9a51); color:white; font-size:25px; }

.hero-stats { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero-stats div {
  min-width:125px; padding:12px 15px;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(8,24,38,.72);
}
.hero-stats strong { display:block; font-size:16px; }
.hero-stats span { color:var(--muted); font-size:11px; }

.hero-visual {
  position:relative;
  min-height:560px;
  background:
    linear-gradient(90deg, #06101d 0%, transparent 20%),
    radial-gradient(circle at 40% 30%, rgba(15,91,216,.48), transparent 35%),
    radial-gradient(circle at 80% 25%, rgba(234,35,60,.35), transparent 35%),
    linear-gradient(140deg, #07172a, #100b1c 70%, #020710);
}
.hero-visual::before {
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, black, transparent);
}
.stadium-glow {
  position:absolute; width:80%; height:55%; left:10%; top:14%;
  border-radius:50%;
  border:1px solid rgba(43,126,255,.3);
  box-shadow:0 0 120px rgba(20,94,255,.22), inset 0 0 80px rgba(240,30,65,.15);
  transform:perspective(600px) rotateX(68deg);
}
.athlete {
  position:absolute; top:72px; width:36%; height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.athlete::before { content:""; position:absolute; inset:0; opacity:.9; }
.athlete > * { position:relative; z-index:1; }
.athlete-football { left:8%; clip-path:polygon(10% 0,100% 0,88% 100%,0 100%); }
.athlete-football::before { background:radial-gradient(circle, #dc2430, #381018 70%); }
.athlete-basketball { right:7%; clip-path:polygon(12% 0,100% 0,100% 100%,0 100%); }
.athlete-basketball::before { background:radial-gradient(circle, #0e58a2, #10112b 72%); }
.sport-ball { font-size:92px; filter:drop-shadow(0 18px 25px rgba(0,0,0,.45)); }
.athlete strong { font-size:36px; margin-top:4px; }
.athlete span { text-transform:uppercase; font-size:11px; letter-spacing:2px; color:#dbe7f0; }

.league-switcher {
  position:absolute; left:9%; right:6%; bottom:34px;
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
}
.league-card {
  min-height:130px; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  padding:24px; border:1px solid rgba(255,255,255,.18); color:white;
}
.nfl-card { background:linear-gradient(135deg, rgba(6,74,44,.96), rgba(4,33,24,.96)); }
.nba-card { background:linear-gradient(135deg, rgba(111,13,22,.98), rgba(44,6,12,.98)); }
.league-icon { font-size:38px; }
.league-card strong { display:block; font-size:30px; text-align:left; }
.league-card small { display:block; color:#cbd5dc; text-align:left; }
.league-card b { color:var(--green); font-size:12px; }

.section { margin:22px 18px 0; padding:26px; border-radius:10px; }
.light-panel { background:#f7f9fb; color:#0b1520; box-shadow:var(--shadow); }
.dark-panel { background:linear-gradient(180deg, #071421, #06101a); border:1px solid var(--line); }
.section-heading {
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  margin-bottom:20px;
}
.section-heading > div:first-child { display:flex; align-items:center; gap:10px; }
.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.5px; text-transform:uppercase; }
.section-heading a { color:var(--green); font-size:12px; }
.heading-line { width:21px; height:3px; background:var(--green); border-radius:99px; }
.dark-heading .heading-line { background:#0da655; }
.filters { display:flex; gap:8px; }
.filter-btn {
  border:1px solid #d7dee5; background:white; padding:7px 13px; border-radius:999px;
  font-size:12px; font-weight:700; color:#32404c;
}
.filter-btn.active { background:#0f9c53; border-color:#0f9c53; color:white; }

.games-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.game-card {
  position:relative; min-height:250px; padding:16px;
  border:1px solid #dfe5ea; border-radius:9px; background:white;
  box-shadow:0 10px 24px rgba(13,32,52,.07);
  display:flex; flex-direction:column;
}
.game-top { display:flex; justify-content:space-between; align-items:center; }
.league-tag { font-size:10px; font-weight:800; color:white; padding:5px 8px; border-radius:4px; }
.league-tag.NFL { background:#00603a; }
.league-tag.NBA { background:#df1628; }
.game-time { font-size:11px; color:#66727d; }
.matchup { flex:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:16px 0; }
.team { text-align:center; }
.team-logo {
  width:66px; height:66px; margin:auto; display:grid; place-items:center;
  border-radius:50%; background:#f3f6f9; font-size:28px; font-weight:800;
  border:1px solid #e3e8ed;
}
.team strong { display:block; margin-top:10px; font-size:13px; }
.vs { font-weight:800; font-size:12px; color:#303943; }
.game-meta { color:#64717d; font-size:11px; line-height:1.75; }
.watch-btn {
  display:block; margin:15px -16px -16px; padding:13px;
  text-align:center; color:#078948; font-weight:800; font-size:12px;
  border-top:1px solid #e4e9ed; transition:.2s;
}
.watch-btn:hover { background:#eafaf2; }

.zones-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.zone-card {
  border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:#081522; transition:.2s;
}
.zone-card:hover { transform:translateY(-4px); border-color:rgba(19,211,108,.5); }
.zone-image {
  height:145px; position:relative; overflow:hidden;
  background:
    linear-gradient(to top, rgba(0,0,0,.4), transparent),
    radial-gradient(circle at 20% 30%, #ff8a31, transparent 20%),
    linear-gradient(135deg,#10273c,#050a10 55%,#371a09);
}
.zone-image::after {
  content:"▰  ▰  ▰"; position:absolute; left:0; right:0; top:42px;
  text-align:center; color:#5ad4ff; font-size:27px; text-shadow:0 0 20px #2eb8ff;
}
.favorite { position:absolute; right:12px; top:10px; font-size:22px; z-index:2; }
.zone-body { padding:14px; }
.zone-body h3 { margin:0 0 7px; font-size:14px; }
.rating { color:#ffc928; font-size:12px; }
.rating span { color:var(--muted); }
.zone-city { margin:8px 0; color:#c7d1da; font-size:11px; }
.tags { display:flex; gap:6px; flex-wrap:wrap; }
.tags span { border:1px solid #42505d; border-radius:5px; padding:4px 7px; font-size:9px; color:#d4dde5; }
.distance { margin-top:12px; text-align:right; font-size:9px; color:var(--muted); }

.split-section {
  display:grid; grid-template-columns:1fr 1.05fr; gap:22px;
  background:linear-gradient(180deg, #071421, #06101a);
  border:1px solid var(--line);
}
.compact { margin-bottom:15px; }
.compact h2 { font-size:16px; }

.blog-list { display:grid; gap:12px; }
.blog-item { display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:center; }
.blog-thumb {
  height:80px; border-radius:7px;
  background:linear-gradient(135deg,#4f160d,#0e3145 55%,#111);
  position:relative; overflow:hidden;
}
.blog-thumb::after {
  content:"SPORTS"; position:absolute; inset:0; display:grid; place-items:center;
  font-weight:900; letter-spacing:2px; color:rgba(255,255,255,.8);
}
.blog-category { color:var(--green); font-size:9px; font-weight:800; }
.blog-item h3 { margin:4px 0; font-size:13px; }
.blog-item p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.blog-meta { display:block; margin-top:6px; color:#8092a2; font-size:9px; }

.cities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.city-card {
  min-height:110px; border-radius:7px; padding:12px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:
    linear-gradient(to top, rgba(1,7,14,.95), rgba(1,7,14,.05)),
    linear-gradient(135deg, #0e3a6b, #b1602a);
  border:1px solid var(--line);
}
.city-card:nth-child(2n) { background:linear-gradient(to top, rgba(1,7,14,.95), transparent), linear-gradient(135deg,#4a2144,#df7547); }
.city-card:nth-child(3n) { background:linear-gradient(to top, rgba(1,7,14,.95), transparent), linear-gradient(135deg,#143865,#186b80); }
.city-card strong { font-size:12px; }
.city-card span { color:#ced8df; font-size:9px; margin-top:4px; }

.newsletter {
  margin:22px 38px;
  padding:20px 25px;
  display:grid; grid-template-columns:auto 1fr minmax(320px, 520px); gap:18px; align-items:center;
  border-radius:9px; border:1px solid rgba(19,211,108,.45);
  background:linear-gradient(90deg, rgba(3,87,49,.58), rgba(8,73,61,.38));
}
.newsletter-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:9px; background:#0b9c57; font-size:24px; }
.newsletter h2 { margin:0 0 4px; font-size:17px; }
.newsletter p { margin:0; color:#c4d0d8; font-size:11px; }
.newsletter form { display:flex; border-radius:7px; overflow:hidden; }
.newsletter input { flex:1; min-width:0; padding:14px; border:0; outline:0; }
.newsletter button { border:0; min-width:145px; background:linear-gradient(135deg,#14cb6c,#07984f); color:white; font-weight:800; }

footer { padding:36px 4vw 20px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:50px; }
.footer-grid h3 { font-size:11px; text-transform:uppercase; }
.footer-grid p { max-width:260px; color:var(--muted); font-size:11px; line-height:1.7; }
.footer-grid > div > a:not(.brand) { display:block; color:#c7d1da; font-size:10px; margin:10px 0; }
.socials { display:flex; gap:8px; margin-top:14px; }
.socials a { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#0d1c2a; }
.footer-bottom { margin-top:30px; padding-top:16px; border-top:1px solid var(--line); color:#657583; font-size:9px; }
.footer-bottom span { float:right; }

.hidden { display:none !important; }
.empty-state { padding:30px; text-align:center; color:#6d7882; }
.toast {
  position:fixed; right:22px; bottom:22px; z-index:100;
  background:#0d8f4d; color:white; padding:13px 18px;
  border-radius:8px; box-shadow:var(--shadow);
  transform:translateY(120px); opacity:0; transition:.25s;
}
.toast.show { transform:translateY(0); opacity:1; }

@media (max-width: 1050px) {
  .main-nav { display:none; position:absolute; top:72px; left:0; right:0; padding:20px; background:#06111c; flex-direction:column; gap:0; }
  .main-nav.open { display:flex; }
  .main-nav a { padding:12px 0; width:100%; text-align:center; }
  .menu-toggle { display:block; justify-self:center; }
  .header-actions { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding-bottom:20px; }
  .hero-visual { min-height:500px; }
  .games-grid, .zones-grid { grid-template-columns:repeat(2,1fr); }
  .split-section { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .site-header { padding:0 18px; }
  .brand { min-width:0; }
  .brand strong { font-size:18px; }
  .hero-copy { padding:38px 20px 16px; }
  .hero h1 { font-size:46px; letter-spacing:-2px; }
  .hero-visual { min-height:470px; }
  .athlete { width:46%; height:240px; top:42px; }
  .athlete-football { left:2%; }
  .athlete-basketball { right:2%; }
  .sport-ball { font-size:66px; }
  .athlete strong { font-size:25px; }
  .league-switcher { left:4%; right:4%; bottom:20px; }
  .league-card { min-height:115px; grid-template-columns:auto 1fr; padding:14px; }
  .league-card b { grid-column:1/-1; }
  .league-card strong { font-size:20px; }
  .section { margin:12px 10px 0; padding:16px; }
  .games-grid, .zones-grid { grid-template-columns:1fr; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .cities-grid { grid-template-columns:repeat(2,1fr); }
  .blog-item { grid-template-columns:95px 1fr; }
  .newsletter { margin:12px 10px; grid-template-columns:auto 1fr; padding:17px; }
  .newsletter form { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .footer-grid > div:first-child { grid-column:1/-1; }
  .footer-bottom span { float:none; display:block; margin-top:8px; }
}