/* ─── Keyframe Animations ─── */

@keyframes ff-orb-float {
  0%, 100% { transform: translateY(0)    scale(1);    }
  50%       { transform: translateY(-24px) scale(1.04); }
}

@keyframes ff-dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.45; transform: scale(0.65); }
}

@keyframes ff-bounce-ud {
  0%, 100% { transform: translateX(-50%) translateY(0);  }
  50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes ff-pip-drop {
  0%   { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(220%);  opacity: 0; }
}

/* ─── Animation helpers ─── */

.ff-orb-1       { animation: ff-orb-float  9s  ease-in-out infinite; }
.ff-orb-2       { animation: ff-orb-float  12s ease-in-out infinite reverse; animation-delay: 1s; }
.ff-dot-pulse   { animation: ff-dot-pulse  2s  ease-in-out infinite; }
.ff-scroll-bounce { animation: ff-bounce-ud 2.5s ease-in-out infinite; }

/* ─── Scroll indicator ─── */

.ff-scroll-box {
  width: 26px; height: 40px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 13px;
  position: relative; overflow: hidden;
  transform: translateX(-50%);
}

.ff-scroll-pip {
  width: 4px; height: 10px;
  background: white; border-radius: 2px;
  position: absolute; left: 50%; top: 6px;
  transform: translateX(-50%);
  animation: ff-pip-drop 1.8s ease-in-out infinite;
}

/* ─── Feature tile hover accent bar ─── */

.ff-tile { position: relative; overflow: hidden; }

.ff-tile::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 3px; width: 0;
  border-radius: 0 0 20px 20px;
  transition: width 0.4s ease;
}

.ff-tile:hover::after { width: 100%; }
.ff-tile-sky::after    { background: #0ea5e9; }
.ff-tile-green::after  { background: #059669; }
.ff-tile-rose::after   { background: #e11d48; }
.ff-tile-violet::after { background: #7c3aed; }
.ff-tile-amber::after  { background: #f59e0b; }

/* ─── Blog card image hover ─── */

.ff-blog-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.ff-blog-card:hover .ff-blog-img { transform: scale(1.05); }

/* ─── App Store / Google Play buttons ─── */

.ff-app-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px; border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  transition: background 0.25s ease, transform 0.25s ease;
  color: white; text-decoration: none;
}

.ff-app-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}

/* ─── CTA bottom section (always dark) ─── */

.ff-cta-bg {
  background: linear-gradient(135deg, #030712 0%, #0f0a2e 100%);
}

/* ─── Testimonial slider ─── */

.ff-testi-slide {
  position: absolute; inset: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
}