world
This commit is contained in:
GuidoSchenone
2025-12-08 16:08:56 -03:00
parent 6a5fab67d4
commit 79ea0261fb
2 changed files with 573 additions and 200 deletions

View File

@@ -67,6 +67,78 @@
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">
@@ -81,40 +153,49 @@
</div>
</nav>
<!-- Hero Section - Insurance Style -->
<section class="relative py-20 overflow-hidden">
<!-- 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" 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 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)"></rect>
<rect width="100%" height="100%" fill="url(#grid-insurance-new)"></rect>
</svg>
</div>
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl lg:text-5xl font-semibold leading-tight">
Cyber Insurance Readiness
<!-- 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">
<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">
<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>
<!-- Underline Bars -->
<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>
<!-- 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 class="absolute inset-0 z-[-1] opacity-20 pointer-events-none">
<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-full w-96 h-96 blur-3xl mx-auto"></div>
</div>
</section>
@@ -122,16 +203,26 @@
<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">/publication/applications/cyber-insurance</p>
<p class="text-xs text-gray-500 font-mono">
</div>
<!-- Introduction -->
<!-- Introduction - New Card Style -->
<section class="mb-8">
<div class="bg-gray-900 rounded-lg p-4 border border-gray-800 tight-card">
<p class="text-sm text-gray-300 mb-3 compact-text">
<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>
<p class="text-sm text-gray-300 mb-3 compact-text">
</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">
@@ -140,123 +231,266 @@
</div>
</section>
<!-- Why Cyber Insurance Matters -->
<!-- Why Cyber Insurance Matters - New Grid Style -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-4 text-white">Why Cyber Insurance Matters</h2>
<div class="grid md:grid-cols-2 gap-3">
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Escalating cost of ransomware and downtime</p>
<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>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Legal liability for data breaches</p>
<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="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Regulatory fines and notification obligations</p>
<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>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Vendor dependency and supply-chain risk</p>
<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="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Loss of business continuity or customer trust</p>
<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="mt-4 p-3 bg-gray-800 rounded-lg border border-gray-700">
<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 -->
<!-- Insurance Lifecycle Support - New Step Design -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-4 text-white">How CypSec Supports the Full Insurance Lifecycle</h2>
<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="mb-6">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-cyber-blue rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-black font-bold text-sm">1</span>
<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-lg font-semibold mb-2 text-white">Pre-Insurance Assessment</h3>
<p class="smaller-text text-gray-300 mb-2">We evaluate your:</p>
<ul class="list-disc list-inside space-y-1 smaller-text text-gray-300 ml-4">
<li>attack surface</li>
<li>governance and documentation</li>
<li>security architecture</li>
<li>compliance obligations</li>
<li>existing protection tools</li>
<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>
<p class="smaller-text text-gray-300 mt-2">This produces a risk profile insurers can work with.</p>
</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="mb-6">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-cyber-blue rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-black font-bold text-sm">2</span>
<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-lg font-semibold mb-2 text-white">Hardening & Preparedness</h3>
<p class="smaller-text text-gray-300 mb-2">We implement required controls:</p>
<ul class="list-disc list-inside space-y-1 smaller-text text-gray-300 ml-4">
<li>access management</li>
<li>logging and monitoring</li>
<li>incident response procedures</li>
<li>secure communication</li>
<li>vulnerability management</li>
<li>data-protection measures</li>
<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>
<p class="smaller-text text-gray-300 mt-2">These steps significantly improve insurability and reduce premiums.</p>
</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="mb-6">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-cyber-blue rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-black font-bold text-sm">3</span>
<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-lg font-semibold mb-2 text-white">Compliance & Governance</h3>
<p class="smaller-text text-gray-300 mb-2">Insurers require evidence of:</p>
<ul class="list-disc list-inside space-y-1 smaller-text text-gray-300 ml-4">
<li>policies</li>
<li>reports</li>
<li>audits</li>
<li>user awareness</li>
<li>incident processes</li>
<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>
<p class="smaller-text text-gray-300 mt-2">CypSec's governance framework and policy-as-code ensure you meet those requirements.</p>
</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="mb-6">
<div class="flex items-start space-x-3">
<div class="w-8 h-8 bg-cyber-blue rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-black font-bold text-sm">4</span>
<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-lg font-semibold mb-2 text-white">Incident Response Support</h3>
<p class="smaller-text text-gray-300 mb-2">If a breach occurs, CypSec provides:</p>
<ul class="list-disc list-inside space-y-1 smaller-text text-gray-300 ml-4">
<li>forensic analysis</li>
<li>containment</li>
<li>documentation</li>
<li>impact assessment</li>
<li>recovery guidance</li>
<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>
<p class="smaller-text text-gray-300 mt-2">This is essential for facilitating insurance claims and reducing long-term losses.</p>
</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>
@@ -265,93 +499,232 @@
<!-- Section Divider -->
<div class="section-divider"></div>
<!-- Who Benefits -->
<!-- Who Benefits - New Interactive Cards -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-4 text-white">Who Benefits</h2>
<div class="grid md:grid-cols-2 gap-3">
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">SMEs preparing for their first cyber insurance policy</p>
<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>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Enterprises with complex infrastructures and liability exposure</p>
<h4 class="text-sm font-semibold text-white">SMEs</h4>
</div>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Critical infrastructure and public institutions</p>
<p class="smaller-text text-gray-300">Preparing for their first cyber insurance policy with structured guidance</p>
</div>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Service providers with contractual security obligations</p>
<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>
<div class="flex items-start space-x-2">
<span class="cyber-blue text-sm"></span>
<p class="smaller-text text-gray-300">Any organization seeking premium optimization</p>
<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 -->
<!-- Outcome - New Highlight Design -->
<section class="mb-8">
<h2 class="text-2xl font-bold mb-4 text-white">Outcome</h2>
<div class="bg-gradient-to-r from-gray-900 to-gray-800 rounded-lg p-6 border border-gray-700">
<p class="text-base text-gray-300 mb-4">
<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>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<span class="cyber-blue text-sm mt-0.5"></span>
<span class="text-sm text-gray-300">increases insurance eligibility</span>
<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="flex items-start space-x-2">
<span class="cyber-blue text-sm mt-0.5"></span>
<span class="text-sm text-gray-300">reduces premiums</span>
</li>
<li class="flex items-start space-x-2">
<span class="cyber-blue text-sm mt-0.5"></span>
<span class="text-sm text-gray-300">strengthens defenses</span>
</li>
<li class="flex items-start space-x-2">
<span class="cyber-blue text-sm mt-0.5"></span>
<span class="text-sm text-gray-300">accelerates post-incident recovery</span>
<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>
</section>
<!-- Get Started -->
<section class="mb-8 text-center">
<h3 class="text-xl font-bold mb-4 text-white">Get Started</h3>
<p class="smaller-text text-gray-300 mb-6 max-w-2xl mx-auto">
Ready to optimize your cyber insurance strategy? CypSec guides you through every step of the insurance lifecycle.
</p>
<a href="mailto:contact@cypsec.de?subject=Cyber%20Insurance%20Readiness"
class="inline-flex items-center px-6 py-3 bg-cyber-blue text-black font-medium rounded hover:bg-blue-400 transition-colors">
Contact us for insurance readiness assessment →
<!-- 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>
</section>
</main>
</div>
<!-- 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 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="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 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 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>
</div>
</div>
</footer>
</div>
</body>
</html>
</footer>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB