/* THEME: Aurora Depth
   A refined dark theme where the background itself carries soft, blurred
   color washes (an "aurora mesh") instead of a flat black page. Accent
   shifts to a cooler indigo/teal pairing for a premium SaaS feel. */

:root {
  --primary: #8b7bff;
  --secondary: #3ddccb;
  --background: #05060a;
  --surface: #12131e;
  --text: #f5f6fb;
  --text-secondary: rgba(222, 224, 238, 0.66);
  --gradient-primary: linear-gradient(135deg, #8b7bff, #3ddccb);
}

body {
  background: var(--background);
  position: relative;
}

/* Fixed aurora mesh sits behind every section */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 620px at 12% 10%, rgba(139, 123, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 800px 700px at 88% 6%, rgba(61, 220, 203, 0.16), transparent 62%),
    radial-gradient(ellipse 1000px 800px at 50% 100%, rgba(255, 120, 200, 0.08), transparent 65%),
    var(--background);
}

/* Let the mesh show through every section instead of a flat panel color */
.features,
.plans,
.carousel,
footer {
  background: transparent !important;
}

.navbar {
  background: rgba(5, 6, 10, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar.scrolled {
  background: rgba(5, 6, 10, 0.82) !important;
}

.feature-box,
.plan-box {
  background: rgba(18, 19, 30, 0.72);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.08);
}

.carousel-item {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.telegram-note {
  background: rgba(18, 19, 30, 0.6);
  backdrop-filter: blur(6px);
}

/* Swap purple glow shadows for the new indigo/teal accent */
.cta-button:hover,
.carousel-nav button:hover:not(:disabled) {
  box-shadow: 0 5px 18px rgba(139, 123, 255, 0.4);
}

.feature-box:hover,
.plan-box:hover {
  box-shadow:
    0 20px 40px rgba(139, 123, 255, 0.16),
    0 0 24px rgba(61, 220, 203, 0.12);
}

.carousel-item:hover {
  box-shadow:
    20px 20px 40px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(139, 123, 255, 0.18);
}

.social-links a:hover {
  border-color: var(--primary);
  background: rgba(139, 123, 255, 0.12);
}