:root{
  --bg:#0b0f12;
  --accent:#ff8a00;
  --accent2:#b7b7b7;
  --text:#e6eef3;
  --muted:#9aa5b1;
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:900px;margin:0 auto;padding:20px}
.site-header{background:rgba(0,0,0,0.2);position:sticky;top:0}
.nav{display:flex;gap:12px;padding:10px}
.nav a{color:var(--muted);text-decoration:none}
.nav a.active,.nav a:hover{color:var(--accent)}
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center}
.hero-logo{width:150px;height:150px;object-fit:contain;animation:fadeIn 1.5s ease}
h1.hidden,p.hidden,.cta-row.hidden{opacity:0;transition:opacity 1s}
h1,p,.cta-row{margin:12px 0}
.btn{background:var(--accent);color:#000;padding:10px 18px;border-radius:6px;text-decoration:none;margin:5px;display:inline-block}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--text)}
.site-footer{padding:20px;text-align:center;color:var(--muted)}
.matches{margin:20px 0}
.match{background:rgba(255,255,255,0.05);padding:12px;margin-bottom:10px;border-radius:8px}
@keyframes fadeIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}