Rebrand to the azure logo + warm sand/sea/sun palette

- Add the real Upbeat Bytes lockup (logo.svg) and use it in the header,
  replacing the placeholder inline mark + text wordmark.
- New square favicon: the logo's rising sun (bright gold) on azure.
- Recolor the design system around the logo's #0083ad azure: rename the
  --sage* accent vars to --accent*, with deep/soft azure tints; navy ink
  (#16263a) echoing the logo's "Bytes"; cool slate muted text; a deep gold
  for text-weight accents plus --gold-bright for decorative fills; warm
  sand paper background. No urgency colors.
- Retint the hero image overlay and the no-image card gradients to match.
- theme-color → azure.

Built clean; frontend tests/build pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/static/favicon.svg

@@ -1,8 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="15" fill="#2f7d5b"/>
-  <path d="M13 45 Q26 41 35 26 T53 14" fill="none" stroke="#faf6ee" stroke-width="3" opacity="0.32" stroke-linecap="round"/>
-  <circle cx="13" cy="45" r="3.6" fill="#faf6ee"/>
-  <circle cx="25" cy="37" r="4" fill="#faf6ee"/>
-  <circle cx="38" cy="26" r="4.4" fill="#faf6ee"/>
-  <circle cx="51" cy="14" r="6" fill="#e8c87a"/>
+  <rect width="64" height="64" rx="15" fill="#0083ad"/>
+  <g stroke="#e6cd42" stroke-width="3.4" stroke-linecap="round">
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(0 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(30 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(60 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(90 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(120 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(150 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(180 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(210 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(240 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(270 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(300 32 32)"/>
+    <line x1="32" y1="11" x2="32" y2="17.5" transform="rotate(330 32 32)"/>
+  </g>
+  <circle cx="32" cy="32" r="9.2" fill="#e6cd42"/>
 </svg>