feat: add global responsive guards and enhance layout for mobile and touch interactions

src/app/globals.css

@@ -696,3 +696,46 @@ html {
 }
 
 html, body { overflow-x: hidden; max-width: 100vw; }
+
+/* === GLOBAL RESPONSIVE GUARDS === */
+
+/* Anchor scroll never lands behind fixed navbar */
+[id] { scroll-margin-top: clamp(80px, 12vh, 120px); }
+
+/* No element overflows viewport horizontally */
+img, video, svg, canvas { max-width: 100%; height: auto; }
+
+/* Grid/flex children should be allowed to shrink below content width to prevent overflow */
+.container-wide > * { min-width: 0; }
+
+/* Tap targets: minimum 44x44 for interactive elements on touch screens */
+@media (hover: none) and (pointer: coarse) {
+  a, button, [role='button'] { min-height: 44px; }
+  .cta-link { min-height: 32px; }
+}
+
+/* Mobile section padding tighter */
+@media (max-width: 600px) {
+  .container-wide {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .eyebrow {
+    font-size: 0.68rem;
+    letter-spacing: 0.28em;
+  }
+  .cta-lg { padding: 0.85rem 1.25rem; font-size: 0.72rem; letter-spacing: 0.2em; }
+  .cta-md { padding: 0.8rem 1.15rem; font-size: 0.68rem; }
+}
+
+/* WhatsApp floating button: lift above safe-area on iOS, keep clear of footer content */
+.wa-fab {
+  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
+}
+@media (max-width: 600px) {
+  .wa-fab {
+    width: 52px !important;
+    height: 52px !important;
+    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
+  }
+}

src/app/layout.tsx

@@ -67,7 +67,7 @@ export default function RootLayout({
           <I18nProvider>
             {children}
             {/* WhatsApp Floating Button */}
-            <a href="https://wa.me/971559482728" target="_blank" rel="noopener noreferrer" aria-label="Contact us on WhatsApp" className="fixed bottom-6 z-50 flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white shadow-lg shadow-[#25D366]/30 transition-all duration-300 ease-out hover:scale-110 hover:shadow-[#25D366]/50 hover:shadow-xl active:scale-95 group" style={{ insetInlineEnd: '1.5rem' }}>
+            <a href="https://wa.me/971559482728" target="_blank" rel="noopener noreferrer" aria-label="Contact us on WhatsApp" className="wa-fab fixed z-50 flex items-center justify-center h-14 w-14 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] text-white shadow-lg shadow-[#25D366]/30 transition-all duration-300 ease-out hover:scale-110 hover:shadow-[#25D366]/50 hover:shadow-xl active:scale-95 group" style={{ insetInlineEnd: 'max(1rem, env(safe-area-inset-right, 0px))' }}>
               <span className="absolute inset-0 -z-10 rounded-full bg-gradient-to-r from-[#25D366] to-[#128C7E] opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100"></span>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="tabler-icon tabler-icon-brand-whatsapp relative z-10 h-8 w-8">
                 <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9"></path>