html, body {
  height: 100%;
}

.gradient-mesh {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 80vh;
  filter: blur(40px) saturate(120%);
  background: radial-gradient(60% 60% at 20% 20%, rgba(16,185,129,0.35), transparent 60%),
              radial-gradient(50% 50% at 80% 30%, rgba(34,211,238,0.12), transparent 60%),
              radial-gradient(40% 40% at 50% 80%, rgba(16,185,129,0.18), transparent 60%);
  pointer-events: none;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDAwJyBoZWlnaHQ9JzQwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJyB4PScwJyB5PScwJz48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9JzAuNScgc3RpdGNoVGlsZXM9J3N0aXRjaCcgcHJpaW1hZ2U9J3NvdXJjZScvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==');
}

@media (prefers-reduced-motion: reduce) {
  .parallax {
    transform: none !important;
  }
}

/* Mobile Menu Transitions */
#mobileMenu {
  transition: all 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

#mobileMenu:not(.hidden) {
  max-height: 100vh;
}

/* Search Text Container - Fixed Height for Smooth Animation */
#searchText {
  display: inline-block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Lock search demo height to prevent page jumps */
.search-demo {
  position: relative;
  isolation: isolate;
  contain: layout size;
}

/* Ensure text container doesn't expand beyond fixed height */
#searchText {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 100%;
  overflow: hidden;
}

/* Hero section isolation to prevent layout shifts */
section[aria-label="Hero"] {
  contain: layout size;
  min-height: 100vh;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Mobile-first responsive utilities */
@media (max-width: 639px) {
  /* Reduce animations on mobile for performance */
  .search-demo {
    animation: none;
  }

  /* Optimize touch targets (min 44px) */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }
}

/* Tablet responsive adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Optimize for tablet viewport */
  .gradient-mesh {
    height: 60vh;
  }
}

/* Desktop optimizations */
@media (min-width: 1024px) {
  /* Enable hover effects only on desktop */
  .hover-only-desktop:hover {
    transform: scale(1.05);
  }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .noise-overlay {
    opacity: 0.03;
  }
}

.typing-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.search-demo {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.1),
                0 0 10px rgba(16, 185, 129, 0.05),
                inset 0 0 5px rgba(16, 185, 129, 0.025);
  }
  50% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2),
                0 0 20px rgba(16, 185, 129, 0.1),
                inset 0 0 8px rgba(16, 185, 129, 0.05);
  }
}

.kanban-column-glow {
  animation: borderGlow 3s ease-in-out infinite;
}

.kanban-column-glow:nth-child(1) { animation-delay: 0s; }
.kanban-column-glow:nth-child(2) { animation-delay: 0.6s; }
.kanban-column-glow:nth-child(3) { animation-delay: 1.2s; }
.kanban-column-glow:nth-child(4) { animation-delay: 1.8s; }
.kanban-column-glow:nth-child(5) { animation-delay: 2.4s; }

@keyframes roiCardGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15),
                0 0 30px rgba(16, 185, 129, 0.08);
  }
  50% {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.3),
                0 0 50px rgba(16, 185, 129, 0.15);
  }
}

.roi-card-glow {
  animation: roiCardGlow 4s ease-in-out infinite;
}

.roi-card-glow:nth-child(1) { animation-delay: 0s; }
.roi-card-glow:nth-child(2) { animation-delay: 1.3s; }
.roi-card-glow:nth-child(3) { animation-delay: 2.6s; }

@keyframes speedPulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.speed-pulse {
  animation: speedPulse 2s ease-in-out infinite;
}

.cost-bar-ai {
  animation: fillBar 2s ease-out 0.5s forwards;
}

@keyframes fillBar {
  to { width: 7%; }
}

.accuracy-circle {
  animation: fillCircle 2s ease-out 0.5s forwards;
}

@keyframes fillCircle {
  to { stroke-dashoffset: 15.7; }
}

.seniority-bar {
  transition: width 1.5s ease-out;
}

.seniority-vertical-bar {
  transition: height 1.5s ease-out;
}

.skills-bar {
  transition: width 1.5s ease-out;
}

details {
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

details summary {
  list-style: none;
  transition: all 0.3s ease;
  user-select: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '+';
  float: right;
  font-size: 1.5rem;
  font-weight: 300;
  color: #10b981;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] summary::after {
  transform: rotate(45deg);
}

details[open] summary {
  margin-bottom: 0.75rem;
}

.faq-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .faq-content {
  max-height: 500px;
  opacity: 1;
  margin-top: 0.5rem;
}