From 1e7861331699c398f8ced6e7152a085be98263fe Mon Sep 17 00:00:00 2001
From: GuidoSchenone <GuidoSchenone@cypsec.de>
Date: Mon, 8 Dec 2025 12:33:45 -0300
Subject: [PATCH] Your message here

---
 inde/SecuritySuiteCypSec.html | 236 ++++++++++++++++++++++++++++------
 1 file changed, 199 insertions(+), 37 deletions(-)

diff --git a/inde/SecuritySuiteCypSec.html b/inde/SecuritySuiteCypSec.html
index e79975b..82bb2ce 100644
--- a/inde/SecuritySuiteCypSec.html
+++ b/inde/SecuritySuiteCypSec.html
@@ -9,6 +9,20 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        .cypsec-panel {
+        background: linear-gradient(
+        135deg,
+        rgba(28, 50, 104, 0.35) 0%,
+        rgba(28, 50, 104, 0.18) 40%,
+        rgba(0, 0, 0, 0) 100%
+        );
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow:
+        0 0 32px rgba(0, 0, 0, 0.40),
+        inset 0 0 12px rgba(255, 255, 255, 0.05);
+}
         :root {
             --primary-blue: #60a5fa;
             --dark-bg: #000000;
@@ -86,6 +100,7 @@
     </div>
 </nav>
 
+
         <!-- Main Content -->
         <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
             <!-- URL Breadcrumb -->
@@ -93,13 +108,47 @@
                 <p class="text-xs text-gray-500 font-mono">/publication/applications/security-suite</p>
             </div>
 
-            <!-- Main Title -->
-            <div class="mb-8">
-                <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">
-                    CypSec Security Suite — 
-                    <span class="gradient-text">Modular, Sovereign, End-to-End Protection</span>
-                </h1>
-            </div>
+<section class="relative py-20 overflow-hidden">
+    <!-- GRID BACKGROUND -->
+    <div class="absolute inset-0 z-[-1] pointer-events-none">
+        <svg xmlns="http://www.w3.org/2000/svg" class="opacity-30 w-full h-full">
+            <defs>
+                <pattern id="grid-ss" width="40" height="40" patternUnits="userSpaceOnUse">
+                    <path d="M 40 0 L 0 0 0 40" fill="none" 
+                          stroke="rgba(255, 255, 255, 0.1)" stroke-width="1">
+                    </path>
+                </pattern>
+            </defs>
+            <rect width="100%" height="100%" fill="url(#grid-ss)"></rect>
+        </svg>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="container mx-auto px-4 text-center">
+        <h1 class="text-4xl lg:text-5xl font-semibold leading-tight">
+            CypSec Security Suite — Modular, Sovereign, End-to-End Protection
+        </h1>
+
+        <p class="text-lg mt-6 max-w-2xl mx-auto">
+            An integrated ecosystem of sovereign cybersecurity applications engineered for critical infrastructure, enterprise compliance, and operational security.
+        </p>
+
+        <!-- UNDERLINE BARS (exact same style as Security Notice) -->
+        <div class="flex justify-center mx-auto mt-6">
+            <span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
+            <span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
+            <span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
+        </div>
+    </div>
+
+    <!-- PURPLE/BLUE GLOW -->
+    <div class="absolute inset-0 z-[-1] opacity-20 pointer-events-none">
+        <div class="bg-gradient-to-r from-purple-500 to-blue-600 
+                    rounded-full w-96 h-96 blur-3xl mx-auto">
+        </div>
+    </div>
+</section>
+
 
             <!-- Introduction Section - More compact -->
             <section class="mb-8">
@@ -319,38 +368,151 @@
                 </div>
             </section>
 
-            <!-- Get Started Section - More compact -->
-            <section class="mb-8 text-center">
-                <h3 class="text-xl font-bold mb-3 text-white">Get Started</h3>
-                <p class="smaller-text text-gray-300 mb-4 max-w-2xl mx-auto">
-                    Whether your goal is hardening a single communication workflow or securing an entire organization, CypSec tailors the Security Suite to your mission.
-                </p>
-                <a href="mailto:contact@cypsec.de?subject=Security%20Suite%20Configuration" 
-                   class="inline-flex items-center px-4 py-2 bg-cyber-blue text-black font-medium rounded hover:bg-blue-400 transition-colors text-sm">
-                    Contact us for a personalized Security Suite configuration →
-                </a>
-            </section>
-        </main>
-
         <!-- Footer -->
-        <footer class="border-t border-gray-800 bg-black py-6">
-            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex flex-col md:flex-row justify-between items-center">
-                    <div class="mb-3 md:mb-0">
-                        <span class="text-lg font-semibold text-white">CypSec</span>
-                        <p class="text-gray-400 mt-0.5 text-xs">Architecting Absolute Cyber Sovereignty</p>
-                    </div>
-                    <div class="flex space-x-6">
-                        <a href="#" class="text-gray-400 hover:text-white transition-colors text-xs">Solutions</a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-colors text-xs">Research</a>
-                        <a href="#" class="text-gray-400 hover:text-white transition-colors text-xs">Contact</a>
-                    </div>
-                </div>
-                <div class="mt-4 pt-4 border-t border-gray-800 text-center text-gray-500 text-xs">
-                    <p>&copy; 2025 CypSec. All rights reserved.</p>
+<footer class="bg-transparent pt-20">
+    <div class="container w-full max-w-8xl mx-auto px-6 pt-8 pb-2">
+        
+        <!-- GRID LAYOUT -->
+        <div class="grid gap-8 mt-3 sm:grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 sm:mx-auto">
+
+<div class="p-2 w-full sm:mx-auto">
+    <div>
+        <div class="flex items-center">
+            <a href="/" class="flex items-center">
+                <picture>
+                    <source srcset="cypsec-logo-white-transparent.webp" media="(prefers-color-scheme: dark)">
+                    <img class="h-10" src="cypsec-logo-white-transparent.webp" alt="CypSec">
+                </picture>
+                <span class="ml-3 text-2xl font-semibold text-gray-900 dark:text-white">CypSec</span>
+            </a>
+        </div>
+
+                    <p class="text-lg text-gray-900 dark:text-white leading-relaxed mt-5">
+                        Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.
+                    </p>
+
+                    <p class="text-base text-gray-900 dark:text-white leading-snug mt-8">Contact</p>
+
+                    <ul>
+                        <li class="text-base text-gray-900 dark:text-white leading-snug mt-1">
+                            <a href="mailto:contact@cypsec.de">contact@cypsec.de</a>
+                        </li>
+                        <li class="text-base text-gray-900 dark:text-white leading-snug">
+                            <a href="https://linkedin.com/company/cypsec-group">LinkedIn</a>
+                        </li>
+                    </ul>
                 </div>
             </div>
-        </footer>
+
+            <!-- CONSULTING COLUMN -->
+            <div class="lg:ml-24 mt-4 sm:mx-auto">
+                <div class="text-xl font-bold text-black dark:text-white uppercase">Consulting</div>
+
+                <a href="/security-center/incident-handling" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Incident Handling</a>
+
+                <a href="/security-center/threat-modeling" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Threat Modeling</a>
+
+                <a href="/security-center/penetration-testing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Penetration Testing</a>
+
+                <a href="/security-center/red-teaming" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Red Teaming</a>
+
+                <a href="/security-center/secure-engineering" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Secure Engineering</a>
+
+                <a href="/security-center/forensic-analysis" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Forensic Analysis</a>
+
+                <a href="/security-center/secure-operations" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Secure Operations</a>
+
+                <a href="/security-center" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">More</a>
+            </div>
+
+            <!-- PRODUCTS COLUMN -->
+            <div class="lg:ml-24 mt-4 sm:mx-auto">
+                <div class="text-xl font-bold text-black dark:text-white uppercase">Products</div>
+
+                <a href="/security-center/vulnerability-management" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Vulnerability Mgmt.</a>
+
+                <a href="/security-center/fuzzing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Fuzzing as a Service</a>
+
+                <a href="/security-center/communication-software" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Communication</a>
+
+                <a href="/security-center/cyber-deception" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Cyber Deception</a>
+
+                <a href="/security-center/active-defense" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Active Defense</a>
+
+                <a href="/security-center/malware-scanner" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Malware Scanner</a>
+
+                <a href="/security-center/open-source-intelligence-platform" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">OSINT Platform</a>
+
+                <a href="/security-center" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">More</a>
+            </div>
+
+            <!-- PUBLICATION COLUMN -->
+            <div class="lg:ml-24 mt-4 sm:mx-auto">
+                <div class="text-xl font-bold text-black dark:text-white uppercase">Publication</div>
+
+                <a href="/publication/partner-program" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Partner Program</a>
+
+                <a href="/publication/defense" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Defense Whitepaper</a>
+
+                <a href="/publication/academy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Academy</a>
+
+                <a href="/publication/press" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Press Releases</a>
+
+                <a href="/publication/blog" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Blog</a>
+
+                <a href="/publication/security-hub" class="hidden block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Security Hub</a>
+
+                <a href="/publication/attestation" class="hidden block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Attestation</a>
+
+                <a href="/publication/applications" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Applications</a>
+            </div>
+
+            <!-- COMPANY COLUMN -->
+            <div class="lg:ml-24 mt-4 sm:mx-auto">
+                <div class="text-xl font-bold text-black dark:text-white uppercase">Company</div>
+
+                <a href="/company/career" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Career</a>
+
+                <a href="/company/pricing" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Pricing</a>
+
+                <a href="/company/data-privacy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Data Privacy</a>
+
+                <a href="/company/terms-of-service" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Terms of Service</a>
+
+                <a href="/company/no-tracking-policy" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">No Tracking</a>
+
+                <a href="/company/company-ethics" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Company Ethics</a>
+
+                <a href="/company/company-insights" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Company Insights</a>
+
+                <a href="/company/imprint" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Imprint</a>
+            </div>
+
+        </div>
+
+        <!-- DIVIDER -->
+        <hr class="my-6 border-gray-200 dark:border-gray-700">
+
+        <!-- BOTTOM BAR -->
+        <div class="flex sm:flex-row justify-evenly mb-4">
+            <div class="hidden sm:flex justify-left mt-2">
+                <a href="/downloads" class="mx-2 text-sm text-gray-500 hover:text-gray-300 transition-colors duration-300">
+                    <span class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">Downloads</span>
+                </a>
+            </div>
+
+<div class="flex justify-center items-center mt-2">
+
+    <p class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">© 2025 CypSec</p>
+</div>
+
+            <div class="hidden sm:flex justify-left mt-2">
+                <a href="/security-notice" class="mx-2 text-sm text-gray-500 hover:text-gray-300 transition-colors duration-300">
+                    <span class="mx-2 text-base text-gray-900 dark:text-white sm:mx-6">Security</span>
+                </a>
+            </div>
+        </div>
+
     </div>
-</body>
+</footer>
 </html>
\ No newline at end of file