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

/* ─────────────────────────────────────────
   BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* ─────────────────────────────────────────
   HEADER — scroll-aware
───────────────────────────────────────── */
#site-header {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dark .header-scrolled {
  background: rgba(2, 11, 24, 0.90) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.35);
}


/* ─────────────────────────────────────────
   HERO — dot grid + orbs
───────────────────────────────────────── */
.hero-section {
  background: #ffffff;
}
.dark .hero-section {
  background: #020B18;
}

/* Dot grid */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(59,130,246,0.10) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
}
.dark .hero-grid {
  background-image: radial-gradient(circle, rgba(59,130,246,0.15) 1px, transparent 1px);
}

/* Ambient glows */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.hero-glow-a {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(59,130,246,0.13), transparent 70%);
  top: -180px;
  right: -120px;
}
.hero-glow-b {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%);
  bottom: 0;
  left: -80px;
}
.dark .hero-glow-a {
  background: radial-gradient(circle, rgba(59,130,246,0.20), transparent 70%);
}
.dark .hero-glow-b {
  background: radial-gradient(circle, rgba(99,102,241,0.13), transparent 70%);
}


/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */
.text-blue-gradient {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 60%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─────────────────────────────────────────
   ROBOT ANIMATION
───────────────────────────────────────── */
@keyframes robot-float {
  0%,100% { transform: translateY(0px)  rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}
.robot-float {
  animation: robot-float 4s ease-in-out infinite;
}


/* ─────────────────────────────────────────
   CTA BUTTON
───────────────────────────────────────── */
.cta-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.cta-primary:hover {
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────
   FEATURES — image wrapper glow
───────────────────────────────────────── */
.feature-img-wrap {
  position: relative;
}
.feature-img-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.07), transparent 70%);
  border-radius: 32px;
  pointer-events: none;
}
.dark .feature-img-wrap::before {
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.12), transparent 70%);
}


/* ─────────────────────────────────────────
   PRICING SECTION
───────────────────────────────────────── */
.pricing-bg {
  background: linear-gradient(140deg, #1d4ed8 0%, #1e3a8a 45%, #0a1628 100%);
  position: relative;
}
.pricing-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(59,130,246,0.20), transparent),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(99,102,241,0.15), transparent);
}

.price-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover {
  transform: translateY(-5px);
}
.price-card-pro {
  box-shadow: 0 0 0 4px #facc15, 0 24px 48px rgba(0,0,0,0.25);
}
.price-card-pro:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 4px #facc15, 0 32px 56px rgba(0,0,0,0.30);
}


/* ─────────────────────────────────────────
   CTA CARD
───────────────────────────────────────── */
.cta-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2fe 100%);
}
.dark .cta-card {
  background: linear-gradient(135deg, rgba(30,58,138,0.12) 0%, rgba(2,11,24,0.5) 100%);
  border-color: rgba(59,130,246,0.20) !important;
}

/* Form inputs */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.faq-item {
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.faq-item.faq-open {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.35);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon {
  transition: transform 0.3s ease, background-color 0.2s ease;
  line-height: 1;
}
.faq-item.faq-open .faq-icon {
  background-color: rgba(59,130,246,0.2);
}


/* ─────────────────────────────────────────
   WHATSAPP FLOAT
───────────────────────────────────────── */
@keyframes wa-pulse {
  0%   { box-shadow: 0 4px 20px rgba(37,211,102,0.40), 0 0 0 0   rgba(37,211,102,0.45); }
  70%  { box-shadow: 0 4px 20px rgba(37,211,102,0.40), 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,0.40), 0 0 0 0   rgba(37,211,102,0); }
}

.whatsapp-float {
  position: fixed;
  width: 56px;
  height: 56px;
  bottom: 28px;
  right: 20px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: wa-pulse 2.5s ease-out infinite;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.whatsapp-float:hover {
  background: #128C7E;
  transform: scale(1.08);
}

@media (max-width: 640px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 16px; }
}


/* ─────────────────────────────────────────
   SCROLL ANIMATIONS
───────────────────────────────────────── */
.animate-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.animate-item.animated {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }