<!-- 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">
<h1 class="text-4xl md:text-6xl font-bold mb-6 max-w-5xl">
<?php
// Use ACF fields if present, else fallback to new core messaging
$title = get_field('hero_title');
echo $title ? wp_kses_post($title) : 'Protecting Data and Critical Infrastructure in the Post-Quantum Era';
?>
</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl text-slate-300">
<?php
$subtitle = get_field('hero_subtitle');
echo $subtitle
? wp_kses_post($subtitle)
: '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">
<a class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg" href="/contact">
Schedule a Demo
</a>
<a href="/solutions" 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>

<!-- 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>
</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">
<!-- Step 1 -->
<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>

<!-- Step 2 -->
<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>

<!-- Step 3 -->
<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" class="relative flex flex-col items-center justify-center h-[700px] text-white">
<div id="layer1" class="pyramid-layer w-[90%] md:w-[75%] h-48 opacity-0 scale-90">
<div class="pyramid-face">
<h3>SCRM</h3>
</div>
</div>
<div id="layer2" class="pyramid-layer w-[70%] md:w-[55%] h-44 opacity-0 scale-90">
<div class="pyramid-face">
<h3>M2M</h3>
</div>
</div>
<div id="layer3" class="pyramid-layer w-[50%] md:w-[35%] h-40 opacity-0 scale-90">
<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">
<!-- H2M -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" 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>

<!-- M2M -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" 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>

<!-- SCRM -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="300">

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cyberus Labs - Next-Level Cybersecurity Solutions</title>
+    <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>
@@ -24,16 +24,45 @@
     <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 {
@@ -46,36 +75,65 @@
         
         .card-gradient {
             background: linear-gradient(145deg, #1e293b, #0f172a);
-            border: 1px solid rgba(255, 255, 255, 0.05);
+            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);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            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;
         }
         
-        .border-orange-600 {
-            border-color: var(--primary-orange);
+        .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;
         }
         
-        .text-orange-500 {
-            color: var(--primary-orange);
+        .btn-primary:hover::before {
+            left: 100%;
         }
         
         .btn-primary:hover {
             transform: scale(1.05);
-            box-shadow: 0 10px 25px -5px rgba(230, 81, 3, 0.4);
+            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 {
@@ -92,236 +150,363 @@
         .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/50 to-transparent z-10"></div>
+        <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">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6 max-w-4xl">
-								<span class="md:text-7xl">Security</span><br>that follows the data
-            </h1>
-            <p class="text-xl md:text-2xl mb-10 max-w-3xl text-slate-300">
-                   Protecting Data and Critical Infrastructure
-in the <span class="text-orange-600"> Post Quantum Era</span>
-			</p>
-            <div class="flex flex-col sm:flex-row gap-4">
-                <button class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg">
-                    <a href="/contact">Schedule a Demo</a>
-                </button>
-                <a href="/solutions" 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 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>
 
-    <!-- Value Proposition Section -->
-    <section class="py-20 px-4 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">Why Choose Cyberus Labs?</h2>
+    <!-- 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-center">
-            <div data-aos="fade-right">
-                <h3 class="text-2xl font-bold mb-6">The Password Problem</h3>
-                <p class="text-lg text-slate-300 mb-6">
-                    80% of data breaches involve stolen or weak credentials. Traditional passwords are the weakest link in cybersecurity, vulnerable to phishing, brute force, and social engineering attacks.
-                </p>
-                <p class="text-lg text-slate-300">
-                    Cyberus Labs eliminates this vulnerability entirely by removing static credentials from your security infrastructure.
-                </p>
+
+        <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 class="relative" data-aos="fade-left">
-                <div class="card-gradient p-8 rounded-2xl lg:border-l-4 border-orange-600">
-                    <div class="flex items-start mb-6">
-                        <div class="tech-icon mr-4">
-                            <i data-feather="shield" class="text-white"></i>
-                        </div>
-                        <div>
-                            <h4 class="text-xl font-bold">Passwordless by Design</h4>
-                            <p class="text-slate-400 mt-2">No passwords, no credentials to steal</p>
-                        </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 class="flex items-start mb-6">
-                        <div class="tech-icon mr-4">
-                            <i data-feather="zap" class="text-white"></i>
-                        </div>
-                        <div>
-                            <h4 class="text-xl font-bold">Instant Authentication</h4>
-                            <p class="text-slate-400 mt-2">Verify identity in milliseconds</p>
-                        </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 class="flex items-start">
-                        <div class="tech-icon mr-4">
-                            <i data-feather="globe" class="text-white"></i>
-                        </div>
-                        <div>
-                            <h4 class="text-xl font-bold">Global Reach</h4>
-                            <p class="text-slate-400 mt-2">Silicon Valley expertise, worldwide deployment</p>
-                        </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>
 
-    <!-- Technology Overview -->
+    <!-- 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">How Our Technology Works</h2>
+                <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">
-                    A three-tier approach combining cutting-edge authentication, lightweight encryption, and predictive AI
+                    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">
-                <!-- Card 1 -->
-                <div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
+                <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="volume-2" class="text-white text-2xl"></i>
+                        <i data-feather="user-check" class="text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-2xl font-bold mb-4">Audio-Token Authentication</h3>
+                    <h3 class="text-2xl font-bold mb-4">Human-to-Machine (H2M) Security</h3>
                     <p class="text-slate-300 mb-4">
-                        One-time ultrasonic signals verify user identity and service legitimacy within milliseconds.
+                        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>No reusable credentials</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
-                            <span>Works offline via sound</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
-                            <span>Multifactor verification</span>
-                        </li>
+                        <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>
-                
-                <!-- Card 2 -->
-                <div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
+
+                <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">Lightweight IoT Encryption</h3>
+                    <h3 class="text-2xl font-bold mb-4">Machine-to-Machine (M2M) Security</h3>
                     <p class="text-slate-300 mb-4">
-                        Protect even the smallest devices with our efficient cryptographic protocol.
+                        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 needed</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>
+                        <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>
-                
-                <!-- Card 3 -->
-                <div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
+
+                <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="activity" class="text-white text-2xl"></i>
+                        <i data-feather="truck" class="text-white text-2xl"></i>
                     </div>
-                    <h3 class="text-2xl font-bold mb-4">AI-Driven Self-Healing</h3>
+                    <h3 class="text-2xl font-bold mb-4">Supply Chain Risk Management (SCRM)</h3>
                     <p class="text-slate-300 mb-4">
-                        Predictive analytics detect threats and automatically repair vulnerabilities.
+                        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>Real-time anomaly detection</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
-                            <span>Automatic threat isolation</span>
-                        </li>
-                        <li class="flex items-start">
-                            <i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
-                            <span>Predictive maintenance</span>
-                        </li>
+                        <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>
 
-    <!-- Key Differentiators -->
+    <!-- WHY WE'RE HERE -->
     <section class="py-20 px-4 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">What Sets Us Apart</h2>
+        <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="grid grid-cols-1 lg:grid-cols-2 gap-12">
-            <div class="space-y-8" data-aos="fade-right">
-                <div class="flex">
-                    <div class="mr-6">
-                        <div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
-                            <i data-feather="lock" class="text-white"></i>
-                        </div>
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-bold mb-3">Passwordless Security by Design</h3>
-                        <p class="text-slate-300">
-                            We don't just add security layers - we eliminate the fundamental vulnerability. No passwords mean no credential theft, making 80% of attacks impossible.
-                        </p>
-                    </div>
-                </div>
-                
-                <div class="flex">
-                    <div class="mr-6">
-                        <div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
-                            <i data-feather="award" class="text-white"></i>
-                        </div>
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-bold mb-3">Patented Audio-Token Technology</h3>
-                        <p class="text-slate-300">
-                            Our unique ultrasonic authentication method is protected by patents and offers seamless multifactor security without user friction.
-                        </p>
+        <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 class="flex">
-                    <div class="mr-6">
-                        <div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
-                            <i data-feather="zap" class="text-white"></i>
-                        </div>
-                    </div>
-                    <div>
-                        <h3 class="text-2xl font-bold mb-3">Lightweight IoT Encryption</h3>
-                        <p class="text-slate-300">
-                            Secure even the simplest IoT devices without performance impact. Our protocol runs efficiently on low-power hardware.
-                        </p>
-                    </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 class="flex items-center justify-center" data-aos="fade-left">
-                <div class="relative">
-<!--                     <div class="absolute -inset-4 bg-orange-600 rounded-2xl opacity-5 blur"></div> -->
-                    <img src="/wp-content/uploads/2025/09/main-page-what-we-do-1.png" alt="Cyberus Labs Technology" class="relative rounded-2xl shadow-2xl">
-                </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>
 
-    <!-- Partnerships & Certifications -->
+    <!-- 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">
@@ -333,49 +518,40 @@ in the <span class="text-orange-600"> Post Quantum Era</span>
             </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>
 
-  <!-- Horizon 2020 -->
-  <div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl" 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>
-
-  <!-- ECM magazine feature -->
-  <div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl" data-aos="fade-up" data-aos-delay="300">
-    <img src="/wp-content/uploads/2025/09/european-cybersec-market.png"
-         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="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>
 
-  <!-- KI Study 2020 -->
-  <div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl" data-aos="fade-up" data-aos-delay="400">
-    <img src="/wp-content/uploads/2025/09/cybersecurity-call.png"
-         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="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>
 
-  <!-- ResearchGate / Cybpher tile -->
-<div class="flex flex-col items-center justify-center p-6 card-gradient rounded-xl" 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">
-    <!-- simple "RG" mark so you don't need an external asset -->
-    <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="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 aos-init aos-animate hovered-element" data-aos="fade-up">
+            <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>
@@ -387,35 +563,33 @@ in the <span class="text-orange-600"> Post Quantum Era</span>
                         </p>
                     </div>
                     <div class="md:w-1/3 flex justify-center">
-                        <a class="bg-transparent border-2  px-8 py-4 rounded-lg font-semibold text-lg">
+                        <span class="bg-transparent border-2 px-8 py-4 rounded-lg font-semibold text-lg glow-pulse">
                             EU HORIZON 2020<br>APPROVED
-                        </a>
+                        </span>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- CTA 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 Eliminate Password Vulnerabilities?</h2>
+            <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 next-level cybersecurity. Contact us for a personalized consultation or demo.
+                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">
-                <button class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg">
-                   
-					  <a href="/contant">Contact Sales</a>
-                </button>
-                <button class="bg-transparent border-2 border-orange-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-orange-600 transition">
-                   <a href="/solutions">Explore Solutions</a>
-                </button>
+                <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">
@@ -444,7 +618,7 @@ in the <span class="text-orange-600"> Post Quantum Era</span>
                         <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="#" class="hover:text-orange-500">AI Threat Detection</a></li>
+                        <li><a href="ai-threat-detection.html" class="hover:text-orange-500">AI Threat Detection</a></li>
                     </ul>
                 </div>
                 
@@ -452,7 +626,6 @@ in the <span class="text-orange-600"> Post Quantum Era</span>
                     <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="#" class="hover:text-orange-500">Careers</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>
@@ -465,32 +638,6 @@ in the <span class="text-orange-600"> Post Quantum Era</span>
         </div>
     </footer>
 
-    <script>
-        // Initialize Vanta.js
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0xe65103,
-            color2: 0x1e293b,
-            backgroundColor: 0x0f172a,
-            size: 1.00,
-            lineColor: 0xe65103
-        });
-        
-        // Initialize AOS
-        AOS.init({
-            duration: 1000,
-            once: true
-        });
-        
-        // Initialize Feather Icons
-        feather.replace();
-    </script>
+    <script src="script.js"></script>
 </body>
-</html>
+</html>

script.js

@@ -0,0 +1,253 @@
+// Initialize GSAP plugins
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+// Custom Cursor
+const cursorDot = document.querySelector('.cursor-dot');
+const cursorRing = document.querySelector('.cursor-ring');
+
+document.addEventListener('mousemove', (e) => {
+    gsap.to(cursorDot, {
+        x: e.clientX - 4,
+        y: e.clientY - 4,
+        duration: 0.1
+    });
+    gsap.to(cursorRing, {
+        x: e.clientX - 12,
+        y: e.clientY - 12,
+        duration: 0.2
+    });
+});
+
+// Particles System
+function createParticles() {
+    const container = document.getElementById('particles-container');
+    const particleCount = 50;
+    
+    for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.className = 'particle';
+        
+        gsap.set(particle, {
+            x: Math.random() * window.innerWidth,
+            y: Math.random() * window.innerHeight,
+            opacity: 0
+        });
+        
+        container.appendChild(particle);
+        
+        gsap.timeline({ repeat: -1 })
+            .to(particle, {
+                opacity: Math.random() * 0.5 + 0.2,
+                duration: 0.5,
+                delay: Math.random() * 2
+            })
+            .to(particle, {
+                y: -100,
+                x: `+=${Math.random() * 100 - 50}`,
+                duration: Math.random() * 10 + 10,
+                ease: "none"
+            }, "-=0.5")
+            .to(particle, {
+                opacity: 0,
+                duration: 0.5
+            })
+            .set(particle, {
+                y: window.innerHeight + 50,
+                x: Math.random() * window.innerWidth
+            });
+    }
+}
+
+// Typewriter Effect
+function initTypewriter() {
+    const text = "Protecting Data and Critical Infrastructure in the Post-Quantum Era";
+    const element = document.getElementById('typewriter-text');
+    let i = 0;
+    
+    function typeChar() {
+        if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+            setTimeout(typeChar, 60);
+        }
+    }
+    
+    typeChar();
+}
+
+// Pyramid Scroll Animation
+function initPyramidAnimation() {
+    const tl = gsap.timeline({
+        scrollTrigger: {
+            trigger: "#story-pyramid",
+            start: "top top",
+            end: "bottom bottom",
+            scrub: 1,
+            pin: true,
+            pinSpacing: true
+        }
+    });
+
+    // Animate pyramid layers
+    gsap.set("#layer1, #layer2, #layer3", { opacity: 0, scale: 0.8, y: 100 });
+    
+    tl.to("#layer1", {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        duration: 1,
+        ease: "power3.out"
+    })
+    .to("#layer2", {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        duration: 1,
+        ease: "power3.out"
+    }, "-=0.5")
+    .to("#layer3", {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        duration: 1,
+        ease: "power3.out"
+    }, "-=0.5");
+
+    // Narrative steps opacity
+    const steps = document.querySelectorAll('.narrative-step');
+    steps.forEach((step, index) => {
+        ScrollTrigger.create({
+            trigger: index === 0 ? "#layer1" : index === 1 ? "#layer2" : "#layer3",
+            start: "top center",
+            end: "bottom center",
+            onEnter: () => {
+                steps.forEach(s => s.classList.add('opacity-50'));
+                step.classList.remove('opacity-50');
+                step.classList.add('scale-105');
+            },
+            onLeaveBack: () => {
+                if (index > 0) {
+                    steps[index - 1].classList.remove('opacity-50');
+                    step.classList.add('opacity-50');
+                }
+            }
+        });
+    });
+}
+
+// Parallax Elements
+function initParallax() {
+    gsap.utils.toArray('.parallax-element').forEach(el => {
+        gsap.to(el, {
+            y: -100,
+            ease: "none",
+            scrollTrigger: {
+                trigger: el,
+                start: "top bottom",
+                end: "bottom top",
+                scrub: true
+            }
+        });
+    });
+}
+
+// Enhanced Card Animations
+function initCardAnimations() {
+    gsap.utils.toArray('.card-gradient').forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            gsap.to(card, {
+                rotateY: 5,
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        });
+        
+        card.addEventListener('mouseleave', () => {
+            gsap.to(card, {
+                rotateY: 0,
+                duration: 0.3,
+                ease: "power2.out"
+            });
+        });
+    });
+}
+
+// Initialize AOS
+function initAOS() {
+    AOS.init({
+        duration: 1000,
+        once: true,
+        offset: 100
+    });
+}
+
+// Initialize Vanta.js
+function initVanta() {
+    VANTA.GLOBE({
+        el: "#vanta-bg",
+        mouseControls: true,
+        touchControls: true,
+        gyroControls: false,
+        minHeight: 200.00,
+        minWidth: 200.00,
+        scale: 1.00,
+        scaleMobile: 1.00,
+        color: 0xe65103,
+        color2: 0x1e293b,
+        backgroundColor: 0x0f172a,
+        size: 1.00,
+        lineColor: 0xe65103
+    });
+}
+
+// Initialize Feather Icons
+function initFeather() {
+    feather.replace();
+}
+
+// Master Init Function
+document.addEventListener('DOMContentLoaded', () => {
+    initTypewriter();
+    initVanta();
+    initAOS();
+    initFeather();
+    createParticles();
+    initPyramidAnimation();
+    initParallax();
+    initCardAnimations();
+    
+    // Stagger fade-in animations
+    gsap.utils.toArray('.fade-in-up').forEach((el, index) => {
+        gsap.to(el, {
+            opacity: 1,
+            y: 0,
+            duration: 0.8,
+            delay: index * 0.2,
+            ease: "power3.out"
+        });
+    });
+    
+    // Add glow effect to all buttons on hover
+    document.querySelectorAll('a, button').forEach(el => {
+        el.addEventListener('mouseenter', () => {
+            gsap.to(el, {
+                scale: 1.02,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+        });
+        
+        el.addEventListener('mouseleave', () => {
+            gsap.to(el, {
+                scale: 1,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+        });
+    });
+});
+
+// Refresh ScrollTrigger on resize
+window.addEventListener('resize', () => {
+    ScrollTrigger.refresh();
+});

style.css

@@ -1,28 +1,166 @@
+/* Additional custom styles for enhanced animations */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    --glow-intensity: 0.8;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #1e293b;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #e65103, #ff6d00);
+    border-radius: 5px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #e65103;
 }
+
+/* Smooth Scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Selection Color */
+::selection {
+    background: rgba(230, 81, 3, 0.3);
+    color: #f5f5f5;
+}
+
+/* Loading Animation */
+#loading-overlay {
+    position: fixed;
+    inset: 0;
+    background: #0f172a;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.loader {
+    width: 50px;
+    height: 50px;
+    border: 3px solid #1e293b;
+    border-top-color: #e65103;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* 3D Tilt Effect for Cards */
+.card-gradient {
+    transform-style: preserve-3d;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.card-gradient:hover {
+    transform: rotateY(5deg) rotateX(5deg) translateY(-10px);
+}
+
+/* Glowing Text Effect */
+.text-glow {
+    text-shadow: 0 0 10px rgba(230, 81, 3, calc(var(--glow-intensity) * 0.5));
+}
+
+/* Gradient Border Animation */
+.animated-border {
+    position: relative;
+}
+
+.animated-border::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(45deg, #e65103, #ff6d00, #ff8c42, #e65103);
+    border-radius: inherit;
+    z-index: -1;
+    animation: border-animation 3s linear infinite;
+    background-size: 400% 400%;
+}
+
+@keyframes border-animation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Enhanced Button Hover Effects */
+.btn-primary, .btn-secondary {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.btn-primary::after, .btn-secondary::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
+}
+
+.btn-primary:hover::after, .btn-secondary:hover::after {
+    transform: translateX(100%);
+}
+
+/* Staggered Animation Delays */
+.delay-100 { animation-delay: 0.1s; }
+.delay-200 { animation-delay: 0.2s; }
+.delay-300 { animation-delay: 0.3s; }
+.delay-400 { animation-delay: 0.4s; }
+.delay-500 { animation-delay: 0.5s; }
+
+/* Gradient Text Animation */
+@keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.animated-gradient-text {
+    background: linear-gradient(90deg, #e65103, #ff8c42, #e65103);
+    background-size: 200% 200%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradient-shift 3s ease infinite;
+}
+
+/* Responsive Adjustments for Pyramid */
+@media (max-width: 768px) {
+    .pyramid-face h3 {
+        font-size: 1.5rem;
+    }
+    
+    #pyramid-container {
+        height: 500px;
+    }
+}
+
+/* Glow Pulse Variation */
+.glow-pulse-slow {
+    animation: glow-pulse 4s ease-in-out infinite alternate;
+}
+
+.glow-pulse-fast {
+    animation: glow-pulse 1s ease-in-out infinite alternate;
+}
+
+/* Tech Icon Hover Enhancement */
+.tech-icon {
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.tech-icon:hover {
+    transform: scale(1.2) rotate(15deg);
+    filter: drop-shadow(0 0 15px rgba(230, 81, 3, var(--glow-intensity)));
+}