/* FastAlo - Tech Identity (Clean V4) */

/* Consolidated design tokens: use this single :root for the whole stylesheet */
:root{
        /* Colors */
        --bg-primary: #0B1120;
        --bg-secondary: #111827;
        --card-bg: #161b2d;
        --accent: #22D3EE;
        --accent-cyan: var(--accent);
        --text: #F8FAFC;
        --text-white: var(--text);
        --muted: #94A3B8;
        --primary-bg: var(--bg-primary);
        --secondary-bg: var(--bg-secondary);

        /* UI */
        --border-weak: rgba(34,211,238,0.12);
        --glass-weak: rgba(255,255,255,0.02);

        /* Backwards-compatible aliases (legacy names used across file) */
        --bg-dark: var(--bg-primary);
        --accent-cyan: var(--accent);
        --text-gray: var(--muted);
        --glass-white: var(--glass-weak);

        /* Shadows */
        --shadow-soft: 0 6px 18px rgba(2,6,23,0.6);
        --shadow-cyan: 0 0 12px rgba(34,211,238,0.25);
        --border-cyan: rgba(34,211,238,0.2);

        /* Sizes */
        --radius-sm: 10px;
        --radius-md: 20px;
        --space-xs: 6px;
        --space-sm: 12px;
        --space-md: 20px;

        /* Motion */
        --dur-sm: 0.22s;
        --dur-md: 0.4s;
        --ease-default: cubic-bezier(.2,.8,.2,1);
}

/* Global safety + accessibility */
html,body{ overflow-x: hidden; }
/* Prevent iOS auto-zoom on inputs */
input, textarea, select { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
}

/* Ensure standard background-clip exists where text gradients are used */
.text-glow-cyan, .main-title, .logo, .hiw-hero h1 {
    -webkit-background-clip: text;
    background-clip: text;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', sans-serif;
    color: var(--text-white);
    background-color: var(--primary-bg);
    padding-top: 90px; /* عشان الهيدر الثابت مايغطيش المحتوى */
}

/* --- Navigation Bar (Modern Dark Glass) --- */
/* 1. إعدادات الهيدر الأساسية (ثابت دائماً) */
.header-nav {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 5%;
    background-color: rgba(11,17,32,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-weak);
    z-index: 1000;
    transition: background-color var(--dur-sm) var(--ease-default), transform var(--dur-sm) var(--ease-default);
    will-change: transform, background-color;
}

/* 2. اللوجو */
.logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-cyan);
    text-transform: none;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
    text-decoration: none;
}

/* 3. روابط القائمة */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links li a {
    color: #cbd5e1;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 0;
    text-decoration: none;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-cyan);
    transition: width 0.3s ease;
}

.nav-links li a:hover {
    color: var(--accent-cyan);
}

.nav-links li a:hover::after {
    width: 100%;
}

/* 4. زر المنيو (التوجل) وتنسيق الـ X */
.menu-toggle {
    display: none; /* يظهر في الموبايل فقط */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 10001 !important; /* لازم يكون أعلى من القائمة */
    position: relative;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--accent-cyan);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* تحويل الهامبرجر لعلامة X عند التفعيل */
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 5. إعدادات الموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #0B1120;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease;
        z-index: 10000;
        overflow-y: auto;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-auth-mobile {
        display: block;
        padding: 20px;
        border-top: 1px solid rgba(34, 211, 238, 0.1);
        width: 100%;
        text-align: center;
    }

    .nav-auth-mobile .auth-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
    }
}

/* 6. المودال (Authentication Modal) */
#authModal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 17, 32, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10005; /* أعلى من الهيدر والمنيو */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#authModal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: #111827;
    border: 1px solid rgba(34, 211, 238, 0.2);
    padding: 40px;
    border-radius: 24px;
    width: 90%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 0 50px rgba(34, 211, 238, 0.1);
    transform: translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#authModal.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 28px;
    cursor: pointer;
}.modal-close:hover { color: #fff; }

/* عناوين الفورم */
.auth-form-container h2 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 25px;
    text-align: center;
}

/* تنسيق الحقول */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    color: var(--text);
    outline: none;
    font-size: 16px;
    transition: box-shadow var(--dur-sm) var(--ease-default), border-color var(--dur-sm) var(--ease-default);
}

.form-group input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 6px 20px rgba(34,211,238,0.08);
    background: rgba(34,211,238,0.03);
}

/* الأزرار */
.btn-submit {
    width: 100%;
    padding: 14px;
    background: #22d3ee;
    color: #0b1120;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-submit:hover {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    transform: translateY(-2px);
}

.btn-link {
    background: none;
    border: none;
    color: #22d3ee;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}

/* رسائل الخطأ */
.error-message {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    display: none;
}

.error-message.show { display: block; }

/* إخفاء وإظهار الفورم */
.auth-form-container { display: none; }
.auth-form-container.active { display: block; }

.auth-switch {
    text-align: center;
    margin-top: 20px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.auth-switch a {
    color: #22d3ee;
    text-decoration: none;
    font-weight: 600;
}
/* تعديل للهيدر عشان الزراير متلزقش في المنيو في الموبايل */
@media (max-width: 768px) {
    .auth-buttons {
        margin: 15px 0;
        justify-content: center;
        width: 100%;
    }
    
    .auth-buttons .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}
/* تعديل للهواتف */
@media (max-width: 768px) {
    .header-nav {
        padding: 15px 20px;
    }
    .nav-links {
        display: none; /* هنحتاج JS للـ Hamburger menu بعدين */
    }
}
/* --- Hero Section (The Fix is here) --- */
/* تنسيق السلايد الأساسي */
.hero-container {
    padding: 0 10px;
    margin-top: 20px;
}

/* الكانتينر الأساسي */
.hero-wrapper {
    position: relative;
    width: 90%;
    max-width: 1400px;
    /* Use a flexible minimum height so content can grow */
    min-height: 500px;
    background: #111827;
    border-radius: 30px;
    overflow: hidden;
    margin: 20px auto;
}

/* السلايد: هو اللي شايل الليلة كلها */
.hero-full-slide {
    /* Keep slide layout flexible so long content expands the container */
    position: relative;
    width: 100%;
    min-height: 500px;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    /* Avoid breaking inside Arabic words/letters; allow normal wrapping at word boundaries */
    word-break: normal;
    overflow-wrap: break-word; /* allow breaking very long words only when necessary */
    hyphens: none;
}

.hero-full-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Ensure the page scroll remains normal while preventing the slide
   itself from acting as an internal scroll container. This keeps the
   main page scroll intact and avoids trapping scroll events inside
   the slide. */
.hero-full-slide,
.hero-full-slide * {
    /* Prefer visible overflow so scrolling moves the page, not the slide */
    overflow: visible !important;
    max-height: none !important;
    touch-action: auto !important;
    -ms-touch-action: auto !important;
    overscroll-behavior: auto !important; /* allow scroll chaining to parent */
}

/* If any rule previously made the first slide fixed or blocked page scroll,
   explicitly reset it so the page can scroll normally. */
.hero-full-slide:first-of-type,
.hero-full-slide.active:first-of-type {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
}

/* Keep interactive elements working inside the slide */
.hero-full-slide .hero-content,
.hero-full-slide .text-side,
.hero-full-slide .visual-side {
    pointer-events: auto !important;
}

/* العنوان: هنرجعه مكانه فوق */
.hero-content {
    position: relative;
    z-index: 10; /* ensure content sits above background */
    margin-top: 40px; /* spacing from top */
    text-align: center;
    width: 100%;
    pointer-events: none;
    padding: 0 24px; /* side padding as safe area on small screens */
}

/* الأنيميشن: هنرجعه يملأ الخلفية ويبقى تحت العنوان */
/* الأنميشن: كأنه خلفية سينمائية */
.hero-lottie-bg {
    position: absolute;
    top: 50%; /* انزل لنص الطول */
    left: 50%; /* ادخل لنص العرض */
    transform: translate(-50%, -50%); /* ارجع نص حجمك لورا عشان تظبط في السنتر بالظبط */
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero-lottie-bg dotlottie-player {
    /* هنا بقى هنحط الـ scale بتاعك مع الحفاظ على السنتر */
    width: 100%; 
    height: 100%;
    
    /* جمعنا الـ scale اللي إنت عايزه مع الـ translate عشان ميهربش */
    transform: scaleX(1.2) scaleY(.9); 
    
    object-fit: fill; 
}
/* تنسيق بار المقارنة في سلايد رقم 3 */
.price-bar-container {
    width: 300px;
    height: 35px;
    background: #333;
    border-radius: 20px;
    margin: 15px auto;
    overflow: hidden;
    border: 1px solid #22D3EE;
}

.price-bar {
    height: 100%;
    background: var(--accent-cyan);
    color: #000;
    font-weight: 900;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

/* animate with scaleX for GPU-friendly performance */
.hero-full-slide.active .price-bar { transform: scaleX(1); }

/* توهج العداد في سلايد رقم 8 */
#count-up {
    color: #22D3EE;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
}
/* الكلام فوق وفي النص ومرفوع للسماء */
.hero-content {
    position: absolute;
    z-index: 2;
    top: 1%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0 20px; /* mobile safe padding */
}

.main-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0;

    /* هنا السر: حطينا خلفيتين فوق بعض */
    /* الأولى: اللمعة البيضاء المتحركة */
    /* الثانية: لون السيان الثابت */
    background-image: 
        linear-gradient(to right, transparent 33%, rgba(255, 255, 255, 0.8) 50%, transparent 67%),
        linear-gradient(to right, #22D3EE, #22D3EE);
    
    background-size: 200% 100%, 100% 100%; /* اللمعة حجمها ضعف الكلمة، واللون حجمه ثابت */
    background-repeat: no-repeat;
    
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* الأنيميشن بيحرك اللمعة بس (الخلفية الأولى) */
    animation: shine-sweep 3s linear infinite;

    /* توهج ثابت خلف الكلمة */
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));
    /* Avoid breaking Arabic letters inside the title */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

@keyframes shine-sweep {
    0% {
        background-position: -150% 0, 0 0;
    }
    100% {
        background-position: 150% 0, 0 0;
    }
}
/* للموبايل: رفع الطول وتكديس عمودي */
@media (max-width: 768px) {
    .hero-wrapper {
        width: 95%;
        min-height: 700px; /* increased mobile height per request */
        border-radius: 18px;
        margin: 12px auto;
    }

    .hero-full-slide {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 700px;
        padding: 18px 14px;
    }

    .main-title {
        font-size: clamp(1.4rem, 6.5vw, 2.2rem);
        letter-spacing: 2px;
        margin-bottom: 8px;
        word-break: break-word;
    }

    .hero-content { padding: 12px 14px; }
}
/* للموبايل: Lottie/background area taller to match hero */
@media (max-width: 768px) {
    .hero-lottie-slide {
        min-height: 700px;
    }
    .hero-title {
        font-size: 1.8rem;
    }
}
.search-glass-wrapper {
    max-width: 650px;
    margin: 0 auto;
    background: transparent !important; /* مسحنا البوكس الشفاف هنا */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.main-search-form {
    display: flex;
    background: var(--secondary-bg);
    padding: 8px 10px 8px 25px;
    border-radius: 100px;
    border: 1px solid var(--border-cyan);
    transition: 0.3s;
}

.main-search-form:focus-within {
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-cyan);
}

.main-search-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    outline: none;
    font-size: 1.1rem;
}

.btn-premium {
    background: var(--accent-cyan);
    color: #0B1120;
    padding: 12px 35px;
    border-radius: 100px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

/* --- Destinations (Airalo Style) --- */
/* --- Popular Destinations Grid --- */
/* الحاوية الكبيرة (الكارت الأساسي) */
.main-locations-card {
    background: #111827; /* لون أغمق قليلاً من الخلفية لعمل تباين */
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 30px;
    max-width: none; /* القيمة الافتراضية للـ Desktop */
    margin-left: auto; /* عشان يتوسطن */
    margin-right: auto; /* عشان يتوسطن */
    width: 100%; /* عشان ميبقاش لازق في حواف الشاشة في الموبايل */
}

/* الهيدر جوه الكارت الكبير */
.locations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.header-text h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.header-text p {
    color: #94A3B8;
    font-size: 1rem;
}

.btn-view-all {
    background: rgba(34, 211, 238, 0.1);
    color: #22D3EE;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-view-all:hover {
    background: #22D3EE;
    color: #000;
}

/* شبكة الكروت الصغيرة */
.dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 في الصف */
    gap: 16px;
}

/* الكروت الصغيرة الداخلية */
.sub-country-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1f2937; /* لون الكارت الصغير */
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    height: 68px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.sub-country-card:hover {
    background: #2d3748;
    border-color: #22D3EE;
    transform: scale(1.02);
}

.country-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-flag {
    width: 38px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
}

.country-label {
    color: #fff;
    font-weight: 500;
}

.price-info {
    text-align: right;
}

.from-text { font-size: 10px; color: #94A3B8; display: block; }
.amount { color: #22D3EE; font-weight: 700; font-size: 1.1rem; }
.currency { font-size: 10px; color: #94A3B8; }

/* Responsive */
@media (max-width: 992px) {
    .dest-grid { grid-template-columns: repeat(2, 1fr); }
    .main-locations-card { padding: 20px; }
}

@media (max-width: 600px) {
    .dest-grid { grid-template-columns: 1fr; }
    .locations-header { flex-direction: column; text-align: center; gap: 20px; }
}
/* السهم الصغير */
.arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
    opacity: 0.5;
}
/* --- Slider --- */
.slide-container {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 25px;
    margin: 20px 0;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 0.8s ease;
}

.slide.active { opacity: 1; }

.hero-animation {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.how-it-works {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.section-title p {
    color: #94A3B8;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.step-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: 0.3s;
}

.step-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.04);
    border-color: #22D3EE;
}

.step-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(34, 211, 238, 0.1); /* رقم كبير شفاف في الخلفية */
    line-height: 1;
}

.step-icon {
    font-size: 40px;
    color: #22D3EE;
    margin-bottom: 20px;
}

.step-card h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.step-card p {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* للموبايل */
@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}
.why-choose-us {
    padding: 100px 0;
    background: radial-gradient(circle at top right, rgba(34, 211, 238, 0.05), transparent);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.badge {
    background: rgba(34, 211, 238, 0.1);
    color: #22D3EE;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-header h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-top: 20px;
}

.features-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 15px;
    transition: 0.3s;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.feature-icon-wrapper {
    background: #1E293B;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #22D3EE;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.feature-text h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.feature-text p {
    color: #94A3B8;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* للموبايل */
@media (max-width: 768px) {
    .features-container {
        grid-template-columns: 1fr;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
}
.lottie-wrapper {
    display: flex;
    justify-content: center; /* توسيط بالعرض */
    align-items: center;     /* توسيط بالطول */
    padding: 20px;
}
.lottie-wrapper dotlottie-player {
    width: 100%;
    max-width: 400px; /* تحكم في الحجم الأقصى هنا */
    height: auto;
}
/* Container الأساسي للمتجر */
.section-esim-store {
    background: #0b1120; /* نفس لون الخلفية الغامق */
    min-height: 80vh;
}

/* شبكة المنتجات - Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

/* كارت المنتج */
.product-card {
    background: var(--card-bg);
    border: 1px solid rgba(45,51,72,0.6);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-sm) var(--ease-default), box-shadow var(--dur-sm) var(--ease-default), border-color var(--dur-sm) var(--ease-default);
    will-change: transform;
}

/* تأثير عند المرور بالماوس - use GPU-friendly transforms */
.product-card:hover {
    transform: translate3d(0,-10px,0);
    border-color: var(--accent-cyan);
    box-shadow: 0 12px 30px rgba(2,6,23,0.6), 0 0 12px rgba(34,211,238,0.06);
}

/* صورة الدولة (العلم أو صورة المعلم) */
.product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-bottom: 1px solid #2d3348;
}

/* معلومات المنتج داخل الكارت */
.product-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.country-name {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 600;
}

/* ستايل السعر */
.price {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 15px 0;
}

.price span {
    color: #22D3EE; /* لون السيان */
    font-size: 1.2rem;
    font-weight: 800;
    margin-left: 5px;
}

/* الزرار الـ Fancy */
.fancy-btn {
    display: block;
    text-align: center;
    background: transparent;
    color: #22D3EE;
    border: 2px solid #22D3EE;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.fancy-btn:hover {
    background: #22D3EE;
    color: #0b1120;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

/* للموبايل: نصغر الحجم شوية */
@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        padding: 10px;
    }
}
/* تنسيق الصفحة بالكامل */
.product-details {
    max-width: 1100px;
    margin: 50px auto;
    padding: 0 20px;
    color: #fff;
}

/* الجزء العلوي: العنوان والصورة */
.product-details h1 {
    font-size: 2.5rem;
    color: #22D3EE;
    margin-bottom: 25px;
    text-align: center;
}

.product-main-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    margin-bottom: 30px;
    border: 1px solid rgba(34, 211, 238, 0.1);
}

/* الوصف */
.product-short-description {
    font-size: 1.2rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.product-description {
    background: rgba(30, 41, 59, 0.5);
    padding: 25px;
    border-radius: 15px;
    border-left: 4px solid #22D3EE;
    margin-bottom: 40px;
    color: #CBD5E1;
}

/* تنسيق شبكة الخطط - Plans Grid */
.product-details h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #1E293B;
    padding-bottom: 10px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* كارت الخطة */
.plan-card {
    background: #161B2D;
    border: 1px solid #2D3348;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: #22D3EE;
    box-shadow: 0 10px 25px rgba(34, 211, 238, 0.1);
}

.plan-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #F8FAFC;
}

.plan-price {
    font-size: 2rem;
    color: #22D3EE;
    font-weight: 800;
    margin-bottom: 20px;
}

.plan-price::before {
    content: '$';
    font-size: 1.2rem;
    margin-right: 2px;
}

/* تعديل الزرار في صفحة الخطط */
.plan-card .fancy-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background: #22D3EE;
    color: #0B1120;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    transition: 0.3s;
}

.plan-card .fancy-btn:hover {
    background: #06B6D4;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .product-details h1 { font-size: 1.8rem; }
    .product-main-image { max-height: 250px; }
}
/* Duplicate :root removed — consolidated tokens at top */
.cyan-text { color: var(--accent); }

/* Hero */
.hiw-hero {
    padding: 100px 20px;
    text-align: center;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
}

.hiw-hero h1 { font-size: 3rem; margin-bottom: 20px; color: #fff; }

/* Steps Cards */
.hiw-steps { padding: 80px 20px; }
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 30px;
    position: relative;
    border: 1px solid rgba(34, 211, 238, 0.1);
    transition: 0.3s;
}

.step-card:hover {
    transform: translateY(-10px);
    border-color: var(--cyan);
}

.step-number {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.05;
    color: #fff;
}

.step-card i {
    font-size: 2.5rem;
    color: var(--cyan);
    margin-bottom: 20px;
}

.step-card h3 { color: #fff; margin-bottom: 15px; }
.step-card p { color: var(--text-gray); line-height: 1.6; }

/* Compatibility Section */
.compatibility-check { padding: 60px 20px; }
.comp-box {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 40px;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,0.05);
}

.device-list { list-style: none; padding: 0; margin-top: 20px; display: flex; gap: 20px; }
.device-list li { color: #fff; background: rgba(34, 211, 238, 0.1); padding: 10px 20px; border-radius: 12px; }

.comp-icon i { font-size: 8rem; color: var(--cyan); opacity: 0.2; }

/* CTA Button */
.main-cta-btn {
    display: inline-block;
    padding: 18px 40px;
    background: var(--cyan);
    color: #0f172a;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 30px;
    transition: 0.3s;
}

.main-cta-btn:hover {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.4);
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .comp-box { flex-direction: column; text-align: center; }
    .device-list { justify-content: center; flex-direction: column; }
    .hiw-hero h1 { font-size: 2rem; }
}
/* About Us Premium Section */
.about-premium-section {
    padding: 140px 0;
    background-color: #080c16; /* خلفية داكنة جداً */
    color: #fff;
    overflow: hidden;
    position: relative;
}

.about-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

/* العمود الأيسر: النصوص */
.about-content-block {
    flex: 1;
}

.about-eyebrow {
    display: inline-block;
    color: #22D3EE;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    border-bottom: 2px solid #22D3EE;
    padding-bottom: 5px;
}

.about-main-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.text-glow-cyan {
    background: linear-gradient(90deg, #22D3EE, #818CF8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));
}

.about-description {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 40px;
}

/* الأزرار */
.about-action-btns {
    display: flex;
    gap: 20px;
}

.btn-primary-glow {
    padding: 15px 35px;
    background: #22D3EE;
    color: #080c16;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.btn-primary-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 30px rgba(34, 211, 238, 0.6);
}

.btn-secondary-outline {
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secondary-outline:hover {
    color: #22D3EE;
    transform: translateX(5px);
}

/* العمود الأيمن: الـ Glassmorphism Stats */
.about-stats-glass-block {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
}

.glass-card-item {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.05);
    padding: 24px;
    border-radius: var(--radius-md);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform var(--dur-sm) var(--ease-default), box-shadow var(--dur-sm) var(--ease-default), background-color var(--dur-sm) var(--ease-default);
    will-change: transform;
}

.glass-card-item:hover {
    background: rgba(34,211,238,0.04);
    border-color: rgba(34,211,238,0.18);
    transform: translate3d(0,-10px,0);
    box-shadow: 0 10px 28px rgba(2,6,23,0.55);
}

.card-2.featured-card {
    grid-column: span 2; /* الكارت الأوسط بياخد العرض كله */
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(34, 211, 238, 0.03);
}

.icon-orb {
    width: 60px;
    height: 60px;
    background: rgba(34, 211, 238, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-orb i {
    font-size: 1.6rem;
    color: #22D3EE;
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.95rem;
    color: #cbd5e1;
}

/* الكرة المضيئة في الخلفية */
.glow-sphere {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0) 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    filter: blur(50px);
}

/* Responsive */
@media (max-width: 992px) {
    .about-wrapper { flex-direction: column; text-align: center; gap: 60px; }
    .about-main-title { font-size: 2.8rem; }
    .about-description { margin: 0 auto 40px; }
    .about-action-btns { justify-content: center; }
    .about-stats-glass-block { width: 100%; max-width: 500px; margin: 0 auto; }
}
/* تأكد إن مفيش قوس مفقود قبل الكود ده */
.reveal {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(50px) !important;
    transition: all 1s ease-out !important;
}

.reveal.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
/* --- Slider Navigation & Progress --- */

/* أماكن الأسهم */
.slider-nav {
    position: absolute;
    bottom: 50px;
    right: 5%;
    display: flex;
    gap: 15px;
    z-index: 100;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.nav-btn:hover {
    background: var(--accent-cyan);
    color: #020617;
    transform: translateY(-3px);
}

/* حاوية خطوط التقدم */
.slider-progress-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px; /* مسافة بسيطة بين الخطوط */
    z-index: 100;
    width: 90%; /* ياخد مساحة أكبر من عرض الشاشة */
    max-width: 600px;
}

.progress-item {
    flex: 1; /* ده بيخلي كل الخطوط بنفس الطول مهما كان عددهم */
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0%; /* بيبدأ من صفر */
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
}

/* الأنميشن اللي بيملا الخط */
@keyframes fillProgress {
    from { width: 0%; }
    to { width: 100%; }
}
.progress-bar-inner {
    height: 100%;
    width: 0%;
    background: var(--accent-cyan, #22D3EE);
    box-shadow: 0 0 10px var(--accent-cyan);
}
/* كلاس جديد للخطوط اللي اكتملت */
.progress-bar-inner.completed {
    width: 100% !important;
    transition: none !important;
}

/* الموبايل: نصغر الأسهم شوية */
@media (max-width: 768px) {
    .slider-nav { bottom: 20px; right: 50%; transform: translateX(50%); }
    .slider-progress-container { bottom: 80px; width: 90%; }
}
/* --- FastAlo Cinematic Hero (Full Space Edition) --- */
/* 1. المتغيرات الأساسية (duplicate removed - consolidated at top) */
/* --- السلايد الأول (Strategy) --- */
/* 1. التعديل ده هيشتغل فقط على الشاشات الكبيرة (أكبر من 1024px) */
@media (min-width: 1025px) {
    .hero-full-slide:nth-child(1) .slide-grid {
        /* التحريك لليمين ولتحت في الشاشة الكبيرة بس */
        transform: translate(300px, -100px); 
    }
}

/* 2. التعديل ده للموبايل والشاشات الصغيره (أقل من 1024px) */
@media (max-width: 1024px) {
    .hero-full-slide:nth-child(1) .slide-grid {
        /* بنلغي التحريك الجانبي عشان ميتطلعش بره الشاشة */
        transform: translate(0, 20px); 
        /* بنخلي العناصر في النص بالظبط عشان الموبايل */
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
}
/* --- السلايد الثاني (Crisis) --- */
.hero-full-slide:nth-child(2) {
    background: linear-gradient(to bottom, rgba(255,0,0,0.05), transparent); /* خلفية حمراء خفيفة */
}
.hero-full-slide:nth-child(2) .main-title {
    color: #ff4d4d; /* أحمر للأزمة */
}

/* --- السلايد الثالث (Market) --- */
@media (max-width: 1024px) {
    /* 1. السلايد التالت: نرجعه لحجم الشاشة الطبيعي ونمنع الهروب */
    .hero-full-slide:nth-child(3) {
        height: 100vh !important; /* نأكد إنه طول الشاشة بالظبط */
        position: absolute;
        top: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: visible !important; /* عشان لو الرسمة نزلت سنة تبان */
    }

    /* 2. الجريد: نصغر المسافات عشان كل حاجة تبان في شاشة واحدة */
    .hero-full-slide:nth-child(3) .slide-grid {
        flex-direction: column !important;
        padding-top: 60px !important; /* تقليل المساحة فوق عشان نرفع السلايد */
        gap: 15px !important; /* تقليل المسافة بين الكلام والرسمة */
        transform: translateY(0) !important; /* نلغي أي نزول قديم */
    }

    /* 3. منطقة الرسمة: نرفعها لفوق شوية */
    .hero-full-slide:nth-child(3) .visual-side {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        margin-top: -10px; /* سحب الرسمة لفوق عشان تلحق تظهر */
        transform: scale(0.85); /* نصغرها سنة عشان "تتحشر" جوه الشاشة */
    }

    /* 4. الرسمة نفسها: نأكد ظهور الـ SVG */
    .market-chart {
        display: block !important;
        width: 100%;
        max-width: 300px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .market-chart svg {
        height: 120px !important; /* نحدد ارتفاع ثابت صغير عشان ميهربش */
    }
}
/* --- السلايد الرابع (Savings) --- */
.hero-full-slide:nth-child(4) .slide-grid {
    text-align: center;
    letter-spacing: 5px;
   transform: translateY(-1%);
}

/* ده هيشتغل بس لما المتصفح يكون عرضه أقل من 768px (يعني موبايل أو تابلت) */
@media (max-width: 768px) {
    .hero-full-slide:nth-child(4) .slide-grid {
        /* زود الرقم بالسالب عشان يطلع لفوق أكتر (-20%, -30%, etc) */
        transform: translateY(-20%); 
    }
}

/* 2. الحاوية الكبرى - التحكم في الارتفاع والسنترة */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh; /* ملء الشاشة */
    min-height: 700px;
    background: #020617;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1024px) {
    .hero-container {
        height: auto; 
        min-height: 100vh; /* في الموبايل بنسمح لها تطول لو الكلام كتير */
        overflow-y: visible; /* بنسمح بالسكرول لو السلايد طويل */
        padding: 80px 20px;
    }
}

/* 3. السلايد - يغطي الحاوية بالكامل */
.hero-full-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-full-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* 4. الحاوية الداخلية (Grid) - توزيع الكلام والرسمة */
.slide-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    margin: 100px auto 0 auto; /* نزلناه 100 بيكسل من فوق وسنترناه */
    padding: 20px;
    gap: 30px;
}
/* 5. تحكم منطقة الكلام (Text Side) */
.text-side {
    flex: 1 1 500px;
    max-width: 700px;
    z-index: 5;
    padding: 10px;
}

/* 6. العنوان بلمعة الجرادينت المتحركة */
.main-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(to right, var(--accent-cyan) 20%, #fff 40%, #fff 60%, var(--accent-cyan) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
    margin-bottom: 20px;
}

@keyframes textShine {
    to { background-position: -200% center; }
}

/* 7. الديسكريبشن الزجاجي */
.description {
    width: 100%;
    max-width: 600px;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    padding: 25px;
    background: var(--glass-bg);
    border-radius: 20px;
    border-left: 5px solid var(--accent-cyan);
    backdrop-filter: blur(15px);
    position: relative;
}

/* 8. تحكم منطقة الرسمة (Visual Side) */
.visual-side {
    flex: 1 1 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}

/* 9. تعديلات الموبايل والـ Split Screen (1024px) */
@media (max-width: 1024px) {
    /* 1. الحاوية: نخليها تفتح مع المحتوى ومتبقاش مخنوقة */
    .hero-container {
        height: auto; 
        min-height: 100vh;
        display: flex;
        align-items: center; 
        justify-content: center;
        padding: 100px 20px 60px 20px; /* مساحة للهيدر */
        overflow-y: visible;
    }

    /* 2. الجريد: نخليه حاوية مرنة بسيطة */
    .slide-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 0; /* هنحرك الرسمة لوحدها */
    }

    /* 3. الرسمة: هنخليها "ديكور" علوي مش عنصر بيزاحم الكلام */
    .visual-side {
        position: relative;
        width: 100%;
        height: 200px; /* تحديد ارتفاع ثابت للرسمة في الموبايل */
        margin-bottom: -40px; /* سحب الكلام لفوق شوية لدمجهم */
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(0.8);
        z-index: 1;
    }

    /* 4. منطقة الكلام: السنترة المطلقة */
    .text-side {
        width: 100%;
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 5;
    }

    /* 5. العنوان: نكبره ونخليه واضح */
    .main-title {
        font-size: 2.4rem !important; 
        line-height: 1.2;
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }

    /* 6. الديسكريبشن: نخليه مالي العرض وبحواف ناعمة */
    .description {
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px 20px;
        font-size: 1.05rem;
        background: rgba(15, 23, 42, 0.85); /* خلفية تقيلة عشان يبان فوق أي رسمة */
        backdrop-filter: blur(15px);
        border-left: none;
        border-top: 5px solid var(--accent-cyan);
        border-radius: 20px;
        box-sizing: border-box; /* أهم سطر عشان الكلام ميهربش بره */
        margin: 0 auto !important;
    }

    /* 7. إخفاء الرقم الضخم */
    .slide-number {
        display: none !important;
    }
}
/* 8. تأكيد ان السلايدات متبقاش مخفية او مقصوصة */
    .hero-full-slide {
        position: relative; /* تغيير من absolute لـ relative */
        opacity: 0;
        display: none; /* عشان السلايدات متجيش تحت بعضها */
        padding: 0;
        width: 100%;
    }

    .hero-full-slide.active {
        display: flex;
        opacity: 1;
    }

    /* 9. تظبيط الـ Charts في الموبايل */
    .chart-comparison {
        width: 100%;
        margin-top: 20px;
    }
    
    .comparison-row {
        margin-bottom: 15px;
    }
    /* في الشاشات الكبيرة الزرار مخفي */
.menu-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .header-nav {
        padding: 10px 5%;
        justify-content: space-between;
    }

    /* شكل الهامبرجر */
    .menu-toggle {
        display: block;
        cursor: pointer;
        z-index: 1001; /* فوق القائمة */
    }

    .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: var(--accent-cyan);
        box-shadow: var(--shadow-cyan);
        transition: 0.3s;
    }

    /* القائمة في الموبايل */
@media (max-width: 1024px) {
    /* نأكد إن القائمة بقت Container ثابت في الموبايل */
    .nav-links {
        display: flex !important; /* نغيرها من none لـ flex */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100% !important; /* نأكد إنها مختفية في البداية */
        width: 250px; /* أو 70% حسب رغبتك */
        height: 100vh;
        background: rgba(11, 17, 32, 0.98) !important;
        backdrop-filter: blur(15px);
        padding-top: 80px;
        transition: 0.4s all ease-in-out;
        z-index: 1000;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    /* ده السطر اللي الجافا سكريبت بتفعله */
    .nav-links.active {
        right: 0 !important; /* لما تاخد كلاس active تظهر فوراً */
    }

    .nav-links li {
        margin: 20px 0;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.2rem;
        color: var(--accent-cyan);
        text-decoration: none;
        display: block;
        width: 100%;
    }
    /* تأثير التوهج للينكات المنيو */
.nav-links li a {
    position: relative;
    transition: all 0.3s ease;
    padding: 10px 20px;
}

.nav-links li a:hover {
    color: var(--accent-cyan) !important; /* تغيير اللون للسيان */
    
    /* توهج النص */
    text-shadow: 0 0 10px var(--accent-cyan), 
                 0 0 20px var(--accent-cyan), 
                 0 0 40px var(--accent-cyan);
    
    /* لو عايز تعمل توهج خفيف ورا الكلام (اختياري) */
    background: rgba(34, 211, 238, 0.05);
    border-radius: 8px;
}

/* حركة اختيارية: خط منور تحت اللينك لما توقف عليه */
.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    transition: 0.3s ease;
    transform: translateX(-50%);
}

.nav-links li a:hover::after {
    width: 50%; /* الخط بيفرد من النص لما تعمل hover */
}
}
    /* تحويل الهامبرجر لعلامة X */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* إخفاء أزرار الـ Auth في الموبايل أو وضعها جوه القائمة */
    .header-nav .auth-buttons {
        display: none; /* أو ممكن تنقلها جوه الـ UL */
    }
}
/* تنسيق صفحة التواصل */
.section-contact {
    padding: 120px 5% 60px;
    background: #0b1120;
    text-align: center;
    color: white;
}

.text-glow-cyan {
    color: #22d3ee;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* كروت التواصل مع تأثير الـ Glow عند الـ Hover */
.contact-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.contact-card i {
    font-size: 2.5rem;
    color: #22d3ee;
    margin-bottom: 20px;
}

.contact-card:hover {
    background: rgba(34, 211, 238, 0.05);
    border-color: #22d3ee;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
    transform: translateY(-10px);
}

.contact-card h3 { margin-bottom: 10px; font-size: 1.5rem; }
.contact-card p { color: #94a3b8; font-size: 1.1rem; }
.contact-card span { display: block; margin-top: 15px; font-size: 0.8rem; color: #22d3ee; opacity: 0.8; }

/* السوشيال ميديا وتوهج الأيقونات */
.social-links {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-links a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: #22d3ee;
    color: #0b1120;
    box-shadow: 0 0 15px #22d3ee;
    transform: scale(1.1);
}

/* سيكشن الإحصائيات (Presence) */
.presence-section {
    padding: 60px 5%;
    background: #0b1120;
}

.glass-banner {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(0, 0, 0, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px;
    border-radius: 30px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.presence-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 40px;
}

.p-stat strong {
    display: block;
    font-size: 2.5rem;
    color: #22d3ee;
}

@media (max-width: 768px) {
    .presence-stats { flex-direction: column; gap: 30px; }
}
        /* --- FastAlo FAQ Styles --- */
        /* duplicate :root removed - using consolidated tokens at top */

        .section-faq {
            padding: 80px 5%;
            background-color: var(--bg-dark);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }

        .container {
            max-width: 850px;
            margin: 0 auto;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .text-glow-cyan {
            color: var(--accent-cyan);
            text-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
        }

        .faq-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* الكارت الأساسي للسؤال */
        .faq-item {
            background: var(--glass-white);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-item:hover {
            border-color: var(--accent-cyan);
            background: rgba(34, 211, 238, 0.02);
        }

        .faq-question {
            padding: 22px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .faq-question h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 500;
        }

        .faq-icon {
            color: var(--accent-cyan);
            font-size: 1.4rem;
            transition: transform 0.4s ease;
            display: inline-block;
        }

        /* الجزء المخفي للإجابة */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
            opacity: 0;
            background: rgba(0, 0, 0, 0.15);
        }

        .faq-answer p {
            padding: 20px 30px;
            margin: 0;
            color: var(--text-gray);
            line-height: 1.7;
        }

        /* الحالة المفتوحة (تلقائياً عن طريق JS) */
        .faq-item.open {
            border-color: var(--accent-cyan);
            background: rgba(34, 211, 238, 0.04);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .faq-item.open .faq-answer {
            max-height: 300px; /* مساحة كافية للإجابة */
            opacity: 1;
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg);
            color: #ff4757; /* يقلب أحمر عند القفل */
        }

        @media (max-width: 768px) {
            .section-title { font-size: 2rem; }
            .faq-question { padding: 18px 20px; }
        }
        /* =========================================
           FastAlo - Auth Buttons Global Fix
           ========================================= */

        /* 1. إظهار الزراير في الديسكتوب */
        .nav-auth-desktop {
            display: flex !important; 
            align-items: center;
            gap: 15px;
            z-index: 1001;
        }

/* 2. إخفاء زراير الموبايل في الديسكتوب */
.nav-auth-mobile {
    display: none !important;
}

/* 3. تنسيق الزراير في الموبايل (أقل من 1024px) */
@media (max-width: 1024px) {
    /* اخفي بتوع الديسكتوب */
    .nav-auth-desktop {
        display: none !important;
    }

    /* اظهر نسخة الموبايل جوه المنيو */
    .nav-auth-mobile {
        display: block !important;
        width: 100%;
        padding: 20px;
        border-top: 1px solid rgba(34, 211, 238, 0.1);
        margin-top: 10px;
    }

    .nav-auth-mobile .auth-buttons {
        display: flex !important;
        justify-content: center;
        gap: 12px;
    }

    /* نضمن إن القائمة (UL) مش خافية اللي جواها */
    .nav-links {
        display: flex !important;
        flex-direction: column;
    }
}

/* تحسين شكل الزراير عشان تبان فخمة */
.auth-buttons .login-btn, 
.auth-buttons .signup-btn {
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}

.login-btn { color: var(--text-white); }
.signup-btn { 
    background: var(--accent-cyan); 
    color: var(--primary-bg); 
}

/* Mobile helper styles: show each wrapped word on its own line */
@media (max-width: 768px) {
    .hero-full-slide .main-title.words-wrapped {
        display: block;
        line-height: 1.1;
    }

    .hero-full-slide .main-title.words-wrapped .word-block {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 2px 0;
        white-space: nowrap; /* avoid breaking inside words */
        overflow: visible;
    }
}