<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futuristic Tech Boxes</title>
<link href="https://fonts.googleapis.com" rel="stylesheet">
<style>
body { background-color: #000; font-family: 'Plus Jakarta Sans', sans-serif; color: #fff; }
/* Card Container */
.tech-box {
background: rgba(10, 10, 10, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 40px;
height: 550px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.tech-box:hover {
border-color: rgba(255, 61, 0, 0.3);
background: rgba(15, 15, 15, 0.8);
transform: translateY(-10px);
}
/* 3D Icon Area (Top Half) */
.icon-area {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Orange Glow behind icons */
.glow-aura {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 61, 0, 0.4) 0%, transparent 70%);
filter: blur(40px);
z-index: 0;
}
/* Glowing Ring (Center Card) */
.glowing-ring {
width: 110px;
height: 110px;
border: 10px solid #FF3D00;
border-radius: 50%;
box-shadow: 0 0 50px #FF3D00, inset 0 0 25px #FF3D00;
z-index: 10;
}
/* Abstract Cube (Side Cards) */
.cube-mockup {
width: 100px;
height: 120px;
background: linear-gradient(135deg, #330000 0%, #FF3D00 100%);
transform: rotateX(20deg) rotateY(20deg);
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 10;
}
.heading-white {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.desc-gray {
font-size: 14px;
color: #9ca3af;
line-height: 1.6;
font-weight: 400;
}
</style>
</head>
<body>
<!-- Box 1 -->
<h3>Hybrid Consensus Engine</h3>
<p>
Optimistic rollup speed with zk security architecture. Disputed blocks trigger immediate Halo2 zkSNARK validity proofs for guaranteed finality.
</p>
<!-- Box 2 (Center) -->
<h3>Hot-Swappable MLOps</h3>
<p>
AI models update without downtime through advanced containerization. Containerized PyTorch/TensorFlow deployment with runtime hot-swapping for continuous availability.
</p>
<!-- Box 3 -->
<h3>AI Model Marketplace</h3>
<p>
Revolutionary on-chain AI marketplace using EIP-4844 blob storage infrastructure. Publish, buy, sell neural networks with cryptographic security.
</p>
</body>
</html>
]]>
