diff --git a/.codespellrc b/.codespellrc
index 3240ebcf0..1fe1199bc 100644
--- a/.codespellrc
+++ b/.codespellrc
@@ -58,4 +58,4 @@ ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afte
 
 # Skip certain files and directories
 
-skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/*.json,./skills/geofeed-tuner/references/*.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/*.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/*.txt
+skip = .git,node_modules,package-lock.json,*.lock,*.min.js,website/build,website/.docusaurus,.all-contributorrc,./skills/geofeed-tuner/assets/*.json,./skills/geofeed-tuner/references/*.txt,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/assets/*.json,./plugins/fastah-ip-geo-tools/skills/geofeed-tuner/references/*.txt
diff --git a/.gitignore b/.gitignore
index 342509c05..4f8bc08d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,6 @@ website/public/llms.txt
 *.sln
 obj/
 bin/
+
+# Local dev logs
+website/ws.log
diff --git a/docs/DISCOVERIES.md b/docs/DISCOVERIES.md
new file mode 100644
index 000000000..711adc5f0
--- /dev/null
+++ b/docs/DISCOVERIES.md
@@ -0,0 +1,45 @@
+# Project Discoveries
+
+A living log of architectural decisions, patterns, and hard-learned lessons for the Awesome GitHub Copilot website.
+
+## [2026-06-15] macOS glass theme direction and reusable glass-card surface
+
+- **What changed:** Introduced a `.glass-card` utility in `website/src/styles/global.css` and simplified the theme toggle to an explicit dark/light toggle while still defaulting first-time visits to the system preference.
+- **Why:** We want a consistent, big-tech-grade translucent glass aesthetic across landing and content pages without rebuilding every card component from scratch. Removing the `auto` toggle state reduces UI ambiguity while still respecting the OS default on first paint.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/ThemeToggle.astro`, `website/src/components/Head.astro`, plus new `.astro` pages (`how-to-use.astro`, `contribute.astro`) and sidebar entries.
+- **Reference:** `feature/website-polish` branch commits around `a27fa743`–`fc354282`.
+
+## [2026-06-15] Landing-page restructure into intent-driven sections
+
+- **What changed:** Rewrote `website/src/pages/index.astro` using new components (`Hero`, `HomeCategoryCard`, `QuickLinks`, `StatsRibbon`) and moved the flat 9-card grid into three clusters: *Code smarter*, *Automate workflows*, and *Extend and learn*.
+- **Why:** A directory-style grid surfaces taxonomy before user intent. Grouping cards by what the user wants to do makes the landing page feel like a product destination rather than an awesome-list index.
+- **Impact:** `website/src/pages/index.astro`, `website/src/components/home/*`, `website/src/scripts/pages/index.ts`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `3bd10087`–`3e724813`.
+
+## [2026-06-15] Extended glass theme to listing pages and completed landing page sections
+
+- **What changed:** Applied the glass-card surface to resource listing pages (resource items, listing toolbar, search/filter inputs, ContributeCTA) and added the final landing-page sections: *How it works*, *Install in seconds*, and *Built by developers, for developers*. Also added an optional `class` prop to the `Icon` component.
+- **Why:** Consistency across the site reinforces the product-site aesthetic and gives users a clear path from discovery → installation → contribution.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/PageHeader.astro`, `website/src/components/ContributeCTA.astro`, `website/src/components/Icon.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/InstallCard.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/pages/index.astro`.
+- **Reference:** `feature/website-polish` branch commits around `5a0f0e20`–`a32d148b`.
+
+## [2026-06-15] UI refinements based on feedback
+
+- **What changed:** Removed the hero animated background, simplified the theme toggle to a minimalist icon button, cleaned up button colors (removed purple glow primary), fixed GitHub icon alignment, aligned stats baselines, increased search results height, and redesigned *How it works* as a commit-history timeline.
+- **Why:** The first iteration had visual noise (orbs, purple buttons, misaligned icons) and inconsistent card sizing. Simplifying the palette and aligning elements gives the page the calm, big-tech finish requested.
+- **Impact:** `website/src/styles/global.css`, `website/src/components/ThemeToggle.astro`, `website/src/components/home/Hero.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/components/home/InstallCard.astro`, `website/src/scripts/pages/index.ts`.
+- **Reference:** `feature/website-polish` branch commits around `7b306c03`–`04f7b7c2`.
+
+## [2026-06-15] Final alignment and icon polish
+
+- **What changed:** Fixed stats ribbon alignment so all items line up, bumped the hero GitHub button icon to 22px with proper vertical centering, redesigned *How it works* into a true GitHub-style vertical commit history, aligned the *Install in seconds* icon with its title, and enlarged the GitHub logo in the *Built by developers* CTA.
+- **Why:** The previous commit-history timeline was still card-like; a vertical line with connected commit dots reads more authentically like a GitHub history and balances the page.
+- **Impact:** `website/src/components/home/StatsRibbon.astro`, `website/src/components/home/Hero.astro`, `website/src/components/home/HowItWorks.astro`, `website/src/components/home/InstallCard.astro`, `website/src/components/home/CommunityCTA.astro`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `04809234`–`1c0aaee3`.
+
+## [2026-06-15] Site footer and resource-modal text rendering
+
+- **What changed:** Replaced the minimal Starlight footer with a proper site footer (`website/src/components/Footer.astro`) containing brand links, browse and resource columns, the theme toggle, and copyright/credits. Also fixed resource-listing modal text rendering by styling `.modal-body` (scrollable, flex-fill, proper background) and both raw (`#modal-content pre`) and rendered (`.modal-rendered-content`) markdown views with readable colors, typography, and code blocks.
+- **Why:** A custom footer completes the product-site experience and gives users persistent navigation to every resource type. The modal was missing body/content styles entirely, so long files could overflow and rendered markdown had no typography or contrast guarantees.
+- **Impact:** `website/src/components/Footer.astro`, `website/src/styles/global.css`.
+- **Reference:** `feature/website-polish` branch commits around `6a8aecec`–`e914f6d0`.
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 1df5c300e..9c037245f 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -71,6 +71,21 @@ export default defineConfig({
           "https://github.com/github/awesome-copilot/edit/staged/website/",
       },
       sidebar: [
+        {
+          label: "Browse Resources",
+          items: [
+            { label: "Home", link: "/" },
+            { label: "Agents", link: "/agents/" },
+            { label: "Instructions", link: "/instructions/" },
+            { label: "Skills", link: "/skills/" },
+            { label: "Hooks", link: "/hooks/" },
+            { label: "Workflows", link: "/workflows/" },
+            { label: "Canvas Extensions", link: "/extensions/" },
+            { label: "Plugins", link: "/plugins/" },
+            { label: "Tools", link: "/tools/" },
+            { label: "Contributors", link: "/contributors/" },
+          ],
+        },
         {
           label: "Fundamentals",
           items: [
diff --git a/website/public/images/awesome-copilot.png b/website/public/images/awesome-copilot.png
deleted file mode 100644
index 524f022f1..000000000
Binary files a/website/public/images/awesome-copilot.png and /dev/null differ
diff --git a/website/src/components/ContributeCTA.astro b/website/src/components/ContributeCTA.astro
index 70078f297..1980edb5a 100644
--- a/website/src/components/ContributeCTA.astro
+++ b/website/src/components/ContributeCTA.astro
@@ -8,8 +8,8 @@ const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CON
 const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
 ---
 
-<aside class="contribute-cta" aria-label="Contribute">
-  <div class="contribute-cta-inner">
+<aside class="contribute-cta reveal" aria-label="Contribute">
+  <div class="contribute-cta-inner glass-card">
     <div class="contribute-cta-content">
       <h2 class="contribute-cta-title">Don't see what you're looking for?</h2>
       <p class="contribute-cta-description">This collection is community-driven. Share your own {resourceType} to help others get more out of GitHub Copilot.</p>
@@ -40,8 +40,6 @@ const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
     justify-content: space-between;
     gap: 32px;
     padding: 32px 40px;
-    background: var(--color-bg-secondary);
-    border: 1px solid var(--color-border);
     border-radius: var(--border-radius-lg);
     position: relative;
     overflow: hidden;
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
index 7077d8b8d..fde66fd16 100644
--- a/website/src/components/Footer.astro
+++ b/website/src/components/Footer.astro
@@ -1,87 +1,85 @@
 ---
-import EditLink from "@astrojs/starlight/components/EditLink.astro";
-import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
-import Pagination from "@astrojs/starlight/components/Pagination.astro";
-import config from "virtual:starlight/user-config";
-import { Icon } from "@astrojs/starlight/components";
 import ThemeToggle from "./ThemeToggle.astro";
----
-
-<footer class="sl-flex">
-  <div class="meta sl-flex">
-    <EditLink />
-    <LastUpdated />
-  </div>
-  <Pagination />
-
-  {
-    config.credits && (
-      <a class="kudos sl-flex" href="https://starlight.astro.build">
-        <Icon name={"starlight"} /> {Astro.locals.t("starlight:builtWithStarlight.label")}
-      </a>
-    )
-  }
-
-  <p class="made-by">Made with love by our amazing <a href="/contributors/">contributors</a></p>
-</footer>
 
-<ThemeToggle />
+const base = import.meta.env.BASE_URL;
+const githubUrl = "https://github.com/github/awesome-copilot";
+const currentYear = new Date().getFullYear();
 
-<style>
-  footer {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
+const browseLinks = [
+  { label: "Agents", href: `${base}agents/` },
+  { label: "Skills", href: `${base}skills/` },
+  { label: "Instructions", href: `${base}instructions/` },
+  { label: "Plugins", href: `${base}plugins/` },
+  { label: "Hooks", href: `${base}hooks/` },
+  { label: "Workflows", href: `${base}workflows/` },
+  { label: "Tools", href: `${base}tools/` },
+  { label: "Learning Hub", href: `${base}learning-hub/` },
+];
 
-  .meta {
-    gap: 0.75rem 3rem;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    margin-top: 0.75rem;
-    font-size: var(--sl-text-sm);
-    color: var(--sl-color-gray-3);
-  }
-
-  .meta > :global(p:only-child) {
-    margin-inline-start: auto;
-  }
-
-  :global(.pagination-links:empty) {
-    display: none;
-  }
-
-  .made-by {
-    text-align: center;
-    margin: 0 auto 0.75rem;
-    font-size: var(--sl-text-xs);
-    color: var(--sl-color-gray-3);
-  }
+const resourceLinks = [
+  { label: "How to Use", href: `${base}how-to-use/` },
+  { label: "Contribute", href: `${base}contribute/` },
+  { label: "Contributors", href: `${base}contributors/` },
+  { label: "GitHub", href: githubUrl },
+  { label: "License", href: `${githubUrl}/blob/main/LICENSE` },
+];
+---
 
-  .kudos {
-    align-items: center;
-    gap: 0.5em;
-    margin: 0 auto;
-    font-size: var(--sl-text-xs);
-    text-decoration: none;
-    color: var(--sl-color-gray-3);
-  }
+<footer class="site-footer" aria-labelledby="footer-heading">
+  <h2 id="footer-heading" class="sr-only">Site footer</h2>
 
-  .kudos:hover {
-    color: var(--sl-color-white);
-  }
+  <div class="footer-inner">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <a href={base} class="footer-brand-link" aria-label="Awesome GitHub Copilot home">
+          <span class="footer-title">Awesome GitHub Copilot</span>
+        </a>
+        <p class="footer-tagline">
+          Community-contributed agents, instructions, and skills to supercharge
+          your Copilot experience.
+        </p>
+        <div class="footer-theme-toggle">
+          <ThemeToggle />
+        </div>
+      </div>
 
-  .kudos :global(svg) {
-    color: var(--sl-color-orange);
-  }
+      <nav class="footer-nav footer-nav--compact" aria-label="Browse resources">
+        <h3>Browse</h3>
+        <ul>
+          {
+            browseLinks.map((link) => (
+              <li>
+                <a href={link.href}>{link.label}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
 
-  .made-by a {
-    color: var(--sl-color-gray-3);
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-    transition: color 0.2s ease;
-  }
+      <nav class="footer-nav footer-nav--compact" aria-label="Project resources">
+        <h3>Resources</h3>
+        <ul>
+          {
+            resourceLinks.map((link) => (
+              <li>
+                <a href={link.href} target={link.href.startsWith("http") ? "_blank" : undefined} rel={link.href.startsWith("http") ? "noopener" : undefined}>
+                  {link.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </nav>
+    </div>
 
-  .made-by a:hover {
-    color: var(--sl-color-accent);
-  }
-</style>
\ No newline at end of file
+    <div class="footer-legal">
+      <p class="footer-copyright">
+        © {currentYear} GitHub, Inc. Licensed under the MIT License.
+      </p>
+      <p class="footer-credits">
+        Made with love by our amazing{" "}
+        <a href={`${base}contributors/`}>contributors</a>.
+      </p>
+    </div>
+  </div>
+</footer>
diff --git a/website/src/components/Head.astro b/website/src/components/Head.astro
index 6fb4a0c1f..cdd80717f 100644
--- a/website/src/components/Head.astro
+++ b/website/src/components/Head.astro
@@ -51,13 +51,21 @@ const twitterDomain =
     const STORAGE_KEY = 'awesome-copilot-theme';
     const stored = localStorage.getItem(STORAGE_KEY);
 
-    // Theme handling:
-    // - 'dark' or 'light' → set data-theme attribute to that value
-    // - 'auto' or unset → don't set data-theme (CSS media query handles system preference)
+    // Resolve the effective theme as early as possible so the first paint
+    // already uses the right palette. The ThemeToggle component mirrors this
+    // logic at runtime; keep them in sync.
     if (stored === 'dark' || stored === 'light') {
       document.documentElement.setAttribute('data-theme', stored);
+      // Keep Starlight's own theme key in sync so Starlight's bundled script does
+      // not override our explicit choice on hydration.
+      localStorage.setItem('starlight-theme', stored);
+    } else {
+      // No explicit preference yet: follow the system, defaulting to light.
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const systemTheme = prefersDark ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-theme', systemTheme);
+      localStorage.setItem('starlight-theme', systemTheme);
     }
-    // For 'auto' or unset, no attribute means CSS media query controls theme
   })();
 </script>
 
diff --git a/website/src/components/Icon.astro b/website/src/components/Icon.astro
index 4ffcc2bc0..44e19374a 100644
--- a/website/src/components/Icon.astro
+++ b/website/src/components/Icon.astro
@@ -4,7 +4,8 @@
 // GitHub Primer icons are sourced from https://primer.style/foundations/icons/
 
 export interface Props {
-  name: 'agents' | 'instructions' | 'skills' | 'hooks' | 'workflows' | 'plugins' | 'tools' | 'learning' | 'close' | 'copy' | 'download' | 'share' | 'external' | 'plus' | 'search' | 'chevron-down' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'robot' | 'sync';
+  name: 'agents' | 'instructions' | 'skills' | 'hooks' | 'workflows' | 'plugins' | 'tools' | 'learning' | 'close' | 'copy' | 'download' | 'share' | 'external' | 'plus' | 'search' | 'chevron-down' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'robot' | 'sync' | 'mark-github';
+  class?: string;
   size?: number;
   class?: string;
 }
@@ -69,6 +70,12 @@ const icons: Record<string, { path: string; fill?: boolean }> = {
     path: `<path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
   },
 
+  // GitHub mark icon - Primer / Octicons
+  'mark-github': {
+    fill: true,
+    path: `<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>`
+  },
+
   'copy': {
     path: `<path d="M8 4h8a2 2 0 0 1 2 2v8M8 4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 4v10a2 2 0 0 0 2 2h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`
   },
diff --git a/website/src/components/Modal.astro b/website/src/components/Modal.astro
index 82b2e3955..a8a89f8c8 100644
--- a/website/src/components/Modal.astro
+++ b/website/src/components/Modal.astro
@@ -1,5 +1,6 @@
 ---
 // Modal component for viewing file contents
+import Icon from './Icon.astro';
 ---
 
 <div
@@ -12,10 +13,9 @@
   <div class="modal-content">
     <div class="modal-header">
       <div class="modal-header-top">
-        <h3 id="modal-title">File</h3>
-        <div class="modal-actions">
+        <div class="modal-title-wrap">
+          <h3 id="modal-title">File</h3>
           <div id="modal-file-switcher" class="modal-file-switcher hidden">
-            <span class="modal-file-switcher-label">File</span>
             <div id="modal-file-dropdown" class="modal-file-dropdown">
               <button
                 type="button"
@@ -35,202 +35,79 @@
                 aria-haspopup="menu"
                 aria-expanded="false"
               >
-                <svg
-                  viewBox="0 0 16 16"
-                  width="12"
-                  height="12"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"
-                  ></path>
+                <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" aria-hidden="true">
+                  <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path>
                 </svg>
               </button>
               <div id="modal-file-menu" class="modal-file-menu" role="menu"></div>
             </div>
           </div>
-          <button
-            id="install-command-btn"
-            class="btn btn-secondary hidden"
-            aria-label="Copy install command"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
-              ></path>
-              <path
-                d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Copy Install</span>
-          </button>
-          <button
-            id="raw-btn"
-            class="btn btn-secondary hidden"
-            aria-label="View raw file"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M2.3 3.2a.75.75 0 0 1 1.06 0L8 7.94l4.64-4.72a.75.75 0 1 1 1.06 1.06L9.06 8l4.64 4.72a.75.75 0 1 1-1.06 1.06L8 8.06l-4.64 4.72a.75.75 0 1 1-1.06-1.06L6.94 8 2.3 3.28a.75.75 0 0 1 0-1.06z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Raw</span>
-          </button>
-          <button
-            id="render-btn"
-            class="btn btn-secondary"
-            aria-label="Render file"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M2 2h12v1H2V2zm0 3h12v1H2V5zm0 3h12v1H2V8zm0 3h12v1H2v-1z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Render</span>
-          </button>
-          <button
-            id="copy-btn"
-            class="btn btn-secondary"
-            aria-label="Copy to clipboard"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
-              ></path>
-              <path
-                d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Copy</span>
-          </button>
-          <button
-            id="download-btn"
-            class="btn btn-secondary"
-            aria-label="Download file"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M7.47 10.78a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06L8.75 8.44V1.75a.75.75 0 0 0-1.5 0v6.69L4.78 5.97a.75.75 0 0 0-1.06 1.06l3.75 3.75ZM3.75 13a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Download</span>
-          </button>
-          <button
-            id="share-btn"
-            class="btn btn-secondary"
-            aria-label="Copy link to clipboard"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-.025 5.45a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 1 1-2.83-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25z"
-              ></path>
-            </svg>
-            <span aria-hidden="true">Share</span>
-          </button>
-          <div
-            id="install-dropdown"
-            class="install-dropdown"
-            style="display: none;"
-          >
-            <a
-              id="install-btn-main"
-              class="btn btn-primary install-btn-main"
-              target="_blank"
-              rel="noopener"
-            >
-              Install
-            </a>
-            <button
-              type="button"
-              class="btn btn-primary install-btn-toggle"
-              aria-label="Install options"
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              <svg
-                viewBox="0 0 16 16"
-                width="12"
-                height="12"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"
-                ></path>
+        </div>
+
+        <div class="modal-actions">
+          <div class="modal-actions-group modal-actions-group--view">
+            <button id="raw-btn" class="btn btn-secondary hidden" aria-label="View raw file">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M2.3 3.2a.75.75 0 0 1 1.06 0L8 7.94l4.64-4.72a.75.75 0 1 1 1.06 1.06L9.06 8l4.64 4.72a.75.75 0 1 1-1.06 1.06L8 8.06l-4.64 4.72a.75.75 0 1 1-1.06-1.06L6.94 8 2.3 3.28a.75.75 0 0 1 0-1.06z"></path>
               </svg>
+              <span aria-hidden="true">Raw</span>
             </button>
-            <div class="install-dropdown-menu" role="menu">
-              <a
-                id="install-vscode"
-                target="_blank"
-                rel="noopener"
-                role="menuitem"
-              >
-                VS Code
-              </a>
-              <a
-                id="install-insiders"
-                target="_blank"
-                rel="noopener"
-                role="menuitem"
-              >
-                VS Code Insiders
+            <button id="render-btn" class="btn btn-secondary" aria-label="Render file">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M2 2h12v1H2V2zm0 3h12v1H2V5zm0 3h12v1H2V8zm0 3h12v1H2v-1z"></path>
+              </svg>
+              <span aria-hidden="true">Render</span>
+            </button>
+          </div>
+
+          <div class="modal-actions-group modal-actions-group--file">
+            <button id="copy-btn" class="btn btn-secondary" aria-label="Copy to clipboard">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
+                <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
+              </svg>
+              <span aria-hidden="true">Copy</span>
+            </button>
+            <button id="install-command-btn" class="btn btn-secondary hidden" aria-label="Copy install command">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
+                <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
+              </svg>
+              <span aria-hidden="true">Copy Install</span>
+            </button>
+            <button id="download-btn" class="btn btn-secondary" aria-label="Download file">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M7.47 10.78a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06L8.75 8.44V1.75a.75.75 0 0 0-1.5 0v6.69L4.78 5.97a.75.75 0 0 0-1.06 1.06l3.75 3.75ZM3.75 13a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path>
+              </svg>
+              <span aria-hidden="true">Download</span>
+            </button>
+            <button id="share-btn" class="btn btn-secondary" aria-label="Copy link to clipboard">
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">
+                <path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-.025 5.45a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 1 1-2.83-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25z"></path>
+              </svg>
+              <span aria-hidden="true">Share</span>
+            </button>
+          </div>
+
+          <div class="modal-actions-group modal-actions-group--install">
+            <div id="install-dropdown" class="install-dropdown" style="display: none;">
+              <a id="install-btn-main" class="btn btn-primary install-btn-main" target="_blank" rel="noopener">
+                Install
               </a>
+              <button type="button" class="btn btn-primary install-btn-toggle" aria-label="Install options" aria-expanded="false" aria-haspopup="true">
+                <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" aria-hidden="true">
+                  <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path>
+                </svg>
+              </button>
+              <div class="install-dropdown-menu" role="menu">
+                <a id="install-vscode" target="_blank" rel="noopener" role="menuitem">VS Code</a>
+                <a id="install-insiders" target="_blank" rel="noopener" role="menuitem">VS Code Insiders</a>
+              </div>
             </div>
           </div>
-          <button
-            id="close-modal"
-            class="btn btn-icon"
-            aria-label="Close dialog"
-          >
-            <svg
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
-              ></path>
-            </svg>
+
+          <button id="close-modal" class="btn btn-icon modal-close" aria-label="Close dialog">
+            <Icon name="close" size={18} />
           </button>
         </div>
       </div>
diff --git a/website/src/components/PageHeader.astro b/website/src/components/PageHeader.astro
index 4719267af..2877af0b1 100644
--- a/website/src/components/PageHeader.astro
+++ b/website/src/components/PageHeader.astro
@@ -1,38 +1,166 @@
 ---
 import Icon from './Icon.astro';
 
-interface Props {
+export interface Props {
   title: string;
   description: string;
-  icon?: 'robot' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book';
+  icon?: 'robot' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book' | 'plus' | 'search' | 'external' | 'chevron-down';
+  eyebrow?: string;
+  primaryAction?: {
+    href: string;
+    label: string;
+    external?: boolean;
+  };
 }
 
-const { title, description, icon } = Astro.props;
+const { title, description, icon, eyebrow, primaryAction } = Astro.props;
 const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md';
 ---
 
 <div class="page-header">
   <div class="container">
     <div class="page-header-row">
-      <div>
+      <div class="page-header-main">
+        {eyebrow && <p class="page-header-eyebrow">{eyebrow}</p>}
         <h1>
-          {icon && <Icon name={icon} size={28} />}
-          <Fragment set:html={title} />
+          <span class="page-header-icon" aria-hidden="true">
+            {icon && <Icon name={icon} size={28} />}
+          </span>
+          <span class="page-header-title"><Fragment set:html={title} /></span>
         </h1>
         <p><slot><Fragment set:html={description} /></slot></p>
       </div>
-      <a href={contributingUrl} class="contribute-link" target="_blank" rel="noopener">
-        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"/></svg>
-        Contribute
-      </a>
+      <div class="page-header-actions">
+        {primaryAction && (
+          <a
+            href={primaryAction.href}
+            class="btn btn-primary"
+            target={primaryAction.external ? '_blank' : undefined}
+            rel={primaryAction.external ? 'noopener' : undefined}
+          >
+            {primaryAction.label}
+            {primaryAction.external && <Icon name="external" size={16} />}
+          </a>
+        )}
+        <a href={contributingUrl} class="contribute-link" target="_blank" rel="noopener">
+          <Icon name="plus" size={16} />
+          <span>Contribute</span>
+        </a>
+      </div>
     </div>
   </div>
 </div>
 
 <style>
+  .page-header {
+    padding: clamp(32px, 6vh, 56px) 0 clamp(20px, 3vh, 32px);
+  }
+
+  .page-header-main {
+    flex: 1;
+    min-width: 0;
+  }
+
   .page-header h1 {
     display: flex;
     align-items: center;
+    gap: 0.75rem;
+    font-size: clamp(1.75rem, 4vw, 2.25rem);
+    line-height: 1.15;
+    margin-bottom: 0.5rem;
+  }
+
+  .page-header-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-accent);
+  }
+
+  .page-header-eyebrow {
+    display: inline-flex;
+    align-items: center;
     gap: 0.5rem;
+    padding: 0.35rem 0.75rem;
+    background: var(--color-glass);
+    border: 1px solid var(--color-glass-border);
+    border-radius: var(--border-radius-full);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted);
+    margin: 0 0 0.75rem;
+  }
+
+  .page-header p {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--color-text-muted);
+    max-width: 56ch;
+    margin: 0;
+  }
+
+  .page-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  .page-header-actions .btn {
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .contribute-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-accent);
+    background: var(--color-card-bg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    transition: all var(--transition);
+    backdrop-filter: var(--surface-backdrop);
+    -webkit-backdrop-filter: var(--surface-backdrop);
+  }
+
+  .contribute-link:hover {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+    color: var(--color-text-emphasis);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-glow);
+  }
+
+  .contribute-link :global(svg) {
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 768px) {
+    .page-header-row {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+
+    .page-header-actions {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    .page-header-actions .btn,
+    .contribute-link {
+      flex: 1 1 auto;
+      justify-content: center;
+    }
   }
 </style>
diff --git a/website/src/components/ThemeToggle.astro b/website/src/components/ThemeToggle.astro
index 55077f3ad..285d07370 100644
--- a/website/src/components/ThemeToggle.astro
+++ b/website/src/components/ThemeToggle.astro
@@ -1,138 +1,101 @@
 ---
-// Theme Toggle Component - 3 state slider: Auto | Dark | Light
+// Minimalist two-state theme toggle: dark | light
+//
+// - First-time visitors get the system preference, stored as an explicit choice.
+// - After that, users cycle only between dark and light with a single click.
 ---
 
-<div class="theme-toggle-container">
-  <button
-    id="theme-toggle"
-    class="theme-toggle"
-    aria-label="Toggle theme"
-    title="Change theme"
-  >
-    <span class="theme-icon moon" aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-      </svg>
+<button
+  id="theme-toggle"
+  class="theme-toggle"
+  aria-label="Toggle between dark and light theme"
+  title="Toggle theme (Ctrl/Cmd + Shift + L)"
+  type="button"
+>
+  <span class="theme-toggle__track" aria-hidden="true">
+    <span class="theme-toggle__thumb" aria-hidden="true">
+      <span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true">
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+          <path d="M9.598 1.591a.749.749 0 0 1 .785-.559 7.001 7.001 0 1 1-7.737 7.737.749.749 0 0 1 .56-.786 7.002 7.002 0 0 0 5.902-5.903.751.751 0 0 1 .49-.489Z"/>
+        </svg>
+      </span>
+      <span class="theme-toggle__icon theme-toggle__icon--sun" aria-hidden="true">
+        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+          <path d="M8 12.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Zm0 1a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0-15a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0Zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13Zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5ZM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8Zm12.354-3.646a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0Zm-12.728 0a.5.5 0 0 1 .707 0l1.414 1.415a.5.5 0 1 1-.707.708L2.626 4.062a.5.5 0 0 1 0-.707ZM14.354 11.354a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0Zm-12.728 0a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 1 1-.707.707L2.626 10.646a.5.5 0 0 1 0-.707Z"/>
+        </svg>
+      </span>
     </span>
-    <span class="theme-icon auto" aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="10"/>
-        <path d="M12 2v10l4.5 4.5"/>
-      </svg>
-    </span>
-    <span class="theme-icon sun" aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="5"/>
-        <line x1="12" y1="1" x2="12" y2="3"/>
-        <line x1="12" y1="21" x2="12" y2="23"/>
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-        <line x1="1" y1="12" x2="3" y2="12"/>
-        <line x1="21" y1="12" x2="23" y2="12"/>
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-      </svg>
-    </span>
-    <span class="theme-slider"></span>
-  </button>
-</div>
+  </span>
+</button>
 
 <script>
-  (function() {
-    // Move theme toggle to body level to escape any stacking contexts
-    const container = document.querySelector('.theme-toggle-container');
-    if (container && container.parentElement !== document.body) {
-      document.body.appendChild(container);
-    }
-
+  (function () {
     const STORAGE_KEY = 'awesome-copilot-theme';
     const toggle = document.getElementById('theme-toggle');
     const html = document.documentElement;
+    const themes = ['dark', 'light'];
 
-    const themes = ['dark', 'auto', 'light'];
-    const icons = ['moon', 'auto', 'sun'];
+    function getSystemTheme() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
 
     function getThemeIndex() {
       const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored && themes.includes(stored)) {
-        return themes.indexOf(stored);
-      }
-      // Default to light theme
-      return 2;
+      if (stored === 'dark') return 0;
+      if (stored === 'light') return 1;
+      const system = getSystemTheme();
+      localStorage.setItem(STORAGE_KEY, system);
+      return system === 'dark' ? 0 : 1;
     }
 
-    function applyTheme(index: number) {
+    function applyTheme(index) {
       const theme = themes[index];
-      if (theme === 'auto') {
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        html.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
-      } else {
-        html.setAttribute('data-theme', theme);
-      }
-
-      // Move slider
-      const slider = toggle?.querySelector('.theme-slider') as HTMLElement;
-      if (slider) {
-        slider.style.transform = `translateX(${index * 100}%)`;
-      }
-
-      // Highlight active icon
-      const themeToggle = document.querySelector('.theme-toggle');
-      themeToggle?.setAttribute('data-active', String(index));
+      html.setAttribute('data-theme', theme);
+      localStorage.setItem('starlight-theme', theme);
+      toggle?.setAttribute('data-active', String(index));
+      toggle?.setAttribute('aria-pressed', String(index === 0));
     }
 
     function cycleTheme() {
-      const currentIndex = getThemeIndex();
-      const nextIndex = (currentIndex + 1) % themes.length;
-      localStorage.setItem(STORAGE_KEY, themes[nextIndex]);
+      const nextIndex = (getThemeIndex() + 1) % themes.length;
+      const theme = themes[nextIndex];
+      localStorage.setItem(STORAGE_KEY, theme);
       applyTheme(nextIndex);
     }
 
-    // Initialize
     applyTheme(getThemeIndex());
 
-    // Click handler
     toggle?.addEventListener('click', cycleTheme);
-
-    // Keyboard shortcut
     document.addEventListener('keydown', (e) => {
       if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'L') {
         e.preventDefault();
         cycleTheme();
       }
     });
-
-    // Listen for system theme changes
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-      if (localStorage.getItem(STORAGE_KEY) === 'auto') {
-        applyTheme(1); // auto
-      }
-    });
   })();
 </script>
 
 <style is:global>
-  .theme-toggle-container {
-    display: flex;
-    align-items: center;
-  }
-
   .theme-toggle {
-    display: flex;
-    position: relative;
-    width: 108px;
-    height: 36px;
-    padding: 3px;
+    width: 44px;
+    height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
     border: 1px solid var(--color-border);
-    border-radius: 20px;
-    background: var(--color-bg-secondary);
+    border-radius: var(--border-radius);
+    color: var(--color-text-muted);
     cursor: pointer;
-    transition: all 0.2s ease;
-    overflow: hidden;
+    transition: border-color var(--transition), color var(--transition), background-color var(--transition);
+    position: relative;
   }
 
   .theme-toggle:hover {
     border-color: var(--color-accent);
+    color: var(--color-text-emphasis);
+    background: var(--color-bg-secondary);
   }
 
   .theme-toggle:focus-visible {
@@ -140,31 +103,71 @@
     outline-offset: 2px;
   }
 
-  .theme-icon {
+  .theme-toggle__track {
+    position: relative;
+    width: 20px;
+    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 30px;
-    border-radius: 16px;
-    color: var(--color-text-muted);
-    transition: all 0.2s ease;
-    z-index: 1;
-    font-weight: 400;
   }
 
-  .theme-icon.moon { color: #9898a6; }
-  .theme-icon.auto { color: #9898a6; }
-  .theme-icon.sun { color: #9898a6; }
+  .theme-toggle__thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform var(--transition-spring);
+  }
 
-  .theme-toggle[data-active="0"] .moon,
-  .theme-toggle[data-active="1"] .auto,
-  .theme-toggle[data-active="2"] .sun {
-    color: var(--color-text);
-    font-weight: 700;
+  .theme-toggle__icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity var(--transition), transform var(--transition-spring);
   }
 
-  .theme-slider {
-    display: none;
+  /* Default (dark) — show moon */
+  .theme-toggle__icon--sun {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.7);
+  }
+
+  .theme-toggle__icon--moon {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+
+  /* Light — show sun */
+  .theme-toggle[data-active="1"] .theme-toggle__icon--moon {
+    opacity: 0;
+    transform: rotate(90deg) scale(0.7);
+  }
+
+  .theme-toggle[data-active="1"] .theme-toggle__icon--sun {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .theme-toggle__thumb,
+    .theme-toggle__icon {
+      transition: none;
+    }
+  }
+
+  /* Header positioning */
+  .theme-toggle-container {
+    position: fixed !important;
+    top: 14px !important;
+    right: 80px !important;
+    z-index: 1001;
+  }
+
+  @media (max-width: 768px) {
+    .theme-toggle-container {
+      top: 10px !important;
+      right: 64px !important;
+    }
   }
 </style>
diff --git a/website/src/components/home/CommunityCTA.astro b/website/src/components/home/CommunityCTA.astro
new file mode 100644
index 000000000..12f56ac9e
--- /dev/null
+++ b/website/src/components/home/CommunityCTA.astro
@@ -0,0 +1,102 @@
+---
+import Icon from '../Icon.astro';
+
+const contributorsUrl = `${import.meta.env.BASE_URL}contributors/`;
+const contributeUrl = `${import.meta.env.BASE_URL}contribute/`;
+const githubUrl = 'https://github.com/github/awesome-copilot';
+---
+
+<section class="community-cta" aria-labelledby="community-heading">
+  <div class="container">
+    <div class="community-card glass-card reveal">
+      <div class="community-card-content">
+        <div class="community-card-text">
+          <h2 id="community-heading">Built by developers, for developers</h2>
+          <p>
+            Every agent, skill, and instruction here is community-tested. Add your own,
+            suggest an improvement, or explore the contributors who make this collection
+            possible.
+          </p>
+        </div>
+      </div>
+
+      <div class="community-card-actions">
+        <a href={contributeUrl} class="btn btn-primary">
+          Contribute
+          <Icon name="external" size={16} />
+        </a>
+        <a href={contributorsUrl} class="btn btn-secondary">
+          View contributors
+        </a>
+        <a href={githubUrl} class="btn btn-outline" target="_blank" rel="noopener">
+          Star on GitHub
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .community-cta {
+    padding: 80px 0;
+  }
+
+  .community-card {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+    padding: 2rem;
+  }
+
+  .community-card-content {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    flex: 1;
+    min-width: min(100%, 420px);
+  }
+
+  .community-card-text h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text-emphasis);
+    margin: 0 0 0.5rem;
+  }
+
+  .community-card-text p {
+    margin: 0;
+    color: var(--color-text-muted);
+    line-height: 1.6;
+    max-width: 60ch;
+  }
+
+  .community-card-actions {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 768px) {
+    .community-card {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .community-card-content {
+      align-items: center;
+      min-width: 100%;
+    }
+
+    .community-card-actions {
+      width: 100%;
+    }
+
+    .community-card-actions .btn {
+      flex: 1 1 auto;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/website/src/components/home/Hero.astro b/website/src/components/home/Hero.astro
new file mode 100644
index 000000000..39b26446d
--- /dev/null
+++ b/website/src/components/home/Hero.astro
@@ -0,0 +1,71 @@
+---
+import Icon from '../Icon.astro';
+import StatsRibbon from './StatsRibbon.astro';
+import type { Stat } from './StatsRibbon.astro';
+
+interface Props {
+  stats: Stat[];
+}
+
+const { stats } = Astro.props;
+const base = import.meta.env.BASE_URL;
+const githubUrl = 'https://github.com/github/awesome-copilot';
+---
+
+<section class="hero" aria-labelledby="hero-heading">
+  <div class="container">
+    <p class="hero-eyebrow reveal">The Copilot customization community</p>
+    <h1 id="hero-heading" class="hero-title reveal">
+      <span class="hero-title--gradient">Supercharge</span> GitHub Copilot for the way you work
+    </h1>
+    <p class="hero-subtitle reveal">
+      A community-curated library of agents, instructions, skills, and plugins.
+      Search hundreds of resources, install in one command, or drop reusable
+      guidance into your repo.
+    </p>
+
+    <div class="hero-search reveal" role="search" aria-label="Search resources">
+      <div class="search-row">
+        <input
+          type="text"
+          id="hero-search-input"
+          placeholder="Search agents, skills, instructions..."
+          aria-label="Search resources"
+          autocomplete="off"
+        />
+        <span class="search-shortcut" aria-hidden="true">
+          <kbd>/</kbd>
+        </span>
+      </div>
+      <div
+        id="hero-search-results"
+        class="search-results hidden"
+        aria-live="polite"
+      >
+      </div>
+    </div>
+
+    <div class="hero-actions reveal">
+      <a href="#browse-resources" class="btn btn-primary">
+        Browse all resources
+      </a>
+      <a href={`${base}how-to-use/`} class="btn btn-secondary">
+        How it works
+      </a>
+      <a
+        href={githubUrl}
+        class="btn btn-outline"
+        target="_blank"
+        rel="noopener"
+      >
+        Star on GitHub
+      </a>
+    </div>
+
+    <p class="hero-micro reveal">
+      No setup required — Awesome Copilot is already registered as a default marketplace.
+    </p>
+
+    <StatsRibbon stats={stats} />
+  </div>
+</section>
diff --git a/website/src/components/home/HomeCategoryCard.astro b/website/src/components/home/HomeCategoryCard.astro
new file mode 100644
index 000000000..6bb8c9ecb
--- /dev/null
+++ b/website/src/components/home/HomeCategoryCard.astro
@@ -0,0 +1,43 @@
+---
+import Icon from '../Icon.astro';
+
+export interface Props {
+  id: string;
+  icon: 'robot' | 'document' | 'lightning' | 'hook' | 'workflow' | 'plug' | 'wrench' | 'book';
+  title: string;
+  description: string;
+  path: string;
+  accentClass: string;
+  countKey?: string;
+  delay?: string;
+}
+
+const { id, icon, title, description, path, accentClass, countKey, delay = '0ms' } = Astro.props;
+const base = import.meta.env.BASE_URL;
+const href = `${base}${path}`;
+const hasCount = countKey !== undefined;
+---
+
+<a
+  href={href}
+  class={`card card--shimmer card--glow card--spotlight ${hasCount ? 'card-with-count' : ''} ${accentClass}`}
+  id={`card-${id}`}
+  style={`--animation-delay: ${delay};`}
+>
+  <div class="card-icon" aria-hidden="true">
+    <Icon name={icon} size={40} />
+  </div>
+  <div class="card-content">
+    <h3>{title}</h3>
+    <p>{description}</p>
+  </div>
+  {hasCount && (
+    <div
+      class="card-count"
+      data-count={countKey}
+      aria-label={`${title} count`}
+    >
+      -
+    </div>
+  )}
+</a>
diff --git a/website/src/components/home/HowItWorks.astro b/website/src/components/home/HowItWorks.astro
new file mode 100644
index 000000000..6a621f08f
--- /dev/null
+++ b/website/src/components/home/HowItWorks.astro
@@ -0,0 +1,65 @@
+---
+import Icon from '../Icon.astro';
+
+const base = import.meta.env.BASE_URL;
+
+const steps = [
+  {
+    title: 'Find',
+    description: 'Search across every resource by technology, task, or workflow.',
+    icon: 'search' as const,
+  },
+  {
+    title: 'Install',
+    description: 'Add a plugin with one command, or drop instructions into your repo.',
+    icon: 'download' as const,
+  },
+  {
+    title: 'Ship',
+    description: 'Invoke agents and skills so Copilot follows your project standards.',
+    icon: 'external' as const,
+  },
+];
+---
+
+<section class="how-it-works" aria-labelledby="how-it-works-heading">
+  <div class="container">
+    <div class="how-it-works-header reveal">
+      <h2 id="how-it-works-heading">How it works</h2>
+      <p>
+        Get from discovery to delivery in three steps. Everything in the collection is
+        designed to be copied, installed, or invoked without heavy setup.
+      </p>
+    </div>
+
+    <div class="commit-history reveal-stagger" role="list">
+      <div class="commit-history__line" aria-hidden="true"></div>
+      {
+        steps.map((step, index) => (
+          <article class="commit-entry reveal" style={`--animation-delay: ${index * 120}ms;`} role="listitem">
+            <div class="commit-entry__avatar" aria-hidden="true">
+              <span class="commit-entry__dot"></span>
+              <span class="commit-entry__icon">
+                <Icon name={step.icon} size={18} />
+              </span>
+            </div>
+            <div class="commit-entry__body glass-card">
+              <div class="commit-entry__header">
+                <h3>{step.title}</h3>
+                <span class="commit-entry__hash" aria-hidden="true">{String(index + 1).padStart(2, '0')}</span>
+              </div>
+              <p>{step.description}</p>
+            </div>
+          </article>
+        ))
+      }
+    </div>
+
+    <div class="how-it-works-footer reveal">
+      <a href={`${base}how-to-use/`} class="btn btn-secondary">
+        Read the full guide
+        <Icon name="external" size={16} />
+      </a>
+    </div>
+  </div>
+</section>
diff --git a/website/src/components/home/InstallCard.astro b/website/src/components/home/InstallCard.astro
new file mode 100644
index 000000000..a21c59ff6
--- /dev/null
+++ b/website/src/components/home/InstallCard.astro
@@ -0,0 +1,160 @@
+---
+import Icon from '../Icon.astro';
+
+const base = import.meta.env.BASE_URL;
+---
+
+<section class="install-section" aria-labelledby="install-heading">
+  <div class="container">
+    <div class="install-card glass-card reveal">
+      <div class="install-card-content">
+        <div class="install-card-icon" aria-hidden="true">
+          <Icon name="plug" size={32} />
+        </div>
+        <div class="install-card-text">
+          <h2 id="install-heading">Install in seconds</h2>
+          <p>
+            The Awesome Copilot marketplace is already registered in the Copilot CLI and VS Code.
+            Install any plugin with a single command.
+          </p>
+        </div>
+      </div>
+
+      <div class="code-block" role="region" aria-label="Plugin install command">
+        <pre><code>copilot plugin install &lt;plugin-name&gt;@awesome-copilot</code></pre>
+        <button class="copy-btn" type="button" aria-label="Copy command">
+          <Icon name="copy" size={16} class="copy-icon" />
+        </button>
+      </div>
+
+      <div class="install-card-actions">
+        <a href={`${base}plugins/`} class="btn btn-primary">
+          Browse plugins
+          <Icon name="external" size={16} />
+        </a>
+        <a href={`${base}how-to-use/`} class="btn btn-secondary">
+          More install options
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    document.querySelectorAll('.install-section .copy-btn').forEach((button) => {
+      button.addEventListener('click', () => {
+        const code = button.parentElement?.querySelector('code')?.textContent ?? '';
+        navigator.clipboard?.writeText(code);
+        const icon = button.querySelector('.copy-icon');
+        if (!icon) return;
+        const original = icon.innerHTML;
+        icon.innerHTML = '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>';
+        setTimeout(() => {
+          icon.innerHTML = original;
+        }, 1500);
+      });
+    });
+  </script>
+
+  <style>
+    .install-section {
+      padding: 80px 0;
+    }
+
+    .install-card {
+      display: flex;
+      flex-direction: column;
+      gap: 1.5rem;
+      padding: 2rem;
+    }
+
+    .install-card-content {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .install-card-icon {
+      flex-shrink: 0;
+      width: 56px;
+      height: 56px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--border-radius);
+      background: var(--gradient-accent);
+      color: #fff;
+      margin-top: 0.25rem;
+    }
+
+    .install-card-text h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 0.5rem;
+    }
+
+    .install-card-text p {
+      margin: 0;
+      color: var(--color-text-muted);
+      line-height: 1.6;
+      max-width: 64ch;
+    }
+
+    .code-block {
+      position: relative;
+      background: var(--color-bg-tertiary);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius);
+      padding: 1rem 3rem 1rem 1rem;
+      overflow-x: auto;
+    }
+
+    .code-block pre {
+      margin: 0;
+      font-family: var(--font-mono);
+      font-size: 0.95rem;
+      color: var(--color-text);
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      cursor: pointer;
+      transition: all var(--transition);
+    }
+
+    .copy-btn:hover {
+      border-color: var(--color-accent);
+      color: var(--color-text-emphasis);
+      background: var(--color-bg-secondary);
+    }
+
+    .install-card-actions {
+      display: flex;
+      gap: 0.75rem;
+      flex-wrap: wrap;
+    }
+
+    @media (max-width: 480px) {
+      .install-card-content {
+        flex-direction: column;
+      }
+
+      .install-card-actions .btn {
+        flex: 1 1 auto;
+        justify-content: center;
+      }
+    }
+  </style>
+</section>
diff --git a/website/src/components/home/QuickLinks.astro b/website/src/components/home/QuickLinks.astro
new file mode 100644
index 000000000..a075fa363
--- /dev/null
+++ b/website/src/components/home/QuickLinks.astro
@@ -0,0 +1,46 @@
+---
+import HomeCategoryCard from './HomeCategoryCard.astro';
+import type { Props as CardProps } from './HomeCategoryCard.astro';
+
+type CategoryItem = Omit<CardProps, 'delay'>;
+
+export interface CategoryGroup {
+  title: string;
+  description?: string;
+  items: CategoryItem[];
+}
+
+export interface Props {
+  title?: string;
+  categories: CategoryGroup[];
+}
+
+const { title = 'Browse Resources', categories } = Astro.props;
+---
+
+<section class="quick-links" aria-labelledby="quick-links-heading" id="browse-resources">
+  <div class="container">
+    <h2 id="quick-links-heading" class="sr-only">{title}</h2>
+
+    {
+      categories.map((group, groupIndex) => (
+        <div class="category-cluster reveal">
+          <div class="category-cluster__header">
+            <h3 class="category-cluster__title">{group.title}</h3>
+            {group.description && (
+              <p class="category-cluster__description">{group.description}</p>
+            )}
+          </div>
+          <div class="cards-grid cards-grid--compact reveal-stagger">
+            {group.items.map((item, itemIndex) => (
+              <HomeCategoryCard
+                {...item}
+                delay={`${groupIndex * 150 + itemIndex * 60}ms`}
+              />
+            ))}
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</section>
diff --git a/website/src/components/home/StatsRibbon.astro b/website/src/components/home/StatsRibbon.astro
new file mode 100644
index 000000000..358bb8fc5
--- /dev/null
+++ b/website/src/components/home/StatsRibbon.astro
@@ -0,0 +1,24 @@
+---
+export interface Stat {
+  label: string;
+  key: string;
+}
+
+export interface Props {
+  stats: Stat[];
+}
+
+const { stats } = Astro.props;
+---
+
+<p class="hero-stats" aria-label="Collection stats" id="stats-ribbon">
+  {
+    stats.map((stat, index) => (
+      <span class="hero-stat">
+        <span class="hero-stat-value" data-stat={stat.key} aria-label={`${stat.label} count`}>0</span>{" "}
+        <span class="hero-stat-label">{stat.label}</span>
+        {index < stats.length - 1 && <span class="hero-stat-separator" aria-hidden="true">·</span>}
+      </span>
+    ))
+  }
+</p>
diff --git a/website/src/content/docs/learning-hub/cli-for-beginners/03-development-workflows.md b/website/src/content/docs/learning-hub/cli-for-beginners/03-development-workflows.md
index 8d73b40fe..3667f10b0 100644
--- a/website/src/content/docs/learning-hub/cli-for-beginners/03-development-workflows.md
+++ b/website/src/content/docs/learning-hub/cli-for-beginners/03-development-workflows.md
@@ -844,7 +844,7 @@ copilot
 
 The exercise shows developers how to use GitHub Copilot CLI to create issues, generate code, and collaborate from the terminal while building a Node.js calculator app. You'll install the CLI, use templates and agents, and practice iterative, command-line driven development.
 
-##### <img src="/images/learning-hub/copilot-cli-for-beginners/03/github-skills-logo.png" width="28" align="center" /> [Start the "Create applications with the Copilot CLI" Skills Exercise](https://github.com/skills/create-applications-with-the-copilot-cli)
+##### <img src="/images/learning-hub/copilot-cli-for-beginners/03/github-skills-logo.png" width="28" align="center" alt="GitHub Skills logo" /> [Start the "Create applications with the Copilot CLI" Skills Exercise](https://github.com/skills/create-applications-with-the-copilot-cli)
 
 ---
 
diff --git a/website/src/pages/contribute.astro b/website/src/pages/contribute.astro
new file mode 100644
index 000000000..84bd1a9c6
--- /dev/null
+++ b/website/src/pages/contribute.astro
@@ -0,0 +1,384 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import Icon from '../components/Icon.astro';
+import PageHeader from '../components/PageHeader.astro';
+import BackToTop from '../components/BackToTop.astro';
+
+const contributingUrl = 'https://github.com/github/awesome-copilot/blob/main/CONTRIBUTING.md';
+const newIssueUrl = 'https://github.com/github/awesome-copilot/issues/new';
+
+const contributionTypes = [
+  {
+    title: 'Instructions',
+    desc: 'Add a .md file in the instructions/ directory with clear, specific guidance for a technology or practice.',
+    icon: 'document',
+    link: `${import.meta.env.BASE_URL}instructions/`,
+  },
+  {
+    title: 'Agents',
+    desc: 'Add a .agent.md file in the agents/ directory. Define the persona, expertise, and guidelines in the frontmatter.',
+    icon: 'robot',
+    link: `${import.meta.env.BASE_URL}agents/`,
+  },
+  {
+    title: 'Skills',
+    desc: 'Create a self-contained folder under skills/ with a SKILL.md file and optional bundled assets.',
+    icon: 'lightning',
+    link: `${import.meta.env.BASE_URL}skills/`,
+  },
+  {
+    title: 'Plugins',
+    desc: 'Group related agents, commands, and skills into a plugin. Scaffold with npm run plugin:create.',
+    icon: 'plug',
+    link: `${import.meta.env.BASE_URL}plugins/`,
+  },
+  {
+    title: 'Hooks',
+    desc: 'Add automated actions that run during Copilot agent sessions.',
+    icon: 'hook',
+    link: `${import.meta.env.BASE_URL}hooks/`,
+  },
+  {
+    title: 'Workflows',
+    desc: 'Create AI-powered GitHub Actions automations written in markdown.',
+    icon: 'workflow',
+    link: `${import.meta.env.BASE_URL}workflows/`,
+  },
+];
+
+const qualityGuidelines = [
+  'Be specific — generic instructions are less useful than targeted guidance.',
+  'Test your content with GitHub Copilot before submitting.',
+  'Follow existing file naming and frontmatter conventions.',
+  'Keep each file focused on one technology, framework, or workflow.',
+  'Write clearly and promote secure, maintainable, ethical practices.',
+];
+
+const whatWeReject = [
+  'Content that violates Responsible AI principles or platform policies.',
+  'Instructions that bypass security, exploit vulnerabilities, or enable malicious activity.',
+  'Generic prompts without a clear gap or domain-specific uplift.',
+  'Unreviewed additions to plugins/external.json — external plugins go through the review workflow.',
+];
+---
+
+<StarlightPage
+  frontmatter={{
+    title: 'Contribute',
+    description: 'Help grow the Awesome GitHub Copilot community by contributing agents, instructions, skills, plugins, hooks, and workflows.',
+    template: 'splash',
+    prev: false,
+    next: false,
+    editUrl: false,
+  }}
+>
+  <div id="main-content">
+    <PageHeader
+      title="Contribute"
+      description="Awesome GitHub Copilot is community-curated. Share what you have built so other developers can ship faster."
+      icon="plus"
+    />
+
+    <section class="page-content" aria-labelledby="cta-heading">
+      <div class="container">
+        <div class="contribute-hero glass-card">
+          <div class="contribute-hero-content">
+            <h2 id="cta-heading">Ready to share your work?</h2>
+            <p>
+              Read the contribution guide, open a pull request, or start a discussion. Every contribution — from a single instruction to a full plugin — makes the collection more useful.
+            </p>
+          </div>
+          <div class="contribute-hero-actions">
+            <a href={contributingUrl} class="btn btn-primary" target="_blank" rel="noopener">
+              Read CONTRIBUTING.md
+              <Icon name="external" size={16} />
+            </a>
+            <a href={newIssueUrl} class="btn btn-secondary" target="_blank" rel="noopener">
+              Open an issue
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content" aria-labelledby="types-heading">
+      <div class="container">
+        <h2 id="types-heading" class="section-title">What you can contribute</h2>
+        <div class="contribution-grid">
+          {
+            contributionTypes.map((type, index) => (
+              <a
+                href={type.link}
+                class="contribution-card glass-card"
+                style={`--animation-delay: ${index * 70}ms;`}
+              >
+                <span class="contribution-icon" aria-hidden="true">
+                  <Icon name={type.icon as any} size={28} />
+                </span>
+                <h3>{type.title}</h3>
+                <p>{type.desc}</p>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content" aria-labelledby="guidelines-heading">
+      <div class="container">
+        <div class="guidelines-grid">
+          <div class="guidelines-panel glass-card">
+            <h2 id="guidelines-heading">Quality guidelines</h2>
+            <ul>
+              {qualityGuidelines.map((item) => (
+                <li>
+                  <span aria-hidden="true">✓</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div class="guidelines-panel glass-card guidelines-panel-warn">
+            <h2>What we do not accept</h2>
+            <ul>
+              {whatWeReject.map((item) => (
+                <li>
+                  <span aria-hidden="true">×</span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content page-content-final" aria-labelledby="submit-heading">
+      <div class="container">
+        <div class="submit-panel glass-card">
+          <h2 id="submit-heading">Submitting your contribution</h2>
+          <ol class="submit-steps">
+            <li>
+              <strong>Fork the repository</strong> and create a feature branch from the latest main.
+            </li>
+            <li>
+              <strong>Add your resource</strong> following the directory and naming conventions for the resource type.
+            </li>
+            <li>
+              <strong>Validate</strong> with the relevant npm script (e.g. <code>npm run skill:validate</code> or <code>npm run plugin:validate</code>).
+            </li>
+            <li>
+              <strong>Run the build</strong> with <code>npm run build</code> to regenerate README tables and website data.
+            </li>
+            <li>
+              <strong>Open a pull request</strong> with a clear description of what your resource does and why it helps.
+            </li>
+          </ol>
+          <div class="submit-actions">
+            <a href={contributingUrl} class="btn btn-primary" target="_blank" rel="noopener">
+              View full guide
+              <Icon name="external" size={16} />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <BackToTop />
+
+  <style>
+    .contribute-hero {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2rem;
+      padding: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    .contribute-hero h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 0.5rem;
+    }
+
+    .contribute-hero p {
+      margin: 0;
+      color: var(--color-text-muted);
+      line-height: 1.6;
+      max-width: 56ch;
+    }
+
+    .contribute-hero-actions {
+      display: flex;
+      gap: 0.75rem;
+      flex-shrink: 0;
+    }
+
+    .section-title {
+      font-size: clamp(1.5rem, 3vw, 1.875rem);
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin-bottom: 1.5rem;
+    }
+
+    .contribution-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 4rem;
+    }
+
+    .contribution-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 1.5rem;
+      color: inherit;
+      text-decoration: none;
+      opacity: 0;
+      animation: card-enter 0.5s var(--ease-out-expo) forwards;
+      animation-delay: var(--animation-delay, 0ms);
+    }
+
+    .contribution-icon {
+      color: var(--color-accent);
+    }
+
+    .contribution-card h3 {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0;
+    }
+
+    .contribution-card p {
+      margin: 0;
+      color: var(--color-text-muted);
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+
+    .guidelines-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 4rem;
+    }
+
+    .guidelines-panel {
+      padding: 1.5rem;
+    }
+
+    .guidelines-panel h2 {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 1rem;
+    }
+
+    .guidelines-panel ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .guidelines-panel li {
+      display: flex;
+      gap: 0.75rem;
+      align-items: flex-start;
+      color: var(--color-text-muted);
+      line-height: 1.5;
+    }
+
+    .guidelines-panel li span {
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--border-radius-full);
+      font-weight: 700;
+      font-size: 0.75rem;
+    }
+
+    .guidelines-panel:not(.guidelines-panel-warn) li span {
+      background: rgba(16, 185, 129, 0.15);
+      color: #10b981;
+    }
+
+    .guidelines-panel-warn li span {
+      background: rgba(197, 50, 17, 0.15);
+      color: #ef4444;
+    }
+
+    .submit-panel {
+      padding: 2rem;
+      margin-bottom: 4rem;
+    }
+
+    .submit-panel h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 1rem;
+    }
+
+    .submit-steps {
+      margin: 0 0 1.5rem;
+      padding-left: 1.25rem;
+      color: var(--color-text-muted);
+      line-height: 1.7;
+    }
+
+    .submit-steps li {
+      margin-bottom: 0.75rem;
+    }
+
+    .submit-steps code {
+      font-family: var(--font-mono);
+      background: var(--color-bg-tertiary);
+      padding: 0.15em 0.35em;
+      border-radius: var(--border-radius-xs);
+    }
+
+    .submit-actions {
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    .page-content-final {
+      padding-bottom: 4rem;
+    }
+
+    @media (max-width: 768px) {
+      .contribute-hero {
+        flex-direction: column;
+        text-align: center;
+      }
+
+      .contribute-hero-actions {
+        width: 100%;
+        flex-direction: column;
+      }
+
+      .contribute-hero-actions .btn {
+        justify-content: center;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .contribution-card {
+        animation: none;
+        opacity: 1;
+      }
+    }
+  </style>
+</StarlightPage>
diff --git a/website/src/pages/how-to-use.astro b/website/src/pages/how-to-use.astro
new file mode 100644
index 000000000..832239ac1
--- /dev/null
+++ b/website/src/pages/how-to-use.astro
@@ -0,0 +1,367 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import Icon from '../components/Icon.astro';
+import PageHeader from '../components/PageHeader.astro';
+import BackToTop from '../components/BackToTop.astro';
+
+const base = import.meta.env.BASE_URL;
+
+const steps = [
+  {
+    title: 'Browse the collection',
+    body: 'Start on the home page, search across every resource, or jump straight to a category. Each listing has filters and full-text search built in.',
+    icon: 'search',
+  },
+  {
+    title: 'Pick a plugin for instant power-ups',
+    body: 'Plugins bundle agents, skills, and commands for a specific workflow. Most users can install one directly from the Copilot CLI/VS Code marketplace.',
+    icon: 'plug',
+  },
+  {
+    title: 'Add instructions to your project',
+    body: 'Instructions customize Copilot for a technology or coding standard. Drop them in your repo, reference them by file pattern, and Copilot picks them up automatically.',
+    icon: 'document',
+  },
+  {
+    title: 'Invoke agents and skills',
+    body: 'Agents turn Copilot Chat into a domain specialist. Skills package reusable context and prompts. Use them together for complex, multi-step tasks.',
+    icon: 'robot',
+  },
+  {
+    title: 'Automate with hooks and workflows',
+    body: 'Hooks run during Copilot agent sessions. Agentic workflows turn markdown into GitHub Actions automations. Wire them up once, then let them run.',
+    icon: 'workflow',
+  },
+  {
+    title: 'Connect tools and MCP servers',
+    body: 'Extend Copilot with external tools, MCP servers, and editor integrations listed in the Tools section.',
+    icon: 'wrench',
+  },
+];
+
+const resourceTypes = [
+  { label: 'Agents', href: `${base}agents/`, icon: 'robot', desc: 'Specialized Copilot personas' },
+  { label: 'Instructions', href: `${base}instructions/`, icon: 'document', desc: 'Coding standards by file pattern' },
+  { label: 'Skills', href: `${base}skills/`, icon: 'lightning', desc: 'Reusable folders of prompts and assets' },
+  { label: 'Plugins', href: `${base}plugins/`, icon: 'plug', desc: 'Curated bundles for the Copilot CLI' },
+  { label: 'Hooks', href: `${base}hooks/`, icon: 'hook', desc: 'Session lifecycle automations' },
+  { label: 'Workflows', href: `${base}workflows/`, icon: 'workflow', desc: 'AI-powered GitHub Actions' },
+  { label: 'Canvas Extensions', href: `${base}extensions/`, icon: 'plug', desc: 'Interactive canvas add-ons' },
+  { label: 'Tools', href: `${base}tools/`, icon: 'wrench', desc: 'MCP servers and integrations' },
+];
+---
+
+<StarlightPage
+  frontmatter={{
+    title: 'How to Use',
+    description: 'Get the most out of Awesome GitHub Copilot — browse resources, install plugins, apply instructions, and automate your workflow.',
+    template: 'splash',
+    prev: false,
+    next: false,
+    editUrl: false,
+  }}
+>
+  <div id="main-content">
+    <PageHeader
+      title="How to Use"
+      description="A short guide to turning the Awesome GitHub Copilot collection into a productivity engine for your projects."
+      icon="book"
+    />
+
+    <section class="page-content" aria-labelledby="steps-heading">
+      <div class="container">
+        <h2 id="steps-heading" class="section-title">Get started in six steps</h2>
+        <div class="steps-grid">
+          {
+            steps.map((step, index) => (
+              <article class="step-card glass-card" style={`--animation-delay: ${index * 80}ms;`}>
+                <div class="step-number" aria-hidden="true">
+                  {index + 1}
+                </div>
+                <div class="step-body">
+                  <div class="step-icon" aria-hidden="true">
+                    <Icon name={step.icon as any} size={24} />
+                  </div>
+                  <h3>{step.title}</h3>
+                  <p>{step.body}</p>
+                </div>
+              </article>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content" aria-labelledby="resources-heading">
+      <div class="container">
+        <h2 id="resources-heading" class="section-title">Explore resource types</h2>
+        <div class="resource-type-grid">
+          {
+            resourceTypes.map((type, index) => (
+              <a
+                href={type.href}
+                class="resource-type-card glass-card"
+                style={`--animation-delay: ${index * 60}ms;`}
+              >
+                <span class="resource-type-icon" aria-hidden="true">
+                  <Icon name={type.icon as any} size={28} />
+                </span>
+                <span class="resource-type-label">{type.label}</span>
+                <span class="resource-type-desc">{type.desc}</span>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content" aria-labelledby="install-heading">
+      <div class="container">
+        <div class="install-panel glass-card">
+          <h2 id="install-heading" class="install-title">Install a plugin from the command line</h2>
+          <p class="install-description">
+            The Awesome Copilot marketplace is already registered in the Copilot CLI and VS Code, so most plugins install in one command:
+          </p>
+          <div class="code-block" role="region" aria-label="Plugin install command">
+            <pre><code>copilot plugin install &lt;plugin-name&gt;@awesome-copilot</code></pre>
+            <button class="copy-btn" type="button" aria-label="Copy command">
+              <Icon name="copy" size={16} />
+            </button>
+          </div>
+          <p class="install-note">
+            If your CLI does not recognize the marketplace, register it once with{' '}
+            <code>copilot plugin marketplace add github/awesome-copilot</code>.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section class="page-content page-content-final" aria-labelledby="learn-heading">
+      <div class="container">
+        <div class="learn-panel glass-card">
+          <div class="learn-content">
+            <h2 id="learn-heading">Level up with the Learning Hub</h2>
+            <p>
+              New to customization? The Learning Hub covers core concepts — agents, skills, instructions, hooks, MCP servers, agentic workflows, and the Copilot coding agent — in guided articles and tutorials.
+            </p>
+            <a href={`${base}learning-hub/`} class="btn btn-primary">
+              Open the Learning Hub
+              <Icon name="external" size={16} />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <BackToTop />
+
+  <script>
+    document.querySelectorAll('.code-block .copy-btn').forEach((button) => {
+      button.addEventListener('click', () => {
+        const code = button.parentElement?.querySelector('code')?.textContent ?? '';
+        navigator.clipboard?.writeText(code);
+        const icon = button.querySelector('svg');
+        if (!icon) return;
+        const original = icon.innerHTML;
+        icon.innerHTML = '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>';
+        setTimeout(() => {
+          icon.innerHTML = original;
+        }, 1500);
+      });
+    });
+  </script>
+
+  <style>
+    .section-title {
+      font-size: clamp(1.5rem, 3vw, 1.875rem);
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin-bottom: 1.5rem;
+    }
+
+    .steps-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 4rem;
+    }
+
+    .step-card {
+      display: flex;
+      gap: 1rem;
+      padding: 1.5rem;
+      text-align: left;
+      opacity: 0;
+      animation: card-enter 0.5s var(--ease-out-expo) forwards;
+      animation-delay: var(--animation-delay, 0ms);
+    }
+
+    .step-number {
+      flex-shrink: 0;
+      width: 2.25rem;
+      height: 2.25rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--border-radius-full);
+      background: var(--gradient-accent);
+      color: #fff;
+      font-weight: 700;
+      font-size: 0.875rem;
+    }
+
+    .step-icon {
+      color: var(--color-accent);
+      margin-bottom: 0.75rem;
+    }
+
+    .step-body h3 {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 0.5rem;
+    }
+
+    .step-body p {
+      margin: 0;
+      color: var(--color-text-muted);
+      line-height: 1.6;
+      font-size: 0.95rem;
+    }
+
+    .resource-type-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 1rem;
+      margin-bottom: 4rem;
+    }
+
+    .resource-type-card {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+      padding: 1.25rem;
+      color: inherit;
+      text-decoration: none;
+      opacity: 0;
+      animation: card-enter 0.5s var(--ease-out-expo) forwards;
+      animation-delay: var(--animation-delay, 0ms);
+    }
+
+    .resource-type-icon {
+      color: var(--color-accent);
+      margin-bottom: 0.5rem;
+    }
+
+    .resource-type-label {
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+    }
+
+    .resource-type-desc {
+      font-size: 0.875rem;
+      color: var(--color-text-muted);
+      line-height: 1.5;
+    }
+
+    .install-panel,
+    .learn-panel {
+      padding: 2rem;
+      margin-bottom: 4rem;
+    }
+
+    .install-title,
+    .learn-content h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-text-emphasis);
+      margin: 0 0 0.75rem;
+    }
+
+    .install-description,
+    .learn-content p {
+      color: var(--color-text-muted);
+      line-height: 1.6;
+      margin: 0 0 1.25rem;
+      max-width: 64ch;
+    }
+
+    .install-note {
+      font-size: 0.875rem;
+      color: var(--color-text-muted);
+      margin: 1rem 0 0;
+    }
+
+    .install-note code {
+      font-family: var(--font-mono);
+      background: var(--color-bg-tertiary);
+      padding: 0.15em 0.35em;
+      border-radius: var(--border-radius-xs);
+    }
+
+    .code-block {
+      position: relative;
+      background: var(--color-bg-tertiary);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius);
+      padding: 1rem 3rem 1rem 1rem;
+      overflow-x: auto;
+    }
+
+    .code-block pre {
+      margin: 0;
+      font-family: var(--font-mono);
+      font-size: 0.9rem;
+      color: var(--color-text);
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      color: var(--color-text-muted);
+      cursor: pointer;
+      transition: all var(--transition);
+    }
+
+    .copy-btn:hover {
+      border-color: var(--color-accent);
+      color: var(--color-text-emphasis);
+      background: var(--color-bg-secondary);
+    }
+
+    .learn-panel {
+      background: var(--gradient-accent);
+      color: #fff;
+      border-color: transparent;
+    }
+
+    .learn-panel h2,
+    .learn-panel p {
+      color: #fff;
+    }
+
+    .page-content-final {
+      padding-bottom: 4rem;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .step-card,
+      .resource-type-card {
+        animation: none;
+        opacity: 1;
+      }
+    }
+  </style>
+</StarlightPage>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index e10427da6..175906f6a 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,10 +1,123 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import Modal from "../components/Modal.astro";
-import Icon from "../components/Icon.astro";
 import BackToTop from "../components/BackToTop.astro";
+import CommunityCTA from "../components/home/CommunityCTA.astro";
+import Hero from "../components/home/Hero.astro";
+import HowItWorks from "../components/home/HowItWorks.astro";
+import InstallCard from "../components/home/InstallCard.astro";
+import QuickLinks from "../components/home/QuickLinks.astro";
 
 const base = import.meta.env.BASE_URL;
+
+const categories = [
+  {
+    title: "Code smarter",
+    description: "Make Copilot write, review, and reason like a domain expert for your stack.",
+    items: [
+      {
+        id: "agents",
+        icon: "robot" as const,
+        title: "Agents",
+        description: "Specialized personas for complex domains — .NET, AWS, accessibility, security, and more.",
+        path: "agents/",
+        accentClass: "card-category-ai",
+        countKey: "agents",
+      },
+      {
+        id: "skills",
+        icon: "lightning" as const,
+        title: "Skills",
+        description: "Reusable folders of instructions and bundled assets for multi-step tasks.",
+        path: "skills/",
+        accentClass: "card-category-power",
+        countKey: "skills",
+      },
+      {
+        id: "instructions",
+        icon: "document" as const,
+        title: "Instructions",
+        description: "Coding standards and conventions applied automatically by file pattern.",
+        path: "instructions/",
+        accentClass: "card-category-docs",
+        countKey: "instructions",
+      },
+    ],
+  },
+  {
+    title: "Automate workflows",
+    description: "Orchestrate sessions, toolkits, and CI/CD with Copilot.",
+    items: [
+      {
+        id: "plugins",
+        icon: "plug" as const,
+        title: "Plugins",
+        description: "Curated bundles of agents, skills, and commands for the Copilot CLI.",
+        path: "plugins/",
+        accentClass: "card-category-extension",
+        countKey: "plugins",
+      },
+      {
+        id: "hooks",
+        icon: "hook" as const,
+        title: "Hooks",
+        description: "Actions triggered during Copilot agent session lifecycle.",
+        path: "hooks/",
+        accentClass: "card-category-automation",
+        countKey: "hooks",
+      },
+      {
+        id: "workflows",
+        icon: "workflow" as const,
+        title: "Workflows",
+        description: "Markdown-defined automations that run as GitHub Actions.",
+        path: "workflows/",
+        accentClass: "card-category-automation",
+        countKey: "workflows",
+      },
+    ],
+  },
+  {
+    title: "Extend and learn",
+    description: "Explore the ecosystem, tooling, and guided tutorials.",
+    items: [
+      {
+        id: "tools",
+        icon: "wrench" as const,
+        title: "Tools",
+        description: "MCP servers, editor integrations, and developer tooling.",
+        path: "tools/",
+        accentClass: "card-category-dev",
+        countKey: "tools",
+      },
+      {
+        id: "extensions",
+        icon: "plug" as const,
+        title: "Canvas Extensions",
+        description: "Interactive canvas add-ons for Copilot app experiences.",
+        path: "extensions/",
+        accentClass: "card-category-extension",
+        countKey: "extensions",
+      },
+      {
+        id: "learning-hub",
+        icon: "book" as const,
+        title: "Learning Hub",
+        description: "Guides and tutorials covering agents, skills, MCP servers, and agentic workflows.",
+        path: "learning-hub/",
+        accentClass: "card-category-learn",
+      },
+    ],
+  },
+];
+
+const stats = [
+  { label: "Resources", key: "total" },
+  { label: "Agents", key: "agents" },
+  { label: "Skills", key: "skills" },
+  { label: "Instructions", key: "instructions" },
+  { label: "Plugins", key: "plugins" },
+];
 ---
 
 <StarlightPage
@@ -30,206 +143,11 @@ const base = import.meta.env.BASE_URL;
   hasSidebar={false}
 >
   <div id="main-content">
-    <!-- Hero Section -->
-    <section class="hero" aria-labelledby="hero-heading">
-      <div class="container">
-        <h1 id="hero-heading">
-          <span class="gradient-text">Awesome GitHub Copilot</span>
-        </h1>
-        <p class="hero-subtitle">
-          Community-contributed agents, instructions, and skills to enhance your
-          GitHub Copilot experience
-        </p>
-        <p>
-          <a href="https://github.com/github/awesome-copilot/" target="_blank" rel="noopener noreferrer">
-            View the Awesome Copilot repository on GitHub
-          </a>
-        </p>
-      </div>
-    </section>
-
-    <!-- Quick Links -->
-    <section class="quick-links" aria-labelledby="quick-links-heading">
-      <h2 id="quick-links-heading" class="sr-only">Browse Resources</h2>
-      <div class="container">
-        <div class="cards-grid">
-          <a
-            href={`${base}agents/`}
-            class="card card-with-count card-category-ai"
-            id="card-agents"
-            style="--animation-delay: 0ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="robot" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Agents</h3>
-              <p>Custom agents for specialized Copilot experiences</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="agents"
-              aria-label="Agent count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}instructions/`}
-            class="card card-with-count card-category-docs"
-            id="card-instructions"
-            style="--animation-delay: 50ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="document" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Instructions</h3>
-              <p>Coding standards and best practices for Copilot</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="instructions"
-              aria-label="Instruction count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}skills/`}
-            class="card card-with-count card-category-power"
-            id="card-skills"
-            style="--animation-delay: 100ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="lightning" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Skills</h3>
-              <p>Self-contained folders with instructions and resources</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="skills"
-              aria-label="Skill count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}hooks/`}
-            class="card card-with-count card-category-automation"
-            id="card-hooks"
-            style="--animation-delay: 150ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="hook" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Hooks</h3>
-              <p>Automated workflows triggered by agent events</p>
-            </div>
-            <div class="card-count" data-count="hooks" aria-label="Hook count">
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}workflows/`}
-            class="card card-with-count card-category-automation"
-            id="card-workflows"
-            style="--animation-delay: 200ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="workflow" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Workflows</h3>
-              <p>AI-powered automations for GitHub Actions</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="workflows"
-              aria-label="Workflow count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}plugins/`}
-            class="card card-with-count card-category-extension"
-            id="card-plugins"
-            style="--animation-delay: 250ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="plug" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Plugins</h3>
-              <p>Curated plugins organized by themes</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="plugins"
-              aria-label="Plugin count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}extensions/`}
-            class="card card-with-count card-category-extension"
-            id="card-extensions"
-            style="--animation-delay: 300ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="plug" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Canvas Extensions</h3>
-              <p>Interactive canvas extensions for Copilot app experiences</p>
-            </div>
-            <div
-              class="card-count"
-              data-count="extensions"
-              aria-label="Extension count"
-            >
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}tools/`}
-            class="card card-with-count card-category-dev"
-            id="card-tools"
-            style="--animation-delay: 350ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="wrench" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Tools</h3>
-              <p>MCP servers and developer tools</p>
-            </div>
-            <div class="card-count" data-count="tools" aria-label="Tool count">
-              -
-            </div>
-          </a>
-          <a
-            href={`${base}learning-hub/`}
-            class="card card-with-count card-category-learn"
-            id="card-learning-hub"
-            style="--animation-delay: 400ms;"
-          >
-            <div class="card-icon" aria-hidden="true">
-              <Icon name="book" size={40} />
-            </div>
-            <div class="card-content">
-              <h3>Learning Hub</h3>
-              <p>Articles and guides to master GitHub Copilot</p>
-            </div>
-          </a>
-        </div>
-      </div>
-    </section>
+    <Hero stats={stats} />
+    <QuickLinks title="Browse Resources" categories={categories} />
+    <HowItWorks />
+    <InstallCard />
+    <CommunityCTA />
   </div>
 
   <Modal />
diff --git a/website/src/scripts/modal.ts b/website/src/scripts/modal.ts
index bfdabcdb6..4c339ca67 100644
--- a/website/src/scripts/modal.ts
+++ b/website/src/scripts/modal.ts
@@ -26,7 +26,7 @@ type ModalViewMode = "rendered" | "raw";
 let currentFilePath: string | null = null;
 let currentFileContent: string | null = null;
 let currentFileType: string | null = null;
-let currentViewMode: ModalViewMode = "raw";
+let currentViewMode: ModalViewMode = "rendered";
 let triggerElement: HTMLElement | null = null;
 let originalDocumentTitle: string | null = null;
 
@@ -896,7 +896,7 @@ export async function openFileModal(
 
   currentFilePath = filePath;
   currentFileType = type;
-  currentViewMode = "raw";
+  currentViewMode = "rendered";
 
   // Track trigger element for focus return
   triggerElement =
@@ -1288,7 +1288,7 @@ export function closeModal(updateUrl = true): void {
   currentFilePath = null;
   currentFileContent = null;
   currentFileType = null;
-  currentViewMode = "raw";
+  currentViewMode = "rendered";
   triggerElement = null;
   hideSkillFileSwitcher();
 }
diff --git a/website/src/scripts/pages/index.ts b/website/src/scripts/pages/index.ts
index 05aec935c..25801192e 100644
--- a/website/src/scripts/pages/index.ts
+++ b/website/src/scripts/pages/index.ts
@@ -1,7 +1,7 @@
 /**
  * Homepage functionality
  */
-import { fetchData } from "../utils";
+import { fetchData, getBasePath } from "../utils";
 
 interface Manifest {
   counts: {
@@ -16,6 +16,38 @@ interface Manifest {
   };
 }
 
+interface SearchItem {
+  type: string;
+  id: string;
+  title: string;
+  description: string;
+  path: string;
+  lastUpdated?: string;
+  searchText?: string;
+}
+
+const TYPE_TO_PAGE: Record<string, string> = {
+  agent: "agents",
+  instruction: "instructions",
+  skill: "skills",
+  hook: "hooks",
+  workflow: "workflows",
+  plugin: "plugins",
+  tool: "tools",
+  extension: "extensions",
+};
+
+const TYPE_ICON: Record<string, string> = {
+  agent: "robot",
+  instruction: "document",
+  skill: "lightning",
+  hook: "hook",
+  workflow: "workflow",
+  plugin: "plug",
+  tool: "wrench",
+  extension: "plug",
+};
+
 export async function initHomepage(): Promise<void> {
   // Load manifest for stats
   const manifest = await fetchData<Manifest>("manifest.json");
@@ -39,7 +71,254 @@ export async function initHomepage(): Promise<void> {
         countEl.textContent = manifest.counts[key].toString();
       }
     });
+
+    // Populate hero stats
+    populateStats(manifest.counts);
+  }
+
+  initHeroSearch();
+  initRevealAnimations();
+  initSpotlightCards();
+}
+
+function populateStats(counts: Manifest["counts"]): void {
+  const statValues = {
+    agents: counts.agents ?? 0,
+    instructions: counts.instructions ?? 0,
+    skills: counts.skills ?? 0,
+    hooks: counts.hooks ?? 0,
+    workflows: counts.workflows ?? 0,
+    plugins: counts.plugins ?? 0,
+    extensions: counts.extensions ?? 0,
+    tools: counts.tools ?? 0,
+    total:
+      (counts.agents ?? 0) +
+      (counts.instructions ?? 0) +
+      (counts.skills ?? 0) +
+      (counts.hooks ?? 0) +
+      (counts.workflows ?? 0) +
+      (counts.plugins ?? 0) +
+      (counts.extensions ?? 0) +
+      (counts.tools ?? 0),
+  };
+
+  document.querySelectorAll('.hero-stat-value[data-stat]').forEach((el) => {
+    const key = el.getAttribute('data-stat') as keyof typeof statValues;
+    if (!key || !(key in statValues)) return;
+    const target = statValues[key];
+    animateCount(el, target, { duration: 1200 });
+  });
+}
+
+function animateCount(
+  el: Element,
+  target: number,
+  options: { duration?: number; suffix?: string } = {}
+): void {
+  const { duration = 1200, suffix = '+' } = options;
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (prefersReducedMotion || target === 0) {
+    el.textContent = target > 0 ? `${target.toLocaleString()}${suffix}` : target.toLocaleString();
+    return;
+  }
+
+  const start = performance.now();
+  const format = (n: number) => `${Math.round(n).toLocaleString()}${suffix}`;
+
+  function step(now: number): void {
+    const progress = Math.min((now - start) / duration, 1);
+    // easeOutExpo
+    const eased = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+    const current = target * eased;
+    el.textContent = format(current);
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  }
+
+  requestAnimationFrame(step);
+}
+
+function initRevealAnimations(): void {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (prefersReducedMotion) {
+    document.querySelectorAll('.reveal').forEach((el) => el.classList.add('is-visible'));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries, obs) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          obs.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
+  );
+
+  document.querySelectorAll('.reveal').forEach((el, i) => {
+    const htmlEl = el as HTMLElement;
+    htmlEl.style.setProperty('--reveal-index', String(i % 6));
+    observer.observe(el);
+  });
+}
+
+function initSpotlightCards(): void {
+  // Only enable spotlight follow when fine pointer is available.
+  const hasFinePointer = window.matchMedia('(pointer: fine)').matches;
+  if (!hasFinePointer) return;
+
+  document.querySelectorAll('.card--spotlight, .glass-card--spotlight').forEach((card) => {
+    const htmlCard = card as HTMLElement;
+    htmlCard.addEventListener('pointermove', (e) => {
+      const rect = htmlCard.getBoundingClientRect();
+      htmlCard.style.setProperty('--spotlight-x', `${e.clientX - rect.left}px`);
+      htmlCard.style.setProperty('--spotlight-y', `${e.clientY - rect.top}px`);
+    });
+  });
+}
+
+function initHeroSearch(): void {
+  const input = document.getElementById("hero-search-input") as HTMLInputElement | null;
+  const resultsContainer = document.getElementById("hero-search-results");
+  if (!input || !resultsContainer) return;
+
+  let index: SearchItem[] = [];
+  let activeIndex = -1;
+
+  fetchData<SearchItem[]>("search-index.json").then((data) => {
+    if (data) index = data;
+  });
+
+  function escapeHtml(text: string): string {
+    return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function highlight(text: string, query: string): string {
+    if (!query) return escapeHtml(text);
+    const regex = new RegExp(`(${escapeRegExp(query)})`, "gi");
+    return escapeHtml(text).replace(regex, "<mark>$1</mark>");
+  }
+
+  function escapeRegExp(text: string): string {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  function renderResults(query: string): void {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery || index.length === 0) {
+      resultsContainer.classList.add("hidden");
+      resultsContainer.innerHTML = "";
+      activeIndex = -1;
+      return;
+    }
+
+    const matches = index
+      .filter((item) => {
+        const haystack = `${item.title} ${item.description} ${item.searchText ?? ""}`.toLowerCase();
+        return haystack.includes(normalizedQuery);
+      })
+      .slice(0, 5);
+
+    if (matches.length === 0) {
+      resultsContainer.innerHTML = `
+        <div class="search-result-empty">
+          <div class="search-result-empty-title">No results found</div>
+          <div class="search-result-empty-hint">Try a different keyword or browse the categories below.</div>
+        </div>`;
+      resultsContainer.classList.remove("hidden");
+      activeIndex = -1;
+      return;
+    }
+
+    resultsContainer.innerHTML = matches
+      .map((item, i) => {
+        const icon = TYPE_ICON[item.type] || "document";
+        const page = TYPE_TO_PAGE[item.type] || item.type;
+        const basePath = getBasePath();
+        const href = `${basePath}${page}/?file=${encodeURIComponent(item.path)}`;
+        return `
+          <a href="${escapeHtml(href)}" class="search-result" data-index="${i}" data-path="${escapeHtml(item.path)}" data-type="${escapeHtml(item.type)}">
+            <span class="search-result-type" data-icon="${icon}" aria-hidden="true"></span>
+            <span class="search-result-content">
+              <span class="search-result-title">${highlight(item.title, query)}</span>
+              <span class="search-result-description">${highlight(item.description, query)}</span>
+            </span>
+          </a>`;
+      })
+      .join("");
+
+    resultsContainer.classList.remove("hidden");
+    activeIndex = -1;
+
+    resultsContainer.querySelectorAll(".search-result").forEach((el) => {
+      el.addEventListener("click", (e) => {
+        const target = el as HTMLElement;
+        const path = target.dataset.path;
+        const type = target.dataset.type;
+        if (!path || !type) return;
+        e.preventDefault();
+        window.location.hash = `#file=${encodeURIComponent(path)}`;
+        resultsContainer.classList.add("hidden");
+        input.value = "";
+      });
+    });
   }
+
+  function updateActive(direction: number): void {
+    const items = Array.from(resultsContainer.querySelectorAll(".search-result"));
+    if (items.length === 0) return;
+    activeIndex = (activeIndex + direction + items.length) % items.length;
+    items.forEach((item, i) => {
+      item.classList.toggle("active", i === activeIndex);
+      if (i === activeIndex) item.scrollIntoView({ block: "nearest" });
+    });
+  }
+
+  input.addEventListener("input", () => renderResults(input.value));
+
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      resultsContainer.classList.add("hidden");
+      activeIndex = -1;
+      input.blur();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      updateActive(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      updateActive(-1);
+    } else if (e.key === "Enter") {
+      const items = resultsContainer.querySelectorAll(".search-result");
+      const selected = items[activeIndex] as HTMLElement | undefined;
+      const path = selected?.dataset.path;
+      if (path) {
+        window.location.hash = `#file=${encodeURIComponent(path)}`;
+        resultsContainer.classList.add("hidden");
+        input.value = "";
+      }
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!input.contains(e.target as Node) && !resultsContainer.contains(e.target as Node)) {
+      resultsContainer.classList.add("hidden");
+      activeIndex = -1;
+    }
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "/" && document.activeElement?.tagName !== "INPUT") {
+      e.preventDefault();
+      input.focus();
+    }
+  });
 }
 
 // Auto-initialize when DOM is ready
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index e6b7a1992..c707da699 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -43,20 +43,52 @@
   --color-card-hover: rgba(28, 28, 40, 0.9);
   --color-glass: rgba(255, 255, 255, 0.05);
   --color-glass-border: rgba(255, 255, 255, 0.1);
-  --gradient-primary: linear-gradient(180deg, #8534F3 0%, #B870FF 50%, #FE4C25 100%);
-  --gradient-accent: linear-gradient(135deg, #43179E 0%, #8534F3 100%);
-  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.25), transparent),
-                   radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.12), transparent),
-                   radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.12), transparent);
+
+  /* Big-tech fit-and-finish motion & shape tokens */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-enter: 400ms;
+
   --border-radius: 8px;
+  --border-radius-sm: 6px;
+  --border-radius-xs: 4px;
   --border-radius-lg: 16px;
   --border-radius-xl: 24px;
+  --border-radius-2xl: 32px;
+  --border-radius-full: 9999px;
+
+  /* Glass surfaces — use on static/sticky surfaces only; respect reduced motion */
+  --surface-glass: rgba(20, 20, 28, 0.72);
+  --surface-glass-border: rgba(255, 255, 255, 0.08);
+  --surface-backdrop: saturate(180%) blur(20px);
+
+  /* Layered shadow scale */
   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.16);
   --shadow-md: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
+  --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
   --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.5);
-  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Transitions */
+  --transition: var(--duration-base) var(--ease-out-expo);
+  --transition-slow: var(--duration-slow) var(--ease-out-expo);
+  --transition-spring: var(--duration-slow) var(--ease-spring);
+
+  --gradient-primary: linear-gradient(180deg, #8534F3 0%, #B870FF 50%, #FE4C25 100%);
+  --gradient-accent: linear-gradient(135deg, #43179E 0%, #8534F3 100%);
+  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.25), transparent),
+                   radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.12), transparent),
+                   radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.12), transparent);
+
+  --orb-purple: rgba(133, 52, 243, 0.16);
+  --orb-orange: rgba(254, 76, 37, 0.09);
+  --orb-violet: rgba(184, 112, 255, 0.10);
+
   --container-width: 1200px;
   --header-height: 72px;
   --font-mono: 'Monaspace Argon NF', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@@ -77,12 +109,26 @@
   --color-card-hover: rgba(255, 255, 255, 1);
   --color-glass: rgba(255, 255, 255, 0.85);
   --color-glass-border: rgba(0, 0, 0, 0.12);
-  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.18), transparent),
-                   radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.10), transparent),
-                   radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.10), transparent);
+
+  /* Glass surfaces */
+  --surface-glass: rgba(255, 255, 255, 0.72);
+  --surface-glass-border: rgba(0, 0, 0, 0.08);
+
+  /* Layered shadow scale */
   --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 12px 24px -10px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
+  --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.2);
   --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3);
+
+  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.18), transparent),
+                   radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.10), transparent),
+                   radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.10), transparent);
+
+  --orb-purple: rgba(133, 52, 243, 0.12);
+  --orb-orange: rgba(254, 76, 37, 0.07);
+  --orb-violet: rgba(184, 112, 255, 0.08);
 }
 
 /* Auto theme based on system preference */
@@ -101,12 +147,26 @@
     --color-card-hover: rgba(255, 255, 255, 1);
     --color-glass: rgba(255, 255, 255, 0.85);
     --color-glass-border: rgba(0, 0, 0, 0.12);
-    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.18), transparent),
-                     radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.10), transparent),
-                     radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.10), transparent);
+
+    /* Glass surfaces */
+    --surface-glass: rgba(255, 255, 255, 0.72);
+    --surface-glass-border: rgba(0, 0, 0, 0.08);
+
+    /* Layered shadow scale */
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 12px 24px -10px rgba(0, 0, 0, 0.12);
     --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
+    --shadow-float: 0 24px 48px -16px rgba(0, 0, 0, 0.2);
     --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3);
+
+    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.18), transparent),
+                     radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.10), transparent),
+                     radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.10), transparent);
+
+    --orb-purple: rgba(133, 52, 243, 0.12);
+    --orb-orange: rgba(254, 76, 37, 0.07);
+    --orb-violet: rgba(184, 112, 255, 0.08);
   }
 }
 
@@ -274,7 +334,6 @@ body:has(#main-content) {
   color: var(--color-text-muted);
 }
 
-/* Search row with GitHub button */
 .search-row {
   display: flex;
   gap: 8px;
@@ -284,39 +343,163 @@ body:has(#main-content) {
   flex: 1;
 }
 
-.github-btn {
+@media (max-width: 480px) {
+  .search-row {
+    flex-direction: column;
+  }
+}
+
+/* Hero refined layout & entrance animations */
+.hero {
+  padding: clamp(48px, 10vh, 96px) 0 clamp(32px, 6vh, 64px);
+}
+
+.hero .container {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.hero-eyebrow {
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 0 16px;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
-  color: var(--color-text);
-  font-size: 14px;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: all 0.15s ease;
+  padding: 6px 12px;
+  background: var(--color-glass);
+  border: 1px solid var(--color-glass-border);
+  border-radius: var(--border-radius-full);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  animation: hero-fade-in 0.6s var(--ease-out-expo) both;
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 7vw, 4rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  margin: 0;
+  animation: hero-fade-in 0.6s var(--ease-out-expo) 0.05s both;
+}
+
+.hero-subtitle {
+  font-size: clamp(1rem, 2.4vw, 1.25rem);
+  color: var(--color-text-muted);
+  max-width: 46ch;
+  margin: 0;
+  line-height: 1.6;
+  animation: hero-fade-in 0.6s var(--ease-out-expo) 0.1s both;
+}
+
+.hero-search {
+  width: min(100%, 640px);
+  margin: 12px auto 0;
+  animation: hero-fade-in 0.6s var(--ease-out-expo) 0.15s both;
+}
+
+.hero-search .search-row {
+  position: relative;
+  border-radius: var(--border-radius-lg);
+  background: var(--surface-glass);
+  backdrop-filter: var(--surface-backdrop);
+  border: 1px solid var(--surface-glass-border);
+  box-shadow: var(--shadow-md);
+  transition: box-shadow var(--transition), border-color var(--transition);
 }
 
-.github-btn:hover {
+.hero-search .search-row:focus-within {
   border-color: var(--color-accent);
+  box-shadow: var(--shadow-glow), var(--shadow-md);
+}
+
+.hero-search input {
+  width: 100%;
+  padding: 18px 22px;
+  padding-right: 64px;
+  font-size: 16px;
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius-lg);
+  color: var(--color-text);
+  transition: none;
+}
+
+.hero-search input:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.hero-search input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.hero-search .search-shortcut {
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-sm);
+  font-size: 12px;
+  color: var(--color-text-muted);
+  pointer-events: none;
+  transition: opacity var(--transition);
+}
+
+.hero-search .search-shortcut kbd {
+  font-family: inherit;
+  font-weight: 600;
   color: var(--color-text);
 }
 
-.github-btn svg {
+.hero-search input:focus ~ .search-shortcut,
+.hero-search input:not(:placeholder-shown) ~ .search-shortcut {
+  opacity: 0;
+}
+
+.hero-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  animation: hero-fade-in 0.6s var(--ease-out-expo) 0.2s both;
+}
+
+.btn-icon-right {
   flex-shrink: 0;
 }
 
-@media (max-width: 480px) {
-  .search-row {
-    flex-direction: column;
+@keyframes hero-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
+}
 
-  .github-btn {
-    justify-content: center;
-    padding: 12px 16px;
+@media (prefers-reduced-motion: reduce) {
+  .hero-eyebrow,
+  .hero h1,
+  .hero-subtitle,
+  .hero-search,
+  .hero-actions {
+    animation: none;
+    opacity: 1;
+    transform: none;
   }
 }
 
@@ -325,6 +508,70 @@ body:has(#main-content) {
   display: none;
 }
 
+/* Hero — clean, no animated background */
+.hero {
+  position: relative;
+  background: transparent;
+}
+
+.hero::before {
+  display: none;
+}
+
+.hero-title {
+  font-size: clamp(2.75rem, 8vw, 5rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  margin: 0;
+  max-width: 16ch;
+}
+
+.hero-title--gradient {
+  background: linear-gradient(
+    135deg,
+    #ffffff 0%,
+    var(--color-purple-light) 45%,
+    var(--color-accent) 75%,
+    var(--color-accent-secondary) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-theme="light"] .hero-title--gradient {
+  background: linear-gradient(
+    135deg,
+    #0a0a0f 0%,
+    var(--color-accent) 55%,
+    var(--color-accent-secondary) 100%
+  );
+  -webkit-background-clip: text;
+}
+
+.hero-micro {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* Button variants */
+.btn--glass-pill {
+  background: var(--surface-glass);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--border-radius-full);
+  color: var(--color-text-emphasis) !important;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn--glass-pill:hover {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border);
+}
+
 /* Search Results Dropdown */
 .search-results {
   position: absolute;
@@ -335,12 +582,21 @@ body:has(#main-content) {
   border: 1px solid var(--color-glass-border);
   border-radius: var(--border-radius-lg);
   margin-top: 12px;
-  max-height: 450px;
+  max-height: min(340px, calc(100vh - 120px));
+  min-height: 180px;
   overflow-y: auto;
   box-shadow: var(--shadow-lg);
   z-index: 1000;
 }
 
+.search-results:has(.search-result:only-of-type) {
+  min-height: 0;
+}
+
+.search-results:has(.search-result-empty) {
+  min-height: 0;
+}
+
 .search-results.hidden {
   display: none;
 }
@@ -369,11 +625,13 @@ body:has(#main-content) {
 
 .search-result:hover,
 .search-result:focus-visible,
+.search-result.active,
 .search-result-item:hover {
   background: var(--color-bg-tertiary);
 }
 
-.search-result:focus-visible {
+.search-result:focus-visible,
+.search-result.active {
   outline: 2px solid var(--color-accent);
   outline-offset: -2px;
 }
@@ -390,9 +648,12 @@ body:has(#main-content) {
   color: var(--color-primary);
 }
 
-.search-result-type svg {
-  width: 20px;
-  height: 20px;
+.search-result-type::before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: currentColor;
 }
 
 /* Icon color variations by type */
@@ -439,17 +700,36 @@ body:has(#main-content) {
 }
 
 .card {
-  background: var(--color-bg-secondary);
+  position: relative;
+  background: var(--color-card-bg);
   border: 1px solid var(--color-border);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
   padding: 24px;
-  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
   display: block;
   color: inherit;
   text-decoration: none;
   opacity: 0;
-  animation: card-enter 0.4s ease-out forwards;
+  animation: card-enter 0.5s var(--ease-out-expo) forwards;
   animation-delay: var(--animation-delay, 0ms);
+  overflow: hidden;
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--card-accent, var(--color-accent)), transparent 55%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--transition);
+  pointer-events: none;
 }
 
 .card-with-count {
@@ -474,21 +754,37 @@ body:has(#main-content) {
 
 .card-count {
   flex-shrink: 0;
-  font-size: 28px;
+  font-size: 24px;
   font-weight: 700;
-  color: var(--color-primary);
+  color: var(--color-text-muted);
   line-height: 1;
   min-width: 40px;
   text-align: right;
+  transition: color var(--transition);
 }
 
-.card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+.card:hover,
+.card:focus-visible {
+  border-color: var(--card-accent, var(--color-accent));
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-float), 0 0 0 1px var(--card-accent, var(--color-accent));
+}
+
+.card:hover::before,
+.card:focus-visible::before {
+  opacity: 0.6;
+}
+
+.card:hover .card-count,
+.card:focus-visible .card-count {
+  color: var(--card-accent, var(--color-accent));
 }
 
 @keyframes card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
   to {
     opacity: 1;
     transform: translateY(0);
@@ -529,33 +825,396 @@ body:has(#main-content) {
   line-height: 1.6;
 }
 
-/* Quick Links Section */
-.quick-links {
-  padding: 80px 0;
+/* Reusable glass card surface */
+.glass-card {
+  position: relative;
+  background: var(--color-card-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+  box-shadow: var(--shadow-md);
+  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
+  overflow: hidden;
 }
 
-/* Featured Section */
-.featured {
-  padding: 80px 0;
-  background: transparent;
-  position: relative;
+.glass-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--card-accent, var(--color-accent)), transparent 55%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--transition);
+  pointer-events: none;
 }
 
-.featured h2 {
-  font-size: 32px;
-  font-weight: 800;
-  color: var(--color-text-emphasis);
-  margin-bottom: 40px;
-  text-align: center;
+.glass-card:hover,
+.glass-card:focus-within {
+  border-color: var(--card-accent, var(--color-accent));
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-float), 0 0 0 1px var(--card-accent, var(--color-accent));
 }
 
-/* Getting Started */
-.getting-started {
-  padding: 100px 0;
+.glass-card:hover::before,
+.glass-card:focus-within::before {
+  opacity: 0.6;
 }
 
-.getting-started h2 {
-  font-size: 32px;
+@media (prefers-reduced-motion: reduce) {
+  .glass-card {
+    transition: none;
+  }
+}
+
+/* Shimmer sweep on hover */
+.card--shimmer,
+.glass-card--shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.card--shimmer::after,
+.glass-card--shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(255, 255, 255, 0.06) 45%,
+    rgba(255, 255, 255, 0.14) 50%,
+    rgba(255, 255, 255, 0.06) 55%,
+    transparent 60%
+  );
+  background-size: 200% 100%;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+
+.card--shimmer:hover::after,
+.card--shimmer:focus-visible::after,
+.glass-card--shimmer:hover::after,
+.glass-card--shimmer:focus-within::after {
+  opacity: 1;
+  animation: shimmer-sweep 1s ease-in-out;
+}
+
+@keyframes shimmer-sweep {
+  0%   { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
+/* Spotlight follow effect */
+.card--spotlight::before,
+.glass-card--spotlight::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    500px circle at var(--spotlight-x, 50%) var(--spotlight-y, 0%),
+    rgba(255, 255, 255, 0.10),
+    transparent 40%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.card--spotlight:hover::before,
+.card--spotlight:focus-visible::before,
+.glass-card--spotlight:hover::before,
+.glass-card--spotlight:focus-within::before {
+  opacity: 1;
+}
+
+/* Border glow on hover */
+.card--glow,
+.glass-card--glow {
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.card--glow:hover,
+.card--glow:focus-visible,
+.glass-card--glow:hover,
+.glass-card--glow:focus-within {
+  border-color: var(--card-accent, var(--color-accent));
+  box-shadow:
+    0 0 0 1px var(--card-accent, var(--color-accent)),
+    0 0 48px -14px color-mix(in srgb, var(--card-accent, var(--color-accent)) 55%, transparent);
+}
+
+/* Scroll reveal — only hide when scripting is enabled so no-JS users still see content */
+@media (scripting: enabled) {
+  .reveal {
+    opacity: 0;
+    transform: translateY(24px);
+    transition: opacity 0.6s var(--ease-out-expo),
+                transform 0.6s var(--ease-out-expo);
+  }
+}
+
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.reveal-stagger > .reveal {
+  transition-delay: calc(var(--reveal-index, 0) * 70ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal,
+  .reveal.is-visible {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* Quick Links Section */
+.quick-links {
+  padding: 80px 0;
+}
+
+.category-cluster {
+  margin-bottom: 64px;
+}
+
+.category-cluster__header {
+  max-width: 640px;
+  margin-bottom: 28px;
+}
+
+.category-cluster__title {
+  font-size: clamp(1.5rem, 3vw, 1.875rem);
+  font-weight: 700;
+  color: var(--color-text-emphasis);
+  margin: 0 0 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+.category-cluster__description {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.cards-grid--compact {
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+@media (min-width: 1024px) {
+  .cards-grid--compact {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Hero stats — macOS-style inline text */
+.hero-stats {
+  margin: 24px 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--color-text-muted);
+  text-align: center;
+  letter-spacing: 0.01em;
+}
+
+.hero-stat {
+  display: inline;
+  white-space: nowrap;
+}
+
+.hero-stat-value {
+  font-weight: 700;
+  color: var(--color-text-emphasis);
+  font-variant-numeric: tabular-nums;
+}
+
+.hero-stat-label {
+  font-weight: 500;
+  color: var(--color-text-muted);
+}
+
+.hero-stat-separator {
+  margin: 0 0.35em;
+  color: var(--color-text-muted);
+  opacity: 0.5;
+}
+
+@media (max-width: 768px) {
+  .hero-stats {
+    font-size: 0.75rem;
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-stats {
+    font-size: 0.6875rem;
+  }
+}
+
+/* How it works */
+.how-it-works {
+  padding: 80px 0;
+  border-top: 1px solid var(--color-glass-border);
+}
+
+.how-it-works-header {
+  max-width: 640px;
+  margin-bottom: 2.5rem;
+}
+
+.how-it-works-header h2 {
+  font-size: clamp(1.5rem, 3vw, 1.875rem);
+  font-weight: 700;
+  color: var(--color-text-emphasis);
+  margin: 0 0 0.75rem;
+}
+
+.how-it-works-header p {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+/* GitHub-style commit history */
+.commit-history {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding-left: 1.25rem;
+}
+
+.commit-history__line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 2.25rem;
+  width: 2px;
+  background: var(--color-border);
+  border-radius: 1px;
+}
+
+.commit-entry {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  z-index: 1;
+}
+
+.commit-entry__avatar {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.25rem;
+}
+
+.commit-entry__dot {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--color-bg-secondary);
+  border: 2px solid var(--color-border);
+}
+
+.commit-entry__icon {
+  position: relative;
+  color: var(--color-accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.commit-entry__body {
+  flex: 1;
+  min-width: 0;
+  padding: 1rem 1.25rem;
+  border-radius: var(--border-radius-lg);
+}
+
+.commit-entry__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.375rem;
+}
+
+.commit-entry__header h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-emphasis);
+  margin: 0;
+}
+
+.commit-entry__hash {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  letter-spacing: 0.02em;
+}
+
+.commit-entry__body p {
+  margin: 0;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  font-size: 0.9rem;
+}
+
+@media (min-width: 640px) {
+  .commit-history {
+    padding-left: 0;
+  }
+
+  .commit-history__line {
+    left: 1.125rem;
+  }
+}
+
+.how-it-works-footer {
+  margin-top: 2rem;
+}
+
+/* Featured Section */
+.featured {
+  padding: 80px 0;
+  background: transparent;
+  position: relative;
+}
+
+.featured h2 {
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--color-text-emphasis);
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+/* Getting Started */
+.getting-started {
+  padding: 100px 0;
+}
+
+.getting-started h2 {
+  font-size: 32px;
   font-weight: 800;
   color: var(--color-text-emphasis);
   margin-bottom: 48px;
@@ -605,30 +1264,178 @@ body:has(#main-content) {
 
 /* Footer */
 .site-footer {
+  border-top: 1px solid var(--color-border);
   background: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-glass-border);
-  padding: 32px 0;
-  text-align: center;
+  color: var(--color-text-muted);
+  /* Break out of Starlight's centered content column and span the full viewport */
+  position: relative;
+  width: 100vw;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.footer-inner {
+  width: 100%;
+  padding: 32px 48px 20px;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1.25fr 1fr 1fr;
+  gap: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.footer-brand {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.footer-brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-text-emphasis);
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.footer-tagline {
+  margin: 0;
+  max-width: 36ch;
+  line-height: 1.55;
+  font-size: 0.8125rem;
+}
+
+.footer-theme-toggle {
+  display: inline-flex;
+  margin-top: 0.25rem;
+}
+
+.footer-nav h3 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-emphasis);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin: 0 0 0.625rem;
+}
+
+.footer-nav--compact ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  columns: 2;
+  column-gap: 1.25rem;
+}
+
+.footer-nav--compact li {
+  break-inside: avoid;
+  margin-bottom: 0.25rem;
+}
+
+.footer-nav a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  font-size: 0.8125rem;
+  transition: color var(--transition);
+}
+
+.footer-nav a:hover {
+  color: var(--color-link);
+}
+
+.footer-legal {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+  font-size: 0.75rem;
+}
+
+.footer-legal p {
+  margin: 0;
+}
+
+.footer-legal a {
+  color: var(--color-text-muted);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  transition: color var(--transition);
+}
+
+.footer-legal a:hover {
+  color: var(--color-link);
+}
+
+@media (max-width: 1100px) {
+  .footer-inner {
+    padding: 28px 32px 18px;
+  }
+
+  .footer-grid {
+    gap: 1.25rem;
+  }
 }
 
-.site-footer p {
-  font-size: 14px;
-  color: var(--color-text-muted);
-}
+@media (max-width: 900px) {
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+    margin-bottom: 1rem;
+  }
 
-.site-footer a {
-  color: var(--color-text-muted);
-  transition: color var(--transition);
-}
+  .footer-brand {
+    grid-column: 1 / -1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
 
-.site-footer a:hover {
-  color: var(--color-accent);
+  .footer-tagline {
+    flex: 1 1 100%;
+    max-width: 50ch;
+  }
+
+  .footer-theme-toggle {
+    margin-top: 0;
+  }
 }
 
-.site-footer .build-info {
-  margin-top: 8px;
-  font-size: 12px;
-  opacity: 0.7;
+@media (max-width: 560px) {
+  .footer-inner {
+    padding: 24px 24px 18px;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .footer-brand {
+    grid-column: 1 / -1;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .footer-nav--compact ul {
+    columns: 1;
+  }
+
+  .footer-legal {
+    flex-direction: column;
+    text-align: center;
+    gap: 0.375rem;
+  }
 }
 
 /* Buttons */
@@ -661,51 +1468,62 @@ body:has(#main-content) {
 }
 
 .btn-primary {
-  background: var(--color-accent);
-  color: var(--sl-color-text-invert) !important;
+  background: var(--color-text-emphasis);
+  color: var(--color-bg) !important;
   border-color: transparent;
   font-weight: 600;
 }
 
 .btn-primary:hover {
-  background: var(--color-accent-hover);
+  background: var(--color-text);
   transform: translateY(-1px);
-  box-shadow: var(--shadow-glow);
-  color: white;
+  color: var(--color-bg);
 }
 
 .btn-secondary {
-  background: var(--color-glass);
-  backdrop-filter: blur(10px);
-  color: var(--color-text);
-  border-color: var(--color-glass-border);
+  background: var(--surface-glass);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+  color: var(--color-text-emphasis);
+  border-color: var(--surface-glass-border);
 }
 
 .btn-secondary:hover {
   background: var(--color-bg-tertiary);
   border-color: var(--color-border);
+  color: var(--color-text-emphasis);
 }
 
 .btn-outline {
-  background: transparent;
+  background: var(--color-bg-secondary);
   color: var(--color-text);
   border-color: var(--color-border);
 }
 
 .btn-outline:hover {
   background: var(--color-bg-tertiary);
-  border-color: var(--color-link);
+  border-color: var(--color-text-muted);
+  color: var(--color-text-emphasis);
 }
 
 .btn-icon {
   padding: 8px;
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius);
   color: var(--color-text-muted);
+  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
 }
 
 .btn-icon:hover {
   color: var(--color-text);
+  background: var(--color-bg-tertiary);
+}
+
+.btn-icon:focus-visible {
+  outline: none;
+  border-color: var(--color-accent);
+  color: var(--color-text-emphasis);
 }
 
 
@@ -926,105 +1744,378 @@ body:has(#main-content) {
   margin: 4px 0;
 }
 
-/* Spinner animation */
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+/* Spinner animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+/* Button states */
+.btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+/* Modal */
+.modal {
+  position: fixed;
+  z-index: 1000001;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.65);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+.modal.hidden, .hidden {
+  display: none;
+}
+
+.modal-content {
+  background: var(--surface-glass);
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--border-radius-xl);
+  width: min(95vw, 1100px);
+  max-width: 1100px;
+  max-height: min(90vh, 900px);
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-content {
+    background: var(--color-bg-secondary);
+  }
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+}
+
+.modal-header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+}
+
+.modal-title-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.modal-title-wrap h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-text-emphasis);
+  word-break: break-word;
+}
+
+.modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.modal-actions-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.modal-actions-group--view {
+  order: 1;
+}
+
+.modal-actions-group--file {
+  order: 2;
+}
+
+.modal-actions-group--install {
+  order: 3;
+}
+
+.modal-close {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: -6px -10px -6px 0;
+  order: 4;
+}
+
+.modal-close:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-emphasis);
+}
+
+@media (max-width: 768px) {
+  .modal {
+    padding: 16px;
+  }
+
+  .modal-content {
+    width: 100%;
+    max-height: 95vh;
+    border-radius: var(--border-radius-lg);
+  }
+
+  .modal-header {
+    padding: 16px;
+  }
+
+  .modal-header-top {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .modal-actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .modal-actions-group .btn,
+  .modal-actions-group .install-dropdown .btn {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .modal-actions-group .btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .install-dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+}
+
+.modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0;
+  background: var(--color-bg-primary);
+}
+
+#modal-content {
+  margin: 0;
+  min-height: 100%;
+}
+
+#modal-content:where(pre) {
+  padding: 20px 24px;
+  background: var(--color-bg-primary);
+  color: var(--color-text);
+  overflow-x: auto;
+}
+
+#modal-content:where(pre) code {
+  font-family: 'Monaspace Argon NF', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+#modal-content pre,
+#modal-content pre code,
+.modal-code-content pre,
+.modal-code-content pre code {
+  font-family: 'Monaspace Argon NF', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+#modal-content pre,
+.modal-code-content pre {
+  margin: 0;
+  padding: 20px 24px;
+  border-radius: 0;
+  background: var(--color-bg-primary);
+  overflow-x: auto;
+  min-height: 100%;
+}
+
+#modal-content pre code,
+.modal-code-content pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.modal-rendered-content {
+  padding: 20px 24px;
+  color: var(--color-text);
+  font-size: 15px;
+  line-height: 1.65;
+}
+
+.modal-rendered-content h1,
+.modal-rendered-content h2,
+.modal-rendered-content h3,
+.modal-rendered-content h4,
+.modal-rendered-content h5,
+.modal-rendered-content h6 {
+  color: var(--color-text-emphasis);
+  margin-top: 24px;
+  margin-bottom: 12px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.modal-rendered-content h1 { font-size: 1.75rem; }
+.modal-rendered-content h2 { font-size: 1.5rem; }
+.modal-rendered-content h3 { font-size: 1.25rem; }
+.modal-rendered-content h4 { font-size: 1.1rem; }
+
+.modal-rendered-content p {
+  margin-bottom: 16px;
+}
+
+.modal-rendered-content a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+
+.modal-rendered-content a:hover {
+  color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+.modal-rendered-content ul,
+.modal-rendered-content ol {
+  margin-bottom: 16px;
+  padding-left: 24px;
+}
+
+.modal-rendered-content li {
+  margin-bottom: 6px;
+}
+
+.modal-rendered-content code {
+  font-family: 'Monaspace Argon NF', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.9em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-emphasis);
+}
+
+.modal-rendered-content pre {
+  margin-bottom: 16px;
+  padding: 16px;
+  border-radius: var(--border-radius);
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  overflow-x: auto;
 }
 
-.spinner {
-  animation: spin 1s linear infinite;
+.modal-rendered-content pre code {
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 13px;
+  line-height: 1.6;
+  color: inherit;
 }
 
-/* Button states */
-.btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
+.modal-rendered-content blockquote {
+  margin: 16px 0;
+  padding: 12px 20px;
+  border-left: 4px solid var(--color-accent);
+  background-color: var(--color-glass);
+  border-radius: 0 8px 8px 0;
+  color: var(--color-text-muted);
 }
 
-/* Modal */
-.modal {
-  position: fixed;
-  z-index: 1000001;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
+.modal-rendered-content blockquote p:last-child {
+  margin-bottom: 0;
 }
 
-.modal.hidden, .hidden {
-  display: none;
+.modal-rendered-content hr {
+  margin: 24px 0;
+  border: none;
+  border-top: 1px solid var(--color-border);
 }
 
-.modal-content {
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-lg);
-  width: 100%;
-  max-width: 800px;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--shadow-lg);
-  overflow: hidden;
+.modal-rendered-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
 }
 
-.modal-header {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--color-border);
+.modal-rendered-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 16px;
 }
 
-.modal-header-top {
-  gap: 16px;
-  min-width: 0;
+.modal-rendered-content th,
+.modal-rendered-content td {
+  padding: 8px 12px;
+  border: 1px solid var(--color-border);
+  text-align: left;
 }
 
-.modal-header-top h3 {
-  font-size: 16px;
+.modal-rendered-content th {
+  background: var(--color-bg-tertiary);
   font-weight: 600;
   color: var(--color-text-emphasis);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  flex: 1;
 }
 
+/* Modal file switcher */
 .modal-file-switcher {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.modal-file-switcher.hidden {
-  display: none;
-}
-
-.modal-file-switcher label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  gap: 6px;
 }
 
 .modal-file-switcher-label {
-  font-size: 12px;
-  font-weight: 600;
+  font-size: 0.75rem;
   color: var(--color-text-muted);
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -1032,30 +2123,18 @@ body:has(#main-content) {
 .modal-file-dropdown {
   position: relative;
   display: inline-flex;
-  min-width: min(320px, 100%);
-  max-width: min(420px, 100%);
-  flex: 1;
 }
 
 .modal-file-button {
-  justify-content: flex-start;
-  min-width: 0;
-  flex: 1;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border-right: 1px solid var(--color-border);
-}
-
-.modal-file-button span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .modal-file-toggle {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: 10px;
+  padding: 8px 10px;
   min-width: auto;
 }
 
@@ -1071,8 +2150,11 @@ body:has(#main-content) {
   position: absolute;
   top: 100%;
   left: 0;
-  right: 0;
   margin-top: 4px;
+  min-width: 180px;
+  max-width: min(260px, calc(100vw - 48px));
+  max-height: 280px;
+  overflow-y: auto;
   background: var(--color-bg-secondary);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
@@ -1082,8 +2164,6 @@ body:has(#main-content) {
   visibility: hidden;
   transform: translateY(-8px);
   transition: all var(--transition);
-  max-height: 280px;
-  overflow-y: auto;
 }
 
 .modal-file-dropdown.open .modal-file-menu {
@@ -1093,91 +2173,37 @@ body:has(#main-content) {
 }
 
 .modal-file-menu-item {
-  width: 100%;
   display: block;
-  padding: 10px 14px;
-  text-align: left;
+  width: 100%;
+  padding: 8px 12px;
   background: transparent;
-  border: none;
-  color: var(--color-text);
+  border: 0;
+  text-align: left;
   font-size: 13px;
+  color: var(--color-text);
   cursor: pointer;
   transition: background var(--transition);
-  margin: 0;
 }
 
 .modal-file-menu-item:hover,
 .modal-file-menu-item:focus-visible {
   background: var(--color-bg-tertiary);
-  outline: none;
 }
 
 .modal-file-menu-item.active {
-  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
-  color: var(--color-text-emphasis);
-  font-weight: 600;
-}
-
-.modal-file-menu-item:first-child {
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
-}
-
-.modal-file-menu-item:last-child {
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-.modal-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-}
-
-.modal-actions button, .modal-actions div {
-  margin: 0;
-}
-
-.modal-body {
-  flex: 1;
-  overflow: auto;
-  padding: 0;
-}
-
-.modal-body pre {
-  margin: 0;
-  padding: 24px;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  background: var(--color-bg);
-  color: var(--color-text);
-  min-height: 200px;
-}
-
-.modal-rendered-content {
-  padding: 24px;
-  min-height: 200px;
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.6;
-}
-
-.modal-rendered-content > :first-child {
-  margin-top: 0;
+  background: var(--color-accent);
+  color: var(--color-bg);
 }
 
-.modal-rendered-content > :last-child {
-  margin-bottom: 0;
-}
+@media (max-width: 768px) {
+  .modal-file-switcher-label {
+    display: none;
+  }
 
-.modal-code-content .shiki {
-  margin: 0 !important;
-  padding: 24px;
-  min-height: 200px;
-  border-radius: 0;
+  .modal-file-menu {
+    left: 0;
+    right: auto;
+  }
 }
 
 /* Collection Modal View */
@@ -1426,16 +2452,22 @@ body:has(#main-content) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 12px 14px;
+  background: var(--surface-glass);
+  border: 1px solid var(--surface-glass-border);
+  border-radius: var(--border-radius-lg);
   position: relative;
   z-index: 10;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .listing-toolbar {
+    background: var(--color-bg-secondary);
+  }
+}
+
 .listing-toolbar-row {
   display: flex;
   flex: 1 1 100%;
@@ -1447,6 +2479,9 @@ body:has(#main-content) {
 
 .listing-toolbar .results-count {
   margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-muted);
 }
 
 .listing-controls {
@@ -1465,10 +2500,10 @@ body:has(#main-content) {
   justify-content: space-between;
   gap: 8px;
   min-height: 36px;
-  padding: 7px 12px;
-  border: 1px solid var(--color-glass-border);
-  border-radius: 999px;
-  background: var(--color-glass);
+  padding: 7px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-full);
+  background: var(--color-bg-secondary);
   color: var(--color-text-muted);
   font-size: 13px;
   font-weight: 600;
@@ -1515,7 +2550,8 @@ body:has(#main-content) {
   background: var(--color-card-bg);
   border: 1px solid var(--color-glass-border);
   border-radius: var(--border-radius-lg);
-  backdrop-filter: blur(18px);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
   box-shadow: var(--shadow-md);
 }
 
@@ -1564,14 +2600,16 @@ body:has(#main-content) {
 .search-bar input {
   flex: 1 1 220px;
   min-width: 220px;
-  padding: 9px 14px;
-  font-size: 13px;
+  padding: 10px 16px;
+  font-size: 14px;
   margin: 0;
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
+  background: var(--surface-glass);
+  border: 1px solid var(--surface-glass-border);
   border-radius: var(--border-radius-lg);
   color: var(--color-text);
-  transition: all var(--transition);
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 
 .search-bar input:focus {
@@ -1821,16 +2859,18 @@ body:has(#main-content) {
 
 .resource-item {
   background: var(--color-card-bg);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--color-glass-border);
+  border: 1px solid var(--color-border);
   border-radius: var(--border-radius-lg);
   padding: 20px 24px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
-  transition: all var(--transition);
+  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
   position: relative;
+  overflow: hidden;
+  backdrop-filter: var(--surface-backdrop);
+  -webkit-backdrop-filter: var(--surface-backdrop);
 }
 
 .resource-item::before {
@@ -1838,26 +2878,56 @@ body:has(#main-content) {
   position: absolute;
   top: 0;
   left: 0;
-  width: 4px;
+  width: 3px;
   height: 100%;
   background: var(--gradient-primary);
   border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
   opacity: 0;
-  transition: opacity var(--transition), left var(--transition);
+  transition: opacity var(--transition);
+}
+
+.resource-item::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, var(--color-accent), transparent 55%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity var(--transition);
+  pointer-events: none;
 }
 
 .resource-item:hover,
 .resource-item:focus-within {
   background: var(--color-card-hover);
-  transform: translateX(4px);
-  box-shadow: var(--shadow);
-  border-radius: 0px var(--border-radius-lg) var(--border-radius-lg) 0px;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-accent);
+  border-color: var(--color-accent);
 }
 
 .resource-item:hover::before,
 .resource-item:focus-within::before {
   opacity: 1;
-  left: -4px;
+}
+
+.resource-item:hover::after,
+.resource-item:focus-within::after {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .resource-item {
+    transition: background-color var(--transition), border-color var(--transition);
+  }
+
+  .resource-item:hover,
+  .resource-item:focus-within {
+    transform: none;
+  }
 }
 
 .resource-preview {
@@ -2250,13 +3320,15 @@ body:has(#main-content) {
 
 /* Safe area support for notched devices */
 @supports (padding: max(0px)) {
-  .container {
+  .container,
+  .footer-inner {
     padding-left: max(24px, env(safe-area-inset-left));
     padding-right: max(24px, env(safe-area-inset-right));
   }
 
   @media (max-width: 768px) {
-    .container {
+    .container,
+    .footer-inner {
       padding-left: max(16px, env(safe-area-inset-left));
       padding-right: max(16px, env(safe-area-inset-right));
     }
@@ -2265,9 +3337,20 @@ body:has(#main-content) {
 
 /* Focus visible improvements */
 .card:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  transform: translateY(-4px);
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+
+  .card:hover,
+  .card:focus-visible {
+    transform: none;
+  }
 }
 
 /* Consolidated reduced motion support */
@@ -2735,35 +3818,24 @@ body:has(#main-content) {
 }
 
 /* Category-specific card styles */
-.card-category-ai::before { background: linear-gradient(90deg, var(--category-ai), transparent); }
-.card-category-ai .card-icon { color: var(--category-ai); }
-.card-category-ai:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-ai-glow); }
-
-.card-category-docs::before { background: linear-gradient(90deg, var(--category-docs), transparent); }
+/* Category accent colors via custom property for hover glow and gradient border */
+.card-category-ai   { --card-accent: var(--category-ai); }
+.card-category-docs { --card-accent: var(--category-docs); }
+.card-category-power { --card-accent: var(--category-power); }
+.card-category-automation { --card-accent: var(--category-automation); }
+.card-category-extension { --card-accent: var(--category-extension); }
+.card-category-dev { --card-accent: var(--category-dev); }
+.card-category-learn { --card-accent: var(--category-learn); }
+
+.card-category-ai .card-icon   { color: var(--category-ai); }
 .card-category-docs .card-icon { color: var(--category-docs); }
-.card-category-docs:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-docs-glow); }
-
-.card-category-power::before { background: linear-gradient(90deg, var(--category-power), transparent); }
 .card-category-power .card-icon { color: var(--category-power); }
-.card-category-power:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-power-glow); }
-
-.card-category-automation::before { background: linear-gradient(90deg, var(--category-automation), transparent); }
 .card-category-automation .card-icon { color: var(--category-automation); }
-.card-category-automation:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-automation-glow); }
-
-.card-category-extension::before { background: linear-gradient(90deg, var(--category-extension), transparent); }
 .card-category-extension .card-icon { color: var(--category-extension); }
-.card-category-extension:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-extension-glow); }
-
-.card-category-dev::before { background: linear-gradient(90deg, var(--category-dev), transparent); }
 .card-category-dev .card-icon { color: var(--category-dev); }
-.card-category-dev:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-dev-glow); }
-
-.card-category-learn::before { background: linear-gradient(90deg, var(--category-learn), transparent); }
 .card-category-learn .card-icon { color: var(--category-learn); }
-.card-category-learn:hover { box-shadow: var(--shadow-lg), 0 0 40px -10px var(--category-learn-glow); }
 
-/* Enhanced card hover with arrow indicator */
+/* Subtle arrow indicator on hover */
 .card::after {
   content: '→';
   position: absolute;
@@ -2773,10 +3845,11 @@ body:has(#main-content) {
   color: var(--color-text-muted);
   opacity: 0;
   transform: translateX(-10px);
-  transition: all 0.3s ease;
+  transition: all var(--transition);
 }
 
-.card:hover::after {
+.card:hover::after,
+.card:focus-visible::after {
   opacity: 1;
   transform: translateX(0);
 }
diff --git a/website/src/styles/starlight-overrides.css b/website/src/styles/starlight-overrides.css
index 6497d0ce6..3932241f5 100644
--- a/website/src/styles/starlight-overrides.css
+++ b/website/src/styles/starlight-overrides.css
@@ -46,6 +46,33 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
 }
 
+/* ── Auto theme (system preference) ────────────────────────── */
+/* Mirror the light palette when the system prefers light and no explicit
+   dark theme is set. This prevents a flash of the dark Starlight palette
+   before the theme toggle script hydrates the data-theme attribute. */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --sl-color-accent-low: #f0e6ff;
+    --sl-color-accent: #6b21c8;
+    --sl-color-accent-high: #3b0d7a;
+    --sl-color-text-accent: #6b21c8;
+
+    --sl-color-white: #0a0a0f;
+    --sl-color-gray-1: #111120;
+    --sl-color-gray-2: #1a1a2e;
+    --sl-color-gray-3: #30304a;
+    --sl-color-gray-4: #60607a;
+    --sl-color-gray-5: #9898a6;
+    --sl-color-gray-6: #f5f5f7;
+    --sl-color-black: #fafafa;
+  }
+
+  :root:not([data-theme="dark"]) header.header {
+    background: rgba(250, 250, 250, 0.6) !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
+  }
+}
+
 /* ── Sidebar readability ───────────────────────────────────── */
 nav[aria-label="Main"] a {
   font-weight: 500 !important;
@@ -66,12 +93,24 @@ header .site-title:hover {
 }
 
 /* ── Unified background ─────────────────────────────────────── */
-/* Clean header - solid background */
+/* Refined sticky header with glass backdrop on supported devices */
 header.header {
-  background: var(--sl-color-gray-6) !important;
+  position: sticky;
+  top: 0;
+  background: color-mix(in srgb, var(--sl-color-gray-6) 85%, transparent) !important;
   border-bottom: 1px solid var(--sl-color-gray-5) !important;
   z-index: 1000;
-  position: relative;
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+}
+
+/* Disable expensive backdrop-filter for users who prefer reduced motion / transparency */
+@media (prefers-reduced-motion: reduce) {
+  header.header {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: var(--sl-color-gray-6) !important;
+  }
 }
 
 /* Header inner content for alignment */
@@ -93,7 +132,8 @@ header .social-icons {
   display: none !important;
 }
 
-/* Move theme toggle inside header - align with header elements */
+/* Theme toggle is appended to body by the component script; position it inside
+   the header area when possible, but keep it fixed on narrow viewports. */
 .theme-toggle-container {
   position: fixed !important;
   top: 12px !important;
@@ -101,6 +141,13 @@ header .social-icons {
   z-index: 1001;
 }
 
+@media (max-width: 768px) {
+  .theme-toggle-container {
+    top: 10px !important;
+    right: 64px !important;
+  }
+}
+
 /* On custom splash pages, body already has the gradient bg.
    Make Starlight's wrapper layers transparent so it shows through. */
 body:has(#main-content) {
@@ -114,6 +161,28 @@ starlight-theme-select {
   display: none !important;
 }
 
+/* ── Sidebar polish ─────────────────────────────────────── */
+nav[aria-label="Main"] {
+  font-size: 0.9rem;
+}
+
+nav[aria-label="Main"] a {
+  border-radius: var(--border-radius-sm);
+  transition: color var(--transition), background-color var(--transition);
+}
+
+nav[aria-label="Main"] a:hover {
+  background-color: var(--sl-color-accent-low);
+  color: var(--sl-color-accent-high);
+}
+
+nav[aria-label="Main"] a[aria-current="page"] {
+  background-color: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent) !important;
+  font-weight: 600 !important;
+  border-inline-start-color: var(--sl-color-accent) !important;
+}
+
 /* ── Browse Resources sidebar group ────────────────────────── */
 nav[aria-label="Main"] > ul > li:first-child details summary,
 nav[aria-label="Main"] > ul > li:first-child > a {
@@ -127,6 +196,49 @@ main:has(#main-content) > .content-panel:has(h1#_top) {
   display: none !important;
 }
 
+/* ── Typography & content polish ───────────────────────── */
+.sl-markdown-content {
+  line-height: 1.7;
+}
+
+.sl-markdown-content h1,
+.sl-markdown-content h2,
+.sl-markdown-content h3 {
+  letter-spacing: -0.015em;
+}
+
+.sl-markdown-content h2 {
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  padding-bottom: 0.5rem;
+  margin-top: 2.5rem;
+}
+
+/* ── Code blocks ─────────────────────────────────────────── */
+.expressive-code {
+  border-radius: var(--border-radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--sl-color-gray-5);
+}
+
+.sl-markdown-content code:not(pre code) {
+  padding: 0.15em 0.4em;
+  border-radius: var(--border-radius-sm);
+  background: var(--sl-color-gray-5);
+  color: var(--sl-color-white);
+  font-size: 0.9em;
+}
+
+/* ── Callouts / asides ───────────────────────────────────── */
+.sl-markdown-content .starlight-aside {
+  border-radius: var(--border-radius);
+  border-left-width: 3px;
+}
+
+.sl-markdown-content .starlight-aside--note {
+  border-left-color: var(--sl-color-accent);
+  background-color: var(--sl-color-accent-low);
+}
+
 /* ── Pagefind search filter pills ──────────────────────────── */
 /* Restyle the default checkbox filters as horizontal pill toggles above results */