fix: align landing capsule under hero title

app/components/navigation/MainNavigation.vue

@@ -532,6 +532,8 @@ const getTokenIcon = (type: string) => {
 const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
 const topRowHeight = 100
 const LANDING_CAPSULE_TOP_STOP = 2
+const HERO_TITLE_HEIGHT_ESTIMATE = 72
+const HERO_CAPSULE_GAP = 20
 
 const rowStyle = computed(() => {
   if (isHeroLayout.value) {
@@ -540,22 +542,30 @@ const rowStyle = computed(() => {
   return { height: `${props.height}px` }
 })
 
-const heroTitleStyle = computed(() => {
-  if (!isHeroLayout.value) return {}
+const heroTitleTop = computed(() => {
+  if (!isHeroLayout.value) return 0
   const heroHeight = props.height || topRowHeight
   const minTop = 0
   const maxTop = Math.max(120, Math.round(heroHeight * 0.42))
   const progress = Math.min(1, Math.max(0, props.collapseProgress || 0))
-  const top = Math.round(maxTop - (maxTop - minTop) * progress)
-  return { marginTop: `${top}px` }
+  return Math.round(maxTop - (maxTop - minTop) * progress)
+})
+
+const heroTitleStyle = computed(() => {
+  if (!isHeroLayout.value) return {}
+  return { marginTop: `${heroTitleTop.value}px` }
 })
 
 const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
 
 const landingCapsuleTopStart = computed(() => {
+  if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
+  const naturalTop = heroTitleTop.value + HERO_TITLE_HEIGHT_ESTIMATE + HERO_CAPSULE_GAP
+  const minTop = 180
   const base = props.heroBaseHeight || props.height || 0
-  if (!base) return 420
-  return Math.max(300, Math.min(520, Math.round(base * 0.52)))
+  if (!base) return Math.max(minTop, naturalTop)
+  const maxTop = Math.max(260, base - 140)
+  return Math.max(minTop, Math.min(maxTop, naturalTop))
 })
 
 const landingCapsuleTop = computed(() => {