* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --accent: #ff5a3c;
  --bg: #0b0d12;
}
html, body { min-height: 100%; background:
  radial-gradient(circle at 20% 0%, rgba(255,90,60,.10), transparent 45%),
  radial-gradient(circle at 90% 20%, rgba(90,160,255,.10), transparent 40%),
  var(--bg);
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif; color: #fff;
  -webkit-text-size-adjust: 100%; }

.hub { max-width: 1100px; margin: 0 auto; padding: 56px 24px 80px; }

.hub-head { text-align: center; margin-bottom: 44px; }
.hub-head h1 { font-size: 52px; letter-spacing: 6px; font-weight: 800;
  background: linear-gradient(90deg,#ff7a4d,#ff3d6e); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; }
.hub-head p { color: #9aa3b2; margin-top: 10px; letter-spacing: 1px; font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px; }

.card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: rgba(17,21,30,.85); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; overflow: hidden; transition: transform .12s, border-color .12s, box-shadow .12s; }
.card.live:hover { transform: translateY(-4px); border-color: rgba(255,90,60,.55);
  box-shadow: 0 18px 44px rgba(0,0,0,.55); }

.thumb { position: relative; height: 158px; display: flex; align-items: center; justify-content: center;
  font-size: 72px; background: linear-gradient(135deg,#1c2436,#2a1f2e); }
.card.live .thumb { background: linear-gradient(135deg,#2a3550,#3a2640); }

.badge { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; padding: 4px 10px; border-radius: 20px; }
.badge.on { background: rgba(74,222,128,.18); color: #4ade80; border: 1px solid rgba(74,222,128,.4); }
.badge.soon { background: rgba(255,255,255,.06); color: #9aa3b2; border: 1px solid rgba(255,255,255,.14); }

.card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h2 { font-size: 20px; letter-spacing: 1px; }
.card-body p { color: #9aa3b2; font-size: 13px; line-height: 1.6; flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tags span { font-size: 11px; color: #cbd2dd; background: rgba(255,255,255,.06);
  padding: 3px 9px; border-radius: 6px; }

.card.soon { opacity: .62; cursor: default; }
.card.soon .thumb { filter: grayscale(.4); }

.hub-foot { text-align: center; margin-top: 48px; color: #5d6675; font-size: 12px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .hub { padding: 36px 16px 60px; }
  .hub-head h1 { font-size: 38px; letter-spacing: 4px; }
}