757 lines
44 KiB
HTML
757 lines
44 KiB
HTML
<!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: tighten vertical spacing -->
|
|
<section class="relative py-12 overflow-hidden"> <!-- reduced py-20 → py-12 -->
|
|
<!-- background / decorative elements stay identical -->
|
|
<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"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="100%" height="100%" fill="url(#grid-insurance-new)"/>
|
|
</svg>
|
|
</div>
|
|
<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="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>
|
|
|
|
<!-- CONTENT: tighter gaps -->
|
|
<div class="container mx-auto px-4 text-center relative z-10">
|
|
<div class="inline-block mb-3 px-4 py-1.5 bg-blue-500/10 rounded-full border border-blue-500/20"> <!-- mb-4→mb-3, py-2→py-1.5 -->
|
|
<span class="text-sm text-blue-400 font-medium">Risk Management Solution</span>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto mb-3"> <!-- mb-4→mb-3, removed frame -->
|
|
<h1 class="text-3xl lg:text-5xl font-bold text-white leading-tight">
|
|
Cyber Insurance Readiness
|
|
</h1>
|
|
</div>
|
|
|
|
<p class="text-xl max-w-3xl mx-auto text-gray-300 mb-2"> <!-- mt-4→mb-2, removed mt -->
|
|
Manage, Reduce, and Transfer Risk
|
|
</p>
|
|
|
|
<p class="text-lg max-w-2xl mx-auto text-gray-400 mb-4"> <!-- mt-6→mb-4, removed mt -->
|
|
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">
|
|
<div class="flex items-center space-x-2"> <!-- mt-8 removed -->
|
|
<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>
|
|
|
|
<!-- gradient orb -->
|
|
<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>
|
|
<!-- 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 mb-2 text-white">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>
|
|
|
|
<!-- ===== IMAGE + QUOTE SECTION ===== -->
|
|
<section class="py-10 bg-black">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center gap-6">
|
|
|
|
<!-- 25 % smaller image -->
|
|
<div class="shrink-0">
|
|
<div class="relative w-64 mx-auto
|
|
rounded-2xl overflow-hidden
|
|
border border-gray-700
|
|
shadow-lg
|
|
before:absolute before:inset-0 before:rounded-2xl
|
|
before:ring-1 before:ring-blue-400/20
|
|
hover:before:ring-blue-400/40 before:transition before:duration-300">
|
|
<img src="ideogram-v3.0_A_realistic_small-business_office_environment_with_natural_daylight._Three_emplo-0.jpg"
|
|
alt="Small-business office with natural daylight"
|
|
class="w-full h-auto object-cover rounded-2xl
|
|
transition-transform duration-300 ease-out
|
|
hover:scale-[1.015]">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Journal-style quote + explanation -->
|
|
<div class="text-left">
|
|
<blockquote class="text-lg italic text-gray-200 leading-snug">
|
|
“Hope is not a strategy.”
|
|
<footer class="text-sm not-italic text-gray-400 mt-1">
|
|
— General James Mattis
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<p class="mt-4 text-sm text-gray-300 leading-relaxed">
|
|
Often cited in cybersecurity and risk governance circles, the quote underscores a harsh reality:
|
|
most companies—especially small businesses—assume the odds of a cyberattack are low. Yet the
|
|
stakes are high enough to wipe out the entire business.
|
|
</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>
|
|
|
|
<!-- Get Started - New CTA Design -->
|
|
<section class="mb-8 text-center">
|
|
<div class="neo-card rounded-2xl p-8 glow-border">
|
|
<h3 class="text-2xl font-bold mb-4 text-white">Ready to Optimize Your Cyber Insurance?</h3>
|
|
<p class="text-base text-gray-300 mb-6 max-w-2xl mx-auto">
|
|
CypSec guides you through every step of the insurance lifecycle with proven methodologies and cutting-edge security solutions.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a href="mailto:contact@cypsec.de?subject=Cyber%20Insurance%20Readiness"
|
|
class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all transform hover:scale-105 shadow-lg">
|
|
<span>Get Insurance Assessment</span>
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="/publication/applications/security-suite"
|
|
class="inline-flex items-center px-6 py-3 border border-gray-600 text-gray-300 font-medium rounded-xl hover:border-gray-500 hover:text-white transition-all">
|
|
<span>Explore Security Suite</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Enhanced Footer -->
|
|
<footer class="bg-gradient-to-t from-gray-900 to-black py-12">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8">
|
|
<div class="col-span-2">
|
|
<div class="flex items-center mb-4">
|
|
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-8 w-auto mr-3">
|
|
<span class="text-xl font-bold text-white">CypSec</span>
|
|
</div>
|
|
<p class="text-gray-400 text-sm mb-4 max-w-md">
|
|
Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="mailto:contact@cypsec.de" class="text-gray-400 hover:text-white transition-colors">
|
|
<span class="text-sm">contact@cypsec.de</span>
|
|
</a>
|
|
<a href="https://linkedin.com/company/cypsec-group" class="text-gray-400 hover:text-white transition-colors">
|
|
<span class="text-sm">LinkedIn</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-white mb-4 uppercase">Solutions</h4>
|
|
<ul class="space-y-2 text-sm text-gray-400">
|
|
<li><a href="/publication/applications/security-suite" class="hover:text-white transition-colors">Security Suite</a></li>
|
|
<li><a href="/publication/applications/cyber-insurance" class="hover:text-white transition-colors">Cyber Insurance</a></li>
|
|
<li><a href="/security-center" class="hover:text-white transition-colors">Security Center</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-white mb-4 uppercase">Company</h4>
|
|
<ul class="space-y-2 text-sm text-gray-400">
|
|
<li><a href="/company/career" class="hover:text-white transition-colors">Career</a></li>
|
|
<li><a href="/company/data-privacy" class="hover:text-white transition-colors">Data Privacy</a></li>
|
|
<li><a href="/company/terms-of-service" class="hover:text-white transition-colors">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-800 pt-8">
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|
<div class="flex items-center space-x-4 mb-4 md:mb-0">
|
|
<span class="text-sm text-gray-400">© 2025 CypSec</span>
|
|
<span class="text-gray-600">•</span>
|
|
<span class="text-sm text-gray-400">All rights reserved</span>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/downloads" class="text-sm text-gray-400 hover:text-white transition-colors">Downloads</a>
|
|
<a href="/security-notice" class="text-sm text-gray-400 hover:text-white transition-colors">Security</a>
|
|
<a href="/company/imprint" class="text-sm text-gray-400 hover:text-white transition-colors">Imprint</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |