mobile is finished

src/app/components/header/header.component.scss

@@ -639,6 +639,70 @@
   align-items: center;
 }
 
+// Mobile Menu Backdrop
+.dexar-menu-backdrop {
+  display: none;
+}
+
+// Mobile Menu Panel
+.dexar-mobile-menu {
+  display: none;
+}
+
+// Mobile Menu Items
+.dexar-mobile-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  width: 395px;
+  max-width: 100%;
+  height: 42px;
+  padding: 15px 26px;
+  background: #e9edf1;
+  border: 1px solid #d3dad9;
+  border-radius: 13px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: #1e3c38;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease;
+  box-sizing: border-box;
+
+  &:hover {
+    background: #dce2e7;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  svg:first-child {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+  }
+
+  span {
+    flex: 1;
+  }
+
+  .dexar-mobile-chevron {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+}
+
+.dexar-mobile-lang {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+}
+
 .dexar-menu-toggle {
   display: none;
   flex-direction: column;
@@ -756,45 +820,14 @@
     padding: 0 16px;
   }
   
+  // Hide desktop nav
   .dexar-nav {
-    position: fixed;
-    top: 84px;
-    left: 0;
-    right: 0;
-    background: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    
-    &.dexar-nav-open {
-      max-height: 400px;
-    }
+    display: none;
   }
   
-  .dexar-nav-group {
-    flex-direction: column;
-    width: 100%;
-    box-shadow: none;
-  }
-  
-  .dexar-nav-btn {
-    width: 100%;
-    border-radius: 0 !important;
-    border: none;
-    border-bottom: 1px solid #d3dad9;
-    padding: 16px !important;
-    font-size: 18px;
-    
-    &:hover {
-      background: rgba(161, 180, 181, 0.3);
-    }
-  }
-  
-  .dexar-nav-btn-left,
-  .dexar-nav-btn-middle,
-  .dexar-nav-btn-right {
-    padding: 16px !important;
+  // Hide desktop language selector
+  .dexar-lang-desktop {
+    display: none;
   }
   
   .dexar-search-wrapper {
@@ -813,4 +846,77 @@
     width: 100px;
     height: 32px;
   }
+
+  // Mobile Menu Backdrop — full-screen, blurred, blocks interaction
+  .dexar-menu-backdrop {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.35);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    z-index: 998;
+    animation: dexar-fade-in 0.25s ease;
+  }
+
+  // Mobile Menu Panel
+  .dexar-mobile-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    position: fixed;
+    top: 84px;
+    right: 0;
+    width: 485px;
+    max-width: 100vw;
+    padding: 28px 20px 32px;
+    background: rgba(245, 242, 249, 0.93);
+    border-radius: 0 0 13px 13px;
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
+    z-index: 999;
+    box-sizing: border-box;
+    
+    // Hide by default, animate in
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
+
+    &.dexar-mobile-menu-open {
+      max-height: 576px;
+      padding: 28px 20px 32px;
+      opacity: 1;
+    }
+  }
+
+  .dexar-mobile-item {
+    width: 395px;
+    max-width: 100%;
+  }
+
+  .dexar-mobile-lang {
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dexar-mobile-menu {
+    width: 100vw;
+    border-radius: 0 0 13px 13px;
+  }
+
+  .dexar-mobile-item {
+    width: 100%;
+  }
+}
+
+@keyframes dexar-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }