AI Email Hero Section with Animated CTA

<section class="sm:px-6 sm:pt-16 lg:px-8 lg:pt-20 lg:mt-40 max-w-7xl mt-40 mr-auto ml-auto pt-16 pr-4 pl-4 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1)">
  <div class="grid gap-8 lg:gap-12 lg:grid-cols-12 items-center">
    <div class="lg:col-span-7 space-y-6">
      <div class="[animation:fadeSlideIn_0.5s_ease-out_0.2s_both] flex items-center gap-3">
        <div class="border-gradient">
          <div class="gradient-border-inner px-4 py-2">
            <span class="text-xs font-medium tracking-wider text-lime-300 uppercase flex items-center gap-2">
                AI-Powered Email
                <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-3 h-3">
                  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path>
                </svg>
              </span>
          </div>
        </div>
        <div class="h-px bg-gradient-to-r from-lime-300/50 to-transparent flex-1"></div>
      </div>
      <h1 class="[animation:fadeSlideIn_0.5s_ease-out_0.3s_both] text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-[0.95] tracking-tight">
        Email that understands you through
        <span class="bg-gradient-to-r from-lime-300 to-emerald-300 bg-clip-text text-transparent"> AI intelligence</span>
      </h1>
    </div>
    <div class="lg:col-span-5 space-y-6 lg:space-y-8">
      <div class="[animation:fadeSlideIn_0.5s_ease-out_0.4s_both] bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all duration-300">
        <p class="text-slate-300 leading-relaxed text-sm sm:text-base mb-4">
          Transform your inbox into a productivity powerhouse. Sendo uses advanced AI to prioritize, summarize, and
          draft responses—giving you hours back every week.
        </p>
        <details class="text-slate-400 text-sm leading-relaxed">
          <summary class="cursor-pointer font-medium mb-2 select-none hover:text-lime-300 transition-colors">Read more
            details</summary>
          <p class="mt-2">
            Our AI learns your communication style, identifies urgent messages, filters noise, and helps you maintain
            inbox zero effortlessly.
          </p>
        </details>
      </div>
      <div class="[animation:fadeSlideIn_0.5s_ease-out_0.5s_both] flex flex-col sm:flex-row gap-4">
        <button type="button" class="button">
            <div class="points_wrapper">
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
              <i class="point"></i>
            </div>
            <span class="inner">
              Get Started Free
              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                <path d="M5 12h14" class=""></path>
                <path d="m12 5 7 7-7 7" class=""></path>
              </svg>
            </span>
            <style>
              .button {
                cursor: pointer;
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                transition: all 0.25s ease;
                background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(132, 204, 22, 0.8) 0%, rgba(132, 204, 22, 0) 100%), linear-gradient(0deg, #65a30d, #65a30d);
                border-radius: 0.75rem;
                border: none;
                outline: none;
                padding: 12px 18px;
                min-height: 48px;
                min-width: 102px;
              }
              .button::before, .button::after {
                content: "";
                position: absolute;
                transition: all 0.5s ease-in-out;
                z-index: 0;
              }
              .button::before {
                inset: 1px;
                background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
                border-radius: calc(0.75rem - 1px);
              }
              .button::after {
                inset: 2px;
                background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(132, 204, 22, 0.8) 0%, rgba(132, 204, 22, 0) 100%), linear-gradient(0deg, #65a30d, #65a30d);
                border-radius: calc(0.75rem - 2px);
              }
              .button:active { transform: scale(0.95); }
              .points_wrapper {
                overflow: hidden;
                width: 100%;
                height: 100%;
                pointer-events: none;
                position: absolute;
                z-index: 1;
              }
              .points_wrapper .point {
                bottom: -10px;
                position: absolute;
                animation: floating-points infinite ease-in-out;
                pointer-events: none;
                width: 2px;
                height: 2px;
                background-color: #fff;
                border-radius: 9999px;
              }
              @keyframes floating-points {
                0% { transform: translateY(0); }
                85% { opacity: 0; }
                100% { transform: translateY(-55px); opacity: 0; }
              }
              .points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
              .points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
              .points_wrapper .point:nth-child(3) { left: 25%; opacity: 0.8; animation-duration: 2.2s; animation-delay: 0.1s; }
              .points_wrapper .point:nth-child(4) { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
              .points_wrapper .point:nth-child(5) { left: 50%; opacity: 1; animation-duration: 1.9s; }
              .points_wrapper .point:nth-child(6) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }
              .points_wrapper .point:nth-child(7) { left: 88%; opacity: 0.9; animation-duration: 2.2s; animation-delay: 0.2s; }
              .points_wrapper .point:nth-child(8) { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
              .points_wrapper .point:nth-child(9) { left: 98%; opacity: 0.6; animation-duration: 2.6s; animation-delay: 0.1s; }
              .points_wrapper .point:nth-child(10) { left: 65%; opacity: 1; animation-duration: 2.5s; animation-delay: 0.2s; }
              .inner {
                z-index: 2;
                gap: 6px;
                position: relative;
                width: 100%;
                color: white;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.5;
                transition: color 0.2s ease-in-out;
              }
              .inner svg.icon {
                width: 18px;
                height: 18px;
                transition: transform 0.3s ease;
                stroke: white;
                fill: none;
              }
              .button:hover svg.icon { transform: translateX(2px); }
              .button:hover svg.icon path { animation: dash 0.8s linear forwards; }
              @keyframes dash {
                0% { stroke-dasharray: 0, 20; stroke-dashoffset: 0; }
                50% { stroke-dasharray: 10, 10; stroke-dashoffset: -5; }
                100% { stroke-dasharray: 20, 0; stroke-dashoffset: -10; }
              }
            </style>
          </button>
        <button class="group inline-flex hover:border-lime-400 hover:text-lime-400 transition-all duration-300 text-sm font-medium text-slate-300 border-slate-600 border rounded-xl pt-3 pr-6 pb-3 pl-6 gap-x-3 gap-y-3 items-center justify-center">
            <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">
              <circle cx="12" cy="12" r="10" class=""></circle>
              <path d="m10 8 6 4-6 4Z" class=""></path>
            </svg>
            <span class="">Watch Demo</span>
          </button>
      </div>
    </div>
  </div>
</section>