diff --git a/assets/css/custom.css b/assets/css/custom.css
index 50e0502..79fa9c5 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,302 +1,169 @@
+:root {
+    --primary-color: #0d6efd;
+    --primary-gradient: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
+    --bg-dark: #0b0e14;
+    --bg-subtle: #161b22;
+    --border-color: rgba(255, 255, 255, 0.1);
+    --text-main: #f0f6fc;
+    --text-secondary: #8b949e;
+}
+
 body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    overflow-x: hidden;
     min-height: 100vh;
 }
 
-.main-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+/* Sidebar Styling */
+#sidebar-wrapper {
     min-height: 100vh;
+    width: 280px;
+    transition: margin 0.25s ease-out;
+    background-color: var(--bg-subtle) !important;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 2rem 1.5rem;
+    font-size: 1.25rem;
+}
+
+#sidebar-wrapper .list-group {
     width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
+}
+
+#sidebar-wrapper .list-group-item {
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    border: none !important;
+    margin: 0.25rem 1rem;
+    padding: 0.75rem 1rem;
+}
+
+#sidebar-wrapper .list-group-item:hover {
+    color: var(--text-main);
+    background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+#sidebar-wrapper .list-group-item.active {
+    background-color: var(--primary-color) !important;
+    color: white;
+}
+
+/* Page Content Styling */
+#page-content-wrapper {
+    min-width: 0;
+    width: 100%;
+    background-color: var(--bg-dark);
+}
+
+/* Custom Utilities */
+.text-gradient {
+    background: var(--primary-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.tracking-wider {
+    letter-spacing: 0.1em;
+}
+
+.min-vh-75 {
+    min-height: 75vh;
+}
+
+/* App Sections */
+.app-section {
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Cards & Components */
+.card {
+    background-color: var(--bg-subtle);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.card:hover {
+    border-color: var(--primary-color);
+}
+
+.bg-dark-subtle {
+    background-color: var(--bg-subtle) !important;
+}
+
+.border-secondary {
+    border-color: var(--border-color) !important;
+}
+
+/* Range Input Customization */
+.custom-range::-webkit-slider-runnable-track {
+    background: rgba(255, 255, 255, 0.1);
+    height: 8px;
+    border-radius: 4px;
+}
+
+.custom-range::-webkit-slider-thumb {
+    background: var(--primary-color);
+    border: 3px solid #fff;
+    width: 20px;
+    height: 20px;
+    margin-top: -6px;
+    box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
+}
+
+/* Hover Effects */
+.nav-link {
+    cursor: pointer;
+}
+
+/* Stats */
+.stat-card {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 1rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+}
+
+/* Chart Styles */
+.chart-container {
     position: relative;
-    z-index: 1;
-}
-
-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
-.chat-container {
     width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
+    margin-top: 2rem;
 }
 
-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+/* Responsive */
+@media (max-width: 991.98px) {
+    #sidebar-wrapper {
+        margin-left: -280px;
+    }
+    #wrapper.toggled #sidebar-wrapper {
+        margin-left: 0;
+    }
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: transparent;
+    background: var(--bg-dark);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
+    background: var(--bg-subtle);
     border-radius: 10px;
+    border: 2px solid var(--bg-dark);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+    background: var(--text-secondary);
 }
-
-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
-}
-
-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
-}
-
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.chat-input-area form {
-    display: flex;
-    gap: 0.75rem;
-}
-
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
-}
-
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Background Animations */
-.bg-animations {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.blob {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
-}
-
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
-}
-
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
-}
-
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
-}
-
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-}
-
-.admin-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.admin-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
-}
-
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
-}
-
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
-    font-weight: 800;
-}
-
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
-}
-
-.table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 1px;
-}
-
-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
-}
-
-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
-
-.form-group {
-    margin-bottom: 1.25rem;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
-}
-
-.form-control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
-}
-
-.form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
-}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index d349598..dc3d40c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,39 +1,381 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
+    // 1. Mock Data
+    const startups = [
+        {
+            id: 1,
+            name: "FinFlow",
+            tagline: "Next-gen liquidity management for SMEs",
+            irr: 25,
+            pd: 5,
+            fragility: 15,
+            revenueConcentration: 20,
+            sector: "Fintech",
+            description: "FinFlow uses advanced AI to predict cash flow gaps and automate short-term financing for medium-sized enterprises. They have already secured partnerships with 3 major banks and have a growing user base.",
+            growth: "15% MoM",
+            funding: "$4.5M Series A",
+            burnRate: "$150k/mo"
+        },
+        {
+            id: 2,
+            name: "EcoPay",
+            tagline: "Sustainable payments infrastructure",
+            irr: 18,
+            pd: 3,
+            fragility: 10,
+            revenueConcentration: 15,
+            sector: "Payments",
+            description: "EcoPay provides carbon-neutral payment processing. They offset the carbon footprint of every transaction and offer lower fees for green certified businesses.",
+            growth: "8% MoM",
+            funding: "$2.2M Seed",
+            burnRate: "$60k/mo"
+        },
+        {
+            id: 3,
+            name: "CyberShield",
+            tagline: "Zero-trust cybersecurity for remote teams",
+            irr: 30,
+            pd: 12,
+            fragility: 25,
+            revenueConcentration: 40,
+            sector: "Cybersecurity",
+            description: "CyberShield offers a decentralized zero-trust network access (ZTNA) platform. High growth but operating in a highly competitive market with significant R&D spend.",
+            growth: "25% MoM",
+            funding: "$12M Series B",
+            burnRate: "$450k/mo"
+        },
+        {
+            id: 4,
+            name: "DataNexus",
+            tagline: "Federated learning for enterprise data",
+            irr: 22,
+            pd: 7,
+            fragility: 18,
+            revenueConcentration: 25,
+            sector: "Big Data/AI",
+            description: "DataNexus enables companies to train machine learning models on sensitive data without moving it, preserving privacy and compliance.",
+            growth: "12% MoM",
+            funding: "$6M Series A",
+            burnRate: "$200k/mo"
+        },
+        {
+            id: 5,
+            name: "HealthBridge",
+            tagline: "Telemedicine platform for rural healthcare",
+            irr: 20,
+            pd: 4,
+            fragility: 12,
+            revenueConcentration: 10,
+            sector: "Healthtech",
+            description: "HealthBridge connects rural clinics with specialist doctors via a low-bandwidth, high-security video and diagnostics platform.",
+            growth: "10% MoM",
+            funding: "$3.5M Series A",
+            burnRate: "$110k/mo"
+        }
+    ];
 
-    const appendMessage = (text, sender) => {
-        const msgDiv = document.createElement('div');
-        msgDiv.classList.add('message', sender);
-        msgDiv.textContent = text;
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
+    // 2. Navigation Control
+    const sections = ['hero', 'profile', 'results', 'detail'];
+    const sidebar = document.getElementById('wrapper');
+    const sidebarToggle = document.getElementById('sidebarToggle');
+
+    const showSection = (sectionId) => {
+        sections.forEach(s => {
+            const el = document.getElementById(`${s}-section`);
+            if (el) el.classList.add('d-none');
+            const navLink = document.querySelector(`.nav-link[data-section="${s}"]`);
+            if (navLink) navLink.classList.remove('active');
+        });
+
+        const target = document.getElementById(`${sectionId}-section`);
+        if (target) {
+            target.classList.remove('d-none');
+            // Re-trigger fade-in animation
+            target.style.animation = 'none';
+            target.offsetHeight; // trigger reflow
+            target.style.animation = null;
+        }
+        
+        const activeNav = document.querySelector(`.nav-link[data-section="${sectionId}"]`);
+        if (activeNav) activeNav.classList.add('active');
+
+        // Scroll to top
+        window.scrollTo(0, 0);
     };
 
-    chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const message = chatInput.value.trim();
-        if (!message) return;
+    // Sidebar Toggle
+    if (sidebarToggle) {
+        sidebarToggle.addEventListener('click', (e) => {
+            e.preventDefault();
+            sidebar.classList.toggle('toggled');
+        });
+    }
 
-        appendMessage(message, 'visitor');
-        chatInput.value = '';
-
-        try {
-            const response = await fetch('api/chat.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message })
-            });
-            const data = await response.json();
-            
-            // Artificial delay for realism
-            setTimeout(() => {
-                appendMessage(data.reply, 'bot');
-            }, 500);
-        } catch (error) {
-            console.error('Error:', error);
-            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
-        }
+    // Nav Link Clicks
+    document.querySelectorAll('.nav-link, .navigate-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            const target = btn.dataset.section || btn.dataset.target;
+            showSection(target);
+        });
     });
+
+    // 3. Profile Setup
+    const minIrrInput = document.getElementById('min-irr');
+    const maxPdInput = document.getElementById('max-pd');
+    const irrValBadge = document.getElementById('irr-val');
+    const pdValBadge = document.getElementById('pd-val');
+
+    minIrrInput.addEventListener('input', () => {
+        irrValBadge.textContent = `${minIrrInput.value}%`;
+    });
+    maxPdInput.addEventListener('input', () => {
+        pdValBadge.textContent = `${maxPdInput.value}%`;
+    });
+
+    // 4. Matching Logic
+    const matchBtn = document.getElementById('match-startups-btn');
+    const matchesContainer = document.getElementById('matches-container');
+
+    matchBtn.addEventListener('click', () => {
+        const minIrr = parseFloat(minIrrInput.value);
+        const maxPd = parseFloat(maxPdInput.value);
+        
+        // Filter & Calculate RAR
+        let matches = startups.map(s => {
+            return {
+                ...s,
+                rar: (s.irr * (1 - s.pd/100)).toFixed(2)
+            };
+        });
+
+        // Filter based on user constraints
+        matches = matches.filter(s => s.irr >= minIrr && s.pd <= maxPd);
+
+        // Sort by RAR descending
+        matches.sort((a, b) => b.rar - a.rar);
+
+        // Take top 3
+        const topMatches = matches.slice(0, 3);
+
+        renderMatches(topMatches);
+        showSection('results');
+    });
+
+    const renderMatches = (matches) => {
+        matchesContainer.innerHTML = '';
+        if (matches.length === 0) {
+            matchesContainer.innerHTML = `
+                <div class="col-12 text-center py-5">
+                    <div class="h3 text-secondary">No startups match your current criteria.</div>
+                    <p>Try lowering your IRR requirement or increasing your PD allowance.</p>
+                </div>
+            `;
+            return;
+        }
+
+        matches.forEach((s, index) => {
+            const card = document.createElement('div');
+            card.className = 'col-md-4';
+            card.innerHTML = `
+                <div class="card h-100 rounded-4 overflow-hidden border-secondary">
+                    <div class="card-header bg-primary-subtle border-0 py-3 text-center">
+                        <span class="badge bg-primary rounded-pill px-3 py-2">Match #${index + 1}</span>
+                    </div>
+                    <div class="card-body p-4 text-center">
+                        <h3 class="fw-bold mb-1">${s.name}</h3>
+                        <span class="text-secondary small d-block mb-3">${s.sector}</span>
+                        <div class="rar-box p-3 bg-dark rounded-4 mb-4 border border-secondary">
+                            <span class="text-secondary small d-block">RAR Score</span>
+                            <span class="display-6 fw-bold text-primary">${s.rar}%</span>
+                        </div>
+                        <div class="row g-2 mb-4">
+                            <div class="col-6">
+                                <div class="p-2 border border-secondary rounded-3 text-center">
+                                    <span class="text-secondary small d-block">Expected IRR</span>
+                                    <span class="fw-bold">${s.irr}%</span>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="p-2 border border-secondary rounded-3 text-center">
+                                    <span class="text-secondary small d-block">12M PD</span>
+                                    <span class="fw-bold">${s.pd}%</span>
+                                </div>
+                            </div>
+                        </div>
+                        <button class="btn btn-outline-light w-100 rounded-pill py-2 view-details-btn" data-id="${s.id}">
+                            View Details <i class="fas fa-chevron-right ms-2"></i>
+                        </button>
+                    </div>
+                </div>
+            `;
+            matchesContainer.appendChild(card);
+        });
+
+        // Attach listeners to "View Details" buttons
+        document.querySelectorAll('.view-details-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const startupId = parseInt(btn.dataset.id);
+                showStartupDetail(startupId);
+            });
+        });
+    };
+
+    // 5. Detail View
+    const detailContent = document.getElementById('startup-detail-content');
+
+    const showStartupDetail = (id) => {
+        const s = startups.find(item => item.id === id);
+        const rar = (s.irr * (1 - s.pd/100)).toFixed(2);
+        
+        detailContent.innerHTML = `
+            <div class="row g-4">
+                <div class="col-lg-8">
+                    <div class="card bg-dark-subtle border-secondary rounded-4 p-4 p-md-5 mb-4">
+                        <div class="d-flex flex-wrap align-items-center justify-content-between mb-4 gap-3">
+                            <div>
+                                <h1 class="display-4 fw-bold mb-1">${s.name}</h1>
+                                <p class="lead text-secondary mb-0">${s.tagline}</p>
+                            </div>
+                            <div class="text-end">
+                                <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill h5 mb-0">${s.sector}</span>
+                            </div>
+                        </div>
+                        
+                        <div class="mb-5">
+                            <h4 class="fw-bold mb-3 border-start border-primary border-4 ps-3">Executive Summary</h4>
+                            <p class="text-secondary" style="line-height: 1.8;">${s.description}</p>
+                        </div>
+
+                        <div class="row g-3 mb-5">
+                            <div class="col-sm-6 col-xl-3">
+                                <div class="p-3 bg-dark rounded-4 border border-secondary text-center h-100">
+                                    <span class="text-secondary small d-block mb-1">Growth</span>
+                                    <span class="h5 fw-bold mb-0 text-success">${s.growth}</span>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 col-xl-3">
+                                <div class="p-3 bg-dark rounded-4 border border-secondary text-center h-100">
+                                    <span class="text-secondary small d-block mb-1">Funding</span>
+                                    <span class="h5 fw-bold mb-0">${s.funding}</span>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 col-xl-3">
+                                <div class="p-3 bg-dark rounded-4 border border-secondary text-center h-100">
+                                    <span class="text-secondary small d-block mb-1">Burn Rate</span>
+                                    <span class="h5 fw-bold mb-0 text-danger">${s.burnRate}</span>
+                                </div>
+                            </div>
+                            <div class="col-sm-6 col-xl-3">
+                                <div class="p-3 bg-dark rounded-4 border border-secondary text-center h-100">
+                                    <span class="text-secondary small d-block mb-1">RAR Score</span>
+                                    <span class="h5 fw-bold mb-0 text-primary">${rar}%</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <h4 class="fw-bold mb-4">Stress-Test Performance</h4>
+                            <div class="chart-container" style="height: 300px;">
+                                <canvas id="stressTestChart"></canvas>
+                            </div>
+                            <p class="small text-secondary mt-3"><i class="fas fa-info-circle me-1"></i> Simulated performance under varying market conditions (Fragility Score: ${s.fragility}).</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-4">
+                    <div class="card bg-dark-subtle border-secondary rounded-4 p-4 mb-4">
+                        <h4 class="fw-bold mb-4">Risk Metrics</h4>
+                        <div class="mb-4">
+                            <div class="d-flex justify-content-between mb-2">
+                                <span class="text-secondary">Fragility Score</span>
+                                <span class="fw-bold text-danger">${s.fragility}</span>
+                            </div>
+                            <div class="progress bg-dark" style="height: 8px;">
+                                <div class="progress-bar bg-danger" role="progressbar" style="width: ${s.fragility}%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-4">
+                            <div class="d-flex justify-content-between mb-2">
+                                <span class="text-secondary">Revenue Concentration</span>
+                                <span class="fw-bold text-warning">${s.revenueConcentration}%</span>
+                            </div>
+                            <div class="progress bg-dark" style="height: 8px;">
+                                <div class="progress-bar bg-warning" role="progressbar" style="width: ${s.revenueConcentration}%"></div>
+                            </div>
+                        </div>
+                        <div class="mb-0">
+                            <div class="d-flex justify-content-between mb-2">
+                                <span class="text-secondary">Expected 12M PD</span>
+                                <span class="fw-bold text-info">${s.pd}%</span>
+                            </div>
+                            <div class="progress bg-dark" style="height: 8px;">
+                                <div class="progress-bar bg-info" role="progressbar" style="width: ${s.pd}%"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="card bg-primary rounded-4 p-4 border-0">
+                        <h4 class="fw-bold text-white mb-3">Interested in ${s.name}?</h4>
+                        <p class="text-white-50 mb-4">Get direct access to their data room and contact the founding team.</p>
+                        <button class="btn btn-light w-100 rounded-pill fw-bold py-2 bg-white text-primary">Request Access</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        showSection('detail');
+        renderStressChart(s);
+    };
+
+    const renderStressChart = (startup) => {
+        const ctx = document.getElementById('stressTestChart').getContext('2d');
+        
+        // Generate mock stress data based on startup metrics
+        const baseReturn = startup.irr;
+        const labels = ['Stable', 'Moderate Volatility', 'High Volatility', 'Economic Downturn', 'Black Swan'];
+        const data = [
+            baseReturn,
+            baseReturn * (1 - startup.fragility/200),
+            baseReturn * (1 - startup.fragility/100),
+            baseReturn * (1 - startup.fragility/50),
+            baseReturn * (1 - startup.fragility/25)
+        ];
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Projected IRR (%)',
+                    data: data,
+                    borderColor: '#0d6efd',
+                    backgroundColor: 'rgba(13, 110, 253, 0.1)',
+                    fill: true,
+                    tension: 0.4,
+                    pointRadius: 6,
+                    pointBackgroundColor: '#0d6efd',
+                    borderWidth: 3
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: false,
+                        grid: { color: 'rgba(255, 255, 255, 0.05)' },
+                        ticks: { color: '#8b949e' }
+                    },
+                    x: {
+                        grid: { display: false },
+                        ticks: { color: '#8b949e' }
+                    }
+                },
+                plugins: {
+                    legend: { display: false }
+                }
+            }
+        });
+    };
 });
diff --git a/index.php b/index.php
index 7205f3d..9fc57b8 100644
--- a/index.php
+++ b/index.php
@@ -4,147 +4,226 @@ declare(strict_types=1);
 @error_reporting(E_ALL);
 @date_default_timezone_set('UTC');
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'VentureNerve - Match investors with startups based on risk-adjusted return.';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
+  <title>VentureNerve | Risk-Adjusted Venture Capital</title>
+  
+  <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
   <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
   <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
+  <?php if ($projectImageUrl): ?>
+    <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+    <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
+  <?php endif; ?>
+
+  <!-- Bootstrap 5 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
 </head>
 <body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+
+<div class="d-flex" id="wrapper">
+    <!-- Sidebar -->
+    <div class="border-end border-secondary bg-dark-subtle" id="sidebar-wrapper">
+        <div class="sidebar-heading border-bottom border-secondary py-4 px-3">
+            <h4 class="m-0 fw-bold text-primary"><i class="fas fa-bolt me-2"></i>VentureNerve</h4>
+        </div>
+        <div class="list-group list-group-flush mt-3 px-2">
+            <a href="#hero" class="list-group-item list-group-item-action bg-transparent border-0 rounded-3 mb-1 active nav-link" data-section="hero">
+                <i class="fas fa-home me-3"></i>Overview
+            </a>
+            <a href="#profile" class="list-group-item list-group-item-action bg-transparent border-0 rounded-3 mb-1 nav-link" data-section="profile">
+                <i class="fas fa-user-tie me-3"></i>Investor Profile
+            </a>
+            <a href="#results" class="list-group-item list-group-item-action bg-transparent border-0 rounded-3 mb-1 nav-link" data-section="results">
+                <i class="fas fa-chart-line me-3"></i>Matching Results
+            </a>
+        </div>
+        <div class="mt-auto p-3 text-secondary small">
+            &copy; 2026 VentureNerve AI
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <!-- Page Content -->
+    <div id="page-content-wrapper">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-transparent py-3 px-4">
+            <div class="container-fluid">
+                <button class="btn btn-outline-secondary d-lg-none me-3" id="sidebarToggle">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <div class="ms-auto d-flex align-items-center">
+                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill">
+                        Alpha Access
+                    </span>
+                </div>
+            </div>
+        </nav>
+
+        <div class="container-fluid px-4 py-3">
+            
+            <!-- Hero Section -->
+            <section id="hero-section" class="app-section">
+                <div class="row min-vh-75 align-items-center">
+                    <div class="col-lg-7">
+                        <span class="text-primary fw-bold text-uppercase tracking-wider mb-2 d-block">The Future of VC</span>
+                        <h1 class="display-3 fw-bold mb-4">Match with Startups based on <span class="text-gradient">Risk-Adjusted Return.</span></h1>
+                        <p class="lead text-secondary mb-5">VentureNerve uses proprietary Risk-Adjusted Return (RAR) modeling to connect investors with the top 1% of startups that fit their specific risk appetite.</p>
+                        <div class="d-flex gap-3">
+                            <button class="btn btn-primary btn-lg px-4 py-3 rounded-4 fw-bold navigate-btn" data-target="profile">Get Started</button>
+                            <button class="btn btn-outline-light btn-lg px-4 py-3 rounded-4 fw-bold">View Methodology</button>
+                        </div>
+                    </div>
+                    <div class="col-lg-5 d-none d-lg-block">
+                        <div class="hero-visual p-4 rounded-5 bg-dark-subtle border border-secondary">
+                            <div class="d-flex justify-content-between mb-4">
+                                <div class="stat-card">
+                                    <span class="text-secondary small d-block">Avg. IRR</span>
+                                    <span class="h4 fw-bold mb-0">24.5%</span>
+                                </div>
+                                <div class="stat-card text-end">
+                                    <span class="text-secondary small d-block">Median PD</span>
+                                    <span class="h4 fw-bold mb-0">5.2%</span>
+                                </div>
+                            </div>
+                            <div class="chart-placeholder rounded-4 mb-3" style="height: 200px; background: linear-gradient(180deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0) 100%); position: relative; overflow: hidden;">
+                                <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none">
+                                    <path d="M0,150 Q50,130 100,160 T200,80 T300,100 T400,40 L400,200 L0,200 Z" fill="rgba(13, 110, 253, 0.2)" />
+                                    <path d="M0,150 Q50,130 100,160 T200,80 T300,100 T400,40" fill="none" stroke="#0d6efd" stroke-width="3" />
+                                </svg>
+                            </div>
+                            <div class="text-center">
+                                <span class="text-secondary small">Live Risk Feed - Real-time Aggregation</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Investor Profile Section -->
+            <section id="profile-section" class="app-section d-none">
+                <div class="row justify-content-center">
+                    <div class="col-xl-8">
+                        <div class="section-header mb-5">
+                            <h2 class="fw-bold h1 mb-2">Configure Your <span class="text-primary">Investor Profile</span></h2>
+                            <p class="text-secondary">Set your return expectations and risk tolerance to see tailored startup opportunities.</p>
+                        </div>
+                        
+                        <div class="card bg-dark-subtle border-secondary rounded-4 p-4 p-md-5">
+                            <div class="mb-5">
+                                <div class="d-flex justify-content-between align-items-center mb-3">
+                                    <label class="form-label h5 mb-0 fw-bold">Minimum Expected IRR (%)</label>
+                                    <span class="badge bg-primary px-3 py-2 rounded-pill h5 mb-0" id="irr-val">15%</span>
+                                </div>
+                                <input type="range" class="form-range custom-range" id="min-irr" min="5" max="50" value="15">
+                                <div class="d-flex justify-content-between text-secondary small">
+                                    <span>Conservative (5%)</span>
+                                    <span>Aggressive (50%)</span>
+                                </div>
+                            </div>
+
+                            <div class="mb-5">
+                                <div class="d-flex justify-content-between align-items-center mb-3">
+                                    <label class="form-label h5 mb-0 fw-bold">Maximum 12M Prob. of Distress (PD)</label>
+                                    <span class="badge bg-danger px-3 py-2 rounded-pill h5 mb-0" id="pd-val">10%</span>
+                                </div>
+                                <input type="range" class="form-range custom-range" id="max-pd" min="1" max="30" value="10">
+                                <div class="d-flex justify-content-between text-secondary small">
+                                    <span>Low Risk (1%)</span>
+                                    <span>High Risk (30%)</span>
+                                </div>
+                            </div>
+
+                            <div class="mb-4">
+                                <label class="form-label h5 mb-3 fw-bold">Risk Tolerance Profile</label>
+                                <div class="row g-3">
+                                    <div class="col-md-4">
+                                        <input type="radio" class="btn-check" name="risk-profile" id="risk-low" value="low">
+                                        <label class="btn btn-outline-secondary w-100 p-3 rounded-4" for="risk-low">
+                                            <i class="fas fa-shield-alt d-block mb-2 h4"></i>
+                                            <span class="fw-bold">Conservative</span>
+                                        </label>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <input type="radio" class="btn-check" name="risk-profile" id="risk-med" value="med" checked>
+                                        <label class="btn btn-outline-secondary w-100 p-3 rounded-4" for="risk-med">
+                                            <i class="fas fa-balance-scale d-block mb-2 h4"></i>
+                                            <span class="fw-bold">Moderate</span>
+                                        </label>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <input type="radio" class="btn-check" name="risk-profile" id="risk-high" value="high">
+                                        <label class="btn btn-outline-secondary w-100 p-3 rounded-4" for="risk-high">
+                                            <i class="fas fa-fire d-block mb-2 h4"></i>
+                                            <span class="fw-bold">Aggressive</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="text-center mt-5">
+                                <button class="btn btn-primary btn-lg px-5 py-3 rounded-4 fw-bold" id="match-startups-btn">
+                                    Calculate Matches <i class="fas fa-arrow-right ms-2"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Results Section -->
+            <section id="results-section" class="app-section d-none">
+                <div class="section-header mb-5 text-center">
+                    <h2 class="fw-bold h1 mb-2">Top <span class="text-primary">RAR Matches</span></h2>
+                    <p class="text-secondary">The highest ranked startups based on your Risk-Adjusted Return requirements.</p>
+                </div>
+
+                <div class="row g-4" id="matches-container">
+                    <!-- Matches will be injected here -->
+                </div>
+
+                <div class="text-center mt-5">
+                    <button class="btn btn-outline-secondary rounded-4 px-4 navigate-btn" data-target="profile">
+                        <i class="fas fa-edit me-2"></i>Adjust Profile
+                    </button>
+                </div>
+            </section>
+
+            <!-- Startup Detail Section -->
+            <section id="detail-section" class="app-section d-none">
+                <div class="row mb-4 align-items-center">
+                    <div class="col-auto">
+                        <button class="btn btn-link text-secondary p-0 navigate-btn" data-target="results">
+                            <i class="fas fa-arrow-left me-2"></i>Back to Results
+                        </button>
+                    </div>
+                </div>
+                
+                <div id="startup-detail-content">
+                    <!-- Detail content will be injected here -->
+                </div>
+            </section>
+
+        </div>
+    </div>
+</div>
+
+<!-- Bootstrap & JS Libraries -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="assets/js/main.js?v=<?= time() ?>"></script>
+
 </body>
-</html>
+</html>
\ No newline at end of file