/* ════════════════════════════════════════════
   REDESIANET — PREMIUM VISUAL ENHANCEMENTS
   Violet (#7C3AED) + Cyan (#06B6D4) palette
   ════════════════════════════════════════════ */

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

/* ────────────────────────────────────────
   COLOR PALETTE OVERRIDE
   ──────────────────────────────────────── */
:root {
  --color-primary:       #7C3AED;
  --color-primary-dark:  #5B21B6;
  --color-primary-light: #A78BFA;
  --color-primary-glow:  rgba(124, 58, 237, 0.45);
  --color-accent:        #06B6D4;
  --color-accent-dark:   #0891B2;
  --color-accent-glow:   rgba(6, 182, 212, 0.4);
  --color-accent-light:  rgba(124, 58, 237, 0.12);
  --color-cream:         #ffffff;

  --gradient-hero:    linear-gradient(135deg, #000000 0%, rgba(18, 0, 38, 0.97) 50%, rgba(0, 10, 28, 0.92) 100%);
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-accent) 100%);
  --gradient-card:    linear-gradient(145deg, rgba(12, 4, 24, 0.85) 0%, rgba(18, 8, 36, 0.9) 100%);

  --shadow-card-hover: 0 8px 32px var(--color-primary-glow), 0 16px 48px rgba(0,0,0,0.7);

  --font-heading: 'Space Grotesk', 'Poppins', sans-serif;
}

/* ────────────────────────────────────────
   CUSTOM CURSOR
   ──────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button,
  [role="button"],
  input,
  textarea,
  select,
  label { cursor: none !important; }

  #cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 8px; height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: width 0.18s, height 0.18s, background 0.18s;
    will-change: transform;
  }

  #cursor-halo {
    position: fixed;
    top: 0; left: 0;
    width: 40px; height: 40px;
    border: 1.5px solid rgba(124, 58, 237, 0.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.28s ease, height 0.28s ease, border-color 0.28s;
    will-change: transform;
    background: transparent;
  }

  body.cursor-hover #cursor-dot {
    width: 14px; height: 14px;
    background: var(--color-primary);
  }

  body.cursor-hover #cursor-halo {
    width: 64px; height: 64px;
    border-color: rgba(124, 58, 237, 0.38);
    background: rgba(124, 58, 237, 0.05);
  }
}

/* ────────────────────────────────────────
   SCROLL PROGRESS BAR
   ──────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 99997;
  box-shadow: 0 0 12px var(--color-primary-glow), 0 0 4px var(--color-accent-glow);
  pointer-events: none;
}

/* ────────────────────────────────────────
   HERO CANVAS PARTICLES
   ──────────────────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.65;
  z-index: 0;
}

/* ────────────────────────────────────────
   CINEMATIC BG ORBS — violet / cyan
   ──────────────────────────────────────── */
.cinematic-bg__orb--1 {
  background: radial-gradient(circle, #3b007a 0%, transparent 70%) !important;
}
.cinematic-bg__orb--2 {
  background: radial-gradient(circle, rgba(0, 60, 110, 0.65) 0%, transparent 60%) !important;
}

/* ────────────────────────────────────────
   NAVBAR — dark glass on scroll
   ──────────────────────────────────────── */
.navbar--scrolled {
  background: rgba(6, 0, 16, 0.9) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.2) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6) !important;
}

.navbar--scrolled .navbar__logo { color: #ffffff !important; }

.navbar--scrolled .navbar__logo-icon {
  filter: brightness(0) invert(1) !important;
  content: normal !important;
  transform: none !important;
}

.navbar--scrolled .navbar__link {
  color: rgba(255, 255, 255, 0.82) !important;
}
.navbar--scrolled .navbar__link:hover,
.navbar--scrolled .navbar__link--active {
  color: var(--color-primary-light) !important;
}
.navbar--scrolled .navbar__link::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent)) !important;
}
.navbar--scrolled .navbar__hamburger span {
  background: #ffffff !important;
}
.navbar--scrolled .navbar__cta.btn--light {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.navbar--scrolled .navbar__cta.btn--light:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* ────────────────────────────────────────
   HERO OVERLINE BADGE — pulse glow
   ──────────────────────────────────────── */
.hero__overline {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: var(--color-primary-light) !important;
  animation: badge-pulse 3s ease-in-out infinite;
  padding-left: 1.5rem !important;
}

.hero__overline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.12); }
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); }
  50%       { box-shadow: 0 0 0 7px rgba(6, 182, 212, 0); }
}

/* ────────────────────────────────────────
   HERO TITLE SPAN — animated gradient
   ──────────────────────────────────────── */
.hero__title span {
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    #c4b5fd 30%,
    var(--color-accent) 65%,
    var(--color-primary-light) 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradient-flow 5s ease-in-out infinite alternate;
}

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

/* ────────────────────────────────────────
   HERO STATS — glass panel
   ──────────────────────────────────────── */
.hero__stats {
  background: rgba(15, 4, 32, 0.55) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(124, 58, 237, 0.15) !important;
}

.hero__stat-number {
  background: linear-gradient(135deg, #ffffff 40%, var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ────────────────────────────────────────
   CTA BUTTONS — shimmer + ripple
   ──────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
}

.btn--light {
  background: linear-gradient(135deg, #ffffff 0%, #ede9fe 100%) !important;
  color: var(--color-primary-dark) !important;
  border-color: transparent !important;
}

.btn--light::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-22deg);
  animation: btn-shimmer 2.8s ease-in-out infinite;
}

@keyframes btn-shimmer {
  0%       { left: -120%; }
  55%, 100% { left: 200%; }
}

.btn--secondary {
  border-color: var(--color-primary) !important;
  color: var(--color-primary-light) !important;
}
.btn--secondary:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
}

.btn--ghost {
  border-color: rgba(124, 58, 237, 0.42) !important;
  color: rgba(255,255,255,0.9) !important;
}
.btn--ghost:hover {
  background: rgba(124, 58, 237, 0.14) !important;
  border-color: rgba(124, 58, 237, 0.8) !important;
}

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  transform: scale(0);
  animation: ripple-anim 0.65s linear forwards;
  pointer-events: none;
}

@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ────────────────────────────────────────
   CARDS — glassmorphism + glow
   ──────────────────────────────────────── */
.card {
  background: rgba(11, 4, 22, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(124, 58, 237, 0.16) !important;
}

.card::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent)) !important;
}

.card::after {
  background: radial-gradient(
    800px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    rgba(124, 58, 237, 0.11),
    transparent 40%
  ) !important;
}

.card:hover {
  border-color: rgba(124, 58, 237, 0.42) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.32), 0 16px 48px rgba(0,0,0,0.7) !important;
}

.card__icon {
  background: rgba(124, 58, 237, 0.14) !important;
  color: var(--color-primary-light) !important;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.18);
  transition: all 0.3s ease;
}

.card:hover .card__icon {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px var(--color-primary-glow) !important;
}

.card__title { color: #ffffff !important; }

.card__link { color: var(--color-primary-light) !important; }

/* ────────────────────────────────────────
   SECTION OVERLINES — neon glow
   ──────────────────────────────────────── */
.section-header__overline {
  color: var(--color-accent) !important;
  text-shadow: 0 0 22px var(--color-accent-glow);
  letter-spacing: 0.2em;
}

/* ────────────────────────────────────────
   LOGO BAR — dark theme
   ──────────────────────────────────────── */
.logo-bar {
  background: rgba(7, 2, 16, 0.98) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.15) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15) !important;
  color: #ffffff !important;
}

.logo-bar__title {
  color: rgba(255,255,255,0.45) !important;
}

.logo-bar__item {
  color: rgba(255,255,255,0.28) !important;
  filter: none !important;
  opacity: 1;
  transition: color 0.3s ease;
}

.logo-bar__item:hover {
  color: var(--color-primary-light) !important;
  opacity: 1;
}

/* ────────────────────────────────────────
   SECTION DARK — gradient background
   ──────────────────────────────────────── */
.section--dark {
  background: rgba(7, 2, 16, 0.98) !important;
  position: relative;
}

.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(124, 58, 237, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 55%);
  pointer-events: none;
}

/* ────────────────────────────────────────
   VALUE PROP — icons + text
   ──────────────────────────────────────── */
.value-prop__check {
  background: rgba(124, 58, 237, 0.16) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.18);
}

.value-prop__item-title { color: #ffffff !important; }

/* ────────────────────────────────────────
   TIMELINE — gradient line + glow numbers
   ──────────────────────────────────────── */
.timeline::before {
  background: linear-gradient(to right, var(--color-primary), var(--color-accent)) !important;
  opacity: 0.55;
  height: 2px !important;
}

.timeline__number {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)) !important;
  box-shadow: 0 0 22px var(--color-primary-glow), 0 0 44px rgba(124, 58, 237, 0.18) !important;
}

.timeline__step:hover .timeline__number {
  box-shadow: 0 0 32px var(--color-primary-glow), 0 0 60px rgba(124, 58, 237, 0.28) !important;
  transform: scale(1.12) !important;
}

.timeline__title { color: var(--color-primary-light) !important; }

/* ────────────────────────────────────────
   TESTIMONIALS — white cards with tint
   ──────────────────────────────────────── */
.testimonial {
  border: 1px solid rgba(124, 58, 237, 0.1) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.testimonial:hover {
  border-color: rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.14) !important;
}

.testimonial__stars { color: var(--color-accent) !important; }

.testimonial__avatar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  color: #ffffff !important;
}

.testimonial__name { color: var(--color-primary-dark) !important; }

/* Carousel controls */
.carousel__btn {
  border-color: rgba(124, 58, 237, 0.28) !important;
  color: var(--color-primary) !important;
}

.carousel__btn:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.carousel__dot--active {
  background: var(--color-primary) !important;
}

/* ────────────────────────────────────────
   CTA BANNER — dark gradient
   ──────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, #080018 0%, #1a0040 45%, #00152e 100%) !important;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.cta-banner__title {
  background: linear-gradient(135deg, #ffffff 35%, var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ────────────────────────────────────────
   NEON DIVIDER — violet / cyan
   ──────────────────────────────────────── */
.neon-divider {
  background: linear-gradient(
    to right,
    #000,
    rgba(124, 58, 237, 0.5) 30%,
    rgba(124, 58, 237, 0.9) 65%,
    var(--color-accent)
  ) !important;
}

/* ────────────────────────────────────────
   FOOTER — elegant dark gradient
   ──────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #04000f 0%, #020008 60%, #000000 100%) !important;
  border-top: 1px solid rgba(124, 58, 237, 0.14);
}

.footer__social-link:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
}

.footer__newsletter-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
}

.footer__newsletter-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

.footer__newsletter-btn:hover {
  opacity: 0.9;
}

/* ────────────────────────────────────────
   SELECTION COLOR
   ──────────────────────────────────────── */
::selection {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* ────────────────────────────────────────
   GLOBAL SECTION — subtle radial glow
   ──────────────────────────────────────── */
.section:not(.section--dark) {
  position: relative;
}

/* ────────────────────────────────────────
   REVEAL — keep existing, just inherit colors
   ──────────────────────────────────────── */

/* ────────────────────────────────────────
   REDUCED MOTION OVERRIDES
   ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #cursor-dot,
  #cursor-halo            { display: none !important; }
  #hero-particles         { display: none !important; }
  .hero__overline         { animation: none !important; }
  .hero__overline::before { animation: none !important; }
  .hero__title span       { animation: none !important; }
  .btn--light::after      { animation: none !important; }
  .ripple                 { display: none !important; }
}