/* ── CURSOR GLOW ── */
.iq-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,59,139,0.06) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: none;
}

/* ── SCROLL REVEAL ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── HERO ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-badge   { animation: fadeUp 0.7s 0.1s ease both; }
.hero-title   { animation: fadeUp 0.8s 0.25s ease both; }
.hero-subtitle{ animation: fadeUp 0.7s 0.45s ease both; }
.hero-actions { animation: fadeUp 0.7s 0.6s ease both; }
.hero-stats   { animation: fadeUp 0.7s 0.75s ease both; }

/* ── FLOATING ORBS ── */
@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(50px, 35px) scale(1.06); }
  66%     { transform: translate(-25px, 55px) scale(0.94); }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-65px, -45px); }
}
@keyframes float3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(-85px, 20px) scale(1.08); }
  80%     { transform: translate(45px, -35px) scale(0.92); }
}

.orb-1 { animation: float1 9s ease-in-out infinite; }
.orb-2 { animation: float2 11s ease-in-out infinite; }
.orb-3 { animation: float3 13s ease-in-out infinite; }

/* Make orbs more visible */
.orb-1 {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(255,59,139,0.35) 0%, transparent 65%) !important;
  filter: blur(60px) !important;
}
.orb-2 {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(0,200,255,0.28) 0%, transparent 65%) !important;
  filter: blur(60px) !important;
}
.orb-3 {
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(255,214,0,0.2) 0%, transparent 65%) !important;
  filter: blur(70px) !important;
}

/* ── MARQUEE ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
.marquee-track { animation: marquee 28s linear infinite; }
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

/* ── SCROLL HINT BOUNCE ── */
@keyframes bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(8px); }
}
.scroll-hint { animation: bounce 2.2s ease-in-out infinite; }

/* ── PRODUCT CARDS ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease !important;
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), var(--cc, #FF3B8B) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.product-card:hover {
  transform: translateY(-8px) !important;
  background: #18181F !important;
  box-shadow: 0 0 0 1px var(--cc, #FF3B8B),
              0 20px 60px rgba(0,0,0,0.6),
              0 0 30px rgba(255,59,139,0.08) !important;
}
.product-card:hover::before { opacity: 0.09; }

/* Make sure card content stays above ::before */
.product-card > * { position: relative; z-index: 1; }

/* ── FEATURE CARDS ── */
.feature-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF3B8B, #00C8FF);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.feature-card:hover::after { transform: scaleX(1); }

/* ── BUTTONS ── */
.btn-primary, .btn-whatsapp, .cta-btn, .nav-whatsapp {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-whatsapp::after, .cta-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
.btn-primary:hover::after, .btn-whatsapp:hover::after, .cta-btn:hover::after {
  width: 300px; height: 300px; opacity: 1;
}

/* ── WHATSAPP PULSE ── */
@keyframes waPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 4px 32px rgba(37,211,102,0.75), 0 0 0 12px rgba(37,211,102,0.1); }
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(37,211,102,0.35); }
  50%      { box-shadow: 0 8px 48px rgba(37,211,102,0.6), 0 0 0 16px rgba(37,211,102,0.08); }
}

.whatsapp-float { animation: waPulse 2.5s ease-in-out infinite !important; }
.cta-btn        { animation: ctaPulse 2.5s ease-in-out infinite !important; }

/* ── STATS COUNT UP (visual) ── */
.stat-number {
  background: linear-gradient(130deg, #FF3B8B, #00C8FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ── SECTION HEADING UNDERLINE ── */
.section-header h2 {
  position: relative;
  display: inline-block;
}

/* ── FILTER ACTIVE STATE ── */
.filter-btn {
  transition: all 0.2s ease !important;
}
.filter-btn.active {
  background: rgba(255,255,255,0.07) !important;
  transform: scale(1.04);
}
.filter-btn:hover {
  transform: scale(1.04);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}