feat: add NIS2 landing page, roadmap page, and compliance section

- New /nis2 page: full Art. 21 mapping with covered/partial/roadmap/n-a
  tags, evidence-by-trigger breakdown, and roadmap callout
- New /roadmap page: planned and under-consideration items, NIS2-tagged
  items highlighted with monospace badge
- Home: new NIS2 section between screenshots and plugin block — Art. 21
  mapping list + MockCompliance UI + link to /nis2
- Features: new "Compliance & Audit (NIS2)" section
- Nav: Roadmap link added; NIS2 in Docs dropdown
- Footer: Roadmap and NIS2 links added
- docs/PRODUCT.md: NIS2 evidence foundation as value proposition #9
- docs/PAGES.md: /nis2, /roadmap, and NIS2 home section documented

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

src/pages/Home.tsx

@@ -4,6 +4,7 @@ import {
   ChartBarIcon,
   WrenchScrewdriverIcon,
   PuzzlePieceIcon,
+  ShieldCheckIcon,
 } from '@heroicons/react/24/outline'
 
 const DRIVERS = [
@@ -163,6 +164,38 @@ function MockVlans() {
   )
 }
 
+function MockCompliance() {
+  const checks = [
+    { label: 'Asset inventory', detail: '18 / 18 devices tracked', ok: true },
+    { label: 'Patch status', detail: 'All devices polled < 60 min', ok: true },
+    { label: 'Wazuh agents', detail: '15 / 18 agents active', ok: false },
+    { label: 'Syslog forwarding', detail: '14 / 18 forwarding to Graylog', ok: false },
+    { label: 'Config drift', detail: '0 drifted devices', ok: true },
+    { label: 'Audit log', detail: '23 actions logged (24 h)', ok: true },
+  ]
+  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">Compliance overview — HQ</span>
+        <span className="text-xs font-mono text-sky-500">Art. 21 NIS2</span>
+      </div>
+      <div className="space-y-1.5">
+        {checks.map((c) => (
+          <div key={c.label} className="flex items-center justify-between rounded-lg border border-slate-800 bg-slate-900 px-3 py-2">
+            <div className="flex items-center gap-2.5">
+              <span className={`text-xs font-semibold w-3 ${c.ok ? 'text-green-400' : 'text-yellow-400'}`}>
+                {c.ok ? '✓' : '⚠'}
+              </span>
+              <span className="text-xs text-slate-300">{c.label}</span>
+            </div>
+            <span className="text-xs text-slate-500">{c.detail}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function MockSecurity() {
   return (
     <div className="bg-slate-950 p-4">
@@ -384,6 +417,68 @@ export default function Home() {
 
       <div className="border-t border-slate-800" />
 
+      {/* 5b — NIS2 */}
+      <section className="py-24">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div>
+              <p className="text-xs font-semibold tracking-widest uppercase text-sky-500 mb-3">NIS2 · Art. 21</p>
+              <h2 className="text-2xl md:text-3xl font-bold text-slate-100 mb-4">
+                Evidence, not paperwork.
+              </h2>
+              <p className="text-base text-slate-400 leading-relaxed mb-8">
+                NIS2 Art. 21 mandates asset inventory, patch management, access
+                control, and audit trails as baseline technical measures. netOrk
+                doesn't bolt on a compliance layer — these are its day-to-day outputs.
+              </p>
+              <div className="mb-8">
+                <Link to="/nis2" className="inline-flex items-center gap-2 text-sky-400 hover:text-sky-300 transition-colors text-sm font-medium">
+                  <ShieldCheckIcon className="h-4 w-4" />
+                  Full Art. 21 mapping →
+                </Link>
+              </div>
+              <div className="space-y-4">
+                {[
+                  {
+                    art: 'Art. 21 (2e)',
+                    label: 'Patch & vulnerability management',
+                    detail: 'Per-device update status, Wazuh CVE counts by severity',
+                  },
+                  {
+                    art: 'Art. 21 (2h)',
+                    label: 'Asset management & access control',
+                    detail: 'Full device inventory, RBAC with four roles, complete audit log',
+                  },
+                  {
+                    art: 'Art. 21 (2a)',
+                    label: 'Risk analysis baseline',
+                    detail: 'Config drift detection, SNMP health metrics, security agent coverage',
+                  },
+                  {
+                    art: 'Art. 21 (2b)',
+                    label: 'Incident detection',
+                    detail: 'Wazuh alert history, CrowdSec decisions, Graylog syslog per device',
+                  },
+                ].map((m) => (
+                  <div key={m.art} className="flex gap-4">
+                    <span className="mt-0.5 shrink-0 w-28 text-xs font-mono text-sky-500">{m.art}</span>
+                    <div>
+                      <p className="text-sm font-medium text-slate-200">{m.label}</p>
+                      <p className="text-xs text-slate-500 mt-0.5">{m.detail}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <BrowserFrame label="netork.local / compliance / HQ">
+              <MockCompliance />
+            </BrowserFrame>
+          </div>
+        </div>
+      </section>
+
+      <div className="border-t border-slate-800" />
+
       {/* 6 — Plugin System */}
       <section className="py-24">
         <div className="max-w-7xl mx-auto px-6">