:root {
  --aevrix-green: #39ff14;
  --aevrix-lime: #9cf312;
  --aevrix-yellow: #f1c40f;
  --aevrix-dark: #08090a;

  --aevrix-gradient: linear-gradient(
    90deg,
    #39ff14 0%,
    #9cf312 48%,
    #f1c40f 100%
  );
}

html,
body {
  background-color: #08090a !important;
  min-height: 100% !important;
}

body {
  position: relative !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 55% 45% at -5% 8%,
      rgba(57, 255, 20, 0.18) 0%,
      rgba(57, 255, 20, 0.08) 42%,
      transparent 76%
    ),

    radial-gradient(
      ellipse 55% 45% at 105% 12%,
      rgba(241, 196, 15, 0.17) 0%,
      rgba(241, 196, 15, 0.07) 42%,
      transparent 76%
    ),

    radial-gradient(
      ellipse 45% 38% at 8% 52%,
      rgba(241, 196, 15, 0.07) 0%,
      transparent 72%
    ),

    radial-gradient(
      ellipse 48% 42% at 95% 48%,
      rgba(57, 255, 20, 0.09) 0%,
      transparent 72%
    ),

    radial-gradient(
      ellipse 55% 45% at -5% 92%,
      rgba(57, 255, 20, 0.16) 0%,
      rgba(57, 255, 20, 0.06) 42%,
      transparent 76%
    ),

    radial-gradient(
      ellipse 55% 45% at 105% 88%,
      rgba(241, 196, 15, 0.16) 0%,
      rgba(241, 196, 15, 0.06) 42%,
      transparent 76%
    ),

    #08090a;
}

body > * {
  position: relative;
  z-index: 1;
}

main,
main > *,
main .component,
.component,
.sa-hero,
.sa-features,
.sa-products,
.sa-steps,
.sa-stats,
.sa-feedbacks,
.sa-trust-badges,
.sa-footer {
  background-color: transparent !important;
}

.hero-bg-grid {
  background-color: transparent !important;
}

.sa-hero {
  background: transparent !important;
}

.sa-hero-eyebrow {
  background: var(--aevrix-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.sa-hero-title .hl-accent,
.sa-hero-title [class*="hl-"] {
  background: var(--aevrix-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.sa-hero-actions a:first-child,
.sa-hero-actions button:first-child {
  background: var(--aevrix-gradient) !important;
  color: #070807 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;

  box-shadow:
    -5px 0 20px rgba(57, 255, 20, 0.12),
    5px 0 20px rgba(241, 196, 15, 0.10);

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

.sa-hero-actions a:first-child *,
.sa-hero-actions button:first-child * {
  color: #070807 !important;
}

.sa-hero-actions a:first-child:hover,
.sa-hero-actions button:first-child:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);

  box-shadow:
    -8px 0 28px rgba(57, 255, 20, 0.18),
    8px 0 28px rgba(241, 196, 15, 0.15);
}

.sa-hero-actions a:nth-child(2),
.sa-hero-actions button:nth-child(2) {
  background: rgba(13, 14, 15, 0.88) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  backdrop-filter: blur(12px);
}

.sa-hero-actions a:nth-child(2) *,
.sa-hero-actions button:nth-child(2) * {
  color: #ffffff !important;
}

.sa-hero-actions a:nth-child(2):hover,
.sa-hero-actions button:nth-child(2):hover {
  border-color: rgba(156, 243, 18, 0.40) !important;
}

.text-accent-500 {
  color: var(--aevrix-green) !important;
}

.bg-accent-500 {
  background: var(--aevrix-gradient) !important;
}

.sa-product-card {
  background: rgba(17, 18, 20, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sa-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(156, 243, 18, 0.28) !important;

  box-shadow:
    -6px 0 22px rgba(57, 255, 20, 0.07),
    6px 0 22px rgba(241, 196, 15, 0.07);
}

.sa-footer {
  background: transparent !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

main a:not(.sa-btn):hover {
  color: var(--aevrix-green) !important;
}

::selection {
  background: var(--aevrix-yellow);
  color: #080808;
}