/* ================================ */
/* SAF FinTech Advisory — Custom CSS */
/* UI/UX Pro Max Optimized           */
/* ================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

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

#navbar.scrolled {
  background-color: rgba(15, 27, 45, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Floating nav container */
#navbar .nav-inner {
  transition: padding 0.3s ease-out;
}

/* ================================ */
/* SCROLL REVEAL ANIMATIONS          */
/* ================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }

/* Hero entrance animations */
.hero-fade {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s ease-out forwards;
}

.hero-fade-d1 { animation-delay: 0.1s; }
.hero-fade-d2 { animation-delay: 0.25s; }
.hero-fade-d3 { animation-delay: 0.4s; }
.hero-fade-d4 { animation-delay: 0.55s; }
.hero-fade-d5 { animation-delay: 0.7s; }

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero photo entrance */
.hero-photo-enter {
  opacity: 0;
  transform: scale(0.95) translateX(20px);
  animation: photoReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes photoReveal {
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* ================================ */
/* STAT COUNTER ANIMATION            */
/* ================================ */
.stat-number {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease-out;
}

.stat-card {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(15, 27, 45, 0.08);
}

/* ================================ */
/* SERVICE CARD HOVER                */
/* ================================ */
.service-card {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(200, 168, 78, 0.08);
}

/* ================================ */
/* PRODUCT CARD HOVER                */
/* ================================ */
.product-card {
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  cursor: pointer;
}

.product-card:hover {
  box-shadow: 0 20px 60px rgba(200, 168, 78, 0.1);
}

/* ================================ */
/* GOLD CTA BUTTON GLOW              */
/* ================================ */
.btn-gold {
  position: relative;
  transition: all 0.25s ease-out;
  cursor: pointer;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200, 168, 78, 0.35);
}

.btn-gold:active {
  transform: translateY(0);
}

/* Navy CTA button */
.btn-navy {
  transition: all 0.25s ease-out;
  cursor: pointer;
}

.btn-navy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(15, 27, 45, 0.25);
}

/* ================================ */
/* STEP NUMBER PULSE                 */
/* ================================ */
.step-number {
  transition: all 0.3s ease-out;
}

.step-number:hover {
  box-shadow: 0 0 0 8px rgba(200, 168, 78, 0.1);
}

/* ================================ */
/* CREDENTIAL BADGE HOVER            */
/* ================================ */
.cred-badge {
  transition: all 0.2s ease-out;
  cursor: default;
}

.cred-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ================================ */
/* MOBILE MENU                       */
/* ================================ */
#mobile-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

#mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* ================================ */
/* FOCUS STATES (Keyboard Nav)       */
/* ================================ */
*:focus-visible {
  outline: 2px solid #C8A84E;
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #C8A84E;
  outline-offset: 2px;
}

/* ================================ */
/* SELECTION COLOR                   */
/* ================================ */
::selection {
  background-color: #C8A84E;
  color: #0F1B2D;
}

/* ================================ */
/* CALENDLY BADGE OVERRIDE           */
/* ================================ */
.calendly-badge-widget {
  z-index: 40 !important;
}

.calendly-badge-widget .calendly-badge-content {
  background-color: #C8A84E !important;
  color: #0F1B2D !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  box-shadow: 0 8px 30px rgba(200, 168, 78, 0.3) !important;
  transition: all 0.25s ease-out !important;
}

.calendly-badge-widget .calendly-badge-content:hover {
  box-shadow: 0 8px 30px rgba(200, 168, 78, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ================================ */
/* GRADIENT SECTION DIVIDERS         */
/* ================================ */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 78, 0.2), transparent);
}

/* ================================ */
/* ACCESSIBILITY: REDUCED MOTION     */
/* ================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-up,
  .reveal-stagger > *,
  .hero-fade,
  .hero-photo-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .stat-card:hover,
  .service-card:hover,
  .btn-gold:hover,
  .btn-navy:hover,
  .cred-badge:hover {
    transform: none !important;
  }
}

/* ================================ */
/* SMOOTH IMAGE LOADING              */
/* ================================ */
img {
  transition: opacity 0.3s ease-out;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded,
img:not([loading="lazy"]) {
  opacity: 1;
}