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/demo.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+// Book-a-demo page. Interim: the form composes a prefilled email to
+// info@dezky.eu (zero backend, no US tools). Swap this for the self-built
+// embedded scheduler later — the copy + layout can stay.
+import { ref, computed } from 'vue'
+import { useTheme, useCopy } from '~/composables/useLanding'
+
+definePageMeta({ layout: 'page' })
+
+const t = useTheme()
+const copy = useCopy()
+const c = computed(() => copy.value.pages.demo)
+
+const name = ref('')
+const email = ref('')
+const company = ref('')
+const team = ref('')
+const message = ref('')
+
+function submit() {
+  const d = c.value
+  const subject = `Demo request — ${(company.value || name.value).trim()}`
+  const body = [
+    `${d.nameLabel}: ${name.value}`,
+    `${d.emailLabel}: ${email.value}`,
+    `${d.companyLabel}: ${company.value}`,
+    `${d.teamLabel}: ${team.value}`,
+    '',
+    message.value,
+  ].join('\n')
+  window.location.href = `mailto:info@dezky.eu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`
+}
+
+const eyebrow = computed(() => ({
+  fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.value.fgDim,
+  letterSpacing: '0.12em', textTransform: 'uppercase' as const,
+}))
+const fieldLabel = computed(() => ({
+  display: 'block', marginBottom: '8px', fontFamily: '\'JetBrains Mono\', monospace',
+  fontSize: '11px', color: t.value.fgMuted, letterSpacing: '0.06em', textTransform: 'uppercase' as const,
+}))
+const inputStyle = computed(() => ({
+  width: '100%', padding: '12px 14px', border: `1px solid ${t.value.border}`, borderRadius: '4px',
+  background: t.value.bg, color: t.value.fg, fontFamily: '\'Inter\', sans-serif', fontSize: '15px',
+  boxSizing: 'border-box' as const,
+}))
+
+useHead({ title: () => `${copy.value.pages.demo.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)">
+    <div class="demo-grid" :style="{ display: 'grid', gap: '48px', alignItems: 'start' }">
+      <!-- What to expect -->
+      <div>
+        <div :style="eyebrow">{{ c.expectHeading }}</div>
+        <ul :style="{ listStyle: 'none', margin: '24px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: '16px' }">
+          <li
+            v-for="(e, i) in c.expect" :key="i"
+            :style="{ display: 'flex', gap: '12px', fontFamily: '\'Inter\', sans-serif', fontSize: '16px', lineHeight: 1.5, color: t.fg }"
+          >
+            <span :style="{ color: t.signal, fontWeight: 700, flexShrink: 0 }">✓</span>
+            <span>{{ e }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Form -->
+      <form
+        @submit.prevent="submit"
+        :style="{ padding: 'clamp(24px, 4vw, 36px)', border: `1px solid ${t.border}`, borderRadius: '4px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '18px' }"
+      >
+        <div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: '20px', color: t.fg, letterSpacing: '-0.015em' }">{{ c.formHeading }}</div>
+
+        <div>
+          <label :style="fieldLabel">{{ c.nameLabel }}</label>
+          <input v-model="name" type="text" required :placeholder="c.namePh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.emailLabel }}</label>
+          <input v-model="email" type="email" required :placeholder="c.emailPh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.companyLabel }}</label>
+          <input v-model="company" type="text" required :placeholder="c.companyPh" :style="inputStyle">
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.teamLabel }}</label>
+          <select v-model="team" :style="{ ...inputStyle, appearance: 'none', cursor: 'pointer' }">
+            <option value="" disabled>{{ c.teamPh }}</option>
+            <option v-for="s in c.teamSizes" :key="s" :value="s">{{ s }}</option>
+          </select>
+        </div>
+        <div>
+          <label :style="fieldLabel">{{ c.messageLabel }}</label>
+          <textarea v-model="message" rows="3" :placeholder="c.messagePh" :style="{ ...inputStyle, resize: 'vertical' }" />
+        </div>
+
+        <button
+          type="submit"
+          :style="{ marginTop: '4px', background: t.signal, color: t.fg, border: 'none', padding: '16px 24px', fontFamily: '\'Inter\', sans-serif', fontSize: '15px', fontWeight: 600, borderRadius: '4px', cursor: 'pointer', letterSpacing: '-0.005em' }"
+        >{{ c.submit }} →</button>
+
+        <p :style="{ margin: 0, fontFamily: '\'Inter\', sans-serif', fontSize: '13px', lineHeight: 1.5, color: t.fgDim }">{{ c.note }}</p>
+      </form>
+    </div>
+  </LandingContainer>
+</template>
+
+<style scoped>
+.demo-grid {
+  grid-template-columns: 0.85fr 1.15fr;
+}
+@media (max-width: 768px) {
+  .demo-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>