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">
+<section class="hero" style="background-image: url('images/hero-fiber.jpg')">
-    <div class="container">
+    <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">

style.css

@@ -178,33 +178,43 @@ img {
 /* ---- Hero ---- */
 .hero {
     position: relative;
-    padding: 160px 0 100px;
+    padding: 180px 0 100px;
     text-align: center;
     overflow: hidden;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
-.hero-bg {
+.hero-overlay {
     position: absolute;
     inset: 0;
-    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--orange-light) 0%, transparent 70%);
+    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);
-    z-index: -1;
+    z-index: 1;
+}
+
+.hero-container {
+    position: relative;
+    z-index: 2;
 }
 
 .hero-badge {
     display: inline-block;
     padding: 6px 16px;
-    background: var(--orange-light);
+    background: rgba(255,255,255,0.15);
-    color: var(--orange-dark);
+    backdrop-filter: blur(4px);
+    color: var(--orange-light);
     font-size: 0.82rem;
     font-weight: 600;
     border-radius: 100px;
     margin-bottom: 24px;
+    border: 1px solid rgba(255,255,255,0.1);
 }
 
 .hero h1 {
     font-size: 3.4rem;
     font-weight: 800;
-    color: var(--dark);
+    color: #fff;
     line-height: 1.15;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
@@ -216,7 +226,7 @@ img {
 
 .hero-sub {
     font-size: 1.15rem;
-    color: var(--text-light);
+    color: rgba(255,255,255,0.8);
     max-width: 560px;
     margin: 0 auto 36px;
     line-height: 1.7;
@@ -229,6 +239,19 @@ img {
     margin-bottom: 64px;
 }
 
+.btn-outline-light {
+    background: transparent;
+    color: #fff;
+    border: 1.5px solid rgba(255,255,255,0.3);
+}
+
+.btn-outline-light:hover {
+    background: rgba(255,255,255,0.1);
+    border-color: rgba(255,255,255,0.5);
+    box-shadow: none;
+    transform: translateY(-1px);
+}
+
 .hero-stats {
     display: flex;
     justify-content: center;
@@ -239,12 +262,74 @@ img {
     display: block;
     font-size: 1.4rem;
     font-weight: 700;
-    color: var(--dark);
+    color: #fff;
 }
 
 .hero-stat span {
     font-size: 0.85rem;
-    color: var(--text-light);
+    color: rgba(255,255,255,0.6);
+}
+
+/* ---- Image Break ---- */
+.image-break {
+    position: relative;
+    padding: 64px 0;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.image-break-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+}
+
+.image-break-overlay-warm {
+    background: linear-gradient(135deg, rgba(30,20,10,0.8), rgba(100,60,20,0.7));
+}
+
+.image-break-content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    gap: 64px;
+}
+
+.image-break-stat strong {
+    display: block;
+    font-size: 1.6rem;
+    font-weight: 800;
+    color: var(--orange);
+}
+
+.image-break-stat span {
+    font-size: 0.85rem;
+    color: rgba(255,255,255,0.7);
+}
+
+.image-break-tall {
+    padding: 120px 0;
+}
+
+.image-break-cta {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+}
+
+.image-break-cta h2 {
+    font-size: 2.4rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 12px;
+}
+
+.image-break-cta p {
+    font-size: 1.1rem;
+    color: rgba(255,255,255,0.8);
+    margin-bottom: 28px;
 }
 
 /* ---- Services ---- */
@@ -570,6 +655,23 @@ img {
         grid-template-columns: 1fr;
     }
 
+    .image-break-content {
+        flex-direction: column;
+        gap: 32px;
+    }
+
+    .image-break {
+        background-attachment: scroll;
+    }
+
+    .image-break-tall {
+        padding: 80px 0;
+    }
+
+    .image-break-cta h2 {
+        font-size: 1.8rem;
+    }
+
     .footer-top {
         grid-template-columns: 1fr;
         gap: 32px;