/* ================================================
   ANIMATIONS — All @keyframes + Responsive breakpoints
   ================================================ */

/* ── Orb float ── */
@keyframes orb-drift {
  0%,  100% { transform: translateY(0) scale(1); }
  40%        { transform: translateY(-35px) scale(1.06); }
  70%        { transform: translateY(18px) scale(0.96); }
}

/* ── Badge pulsing dot ── */
@keyframes bdot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.75); }
}

/* ── Mockup ambient glow ── */
@keyframes mglow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* ── Mockup levitation ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}

/* ── Particles rising ── */
@keyframes pt-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  8%   { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-280px) scale(0.4); }
}

/* ── Pricing "Most Popular" badge glow ── */
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 22px rgba(34, 197, 94, 0.9), 0 0 44px rgba(34, 197, 94, 0.3); }
}

/* ── WhatsApp pulse ring ── */
@keyframes wa-pulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 14px rgba(37, 211, 102, 0);
  }
}

/* ── Form validation shake ── */
@keyframes shake {
  0%,  100% { transform: translateX(0); }
  18%        { transform: translateX(-9px); }
  36%        { transform: translateX(9px); }
  54%        { transform: translateX(-6px); }
  72%        { transform: translateX(6px); }
}

/* ================================================
   RESPONSIVE BREAKPOINTS
   ================================================ */

@media (max-width: 1024px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .nav-links,
  .nav-right {
    display: none;
  }

  .ham {
    display: flex;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .mock-wrap {
    display: none;
  }

  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
  }

  .feat-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .step {
    max-width: 320px;
  }

  .s-conn,
  .pline {
    display: none;
  }

  .fg {
    grid-template-columns: 1fr;
  }

  .fgroup.w2 {
    grid-column: auto;
  }

  .form-card {
    padding: 28px 18px;
  }

  .foot-top {
    flex-direction: column;
  }

  .t-inner {
    padding: 28px 20px;
  }

  .t-txt {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero-btns {
    flex-direction: column;
  }

  .btn-hero {
    justify-content: center;
  }
}