Files
SECURE-EMAILS/secure-emails.html

495 lines
29 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>Secure Email & Communication — Protecting Your Critical Conversations</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; }
.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;
}
.floating-element {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
</style>
</head>
<body class="bg-black text-white">
<div class="min-h-screen">
<!-- Navigation -->
<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 class="relative py-12 overflow-hidden">
<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-email" 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-email)"/>
</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="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">
<span class="text-sm text-blue-400 font-medium">Communication Security</span>
</div>
<div class="max-w-2xl mx-auto mb-3">
<h1 class="text-3xl lg:text-5xl font-bold text-white leading-tight">
Secure Email & Communication
</h1>
</div>
<p class="text-xl max-w-3xl mx-auto text-gray-300 mb-2">
Protecting Your Critical Conversations
</p>
<p class="text-lg max-w-2xl mx-auto text-gray-400 mb-4">
Email remains the #1 attack vector. CypSec secures your inbox with sovereign encryption, threat detection, and human-aware defenses.
</p>
<div class="flex justify-center mx-auto">
<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">
<div class="mb-6">
<p class="text-xs text-gray-500 font-mono">/publication/applications/secure-emails</p>
</div>
<!-- Intro -->
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold mb-2 text-white">The Problem with Standard Email</h3>
<p class="text-sm text-gray-300 compact-text">
Email remains the primary vector for phishing, impersonation, malware delivery, and data leaks. Because it is deeply integrated into daily operations, attackers exploit trust, routine, and human error.
</p>
</div>
</div>
<p class="text-sm text-gray-300 compact-text">
To protect communication, both technology and human behavior must be addressed.
</p>
</div>
</section>
<!-- Problem Grid -->
<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>
The Problem with Standard Email
</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">Phishing & BEC</h4>
<p class="smaller-text text-gray-300">Business-email-compromise and credential theft</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">Spoofing & Impersonation</h4>
<p class="smaller-text text-gray-300">Fake domains and identity fraud</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">Malware Attachments</h4>
<p class="smaller-text text-gray-300">Embedded threats in files</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">Data Leaks</h4>
<p class="smaller-text text-gray-300">Accidental or malicious exposure</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">No Encryption</h4>
<p class="smaller-text text-gray-300">Lack of end-to-end protection across providers</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">No Governance</h4>
<p class="smaller-text text-gray-300">Absence of role-based access and policy enforcement</p>
</div>
</div>
</section>
<!-- Capabilities -->
<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>
CypSec Secure Email Capabilities
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="neo-card rounded-xl p-5 glow-border">
<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">
<span class="text-blue-400 font-bold">🔐</span>
</div>
<h4 class="text-sm font-semibold text-white">End-to-End Encryption</h4>
</div>
<p class="smaller-text text-gray-300">Confidential, identity-validated email and file exchange — even across insecure networks.</p>
</div>
<div class="neo-card rounded-xl p-5 glow-border">
<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">
<span class="text-purple-400 font-bold">🗄</span>
</div>
<h4 class="text-sm font-semibold text-white">Secure File Vault</h4>
</div>
<p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</p>
</div>
<div class="neo-card rounded-xl p-5 glow-border">
<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">
<span class="text-green-400 font-bold">🛡</span>
</div>
<h4 class="text-sm font-semibold text-white">Threat Detection & Filtering</h4>
</div>
<p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</p>
</div>
<div class="neo-card rounded-xl p-5 glow-border">
<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">
<span class="text-orange-400 font-bold">👤</span>
</div>
<h4 class="text-sm font-semibold text-white">Human-Risk Analytics</h4>
</div>
<p class="smaller-text text-gray-300">Insights into user behavior, awareness levels, and risk indicators — enabling targeted training.</p>
</div>
<div class="neo-card rounded-xl p-5 glow-border">
<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">
<span class="text-teal-400 font-bold">📣</span>
</div>
<h4 class="text-sm font-semibold text-white">Incident Awareness & Reporting</h4>
</div>
<p class="smaller-text text-gray-300">Real-time alerts for suspicious logins, unusual email patterns, and identity anomalies.</p>
</div>
<div class="neo-card rounded-xl p-5 glow-border">
<div class="flex items-center space-x-3 mb-3">
<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">
<span class="text-gray-400 font-bold"></span>
</div>
<h4 class="text-sm font-semibold text-white">Governance & Policy Enforcement</h4>
</div>
<p class="smaller-text text-gray-300">Role-based access, compliance rules, data-loss prevention, and communication governance.</p>
</div>
</div>
</section>
<!-- Who It Serves -->
<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 It Serves
</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="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">
<span class="text-blue-400 font-bold">🏢</span>
</div>
<h4 class="text-sm font-semibold text-white">SMEs</h4>
</div>
<p class="smaller-text text-gray-300">Requiring secure communication workflows</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<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">
<span class="text-purple-400 font-bold">🏭</span>
</div>
<h4 class="text-sm font-semibold text-white">Enterprises</h4>
</div>
<p class="smaller-text text-gray-300">Facing phishing and compliance challenges</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<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">
<span class="text-green-400 font-bold">🏛</span>
</div>
<h4 class="text-sm font-semibold text-white">Critical Infrastructures</h4>
</div>
<p class="smaller-text text-gray-300">High-stakes communication environments</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border">
<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">
<span class="text-orange-400 font-bold">🕊</span>
</div>
<h4 class="text-sm font-semibold text-white">Journalists & NGOs</h4>
</div>
<p class="smaller-text text-gray-300">Needing privacy and anonymity</p>
</div>
<div class="neo-card rounded-xl p-4 glow-border 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">
<span class="text-teal-400 font-bold">🏛</span>
</div>
<h4 class="text-sm font-semibold text-white">Public Sector</h4>
</div>
<p class="smaller-text text-gray-300">Handling sensitive documents and citizen data</p>
</div>
</div>
</section>
<!-- Benefits -->
<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>
Benefits
</h2>
<div class="neo-card rounded-2xl p-8 glow-border">
<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">Anti-Phishing & Anti-Spyware</h4>
<p class="smaller-text text-gray-400">Blocks impersonation and malicious payloads</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">Authenticated Communication</h4>
<p class="smaller-text text-gray-400">Verified sender identity and integrity</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">Identity Protection</h4>
<p class="smaller-text text-gray-400">Reduces risk of compromise and spoofing</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">Compliance Ready</h4>
<p class="smaller-text text-gray-400">Meets data-protection obligations</p>
</div>
</div>
</div>
</div>
<div class="mt-6 bg-blue-500/10 rounded-lg p-4 border border-blue-500/20">
<p class="text-sm text-blue-300">
<strong class="text-blue-400">Plus:</strong> Secure workflows between internal and external partners — without changing how you work.
</p>
</div>
</div>
</section>
<!-- CTA -->
<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">Secure Your Inbox Today</h3>
<p class="text-base text-gray-300 mb-6 max-w-2xl mx-auto">
Dont let your most trusted communication channel become your weakest link. CypSec locks it down — without locking you in.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a href="mailto:contact@cypsec.de?subject=Secure%20Email%20Setup"
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>Request Secure Email Setup</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>
<!-- 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/secure-emails" class="hover:text-white transition-colors">Secure Emails</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>