Add video background to landing hero and lower text position

frontend/src/views/LandingView.vue

@@ -16,6 +16,11 @@
 
     <!-- Minimalist Hero -->
     <header class="hero-minimal">
+      <video autoplay muted loop playsinline class="hero-video">
+        <source src="/videopromo.mp4" type="video/mp4">
+      </video>
+      <div class="hero-overlay"></div>
+      
       <div class="hero-content">
         <h1 class="hero-title" data-aos="fade-up">
           {{ t('landing.hero.title') }}
@@ -227,12 +232,40 @@ const scrollToInstall = () => {
 
 /* Hero */
 .hero-minimal {
-  height: 90vh;
+  position: relative;
+  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 0 24px;
+  overflow: hidden;
+}
+
+.hero-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  z-index: -2;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
+  z-index: -1;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  padding-top: 80px; /* Lower the text */
 }
 
 .hero-title {