Modern Platform Features List Section

<div class="lg:py-20 w-full max-w-6xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
  <header class="mb-12 lg:mb-16">
    <p class="text-[12px] font-medium uppercase tracking-[0.26em] text-neutral-400 mb-4">
      Platform · Built for modern teams
    </p>
    <h2 class="text-[36px] sm:text-[42px] md:text-[46px] font-semibold text-neutral-50 tracking-tight">
      Built for modern teams
    </h2>
    <p class="mt-4 text-[15px] sm:text-[16px] leading-relaxed text-neutral-400 max-w-2xl">
      Everything you need to streamline workflows, collaborate seamlessly,
      and scale your business—all in one powerful platform.
    </p>
  </header>

  <div class="space-y-0 divide-y divide-neutral-800 border-neutral-800">
    <!-- Feature 1 -->
    <article
      class="flex flex-col sm:flex-row sm:items-center lg:py-10 group hover:bg-neutral-900/60 transition-colors -mx-6 feature-article pt-8 pr-6 pb-8 pl-6 gap-x-6 gap-y-6">
      <h3 class="flex-1 text-[26px] sm:text-[30px] lg:text-[34px] font-semibold text-neutral-50 tracking-tight">
        Advanced Analytics
      </h3>
      <p class="flex-[2] text-[14px] sm:text-[15px] leading-relaxed text-neutral-400">
        Real-time dashboards, custom reports, and predictive insights that
        help you make data-driven decisions faster. Track KPIs, visualize
        trends, and export data seamlessly.
      </p>
      <button class="ml-auto inline-flex items-center justify-center h-11 w-11 flex-none rounded-full bg-gradient-to-br from-white/10 to-white/0 text-neutral-200 hover:bg-amber-300 hover:text-neutral-950 transition-all outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 feature-arrow" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </button>
    </article>

    <!-- Feature 2 -->
    <article
      class="flex flex-col sm:flex-row sm:items-center lg:py-10 group hover:bg-neutral-900/60 transition-colors -mx-6 feature-article pt-8 pr-6 pb-8 pl-6 gap-x-6 gap-y-6">
      <h3 class="flex-1 text-[26px] sm:text-[30px] lg:text-[34px] tracking-tight text-neutral-50 font-semibold">
        Team Collaboration
      </h3>
      <p class="flex-[2] text-[14px] sm:text-[15px] leading-relaxed text-neutral-400">
        Shared workspaces, threaded comments, and instant notifications
        keep everyone aligned. Assign tasks, set permissions, and manage
        projects with full visibility.
      </p>
      <button class="ml-auto inline-flex items-center justify-center h-11 w-11 flex-none rounded-full bg-gradient-to-br from-white/10 to-white/0 text-neutral-200 hover:bg-amber-300 hover:text-neutral-950 transition-all outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 feature-arrow" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </button>
    </article>

    <!-- Feature 3 -->
    <article
      class="flex flex-col sm:flex-row sm:items-center lg:py-10 group hover:bg-neutral-900/60 transition-colors -mx-6 feature-article pt-8 pr-6 pb-8 pl-6 gap-x-6 gap-y-6">
      <h3 class="flex-1 text-[26px] sm:text-[30px] lg:text-[34px] font-semibold text-neutral-50 tracking-tight">
        API &amp; Integrations
      </h3>
      <p class="flex-[2] text-[14px] sm:text-[15px] leading-relaxed text-neutral-400">
        Connect your existing tools with our robust API, webhooks, and
        pre-built integrations. Sync data across platforms and automate
        workflows without writing code.
      </p>
      <button class="ml-auto inline-flex items-center justify-center h-11 w-11 flex-none rounded-full bg-gradient-to-br from-white/10 to-white/0 text-neutral-200 hover:bg-amber-300 hover:text-neutral-950 transition-all outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 feature-arrow" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </button>
    </article>

    <!-- Feature 4 -->
    <article
      class="flex flex-col sm:flex-row sm:items-center lg:py-10 group hover:bg-neutral-900/60 transition-colors -mx-6 feature-article pt-8 pr-6 pb-8 pl-6 gap-x-6 gap-y-6">
      <h3 class="flex-1 text-[26px] sm:text-[30px] lg:text-[34px] tracking-tight text-neutral-50 font-semibold">
        Enterprise Security
      </h3>
      <p class="flex-[2] text-[14px] sm:text-[15px] leading-relaxed text-neutral-400">
        SOC 2 compliance, end-to-end encryption, SSO, and granular access
        controls. Your data stays secure with automatic backups and 99.9%
        uptime guarantee.
      </p>
      <button class="ml-auto inline-flex items-center justify-center h-11 w-11 flex-none rounded-full bg-gradient-to-br from-white/10 to-white/0 text-neutral-200 hover:bg-amber-300 hover:text-neutral-950 transition-all outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-amber-300/80 feature-arrow" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
            </button>
    </article>
  </div>
</div>