/* =========================================
   Z1 TRACKER — SHARED STYLESHEET
   Single-brand-color system — every color below
   is a tint/shade of the brand blue #3d74e6.
========================================= */
:root {
  --brand: #3d74e6;
  --brand-deep: #1e3a78;
  --brand-mid: #2e57ac;
  --brand-light: #e9effb;
  --brand-pale: #f4f7fd;
}

/* =========================================
   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(61, 116, 230, 0.3); }
  50% { box-shadow: 0 0 20px rgba(61, 116, 230, 0.8); }
}
@keyframes meshShift {
  0% { background: radial-gradient(ellipse 75% 65% at 15% 55%, rgba(30, 58, 120, 0.22) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 82% 28%, rgba(61, 116, 230, 0.15) 0%, transparent 58%), radial-gradient(ellipse 65% 50% at 52% 82%, rgba(61, 116, 230, 0.10) 0%, transparent 52%); }
  50% { background: radial-gradient(ellipse 70% 70% at 38% 42%, rgba(30, 58, 120, 0.26) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 68% 62%, rgba(61, 116, 230, 0.18) 0%, transparent 60%), radial-gradient(ellipse 55% 70% at 18% 68%, rgba(61, 116, 230, 0.13) 0%, transparent 52%); }
  100% { background: radial-gradient(ellipse 85% 52% at 62% 32%, rgba(30, 58, 120, 0.19) 0%, transparent 60%), radial-gradient(ellipse 50% 88% at 18% 58%, rgba(61, 116, 230, 0.12) 0%, transparent 60%), radial-gradient(ellipse 78% 42% at 78% 72%, rgba(61, 116, 230, 0.16) 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 clientsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes infiniteScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 0.75rem)); }
}
@keyframes counterPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* =========================================
   UTILITIES
========================================= */
.gradient-text {
  background: linear-gradient(135deg, #6fa0ff 0%, #3d74e6 55%, #a9c6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text-light {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-number {
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.input-focus:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 116, 230, 0.2);
  border-color: var(--brand);
}
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* =========================================
   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, var(--brand-deep), var(--brand));
  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.97); backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 rgba(61, 116, 230, 0.08), 0 8px 32px rgba(61, 116, 230, 0.10);
}
.nav-hidden { transform: translateY(-100%); }
.nav-scrolled .nav-link { color: #2c3e66 !important; }
.nav-scrolled .nav-link:hover { color: var(--brand) !important; background: var(--brand-light) !important; }
.nav-scrolled .nav-link.active { color: var(--brand) !important; }
.nav-scrolled .nav-btn-login { color: var(--brand) !important; border-color: var(--brand) !important; background: transparent !important; }
.nav-scrolled .nav-btn-demo { background: var(--brand) !important; color: white !important; border-color: var(--brand) !important; }
.nav-scrolled .hb-line { background: var(--brand) !important; }
.nav-btn-demo, .nav-btn-login { transition: all 0.25s ease !important; }
.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-login:hover { background: var(--brand-light) !important; box-shadow: 0 8px 20px rgba(61, 116, 230, 0.15) !important; }
.nav-scrolled .nav-btn-demo:hover { background: var(--brand-deep) !important; }
#navLogo { transition: opacity 0.15s ease; }
#navLogo.transitioning { opacity: 0; }

/* =========================================
   CARDS & COMPONENTS
========================================= */
.feature-card { background: white; border: 1px solid rgba(61, 116, 230, 0.1); transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -12px rgba(61, 116, 230, 0.18); border-color: var(--brand); }
.insight-card { transition: all 0.25s ease; }
.insight-card:hover, .active-card {
  border-color: var(--brand) !important; background-color: rgba(61, 116, 230, 0.08) !important;
  box-shadow: 0 0 20px rgba(61, 116, 230, 0.18); transform: translateY(-2px) !important;
}
.glow-card-light {
  background: #ffffff; border: 1px solid rgba(61, 116, 230, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(61, 116, 230, 0.05); transition: all 0.3s ease;
}
.glow-card-light:hover { box-shadow: 0 20px 30px -12px rgba(61, 116, 230, 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(61, 116, 230, 0.25); }
.price-card-popular { transform: translateY(-4px); border: 2px solid var(--brand); box-shadow: 0 10px 30px -10px rgba(61, 116, 230, 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(61, 116, 230, 0.25) !important; }
.stat-box { transition: all 0.3s ease; }
.stat-box:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -10px rgba(61, 116, 230, 0.2); border-color: var(--brand); }
.step-card { transition: all 0.3s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -10px rgba(61, 116, 230, 0.2); }
.compare-row.z1-row td { background: var(--brand-light); }

/* Industry / Use-case icon cards */
.usecase-card { transition: all 0.35s ease; }
.usecase-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -14px rgba(61, 116, 230, 0.28); }
.usecase-card:hover .usecase-icon { background: var(--brand); color: #fff; transform: scale(1.08); }
.usecase-icon { transition: all 0.3s ease; }

/* 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(255, 255, 255, 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(61, 116, 230, 0.25);
  border-color: #fff; box-shadow: 0 0 35px rgba(61, 116, 230, 0.5);
}
.play-ripple { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 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(255, 255, 255, 0.7); border-radius: 20px;
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
.scroll-mouse-modern::before {
  content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 10px; background: #fff; 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; color: rgba(255,255,255,0.85); }
.scroll-dot { width: 3px; height: 3px; border-radius: 50%; background: #fff; 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; }

/* =========================================
   CAROUSEL (CLIENTS)
========================================= */
.clients-track-wrap { overflow: hidden; position: relative; }
.clients-track-wrap::before, .clients-track-wrap::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); }
.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; 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; }
.clients-infinite-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(61, 116, 230, 0.08); transition: all 0.3s ease; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 137px;
}
.client-desc { margin-top: 0.4rem; font-size: 0.65rem; line-height: 1.25; color: #94a3b8; text-align: center; }
.client-card:hover { box-shadow: 0 12px 24px rgba(61, 116, 230, 0.15); transform: translateY(-4px); z-index: 20; }
.client-name-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); 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(61, 116, 230, 0.35);
}
.client-name-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--brand);
}
.client-card:hover .client-name-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-4px); }

@media(max-width:640px) { .clients-carousel-item { width: 150px; } }

/* =========================================
   S-SHAPE FLIP-UP FEATURE PATH (Core Features)
========================================= */
.flip-container { perspective: 1200px; width: 100%; display: flex; justify-content: inherit; }
.flip-inner {
  display: flex; align-items: center; transform-style: preserve-3d;
  transform: rotateX(-30deg) scale(0.9); opacity: 0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform, opacity;
}
.flip-inner.active { transform: rotateX(0deg) scale(1); opacity: 1; }
@media (max-width: 768px) {
  .flip-container { justify-content: center; }
  .flip-inner { flex-direction: column; align-items: center; text-align: center; }
  .flip-inner>div:last-child { margin-left: 0; margin-top: 0.75rem; border-left: none; border-top: 3px solid var(--brand); }
}

/* =========================================
   SCROLL REVEAL ANIMATIONS
========================================= */
[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="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); }

[data-anim].anim-exit { transition-duration: 0.3s; }
[data-anim-stagger].anim-exit > * { transition-duration: 0.3s; }
[data-anim="fade-up"].anim-exit { opacity: 0; transform: translateY(30px); }
[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); }

/* Mobile menu active link */
#mobileMenu a.mobile-active {
  background: rgba(255, 255, 255, 0.18); padding: 0.5rem 1rem; border-radius: 2rem;
  color: white !important; font-weight: bold;
}

/* Video modal */
#modalBg { backdrop-filter: blur(0px); }

/* FAQ (Contact page) */
.faq-question { transition: background-color 0.2s; }
.faq-question:hover { background-color: #f9fafb; }
.faq-item.active .faq-question { background-color: var(--brand-light); }
.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; }