commit da6806c3cb7becb33a5ab83d726f5402168a8634
Author: dev-agent <agent@silverlabs.uk>
Date:   Tue Jan 20 22:22:39 2026 +0000

    feat: initial .NET 9 static site for SilverDOCK deployment

diff --git a/.gitea/workflows/deploy.yml b/.gitea/workflows/deploy.yml
new file mode 100644
index 0000000..628565b
--- /dev/null
+++ b/.gitea/workflows/deploy.yml
@@ -0,0 +1,46 @@
+name: Deploy via SilverDOCK
+
+on:
+  workflow_dispatch:
+    inputs:
+      target_host:
+        description: 'Target Docker host'
+        required: true
+        default: '10.0.0.51'
+      hostname:
+        description: 'Hostname for the site'
+        required: true
+        default: 'privacyfirst.local'
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy SilverDOCK Container
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ github.event.inputs.target_host }}
+          username: sysadmin
+          password: ${{ secrets.SSH_PASSWORD }}
+          script: |
+            # Login to Gitea container registry
+            docker login git.silverlabs.uk -u sysadmin -p ${{ secrets.GITEA_TOKEN }}
+
+            # Pull latest SilverDOCK image
+            docker pull git.silverlabs.uk/silverlabs/silverdock:latest
+
+            # Stop and remove existing container
+            docker stop privacyfirst || true
+            docker rm privacyfirst || true
+
+            # Run SilverDOCK with privacyfirstwebsite repo
+            docker run -d \
+              --name privacyfirst \
+              --restart unless-stopped \
+              -p 5080:8080 \
+              -e REPOSITORY_URL=https://git.silverlabs.uk/SilverLABS/privacyfirstwebsite.git \
+              -e GIT_TOKEN=${{ secrets.GITEA_TOKEN }} \
+              -e SILVERDOCK_UI_HOSTNAME=${{ github.event.inputs.hostname }} \
+              -v privacyfirst-keys:/app/keys \
+              -v privacyfirst-source:/app/source \
+              git.silverlabs.uk/silverlabs/silverdock:latest
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..eab1aad
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,16 @@
+# Build results
+bin/
+obj/
+
+# IDE
+.vs/
+.vscode/
+*.user
+*.suo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
diff --git a/PrivacyFirstWebsite.csproj b/PrivacyFirstWebsite.csproj
new file mode 100644
index 0000000..0c27b6c
--- /dev/null
+++ b/PrivacyFirstWebsite.csproj
@@ -0,0 +1,7 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+</Project>
diff --git a/Program.cs b/Program.cs
new file mode 100644
index 0000000..39d3ade
--- /dev/null
+++ b/Program.cs
@@ -0,0 +1,8 @@
+var builder = WebApplication.CreateBuilder(args);
+var app = builder.Build();
+
+app.UseDefaultFiles();
+app.UseStaticFiles();
+app.MapFallbackToFile("index.html");
+
+app.Run();
diff --git a/appsettings.json b/appsettings.json
new file mode 100644
index 0000000..10f68b8
--- /dev/null
+++ b/appsettings.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}
diff --git a/wwwroot/css/style.css b/wwwroot/css/style.css
new file mode 100644
index 0000000..0560a9b
--- /dev/null
+++ b/wwwroot/css/style.css
@@ -0,0 +1,2453 @@
+/* ==========================================================================
+   Privacy First - Dark Sovereignty Theme
+   A premium dark aesthetic with sharp accent colors
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   CSS Custom Properties
+   -------------------------------------------------------------------------- */
+:root {
+    /* Colors */
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #12121a;
+    --bg-tertiary: #1a1a24;
+    --bg-elevated: #22222e;
+
+    --accent-primary: #00d4aa;
+    --accent-primary-rgb: 0, 212, 170;
+    --accent-secondary: #7c5cff;
+    --accent-secondary-rgb: 124, 92, 255;
+    --accent-warning: #ff6b35;
+    --accent-warning-rgb: 255, 107, 53;
+
+    --text-primary: #f0f0f5;
+    --text-secondary: #8888a0;
+    --text-muted: #5a5a70;
+
+    --border-subtle: #2a2a3a;
+    --border-accent: #3a3a4a;
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+    --gradient-dark: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    --gradient-glow: radial-gradient(ellipse at center, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 70%);
+
+    /* Typography */
+    --font-heading: 'JetBrains Mono', 'Fira Code', monospace;
+    --font-body: 'Outfit', 'Inter', sans-serif;
+    --font-accent: 'Playfair Display', Georgia, serif;
+
+    /* Spacing */
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    --space-3xl: 4rem;
+    --space-4xl: 6rem;
+
+    /* Sizing */
+    --container-max: 1200px;
+    --container-narrow: 800px;
+
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+
+    /* Shadows */
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 40px rgba(var(--accent-primary-rgb), 0.3);
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+    --transition-slow: 400ms ease;
+
+    /* Z-Index Scale */
+    --z-negative: -1;
+    --z-base: 0;
+    --z-dropdown: 100;
+    --z-sticky: 200;
+    --z-fixed: 300;
+    --z-modal: 400;
+    --z-tooltip: 500;
+}
+
+/* --------------------------------------------------------------------------
+   Reset & Base Styles
+   -------------------------------------------------------------------------- */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-body);
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    overflow-x: hidden;
+}
+
+/* Selection */
+::selection {
+    background-color: rgba(var(--accent-primary-rgb), 0.3);
+    color: var(--text-primary);
+}
+
+/* Focus styles */
+:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}
+
+/* Links */
+a {
+    color: var(--accent-primary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--accent-secondary);
+}
+
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Lists */
+ul, ol {
+    list-style: none;
+}
+
+/* Buttons */
+button {
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+}
+
+/* Inputs */
+input, textarea {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+/* --------------------------------------------------------------------------
+   Typography
+   -------------------------------------------------------------------------- */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--text-primary);
+}
+
+h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
+h2 { font-size: clamp(2rem, 4vw, 3rem); }
+h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
+h4 { font-size: 1.125rem; }
+
+p {
+    color: var(--text-secondary);
+}
+
+.gradient-text {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.glow-text {
+    text-shadow: 0 0 40px rgba(var(--accent-primary-rgb), 0.5);
+}
+
+/* --------------------------------------------------------------------------
+   Layout
+   -------------------------------------------------------------------------- */
+.container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--space-lg);
+}
+
+.text-center {
+    text-align: center;
+}
+
+/* Section styles */
+section {
+    padding: var(--space-4xl) 0;
+    position: relative;
+}
+
+.section-label {
+    font-family: var(--font-heading);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--accent-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--space-md);
+}
+
+.section-title {
+    margin-bottom: var(--space-lg);
+}
+
+.section-description {
+    font-size: 1.125rem;
+    max-width: 600px;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: var(--space-3xl);
+}
+
+.section-header .section-description {
+    margin: 0 auto;
+}
+
+/* --------------------------------------------------------------------------
+   Buttons
+   -------------------------------------------------------------------------- */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    font-family: var(--font-heading);
+    font-weight: 500;
+    font-size: 0.9375rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    transition: all var(--transition-base);
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.btn__icon {
+    width: 18px;
+    height: 18px;
+}
+
+/* Primary button */
+.btn--primary {
+    background: var(--gradient-primary);
+    color: var(--bg-primary);
+    border: none;
+    box-shadow: 0 4px 20px rgba(var(--accent-primary-rgb), 0.3);
+}
+
+.btn--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 30px rgba(var(--accent-primary-rgb), 0.4);
+    color: var(--bg-primary);
+}
+
+/* Outline button */
+.btn--outline {
+    background: transparent;
+    color: var(--text-primary);
+    border: 1px solid var(--border-accent);
+}
+
+.btn--outline:hover {
+    border-color: var(--accent-primary);
+    background: rgba(var(--accent-primary-rgb), 0.1);
+    color: var(--text-primary);
+}
+
+/* Ghost button */
+.btn--ghost {
+    background: transparent;
+    color: var(--text-secondary);
+}
+
+.btn--ghost:hover {
+    color: var(--text-primary);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Accent button */
+.btn--accent {
+    background: var(--accent-warning);
+    color: white;
+}
+
+.btn--accent:hover {
+    background: #ff8555;
+    color: white;
+}
+
+/* Button sizes */
+.btn--sm {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.btn--lg {
+    padding: 1rem 2rem;
+    font-size: 1rem;
+}
+
+.btn--xl {
+    padding: 1.25rem 2.5rem;
+    font-size: 1.125rem;
+}
+
+.btn--block {
+    width: 100%;
+}
+
+/* --------------------------------------------------------------------------
+   Navigation
+   -------------------------------------------------------------------------- */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--z-fixed);
+    padding: var(--space-md) 0;
+    transition: all var(--transition-base);
+}
+
+.header.scrolled {
+    background: rgba(10, 10, 15, 0.9);
+    backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.nav__logo {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+.logo-icon {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.logo-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+.logo-text {
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: 1.375rem;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+}
+
+.logo-text .logo-accent {
+    font-size: 1.1em;
+    font-weight: 700;
+    background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.logo-divider {
+    width: 1px;
+    height: 20px;
+    background: var(--border-accent);
+    margin: 0 0.25rem;
+}
+
+.logo-tagline {
+    font-family: var(--font-body);
+    font-size: 0.6875rem;
+    font-weight: 400;
+    color: var(--text-muted);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.nav__list {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xl);
+}
+
+.nav__link {
+    color: var(--text-secondary);
+    font-size: 0.9375rem;
+    transition: color var(--transition-fast);
+}
+
+.nav__link:hover {
+    color: var(--text-primary);
+}
+
+.nav__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+.nav__toggle,
+.nav__close {
+    display: none;
+}
+
+/* Mobile navigation */
+@media (max-width: 1023px) {
+    .nav__menu {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        width: 100%;
+        max-width: 320px;
+        height: 100vh;
+        background: var(--bg-secondary);
+        padding: var(--space-3xl) var(--space-xl);
+        transition: right var(--transition-base);
+        z-index: var(--z-modal);
+    }
+
+    .nav__menu.active {
+        right: 0;
+    }
+
+    .nav__list {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-lg);
+    }
+
+    .nav__link {
+        font-size: 1.125rem;
+    }
+
+    .nav__close {
+        display: block;
+        position: absolute;
+        top: var(--space-lg);
+        right: var(--space-lg);
+        font-size: 2rem;
+        color: var(--text-secondary);
+    }
+
+    .nav__toggle {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: var(--space-sm);
+    }
+
+    .nav__toggle span {
+        width: 24px;
+        height: 2px;
+        background: var(--text-primary);
+        transition: all var(--transition-fast);
+    }
+
+    .nav__actions {
+        display: none;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Hero Section
+   -------------------------------------------------------------------------- */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding-top: 80px;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero__canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: var(--z-negative);
+}
+
+.hero__gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(ellipse at 20% 80%, rgba(var(--accent-primary-rgb), 0.1) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, rgba(var(--accent-secondary-rgb), 0.1) 0%, transparent 50%);
+    z-index: var(--z-negative);
+}
+
+.hero__container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3xl);
+    align-items: center;
+}
+
+.hero__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    background: rgba(var(--accent-primary-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
+    color: var(--accent-primary);
+    margin-bottom: var(--space-lg);
+}
+
+.pulse {
+    width: 8px;
+    height: 8px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+.hero__title {
+    margin-bottom: var(--space-lg);
+}
+
+.hero__description {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-xl);
+    max-width: 540px;
+}
+
+.hero__cta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+    margin-bottom: var(--space-2xl);
+}
+
+.hero__trust {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-lg);
+}
+
+.trust-badge {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+.trust-badge svg {
+    width: 18px;
+    height: 18px;
+    color: var(--accent-primary);
+}
+
+/* Hero mockup */
+.hero__mockup {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+}
+
+.mockup__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.mockup__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--border-accent);
+}
+
+.mockup__dot:first-child { background: #ff5f56; }
+.mockup__dot:nth-child(2) { background: #ffbd2e; }
+.mockup__dot:nth-child(3) { background: #27ca40; }
+
+.mockup__title {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.mockup__content {
+    padding: var(--space-xl);
+}
+
+.mockup__stat {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-lg);
+}
+
+.mockup__stat-value {
+    font-family: var(--font-heading);
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--accent-primary);
+}
+
+.mockup__stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.mockup__services {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-sm);
+    margin-top: var(--space-xl);
+}
+
+.mockup__service {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-md);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    border: 1px solid transparent;
+    transition: all var(--transition-fast);
+}
+
+.mockup__service.active {
+    border-color: var(--accent-primary);
+    color: var(--text-primary);
+}
+
+.service-icon {
+    font-size: 1.5rem;
+}
+
+/* Scroll indicator */
+.hero__scroll {
+    position: absolute;
+    bottom: var(--space-xl);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--text-muted);
+    font-size: 0.75rem;
+}
+
+.scroll-indicator {
+    width: 24px;
+    height: 40px;
+    border: 2px solid var(--border-accent);
+    border-radius: 12px;
+    position: relative;
+}
+
+.scroll-indicator::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 8px;
+    background: var(--accent-primary);
+    border-radius: 2px;
+    animation: scroll 2s ease-in-out infinite;
+}
+
+@keyframes scroll {
+    0%, 100% { top: 8px; opacity: 1; }
+    50% { top: 20px; opacity: 0.3; }
+}
+
+/* Responsive hero */
+@media (max-width: 1023px) {
+    .hero__container {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .hero__description {
+        margin: 0 auto var(--space-xl);
+    }
+
+    .hero__cta {
+        justify-content: center;
+    }
+
+    .hero__trust {
+        justify-content: center;
+    }
+
+    .hero__visual {
+        order: -1;
+    }
+
+    .hero__scroll {
+        display: none;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Problem Section
+   -------------------------------------------------------------------------- */
+.problem {
+    background: var(--bg-secondary);
+    padding: var(--space-4xl) 0;
+}
+
+.problem__content {
+    text-align: center;
+    margin-bottom: var(--space-3xl);
+}
+
+.problem__title {
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.problem__comparison {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-xl);
+    margin-bottom: var(--space-3xl);
+}
+
+.comparison-card {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+}
+
+.comparison-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.comparison-card__icon {
+    font-size: 1.5rem;
+}
+
+.comparison-card__header h3 {
+    font-size: 1.25rem;
+}
+
+.comparison-card__list li {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    padding: var(--space-sm) 0;
+    color: var(--text-secondary);
+    font-size: 0.9375rem;
+}
+
+.x-mark {
+    color: #ff4757;
+    font-weight: 600;
+}
+
+.check-mark {
+    color: var(--accent-primary);
+    font-weight: 600;
+}
+
+.comparison-card--bad {
+    border-color: rgba(255, 71, 87, 0.3);
+}
+
+.comparison-card--good {
+    border-color: rgba(var(--accent-primary-rgb), 0.3);
+    background: linear-gradient(135deg, var(--bg-tertiary), rgba(var(--accent-primary-rgb), 0.05));
+}
+
+.problem__stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-lg);
+}
+
+.stat-card {
+    text-align: center;
+    padding: var(--space-lg);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-subtle);
+}
+
+.stat-card__value {
+    display: block;
+    font-family: var(--font-heading);
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--accent-primary);
+    margin-bottom: var(--space-sm);
+}
+
+.stat-card__label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+@media (max-width: 767px) {
+    .problem__comparison {
+        grid-template-columns: 1fr;
+    }
+
+    .problem__stats {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Services Section
+   -------------------------------------------------------------------------- */
+.services {
+    padding: var(--space-4xl) 0;
+}
+
+.services__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-xl);
+}
+
+.service-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+    transition: all var(--transition-base);
+}
+
+.service-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--accent-primary);
+    box-shadow: 0 8px 40px rgba(var(--accent-primary-rgb), 0.15);
+}
+
+.service-card__icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.2), rgba(var(--accent-secondary-rgb), 0.2));
+    border-radius: var(--radius-md);
+    margin-bottom: var(--space-lg);
+}
+
+.service-card__icon svg {
+    width: 24px;
+    height: 24px;
+    color: var(--accent-primary);
+}
+
+.service-card__title {
+    margin-bottom: var(--space-md);
+}
+
+.service-card__description {
+    font-size: 0.9375rem;
+    margin-bottom: var(--space-lg);
+}
+
+.service-card__features {
+    margin-bottom: var(--space-lg);
+}
+
+.service-card__features li {
+    position: relative;
+    padding-left: var(--space-lg);
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: var(--space-sm);
+}
+
+.service-card__features li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--accent-primary);
+}
+
+.service-card__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.875rem;
+    color: var(--accent-primary);
+    font-weight: 500;
+}
+
+.service-card__link svg {
+    width: 16px;
+    height: 16px;
+    transition: transform var(--transition-fast);
+}
+
+.service-card__link:hover svg {
+    transform: translateX(4px);
+}
+
+@media (max-width: 1023px) {
+    .services__grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 639px) {
+    .services__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Platform Section
+   -------------------------------------------------------------------------- */
+.platform {
+    background: var(--bg-secondary);
+    padding: var(--space-4xl) 0;
+}
+
+.platform__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3xl);
+    align-items: center;
+}
+
+.platform__description {
+    font-size: 1.125rem;
+    margin-bottom: var(--space-xl);
+}
+
+.platform__features {
+    margin-bottom: var(--space-xl);
+}
+
+.platform__feature {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.platform__feature-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    color: var(--accent-primary);
+}
+
+.platform__feature-icon svg {
+    width: 20px;
+    height: 20px;
+}
+
+.platform__feature h4 {
+    margin-bottom: var(--space-xs);
+}
+
+.platform__feature p {
+    font-size: 0.875rem;
+}
+
+/* Code window */
+.code-window {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+}
+
+.code-window__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--bg-elevated);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.code-window__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--border-accent);
+}
+
+.code-window__dot:first-child { background: #ff5f56; }
+.code-window__dot:nth-child(2) { background: #ffbd2e; }
+.code-window__dot:nth-child(3) { background: #27ca40; }
+
+.code-window__title {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.code-window__content {
+    padding: var(--space-lg);
+    overflow-x: auto;
+}
+
+.code-window__content code {
+    font-family: var(--font-heading);
+    font-size: 0.8125rem;
+    line-height: 1.8;
+    color: var(--text-secondary);
+}
+
+.code-keyword { color: var(--accent-secondary); }
+.code-property { color: var(--accent-primary); }
+.code-comment { color: var(--text-muted); font-style: italic; }
+
+/* Platform apps */
+.platform__apps {
+    margin-top: var(--space-xl);
+    text-align: center;
+}
+
+.platform__apps-label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--space-md);
+}
+
+.platform__app-icons {
+    display: flex;
+    justify-content: center;
+    gap: var(--space-md);
+}
+
+.app-icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    font-size: 1.5rem;
+    transition: all var(--transition-fast);
+}
+
+.app-icon:hover {
+    border-color: var(--accent-primary);
+    transform: translateY(-2px);
+}
+
+@media (max-width: 1023px) {
+    .platform__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .platform__visual {
+        order: -1;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Passport Section
+   -------------------------------------------------------------------------- */
+.passport {
+    padding: var(--space-4xl) 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.passport__glow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    height: 800px;
+    background: radial-gradient(ellipse at center, rgba(var(--accent-secondary-rgb), 0.1) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+.passport__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3xl);
+    align-items: center;
+    position: relative;
+}
+
+/* Passport card mockup */
+.passport-card {
+    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+    border: 1px solid var(--border-accent);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+    box-shadow: var(--shadow-lg), 0 0 60px rgba(var(--accent-secondary-rgb), 0.1);
+    max-width: 360px;
+    margin: 0 auto;
+}
+
+.passport-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-xl);
+}
+
+.passport-card__logo {
+    width: 36px;
+    height: 40px;
+}
+
+.passport-card__logo svg {
+    width: 100%;
+    height: 100%;
+}
+
+.passport-card__badge {
+    font-family: var(--font-heading);
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.2em;
+    color: var(--text-muted);
+    padding: var(--space-xs) var(--space-sm);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+}
+
+.passport-card__content {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-xl);
+}
+
+.passport-card__avatar {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border-radius: 50%;
+    color: var(--text-muted);
+}
+
+.passport-card__avatar svg {
+    width: 32px;
+    height: 32px;
+}
+
+.passport-card__name {
+    display: block;
+    font-family: var(--font-heading);
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.passport-card__id {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-family: var(--font-heading);
+}
+
+.passport-card__services {
+    display: flex;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-lg);
+}
+
+.passport-card__service {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    border: 1px solid transparent;
+}
+
+.passport-card__service.active {
+    border-color: var(--accent-primary);
+    color: var(--accent-primary);
+}
+
+.passport-card__footer {
+    padding-top: var(--space-md);
+    border-top: 1px solid var(--border-subtle);
+}
+
+.passport-card__status {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    animation: pulse 2s ease-in-out infinite;
+}
+
+/* Passport content */
+.passport__description {
+    font-size: 1.125rem;
+    margin-bottom: var(--space-xl);
+}
+
+.passport__features {
+    margin-bottom: var(--space-xl);
+}
+
+.passport__feature {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-sm) 0;
+    color: var(--text-secondary);
+}
+
+.passport__feature svg {
+    width: 20px;
+    height: 20px;
+    color: var(--accent-primary);
+    flex-shrink: 0;
+}
+
+.passport__cta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-md);
+}
+
+@media (max-width: 1023px) {
+    .passport__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Marketplace Section
+   -------------------------------------------------------------------------- */
+.marketplace {
+    background: var(--bg-secondary);
+    padding: var(--space-4xl) 0;
+}
+
+.marketplace__demo {
+    margin-bottom: var(--space-3xl);
+}
+
+/* Search mockup */
+.search-mockup {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    max-width: 700px;
+    margin: 0 auto;
+    box-shadow: var(--shadow-lg);
+}
+
+.search-mockup__bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-lg);
+    background: var(--bg-elevated);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.search-mockup__bar svg {
+    width: 20px;
+    height: 20px;
+    color: var(--text-muted);
+}
+
+.search-mockup__bar input {
+    flex: 1;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    outline: none;
+}
+
+.search-mockup__bar input::placeholder {
+    color: var(--text-muted);
+}
+
+.search-mockup__btn {
+    padding: var(--space-sm) var(--space-lg);
+    background: var(--accent-primary);
+    color: var(--bg-primary);
+    border-radius: var(--radius-md);
+    font-family: var(--font-heading);
+    font-weight: 500;
+    font-size: 0.875rem;
+}
+
+.search-mockup__results {
+    padding: var(--space-lg);
+}
+
+.search-result {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    transition: background var(--transition-fast);
+}
+
+.search-result:hover {
+    background: var(--bg-secondary);
+}
+
+.search-result__image {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+    font-size: 1.5rem;
+}
+
+.search-result__info {
+    flex: 1;
+}
+
+.search-result__title {
+    display: block;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.search-result__vendor {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.search-result__price {
+    font-family: var(--font-heading);
+    font-weight: 600;
+    color: var(--accent-primary);
+}
+
+.search-mockup__footer {
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-subtle);
+}
+
+.privacy-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: 0.75rem;
+    color: var(--accent-primary);
+}
+
+.privacy-indicator svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Marketplace features */
+.marketplace__features {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-lg);
+    margin-bottom: var(--space-2xl);
+}
+
+.marketplace__feature {
+    text-align: center;
+    padding: var(--space-lg);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border-subtle);
+}
+
+.marketplace__feature-icon {
+    font-size: 2rem;
+    margin-bottom: var(--space-md);
+}
+
+.marketplace__feature h4 {
+    margin-bottom: var(--space-sm);
+}
+
+.marketplace__feature p {
+    font-size: 0.875rem;
+}
+
+@media (max-width: 767px) {
+    .marketplace__features {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* --------------------------------------------------------------------------
+   AppStore Section
+   -------------------------------------------------------------------------- */
+.appstore {
+    padding: var(--space-4xl) 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.appstore__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(ellipse at 30% 50%, rgba(var(--accent-secondary-rgb), 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at 70% 50%, rgba(var(--accent-warning-rgb), 0.1) 0%, transparent 50%);
+    z-index: var(--z-negative);
+}
+
+.appstore__content {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.coming-soon-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-lg);
+    background: rgba(var(--accent-warning-rgb), 0.1);
+    border: 1px solid rgba(var(--accent-warning-rgb), 0.3);
+    border-radius: var(--radius-full);
+    font-family: var(--font-heading);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--accent-warning);
+    margin-bottom: var(--space-xl);
+}
+
+.glow-pulse {
+    width: 8px;
+    height: 8px;
+    background: var(--accent-warning);
+    border-radius: 50%;
+    animation: glow-pulse 2s ease-in-out infinite;
+}
+
+@keyframes glow-pulse {
+    0%, 100% {
+        opacity: 1;
+        box-shadow: 0 0 10px var(--accent-warning);
+    }
+    50% {
+        opacity: 0.6;
+        box-shadow: 0 0 20px var(--accent-warning);
+    }
+}
+
+.appstore__title {
+    margin-bottom: var(--space-lg);
+}
+
+.appstore__description {
+    font-size: 1.125rem;
+    margin-bottom: var(--space-2xl);
+}
+
+.appstore__categories {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-lg);
+    margin-bottom: var(--space-2xl);
+}
+
+.app-category {
+    padding: var(--space-xl);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-base);
+}
+
+.app-category:hover {
+    border-color: var(--accent-secondary);
+    transform: translateY(-4px);
+}
+
+.app-category__icon {
+    display: block;
+    font-size: 2.5rem;
+    margin-bottom: var(--space-md);
+}
+
+.app-category__name {
+    display: block;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.app-category__desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+/* Notify form */
+.appstore__notify {
+    max-width: 450px;
+    margin: 0 auto;
+}
+
+.appstore__notify p {
+    margin-bottom: var(--space-md);
+    color: var(--text-secondary);
+}
+
+.notify-form {
+    display: flex;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-sm);
+}
+
+.notify-form__input {
+    flex: 1;
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    outline: none;
+    transition: border-color var(--transition-fast);
+}
+
+.notify-form__input:focus {
+    border-color: var(--accent-primary);
+}
+
+.notify-form__input::placeholder {
+    color: var(--text-muted);
+}
+
+.notify-form__note {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+@media (max-width: 767px) {
+    .appstore__categories {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .notify-form {
+        flex-direction: column;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Network Section
+   -------------------------------------------------------------------------- */
+.network {
+    background: var(--bg-secondary);
+    padding: var(--space-4xl) 0;
+}
+
+.network__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3xl);
+    align-items: center;
+}
+
+.network__description {
+    font-size: 1.125rem;
+    margin-bottom: var(--space-xl);
+}
+
+.network__features {
+    margin-bottom: var(--space-xl);
+}
+
+.network__feature {
+    display: flex;
+    gap: var(--space-md);
+    margin-bottom: var(--space-lg);
+}
+
+.network__feature-icon {
+    flex-shrink: 0;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    color: var(--accent-primary);
+}
+
+.network__feature-icon svg {
+    width: 22px;
+    height: 22px;
+}
+
+.network__feature h4 {
+    margin-bottom: var(--space-xs);
+}
+
+.network__feature p {
+    font-size: 0.875rem;
+}
+
+/* Network diagram */
+.network-diagram {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    margin: 0 auto;
+}
+
+.network-node {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border: 2px solid var(--border-accent);
+    border-radius: 50%;
+    font-family: var(--font-heading);
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    z-index: 1;
+}
+
+.network-node--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--accent-primary);
+    color: var(--bg-primary);
+    border-color: var(--accent-primary);
+}
+
+.network-node--tor {
+    top: 15%;
+    left: 15%;
+    border-color: var(--accent-secondary);
+}
+
+.network-node--ipfs {
+    top: 15%;
+    right: 15%;
+    border-color: var(--accent-primary);
+}
+
+.network-node--exit {
+    bottom: 15%;
+    left: 15%;
+    border-color: var(--accent-warning);
+}
+
+.network-node--relay1 {
+    bottom: 15%;
+    right: 15%;
+}
+
+.network-node--relay2 {
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+}
+
+.network-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.network-line {
+    stroke: var(--border-accent);
+    stroke-width: 1;
+    stroke-dasharray: 5, 5;
+    animation: dash 20s linear infinite;
+}
+
+@keyframes dash {
+    to { stroke-dashoffset: -100; }
+}
+
+@media (max-width: 1023px) {
+    .network__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .network__visual {
+        order: -1;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Control Panel Section
+   -------------------------------------------------------------------------- */
+.control-panel {
+    padding: var(--space-4xl) 0;
+}
+
+/* Control panel mockup */
+.control-panel__mockup {
+    margin-bottom: var(--space-2xl);
+}
+
+.cp-window {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.cp-window__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.cp-window__dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--border-accent);
+}
+
+.cp-window__dot:first-child { background: #ff5f56; }
+.cp-window__dot:nth-child(2) { background: #ffbd2e; }
+.cp-window__dot:nth-child(3) { background: #27ca40; }
+
+.cp-window__title {
+    margin-left: auto;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.cp-window__content {
+    display: flex;
+    min-height: 350px;
+}
+
+.cp-sidebar {
+    width: 200px;
+    padding: var(--space-lg);
+    background: var(--bg-tertiary);
+    border-right: 1px solid var(--border-subtle);
+}
+
+.cp-sidebar__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: var(--space-sm);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+}
+
+.cp-sidebar__item:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.cp-sidebar__item.active {
+    background: var(--bg-secondary);
+    color: var(--accent-primary);
+}
+
+.cp-sidebar__item svg {
+    width: 18px;
+    height: 18px;
+}
+
+.cp-main {
+    flex: 1;
+    padding: var(--space-xl);
+}
+
+.cp-stats {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+}
+
+.cp-stat {
+    padding: var(--space-lg);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    text-align: center;
+}
+
+.cp-stat__value {
+    display: block;
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--accent-primary);
+    margin-bottom: var(--space-xs);
+}
+
+.cp-stat__label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.cp-actions {
+    display: flex;
+    gap: var(--space-md);
+}
+
+.cp-action {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.cp-action:hover {
+    border-color: var(--accent-primary);
+    color: var(--text-primary);
+}
+
+.cp-action svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* Control panel features */
+.control-panel__features {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-xl);
+}
+
+.cp-feature {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-full);
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.cp-feature svg {
+    width: 18px;
+    height: 18px;
+    color: var(--accent-primary);
+}
+
+@media (max-width: 767px) {
+    .cp-window__content {
+        flex-direction: column;
+    }
+
+    .cp-sidebar {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border-subtle);
+    }
+
+    .cp-stats {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .cp-actions {
+        flex-direction: column;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Pricing Section
+   -------------------------------------------------------------------------- */
+.pricing {
+    background: var(--bg-secondary);
+    padding: var(--space-4xl) 0;
+}
+
+/* Pricing toggle */
+.pricing__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-2xl);
+}
+
+.pricing__toggle-label {
+    font-size: 0.9375rem;
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+}
+
+.pricing__toggle-label.active {
+    color: var(--text-primary);
+}
+
+.pricing__discount {
+    display: inline-block;
+    padding: var(--space-xs) var(--space-sm);
+    background: rgba(var(--accent-primary-rgb), 0.1);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    color: var(--accent-primary);
+    margin-left: var(--space-sm);
+}
+
+.pricing__toggle-switch {
+    width: 52px;
+    height: 28px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-full);
+    position: relative;
+    cursor: pointer;
+    border: 1px solid var(--border-subtle);
+}
+
+.pricing__toggle-slider {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 20px;
+    height: 20px;
+    background: var(--accent-primary);
+    border-radius: 50%;
+    transition: transform var(--transition-base);
+}
+
+.pricing__toggle-switch.annual .pricing__toggle-slider {
+    transform: translateX(24px);
+}
+
+/* Pricing grid */
+.pricing__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-xl);
+    margin-bottom: var(--space-2xl);
+}
+
+.pricing-card {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    padding: var(--space-xl);
+    position: relative;
+    transition: all var(--transition-base);
+}
+
+.pricing-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--border-accent);
+}
+
+.pricing-card--featured {
+    border-color: var(--accent-primary);
+    background: linear-gradient(180deg, var(--bg-tertiary), rgba(var(--accent-primary-rgb), 0.05));
+}
+
+.pricing-card--featured:hover {
+    border-color: var(--accent-primary);
+}
+
+.pricing-card__badge {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: var(--space-sm) var(--space-lg);
+    background: var(--accent-primary);
+    color: var(--bg-primary);
+    font-family: var(--font-heading);
+    font-size: 0.75rem;
+    font-weight: 600;
+    border-radius: var(--radius-full);
+}
+
+.pricing-card__header {
+    margin-bottom: var(--space-lg);
+}
+
+.pricing-card__name {
+    margin-bottom: var(--space-sm);
+}
+
+.pricing-card__description {
+    font-size: 0.875rem;
+}
+
+.pricing-card__price {
+    margin-bottom: var(--space-xl);
+    padding-bottom: var(--space-lg);
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.pricing-card__currency {
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    vertical-align: top;
+}
+
+.pricing-card__amount {
+    font-family: var(--font-heading);
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.pricing-card__amount--custom {
+    font-size: 2.5rem;
+}
+
+.pricing-card__period {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.pricing-card__features {
+    margin-bottom: var(--space-xl);
+}
+
+.pricing-card__features li {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) 0;
+    font-size: 0.9375rem;
+    color: var(--text-secondary);
+}
+
+.pricing-card__features svg {
+    width: 18px;
+    height: 18px;
+    color: var(--accent-primary);
+    flex-shrink: 0;
+}
+
+/* Guarantee */
+.pricing__guarantee {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-lg);
+    padding: var(--space-xl);
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-subtle);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.pricing__guarantee svg {
+    width: 48px;
+    height: 48px;
+    color: var(--accent-primary);
+    flex-shrink: 0;
+}
+
+.pricing__guarantee strong {
+    display: block;
+    margin-bottom: var(--space-xs);
+}
+
+.pricing__guarantee p {
+    font-size: 0.875rem;
+    margin: 0;
+}
+
+@media (max-width: 1023px) {
+    .pricing__grid {
+        grid-template-columns: 1fr;
+        max-width: 400px;
+        margin: 0 auto var(--space-2xl);
+    }
+
+    .pricing-card--featured {
+        order: -1;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Trust Section
+   -------------------------------------------------------------------------- */
+.trust {
+    padding: var(--space-4xl) 0;
+}
+
+.trust__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-xl);
+}
+
+.trust-card {
+    padding: var(--space-xl);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xl);
+    text-align: center;
+    transition: all var(--transition-base);
+}
+
+.trust-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--accent-primary);
+}
+
+.trust-card__icon {
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.1), rgba(var(--accent-secondary-rgb), 0.1));
+    border-radius: var(--radius-lg);
+    margin: 0 auto var(--space-lg);
+}
+
+.trust-card__icon svg {
+    width: 32px;
+    height: 32px;
+    color: var(--accent-primary);
+}
+
+.trust-card h3 {
+    margin-bottom: var(--space-md);
+}
+
+.trust-card p {
+    font-size: 0.9375rem;
+}
+
+@media (max-width: 1023px) {
+    .trust__grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 639px) {
+    .trust__grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   CTA Section
+   -------------------------------------------------------------------------- */
+.cta {
+    padding: var(--space-4xl) 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.cta__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(ellipse at 50% 50%, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 60%);
+    z-index: var(--z-negative);
+}
+
+.cta__content {
+    text-align: center;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.cta__title {
+    margin-bottom: var(--space-lg);
+}
+
+.cta__description {
+    font-size: 1.25rem;
+    margin-bottom: var(--space-xl);
+}
+
+.cta__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-md);
+}
+
+/* --------------------------------------------------------------------------
+   Footer
+   -------------------------------------------------------------------------- */
+.footer {
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border-subtle);
+    padding: var(--space-3xl) 0 var(--space-xl);
+}
+
+.footer__grid {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: var(--space-3xl);
+    margin-bottom: var(--space-2xl);
+}
+
+.footer__logo {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--text-primary);
+    text-decoration: none;
+    margin-bottom: var(--space-md);
+}
+
+.footer__logo .logo-icon {
+    width: 32px;
+    height: 32px;
+}
+
+.footer__logo .logo-text {
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: 1.25rem;
+    letter-spacing: -0.02em;
+}
+
+.footer__tagline {
+    font-size: 0.875rem;
+    margin-bottom: var(--space-lg);
+}
+
+.footer__social {
+    display: flex;
+    gap: var(--space-md);
+}
+
+.social-link {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.social-link:hover {
+    border-color: var(--accent-primary);
+    color: var(--accent-primary);
+}
+
+.social-link svg {
+    width: 18px;
+    height: 18px;
+}
+
+.footer__links {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-xl);
+}
+
+.footer__column h4 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: var(--space-lg);
+}
+
+.footer__column ul li {
+    margin-bottom: var(--space-sm);
+}
+
+.footer__column a {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    transition: color var(--transition-fast);
+}
+
+.footer__column a:hover {
+    color: var(--text-primary);
+}
+
+.footer__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: var(--space-xl);
+    border-top: 1px solid var(--border-subtle);
+}
+
+.footer__copyright,
+.footer__credit {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.footer__credit a {
+    color: var(--accent-primary);
+}
+
+@media (max-width: 1023px) {
+    .footer__grid {
+        grid-template-columns: 1fr;
+    }
+
+    .footer__links {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 639px) {
+    .footer__links {
+        grid-template-columns: 1fr;
+    }
+
+    .footer__bottom {
+        flex-direction: column;
+        gap: var(--space-sm);
+        text-align: center;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Animations & Reveal
+   -------------------------------------------------------------------------- */
+.reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.reveal.active {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.reveal--delay-1 { transition-delay: 0.1s; }
+.reveal--delay-2 { transition-delay: 0.2s; }
+.reveal--delay-3 { transition-delay: 0.3s; }
+
+/* --------------------------------------------------------------------------
+   Utility Classes
+   -------------------------------------------------------------------------- */
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
diff --git a/wwwroot/index.html b/wwwroot/index.html
new file mode 100644
index 0000000..e0d24f1
--- /dev/null
+++ b/wwwroot/index.html
@@ -0,0 +1,1322 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Privacy First - The Internet, Reimagined for Privacy. Privacy-focused internet services with encrypted hosting, email, storage, and more.">
+    <meta name="keywords" content="privacy, hosting, encrypted email, VPN, cloud storage, private internet">
+    <meta name="author" content="Privacy First - Powered by SilverLABS">
+    <meta name="theme-color" content="#0a0a0f">
+
+    <!-- Open Graph -->
+    <meta property="og:title" content="Privacy First - The Internet, Reimagined for Privacy">
+    <meta property="og:description" content="Privacy-focused internet services provider. No tracking, no data mining, no compromise.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://privacy-first.uk">
+
+    <title>Privacy First | Privacy-Focused Internet Services</title>
+
+    <!-- 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=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="css/style.css">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
+</head>
+<body>
+    <!-- Navigation -->
+    <header class="header" id="header">
+        <nav class="nav container">
+            <a href="#" class="nav__logo">
+                <span class="logo-icon">
+                    <svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <!-- Shield outline with gradient -->
+                        <defs>
+                            <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                                <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
+                            </linearGradient>
+                            <linearGradient id="shieldInner" x1="0%" y1="0%" x2="0%" y2="100%">
+                                <stop offset="0%" style="stop-color:#1a1a24;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#12121a;stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                        <!-- Outer shield -->
+                        <path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGrad)"/>
+                        <!-- Inner shield -->
+                        <path d="M20 6L7 11.5v9.5c0 8.5 13 15 13 15s13-6.5 13-15v-9.5L20 6z" fill="url(#shieldInner)"/>
+                        <!-- Privacy "eye" symbol - crossed out -->
+                        <circle cx="20" cy="20" r="5" stroke="url(#shieldGrad)" stroke-width="1.5" fill="none"/>
+                        <circle cx="20" cy="20" r="2" fill="url(#shieldGrad)"/>
+                        <line x1="14" y1="26" x2="26" y2="14" stroke="url(#shieldGrad)" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </span>
+                <span class="logo-text">Privacy<span class="logo-accent">First</span></span>
+            </a>
+
+            <div class="nav__menu" id="nav-menu">
+                <ul class="nav__list">
+                    <li class="nav__item"><a href="#services" class="nav__link">Services</a></li>
+                    <li class="nav__item"><a href="#platform" class="nav__link">Platform</a></li>
+                    <li class="nav__item"><a href="#passport" class="nav__link">Passport</a></li>
+                    <li class="nav__item"><a href="#pricing" class="nav__link">Pricing</a></li>
+                    <li class="nav__item"><a href="#network" class="nav__link">Network</a></li>
+                </ul>
+                <button class="nav__close" id="nav-close" aria-label="Close menu">×</button>
+            </div>
+
+            <div class="nav__actions">
+                <a href="#passport" class="btn btn--outline btn--sm">Sign In</a>
+                <a href="#passport" class="btn btn--primary btn--sm">Get Started</a>
+            </div>
+
+            <button class="nav__toggle" id="nav-toggle" aria-label="Open menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </nav>
+    </header>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="hero" id="hero">
+            <canvas id="particle-canvas" class="hero__canvas"></canvas>
+            <div class="hero__gradient"></div>
+
+            <div class="container hero__container">
+                <div class="hero__content reveal">
+                    <div class="hero__badge">
+                        <span class="pulse"></span>
+                        Now in Public Beta
+                    </div>
+
+                    <h1 class="hero__title">
+                        The Internet,<br>
+                        <span class="gradient-text">Reimagined for Privacy</span>
+                    </h1>
+
+                    <p class="hero__description">
+                        Take back control of your digital life. Privacy First delivers enterprise-grade
+                        hosting, encrypted communications, and secure cloud services—built from the
+                        ground up with your privacy as the foundation.
+                    </p>
+
+                    <div class="hero__cta">
+                        <a href="#passport" class="btn btn--primary btn--lg">
+                            Get Started with Passport
+                            <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                        <a href="#services" class="btn btn--ghost btn--lg">Explore Services</a>
+                    </div>
+
+                    <div class="hero__trust">
+                        <div class="trust-badge">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                            </svg>
+                            No Tracking
+                        </div>
+                        <div class="trust-badge">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <path d="M4.93 4.93l14.14 14.14"/>
+                            </svg>
+                            No Data Mining
+                        </div>
+                        <div class="trust-badge">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+                                <path d="M22 4L12 14.01l-3-3"/>
+                            </svg>
+                            No Compromise
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hero__visual reveal reveal--delay-1">
+                    <div class="hero__mockup">
+                        <div class="mockup__header">
+                            <span class="mockup__dot"></span>
+                            <span class="mockup__dot"></span>
+                            <span class="mockup__dot"></span>
+                            <span class="mockup__title">Privacy Dashboard</span>
+                        </div>
+                        <div class="mockup__content">
+                            <div class="mockup__stat">
+                                <span class="mockup__stat-value">0</span>
+                                <span class="mockup__stat-label">Data Points Collected</span>
+                            </div>
+                            <div class="mockup__stat">
+                                <span class="mockup__stat-value">256-bit</span>
+                                <span class="mockup__stat-label">AES Encryption</span>
+                            </div>
+                            <div class="mockup__stat">
+                                <span class="mockup__stat-value">100%</span>
+                                <span class="mockup__stat-label">Your Data, Your Control</span>
+                            </div>
+                            <div class="mockup__services">
+                                <div class="mockup__service active">
+                                    <span class="service-icon">🌐</span>
+                                    <span>Hosting</span>
+                                </div>
+                                <div class="mockup__service">
+                                    <span class="service-icon">📧</span>
+                                    <span>Email</span>
+                                </div>
+                                <div class="mockup__service">
+                                    <span class="service-icon">☁️</span>
+                                    <span>Storage</span>
+                                </div>
+                                <div class="mockup__service">
+                                    <span class="service-icon">🔐</span>
+                                    <span>VPN</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hero__scroll">
+                <span>Scroll to explore</span>
+                <div class="scroll-indicator"></div>
+            </div>
+        </section>
+
+        <!-- Problem Statement -->
+        <section class="problem" id="problem">
+            <div class="container">
+                <div class="problem__content reveal">
+                    <p class="section-label">The Reality</p>
+                    <h2 class="problem__title">
+                        The internet wasn't built for privacy.<br>
+                        <span class="gradient-text">We're changing that.</span>
+                    </h2>
+                </div>
+
+                <div class="problem__comparison">
+                    <div class="comparison-card comparison-card--bad reveal reveal--delay-1">
+                        <div class="comparison-card__header">
+                            <span class="comparison-card__icon">⚠️</span>
+                            <h3>Traditional Providers</h3>
+                        </div>
+                        <ul class="comparison-card__list">
+                            <li><span class="x-mark">✗</span> Scan your emails for advertising</li>
+                            <li><span class="x-mark">✗</span> Sell your browsing data to third parties</li>
+                            <li><span class="x-mark">✗</span> Track every click and keystroke</li>
+                            <li><span class="x-mark">✗</span> Retain data indefinitely without consent</li>
+                            <li><span class="x-mark">✗</span> Comply with mass surveillance requests</li>
+                        </ul>
+                    </div>
+
+                    <div class="comparison-card comparison-card--good reveal reveal--delay-2">
+                        <div class="comparison-card__header">
+                            <span class="comparison-card__icon">🛡️</span>
+                            <h3>Privacy First</h3>
+                        </div>
+                        <ul class="comparison-card__list">
+                            <li><span class="check-mark">✓</span> Zero-knowledge encryption on all data</li>
+                            <li><span class="check-mark">✓</span> No data monetization—ever</li>
+                            <li><span class="check-mark">✓</span> Minimal data collection by design</li>
+                            <li><span class="check-mark">✓</span> Automatic data purging on request</li>
+                            <li><span class="check-mark">✓</span> Warrant canary & transparency reports</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="problem__stats reveal reveal--delay-3">
+                    <div class="stat-card">
+                        <span class="stat-card__value">2,200+</span>
+                        <span class="stat-card__label">Data breaches in 2024</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-card__value">1B+</span>
+                        <span class="stat-card__label">Records exposed yearly</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-card__value">$9.44M</span>
+                        <span class="stat-card__label">Average breach cost</span>
+                    </div>
+                    <div class="stat-card">
+                        <span class="stat-card__value">72%</span>
+                        <span class="stat-card__label">Distrust big tech with data</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Core Services -->
+        <section class="services" id="services">
+            <div class="container">
+                <div class="section-header reveal">
+                    <p class="section-label">What We Offer</p>
+                    <h2 class="section-title">Privacy-First Services</h2>
+                    <p class="section-description">
+                        Every service we build starts with a simple question:
+                        "How can we deliver this with the least amount of user data possible?"
+                    </p>
+                </div>
+
+                <div class="services__grid">
+                    <article class="service-card reveal reveal--delay-1">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+                                <polyline points="9,22 9,12 15,12 15,22"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">Web Hosting</h3>
+                        <p class="service-card__description">
+                            Privacy-first hosting with encrypted storage, automatic SSL,
+                            and no server-side analytics. Your website, your data.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>Encrypted at rest & in transit</li>
+                            <li>DDoS protection included</li>
+                            <li>One-click WordPress & Blazor</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+
+                    <article class="service-card reveal reveal--delay-2">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                                <polyline points="22,6 12,13 2,6"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">Email Services</h3>
+                        <p class="service-card__description">
+                            End-to-end encrypted email with zero content scanning.
+                            Your conversations stay between you and your recipients.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>PGP encryption built-in</li>
+                            <li>Custom domains supported</li>
+                            <li>No advertising, ever</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+
+                    <article class="service-card reveal reveal--delay-3">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">Cloud Storage</h3>
+                        <p class="service-card__description">
+                            Zero-knowledge encrypted file storage. We can't see your files
+                            even if we wanted to—and we don't want to.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>Client-side encryption</li>
+                            <li>Secure file sharing</li>
+                            <li>Version history</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+
+                    <article class="service-card reveal reveal--delay-1">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                                <path d="M7 11V7a5 5 0 0110 0v4"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">VPN & Network</h3>
+                        <p class="service-card__description">
+                            Anonymous browsing with a strict no-logs policy.
+                            Browse freely without leaving a trace.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>WireGuard protocol</li>
+                            <li>Kill switch enabled</li>
+                            <li>Multi-hop routing available</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+
+                    <article class="service-card reveal reveal--delay-2">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <circle cx="12" cy="12" r="10"/>
+                                <line x1="2" y1="12" x2="22" y2="12"/>
+                                <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">Domain Registration</h3>
+                        <p class="service-card__description">
+                            Register domains with private WHOIS by default.
+                            Keep your personal information off public records.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>Private WHOIS included</li>
+                            <li>DNSSEC support</li>
+                            <li>Secure DNS hosting</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+
+                    <article class="service-card reveal reveal--delay-3">
+                        <div class="service-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <ellipse cx="12" cy="5" rx="9" ry="3"/>
+                                <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+                                <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+                            </svg>
+                        </div>
+                        <h3 class="service-card__title">Database Hosting</h3>
+                        <p class="service-card__description">
+                            Encrypted PostgreSQL and MySQL hosting with automated
+                            backups. Your data stays yours.
+                        </p>
+                        <ul class="service-card__features">
+                            <li>Encrypted connections</li>
+                            <li>Automated daily backups</li>
+                            <li>Point-in-time recovery</li>
+                        </ul>
+                        <a href="#pricing" class="service-card__link">
+                            Learn More
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </article>
+                </div>
+            </div>
+        </section>
+
+        <!-- Platform Showcase -->
+        <section class="platform" id="platform">
+            <div class="container">
+                <div class="platform__grid">
+                    <div class="platform__content reveal">
+                        <p class="section-label">Developer Platform</p>
+                        <h2 class="section-title">Build on SilverSHELL</h2>
+                        <p class="platform__description">
+                            Our multi-tenant cloud platform lets you build privacy-first
+                            applications without compromising on features. Deploy Blazor
+                            WebAssembly apps, .NET APIs, and more—all with built-in
+                            encryption and zero tracking.
+                        </p>
+
+                        <div class="platform__features">
+                            <div class="platform__feature">
+                                <div class="platform__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <polyline points="16 18 22 12 16 6"/>
+                                        <polyline points="8 6 2 12 8 18"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>.NET 9 Ready</h4>
+                                    <p>Latest framework with AOT compilation support</p>
+                                </div>
+                            </div>
+
+                            <div class="platform__feature">
+                                <div class="platform__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
+                                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+                                        <line x1="12" y1="22.08" x2="12" y2="12"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>Multi-Tenant Architecture</h4>
+                                    <p>Complete data isolation between tenants</p>
+                                </div>
+                            </div>
+
+                            <div class="platform__feature">
+                                <div class="platform__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>Security by Default</h4>
+                                    <p>JWT auth, encryption, and CORS built-in</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <a href="#" class="btn btn--primary">
+                            View Documentation
+                            <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
+                                <polyline points="15,3 21,3 21,9"/>
+                                <line x1="10" y1="14" x2="21" y2="3"/>
+                            </svg>
+                        </a>
+                    </div>
+
+                    <div class="platform__visual reveal reveal--delay-1">
+                        <div class="code-window">
+                            <div class="code-window__header">
+                                <span class="code-window__dot"></span>
+                                <span class="code-window__dot"></span>
+                                <span class="code-window__dot"></span>
+                                <span class="code-window__title">Program.cs</span>
+                            </div>
+                            <pre class="code-window__content"><code><span class="code-keyword">var</span> builder = WebApplication.CreateBuilder(args);
+
+<span class="code-comment">// Privacy-first configuration</span>
+builder.Services.AddSilverShell(options => {
+    options.<span class="code-property">EnableEncryption</span> = <span class="code-keyword">true</span>;
+    options.<span class="code-property">DisableTracking</span> = <span class="code-keyword">true</span>;
+    options.<span class="code-property">DataRetention</span> = TimeSpan.Zero;
+});
+
+builder.Services.AddAuthentication()
+    .AddPrivacyFirstJwt();
+
+<span class="code-keyword">var</span> app = builder.Build();
+
+app.UsePrivacyHeaders();
+app.MapSilverShellEndpoints();
+
+app.Run();</code></pre>
+                        </div>
+
+                        <div class="platform__apps">
+                            <span class="platform__apps-label">App Ecosystem</span>
+                            <div class="platform__app-icons">
+                                <div class="app-icon" title="Commerce">🛒</div>
+                                <div class="app-icon" title="Analytics">📊</div>
+                                <div class="app-icon" title="CRM">👥</div>
+                                <div class="app-icon" title="Custom">⚡</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Passport Identity -->
+        <section class="passport" id="passport">
+            <div class="passport__glow"></div>
+            <div class="container">
+                <div class="passport__grid">
+                    <div class="passport__visual reveal">
+                        <div class="passport-card">
+                            <div class="passport-card__header">
+                                <div class="passport-card__logo">
+                                    <svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <defs>
+                                            <linearGradient id="shieldGradPassport" x1="0%" y1="0%" x2="100%" y2="100%">
+                                                <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
+                                                <stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
+                                            </linearGradient>
+                                        </defs>
+                                        <path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGradPassport)"/>
+                                    </svg>
+                                </div>
+                                <span class="passport-card__badge">PASSPORT</span>
+                            </div>
+                            <div class="passport-card__content">
+                                <div class="passport-card__avatar">
+                                    <svg viewBox="0 0 24 24" fill="currentColor">
+                                        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                                    </svg>
+                                </div>
+                                <div class="passport-card__info">
+                                    <span class="passport-card__name">anonymous_user</span>
+                                    <span class="passport-card__id">ID: ****-****-7X2K</span>
+                                </div>
+                            </div>
+                            <div class="passport-card__services">
+                                <div class="passport-card__service active">Hosting</div>
+                                <div class="passport-card__service">Email</div>
+                                <div class="passport-card__service">Storage</div>
+                            </div>
+                            <div class="passport-card__footer">
+                                <span class="passport-card__status">
+                                    <span class="status-dot"></span>
+                                    All services active
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="passport__content reveal reveal--delay-1">
+                        <p class="section-label">Identity Portal</p>
+                        <h2 class="section-title">One Identity.<br><span class="gradient-text">Complete Control.</span></h2>
+
+                        <p class="passport__description">
+                            Passport is your single sign-on for all Privacy First services.
+                            We've reimagined identity management with privacy at the core—we only
+                            ask for a username. Everything else is optional.
+                        </p>
+
+                        <div class="passport__features">
+                            <div class="passport__feature">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+                                    <polyline points="22 4 12 14.01 9 11.01"/>
+                                </svg>
+                                <span>Minimal data collection—username only required</span>
+                            </div>
+                            <div class="passport__feature">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+                                    <polyline points="22 4 12 14.01 9 11.01"/>
+                                </svg>
+                                <span>Manage all connected apps in one place</span>
+                            </div>
+                            <div class="passport__feature">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+                                    <polyline points="22 4 12 14.01 9 11.01"/>
+                                </svg>
+                                <span>Export your data anytime—it's yours</span>
+                            </div>
+                            <div class="passport__feature">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
+                                    <polyline points="22 4 12 14.01 9 11.01"/>
+                                </svg>
+                                <span>GDPR compliant by design, not afterthought</span>
+                            </div>
+                        </div>
+
+                        <div class="passport__cta">
+                            <a href="#" class="btn btn--primary btn--lg">Create Your Passport</a>
+                            <a href="#" class="btn btn--ghost">Sign In</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Search Marketplace -->
+        <section class="marketplace" id="marketplace">
+            <div class="container">
+                <div class="section-header reveal">
+                    <p class="section-label">Privacy Search</p>
+                    <h2 class="section-title">Discover Without Being Discovered</h2>
+                    <p class="section-description">
+                        Search products across multiple vendors without creating an account.
+                        No tracking, no profile building, no creepy personalized ads following you around.
+                    </p>
+                </div>
+
+                <div class="marketplace__demo reveal reveal--delay-1">
+                    <div class="search-mockup">
+                        <div class="search-mockup__bar">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="11" cy="11" r="8"/>
+                                <path d="M21 21l-4.35-4.35"/>
+                            </svg>
+                            <input type="text" placeholder="Search for anything..." disabled>
+                            <button class="search-mockup__btn">Search</button>
+                        </div>
+
+                        <div class="search-mockup__results">
+                            <div class="search-result">
+                                <div class="search-result__image">📱</div>
+                                <div class="search-result__info">
+                                    <span class="search-result__title">Privacy Phone Case</span>
+                                    <span class="search-result__vendor">SecureShop</span>
+                                    <span class="search-result__price">$29.99</span>
+                                </div>
+                            </div>
+                            <div class="search-result">
+                                <div class="search-result__image">🔐</div>
+                                <div class="search-result__info">
+                                    <span class="search-result__title">Hardware Security Key</span>
+                                    <span class="search-result__vendor">CryptoGear</span>
+                                    <span class="search-result__price">$45.00</span>
+                                </div>
+                            </div>
+                            <div class="search-result">
+                                <div class="search-result__image">📡</div>
+                                <div class="search-result__info">
+                                    <span class="search-result__title">Faraday Bag</span>
+                                    <span class="search-result__vendor">PrivacyTools</span>
+                                    <span class="search-result__price">$19.99</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="search-mockup__footer">
+                            <span class="privacy-indicator">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                                </svg>
+                                No search history stored • No tracking cookies
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="marketplace__features reveal reveal--delay-2">
+                    <div class="marketplace__feature">
+                        <span class="marketplace__feature-icon">🔍</span>
+                        <h4>Anonymous Search</h4>
+                        <p>No login required for browsing</p>
+                    </div>
+                    <div class="marketplace__feature">
+                        <span class="marketplace__feature-icon">🌐</span>
+                        <h4>Multi-Provider</h4>
+                        <p>Results from multiple vendors</p>
+                    </div>
+                    <div class="marketplace__feature">
+                        <span class="marketplace__feature-icon">🚫</span>
+                        <h4>No Profiling</h4>
+                        <p>Zero behavioral tracking</p>
+                    </div>
+                    <div class="marketplace__feature">
+                        <span class="marketplace__feature-icon">💳</span>
+                        <h4>Crypto Payments</h4>
+                        <p>Pay anonymously with BTC/XMR</p>
+                    </div>
+                </div>
+
+                <div class="text-center reveal reveal--delay-3">
+                    <a href="#" class="btn btn--primary btn--lg">Explore Marketplace</a>
+                </div>
+            </div>
+        </section>
+
+        <!-- AppStore Coming Soon -->
+        <section class="appstore" id="appstore">
+            <div class="appstore__bg"></div>
+            <div class="container">
+                <div class="appstore__content reveal">
+                    <div class="coming-soon-badge">
+                        <span class="glow-pulse"></span>
+                        Coming Soon
+                    </div>
+
+                    <h2 class="appstore__title">
+                        The Privacy-First<br>
+                        <span class="gradient-text glow-text">App Ecosystem</span>
+                    </h2>
+
+                    <p class="appstore__description">
+                        A curated marketplace of privacy-respecting applications.
+                        Every app reviewed for data collection practices.
+                        No surveillance-ware allowed.
+                    </p>
+
+                    <div class="appstore__categories">
+                        <div class="app-category reveal reveal--delay-1">
+                            <span class="app-category__icon">📱</span>
+                            <span class="app-category__name">Android Apps</span>
+                            <span class="app-category__desc">APK distribution</span>
+                        </div>
+                        <div class="app-category reveal reveal--delay-2">
+                            <span class="app-category__icon">🌐</span>
+                            <span class="app-category__name">PWA Apps</span>
+                            <span class="app-category__desc">Web applications</span>
+                        </div>
+                        <div class="app-category reveal reveal--delay-3">
+                            <span class="app-category__icon">🧩</span>
+                            <span class="app-category__name">Plugins</span>
+                            <span class="app-category__desc">Platform extensions</span>
+                        </div>
+                        <div class="app-category reveal reveal--delay-1">
+                            <span class="app-category__icon">🔧</span>
+                            <span class="app-category__name">Browser Extensions</span>
+                            <span class="app-category__desc">Privacy tools</span>
+                        </div>
+                    </div>
+
+                    <div class="appstore__notify">
+                        <p>Get notified when we launch</p>
+                        <form class="notify-form" onsubmit="return false;">
+                            <input type="email" placeholder="Enter your email" class="notify-form__input">
+                            <button type="submit" class="btn btn--accent">Notify Me</button>
+                        </form>
+                        <span class="notify-form__note">We'll only use this to notify you. Obviously.</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- PrivateWeb Network -->
+        <section class="network" id="network">
+            <div class="container">
+                <div class="network__grid">
+                    <div class="network__content reveal">
+                        <p class="section-label">Advanced Privacy</p>
+                        <h2 class="section-title">The Censorship-Resistant Internet</h2>
+
+                        <p class="network__description">
+                            PrivateWeb is our distributed privacy network for users who need
+                            the highest level of anonymity. Built on Tor and IPFS, it provides
+                            censorship-resistant hosting and communication.
+                        </p>
+
+                        <div class="network__features">
+                            <div class="network__feature">
+                                <div class="network__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <circle cx="12" cy="12" r="10"/>
+                                        <circle cx="12" cy="12" r="6"/>
+                                        <circle cx="12" cy="12" r="2"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>Tor Integration</h4>
+                                    <p>Onion routing for anonymous access</p>
+                                </div>
+                            </div>
+
+                            <div class="network__feature">
+                                <div class="network__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>IPFS Storage</h4>
+                                    <p>Distributed, immutable file storage</p>
+                                </div>
+                            </div>
+
+                            <div class="network__feature">
+                                <div class="network__feature-icon">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                                        <path d="M12 8v4M12 16h.01"/>
+                                    </svg>
+                                </div>
+                                <div>
+                                    <h4>Warrant Canary</h4>
+                                    <p>Transparent security reporting</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <a href="#" class="btn btn--outline btn--lg">
+                            Join the Network
+                            <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                    </div>
+
+                    <div class="network__visual reveal reveal--delay-1">
+                        <div class="network-diagram">
+                            <div class="network-node network-node--center">
+                                <span>You</span>
+                            </div>
+                            <div class="network-node network-node--tor">
+                                <span>Tor</span>
+                            </div>
+                            <div class="network-node network-node--ipfs">
+                                <span>IPFS</span>
+                            </div>
+                            <div class="network-node network-node--exit">
+                                <span>Exit</span>
+                            </div>
+                            <div class="network-node network-node--relay1">
+                                <span>Relay</span>
+                            </div>
+                            <div class="network-node network-node--relay2">
+                                <span>Relay</span>
+                            </div>
+                            <svg class="network-lines" viewBox="0 0 300 300">
+                                <line x1="150" y1="150" x2="75" y2="75" class="network-line"/>
+                                <line x1="150" y1="150" x2="225" y2="75" class="network-line"/>
+                                <line x1="150" y1="150" x2="75" y2="225" class="network-line"/>
+                                <line x1="150" y1="150" x2="225" y2="225" class="network-line"/>
+                                <line x1="75" y1="75" x2="225" y2="75" class="network-line"/>
+                                <line x1="75" y1="225" x2="225" y2="225" class="network-line"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Control Panel -->
+        <section class="control-panel" id="control-panel">
+            <div class="container">
+                <div class="section-header reveal">
+                    <p class="section-label">Service Management</p>
+                    <h2 class="section-title">Enterprise-Grade Control</h2>
+                    <p class="section-description">
+                        PrivateWebCP gives you complete control over your services
+                        with a clean, intuitive interface.
+                    </p>
+                </div>
+
+                <div class="control-panel__mockup reveal reveal--delay-1">
+                    <div class="cp-window">
+                        <div class="cp-window__header">
+                            <span class="cp-window__dot"></span>
+                            <span class="cp-window__dot"></span>
+                            <span class="cp-window__dot"></span>
+                            <span class="cp-window__title">PrivateWebCP - Control Panel</span>
+                        </div>
+                        <div class="cp-window__content">
+                            <aside class="cp-sidebar">
+                                <div class="cp-sidebar__item active">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <rect x="3" y="3" width="7" height="7"/>
+                                        <rect x="14" y="3" width="7" height="7"/>
+                                        <rect x="14" y="14" width="7" height="7"/>
+                                        <rect x="3" y="14" width="7" height="7"/>
+                                    </svg>
+                                    Dashboard
+                                </div>
+                                <div class="cp-sidebar__item">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+                                    </svg>
+                                    Websites
+                                </div>
+                                <div class="cp-sidebar__item">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+                                        <polyline points="22,6 12,13 2,6"/>
+                                    </svg>
+                                    Email
+                                </div>
+                                <div class="cp-sidebar__item">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <ellipse cx="12" cy="5" rx="9" ry="3"/>
+                                        <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+                                        <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+                                    </svg>
+                                    Databases
+                                </div>
+                                <div class="cp-sidebar__item">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <circle cx="12" cy="12" r="3"/>
+                                        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
+                                    </svg>
+                                    Settings
+                                </div>
+                            </aside>
+                            <main class="cp-main">
+                                <div class="cp-stats">
+                                    <div class="cp-stat">
+                                        <span class="cp-stat__value">3</span>
+                                        <span class="cp-stat__label">Active Sites</span>
+                                    </div>
+                                    <div class="cp-stat">
+                                        <span class="cp-stat__value">12.4 GB</span>
+                                        <span class="cp-stat__label">Storage Used</span>
+                                    </div>
+                                    <div class="cp-stat">
+                                        <span class="cp-stat__value">99.9%</span>
+                                        <span class="cp-stat__label">Uptime</span>
+                                    </div>
+                                    <div class="cp-stat">
+                                        <span class="cp-stat__value">🟢</span>
+                                        <span class="cp-stat__label">All Systems</span>
+                                    </div>
+                                </div>
+                                <div class="cp-actions">
+                                    <button class="cp-action">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <line x1="12" y1="5" x2="12" y2="19"/>
+                                            <line x1="5" y1="12" x2="19" y2="12"/>
+                                        </svg>
+                                        New Website
+                                    </button>
+                                    <button class="cp-action">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                                            <path d="M7 11V7a5 5 0 0110 0v4"/>
+                                        </svg>
+                                        SSL Certificates
+                                    </button>
+                                    <button class="cp-action">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <polyline points="23 4 23 10 17 10"/>
+                                            <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
+                                        </svg>
+                                        Backup Now
+                                    </button>
+                                </div>
+                            </main>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="control-panel__features reveal reveal--delay-2">
+                    <div class="cp-feature">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                        </svg>
+                        <span>One-Click Provisioning</span>
+                    </div>
+                    <div class="cp-feature">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0110 0v4"/>
+                        </svg>
+                        <span>Automated SSL/TLS</span>
+                    </div>
+                    <div class="cp-feature">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+                        </svg>
+                        <span>Resource Monitoring</span>
+                    </div>
+                    <div class="cp-feature">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <polyline points="12 6 12 12 16 14"/>
+                        </svg>
+                        <span>Scheduled Backups</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Pricing -->
+        <section class="pricing" id="pricing">
+            <div class="container">
+                <div class="section-header reveal">
+                    <p class="section-label">Simple Pricing</p>
+                    <h2 class="section-title">Privacy Shouldn't Be a Premium</h2>
+                    <p class="section-description">
+                        Transparent pricing with no hidden fees.
+                        All plans include our core privacy protections.
+                    </p>
+                </div>
+
+                <div class="pricing__toggle reveal">
+                    <span class="pricing__toggle-label" data-period="monthly">Monthly</span>
+                    <button class="pricing__toggle-switch" id="pricing-toggle" aria-label="Toggle billing period">
+                        <span class="pricing__toggle-slider"></span>
+                    </button>
+                    <span class="pricing__toggle-label" data-period="annual">
+                        Annual
+                        <span class="pricing__discount">Save 20%</span>
+                    </span>
+                </div>
+
+                <div class="pricing__grid">
+                    <div class="pricing-card reveal reveal--delay-1">
+                        <div class="pricing-card__header">
+                            <h3 class="pricing-card__name">Individual</h3>
+                            <p class="pricing-card__description">Perfect for personal projects and privacy-conscious individuals</p>
+                        </div>
+                        <div class="pricing-card__price">
+                            <span class="pricing-card__currency">$</span>
+                            <span class="pricing-card__amount" data-monthly="9.99" data-annual="7.99">9.99</span>
+                            <span class="pricing-card__period">/month</span>
+                        </div>
+                        <ul class="pricing-card__features">
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 1 Website</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 5 GB Encrypted Storage</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 1 Email Account</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Free SSL Certificate</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Basic VPN Access</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Community Support</li>
+                        </ul>
+                        <a href="#passport" class="btn btn--outline btn--block">Get Started</a>
+                    </div>
+
+                    <div class="pricing-card pricing-card--featured reveal reveal--delay-2">
+                        <div class="pricing-card__badge">Most Popular</div>
+                        <div class="pricing-card__header">
+                            <h3 class="pricing-card__name">Professional</h3>
+                            <p class="pricing-card__description">For freelancers, small teams, and growing businesses</p>
+                        </div>
+                        <div class="pricing-card__price">
+                            <span class="pricing-card__currency">$</span>
+                            <span class="pricing-card__amount" data-monthly="29.99" data-annual="23.99">29.99</span>
+                            <span class="pricing-card__period">/month</span>
+                        </div>
+                        <ul class="pricing-card__features">
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 5 Websites</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 50 GB Encrypted Storage</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 10 Email Accounts</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Wildcard SSL</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Full VPN Access</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> API Access</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Priority Support</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Database Hosting</li>
+                        </ul>
+                        <a href="#passport" class="btn btn--primary btn--block">Get Started</a>
+                    </div>
+
+                    <div class="pricing-card reveal reveal--delay-3">
+                        <div class="pricing-card__header">
+                            <h3 class="pricing-card__name">Enterprise</h3>
+                            <p class="pricing-card__description">For organizations requiring dedicated resources and SLA</p>
+                        </div>
+                        <div class="pricing-card__price">
+                            <span class="pricing-card__amount pricing-card__amount--custom">Custom</span>
+                        </div>
+                        <ul class="pricing-card__features">
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Websites</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Storage</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Email</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Dedicated Resources</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Custom VPN Endpoints</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> SLA Guarantee</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> White-label Option</li>
+                            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Dedicated Support</li>
+                        </ul>
+                        <a href="#" class="btn btn--outline btn--block">Contact Sales</a>
+                    </div>
+                </div>
+
+                <div class="pricing__guarantee reveal">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                    </svg>
+                    <div>
+                        <strong>30-Day Money-Back Guarantee</strong>
+                        <p>Try Privacy First risk-free. Not satisfied? Full refund, no questions asked.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Trust & Security -->
+        <section class="trust" id="trust">
+            <div class="container">
+                <div class="section-header reveal">
+                    <p class="section-label">Trust & Security</p>
+                    <h2 class="section-title">Built on Transparency</h2>
+                </div>
+
+                <div class="trust__grid">
+                    <div class="trust-card reveal reveal--delay-1">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                                <polyline points="9 12 11 14 15 10"/>
+                            </svg>
+                        </div>
+                        <h3>Zero-Knowledge Encryption</h3>
+                        <p>Your data is encrypted before it leaves your device. We can't read it even if we wanted to.</p>
+                    </div>
+
+                    <div class="trust-card reveal reveal--delay-2">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-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>
+                        </div>
+                        <h3>Transparency Reports</h3>
+                        <p>We publish regular reports on data requests. See exactly how we handle legal inquiries.</p>
+                    </div>
+
+                    <div class="trust-card reveal reveal--delay-3">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                                <path d="M12 8v4l3 3"/>
+                            </svg>
+                        </div>
+                        <h3>Warrant Canary</h3>
+                        <p>Updated daily. If we receive a secret subpoena, you'll know—because the canary will stop singing.</p>
+                    </div>
+
+                    <div class="trust-card reveal reveal--delay-1">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <polyline points="16 18 22 12 16 6"/>
+                                <polyline points="8 6 2 12 8 18"/>
+                            </svg>
+                        </div>
+                        <h3>Open Source Core</h3>
+                        <p>Our core encryption libraries are open source. Audit the code yourself—we encourage it.</p>
+                    </div>
+
+                    <div class="trust-card reveal reveal--delay-2">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                                <path d="M7 11V7a5 5 0 0110 0v4"/>
+                            </svg>
+                        </div>
+                        <h3>GDPR Compliant</h3>
+                        <p>Full compliance with EU data protection regulations. Your rights are our priority.</p>
+                    </div>
+
+                    <div class="trust-card reveal reveal--delay-3">
+                        <div class="trust-card__icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <circle cx="12" cy="12" r="10"/>
+                                <line x1="12" y1="16" x2="12" y2="12"/>
+                                <line x1="12" y1="8" x2="12.01" y2="8"/>
+                            </svg>
+                        </div>
+                        <h3>No Hidden Trackers</h3>
+                        <p>We don't use Google Analytics, Facebook Pixel, or any third-party tracking scripts.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="cta">
+            <div class="cta__bg"></div>
+            <div class="container">
+                <div class="cta__content reveal">
+                    <h2 class="cta__title">Ready to Take Back Your Privacy?</h2>
+                    <p class="cta__description">
+                        Join thousands of users who've made the switch to privacy-first internet services.
+                        Start with our 30-day free trial—no credit card required.
+                    </p>
+                    <div class="cta__actions">
+                        <a href="#passport" class="btn btn--primary btn--xl">
+                            Create Free Account
+                            <svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M5 12h14M12 5l7 7-7 7"/>
+                            </svg>
+                        </a>
+                        <a href="#services" class="btn btn--ghost btn--xl">View All Services</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer__grid">
+                <div class="footer__brand">
+                    <a href="#" class="footer__logo">
+                        <span class="logo-icon">
+                            <svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <defs>
+                                    <linearGradient id="shieldGradFooter" x1="0%" y1="0%" x2="100%" y2="100%">
+                                        <stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
+                                        <stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
+                                    </linearGradient>
+                                    <linearGradient id="shieldInnerFooter" x1="0%" y1="0%" x2="0%" y2="100%">
+                                        <stop offset="0%" style="stop-color:#1a1a24;stop-opacity:1" />
+                                        <stop offset="100%" style="stop-color:#12121a;stop-opacity:1" />
+                                    </linearGradient>
+                                </defs>
+                                <path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGradFooter)"/>
+                                <path d="M20 6L7 11.5v9.5c0 8.5 13 15 13 15s13-6.5 13-15v-9.5L20 6z" fill="url(#shieldInnerFooter)"/>
+                                <circle cx="20" cy="20" r="5" stroke="url(#shieldGradFooter)" stroke-width="1.5" fill="none"/>
+                                <circle cx="20" cy="20" r="2" fill="url(#shieldGradFooter)"/>
+                                <line x1="14" y1="26" x2="26" y2="14" stroke="url(#shieldGradFooter)" stroke-width="1.5" stroke-linecap="round"/>
+                            </svg>
+                        </span>
+                        <span class="logo-text">Privacy<span class="logo-accent">First</span></span>
+                    </a>
+                    <p class="footer__tagline">The Internet, Reimagined for Privacy</p>
+                    <div class="footer__social">
+                        <a href="#" class="social-link" aria-label="Mastodon">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 00.023-.043v-1.809a.052.052 0 00-.02-.041.053.053 0 00-.046-.01 20.282 20.282 0 01-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 01-.319-1.433.053.053 0 01.066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link" aria-label="Matrix">
+                            <svg viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 00-.18-.66 1.106 1.106 0 00-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 00-.48.499 1.946 1.946 0 00-.231.696 5.56 5.56 0 00-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 00-.143-.688 1.052 1.052 0 00-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.57-.18.975v5.03H4.78V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/>
+                            </svg>
+                        </a>
+                        <a href="#" class="social-link" aria-label="GitHub">
+                            <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>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="footer__links">
+                    <div class="footer__column">
+                        <h4>Services</h4>
+                        <ul>
+                            <li><a href="#services">Web Hosting</a></li>
+                            <li><a href="#services">Email Services</a></li>
+                            <li><a href="#services">Cloud Storage</a></li>
+                            <li><a href="#services">VPN Access</a></li>
+                            <li><a href="#services">Domain Registration</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="footer__column">
+                        <h4>Platform</h4>
+                        <ul>
+                            <li><a href="#passport">Passport</a></li>
+                            <li><a href="#platform">SilverSHELL</a></li>
+                            <li><a href="#marketplace">Marketplace</a></li>
+                            <li><a href="#network">PrivateWeb</a></li>
+                            <li><a href="#">Documentation</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="footer__column">
+                        <h4>Company</h4>
+                        <ul>
+                            <li><a href="#">About Us</a></li>
+                            <li><a href="#">Blog</a></li>
+                            <li><a href="#">Careers</a></li>
+                            <li><a href="#">Contact</a></li>
+                            <li><a href="#">Press Kit</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="footer__column">
+                        <h4>Legal</h4>
+                        <ul>
+                            <li><a href="#">Privacy Policy</a></li>
+                            <li><a href="#">Terms of Service</a></li>
+                            <li><a href="#">Cookie Policy</a></li>
+                            <li><a href="#">Transparency Report</a></li>
+                            <li><a href="#">Warrant Canary</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="footer__bottom">
+                <p class="footer__copyright">
+                    &copy; 2025 Privacy First. All rights reserved.
+                </p>
+                <p class="footer__credit">
+                    Built with 🛡️ by <a href="https://silverlabs.uk" target="_blank" rel="noopener">SilverLABS</a>
+                </p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scripts -->
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/wwwroot/js/main.js b/wwwroot/js/main.js
new file mode 100644
index 0000000..c1d6558
--- /dev/null
+++ b/wwwroot/js/main.js
@@ -0,0 +1,616 @@
+/**
+ * Privacy First - Main JavaScript
+ * Handles animations, interactions, and visual effects
+ */
+
+(function() {
+    'use strict';
+
+    // ==========================================================================
+    // Configuration
+    // ==========================================================================
+
+    const CONFIG = {
+        particles: {
+            count: 80,
+            color: '#00d4aa',
+            colorSecondary: '#7c5cff',
+            maxDistance: 120,
+            speed: 0.3,
+            mouseRadius: 150
+        },
+        scroll: {
+            revealOffset: 100,
+            headerOffset: 50
+        }
+    };
+
+    // ==========================================================================
+    // Particle System
+    // ==========================================================================
+
+    class ParticleSystem {
+        constructor(canvasId) {
+            this.canvas = document.getElementById(canvasId);
+            if (!this.canvas) return;
+
+            this.ctx = this.canvas.getContext('2d');
+            this.particles = [];
+            this.mouse = { x: null, y: null };
+            this.animationId = null;
+
+            this.init();
+            this.addEventListeners();
+            this.animate();
+        }
+
+        init() {
+            this.resize();
+            this.createParticles();
+        }
+
+        resize() {
+            this.width = this.canvas.width = this.canvas.offsetWidth;
+            this.height = this.canvas.height = this.canvas.offsetHeight;
+        }
+
+        createParticles() {
+            this.particles = [];
+            const count = Math.min(CONFIG.particles.count, Math.floor((this.width * this.height) / 15000));
+
+            for (let i = 0; i < count; i++) {
+                this.particles.push({
+                    x: Math.random() * this.width,
+                    y: Math.random() * this.height,
+                    vx: (Math.random() - 0.5) * CONFIG.particles.speed,
+                    vy: (Math.random() - 0.5) * CONFIG.particles.speed,
+                    radius: Math.random() * 2 + 1,
+                    color: Math.random() > 0.5 ? CONFIG.particles.color : CONFIG.particles.colorSecondary,
+                    alpha: Math.random() * 0.5 + 0.3
+                });
+            }
+        }
+
+        addEventListeners() {
+            window.addEventListener('resize', () => {
+                this.resize();
+                this.createParticles();
+            });
+
+            this.canvas.addEventListener('mousemove', (e) => {
+                const rect = this.canvas.getBoundingClientRect();
+                this.mouse.x = e.clientX - rect.left;
+                this.mouse.y = e.clientY - rect.top;
+            });
+
+            this.canvas.addEventListener('mouseleave', () => {
+                this.mouse.x = null;
+                this.mouse.y = null;
+            });
+        }
+
+        drawParticle(particle) {
+            this.ctx.beginPath();
+            this.ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+            this.ctx.fillStyle = particle.color;
+            this.ctx.globalAlpha = particle.alpha;
+            this.ctx.fill();
+            this.ctx.globalAlpha = 1;
+        }
+
+        drawConnections() {
+            for (let i = 0; i < this.particles.length; i++) {
+                for (let j = i + 1; j < this.particles.length; j++) {
+                    const dx = this.particles[i].x - this.particles[j].x;
+                    const dy = this.particles[i].y - this.particles[j].y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+
+                    if (distance < CONFIG.particles.maxDistance) {
+                        const alpha = (1 - distance / CONFIG.particles.maxDistance) * 0.3;
+                        this.ctx.beginPath();
+                        this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
+                        this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
+                        this.ctx.strokeStyle = CONFIG.particles.color;
+                        this.ctx.globalAlpha = alpha;
+                        this.ctx.lineWidth = 0.5;
+                        this.ctx.stroke();
+                        this.ctx.globalAlpha = 1;
+                    }
+                }
+            }
+        }
+
+        updateParticle(particle) {
+            // Mouse interaction
+            if (this.mouse.x !== null && this.mouse.y !== null) {
+                const dx = particle.x - this.mouse.x;
+                const dy = particle.y - this.mouse.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+
+                if (distance < CONFIG.particles.mouseRadius) {
+                    const force = (CONFIG.particles.mouseRadius - distance) / CONFIG.particles.mouseRadius;
+                    particle.vx += (dx / distance) * force * 0.02;
+                    particle.vy += (dy / distance) * force * 0.02;
+                }
+            }
+
+            // Apply velocity
+            particle.x += particle.vx;
+            particle.y += particle.vy;
+
+            // Apply friction
+            particle.vx *= 0.99;
+            particle.vy *= 0.99;
+
+            // Boundary check
+            if (particle.x < 0 || particle.x > this.width) {
+                particle.vx *= -1;
+                particle.x = Math.max(0, Math.min(this.width, particle.x));
+            }
+            if (particle.y < 0 || particle.y > this.height) {
+                particle.vy *= -1;
+                particle.y = Math.max(0, Math.min(this.height, particle.y));
+            }
+        }
+
+        animate() {
+            this.ctx.clearRect(0, 0, this.width, this.height);
+
+            // Update and draw particles
+            this.particles.forEach(particle => {
+                this.updateParticle(particle);
+                this.drawParticle(particle);
+            });
+
+            // Draw connections
+            this.drawConnections();
+
+            this.animationId = requestAnimationFrame(() => this.animate());
+        }
+
+        destroy() {
+            if (this.animationId) {
+                cancelAnimationFrame(this.animationId);
+            }
+        }
+    }
+
+    // ==========================================================================
+    // Scroll Reveal
+    // ==========================================================================
+
+    class ScrollReveal {
+        constructor() {
+            this.elements = document.querySelectorAll('.reveal');
+            this.init();
+        }
+
+        init() {
+            // Initial check
+            this.checkElements();
+
+            // Scroll listener with throttle
+            let ticking = false;
+            window.addEventListener('scroll', () => {
+                if (!ticking) {
+                    window.requestAnimationFrame(() => {
+                        this.checkElements();
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            });
+        }
+
+        checkElements() {
+            this.elements.forEach(element => {
+                if (this.isInViewport(element)) {
+                    element.classList.add('active');
+                }
+            });
+        }
+
+        isInViewport(element) {
+            const rect = element.getBoundingClientRect();
+            return (
+                rect.top <= (window.innerHeight || document.documentElement.clientHeight) - CONFIG.scroll.revealOffset
+            );
+        }
+    }
+
+    // ==========================================================================
+    // Header Controller
+    // ==========================================================================
+
+    class HeaderController {
+        constructor() {
+            this.header = document.getElementById('header');
+            this.lastScroll = 0;
+            this.init();
+        }
+
+        init() {
+            window.addEventListener('scroll', () => this.handleScroll());
+            this.handleScroll(); // Initial check
+        }
+
+        handleScroll() {
+            const currentScroll = window.pageYOffset;
+
+            if (currentScroll > CONFIG.scroll.headerOffset) {
+                this.header.classList.add('scrolled');
+            } else {
+                this.header.classList.remove('scrolled');
+            }
+
+            this.lastScroll = currentScroll;
+        }
+    }
+
+    // ==========================================================================
+    // Mobile Navigation
+    // ==========================================================================
+
+    class MobileNav {
+        constructor() {
+            this.toggle = document.getElementById('nav-toggle');
+            this.close = document.getElementById('nav-close');
+            this.menu = document.getElementById('nav-menu');
+            this.links = document.querySelectorAll('.nav__link');
+
+            if (this.toggle && this.menu) {
+                this.init();
+            }
+        }
+
+        init() {
+            this.toggle.addEventListener('click', () => this.openMenu());
+            this.close.addEventListener('click', () => this.closeMenu());
+
+            // Close on link click
+            this.links.forEach(link => {
+                link.addEventListener('click', () => this.closeMenu());
+            });
+
+            // Close on outside click
+            document.addEventListener('click', (e) => {
+                if (!this.menu.contains(e.target) && !this.toggle.contains(e.target)) {
+                    this.closeMenu();
+                }
+            });
+
+            // Close on escape
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    this.closeMenu();
+                }
+            });
+        }
+
+        openMenu() {
+            this.menu.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+
+        closeMenu() {
+            this.menu.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+    }
+
+    // ==========================================================================
+    // Pricing Toggle
+    // ==========================================================================
+
+    class PricingToggle {
+        constructor() {
+            this.toggle = document.getElementById('pricing-toggle');
+            this.labels = document.querySelectorAll('.pricing__toggle-label');
+            this.amounts = document.querySelectorAll('.pricing-card__amount[data-monthly]');
+            this.isAnnual = false;
+
+            if (this.toggle) {
+                this.init();
+            }
+        }
+
+        init() {
+            this.toggle.addEventListener('click', () => this.handleToggle());
+            this.updateLabels();
+        }
+
+        handleToggle() {
+            this.isAnnual = !this.isAnnual;
+            this.toggle.classList.toggle('annual', this.isAnnual);
+            this.updatePrices();
+            this.updateLabels();
+        }
+
+        updatePrices() {
+            this.amounts.forEach(amount => {
+                const monthly = amount.dataset.monthly;
+                const annual = amount.dataset.annual;
+                amount.textContent = this.isAnnual ? annual : monthly;
+            });
+        }
+
+        updateLabels() {
+            this.labels.forEach(label => {
+                const period = label.dataset.period;
+                if (period === 'annual') {
+                    label.classList.toggle('active', this.isAnnual);
+                } else {
+                    label.classList.toggle('active', !this.isAnnual);
+                }
+            });
+        }
+    }
+
+    // ==========================================================================
+    // Smooth Scroll
+    // ==========================================================================
+
+    class SmoothScroll {
+        constructor() {
+            this.links = document.querySelectorAll('a[href^="#"]');
+            this.init();
+        }
+
+        init() {
+            this.links.forEach(link => {
+                link.addEventListener('click', (e) => this.handleClick(e, link));
+            });
+        }
+
+        handleClick(e, link) {
+            const href = link.getAttribute('href');
+            if (href === '#') return;
+
+            const target = document.querySelector(href);
+            if (target) {
+                e.preventDefault();
+                const headerOffset = 80;
+                const elementPosition = target.getBoundingClientRect().top;
+                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        }
+    }
+
+    // ==========================================================================
+    // Typing Effect for Hero
+    // ==========================================================================
+
+    class TypeWriter {
+        constructor(element, words, wait = 2000) {
+            this.element = element;
+            this.words = words;
+            this.txt = '';
+            this.wordIndex = 0;
+            this.wait = parseInt(wait, 10);
+            this.isDeleting = false;
+            this.type();
+        }
+
+        type() {
+            const current = this.wordIndex % this.words.length;
+            const fullTxt = this.words[current];
+
+            if (this.isDeleting) {
+                this.txt = fullTxt.substring(0, this.txt.length - 1);
+            } else {
+                this.txt = fullTxt.substring(0, this.txt.length + 1);
+            }
+
+            this.element.innerHTML = `<span class="txt">${this.txt}</span>`;
+
+            let typeSpeed = 100;
+
+            if (this.isDeleting) {
+                typeSpeed /= 2;
+            }
+
+            if (!this.isDeleting && this.txt === fullTxt) {
+                typeSpeed = this.wait;
+                this.isDeleting = true;
+            } else if (this.isDeleting && this.txt === '') {
+                this.isDeleting = false;
+                this.wordIndex++;
+                typeSpeed = 500;
+            }
+
+            setTimeout(() => this.type(), typeSpeed);
+        }
+    }
+
+    // ==========================================================================
+    // Form Handlers
+    // ==========================================================================
+
+    class FormHandler {
+        constructor() {
+            this.notifyForm = document.querySelector('.notify-form');
+            if (this.notifyForm) {
+                this.init();
+            }
+        }
+
+        init() {
+            this.notifyForm.addEventListener('submit', (e) => this.handleSubmit(e));
+        }
+
+        handleSubmit(e) {
+            e.preventDefault();
+            const input = this.notifyForm.querySelector('input[type="email"]');
+            const button = this.notifyForm.querySelector('button');
+
+            if (input.value && this.validateEmail(input.value)) {
+                button.textContent = 'Subscribed!';
+                button.disabled = true;
+                input.disabled = true;
+
+                setTimeout(() => {
+                    button.textContent = 'Notify Me';
+                    button.disabled = false;
+                    input.disabled = false;
+                    input.value = '';
+                }, 3000);
+            }
+        }
+
+        validateEmail(email) {
+            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return re.test(email);
+        }
+    }
+
+    // ==========================================================================
+    // Mockup Animations
+    // ==========================================================================
+
+    class MockupAnimations {
+        constructor() {
+            this.mockupServices = document.querySelectorAll('.mockup__service');
+            this.passportServices = document.querySelectorAll('.passport-card__service');
+            this.init();
+        }
+
+        init() {
+            // Cycle through mockup services
+            if (this.mockupServices.length > 0) {
+                this.cycleServices(this.mockupServices, 2500);
+            }
+
+            // Cycle through passport services
+            if (this.passportServices.length > 0) {
+                this.cycleServices(this.passportServices, 3000);
+            }
+        }
+
+        cycleServices(services, interval) {
+            let currentIndex = 0;
+
+            setInterval(() => {
+                services.forEach(s => s.classList.remove('active'));
+                currentIndex = (currentIndex + 1) % services.length;
+                services[currentIndex].classList.add('active');
+            }, interval);
+        }
+    }
+
+    // ==========================================================================
+    // Intersection Observer for Stats Animation
+    // ==========================================================================
+
+    class StatsAnimation {
+        constructor() {
+            this.stats = document.querySelectorAll('.stat-card__value, .cp-stat__value');
+            this.animated = new Set();
+            this.init();
+        }
+
+        init() {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting && !this.animated.has(entry.target)) {
+                        this.animateValue(entry.target);
+                        this.animated.add(entry.target);
+                    }
+                });
+            }, { threshold: 0.5 });
+
+            this.stats.forEach(stat => observer.observe(stat));
+        }
+
+        animateValue(element) {
+            const text = element.textContent;
+            const match = text.match(/^([\d,.]+)/);
+
+            if (!match) return;
+
+            const finalValue = parseFloat(match[1].replace(/,/g, ''));
+            const suffix = text.replace(match[1], '');
+            const duration = 1500;
+            const startTime = performance.now();
+
+            const animate = (currentTime) => {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+
+                // Easing function
+                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+                const currentValue = finalValue * easeOutQuart;
+
+                // Format number
+                let displayValue;
+                if (finalValue >= 1000) {
+                    displayValue = Math.floor(currentValue).toLocaleString();
+                } else if (finalValue >= 100) {
+                    displayValue = Math.floor(currentValue);
+                } else if (finalValue % 1 !== 0) {
+                    displayValue = currentValue.toFixed(1);
+                } else {
+                    displayValue = Math.floor(currentValue);
+                }
+
+                element.textContent = displayValue + suffix;
+
+                if (progress < 1) {
+                    requestAnimationFrame(animate);
+                } else {
+                    element.textContent = text; // Restore original
+                }
+            };
+
+            requestAnimationFrame(animate);
+        }
+    }
+
+    // ==========================================================================
+    // Initialize Everything
+    // ==========================================================================
+
+    function init() {
+        // Initialize particle system
+        new ParticleSystem('particle-canvas');
+
+        // Initialize scroll reveal
+        new ScrollReveal();
+
+        // Initialize header controller
+        new HeaderController();
+
+        // Initialize mobile navigation
+        new MobileNav();
+
+        // Initialize pricing toggle
+        new PricingToggle();
+
+        // Initialize smooth scroll
+        new SmoothScroll();
+
+        // Initialize form handlers
+        new FormHandler();
+
+        // Initialize mockup animations
+        new MockupAnimations();
+
+        // Initialize stats animation
+        new StatsAnimation();
+
+        // Log init complete
+        console.log('Privacy First website initialized');
+    }
+
+    // Run on DOM ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+})();