/* --- HERO SECTION --- */
.hero { display: flex; flex-direction: column; padding: 60px 0; align-items: center; gap: 50px; min-height: 80vh; justify-content: center; }
.hero-content { text-align: center; position: relative; }
.hero-welcome { font-size: 1.1rem; font-weight: 400; color: var(--primary-blue); text-transform: uppercase; letter-spacing: 4px; margin-bottom: 10px; display: block; opacity: 0.8; }
.hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 15px; line-height: 1.1; }
.hero-subtitle { font-size: 1.4rem; margin-bottom: 25px; color: var(--text-white); }
.accent-text { color: var(--primary-blue); }
.hero-description { color: var(--text-gray); max-width: 550px; margin: 0 auto 35px; font-size: 0.95rem; line-height: 1.8; }

.hero-btns { display: flex; gap: 15px; justify-content: center; }
.btn { padding: 12px 30px; border-radius: 20px; font-weight: 600; transition: var(--transition); position: relative; overflow: hidden; }
.btn-primary { background: var(--primary-blue); color: #03070c; }
.btn-outline { border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--magic-glow); }

.hero-visual { position: relative; perspective: 1000px; }
.image-wrapper { position: relative; padding: 20px; border-radius: 50%; background: rgba(0, 20, 30, 0.5); border: 1px solid rgba(0, 212, 255, 0.3); backdrop-filter: blur(10px); animation: morphing 8s ease-in-out infinite; display: flex; align-items: center; justify-content: center; }

@keyframes morphing { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }

.profile-img { width: 500px; height: 500px; object-fit: cover; border-radius: inherit; filter: drop-shadow(0 50px 50px rgba(0,0,0,0.5)); -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); mask-image: linear-gradient(to bottom, black 80%, transparent 100%); }

/* Floating Cards */
.floating-card { position: absolute; background: rgba(13, 27, 42, 0.8); backdrop-filter: blur(15px); padding: 10px 18px; border-radius: 15px; border: 1px solid var(--primary-blue); display: flex; align-items: center; gap: 10px; font-size: 0.8rem; z-index: 10; animation: float 4s ease-in-out infinite; }
.floating-card i { color: var(--primary-blue); }
.design { top: -20px; right: -20px; animation-delay: 0s; }
.ideas  { bottom: 40px; right: -50px; animation-delay: 2s; }
.code   { bottom: 60px; left: -50px; animation-delay: 2s; }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(3deg); } }

/* Typing Cursor */
#dynamic-text { border-right: 3px solid var(--primary-blue); padding-right: 5px; display: inline-block; white-space: nowrap; animation: blink 0.7s step-end infinite; }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--primary-blue); } }

/* ... باقي كود hero.css الموجود سابقاً ... */

/* Responsive Fixes for Hero */
@media (min-width: 768px) {
    .hero-title { font-size: 4rem; }
}

@media (min-width: 1024px) {
    .hero { flex-direction: row; text-align: left; }
    .hero-content { text-align: left; flex: 1; }
    .hero-btns { justify-content: flex-start; }
    .hero-visual { flex: 1; display: flex; justify-content: flex-end; }
}

/* إصلاح هام للموبايل */
@media (max-width: 767px) {
    .hero { padding: 40px 0; gap: 30px; }
    
    /* جعل الصورة تتناسب مع الشاشة */
    .profile-img {
        width: 300px; /* تصغير الحجم للموبايل */
        height: 300px;
    }
    
@media (max-width: 767px) {
    /* ... الكود القديم ... */

    .floating-card {
        display: flex; /* أعدنا إظهارها */
        padding: 6px 12px; /* تصغير الحجم قليلاً */
        font-size: 0.7rem;
        z-index: 10;
    }

    /* تعديل أماكن الكروت لتبقى داخل إطار الصورة */
    .design {
        top: 0px; 
        right: 10px; 
    }
    .ideas {
        bottom: 20px;
        right: 10px;
    }
    .code {
        bottom: 40px;
        left: 10px;
    }

    /* لمنع الصفحة من التحرك يميناً ويساراً بسبب الكروت */
    .hero-visual {
        overflow: hidden; 
        width: 100%;
        display: flex;
        justify-content: center;
    }
}
    
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn { width: 100%; text-align: center; }
}