:root{
      --bg:#0b0f17; --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.08);
      --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.65); --border:rgba(255,255,255,.14);
      --accent:#7c5cff; --accent2:#22d3ee; --shadow:0 12px 30px rgba(0,0,0,.35);
    }
    html[data-theme="light"]{
      --bg:#f7f8fb; --card:rgba(0,0,0,.04); --card2:rgba(0,0,0,.06);
      --text:rgba(0,0,0,.88); --muted:rgba(0,0,0,.6); --border:rgba(0,0,0,.12);
      --accent:#5b3df0; --accent2:#0891b2; --shadow:0 10px 25px rgba(0,0,0,.10);
    }

    body{
      background: radial-gradient(1200px 600px at 80% 0%, rgba(124,92,255,.22), transparent 60%),
                  radial-gradient(900px 500px at 10% 10%, rgba(34,211,238,.16), transparent 55%),
                  var(--bg);
      color:var(--text);
      font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
      scroll-behavior:smooth;
    }

    /* Navbar */
    .navbar{
      background: rgba(0,0,0,.18);
      border-bottom:1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    html[data-theme="light"] .navbar{ background: rgba(255,255,255,.65); }

    .brand-dot{ width:10px;height:10px;border-radius:50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display:inline-block; margin-inline-start:.5rem;
      box-shadow:0 0 0 4px rgba(124,92,255,.12);
    }

    .btn-accent{
      border:1px solid rgba(124,92,255,.35);
      background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(34,211,238,.75));
      color:#fff;
    }
    .btn-accent:hover{ filter:brightness(1.05); color:#fff; }

    .btn-soft{
      background: var(--card);
      border: 1px solid var(--border);
      color: var(--text);
    }

    /* Sections */
    .section{ padding: 90px 0; }
    .section-title{ font-weight:800; letter-spacing:.2px; }
    .section-sub{ color:var(--muted); max-width:820px; }

    .hero{ padding-top:110px; padding-bottom:70px; }
    .hero-card{
      background: linear-gradient(180deg, var(--card2), var(--card));
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius:24px;
      padding:28px;
    }

    .pill{
      display:inline-flex; align-items:center; gap:.4rem;
      padding:.45rem .8rem; border-radius:999px;
      background: var(--card); border:1px solid var(--border);
      color: var(--muted); font-size:.9rem;
    }

    .card-glass{
      background: linear-gradient(180deg, var(--card2), var(--card));
      border:1px solid var(--border);
      border-radius:20px;
      box-shadow: var(--shadow);
    }

    .tag{
      display:inline-block;
      padding:.35rem .65rem;
      border-radius:999px;
      border:1px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size:.85rem;
      margin:.2rem .2rem 0 0;
    }

    .muted{ color:var(--muted); }
    .divider{ height:1px; background: var(--border); }
    .project-card:hover{ transform: translateY(-4px); transition:.2s ease; }

    .footer{ border-top:1px solid var(--border); padding:26px 0; color:var(--muted); }

    a:focus, button:focus{
      outline:3px solid rgba(34,211,238,.25) !important;
      outline-offset:2px;
    }
    #about {
  margin-top: -80px;
  padding-top: 40px;
}
#skills {
  margin-top: -70px;
}

#skills.section {
  padding-top: 40px;
}
/* تصغير كارت الخبرة */
.experience-card{
  max-width: 600px;     /* حجم الكارت */
}
/* عربي → الكارت يمين */
html[dir="rtl"] .experience-card {
  margin-right: 0 !important;
  margin-left: auto !important;
}

/* إنجليزي → الكارت شمال */
html[dir="ltr"] .experience-card {
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* الموقع بجانب اسم الشركة */
.location-inline {
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#experience {
  margin-top: -60px; /* ارفع أو قلّل حسب ما تحب */
}
/* رفع الأقسام الرئيسية لفوق */
#projects,
#education,
#contact {
  margin-top: -60px;
}

/* تقليل المسافات داخل القائمة */
.experience-card li {
  margin-bottom: 6px;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
}

/* الأيقونة نفسها بتنور وتطفي */
.live-globe {
  color: #ff3b3b;
  animation: globePulse 1.2s infinite;
}

/* Animation */
@keyframes globePulse {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 59, 59, 0.7));
  }
  50% {
    opacity: 0.5;
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 59, 59, 0.8));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 59, 59, 0.7));
  }
}
.contact-form-card input {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
}

.contact-form-card input::placeholder {
  color: var(--muted);
}
.form-success {
  color: #22c55e;
  font-weight: 500;
  text-align: center;
}
.project-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
/* زر اللغة في الموبايل */
.lang-mobile-btn {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 9999;

  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 14px;

  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* إخفاء زر الموبايل في الديسكتوب */
@media (min-width: 992px) {
  .lang-mobile-btn {
    display: none;
  }
}
html[dir="rtl"] .lang-mobile-btn {
  right: auto;
  left: 16px;
}