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

:root {
  /* Colors */
  --bg-deep: #030303;
  --bg-dark: #09090b;
  --bg-card: rgba(13, 13, 17, 0.7);
  --bg-card-hover: rgba(20, 20, 28, 0.85);
  
  --primary: #1a56ff;
  --primary-glow: rgba(26, 86, 255, 0.15);
  --primary-glow-strong: rgba(26, 86, 255, 0.4);
  
  --secondary: #a832ff;
  --secondary-glow: rgba(168, 50, 255, 0.15);
  --secondary-glow-strong: rgba(168, 50, 255, 0.4);
  
  --accent-cyan: #00f2fe;
  --accent-cyan-glow: rgba(0, 242, 254, 0.15);
  
  --border: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-glow: linear-gradient(135deg, rgba(26, 86, 255, 0.3), rgba(168, 50, 255, 0.3));
  
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --text-gradient: linear-gradient(135deg, #ffffff 30%, #a1a1aa 100%);
  --tech-gradient: linear-gradient(135deg, #1a56ff 0%, #a832ff 50%, #00f2fe 100%);
  
  /* Fonts */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Sora', sans-serif;
  --font-mono: 'Space Grotesk', sans-serif;

  /* Spacing */
  --container-max-width: 1200px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base keyframes */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-reverse {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-0.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse-glow {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes dash {
  to {
    stroke-dashoffset: -40;
  }
}

@keyframes grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}