Landing pages: chatgpt-agent.html + odoo-hermes-agent.html. Nav: add Topics link. Homepage: add Focus Topics section with cards.

index.html

@@ -1398,6 +1398,71 @@
                 }
             }
 
+            /* ══════════════════════════════════════════════════════════
+           TOPICS
+           ══════════════════════════════════════════════════════════ */
+            .topics-grid {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 16px;
+                margin-top: 20px;
+            }
+            .topic-card {
+                display: flex;
+                flex-direction: column;
+                background: var(--bg-card);
+                border: 1px solid var(--border);
+                border-radius: 18px;
+                padding: 28px;
+                text-decoration: none;
+                transition: border-color .2s, transform .2s;
+            }
+            .topic-card:hover {
+                border-color: var(--accent);
+                transform: translateY(-3px);
+                text-decoration: none;
+            }
+            .topic-badge {
+                display: inline-block;
+                background: rgba(0,245,255,0.1);
+                color: var(--accent);
+                border: 1px solid rgba(0,245,255,0.25);
+                font-size: 0.7rem;
+                font-weight: 600;
+                padding: 3px 10px;
+                border-radius: 20px;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                align-self: flex-start;
+                margin-bottom: 14px;
+            }
+            .topic-card h3 {
+                font-size: 1.15rem;
+                font-weight: 600;
+                color: var(--text);
+                margin-bottom: 8px;
+                line-height: 1.3;
+            }
+            .topic-card p {
+                font-size: 0.88rem;
+                color: var(--text-muted);
+                flex: 1;
+                margin-bottom: 16px;
+                line-height: 1.6;
+            }
+            .topic-link {
+                color: var(--accent);
+                font-weight: 600;
+                font-size: 0.88rem;
+                align-self: flex-start;
+            }
+            .topic-card:hover .topic-link {
+                text-decoration: underline;
+            }
+            @media (max-width: 700px) {
+                .topics-grid { grid-template-columns: 1fr; }
+            }
+
             /* ══════════════════════════════════════════════════════════
            FOOTER
            ══════════════════════════════════════════════════════════ */
@@ -1930,6 +1995,7 @@
                     <li><a href="#pricing">Pricing</a></li>
                     <li><a href="#faq">FAQ</a></li>
                     <li><a href="#blog">Blog</a></li>
+                    <li><a href="#topics">Topics</a></li>
                 </ul>
                 <div class="header-actions">
                     <a href="https://app.derez.ai" class="btn-login">
@@ -3446,6 +3512,29 @@
             </div>
         </section>
 
+        <!-- ═══════════════════════════════════════════════════════════════
+         FOCUS TOPICS
+         ═══════════════════════════════════════════════════════════════ -->
+        <section id="topics">
+            <div class="container">
+                <h2 class="section-title">📌 Focus Topics</h2>
+                <div class="topics-grid">
+                    <a href="odoo-hermes-agent.html" class="topic-card">
+                        <div class="topic-badge">Integration</div>
+                        <h3>Odoo Hermes Agent</h3>
+                        <p>Connect your Odoo ERP to Hermes Agent in 5 minutes. Read, write, and automate your business data through natural language prompts.</p>
+                        <span class="topic-link">Explore &rarr;</span>
+                    </a>
+                    <a href="chatgpt-agent.html" class="topic-card">
+                        <div class="topic-badge">Guide</div>
+                        <h3>ChatGPT AI Agent</h3>
+                        <p>Build and deploy your own ChatGPT-powered AI agent. Full SSH access, no coding, enterprise-grade hosting — deploy in under 5 minutes.</p>
+                        <span class="topic-link">Explore &rarr;</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
         <!-- ═══════════════════════════════════════════════════════════════
          FOOTER
          ═══════════════════════════════════════════════════════════════ -->