/* Deferred, non-critical CSS extracted from globals */

/* Loader */
.loader{width:var(--loader-size,56px);height:var(--loader-size,56px);position:relative}
.loader::before,.loader::after{content:"";position:absolute;top:50%;left:50%;width:var(--loader-dot,14px);height:var(--loader-dot,14px);margin-left:calc(-1 * var(--loader-dot,14px)/2);margin-top:calc(-1 * var(--loader-dot,14px)/2);border-radius:50%;will-change:transform}
.loader::before{background:var(--loader-left-color,#3877a6);transform-origin:center;animation:orbit-cw var(--loader-speed,.4s) linear infinite}
.loader::after{background:var(--loader-right-color,#12988e);transform-origin:center;animation:orbit-ccw var(--loader-speed,.4s) linear infinite}
@keyframes orbit-cw{from{transform:rotate(0) translateX(calc(var(--loader-size,56px)/2 - var(--loader-dot,14px)/2))}to{transform:rotate(360deg) translateX(calc(var(--loader-size,56px)/2 - var(--loader-dot,14px)/2))}}
@keyframes orbit-ccw{from{transform:rotate(180deg) translateX(calc(var(--loader-size,56px)/2 - var(--loader-dot,14px)/2))}to{transform:rotate(-180deg) translateX(calc(var(--loader-size,56px)/2 - var(--loader-dot,14px)/2))}}

/* Navbar glow and tab styles (mobile) */
@media (max-width:1023px){.navbar-glow{box-shadow:0 0 20px rgba(56,119,166,.3),0 0 40px rgba(56,119,166,.15),inset 0 1px 0 rgba(255,255,255,.2)}.navbar-tab-inactive{position:relative;box-shadow:0 3px 12px rgba(255,255,255,.6),0 6px 24px rgba(56,119,166,.15),inset 0 1px 3px rgba(255,255,255,.8),0 0 0 1px rgba(56,119,166,.12);border:1px solid rgba(56,119,166,.15)}.navbar-tab-inactive:hover{animation:none}.navbar-tab-breathe{animation:enhancedTabPulse 3.5s ease-in-out infinite}}
@keyframes enhancedTabPulse{0%,100%{box-shadow:0 3px 12px rgba(255,255,255,.6),0 6px 24px rgba(56,119,166,.15),inset 0 1px 3px rgba(255,255,255,.8),0 0 0 1px rgba(56,119,166,.12);border-color:rgba(56,119,166,.15)}50%{box-shadow:0 4px 16px rgba(255,255,255,.8),0 8px 32px rgba(56,119,166,.25),inset 0 2px 4px rgba(255,255,255,.9),0 0 0 2px rgba(56,119,166,.2);border-color:rgba(56,119,166,.25)}}

/* Refined navbar for white background pages */
.navbar-white-page {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(248, 250, 252, 0.95) 100%);
  box-shadow: 
    0 1px 0 rgba(148, 163, 184, 0.1),
    0 4px 16px rgba(56, 119, 166, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  border-color: rgba(148, 163, 184, 0.2);
}

/* Logo smoothing */
img[src*="logo-finagl-07"]{image-rendering:-webkit-optimize-contrast;image-rendering:auto;shape-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0);backface-visibility:hidden}
@media (max-width:768px){img[src*="logo-finagl-07"]{image-rendering:-webkit-optimize-contrast;image-rendering:auto;-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){img[src*="logo-finagl-07"]{image-rendering:-webkit-optimize-contrast;image-rendering:auto}}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer}
.hamburger span{display:block;width:100%;height:2.5px;background:linear-gradient(90deg,#3877a6 0%,#12988e 100%);border-radius:3px;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger span:nth-child(2){width:85%;margin:0 auto}
.hamburger span:nth-child(3){width:70%;margin-right:auto}
.hamburger.active span:nth-child(1){transform:translateY(7.75px) rotate(45deg);width:100%}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7.75px) rotate(-45deg);width:100%}

/* Mobile menu animations */
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
.mobile-menu-enter{animation:slideDown .3s cubic-bezier(.4,0,.2,1) forwards}
.mobile-menu-exit{animation:slideUp .3s cubic-bezier(.4,0,.2,1) forwards}

/* Hero background loading state */
.hero-bg-loading{background:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%),linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);background-size:20px 20px,20px 20px,20px 20px,20px 20px,100% 100%;background-position:0 0,0 10px,10px -10px,-10px 0,0 0;animation:bgSlide 1s linear infinite}
@keyframes bgSlide{0%{background-position:0 0,0 10px,10px -10px,-10px 0}100%{background-position:20px 20px,20px 30px,30px 10px,10px 20px}}

/* ========== NON-CRITICAL ANIMATIONS (deferred from globals.css) ========== */

/* Toast slide-in animation */
@keyframes slideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

/* Hero section CSS animations (replacing framer-motion) */
@keyframes heroBadge{from{opacity:0;transform:scale(0.8) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes heroHeadline{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes heroDescription{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroTrust{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes heroForm{from{opacity:0;transform:scale(0.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes heroDots{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero animation classes - initial state (hidden) */
.hero-animate-badge,.hero-animate-headline,.hero-animate-description,.hero-animate-trust,.hero-animate-actions,.hero-animate-dots,.hero-animate-form{opacity:0}

/* Hero animation classes - animated state */
.hero-animate-badge.hero-animate-in{animation:heroBadge 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;animation-delay:0.3s}
.hero-animate-headline.hero-animate-in{animation:heroHeadline 0.7s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:0.4s}
.hero-animate-description.hero-animate-in{animation:heroDescription 0.6s ease-out forwards;animation-delay:0.55s}
.hero-animate-trust.hero-animate-in{animation:heroTrust 0.4s ease-out forwards}
.hero-animate-actions.hero-animate-in{animation:heroDescription 0.5s ease-out forwards;animation-delay:0.65s}
.hero-animate-dots.hero-animate-in{animation:heroDots 0.5s ease-out forwards;animation-delay:0.8s}
.hero-animate-form.hero-animate-in{animation:heroForm 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;animation-delay:0.5s}

/* Form field animations (replacing framer-motion in HeroForm) */
@keyframes formFieldSlide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes formButtonPop{from{opacity:0;transform:translateY(20px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes formSuccessPop{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}

.form-field-animate,.form-button-animate{opacity:0}
.form-field-animate.form-animate-in{animation:formFieldSlide 0.5s ease-out forwards}
.form-button-animate.form-animate-in{animation:formButtonPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards}
.form-success-animate{animation:formSuccessPop 0.4s ease-out forwards}

/* Testimonials section animations */
@keyframes testimonialFadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.testimonial-header,.testimonial-card-container,.testimonial-controls,.testimonial-stats{opacity:0}
.testimonial-header.testimonial-animate-in{animation:testimonialFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:0.1s}
.testimonial-card-container.testimonial-animate-in{animation:testimonialFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:0.3s}
.testimonial-controls.testimonial-animate-in{animation:testimonialFadeUp 0.6s ease-out forwards;animation-delay:0.5s}
.testimonial-stats.testimonial-animate-in{animation:testimonialFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards;animation-delay:0.6s}

/* Footer background image overlay utility */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;inset:0;background-color:#108980;-webkit-mask-image:url('/assets/images/footer.svg');mask-image:url('/assets/images/footer.svg');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center 20%;mask-position:center 20%;-webkit-mask-size:min(900px,80%);mask-size:min(900px,80%);opacity:0.5;z-index:0;pointer-events:none}
.site-footer>*{position:relative;z-index:1}

/* Lightweight conic border utility (SSR-friendly, minimal) */
.conic-border{position:relative}
.conic-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 180deg at 50% 50%,rgba(56,119,166,0.35),rgba(18,152,142,0.35),rgba(56,119,166,0.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Gentle attention animation for mobile call button */
.call-pulse{position:relative}
.call-pulse::after{content:'';position:absolute;inset:-2px;border-radius:9999px;background:radial-gradient(60% 60% at 50% 50%,rgba(52,199,89,0.28),rgba(52,199,89,0) 70%);opacity:0;pointer-events:none;animation:callPulse 3.6s ease-in-out infinite}
@keyframes callPulse{0%{opacity:0;transform:scale(0.98)}10%{opacity:0.18;transform:scale(1.02)}20%{opacity:0.10;transform:scale(1)}60%,100%{opacity:0;transform:scale(1)}}

/* ========== GLASS CASCADE MOBILE MENU ========== */

/* Glass card cascade animation */
@keyframes glassCardCascade {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(-12px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Glass card exit animation */
@keyframes glassCardExit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) translateY(-8px);
  }
}

/* Panel entrance */
@keyframes menuPanelSlide {
  0% {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
    backdrop-filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    backdrop-filter: blur(20px);
  }
}

/* Animated gradient mesh background */
@keyframes gradientMesh {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Active card glow pulse */
@keyframes activeCardGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(56, 119, 166, 0.3), 
                0 4px 20px rgba(56, 119, 166, 0.15),
                0 8px 32px rgba(18, 152, 142, 0.1);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(56, 119, 166, 0.4), 
                0 6px 28px rgba(56, 119, 166, 0.25),
                0 12px 40px rgba(18, 152, 142, 0.15);
  }
}

/* Section label fade in */
@keyframes sectionLabelFade {
  0% {
    opacity: 0;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* CTA buttons entrance */
@keyframes ctaButtonPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Glass cascade menu panel */
.mobile-menu-glass-panel {
  animation: menuPanelSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Animated gradient mesh background */
.mobile-menu-mesh-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(56, 119, 166, 0.08), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(18, 152, 142, 0.06), transparent 50%),
    radial-gradient(ellipse 40% 60% at 50% 50%, rgba(161, 236, 244, 0.04), transparent 60%);
  background-size: 200% 200%;
  animation: gradientMesh 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Individual glass card */
.glass-nav-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.75) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 
    0 3px 12px rgba(56, 119, 166, 0.07),
    0 1px 4px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  transform: scale(0.85) translateY(-12px);
}

/* Glass card entrance animation with stagger */
.mobile-menu-open .glass-nav-card {
  animation: glassCardCascade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger delays for cards */
.glass-nav-card:nth-child(1) { animation-delay: 0.05s; }
.glass-nav-card:nth-child(2) { animation-delay: 0.1s; }
.glass-nav-card:nth-child(3) { animation-delay: 0.15s; }
.glass-nav-card:nth-child(4) { animation-delay: 0.2s; }
.glass-nav-card:nth-child(5) { animation-delay: 0.25s; }
.glass-nav-card:nth-child(6) { animation-delay: 0.3s; }
.glass-nav-card:nth-child(7) { animation-delay: 0.35s; }

/* Hover lift effect */
.glass-nav-card:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 6px 20px rgba(56, 119, 166, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(56, 119, 166, 0.2);
}

/* Active state card */
.glass-nav-card.active {
  background: linear-gradient(135deg, #3877a6 0%, #12988e 100%);
  border-color: transparent;
  animation: glassCardCascade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             activeCardGlow 3s ease-in-out infinite;
  animation-delay: var(--cascade-delay, 0s), 0.4s;
}

.glass-nav-card.active:hover {
  transform: translateY(-4px) scale(1.02);
}

/* Service grid cards - compact variant */
.glass-service-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 
    0 2px 8px rgba(56, 119, 166, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  transform: scale(0.88) translateY(-6px);
}

.mobile-menu-open .glass-service-card {
  animation: glassCardCascade 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Service card stagger (starts after nav cards) */
.glass-service-card:nth-child(1) { animation-delay: 0.18s; }
.glass-service-card:nth-child(2) { animation-delay: 0.22s; }
.glass-service-card:nth-child(3) { animation-delay: 0.26s; }
.glass-service-card:nth-child(4) { animation-delay: 0.3s; }

.glass-service-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 4px 14px rgba(56, 119, 166, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(56, 119, 166, 0.15);
}

.glass-service-card.active {
  background: linear-gradient(135deg, #3877a6 0%, #12988e 100%);
  border-color: transparent;
}

/* Section labels */
.mobile-menu-section-label {
  opacity: 0;
  animation: sectionLabelFade 0.3s ease-out forwards;
}

.mobile-menu-open .mobile-menu-section-label {
  animation-delay: 0.2s;
}

/* Secondary nav links */
.glass-secondary-link {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  transition: all 0.2s ease-out;
  opacity: 0;
}

.mobile-menu-open .glass-secondary-link {
  animation: glassCardCascade 0.28s ease-out forwards;
}

.glass-secondary-link:nth-child(1) { animation-delay: 0.28s; }
.glass-secondary-link:nth-child(2) { animation-delay: 0.31s; }
.glass-secondary-link:nth-child(3) { animation-delay: 0.34s; }

.glass-secondary-link:hover {
  background: rgba(56, 119, 166, 0.08);
  transform: translateX(-2px);
}

.glass-secondary-link.active {
  background: linear-gradient(135deg, #3877a6 0%, #12988e 100%);
}

/* CTA buttons */
.mobile-menu-cta {
  opacity: 0;
  transform: translateY(12px) scale(0.92);
}

.mobile-menu-open .mobile-menu-cta {
  animation: ctaButtonPop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mobile-menu-cta:nth-child(1) { animation-delay: 0.34s; }
.mobile-menu-cta:nth-child(2) { animation-delay: 0.38s; }

/* Icon container with gradient background */
.glass-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(56, 119, 166, 0.1) 0%, rgba(18, 152, 142, 0.1) 100%);
  transition: all 0.22s ease-out;
}

.glass-nav-card:hover .glass-icon-wrapper {
  background: linear-gradient(135deg, rgba(56, 119, 166, 0.16) 0%, rgba(18, 152, 142, 0.16) 100%);
  transform: scale(1.05);
}

.glass-nav-card.active .glass-icon-wrapper {
  background: rgba(255, 255, 255, 0.2);
}

/* Service card icon */
.glass-service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(56, 119, 166, 0.08) 0%, rgba(18, 152, 142, 0.08) 100%);
  transition: all 0.2s ease-out;
}

.glass-service-card:hover .glass-service-icon {
  background: linear-gradient(135deg, rgba(56, 119, 166, 0.14) 0%, rgba(18, 152, 142, 0.14) 100%);
  transform: scale(1.06);
}

.glass-service-card.active .glass-service-icon {
  background: rgba(255, 255, 255, 0.2);
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){.hero-animate-badge,.hero-animate-headline,.hero-animate-description,.hero-animate-trust,.hero-animate-actions,.hero-animate-dots,.hero-animate-form,.form-field-animate,.form-button-animate,.form-success-animate,.testimonial-header,.testimonial-card-container,.testimonial-controls,.testimonial-stats,.call-pulse::after,.glass-nav-card,.glass-service-card,.glass-secondary-link,.mobile-menu-cta,.mobile-menu-section-label,.mobile-menu-glass-panel,.mobile-menu-mesh-bg{opacity:1;animation:none!important;transform:none!important}}