<section class="relative py-20 scan-lines">
<div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
<div class="absolute inset-0 opacity-20">
<div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
<div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
<div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
</div>
<div class="container px-4 mx-auto relative z-10">
<div class="flex flex-wrap items-center -mx-4 -mb-8">
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center group">
<div class="relative hologram-effect p-8 rounded-lg border border-blue-400 border-opacity-30 hover:border-opacity-60 transform hover:scale-105 transition-all duration-300 animate-float bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 bg-opacity-5">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5 rounded-lg group-hover:opacity-10 transition-opacity duration-300"></div>
<div class="relative z-10">
<svg class="mx-auto mb-4 text-blue-400 group-hover:text-purple-500 transition-colors duration-300 animate-pulse" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
<circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
</svg>
<h3 class="mb-2 text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent group-hover:animate-glitch">600 000 000</h3>
<p class="text-lg text-gray-400 tracking-wider">PROTOCOL EXECUTIONS</p>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center group">
<div class="relative hologram-effect p-8 rounded-lg border border-purple-500 border-opacity-30 hover:border-opacity-60 transform hover:scale-105 transition-all duration-300 animate-float bg-gradient-to-br from-purple-500 via-green-400 to-blue-400 bg-opacity-5" style="animation-delay: 0.5s">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 via-green-400 to-blue-400 opacity-5 rounded-lg group-hover:opacity-10 transition-opacity duration-300"></div>
<div class="relative z-10">
<svg class="mx-auto mb-4 text-purple-500 group-hover:text-green-400 transition-colors duration-300 animate-pulse" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
<circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
</svg>
<h3 class="mb-2 text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-purple-500 via-green-400 to-blue-400 bg-clip-text text-transparent group-hover:animate-glitch">600 000 000</h3>
<p class="text-lg text-gray-400 tracking-wider">NEURAL NETWORKS</p>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center group">
<div class="relative hologram-effect p-8 rounded-lg border border-green-400 border-opacity-30 hover:border-opacity-60 transform hover:scale-105 transition-all duration-300 animate-float bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 bg-opacity-5" style="animation-delay: 1s">
<div class="absolute inset-0 bg-gradient-to-br from-green-400 via-blue-400 to-purple-500 opacity-5 rounded-lg group-hover:opacity-10 transition-opacity duration-300"></div>
<div class="relative z-10">
<svg class="mx-auto mb-4 text-green-400 group-hover:text-blue-400 transition-colors duration-300 animate-pulse" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
<circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
</svg>
<h3 class="mb-2 text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-green-400 via-blue-400 to-purple-500 bg-clip-text text-transparent group-hover:animate-glitch">600 000 000</h3>
<p class="text-lg text-gray-400 tracking-wider">DATA STREAMS</p>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8 text-center group">
<div class="relative hologram-effect p-8 rounded-lg border border-blue-400 border-opacity-30 hover:border-opacity-60 transform hover:scale-105 transition-all duration-300 animate-float bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 bg-opacity-5" style="animation-delay: 1.5s">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-green-400 to-purple-500 opacity-5 rounded-lg group-hover:opacity-10 transition-opacity duration-300"></div>
<div class="relative z-10">
<svg class="mx-auto mb-4 text-blue-400 group-hover:text-purple-500 transition-colors duration-300 animate-pulse" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
<circle cx="24" cy="24" r="23.5" stroke="currentColor"></circle>
</svg>
<h3 class="mb-2 text-2xl font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-green-400 to-purple-500 bg-clip-text text-transparent group-hover:animate-glitch">600 000 000</h3>
<p class="text-lg text-gray-400 tracking-wider">QUANTUM BITS</p>
</div>
<div class="absolute top-4 right-4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
<div class="absolute bottom-4 left-4 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-75"></div>
</div>
</div>
</div>
</div>
</section>