Refine mobile hero and navbar layout

components/home-page.tsx

@@ -55,11 +55,11 @@ export function HomePage({ language }: { language: Language }) {
       <main className="site-container flex flex-col gap-12 py-6 md:gap-14 md:py-8 lg:gap-16 lg:py-10">
         <section className="grid gap-5">
           <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-stretch">
-            <div className="section-shell hero-glow line-frame h-full">
-              <div className="section-padding editorial-grid flex h-full flex-col justify-center">
+            <div className="section-shell hero-shell hero-glow line-frame h-full">
+              <div className="section-padding hero-panel editorial-grid flex h-full flex-col justify-center">
                 <p className="section-kicker">{t.ui.editorialPortfolio}</p>
                 <h1
-                  className={`type-hero-title mt-6 max-w-4xl text-[var(--color-ink)] ${
+                  className={`type-hero-title hero-title mt-6 max-w-4xl text-[var(--color-ink)] ${
                     language === "en" ? "type-hero-title-latin" : ""
                   }`}
                 >
@@ -78,7 +78,7 @@ export function HomePage({ language }: { language: Language }) {
                   </p>
                 </div>
 
-                <div className={`hero-action-group mt-10 flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
+                <div className={`hero-action-group flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
                   <Link href={`${basePath}#projects`} className="button-primary hero-action-link">
                     {t.ui.viewProjects}
                   </Link>