add Blog Post Ideas section with first idea: why backing up an agent is so hard

index.html

@@ -1619,8 +1619,68 @@
                 padding: 28px 20px;
             }
             .story-avatar { width: 72px; height: 72px; font-size: 28px; }
-        </style>
+        }
 
+        /* ══════════════════════════════════════════════════════════
+           BLOG IDEAS
+           ══════════════════════════════════════════════════════════ */
+        .blog-idea-item {
+            display: flex;
+            gap: 16px;
+            padding: 20px 24px;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-card);
+            transition: border-color 0.2s, transform 0.2s;
+            align-items: flex-start;
+        }
+        .blog-idea-item:hover {
+            border-color: var(--border-hi);
+            transform: translateY(-2px);
+        }
+        .blog-idea-checkbox {
+            flex-shrink: 0;
+            padding-top: 3px;
+        }
+        .blog-idea-checkbox input[type="checkbox"] {
+            accent-color: var(--accent);
+            width: 17px;
+            height: 17px;
+            cursor: default;
+        }
+        .blog-idea-body {
+            flex: 1;
+            min-width: 0;
+        }
+        .blog-idea-title {
+            font-weight: 700;
+            font-size: 16px;
+            color: var(--text);
+            margin-bottom: 6px;
+        }
+        .blog-idea-desc {
+            font-size: 13px;
+            color: var(--text-muted);
+            line-height: 1.7;
+            margin-bottom: 10px;
+        }
+        .blog-idea-meta {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+        }
+        .blog-idea-tag {
+            display: inline-block;
+            padding: 3px 12px;
+            font-size: 11px;
+            font-weight: 600;
+            border-radius: 12px;
+            background: var(--accent-dim);
+            color: var(--accent);
+            border: 1px solid rgba(0, 245, 255, 0.15);
+            letter-spacing: 0.02em;
+        }
+        </style>
         <!-- ── Plausible Analytics ──────────────────────────────────────── -->
         <script defer data-domain="derez.ai" src="https://plausible.odoo4projects.com/js/script.file-downloads.outbound-links.tagged-events.js"></script>
         <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
@@ -2352,6 +2412,33 @@
     </section>
 
 
+    <!-- ═══════════════════════════════════════════════════════════════
+         BLOG IDEAS
+         ═══════════════════════════════════════════════════════════════ -->
+    <section id="blog-ideas">
+        <div class="container">
+            <h2 class="section-title">Blog Post Ideas</h2>
+            <p class="section-sub">Topics I want to write about. Tick them off as they go live.</p>
+            <div class="blog-ideas-list" style="max-width: 760px; margin: 0 auto;">
+                <div class="blog-idea-item">
+                    <div class="blog-idea-checkbox">
+                        <input type="checkbox" disabled checked />
+                    </div>
+                    <div class="blog-idea-body">
+                        <div class="blog-idea-title">Why backing up an agent is so hard</div>
+                        <div class="blog-idea-desc">Modern AI agents install packages everywhere — pip in venvs, npm globally, configs scattered across /etc, ~/.config, /opt, custom paths. A naive filesystem backup misses half the environment. This post explores the real architecture behind 100% agent backup: what lives where, why Borg encrypted deduplication is the right tool, and how we make every backup a full restore.</div>
+                        <div class="blog-idea-meta">
+                            <span class="blog-idea-tag">Technical</span>
+                            <span class="blog-idea-tag">Backups</span>
+                            <span class="blog-idea-tag">DevOps</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
     <!-- ═══════════════════════════════════════════════════════════════
          BLOG
          ═══════════════════════════════════════════════════════════════ -->