diff --git a/CSS.css b/CSS.css
index 2e66ce7..4277ccb 100644
--- a/CSS.css
+++ b/CSS.css
@@ -1,42 +1,132 @@
 :root {
-  --color-bg: #0a0a0a;       /* dark background */
-  --color-primary: #003366;  /* dark blue accent (changed) */
-  --color-text: #f5f5f5;     /* near-white text */
-  --color-muted: #9a9a9a;    /* muted gray */
-}
-
-/* keep header fixed at top while scrolling and avoid content overlap */
-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 64px;              /* consistent header height */
-  padding: 1rem 2rem;
+ --color-bg: #0a0a0a;
+ --color-primary: #c77dff;
+ --color-text: #f5f5f5;
+ --color-muted: #9a9a9a;
+    }
+* { 
+   margin:0;
+   padding:0; 
+   box-sizing:border-box; 
+    }
+    body { 
+      font-family: 'Inter', sans-serif; 
+      background: var(--color-bg);
+       color: var(--color-text);
+        line-height:1.6;
+   }
+    a { 
+      text-decoration:none;
+       color:inherit; 
+    }
+    header {
+        position:fixed;
+        top:0; left:0; right:0;
+        background:rgba(10,10,10,.9); 
+        backdrop-filter:blur(10px); 
+        padding:1rem 2rem;
+        display:flex; align-items:center;
+        justify-content:space-between;
+        z-index:50; 
+    }
+    nav ul { 
+      display:flex;
+      gap:2rem;
+      list-style:none; 
+    }
+    .btn { 
+      padding:.75rem 1.25rem;
+      border-radius:.5rem; 
+      font-weight:600; 
+      transition:.3s; 
+    }
+    .btn-primary { 
+      background:var(--color-primary); 
+      color:#000;
+     }
+    .btn-outline { 
+      border:1px solid var(--color-primary); 
+      color:var(--color-primary);
+     }
+    section {
+       padding:6rem 2rem;
+        max-width:1200px;
+         margin:auto;
+         }
+    .hero { 
+      min-height:100vh; 
+      display:flex; 
+      flex-direction:column; 
+      align-items:center; 
+      justify-content:center; text-align:center;
+     }
+    .hero h1 {
+       font-size:3rem;
+        font-weight:700;
+         margin-bottom:1rem;
+         }
+    .hero p { 
+      max-width:600px;
+      margin-bottom:2rem;
+      color:var(--color-muted);
+       }
+    .features { 
+      display:grid;
+       grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
+        gap:1.5rem; margin-top:3rem;
+       }
+    .card {
+       padding:2rem;
+       background:#111;
+       border-radius:1rem; text-align:center;
+         }
+    .steps { 
+      display:grid;
+       grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
+        gap:1rem; margin-top:3rem;
+       }
+    .step { 
+      padding:1.5rem; 
+      border:1px solid #222; border-radius:.75rem;
+     }
+    footer { 
+      background:#111;
+      padding:3rem 2rem;
+      text-align:center; 
+      font-size:.875rem; 
+      color:var(--color-muted);
+     }
+.hero {
+  position: relative;
+  min-height: 100vh;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  background: transparent;   /* transparent so video shows through */
-  z-index: 1000;
-}
-
-/* ensure page content begins below the fixed header */
-body {
-  font-family: 'Inter', sans-serif;
-  background: var(--color-bg);
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
   color: var(--color-text);
-  padding-top: 64px;         /* same as header height */
 }
 
-/* keep video behind everything */
-.background-video {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  object-fit: cover;
-  z-index: 0;
-  opacity: 0.7;
-  pointer-events: none;
+.hero-video {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;   /* keeps aspect ratio, fills screen */
+  z-index: -2;         /* send video to back */
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(10,10,10,0.6); /* dark overlay for readability */
+  z-index: -1; /* above video, below text */
+}
+
+.hero-overlay {
+  position: relative;
+  max-width: 800px;
+  padding: 2rem;
 }
diff --git a/HTML.html b/HTML.html
index 4e213e2..844f4cd 100644
--- a/HTML.html
+++ b/HTML.html
@@ -1,8 +1,3 @@
-<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-<script>
-  AOS.init({ duration: 800, once: true });
-</script>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,147 +5,85 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Your Brand</title>
   <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-  <link rel="stylesheet" href="CSS.css"> <!-- added: project CSS -->
-  <style>
-    :root {
-      --color-bg: #0a0a0a;
-      --color-primary: #003366; /* changed to dark blue */
-      --color-text: #f5f5f5;
-      --color-muted: #9a9a9a;
-    }
-    * { margin:0; padding:0; box-sizing:border-box; }
-    body { font-family: 'Inter', sans-serif; background: var(--color-bg); color: var(--color-text); line-height:1.6; }
-    a { text-decoration:none; color:inherit; }
-    header {
-      position: fixed;
-      top: 0; left: 0; right: 0;
-      background: transparent; /* transparent header */
-      padding: 1rem 2rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      z-index: 50;
-    }
-    
-    nav ul { display:flex; gap:2rem; list-style:none; }
-    .btn { padding:.75rem 1.25rem; border-radius:.5rem; font-weight:600; transition:.3s; }
-    .btn-primary { background:var(--color-primary); color:#fff; }
-    .btn-outline { border:1px solid var(--color-primary); color:var(--color-primary); }
-    section { padding:6rem 2rem; max-width:1200px; margin:auto; }
-    .hero {
-      position: relative;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-      overflow: hidden;
-    }
-    .hero-video {
-      position: absolute;
-      top: 0; left: 0; width: 100%; height: 100%;
-      object-fit: cover;
-      z-index: 1;
-      opacity: 0.7;
-    }
-    .hero-content {
-      position: relative;
-      z-index: 2;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .hero h1 { font-size:3rem; font-weight:700; margin-bottom:1rem; }
-    .hero p { max-width:600px; margin-bottom:2rem; color:var(--color-muted); }
-    .features { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:3rem; }
-    .card { padding:2rem; background:#111; border-radius:1rem; text-align:center; }
-    .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-top:3rem; }
-    .step { padding:1.5rem; border:1px solid #222; border-radius:.75rem; }
-    footer { background:#111; padding:3rem 2rem; text-align:center; font-size:.875rem; color:var(--color-muted); }
-    .background-video {
-      position: fixed;
-      top: 0; left: 0;
-      width: 100vw; height: 100vh;
-      object-fit: cover;
-      z-index: 0;
-      opacity: 0.7;
-      pointer-events: none;
-    }
-    header, .hero-content, section, footer {
-      position: relative;
-      z-index: 2;
-    }
+  <link rel="stylesheet" href="CSS.css">
   </style>
 </head>
 <body>
-  <video autoplay muted loop playsinline class="background-video">
+
+<header>
+  <div class="logo">YourBrand</div>
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li><a href="#">About</a></li>
+    </ul>
+  </nav>
+  <div>
+    <a href="#" class="btn btn-outline">Login</a>
+    <a href="#" class="btn btn-primary">Sign Up</a>
+  </div>
+</header>
+
+<section class="hero" data-aos="fade-up">
+  <video autoplay muted loop playsinline class="hero-video">
     <source src="0916.mp4" type="video/mp4">
+    <!-- Optional fallback image if video fails -->
     Your browser does not support the video tag.
   </video>
 
-  <header>
-    <div class="logo">
-      <img src="logo 1.png" alt="YourBrand Logo" style="height:40px; vertical-align:middle;">
-    </div></div>
-    <nav>
-      <ul>
-        <li><a href="#">Kundenliste</a></li>
-        <li><a href="#">Kundenprofil</a></li>
-        <li><a href="#">Kunden bearbeiten</a></li>
-        <li><a href="#">Services</a></li>
-        <li><a href="#">Preisverwaltung</a></li>
-        <li><a href="#">Status</a></li>
-      </ul>
-    </nav>
-    <div>
-      <a href="#" class="btn btn-outline">Login</a>
-      <a href="#" class="btn btn-primary">Sign Up</a>
-    </div>
-  </header>
+  <div class="hero-overlay">
+    <h1>All-in-One Platform</h1>
+    <p>Manage your money, payments, and lifestyle in one place.</p>
+    <a href="#" class="btn btn-primary">Get Started</a>
+  </div>
+</section>
+  <h1>All-in-One Platform</h1>
+  <p>Manage your money, payments, and lifestyle in one place. Dummy text for now.</p>
+  <div>
+    <a href="#" class="btn btn-primary">Get Started</a>
+  </div>
+</section>
 
-  <section class="hero" data-aos="fade-up">
-    <div class="hero-content">
-      <h1>All-in-One Platform</h1>
-      <p>Manage your money, payments, and lifestyle in one place. Dummy text for now.</p>
-    </div>
-  </section>
+<section data-aos="fade-up">
+  <h2>Our Features</h2>
+  <div class="features">
+    <div class="card">Feature One</div>
+    <div class="card">Feature Two</div>
+    <div class="card">Feature Three</div>
+  </div>
+</section>
 
-  <section data-aos="fade-up">
-    <h2>Our Features</h2>
-    <div class="features">
-      <div class="card">Feature One</div>
-      <div class="card">Feature Two</div>
-      <div class="card">Feature Three</div>
-    </div>
-  </section>
+<section data-aos="fade-up">
+  <h2>How It Works</h2>
+  <div class="steps">
+    <div class="step">01. Sign Up</div>
+    <div class="step">02. Add</div>
+    <div class="step">03. Method</div>
+    <div class="step">04. Review</div>
+    <div class="step">05. Done</div>
+  </div>
+</section>
 
-  <section data-aos="fade-up">
-    <h2>How It Works</h2>
-    <div class="steps">
-      <div class="step">01. Sign Up</div>
-      <div class="step">02. Add</div>
-      <div class="step">03. Method</div>
-      <div class="step">04. Review</div>
-      <div class="step">05. Done</div>
-    </div>
-  </section>
+<section data-aos="fade-up">
+  <h2>What People Say</h2>
+  <div class="features">
+    <div class="card">"Great app!"User A</div>
+    <div class="card">"Fast and simple." User B</div>
+    <div class="card">"Love the design." User C</div>
+  </div>
+</section>
 
-  <section data-aos="fade-up">
-    <h2>What People Say</h2>
-    <div class="features">
-      <div class="card">"Great app!" – User A</div>
-      <div class="card">"Fast and simple." – User B</div>
-      <div class="card">"Love the design." – User C</div>
-    </div>
-  </section>
+<footer>
+  © 2025 YourBrand – All rights reserved.
+</footer>
 
-  <footer>
-    © 2025 YourBrand – All rights reserved.
-  </footer>
-
-  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-  <script>AOS.init({ duration:800, once:true });</script>
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+<script>AOS.init({ duration:800, once:true });</script>
 </body>
 </html>
+<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+<script>
+  AOS.init({ duration: 800, once: true });
+</script>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e69de29