@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');

:root {
  --primary-color: #8B5CF6;
  --secondary-color: #0F0F23;
  --third-color: #1A1A2E;
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8D1;
  --accent-primary: #00D9FF;
  --accent-secondary: #A855F7;
  --gradient-start: #6366F1;
  --gradient-end: #8B5CF6;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Ubuntu', sans-serif;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(images/background.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--text-primary);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* Black Hole Effect - Subtle Background */
.blackhole-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.4;
}

.blackhole-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.05) 60%,
    rgba(0, 0, 0, 0.1) 80%,
    rgba(0, 0, 0, 0.15) 100%
  );
  animation: space-warp 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes space-warp {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.3;
  }
}

.blackhole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a1a 0%, #000000 40%, #000000 100%);
  box-shadow: 
    0 0 60px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(0, 0, 0, 0.3),
    0 0 200px rgba(188, 145, 41, 0.05);
  animation: blackhole-pulse 4s ease-in-out infinite;
  filter: blur(0.5px);
}

.blackhole::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(0, 217, 255, 0.3);
  border-right-color: rgba(139, 92, 246, 0.2);
  animation: blackhole-rotate 5s linear infinite;
}

.blackhole::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: rgba(0, 217, 255, 0.2);
  border-left-color: rgba(139, 92, 246, 0.15);
  animation: blackhole-rotate 7s linear infinite reverse;
}

@keyframes blackhole-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes blackhole-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 100px rgba(0, 0, 0, 0.9),
      inset 0 0 50px rgba(0, 0, 0, 0.8),
      0 0 200px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 
      0 0 150px rgba(0, 0, 0, 0.95),
      inset 0 0 60px rgba(0, 0, 0, 0.9),
      0 0 250px rgba(0, 0, 0, 0.6);
  }
}

.accretion-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(139, 92, 246, 0.05) 30deg,
    rgba(0, 217, 255, 0.1) 60deg,
    rgba(139, 92, 246, 0.15) 90deg,
    rgba(0, 217, 255, 0.1) 120deg,
    rgba(139, 92, 246, 0.05) 150deg,
    transparent 180deg,
    rgba(139, 92, 246, 0.05) 210deg,
    rgba(0, 217, 255, 0.1) 240deg,
    rgba(139, 92, 246, 0.15) 270deg,
    rgba(0, 217, 255, 0.1) 300deg,
    rgba(139, 92, 246, 0.05) 330deg,
    transparent 360deg
  );
  animation: accretion-rotate 10s linear infinite;
  opacity: 0.4;
}

.accretion-disk::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(139, 92, 246, 0.1) 30deg,
    rgba(0, 217, 255, 0.15) 60deg,
    rgba(139, 92, 246, 0.2) 90deg,
    rgba(0, 217, 255, 0.15) 120deg,
    rgba(139, 92, 246, 0.1) 150deg,
    transparent 180deg,
    rgba(139, 92, 246, 0.1) 210deg,
    rgba(0, 217, 255, 0.15) 240deg,
    rgba(139, 92, 246, 0.2) 270deg,
    rgba(0, 217, 255, 0.15) 300deg,
    rgba(139, 92, 246, 0.1) 330deg,
    transparent 360deg
  );
  animation: accretion-rotate 8s linear infinite reverse;
}

@keyframes accretion-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.particles::before,
.particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 
    800px 200px 0 2px rgba(0, 217, 255, 0.8),
    600px 400px 0 1px rgba(139, 92, 246, 0.6),
    1000px 300px 0 2px rgba(0, 217, 255, 0.7),
    400px 600px 0 1.5px rgba(139, 92, 246, 0.5),
    1200px 100px 0 1px rgba(0, 217, 255, 0.6),
    200px 800px 0 2px rgba(139, 92, 246, 0.7),
    900px 500px 0 1.5px rgba(0, 217, 255, 0.5),
    300px 700px 0 1px rgba(139, 92, 246, 0.6),
    1100px 400px 0 2px rgba(0, 217, 255, 0.8),
    500px 900px 0 1px rgba(139, 92, 246, 0.5);
  animation: particle-spiral 15s linear infinite;
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.particles::after {
  animation-delay: -7.5s;
  box-shadow: 
    700px 300px 0 2px rgba(0, 217, 255, 0.7),
    500px 500px 0 1px rgba(139, 92, 246, 0.6),
    900px 200px 0 1.5px rgba(0, 217, 255, 0.8),
    300px 700px 0 1px rgba(139, 92, 246, 0.5),
    1100px 150px 0 2px rgba(0, 217, 255, 0.6),
    150px 850px 0 1.5px rgba(139, 92, 246, 0.7),
    850px 450px 0 1px rgba(0, 217, 255, 0.5),
    250px 750px 0 2px rgba(139, 92, 246, 0.6),
    1000px 350px 0 1px rgba(0, 217, 255, 0.8),
    450px 950px 0 1.5px rgba(139, 92, 246, 0.5);
}

@keyframes particle-spiral {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(150px) scale(0.3);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  background: var(--accent-primary);
  border-radius: 50%;
  pointer-events: none;
  animation: absorb-particle linear infinite;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.6), 0 0 16px rgba(139, 92, 246, 0.3);
  transform-origin: center;
  opacity: 0.7;
}

@keyframes absorb-particle {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.3;
  }
  100% {
    transform: translate(
      calc(50vw - var(--start-x, 0px)),
      calc(50vh - var(--start-y, 0px))
    ) rotate(1080deg) scale(0.05);
    opacity: 0;
  }
}


/* ========== GALAXY STARS BACKGROUND ========== */
.galaxy-stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Small Stars */
.stars-small {
  background-image: 
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 20% 50%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 10%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 70% 90%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 80% 40%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 35% 65%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 55% 95%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 65% 25%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 75% 55%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 85% 5%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 95% 45%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 5% 75%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 12% 42%, rgba(255, 255, 255, 0.9), transparent);
  background-size: 250px 250px;
  animation: stars-drift 100s linear infinite;
}

/* Medium Stars */
.stars-medium {
  background-image: 
    radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 35% 75%, rgba(139, 92, 246, 0.8), transparent),
    radial-gradient(2px 2px at 55% 15%, rgba(0, 217, 255, 0.9), transparent),
    radial-gradient(2px 2px at 75% 65%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 95% 35%, rgba(139, 92, 246, 0.9), transparent),
    radial-gradient(2px 2px at 25% 95%, rgba(0, 217, 255, 0.8), transparent),
    radial-gradient(2px 2px at 45% 45%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 65% 85%, rgba(139, 92, 246, 0.7), transparent),
    radial-gradient(2px 2px at 85% 5%, rgba(0, 217, 255, 0.8), transparent),
    radial-gradient(2px 2px at 5% 55%, rgba(255, 255, 255, 0.9), transparent);
  background-size: 350px 350px;
  animation: stars-drift 150s linear infinite reverse, stars-twinkle-medium 4s ease-in-out infinite;
}

/* Large Stars */
.stars-large {
  background-image: 
    radial-gradient(3px 3px at 20% 30%, rgba(255, 255, 255, 1), transparent),
    radial-gradient(3px 3px at 50% 70%, rgba(139, 92, 246, 0.9), transparent),
    radial-gradient(3px 3px at 80% 20%, rgba(0, 217, 255, 1), transparent),
    radial-gradient(3px 3px at 30% 90%, rgba(255, 200, 100, 0.9), transparent),
    radial-gradient(3px 3px at 70% 50%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(3px 3px at 10% 60%, rgba(139, 92, 246, 1), transparent),
    radial-gradient(3px 3px at 90% 80%, rgba(0, 217, 255, 0.9), transparent);
  background-size: 500px 500px;
  animation: stars-drift 200s linear infinite, stars-twinkle-large 3s ease-in-out infinite alternate;
}

@keyframes stars-drift {
  from {
    transform: translateY(0) translateX(0);
  }
  to {
    transform: translateY(-100px) translateX(50px);
  }
}

@keyframes stars-twinkle-medium {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes stars-twinkle-large {
  0% { opacity: 0.7; filter: blur(0px); }
  100% { opacity: 1; filter: blur(0.5px); }
}

/* Shooting Stars */
.shooting-stars {
  position: absolute;
  width: 100%;
  height: 100%;
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50%;
  animation: shooting-star-fly 8s linear infinite;
  opacity: 0;
}

.shooting-star::before {
  content: '';
  position: absolute;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px rgba(139, 92, 246, 0.5);
}

.shooting-star:nth-child(1) {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 6s;
}

.shooting-star:nth-child(2) {
  top: 30%;
  left: 60%;
  animation-delay: 2s;
  animation-duration: 7s;
}

.shooting-star:nth-child(3) {
  top: 50%;
  left: 10%;
  animation-delay: 4s;
  animation-duration: 5s;
}

.shooting-star:nth-child(4) {
  top: 70%;
  left: 80%;
  animation-delay: 6s;
  animation-duration: 8s;
}

.shooting-star:nth-child(5) {
  top: 20%;
  left: 40%;
  animation-delay: 3s;
  animation-duration: 6s;
}

@keyframes shooting-star-fly {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    transform: translateX(300px) translateY(300px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translateX(300px) translateY(300px) rotate(-45deg);
    opacity: 0;
  }
}

/* Nebula Clouds */
.nebula-clouds {
  position: absolute;
  width: 100%;
  height: 100%;
}

.nebula-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: nebula-float 30s ease-in-out infinite;
}

.nebula-1 {
  top: 10%;
  left: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%);
  animation-delay: 0s;
}

.nebula-2 {
  top: 50%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 217, 255, 0.3) 0%, transparent 70%);
  animation-delay: -10s;
}

.nebula-3 {
  bottom: 10%;
  left: 30%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 100, 150, 0.25) 0%, transparent 70%);
  animation-delay: -20s;
}

@keyframes nebula-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
  }
  50% {
    transform: translate(-20px, 30px) scale(0.95);
  }
  75% {
    transform: translate(20px, 20px) scale(1.02);
  }
}

/* Floating Sparkles - Extra magic */
.galaxy-stars-container::before,
.galaxy-stars-container::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    100px 200px 0 0 rgba(255, 255, 255, 0.8),
    300px 400px 0 0 rgba(139, 92, 246, 0.9),
    500px 100px 0 0 rgba(0, 217, 255, 0.8),
    700px 300px 0 0 rgba(255, 255, 255, 0.9),
    200px 600px 0 0 rgba(139, 92, 246, 0.8),
    400px 800px 0 0 rgba(0, 217, 255, 0.9),
    600px 500px 0 0 rgba(255, 255, 255, 0.8),
    800px 700px 0 0 rgba(139, 92, 246, 0.9),
    150px 350px 0 0 rgba(0, 217, 255, 0.8),
    350px 550px 0 0 rgba(255, 255, 255, 0.9),
    550px 750px 0 0 rgba(139, 92, 246, 0.8),
    750px 150px 0 0 rgba(0, 217, 255, 0.9),
    50px 450px 0 0 rgba(255, 255, 255, 0.8),
    250px 650px 0 0 rgba(139, 92, 246, 0.9),
    450px 250px 0 0 rgba(0, 217, 255, 0.8),
    650px 50px 0 0 rgba(255, 255, 255, 0.9);
  animation: sparkle-float 20s ease-in-out infinite;
}

.galaxy-stars-container::after {
  animation-delay: -10s;
  box-shadow:
    150px 250px 0 0 rgba(139, 92, 246, 0.8),
    350px 450px 0 0 rgba(255, 255, 255, 0.9),
    550px 150px 0 0 rgba(0, 217, 255, 0.8),
    750px 350px 0 0 rgba(139, 92, 246, 0.9),
    250px 650px 0 0 rgba(255, 255, 255, 0.8),
    450px 850px 0 0 rgba(0, 217, 255, 0.9),
    650px 550px 0 0 rgba(139, 92, 246, 0.8),
    850px 750px 0 0 rgba(255, 255, 255, 0.9),
    50px 150px 0 0 rgba(0, 217, 255, 0.8),
    100px 500px 0 0 rgba(139, 92, 246, 0.9);
}

@keyframes sparkle-float {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-30px);
    opacity: 1;
  }
}

a {
  text-decoration: none;
  color: var(--accent-primary);
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  transition: background 0.3s ease;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.navbar {
  background-color: rgba(15, 15, 35, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 80px;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.navbar .logo img {
  height: 50px;
  align-items: center;
}

.navbar-menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

.navbar-menu li a {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.navbar-menu li a:hover {
  color: var(--accent-primary);
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.navbar .auth-buttons {
  display: flex;
  gap: 10px;
}

.btn-login {
  background-color: var(--text-primary);
  color: var(--secondary-color);
  border: 2px solid var(--text-primary);
}

.btn-register {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--accent-primary);
}

.btn-login:hover {
  background-color: transparent;
  color: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

.btn-register:hover {
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  color: var(--text-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.9) 0%, rgba(15, 15, 35, 0.95) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 50px;
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3), 0 0 60px rgba(0, 217, 255, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Sun Hero Effect */
.sun-hero {
  background: 
    radial-gradient(ellipse at 80% 50%, rgba(255, 150, 50, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 100, 0, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #050510 0%, #0a0a1a 20%, #1a0a2e 50%, #0d0d20 100%);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid rgba(255, 170, 50, 0.4);
  box-shadow: 
    0 0 80px rgba(255, 150, 50, 0.3),
    0 0 150px rgba(255, 100, 0, 0.15),
    inset 0 0 100px rgba(0, 0, 0, 0.6);
}

.sun-container {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
}

/* Outer Corona */
.sun-corona {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 100, 0.1) 0%, rgba(255, 150, 50, 0.05) 40%, transparent 70%);
  animation: corona-pulse 6s ease-in-out infinite;
}

@keyframes corona-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}

/* Outer Ring */
.sun-outer-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid rgba(255, 180, 50, 0.3);
  box-shadow: 
    0 0 20px rgba(255, 180, 50, 0.4),
    inset 0 0 20px rgba(255, 180, 50, 0.2);
  animation: outer-ring-pulse 4s ease-in-out infinite;
}

@keyframes outer-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Sun Surface with texture */
.sun-surface {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 200, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 75% 65%, rgba(255, 200, 100, 0.3) 0%, transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(255, 150, 50, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 30% 60%, rgba(255, 220, 100, 0.3) 0%, transparent 20%),
    linear-gradient(135deg, #ffcc00 0%, #ff9500 50%, #ff6600 100%);
  box-shadow: 
    0 0 40px rgba(255, 200, 50, 0.8),
    0 0 80px rgba(255, 150, 50, 0.6);
  animation: surface-rotate 60s linear infinite;
}

@keyframes surface-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sun-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffef0 0%, #fff5c0 20%, #ffd93d 40%, #ffb800 60%, #ff9500 80%, #ff7700 100%);
  box-shadow: 
    0 0 30px rgba(255, 255, 200, 0.9),
    0 0 60px rgba(255, 200, 50, 0.8),
    0 0 100px rgba(255, 150, 50, 0.6),
    0 0 150px rgba(255, 100, 50, 0.4),
    0 0 200px rgba(255, 80, 0, 0.3),
    inset 0 0 40px rgba(255, 255, 220, 0.6);
  animation: sun-pulse 4s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 30px rgba(255, 255, 200, 0.9),
      0 0 60px rgba(255, 200, 50, 0.8),
      0 0 100px rgba(255, 150, 50, 0.6),
      0 0 150px rgba(255, 100, 50, 0.4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow: 
      0 0 40px rgba(255, 255, 200, 1),
      0 0 80px rgba(255, 200, 50, 0.9),
      0 0 130px rgba(255, 150, 50, 0.7),
      0 0 180px rgba(255, 100, 50, 0.5);
  }
}

/* Sun Hotspot */
.sun-hotspot {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 200, 0.8) 50%, transparent 100%);
  animation: hotspot-flicker 2s ease-in-out infinite;
}

@keyframes hotspot-flicker {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  25% { opacity: 1; transform: scale(1.2); }
  50% { opacity: 0.6; transform: scale(0.9); }
  75% { opacity: 0.9; transform: scale(1.1); }
}

.sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 220, 100, 0.5) 5deg,
    transparent 15deg,
    transparent 25deg,
    rgba(255, 200, 50, 0.4) 30deg,
    transparent 40deg,
    transparent 55deg,
    rgba(255, 180, 50, 0.5) 60deg,
    transparent 70deg,
    transparent 85deg,
    rgba(255, 220, 100, 0.4) 90deg,
    transparent 100deg,
    transparent 115deg,
    rgba(255, 200, 50, 0.5) 120deg,
    transparent 130deg,
    transparent 145deg,
    rgba(255, 180, 50, 0.4) 150deg,
    transparent 160deg,
    transparent 175deg,
    rgba(255, 220, 100, 0.5) 180deg,
    transparent 190deg,
    transparent 205deg,
    rgba(255, 200, 50, 0.4) 210deg,
    transparent 220deg,
    transparent 235deg,
    rgba(255, 180, 50, 0.5) 240deg,
    transparent 250deg,
    transparent 265deg,
    rgba(255, 220, 100, 0.4) 270deg,
    transparent 280deg,
    transparent 295deg,
    rgba(255, 200, 50, 0.5) 300deg,
    transparent 310deg,
    transparent 325deg,
    rgba(255, 180, 50, 0.4) 330deg,
    transparent 340deg,
    transparent 355deg,
    rgba(255, 220, 100, 0.5) 360deg
  );
  border-radius: 50%;
  animation: sun-rays-rotate 25s linear infinite;
  filter: blur(2px);
}

.sun-rays-2 {
  width: 250px;
  height: 250px;
  animation: sun-rays-rotate 35s linear infinite reverse;
  opacity: 0.7;
}

@keyframes sun-rays-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.sun-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 100, 0.4) 0%, rgba(255, 180, 50, 0.2) 40%, rgba(255, 150, 50, 0.1) 60%, transparent 75%);
  animation: sun-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes sun-glow-pulse {
  0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.sun-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  background: 
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 220, 0.2) 0%, transparent 25%),
    radial-gradient(ellipse at 75% 85%, rgba(255, 200, 100, 0.15) 0%, transparent 20%),
    radial-gradient(ellipse at 85% 30%, rgba(255, 220, 150, 0.1) 0%, transparent 30%),
    radial-gradient(ellipse at 15% 70%, rgba(255, 180, 80, 0.12) 0%, transparent 25%);
  animation: sun-flare-shimmer 5s ease-in-out infinite;
}

.sun-flare-2 {
  width: 400px;
  height: 400px;
  animation: sun-flare-shimmer 7s ease-in-out infinite reverse;
  opacity: 0.5;
}

@keyframes sun-flare-shimmer {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) rotate(0deg); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) rotate(5deg); }
}

/* Sun Particles */
.sun-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 220, 100, 0.9), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(255, 200, 50, 0.8), transparent),
    radial-gradient(3px 3px at 40% 70%, rgba(255, 180, 80, 0.9), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255, 220, 100, 0.7), transparent),
    radial-gradient(2px 2px at 30% 50%, rgba(255, 200, 80, 0.8), transparent),
    radial-gradient(3px 3px at 60% 80%, rgba(255, 180, 50, 0.9), transparent),
    radial-gradient(2px 2px at 85% 45%, rgba(255, 220, 100, 0.8), transparent),
    radial-gradient(2px 2px at 15% 85%, rgba(255, 200, 50, 0.7), transparent);
  animation: particles-float 8s ease-in-out infinite;
}

@keyframes particles-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Heat Waves */
.heat-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(255, 200, 100, 0.02) 1px,
      transparent 2px,
      transparent 8px
    );
  animation: heat-wave-move 3s linear infinite;
  pointer-events: none;
  opacity: 0.5;
}

@keyframes heat-wave-move {
  0% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(5px) skewX(1deg); }
  50% { transform: translateX(0) skewX(0deg); }
  75% { transform: translateX(-5px) skewX(-1deg); }
  100% { transform: translateX(0) skewX(0deg); }
}

.sun-hero .hero-content {
  position: relative;
  z-index: 5;
  max-width: 550px;
  text-align: left;
  padding-left: 30px;
}

.sun-hero .hero-content h1 {
  text-shadow: 
    0 0 20px rgba(255, 200, 50, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #ffaa00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sun-hero .hero-content p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

.sun-hero .btn-register {
  background: linear-gradient(135deg, #ffd700 0%, #ff9500 50%, #ff6600 100%);
  border-color: #ffd700;
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(255, 200, 50, 0.5);
}

.sun-hero .btn-register:hover {
  background: linear-gradient(135deg, #ffec00 0%, #ffaa00 50%, #ff7700 100%);
  box-shadow: 0 0 30px rgba(255, 200, 50, 0.8);
  transform: scale(1.05);
}

@media (max-width: 1000px) {
  .sun-container {
    width: 250px;
    height: 250px;
    right: 5%;
  }

  .sun-core { width: 80px; height: 80px; }
  .sun-surface { width: 100px; height: 100px; }
  .sun-rays { width: 220px; height: 220px; }
  .sun-rays-2 { width: 190px; height: 190px; }
  .sun-glow { width: 170px; height: 170px; }
  .sun-outer-ring { width: 150px; height: 150px; }
  .sun-corona { width: 250px; height: 250px; }
  .sun-flare { width: 280px; height: 280px; }
  .sun-flare-2 { width: 320px; height: 320px; }
}

@media (max-width: 768px) {
  .sun-hero {
    min-height: 450px;
    padding-top: 200px;
  }

  .sun-container {
    top: 15%;
    right: 50%;
    transform: translate(50%, 0);
    width: 200px;
    height: 200px;
  }

  .sun-core { width: 60px; height: 60px; }
  .sun-surface { width: 80px; height: 80px; }
  .sun-rays { width: 170px; height: 170px; }
  .sun-rays-2 { width: 150px; height: 150px; }
  .sun-glow { width: 130px; height: 130px; }
  .sun-outer-ring { width: 120px; height: 120px; }
  .sun-corona { width: 200px; height: 200px; }
  .sun-flare { width: 220px; height: 220px; }
  .sun-flare-2 { width: 260px; height: 260px; }
  .sun-hotspot { width: 12px; height: 12px; }

  .sun-hero .hero-content {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .sun-hero {
    min-height: 400px;
    padding-top: 150px;
  }

  .sun-container {
    width: 150px;
    height: 150px;
    top: 10%;
  }

  .sun-core { width: 45px; height: 45px; }
  .sun-surface { width: 60px; height: 60px; }
  .sun-rays { width: 130px; height: 130px; }
  .sun-rays-2 { width: 110px; height: 110px; }
  .sun-glow { width: 100px; height: 100px; }
  .sun-outer-ring { width: 90px; height: 90px; }
  .sun-corona { width: 150px; height: 150px; }
  .sun-flare { width: 170px; height: 170px; }
  .sun-flare-2 { width: 200px; height: 200px; }
  .sun-hotspot { width: 8px; height: 8px; }
  .sun-particles { width: 150px; height: 150px; }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-content h1 {
  font-size: 1.8rem;
  color: var(--text-primary);
}

.hero-content p {
  margin-bottom: 30px;
  color: var(--text-secondary);
}

.about-us {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 40px;
}

/* Mercury Theme */
.about-us.mercury-theme {
  position: relative;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(180, 180, 195, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0d0d15 0%, #1a1a25 30%, #252535 50%, #1a1a25 70%, #0d0d15 100%);
  border-radius: 15px;
  padding: 40px;
  border: 2px solid rgba(180, 180, 200, 0.3);
  box-shadow: 
    0 0 40px rgba(150, 150, 170, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.mercury-container {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 1;
}

.mercury-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 200, 220, 0.2) 0%, rgba(150, 150, 170, 0.1) 40%, transparent 70%);
  animation: mercury-glow-pulse 4s ease-in-out infinite;
}

@keyframes mercury-glow-pulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.mercury-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, #e8e8f0 0%, #c0c0d0 20%, #a0a0b5 40%, #808095 60%, #606075 80%, #505065 100%);
  box-shadow: 
    0 0 30px rgba(180, 180, 200, 0.4),
    0 0 60px rgba(150, 150, 170, 0.2),
    inset -20px -10px 40px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2);
  animation: mercury-rotate 40s linear infinite;
  overflow: hidden;
}

@keyframes mercury-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mercury-surface {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 60% 20%, rgba(200, 200, 210, 0.2) 0%, transparent 15%),
    radial-gradient(circle at 75% 65%, rgba(180, 180, 195, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 40% 80%, rgba(160, 160, 175, 0.2) 0%, transparent 20%);
}

.mercury-crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(80, 80, 95, 0.6) 0%, rgba(60, 60, 75, 0.8) 50%, rgba(50, 50, 65, 0.9) 100%);
  box-shadow: 
    inset 2px 2px 4px rgba(0, 0, 0, 0.5),
    inset -1px -1px 3px rgba(255, 255, 255, 0.1);
}

.crater-1 {
  width: 25px;
  height: 25px;
  top: 20%;
  left: 30%;
}

.crater-2 {
  width: 18px;
  height: 18px;
  top: 50%;
  left: 60%;
}

.crater-3 {
  width: 15px;
  height: 15px;
  top: 70%;
  left: 25%;
}

.crater-4 {
  width: 12px;
  height: 12px;
  top: 35%;
  left: 70%;
}

.mercury-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.6) 100%);
}

.mercury-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(180, 180, 200, 0.2);
  box-shadow: 0 0 10px rgba(180, 180, 200, 0.1);
  animation: orbit-rotate 20s linear infinite;
}

@keyframes orbit-rotate {
  from { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateX(75deg) rotateZ(360deg); }
}

.mercury-theme .about-us-banner {
  position: relative;
  z-index: 2;
  margin-left: 180px;
}

.mercury-theme .about-us-banner img {
  border-radius: 10px;
  border: 2px solid rgba(180, 180, 200, 0.3);
  box-shadow: 0 0 20px rgba(150, 150, 170, 0.2);
}

.mercury-theme .about-us-intro {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(30, 30, 45, 0.95) 0%, rgba(20, 20, 35, 0.98) 100%);
  border: 1px solid rgba(180, 180, 200, 0.2);
  border-radius: 10px;
  box-shadow: 
    0 0 30px rgba(150, 150, 170, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.mercury-theme .about-us-intro h2 {
  background: linear-gradient(135deg, #ffffff 0%, #c0c0d0 50%, #a0a0b5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.mercury-theme .about-us-intro p {
  color: rgba(200, 200, 215, 0.9);
}

@media (max-width: 1024px) {
  .mercury-container {
    width: 150px;
    height: 150px;
    left: 3%;
  }

  .mercury-planet {
    width: 90px;
    height: 90px;
  }

  .mercury-glow {
    width: 140px;
    height: 140px;
  }

  .mercury-orbit-ring {
    width: 140px;
    height: 140px;
  }

  .crater-1 { width: 18px; height: 18px; }
  .crater-2 { width: 14px; height: 14px; }
  .crater-3 { width: 11px; height: 11px; }
  .crater-4 { width: 9px; height: 9px; }

  .mercury-theme .about-us-banner {
    margin-left: 120px;
  }
}

@media (max-width: 768px) {
  .about-us.mercury-theme {
    flex-direction: column;
    padding: 30px 20px;
    padding-top: 180px;
  }

  .mercury-container {
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
  }

  .mercury-planet {
    width: 70px;
    height: 70px;
  }

  .mercury-glow {
    width: 110px;
    height: 110px;
  }

  .mercury-orbit-ring {
    width: 110px;
    height: 110px;
  }

  .crater-1 { width: 14px; height: 14px; }
  .crater-2 { width: 10px; height: 10px; }
  .crater-3 { width: 8px; height: 8px; }
  .crater-4 { width: 7px; height: 7px; }

  .mercury-theme .about-us-banner {
    margin-left: 0;
    max-width: 100%;
  }

  .mercury-theme .about-us-intro {
    max-width: 100%;
  }
}

.about-us-banner {
  flex: 1;
  max-width: 50%;
  overflow: hidden;
}

.about-us-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
}

.about-us-intro {
  flex: 1;
  max-width: 50%;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.about-us-intro h2 {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.about-us-intro p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ========== VENUS SECTION ========== */
.venus-section {
  position: relative;
  margin-top: 40px;
  padding: 50px 40px;
  border-radius: 15px;
  background: 
    radial-gradient(ellipse at 15% 50%, rgba(255, 180, 100, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 60%, rgba(255, 150, 50, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #1a1510 0%, #2a1a10 20%, #352515 40%, #2a1a10 70%, #1a1510 100%);
  border: 2px solid rgba(255, 180, 100, 0.3);
  box-shadow: 
    0 0 60px rgba(255, 150, 50, 0.15),
    0 0 100px rgba(255, 120, 50, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 40px;
}

.venus-container {
  position: relative;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Venus Atmosphere */
.venus-atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 150, 0.15) 0%, rgba(255, 150, 80, 0.08) 50%, transparent 70%);
  animation: venus-atmosphere-pulse 5s ease-in-out infinite;
}

@keyframes venus-atmosphere-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

.venus-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 100, 0.3) 0%, rgba(255, 140, 50, 0.15) 40%, transparent 65%);
  animation: venus-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes venus-glow-pulse {
  0% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

.venus-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #fff5e0 0%, #ffe4b5 15%, #ffd280 30%, #e8a040 50%, #c07830 70%, #905020 90%);
  box-shadow: 
    0 0 40px rgba(255, 180, 100, 0.6),
    0 0 80px rgba(255, 140, 50, 0.4),
    0 0 120px rgba(255, 100, 30, 0.2),
    inset -25px -15px 50px rgba(100, 50, 20, 0.6),
    inset 10px 10px 30px rgba(255, 240, 200, 0.3);
  overflow: hidden;
  animation: venus-rotate 50s linear infinite;
}

@keyframes venus-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.venus-clouds {
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: 
    repeating-linear-gradient(
      95deg,
      transparent 0%,
      rgba(255, 240, 200, 0.25) 5%,
      rgba(255, 220, 150, 0.3) 10%,
      rgba(255, 200, 120, 0.2) 15%,
      transparent 20%
    );
  animation: venus-clouds-move 30s linear infinite;
}

.venus-clouds-2 {
  animation: venus-clouds-move 45s linear infinite reverse;
  opacity: 0.6;
  background: 
    repeating-linear-gradient(
      85deg,
      transparent 0%,
      rgba(255, 230, 180, 0.2) 8%,
      rgba(255, 200, 130, 0.25) 12%,
      transparent 18%
    );
}

@keyframes venus-clouds-move {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.venus-surface {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 20% 40%, rgba(255, 200, 100, 0.2) 0%, transparent 20%),
    radial-gradient(circle at 70% 30%, rgba(255, 180, 80, 0.15) 0%, transparent 15%),
    radial-gradient(circle at 50% 70%, rgba(255, 220, 150, 0.2) 0%, transparent 25%);
}

.venus-highlight {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 35px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 240, 0.5) 0%, transparent 70%);
  filter: blur(3px);
}

.venus-heat-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255, 180, 100, 0.2);
  box-shadow: 
    0 0 20px rgba(255, 150, 50, 0.15),
    inset 0 0 20px rgba(255, 150, 50, 0.1);
  animation: heat-ring-pulse 3s ease-in-out infinite;
}

@keyframes heat-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

.venus-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255, 200, 100, 0.8), transparent),
    radial-gradient(2px 2px at 85% 35%, rgba(255, 180, 80, 0.7), transparent),
    radial-gradient(3px 3px at 25% 75%, rgba(255, 220, 150, 0.8), transparent),
    radial-gradient(2px 2px at 75% 80%, rgba(255, 160, 60, 0.7), transparent),
    radial-gradient(2px 2px at 50% 15%, rgba(255, 200, 100, 0.6), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255, 180, 80, 0.8), transparent);
  animation: venus-particles-float 6s ease-in-out infinite;
}

@keyframes venus-particles-float {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
}

.venus-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.venus-header {
  margin-bottom: 25px;
}

.venus-header h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #ffd280 40%, #ffaa50 70%, #ff8c30 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.venus-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 200, 150, 0.9);
  font-weight: 500;
}

.venus-text-content {
  margin-bottom: 30px;
}

.venus-text-content p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 15px;
}

.venus-text-content strong {
  color: #ffd280;
}

.venus-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.venus-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(255, 180, 100, 0.15) 0%, rgba(255, 140, 50, 0.1) 100%);
  border-radius: 30px;
  border: 1px solid rgba(255, 180, 100, 0.3);
  transition: all 0.3s ease;
}

.venus-feature:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(255, 180, 100, 0.25) 0%, rgba(255, 140, 50, 0.15) 100%);
  box-shadow: 0 5px 20px rgba(255, 150, 50, 0.3);
}

.feature-icon {
  font-size: 1.3rem;
}

.feature-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 220, 180, 0.95);
}

@media (max-width: 900px) {
  .venus-section {
    flex-direction: column;
    padding: 40px 25px;
    padding-top: 250px;
  }

  .venus-container {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
  }

  .venus-planet { width: 110px; height: 110px; }
  .venus-glow { width: 160px; height: 160px; }
  .venus-atmosphere { width: 190px; height: 190px; }
  .venus-heat-ring { width: 150px; height: 150px; }
  .venus-particles { width: 200px; height: 200px; }

  .venus-header h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .venus-subtitle {
    text-align: center;
  }

  .venus-features {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .venus-section {
    padding-top: 200px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .venus-container {
    width: 160px;
    height: 160px;
    top: 20px;
  }

  .venus-planet { width: 80px; height: 80px; }
  .venus-glow { width: 120px; height: 120px; }
  .venus-atmosphere { width: 150px; height: 150px; }
  .venus-heat-ring { width: 110px; height: 110px; }
  .venus-particles { width: 160px; height: 160px; }

  .venus-header h2 {
    font-size: 1.3rem;
  }

  .venus-feature {
    padding: 10px 15px;
  }

  .feature-text {
    font-size: 0.8rem;
  }
}

.bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

/* ========== EARTH THEME ========== */
.bonus.earth-theme {
  position: relative;
  background: 
    radial-gradient(ellipse at 85% 50%, rgba(100, 180, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 40%, rgba(50, 150, 255, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #0a0a15 0%, #0d1020 20%, #101530 50%, #0d1020 80%, #0a0a15 100%);
  padding: 40px;
  border-radius: 15px;
  border: 2px solid rgba(100, 180, 255, 0.3);
  box-shadow: 
    0 0 60px rgba(50, 150, 255, 0.15),
    0 0 100px rgba(100, 200, 255, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.earth-container {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 1;
}

/* Earth Atmosphere */
.earth-atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 180, 255, 0.25) 0%, rgba(50, 150, 255, 0.1) 50%, transparent 70%);
  animation: earth-atmosphere-glow 4s ease-in-out infinite alternate;
}

@keyframes earth-atmosphere-glow {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.earth-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(100, 180, 255, 0.4),
    0 0 80px rgba(50, 150, 255, 0.2);
  animation: earth-glow-pulse 3s ease-in-out infinite;
}

@keyframes earth-glow-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.earth-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 
    0 0 30px rgba(100, 180, 255, 0.5),
    0 0 60px rgba(50, 150, 255, 0.3),
    inset -20px -10px 40px rgba(0, 0, 0, 0.5),
    inset 8px 8px 25px rgba(150, 220, 255, 0.2);
  animation: earth-rotate 60s linear infinite;
}

@keyframes earth-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.earth-oceans {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, #4da6ff 0%, #2980b9 30%, #1a5276 60%, #0d2840 100%);
}

.earth-continents {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: 
    radial-gradient(ellipse at 25% 35%, #2ecc71 0%, #27ae60 15%, transparent 25%),
    radial-gradient(ellipse at 55% 25%, #27ae60 0%, #1e8449 20%, transparent 30%),
    radial-gradient(ellipse at 70% 50%, #2ecc71 0%, #27ae60 10%, transparent 20%),
    radial-gradient(ellipse at 30% 65%, #f4d03f 0%, #c9a227 8%, transparent 15%),
    radial-gradient(ellipse at 80% 70%, #27ae60 0%, #1e8449 12%, transparent 22%),
    radial-gradient(ellipse at 45% 80%, #2ecc71 0%, #27ae60 8%, transparent 15%),
    radial-gradient(ellipse at 15% 50%, #27ae60 0%, #1e8449 10%, transparent 18%);
}

.earth-clouds {
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 15%),
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.5) 0%, transparent 12%),
    radial-gradient(ellipse at 75% 40%, rgba(255, 255, 255, 0.55) 0%, transparent 18%),
    radial-gradient(ellipse at 35% 70%, rgba(255, 255, 255, 0.5) 0%, transparent 14%),
    radial-gradient(ellipse at 85% 75%, rgba(255, 255, 255, 0.45) 0%, transparent 10%),
    radial-gradient(ellipse at 60% 60%, rgba(255, 255, 255, 0.4) 0%, transparent 12%);
  animation: earth-clouds-drift 40s linear infinite;
}

.earth-clouds-2 {
  animation: earth-clouds-drift 55s linear infinite reverse;
  opacity: 0.7;
  background: 
    radial-gradient(ellipse at 30% 45%, rgba(255, 255, 255, 0.5) 0%, transparent 12%),
    radial-gradient(ellipse at 65% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 10%),
    radial-gradient(ellipse at 15% 65%, rgba(255, 255, 255, 0.5) 0%, transparent 15%),
    radial-gradient(ellipse at 80% 55%, rgba(255, 255, 255, 0.4) 0%, transparent 11%);
}

@keyframes earth-clouds-drift {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.earth-highlight {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 40px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  filter: blur(4px);
}

/* Moon */
.earth-moon {
  position: absolute;
  top: 15%;
  right: 10%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 35%, #f5f5f5 0%, #d0d0d0 30%, #a0a0a0 60%, #707070 100%);
  box-shadow: 
    0 0 15px rgba(200, 200, 200, 0.4),
    inset -5px -3px 10px rgba(0, 0, 0, 0.4),
    inset 2px 2px 5px rgba(255, 255, 255, 0.3);
  animation: moon-orbit 20s linear infinite;
  overflow: hidden;
}

.moon-craters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 40%, rgba(80, 80, 80, 0.5) 0%, transparent 20%),
    radial-gradient(circle at 60% 25%, rgba(100, 100, 100, 0.4) 0%, transparent 15%),
    radial-gradient(circle at 70% 65%, rgba(90, 90, 90, 0.45) 0%, transparent 18%),
    radial-gradient(circle at 40% 70%, rgba(80, 80, 80, 0.4) 0%, transparent 12%);
}

@keyframes moon-orbit {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

.earth-orbit-path {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px dashed rgba(100, 180, 255, 0.2);
}

/* Earth Theme Styling */
.earth-theme .bonus-details {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(15, 25, 45, 0.95) 0%, rgba(10, 20, 40, 0.98) 100%);
  border: 1px solid rgba(100, 180, 255, 0.25);
  box-shadow: 0 0 30px rgba(50, 150, 255, 0.1);
}

.earth-theme .bonus-intro h3 {
  background: linear-gradient(135deg, #ffffff 0%, #7ec8e3 40%, #4da6ff 70%, #2980b9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.earth-theme .bonus-intro p {
  color: rgba(200, 220, 255, 0.9);
}

.earth-theme .bonus-card {
  background: linear-gradient(135deg, rgba(50, 100, 150, 0.3) 0%, rgba(30, 60, 100, 0.4) 100%);
  border: 1px solid rgba(100, 180, 255, 0.25);
}

.earth-theme .bonus-card:hover {
  box-shadow: 0 8px 30px rgba(100, 180, 255, 0.3);
  border-color: rgba(100, 180, 255, 0.5);
}

.earth-theme .bonus-card i {
  color: #4da6ff;
}

.earth-theme .bonus-card h4 {
  color: #7ec8e3;
}

.earth-theme .bonus-carousel {
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .earth-container {
    width: 220px;
    height: 220px;
    right: 2%;
  }

  .earth-planet { width: 110px; height: 110px; }
  .earth-atmosphere { width: 160px; height: 160px; }
  .earth-glow { width: 145px; height: 145px; }
  .earth-moon { width: 28px; height: 28px; }
  .earth-orbit-path { width: 190px; height: 190px; }
}

@media (max-width: 768px) {
  .bonus.earth-theme {
    padding-top: 220px;
    flex-direction: column;
  }

  .earth-container {
    top: 30px;
    right: 50%;
    transform: translateX(50%);
    width: 180px;
    height: 180px;
  }

  .earth-planet { width: 90px; height: 90px; }
  .earth-atmosphere { width: 130px; height: 130px; }
  .earth-glow { width: 120px; height: 120px; }
  .earth-moon { width: 22px; height: 22px; }
  .earth-orbit-path { width: 150px; height: 150px; }

  @keyframes moon-orbit {
    0% { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
  }
}

@media (max-width: 480px) {
  .bonus.earth-theme {
    padding-top: 180px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .earth-container {
    width: 140px;
    height: 140px;
    top: 20px;
  }

  .earth-planet { width: 70px; height: 70px; }
  .earth-atmosphere { width: 100px; height: 100px; }
  .earth-glow { width: 95px; height: 95px; }
  .earth-moon { width: 18px; height: 18px; }
  .earth-orbit-path { width: 120px; height: 120px; }

  @keyframes moon-orbit {
    0% { transform: rotate(0deg) translateX(55px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(55px) rotate(-360deg); }
  }
}

.bonus-carousel {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.bonus-carousel a {
  flex-shrink: 0;
  width: 100%;
}

.bonus-carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.bonus-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.bonus-banner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  max-width: 600px;
  margin-top: 30px;
  height: auto;
}

.bonus-banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.bonus-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.bonus-intro h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bonus-intro p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.bonus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.bonus-card {
  flex: 1;
  min-width: 200px;
  background-color: var(--third-color);
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  transition: transform 0.3s ease;
}

.bonus-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3), 0 0 20px rgba(0, 217, 255, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.bonus-card h4 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bonus-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.bonus-card i {
  display: block;
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--accent-primary);
}

.games {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ========== EARTH GAMES THEME ========== */
.games.earth-games-theme {
  position: relative;
  background: 
    radial-gradient(ellipse at 10% 50%, rgba(100, 180, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 5% 40%, rgba(50, 200, 100, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #050a15 0%, #0a1525 30%, #0d1a30 50%, #0a1525 70%, #050a15 100%);
  border: 2px solid rgba(100, 180, 255, 0.35);
  box-shadow: 
    0 0 50px rgba(50, 150, 255, 0.2),
    0 0 100px rgba(100, 200, 100, 0.1),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding-left: 220px;
}

.earth-games-container {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  pointer-events: none;
  z-index: 1;
}

.earth-games-atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 180, 255, 0.2) 0%, rgba(50, 150, 255, 0.08) 50%, transparent 70%);
  animation: earth-games-atmo-pulse 4s ease-in-out infinite alternate;
}

@keyframes earth-games-atmo-pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
}

.earth-games-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 
    0 0 25px rgba(100, 180, 255, 0.5),
    0 0 50px rgba(50, 150, 255, 0.3),
    inset -18px -10px 35px rgba(0, 0, 0, 0.5),
    inset 6px 6px 20px rgba(150, 220, 255, 0.2);
  animation: earth-games-rotate 50s linear infinite;
}

@keyframes earth-games-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.earth-games-oceans {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, #5dade2 0%, #2e86ab 30%, #1a5276 60%, #0d2840 100%);
}

.earth-games-land {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 20% 30%, #27ae60 0%, #1e8449 12%, transparent 22%),
    radial-gradient(ellipse at 60% 25%, #2ecc71 0%, #27ae60 15%, transparent 28%),
    radial-gradient(ellipse at 75% 55%, #27ae60 0%, #1e8449 10%, transparent 18%),
    radial-gradient(ellipse at 25% 60%, #f4d03f 0%, #c9a227 6%, transparent 12%),
    radial-gradient(ellipse at 45% 75%, #2ecc71 0%, #27ae60 8%, transparent 16%),
    radial-gradient(ellipse at 85% 75%, #27ae60 0%, #1e8449 10%, transparent 18%);
}

.earth-games-clouds {
  position: absolute;
  width: 200%;
  height: 100%;
  left: -50%;
  background: 
    radial-gradient(ellipse at 15% 25%, rgba(255, 255, 255, 0.55) 0%, transparent 12%),
    radial-gradient(ellipse at 45% 15%, rgba(255, 255, 255, 0.5) 0%, transparent 10%),
    radial-gradient(ellipse at 70% 35%, rgba(255, 255, 255, 0.5) 0%, transparent 15%),
    radial-gradient(ellipse at 30% 65%, rgba(255, 255, 255, 0.45) 0%, transparent 12%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.4) 0%, transparent 10%);
  animation: earth-games-clouds-move 35s linear infinite;
}

@keyframes earth-games-clouds-move {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

.earth-games-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(100, 180, 255, 0.4),
    0 0 70px rgba(50, 200, 100, 0.2);
}

.earth-games-theme .games-intro {
  position: relative;
  z-index: 2;
}

.earth-games-theme .games-intro h3 {
  background: linear-gradient(135deg, #ffffff 0%, #7ec8e3 30%, #5dade2 60%, #2e86ab 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.earth-games-theme .games-intro p {
  color: rgba(180, 220, 255, 0.9);
}

.earth-games-theme .games-grid {
  position: relative;
  z-index: 2;
}

.earth-games-theme .game-card {
  background: linear-gradient(135deg, rgba(30, 80, 120, 0.4) 0%, rgba(20, 60, 100, 0.5) 100%);
  border: 1px solid rgba(100, 180, 255, 0.3);
}

.earth-games-theme .game-card:hover {
  box-shadow: 0 8px 30px rgba(100, 180, 255, 0.4);
  border-color: rgba(100, 200, 255, 0.6);
}

.earth-games-theme .game-card h4 {
  color: #7ec8e3;
}

@media (max-width: 768px) {
  .games.earth-games-theme {
    padding-left: 30px;
    padding-top: 180px;
  }

  .earth-games-container {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
  }

  .earth-games-planet { width: 90px; height: 90px; }
  .earth-games-atmosphere { width: 130px; height: 130px; }
  .earth-games-glow { width: 115px; height: 115px; }
}

@media (max-width: 480px) {
  .games.earth-games-theme {
    padding-top: 150px;
  }

  .earth-games-container {
    width: 110px;
    height: 110px;
  }

  .earth-games-planet { width: 70px; height: 70px; }
  .earth-games-atmosphere { width: 100px; height: 100px; }
  .earth-games-glow { width: 90px; height: 90px; }
}

.games-intro h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.games-intro p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.game-card {
  background-color: var(--third-color);
  border-radius: 10px;
  overflow: hidden;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3), 0 0 20px rgba(0, 217, 255, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
}

.game-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.game-card h4 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin: 0;
}

.trust-safety {
  margin-top: 20px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ========== MARS THEME ========== */
.trust-safety.mars-theme {
  position: relative;
  background: 
    radial-gradient(ellipse at 90% 50%, rgba(200, 80, 50, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 40%, rgba(180, 60, 30, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #1a0a0a 0%, #2a1010 20%, #351515 40%, #2a1010 70%, #1a0a0a 100%);
  border: 2px solid rgba(200, 80, 50, 0.35);
  box-shadow: 
    0 0 60px rgba(200, 80, 50, 0.2),
    0 0 100px rgba(180, 60, 30, 0.1),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.mars-container {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
  z-index: 1;
}

.mars-atmosphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 100, 70, 0.15) 0%, rgba(180, 80, 50, 0.08) 50%, transparent 70%);
  animation: mars-atmo-pulse 5s ease-in-out infinite alternate;
}

@keyframes mars-atmo-pulse {
  0% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.08); }
}

.mars-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 
    0 0 40px rgba(200, 80, 50, 0.4),
    0 0 80px rgba(180, 60, 30, 0.25);
}

.mars-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #e8a070 0%, #d47040 20%, #c05030 40%, #a03820 60%, #802010 80%, #601510 100%);
  box-shadow: 
    0 0 30px rgba(200, 80, 50, 0.5),
    0 0 60px rgba(180, 60, 30, 0.3),
    inset -25px -15px 50px rgba(50, 10, 5, 0.6),
    inset 8px 8px 25px rgba(255, 180, 150, 0.2);
  overflow: hidden;
  animation: mars-rotate 55s linear infinite;
}

@keyframes mars-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mars-surface {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 40%, rgba(180, 100, 70, 0.3) 0%, transparent 15%),
    radial-gradient(circle at 65% 30%, rgba(200, 120, 90, 0.25) 0%, transparent 20%),
    radial-gradient(circle at 50% 70%, rgba(160, 80, 50, 0.3) 0%, transparent 18%),
    radial-gradient(circle at 80% 60%, rgba(180, 90, 60, 0.25) 0%, transparent 15%);
}

.mars-crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(100, 40, 25, 0.7) 0%, rgba(80, 30, 20, 0.8) 50%, rgba(60, 20, 15, 0.9) 100%);
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -1px -1px 3px rgba(200, 150, 130, 0.15);
}

.mars-crater-1 {
  width: 30px;
  height: 30px;
  top: 25%;
  left: 20%;
}

.mars-crater-2 {
  width: 22px;
  height: 22px;
  top: 55%;
  left: 65%;
}

.mars-crater-3 {
  width: 18px;
  height: 18px;
  top: 70%;
  left: 35%;
}

.mars-valles {
  position: absolute;
  top: 40%;
  left: 10%;
  width: 60%;
  height: 8px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 30, 20, 0.6) 20%, rgba(100, 40, 25, 0.7) 50%, rgba(80, 30, 20, 0.6) 80%, transparent 100%);
  border-radius: 4px;
  transform: rotate(-15deg);
}

.mars-polar-cap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 20px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.7) 0%, rgba(230, 240, 255, 0.5) 50%, transparent 100%);
  border-radius: 50% 50% 0 0;
}

.mars-highlight {
  position: absolute;
  top: 12%;
  left: 22%;
  width: 35px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 200, 180, 0.35) 0%, transparent 70%);
  filter: blur(3px);
}

.mars-dust {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: 
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(200, 100, 60, 0.1) 30deg,
      transparent 60deg,
      transparent 120deg,
      rgba(180, 80, 50, 0.08) 150deg,
      transparent 180deg,
      transparent 240deg,
      rgba(200, 100, 60, 0.1) 270deg,
      transparent 300deg,
      transparent 360deg
    );
  animation: mars-dust-rotate 20s linear infinite;
}

@keyframes mars-dust-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Mars Moons */
.mars-moon {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c0c0c0 0%, #909090 40%, #606060 100%);
  box-shadow: 
    0 0 8px rgba(150, 150, 150, 0.3),
    inset -2px -1px 4px rgba(0, 0, 0, 0.4);
}

.phobos {
  width: 18px;
  height: 16px;
  border-radius: 45%;
  animation: phobos-orbit 12s linear infinite;
}

.deimos {
  width: 12px;
  height: 10px;
  border-radius: 40%;
  animation: deimos-orbit 18s linear infinite;
}

@keyframes phobos-orbit {
  0% { transform: rotate(0deg) translateX(110px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}

@keyframes deimos-orbit {
  0% { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

/* Mars Theme Styling */
.mars-theme .trust-safety-intro {
  position: relative;
  z-index: 2;
}

.mars-theme .trust-safety-intro h3 {
  background: linear-gradient(135deg, #ffffff 0%, #e8a070 30%, #d47040 60%, #c05030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mars-theme .trust-safety-intro p {
  color: rgba(230, 180, 160, 0.9);
}

.mars-theme .trust-features {
  position: relative;
  z-index: 2;
}

.mars-theme .trust-card {
  background: linear-gradient(135deg, rgba(100, 40, 30, 0.4) 0%, rgba(80, 30, 20, 0.5) 100%);
  border: 1px solid rgba(200, 80, 50, 0.3);
}

.mars-theme .trust-card:hover {
  box-shadow: 0 8px 30px rgba(200, 80, 50, 0.4);
  border-color: rgba(220, 100, 70, 0.6);
}

.mars-theme .trust-card i {
  color: #e8a070;
}

.mars-theme .trust-card h4 {
  color: #f0b090;
}

.mars-theme .trust-card p {
  color: rgba(220, 180, 160, 0.85);
}

.mars-theme .security-demo {
  background: linear-gradient(135deg, rgba(100, 40, 30, 0.3) 0%, rgba(30, 15, 10, 0.9) 100%);
  border-color: rgba(200, 80, 50, 0.4);
}

.mars-theme .security-statistics {
  border-color: rgba(200, 80, 50, 0.3);
}

@media (max-width: 1100px) {
  .mars-container {
    width: 220px;
    height: 220px;
    right: 2%;
  }

  .mars-planet { width: 120px; height: 120px; }
  .mars-atmosphere { width: 160px; height: 160px; }
  .mars-glow { width: 145px; height: 145px; }
  .mars-dust { width: 180px; height: 180px; }

  .mars-crater-1 { width: 24px; height: 24px; }
  .mars-crater-2 { width: 18px; height: 18px; }
  .mars-crater-3 { width: 14px; height: 14px; }

  .phobos { width: 14px; height: 12px; }
  .deimos { width: 10px; height: 8px; }

  @keyframes phobos-orbit {
    0% { transform: rotate(0deg) translateX(85px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(85px) rotate(-360deg); }
  }

  @keyframes deimos-orbit {
    0% { transform: rotate(0deg) translateX(110px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
  }
}

@media (max-width: 768px) {
  .trust-safety.mars-theme {
    padding-top: 240px;
  }

  .mars-container {
    top: 30px;
    right: 50%;
    transform: translateX(50%);
    width: 180px;
    height: 180px;
  }

  .mars-planet { width: 100px; height: 100px; }
  .mars-atmosphere { width: 140px; height: 140px; }
  .mars-glow { width: 125px; height: 125px; }
  .mars-dust { width: 160px; height: 160px; }
  .mars-polar-cap { width: 35px; height: 14px; }

  .mars-crater-1 { width: 20px; height: 20px; }
  .mars-crater-2 { width: 15px; height: 15px; }
  .mars-crater-3 { width: 12px; height: 12px; }

  .phobos { width: 12px; height: 10px; }
  .deimos { width: 8px; height: 7px; }

  @keyframes phobos-orbit {
    0% { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
  }

  @keyframes deimos-orbit {
    0% { transform: rotate(0deg) translateX(90px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
  }
}

@media (max-width: 480px) {
  .trust-safety.mars-theme {
    padding-top: 200px;
  }

  .mars-container {
    width: 150px;
    height: 150px;
    top: 20px;
  }

  .mars-planet { width: 80px; height: 80px; }
  .mars-atmosphere { width: 115px; height: 115px; }
  .mars-glow { width: 105px; height: 105px; }
  .mars-dust { width: 130px; height: 130px; }
  .mars-polar-cap { width: 28px; height: 10px; }

  .mars-crater-1 { width: 16px; height: 16px; }
  .mars-crater-2 { width: 12px; height: 12px; }
  .mars-crater-3 { width: 10px; height: 10px; }

  .mars-valles { height: 5px; }

  .phobos { width: 10px; height: 8px; }
  .deimos { width: 7px; height: 6px; }

  @keyframes phobos-orbit {
    0% { transform: rotate(0deg) translateX(55px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(55px) rotate(-360deg); }
  }

  @keyframes deimos-orbit {
    0% { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
  }
}

.trust-safety-intro {
  text-align: center;
}

.trust-safety-intro h3 {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.trust-safety-intro p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.trust-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.trust-card {
  background-color: var(--third-color);
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

.trust-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4), 0 0 30px rgba(0, 217, 255, 0.2);
  border-color: rgba(139, 92, 246, 0.6);
}

.trust-card i {
  font-size: 3rem;
  color: var(--accent-primary);
  margin-bottom: 15px;
  display: block;
}

.trust-card h4 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.trust-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.security-demo {
  margin-top: 30px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(15, 15, 35, 0.95) 100%);
  border-radius: 10px;
  text-align: center;
  border: 2px solid rgba(139, 92, 246, 0.4);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.2), inset 0 0 30px rgba(0, 217, 255, 0.05);
}

.security-demo::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
  animation: protection-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes protection-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.5;
  }
}

.live-protection-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 15, 35, 0.9);
  padding: 8px 15px;
  border-radius: 20px;
  border: 2px solid var(--accent-primary);
  z-index: 10;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}

.live-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ff00;
  box-shadow: 0 0 10px #00ff00;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.security-demo h4 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.security-demo > p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.threat-container {
  position: relative;
  min-height: 300px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 15, 35, 0.7);
  margin: 20px 0;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1);
}

.protection-status {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 20px;
  border-radius: 20px;
  border: 2px solid rgba(0, 255, 0, 0.5);
  z-index: 10;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

.protection-status i {
  color: #00ff00;
  font-size: 1.2rem;
  animation: shield-pulse 2s ease-in-out infinite;
}

@keyframes shield-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.threat-absorbed-counter {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 20px;
  border-radius: 20px;
  border: 2px solid var(--accent-primary);
  z-index: 10;
  color: var(--text-primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.threat-absorbed-counter span {
  color: var(--accent-primary);
  font-size: 1.5rem;
  font-weight: bold;
}

.threat {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff4444;
  background: radial-gradient(circle, rgba(255, 68, 68, 0.4) 0%, rgba(255, 68, 68, 0.1) 100%);
  border: 2px solid #ff4444;
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.8), 0 0 40px rgba(255, 68, 68, 0.4);
  pointer-events: none;
  z-index: 5;
  animation: threat-absorb 3s linear forwards, threat-glow 1s ease-in-out infinite;
}

.threat-label {
  font-size: 1.8rem;
  display: block;
  animation: threat-shake 0.5s ease-in-out infinite;
}

@keyframes threat-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.8), 0 0 40px rgba(255, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 68, 68, 1), 0 0 60px rgba(255, 68, 68, 0.6);
  }
}

@keyframes threat-shake {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, -2px) rotate(-5deg);
  }
  75% {
    transform: translate(2px, 2px) rotate(5deg);
  }
}

.threat.virus {
  border-color: #ff6b6b;
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.8), 0 0 40px rgba(255, 107, 107, 0.4);
}

.threat.malware {
  border-color: #ff8c42;
  box-shadow: 0 0 20px rgba(255, 140, 66, 0.8), 0 0 40px rgba(255, 140, 66, 0.4);
}

.threat.scammer {
  border-color: #ff4444;
}

.threat.hacker {
  border-color: #ff6b9d;
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.8), 0 0 40px rgba(255, 107, 157, 0.4);
}

.threat.spyware {
  border-color: #9b59b6;
  box-shadow: 0 0 20px rgba(155, 89, 182, 0.8), 0 0 40px rgba(155, 89, 182, 0.4);
}

.threat.trojan {
  border-color: #e74c3c;
  box-shadow: 0 0 20px rgba(231, 76, 60, 0.8), 0 0 40px rgba(231, 76, 60, 0.4);
}

/* Security Statistics */
.security-statistics {
  margin-top: 30px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  border: 2px solid rgba(188, 145, 41, 0.3);
}

.security-statistics h4 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 25px;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(15, 15, 35, 0.9) 100%);
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  border: 2px solid rgba(139, 92, 246, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4), 0 0 30px rgba(0, 217, 255, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
}

.stat-icon {
  font-size: 2.5rem;
  color: var(--accent-primary);
  margin-bottom: 15px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-family: 'Ubuntu', sans-serif;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.chart-box {
  background: rgba(15, 15, 35, 0.6);
  padding: 25px;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.chart-box h5 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-align: center;
}

.pie-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#pieChart {
  max-width: 100%;
  height: auto;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-size: 0.9rem;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-label {
  flex: 1;
  color: var(--text-primary);
  font-weight: 500;
}

.legend-value {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.bar-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#barChart {
  max-width: 100%;
  height: auto;
}

@keyframes threat-absorb {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(50vw - var(--start-x, 0px) - 25px),
      calc(50vh - var(--start-y, 0px) - 25px)
    ) scale(0.1) rotate(720deg);
  }
}


/* ========== GALAXY GAMES SECTION ========== */
.galaxy-games {
  margin-top: 20px;
  padding: 40px 30px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  min-height: 600px;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
  border: 2px solid rgba(139, 92, 246, 0.4);
  box-shadow: 
    0 0 60px rgba(139, 92, 246, 0.3),
    inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.galaxy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.nebula {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 217, 255, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 100, 200, 0.08) 0%, transparent 50%);
  animation: nebula-drift 30s ease-in-out infinite;
}

@keyframes nebula-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-5%, 5%) rotate(5deg); }
}

.stars-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(139,92,246,0.9), transparent),
    radial-gradient(1px 1px at 160px 120px, #fff, transparent),
    radial-gradient(2px 2px at 200px 50px, rgba(0,217,255,0.9), transparent),
    radial-gradient(1px 1px at 250px 150px, #fff, transparent),
    radial-gradient(2px 2px at 300px 100px, rgba(255,100,200,0.9), transparent),
    radial-gradient(1px 1px at 350px 200px, #fff, transparent),
    radial-gradient(2px 2px at 400px 60px, rgba(139,92,246,0.8), transparent);
  background-size: 400px 250px;
  animation: stars-twinkle 4s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

.galaxy-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.galaxy-intro {
  text-align: center;
}

.galaxy-intro h3 {
  font-size: 2rem;
  background: linear-gradient(135deg, #fff 0%, #00d9ff 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
  text-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
}

.galaxy-intro p {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Mini Blackhole Zone */
.galaxy-blackhole-zone {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 20px 0;
}

.mini-blackhole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.event-horizon {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(139, 92, 246, 0.3) 60deg,
    rgba(0, 217, 255, 0.4) 120deg,
    rgba(255, 100, 200, 0.3) 180deg,
    rgba(0, 217, 255, 0.4) 240deg,
    rgba(139, 92, 246, 0.3) 300deg,
    transparent 360deg
  );
  animation: event-horizon-spin 4s linear infinite;
  box-shadow: 
    0 0 30px rgba(139, 92, 246, 0.5),
    0 0 60px rgba(0, 217, 255, 0.3);
}

@keyframes event-horizon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.singularity {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0%, #0a0a1a 100%);
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(0, 0, 0, 0.8);
  animation: singularity-pulse 2s ease-in-out infinite;
}

@keyframes singularity-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.absorbed-count {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 6px 15px;
  border-radius: 20px;
  border: 2px solid rgba(139, 92, 246, 0.5);
  font-size: 1rem;
  font-weight: 700;
  color: #ffd700;
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.mini-blackhole.absorbing .event-horizon {
  animation: event-horizon-absorb 0.5s ease-in-out;
}

@keyframes event-horizon-absorb {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.3); box-shadow: 0 0 60px rgba(139, 92, 246, 0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Star Categories */
.star-categories {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
}

.star-category {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 20px;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(15, 15, 35, 0.9) 100%);
  border-radius: 15px;
  border: 2px solid rgba(139, 92, 246, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  flex: 1;
  max-width: 150px;
}

.star-category:hover {
  transform: translateY(-5px) scale(1.05);
  border-color: rgba(0, 217, 255, 0.8);
  box-shadow: 
    0 10px 30px rgba(139, 92, 246, 0.4),
    0 0 20px rgba(0, 217, 255, 0.3);
}

.star-category.selected {
  border-color: #ffd700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(26, 26, 46, 0.9) 100%);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.star-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.star-category:hover .star-glow,
.star-category.selected .star-glow {
  opacity: 1;
}

.star-icon {
  font-size: 2.5rem;
  animation: star-float 3s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes star-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.star-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Absorbing animation */
.star-category.absorbing {
  animation: star-absorb 0.8s ease-in forwards;
  pointer-events: none;
}

@keyframes star-absorb {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    transform: scale(1.2) rotate(15deg);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(720deg) translateY(-100px);
    filter: blur(10px);
  }
}

/* Galaxy Search Button */
.galaxy-search-zone {
  margin-top: 20px;
}

.galaxy-search-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 
    0 5px 25px rgba(139, 92, 246, 0.5),
    0 0 40px rgba(139, 92, 246, 0.3);
}

.galaxy-search-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    0 8px 35px rgba(139, 92, 246, 0.7),
    0 0 60px rgba(0, 217, 255, 0.4);
}

.galaxy-search-btn:active {
  transform: scale(0.98);
}

.search-icon {
  font-size: 1.5rem;
}

.search-energy {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: energy-sweep 2s linear infinite;
}

@keyframes energy-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

.galaxy-search-btn.searching {
  animation: search-pulse 0.5s ease-in-out infinite;
}

@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); }
  50% { box-shadow: 0 0 80px rgba(0, 217, 255, 0.8); }
}

/* Casino Games Result */
.casino-games-result {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  width: 100%;
  max-width: 1100px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.6s ease;
  justify-items: center;
}

.casino-games-result.visible {
  opacity: 1;
  max-height: 3000px;
  padding-top: 30px;
}

.casino-game-card {
  position: relative;
  background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(15, 15, 35, 0.95) 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(139, 92, 246, 0.3);
  cursor: pointer;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  width: 100%;
}

.casino-game-card[style*="display: none"] {
  display: none !important;
}

.casino-game-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.casino-game-card:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: rgba(0, 217, 255, 0.8);
  box-shadow: 
    0 15px 40px rgba(139, 92, 246, 0.5),
    0 0 30px rgba(0, 217, 255, 0.3);
}

.casino-game-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.4s ease;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
  display: block;
}

.casino-game-card:hover img {
  transform: scale(1.1);
}

.game-info {
  padding: 12px 8px;
  text-align: center;
}

.game-info h4 {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.category-tag {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(0, 217, 255, 0.3) 100%);
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.casino-game-card.highlight {
  border-color: #ffd700;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
  animation: card-highlight 1s ease-in-out infinite;
}

@keyframes card-highlight {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 50px rgba(255, 215, 0, 0.7); }
}

/* Responsive */
@media (max-width: 900px) {
  .star-categories {
    flex-wrap: wrap;
    gap: 15px;
  }

  .star-category {
    min-width: 90px;
    max-width: 130px;
  }
}

@media (max-width: 768px) {
  .galaxy-games {
    padding: 30px 20px;
    min-height: 500px;
  }

  .galaxy-intro h3 {
    font-size: 1.5rem;
  }

  .star-categories {
    gap: 12px;
  }

  .star-category {
    padding: 15px 15px;
    min-width: 80px;
    max-width: 110px;
  }

  .star-icon {
    font-size: 2rem;
  }

  .star-label {
    font-size: 0.7rem;
  }

  .galaxy-search-btn {
    padding: 14px 30px;
    font-size: 1rem;
  }

  .casino-games-result {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .casino-game-card img {
    height: 100px;
  }

  .game-info {
    padding: 10px;
  }

  .game-info h4 {
    font-size: 0.8rem;
  }

  .category-tag {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
}

@media (max-width: 600px) {
  .casino-games-result {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .star-categories {
    gap: 8px;
  }

  .star-category {
    padding: 10px 10px;
    min-width: 70px;
    max-width: 100px;
  }

  .star-icon {
    font-size: 1.5rem;
  }

  .star-label {
    font-size: 0.6rem;
  }

  .casino-games-result {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .casino-game-card img {
    height: 80px;
  }

  .game-info {
    padding: 8px;
  }

  .game-info h4 {
    font-size: 0.75rem;
  }

  .category-tag {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
}

/* ========== SATURN SECTION ========== */
.saturn-section {
  position: relative;
  margin-top: 20px;
  padding: 50px 40px;
  padding-left: 350px;
  border-radius: 15px;
  background: 
    radial-gradient(ellipse at 15% 50%, rgba(230, 190, 130, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 40%, rgba(200, 160, 100, 0.07) 0%, transparent 40%),
    linear-gradient(135deg, #12100a 0%, #1a1610 20%, #252015 40%, #1a1610 70%, #12100a 100%);
  border: 2px solid rgba(230, 190, 130, 0.3);
  box-shadow: 
    0 0 60px rgba(230, 190, 130, 0.15),
    0 0 100px rgba(200, 160, 100, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-height: 400px;
}

.saturn-container {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

.saturn-outer-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 140, 0.15) 0%, rgba(200, 170, 110, 0.08) 40%, transparent 65%);
  animation: saturn-glow-pulse 5s ease-in-out infinite alternate;
}

@keyframes saturn-glow-pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

.saturn-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #f5e6c8 0%, #e8d4a8 20%, #d4b896 40%, #c4a070 60%, #a08050 80%, #806030 100%);
  box-shadow: 
    0 0 30px rgba(230, 200, 140, 0.5),
    0 0 60px rgba(200, 170, 110, 0.3),
    inset -20px -12px 40px rgba(60, 40, 20, 0.5),
    inset 8px 8px 25px rgba(255, 245, 220, 0.25);
  overflow: hidden;
  z-index: 10;
  animation: saturn-rotate 70s linear infinite;
}

@keyframes saturn-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.saturn-bands {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(180deg, 
      transparent 0%,
      rgba(180, 140, 80, 0.3) 15%,
      transparent 20%,
      transparent 30%,
      rgba(160, 120, 70, 0.25) 35%,
      transparent 40%,
      transparent 50%,
      rgba(200, 160, 100, 0.3) 55%,
      transparent 60%,
      transparent 70%,
      rgba(180, 140, 80, 0.25) 75%,
      transparent 80%,
      transparent 90%,
      rgba(160, 120, 70, 0.2) 95%,
      transparent 100%
    );
}

.saturn-storm {
  position: absolute;
  top: 35%;
  left: 60%;
  width: 20px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 240, 200, 0.4) 0%, transparent 70%);
  animation: saturn-storm-pulse 3s ease-in-out infinite;
}

@keyframes saturn-storm-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.saturn-highlight {
  position: absolute;
  top: 15%;
  left: 25%;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 250, 230, 0.4) 0%, transparent 70%);
  filter: blur(3px);
}

/* Saturn Rings - Behind */
.saturn-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  z-index: 5;
}

.saturn-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.saturn-ring.ring-1 {
  width: 200px;
  height: 200px;
  border-width: 12px;
  border-color: rgba(210, 180, 130, 0.5);
  box-shadow: 
    0 0 10px rgba(210, 180, 130, 0.3),
    inset 0 0 10px rgba(210, 180, 130, 0.2);
}

.saturn-ring.ring-2 {
  width: 240px;
  height: 240px;
  border-width: 8px;
  border-color: rgba(190, 160, 110, 0.4);
}

.saturn-ring.ring-3 {
  width: 270px;
  height: 270px;
  border-width: 5px;
  border-color: rgba(170, 140, 100, 0.3);
}

/* Saturn Rings - Front (overlapping planet) */
.saturn-rings-front {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  z-index: 15;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.saturn-ring-front {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.saturn-ring-front.ring-1 {
  width: 200px;
  height: 200px;
  border-width: 12px;
  border-color: rgba(210, 180, 130, 0.6);
  box-shadow: 0 0 8px rgba(210, 180, 130, 0.3);
}

.saturn-ring-front.ring-2 {
  width: 240px;
  height: 240px;
  border-width: 8px;
  border-color: rgba(190, 160, 110, 0.5);
}

.saturn-ring-front.ring-3 {
  width: 270px;
  height: 270px;
  border-width: 5px;
  border-color: rgba(170, 140, 100, 0.4);
}

/* Titan Moon */
.saturn-moon.titan {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8c080 0%, #c09050 50%, #906030 100%);
  box-shadow: 
    0 0 10px rgba(200, 150, 80, 0.4),
    inset -3px -2px 6px rgba(50, 30, 15, 0.5);
  animation: titan-orbit 25s linear infinite;
}

@keyframes titan-orbit {
  0% { transform: rotate(0deg) translateX(160px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(160px) rotate(-360deg); }
}

.saturn-content {
  position: relative;
  z-index: 2;
}

.saturn-header {
  margin-bottom: 25px;
}

.saturn-header h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #f5e6c8 30%, #e8d4a8 60%, #d4b896 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.saturn-subtitle {
  font-size: 1.1rem;
  color: rgba(230, 200, 150, 0.9);
  font-weight: 500;
}

.saturn-text-content {
  margin-bottom: 30px;
}

.saturn-text-content p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 15px;
}

.saturn-text-content strong {
  color: #f5e6c8;
}

.saturn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.saturn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(135deg, rgba(230, 190, 130, 0.15) 0%, rgba(200, 160, 100, 0.1) 100%);
  border-radius: 15px;
  border: 1px solid rgba(230, 190, 130, 0.3);
  transition: all 0.3s ease;
}

.saturn-stat:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(230, 190, 130, 0.25) 0%, rgba(200, 160, 100, 0.15) 100%);
  box-shadow: 0 10px 30px rgba(230, 190, 130, 0.25);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #f5e6c8;
  margin-bottom: 5px;
}

.stat-desc {
  font-size: 0.85rem;
  color: rgba(230, 210, 180, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .saturn-section {
    padding-left: 40px;
    padding-top: 320px;
  }

  .saturn-container {
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
  }

  .saturn-planet { width: 100px; height: 100px; }
  .saturn-outer-glow { width: 230px; height: 230px; }

  .saturn-ring.ring-1, .saturn-ring-front.ring-1 { width: 170px; height: 170px; border-width: 10px; }
  .saturn-ring.ring-2, .saturn-ring-front.ring-2 { width: 200px; height: 200px; border-width: 7px; }
  .saturn-ring.ring-3, .saturn-ring-front.ring-3 { width: 225px; height: 225px; border-width: 4px; }

  .saturn-moon.titan { width: 18px; height: 18px; }

  @keyframes titan-orbit {
    0% { transform: rotate(0deg) translateX(130px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
  }

  .saturn-header h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .saturn-subtitle {
    text-align: center;
  }

  .saturn-stats {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .saturn-section {
    padding-top: 280px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .saturn-container {
    width: 200px;
    height: 200px;
    top: 20px;
  }

  .saturn-planet { width: 80px; height: 80px; }
  .saturn-outer-glow { width: 190px; height: 190px; }

  .saturn-ring.ring-1, .saturn-ring-front.ring-1 { width: 140px; height: 140px; border-width: 8px; }
  .saturn-ring.ring-2, .saturn-ring-front.ring-2 { width: 165px; height: 165px; border-width: 5px; }
  .saturn-ring.ring-3, .saturn-ring-front.ring-3 { width: 185px; height: 185px; border-width: 3px; }

  .saturn-moon.titan { width: 14px; height: 14px; }

  @keyframes titan-orbit {
    0% { transform: rotate(0deg) translateX(105px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(105px) rotate(-360deg); }
  }

  .saturn-header h2 {
    font-size: 1.3rem;
  }

  .saturn-stat {
    padding: 15px 20px;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .stat-desc {
    font-size: 0.75rem;
  }
}

/* ========== URANUS SECTION ========== */
.uranus-section {
  position: relative;
  margin-top: 20px;
  padding: 50px 40px;
  border-radius: 15px;
  background: 
    radial-gradient(ellipse at 85% 50%, rgba(100, 220, 220, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 40%, rgba(80, 200, 200, 0.07) 0%, transparent 40%),
    linear-gradient(135deg, #0a1215 0%, #0d1a1f 20%, #102530 40%, #0d1a1f 70%, #0a1215 100%);
  border: 2px solid rgba(100, 220, 220, 0.3);
  box-shadow: 
    0 0 60px rgba(100, 220, 220, 0.15),
    0 0 100px rgba(80, 200, 200, 0.08),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 60px;
}

.uranus-container {
  position: relative;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  pointer-events: none;
}

.uranus-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 220, 220, 0.2) 0%, rgba(80, 200, 200, 0.1) 40%, transparent 65%);
  animation: uranus-glow-pulse 5s ease-in-out infinite alternate;
}

@keyframes uranus-glow-pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.08); }
}

.uranus-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #c0f0f0 0%, #80d8d8 20%, #50c8c8 40%, #30b0b0 60%, #209090 80%, #107070 100%);
  box-shadow: 
    0 0 35px rgba(100, 220, 220, 0.5),
    0 0 70px rgba(80, 200, 200, 0.3),
    inset -22px -12px 45px rgba(10, 50, 50, 0.5),
    inset 8px 8px 25px rgba(200, 255, 255, 0.25);
  overflow: hidden;
  z-index: 10;
  animation: uranus-rotate 80s linear infinite;
}

@keyframes uranus-rotate {
  from { transform: translate(-50%, -50%) rotate(-8deg); }
  to { transform: translate(-50%, -50%) rotate(352deg); }
}

.uranus-atmosphere {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(200, 255, 255, 0.15) 0%, transparent 50%);
}

.uranus-bands {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(180deg, 
      transparent 0%,
      rgba(150, 230, 230, 0.15) 20%,
      transparent 25%,
      transparent 45%,
      rgba(130, 220, 220, 0.12) 50%,
      transparent 55%,
      transparent 75%,
      rgba(150, 230, 230, 0.15) 80%,
      transparent 100%
    );
}

.uranus-highlight {
  position: absolute;
  top: 15%;
  left: 22%;
  width: 35px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(220, 255, 255, 0.4) 0%, transparent 70%);
  filter: blur(4px);
}

/* Uranus Rings - Tilted vertically */
.uranus-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg) rotateX(75deg);
  z-index: 5;
}

.uranus-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.u-ring-1 {
  width: 190px;
  height: 190px;
  border-width: 4px;
  border-color: rgba(150, 220, 220, 0.35);
  box-shadow: 0 0 8px rgba(150, 220, 220, 0.2);
}

.u-ring-2 {
  width: 210px;
  height: 210px;
  border-width: 2px;
  border-color: rgba(130, 200, 200, 0.25);
}

/* Uranus Moons */
.uranus-moon {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d0d0d0 0%, #a0a0a0 50%, #707070 100%);
  box-shadow: 
    0 0 6px rgba(180, 180, 180, 0.3),
    inset -2px -1px 4px rgba(0, 0, 0, 0.4);
}

.uranus-moon.miranda {
  width: 14px;
  height: 14px;
  animation: miranda-orbit 15s linear infinite;
}

.uranus-moon.ariel {
  width: 10px;
  height: 10px;
  animation: ariel-orbit 22s linear infinite reverse;
}

@keyframes miranda-orbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes ariel-orbit {
  0% { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

.uranus-content {
  flex: 1;
  position: relative;
  z-index: 2;
}

.uranus-header {
  margin-bottom: 30px;
}

.uranus-header h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #c0f0f0 30%, #80d8d8 60%, #50c8c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.uranus-subtitle {
  font-size: 1.1rem;
  color: rgba(150, 220, 220, 0.9);
  font-weight: 500;
}

.uranus-points {
  margin-top: 20px;
}

.point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.point-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(100, 220, 220, 0.1) 0%, rgba(80, 200, 200, 0.05) 100%);
  border-radius: 12px;
  border: 1px solid rgba(100, 220, 220, 0.2);
  transition: all 0.3s ease;
}

.point-list li:hover {
  transform: translateX(10px);
  background: linear-gradient(135deg, rgba(100, 220, 220, 0.18) 0%, rgba(80, 200, 200, 0.1) 100%);
  border-color: rgba(100, 220, 220, 0.4);
  box-shadow: 0 5px 25px rgba(100, 220, 220, 0.2);
}

.point-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(100, 220, 220, 0.2) 0%, rgba(80, 200, 200, 0.1) 100%);
  border-radius: 12px;
  border: 1px solid rgba(100, 220, 220, 0.3);
}

.point-content strong {
  display: block;
  font-size: 1.1rem;
  color: #c0f0f0;
  margin-bottom: 5px;
}

.point-content p {
  font-size: 0.95rem;
  color: rgba(200, 230, 230, 0.85);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .uranus-section {
    flex-direction: column;
    padding: 40px 25px;
    padding-top: 280px;
  }

  .uranus-container {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
  }

  .uranus-planet { width: 100px; height: 100px; }
  .uranus-glow { width: 180px; height: 180px; }
  .u-ring-1 { width: 150px; height: 150px; }
  .u-ring-2 { width: 170px; height: 170px; }

  .uranus-moon.miranda { width: 12px; height: 12px; }
  .uranus-moon.ariel { width: 8px; height: 8px; }

  @keyframes miranda-orbit {
    0% { transform: rotate(0deg) translateX(95px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(95px) rotate(-360deg); }
  }

  @keyframes ariel-orbit {
    0% { transform: rotate(0deg) translateX(110px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
  }

  .uranus-header h2 {
    font-size: 1.5rem;
    text-align: center;
  }

  .uranus-subtitle {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .uranus-section {
    padding-top: 230px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .uranus-container {
    width: 180px;
    height: 180px;
    top: 20px;
  }

  .uranus-planet { width: 80px; height: 80px; }
  .uranus-glow { width: 150px; height: 150px; }
  .u-ring-1 { width: 120px; height: 120px; border-width: 3px; }
  .u-ring-2 { width: 140px; height: 140px; }

  .uranus-moon.miranda { width: 10px; height: 10px; }
  .uranus-moon.ariel { width: 7px; height: 7px; }

  @keyframes miranda-orbit {
    0% { transform: rotate(0deg) translateX(75px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(75px) rotate(-360deg); }
  }

  @keyframes ariel-orbit {
    0% { transform: rotate(0deg) translateX(90px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
  }

  .uranus-header h2 {
    font-size: 1.3rem;
  }

  .point-list li {
    padding: 14px 16px;
    gap: 12px;
  }

  .point-icon {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }

  .point-content strong {
    font-size: 1rem;
  }

  .point-content p {
    font-size: 0.85rem;
  }
}

.faq {
  margin-top: 20px;
  padding: 30px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ========== NEPTUNE THEME ========== */
.faq.neptune-theme {
  position: relative;
  background: 
    radial-gradient(ellipse at 90% 50%, rgba(50, 100, 200, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 40%, rgba(30, 80, 180, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #050815 0%, #0a1025 20%, #101840 40%, #0a1025 70%, #050815 100%);
  border: 2px solid rgba(50, 100, 200, 0.35);
  box-shadow: 
    0 0 60px rgba(50, 100, 200, 0.2),
    0 0 100px rgba(30, 80, 180, 0.1),
    inset 0 0 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  padding-right: 300px;
}

.neptune-container {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 1;
}

.neptune-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 100, 200, 0.25) 0%, rgba(30, 80, 180, 0.12) 40%, transparent 65%);
  animation: neptune-glow-pulse 6s ease-in-out infinite alternate;
}

@keyframes neptune-glow-pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
}

.neptune-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 30%, #6090d0 0%, #4070c0 20%, #3060b0 40%, #2050a0 60%, #104080 80%, #082860 100%);
  box-shadow: 
    0 0 35px rgba(50, 100, 200, 0.6),
    0 0 70px rgba(30, 80, 180, 0.4),
    inset -25px -15px 50px rgba(5, 20, 50, 0.6),
    inset 10px 10px 30px rgba(150, 180, 255, 0.2);
  overflow: hidden;
  z-index: 10;
  animation: neptune-rotate 65s linear infinite;
}

@keyframes neptune-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.neptune-atmosphere {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(150, 180, 255, 0.15) 0%, transparent 50%);
}

.neptune-bands {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(180deg, 
      transparent 0%,
      rgba(80, 120, 200, 0.2) 15%,
      transparent 20%,
      transparent 35%,
      rgba(60, 100, 180, 0.15) 40%,
      transparent 45%,
      transparent 60%,
      rgba(80, 120, 200, 0.2) 65%,
      transparent 70%,
      transparent 85%,
      rgba(60, 100, 180, 0.15) 90%,
      transparent 100%
    );
}

.neptune-dark-spot {
  position: absolute;
  top: 35%;
  left: 55%;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20, 40, 80, 0.7) 0%, rgba(30, 60, 100, 0.5) 50%, transparent 100%);
  transform: rotate(-15deg);
  animation: dark-spot-pulse 4s ease-in-out infinite;
}

@keyframes dark-spot-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.neptune-highlight {
  position: absolute;
  top: 12%;
  left: 20%;
  width: 35px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(180, 200, 255, 0.35) 0%, transparent 70%);
  filter: blur(4px);
}

/* Neptune Rings */
.neptune-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(80deg);
  z-index: 5;
}

.neptune-ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.n-ring-1 {
  width: 200px;
  height: 200px;
  border-width: 2px;
  border-color: rgba(80, 120, 200, 0.25);
  box-shadow: 0 0 6px rgba(80, 120, 200, 0.15);
}

.n-ring-2 {
  width: 230px;
  height: 230px;
  border-width: 1px;
  border-color: rgba(60, 100, 180, 0.2);
}

/* Triton Moon */
.neptune-moon.triton {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e0d0c0 0%, #c0a090 50%, #907060 100%);
  box-shadow: 
    0 0 10px rgba(200, 180, 160, 0.3),
    inset -3px -2px 6px rgba(50, 30, 20, 0.5);
  animation: triton-orbit 20s linear infinite reverse;
}

@keyframes triton-orbit {
  0% { transform: rotate(0deg) translateX(130px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
}

/* Neptune Theme Styling */
.neptune-theme h3 {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #ffffff 0%, #a0c0f0 30%, #6090d0 60%, #4070c0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.neptune-theme .faq-item {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(50, 100, 200, 0.15) 0%, rgba(30, 80, 180, 0.1) 100%);
  border: 1px solid rgba(50, 100, 200, 0.25);
}

.neptune-theme .faq-item:hover {
  background: linear-gradient(135deg, rgba(50, 100, 200, 0.25) 0%, rgba(30, 80, 180, 0.15) 100%);
  border-color: rgba(80, 130, 220, 0.5);
  box-shadow: 0 5px 25px rgba(50, 100, 200, 0.25);
}

.neptune-theme .faq-item h4 {
  color: #a0c0f0;
}

.neptune-theme .faq-item p {
  color: rgba(180, 200, 240, 0.9);
}

@media (max-width: 900px) {
  .faq.neptune-theme {
    padding-right: 30px;
    padding-top: 280px;
  }

  .neptune-container {
    top: 30px;
    right: 50%;
    transform: translateX(50%);
    width: 220px;
    height: 220px;
  }

  .neptune-planet { width: 110px; height: 110px; }
  .neptune-glow { width: 180px; height: 180px; }
  .n-ring-1 { width: 160px; height: 160px; }
  .n-ring-2 { width: 185px; height: 185px; }
  .neptune-dark-spot { width: 22px; height: 14px; }

  .neptune-moon.triton { width: 16px; height: 16px; }

  @keyframes triton-orbit {
    0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
  }
}

@media (max-width: 480px) {
  .faq.neptune-theme {
    padding-top: 230px;
  }

  .neptune-container {
    width: 180px;
    height: 180px;
    top: 20px;
  }

  .neptune-planet { width: 90px; height: 90px; }
  .neptune-glow { width: 150px; height: 150px; }
  .n-ring-1 { width: 130px; height: 130px; }
  .n-ring-2 { width: 150px; height: 150px; }
  .neptune-dark-spot { width: 18px; height: 12px; }

  .neptune-moon.triton { width: 12px; height: 12px; }

  @keyframes triton-orbit {
    0% { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
  }
}

.faq h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.faq-item {
  background-color: var(--third-color);
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-item h4 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 10px;
  position: relative;
}

.faq-item p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.faq-item.active p {
  max-height: 500px;
  opacity: 1;
}

.footer {
  background-color: rgba(15, 15, 35, 0.95);
  padding: 40px 20px;
  margin-top: 40px;
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  position: relative;
  z-index: 1;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.1);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.footer-logo img {
  height: 50px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.footer-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent-primary);
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}

.footer-copy p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 1024px) {
  .navbar {
    padding: 20px 40px;
    flex-wrap: wrap;
  }

  .about-us {
    flex-direction: column;
  }

  .about-us-banner,
  .about-us-intro {
    max-width: 100%;
    border-radius: 10px;
  }

  .about-us-intro {
    padding: 20px;
  }

  .bonus {
    flex-direction: column;
  }

  .bonus-banner,
  .bonus-details {
    max-width: 100%;
  }

  .games {
    padding: 20px;
  }

  .trust-safety {
    padding: 20px;
  }

  .trust-features {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .threat-container {
    min-height: 250px;
  }

  .faq {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .navbar .auth-buttons {
    margin-top: 10px;
    width: 100%;
    gap: 20px;
    justify-content: center;
  }

  .navbar-menu {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .hero {
    padding: 30px;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .about-us-intro h2 {
    font-size: 1.4rem;
  }

  .games-intro h3,
  .trust-safety-intro h3,
  .security-statistics h4,
  .faq h3 {
    font-size: 1.3rem;
  }

  .security-statistics {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }

  .trust-features {
    grid-template-columns: 1fr;
  }

  .security-demo {
    padding: 20px;
  }

  .threat-container {
    min-height: 200px;
  }

  .threat-absorbed-counter {
    top: 10px;
    right: 10px;
    padding: 8px 15px;
    font-size: 0.8rem;
  }

  .threat-absorbed-counter span {
    font-size: 1.2rem;
  }

  .footer-container {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 15px;
  }

  .hero {
    padding: 20px;
  }

  .hero-content h1 {
    font-size: 1.3rem;
  }

  .about-us-intro {
    padding: 15px;
  }

  .bonus-details {
    padding: 20px;
  }

  .games {
    padding: 15px;
  }

  .trust-safety {
    padding: 15px;
  }

  .trust-safety-intro h3 {
    font-size: 1.2rem;
  }

  .trust-card {
    padding: 20px;
  }

  .trust-card i {
    font-size: 2.5rem;
  }

  .security-demo {
    padding: 15px;
  }

  .live-protection-badge {
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    font-size: 0.7rem;
  }

  .live-indicator {
    width: 8px;
    height: 8px;
  }

  .security-demo h4 {
    font-size: 1.2rem;
    margin-top: 30px;
  }

  .threat-container {
    min-height: 180px;
  }

  .threat {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .threat-label {
    font-size: 1.5rem;
  }

  .protection-status {
    bottom: 10px;
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .protection-status i {
    font-size: 1rem;
  }

  .security-statistics {
    padding: 15px;
  }

  .security-statistics h4 {
    font-size: 1.2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stat-card {
    padding: 15px;
  }

  .stat-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }

  .chart-box {
    padding: 15px;
  }

  .chart-box h5 {
    font-size: 1rem;
  }

  #pieChart {
    width: 250px;
    height: 250px;
  }

  #barChart {
    width: 100%;
    height: 200px;
  }

  .faq {
    padding: 15px;
  }

  .footer {
    padding: 30px 15px;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }
}