STOP generating generic templates. I need you to implement EXACT specifications.

=== CRITICAL: USE THESE EXACT STYLES ===

Copy this CSS EXACTLY into assets/css/main.css:

[paste the complete CSS I provided in my previous response - the one starting with :root variables]

Then update index.html to use ONLY these classes:
- .hero (not generic hero sections)
- .service-card (with background images + gradient overlays)
- .btn--primary (pink-to-purple gradient)
- .stats (cyan background with marquee)
- .badge (gradient pill)

DO NOT:
- Add Bootstrap
- Add your own color schemes
- Generate generic card layouts
- Use default button styles
- Add sidebars or navigation menus beyond header

The site must look like a modern printing company with:
- Pink/purple/cyan color scheme (NOT blue/gray defaults)
- Background images on service cards with dark gradient overlays
- Bold, large typography (72px hero titles)
- Gradient buttons
- Clean, professional aesthetic

assets/css/main.css

@@ -1,3 +1,4 @@
+
 :root {
     /* Colors */
     --color-primary: #ED008E;
@@ -126,6 +127,55 @@ body {
     text-transform: uppercase;
 }
 
+/* Service Cards */
+.service-card {
+    position: relative;
+    min-height: 300px;
+    border-radius: 8px;
+    overflow: hidden;
+    color: var(--color-white);
+}
+
+.service-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+    z-index: 1;
+}
+
+.service-card__content {
+    position: relative;
+    z-index: 2;
+    padding: var(--space-lg);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+
+/* Stats Marquee */
+.stats {
+    background-color: var(--color-secondary);
+    color: var(--color-white);
+    padding: var(--space-md) 0;
+    overflow: hidden;
+}
+
+.stats__marquee {
+    display: flex;
+    white-space: nowrap;
+    animation: marquee 20s linear infinite;
+}
+
+@keyframes marquee {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+}
+
 /* Responsive */
 @media (max-width: 767px) {
     :root {
@@ -163,4 +213,4 @@ body {
     .btn--ghost {
         margin-left: 0;
     }
-}
+}

index.html

@@ -27,69 +27,62 @@
         </div>
         <img src="assets/images/hero-placeholder.jpg" alt="True Color printing equipment" class="hero__image">
     </section>
-<!-- Services Grid -->
+    <!-- Services Grid -->
     <section class="py-16 px-4">
-        <div class="max-w-6xl mx-auto">
+        <div class="container">
             <h2 class="text-3xl font-bold text-center mb-12">Our Printing Services</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Service Card 1 -->
-                <a href="/services/business-cards" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#16C2F3] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="credit-card" class="text-white"></i>
+                <a href="/services/business-cards" class="service-card" style="background-image: url('http://static.photos/business/640x360/1')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Business Cards</h3>
+                        <p>Premium quality business cards that make an impression.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Business Cards</h3>
-                    <p class="text-gray-600">Premium quality business cards that make an impression.</p>
                 </a>
                 
                 <!-- Service Card 2 -->
-                <a href="/services/banners-signage" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#ED008E] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="flag" class="text-white"></i>
+                <a href="/services/banners-signage" class="service-card" style="background-image: url('http://static.photos/business/640x360/2')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Banners & Signage</h3>
+                        <p>Eye-catching banners and signage for any occasion.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Banners & Signage</h3>
-                    <p class="text-gray-600">Eye-catching banners and signage for any occasion.</p>
                 </a>
                 
                 <!-- Service Card 3 -->
-                <a href="/services/standing-banners" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#93268F] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="image" class="text-white"></i>
+                <a href="/services/standing-banners" class="service-card" style="background-image: url('http://static.photos/business/640x360/3')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Standing Banners</h3>
+                        <p>Professional standing banners for events and promotions.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Standing Banners</h3>
-                    <p class="text-gray-600">Professional standing banners for events and promotions.</p>
                 </a>
                 
                 <!-- Service Card 4 -->
-                <a href="/services/flyers" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#16C2F3] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="file-text" class="text-white"></i>
+                <a href="/services/flyers" class="service-card" style="background-image: url('http://static.photos/business/640x360/4')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Flyers</h3>
+                        <p>High-impact flyers to promote your business.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Flyers</h3>
-                    <p class="text-gray-600">High-impact flyers to promote your business.</p>
                 </a>
                 
                 <!-- Service Card 5 -->
-                <a href="/services/stickers" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#ED008E] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="tag" class="text-white"></i>
+                <a href="/services/stickers" class="service-card" style="background-image: url('http://static.photos/business/640x360/5')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Stickers</h3>
+                        <p>Custom stickers for branding and promotions.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Stickers</h3>
-                    <p class="text-gray-600">Custom stickers for branding and promotions.</p>
                 </a>
                 
                 <!-- Service Card 6 -->
-                <a href="/services/vinyl-decals" class="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-md transition">
-                    <div class="w-16 h-16 bg-[#93268F] rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="scissors" class="text-white"></i>
+                <a href="/services/vinyl-decals" class="service-card" style="background-image: url('http://static.photos/business/640x360/6')">
+                    <div class="service-card__content">
+                        <h3 class="text-2xl font-bold mb-2">Vinyl Decals</h3>
+                        <p>Durable vinyl decals for windows, walls, and vehicles.</p>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Vinyl Decals</h3>
-                    <p class="text-gray-600">Durable vinyl decals for windows, walls, and vehicles.</p>
                 </a>
             </div>
         </div>
     </section>
-
-    <!-- About Section -->
+<!-- About Section -->
     <section class="py-16 px-4 bg-gray-50">
         <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
             <div>
@@ -100,8 +93,8 @@
                 <h2 class="section-title">About True Color Display Printing</h2>
                 <p class="section-text">We're a Saskatoon-based printing company offering fast, professional printing services with in-house design and installation.</p>
                 <p class="section-text">Our local team is dedicated to helping Saskatoon businesses with their printing needs.</p>
-<a href="/about" class="bg-gradient-to-r from-[#ED008E] to-[#93268F] text-white font-bold py-3 px-8 rounded-md hover:opacity-90 transition">Our Story</a>
-            </div>
+<a href="/about" class="btn--primary">Our Story</a>
+</div>
         </div>
     </section>
 
@@ -161,30 +154,20 @@
             </div>
         </div>
     </section>
-
     <!-- Stats Strip -->
-    <section class="py-12 px-4 bg-gradient-to-r from-[#ED008E] to-[#93268F] text-white">
-            <div class="stats-grid">
-                <div class="stat-item">
-                    <div class="stat-value">Same-Day</div>
-                    <div class="stat-label">Options</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">In-House</div>
-                    <div class="stat-label">Design</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">Print +</div>
-                    <div class="stat-label">Install</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value">Local</div>
-                    <div class="stat-label">Saskatoon</div>
-                </div>
-</div>
+    <section class="stats">
+        <div class="stats__marquee">
+            <div class="text-xl font-bold mx-8">Same-Day Printing</div>
+            <div class="text-xl font-bold mx-8">In-House Design</div>
+            <div class="text-xl font-bold mx-8">Print + Install</div>
+            <div class="text-xl font-bold mx-8">Local Saskatoon</div>
+            <div class="text-xl font-bold mx-8">Same-Day Printing</div>
+            <div class="text-xl font-bold mx-8">In-House Design</div>
+            <div class="text-xl font-bold mx-8">Print + Install</div>
+            <div class="text-xl font-bold mx-8">Local Saskatoon</div>
+        </div>
     </section>
-
-    <!-- Portfolio Carousel -->
+<!-- Portfolio Carousel -->
     <section class="py-16 px-4">
         <div class="max-w-6xl mx-auto">
             <h2 class="text-3xl font-bold text-center mb-12">Our Recent Work</h2>
@@ -207,8 +190,8 @@
                 <img src="assets/images/work-8.jpg" alt="Portfolio item" class="portfolio-image">
 </div>
             <div class="text-center mt-8">
-                <a href="/work" class="inline-block bg-gradient-to-r from-[#ED008E] to-[#93268F] text-white font-bold py-3 px-8 rounded-md hover:opacity-90 transition">View Full Portfolio</a>
-            </div>
+<a href="/work" class="btn--primary">View Full Portfolio</a>
+</div>
         </div>
     </section>
 
@@ -263,8 +246,8 @@
             <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Printing Project?</h2>
             <p class="text-xl mb-8">Get a free quote today and experience the True Color difference.</p>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="/contact" class="bg-white text-[#ED008E] font-bold py-3 px-8 rounded-md hover:bg-opacity-90 transition">Contact Us</a>
-                <a href="tel:+13069548688" class="cta-phone">
+<a href="/contact" class="btn--primary">Contact Us</a>
+<a href="tel:+13069548688" class="cta-phone">
                     <i data-feather="phone" class="inline mr-2"></i> (306) 954-8688
 </a>
             </div>