:root {
  --purple: #9E3CF3;
  --blue: #16B5EC;
  --pink: #E6A1D3;
  --yellow: #F3D078;
  --green: #60C681;

  --bg-dark: #0B0B0F;
  --bg-section: #111118;
}

body {
  background-color: var(--bg-dark);
  color: white;
  font-family: 'Inter', sans-serif;
}

/* Announcement Bar */
.announcement-bar {
  background: linear-gradient(90deg, var(--purple), var(--blue));
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

/* Headings */
h1, h2, h3 {
  color: var(--purple);
  letter-spacing: 1px;
}

/* Hero Gradient */
.hero-gradient {
  background: radial-gradient(circle at center,
    rgba(158, 60, 243, 0.25),
    rgba(22, 181, 236, 0.15),
    #0B0B0F 70%);
}

/* Section Alt */
.section-alt {
  background-color: var(--bg-section);
}

/* Buttons */
.btn-primary-custom {
  background-color: var(--green);
  border: none;
  color: black;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: var(--blue);
  transform: translateY(-2px);
}

/* Accent Text */
.text-yellow {
  color: var(--yellow);
}

.text-pink {
  color: var(--pink);
}

/* Glow */
.glow {
  text-shadow: 0 0 12px var(--purple);
}

/* Lineup Cards */
.lineup-card {
  background-color: var(--bg-section);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: 0.3s ease;
}

.lineup-card:hover {
  border-color: var(--blue);
  transform: translateY(-5px);
}

/* Social Links */
.social-link {
  color: var(--pink);
  text-decoration: none;
}

.social-link:hover {
  color: var(--blue);
}

/* Custom Form Inputs */
.custom-input {
  background-color: #111118;
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  transition: 0.3s ease;
}

.custom-input:focus {
  background-color: #111118;
  border-color: var(--blue);
  box-shadow: 0 0 0 0.2rem rgba(22, 181, 236, 0.25);
  color: white;
}

.form-label {
  color: var(--yellow);
  font-weight: 500;
}

/* Hero Image Background */
.hero-section {
  position: relative;
  background: url("../../images/1000006279.jpg") center center / cover no-repeat;
  background-attachment: fixed;
  color: white;
}

/* Dark overlay for readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 15, 0.7),
    rgba(11, 11, 15, 0.85)
  );
  z-index: 1;
}

/* Ensure content sits above overlay */
.hero-section .container {
  z-index: 2;
}

/* Countdown */
.countdown {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 20px;
}

.countdown-item {
  text-align: center;
}

.countdown-item span {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  display: block;
}

.countdown-item small {
  color: var(--yellow);
  letter-spacing: 1px;
}

/* Rules Section Styling */
.rules-list .list-group-item {
  color: var(--yellow);
  font-weight: 500;
  background-color: transparent;
  border-color: rgba(255,255,255,0.15);
}

.rules-list .list-group-item a {
  color: var(--pink);
}

.rules-list {
  background-color: var(--bg-section);
  border-radius: 12px;
  padding: 15px;
}

/* Ticket Cards */
.ticket-card {
  background-color: var(--bg-section);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  transition: 0.3s ease;
}

.ticket-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
}

/* Lineup Page */

.lineup-hero {
  background: radial-gradient(circle at top,
    rgba(158, 60, 243, 0.2),
    rgba(22, 181, 236, 0.1),
    #0B0B0F 70%);
}

.lineup-image {
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  transition: 0.4s ease;
}

.lineup-image:hover {
  transform: scale(1.02);
  border-color: var(--blue);
}

/* Application Cards */
.app-card {
  background-color: var(--bg-section);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  transition: 0.3s ease;
}

.app-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue);
}