Center MainNav vertically on home hero, add fading title

app/layouts/topnav.vue

@@ -8,9 +8,24 @@
         <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent" />
       </template>
 
-      <!-- MainNavigation - same everywhere, just glass-style on home/catalog -->
+      <!-- Hero title (home page only, fades on scroll) -->
+      <div
+        v-if="isHomePage"
+        class="absolute left-0 right-0 text-center pointer-events-none z-20"
+        :style="heroTitleStyle"
+      >
+        <h1 class="text-4xl lg:text-5xl font-bold text-white mb-2">
+          {{ $t('hero.title', 'Оптовая торговля') }}
+        </h1>
+        <p class="text-lg text-white/70">
+          {{ $t('hero.subtitle', 'Найдите лучших поставщиков и товары') }}
+        </p>
+      </div>
+
+      <!-- MainNavigation - same everywhere, centered vertically on home page -->
       <MainNavigation
         class="relative z-10"
+        :style="mainNavStyle"
         :session-checked="sessionChecked"
         :logged-in="isLoggedIn"
         :user-avatar-svg="userAvatarSvg"
@@ -175,6 +190,26 @@ const headerContainerStyle = computed(() => {
   return {}
 })
 
+// MainNavigation style - centered vertically on home page, normal on other pages
+const mainNavStyle = computed(() => {
+  if (!isHomePage.value) return {}
+  // Center MainNav (100px) in container: margin-top = (height - 100) / 2
+  const marginTop = Math.max(0, (heroHeight.value - 100) / 2)
+  return { marginTop: `${marginTop}px` }
+})
+
+// Hero title style - positioned above MainNav, fades on scroll
+const heroTitleStyle = computed(() => {
+  // Position title above the centered MainNav
+  const navMarginTop = Math.max(0, (heroHeight.value - 100) / 2)
+  const titleBottom = heroHeight.value - navMarginTop + 20 // 20px gap above nav
+  return {
+    bottom: `${titleBottom}px`,
+    opacity: 1 - collapseProgress.value,
+    transform: `translateY(${collapseProgress.value * -20}px)`
+  }
+})
+
 // Main content padding-top to compensate for fixed header
 const mainStyle = computed(() => {
   if (isCatalogSection.value) return { paddingTop: '0' }