Add subtitle under Agent Market Arena header

src/components/HeaderOpen.vue

@@ -2,9 +2,14 @@
   <header class="arena-header">
     <div class="bar">
       <!-- Title (left) -->
-      <button class="arena-title" aria-label="Agent Market Arena" @click="navigateTo('/')">
-        Agent Market Arena
-      </button>
+      <div class="title-section">
+        <button class="arena-title" aria-label="Agent Market Arena" @click="navigateTo('/')">
+          Agent Market Arena
+        </button>
+        <p class="arena-subtitle">
+          A real-time, ever-evolving platform for continuous competition among AI trading agents.
+        </p>
+      </div>
 
       <!-- Tabs (right) -->
       <nav class="menu" aria-label="Primary">
@@ -76,7 +81,14 @@ export default {
   gap: 16px;
 }
 
-/* Title (left) with AMA gradient text */
+/* Title section (left) */
+.title-section{
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Title with AMA gradient text */
 .arena-title{
   all: unset;
   cursor: pointer;
@@ -89,6 +101,17 @@ export default {
   color: transparent;
 }
 
+/* Subtitle */
+.arena-subtitle{
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  max-width: 450px;
+}
+
 /* Tabs (right) */
 .menu{
   display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
@@ -131,8 +154,10 @@ export default {
 /* responsive */
 @media (max-width: 720px){
   .bar{ flex-direction: column; align-items: stretch; }
+  .title-section{ align-items: center; text-align: center; }
+  .arena-title{ font-size: 22px; }
+  .arena-subtitle{ font-size: 12px; max-width: 100%; }
   .menu{ justify-content: center; gap: 18px; }
-  .arena-title{ text-align: center; font-size: 22px; }
   .menu-item{ font-size: 18px; }
 }
 </style>