diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index cbe44bf..395b8bb 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -86,7 +86,7 @@ export default defineConfig({
     ],
 
     footer: {
-      message: `<a href="/unitsdb/">UnitsDB</a> · <a href="/schemas.html">Schemas</a> · <a href="/learn/what-is-unitsml.html">Learn</a> · <a href="https://github.com/unitsml">GitHub</a>`,
+      message: `<a href="/unitsdb/">UnitsDB</a> · <a href="/schemas.html">Schemas</a> · <a href="/learn/what-is-unitsml.html">Learn</a> · <a href="/get-started.html">Get Started</a> · <a href="/software/">Software</a> · <a href="https://github.com/unitsml">GitHub</a>`,
       copyright: 'Copyright © 2026 UnitsML Group'
     },
 
@@ -131,6 +131,7 @@ export default defineConfig({
             { text: 'Overview', link: '/schemas' },
             { text: 'UnitsML XML Schemas', link: '/schemas#unitsml-xml-schemas' },
             { text: 'UnitsDB YAML Schemas', link: '/schemas#unitsdb-yaml-schemas' },
+            { text: 'Schema Browser', link: '/schemas#schema-browser' },
           ]
         }
       ],
diff --git a/.vitepress/posts.data.ts b/.vitepress/posts.data.ts
index 795f04e..233449b 100644
--- a/.vitepress/posts.data.ts
+++ b/.vitepress/posts.data.ts
@@ -7,6 +7,7 @@ interface Post {
   authors: string[]
   description: string
   lastUpdated: number | undefined
+  readingTime: number
 }
 
 declare const data: Post[]
@@ -16,14 +17,18 @@ export default createContentLoader('blog/*.md', {
   transform(raw): Post[] {
     return raw
       .filter((page) => !page.url.endsWith('/blog/'))
-      .map((page) => ({
-        title: page.frontmatter.title,
-        url: page.url,
-        date: page.frontmatter.date,
-        authors: page.frontmatter.authors || [],
-        description: page.frontmatter.description || '',
-        lastUpdated: page.lastUpdated,
-      }))
+      .map((page) => {
+        const wordCount = page.src ? page.src.split(/\s+/).length : 0
+        return {
+          title: page.frontmatter.title,
+          url: page.url,
+          date: page.frontmatter.date,
+          authors: page.frontmatter.authors || [],
+          description: page.frontmatter.description || '',
+          lastUpdated: page.lastUpdated,
+          readingTime: Math.max(1, Math.round(wordCount / 200)),
+        }
+      })
       .sort((a, b) => {
         const dateA = new Date(a.date).getTime()
         const dateB = new Date(b.date).getTime()
diff --git a/.vitepress/theme/components/BlogByline.vue b/.vitepress/theme/components/BlogByline.vue
index 430d768..b692a97 100644
--- a/.vitepress/theme/components/BlogByline.vue
+++ b/.vitepress/theme/components/BlogByline.vue
@@ -31,13 +31,20 @@ const authors = computed(() => {
   if (a.length === 2) return `${a[0]} & ${a[1]}`
   return a.slice(0, -1).join(', ') + ' & ' + a[a.length - 1]
 })
+
+const authorInitials = computed(() => {
+  const a = frontmatter.value.authors
+  if (!a || !Array.isArray(a) || a.length === 0) return ''
+  return a.map((name: string) => name.split(' ').map((n: string) => n[0]).join('')).join(' ')
+})
 </script>
 
 <template>
   <div class="blog-byline" v-if="authors || formattedDate">
     <div class="byline-content">
       <div class="author-info" v-if="authors">
-        <svg class="author-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <span class="author-avatar" v-if="authorInitials">{{ authorInitials }}</span>
+        <svg v-else class="author-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
           <circle cx="12" cy="7" r="4"/>
         </svg>
@@ -94,6 +101,13 @@ const authors = computed(() => {
   flex-shrink: 0;
 }
 
+.author-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.6875rem; font-weight: 700; flex-shrink: 0;
+}
+
 .date-icon {
   color: var(--vp-c-text-3);
   flex-shrink: 0;
diff --git a/.vitepress/theme/components/BlogIndex.vue b/.vitepress/theme/components/BlogIndex.vue
index a2ea283..c3ce834 100644
--- a/.vitepress/theme/components/BlogIndex.vue
+++ b/.vitepress/theme/components/BlogIndex.vue
@@ -77,11 +77,14 @@ function formatAuthors(authors: string[]): string {
             <span class="post-authors">
               By {{ formatAuthors(post.authors) }}
             </span>
-            <span class="read-more">
-              Read article
-              <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M5 12h14M12 5l7 7-7 7"/>
-              </svg>
+            <span class="post-meta">
+              <span class="reading-time">{{ post.readingTime }} min read</span>
+              <span class="read-more">
+                Read article
+                <svg class="arrow-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+              </span>
             </span>
           </div>
         </div>
@@ -232,6 +235,15 @@ function formatAuthors(authors: string[]): string {
   color: var(--vp-c-text-3);
 }
 
+.post-meta {
+  display: flex; align-items: center; gap: 0.75rem;
+}
+
+.reading-time {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
 .read-more {
   display: flex;
   align-items: center;
diff --git a/.vitepress/theme/components/HomePage.vue b/.vitepress/theme/components/HomePage.vue
index 589d1bc..58a98b4 100644
--- a/.vitepress/theme/components/HomePage.vue
+++ b/.vitepress/theme/components/HomePage.vue
@@ -1,53 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import { projects } from '../../data/projects'
-
-// ── Animated counter ──
-const statsVisible = ref(false)
-const statsRef = ref<HTMLElement | null>(null)
-
-const stats = [
-  { value: 25, suffix: '+', label: 'Years of development', icon: 'calendar' },
-  { value: 10, suffix: '+', label: 'Organizations involved', icon: 'org' },
-  { value: 7, suffix: '', label: 'SI base quantities covered', icon: 'measure' },
-  { value: 380, suffix: '+', label: 'Units in the database', icon: 'units' },
-]
-
-const displayValues = ref(stats.map(() => 0))
-
-function animateCounters() {
-  stats.forEach((stat, i) => {
-    const target = stat.value
-    const duration = 1600
-    const start = performance.now()
-    const step = (now: number) => {
-      const progress = Math.min((now - start) / duration, 1)
-      const eased = 1 - Math.pow(1 - progress, 3) // ease-out cubic
-      displayValues.value[i] = Math.round(eased * target)
-      if (progress < 1) requestAnimationFrame(step)
-    }
-    requestAnimationFrame(step)
-  })
-}
-
-let statsObserver: IntersectionObserver | null = null
-
-onMounted(() => {
-  statsObserver = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting && !statsVisible.value) {
-        statsVisible.value = true
-        nextTick(animateCounters)
-      }
-    },
-    { threshold: 0.3 }
-  )
-  if (statsRef.value) statsObserver.observe(statsRef.value)
-})
-
-onUnmounted(() => {
-  statsObserver?.disconnect()
-})
 
 // ── Steps ──
 const steps = [
@@ -92,6 +44,15 @@ const steps = [
 ]
 
 const activeStep = ref(0)
+const stepCopied = ref(false)
+
+function copyStepCode() {
+  const el = document.createElement('div')
+  el.innerHTML = steps[activeStep.value].code
+  navigator.clipboard.writeText(el.textContent || '')
+  stepCopied.value = true
+  setTimeout(() => stepCopied.value = false, 2000)
+}
 
 // ── Preview units for CTA ──
 const previewUnits = [
@@ -103,44 +64,19 @@ const previewUnits = [
   { sym: 'W', name: 'watt', dim: 'L²·M·T⁻³' },
 ]
 
-// ── Floating shapes for hero ──
-const shapes = [
-  { type: 'circle', size: 80, x: '8%', y: '12%', duration: '6s', delay: '0s', opacity: 0.12 },
-  { type: 'square', size: 50, x: '82%', y: '18%', duration: '8s', delay: '1s', opacity: 0.08 },
-  { type: 'circle', size: 30, x: '90%', y: '65%', duration: '7s', delay: '2s', opacity: 0.10 },
-  { type: 'diamond', size: 45, x: '5%', y: '70%', duration: '9s', delay: '0.5s', opacity: 0.07 },
-  { type: 'circle', size: 20, x: '70%', y: '8%', duration: '5s', delay: '1.5s', opacity: 0.09 },
-  { type: 'square', size: 35, x: '25%', y: '80%', duration: '7.5s', delay: '3s', opacity: 0.06 },
+// ── SI dimensional symbols floating in hero ──
+const dimSymbols = [
+  { char: 'L', x: '6%', y: '15%', size: 48, duration: '10s', delay: '0s', opacity: 0.05 },
+  { char: 'M', x: '85%', y: '12%', size: 44, duration: '12s', delay: '1.5s', opacity: 0.04 },
+  { char: 'T', x: '92%', y: '60%', size: 40, duration: '9s', delay: '3s', opacity: 0.05 },
+  { char: 'I', x: '4%', y: '65%', size: 52, duration: '11s', delay: '0.5s', opacity: 0.04 },
+  { char: 'Θ', x: '72%', y: '8%', size: 36, duration: '8s', delay: '2s', opacity: 0.045 },
+  { char: 'N', x: '28%', y: '78%', size: 42, duration: '13s', delay: '4s', opacity: 0.04 },
+  { char: 'J', x: '55%', y: '82%', size: 38, duration: '10.5s', delay: '1s', opacity: 0.045 },
 ]
 
-// ── Scrolling unit ticker for hero ──
-const tickerUnits = [
-  { sym: 'm', name: 'metre' },
-  { sym: 'kg', name: 'kilogram' },
-  { sym: 's', name: 'second' },
-  { sym: 'A', name: 'ampere' },
-  { sym: 'K', name: 'kelvin' },
-  { sym: 'mol', name: 'mole' },
-  { sym: 'cd', name: 'candela' },
-  { sym: 'N', name: 'newton' },
-  { sym: 'J', name: 'joule' },
-  { sym: 'W', name: 'watt' },
-  { sym: 'Pa', name: 'pascal' },
-  { sym: 'Hz', name: 'hertz' },
-  { sym: 'V', name: 'volt' },
-  { sym: 'Ω', name: 'ohm' },
-  { sym: 'C', name: 'coulomb' },
-  { sym: 'F', name: 'farad' },
-  { sym: 'H', name: 'henry' },
-  { sym: 'T', name: 'tesla' },
-  { sym: 'Wb', name: 'weber' },
-  { sym: 'lm', name: 'lumen' },
-  { sym: 'lx', name: 'lux' },
-  { sym: 'Bq', name: 'becquerel' },
-  { sym: 'Gy', name: 'gray' },
-  { sym: 'Sv', name: 'sievert' },
-  { sym: 'kat', name: 'katal' },
-]
+// ── Static unit pills ──
+const unitPills = ['m', 'kg', 's', 'A', 'K', 'mol', 'cd', 'N', 'J', 'W', 'Pa', 'Hz', 'V', 'Ω']
 </script>
 
 <template>
@@ -152,35 +88,25 @@ const tickerUnits = [
     <div class="hero-glow"></div>
     <div class="hero-glow-2"></div>
 
-    <!-- Floating geometric shapes -->
-    <div class="hero-shapes">
-      <div
-        v-for="(shape, i) in shapes"
-        :key="i"
-        class="hero-shape"
-        :class="shape.type"
+    <!-- Floating SI dimensional symbols -->
+    <div class="hero-dims" aria-hidden="true">
+      <span
+        v-for="d in dimSymbols"
+        :key="d.char"
+        class="hero-dim"
         :style="{
-          width: shape.size + 'px',
-          height: shape.size + 'px',
-          left: shape.x,
-          top: shape.y,
-          animationDuration: shape.duration,
-          animationDelay: shape.delay,
-          opacity: shape.opacity,
+          left: d.x,
+          top: d.y,
+          fontSize: d.size + 'px',
+          animationDuration: d.duration,
+          animationDelay: d.delay,
+          opacity: d.opacity,
         }"
-      ></div>
+      >{{ d.char }}</span>
     </div>
 
     <img src="/symbol.svg" alt="UnitsML" class="home-hero-logo" />
 
-    <!-- Scrolling unit ticker -->
-    <div class="hero-ticker">
-      <div class="ticker-track">
-        <span v-for="(u, i) in [...tickerUnits, ...tickerUnits]" :key="i" class="ticker-item">
-          <code>{{ u.sym }}</code> {{ u.name }}
-        </span>
-      </div>
-    </div>
     <h1>
       Unambiguous models for
       <span class="accent">scientific units of measure</span>
@@ -191,32 +117,16 @@ const tickerUnits = [
       improving interoperability across information systems and scientific disciplines.
     </p>
     <div class="home-hero-actions">
-      <a href="/unitsdb/" class="btn btn-brand">
-        Explore UnitsDB
+      <a href="/learn/what-is-unitsml.html" class="btn btn-brand">
+        Learn about UnitsML
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
       </a>
-      <a href="/schemas.html" class="btn btn-teal">View Schemas</a>
-      <a href="/learn/what-is-unitsml.html" class="btn btn-outline">Learn about UnitsML</a>
+      <a href="/unitsdb/" class="btn btn-teal">Explore UnitsDB</a>
     </div>
-  </div>
 
-  <!-- ═══════════════════════════════════════════════════════
-       STATS
-       ═══════════════════════════════════════════════════════ -->
-  <div class="section stats-section" ref="statsRef">
-    <div class="stats-grid">
-      <div v-for="(stat, i) in stats" :key="stat.label" class="stat-card" :class="{ visible: statsVisible }">
-        <div class="stat-icon">
-          <svg v-if="stat.icon === 'calendar'" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-          <svg v-if="stat.icon === 'org'" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-          <svg v-if="stat.icon === 'measure'" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 12h20M12 2v20"/><circle cx="12" cy="12" r="3"/></svg>
-          <svg v-if="stat.icon === 'units'" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
-        </div>
-        <div class="stat-number">
-          <span class="stat-value">{{ displayValues[i] }}</span><span class="stat-suffix">{{ stat.suffix }}</span>
-        </div>
-        <div class="stat-label">{{ stat.label }}</div>
-      </div>
+    <!-- Static unit pills -->
+    <div class="hero-pills" aria-hidden="true">
+      <code v-for="u in unitPills" :key="u" class="hero-pill">{{ u }}</code>
     </div>
   </div>
 
@@ -295,110 +205,56 @@ const tickerUnits = [
         </button>
       </div>
       <div class="steps-code-panel">
-        <div class="step-code">
-          <div class="code-header">
-            <span class="code-lang">{{ steps[activeStep].lang || 'XML' }}</span>
-            <div class="code-dots">
-              <span></span><span></span><span></span>
+        <Transition name="step-fade" mode="out-in">
+          <div class="step-code" :key="activeStep">
+            <div class="code-header">
+              <span class="code-lang">{{ steps[activeStep].lang || 'XML' }}</span>
+              <div class="code-actions">
+                <button class="code-copy-btn" @click="copyStepCode" :title="stepCopied ? 'Copied!' : 'Copy code'">
+                  <svg v-if="!stepCopied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+                  <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>
+                </button>
+                <div class="code-dots">
+                  <span></span><span></span><span></span>
+                </div>
+              </div>
             </div>
+            <pre><code><span v-html="steps[activeStep].code"></span></code></pre>
           </div>
-          <pre><code><span v-html="steps[activeStep].code"></span></code></pre>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════
-       SOFTWARE
-       ═══════════════════════════════════════════════════════ -->
-  <div class="section">
-    <div class="section-header">
-      <h2>Software</h2>
-      <p>Core tools and libraries for working with UnitsML.</p>
-      <div class="section-divider"></div>
-    </div>
-    <div class="projects-grid">
-      <div v-for="project in projects" :key="project.name" class="project-card featured">
-        <div class="card-icon">{{ project.icon }}</div>
-        <h3>
-          {{ project.name }}
-          <span v-if="project.version" class="version">{{ project.version }}</span>
-        </h3>
-        <p class="description">{{ project.description }}</p>
-        <div class="links">
-          <a :href="project.github" class="primary" target="_blank" rel="noopener">GitHub</a>
-          <a v-if="project.docs" :href="project.docs" class="secondary" target="_blank" rel="noopener">Docs</a>
-          <a v-if="project.browse" :href="project.browse" class="teal-link" target="_blank" rel="noopener">Browse</a>
-        </div>
+        </Transition>
       </div>
     </div>
   </div>
 
   <!-- ═══════════════════════════════════════════════════════
-       WHY UNITSML
+       CTA STRIP
        ═══════════════════════════════════════════════════════ -->
   <div class="section">
-    <div class="section-header">
-      <h2>Why UnitsML?</h2>
-      <p>A standard designed for the scientific and engineering community.</p>
-      <div class="section-divider"></div>
-    </div>
-    <div class="features-grid">
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-        </div>
-        <h4>Unambiguous Encoding</h4>
-        <p>Eliminate ambiguity in scientific data exchange with standardized representations of units, quantities, and dimensions — expressible in XML, JSON, YAML, and more.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
+    <div class="cta-strip">
+      <a href="/schemas.html" class="cta-strip-card">
+        <div class="cta-strip-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
         </div>
-        <h4>Composable</h4>
-        <p>Designed to be incorporated into other markup languages — not standalone, but a building block for interoperable systems.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-        </div>
-        <h4>SI &amp; Non-SI Units</h4>
-        <p>Covers SI base units, derived units, and common non-SI units — meters, joules, angstroms, and beyond.</p>
-      </div>
-      <div class="feature-card">
-        <div class="feature-icon">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
-        </div>
-        <h4>Standards-Based</h4>
-        <p>Developed under CalConnect TC UNITS with roots at NIST, following rigorous open standards processes since 1998.</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- ═══════════════════════════════════════════════════════
-       SCHEMA BROWSER CTA
-       ═══════════════════════════════════════════════════════ -->
-  <div class="section">
-    <div class="schema-card">
-      <div class="schema-grid-bg"></div>
-      <div class="schema-content">
-        <div class="schema-badge">Live</div>
-        <h3>Browse XML Schemas</h3>
-        <p>
-          Interactive documentation for all UnitsML schema versions —
-          from the current 1.0 release back to the original 0.9 draft.
-        </p>
-        <div class="schema-url">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="opacity:0.4"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
-          <code>https://schema.unitsml.org</code>
+        <h4>Schemas</h4>
+        <p>UnitsML XML Schemas (XSD) and UnitsDB YAML schemas for encoding units of measure.</p>
+        <span class="cta-strip-link">Browse schemas →</span>
+      </a>
+      <a href="/software/" class="cta-strip-card">
+        <div class="cta-strip-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
         </div>
-        <div style="margin-top: 1.5rem; position: relative; z-index: 1;">
-          <a href="https://schema.unitsml.org" target="_blank" rel="noopener" class="btn btn-teal">
-            Open schema browser
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
-          </a>
+        <h4>Software</h4>
+        <p>Ruby gems and libraries for programmatic access to UnitsDB and UnitsML data.</p>
+        <span class="cta-strip-link">View software →</span>
+      </a>
+      <a href="/learn/what-is-unitsml.html" class="cta-strip-card">
+        <div class="cta-strip-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
         </div>
-      </div>
+        <h4>Learn</h4>
+        <p>Understand what UnitsML is, how it works, and how to incorporate it into your projects.</p>
+        <span class="cta-strip-link">Start learning →</span>
+      </a>
     </div>
   </div>
 </template>
@@ -410,8 +266,8 @@ const tickerUnits = [
   inset: 0;
   pointer-events: none;
   background-image:
-    linear-gradient(rgba(45,44,105,0.04) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(45,44,105,0.04) 1px, transparent 1px);
+    linear-gradient(rgba(45,44,105,0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(45,44,105,0.06) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent);
 }
@@ -437,134 +293,67 @@ const tickerUnits = [
   pointer-events: none;
 }
 
-/* ── Unit ticker ── */
-.hero-ticker {
-  position: relative;
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto 2rem;
-  overflow: hidden;
-  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
-  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
-}
-.ticker-track {
-  display: flex;
-  gap: 1.5rem;
-  animation: ticker-scroll 30s linear infinite;
-  width: max-content;
-}
-.ticker-item {
-  flex-shrink: 0;
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-3);
-  white-space: nowrap;
-  opacity: 0.6;
-}
-.ticker-item code {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  background: var(--vp-c-default-soft);
-  padding: 0.1em 0.35em;
-  border-radius: 3px;
-  margin-right: 0.25rem;
-}
-@keyframes ticker-scroll {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-.hero-shapes {
+/* ── SI dimensional symbols ── */
+.hero-dims {
   position: absolute;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 }
 
-.hero-shape {
+.hero-dim {
   position: absolute;
-  border: 2px solid var(--unitsml-navy);
-  animation: float 6s ease-in-out infinite;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 300;
+  line-height: 1;
+  color: var(--unitsml-navy);
+  animation: float-dim 8s ease-in-out infinite;
+  user-select: none;
 }
 
-.hero-shape.circle {
-  border-radius: 50%;
+@keyframes float-dim {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
 }
 
-.hero-shape.square {
-  border-radius: 4px;
-  transform: rotate(45deg);
+/* ── Static unit pills ── */
+.hero-pills {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+  position: relative;
 }
 
-.hero-shape.diamond {
+.hero-pill {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 0.2rem 0.55rem;
   border-radius: 4px;
-  transform: rotate(45deg);
-}
-
-/* ── Stats section ── */
-.stats-section {
-  padding: 2rem 0;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1.5rem;
-}
-
-.stat-card {
-  text-align: center;
-  padding: 2rem 1rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 16px;
-  transition: all 0.4s ease;
-  opacity: 0;
-  transform: translateY(16px);
-}
-
-.stat-card.visible {
-  opacity: 1;
-  transform: translateY(0);
+  background: var(--vp-c-default-soft);
+  color: var(--vp-c-text-3);
+  opacity: 0.5;
+  transition: opacity 0.2s;
 }
 
-.stat-card:nth-child(2) { transition-delay: 80ms; }
-.stat-card:nth-child(3) { transition-delay: 160ms; }
-.stat-card:nth-child(4) { transition-delay: 240ms; }
-
-.stat-card:hover {
-  border-color: var(--vp-c-brand-1);
-  box-shadow: 0 4px 20px rgba(45, 44, 105, 0.08);
+.hero-pill:hover {
+  opacity: 0.8;
 }
 
-.stat-icon {
-  color: var(--vp-c-brand-1);
-  margin-bottom: 0.75rem;
-  display: flex;
-  justify-content: center;
-}
-
-.stat-number {
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1;
-  margin-bottom: 0.5rem;
-  background: linear-gradient(135deg, var(--unitsml-navy), var(--unitsml-teal-dark));
+/* ── Hero accent gradient animation ── */
+.home-hero h1 .accent {
+  background: linear-gradient(135deg, var(--unitsml-navy) 0%, var(--unitsml-teal-dark) 50%, var(--unitsml-blue) 100%);
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  font-variant-numeric: tabular-nums;
-}
-
-.stat-suffix {
-  font-size: 1.5rem;
-  font-weight: 600;
 }
 
-.stat-label {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-  font-weight: 500;
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
 }
 
 /* ── UnitsDB CTA ── */
@@ -748,6 +537,12 @@ const tickerUnits = [
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  animation: step-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes step-pop {
+  0% { transform: scale(0.9); }
+  100% { transform: scale(1); }
 }
 
 .step-tab-text {
@@ -780,6 +575,12 @@ const tickerUnits = [
   min-height: 260px;
 }
 
+/* Step fade transition */
+.step-fade-enter-active,
+.step-fade-leave-active { transition: opacity 0.2s ease; }
+.step-fade-enter-from,
+.step-fade-leave-to { opacity: 0; }
+
 .code-header {
   display: flex;
   align-items: center;
@@ -796,6 +597,25 @@ const tickerUnits = [
   letter-spacing: 0.05em;
 }
 
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.code-copy-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: rgba(255,255,255,0.3);
+  transition: color 0.15s;
+}
+
+.code-copy-btn:hover {
+  color: rgba(255,255,255,0.7);
+}
+
 .code-dots {
   display: flex;
   gap: 5px;
@@ -829,52 +649,71 @@ const tickerUnits = [
 .step-code :deep(.xml-val) { color: #98c379; }
 .step-code :deep(.xml-comment) { color: #5c6370; font-style: italic; }
 
-/* ── Schema card ── */
-.schema-card {
-  position: relative;
-  overflow: hidden;
+/* ── CTA Strip ── */
+.cta-strip {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
 }
 
-.schema-grid-bg {
-  position: absolute;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
-  background-size: 32px 32px;
-  pointer-events: none;
+.cta-strip-card {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 16px;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.schema-content {
-  position: relative;
-  z-index: 1;
+.cta-strip-card:hover {
+  border-color: var(--unitsml-navy);
+  box-shadow: 0 8px 30px rgba(45, 44, 105, 0.10);
+  transform: translateY(-2px);
 }
 
-.schema-badge {
-  display: inline-block;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 0.25rem 0.75rem;
-  border-radius: 4px;
-  background: rgba(48, 223, 192, 0.15);
-  color: var(--unitsml-teal-light);
+.cta-strip-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 1rem;
+  background: linear-gradient(135deg, rgba(45, 44, 105, 0.08), rgba(87, 160, 254, 0.08));
+  color: var(--unitsml-navy);
 }
 
-.schema-url {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+.cta-strip-card h4 {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.cta-strip-card p {
+  font-size: 0.875rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  flex: 1;
+}
+
+.cta-strip-link {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+  transition: color 0.2s;
+}
+
+.cta-strip-card:hover .cta-strip-link {
+  color: var(--unitsml-teal-dark);
 }
 
 /* ── Responsive ── */
 @media (max-width: 768px) {
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .steps-layout {
     grid-template-columns: 1fr;
   }
@@ -883,11 +722,15 @@ const tickerUnits = [
     position: static;
     overflow: hidden;
   }
-}
 
-@media (max-width: 480px) {
-  .stats-grid {
+  .cta-strip {
     grid-template-columns: 1fr;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-dim { animation: none !important; }
+  .home-hero h1 .accent { animation: none !important; }
+  .step-tab.active .step-tab-num { animation: none !important; }
+}
 </style>
diff --git a/.vitepress/theme/components/NavScrollHandler.vue b/.vitepress/theme/components/NavScrollHandler.vue
index 552ae9c..fbd8bfd 100644
--- a/.vitepress/theme/components/NavScrollHandler.vue
+++ b/.vitepress/theme/components/NavScrollHandler.vue
@@ -76,9 +76,21 @@ function init() {
   handleScroll()
 }
 
+let scrollRevealObserver: IntersectionObserver | null = null
+
 onMounted(() => {
   init()
   window.addEventListener('scroll', handleScroll, { passive: true })
+
+  scrollRevealObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible')
+        scrollRevealObserver?.unobserve(entry.target)
+      }
+    })
+  }, { threshold: 0.1 })
+  document.querySelectorAll('.reveal').forEach(el => scrollRevealObserver!.observe(el))
 })
 
 onUnmounted(() => {
diff --git a/.vitepress/theme/components/UnitsDBBrowser.vue b/.vitepress/theme/components/UnitsDBBrowser.vue
index a93c584..6b72870 100644
--- a/.vitepress/theme/components/UnitsDBBrowser.vue
+++ b/.vitepress/theme/components/UnitsDBBrowser.vue
@@ -187,6 +187,7 @@ async function dlDataset() {
 
 function onKeydown(e: KeyboardEvent) {
   if (e.key === '/' && document.activeElement?.tagName !== 'INPUT') { e.preventDefault(); searchInput.value?.focus() }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchInput.value?.focus() }
   if (e.key === 'Escape' && q.value) { q.value = ''; searchInput.value?.blur() }
 }
 onMounted(() => window.addEventListener('keydown', onKeydown))
@@ -213,8 +214,8 @@ onUnmounted(() => {
 
     <div class="udb-content">
       <div v-if="!loading" class="stats-bar">
-        <div class="stat-group">
-          <button v-for="tab in TABS" :key="tab.key" class="stat-pill" :class="{ active: activeTab === tab.key }" @click="switchTab(tab.key)">
+        <div class="stat-group" role="tablist" aria-label="Entity types">
+          <button v-for="tab in TABS" :key="tab.key" class="stat-pill" :class="{ active: activeTab === tab.key }" :data-type="tab.key" role="tab" :aria-selected="activeTab === tab.key" @click="switchTab(tab.key)">
             <span class="sp-val">{{ cnt(tab.key) }}</span>
             <span class="sp-lbl">{{ tab.label }}</span>
           </button>
@@ -246,7 +247,7 @@ onUnmounted(() => {
       <div class="search-row">
         <div class="search-box">
           <svg class="si" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-          <input ref="searchInput" v-model="q" type="text" class="si-input" placeholder="Search by name, symbol, ID… ( / )" />
+          <input ref="searchInput" v-model="q" type="text" class="si-input" placeholder="Search by name, symbol, ID… (⌘K)" aria-label="Search units and quantities" />
           <button v-if="q" class="si-clear" @click="q = ''">&times;</button>
         </div>
         <span class="res-n">{{ filtered.length }} result{{ filtered.length !== 1 ? 's' : '' }}</span>
@@ -274,7 +275,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Units ── -->
-      <div v-else-if="activeTab === 'units'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'units'" class="dtbl-wrap" role="tabpanel" aria-label="Units listing">
       <table class="dtbl">
         <thead><tr><th class="c-sym">Symbol</th><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-dim">Dimension</th><th class="c-tag">Type</th><th class="c-qty">Quantity</th></tr></thead>
         <tbody>
@@ -291,7 +292,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Quantities ── -->
-      <div v-else-if="activeTab === 'quantities'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'quantities'" class="dtbl-wrap" role="tabpanel" aria-label="Quantities listing">
       <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-tag">Type</th><th class="c-dim">Dimension</th><th class="c-cnt">Units</th></tr></thead>
         <tbody>
@@ -307,7 +308,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Dimensions ── -->
-      <div v-else-if="activeTab === 'dimensions'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'dimensions'" class="dtbl-wrap" role="tabpanel" aria-label="Dimensions listing">
       <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-dim">Expression</th><th class="c-cnt">Quantities</th><th class="c-tag">Dim-less</th></tr></thead>
         <tbody>
@@ -323,7 +324,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Prefixes ── -->
-      <div v-else-if="activeTab === 'prefixes'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'prefixes'" class="dtbl-wrap" role="tabpanel" aria-label="Prefixes listing">
       <table class="dtbl">
         <thead><tr><th class="c-sym">Symbol</th><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-fact">Factor</th><th class="c-cnt">Value</th></tr></thead>
         <tbody>
@@ -339,7 +340,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Scales ── -->
-      <div v-else-if="activeTab === 'scales'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'scales'" class="dtbl-wrap" role="tabpanel" aria-label="Scales listing">
       <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-props">Properties</th></tr></thead>
         <tbody>
@@ -353,7 +354,7 @@ onUnmounted(() => {
       </div>
 
       <!-- ── Systems ── -->
-      <div v-else-if="activeTab === 'unit_systems'" class="dtbl-wrap">
+      <div v-else-if="activeTab === 'unit_systems'" class="dtbl-wrap" role="tabpanel" aria-label="Systems listing">
       <table class="dtbl">
         <thead><tr><th class="c-name">Name</th><th class="c-uid">UnitsML ID</th><th class="c-sym">Short</th><th class="c-cnt">Units</th><th class="c-tag">Acceptable</th></tr></thead>
         <tbody>
@@ -421,6 +422,12 @@ onUnmounted(() => {
 }
 .stat-pill:hover { background: var(--vp-c-bg); border-color: var(--vp-c-divider); color: var(--vp-c-text-2); }
 .stat-pill.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
+.stat-pill[data-type="units"].active { background: #14b8a6; border-color: #14b8a6; }
+.stat-pill[data-type="quantities"].active { background: #57a0fe; border-color: #57a0fe; }
+.stat-pill[data-type="dimensions"].active { background: #2d2c69; border-color: #2d2c69; }
+.stat-pill[data-type="prefixes"].active { background: #8b5cf6; border-color: #8b5cf6; }
+.stat-pill[data-type="scales"].active { background: #f59e0b; border-color: #f59e0b; color: #1f1e4a; }
+.stat-pill[data-type="unit_systems"].active { background: #6b7280; border-color: #6b7280; }
 .sp-val { font-weight: 700; font-size: 0.875rem; }
 .sp-lbl { font-size: 0.6875rem; }
 .stat-divider { display: none; width: 1px; height: 1.5rem; background: var(--vp-c-divider); flex-shrink: 0; }
diff --git a/.vitepress/theme/components/UnitsDBEntityDetail.vue b/.vitepress/theme/components/UnitsDBEntityDetail.vue
index fd2f8c5..50587b2 100644
--- a/.vitepress/theme/components/UnitsDBEntityDetail.vue
+++ b/.vitepress/theme/components/UnitsDBEntityDetail.vue
@@ -545,6 +545,11 @@ async function copyLink() {
         </div>
       </div>
 
+        <!-- Mobile floating back -->
+        <a v-if="entity" :href="`/unitsdb/${URL_TYPE[entityType] || entityType}`" class="ep-back-float">
+          ← {{ TYPE_PLURAL[entityType] }}
+        </a>
+
         <!-- Raw JSON toggle -->
         <div class="ep-json-area">
           <button class="ep-json-toggle" @click="showJson = !showJson">
@@ -778,6 +783,8 @@ async function copyLink() {
 .ep-auth-ucum { border-color: rgba(87,160,254,0.3); }
 .ep-auth-qudt { border-color: rgba(139,92,246,0.3); }
 .ep-auth-nist { background: rgba(45,44,105,0.1); border-color: rgba(45,44,105,0.3); color: #2d2c69; }
+.dark .ep-auth-badge { background: var(--vp-c-bg-soft); }
+.dark .ep-auth-nist { color: var(--vp-c-brand-1); background: rgba(110,109,186,0.15); }
 .ep-auth-label { font-size: 0.75rem; font-weight: 500; color: var(--vp-c-text-1); }
 
 /* Names */
@@ -801,6 +808,23 @@ async function copyLink() {
 .ep-json-view { margin-top: 0.5rem; border: 1px solid var(--vp-c-divider); border-radius: 6px; overflow: hidden; }
 .ep-json-view pre { margin: 0; padding: 0.75rem; font-size: 0.6875rem; line-height: 1.5; overflow-x: auto; background: var(--vp-c-bg-soft); }
 
+/* Floating back button (mobile only) */
+.ep-back-float {
+  display: none;
+  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
+  padding: 0.5rem 1.25rem; border-radius: 999px;
+  background: var(--vp-c-brand-1); color: white;
+  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 50;
+  align-items: center; gap: 0.3rem;
+  transition: background 0.2s;
+}
+.ep-back-float:hover { background: var(--vp-c-brand-2); color: white; }
+
+@media (max-width: 768px) {
+  .ep-back-float { display: inline-flex; }
+}
+
 /* ── Desktop overrides ── */
 
 @media (min-width: 640px) {
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index e9db4fa..3355596 100644
--- a/.vitepress/theme/custom.css
+++ b/.vitepress/theme/custom.css
@@ -88,12 +88,19 @@
 }
 
 .home-hero h1 .accent {
-  background: linear-gradient(135deg, var(--unitsml-navy) 0%, var(--unitsml-teal-dark) 100%);
+  background: linear-gradient(135deg, var(--unitsml-navy) 0%, var(--unitsml-teal-dark) 50%, var(--unitsml-blue) 100%);
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
 .home-hero .tagline {
   font-size: 1.25rem;
   color: var(--vp-c-text-2);
@@ -178,7 +185,7 @@
    ========================================================================== */
 
 .section {
-  margin: 5rem 0;
+  margin: 6rem 0;
 }
 
 .section-header {
@@ -508,16 +515,6 @@
    Animations & Motion
    ========================================================================== */
 
-@keyframes float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-12px) rotate(3deg); }
-}
-
-@keyframes float-delayed {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-8px) rotate(-2deg); }
-}
-
 @keyframes pulse-glow {
   0%, 100% { opacity: 0.4; }
   50% { opacity: 0.8; }
@@ -731,3 +728,62 @@ body {
 .unitsdb-full .vp-doc > div > h1 {
   display: none;
 }
+
+/* ==========================================================================
+   Scroll Reveal
+   ========================================================================== */
+
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ==========================================================================
+   Focus Indicators
+   ========================================================================== */
+
+.btn:focus-visible,
+.step-tab:focus-visible,
+.tab-btn:focus-visible,
+.cta-strip-card:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Reduced Motion
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .home-hero h1 .accent,
+  .hero-dim,
+  .step-tab.active .step-tab-num,
+  .stat-card,
+  .feature-card,
+  .project-card,
+  .section[data-revealed],
+  .ticker-track {
+    animation: none !important;
+  }
+
+  .btn,
+  .step-tab,
+  .cta-strip-card,
+  .project-card,
+  .feature-card {
+    transition: none !important;
+  }
+
+  .stat-card,
+  .section[data-revealed],
+  .reveal {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
diff --git a/TODO.improve/01-hero-polish.md b/TODO.improve/01-hero-polish.md
new file mode 100644
index 0000000..7dbc5dc
--- /dev/null
+++ b/TODO.improve/01-hero-polish.md
@@ -0,0 +1,117 @@
+# 01 — Hero Polish
+
+## Problem
+
+The hero has visual noise that breaks reading flow and dilutes the primary message.
+
+### Issues
+
+1. **Ticker above headline breaks reading flow** — The scrolling unit ticker sits *between* the logo and the `<h1>`, so the natural scan path (logo → headline → tagline → CTA) is interrupted by a peripheral animation competing for attention. It adds motion without adding comprehension.
+
+2. **Three CTAs dilute the primary action** — "Explore UnitsDB", "View Schemas", "Learn about UnitsML". Three equal-weight buttons give no clear next step. The user's primary question is "what is this?" — not "take me to the database".
+
+3. **Floating shapes are generic noise** — Circles, squares, and diamonds don't connect to UnitsML's domain (scientific units). They add animation for animation's sake and make the hero feel like a generic SaaS template.
+
+4. **Grid background is too subtle to notice** — The 48px grid lines at 4% opacity are nearly invisible. Either commit to the grid aesthetic or remove it.
+
+## Plan
+
+### Step 1: Restructure hero visual hierarchy
+
+Reorder: logo → headline → tagline → CTAs → ambient decoration. The ticker moves below CTAs as a subtle "pills" strip (not scrolling — static chips showing `m kg s A K mol cd N J W Pa`).
+
+**File**: `HomePage.vue` lines ~146–201 (template), ~440–475 (ticker CSS)
+
+- Remove `hero-ticker` scrolling ticker from between logo and `<h1>`
+- Replace with a static "SI unit pills" strip *below* the CTAs:
+  ```
+  m · kg · s · A · K · mol · cd · N · J · W · Pa · Hz · V · Ω
+  ```
+  Rendered as small inline `<code>` chips, horizontally centered, subtle opacity (0.5), no animation. This communicates "we deal with scientific units" without breaking flow.
+
+### Step 2: Reduce CTAs to 2
+
+**File**: `HomePage.vue` lines ~193–200
+
+Replace:
+```html
+<a href="/unitsdb/" class="btn btn-brand">Explore UnitsDB</a>
+<a href="/schemas.html" class="btn btn-teal">View Schemas</a>
+<a href="/learn/what-is-unitsml.html" class="btn btn-outline">Learn about UnitsML</a>
+```
+
+With:
+```html
+<a href="/learn/what-is-unitsml.html" class="btn btn-brand">
+  Learn about UnitsML
+  <svg arrow icon />
+</a>
+<a href="/unitsdb/" class="btn btn-teal">Explore UnitsDB</a>
+```
+
+Rationale: First-time visitors need context before they explore a database. "Learn about UnitsML" is the natural first step; "Explore UnitsDB" is the secondary action for returning users or the curious. "View Schemas" is reachable from Learn dropdown and from the Schema Browser CTA at the bottom.
+
+### Step 3: Replace floating shapes with domain-specific ambient decoration
+
+**File**: `HomePage.vue` lines ~107–114 (shapes data), ~477–502 (shapes CSS)
+
+Replace the 6 generic geometric shapes with 7 subtle SI base quantity symbols floating at low opacity:
+
+```
+L  M  T  I  Θ  N  J
+```
+
+These are the actual dimensional symbols (Length, Mass, Time, Electric current, Temperature, Amount, Luminous intensity) — they're meaningful to the domain and signal "this is about scientific dimensions" even before the user reads a single word.
+
+- Render as large, thin, serif text (font: Georgia or similar, weight 300, size ~40px)
+- Very low opacity (0.04–0.08)
+- Gentle float animation (existing `float` keyframes, slower — 8–12s)
+- No border, just text
+
+### Step 4: Strengthen or remove grid background
+
+**File**: `HomePage.vue` lines ~408–417
+
+Option A (strengthen): Increase grid opacity from 0.04 → 0.06, add a subtle radial gradient overlay that creates a "blueprint paper" feel.
+
+Option B (remove): Delete the grid entirely. The glow effects + dimensional symbols provide enough visual interest.
+
+Recommendation: Option A — the grid subtly reinforces "precision/standards" messaging.
+
+### Step 5: Add gradient text animation to headline accent
+
+**File**: `HomePage.vue` or `custom.css`
+
+Add a slow gradient shift on `.home-hero h1 .accent`:
+
+```css
+.home-hero h1 .accent {
+  background: linear-gradient(135deg, var(--unitsml-navy) 0%, var(--unitsml-teal-dark) 50%, var(--unitsml-blue) 100%);
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+@keyframes gradient-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+```
+
+This adds a subtle, living quality to the hero without being distracting. The gradient shifts between navy → teal → blue, reinforcing the brand palette.
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `HomePage.vue` | Remove ticker, add static pills, reduce CTAs, replace shapes with dimensional symbols |
+| `custom.css` | Add `gradient-shift` keyframe animation for hero accent text |
+
+## Verification
+
+1. Hero loads cleanly: logo → headline (with animated gradient accent) → tagline → 2 CTAs → unit pills
+2. No scrolling animation above the fold
+3. Floating dimensional symbols visible at very low opacity
+4. Both CTAs are clearly differentiated (brand primary + teal secondary)
+5. Mobile: unit pills wrap, CTAs stack vertically (already handled)
diff --git a/TODO.improve/02-homepage-section-reduction.md b/TODO.improve/02-homepage-section-reduction.md
new file mode 100644
index 0000000..0342730
--- /dev/null
+++ b/TODO.improve/02-homepage-section-reduction.md
@@ -0,0 +1,124 @@
+# 02 — Homepage Section Reduction
+
+## Problem
+
+The homepage has 8 sections, which creates scroll fatigue and buries important content. Users arriving at the homepage need a concise narrative arc, not an encyclopedic tour.
+
+### Current sections (in order)
+
+1. Hero (logo, ticker, headline, tagline, 3 CTAs)
+2. Stats (4 animated counter cards)
+3. UnitsDB CTA (dark card with preview window)
+4. Ecosystem Diagram (interactive SVG)
+5. How UnitsML Works (3-step tabbed interface)
+6. Software (project cards — currently only unitsml-ruby)
+7. Why UnitsML? (4 feature cards)
+8. Schema Browser CTA (dark card linking to schema.unitsml.org)
+
+### Issues
+
+1. **Stats (#2) and UnitsDB CTA (#3) are redundant** — both prominently display unit counts (380+, 199, 92, etc.). The stats section exists only to show animated counters; the UnitsDB CTA already communicates the same information with more context.
+
+2. **Software (#6) is anticlimactic** — showing a single card ("unitsml-ruby") in a dedicated "Software" section feels thin. This belongs on `/software/`.
+
+3. **Why UnitsML? (#7) duplicates learn content** — the 4 feature cards restate content from `/learn/what-is-unitsml`. Homepage visitors don't need to read the same arguments twice.
+
+4. **Schema Browser CTA (#8) is heavyweight for an external link** — the full-width dark card is visually on par with the UnitsDB CTA (#3), but it just links to schema.unitsml.org. It should be lighter.
+
+5. **No clear narrative arc** — the sections don't build on each other. It reads like a collection of promotional blocks, not a guided story.
+
+## Plan
+
+### Target: 5 sections
+
+1. **Hero** (cleaned up per TODO 01)
+2. **UnitsDB CTA** (absorbs stats data)
+3. **Ecosystem Diagram**
+4. **How UnitsML Works**
+5. **Closing CTA strip** (replaces Software, Why UnitsML, and Schema Browser)
+
+### Step 1: Remove Stats section, absorb into UnitsDB CTA
+
+**File**: `HomePage.vue`
+
+- Delete the entire `<!-- STATS -->` section (lines ~206–221) and its CSS
+- Remove `statsRef`, `statsVisible`, `displayValues`, `animateCounters`, `statsObserver` from script
+- The UnitsDB CTA already has `cta-types` chips showing counts (380 Units, 199 Quantities, 92 Dimensions, 33 Prefixes, 7 Systems). No data loss.
+
+### Step 2: Remove Software section
+
+**File**: `HomePage.vue`
+
+- Delete the `<!-- SOFTWARE -->` section (lines ~313–335)
+- Remove `projects` import
+- Software lives at `/software/` — accessible from nav bar. Homepage doesn't need to repeat it.
+
+### Step 3: Remove Why UnitsML section
+
+**File**: `HomePage.vue`
+
+- Delete the `<!-- WHY UNITSML -->` section (lines ~340–376)
+- The 4 feature card arguments (Unambiguous Encoding, Composable, SI & Non-SI, Standards-Based) are already in `/learn/what-is-unitsml.html`
+
+### Step 4: Replace Schema Browser CTA with a compact closing CTA strip
+
+**File**: `HomePage.vue`
+
+Replace the full-width dark `schema-card` (lines ~381–403) with a lightweight 3-column CTA strip:
+
+```
+┌─────────────────┬─────────────────┬─────────────────┐
+│  📄 Schemas      │  💎 Software     │  📖 Learn       │
+│  Browse XML &    │  unitsml-ruby   │  What is UnitsML│
+│  YAML schemas    │  and more       │  and more       │
+│  [Open →]        │  [View →]       │  [Read →]       │
+└─────────────────┴─────────────────┴─────────────────┘
+```
+
+- Light background (`var(--vp-c-bg-soft)`)
+- 1px border, rounded corners
+- Each column: icon + title + 1-line description + text link
+- Columns link to: `/schemas.html`, `/software/`, `/learn/what-is-unitsml.html`
+- This gives visitors 3 clear next steps at the bottom without heavy visual weight
+
+### Step 5: Adjust section spacing
+
+With fewer sections, increase spacing between remaining sections for breathing room:
+
+- Change `.section { margin: 5rem 0; }` → `.section { margin: 6rem 0; }` in `custom.css`
+- The homepage should feel spacious, not cramped
+
+## Resulting homepage structure
+
+```
+┌─────────────────────────────────────┐
+│  HERO                               │  ← Cleaned per TODO 01
+│  Logo + headline + tagline + 2 CTAs │
+│  Static unit pills strip            │
+├─────────────────────────────────────┤
+│  UNITSDB CTA                        │  ← Dark card with preview
+│  380+ units, 199 quantities...      │     (stats absorbed here)
+├─────────────────────────────────────┤
+│  ECOSYSTEM DIAGRAM                  │  ← Unchanged
+├─────────────────────────────────────┤
+│  HOW UNITSML WORKS                  │  ← Unchanged (3-step tabs)
+├─────────────────────────────────────┤
+│  CTA STRIP                          │  ← NEW: Schemas | Software | Learn
+└─────────────────────────────────────┘
+```
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `HomePage.vue` | Remove Stats, Software, Why UnitsML, Schema Browser sections; add CTA strip |
+| `custom.css` | Adjust section spacing |
+
+## Verification
+
+1. Homepage has exactly 5 distinct sections
+2. No duplicate information (stats vs UnitsDB counts)
+3. Scroll depth is manageable (~3 viewport heights total)
+4. Every section serves a distinct purpose in the narrative arc
+5. CTA strip provides 3 clear navigation paths
+6. Mobile: CTA strip stacks vertically
diff --git a/TODO.improve/03-navigation-restructure.md b/TODO.improve/03-navigation-restructure.md
new file mode 100644
index 0000000..ffaab3a
--- /dev/null
+++ b/TODO.improve/03-navigation-restructure.md
@@ -0,0 +1,123 @@
+# 03 — Navigation & Information Architecture
+
+## Problem
+
+The nav bar is flat (6 items), Schemas needs prominent placement, and the sidebar doesn't cover UnitsDB or Schemas pages well. Users need clear paths to the two most important resources: UnitsDB and Schemas.
+
+## Current Nav
+
+```
+UnitsDB · Schemas · Learn ▾ · Software · Blog · About
+```
+
+### Issues
+
+1. **Schemas page has no sidebar** — the sidebar config has `/schemas` but it's a single-item sidebar. The schemas page covers both UnitsML XML Schemas and UnitsDB YAML Schemas, with subsections that would benefit from a sidebar TOC.
+2. **UnitsDB page has no sidebar** — by design (full-width layout), but once inside an entity detail page, there's no way to navigate to another entity type except the breadcrumb back to UnitsDB index.
+3. **Blog has no sidebar** — blog posts use the default VitePress behavior. Not critical, but the blog index could benefit from a "Recent posts" sidebar.
+
+## Plan
+
+### Step 1: Keep current nav bar as-is
+
+```
+UnitsDB · Schemas · Learn ▾ · Software · Blog · About
+```
+
+Schemas stays top-level because:
+- Schema users arrive at the site specifically to understand or reference schemas
+- Schemas is a core product alongside UnitsDB
+- It's a high-value destination for developers integrating UnitsML
+
+### Step 2: Improve Schemas sidebar
+
+**File**: `.vitepress/config.ts`
+
+Expand the `/schemas` sidebar to include anchor links for page sections:
+
+```ts
+'/schemas': [
+  {
+    text: 'Schemas',
+    items: [
+      { text: 'Overview', link: '/schemas' },
+      { text: 'UnitsML XML Schemas', link: '/schemas#unitsml-xml-schemas' },
+      { text: 'UnitsDB YAML Schemas', link: '/schemas#unitsdb-yaml-schemas' },
+      { text: 'Schema Browser', link: '/schemas#schema-browser' },
+    ]
+  }
+]
+```
+
+### Step 3: Add Schemas page anchor IDs
+
+**File**: `schemas.md`
+
+Ensure each major section has a proper heading with an ID that the sidebar can link to:
+- `## UnitsML XML Schemas` (already exists)
+- `## UnitsDB YAML Schemas` (already exists)
+- `## Schema Browser` or similar for the external schema browser section
+
+### Step 4: Improve UnitsDB sub-navigation
+
+The UnitsDB browser already has entity-type tabs (Units, Quantities, Dimensions, Prefixes, Scales, Systems). For entity detail pages, the breadcrumb provides navigation back. No structural change needed, but add a subtle "back to listing" floating button on mobile for easier navigation.
+
+**File**: `UnitsDBEntityDetail.vue`
+
+Add a floating back button visible on mobile:
+```html
+<a :href="`/unitsdb/${entityType}`" class="ep-back-float" v-if="entity">
+  ← {{ TYPE_PLURAL[entityType] }}
+</a>
+```
+
+```css
+.ep-back-float {
+  display: none; /* hidden on desktop */
+  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
+  padding: 0.5rem 1.25rem; border-radius: 999px;
+  background: var(--vp-c-brand-1); color: white;
+  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 50;
+}
+@media (max-width: 768px) {
+  .ep-back-float { display: inline-flex; }
+}
+```
+
+### Step 5: Add "Get Started" to the top-level nav or hero
+
+"Get Started" is currently buried in the Learn dropdown. Since it's a key conversion page, ensure it's prominent:
+- Keep in Learn dropdown (current)
+- Add as a secondary CTA in the hero (done in TODO 01 — "Learn about UnitsML" links to `/learn/what-is-unitsml.html`)
+- Add a "Quick Start" link in the footer
+
+**File**: `.vitepress/config.ts` footer
+
+```ts
+footer: {
+  message: `<a href="/unitsdb/">UnitsDB</a> · <a href="/schemas.html">Schemas</a> · <a href="/learn/what-is-unitsml.html">Learn</a> · <a href="/get-started.html">Get Started</a> · <a href="https://github.com/unitsml">GitHub</a>`,
+}
+```
+
+### Step 6: Ensure footer links are comprehensive
+
+Current footer: `UnitsDB · Schemas · Learn · GitHub`
+Updated footer: `UnitsDB · Schemas · Learn · Get Started · Software · GitHub`
+
+**File**: `.vitepress/config.ts`
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `.vitepress/config.ts` | Expand schemas sidebar, update footer links |
+| `schemas.md` | Verify anchor IDs exist for sidebar linking |
+| `UnitsDBEntityDetail.vue` | Add mobile floating back button |
+
+## Verification
+
+1. Schemas page has a sidebar with section links
+2. Footer has all key navigation links
+3. Mobile: floating back button appears on entity detail pages
+4. Nav bar unchanged (Schemas stays top-level)
diff --git a/TODO.improve/04-unitsdb-browser-ux.md b/TODO.improve/04-unitsdb-browser-ux.md
new file mode 100644
index 0000000..17ee3c5
--- /dev/null
+++ b/TODO.improve/04-unitsdb-browser-ux.md
@@ -0,0 +1,158 @@
+# 04 — UnitsDB Browser UX
+
+## Problem
+
+The UnitsDB browser is functional but lacks polish that would make it feel like a professional data explorer. Specific friction points: search has no affordances, table rows are informationally dense but visually flat, and the stats bar doesn't convey the richness of the dataset.
+
+## Current State
+
+- Top: stats bar showing entity type counts + search box
+- Tabs: Units | Quantities | Dimensions | Prefixes | Scales | Systems
+- Content: scrollable data tables with sortable-looking (but not sortable) columns
+- Each row links to an entity detail page
+
+## Plan
+
+### Step 1: Search UX improvements
+
+**File**: `UnitsDBBrowser.vue`
+
+1. **Add a clear button** (×) inside the search input when it has a value:
+
+```html
+<div class="search-box">
+  <svg search-icon />
+  <input v-model="search" placeholder="Search units, quantities..." />
+  <button v-if="search" class="search-clear" @click="search = ''">×</button>
+</div>
+```
+
+```css
+.search-clear {
+  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; cursor: pointer;
+  color: var(--vp-c-text-3); font-size: 1rem; padding: 0 4px;
+}
+.search-clear:hover { color: var(--vp-c-text-1); }
+```
+
+2. **Add keyboard shortcut hint** — show `⌘K` / `Ctrl+K` placeholder text:
+   ```
+   placeholder="Search units, quantities… (⌘K)"
+   ```
+
+3. **Add keyboard listener** — `Cmd/Ctrl+K` focuses the search box:
+```ts
+onMounted(() => {
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault()
+      searchInputRef.value?.focus()
+    }
+  })
+})
+```
+
+### Step 2: Table row hover preview tooltip
+
+**File**: `UnitsDBBrowser.vue`
+
+On hover over a table row, show a subtle tooltip with the entity's dimension formula (for units) or description snippet:
+
+```html
+<tr v-for="item in filteredItems" :key="item.id" class="dtbl-row"
+    :title="item.expression || item.description || ''">
+```
+
+This is a zero-JS enhancement — just the native `title` attribute. For richer tooltips, use the existing `.tooltip::after` CSS pattern from `custom.css`.
+
+### Step 3: Inline dimension formula rendering in Units table
+
+**File**: `UnitsDBBrowser.vue`
+
+The units table currently shows: Symbol | Name | ID | Type
+
+Add a "Dimension" column that shows the expression (e.g., `L·M·T⁻²`) inline. This is the most useful piece of information for units — it tells you at a glance what physical quantity the unit measures.
+
+The expression data is already in the JSON (from `dimensions.json` via the dimension reference). Need to resolve the cross-reference at render time:
+
+```ts
+const dimensionMap = computed(() => {
+  const dims = store.value.dimensions ?? []
+  const map: Record<string, string> = {}
+  for (const d of dims) map[d.id] = d.expression
+  return map
+})
+```
+
+Then in the units table template, add a column:
+```html
+<td class="dtbl-cell">{{ dimensionMap[item.dimension?.id] || '—' }}</td>
+```
+
+### Step 4: Visual differentiation for entity types
+
+**File**: `UnitsDBBrowser.vue`
+
+The 6 tab buttons look identical. Add a subtle color accent per type:
+- Units: teal
+- Quantities: blue
+- Dimensions: navy
+- Prefixes: purple
+- Scales: orange
+- Systems: gray
+
+Apply via a class per tab:
+```css
+.tab-btn[data-type="units"] { --tab-accent: var(--unitsml-teal); }
+.tab-btn[data-type="quantities"] { --tab-accent: var(--unitsml-blue); }
+.tab-btn[data-type="dimensions"] { --tab-accent: var(--unitsml-navy); }
+/* etc. */
+.tab-btn.active { border-bottom-color: var(--tab-accent); color: var(--tab-accent); }
+```
+
+### Step 5: Results count indicator
+
+**File**: `UnitsDBBrowser.vue`
+
+Show "Showing X of Y units" below the search box when a search is active:
+```html
+<div v-if="search" class="search-results-count">
+  Showing {{ filteredItems.length }} of {{ items.length }} {{ tabLabel }}
+</div>
+```
+
+```css
+.search-results-count {
+  font-size: 0.75rem; color: var(--vp-c-text-3);
+  margin-top: 0.5rem; text-align: center;
+}
+```
+
+### Step 6: Empty state for search
+
+**File**: `UnitsDBBrowser.vue`
+
+When search yields no results, show a friendly empty state:
+```html
+<div v-if="filteredItems.length === 0 && search" class="empty-state">
+  <p>No {{ tabLabel.toLowerCase() }} matching "<strong>{{ search }}</strong>"</p>
+  <button class="btn btn-outline" @click="search = ''">Clear search</button>
+</div>
+```
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `UnitsDBBrowser.vue` | Search clear button, keyboard shortcut, dimension column, type colors, results count, empty state |
+
+## Verification
+
+1. `⌘K` / `Ctrl+K` focuses search
+2. Search clear button appears when text is entered
+3. Units table shows dimension expression column
+4. Tab buttons have per-type color accents
+5. "Showing X of Y" appears during search
+6. Empty state shows when no results match
+7. Mobile: all features work with touch
diff --git a/TODO.improve/05-interactivity-animation.md b/TODO.improve/05-interactivity-animation.md
new file mode 100644
index 0000000..eef9656
--- /dev/null
+++ b/TODO.improve/05-interactivity-animation.md
@@ -0,0 +1,166 @@
+# 05 — Interactivity & Animation
+
+## Problem
+
+The site has some animation but lacks consistency. Steps swap without transitions, ecosystem diagram has no pointer feedback, and content pages feel static. Motion should guide attention, not decorate.
+
+## Plan
+
+### Step 1: Fade transition on How It Works code panel
+
+**File**: `HomePage.vue`
+
+The step code panel swaps instantly when tabs change. Add a Vue `<Transition>` with a 200ms fade:
+
+```html
+<Transition name="step-fade" mode="out-in">
+  <div class="step-code" :key="activeStep">
+    <div class="code-header">...</div>
+    <pre><code><span v-html="steps[activeStep].code"></span></code></pre>
+  </div>
+</Transition>
+```
+
+```css
+.step-fade-enter-active,
+.step-fade-leave-active { transition: opacity 0.2s ease; }
+.step-fade-enter-from,
+.step-fade-leave-to { opacity: 0; }
+```
+
+Also animate the tab indicator — the large step number text should have a subtle scale pulse when selected:
+```css
+.step-tab.active .step-tab-num {
+  animation: step-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@keyframes step-pop {
+  0% { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+```
+
+### Step 2: EcosystemDiagram pointer cursor + tooltip
+
+**File**: `EcosystemDiagram.vue`
+
+1. Add `cursor: pointer` to clickable nodes:
+
+In the SVG node rendering, add a conditional class:
+```html
+<g class="node" :class="{ clickable: node.link }"
+   @click="navigate(node)"
+   @mouseenter="hoveredNode = node.id"
+   @mouseleave="hoveredNode = null">
+```
+
+```css
+.node.clickable { cursor: pointer; }
+```
+
+2. Add a tooltip on hover showing the description:
+
+```html
+<g v-if="hoveredNode === node.id" class="node-tooltip">
+  <rect :x="node.x + 60" :y="node.y - 10" width="120" height="40" rx="4" />
+  <text :x="node.x + 120" :y="node.y + 5" text-anchor="middle">{{ node.desc }}</text>
+</g>
+```
+
+Style the tooltip rect with a subtle shadow and the text with small font.
+
+### Step 3: Scroll-reveal on content pages
+
+**File**: `custom.css`
+
+Add a universal scroll-reveal animation class that can be applied to sections on content pages:
+
+```css
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+```
+
+Then add an IntersectionObserver in a `NavScrollHandler.vue` or directly in the VitePress theme's `index.ts` that activates `.reveal` elements as they enter the viewport.
+
+### Step 4: Stat cards — add a subtle pulse on hover
+
+**File**: `custom.css`
+
+The stat cards already animate in. Add a hover state:
+```css
+.stat-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(45, 44, 105, 0.12);
+}
+```
+
+The card already has `transition: all 0.4s ease;` so this works without adding a new transition.
+
+### Step 5: Ecosystem diagram — animate connection lines on hover
+
+**File**: `EcosystemDiagram.vue`
+
+The connection paths already use SVG stroke-dasharray. Animate the stroke when a node is hovered:
+
+```css
+.connection path {
+  stroke-dasharray: 6;
+  animation: dash-flow 1s linear infinite;
+  animation-play-state: paused;
+}
+.connection.active path {
+  animation-play-state: running;
+}
+```
+
+When `hoveredNode` is set, mark connected paths as active:
+```ts
+function isPathActive(from: string, to: string): boolean {
+  return !!(hoveredNode.value && (hoveredNode.value === from || hoveredNode.value === to))
+}
+```
+
+### Step 6: Code blocks — add copy button
+
+**File**: VitePress handles this via its built-in `:construct` code blocks. But custom code blocks in Vue templates (like the How It Works step panel) need a copy button added manually.
+
+In the step code panel header:
+```html
+<button class="code-copy" @click="copyCode" :class="{ copied }">
+  {{ copied ? 'Copied!' : 'Copy' }}
+</button>
+```
+
+```ts
+const copied = ref(false)
+function copyCode() {
+  navigator.clipboard.writeText(steps[activeStep].code.replace(/<[^>]+>/g, ''))
+  copied.value = true
+  setTimeout(() => copied.value = false, 2000)
+}
+```
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `HomePage.vue` | Step code fade transition, step number pop animation, copy button |
+| `EcosystemDiagram.vue` | Pointer cursor, tooltip, animated connection paths |
+| `custom.css` | Scroll-reveal class, stat card hover lift |
+| `index.ts` (theme) | Global scroll-reveal observer |
+
+## Verification
+
+1. Step code panel fades between tabs
+2. Clickable diagram nodes show pointer cursor and tooltip on hover
+3. Connection lines animate when node is hovered
+4. Content page sections fade in on scroll
+5. Copy button on code panel works
+6. All animations respect `prefers-reduced-motion`
diff --git a/TODO.improve/06-content-pages-polish.md b/TODO.improve/06-content-pages-polish.md
new file mode 100644
index 0000000..65411db
--- /dev/null
+++ b/TODO.improve/06-content-pages-polish.md
@@ -0,0 +1,185 @@
+# 06 — Content Pages Polish
+
+## Problem
+
+Learn pages, About, and Schemas are walls of text with minimal visual breaks. The About page is extremely long (ecosystem, governance, timeline, people, orgs, FAQ). Schemas page lacks visual hierarchy. Blog posts have no reading-time indicator.
+
+## Plan
+
+### Step 1: Schemas page — visual cards for each schema type
+
+**File**: `schemas.md`
+
+The current schemas page uses markdown headings and code blocks. Restructure into visual cards:
+
+```html
+<div class="schemas-grid">
+  <div class="schema-type-card">
+    <div class="schema-type-icon"><!-- XML icon --></div>
+    <h3>UnitsML XML Schemas</h3>
+    <p>Authoritative XML schemas (XSD) for encoding units of measure...</p>
+    <div class="schema-meta">
+      <span>Format: XSD</span>
+      <span>Hosted: schema.unitsml.org</span>
+    </div>
+    <div class="schema-links">
+      <a href="https://schema.unitsml.org">Browse schemas →</a>
+      <a href="https://github.com/unitsml/unitsml-schema">GitHub →</a>
+    </div>
+  </div>
+  <div class="schema-type-card">
+    <div class="schema-type-icon"><!-- YAML icon --></div>
+    <h3>UnitsDB YAML Schemas</h3>
+    <p>YAML schemas defining the structure of UnitsDB entries...</p>
+    <div class="schema-meta">
+      <span>Format: YAML</span>
+      <span>Repo: unitsdb</span>
+    </div>
+    <div class="schema-links">
+      <a href="https://github.com/unitsml/unitsdb/tree/main/schemas">Browse schemas →</a>
+    </div>
+  </div>
+</div>
+```
+
+Style as side-by-side cards with:
+- Icon (file icon with XML/YAML badge)
+- Title + description
+- Meta chips (format, hosting location)
+- Action links
+
+### Step 2: Schemas page — add a "Schema Browser" embed/preview
+
+Below the cards, add a compact preview of the schema browser experience. This could be:
+- A screenshot/mockup of schema.unitsml.org in a browser frame (similar to the UnitsDB CTA preview window on the homepage)
+- Or a simple CTA card linking to schema.unitsml.org
+
+Reuse the `preview-window` pattern from the homepage:
+```html
+<div class="preview-window">
+  <div class="preview-bar"><span></span><span></span><span></span></div>
+  <div class="preview-content">
+    <div class="preview-url-bar">https://schema.unitsml.org/unitsml/1.0</div>
+    <!-- Static representation of schema structure -->
+    <pre>UnitSet
+  ├── Unit (xml:id, dimensionURL)
+  │   ├── UnitName
+  │   ├── UnitSymbol
+  │   └── RootUnits
+  ├── QuantitySet
+  └── DimensionSet</pre>
+  </div>
+</div>
+```
+
+### Step 3: Learn pages — add visual callout patterns
+
+**Files**: `learn/*.md`
+
+The "What is UnitsML" page has a good pattern with `callout-grid` (Mars Climate Orbiter story). Extend this pattern to other learn pages:
+
+- `how-it-works.md`: Add a callout for the BIPM/UCUM/QUDT cross-reference table — wrap it in a styled card with authority logos
+- `incorporating-unitsml.md`: Add a "real-world example" callout showing how UnitsML fits into a specific domain (e.g., materials science with MatML, chemistry with CML)
+- `who-is-it-for.md`: Add persona callout cards with icons for each audience (Metrologist, Software Developer, Standards Body, Researcher)
+
+These are scoped CSS additions in each page's `<style scoped>` block.
+
+### Step 4: About page — add section navigation / TOC
+
+The About page is ~300 lines of markdown with 8+ sections. Add an inline TOC at the top:
+
+```html
+<nav class="about-toc">
+  <a href="#the-unitsml-ecosystem">Ecosystem</a>
+  <a href="#vision">Vision</a>
+  <a href="#governance">Governance</a>
+  <a href="#history">History</a>
+  <a href="#people">People</a>
+  <a href="#participating-organizations">Organizations</a>
+  <a href="#frequently-asked-questions">FAQ</a>
+</nav>
+```
+
+Style as a horizontal pill bar at the top of the page (below the lead paragraph), sticky on scroll if the page is long enough. Each pill links to its section anchor.
+
+```css
+.about-toc {
+  display: flex; gap: 0.5rem; flex-wrap: wrap;
+  margin-bottom: 2rem; padding: 0.75rem 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.about-toc a {
+  font-size: 0.8125rem; padding: 0.25rem 0.75rem;
+  border-radius: 999px; background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2); text-decoration: none;
+  border: 1px solid var(--vp-c-divider);
+}
+.about-toc a:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
+```
+
+### Step 5: Blog — add reading time estimate
+
+**File**: `.vitepress/posts.data.ts`
+
+Add a reading-time calculation to the blog post frontmatter:
+
+```ts
+export default createContentLoader('blog/*.md', {
+  transform(raw) {
+    return raw.map(({ url, frontmatter, src }) => {
+      const wordCount = src ? src.split(/\s+/).length : 0
+      const readingTime = Math.max(1, Math.round(wordCount / 200))
+      return { url, frontmatter, readingTime }
+    })
+  }
+})
+```
+
+**File**: `BlogIndex.vue`
+
+Display in the card:
+```html
+<span class="blog-reading-time">{{ post.readingTime }} min read</span>
+```
+
+### Step 6: Blog — add author avatar/initials
+
+**File**: `BlogByline.vue`
+
+If no avatar image is provided, show author initials in a colored circle:
+```html
+<div class="author-avatar" v-if="!author.avatar">
+  {{ author.name.split(' ').map(n => n[0]).join('') }}
+</div>
+<img v-else :src="author.avatar" class="author-avatar" />
+```
+
+```css
+.author-avatar {
+  width: 32px; height: 32px; border-radius: 50%;
+  background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.75rem; font-weight: 700;
+}
+```
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `schemas.md` | Visual card layout, schema browser preview |
+| `learn/how-it-works.md` | Authority callout cards with logos |
+| `learn/incorporating-unitsml.md` | Real-world example callout |
+| `learn/who-is-it-for.md` | Persona cards with icons |
+| `about.md` | Inline TOC pills |
+| `posts.data.ts` | Reading time calculation |
+| `BlogIndex.vue` | Display reading time |
+| `BlogByline.vue` | Author initials fallback |
+
+## Verification
+
+1. Schemas page has 2 visual schema type cards
+2. Learn pages have at least 1 visual callout pattern each
+3. About page has inline TOC that links to all sections
+4. Blog cards show reading time
+5. Blog posts show author initials when no avatar
diff --git a/TODO.improve/07-dark-mode-polish.md b/TODO.improve/07-dark-mode-polish.md
new file mode 100644
index 0000000..d4cf123
--- /dev/null
+++ b/TODO.improve/07-dark-mode-polish.md
@@ -0,0 +1,128 @@
+# 07 — Dark Mode & Accessibility Polish
+
+## Problem
+
+Dark mode works but has inconsistencies. The UnitsDB components, entity detail badges, and custom cards need dark-mode testing. Accessibility is generally good (VitePress handles most of it) but the custom components have gaps.
+
+## Plan
+
+### Step 1: Dark mode — UnitsDB browser tabs
+
+**File**: `UnitsDBBrowser.vue`
+
+The tab buttons use inline color variables which generally work, but the active tab indicator (teal underline) can be too subtle in dark mode. Ensure the active tab has sufficient contrast:
+
+```css
+.dark .tab-btn.active {
+  border-bottom-color: var(--unitsml-teal-light);
+  color: var(--unitsml-teal-light);
+}
+```
+
+### Step 2: Dark mode — entity detail authority badges
+
+**File**: `UnitsDBEntityDetail.vue`
+
+The authority badges have a white background (`#fff`). In dark mode, a white square badge on a dark page is jarring. Invert to use the dark-mode badge background:
+
+```css
+.dark .ep-auth-badge {
+  background: var(--vp-c-bg-soft);
+  border-color: var(--vp-c-divider);
+}
+```
+
+The SVG logos inside (BIPM, UCUM, QUDT) have dark fills, so they should remain visible. Verify by testing.
+
+### Step 3: Dark mode — homepage hero floating shapes
+
+**File**: `custom.css` or `HomePage.vue`
+
+The floating shapes use `border: 2px solid var(--unitsml-navy)`. In dark mode, `--unitsml-navy` becomes `#6e6dba`, which is lighter. This is fine, but verify the grid background is still visible:
+
+```css
+.dark .hero-grid-bg {
+  background-image:
+    linear-gradient(rgba(110, 109, 186, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(110, 109, 186, 0.05) 1px, transparent 1px);
+}
+```
+
+### Step 4: Dark mode — preview windows
+
+The UnitsDB CTA preview window and Schema Browser preview use a dark background regardless of theme. These are designed to look like terminal/code windows, so they should stay dark in both modes. No change needed.
+
+### Step 5: Accessibility — ARIA labels on interactive elements
+
+**File**: `UnitsDBBrowser.vue`, `UnitsDBEntityDetail.vue`
+
+1. Search input needs `aria-label`:
+```html
+<input v-model="search" aria-label="Search units and quantities" />
+```
+
+2. Tab buttons need `role="tablist"` and `role="tab"`:
+```html
+<div class="stats-tabs" role="tablist">
+  <button role="tab" :aria-selected="activeType === type" ...>
+```
+
+3. Tab panels need `role="tabpanel"`:
+```html
+<div role="tabpanel" :aria-label="TYPE_LABEL[activeType] + ' listing'">
+```
+
+4. The ecosystem diagram SVG needs `role="img"` (already present) and `aria-label` (already present).
+
+### Step 6: Accessibility — focus indicators
+
+Custom buttons (`.btn`, `.step-tab`, `.tab-btn`) should have visible focus indicators:
+
+```css
+.btn:focus-visible,
+.step-tab:focus-visible,
+.tab-btn:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 2px;
+}
+```
+
+### Step 7: `prefers-reduced-motion` — disable animations
+
+**File**: `custom.css`
+
+Ensure the global reduced-motion media query covers all custom animations:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  .hero-shape,
+  .ticker-track,
+  .stat-card,
+  .feature-card,
+  .project-card,
+  .section[data-revealed] {
+    animation: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
+```
+
+## Files Modified
+
+| File | Change |
+|------|--------|
+| `UnitsDBBrowser.vue` | Dark mode tab contrast, ARIA roles, focus indicator |
+| `UnitsDBEntityDetail.vue` | Dark mode badge background, ARIA labels |
+| `custom.css` | Dark mode hero fixes, focus indicators, reduced-motion |
+| `HomePage.vue` | Dark mode grid background, reduced-motion |
+
+## Verification
+
+1. Toggle dark mode — all components render correctly
+2. Authority badges in dark mode have appropriate background
+3. Tab navigation is keyboard-accessible (Tab + Arrow keys)
+4. Search input is labeled for screen readers
+5. Focus rings visible on all interactive elements
+6. With `prefers-reduced-motion: reduce` enabled, no animations play
diff --git a/TODO.improve/README.md b/TODO.improve/README.md
new file mode 100644
index 0000000..0719e30
--- /dev/null
+++ b/TODO.improve/README.md
@@ -0,0 +1,28 @@
+# UnitsML.org UX Improvement Plan
+
+Prioritized list of UX, animation, and information architecture improvements.
+
+## Priority Order
+
+| # | Plan | Impact | Effort |
+|---|------|--------|--------|
+| 01 | [Hero Polish](01-hero-polish.md) | High | Medium |
+| 02 | [Homepage Section Reduction](02-homepage-section-reduction.md) | High | Medium |
+| 03 | [Navigation & IA](03-navigation-restructure.md) | Medium | Low |
+| 04 | [UnitsDB Browser UX](04-unitsdb-browser-ux.md) | High | Medium |
+| 05 | [Interactivity & Animation](05-interactivity-animation.md) | Medium | Medium |
+| 06 | [Content Pages Polish](06-content-pages-polish.md) | Medium | High |
+| 07 | [Dark Mode & Accessibility](07-dark-mode-polish.md) | Medium | Low |
+
+## Recommended execution order
+
+1. **01 + 02** together (hero + section reduction) — these are tightly coupled; the hero CTA change affects what sections remain
+2. **07** (dark mode + a11y) — quick wins, can be done independently
+3. **03** (nav) — small config changes
+4. **04** (UnitsDB browser) — high user-facing impact
+5. **05** (animation) — layer on top of the structural changes
+6. **06** (content pages) — largest scope, do last
+
+## Key principle
+
+Schemas stays as a top-level nav item — it's a core resource alongside UnitsDB.
diff --git a/about.md b/about.md
index 7e63e48..a965ea8 100644
--- a/about.md
+++ b/about.md
@@ -13,6 +13,16 @@
 UnitsML is under active development and its documentation may change frequently.
 :::
 
+<nav class="about-toc">
+  <a href="#the-unitsml-ecosystem">Ecosystem</a>
+  <a href="#vision">Vision</a>
+  <a href="#governance">Governance</a>
+  <a href="#history">History</a>
+  <a href="#people">People</a>
+  <a href="#participating-organizations">Organizations</a>
+  <a href="#frequently-asked-questions">FAQ</a>
+</nav>
+
 ## The UnitsML Ecosystem
 
 UnitsML consists of interconnected components that together form a complete system for encoding, storing, and accessing scientific units:
@@ -138,6 +148,20 @@ UnitsML has been shaped by contributors across government, academia, and industr
   margin-bottom: 2rem;
 }
 
+.about-toc {
+  display: flex; gap: 0.5rem; flex-wrap: wrap;
+  margin-bottom: 2rem; padding: 0.75rem 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+.about-toc a {
+  font-size: 0.8125rem; padding: 0.25rem 0.75rem;
+  border-radius: 999px; background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2); text-decoration: none;
+  border: 1px solid var(--vp-c-divider);
+  transition: all 0.2s ease;
+}
+.about-toc a:hover { border-color: var(--vp-c-brand-1); color: var(--vp-c-brand-1); }
+
 .lead-text {
   font-size: 1.125rem;
   line-height: 1.75;