feat(website): book-a-demo & status pages, expand roadmap/contact

- /demo: book-a-demo page with a what-to-expect column + a form that
  composes a prefilled email to info@dezky.eu (interim, no backend); built
  to swap for a self-hosted scheduler later. Wire every "Book a demo" CTA
  (nav, hero, pricing, the previously-dead final-CTA button, and the
  contact/partners/migration/coming-soon CTAs) to /demo.
- /status: manually-maintained system-status page (overall banner,
  per-service rows, incident history). Live modules operational; Video/Chat
  marked coming soon.
- Roadmap: expand the board (5 items/column) + a "the bigger picture"
  themes grid + a "suggest a feature" CTA + a directional-timelines note.
- Contact: purpose-specific channels (info@ / legal@ / privacy@), a
  response-time note, and a company + "see it live" demo block.
- Drop /status from the [slug].vue stub map; tidy now-unused imports.

apps/website/pages/roadmap.vue

@@ -7,13 +7,23 @@ const t = useTheme()
 const copy = useCopy()
 const c = computed(() => copy.value.pages.roadmap)
 
+const eyebrow = computed(() => ({
+  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
+  letterSpacing: '0.12em', textTransform: 'uppercase' as const,
+}))
+const h2 = computed(() => ({
+  fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(28px, 3.6vw, 44px)',
+  letterSpacing: '-0.03em', lineHeight: 1.05, margin: '14px 0 0', color: t.value.fg, textWrap: 'balance' as const,
+}))
+
 useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
 </script>
 
 <template>
   <LandingPageHeader :label="c.label" :title="c.title" :intro="c.intro" />
 
-  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+  <!-- Board -->
+  <LandingContainer pad="clamp(56px, 8vw, 56px) clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
     <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
       <div
         v-for="(col, i) in c.columns" :key="i"
@@ -33,6 +43,35 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
         </div>
       </div>
     </div>
+    <p :style="{ marginTop: '20px', fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.55, color: t.fgDim, maxWidth: '620px' }">{{ c.note }}</p>
+  </LandingContainer>
+
+  <!-- Themes -->
+  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(40px, 6vw, 64px)">
+    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
+      <div :style="eyebrow">{{ c.themesLabel }}</div>
+      <h2 :style="h2">{{ c.themesHeading }}</h2>
+      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 48px', maxWidth: '640px', textWrap: 'pretty' }">{{ c.themesLede }}</p>
+
+      <div class="roadmap-themes" :style="{ display: 'grid', gap: '1px', background: t.border, border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
+        <div
+          v-for="(th, i) in c.themes" :key="i"
+          :style="{ padding: '28px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '10px' }"
+        >
+          <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '19px', color: t.fg, letterSpacing: '-0.015em' }">{{ th[0] }}</div>
+          <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '15px', lineHeight: 1.6, color: t.fgMuted, margin: 0, textWrap: 'pretty' }">{{ th[1] }}</p>
+        </div>
+      </div>
+    </div>
+  </LandingContainer>
+
+  <!-- CTA -->
+  <LandingContainer pad="0 clamp(20px, 5vw, 64px) clamp(80px, 12vw, 160px)">
+    <div :style="{ borderTop: `1px solid ${t.borderStrong}`, paddingTop: 'clamp(40px, 5vw, 56px)' }">
+      <h2 :style="h2">{{ c.ctaHeading }}</h2>
+      <p :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '18px', lineHeight: 1.6, color: t.fgMuted, margin: '20px 0 28px', maxWidth: '620px', textWrap: 'pretty' }">{{ c.ctaBody }}</p>
+      <LandingBtn variant="primary" size="lg" @click="navigateTo('/contact')">{{ c.ctaButton }} →</LandingBtn>
+    </div>
   </LandingContainer>
 </template>
 
@@ -44,6 +83,9 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
 .roadmap-col--first {
   border-left: none;
 }
+.roadmap-themes {
+  grid-template-columns: 1fr 1fr;
+}
 @media (max-width: 768px) {
   .roadmap-col {
     border-left: none;
@@ -52,5 +94,8 @@ useHead({ title: () => `${copy.value.pages.roadmap.label} · dezky` })
   .roadmap-col--first {
     border-top: none;
   }
+  .roadmap-themes {
+    grid-template-columns: 1fr;
+  }
 }
 </style>