style: enhance mobile nav menu with blur backdrop and improve heading semantics

src/components/Header.tsx

@@ -92,7 +92,7 @@ export function Header() {
                           initial={{ opacity: 0 }}
                           animate={{ opacity: 1 }}
                           exit={{ opacity: 0 }}
-                          className="fixed inset-0 z-0 bg-transparent"
+                          className="fixed inset-0 z-0 bg-slate-300/60 backdrop-blur"
                         />
                         <PopoverPanel
                           static
@@ -104,7 +104,7 @@ export function Header() {
                             y: -32,
                             transition: { duration: 0.2 },
                           }}
-                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-transparent px-6 pt-32 pb-6"
+                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="space-y-4">
                             <MobileNavLink href="/#about">

src/components/HomeAbout.tsx

@@ -55,7 +55,7 @@ export function HomeAbout() {
             className="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
           />
         </motion.div>
-          <motion.p
+          <motion.h1
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 1, delay: 1 }}
@@ -63,7 +63,7 @@ export function HomeAbout() {
           >
             Enterprise AI Agents
             That Never Sleep.
-          </motion.p>
+          </motion.h1>
           <motion.p
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}

src/components/HomeHero.tsx

@@ -43,14 +43,15 @@ export function HomeHero() {
               repeat={0}
             />
           </div>
-          <motion.p
+          <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 1, delay: 1 }}
-            className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl"
           >
-            Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty.
+            <p className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl">
-          </motion.p>
+              Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty.
+            </p>
+          </motion.div>
           <a href="#about" className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-3xl animate-bounce-y">
             <span>scroll</span>
             <ChevronDoubleDownIcon className="h-6 w-6" />

src/styles/tailwind.css

@@ -38,6 +38,7 @@
   --animate-spin-reverse-slow: spin-reverse 4s linear infinite;
   --animate-spin-reverse-slower: spin-reverse 6s linear infinite;
   --animate-marquee-vertical: marquee-vertical 40s linear infinite;
+  --animate-bounce-y: bounce-y 1.5s infinite;
   
   --radius-4xl: 2rem;
   --radius-5xl: 2.5rem;
@@ -72,6 +73,17 @@
     }
   }
 
+  @keyframes bounce-y {
+    0%, 100% {
+      transform: translateY(-10%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: translateY(0);
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
   @keyframes marquee-vertical {
     from {
       transform: translateY(0);