Hugging Face's logo

Spaces:
fancycashew2
/
cyberuslabs
Running

App Files Community
cyberuslabs / index.html
fancycashew2's picture
fancycashew2
<!-- HERO -->
ffcbd60 verified
Raw
History Blame Contribute Delete
34.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Protecting Data and Critical Infrastructure in the Post Quantum Era - Cyberus Labs</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 'primary-orange': '#e65103',
 'smoke-white': '#f5f5f5'
 }
 }
 }
 }
 </script>
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/SplitText.min.js"></script>
 <style>
 :root {
 --primary-orange: #e65103;
 --smoke-white: #f5f5f5;
 --glow-intensity: 0.8;
 }
body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background-color: #0f172a;
 color: var(--smoke-white);
 overflow-x: hidden;
 cursor: none;
 }
.cursor-dot {
 width: 8px;
 height: 8px;
 background: var(--primary-orange);
 border-radius: 50%;
 position: fixed;
 pointer-events: none;
 z-index: 9999;
 transition: transform 0.1s ease;
 }
.cursor-ring {
 width: 24px;
 height: 24px;
 border: 2px solid var(--primary-orange);
 border-radius: 50%;
 position: fixed;
 pointer-events: none;
 z-index: 9998;
 transition: all 0.2s ease;
 opacity: 0.5;
 }
.bg-orange-600 {
 background-color: var(--primary-orange);
 }
.hero-bg {
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 }
.card-gradient {
 background: linear-gradient(145deg, #1e293b, #0f172a);
 border: 1px solid rgba(230, 81, 3, 0.1);
 transition: all 0.3s ease;
 }
.card-gradient:hover {
 border-color: rgba(230, 81, 3, 0.3);
 box-shadow: 0 0 30px rgba(230, 81, 3, calc(var(--glow-intensity) * 0.3));
 }
.feature-card:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(230, 81, 3, calc(var(--glow-intensity) * 0.4));
 }
.tech-icon {
 background: linear-gradient(135deg, var(--primary-orange) 0%, #ff8c42 100%);
 padding: 1rem;
 border-radius: 1rem;
 transition: all 0.3s ease;
 }
.tech-icon:hover {
 transform: scale(1.1) rotate(5deg);
 box-shadow: 0 0 20px rgba(230, 81, 3, var(--glow-intensity));
 }
.btn-primary {
 background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d00 100%);
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }
.btn-primary::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition: left 0.5s;
 }
.btn-primary:hover::before {
 left: 100%;
 }
.btn-primary:hover {
 transform: scale(1.05);
 box-shadow: 0 0 25px rgba(230, 81, 3, var(--glow-intensity));
 }
.border-orange-600 {
 border-color: var(--primary-orange);
 }
.text-orange-500 {
 color: var(--primary-orange);
 }
.section-divider {
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--primary-orange), transparent);
 }
.text-gradient {
 background: linear-gradient(90deg, var(--primary-orange), #ff8c42);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 }
.hover\:bg-orange-600:hover {
 background-color: var(--primary-orange);
 }
.hero-content {
 background: rgba(15, 23, 42, 0.85);
 backdrop-filter: blur(10px);
 border-radius: 16px;
 padding: 2rem;
 max-width: 90%;
 border: 1px solid rgba(230, 81, 3, 0.2);
 box-shadow: 0 0 50px rgba(230, 81, 3, 0.1);
 }
.pyramid-container {
 perspective: 1200px;
 perspective-origin: center center;
 }
.pyramid-layer {
 position: relative;
 margin: 0 auto;
 transform-style: preserve-3d;
 transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }
.pyramid-face {
 position: absolute;
 width: 100%;
 height: 100%;
 background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
 border: 2px solid rgba(230, 81, 3, 0.4);
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 transform: rotateX(45deg) translateZ(20px);
 box-shadow: inset 0 0 30px rgba(230, 81, 3, 0.2), 0 0 40px rgba(230, 81, 3, 0.3);
 }
.pyramid-face h3 {
 font-size: 2.5rem;
 font-weight: bold;
 background: linear-gradient(90deg, var(--primary-orange), #ff8c42);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: 0 0 20px rgba(230, 81, 3, 0.5);
 }
.pyramid-layer.active {
 transform: scale(1.05);
 }
.pyramid-layer.active .pyramid-face {
 border-color: rgba(230, 81, 3, 0.8);
 box-shadow: inset 0 0 40px rgba(230, 81, 3, 0.4), 0 0 60px rgba(230, 81, 3, 0.6);
 }
.particle {
 position: absolute;
 width: 4px;
 height: 4px;
 background: var(--primary-orange);
 border-radius: 50%;
 pointer-events: none;
 opacity: 0;
 }
.typewriter-cursor {
 display: inline-block;
 width: 3px;
 height: 1em;
 background: var(--primary-orange);
 animation: blink 1s infinite;
 }
@keyframes blink {
 0%, 50% { opacity: 1; }
 51%, 100% { opacity: 0; }
 }
.glow-pulse {
 animation: glow-pulse 2s ease-in-out infinite alternate;
 }
@keyframes glow-pulse {
 from { box-shadow: 0 0 20px rgba(230, 81, 3, calc(var(--glow-intensity) * 0.4)); }
 to { box-shadow: 0 0 40px rgba(230, 81, 3, calc(var(--glow-intensity) * 0.8)); }
 }
.floating {
 animation: floating 3s ease-in-out infinite;
 }
@keyframes floating {
 0%, 100% { transform: translateY(0px); }
 50% { transform: translateY(-20px); }
 }
.fade-in-up {
 opacity: 0;
 transform: translateY(40px);
 }
.parallax-element {
 will-change: transform;
 }
 </style>
</head>
<body class="bg-slate-900 text-slate-100">
 <!-- Custom Cursor -->
 <div class="cursor-dot"></div>
 <div class="cursor-ring"></div>
<!-- Particles Container -->
 <div id="particles-container" class="fixed inset-0 pointer-events-none z-0"></div>
<!-- HERO -->
 <div id="vanta-bg" class="relative h-screen w-full overflow-hidden">
 <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-transparent z-10"></div>
<div class="relative z-20 flex flex-col items-center justify-center h-full text-center px-4">
 <div class="hero-content glow-pulse">
 <h1 class="text-4xl md:text-6xl font-bold mb-6 max-w-5xl">
 <span id="typewriter-text"></span><span class="typewriter-cursor"></span>
 </h1>
 <p class="text-xl md:text-2xl mb-10 max-w-3xl text-slate-300 fade-in-up">
 Security that follows the data. Cyberus builds resilience for the post-perimeter, post-Quantum world by protecting what truly matters — information itself.
 </p>
 <div class="flex flex-col sm:flex-row gap-4 fade-in-up">
 <a class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg" href="/contact.html">
 Schedule a Demo
 </a>
 <a href="/solutions.html" class="bg-transparent border-2 border-orange-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-orange-600 transition text-center">
 Explore Solutions
 </a>
 </div>
 </div>
 </div>
 </div>
<!-- STORY / NARRATION -->
 <section class="py-20 px-4 max-w-6xl mx-auto">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Complex Problems Can Have Surprisingly Simple Solutions</h2>
 <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
 <div class="space-y-6 text-slate-300 text-lg leading-relaxed" data-aos="fade-right">
 <p>We are at an inflection point in the digital transformation journey. The convergence of <strong>IoT</strong>, <strong>OT</strong>, <strong>Quantum Computing</strong>, and <strong>AI</strong> is reshaping how industries operate.</p>
 <p>This rapid change raises a question for every organization — <strong>are we ready?</strong> Will cybersecurity be up to the task of protecting digital assets and ensuring operational reliability across this expanded digital frontier?</p>
 <p>Cybersecurity must live in the three places where cyber threats exist:</p>
 <ul class="list-disc ml-6 space-y-2">
 <li><strong>Human-to-Machine (H2M) data flows</strong></li>
 <li><strong>Machine-to-Machine (M2M) data flows</strong></li>
 <li><strong>Supply Chain (SCRM) data flows</strong></li>
 </ul>
 <p>We put strong, interconnected protection in those three places. Cyberus Labs is leading the way toward a world of <strong>secure data</strong>, <strong>secure infrastructure</strong>, and <strong>secure AI</strong> in the post-Quantum era.</p>
 </div>
<div class="relative floating" data-aos="fade-left">
 <div class="absolute -inset-8 bg-orange-600 rounded-full opacity-10 blur-3xl"></div>
 <img src="http://static.photos/technology/1200x630/42" alt="Digital Transformation" class="relative rounded-2xl shadow-2xl">
 </div>
 </div>
 </section>
<!-- SCROLL-SYNCED NARRATIVE + PYRAMID -->
 <section id="story-pyramid" class="relative py-32 bg-gradient-to-b from-slate-950 to-slate-900 overflow-hidden">
 <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 px-4 items-start">
 <!-- LEFT: Narration -->
 <div id="narrative" class="relative text-left text-slate-200 space-y-16 md:sticky md:top-40 self-start">
 <div class="narrative-step" id="narrative-step-1">
 <h2 class="text-3xl md:text-4xl font-bold text-orange-500 mb-4">The Foundation — SCRM</h2>
 <p class="text-lg text-slate-300 leading-relaxed">
 Security starts at the base — <strong>Supply Chain Resource Management (SCRM)</strong>.
This is where we ensure continuous visibility, integrity, and compliance across device and system lifecycles.
 </p>
 <ul class="list-disc ml-5 mt-3 text-slate-400 text-base space-y-1">
 <li>Device monitoring and anomaly detection</li>
 <li>Predictive AI reliability analytics</li>
 <li>Regulatory compliance and system self-healing</li>
 </ul>
 </div>
<div class="narrative-step opacity-50" id="narrative-step-2">
 <h2 class="text-3xl md:text-4xl font-bold text-orange-500 mb-4">Interconnection — M2M</h2>
 <p class="text-lg text-slate-300 leading-relaxed">
 The next layer secures <strong>Machine-to-Machine (M2M)</strong> communication.
Devices authenticate without static credentials, using lightweight post-Quantum encryption.
 </p>
 <ul class="list-disc ml-5 mt-3 text-slate-400 text-base space-y-1">
 <li>Credential-less device authentication</li>
 <li>Post-Quantum encryption</li>
 <li>Secure inter-device communication</li>
 </ul>
 </div>
<div class="narrative-step opacity-50" id="narrative-step-3">
 <h2 class="text-3xl md:text-4xl font-bold text-orange-500 mb-4">The Human Layer — H2M</h2>
 <p class="text-lg text-slate-300 leading-relaxed">
 Finally, the top of the pyramid — <strong>Human-to-Machine (H2M)</strong> Security.
Credential-less login, sonic authentication, and adaptive MFA eliminate the weakest link — passwords.
 </p>
 <ul class="list-disc ml-5 mt-3 text-slate-400 text-base space-y-1">
 <li>Credential-less login with sonic OTP</li>
 <li>Voice-based user verification</li>
 <li>Configurable MFA for any endpoint</li>
 </ul>
 </div>
 </div>
<!-- RIGHT: Pyramid Visualization -->
 <div id="pyramid-container" class="pyramid-container relative flex flex-col items-center justify-center h-[700px]">
 <div id="layer1" class="pyramid-layer absolute bottom-0 w-[90%] md:w-[75%] h-48 opacity-0">
 <div class="pyramid-face">
 <h3>SCRM</h3>
 </div>
 </div>
 <div id="layer2" class="pyramid-layer absolute bottom-44 w-[70%] md:w-[55%] h-44 opacity-0">
 <div class="pyramid-face">
 <h3>M2M</h3>
 </div>
 </div>
 <div id="layer3" class="pyramid-layer absolute bottom-80 w-[50%] md:w-[35%] h-40 opacity-0">
 <div class="pyramid-face">
 <h3>H2M</h3>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- SECURITY THAT FOLLOWS THE DATA -->
 <section class="py-20 bg-slate-800 px-4">
 <div class="max-w-7xl mx-auto">
 <div class="text-center mb-16" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-6">Security That Follows the Data — From Edge to Cloud</h2>
 <p class="text-xl max-w-3xl mx-auto text-slate-300">
 Our data-centric architecture provides end-to-end protection across IoT, OT, AI, and hybrid environments — wherever data lives or moves.
 </p>
 <div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300 hover:rotate-1" data-aos="fade-up" data-aos-delay="100">
 <div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
 <i data-feather="user-check" class="text-white text-2xl"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4">Human-to-Machine (H2M) Security</h3>
 <p class="text-slate-300 mb-4">
 Adaptive identity protection for users, devices, and edge nodes. Eliminates credential-based vulnerabilities and enforces Zero Trust seamlessly.
 </p>
 <ul class="space-y-2 text-slate-400">
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Credential-less access</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Adaptive, context-aware policies</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Zero Trust enforcement</span></li>
 </ul>
 </div>
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300 hover:-rotate-1" data-aos="fade-up" data-aos-delay="200">
 <div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
 <i data-feather="cpu" class="text-white text-2xl"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4">Machine-to-Machine (M2M) Security</h3>
 <p class="text-slate-300 mb-4">
 Lightweight encryption for constrained IoT/OT environments. Secures device-to-device communication with no dependence on hardware, OS, or protocols.
 </p>
 <ul class="space-y-2 text-slate-400">
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Runs on low-power chips</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>No hardware upgrades required</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Secure device-to-device comms</span></li>
 </ul>
 </div>
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300 hover:rotate-1" data-aos="fade-up" data-aos-delay="300">
 <div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
 <i data-feather="truck" class="text-white text-2xl"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4">Supply Chain Risk Management (SCRM)</h3>
 <p class="text-slate-300 mb-4">
 Continuous verification and cryptographic attestation across the data lifecycle. Unified visibility from code to cloud protects against tampering and third-party risk.
 </p>
 <ul class="space-y-2 text-slate-400">
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Integrity tracking end-to-end</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Partner & vendor assurance</span></li>
 <li class="flex items-start"><i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i><span>Attestation & SBOM alignment</span></li>
 </ul>
 </div>
 </div>
 </div>
 </section>
<!-- WHY WE'RE HERE -->
 <section class="py-20 px-4 max-w-7xl mx-auto">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Why We’re Here</h2>
 <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
 </div>
 <div class="max-w-4xl mx-auto text-slate-300 text-lg space-y-6 parallax-element" data-aos="fade-up">
 <p>The technologies reshaping industries — IoT, OT, Quantum Computing, and AI — have made <strong>security complexity explode</strong>. Traditional perimeter-based models can’t keep up.</p>
 <p>Security must <strong>follow the asset</strong> — agnostic, impervious, and indifferent to infrastructure or environment.</p>
 <p>At Cyberus, we designed an approach that addresses this reality: security that protects <strong>data itself</strong>, adapting to its characteristics and context — not to the systems it passes through.</p>
 </div>
 </section>
<!-- OUR EYE TO THE FUTURE -->
 <section class="py-20 bg-slate-800 px-4">
 <div class="max-w-7xl mx-auto">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Eye to the Future</h2>
 <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
 <div class="text-slate-300 text-lg space-y-6" data-aos="fade-right">
 <p>As Quantum computing advances and <strong>Agentic AI</strong> ecosystems emerge, traditional encryption and access models will become obsolete. The future demands a universal, unbreakable security layer that travels with the data — wherever it flows.</p>
 <p class="font-semibold text-slate-200">Meet <span class="text-orange-500">ELIoT Pro</span> — our living framework for data-centric, post-Quantum security. Built to secure AI prompts, Retrieval-Augmented Generation (RAG), and machine-driven ecosystems.</p>
 <div class="flex gap-4">
 <a href="/eliot-pro.html" class="btn-primary px-6 py-3 rounded-lg font-semibold">Learn More About ELIoT Pro</a>
 <a href="/solutions.html" class="border-2 border-orange-600 px-6 py-3 rounded-lg font-semibold hover:bg-orange-600 transition">Explore Solutions</a>
 </div>
 </div>
 <div data-aos="fade-left" class="relative floating">
 <div class="absolute -inset-8 bg-orange-600 rounded-full opacity-10 blur-3xl"></div>
 <img src="http://static.photos/technology/1200x630/789" alt="Cyberus Labs Technology" class="relative rounded-2xl shadow-2xl">
 </div>
 </div>
 </div>
 </section>
<!-- THE ART OF THE POSSIBLE -->
 <section class="py-20 px-4 max-w-7xl mx-auto">
 <div class="text-center mb-12" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">The Art of the Possible</h2>
 <p class="text-xl max-w-3xl mx-auto text-slate-300">Explore what becomes possible when protection follows information itself.</p>
 <div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
 <div class="card-gradient rounded-xl p-6 hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
 <h3 class="font-bold text-lg mb-2">Securing Critical Infrastructure</h3>
 <p class="text-slate-400">Operational resilience for energy, transport, and public services.</p>
 </div>
 <div class="card-gradient rounded-xl p-6 hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
 <h3 class="font-bold text-lg mb-2">Protecting Autonomous IoT Systems</h3>
 <p class="text-slate-400">Lightweight, device-agnostic controls for constrained environments.</p>
 </div>
 <div class="card-gradient rounded-xl p-6 hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
 <h3 class="font-bold text-lg mb-2">Post-Quantum Data Resilience</h3>
 <p class="text-slate-400">Data-centric protection designed for the post-Quantum horizon.</p>
 </div>
 <div class="card-gradient rounded-xl p-6 hover:scale-105 transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
 <h3 class="font-bold text-lg mb-2">AI-Agent Trust Layer</h3>
 <p class="text-slate-400">Zero Trust from data sources to AI agents and RAG pipelines.</p>
 </div>
 </div>
 </section>
<!-- TRUSTED PARTNERSHIPS -->
 <section id="trusted-partnerships" class="py-20 bg-slate-800 px-4">
 <div class="max-w-7xl mx-auto">
 <div class="text-center mb-16" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-6">Trusted Partnerships</h2>
 <p class="text-xl max-w-3xl mx-auto text-slate-300">
 Backed by industry leaders and recognized for innovation
 </p>
 <div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div>
 </div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
 <div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl hover:scale-110 transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
 <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Flag_of_Europe.svg"
 alt="EU emblem / Horizon 2020" class="w-16 h-16 mb-4 object-contain" loading="lazy">
 <span class="font-bold text-center">EU Horizon 2020 Funded</span>
 <a href="https://ec.europa.eu/info/funding-tenders/opportunities/portal/screen/opportunities/projects-details/31045243/822641" class="mt-2 text-orange-500 hover:underline text-sm">See details</a>
 </div>
<div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl hover:scale-110 transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
 <img src="http://static.photos/office/320x240/456"
 alt="European Cybersecurity Market journal" class="w-16 h-16 mb-4 object-contain" loading="lazy">
 <span class="font-bold text-center">Featured in ECM Journal</span>
 <a href="https://cyberuslabs.com/wp-content/uploads/2020/05/European-Cybersecurity-Market-Vol.1-issue-2.pdf"
 class="mt-2 text-orange-500 hover:underline text-sm">Read issue</a>
 </div>
<div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl hover:scale-110 transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
 <img src="http://static.photos/abstract/320x240/789"
 alt="KI Study 2020" class="w-16 h-16 mb-4 object-contain" loading="lazy">
 <span class="font-bold text-center">Included in KI Study</span>
 <a href="https://cyberuslabs.com/wp-content/uploads/2020/05/Cybersecurity_Call_KI_Study_2020.pdf"
 class="mt-2 text-orange-500 hover:underline text-sm">Download</a>
 </div>
<div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl hover:scale-110 transition-all duration-300" data-aos="fade-up" data-aos-delay="500">
 <div class="rounded-xl w-16 h-16 mb-4 flex items-center justify-center bg-slate-900 border border-slate-800">
 <span class="font-extrabold text-xl bg-gradient-to-br from-orange-600 to-white bg-clip-text text-transparent">RG</span>
 </div>
 <span class="font-bold text-center">ResearchGate Publication</span>
 <a href="https://www.researchgate.net/publication/369305177_An_Introduction_to_a_New_Lightweight_Encryption_Algorithm_Cybpher"
 class="mt-2 text-orange-500 hover:underline text-sm text-center">"Cybpher" lightweight encryption</a>
 </div>
 </div>
<div class="bg-slate-900 rounded-2xl p-8 md:p-12 hovered-element" data-aos="fade-up">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-2/3 mb-8 md:mb-0 md:pr-8">
 <h3 class="text-2xl font-bold mb-4 hovered-element">ELIoT Pro Project</h3>
 <p class="text-slate-300 mb-4">
 Our flagship IoT security initiative earned support from the European Union's Horizon 2020 research programme, validating the novelty and credibility of our approach.
 </p>
 <p class="text-slate-300">
 This recognition underscores our commitment to pushing the boundaries of cybersecurity innovation while meeting the highest international standards.
 </p>
 </div>
 <div class="md:w-1/3 flex justify-center">
 <span class="bg-transparent border-2 px-8 py-4 rounded-lg font-semibold text-lg glow-pulse">
 EU HORIZON 2020<br>APPROVED
 </span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- CTA -->
 <section class="py-20 px-4">
 <div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Protect What Truly Matters?</h2>
 <p class="text-xl text-slate-300 mb-10">
 Take the next step toward post-Quantum resilience. Contact us for a consultation or request a live demo.
 </p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg" href="/contact.html">
 Request Demo
 </a>
 <a class="bg-transparent border-2 border-orange-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-orange-600 transition" href="/solutions.html">
 Explore Solutions
 </a>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-slate-900 border-t border-slate-800 py-12 px-4">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div class="md:col-span-2">
 <h3 class="text-2xl font-bold mb-4">Cyberus Labs</h3>
 <p class="text-slate-400 mb-6 max-w-md">
 Next-level cybersecurity solutions designed for today's threats. Eliminating passwords, securing IoT, and predicting threats with AI.
 </p>
 <div class="flex space-x-4">
 <a href="#" class="text-slate-400 hover:text-orange-500">
 <i data-feather="twitter"></i>
 </a>
 <a href="#" class="text-slate-400 hover:text-orange-500">
 <i data-feather="linkedin"></i>
 </a>
 <a href="#" class="text-slate-400 hover:text-orange-500">
 <i data-feather="github"></i>
 </a>
 </div>
 </div>
<div>
 <h4 class="text-lg font-bold mb-4">Solutions</h4>
 <ul class="space-y-2 text-slate-400">
 <li><a href="solutions.html" class="hover:text-orange-500">Our Solutions</a></li>
 <li><a href="cyberus-key.html" class="hover:text-orange-500">Cyberus Key</a></li>
 <li><a href="eliot-pro.html" class="hover:text-orange-500">ELIoT Pro</a></li>
 <li><a href="ai-threat-detection.html" class="hover:text-orange-500">AI Threat Detection</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-bold mb-4">Company</h4>
 <ul class="space-y-2 text-slate-400">
 <li><a href="about.html" class="hover:text-orange-500">About Us</a></li>
 <li><a href="partners.html" class="hover:text-orange-500">Partners</a></li>
 <li><a href="contact.html" class="hover:text-orange-500">Contact</a></li>
 </ul>
 </div>
 </div>
<div class="border-t border-slate-800 mt-12 pt-8 text-center text-slate-500">
 <p>&copy; 2023 Cyberus Labs. All rights reserved.</p>
 </div>
 </div>
 </footer>
<script src="script.js"></script>
</body>
</html>