/* FIXED HEADER STYLES */
header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
  padding: 1.5rem; text-align: center; border-bottom: 1px solid #1a1a1a;
  z-index: 10000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 255, 231, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
header h1 {
  color: #00ffe7; margin: 0 0 1.5rem 0; font-size: 2rem; font-weight: 700;
  position: relative; z-index: 1; text-shadow: 0 0 20px rgba(0, 255, 231, 0.3);
}

nav { margin: 0; position: relative; z-index: 10001; }
nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem;
}
nav li { margin: 0; position: relative; }

.dropdown { position: relative; z-index: 99999; }
.dropdown-content {
  display: none; position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px);
  border: 2px solid #00ffe7; border-radius: 12px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 255, 231, 0.3);
  z-index: 999999; min-width: 180px; padding: 0.8rem 0; opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown:hover .dropdown-content,
.dropdown-content:hover { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.dropdown::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; background: transparent; z-index: 999998; }
.dropdown:hover::before { display: block; }

.dropdown-content a {
  display: block; padding: 0.75rem 1.25rem; color: #ccc; text-decoration: none;
  font-size: 0.85rem; font-weight: 500; border-radius: 0; background: transparent;
  border: none; box-shadow: none; backdrop-filter: none; transition: all 0.3s ease; white-space: nowrap;
  position: relative; z-index: 999999;
}
.dropdown-content a::before { display: none; }
.dropdown-content a:hover {
  background: rgba(0, 255, 231, 0.1); color: #00ffe7; transform: translateX(5px);
  border-radius: 8px; margin: 0 0.5rem;
}
.dropdown-content a:active { background: rgba(0, 255, 231, 0.2); color: #7fffd4; }

.dropdown > a::after { content: ' ▼'; font-size: 0.7em; color: #00ffe7; transition: transform 0.3s ease; }
.dropdown:hover > a::after { transform: rotate(180deg); color: #7fffd4; }

nav a {
  font-weight: 600; color: #ccc; text-decoration: none; padding: 0.75rem 1.25rem;
  display: inline-block; border-radius: 8px; transition: all 0.3s ease; font-size: 0.95rem; white-space: nowrap;
}
nav a:hover { color: #00ffe7; background: rgba(0, 255, 231, 0.1); transform: translateY(-1px); }
nav a.cta {
  background: linear-gradient(135deg, #00ffe7, #00d4aa); color: #000; border-radius: 25px;
  font-weight: 700; padding: 0.75rem 1.5rem; margin: 0; transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 255, 231, 0.3);
}
nav a.cta:hover {
  background: linear-gradient(135deg, #7fffd4, #00ffe7); color: #000; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 231, 0.4);
}