v6

Profice WebSite/scripts/tech-onepager.js

@@ -562,8 +562,10 @@ document.addEventListener('DOMContentLoaded', function() {
     // ===== SMOOTH SCROLL FOR INTERNAL LINKS =====
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
+            const href = this.getAttribute('href');
+            if (!href || href === '#') return;
             e.preventDefault();
-            const target = document.querySelector(this.getAttribute('href'));
+            const target = document.querySelector(href);
             if (target) {
                 target.scrollIntoView({
                     behavior: 'smooth',

Profice WebSite/style/design.css

@@ -55,6 +55,13 @@
     --widget-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
 }
 
+/* Cookiebot Banner - Force to bottom of screen */
+#CybotCookiebotDialog {
+    top: auto !important;
+    bottom: 0 !important;
+    position: fixed !important;
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -655,7 +662,7 @@ body {
     }
 
     .logo {
-        height: 100px;
+        height: 40px;
         width: auto;
     }
 }
@@ -1744,11 +1751,65 @@ body {
     .demo-widgets-grid {
         grid-template-columns: 1fr;
         gap: 30px;
-        padding: 0 20px;
+        padding: 0 15px;
     }
     
     .demo-widget {
-        padding: 30px;
+        padding: 25px;
+        min-height: auto;
+    }
+    
+    .demo-section-title {
+        font-size: 1.8rem;
+    }
+    
+    .demo-section-subtitle {
+        font-size: 0.95rem;
+        margin-bottom: 30px;
+        padding: 0 10px;
+    }
+    
+    .ki-demo-section {
+        padding: 20px 0 40px 0;
+        margin-top: -20px;
+    }
+    
+    .demo-icon-circle {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .demo-icon-circle img {
+        width: 36px !important;
+        height: 36px !important;
+    }
+    
+    .sound-visualization {
+        margin-top: 40px;
+        height: 60px;
+    }
+}
+
+@media (max-width: 480px) {
+    .demo-widgets-grid {
+        padding: 0 10px;
+        gap: 20px;
+    }
+    
+    .demo-widget {
+        padding: 20px;
+    }
+    
+    .demo-section-title {
+        font-size: 1.5rem;
+    }
+    
+    .pricing-box {
+        padding: 30px 20px;
+    }
+    
+    .pricing-value {
+        font-size: 2.2rem;
     }
 }
 

Profice WebSite/style/tech-onepager.css

@@ -160,8 +160,8 @@
     border-radius: 8px;
     padding: 4px;
     min-width: 40px;
-    width: 40px;
+    width: auto;
-    height: 120px;
+    height: auto;
     text-align: center;
     backdrop-filter: blur(15px);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -2376,16 +2376,76 @@
     }
 }
 
-@media (max-width: 1024px) {
+/* Non-16:9 wide screens and landscape tablets (1024-1366px) */
+@media (max-width: 1366px) and (min-width: 1025px) {
     .hero-container {
-        grid-template-columns: 1fr;
+        max-width: 1100px;
-        gap: 60px;
+        gap: 40px;
-        text-align: center;
     }
     
     .hero-right {
-        height: 400px;
+        height: 420px;
+    }
+    
+    .hero-headline {
+        font-size: clamp(2rem, 3.5vw, 3rem);
+    }
+    
+    .hero-subline,
+    .hero-proof {
+        font-size: 1.1rem;
+    }
+    
+    .node {
+        min-width: 80px;
+        padding: 8px;
+    }
+    
+    .central-node {
+        min-width: 130px;
+        max-width: 150px;
+    }
+}
+
+/* 4:3 and portrait-ish aspect ratio handling */
+@media (max-aspect-ratio: 4/3) and (min-width: 769px) {
+    .hero-section {
+        min-height: auto;
+        padding-top: 100px;
+        padding-bottom: 40px;
+    }
+    
+    .hero-container {
+        gap: 30px;
+    }
+    
+    .hero-right {
+        height: 380px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .hero-container {
+        grid-template-columns: 1fr;
+        gap: 40px;
+        text-align: center;
+    }
+    
+    .hero-left {
+        max-width: 100%;
+    }
+    
+    .hero-right {
+        height: 380px;
         order: -1;
+        max-width: 600px;
+        margin: 0 auto;
+        width: 100%;
+    }
+    
+    .system-graphic {
+        max-width: 100%;
+        overflow: visible;
     }
     
     .system-details {
@@ -2475,9 +2535,11 @@
     
     /* Hero right (system graphic) comes AFTER hero left (text) on mobile */
     .hero-right {
-        height: 320px;
+        height: 350px;
         margin-top: 10px;
         order: 1;
+        max-width: 100%;
+        overflow: hidden;
     }
     
     .hero-left {
@@ -2485,14 +2547,15 @@
     }
     
     .system-graphic {
-        transform: scale(0.85);
+        transform: scale(0.75);
-        width: 120%;
+        transform-origin: center center;
-        margin-left: -10%;
+        width: 100%;
+        margin-left: 0;
     }
     
     .central-node {
-        min-width: 120px;
+        min-width: 110px;
-        max-width: 140px;
+        max-width: 130px;
         padding: 8px 14px;
         border-radius: 18px;
     }
@@ -2506,49 +2569,56 @@
     }
     
     .node {
-        min-width: 85px;
+        min-width: 70px;
-        padding: 10px;
+        padding: 8px;
         font-size: 0.8rem;
     }
     
     .node-icon {
-        font-size: 1.3rem;
+        font-size: 1.2rem;
+    }
+    
+    .node .node-icon img {
+        width: 36px !important;
+        height: 36px !important;
     }
     
     .node-label {
-        font-size: 0.75rem;
+        font-size: 0.7rem;
     }
     
-    /* Compact circular layout for mobile */
+    /* Compact circular layout for mobile - adjusted spacing */
     .phone-node {
-        top: 5%;
+        top: 2%;
         left: 50%;
         transform: translateX(-50%);
     }
     
     .chat-node {
-        top: 25%;
+        top: 20%;
-        right: 5%;
+        right: 2%;
         left: auto;
         transform: none;
     }
     
     .crm-node {
-        bottom: 25%;
+        bottom: 20%;
-        right: 5%;
+        right: 2%;
+        top: auto;
         left: auto;
         transform: none;
     }
     
     .ticket-node {
-        bottom: 5%;
+        bottom: 2%;
         left: 50%;
+        top: auto;
         transform: translateX(-50%);
     }
     
     .team-node {
-        top: 25%;
+        top: 20%;
-        left: 5%;
+        left: 2%;
         right: auto;
         transform: none;
     }
@@ -2557,11 +2627,11 @@
 /* Extra small screens */
 @media (max-width: 480px) {
     .hero-section {
-        padding: 80px 12px 25px;
+        padding: 80px 10px 20px;
     }
     
     .hero-headline {
-        font-size: 1.4rem;
+        font-size: 1.3rem;
     }
     
     .hero-subline,
@@ -2572,35 +2642,50 @@
     
     .hero-right {
         height: 300px;
+        overflow: hidden;
     }
     
     .system-graphic {
-        transform: scale(0.8);
+        transform: scale(0.65);
-        width: 130%;
+        transform-origin: center center;
-        margin-left: -15%;
+        width: 100%;
+        margin-left: 0;
     }
     
     .central-node {
-        min-width: 110px;
+        min-width: 100px;
-        max-width: 130px;
+        max-width: 120px;
-        padding: 7px 12px;
+        padding: 6px 10px;
     }
     
     .node {
-        min-width: 75px;
+        min-width: 65px;
-        padding: 8px;
+        padding: 6px;
+    }
+    
+    .node .node-icon img {
+        width: 30px !important;
+        height: 30px !important;
     }
     
     .node-icon {
-        font-size: 1.2rem;
+        font-size: 1rem;
     }
     
     .node-label {
-        font-size: 0.7rem;
+        font-size: 0.65rem;
     }
     
     .cta-btn {
         padding: 10px 16px;
         font-size: 0.9rem;
     }
+    
+    .data-card {
+        padding: 20px;
+    }
+    
+    .card-metric {
+        font-size: 2.2rem;
+    }
 }