Files
CYBER-INSURANCE/cyber-insurance.html
GuidoSchenone 79ea0261fb hello
world
2025-12-08 16:08:56 -03:00

730 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cyber Insurance Readiness — Manage, Reduce, and Transfer Risk</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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>
:root {
--primary-blue: #60a5fa;
--dark-bg: #000000;
--card-bg: #111111;
--text-primary: #ffffff;
--text-secondary: #9ca3af;
--border-color: #1f2937;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--dark-bg);
color: var(--text-primary);
line-height: 1.5;
}
.cyber-blue {
color: var(--primary-blue);
}
.bg-cyber-blue {
background-color: var(--primary-blue);
}
.border-cyber-blue {
border-color: var(--primary-blue);
}
.text-secondary {
color: var(--text-secondary);
}
.card-hover {
transition: all 0.2s ease;
}
.card-hover:hover {
border-color: var(--primary-blue);
}
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
margin: 2rem 0;
}
.compact-text {
line-height: 1.4;
}
.tight-card {
padding: 1rem;
}
.smaller-text {
font-size: 0.875rem;
line-height: 1.3;
}
/* NEW CREATIVE STYLES */
.neo-card {
background: linear-gradient(135deg, rgba(28, 50, 104, 0.15) 0%, rgba(17, 24, 39, 0.8) 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.neo-card:hover {
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
transform: translateY(-2px);
}
.glow-border {
position: relative;
overflow: hidden;
}
.glow-border::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #3b82f6);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.glow-border:hover::before {
opacity: 0.3;
}
.step-container {
position: relative;
padding-left: 2rem;
}
.step-container::before {
content: '';
position: absolute;
left: 15px;
top: 40px;
bottom: -20px;
width: 2px;
background: linear-gradient(to bottom, #3b82f6, transparent);
}
.step-container:last-child::before {
display: none;
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.gradient-mesh {
background:
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(28, 50, 104, 0.2) 0%, transparent 50%);
}
</style>
</head>
<body class="bg-black text-white">
<div class="min-h-screen">
<!-- Navigation Bar - CypSec Centered with Logo -->
<nav class="border-b border-gray-800 bg-black">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-center items-center h-16">
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
<span class="text-2xl font-mono text-white">CypSec</span>
</div>
</div>
</nav>
<!-- Hero Section - Insurance Style with Creative Elements -->
<section class="relative py-20 overflow-hidden gradient-mesh">
<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-insurance-new" width="60" height="60" patternUnits="userSpaceOnUse">
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255, 255, 255, 0.08)" stroke-width="1"></path>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid-insurance-new)"></rect>
</svg>
</div>
<!-- Floating Elements -->
<div class="absolute top-20 left-10 w-20 h-20 bg-blue-500/10 rounded-full blur-2xl floating-element"></div>
<div class="absolute bottom-20 right-10 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl floating-element" style="animation-delay: 2s;"></div>
<div class="container mx-auto px-4 text-center relative z-10">
<div class="inline-block mb-4 px-4 py-2 bg-blue-500/10 rounded-full border border-blue-500/20">
<span class="text-sm text-blue-400 font-medium">Risk Management Solution</span>
</div>
<h1 class="text-4xl lg:text-6xl font-bold leading-tight mb-4">
Cyber Insurance
<span class="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">Readiness</span>
</h1>
<p class="text-xl mt-4 max-w-3xl mx-auto text-gray-300">
Manage, Reduce, and Transfer Risk
</p>
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-400">
Navigate the evolving cyber insurance landscape with confidence through structured security maturity and compliance readiness
</p>
<!-- Creative Underline -->
<div class="flex justify-center mx-auto mt-8">
<div class="flex items-center space-x-2">
<span class="inline-block w-12 h-0.5 bg-gradient-to-r from-transparent to-blue-500 rounded-full"></span>
<span class="inline-block w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></span>
<span class="inline-block w-12 h-0.5 bg-gradient-to-r from-purple-500 to-transparent rounded-full"></span>
</div>
</div>
</div>
</section>
<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- URL Breadcrumb -->
<div class="mb-6">
<p class="text-xs text-gray-500 font-mono">
</div>
<!-- Introduction - New Card Style -->
<section class="mb-8">
<div class="neo-card rounded-2xl p-6 glow-border">
<div class="flex items-start space-x-4 mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl flex items-center justify-center">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-2">Introduction</h3>
<p class="text-sm text-gray-300 compact-text">
The financial and operational impact of cyber incidents continues to rise worldwide. Ransomware, data breaches, supply-chain compromise, and targeted attacks can disrupt operations, damage reputation, and create long-term liabilities.
</p>
</div>
</div>
<p class="text-sm text-gray-300 compact-text mb-3">
Cyber insurance helps organizations absorb financial damage — but insurers increasingly demand demonstrable security maturity before offering adequate coverage.
</p>
<p class="text-sm text-gray-300 compact-text">
CypSec bridges this gap by preparing organizations for insurance eligibility, reducing risk exposure, and supporting incident documentation and claims.
</p>
</div>
</section>
<!-- Why Cyber Insurance Matters - New Grid Style -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
Why Cyber Insurance Matters
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="neo-card rounded-xl p-4 glow-border">
<div class="w-10 h-10 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-red-400 font-bold">$</span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Escalating Costs</h4>
<p class="smaller-text text-gray-300">Ransomware and downtime costs are skyrocketing</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<div class="w-10 h-10 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-yellow-400 font-bold"></span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Legal Liability</h4>
<p class="smaller-text text-gray-300">Data breaches create significant legal exposure</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-purple-400 font-bold">📋</span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Regulatory Fines</h4>
<p class="smaller-text text-gray-300">Notification obligations and compliance penalties</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-green-400 font-bold">🔗</span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Supply Chain Risk</h4>
<p class="smaller-text text-gray-300">Vendor dependency creates cascading vulnerabilities</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-blue-400 font-bold">💔</span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Trust Loss</h4>
<p class="smaller-text text-gray-300">Business continuity and customer relationship damage</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border md:col-span-2 lg:col-span-1">
<div class="w-10 h-10 bg-gradient-to-br from-gray-500/20 to-slate-500/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-gray-400 font-bold"></span>
</div>
<h4 class="text-sm font-semibold text-white mb-2">Key Insight</h4>
<p class="smaller-text text-gray-300">
<strong class="text-white">Cyber insurance is part of a strategic risk-transfer plan — but it cannot stand alone.</strong> Security maturity determines coverage, premiums, and claim success.
</p>
</div>
</div>
</section>
<!-- Insurance Lifecycle Support - New Step Design -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
How CypSec Supports the Full Insurance Lifecycle
</h2>
<div class="space-y-8">
<!-- Step 1 -->
<div class="step-container neo-card rounded-2xl p-6 glow-border">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
<span class="text-white font-bold text-lg">1</span>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold mb-3 text-white">Pre-Insurance Assessment</h3>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<p class="smaller-text text-gray-300 mb-2 font-medium">We evaluate your:</p>
<ul class="space-y-1 smaller-text text-gray-300">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
<span>attack surface</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
<span>governance and documentation</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
<span>security architecture</span>
</li>
</ul>
</div>
<div>
<ul class="space-y-1 smaller-text text-gray-300 mt-6">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
<span>compliance obligations</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-blue-400 rounded-full"></span>
<span>existing protection tools</span>
</li>
</ul>
</div>
</div>
<div class="bg-blue-500/10 rounded-lg p-3 border border-blue-500/20">
<p class="smaller-text text-blue-300">
<strong class="text-blue-400">Result:</strong> This produces a risk profile insurers can work with.
</p>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="step-container neo-card rounded-2xl p-6 glow-border">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
<span class="text-white font-bold text-lg">2</span>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold mb-3 text-white">Hardening & Preparedness</h3>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<p class="smaller-text text-gray-300 mb-2 font-medium">We implement required controls:</p>
<ul class="space-y-1 smaller-text text-gray-300">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>access management</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>logging and monitoring</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>incident response procedures</span>
</li>
</ul>
</div>
<div>
<ul class="space-y-1 smaller-text text-gray-300 mt-6">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>secure communication</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>vulnerability management</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-purple-400 rounded-full"></span>
<span>data-protection measures</span>
</li>
</ul>
</div>
</div>
<div class="bg-purple-500/10 rounded-lg p-3 border border-purple-500/20">
<p class="smaller-text text-purple-300">
<strong class="text-purple-400">Impact:</strong> These steps significantly improve insurability and reduce premiums.
</p>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="step-container neo-card rounded-2xl p-6 glow-border">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
<span class="text-white font-bold text-lg">3</span>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold mb-3 text-white">Compliance & Governance</h3>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<p class="smaller-text text-gray-300 mb-2 font-medium">Insurers require evidence of:</p>
<ul class="space-y-1 smaller-text text-gray-300">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
<span>policies</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
<span>reports</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
<span>audits</span>
</li>
</ul>
</div>
<div>
<ul class="space-y-1 smaller-text text-gray-300 mt-6">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
<span>user awareness</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
<span>incident processes</span>
</li>
</ul>
</div>
</div>
<div class="bg-green-500/10 rounded-lg p-3 border border-green-500/20">
<p class="smaller-text text-green-300">
<strong class="text-green-400">Solution:</strong> CypSec's governance framework and policy-as-code ensure you meet those requirements.
</p>
</div>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="step-container neo-card rounded-2xl p-6 glow-border">
<div class="flex items-start space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
<span class="text-white font-bold text-lg">4</span>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold mb-3 text-white">Incident Response Support</h3>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div>
<p class="smaller-text text-gray-300 mb-2 font-medium">If a breach occurs, CypSec provides:</p>
<ul class="space-y-1 smaller-text text-gray-300">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
<span>forensic analysis</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
<span>containment</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
<span>documentation</span>
</li>
</ul>
</div>
<div>
<ul class="space-y-1 smaller-text text-gray-300 mt-6">
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
<span>impact assessment</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-1.5 h-1.5 bg-orange-400 rounded-full"></span>
<span>recovery guidance</span>
</li>
</ul>
</div>
</div>
<div class="bg-orange-500/10 rounded-lg p-3 border border-orange-500/20">
<p class="smaller-text text-orange-300">
<strong class="text-orange-400">Essential:</strong> This is essential for facilitating insurance claims and reducing long-term losses.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section Divider -->
<div class="section-divider"></div>
<!-- Who Benefits - New Interactive Cards -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
Who Benefits
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="neo-card rounded-xl p-4 glow-border group">
<div class="flex items-center space-x-3 mb-3">
<div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="text-blue-400 font-bold text-lg">🏢</span>
</div>
<h4 class="text-sm font-semibold text-white">SMEs</h4>
</div>
<p class="smaller-text text-gray-300">Preparing for their first cyber insurance policy with structured guidance</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border group">
<div class="flex items-center space-x-3 mb-3">
<div class="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="text-purple-400 font-bold text-lg">🏭</span>
</div>
<h4 class="text-sm font-semibold text-white">Enterprises</h4>
</div>
<p class="smaller-text text-gray-300">Complex infrastructures and high liability exposure requiring comprehensive coverage</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border group">
<div class="flex items-center space-x-3 mb-3">
<div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="text-green-400 font-bold text-lg">🏛</span>
</div>
<h4 class="text-sm font-semibold text-white">Critical Infrastructure</h4>
</div>
<p class="smaller-text text-gray-300">Public institutions requiring specialized insurance strategies</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border group">
<div class="flex items-center space-x-3 mb-3">
<div class="w-10 h-10 bg-gradient-to-br from-orange-500/20 to-orange-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="text-orange-400 font-bold text-lg">🤝</span>
</div>
<h4 class="text-sm font-semibold text-white">Service Providers</h4>
</div>
<p class="smaller-text text-gray-300">Contractual security obligations and client requirements</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border group md:col-span-2 lg:col-span-1">
<div class="flex items-center space-x-3 mb-3">
<div class="w-10 h-10 bg-gradient-to-br from-teal-500/20 to-teal-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="text-teal-400 font-bold text-lg">💰</span>
</div>
<h4 class="text-sm font-semibold text-white">Cost Optimizers</h4>
</div>
<p class="smaller-text text-gray-300">Any organization seeking premium optimization and better coverage terms</p>
</div>
</div>
</section>
<!-- Outcome - New Highlight Design -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
Outcome
</h2>
<div class="neo-card rounded-2xl p-8 glow-border relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl"></div>
<div class="relative z-10">
<p class="text-lg text-gray-300 mb-6">
A structured, resilient, and auditable security posture that:
</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-green-400 text-xs"></span>
</div>
<div>
<h4 class="text-sm font-semibold text-white">Increases Insurance Eligibility</h4>
<p class="smaller-text text-gray-400">Meet and exceed insurer requirements</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-blue-400 text-xs"></span>
</div>
<div>
<h4 class="text-sm font-semibold text-white">Reduces Premiums</h4>
<p class="smaller-text text-gray-400">Demonstrable risk reduction lowers costs</p>
</div>
</div>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-purple-400 text-xs"></span>
</div>
<div>
<h4 class="text-sm font-semibold text-white">Strengthens Defenses</h4>
<p class="smaller-text text-gray-400">Proactive security improvements</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="w-6 h-6 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-orange-400 text-xs"></span>
</div>
<div>
<h4 class="text-sm font-semibold text-white">Accelerates Recovery</h4>
<p class="smaller-text text-gray-400">Faster post-incident response and claims</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER GRID: horizontal on desktop, stacked on mobile -->
<div class="container w-full max-w-8xl mx-auto px-6 pt-8 pb-2">
<!-- HORIZONTAL GRID -->
<div class="grid gap-6 mt-3
sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 <!-- 5 columns on desktop -->
sm:mx-auto">
<!-- COLUMN 1 Brand -->
<div class="lg:col-span-1">
<div class="flex items-center mb-4">
<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>
<!-- COLUMN 2 Consulting -->
<div>
<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>
<!-- COLUMN 3 Products -->
<div>
<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>
<!-- COLUMN 4 Publication -->
<div>
<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/applications" class="block mt-2 text-base text-gray-900 dark:text-white leading-snug hover:underline">Applications</a>
</div>
<!-- COLUMN 5 Company -->
<div>
<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>
</footer>