2

Profice WebSite/style/tech-onepager.css

@@ -3,52 +3,15 @@
  * System being built aesthetic - not marketing campaign
  */
 
-/* ===== TECH BACKGROUND ===== */
+/* ===== TECH BACKGROUND (disabled - replaced by hexCanvas) ===== */
 .tech-background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
-}
-
-.grid-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: 
-        linear-gradient(rgba(79, 71, 71, 0.12) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 50px 50px;
-    pointer-events: none;
-}
-
-.dot-pattern {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(circle, rgba(79, 71, 71, 0.12) 1px, transparent 1px);
-    background-size: 20px 20px;
-    pointer-events: none;
+    display: none;
 }
 
+.grid-overlay,
+.dot-pattern,
 .gradient-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, 
-        rgba(235, 235, 222, 0.8) 0%, 
-        rgba(235, 235, 222, 0.6) 50%, 
-        rgba(235, 235, 222, 0.4) 100%);
-    pointer-events: none;
+    display: none;
 }
 
 /* ===== HERO SECTION ===== */
@@ -71,6 +34,7 @@
 
 .hero-left {
     max-width: 600px;
+    width: 100%;
 }
 
 .hero-headline {
@@ -85,18 +49,32 @@
 .hero-subline {
     font-size: 1.25rem;
     line-height: 1.6;
-    color: var(--primary-mid);
+    color: var(--primary-dark);
     margin-bottom: 20px;
     font-weight: 400;
+    background: rgba(102, 187, 106, 0.35);
+    padding: 16px 20px;
+    padding-left: 20px;
+    border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }
 
 .hero-proof {
     font-size: 1.1rem;
-    color: var(--accent-teal);
+    color: var(--primary-dark);
     font-weight: 500;
     margin-bottom: 40px;
-    padding-left: 20px;
+    padding: 12px 20px;
     border-left: 3px solid var(--accent-teal);
+    background: rgba(102, 187, 106, 0.35);
+    border-radius: 0 8px 8px 0;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    display: inline-block;
 }
 
 .hero-buttons {
@@ -379,8 +357,7 @@
 /* ===== SYSTEME SECTION ===== */
 .systeme-section {
     padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }
 
 .container {
@@ -1247,8 +1224,7 @@
 /* ===== QUALIFICATION SECTION ===== */
 .qualification-section {
     padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
+    background: transparent;
 }
 
 .qualification-grid {
@@ -1406,26 +1382,11 @@
 /* ===== PROCESS SECTION ===== */
 .process-section {
     padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
     position: relative;
     overflow: hidden;
 }
 
-.process-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, 
-        transparent 0%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 100%);
-    pointer-events: none;
-}
-
 .process-line {
     display: flex;
     align-items: center;
@@ -1624,24 +1585,11 @@
 /* ===== ERGEBNISSE SECTION ===== */
 .results-section {
     padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(15px);
+    background: transparent;
     position: relative;
     overflow: hidden;
 }
 
-.results-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle at 30% 50%, rgba(38, 166, 154, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 70% 50%, rgba(102, 187, 106, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-}
-
 .results-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -1760,26 +1708,11 @@
 /* ===== INTERACTION SECTION ===== */
 .interaction-section {
     padding: 100px 40px;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(10px);
+    background: transparent;
     position: relative;
     overflow: hidden;
 }
 
-.interaction-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, 
-        transparent 30%, 
-        rgba(38, 166, 154, 0.05) 50%, 
-        transparent 70%);
-    pointer-events: none;
-}
-
 .interaction-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));