765

Profice WebSite/style/design.css

@@ -18,6 +18,8 @@ body {
     background-color: var(--primary-light);
     color: var(--primary-dark);
     min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
 }
 
 /* Hexagonal Canvas Background */
@@ -56,12 +58,8 @@ body {
                 background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     
     /* Performance optimizations */
-    will-change: height, padding, transform;
     transform: translateZ(0);
-    backface-visibility: hidden;
     -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    contain: layout style paint;
     
     /* Prevent sub-pixel rendering issues */
     box-shadow: 0 0 0 rgba(0,0,0,0);
@@ -128,8 +126,7 @@ body {
 .logo {
     height: 50px;
     width: auto;
-    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    will-change: height;
+    transition: height 0.3s ease-out;
 }
 
 .top-banner.scrolled .logo {
@@ -149,7 +146,6 @@ body {
     justify-content: center;
     align-items: center;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    will-change: width, height;
 }
 
 .top-banner.scrolled .menu-toggle,
@@ -166,7 +162,6 @@ body {
     border-radius: 25px;
     transition: font-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                 padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    will-change: font-size, padding;
 }
 
 .top-banner.scrolled .opening-hours {
@@ -354,7 +349,6 @@ body {
     padding: 10px 20px;
     border-radius: 25px;
     transition: font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    will-change: font-size, padding;
 }
 
 .menu-toggle {
@@ -371,7 +365,6 @@ body {
     justify-content: center;
     gap: 5px;
     transition: background 0.3s ease, color 0.3s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    will-change: width, height;
 }
 
 #cursorToggle {
@@ -387,7 +380,6 @@ body {
     justify-content: center;
     padding: 0;
     transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
-    will-change: width, height;
 }
 
 .cursor-icon {

Profice WebSite/style/tech-onepager.css

@@ -2105,6 +2105,96 @@
 }
 
 /* ===== RESPONSIVE DESIGN ===== */
+
+/* Ultra-wide monitors (16:9, 16:10 - 1920px+) */
+@media (min-width: 1920px) {
+    .hero-container {
+        max-width: 1600px;
+        gap: 100px;
+    }
+    
+    .hero-headline {
+        font-size: 4rem;
+    }
+    
+    .hero-subline,
+    .hero-proof {
+        font-size: 1.4rem;
+    }
+    
+    .hero-right {
+        height: 600px;
+    }
+    
+    .system-graphic {
+        transform: scale(1.1);
+    }
+    
+    .node {
+        min-width: 140px;
+        padding: 20px;
+    }
+    
+    .central-node {
+        min-width: 160px;
+        max-width: 180px;
+        padding: 12px 24px;
+    }
+    
+    .section-headline {
+        font-size: 3rem;
+    }
+    
+    .systeme-grid {
+        gap: 50px;
+        max-width: 1800px;
+    }
+    
+    .system-card {
+        padding: 50px;
+    }
+    
+    .results-grid {
+        max-width: 1400px;
+    }
+    
+    .data-card {
+        padding: 45px;
+    }
+    
+    .card-metric {
+        font-size: 4rem;
+    }
+}
+
+/* Extra large screens (2560px+) */
+@media (min-width: 2560px) {
+    .hero-container {
+        max-width: 2000px;
+        gap: 120px;
+    }
+    
+    .hero-headline {
+        font-size: 4.5rem;
+    }
+    
+    .hero-right {
+        height: 700px;
+    }
+    
+    .system-graphic {
+        transform: scale(1.2);
+    }
+    
+    .container {
+        max-width: 1800px;
+    }
+    
+    .systeme-grid {
+        max-width: 2200px;
+    }
+}
+
 @media (max-width: 1024px) {
     .hero-container {
         grid-template-columns: 1fr;