AI update: הוסף לפני תג הסגירה </body> קטע קוד (HTML+CSS+JS וניל, ללא ספריות חיצוניות) שיוצר כפתור פעולה צף (floating action button

index.html

@@ -361,82 +361,490 @@
     </div>
   </footer>
 
-  <!-- Floating CTA Button -->
+  <!-- Pricing FAB and Modal -->
-  <button class="floating-cta" id="floating-cta" aria-label="פתיחת חלון רכישה">
+  <button class="pricing-fab" id="pricing-fab" aria-label="פתיחת חלון בחירת חבילה">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <span class="pricing-fab-text">רוצים אתר כזה? לחצו כאן ????</span>
-      <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="pricing-modal-overlay" id="pricing-modal-overlay" aria-hidden="true">
-  <div class="popup-overlay" id="popup-overlay" aria-hidden="true">
+    <div class="pricing-modal" role="dialog" aria-modal="true" aria-labelledby="pricing-modal-title">
-    <div class="popup" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+      <button class="pricing-modal-close" id="pricing-modal-close" aria-label="סגירת חלון">
-      <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="pricing-modal-content">
-        <div class="popup-icon">
+        <h2 id="pricing-modal-title" class="pricing-modal-title">בחרו את החבילה המתאימה לכם</h2>
-          <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">
+        <div class="pricing-cards">
-          <a href="#" class="popup-option popup-option-code">
+          <div class="pricing-card">
-            <div class="popup-option-icon">
+            <div class="pricing-card-header">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <h3>קוד האתר בלבד</h3>
-                <path d="M16 18l6-6-6-6"/>
+              <div class="pricing-card-price">
-                <path d="M8 6l-6 6 6 6"/>
+                <span class="pricing-currency">₪</span>
+                <span class="pricing-amount">1,490</span>
+              </div>
+            </div>
+            <ul class="pricing-card-features">
+              <li>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path d="M20 6L9 17l-5-5"/>
+                </svg>
+                <span>קבצי האתר המלאים</span>
+              </li>
+              <li>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path d="M20 6L9 17l-5-5"/>
+                </svg>
+                <span>קוד נקי ומתועד</span>
+              </li>
+              <li>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path d="M20 6L9 17l-5-5"/>
+                </svg>
+                <span>ללא אחסון — תארחו בעצמכם</span>
+              </li>
+            </ul>
+            <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=sarit&plan=code" target="_blank" rel="noopener" class="pricing-card-btn">
+              המשך לתשלום
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M5 12h14M12 5l7 7-7 7"/>
               </svg>
+            </a>
+          </div>
+
+          <div class="pricing-card pricing-card-featured">
+            <div class="pricing-card-badge">מומלץ</div>
+            <div class="pricing-card-header">
+              <h3>חבילה מלאה</h3>
+              <div class="pricing-card-price">
+                <span class="pricing-currency">₪</span>
+                <span class="pricing-amount">2,390</span>
+              </div>
             </div>
-            <div class="popup-option-content">
+            <ul class="pricing-card-features">
-              <h3>הורדת קוד המקור</h3>
+              <li>
-              <p>קבלת כל קבצי האתר לשימושך</p>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-            </div>
+                  <path d="M20 6L9 17l-5-5"/>
-            <svg class="popup-option-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                </svg>
-              <path d="M19 12H5M12 19l-7-7 7-7"/>
+                <span>קוד + אחסון לשנה</span>
-            </svg>
+              </li>
-          </a>
+              <li>
-          <a href="#" class="popup-option popup-option-full">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-            <div class="popup-option-icon">
+                  <path d="M20 6L9 17l-5-5"/>
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                </svg>
-                <rect x="2" y="3" width="20" height="14" rx="2"/>
+                <span>דומיין בהתאמה אישית</span>
-                <path d="M8 21h8M12 17v4"/>
+              </li>
+              <li>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path d="M20 6L9 17l-5-5"/>
+                </svg>
+                <span>תיבת מייל עסקית</span>
+              </li>
+            </ul>
+            <a href="https://nwk3ywktc2n8ttnibdhgonlx.sites.clientscenter.co.il/?biz=sarit&plan=full" target="_blank" rel="noopener" class="pricing-card-btn pricing-card-btn-featured">
+              המשך לתשלום
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                <path d="M5 12h14M12 5l7 7-7 7"/>
               </svg>
-            </div>
+            </a>
-            <div class="popup-option-content">
+          </div>
-              <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>
 
+  <style>
+    /* Pricing FAB */
+    .pricing-fab {
+      position: fixed;
+      bottom: var(--space-lg);
+      inset-inline-end: var(--space-md);
+      z-index: 85;
+      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: none;
+      border-radius: var(--radius-full);
+      box-shadow: 0 4px 20px rgba(139, 105, 20, 0.4);
+      font-family: var(--font-body);
+      font-weight: 500;
+      font-size: 0.95rem;
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      animation: pricing-fab-pulse 2s ease-in-out infinite;
+    }
+
+    .pricing-fab:hover {
+      transform: translateY(-3px) scale(1.02);
+      box-shadow: 0 8px 30px rgba(139, 105, 20, 0.5);
+    }
+
+    .pricing-fab:focus-visible {
+      outline: 3px solid var(--color-warm);
+      outline-offset: 3px;
+    }
+
+    .pricing-fab-text {
+      white-space: nowrap;
+    }
+
+    @keyframes pricing-fab-pulse {
+      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);
+      }
+    }
+
+    /* Pricing Modal Overlay */
+    .pricing-modal-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 160;
+      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 0.2s ease, visibility 0.2s ease;
+    }
+
+    .pricing-modal-overlay.is-visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* Pricing Modal */
+    .pricing-modal {
+      position: relative;
+      width: 100%;
+      max-width: 720px;
+      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 0.4s ease;
+    }
+
+    .pricing-modal-overlay.is-visible .pricing-modal {
+      transform: scale(1) translateY(0);
+    }
+
+    .pricing-modal-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: none;
+      border-radius: 50%;
+      color: var(--color-text-light);
+      cursor: pointer;
+      transition: background 0.2s ease, color 0.2s ease;
+      z-index: 10;
+    }
+
+    .pricing-modal-close:hover {
+      background: var(--color-cream);
+      color: var(--color-text);
+    }
+
+    .pricing-modal-close:focus-visible {
+      outline: 2px solid var(--color-accent);
+      outline-offset: 2px;
+    }
+
+    .pricing-modal-close svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .pricing-modal-content {
+      padding: var(--space-xl);
+    }
+
+    .pricing-modal-title {
+      text-align: center;
+      font-size: clamp(1.25rem, 4vw, 1.5rem);
+      font-weight: 600;
+      color: var(--color-text);
+      margin-block-end: var(--space-lg);
+    }
+
+    /* Pricing Cards */
+    .pricing-cards {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+
+    @media (min-width: 600px) {
+      .pricing-cards {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--space-lg);
+      }
+    }
+
+    .pricing-card {
+      position: relative;
+      padding: var(--space-lg);
+      background: var(--color-bg);
+      border-radius: var(--radius-lg);
+      border: 2px solid transparent;
+      transition: border-color 0.2s ease, transform 0.2s ease;
+    }
+
+    .pricing-card:hover {
+      border-color: var(--color-warm);
+      transform: translateY(-4px);
+    }
+
+    .pricing-card-featured {
+      background: linear-gradient(135deg, rgba(201, 168, 124, 0.1) 0%, rgba(168, 181, 160, 0.1) 100%);
+      border-color: var(--color-accent);
+    }
+
+    .pricing-card-featured:hover {
+      border-color: var(--color-accent);
+    }
+
+    .pricing-card-badge {
+      position: absolute;
+      top: -12px;
+      inset-inline-start: 50%;
+      transform: translateX(50%);
+      padding: 4px 16px;
+      background: var(--color-accent);
+      color: var(--color-white);
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: var(--radius-full);
+    }
+
+    .pricing-card-header {
+      text-align: center;
+      margin-block-end: var(--space-md);
+      padding-block-end: var(--space-md);
+      border-block-end: 1px solid rgba(201, 168, 124, 0.3);
+    }
+
+    .pricing-card-header h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-block-end: var(--space-sm);
+    }
+
+    .pricing-card-price {
+      display: flex;
+      align-items: baseline;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .pricing-currency {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--color-text-light);
+    }
+
+    .pricing-amount {
+      font-size: 2.25rem;
+      font-weight: 600;
+      color: var(--color-accent);
+      line-height: 1;
+    }
+
+    .pricing-card-features {
+      list-style: none;
+      padding: 0;
+      margin: 0 0 var(--space-lg);
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+    }
+
+    .pricing-card-features li {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      font-size: 0.9rem;
+      color: var(--color-text-light);
+    }
+
+    .pricing-card-features svg {
+      width: 18px;
+      height: 18px;
+      color: var(--color-accent);
+      flex-shrink: 0;
+    }
+
+    .pricing-card-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-xs);
+      width: 100%;
+      padding: var(--space-sm) var(--space-md);
+      font-family: var(--font-body);
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: var(--color-text);
+      background: var(--color-white);
+      border: 2px solid var(--color-warm);
+      border-radius: var(--radius-md);
+      text-decoration: none;
+      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    }
+
+    .pricing-card-btn:hover {
+      background: var(--color-warm);
+      color: var(--color-white);
+      border-color: var(--color-warm);
+    }
+
+    .pricing-card-btn:focus-visible {
+      outline: 2px solid var(--color-accent);
+      outline-offset: 2px;
+    }
+
+    .pricing-card-btn svg {
+      width: 18px;
+      height: 18px;
+      transform: scaleX(-1);
+    }
+
+    .pricing-card-btn-featured {
+      background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warm) 100%);
+      color: var(--color-white);
+      border-color: transparent;
+    }
+
+    .pricing-card-btn-featured:hover {
+      background: linear-gradient(135deg, var(--color-text) 0%, #5a4d40 100%);
+      border-color: transparent;
+    }
+
+    /* Body scroll lock when pricing modal is open */
+    body.pricing-modal-open {
+      overflow: hidden;
+    }
+
+    /* Mobile adjustments */
+    @media (max-width: 599px) {
+      .pricing-fab {
+        padding: var(--space-xs) var(--space-sm);
+        font-size: 0.85rem;
+        bottom: var(--space-md);
+      }
+
+      .pricing-modal-content {
+        padding: var(--space-lg);
+      }
+
+      .pricing-card {
+        padding: var(--space-md);
+      }
+
+      .pricing-amount {
+        font-size: 1.75rem;
+      }
+    }
+  </style>
+
+  <script>
+    (function() {
+      'use strict';
+
+      var pricingFab = document.getElementById('pricing-fab');
+      var pricingModalOverlay = document.getElementById('pricing-modal-overlay');
+      var pricingModalClose = document.getElementById('pricing-modal-close');
+      var pricingModal = pricingModalOverlay ? pricingModalOverlay.querySelector('.pricing-modal') : null;
+
+      function openPricingModal() {
+        if (!pricingModalOverlay) return;
+        pricingModalOverlay.classList.add('is-visible');
+        pricingModalOverlay.setAttribute('aria-hidden', 'false');
+        document.body.classList.add('pricing-modal-open');
+        if (pricingModalClose) {
+          setTimeout(function() {
+            pricingModalClose.focus();
+          }, 100);
+        }
+      }
+
+      function closePricingModal() {
+        if (!pricingModalOverlay) return;
+        pricingModalOverlay.classList.remove('is-visible');
+        pricingModalOverlay.setAttribute('aria-hidden', 'true');
+        document.body.classList.remove('pricing-modal-open');
+        if (pricingFab) {
+          pricingFab.focus();
+        }
+      }
+
+      if (pricingFab) {
+        pricingFab.addEventListener('click', openPricingModal);
+      }
+
+      if (pricingModalClose) {
+        pricingModalClose.addEventListener('click', closePricingModal);
+      }
+
+      if (pricingModalOverlay) {
+        pricingModalOverlay.addEventListener('click', function(e) {
+          if (e.target === pricingModalOverlay) {
+            closePricingModal();
+          }
+        });
+      }
+
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && pricingModalOverlay && pricingModalOverlay.classList.contains('is-visible')) {
+          closePricingModal();
+        }
+      });
+
+      if (pricingModal) {
+        pricingModal.addEventListener('keydown', function(e) {
+          if (e.key !== 'Tab') return;
+          
+          var focusableElements = pricingModal.querySelectorAll(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          var firstElement = focusableElements[0];
+          var 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();
+            }
+          }
+        });
+      }
+    })();
+  </script>
+
   <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -116,97 +116,4 @@
     }, { 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

@@ -1062,276 +1062,6 @@ 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;