AI update: בצע שני שיפורים בדף הדמו של מספרת קובי שריקי: 1) הוסף פופ-אפ מכירה שנפתח אוטומטית כ-5 שניות אחרי כניסת המבקר לדף, ונגיש

index.html

@@ -78,23 +78,29 @@
         </div>
       </div>
       <div class="hero-visual reveal" aria-hidden="true">
-        <svg class="scissors-art" viewBox="0 0 200 200">
+        <div class="hero-image-container">
-          <defs>
+          <img src="https://images.unsplash.com/photo-1621605815971-fbc98d665033?w=600&h=800&fit=crop&crop=center" alt="" class="hero-image" loading="eager">
-            <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <div class="hero-image-overlay"></div>
-              <stop offset="0%" style="stop-color:var(--gold);stop-opacity:1" />
+        </div>
-              <stop offset="100%" style="stop-color:var(--gold-dark);stop-opacity:1" />
+      </div>
-            </linearGradient>
+    </section>
-          </defs>
+
-          <circle cx="100" cy="100" r="95" fill="none" stroke="url(#goldGrad)" stroke-width="1" opacity="0.3"/>
+    <section class="showcase">
-          <circle cx="100" cy="100" r="75" fill="none" stroke="url(#goldGrad)" stroke-width="1" opacity="0.5"/>
+      <div class="container">
-          <g class="scissors" transform="translate(100,100)">
+        <div class="showcase-grid">
-            <ellipse cx="-25" cy="-35" rx="18" ry="25" fill="none" stroke="url(#goldGrad)" stroke-width="3"/>
+          <div class="showcase-item reveal">
-            <ellipse cx="25" cy="-35" rx="18" ry="25" fill="none" stroke="url(#goldGrad)" stroke-width="3"/>
+            <img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=400&h=300&fit=crop" alt="תספורת גברים מקצועית" loading="lazy">
-            <path d="M-10 -15 L0 0 L10 -15" fill="none" stroke="url(#goldGrad)" stroke-width="3" stroke-linecap="round"/>
+          </div>
-            <path d="M-8 0 L0 50 L8 0" fill="none" stroke="url(#goldGrad)" stroke-width="3" stroke-linecap="round"/>
+          <div class="showcase-item reveal">
-            <circle cx="0" cy="0" r="6" fill="var(--gold)"/>
+            <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=400&h=300&fit=crop" alt="כלי מספרה מקצועיים" loading="lazy">
-          </g>
+          </div>
-        </svg>
+          <div class="showcase-item reveal">
+            <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=400&h=300&fit=crop" alt="כיסא מספרה קלאסי" loading="lazy">
+          </div>
+          <div class="showcase-item reveal">
+            <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=400&h=300&fit=crop" alt="גילוח מקצועי" loading="lazy">
+          </div>
+        </div>
       </div>
     </section>
 
@@ -106,72 +112,58 @@
         </header>
         <div class="services-grid">
           <article class="service-card service-card-featured reveal">
-            <div class="service-icon">
+            <div class="service-image">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=400&h=250&fit=crop" alt="תספורת גברים" loading="lazy">
-                <circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M16 55 C16 38 48 38 48 55" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M20 20 Q32 8 44 20" fill="none" stroke="currentColor" stroke-width="2"/>
-              </svg>
             </div>
+            <div class="service-content">
               <h3 class="service-title">תספורות גברים</h3>
               <p class="service-desc">תספורות קלאסיות ומודרניות, פייד, עיצוב זקן ועוד. כל תספורת מותאמת למבנה הפנים ולסגנון האישי.</p>
+            </div>
           </article>
           <article class="service-card reveal">
-            <div class="service-icon">
+            <div class="service-image">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=400&h=250&fit=crop" alt="תספורת נשים" loading="lazy">
-                <circle cx="32" cy="22" r="14" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M14 58 C14 40 50 40 50 58" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M18 22 Q32 4 46 22" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M22 16 C28 10 36 10 42 16" fill="none" stroke="currentColor" stroke-width="1.5"/>
-              </svg>
             </div>
+            <div class="service-content">
               <h3 class="service-title">תספורות נשים</h3>
               <p class="service-desc">עיצוב שיער מקצועי לכל אורך ולכל סגנון — מתספורות קצרות ועד תסרוקות מורכבות לאירועים.</p>
+            </div>
           </article>
           <article class="service-card reveal">
-            <div class="service-icon">
+            <div class="service-image">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?w=400&h=250&fit=crop" alt="צביעת שיער" loading="lazy">
-                <rect x="24" y="8" width="16" height="48" rx="4" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M28 16 L28 48 M36 16 L36 48" stroke="currentColor" stroke-width="1.5"/>
-                <circle cx="32" cy="12" r="2" fill="currentColor"/>
-              </svg>
             </div>
+            <div class="service-content">
               <h3 class="service-title">צביעת שיער</h3>
               <p class="service-desc">צבעים עמידים ומזינים, גוונים טבעיים או נועזים. שימוש בחומרים איכותיים לתוצאה מושלמת.</p>
+            </div>
           </article>
           <article class="service-card service-card-featured reveal">
-            <div class="service-icon">
+            <div class="service-image">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=250&fit=crop" alt="החלקות קרטין" loading="lazy">
-                <path d="M12 32 Q32 8 52 32 Q32 56 12 32" fill="none" stroke="currentColor" stroke-width="2"/>
-                <line x1="32" y1="16" x2="32" y2="48" stroke="currentColor" stroke-width="1.5"/>
-                <path d="M20 28 Q32 20 44 28" fill="none" stroke="currentColor" stroke-width="1.5"/>
-                <path d="M20 36 Q32 44 44 36" fill="none" stroke="currentColor" stroke-width="1.5"/>
-              </svg>
             </div>
+            <div class="service-content">
               <h3 class="service-title">החלקות קרטין</h3>
               <p class="service-desc">החלקה ברזילאית, יפנית וקרטין משקם — שיער חלק, בריא וזוהר לאורך זמן.</p>
+            </div>
           </article>
           <article class="service-card reveal">
-            <div class="service-icon">
+            <div class="service-image">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?w=400&h=250&fit=crop" alt="גילוח מקצועי" loading="lazy">
-                <circle cx="32" cy="32" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
-                <path d="M32 16 L32 32 L44 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                <circle cx="32" cy="32" r="3" fill="currentColor"/>
-              </svg>
             </div>
+            <div class="service-content">
+              <h3 class="service-title">גילוח ועיצוב זקן</h3>
+              <p class="service-desc">גילוח קלאסי עם סכין ומגבות חמות, עיצוב זקן מדויק ותספוחות מקצועיות.</p>
+            </div>
+          </article>
+          <article class="service-card reveal">
+            <div class="service-image">
+              <img src="https://images.unsplash.com/photo-1527799820374-dcf8d9d4a388?w=400&h=250&fit=crop" alt="טיפולי שיער" loading="lazy">
+            </div>
+            <div class="service-content">
               <h3 class="service-title">טיפולי שיער</h3>
               <p class="service-desc">טיפולים משקמים, מסכות הזנה, טיפולי קרקפת ופתרונות מותאמים לשיער פגום או יבש.</p>
-          </article>
-          <article class="service-card reveal">
-            <div class="service-icon">
-              <svg viewBox="0 0 64 64" aria-hidden="true">
-                <path d="M32 8 L32 56" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                <path d="M20 20 L32 32 L44 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                <path d="M20 44 L32 32 L44 44" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-              </svg>
             </div>
-            <h3 class="service-title">ייעוץ אישי</h3>
-            <p class="service-desc">התאמה מדויקת של הסגנון לאופי, לצורת הפנים ולאורח החיים שלכם — עוד לפני שמתחילים.</p>
           </article>
         </div>
         <div class="services-cta reveal">
@@ -181,6 +173,27 @@
       </div>
     </section>
 
+    <section class="atmosphere">
+      <div class="container">
+        <div class="atmosphere-grid">
+          <div class="atmosphere-main reveal">
+            <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=800&h=600&fit=crop" alt="אווירה במספרה" loading="lazy">
+            <div class="atmosphere-overlay">
+              <span class="atmosphere-text">אווירה מקצועית ואישית</span>
+            </div>
+          </div>
+          <div class="atmosphere-side">
+            <div class="atmosphere-item reveal">
+              <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=400&h=300&fit=crop" alt="כלי עבודה" loading="lazy">
+            </div>
+            <div class="atmosphere-item reveal">
+              <img src="https://images.unsplash.com/photo-1621605815971-fbc98d665033?w=400&h=300&fit=crop" alt="עבודה מקצועית" loading="lazy">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <section id="gallery" class="gallery">
       <div class="container">
         <header class="section-header">
@@ -189,61 +202,39 @@
         </header>
         <ul class="gallery-grid" role="list">
           <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
+            <figure class="gallery-figure">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?w=500&h=400&fit=crop" alt="תספורת גברים" loading="lazy">
-                <rect width="100" height="100" fill="var(--brown-light)"/>
-                <circle cx="50" cy="35" r="20" fill="var(--gold)" opacity="0.4"/>
-                <path d="M25 75 Q50 55 75 75" fill="var(--gold)" opacity="0.3"/>
-              </svg>
               <figcaption class="gallery-label">תספורת גברים</figcaption>
             </figure>
           </li>
           <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
+            <figure class="gallery-figure">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1622286342621-4bd786c2447c?w=500&h=400&fit=crop" alt="גילוח מקצועי" loading="lazy">
-                <rect width="100" height="100" fill="var(--brown)"/>
+              <figcaption class="gallery-label">גילוח מקצועי</figcaption>
-                <ellipse cx="50" cy="40" rx="25" ry="30" fill="var(--gold)" opacity="0.3"/>
-                <path d="M30 35 Q50 15 70 35" fill="none" stroke="var(--gold)" stroke-width="2" opacity="0.5"/>
-              </svg>
-              <figcaption class="gallery-label">צביעה + עיצוב</figcaption>
             </figure>
           </li>
           <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
+            <figure class="gallery-figure">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=500&h=400&fit=crop" alt="פייד קלאסי" loading="lazy">
-                <rect width="100" height="100" fill="var(--brown-dark)"/>
+              <figcaption class="gallery-label">פייד קלאסי</figcaption>
-                <path d="M20 50 Q50 20 80 50 Q50 80 20 50" fill="var(--gold)" opacity="0.25"/>
-              </svg>
-              <figcaption class="gallery-label">החלקת קרטין</figcaption>
             </figure>
           </li>
           <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
+            <figure class="gallery-figure">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1521490683712-35a1cb235d1c?w=500&h=400&fit=crop" alt="עיצוב זקן" loading="lazy">
-                <rect width="100" height="100" fill="var(--gold-dark)"/>
-                <circle cx="50" cy="50" r="30" fill="var(--cream)" opacity="0.2"/>
-                <circle cx="50" cy="50" r="15" fill="var(--cream)" opacity="0.3"/>
-              </svg>
-              <figcaption class="gallery-label">תספורת נשים</figcaption>
-            </figure>
-          </li>
-          <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
-                <rect width="100" height="100" fill="var(--brown-light)"/>
-                <path d="M30 70 L50 30 L70 70" fill="none" stroke="var(--gold)" stroke-width="3"/>
-                <circle cx="50" cy="30" r="8" fill="var(--gold)" opacity="0.5"/>
-              </svg>
               <figcaption class="gallery-label">עיצוב זקן</figcaption>
             </figure>
           </li>
           <li class="gallery-item reveal">
-            <figure class="gallery-placeholder">
+            <figure class="gallery-figure">
-              <svg viewBox="0 0 100 100" aria-hidden="true">
+              <img src="https://images.unsplash.com/photo-1596728325488-58c87691e9af?w=500&h=400&fit=crop" alt="תספורת מודרנית" loading="lazy">
-                <rect width="100" height="100" fill="var(--brown)"/>
+              <figcaption class="gallery-label">תספורת מודרנית</figcaption>
-                <rect x="20" y="30" width="60" height="40" rx="20" fill="var(--gold)" opacity="0.3"/>
+            </figure>
-              </svg>
+          </li>
-              <figcaption class="gallery-label">טיפול משקם</figcaption>
+          <li class="gallery-item reveal">
+            <figure class="gallery-figure">
+              <img src="https://images.unsplash.com/photo-1534297635766-a262cdcb8ee4?w=500&h=400&fit=crop" alt="סטיילינג מקצועי" loading="lazy">
+              <figcaption class="gallery-label">סטיילינג מקצועי</figcaption>
             </figure>
           </li>
         </ul>
@@ -266,19 +257,8 @@
             </ul>
             <p class="area-note">נגישים בקלות בתחבורה ציבורית, חניה זמינה ברחובות הסמוכים.</p>
           </div>
-          <div class="area-visual reveal" aria-hidden="true">
+          <div class="area-visual reveal">
-            <svg class="map-art" viewBox="0 0 300 300">
+            <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?w=600&h=500&fit=crop" alt="המספרה שלנו" loading="lazy" class="area-image">
-              <circle cx="150" cy="150" r="140" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.2"/>
-              <circle cx="150" cy="150" r="100" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.3"/>
-              <circle cx="150" cy="150" r="60" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.4"/>
-              <circle cx="150" cy="150" r="20" fill="var(--gold)" opacity="0.6"/>
-              <circle cx="150" cy="150" r="8" fill="var(--gold)"/>
-              <text x="150" y="155" text-anchor="middle" fill="var(--brown-dark)" font-size="8" font-weight="500">בת ים</text>
-              <text x="150" y="80" text-anchor="middle" fill="var(--brown)" font-size="10">תל אביב</text>
-              <text x="230" y="155" text-anchor="middle" fill="var(--brown)" font-size="10">חולון</text>
-              <text x="150" y="230" text-anchor="middle" fill="var(--brown)" font-size="10">ראשון לציון</text>
-              <text x="70" y="155" text-anchor="middle" fill="var(--brown)" font-size="10">יפו</text>
-            </svg>
           </div>
         </div>
       </div>
@@ -316,15 +296,8 @@
               </div>
             </div>
           </div>
-          <div class="contact-cta">
+          <div class="contact-image">
-            <a href="tel:0774089800" class="cta-button cta-large cta-gold">
+            <img src="https://images.unsplash.com/photo-1599351431202-1e0f0137899a?w=500&h=400&fit=crop" alt="כלי מספרה" loading="lazy">
-              <span class="cta-icon" aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
-                </svg>
-              </span>
-              קבעו תור עכשיו
-            </a>
           </div>
         </div>
       </div>
@@ -345,6 +318,82 @@
     </div>
   </footer>
 
+  <!-- Floating CTA Button -->
+  <button class="floating-cta" aria-label="קבלת מידע על רכישת האתר" id="floatingCta">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+    </svg>
+    <span>קבלו את האתר</span>
+  </button>
+
+  <!-- Sales Popup -->
+  <div class="popup-overlay" id="popupOverlay" aria-hidden="true">
+    <div class="popup-container" role="dialog" aria-modal="true" aria-labelledby="popupTitle">
+      <button class="popup-close" id="popupClose" aria-label="סגור חלון">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+      
+      <div class="popup-content">
+        <div class="popup-icon" aria-hidden="true">
+          <svg viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" stroke-width="2"/>
+            <path d="M20 32 L28 40 L44 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        
+        <h2 class="popup-title" id="popupTitle">האתר שלך מוכן ומחכה לך</h2>
+        
+        <p class="popup-subtitle">בחרו את האפשרות המתאימה לכם:</p>
+        
+        <div class="popup-options">
+          <a href="#" class="popup-option popup-option-basic">
+            <div class="option-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
+                <polyline points="7 10 12 15 17 10"/>
+                <line x1="12" y1="15" x2="12" y2="3"/>
+              </svg>
+            </div>
+            <div class="option-content">
+              <span class="option-title">הורדת קוד המקור</span>
+              <span class="option-desc">קבלו את כל קבצי האתר להעלאה עצמאית</span>
+            </div>
+          </a>
+          
+          <a href="#" class="popup-option popup-option-premium">
+            <div class="option-badge">מומלץ</div>
+            <div class="option-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <div class="option-content">
+              <span class="option-title">אחסון מלא + קוד</span>
+              <span class="option-desc">כולל דומיין, אחסון וניהול מלא</span>
+            </div>
+          </a>
+        </div>
+        
+        <div class="popup-warning">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="8" x2="12" y2="12"/>
+            <line x1="12" y1="16" x2="12.01" y2="16"/>
+          </svg>
+          <p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
+        </div>
+        
+        <div class="popup-extras">
+          <p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית?</p>
+          <p class="popup-extras-note">זו אפשרות בתשלום נפרד — <a href="#contact">צרו קשר</a> ונתאים לכם הצעה.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -118,4 +118,89 @@
     });
   });
 
+  // Popup functionality
+  const popupOverlay = document.getElementById('popupOverlay');
+  const popupClose = document.getElementById('popupClose');
+  const floatingCta = document.getElementById('floatingCta');
+  let popupShown = false;
+
+  function openPopup() {
+    popupOverlay.classList.add('active');
+    popupOverlay.setAttribute('aria-hidden', 'false');
+    document.body.style.overflow = 'hidden';
+    
+    // Focus the close button for accessibility
+    setTimeout(() => {
+      popupClose.focus();
+    }, 100);
+  }
+
+  function closePopup() {
+    popupOverlay.classList.remove('active');
+    popupOverlay.setAttribute('aria-hidden', 'true');
+    document.body.style.overflow = '';
+    
+    // Return focus to floating button
+    floatingCta.focus();
+  }
+
+  // Auto-open popup after 5 seconds
+  setTimeout(() => {
+    if (!popupShown) {
+      popupShown = true;
+      openPopup();
+    }
+  }, 5000);
+
+  // Floating CTA click
+  if (floatingCta) {
+    floatingCta.addEventListener('click', openPopup);
+  }
+
+  // Close popup
+  if (popupClose) {
+    popupClose.addEventListener('click', closePopup);
+  }
+
+  // Close on overlay click
+  if (popupOverlay) {
+    popupOverlay.addEventListener('click', function(e) {
+      if (e.target === popupOverlay) {
+        closePopup();
+      }
+    });
+  }
+
+  // Close on escape key
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && popupOverlay.classList.contains('active')) {
+      closePopup();
+    }
+  });
+
+  // Trap focus within popup when open
+  if (popupOverlay) {
+    const focusableElements = popupOverlay.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+
+    popupOverlay.addEventListener('keydown', function(e) {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          lastFocusable.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          e.preventDefault();
+        }
+      }
+    });
+  }
+
 })();

style.css

@@ -103,6 +103,12 @@ ul {
   list-style: none;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
 /* Focus styles */
 :focus-visible {
   outline: 3px solid var(--gold);
@@ -362,33 +368,57 @@ ul {
   top: 50%;
   transform: translateY(-50%);
   width: 35%;
-  max-width: 400px;
+  max-width: 450px;
 }
 
-.scissors-art {
+.hero-image-container {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 30px 60px rgba(44, 24, 16, 0.2);
+}
+
+.hero-image {
   width: 100%;
   height: auto;
+  display: block;
+  aspect-ratio: 3/4;
+  object-fit: cover;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+.hero-image-overlay {
-  .scissors-art {
+  position: absolute;
-    animation: float 6s ease-in-out infinite;
+  inset: 0;
+  background: linear-gradient(to top, rgba(44, 24, 16, 0.3) 0%, transparent 50%);
 }
 
-  .scissors {
+/* Showcase Section */
-    transform-origin: center;
+.showcase {
-    animation: scissorsPulse 4s ease-in-out infinite;
+  padding: var(--space-xl) 0;
-  }
+  background: var(--cream-dark);
 }
 
-@keyframes float {
+.showcase-grid {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
+  display: grid;
-  50% { transform: translateY(-20px) rotate(3deg); }
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-sm);
 }
 
-@keyframes scissorsPulse {
+.showcase-item {
-  0%, 100% { transform: translate(100px, 100px) scale(1); }
+  border-radius: 12px;
-  50% { transform: translate(100px, 100px) scale(1.05); }
+  overflow: hidden;
+  aspect-ratio: 4/3;
+}
+
+.showcase-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--transition);
+}
+
+.showcase-item:hover img {
+  transform: scale(1.05);
 }
 
 /* Sections */
@@ -424,9 +454,9 @@ section {
 
 .service-card {
   background: white;
-  padding: var(--space-lg);
   border-radius: 16px;
   border: 1px solid rgba(201, 169, 110, 0.2);
+  overflow: hidden;
   transition: var(--transition);
 }
 
@@ -437,20 +467,28 @@ section {
 }
 
 .service-card-featured {
-  background: linear-gradient(135deg, white 0%, rgba(201, 169, 110, 0.08) 100%);
   border-color: var(--gold);
 }
 
-.service-icon {
+.service-image {
-  width: 64px;
+  width: 100%;
-  height: 64px;
+  height: 180px;
-  margin-bottom: var(--space-md);
+  overflow: hidden;
-  color: var(--gold);
 }
 
-.service-icon svg {
+.service-image img {
   width: 100%;
   height: 100%;
+  object-fit: cover;
+  transition: var(--transition);
+}
+
+.service-card:hover .service-image img {
+  transform: scale(1.1);
+}
+
+.service-content {
+  padding: var(--space-md);
 }
 
 .service-title {
@@ -479,6 +517,64 @@ section {
   margin-bottom: var(--space-md);
 }
 
+/* Atmosphere Section */
+.atmosphere {
+  padding: var(--space-xl) 0;
+  background: var(--cream);
+}
+
+.atmosphere-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--space-md);
+}
+
+.atmosphere-main {
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.atmosphere-main img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  min-height: 400px;
+}
+
+.atmosphere-overlay {
+  position: absolute;
+  bottom: 0;
+  inset-inline: 0;
+  padding: var(--space-lg);
+  background: linear-gradient(to top, rgba(44, 24, 16, 0.8), transparent);
+}
+
+.atmosphere-text {
+  color: var(--cream);
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.atmosphere-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.atmosphere-item {
+  flex: 1;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.atmosphere-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 /* Gallery */
 .gallery {
   background: var(--brown-dark);
@@ -503,7 +599,6 @@ section {
   border-radius: 12px;
   overflow: hidden;
   position: relative;
-  aspect-ratio: 4 / 3;
 }
 
 .gallery-item:focus-within {
@@ -511,19 +606,20 @@ section {
   outline-offset: 4px;
 }
 
-.gallery-placeholder {
+.gallery-figure {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
-  transition: var(--transition);
   margin: 0;
+  aspect-ratio: 5/4;
 }
 
-.gallery-placeholder svg {
+.gallery-figure img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  transition: var(--transition);
 }
 
 .gallery-label {
@@ -547,7 +643,7 @@ section {
   transform: translateY(0);
 }
 
-.gallery-item:hover .gallery-placeholder {
+.gallery-item:hover .gallery-figure img {
   transform: scale(1.05);
 }
 
@@ -605,11 +701,10 @@ section {
   font-size: 0.95rem;
 }
 
-.map-art {
+.area-image {
   width: 100%;
-  max-width: 300px;
+  border-radius: 20px;
-  margin: 0 auto;
+  box-shadow: 0 20px 40px rgba(44, 24, 16, 0.15);
-  display: block;
 }
 
 /* Contact */
@@ -627,6 +722,7 @@ section {
   align-items: center;
   box-shadow: 0 20px 60px rgba(44, 24, 16, 0.1);
   border: 1px solid rgba(201, 169, 110, 0.2);
+  overflow: hidden;
 }
 
 .contact .section-title {
@@ -692,8 +788,15 @@ section {
   color: var(--brown-dark);
 }
 
-.contact-cta {
+.contact-image {
-  text-align: center;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.contact-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 /* Footer */
@@ -734,6 +837,284 @@ section {
   color: rgba(250, 246, 240, 0.7);
 }
 
+/* Floating CTA */
+.floating-cta {
+  position: fixed;
+  bottom: var(--space-lg);
+  inset-inline-start: var(--space-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
+  color: var(--brown-dark);
+  border: none;
+  border-radius: 50px;
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 8px 30px rgba(201, 169, 110, 0.4);
+  z-index: 90;
+  transition: var(--transition);
+}
+
+.floating-cta svg {
+  width: 20px;
+  height: 20px;
+}
+
+.floating-cta:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px rgba(201, 169, 110, 0.5);
+}
+
+.floating-cta:focus-visible {
+  outline: 3px solid var(--brown-dark);
+  outline-offset: 3px;
+}
+
+/* Popup Styles */
+.popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(44, 24, 16, 0.7);
+  backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: var(--transition);
+  padding: var(--space-md);
+}
+
+.popup-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.popup-container {
+  background: white;
+  border-radius: 24px;
+  max-width: 540px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  transform: translateY(20px) scale(0.95);
+  transition: var(--transition);
+  box-shadow: 0 30px 60px rgba(44, 24, 16, 0.3);
+}
+
+.popup-overlay.active .popup-container {
+  transform: translateY(0) scale(1);
+}
+
+.popup-close {
+  position: absolute;
+  top: var(--space-md);
+  inset-inline-end: var(--space-md);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cream);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: var(--transition);
+  z-index: 10;
+}
+
+.popup-close svg {
+  width: 20px;
+  height: 20px;
+  color: var(--brown-dark);
+}
+
+.popup-close:hover {
+  background: var(--cream-dark);
+  transform: rotate(90deg);
+}
+
+.popup-close:focus-visible {
+  outline: 3px solid var(--gold);
+  outline-offset: 2px;
+}
+
+.popup-content {
+  padding: var(--space-xl);
+  text-align: center;
+}
+
+.popup-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto var(--space-md);
+  color: var(--gold);
+}
+
+.popup-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.popup-title {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--brown-dark);
+  margin-bottom: var(--space-sm);
+}
+
+.popup-subtitle {
+  color: var(--text-muted);
+  margin-bottom: var(--space-lg);
+}
+
+.popup-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+}
+
+.popup-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  background: var(--cream);
+  border-radius: 16px;
+  text-align: start;
+  transition: var(--transition);
+  position: relative;
+  border: 2px solid transparent;
+}
+
+.popup-option:hover {
+  border-color: var(--gold);
+  transform: translateX(-4px);
+}
+
+.popup-option:focus-visible {
+  outline: none;
+  border-color: var(--gold);
+  box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.3);
+}
+
+.popup-option-premium {
+  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15) 0%, rgba(201, 169, 110, 0.05) 100%);
+  border-color: var(--gold);
+}
+
+.option-badge {
+  position: absolute;
+  top: -10px;
+  inset-inline-end: var(--space-md);
+  background: var(--gold);
+  color: var(--brown-dark);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.75rem;
+  border-radius: 50px;
+}
+
+.option-icon {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 12px;
+  color: var(--gold);
+}
+
+.option-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.option-content {
+  flex: 1;
+}
+
+.option-title {
+  display: block;
+  font-weight: 600;
+  color: var(--brown-dark);
+  margin-bottom: 0.25rem;
+}
+
+.option-desc {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.popup-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  background: #FFF3CD;
+  border-radius: 12px;
+  text-align: start;
+  margin-bottom: var(--space-md);
+}
+
+.popup-warning svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: #856404;
+}
+
+.popup-warning p {
+  font-size: 0.9rem;
+  color: #856404;
+  line-height: 1.5;
+}
+
+.popup-warning strong {
+  font-weight: 600;
+}
+
+.popup-extras {
+  padding: var(--space-md);
+  background: var(--cream);
+  border-radius: 12px;
+  text-align: start;
+}
+
+.popup-extras p {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.popup-extras p:last-child {
+  margin-bottom: 0;
+}
+
+.popup-extras-note {
+  color: var(--brown);
+}
+
+.popup-extras a {
+  color: var(--gold-dark);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.popup-extras a:hover {
+  color: var(--brown-dark);
+}
+
 /* Reveal Animation */
 .reveal {
   opacity: 0;
@@ -767,10 +1148,22 @@ section {
     justify-content: center;
   }
   
+  .showcase-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
   .services-grid {
     grid-template-columns: repeat(2, 1fr);
   }
   
+  .atmosphere-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .atmosphere-side {
+    flex-direction: row;
+  }
+  
   .gallery-grid {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -800,6 +1193,11 @@ section {
   .contact-details {
     align-items: center;
   }
+  
+  .contact-image {
+    order: -1;
+    max-height: 250px;
+  }
 }
 
 @media (max-width: 768px) {
@@ -856,10 +1254,18 @@ section {
     transform: rotate(-45deg) translate(5px, -5px);
   }
   
+  .showcase-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
   .services-grid {
     grid-template-columns: 1fr;
   }
   
+  .atmosphere-side {
+    flex-direction: column;
+  }
+  
   .gallery-grid {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -882,6 +1288,30 @@ section {
   .footer-brand {
     align-items: center;
   }
+  
+  .floating-cta {
+    bottom: var(--space-md);
+    inset-inline-start: var(--space-md);
+    padding: 0.875rem 1.25rem;
+    font-size: 0.85rem;
+  }
+  
+  .floating-cta span {
+    display: none;
+  }
+  
+  .floating-cta svg {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .popup-content {
+    padding: var(--space-lg);
+  }
+  
+  .popup-title {
+    font-size: 1.5rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -889,6 +1319,11 @@ section {
     font-size: 2.25rem;
   }
   
+  .showcase-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-xs);
+  }
+  
   .contact-card {
     padding: var(--space-lg);
   }
@@ -900,4 +1335,14 @@ section {
   .gallery-grid {
     grid-template-columns: 1fr;
   }
+  
+  .popup-option {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .option-badge {
+    position: static;
+    margin-bottom: var(--space-sm);
+  }
 }