:root{
  --bg:#0a0d14;
  --bg-2:#0f131c;
  --red:#e2222c;
  --red-dark:#b5181f;
  --green:#1fae5a;
  --green-dark:#158a47;
  --text:#f4f6f8;
  --muted:#9aa3af;
  --line:rgba(255,255,255,0.08);
  --card:#11151e;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.container{max-width:1440px; margin:0 auto; padding:0 40px;}
img{max-width:100%; display:block;}

/* HEADER */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(10,13,20,0.9); backdrop-filter:blur(8px);
  z-index:50;
}
.logo{display:flex; align-items:center; gap:14px;}
.logo-mark{
  width:52px; height:52px; border-radius:50%;
  border:2px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
}
.logo-mark svg{width:26px; height:26px; fill:var(--red);}
.logo-text{display:flex; flex-direction:column; line-height:1.1;}
.logo-text .name{font-size:22px; font-weight:800; letter-spacing:0.5px;}
.logo-text .name span{color:var(--red);}
.logo-text .tag{font-size:10px; letter-spacing:3px; color:var(--muted); margin-top:2px;}

nav{display:flex; align-items:center; gap:4px;}
nav a{
  padding:10px 16px; font-size:14.5px; font-weight:500; color:var(--text);
  border-radius:6px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
nav a:hover{background:rgba(255,255,255,0.06);}
nav a.active{background:var(--red); color:#fff;}
nav a.more::after{content:" ▾"; font-size:11px; color:var(--muted);}

.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:26px; height:2px; background:var(--text); display:block;}

/* HERO (home) */
.hero{
  position:relative;
  min-height:640px;
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(226,34,44,0.10), transparent 60%),
    linear-gradient(180deg, #0a0d14 0%, #0c1018 55%, #0a0d14 100%);
}
.stadium-art{
  position:absolute; right:-5%; top:0; bottom:0; width:78%;
  opacity:0.9;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 22%);
          mask-image:linear-gradient(90deg, transparent 0%, black 22%);
}
.badge-live{
  position:absolute; top:34px; right:40px;
  display:flex; font-weight:800; font-size:15px; letter-spacing:2px;
  border:1.5px solid #fff; z-index:5;
}
.badge-live span{padding:9px 16px;}
.badge-live .sport{color:#fff;}
.badge-live .live{background:var(--red); color:#fff;}

.hero-content{position:relative; z-index:2; max-width:760px; padding:0 40px;}
.hero-content h1{
  font-size:56px; font-weight:900; line-height:1.08; letter-spacing:0.5px;
  text-transform:uppercase;
}
.hero-content p{
  margin-top:22px; font-size:17px; line-height:1.6; color:#cfd4da; max-width:560px;
}
.cta{
  margin-top:34px; display:inline-flex; align-items:center; gap:12px;
  background:var(--green); color:#fff; font-weight:700; font-size:15px;
  padding:16px 30px; border-radius:8px; letter-spacing:0.5px;
  box-shadow:0 8px 24px rgba(31,174,90,0.28);
  transition:transform .15s ease, background .15s ease;
  border:none; cursor:pointer;
}
.cta:hover{background:var(--green-dark); transform:translateY(-1px);}
.cta .play{
  width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:11px solid #fff;
}

/* FEATURES STRIP */
.features{
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.feature{
  display:flex; align-items:center; gap:16px;
  padding:30px 40px;
  border-right:1px solid var(--line);
}
.feature:last-child{border-right:none;}
.feature .icon{
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.feature .icon svg{width:22px; height:22px; stroke:var(--red); fill:none;}
.feature h3{font-size:14.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;}
.feature p{font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.4;}

/* PAGE HEADER (inner pages) */
.page-head{
  padding:56px 40px 40px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #0d1018 0%, #0a0d14 100%);
}
.page-head .eyebrow{color:var(--red); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase;}
.page-head h1{font-size:36px; font-weight:900; margin-top:10px; text-transform:uppercase; letter-spacing:0.5px;}
.page-head p{margin-top:12px; color:var(--muted); font-size:15px; max-width:600px;}

/* FILTER PILLS */
.filters{display:flex; flex-wrap:wrap; gap:10px; padding:28px 40px 0;}
.pill{
  padding:9px 18px; border-radius:20px; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .15s ease; background:transparent;
}
.pill.active, .pill:hover{background:var(--red); border-color:var(--red); color:#fff;}

/* NEWS GRID */
.news-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  padding:32px 40px 60px;
}
.news-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.news-card:hover{transform:translateY(-3px); border-color:rgba(226,34,44,0.4);}
.news-thumb{height:170px; position:relative; overflow:hidden;}
.news-thumb .tag{
  position:absolute; top:12px; left:12px; background:var(--red); color:#fff;
  font-size:11px; font-weight:700; padding:5px 10px; border-radius:4px; letter-spacing:0.5px; z-index:2;
}
.news-body{padding:18px 20px 22px;}
.news-body .date{font-size:12px; color:var(--muted); letter-spacing:0.5px;}
.news-body h3{font-size:16.5px; font-weight:700; margin-top:8px; line-height:1.35;}
.news-body p{font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.5;}

/* STREAMS GRID */
.stream-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  padding:32px 40px 60px;
}
.stream-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.stream-thumb{height:150px; position:relative; display:flex; align-items:center; justify-content:center;}
.stream-thumb .live-dot{
  position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,0.55); padding:5px 10px; border-radius:20px; font-size:11px; font-weight:700;
}
.stream-thumb .live-dot .dot{width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.stream-thumb .play-btn{
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.12);
  border:1.5px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center;
}
.stream-thumb .play-btn .tri{
  width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff;
  margin-left:3px;
}
.stream-body{padding:16px 20px 20px;}
.stream-body .sport-label{font-size:11.5px; color:var(--red); font-weight:700; letter-spacing:1px; text-transform:uppercase;}
.stream-body h3{font-size:15.5px; font-weight:700; margin-top:8px;}
.stream-body .viewers{font-size:12.5px; color:var(--muted); margin-top:8px;}

/* RESULTS TABLE */
.results-wrap{padding:32px 40px 60px;}
.result-day{margin-bottom:32px;}
.result-day h2{font-size:15px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:14px;}
.match-row{
  display:grid; grid-template-columns:100px 1fr 90px 1fr 120px;
  align-items:center; gap:16px;
  padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:10px;
  margin-bottom:10px; font-size:14.5px;
}
.match-row .league{color:var(--muted); font-size:12px;}
.match-row .team{font-weight:600; display:flex; align-items:center; gap:10px;}
.match-row .team.right{justify-content:flex-end; text-align:right;}
.match-row .score{
  text-align:center; font-weight:800; font-size:16px;
  background:rgba(255,255,255,0.04); border-radius:6px; padding:6px 0;
}
.match-row .status{font-size:12px; font-weight:700; text-align:right;}
.match-row .status.live{color:var(--red);}
.match-row .status.finished{color:var(--muted);}
.team-dot{width:26px; height:26px; border-radius:50%; flex-shrink:0;}

footer{
  border-top:1px solid var(--line); padding:30px 40px; text-align:center;
  color:var(--muted); font-size:13px;
}

@media (max-width:1000px){
  nav{display:none;}
  .burger{display:flex;}
  .hero-content h1{font-size:38px;}
  .features{grid-template-columns:repeat(2, 1fr);}
  .feature{border-bottom:1px solid var(--line);}
  .news-grid, .stream-grid{grid-template-columns:repeat(2, 1fr);}
  .match-row{grid-template-columns:70px 1fr 70px 1fr 90px; font-size:13px;}
}
@media (max-width:560px){
  header{padding:16px 20px;}
  .hero-content{padding:0 20px;}
  .hero-content h1{font-size:30px;}
  .features{grid-template-columns:1fr;}
  .badge-live{right:20px; top:20px;}
  .news-grid, .stream-grid{grid-template-columns:1fr; padding:24px 20px 40px;}
  .page-head, .filters, .results-wrap{padding-left:20px; padding-right:20px;}
  .match-row{grid-template-columns:1fr; text-align:left;}
  .match-row .team.right{justify-content:flex-start; text-align:left;}
  .match-row .status{text-align:left;}
}