/* ══════════════════════════════════════════════════════════════════
   بورتفوليو أحمد بارجاء — هوية بصرية إعلامية / Editorial Newsroom
   لتعديل المحتوى: انظر كائن SITE_CONFIG في الـ JavaScript أسفل الصفحة
   لوحة الألوان مستخرجة من الصورة الشخصية:
     الخلفية السوداء → الحبر  |  ربطة العنق → التيل  |  شعارات القنوات → النحاسي
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* الحبر — من خلفية الصورة الشخصية */
  --ink:        #0C0F10;
  --ink-soft:   #151A1C;
  --ink-line:   #262D2F;

  /* التيل — مستخرج من ربطة العنق */
  --teal:       #1C5C5E;
  --teal-deep:  #103A3C;
  --teal-bright:#2A8285;
  --teal-tint:  #E7F0EF;

  /* النحاسي — ثانوي، منسجم مع شعارات بلقيس واليمن وصاد */
  --brass:      #A8813F;
  --brass-soft: #C9A05C;
  --brass-tint: #F5EEE1;

  /* الورق والرماديات */
  --paper:      #F7F6F3;
  --paper-2:    #EFEDE7;
  --white:      #FFFFFF;
  --line:       #E0DDD5;
  --line-soft:  #EBE8E1;
  --text:       #14181A;
  --muted:      #5C6467;
  --muted-2:    #6E7679;

  /* عناصر تنقلب في الوضع الليلي */
  --btn-bg:     var(--ink);
  --btn-fg:     #FFFFFF;
  --nav-bg:     rgba(247,246,243,.88);
  --marquee-bg: var(--white);
  --cover-a:    #1B2325;
  --cover-b:    #0C0F10;
  --cover-glow: rgba(42,130,133,.30);

  --radius:     4px;
  --radius-lg:  8px;
  --shadow-sm:  0 1px 2px rgba(12,15,16,.05), 0 2px 8px rgba(12,15,16,.04);
  --shadow-md:  0 4px 12px rgba(12,15,16,.06), 0 12px 32px rgba(12,15,16,.07);
  --shadow-lg:  0 18px 48px rgba(12,15,16,.13);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --t-fast:     .2s var(--ease);
  --t:          .3s var(--ease);
  --t-slow:     .4s var(--ease);

  --shell:      min(1280px, 100% - 10vw);
  --nav-h:      74px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: 400;
  background: var(--paper);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--teal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── حاوية عامة ─── */
.shell { width: var(--shell); margin-inline: auto; }

/* ══════════════════ NAV ══════════════════ */
nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), height var(--t);
}
nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

nav.scrolled {
  height: 64px;
  background: var(--nav-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-block-end-color: var(--line);
  box-shadow: 0 1px 24px rgba(12,15,16,.05);
}

.nav-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex-shrink: 0;
}
.nav-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: 'Playfair Display', serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 3px;
  transition: background var(--t);
}
.nav-logo:hover .nav-mark { background: var(--teal); }
.nav-logo-txt { display: flex; flex-direction: column; line-height: 1.25; }
#navName {
  font-family: 'Cairo', sans-serif;
  font-size: .95rem; font-weight: 800; color: var(--text);
  letter-spacing: normal;
}
.nav-logo-sub {
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  color: var(--muted-2); text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 1.55rem; list-style: none; }
.nav-links > li { display: flex; }
.nav-links a {
  font-size: .845rem; font-weight: 500; color: var(--muted);
  text-decoration: none; position: relative;
  padding-block: 6px; white-space: nowrap;
  transition: color var(--t-fast);
}
.nav-links a::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); font-weight: 600; }

.lang-btn {
  background: none; border: 1px solid var(--line);
  color: var(--text); border-radius: 3px;
  padding: 6px 15px; cursor: pointer;
  font-family: inherit; font-size: .74rem; font-weight: 600;
  letter-spacing: .06em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
nav:not(.scrolled) .lang-btn { border-color: var(--line); }
.lang-btn:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

.theme-btn {
  background: none; border: 1px solid var(--line);
  color: var(--text); border-radius: 3px;
  width: 32px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-btn:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-moon { display: block; }
[data-theme="dark"] .theme-btn .i-sun  { display: none; }
.nav-tools { display: flex; align-items: center; gap: 8px; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 6px;
}
.hamburger i {
  display: block; width: 22px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.hamburger.open i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open i:nth-child(2) { opacity: 0; }
.hamburger.open i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── قائمة الجوال ─── */
.mobile-menu {
  position: fixed; inset-block-start: var(--nav-h); inset-inline: 0; z-index: 190;
  background: var(--white);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  padding: 8px 5vw 20px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
  max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }
.mobile-menu a {
  padding: 14px 4px; text-decoration: none;
  font-size: .95rem; font-weight: 500; color: var(--text);
  border-block-end: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.mobile-menu a:last-child { border-block-end: 0; }
.mobile-menu a .mm-num {
  font-size: .68rem; font-weight: 600; color: var(--teal);
  letter-spacing: .1em; min-width: 20px;
}

/* ══════════════════ HERO ══════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 48px) 64px;
  background: var(--paper);
  overflow: clip;
}
/* شريط علوي رقيق بلون التيل — تفصيلة إعلامية */
.hero::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(to left, var(--teal) 0%, var(--teal) 34%, var(--brass) 34%, var(--brass) 44%, var(--line) 44%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
  width: var(--shell); margin-inline: auto;
  position: relative; z-index: 2;
}

/* اللوح الداكن خلف الصورة — يبدأ أسفل القائمة ويخرج إلى حافة الصفحة */
.hero-slab {
  position: absolute; z-index: 0;
  inset-block-start: var(--nav-h);
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 31%;
  border-block-start: 1px solid rgba(42,130,133,.3);
  background:
    radial-gradient(130% 80% at 76% 4%, #1E2527 0%, transparent 60%),
    linear-gradient(168deg, var(--ink-soft) 0%, var(--ink) 100%);
}
/* شبكة دقيقة جداً على اللوح */
.hero-slab::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.hero-visual { position: relative; }

.portrait-wrap {
  position: relative; z-index: 2;
  width: min(100%, 418px);
  margin-inline: auto;
}
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  filter: contrast(1.03) saturate(1.02);
  transform: scale(1.001);
  transition: transform 1.2s var(--ease);
}
.portrait-wrap:hover .portrait img { transform: scale(1.035); }
/* إضاءة حافة خفيفة بلون التيل — من إضاءة الصورة نفسها */
.portrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,15,16,.62) 0%, rgba(12,15,16,.06) 38%, transparent 62%),
    linear-gradient(115deg, transparent 60%, rgba(42,130,133,.14) 100%);
}
/* إطار أنيق مُزاح */
.portrait-frame {
  position: absolute; z-index: 1;
  inset-block: 22px -22px;
  inset-inline: 22px -22px;
  border: 1px solid rgba(42,130,133,.42);
  border-radius: 2px;
  pointer-events: none;
}
/* بطاقة التعريف على الصورة */
.portrait-tag {
  position: absolute; z-index: 3;
  inset-block-end: 20px; inset-inline-start: 20px; inset-inline-end: 20px;
  background: rgba(12,15,16,.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-inline-start: 2px solid var(--teal-bright);
  padding: 11px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.portrait-tag-txt { display: flex; flex-direction: column; min-width: 0; }
.portrait-tag strong {
  font-family: 'Cairo', sans-serif;
  font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.3;
}
.portrait-tag span {
  font-size: .68rem; font-weight: 500; color: rgba(255,255,255,.66);
  letter-spacing: .02em;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-bright); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(42,130,133,.55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42,130,133,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(42,130,133,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,130,133,0); }
}

/* ─── نص الهيرو ─── */
.hero-text { position: relative; z-index: 3; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .73rem; font-weight: 600;
  letter-spacing: .16em; color: var(--teal);
  margin-block-end: 1.5rem;
}
.kicker::before {
  content: ''; width: 34px; height: 1.5px;
  background: var(--teal); flex-shrink: 0;
}
.hero-name {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(2.05rem, 5.4vw, 3.95rem);
  font-weight: 900; line-height: 1.3;
  letter-spacing: normal;
  color: var(--text);
  margin-block-end: .55rem;
}
.hero-name-en {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -.02em; color: var(--text);
  margin-block-end: .55rem;
}
body:not(.ltr) .hero-name-en { display: none; }
body.ltr .hero-name { display: none; }

.hero-role {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 600; color: var(--teal-deep);
  margin-block-end: 1.5rem;
}
.hero-bio {
  font-size: clamp(.95rem, 1.1vw, 1.035rem);
  color: var(--muted); font-weight: 400;
  max-width: 50ch; line-height: 1.95;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--line);
  margin-block-end: 2.1rem;
}

/* إحصائيات */
.hero-stats {
  display: flex; flex-wrap: wrap;
  border-block: 1px solid var(--line);
  margin-block-end: 2.1rem;
  max-width: 560px;
}
.stat {
  padding: 1.05rem 1.5rem 1.05rem 0;
  border-inline-end: 1px solid var(--line);
  flex: 1 1 auto; min-width: 118px;
}
.stat:first-child { padding-inline-start: 0; }
.stat:last-child { border-inline-end: 0; }
body.ltr .stat { padding: 1.05rem 0 1.05rem 1.5rem; }
body.ltr .stat:first-child { padding-inline-start: 0; }
.stat-number {
  display: block;
  font-family: 'Cairo', sans-serif;
  font-size: 1.85rem; font-weight: 800; line-height: 1.15;
  color: var(--text); letter-spacing: normal;
}
.stat-number b { color: var(--teal); font-weight: 700; }
.stat-label {
  display: block; margin-block-start: 5px;
  font-size: .755rem; font-weight: 500; color: var(--muted-2);
  letter-spacing: .01em;
}

/* أزرار */
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 3px;
  font-family: inherit; font-size: .855rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-solid {
  background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg);
  box-shadow: var(--shadow-sm);
}
.btn-solid:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28,92,94,.26); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--white); border-color: var(--btn-bg); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-quiet {
  background: transparent; color: var(--muted); border-color: transparent;
  padding-inline: 10px;
}
.btn-quiet:hover { color: var(--teal); }

/* ══════════════════ SECTION COMMONS ══════════════════ */
section { padding-block: clamp(64px, 8vw, 104px); }
.sec-head {
  display: flex; align-items: flex-start; gap: clamp(1rem, 2.4vw, 2.2rem);
  padding-block-end: 1.4rem;
  border-block-end: 1px solid var(--line);
  margin-block-end: clamp(2rem, 4vw, 3.2rem);
}
.sec-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 500; line-height: 1;
  color: var(--teal); flex-shrink: 0;
  padding-block-start: .18em;
  font-variant-numeric: lining-nums;
}
.sec-head-body { flex: 1; min-width: 0; }
.sec-label {
  font-size: .7rem; font-weight: 600; letter-spacing: .17em;
  color: var(--muted-2); margin-block-end: .5rem;
}
.sec-title {
  font-family: 'Cairo', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 900; line-height: 1.45;
  letter-spacing: normal; color: var(--text);
}
body.ltr .sec-title { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: -.01em; }
.sec-sub {
  font-size: .93rem; color: var(--muted);
  margin-block-start: .6rem; max-width: 62ch;
}

/* ══════════════════ ABOUT ══════════════════ */
#about { background: var(--white); }
.about-grid {
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: start;
}
.about-col { display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 2rem); }
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
}
.panel-alt { background: var(--paper); }
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding-block-end: .9rem; margin-block-end: 1.1rem;
  border-block-end: 1px solid var(--line);
}
.panel-head .bar {
  width: 3px; height: 15px; background: var(--teal);
  flex-shrink: 0; border-radius: 1px;
}
.panel-head h3 {
  font-family: 'Cairo', sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--text);
  letter-spacing: normal;
}

.tl-item {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 1rem; padding-block: .85rem;
  border-block-end: 1px solid var(--line-soft);
  transition: background var(--t-fast);
}
.tl-item:last-child { border-block-end: 0; padding-block-end: 0; }
.tl-item:first-child { padding-block-start: 0; }
.tl-date {
  font-size: .745rem; font-weight: 600; color: var(--teal);
  letter-spacing: .01em; padding-block-start: .28em;
  font-variant-numeric: lining-nums;
}
.tl-role { font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.55; }
.tl-org { font-size: .8rem; color: var(--muted-2); line-height: 1.6; }

.skills { display: flex; flex-wrap: wrap; gap: 7px; }
.skill {
  font-size: .78rem; font-weight: 500;
  padding: 6px 13px; border-radius: 2px;
  background: var(--paper-2); color: var(--muted);
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.skill:hover { background: var(--teal-tint); color: var(--teal-deep); border-color: rgba(28,92,94,.22); }

/* ══════════════════ MEDIA GRIDS ══════════════════ */
.media-sec { background: var(--paper); }
.media-sec--alt { background: var(--white); }
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.media-sec--alt .card { background: var(--paper); }
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(28,92,94,.3);
  box-shadow: var(--shadow-lg);
}

.cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.cover > img {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .55s var(--ease);
}
.card:hover .cover > img { transform: scale(1.045); }

/* غلاف مُصمَّم يظهر إذا تعذّر تحميل الصورة الخارجية — ليس Placeholder عاماً:
   لكل مادة غلافها الخاص بموضوعها ومصدرها */
.cover-art {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px 18px;
  background:
    radial-gradient(125% 105% at 80% 0%, var(--cover-glow) 0%, transparent 56%),
    linear-gradient(150deg, var(--cover-a) 0%, var(--cover-b) 72%);
}
.cover-art::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 7px);
  opacity: .5;
}
.cover-art-topic {
  position: relative;
  font-family: 'Cairo', sans-serif;
  font-size: 1.04rem; font-weight: 700; line-height: 1.45;
  color: #fff; max-width: 92%;
}
.cover-art-topic em {
  display: block; font-style: normal;
  width: 26px; height: 2px; background: var(--teal-bright);
  margin-block-end: 9px;
}

.cover-veil {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, rgba(12,15,16,.5) 0%, transparent 52%);
  opacity: .9; transition: opacity var(--t);
}
.card:hover .cover-veil { opacity: 1; }

.badge {
  position: absolute; z-index: 5;
  inset-block-start: 11px; inset-inline-start: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(12,15,16,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .655rem; font-weight: 600;
  letter-spacing: .07em; padding: 5px 10px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.12);
}
.badge i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-bright); flex-shrink: 0;
}

.play {
  position: absolute; z-index: 5;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%) scale(.82);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(247,246,243,.94);
  display: grid; place-items: center;
  opacity: 0; transition: opacity var(--t), transform var(--t);
  box-shadow: 0 6px 22px rgba(0,0,0,.34);
}
body.ltr .play { transform: translate(-50%, -50%) scale(.82); }
.card:hover .play { opacity: 1; transform: translate(50%, -50%) scale(1); }
body.ltr .card:hover .play { transform: translate(-50%, -50%) scale(1); }
.play svg { width: 19px; height: 19px; fill: var(--ink); margin-inline-start: 3px; }
body.ltr .play svg { margin-inline-start: 0; margin-inline-end: 3px; }

.card-body {
  padding: 1.15rem 1.25rem 1.25rem;
  flex: 1; display: flex; flex-direction: column;
}
.card-meta {
  display: flex; align-items: center; gap: 9px;
  font-size: .715rem; color: var(--muted-2); font-weight: 500;
  margin-block-end: .55rem;
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.card-meta .cat { color: var(--teal); font-weight: 600; }
.card-title {
  font-family: 'Cairo', sans-serif;
  font-size: .945rem; font-weight: 700; line-height: 1.65;
  color: var(--text); margin-block-end: .5rem;
  letter-spacing: normal;
}
body.ltr .card-title { font-family: 'Cairo', sans-serif; }
.card-desc {
  font-size: .825rem; color: var(--muted);
  line-height: 1.8; flex: 1; margin-block-end: 1.1rem;
}
.card-act {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  padding-block: 4px;
  border-block-end: 1.5px solid var(--teal);
  transition: color var(--t-fast), gap var(--t-fast);
}
.card-act:hover { color: var(--teal); gap: 13px; }
.card-act svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--t-fast); }
.card-act .arr { transform: scaleX(-1); }
body.ltr .card-act .arr { transform: none; }

/* ══════════════════ PARTNERS MARQUEE ══════════════════ */
#partners { background: var(--white); overflow: hidden; }
.marquee-wrap {
  position: relative;
  margin-block-start: .5rem;
  padding-block: 1.6rem;
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: var(--marquee-bg);
  /* حاسم: في RTL يُلصق المحتوى الأعرض من الحاوية بيمينها ويفيض يساراً،
     فلا يبقى شيء يدخل من اليمين وتتسع فجوة بيضاء أثناء الحركة.
     نثبّت اتجاه الحاوية والشريط على ltr ليبدأ الشريط من اليسار ويمتد
     فائضه يميناً، جاهزاً للدخول. الشعارات نفسها تتحرك يساراً كما يناسب
     الواجهة العربية. */
  direction: ltr;
}
.marquee-wrap::before,
.marquee-wrap::after {
  content: ''; position: absolute; inset-block: 0; z-index: 3;
  width: clamp(48px, 10%, 140px); pointer-events: none;
}
.marquee-wrap::before { left: 0;  background: linear-gradient(to right, var(--marquee-bg), transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--marquee-bg), transparent); }

.marquee {
  display: flex; width: max-content;
  direction: ltr;                 /* اتجاه ثابت لا يتأثر بـ RTL في الحسابات */
  animation: marquee var(--marquee-dur, 40s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* الشريط = عدد صحيح من المجموعات المتطابقة (--copies).
   الإزاحة = ‎-100%‎ ÷ عدد المجموعات = عرض مجموعة واحدة بالضبط، رياضياً،
   بلا أي قياس بالبكسل وبلا خطأ تقريب. عند نهاية الدورة تكون المجموعة
   التالية في موضع السابقة تماماً، فالعودة إلى الصفر غير مرئية إطلاقاً. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-100% / var(--copies, 2)), 0, 0); }
}
.logo-cell {
  --cell-h: 62px;
  display: grid; place-items: center;
  width: clamp(130px, 15vw, 186px);
  height: var(--cell-h);
  margin-inline-end: clamp(1.5rem, 3.4vw, 3.2rem);
  flex-shrink: 0;
}
.logo-cell img {
  width: 100%; height: var(--cell-h);
  object-fit: contain; object-position: center;
  transition: transform var(--t);
}
.logo-cell:hover img { transform: scale(1.06); }

/* ══════════════════ MODAL ══════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(12,15,16,.82);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 4vw;
  opacity: 0; pointer-events: none; transition: opacity var(--t);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  width: min(920px, 100%);
  max-height: 92dvh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius-lg);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-slow);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
}
.modal-overlay.open .modal-box { transform: none; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.05rem 1.35rem;
  border-block-end: 1px solid var(--line);
}
.modal-title {
  font-family: 'Cairo', sans-serif;
  font-size: .96rem; font-weight: 700; color: var(--text); line-height: 1.5;
}
.modal-close {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--line); background: none; cursor: pointer;
  border-radius: 3px; display: grid; place-items: center;
  color: var(--muted); font-size: 1rem; line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.modal-video { position: relative; padding-block-start: 56.25%; background: #000; }
.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-body { padding: 1.25rem 1.35rem 1.45rem; }
.modal-desc { font-size: .9rem; color: var(--muted); line-height: 1.9; }

/* ══════════════════ CONTACT ══════════════════ */
#contact { background: var(--paper); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.4vw, 2rem); align-items: start;
}
.info-row {
  display: flex; align-items: center; gap: 13px;
  padding-block: .95rem;
  border-block-end: 1px solid var(--line-soft);
}
.info-row:last-of-type { border-block-end: 0; }
.info-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 3px;
  display: grid; place-items: center; background: var(--paper-2);
}
.info-ico svg { width: 19px; height: 19px; }
.info-label { font-size: .73rem; color: var(--muted-2); font-weight: 500; }
.info-value {
  font-size: .95rem; font-weight: 600; color: var(--text);
  text-decoration: none; word-break: break-word;
  transition: color var(--t-fast);
}
.info-value:hover { color: var(--teal); }

.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-block-start: 1.2rem; }
.social {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--white);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.social:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--btn-bg); }
.social-ico { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; }
.social-ico svg { width: 19px; height: 19px; }
.social-name { font-size: .845rem; font-weight: 600; color: var(--text); line-height: 1.4; }
.social-handle { font-size: .715rem; color: var(--muted-2); direction: ltr; text-align: start; }
.social.wa .social-ico { color: #1E9E52; }
.social.ig .social-ico { color: #C1358A; }
.social.yt .social-ico { color: #C4302B; }
.social.fb .social-ico { color: #1C5BA8; }

.field { margin-block-end: .95rem; }
.field label {
  display: block; font-size: .765rem; font-weight: 600;
  color: var(--muted); margin-block-end: 6px;
}
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: .885rem;
  padding: 11px 13px; color: var(--text);
  background: var(--white);
  border: 1px solid var(--line); border-radius: 3px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 124px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: 0; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(28,92,94,.11);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); opacity: .72; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem; }
.form-msg { font-size: .82rem; margin-block-start: .8rem; font-weight: 500; min-height: 1.2em; }
.form-msg.ok { color: var(--teal); }
.form-msg.err { color: #A8443F; }

/* ══════════════════ FOOTER ══════════════════ */
footer {
  background: var(--ink); color: rgba(255,255,255,.62);
  padding-block: clamp(2.6rem, 5vw, 4rem) 1.6rem;
  position: relative;
}
footer::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(to left, var(--teal) 0%, var(--teal) 34%, var(--brass) 34%, var(--brass) 44%, var(--ink-line) 44%);
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block-end: 2rem;
  border-block-end: 1px solid var(--ink-line);
}
.foot-name {
  font-family: 'Cairo', sans-serif;
  font-size: 1.12rem; font-weight: 800; color: #fff;
  margin-block-end: .4rem; letter-spacing: normal;
}
.foot-role { font-size: .83rem; color: rgba(255,255,255,.5); margin-block-end: .9rem; }
.foot-loc { font-size: .78rem; color: rgba(255,255,255,.4); }
.foot-h {
  font-size: .68rem; font-weight: 600; letter-spacing: .15em;
  color: rgba(255,255,255,.38); margin-block-end: .9rem;
}
.foot-links { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.foot-links a {
  font-size: .83rem; color: rgba(255,255,255,.66);
  text-decoration: none; transition: color var(--t-fast), padding var(--t-fast);
}
.foot-links a:hover { color: #fff; padding-inline-start: 4px; }
.foot-social { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-social a {
  width: 36px; height: 36px; border-radius: 3px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-line); color: rgba(255,255,255,.62);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.foot-social a:hover { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-2px); }
.foot-social svg { width: 16px; height: 16px; }
.foot-bottom {
  padding-block-start: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-size: .765rem; color: rgba(255,255,255,.4);
}
.foot-bottom strong { color: rgba(255,255,255,.72); font-weight: 600; }

/* ══════════════════ REVEAL ══════════════════ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .09s; } .d2 { transition-delay: .18s; }
.d3 { transition-delay: .27s; } .d4 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee { animation: none; }
  .live-dot { animation: none; }
  * { transition-duration: .01ms !important; }
}


/* ══════════════════ الوضع الليلي ══════════════════
   ينقلب عبر الرموز فقط، فكل الأقسام تتبعه تلقائياً */
:root[data-theme="dark"] {
  --paper:      #0B0E0F;
  --paper-2:    #151A1B;
  --white:      #111617;
  --line:       #262D2F;
  --line-soft:  #1C2223;
  --text:       #EBE9E4;
  --muted:      #A5ADAF;
  --muted-2:    #7C8587;

  --ink:        #181F20;
  --ink-soft:   #212829;
  --ink-line:   #2C3335;

  --teal:       #45A9AB;
  --teal-deep:  #86CDCD;
  --teal-bright:#57BCBE;
  --teal-tint:  #14282B;
  --brass:      #C9A05C;

  --btn-bg:     #EAE7E1;
  --btn-fg:     #0B0E0F;
  --nav-bg:     rgba(11,14,15,.9);
  --cover-a:    #232B2D;
  --cover-b:    #101415;
  --cover-glow: rgba(69,169,171,.34);

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.42), 0 12px 32px rgba(0,0,0,.34);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.5);
}
/* في الوضع الليلي يصبح الشريط لوحاً فاتحاً واحداً متصلاً — لا مربّعات
   منفصلة خلف كل شعار — فتبقى الشعارات بألوانها الأصلية والقسم منسّق */
:root[data-theme="dark"] {
  --marquee-bg: #F2F1ED;
}
:root[data-theme="dark"] .marquee-wrap {
  border-block-color: #2E3638;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
:root[data-theme="dark"] .portrait { box-shadow: 0 30px 70px rgba(0,0,0,.7); }
:root[data-theme="dark"] .info-ico { filter: saturate(.9) brightness(.94); }
:root[data-theme="dark"] .play { background: rgba(240,238,233,.95); }
:root[data-theme="dark"] footer { background: #080B0C; }

/* الافتراضي يتبع نظام التشغيل، ويتجاوزه اختيار المستخدم الصريح */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0B0E0F;
    --paper-2:    #151A1B;
    --white:      #111617;
    --line:       #262D2F;
    --line-soft:  #1C2223;
    --text:       #EBE9E4;
    --muted:      #A5ADAF;
    --muted-2:    #7C8587;
    --ink:        #181F20;
    --ink-soft:   #212829;
    --ink-line:   #2C3335;
    --teal:       #45A9AB;
    --teal-deep:  #86CDCD;
    --teal-bright:#57BCBE;
    --teal-tint:  #14282B;
    --btn-bg:     #EAE7E1;
    --btn-fg:     #0B0E0F;
    --nav-bg:     rgba(11,14,15,.9);
    --cover-a:    #232B2D;
    --cover-b:    #101415;
    --cover-glow: rgba(69,169,171,.34);
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,.42), 0 12px 32px rgba(0,0,0,.34);
    --shadow-lg:  0 18px 48px rgba(0,0,0,.5);
  }
  :root:not([data-theme="light"]) { --marquee-bg: #F2F1ED; }
  :root:not([data-theme="light"]) .marquee-wrap {
    border-block-color: #2E3638;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  }
  :root:not([data-theme="light"]) .play { background: rgba(240,238,233,.95); }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-sun  { display: none; }
  :root:not([data-theme="light"]) footer { background: #080B0C; }
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 1180px) {
  :root { --shell: min(1100px, 100% - 8vw); }
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: .8rem; }
}

@media (max-width: 1024px) {
  .nav-links, .nav-logo-sub { display: none; }
  .hamburger { display: flex; }
  nav .shell > .nav-tools { margin-inline-start: auto; }
  nav { background: var(--nav-bg); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-block-end-color: var(--line); }
  .hero-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 40px) 56px; }
  /* اللوح يصبح خلفية للصورة وحدها حتى لا يمرّ تحت النصوص */
  .hero-slab { display: none; }
  .hero-visual::before {
    content: ''; position: absolute; z-index: 0;
    inset-block: -22px; inset-inline: -5.4vw;
    background:
      radial-gradient(120% 90% at 72% 6%, #1E2527 0%, transparent 62%),
      linear-gradient(168deg, var(--ink-soft) 0%, var(--ink) 100%);
    border-block: 1px solid rgba(42,130,133,.26);
  }
  .portrait-wrap { width: min(100%, 340px); margin-block: 22px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --shell: min(100%, 100% - 8vw); --nav-h: 66px; }
  .hero-bio { line-height: 1.85; }
  .hero-stats {
    max-width: none;
    display: grid; grid-template-columns: repeat(3, 1fr);
  }
  .stat { min-width: 0; padding: .95rem .7rem .95rem 0; }
  .stat-label { line-height: 1.5; }
  .stat-number { font-size: 1.55rem; }
  .stat-label { font-size: .705rem; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .tl-item { grid-template-columns: 82px 1fr; gap: .75rem; }
  .sec-head { gap: 1rem; }
  .socials { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0; place-items: end stretch; }
  .modal-box { max-height: 94dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

@media (max-width: 560px) {
  section { padding-block: 56px; }
  .btn { padding: 12px 18px; font-size: .825rem; }
  .hero-cta { gap: .5rem; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .grid-cards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .tl-item { grid-template-columns: 1fr; gap: .18rem; }
  .tl-date { padding-block-start: 0; }
  .portrait-frame { inset-block: 14px -14px; inset-inline: 14px -14px; }
  .portrait-tag { inset-block-end: 14px; inset-inline: 14px; padding: 9px 12px; }
  .portrait-tag-txt { display: flex; flex-direction: column; min-width: 0; }
.portrait-tag strong { font-size: .84rem; }
  .logo-cell { --cell-h: 58px; width: 132px; margin-inline-end: 1.7rem; }
}

@media (max-width: 400px) {
  .stat { flex: 1 1 50%; }
  .portrait-wrap { width: 100%; margin-block: 22px; }
  .kicker { font-size: .68rem; letter-spacing: .12em; }
  .card-body { padding: 1rem 1.05rem 1.1rem; }
}