@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Inter', system-ui, sans-serif;
  scroll-behavior: smooth;
}

body {
  background: #0a0914;
  color: #f1f5f9;
  overflow-x: hidden;
}

/* Animated gradient background */
.bg-fibe {
  background: linear-gradient(135deg, #0f0c29 0%, #1a1540 30%, #302b63 60%, #24243e 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Grid overlay */
.grid-overlay {
  background-image:
    linear-gradient(rgba(167,139,250,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Glassmorphism */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-strong {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(167,139,250,0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Glow effects */
.glow-purple {
  box-shadow: 0 0 60px rgba(167,139,250,0.15), 0 0 120px rgba(167,139,250,0.06);
}

.text-glow {
  text-shadow: 0 0 40px rgba(167,139,250,0.4);
}

/* Accent */
.accent { color: #a78bfa; }
.accent-bg { background: #a78bfa; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle radial glows */
.glow-orb-1 {
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.glow-orb-2 {
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f0c29; }
::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }