Fix mobile nav: hamburger left, brand right, polished menu panel

src/components/navigation.tsx

@@ -18,7 +18,7 @@ export async function Navigation() {
 			className="sticky top-0 z-40"
 			style={{ backgroundColor: "var(--color-navbar)" }}
 		>
-			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
+			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-2">
 				<div
 					className="absolute bottom-0 left-0 right-0 h-[3px]"
 					style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
@@ -310,6 +310,29 @@ export async function Navigation() {
 					</div>
 				</MobileNav>
 
+				{/* Mobile: brand (right) */}
+				<Link
+					href="/"
+					className="ml-auto flex md:hidden items-center gap-2 shrink-0"
+					aria-label="Home"
+				>
+					<Image
+						src="/assets/images/icons/navigation/home.png"
+						alt=""
+						width={26}
+						height={26}
+					/>
+					<span
+						className="text-base font-extrabold uppercase tracking-wide"
+						style={{
+							color:
+								"var(--color-navbar-text-readable, var(--color-navbar-text))",
+						}}
+					>
+						Atom
+					</span>
+				</Link>
+
 				{/* Desktop: controls */}
 				<div className="ml-auto hidden md:flex items-center gap-x-1">
 					<LanguageSwitcher />