Add background images to hero, stats break, and city CTA sections

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

index.html

@@ -28,14 +28,15 @@
 </header>
 
 <!-- Hero -->
-<section class="hero">
-    <div class="container">
+<section class="hero" style="background-image: url('images/hero-fiber.jpg')">
+    <div class="hero-overlay"></div>
+    <div class="container hero-container">
         <div class="hero-badge">Turkulainen valokuituoperaattori</div>
         <h1>Symmetristä valokuitua<br>jopa <span class="highlight">100 Gbps</span></h1>
         <p class="hero-sub">Rakennamme nopeimmat ja luotettavimmat yhteydet yrityksille, taloyhtiöille ja konesaleihin. Ei kompromisseja nopeuden tai laadun suhteen.</p>
         <div class="hero-actions">
             <a href="#saatavuus" class="btn">Tee saatavuuskysely</a>
-            <a href="#palvelut" class="btn btn-outline">Tutustu palveluihin</a>
+            <a href="#palvelut" class="btn btn-outline-light">Tutustu palveluihin</a>
         </div>
         <div class="hero-stats">
             <div class="hero-stat">
@@ -52,7 +53,6 @@
             </div>
         </div>
     </div>
-    <div class="hero-bg"></div>
 </section>
 
 <!-- Palvelut -->
@@ -104,6 +104,29 @@
     </div>
 </section>
 
+<!-- Kuvakaistale -->
+<section class="image-break" style="background-image: url('images/fiber-light.jpg')">
+    <div class="image-break-overlay"></div>
+    <div class="container image-break-content">
+        <div class="image-break-stat">
+            <strong>100 Gbps</strong>
+            <span>Maksiminopeus</span>
+        </div>
+        <div class="image-break-stat">
+            <strong>Symmetrinen</strong>
+            <span>Sama nopeus molempiin suuntiin</span>
+        </div>
+        <div class="image-break-stat">
+            <strong>SLA</strong>
+            <span>Palvelutasotakuu</span>
+        </div>
+        <div class="image-break-stat">
+            <strong>Turku</strong>
+            <span>Paikallinen operaattori</span>
+        </div>
+    </div>
+</section>
+
 <!-- Miksi Cuitunet -->
 <section id="miksi" class="why">
     <div class="container">
@@ -156,6 +179,16 @@
     </div>
 </section>
 
+<!-- Kaupunki-kuvakaistale -->
+<section class="image-break image-break-tall" style="background-image: url('images/city-network.jpg')">
+    <div class="image-break-overlay image-break-overlay-warm"></div>
+    <div class="container image-break-cta">
+        <h2>Kiinnostaako kuituliittymä?</h2>
+        <p>Selvitä valokuidun saatavuus osoitteessasi — vastaamme 1–2 arkipäivässä.</p>
+        <a href="#saatavuus" class="btn">Tee saatavuuskysely</a>
+    </div>
+</section>
+
 <!-- Saatavuuskysely -->
 <section id="saatavuus" class="availability">
     <div class="container">