/* الوضع النهاري الافتراضي (Light Mode) */
        :root {
            --navy: #FAFAFB; /* خلفية فاتحة ونقية */
            --navy-mid: #F0F4F8; 
            --gold: #A3822B; /* ذهبي أغمق قليلاً ليناسب الخلفية الفاتحة */
            --gold-light: #C9A84C;
            --gold-dim: rgba(201,168,76,0.1);
            --white: #111827; /* النصوص الأساسية تصبح داكنة */
            --text-muted: rgba(17, 24, 39, 0.65);
            --gray: #6B7280;
            --surface: rgba(0, 0, 0, 0.03);
            --border: rgba(0, 0, 0, 0.08);
            --nav-bg: rgba(250, 250, 251, 0.85);
            --video-bg: #E5E7EB;
            --modal-bg: #FFFFFF;
        }

        /* الوضع الليلي التلقائي (Dark Mode) - يفعّل إذا كان المتصفح مضبوطاً على الوضع الداكن */
        @media (prefers-color-scheme: dark) {
            :root {
                --navy: #0E1B2E;
                --navy-mid: #1A3A5F;
                --gold: #C9A84C;
                --gold-light: #E8C97A;
                --gold-dim: rgba(201,168,76,0.12);
                --white: #FFFFFF;
                --text-muted: rgba(255, 255, 255, 0.65);
                --gray: #8A95A3;
                --surface: rgba(255,255,255,0.04);
                --border: rgba(255,255,255,0.08);
                --nav-bg: rgba(14,27,46,0.85);
                --video-bg: #050D1A;
                --modal-bg: #0E1D30;
            }
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Cairo', sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; transition: background-color 0.3s, color 0.3s; }

        /* NAVBAR */
        nav {
            position: fixed; top: 0; width: 100%; z-index: 1000;
            padding: 18px 6%; display: flex; justify-content: space-between; align-items: center;
            background: var(--nav-bg); backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border); transition: all 0.3s;
        }
        nav.scrolled { padding: 12px 6%; background: var(--navy); }
        .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); font-weight: 800; font-size: 1.3rem; font-family: 'Tajawal', sans-serif; }
        .nav-logo-icon { width: 36px; height: 36px;  border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
        .nav-logo-icon img { width: 40px; height: 40px;}
        .nav-links { display: flex; gap: 4px; list-style: none; }
        .nav-links a { text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 0.88rem; padding: 7px 15px; border-radius: 8px; transition: all 0.2s; }
        .nav-links a:hover { color: var(--white); background: var(--surface); }
        .nav-cta { display: flex; gap: 10px; align-items: center; }
        .btn-nav-ghost { padding: 8px 18px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; font-family: 'Cairo', sans-serif; }
        .btn-nav-ghost:hover { border-color: var(--gold); color: var(--gold); }
        @media (prefers-color-scheme: light) {
            .btn-nav-primary { color: #FFFFFF !important; } /* لجعل النص أبيض بالوضع الفاتح فوق الزر الذهبي */
            .btn-primary { color: #FFFFFF !important; }
            .btn-copy { color: #FFFFFF !important; }
        }
        .btn-nav-primary { padding: 8px 20px; background: var(--gold); color: #0E1B2E; border-radius: 10px; text-decoration: none; font-size: 0.85rem; font-weight: 800; transition: all 0.2s; font-family: 'Cairo', sans-serif; }
        .btn-nav-primary:hover { background: var(--gold-light); }

        /* HERO SPLIT */
        .hero-wrapper { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 77px; }
        .hero-left { display: flex; flex-direction: column; justify-content: center; padding: 60px 4% 60px 8%; }
        .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-dim); border: 1px solid rgba(201,168,76,0.3); padding: 6px 16px; border-radius: 50px; font-size: 0.82rem; color: var(--gold-light); font-weight: 600; margin-bottom: 28px; width: fit-content; animation: fadeUp 0.6s ease both; }
        .badge-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; animation: pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
        .hero-title { font-family: 'Tajawal', sans-serif; font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; animation: fadeUp 0.6s 0.1s ease both; }
        .hero-title-gold { color: var(--gold); display: block; }
        .hero-subtitle { font-family: 'Tajawal', sans-serif; font-size: 1.4rem; font-weight: 300; color: var(--gray); margin-bottom: 22px; animation: fadeUp 0.6s 0.15s ease both; }
        .hero-desc { font-size: 0.97rem; color: var(--text-muted); line-height: 1.85; max-width: 450px; margin-bottom: 36px; animation: fadeUp 0.6s 0.2s ease both; }
        .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp 0.6s 0.3s ease both; margin-bottom: 46px; }
        .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: var(--gold); color: #0E1B2E; border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 0.93rem; transition: all 0.3s; font-family: 'Cairo', sans-serif; }
        .btn-primary:hover { background: var(--gold-light); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(201,168,76,0.3); }
        .btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid var(--border); color: var(--white); border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 0.93rem; transition: all 0.3s; font-family: 'Cairo', sans-serif; }
        .btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: var(--white); background: var(--surface); }
        .hero-stats { display: flex; gap: 28px; animation: fadeUp 0.6s 0.4s ease both; }
        .hero-stat { display: flex; flex-direction: column; gap: 2px; }
        .hero-stat-num { font-family: 'Tajawal', sans-serif; font-size: 1.55rem; font-weight: 800; color: var(--gold); }
        .hero-stat-label { font-size: 0.77rem; color: var(--gray); font-weight: 600; }
        .stat-divider { width: 1px; background: var(--border); align-self: stretch; }

        /* VIDEO PANEL */
        .hero-right { display: flex; align-items: center; justify-content: center; padding: 60px 8% 60px 4%; }
        .video-frame-outer { position: relative; width: 100%; max-width: 520px; animation: fadeUp 0.7s 0.2s ease both; }
        .video-glow { position: absolute; inset: -20px; background: radial-gradient(ellipse at center, rgba(201,168,76,0.1) 0%, transparent 70%); border-radius: 30px; pointer-events: none; }
        .video-container { position: relative; background: var(--surface); border: 1px solid rgba(201,168,76,0.18); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.15); }
        .video-chrome { background: var(--surface); padding: 9px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); }
        .chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
        .chrome-dot.r{background:#FF5F57}.chrome-dot.y{background:#FEBC2E}.chrome-dot.g{background:#28C840}
        .chrome-bar { flex: 1; background: var(--border); border-radius: 5px; padding: 3px 10px; font-size: 0.7rem; color: var(--gray); text-align: center; margin: 0 8px; }
        .video-wrapper { position: relative; width: 100%; aspect-ratio: 10/14; background: var(--video-bg); display: flex; align-items: center; justify-content: center; }
        .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; padding: 30px; }
        .play-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; box-shadow: 0 0 40px rgba(201,168,76,.3); }
        .play-btn:hover { transform: scale(1.1); box-shadow: 0 0 60px rgba(201,168,76,.5); }
        .play-btn i { color: #0E1B2E; font-size: 1.3rem; margin-right: -3px; }
        .video-placeholder h4 { font-size: .97rem; font-weight: 700; }
        .video-placeholder p { font-size: .8rem; color: var(--gray); text-align: center; }

        /* FEATURES */
        .features { padding: 100px 8%; }
        .section-label { text-align: center; font-size: .77rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
        .section-title { text-align: center; font-family: 'Tajawal', sans-serif; font-size: 2.5rem; font-weight: 800; margin-bottom: 12px; }
        .section-sub { text-align: center; color: var(--gray); font-size: .97rem; margin-bottom: 55px; max-width: 480px; margin-left: auto; margin-right: auto; }
        .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
        .feat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px; transition: all .3s; position: relative; overflow: hidden; }
        .feat-card::before { content:''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(201,168,76,.05), transparent 60%); opacity: 0; transition: opacity .3s; }
        .feat-card:hover { border-color: rgba(201,168,76,.25); transform: translateY(-5px); }
        .feat-card:hover::before { opacity: 1; }
        .feat-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--gold-dim); border: 1px solid rgba(201,168,76,.2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--gold); margin-bottom: 20px; }
        .feat-card h3 { font-family: 'Tajawal', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 9px; }
        .feat-card p { color: var(--gray); font-size: .86rem; line-height: 1.7; }

        /* PAGES LINKS */
        .pages-section { padding: 100px 8%; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .pages-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 40px; }
        .page-link { background: var(--navy); border: 1px solid var(--border); border-radius: 15px; padding: 22px 18px; text-decoration: none; color: var(--white); display: flex; flex-direction: column; gap: 9px; transition: all .25s; }
        .page-link:hover { border-color: rgba(201,168,76,.3); background: var(--gold-dim); transform: translateY(-4px); }
        .page-link i { font-size: 1.2rem; color: var(--gold); }
        .page-link span { font-weight: 700; font-size: .93rem; }
        .page-link small { font-size: .77rem; color: var(--gray); line-height: 1.5; }

        /* SUPPORT */
        .support-section { padding: 100px 8%; }
        .support-grid { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
        .support-card { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 20px 30px; cursor: pointer; transition: all .3s; text-align: center; font-family: 'Tajawal', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--white); min-width: 115px; }
        .support-card:hover { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); transform: scale(1.05); }
        .support-card small { display: block; font-size: .7rem; color: var(--gray); font-weight: 500; margin-top: 4px; }

        /* FOOTER */
        footer { padding: 60px 8% 38px; border-top: 1px solid var(--border); }
        .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
        .footer-brand p { color: var(--gray); font-size: .86rem; line-height: 1.8; margin-top: 14px; max-width: 270px; }
        .footer-col h4 { font-family: 'Tajawal', sans-serif; font-size: .82rem; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
        .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
        .footer-col ul a { text-decoration: none; color: var(--gray); font-size: .86rem; transition: color .2s; }
        .footer-col ul a:hover { color: var(--gold); }
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--border); }
        .footer-bottom p { color: var(--gray); font-size: .8rem; }
        .social-links { display: flex; gap: 12px; }
        .social-links a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gray); text-decoration: none; font-size: .9rem; transition: all .25s; }
        .social-links a:hover { border-color: var(--gold); color: var(--gold); }

        /* MODAL */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
        @media (prefers-color-scheme: dark) { .modal-overlay { background: rgba(5,12,22,.92); } }
        .modal-card { background: var(--modal-bg); border: 1px solid rgba(201,168,76,.2); padding: 40px 36px; border-radius: 22px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 40px 80px rgba(0,0,0,.3); }
        .modal-card h3 { font-family: 'Tajawal', sans-serif; font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
        .modal-card > p { color: var(--gray); font-size: .88rem; margin-bottom: 22px; }
        .phone-display { background: var(--gold-dim); border: 2px dashed rgba(201,168,76,.4); border-radius: 13px; padding: 18px; font-family: 'Tajawal', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--gold-light); letter-spacing: 3px; margin-bottom: 22px; }
        .btn-copy { width: 100%; padding: 13px; background: var(--gold); color: #0E1B2E; border: none; border-radius: 11px; font-size: .93rem; font-weight: 800; cursor: pointer; transition: all .2s; font-family: 'Cairo', sans-serif; }
        .btn-copy:hover { background: var(--gold-light); }
        .btn-cancel { background: none; border: none; color: var(--gray); font-size: .83rem; cursor: pointer; font-family: 'Cairo', sans-serif; font-weight: 600; padding: 9px; margin-top: 8px; display: block; width: 100%; }
        .btn-cancel:hover { color: var(--white); }

        @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

        @media(max-width:1024px) { .features-grid{grid-template-columns:repeat(2,1fr)} .pages-grid{grid-template-columns:repeat(2,1fr)} .footer-top{grid-template-columns:1fr 1fr} }
        @media(max-width:768px) { .hero-wrapper{grid-template-columns:1fr} .hero-right{display:none} .hero-title{font-size:2.3rem} .nav-links{display:none} .features-grid{grid-template-columns:1fr} .pages-grid{grid-template-columns:repeat(2,1fr)} .footer-top{grid-template-columns:1fr} .footer-bottom{flex-direction:column;gap:14px} }