diff --git a/home.html b/home.html
index 3ff91597..7d92361f 100644
--- a/home.html
+++ b/home.html
@@ -13,27 +13,38 @@
   body { background: radial-gradient(1200px 600px at 50% -10%, var(--bg1), var(--bg2)); }
 
   /* Hero (identity + search). Centered at the top of the page — the user's
-     most-used thing on this screen. The slot/card desktop lives beneath. */
-  .hero { text-align: center; padding: 5vh 1rem 0; max-width: 760px; margin: 0 auto; }
-  .hero .mark { display: inline-block; width: 64px; height: 64px; line-height: 1; }
+     most-used thing on this screen. The slot/card desktop lives beneath.
+     The mark + wordmark share a translucent panel so they read on any
+     wallpaper; the tag, search box and hint sit outside it, centered. */
+  .hero { text-align: center; padding: 5vh 1rem 0; max-width: 820px; margin: 0 auto; }
+  .hero .hero-id { display: inline-flex; align-items: center; gap: 14px;
+    padding: 12px 24px 12px 14px; border-radius: 22px;
+    background: rgba(11,14,20,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
+    margin-bottom: .8rem; }
+  .hero .mark { flex: none; width: 56px; height: 56px; line-height: 1; }
   .hero .mark svg { width: 100%; height: 100%; display: block; }
-  .hero h1 { font-size: 2.4rem; margin: .3rem 0 .2rem; letter-spacing: .5px; font-weight: 600; }
+  .hero h1 { font-size: 2.2rem; margin: 0; letter-spacing: .5px; font-weight: 600; line-height: 1.05; }
   .hero h1 .g { color: var(--acid); }
-  .hero .tag { color: var(--mut); margin: 0 0 1.4rem; }
+  .hero .tag { color: var(--ink); margin: 0 0 1.4rem;
+    display: inline-block; padding: 6px 14px; border-radius: 999px;
+    background: rgba(11,14,20,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
   .hero form { display: flex; gap: 8px; justify-content: center; max-width: 620px; margin: 0 auto; padding: 0 1rem; }
   .hero form input { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--line2);
     background: rgba(20,26,36,.72); color: var(--ink); font-size: 15px; outline: none;
     backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
   .hero form input:focus { border-color: var(--blue); }
   .hero form button { padding: 13px 20px; border-radius: 999px; border: none; background: var(--blue); color: #fff; font-size: 15px; cursor: pointer; }
-  .hero .hint { color: var(--dim); font-size: 12.5px; margin-top: .8rem; }
+  .hero .hint { color: var(--mut); font-size: 12.5px; margin-top: .8rem;
+    display: inline-block; padding: 4px 12px; border-radius: 999px;
+    background: rgba(11,14,20,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
 
   /* Two distinct sections under the hero: a self-contained "Your links"
      panel on the LEFT (quick-launch tiles) and a Silent Mode cards panel
      on the RIGHT. Each gets its own panel background so they read as two
      separate boxes instead of one shared body. The two are side-by-side
      on desktop and stack vertically on narrow viewports.                 */
-  .homepage { display: grid; grid-template-columns: minmax(240px, 280px) minmax(380px, 1fr);
+  .homepage { display: grid; grid-template-columns: minmax(360px, 440px) minmax(380px, 1fr);
               gap: 24px; max-width: 1680px; margin: 2.4rem auto 0; padding: 0 32px 48px; align-items: start; }
   @media (max-width: 900px) { .homepage { grid-template-columns: 1fr; gap: 20px; padding: 0 14px 32px; } }
 
@@ -55,9 +66,8 @@
   /* Fixed-width cells (not 1fr) so icons sit in a tight desktop-style grid
      instead of drifting inside stretched 3-equal-column cells. The whole
      grid left-aligns to the column edge via justify-content: start. */
-  .slots-list  { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px 8px;
+  .slots-list  { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: 10px 8px;
                  width: 100%; align-items: start; justify-content: start; }
-  @media (max-width: 900px) { .slots-list { grid-template-columns: repeat(auto-fill, 72px); justify-content: start; } }
   .cards-grid.drop-target { outline: 2px dashed var(--acid); outline-offset: 4px; border-radius: 14px; }
 
   .slot { position: relative; display: flex; flex-direction: column; align-items: center;
@@ -203,16 +213,18 @@
 </head>
 <body>
   <div class="hero">
-    <div class="mark">
-      <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-        <rect width="64" height="64" rx="12" fill="#0b0e14"/>
-        <path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/>
-        <path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/>
-        <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
-        <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
-      </svg>
+    <div class="hero-id">
+      <div class="mark">
+        <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+          <rect width="64" height="64" rx="12" fill="#0b0e14"/>
+          <path d="M32 6 L38 32 L26 32 Z" fill="#e04e4e"/>
+          <path d="M38 32 L32 58 L26 32 Z" fill="#d6ff3d"/>
+          <path d="M6 32 L32 27 L58 32 L32 37 Z" fill="#d6ff3d" opacity="0.55"/>
+          <circle cx="32" cy="32" r="3" fill="#0b0e14"/>
+        </svg>
+      </div>
+      <h1>Theseus <span class="g">Navigator</span></h1>
     </div>
-    <h1>Theseus <span class="g">Navigator</span></h1>
     <p class="tag">A browser that follows the thread. Names that live on the Bitcoin Cash chain.</p>
     <form id="searchForm">
       <input id="q" placeholder="Search the web" autofocus spellcheck="false">
diff --git a/package.json b/package.json
index 8ac2fc14..541bdd57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "theseus-navigator",
-  "version": "0.3.107",
+  "version": "0.3.108",
   "license": "MPL-2.0",
   "description": "Theseus Navigator — a browser that follows the thread. By Silent Mode, a Deviant project.",
   "author": "Silent Mode",