:root {
  --neon-blue: #2563eb;
  --neon-cyan: #06b6d4;
  --bg-abyss: #020408;
  --bg-surface: #0a0f1a;
  --bg-card: rgba(15, 23, 42, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(59, 130, 246, 0.3);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
}

html {
  scroll-behavior: smooth !important;
}

body {
  background-color: var(--bg-abyss);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

button, 
.cta-glow, 
.btn-ghost, 
[role="button"] {
  cursor: pointer;
}

/* --- Glow System --- */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(160px);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  animation: pulse-glow 12s infinite alternate;
}

.glow-orb-blue { background: #1d4ed8; } 
.glow-orb-cyan { background: #0891b2; }

@keyframes pulse-glow {
  0% { transform: scale(1) translate(0, 0); opacity: 0.1; }
  100% { transform: scale(1.1) translate(20px, -20px); opacity: 0.15; }
}

/* --- Components --- */
.glass-card {
  background-color: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
}

.nav-blur {
  background-color: rgba(2,4,8,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-link {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #fff;
  opacity: 1;
}

.text-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% auto;
  filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.3));
}

.cta-glow {
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  box-shadow: 0 0 35px rgba(29, 78, 216, 0.5); 
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px -10px rgba(29, 78, 216, 0.7);
  filter: brightness(1.15);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-hover);
}

/* --- Reveal Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --- Dashboard Specifics --- */
.timeline-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.timeline-progress {
  height: 100%;
  width: 45%;
  background: #2563eb;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.6);
}

.feature-check {
  width: 20px;
  height: 20px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  font-size: 11px;
}

.price-card {
  padding: 40px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: 32px;
  transition: all 0.4s ease;
}

.price-card.featured {
  border-color: rgba(37, 99, 235, 0.5);
  background: rgba(37, 99, 235, 0.04);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

.popular-badge {
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  font-size: 10px;
}

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 4, 8, 0.98);
  backdrop-filter: blur(20px);
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

@media (max-width: 767px) {
  .mobile-menu {
    display: flex;
  }
}

/* --- Drone AI Animations & Niche Features --- */
@keyframes pan-orbit {
  0% { transform: scale(1.1) translate(0px, 0px) rotate(0deg); }
  100% { transform: scale(1.15) translate(-15px, -8px) rotate(1.5deg); }
}

@keyframes pan-flyover {
  0% { transform: scale(1.2) translate(0px, -10px); }
  100% { transform: scale(1.3) translate(0px, 10px); }
}

@keyframes pan-reveal {
  0% { transform: scale(1.15) translate(0px, 15px); }
  100% { transform: scale(1.15) translate(0px, -15px); }
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% auto;
  filter: drop-shadow(0 0 20px rgba(6, 182, 212, 0.3));
}

.cta-glow-cyan {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  box-shadow: 0 0 35px rgba(6, 182, 212, 0.4);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.cta-glow-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px -10px rgba(6, 182, 212, 0.6);
  filter: brightness(1.15);
}

/* For specific animation utility classes from Tailwind */
.animate-\\[pan-orbit_12s_infinite_alternate_ease-in-out\\] {
  animation: pan-orbit 12s infinite alternate ease-in-out;
}
.animate-\\[pan-flyover_12s_infinite_alternate_ease-in-out\\] {
  animation: pan-flyover 12s infinite alternate ease-in-out;
}
.animate-\\[pan-reveal_12s_infinite_alternate_ease-in-out\\] {
  animation: pan-reveal 12s infinite alternate ease-in-out;
}

/* --- Ad Creatives AI Animations & Niche Features --- */
@keyframes pan-minimal {
  0% { transform: scale(1.1) translate(0px, 0px) rotate(0deg); }
  100% { transform: scale(1.15) translate(-10px, -5px) rotate(1deg); }
}
@keyframes pan-energetic {
  0% { transform: scale(1.2) translate(0px, -15px) rotate(-1deg); }
  50% { transform: scale(1.25) translate(8px, 5px) rotate(1deg); }
  100% { transform: scale(1.2) translate(-5px, 15px) rotate(0deg); }
}
@keyframes pan-cinematic {
  0% { transform: scale(1.12) translate(-10px, 10px) rotate(0deg); }
  100% { transform: scale(1.18) translate(10px, -10px) rotate(0.8deg); }
}
.text-gradient-fuchsia {
  background: linear-gradient(135deg, #f472b6 0%, #d946ef 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% auto;
  filter: drop-shadow(0 0 20px rgba(217, 70, 239, 0.35));
}
.cta-glow-fuchsia {
  background: linear-gradient(135deg, #c084fc, #d946ef);
  box-shadow: 0 0 35px rgba(217, 70, 239, 0.4);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-glow-fuchsia:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px -10px rgba(217, 70, 239, 0.6);
  filter: brightness(1.15);
}
.glow-orb-fuchsia {
  background: #d946ef;
  filter: blur(140px);
  opacity: 0.08;
}

.animate-\\[pan-minimal_15s_infinite_alternate_ease-in-out\\] {
  animation: pan-minimal 15s infinite alternate ease-in-out;
}
.animate-\\[pan-energetic_8s_infinite_alternate_ease-in-out\\] {
  animation: pan-energetic 8s infinite alternate ease-in-out;
}
.animate-\\[pan-cinematic_18s_infinite_alternate_ease-in-out\\] {
  animation: pan-cinematic 18s infinite alternate ease-in-out;
}

/* --- Clipper AI Animations & Purple Aesthetics --- */
@keyframes seekbar-loop {
  0% { width: 0%; }
  100% { width: 100%; }
}
.text-gradient-purple {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100% auto;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.35));
}
.cta-glow-purple {
  background: linear-gradient(135deg, #a855f7, #818cf8);
  box-shadow: 0 0 35px rgba(168, 85, 247, 0.4);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.cta-glow-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px -10px rgba(168, 85, 247, 0.6);
  filter: brightness(1.15);
}
.glow-orb-purple {
  background: #a855f7;
  filter: blur(140px);
  opacity: 0.07;
}
.animate-\\[seekbar-loop_6\\.3s_infinite_linear\\] {
  animation: seekbar-loop 6.3s infinite linear;
}
