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

index.html

@@ -28,6 +28,7 @@
       </a>
       <ul class="nav-links" id="nav-links">
         <li><a href="#services">שירותים</a></li>
+        <li><a href="#gallery">גלריה</a></li>
         <li><a href="#about">עלינו</a></li>
         <li><a href="#reviews">ביקורות</a></li>
         <li><a href="#contact">צור קשר</a></li>
@@ -66,13 +67,9 @@
         </a>
       </div>
       <div class="hero-visual reveal" aria-hidden="true">
-        <div class="hero-scissors">
-          <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="scissors-icon">
-            <circle cx="30" cy="90" r="18" stroke="currentColor" stroke-width="3" fill="none"/>
-            <circle cx="90" cy="90" r="18" stroke="currentColor" stroke-width="3" fill="none"/>
-            <path d="M30 72 L60 30 L90 72" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-            <circle cx="60" cy="50" r="4" fill="currentColor"/>
-          </svg>
+        <div class="hero-image-container">
+          <img src="https://images.unsplash.com/photo-1560066984-138dadb4c035?w=600&h=700&fit=crop&crop=center" alt="סלון שיער מודרני" class="hero-image" loading="eager">
+          <div class="hero-image-overlay"></div>
         </div>
         <div class="hero-decorations">
           <span class="deco-dot deco-dot-1"></span>
@@ -92,6 +89,10 @@
         </header>
         <div class="services-grid">
           <article class="service-card reveal">
+            <div class="service-image">
+              <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=250&fit=crop&crop=center" alt="תספורת נשית מקצועית" loading="lazy">
+            </div>
+            <div class="service-content">
               <div class="service-icon">
                 <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                   <path d="M10 38 L20 8 M20 8 L24 18 L28 8 M28 8 L38 38"/>
@@ -100,8 +101,13 @@
               </div>
               <h3>תספורות</h3>
               <p>תספורת מותאמת אישית לכל סגנון ומבנה פנים. משיחת ייעוץ ועד לתוצאה מושלמת — כי כל אישה&nbsp;ייחודית.</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&crop=center" alt="צביעת שיער מקצועית" loading="lazy">
+            </div>
+            <div class="service-content">
               <div class="service-icon">
                 <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                   <circle cx="24" cy="24" r="16"/>
@@ -111,8 +117,13 @@
               </div>
               <h3>צביעות שיער</h3>
               <p>מגוון טכניקות צביעה — מאומברה עדינה ועד שינוי צבע דרמטי. חומרים איכותיים&nbsp;בלבד.</p>
+            </div>
           </article>
           <article class="service-card reveal">
+            <div class="service-image">
+              <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=400&h=250&fit=crop&crop=center" alt="החלקת שיער מקצועית" loading="lazy">
+            </div>
+            <div class="service-content">
               <div class="service-icon">
                 <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                   <path d="M8 40 Q24 10 40 40"/>
@@ -122,8 +133,13 @@
               </div>
               <h3>החלקות</h3>
               <p>החלקות קראטין וברזילאיות לשיער חלק, בריא וזוהר לאורך&nbsp;זמן.</p>
+            </div>
           </article>
           <article class="service-card reveal">
+            <div class="service-image">
+              <img src="https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=400&h=250&fit=crop&crop=center" alt="טיפולי שיער מקצועיים" loading="lazy">
+            </div>
+            <div class="service-content">
               <div class="service-icon">
                 <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                   <path d="M24 8 V16 M24 32 V40"/>
@@ -134,21 +150,59 @@
               </div>
               <h3>טיפולי שיער</h3>
               <p>טיפולים מזינים ומשקמים לשיער פגום, יבש או צבוע. החזרת הברק&nbsp;והחיות.</p>
+            </div>
           </article>
         </div>
       </div>
     </section>
 
+    <section id="gallery" class="gallery">
+      <div class="container">
+        <header class="section-header reveal">
+          <span class="section-tag">העבודות שלנו</span>
+          <h2 class="section-title">גלריית עיצובי שיער</h2>
+        </header>
+        <div class="gallery-grid">
+          <div class="gallery-item gallery-item-large reveal">
+            <img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?w=600&h=500&fit=crop&crop=center" alt="עיצוב שיער מקצועי" loading="lazy">
+            <div class="gallery-overlay">
+              <span>עיצוב וסטיילינג</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal">
+            <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?w=400&h=300&fit=crop&crop=center" alt="תספורת נשית אלגנטית" loading="lazy">
+            <div class="gallery-overlay">
+              <span>תספורת אלגנטית</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal">
+            <img src="https://images.unsplash.com/photo-1522337094846-8a818192de1f?w=400&h=300&fit=crop&crop=center" alt="צביעת שיער מודרנית" loading="lazy">
+            <div class="gallery-overlay">
+              <span>צביעה מודרנית</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal">
+            <img src="https://images.unsplash.com/photo-1620331311520-246422fd82f9?w=400&h=300&fit=crop&crop=center" alt="כיסא מספרה מודרני" loading="lazy">
+            <div class="gallery-overlay">
+              <span>הסטודיו שלנו</span>
+            </div>
+          </div>
+          <div class="gallery-item reveal">
+            <img src="https://images.unsplash.com/photo-1633681926022-84c23e8cb2d6?w=400&h=300&fit=crop&crop=center" alt="מוצרי טיפוח לשיער" loading="lazy">
+            <div class="gallery-overlay">
+              <span>מוצרים איכותיים</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <section id="about" class="about">
       <div class="container">
         <div class="about-layout">
-          <div class="about-visual reveal" aria-hidden="true">
+          <div class="about-visual reveal">
             <div class="about-frame">
-              <div class="about-pattern">
-                <span></span><span></span><span></span>
-                <span></span><span></span><span></span>
-                <span></span><span></span><span></span>
-              </div>
+              <img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?w=500&h=600&fit=crop&crop=center" alt="פנים המספרה" class="about-image" loading="lazy">
               <div class="about-badge">
                 <span class="about-badge-number">15+</span>
                 <span class="about-badge-text">שנות ניסיון</span>
@@ -307,6 +361,82 @@
     </div>
   </footer>
 
+  <!-- Floating CTA Button -->
+  <button class="floating-cta" id="floating-cta" aria-label="פתיחת חלון רכישה">
+    <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-5z"/>
+      <path d="M2 17l10 5 10-5"/>
+      <path d="M2 12l10 5 10-5"/>
+    </svg>
+    <span>האתר שלך מוכן!</span>
+  </button>
+
+  <!-- Sales Popup -->
+  <div class="popup-overlay" id="popup-overlay" aria-hidden="true">
+    <div class="popup" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <button class="popup-close" id="popup-close" aria-label="סגירת חלון">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+      <div class="popup-content">
+        <div class="popup-icon">
+          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="24" cy="24" r="20"/>
+            <path d="M16 24l5 5 11-11"/>
+          </svg>
+        </div>
+        <h2 id="popup-title" class="popup-title">האתר שלך מוכן ומחכה לך</h2>
+        
+        <div class="popup-options">
+          <a href="#" class="popup-option popup-option-code">
+            <div class="popup-option-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M16 18l6-6-6-6"/>
+                <path d="M8 6l-6 6 6 6"/>
+              </svg>
+            </div>
+            <div class="popup-option-content">
+              <h3>הורדת קוד המקור</h3>
+              <p>קבלת כל קבצי האתר לשימושך</p>
+            </div>
+            <svg class="popup-option-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M19 12H5M12 19l-7-7 7-7"/>
+            </svg>
+          </a>
+          <a href="#" class="popup-option popup-option-full">
+            <div class="popup-option-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="2" y="3" width="20" height="14" rx="2"/>
+                <path d="M8 21h8M12 17v4"/>
+              </svg>
+            </div>
+            <div class="popup-option-content">
+              <h3>אחסון מלא + קוד</h3>
+              <p>כולל דומיין, אחסון וניהול שוטף</p>
+            </div>
+            <svg class="popup-option-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M19 12H5M12 19l-7-7 7-7"/>
+            </svg>
+          </a>
+        </div>
+
+        <div class="popup-warning">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+            <line x1="12" y1="9" x2="12" y2="13"/>
+            <line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+          <p><strong>שימו לב:</strong> אתר הדגמה זה יימחק תוך 30 יום אם לא תתקבל רכישה או פנייה מצדכם.</p>
+        </div>
+
+        <div class="popup-extras">
+          <p>רוצים שינויים בעיצוב, עמודים נוספים או תמונות מותאמות אישית? זו אפשרות בתשלום נפרד — <a href="tel:0504001413">צרו קשר</a> ונתאים לכם הצעה.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -116,4 +116,97 @@
     }, { passive: true });
   }
 
+  // Sales Popup
+  const popupOverlay = document.getElementById('popup-overlay');
+  const popupClose = document.getElementById('popup-close');
+  const floatingCta = document.getElementById('floating-cta');
+  const popup = popupOverlay ? popupOverlay.querySelector('.popup') : null;
+
+  function openPopup() {
+    if (!popupOverlay) return;
+    popupOverlay.classList.add('is-visible');
+    popupOverlay.setAttribute('aria-hidden', 'false');
+    document.body.classList.add('popup-open');
+    // Focus the close button for accessibility
+    if (popupClose) {
+      setTimeout(function() {
+        popupClose.focus();
+      }, 100);
+    }
+  }
+
+  function closePopup() {
+    if (!popupOverlay) return;
+    popupOverlay.classList.remove('is-visible');
+    popupOverlay.setAttribute('aria-hidden', 'true');
+    document.body.classList.remove('popup-open');
+  }
+
+  // Auto-open popup after 5 seconds
+  let popupShown = false;
+  setTimeout(function() {
+    if (!popupShown) {
+      popupShown = true;
+      openPopup();
+    }
+  }, 5000);
+
+  // Floating CTA click
+  if (floatingCta) {
+    floatingCta.addEventListener('click', function() {
+      openPopup();
+    });
+  }
+
+  // Close button click
+  if (popupClose) {
+    popupClose.addEventListener('click', function() {
+      closePopup();
+    });
+  }
+
+  // Click outside popup to close
+  if (popupOverlay) {
+    popupOverlay.addEventListener('click', function(e) {
+      if (e.target === popupOverlay) {
+        closePopup();
+      }
+    });
+  }
+
+  // Escape key to close popup
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && popupOverlay && popupOverlay.classList.contains('is-visible')) {
+      closePopup();
+      if (floatingCta) {
+        floatingCta.focus();
+      }
+    }
+  });
+
+  // Trap focus inside popup when open
+  if (popup) {
+    popup.addEventListener('keydown', function(e) {
+      if (e.key !== 'Tab') return;
+      
+      const focusableElements = popup.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          firstElement.focus();
+          e.preventDefault();
+        }
+      }
+    });
+  }
+
 })();

style.css

@@ -8,6 +8,7 @@
   --color-accent-light: #A67C00;
   --color-sage: #A8B5A0;
   --color-white: #FFFFFF;
+  --color-danger: #C53030;
   
   --font-body: 'Heebo', sans-serif;
   
@@ -415,22 +416,28 @@ button {
   position: relative;
 }
 
-.hero-scissors {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 200px;
-  height: 200px;
+.hero-image-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
   margin: 0 auto;
-  background: var(--color-cream);
-  border-radius: 50%;
-  box-shadow: 0 20px 60px rgba(61, 50, 41, 0.1);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(61, 50, 41, 0.2);
 }
 
-.scissors-icon {
-  width: 100px;
-  height: 100px;
-  color: var(--color-accent);
+.hero-image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 6 / 7;
+  object-fit: cover;
+}
+
+.hero-image-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, transparent 60%, rgba(61, 50, 41, 0.2) 100%);
+  pointer-events: none;
 }
 
 .hero-decorations {
@@ -449,7 +456,7 @@ button {
   width: 16px;
   height: 16px;
   top: 10%;
-  inset-inline-start: 20%;
+  inset-inline-start: -10%;
   opacity: 0.4;
 }
 
@@ -457,7 +464,7 @@ button {
   width: 24px;
   height: 24px;
   bottom: 20%;
-  inset-inline-end: 15%;
+  inset-inline-end: -5%;
   background: var(--color-sage);
   opacity: 0.5;
 }
@@ -466,7 +473,7 @@ button {
   width: 12px;
   height: 12px;
   top: 60%;
-  inset-inline-start: 10%;
+  inset-inline-start: -15%;
   background: var(--color-accent);
   opacity: 0.3;
 }
@@ -480,14 +487,14 @@ button {
 }
 
 .deco-line-1 {
-  top: 25%;
+  top: 5%;
   inset-inline-end: 5%;
   transform: rotate(-30deg);
 }
 
 .deco-line-2 {
-  bottom: 30%;
-  inset-inline-start: 5%;
+  bottom: 10%;
+  inset-inline-start: -5%;
   transform: rotate(20deg);
 }
 
@@ -508,14 +515,8 @@ button {
     padding-inline: var(--space-xl);
   }
   
-  .hero-scissors {
-    width: 240px;
-    height: 240px;
-  }
-  
-  .scissors-icon {
-    width: 120px;
-    height: 120px;
+  .hero-image-container {
+    max-width: 450px;
   }
 }
 
@@ -556,10 +557,10 @@ button {
 }
 
 .service-card {
-  padding: var(--space-lg);
   background: var(--color-white);
   border-radius: var(--radius-lg);
   box-shadow: 0 2px 20px rgba(61, 50, 41, 0.05);
+  overflow: hidden;
   transition: transform var(--transition-medium), box-shadow var(--transition-medium);
 }
 
@@ -568,6 +569,27 @@ button {
   box-shadow: 0 10px 40px rgba(61, 50, 41, 0.1);
 }
 
+.service-image {
+  width: 100%;
+  height: 180px;
+  overflow: hidden;
+}
+
+.service-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition-medium);
+}
+
+.service-card:hover .service-image img {
+  transform: scale(1.05);
+}
+
+.service-content {
+  padding: var(--space-lg);
+}
+
 .service-icon {
   width: 56px;
   height: 56px;
@@ -604,9 +626,88 @@ button {
   }
 }
 
+/* Gallery */
+.gallery {
+  padding: var(--space-2xl) 0;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-md);
+}
+
+.gallery-item {
+  position: relative;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  aspect-ratio: 4 / 3;
+}
+
+.gallery-item-large {
+  aspect-ratio: 6 / 5;
+}
+
+.gallery-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition-medium);
+}
+
+.gallery-item:hover img {
+  transform: scale(1.05);
+}
+
+.gallery-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: var(--space-md);
+  background: linear-gradient(180deg, transparent 50%, rgba(61, 50, 41, 0.7) 100%);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.gallery-item:hover .gallery-overlay {
+  opacity: 1;
+}
+
+.gallery-overlay span {
+  color: var(--color-white);
+  font-weight: 500;
+  font-size: 0.95rem;
+}
+
+@media (min-width: 600px) {
+  .gallery-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-lg);
+  }
+  
+  .gallery-item-large {
+    grid-column: span 2;
+    aspect-ratio: 16 / 7;
+  }
+}
+
+@media (min-width: 900px) {
+  .gallery-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .gallery-item-large {
+    grid-column: span 1;
+    grid-row: span 2;
+    aspect-ratio: auto;
+  }
+}
+
 /* About */
 .about {
   padding: var(--space-2xl) 0;
+  background: var(--color-cream);
 }
 
 .about-layout {
@@ -624,36 +725,24 @@ button {
 
 .about-frame {
   position: relative;
-  width: 260px;
-  height: 260px;
-}
-
-.about-pattern {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
   width: 100%;
-  height: 100%;
-  padding: 20px;
-  background: var(--color-cream);
+  max-width: 320px;
   border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(61, 50, 41, 0.15);
 }
 
-.about-pattern span {
-  background: var(--color-warm);
-  border-radius: var(--radius-sm);
-  opacity: 0.15;
-}
-
-.about-pattern span:nth-child(5) {
-  background: var(--color-accent);
-  opacity: 0.25;
+.about-image {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 5 / 6;
+  object-fit: cover;
 }
 
 .about-badge {
   position: absolute;
-  bottom: -10px;
-  inset-inline-end: -10px;
+  bottom: var(--space-md);
+  inset-inline-end: var(--space-md);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -718,11 +807,6 @@ button {
   .about-visual {
     padding: var(--space-lg);
   }
-  
-  .about-badge {
-    bottom: -20px;
-    inset-inline-end: -20px;
-  }
 }
 
 /* Reviews */
@@ -978,6 +1062,276 @@ button {
   opacity: 0.75;
 }
 
+/* Floating CTA Button */
+.floating-cta {
+  position: fixed;
+  bottom: var(--space-lg);
+  inset-inline-end: var(--space-md);
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
+  color: var(--color-white);
+  border-radius: var(--radius-full);
+  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.floating-cta:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 8px 30px rgba(139, 105, 20, 0.5);
+}
+
+.floating-cta:focus-visible {
+  outline: 3px solid var(--color-warm);
+  outline-offset: 3px;
+}
+
+.floating-cta svg {
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
+  }
+  50% {
+    box-shadow: 0 4px 30px rgba(139, 105, 20, 0.6);
+  }
+}
+
+/* Popup */
+.popup-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-md);
+  background: rgba(61, 50, 41, 0.6);
+  backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+}
+
+.popup-overlay.is-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.popup {
+  position: relative;
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 20px 60px rgba(61, 50, 41, 0.3);
+  transform: scale(0.95) translateY(20px);
+  transition: transform var(--transition-medium);
+}
+
+.popup-overlay.is-visible .popup {
+  transform: scale(1) translateY(0);
+}
+
+.popup-close {
+  position: absolute;
+  top: var(--space-sm);
+  inset-inline-end: var(--space-sm);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-bg);
+  border-radius: 50%;
+  color: var(--color-text-light);
+  transition: background var(--transition-fast), color var(--transition-fast);
+  z-index: 10;
+}
+
+.popup-close:hover {
+  background: var(--color-cream);
+  color: var(--color-text);
+}
+
+.popup-close:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.popup-close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.popup-content {
+  padding: var(--space-xl);
+}
+
+.popup-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto var(--space-md);
+  color: var(--color-accent);
+}
+
+.popup-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.popup-title {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-block-end: var(--space-lg);
+}
+
+.popup-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-block-end: var(--space-lg);
+}
+
+.popup-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  background: var(--color-bg);
+  border-radius: var(--radius-md);
+  border: 2px solid transparent;
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.popup-option:hover {
+  border-color: var(--color-warm);
+  background: var(--color-cream);
+  transform: translateX(-4px);
+}
+
+.popup-option:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.popup-option-code:hover {
+  border-color: var(--color-sage);
+}
+
+.popup-option-full:hover {
+  border-color: var(--color-accent);
+}
+
+.popup-option-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-white);
+  border-radius: var(--radius-md);
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.popup-option-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.popup-option-content {
+  flex: 1;
+}
+
+.popup-option-content h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-block-end: 2px;
+}
+
+.popup-option-content p {
+  font-size: 0.85rem;
+  color: var(--color-text-light);
+}
+
+.popup-option-arrow {
+  width: 20px;
+  height: 20px;
+  color: var(--color-warm);
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+
+.popup-option:hover .popup-option-arrow {
+  transform: translateX(-4px);
+}
+
+.popup-warning {
+  display: flex;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  background: rgba(197, 48, 48, 0.08);
+  border-radius: var(--radius-md);
+  border-inline-start: 4px solid var(--color-danger);
+  margin-block-end: var(--space-md);
+}
+
+.popup-warning svg {
+  width: 24px;
+  height: 24px;
+  color: var(--color-danger);
+  flex-shrink: 0;
+}
+
+.popup-warning p {
+  font-size: 0.9rem;
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+.popup-warning strong {
+  font-weight: 600;
+}
+
+.popup-extras {
+  text-align: center;
+  padding: var(--space-md);
+  background: var(--color-cream);
+  border-radius: var(--radius-md);
+}
+
+.popup-extras p {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+  line-height: 1.6;
+}
+
+.popup-extras a {
+  color: var(--color-accent);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.popup-extras a:hover {
+  color: var(--color-text);
+}
+
 /* Reveal Animation */
 .reveal {
   opacity: 0;
@@ -996,3 +1350,8 @@ button:focus-visible {
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
+
+/* Body scroll lock when popup is open */
+body.popup-open {
+  overflow: hidden;
+}