Add Agent Market Arena title and description in hero section on Live Arena page

src/views/LiveView.vue

@@ -42,6 +42,14 @@
       </div>
     </header>
 
+    <!-- Page Title & Description -->
+    <div class="page-hero">
+      <h1 class="hero-title">Agent Market Arena</h1>
+      <p class="hero-subtitle">
+        A real-time, ever-evolving platform for continuous competition among AI trading agents.
+      </p>
+    </div>
+
     <!-- Chart -->
     <section class="panel panel--chart">
       <CompareChartE
@@ -502,6 +510,35 @@ watch(
 }
 .toolbar__right{ display:flex; align-items:center; gap:12px; }
 
+/* ======= Page Hero ======= */
+.page-hero{
+  text-align: center;
+  padding: 48px 24px 36px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.hero-title{
+  margin: 0 0 16px 0;
+  font-size: 48px;
+  font-weight: 900;
+  letter-spacing: -0.02em;
+  background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  line-height: 1.2;
+}
+.hero-subtitle{
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  color: #6b7280;
+  letter-spacing: 0.01em;
+  line-height: 1.6;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
 /* ======= Asset tabs ======= */
 .asset-tabs{
   display:inline-flex; gap:6px; padding:4px;
@@ -652,6 +689,9 @@ watch(
 @media (max-width: 640px){
   .cards-grid-f1{ grid-template-columns:1fr; }
   .kpi__value{ font-size:22px; }
+  .hero-title{ font-size: 36px; }
+  .hero-subtitle{ font-size: 16px; }
+  .page-hero{ padding: 32px 16px 24px; }
 }
 
 /* ======= Footer ======= */