/* =========================
   Theme & Base
   — متغيّرات الثيم، الأساسيات، والخلفية العامة
========================= */
:root{
  --bg:#0b1020;
  --bg-soft:#101833;
  --card:#121a36;
  --text:#e6ebff;
  --muted:#b9c2ea;
  --line:#223055;
  --gold:#d4af37;
  --gold-600:#b8921b;
  --purple:#6f42c1;
  --purple-600:#5b33a3;
  --brand:var(--purple);
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  direction:rtl;
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, #16224a 0%, var(--bg) 60%) no-repeat, var(--bg);
  color:var(--text);
  line-height:1.85;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; transition:.25s ease; }
.center{text-align:center;}
.mt-24{ margin-top:24px; }
.container{ width:min(1140px,92%); margin-inline:auto; }
.container.narrow{ width:min(860px,92%); }

/* =========================
   Header (Sticky)
   — ترويسة ثابتة مع بلور خفيف وشريط تنقّل
========================= */
header{
  position:sticky; top:0; inset-inline:0;
  background:rgba(11,16,32,.72);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  z-index:100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; position:relative;
}
/* الشعار */
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text); }
.brand-logo{ height:36px; width:auto; object-fit:contain; }
/* القائمة (ديسكتوب) */
.site-nav{ display:flex; align-items:center; gap:18px; }
.site-nav ul{ display:flex; list-style:none; gap:14px; margin:0 8px 0 0; padding:0; }
.site-nav a{ padding:8px 10px; border-radius:10px; color:var(--text); }
.site-nav a:hover, .site-nav a.active{ background:rgba(255,255,255,.08); }
/* البحث مُلغى */
.search-toggle, .search-bar{ display:none !important; }
/* زر القائمة (هامبرغر) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  width:32px;
  height:32px;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:var(--text);
  margin:6px 0;
  border-radius:2px;
}

.nav-toggle:hover i {
  color: #fff !important;
  opacity: .9;
}


/* =========================
   Sections & Layout
   — تباعد موحّد للأقسام وشبكات عامة للتخطيط
========================= */
.section{ padding:64px 0; border-bottom:1px solid var(--line); }
.section-title{ margin:0 0 16px; line-height:1.3; font-weight:800; font-size:clamp(22px,3.6vw,34px); }
.lead{ color:var(--muted); font-size:1.125rem; }
.grid-2{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:960px){ .grid-2{ grid-template-columns:1fr 1fr; gap:28px; } }

/* =========================
   Hero
   — منطقة البطل: عنوان، أزرار، وصورة خلفية شبكية
========================= */
.hero .hero-copy h1{ font-size:clamp(26px,4.2vw,44px); margin:0 0 12px; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.hero-image{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:
    radial-gradient(220px 120px at 70% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(0deg, rgba(11,16,32,.28), rgba(11,16,32,.28)),
    url('img/hero.jpeg') center/cover no-repeat;
  position:relative; overflow:hidden;
}
.hero-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 40px);
  mix-blend-mode:overlay; opacity:.25;
}
@media (max-width:560px){ .hero-image{ aspect-ratio:16/10; } }

/* =========================
   Stats
   — بطاقات أرقام/إحصاءات شبكية متجاوبة
========================= */
.stats{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.stat{ background:var(--card); padding:16px; border-radius:14px; border:1px solid var(--line); text-align:center; box-shadow:var(--shadow); }
.stat .num{ font-weight:900; font-size:1.6rem; color:var(--gold); }
.stat .label{ color:var(--muted); font-size:.98rem; }
@media (min-width:768px){ .stats{ grid-template-columns:repeat(3,1fr); } }

/* =========================
   Cards
   — شبكة خدمات/كروت مع صورة علوية ونص وزر
========================= */
.cards{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:900px){ .cards{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  display:grid; grid-template-rows:auto 1fr; /* إصلاح: السماح للصورة بتحديد ارتفاعها */
  transition:.3s ease;
}
.card:hover{ transform:translateY(-3px); }
.card-media{ 
  min-height:200px; /* خط أساس لصورة الكرت */
  border-bottom:1px solid var(--line); 
  background-size:cover; background-position:center; background-repeat:no-repeat; 
}
.card-body{ display:flex; flex-direction:column; padding:18px; text-align:center; }
.card h3{ margin:0 0 8px; font-size:1.2rem; }
.card p{ color:var(--muted); margin:0; flex-grow:1; }
.card-body .btn{ align-self:center; margin-top:24px; font-size:.9rem; }
/* خلفيات افتراضية للكروت */
.media-dev{ background:linear-gradient(0deg,rgba(11,16,32,.35),rgba(11,16,32,.35)),url('img/programing.jpg') center/cover no-repeat; }
.media-mkt{ background:linear-gradient(0deg,rgba(11,16,32,.35),rgba(11,16,32,.35)),url('img/marketing.png') center/cover no-repeat; }
.media-trn{ background:linear-gradient(0deg,rgba(11,16,32,.35),rgba(11,16,32,.35)),url('img/training.webp') center/cover no-repeat; }
@media (hover:hover){ .card:hover .card-media{ filter:brightness(1.06); } }

/* =========================
   Footer
   — فوتر ديسكتوب + فورم بسيط للنشرة البريدية
========================= */
.site-footer{ background:var(--bg-soft); padding-top:36px; border-top:1px solid var(--line); }
.grid-4{ display:grid; grid-template-columns:1fr; gap:22px; }
@media (min-width:900px){ .grid-4{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.footer-col h4{ margin:0 0 10px; }
.footer-links{ list-style:none; padding:0; margin:8px 0 0; }
.footer-links a{ color:var(--muted); }
.footer-links a:hover{ color:var(--text); }
.newsletter{ display:grid; gap:10px; }
.newsletter input{
  width:100%; background:#0a1430; color:var(--text); border:1px solid #1e2e57;
  padding:12px 14px; border-radius:12px; outline:none;
}
.newsletter input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(111,66,193,.25); }
.copyright{ margin-top:24px; border-top:1px solid var(--line); padding:16px 0; text-align:center; color:var(--muted); }

/* =========================
   Forms (عام)
   — تنسيق حقول الإدخال والـ placeholder والتركيز
========================= */
input,select,textarea{
  background:#0a1430; color:var(--text); border:1px solid #1e2e57;
  padding:12px 14px; border-radius:12px; outline:none; width:100%;
}
input::placeholder,textarea::placeholder{ color:#8ea1d8; }
input:focus,textarea:focus,select:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(111,66,193,.25); }
button,input,select,textarea{ font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-weight:500; line-height:1.4; }
::placeholder{ font-family:'Tajawal'; font-weight:400; color:#9bb0d3; opacity:1; }
.newsletter input{ text-align:right; }

/* =========================
   Utilities
   — مساعدات عامة لمنع سكرول أفقي غير مرغوب
========================= */
header,main,footer,section,.container,.cards,.logos{ max-width:100%; overflow-x:clip; }

/* =========================
   Mobile — رأس الصفحة والقائمة
   — إخفاء قائمة الديسكتوب وإظهار سلايد من اليسار عند الفتح
========================= */
@media (max-width:960px){
  .site-nav{ display:none; }
  .header-inner{ justify-content:center; position:relative; }
  .nav-toggle{
    display:inline-block;
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    z-index:110;
  }
  header.nav-open .site-nav{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0; bottom:0;
    height:100vh; width:240px;
    background:rgba(11,16,32,.98);
    border-inline-end:1px solid var(--line);
    padding:60px 20px;
    gap:14px;
    transform:translateX(-100%);
    transition:transform .35s ease;
    z-index:1000;
  }
  header.nav-open .site-nav{ transform:translateX(0); }
  .site-nav ul{
    flex-direction:column; width:100%;
    margin:0; padding:0; gap:8px;
  }
  .site-nav a{
    display:block; width:100%; padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
}

/* =========================
   Mobile — تحسينات إضافية
   — ضبط أحجام البطل والأزرار في الشاشات الصغيرة
========================= */
@media (max-width:640px){
  .section{ padding:46px 0; }
  .hero .hero-copy h1{ font-size:28px; }
  .btn{ padding:11px 18px; border-radius:14px; }
}

/* =========================
   Back To Top
   — زر عائم للعودة للأعلى مع SVG وشادو ناعم
========================= */
#backToTop{
  position:fixed; bottom:30px; left:30px; background:none; border:none; cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease;
  z-index:1000; width:44px; height:44px; padding:0;
}
#backToTop svg{ width:100%; height:100%; filter:drop-shadow(0 0 10px rgba(212,175,55,.25)); transition:transform .3s ease, filter .3s ease; }
#backToTop:hover svg{ transform:translateY(-4px); filter:drop-shadow(0 0 14px rgba(212,175,55,.45)); }
#backToTop.show{ opacity:1; visibility:visible; }

/* =========================
   Arabic text alignment niceties
   — تحسين محاذاة النصوص العربية وتوسيط أزرار الـ actions
========================= */
.actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:16px; }
.actions .btn{ flex:1 1 180px; max-width:220px; text-align:center; white-space:nowrap; }
.hero-copy p,.section p,.card p,.lead{ text-align:justify; text-align-last:center; direction:rtl; line-height:1.9; }
/* أمان يمنع أي سكرول أفقي شاذ في الصفحة الرئيسية */
body.home{ overflow-x:hidden; }

/* =======================
   HOTFIX — Buttons Restore
   — قاعدة موحّدة للأزرار (روابط/أزرار) مع ثيمين ذهبي وبنفسجي
======================= */
:where(a.btn, button.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.35;
  transition: .25s ease;
  font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.btn-gold {
  background: linear-gradient(135deg, #d4af37, #b78e2d);
  color: #fff;
}
.btn-gold:hover {
  background: linear-gradient(135deg, #f1c44c, #d4af37);
  box-shadow: 0 0 10px rgba(212, 175, 55, .35);
}
.btn-purple {
  background: linear-gradient(135deg, #9b59b6, #7d3c98);
  color: #fff;
}
.btn-purple:hover {
  background: linear-gradient(135deg, #b67ee2, #9b59b6);
  box-shadow: 0 0 10px rgba(155, 89, 182, .35);
}
.btn.small { padding: 9px 16px; font-size: .94rem; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none;
  cursor: not-allowed;
}
/* منع تأثير الـ nav على أزرار داخلها */
.site-nav > ul > li > a {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a.active {
  background: rgba(255,255,255,.08);
}

/* =========================
   Mobile Buttons — Full Width
   — جعل الأزرار بعرض الشاشة على الموبايل
========================= */
@media (max-width: 768px) {
  .btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }
  .actions { flex-direction: column; gap: 10px; }
  .actions .btn { max-width: none; width: 100%; }
}

/* ===== HOTFIX: Hero actions buttons full-width on mobile =====
   — نسخة مؤكّدة مع !important لتجاوز أي قواعد أخرى إن وُجدت
*/
@media (max-width: 768px) {
  .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .actions .btn { display: block !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; box-sizing: border-box !important; text-align: center !important; white-space: nowrap !important; }
}

/* =========================
   Footer — Mobile
   — إخفاء فوتر الديسكتوب على الموبايل واستبداله بفوتر مبسّط مع أيقونات
========================= */
@media (max-width: 768px) {
  .site-footer { display: none !important; }
  .mobile-footer { display: block; }
}
@media (min-width: 769px) {
  .mobile-footer { display: none; }
}
.mobile-footer {
  background: rgba(11,16,32,.95);
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 16px 0 10px;
  color: var(--muted);
  font-size: 14px;
  position: relative;
  z-index: 100;
}
.mobile-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 8px;
}
/* أيقونات بيضاء كما طُلِب */
.mobile-social a {
  color: #ffffff;
  font-size: 22px;
  transition: color .3s ease, transform .3s ease;
}
.mobile-social a:hover {
  color: var(--gold);
  transform: scale(1.2);
}
.mobile-copy { font-size: 13px; color: var(--muted); line-height: 1.6; }
.mobile-copy strong { color: var(--gold); }

/* ===== Accessibility helper =====
   — عنصر فقط لقارئات الشاشة لتحسين الوصولية
*/
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* =========================
   Section: Work With Us (CTA)
   — صندوق دعوة لاتخاذ إجراء بخلفية مصوّرة ونص بارز
========================= */
.cta-section {
  background:
    linear-gradient(0deg, rgba(11,16,32,.35), rgba(11,16,32,.35)),
    url('img/programing.jpg') center/cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  color: var(--text);
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-section h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}
.cta-section .lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.cta-section .btn {
  font-size: 1rem;
  padding: 12px 28px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .cta-section {
    padding: 22px 16px;
    text-align: right;
  }
  .cta-section h3 {
    font-size: 1.4rem;
  }
  .cta-section .lead {
    text-align: justify;
    text-align-last: right;
  }
  .cta-section .btn {
    width: 100%;
    text-align: center;
  }
}

/* =========================
   Cards — Title Centered Inside Image
   — جعل عنوان الكرت داخل الصورة ومتمركزًا مع تدرّج تحسين التباين
========================= */
.card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  min-height: 220px; /* إصلاح: استخدام min-height بدل height لتفادي تعارض الشبكة */
}
/* تدرّج غامق لتحسين وضوح العنوان */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
/* العنوان داخل الصورة */
.card-media h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .4px;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  padding: 0 10px;
  line-height: 1.3;
}
/* تفاعل عند التحويم: إضاءة طفيفة للصورة والطبقة */
@media (hover:hover){
  .card:hover .card-media { filter: brightness(1.08); }
  .card:hover .card-media::after { background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.45) 100%); }
}


.hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
    justify-content: center;

}

.badge{
  font-size: .82rem;
  color: var(--muted);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 12px;
  background: rgba(11,16,32,.85);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 480px){
  .hero-badges{
    justify-content: flex-start; /* أو center حسب ذوقك */
  }
}