:root {
  --bg-noise: radial-gradient(circle at 20% 20%, rgba(255, 204, 0, 0.15), transparent 30%),
              radial-gradient(circle at 80% 10%, rgba(255, 204, 0, 0.08), transparent 32%),
              radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.06), transparent 38%);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #090909;
  background-image: var(--bg-noise);
  color: #f6f6f6;
  overflow-x: hidden;
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.ticker {
  animation: ticker 18s linear infinite;
  white-space: nowrap;
}

@keyframes ticker {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.45);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(255, 204, 0, 0);
  }
}

.pulse-ring {
  animation: pulse-ring 1.9s infinite;
}

.hero-overlay {
  background: linear-gradient(110deg, rgba(9, 9, 9, 0.92) 30%, rgba(9, 9, 9, 0.45) 70%, rgba(9, 9, 9, 0.8) 100%);
}

.mobile-cta {
  backdrop-filter: blur(8px);
}