mobile optimisation

Profice WebSite/style/design.css

@@ -1134,49 +1134,127 @@ body {
     }
 }
 
+/* Hamburger Button */
+.hamburger-btn {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 40px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.hamburger-btn span {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: var(--primary-light);
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    transform-origin: left center;
+}
+
+.hamburger-btn.open span:nth-child(1) {
+    transform: rotate(45deg) translate(1px, -1px);
+}
+.hamburger-btn.open span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+}
+.hamburger-btn.open span:nth-child(3) {
+    transform: rotate(-45deg) translate(1px, 1px);
+}
+
+/* Mobile Nav Overlay */
+.mobile-nav-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(90, 82, 82, 0.97);
+    z-index: 1002;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.mobile-nav-overlay.open {
+    opacity: 1;
+}
+
+.mobile-nav-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+.mobile-nav-link {
+    color: var(--primary-light);
+    text-decoration: none;
+    font-size: 1.6rem;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.mobile-nav-link:hover {
+    color: var(--accent-teal);
+}
+
 /* Navigation responsive */
 @media (max-width: 768px) {
     .main-nav {
         display: none;
     }
-    
+
+    .hamburger-btn {
+        display: flex;
+    }
+
+    #cursorToggle {
+        display: none;
+    }
+
     .top-banner {
         justify-content: space-between;
         height: 70px;
         padding: 5px 15px;
     }
-    
+
     .top-banner.scrolled {
         height: 60px;
         padding: 5px 12px;
     }
-    
+
     .banner-left {
         flex: 1;
         gap: 10px;
     }
-    
+
     .logo {
         height: 40px;
     }
-    
+
     .top-banner.scrolled .logo {
         height: 32px;
     }
-    
-    .top-banner.scrolled #cursorToggle {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .cursor-icon {
-        width: 32px;
-        height: 32px;
-    }
-    
+
     .opening-hours {
         display: none;
     }
+
+    .container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -1184,28 +1262,18 @@ body {
         height: 60px;
         padding: 5px 10px;
     }
-    
+
     .top-banner.scrolled {
         height: 55px;
     }
-    
+
     .logo {
         height: 35px;
     }
-    
+
     .top-banner.scrolled .logo {
         height: 28px;
     }
-    
-    #cursorToggle {
-        width: 34px;
-        height: 34px;
-    }
-    
-    .cursor-icon {
-        width: 26px;
-        height: 26px;
-    }
 }
 
 /* Footer Banner Styles */
@@ -2068,10 +2136,17 @@ body {
 }
 
 @media (max-width: 768px) {
+    .problems-section,
+    .fit-section,
+    .pricing-section {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
     .problems-grid {
         grid-template-columns: 1fr;
     }
-    
+
     .problems-headline {
         font-size: 1.8rem;
     }

Profice WebSite/style/tech-onepager.css

@@ -2495,30 +2495,36 @@
         padding: 90px 15px 30px;
         min-height: auto;
     }
-    
+
     .hero-headline {
         font-size: 1.6rem;
         line-height: 1.3;
         margin-bottom: 16px;
     }
-    
+
     .hero-subline {
+        display: block;
         font-size: 0.95rem;
         padding: 12px 14px;
         margin-bottom: 12px;
+        width: 100%;
+        box-sizing: border-box;
     }
-    
+
     .hero-proof {
+        display: block;
         font-size: 0.9rem;
         padding: 10px 14px;
         margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
     }
-    
+
     .hero-buttons {
         justify-content: center;
         gap: 12px;
     }
-    
+
     .cta-btn {
         padding: 12px 20px;
         font-size: 0.95rem;