/* ASTRAPULSE LANDING PAGE - COMPLETE MARKETING EDITION */
/* ====================================================== */
/* Design System: Dark theme (#0A0E27), violet (#6C63FF), gold (#F5A623), teal (#00C9A7) */
/* Font: Inter */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Base ── */
.lp-bg {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0A0E27;
  color: #F0EEFF;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

.lp-content {
  position: relative;
  z-index: 1;
}

/* ── AURA BLOBS (5 floating gradient orbs) ── */
.aura-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.aura-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(108,99,255,0.6), transparent 70%);
  top: -15%; left: -10%;
  animation: float1 12s ease-in-out infinite alternate;
}
.aura-blob-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,201,167,0.4), transparent 70%);
  top: 25%; right: -15%;
  animation: float2 15s ease-in-out infinite alternate;
}
.aura-blob-3 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(245,166,35,0.35), transparent 70%);
  bottom: 15%; left: 15%;
  animation: float3 18s ease-in-out infinite alternate;
}
.aura-blob-4 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(108,99,255,0.35), transparent 70%);
  top: 55%; left: -5%;
  animation: float4 20s ease-in-out infinite alternate;
}
.aura-blob-5 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(167,139,250,0.3), transparent 70%);
  bottom: 5%; right: 5%;
  animation: float5 14s ease-in-out infinite alternate;
}

@keyframes float1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(40px,60px) scale(1.08)} }
@keyframes float2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-30px,-50px) scale(1.12)} }
@keyframes float3 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(50px,-30px) scale(0.95)} }
@keyframes float4 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(25px,40px) scale(1.15)} }
@keyframes float5 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-40px,25px) scale(1.06)} }

/* ── NOISE OVERLAY ── */
.noise-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── GRADIENT TEXT ── */
.text-gradient-violet {
  background: linear-gradient(135deg, #A78BFA, #6C63FF, #818CF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #F5A623, #FBBF24, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-teal {
  background: linear-gradient(135deg, #10F090, #00C9A7, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── GLOW BUTTON ── */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}
.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, #6C63FF, #00C9A7, #F5A623, #6C63FF);
  background-size: 300% 100%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(10px);
}
.btn-glow:hover::before {
  opacity: 0.5;
  animation: gradientShift 2s linear infinite;
}
.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(108,99,255,0.25);
}
@keyframes gradientShift { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* ── GLASS CARD ── */
.glass-card {
  background: rgba(26,26,46,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(108,99,255,0.15);
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.glass-card:hover {
  border-color: rgba(108,99,255,0.35);
  box-shadow: 0 8px 32px rgba(108,99,255,0.12);
  transform: translateY(-4px);
}

/* ── GRADIENT BORDER ── */
.gradient-border {
  position: relative;
  border-radius: 16px;
  background: rgba(10,14,39,0.8);
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(108,99,255,0.6), rgba(0,201,167,0.4), rgba(245,166,35,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── MARQUEE ── */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-track {
  display: flex;
  animation: marquee 25s linear infinite;
  width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── COUNTER GLOW ── */
@keyframes countGlow {
  0%,100% { text-shadow: 0 0 20px currentColor; }
  50% { text-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}
.count-glow { animation: countGlow 3s ease-in-out infinite; }

/* ── FLOATING MOCKUP ── */
@keyframes floatMockup {
  0%,100% { transform: translateY(0) rotateX(5deg) rotateY(-5deg); }
  50% { transform: translateY(-12px) rotateX(5deg) rotateY(-5deg); }
}
.float-mockup { animation: floatMockup 6s ease-in-out infinite; }

/* ── PULSE DOT ── */
@keyframes pulseDot {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.pulse-dot-ring {
  animation: pulseDot 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* ── SHIMMER LINE ── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,99,255,0.5), rgba(0,201,167,0.5), rgba(245,166,35,0.5), transparent);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}

/* ── TOAST ANIMATION ── */
@keyframes toastIn { from { transform: translateX(-120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-120%); opacity: 0; } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A0E27; }
::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(108,99,255,0.4); }

/* ── SELECTION ── */
::selection { background: rgba(108,99,255,0.25); color: #F0EEFF; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .aura-blob-1 { width: 300px; height: 300px; }
  .aura-blob-2 { width: 250px; height: 250px; }
  .aura-blob-3 { width: 250px; height: 250px; }
  .aura-blob-4 { width: 200px; height: 200px; }
  .aura-blob-5 { width: 200px; height: 200px; }
}