/* =========================================================
   صفحة «خدماتنا الرقمية» — قالب template-services.php
   لغة بصرية: هيرو كحلي سينمائي بمحاكاة شاشة التطبيق، ثم أقسام فاتحة ببطاقات هادئة.
   كل الأنماط مقيّدة بـ body.page-services-a فلا تتسرّب إلى أي صفحة أخرى.
   ========================================================= */

body.page-services-a {
	--svc-ink:     #08111f;
	--svc-ink-2:   rgba(8, 17, 31, .62);
	--svc-ink-3:   rgba(8, 17, 31, .45);
	--svc-line:    rgba(8, 17, 31, .10);
	--svc-paper:   #f3f1ec;
	--svc-navy:    #002d62;
	--svc-navy-900:#001631;
	--svc-teal:    #00a5b5;
	--svc-teal-d:  #007f8c;
	--svc-r:       18px;
}

/* =========================================================
   1) الهيرو
   ========================================================= */
body.page-services-a .svc-hero {
	position: relative;
	overflow: hidden;
	background: var(--svc-navy-900);
	color: #fff;
	padding-top: calc(var(--header, 88px) + clamp(44px, 6vw, 88px));
	padding-bottom: clamp(56px, 7vw, 104px);
	isolation: isolate;
}
body.page-services-a .svc-hero-glow, body.page-wasel-a .svc-hero-glow{
	position: absolute;
	inset-block-start: -30%;
	inset-inline-start: -10%;
	width: 70vw;
	height: 120%;
	background: radial-gradient(closest-side, rgba(0, 165, 181, .30), rgba(0, 165, 181, 0) 72%);
	pointer-events: none;
	z-index: -1;
}
body.page-services-a .svc-hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to left, rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 78%);
	pointer-events: none;
	z-index: -1;
}
body.page-services-a .svc-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
}

body.page-services-a .svc-chip, body.page-wasel-a .svc-chip{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 12px;
	border: 1px solid rgba(127, 211, 218, .34);
	border-radius: 999px;
	background: rgba(0, 165, 181, .12);
	color: #9be2e9;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
}
body.page-services-a .svc-chip i, body.page-wasel-a .svc-chip i{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--svc-teal);
	box-shadow: 0 0 0 4px rgba(0, 165, 181, .22);
}

body.page-services-a .svc-hero h1 {
	margin: 20px 0 0;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.16;
	font-weight: 800;
	letter-spacing: -.02em;
	max-width: 14ch;
}
body.page-services-a .svc-hero-lead {
	margin: 18px 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	line-height: 1.9;
	color: rgba(255, 255, 255, .72);
}

body.page-services-a .svc-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

body.page-services-a .svc-hero-trust {
	list-style: none;
	margin: 34px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}
body.page-services-a .svc-hero-trust li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: .8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .68);
}
body.page-services-a .svc-hero-trust svg { width: 17px; height: 17px; color: var(--svc-teal); flex: none; }

/* =========================================================
   2) محاكاة شاشة التطبيق (HTML/CSS خالص — بلا صور)
   ========================================================= */
body.page-services-a .svc-hero-visual { display: grid; place-items: center; }
body.page-services-a .svc-phone {
	position: relative;
	width: min(300px, 78vw);
	aspect-ratio: 300 / 540;
	padding: 12px;
	border-radius: 42px;
	background: linear-gradient(160deg, #16324f, #0a1b30 60%);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow:
		0 50px 90px -40px rgba(0, 0, 0, .8),
		inset 0 1px 0 rgba(255, 255, 255, .14);
	transform: rotate(-2.5deg);
}
body.page-services-a .svc-phone::before {
	content: "";
	position: absolute;
	top: 14px;
	inset-inline: 0;
	margin-inline: auto;
	width: 92px;
	height: 20px;
	border-radius: 0 0 14px 14px;
	background: #0a1b30;
	z-index: 2;
}
body.page-services-a .svc-phone-screen {
	position: relative;
	height: 100%;
	padding: 34px 16px 18px;
	border-radius: 32px;
	background: linear-gradient(180deg, #fdfdfb, #f2f4f5);
	color: var(--svc-ink);
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}

body.page-services-a .svc-app-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 4px;
}
body.page-services-a .svc-app-brand { font-size: 1rem; font-weight: 800; color: var(--svc-navy); letter-spacing: -.01em; }
body.page-services-a .svc-app-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 165, 181, .12);
	color: var(--svc-teal-d);
	font-size: .625rem;
	font-weight: 700;
}
body.page-services-a .svc-app-live i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--svc-teal);
	animation: svcPulse 1.8s ease-in-out infinite;
}
@keyframes svcPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

body.page-services-a .svc-app-card {
	padding: 14px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(8, 17, 31, .08);
	box-shadow: 0 16px 30px -22px rgba(8, 17, 31, .5);
}
body.page-services-a .svc-app-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 14px;
}
body.page-services-a .svc-app-id { font-size: .75rem; font-weight: 700; color: var(--svc-ink); }
body.page-services-a .svc-app-id bdi { font-family: var(--font-en); direction: ltr; }
body.page-services-a .svc-app-state {
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0, 45, 98, .08);
	color: var(--svc-navy);
	font-size: .625rem;
	font-weight: 700;
}

body.page-services-a .svc-app-track {
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(8, 17, 31, .09);
	margin-bottom: 20px;
}
body.page-services-a .svc-app-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 64%;
	border-radius: 999px;
	background: linear-gradient(to left, var(--svc-navy), var(--svc-teal));
	animation: svcFill 2.2s cubic-bezier(.2, .8, .2, 1) .35s both;
}
html[dir="ltr"] body.page-services-a .svc-app-fill { background: linear-gradient(to right, var(--svc-navy), var(--svc-teal)); }
@keyframes svcFill { from { width: 10%; } to { width: 64%; } }

body.page-services-a .svc-app-truck {
	position: absolute;
	inset-inline-end: -14px;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(8, 17, 31, .12);
	color: var(--svc-navy);
	box-shadow: 0 6px 12px -6px rgba(8, 17, 31, .5);
}
body.page-services-a .svc-app-truck svg { width: 16px; height: 16px; }
html[dir="rtl"] body.page-services-a .svc-app-truck svg { transform: scaleX(-1); }

body.page-services-a .svc-app-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	text-align: center;
}
body.page-services-a .svc-app-steps li {
	position: relative;
	padding-top: 14px;
	font-size: .5625rem;
	font-weight: 600;
	color: var(--svc-ink-3);
}
body.page-services-a .svc-app-steps li::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	margin-inline: auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(8, 17, 31, .16);
}
body.page-services-a .svc-app-steps .is-done { color: var(--svc-ink-2); }
body.page-services-a .svc-app-steps .is-done::before { background: var(--svc-navy); }
body.page-services-a .svc-app-steps .is-now { color: var(--svc-teal-d); font-weight: 700; }
body.page-services-a .svc-app-steps .is-now::before {
	background: var(--svc-teal);
	box-shadow: 0 0 0 4px rgba(0, 165, 181, .18);
}

body.page-services-a .svc-app-rows { display: grid; gap: 8px; }
body.page-services-a .svc-app-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(8, 17, 31, .07);
}
body.page-services-a .svc-app-row-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 9px;
	background: rgba(0, 45, 98, .07);
	color: var(--svc-navy);
}
body.page-services-a .svc-app-row-icon svg { width: 15px; height: 15px; }
body.page-services-a .svc-app-row-text { display: grid; gap: 2px; min-width: 0; }
body.page-services-a .svc-app-row-text b { font-size: .6875rem; font-weight: 700; }
body.page-services-a .svc-app-row-text em { font-style: normal; font-size: .625rem; color: var(--svc-ink-3); }
body.page-services-a .svc-app-row-text em bdi { font-family: var(--font-en); font-weight: 700; letter-spacing: .12em; color: var(--svc-teal-d); }

/* شريط التنقّل السفلي للتطبيق */
body.page-services-a .svc-app-nav {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 10px 6px 4px;
	border-top: 1px solid rgba(8, 17, 31, .08);
}
body.page-services-a .svc-app-nav span {
	display: grid;
	place-items: center;
	height: 28px;
	border-radius: 9px;
	color: rgba(8, 17, 31, .28);
}
body.page-services-a .svc-app-nav svg { width: 17px; height: 17px; }
body.page-services-a .svc-app-nav .is-on { background: rgba(0, 45, 98, .07); color: var(--svc-navy); }

/* =========================================================
   3) الأزرار (مشتركة)
   ========================================================= */
body.page-services-a .svc-btn, body.page-wasel-a .svc-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 13px 26px;
	border-radius: 10px;
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
body.page-services-a .svc-btn svg, body.page-wasel-a .svc-btn svg{ width: 19px; height: 19px; flex: none; }
body.page-services-a .svc-btn-primary, body.page-wasel-a .svc-btn-primary{
	background: var(--svc-teal);
	color: #04222a;
	box-shadow: 0 16px 30px -18px rgba(0, 165, 181, .9);
}
body.page-services-a .svc-btn-primary:hover, body.page-wasel-a .svc-btn-primary:hover{ background: #14b9c9; transform: translateY(-2px); }
body.page-services-a .svc-btn-ghost, body.page-wasel-a .svc-btn-ghost{
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .24);
	color: #fff;
}
body.page-services-a .svc-btn-ghost:hover, body.page-wasel-a .svc-btn-ghost:hover{ background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
body.page-services-a .svc-btn-light, body.page-wasel-a .svc-btn-light{ background: #fff; color: var(--svc-navy); }
body.page-services-a .svc-btn-light:hover, body.page-wasel-a .svc-btn-light:hover{ background: #eaf7f8; transform: translateY(-2px); }
body.page-services-a .svc-btn-outline, body.page-wasel-a .svc-btn-outline{
	background: transparent;
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}
body.page-services-a .svc-btn-outline:hover, body.page-wasel-a .svc-btn-outline:hover{ background: rgba(255, 255, 255, .1); transform: translateY(-2px); }

/* =========================================================
   4) البطاقتان الرئيسيتان
   ========================================================= */
body.page-services-a .svc-cards {
	background: var(--svc-paper);
	padding: clamp(56px, 7vw, 100px) 0;
	scroll-margin-top: 10px; /* الرأس الثابت مُعالَج عبر scroll-padding-top في main.css */
}
body.page-services-a .svc-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
	align-items: stretch;
}
body.page-services-a .svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(28px, 3vw, 44px);
	background: #fff;
	border: 1px solid var(--svc-line);
	border-radius: var(--svc-r);
	overflow: hidden;
	box-shadow: 0 30px 60px -44px rgba(8, 17, 31, .45);
	transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
body.page-services-a .svc-card:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 165, 181, .34);
	box-shadow: 0 36px 66px -40px rgba(8, 17, 31, .5);
}
body.page-services-a .svc-card-rule {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(to left, var(--svc-teal), var(--svc-navy));
}
body.page-services-a .svc-card-alt .svc-card-rule { background: linear-gradient(to left, #50b848, var(--svc-teal)); }

/* بطاقة «شريك» هي وجهة أزرار «طلب عرض سعر» في الموقع كله (ncc_quote_url).
   مساحة إضافية فوقها عند القدوم من مرساة، وإطار خفيف يدلّ الزائر على أنه وصل. */
body.page-services-a #shareek { scroll-margin-top: 24px; }
body.page-services-a #shareek:target {
	border-color: var(--svc-teal);
	box-shadow: 0 0 0 3px rgba(0, 165, 181, .16), 0 30px 60px -44px rgba(8, 17, 31, .45);
}

body.page-services-a .svc-card-icon {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: rgba(0, 165, 181, .10);
	color: var(--svc-teal-d);
}
body.page-services-a .svc-card-icon svg { width: 27px; height: 27px; }

/* شعار «شريك» داخل بطاقته: يحلّ محلّ مربّع الأيقونة، وبنفس ارتفاعه تقريبًا فلا يختلّ إيقاع البطاقتين */
body.page-services-a .svc-card-logo {
	display: block;
	/* البطاقة flex عمودي و align-items افتراضها stretch، فبلا align-self يتمدّد
	   صندوق الصورة إلى عرض البطاقة كله وإن بقيت الصورة في مكانها. */
	align-self: flex-start;
	width: auto;
	height: 58px;
	margin-bottom: 2px;
}

/* شعار «واصل» لوحة عمودية (الشاحنة فوق الاسم)، فعلى ارتفاع 58px يظهر اسمه
   أصغر من «شريك». يُكبَّر إلى 70px وتُسحب الهوامش سالبةً بالفارق نفسه،
   فيتساوى حجم الاسمين ويبقى العنوانان في البطاقتين على سطر واحد. */
body.page-services-a .svc-card-logo-wasel {
	height: 70px;
	margin-top: -6px;
	margin-bottom: -4px;
}

body.page-services-a .svc-card-title {
	margin: 6px 0 0;
	font-size: clamp(1.3125rem, 2vw, 1.75rem);
	line-height: 1.4;
	font-weight: 800;
	color: var(--svc-navy);
	letter-spacing: -.01em;
}
body.page-services-a .svc-card-title a { color: inherit; text-decoration: none; }
body.page-services-a .svc-card-title a:hover { color: var(--svc-teal-d); }
body.page-services-a .svc-card-text { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--svc-ink-2); }

body.page-services-a .svc-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
body.page-services-a .svc-list li {
	position: relative;
	padding-inline-start: 26px;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--svc-ink-2);
}
body.page-services-a .svc-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .34em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(0, 165, 181, .14);
}
body.page-services-a .svc-list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	top: .72em;
	width: 6px;
	height: 3px;
	border-left: 1.7px solid var(--svc-teal-d);
	border-bottom: 1.7px solid var(--svc-teal-d);
	transform: rotate(-45deg);
}

body.page-services-a .svc-card-foot {
	margin-top: auto;
	padding-top: 18px;
	display: grid;
	gap: 14px;
	justify-items: start;
}

/* ---- شارات المتاجر ---- */
body.page-services-a .svc-badges { display: flex; flex-wrap: wrap; gap: 10px; }
body.page-services-a .svc-badge {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 52px;
	padding: 9px 18px;
	border-radius: 12px;
	background: var(--svc-ink);
	color: #fff;
	text-decoration: none;
	transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
body.page-services-a .svc-badge:hover {
	background: #16233a;
	transform: translateY(-2px);
	box-shadow: 0 16px 28px -18px rgba(8, 17, 31, .8);
}
body.page-services-a .svc-badge-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: rgba(255, 255, 255, .12);
}
body.page-services-a .svc-badge-icon svg { width: 17px; height: 17px; }
body.page-services-a .svc-badge-text { display: grid; line-height: 1.25; }
body.page-services-a .svc-badge-text em { font-style: normal; font-size: .625rem; letter-spacing: .05em; opacity: .72; }
body.page-services-a .svc-badge-text b { font-size: .9375rem; font-weight: 700; }
/* عند وضع الشارة الرسمية: الصورة وحدها بلا خلفية */
body.page-services-a .svc-badge-img { padding: 0; background: none; border-radius: 0; min-height: 0; }
body.page-services-a .svc-badge-img:hover { background: none; box-shadow: none; }
body.page-services-a .svc-badge-img img { height: 52px; width: auto; max-width: 100%; display: block; }
/* احتياط لو جاء الملف بلا أبعاد: نسبة الشارات الرسمية تقارب 3.4:1 */
body.page-services-a .svc-badge-img img:not([width]) { width: 176px; object-fit: contain; }

body.page-services-a .svc-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--svc-teal-d);
	text-decoration: none;
}
body.page-services-a .svc-more i { width: 22px; height: 1px; background: currentColor; transition: width var(--ease); }
body.page-services-a .svc-more:hover i { width: 36px; }

body.page-services-a .svc-note {
	margin: 0;
	font-size: .75rem;
	letter-spacing: .03em;
	color: var(--svc-ink-3);
	font-weight: 600;
}
body.page-services-a .svc-note bdi { font-family: var(--font-en); direction: ltr; }

/* =========================================================
   5) رؤوس الأقسام
   ========================================================= */
body.page-services-a .svc-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 52px); }
body.page-services-a .svc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--svc-teal-d);
}
body.page-services-a .svc-eyebrow i { width: 20px; height: 1px; background: currentColor; display: block; }
body.page-services-a .svc-head h2 {
	margin: 14px 0 12px;
	font-size: clamp(1.625rem, 3.2vw, 2.5rem);
	line-height: 1.28;
	font-weight: 800;
	color: var(--svc-navy);
	letter-spacing: -.02em;
}
body.page-services-a .svc-head p { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--svc-ink-2); }

/* =========================================================
   6) كيف تعمل الخدمة — أربع خطوات بخط رابط
   ========================================================= */
body.page-services-a .svc-steps { background: #fff; padding: clamp(56px, 7vw, 100px) 0; }
body.page-services-a .svc-steps-grid {
	--svc-gap: clamp(16px, 2vw, 26px);
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--svc-gap);
}
body.page-services-a .svc-step { position: relative; }
/* الخط الرابط: من حافة الأيقونة حتى أيقونة الخطوة التالية */
body.page-services-a .svc-step::after {
	content: "";
	position: absolute;
	top: 25px;
	inset-inline-start: 66px;
	inset-inline-end: calc(-1 * var(--svc-gap));
	height: 2px;
	background: repeating-linear-gradient(to left, rgba(0, 45, 98, .22) 0 4px, transparent 4px 10px);
}
body.page-services-a .svc-step:last-child::after { content: none; }
body.page-services-a .svc-step-num {
	position: absolute;
	top: -7px;
	inset-inline-start: 38px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--svc-teal);
	color: #04222a;
	font-family: var(--font-en);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1;
}
body.page-services-a .svc-step-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--svc-navy);
	color: #fff;
	box-shadow: 0 16px 28px -18px rgba(0, 45, 98, .9);
}
body.page-services-a .svc-step-icon svg { width: 24px; height: 24px; }
body.page-services-a .svc-step h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 700; color: var(--svc-ink); }
body.page-services-a .svc-step p { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--svc-ink-2); }

/* =========================================================
   7) المزايا
   ========================================================= */
body.page-services-a .svc-features {
	scroll-margin-top: 10px;
	background: var(--svc-paper);
	padding: clamp(56px, 7vw, 100px) 0;
	border-top: 1px solid var(--svc-line);
}
body.page-services-a .svc-features-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}
body.page-services-a .svc-feature {
	padding: 26px 24px;
	border: 1px solid var(--svc-line);
	border-radius: 14px;
	background: #fff;
	transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
body.page-services-a .svc-feature:hover {
	border-color: rgba(0, 165, 181, .34);
	transform: translateY(-2px);
	box-shadow: 0 22px 40px -30px rgba(8, 17, 31, .5);
}
body.page-services-a .svc-feature-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 11px;
	background: rgba(0, 165, 181, .10);
	color: var(--svc-teal-d);
}
body.page-services-a .svc-feature-icon svg { width: 21px; height: 21px; }
body.page-services-a .svc-feature h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--svc-ink); line-height: 1.5; }
body.page-services-a .svc-feature p { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--svc-ink-2); }

/* =========================================================
   8) الختام
   ========================================================= */
body.page-services-a .svc-cta {
	position: relative;
	overflow: hidden;
	background: var(--svc-navy);
	color: #fff;
	padding: clamp(48px, 6vw, 84px) 0;
	isolation: isolate;
}
body.page-services-a .svc-cta-glow {
	position: absolute;
	inset-block-start: -60%;
	inset-inline-end: -10%;
	width: 60vw;
	height: 200%;
	background: radial-gradient(closest-side, rgba(0, 165, 181, .38), rgba(0, 165, 181, 0) 70%);
	pointer-events: none;
	z-index: -1;
}
body.page-services-a .svc-cta-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}
body.page-services-a .svc-cta-copy { flex: 1 1 320px; }
body.page-services-a .svc-cta h2 {
	margin: 0;
	font-size: clamp(1.375rem, 2.4vw, 2rem);
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -.01em;
}
body.page-services-a .svc-cta p { margin: 10px 0 0; font-size: .9375rem; line-height: 1.8; color: rgba(255, 255, 255, .74); max-width: 52ch; }
body.page-services-a .svc-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-inline-start: auto; }

/* =========================================================
   9) الحركة عند الظهور (تدرّج بسيط داخل الشبكات)
   ========================================================= */
body.page-services-a .svc-step.reveal,
body.page-services-a .svc-feature.reveal {
	transition-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
	body.page-services-a .svc-app-fill { animation: none; width: 64%; }
	body.page-services-a .svc-app-live i { animation: none; }
	body.page-services-a .svc-phone { transform: none; }
	body.page-services-a .svc-btn:hover,
	body.page-services-a .svc-card:hover,
	body.page-services-a .svc-feature:hover,
	body.page-services-a .svc-badge:hover { transform: none; }
}

/* =========================================================
   10) المقاسات
   ========================================================= */
@media (max-width: 1180px) {
	body.page-services-a .svc-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
	body.page-services-a .svc-step:nth-child(2n)::after { content: none; }
}
@media (max-width: 1024px) {
	body.page-services-a .svc-hero-inner   { grid-template-columns: 1fr; }
	body.page-services-a .svc-hero h1      { max-width: none; }
	body.page-services-a .svc-hero-visual  { order: -1; }
	/* على الشاشات الصغيرة يتمدد إطار الجوال مع محتواه بدل قصّه */
	body.page-services-a .svc-phone        { width: min(288px, 76vw); aspect-ratio: auto; transform: none; }
	body.page-services-a .svc-phone-screen { height: auto; min-height: 430px; }
	body.page-services-a .svc-cards-grid   { grid-template-columns: 1fr; }
	body.page-services-a .svc-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-services-a .svc-cta-actions  { margin-inline-start: 0; }
}
@media (max-width: 640px) {
	body.page-services-a .svc-features-grid { grid-template-columns: 1fr; }
	body.page-services-a .svc-steps-grid    { grid-template-columns: 1fr; row-gap: 26px; }
	body.page-services-a .svc-step::after   { content: none; }
	body.page-services-a .svc-hero-actions .svc-btn,
	body.page-services-a .svc-cta-actions .svc-btn { flex: 1 1 100%; }
	body.page-services-a .svc-badge         { flex: 1 1 100%; justify-content: center; }
	body.page-services-a .svc-badge-img     { flex: 0 0 auto; }
	body.page-services-a .svc-card-foot     { justify-items: stretch; }
}

/* =========================================================
   11) صفحة «التسجيل في خدمة واصل» — قالب template-wasel-signup.php
   تستخدم نفس رموز الصفحة السابقة (الأزرار والشرائح) تحت body.page-wasel-a.
   ========================================================= */
body.page-wasel-a {
	--svc-ink:     #08111f;
	--svc-ink-2:   rgba(8, 17, 31, .62);
	--svc-ink-3:   rgba(8, 17, 31, .45);
	--svc-line:    rgba(8, 17, 31, .10);
	--svc-paper:   #f3f1ec;
	--svc-navy:    #002d62;
	--svc-navy-900:#001631;
	--svc-teal:    #00a5b5;
	--svc-teal-d:  #007f8c;
}

/* ---- هيرو مختصر ---- */
body.page-wasel-a .wf-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--svc-navy-900);
	color: #fff;
	padding-top: calc(var(--header, 88px) + clamp(36px, 5vw, 64px));
	padding-bottom: clamp(36px, 5vw, 64px);
}
body.page-wasel-a .wf-hero h1 {
	margin: 18px 0 0;
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.02em;
}
body.page-wasel-a .wf-hero p {
	margin: 14px 0 0;
	max-width: 62ch;
	font-size: 1rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, .72);
}

/* ---- التخطيط ---- */
body.page-wasel-a .wf-main {
	background: var(--svc-paper);
	padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
	scroll-margin-top: 10px;
}
body.page-wasel-a .wf-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
	align-items: start;
}
body.page-wasel-a .wf-panel {
	padding: clamp(24px, 3vw, 40px);
	background: #fff;
	border: 1px solid var(--svc-line);
	border-radius: 18px;
	box-shadow: 0 30px 60px -46px rgba(8, 17, 31, .45);
}

/* ---- النموذج ---- */
body.page-wasel-a .wf-set { margin: 0 0 26px; padding: 0; border: 0; }
body.page-wasel-a .wf-set:last-of-type { margin-bottom: 18px; }
body.page-wasel-a .wf-set legend {
	padding: 0 0 14px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--svc-teal-d);
}
body.page-wasel-a .wf-rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
body.page-wasel-a .wf-field { margin: 0; display: grid; gap: 7px; }
body.page-wasel-a .wf-wide { grid-column: 1 / -1; }
body.page-wasel-a .wf-field label {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--svc-ink);
}
body.page-wasel-a .wf-field label b { color: var(--svc-teal-d); margin-inline-start: 3px; }
body.page-wasel-a .wf-field input,
body.page-wasel-a .wf-field select,
body.page-wasel-a .wf-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid rgba(8, 17, 31, .16);
	border-radius: 10px;
	background: #fdfdfc;
	color: var(--svc-ink);
	font: inherit;
	font-size: .9375rem;
	transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
body.page-wasel-a .wf-field textarea { min-height: 108px; resize: vertical; line-height: 1.8; }
body.page-wasel-a .wf-field select {
	appearance: none;
	cursor: pointer;
	padding-inline-end: 40px;
	background-repeat: no-repeat;
	background-size: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002d62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[dir="rtl"] body.page-wasel-a .wf-field select { background-position: left 14px center; }
html[dir="ltr"] body.page-wasel-a .wf-field select { background-position: right 14px center; }
body.page-wasel-a .wf-field input::placeholder { color: rgba(8, 17, 31, .32); }
body.page-wasel-a .wf-field input:focus,
body.page-wasel-a .wf-field select:focus,
body.page-wasel-a .wf-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--svc-teal);
	box-shadow: 0 0 0 3px rgba(0, 165, 181, .16);
}
body.page-wasel-a .has-error input,
body.page-wasel-a .has-error select,
body.page-wasel-a .has-error textarea { border-color: #d1483c; background: #fff7f6; }
body.page-wasel-a .wf-error { font-size: .75rem; font-weight: 600; color: #c0392f; }

body.page-wasel-a .wf-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

body.page-wasel-a .wf-consent { margin: 0 0 22px; }
body.page-wasel-a .wf-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--svc-ink-2);
	cursor: pointer;
}
body.page-wasel-a .wf-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--svc-teal-d); flex: none; }
body.page-wasel-a .wf-consent.has-error label { color: #c0392f; }
body.page-wasel-a .wf-consent a { color: var(--svc-teal-d); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }

body.page-wasel-a .wf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
body.page-wasel-a .wf-actions button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
body.page-wasel-a .wf-required { font-size: .75rem; color: var(--svc-ink-3); font-weight: 600; }
body.page-wasel-a .wf-required b { color: var(--svc-teal-d); }

body.page-wasel-a .wf-alert {
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: 10px;
	border: 1px solid rgba(209, 72, 60, .3);
	background: #fff7f6;
	color: #a5322a;
	font-size: .875rem;
	font-weight: 600;
}

/* ---- شاشة النجاح ---- */
body.page-wasel-a .wf-done { text-align: center; padding: clamp(18px, 3vw, 34px) 0; }
body.page-wasel-a .wf-done-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: rgba(0, 165, 181, .12);
	color: var(--svc-teal-d);
}
body.page-wasel-a .wf-done-icon svg { width: 30px; height: 30px; }
body.page-wasel-a .wf-done h2 { margin: 0 0 10px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; color: var(--svc-navy); }
body.page-wasel-a .wf-done p { margin: 0 auto 24px; max-width: 46ch; font-size: 1rem; line-height: 1.9; color: var(--svc-ink-2); }

/* ---- العمود الجانبي ---- */
body.page-wasel-a .wf-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--header, 88px) + 16px); }
body.page-wasel-a .wf-card {
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--svc-line);
	border-radius: 16px;
}
body.page-wasel-a .wf-card h2 { margin: 0 0 14px; font-size: 1.0625rem; font-weight: 800; color: var(--svc-navy); }
body.page-wasel-a .wf-card p { margin: 0 0 14px; font-size: .875rem; line-height: 1.8; color: var(--svc-ink-2); }

body.page-wasel-a .wf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: wf; }
body.page-wasel-a .wf-steps li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	align-items: start;
	font-size: .875rem;
	line-height: 1.75;
	color: var(--svc-ink-2);
}
body.page-wasel-a .wf-steps li span {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0, 45, 98, .08);
	color: var(--svc-navy);
	font-family: var(--font-en);
	font-size: .75rem;
	font-weight: 800;
}

body.page-wasel-a .wf-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.page-wasel-a .wf-contact a {
	display: block;
	padding: 11px 14px;
	border: 1px solid var(--svc-line);
	border-radius: 10px;
	color: var(--svc-navy);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--ease), background var(--ease);
}
body.page-wasel-a .wf-contact a:hover { border-color: rgba(0, 165, 181, .4); background: #fbfdfd; }
body.page-wasel-a .wf-contact bdi { font-family: var(--font-en); direction: ltr; }

@media (max-width: 1024px) {
	body.page-wasel-a .wf-grid  { grid-template-columns: 1fr; }
	body.page-wasel-a .wf-aside { position: static; }
}
@media (max-width: 640px) {
	body.page-wasel-a .wf-rows { grid-template-columns: 1fr; }
	body.page-wasel-a .wf-actions button { flex: 1 1 100%; justify-content: center; }
}

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

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

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

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

html[dir="rtl"] body.page-services-a .svc-app-row-text em bdi:not([dir="ltr"]),
html[dir="rtl"] body.page-services-a .svc-chip:not([dir="ltr"]),
html[dir="rtl"] body.page-services-a .svc-eyebrow:not([dir="ltr"]),
html[dir="rtl"] body.page-wasel-a .svc-chip:not([dir="ltr"]),
html[dir="rtl"] body.page-wasel-a .wf-set legend:not([dir="ltr"]) {
	letter-spacing: normal;
}