@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#05070a;
  --panel:#0b0f14;
  --panel2:#10151c;
  --line:#1d2834;
  --text:#f4f7fb;
  --muted:#8d98a5;
  --blue:#00aaff;
  --orange:#ff8a00;
  --gold:#ffb11b;
  --green:#20e879;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Space Grotesk",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(5,7,10,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-family:Rajdhani;font-weight:700;letter-spacing:1px}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--blue);transform:skew(-10deg);color:var(--blue);box-shadow:0 0 18px rgba(0,170,255,.25)}
.nav nav{display:flex;gap:30px;color:#aab4c0;font-size:13px;text-transform:uppercase;letter-spacing:1.5px}
.nav nav a:hover{color:var(--blue)}
.hero{min-height:620px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(circle at 75% 45%,rgba(0,170,255,.13),transparent 30%),radial-gradient(circle at 20% 80%,rgba(255,138,0,.08),transparent 30%)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 55%,rgba(0,170,255,.045) 55% 56%,transparent 56% 100%),linear-gradient(25deg,transparent 0 70%,rgba(255,138,0,.035) 70% 71%,transparent 71%);pointer-events:none}
.hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,black,transparent)}
.hero-content{position:relative;padding:100px 0}
.eyebrow{font-family:Rajdhani;font-size:13px;letter-spacing:3px;font-weight:700;color:var(--blue);margin-bottom:16px}
.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--green)}
h1,h2,h3{font-family:Rajdhani,sans-serif}
h1{font-size:clamp(64px,10vw,130px);line-height:.82;letter-spacing:-3px}
h1 span,h2 span{color:var(--orange)}
.hero-copy{max-width:570px;color:var(--muted);line-height:1.8;margin:30px 0}
.hero-link{display:inline-flex;gap:18px;align-items:center;border-left:3px solid var(--orange);padding:12px 18px;background:rgba(255,138,0,.06);font-family:Rajdhani;font-weight:700;letter-spacing:1.5px}
.hero-link span{font-size:22px;color:var(--orange)}
.section{padding:90px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px}
.section-heading h2{font-size:46px;line-height:1}
.section-note{font-size:11px;letter-spacing:2px;color:#65717d}
.tournament-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tournament-card{background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;transition:.25s}
.tournament-card:hover{transform:translateY(-4px);border-color:#314456;box-shadow:0 16px 45px rgba(0,0,0,.35)}
.card-top{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.5px}
.status{color:var(--green);font-weight:700}
.status i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px}
.status.upcoming{color:var(--orange)}
.status.upcoming:before{content:"";display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:6px}
.game{color:#778390}
.game-art{height:190px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Rajdhani;font-size:30px;line-height:.8;letter-spacing:5px;background:linear-gradient(135deg,#071827,#0d3145 45%,#080d12);color:#bfe9ff;position:relative}
.game-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(0,170,255,.12));}
.game-art.alt{background:linear-gradient(135deg,#17100a,#38210c 50%,#0c0d10);color:#ffd29b}
.game-art.third{background:linear-gradient(135deg,#090d19,#152241 55%,#0a0d11);color:#b8c9ff}
.game-art.fourth{background:linear-gradient(135deg,#15100b,#33200d 55%,#0c0c0d);color:#ffdba5}
.game-art strong{font-size:44px;letter-spacing:2px}
.card-body{padding:22px}
.card-label{font-size:10px;letter-spacing:2px;color:var(--blue);margin-bottom:7px}
.card-body h3{font-size:32px}
.meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1px;color:#8b96a3}
.matches-section{background:#070a0e;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.match-list{border:1px solid var(--line)}
.match-row{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}
.match-row:last-child{border-bottom:0}
.match-row small{display:block;color:#66727f;font-size:10px;letter-spacing:1.5px;margin-bottom:5px}
.match-row strong{font-family:Rajdhani;font-size:22px}
.match-row>b{text-align:center;color:var(--orange);font-family:Rajdhani}
.match-row .right{text-align:right}
.about{padding:110px 0;background:linear-gradient(110deg,rgba(0,170,255,.04),transparent 50%,rgba(255,138,0,.04))}
.about-inner{max-width:780px}
.about h2{font-size:54px;margin-bottom:20px}
.about p:last-child{color:var(--muted);line-height:1.8}
footer{border-top:1px solid var(--line);padding:28px 0;color:#68737f;font-size:10px;letter-spacing:1.5px}
.footer-inner{display:flex;justify-content:space-between}
@media(max-width:700px){
  .nav nav{display:none}
  .hero{min-height:540px}
  h1{font-size:70px}
  .section{padding:65px 0}
  .section-heading{display:block}
  .section-note{margin-top:15px}
  .section-heading h2,.about h2{font-size:38px}
  .tournament-grid{grid-template-columns:1fr}
  .match-row{grid-template-columns:1fr 45px 1fr;padding:16px 12px}
  .match-row strong{font-size:17px}
  .footer-inner{display:block;line-height:2.2}
}