/* ============ GLASSMORPHISM + ANIMATIONS ============ */

/* Glass cards */
.glass {
  background: rgba(59,130,246,.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(59,130,246,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.glass-strong {
  background: rgba(15,22,41,.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(59,130,246,.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-blue {
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(96,165,250,.05));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,.35);
}

/* Animated background blobs */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35;
  animation: floatBlob 18s ease-in-out infinite;
}
.blob.b1 { width: 420px; height: 420px; background: #3b82f6; top: -120px; left: -80px; animation-delay: 0s; }
.blob.b2 { width: 360px; height: 360px; background: #7c3aed; top: 40%; right: -100px; animation-delay: -6s; }
.blob.b3 { width: 300px; height: 300px; background: #06b6d4; bottom: -80px; left: 30%; animation-delay: -12s; }
@keyframes floatBlob {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,40px) scale(.95); }
}

/* Keyframes */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  50% { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .7s ease, transform .7s ease; }
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.stagger.in > *:nth-child(1){transition-delay:.05s;opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(2){transition-delay:.12s;opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(3){transition-delay:.19s;opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(4){transition-delay:.26s;opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(5){transition-delay:.33s;opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(6){transition-delay:.40s;opacity:1;transform:translateY(0)}

/* Hero gradient animated */
.hero-text h1 .grad {
  background: linear-gradient(135deg, #fff 0%, #60a5fa 30%, #3b82f6 60%, #a78bfa 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 6s ease infinite;
}

/* Glass cards override */
.feat, .price-card, .step, .quote, .stat, .card, .auth-box, .dash-card {
  background: rgba(15,22,41,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(59,130,246,.2);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.feat:hover, .price-card:hover, .step:hover, .quote:hover {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.45);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(59,130,246,.15);
}

/* Shimmer on featured price card */
.price-card.featured {
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(124,58,237,.1));
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Button ripple */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.25) 10%, transparent 10%);
  background-size: 1000% 1000%; background-position: center;
  opacity: 0; transition: .5s;
}
.btn:active::after { opacity: 1; background-size: 0% 0%; transition: 0s; }

/* Nav glass */
.nav {
  background: rgba(5,8,22,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Animated underline for nav links */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px;
  background: var(--accent-2); transition: .25s; transform: translateX(-50%);
}
.nav-links a:hover::after { width: 100%; }

/* Badge pulse */
.badge-open { animation: pulseGlow 2.5s ease-in-out infinite; }

/* FAQ smooth */
.faq-a { transition: max-height .4s ease, padding .4s ease; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,.5); }

/* Loading shimmer for images */
img { transition: opacity .3s; }