/* ════════ 1. GLOBAL & BODY ════════ */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "DM Sans", sans-serif;
  background: #f0f7ff;
  color: #071728;
  overflow-x: hidden;
}
#navbar .text-sm {
  font-size: 1rem !important;
}
#navbar .hover\:text-accent:hover {
  --tw-text-opacity: 1;
  color: #f4a261 !important;
}

/* ════════ 2. NAVBAR & SCROLL EFFECTS ════════ */
.nav-scrolled {
  background: #084465c8 !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Active Underline Logic */
.nav-item.active {
  color: #f4a261 !important;
}
.nav-item.active .nav-indicator {
  width: 100% !important;
}
.nav-item:hover .nav-indicator {
  width: 100%;
}

/* More Info Dropdown Animation */
#info-dropdown {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top right;
}
#info-dropdown.show {
  opacity: 1 !important;
  pointer-events: all !important;
  transform: translateY(0) scale(1) !important;
}

/* ════════ 3. RESPONSIVE BREAKPOINTS (992px) ════════ */
@media (max-width: 991px) {
  .nav-menu-desktop,
  .nav-cta-desktop {
    display: none !important;
  }
  .burger-visible {
    display: block !important;
  }
}

@media (min-width: 992px) {
  .nav-menu-desktop {
    display: flex !important;
  }
  .nav-cta-desktop {
    display: inline-flex !important;
  }
  .burger-visible {
    display: none !important;
  }
  #mobile-menu {
    display: none !important;
  }
}

/* ════════ 4. MOBILE MENU FIX ════════ */
#mobile-menu {
  display: block !important; /* Always block but height 0 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu.open {
  max-height: 600px; /* Menu ki height increase hogi */
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.mobile-nav-item.active {
  color: #ffd700 !important;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #ffd700;
  padding-left: 1.5rem;
}

/* ════════ 5. HERO & SPECIAL EFFECTS (Your Original) ════════ */
.hero-bg {
  background: linear-gradient(135deg, #071728 0%, #0a3d62 55%, #00b4d8 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300B4D8' fill-opacity='0.06'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-float {
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}
.dna-line {
  position: absolute;
  right: -60px;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  opacity: 0.07;
  pointer-events: none;
}

/* ════════ 6. ANIMATIONS & UI ════════ */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.product-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0, 180, 216, 0.15);
}

.stat-box {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.label-pill {
  background: rgba(0, 180, 216, 0.12);
  color: #00b4d8;
  border: 1px solid rgba(0, 180, 216, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Ticker & Scroll Top */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
}
.ticker {
  display: inline-block;
  animation: ticker 28s linear infinite;
}
@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#scrollTop {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 100;
}
#scrollTop.show {
  opacity: 1;
  pointer-events: all;
}

/* ════════ 7. MOBILE TYPOGRAPHY FIXES ════════ */
@media (max-width: 600px) {
  .text-4xl {
    font-size: 1.75rem !important;
  }
  .text-xl,
  .text-3xl {
    font-size: 1rem !important;
  }
}