body { transition: background-color 0.4s ease, color 0.4s ease; overflow-x: hidden; background-color: #f8fafc; color: #1e293b; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #E50914 !important; }

/* إخفاء أيقونة الصورة المكسورة */
img { color: transparent; text-indent: -9999px; }
img::before { content: ""; display: block; background: transparent; }

#scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 2px; background: #E50914; z-index: 9999; }

.bg-pattern {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; pointer-events: none;
    background-image: url('/img/basha logo2.png'); background-size: 800px; background-repeat: repeat;
    opacity: 0.04; filter: grayscale(1) invert(1);
}

.basha-card { 
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; overflow: hidden; 
}
.basha-card:hover { transform: translateY(-5px); border-color: #E50914; box-shadow: 0 10px 40px rgba(229, 9, 20, 0.1); }

/* الأجهزة */
.mockup-container { position: relative; width: 90%; max-width: 600px; margin: 0 auto; }
.mockup-laptop { width: 100%; aspect-ratio: 16/10; border-radius: 12px 12px 0 0; border: 4px solid #1f1f1f; background: #000; overflow: hidden; position: relative; z-index: 10; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.mockup-laptop-base { width: 110%; height: 10px; background: linear-gradient(to bottom, #d1d5db, #94a3b8); border-radius: 0 0 10px 10px; position: absolute; bottom: -10px; left: -5%; z-index: 9; }
.mockup-phone { position: absolute; bottom: -5%; right: -5%; z-index: 20; background: #000; overflow: hidden; box-shadow: -15px 15px 30px rgba(0,0,0,0.3); width: 25%; aspect-ratio: 1/2; border-radius: 1.5rem; border: 4px solid #111; }
.mockup-phone::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 12px; background: #111; border-radius: 0 0 8px 8px; z-index: 21; }

/* ========= قسم جواكر: تصميم البينتو (Bento Grid) السليم ========= */
.jawaker-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; position: relative; z-index: 20; width: 100%; max-width: 500px; margin: 0 auto; }
.bento-main { grid-column: span 2; background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%); border: 2px solid #ffe4e6; border-radius: 1.5rem; padding: 2rem; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; box-shadow: 0 15px 35px rgba(229, 9, 20, 0.08); transition: all 0.3s ease; }
.bento-main:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(229, 9, 20, 0.15); border-color: #E50914; }
.bento-main::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(229,9,20,0.05) 0%, transparent 70%); animation: pulseGlow 4s infinite alternate; pointer-events: none; }
.bento-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1.2rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; box-shadow: 0 10px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; position: relative; }
.bento-item:hover { transform: translateY(-5px); border-color: #E50914; box-shadow: 0 15px 30px rgba(229, 9, 20, 0.1); }
.bento-item img { height: 65px; width: auto; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1)); transition: transform 0.3s ease; }
.bento-item:hover img { transform: scale(1.15) rotate(5deg); }
.bento-title { font-weight: 900; font-size: 1rem; color: #1e293b; }
.bento-subtitle { font-size: 0.7rem; font-weight: 800; color: #E50914; background: #fff1f2; padding: 0.25rem 0.75rem; border-radius: 1rem; letter-spacing: 0.5px; }

/* الشريط اللانهائي */
.marquee-wrapper { display: flex; overflow: hidden; width: 100%; gap: 1.5rem; position: relative; padding: 10px 0; }
.marquee-track-right { display: flex; flex-shrink: 0; min-width: 100%; gap: 1.5rem; animation: scrollRight 50s linear infinite; align-items: center; justify-content: space-around; }
.marquee-track-left { display: flex; flex-shrink: 0; min-width: 100%; gap: 1.5rem; animation: scrollLeft 50s linear infinite; align-items: center; justify-content: space-around; }

@keyframes scrollRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.product-rect { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 1rem; min-width: 220px; }
.product-icon-rect { width: 45px; height: 45px; object-fit: cover; border-radius: 10px; }

.code-terminal { border-radius: 12px; overflow: hidden; background: #010101; border: 1px solid rgba(229,9,20,0.2); position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.terminal-header { background: #0A0A0A; padding: 10px; display: flex; align-items: center; border-bottom: 1px solid #1f1f1f; gap: 8px; }
.code-body { padding: 20px; font-family: monospace; font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.8; overflow-x: auto; }

.review-box { width: 350px; padding: 24px; border-radius: 1.5rem; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.quote-icon { position: absolute; top: 16px; left: 16px; font-size: 40px; opacity: 0.05; color: #000; }

.payment-card-gold { padding: 20px; display: flex; align-items: center; gap: 20px; border: 2px solid #ffe8e88a; border-radius: 1rem; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.211) 0%, rgba(255, 255, 255, 0.687) 100%); transition: transform 0.3s ease; width: 100%; max-width: 250px; justify-content: center; }
.payment-card-gold:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(107, 0, 0, 0.106); }
.payment-icon-lg { height: 40px; width: auto; object-fit: contain; }