:root {
  --background: 42 50% 97%;
  --foreground: 224 38% 13%;
  --primary: 252 72% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 178 56% 42%;
  --secondary-foreground: 0 0% 100%;
  --muted: 232 18% 88%;
  --muted-foreground: 225 13% 43%;
  --destructive: 352 76% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 22% 84%;
  --card: 0 0% 100%;
  --card-foreground: 224 38% 13%;
  --shadow-sm: 0 6px 18px rgba(42, 35, 91, 0.08);
  --shadow-md: 0 18px 45px rgba(42, 35, 91, 0.14);
  --shadow-lg: 0 28px 80px rgba(42, 35, 91, 0.2);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
}

.dark {
  --background: 229 39% 8%;
  --foreground: 42 38% 94%;
  --primary: 257 82% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 176 64% 48%;
  --secondary-foreground: 224 38% 10%;
  --muted: 229 22% 18%;
  --muted-foreground: 228 13% 72%;
  --destructive: 352 76% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 229 22% 22%;
  --card: 229 33% 12%;
  --card-foreground: 42 38% 94%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 8%, hsl(var(--primary) / 0.22), transparent 32%),
    radial-gradient(circle at 85% 12%, hsl(var(--secondary) / 0.2), transparent 28%),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.45));
}

.glass {
  background: hsl(var(--card) / 0.76);
  backdrop-filter: blur(18px);
  border: 1px solid hsl(var(--border) / 0.75);
  box-shadow: var(--shadow-md);
}

.floating-orb {
  animation: floatOrb 7s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}

.reveal-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.reveal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--primary) / 0.42);
}

.gradient-text {
  background: linear-gradient(100deg, hsl(var(--primary)), hsl(var(--secondary)) 55%, hsl(31 92% 55%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.noise {
  position: relative;
  overflow: hidden;
}
.noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(hsl(var(--foreground)) 0.8px, transparent 0.8px);
  background-size: 9px 9px;
}

button, a { transition: all var(--transition-fast); }