diff --git a/assets/www/style.css b/assets/www/style.css
index 2e8cb64..1248017 100644
--- a/assets/www/style.css
+++ b/assets/www/style.css
@@ -21,7 +21,13 @@
     --r-pill: 999px;
 
     --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.35);
     --ring: 0 0 0 2px var(--accent);
+    /* Brand red from the logo, used only for small highlights. */
+    --brand: #ff6b56;
+    --glow-a: rgba(255, 107, 86, 0.10);
+    --glow-b: rgba(110, 231, 183, 0.08);
+    --nav-bg: rgba(15, 17, 21, 0.72);
 }
 
 @media (prefers-color-scheme: light) {
@@ -38,6 +44,11 @@
         --warn-fg: #5a2a10;
         --danger: #c03a28;
         --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
+        --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.10);
+        --brand: #c03a28;
+        --glow-a: rgba(192, 58, 40, 0.07);
+        --glow-b: rgba(15, 138, 95, 0.06);
+        --nav-bg: rgba(247, 246, 243, 0.8);
     }
 }
 
@@ -45,9 +56,16 @@
 body {
     margin: 0;
     font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-    background: var(--bg);
+    /* Two soft glows at the top (logo red, accent green) give the page some
+       depth without competing with the content. */
+    background:
+        radial-gradient(60rem 28rem at 15% -10%, var(--glow-a), transparent 70%),
+        radial-gradient(50rem 24rem at 95% -5%, var(--glow-b), transparent 70%),
+        var(--bg);
+    background-attachment: fixed;
     color: var(--fg);
     line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
 }
 
 /* Shared page container — both landing and /apps wrap content in
@@ -59,9 +77,16 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-bottom: 1.25rem;
+    padding: 0.85rem 0;
     border-bottom: 1px solid var(--border);
     margin-bottom: 2rem;
+    /* Stays in reach while scrolling long pages like /settings. */
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: var(--nav-bg);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 }
 .brand {
     font-weight: 700;
@@ -91,30 +116,52 @@ body {
     text-decoration: none;
     font-size: 0.9rem;
     padding: 0.35rem 0.75rem;
-    border-radius: var(--r-sm);
+    border-radius: var(--r-pill);
+    transition: color 120ms, background 120ms;
 }
-.nav-links a:hover { color: var(--fg); }
+.nav-links a:hover { color: var(--fg); background: var(--card); }
 .nav-links a[aria-current="page"] {
     color: var(--fg);
     background: var(--accent-soft);
 }
 
 /* -- Landing page ---------------------------------------------- */
-header h1 { margin: 0 0 0.5rem; font-size: 2.5rem; }
+header h1 {
+    margin: 0 0 0.5rem;
+    font-size: clamp(2rem, 6vw, 2.75rem);
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    background: linear-gradient(100deg, var(--fg) 40%, var(--accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
 .lead { font-size: 1.25rem; color: var(--muted); margin: 0 0 0.25rem; }
 .host { color: var(--muted); margin: 0 0 3rem; }
 .host code {
-    background: var(--card);
-    padding: 0.15rem 0.5rem;
-    border-radius: var(--r-sm);
+    background: var(--accent-soft);
+    padding: 0.2rem 0.65rem;
+    border-radius: var(--r-pill);
     color: var(--accent);
+    font-size: 0.9em;
 }
 section h2 {
-    font-size: 1.1rem;
+    font-size: 0.85rem;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.12em;
     color: var(--muted);
-    margin: 2rem 0 1rem;
+    margin: 2.5rem 0 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+/* Small brand-red marker in front of each landing-page section title. */
+section h2::before {
+    content: "";
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: var(--r-pill);
+    background: var(--brand);
 }
 .tiles {
     display: grid;
@@ -124,9 +171,21 @@ section h2 {
 .tile {
     background: var(--card);
     padding: 1.25rem;
-    border-radius: var(--r-md);
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
     display: flex;
     flex-direction: column;
+    position: relative;
+    overflow: hidden;
+}
+/* Thin accent line along the top edge of each status tile. */
+.tile::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 3px;
+    background: linear-gradient(90deg, var(--accent), transparent);
+    opacity: 0.7;
 }
 .tile .label {
     font-size: 0.8rem;
@@ -134,7 +193,12 @@ section h2 {
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
-.tile .value { font-size: 1.25rem; margin-top: 0.5rem; }
+.tile .value {
+    font-size: 1.35rem;
+    font-weight: 600;
+    margin-top: 0.5rem;
+    font-variant-numeric: tabular-nums;
+}
 .updated { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
 .soon {
     background: var(--card);
@@ -172,7 +236,9 @@ h2 {
 .app {
     background: var(--card);
     padding: 1rem;
-    border-radius: var(--r-md);
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
+    transition: border-color 120ms;
     margin: 0.5rem 0;
     display: flex;
     justify-content: space-between;
@@ -219,7 +285,10 @@ button, .btn {
     text-decoration: none;
     display: inline-flex;
     align-items: center;
+    transition: filter 120ms, transform 80ms;
 }
+button:hover:not(:disabled), .btn:hover { filter: brightness(1.08); }
+button:active:not(:disabled), .btn:active { transform: translateY(1px); }
 button.secondary, .btn.secondary {
     background: var(--card);
     color: var(--fg);
@@ -451,7 +520,8 @@ details.log-details[open] > summary { color: var(--fg); }
 .card {
     background: var(--card);
     padding: 1.25rem;
-    border-radius: var(--r-md);
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
     box-shadow: var(--shadow-card);
 }
 .card + .card { margin-top: 1rem; }
@@ -506,9 +576,9 @@ details.log-details[open] > summary { color: var(--fg); }
     gap: 0.75rem;
 }
 .app-tile {
-    background: var(--bg);
+    background: var(--card);
     border: 1px solid var(--border);
-    border-radius: var(--r-md);
+    border-radius: var(--r-lg);
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -516,12 +586,20 @@ details.log-details[open] > summary { color: var(--fg); }
     align-items: flex-start;
     text-decoration: none;
     color: var(--fg);
-    transition: border-color 120ms, background 120ms;
+    transition: border-color 120ms, background 120ms, transform 120ms, box-shadow 120ms;
+}
+.app-tile:hover {
+    border-color: var(--accent);
+    background: var(--card-hover);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lift);
 }
-.app-tile:hover { border-color: var(--accent); background: var(--card-hover); }
 .app-tile .icon {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
+    padding: 6px;
+    border-radius: var(--r-md);
+    background: var(--accent-soft);
     color: var(--accent);
     display: flex;
     align-items: center;
@@ -549,6 +627,13 @@ details.log-details[open] > summary { color: var(--fg); }
 .app-icon svg { width: 36px; height: 36px; }
 
 .login-brand { margin: 0 0 1.5rem; font-size: 1.2rem; }
+
+.app:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { transition: none !important; }
+    .app-tile:hover { transform: none; }
+}
 @media (prefers-color-scheme: light) {
     .brand::before { background: #c03a28; }
 }