/* ============================================================
   13AL AUTOGATE — PREMIUM STYLESHEET
   Refined colors, glassmorphism, fluid animations
   ============================================================ */

/* ---- Base ---- */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #F8FAFC;
  color: #0F172A;
  margin: 0;
  overflow-x: hidden;
}

/* ---- Gradient text ---- */
.gradient-text {
  background: linear-gradient(135deg, #2563EB, #38BDF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-gold {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Buttons ---- */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: linear-gradient(135deg, #25D366, #1da851);
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  padding: .9rem 1.8rem;
  font-size: 1rem;
  text-decoration: none;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px -10px rgba(37, 211, 102, .6);
  font-family: 'Montserrat', sans-serif;
  position: relative;
  overflow: hidden;
}

.btn-wa::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-wa:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -10px rgba(37, 211, 102, .8);
}

.btn-wa:hover::after {
  left: 100%;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  padding: .9rem 1.8rem;
  font-size: 1rem;
  text-decoration: none;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, .6);
  font-family: 'Montserrat', sans-serif;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -10px rgba(37, 99, 235, .8);
}

.btn-primary:hover::after {
  left: 100%;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #0F172A;
  font-weight: 600;
  border-radius: 9999px;
  padding: .9rem 1.8rem;
  font-size: 1rem;
  text-decoration: none;
  transition: all .4s ease;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
  font-family: 'Montserrat', sans-serif;
}

.btn-outline:hover {
  background: #fff;
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

/* ---- Premium Glass Cards ---- */
.card-light {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(15, 23, 42, .04);
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px 0 rgba(15, 23, 42, .08);
}

.card-feature {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.5rem;
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1), background .4s, border-color .4s;
}

.card-feature:hover {
  box-shadow: 0 20px 40px -10px rgba(37, 99, 235, .15);
  transform: translateY(-8px);
  border-color: rgba(191, 219, 254, 0.9);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
}

/* ---- Badges ---- */
.badge-urgency {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem 1.2rem;
  border-radius: 9999px;
  box-shadow: 0 4px 15px -3px rgba(239, 68, 68, 0.4);
}

.badge-popular {
  background: linear-gradient(135deg, #2563EB, #38BDF8);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 4px 15px -3px rgba(37, 99, 235, 0.4);
}

/* ---- Sticky WhatsApp FAB ---- */
#wa-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: linear-gradient(135deg, #25D366, #1da851);
  color: #fff;
  font-weight: 700;
  padding: 1.1rem 1.8rem;
  border-radius: 9999px;
  box-shadow: 0 10px 40px -10px rgba(37, 211, 102, .7);
  font-size: .95rem;
  text-decoration: none;
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Montserrat', sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

#wa-fab:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 15px 50px -10px rgba(37, 211, 102, .9);
}

/* ---- FAQ Accordion ---- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .5s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.faq-answer.open {
  max-height: 500px;
  opacity: 1;
  margin-top: 0.5rem;
}

.faq-chevron {
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-item {
  cursor: pointer;
  transition: background-color 0.3s;
}

.faq-item:hover {
  background: rgba(255, 255, 255, 1);
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(35px) scale(0.98);
  transition: opacity .9s cubic-bezier(0.2, 0.8, 0.2, 1), transform .9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Utilities ---- */
.sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.8), transparent);
  border: none;
  margin: 0;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.comp-bad {
  color: #EF4444;
  font-weight: 700;
}

.comp-good {
  color: #10B981;
  font-weight: 700;
}

.text-gold {
  color: #F59E0B;
}

.text-primary {
  color: #2563EB;
}

.text-muted {
  color: #64748B;
}

.text-muted-light {
  color: #94A3B8;
}

.text-navy {
  color: #0F172A;
}

.text-navy-soft {
  color: #1E293B;
}

/* Subtle Background Variations */
.bg-bg-light {
  background: #F8FAFC;
}

.bg-bg-section {
  background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
}

.bg-midnight {
  background: #0B1120;
  color: #F8FAFC;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
}

/* ---- Nav ---- */
.nav-blur {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
}

/* ---- Hero background ---- */
#hero-bg-wrap {
  background-size: cover;
  background-position: center;
  background-color: #F8FAFC;
}

.hero-gradient-overlay {
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37, 99, 235, 0.12) 0%, rgba(248, 250, 252, 0) 70%);
}

/* ---- Image placeholders & Video ---- */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: .85rem;
  text-align: center;
  padding: 2rem;
  border-radius: 1.5rem;
}

#video-container {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  #wa-fab span.fab-label {
    display: none;
  }

  #wa-fab {
    padding: 1.2rem;
    border-radius: 50%;
  }
}