diff --git a/chatgpt-agent.html b/chatgpt-agent.html
index 5c9d6f1..caec4cd 100644
--- a/chatgpt-agent.html
+++ b/chatgpt-agent.html
@@ -78,6 +78,42 @@
             body { padding: 24px 16px; }
             .header h1 { font-size: 1.6rem; }
         }
+
+        /* ── Architecture Tool ───────────────────────────── */
+        .arch-tool { background: #010f20; border: 1px solid #001a2e; border-radius: 18px; padding: 32px; margin: 24px 0; position: relative; overflow: hidden; }
+        .arch-progress { display: flex; gap: 8px; margin-bottom: 28px; justify-content: center; }
+        .arch-step { width: 36px; height: 36px; border-radius: 50%; background: #001a2e; color: #555; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; transition: all .3s; position: relative; }
+        .arch-step.active { background: #00f5ff; color: #000; box-shadow: 0 0 20px rgba(0,245,255,0.3); }
+        .arch-step:not(:last-child)::after { content: ''; position: absolute; left: 36px; top: 50%; width: 40px; height: 2px; background: #001a2e; }
+        .arch-step.active:not(:last-child)::after { background: #00f5ff; }
+        .arch-question h3 { color: #f0f0ff; margin: 0 0 6px; font-size: 1.15rem; }
+        .arch-hint { color: #888; font-size: 0.9rem; margin-bottom: 20px; }
+        .arch-options { display: flex; gap: 16px; }
+        .arch-options.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+        .arch-opt { background: #000810; border: 1px solid #001a2e; border-radius: 14px; padding: 20px; cursor: pointer; text-align: left; transition: all .25s; flex: 1; color: inherit; font-family: inherit; display: flex; flex-direction: column; gap: 8px; }
+        .arch-opt:hover { border-color: rgba(0,245,255,0.3); background: #001220; transform: translateY(-2px); }
+        .arch-opt.selected { border-color: #00f5ff; background: #001a30; box-shadow: 0 0 24px rgba(0,245,255,0.12); }
+        .arch-icon { font-size: 1.6rem; }
+        .arch-label { font-weight: 700; color: #f0f0ff; font-size: 1rem; }
+        .arch-desc { font-size: 0.82rem; color: #999; line-height: 1.5; }
+        .arch-desc strong { color: #c8c8d8; }
+        .arch-result-bg { display: none; }
+        .arch-result-bg.show { display: block; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,245,255,0.06) 0%, transparent 70%); pointer-events: none; }
+        .arch-result-inner { text-align: center; padding: 24px 0 8px; position: relative; z-index: 1; }
+        .arch-result-icon { font-size: 3rem; margin-bottom: 12px; }
+        .arch-result-inner h3 { color: #f0f0ff; font-size: 1.3rem; margin: 0 0 8px; }
+        .arch-result-text { color: #c8c8d8; max-width: 520px; margin: 0 auto 20px; font-size: 0.95rem; }
+        .arch-result-details { max-width: 520px; margin: 0 auto 20px; text-align: left; }
+        .arch-rec-line { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #001a2e; font-size: 0.88rem; color: #c8c8d8; }
+        .arch-rec-line:last-child { border-bottom: none; }
+        .arch-rec-label { font-weight: 600; color: #00f5ff; min-width: 100px; flex-shrink: 0; }
+        .arch-result-actions { margin-top: 16px; }
+        @media (max-width: 700px) {
+            .arch-options { flex-direction: column; }
+            .arch-options.three-col { grid-template-columns: 1fr; }
+            .arch-tool { padding: 20px; }
+        }
+        /* ── End Architecture Tool ────────────────────────── */
     </style>
 </head>
 <body>
@@ -214,6 +250,221 @@
             <li>Coupon codes reduce the first month to as low as $0.00 for evaluation</li>
         </ul>
 
+        <h2>Find Your Architecture — Interactive Tool</h2>
+        <p>Not sure whether to rent everything, go full DIY, or split the two? Answer three questions and get your personalized recommendation.</p>
+
+        <div id="arch-tool" class="arch-tool">
+            <div class="arch-progress">
+                <div class="arch-step active" data-step="1">1</div>
+                <div class="arch-step" data-step="2">2</div>
+                <div class="arch-step" data-step="3">3</div>
+            </div>
+
+            <!-- Step 1: Runtime -->
+            <div class="arch-question" data-step="1">
+                <h3>1. What are your runtime requirements?</h3>
+                <p class="arch-hint">How will your agent be used — always-on or on-demand?</p>
+                <div class="arch-options">
+                    <button class="arch-opt" data-value="247" onclick="archPick(1, '247')">
+                        <span class="arch-icon">⏰</span>
+                        <span class="arch-label">24/7 Always-On</span>
+                        <span class="arch-desc">I need <strong>cron jobs</strong>, automated workflows, and my agent available around the clock. It should respond instantly whenever called.</span>
+                    </button>
+                    <button class="arch-opt" data-value="ondemand" onclick="archPick(1, 'ondemand')">
+                        <span class="arch-icon">⚡</span>
+                        <span class="arch-label">On-Demand</span>
+                        <span class="arch-desc">I'll use my agent <strong>intermittently</strong> — during work hours, for specific projects, or when I manually start it. No background tasks needed.</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 2: Privacy -->
+            <div class="arch-question" data-step="2" style="display:none">
+                <h3>2. Where can your LLM inference run?</h3>
+                <p class="arch-hint">Do you need to keep the model in-house, or can you use external APIs?</p>
+                <div class="arch-options">
+                    <button class="arch-opt" data-value="own" onclick="archPick(2, 'own')">
+                        <span class="arch-icon">🏢</span>
+                        <span class="arch-label">Company-Controlled</span>
+                        <span class="arch-desc">I need <strong>everything in-house</strong> — the agent and the LLM. Company data never leaves my infrastructure. I'm prepared to invest in a GPU server.</span>
+                    </button>
+                    <button class="arch-opt" data-value="api" onclick="archPick(2, 'api')">
+                        <span class="arch-icon">☁️</span>
+                        <span class="arch-label">API-Flexible</span>
+                        <span class="arch-desc">I'm fine using <strong>API-based LLMs</strong> (OpenRouter, OpenAI, Anthropic). Data is handled via API calls — no GPU hardware needed on my end.</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 3: Skill Level -->
+            <div class="arch-question" data-step="3" style="display:none">
+                <h3>3. What is your technical skill level?</h3>
+                <p class="arch-hint">How comfortable are you managing infrastructure yourself?</p>
+                <div class="arch-options three-col">
+                    <button class="arch-opt" data-value="expert" onclick="archPick(3, 'expert')">
+                        <span class="arch-icon">🧑‍💻</span>
+                        <span class="arch-label">Expert</span>
+                        <span class="arch-desc">I run Linux servers, configure networks, manage Docker, and troubleshoot production systems. <strong>Infrastructure is not a barrier.</strong></span>
+                    </button>
+                    <button class="arch-opt" data-value="intermediate" onclick="archPick(3, 'intermediate')">
+                        <span class="arch-icon">🛠️</span>
+                        <span class="arch-label">Intermediate</span>
+                        <span class="arch-desc">I've used Linux before. I <strong>can follow a guide</strong> to set up a server, but I'd rather not maintain infrastructure daily.</span>
+                    </button>
+                    <button class="arch-opt" data-value="beginner" onclick="archPick(3, 'beginner')">
+                        <span class="arch-icon">🚀</span>
+                        <span class="arch-label">Beginner</span>
+                        <span class="arch-desc">I want my agent to <strong>just work</strong>. I don't want to manage servers, SSH, or infrastructure. I prefer a dashboard and one-click setup.</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Result -->
+            <div id="arch-result" style="display:none">
+                <div id="arch-result-bg" class="arch-result-bg"></div>
+                <div class="arch-result-inner">
+                    <div id="arch-result-icon" class="arch-result-icon">✅</div>
+                    <h3 id="arch-result-title">Your Recommendation</h3>
+                    <p id="arch-result-text" class="arch-result-text"></p>
+                    <div id="arch-result-details" class="arch-result-details"></div>
+                    <div class="arch-result-actions">
+                        <button class="btn" onclick="archReset()">↻ Start Over</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+        (function() {
+            // Avoid polluting global namespace beyond what onclick needs
+            window._arch = { s1: null, s2: null, s3: null };
+        })();
+
+        function archPick(step, value) {
+            window._arch['s' + step] = value;
+
+            // Visual feedback — highlight selected
+            document.querySelectorAll('.arch-question[data-step="' + step + '"] .arch-opt').forEach(function(el) {
+                el.classList.toggle('selected', el.getAttribute('data-value') === value);
+            });
+
+            if (step < 3) {
+                // Advance to next step after brief delay for effect
+                setTimeout(function() {
+                    document.querySelector('.arch-question[data-step="' + step + '"]').style.display = 'none';
+                    document.querySelector('.arch-question[data-step="' + (step + 1) + '"]').style.display = 'block';
+                    // Update progress
+                    document.querySelectorAll('.arch-step').forEach(function(el) {
+                        el.classList.toggle('active', parseInt(el.getAttribute('data-step')) <= step + 1);
+                    });
+                    // Scroll to keep tool visible
+                    document.getElementById('arch-tool').scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }, 300);
+            } else {
+                // All answers collected — compute result
+                setTimeout(function() { archCompute(); }, 300);
+            }
+        }
+
+        function archCompute() {
+            var s1 = window._arch.s1;
+            var s2 = window._arch.s2;
+            var s3 = window._arch.s3;
+            var result = {};
+
+            // Hide questions, show result
+            document.querySelectorAll('.arch-question').forEach(function(q) { q.style.display = 'none'; });
+            document.querySelector('.arch-progress').style.display = 'none';
+
+            if (s2 === 'own' && s3 === 'expert') {
+                result = {
+                    icon: '🖥️',
+                    title: 'Full DIY — Agent + GPU on Your Own',
+                    text: 'You have the skills and the need for full control. Run everything on your own hardware.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS or server — install Hermes/OpenClaw manually</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>Own GPU server running Llama, Mistral, or DeepSeek (24 GB+ VRAM)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$80–$1,000+ (GPU server) + VPS</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Complete control, no third-party dependency</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>Highest upfront cost, ongoing maintenance</span></div>'
+                };
+            } else if (s2 === 'own' && s3 === 'intermediate') {
+                result = {
+                    icon: '🔀',
+                    title: 'Split — Managed Agent + Your Own GPU',
+                    text: 'Let a provider handle the agent infrastructure while you keep inference in-house for privacy.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed hosting ($4.99–$14.99/mo) — full Linux, SSH, backups, dashboard</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>Your own GPU server — run open-weight models locally</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15 (agent) + GPU server</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>No agent infra to manage, full inference privacy</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>Still need GPU hardware and know-how</span></div>'
+                };
+            } else if (s2 === 'own' && s3 === 'beginner') {
+                result = {
+                    icon: '📞',
+                    title: 'A Note on Your Requirements',
+                    text: 'Running your own GPU requires substantial technical knowledge. Consider starting with managed hosting and API-based inference, then migrating to self-hosted inference as your skills grow.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Recommendation:</span><span>Start with <strong>Managed Agent + API inference</strong> below</span></div><div class="arch-rec-line"><span class="arch-rec-label">Long-term goal:</span><span>Once comfortable, add your own GPU server and switch inference to self-hosted</span></div>'
+                };
+            } else if (s1 === '247' && s2 === 'api' && s3 === 'beginner') {
+                result = {
+                    icon: '✅',
+                    title: 'Rent It All — Managed Hosting + API Inference',
+                    text: 'Perfect match. derez.ai handles your agent 24/7 with cron jobs, backups, and SSH — while you use API-based LLMs. No infrastructure to manage.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed — runs 24/7 with cron, backups, full Linux access</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>OpenRouter, OpenAI, or Anthropic API — pay per token</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15/mo (agent) + ~$2–$20/mo (inference tokens)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Effort:</span><span>Zero server management. Configure from a dashboard.</span></div>'
+                };
+            } else if (s1 === '247' && s2 === 'api' && s3 === 'intermediate') {
+                result = {
+                    icon: '✅',
+                    title: 'Rent It All — or Split for Flexibility',
+                    text: 'You can handle some infra, but why bother? Managed agent hosting + API inference saves you hours each week.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Best option:</span><span>derez.ai managed agent + API inference — $5–$15/mo, no maintenance</span></div><div class="arch-rec-line"><span class="arch-rec-label">Alternative:</span><span>DIY on your own VPS ($5–$10/mo) + API inference if you enjoy tinkering</span></div><div class="arch-rec-line"><span class="arch-rec-label">The difference:</span><span>Managed saves ~3–5 hours/month on updates, backups, and troubleshooting</span></div>'
+                };
+            } else if (s1 === '247' && s2 === 'api' && s3 === 'expert') {
+                result = {
+                    icon: '🔀',
+                    title: 'Split — DIY Agent + API Inference',
+                    text: 'You have the skills. Run the agent on your own $5–10/mo VPS and use API-based LLMs. Maximum flexibility, minimum spend.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS — install Hermes Agent manually (DigitalOcean, Hetzner, etc.)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>OpenRouter or direct API — pay per token, no GPU needed</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$10/mo (VPS) + ~$2–$20/mo (inference tokens)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Full control, lowest cost, no vendor lock-in</span></div><div class="arch-rec-line"><span class="arch-rec-label">Cons:</span><span>You handle updates, backups, and security yourself</span></div>'
+                };
+            } else if (s1 === 'ondemand' && s2 === 'api' && s3 === 'beginner') {
+                result = {
+                    icon: '✅',
+                    title: 'Rent It All — Low Commitment, High Value',
+                    text: 'On-demand use + API inference + managed hosting means you pay only when you use it. No idle costs.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>derez.ai managed — start/stop as needed, pay monthly</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>API-based — pay only for tokens you use</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$15/mo (agent) + pennies for inference</span></div><div class="arch-rec-line"><span class="arch-rec-label">Perfect for:</span><span>Learning, experimenting, prototyping before committing to 24/7</span></div>'
+                };
+            } else if (s1 === 'ondemand' && s2 === 'api' && (s3 === 'intermediate' || s3 === 'expert')) {
+                result = {
+                    icon: '🔀',
+                    title: 'Split — DIY VPS + API Inference',
+                    text: 'On-demand use on your own VPS is the cheapest path. Spin up your agent when you need it, tear down when done.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Agent:</span><span>Your own VPS — spin up on demand (hourly billing possible)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Inference:</span><span>API-based — pay per token</span></div><div class="arch-rec-line"><span class="arch-rec-label">Monthly cost:</span><span>$5–$10/mo (VPS, potentially lower with hourly billing)</span></div><div class="arch-rec-line"><span class="arch-rec-label">Pros:</span><span>Absolute lowest cost, full control</span></div>'
+                };
+            } else {
+                // Catch-all
+                result = {
+                    icon: '🔀',
+                    title: 'A Balanced Approach',
+                    text: 'Based on your answers, a split architecture makes the most sense. Let us handle what you don\'t want to, and you keep control of what matters.',
+                    details: '<div class="arch-rec-line"><span class="arch-rec-label">Recommendation:</span><span>Explore derez.ai managed hosting + your preferred inference method</span></div><div class="arch-rec-line"><span class="arch-rec-label">Talk to us:</span><span>support@derez.ai — we help with architecture decisions</span></div>'
+                };
+            }
+
+            // Show result
+            document.getElementById('arch-result-bg').className = 'arch-result-bg show';
+            document.getElementById('arch-result-icon').textContent = result.icon;
+            document.getElementById('arch-result-title').textContent = result.title;
+            document.getElementById('arch-result-text').textContent = result.text;
+            document.getElementById('arch-result-details').innerHTML = result.details;
+            document.getElementById('arch-result').style.display = 'block';
+            document.getElementById('arch-result').scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+
+        function archReset() {
+            window._arch = { s1: null, s2: null, s3: null };
+            document.getElementById('arch-result').style.display = 'none';
+            document.querySelector('.arch-progress').style.display = 'flex';
+            document.querySelectorAll('.arch-question').forEach(function(q) { q.style.display = 'none'; });
+            document.querySelector('.arch-question[data-step="1"]').style.display = 'block';
+            document.querySelectorAll('.arch-step').forEach(function(el) {
+                el.classList.toggle('active', el.getAttribute('data-step') === '1');
+            });
+            document.querySelectorAll('.arch-opt').forEach(function(el) { el.classList.remove('selected'); });
+        }
+        </script>
+
         <h2>Further Reading</h2>
         <ul>
             <li><a href="https://derez.ai/blog/posts/hermes-agent-setup-guide.html">Hermes Agent Setup Guide</a> — From zero to a running agent</li>
