Glassmorphic AI Analytics Feature Card

<div class="feature-card glass glow bg-gray-900/60 border-[#00fffb]/20 border rounded-2xl pt-6 pr-6 pb-6 pl-6" style="grid-area: stack; translate: var(--_offset) 0; order: var(--_order); z-index: var(--_order); scale: var(--_scale); opacity: var(--_opacity); cursor: grab; user-select: none; transform-style: preserve-3d; height: 32rem; --_order: var(--_1-order); --_scale: var(--_1-scale); --_opacity: var(--_1-opacity); --_offset: var(--_1-offset);">
      <div class="flex flex-col h-full">
        <div class="flex items-center gap-3 mb-6">
          <div class="w-12 h-12 bg-teal-500/20 rounded-xl flex items-center justify-center relative">
            <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" class="w-6 h-6 text-teal-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="M8 12l2 2 4-4"></path></svg>
            <div class="absolute -top-1 -right-1 w-3 h-3 bg-teal-500 rounded-full animate-pulse"></div>
          </div>
          <div class="">
            <span class="text-xs uppercase tracking-wide text-gray-300 font-medium font-sans">AI Analytics</span>
            <h3 class="text-xl font-medium font-bricolage font-light tracking-tighter">Smart Insights</h3>
          </div>
        </div>
        
        <p class="text-gray-300 mb-6 font-sans text-sm">
          Advanced machine learning algorithms analyze market trends and provide personalized investment recommendations in real-time.
        </p>

        <!-- Feature Highlights -->
        <div class="space-y-3 mb-6">
          <div class="flex gap-3 bg-black/40 border-neutral-50/10 border rounded-lg pt-3 pr-3 pb-3 pl-3 items-center">
            <div class="w-8 h-8 bg-teal-500/20 rounded-lg flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-teal-400"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
            </div>
            <div class="flex-1">
              <div class="text-sm font-medium text-white">Predictive Analysis</div>
              <div class="text-xs text-gray-400 font-sans">Market trend forecasting</div>
            </div>
          </div>

          <div class="flex gap-3 bg-black/40 border-neutral-50/10 border rounded-lg pt-3 pr-3 pb-3 pl-3 items-center">
            <div class="w-8 h-8 bg-teal-500/20 rounded-lg flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-teal-400"><path d="M12 2v20"></path><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
            </div>
            <div class="flex-1">
              <div class="text-sm font-medium text-white font-sans">Risk Assessment</div>
              <div class="text-xs text-gray-400 font-sans">Portfolio optimization</div>
            </div>
          </div>
        </div>

        <!-- Stats -->
        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="text-center bg-black/40 border-neutral-50/10 border rounded-lg pt-3 pr-3 pb-3 pl-3">
            <div class="text-lg font-semibold text-teal-400 font-sans">94.7%</div>
            <div class="text-xs text-gray-400 font-sans">Accuracy Rate</div>
          </div>
          <div class="text-center bg-black/40 border-neutral-50/10 border rounded-lg pt-3 pr-3 pb-3 pl-3">
            <div class="text-lg font-semibold text-teal-400 font-sans">&lt;1ms</div>
            <div class="text-xs text-gray-400 font-sans">Response Time</div>
          </div>
        </div>

        <button class="w-full hover:bg-teal-500/30 transition-colors flex gap-2 font-medium text-neutral-950 bg-[#00fffb] rounded-xl pt-3 pr-4 pb-3 pl-4 items-center justify-center">
          
          Explore AI Analytics
        </button>
      </div>
    </div>