:root {
  --radius: 0.875rem;

  /* Deep navy base */
  --background: oklch(0.16 0.04 265);
  --foreground: oklch(0.98 0.005 250);

  --card: oklch(0.21 0.045 265);
  --card-foreground: oklch(0.98 0.005 250);
  --popover: oklch(0.19 0.045 265);
  --popover-foreground: oklch(0.98 0.005 250);

  /* Premium electric blue */
  --primary: oklch(0.62 0.21 260);
  --primary-foreground: oklch(0.99 0 0);

  --secondary: oklch(0.26 0.04 265);
  --secondary-foreground: oklch(0.98 0.005 250);

  --muted: oklch(0.24 0.035 265);
  --muted-foreground: oklch(0.72 0.025 260);

  --accent: oklch(0.7 0.18 230);
  --accent-foreground: oklch(0.12 0.04 265);

  --destructive: oklch(0.65 0.22 25);
  --destructive-foreground: oklch(0.99 0 0);

  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.62 0.21 260);

  --brand: oklch(0.62 0.21 260);
  --brand-foreground: oklch(0.99 0 0);
  --brand-glow: oklch(0.7 0.2 235);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, oklch(0.62 0.21 260 / 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, oklch(0.7 0.2 235 / 0.12), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Custom styles mapped from utilities */
.glass {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.04), oklch(1 0 0 / 0.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid oklch(1 0 0 / 0.08);
}

.glass-strong {
  background: linear-gradient(180deg, oklch(1 0 0 / 0.07), oklch(1 0 0 / 0.03));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(1 0 0 / 0.1);
}

.text-gradient {
  background: linear-gradient(120deg, #ffffff 0%, #93c5fd 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-brand {
  background: linear-gradient(135deg, oklch(0.62 0.21 260), oklch(0.7 0.2 235));
}

.grid-bg {
  background-image:
    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.glow {
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.06), 0 20px 60px -20px oklch(0.62 0.21 260 / 0.55);
}

.hover-lift {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px -30px oklch(0.62 0.21 260 / 0.55);
  border-color: oklch(0.62 0.21 260 / 0.5);
}

.animate-float {
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.animate-fade-up {
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) both;
}

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

.animate-marquee {
  animation: marquee 38s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Custom Tailwind Config overrides for Play CDN */
@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-brand-glow: var(--brand-glow);
}