Animated Hero Section with Oversized Headline

<div class="relative max-w-6xl sm:px-6 lg:px-8 bg-neutral-950 border-gray-800 border rounded-3xl mr-auto ml-auto pt-10 pr-10 pb-10 pl-10">
        

        

        <div class="animate-[slideUp_0.6s_ease-out_0.5s_both] bg-neutral-900/40 border-white/10 border rounded-2xl pt-8 pr-8 pb-8 pl-8" style="background:#ffffff; border-color:rgba(0,0,0,0.06);">
  <div class="relative overflow-hidden min-h-[420px] sm:min-h-[520px] lg:min-h-[600px] flex rounded-xl items-center justify-center">
    <!-- Centered black stage with product image -->
    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
      <div class="w-[88%] sm:w-[72%] max-w-6xl aspect-[16/9] bg-black relative overflow-hidden shadow-2xl rounded-sm">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d7050fd5-9b66-45d7-a30a-569d8f5e9017_800w.jpg" alt="Minimal cosmetic bottle on a dark stage" class="absolute inset-0 h-full w-full object-cover opacity-80" style="">
      </div>
    </div>

    <!-- Oversized headline with blend effect -->
    <h2 class="relative z-10 mix-blend-difference leading-[0.82] text-[13vw] sm:text-[11vw] lg:text-[9vw] select-none font-semibold text-white tracking-tight font-geist text-center pr-2 pl-2">
      <span class="block" style="">From concept</span>
      <span class="block" style="">to creation</span>
    </h2>

    <!-- Subtle crosshair lines (optional, matches reference feel) -->
    <div class="pointer-events-none absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-6xl opacity-20">
      <div class="h-px bg-black/30"></div>
    </div>
    <div class="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 h-full opacity-20">
      <div class="w-px h-full bg-black/10"></div>
    </div>
  </div>
</div>
      </div>