Add unique logo and illustrations

- New server rack + signal waves logo (header + footer, both pages)
- Isometric server room illustration in hero background with LED animations
- Network topology decoration in "Miksi me" section
- Blueprint/rack illustration in "Tekniset tiedot" section
- CSS animations for LED blinks and data flow particles
- Responsive: illustrations hidden on mobile, reduced on tablet

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style.css

@@ -1249,6 +1249,108 @@ a:hover {
     color: rgba(255, 255, 255, 0.6);
 }
 
+/* === Hero Illustration === */
+.hero-illustration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.hero-illustration svg {
+    position: absolute;
+    right: -20px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 650px;
+    height: 550px;
+    opacity: 1;
+}
+
+/* LED blink animations */
+@keyframes ledBlink {
+    0%, 100% { opacity: 0.8; }
+    50% { opacity: 0.2; }
+}
+
+@keyframes ledBlinkSlow {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 0.15; }
+}
+
+@keyframes dataFlow {
+    0% { transform: translateX(0); opacity: 0.6; }
+    50% { opacity: 0.9; }
+    100% { transform: translateX(80px); opacity: 0; }
+}
+
+@keyframes dataFlowReverse {
+    0% { transform: translateX(0); opacity: 0.4; }
+    50% { opacity: 0.7; }
+    100% { transform: translateX(-80px); opacity: 0; }
+}
+
+.led-blink {
+    animation: ledBlink 2s ease-in-out infinite;
+}
+
+.led-blink-slow {
+    animation: ledBlinkSlow 3.5s ease-in-out infinite;
+}
+
+.data-flow {
+    animation: dataFlow 4s ease-in-out infinite;
+}
+
+.data-flow-reverse {
+    animation: dataFlowReverse 5s ease-in-out infinite;
+}
+
+/* === Section Decorations === */
+.section-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+.section-decoration svg {
+    width: 100%;
+    height: 100%;
+}
+
+.section-dark {
+    position: relative;
+    overflow: hidden;
+}
+
+/* === Blueprint Decoration === */
+.section-with-illustration {
+    position: relative;
+    overflow: hidden;
+}
+
+.blueprint-decoration {
+    position: absolute;
+    top: 0;
+    right: -40px;
+    width: 300px;
+    height: 100%;
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.blueprint-decoration svg {
+    width: 100%;
+    height: 100%;
+}
+
 /* === Animations === */
 .fade-in {
     opacity: 0;
@@ -1263,6 +1365,16 @@ a:hover {
 
 /* === Responsive === */
 @media (max-width: 1024px) {
+    .hero-illustration svg {
+        width: 400px;
+        right: -100px;
+        opacity: 0.5;
+    }
+
+    .blueprint-decoration {
+        display: none;
+    }
+
     .hero-grid {
         grid-template-columns: 1fr;
         gap: 40px;
@@ -1341,6 +1453,10 @@ a:hover {
         transform: rotate(-45deg) translate(5px, -5px);
     }
 
+    .hero-illustration {
+        display: none;
+    }
+
     .hero {
         padding: 120px 0 60px;
     }