diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index 4de0ad6..86921f0 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -4,9 +4,10 @@
   import SiteList from "$lib/components/SiteList.svelte";
   import SiteDetail from "$lib/components/SiteDetail.svelte";
   import { selectedSiteId } from "$lib/stores/sites";
-  import { MousePointer2, Download } from "@lucide/svelte";
+  import { MousePointer2, Download, List, X } from "@lucide/svelte";
 
   let mouseDown = $state<{ x: number; y: number } | null>(null);
+  let sidebarOpen = $state(false);
 
   function onMouseDown(e: MouseEvent) {
     mouseDown = { x: e.clientX, y: e.clientY };
@@ -21,40 +22,63 @@
     }
     const target = e.target as HTMLElement;
     if (target.closest("[data-detail-panel]")) return;
-    if (
-      target.closest(".leaflet-marker-icon, .leaflet-popup, .leaflet-control")
-    )
-      return;
+    if (target.closest(".leaflet-marker-icon, .leaflet-popup, .leaflet-control")) return;
     selectedSiteId.set(null);
   }
+
+  function openSidebar() { sidebarOpen = true; }
+  function closeSidebar() { sidebarOpen = false; }
+
+  $effect(() => {
+    if ($selectedSiteId) closeSidebar();
+  });
 </script>
 
 <div class="flex h-[calc(100vh-56px)] overflow-hidden">
+  <!-- Mobile backdrop -->
+  {#if sidebarOpen}
+    <div class="fixed inset-0 z-40 bg-black/50 md:hidden" onclick={closeSidebar} onkeydown={() => {}}></div>
+  {/if}
+
+  <!-- Sidebar -->
   <aside
-    class="w-[340px] min-w-[300px] flex flex-col border-r border-border-main bg-surface"
+    class="flex flex-col border-r border-border-main bg-surface
+           w-[340px] min-w-[300px] max-[768px]:fixed max-[768px]:inset-y-0 max-[768px]:left-0 max-[768px]:w-[85vw] max-[768px]:max-w-[340px] max-[768px]:z-50 max-[768px]:shadow-2xl
+           {sidebarOpen ? 'max-[768px]:translate-x-0' : 'max-[768px]:-translate-x-full'}
+           max-[768px]:transition-transform max-[768px]:duration-250"
   >
-    <FilterBar /><SiteList />
-    <div
-      class="py-3 px-4 border-t border-border-main flex items-center justify-between gap-2"
-    >
-      <span class="text-xs text-text-faint flex items-center gap-1.5"
-        ><MousePointer2 size={12} /> Select a site in the list or click a marker
-        on the map to view detailed data</span
-      >
-      <a
-        href="/api/export?format=csv"
-        class="flex items-center gap-1 text-[11px] text-text-dim hover:text-accent transition-colors no-underline hover:no-underline"
-        title="Export all sites"><Download size={12} /> Export</a
-      >
+    <div class="flex items-center justify-between px-4 py-2.5 border-b border-border-main md:hidden">
+      <span class="text-xs font-medium text-text-dim uppercase tracking-wider">Sites</span>
+      <button onclick={closeSidebar} class="p-1 text-text-dim hover:text-text-main transition-colors" aria-label="Close sidebar"><X size={16} /></button>
+    </div>
+    <FilterBar />
+    <div class="flex-1 overflow-y-auto">
+      <SiteList />
+    </div>
+    <div class="py-3 px-4 border-t border-border-main flex items-center justify-between gap-2 shrink-0">
+      <span class="text-xs text-text-faint flex items-center gap-1.5"><MousePointer2 size={12}/> Click a site or marker for details</span>
+      <a href="/api/export?format=csv" class="flex items-center gap-1 text-[11px] text-text-dim hover:text-accent transition-colors no-underline hover:no-underline" title="Export all sites"><Download size={12} /> Export</a>
     </div>
   </aside>
+
+  <!-- Map container -->
   <div
     class="flex-1 relative"
     onmousedown={onMouseDown}
     onclick={onMapClick}
-    onkeydown={(e) => e.key === "Escape" && selectedSiteId.set(null)}
+    onkeydown={(e) => e.key === "Escape" && (selectedSiteId.set(null), closeSidebar())}
   >
     <MapView />
     <SiteDetail />
+
+    <!-- Floating sidebar toggle (mobile only) -->
+    <button
+      onclick={openSidebar}
+      class="hidden max-[768px]:flex absolute bottom-3 left-3 z-20 items-center gap-1.5 h-9 px-3 text-xs font-medium bg-surface border border-border-main shadow-lg hover:bg-elevated transition-colors"
+      aria-label="Open site list"
+    >
+      <List size={14} />
+      Sites
+    </button>
   </div>
 </div>
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index df0bc99..3980392 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -514,7 +514,7 @@
 
       <div
         class="absolute bottom-6 right-8 z-10 flex flex-col items-end gap-[5px] pointer-events-none"
-        style="text-shadow:0 1px 4px rgba(0,0,0,0.9)"
+        style="text-shadow:0 0 6px var(--page-bg),0 0 12px var(--page-bg)"
       >
         <span
           class="flex items-center gap-2 font-mono text-[9.5px] text-[var(--page-ink-dim)] leading-none tracking-[0.03em]"
@@ -534,14 +534,14 @@
           class="flex items-center gap-2 font-mono text-[9.5px] text-[var(--page-ink-dim)] leading-none tracking-[0.03em]"
           ><span
             class="w-[6px] h-[6px] rounded-full shrink-0 order-1"
-            style="background:rgb(25,120,150);box-shadow:0 0 4px rgb(25,120,150)"
+            style="background:rgb(30,130,160);box-shadow:0 0 4px rgb(30,130,160)"
           ></span>Bortle 3: rural sky</span
         >
         <span
           class="flex items-center gap-2 font-mono text-[9.5px] text-[var(--page-ink-dim)] leading-none tracking-[0.03em]"
           ><span
             class="w-[6px] h-[6px] rounded-full shrink-0 order-1"
-            style="background:rgb(8,40,80);box-shadow:0 0 4px rgb(8,40,80)"
+            style="background:rgb(20,45,90);box-shadow:0 0 4px rgb(20,45,90)"
           ></span>Bortle 1: pristine dark</span
         >
       </div>