/* ========== GLOBAL ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

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

::selection {
  background: rgba(212, 32, 39, 0.3);
  color: white;
}

/* ========== TEXT GRADIENT ========== */
.text-gradient {
  background: linear-gradient(135deg, #D42027 0%, #ff6b6b 50%, #D42027 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

/* ========== HERO GRADIENT ========== */
.hero-gradient {
  background: radial-gradient(ellipse at 30% 50%, rgba(212, 32, 39, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(212, 32, 39, 0.05) 0%, transparent 50%);
}

/* ========== GRID PATTERN ========== */
.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ========== ANIMATIONS ========== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* ========== PRODUCT CARDS ========== */
.product-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px -15px rgba(212, 32, 39, 0.15);
}

/* ========== DIFFERENTIAL CARDS ========== */
.diff-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.diff-card:hover {
  transform: translateY(-4px);
}

/* ========== FAQ ========== */
.faq-item {
  transition: border-color 0.3s ease;
}

.faq-item:has(.faq-content:not(.hidden)) {
  border-color: rgba(212, 32, 39, 0.2);
}

.faq-trigger {
  cursor: pointer;
}

.faq-trigger:hover span {
  color: #D42027;
}

.faq-content {
  animation: fadeIn 0.3s ease;
}

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

/* ========== NAVBAR ========== */
#navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========== WHATSAPP FLOAT ========== */
.fixed.bottom-6.right-6 {
  animation: float 3s ease-in-out infinite;
}

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

.fixed.bottom-6.right-6:hover {
  animation: none;
}

/* ========== SCROLL BAR ========== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #111111;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D42027;
}

/* ========== RESPONSIVE FIXES ========== */
@media (max-width: 640px) {
  .font-heading.text-4xl,
  .font-heading.text-5xl,
  .font-heading.text-6xl {
    font-size: 2rem;
    line-height: 1.2;
  }
}

/* ========== LOADER (optional) ========== */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 32, 39, 0.3); }
  50% { box-shadow: 0 0 40px rgba(212, 32, 39, 0.6); }
}

/* ========== PREMIUM GLOW EFFECT ========== */
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D42027, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.product-card:hover::before {
  opacity: 1;
}

/* ========== SCROLLBAR HIDE (video carousel) ========== */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ========== VIDEO CARDS ========== */
.video-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-card:hover {
  transform: translateY(-6px);
}

/* ========== UNMUTE BUTTON PULSE ========== */
.unmute-pulse {
  animation: unmute-ring 2s ease-out infinite;
}

@keyframes unmute-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* ========== SOUND CTA PULSE ========== */
.sound-cta-pulse {
  animation: sound-cta-ring 2s ease-out infinite;
}

@keyframes sound-cta-ring {
  0% { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(212, 32, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 32, 39, 0); }
}

/* ========== PRINT STYLES ========== */
@media print {
  .fixed,
  #navbar {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}