diff --git a/index.html b/index.html
index fac32fa..a8ef867 100644
--- a/index.html
+++ b/index.html
@@ -12,14 +12,24 @@
     <header class="header" id="header">
         <div class="container header-inner">
             <a href="/" class="logo">
-                <svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
-                    <rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
-                    <rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
+                <svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
+                    <!-- Signal waves -->
+                    <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                    <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                    <!-- Rack body -->
+                    <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                    <!-- Server units -->
+                    <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <!-- LED indicators -->
+                    <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                    <!-- Activity lines -->
+                    <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
                 </svg>
                 <span>Konesali<strong>Turku</strong></span>
             </a>
@@ -39,6 +49,81 @@
 
     <!-- Hero -->
     <section class="hero">
+        <!-- Isometric server room illustration -->
+        <div class="hero-illustration" aria-hidden="true">
+            <svg viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- Floor grid -->
+                <g opacity="0.15" stroke="#fff" stroke-width="0.5">
+                    <line x1="80" y1="380" x2="520" y2="380"/>
+                    <line x1="100" y1="400" x2="540" y2="400"/>
+                    <line x1="120" y1="420" x2="560" y2="420"/>
+                    <line x1="140" y1="440" x2="540" y2="440"/>
+                    <line x1="200" y1="340" x2="200" y2="460"/>
+                    <line x1="300" y1="340" x2="300" y2="460"/>
+                    <line x1="400" y1="340" x2="400" y2="460"/>
+                    <line x1="500" y1="340" x2="500" y2="460"/>
+                </g>
+                <!-- Server Rack 1 (left) -->
+                <g transform="translate(100, 140)">
+                    <!-- Rack body - isometric -->
+                    <path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
+                    <path d="M0 60 L0 220 L80 260 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
+                    <path d="M80 100 L130 70 L130 230 L80 260 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                    <!-- Server units - front face -->
+                    <rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <!-- LED indicators -->
+                    <circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
+                    <circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.7"/>
+                    <circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
+                    <circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
+                </g>
+                <!-- Server Rack 2 (center, taller) -->
+                <g transform="translate(250, 100)">
+                    <path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
+                    <path d="M0 60 L0 250 L80 290 L80 100 Z" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
+                    <path d="M80 100 L130 70 L130 260 L80 290 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                    <!-- Server units -->
+                    <rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.09)" stroke="rgba(255,255,255,0.2)" transform="skewY(26.5)"/>
+                    <rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="180" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <!-- LEDs -->
+                    <circle cx="15" cy="128" r="3" fill="#4ade80" opacity="0.8"/>
+                    <circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
+                    <circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
+                    <circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.7" class="led-blink-slow"/>
+                    <circle cx="15" cy="228" r="3" fill="#4ade80" opacity="0.7"/>
+                </g>
+                <!-- Server Rack 3 (right) -->
+                <g transform="translate(400, 140)">
+                    <path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
+                    <path d="M0 60 L0 210 L80 250 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
+                    <path d="M80 100 L130 70 L130 220 L80 250 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
+                    <rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
+                    <circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
+                    <circle cx="15" cy="153" r="3" fill="#4ade80" opacity="0.7"/>
+                    <circle cx="15" cy="178" r="3" fill="#e85d4a" opacity="0.7" class="led-blink"/>
+                </g>
+                <!-- Network cables connecting racks -->
+                <g stroke="#e85d4a" stroke-width="1.5" opacity="0.35">
+                    <path d="M180 280 Q240 255 330 235" fill="none"/>
+                    <path d="M330 235 Q420 255 480 275" fill="none"/>
+                    <path d="M180 310 Q340 270 480 310" fill="none" stroke-dasharray="4 4" opacity="0.2"/>
+                </g>
+                <!-- Data flow particles -->
+                <circle cx="230" cy="262" r="3" fill="#e85d4a" opacity="0.8" class="data-flow"/>
+                <circle cx="400" cy="248" r="3" fill="#e85d4a" opacity="0.6" class="data-flow-reverse"/>
+                <circle cx="330" cy="285" r="2.5" fill="#e85d4a" opacity="0.5" class="data-flow"/>
+                <!-- Subtle glow behind center rack -->
+                <ellipse cx="315" cy="250" rx="100" ry="60" fill="#e85d4a" opacity="0.03"/>
+            </svg>
+        </div>
         <div class="container">
             <div class="hero-grid">
                 <div class="hero-content">
@@ -365,6 +450,33 @@
 
     <!-- Miksi me -->
     <section class="section section-dark" id="miksi">
+        <!-- Network topology decoration -->
+        <div class="section-decoration" aria-hidden="true">
+            <svg viewBox="0 0 800 400" fill="none">
+                <!-- Network nodes -->
+                <circle cx="100" cy="80" r="4" fill="#e85d4a" opacity="0.3"/>
+                <circle cx="250" cy="50" r="3" fill="#e85d4a" opacity="0.2"/>
+                <circle cx="400" cy="90" r="5" fill="#e85d4a" opacity="0.15"/>
+                <circle cx="550" cy="40" r="3" fill="#e85d4a" opacity="0.25"/>
+                <circle cx="700" cy="70" r="4" fill="#e85d4a" opacity="0.2"/>
+                <circle cx="150" cy="320" r="3" fill="#e85d4a" opacity="0.2"/>
+                <circle cx="350" cy="350" r="4" fill="#e85d4a" opacity="0.15"/>
+                <circle cx="600" cy="330" r="3" fill="#e85d4a" opacity="0.25"/>
+                <circle cx="750" cy="360" r="3" fill="#e85d4a" opacity="0.15"/>
+                <!-- Connection lines -->
+                <line x1="100" y1="80" x2="250" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
+                <line x1="250" y1="50" x2="400" y2="90" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <line x1="400" y1="90" x2="550" y2="40" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
+                <line x1="550" y1="40" x2="700" y2="70" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <line x1="150" y1="320" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <line x1="350" y1="350" x2="600" y2="330" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
+                <line x1="600" y1="330" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <!-- Cross connections -->
+                <line x1="100" y1="80" x2="150" y2="320" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
+                <line x1="400" y1="90" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
+                <line x1="700" y1="70" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
+            </svg>
+        </div>
         <div class="container">
             <h2 class="section-title">Miksi Konesali Turku?</h2>
             <p class="section-subtitle">Pienen konesalin edut isoihin ketjuihin verrattuna</p>
@@ -429,7 +541,66 @@
     </section>
 
     <!-- Tekniset tiedot lyhyesti -->
-    <section class="section" id="tekniikka">
+    <section class="section section-with-illustration" id="tekniikka">
+        <!-- Server room blueprint illustration -->
+        <div class="blueprint-decoration" aria-hidden="true">
+            <svg viewBox="0 0 300 500" fill="none">
+                <!-- Blueprint grid -->
+                <g stroke="#e85d4a" stroke-width="0.3" opacity="0.06">
+                    <line x1="0" y1="50" x2="300" y2="50"/>
+                    <line x1="0" y1="100" x2="300" y2="100"/>
+                    <line x1="0" y1="150" x2="300" y2="150"/>
+                    <line x1="0" y1="200" x2="300" y2="200"/>
+                    <line x1="0" y1="250" x2="300" y2="250"/>
+                    <line x1="0" y1="300" x2="300" y2="300"/>
+                    <line x1="0" y1="350" x2="300" y2="350"/>
+                    <line x1="0" y1="400" x2="300" y2="400"/>
+                    <line x1="0" y1="450" x2="300" y2="450"/>
+                    <line x1="50" y1="0" x2="50" y2="500"/>
+                    <line x1="100" y1="0" x2="100" y2="500"/>
+                    <line x1="150" y1="0" x2="150" y2="500"/>
+                    <line x1="200" y1="0" x2="200" y2="500"/>
+                    <line x1="250" y1="0" x2="250" y2="500"/>
+                </g>
+                <!-- Rack outline 1 -->
+                <rect x="40" y="60" width="80" height="180" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.12"/>
+                <rect x="50" y="75" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="95" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <rect x="50" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
+                <!-- LED dots -->
+                <circle cx="57" cy="81" r="2" fill="#e85d4a" opacity="0.15"/>
+                <circle cx="57" cy="101" r="2" fill="#e85d4a" opacity="0.12"/>
+                <circle cx="57" cy="121" r="2" fill="#e85d4a" opacity="0.18"/>
+                <circle cx="57" cy="141" r="2" fill="#e85d4a" opacity="0.12"/>
+                <circle cx="57" cy="161" r="2" fill="#e85d4a" opacity="0.15"/>
+                <circle cx="57" cy="181" r="2" fill="#e85d4a" opacity="0.12"/>
+                <circle cx="57" cy="201" r="2" fill="#e85d4a" opacity="0.18"/>
+                <circle cx="57" cy="221" r="2" fill="#e85d4a" opacity="0.12"/>
+                <!-- Rack outline 2 -->
+                <rect x="160" y="100" width="80" height="160" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.1"/>
+                <rect x="170" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <rect x="170" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <rect x="170" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <rect x="170" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <rect x="170" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <rect x="170" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
+                <!-- Cables between racks -->
+                <path d="M120 140 Q140 140 140 160 Q140 180 160 180" stroke="#e85d4a" stroke-width="0.6" opacity="0.1"/>
+                <path d="M120 160 Q145 160 145 175 Q145 195 160 195" stroke="#e85d4a" stroke-width="0.6" opacity="0.08"/>
+                <!-- Cooling pipes -->
+                <line x1="30" y1="280" x2="250" y2="280" stroke="#e85d4a" stroke-width="1.5" opacity="0.06" stroke-linecap="round"/>
+                <line x1="30" y1="290" x2="250" y2="290" stroke="#e85d4a" stroke-width="1" opacity="0.04" stroke-linecap="round"/>
+                <!-- Dimension markers -->
+                <line x1="40" y1="50" x2="120" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <line x1="40" y1="47" x2="40" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+                <line x1="120" y1="47" x2="120" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
+            </svg>
+        </div>
         <div class="container">
             <h2 class="section-title">Tekniset tiedot</h2>
             <p class="section-subtitle">Ammattitason infrastruktuuri vaativaan käyttöön. <a href="konesali.html">Katso kaikki tekniset tiedot &rarr;</a></p>
@@ -624,14 +795,19 @@
         <div class="container footer-inner">
             <div class="footer-brand">
                 <a href="/" class="logo">
-                    <svg class="logo-icon" viewBox="0 0 32 32" width="24" height="24" fill="none">
-                        <rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
-                        <rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
+                    <svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
+                        <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                        <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                        <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                        <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                        <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
                     </svg>
                     <span>Konesali<strong>Turku</strong></span>
                 </a>
diff --git a/konesali.html b/konesali.html
index d04975d..d3472cd 100644
--- a/konesali.html
+++ b/konesali.html
@@ -12,14 +12,19 @@
     <header class="header" id="header">
         <div class="container header-inner">
             <a href="/" class="logo">
-                <svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
-                    <rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
-                    <rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                    <rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
+                <svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
+                    <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                    <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                    <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                    <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                    <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
                 </svg>
                 <span>Konesali<strong>Turku</strong></span>
             </a>
@@ -388,14 +393,19 @@
         <div class="container footer-inner">
             <div class="footer-brand">
                 <a href="/" class="logo">
-                    <svg class="logo-icon" viewBox="0 0 32 32" width="24" height="24" fill="none">
-                        <rect x="2" y="6" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2"/>
-                        <rect x="6" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="6" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="14" y="18" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="22" y="10" width="4" height="4" rx="1" fill="currentColor"/>
-                        <rect x="22" y="18" width="4" height="4" rx="1" fill="currentColor"/>
+                    <svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
+                        <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                        <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                        <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                        <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                        <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
                     </svg>
                     <span>Konesali<strong>Turku</strong></span>
                 </a>
diff --git a/style.css b/style.css
index 72468f2..d60d8b4 100644
--- a/style.css
+++ b/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;
     }