/* =========================================================
   الصفحة الرئيسية — النموذج (أ) «سينمائي داكن»
   يُحمَّل على الصفحة الرئيسية فقط (inc/enqueue.php)، وكل قاعدة هنا
   مقيّدة بـ body.home-a حتى لا تؤثر على أي صفحة أخرى في الموقع.
   الألوان من assets/css/tokens.css — لا تُكتب قيم لونية جديدة إلا ما يخص هذا النموذج.
   ========================================================= */

body.home-a {
	--ha-ink:     #08111f;               /* أعمق درجة — خلفية الصفحة */
	--ha-deep:    var(--primary-900);    /* كحلي عميق — الأرقام والاستدامة */
	--ha-cyan:    var(--accent);
	--ha-cyan-s:  #7fd3da;               /* تيل فاتح — العناوين الصغيرة */
	--ha-sand:    #c9b99a;               /* رملي — الاستدامة */
	--ha-hero-h:  100vh;                 /* الهيرو بطول الشاشة كاملة */

	background: var(--ha-ink);
	color: #fff;
}

/* الفوتر الداكن يلتصق بالقسم الأخير بلا فاصل فاتح */
body.home-a .footer { background: var(--ha-ink); }

/* ---------- عناوين صغيرة مشتركة ---------- */
body.home-a .ha-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .32em;
	line-height: 1.4;
	color: #fff;
}
body.home-a .ha-eyebrow i {
	flex: none;
	width: 40px;
	height: 1px;
	background: currentColor;
}
body.home-a .ha-eyebrow-accent { color: var(--ha-cyan-s); }
body.home-a .ha-eyebrow-sand   { color: var(--ha-sand); }

/* ---------- الأزرار (النموذج أ): زوايا ناعمة، بلا أسهم، حالة زجاجية للثانوي ---------- */
body.home-a .ha-hero .btn,
body.home-a .ha-products-footer .btn,
body.home-a .ha-sus .btn,
body.home-a .ha-cta-btn {
	min-height: 54px;
	padding: 15px 30px;
	gap: 0;
	border-radius: 8px;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease), filter var(--ease);
}
/* الأساسي: تيلي مصمت بلا توهّج؛ الفخامة من الهدوء — حركة التحويم انزلاق خفيف لا قفزة */
body.home-a .ha-hero .btn-accent {
	background: var(--ha-cyan);
	color: var(--ha-ink);          /* نص داكن على التيلي — تباين 7:1 بدل الأبيض 2.9:1 */
	border-color: transparent;
	box-shadow: none;
	letter-spacing: .03em;
}
body.home-a .ha-hero .btn-accent:hover {
	background: #12b3c2;
	transform: translateY(-1px);
	box-shadow: none;
}
/* الثانوي: حدّ رفيع فقط، بلا زجاج ولا ضبابية */
body.home-a .btn-ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
	letter-spacing: .03em;
}
body.home-a .btn-ghost-light:hover {
	background: rgba(255, 255, 255, .06);
	border-color: #fff;
	transform: translateY(-1px);
}
body.home-a .ha-cta-btn { border-radius: 8px; box-shadow: none; letter-spacing: .03em; }
body.home-a .ha-cta-btn:hover { transform: translateY(-1px); }

/* رابط نصي مشترك: نص + خط قصير يمتد عند التحويم */
body.home-a .ha-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ha-cyan-s);
	text-decoration: none;
}
body.home-a .ha-link i {
	display: block;
	width: 28px;
	height: 1px;
	background: currentColor;
	transition: width var(--ease);
}
body.home-a .ha-link:hover { color: #fff; }
body.home-a .ha-link:hover i { width: 44px; }

/* ---------- رأس قسم مشترك (المنتجات · الأخبار): عنوان في جهة، ونص/أدوات في الجهة الأخرى ---------- */
body.home-a .ha-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 52px;
}
body.home-a .ha-head h2 {
	margin: 16px 0 0;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	line-height: 1.3;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-head-lead {
	flex: none;
	width: 25rem;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .62);
}

/* =========================================================
   1) الهيرو
   ========================================================= */
/* الهيرو مثبَّت (sticky) عند أعلى الشاشة: عند التمرير يبقى في مكانه وتنزلق الأقسام التالية فوقه
   كستارة. الأقسام التالية تأخذ z-index أعلى حتى تغطيه بدل أن يغطيها. */
body.home-a .ha-hero {
	position: sticky;
	top: 0;
	z-index: 0;
	display: flex;
	align-items: flex-end;
	min-height: var(--ha-hero-h);
	min-height: 100svh; /* على الجوال: ارتفاع الشاشة الفعلي بلا قفزة عند اختفاء شريط العنوان */
	padding: calc(var(--header) + 64px) 0 96px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--ha-deep), #001a3c);
	isolation: isolate;
}
body.home-a .ha-hero-media {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-size: cover;
	background-position: center;
}
body.home-a .ha-hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* التعتيم بلون الهوية الكحلي (نفس نغمة غلاف «من نحن»): طبقة أفقية تبدأ من جهة النص،
   وطبقة رأسية تُثقل الأعلى والأسفل قليلًا فيبقى النص واضحًا والمشهد أزرق لا رماديًا. */
body.home-a .ha-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* تدرّج متدرّج لا تعتيم عام: داكن خلف كتلة النص فقط، ويفتح عند المصنع.
	   التعتيم الموحّد السابق (94% على كامل العرض) كان يُسطّح الصورة ويُلغي عمقها.
	   لو استُبدلت الصورة بأخرى أفتح، ارفعي القيمة الأولى (.90) لا القيم كلها. */
	background:
		linear-gradient(to left, rgba(0, 31, 70, .90) 0%, rgba(0, 31, 70, .64) 32%, rgba(0, 31, 70, .20) 64%, rgba(0, 31, 70, .30) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .22) 0%, rgba(0, 31, 70, .04) 42%, rgba(0, 31, 70, .55) 100%);
}
body.home-a[dir="ltr"] .ha-hero-scrim,
html[dir="ltr"] body.home-a .ha-hero-scrim {
	background:
		linear-gradient(to right, rgba(0, 31, 70, .90) 0%, rgba(0, 31, 70, .64) 32%, rgba(0, 31, 70, .20) 64%, rgba(0, 31, 70, .30) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .22) 0%, rgba(0, 31, 70, .04) 42%, rgba(0, 31, 70, .55) 100%);
}
body.home-a .ha-hero-inner { position: relative; }
body.home-a .ha-hero-copy { max-width: 46rem; }
body.home-a .ha-title {
	margin: 24px 0 22px;
	font-size: clamp(2.375rem, 5.4vw, 4.75rem);
	line-height: 1.22; /* العربية تحتاج فراغًا للحركات (الشدّة) والنزول تحت السطر */
	font-weight: 700;
	letter-spacing: -.01em;
	text-wrap: balance;
}
body.home-a .ha-lead {
	margin: 0;
	max-width: 38rem;
	font-size: clamp(.9375rem, 1.2vw, 1.125rem);
	line-height: 1.78;
	color: rgba(255, 255, 255, .78);
}
body.home-a .ha-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}
body.home-a .ha-scroll {
	position: absolute;
	inset-inline-start: var(--gutter);
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .24em;
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
}
body.home-a .ha-scroll i {
	display: block;
	width: 1px;
	height: 26px;
	background: currentColor;
}
body.home-a .ha-scroll:hover { color: #fff; }

/* =========================================================
   بطاقة سعر السهم في الهيرو — لوح زجاجي عريض يذوب في صورة الهيرو
   ========================================================= */
body.home-a .ha-stock {
	position: absolute;
	inset-inline-end: var(--gutter);
	bottom: 86px;
	z-index: 3;
	display: grid;
	gap: 14px;
	width: 292px;
	padding: 18px 20px 14px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 20px;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 52%),
		rgba(8, 19, 34, .32);
	backdrop-filter: blur(22px) saturate(1.45);
	-webkit-backdrop-filter: blur(22px) saturate(1.45);
	box-shadow:
		0 30px 60px -34px rgba(0, 0, 0, .8),
		inset 0 1px 0 rgba(255, 255, 255, .16);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	animation: haFadeUp 700ms cubic-bezier(.2, .8, .2, 1) both;
	transition: transform var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
body.home-a .ha-stock[hidden] { display: none; }
/* خيط حالة ناعم على حافة البداية: يتلاشى من الطرفين فلا يبدو كإطار صندوق */
body.home-a .ha-stock::before {
	content: "";
	position: absolute;
	inset-block: 22px;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(to bottom, transparent, var(--ha-stock-c, #5fd39a), transparent);
	opacity: .9;
}
body.home-a .ha-stock:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, .28);
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 52%),
		rgba(8, 19, 34, .40);
	box-shadow: 0 36px 68px -32px rgba(0, 0, 0, .88), inset 0 1px 0 rgba(255, 255, 255, .22);
}
body.home-a .ha-stock.is-up   { --ha-stock-c: #5fd39a; --ha-stock-bg: rgba(95, 211, 154, .16); }
body.home-a .ha-stock.is-down { --ha-stock-c: #ff8579; --ha-stock-bg: rgba(255, 133, 121, .16); }

/* السطر العلوي: شعار تداول السعودية + مؤشر البث المباشر (بلا أي خلفيات صندوقية) */
body.home-a .ha-stock-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.home-a .ha-stock-brand { display: inline-flex; align-items: center; }
body.home-a .ha-stock-brand img {
	display: block;
	height: 30px;
	width: auto;
	opacity: .96;
	transition: opacity var(--ease);
}
body.home-a .ha-stock:hover .ha-stock-brand img { opacity: 1; }
body.home-a .ha-stock-market { font-size: .8125rem; font-weight: 700; color: rgba(255, 255, 255, .88); }

body.home-a .ha-stock-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .10em;
	color: rgba(255, 255, 255, .52);
}
body.home-a .ha-stock-live i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ha-stock-c, #5fd39a);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
	animation: haStockPulse 2.2s ease-in-out infinite;
}
@keyframes haStockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* بيانات غير مباشرة (يدوية أو قديمة): نطفئ النبض حتى لا يوحي بأنها لحظية */
body.home-a .ha-stock.is-static .ha-stock-live i { animation: none; opacity: .6; }

/* صف السعر: السعر في البداية والتغيّر في النهاية على خط أساس واحد */
body.home-a .ha-stock-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
body.home-a .ha-stock-price { display: inline-flex; align-items: baseline; gap: 6px; }
body.home-a .ha-stock-price b {
	font-family: var(--font-en);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
}
body.home-a .ha-stock-price em {
	font-style: normal;
	font-size: .75rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .52);
}

body.home-a .ha-stock-delta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--ha-stock-bg, rgba(95, 211, 154, .16));
	color: var(--ha-stock-c, #5fd39a);
	font-family: var(--font-en);
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transform: translateY(-2px);
}
body.home-a .ha-stock-caret { display: grid; place-items: center; width: 12px; height: 12px; }
body.home-a .ha-stock-caret svg { width: 12px; height: 12px; }
body.home-a .ha-stock.is-down .ha-stock-caret { transform: rotate(180deg); }
body.home-a .ha-stock-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; }

/* التذييل: الرمز ووقت آخر تحديث على خط شعري */
body.home-a .ha-stock-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .10);
	font-size: .625rem;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .42);
}
body.home-a .ha-stock-foot bdi,
body.home-a .ha-stock-foot time {
	font-family: var(--font-en);
	font-weight: 700;
	color: rgba(255, 255, 255, .66);
}

@media (prefers-reduced-motion: reduce) {
	body.home-a .ha-stock,
	body.home-a .ha-stock-live i { animation: none; }
	body.home-a .ha-stock:hover { transform: none; }
}

@keyframes haFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* كل ما بعد الهيرو يطفو فوقه أثناء التمرير */
body.home-a .site-main > section:not(.ha-hero),
body.home-a .footer {
	position: relative;
	z-index: 1;
}

/* ---------- حركة الخلفية ----------
   1) دخول: الصورة تظهر من تعتيم وتكبير خفيف وتستقر خلال 1.6 ثانية.
   2) انسياب دائم: تحرّك بطيء جدًا (26 ثانية ذهابًا وإيابًا) بتكبير 4% وإزاحة طفيفة —
      بالكاد يُلاحَظ، لكنه يجعل المشهد حيًا بدل صورة جامدة. */
body.home-a .ha-hero-media {
	transform-origin: 60% 50%;
	animation:
		haHeroSettle 1600ms cubic-bezier(.2, .8, .2, 1) both,
		haHeroDrift 26s ease-in-out 1600ms infinite alternate;
}
@keyframes haHeroSettle {
	from { opacity: 0; transform: scale(1.14); }
	to   { opacity: 1; transform: scale(1.04); }
}
@keyframes haHeroDrift {
	from { transform: scale(1.04) translate(0, 0); }
	to   { transform: scale(1.09) translate(-1.5%, 1%); }
}

/* مع فيديو: المشهد متحرّك أصلًا، فالانسياب الدائم يضيف حركة فوق حركة ويُتعب النظر.
   نُبقي حركة الدخول فقط. */
body.home-a .ha-hero-media.has-video {
	animation: haHeroSettle 1600ms cubic-bezier(.2, .8, .2, 1) both;
	/* نفس تثبيت الفيديو أدناه، فلا يقفز المشهد حين يبدأ التشغيل فوق الملصق */
	background-position: 42% center;
}
body.home-a .ha-hero-media video {
	/* المصنع في يسار الكادر: على الشاشات الضيّقة يقصّ التغطية الجانبين،
	   فنُزيح نقطة التثبيت لتبقى المنشأة داخل الإطار. */
	object-position: 42% center;
}

/* تعتيم أخفّ فوق الفيديو: مشهد الغروب دافئ، والتعتيم الكحلي الثقيل كان يُحيله
   إلى كتلة زرقاء ويضيّع الضوء الذي اخترنا المشهد لأجله. جهة النص تبقى داكنة
   بما يكفي للتباين، والجهة الأخرى تُترك للمشهد. */
body.home-a .ha-hero-media.has-video + .ha-hero-scrim {
	background:
		linear-gradient(to left, rgba(0, 31, 70, .88) 0%, rgba(0, 31, 70, .62) 34%, rgba(0, 31, 70, .22) 66%, rgba(0, 31, 70, .34) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .26) 0%, rgba(0, 31, 70, .06) 42%, rgba(0, 31, 70, .58) 100%);
}
html[dir="ltr"] body.home-a .ha-hero-media.has-video + .ha-hero-scrim {
	background:
		linear-gradient(to right, rgba(0, 31, 70, .88) 0%, rgba(0, 31, 70, .62) 34%, rgba(0, 31, 70, .22) 66%, rgba(0, 31, 70, .34) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .26) 0%, rgba(0, 31, 70, .06) 42%, rgba(0, 31, 70, .58) 100%);
}
/* على الجوال يمتد النص على العرض كله، فالتدرّج الجانبي لا يحميه —
   نستبدله بتدرّج رأسي يثقل من الأعلى والأسفل ويترك الوسط للمشهد. */
@media (max-width: 900px) {
	body.home-a .ha-hero-scrim,
	html[dir="ltr"] body.home-a .ha-hero-scrim {
		background: linear-gradient(180deg, rgba(0, 31, 70, .52) 0%, rgba(0, 31, 70, .44) 40%, rgba(0, 31, 70, .8) 100%);
	}
	/* برج التسخين في يسار الصورة: القصّ العمودي المتمركز كان يُخرجه من الكادر */
	body.home-a .ha-hero-media { background-position: 30% center; }
}

@media (max-width: 900px) {
	body.home-a .ha-hero-media.has-video { background-position: 34% center; }
	body.home-a .ha-hero-media video { object-position: 34% center; }
	/* على الجوال يمتد النص على العرض كله، فالتدرّج الجانبي لا يحميه —
	   نستبدله بتدرّج رأسي متساوٍ يثقل من الأعلى والأسفل. */
	body.home-a .ha-hero-media.has-video + .ha-hero-scrim,
	html[dir="ltr"] body.home-a .ha-hero-media.has-video + .ha-hero-scrim {
		background: linear-gradient(180deg, rgba(0, 31, 70, .52) 0%, rgba(0, 31, 70, .46) 40%, rgba(0, 31, 70, .8) 100%);
	}
}

/* 3) خروج مرتبط بالتمرير (متصفحات تدعم scroll-timeline؛ غيرها يتجاهله بلا ضرر):
      مع نزول القسم التالي فوق الهيرو، يبهت النص ويرتفع قليلًا وتُعتَّم الصورة —
      فيقرأ الانتقال كحركة مقصودة لا كتغطية جافة. */
@supports (animation-timeline: scroll()) {
	body.home-a .ha-hero-inner,
	body.home-a .ha-scroll {
		animation: haHeroExit linear both;
		animation-timeline: scroll(root);
		animation-range: 0 90vh;
	}
	body.home-a .ha-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--ha-deep); /* التعتيم عند التمرير بنفس الكحلي لا بالأسود */
		opacity: 0;
		pointer-events: none;
		animation: haDimExit linear both;
		animation-timeline: scroll(root);
		animation-range: 0 100vh;
	}
}
@keyframes haHeroExit { to { opacity: 0; transform: translateY(-48px); } }
@keyframes haDimExit  { to { opacity: .72; } }

body.home-a .ha-hero-copy > * {
	opacity: 0;
	transform: translateY(22px);
	animation: haHeroIn 640ms cubic-bezier(.2, .8, .2, 1) forwards;
}
body.home-a .ha-hero-copy > :nth-child(1) { animation-delay: 260ms; }
body.home-a .ha-hero-copy > :nth-child(2) { animation-delay: 360ms; }
body.home-a .ha-hero-copy > :nth-child(3) { animation-delay: 460ms; }
body.home-a .ha-hero-copy > :nth-child(4) { animation-delay: 560ms; }
@keyframes haHeroIn { to { opacity: 1; transform: none; } }

/* الهيرو له حركته الخاصة، فلا يُخفيه نظام reveal العام قبل الدخول */
body.home-a .ha-hero-copy.reveal { opacity: 1; transform: none; transition: none; }

body.home-a .ha-scroll i {
	transform-origin: top;
	animation: haScrollHint 2200ms ease-in-out 1600ms infinite;
}
@keyframes haScrollHint {
	0%, 100% { transform: scaleY(1); opacity: .55; }
	50%      { transform: scaleY(.35); opacity: 1; }
}

/* =========================================================
   1b) عن الشركة
   ========================================================= */
body.home-a .ha-about {
	position: relative;
	overflow: hidden;
	background: var(--ha-ink);
	padding: clamp(72px, 8vw, 128px) 0;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
/* ثلاثة أعمدة (بطلب الشركة): العنوان الصغير ثم النص في جهة البداية (يمينًا بالعربية)،
   وشعار الذكرى العشرين بارزًا في جهة النهاية (يسارًا) — عنصر مستقل لا علامة مائية.
   كان هنا نقش المسند خلفيةً (::before) وحُذف بطلب الشركة. */
body.home-a .ha-about-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 2.3fr) minmax(0, 1.6fr);
	gap: 48px;
	align-items: start;
}
/* دمج الشعار بالأرضية: توهّج دائري بلون التمييز خلفه (كإضاءة على الجدار)،
   وظلّ ناعم تحته يفصله عن الخلفية، مع حلقة رفيعة خافتة تؤطّره. */
body.home-a .ha-about-badge {
	position: relative;
	margin: 0;
	align-self: center;
	justify-self: center;
	width: 100%;
	max-width: 480px;
	padding: 12% 4%;
	isolation: isolate;
}
body.home-a .ha-about-badge::before {
	content: "";
	position: absolute;
	inset: -18% -14%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 165, 181, .22), rgba(0, 165, 181, .07) 55%, transparent 100%);
	filter: blur(6px);
	pointer-events: none;
}
/* (الحلقة البيضاوية الثابتة استُبدلت بحلقة النص المتحرّكة أدناه) */
body.home-a .ha-about-badge img {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
/* خلفية الشعار المتحرّكة — مستوحاة من Shopify Editions Spring '26:
   غبار أسمنت: canvas بجسيمات دقيقة بألوان الهوية وضباب ضوئي يتنفّس، يتلاشى نحو الأطراف.
   الترتيب: الغبار (0) ← الشعار (3). تُبنى الجسيمات في home-a.js حسب عرض الشعار. */
body.home-a .ha-anniv-dust {
	position: absolute;
	z-index: 0;
	inset: -30% -22%;
	width: 144%;
	height: 160%;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
	        mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
body.home-a .ha-about-main h2 {
	margin: 0 0 32px;
	max-width: 22ch;
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.3;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-about-copy {
	max-width: 42rem;
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--ha-cyan);
}
body.home-a .ha-about-copy p {
	margin: 0 0 22px;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .72);
}

/* =========================================================
   2) الأرقام — لوحة قياس صناعية
   الخلفية: توهّج تيلي ناعم + شبكة هندسية خافتة تتلاشى نحو الأطراف + شكل زاويّ من الهوية.
   كل رقم: فهرس صغير، الرقم بخط Barlow، التسمية، وشريط تيلي يمتد عند الظهور.
   ========================================================= */
body.home-a .ha-stats {
	position: relative;
	background: var(--ha-deep);
	padding: clamp(80px, 9vw, 128px) 0;
	overflow: hidden;
	isolation: isolate;
}
body.home-a .ha-stats-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
body.home-a .ha-stats-bg i { position: absolute; display: block; }
body.home-a .ha-stats-glow {
	inset-inline-end: -12%;
	top: -30%;
	width: 60vw;
	height: 60vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(closest-side, rgba(0, 165, 181, .22), rgba(0, 165, 181, .06) 45%, transparent 70%);
	animation: haGlowBreathe 9s ease-in-out infinite alternate;
}
@keyframes haGlowBreathe { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-3%, 4%); } }
body.home-a .ha-stats-grid-lines {
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 60% 50%, #000 20%, transparent 75%);
}
body.home-a .ha-stats-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
body.home-a .ha-stats-head h2 {
	margin: 16px 0 0;
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.3;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.home-a .ha-stat {
	position: relative;
	padding: 8px 28px 28px;
	border-inline-start: 1px solid rgba(255, 255, 255, .12);
	transition-delay: calc(var(--i, 0) * 90ms);
}
body.home-a .ha-stat:last-child { border-inline-end: 1px solid rgba(255, 255, 255, .12); }
body.home-a .ha-stat-index {
	display: block;
	margin-bottom: 26px;
	font-family: var(--font-en);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .28em;
	color: var(--ha-cyan-s);
	opacity: .7;
}
body.home-a .ha-stat strong {
	display: block;
	font-family: var(--font-en);
	font-size: clamp(2.5rem, 4.4vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 40px rgba(0, 165, 181, .25);
}
body.home-a .ha-stat-label {
	display: block;
	margin-top: 14px;
	min-height: 2.6em;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}
body.home-a .ha-stat-bar {
	position: absolute;
	inset-inline-start: 28px;
	inset-inline-end: 28px;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ha-cyan), rgba(0, 165, 181, 0));
	transform: scaleX(0);
	transform-origin: var(--ha-bar-origin, right);
	transition: transform 1100ms cubic-bezier(.2, .8, .2, 1) calc(320ms + var(--i, 0) * 110ms);
}
html[dir="ltr"] body.home-a .ha-stat-bar { --ha-bar-origin: left; background: linear-gradient(90deg, rgba(0, 165, 181, 0), var(--ha-cyan)); }
body.home-a .ha-stat.visible .ha-stat-bar { transform: scaleX(1); }
html[dir="rtl"] body.home-a .ha-stat strong { text-align: right; } /* الرقم dir=ltr داخل صفحة عربية: يحاذي طرف البداية */

/* =========================================================
   3) المنتجات — سلايدر بلا مكتبات
   البطاقة: لوحة فاتحة لصورة الكيس (تناسب صور الاستوديو البيضاء) + رمز شبحي كبير خلفه،
   وجسم داكن. عند التحويم: الكيس يطفو والرمز الشبحي ينزاح، ويظهر رابط المنتج.
   ========================================================= */
body.home-a .ha-products {
	position: relative;
	background: var(--ha-ink);
	padding: clamp(80px, 9vw, 128px) 0;
	overflow: hidden;
	isolation: isolate;
}
body.home-a .ha-products-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* تدرّج أفقي من الكحلي إلى لون القسم الداكن، ثم تلاشٍ رأسي يذيبه في القاع.
   كان هنا ملف صورة (products-banner-bg.jpg) يحمل التدرّج نفسه مع «وردات» زخرفية
   على يمينه؛ حُذفت الوردات بطلب الشركة (2026-09-28). والتدرّج وحده لا يحتاج صورة:
   نُسخت درجاته من الملف نفسه فبقي المظهر كما كان، وسقط طلب شبكة و55 كيلوبايت.
   الاتجاه ثابت (to right) لأن الصورة كانت ثابتة ولا تنعكس مع اتجاه الصفحة. */
body.home-a .ha-products-bg::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	aspect-ratio: 2172 / 724;
	max-height: 100%;
	background:
		linear-gradient(180deg, rgba(8, 17, 31, 0) 0%, rgba(8, 17, 31, .2) 45%, var(--ha-ink) 100%),
		linear-gradient(to right,
			#243760 0%,
			#21345c 23%,
			#182947 37%,
			#0e192d 51%,
			#0a1121 64%,
			#070d19 78%,
			#070c16 100%);
}
@media (min-width: 1500px) {
	body.home-a .ha-products-bg::before { inset-inline: 0; }
}
body.home-a .ha-products-bg i {
	position: absolute;
	inset-inline-start: -20%;
	bottom: -40%;
	width: 70vw;
	height: 70vw;
	max-width: 1000px;
	max-height: 1000px;
	background: radial-gradient(closest-side, rgba(0, 45, 98, .55), transparent 70%);
}
body.home-a .ha-products-head { align-items: flex-end; margin-bottom: 44px; }
body.home-a .ha-products-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 22px;
	flex: none;
	width: 25rem;
}
html[dir="rtl"] body.home-a .ha-products-side { align-items: flex-start; }
body.home-a .ha-products-side .ha-head-lead { width: auto; max-width: 25rem; }

/* أزرار التنقل + العدّاد */
body.home-a .ha-slider-nav { display: flex; align-items: center; gap: 14px; }
body.home-a .ha-slider-btn {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	cursor: pointer;
	transition: background var(--ease), border-color var(--ease), transform var(--ease), opacity var(--ease);
}
body.home-a .ha-slider-btn svg { width: 20px; height: 20px; }
html[dir="rtl"] body.home-a .ha-slider-btn svg { transform: scaleX(-1); }
body.home-a .ha-slider-btn:hover:not(:disabled) { background: var(--ha-cyan); border-color: var(--ha-cyan); color: var(--ha-ink); transform: translateY(-2px); }
body.home-a .ha-slider-btn:disabled { opacity: .3; cursor: default; }

/* المسار */
body.home-a .ha-slider { position: relative; }
body.home-a .ha-slider-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	padding-block: 12px 28px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	outline: none;
}
body.home-a .ha-slider-track::-webkit-scrollbar { display: none; }
body.home-a .ha-slider-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
body.home-a .ha-slider-track.is-dragging .ha-pcard { pointer-events: none; }
body.home-a .ha-slider-track:focus-visible { box-shadow: inset 0 0 0 2px var(--ha-cyan); }
/* حافة نهاية تسمح لآخر بطاقة بالمحاذاة إلى البداية */
body.home-a .ha-slider-track::after { content: ""; flex: none; width: 1px; }

body.home-a .ha-slider-foot {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 6px;
}
body.home-a .ha-slider-progress {
	flex: 1;
	height: 2px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
}
body.home-a .ha-slider-progress i {
	display: block;
	height: 100%;
	background: var(--ha-cyan);
	transform: scaleX(.06);
	transform-origin: var(--ha-bar-origin, right);
	transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
html[dir="ltr"] body.home-a .ha-slider-progress i { --ha-bar-origin: left; }

/* البطاقة ثلاثية الأبعاد */
body.home-a .ha-slider-track { perspective: 1400px; padding-block: 28px 48px; }
body.home-a .ha-pcard {
	flex: none;
	width: clamp(240px, 21vw, 280px);
	scroll-snap-align: start;
	transition: opacity var(--t-reveal, 320ms) cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 80ms),
	            transform var(--t-reveal, 320ms) cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 80ms);
}
/* الجسم الذي يميل: المتغيّران --rx/--ry يكتبهما home-a.js من موضع المؤشر */
body.home-a .ha-pcard-3d {
	--rx: 0deg; --ry: 0deg; --lift: 0px;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* بلا جسم داكن: البطاقة شفافة على خلفية القسم، والكيس واللوحة فقط */
	transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform 420ms cubic-bezier(.2, .8, .2, 1), box-shadow var(--slow);
	will-change: transform;
}
body.home-a .ha-pcard.is-tilting .ha-pcard-3d { transition: transform 80ms linear, box-shadow var(--slow); }
body.home-a .ha-pcard:hover .ha-pcard-3d { --lift: -10px; }

/* وسم الرمز في الزاوية (كبطاقة السعر في المرجع) */
body.home-a .ha-pcard-corner {
	position: absolute;
	top: -13px;
	inset-inline-end: 12px;
	z-index: 3;
	padding: 6px 11px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: var(--ha-pcolor, var(--ha-cyan));
	color: var(--ha-ptext, var(--ha-ink));
	font-family: var(--font-en);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
	transform: translateZ(70px); /* فوق الكيس (50px) كي لا يختفي خلفه عند الميل */
}
body.home-a .ha-pcard-red .ha-pcard-corner, body.home-a .ha-pcard-green .ha-pcard-corner { color: var(--ha-ptext, #fff); }

/* الكيس: خلفية شفافة، يطفو فوق لوحة المعلومات (يتداخل معها) بحركة عوم دائمة وظل حقيقي */
body.home-a .ha-pcard-plate {
	position: relative;
	z-index: 2;
	display: block;
	width: 44%;
	aspect-ratio: 7 / 10;
	margin: 0 auto -26px;      /* الهامش السالب = مقدار التداخل مع لوحة المعلومات */
	transform: translateZ(60px); /* بلا حركة عوم دائمة؛ الحركة فقط مع الميل والتحويم */
}
body.home-a .ha-pcard-plate img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
	filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .55));
	transition: transform var(--slow), filter var(--slow);
}
body.home-a .ha-pcard:hover .ha-pcard-plate img { transform: scale(1.05); filter: drop-shadow(0 36px 32px rgba(0, 0, 0, .6)); }
/* بلا نسخة شفافة: الصورة الأصلية (خلفية بيضاء) داخل لوحة فاتحة مستديرة */
body.home-a .ha-pcard:not(.has-cutout) .ha-pcard-plate {
	width: 72%;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 100%, #ffffff 0%, #eef1f4 60%, #dde3e9 100%);
	box-shadow: 0 26px 40px rgba(0, 0, 0, .5);
}
body.home-a .ha-pcard:not(.has-cutout) .ha-pcard-plate img { mix-blend-mode: multiply; filter: none; transform: scale(1.5); object-position: center; }
body.home-a .ha-pcard:not(.has-cutout):hover .ha-pcard-plate img { transform: scale(1.58); filter: none; }
body.home-a .ha-pcard .ha-badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	background: var(--ha-ink);
	color: #fff;
}

/* اللوحة السفلية: متدرجة بلون المنتج، تجلس داخل البطاقة بهامش */
body.home-a .ha-pcard-body {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 14px;
	margin: 0;
	padding: 44px 18px 24px;  /* الأعلى يستوعب تداخل لوحة الصورة */
	border-radius: 16px;
	background: var(--ha-pgrad);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
	transform: translateZ(24px);
	transform-style: preserve-3d; /* ليبقى وسم الزاوية أمام الكيس */
	flex: 1;
	color: #fff;
}
/* لوحة احتياطية من code_color حين يتعذّر استخراج لون الكيس؛ المتغيّرات المضمّنة في style تتقدّم عليها */
body.home-a .ha-pcard-navy  { --ha-pcolor: #1e4a7c; --ha-pgrad: linear-gradient(135deg, #476b94 0%, #1e4a7c 48%, #0e2138 100%); }
body.home-a .ha-pcard-teal  { --ha-pcolor: var(--ha-cyan); --ha-pgrad: linear-gradient(135deg, #16b0c4 0%, #0e5a6a 62%, #1b1e25 100%); }
body.home-a .ha-pcard-red   { --ha-pcolor: var(--red);   --ha-pgrad: linear-gradient(135deg, #d4574a 0%, #7a2a24 62%, #1b1e25 100%); }
body.home-a .ha-pcard-green { --ha-pcolor: var(--green); --ha-pgrad: linear-gradient(135deg, #47a85a 0%, #22592f 62%, #1b1e25 100%); }
body.home-a .ha-pcard-sand  { --ha-pcolor: var(--ha-sand); --ha-pgrad: linear-gradient(135deg, #c9a86a 0%, #7a6340 62%, #1b1e25 100%); }
body.home-a .ha-pcard-main { min-width: 0; }
body.home-a .ha-pcard h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; font-weight: 700; }
body.home-a .ha-pcard h3 a { color: #fff; text-decoration: none; }
body.home-a .ha-pcard h3 a:hover { color: rgba(255, 255, 255, .8); }
body.home-a .ha-pcard p {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
	/* الوصف كاملًا: البطاقات في الشريط متساوية الارتفاع، فلا حاجة لقصّ النص عند ثلاثة أسطر.
	   الحدّ الأعلى (ثمانية أسطر) احتياطٌ لمدخلٍ طويل جدًا فقط. */
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.home-a .ha-pcard-side {
	margin: 0;
	padding-inline-start: 16px;
	border-inline-start: 1px solid rgba(255, 255, 255, .28);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
body.home-a .ha-pcard-side dt { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .9); margin-bottom: 2px; }
body.home-a .ha-pcard-side dd { margin: 0; font-size: .75rem; line-height: 1.5; color: rgba(255, 255, 255, .72); }
body.home-a .ha-pcard-side dd[dir="ltr"] { font-family: var(--font-en); font-size: .6875rem; letter-spacing: .04em; white-space: nowrap; }
/* كل النصوص محاذاة لجهة بداية الصفحة حتى الكلمات الإنجليزية (dir=ltr يبقى لترتيب الأحرف فقط) */
html[dir="rtl"] body.home-a .ha-pcard-side dd[dir="ltr"] { text-align: right; }
html[dir="ltr"] body.home-a .ha-pcard-side dd[dir="ltr"] { text-align: left; }
body.home-a .ha-pcard-body { text-align: start; }
body.home-a .ha-products-footer { margin-top: 36px; }
body.home-a .ha-hint {
	padding: 20px 24px;
	border: 1px dashed rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .7);
}

/* =========================================================
   3b) التميّز التشغيلي — فيديو خلفية للقسم كاملًا
   الفيديو يغطي القسم، مع تعتيم متدرج من جهة النص يبقي النص مقروءًا ويترك المصنع ظاهرًا في الجهة الأخرى.
   لمسات فاتحة: العنصر المفتوح في الأكورديون على بطاقة ورقية، وشريط التعليق في الزاوية المقابلة.
   ========================================================= */
body.home-a { --ha-paper: #f3f1ec; }
body.home-a .ha-mfg {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88vh, 860px);
	padding: clamp(80px, 9vw, 128px) 0;
	background: var(--ha-deep);
	overflow: hidden;
	isolation: isolate;
}
body.home-a .ha-mfg-bg { position: absolute; inset: 0; z-index: -1; }
body.home-a .ha-mfg-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* الفيديو: المصنع في الجهة المقابلة للنص، فينعكس القصّ مع الاتجاه.
   مقصورة على video لأن الصورة الثابتة لها قصّها الخاص أدناه — وبدون هذا التقييد
   كانت قاعدة LTR (أعلى تخصيصًا) تغلب قصّ الصورة فتُظهر السماء بدل المصنع. */
body.home-a video.ha-mfg-video { object-position: 30% center; filter: saturate(.85); }
html[dir="ltr"] body.home-a video.ha-mfg-video { object-position: 70% center; }
/* الخلفية الثابتة: المشهد ليلي كحلي أصلًا، فخفض الإشباع يُطفئ توهّج الأضواء.
   والقصّ الأفقي لصورة 4:3 يلزمه ميل لأسفل ليبقى المصنع في الإطار لا السماء.
   القصّ الأفقي متمركز فيصلح للاتجاهين. */
body.home-a img.ha-mfg-video {
	filter: none;
	object-position: center 62%;
}
body.home-a .ha-mfg-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to left, rgba(0, 31, 70, .92) 0%, rgba(0, 31, 70, .74) 40%, rgba(0, 31, 70, .24) 70%, rgba(0, 31, 70, .34) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .3), transparent 32%, transparent 70%, rgba(0, 31, 70, .46));
}
html[dir="ltr"] body.home-a .ha-mfg-scrim {
	background:
		linear-gradient(to right, rgba(0, 31, 70, .92) 0%, rgba(0, 31, 70, .74) 40%, rgba(0, 31, 70, .24) 70%, rgba(0, 31, 70, .34) 100%),
		linear-gradient(180deg, rgba(0, 31, 70, .3), transparent 32%, transparent 70%, rgba(0, 31, 70, .46));
}
body.home-a .ha-mfg-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
	gap: 48px;
	align-items: end;
	width: min(var(--container), calc(100% - var(--gutter) * 2));
}
body.home-a .ha-mfg-copy h2 {
	margin: 16px 0 18px;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.26;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-mfg-lead {
	margin: 0 0 32px;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, .74);
}
/* شريط التعليق الفاتح في الزاوية المقابلة */
body.home-a .ha-mfg-caption {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 22px;
	padding: 14px 20px;
	border-radius: 10px;
	background: var(--ha-paper);
	color: #4b5868;
	font-size: .875rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
body.home-a .ha-mfg-caption strong {
	font-family: var(--font-en);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--primary);
	letter-spacing: .04em;
}
/* الأكورديون: زجاجي داكن، والعنصر المفتوح على بطاقة فاتحة */
body.home-a .ha-accordion { display: flex; flex-direction: column; gap: 6px; border-top: 0; } /* بلا الخط العلوي من main.css */
body.home-a .ha-accordion .accordion-trigger {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px 18px;
	background: rgba(0, 31, 70, .45);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	color: #fff;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}
body.home-a .ha-accordion .accordion-trigger:hover { background: rgba(0, 31, 70, .65); }
body.home-a .ha-accordion .accordion-trigger[aria-expanded="true"] {
	background: var(--ha-paper);
	border-color: var(--ha-paper);
	color: var(--primary);
	border-radius: 10px 10px 0 0;
}
body.home-a .ha-accordion .accordion-trigger em {
	flex: none;
	font-style: normal;
	font-family: var(--font-en);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ha-cyan);
}
body.home-a .ha-accordion .accordion-trigger[aria-expanded="true"] em { color: var(--accent-dark); }
body.home-a .ha-accordion .accordion-trigger span { flex: 1; }
body.home-a .ha-accordion .accordion-trigger i {
	flex: none;
	font-style: normal;
	font-family: var(--font-en);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ha-cyan-s);
	transition: transform var(--ease);
}
body.home-a .ha-accordion .accordion-trigger[aria-expanded="true"] i { transform: rotate(45deg); color: var(--accent-dark); }
body.home-a .ha-accordion .accordion-panel {
	margin-top: -6px;
	padding: 2px 18px 18px calc(18px + 16px + 1.6em);
	background: var(--ha-paper);
	border-radius: 0 0 10px 10px;
}
html[dir="rtl"] body.home-a .ha-accordion .accordion-panel { padding: 2px calc(18px + 16px + 1.6em) 18px 18px; }
body.home-a .ha-accordion .accordion-panel p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.75;
	color: #4b5868;
}

/* رأس القسم: العنوان في جهة البداية وشعار «صناعة سعودية» في الجهة المقابلة، على خلفية القسم مباشرة (بلا بطاقة ولا خط) */
body.home-a .ha-sm {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 8px 0 0;
	margin-bottom: clamp(40px, 5vw, 64px);
}
body.home-a .ha-sm-copy { max-width: 38rem; }
body.home-a .ha-sm-copy h2 {
	margin: 16px 0 12px;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	text-wrap: balance;
}
body.home-a .ha-sm-copy p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .7);
}
body.home-a .ha-sm-logo { flex: none; }
body.home-a .ha-sm-logo img {
	display: block;
	width: auto;
	height: clamp(64px, 7vw, 96px);
}
body.home-a .ha-hint-badge { margin: 0 auto 40px; max-width: 46rem; text-align: center; font-size: .875rem; }

/* =========================================================
   4) الاستدامة
   ========================================================= */
body.home-a .ha-sus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ha-ink);
}
body.home-a .ha-sus-media {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	overflow: clip; /* clip لا ينشئ حاوية تمرير، فتبقى animation-timeline: view() مرتبطة بتمرير الصفحة */
}
/* أوفرلاي تدريجي داكن بلون خلفية النص المقابل: أغمق عند الحافة المجاورة للنص ويخفّ نحو الجهة الأخرى،
   مع تعتيم خفيف عام وتلاشٍ في القاع ليندمج القسم بما بعده */
body.home-a .ha-sus-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(to right, var(--ha-ink) 0%, rgba(8, 17, 31, .72) 22%, rgba(8, 17, 31, .18) 55%, rgba(8, 17, 31, 0) 100%),
		linear-gradient(180deg, rgba(8, 17, 31, .35) 0%, rgba(8, 17, 31, 0) 30%, rgba(8, 17, 31, 0) 70%, rgba(8, 17, 31, .55) 100%);
}
html[dir="ltr"] body.home-a .ha-sus-media::after {
	background:
		linear-gradient(to left, var(--ha-ink) 0%, rgba(8, 17, 31, .72) 22%, rgba(8, 17, 31, .18) 55%, rgba(8, 17, 31, 0) 100%),
		linear-gradient(180deg, rgba(8, 17, 31, .35) 0%, rgba(8, 17, 31, 0) 30%, rgba(8, 17, 31, 0) 70%, rgba(8, 17, 31, .55) 100%);
}
/* الصورة أطول من الإطار بـ 8% فقط لتتحرك داخله مع التمرير (parallax).
   كانت 24% مع تكبير 1.02، فكان الظاهر وسط الصورة مقرَّبًا بلا سماء ولا أرضية —
   والفائض هو ما يُخفى. 8% تكفي للحركة وتُبقي المصنع كاملًا مقروءًا.
   وموضع 35% يرفع الإطار قليلًا فتظهر قمة البرج والسماء بدل الأرضية الرمادية. */
body.home-a .ha-sus-img {
	position: absolute;
	inset: -4% 0;
	width: 100%;
	height: 108%;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	transform: translate3d(0, calc(var(--ha-p, 0) * 4%), 0);
	will-change: transform;
}
/* المتصفحات الحديثة: حركة مرتبطة بالتمرير بلا JavaScript؛ الخاصية --ha-p من home.js تُهمَل هنا */
@supports (animation-timeline: view()) {
	body.home-a .ha-sus-img {
		transform: none;
		animation: ha-sus-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes ha-sus-parallax {
		from { transform: translate3d(0, 4%, 0); }
		to   { transform: translate3d(0, -4%, 0); }
	}
}
body.home-a .ha-sus-copy {
	display: flex;
	align-items: center;
	padding: clamp(64px, 7vw, 112px) var(--gutter);
}
body.home-a .ha-sus-inner { max-width: 34rem; }
body.home-a .ha-sus h2 {
	margin: 22px 0 20px;
	font-size: clamp(1.625rem, 2.8vw, 2.75rem);
	line-height: 1.28;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-sus p {
	margin: 0 0 28px;
	font-size: 1.0625rem;
	line-height: 1.78;
	color: rgba(255, 255, 255, .68);
}
body.home-a .ha-sus-points {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}
body.home-a .ha-sus-points li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 1rem;
}
body.home-a .ha-sus-points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
body.home-a .ha-sus-points em {
	flex: none;
	font-style: normal;
	font-family: var(--font-en);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--ha-sand);
}

/* =========================================================
   4b) المستثمرون — شريط مضغوط
   ========================================================= */
body.home-a .ha-inv {
	background: var(--ha-deep);
	padding: clamp(56px, 6vw, 80px) 0;
	border-top: 1px solid rgba(255, 255, 255, .06);
}
body.home-a .ha-inv-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}
body.home-a .ha-inv-copy h2 {
	margin: 14px 0 0;
	font-size: clamp(1.5rem, 2.4vw, 2.125rem);
	line-height: 1.3;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-ticker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px 22px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
}
body.home-a .ha-ticker[hidden] { display: none; }
body.home-a .ha-ticker .ticker__symbol { font-size: .8125rem; letter-spacing: .2em; color: rgba(255, 255, 255, .55); }
body.home-a .ha-ticker .ticker__price  { font-size: 1.75rem; font-weight: 700; color: #fff; }
body.home-a .ha-ticker .ticker__change { font-size: .9375rem; font-weight: 600; color: var(--ha-cyan); }
body.home-a .ha-ticker .ticker__change.is-down { color: #ff8a80; }
body.home-a .ha-inv-links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
body.home-a .ha-inv-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--ease), padding var(--ease);
}
body.home-a .ha-inv-links a i {
	font-style: normal;
	color: var(--ha-cyan-s);
	transition: transform var(--ease);
}
body.home-a .ha-inv-links a:hover { color: var(--ha-cyan-s); padding-inline-start: 8px; }
body.home-a .ha-inv-links a:hover i { transform: translate(2px, -2px); }

/* =========================================================
   4c) الأخبار
   ========================================================= */
body.home-a .ha-news {
	background: var(--ha-ink);
	padding: clamp(72px, 8vw, 120px) 0;
}
body.home-a .ha-news .ha-head { align-items: flex-end; }
body.home-a .ha-head-link { flex: none; padding-bottom: 6px; }
/* تخطيط تحريري: بطاقة بارزة للخبر الأحدث + قائمة صفوف لبقية الأخبار */
body.home-a .ha-news-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
body.home-a .ha-news-feature {
	display: grid;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	border: 1px solid rgba(255, 255, 255, .09);
}
body.home-a .ha-news-feature.has-media { grid-template-rows: auto 1fr; }
body.home-a .ha-news-feature-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
body.home-a .ha-news-feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--slow);
}
body.home-a .ha-news-feature:hover .ha-news-feature-media img { transform: scale(1.04); }
body.home-a .ha-news-feature-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 30px 30px;
}
/* بلا صورة: بطاقة نصية أوسع تنفّسًا، بخط زخرفي كبير للتاريخ في الخلفية */
body.home-a .ha-news-feature:not(.has-media) .ha-news-feature-body { padding: 40px 34px; min-height: 300px; justify-content: center; }
body.home-a .ha-news-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .55);
}
body.home-a .ha-news-meta span { color: var(--ha-cyan-s); font-weight: 600; letter-spacing: .04em; }
body.home-a .ha-news-meta span::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-inline-start: 12px;
	vertical-align: middle;
	background: currentColor;
	opacity: .6;
}
body.home-a .ha-news-meta time { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
body.home-a .ha-news-feature h3 {
	margin: 0;
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.4;
	font-weight: 700;
	text-wrap: balance;
}
body.home-a .ha-news-feature h3 a { color: #fff; text-decoration: none; }
body.home-a .ha-news-feature h3 a:hover { color: var(--ha-cyan-s); }
body.home-a .ha-news-feature p { margin: 0; font-size: .9375rem; line-height: 1.75; color: rgba(255, 255, 255, .6); }
body.home-a .ha-news-feature .ha-link { margin-top: auto; padding-top: 6px; font-size: .9375rem; }

/* القائمة: صفوف بفواصل رفيعة — التاريخ · التصنيف/العنوان · (صورة مصغّرة إن وُجدت) · سهم */
body.home-a .ha-news-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .1); }
body.home-a .ha-news-row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 18px;
	padding: 22px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #fff;
	text-decoration: none;
	transition: background var(--ease), padding var(--ease);
}
body.home-a .ha-news-row:hover { background: rgba(255, 255, 255, .035); padding-inline: 12px 0; }
body.home-a .ha-news-row-date { display: flex; flex-direction: column; align-items: center; line-height: 1; font-family: var(--font-en); }
body.home-a .ha-news-row-date strong { font-size: 1.625rem; font-weight: 700; color: #fff; }
body.home-a .ha-news-row-date span { margin-top: 5px; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
body.home-a .ha-news-row-body { min-width: 0; }
body.home-a .ha-news-row-cat { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--ha-cyan-s); }
body.home-a .ha-news-row h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--ease);
}
body.home-a .ha-news-row:hover h3 { color: var(--ha-cyan-s); }
body.home-a .ha-news-row-thumb { display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
body.home-a .ha-news-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.home-a .ha-news-row-arrow {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	position: relative;
	transition: border-color var(--ease), background var(--ease);
}
body.home-a .ha-news-row-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	transform: translate(-30%, -50%) rotate(-45deg); /* يشير إلى اليسار (اتجاه القراءة في العربية) */
}
html[dir="ltr"] body.home-a .ha-news-row-arrow::before { border-left: 0; border-right: 1.5px solid currentColor; transform: translate(-70%, -50%) rotate(45deg); }
body.home-a .ha-news-row:hover .ha-news-row-arrow { border-color: var(--ha-cyan); background: rgba(0, 165, 181, .12); }

/* =========================================================
   4d) الشركاء والاعتمادات — خلفية ورقية كالختام، لوحة بيضاء بشبكة خلايا
   ========================================================= */
body.home-a .ha-partners {
	background: #f3f1ec;
	color: var(--ha-ink);
	padding: clamp(72px, 8vw, 120px) 0 clamp(56px, 6vw, 88px);
	border-bottom: 1px solid rgba(8, 17, 31, .08); /* فاصل رفيع قبل الختام بالخلفية نفسها */
}
body.home-a .ha-partners .ha-head { align-items: flex-end; margin-bottom: 40px; }
body.home-a .ha-partners .ha-head h2 { color: var(--ha-ink); }
body.home-a .ha-partners .ha-head-lead { color: rgba(8, 17, 31, .62); }
body.home-a .ha-eyebrow-dark { color: var(--accent-dark, #007f8c); }
body.home-a .ha-hint-dark { border-color: rgba(8, 17, 31, .25); color: rgba(8, 17, 31, .6); margin-top: 14px; font-size: .875rem; }

body.home-a .ha-partners-panel {
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(8, 17, 31, .1);
	box-shadow: 0 18px 40px -32px rgba(8, 17, 31, .3); /* ظل أهدأ: اللوحة سطح واحد لا كتلة عائمة */
	overflow: hidden;
}
/* شريط التصفية */
body.home-a .ha-partners-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(8, 17, 31, .08);
}
body.home-a .ha-partners-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: rgba(8, 17, 31, .62);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--ease), color var(--ease), border-color var(--ease);
}
body.home-a .ha-partners-tab em {
	font-style: normal;
	font-family: var(--font-en);
	font-size: .6875rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(8, 17, 31, .06);
	color: rgba(8, 17, 31, .6);
}
body.home-a .ha-partners-tab:hover { color: var(--ha-ink); background: rgba(8, 17, 31, .04); }
body.home-a .ha-partners-tab.is-active { color: var(--ha-ink); border-color: rgba(8, 17, 31, .14); background: #f3f1ec; }
body.home-a .ha-partners-tab.is-active em { background: var(--ha-ink); color: #fff; }

/* جدار الاعتمادات: سطح واحد مقسوم بخطوط شعرية — لا بطاقة مستقلة لكل شعار.
   الخطوط من حدود الخلايا نفسها، والهوامش السالبة تسحب خطوط الحافة تحت إطار اللوحة. */
body.home-a .ha-partners-wall {
	list-style: none;
	margin: 0;
	margin-inline-end: -1px;   /* تُسحب خطوط الحافة تحت إطار اللوحة فلا تتضاعف */
	margin-block-end: -1px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: #fff;
}
body.home-a .ha-partner {
	min-width: 0;
	border-inline-end: 1px solid rgba(8, 17, 31, .085);
	border-block-end: 1px solid rgba(8, 17, 31, .085);
}
body.home-a .ha-partner.is-hidden { display: none; }

body.home-a .ha-partner-inner {
	display: grid;
	grid-template-rows: 88px auto;
	align-content: start;
	justify-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 100%;
	padding: 26px 18px 24px;
	color: var(--ha-ink);
	text-decoration: none;
	transition: background var(--ease);
}
body.home-a .ha-partners-wall.has-notes .ha-partner-inner { grid-template-rows: 88px auto auto; }
body.home-a .ha-partner-inner:hover,
body.home-a .ha-partner-inner:focus-visible { background: #fbfaf7; }
body.home-a a.ha-partner-inner:focus-visible { outline: 2px solid var(--accent, #00a5b5); outline-offset: -3px; }

/* منطقة الشعار بارتفاع ثابت، والشعار داخلها بأبعاد محسوبة (توحيد بالمساحة لا بالارتفاع) */
body.home-a .ha-partner-logo { display: grid; place-items: center; width: 100%; }
body.home-a .ha-partner-logo img {
	/* ‎--lh يحسبه القالب لكل شعار (ncc_logo_box)؛ العرض تلقائي فتبقى النسبة سليمة */
	height: var(--lh, 62px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* الشعارات بألوانها الرسمية: علامات الاعتماد جزء من مصداقيتها، وتوحيد الحجم البصري
	   (ncc_logo_box) هو ما يمنع التنافر لا تجريدها من اللون. */
	transition: transform var(--slow);
}
body.home-a .ha-partner-inner:hover .ha-partner-logo img,
body.home-a .ha-partner-inner:focus-visible .ha-partner-logo img {
	transform: scale(1.04);
}

body.home-a .ha-partner-name {
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--ha-ink);
	text-wrap: balance;
	min-height: 3em;   /* سطران محجوزان: اسم من سطر واحد وآخر من سطرين يبقى سطر الوصف تحتهما على خطّ واحد */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.home-a .ha-partner-note {
	font-size: .75rem;
	line-height: 1.5;
	text-align: center;
	color: rgba(8, 17, 31, .5);
	min-height: 1.5em;   /* يُحجز المكان حتى لو خلا السطر فتستقيم الصفوف */
}

/* دخول متتابع مع reveal */
body.home-a .ha-partners-panel.reveal .ha-partner { opacity: 0; transform: translateY(10px); transition: opacity 500ms cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 60ms), transform 500ms cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 60ms); }
body.home-a .ha-partners-panel.reveal.visible .ha-partner { opacity: 1; transform: none; }

body.home-a .ha-partners-foot {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	border-top: 1px solid rgba(8, 17, 31, .1);
	font-size: .75rem;
	color: rgba(8, 17, 31, .48);
	font-weight: 600;
	background: #fbfaf7;
}
/* تباعد الحروف للاتيني فقط — في العربية يفكّك اتصال الحروف */
html[dir="ltr"] body.home-a .ha-partners-foot { font-size: .6875rem; letter-spacing: .16em; }

/* =========================================================
   5) الختام
   ========================================================= */
/* شريط ختامي خفيف: نفس الخلفية الورقية يفصله خط شعري، بلا كتلة لونية ولا وزن بصري زائد */
body.home-a .ha-cta {
	background: #f3f1ec;
	color: var(--ha-ink);
	padding: clamp(38px, 4vw, 58px) 0;
	border-top: 1px solid rgba(8, 17, 31, .1);
}
body.home-a .ha-cta-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
body.home-a .ha-cta h2 {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	line-height: 1.4;
	font-weight: 700;
	color: var(--ha-ink);
	text-wrap: balance;
}
body.home-a .ha-cta p {
	margin: 6px 0 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: rgba(8, 17, 31, .58);
}
body.home-a .ha-cta-btn {
	flex: none;
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 12px 26px;
	border: 1px solid var(--primary);
	border-radius: 8px;
	background: transparent;
	color: var(--primary);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background var(--ease), color var(--ease), transform var(--ease);
}
body.home-a .ha-cta-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* =========================================================
   المقاسات
   ========================================================= */
@media (max-width: 1024px) {
	body.home-a .ha-partners-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.home-a .ha-stats-inner { grid-template-columns: 1fr; gap: 28px; }
	body.home-a .ha-stats-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	body.home-a .ha-stat:nth-child(2) { border-inline-end: 1px solid rgba(255,255,255,.12); }
	body.home-a .ha-products-head { flex-direction: column; align-items: stretch; }
	body.home-a .ha-products-side { width: auto; align-items: flex-start; }
	body.home-a .ha-sm { flex-direction: column; align-items: flex-start; gap: 24px; padding: 0; }
	body.home-a .ha-sm-logo img { height: 64px; }
	body.home-a .ha-pcard { width: min(72vw, 280px); }
	body.home-a .ha-pcard-body { grid-template-columns: 1fr; gap: 14px; }
	body.home-a .ha-pcard-side { padding-inline-start: 0; border-inline-start: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .28); flex-direction: row; gap: 20px; }
	body.home-a .ha-head       { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 32px; }
	body.home-a .ha-head-lead  { width: auto; }
	body.home-a .ha-sus        { grid-template-columns: 1fr; }
	body.home-a .ha-sus-media  { min-height: 340px; }
	body.home-a .ha-cta-inner  { flex-direction: column; align-items: stretch; gap: 24px; }
	body.home-a .ha-cta-btn    { margin: 0; justify-content: center; }
	body.home-a .ha-about-grid { grid-template-columns: 1fr; gap: 20px; }
	body.home-a .ha-about-badge { justify-self: start; max-width: 380px; margin-top: 20px; }
	body.home-a .ha-mfg-inner  { grid-template-columns: 1fr; gap: 28px; }
	body.home-a .ha-mfg-caption { justify-self: start; }
	body.home-a .ha-mfg-video  { object-position: center; }
	body.home-a .ha-slider-foot { flex-direction: column; align-items: stretch; gap: 16px; }
	body.home-a .ha-slider-nav { justify-content: center; }
	body.home-a .ha-inv-grid   { grid-template-columns: 1fr; gap: 28px; }
	body.home-a .ha-news-layout { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
	body.home-a .ha-partners-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.home-a .ha-partner-inner { grid-template-rows: 72px auto; padding: 20px 12px 18px; }
	body.home-a .ha-partners-wall.has-notes .ha-partner-inner { grid-template-rows: 72px auto auto; }
	body.home-a .ha-partner-logo img { height: min(var(--lh, 62px), 68px); }
	body.home-a .ha-partner-name { font-size: .8125rem; }
	body.home-a .ha-partner-note { font-size: .6875rem; }
	body.home-a .ha-partners-foot { flex-direction: column; gap: 6px; text-align: center; }
	/* على الجوال: النص في منتصف الشاشة لا في قاعها، ومسافة سفلية تُبعد الأزرار عن زر واتساب */
	body.home-a .ha-hero      { align-items: center; padding: calc(var(--header) + 24px) 0 112px; }
	body.home-a .ha-title     { line-height: 1.24; }
	body.home-a .ha-actions   { flex-direction: column; align-items: stretch; gap: 12px; }
	body.home-a .ha-actions .btn { justify-content: center; }
	body.home-a .ha-scroll    { display: none; }
	/* الجوال: الشريحة في الزاوية اليسرى أسفل الهيرو (زر واتساب على اليمين) */
	body.home-a .ha-stock { width: 252px; bottom: 32px; padding: 14px 16px 12px; gap: 11px; border-radius: 18px; }
	body.home-a .ha-stock-brand img { height: 25px; }
	body.home-a .ha-stock-price b { font-size: 1.625rem; }
	body.home-a .ha-stock-foot { display: none; }
	body.home-a .ha-sus-media { min-height: 280px; }
	body.home-a .ha-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	body.home-a .ha-stat { padding: 4px 16px 22px; }
	body.home-a .ha-stat-index { margin-bottom: 16px; }
	body.home-a .ha-stat strong { font-size: 2.25rem; }
	body.home-a .ha-stat-bar { inset-inline: 16px; }
	body.home-a .ha-about-copy { padding-inline-start: 16px; }
	/* على الجوال: الشعار في أسفل القسم خلف النص بعرض الشاشة تقريبًا، أخفّ قليلًا */
	body.home-a .ha-about-badge { justify-self: start; max-width: 300px; margin-top: 16px; }
	body.home-a .ha-mfg { min-height: 0; }
	body.home-a .ha-ticker .ticker__price { font-size: 1.375rem; }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
	body.home-a .ha-pcard, body.home-a .ha-pcard-3d, body.home-a .ha-pcard-plate img { transition: none; }
	body.home-a .ha-pcard:hover .ha-pcard-3d, body.home-a .ha-pcard:hover .ha-pcard-plate img { transform: none; }
	body.home-a .ha-stats-glow { animation: none; }
	body.home-a .ha-stat-bar { transition: none; }
	body.home-a .ha-hero-media,
	body.home-a .ha-hero-copy > *,
	body.home-a .ha-hero-inner,
	body.home-a .ha-scroll,
	body.home-a .ha-scroll i { animation: none; opacity: 1; transform: none; }
	body.home-a .ha-hero::after { animation: none; opacity: 0; }
	body.home-a .ha-sus-img { animation: none; transform: none; inset: 0; height: 100%; }
}

/* =========================================================
   تتبُّع الحروف والعربية — مراجعة ما قبل التسليم (2026-09-16)
   =========================================================

   الحرف العربي متّصل بما قبله وما بعده، و letter-spacing تُدخِل فراغًا بين كل
   حرفين فتفكّ هذا الاتصال. على iOS تظهر الكلمة **مقطّعة** فعلًا — رُصد على
   آيفون في «صناعة سعودية منذ 2005» وتتبُّعها 0.32em — وعلى كروم تبدو مبعثرة
   وإن بقيت متصلة.

   والتتبُّع تقليد طباعي **لاتيني** للعناوين الصغيرة لا مقابل له في العربية.
   فيُلغى هنا في الاتجاه العربي وحده، ويبقى في النسخة الإنجليزية وفي المقاطع
   اللاتينية المعلَّمة بـ dir="ltr" (الأسعار، رموز تداول، أكواد المنتجات)
   — ولهذا :not([dir="ltr"]).

   وحيث كان التتبُّع كبيرًا (‏≥ 0.18em) فالمقصود «عنوان صغير متباعد»، فيُعوَّض
   بتباعد بين **الكلمات** لا بين الحروف: يحفظ الأثر البصري ولا يمسّ الاتصال.
   ========================================================= */

html[dir="rtl"] body.home-a .ha-accordion .accordion-trigger em:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-news-row-date span:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-pcard-corner:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-pcard-side dt:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-stock-live:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-sus-points em:not([dir="ltr"]) {
	letter-spacing: normal;
}

html[dir="rtl"] body.home-a .ha-eyebrow:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-scroll:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-stat-index:not([dir="ltr"]),
html[dir="rtl"] body.home-a .ha-ticker .ticker__symbol:not([dir="ltr"]) {
	letter-spacing: normal;
	word-spacing: .14em;
}