/* ================================================================
   NanoSense — Custom styles (supplements Tailwind CDN)
   ================================================================ */

/* Smooth scroll offset for fixed navbar */
html {
  scroll-padding-top: 5rem;
}

/* Navbar transparent → white on scroll */
#navbar {
  background-color: transparent;
}

#navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Code block styling */
pre code {
  tab-size: 2;
}

/* Pulse animation for the status dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.animate-pulse {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Feature card hover lift */
.group:hover {
  transform: translateY(-2px);
}

/* Pricing card scale on hover */
#pricing .rounded-2xl {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#pricing .rounded-2xl:hover {
  transform: translateY(-4px);
}

/* Form focus ring */
input:focus {
  box-shadow: 0 0 0 3px rgba(51, 137, 255, 0.15);
}

/* Mobile menu animation */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Selection color */
::selection {
  background-color: rgba(51, 137, 255, 0.15);
  color: inherit;
}