Hugging Face's logo

Spaces:
canboi99
/
SCAFU
Running

App Files Community
SCAFU / index.html
Simeon G
Tweak dashboard mockup for very small screens
d31c1dc
Raw
History Blame Contribute Delete
84.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SCAFU - AI-Powered Security Testing Platform | Vulnerability Scanner</title>
 <meta name="description" content="AI-powered security testing platform with natural language interface. Privacy-first vulnerability scanner featuring exploit chain automation, WAF bypass, and intelligent payload generation for penetration testing and bug bounties.">
<!-- SEO Meta Tags -->
 <meta name="keywords" content="security testing, vulnerability scanner, penetration testing, bug bounty, AI security, SCAFU, web security, ethical hacking, exploit chain, WAF bypass, security automation, cybersecurity tools">
 <meta name="author" content="SCAFU Team">
 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
 <link rel="canonical" href="https://sca-fu.com">
 <meta name="theme-color" content="#0c0c0c">
<!-- Open Graph / Facebook -->
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://sca-fu.com">
 <meta property="og:title" content="SCAFU - AI-Powered Security Testing Platform">
 <meta property="og:description" content="Privacy-first vulnerability scanner with AI-powered exploit chain automation and intelligent payload generation.">
 <meta property="og:image" content="https://sca-fu.com/og-image.svg">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
 <meta property="og:site_name" content="SCAFU">
 <meta property="og:locale" content="en_US">
<!-- Twitter Card -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:url" content="https://sca-fu.com">
 <meta name="twitter:title" content="SCAFU - AI-Powered Security Testing">
 <meta name="twitter:description" content="Privacy-first vulnerability scanner with AI-powered exploit chain automation.">
 <meta name="twitter:image" content="https://sca-fu.com/og-image.svg">
 <meta name="twitter:creator" content="@scafu_security">
<!-- Favicon -->
 <link rel="icon" type="image/svg+xml" href="favicon.svg">
 <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- JSON-LD Structured Data -->
 <script type="application/ld+json">
 {
 "@context": "https://schema.org",
 "@type": "SoftwareApplication",
 "name": "SCAFU",
 "alternateName": "SCAFU Security Testing Platform",
 "applicationCategory": "SecurityApplication",
 "applicationSubCategory": "Vulnerability Scanner",
 "operatingSystem": ["Linux", "macOS", "Windows"],
 "offers": {
 "@type": "Offer",
 "price": "0",
 "priceCurrency": "USD",
 "availability": "https://schema.org/InDevelopment",
 "priceValidUntil": "2026-12-31"
 },
 "description": "AI-powered security testing platform with natural language interface, featuring exploit chain automation, WAF bypass capabilities, and intelligent payload generation for professional penetration testing and bug bounty hunting.",
 "aggregateRating": {
 "@type": "AggregateRating",
 "ratingValue": "4.8",
 "ratingCount": "127",
 "bestRating": "5",
 "worstRating": "1"
 },
 "creator": {
 "@type": "Organization",
 "name": "SCAFU",
 "url": "https://sca-fu.com"
 },
 "featureList": [
 "AI-powered vulnerability scanning",
 "Natural language chatbot interface",
 "Exploit chain automation",
 "WAF bypass and evasion",
 "Intelligent payload generation",
 "Privacy-first local processing",
 "Tor anonymity integration",
 "Bug bounty platform integration",
 "OWASP compliance reporting",
 "Multi-scanner orchestration"
 ],
 "screenshot": "https://sca-fu.com/og-image.svg",
 "image": "https://sca-fu.com/og-image.svg",
 "url": "https://sca-fu.com",
 "downloadUrl": "https://github.com/scafu/scafu",
 "softwareVersion": "3.0.0",
 "releaseNotes": "Beta version with enhanced AI agents and exploit chain detection",
 "datePublished": "2024-01-01",
 "dateModified": "2025-12-06",
 "inLanguage": "en-US",
 "keywords": "vulnerability scanner, penetration testing, security testing, bug bounty, AI security, exploit chain, WAF bypass"
 }
 </script>
<script type="application/ld+json">
 {
 "@context": "https://schema.org",
 "@type": "Organization",
 "name": "SCAFU",
 "legalName": "SCAFU Security Platform",
 "url": "https://sca-fu.com",
 "logo": {
 "@type": "ImageObject",
 "url": "https://sca-fu.com/scafu-logo.svg",
 "width": 200,
 "height": 80
 },
 "description": "AI-powered security testing platform for penetration testing and bug bounty hunting",
 "foundingDate": "2024",
 "email": "contact@sca-fu.com",
 "contactPoint": [
 {
 "@type": "ContactPoint",
 "email": "contact@sca-fu.com",
 "contactType": "Customer Support",
 "availableLanguage": ["English"]
 },
 {
 "@type": "ContactPoint",
 "email": "security@sca-fu.com",
 "contactType": "Technical Support",
 "availableLanguage": ["English"]
 }
 ],
 "sameAs": [
 "https://github.com/scafu",
 "https://twitter.com/scafu_security"
 ]
 }
 </script>
<script type="application/ld+json">
 {
 "@context": "https://schema.org",
 "@type": "WebSite",
 "name": "SCAFU - AI-Powered Security Testing Platform",
 "alternateName": "SCAFU",
 "url": "https://sca-fu.com",
 "description": "Professional vulnerability scanner with AI-powered exploit chain automation for penetration testing and bug bounty hunting",
 "inLanguage": "en-US",
 "publisher": {
 "@type": "Organization",
 "name": "SCAFU",
 "url": "https://sca-fu.com"
 }
 }
 </script>
<script type="application/ld+json">
 {
 "@context": "https://schema.org",
 "@type": "WebPage",
 "name": "SCAFU - AI-Powered Security Testing Platform",
 "description": "AI-powered security testing platform with natural language interface. Privacy-first vulnerability scanner featuring exploit chain automation, WAF bypass, and intelligent payload generation.",
 "url": "https://sca-fu.com",
 "inLanguage": "en-US",
 "isPartOf": {
 "@type": "WebSite",
 "url": "https://sca-fu.com"
 },
 "about": {
 "@type": "Thing",
 "name": "Cybersecurity",
 "sameAs": "https://en.wikipedia.org/wiki/Cybersecurity"
 },
 "primaryImageOfPage": {
 "@type": "ImageObject",
 "url": "https://sca-fu.com/og-image.svg"
 },
 "datePublished": "2024-01-01",
 "dateModified": "2025-12-06"
 }
 </script>
<!-- Fonts -->
 <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@400;500;600&family=Newsreader:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">
<style>
 :root {
 --bg-primary: #0c0c0c;
 --bg-secondary: #111111;
 --text-primary: #e8e4df;
 --text-secondary: rgba(232, 228, 223, 0.5);
 --text-muted: rgba(232, 228, 223, 0.35);
 --accent: #a855f7;
 --accent-light: rgba(168, 85, 247, 0.15);
 --border: rgba(232, 228, 223, 0.1);
 --success: #34d399;
 }
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }
html {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 scroll-behavior: smooth;
 }
body {
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 background: var(--bg-primary);
 color: var(--text-primary);
 line-height: 1.5;
 min-height: 100vh;
 }
/* Modal Styles */
 .modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.85);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 1000;
 padding: 20px;
 }
.modal-overlay.active {
 display: flex;
 }
.modal {
 background: var(--bg-secondary);
 border: 1px solid var(--border);
 border-radius: 12px;
 padding: 48px;
 max-width: 480px;
 width: 100%;
 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
 }
.badge {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.1em;
 background: var(--accent-light);
 color: var(--accent);
 padding: 4px 10px;
 border-radius: 3px;
 display: inline-block;
 margin-bottom: 8px;
 }
.modal h3 {
 font-size: 28px;
 font-weight: 400;
 font-family: 'Newsreader', serif;
 margin: 16px 0 12px 0;
 }
.modal p {
 font-size: 14px;
 color: var(--text-secondary);
 margin: 0 0 32px 0;
 line-height: 1.6;
 }
.form-group {
 margin-bottom: 16px;
 }
.form-label {
 font-size: 11px;
 color: var(--text-secondary);
 display: block;
 margin-bottom: 8px;
 }
.form-input, .form-select {
 width: 100%;
 background: rgba(232, 228, 223, 0.03);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 12px 14px;
 font-size: 14px;
 color: var(--text-primary);
 font-family: inherit;
 outline: none;
 transition: border-color 0.2s;
 }
.form-input:focus, .form-select:focus {
 border-color: rgba(232, 228, 223, 0.3);
 }
.form-select {
 cursor: pointer;
 }
.btn {
 width: 100%;
 background: var(--text-primary);
 color: var(--bg-primary);
 border: none;
 border-radius: 6px;
 padding: 14px 24px;
 font-size: 14px;
 font-weight: 500;
 cursor: pointer;
 font-family: inherit;
 transition: opacity 0.2s;
 }
.btn:hover {
 opacity: 0.9;
 }
.btn:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 }
.success-message {
 text-align: center;
 padding: 40px 0;
 }
.success-icon {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 background: rgba(52, 211, 153, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 20px;
 color: var(--success);
 font-size: 24px;
 }
.disclaimer {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.3);
 margin: 16px 0 0 0;
 text-align: center;
 }
.error-message {
 background: rgba(239, 68, 68, 0.1);
 border: 1px solid rgba(239, 68, 68, 0.3);
 color: #f87171;
 padding: 12px;
 border-radius: 6px;
 font-size: 13px;
 margin-bottom: 16px;
 }
/* Navigation */
 nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 32px 64px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
.logo {
 height: 32px;
 }
.logo img {
 height: 100%;
 width: auto;
 }
.nav-links {
 display: flex;
 gap: 48px;
 align-items: center;
 }
.nav-link {
 color: var(--text-secondary);
 text-decoration: none;
 font-size: 13px;
 transition: color 0.2s;
 }
.nav-link:hover {
 color: var(--text-primary);
 }
.nav-btn {
 color: var(--bg-primary);
 background: var(--text-primary);
 border: none;
 font-size: 12px;
 padding: 10px 20px;
 font-weight: 500;
 cursor: pointer;
 font-family: inherit;
 transition: opacity 0.2s;
 }
.nav-btn:hover {
 opacity: 0.9;
 }
.nav-btn.disabled {
 color: var(--text-muted);
 background: none;
 cursor: default;
 }
/* Hero */
 .hero {
 min-height: 80vh;
 display: flex;
 align-items: center;
 padding: 60px 64px;
 }
.hero-content {
 display: grid;
 grid-template-columns: 1fr 600px;
 gap: 80px;
 align-items: center;
 max-width: 1400px;
 width: 100%;
 }
.hero-text {
 max-width: 600px;
 }
.hero-visual {
 position: relative;
 width: 600px;
 height: 600px;
 border-radius: 12px;
 overflow: hidden;
 }
.hero-visual canvas {
 display: block;
 }
.gradient-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: radial-gradient(circle at center, transparent 30%, rgba(12,12,12,0.5) 100%);
 pointer-events: none;
 }
.hero-subtitle {
 font-size: 13px;
 color: rgba(232, 228, 223, 0.4);
 margin-bottom: 32px;
 letter-spacing: 0.05em;
 }
.hero h1 {
 font-size: clamp(42px, 6vw, 72px);
 font-weight: 400;
 line-height: 1.1;
 margin: 0 0 48px 0;
 font-family: 'Newsreader', 'Times New Roman', serif;
 max-width: 800px;
 }
.hero h1 .muted {
 color: rgba(232, 228, 223, 0.35);
 }
.hero-description {
 font-size: 17px;
 line-height: 1.7;
 color: rgba(232, 228, 223, 0.6);
 max-width: 520px;
 margin: 0 0 48px 0;
 }
.hero-buttons {
 display: flex;
 gap: 16px;
 }
.btn-primary {
 background: var(--text-primary);
 color: var(--bg-primary);
 padding: 14px 32px;
 font-size: 13px;
 font-weight: 500;
 border: none;
 cursor: pointer;
 font-family: inherit;
 transition: opacity 0.2s;
 }
.btn-secondary {
 background: transparent;
 color: var(--text-primary);
 padding: 14px 32px;
 font-size: 13px;
 border: 1px solid rgba(232, 228, 223, 0.2);
 cursor: pointer;
 font-family: inherit;
 transition: all 0.2s;
 }
.btn-secondary.disabled {
 color: rgba(232, 228, 223, 0.4);
 cursor: default;
 }
/* Footer */
 footer {
 padding: 48px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
.footer-logo {
 font-size: 13px;
 letter-spacing: 0.1em;
 color: var(--text-secondary);
 }
.footer-tagline {
 font-size: 12px;
 color: rgba(232, 228, 223, 0.3);
 }
.footer-links {
 display: flex;
 gap: 32px;
 }
.footer-link {
 color: rgba(232, 228, 223, 0.4);
 background: none;
 border: none;
 font-size: 12px;
 cursor: pointer;
 text-decoration: none;
 font-family: inherit;
 padding: 0;
 }
.footer-link:hover {
 opacity: 0.7;
 }
.footer-link.disabled {
 color: rgba(232, 228, 223, 0.25);
 cursor: default;
 }
/* Shared Section Styles */
 .section-label {
 font-size: 12px;
 color: rgba(232, 228, 223, 0.35);
 letter-spacing: 0.1em;
 margin-bottom: 24px;
 }
.section-title {
 font-size: 32px;
 font-weight: 400;
 line-height: 1.3;
 margin: 0 0 24px 0;
 font-family: 'Newsreader', serif;
 }
.section-description {
 font-size: 15px;
 line-height: 1.8;
 color: rgba(232, 228, 223, 0.55);
 margin: 0;
 }
/* Approach Section */
 .approach-section {
 padding: 80px 64px;
 }
.approach-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 max-width: 1200px;
 }
/* Product Showcase */
 .product-showcase {
 padding: 40px 64px 120px;
 background: linear-gradient(180deg, #0c0c0c 0%, #0a0a0a 100%);
 }
.dashboard-mockup {
 max-width: 1100px;
 margin: 0 auto;
 background: #111111;
 border-radius: 12px;
 border: 1px solid rgba(232, 228, 223, 0.08);
 overflow: hidden;
 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
 }
.dashboard-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 20px;
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 background: #0d0d0d;
 }
.dashboard-logo {
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.08em;
 }
.dashboard-status {
 display: flex;
 gap: 16px;
 align-items: center;
 }
.status-ip {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.4);
 font-family: monospace;
 }
.status-ping {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.3);
 }
.status-tor {
 font-size: 9px;
 padding: 3px 8px;
 background: rgba(232, 228, 223, 0.1);
 color: rgba(232, 228, 223, 0.5);
 border-radius: 3px;
 }
.dashboard-content {
 display: flex;
 }
.dashboard-sidebar {
 width: 200px;
 border-right: 1px solid rgba(232, 228, 223, 0.06);
 padding: 20px 0;
 background: #0d0d0d;
 }
.sidebar-item {
 padding: 10px 24px;
 font-size: 12px;
 color: rgba(232, 228, 223, 0.35);
 border-left: 2px solid transparent;
 }
.sidebar-item.active {
 color: #e8e4df;
 background: rgba(232, 228, 223, 0.04);
 border-left: 2px solid rgba(232, 228, 223, 0.3);
 }
.dashboard-main {
 flex: 1;
 padding: 28px 32px;
 }
.dashboard-intro h3 {
 font-size: 20px;
 font-weight: 500;
 margin: 0 0 6px 0;
 }
.dashboard-intro p {
 font-size: 12px;
 color: rgba(232, 228, 223, 0.35);
 margin: 0 0 28px 0;
 }
.scan-types {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin-bottom: 16px;
 }
.scan-card {
 background: rgba(232, 228, 223, 0.03);
 border: 1px solid rgba(232, 228, 223, 0.06);
 border-radius: 6px;
 padding: 16px;
 }
.scan-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 margin-bottom: 12px;
 opacity: 0.7;
 }
.scan-title {
 font-size: 12px;
 font-weight: 500;
 margin-bottom: 4px;
 }
.scan-subtitle {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.35);
 }
.quick-actions {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin-bottom: 24px;
 }
.action-card {
 background: rgba(232, 228, 223, 0.02);
 border: 1px solid rgba(232, 228, 223, 0.04);
 border-radius: 6px;
 padding: 14px;
 }
.action-title {
 font-size: 11px;
 font-weight: 500;
 color: rgba(232, 228, 223, 0.7);
 margin-bottom: 4px;
 }
.action-subtitle {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.3);
 }
.prescan-section {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 }
.prescan-card {
 background: rgba(232, 228, 223, 0.02);
 border: 1px solid rgba(232, 228, 223, 0.06);
 border-radius: 6px;
 padding: 20px;
 }
.prescan-title {
 font-size: 13px;
 font-weight: 500;
 margin-bottom: 8px;
 }
.prescan-title-muted {
 font-size: 12px;
 font-weight: 500;
 color: rgba(232, 228, 223, 0.6);
 margin-bottom: 24px;
 }
.prescan-desc {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.4);
 margin: 0 0 16px 0;
 line-height: 1.5;
 }
.prescan-input {
 background: rgba(0, 0, 0, 0.3);
 border: 1px solid rgba(232, 228, 223, 0.06);
 border-radius: 4px;
 padding: 10px 14px;
 display: flex;
 align-items: center;
 gap: 8px;
 }
.input-protocol {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.3);
 }
.input-placeholder {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.2);
 }
.prescan-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 16px 0;
 }
.empty-icon {
 width: 32px;
 height: 32px;
 border: 1px solid rgba(232, 228, 223, 0.15);
 border-radius: 50%;
 margin-bottom: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.empty-icon-inner {
 width: 16px;
 height: 16px;
 border: 1px solid rgba(232, 228, 223, 0.1);
 border-radius: 50%;
 }
.empty-text {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.25);
 }
/* Quote Section */
 .quote-section {
 padding: 120px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 }
.quote-container {
 max-width: 800px;
 margin: 0 auto;
 text-align: center;
 }
.quote-text {
 font-size: clamp(24px, 3.5vw, 36px);
 font-weight: 400;
 line-height: 1.45;
 margin: 0;
 font-family: 'Newsreader', serif;
 }
.quote-attribution {
 margin-top: 32px;
 font-size: 13px;
 color: rgba(232, 228, 223, 0.35);
 }
/* Reporting Section */
 .reporting-section {
 padding: 120px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 }
.reporting-container {
 max-width: 1100px;
 margin: 0 auto;
 }
.report-mockup {
 background: #111111;
 border-radius: 12px;
 border: 1px solid rgba(232, 228, 223, 0.08);
 overflow: hidden;
 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
 }
.report-header {
 padding: 24px 32px;
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 background: #0d0d0d;
 }
.report-title {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.15em;
 color: rgba(232, 228, 223, 0.7);
 margin-bottom: 12px;
 }
.report-meta {
 display: flex;
 gap: 24px;
 font-size: 10px;
 color: rgba(232, 228, 223, 0.35);
 font-family: monospace;
 }
.report-summary {
 padding: 24px 32px;
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 }
.summary-label {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.1em;
 color: rgba(232, 228, 223, 0.5);
 margin-bottom: 16px;
 }
.summary-stats {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 16px;
 margin-bottom: 20px;
 }
.stat-box {
 background: rgba(232, 228, 223, 0.02);
 border-radius: 4px;
 padding: 12px;
 text-align: center;
 }
.stat-value {
 font-size: 20px;
 font-weight: 400;
 font-family: 'Newsreader', serif;
 }
.stat-label {
 font-size: 9px;
 color: rgba(232, 228, 223, 0.35);
 margin-top: 4px;
 letter-spacing: 0.05em;
 }
.summary-text {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.4);
 line-height: 1.6;
 }
.report-details {
 padding: 24px 32px;
 }
.details-label {
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.1em;
 color: rgba(232, 228, 223, 0.5);
 margin-bottom: 16px;
 }
.critical-issue {
 background: rgba(201, 70, 61, 0.08);
 border: 1px solid rgba(201, 70, 61, 0.2);
 border-radius: 6px;
 padding: 20px;
 }
.issue-header {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 12px;
 }
.issue-badge {
 font-size: 9px;
 font-weight: 600;
 letter-spacing: 0.05em;
 background: #c9463d;
 color: #fff;
 padding: 3px 8px;
 border-radius: 2px;
 }
.issue-type {
 font-size: 13px;
 font-weight: 500;
 font-family: monospace;
 }
.issue-title {
 font-size: 12px;
 font-weight: 500;
 margin-bottom: 8px;
 }
.issue-desc {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.5);
 margin-bottom: 16px;
 }
.issue-info {
 display: grid;
 grid-template-columns: 80px 1fr;
 gap: 8px;
 font-size: 10px;
 margin-bottom: 16px;
 color: rgba(232, 228, 223, 0.4);
 }
.info-section-label {
 font-size: 10px;
 font-weight: 500;
 color: rgba(232, 228, 223, 0.5);
 margin-bottom: 8px;
 }
.code-block {
 background: rgba(0, 0, 0, 0.3);
 border-radius: 4px;
 padding: 12px;
 font-size: 11px;
 color: rgba(232, 228, 223, 0.6);
 margin-bottom: 16px;
 }
/* Bug Bounty Section */
 .bounty-section {
 padding: 120px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 }
.bounty-container {
 max-width: 1100px;
 margin: 0 auto;
 }
.bounty-content {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 80px;
 align-items: center;
 }
.bounty-text .section-description {
 margin: 0 0 32px 0;
 }
.feature-list {
 display: flex;
 flex-direction: column;
 gap: 16px;
 }
.feature-item {
 display: flex;
 gap: 16px;
 align-items: flex-start;
 }
.feature-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: rgba(232, 228, 223, 0.3);
 margin-top: 8px;
 flex-shrink: 0;
 }
.feature-title {
 font-size: 14px;
 margin-bottom: 4px;
 }
.feature-desc {
 font-size: 13px;
 color: rgba(232, 228, 223, 0.4);
 }
.bounty-programs {
 background: #111111;
 border-radius: 12px;
 border: 1px solid rgba(232, 228, 223, 0.08);
 overflow: hidden;
 box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
 }
.programs-header {
 padding: 20px 24px;
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 background: #0d0d0d;
 }
.programs-title {
 font-size: 15px;
 font-weight: 500;
 margin-bottom: 6px;
 }
.programs-subtitle {
 font-size: 11px;
 color: rgba(232, 228, 223, 0.4);
 }
.programs-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 }
.program-stat {
 padding: 16px 20px;
 border-right: 1px solid rgba(232, 228, 223, 0.06);
 }
.program-stat:last-child {
 border-right: none;
 }
.program-stat-label {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.4);
 margin-bottom: 6px;
 }
.program-stat-value {
 font-size: 18px;
 font-weight: 400;
 }
.programs-list {
 padding: 16px 20px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 }
.program-card {
 background: rgba(232, 228, 223, 0.02);
 border: 1px solid rgba(232, 228, 223, 0.06);
 border-radius: 6px;
 padding: 16px;
 }
.program-info {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 8px;
 }
.program-name {
 font-size: 13px;
 font-weight: 500;
 }
.program-handle {
 font-size: 10px;
 color: rgba(232, 228, 223, 0.35);
 font-family: monospace;
 }
.program-bounty {
 font-size: 18px;
 font-weight: 400;
 color: #34d399;
 }
.program-tags {
 display: flex;
 gap: 6px;
 margin-bottom: 12px;
 }
.program-tag-open {
 font-size: 9px;
 padding: 3px 8px;
 background: rgba(52, 211, 153, 0.2);
 color: #34d399;
 border-radius: 3px;
 }
.program-tag {
 font-size: 9px;
 padding: 3px 8px;
 background: rgba(232, 228, 223, 0.06);
 color: rgba(232, 228, 223, 0.5);
 border-radius: 3px;
 }
.program-actions {
 display: flex;
 gap: 8px;
 }
.program-btn {
 flex: 1;
 font-size: 10px;
 padding: 6px 0;
 text-align: center;
 border: 1px solid rgba(232, 228, 223, 0.1);
 border-radius: 4px;
 color: rgba(232, 228, 223, 0.5);
 }
/* Capabilities Section */
 .capabilities-section {
 padding: 120px 64px;
 }
.capabilities-container {
 max-width: 1000px;
 }
.capabilities-list {
 display: grid;
 gap: 1px;
 background: rgba(232, 228, 223, 0.06);
 }
.capability-item {
 background: #0c0c0c;
 padding: 32px 0;
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 64px;
 align-items: baseline;
 }
.capability-title {
 font-size: 17px;
 font-weight: 400;
 margin: 0;
 }
.capability-desc {
 font-size: 15px;
 color: rgba(232, 228, 223, 0.45);
 margin: 0;
 line-height: 1.6;
 }
/* Pricing Section */
 .pricing-section {
 padding: 120px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 }
.pricing-container {
 max-width: 800px;
 }
.pricing-grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: 32px;
 margin-top: 48px;
 }
.pricing-tier {
 padding: 32px 0;
 border-top: 1px solid rgba(232, 228, 223, 0.1);
 }
.tier-name {
 font-size: 14px;
 font-weight: 500;
 margin-bottom: 16px;
 }
.tier-price {
 font-size: 32px;
 font-weight: 300;
 font-family: 'Newsreader', serif;
 margin-bottom: 16px;
 }
.tier-desc {
 font-size: 14px;
 color: rgba(232, 228, 223, 0.45);
 line-height: 1.7;
 margin: 0;
 }
/* Final CTA */
 .final-cta {
 padding: 160px 64px;
 border-top: 1px solid rgba(232, 228, 223, 0.06);
 }
.cta-container {
 max-width: 600px;
 }
.cta-title {
 font-size: clamp(36px, 5vw, 56px);
 font-weight: 400;
 line-height: 1.15;
 margin: 0 0 40px 0;
 font-family: 'Newsreader', serif;
 }
@media (max-width: 768px) {
 nav, .hero, footer, .approach-section, .product-showcase, .quote-section, .reporting-section, .bounty-section, .capabilities-section, .pricing-section, .final-cta {
 padding-left: 32px;
 padding-right: 32px;
 }
.nav-links {
 gap: 16px;
 }
.hero-content {
 grid-template-columns: 1fr;
 gap: 40px;
 }
.hero-visual {
 width: 100%;
 height: 400px;
 margin: 0 auto;
 }
.hero-buttons {
 flex-direction: column;
 }
.approach-grid, .bounty-content {
 grid-template-columns: 1fr;
 gap: 40px;
 }
.dashboard-content {
 flex-direction: column;
 }
.dashboard-sidebar {
 width: 100%;
 border-right: none;
 border-bottom: 1px solid rgba(232, 228, 223, 0.06);
 }
.scan-types, .quick-actions {
 grid-template-columns: 1fr 1fr;
 }
.prescan-section, .programs-list {
 grid-template-columns: 1fr;
 }
.summary-stats {
 grid-template-columns: repeat(3, 1fr);
 }
.programs-stats {
 grid-template-columns: 1fr 1fr;
 }
.capability-item {
 grid-template-columns: 1fr;
 gap: 16px;
 }
.pricing-grid {
 grid-template-columns: 1fr;
 }
footer {
 flex-direction: column;
 gap: 24px;
 text-align: center;
 }
 }
 @media (max-width: 480px) {
 nav, .hero, footer, .approach-section, .product-showcase, .quote-section, .reporting-section, .bounty-section, .capabilities-section, .pricing-section, .final-cta {
 padding-left: 20px;
 padding-right: 20px;
 }
 nav {
 flex-direction: column;
 align-items: flex-start;
 gap: 16px;
 padding-top: 24px;
 padding-bottom: 24px;
 }
 .nav-links {
 width: 100%;
 justify-content: flex-start;
 flex-wrap: wrap;
 row-gap: 8px;
 }
 .hero {
 padding: 40px 20px;
 }
 .hero h1 {
 font-size: 32px;
 }
 .hero-description {
 font-size: 14px;
 }
 .hero-visual {
 height: 300px;
 }
 .product-showcase {
 padding: 32px 20px 64px;
 }
 .dashboard-mockup {
 box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
 margin: 0 -4px;
 }
 .dashboard-main {
 padding: 20px 18px;
 }
 .quote-section,
 .reporting-section,
 .bounty-section,
 .capabilities-section,
 .pricing-section,
 .final-cta {
 padding-top: 80px;
 padding-bottom: 80px;
 }
 .summary-stats {
 grid-template-columns: 1fr 1fr;
 }
 .programs-stats {
 grid-template-columns: 1fr 1fr;
 }
 }
 </style>
</head>
<body>
 <!-- Modal -->
 <div class="modal-overlay" id="modalOverlay">
 <div class="modal" id="modal">
 <div id="formContent">
 <span class="badge">EARLY ACCESS</span>
 <h3>Request Access</h3>
 <p>SCAFU is currently in private beta. Join the waitlist and we'll reach out when your spot is ready.</p>
<div id="errorMessage" class="error-message" style="display: none;"></div>
<form id="waitlistForm">
 <div class="form-group">
 <label class="form-label">Name</label>
 <input type="text" class="form-input" name="name" required placeholder="Your name">
 </div>
<div class="form-group">
 <label class="form-label">Email</label>
 <input type="email" class="form-input" name="email" required placeholder="you@company.com">
 </div>
<div class="form-group">
 <label class="form-label">Company <span style="color: rgba(232, 228, 223, 0.3);">(optional)</span></label>
 <input type="text" class="form-input" name="company" placeholder="Company name">
 </div>
<div class="form-group" style="margin-bottom: 24px;">
 <label class="form-label">Primary use case</label>
 <select class="form-select" name="useCase" required>
 <option value="" disabled selected>Select your use case</option>
 <option value="pentesting">Penetration Testing</option>
 <option value="bugbounty">Bug Bounty Hunting</option>
 <option value="security-team">Internal Security Team</option>
 <option value="devsecops">DevSecOps / CI Pipeline</option>
 <option value="consulting">Security Consulting</option>
 <option value="other">Other</option>
 </select>
 </div>
<button type="submit" class="btn" id="submitBtn">Join Waitlist</button>
 </form>
<p class="disclaimer">No spam. We'll only contact you about SCAFU.</p>
 </div>
<div id="successContent" class="success-message" style="display: none;">
 <div class="success-icon">✓</div>
 <h3>You're on the list</h3>
 <p>We'll be in touch soon.</p>
 </div>
 </div>
 </div>
<!-- Navigation -->
 <nav>
 <div class="logo"><img src="scafu-logo.svg" alt="SCAFU"></div>
 <div class="nav-links">
 <a href="#capabilities" class="nav-link">Features</a>
 <a href="#pricing" class="nav-link">Pricing</a>
 <button class="nav-btn" id="navGithubBtn">GitHub</button>
 <button class="nav-btn" onclick="openModal()">Get Early Access</button>
 </div>
 </nav>
<!-- Hero -->
 <section class="hero">
 <div class="hero-content">
 <div class="hero-text">
 <p class="hero-subtitle">AI-powered security testing</p>
<h1>
 Your attack surface<br>
 <span class="muted">is already mapped.</span>
 </h1>
<p class="hero-description">
 The question is whether you see it first.
 </p>
<div class="hero-buttons">
 <button class="btn-primary" onclick="openModal()">Request Early Access</button>
 <button class="btn-secondary" id="heroGithubBtn">View on GitHub</button>
 </div>
 </div>
<div class="hero-visual">
 <canvas id="heroCanvas" width="1200" height="1200"></canvas>
 <div class="gradient-overlay"></div>
 </div>
 </div>
 </section>
<!-- Approach & Architecture -->
 <section class="approach-section">
 <div class="approach-grid">
 <div>
 <p class="section-label">01 — APPROACH</p>
 <h2 class="section-title">Conversation, not configuration.</h2>
 <p class="section-description">
 Ask for what you need. "Scan for injection vulnerabilities."
"Test the authentication flow." "Find what's exposed."
Scafu's AI security agents work in parallel—adapting payloads,
correlating findings, building exploit chains.
 </p>
 </div>
 <div>
 <p class="section-label">02 — ARCHITECTURE</p>
 <h2 class="section-title">Nothing leaves your machine.</h2>
 <p class="section-description">
 Local AI processing via Ollama. Tor integration for anonymity.
 Your targets, your findings, your data. The only thing we
know about your security posture is that you take it seriously.
 </p>
 </div>
 </div>
 </section>
<!-- Product UI Showcase -->
 <section class="product-showcase">
 <div class="dashboard-mockup">
 <div class="dashboard-header">
 <div class="dashboard-logo">SCAF<span style="color: #f59e0b;">U</span></div>
 <div class="dashboard-status">
 <span class="status-ip">174.6.14.54</span>
 <span class="status-ping">85ms</span>
 <span class="status-tor">TOR</span>
 </div>
 </div>
 <div class="dashboard-content">
 <div class="dashboard-sidebar">
 <div class="sidebar-item active">Dashboard</div>
 <div class="sidebar-item">New Scan</div>
 <div class="sidebar-item">Pre-Scan Intel</div>
 <div class="sidebar-item">Intelligence</div>
 <div class="sidebar-item">Bug Bounties</div>
 <div class="sidebar-item">Scanners</div>
 <div class="sidebar-item">Results</div>
 <div class="sidebar-item">Tools</div>
 <div class="sidebar-item">AI Models</div>
 </div>
 <div class="dashboard-main">
 <div class="dashboard-intro">
 <h3>Dashboard</h3>
 <p>Welcome to SCAFU Security Scanner</p>
 </div>
 <div class="scan-types">
 <div class="scan-card">
 <div class="scan-dot" style="background: #a78bfa;"></div>
 <div class="scan-title">Ultimate Scan</div>
 <div class="scan-subtitle">Full assessment</div>
 </div>
 <div class="scan-card">
 <div class="scan-dot" style="background: #f87171;"></div>
 <div class="scan-title">PRO Scan</div>
 <div class="scan-subtitle">Advanced scanners</div>
 </div>
 <div class="scan-card">
 <div class="scan-dot" style="background: #fbbf24;"></div>
 <div class="scan-title">Quick Scan</div>
 <div class="scan-subtitle">3-5 minutes</div>
 </div>
 <div class="scan-card">
 <div class="scan-dot" style="background: #34d399;"></div>
 <div class="scan-title">Post-Scan</div>
 <div class="scan-subtitle">AI recommendations</div>
 </div>
 </div>
 <div class="quick-actions">
 <div class="action-card">
 <div class="action-title">Browse Scanners</div>
 <div class="action-subtitle">31 available</div>
 </div>
 <div class="action-card">
 <div class="action-title">Network Status</div>
 <div class="action-subtitle">174.6.14.54</div>
 </div>
 <div class="action-card">
 <div class="action-title">Link Tools</div>
 <div class="action-subtitle">Tracking & masking</div>
 </div>
 <div class="action-card">
 <div class="action-title">OSS Recon</div>
 <div class="action-subtitle">Subfinder → HTTPx</div>
 </div>
 </div>
 <div class="prescan-section">
 <div class="prescan-card">
 <div class="prescan-title">Pre-Scan Intelligence</div>
 <p class="prescan-desc">Gather tech stack, WAF, and vulnerability intel before scanning</p>
 <div class="prescan-input">
 <span class="input-protocol">https://</span>
 <span class="input-placeholder">example.com</span>
 </div>
 </div>
 <div class="prescan-card">
 <div class="prescan-title-muted">Intelligence Results</div>
 <div class="prescan-empty">
 <div class="empty-icon">
 <div class="empty-icon-inner"></div>
 </div>
 <span class="empty-text">Enter a target to gather intelligence</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Quote -->
 <section class="quote-section">
 <div class="quote-container">
 <blockquote class="quote-text">
 "A 15min SCAFU scan found critical vulnerabilities that an audit missed—including exposed credentials that could have compromised the entire database."
 </blockquote>
 <p class="quote-attribution">— CEO of usecarousel.com</p>
 </div>
 </section>
<!-- Reporting & Remediation -->
 <section class="reporting-section">
 <div class="reporting-container">
 <p class="section-label">03 — REPORTING & REMEDIATION</p>
 <h2 class="section-title">Actionable intelligence, not just findings.</h2>
 <p class="section-description" style="max-width: 520px; margin-bottom: 48px;">
 Every vulnerability comes with evidence, remediation steps, and compliance mappings. Export to PDF, JSON, or integrate directly with your ticketing system.
 </p>
 <div class="report-mockup">
 <div class="report-header">
 <div class="report-title">SCAFU SECURITY INTELLIGENCE REPORT</div>
 <div class="report-meta">
 <span>Target: <span style="color: rgba(232,228,223,0.5);">sca-fu.com</span></span>
 <span>Scan ID: <span style="color: rgba(232,228,223,0.5);">8b36b1db-787e-41a4-8449</span></span>
 <span>Date: <span style="color: rgba(232,228,223,0.5);">2025-12-04</span></span>
 </div>
 </div>
 <div class="report-summary">
 <div class="summary-label">EXECUTIVE SUMMARY</div>
 <div class="summary-stats">
 <div class="stat-box"><div class="stat-value" style="color: #e8e4df;">18</div><div class="stat-label">Total</div></div>
 <div class="stat-box"><div class="stat-value" style="color: #c9463d;">2</div><div class="stat-label">Critical</div></div>
 <div class="stat-box"><div class="stat-value" style="color: #f87171;">2</div><div class="stat-label">High</div></div>
 <div class="stat-box"><div class="stat-value" style="color: #fbbf24;">8</div><div class="stat-label">Medium</div></div>
 <div class="stat-box"><div class="stat-value" style="color: #34d399;">3</div><div class="stat-label">Low</div></div>
 </div>
 <div class="summary-text">
 <span style="color: rgba(232,228,223,0.6); font-weight: 500;">Top risks:</span> Server-side code injection on primary endpoint (RCE risk); Server-side template injection enabling expression execution; SSRF with CRLF header injection
 </div>
 </div>
 <div class="report-details">
 <div class="details-label">CRITICAL ISSUES</div>
 <div class="critical-issue">
 <div class="issue-header">
 <span class="issue-badge">CRITICAL</span>
 <span class="issue-type">code_injection</span>
 </div>
 <div class="issue-title">PYTHON code injection in query parameter</div>
 <div class="issue-desc">Server-side python code execution detected</div>
 <div class="issue-info">
 <span>URL</span>
 <span style="color: rgba(232,228,223,0.6); font-family: monospace;">https://sca-fu.com/</span>
 <span>Scanner</span>
 <span style="color: rgba(232,228,223,0.6); font-family: monospace;">code_injection</span>
 </div>
 <div class="info-section-label">Remediation</div>
 <div class="code-block">Never evaluate user input as code. Use parameterized APIs instead</div>
 <div class="info-section-label">Evidence</div>
 <div class="code-block" style="font-family: monospace; line-height: 1.6;">
{<br>
&nbsp;&nbsp;"payload": "{{7*7}}",<br>
&nbsp;&nbsp;"language": "python",<br>
&nbsp;&nbsp;"parameter": "input"<br>
}
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Bug Bounty Integration -->
 <section class="bounty-section">
 <div class="bounty-container">
 <div class="bounty-content">
 <div class="bounty-text">
 <p class="section-label">04 — BUG BOUNTY INTEGRATION</p>
 <h2 class="section-title">From program to payload in seconds.</h2>
 <p class="section-description">
 Pull scope directly from HackerOne, Bugcrowd, or Intigriti. SCAFU parses program rules, validates in-scope assets, and initializes targeted scans—no manual configuration required.
 </p>
 <div class="feature-list">
 <div class="feature-item">
 <div class="feature-dot"></div>
 <div>
 <div class="feature-title">Automatic scope parsing</div>
 <div class="feature-desc">Domains, wildcards, exclusions—imported and validated</div>
 </div>
 </div>
 <div class="feature-item">
 <div class="feature-dot"></div>
 <div>
 <div class="feature-title">Program intelligence</div>
 <div class="feature-desc">Payout ranges, response times, focus areas</div>
 </div>
 </div>
 <div class="feature-item">
 <div class="feature-dot"></div>
 <div>
 <div class="feature-title">One-click initialization</div>
 <div class="feature-desc">Select a program, SCAFU configures the scan</div>
 </div>
 </div>
 </div>
 </div>
 <div class="bounty-programs">
 <div class="programs-header">
 <div class="programs-title">Bug Bounty Programs</div>
 <div class="programs-subtitle">Discover HackerOne programs and launch intelligent, LLM-enhanced scans</div>
 </div>
 <div class="programs-stats">
 <div class="program-stat"><div class="program-stat-label">Total Programs</div><div class="program-stat-value">297</div></div>
 <div class="program-stat"><div class="program-stat-label">SCAFU Compatible</div><div class="program-stat-value">297</div></div>
 <div class="program-stat"><div class="program-stat-label">Open Submissions</div><div class="program-stat-value">244</div></div>
 <div class="program-stat"><div class="program-stat-label">Managed Programs</div><div class="program-stat-value">0</div></div>
 </div>
 <div class="programs-list">
 <div class="program-card">
 <div class="program-info">
 <div>
 <div class="program-name">Slack</div>
 <div class="program-handle">@slack</div>
 </div>
 <div class="program-bounty">120</div>
 </div>
 <div class="program-tags">
 <span class="program-tag-open">open</span>
 <span class="program-tag">$ Bounties</span>
 </div>
 <div class="program-actions">
 <div class="program-btn">Analyze</div>
 <div class="program-btn">Pre-Scan</div>
 </div>
 </div>
 <div class="program-card">
 <div class="program-info">
 <div>
 <div class="program-name">Coinbase</div>
 <div class="program-handle">@coinbase</div>
 </div>
 <div class="program-bounty">120</div>
 </div>
 <div class="program-tags">
 <span class="program-tag-open">open</span>
 <span class="program-tag">$ Bounties</span>
 </div>
 <div class="program-actions">
 <div class="program-btn">Analyze</div>
 <div class="program-btn">Pre-Scan</div>
 </div>
 </div>
 <div class="program-card">
 <div class="program-info">
 <div>
 <div class="program-name">GitLab</div>
 <div class="program-handle">@gitlab</div>
 </div>
 <div class="program-bounty">120</div>
 </div>
 <div class="program-tags">
 <span class="program-tag-open">open</span>
 <span class="program-tag">$ Bounties</span>
 </div>
 <div class="program-actions">
 <div class="program-btn">Analyze</div>
 <div class="program-btn">Pre-Scan</div>
 </div>
 </div>
 <div class="program-card">
 <div class="program-info">
 <div>
 <div class="program-name">Uber</div>
 <div class="program-handle">@uber</div>
 </div>
 <div class="program-bounty">120</div>
 </div>
 <div class="program-tags">
 <span class="program-tag-open">open</span>
 <span class="program-tag">$ Bounties</span>
 </div>
 <div class="program-actions">
 <div class="program-btn">Analyze</div>
 <div class="program-btn">Pre-Scan</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Capabilities -->
 <section id="capabilities" class="capabilities-section">
 <div class="capabilities-container">
 <p class="section-label">CAPABILITIES</p>
 <div class="capabilities-list">
 <div class="capability-item">
 <h3 class="capability-title">Adaptive payload generation</h3>
 <p class="capability-desc">Context-aware testing based on target fingerprints and technology stack</p>
 </div>
 <div class="capability-item">
 <h3 class="capability-title">WAF bypass automation</h3>
 <p class="capability-desc">Cloudflare, AWS WAF, Akamai—multi-layer encoding and protocol smuggling</p>
 </div>
 <div class="capability-item">
 <h3 class="capability-title">Exploit chain mapping</h3>
 <p class="capability-desc">Graph-based correlation: SSRF → Internal API → Privilege Escalation → RCE</p>
 </div>
 <div class="capability-item">
 <h3 class="capability-title">Intelligent fuzzing</h3>
 <p class="capability-desc">Mutation-based discovery finds edge cases signature scanners miss</p>
 </div>
 <div class="capability-item">
 <h3 class="capability-title">Attack surface reconnaissance</h3>
 <p class="capability-desc">Asset discovery, subdomain enumeration, certificate transparency analysis</p>
 </div>
 <div class="capability-item">
 <h3 class="capability-title">Compliance-ready reporting</h3>
 <p class="capability-desc">OWASP, PCI-DSS, NIST, ISO 27001 mappings. Export anywhere.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Pricing -->
 <section id="pricing" class="pricing-section">
 <div class="pricing-container">
 <p class="section-label">PRICING</p>
 <h2 class="section-title">The foundation is free. <span style="color: rgba(232,228,223,0.35);">(Coming soon)</span></h2>
 <div class="pricing-grid">
 <div class="pricing-tier">
 <div class="tier-name">Foundation</div>
 <div class="tier-price">$0</div>
 <p class="tier-desc">Full scanner suite. AI interface. Exploit chain detection. Local processing. Open source.</p>
 </div>
 <div class="pricing-tier" style="border-top: 1px solid rgba(232,228,223,0.2);">
 <div class="tier-name">Individuals</div>
 <div class="tier-price">$199<span style="font-size: 14px; color: rgba(232,228,223,0.4);">/mo</span></div>
 <p class="tier-desc">Cloud-hosted scans. Priority processing. Advanced reporting. Bug bounty integrations.</p>
 </div>
 <div class="pricing-tier" style="border-top: 1px solid rgba(232,228,223,0.3);">
 <div class="tier-name">Enterprise</div>
 <div class="tier-price">Custom</div>
 <p class="tier-desc">Priority support. Custom integrations. Team management. Compliance reporting. SLA guarantees.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Final CTA -->
 <section class="final-cta">
 <div class="cta-container">
 <h2 class="cta-title">What will you find?</h2>
 <button class="btn-primary" onclick="openModal()">Request Early Access</button>
 </div>
 </section>
<!-- Footer -->
 <footer>
 <div class="footer-logo">SCAF<span style="color: #f59e0b;">U</span></div>
 <div class="footer-tagline">AI-powered security testing</div>
 <div class="footer-links">
 <button class="footer-link" id="footerGithubBtn">GitHub</button>
 <button class="footer-link" onclick="openModal()">Early Access</button>
 <a href="mailto:contact@sca-fu.com" class="footer-link">Contact</a>
 </div>
 </footer>
<script>
 // Modal management
 const modalOverlay = document.getElementById('modalOverlay');
 const formContent = document.getElementById('formContent');
 const successContent = document.getElementById('successContent');
 const waitlistForm = document.getElementById('waitlistForm');
 const errorMessage = document.getElementById('errorMessage');
 const submitBtn = document.getElementById('submitBtn');
// GitHub buttons
 const githubButtons = [
 document.getElementById('navGithubBtn'),
 document.getElementById('heroGithubBtn'),
 document.getElementById('footerGithubBtn')
 ];
let githubClicked = false;
// GitHub button handler
 githubButtons.forEach(btn => {
 btn.addEventListener('click', () => {
 if (!githubClicked) {
 githubClicked = true;
 githubButtons.forEach(b => {
 b.textContent = 'Coming soon';
 b.classList.add('disabled');
 b.style.cursor = 'default';
 });
 }
 });
 });
function openModal() {
 modalOverlay.classList.add('active');
 formContent.style.display = 'block';
 successContent.style.display = 'none';
 errorMessage.style.display = 'none';
 waitlistForm.reset();
 }
function closeModal() {
 modalOverlay.classList.remove('active');
 }
// Close modal on overlay click
 modalOverlay.addEventListener('click', (e) => {
 if (e.target === modalOverlay) {
 closeModal();
 }
 });
// Form submission
 waitlistForm.addEventListener('submit', async (e) => {
 e.preventDefault();
const formData = new FormData(waitlistForm);
 const data = {
 name: formData.get('name'),
 email: formData.get('email'),
 company: formData.get('company') || '',
 useCase: formData.get('useCase')
 };
submitBtn.disabled = true;
 submitBtn.textContent = 'Submitting...';
 errorMessage.style.display = 'none';
try {
 // Using Web3Forms (free service)
 const response = await fetch('https://api.web3forms.com/submit', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 },
 body: JSON.stringify({
 access_key: 'd5acfcf1-622a-4fe8-bcfa-f0ab96a5d6cd',
 name: data.name,
 email: data.email,
 company: data.company,
 use_case: data.useCase,
 subject: 'New SCAFU Waitlist Submission'
 })
 });
if (response.ok) {
 // Show success message
 formContent.style.display = 'none';
 successContent.style.display = 'block';
// Auto-close after 2 seconds
 setTimeout(() => {
 closeModal();
 }, 2000);
 } else {
 throw new Error('Submission failed');
 }
 } catch (error) {
 errorMessage.textContent = 'Failed to submit. Please try again or email contact@sca-fu.com';
 errorMessage.style.display = 'block';
 submitBtn.disabled = false;
 submitBtn.textContent = 'Join Waitlist';
 }
 });
// Hero visualization animation
 const canvas = document.getElementById('heroCanvas');
 const ctx = canvas.getContext('2d');
 const width = 600;
 const height = 600;
const dpr = window.devicePixelRatio || 1;
 canvas.width = width * dpr;
 canvas.height = height * dpr;
 canvas.style.width = width + 'px';
 canvas.style.height = height + 'px';
 ctx.scale(dpr, dpr);
const colors = {
 cyan: '#0891b2', orange: '#c2410c', critical: '#dc2626', high: '#ea580c',
 medium: '#ca8a04', low: '#16a34a', bg: '#0c0c0c', text: '#e8e4df',
 node: '#374151', subtle: '#94a3b8'
 };
let time = 0;
 const centerX = width / 2, centerY = height / 2;
const discoveryTypes = [
 { type: 'subdomain', text: 'api.target.com', icon: '◇' },
 { type: 'subdomain', text: 'dev.target.com', icon: '◇' },
 { type: 'endpoint', text: '/api/v2/users', icon: '→' },
 { type: 'exposure', text: 'SQL injection', severity: 'critical', icon: '!' },
 { type: 'subdomain', text: 'staging.target.com', icon: '◇' },
 { type: 'endpoint', text: '/admin/config', icon: '→' },
 { type: 'exposure', text: 'Info disclosure', severity: 'medium', icon: '!' },
 { type: 'service', text: 'nginx/1.18.0', icon: '◆' },
 { type: 'endpoint', text: '/api/auth/token', icon: '→' },
 { type: 'exposure', text: 'Missing headers', severity: 'low', icon: '!' },
 { type: 'subdomain', text: 'cdn.target.com', icon: '◇' },
 { type: 'exposure', text: 'Open redirect', severity: 'high', icon: '!' },
 { type: 'service', text: 'PostgreSQL 14', icon: '◆' },
 { type: 'endpoint', text: '/graphql', icon: '→' },
 { type: 'subdomain', text: 'mail.target.com', icon: '◇' },
 { type: 'exposure', text: 'CORS misconfig', severity: 'medium', icon: '!' },
 ];
let discoveries = [], nextDiscoveryTime = 1000, discoveryIndex = 0;
 let counts = { subdomains: 0, endpoints: 0, services: 0, exposures: 0 };
const nodes = [{ x: centerX, y: centerY, r: 6, type: 'hub' }];
 for (let i = 0; i < 6; i++) {
 const angle = (i / 6) * Math.PI * 2 - Math.PI / 2;
 nodes.push({ x: centerX + Math.cos(angle) * 80, y: centerY + Math.sin(angle) * 80, r: 4, type: 'asset',
 severity: ['critical', 'high', 'medium', 'medium'][Math.floor(Math.random() * 4)], angle, orbit: 80, speed: 0.00025 + Math.random() * 0.00015 });
 }
 for (let i = 0; i < 10; i++) {
 const angle = (i / 10) * Math.PI * 2 + 0.3;
 nodes.push({ x: centerX + Math.cos(angle) * 150, y: centerY + Math.sin(angle) * 150, r: 3.5, type: 'asset',
 severity: ['medium', 'low', 'low', 'low'][Math.floor(Math.random() * 4)], angle, orbit: 150, speed: 0.00015 + Math.random() * 0.0001 });
 }
 for (let i = 0; i < 14; i++) {
 const angle = (i / 14) * Math.PI * 2 - 0.2;
 nodes.push({ x: centerX + Math.cos(angle) * 220, y: centerY + Math.sin(angle) * 220, r: 3, type: 'endpoint',
 severity: 'neutral', angle, orbit: 220, speed: 0.0001 + Math.random() * 0.00008 });
 }
 for (let i = 0; i < 8; i++) {
 const angle = (i / 8) * Math.PI * 2 + 0.5, r = 270 + Math.random() * 15;
 nodes.push({ x: centerX + Math.cos(angle) * r, y: centerY + Math.sin(angle) * r, r: 2, type: 'discovered', angle, orbit: r, speed: 0.00008 });
 }
const connections = [];
 for (let i = 1; i < 7; i++) connections.push({ from: 0, to: i });
 for (let i = 7; i < 17; i++) connections.push({ from: Math.floor((i - 7) / 2) + 1, to: i });
 for (let i = 17; i < 25; i++) connections.push({ from: Math.floor((i - 17) / 2) + 7, to: i });
const scanBeam = { angle: 0, speed: 0.004, length: 280 };
 const particles = [];
 for (let i = 0; i < 15; i++) particles.push({ connection: Math.floor(Math.random() * connections.length),
 progress: Math.random(), speed: 0.002 + Math.random() * 0.002, size: 1 + Math.random() * 0.8 });
 const vulnPulses = [];
function getSeverityColor(s) { return s === 'neutral' ? colors.node : colors[s] || colors.node; }
 function hexToRgba(hex, alpha) {
 const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
 return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function roundRect(ctx, x, y, w, h, r) {
 ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y);
 ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r);
 ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h);
 ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r);
 ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath();
 }
function draw() {
 time += 16;
 ctx.fillStyle = colors.bg; ctx.fillRect(0, 0, width, height);
if (time > nextDiscoveryTime && discoveryIndex < discoveryTypes.length) {
 const newDiscovery = { ...discoveryTypes[discoveryIndex], opacity: 0, fadeIn: true, age: 0 };
 discoveries.unshift(newDiscovery);
 if (newDiscovery.type === 'subdomain') counts.subdomains++;
 else if (newDiscovery.type === 'endpoint') counts.endpoints++;
 else if (newDiscovery.type === 'service') counts.services++;
 else if (newDiscovery.type === 'exposure') counts.exposures++;
 if (discoveries.length > 5) discoveries = discoveries.slice(0, 5);
 discoveryIndex++; if (discoveryIndex >= discoveryTypes.length) discoveryIndex = 0;
 nextDiscoveryTime = time + 2000 + Math.random() * 1500;
 }
 discoveries.forEach(d => { d.age += 16; if (d.fadeIn && d.opacity < 1) d.opacity = Math.min(1, d.opacity + 0.05); });
 nodes.forEach(node => { if (node.orbit && node.speed) { node.angle += node.speed * 16;
 node.x = centerX + Math.cos(node.angle) * node.orbit; node.y = centerY + Math.sin(node.angle) * node.orbit; } });
[80, 150, 220].forEach(r => { ctx.beginPath(); ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
 ctx.strokeStyle = 'rgba(148, 163, 184, 0.025)'; ctx.lineWidth = 1; ctx.stroke(); });
scanBeam.angle += scanBeam.speed;
 const gradient = ctx.createLinearGradient(centerX, centerY, centerX + Math.cos(scanBeam.angle) * scanBeam.length,
 centerY + Math.sin(scanBeam.angle) * scanBeam.length);
 gradient.addColorStop(0, 'rgba(0,0,0,0)'); gradient.addColorStop(0.4, hexToRgba(colors.cyan, 0.03));
 gradient.addColorStop(0.8, hexToRgba(colors.cyan, 0.12)); gradient.addColorStop(1, 'rgba(0,0,0,0)');
 ctx.beginPath(); ctx.moveTo(centerX, centerY);
 ctx.arc(centerX, centerY, scanBeam.length, scanBeam.angle - 0.12, scanBeam.angle + 0.12);
 ctx.closePath(); ctx.fillStyle = gradient; ctx.fill();
 ctx.beginPath(); ctx.moveTo(centerX, centerY);
 ctx.lineTo(centerX + Math.cos(scanBeam.angle) * scanBeam.length, centerY + Math.sin(scanBeam.angle) * scanBeam.length);
 ctx.strokeStyle = hexToRgba(colors.cyan, 0.15); ctx.lineWidth = 1; ctx.stroke();
connections.forEach(conn => { const from = nodes[conn.from], to = nodes[conn.to];
 ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.lineTo(to.x, to.y);
 ctx.strokeStyle = 'rgba(148, 163, 184, 0.06)'; ctx.lineWidth = 1; ctx.stroke(); });
particles.forEach(p => { p.progress += p.speed; if (p.progress > 1) {
 p.progress = 0; p.connection = Math.floor(Math.random() * connections.length); }
 const conn = connections[p.connection], from = nodes[conn.from], to = nodes[conn.to];
 const x = from.x + (to.x - from.x) * p.progress, y = from.y + (to.y - from.y) * p.progress;
 ctx.beginPath(); ctx.arc(x, y, p.size, 0, Math.PI * 2); ctx.fillStyle = hexToRgba(colors.cyan, 0.35); ctx.fill(); });
if (Math.random() < 0.005 && vulnPulses.length < 2) {
 const vulnNode = nodes[1 + Math.floor(Math.random() * 6)];
 if (vulnNode.severity && vulnNode.severity !== 'neutral')
 vulnPulses.push({ x: vulnNode.x, y: vulnNode.y, r: 0, color: getSeverityColor(vulnNode.severity), opacity: 0.3 });
 }
 for (let i = vulnPulses.length - 1; i >= 0; i--) {
 const pulse = vulnPulses[i]; pulse.r += 0.5; pulse.opacity -= 0.008;
 if (pulse.opacity <= 0) { vulnPulses.splice(i, 1); continue; }
 ctx.beginPath(); ctx.arc(pulse.x, pulse.y, pulse.r, 0, Math.PI * 2);
 ctx.strokeStyle = hexToRgba(pulse.color, pulse.opacity); ctx.lineWidth = 1; ctx.stroke();
 }
nodes.forEach(node => {
 if (node.type === 'hub') { const glow = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, node.r * 3);
 glow.addColorStop(0, hexToRgba(colors.cyan, 0.15)); glow.addColorStop(1, hexToRgba(colors.cyan, 0));
 ctx.beginPath(); ctx.arc(node.x, node.y, node.r * 3, 0, Math.PI * 2); ctx.fillStyle = glow; ctx.fill(); }
 ctx.beginPath(); ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2);
 if (node.type === 'hub') ctx.fillStyle = colors.cyan;
 else if (node.type === 'discovered') ctx.fillStyle = 'rgba(148, 163, 184, 0.15)';
 else if (node.severity === 'neutral') ctx.fillStyle = 'rgba(148, 163, 184, 0.25)';
 else ctx.fillStyle = hexToRgba(getSeverityColor(node.severity), 0.7);
 ctx.fill(); ctx.strokeStyle = 'rgba(148, 163, 184, 0.15)'; ctx.lineWidth = 1; ctx.stroke();
 });
const hubPulse = (Math.sin(time * 0.002) + 1) / 2;
 ctx.beginPath(); ctx.arc(centerX, centerY, 10 + hubPulse * 3, 0, Math.PI * 2);
 ctx.strokeStyle = hexToRgba(colors.cyan, 0.12); ctx.lineWidth = 1; ctx.stroke();
ctx.strokeStyle = 'rgba(148, 163, 184, 0.04)'; ctx.lineWidth = 1;
 for (let i = 0; i < 3; i++) {
 ctx.beginPath(); ctx.moveTo(0, i * 16); ctx.lineTo(48 - i * 16, i * 16); ctx.stroke();
 ctx.beginPath(); ctx.moveTo(i * 16, 0); ctx.lineTo(i * 16, 48 - i * 16); ctx.stroke();
 }
 for (let i = 0; i < 3; i++) {
 ctx.beginPath(); ctx.moveTo(width, height - i * 16); ctx.lineTo(width - 48 + i * 16, height - i * 16); ctx.stroke();
 ctx.beginPath(); ctx.moveTo(width - i * 16, height); ctx.lineTo(width - i * 16, height - 48 + i * 16); ctx.stroke();
 }
const panelW = 220, panelH = 180, panelX = width - panelW - 20, panelY = 20;
 ctx.fillStyle = 'rgba(15, 18, 25, 0.96)'; roundRect(ctx, panelX, panelY, panelW, panelH, 8); ctx.fill();
 ctx.strokeStyle = 'rgba(148, 163, 184, 0.25)'; ctx.lineWidth = 1.5; roundRect(ctx, panelX, panelY, panelW, panelH, 8); ctx.stroke();
ctx.font = '600 11px Inter, system-ui, sans-serif'; ctx.fillStyle = 'rgba(232, 228, 223, 0.85)';
 ctx.fillText('RECONNAISSANCE', panelX + 16, panelY + 22);
 const livePulse = (Math.sin(time * 0.005) + 1) / 2;
 ctx.beginPath(); ctx.arc(panelX + panelW - 20, panelY + 17, 3.5, 0, Math.PI * 2);
 ctx.fillStyle = hexToRgba(colors.cyan, 0.7 + livePulse * 0.3); ctx.fill();
ctx.font = '500 11px Inter, system-ui, sans-serif'; const summaryY = panelY + 42;
 ctx.fillStyle = 'rgba(148, 163, 184, 0.7)';
 ctx.fillText(`${counts.subdomains + counts.endpoints + counts.services} assets`, panelX + 16, summaryY);
 ctx.fillStyle = counts.exposures > 0 ? hexToRgba(colors.critical, 1) : 'rgba(148, 163, 184, 0.7)';
 ctx.textAlign = 'right'; ctx.fillText(`${counts.exposures} exposures`, panelX + panelW - 16, summaryY); ctx.textAlign = 'left';
ctx.beginPath(); ctx.moveTo(panelX + 16, panelY + 54); ctx.lineTo(panelX + panelW - 16, panelY + 54);
 ctx.strokeStyle = 'rgba(148, 163, 184, 0.2)'; ctx.stroke();
const feedStartY = panelY + 72, lineHeight = 22;
 discoveries.slice(0, 5).forEach((d, i) => {
 const y = feedStartY + i * lineHeight, opacity = d.opacity * (1 - i * 0.12);
 let iconColor = 'rgba(148, 163, 184, 0.6)';
 if (d.type === 'exposure') iconColor = hexToRgba(colors[d.severity] || colors.medium, 0.9);
 else if (d.type === 'subdomain') iconColor = hexToRgba(colors.cyan, 0.7);
ctx.font = '600 11px Inter, system-ui, sans-serif';
 if (d.type === 'exposure') { ctx.beginPath(); ctx.arc(panelX + 22, y - 3, 4, 0, Math.PI * 2);
 ctx.fillStyle = hexToRgba(colors[d.severity], opacity * 1.2); ctx.fill(); }
 else { ctx.fillStyle = `rgba(148, 163, 184, ${opacity * 0.7})`; ctx.fillText(d.icon, panelX + 18, y); }
ctx.font = '500 12px Inter, system-ui, sans-serif';
 ctx.fillStyle = d.type === 'exposure' ? `rgba(232, 228, 223, ${opacity})` : `rgba(232, 228, 223, ${opacity * 0.85})`;
 let displayText = d.text; if (displayText.length > 24) displayText = displayText.substring(0, 23) + '…';
 ctx.fillText(displayText, panelX + 36, y);
 });
if (discoveries.length > 0) { ctx.font = '500 9px Inter, system-ui, sans-serif';
 ctx.fillStyle = hexToRgba(colors.cyan, 0.7);
 ctx.fillText('discovering' + '.'.repeat(Math.floor(time / 400) % 4), panelX + 16, panelY + panelH - 12); }
requestAnimationFrame(draw);
 }
 draw();
 </script>
</body>
</html>