/* NNPARK Design Tokens — extracted from React project */
:root {
  --background: 245 50% 6%;
  --foreground: 230 40% 98%;
  --card: 245 40% 10%;
  --card-foreground: 230 40% 98%;
  --primary: 260 90% 65%;
  --primary-foreground: 230 40% 98%;
  --primary-glow: 250 100% 75%;
  --secondary: 220 95% 60%;
  --secondary-foreground: 230 40% 98%;
  --muted: 245 30% 14%;
  --muted-foreground: 230 20% 70%;
  --accent: 45 100% 58%;
  --accent-foreground: 245 50% 6%;
  --accent-glow: 48 100% 65%;
  --border: 245 30% 20%;
  --radius: 1rem;

  --gradient-hero:
    radial-gradient(ellipse at top left, hsl(260 90% 35% / 0.45), transparent 52%),
    radial-gradient(ellipse at bottom right, hsl(220 95% 40% / 0.40), transparent 50%),
    radial-gradient(ellipse at 75% 5%, hsl(45 100% 50% / 0.14), transparent 42%),
    linear-gradient(180deg, hsl(245 60% 8%), hsl(250 55% 5%));
  --gradient-primary: linear-gradient(135deg, hsl(260 90% 65%), hsl(220 95% 60%));
  --gradient-cta: linear-gradient(135deg, hsl(45 100% 58%), hsl(38 100% 52%));
  --gradient-text: linear-gradient(135deg, hsl(250 100% 80%), hsl(200 100% 70%));

  --shadow-glow-yellow: 0 0 60px hsl(45 100% 55% / 0.5);
  --shadow-card: 0 8px 32px hsl(245 60% 4% / 0.6);

  --glass-bg: hsl(245 40% 14% / 0.5);
  --glass-border: hsl(260 60% 70% / 0.15);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: hsl(var(--foreground));
  background: var(--gradient-hero) fixed;
  min-height: 100vh;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
}

.btn-hero {
  background: var(--gradient-cta);
  color: hsl(var(--accent-foreground));
  font-weight: 700;
  box-shadow: var(--shadow-glow-yellow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 0 80px hsl(45 100% 60% / 0.7); }

.btn-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: hsl(var(--foreground));
  backdrop-filter: blur(20px);
  transition: background .25s ease;
}
.btn-glass:hover { background: hsl(245 40% 18% / 0.7); }

.shadow-card { box-shadow: var(--shadow-card); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up .8s ease-out both; }

@keyframes pulse-glow {
  0%,100% { opacity: .5; }
  50%     { opacity: .85; }
}
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }