aura-security 0.4.0 → 0.4.2

package/visualizer/landing.html

@@ -82,6 +82,7 @@
       right: 0;
       z-index: 100;
       padding: 1rem 2rem;
+      background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, transparent 100%);
     }
 
     .nav-inner {
@@ -619,6 +620,329 @@
       }
     }
 
+    /* What This Replaces Section */
+    .replaces-section {
+      padding: 5rem 2rem;
+      background: linear-gradient(180deg, transparent, rgba(239, 68, 68, 0.02), transparent);
+    }
+
+    .replaces-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .replaces-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1rem;
+      margin-top: 2.5rem;
+    }
+
+    .replaces-item {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 1rem 1.25rem;
+      background: rgba(239, 68, 68, 0.05);
+      border: 1px solid rgba(239, 68, 68, 0.15);
+      border-radius: 10px;
+      font-size: 0.9375rem;
+      color: var(--text-secondary);
+    }
+
+    .replaces-item::before {
+      content: '✕';
+      color: #ef4444;
+      font-weight: 600;
+    }
+
+    .replaces-instead {
+      margin-top: 2rem;
+      padding: 1.5rem;
+      background: rgba(16, 185, 129, 0.05);
+      border: 1px solid rgba(16, 185, 129, 0.2);
+      border-radius: 12px;
+      text-align: center;
+    }
+
+    .replaces-instead p {
+      color: var(--text);
+      font-size: 1rem;
+    }
+
+    .replaces-instead span {
+      color: var(--success);
+      font-weight: 600;
+    }
+
+    /* Architecture Section */
+    .architecture-section {
+      padding: 5rem 2rem;
+    }
+
+    .architecture-container {
+      max-width: 1100px;
+      margin: 0 auto;
+    }
+
+    .architecture-flow {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      gap: 0;
+      margin-top: 2.5rem;
+      flex-wrap: nowrap;
+    }
+
+    .arch-step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 0.375rem;
+      padding: 0.75rem 0.75rem;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      min-width: 110px;
+      max-width: 130px;
+    }
+
+    .arch-step .icon {
+      font-size: 1.5rem;
+    }
+
+    .arch-step .label {
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 600;
+      font-size: 0.75rem;
+    }
+
+    .arch-step .sublabel {
+      font-size: 0.625rem;
+      color: var(--text-muted);
+      line-height: 1.3;
+    }
+
+    .arch-arrow {
+      color: var(--primary);
+      font-size: 1rem;
+      padding: 0 0.25rem;
+      flex-shrink: 0;
+    }
+
+    .arch-note {
+      margin-top: 2rem;
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 0.9375rem;
+    }
+
+    /* Principles Section */
+    .principles-section {
+      padding: 5rem 2rem;
+      background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.02), transparent);
+    }
+
+    .principles-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .principles-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      margin-top: 2.5rem;
+    }
+
+    .principle-item {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 1rem 1.25rem;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      font-size: 0.9375rem;
+    }
+
+    .principle-item::before {
+      content: '✓';
+      color: var(--primary);
+      font-weight: 600;
+    }
+
+    /* Built For Section */
+    .builtfor-section {
+      padding: 5rem 2rem;
+    }
+
+    .builtfor-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .builtfor-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 1.5rem;
+      margin-top: 2.5rem;
+    }
+
+    .builtfor-card {
+      padding: 1.5rem;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+    }
+
+    .builtfor-card h4 {
+      font-family: 'Space Grotesk', sans-serif;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .builtfor-card p {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+    }
+
+    /* Get Started Section */
+    .getstarted-section {
+      padding: 5rem 2rem;
+      background: linear-gradient(180deg, rgba(6, 182, 212, 0.03), transparent);
+    }
+
+    .getstarted-container {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .install-box {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      padding: 2.5rem;
+      margin-top: 2.5rem;
+    }
+
+    .install-steps {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+    }
+
+    .install-step {
+      display: flex;
+      gap: 1.25rem;
+      align-items: flex-start;
+    }
+
+    .step-number {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: 'Space Grotesk', sans-serif;
+      font-weight: 700;
+      font-size: 0.875rem;
+      flex-shrink: 0;
+    }
+
+    .step-content {
+      flex: 1;
+    }
+
+    .step-content h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: var(--text);
+    }
+
+    .step-content p {
+      font-size: 0.875rem;
+      color: var(--text-secondary);
+      margin-bottom: 0.75rem;
+    }
+
+    .code-block {
+      background: rgba(0, 0, 0, 0.5);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 1rem 1.25rem;
+      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+      font-size: 0.875rem;
+      color: var(--text);
+      position: relative;
+      overflow-x: auto;
+    }
+
+    .code-block .prompt {
+      color: var(--primary);
+      user-select: none;
+    }
+
+    .code-block .comment {
+      color: var(--text-muted);
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      background: rgba(148, 163, 184, 0.1);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 0.375rem 0.625rem;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .copy-btn:hover {
+      background: rgba(148, 163, 184, 0.2);
+      color: var(--text);
+    }
+
+    .install-links {
+      display: flex;
+      gap: 1.5rem;
+      margin-top: 2rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--border);
+      flex-wrap: wrap;
+    }
+
+    .install-link {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: 0.875rem;
+      transition: color 0.2s;
+    }
+
+    .install-link:hover {
+      color: var(--primary);
+    }
+
+    .install-link svg {
+      width: 18px;
+      height: 18px;
+    }
+
     /* Tools Section */
     .tools-section {
       padding: 6rem 2rem;
@@ -787,27 +1111,372 @@
     }
 
     @media (max-width: 640px) {
-      .nav-links {
+      /* Navigation */
+      nav {
+        padding: 0.75rem 1rem;
+      }
+
+      .nav-inner {
+        padding: 0.5rem 1rem;
+      }
+
+      .nav-links .nav-link {
         display: none;
       }
 
+      .nav-links .btn-primary {
+        padding: 0.5rem 1rem;
+        font-size: 0.8125rem;
+      }
+
+      .logo {
+        font-size: 1.1rem;
+      }
+
+      .logo-mark {
+        width: 32px;
+        height: 32px;
+        font-size: 1rem;
+      }
+
+      /* Hero Section */
+      .hero {
+        min-height: auto;
+        padding: 6rem 1rem 3rem;
+      }
+
+      .hero-container {
+        gap: 2rem;
+      }
+
+      .hero-3d {
+        height: 250px;
+      }
+
+      .hero-badge {
+        font-size: 0.7rem;
+        padding: 0.375rem 0.75rem;
+      }
+
       .hero h1 {
-        font-size: 2rem;
+        font-size: 1.75rem;
+        margin-bottom: 1rem;
       }
 
-      .hero-stats {
+      .hero-description {
+        font-size: 0.9375rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .hero-actions {
         flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .hero-actions .btn {
+        width: 100%;
+        justify-content: center;
+        padding: 0.75rem 1.5rem;
+      }
+
+      .hero-stats {
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 1.5rem;
-        align-items: center;
+        justify-content: center;
+        margin-top: 2rem;
+        padding-top: 1.5rem;
+      }
+
+      .stat {
+        text-align: center;
+        min-width: 80px;
+      }
+
+      .stat-value {
+        font-size: 1.5rem;
+      }
+
+      .stat-label {
+        font-size: 0.75rem;
+      }
+
+      /* Sections */
+      .features-section,
+      .slop-section,
+      .team-section,
+      .tools-section,
+      .deterministic-section,
+      .getstarted-section,
+      .replaces-section,
+      .architecture-section,
+      .principles-section,
+      .builtfor-section {
+        padding: 3rem 1rem;
+      }
+
+      .replaces-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .replaces-item {
+        font-size: 0.875rem;
+        padding: 0.875rem 1rem;
+      }
+
+      .principles-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .principle-item {
+        font-size: 0.875rem;
+      }
+
+      .architecture-flow {
+        flex-direction: column;
+      }
+
+      .arch-step {
+        min-width: auto;
+        max-width: none;
+        width: 100%;
+        flex-direction: row;
+        text-align: left;
+      }
+
+      .arch-arrow {
+        transform: rotate(90deg);
+        padding: 0.5rem 0;
+      }
+
+      .builtfor-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+      }
+
+      /* Get Started mobile */
+      .install-box {
+        padding: 1.5rem;
+        border-radius: 16px;
+        margin-top: 1.5rem;
+      }
+
+      .install-steps {
+        gap: 1.25rem;
+      }
+
+      .install-step {
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .step-number {
+        width: 28px;
+        height: 28px;
+        font-size: 0.8125rem;
+      }
+
+      .step-content h4 {
+        font-size: 0.9375rem;
+      }
+
+      .step-content p {
+        font-size: 0.8125rem;
+      }
+
+      .code-block {
+        padding: 0.875rem 1rem;
+        font-size: 0.75rem;
+        padding-right: 3.5rem;
+      }
+
+      .copy-btn {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.6875rem;
+      }
+
+      .install-links {
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1.5rem;
+        padding-top: 1.25rem;
+      }
+
+      .install-link {
+        font-size: 0.8125rem;
+      }
+
+      .section-header {
+        margin-bottom: 2rem;
+      }
+
+      .section-header h2 {
+        font-size: 1.75rem;
+      }
+
+      .section-header p {
+        font-size: 0.9375rem;
+      }
+
+      /* Bento Cards */
+      .bento-grid {
+        gap: 1rem;
+      }
+
+      .bento-card {
+        padding: 1.5rem;
+        border-radius: 16px;
+      }
+
+      .bento-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 1.25rem;
+        margin-bottom: 1rem;
+      }
+
+      .bento-card h3 {
+        font-size: 1.1rem;
+      }
+
+      .bento-card p {
+        font-size: 0.875rem;
+      }
+
+      .code-preview {
+        padding: 0.75rem 1rem;
+        font-size: 0.75rem;
+      }
+
+      /* SLOP Cards */
+      .slop-grid {
+        gap: 1rem;
+      }
+
+      .slop-card {
+        padding: 1.25rem;
+        border-radius: 12px;
+      }
+
+      .slop-letter {
+        font-size: 2.25rem;
+      }
+
+      .slop-word {
+        font-size: 1rem;
+      }
+
+      .slop-desc {
+        font-size: 0.8125rem;
+      }
+
+      /* Team Cards */
+      .team-grid {
+        gap: 1rem;
+      }
+
+      .team-card {
+        padding: 1.5rem;
+        border-radius: 12px;
+      }
+
+      .team-icon {
+        width: 56px;
+        height: 56px;
+        font-size: 1.5rem;
+      }
+
+      .team-card h3 {
+        font-size: 1rem;
+      }
+
+      .team-card p {
+        font-size: 0.875rem;
+      }
+
+      /* Comparison Cards */
+      .comparison-grid {
+        gap: 1rem;
+      }
+
+      .comparison-card {
+        padding: 1.5rem;
+        border-radius: 12px;
+      }
+
+      .comparison-header {
+        font-size: 0.9375rem;
+      }
+
+      .comparison-list {
+        font-size: 0.8125rem;
+      }
+
+      /* Tools */
+      .tools-grid {
+        gap: 0.75rem;
+        margin-top: 2rem;
+      }
+
+      .tool-chip {
+        padding: 0.5rem 1rem;
+        font-size: 0.8125rem;
+      }
+
+      .tool-chip .icon {
+        font-size: 1rem;
+      }
+
+      /* CTA */
+      .cta-section {
+        padding: 4rem 1rem;
+      }
+
+      .cta-content h2 {
+        font-size: 1.75rem;
+      }
+
+      .cta-content p {
+        font-size: 0.9375rem;
+      }
+
+      .cta-buttons {
+        flex-direction: column;
+      }
+
+      .cta-buttons .btn {
+        width: 100%;
+        justify-content: center;
+      }
+
+      /* Footer */
+      footer {
+        padding: 2rem 1rem 1.5rem;
       }
 
       .footer-container {
         flex-direction: column;
         text-align: center;
+        gap: 1.5rem;
       }
 
       .footer-left {
         flex-direction: column;
+        gap: 1rem;
+      }
+
+      .footer-links {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1rem;
+      }
+
+      .footer-links a {
+        font-size: 0.8125rem;
+      }
+
+      .footer-right {
+        font-size: 0.75rem;
       }
     }
   </style>
@@ -824,11 +1493,11 @@
         aurasecurity
       </a>
       <div class="nav-links">
-        <a href="#slop" class="nav-link">SLOP Protocol</a>
-        <a href="#features" class="nav-link">Features</a>
-        <a href="#team" class="nav-link">Team</a>
-        <a href="https://github.com/aurasecurity/aura-security" target="_blank" class="nav-link">GitHub</a>
-        <a href="/app" class="btn btn-primary">Open Dashboard</a>
+        <a href="#install" class="nav-link">Install</a>
+        <a href="#features" class="nav-link">Outcomes</a>
+        <a href="#architecture" class="nav-link">How it Works</a>
+        <a href="https://github.com/aurasecurityio/aura-security" target="_blank" class="nav-link">GitHub</a>
+        <a href="https://app.aurasecurity.io" class="btn btn-primary">Open Dashboard</a>
       </div>
     </div>
   </nav>
@@ -837,38 +1506,37 @@
   <section class="hero">
     <div class="hero-container">
       <div class="hero-content">
-        <div class="hero-badge">Built by Security Engineers · 100% Deterministic</div>
-        <h1>Real security tools.<br><span class="gradient-text">Zero AI hallucinations.</span></h1>
+        <div class="hero-badge">Deterministic · Reproducible · Audit-Ready</div>
+        <h1>Security audits that produce<br><span class="gradient-text">evidence, not opinions.</span></h1>
         <p class="hero-description">
-          We run Gitleaks, Trivy, Semgrep, and Grype in parallel. Same input = same output, every time.
-          No LLM guessing. No false confidence. Just real CVEs and real secrets, with line numbers.
+          aurasecurity turns code changes into verifiable security events using real scanners, reproducible output, and structured findings — no black boxes.
         </p>
         <div class="hero-actions">
-          <a href="/app" class="btn btn-primary">
+          <a href="#install" class="btn btn-primary">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M5 12h14M12 5l7 7-7 7"/>
             </svg>
-            Try Dashboard
+            Run your first audit
           </a>
-          <a href="https://github.com/aurasecurity/aura-security" target="_blank" class="btn btn-ghost">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          <a href="https://github.com/aurasecurityio/aura-security#example-output" target="_blank" class="btn btn-ghost">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
             </svg>
-            View Source
+            View example output
           </a>
         </div>
         <div class="hero-stats">
           <div class="stat">
-            <div class="stat-value">0%</div>
-            <div class="stat-label">AI Hallucinations</div>
+            <div class="stat-value">100%</div>
+            <div class="stat-label">Reproducible</div>
           </div>
           <div class="stat">
             <div class="stat-value">8+</div>
             <div class="stat-label">Real Scanners</div>
           </div>
           <div class="stat">
-            <div class="stat-value">SLOP</div>
-            <div class="stat-label">Multi-Agent Protocol</div>
+            <div class="stat-value">0</div>
+            <div class="stat-label">Black Boxes</div>
           </div>
         </div>
       </div>
@@ -879,53 +1547,141 @@
     </div>
   </section>
 
-  <!-- Features Section -->
+  <!-- What This Replaces Section -->
+  <section class="replaces-section">
+    <div class="replaces-container">
+      <div class="section-header">
+        <h2>What aurasecurity replaces</h2>
+      </div>
+      <div class="replaces-grid">
+        <div class="replaces-item">Ad-hoc security scripts</div>
+        <div class="replaces-item">Noisy AI-only scanners</div>
+        <div class="replaces-item">Unverifiable security reports</div>
+        <div class="replaces-item">Screenshot-based compliance evidence</div>
+      </div>
+      <div class="replaces-instead">
+        <p><span>Instead:</span> Structured security events that can be replayed, visualized, and audited.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Get Started Section -->
+  <section class="getstarted-section" id="install">
+    <div class="getstarted-container">
+      <div class="section-header">
+        <h2>Get Started in 60 Seconds</h2>
+        <p>Install globally via npm and start scanning immediately. No configuration required.</p>
+      </div>
+
+      <div class="install-box">
+        <div class="install-steps">
+          <div class="install-step">
+            <div class="step-number">1</div>
+            <div class="step-content">
+              <h4>Install the CLI</h4>
+              <p>Install aurasecurity globally using npm</p>
+              <div class="code-block">
+                <span class="prompt">$</span> npm install -g aura-security
+                <button class="copy-btn" onclick="navigator.clipboard.writeText('npm install -g aura-security')">Copy</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="install-step">
+            <div class="step-number">2</div>
+            <div class="step-content">
+              <h4>Scan Your Project</h4>
+              <p>Run a full security scan on any directory</p>
+              <div class="code-block">
+                <span class="prompt">$</span> aura-security scan ./my-project
+                <button class="copy-btn" onclick="navigator.clipboard.writeText('aura-security scan ./my-project')">Copy</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="install-step">
+            <div class="step-number">3</div>
+            <div class="step-content">
+              <h4>Launch the Dashboard</h4>
+              <p>Start the local 3D visualizer to explore findings</p>
+              <div class="code-block">
+                <span class="prompt">$</span> aura-security visualizer<br>
+                <span class="comment"># Opens http://localhost:8080</span>
+                <button class="copy-btn" onclick="navigator.clipboard.writeText('aura-security visualizer')">Copy</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <p style="margin-top: 1.5rem; font-size: 0.875rem; color: var(--text-muted); text-align: center;">
+          Missing scanners are logged, not fatal. Works with whatever tools you have installed.
+        </p>
+
+        <div class="install-links">
+          <a href="https://www.npmjs.com/package/aura-security" target="_blank" class="install-link">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z"/></svg>
+            npm package
+          </a>
+          <a href="https://github.com/aurasecurityio/aura-security" target="_blank" class="install-link">
+            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            View on GitHub
+          </a>
+          <a href="https://github.com/aurasecurityio/aura-security#readme" target="_blank" class="install-link">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+            Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Features Section (Outcomes) -->
   <section class="features-section" id="features">
     <div class="features-container">
       <div class="section-header">
-        <h2>No fluff. Just works.</h2>
-        <p>One command. Eight scanners. Real vulnerabilities with real line numbers.</p>
+        <h2>What you can do</h2>
+        <p>Outcomes, not features. Here's what actually happens when you run aurasecurity.</p>
       </div>
 
       <div class="bento-grid">
         <div class="bento-card featured">
-          <div class="bento-icon">⚡</div>
-          <h3>Unified Command Interface</h3>
-          <p>Run multiple security scanners with a single command. No more juggling terminals and output formats. Results aggregated and normalized automatically.</p>
+          <div class="bento-icon">🛑</div>
+          <h3>Block risky changes before merge</h3>
+          <p>Deterministic detection of high-risk diffs: exposed secrets, open ingress, misconfigs. Every finding includes file path and line number.</p>
           <div class="code-preview">
             <div class="code-line">
               <span class="code-prompt">$</span>
-              <span class="code-command">aura-security scan ./my-project</span>
+              <span class="code-command">aura-security scan . --fail-on critical</span>
             </div>
           </div>
         </div>
 
         <div class="bento-card">
-          <div class="bento-icon">🎯</div>
-          <h3>3D Dashboard</h3>
-          <p>Interactive Three.js visualization shows your security posture spatially. Click nodes, filter findings, see the big picture.</p>
+          <div class="bento-icon">📋</div>
+          <h3>Generate audit-ready evidence</h3>
+          <p>SBOMs, scan outputs, and findings stored as structured JSON events. Ready for SOC2, ISO, or any compliance audit.</p>
         </div>
 
         <div class="bento-card">
-          <div class="bento-icon">☁️</div>
-          <h3>AWS Scanning</h3>
-          <p>Audit IAM, S3, EC2, Lambda, and RDS for misconfigurations. Cloud security in the same unified view.</p>
+          <div class="bento-icon">📊</div>
+          <h3>Visualize security over time</h3>
+          <p>3D event timeline shows drift, regressions, and escalation paths. See exactly when and where issues appeared.</p>
         </div>
 
         <div class="bento-card">
-          <div class="bento-icon">📡</div>
-          <h3>Real-time WebSocket</h3>
-          <p>Live updates as scanners run. No polling, no refresh. Findings appear instantly in the dashboard.</p>
+          <div class="bento-icon">🔁</div>
+          <h3>Replay any scan, anytime</h3>
+          <p>Every scan is reproducible. Same input = same output. Share findings with exact reproduction steps.</p>
         </div>
 
         <div class="bento-card featured">
-          <div class="bento-icon">🔔</div>
-          <h3>Notifications & Integrations</h3>
-          <p>Slack, Discord, and custom webhooks. Get alerted on critical findings. Integrates with your existing workflow seamlessly.</p>
+          <div class="bento-icon">🤖</div>
+          <h3>AI as advisor, not authority</h3>
+          <p>Optional LLM analysis provides context and remediation hints — but never overrides scanner findings. Fail-closed by design.</p>
           <div class="code-preview">
             <div class="code-line">
               <span class="code-prompt">$</span>
-              <span class="code-command">aura-security scan . --notify slack</span>
+              <span class="code-command">aura-security scan . --ai-advisory</span>
             </div>
           </div>
         </div>
@@ -966,6 +1722,77 @@
     </div>
   </section>
 
+  <!-- Architecture Section -->
+  <section class="architecture-section" id="architecture">
+    <div class="architecture-container">
+      <div class="section-header">
+        <h2>How it works</h2>
+        <p>Every step emits signed, replayable events — no hidden logic.</p>
+      </div>
+
+      <div class="architecture-flow">
+        <div class="arch-step">
+          <span class="icon">💻</span>
+          <div>
+            <div class="label">CLI / CI Pipeline</div>
+            <div class="sublabel">Your code, your environment</div>
+          </div>
+        </div>
+        <div class="arch-arrow">→</div>
+        <div class="arch-step">
+          <span class="icon">🔬</span>
+          <div>
+            <div class="label">Real Scanners</div>
+            <div class="sublabel">Gitleaks, Trivy, Semgrep, Grype, npm audit</div>
+          </div>
+        </div>
+        <div class="arch-arrow">→</div>
+        <div class="arch-step">
+          <span class="icon">📦</span>
+          <div>
+            <div class="label">SLOP Event Protocol</div>
+            <div class="sublabel">Structured, labeled findings</div>
+          </div>
+        </div>
+        <div class="arch-arrow">→</div>
+        <div class="arch-step">
+          <span class="icon">🗄️</span>
+          <div>
+            <div class="label">Audit Server</div>
+            <div class="sublabel">Persistent storage + API</div>
+          </div>
+        </div>
+        <div class="arch-arrow">→</div>
+        <div class="arch-step">
+          <span class="icon">📊</span>
+          <div>
+            <div class="label">Output</div>
+            <div class="sublabel">3D Visualizer / JSON / CI Gates</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Principles Section -->
+  <section class="principles-section" id="principles">
+    <div class="principles-container">
+      <div class="section-header">
+        <h2>Design principles</h2>
+        <p>This is where we differ from "AI security platforms".</p>
+      </div>
+
+      <div class="principles-grid">
+        <div class="principle-item">Deterministic by default</div>
+        <div class="principle-item">Offline-capable</div>
+        <div class="principle-item">Scanner-native output</div>
+        <div class="principle-item">AI is advisory only</div>
+        <div class="principle-item">Open-source, MIT licensed</div>
+        <div class="principle-item">No vendor lock-in</div>
+      </div>
+    </div>
+  </section>
+
   <!-- Deterministic Section -->
   <section class="deterministic-section">
     <div class="deterministic-container">
@@ -1003,29 +1830,30 @@
     </div>
   </section>
 
-  <!-- Team Section -->
-  <section class="team-section" id="team">
-    <div class="team-container">
+  <!-- Built For Section -->
+  <section class="builtfor-section" id="builtfor">
+    <div class="builtfor-container">
       <div class="section-header">
-        <h2>Built by Security Engineers</h2>
-        <p>Not a wrapper around ChatGPT. Built by people who've actually found bugs.</p>
+        <h2>Built for</h2>
+        <p>Not "everyone". These specific teams and use cases.</p>
       </div>
 
-      <div class="team-grid">
-        <div class="team-card">
-          <div class="team-icon">🔓</div>
-          <h3>Pentest Background</h3>
-          <p>Years of offensive security experience. We know what real vulnerabilities look like because we've exploited them.</p>
+      <div class="builtfor-grid">
+        <div class="builtfor-card">
+          <h4>🔐 Security Engineers</h4>
+          <p>Need reproducible findings for incident response and remediation tracking. Tired of AI noise.</p>
+        </div>
+        <div class="builtfor-card">
+          <h4>🏗️ Platform / Infra Teams</h4>
+          <p>Want security gates in CI/CD without vendor lock-in. Need structured output for automation.</p>
         </div>
-        <div class="team-card">
-          <div class="team-icon">🐛</div>
-          <h3>Bug Bounty Hunters</h3>
-          <p>Found and reported vulnerabilities in production systems. We built this tool because we needed it ourselves.</p>
+        <div class="builtfor-card">
+          <h4>📋 Startups doing SOC2 / ISO</h4>
+          <p>Need audit evidence without enterprise bloat. Generate compliance artifacts from actual scans.</p>
         </div>
-        <div class="team-card">
-          <div class="team-icon">📖</div>
-          <h3>Open Source</h3>
-          <p>MIT licensed. Read every line of code. No telemetry, no tracking, no BS. Fork it, audit it, run it air-gapped.</p>
+        <div class="builtfor-card">
+          <h4>👩‍💻 Developers who want clarity</h4>
+          <p>Want to understand exactly what's wrong and why. No "might be vulnerable" — just facts with line numbers.</p>
         </div>
       </div>
     </div>
@@ -1055,11 +1883,11 @@
   <!-- CTA Section -->
   <section class="cta-section">
     <div class="cta-content">
-      <h2>Stop guessing. Start scanning.</h2>
-      <p>No signup. No API keys. No cloud dependency. Just clone and run.</p>
+      <h2>Evidence, not opinions.</h2>
+      <p>No signup. No API keys. No cloud dependency. Install and scan in 60 seconds.</p>
       <div class="cta-buttons">
-        <a href="/app" class="btn btn-primary">Try the Dashboard</a>
-        <a href="https://github.com/aurasecurity/aura-security" target="_blank" class="btn btn-ghost">Read the Code</a>
+        <a href="#install" class="btn btn-primary">Get Started</a>
+        <a href="https://github.com/aurasecurityio/aura-security" target="_blank" class="btn btn-ghost">View Source</a>
       </div>
     </div>
   </section>
@@ -1073,10 +1901,10 @@
           aurasecurity
         </a>
         <div class="footer-links">
-          <a href="https://github.com/aurasecurity/aura-security" target="_blank">GitHub</a>
+          <a href="https://github.com/aurasecurityio/aura-security" target="_blank">GitHub</a>
           <a href="https://www.npmjs.com/package/aura-security" target="_blank">npm</a>
           <a href="https://pypi.org/project/aura-security/" target="_blank">PyPI</a>
-          <a href="/app">Dashboard</a>
+          <a href="https://app.aurasecurity.io">Dashboard</a>
         </div>
       </div>
       <div class="footer-right">