/* Enable native smooth scrolling */
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body { overflow-x: hidden; }
  /* Offset anchored sections so content isn't hidden behind the fixed header */
  section { scroll-margin-top: 80px; }

  /* Animated Hero Styles */
  .hero-section { position: relative; overflow: hidden; }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) , linear-gradient(90deg, rgba(59,130,246,0.15), rgba(37,99,235,0.15));
    background-size: 200% 200%, 100% 100%;
    mix-blend-mode: overlay;
    animation: gradientShift 10s linear infinite;
  }

  .hero-blob {
    position: absolute; width: 420px; height: 420px; border-radius: 50%;
    filter: blur(60px); opacity: 0.6; transform: translate3d(0,0,0);
    z-index: 0; pointer-events: none;
  }
  .blob-1 { right: -120px; top: -60px; background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.35), transparent 40%); animation: blobMove 12s ease-in-out infinite; }
  .blob-2 { left: -140px; bottom: -80px; background: radial-gradient(circle at 70% 70%, rgba(59,130,246,0.30), transparent 40%); animation: blobMove 14s ease-in-out infinite reverse; }

  .hero-images { position: absolute; inset: 0; z-index: 0; }
  .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; }
  .hero-img.active { opacity: 0.4; }

  @keyframes gradientShift {
    0% { background-position: 0% 50%, 0% 0%; }
    50% { background-position: 100% 50%, 0% 0%; }
    100% { background-position: 0% 50%, 0% 0%; }
  }

  @keyframes blobMove {
    0% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(18px) translateX(8px) scale(1.03); }
    100% { transform: translateY(0) translateX(0) scale(1); }
  }

  /* Content entrance animations */
  .fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp 700ms ease forwards; }
  .fade-up.delay-1 { animation-delay: 120ms; }
  .fade-up.delay-2 { animation-delay: 220ms; }
  .fade-up.delay-3 { animation-delay: 320ms; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Gentle floating for hero image */
  .float-anim { animation: float 6s ease-in-out infinite; }
  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }

  /* Carousel removed — single hero image will be used */

  /* Testimonials Carousel */
  .carousel-container { position: relative; overflow: hidden; min-height: 336px; width: 100%; max-width: 100%; }
  .carousel-slides { display: flex; transition: transform 600ms ease; height: 100%; width: 100%; }
  .carousel-slide { min-width: 100%; flex-shrink: 0; width: 100%; box-sizing: border-box; }
  .carousel-nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
  .carousel-nav button { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(59, 130, 246, 0.4); border: none; cursor: pointer; transition: background-color 300ms; }
  .carousel-nav button.active { background-color: rgb(59, 130, 246); }
  .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(59, 130, 246, 0.7); color: white; border: none; padding: 10px 14px; border-radius: 50%; cursor: pointer; font-size: 18px; transition: background-color 300ms; z-index: 10; }
  .carousel-arrow:hover { background-color: rgb(59, 130, 246); }
  .carousel-arrow.prev { left: 10px; }
  .carousel-arrow.next { right: 10px; }

  /* Testimonials carousel: fade transition */
  .carousel-container:has(> .carousel-nav[data-carousel="testimonials"]) .carousel-slides { transition: opacity 800ms ease-in-out; }