Add explicit IPFS mentions to landing page copy

.gitignore

@@ -24,3 +24,5 @@ pnpm-debug.log*
 .idea/
 
 .claude
+skills-lock.json
+

src/components/Footer.astro

@@ -28,31 +28,31 @@ const columns: [string, { label: string; href: string }[]][] = [
 ];
 ---
 
-<footer style="background: var(--navy); color: rgba(255,255,255,0.75); padding: 48px 32px; border-top: 1px solid rgba(255,255,255,0.08);">
+<footer style="background: var(--navy-surface); color: rgba(255,255,255,0.75); padding: 48px 32px; border-top: 1px solid rgba(255,255,255,0.08);">
   <div class="mx-auto grid" style="max-width: 1240px; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px;">
     <div>
       <div class="flex items-center" style="gap: 10px; color: #fff; margin-bottom: 14px;">
         <Logomark size={22} variant="mono" color="#fff" />
-        <span class="mono-display" style="font-weight: 400; font-size: 15px;">IPFS</span>
+        <span style="font-weight: 600; font-size: var(--text-md);">IPFS</span>
       </div>
-      <p style="margin: 0; font-size: 13px; line-height: 1.6; max-width: 320px; color: rgba(255,255,255,0.6);">
+      <p style="margin: 0; font-size: var(--text-sm); line-height: 1.6; max-width: 320px; color: rgba(255,255,255,0.6);">
         An open-source project. Specs live at specs.ipfs.tech. The community gathers at discuss.ipfs.tech. Development is supported by the IPFS Foundation.
       </p>
     </div>
     {columns.map(([h, items]) => (
       <div>
-        <div class="mono" style="font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; font-weight: 600;">
+        <div class="retro-label" style="font-size: var(--text-ui); color: var(--teal); margin-bottom: 14px;">
           {h}
         </div>
         {items.map((i) => (
-          <div style="font-size: 13px; margin-bottom: 8px;">
+          <div style="font-size: var(--text-sm); margin-bottom: 8px;">
             <a href={i.href} style="color: rgba(255,255,255,0.75); text-decoration: none;">{i.label}</a>
           </div>
         ))}
       </div>
     ))}
   </div>
-  <div class="mx-auto" style="max-width: 1240px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.5);">
+  <div class="mx-auto" style="max-width: 1240px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--text-xs); color: rgba(255,255,255,0.5);">
     <span>© IPFS · MIT License</span>
   </div>
 </footer>

src/components/GetStarted.astro

@@ -72,7 +72,7 @@ const row2 = [
 const src = (n: number) => `/community/community-${n}.jpg`;
 ---
 
-<section id="community" class="relative overflow-hidden text-white" style="padding: 96px 0 88px; background: var(--navy);">
+<section id="community" class="relative overflow-hidden text-white" style="padding: 96px 0 88px; background: var(--navy-surface);">
   <svg class="absolute inset-0 w-full h-full" style="opacity: 0.4;" aria-hidden="true">
     <defs>
       <pattern id="ctadots" width="36" height="36" patternUnits="userSpaceOnUse">
@@ -84,10 +84,10 @@ const src = (n: number) => `/community/community-${n}.jpg`;
 
   <div class="relative mx-auto" style="max-width: 1240px; padding: 0 32px;">
     <div style="margin-bottom: 40px; max-width: 820px;">
-      <h2 style="margin: 0 0 12px; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;">
+      <h2 style="margin: 0 0 12px; font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08;">
         By the community, for the community.
       </h2>
-      <p style="margin: 0; font-size: 17px; color: rgba(255,255,255,0.7); max-width: 640px; line-height: 1.55;">
+      <p style="margin: 0; font-size: var(--text-lead); color: rgba(255,255,255,0.7); max-width: 640px; line-height: 1.55;">
         IPFS is built in the open by a thriving community. Chat with builders, propose changes, and find the next event near you.
       </p>
     </div>
@@ -118,11 +118,11 @@ const src = (n: number) => `/community/community-${n}.jpg`;
             <div class="mono cta-glyph">
               {c.glyph}
             </div>
-            <div class="mono" style="font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); font-weight: 600;">
+            <div class="retro-label" style="font-size: var(--text-ui); color: var(--teal);">
               {c.kind}
             </div>
           </div>
-          <div style="font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.55; flex: 1;">
+          <div style="font-size: var(--text-ui); color: rgba(255,255,255,0.7); line-height: 1.55; flex: 1;">
             {c.blurb}
           </div>
         </a>
@@ -163,7 +163,7 @@ const src = (n: number) => `/community/community-${n}.jpg`;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 18px;
+    font-size: var(--text-lg);
     font-weight: 600;
   }
   /* community photo ribbon */

src/components/Hero.astro

@@ -4,7 +4,7 @@ const tagline = {
   pre: 'Building Blocks For ',
   hl: 'a Better Web',
   post: '.',
-  sub: 'A constellation of tools for content addressing.',
+  sub: 'IPFS is a constellation of open-source tools for content addressing.',
 };
 
 // Deterministic constellation mesh. Positions come from a jittered grid
@@ -124,22 +124,22 @@ for (let i = 0; i < nodes.length; i++) {
     <h1 class="hero-h1" style="font-weight: 600; letter-spacing: -0.025em; margin: 0 0 28px; line-height: 1.04; max-width: 980px; text-wrap: balance;">
       {tagline.pre}<span class="mono-display" style="color: var(--yellow); font-weight: 400;">{tagline.hl}</span>
     </h1>
-    <p style="font-size: 20px; color: rgba(255,255,255,0.85); max-width: 720px; margin: 0 0 36px; line-height: 1.5;">
+    <p style="font-size: var(--text-xl); color: rgba(255,255,255,0.85); max-width: 720px; margin: 0 0 36px; line-height: 1.5;">
       {tagline.sub}
     </p>
     <div class="flex flex-wrap items-center" style="gap: 12px;">
       <!-- <button class="mono-display" style="background: var(--teal); color: var(--navy); border: none; padding: 14px 22px; border-radius: 8px; font-size: 14px; font-weight: 400; cursor: pointer; letter-spacing: .01em;">$ npm install helia</button> -->
-      <a href="https://specs.ipfs.tech/" style="background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); padding: 13px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block;">Read the specs →</a>
-      <span class="mono" style="font-size: 12px; color: rgba(255,255,255,0.6); margin-left: 6px;">
-        open-source
+      <a href="#tools" style="background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); padding: 13px 22px; border-radius: 8px; font-size: var(--text-ui); font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block;">Pick the tool that fits the job →</a>
+      <span class="mono" style="font-size: var(--text-xs); color: rgba(255,255,255,0.6); margin-left: 6px;">
+        The InterPlanetary File System
       </span>
     </div>
   </div>
 </section>
 
 <style>
   .hero-h1 {
-    font-size: clamp(40px, 5.2vw, 72px);
+    font-size: var(--text-h1);
   }
   .mesh {
     transform-box: fill-box;

src/components/Nav.astro

@@ -2,30 +2,72 @@
 import Logomark from './Logomark.astro';
 ---
 
-<nav class="sticky top-0 z-20 backdrop-blur-md border-b" style="background: rgba(255,255,255,0.92); border-color: var(--hair);">
+<nav class="sticky top-0 z-20 backdrop-blur-md border-b" style="background: var(--nav-bg); border-color: var(--hair);">
   <div class="mx-auto flex items-center justify-between" style="max-width: 1240px; padding: 14px 32px;">
-    <div class="flex items-center" style="gap: 10px; color: var(--navy);">
-      <Logomark size={24} />
-      <span class="mono-display" style="font-weight: 400; font-size: 15px; letter-spacing: .02em;">IPFS</span>
+    <div class="flex items-center" style="gap: 10px; color: var(--ink);">
+      <Logomark size={24} variant="mono" />
+      <span style="font-weight: 600; font-size: var(--text-md); letter-spacing: .02em;">IPFS</span>
     </div>
-    <div class="hidden md:flex" style="gap: 28px; font-size: 14px; color: var(--ink-2);">
+    <div class="hidden md:flex" style="gap: 28px; font-size: var(--text-ui); color: var(--ink-2);">
       <a class="nav-link" href="https://docs.ipfs.tech/">Docs</a>
       <a class="nav-link" href="https://specs.ipfs.tech/">Specs</a>
       <a class="nav-link" href="#tools">Tools</a>
       <a class="nav-link" href="#community">Community</a>
       <a class="nav-link" href="https://blog.ipfs.tech/">Blog</a>
     </div>
-    <div class="flex items-center" style="gap: 10px;">
-      <a class="nav-link hidden sm:inline" style="font-size: 13px;" href="https://github.com/ipfs">github ↗</a>
+    <div class="flex items-center" style="gap: 14px;">
+      <a class="nav-link hidden sm:inline" style="font-size: var(--text-sm);" href="https://github.com/ipfs">github ↗</a>
+      <button id="theme-toggle" type="button" aria-label="Toggle dark mode" title="Toggle dark mode">
+        {/* Sun (shown in dark mode) */}
+        <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+        {/* Moon (shown in light mode) */}
+        <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      </button>
     </div>
   </div>
 </nav>
 
+<script is:inline>
+  (() => {
+    const btn = document.getElementById('theme-toggle');
+    btn?.addEventListener('click', () => {
+      const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+      document.documentElement.dataset.theme = next;
+      localStorage.setItem('theme', next);
+    });
+  })();
+</script>
+
 <style>
   .nav-link {
     text-decoration: none;
     color: var(--ink-2);
     cursor: pointer;
     font-weight: 500;
   }
+  #theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    border: 1px solid var(--line);
+    background: transparent;
+    color: var(--ink-2);
+    cursor: pointer;
+  }
+  #theme-toggle:hover {
+    color: var(--ink);
+    border-color: var(--ink-3);
+  }
+  /* Show the moon in light mode, the sun in dark mode. */
+  .icon-sun { display: none; }
+  :global(html[data-theme='dark']) .icon-sun { display: block; }
+  :global(html[data-theme='dark']) .icon-moon { display: none; }
 </style>

src/components/NetworkTopologies.astro

@@ -5,8 +5,8 @@ import SectionHeader from './SectionHeader.astro';
 <section style="padding: 96px 32px; background: var(--pearl); border-top: 1px solid var(--hair);">
   <div class="mx-auto" style="max-width: 1240px;">
     <SectionHeader
-      title="Network models"
-      kicker="The same content-addressing model works on the open internet and in closed private networks. Same CIDs, different routing."
+      title="Public, private, and everything in between"
+      kicker="The same content-addressing model runs on the open internet or a closed network. Same CIDs, different routing."
     />
     <div class="topo-grid">
 
@@ -100,7 +100,7 @@ import SectionHeader from './SectionHeader.astro';
         </div>
         <div class="topo-body">
           <span class="topo-badge topo-badge--public">Public</span>
-          <p class="topo-desc">Nodes discover peers via the Amino DHT and IPNI. Any compliant node can join and find content, no coordination required.</p>
+          <p class="topo-desc">Nodes discover peers via the <a href="https://docs.ipfs.tech/concepts/glossary/#amino-dht" target="_blank" rel="noopener">Amino DHT</a> and <a href="https://docs.ipfs.tech/concepts/glossary/#ipni" target="_blank" rel="noopener">IPNI</a>. Any compliant node can join and find content, no coordination required.</p>
         </div>
       </div>
 
@@ -220,7 +220,7 @@ import SectionHeader from './SectionHeader.astro';
         </div>
         <div class="topo-body">
           <span class="topo-badge topo-badge--hybrid">Hybrid</span>
-          <p class="topo-desc">Public peers, private data. Content is encrypted. CIDs route over the Amino DHT while ciphertext stays opaque to every transit node.</p>
+          <p class="topo-desc">Public peers, private data. Content is encrypted. CIDs route over the <a href="https://docs.ipfs.tech/concepts/glossary/#amino-dht" target="_blank" rel="noopener">Amino DHT</a> while ciphertext stays opaque to every transit node.</p>
         </div>
       </div>
 
@@ -288,7 +288,7 @@ import SectionHeader from './SectionHeader.astro';
         </div>
         <div class="topo-body">
           <span class="topo-badge topo-badge--private">Private</span>
-          <p class="topo-desc">All peers share a swarm key. Routing and transfer stay within the closed network. Nothing routes in or out without it.</p>
+          <p class="topo-desc">All peers share a <a href="https://github.com/ipfs/kubo/blob/master/docs/experimental-features.md#private-networks" target="_blank" rel="noopener">swarm key</a>. Routing and transfer stay within the closed network. Nothing routes in or out without it.</p>
         </div>
       </div>
 
@@ -390,7 +390,7 @@ import SectionHeader from './SectionHeader.astro';
         </div>
         <div class="topo-body">
           <span class="topo-badge topo-badge--gateway">Trustless Gateways</span>
-          <p class="topo-desc">Gateways pull content from the IPFS network and serve it over HTTP. Browsers verify data against the CID locally, trust is rooted in CID, not the gateway.</p>
+          <p class="topo-desc"><a href="https://docs.ipfs.tech/concepts/ipfs-gateway/" target="_blank" rel="noopener">Gateways</a> pull content from the IPFS network and serve it over HTTP. Browsers verify data against the CID locally, trust is rooted in CID, not the gateway.</p>
         </div>
       </div>
 
@@ -436,11 +436,10 @@ import SectionHeader from './SectionHeader.astro';
   .topo-badge {
     display: inline-flex;
     align-items: center;
-    font-family: var(--font-mono);
-    font-size: 11px;
+    font-family: var(--font-retro);
+    font-style: italic;
+    font-size: var(--text-xs);
     font-weight: 600;
-    letter-spacing: .08em;
-    text-transform: uppercase;
     padding: 3px 10px;
     border-radius: 4px;
     width: fit-content;
@@ -451,10 +450,19 @@ import SectionHeader from './SectionHeader.astro';
 
   .topo-desc {
     margin: 0;
-    font-size: 15px;
+    font-size: var(--text-base);
     color: var(--ink-2);
     line-height: 1.6;
   }
+  .topo-desc a {
+    color: var(--turq);
+    text-decoration: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--turq) 40%, transparent);
+    transition: border-color .15s;
+  }
+  .topo-desc a:hover {
+    border-bottom-color: var(--turq);
+  }
 
   /* Public network SVG classes */
   .t-line { stroke: var(--line); stroke-width: 1.5; fill: none; }