/* ==========================================================================
   مصنع المجد العالمية — الأنماط الرئيسية
   ========================================================================== */

/* ---------- إعادة الضبط ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: rgba(var(--gold-rgb), .35); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-600), var(--gold-400));
  border-radius: var(--r-full);
}

/* ---------- مساعدات ---------- */
.wrap { width: min(100% - var(--sp-6), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--sp-6), var(--wrap-narrow)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px;
  background: var(--gold-200); color: var(--text-on-gold);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  z-index: var(--z-modal); font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- الطباعة ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-accent); margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ''; width: 30px; height: 1px;
  background: var(--gold-400); flex: none;
}

.section-title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.section-title em {
  font-style: normal;
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-sub {
  color: var(--text-muted); font-size: var(--fs-lg);
  line-height: var(--lh-loose); max-width: 62ch;
}
.center-head { text-align: center; margin-bottom: var(--sp-8); }
.center-head .eyebrow { justify-content: center; }
.center-head .eyebrow::after {
  content: ''; width: 30px; height: 1px; background: var(--gold-400); flex: none;
}
.center-head .section-sub { margin-inline: auto; }

/* ---------- الأقسام ---------- */
.section { padding-block: clamp(var(--sp-8), 9vw, var(--sp-10)); position: relative; }
.section-alt { background: var(--bg-alt); }
.section-alt::before,
.section-alt::after {
  content: ''; position: absolute; inset-inline: 0; height: 1px;
  background: var(--grad-fade-r);
}
.section-alt::before { top: 0; }
.section-alt::after { bottom: 0; }

/* ==========================================================================
   الترويسة
   ========================================================================== */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(5, 5, 5, .88);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
}
.header-inner { display: flex; align-items: center; gap: var(--sp-5); width: 100%; }

.brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* الشعار الرسمي — نسخة معكوسة للخلفية الداكنة.
   نستخدم الرمز وحده في الترويسة لأن الشعار الكامل عمودي (نص تحت رمز)
   ولا يصلح لشريط أفقي ارتفاعه ٧٦ بكسل، ولأن اسم الشركة مكتوب بجانبه
   نصًّا حيًّا فلا يتكرر مرتين. */
.brand-mark { height: 44px; width: auto; flex: none; }
.site-footer .brand-mark { height: 52px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-ar {
  font-family: var(--ff-display); font-weight: 900; font-size: 17px;
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-en {
  font-size: 8px; letter-spacing: .28em; color: var(--gold-400);
  direction: ltr; text-align: start; margin-top: 2px;
}

.nav { margin-inline-start: auto; }
.nav ul { display: flex; align-items: center; gap: var(--sp-2); }
.nav a {
  display: block; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  border-radius: var(--r-sm); position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--text-accent); }
.nav a[aria-current="true"]::after {
  content: ''; position: absolute; inset-inline: var(--sp-3); bottom: 2px;
  height: 2px; background: var(--gold-400); border-radius: var(--r-full);
}

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* مبدّل اللغة — رابط حقيقي لا زر جافاسكربت، حتى تصله عناكب البحث */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 34px; padding: 0 var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-full);
  font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; color: var(--text-accent);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.lang-switch:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.nav-toggle {
  display: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-accent);
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: 0 var(--sp-5);
  border-radius: var(--r-full);
  font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-sm);
  white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-gold { background: var(--grad-gold-btn); color: var(--text-on-gold); box-shadow: var(--sh-gold); }
.btn-gold:hover { box-shadow: 0 14px 46px -10px rgba(var(--gold-rgb), .55); }

.btn-ghost {
  border: 1px solid var(--border); color: var(--text-accent);
  background: var(--surface);
}
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-hover); }

.btn-sm { min-height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.btn-block { width: 100%; }

/* ---------- بطاقة زجاجية ---------- */
.glass {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   الهيرو
   ========================================================================== */
.hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* التعتيم يشتدّ ناحية اليمين حيث يقع النص، ويخفّ ناحية اليسار حتى تظهر
   قاعة الخلط فعلًا. الترتيب السابق كان معكوسًا فابتلع الصورة بالكامل. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(5,5,5,.28) 0%, rgba(5,5,5,.72) 48%, rgba(5,5,5,.95) 100%),
    linear-gradient(to top, var(--bg) 2%, transparent 42%);
}
.hero .wrap { position: relative; z-index: 1; }

/* 18ch كانت تكسر السطر الأول فتترك «تحمله» يتيمة في سطر وحدها.
   وحدة ch تُقاس بعرض الرقم صفر ولا تصف العربية جيدًا، فنستخدم em. */
/* 18ch كانت تكسر السطر الأول فتترك «تحمله» يتيمة في سطر وحدها.
   وحدة ch تُقاس بعرض الرقم صفر ولا تصف العربية جيدًا، فنستخدم em.
   وارتفاع السطر 1.18 ضيّق على العربية المشكولة (الضمة والشدّة فوق
   «نُصنّع») فيلامس السطرَ الذي فوقه — 1.28 يعطيها متنفّسًا. */
.hero-title {
  font-size: var(--fs-4xl);
  line-height: 1.28;
  max-width: 13em;
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.hero-title .gold {
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: var(--fs-lg); color: var(--text-muted);
  line-height: var(--lh-loose); max-width: 58ch; margin-bottom: var(--sp-6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }

/* شريط الثقة */
.trust-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-7);
  padding-top: var(--sp-6); border-top: 1px solid var(--border-soft);
}
.trust-stat { display: flex; flex-direction: column; gap: 2px; }
.trust-num {
  font-family: var(--ff-display); font-weight: 900; font-size: var(--fs-xl);
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.trust-label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .04em; }

.trust-iso {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface);
}
.trust-iso svg { width: 22px; height: 22px; color: var(--gold-400); flex: none; }
.trust-iso b { font-family: var(--ff-display); font-size: var(--fs-sm); display: block; }
.trust-iso span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   مسارات العملاء — نمط Enterprise Gateway
   ========================================================================== */
.paths-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.path-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.path-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  transform: translateY(-4px);
}
.path-ico {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--gold-300); margin-bottom: var(--sp-2);
}
.path-ico svg { width: 26px; height: 26px; }
.path-card h3 { font-size: var(--fs-lg); }
.path-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); flex: 1; }
.path-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--text-accent); font-weight: 700; font-size: var(--fs-sm);
  font-family: var(--ff-display);
}
.path-link svg { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.path-card:hover .path-link svg { transform: translateX(-4px); }

/* ==========================================================================
   عن المصنع
   ========================================================================== */
.about-grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1.05fr .95fr; align-items: center;
}
.about-copy p { color: var(--text-muted); line-height: var(--lh-loose); margin-bottom: var(--sp-4); }
.about-copy strong { color: var(--text); font-weight: 700; }

.pillar-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.pillar { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pillar-ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--gold-300);
}
.pillar-ico svg { width: 20px; height: 20px; }
.pillar h3 { font-size: var(--fs-base); margin-bottom: 3px; }
.pillar p { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }

.about-media { position: relative; border-radius: var(--r-xl); overflow: hidden; }
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.75), transparent 55%);
}
.about-media figcaption {
  position: absolute; inset-inline: var(--sp-5); bottom: var(--sp-5); z-index: 1;
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* شريط القدرات */
.capability-grid {
  display: grid; gap: var(--sp-3); margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.capability {
  padding: var(--sp-5); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); background: var(--surface);
}
.capability .num {
  display: block; font-family: var(--ff-display); font-weight: 900;
  font-size: var(--fs-xl); color: var(--gold-300); margin-bottom: var(--sp-2);
}
.capability .lbl { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }

/* ==========================================================================
   العلامات الشريكة
   ========================================================================== */
.partners-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.partner-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 148px; padding: var(--sp-5);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface); text-align: center;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.partner-badge:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.partner-name {
  font-family: var(--ff-display); font-weight: 900; font-size: var(--fs-lg);
  letter-spacing: .06em; direction: ltr;
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.partner-tag {
  font-size: var(--fs-xs); color: var(--text-faint);
  letter-spacing: .12em; text-transform: uppercase; direction: ltr;
}

/* ==========================================================================
   المنتجات
   ========================================================================== */
.filter-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-bottom: var(--sp-6);
}
.filter-chip {
  min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--border-soft); border-radius: var(--r-full);
  font-size: var(--fs-sm); color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--border); color: var(--text-accent); }
.filter-chip.is-active {
  background: var(--grad-gold-btn); color: var(--text-on-gold);
  border-color: transparent; font-weight: 700;
}

.product-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.product-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

/* الصورة مطلقة الموضع عمدًا: لو بقيت في تدفّق الشبكة لفرض ارتفاعها الأصلي
   (640×640) تمدّد الصندوق وتجاهل aspect-ratio، فتصبح البطاقات ذات الصور
   أطول من بطاقات الأيقونة البديلة ولا يستقيم صفّ واحد. */
.product-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--gold-rgb), .12), transparent 65%), var(--ink-900);
}
.product-media img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 78%; max-height: 82%;
  object-fit: contain;
}
.product-media .ph { width: 54px; height: 54px; color: var(--gold-600); }

.product-badge {
  position: absolute; inset-inline-start: var(--sp-3); top: var(--sp-3);
  padding: 5px var(--sp-3); border-radius: var(--r-full);
  background: var(--grad-gold-btn); color: var(--text-on-gold);
  font-size: var(--fs-xs); font-weight: 700; font-family: var(--ff-display);
}

.product-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.product-name { font-size: var(--fs-base); direction: ltr; text-align: start; }
.product-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.product-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border-soft);
}
.product-size { font-size: var(--fs-xs); color: var(--text-faint); }
.product-min {
  font-size: var(--fs-xs); color: var(--gold-300);
  padding: 3px var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.product-pick {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.product-pick:hover { color: var(--text-accent); background: var(--surface-hover); }
.product-pick input { width: 17px; height: 17px; accent-color: var(--gold-400); cursor: pointer; }

/* ==========================================================================
   الجودة والاعتمادات
   ========================================================================== */
.cert-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cert-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); background: var(--surface);
}
.cert-seal {
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-full);
  color: var(--gold-300);
}
.cert-seal svg { width: 28px; height: 28px; }
.cert-card h3 { font-size: var(--fs-base); }
.cert-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }
.cert-card .cert-id {
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  color: var(--text-faint); direction: ltr; text-align: start;
}

/* ---------- عرض الشهادتين بصورتيهما وبياناتهما ---------- */
/* min() ضرورية: minmax(400px,…) وحدها تفرض 400 بكسل حتى على شاشة 390
   فتتجاوز البطاقة حدود الشاشة أفقيًا. */
.cert-showcase {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}
.cert-doc {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 210px 1fr;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.cert-thumb {
  display: block; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cert-thumb:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.cert-thumb img { width: 100%; height: auto; }

.cert-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.cert-body h3 { font-size: var(--fs-base); }
.cert-body > p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }

.cert-meta { display: grid; gap: var(--sp-2); margin: var(--sp-2) 0; }
.cert-meta > div {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: var(--fs-xs); padding-bottom: var(--sp-2);
  border-bottom: 1px dashed var(--border-soft);
}
.cert-meta dt { color: var(--text-faint); min-width: 88px; flex: none; }
.cert-meta dd {
  margin: 0; color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cert-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }

.cert-issuer {
  margin-top: var(--sp-5); text-align: center;
  font-size: var(--fs-xs); color: var(--text-faint); line-height: var(--lh-loose);
}

@media (max-width: 560px) {
  .cert-doc { grid-template-columns: 1fr; }
  .cert-thumb { max-width: 240px; margin-inline: auto; }
}

/* ==========================================================================
   المعرض
   ========================================================================== */
/* ارتفاع صفّ ثابت: بدونه يفرض العنصر العريض (عمودان) ارتفاعًا كبيرًا على
   الصف كله، فتتمدّد خلايا العناصر العادية بينما تبقى صورها بنسبتها الأصلية
   فيظهر فراغ أسود تحت كل صورة قصيرة. */
.gallery-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-auto-rows: 240px;
}
.gallery-item {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border-soft);
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text);
  background: linear-gradient(to top, rgba(5,5,5,.9), transparent);
}
.gallery-item.is-wide { grid-column: span 2; }

/* ==========================================================================
   النماذج
   ========================================================================== */
.form-panel { padding: clamp(var(--sp-5), 4vw, var(--sp-7)); }
.form-panel > h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.form-panel > p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

.form-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.field input, .field textarea, .field select {
  min-height: 48px; padding: var(--sp-3) var(--sp-4);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  color: var(--text); font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 120px; padding-top: var(--sp-3); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--border-strong); background: rgba(0, 0, 0, .5);
}
.field-error {
  display: none; font-size: var(--fs-xs); color: var(--danger-400);
}
.field.has-error input, .field.has-error textarea { border-color: var(--danger-400); }
.field.has-error .field-error { display: block; }

/* مصيدة السبام — مخفية بصريًا وعن قارئات الشاشة وعن التنقل بالكيبورد.
   لا تستخدم display:none لأن بعض الروبوتات تتجاهل الحقول المخفية بها. */
.hp {
  position: absolute !important;
  inset-inline-start: -9999px;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

.form-note {
  font-size: var(--fs-xs); color: var(--text-faint);
  margin-top: var(--sp-4); line-height: var(--lh-snug);
}
.form-status {
  display: none; padding: var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); margin-bottom: var(--sp-4);
}
.form-status.is-ok { display: block; border: 1px solid var(--success-400); color: var(--success-400); }
.form-status.is-err { display: block; border: 1px solid var(--danger-400); color: var(--danger-400); }

.picked-list {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px dashed var(--border); border-radius: var(--r-md);
  min-height: 62px; align-items: center;
}
.picked-empty { font-size: var(--fs-xs); color: var(--text-faint); }
.picked-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3); border-radius: var(--r-full);
  background: var(--surface-hover); border: 1px solid var(--border);
  font-size: var(--fs-xs); direction: ltr;
}
.picked-chip button { color: var(--text-muted); line-height: 1; font-size: 15px; }
.picked-chip button:hover { color: var(--danger-400); }

/* ==========================================================================
   المقالات
   ========================================================================== */
.news-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.news-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.news-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.news-tag {
  font-size: var(--fs-xs); color: var(--gold-300);
  letter-spacing: .1em; text-transform: uppercase;
}
.news-card h3 { font-size: var(--fs-base); line-height: var(--lh-snug); }
.news-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); flex: 1; }
.news-more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-accent);
  font-family: var(--ff-display); margin-top: var(--sp-2);
}
.news-more svg { width: 14px; height: 14px; }

/* ==========================================================================
   الفروع
   ========================================================================== */
.contact-grid {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.loc-card { padding: var(--sp-6); }
.loc-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--gold-300);
  letter-spacing: .1em; margin-bottom: var(--sp-3);
}
.loc-tag svg { width: 14px; height: 14px; }
.loc-card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.loc-line {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3);
}
.loc-line svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; margin-top: 4px; }
.loc-line a { color: var(--text-muted); direction: ltr; }
.loc-line a:hover { color: var(--text-accent); }
.loc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ==========================================================================
   الفوتر
   ========================================================================== */
.site-footer {
  background: var(--ink-900); border-top: 1px solid var(--border);
  padding-block: var(--sp-8) var(--sp-5);
}
.footer-grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  padding-bottom: var(--sp-7); border-bottom: 1px solid var(--border-soft);
}
.footer-brand p {
  font-size: var(--fs-sm); color: var(--text-muted);
  line-height: var(--lh-loose); margin-top: var(--sp-4); max-width: 40ch;
}
.footer-col h3 {
  font-size: var(--fs-sm); margin-bottom: var(--sp-4);
  color: var(--text-accent); letter-spacing: .04em;
}
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { font-size: var(--fs-sm); color: var(--text-muted); }
.footer-col a:hover { color: var(--text-accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-5); font-size: var(--fs-xs); color: var(--text-faint);
}

/* ==========================================================================
   صفحة التصنيع الخاص
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-8);
  text-align: center;
}
.page-hero .hero-bg::after {
  background:
    linear-gradient(to bottom, rgba(5,5,5,.82), rgba(5,5,5,.94)),
    linear-gradient(to top, var(--bg) 3%, transparent 50%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .eyebrow { justify-content: center; }
.page-hero .eyebrow::after {
  content: ''; width: 30px; height: 1px; background: var(--gold-400); flex: none;
}
.page-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-5); }
.page-hero .lead {
  font-size: var(--fs-lg); color: var(--text-muted);
  line-height: var(--lh-loose); max-width: 66ch; margin: 0 auto var(--sp-6);
}
.page-hero .hero-actions { justify-content: center; margin-bottom: 0; }

.steps-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  counter-reset: step;
}
.step-card {
  position: relative; padding: var(--sp-6);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: var(--surface);
}
.step-num {
  font-family: var(--ff-display); font-weight: 900; font-size: var(--fs-2xl);
  color: rgba(var(--gold-rgb), .28); line-height: 1; margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.step-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.step-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }

.why-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.why-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.why-item .wi {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--gold-300);
}
.why-item .wi svg { width: 18px; height: 18px; }
.why-item h3 { font-size: var(--fs-base); margin-bottom: 3px; }
.why-item p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }

.success-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.success-card {
  padding: var(--sp-6); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); background: var(--surface);
}
.success-card .partner-name { display: block; margin-bottom: var(--sp-3); }
.success-card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-loose); }

/* ==========================================================================
   المقالات — صفحة الفهرس وصفحة المقال
   ========================================================================== */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-5);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-accent); }
.breadcrumb li + li::before { content: '/'; margin-inline-end: var(--sp-2); color: var(--text-faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.article-head { padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-5); }
.article-head h1 { font-size: var(--fs-3xl); max-width: 22ch; margin-bottom: var(--sp-4); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--text-faint);
}

.article-cover { border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-7); }
.article-cover img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.prose { max-width: 68ch; margin-inline: auto; padding-bottom: var(--sp-8); }
.prose p { color: var(--text-muted); line-height: var(--lh-loose); margin-bottom: var(--sp-5); }
.prose h2 {
  font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5); border-top: 1px solid var(--border-soft);
}
.prose h3 { font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-3); color: var(--text-accent); }
.prose b, .prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 var(--sp-5); padding-inline-start: var(--sp-5); }
.prose ul li { list-style: none; position: relative; padding-inline-start: var(--sp-4); }
.prose ul li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .8em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400);
}
.prose ol { list-style: decimal; }
.prose li { color: var(--text-muted); line-height: var(--lh-loose); margin-bottom: var(--sp-2); }
.prose a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  border-inline-start: 3px solid var(--gold-400);
  padding-inline-start: var(--sp-5); margin: var(--sp-6) 0;
  color: var(--text); font-size: var(--fs-lg);
}
.prose img { border-radius: var(--r-md); margin-bottom: var(--sp-5); }

.article-cta {
  padding: var(--sp-6); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  text-align: center; margin-top: var(--sp-8);
}
.article-cta h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); border: 0; padding: 0; }
.article-cta p { margin-bottom: var(--sp-5); }

/* زر واتساب عائم */
.wa-float {
  position: fixed; inset-inline-end: var(--sp-5); bottom: var(--sp-5);
  z-index: var(--z-overlay);
  width: 56px; height: 56px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6);
  transition: transform var(--dur-base) var(--ease-out);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* ==========================================================================
   حركة الظهور
   ========================================================================== */
/* الإخفاء الابتدائي مشروط بـ .js — بدون جافاسكربت يبقى المحتوى ظاهرًا،
   ولا يمكن أن تتعطّل الصفحة لو فشلت مراقبة التقاطع لأي سبب. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   الاستجابة
   ========================================================================== */
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* الاسم المسجّل بالحروف اللاتينية طويل (٢٩ حرفًا) فيوسّع قفل العلامة حتى
   يزيح زر «اطلب عرض سعر» خارج الشاشة بين ٧٦١ و٩٠٠ بكسل — والزر يُقصّ
   بـ overflow-x فيصبح غير قابل للنقر. إخفاء السطر الثانوي يحلّها،
   والشعار مع الاسم العربي يكفيان للتعريف في هذا المقاس. */
@media (max-width: 960px) {
  .site-header .brand-en { display: none; }
}

/* الترويسة تتحول للقائمة المنسدلة عند ٩٦٠ لا ٧٦٠: القائمة العربية ستة
   عناصر، ومعها قفل العلامة الطويل يُزاح زر «اطلب عرض سعر» خارج الشاشة
   بين ٧٦١ و٩٦٠ فيُقصّ بـ overflow-x ويصبح غير قابل للنقر.
   بقية قواعد الجوال تبقى عند ٧٦٠ حتى لا يظهر اللوح بمظهر الهاتف. */
@media (max-width: 960px) {
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgba(5, 5, 5, .97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--border-soft); }
  .nav a[aria-current="true"]::after { display: none; }

  .nav-toggle { display: flex; margin-inline-start: auto; }
  .header-actions .btn { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }

  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7); }
  .hero-title { max-width: none; }
  .trust-bar { gap: var(--sp-4) var(--sp-5); }
  .form-row { grid-template-columns: 1fr; }
  .gallery-item.is-wide { grid-column: span 1; }
  .gallery-grid { grid-auto-rows: 200px; }
  .footer-grid { grid-template-columns: 1fr; }
  .wa-float { width: 52px; height: 52px; }
}