docs(site): refine mobile hero positioning

Signed-off-by: xunzhuo <xunzhuo@vllm-semantic-router.ai>

Author: Xunzhuo

apps/site/src/css/elephant.css

@@ -225,9 +225,67 @@ h3 {
 }
 
 .navbar__toggle {
-  border: 1px solid var(--border-soft);
-  border-radius: 999px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  width: 2.65rem;
+  height: 2.35rem;
+  padding: 0;
+  border: 1px solid rgba(170, 162, 149, 0.26);
+  border-radius: 0.88rem;
+  background: rgba(251, 247, 239, 0.78);
   color: var(--text-main);
+  box-shadow: 0 10px 24px rgba(45, 92, 123, 0.08);
+  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
+    transform 180ms ease, box-shadow 180ms ease;
+}
+
+.navbar__toggle:hover,
+.navbar__toggle:focus-visible {
+  background: #ffffff;
+  border-color: rgba(170, 162, 149, 0.38);
+  color: var(--accent-light);
+  transform: translateY(-1px);
+  box-shadow: 0 14px 30px rgba(45, 92, 123, 0.12);
+}
+
+.navbar__toggle svg {
+  width: 1.1rem;
+  height: 1.1rem;
+  opacity: 0;
+}
+
+.navbar__toggle::before,
+.navbar__toggle::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 1.08rem;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transform: translateX(-50%);
+  transition: top 180ms ease, transform 180ms ease, width 180ms ease;
+}
+
+.navbar__toggle::before {
+  top: calc(50% - 0.24rem);
+}
+
+.navbar__toggle::after {
+  top: calc(50% + 0.24rem);
+}
+
+.navbar__toggle[aria-expanded="true"]::before {
+  top: 50%;
+  width: 1rem;
+  transform: translate(-50%, -50%) rotate(42deg);
+}
+
+.navbar__toggle[aria-expanded="true"]::after {
+  top: 50%;
+  width: 1rem;
+  transform: translate(-50%, -50%) rotate(-42deg);
 }
 
 .navbar-sidebar {
@@ -591,8 +649,12 @@ h3 {
 
 .manifesto-title {
   display: grid;
+  justify-items: center;
   gap: 0.05em;
+  margin-right: auto;
+  margin-left: auto;
   max-width: none;
+  text-align: center;
   font-size: clamp(4.4rem, 9vw, 8.4rem);
   line-height: 0.9;
   letter-spacing: -0.035em;
@@ -611,6 +673,7 @@ h3 {
   justify-items: center;
   gap: 0.95rem;
   width: min(100%, 50rem);
+  text-align: center;
   font-size: clamp(1.12rem, 1.45vw, 1.42rem);
   line-height: 1.42;
   text-wrap: pretty;
@@ -1458,7 +1521,7 @@ h3 {
   }
 
   .manifesto-section {
-    padding-top: 7.4rem;
+    padding-top: 6.9rem;
   }
 
   .manifesto-mark-wrap {
@@ -1468,12 +1531,27 @@ h3 {
 
   .manifesto-title {
     max-width: 9.2ch;
-    font-size: clamp(3.1rem, 12.2vw, 4.85rem);
+    font-size: clamp(2.9rem, 11.4vw, 4.45rem);
   }
 
   .manifesto-copy {
-    font-size: 1.14rem;
-    line-height: 1.28;
+    gap: 0.75rem;
+    width: min(100%, 23rem);
+    font-size: 1.02rem;
+    line-height: 1.3;
+  }
+
+  .manifesto-hook {
+    font-size: 1.24rem;
+    margin-bottom: 0;
+  }
+
+  .manifesto-copy .pill-row {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    width: 100%;
+    gap: 0.5rem;
+    padding-top: 0.1rem;
   }
 
   .cta-row {
@@ -1490,9 +1568,12 @@ h3 {
   }
 
   .info-pill {
+    width: 100%;
+    min-width: 0;
     min-height: 2.15rem;
-    padding: 0.55rem 0.82rem;
-    white-space: normal;
+    padding: 0.5rem 0.5rem;
+    font-size: 0.58rem;
+    white-space: nowrap;
     text-align: center;
   }
 

apps/site/src/pages/index.tsx

@@ -10,7 +10,7 @@ const installCommand = "curl -fsSL https://elephant.agentic-in.ai/install.sh | b
 const pageTitle = "Personal-Model-First Self-Evolving AI Agent";
 const pageTitleWithSite = `${pageTitle} | Elephant Agent`;
 const pageDescription =
-  "Elephant Agent grows a correctable Personal Model, asks with user-paced curiosity, and reflects after the turn so personal AI can evolve around you.";
+  "Elephant Agent starts from you, grows a correctable Personal Model, and self-evolves through curiosity and reflection.";
 const pageKeywords = [
   "personal-model-first AI",
   "personal AI agent",
@@ -46,39 +46,39 @@ const problemRows = [
     body:
       "You repeat the same people, projects, risks, and preferences every time.",
     note: "Elephant Agent carries the useful understanding forward.",
-    vs: "Others add memory slots. Elephant Agent grows a Personal Model.",
+    vs: "Others add memory slots. Elephant Agent grows understanding.",
   },
   {
     name: "Drift",
     body:
       "A strong answer today can still forget what mattered yesterday.",
     note: "Elephant Agent resumes from the right thread.",
-    vs: "Others extend context windows. Elephant Agent picks up the right thread.",
+    vs: "Others extend context windows. Elephant Agent keeps the path alive.",
   },
   {
     name: "Passivity",
     body:
       "Most agents wait for you to explain every missing piece.",
     note: "Elephant Agent can ask when the answer would change future help.",
-    vs: "Others wait. Elephant Agent gets curious at your pace, then reflects after the turn.",
+    vs: "Others wait. Elephant Agent asks gently and reflects after the turn.",
   },
 ];
 
 const thesisCards = [
   {
     kicker: "01 →",
     title: "Personal Model first",
-    body: "Identity, World, Pulse, and Journey give the agent a correctable way to understand one person.",
+    body: "Identity, World, Pulse, and Journey keep understanding centered on one person.",
   },
   {
     kicker: "02 →",
     title: "Curiosity by design",
-    body: "Quiet, balanced, or active. Elephant Agent asks only when the answer would change how it helps.",
+    body: "Quiet, balanced, or active. It asks gently when one answer would change future help.",
   },
   {
     kicker: "03",
     title: "Reflect after the turn",
-    body: "Background reflect jobs turn lived Steps into durable, inspectable understanding instead of hidden profiling.",
+    body: "After the conversation, reflect jobs turn lived evidence into correctable Personal Model updates.",
   },
 ];
 
@@ -107,7 +107,7 @@ export default function HomePage(): React.JSX.Element {
             <div className="grid manifesto-grid">
               <div className="manifesto-title-wrap">
                 <span className="label" data-reveal>
-                  Personal-model-first AI
+                  PM-first self-evolving AI
                 </span>
                 <h1 className="manifesto-title" data-reveal>
                   <span>Elephant Agent</span>
@@ -119,10 +119,8 @@ export default function HomePage(): React.JSX.Element {
                   Elephants never forget.
                 </p>
                 <p>
-                  Elephant Agent is a Personal-Model-first self-evolving AI
-                  agent. It starts from you, asks gently when understanding is
-                  missing, and reflects after the turn so the right people,
-                  risks, rhythms, and decisions can guide what happens next.
+                  Personal-Model-first self-evolving AI agent, built around
+                  you. Curious by design. Reflective after the turn.
                 </p>
                 <div className="pill-row">
                   <span className="info-pill info-pill-highlight">PM-first</span>
@@ -186,14 +184,14 @@ export default function HomePage(): React.JSX.Element {
                   <strong className="memory-key">relationship</strong>.
                 </p>
                 <p>
-                  That is the inspiration behind Elephant Agent. A personal AI
+                  That is the inspiration behind Elephant Agent. Personal AI
                   should not archive every transcript and call it memory. It
-                  should turn memory into a{" "}
+                  should self-evolve around a{" "}
                   <strong className="memory-key">correctable Personal Model</strong>:
-                  episodic traces, social context, risk signals, current
-                  rhythms, and long-term lessons that help tomorrow feel
-                  continuous. Not more storage. A living understanding that can
-                  ask, learn, and be corrected.
+                  who you are, what surrounds you, what is alive right now, and
+                  what your path has taught you. Not more storage. A living
+                  understanding that asks, reflects, and becomes more yours
+                  over time.
                 </p>
               </div>
             </div>