:root{
      --bg-dark:#0a0a0f;
      --bg-card:#151520;
      --primary:#8b5cf6;
      --primary-glow:rgba(139,92,246,0.5);
      --gold:#fbbf24;
      --gold-glow:rgba(251,191,36,0.4);
      --text:#f1f5f9;
      --text-muted:#94a3b8;
      --border:#2a2a40;
    }
    
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    
    body{
      font-family:'Cairo',sans-serif;
      background:var(--bg-dark);
      color:var(--text);
      overflow-x:hidden;
      line-height:1.6;
      min-height:100vh;
    }
    
    /* خلفية النجوم */
    #stars-bg{
      position:fixed;
      top:0;left:0;width:100%;height:100%;
      z-index:-2;
      background:linear-gradient(135deg,#0a0a0f 0%,#1a1a2e 50%,#0f0a1a 100%);
      animation:gradientShift 15s ease infinite;
    }
    @keyframes gradientShift{
      0%,100%{background-position:0% 50%}
      50%{background-position:100% 50%}
    }
    .star{
      position:absolute; background:#fff; border-radius:50%;
      animation:twinkle var(--duration,3s) ease-in-out infinite var(--delay,0s);
      opacity:var(--opacity,0.8);
    }
    @keyframes twinkle{
      0%,100%{opacity:var(--opacity,0.8);transform:scale(1)}
      50%{opacity:1;transform:scale(1.2)}
    }
    
    /* شاشة التحميل */
    #loader{
      position:fixed; top:0;left:0;width:100%;height:100%;
      background:var(--bg-dark);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      z-index:9999; transition:opacity 0.5s,visibility 0.5s;
    }
    #loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
    .loader-logo{
      width:200px; height:200px;
      margin-bottom:20px; animation:pulse 2s infinite;
      filter:drop-shadow(0 0 25px var(--gold-glow));
    }
    @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
    .loader-text{font-size:1.2rem;color:var(--gold);font-weight:600;letter-spacing:2px}
    .loader-bar{width:200px;height:4px;background:var(--border);border-radius:2px;margin-top:15px;overflow:hidden}
    .loader-progress{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--gold));border-radius:2px;animation:loading 2s ease-in-out forwards}
    @keyframes loading{to{width:100%}}
    
    /* زر تبديل اللغة */
    .lang-switcher{
      position:fixed; top:20px; right:20px;
      z-index:1000;
      background:var(--bg-card);
      border:2px solid var(--primary);
      border-radius:50px;
      padding:8px 20px;
      cursor:pointer;
      font-weight:600;
      color:var(--gold);
      transition:all 0.3s;
      box-shadow:0 5px 15px var(--primary-glow);
    }
    .lang-switcher:hover{
      transform:translateY(-3px);
      box-shadow:0 8px 25px var(--primary-glow);
    }
    
    /* الهيدر */
    header{
      text-align:center;
      padding:120px 20px 60px;
      position:relative;
    }
    .logo{
      width:1px; height:1px;
      object-fit:contain;
      filter:drop-shadow(0 0 30px var(--gold-glow));
      transition:transform 0.3s;
      margin-bottom:20px;
      background:transparent;
    }
    .logo:hover{transform:rotate(3deg) scale(1.05)}
    
    /* القسم الرئيسي */
    .hero{
      max-width:1200px;
      margin:0 auto;
      padding:40px 20px;
      display:grid;
      grid-template-columns:1fr 2fr;
      gap:50px;
      align-items:center;
    }
    
    .profile-section{
      text-align:center;
    }
    
    /* ✅ الصورة الشخصية - مع تحسينات SEO */
    .profile-img{
      aspect-ratio: 1/1;
      object-fit: contain;
      object-position: center;
      border-radius: 240px;
      
      /* الحجم الأساسي */
      width: 300px;
      height: 300px;
      
      border: 4px solid var(--primary);
      box-shadow: 0 0 50px var(--primary-glow), 0 0 100px var(--gold-glow);
      margin-bottom: 25px;
      transition: all 0.3s ease;
      cursor: pointer;
      background: var(--bg-card);
      filter: none !important;
      -webkit-filter: none !important;
    }
    .profile-img:hover{
      transform: scale(1.02) translateY(-3px);
      box-shadow: 0 0 60px var(--primary-glow), 0 0 110px var(--gold-glow);
      border-color: var(--gold);
    }
    
    /* 📱 تليفون صغير */
    @media (max-width: 479px) {
      .profile-img{
        width: 320px;
        height: 320px;
        border-radius: 20px;
        border-width: 3px;
      }
      .hero{ grid-template-columns:1fr; gap:30px; }
      .profile-name{font-size:1.6rem}
      .info-section{padding:25px}
    }
    
    /* 📱 تليفون كبير */
    @media (min-width: 767px) and (max-width: 767px) {
      .profile-img{
        width: 220px;
        height: 391px;
        border-radius: 22px;
        border-width: 4px;
      }
      .hero{ grid-template-columns:1fr; gap:30px; }
    }
    
    /* 💻 لابتوب */
    @media (min-width: 1023px) and (max-width: 1023px) {
      .profile-img{
        width: 260px;
        height: 462px;
        border-radius: 26px;
        border-width: 5px;
      }
      .profile-img:hover{ transform: scale(1.04) translateY(-5px); }
    }
    
    /* 🖥️ كمبيوتر مكتبي */
    @media (min-width: 1024px) {
      .profile-img{
        width: 533px;
        height: 533px;
        border-radius: 28px;
        border-width: 5px;
        box-shadow: 0 0 70px var(--primary-glow), 0 0 140px var(--gold-glow);
      }
      .profile-img:hover{
        transform: scale(1.03) translateY(-5px);
        box-shadow: 0 0 90px var(--primary-glow), 0 0 180px var(--gold-glow);
      }
    }
    
    .profile-name{
      font-size:2rem;
      font-weight:800;
      background:linear-gradient(90deg,var(--gold),var(--primary),var(--gold));
      background-size:200% auto;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:shine 3s linear infinite;
      margin-bottom:10px;
    }
    @keyframes shine{to{background-position:200% center}}
    .profile-title{
      color:var(--gold);
      font-size:1.2rem;
      font-weight:600;
      margin-bottom:15px;
    }
    .profile-experience{
      background:var(--bg-card);
      border:2px solid var(--border);
      border-radius:15px;
      padding:15px;
      margin-top:20px;
    }
    .exp-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--primary);
      font-weight:700;
      font-size:1.1rem;
    }
    .exp-badge i{color:var(--gold)}
    
    .info-section{
      background:var(--bg-card);
      border:2px solid var(--border);
      border-radius:20px;
      padding:40px;
      position:relative;
      overflow:hidden;
    }
    .info-section::before{
      content:'';
      position:absolute;
      top:0; left:0; right:0;
      height:4px;
      background:linear-gradient(90deg,var(--primary),var(--gold));
    }
    .section-heading{
      font-size:1.8rem;
      color:var(--gold);
      margin-bottom:25px;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .section-heading i{
      background:linear-gradient(135deg,var(--primary),var(--gold));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .bio-text{
      font-size:1.1rem;
      line-height:1.9;
      color:var(--text-muted);
      margin-bottom:30px;
      text-align:justify;
    }
    
    /* الخدمات */
    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:25px;
      margin-top:30px;
    }
    .service-card{
      background:rgba(139,92,246,0.1);
      border:2px solid var(--border);
      border-radius:15px;
      padding:25px;
      text-align:center;
      transition:all 0.3s;
      cursor:pointer;
    }
    .service-card:hover{
      border-color:var(--primary);
      transform:translateY(-8px);
      box-shadow:0 15px 35px var(--primary-glow);
    }
    .service-icon{
      font-size:2.5rem;
      color:var(--gold);
      margin-bottom:15px;
    }
    .service-title{
      font-size:1.2rem;
      font-weight:700;
      margin-bottom:10px;
      color:var(--text);
    }
    .service-desc{
      color:var(--text-muted);
      font-size:0.95rem;
    }
    
    /* المشاريع */
    .projects-section{
      max-width:1200px;
      margin:60px auto;
      padding:0 20px;
    }
    .project-card{
      background:var(--bg-card);
      border:2px solid var(--border);
      border-radius:20px;
      padding:35px;
      margin-top:30px;
      display:flex;
      align-items:center;
      gap:30px;
      transition:all 0.3s;
      position:relative;
      overflow:hidden;
    }
    .project-card::before{
      content:'';
      position:absolute;
      left:0; top:0; bottom:0;
      width:5px;
      background:linear-gradient(180deg,var(--primary),var(--gold));
    }
    .project-card:hover{
      border-color:var(--gold);
      transform:translateX(-10px);
      box-shadow:0 20px 40px var(--gold-glow);
    }
    .project-icon{
      font-size:3rem;
      color:var(--gold);
      min-width:80px;
      text-align:center;
    }
    .project-info h3{
      font-size:1.5rem;
      color:var(--gold);
      margin-bottom:10px;
    }
    .project-info p{
      color:var(--text-muted);
      margin-bottom:15px;
    }
    .project-link{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:linear-gradient(135deg,var(--primary),#7c3aed);
      color:#fff;
      padding:12px 25px;
      border-radius:50px;
      text-decoration:none;
      font-weight:600;
      transition:all 0.3s;
    }
    .project-link:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 25px var(--primary-glow);
    }
    
    /* التواصل */
    .contact-section{
      max-width:800px;
      margin:80px auto;
      padding:0 20px;
      text-align:center;
    }
    .contact-title{
      font-size:2rem;
      color:var(--gold);
      margin-bottom:40px;
    }
    .contact-buttons{
      display:flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
    }
    .contact-btn{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:18px 35px;
      border-radius:50px;
      text-decoration:none;
      font-weight:700;
      font-size:1.05rem;
      transition:all 0.3s;
      box-shadow:0 10px 30px rgba(0,0,0,0.3);
    }
    .whatsapp-btn{
      background:linear-gradient(135deg,#25d366,#128c7e);
      color:#fff;
    }
    .telegram-btn{
      background:linear-gradient(135deg,#0088cc,#00a8e6);
      color:#fff;
    }
    .email-btn{
      background:linear-gradient(135deg,#ea4335,#c5221f);
      color:#fff;
    }
    .contact-btn:hover{
      transform:translateY(-5px) scale(1.05);
      box-shadow:0 15px 40px rgba(0,0,0,0.4);
    }
    
    /* الفوتر */
    footer{
      text-align:center;
      padding:40px 20px;
      margin-top:80px;
      border-top:2px solid var(--border);
      color:var(--text-muted);
    }
    .footer-text{
      font-size:1.1rem;
      margin-bottom:10px;
    }
    .footer-heart{
      color:#ef4444;
      animation:heartbeat 1.5s ease-in-out infinite;
    }
    @keyframes heartbeat{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.2)}
    }
    
    /* زر العودة للأعلى */
    #back-to-top{
      position:fixed;
      bottom:30px; left:30px;
      width:50px; height:50px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--primary),var(--gold));
      color:#fff;
      border:none;
      font-size:1.3rem;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      visibility:hidden;
      transition:all 0.3s;
      box-shadow:0 5px 20px rgba(0,0,0,0.3);
      z-index:999;
    }
    #back-to-top.visible{opacity:1;visibility:visible}
    #back-to-top:hover{
      transform:translateY(-5px);
      box-shadow:0 10px 30px var(--primary-glow);
    }
    
    /* 🔥 Modal لعرض الصورة الكاملة */
    .modal {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      background: rgba(10, 10, 15, 0.95);
      backdrop-filter: blur(10px);
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.3s ease;
    }
    .modal.active { display: flex; }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .modal-content {
      max-width: 90%;
      max-height: 90%;
      border-radius: 20px;
      border: 4px solid var(--gold);
      box-shadow: 0 0 80px var(--gold-glow), 0 0 150px var(--primary-glow);
      animation: zoomIn 0.4s ease;
      cursor: zoom-out;
      object-fit: contain;
    }
    @keyframes zoomIn {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal-close {
      position: absolute;
      top: 30px;
      left: 30px;
      font-size: 2.5rem;
      color: var(--gold);
      cursor: pointer;
      transition: all 0.3s;
      background: var(--bg-card);
      width: 50px; height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--primary);
    }
    .modal-close:hover {
      transform: rotate(90deg) scale(1.1);
      background: var(--primary);
      color: #fff;
    }
    
    /* ✅ محتوى مخفي لتحسين SEO (للقراء الآليين فقط) */
    .seo-content {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    /* التجاوب للمحتوى */
    @media(max-width:768px){
      .project-card{ flex-direction:column; text-align:center; }
      .contact-buttons{ flex-direction:column; align-items:center; }
      .contact-btn{ width:100%; max-width:300px; justify-content:center; }
    }
    @media(max-width:480px){
      .profile-name{font-size:1.4rem}
      .section-heading{font-size:1.4rem}
      .services-grid{grid-template-columns:1fr}
    }
    
    /* سكروول بار */
    ::-webkit-scrollbar{width:10px}
    ::-webkit-scrollbar-track{background:var(--bg-dark)}
    ::-webkit-scrollbar-thumb{
      background:linear-gradient(180deg,var(--primary),var(--gold));
      border-radius:5px;
    }
    ::-webkit-scrollbar-thumb:hover{background:var(--gold)}