Animated Feature Grid Section with CTA Button

<section class="[animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll bg-gradient-to-b from-zinc-950 to-black z-10 pt-16 pr-6 pb-16 pl-6 relative">
  <div class="max-w-7xl mr-auto ml-auto">
    <div class="text-center mb-12">
      <span class="text-sm font-normal text-zinc-400 uppercase tracking-widest" style="">
        Powerful Features
      </span>
      <h2 class="sm:text-5xl lg:text-6xl text-4xl font-semibold text-white tracking-tight mt-3 mb-6" style="mask-image: linear-gradient(90deg, transparent, black 0%, black 25%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 25%, transparent);">
        Everything you need to create
      </h2>
      <p class="text-lg text-zinc-400 max-w-2xl mx-auto" style="">
        A complete suite of AI-powered tools designed to transform your creative process
      </p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 gap-x-6 gap-y-6">
  <style>
    @keyframes moveDot {
      0%, 100% {
        top: 10%;
        right: 10%;
      }
      25% {
        top: 10%;
        right: calc(100% - 35px);
      }
      50% {
        top: calc(100% - 30px);
        right: calc(100% - 35px);
      }
      75% {
        top: calc(100% - 30px);
        right: 10%;
      }
    }
  </style>

  <!-- Feature 1 -->
  <div class="w-full h-[250px] z-[1] rounded-[10px] pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d)">
    <div class="aspect-square z-[2] w-[5px] rounded-full absolute bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex flex-col text-white w-full h-full border-[#202222] border rounded-[9px] pt-6 pr-6 pb-6 pl-6 relative items-center justify-center" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13))">
      <div class="blur-[60px] transform opacity-40 w-[220px] h-[45px] rounded-full absolute top-0 left-0 rotate-[40deg]" style="background-color: rgb(99, 102, 241); box-shadow: rgb(99, 102, 241) 0px 0px 50px; transform-origin: 10% center"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" class=""></path>
          <rect x="2" y="6" width="14" height="12" rx="2" class=""></rect>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">4K Video Output</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Generate stunning videos in up to 4K resolution</p>
      <div class="w-full h-[1px] absolute" style="top: 10%; background: linear-gradient(90deg, rgb(99, 102, 241) 30%, rgb(29, 31, 31) 70%); mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);"></div>
      <div class="w-[1px] h-full absolute" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%); mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);"></div>
      <div class="bg-[#2c2c2c] w-full h-[1px] absolute" style="bottom: 10%; mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 100%, transparent);"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>
  <div class="w-full h-[250px] rounded-[10px] p-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d);">
    <div class="w-[5px] aspect-square absolute rounded-full z-[2] bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex relative flex-col text-white w-full h-full border-[#202222] border rounded-[9px] items-center justify-center p-6" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13));">
      <div class="absolute blur-[60px] transform top-0 left-0 opacity-40 w-[220px] h-[45px] rounded-full rotate-[40deg]" style="background-color: #6366f1; box-shadow: 0 0 50px #6366f1; transform-origin: 10%"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
          <polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
          <polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
          <polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12" class=""></line>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">3D Animation</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Create complex 3D animations with text prompts</p>
      <div class="absolute w-full h-[1px]" style="top: 10%; background: linear-gradient(90deg, #6366f1 30%, #1d1f1f 70%);"></div>
      <div class="absolute w-[1px] h-full" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%);"></div>
      <div class="absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>

  <!-- Feature 3 -->
  <div class="w-full h-[250px] rounded-[10px] p-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d);">
    <div class="w-[5px] aspect-square absolute rounded-full z-[2] bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex relative flex-col text-white w-full h-full border-[#202222] border rounded-[9px] items-center justify-center p-6" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13));">
      <div class="absolute blur-[60px] transform top-0 left-0 opacity-40 w-[220px] h-[45px] rounded-full rotate-[40deg]" style="background-color: #6366f1; box-shadow: 0 0 50px #6366f1; transform-origin: 10%"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="M12 2v20" class=""></path>
          <path d="M2 12h20" class=""></path>
          <path d="m19.07 4.93-14.14 14.14" class=""></path>
          <path d="m4.93 4.93 14.14 14.14" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">Style Control</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Fine-tune artistic styles with precision controls</p>
      <div class="absolute w-full h-[1px]" style="top: 10%; background: linear-gradient(90deg, #6366f1 30%, #1d1f1f 70%);"></div>
      <div class="absolute w-[1px] h-full" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%);"></div>
      <div class="absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>

  <!-- Feature 4 -->
  <div class="w-full h-[250px] rounded-[10px] p-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d);">
    <div class="aspect-square z-[2] w-[5px] rounded-full absolute bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex flex-col text-white w-full h-full border-[#202222] border rounded-[9px] pt-6 pr-6 pb-6 pl-6 relative items-center justify-center" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13));">
      <div class="blur-[60px] transform z-[1] rounded-full absolute top-0 left-0 opacity-40 w-[220px] h-[45px] rotate-[40deg]" style="background-color: rgb(99, 102, 241); box-shadow: rgb(99, 102, 241) 0px 0px 50px; transform-origin: 10% center"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="M12 22v-5" class=""></path>
          <path d="M9 8V2" class=""></path>
          <path d="M15 8V2" class=""></path>
          <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">Audio Sync</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Match visuals to audio with intelligent detection</p>
      <div class="absolute w-full h-[1px]" style="top: 10%; background: linear-gradient(90deg, #6366f1 30%, #1d1f1f 70%);"></div>
      <div class="absolute w-[1px] h-full" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%);"></div>
      <div class="absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>

  <!-- Feature 5 -->
  <div class="w-full h-[250px] rounded-[10px] p-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d);">
    <div class="w-[5px] aspect-square absolute rounded-full z-[2] bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex relative flex-col text-white w-full h-full border-[#202222] border rounded-[9px] items-center justify-center p-6" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13));">
      <div class="absolute blur-[60px] transform top-0 left-0 opacity-40 w-[220px] h-[45px] rounded-full rotate-[40deg]" style="background-color: #6366f1; box-shadow: 0 0 50px #6366f1; transform-origin: 10%"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">Frame Editor</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Edit individual frames with precision tools</p>
      <div class="absolute w-full h-[1px]" style="top: 10%; background: linear-gradient(90deg, #6366f1 30%, #1d1f1f 70%);"></div>
      <div class="absolute w-[1px] h-full" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%);"></div>
      <div class="absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>

  <!-- Feature 6 -->
  <div class="w-full h-[250px] rounded-[10px] p-[1px] relative" style="background: radial-gradient(circle 230px at 0% 0%, #6366f1, #0c0d0d);">
    <div class="w-[5px] aspect-square absolute rounded-full z-[2] bg-indigo-400" style="box-shadow: rgb(99, 102, 241) 0px 0px 10px; right: 10%; top: 10%;"></div>
    <div class="z-[1] flex flex-col text-white w-full h-full border-[#202222] border rounded-[9px] pt-6 pr-6 pb-6 pl-6 relative items-center justify-center" style="background: radial-gradient(280px at 0% 0%, rgb(68, 68, 68), rgb(12, 13, 13));">
      <div class="blur-[60px] transform opacity-40 w-[220px] h-[45px] z-[1] rounded-full absolute top-0 left-0 rotate-[40deg]" style="background-color: #6366f1; box-shadow: 0 0 50px #6366f1; transform-origin: 10%"></div>
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl ring-1 mb-4 z-10 bg-indigo-500/10 ring-indigo-500/20" style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-indigo-400" style="">
          <path d="M17 10c.7-.7 1.69 0 2.5 0a2.5 2.5 0 1 0 0-5 .5.5 0 0 1-.5-.5 2.5 2.5 0 1 0-5 0c0 .81.7 1.8 0 2.5l-7 7c-.7.7-1.69 0-2.5 0a2.5 2.5 0 0 0 0 5c.28 0 .5.22.5.5a2.5 2.5 0 1 0 5 0c0-.81-.7-1.8 0-2.5Z" class=""></path>
        </svg>
      </div>
      <h3 class="text-xl font-medium text-white mb-2 tracking-tight z-10" style="">API Access</h3>
      <p class="text-sm text-zinc-400 leading-relaxed text-center z-10" style="">Integrate Vortex with our powerful API</p>
      <div class="absolute w-full h-[1px]" style="top: 10%; background: linear-gradient(90deg, #6366f1 30%, #1d1f1f 70%);"></div>
      <div class="absolute w-[1px] h-full" style="left: 10%; background: linear-gradient(180deg, #6366f1 30%, #222424 70%);"></div>
      <div class="absolute w-full h-[1px] bg-[#2c2c2c]" style="bottom: 10%;"></div>
      <div class="absolute w-[1px] h-full bg-[#2c2c2c]" style="right: 10%;"></div>
    </div>
  </div>
</div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center gap-2 h-11 px-6 rounded-full bg-white text-black text-sm font-medium hover:bg-zinc-200 transition-all shadow-lg hover:shadow-xl" style="">
        View All Features
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </button>
    </div>
  </div>
</section>