feat: brand UI with real APEX logo + auto-running showcase demo

UI:
- Embed the real APEX logo PNG (transparent mark) in dashboard sidebar,
  cmd-header, landing nav, and landing hero (replaces SVG approximations).
- Add favicon.png across all six templates.
- Nudge color palette to brand cyan→blue→purple gradient and silver-white
  wordmark; word-by-word coloring on the cmd-header tagline.
- Drop-shadow glow on logo marks tuned to the brand-blue.

Demo:
- python -m demo.run_demo now defaults to an auto-running showcase: opens
  the dashboard, kicks off a ~3-4 min optimization that exercises every
  phase, and lands on a verdict modal — no manual setup needed.
- Tight per-iteration targets so Phase 2 actually iterates (visible AI loop).
- Skip per-run AI analysis during Phase 1 exploration via APEX_DEMO_SKIP_PHASE1_AI=1
  to keep total runtime down without losing the headline AI loop in Phase 2.
- --quick flag opts back to the original fast/manual flow.
- --loop auto-restarts for unattended screen recording.

Docs:
- README + SUBMISSION updated to describe the new auto-running default.

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

ui/templates/landing.html

@@ -4,12 +4,16 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>APEX — AI-Powered EA Optimizer</title>
+  <link rel="icon" type="image/png" href="/static/img/favicon.png">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   <style>
     :root {
       --bg: #080d1a;
-      --accent: #4f46e5;
-      --accent2: #7c6dfa;
+      --brand-cyan: #00d4ff;
+      --brand-blue: #4f6cff;
+      --brand-purple: #9333ea;
+      --accent: #4f6cff;
+      --accent2: #8b5cf6;
       --teal: #00d4aa;
       --text: #e2e8f0;
       --muted: #64748b;
@@ -72,6 +76,15 @@
       align-items: center;
       gap: 0.75rem;
     }
+    .nav-mark,
+    .hero-mark {
+      display: block;
+      flex-shrink: 0;
+      filter: drop-shadow(0 0 14px rgba(79,108,255,0.35));
+    }
+    .hero-mark {
+      filter: drop-shadow(0 0 28px rgba(79,108,255,0.45));
+    }
 
     .nav-logo-text {
       font-size: 1.25rem;
@@ -145,7 +158,7 @@
       font-weight: 900;
       letter-spacing: -0.04em;
       line-height: 1;
-      background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #00d4aa 100%);
+      background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #b06bff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -239,7 +252,7 @@
       font-size: 4rem;
       font-weight: 900;
       letter-spacing: 0.1em;
-      background: linear-gradient(135deg, #4f46e5, #00d4aa);
+      background: linear-gradient(135deg, #00d4ff, #4f6cff, #9333ea);
       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
       opacity: 0.15;
       pointer-events: none;
@@ -307,20 +320,7 @@
   <!-- Navbar -->
   <nav class="navbar">
     <div class="nav-logo">
-      <svg width="32" height="32" viewBox="0 0 36 36" fill="none">
-        <polygon points="18,2 34,32 2,32" fill="url(#logoGradL)" opacity="0.15"/>
-        <polygon points="18,8 30,30 6,30" fill="url(#logoGradL)" opacity="0.3"/>
-        <path d="M18 6L22 14H14L18 6Z" fill="url(#logoGradL)"/>
-        <rect x="11" y="22" width="3" height="8" rx="1" fill="#00d4aa"/>
-        <rect x="16" y="18" width="3" height="12" rx="1" fill="#00d4aa" opacity="0.8"/>
-        <rect x="21" y="14" width="3" height="16" rx="1" fill="#00d4aa" opacity="0.6"/>
-        <defs>
-          <linearGradient id="logoGradL" x1="0" y1="0" x2="1" y2="1">
-            <stop offset="0%" stop-color="#4f46e5"/>
-            <stop offset="100%" stop-color="#00d4aa"/>
-          </linearGradient>
-        </defs>
-      </svg>
+      <img src="/static/img/apex-mark.png" alt="APEX" class="nav-mark" width="34" height="38">
       <span class="nav-logo-text">APEX</span>
     </div>
     <div class="status-pill" id="status-pill">
@@ -335,21 +335,7 @@
       <div class="hero-badge">&#10022; Hackathon Edition 2026</div>
 
       <div class="hero-logo-row">
-        <svg width="72" height="72" viewBox="0 0 72 72" fill="none">
-          <polygon points="36,4 68,64 4,64" fill="url(#heroGrad)" opacity="0.12"/>
-          <polygon points="36,16 60,60 12,60" fill="url(#heroGrad)" opacity="0.25"/>
-          <path d="M36 12L44 28H28L36 12Z" fill="url(#heroGrad)"/>
-          <path d="M33 20L36 13L39 20" stroke="#00d4aa" stroke-width="1.5" fill="none" stroke-linecap="round"/>
-          <rect x="22" y="44" width="6" height="16" rx="2" fill="#00d4aa" opacity="0.9"/>
-          <rect x="33" y="36" width="6" height="24" rx="2" fill="#00d4aa" opacity="0.7"/>
-          <rect x="44" y="28" width="6" height="32" rx="2" fill="#00d4aa" opacity="0.5"/>
-          <defs>
-            <linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
-              <stop offset="0%" stop-color="#4f46e5"/>
-              <stop offset="100%" stop-color="#7c6dfa"/>
-            </linearGradient>
-          </defs>
-        </svg>
+        <img src="/static/img/apex-mark.png" alt="APEX" class="hero-mark" width="120" height="132">
       </div>
 
       <div class="hero-title">APEX</div>