Hero Section with CTA Form

<div class="relative overflow-hidden bg-gradient-to-b from-gray-950 via-gray-900 to-gray-950 px-4 sm:px-6 lg:px-8 pt-12 pb-16 lg:py-24">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800,900&display=swap');
  </style>
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900/20 via-transparent to-transparent"></div>
  <div class="absolute top-0 left-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl animate-pulse"></div>
  <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
  <div class="relative z-10 max-w-7xl mx-auto text-center" style="font-family: 'Inter', sans-serif;">
    <div class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-900/50 border border-indigo-800/50 text-indigo-300 rounded-full text-sm font-medium mb-8 backdrop-blur-sm hover:bg-indigo-900/70 hover:border-indigo-700/70 transition-all duration-300 hover:scale-105">
      <i data-lucide="trending-up" class="w-4 h-4"></i>
      <span class="hidden sm:inline">Trusted by 125,000+ teams at</span>
      <span class="sm:hidden">Used by 125k+ teams</span>
      <span class="font-semibold">Microsoft, Spotify, Stripe</span>
    </div>
    <h1 class="max-w-5xl mx-auto text-3xl sm:text-4xl lg:text-6xl xl:text-7xl font-bold tracking-tight text-white leading-tight lg:leading-[1.1]" style="font-family: 'Satoshi', 'Arial Black', sans-serif;">
      Connect everything.
      <br class="hidden sm:block">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-400 hover:to-purple-500 transition-all duration-500">Automate anything.</span>
      <br class="hidden sm:block">
      <span class="text-gray-300">Ship faster.</span>
    </h1>
    <p class="mx-auto mt-6 lg:mt-8 max-w-3xl text-base leading-relaxed text-gray-300">
      FlowSync Pro unifies Slack, Notion, GitHub, Figma, Linear, and 300+ tools with intelligent automation.and ship products 3x faster.
      <span class="text-white font-medium hover:text-indigo-400 transition-colors duration-300 cursor-default">Reduce context switching by 78%</span>
    </p>
    <div class="flex flex-wrap items-center justify-center gap-4 lg:gap-8 mt-8 text-sm text-gray-400">
      <div class="flex items-center gap-2 hover:text-green-400 transition-all duration-300 hover:scale-110">
        <i data-lucide="shield-check" class="w-4 h-4 text-green-400"></i>
        <span>SOC 2 Type II</span>
      </div>
      <div class="flex items-center gap-2 hover:text-blue-400 transition-all duration-300 hover:scale-110">
        <i data-lucide="globe" class="w-4 h-4 text-blue-400"></i>
        <span>99.9% uptime SLA</span>
      </div>
      <div class="flex items-center gap-2 hover:text-purple-400 transition-all duration-300 hover:scale-110">
        <i data-lucide="clock" class="w-4 h-4 text-purple-400"></i>
        <span>5-min setup</span>
      </div>
    </div>
    <div class="mx-auto mt-10 lg:mt-12 max-w-md lg:max-w-2xl">
      <form class="flex flex-col sm:flex-row gap-3 lg:gap-4">
        <div class="flex-1 relative group">
          <i data-lucide="mail" class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 z-10 pointer-events-none group-focus-within:text-indigo-400 transition-colors duration-300"></i>
          <input type="email" required="" placeholder="emma.chen@techcorp.com" class="w-full lg:py-4 lg:text-base focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none placeholder-gray-500 transition-all duration-300 text-sm text-white bg-gray-800/50 border-gray-700/50 border rounded-xl pt-3 pr-4 pb-3 pl-12 backdrop-blur-sm relative z-0 hover:bg-gray-800/70 hover:border-gray-600/50 focus:scale-105">
        </div>
        <button type="submit" class="flex gap-2 lg:px-8 lg:py-4 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 hover:shadow-xl hover:shadow-indigo-500/25 lg:text-base group text-sm font-semibold text-white rounded-xl pt-3 pr-6 pb-3 pl-6 items-center justify-center hover:scale-105 hover:-translate-y-1">
          <span>Get Free Demo</span>
          <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"></i>
        </button>
      </form>
      <p class="mt-4 text-xs lg:text-sm text-gray-500 flex flex-wrap items-center justify-center gap-4">
        <span class="flex items-center gap-1 hover:text-green-400 transition-colors duration-300">
          No credit card required
          <i data-lucide="check" class="w-3 h-3 text-green-400"></i>
        </span>
        <span class="flex items-center gap-1 hover:text-blue-400 transition-colors duration-300">
          14-day free trial
          <i data-lucide="calendar" class="w-3 h-3 text-blue-400"></i>
        </span>
        <span class="flex items-center gap-1 hover:text-purple-400 transition-colors duration-300">
          Free for teams under 10
          <i data-lucide="users" class="w-3 h-3 text-purple-400"></i>
        </span>
      </p>
    </div>
  </div>
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
  <script>lucide.createIcons();</script>
</div>