Fix screenshot carousel — wider items + 3x copies for seamless loop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/css/home.css

@@ -119,7 +119,7 @@
 
 @keyframes scroll-track {
   from { transform: translateX(0); }
-  to { transform: translateX(-50%); }
+  to { transform: translateX(-33.333%); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -128,7 +128,7 @@
 
 .product-showcase__item {
   flex-shrink: 0;
-  width: clamp(280px, 35vw, 420px);
+  width: clamp(320px, 40vw, 520px);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--bg-surface);

public/index.html

@@ -94,7 +94,31 @@
           <img src="screenshots/app/invoices.png" alt="الفواتير" loading="lazy">
           <span class="product-showcase__caption">الفواتير</span>
         </div>
-        <!-- Duplicate for seamless loop -->
+        <!-- Duplicate x2 for seamless loop on wide screens -->
+        <div class="product-showcase__item">
+          <img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">مكتب الاستقبال</span>
+        </div>
+        <div class="product-showcase__item">
+          <img src="screenshots/app/participants-list.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">المشتركين</span>
+        </div>
+        <div class="product-showcase__item">
+          <img src="screenshots/app/weekly-schedule.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">الجدول الأسبوعي</span>
+        </div>
+        <div class="product-showcase__item">
+          <img src="screenshots/app/financial-overview.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">النظرة المالية</span>
+        </div>
+        <div class="product-showcase__item">
+          <img src="screenshots/app/attendance.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">الحضور</span>
+        </div>
+        <div class="product-showcase__item">
+          <img src="screenshots/app/invoices.png" alt="" loading="lazy">
+          <span class="product-showcase__caption">الفواتير</span>
+        </div>
         <div class="product-showcase__item">
           <img src="screenshots/app/reception-desk.png" alt="" loading="lazy">
           <span class="product-showcase__caption">مكتب الاستقبال</span>