:root {
  --background: 224 25% 6%;
  --foreground: 210 24% 96%;
  --primary: 188 95% 60%;
  --secondary: 270 82% 66%;
  --muted: 215 17% 72%;
  --destructive: 0 82% 62%;
  --border: 220 20% 18%;
  --card: 222 22% 11%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 30px 120px rgba(0, 0, 0, 0.46);
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-smooth: 520ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --muted-foreground: 214 16% 68%;
}

.dark {
  --background: 224 25% 6%;
  --foreground: 210 24% 96%;
  --primary: 188 95% 60%;
  --secondary: 270 82% 66%;
  --muted: 215 17% 72%;
  --destructive: 0 82% 62%;
  --border: 220 20% 18%;
  --card: 222 22% 11%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button,
input,
select {
  font: inherit;
}

.glass-panel {
  background: linear-gradient(180deg, hsl(var(--card) / 0.78), hsl(var(--card) / 0.42));
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-sm);
}

.glow-button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 34px hsl(var(--primary) / 0.28);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.glow-button:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 42px hsl(var(--primary) / 0.42);
  filter: saturate(1.08);
}

.glow-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.glow-button:hover::after {
  transform: translateX(120%);
}

.glow-outline {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.44);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 30px hsl(var(--primary) / 0.08);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.glow-outline:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: 0 0 34px hsl(var(--primary) / 0.18);
  background: hsl(var(--primary) / 0.08);
}

.feature-card {
  backdrop-filter: blur(20px);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeZoom {
  from {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}