/* --- Interactive Work Process Animation --- */
.process-grid {
    position: relative;
}

/* الخط الخلفي الباهت */
.process-grid::before {
    content: '';
    position: absolute;
    top: 5rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--glass-border);
    z-index: 0;
}

/* الخط الضوئي المتحرك */
.process-line-progress {
    position: absolute;
    top: 5rem;
    left: 10%;
    width: 0%; /* سيتغير برمجياً */
    height: 2px;
    background: linear-gradient(to right, var(--primary), var(--accent));
    box-shadow: 0 0 15px var(--primary-glow);
    z-index: 1;
    transition: width 0.5s ease-out;
}

.process-step {
    position: relative;
    z-index: 2; /* فوق الخطوط */
    background: var(--bg-black); /* لضمان عدم رؤية الخط خلف البطاقة */
    border: 1px solid var(--glass-border);
}

.process-step.active {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 242, 255, 0.1);
    transform: translateY(-10px);
}

.step-num {
    transition: all 0.4s ease;
}

.process-step.active .step-num {
    color: var(--bg-black);
    background: var(--primary);
    padding: 0.2rem 1rem;
    border-radius: 5px;
    box-shadow: 0 0 15px var(--primary-glow);
}

@media (max-width: 991px) {
    .process-grid::before, .process-line-progress {
        display: none; /* إخفاء الخطوط في وضع الهاتف لتبسيط العرض */
    }
}