/* Must stay the first rule -- @import only works if nothing else precedes it. */
        :root {
            --primary-navy: #0a0f1a;
            --secondary-navy: #111827;
            --accent-blue: #00d4ff;
            --neon-glow: rgba(0, 212, 255, 0.5);
            --soft-text: #94a3b8;
            --glass: rgba(255, 255, 255, 0.03);
        }

        /* --- حل مشكلة الاختفاء --- */
        /* إذا لم يتم تحميل AOS أو تعطل، هذا الكود يضمن بقاء العناصر مرئية */
        [data-aos] {
            opacity: 1 !important;
            transform: none !important;
            visibility: visible !important;
        }
        
        /* إعادة تفعيل الخصائص فقط عندما تعمل المكتبة بنجاح وتضيف الكلاس الخاص بها للـ body */
        body.aos-initialized [data-aos] {
            opacity: 0; /* تعود للوضع الطبيعي للمكتبة لتنفيذ الأنميشن */
        }
        body.aos-initialized [data-aos].aos-animate {
            opacity: 1;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--primary-navy);
            background-image: 
                linear-gradient(rgba(0, 212, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 212, 255, 0.02) 1px, transparent 1px);
            background-size: 50px 50px;
            color: #ffffff;
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .navbar {
            background: rgba(10, 15, 26, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 212, 255, 0.1);
            padding: 15px 0;
            z-index: 1100;
        }

        .navbar-brand {
            font-family: 'Orbitron', sans-serif;
            font-weight: 900;
            color: var(--accent-blue) !important;
            letter-spacing: 2px;
            font-size: 1.2rem;
        }

        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 120px;
            padding-bottom: 60px;
            position: relative;
        }

        .scanner-wrapper {
            position: relative;
            width: 100%;
            max-width: 350px;
            aspect-ratio: 1/1;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scanner-circle {
            position: absolute;
            inset: 0;
            border: 2px solid rgba(0, 212, 255, 0.15);
            border-radius: 50%;
            animation: pulse-ring 4s linear infinite;
        }

        .scanner-circle:nth-child(2) { animation-delay: -1s; }

        .fingerprint-box {
            position: relative;
            width: 80%;
            height: 80%;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 75%);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }

        .fingerprint-icon {
            font-size: clamp(60px, 15vw, 130px);
            color: var(--accent-blue);
            filter: drop-shadow(0 0 20px var(--accent-blue));
            z-index: 5;
            animation: glow-soft 2s ease-in-out infinite alternate;
        }

        .scan-bar {
            position: absolute;
            width: 120%;
            height: 4px;
            background: var(--accent-blue);
            box-shadow: 0 0 25px 4px var(--accent-blue);
            top: 0;
            left: -10%;
            z-index: 10;
            animation: scan-move 3.5s ease-in-out infinite;
        }

        @keyframes scan-move {
            0%, 100% { top: 5%; opacity: 0; }
            50% { top: 95%; opacity: 1; }
        }

        @keyframes glow-soft {
            from { opacity: 0.7; transform: scale(0.98); }
            to { opacity: 1; transform: scale(1.05); }
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.8); opacity: 0.6; }
            100% { transform: scale(1.4); opacity: 0; }
        }

        .btn-cyber {
            background: transparent;
            color: var(--accent-blue);
            border: 1px solid var(--accent-blue);
            padding: 14px 35px;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 2px;
            transition: 0.4s;
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
            -webkit-clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
            position: relative;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-cyber:hover {
            background: var(--accent-blue);
            color: var(--primary-navy);
            box-shadow: 0 0 25px var(--neon-glow);
            transform: translateY(-2px);
        }

        .glass-card {
            background: var(--glass);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 30px;
            border-radius: 20px;
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 100%;
        }

        .glass-card:hover {
            transform: scale(1.02);
            border-color: var(--accent-blue);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
        }

        .card-icon {
            font-size: 2.2rem;
            color: var(--accent-blue);
            margin-bottom: 20px;
            display: block;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 18px;
            border-radius: 50px;
            background: rgba(0, 212, 255, 0.1);
            color: var(--accent-blue);
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            border: 1px solid rgba(0, 212, 255, 0.3);
            margin-bottom: 20px;
        }

        footer {
            background: #05080f;
            padding: 60px 0 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        @media (max-width: 991px) {
            .hero-section { text-align: center; flex-direction: column; }
            .hero-section .row { flex-direction: column-reverse; }
            .scanner-wrapper { max-width: 280px; margin-bottom: 40px; }
            .display-3 { font-size: 2.5rem; }
            .d-flex.gap-3 { justify-content: center; flex-direction: column; align-items: center; }
            .btn-cyber { width: 100%; max-width: 300px; }
        }

        /* Arabic font override -- see nav.php's "Arabic font (RTL only)"
           comment for the full rationale. `*` never matches ::before/::after
           pseudo-elements, so Font Awesome/Bootstrap icons are unaffected.
           High specificity wins over this page's other font-family rules
           (including Bootstrap's own) regardless of source order. */
        html[dir="rtl"] * {
            font-family: 'Tajawal', 'Inter', sans-serif !important;
        }
        /* Restore Font Awesome's own font on icon elements: the rule above
           also matches the <i class="fas fa-*"> element itself (not just
           text), which would otherwise make its icon glyph render through
           the Arabic font (no glyph at that codepoint = invisible icon).
           This is the root cause of both the navbar icons AND this page's
           fingerprint icon (`<i class="fas fa-fingerprint ...">`)
           disappearing in Arabic mode. */
        html[dir="rtl"] [class*="fa-"] {
            font-family: "Font Awesome 6 Free" !important;
        }