/* ========================================= */
/* 1. إعدادات الخطوط (Cairo)                 */
/* ========================================= */
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-700.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-900.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cairo'; src: url('./fonts/cairo-v31-arabic_latin-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

* { font-family: 'Cairo', sans-serif !important; }
 
/* ========================================= */
/* 2. التنسيقات الأساسية للصفحة (Base Styles) */
/* ========================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
} 
     
html, body {
    background-color: #0B1320 !important;
    margin: 0; 
    padding: 0; 
    scroll-behavior: smooth; 
}  
 
/* ========================================= */
/* 3. حركات قسم الهيرو (العدادات والنبض)        */
/* ========================================= */
@keyframes gaugeFill { 0% { stroke-dashoffset: 125; } 100% { stroke-dashoffset: 10; } }
@keyframes gaugeSweep { 0% { transform: rotate(-90deg); } 100% { transform: rotate(65deg); } }
@keyframes clockFill { 0% { stroke-dashoffset: 264; } 100% { stroke-dashoffset: 66; } }
@keyframes clockTick { 0% { transform: rotate(90deg); } 100% { transform: rotate(450deg); } }
@keyframes circleDraw { 0% { stroke-dashoffset: 251; } 100% { stroke-dashoffset: 60; } }
@keyframes shieldBeat { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(59,130,246,0)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(59,130,246,0.8)); } }

@keyframes smoothTextReveal { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }
.hero-text-reveal { animation: smoothTextReveal 1.2s ease-out forwards; }

.hero-glass-card { transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; }
.hero-glass-card::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: skewX(-25deg); transition: all 0.7s ease-in-out; z-index: 1; }
.hero-glass-card:hover { transform: translateY(-12px); background-color: rgba(30, 41, 59, 0.75) !important; border-color: rgba(255, 255, 255, 0.2) !important; z-index: 10; }
.hero-glass-card:hover::after { left: 200%; }
.hero-glass-card svg { transition: transform 0.4s ease, filter 0.4s ease; }
.hero-glass-card:hover svg { transform: scale(1.15); filter: drop-shadow(0 0 12px currentColor); }

.anim-gauge-fill { animation: gaugeFill 2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both; }
.anim-gauge-sweep { animation: gaugeSweep 2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both; }
.anim-clock-fill { animation: clockFill 2s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both; }
.anim-clock-tick { transform: rotate(90deg); animation: clockTick 10s steps(60, end) 1.8s infinite; }
.anim-circle-draw { animation: circleDraw 2s cubic-bezier(0.4, 0, 0.2, 1) 2.2s both; }
.anim-shield-beat { animation: shieldBeat 2s infinite ease-in-out; }

/* ========================================= */
/* 4. حركات قسم "ما يميزنا" و "آلية العمل"      */
/* ========================================= */
@keyframes stampEffect { 0% { opacity: 0; transform: scale(2.0); filter: blur(2px); } 40% { opacity: 1; transform: scale(0.9); filter: blur(0); } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
.anim-stamp { opacity: 0; transform: scale(2.0); }
.is-visible .anim-stamp { animation: stampEffect 1.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards; }

@keyframes textFocusGuide { 0%, 100% { opacity: 0.4; transform: translateX(0); background-image: linear-gradient(to left, rgba(245, 158, 11, 0) 0%, transparent 100%); border-right-color: rgba(245, 158, 11, 0); } 5%, 20% { opacity: 1; transform: translateX(-6px); background-image: linear-gradient(to left, rgba(245, 158, 11, 0.15) 0%, transparent 100%); border-right-color: rgba(245, 158, 11, 0.8); } 25% { opacity: 0.4; transform: translateX(0); background-image: linear-gradient(to left, rgba(245, 158, 11, 0) 0%, transparent 100%); border-right-color: rgba(245, 158, 11, 0); } }
.anim-text-focus { animation: textFocusGuide 12.5s infinite ease-in-out; animation-play-state: paused; will-change: transform, opacity; padding: 4px 12px 4px 4px; margin-right: -8px; border-right: 2px solid transparent; border-radius: 8px 0 0 8px; }
.start-anim .anim-text-focus { animation-play-state: running; }

@keyframes readGuideDrop { 0%, 100% { transform: translateY(-8px); opacity: 0.2; border-color: rgba(245, 158, 11, 0.1); background-color: rgba(245, 158, 11, 0.05); box-shadow: none; } 5%, 20% { transform: translateY(0); opacity: 1; border-color: rgba(245, 158, 11, 0.8); background-color: rgba(245, 158, 11, 0.3); box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4); } 25% { transform: translateY(-8px); opacity: 0.2; border-color: rgba(245, 158, 11, 0.1); background-color: rgba(245, 158, 11, 0.05); box-shadow: none; } }
.anim-read-guide { animation: readGuideDrop 12.5s infinite ease-in-out; will-change: transform, opacity; animation-play-state: paused; }
.start-anim .anim-read-guide { animation-play-state: running; }

@keyframes badgePulseAlert { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6); transform: scale(1); } 50% { box-shadow: 0 0 0 15px rgba(20, 184, 166, 0); transform: scale(1.05); } }
.anim-badge-alert { animation: badgePulseAlert 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes bounceDownHint { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(6px); } }
.anim-bounce-down { animation: bounceDownHint 1.5s infinite ease-in-out; }

@keyframes stepNumFill { 0% { background-color: #0B1320; color: #14B8A6; transform: scale(1) rotate(0deg); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); } 50% { transform: scale(1.2) rotate(-10deg); box-shadow: 0 0 25px rgba(20, 184, 166, 0.8); background-color: #14B8A6; color: #0B1320; border-color: #14B8A6; } 100% { background-color: #14B8A6; color: #0B1320; transform: scale(1) rotate(0deg); box-shadow: 0 0 15px rgba(20, 184, 166, 0.2); border-color: #14B8A6; } }
.anim-step-fill { background-color: #0B1320; color: #14B8A6; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); animation: stepNumFill 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-play-state: paused; will-change: transform, background-color, box-shadow; }
.start-steps-anim .anim-step-fill { animation-play-state: running; }

/* ========================================= */
/* 5. حركات قسم "معايير الثقة والتميز"       */
/* ========================================= */
@keyframes certificateGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.4)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.9)); } }
.anim-certificate { animation: certificateGlow 3.5s infinite ease-in-out; }

@keyframes drawMaskCheckOnce { 0% { stroke-dashoffset: 24; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.anim-check-mask { stroke-dasharray: 24; stroke-dashoffset: 24; opacity: 0; }
.play-trust-anim .anim-check-mask { animation: drawMaskCheckOnce 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards; }

.zap-sides { stroke-dasharray: 6; stroke-dashoffset: 6; opacity: 0; }
.zap-frame { opacity: 0.2; }
.zap-core { opacity: 0.1; transform-origin: center; }
.group:hover .zap-sides, .play-trust-anim .zap-sides { animation: electricEnter 0.6s ease-in 1.0s forwards; }
.group:hover .zap-frame, .play-trust-anim .zap-frame { animation: framePowerUp 0.5s ease-out 1.4s forwards; }
.group:hover .zap-core, .play-trust-anim .zap-core { animation: corePulseWork 0.8s ease-in-out 1.9s infinite alternate; }
@keyframes electricEnter { 0% { stroke-dashoffset: 6; opacity: 1; filter: drop-shadow(0 0 5px #60a5fa); } 100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 2px #3b82f6); } }
@keyframes framePowerUp { 0% { opacity: 0.2; filter: none; stroke: currentColor; } 40% { opacity: 1; filter: drop-shadow(0 0 12px #60a5fa); stroke: #93c5fd; } 100% { opacity: 0.8; filter: drop-shadow(0 0 4px #3b82f6); stroke: currentColor; } }
@keyframes corePulseWork { 0% { opacity: 0.3; transform: scale(0.95); fill: currentColor; filter: none; } 100% { opacity: 1; transform: scale(1.15); fill: #60a5fa; filter: drop-shadow(0 0 10px #93c5fd); } }

.write-line-1, .write-line-2, .write-line-3, .write-line-4 { stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.play-trust-anim .write-line-1 { animation: writeLine 4s ease-out 1.5s forwards; }
.play-trust-anim .write-line-2 { animation: writeLine 4s ease-out 2.5s forwards; }
.play-trust-anim .write-line-3 { animation: writeLine 4s ease-out 3.5s forwards; }
.play-trust-anim .write-line-4 { animation: writeLine 4s ease-out 4.5s forwards; }
@keyframes writeLine { 0% { stroke-dashoffset: 20; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

@keyframes reportPulseGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(165, 180, 252, 0)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(165, 180, 252, 0.6)); } }
.play-trust-anim .anim-report-icon { animation: reportPulseGlow 2s ease-in-out 8.5s infinite; }

@keyframes dropFallFade { 0% { transform: translateY(-6px) scale(0.8); opacity: 0; } 30% { transform: translateY(0px) scale(1); opacity: 1; } 80% { transform: translateY(8px) scale(0.9); opacity: 1; } 100% { transform: translateY(14px) scale(0.5); opacity: 0; } }
.the-droplet { opacity: 0; transform-origin: center; }
.play-trust-anim .the-droplet { animation: dropFallFade 1.5s cubic-bezier(0.4, 0, 0.2, 1) 2.0s infinite; }

/* ========================================= */
/* 6. تأثيرات عامة ومائية                    */
/* ========================================= */
@keyframes floatWater { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; filter: blur(40px); } 50% { transform: translate(-48%, -48%) scale(1.15); opacity: 0.7; filter: blur(60px); } }
.anim-water-bg { animation: floatWater 8s ease-in-out infinite; }
.anim-water-bg-2 { animation: floatWater 10s ease-in-out infinite reverse; }

.reveal-item { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

.keyword-highlight { position: relative; color: #818cf8; font-weight: 900; transition: color 0.3s ease; cursor: pointer; white-space: nowrap; }
.keyword-highlight::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -2px; left: 0; background-color: #2dd4bf; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease-out; }
.keyword-highlight:hover { color: #2dd4bf; text-shadow: 0 0 10px rgba(45, 212, 191, 0.5); }
.keyword-highlight:hover::after { transform: scaleX(1); transform-origin: left; }

@keyframes arrowBounce { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.btn-call-group:hover .shake-arrow { animation: arrowBounce 0.5s ease-in-out infinite; }

@keyframes pulseBadgeMagnetic { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
.anim-pulse-magnetic { animation: pulseBadgeMagnetic 2s infinite; }

@keyframes forceScrollDown { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(6px); opacity: 0.8; } 60% { transform: translateY(3px); opacity: 0.9; } }
.anim-force-down { animation: forceScrollDown 2s infinite; }

/* ========================================= */
/* 7. تحسينات قسم "الأسطح"                   */
/* ========================================= */
@keyframes thermalGlowBackground { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.anim-thermal-glow-bg { background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.4) 50%, rgba(245, 158, 11, 0.05) 100%); background-size: 200% auto; animation: thermalGlowBackground 3s linear infinite; }

@keyframes bounceShieldIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) scale(1.1); filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.8)); } }
.anim-bounce-shield-icon { animation: bounceShieldIcon 2s ease-in-out infinite; }

@keyframes rainArrowDrop { 0% { transform: translateY(-5px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(6px); opacity: 1; } 70% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.anim-rain-arrow-drop { animation: rainArrowDrop 1.5s infinite; }

.roof-card-hover { transition: all 0.4s ease-out; }
.roof-card-hover:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.25); border-color: rgba(245, 158, 11, 0.5); }
@keyframes pulseRoofDot { 0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,0.8); transform: scale(1); } 50% { box-shadow: 0 0 25px rgba(245,158,11,1); transform: scale(1.2); } }
.roof-card-hover:hover .roof-dot-pulse { animation: pulseRoofDot 1.5s infinite; } 

@keyframes roofPingWave { 0% { transform: scale(0.8); opacity: 0.9; } 60%, 100% { transform: scale(4.5); opacity: 0; } }
@keyframes roofCorePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(245,158,11,0.6); background-color: #f59e0b; } 20% { transform: scale(1.35); box-shadow: 0 0 25px rgba(250,204,21,1); background-color: #fbbf24; } }
.anim-roof-ping { animation: roofPingWave 4.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.anim-roof-core { animation: roofCorePulse 4.5s ease-in-out infinite; }

@keyframes sunWaveGlow { 0%, 100% { transform: scale(0.9) rotate(0deg); filter: drop-shadow(0 0 2px rgba(245,158,11,0.3)); color: #d97706; } 15% { transform: scale(1.4) rotate(90deg); filter: drop-shadow(0 0 20px rgba(250,204,21,1)); color: #fde047; } 30% { transform: scale(0.9) rotate(180deg); filter: drop-shadow(0 0 2px rgba(245,158,11,0.3)); color: #d97706; } }
.anim-sun-wave { animation: sunWaveGlow 4.5s ease-in-out infinite; transform-origin: center; }

@keyframes badgeShimmerFlow { 0% { transform: translateX(-150%) skewX(-15deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(150%) skewX(-15deg); opacity: 0; } }
.anim-badge-shimmer { position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); animation: badgeShimmerFlow 2s infinite; z-index: 0; }

@keyframes arrowForceDown { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(8px); opacity: 1; filter: drop-shadow(0 5px 10px rgba(6,182,212,1)); } }
.anim-scroll-arrow { animation: arrowForceDown 1.5s ease-in-out infinite; }

/* ========================================= */
/* 8. تأثيرات متفرقة (النبض، المسح، إلخ)     */
/* ========================================= */
@keyframes iconSubtlePulse { 0%, 100% { box-shadow: 0 0 15px rgba(20,184,166,0.2); transform: scale(1); border-color: rgba(20,184,166,0.3); } 50% { box-shadow: 0 0 25px rgba(20,184,166,0.7), inset 0 0 8px rgba(20,184,166,0.2); transform: scale(1.05); border-color: rgba(20,184,166,0.8); } }
.anim-list-icon { animation: iconSubtlePulse 3s ease-in-out infinite; }

/* ========================================= */
/* حركة ساعة خطوات العمل (آلية العمل) */
/* ========================================= */
.step-clock-wrapper .clock-circle { stroke-dasharray: 101; stroke-dashoffset: 101; opacity: 0; }
.start-steps-anim .step-card .clock-circle { animation: clockDraw 7s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: var(--delay); }
@keyframes clockDraw { 0% { stroke-dashoffset: 101; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

.step-clock-wrapper .clock-bg { transform: scale(0); opacity: 0; }
.start-steps-anim .step-card .clock-bg { animation: clockBgFill 0.6s ease-out forwards; animation-delay: calc(var(--delay) + 6.8s); }
@keyframes clockBgFill { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 15px rgba(20,184,166,0.6); } }

.step-clock-wrapper .clock-num { color: #14B8A6; }
.start-steps-anim .step-card .clock-num { animation: clockNumColor 0.6s ease-out forwards; animation-delay: calc(var(--delay) + 6.8s); }
@keyframes clockNumColor { 100% { color: #0B1320; } }

.start-steps-anim .step-card { animation: stepCardHighlight 1.5s ease-out forwards; animation-delay: calc(var(--delay) + 6.8s); }
@keyframes stepCardHighlight { 0% { border-color: rgba(255,255,255,0.05); background-color: rgba(30,41,59,0.5); transform: translateX(0); } 30% { border-color: rgba(20,184,166,0.5); background-color: rgba(20,184,166,0.05); transform: translateX(-8px); } 100% { border-color: rgba(20,184,166,0.2); background-color: rgba(30,41,59,0.5); transform: translateX(0); } }
    
/* ========================================= */
/* تأثيرات الرحلة التفاعلية (Customer Journey) */
/* ========================================= */
.journey-step { transition: opacity 0.5s ease; opacity: 0.35; filter: grayscale(90%); }
.journey-step .journey-text-card { transform: translateX(-15px); }

.journey-step.journey-active { opacity: 1; filter: grayscale(0%); }
.journey-step.journey-active .journey-text-card { transform: translateX(0); background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.journey-step.journey-active .journey-icon-box { transform: scale(1.15); background-color: #0B1320; }
.journey-step.journey-active .journey-icon-svg { transform: rotate(12deg) scale(1.1); }

.journey-step-1.journey-active .journey-icon-box { border-color: #14B8A6; box-shadow: 0 0 30px rgba(20,184,166,0.6); }
.journey-step-1.journey-active h3 { color: #14B8A6; }

.journey-step-2.journey-active .journey-icon-box { border-color: #A855F7; box-shadow: 0 0 30px rgba(168,85,247,0.6); }
.journey-step-2.journey-active h3 { color: #A855F7; }

.journey-step-3.journey-active .journey-icon-box { border-color: #3B82F6; box-shadow: 0 0 30px rgba(59,130,246,0.6); }
.journey-step-3.journey-active h3 { color: #3B82F6; }

.journey-step-4.journey-active .journey-icon-box { border-color: #34D399; box-shadow: 0 0 30px rgba(52,211,153,0.6); }
.journey-step-4.journey-active h3 { color: #34D399; }

/* ========================================= */
/* حركة نبض الأيقونات في قائمة المميزات */
/* ========================================= */
.feature-icon-wrapper { animation: pulse-icon 2s infinite ease-in-out; }
.group:hover .feature-icon-wrapper { animation: none; background-color: rgba(16, 185, 129, 0.2); box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
@keyframes pulse-icon { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* ========================================= */
/* سكشن المسابح                              */
/* ========================================= */
.liquid-wave { position: absolute; left: 50%; width: 1000px; height: 1000px; margin-left: -500px; transition: top 0.7s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease; will-change: transform, top; }
.wave-back { top: 85%; border-radius: 46%; background: rgba(59, 130, 246, 0.15); animation: liquidSpin 8s linear infinite; }
.wave-front { top: 90%; border-radius: 43%; background: rgba(6, 182, 212, 0.2); animation: liquidSpin 12s linear infinite reverse; }

.pool-water-card:hover .wave-back { top: 50%; background: rgba(59, 130, 246, 0.25); }
.pool-water-card:hover .wave-front { top: 55%; background: rgba(6, 182, 212, 0.3); }

@keyframes liquidSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pool-water-card:hover .icon-floater { animation: float 2.5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ========================================= */
/* زر الاتصال العائم                          */
/* ========================================= */
@keyframes livePing1 { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2.5); opacity: 0; } }
@keyframes phoneRing1 { 0%, 10% { transform: rotate(0); } 2%, 6% { transform: rotate(-15deg); } 4%, 8% { transform: rotate(15deg); } 100% { transform: rotate(0); } }
@keyframes ultimateGenieIn { 0% { opacity: 0; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1) rotate(-30deg); box-shadow: 0 0 0 rgba(0,0,0,0); } 40% { opacity: 1; transform: translate3d(calc(-50% - 25px), -35px, 0) scale(1.1, 0.9) rotate(-10deg); box-shadow: 0 30px 50px rgba(0,0,0,0.5); } 65% { transform: translate3d(-50%, 8px, 0) scale(0.95, 1.05) rotate(3deg); box-shadow: 0 10px 15px rgba(0,0,0,0.4); } 85% { transform: translate3d(-50%, -4px, 0) scale(1.02, 0.98) rotate(-1deg); } 100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1, 1) rotate(0deg); box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 25px rgba(34, 197, 94, 0.15); } }
@keyframes ultimateGenieOut { 0% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1, 1) rotate(0deg); box-shadow: 0 15px 35px rgba(0,0,0,0.4); } 100% { opacity: 0; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1) rotate(-30deg); box-shadow: 0 0 0 rgba(0,0,0,0); } }

.live-dot-anim { animation: livePing1 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.phone-ring-anim { animation: phoneRing1 3s infinite; }

.smart-btn-wrapper { position: fixed !important; bottom: 30px !important; left: 0 !important; width: 100% !important; height: 54px !important; z-index: 9999999 !important; pointer-events: none !important; }
.smart-popup-btn { box-sizing: border-box !important; position: absolute !important; top: 0 !important; left: 50% !important; display: flex; direction: rtl; align-items: center; background: #0B1320; border: 1px solid #22c55e; border-radius: 50px; text-decoration: none; height: 54px; width: max-content; max-width: 90vw !important; padding: 0 18px 0 6px; transform-origin: center center; opacity: 0; pointer-events: none !important; transform: translate3d(calc(-50vw + 20px), 100px, 0) scale(0.1, 0.1); }
.smart-popup-btn.is-visible { pointer-events: auto !important; animation: ultimateGenieIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.smart-popup-btn.is-hidden { pointer-events: none !important; animation: ultimateGenieOut 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.smart-dynamic-icon { min-width: 44px !important; height: 44px !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0 !important; }

    
  
        .teal-glow-badge {
            box-shadow: 0 0 15px rgba(20, 184, 166, 0.4);
            animation: badgePulse 2.5s infinite;
        }
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 0 15px rgba(20, 184, 166, 0.4); }
            50% { box-shadow: 0 0 25px rgba(20, 184, 166, 0.7); border-color: rgba(20, 184, 166, 0.7); }
        }
        
        .blog-card-hover { transition: all 0.3s ease; }
        .blog-card-hover:hover {
            border-color: rgba(20, 184, 166, 0.5);
            box-shadow: 0 10px 30px rgba(20, 184, 166, 0.15);
        }

        .custom-swiper-slide {
            width: 75vw !important; 
            max-width: 280px !important;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important;
            will-change: transform, opacity;
        }
        @media (min-width: 640px) {
            .custom-swiper-slide { max-width: 320px !important; }
        }
        @media (min-width: 1024px) {
            .custom-swiper-slide { max-width: 350px !important; }
        }

        .swiper-slide:not(.swiper-slide-active) {
            opacity: 0.45 !important;
            transform: scale(0.85) !important;
        }
        
        .swiper-slide-active {
            opacity: 1 !important;
            transform: scale(1) !important;
            z-index: 10 !important;
            box-shadow: 0 10px 40px rgba(20, 184, 166, 0.15) !important;
        }







        .custom-faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
        }

        /* 1. إجبار الصندوق على ارتفاع محدد وتفعيل السكرول الداخلي فقط */
        #smart-faq-container {
            max-height: 350px !important; /* تم زيادة الارتفاع قليلاً ليتناسب مع 30 سؤال */
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-left: 10px;
            padding-right: 5px;
        }

        /* 2. حصر تصميم شريط التمرير داخل هذا الصندوق فقط لمنع تسربه للصفحة بالكامل */
        #smart-faq-container::-webkit-scrollbar {
            width: 6px !important;
        }
        #smart-faq-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05) !important;
            border-radius: 10px !important;
        }
        #smart-faq-container::-webkit-scrollbar-thumb {
            background: rgba(20, 184, 166, 0.6) !important; /* لون التيل */
            border-radius: 10px !important;
        }
        #smart-faq-container::-webkit-scrollbar-thumb:hover {
            background: rgba(20, 184, 166, 1) !important;
        }




/* إزالة الخط السفلي الافتراضي من جميع الروابط في الموقع */
a {
    text-decoration: none !important;
}

/* ========================================= */
/* 10. حماية المحتوى (منع النسخ والسرقة)     */
/* ========================================= */
body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
img { pointer-events: none; }