@font-face {
  font-family: 'Astro';
  src: url('/new-alldevelopers/assets/fonts/astro-regular.woff2') format('woff2'),
    url('/new-alldevelopers/assets/fonts/astro-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
   --color-primary: #7046BB;
   --color-secondary: #422189;
   --color-support: #DDCDF4;
   --color-dark: #0f1020;
   --color-gray: #1f213a;
 }
 .bg-primary { background-color: var(--color-primary); }
 .bg-secondary { background-color: var(--color-secondary); }
 .text-primary { color: var(--color-primary); }
 .text-secondary { color: var(--color-secondary); }
 .text-dark { color: var(--color-dark); }
 .text-gray { color: var(--color-gray); }
 .gradient-primary { background-image: linear-gradient(90deg, var(--color-secondary), var(--color-primary)); }
 .shadow-premium { box-shadow: 0 10px 25px rgba(16, 17, 32, 0.25); }
 .container-xl { max-width: 1280px; margin: 0 auto; }

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes floatYSlow {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

@keyframes driftRight {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.25; }
  50% { transform: translate3d(10px, -2px, 0); opacity: 0.45; }
}

@keyframes driftLeft {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.25; }
  50% { transform: translate3d(-10px, 2px, 0); opacity: 0.45; }
}

@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.03); opacity: 0.9; }
}

@keyframes dashLine {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -240; }
}

@keyframes dashLineReverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 240; }
}

@keyframes scanX {
  0% { transform: translate3d(-80px, 0, 0); opacity: 0; }
  15% { opacity: 0.28; }
  50% { opacity: 0.18; }
  85% { opacity: 0.28; }
  100% { transform: translate3d(80px, 0, 0); opacity: 0; }
}

@keyframes scanY {
  0% { transform: translate3d(0, -70px, 0); opacity: 0; }
  15% { opacity: 0.25; }
  50% { opacity: 0.16; }
  85% { opacity: 0.25; }
  100% { transform: translate3d(0, 70px, 0); opacity: 0; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes barsUp {
  0%, 100% { transform: scaleY(0.72); opacity: 0.7; }
  50% { transform: scaleY(1); opacity: 0.95; }
}

svg .svg-float { animation: floatY 6s ease-in-out infinite; transform-origin: center; }
svg .svg-float-slow { animation: floatYSlow 8s ease-in-out infinite; transform-origin: center; }
svg .svg-drift-right { animation: driftRight 7s ease-in-out infinite; transform-origin: center; }
svg .svg-drift-left { animation: driftLeft 7s ease-in-out infinite; transform-origin: center; }
svg .svg-pulse-soft { animation: pulseSoft 5s ease-in-out infinite; transform-origin: center; }
svg .svg-draw { stroke-dasharray: 18 14; animation: dashLine 9s linear infinite; }
svg .svg-draw-reverse { stroke-dasharray: 18 14; animation: dashLineReverse 9s linear infinite; }
svg .svg-scan-x { animation: scanX 4.8s ease-in-out infinite; transform-origin: center; }
svg .svg-scan-y { animation: scanY 5.2s ease-in-out infinite; transform-origin: center; }
svg .svg-spin-slow { animation: spinSlow 14s linear infinite; transform-origin: center; transform-box: fill-box; }
svg .svg-bars { animation: barsUp 2.8s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
svg .svg-bars-delay-1 { animation-delay: 0.3s; }
svg .svg-bars-delay-2 { animation-delay: 0.6s; }
svg .svg-bars-delay-3 { animation-delay: 0.9s; }
svg .svg-bars-delay-4 { animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
  svg .svg-float,
  svg .svg-float-slow,
  svg .svg-drift-right,
  svg .svg-drift-left,
  svg .svg-pulse-soft,
  svg .svg-draw,
  svg .svg-draw-reverse,
  svg .svg-scan-x,
  svg .svg-scan-y,
  svg .svg-spin-slow,
  svg .svg-bars,
  svg .svg-bars-delay-1,
  svg .svg-bars-delay-2,
  svg .svg-bars-delay-3,
  svg .svg-bars-delay-4 {
    animation: none !important;
  }
  svg .svg-motion { display: none !important; }
}