I like that you pair fetchpriority="high" on the hero image with lazy-loading everything else, since that combo is easy to get backwards. One thing I'd be curious about: when you start at 360px with clamp() for the headline, how do you handle very long translated headlines that wrap to four or five lines on small screens?
DemoVexa
The one I see most is the hero product screenshot. It's a full desktop dashboard captured at 1440px, so at 360px every label in it is too small to read and the image says nothing. A crop of one panel, the part that shows the result, works much better on a phone, and the picture element lets you serve that crop only on small screens. The same goes for hero videos: they need muted and playsinline to autoplay inline on iPhones, and a poster image so there's something to see before the video loads. Without the poster, the top of the page is an empty box on slow 4G.