/* ============ تبويبات الأقسام (RTL + كبسولات ذهبية) ============ */
.section-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 12px; padding:10px;
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
}
.section-tabs a{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px; font-weight:900; font-size:.95rem;
  color:var(--ink); background:#fff; border:1px solid var(--border);
  transition:all .2s ease;
}
.section-tabs a:hover{transform:translateY(-1px); border-color:var(--gold)}
.section-tabs a::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--gold);
}

/* إبراز التبويب النشِط عند الانتقال لرابط فيه #مرساة */
:target ~ .section-tabs a[href*="#"]:not([href="#"]) {opacity:.9}
.section-tabs a[href="#ai"]:target,
.section-tabs a[href="#marketing"]:target,
.section-tabs a[href="#courses"]:target,
.section-tabs a[href="#education"]:target,
.section-tabs a[href="#order"]:target{
  background:var(--ink); color:#fff; border-color:var(--ink);
}

/* ============ عناوين الأقسام بأيقونات (بدون مكتبات) ============ */
.section-title{position:relative; padding-right:42px; font-size:1.25rem!important; font-weight:900!important}
.section-title::before{
  position:absolute; right:0; top:0; font-size:22px; line-height:1;
  background:linear-gradient(180deg,#facc15,#d97706);
  -webkit-background-clip:text; color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
  content:"★"; /* افتراضي */
}

/* اربط الأيقونة حسب نوع القسم عبر data-icon على العنوان */<style>
/* ============ CSS – تنسيق العناوين والأيقونات ============ */
.section-title {
  position:relative; padding-right:42px;
  font-size:1.25rem!important; font-weight:900!important;
}
.section-title::before {
  position:absolute; right:0; top:0; font-size:22px; line-height:1;
  background:linear-gradient(180deg,#facc15,#d97706);
  -webkit-background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
  content:"★"; /* افتراضي */
}

/* أيقونات خاصة لكل قسم */
.section-title[data-icon="ai"]::before {content:"🤖"}
.section-title[data-icon="marketing"]::before {content:"📣"}
.section-title[data-icon="courses"]::before {content:"🎓"}
.section-title[data-icon="education"]::before {content:"📘"}
.section-title[data-icon="order"]::before {content:"🛠️"}

/* شبكة المنتجات – أصغر وأشيك */
#ai .products, #marketing .products, #courses .products, #education .products {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;
}
</style>

<!-- ============ HTML – الأقسام مع data-icon ============ -->

<section id="ai">
  <h2 class="section-title" data-icon="ai">الذكاء الاصطناعي</h2>
  <!-- منتجات قسم الذكاء الاصطناعي -->
</section>

<section id="marketing">
  <h2 class="section-title" data-icon="marketing">التسويق</h2>
  <!-- منتجات قسم التسويق -->
</section>

<section id="courses">
  <h2 class="section-title" data-icon="courses">الدورات التدريبية</h2>
  <!-- منتجات قسم الدورات التدريبية -->
</section>

<section id="education">
  <h2 class="section-title" data-icon="education">التعليم</h2>
  <!-- منتجات قسم التعليم -->
</section>

<section id="order">
  <h2 class="section-title" data-icon="order">اطلب خدمتك</h2>
  <a href="/contact" class="btn">اطلب الآن</a>
</section>

/* بطاقات أصغر قليلًا لهذا السكشن */
#ai .products, #marketing .products, #courses .products, #education .products{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;
}
#ai .product-card, #marketing .product-card, #courses .product-card, #education .product-card{
  border-radius:12px!important; overflow:hidden; box-shadow:var(--shadow)!important;
}
#ai .product-card img, #marketing .product-card img, #courses .product-card img, #education .product-card img{
  aspect-ratio:4/5; object-fit:cover; border-bottom:1px solid var(--border)
}

/* شارة/بادج فاخرة */
#ai .badge, #marketing .badge, #courses .badge, #education .badge{
  background:linear-gradient(180deg, rgba(217,119,6,.14), rgba(217,119,6,.08))!important;
  color:var(--ink)!important; border:1px solid rgba(217,119,6,.35)!important;
  border-radius:999px; font-weight:900; padding:6px 10px;
}

/* زر “اطلب خدمتك” بشكل أوضح */
#order .cta-big{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:#1f2937; border:0; border-radius:14px;
  padding:14px 20px; font-weight:900; box-shadow:0 10px 24px rgba(217,119,6,.25);
}
#order .cta-big:hover{background:var(--gold-2); transform:translateY(-1px)}
#order .cta-big::before{content:"🛍️"}