fix(website): prevent cloud hero text from overflowing at lg viewports

The cloud hero text wrapper used lg:translate-x-[25%] which translates by
25% of its own 640px min-width = 160px past the viewport at lg-but-not-xl
widths (1024-1279px), making the CLOUD badge, heading, and subtitle clip
on portrait monitors like 1080x1920.

Sibling product heroes (local, enterprise, api) all use 10% for the same
class. Align the cloud hero with that established pattern.

Fixes FE-610

apps/website/src/components/product/cloud/HeroSection.vue

@@ -379,7 +379,7 @@ const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
     <!-- Text -->
     <div
-      class="relative z-10 mt-17 w-full px-4 pb-16 lg:mt-0 lg:min-w-160 lg:flex-1 lg:translate-x-[25%] lg:px-20 lg:py-14"
+      class="relative z-10 mt-17 w-full px-4 pb-16 lg:mt-0 lg:min-w-160 lg:flex-1 lg:translate-x-[10%] lg:px-20 lg:py-14"
     >
       <ProductHeroBadge text="CLOUD" />