dealspace/website/features.html

605 lines
35 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features — Dealspace</title>
<meta name="description" content="Request-centric workflow, AI matching, role-based access, and enterprise security. See what makes Dealspace different.">
<!-- OpenGraph -->
<meta property="og:title" content="Features — Dealspace">
<meta property="og:description" content="Request-centric workflow, AI matching, role-based access, and enterprise security. See what makes Dealspace different.">
<meta property="og:url" content="https://muskepo.com/features">
<meta property="og:type" content="website">
<meta property="og:image" content="https://muskepo.com/og-image.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Features — Dealspace">
<meta name="twitter:description" content="Request-centric workflow, AI matching, role-based access, and enterprise security. See what makes Dealspace different.">
<meta name="twitter:image" content="https://muskepo.com/og-image.png">
<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">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#0F1B35',
'navy-light': '#1a2847',
slate: '#2B4680',
gold: '#C9A84C',
'gold-light': '#d4b85f',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
}
}
}
}
</script>
<style>
html { scroll-behavior: smooth; }
.gradient-text {
background: linear-gradient(135deg, #C9A84C 0%, #d4b85f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-navy font-sans text-white antialiased">
<!-- Navigation -->
<nav class="fixed top-0 left-0 right-0 z-50 bg-navy/95 backdrop-blur-sm border-b border-white/10">
<div class="max-w-7xl mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<a href="index.html" class="flex items-center space-x-2">
<span class="text-2xl font-bold text-white">Deal<span class="text-gold">space</span></span>
</a>
<div class="hidden md:flex items-center space-x-8">
<a href="features.html" class="text-white font-medium">Features</a>
<a href="security.html" class="text-gray-300 hover:text-white transition-colors">Security</a>
<a href="pricing.html" class="text-gray-300 hover:text-white transition-colors">Pricing</a>
<a href="/app/login" class="text-gray-300 hover:text-white transition-colors">Sign In</a>
<a href="index.html#demo" class="bg-gold hover:bg-gold-light text-navy font-semibold px-5 py-2.5 rounded-lg transition-colors">Request Demo</a>
</div>
<button class="md:hidden text-white" aria-label="Toggle mobile menu" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden pt-4 pb-2 space-y-3">
<a href="features.html" class="block text-white font-medium">Features</a>
<a href="security.html" class="block text-gray-300 hover:text-white">Security</a>
<a href="pricing.html" class="block text-gray-300 hover:text-white">Pricing</a>
<a href="/app/login" class="block text-gray-300 hover:text-white">Sign In</a>
<a href="index.html#demo" class="inline-block bg-gold text-navy font-semibold px-5 py-2.5 rounded-lg mt-2">Request Demo</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="pt-32 pb-16 px-6 border-b border-white/10">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">
Features Built for <span class="gradient-text">Real Deals</span>
</h1>
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
Not another document repository with features bolted on. Dealspace is designed from first principles for how M&A transactions actually work.
</p>
</div>
</section>
<!-- Feature 1: Request-Centric -->
<section class="py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<div class="inline-block bg-gold/20 text-gold text-sm font-medium px-3 py-1 rounded-full mb-6">Core Architecture</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Request-Centric Workflow</h2>
<p class="text-gray-400 text-lg mb-8 leading-relaxed">
Traditional VDRs are document-centric — you upload files into folders and hope people find them. Dealspace flips the model: the Request is the unit of work.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Structured request lists</span>
<p class="text-gray-400 mt-1">Issue specific, trackable requests to the seller. No ambiguity about what's needed.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Status at a glance</span>
<p class="text-gray-400 mt-1">Open, assigned, answered, vetted, published. Know exactly where every request stands.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Threaded communication</span>
<p class="text-gray-400 mt-1">Every request has a complete thread — comments, clarifications, status changes. Full context, always.</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<!-- Request Flow SVG -->
<svg viewBox="0 0 500 400" class="w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glow1" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="30" y="20" width="440" height="360" rx="16" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<!-- Header -->
<rect x="30" y="20" width="440" height="50" rx="16" fill="#2B4680"/>
<rect x="30" y="50" width="440" height="20" fill="#2B4680"/>
<text x="50" y="52" fill="white" font-size="14" font-weight="600">Request List — Project Alpha</text>
<!-- Request items -->
<g>
<rect x="50" y="90" width="400" height="60" rx="8" fill="#0F1B35" stroke="#2B4680" stroke-width="1"/>
<circle cx="75" cy="120" r="12" fill="#22c55e"/>
<path d="M70 120 L73 123 L80 116" stroke="white" stroke-width="2" fill="none"/>
<text x="100" y="115" fill="white" font-size="13" font-weight="500">FIN-001: Audited financials FY2024</text>
<text x="100" y="135" fill="#9CA3AF" font-size="11">Published · 3 documents</text>
<rect x="380" y="108" width="55" height="24" rx="4" fill="#22c55e20"/>
<text x="407" y="124" text-anchor="middle" fill="#22c55e" font-size="10" font-weight="500">PUBLISHED</text>
</g>
<g>
<rect x="50" y="160" width="400" height="60" rx="8" fill="#0F1B35" stroke="#C9A84C" stroke-width="2"/>
<circle cx="75" cy="190" r="12" fill="#C9A84C"/>
<text x="75" y="194" text-anchor="middle" fill="#0F1B35" font-size="10" font-weight="bold">!</text>
<text x="100" y="185" fill="white" font-size="13" font-weight="500">FIN-002: Revenue breakdown by segment</text>
<text x="100" y="205" fill="#9CA3AF" font-size="11">Pending review · Uploaded 2h ago</text>
<rect x="380" y="178" width="55" height="24" rx="4" fill="#C9A84C20"/>
<text x="407" y="194" text-anchor="middle" fill="#C9A84C" font-size="10" font-weight="500">REVIEW</text>
</g>
<g>
<rect x="50" y="230" width="400" height="60" rx="8" fill="#0F1B35" stroke="#2B4680" stroke-width="1"/>
<circle cx="75" cy="260" r="12" fill="#3b82f6"/>
<text x="75" y="264" text-anchor="middle" fill="white" font-size="10" font-weight="bold"></text>
<text x="100" y="255" fill="white" font-size="13" font-weight="500">FIN-003: Cap table and equity structure</text>
<text x="100" y="275" fill="#9CA3AF" font-size="11">Assigned to CFO · Due Mar 15</text>
<rect x="380" y="248" width="55" height="24" rx="4" fill="#3b82f620"/>
<text x="407" y="264" text-anchor="middle" fill="#3b82f6" font-size="10" font-weight="500">ASSIGNED</text>
</g>
<g>
<rect x="50" y="300" width="400" height="60" rx="8" fill="#0F1B35" stroke="#2B4680" stroke-width="1"/>
<circle cx="75" cy="330" r="12" fill="#6b7280" stroke="#9CA3AF" stroke-width="1"/>
<text x="100" y="325" fill="white" font-size="13" font-weight="500">FIN-004: Debt schedule and covenants</text>
<text x="100" y="345" fill="#9CA3AF" font-size="11">Open · High priority</text>
<rect x="380" y="318" width="55" height="24" rx="4" fill="#6b728020"/>
<text x="407" y="334" text-anchor="middle" fill="#6b7280" font-size="10" font-weight="500">OPEN</text>
</g>
</svg>
</div>
</div>
</div>
</section>
<!-- Feature 2: Role-Based -->
<section class="py-24 px-6 bg-navy-light">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="order-2 lg:order-1">
<!-- Role-Based Access SVG -->
<svg viewBox="0 0 500 400" class="w-full" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="roleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2B4680"/>
<stop offset="100%" stop-color="#1a2847"/>
</linearGradient>
</defs>
<!-- Central platform -->
<ellipse cx="250" cy="200" rx="100" ry="40" fill="url(#roleGrad)" stroke="#C9A84C" stroke-width="2"/>
<text x="250" y="205" text-anchor="middle" fill="white" font-size="14" font-weight="600">Dealspace</text>
<!-- IB Admin - sees everything -->
<g>
<circle cx="250" cy="60" r="40" fill="#1a2847" stroke="#C9A84C" stroke-width="2"/>
<text x="250" y="55" text-anchor="middle" fill="white" font-size="11" font-weight="600">IB Admin</text>
<text x="250" y="70" text-anchor="middle" fill="#9CA3AF" font-size="9">Full access</text>
<line x1="250" y1="100" x2="250" y2="160" stroke="#C9A84C" stroke-width="2"/>
</g>
<!-- Accountant - sees their tasks -->
<g>
<circle cx="80" cy="280" r="35" fill="#1a2847" stroke="#2B4680" stroke-width="2"/>
<text x="80" y="275" text-anchor="middle" fill="white" font-size="10" font-weight="500">Accountant</text>
<text x="80" y="290" text-anchor="middle" fill="#9CA3AF" font-size="9">3 tasks</text>
<line x1="155" y1="215" x2="110" y2="250" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
</g>
<!-- CFO - sees Finance workstream -->
<g>
<circle cx="180" cy="340" r="35" fill="#1a2847" stroke="#2B4680" stroke-width="2"/>
<text x="180" y="335" text-anchor="middle" fill="white" font-size="10" font-weight="500">CFO</text>
<text x="180" y="350" text-anchor="middle" fill="#9CA3AF" font-size="9">Finance</text>
<line x1="200" y1="235" x2="185" y2="305" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
</g>
<!-- Legal - sees Legal workstream -->
<g>
<circle cx="320" cy="340" r="35" fill="#1a2847" stroke="#2B4680" stroke-width="2"/>
<text x="320" y="335" text-anchor="middle" fill="white" font-size="10" font-weight="500">GC</text>
<text x="320" y="350" text-anchor="middle" fill="#9CA3AF" font-size="9">Legal</text>
<line x1="300" y1="235" x2="315" y2="305" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
</g>
<!-- Buyer - sees data room only -->
<g>
<circle cx="420" cy="280" r="35" fill="#1a2847" stroke="#2B4680" stroke-width="2"/>
<text x="420" y="275" text-anchor="middle" fill="white" font-size="10" font-weight="500">Buyer</text>
<text x="420" y="290" text-anchor="middle" fill="#9CA3AF" font-size="9">Data room</text>
<line x1="345" y1="215" x2="390" y2="250" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
</g>
<!-- Task counts -->
<g fill="#C9A84C">
<circle cx="105" cy="255" r="10"/>
<text x="105" y="259" text-anchor="middle" fill="#0F1B35" font-size="10" font-weight="bold">3</text>
</g>
<g fill="#C9A84C">
<circle cx="195" cy="310" r="10"/>
<text x="195" y="314" text-anchor="middle" fill="#0F1B35" font-size="10" font-weight="bold">12</text>
</g>
<g fill="#C9A84C">
<circle cx="305" cy="310" r="10"/>
<text x="305" y="314" text-anchor="middle" fill="#0F1B35" font-size="10" font-weight="bold">8</text>
</g>
</svg>
</div>
<div class="order-1 lg:order-2">
<div class="inline-block bg-gold/20 text-gold text-sm font-medium px-3 py-1 rounded-full mb-6">Access Control</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Role-Based Simplicity</h2>
<p class="text-gray-400 text-lg mb-8 leading-relaxed">
Most users are workers, not deal managers. When the accountant logs in, they see their task inbox — not a deal room, not workstream dashboards. Just: what do I need to do today.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Workstream-based access</span>
<p class="text-gray-400 mt-1">Finance team sees Finance. Legal sees Legal. No information overload.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Task inbox for contributors</span>
<p class="text-gray-400 mt-1">Assignees see only their tasks. Complete one, it routes to the next person automatically.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Data room separation</span>
<p class="text-gray-400 mt-1">Buyers only see published answers. Internal routing is invisible to external parties.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Feature 3: AI Matching -->
<section class="py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div>
<div class="inline-block bg-gold/20 text-gold text-sm font-medium px-3 py-1 rounded-full mb-6">Intelligence</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">AI Matching with Human Confirmation</h2>
<p class="text-gray-400 text-lg mb-8 leading-relaxed">
When a buyer submits a question, AI searches for existing answers. Match found? Human confirms, answer broadcasts to everyone who asked the same thing. One answer, many recipients.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Semantic search</span>
<p class="text-gray-400 mt-1">Not just keyword matching. AI understands that "revenue breakdown" and "sales by segment" are the same question.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Human in the loop</span>
<p class="text-gray-400 mt-1">AI suggests, human confirms. No answer goes out without explicit approval.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Zero retention</span>
<p class="text-gray-400 mt-1">Deal data never trains AI models. Private data stays private.</p>
</div>
</li>
</ul>
</div>
<div class="relative">
<!-- AI Matching SVG -->
<svg viewBox="0 0 500 400" class="w-full" xmlns="http://www.w3.org/2000/svg">
<!-- Incoming questions -->
<g>
<rect x="20" y="40" width="180" height="50" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="30" y="60" fill="#9CA3AF" font-size="10">Buyer A asks:</text>
<text x="30" y="78" fill="white" font-size="11">"Revenue by segment?"</text>
</g>
<g>
<rect x="20" y="100" width="180" height="50" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="30" y="120" fill="#9CA3AF" font-size="10">Buyer B asks:</text>
<text x="30" y="138" fill="white" font-size="11">"Sales breakdown?"</text>
</g>
<g>
<rect x="20" y="160" width="180" height="50" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="30" y="180" fill="#9CA3AF" font-size="10">Buyer C asks:</text>
<text x="30" y="198" fill="white" font-size="11">"Segment performance?"</text>
</g>
<!-- Arrows to AI -->
<path d="M200 65 L250 180" stroke="#2B4680" stroke-width="2" marker-end="url(#arrow)"/>
<path d="M200 125 L250 180" stroke="#2B4680" stroke-width="2"/>
<path d="M200 185 L250 190" stroke="#2B4680" stroke-width="2"/>
<!-- AI Matching box -->
<rect x="250" y="150" width="100" height="80" rx="12" fill="#C9A84C" stroke="#d4b85f" stroke-width="2"/>
<text x="300" y="180" text-anchor="middle" fill="#0F1B35" font-size="12" font-weight="600">AI Matching</text>
<text x="300" y="200" text-anchor="middle" fill="#0F1B35" font-size="10">87% match</text>
<text x="300" y="215" text-anchor="middle" fill="#0F1B35" font-size="10">→ FIN-002</text>
<!-- Confirm button -->
<rect x="265" y="245" width="70" height="28" rx="6" fill="#22c55e"/>
<text x="300" y="264" text-anchor="middle" fill="white" font-size="11" font-weight="500">Confirm</text>
<!-- Existing answer -->
<rect x="300" y="310" width="180" height="70" rx="8" fill="#1a2847" stroke="#C9A84C" stroke-width="2"/>
<text x="310" y="335" fill="#C9A84C" font-size="11" font-weight="500">FIN-002</text>
<text x="310" y="355" fill="white" font-size="11">Revenue breakdown</text>
<text x="310" y="370" fill="#9CA3AF" font-size="10">Published · 2 documents</text>
<!-- Arrow from confirm to answer -->
<path d="M300 273 L360 310" stroke="#22c55e" stroke-width="2" stroke-dasharray="4 4"/>
<!-- Broadcast arrows -->
<path d="M390 310 L470 60" stroke="#C9A84C" stroke-width="2" stroke-dasharray="4 4"/>
<path d="M400 310 L470 120" stroke="#C9A84C" stroke-width="2" stroke-dasharray="4 4"/>
<path d="M410 310 L470 180" stroke="#C9A84C" stroke-width="2" stroke-dasharray="4 4"/>
<!-- Broadcast labels -->
<text x="470" y="60" fill="#C9A84C" font-size="10">→ Buyer A</text>
<text x="470" y="120" fill="#C9A84C" font-size="10">→ Buyer B</text>
<text x="470" y="180" fill="#C9A84C" font-size="10">→ Buyer C</text>
</svg>
</div>
</div>
</div>
</section>
<!-- Feature 4: Integrations -->
<section class="py-24 px-6 bg-navy-light">
<div class="max-w-7xl mx-auto">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="order-2 lg:order-1">
<!-- Integration SVG -->
<svg viewBox="0 0 500 350" class="w-full" xmlns="http://www.w3.org/2000/svg">
<!-- Central Dealspace -->
<rect x="175" y="125" width="150" height="100" rx="12" fill="#2B4680" stroke="#C9A84C" stroke-width="2"/>
<text x="250" y="165" text-anchor="middle" fill="white" font-size="14" font-weight="600">Dealspace</text>
<text x="250" y="185" text-anchor="middle" fill="#C9A84C" font-size="11">Central Hub</text>
<!-- Email -->
<rect x="30" y="40" width="100" height="60" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="80" y="65" text-anchor="middle" fill="white" font-size="12" font-weight="500">Email</text>
<text x="80" y="82" text-anchor="middle" fill="#9CA3AF" font-size="10">Reply inline</text>
<line x1="130" y1="70" x2="175" y2="140" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
<!-- Slack -->
<rect x="30" y="145" width="100" height="60" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="80" y="170" text-anchor="middle" fill="white" font-size="12" font-weight="500">Slack</text>
<text x="80" y="187" text-anchor="middle" fill="#9CA3AF" font-size="10">Threaded updates</text>
<line x1="130" y1="175" x2="175" y2="175" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
<!-- Teams -->
<rect x="30" y="250" width="100" height="60" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="80" y="275" text-anchor="middle" fill="white" font-size="12" font-weight="500">Teams</text>
<text x="80" y="292" text-anchor="middle" fill="#9CA3AF" font-size="10">Direct messages</text>
<line x1="130" y1="280" x2="175" y2="210" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
<!-- Web -->
<rect x="370" y="40" width="100" height="60" rx="8" fill="#1a2847" stroke="#C9A84C" stroke-width="2"/>
<text x="420" y="65" text-anchor="middle" fill="white" font-size="12" font-weight="500">Web App</text>
<text x="420" y="82" text-anchor="middle" fill="#9CA3AF" font-size="10">Full access</text>
<line x1="325" y1="140" x2="370" y2="70" stroke="#C9A84C" stroke-width="2"/>
<!-- Mobile -->
<rect x="370" y="145" width="100" height="60" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="420" y="170" text-anchor="middle" fill="white" font-size="12" font-weight="500">Mobile</text>
<text x="420" y="187" text-anchor="middle" fill="#9CA3AF" font-size="10">On the go</text>
<line x1="325" y1="175" x2="370" y2="175" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
<!-- API -->
<rect x="370" y="250" width="100" height="60" rx="8" fill="#1a2847" stroke="#2B4680" stroke-width="1"/>
<text x="420" y="275" text-anchor="middle" fill="white" font-size="12" font-weight="500">API</text>
<text x="420" y="292" text-anchor="middle" fill="#9CA3AF" font-size="10">Integrations</text>
<line x1="325" y1="210" x2="370" y2="280" stroke="#2B4680" stroke-width="2" stroke-dasharray="4 4"/>
</svg>
</div>
<div class="order-1 lg:order-2">
<div class="inline-block bg-gold/20 text-gold text-sm font-medium px-3 py-1 rounded-full mb-6">Integrations</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Work Where You Already Work</h2>
<p class="text-gray-400 text-lg mb-8 leading-relaxed">
Not everyone needs to log into another platform. Participants can respond via email, Slack, or Teams. Requests route to people wherever they are.
</p>
<ul class="space-y-4">
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Email replies</span>
<p class="text-gray-400 mt-1">Reply to request notifications directly from your inbox. Attachments included.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">Slack/Teams threads</span>
<p class="text-gray-400 mt-1">Get notified in your existing channels. Respond without context switching.</p>
</div>
</li>
<li class="flex items-start">
<svg class="w-6 h-6 text-gold mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<div>
<span class="font-semibold text-white">No login required</span>
<p class="text-gray-400 mt-1">Basic responses work without an account. Full features available in the web app.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Feature 5: Audit Trail -->
<section class="py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<div class="inline-block bg-gold/20 text-gold text-sm font-medium px-3 py-1 rounded-full mb-6">Compliance</div>
<h2 class="text-3xl md:text-4xl font-bold mb-6">Complete Audit Trail</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Every access, every download, every routing hop — logged. When compliance asks "who saw what when," you have the answer.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-navy-light border border-white/10 rounded-xl p-8 text-center">
<div class="w-16 h-16 bg-slate/30 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Access Logs</h3>
<p class="text-gray-400">Who viewed which document, when, and from where. IP addresses, timestamps, duration.</p>
</div>
<div class="bg-navy-light border border-white/10 rounded-xl p-8 text-center">
<div class="w-16 h-16 bg-slate/30 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Download Tracking</h3>
<p class="text-gray-400">Every file download recorded. Watermarked with user identity for leak tracing.</p>
</div>
<div class="bg-navy-light border border-white/10 rounded-xl p-8 text-center">
<div class="w-16 h-16 bg-slate/30 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Workflow History</h3>
<p class="text-gray-400">Full chain of custody. Who assigned, who approved, who published — every transition logged.</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-24 px-6 bg-navy-light border-t border-white/10">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">See It In Action</h2>
<p class="text-xl text-gray-400 mb-8">
30-minute demo. See how Dealspace transforms M&A workflow.
</p>
<a href="index.html#demo" class="inline-block bg-gold hover:bg-gold-light text-navy font-semibold px-8 py-4 rounded-lg transition-colors">
Request a Demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/10 py-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8 mb-12">
<div>
<span class="text-2xl font-bold text-white">Deal<span class="text-gold">space</span></span>
<p class="text-gray-400 mt-4">The M&A workflow platform that Investment Banks trust.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="features.html" class="hover:text-white transition-colors">Features</a></li>
<li><a href="security.html" class="hover:text-white transition-colors">Security</a></li>
<li><a href="pricing.html" class="hover:text-white transition-colors">Pricing</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="privacy.html" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="terms.html" class="hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="dpa.html" class="hover:text-white transition-colors">DPA</a></li>
<li><a href="soc2.html" class="hover:text-white transition-colors">SOC 2</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Contact</h4>
<ul class="space-y-2 text-gray-400">
<li><a href="mailto:sales@dealspace.io" class="hover:text-white transition-colors">sales@dealspace.io</a></li>
<li><a href="mailto:security@dealspace.io" class="hover:text-white transition-colors">security@dealspace.io</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm">© 2026 Muskepo B.V. All rights reserved.</p>
<p class="text-gray-500 text-sm mt-4 md:mt-0">Amsterdam · New York · London</p>
</div>
</div>
</footer>
<link rel="stylesheet" href="/chat.css">
<script src="/chat.js"></script>
</body>
</html>