/* =========================================
   KEYFRAMES & ANIMATIONS
========================================= */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(58, 159, 217, 0.3); }
  50% { box-shadow: 0 0 20px rgba(58, 159, 217, 0.8); }
}
@keyframes meshShift {
  0% { background: radial-gradient(ellipse 75% 65% at 15% 55%, rgba(27, 75, 158, 0.20) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 82% 28%, rgba(58, 159, 217, 0.13) 0%, transparent 58%), radial-gradient(ellipse 65% 50% at 52% 82%, rgba(46, 134, 193, 0.10) 0%, transparent 52%); }
  50% { background: radial-gradient(ellipse 70% 70% at 38% 42%, rgba(27, 75, 158, 0.24) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 68% 62%, rgba(58, 159, 217, 0.16) 0%, transparent 60%), radial-gradient(ellipse 55% 70% at 18% 68%, rgba(46, 134, 193, 0.13) 0%, transparent 52%); }
  100% { background: radial-gradient(ellipse 85% 52% at 62% 32%, rgba(27, 75, 158, 0.17) 0%, transparent 60%), radial-gradient(ellipse 50% 88% at 18% 58%, rgba(58, 159, 217, 0.11) 0%, transparent 60%), radial-gradient(ellipse 78% 42% at 78% 72%, rgba(46, 134, 193, 0.15) 0%, transparent 52%); }
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.06); }
  66% { transform: translate(-20px, 40px) scale(0.94); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-35px, 25px) scale(1.05); }
  70% { transform: translate(25px, -20px) scale(0.96); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 30px) scale(1.08); }
}
@keyframes pDrift {
  0% { transform: translateY(110vh) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-30px) translateX(var(--dx, 20px)); opacity: 0; }
}
@keyframes ringExpand {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes infiniteScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.75rem)); }
}
@keyframes clientsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================
   UTILITIES
========================================= */
.gradient-text {
  background: linear-gradient(135deg, #4DA8FF 0%, #00D4FF 45%, #7CC5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text-light {
  background: linear-gradient(135deg, #1B4B9E 0%, #3A9FD9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-number {
  background: linear-gradient(135deg, #1B4B9E, #2E86C1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-soft-pattern {
  background: linear-gradient(145deg, #F9FBFE 0%, #F0F5FA 100%);
}
.input-focus:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(58, 159, 217, 0.2);
  border-color: #3A9FD9;
}

/* =========================================
   NAVBAR
========================================= */
.nav-link::after {
  content: ''; position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%); width: 0; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #1B4B9E, #3A9FD9);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after { width: 55%; }
.nav-link.active { color: white !important; }
.nav-link.active::after { width: 55%; opacity: 1; }
.nav-transparent { background: transparent; }
.nav-scrolled {
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(27, 75, 158, 0.08), 0 8px 32px rgba(27, 75, 158, 0.10);
}
.nav-hidden { transform: translateY(-100%); }

.nav-scrolled .nav-link { color: #2c3e66 !important; }
.nav-scrolled .nav-link:hover { color: #1B4B9E !important; background: #EBF4FB !important; }
.nav-scrolled .nav-link.active { color: #1B4B9E !important; }
.nav-scrolled .nav-btn-trial,
.nav-scrolled .nav-btn-demo,
.nav-scrolled .nav-btn-login {
  color: #1B4B9E !important; border-color: #1B4B9E !important; background: transparent !important;
}
.nav-scrolled .nav-btn-demo { background: #1B4B9E !important; color: white !important; }
.nav-scrolled .hb-line { background: #1B4B9E !important; }

.nav-btn-trial, .nav-btn-demo, .nav-btn-login { transition: all 0.25s ease !important; }
.nav-btn-trial:hover, .nav-btn-demo:hover, .nav-btn-login:hover {
  transform: translateY(-2px) !important; background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
.nav-scrolled .nav-btn-trial:hover, .nav-scrolled .nav-btn-login:hover {
  background: #EBF4FB !important; box-shadow: 0 8px 20px rgba(27, 75, 158, 0.15) !important;
}
.nav-scrolled .nav-btn-demo:hover { background: #0f3a7a !important; }

/* =========================================
   CARDS & COMPONENTS
========================================= */
.glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
.glass-card-dark { background: rgba(27, 75, 158, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(58, 159, 217, 0.2); }
.blog-card, .feature-card { transition: all 0.3s ease; }
.blog-card:hover, .feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -12px rgba(27, 75, 158, 0.15); }
.feature-card { background: white; border: 1px solid rgba(27, 75, 158, 0.1); }
.feature-card:hover { border-color: #3A9FD9; }
.read-more { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.3s ease; }
.read-more:hover { gap: 0.75rem; }
.insight-card { transition: all 0.25s ease; }
.insight-card:hover, .active-card {
  border-color: #3A9FD9 !important; background-color: rgba(58, 159, 217, 0.12) !important;
  box-shadow: 0 0 20px rgba(58, 159, 217, 0.2); transform: translateY(-2px) !important;
}
.glow-card-light {
  background: #ffffff; border: 1px solid rgba(27, 75, 158, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(27, 75, 158, 0.05); transition: all 0.3s ease;
}
.glow-card-light:hover { box-shadow: 0 20px 30px -12px rgba(58, 159, 217, 0.2); transform: translateY(-3px); }
.price-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(27, 75, 158, 0.25); }
.price-card-popular { transform: translateY(-4px); border: 2px solid #3A9FD9; box-shadow: 0 10px 30px -10px rgba(58, 159, 217, 0.3); }
.price-card-popular:hover { transform: translateY(-10px); }
.cta-btn { transition: all 0.25s ease !important; }
.cta-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(27, 75, 158, 0.25) !important; }

/* Index Industry Hover Effects */
.industry-img-card .preview-panel { opacity: 0; transition: opacity 0.35s ease; }
.industry-img-card:hover .preview-panel { opacity: 1; }

/* Play Button */
.play-btn-wrapper { position: relative; width: 88px; height: 88px; }
.play-btn-core {
  position: relative; width: 100%; height: 100%; z-index: 2;
  background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px);
  border: 1.5px solid rgba(58, 159, 217, 0.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease;
}
.play-btn-core:hover {
  transform: scale(1.12); background: rgba(58, 159, 217, 0.15);
  border-color: #3A9FD9; box-shadow: 0 0 35px rgba(58, 159, 217, 0.5);
}
.play-ripple { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(58, 159, 217, 0.5); animation: ringExpand 2.2s ease-out infinite; }
.play-ripple:nth-child(2) { animation-delay: 0.8s; inset: -20px; }
.play-ripple:nth-child(3) { animation-delay: 1.6s; inset: -30px; }

/* Scroll Mouse Icon */
.scroll-mouse-modern {
  width: 28px; height: 44px; position: relative; border: 2px solid rgba(58, 159, 217, 0.7); border-radius: 20px;
  background: rgba(58, 159, 217, 0.05); box-shadow: 0 0 12px rgba(58, 159, 217, 0.3);
}
.scroll-mouse-modern::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 10px; background: #3A9FD9; border-radius: 2px;
  transform: translateX(-50%); animation: scrollBounce 1.6s ease-in-out infinite;
}
.scroll-text-modern {
  font-size: 9px; letter-spacing: 2.5px; font-weight: 600; background: linear-gradient(135deg, #1B4B9E, #3A9FD9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.scroll-dot { width: 3px; height: 3px; border-radius: 50%; background: #3A9FD9; animation: pulse 1.5s ease-in-out infinite; }
.scroll-dot:nth-child(2) { animation-delay: 0.3s; }
.scroll-dot:nth-child(3) { animation-delay: 0.6s; }

/* FAQ Accordion */
.faq-question { transition: background-color 0.2s; }
.faq-question:hover { background-color: #f9fafb; }
.faq-item.active .faq-question { background-color: #EBF4FB; }
.faq-answer { transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; max-height: 0; opacity: 0; overflow: hidden; }
.faq-item.active .faq-answer { max-height: 500px; opacity: 1; }
.category-title { border-bottom: 2px solid #EBF4FB; }

/* =========================================
   CAROUSELS (CLIENTS & ECOSYSTEM)
========================================= */
.clients-track-wrap, .infinite-carousel-container { overflow: hidden; position: relative; }
.clients-track-wrap::before, .clients-track-wrap::after,
.infinite-carousel-container::before, .infinite-carousel-container::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 10; pointer-events: none;
}
.clients-track-wrap::before { left: 0; background: linear-gradient(to right, white, transparent); }
.clients-track-wrap::after { right: 0; background: linear-gradient(to left, white, transparent); }
.infinite-carousel-container::before { left: 0; background: linear-gradient(to right, #F9FBFE, transparent); }
.infinite-carousel-container::after { right: 0; background: linear-gradient(to left, #F9FBFE, transparent); }

/* Missing flex bases and dimensions added back */
.clients-infinite-track { display: flex; gap: 1.5rem; width: max-content; animation: clientsScroll 28s linear infinite; }
.clients-track-outer { 
  overflow: visible; 
  position: relative; 
  padding-top: 55px; /* <-- THE FIX: Gives vertical space for the tooltip to appear */
  padding-bottom: 20px; 
}
.clients-carousel-item { flex: 0 0 auto; width: 180px; }
.client-logo { max-height: 55px; max-width: 130px; width: auto; object-fit: contain; transition: all 0.3s ease; }

.infinite-carousel-track { display: flex; flex-flow: row nowrap; gap: 1.5rem; width: max-content; animation: infiniteScroll 32s linear infinite; }
.infinite-carousel-track .carousel-item { flex: 0 0 320px; }

.clients-infinite-track:hover, .infinite-carousel-track:hover { animation-play-state: paused; }

.client-card {
  background: white; border-radius: 1rem; padding: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(27, 75, 158, 0.08); transition: all 0.3s ease; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px;
}
.client-card:hover { 
  box-shadow: 0 12px 24px rgba(27, 75, 158, 0.15); 
  transform: translateY(-4px); 
  z-index: 20; /* <-- THE FIX: Brings the hovered card and its tooltip to the very front */
}

.client-name-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #1B4B9E, #0A2A5E); color: white; padding: 0.45rem 1rem;
  border-radius: 3rem; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.2);
  z-index: 50; pointer-events: none; box-shadow: 0 8px 20px rgba(27, 75, 158, 0.35);
}
.client-name-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #1B4B9E;
}
.client-card:hover .client-name-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); }

/* Card Slider Hover Reveal */
.card-slider-area { height: 250px; overflow: hidden; position: relative; border-radius: 0.75rem; }
.slider-track { height: 200%; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); will-change: transform; }
.primary-block, .secondary-block { height: 50%; overflow: visible; padding-right: 4px; }
.carousel-card:hover .slider-track { transform: translateY(-50%); }

#logoCarouselTrack { animation: scrollLeft 28s linear infinite; width: max-content; }
#logoCarouselTrack:hover { animation-play-state: paused; }

.stats-mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: center; }

/* Responsive Adjustments */
@media(min-width:640px) { 
  .stats-mobile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; } 
}
@media(max-width:640px) {
  .clients-carousel-item { width: 150px; }
  .infinite-carousel-track .carousel-item { flex: 0 0 280px; }
  .infinite-carousel-track { gap: 1rem; }
}

/* =========================================
   SCROLL REVEAL ANIMATIONS
========================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 1.2s cubic-bezier(0.2, 0.9, 0.4, 1.1); }
.reveal.active { opacity: 1; transform: translateY(0); }

[data-anim] { will-change: transform, opacity; }
[data-anim="fade-up"] { opacity: 0; transform: translateY(50px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="fade-up"].anim-active { opacity: 1; transform: translateY(0); }
[data-anim="fade-down"] { opacity: 0; transform: translateY(-50px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="fade-down"].anim-active { opacity: 1; transform: translateY(0); }
[data-anim="fade-left"] { opacity: 0; transform: translateX(-60px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="fade-left"].anim-active { opacity: 1; transform: translateX(0); }
[data-anim="fade-right"] { opacity: 0; transform: translateX(60px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="fade-right"].anim-active { opacity: 1; transform: translateX(0); }
[data-anim="zoom-in"] { opacity: 0; transform: scale(0.85); transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-anim="zoom-in"].anim-active { opacity: 1; transform: scale(1); }
[data-anim="zoom-out"] { opacity: 0; transform: scale(1.12); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="zoom-out"].anim-active { opacity: 1; transform: scale(1); }
[data-anim="flip-up"] { opacity: 0; transform: rotateX(25deg) translateY(40px); transform-origin: bottom center; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="flip-up"].anim-active { opacity: 1; transform: rotateX(0deg) translateY(0); }
[data-anim="slide-left"] { opacity: 0; transform: translateX(80px) skewX(-3deg); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="slide-left"].anim-active { opacity: 1; transform: translateX(0) skewX(0deg); }
[data-anim="rotate-in"] { opacity: 0; transform: rotate(-6deg) scale(0.9); transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-anim="rotate-in"].anim-active { opacity: 1; transform: rotate(0deg) scale(1); }
[data-anim="blur-in"] { opacity: 0; filter: blur(12px); transform: scale(0.97); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim="blur-in"].anim-active { opacity: 1; filter: blur(0); transform: scale(1); }
[data-anim-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
[data-anim-stagger].anim-active > * { opacity: 1; transform: translateY(0); }

/* Animation Exits (to re-trigger on scroll up/down) */
[data-anim].anim-exit, [data-anim-stagger].anim-exit > * { transition-duration: 0.3s; }
[data-anim="fade-up"].anim-exit, [data-anim-stagger].anim-exit > * { opacity: 0; transform: translateY(30px); }
[data-anim="fade-down"].anim-exit { opacity: 0; transform: translateY(-30px); }
[data-anim="fade-left"].anim-exit { opacity: 0; transform: translateX(-30px); }
[data-anim="fade-right"].anim-exit { opacity: 0; transform: translateX(30px); }
[data-anim="zoom-in"].anim-exit { opacity: 0; transform: scale(0.9); }
[data-anim="zoom-out"].anim-exit { opacity: 0; transform: scale(1.05); }
[data-anim="flip-up"].anim-exit { opacity: 0; transform: rotateX(20deg) translateY(20px); }
[data-anim="rotate-in"].anim-exit { opacity: 0; transform: rotate(-3deg) scale(0.95); }
[data-anim="blur-in"].anim-exit { opacity: 0; filter: blur(8px); transform: scale(0.98); }


/* =========================================
   GLOBAL FIXES
========================================= */
/* 
  Prevents horizontal scrolling on mobile caused by off-screen 
  transform animations (fade-right, fade-left), while safely 
  preserving 'position: sticky' for the dashboard panel. 
*/
html, body {
  max-width: 100%;
  overflow-x: clip; 
}

/* Fallback for older browsers that don't support 'clip' */
@supports not (overflow-x: clip) {
  html, body {
    overflow-x: hidden;
  }
}
/* Mobile menu active link style */
#mobileMenu a.mobile-active {
  background: rgba(58, 159, 217, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  color: white !important;
  font-weight: bold;
}