/* =========================================================================
   نماء الاعتمادية — نظام التصميم
   هجين: هيرو وأقسام الدعوة بأخضر داكن، وباقي الصفحات فاتحة.
   مكتوب باتجاه RTL أصلي باستخدام الخصائص المنطقية.
   ====================================================================== */

/* ---------- 1) التوكنز ---------- */
:root {
	--brand-900: #032b17;
	--brand-800: #04361d;
	--brand: #064223;
	--brand-600: #0b6236;
	--brand-500: #10814a;
	--accent: #3ddc97;
	--accent-soft: #a9f0cd;

	--ink: #0e1512;
	--ink-2: #33453d;
	--muted: #5c6b64;
	--line: #e1e8e4;
	--surface: #f4f7f5;
	--surface-2: #eef3f0;
	--white: #ffffff;

	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 26px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(6, 66, 35, .05), 0 2px 8px rgba(6, 66, 35, .04);
	--shadow: 0 4px 14px rgba(6, 66, 35, .06), 0 14px 34px rgba(6, 66, 35, .06);
	--shadow-lg: 0 24px 64px rgba(6, 66, 35, .14);

	--container: 1200px;
	--gap: 24px;
	--section-y: clamp(56px, 7.5vw, 112px);

	--font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-back: cubic-bezier(.34, 1.56, .64, 1);
	--t: .25s cubic-bezier(.4, 0, .2, 1);
	--header-h: 78px;

	/* توكنز الحركة — تُبدَّل من صنف motion-* على body. */
	--rise: 34px;
	--rise-scale: .96;
	--rise-dur: .85s;
	--stagger: 90ms;
	--lift: 8px;
	--hover-dur: .4s;
}

body.motion-calm {
	--rise: 14px;
	--rise-scale: 1;
	--rise-dur: .5s;
	--stagger: 50ms;
	--lift: 3px;
	--hover-dur: .28s;
}

body.motion-medium {
	--rise: 22px;
	--rise-scale: .985;
	--rise-dur: .65s;
	--stagger: 70ms;
	--lift: 5px;
	--hover-dur: .34s;
}

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

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* الروابط الداخلية لا تختفي خلف الهيدر الثابت. */
	scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ink-2);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

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

/* ---------- 3) الطباعة ---------- */
h1, h2, h3, h4, h5 {
	color: var(--ink);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.18; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.24; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead {
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	line-height: 1.8;
	color: var(--muted);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 14px;
	padding: 6px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	background: var(--surface);
	color: var(--brand-600);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

/* ---------- 4) التخطيط ---------- */
.container {
	width: min(100% - 40px, var(--container));
	margin-inline: auto;
}

.section {
	position: relative;
	padding-block: var(--section-y);
	overflow: hidden;
}

.section--soft { background: var(--surface); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

.section > .container { position: relative; z-index: 2; }

/* ---------- خلفية مصوّرة لقسم ---------- */
/*
 * الصورة تُوضع كطبقة مستقلة تحت تدرّج أخضر معتم، لا كخلفية مباشرة:
 * التدرّج هو ما يضمن تباين النص مهما كانت الصورة التي يرفعها العميل.
 */
.bg-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.bg-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .3;
}

.bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--brand-900) 0%, rgba(3, 43, 23, .82) 45%, var(--brand-900) 100%),
		radial-gradient(60% 70% at 50% 0%, rgba(16, 129, 74, .38), transparent 70%);
}

/* المحتوى يعلو الخلفية دائماً. */
.cta-band > .container,
.page-hero > .container { position: relative; z-index: 2; }

/* شريط الدعوة يحتفظ بلون الهوية الأفتح بدل الأسود الأخضر. */
.cta-band .bg-media img { opacity: .26; }

.cta-band .bg-media::after {
	background:
		linear-gradient(180deg, rgba(6, 66, 35, .9) 0%, rgba(4, 54, 29, .96) 100%),
		radial-gradient(48% 90% at 88% 50%, rgba(61, 220, 151, .24), transparent 66%);
}

/* هيرو الصفحات الداخلية يبقى داكناً ليقرأ العنوان الأبيض بوضوح. */
.page-hero .bg-media img { opacity: .22; }

/* خلفية الهيرو الرئيسي: خافتة جداً لأن فوقها شبكة وبقع ضوء ونص كبير. */
.hero .bg-media { z-index: -3; }
.hero .bg-media img { opacity: .16; }

.hero .bg-media::after {
	background:
		linear-gradient(180deg, rgba(3, 43, 23, .82) 0%, rgba(3, 43, 23, .92) 100%);
}

/* ---------- علامة مائية أيقونية ---------- */
.section-mark {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: -60px;
	z-index: 1;
	translate: 0 -50%;
	color: var(--brand);
	opacity: .04;
	pointer-events: none;
}

.section-mark .ico { width: clamp(260px, 34vw, 460px); height: auto; stroke-width: .8; }
.section--dark .section-mark,
.cta-band .section-mark { color: var(--accent); opacity: .07; }

@media (max-width: 980px) {
	.section-mark { display: none; }
}

.section-head {
	max-width: 720px;
	margin-block-end: clamp(32px, 4vw, 56px);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head p { margin-block-start: 14px; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.skip-link {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 16px;
	z-index: 999;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	background: var(--brand);
	color: #fff;
	transition: inset-block-start var(--t);
}

.skip-link:focus { inset-block-start: 16px; color: #fff; }

/* ---------- 5) الأزرار ---------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 1.5px solid transparent;
	border-radius: var(--radius-full);
	background: transparent;
	font-size: .96rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	color: var(--btn-fg, currentColor);
	border-color: var(--btn-bd, transparent);
	/* الإزاحة المغناطيسية تُكتب في هذين المتغيّرين من السكربت. */
	transform: translate(var(--mx, 0px), var(--my, 0px));
	transition:
		background var(--hover-dur) var(--ease),
		color var(--hover-dur) var(--ease),
		border-color var(--hover-dur) var(--ease),
		transform var(--hover-dur) var(--ease),
		box-shadow var(--hover-dur) var(--ease);
}

/*
 * التعبئة تنمو من حافة البدء (اليمين في العربية) لحافة النهاية،
 * فتتبع اتجاه القراءة. كل نسخة من الزر تضبط متغيّراتها الأربعة فقط.
 */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .5s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn:hover,
.btn:focus-visible {
	--my: -4px;
	color: var(--btn-fg-hover);
	border-color: var(--btn-bd-hover, var(--btn-fill));
	box-shadow: var(--btn-glow);
}

.btn:active { --my: 0px; transition-duration: .08s; }
.btn .ico { flex: none; transition: transform var(--hover-dur) var(--ease-back); }
.btn:hover .ico { transform: translateX(-6px); }

/* السكربت يضيف هذا الصنف أثناء التتبّع المغناطيسي فيوقف انتقال التحويل. */
.btn.is-magnetic { transition-property: background, color, border-color, box-shadow; }

/*
 * النسخ تضبط متغيّرات فقط ولا تكتب color/border-color مباشرة.
 * أي نسخة تكتب color بمُحدِّد أقوى من ‎.btn:hover‎ ستُلغي لون التمرير
 * فيصير النص بلون التعبئة نفسها — أي غير مرئي.
 */
.btn--primary {
	--btn-bd: var(--brand);
	--btn-fg: var(--brand);
	--btn-fill: var(--brand);
	--btn-fg-hover: #fff;
	--btn-glow: 0 14px 30px rgba(6, 66, 35, .26);
}

.btn--accent {
	--btn-bd: var(--accent);
	--btn-fg: var(--accent);
	--btn-fill: var(--accent);
	--btn-fg-hover: var(--brand-900);
	--btn-glow: 0 14px 34px rgba(61, 220, 151, .38);
}

.btn--ghost {
	--btn-bd: var(--line);
	--btn-fg: var(--ink);
	--btn-fill: var(--brand);
	--btn-fg-hover: #fff;
	--btn-bd-hover: var(--brand);
	--btn-glow: 0 14px 30px rgba(6, 66, 35, .18);
}

.btn--on-dark {
	--btn-bd: rgba(255, 255, 255, .35);
	--btn-fg: #fff;
	--btn-fill: #fff;
	--btn-fg-hover: var(--brand-900);
	--btn-bd-hover: #fff;
	--btn-glow: 0 14px 30px rgba(0, 0, 0, .3);
	backdrop-filter: blur(6px);
}

/*
 * زر الهيدر يتحوّل لأخضر داكن بمجرد تثبيت الهيدر على خلفية بيضاء:
 * النعناعي على الأبيض لا يحقق تباينًا كافيًا للقراءة.
 */
.site-header.is-stuck .btn--accent {
	--btn-bd: var(--brand);
	--btn-fg: var(--brand);
	--btn-fill: var(--brand);
	--btn-fg-hover: #fff;
	--btn-glow: 0 12px 26px rgba(6, 66, 35, .24);
}

.btn--sm { padding: 10px 20px; font-size: .88rem; }
.btn--block { width: 100%; }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	position: relative;
}

.link-more::before {
	content: "";
	position: absolute;
	inset-block-end: -3px;
	inset-inline: 0;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: inline-end;
	transition: transform .35s var(--ease);
}

.link-more:hover::before { transform: scaleX(1); transform-origin: inline-start; }
.link-more .ico { transition: transform .3s var(--ease); }
.link-more:hover .ico { transform: translateX(-4px); }

/* ---------- 6) الهيدر ---------- */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	border-block-end: 1px solid transparent;
	transition:
		background var(--t),
		box-shadow var(--t),
		border-color var(--t),
		transform .4s var(--ease);
}

/* يختفي عند النزول ويعود فوراً عند الصعود — يُدار بكلاس من السكربت. */
.site-header.is-hidden { transform: translateY(-100%); }

/* لا يختفي أبداً والقائمة مفتوحة أو والتركيز داخله (تنقّل بلوحة المفاتيح). */
body.nav-open .site-header,
.site-header:focus-within { transform: none; }

.site-header.is-stuck {
	background: rgba(255, 255, 255, .92);
	border-block-end-color: var(--line);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(14px);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { max-height: 54px; width: auto; }

/* خانة واحدة ظاهرة حسب حالة الهيدر — لا يجتمع اللوجو والنص أبداً. */
.brand-slot { display: block; }
.brand-slot--on-light { display: none; }
.site-header.is-stuck .brand-slot--on-dark { display: none; }
.site-header.is-stuck .brand-slot--on-light { display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { color: #fff; font-size: 1.06rem; font-weight: 700; }
.brand-text span { color: rgba(255, 255, 255, .62); font-size: .68rem; letter-spacing: .12em; }

.brand-slot--on-light .brand-text b { color: var(--ink); }
.brand-slot--on-light .brand-text span { color: var(--muted); }

.site-nav { margin-inline-start: auto; }

.nav-list { display: flex; align-items: center; gap: 4px; }

.nav-list a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--radius-full);
	color: rgba(255, 255, 255, .84);
	font-size: .94rem;
	font-weight: 500;
	transition: background var(--t), color var(--t);
}

.nav-list a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.nav-list .current-menu-item > a,
.nav-list .current_page_item > a { background: rgba(255, 255, 255, .14); color: #fff; }

.site-header.is-stuck .nav-list a { color: var(--ink-2); }
.site-header.is-stuck .nav-list a:hover { background: var(--surface); color: var(--brand); }

.site-header.is-stuck .nav-list .current-menu-item > a,
.site-header.is-stuck .nav-list .current_page_item > a { background: var(--surface); color: var(--brand); }

.header-cta { flex: none; }

.nav-toggle {
	display: none;
	flex: none;
	/*
	 * يُدفع إلى طرف الشريط: قائمة التنقّل المخفية على الجوال كانت هي
	 * حاملة margin-inline-start:auto، فبدونها يلتصق الزر بالشعار.
	 */
	margin-inline-start: auto;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm);
	color: #fff;
}

.site-header.is-stuck .nav-toggle { color: var(--ink); }

/* درج التنقّل على الشاشات الصغيرة */
.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--brand-900);
	color: #fff;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--t), visibility var(--t);
}

.nav-drawer.is-open { visibility: visible; opacity: 1; }
body.nav-open { overflow: hidden; }

.nav-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 78px;
	padding-inline: 20px;
	border-block-end: 1px solid rgba(255, 255, 255, .12);
}

.nav-drawer-body { padding: 28px 20px 40px; overflow-y: auto; }

.nav-drawer .nav-list {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
}

.nav-drawer .nav-list a {
	padding: 14px 16px;
	border-radius: var(--radius);
	font-size: 1.06rem;
	font-weight: 600;
}

.nav-drawer-actions { margin-block-start: 26px; display: grid; gap: 12px; }
.nav-drawer-close { color: #fff; padding: 8px; }

/* ---------- 7) الهيرو ---------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(94vh, 900px);
	padding-block: calc(var(--header-h) + 40px) clamp(56px, 6vw, 88px);
	background: var(--brand-900);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hero > .container { width: min(100% - 40px, var(--container)); }

/* بقع ضوء تعطي عمقاً للخلفية المسطّحة. */
.hero::before {
	content: "";
	position: absolute;
	inset: -25% -10% auto -10%;
	height: 130%;
	z-index: -2;
	background:
		radial-gradient(52% 44% at 18% 6%, rgba(61, 220, 151, .26), transparent 64%),
		radial-gradient(44% 44% at 86% 22%, rgba(16, 129, 74, .45), transparent 68%),
		radial-gradient(40% 40% at 60% 100%, rgba(11, 98, 54, .32), transparent 70%);
	pointer-events: none;
}

/* الشبكة أوضح من قبل: هي مصدر الإحساس التقني في الهيرو. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to left, rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(78% 68% at 50% 30%, #000, transparent 80%);
	mask-image: radial-gradient(78% 68% at 50% 30%, #000, transparent 80%);
	pointer-events: none;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	width: 100%;
}

.hero h1 { color: #fff; text-wrap: balance; }

/* كلمة مميّزة داخل العنوان — تُحدَّد من لوحة التحكم. */
.hero h1 .hl {
	position: relative;
	color: var(--accent);
	white-space: nowrap;
}

.hero h1 .hl::after {
	content: "";
	position: absolute;
	inset-inline: -2px;
	inset-block-end: .08em;
	height: .1em;
	border-radius: 2px;
	background: currentColor;
	opacity: .38;
}

.hero .lead { color: rgba(255, 255, 255, .8); max-width: 52ch; margin-block-start: 20px; }

.hero .eyebrow {
	border-color: rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: var(--accent-soft);
	backdrop-filter: blur(6px);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 32px;
}

.hero-visual { position: relative; }

/* هالة خضراء خلف الصورة تفصلها عن الخلفية بدل أن تطفو بلا ارتباط. */
.hero-visual::before {
	content: "";
	position: absolute;
	inset: -16%;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(61, 220, 151, .3), transparent 62%);
	filter: blur(40px);
	pointer-events: none;
}

/* إطار مُزاح خلف الصورة يعطي طبقة وعمقاً. */
.hero-visual::after {
	content: "";
	position: absolute;
	inset-block: 26px -26px;
	inset-inline: -26px 26px;
	z-index: -1;
	border: 1.5px solid rgba(61, 220, 151, .35);
	border-radius: var(--radius-lg);
	pointer-events: none;
}

.hero-shot {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 34px 90px rgba(0, 0, 0, .5);
	isolation: isolate;
}

.hero-shot img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 30%;
}

/*
 * صبغة خضراء فوق الصورة: بدونها تبقى الصورة الساطعة كتلة غريبة
 * وسط الهيرو الداكن بدل أن تكون جزءاً من الهوية.
 */
.hero-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	/* صبغة خفيفة تربط الصورة بالهوية دون أن تطمس تفاصيل الوجوه. */
	background:
		linear-gradient(180deg, transparent 34%, rgba(3, 43, 23, .62) 100%),
		linear-gradient(140deg, rgba(6, 66, 35, .26), rgba(16, 129, 74, .1));
	pointer-events: none;
}

/* بطاقة زجاجية عائمة فوق صورة الهيرو */
.hero-chip {
	position: absolute;
	z-index: 2;
	inset-block-end: 22px;
	inset-inline-start: -22px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius);
	background: rgba(3, 43, 23, .82);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(14px);
}

.hero-chip .ico { color: var(--accent); flex: none; }
.hero-chip b { display: block; color: #fff; font-size: .96rem; }
.hero-chip span { color: rgba(255, 255, 255, .66); font-size: .82rem; }

/* بطاقة ثانية أعلى الصورة تكسر رتابة المستطيل. */
.hero-badge {
	position: absolute;
	z-index: 2;
	inset-block-start: 22px;
	inset-inline-end: -20px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 1px solid rgba(61, 220, 151, .3);
	border-radius: var(--radius-full);
	background: rgba(3, 43, 23, .82);
	color: #fff;
	font-size: .86rem;
	font-weight: 600;
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(14px);
}

.hero-badge .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(61, 220, 151, .6);
	animation: namaa-live 2s var(--ease) infinite;
}

@keyframes namaa-live {
	0%       { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); }
	70%,100% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); }
}

/* ---------- مؤشّر التمرير ---------- */
.hero-scroll {
	position: absolute;
	inset-block-end: 26px;
	inset-inline-start: 50%;
	z-index: 2;
	translate: 50% 0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .55);
	font-size: .78rem;
	transition: color var(--t);
}

.hero-scroll:hover { color: var(--accent); }

.hero-scroll span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 42px;
	border: 1.5px solid currentColor;
	border-radius: var(--radius-full);
}

.hero-scroll span::before {
	content: "";
	width: 4px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	animation: namaa-scroll 1.8s var(--ease) infinite;
}

@keyframes namaa-scroll {
	0%       { transform: translateY(-7px); opacity: 0; }
	35%      { opacity: 1; }
	100%     { transform: translateY(8px); opacity: 0; }
}

@media (max-width: 980px) {
	.hero-scroll { display: none; }
	.hero-visual::after { display: none; }
}

/* ---------- 8) هيرو الصفحات الداخلية ---------- */
.page-hero {
	position: relative;
	padding-block: clamp(126px, 15vw, 168px) clamp(48px, 6vw, 76px);
	background: var(--brand-900);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 150%;
	z-index: -2;
	background:
		radial-gradient(52% 60% at 78% 0%, rgba(61, 220, 151, .18), transparent 66%),
		radial-gradient(40% 50% at 12% 20%, rgba(16, 129, 74, .3), transparent 70%);
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to left, rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(80% 70% at 50% 20%, #000, transparent 80%);
	mask-image: radial-gradient(80% 70% at 50% 20%, #000, transparent 80%);
}

.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: rgba(255, 255, 255, .76); max-width: 62ch; margin-block-start: 18px; }

.page-hero .eyebrow {
	border-color: rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: var(--accent-soft);
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-end: 18px;
	color: rgba(255, 255, 255, .6);
	font-size: .86rem;
}

.breadcrumb a { color: rgba(255, 255, 255, .8); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-hidden] { opacity: .45; }

/* ---------- 9) شريط الثقة ---------- */
.trust-bar {
	border-block-end: 1px solid var(--line);
	background: var(--white);
}

.trust-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-block: 26px;
}

.trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding-inline: 14px;
	color: var(--ink-2);
	font-size: .95rem;
	font-weight: 500;
	text-align: center;
}

.trust-item .ico { flex: none; color: var(--brand-500); }

/* ---------- 10) شريط التكاملات ---------- */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.marquee {
	display: flex;
	gap: 14px;
	width: max-content;
	animation: namaa-marquee 44s linear infinite;
}

.marquee-wrap:hover .marquee { animation-play-state: paused; }

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

.marquee-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	background: var(--white);
	color: var(--ink-2);
	font-size: .95rem;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease);
}

.marquee-item.has-logo { padding: 18px 26px; }

/*
 * صندوق بصري موحّد لكل الشعارات: بأبعاد حرّة تظهر الشعارات العريضة
 * (WooCommerce مثلاً) أصغر بكثير من المربّعة. contain يحفظ النِسَب.
 */
.marquee-item img {
	height: 56px;
	width: 142px;
	object-fit: contain;
	opacity: .8;
	transition: opacity var(--hover-dur) var(--ease);
}

@media (max-width: 680px) {
	.marquee-item.has-logo { padding: 14px 20px; }
	.marquee-item img { height: 44px; width: 112px; }
}

.marquee-item:hover { border-color: rgba(11, 98, 54, .35); box-shadow: var(--shadow-sm); }
.marquee-item:hover img { opacity: 1; }

/* ---------- 11) الكروت ---------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	/* سياق تكديس خاص: بدونه ينزل التوهج خلف خلفية القسم فيختفي. */
	isolation: isolate;
	transition:
		border-color var(--hover-dur) var(--ease),
		box-shadow var(--hover-dur) var(--ease),
		transform var(--hover-dur) var(--ease);
}

/*
 * التوهج يُرسم بالظل لا بعنصر زائف: العنصر الزائف بـ z-index سالب داخل
 * سياق تكديس يُطبع فوق خلفية البطاقة نفسها فيغطّي النص.
 */
.card:hover {
	border-color: rgba(61, 220, 151, .55);
	box-shadow:
		0 0 0 4px rgba(61, 220, 151, .12),
		0 22px 50px rgba(6, 66, 35, .16);
	transform: translateY(calc(var(--lift) * -1));
}

.card-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-block-end: 20px;
	border-radius: 15px;
	background: linear-gradient(145deg, var(--brand) 0%, var(--brand-500) 100%);
	color: #fff;
	box-shadow: 0 8px 20px rgba(6, 66, 35, .2);
	flex: none;
	transition:
		transform var(--hover-dur) var(--ease-back),
		box-shadow var(--hover-dur) var(--ease);
}

.card:hover .card-icon {
	transform: translateY(-3px) rotate(-6deg) scale(1.08);
	box-shadow: 0 14px 30px rgba(6, 66, 35, .3);
}

.card h3 { margin-block-end: 10px; }
.card p { color: var(--muted); font-size: .96rem; }

.card-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: 20px;
	color: var(--brand-600);
	font-size: .92rem;
	font-weight: 600;
}

.card-link .ico { transition: transform var(--t); }
.card:hover .card-link .ico { transform: translateX(-4px); }

/* رابط يغطي البطاقة كاملة مع إبقاء النص قابلاً للتحديد */
.card-cover {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

.card-cover span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- بطاقة بخلفية مصوّرة (القطاعات) ---------- */
.card--media {
	min-height: 300px;
	padding: 28px;
	/* الأيقونة مطلقة في الأعلى — هذه المساحة تمنع مرور العنوان تحتها. */
	padding-block-start: 92px;
	border-color: transparent;
	background: var(--brand-900);
	color: rgba(255, 255, 255, .82);
	justify-content: flex-end;
	overflow: hidden;
}

.card--media .card-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.card--media .card-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}

.card--media .card-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 43, 23, .28) 0%, rgba(3, 43, 23, .82) 58%, rgba(3, 43, 23, .96) 100%);
}

.card--media:hover .card-bg img { transform: scale(1.07); }

.card--media h3 { color: #fff; }
.card--media p { color: rgba(255, 255, 255, .76); }
.card--media .card-link { color: var(--accent-soft); }

.card--media .card-icon {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-start: 24px;
	margin: 0;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 13px;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	box-shadow: none;
}

.card--media:hover {
	border-color: rgba(61, 220, 151, .5);
	box-shadow: 0 0 0 4px rgba(61, 220, 151, .12), 0 22px 50px rgba(3, 43, 23, .3);
}

.card--media .bullets li { color: rgba(255, 255, 255, .8); }
.card--media .bullets .ico { color: var(--accent); }

/* قائمة نقاط داخل البطاقة */
.bullets { display: grid; gap: 10px; margin-block-start: 18px; }

.bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--ink-2);
	font-size: .94rem;
	line-height: 1.6;
}

.bullets .ico { flex: none; margin-block-start: 3px; color: var(--brand-500); }

/* ---------- 12) قسم القيمة (نص + صورة) ---------- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
}

.split-media img {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.points { display: grid; gap: 22px; margin-block-start: 30px; }

.point { display: flex; gap: 16px; }

.point-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--brand-600);
	flex: none;
}

.point h4 { margin-block-end: 5px; }
.point p { color: var(--muted); font-size: .94rem; }

/* ---------- صورة بإطار مُزاح (الصفحات الداخلية) ---------- */
.framed-shot { position: relative; }

.framed-shot img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.framed-shot::after {
	content: "";
	position: absolute;
	inset-block: 24px -24px;
	inset-inline: -24px 24px;
	border: 1.5px solid rgba(11, 98, 54, .28);
	border-radius: var(--radius-lg);
}

@media (max-width: 980px) {
	.framed-shot::after { display: none; }
}

/* ---------- الرؤية والرسالة ---------- */
.vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.vm-card {
	position: relative;
	padding: clamp(28px, 3vw, 42px);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(10px);
	transition: border-color var(--hover-dur) var(--ease), transform var(--hover-dur) var(--ease);
}

.vm-card:hover {
	border-color: rgba(61, 220, 151, .5);
	transform: translateY(calc(var(--lift) * -1));
}

.vm-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-block-end: 22px;
	border-radius: 16px;
	border: 1px solid rgba(61, 220, 151, .3);
	background: rgba(61, 220, 151, .12);
	color: var(--accent);
}

.vm-card h3 { color: #fff; margin-block-end: 10px; font-size: 1.3rem; }
.vm-card p { color: rgba(255, 255, 255, .78); font-size: 1.02rem; line-height: 1.85; }

@media (max-width: 680px) {
	.vm-grid { grid-template-columns: 1fr; }
}

/* ---------- 13) الخطوات ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }

.step {
	counter-increment: step;
	position: relative;
	padding: 30px 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition: border-color var(--t), box-shadow var(--t);
}

.step:hover { border-color: rgba(11, 98, 54, .3); box-shadow: var(--shadow-sm); }

.step-num {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 16px;
}

.step-num::before {
	content: counter(step, decimal-leading-zero);
	color: var(--accent);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	-webkit-text-stroke: .5px var(--brand-500);
}

.step-num .ico { color: var(--brand-600); }
.step h3 { font-size: 1.1rem; margin-block-end: 8px; }
.step p { color: var(--muted); font-size: .94rem; }

/* ---------- مسار "كيف يعمل الحل" على الرئيسية ---------- */
.flow-section { background: var(--surface); }

.flow {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	list-style: none;
}

/* كل خطوة بطاقة كاملة: رقم شبحي في الركن وأيقونة أعلاها. */
.flow-step {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	overflow: hidden;
	isolation: isolate;
	transition:
		border-color var(--hover-dur) var(--ease),
		box-shadow var(--hover-dur) var(--ease),
		transform var(--hover-dur) var(--ease);
}

.flow-step:hover {
	border-color: rgba(61, 220, 151, .55);
	box-shadow:
		0 0 0 4px rgba(61, 220, 151, .12),
		0 22px 50px rgba(6, 66, 35, .16);
	transform: translateY(calc(var(--lift) * -1));
}

.flow-node {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-block-end: 22px;
	border-radius: 16px;
	background: linear-gradient(145deg, var(--brand) 0%, var(--brand-500) 100%);
	color: #fff;
	box-shadow: 0 10px 24px rgba(6, 66, 35, .22);
	flex: none;
	transition: transform var(--hover-dur) var(--ease-back), box-shadow var(--hover-dur) var(--ease);
}

.flow-step:hover .flow-node {
	transform: translateY(-3px) rotate(-6deg) scale(1.08);
	box-shadow: 0 16px 32px rgba(6, 66, 35, .3);
}

/* الرقم زخرفة خلفية: لا يزاحم النص ولا يقرؤه القارئ الصوتي. */
.flow-num {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 18px;
	z-index: -1;
	color: var(--brand);
	font-size: 4.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	opacity: .07;
	transition: opacity var(--hover-dur) var(--ease);
}

.flow-step:hover .flow-num { opacity: .13; }

.flow-step h3 { margin-block-end: 8px; font-size: 1.12rem; }
.flow-step p { color: var(--muted); font-size: .95rem; }

.flow:has(.flow-step--plain) { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
	.flow,
	.flow:has(.flow-step--plain) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	/*
	 * صفّ أفقي على الجوال: الأيقونة بجانب النص بدل فوقه، فيقصر ارتفاع
	 * البطاقة كثيراً وتظل ست خطوات قابلة للتصفّح دون تمرير طويل.
	 */
	.flow,
	.flow:has(.flow-step--plain) { grid-template-columns: 1fr; gap: 12px; }

	.flow-step {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}

	.flow-node { width: 46px; height: 46px; margin-block-end: 0; }
	.flow-num { font-size: 3rem; inset-block-start: 6px; inset-inline-end: 12px; }
	.flow-step h3 { font-size: 1.04rem; }
	.flow-step p { font-size: .9rem; }
}

/* ---------- مسار صفحة "كيف نعمل" ---------- */
/* عمودان: أرقام على خط رأسي متصل، والمحتوى في بطاقات بجانبه. */
.track {
	position: relative;
	display: grid;
	gap: 18px;
	max-width: 880px;
	margin-inline: auto;
	list-style: none;
}

.track-step {
	position: relative;
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 22px;
	align-items: stretch;
}

.track-marker { position: relative; display: grid; justify-items: center; }

.track-num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--brand) 0%, var(--brand-500) 100%);
	color: #fff;
	font-size: .96rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 10px 24px rgba(6, 66, 35, .24);
	transition: transform var(--hover-dur) var(--ease-back);
}

.track-step:hover .track-num { transform: scale(1.08); }

/* الخط الواصل يمتد من أسفل الرقم إلى الخطوة التالية. */
.track-marker::after {
	content: "";
	position: absolute;
	inset-block-start: 58px;
	inset-block-end: -18px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--line) 0 7px, transparent 7px 14px);
}

.track-step:last-child .track-marker::after { display: none; }

.track-body {
	position: relative;
	padding: 26px 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	transition: border-color var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease), transform var(--hover-dur) var(--ease);
}

.track-step:hover .track-body {
	border-color: rgba(61, 220, 151, .5);
	box-shadow: 0 0 0 4px rgba(61, 220, 151, .1), 0 18px 40px rgba(6, 66, 35, .12);
	transform: translateX(-4px);
}

.track-icon {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-end: 26px;
	color: var(--brand-500);
	opacity: .5;
}

.track-body h3 { font-size: 1.16rem; margin-block-end: 8px; padding-inline-end: 40px; }
.track-body p { color: var(--muted); font-size: .96rem; }

@media (max-width: 680px) {
	.track-step { grid-template-columns: 52px 1fr; gap: 14px; }
	.track-num { width: 44px; height: 44px; font-size: .84rem; }
	.track-marker::after { inset-block-start: 44px; }
	.track-body { padding: 22px 20px; }
	.track-icon { display: none; }
	.track-body h3 { padding-inline-end: 0; }
}

/* ---------- قائمة المؤشرات ---------- */
.kpi-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	max-width: 900px;
	margin-inline: auto;
	list-style: none;
}

.kpi {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .05);
	color: rgba(255, 255, 255, .88);
	font-size: .98rem;
	font-weight: 500;
	backdrop-filter: blur(8px);
	transition: border-color var(--hover-dur) var(--ease), background var(--hover-dur) var(--ease);
}

.kpi:hover { border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .08); }

.kpi-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	background: rgba(61, 220, 151, .14);
	color: var(--accent);
}

@media (max-width: 680px) {
	.kpi-list { grid-template-columns: 1fr; }
}

/* المسار العمودي القديم (احتياطي) */
.timeline {
	position: relative;
	display: grid;
	gap: 0;
	max-width: 780px;
	margin-inline: auto;
}

.timeline .step {
	border: 0;
	border-radius: 0;
	padding: 26px 0 26px 0;
	padding-inline-start: 74px;
	background: none;
}

.timeline .step:hover { box-shadow: none; }

.timeline .step::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	inset-block-start: 26px;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.timeline .step::after {
	content: "";
	position: absolute;
	inset-block-start: 76px;
	inset-inline-start: 24px;
	width: 2px;
	height: calc(100% - 76px + 26px);
	background: linear-gradient(var(--line), var(--line));
}

.timeline .step:last-child::after { display: none; }
.timeline .step-num::before { display: none; }

/* ---------- 14) الأرقام ---------- */
.metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.metric {
	padding: 30px 26px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(8px);
	text-align: center;
}

.metric b {
	display: block;
	color: var(--accent);
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.metric i { color: var(--accent-soft); font-size: 1rem; font-style: normal; font-weight: 600; }

/*
 * ابن مباشر فقط: الرقم نفسه صار داخل <span> ليعدّه السكربت،
 * ولولا التحديد لورث حجم تسمية الوصف بدل الحجم العريض.
 */
.metric > span { display: block; margin-block-start: 10px; color: rgba(255, 255, 255, .74); font-size: .92rem; line-height: 1.6; }
.metric b span { font: inherit; color: inherit; }

.section--dark {
	position: relative;
	background: var(--brand-900);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 70% at 50% 0%, rgba(16, 129, 74, .34), transparent 68%);
}

.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: rgba(255, 255, 255, .74); }

.section--dark .eyebrow {
	border-color: rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: var(--accent-soft);
}

/* ---------- 15) آراء العملاء ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.quote {
	display: flex;
	flex-direction: column;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
}

.quote > .ico { color: var(--accent); margin-block-end: 16px; }
.quote blockquote { flex: 1; color: var(--ink-2); font-size: 1rem; line-height: 1.8; }

.quote figcaption {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-block-start: 22px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--line);
}

.quote figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; color: var(--ink); font-size: .95rem; }
.quote figcaption span { color: var(--muted); font-size: .85rem; }

/* ---------- 16) الأسئلة الشائعة ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }

.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
}

.faq-item[open] { border-color: rgba(11, 98, 54, .32); box-shadow: var(--shadow-sm); }

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	color: var(--ink);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
	transition: color var(--t);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand); }

.faq-item summary .ico {
	flex: none;
	color: var(--brand-500);
	transition: transform var(--t);
}

.faq-item[open] summary .ico { transform: rotate(180deg); }

.faq-answer { padding: 0 24px 22px; color: var(--muted); font-size: .97rem; line-height: 1.85; }

/* ---------- 17) شريط الدعوة ---------- */
/*
 * التداخل الحقيقي يحتاج أن يكون الجزء السفلي من الشريط شفافاً، وإلا غطّت
 * خلفيته الفاتحة أعلى الفوتر المسحوب لأعلى فاختفى التداخل تماماً.
 * لذلك الخلفية تدرّج يتوقف عند مسافة التداخل بالضبط.
 */
.cta-band {
	--cta-overlap: clamp(70px, 8vw, 120px);
	position: relative;
	z-index: 2;
	padding-block: var(--section-y) 0;
	background: linear-gradient(
		to bottom,
		var(--surface) 0,
		var(--surface) calc(100% - var(--cta-overlap)),
		transparent calc(100% - var(--cta-overlap))
	);
}

/*
 * البطاقة أفتح من الفوتر عمداً وبحدّ نعناعي وظل واسع: بدون هذا التباين
 * يذوب طرفها السفلي في الفوتر فيبدو التداخل خطأً في العرض لا تصميماً.
 */
.cta-card {
	position: relative;
	padding: clamp(40px, 5.5vw, 72px) clamp(28px, 5vw, 76px);
	border: 1px solid rgba(61, 220, 151, .24);
	border-radius: clamp(24px, 3vw, 40px);
	background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand) 52%, var(--brand-800) 100%);
	color: #fff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	box-shadow:
		0 0 0 1px rgba(3, 43, 23, .5),
		0 40px 90px rgba(0, 0, 0, .45);
}

.cta-card > .cta-content { position: relative; z-index: 2; }

.cta-card h2 {
	color: #fff;
	max-width: 20ch;
	margin-inline: auto;
	text-wrap: balance;
}

.cta-card p {
	margin-block-start: 14px;
	margin-inline: auto;
	max-width: 56ch;
	color: rgba(255, 255, 255, .82);
}

.cta-card .eyebrow {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .08);
	color: var(--accent-soft);
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-block-start: 30px;
}

.cta-card .section-mark {
	inset-inline-start: auto;
	inset-inline-end: -40px;
	opacity: .06;
}

.cta-card .section-mark .ico { width: clamp(200px, 20vw, 300px); }
.cta-card .bg-media img { opacity: .2; }

.cta-card .bg-media::after {
	background: linear-gradient(135deg, rgba(11, 98, 54, .86) 0%, rgba(6, 66, 35, .92) 52%, rgba(4, 54, 29, .95) 100%);
}

@media (max-width: 680px) {
	.cta-actions .btn { width: 100%; }
}

/* ---------- 18) النماذج ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label { color: var(--ink); font-size: .92rem; font-weight: 600; }
.field .req { color: #c0392b; margin-inline-start: 2px; }

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--ink);
	font-size: .97rem;
	transition: border-color var(--t), box-shadow var(--t);
}

.field textarea { min-height: 130px; resize: vertical; }

.field select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 16px center;
	padding-inline-start: 44px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--brand-500);
	box-shadow: 0 0 0 3px rgba(16, 129, 74, .13);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0392b; }

.field-error { color: #c0392b; font-size: .84rem; }

.form-hp { position: absolute; inset-inline-start: -9999px; opacity: 0; }

.form-note { margin-block-start: 16px; color: var(--muted); font-size: .86rem; }

.form-alert {
	display: none;
	padding: 16px 20px;
	border-radius: var(--radius);
	font-size: .96rem;
	line-height: 1.7;
}

.form-alert.is-visible { display: block; }
.form-alert--ok { background: #e8f7ef; border: 1px solid #b7e6cd; color: #0b6236; }
.form-alert--err { background: #fdecea; border: 1px solid #f5c2bd; color: #922b21; }

.form-actions { display: flex; align-items: center; gap: 16px; margin-block-start: 26px; }

.is-loading { opacity: .65; pointer-events: none; }

/* ---------- 19) صفحة التواصل ---------- */
.contact-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 4vw, 46px); align-items: start; }

.contact-form {
	padding: clamp(26px, 3.4vw, 44px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow);
}

.form-title { font-size: 1.4rem; margin-block-end: 24px; }

.contact-aside { display: grid; gap: 20px; }

.contact-card,
.next-card {
	padding: clamp(24px, 2.6vw, 32px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.contact-card h3,
.next-card h3 { font-size: 1.15rem; margin-block-end: 20px; }

.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: center; }

.contact-ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--brand-600);
}

.contact-list b { display: block; color: var(--muted); font-size: .82rem; font-weight: 500; }
.contact-list a, .contact-list > li > div > span { color: var(--ink); font-size: .97rem; font-weight: 600; word-break: break-word; }
.contact-list a:hover { color: var(--brand-600); }

/* خطوات ما بعد الإرسال */
.next-card { background: var(--brand-900); border-color: transparent; }
.next-card h3 { color: #fff; }

.next-list { display: grid; gap: 18px; list-style: none; }
.next-list li { display: flex; gap: 14px; align-items: flex-start; }

.next-num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(61, 220, 151, .4);
	background: rgba(61, 220, 151, .12);
	color: var(--accent);
	font-size: .84rem;
	font-weight: 700;
}

.next-list b { display: block; color: #fff; font-size: .96rem; margin-block-end: 3px; }
.next-list span { color: rgba(255, 255, 255, .68); font-size: .88rem; line-height: 1.65; }

/* ---------- 20) صفحة العنصر المفرد ---------- */
.entry { max-width: 780px; }
.entry h2 { margin-block: 1.6em .6em; font-size: 1.5rem; }
.entry h3 { margin-block: 1.4em .5em; }
.entry p { color: var(--ink-2); }
.entry ul { display: grid; gap: 10px; margin-block: 1em; }

.entry ul li {
	position: relative;
	padding-inline-start: 26px;
	color: var(--ink-2);
}

.entry ul li::before {
	content: "";
	position: absolute;
	inset-block-start: .68em;
	inset-inline-start: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.entry-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

.aside-box {
	position: sticky;
	inset-block-start: 100px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.aside-box h3 { font-size: 1.15rem; margin-block-end: 12px; }
.aside-box p { color: var(--muted); font-size: .94rem; margin-block-end: 20px; }

.related { display: grid; gap: 8px; margin-block-start: 24px; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.related b { color: var(--muted); font-size: .84rem; font-weight: 600; margin-block-end: 6px; }

.related a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--ink-2);
	font-size: .93rem;
	font-weight: 500;
	transition: background var(--t), color var(--t);
}

.related a:hover { background: var(--brand); color: #fff; }

/* ---------- 21) الفوتر ---------- */
.site-footer {
	position: relative;
	padding-block: clamp(52px, 6vw, 78px) 0;
	background: var(--brand-900);
	color: rgba(255, 255, 255, .72);
	overflow: hidden;
	isolation: isolate;
}

/* يُسحب لأعلى بنفس مسافة التداخل المعرّفة في شريط الدعوة. */
.site-footer.has-cta {
	--cta-overlap: clamp(70px, 8vw, 120px);
	margin-block-start: calc(var(--cta-overlap) * -1);
	padding-block-start: calc(var(--cta-overlap) + clamp(48px, 5vw, 76px));
}

.site-footer::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(61, 220, 151, .45), transparent);
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(52% 60% at 82% 0%, rgba(16, 129, 74, .26), transparent 66%);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.25fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block-end: 44px;
}

.footer-brand img { max-height: 62px; width: auto; margin-block-end: 20px; }
.footer-brand p { color: rgba(255, 255, 255, .66); font-size: .94rem; max-width: 42ch; }

/* على الشاشات الكبيرة يتصرّف details كعمود عادي: العنوان غير قابل للضغط. */
.footer-col > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	cursor: default;
}

.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col-arrow { display: none; }

.footer-col h4 {
	position: relative;
	color: #fff;
	font-size: 1rem;
	margin-block-end: 20px;
	padding-block-end: 12px;
}

.footer-col h4::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.footer-col ul { display: grid; gap: 11px; }

.footer-col a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .7);
	font-size: .94rem;
}

.footer-col a .ico { opacity: 0; transform: translateX(6px); transition: opacity var(--t), transform var(--t); }
.footer-col a:hover { color: var(--accent); }
.footer-col a:hover .ico { opacity: 1; transform: none; }

/* عمود التواصل */
.footer-contact { display: grid; gap: 14px; }

.footer-contact li { display: flex; align-items: center; gap: 11px; }
.footer-contact .ico { flex: none; color: var(--accent); }
.footer-contact a { color: rgba(255, 255, 255, .82); font-size: .94rem; font-weight: 500; word-break: break-word; }
.footer-contact a:hover { color: var(--accent); }

.footer-social { display: flex; gap: 10px; margin-block-start: 22px; }

.footer-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	color: rgba(255, 255, 255, .8);
	transition: background var(--t), border-color var(--t), color var(--t);
}

.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--brand-900); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 22px;
	border-block-start: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .55);
	font-size: .88rem;
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom a { color: rgba(255, 255, 255, .68); }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- 22) شاشة التحميل ---------- */
/* مخفية افتراضياً: بدون جافاسكربت لا تظهر أصلاً فلا تحجب المحتوى. */
.preloader { display: none; }

.js .preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--brand-900);
	transition: opacity .5s var(--ease), visibility .5s var(--ease);
}

.js .preloader::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(52% 46% at 50% 44%, rgba(61, 220, 151, .16), transparent 70%);
}

.js .preloader.is-done { opacity: 0; visibility: hidden; }

.preloader-inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 26px;
	padding-inline: 24px;
}

.preloader-logo {
	max-width: min(260px, 62vw);
	height: auto;
	animation: namaa-breathe 2.2s var(--ease) infinite;
}

.preloader-word {
	color: #fff;
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.01em;
	animation: namaa-breathe 2.2s var(--ease) infinite;
}

.preloader-bar {
	position: relative;
	display: block;
	width: min(220px, 54vw);
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}

.preloader-bar i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: -40%;
	width: 40%;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	animation: namaa-sweep 1.15s linear infinite;
}

@keyframes namaa-breathe {
	0%, 100% { opacity: .82; transform: scale(.985); }
	50%      { opacity: 1;   transform: scale(1); }
}

@keyframes namaa-sweep {
	to { inset-inline-start: 100%; }
}

/* ---------- 23) الأزرار العائمة ---------- */
/* واتساب على جانب البدء (يمين في RTL) والعودة للأعلى على الجانب المقابل — بلا تصادم. */
.fab-wa {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 0;
	color: #fff;
}

.fab-wa-icon {
	position: relative;
	z-index: 1; /* فوق التسمية لتنزلق من خلفه. */
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(140deg, #25d366 0%, #10a53f 100%);
	box-shadow: 0 8px 24px rgba(16, 165, 63, .42);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
	flex: none;
}

.fab-wa:hover .fab-wa-icon {
	transform: scale(1.06);
	box-shadow: 0 12px 32px rgba(16, 165, 63, .55);
}

.fab-wa-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25d366;
	animation: namaa-ping 2.4s var(--ease) infinite;
	pointer-events: none;
}

@keyframes namaa-ping {
	0%       { transform: scale(1); opacity: .65; }
	70%,100% { transform: scale(1.6); opacity: 0; }
}

/* التسمية تنزلق من خلف الزر عند المرور. */
.fab-wa-label {
	max-width: 0;
	padding: 11px 0;
	/* دائري من الجهتين: لا يعتمد على اتجاه الصفحة. */
	border-radius: var(--radius-full);
	margin-inline-end: -18px;
	background: var(--brand-900);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	overflow: hidden;
	transform: translateX(14px);
	transition: max-width .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease), transform .4s var(--ease);
}

.fab-wa:hover .fab-wa-label,
.fab-wa:focus-visible .fab-wa-label {
	max-width: 220px;
	padding-inline: 22px 30px;
	opacity: 1;
	transform: none;
}

.to-top {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.9);
	transition: opacity .35s var(--ease), visibility .35s var(--ease), transform .35s var(--ease), background var(--t);
}

.to-top > .ico { grid-area: 1 / 1; transition: transform .3s var(--ease); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-600); }
.to-top:hover > .ico { transform: translateY(-2px); }

/* حلقة تقدّم القراءة حول الزر. */
.to-top-ring {
	grid-area: 1 / 1;
	width: 46px;
	height: 46px;
	transform: rotate(-90deg);
	overflow: visible;
}

.to-top-ring circle {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.to-top-track { stroke: rgba(255, 255, 255, .22); }
.to-top-progress { stroke: var(--accent); transition: stroke-dashoffset .1s linear; }

/* ---------- 24) المؤشر المتحرك ---------- */
/* لا يوجد إطلاقاً إلا على أجهزة الفأرة الدقيقة، ولا يُخفى مؤشر النظام قبل ذلك. */
.cursor-dot,
.cursor-ring { display: none; }

@media (hover: hover) and (pointer: fine) {
	/*
	 * إحداثيات فيزيائية عمداً (top/left) لا منطقية: قيم clientX تُقاس دائماً
	 * من الحافة اليسرى للنافذة، فاستخدام inset-inline-start يقلب التتبّع في RTL.
	 */
	.js.has-cursor .cursor-dot,
	.js.has-cursor .cursor-ring {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		display: block;
		border-radius: 50%;
		pointer-events: none;
		will-change: transform;
	}

	.js.has-cursor .cursor-dot {
		width: 7px;
		height: 7px;
		margin: -3.5px 0 0 -3.5px;
		background: var(--accent);
		transition: opacity .2s var(--ease), transform .12s var(--ease);
	}

	.js.has-cursor .cursor-ring {
		width: 34px;
		height: 34px;
		margin: -17px 0 0 -17px;
		border: 1.5px solid var(--brand-500);
		opacity: .55;
		transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease),
			opacity .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
	}

	/* فوق عنصر تفاعلي: تتسع الحلقة ويتوارى النقطة. */
	.js.has-cursor.cursor-active .cursor-ring {
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
		border-color: var(--accent);
		background: rgba(61, 220, 151, .12);
		opacity: .9;
	}

	.js.has-cursor.cursor-active .cursor-dot { opacity: 0; }
	.js.has-cursor.cursor-down .cursor-ring { transform-origin: center; opacity: 1; }

	/* فوق الأقسام الداكنة تُقلب الألوان لتبقى مرئية. */
	.js.has-cursor.cursor-on-dark .cursor-ring { border-color: var(--accent-soft); }

	.js.has-cursor,
	.js.has-cursor a,
	.js.has-cursor button,
	.js.has-cursor summary,
	.js.has-cursor [role="button"] { cursor: none; }

	/* حقول الإدخال تحتفظ بمؤشر النظام: الكتابة تحتاج مؤشر النص. */
	.js.has-cursor input,
	.js.has-cursor textarea,
	.js.has-cursor select { cursor: auto; }
}

/* ---------- 25) أدوات ---------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.empty-note {
	padding: 40px;
	border: 1px dashed var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--muted);
	text-align: center;
}

/* ظهور تدريجي عند التمرير.
   الإخفاء مشروط بوجود جافاسكربت: بدونها يظهر المحتوى كاملاً بدل أن يختفي للأبد. */
.js .reveal {
	opacity: 0;
	transform: translateY(var(--rise)) scale(var(--rise-scale));
	transition:
		opacity var(--rise-dur) var(--ease),
		transform var(--rise-dur) var(--ease);
	will-change: transform, opacity;
}

.js .reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ---------- دخول الهيرو عند فتح الصفحة ---------- */
.js .hero-copy > *,
.js .hero-visual { opacity: 0; }

.js.is-ready .hero-copy > *,
.js.is-ready .hero-visual {
	animation: namaa-enter var(--rise-dur) var(--ease) both;
}

.js.is-ready .hero-copy > *:nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
.js.is-ready .hero-copy > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.js.is-ready .hero-copy > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.js.is-ready .hero-copy > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.js.is-ready .hero-visual { animation-delay: calc(var(--stagger) * 2); animation-name: namaa-enter-visual; }

@keyframes namaa-enter {
	from { opacity: 0; transform: translateY(var(--rise)) scale(var(--rise-scale)); }
	to   { opacity: 1; transform: none; }
}

@keyframes namaa-enter-visual {
	from { opacity: 0; transform: translateY(calc(var(--rise) * .8)) scale(.94); }
	to   { opacity: 1; transform: none; }
}

/* رقاقة الهيرو تدخل بعد الصورة بارتداد خفيف. */
.js.is-ready .hero-chip {
	animation: namaa-pop .7s var(--ease-back) both;
	animation-delay: calc(var(--stagger) * 5);
}

@keyframes namaa-pop {
	from { opacity: 0; transform: translateY(16px) scale(.86); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 26) الاستجابة ---------- */
@media (max-width: 1080px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.metrics { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
	.site-nav, .header-cta { display: none; }
	.nav-toggle { display: grid; }

	/* الشعار كان يبتلع نصف عرض الشاشة على الجوال. */
	:root { --header-h: 66px; }
	.brand img { max-height: 38px; }
	.header-inner { gap: 12px; }

	.hero-grid, .split, .contact-layout, .entry-layout { grid-template-columns: 1fr; }
	.split--flip .split-media { order: -1; }
	.hero-visual { max-width: 560px; }
	.hero-chip { inset-inline-start: 12px; }

	.grid--3, .steps--3, .quotes { grid-template-columns: repeat(2, 1fr); }
	.trust-list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.trust-item { justify-content: flex-start; }

	.aside-box { position: static; }
}

@media (max-width: 680px) {
	:root { --gap: 16px; }

	/* على الجوال: واتساب أصغر، والعودة للأعلى فوقه لا بجانبه. */
	.fab-wa { inset-block-end: 18px; inset-inline-start: 18px; }
	.fab-wa-icon { width: 50px; height: 50px; }
	.fab-wa-label { display: none; }
	.to-top { inset-block-end: 18px; inset-inline-end: 18px; width: 42px; height: 42px; }
	.to-top-ring { width: 42px; height: 42px; }

	.grid--2, .grid--3, .grid--4, .steps--3, .quotes, .form-grid { grid-template-columns: 1fr; }

	/* شريط الثقة: عنصران في الصف — نصوصه قصيرة ويقرأ جيداً بنصف العرض. */
	.trust-list { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; padding-block: 20px; }

	.trust-item {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		padding-inline: 4px;
		font-size: .84rem;
		line-height: 1.5;
		text-align: center;
	}

	/* الأرقام تبقى بطاقتين في الصف: محتواها قصير ويقرأ جيداً بنصف العرض. */
	.metrics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.metric { padding: 22px 14px; }
	.metric b { font-size: 1.9rem; }
	.metric i { font-size: .86rem; }
	.metric > span { font-size: .82rem; margin-block-start: 7px; }

	.card, .step, .quote, .contact-card, .aside-box { padding: 24px; }

	/* الاختصار أعلاه يمسح مساحة الأيقونة، فتُعاد هنا. */
	.card--media { padding-block-start: 86px; }
	.hero-actions .btn, .cta-inner .btn { width: 100%; }
	.cta-inner { flex-direction: column; align-items: flex-start; }
	.cta-inner > div:last-child { width: 100%; }

	.timeline .step { padding-inline-start: 60px; }
	.timeline .step::before { width: 42px; height: 42px; font-size: .84rem; }
	.timeline .step::after { inset-inline-start: 20px; inset-block-start: 68px; height: calc(100% - 68px + 26px); }

	/* ---------- أكورديون الفوتر على الجوال ---------- */
	.footer-grid { grid-template-columns: 1fr; gap: 0; }
	.footer-brand { margin-block-end: 28px; }

	.footer-col {
		border-block-start: 1px solid rgba(255, 255, 255, .12);
	}

	.footer-col:last-of-type { border-block-end: 1px solid rgba(255, 255, 255, .12); }

	.footer-col > summary {
		padding-block: 16px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.footer-col h4 {
		margin-block-end: 0;
		padding-block-end: 0;
	}

	/* الخط النعناعي تحت العنوان زخرفة عمود، لا معنى له في صفّ مطوي. */
	.footer-col h4::after { display: none; }

	.footer-col-arrow {
		display: grid;
		place-items: center;
		color: var(--accent);
		transition: transform var(--t);
	}

	.footer-col[open] .footer-col-arrow { transform: rotate(180deg); }

	.footer-col > ul { padding-block: 4px 20px; }

	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- 27) تفضيلات الحركة والطباعة ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.js .reveal { opacity: 1; transform: none; }
	.marquee { animation: none; }

	/* الحركات الزخرفية تُلغى تماماً، لا تُسرَّع فقط. */
	.js .preloader { display: none; }
	.btn::after,
	.fab-wa-ping { display: none; }
	.btn:hover { --mx: 0px; --my: 0px; }
	.preloader-logo, .preloader-word { animation: none; }

	/* دخول الهيرو: يظهر المحتوى فوراً بلا أي حركة. */
	.js .hero-copy > *,
	.js .hero-visual { opacity: 1; animation: none !important; }
	.js.is-ready .hero-chip { animation: none !important; }

	.card:hover { transform: none; }
	.card:hover .card-icon { transform: none; }
	.btn:hover .ico,
	.link-more:hover .ico { transform: none; }
}

@media print {
	.site-header, .nav-drawer, .to-top, .fab-wa, .preloader,
	.cursor-dot, .cursor-ring, .cta-band, .site-footer { display: none !important; }
	.hero, .page-hero, .section--dark { background: #fff; color: #000; }
	.hero h1, .page-hero h1 { color: #000; }
}