Загрузка...
Секция с сеткой из 4 карточек для телеметрии оборудования. Tailwind CSS, интерактивные sci-fi графики и элементы управления для мониторинга в реальном времени.
<section class="lg:py-32 z-10 w-full pt-24 pb-24 relative">
<!-- Section Header -->
<div class="md:mb-24 flex flex-col items-center gap-6 text-center max-w-4xl mr-auto mb-16 ml-auto pr-6 pl-6 relative">
<div class="w-full flex justify-between items-end border-b border-zinc-800/80 pb-3 mb-2 relative">
<div
class="absolute bottom-[-1px] left-1/2 -translate-x-1/2 w-1/3 h-[1px] bg-gradient-to-r from-transparent via-orange-500/30 to-transparent">
</div>
<div class="flex items-center gap-3">
<div
class="flex items-center justify-center w-5 h-5 rounded-full bg-zinc-900 border border-black shadow-[inset_0_1px_2px_rgba(255,255,255,0.1)]">
<div class="w-1.5 h-1.5 bg-zinc-600 rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,1)] relative">
<div class="absolute inset-0 m-auto w-full h-[0.5px] bg-black rotate-45"></div>
</div>
</div>
<span class="text-[10px] font-mono text-zinc-500 tracking-[0.2em] uppercase font-bold" style="text-shadow: 0 1px 1px rgba(0,0,0,1);">
MOD. 01 // CORE
</span>
</div>
<div
class="flex items-center gap-2 px-2.5 py-1 rounded-[3px] bg-zinc-950 border border-black shadow-[inset_0_2px_4px_rgba(0,0,0,1),_0_1px_1px_rgba(255,255,255,0.05)]">
<div
class="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_6px_#22c55e,inset_0_1px_1px_rgba(255,255,255,0.8)] animate-pulse">
</div>
<span class="text-[9px] font-mono text-green-400 tracking-widest uppercase font-bold" style="text-shadow: 0 0 4px rgba(34,197,94,0.4);">
Sys.Online
</span>
</div>
</div>
<div class="absolute left-6 top-1/2 -translate-y-1/2 w-4 h-4 border-l-2 border-t-2 border-zinc-700/30"></div>
<div class="absolute right-6 top-1/2 -translate-y-1/2 w-4 h-4 border-r-2 border-b-2 border-zinc-700/30"></div>
<div class="relative z-10 flex flex-col gap-5 mt-2">
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-full bg-zinc-600/5 blur-[80px] rounded-full pointer-events-none z-0">
</div>
<h2
class="relative z-10 md:text-5xl lg:text-6xl text-4xl font-medium tracking-tight font-dm-sans text-transparent bg-clip-text bg-gradient-to-b from-white via-zinc-200 to-zinc-500"
style="filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));">
Precision Architecture. <br class="hidden sm:block">Real-World Performance.
</h2>
<p class="relative z-10 text-base md:text-lg text-zinc-400 font-sans max-w-2xl mx-auto leading-relaxed tracking-tight"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">
Every component engineered for clarity, responsiveness, and absolute control.
</p>
</div>
<div class="mt-4 flex items-center justify-center gap-4 opacity-50">
<div
class="w-16 h-[2px] bg-zinc-950 rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)]">
</div>
<div class="flex gap-1.5">
<div class="w-1.5 h-2.5 bg-zinc-700 skew-x-[-20deg] shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
</div>
<div class="w-1.5 h-2.5 bg-zinc-700 skew-x-[-20deg] shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
</div>
<div class="w-1.5 h-2.5 bg-zinc-700 skew-x-[-20deg] shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
</div>
</div>
<span class="text-[9px] font-mono text-zinc-500 tracking-[0.3em] font-bold" style="text-shadow: 0 1px 1px rgba(255,255,255,0.1), 0 -1px 1px rgba(0,0,0,1);">
MK-IV.009
</span>
<div
class="w-16 h-[2px] bg-zinc-950 rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)]">
</div>
</div>
</div>
<!-- Hardware Grid -->
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8 max-w-7xl mr-auto ml-auto pr-6 pl-6 gap-x-6 gap-y-6">
<div
class="flex flex-col group transition-all duration-500 hover:-translate-y-1 w-full rounded-3xl pt-6 pr-6 pb-6 pl-6 relative overflow-hidden"
style="background: linear-gradient(to bottom, #3f3f46 0%, #27272a 8%, #18181b 100%);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9),
inset 0 2px 2px rgba(255, 255, 255, 0.15),
inset 0 -2px 4px rgba(0, 0, 0, 0.8),
inset 0 0 10px rgba(0,0,0,0.5);
border: 1px solid #111;">
<div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay"
style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<div class="relative z-10 flex justify-between items-center mb-6 pl-1 pr-1 mt-1">
<span class="text-xs font-bold text-zinc-600 uppercase tracking-widest font-sans" style="text-shadow: 0px 1px 1px rgba(255,255,255,0.1), 0px -1px 1px rgba(0,0,0,0.8);">
SYS.01
</span>
<div class="relative w-4 h-4 rounded-full bg-zinc-900 flex items-center justify-center"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.1);">
<div
class="relative w-2.5 h-2.5 rounded-full bg-orange-950 border border-black transition-colors duration-500"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-orange-300 to-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="box-shadow: 0 0 8px #f97316, inset 0 1px 2px rgba(255,255,255,0.8);">
</div>
</div>
</div>
</div>
<div
class="relative z-10 mb-8 w-full h-32 bg-zinc-950 rounded-md overflow-hidden flex flex-col justify-end mt-2 cursor-crosshair border border-black"
style="box-shadow: inset 0 8px 16px rgba(0,0,0,1), inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);">
<div class="absolute inset-0 pointer-events-none z-30"
style="background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 40%);">
</div>
<div class="absolute inset-0 pointer-events-none z-20"
style="background: linear-gradient(rgba(255,255,255,0.03) 50%, transparent 50%); background-size: 100% 4px;">
</div>
<div class="absolute inset-0 opacity-20 z-0"
style="background-image: linear-gradient(rgba(249,115,22,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.4) 1px, transparent 1px); background-size: 10px 10px; background-position: -1px -1px;">
</div>
<div
class="absolute top-0 bottom-0 left-0 w-16 bg-gradient-to-r from-transparent via-orange-500/20 to-transparent -translate-x-full group-hover:translate-x-[400px] transition-transform duration-[2000ms] ease-in-out z-10 pointer-events-none">
</div>
<svg class="absolute inset-0 w-full h-full z-10 pt-2" preserveAspectRatio="none" viewBox="0 0 100 40">
<defs class="">
<linearGradient id="trace-gradient-sys01" x1="0%" y1="0%" x2="0%" y2="100%" class="">
<stop offset="0%" stop-color="#f97316" stop-opacity="0.3" class=""></stop>
<stop offset="100%" stop-color="#f97316" stop-opacity="0.0" class=""></stop>
</linearGradient>
</defs>
<path
d="M0,25 L5,26 L10,24 L15,18 L18,28 L22,8 L26,32 L30,22 L35,24 L45,21 L55,23 L60,19 L65,12 L70,25 L80,22 L90,26 L100,24 L100,40 L0,40 Z"
fill="url(#trace-gradient-sys01)" class=""></path>
<path
d="M0,25 L5,26 L10,24 L15,18 L18,28 L22,8 L26,32 L30,22 L35,24 L45,21 L55,23 L60,19 L65,12 L70,25 L80,22 L90,26 L100,24"
fill="none" stroke="#f97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="opacity-80 group-hover:opacity-100 transition-opacity duration-500"
style="filter: drop-shadow(0 0 4px rgba(249,115,22,1));"></path>
<path d="M0,28 L10,25 L15,22 L20,29 L25,12 L30,26 L35,23 L45,25 L55,20 L60,24 L65,16 L75,26 L85,24 L100,28"
fill="none" stroke="#ea580c" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"
class="opacity-30"></path>
</svg>
<div class="absolute top-2 left-2 z-20 flex flex-col">
<span class="text-[9px] font-bold text-orange-500/80 uppercase tracking-widest font-sans drop-shadow-[0_0_2px_rgba(249,115,22,0.8)]">Stream.IO</span>
</div>
<div class="absolute top-2 right-2 z-20 flex items-center gap-1.5">
<div class="w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_6px_#f97316] animate-pulse"></div>
<span class="text-[10px] font-mono font-medium text-orange-100 tracking-wider drop-shadow-[0_0_2px_rgba(249,115,22,0.8)]">LIVE</span>
</div>
<div
class="absolute bottom-0 inset-x-0 h-6 bg-black/80 border-t border-orange-500/30 backdrop-blur-md z-20 flex items-center justify-between px-3">
<div class="flex items-center gap-2">
<span class="text-[8px] text-zinc-500 font-mono">RX</span>
<span class="text-[10px] text-zinc-300 font-mono group-hover:text-zinc-100 transition-colors">48.2k</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[8px] text-zinc-500 font-mono">TX</span>
<span class="text-[10px] text-zinc-300 font-mono group-hover:text-zinc-100 transition-colors">12.1k</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[8px] text-zinc-500 font-mono">ERR</span>
<span class="text-[10px] text-green-400 font-mono drop-shadow-[0_0_3px_#22c55e]">0.00</span>
</div>
</div>
</div>
<div class="relative z-10 px-1 mt-auto">
<h3 class="text-base text-zinc-200 font-medium tracking-tight mb-1"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">Real-Time Monitoring</h3>
<p class="text-sm text-zinc-400 font-sans leading-relaxed">Continuous telemetry stream with
sub-millisecond latency.</p>
</div>
</div>
<div
class="flex flex-col group transition-all duration-500 hover:-translate-y-1 overflow-hidden delay-[50ms] w-full rounded-3xl pt-6 pr-6 pb-6 pl-6 relative"
style="background: linear-gradient(to bottom, #3f3f46 0%, #27272a 8%, #18181b 100%);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9),
inset 0 2px 2px rgba(255, 255, 255, 0.15),
inset 0 -2px 4px rgba(0, 0, 0, 0.8),
inset 0 0 10px rgba(0,0,0,0.5);
border: 1px solid #111">
<div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay"
style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<div class="relative z-10 flex justify-between items-center mb-6 pl-1 pr-1 mt-1">
<span class="text-xs font-bold text-zinc-600 uppercase tracking-widest font-sans" style="text-shadow: 0px 1px 1px rgba(255,255,255,0.1), 0px -1px 1px rgba(0,0,0,0.8);">
RTE.02
</span>
<div class="relative w-4 h-4 rounded-full bg-zinc-900 flex items-center justify-center"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.1);">
<div
class="relative w-2.5 h-2.5 rounded-full bg-orange-950 border border-black transition-colors duration-500"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-orange-300 to-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="box-shadow: 0 0 8px #f97316, inset 0 1px 2px rgba(255,255,255,0.8);"></div>
</div>
</div>
</div>
<div class="relative z-10 mb-8 flex gap-3 h-32 mt-2">
<div
class="w-9 h-full bg-zinc-900 rounded-[4px] border border-[#18181b] flex flex-col items-center justify-between py-2 px-1 z-10"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.05);">
<span class="text-[7px] font-bold text-zinc-500 tracking-wider" style="text-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 -1px 0 rgba(0,0,0,0.8);">LOAD</span>
<div
class="w-full flex-1 mt-2 mb-1 flex flex-col justify-between gap-[2px] bg-zinc-950 p-1 rounded-[2px] shadow-inner border border-black">
<div
class="w-full flex-1 rounded-[1px] bg-red-950 border border-red-900/30 transition-all duration-100 group-hover:bg-red-500 group-hover:border-red-400 group-hover:shadow-[0_0_6px_#ef4444] delay-0 group-hover:delay-[400ms]">
</div>
<div
class="w-full flex-1 rounded-[1px] bg-orange-950 border border-orange-900/30 transition-all duration-100 group-hover:bg-orange-500 group-hover:border-orange-400 group-hover:shadow-[0_0_6px_#f97316] delay-0 group-hover:delay-[300ms]">
</div>
<div
class="w-full flex-1 rounded-[1px] bg-orange-950 border border-orange-900/30 transition-all duration-100 group-hover:bg-orange-500 group-hover:border-orange-400 group-hover:shadow-[0_0_6px_#f97316] delay-0 group-hover:delay-[200ms]">
</div>
<div
class="w-full flex-1 rounded-[1px] bg-green-950 border border-green-900/30 transition-all duration-100 group-hover:bg-green-500 group-hover:border-green-400 group-hover:shadow-[0_0_6px_#22c55e] delay-0 group-hover:delay-[100ms]">
</div>
<div class="w-full flex-1 rounded-[1px] bg-green-500 border border-green-400 shadow-[0_0_6px_#22c55e]">
</div>
</div>
</div>
<div class="flex-1 h-full bg-zinc-950 rounded-[4px] relative border border-black overflow-hidden z-10"
style="box-shadow: inset 0 8px 16px rgba(0,0,0,1), inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);">
<div class="absolute inset-0 pointer-events-none z-30"
style="background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 40%);">
</div>
<div class="absolute inset-0 opacity-20 z-0"
style="background-image: linear-gradient(rgba(249,115,22,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.4) 1px, transparent 1px); background-size: 8px 8px; background-position: -1px -1px;">
</div>
<div
class="absolute left-1/2 -translate-x-1/2 top-2 flex items-center gap-1 z-20 transition-opacity duration-300 delay-0 group-hover:delay-[400ms] opacity-100 group-hover:opacity-30">
<div class="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_4px_#22c55e]"></div>
<span class="text-[7px] font-mono text-green-400 tracking-wider font-bold">RTE.A ACTIVE</span>
</div>
<div
class="absolute left-1/2 -translate-x-1/2 bottom-2 flex items-center gap-1 z-20 transition-opacity duration-300 delay-0 group-hover:delay-[400ms] opacity-30 group-hover:opacity-100">
<div class="w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_4px_#f97316]"></div>
<span class="text-[7px] font-mono text-orange-400 tracking-wider font-bold">RTE.B ACTIVE</span>
</div>
<svg class="absolute inset-0 w-full h-full z-10" viewBox="0 0 200 100" preserveAspectRatio="none">
<path d="M 20 50 L 60 50 L 90 25 L 160 25" fill="none" stroke="#27272a" stroke-width="3"
stroke-linejoin="round" class=""></path>
<path d="M 60 50 L 90 75 L 160 75" fill="none" stroke="#27272a" stroke-width="3" stroke-linejoin="round"
class=""></path>
<path
class="transition-opacity duration-300 delay-0 group-hover:delay-[400ms] opacity-100 group-hover:opacity-0"
d="M 20 50 L 60 50 L 90 25 L 160 25" fill="none" stroke="#22c55e" stroke-width="3" stroke-linejoin="round"
style="filter: drop-shadow(0 0 5px rgba(34,197,94,0.8));"></path>
<path
class="transition-opacity duration-300 delay-0 group-hover:delay-[400ms] opacity-0 group-hover:opacity-100"
d="M 20 50 L 60 50 L 90 75 L 160 75" fill="none" stroke="#f97316" stroke-width="3" stroke-linejoin="round"
style="filter: drop-shadow(0 0 5px rgba(249,115,22,0.8));"></path>
<circle cx="20" cy="50" r="4" fill="#27272a" stroke="#71717a" stroke-width="2" class="">
</circle>
<circle cx="60" cy="50" r="2.5" fill="#71717a" class=""></circle>
<circle cx="160" cy="25" r="4" fill="#27272a" stroke="#71717a" stroke-width="2" class=""></circle>
<circle cx="160" cy="75" r="4" fill="#27272a" stroke="#71717a" stroke-width="2" class=""></circle>
</svg>
</div>
</div>
<div class="z-10 mt-auto pr-1 pl-1 relative">
<h3 class="text-base text-zinc-200 font-medium tracking-tight mb-1"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">Adaptive Routing</h3>
<p class="text-sm text-zinc-400 font-sans leading-relaxed">Dynamic signal pathing based on continuous
load
thresholds.</p>
</div>
</div>
<div
class="flex flex-col group transition-all duration-500 hover:-translate-y-1 overflow-hidden delay-[100ms] w-full rounded-3xl pt-6 pr-6 pb-6 pl-6 relative"
style="background: linear-gradient(to bottom, #3f3f46 0%, #27272a 8%, #18181b 100%);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9),
inset 0 2px 2px rgba(255, 255, 255, 0.15),
inset 0 -2px 4px rgba(0, 0, 0, 0.8),
inset 0 0 10px rgba(0,0,0,0.5);
border: 1px solid #111">
<div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay"
style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<div class="relative z-10 flex justify-between items-center mb-6 pl-1 pr-1 mt-1">
<span class="text-xs font-bold text-zinc-600 uppercase tracking-widest font-sans" style="text-shadow: 0px 1px 1px rgba(255,255,255,0.1), 0px -1px 1px rgba(0,0,0,0.8);">
FAL.03
</span>
<div class="relative w-4 h-4 rounded-full bg-zinc-900 flex items-center justify-center"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.1);">
<div
class="relative w-2.5 h-2.5 rounded-full bg-orange-950 border border-black transition-colors duration-500"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-orange-300 to-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="box-shadow: 0 0 8px #f97316, inset 0 1px 2px rgba(255,255,255,0.8);"></div>
</div>
</div>
</div>
<div
class="relative z-10 mb-8 w-full h-32 bg-[#0a0a0c] rounded-[4px] border border-black overflow-hidden mt-2 cursor-crosshair"
style="box-shadow: inset 0 8px 16px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.05);">
<div class="absolute inset-0 opacity-[0.25] pointer-events-none"
style="background-image: repeating-linear-gradient(45deg, #000 0, #000 2px, transparent 2px, transparent 6px);">
</div>
<div
class="absolute top-1/2 left-[5rem] right-[5rem] h-3 bg-zinc-950 border-t border-b border-black -translate-y-1/2 z-0"
style="box-shadow: inset 0 4px 8px rgba(0,0,0,1);">
<div class="absolute top-[3px] bottom-[3px] left-1 right-1 flex flex-col justify-between opacity-40">
<div class="w-full h-[1px] bg-orange-600 shadow-[0_0_2px_#ea580c]"></div>
<div class="w-full h-[1px] bg-orange-600 shadow-[0_0_2px_#ea580c]"></div>
</div>
</div>
<div
class="absolute top-1/2 left-[4.8rem] w-9 h-7 -translate-y-1/2 rounded-[2px] transition-all duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:left-[calc(100%-7.05rem)] z-10 flex flex-col justify-center items-center gap-[3px]"
style="background: linear-gradient(to bottom, #71717a 0%, #3f3f46 100%); border: 1px solid #18181b; box-shadow: 0 4px 12px rgba(0,0,0,1), inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.4);">
<div class="flex gap-4">
<div
class="w-1.5 h-1.5 rounded-full bg-zinc-900 shadow-[inset_0_1px_2px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.2)]">
</div>
<div
class="w-1.5 h-1.5 rounded-full bg-zinc-900 shadow-[inset_0_1px_2px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.2)]">
</div>
</div>
<div class="w-5 h-[1.5px] bg-black opacity-80 shadow-[0_1px_0_rgba(255,255,255,0.2)]"></div>
<div class="w-5 h-[1.5px] bg-black opacity-80 shadow-[0_1px_0_rgba(255,255,255,0.2)]"></div>
</div>
<div
class="absolute left-3 top-2 bottom-2 w-16 rounded-[3px] flex flex-col items-center p-1.5 z-20 transition-all duration-300"
style="background: linear-gradient(to bottom, #52525b 0%, #3f3f46 10%, #27272a 100%); border: 1px solid #18181b; box-shadow: 6px 0 12px -4px rgba(0,0,0,0.9), inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.8);">
<div class="w-full h-1.5 bg-zinc-900 rounded-[1px] shadow-[inset_0_2px_2px_rgba(0,0,0,1)] mb-2">
</div>
<div
class="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e,inset_0_1px_2px_rgba(255,255,255,0.8)] border border-black/50 transition-colors duration-200 delay-0 group-hover:bg-red-600 group-hover:shadow-[0_0_8px_#dc2626,inset_0_1px_2px_rgba(255,255,255,0.8)] group-hover:delay-100 mb-2">
</div>
<div
class="w-full h-5 bg-zinc-950 rounded-[2px] border border-black flex items-center justify-center shadow-[inset_0_2px_4px_rgba(0,0,0,1)] relative overflow-hidden mb-auto">
<div class="absolute inset-0 opacity-20 pointer-events-none"
style="background-image: linear-gradient(rgba(255,255,255,0.03) 50%, transparent 50%); background-size: 100% 2px;">
</div>
<span class="text-[9px] font-mono font-bold text-green-400 drop-shadow-[0_0_2px_rgba(34,197,94,0.8)] transition-colors duration-200 delay-0 group-hover:text-red-500 group-hover:drop-shadow-[0_0_2px_rgba(220,38,38,0.8)] group-hover:delay-100 tracking-wider">PRI</span>
</div>
<div class="w-full flex-1 flex flex-col justify-end gap-[3px] pb-1 opacity-60">
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
</div>
</div>
<div
class="absolute right-3 top-2 bottom-2 w-16 rounded-[3px] flex flex-col items-center p-1.5 z-20 transition-all duration-300"
style="background: linear-gradient(to bottom, #52525b 0%, #3f3f46 10%, #27272a 100%); border: 1px solid #18181b; box-shadow: -6px 0 12px -4px rgba(0,0,0,0.9), inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.8);">
<div class="w-full h-1.5 bg-zinc-900 rounded-[1px] shadow-[inset_0_2px_2px_rgba(0,0,0,1)] mb-2">
</div>
<div
class="w-3 h-3 rounded-full bg-yellow-600/30 shadow-[inset_0_1px_2px_rgba(0,0,0,0.8)] border border-black/50 transition-colors duration-200 delay-0 group-hover:bg-green-500 group-hover:shadow-[0_0_8px_#22c55e,inset_0_1px_2px_rgba(255,255,255,0.8)] group-hover:delay-[300ms] mb-2">
</div>
<div
class="w-full h-5 bg-zinc-950 rounded-[2px] border border-black flex items-center justify-center shadow-[inset_0_2px_4px_rgba(0,0,0,1)] relative overflow-hidden mb-auto">
<div class="absolute inset-0 opacity-20 pointer-events-none"
style="background-image: linear-gradient(rgba(255,255,255,0.03) 50%, transparent 50%); background-size: 100% 2px;">
</div>
<span class="text-[9px] font-mono font-bold text-yellow-600/40 transition-colors duration-200 delay-0 group-hover:text-green-400 group-hover:drop-shadow-[0_0_2px_rgba(34,197,94,0.8)] group-hover:delay-[300ms] tracking-wider">SEC</span>
</div>
<div class="w-full flex-1 flex flex-col justify-end gap-[3px] pb-1 opacity-60">
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
<div
class="w-full h-[2px] bg-zinc-950 shadow-[inset_0_1px_1px_rgba(0,0,0,1),_0_1px_0_rgba(255,255,255,0.1)] rounded-full">
</div>
</div>
</div>
</div>
<div class="relative z-10 px-1 mt-auto">
<h3 class="text-base text-zinc-200 font-medium tracking-tight mb-1"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">Fail-Safe Redundancy</h3>
<p class="text-sm text-zinc-400 font-sans leading-relaxed">Automatic hardware failover protocols
ensuring zero
data loss.</p>
</div>
</div>
<div
class="flex flex-col group transition-all duration-500 hover:-translate-y-1 overflow-hidden delay-[150ms] w-full rounded-3xl pt-6 pr-6 pb-6 pl-6 relative"
style="background: linear-gradient(to bottom, #3f3f46 0%, #27272a 8%, #18181b 100%);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9),
inset 0 2px 2px rgba(255, 255, 255, 0.15),
inset 0 -2px 4px rgba(0, 0, 0, 0.8),
inset 0 0 10px rgba(0,0,0,0.5);
border: 1px solid #111">
<div class="absolute inset-0 opacity-[0.15] pointer-events-none mix-blend-overlay"
style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<div class="relative z-10 flex justify-between items-center mb-6 pl-1 pr-1 mt-1">
<span class="text-xs font-bold text-zinc-600 uppercase tracking-widest font-sans" style="text-shadow: 0px 1px 1px rgba(255,255,255,0.1), 0px -1px 1px rgba(0,0,0,0.8);">
AI.04
</span>
<div class="relative w-4 h-4 rounded-full bg-zinc-900 flex items-center justify-center"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), 0 1px 1px rgba(255,255,255,0.1);">
<div
class="relative w-2.5 h-2.5 rounded-full bg-orange-950 border border-black transition-colors duration-500"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);">
<div
class="absolute inset-0 rounded-full bg-gradient-to-br from-orange-300 to-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style="box-shadow: 0 0 8px #f97316, inset 0 1px 2px rgba(255,255,255,0.8);"></div>
</div>
</div>
</div>
<div class="relative z-10 mb-8 flex justify-center items-center h-32 mt-2">
<div class="relative w-28 h-28 rounded-full flex items-center justify-center" style="background: linear-gradient(145deg, #52525b 0%, #3f3f46 20%, #27272a 100%);
box-shadow: 0 10px 20px -5px rgba(0,0,0,0.9), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.8);
border: 1px solid #18181b;">
<svg class="absolute inset-0 w-full h-full opacity-40" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#000" stroke-width="2.5" stroke-dasharray="2 4" class="">
</circle>
<circle cx="50" cy="50" r="45" fill="none" stroke="#fff" stroke-width="1" stroke-dasharray="2 4"
opacity="0.5" transform="translate(0, 1)" class=""></circle>
</svg>
<div
class="relative w-[4.5rem] h-[4.5rem] rounded-full bg-[#0a0a0c] border border-black overflow-hidden flex items-center justify-center cursor-crosshair"
style="box-shadow: inset 0 8px 16px rgba(0,0,0,1), inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);">
<div class="absolute inset-0 pointer-events-none z-30"
style="background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 40%, transparent 40%);">
</div>
<div class="absolute inset-0 z-0 opacity-20"
style="background-image: radial-gradient(circle, rgba(249,115,22,0.6) 1px, transparent 1px); background-size: 3px 3px;">
</div>
<div class="absolute inset-[4px] rounded-full border border-orange-500/20 z-10"></div>
<div class="absolute inset-[14px] rounded-full border border-orange-500/20 z-10"></div>
<div class="absolute top-0 bottom-0 left-1/2 w-[1px] bg-orange-500/30 z-10"></div>
<div class="absolute left-0 right-0 top-1/2 h-[1px] bg-orange-500/30 z-10"></div>
<div
class="absolute inset-0 origin-center opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10 delay-100 animate-spin"
style="background: conic-gradient(from 0deg, transparent 60%, rgba(249,115,22,0.1) 90%, rgba(249,115,22,0.9) 100%); animation-duration: 2s;">
</div>
<div class="absolute w-1.5 h-1.5 rounded-full bg-orange-500 z-20 shadow-[0_0_6px_#f97316]">
</div>
<div
class="absolute top-3 left-3 w-1 h-1 rounded-full bg-orange-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20 shadow-[0_0_4px_#fdba74]">
</div>
<div
class="absolute bottom-4 left-6 w-1.5 h-1.5 rounded-full bg-orange-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20 shadow-[0_0_6px_#f97316]">
</div>
<div
class="absolute top-5 right-3 w-1 h-1 rounded-full bg-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-20 shadow-[0_0_6px_#4ade80]">
</div>
<div
class="absolute top-3 right-1 w-5 h-5 border-[1.5px] border-green-500/0 group-hover:border-green-500/80 rounded-[1px] transition-all duration-300 z-20 scale-150 group-hover:scale-100 opacity-0 group-hover:opacity-100"
style="box-shadow: rgba(74, 222, 128, 0.2) 0px 0px 4px inset;"></div>
</div>
<div
class="absolute -right-4 -bottom-1 w-12 h-5 bg-zinc-950 rounded-[2px] border border-black flex items-center justify-center z-20"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), 0 4px 6px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);">
<span class="text-[8px] font-mono font-bold text-zinc-700 group-hover:text-green-400 transition-colors duration-300 delay-0 group-hover:delay-[1200ms] tracking-wider" style="text-shadow: 0 0 4px rgba(74,222,128,0);">
CAL.OK
</span>
</div>
<div
class="absolute -right-2 bottom-4 w-4 h-[2px] bg-zinc-800 border-t border-b border-black shadow-[0_1px_1px_rgba(255,255,255,0.05)] z-10 -rotate-[15deg]">
</div>
</div>
</div>
<div class="z-10 mt-auto pr-1 pl-1 relative">
<h3 class="text-base text-zinc-200 font-medium tracking-tight mb-1"
style="text-shadow: 0 1px 2px rgba(0,0,0,0.8);">Intelligent Automation</h3>
<p class="text-sm text-zinc-400 font-sans leading-relaxed">Algorithmic calibration of environmental
variables on
the fly.</p>
</div>
</div>
</div>
</section>