:root {
  color-scheme: dark;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.hero-grid {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top, rgba(251, 191, 36, 0.18), transparent 55%),
    radial-gradient(circle at 20% 20%, rgba(248, 113, 113, 0.2), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(251, 146, 60, 0.15), transparent 40%),
    linear-gradient(120deg, rgba(12, 12, 15, 0.97), rgba(2, 6, 23, 0.98));
  filter: blur(0);
  z-index: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.45);
  color: #fde68a;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accent {
  background: linear-gradient(90deg, #f97316, #ef4444, #facc15);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pulse {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.45);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}