/* ============================================
   Canada.28 - Custom Styles
   Primary: Indigo (#4F46E5)
   ============================================ */

/* --- Smooth Scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- Navbar Blur Effect --- */
.navbar-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(79, 70, 229, 0.1);
}

/* --- Gradient Text --- */
.gradient-text {
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Hero Gradient Overlay --- */
.hero-overlay {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.92) 0%, rgba(67, 56, 202, 0.85) 50%, rgba(79, 70, 229, 0.78) 100%);
}

/* --- Feature Card Hover --- */
.feature-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.15), 0 8px 16px rgba(79, 70, 229, 0.08);
}

/* --- Stats Counter Animation --- */
.stat-number {
  font-variant-numeric: tabular-nums;
}

/* --- Testimonial Card --- */
.testimonial-card {
  transition: all 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* --- FAQ Accordion --- */
.faq-item {
  border: 1px solid rgba(79, 70, 229, 0.12);
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(79, 70, 229, 0.3);
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open {
  max-height: 300px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.faq-icon {
  transition: transform 0.3s ease;
}
.faq-icon.rotated {
  transform: rotate(180deg);
}

/* --- CTA Pulse --- */
.cta-pulse {
  animation: pulse-glow 2.5s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  50% {
    box-shadow: 0 0 0 18px rgba(79, 70, 229, 0);
  }
}

/* --- Footer Links --- */
.footer-link {
  position: relative;
  transition: color 0.25s ease;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #818CF8;
  transition: width 0.25s ease;
}
.footer-link:hover::after {
  width: 100%;
}

/* --- Mobile Menu --- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.mobile-menu.open {
  max-height: 400px;
}

/* --- Back to Top Button --- */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* --- Contact Form Focus --- */
.contact-input:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  outline: none;
}

/* --- Loading Spinner --- */
.spinner {
  border: 3px solid rgba(79, 70, 229, 0.15);
  border-top: 3px solid #4F46E5;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- About Timeline --- */
.timeline-line {
  position: relative;
}
.timeline-line::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #4F46E5, #818CF8);
}

/* --- Team Card --- */
.team-card {
  transition: all 0.3s ease;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.12);
}
.team-card:hover .team-social {
  opacity: 1;
  transform: translateY(0);
}
.team-social {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

/* --- Scroll Reveal (simple) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Data Stat Card --- */
.data-card {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.03) 0%, rgba(99, 102, 241, 0.06) 100%);
  border: 1px solid rgba(79, 70, 229, 0.1);
  transition: all 0.3s ease;
}
.data-card:hover {
  border-color: rgba(79, 70, 229, 0.25);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(99, 102, 241, 0.1) 100%);
}