8

Profice WebSite/style/tech-onepager.css

@@ -2224,15 +2224,36 @@
 
 @media (max-width: 768px) {
     .hero-section {
-        padding: 100px 20px 40px;
+        padding: 90px 15px 30px;
+        min-height: auto;
     }
     
     .hero-headline {
-        font-size: 2rem;
+        font-size: 1.6rem;
+        line-height: 1.3;
+        margin-bottom: 16px;
+    }
+    
+    .hero-subline {
+        font-size: 0.95rem;
+        padding: 12px 14px;
+        margin-bottom: 12px;
+    }
+    
+    .hero-proof {
+        font-size: 0.9rem;
+        padding: 10px 14px;
+        margin-bottom: 20px;
     }
     
     .hero-buttons {
         justify-content: center;
+        gap: 12px;
+    }
+    
+    .cta-btn {
+        padding: 12px 20px;
+        font-size: 0.95rem;
     }
     
     .systeme-section,
@@ -2240,11 +2261,11 @@
     .process-section,
     .results-section,
     .interaction-section {
-        padding: 60px 20px;
+        padding: 40px 15px;
     }
     
     .section-headline {
-        font-size: 2rem;
+        font-size: 1.6rem;
     }
     
     .systeme-grid {
@@ -2252,93 +2273,134 @@
     }
     
     .results-grid {
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-template-columns: 1fr;
     }
     
     .process-line {
         flex-direction: column;
-        gap: 20px;
+        gap: 15px;
     }
     
     .process-connector {
         width: 3px;
-        height: 60px;
+        height: 40px;
     }
     
     .hero-container {
         grid-template-columns: 1fr;
-        gap: 40px;
+        gap: 25px;
         text-align: center;
     }
     
+    /* Hero right (system graphic) comes AFTER hero left (text) on mobile */
     .hero-right {
-        height: 400px;
-        margin-top: 40px;
+        height: 320px;
+        margin-top: 10px;
+        order: 1;
+    }
+    
+    .hero-left {
+        order: 0;
     }
     
     .system-graphic {
-        transform: scale(0.9);
-        width: 110%;
-        margin-left: -5%;
+        transform: scale(0.75);
+        width: 130%;
+        margin-left: -15%;
     }
     
     .central-node {
-        min-width: 120px;
-        max-width: 140px;
-        padding: 8px 16px;
-        border-radius: 20px;
+        min-width: 100px;
+        max-width: 120px;
+        padding: 6px 12px;
+        border-radius: 16px;
     }
     
     .central-node .node-icon {
-        font-size: 1rem;
+        font-size: 0.9rem;
     }
     
     .central-node .node-label {
-        font-size: 0.75rem;
+        font-size: 0.65rem;
     }
     
     .node {
-        min-width: 90px;
-        padding: 10px;
-        font-size: 0.8rem;
+        min-width: 70px;
+        padding: 8px;
+        font-size: 0.7rem;
     }
     
     .node-icon {
-        font-size: 1.2rem;
+        font-size: 1rem;
     }
     
     .node-label {
-        font-size: 0.75rem;
+        font-size: 0.65rem;
     }
     
     /* Compact circular layout for mobile */
     .phone-node {
-        top: 10%;
+        top: 5%;
         left: 50%;
-        transform: translateX(-50%) scale(0.9);
+        transform: translateX(-50%) scale(0.85);
     }
     
     .chat-node {
-        top: 30%;
-        right: 10%;
-        transform: scale(0.9);
+        top: 25%;
+        right: 5%;
+        left: auto;
+        transform: scale(0.85);
     }
     
     .crm-node {
-        bottom: 30%;
-        right: 10%;
-        transform: scale(0.9);
+        bottom: 25%;
+        right: 5%;
+        left: auto;
+        transform: scale(0.85);
     }
     
     .ticket-node {
-        bottom: 10%;
+        bottom: 5%;
         left: 50%;
-        transform: translateX(-50%) scale(0.9);
+        transform: translateX(-50%) scale(0.85);
     }
     
     .team-node {
-        top: 30%;
-        left: 10%;
-        transform: scale(0.9);
+        top: 25%;
+        left: 5%;
+        right: auto;
+        transform: scale(0.85);
+    }
+}
+
+/* Extra small screens */
+@media (max-width: 480px) {
+    .hero-section {
+        padding: 80px 12px 25px;
+    }
+    
+    .hero-headline {
+        font-size: 1.4rem;
+    }
+    
+    .hero-subline,
+    .hero-proof {
+        font-size: 0.85rem;
+        padding: 10px 12px;
+    }
+    
+    .hero-right {
+        height: 280px;
+    }
+    
+    .system-graphic {
+        transform: scale(0.65);
+        width: 150%;
+        margin-left: -25%;
+    }
+    
+    .cta-btn {
+        padding: 10px 16px;
+        font-size: 0.9rem;
     }
 }