src/app/globals.css

@@ -74,17 +74,15 @@ html,
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  max-width: 100%;
   min-height: 100vh;
   background-color: var(--color-bg);
   color: var(--color-text-primary);
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
-  overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   direction: ltr !important;
+  unicode-bidi: isolate;
   text-align: left;
 }
 
@@ -715,11 +713,7 @@ html {
   .light-sweep { animation: none !important; opacity: 0 !important; }
 }
 
-html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; position: relative; }
+html, body { overflow-x: hidden; max-width: 100vw; }
-
-/* Catch-all guard against horizontal overflow */
-main, footer, nav, section, header { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
-main { width: 100%; }
 
 /* === GLOBAL RESPONSIVE GUARDS === */
 

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="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={{ right: 'max(1rem, env(safe-area-inset-right, 0px))' }}>
+            <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>

src/components/robotics/ExclusiveAccessSection.tsx

@@ -93,9 +93,9 @@ export function ExclusiveAccessSection() {
 
         {/* Right premium showroom grid */}
         <div
-          className="exa-tiles"
           style={{
             display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
             gap: '0.875rem',
             minWidth: 0,
           }}
@@ -125,14 +125,6 @@ export function ExclusiveAccessSection() {
         .exa-grid {
           grid-template-columns: 1fr;
         }
-        .exa-tiles {
-          grid-template-columns: minmax(0, 1fr);
-        }
-        @media (min-width: 640px) {
-          .exa-tiles {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
-        }
         @media (min-width: 1024px) {
           .exa-grid {
             grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

src/components/robotics/FounderSection.tsx

@@ -48,9 +48,9 @@ export function FounderSection() {
         </div>
 
         <div
-          className="fs-pillars"
           style={{
             display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
             gap: '1rem',
           }}
         >
@@ -60,17 +60,6 @@ export function FounderSection() {
           <Pillar value="Future" label="Smart, autonomous, intelligent" />
         </div>
       </div>
-
-      <style jsx>{`
-        .fs-pillars {
-          grid-template-columns: minmax(0, 1fr);
-        }
-        @media (min-width: 640px) {
-          .fs-pillars {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
-        }
-      `}</style>
     </div>
   );
 }

src/components/robotics/IndustryUseCases.tsx

@@ -61,14 +61,14 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
       <motion.ul
         className="iu-stats"
         role="list"
-        style={{ listStyle: 'none', margin: 0, padding: 0 }}
+        style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '0.45rem', listStyle: 'none', margin: 0, padding: 0 }}
         initial={{ opacity: 0, y: 12 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, margin: '-10%' }}
         transition={{ duration: 0.6, ease }}
       >
         {STATS.map((s) => (
-          <li key={s.label} className="iu-stat">
+          <li key={s.label} className="iu-stat" style={{ flex: '1 1 0', minWidth: 0 }}>
             <span className="iu-stat-value">{s.value}</span>
             <span className="iu-stat-label">{s.label}</span>
           </li>
@@ -90,14 +90,15 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           gap: clamp(1.5rem, 3vw, 2.25rem);
         }
 
-        /* STATS — single column on mobile, single row on tablet+ */
+        /* STATS — always single row */
         .iu-stats {
           list-style: none;
           margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
           padding: 0;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
-          gap: 0.55rem;
+          flex-wrap: nowrap;
+          gap: 0.45rem;
         }
         .iu-stat {
           position: relative;
@@ -105,9 +106,9 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           flex-direction: column;
           justify-content: center;
           gap: 0.22rem;
-          flex: 1 1 0;
+          flex: 1;
           min-width: 0;
-          padding: 0.85rem 1rem;
+          padding: 0.6rem 0.55rem;
           border-radius: 14px;
           border: 1px solid rgba(120, 140, 255, 0.22);
           background:
@@ -166,8 +167,8 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           position: relative;
           z-index: 1;
         }
-        @media (min-width: 640px) {
+        @media (min-width: 520px) {
-          .iu-stats { flex-direction: row; flex-wrap: nowrap; gap: 0.6rem; }
+          .iu-stats { gap: 0.6rem; }
           .iu-stat { padding: 0.72rem 0.85rem; gap: 0.28rem; border-radius: 16px; }
         }
         @media (min-width: 820px) {