From ff2c54db57feb8406c5a06a1e4dbd10f1fb862ea Mon Sep 17 00:00:00 2001
From: Jukka Lampikoski <jukka@lampikoski.com>
Date: Mon, 9 Mar 2026 20:38:46 +0200
Subject: [PATCH] =?UTF-8?q?Erota=20Vihre=C3=A4=20konesali=20-osio=20visuaa?=
 =?UTF-8?q?lisesti=20Hinnat-osiosta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lisätty vihreä gradienttitausta, elliptinen jakaja ja
luontoteemainen SVG-kuvitus (tuulivoimalat, aurinko, lehdet, mäet).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 94 ++++++++++++++++++++++++++++++++++--------------------
 style.css  | 53 ++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 2954ab7..b71a855 100644
--- a/index.html
+++ b/index.html
@@ -487,44 +487,68 @@
 
     <!-- Vihreä energia -->
     <section class="section section-green section-with-illustration" id="energia">
-        <!-- Wind turbine illustration -->
-        <div class="illustration-right" aria-hidden="true">
-            <svg viewBox="0 0 200 400" fill="none">
-                <!-- Wind turbine 1 -->
-                <g transform="translate(80, 40)">
-                    <!-- Tower -->
-                    <line x1="50" y1="80" x2="50" y2="320" stroke="#059669" stroke-width="2" opacity="0.12"/>
-                    <line x1="44" y1="320" x2="56" y2="320" stroke="#059669" stroke-width="2" opacity="0.1"/>
-                    <!-- Hub -->
-                    <circle cx="50" cy="80" r="5" fill="#059669" opacity="0.12"/>
-                    <!-- Blades -->
-                    <line x1="50" y1="80" x2="50" y2="20" stroke="#059669" stroke-width="1.5" opacity="0.15" stroke-linecap="round"/>
-                    <line x1="50" y1="80" x2="100" y2="108" stroke="#059669" stroke-width="1.5" opacity="0.12" stroke-linecap="round"/>
-                    <line x1="50" y1="80" x2="5" y2="108" stroke="#059669" stroke-width="1.5" opacity="0.1" stroke-linecap="round"/>
+        <!-- Nature decoration (leaves, turbine, sun) -->
+        <div class="green-decoration" aria-hidden="true">
+            <svg viewBox="0 0 1200 500" fill="none" preserveAspectRatio="xMidYMid slice">
+                <!-- Scattered leaves -->
+                <g opacity="0.12">
+                    <path d="M120 80 Q140 50 160 80 Q140 65 120 80Z" fill="#059669" transform="rotate(-20 140 65)"/>
+                    <path d="M1050 120 Q1070 90 1090 120 Q1070 105 1050 120Z" fill="#059669" transform="rotate(15 1070 105)"/>
+                    <path d="M80 350 Q100 320 120 350 Q100 335 80 350Z" fill="#059669" transform="rotate(-35 100 335)"/>
+                    <path d="M1100 380 Q1120 350 1140 380 Q1120 365 1100 380Z" fill="#059669" transform="rotate(25 1120 365)"/>
+                    <path d="M300 60 Q315 35 330 60 Q315 47 300 60Z" fill="#059669" transform="rotate(10 315 47)"/>
+                    <path d="M900 400 Q915 375 930 400 Q915 387 900 400Z" fill="#059669" transform="rotate(-15 915 387)"/>
                 </g>
-                <!-- Wind turbine 2 (smaller, background) -->
-                <g transform="translate(20, 100)" opacity="0.6">
-                    <line x1="30" y1="50" x2="30" y2="220" stroke="#059669" stroke-width="1.5" opacity="0.1"/>
-                    <circle cx="30" cy="50" r="3.5" fill="#059669" opacity="0.1"/>
-                    <line x1="30" y1="50" x2="30" y2="10" stroke="#059669" stroke-width="1" opacity="0.12" stroke-linecap="round"/>
-                    <line x1="30" y1="50" x2="62" y2="68" stroke="#059669" stroke-width="1" opacity="0.1" stroke-linecap="round"/>
-                    <line x1="30" y1="50" x2="0" y2="68" stroke="#059669" stroke-width="1" opacity="0.08" stroke-linecap="round"/>
+                <!-- Small wind turbine left -->
+                <g transform="translate(60, 120)" opacity="0.1">
+                    <line x1="30" y1="40" x2="30" y2="200" stroke="#059669" stroke-width="2"/>
+                    <circle cx="30" cy="40" r="4" fill="#059669"/>
+                    <line x1="30" y1="40" x2="30" y2="0" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="30" y1="40" x2="64" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
+                    <line x1="30" y1="40" x2="-4" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
                 </g>
-                <!-- Sun rays -->
-                <circle cx="160" cy="60" r="20" stroke="#059669" stroke-width="1" opacity="0.08" fill="#059669" fill-opacity="0.02"/>
-                <circle cx="160" cy="60" r="10" fill="#059669" opacity="0.06"/>
-                <g stroke="#059669" stroke-width="0.8" opacity="0.06">
-                    <line x1="160" y1="30" x2="160" y2="22"/>
-                    <line x1="160" y1="90" x2="160" y2="98"/>
-                    <line x1="130" y1="60" x2="122" y2="60"/>
-                    <line x1="190" y1="60" x2="198" y2="60"/>
-                    <line x1="139" y1="39" x2="133" y2="33"/>
-                    <line x1="181" y1="81" x2="187" y2="87"/>
-                    <line x1="139" y1="81" x2="133" y2="87"/>
-                    <line x1="181" y1="39" x2="187" y2="33"/>
+                <!-- Large wind turbine right -->
+                <g transform="translate(1020, 50)" opacity="0.08">
+                    <line x1="50" y1="60" x2="50" y2="350" stroke="#059669" stroke-width="2.5"/>
+                    <circle cx="50" cy="60" r="6" fill="#059669"/>
+                    <line x1="50" y1="60" x2="50" y2="-10" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
+                    <line x1="50" y1="60" x2="110" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
+                    <line x1="50" y1="60" x2="-10" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
+                </g>
+                <!-- Sun top right -->
+                <circle cx="950" cy="70" r="30" stroke="#059669" stroke-width="1.5" opacity="0.06" fill="#059669" fill-opacity="0.02"/>
+                <circle cx="950" cy="70" r="14" fill="#059669" opacity="0.05"/>
+                <g stroke="#059669" stroke-width="1" opacity="0.05">
+                    <line x1="950" y1="30" x2="950" y2="18"/>
+                    <line x1="950" y1="110" x2="950" y2="122"/>
+                    <line x1="910" y1="70" x2="898" y2="70"/>
+                    <line x1="990" y1="70" x2="1002" y2="70"/>
+                    <line x1="922" y1="42" x2="914" y2="34"/>
+                    <line x1="978" y1="98" x2="986" y2="106"/>
+                    <line x1="922" y1="98" x2="914" y2="106"/>
+                    <line x1="978" y1="42" x2="986" y2="34"/>
+                </g>
+                <!-- Rolling hills at bottom -->
+                <path d="M0 420 Q150 380 300 400 Q500 430 700 390 Q900 360 1050 400 Q1150 420 1200 410 L1200 500 L0 500Z" fill="#059669" opacity="0.04"/>
+                <path d="M0 450 Q200 420 400 440 Q600 460 800 430 Q1000 400 1200 440 L1200 500 L0 500Z" fill="#059669" opacity="0.03"/>
+                <!-- Small tree silhouettes on hills -->
+                <g opacity="0.06" fill="#059669">
+                    <path d="M200 400 L206 380 L212 400Z"/>
+                    <rect x="204" y="400" width="4" height="10"/>
+                    <path d="M800 395 L808 370 L816 395Z"/>
+                    <rect x="806" y="395" width="4" height="12"/>
+                    <path d="M500 425 L505 410 L510 425Z"/>
+                    <rect x="503.5" y="425" width="3" height="8"/>
+                </g>
+                <!-- Recycling arrows circle -->
+                <g transform="translate(180, 250)" opacity="0.07" stroke="#059669" stroke-width="1.5" fill="none">
+                    <path d="M15 0 A15 15 0 0 1 0 15" stroke-linecap="round"/>
+                    <path d="M0 15 A15 15 0 0 1 -15 0" stroke-linecap="round"/>
+                    <path d="M-15 0 A15 15 0 0 1 0 -15" stroke-linecap="round"/>
+                    <polygon points="15,0 10,-5 10,5" fill="#059669"/>
+                    <polygon points="0,15 -5,10 5,10" fill="#059669"/>
+                    <polygon points="-15,0 -10,5 -10,-5" fill="#059669"/>
                 </g>
-                <!-- Ground/landscape line -->
-                <path d="M0 340 Q50 325 100 335 Q150 345 200 330" stroke="#059669" stroke-width="0.8" opacity="0.08" fill="none"/>
             </svg>
         </div>
         <div class="container">
diff --git a/style.css b/style.css
index 3529e34..d362c7d 100644
--- a/style.css
+++ b/style.css
@@ -1027,7 +1027,60 @@ a:hover {
 
 /* === Green Energy (simplified) === */
 .section-green {
+    background: linear-gradient(175deg, #ecfdf5 0%, #d1fae5 40%, #ecfdf5 100%);
+    position: relative;
+    overflow: hidden;
+}
+
+.section-green::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: 100%;
+    height: 60px;
     background: var(--color-bg-alt);
+    clip-path: ellipse(55% 100% at 50% 0%);
+    z-index: 1;
+}
+
+.section-green::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+        radial-gradient(circle at 15% 30%, rgba(5, 150, 105, 0.06) 0%, transparent 50%),
+        radial-gradient(circle at 85% 70%, rgba(5, 150, 105, 0.05) 0%, transparent 40%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.section-green > .container,
+.section-green > .illustration-right {
+    position: relative;
+    z-index: 2;
+}
+
+.green-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.green-decoration svg {
+    width: 100%;
+    height: 100%;
+}
+
+.section-green > .green-decoration {
+    z-index: 1;
 }
 
 .green-energy {