/* Brifo — Custom Styles */

/* Design Tokens */
:root {
  --color-brand-navy:     #152251;
  --color-flame-orange:   #FF6B00;
  --color-vivid-pink:     #E8197D;
  --color-amber-gold:     #FFB700;
  --color-coral:          #FF3D5A;
  --gradient-flame:       linear-gradient(135deg, #FFB700 0%, #FF6B00 35%, #FF3D5A 70%, #E8197D 100%);
  --color-midnight:       #1C2B4A;
  --color-slate:          #8292AA;
  --color-frost:          #F5F6FA;
  --color-white:          #FFFFFF;
  --color-cta:            #FF6B00;
  --color-cta-hover:      #E85E00;
}

/* Base */
html {
  scroll-behavior: smooth;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-frost); }
::-webkit-scrollbar-thumb { background: var(--color-slate); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-midnight); }

/* Focus styles */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-flame-orange);
  outline-offset: 2px;
}

/* Responsive images */
img { max-width: 100%; height: auto; }

/* Gradient text utility */
.text-gradient-flame {
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient border utility */
.border-gradient-flame {
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(white, white), var(--gradient-flame);
}

/* CTA gradient flow animation */
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-gradient-flow {
  background: linear-gradient(135deg, #FF6B00, #E8197D, #FF6B00);
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
}

/* WhatsApp pulse */
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
  50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.6); }
}

/* Mobile menu */
.mobile-menu-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-panel {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
.mobile-menu-panel.active {
  transform: translateX(0);
}

/* GSAP initial states (prevent flash of unstyled content) */
.gsap-fade-in {
  opacity: 0;
  transform: translateY(30px);
}
.gsap-scale-in {
  opacity: 0;
  transform: scale(0.95);
}
.gsap-slide-left {
  opacity: 0;
  transform: translateX(-60px);
}
.gsap-slide-right {
  opacity: 0;
  transform: translateX(60px);
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Responsive overrides */
@media (max-width: 640px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}