Add cross-navigation footer (#13)

## Summary
- Adds a shared cross-navigation toolbar above the existing footer on
vscode.copilotkit.dev
- Pill-shaped links to all 5 copilotkit.dev sub-properties (vscode,
aimock, oversight, pathfinder, outpost) with colored dots
- Current page (vscode) highlighted with accent border/glow,
non-clickable
- Responsive: pills wrap naturally, shrink below 640px, label hidden
below 480px

## Test plan
- [ ] Verify toolbar renders correctly at desktop width
- [ ] Verify pills wrap properly on mobile
- [ ] Verify active pill (vscode) is highlighted and non-clickable
- [ ] Verify other pills link to correct URLs
- [ ] Verify no visual regression to existing footer

Author: jpr5

docs/index.html

@@ -841,6 +841,63 @@
         text-decoration: none;
       }
 
+      /* --- Cross-Nav Footer -------------------------------------------- */
+      .cross-nav-footer {
+        padding: 2rem 0;
+        border-top: 1px solid var(--border);
+      }
+      .cross-nav-toolbar {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 0 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+      .cn-label {
+        font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
+        font-size: 0.8rem;
+        color: var(--text-dim);
+        margin-right: 0.25rem;
+        white-space: nowrap;
+      }
+      .cn-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4rem;
+        padding: 0.35rem 0.85rem;
+        border: 1px solid var(--border);
+        border-radius: 100px;
+        font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        text-decoration: none;
+        transition: border-color 0.2s, background 0.2s, color 0.2s;
+        white-space: nowrap;
+      }
+      .cn-pill:hover {
+        border-color: #3a3a50;
+        color: var(--text-primary);
+        text-decoration: none;
+        background: rgba(255, 255, 255, 0.03);
+      }
+      .cn-pill.active {
+        border-color: var(--accent);
+        background: var(--accent-glow);
+        color: var(--text-primary);
+        cursor: default;
+        pointer-events: none;
+      }
+      .cn-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
       /* --- Mobile ----------------------------------------------------- */
       @media (max-width: 768px) {
         .nav-links {
@@ -868,13 +925,26 @@
         }
       }
 
+      @media (max-width: 640px) {
+        .cross-nav-toolbar {
+          gap: 0.4rem;
+        }
+        .cn-pill {
+          font-size: 0.7rem;
+          padding: 0.3rem 0.7rem;
+        }
+      }
+
       @media (max-width: 480px) {
         .hero {
           padding: 8rem 0 4rem;
         }
         .hero h1 {
           font-size: 2rem;
         }
+        .cn-label {
+          display: none;
+        }
       }
     </style>
   </head>
@@ -1369,6 +1439,28 @@ <h2 class="fade-in">Get started in seconds</h2>
       </div>
     </section>
 
+    <!-- Cross-navigation toolbar -->
+    <div class="cross-nav-footer">
+      <div class="cross-nav-toolbar">
+        <span class="cn-label">copilotkit.dev /</span>
+        <a class="cn-pill active" href="https://vscode.copilotkit.dev">
+          <span class="cn-dot" style="background:#aa66ff"></span>vscode
+        </a>
+        <a class="cn-pill" href="https://aimock.copilotkit.dev">
+          <span class="cn-dot" style="background:#00ff88"></span>aimock
+        </a>
+        <a class="cn-pill" href="https://oversight.copilotkit.dev">
+          <span class="cn-dot" style="background:#ff6688"></span>oversight
+        </a>
+        <a class="cn-pill" href="https://pathfinder.copilotkit.dev">
+          <span class="cn-dot" style="background:#00ccff"></span>pathfinder
+        </a>
+        <a class="cn-pill" href="https://outpost.copilotkit.dev">
+          <span class="cn-dot" style="background:#f97316"></span>outpost
+        </a>
+      </div>
+    </div>
+
     <!-- --- Footer -------------------------------------------------- -->
     <footer>
       <div class="container">