@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.1); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 60px) scale(1.15); }
}

@keyframes floatPhone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.navbar { animation: fadeInDown 0.5s ease both; }

.hero-inner .badge { animation: fadeInUp 0.6s ease both; }
.hero-inner h1 { animation: fadeInUp 0.6s ease 0.1s both; }
.hero-inner .sub { animation: fadeInUp 0.6s ease 0.2s both; }
.hero-inner .hero-ctas { animation: fadeInUp 0.6s ease 0.3s both; }
.hero-visual { animation: fadeInUp 0.7s ease 0.35s both; }

.tool-card, .price-card, .testimonial-card, .blog-card, .step-card, .value-card {
  will-change: transform;
}