feat: reflect netOrk v0.4.0 features (MFA, config backup, ack warnings)

Moves MFA/TOTP and config backup & versioning from roadmap to shipped
across the NIS2 coverage page, features list, and roadmap, and adds a
homepage screenshot row for the new config snapshot/diff/restore UI.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/Home.tsx

@@ -165,6 +165,39 @@ function MockVlans() {
   )
 }
 
+function MockConfigDiff() {
+  const snapshots = [
+    { id: 'a3f9c1', when: '2 min ago', label: 'current' },
+    { id: '7e2b04', when: '1 h ago' },
+    { id: 'd819e6', when: '6 h ago' },
+  ]
+  return (
+    <div className="bg-slate-950 p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <span className="text-xs font-semibold text-slate-100">Config — fw-001.lan</span>
+        <button className="text-xs px-2.5 py-1 rounded bg-sky-600 hover:bg-sky-500 text-white transition-colors">Restore</button>
+      </div>
+      <div className="flex gap-2 mb-3">
+        {snapshots.map((s) => (
+          <span key={s.id} className={`text-xs font-mono px-2 py-1 rounded border ${s.label ? 'border-sky-500/40 bg-sky-500/10 text-sky-400' : 'border-slate-800 text-slate-500'}`}>
+            {s.id} <span className="text-slate-600">· {s.when}</span>
+          </span>
+        ))}
+      </div>
+      <div className="rounded-lg border border-slate-800 overflow-hidden font-mono text-xs">
+        <div className="px-3 py-1.5 bg-slate-900 text-slate-500 border-b border-slate-800">7e2b04 → a3f9c1</div>
+        <div className="px-3 py-1 bg-red-500/10 text-red-400">- set firewall.rule_42.destination_port='22'</div>
+        <div className="px-3 py-1 bg-green-500/10 text-green-400">+ set firewall.rule_42.destination_port='2222'</div>
+        <div className="px-3 py-1 text-slate-500">  commit</div>
+      </div>
+      <div className="mt-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3">
+        <p className="text-xs text-yellow-400 font-medium">Unauthorized change detected — fw-001.lan</p>
+        <p className="text-xs text-slate-400 mt-1">Configuration changed outside netOrk between the last two polls.</p>
+      </div>
+    </div>
+  )
+}
+
 function MockCompliance() {
   const checks = [
     { label: 'Asset inventory', detail: '18 / 18 devices tracked', ok: true },
@@ -375,6 +408,15 @@ export default function Home() {
               <MockSecurity />
             </BrowserFrame>
           </div>
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <BrowserFrame label="netork.local / devices / fw-001 / config">
+              <MockConfigDiff />
+            </BrowserFrame>
+            <div>
+              <h2 className="text-2xl md:text-3xl font-bold text-slate-100 mb-4">{h.screenshot4.heading}</h2>
+              <p className="text-base text-slate-400 leading-relaxed">{h.screenshot4.body}</p>
+            </div>
+          </div>
         </div>
       </section>