body {
  margin: 0;
  background: #0b0b12;
  color: white;
  font-family: Arial;
}

.event-hero {
  text-align: center;
  padding: 60px 20px;
  background: radial-gradient(circle, #1a1a1a, #000);
  border-bottom: 2px solid gold;
}

.event-hero h1 {
  color: gold;
  font-size: 40px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px;
}

.event-card {
  padding: 25px;
  border-radius: 12px;
  background: #151520;
  text-align: center;
  transition: 0.3s;
  border: 1px solid #222;
}

.event-card:hover {
  transform: translateY(-8px);
  border-color: gold;
}

.event-card h2 {
  margin-bottom: 10px;
}

.btn {
  margin-top: 15px;
  padding: 10px 20px;
  background: gold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.fire { box-shadow: 0 0 20px red; }
.gold { box-shadow: 0 0 20px gold; }
.blue { box-shadow: 0 0 20px dodgerblue; }