frontend page fixes v1

apps/web/src/lib/components/site/SiteHeader.svelte

@@ -23,9 +23,9 @@
 	});
 
 	function navTitle(href: string): string {
-		if (href === "/") return i18n.t("site.nav.home");
+		if (href === "/#how-it-works") return i18n.t("site.nav.howItWorks");
+		if (href === "/#benefits") return i18n.t("site.nav.benefits");
 		if (href === "/pricing") return i18n.t("site.nav.pricing");
-		if (href === "/docs") return i18n.t("site.nav.apiDocs");
 		return href;
 	}
 
@@ -212,20 +212,24 @@
 	</div>
 
 	{#if mobileMenuOpen}
-		<div class="absolute top-full right-0 left-0 bg-background/95 shadow-md backdrop-blur-md lg:hidden">
-			<div class="border-t border-border/80 px-4 pt-2 pb-6">
-				<nav class="mt-2 mb-4 flex flex-col space-y-1" aria-label={i18n.t("site.nav.mobile")}>
+		<div
+			class="absolute top-full right-3 left-3 mt-2 overflow-hidden rounded-xl border border-border/80 bg-background/95 shadow-xl backdrop-blur-md sm:right-4 sm:left-auto sm:w-80 lg:hidden"
+		>
+			<div class="p-3">
+				<nav class="flex flex-col gap-1" aria-label={i18n.t("site.nav.mobile")}>
 					{#each NAV_ITEMS as item}
 						<a
 							href={item.href}
-							class="block py-2.5 text-base font-medium text-text transition-colors hover:text-link"
+							class="rounded-lg px-3 py-2.5 text-sm font-medium text-text transition-colors hover:bg-accent hover:text-link"
 							onclick={(e) => onNavClick(e, item.href)}
 						>
 							{navTitle(item.href)}
 						</a>
 					{/each}
 				</nav>
-				<div class="mt-4 space-y-3">
+				<div
+					class={`mt-3 border-t border-border/80 pt-3 ${loggedIn ? "space-y-3" : "grid grid-cols-2 gap-2"}`}
+				>
 					{#if loggedIn}
 						<p class="truncate text-center text-sm font-medium text-text-muted">
 							{accountLabel}
@@ -242,7 +246,7 @@
 						<a
 							href="/login"
 							class={buttonClasses(
-								"ghost",
+								"outline",
 								"default",
 								"box-border h-10 w-full min-h-10 text-sm font-medium"
 							)}>{i18n.t("site.logIn")}</a