/* تم حذف @import لنقلها لملف HTML لتسريع التحميل */

:root {
    --neon-cyan: #00ffff;
    --neon-purple: #8b5cf6;
    --neon-pink: #ff0080;
    --neon-green: #00ff41;
    --neon-yellow: #ffff00;
    --neon-orange: #ff6600;
    --dark-bg: #0a0a0f;
    --darker-bg: #05050a;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --gradient-2: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-3: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --holographic: linear-gradient(45deg, #ff006e, #00f5ff, #8338ec, #ffbe0b);
    --warning: #f0ad4e;
}

html { font-size: 80%; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Tajawal', sans-serif; 
    background: var(--dark-bg); 
    color: white; 
    overflow-x: hidden; 
    cursor: none; 
    zoom: 0.8;
}

/* --- FIX: Header Placeholder to prevent Layout Shift (CLS) --- */
#header-placeholder { 
    width: 100%;
    min-height: 80px; /* حجز ارتفاع الهيدر للكمبيوتر */
    display: block;
    position: relative;
    z-index: 1000;
}

/* --- Store Buttons --- */
/* تعديل جذري: إلغاء الانميشن تماماً للظهور الفوري */
.store-buttons-wrapper { 
    display: flex !important; 
    justify-content: center; 
    gap: 1.5rem; 
    margin-top: 3rem; 
    flex-wrap: wrap; 
    /* تم حذف animation */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative; 
    z-index: 20; 
}

.store-btn-container { position: relative; overflow: hidden; border-radius: 16px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.store-btn-container:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }
.store-btn { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.8rem; text-decoration: none; color: white; min-width: 200px; direction: ltr; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,0.1); }
.google-play-style { background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%); border-color: rgba(255, 255, 255, 0.1); }
.google-play-style:hover { background: linear-gradient(135deg, #2d3436 0%, #000000 100%); border-color: var(--neon-cyan); }
.app-store-style { background: linear-gradient(135deg, #302b63 0%, #24243e 100%); border-color: rgba(255, 255, 255, 0.1); }
.app-store-style:hover { background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%); border-color: var(--neon-pink); }
.store-icon { width: 36px; height: 36px; fill: white; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
.store-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.store-text span:first-child { font-size: 0.75rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.5px; }
.store-text span:last-child { font-size: 1.25rem; font-weight: 800; font-family: 'Tajawal', sans-serif; }
.store-ribbon { position: absolute; top: 12px; right: -30px; transform: rotate(45deg); background: var(--neon-yellow); color: black; width: 100px; text-align: center; font-size: 0.7rem; font-weight: 800; padding: 3px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; letter-spacing: 0.5px; }

/* --- Custom Cursor --- */
.custom-cursor { position: fixed; width: 24px; height: 24px; background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: screen; transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan); animation: cursorPulse 2s ease-in-out infinite; }
.custom-cursor.hover { transform: scale(2); background: radial-gradient(circle, var(--neon-pink) 0%, var(--neon-purple) 50%, transparent 70%); box-shadow: 0 0 30px var(--neon-pink); animation: cursorHoverPulse 0.8s ease-in-out infinite; }
.cursor-trail { position: fixed; width: 6px; height: 6px; background: var(--neon-purple); border-radius: 50%; pointer-events: none; z-index: 9998; opacity: 0.8; animation: trailFadeOut 0.6s ease-out forwards; }
@keyframes cursorPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes cursorHoverPulse { 0%, 100% { opacity: 1; transform: scale(2); } 50% { opacity: 0.8; transform: scale(2.2); } }
@keyframes trailFadeOut { to { opacity: 0; transform: scale(0.3); } }

.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* --- Backgrounds & Particles --- */
.particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; pointer-events: none; }
.particle { position: absolute; border-radius: 50%; animation: floatEnhanced 12s infinite linear; opacity: 0.6; background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%); will-change: transform, opacity; }
.particle.purple { background: radial-gradient(circle, var(--neon-purple) 0%, transparent 70%); }
.particle.pink { background: radial-gradient(circle, var(--neon-pink) 0%, transparent 70%); }
.particle.green { background: radial-gradient(circle, var(--neon-green) 0%, transparent 70%); }
@keyframes floatEnhanced { 0% { transform: translateY(100vh) translateX(0) rotate(0deg) scale(0.5); opacity: 0; } 10% { opacity: 0.6; } 50% { transform: translateY(50vh) translateX(50px) rotate(180deg) scale(1); opacity: 0.8; } 90% { opacity: 0.6; } 100% { transform: translateY(-10vh) translateX(-30px) rotate(360deg) scale(0.3); opacity: 0; } }

.animated-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); z-index: -3; }
.animated-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 15% 25%, rgba(139, 92, 246, 0.4) 0%, transparent 50%), radial-gradient(circle at 85% 75%, rgba(255, 0, 128, 0.4) 0%, transparent 50%), radial-gradient(circle at 45% 60%, rgba(0, 255, 255, 0.3) 0%, transparent 50%); animation: bgShiftEnhanced 25s ease-in-out infinite; will-change: transform, filter; }
@keyframes bgShiftEnhanced { 0%, 100% { filter: hue-rotate(0deg) brightness(1) saturate(1.2); transform: scale(1) rotate(0deg); } 25% { filter: hue-rotate(90deg) brightness(1.3) saturate(1.5); transform: scale(1.08) rotate(1deg); } 50% { filter: hue-rotate(180deg) brightness(0.9) saturate(1.1); transform: scale(0.95) rotate(-0.5deg); } 75% { filter: hue-rotate(270deg) brightness(1.1) saturate(1.4); transform: scale(1.05) rotate(0.8deg); } }

/* --- Hero Section --- */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding-top: 50px; /* Reduced from 100px due to header placeholder */ }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(2px 2px at 40px 70px, rgba(0, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.7), transparent); background-repeat: repeat; background-size: 200px 100px; animation: twinkleStarsEnhanced 6s ease-in-out infinite; opacity: 0.8; z-index: 1; }
@keyframes twinkleStarsEnhanced { 0%, 100% { opacity: 0.8; transform: translateX(0); } 33% { opacity: 1.2; transform: translateX(2px); } 66% { opacity: 0.6; transform: translateX(-1px); } }
.hero-content { max-width: 900px; position: relative; z-index: 10; width: 100%; animation: heroContentFloat 8s ease-in-out infinite; }
@keyframes heroContentFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.hero h1 { font-family: 'Orbitron', monospace; font-size: 6rem; font-weight: 900; margin-bottom: 1rem; background: var(--holographic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; animation: textGlowEnhanced 4s ease-in-out infinite; background-size: 200% 200%; }
@keyframes textGlowEnhanced { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 20px rgba(255, 0, 110, 0.8)); transform: scale(1); } 50% { background-position: 0% 50%; filter: drop-shadow(0 0 25px rgba(131, 56, 236, 0.8)); transform: scale(1); } }
.hero p { font-size: 1.8rem; margin-bottom: 3rem; opacity: 0.9; font-weight: 300; animation: subtitleFloat 6s ease-in-out infinite 0.5s; }
@keyframes subtitleFloat { 0%, 100% { transform: translateY(0px); opacity: 0.9; } 50% { transform: translateY(-5px); opacity: 1; } }

.hero-logo-image:hover { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 25px 50px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 80px rgba(255, 0, 128, 0.6)); }
.cta-buttons { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; animation: ctaButtonsFloat 7s ease-in-out infinite 1s; }
@keyframes ctaButtonsFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }

/* --- Buttons --- */
.btn { padding: 1.5rem 3rem; border: none; border-radius: 50px; font-size: 1.3rem; font-weight: 600; cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; display: inline-block; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; }
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 50px currentColor; }
.btn-primary { background: var(--gradient-1); color: white; box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-secondary { background: var(--glass-bg); color: white; backdrop-filter: blur(20px); border: 2px solid var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1); }
.btn-sm { padding: 0.8rem 1.5rem; font-size: 1rem; border-radius: 20px; }

/* --- Section Styles --- */
.hero-section, .ads-section, .features, .articles-section, .community-gallery-section, .ratings-section, .cta-section, .seo-encyclopedia, .how-it-works { padding: 8rem 0; position: relative; overflow: hidden; }

/* Performance: Content Visibility (Smart Rendering) */
.features, .articles-section, .community-gallery-section, .ratings-section, .seo-encyclopedia {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

.ads-section { padding: 4rem 0; }
.section-title { font-family: 'Orbitron', monospace; font-size: 4rem; text-align: center; margin-bottom: 2rem; font-weight: 700; background: var(--holographic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-size: 200% 200%; animation: sectionTitleGlow 6s ease-in-out infinite; }
@keyframes sectionTitleGlow { 0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 5px 15px rgba(255, 0, 110, 0.5)); } 50% { background-position: 100% 50%; filter: drop-shadow(0 8px 25px rgba(0, 245, 255, 0.6)); } }
.section-subtitle { text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 1.4rem; max-width: 700px; margin: 0 auto 4rem; animation: fadeInUp 1s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 0.8; transform: translateY(0); } }

/* --- Ads --- */
#main-ad-container { width: 100%; max-width: 900px; margin: 0 auto 2rem auto; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--darker-bg); border: 1px solid var(--glass-border); position: relative; z-index: 10; transition: all 0.4s; cursor: pointer; }
#main-ad-container img, #main-ad-container video { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbnail-slider-wrapper { width: 95%; max-width: 1300px; margin: 0 auto; overflow: hidden; }
#ad-slider-container { display: flex; justify-content: center; gap: 1.5rem; padding: 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ad-thumbnail-slide { flex: 0 0 calc((100% / 6) - (1.5rem * 5 / 6)); border-radius: 15px; overflow: hidden; background: var(--glass-bg); border: 2px solid var(--glass-border); backdrop-filter: blur(10px); aspect-ratio: 16 / 9; transition: all 0.4s ease; cursor: pointer; opacity: 0.6; }
.ad-thumbnail-slide.active { opacity: 1; border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); transform: scale(1.05); }
.ad-thumbnail-slide img, .ad-thumbnail-slide video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* --- Grid System (Features & Encyclopedia) --- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.feature-card { background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 25px; padding: 3rem 2rem; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; transform-style: preserve-3d; }
.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 25px; padding: 2px; background: linear-gradient(45deg, transparent, var(--neon-cyan), transparent, var(--neon-purple), transparent); background-size: 300% 300%; opacity: 0; transition: opacity 0.4s ease; animation: rotateBorder 4s linear infinite; z-index: -1; }
@keyframes rotateBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover { transform: translateY(-15px) translateZ(20px) rotateX(5deg); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 255, 255, 0.2); background: rgba(255, 255, 255, 0.12); border-color: rgba(0, 255, 255, 0.6); }
.feature-icon { font-size: 4rem; margin-bottom: 1.5rem; display: block; background: var(--holographic); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.4s ease; animation: iconFloat 3s ease-in-out infinite; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.feature-card h3 { font-family: 'Orbitron', monospace; font-size: 1.6rem; margin-bottom: 1.5rem; color: white; font-weight: 700; transition: all 0.3s ease; }
.feature-card p { color: rgba(255, 255, 255, 0.8); line-height: 1.8; font-size: 1.1rem; transition: all 0.3s ease; }

/* --- Article Cards --- */
.popular-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.popular-article-card { display: block; text-decoration: none; color: inherit; background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 25px; overflow: hidden; transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: pointer; }
.popular-article-card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 255, 255, 0.2); border-color: rgba(0, 255, 255, 0.8); }
.popular-article-image { width: 100%; height: 200px; object-fit: cover; transition: all 0.6s ease; }
.popular-article-card:hover .popular-article-image { transform: scale(1.1); filter: brightness(1.1); }
.popular-article-content { padding: 1.5rem; }
.popular-article-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem; color: white; }
.popular-article-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #ccc; }
.articles-cta-container, .community-cta-container { text-align: center; position: relative; z-index: 10; margin-top: 3rem; }

/* --- Gallery & Ratings --- */
.gallery-grid, .ratings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.community-post-card { background: var(--glass-bg); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 25px; padding: 1.5rem; display: flex; flex-direction: column; text-decoration: none; color: white; transition: all 0.6s; }
.community-post-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); border-color: var(--neon-purple); }
.post-author { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.post-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.post-image { width: 100%; height: 200px; object-fit: cover; border-radius: 15px; margin-bottom: 1rem; }
.post-text { color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin-bottom: 1rem; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-stats { display: flex; gap: 1.5rem; border-top: 1px solid var(--glass-border); padding-top: 1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }

/* --- Ratings --- */
.rating-card { background: var(--glass-bg); backdrop-filter: blur(25px) saturate(180%); border: 1px solid var(--glass-border); border-radius: 25px; padding: 2rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 260px; }
.rating-card:hover { transform: translateY(-5px); border-color: var(--neon-cyan); box-shadow: 0 0 30px rgba(0, 255, 255, 0.2); }

.rating-card.featured { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)); border-color: var(--neon-purple); }
.rating-card.featured::before { content: '⭐ مميز'; position: absolute; top: 1rem; right: 1rem; background: var(--gradient-3); color: black; padding: 0.3rem 0.8rem; border-radius: 12px; font-size: 0.7rem; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 2; }
[dir="ltr"] .rating-card.featured::before { right: auto; left: 1rem; content: '⭐ Featured'; }

.rating-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.rating-avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 2px solid var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }
.rating-user-info { display: flex; flex-direction: column; }
.rating-user-info h4 { color: var(--neon-cyan); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.3rem; margin-top: 0; }
.rating-stars { display: flex; gap: 0.2rem; font-size: 0.9rem; }
.rating-text { color: rgba(255, 255, 255, 0.9); font-style: italic; line-height: 1.6; margin-bottom: auto; font-size: 1.05rem; }
.rating-date { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin-top: 1.5rem; text-align: left; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
[dir="ltr"] .rating-date { text-align: right; }

ratings-cta-container { 
    text-align: center; 
    margin-top: 6rem !important;
    padding-top: 2rem;
    position: relative; 
    z-index: 5; 
    clear: both;
}

.rating-form { background: var(--glass-bg); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 25px; padding: 3rem 2rem; margin-top: 3rem; }
.rating-form h3 { font-family: 'Orbitron', monospace; font-size: 2rem; margin-bottom: 2rem; color: white; font-weight: 700; text-align: center; }
.star-rating { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 2rem; cursor: pointer; }
.star-rating .star { color: rgba(255, 255, 255, 0.3); transition: all 0.3s ease; }
.star-rating .star:hover, .star-rating .star.active { color: #fbbf24; transform: scale(1.2); }
.rating-textarea { width: 100%; padding: 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border); border-radius: 12px; color: white; resize: none; font-family: inherit; margin-bottom: 1.5rem; }
.rating-textarea:focus { outline: none; border-color: var(--neon-cyan); }

/* --- Loading & Empty --- */
.loading { display: flex; justify-content: center; align-items: center; padding: 4rem; }
.loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--neon-cyan); border-radius: 50%; animation: spinEnhanced 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
@keyframes spinEnhanced { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
.empty-state { text-align: center; padding: 4rem 2rem; color: rgba(255, 255, 255, 0.6); }

/* --- Modals (General) --- */
.article-modal, .ad-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(15px); z-index: 10000; display: none; overflow-y: auto; padding: 2rem; }
.modal-content { max-width: 900px; margin: 0 auto; background: var(--glass-bg); backdrop-filter: blur(30px); border: 1px solid var(--glass-border); border-radius: 25px; position: relative; animation: modalSlideInEnhanced 0.5s; }
@keyframes modalSlideInEnhanced { from { opacity: 0; transform: translateY(100px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { padding: 2rem; border-bottom: 1px solid var(--glass-border); display: flex; justify-content: space-between; align-items: flex-start; }
.modal-close { background: none; border: none; color: var(--neon-cyan); font-size: 2rem; cursor: pointer; }
.modal-body { padding: 2rem; }
.modal-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 15px; margin-bottom: 2rem; }
.modal-meta { display: flex; gap: 2rem; margin-bottom: 2rem; }
.modal-content-text { color: rgba(255, 255, 255, 0.9); line-height: 1.8; font-size: 1.1rem; }
.ad-modal { z-index: 10001; justify-content: center; align-items: center; }
.ad-modal-close { position: absolute; top: 20px; right: 20px; font-size: 3rem; color: white; background: none; border: none; cursor: pointer; z-index: 10002; }
.ad-modal-content img, .ad-modal-content video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 15px; }

/* --- CTA --- */
.cta-section { padding: 8rem 0; text-align: center; }
.cta-features { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin: 3rem 0; }
.cta-feature { display: flex; align-items: center; gap: 1rem; background: var(--glass-bg); padding: 1rem 2rem; border-radius: 50px; border: 1px solid var(--glass-border); backdrop-filter: blur(10px); transition: 0.4s; }
.cta-feature:hover { transform: translateY(-5px) scale(1.05); border-color: var(--neon-cyan); }

/* --- Footer --- */
footer { background: rgba(5, 5, 10, 0.98); backdrop-filter: blur(25px); border-top: 1px solid var(--glass-border); text-align: center; padding: 3rem 0; }
#footer-contact-links, #footer-policy-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.footer-contact-link, .footer-policy-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: 0.3s; }
.footer-contact-link:hover, .footer-policy-link:hover { color: var(--neon-cyan); }

/* --- NEW MODAL STYLES FOR MODES --- */
.mode-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 10002; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.mode-modal-overlay.active { opacity: 1; visibility: visible; }
.mode-modal-content { background: rgba(20, 20, 25, 0.95); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem; max-width: 700px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
.mode-modal-overlay.active .mode-modal-content { transform: scale(1); }
.mode-modal-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--glass-border); padding-bottom: 1rem; }
.mode-modal-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.mode-modal-icon.fast { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.mode-modal-icon.deep { background: linear-gradient(135deg, #667eea, #764ba2); }
.mode-modal-icon.symbols { background: #20c997; }
.mode-modal-title { font-size: 1.8rem; font-weight: 700; color: white; }
.mode-modal-body { color: rgba(255,255,255,0.9); line-height: 1.8; font-size: 1.1rem; }
.mode-modal-body h3 { color: var(--neon-cyan); margin: 1.5rem 0 0.5rem; font-size: 1.3rem; }
.mode-modal-body ul { padding-right: 1.5rem; margin: 0.5rem 0; }
.mode-modal-body li { margin-bottom: 0.5rem; }
.mode-modal-warning { background: rgba(240, 173, 78, 0.15); border: 1px solid var(--warning); color: #ffdcb0; padding: 1rem; border-radius: 10px; margin: 1rem 0; display: flex; gap: 10px; align-items: flex-start; }
.mode-close { position: absolute; top: 1.5rem; left: 1.5rem; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
.mode-close:hover { color: var(--neon-cyan); transform: rotate(90deg); }

/* --- Optimized Mobile Styles --- */
@media (max-width: 768px) {
    html { font-size: 75%; }
    .container { padding: 0 10px; }
    .hero h1 { font-size: 2.5rem; }
    .section-title { font-size: 2rem; }
    .features-grid { grid-template-columns: 1fr; }
    .modal-content { margin: 1rem; max-width: calc(100% - 2rem); }
    
    #header-placeholder {
        min-height: 60px; /* ارتفاع أصغر للموبايل */
    }

    /* KILL SWITCH: Disable heavy effects on mobile to reach 95+ score */
    .custom-cursor, .cursor-trail { display: none !important; }
    .particles-container, .particle { display: none !important; }
    
    /* Stop Animations */
    .hero-content, .hero h1, .hero p, .cta-buttons, .feature-icon, .feature-card::before, .section-title, .section-subtitle {
        animation: none !important;
        transform: none !important;
    }
    .hero::before { animation: none !important; display: none; }
    .animated-bg::before { animation: none !important; background: var(--dark-bg); }

    /* Remove Blur (Heavy GPU usage) */
    .feature-card, .popular-article-card, .rating-card, .modal-content, footer, .btn-secondary, .community-post-card {
        backdrop-filter: none !important;
        background: rgba(20, 20, 25, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Disable 3D transforms on hover */
    .feature-card:hover, .popular-article-card:hover, .rating-card:hover { 
        transform: none !important; 
        box-shadow: none !important;
    }
}