feat(website): responsive / mobile layouts

Make the marketing site mobile-friendly across every page and section.
Desktop appearance is unchanged; all breakpoint logic targets <=768px.

- Fluid section padding via clamp(); equal grids use auto-fit/minmax,
  asymmetric grids stack to one column via scoped-CSS media queries
- Nav: real hamburger menu on mobile (links, lang toggle, login, CTA)
- ProductMockup: scales the whole dashboard to fit (zoom) instead of
  reflowing its internals into a tall stack
- Lower oversized heading clamp() minimums so titles no longer overflow
  at ~390px (hero, page headers, final CTA, brand cover/chapter)
- HowItWorks: row-gap when steps stack so node markers clear the text
- Compare + partners tables: stacked rows now label each value with its
  column (Dezky vs hyperscaler / CSP) instead of an ambiguous header
- Footer columns, tiers, calculator and tables stack cleanly on mobile

apps/website/components/landing/Hero.vue

@@ -23,8 +23,8 @@ const brush = {
 </script>
 
 <template>
-  <section :style="{ background: t.bg, color: t.fg, paddingTop: '80px' }">
-    <LandingContainer pad="60px 64px 0">
+  <section :style="{ background: t.bg, color: t.fg, paddingTop: 'clamp(40px, 6vw, 80px)' }">
+    <LandingContainer pad="clamp(40px, 5vw, 60px) clamp(20px, 5vw, 64px) 0">
       <div :style="{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '56px' }">
         <span :style="{ width: '6px', height: '6px', borderRadius: '999px', background: t.signal, boxShadow: `0 0 0 4px ${t.signal}33` }" />
         <span :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '12px', color: t.fgMuted, letterSpacing: '0.04em', whiteSpace: 'nowrap' }">{{ copy.hero.eyebrow }}</span>
@@ -32,7 +32,7 @@ const brush = {
 
       <h1 :style="{
         fontFamily: '\'Inter Tight\', \'Inter\', sans-serif',
-        fontWeight: 600, fontSize: 'clamp(56px, 7.2vw, 112px)', letterSpacing: '-0.04em',
+        fontWeight: 600, fontSize: 'clamp(38px, 7.2vw, 112px)', letterSpacing: '-0.04em',
         lineHeight: 0.96, margin: 0, textWrap: 'balance', color: t.fg,
       }">
         <template v-for="(part, i) in headline" :key="i">
@@ -61,7 +61,7 @@ const brush = {
       </div>
     </LandingContainer>
 
-    <LandingContainer pad="80px 64px 120px">
+    <LandingContainer pad="clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 120px)">
       <LandingProductMockup />
     </LandingContainer>
   </section>