Animated Hero Section with Neon CTA Buttons

<section
  class="relative z-10 flex min-h-screen max-w-6xl flex-col text-center mr-auto ml-auto pr-6 pl-6 space-y-10 items-center justify-center">
  <h1
    class="drop-shadow-[0_0_80px_rgba(56,189,248,0.45)] text-[clamp(32px,8vw,120px)] leading-[1.1] font-semibold text-gray-50/90 tracking-tight text-center">
    AI Assistant for <span class="relative inline-block animate-pill">
    <!-- Perspective wrapper -->
<span class="relative inline-block" style="perspective:1000px;">
  <!-- Animated word -->
  <span class="inline-flex items-center bg-white/5 border-neutral-400/40 border rounded-full pt-6 pr-10 pb-6 pl-10 backdrop-blur-sm italic text-white font-playfair animate-sway3d">
    Creative
  </span>
    </span>
    </span>
    Work
  </h1>



  <p class="max-w-2xl sm:text-lg text-base text-slate-200/85 mt-6" style="transition: outline 0.1s ease-in-out;">Meet
    Mira, your intelligent companion that streamlines your workflow, enhances team collaboration, and automates
    repetitive tasks so you can focus on what matters most.</p>

  <div
    class="inline-flex shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05),0_20px_60px_rgba(0,0,0,0.50)] bg-neutral-900/80 ring-white/10 ring-1 rounded-full mt-8 pt-1 pr-1 pb-1 pl-1 backdrop-blur-md items-center relative">
    <!-- Neon perimeter tracers -->
    <svg aria-hidden="true" class="pointer-events-none absolute inset-0" style="z-index:1; overflow:visible;"
      viewBox="0 0 1000 100" preserveAspectRatio="none">
      <defs class="">


      </defs>
      <!-- Tracer A -->
      <rect x="1.5" y="1.5" width="997" height="97" rx="49" ry="49" fill="none" stroke="url(#aura-neon-stroke)"
        stroke-width="2" stroke-linecap="round" pathLength="1000" stroke-dasharray="140 860" stroke-dashoffset="0"
        style="vector-effect: non-scaling-stroke; filter: url(#aura-soft-glow); opacity: 0.9;" class="">
        <animate attributeName="stroke-dashoffset" from="0" to="-1000" dur="3.2s" repeatCount="indefinite" class="">
        </animate>
      </rect>
      <!-- Tracer B (opposite direction) -->
      <rect x="1.5" y="1.5" width="997" height="97" rx="49" ry="49" fill="none" stroke="url(#aura-neon-stroke)"
        stroke-width="2" stroke-linecap="round" pathLength="1000" stroke-dasharray="140 860" stroke-dashoffset="0"
        style="vector-effect: non-scaling-stroke; filter: url(#aura-soft-glow); opacity: 0.9;" class="">
        <animate attributeName="stroke-dashoffset" from="0" to="1000" dur="3.2s" repeatCount="indefinite" class="">
        </animate>
      </rect>
    </svg>

    <button class="relative transition-colors hover:bg-white/5 ring-0 text-base font-semibold tracking-tight rounded-full pt-3 pr-6 pb-3 pl-6 text-slate-400/80" style="z-index:2;">Explore demo</button>

    <a href="#contact"
      class="relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full px-6 py-3 text-base font-semibold tracking-tight text-white bg-sky-500/5 ring-1 ring-sky-400/30 shadow-[0_0_0_1px_rgba(56,189,248,0.25),inset_0_0_0_1px_rgba(255,255,255,0.08)] transition-all duration-300 hover:ring-sky-400/60 hover:shadow-[0_0_0_1px_rgba(56,189,248,0.35),0_40px_80px_rgba(56,189,248,0.18)]"
      style="z-index:2;">
      <span class="relative z-[1]">Get started</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        data-lucide="arrow-right" class="lucide lucide-arrow-right relative z-[1] w-4 h-4 text-sky-100"
        data-icon-replaced="true" style="color: rgb(224, 242, 254);">
        <path d="M5 12h14" class=""></path>
        <path d="m12 5 7 7-7 7" class=""></path>
      </svg>
      <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full" style="box-shadow: 0 0 0 1px rgba(56,189,248,0.45), 0 18px 60px rgba(56,189,248,0.25); background: radial-gradient(140% 160% at 50% -20%, rgba(56,189,248,0.22) 0%, rgba(,189,248,0.08) 35%, rgba(56,189,248,0.00) 60%);"></span>
      <span aria-hidden="true" class="pointer-events-none absolute inset-[1px] rounded-full" style="background:
        radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 60%),
        radial-gradient(90% 80% at 50% 120%, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0) 60%);"></span>
    </a>
  </div>
</section>