Responsive Hero Section with Navbar & CTA (Tailwind)

<section class="relative w-full sm:px-6 md:px-10 max-w-7xl mt-12 mr-auto mb-12 ml-auto pr-4 pl-4">
  <!-- Headline -->
  <h1
    class="max-w-5xl sm:text-5xl md:text-6xl lg:text-7xl leading-[1.05] text-4xl text-white tracking-tighter text-center my-16 mr-auto ml-auto">
    Edit faster. Grade
    <img alt="Timeline UI" class="inline-block align-middle h-10 w-14 sm:h-12 sm:w-20 md:h-16 md:w-28 shadow-[0_2.8px_2.2px_rgba(0,0,0,0.4),_0_6.7px_5.3px_rgba(0,0,0,0.5),_0_12.5px_10px_rgba(0,0,0,0.6),_0_22.3px_17.9px_rgba(0,0,0,0.7),_0_41.8px_33.4px_rgba(0,0,0,0.8),_0_100px_80px_rgba(0,0,0,0.9)] object-cover rounded-xl mr-2 ml-2" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e74f3efa-795f-48c3-af9a-123c4b7dd690_320w.jpg" style="">
      in real time. Tell
    <img alt="Color Wheels" class="inline-block align-middle h-10 w-12 sm:h-12 sm:w-16 md:h-16 md:w-24 shadow-[0_2.8px_2.2px_rgba(0,0,0,0.4),_0_6.7px_5.3px_rgba(0,0,0,0.5),_0_12.5px_10px_rgba(0,0,0,0.6),_0_22.3px_17.9px_rgba(0,0,0,0.7),_0_41.8px_33.4px_rgba(0,0,0,0.8),_0_100px_80px_rgba(0,0,0,0.9)] object-cover rounded-xl mr-2 ml-2" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa077b0f-a28c-4e66-9c85-7e26d5952d7b_320w.jpg" style=""> better stories.
  </h1>

  <!-- Subcopy -->
  <p class="sm:text-2xl max-w-3xl text-base text-neutral-200 text-center mt-4 mx-auto">
    Vellum Edit is a pro video editor for macOS—AI‑assisted editing, color, and audio with buttery‑smooth performance on
    Apple Silicon.
  </p>

  <!-- Feature badges -->


  <!-- CTAs -->
  <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mt-12 justify-center">
    <button class="group relative inline-flex min-w-[120px] cursor-pointer transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:text-white shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] overflow-hidden font-semibold text-neutral-400 tracking-tight bg-neutral-800 border-neutral-600 border rounded-full pt-[12px] pr-[20px] pb-[12px] pl-[20px] items-center justify-center">
  <!-- Original text (slides down on hover) -->
  <span class="relative z-10 font-medium rounded-full transition-all duration-500 ease-out group-hover:transform group-hover:translate-y-8 group-hover:opacity-0 group-hover:blur-md">Download Mac app</span>
  
  <!-- Clone text (slides in from top on hover) -->
  <span class="absolute inset-0 z-10 flex items-center justify-center transition-all duration-300 ease-in-out transform -translate-y-8 group-hover:translate-y-0 group-hover:opacity-100 group-hover:blur-none font-medium rounded-full blur-md">Download Mac app</span>

  <!-- replaces the old ::before underline -->
  <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80 bg-gradient-to-r from-transparent via-neutral-200 to-transparent rounded-full blur-[2px]"></span>
  
  <!-- bottom light gradient on hover -->
  <span aria-hidden="true" class="absolute bottom-0 left-0 right-0 h-[100%] group-hover:opacity-60 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] pointer-events-none bg-gradient-to-t from-white/20 via-white/10 to-transparent rounded-full"></span>
</button>
    <a href="#demo"
      class="inline-flex items-center justify-center hover:bg-white/10 shadow-[0_2.8px_2.2px_rgba(0,0,0,0.3),_0_6.7px_5.3px_rgba(0,0,0,0.35),_0_12.5px_10px_rgba(0,0,0,0.4)] text-base font-medium text-white/90 bg-white/5 border-white/10 border rounded-full px-6 h-12 backdrop-blur">

      Watch demo
    </a>
  </div>
</section>