body {
  font-family: 'Raleway', sans-serif;
  background-color: #0A0A0A;
  color: #FFFFFF;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Orbitron', sans-serif;
}

/* Vercel Grid Gridlines */
.grid-overlay {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 60%, transparent 100%);
}

/* Ambient Mesh Glows */
.glow-mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Slow Rotate for Vortex Logo */
@keyframes spin-vortex {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.vortex-rotate {
  animation: spin-vortex 45s linear infinite;
}

/* Glassmorphism subtle */
.glass-panel {
  background: rgba(18, 18, 18, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Custom Border Glow for Vercel/Stripe Buttons */
.glow-button {
  position: relative;
  background: linear-gradient(135deg, #1C1C1C 0%, #0D0D0D 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glow-button::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6A1B9A, #D4AF37);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.glow-button:hover::before {
  opacity: 1;
}
.glow-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(106, 27, 154, 0.25);
  border-color: transparent;
}

/* Spotlight Card Hover effect styling */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(106, 27, 154, 0.07), transparent 80%);
  z-index: 1;
  pointer-events: none;
}
.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.08), transparent 80%);
  z-index: 0;
  pointer-events: none;
}

/* Service Card hover lift effect */
.card-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(106, 27, 154, 0.18), 0 0 0 1px rgba(106, 27, 154, 0.15);
  border-color: rgba(106, 27, 154, 0.25);
}

/* Radar Pulse Animation */
@keyframes radar-pulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}
.radar-circle {
  animation: radar-pulse 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* Scroll Indicator Line */
.scroll-indicator-line {
  height: 60px;
  width: 1px;
  background: linear-gradient(to bottom, #6A1B9A, transparent);
  will-change: transform, opacity;
  transform-origin: top center;
  animation: scroll-slide 2s ease-in-out infinite;
}
@keyframes scroll-slide {
  0%   { transform: scaleY(0); opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: scaleY(1); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* Floating animated particles in background */
@keyframes float-slow-1 {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  50% { transform: translate(30px, 60px) rotate(180deg); }
  100% { transform: translate(0px, 0px) rotate(360deg); }
}
@keyframes float-slow-2 {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  50% { transform: translate(-60px, 30px) rotate(-180deg); }
  100% { transform: translate(0px, 0px) rotate(-360deg); }
}
.floating-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
}
.blob-purple {
  background: #6A1B9A;
  animation: float-slow-1 25s ease-in-out infinite;
}
.blob-gold {
  background: #D4AF37;
  animation: float-slow-2 35s ease-in-out infinite;
}

/* Infinite Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}
.mask-gradient {
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}