chihaja jdida

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;
 }