/* ═══════════════════════════════════════════════════════════════
   visual-v2.css — هويّة وتد البصريّة الجديدة (٢٠٢٦)
   ────────────────────────────────────────────────────────────────
   آخر مرحلة مكتملة: ١ — الخطوط والخلفيّة العامّة
   التاريخ: ١٨ مايو ٢٠٢٦
   النطاق: موقع الزبائن (public_html) — لا يخصّ موقع العاملين
   الحالة: مُحمَّل في header.php بعد visual-upgrade.css

   مرجع التصميم:
   ~/Downloads/design_handoff_watadwaqf/

   ملاحظة: كل المتغيّرات بادئتها --v2- لمنع التصادم مع
   --brand-* (من DB) و --w-* (من visual-upgrade.css القديم).
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   @font-face — الخطوط الجديدة (مرحلة ١)
   المسار النسبي من css/ → assets_public/fonts/
   font-display: swap → fallback يظهر مؤقّتًا حتّى ينزل الخطّ
   ───────────────────────────────────────────────────── */

/* Display — Year of the Camel (Bold + ExtraBold) */
@font-face {
  font-family: "Year of the Camel";
  src: url("../assets_public/fonts/alfont_com_TheYearofTheCamel-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Year of the Camel";
  src: url("../assets_public/fonts/alfont_com_TheYearofTheCamel-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Body — NorsalGX (الأساسي) */
@font-face {
  font-family: "NorsalGX";
  src: url("../assets_public/fonts/alfont_com_NorsalGX.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Body — AlFont (احتياط) */
@font-face {
  font-family: "AlFont 4-28";
  src: url("../assets_public/fonts/alfont_com_AlFont_com_4_28.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AlFont 4-27";
  src: url("../assets_public/fonts/alfont_com_AlFont_com_4_27.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Latin — SF UI Text (Regular + Medium) */
@font-face {
  font-family: "SF UI Text";
  src: url("../assets_public/fonts/FontsFree-Net-sf-ui-text-regular-58646b56a688c.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF UI Text";
  src: url("../assets_public/fonts/FontsFree-Net-SF-UI-Text-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── الألوان الرسميّة السبع ─── */
  --v2-navy:   #132a4a;
  --v2-steel:  #3A5072;
  --v2-deep:   #0E2A52;
  --v2-brown:  #6B4A3A;
  --v2-gold:   #C6A46A;
  --v2-beige:  #ede3d3;
  --v2-ink:    #1A1A1A;

  /* ─── المشتقّات العشر (من ملف التصميم) ─── */
  --v2-steel-soft: #5a7299;
  --v2-steel-pale: #e3e8f0;
  --v2-brown-soft: #8a6651;
  --v2-gold-soft:  #d8bd8a;
  --v2-gold-deep:  #a8864b;
  --v2-paper:      #faf6ec;
  --v2-beige-warm: #f5ecd9;
  --v2-ink-soft:   #3a3a3a;
  --v2-line:        rgba(58,80,114,.14);
  --v2-line-strong: rgba(58,80,114,.28);
  --v2-line-warm:   rgba(107,74,58,.18);

  /* ─── الخطوط (محدّثة — مرحلة ١) ─── */
  --v2-display: "Year of the Camel", "Cairo", system-ui, sans-serif;
  --v2-body:    "NorsalGX", "AlFont 4-28", "Tajawal", system-ui, sans-serif;
  --v2-latin:   "SF UI Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --v2-serif:   "Amiri", serif;
  /* خطّ "نسيم" — مَكان الخطّ المُخصَّص لو رُفع لاحقًا، حاليًّا fallback لـCairo */
  --v2-naseem:  "Naseem", "Cairo", "Tajawal", "NorsalGX", system-ui, sans-serif;

  /* ─── الأبعاد ─── */
  --v2-container:    1240px;
  --v2-radius-sm:    6px;
  --v2-radius-md:    8px;
  --v2-radius-full:  999px;

  /* ─── السبيسنغ ─── */
  --v2-space-1: 4px;
  --v2-space-2: 8px;
  --v2-space-3: 12px;
  --v2-space-4: 16px;
  --v2-space-5: 22px;
  --v2-space-6: 30px;
  --v2-space-7: 44px;
  --v2-space-8: 60px;

  /* ─── الظلال ─── */
  --v2-shadow-card:      0 16px 40px -20px rgba(19,42,74,.3);
  --v2-shadow-medallion: 0 30px 80px -20px rgba(19,42,74,.45);
}

/* ═══════════════════════════════════════════════════════════════
   المرحلة ١ — الخطوط والخلفيّة العامّة
   ═══════════════════════════════════════════════════════════════ */

/* تجاوز المتغيّر القديم من BrandFontManager → كل العناوين
   التي تستخدم --brand-font-headings (في visual-upgrade.css)
   ستنتقل تلقائيًّا للخطّ الجديد بدون لمس selectors */
:root {
  --brand-font-headings: "Year of the Camel", "Cairo", system-ui, sans-serif;
}

/* body — خطّ الجسم + الخلفيّة الجديدة
   !important ضروري لأنّ visual-upgrade.css يستخدم !important */
body {
  font-family: var(--v2-body) !important;
  background:  var(--v2-paper) !important;
}

/* ═══════════════════════════════════════════════════════════════
   المرحلة ٢ — الفوتر
   ═══════════════════════════════════════════════════════════════ */

/* شريط الألوان السبعة فوق الفوتر — هويّة بصريّة */
.v2-palette-strip {
  display: flex;
  height: 5px;
  width: 100%;
}
.v2-palette-strip > span { flex: 1; }
.v2-palette-strip .c1 { background: var(--v2-navy); }
.v2-palette-strip .c2 { background: var(--v2-steel); }
.v2-palette-strip .c3 { background: var(--v2-deep); }
.v2-palette-strip .c4 { background: var(--v2-brown); }
.v2-palette-strip .c5 { background: var(--v2-gold); }
.v2-palette-strip .c6 { background: var(--v2-beige); }
.v2-palette-strip .c7 { background: var(--v2-ink); }

/* الفوتر الأساسي */
.v2-footer {
  background: var(--v2-deep);
  color: rgba(237, 227, 211, 0.7);
  padding: 44px 20px 18px;
  margin-top: 60px;
  font-size: 13px;
  line-height: 1.75;
  border-top: 1px solid rgba(198, 164, 106, 0.25);
}
.v2-footer a {
  color: rgba(237, 227, 211, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.v2-footer a:hover { color: var(--v2-gold); }

.v2-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

/* شبكة الأعمدة الأربعة */
.v2-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(237, 227, 211, 0.1);
}

/* عناوين الأعمدة */
.v2-footer-grid h4 {
  font-family: var(--v2-display);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* العمود ١ — الهويّة */
.v2-footer-brand .brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.v2-footer-brand .brand-row .brand-mark {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--v2-gold);
  box-shadow: 0 0 0 1px rgba(198, 164, 106, 0.25);
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.v2-footer-brand .brand-row .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.7);
  transform-origin: center;
}
.v2-footer-brand .brand-row .brand-mark .brand-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--v2-navy);
  color: var(--v2-gold);
  font-family: var(--v2-display);
  font-size: 36px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.v2-footer-brand .brand-name {
  display: block;
  font-family: var(--v2-display);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.v2-footer-brand .brand-tag {
  display: block;
  color: var(--v2-gold-soft);
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}
.v2-footer-brand .about {
  font-size: 13px;
  line-height: 1.75;
  margin: 14px 0;
  color: rgba(237, 227, 211, 0.7);
}
.v2-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-gold) !important;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.v2-footer-link:hover {
  color: var(--v2-gold) !important;
  border-bottom-color: var(--v2-gold);
}

/* قوائم الروابط (العمودان ٢ و ٣) */
.v2-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v2-footer-list a { font-size: 13px; }
.v2-footer-list a.highlight {
  color: var(--v2-gold);
  font-weight: 600;
}

/* العمود ٤ — التواصل بأيقونات صناديق ذهبيّة */
.v2-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-footer-contact .row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.v2-footer-contact .ico {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(198, 164, 106, 0.1);
  color: var(--v2-gold);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.v2-footer-contact .ico svg {
  width: 14px;
  height: 14px;
}

/* الشريط السفلي — حقوق + روابط قانونيّة */
.v2-footer-bottom {
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(237, 227, 211, 0.5);
}
.v2-footer-bottom .links {
  display: flex;
  gap: 18px;
}
.v2-footer-bottom a {
  color: rgba(237, 227, 211, 0.6) !important;
}
.v2-footer-bottom a:hover {
  color: var(--v2-gold) !important;
}

/* التجاوب */
@media (max-width: 980px) {
  .v2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 560px) {
  .v2-footer-grid {
    grid-template-columns: 1fr;
  }
  .v2-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   المرحلة ٣ — الشريط العلوي + شريط التنقّل
   ═══════════════════════════════════════════════════════════════ */

/* ─── الشريط العلوي (مؤقّت: شعار + جملة) ─── */
.v2-topbar {
  background: var(--v2-steel);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 60;
}
.v2-topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 7px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.v2-topbar-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--v2-gold-soft);
  font-weight: 600;
}
.v2-topbar-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-gold);
  box-shadow: 0 0 0 4px rgba(198, 164, 106, 0.18);
}

/* ─── شريط الشفافيّة الماليّة (قِسمان: تَشغيليّة / أَرباح وَقفيّة) ─── */
.v2-topbar-finance .v2-topbar-inner {
  justify-content: space-between;
  gap: 16px;
  padding: 8px 28px;
}
.v2-topbar-finance .v2-topbar-tag {
  flex-shrink: 0;
}
.v2-finance-bar {
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 720px;
  height: 24px;
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  background: var(--v2-beige-warm);
  border: 1px solid rgba(198, 164, 106, 0.45);
}
.v2-finance-bar .seg {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--v2-body);
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.v2-finance-bar .seg:hover { filter: brightness(1.08); }
.v2-finance-bar .seg-expenses {
  background: rgba(58, 80, 114, 0.14);
  color: var(--v2-steel);
  justify-content: flex-start;
}
.v2-finance-bar .seg-profits {
  background: var(--v2-gold);
  color: var(--v2-deep);
  justify-content: flex-end;
}
.v2-finance-bar .seg-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v2-finance-bar .seg-label { opacity: 0.85; }
.v2-finance-bar .seg-val   { font-weight: 700; }
.v2-finance-bar .seg-pct {
  font-family: var(--v2-display);
  font-weight: 800;
  font-size: 13px;
}
.v2-finance-bar .seg-profits .seg-pct { color: var(--v2-deep); }

.v2-topbar-update {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11.5px;
  font-weight: 500;
  flex-shrink: 0;
  font-family: var(--v2-body);
}

@media (max-width: 720px) {
  .v2-topbar-finance .v2-topbar-inner {
    gap: 10px;
    padding: 6px 14px;
  }
  .v2-topbar-update { display: none; }
  .v2-finance-bar { height: 20px; min-width: 0; }
  .v2-finance-bar .seg { padding: 0 10px; font-size: 11px; }
  .v2-finance-bar .seg-pct { font-size: 12px; }
}
@media (max-width: 520px) {
  .v2-finance-bar .seg-label { display: none; }
}

/* ─── شريط التنقّل الجديد ─── */
.v2-nav {
  background: var(--v2-paper) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: none !important;
}
.v2-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* الـ brand (يسار الـ nav) */
.v2-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.v2-brand-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--v2-paper);
  border-radius: 50%;
  border: 2px solid var(--v2-gold);
  box-shadow: 0 0 0 1px rgba(198, 164, 106, 0.25);
  overflow: hidden;
}
.v2-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.7);
  transform-origin: center;
}
.v2-brand-mark .v2-brand-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--v2-navy);
  color: var(--v2-gold);
  display: grid;
  place-items: center;
  font-family: var(--v2-display);
  font-size: 36px;
  font-weight: 800;
}
.v2-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.v2-brand-name {
  font-family: var(--v2-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--v2-steel) !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.v2-brand-sub {
  font-family: var(--v2-body);
  font-size: 10.5px;
  color: var(--v2-steel-soft);
  margin-top: 3px;
  font-weight: 500;
}

/* روابط الـ nav (وسط) */
.v2-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.v2-nav-links a {
  padding: 8px 12px !important;
  border-radius: 6px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--v2-ink-soft) !important;
  transition: all 0.2s !important;
  text-decoration: none;
  white-space: nowrap;
}
.v2-nav-links a:hover {
  background: rgba(58, 80, 114, 0.08) !important;
  color: var(--v2-steel) !important;
}
.v2-nav-links a.active {
  background: rgba(58, 80, 114, 0.10) !important;
  color: var(--v2-steel) !important;
  font-weight: 600 !important;
}
.v2-nav-links a.highlight {
  color: var(--v2-gold-deep) !important;
  font-weight: 700 !important;
}
.v2-nav-links a.highlight:hover {
  background: rgba(198, 164, 106, 0.12) !important;
}

/* ─── قائمة الحاسبات المُنسَدِلة (٢١ مايو ٢٠٢٦) ─── */
.v2-nav-dropdown {
  position: relative;
  display: inline-block;
}
.v2-nav-dropdown .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* بَقيّة الأَنماط تَرِث من .v2-nav-links a */
}
.v2-nav-dropdown .dropdown-trigger .caret {
  transition: transform 0.2s;
}
.v2-nav-dropdown:hover .dropdown-trigger .caret,
.v2-nav-dropdown:focus-within .dropdown-trigger .caret {
  transform: rotate(180deg);
}
.v2-nav-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: #fff;
  border: 1px solid var(--v2-line-strong);
  border-radius: 10px;
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 14px 32px -10px rgba(19, 42, 74, 0.20);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 100;
}
.v2-nav-dropdown:hover .dropdown-menu,
.v2-nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.v2-nav-dropdown .dropdown-menu a,
.v2-nav-dropdown .dropdown-menu .coming-soon {
  display: block;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13.5px;
  font-family: var(--v2-body);
  font-weight: 600;
  color: var(--v2-ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.v2-nav-dropdown .dropdown-menu a:hover {
  background: rgba(198, 164, 106, 0.10);
  color: var(--v2-gold-deep);
}
.v2-nav-dropdown .dropdown-menu .coming-soon {
  color: var(--v2-steel-soft);
  font-size: 12.5px;
  font-style: italic;
  cursor: not-allowed;
  font-weight: 500;
  border-top: 1px dashed var(--v2-line);
  margin-top: 4px;
  padding-top: 10px;
}

/* منطقة الـ auth (يمين) */
.v2-auth-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* الأزرار */
.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: var(--v2-body);
  font-weight: 600;
  font-size: 13.5px;
  transition: all 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.v2-btn-ghost {
  color: var(--v2-steel) !important;
  background: transparent !important;
  border-color: var(--v2-line-strong) !important;
}
.v2-btn-ghost:hover {
  background: var(--v2-steel) !important;
  color: #fff !important;
  border-color: var(--v2-steel) !important;
}
.v2-btn-primary {
  background: var(--v2-steel) !important;
  color: #fff !important;
  border-color: var(--v2-steel) !important;
}
.v2-btn-primary:hover {
  background: var(--v2-navy) !important;
  border-color: var(--v2-navy) !important;
}
.v2-btn-gold {
  background: var(--v2-gold) !important;
  color: var(--v2-navy) !important;
  border-color: var(--v2-gold) !important;
}
.v2-btn-gold:hover {
  background: var(--v2-gold-deep) !important;
  color: #fff !important;
  border-color: var(--v2-gold-deep) !important;
}
.v2-btn-icon {
  padding: 8px;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  position: relative;
  color: var(--v2-steel) !important;
  background: transparent !important;
  border-color: var(--v2-line) !important;
}
.v2-btn-icon:hover {
  background: rgba(58, 80, 114, 0.08) !important;
  border-color: var(--v2-line-strong) !important;
}
.v2-btn-icon svg {
  width: 16px;
  height: 16px;
}

/* شيب الزبون */
.v2-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  background: rgba(58, 80, 114, 0.06);
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--v2-ink-soft);
}
.v2-user-chip .ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--v2-steel);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--v2-display);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* شارة الإشعارات */
.v2-notif-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  padding: 0 4px;
  font-family: var(--v2-latin);
}

/* التجاوب */
@media (max-width: 980px) {
  .v2-nav-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .v2-nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    border-top: 1px solid var(--v2-line);
    padding-top: 10px;
  }
  .v2-brand-sub {
    display: none;
  }
}
@media (max-width: 560px) {
  .v2-nav-inner {
    padding: 10px 16px;
  }
  .v2-nav-links a {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
  .v2-user-chip span:not(.ava) {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   المرحلة ٤ — قسم البطل (Hero) — للصفحة الرئيسيّة فقط
   ═══════════════════════════════════════════════════════════════ */

.v2-hero {
  position: relative;
  background: var(--v2-paper);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.v2-hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 28px 40px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* النصّ (يمين في RTL) */
.v2-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--v2-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-brown);
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.v2-hero-eyebrow .line {
  width: 30px;
  height: 1px;
  background: var(--v2-gold);
}

.v2-hero h1 {
  font-family: var(--v2-display) !important;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--v2-steel) !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
.v2-hero h1::after { display: none !important; }
.v2-hero h1 .accent {
  color: var(--v2-brown);
  font-weight: 700;
  font-family: var(--v2-serif);
  font-style: italic;
}
.v2-hero h1 .accent::before,
.v2-hero h1 .accent::after {
  content: "·";
  color: var(--v2-gold);
  margin: 0 0.35em;
  opacity: 0.7;
}

.v2-hero-lede {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--v2-ink-soft) !important;
  max-width: 520px;
  margin: 0 0 24px !important;
  text-shadow: none !important;
}
.v2-hero-lede b {
  color: var(--v2-steel);
  font-weight: 700;
}

/* أزرار CTA */
.v2-hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.v2-hero-ctas .v2-btn {
  padding: 11px 20px;
  font-size: 14px;
}
.v2-hero-ctas .v2-btn svg {
  width: 14px;
  height: 14px;
}

/* شريط الإحصاءات */
.v2-hero-meta {
  margin-top: 30px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--v2-line);
}
.v2-hero-meta .item .num {
  font-family: var(--v2-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--v2-steel);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.v2-hero-meta .item:nth-child(2) .num { color: var(--v2-brown); }
.v2-hero-meta .item:nth-child(3) .num { color: var(--v2-gold-deep); }
.v2-hero-meta .item .lbl {
  font-size: 12px;
  color: var(--v2-steel-soft);
  margin-top: 4px;
}

/* صورة الفريق (يسار في RTL) — نسبة 16:9 */
.v2-hero-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 720px;
  margin-inline-start: auto;
  width: 100%;
}
.v2-hero-team {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--v2-radius-md);
  box-shadow: var(--v2-shadow-card);
  display: block;
}
.v2-hero-team-placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--v2-radius-md);
  background:
    linear-gradient(135deg, var(--v2-steel) 0%, var(--v2-navy) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--v2-shadow-card);
}
.v2-hero-team-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(198,164,106,0.18) 1px, transparent 0);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
}
.v2-hero-team-placeholder .ph-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(198, 164, 106, 0.18);
  display: grid;
  place-items: center;
  color: var(--v2-gold);
  margin: 0 auto 10px;
  position: relative;
  z-index: 2;
}
.v2-hero-team-placeholder .ph-icon svg {
  width: 20px;
  height: 20px;
}
.v2-hero-team-placeholder .ph-text {
  font-family: var(--v2-display);
  color: var(--v2-gold-soft);
  font-size: 16px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  letter-spacing: -0.01em;
}
.v2-hero-team-placeholder .ph-sub {
  font-family: var(--v2-body);
  color: rgba(237, 227, 211, 0.6);
  font-size: 12px;
  margin-top: 4px;
  position: relative;
  z-index: 2;
}

/* ─── شَريط أَعضاء الفَريق المُتَحَرِّك (٣ صُفوف، اتّجاهات مُتَناوبة) ─── */
.v2-team-marquee {
  width: 100%;
  height: 100%;
  border-radius: var(--v2-radius-md);
  background: linear-gradient(135deg, var(--v2-steel) 0%, var(--v2-navy) 100%);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--v2-shadow-card);
}
.v2-team-marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(198,164,106,0.16) 1px, transparent 0);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
/* تَدَرُّج جانبيّ يَنعَكس به على الحَواف لإيهام الفَيض اللا نِهائيّ */
.v2-team-marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--v2-steel) 0%,
      rgba(58, 80, 114, 0) 6%,
      rgba(58, 80, 114, 0) 94%,
      var(--v2-navy) 100%);
  pointer-events: none;
  z-index: 2;
}
.marquee-row {
  position: relative;
  z-index: 1;
  display: flex;
  overflow-x: auto;             /* تَدَفُّق أُفقيّ مَفتوح للسَحب اليَدويّ */
  overflow-y: hidden;
  flex-shrink: 0;
  cursor: grab;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
  user-select: none;
  -webkit-user-select: none;
}
.marquee-row::-webkit-scrollbar { display: none; }
.marquee-row { touch-action: pan-x; }
.marquee-row.is-dragging { cursor: grabbing; }
.marquee-avatar, .marquee-avatar img { -webkit-user-drag: none; user-drag: none; }
.marquee-track {
  display: flex;
  gap: 12px;
  padding-inline: 14px;
  animation: marquee-rtl 50s linear infinite;
  will-change: transform;
}
/* السُرعة والاتّجاهات لكُلّ صَفّ */
.marquee-row[data-row="0"] .marquee-track { animation: marquee-rtl 55s linear infinite; }
.marquee-row[data-row="1"] .marquee-track { animation: marquee-ltr 70s linear infinite; }
.marquee-row[data-row="2"] .marquee-track { animation: marquee-rtl 60s linear infinite; animation-delay: -10s; }

/* إيقاف التَدَفُّق التِلقائيّ أثناء التَفاعُل (يَدير الـJS الكلاس) */
.marquee-row.is-interacting .marquee-track { animation-play-state: paused; }
.v2-team-marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-avatar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  width: 116px;
  transition: transform 0.25s ease;
}
.marquee-avatar .ava-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 2px solid rgba(198, 164, 106, 0.42);
  background: var(--v2-navy);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.marquee-avatar .ava-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.marquee-avatar.is-default .ava-circle img {
  object-fit: cover;
  object-position: center top;
}
.marquee-avatar .ava-name {
  font-family: var(--v2-body);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(237, 227, 211, 0.92);
  width: 100%;
  line-height: 1.35;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.marquee-avatar:hover {
  transform: translateY(-3px) scale(1.06);
  z-index: 3;
}
.marquee-avatar:hover .ava-circle {
  border-color: var(--v2-gold);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45);
}
.marquee-avatar:hover .ava-name {
  color: var(--v2-gold);
}

/* تَجاوُب الجوّال */
@media (max-width: 720px) {
  .v2-team-marquee { padding: 14px 0; gap: 10px; }
  .marquee-avatar { width: 96px; }
  .marquee-avatar .ava-circle { width: 58px; height: 58px; }
  .marquee-avatar .ava-name { font-size: 10.5px; }
  .marquee-track { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-row .marquee-track { animation: none; }
}
.marquee-avatar img { pointer-events: none; }   /* يَمنَع سَحب الصور عَبر المُتَصَفّح */
.v2-medallion {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1d3a64 0%, var(--v2-navy) 55%, var(--v2-deep) 100%);
  box-shadow:
    var(--v2-shadow-medallion),
    inset 0 0 0 1px rgba(198, 164, 106, 0.35),
    inset 0 0 0 14px var(--v2-navy),
    inset 0 0 0 15px rgba(198, 164, 106, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.v2-medallion::before {
  content: "";
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px dashed rgba(198, 164, 106, 0.35);
}
.v2-medallion-inner {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 40px;
  width: 100%;
}
.v2-medallion-logo {
  width: 55%;
  margin: 0 auto 22px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
  display: block;
}
.v2-medallion-name {
  font-family: var(--v2-display);
  font-size: 28px;
  color: var(--v2-gold);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.v2-medallion-sub {
  font-family: var(--v2-body);
  font-size: 13px;
  color: rgba(237, 227, 211, 0.7);
  font-weight: 400;
}
.v2-medallion-en {
  font-family: var(--v2-latin);
  font-size: 10px;
  letter-spacing: 0.35em;
  color: rgba(198, 164, 106, 0.6);
  text-transform: uppercase;
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid rgba(198, 164, 106, 0.2);
  display: inline-block;
}

/* زخارف نقاط */
.v2-hero-ornament {
  position: absolute;
  width: 340px;
  height: 340px;
  background-image: radial-gradient(circle at 1px 1px, rgba(19, 42, 74, 0.15) 1px, transparent 0);
  background-size: 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}
.v2-hero-ornament.top-left {
  top: 60px;
  inset-inline-start: -80px;
}
.v2-hero-ornament.bottom-right {
  bottom: -80px;
  inset-inline-end: -80px;
  opacity: 0.3;
}

/* تجاوب */
@media (max-width: 980px) {
  .v2-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 28px 70px;
  }
  .v2-hero-visual {
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .v2-hero h1 {
    font-size: 42px !important;
  }
  .v2-hero-meta {
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   قسم الأدوات (الحاسبات الأكاديميّة) — قيد التطوير
   ═══════════════════════════════════════════════════════════════ */

.v2-tools-section {
  background: linear-gradient(180deg, var(--v2-paper) 0%, var(--v2-beige-warm) 100%);
  padding: 60px 28px;
  border-top: 1px solid var(--v2-line);
  border-bottom: 1px solid var(--v2-line);
}

.v2-tools-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.v2-tools-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}

.v2-tools-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--v2-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--v2-brown);
  letter-spacing: 0.28em;
  margin-bottom: 14px;
}
.v2-tools-eyebrow::before,
.v2-tools-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--v2-gold);
}

.v2-tools-section h2 {
  font-family: var(--v2-display) !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--v2-steel) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
.v2-tools-section h2::after { display: none !important; }

.v2-tools-section .lede {
  font-size: 15px;
  color: var(--v2-ink-soft);
  line-height: 1.7;
  margin: 0;
}

.v2-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.v2-tool-card {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-md);
  padding: 28px 24px;
  position: relative;
  transition: all 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.v2-tool-card.coming-soon {
  opacity: 0.85;
  cursor: not-allowed;
}
.v2-tool-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(198, 164, 106, 0.12);
  color: var(--v2-gold-deep);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.v2-tool-card .icon svg {
  width: 28px;
  height: 28px;
}
.v2-tool-card h3 {
  font-family: var(--v2-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--v2-steel);
  margin: 0 0 6px;
  line-height: 1.3;
}
.v2-tool-card .sub {
  font-family: var(--v2-latin);
  font-size: 12px;
  color: var(--v2-steel-soft);
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.v2-tool-card .badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(198, 164, 106, 0.15);
  color: var(--v2-gold-deep);
  border: 1px solid rgba(198, 164, 106, 0.3);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-top: auto;
}

@media (max-width: 720px) {
  .v2-tools-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   قسم التخصّصات الأكاديميّة (١٤ بندًا)
   كل بطاقة → فلترة الصفحات حسب التخصّص (تنفّذ لاحقًا)
   ═══════════════════════════════════════════════════════════════ */

.v2-specs-section {
  background: var(--v2-paper);
  padding: 30px 28px 50px;
}
.v2-specs-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.v2-specs-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}
.v2-specs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--v2-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--v2-brown);
  letter-spacing: 0.28em;
  margin-bottom: 14px;
}
.v2-specs-eyebrow::before,
.v2-specs-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--v2-gold);
}
.v2-specs-section h2 {
  font-family: var(--v2-display) !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--v2-steel) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
.v2-specs-section h2::after { display: none !important; }
.v2-specs-section .lede {
  font-size: 15px;
  color: var(--v2-ink-soft);
  line-height: 1.7;
  margin: 0;
}

.v2-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.v2-spec-card {
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-sm);
  padding: 16px 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s ease;
}

/* خلفيّة كل بطاقة بلمسة لون من الهويّة (تطابق لون الأيقونة) */
.v2-spec-card:nth-child(4n + 1) {
  background: rgba(58, 80, 114, 0.06);      /* فولاذي خفيف */
  border-color: rgba(58, 80, 114, 0.18);
}
.v2-spec-card:nth-child(4n + 2) {
  background: rgba(198, 164, 106, 0.10);    /* ذهبي خفيف */
  border-color: rgba(198, 164, 106, 0.28);
}
.v2-spec-card:nth-child(4n + 3) {
  background: rgba(107, 74, 58, 0.07);      /* بنّي خفيف */
  border-color: rgba(107, 74, 58, 0.20);
}
.v2-spec-card:nth-child(4n + 4) {
  background: rgba(19, 42, 74, 0.06);       /* كحلي خفيف */
  border-color: rgba(19, 42, 74, 0.18);
}

.v2-spec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(19, 42, 74, 0.15);
  filter: saturate(1.2);
}
.v2-spec-card .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* تنويع ألوان أيقونات الـ ١٤ بطاقة عبر ٤ ألوان من الهويّة:
   فولاذي → ذهبي → بنّي → كحلي (ثمّ يعيد) */
.v2-spec-card:nth-child(4n + 1) .icon {
  background: rgba(58, 80, 114, 0.12);
  color: var(--v2-steel);
}
.v2-spec-card:nth-child(4n + 2) .icon {
  background: rgba(198, 164, 106, 0.18);
  color: var(--v2-gold-deep);
}
.v2-spec-card:nth-child(4n + 3) .icon {
  background: rgba(107, 74, 58, 0.14);
  color: var(--v2-brown);
}
.v2-spec-card:nth-child(4n + 4) .icon {
  background: rgba(19, 42, 74, 0.12);
  color: var(--v2-navy);
}

/* الـ hover: نُكثّف اللون ولا نغيّره */
.v2-spec-card:hover .icon {
  filter: saturate(1.3);
  transform: scale(1.05);
}
.v2-spec-card .icon svg {
  width: 20px;
  height: 20px;
}
.v2-spec-card .name {
  font-family: var(--v2-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--v2-ink);
  line-height: 1.2;
}

@media (max-width: 980px) {
  .v2-specs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .v2-specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .v2-specs-grid { grid-template-columns: 1fr; }
}

/* ─── الـ chevron على البطاقة + حالة "محدّدة" ─── */
.v2-spec-card .chev {
  width: 14px;
  height: 14px;
  color: var(--v2-steel-soft);
  transition: transform 0.25s;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.v2-spec-card.selected {
  box-shadow: 0 0 0 2px var(--v2-gold), 0 8px 20px -8px rgba(19, 42, 74, 0.2);
  transform: translateY(-2px);
}
.v2-spec-card.selected .chev {
  transform: rotate(180deg);
  color: var(--v2-gold-deep);
}

/* ─── صندوق التوسّع داخل الشبكة (الهايبرد) ─── */
.v2-spec-expansion {
  display: none;
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(58, 80, 114, 0.04), rgba(198, 164, 106, 0.08));
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  padding: 14px;
  animation: v2-spec-slide-in 0.3s ease;
}
.v2-spec-expansion.open { display: block; }

@keyframes v2-spec-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v2-spec-expansion .exp-title {
  font-family: var(--v2-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--v2-steel-soft);
  margin: 0 0 10px;
  text-align: center;
  letter-spacing: 0.02em;
}
.v2-spec-expansion .exp-title strong {
  color: var(--v2-gold-deep);
  font-weight: 800;
}

.v2-spec-expansion .exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .v2-spec-expansion .exp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* بطاقات الخدمات الثلاث — بحجم بطاقات التخصّص + ألوان الهويّة */
.v2-exp-service {
  border: 1px solid var(--v2-line);
  border-radius: 6px;
  padding: 12px 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
}
.v2-exp-service:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(19, 42, 74, 0.2);
  filter: saturate(1.2);
}

/* ألوان الخلفيّة بحسب نوع الخدمة */
.v2-exp-service.lectures {
  background: rgba(58, 80, 114, 0.06);
  border-color: rgba(58, 80, 114, 0.18);
}
.v2-exp-service.tutorials {
  background: rgba(107, 74, 58, 0.07);
  border-color: rgba(107, 74, 58, 0.20);
}
.v2-exp-service.consultations {
  background: rgba(198, 164, 106, 0.10);
  border-color: rgba(198, 164, 106, 0.28);
}
.v2-exp-service.research {
  background: rgba(14, 42, 82, 0.08);
  border-color: rgba(14, 42, 82, 0.22);
}

/* صناديق الأيقونات */
.v2-exp-service .ico {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.v2-exp-service .ico svg {
  width: 16px;
  height: 16px;
}
.v2-exp-service.lectures .ico {
  background: rgba(58, 80, 114, 0.12);
  color: var(--v2-steel);
}
.v2-exp-service.tutorials .ico {
  background: rgba(107, 74, 58, 0.14);
  color: var(--v2-brown);
}
.v2-exp-service.consultations .ico {
  background: rgba(198, 164, 106, 0.18);
  color: var(--v2-gold-deep);
}
.v2-exp-service.research .ico {
  background: rgba(14, 42, 82, 0.14);
  color: var(--v2-deep);
}
.v2-exp-service h4 {
  font-family: var(--v2-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--v2-ink);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

@media (max-width: 720px) {
  .v2-spec-expansion .exp-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   قسم الركائز الأربع — قيم وتد الوقفيّة (شريط فولاذي)
   ═══════════════════════════════════════════════════════════════ */

.v2-pillars-section {
  background: var(--v2-steel);
  color: #fff;
  padding: 50px 28px 44px;
  position: relative;
  overflow: hidden;
}

.v2-pillars-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(198, 164, 106, 0.18), transparent 40%),
    radial-gradient(circle at 88% 70%, rgba(237, 227, 211, 0.08), transparent 50%);
  pointer-events: none;
}

.v2-pillars-inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}

.v2-pillars-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 32px;
}

.v2-pillars-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--v2-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--v2-gold-soft);
  letter-spacing: 0.28em;
  margin-bottom: 12px;
}
.v2-pillars-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--v2-gold);
}

.v2-pillars-section h2 {
  font-family: var(--v2-display) !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  max-width: 520px;
  text-shadow: none !important;
}
.v2-pillars-section h2::after { display: none !important; }

.v2-pillars-lede {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  max-width: 480px;
}

.v2-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.v2-pillar {
  padding: 22px 22px 4px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
}
.v2-pillar:last-child {
  border-inline-end: 0;
}

.v2-pillar .pn {
  font-family: var(--v2-display);
  font-size: 30px;
  line-height: 1;
  color: var(--v2-gold);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-pillar .pn::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--v2-gold);
}

.v2-pillar h3 {
  font-family: var(--v2-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin: 0 0 8px;
}

.v2-pillar p {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

@media (max-width: 840px) {
  .v2-pillars-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .v2-pillars-grid {
    grid-template-columns: 1fr;
  }
  .v2-pillar {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .v2-pillar:last-child {
    border-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   قسم الفريق + الاقتباس — انضمّ إلينا
   ═══════════════════════════════════════════════════════════════ */

.v2-team-section {
  padding: 60px 28px;
  background: var(--v2-paper);
}

.v2-team-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* بطاقة الاقتباس (يمين في RTL، أوّل عنصر في DOM) */
.v2-team-quote-card {
  background: var(--v2-beige-warm);
  border-radius: var(--v2-radius-md);
  padding: 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--v2-line-warm);
  border-inline-end: 4px solid var(--v2-brown);
}
.v2-team-quote-card::before {
  content: "❝";
  position: absolute;
  top: 14px;
  inset-inline-start: 24px;
  font-family: var(--v2-serif);
  font-size: 120px;
  color: rgba(198, 164, 106, 0.18);
  line-height: 0.8;
  font-style: italic;
}
.v2-team-quote {
  font-family: var(--v2-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--v2-brown);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 92%;
  position: relative;
}
.v2-team-quote-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--v2-line-warm);
}
.v2-team-quote-attr .seal {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--v2-navy);
  padding: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.v2-team-quote-attr .seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.v2-team-quote-attr .name {
  font-weight: 700;
  color: var(--v2-brown);
  font-size: 14px;
}
.v2-team-quote-attr .role {
  font-size: 12px;
  color: var(--v2-steel-soft);
  margin-top: 2px;
}

/* عمود الـ CTA (يسار في RTL، ثاني عنصر في DOM) */
.v2-team-cta-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.v2-team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--v2-body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--v2-brown);
  letter-spacing: 0.28em;
  margin-bottom: 14px;
}
.v2-team-eyebrow::before,
.v2-team-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--v2-gold);
}
.v2-team-cta-col h3 {
  font-family: var(--v2-display) !important;
  font-size: 28px !important;
  color: var(--v2-steel) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
.v2-team-cta-col h3::after { display: none !important; }
.v2-team-cta-col > div > p {
  font-size: 14.5px;
  color: var(--v2-ink-soft);
  line-height: 1.7;
  margin: 0 0 18px;
}

/* البطاقات الأربع */
.v2-team-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v2-team-tile {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-sm);
}
.v2-team-tile .icon {
  width: 32px;
  height: 32px;
  border-radius: var(--v2-radius-sm);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  font-family: var(--v2-display);
  font-size: 15px;
  font-weight: 800;
}
.v2-team-tile:nth-child(1) .icon {
  background: rgba(58, 80, 114, 0.12);
  color: var(--v2-steel);
}
.v2-team-tile:nth-child(2) .icon {
  background: rgba(198, 164, 106, 0.18);
  color: var(--v2-gold-deep);
}
.v2-team-tile:nth-child(3) .icon {
  background: rgba(107, 74, 58, 0.14);
  color: var(--v2-brown);
}
.v2-team-tile:nth-child(4) .icon {
  background: rgba(19, 42, 74, 0.10);
  color: var(--v2-navy);
}
.v2-team-tile .ttl {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--v2-steel);
  margin-bottom: 2px;
}
.v2-team-tile .sub {
  font-size: 12px;
  color: var(--v2-steel-soft);
}

.v2-team-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

@media (max-width: 840px) {
  .v2-team-inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .v2-team-tiles {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   نماذج المصادقة وغيرها (.form-card + .field)
   تَستفيد منها: login, register, forgot_password, reset_password,
   join_as_worker, submit-lecture, إلخ.
   ═══════════════════════════════════════════════════════════════ */

.form-card {
  background: var(--v2-beige-warm) !important;
  border: 1px solid var(--v2-line-warm) !important;
  border-radius: var(--v2-radius-md) !important;
  padding: 28px !important;
  box-shadow: none !important;
}
.form-card h2 {
  font-family: var(--v2-display) !important;
  color: var(--v2-steel) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 0 6px !important;
  text-shadow: none !important;
}
.form-card h2::after { display: none !important; }

.form-card .field {
  margin-bottom: 14px;
}
.form-card .field label {
  font-family: var(--v2-body);
  color: var(--v2-steel);
  font-weight: 700;
  font-size: 13.5px;
  display: block;
  margin-bottom: 6px;
}
.form-card .field .req {
  color: var(--v2-gold-deep);
  font-weight: 800;
}
.form-card .field input,
.form-card .field textarea,
.form-card .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--v2-line-strong);
  border-radius: var(--v2-radius-sm);
  font-size: 14px;
  font-family: var(--v2-body);
  background: #fff;
  color: var(--v2-ink);
  transition: all 0.2s;
  box-sizing: border-box;
}
.form-card .field input:focus,
.form-card .field textarea:focus,
.form-card .field select:focus {
  outline: none;
  border-color: var(--v2-steel);
  box-shadow: 0 0 0 3px rgba(58, 80, 114, 0.12);
}
.form-card .field-help {
  font-size: 12px;
  color: var(--v2-steel-soft);
  margin-top: 4px;
  font-family: var(--v2-body);
}

/* أزرار داخل النماذج — تتجاوز btn-navy و btn-gold القديمة */
.form-card .btn-navy {
  background: var(--v2-steel) !important;
  color: #fff !important;
  border: 1px solid var(--v2-steel) !important;
  border-radius: var(--v2-radius-sm) !important;
  padding: 12px 24px !important;
  font-family: var(--v2-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: all 0.2s;
}
.form-card .btn-navy:hover {
  background: var(--v2-navy) !important;
  border-color: var(--v2-navy) !important;
}
.form-card .btn-gold {
  background: var(--v2-gold) !important;
  color: var(--v2-navy) !important;
  border: 1px solid var(--v2-gold) !important;
  border-radius: var(--v2-radius-sm) !important;
  padding: 12px 24px !important;
  font-family: var(--v2-display) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  transition: all 0.2s;
}
.form-card .btn-gold:hover {
  background: var(--v2-gold-deep) !important;
  color: #fff !important;
  border-color: var(--v2-gold-deep) !important;
}
.form-card .btn-block {
  display: block !important;
  width: 100% !important;
}

/* ملاحظة/تنبيه أسفل النماذج — مثل "💡 كيف يعمل الدخول الموحّد" */
.v2-note-box {
  max-width: 480px;
  margin: 20px auto;
  padding: 16px;
  background: linear-gradient(180deg, var(--v2-beige-warm) 0%, rgba(198, 164, 106, 0.12) 100%);
  border: 1px solid var(--v2-line-warm);
  border-inline-start: 4px solid var(--v2-gold-deep);
  border-radius: var(--v2-radius-md);
  font-size: 12.5px;
  color: var(--v2-ink-soft);
  line-height: 1.85;
  font-family: var(--v2-body);
}
.v2-note-box strong { color: var(--v2-brown); }

/* صندوق نجاح/تنبيه أعلى نموذج (مثل "أنت مسجّل دخولك حاليًّا") */
.v2-success-box {
  background: rgba(198, 164, 106, 0.14);
  border: 1px solid rgba(198, 164, 106, 0.3);
  padding: 14px;
  border-radius: var(--v2-radius-sm);
  margin-bottom: 18px;
  color: var(--v2-brown);
  text-align: center;
  font-family: var(--v2-body);
  font-size: 13.5px;
}
.v2-success-box a {
  color: var(--v2-steel);
  font-weight: 700;
}
.v2-success-box a:hover { color: var(--v2-navy); }

/* ═══════════════════════════════════════════════════════════════
   صفحة التخصّص الوسيطة (specialization.php)
   ═══════════════════════════════════════════════════════════════ */

.v2-spec-detail-section {
  background: var(--v2-paper);
  padding: 50px 28px 70px;
  min-height: 60vh;
}

.v2-spec-detail-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.v2-spec-detail-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

.v2-spec-detail-section h1 {
  font-family: var(--v2-display) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 800 !important;
  color: var(--v2-steel) !important;
  margin: 8px 0 14px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
}
.v2-spec-detail-section h1::after { display: none !important; }

.v2-spec-detail-section .lede {
  font-size: 16px;
  color: var(--v2-ink-soft);
  line-height: 1.8;
  margin: 0;
}
.v2-spec-detail-section .lede strong {
  color: var(--v2-steel);
  font-weight: 700;
}

/* شبكة البطاقات الثلاث */
.v2-spec-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.v2-service-card {
  background: #fff;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius-md);
  padding: 28px 24px 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.3s ease;
  position: relative;
  min-height: 240px;
}
.v2-service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--v2-shadow-card);
}

.v2-service-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s;
}
.v2-service-card .icon svg {
  width: 28px;
  height: 28px;
}

.v2-service-card h3 {
  font-family: var(--v2-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--v2-steel);
  margin: 0;
  line-height: 1.2;
}

.v2-service-card p {
  font-size: 14px;
  color: var(--v2-ink-soft);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.v2-service-card .arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--v2-line-strong);
  display: grid;
  place-items: center;
  color: var(--v2-navy);
  align-self: flex-end;
  margin-top: auto;
  transition: all 0.25s;
}
.v2-service-card .arrow svg {
  width: 14px;
  height: 14px;
}
.v2-service-card:hover .arrow {
  background: var(--v2-gold);
  border-color: var(--v2-gold);
  color: var(--v2-navy);
}

/* تنويع ألوان البطاقات الثلاث (هويّة) */
.v2-service-card.lectures .icon {
  background: rgba(58, 80, 114, 0.12);
  color: var(--v2-steel);
}
.v2-service-card.tutorials .icon {
  background: rgba(107, 74, 58, 0.14);
  color: var(--v2-brown);
}
.v2-service-card.consultations .icon {
  background: rgba(198, 164, 106, 0.18);
  color: var(--v2-gold-deep);
}

/* رابط العودة */
.v2-spec-detail-back {
  text-align: center;
  margin-top: 32px;
}
.v2-spec-detail-back a {
  color: var(--v2-steel-soft);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}
.v2-spec-detail-back a:hover {
  color: var(--v2-gold-deep);
}

@media (max-width: 880px) {
  .v2-spec-services-grid { grid-template-columns: 1fr; }
}