/* ==========================================================================
   تصاميم ريان — Riyan Designs
   مبني على دليل الهوية: Alan Sans · الكحلي الرسمي + خمسة ألوان مسطحة
   قاعدة 60/30/10 · بلا تدرجات · بلا ظلال · لغة واحدة لكل سطر
   ========================================================================== */

@font-face {
	font-family: "Alan Sans";
	src: url("../fonts/AlanSans-Variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #111625;
	--isa: #F5F0EB;
	--sap: #2341A0;
	--lil: #B9A5FF;
	--for: #FFC800;
	--coq: #F53700;
	--muted: #5A6275;
	--dim: rgba(245, 240, 235, .78);
	--line: rgba(17, 22, 37, .14);
	--line-s: rgba(17, 22, 37, .32);
	--line-i: rgba(245, 240, 235, .18);

	--font: "Alan Sans", "Segoe UI", Tahoma, system-ui, sans-serif;
	--wrap: 1240px;
	--gut: clamp(16px, 4vw, 32px);
	--head-h: 76px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--focus: var(--sap);
}

/* --------------------------------------------------------------------------
   الأساس
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink);
	background: var(--isa);
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }
mark {
	background: var(--for);
	color: var(--ink);
	padding: 0 .14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--for); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.muted { color: var(--muted); }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sr, .hp {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
	position: fixed; top: 8px; inset-inline-start: 8px; z-index: 999;
	background: var(--for); color: var(--ink); padding: 10px 16px; font-weight: 700;
	transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* التسميات اللاتينية: أحرف كبيرة + تباعد 16% — لا تُستخدم للعربية أبداً */
.lbl {
	font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
	direction: ltr; unicode-bidi: isolate; line-height: 1.3; display: inline-block; text-align: right;
}
.hdl { direction: ltr; unicode-bidi: isolate; letter-spacing: .04em; }
.k-lil { color: var(--lil); }
.k-sap { color: var(--sap); }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* سلاسل الألوان: --c اللون، --on لون النص فوقه */
.s-ink { --c: var(--ink); --on: var(--isa); }
.s-isa { --c: var(--isa); --on: var(--sap); }
.s-sap { --c: var(--sap); --on: var(--isa); }
.s-lil { --c: var(--lil); --on: var(--ink); }
.s-for { --c: var(--for); --on: var(--ink); }
.s-coq { --c: var(--coq); --on: var(--isa); }

/* --------------------------------------------------------------------------
   الأزرار
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 22px; min-height: 50px;
	font-size: 17px; font-weight: 700; line-height: 1.2;
	border: 1.5px solid transparent; background: none;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
	white-space: nowrap;
}
.btn .ico-arrow { transition: transform .25s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(-4px); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 42px; padding: 9px 16px; font-size: 16px; }
.btn-lg { min-height: 58px; padding: 16px 28px; font-size: 18px; }
.btn-block { width: 100%; }
.btn-cta { background: var(--coq); color: var(--isa); }
.btn-cta:hover { background: var(--ink); color: var(--isa); }
.sec-ink .btn-cta:hover, .hero .btn-cta:hover, .cta-band .btn-cta:hover, .site-header .btn-cta:hover, .nf .btn-cta:hover, .pkg-feat .btn-cta:hover, .nav .btn-cta:hover { background: var(--isa); color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--isa); }
.btn-dark:hover { background: var(--sap); }
.btn-ghost { border-color: rgba(245, 240, 235, .45); color: var(--isa); }
.btn-ghost:hover { border-color: var(--isa); background: var(--isa); color: var(--ink); }
.btn-ghost-dark { border-color: var(--line-s); color: var(--ink); }
.btn-ghost-dark:hover { border-color: var(--ink); background: var(--ink); color: var(--isa); }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sap);
	border-bottom: 1.5px solid transparent; transition: border-color .2s, gap .2s;
}
.link-arrow:hover { border-color: currentColor; gap: 12px; }

/* --------------------------------------------------------------------------
   الشريط العلوي + الترويسة
   -------------------------------------------------------------------------- */
.topbar { background: var(--for); color: var(--ink); font-size: 15px; font-weight: 500; }
.topbar-in { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.topbar a { flex: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.topbar a:hover { text-decoration-thickness: 2px; }
.dot-new { width: 9px; height: 9px; background: var(--coq); border-radius: 50%; flex: none; animation: ping 1.8s infinite; }
.lbl-new { font-weight: 700; }
.topbar-x { background: none; border: 0; padding: 6px; display: inline-flex; }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ink); color: var(--isa);
	border-bottom: 1px solid var(--line-i);
	--focus: var(--for);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.header-in { display: flex; align-items: center; gap: 24px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { display: block; width: 44px; color: currentColor; }
.brand-img { width: 44px; height: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 18px; }
.brand-sub { color: var(--lil); font-size: 10px; margin-top: 3px; }

.nav { margin-inline-start: auto; }
.nav .menu { display: flex; gap: 4px; }
.nav .menu a {
	position: relative; display: block; padding: 8px 14px; font-weight: 500; font-size: 16px; color: var(--dim);
	transition: color .2s;
}
.nav .menu a::after {
	content: ""; position: absolute; inset-inline: 14px; bottom: 2px; height: 2px; background: var(--coq);
	transform: scaleX(0); transform-origin: right; transition: transform .25s var(--ease);
}
.nav .menu a:hover, .nav .current-menu-item > a:not([href*="#"]) { color: var(--isa); }
.nav .menu a:hover::after, .nav .current-menu-item > a:not([href*="#"])::after { transform: scaleX(1); }
.nav-cta-m { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--dim); white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lil); }
.is-online .status-dot { background: var(--for); animation: ping 1.8s infinite; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line-i); width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle .ico { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   الواجهة
   -------------------------------------------------------------------------- */
.hero { background: var(--ink); color: var(--isa); overflow: hidden; --focus: var(--for); }
.hero-grid {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
	padding-block: clamp(56px, 8vw, 112px);
}
.hero-h { font-size: clamp(40px, 6.2vw, 76px); font-weight: 800; line-height: 1.12; margin-top: 18px; text-wrap: balance; }
.hero-rot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 22px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; }
.rot { position: relative; display: inline-block; color: var(--lil); padding-bottom: 4px; }
.rot::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--coq); }
.rot.is-swap { animation: rotIn .5s var(--ease); }
.hero-lead { margin-top: 20px; max-width: 580px; font-size: 19px; color: var(--dim); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 15px; color: var(--dim); }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .ico { color: var(--lil); }

.hero-art, .play-wrap { position: relative; }
.play-wrap::before {
	content: ""; position: absolute; width: 46%; aspect-ratio: 1; background: var(--sap);
	inset-inline-end: -22px; bottom: -22px; z-index: 0;
}
.play-wrap::after {
	content: ""; position: absolute; width: 18%; aspect-ratio: 1; background: var(--for);
	inset-inline-start: -14px; top: -14px; z-index: 0;
}
.play {
	position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 1; border: 1px solid var(--line-i);
	background: var(--bg); color: var(--fg);
	transition: background-color .45s var(--ease), color .45s var(--ease);
	--focus: var(--for);
}
.play-mark { display: block; width: 52%; transition: transform .45s var(--ease); }
.play:hover .play-mark { transform: scale(1.03) rotate(-1.5deg); }
.play.is-bump .play-mark { animation: bump .45s var(--ease); }
.play-tag { position: absolute; top: 18px; inset-inline-start: 18px; font-size: 14px; font-weight: 600; opacity: .9; }
.play-ratio { position: absolute; bottom: 18px; inset-inline-end: 18px; font-size: 12px; opacity: .85; }
.play-cap { position: relative; z-index: 1; margin-top: 40px; font-size: 15px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }

/* الشريط المتحرك */
.marquee { background: var(--for); color: var(--ink); overflow: hidden; border-block: 1px solid var(--ink); }
.marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; padding-block: 16px; animation: marquee 48s linear infinite; }
.marquee span { font-size: 20px; font-weight: 600; white-space: nowrap; }
.marquee i { width: 8px; height: 8px; background: var(--ink); flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   الأقسام
   -------------------------------------------------------------------------- */
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec-tight { padding-block: clamp(48px, 6vw, 80px); }
.sec-top0 { padding-top: 0; }
.sec-paper { background: var(--isa); color: var(--ink); }
.sec-ink { background: var(--ink); color: var(--isa); --focus: var(--for); }
.sec-sap { background: var(--sap); color: var(--isa); --focus: var(--for); }
.sec-sap .lbl { color: var(--lil); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sec-h { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; margin-top: 12px; text-wrap: balance; }
.sec-h-sm { font-size: clamp(24px, 3vw, 32px); margin-bottom: 28px; }
.sec-p { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 640px; }
.sec-ink .sec-p, .sec-sap .sec-p { color: var(--dim); }
.sec-more { margin-top: 36px; }

/* بطاقات الخدمات */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
	position: relative; display: flex; flex-direction: column; padding: 28px;
	background: var(--isa); border: 1.5px solid var(--line);
	border-top: 6px solid var(--c);
	transition: border-color .25s, transform .3s var(--ease);
}
.svc-card:hover { border-color: var(--ink); border-top-color: var(--c); transform: translateY(-4px); }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.svc-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--c); color: var(--on); }
.s-isa .svc-ico { box-shadow: inset 0 0 0 1.5px var(--sap); }
.svc-ico .ico { width: 26px; height: 26px; }
.svc-num { color: var(--muted); font-size: 13px; }
.svc-title { font-size: 23px; font-weight: 700; }
.svc-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.svc-ex { margin-top: 10px; color: var(--muted); font-size: 16px; flex: 1; }
.svc-quip { margin-top: 18px; padding-inline-start: 14px; border-inline-start: 3px solid var(--c); font-size: 15px; font-weight: 500; }
.svc-quip .lbl { display: block; color: var(--sap); font-size: 10.5px; margin-bottom: 4px; }
.svc-quip-lg { font-size: 19px; margin: 0 0 28px; }
.svc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.price { display: inline-flex; align-items: baseline; gap: 6px; }
.price small { font-size: 13px; color: var(--muted); }
.price b { font-size: 22px; font-weight: 800; background: var(--for); padding: 0 6px; }
.price-quote { font-weight: 700; font-size: 16px; }
.svc-dur { font-size: 14px; color: var(--muted); }
.svc-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* المراحل */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding-top: 24px; border-top: 1px solid var(--line-i); }
.step::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 48px; height: 3px; background: var(--coq); }
.step-n { display: block; font-size: 64px; font-weight: 900; color: var(--lil); line-height: 1; }
.step-ico { display: inline-flex; margin-top: 18px; color: var(--for); }
.step-ico .ico { width: 28px; height: 28px; }
.step h3 { font-size: 21px; font-weight: 600; margin-top: 12px; }
.step p { margin-top: 8px; color: var(--dim); font-size: 16px; }

/* الأعمال */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card { border: 1.5px solid var(--line); background: var(--isa); transition: border-color .25s; }
.work-card:hover { border-color: var(--ink); }
.work-link { display: flex; flex-direction: column; height: 100%; }
.work-fig { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.work-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-fig img { transform: scale(1.035); }
.work-body { display: flex; flex-direction: column; gap: 6px; padding: 22px; flex: 1; }
.work-k { font-size: 14px; font-weight: 500; color: var(--sap); }
.work-title { font-size: 21px; font-weight: 700; flex: 1; }
.work-body .link-arrow { margin-top: 10px; align-self: flex-start; }
.work-big { grid-column: 1 / -1; border: 0; }
.work-big .work-link { display: grid; grid-template-columns: 1.5fr 1fr; }
.work-big .work-fig { aspect-ratio: auto; min-height: 380px; background: var(--isa); border: 1.5px solid var(--line); border-inline-end: 0; }
.work-big .work-body { background: var(--c); color: var(--on); padding: clamp(28px, 4vw, 48px); justify-content: flex-end; gap: 12px; }
.work-big .work-k { color: inherit; opacity: .8; }
.work-big .work-title { font-size: clamp(28px, 3.4vw, 40px); flex: 0; }
.work-big .work-ex { opacity: .88; }
.work-big .link-arrow { color: inherit; }
.s-sap.work-big .work-body, .s-coq.work-big .work-body, .s-ink.work-big .work-body { --focus: var(--for); }
.work-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 220px; background: var(--ink); color: var(--isa); }
.work-ph-mark { display: block; width: 26%; }

/* الوعود */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prom { padding-top: 22px; border-top: 1px solid rgba(245, 240, 235, .3); }
.prom b { display: block; font-size: clamp(48px, 6vw, 80px); font-weight: 900; line-height: 1; color: var(--for); }
.prom span { display: block; margin-top: 12px; color: var(--dim); font-size: 17px; }

/* الباقات */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1.5px solid var(--line-s); background: var(--isa); }
.pkg-feat { background: var(--ink); color: var(--isa); border-color: var(--ink); margin-block: -14px; --focus: var(--for); }
.pkg-badge { position: absolute; top: -14px; inset-inline-start: 32px; background: var(--for); color: var(--ink); font-weight: 700; font-size: 14px; padding: 4px 12px; }
.pkg-k { color: var(--sap); }
.pkg-feat .pkg-k { color: var(--lil); }
.pkg-name { font-size: 28px; font-weight: 700; margin-top: 10px; }
.pkg-note { margin-top: 8px; color: var(--muted); font-size: 16px; min-height: 3.4em; }
.pkg-feat .pkg-note { color: var(--dim); }
.pkg-price { margin-block: 22px; display: flex; align-items: baseline; gap: 8px; }
.pkg-price b { font-size: 48px; font-weight: 900; line-height: 1; }
.pkg-price small { color: var(--muted); font-size: 15px; }
.pkg-feat .pkg-price small { color: var(--dim); }
.pkg-list { display: grid; gap: 10px; margin-bottom: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.pkg-feat .pkg-list { border-color: var(--line-i); }
.pkg-list li, .check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.pkg-list .ico, .check-list .ico { color: var(--sap); margin-top: .3em; }
.pkg-feat .pkg-list .ico { color: var(--lil); }
.pkg .btn { margin-top: auto; }

/* الأسئلة */
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--head-h) + 32px); margin: 0; }
.faq-grid .sec-head .btn { margin-top: 28px; }
.faq-item { border-bottom: 1px solid var(--line-i); }
.faq-item:first-child { border-top: 1px solid var(--line-i); }
.faq-item summary {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding-block: 22px; font-size: 20px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico { width: 22px; height: 22px; color: var(--lil); transition: transform .3s var(--ease); }
.faq-item[open] summary .ico { transform: rotate(45deg); color: var(--coq); }
.faq-item summary:hover { color: var(--lil); }
.faq-item p { padding-bottom: 24px; color: var(--dim); max-width: 640px; }

/* شريط الدعوة */
.cta-band { background: var(--sap); color: var(--isa); padding-block: clamp(56px, 8vw, 96px); --focus: var(--for); }
.cta-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.cta-h { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; line-height: 1.15; margin-top: 12px; text-wrap: balance; }
.cta-p { margin-top: 16px; color: var(--dim); font-size: 18px; max-width: 560px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   التذييل
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--isa); padding-top: clamp(56px, 7vw, 88px); --focus: var(--for); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
.brand-lg .brand-mark { width: 84px; }
.footer-tag { margin-top: 22px; font-size: 22px; font-weight: 700; }
.footer-brand .muted { color: var(--dim); margin-top: 8px; font-size: 15px; max-width: 320px; }
.footer-k { color: var(--lil); font-size: 11px; }
.footer-h { font-size: 18px; font-weight: 600; margin: 6px 0 16px; }
.footer-list { display: grid; gap: 8px; }
.footer-list a { color: var(--dim); font-size: 15.5px; display: inline-flex; align-items: center; gap: 10px; transition: color .2s; }
.footer-list a:hover { color: var(--isa); }
.socials { display: flex; gap: 8px; margin-top: 18px; }
.socials a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1.5px solid var(--line-i); transition: background-color .2s, color .2s, border-color .2s; }
.socials a:hover { background: var(--isa); color: var(--ink); border-color: var(--isa); }
.handle { margin-top: 14px; color: var(--lil); font-size: 14px; font-weight: 500; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-block: 22px 96px; border-top: 1px solid var(--line-i); font-size: 14px; color: var(--dim); }
.footer-bottom .muted { color: var(--dim); }
.color-strip { display: flex; height: 8px; }
.color-strip i { flex: 1; }
.c-ink { background: #1D2438; } .c-lil { background: var(--lil); } .c-sap { background: var(--sap); }
.c-isa { background: var(--isa); } .c-for { background: var(--for); } .c-coq { background: var(--coq); }

/* --------------------------------------------------------------------------
   نافذة الواتساب
   -------------------------------------------------------------------------- */
.wa { position: fixed; left: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wa-fab {
	position: relative; display: inline-flex; align-items: center; gap: 10px;
	min-height: 58px; padding: 0 22px 0 20px; border: 0;
	background: var(--coq); color: var(--isa); font-weight: 700; font-size: 17px;
	transition: background-color .2s, transform .25s var(--ease);
	--focus: var(--ink);
}
.wa-fab .ico { width: 26px; height: 26px; }
.wa-fab:hover { background: var(--ink); transform: translateY(-2px); }
.wa-ping { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--for); border: 2px solid var(--ink); animation: ping 1.8s infinite; }
.wa.is-open .wa-ping { display: none; }
.wa-panel {
	width: min(360px, calc(100vw - 40px)); background: var(--isa); color: var(--ink);
	border: 1.5px solid var(--ink); transform-origin: bottom left; animation: pop .3s var(--ease);
}
.wa-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ink); color: var(--isa); --focus: var(--for); }
.wa-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-i); flex: none; }
.wa-mark { display: block; width: 26px; }
.wa-head strong { display: block; font-size: 16px; }
.wa-sub { display: block; font-size: 13px; color: var(--lil); }
.wa-x { margin-inline-start: auto; background: none; border: 0; padding: 6px; display: inline-flex; color: var(--isa); }
.wa-body { padding: 18px 16px 8px; }
.wa-bubble { background: var(--lil); color: var(--ink); padding: 12px 14px; font-size: 15.5px; line-height: 1.65; max-width: 92%; }
.wa-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; padding: 7px 14px; border: 1.5px solid var(--ink); font-size: 14.5px; font-weight: 600; transition: background-color .2s, color .2s; }
.chip:hover { background: var(--ink); color: var(--isa); }
.wa-form { display: flex; gap: 8px; padding: 12px 16px 16px; }
.wa-form textarea { flex: 1; resize: none; border: 1.5px solid var(--line-s); background: transparent; padding: 10px 12px; font-size: 15px; line-height: 1.5; }
.wa-form textarea:focus { outline: none; border-color: var(--sap); }
.wa-send { flex: none; width: 50px; border: 0; background: var(--coq); color: var(--isa); display: inline-flex; align-items: center; justify-content: center; }
.wa-send:hover { background: var(--ink); }
.wa-send .ico { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   الصفحات الداخلية
   -------------------------------------------------------------------------- */
.page-head { background: var(--c, var(--ink)); color: var(--on, var(--isa)); padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); --focus: var(--for); }
.page-head.s-coq { background: var(--ink); color: var(--isa); border-bottom: 10px solid var(--coq); }
.page-head.s-isa { border-bottom: 1px solid var(--line); }
.page-head.s-for mark, .page-head.s-lil mark { background: var(--ink); color: var(--for); }
.page-k { color: var(--lil); }
.page-head.s-lil .page-k, .page-head.s-for .page-k, .page-head.s-isa .page-k { color: var(--sap); }
.page-head.s-sap .page-k { color: var(--for); }
.page-h { font-size: clamp(36px, 5.4vw, 64px); font-weight: 800; line-height: 1.15; margin-top: 14px; max-width: 920px; text-wrap: balance; }
.page-lead { margin-top: 18px; font-size: 19px; max-width: 680px; opacity: .86; }

.prose { font-size: 18px; }
.prose-narrow { max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 30px; margin-top: 1.6em; }
.prose h3 { font-size: 23px; font-weight: 600; margin-top: 1.4em; }
.prose a { color: var(--sap); text-decoration: underline; text-underline-offset: 4px; }
.prose ul { list-style: square; padding-inline-start: 1.2em; }
.prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.prose blockquote { margin: 1.6em 0; padding: 4px 22px; border-inline-start: 4px solid var(--coq); font-size: 22px; font-weight: 300; }
.prose img { height: auto; }
.prose .check-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.prose-fig { margin-bottom: 32px; }
.share { display: flex; align-items: center; gap: 10px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-weight: 600; }
.share a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1.5px solid var(--line-s); text-decoration: none; color: var(--ink); }
.share a:hover { background: var(--ink); color: var(--isa); }

.svc-single { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.svc-box { position: sticky; top: calc(var(--head-h) + 24px); border: 1.5px solid var(--ink); padding: 28px; display: grid; gap: 12px; }
.facts { margin: 8px 0 12px; display: grid; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 15px; }
.facts dd { margin: 0; font-weight: 600; }

.case-head { background: var(--ink); color: var(--isa); }
.case-grid { display: grid; grid-template-columns: 1fr 1.4fr; padding: 0; max-width: none; }
.case-info { background: var(--c); color: var(--on); padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px); display: flex; flex-direction: column; --focus: var(--for); }
.case-info .lbl { opacity: .8; }
.case-h { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; margin-top: 14px; }
.case-lead { margin-top: 16px; font-size: 18px; opacity: .88; }
.case-meta { width: 100%; margin-top: auto; padding-top: 40px; border-collapse: collapse; font-size: 16px; }
.case-meta th, .case-meta td { text-align: start; padding: 12px 0; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 25%, transparent); }
.case-meta th { font-weight: 400; opacity: .75; width: 100px; }
.case-art { background: var(--isa); display: flex; align-items: center; justify-content: center; min-height: 420px; }
.case-art img { width: 100%; height: 100%; object-fit: contain; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; border: 1.5px solid var(--line); border-top: 6px solid var(--lil); transition: border-color .25s; }
.post-card a:hover { border-color: var(--ink); border-top-color: var(--lil); }
.post-fig { margin: -26px -26px 10px; aspect-ratio: 16/10; overflow: hidden; }
.post-fig img { width: 100%; height: 100%; object-fit: cover; }
.post-title { font-size: 22px; }
.post-card p { color: var(--muted); font-size: 16px; flex: 1; }
.empty { text-align: center; padding-block: 40px; }
.empty h2 { font-size: 32px; }
.empty p { margin: 10px 0 24px; color: var(--muted); }
.search-form { display: inline-flex; gap: 8px; }
.search-form input[type="search"] { border: 1.5px solid var(--line-s); background: transparent; padding: 12px 14px; min-width: 240px; }
.search-form input[type="submit"] { border: 0; background: var(--ink); color: var(--isa); padding: 12px 20px; font-weight: 700; cursor: pointer; }
.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding-inline: 12px; border: 1.5px solid var(--line-s); font-weight: 600; }
.page-numbers.current, .page-numbers:hover { background: var(--ink); color: var(--isa); border-color: var(--ink); }

/* 404 */
.nf { background: var(--ink); color: var(--isa); --focus: var(--for); }
.nf-in { padding-block: clamp(64px, 10vw, 140px); }
.nf-num { font-size: clamp(120px, 24vw, 300px); font-weight: 900; line-height: .9; color: var(--coq); margin-top: 18px; }
.nf-h { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; margin-top: 24px; max-width: 860px; }
.nf-p { margin-top: 16px; font-size: 19px; color: var(--dim); max-width: 600px; }

/* --------------------------------------------------------------------------
   منشئ الطلب
   -------------------------------------------------------------------------- */
.order-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.order { border: 1.5px solid var(--ink); padding: clamp(22px, 4vw, 40px); background: var(--isa); }
.order-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 14px; color: var(--muted); }
.order-steps li { display: flex; flex-direction: column; gap: 2px; font-weight: 500; transition: color .2s; }
.order-steps .num { font-weight: 800; font-size: 13px; }
.order-steps li.is-on, .order-steps li.is-done { color: var(--ink); }
.order-steps li.is-on .num { color: var(--coq); }
.order-bar { height: 4px; background: var(--line); margin: 16px 0 32px; }
.order-bar i { display: block; height: 100%; width: 25%; background: var(--sap); transition: width .4s var(--ease); }
.order-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.order-step.is-on { animation: stepIn .4s var(--ease); }
.order-h { font-size: 24px; font-weight: 700; margin-bottom: 18px; padding: 0; }
.order-h .muted { font-size: 15px; font-weight: 400; margin-inline-start: 8px; }
.order-h2 { margin-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check span {
	display: inline-flex; align-items: center; min-height: 46px; padding: 10px 18px;
	border: 1.5px solid var(--line-s); font-weight: 500; font-size: 16px;
	transition: background-color .15s, color .15s, border-color .15s;
}
.chip-check:hover span { border-color: var(--ink); }
.chip-check input:checked + span { background: var(--ink); color: var(--isa); border-color: var(--ink); }
.chip-check input:checked + span::before { content: "✓"; margin-inline-end: 8px; color: var(--for); font-weight: 800; }
.chip-check input:focus-visible + span { outline: 3px solid var(--sap); outline-offset: 2px; }
.order-note { margin-top: 22px; font-size: 15px; color: var(--muted); padding-inline-start: 12px; border-inline-start: 3px solid var(--for); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.field b { color: var(--coq); }
.field-full { grid-column: 1 / -1; }
.field input, .field textarea { width: 100%; border: 1.5px solid var(--line-s); background: transparent; padding: 13px 14px; font-weight: 400; font-size: 16px; line-height: 1.6; transition: border-color .2s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sap); box-shadow: inset 0 0 0 1px var(--sap); }
.field textarea { resize: vertical; min-height: 130px; }
.field .is-bad { border-color: var(--coq); }
.order-err { margin-top: 16px; font-weight: 600; color: var(--ink); padding: 10px 14px; background: var(--for); }
.order-preview { margin-top: 16px; padding: 20px; background: var(--ink); }
.order-bubble { white-space: pre-wrap; background: var(--isa); color: var(--ink); padding: 16px 18px; font-size: 15.5px; line-height: 1.75; max-width: 520px; }
.order-nav { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.order-nav [data-order-prev] .ico { transform: scaleX(-1); }
.order-nav [data-order-prev]:hover .ico { transform: scaleX(-1) translateX(-4px); }
.order-done { text-align: center; padding-block: 32px; animation: stepIn .4s var(--ease); }
.done-mark { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; background: var(--sap); color: var(--isa); }
.done-mark .ico { width: 36px; height: 36px; }
.order-done h3 { font-size: 34px; font-weight: 800; margin-top: 20px; }
.order-done p { margin-top: 10px; }
.order-done a { color: var(--sap); text-decoration: underline; }

.order-aside { background: var(--ink); color: var(--isa); padding: clamp(24px, 3vw, 36px); position: sticky; top: calc(var(--head-h) + 24px); --focus: var(--for); }
.order-aside .k-sap { color: var(--lil); }
.order-aside h2 { font-size: 24px; margin-top: 8px; }
.next-list { counter-reset: n; display: grid; gap: 16px; margin-top: 22px; }
.next-list li { counter-increment: n; position: relative; padding-inline-start: 44px; color: var(--dim); font-size: 16px; }
.next-list li::before { content: counter(n, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; color: var(--lil); direction: ltr; }
.next-list b { color: var(--isa); }
.aside-wa { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-i); }
.aside-wa p { margin-bottom: 12px; color: var(--dim); }
.order-aside .btn-ghost-dark { border-color: rgba(245, 240, 235, .45); color: var(--isa); }
.order-aside .btn-ghost-dark:hover { background: var(--isa); color: var(--ink); }

/* التعليقات */
.comments-area { margin-top: 56px; }
.comment-list { display: grid; gap: 20px; }
.comment-body { padding: 18px; border: 1.5px solid var(--line); }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; border: 1.5px solid var(--line-s); background: transparent; padding: 12px; }
.comment-form .submit { border: 0; background: var(--ink); color: var(--isa); padding: 12px 22px; font-weight: 700; cursor: pointer; }

/* محرر المكونات: ألوان الدليل */
.has-ink-color { color: var(--ink); } .has-ink-background-color { background-color: var(--ink); }
.has-isa-color { color: var(--isa); } .has-isa-background-color { background-color: var(--isa); }
.has-sap-color { color: var(--sap); } .has-sap-background-color { background-color: var(--sap); }
.has-lil-color { color: var(--lil); } .has-lil-background-color { background-color: var(--lil); }
.has-for-color { color: var(--for); } .has-for-background-color { background-color: var(--for); }
.has-coq-color { color: var(--coq); } .has-coq-background-color { background-color: var(--coq); }
.wp-block-button__link { background: var(--coq); color: var(--isa); border-radius: 0; font-weight: 700; padding: 14px 24px; text-decoration: none !important; }
.alignwide { max-width: 1100px; }
.wp-caption-text, figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------------------
   الحركة
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@keyframes ping { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes rotIn { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js .reveal { opacity: 1; transform: none; }
	.marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   الاستجابة
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.svc-grid, .work-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
	.steps, .promises { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.status { display: none !important; }
}

@media (max-width: 980px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		position: absolute; top: 100%; inset-inline: 0; background: var(--ink);
		padding: 16px var(--gut) 28px; border-bottom: 1px solid var(--line-i);
		display: none; max-height: calc(100vh - var(--head-h)); overflow: auto;
	}
	.nav.is-open { display: block; animation: stepIn .3s var(--ease); }
	.nav .menu { flex-direction: column; gap: 0; }
	.nav .menu a { padding: 14px 0; font-size: 20px; border-bottom: 1px solid var(--line-i); }
	.nav .menu a::after { display: none; }
	.nav-cta-m { display: flex; width: 100%; margin-top: 20px; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero-art { max-width: 460px; width: 100%; margin-inline: auto; }
	.faq-grid, .cta-in, .order-layout, .svc-single { grid-template-columns: 1fr; }
	.faq-grid .sec-head, .svc-box, .order-aside { position: static; }
	.pkgs { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.pkg-feat { margin-block: 0; }
	.work-big .work-link { grid-template-columns: 1fr; }
	.work-big .work-fig { min-height: 0; aspect-ratio: 16/10; border-inline-end: 1.5px solid var(--line); border-bottom: 0; }
	.case-grid { grid-template-columns: 1fr; }
	.case-art { min-height: 0; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	:root { --head-h: 66px; }
	.brand-mark, .brand-img { width: 38px; }
	.brand-sub { display: none; }
	.header-actions .btn-sm span { font-size: 15px; }
	.header-in { gap: 12px; }
	.svc-grid, .work-grid, .post-grid, .steps, .promises, .footer-grid, .fields { grid-template-columns: 1fr; }
	.hero-actions .btn { width: 100%; }
	.order-steps { font-size: 12px; }
	.order-steps li span:not(.num) { display: none; }
	.order-nav .btn { flex: 1; }
	.wa { left: 14px; bottom: 14px; }
	.wa-fab { min-height: 56px; width: 56px; padding: 0; justify-content: center; }
	.wa-fab-txt { display: none; }
	.topbar { font-size: 13.5px; }
	.lbl-new { display: none; }
	.search-form input[type="search"] { min-width: 0; flex: 1; }
}

@media (max-width: 400px) {
	.header-actions .btn-sm { display: none; }
}

/* ==========================================================================
   المحتوى المختصر + اللغتان + الحركة — فوق التصميم نفسه
   ========================================================================== */
.kicker { color: var(--lil); font-size: 16px; font-weight: 600; }
.hero-h { line-height: 1.3; margin-top: 14px; }
.hero-h mark { padding: 0 .12em; }
.lang-en .hero-h, .lang-en .sec-h, .lang-en .cta-h { line-height: 1.12; letter-spacing: -.015em; }
.svc-actions { justify-content: flex-start; }

/* تبديل اللغة */
.lang {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px;
	font-size: 14.5px; font-weight: 600; color: var(--dim); transition: color .2s;
}
.lang:hover { color: var(--isa); }
.lang .ico { width: 18px; height: 18px; }

/* الترويسة تختفي عند النزول وتظهر عند الصعود */
.site-header { transition: transform .45s var(--ease); }
.site-header.is-hidden { transform: translateY(-100%); }
.nav .menu a.is-active { color: var(--isa); }
.nav .menu a.is-active::after { transform: scaleX(1); }

/* الواجهة: الشعار داخل المربع الكحلي + كتلتان تتحركان مع المؤشر */
.play { --bg: var(--ink); --fg: var(--isa); cursor: default; transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 5px), 0); transition: transform .7s var(--ease); }
.play-wrap::before { transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0); transition: transform .8s var(--ease); }
.play-wrap::after { transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 18px), 0); transition: transform .8s var(--ease); }
.js .play-mark { animation: logoIn 1.3s var(--ease) both .35s; }
.js .play-wrap::before { animation: blockIn .9s var(--ease) both .2s; }
.js .play-wrap::after { animation: blockIn .9s var(--ease) both .45s; }

/* قلم الإبراز يمرّ على الكلمة بعد ظهور العنوان */
.js .hero-h mark {
	background: linear-gradient(var(--for), var(--for)) no-repeat right / 0% 100%;
	color: inherit; transition: background-size 1s var(--ease) .6s, color .3s .95s;
}
[dir="ltr"] .js .hero-h mark { background-position: left; }
.js .hero-h.in mark { background-size: 100% 100%; color: var(--ink); }

/* الظهور عند التمرير */
.js [data-anim] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-anim].in { opacity: 1; transform: none; }

/* بطاقات الخدمات: رفع + إمالة خفيفة مع المؤشر */
.svc-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: border-color .25s, transform .5s var(--ease); }
.svc-card:hover { --ty: -6px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
.js .svc-card[data-anim].in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
.svc-ico { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.svc-card:hover .svc-ico { transform: rotate(-8deg) scale(1.08); }

/* خط المرحلة القرمزي يمتد عند الظهور */
.js .step[data-anim]::before { width: 0; transition: width .9s var(--ease) calc(var(--d, 0s) + .35s); }
.js .step.in::before { width: 48px; }

/* ما الذي تحصل عليه */
.prom-ico { display: inline-grid !important; place-items: center; width: 52px; height: 52px; margin: 0 !important; background: var(--for); color: var(--ink) !important; }
.prom-ico .ico { width: 26px; height: 26px; }
.prom span:last-child { margin-top: 16px; color: var(--isa); font-size: 18px; font-weight: 600; }

/* الأسئلة على الخلفية العاجية */
.sec-paper .faq-item { border-color: var(--line); }
.sec-paper .faq-item summary { color: var(--ink); }
.sec-paper .faq-item summary:hover { color: var(--sap); }
.sec-paper .faq-item summary .ico { color: var(--sap); }
.sec-paper .faq-item p { color: var(--muted); }
.faq-a { overflow: hidden; }

/* التواصل */
.contact-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-intro .btn { margin-top: 28px; }
.sec-ink .order { color: var(--ink); --focus: var(--sap); }
.order-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.order .fields { margin-top: 26px; }
.order > .btn { margin-top: 24px; }
.order-block .order-h { margin-bottom: 14px; }
.order-done { margin-top: 20px; padding: 24px; border: 1.5px solid var(--ink); }

/* واتساب: رابط مباشر */
.wa-fab { text-decoration: none; }
[dir="ltr"] .wa { left: auto; right: 20px; align-items: flex-end; }
[dir="ltr"] .wa-ping { right: auto; left: -5px; }

/* الاتجاه الإنجليزي */
[dir="ltr"] .ico-arrow { transform: scaleX(-1); }
[dir="ltr"] .btn:hover .ico-arrow { transform: scaleX(-1) translateX(-4px); }
[dir="ltr"] .nav .menu a::after { transform-origin: left; }
[dir="ltr"] .marquee-track { animation-name: marqueeLtr; }

@keyframes marqueeLtr { to { transform: translateX(-50%); } }
@keyframes logoIn { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes blockIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
	.js [data-anim] { opacity: 1; transform: none; }
	.js .hero-h mark { background-size: 100% 100%; color: var(--ink); }
	.js .step[data-anim]::before { width: 48px; }
}

@media (max-width: 980px) {
	.contact-layout { grid-template-columns: 1fr; }
	.lang span { display: none; }
}
@media (max-width: 640px) {
	.hero-art { max-width: 300px; }
	[dir="ltr"] .wa { right: 14px; }
}

/* ==========================================================================
   موشن جرافيك: خلفية حيّة، كلمات متبدّلة، قلم إبراز للعناوين، شريط تقدّم
   ========================================================================== */

/* شريط تقدّم القراءة أسفل الترويسة */
.site-header { position: sticky; }
.scroll-bar { position: absolute; inset-inline: 0; bottom: -1px; height: 3px; pointer-events: none; }
.scroll-bar i { display: block; height: 100%; background: var(--coq); transform: scaleX(var(--p, 0)); transform-origin: right; }
[dir="ltr"] .scroll-bar i { transform-origin: left; }

/* أشكال الهوية تطفو خلف الواجهة وتتبع المؤشر */
.hero { position: relative; isolation: isolate; }
.hero-grid { position: relative; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hs {
	position: absolute; top: var(--t); inset-inline-start: var(--x); width: var(--s); height: var(--s);
	opacity: .18; background: var(--c);
	translate: calc(var(--px, 0) * var(--k) * 1px) calc(var(--py, 0) * var(--k) * 1px);
	transition: translate 1s var(--ease);
	animation: drift var(--dur) ease-in-out infinite alternate;
}
.hs.c-sap { --c: var(--sap); } .hs.c-lil { --c: var(--lil); } .hs.c-for { --c: var(--for); } .hs.c-coq { --c: var(--coq); }
.hs-ci { border-radius: 50%; }
.hs-bar { height: calc(var(--s) * .22); }
.hs-ring { background: transparent !important; border: 3px solid var(--c); border-radius: 50%; }
.hs-plus { background: transparent !important; }
.hs-plus::before, .hs-plus::after { content: ""; position: absolute; background: var(--c); }
.hs-plus::before { inset: 40% 0; }
.hs-plus::after { inset: 0 40%; }
.hs:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes drift {
	0% { transform: translate(0, 0) rotate(0deg); }
	50% { transform: translate(18px, -28px) rotate(45deg); }
	100% { transform: translate(-14px, 20px) rotate(90deg); }
}

/* الشعار يطفو بهدوء والكتلتان تتمايلان */
[data-float] .play-wrap { animation: bob 7s ease-in-out infinite; }
.js .play-wrap::before { animation: blockIn .9s var(--ease) both .2s, sway 6s ease-in-out infinite 1.2s; }
.js .play-wrap::after { animation: blockIn .9s var(--ease) both .45s, sway 5s ease-in-out infinite reverse 1.4s; }
@keyframes bob { 50% { translate: 0 -12px; } }
@keyframes sway { 50% { translate: 10px -8px; } }

/* الكلمات المتبدّلة */
.hero-rot { margin-top: 18px; }
.rot { min-width: 1ch; }

/* قلم الإبراز يمرّ على كلمة في كل عنوان عند ظهوره */
.js .sec-h mark {
	padding: 0 .12em;
	background: linear-gradient(var(--for), var(--for)) no-repeat right / 0% 100%;
	color: inherit; transition: background-size .9s var(--ease) .35s, color .3s .7s;
}
[dir="ltr"] .js .sec-h mark { background-position: left; }
.js .in .sec-h mark, .js .sec-h.in mark { background-size: 100% 100%; color: var(--ink); }

/* الشريط الثاني بعكس الاتجاه */
.marquee-alt { background: var(--lil); border-top: 0; }
.marquee-alt .marquee-track { animation-direction: reverse; animation-duration: 64s; }
.marquee-alt span { font-size: 18px; font-weight: 500; }
.marquee-alt i { border-radius: 50%; }

/* أيقونات الخدمات والمزايا «تنبثق» عند الظهور */
.js .svc-card[data-anim] .svc-ico,
.js .prom[data-anim] .prom-ico { scale: .3; opacity: 0; transition: scale .8s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .25s), opacity .4s calc(var(--d, 0s) + .25s); }
.js .svc-card.in .svc-ico,
.js .prom.in .prom-ico { scale: 1; opacity: 1; }

/* لمعة تمرّ على أزرار الطلب الرئيسية */
.hero .btn-cta, .order > .btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.hero .btn-cta::after, .order > .btn-cta::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg); animation: sheen 4.8s ease-in-out infinite 1.5s;
}
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
	.hs, [data-float] .play-wrap, .hero .btn-cta::after, .order > .btn-cta::after { animation: none !important; }
	.js .sec-h mark { background-size: 100% 100%; color: var(--ink); }
	.js .svc-card[data-anim] .svc-ico, .js .prom[data-anim] .prom-ico { scale: 1; opacity: 1; }
}
@media (max-width: 640px) {
	.hs { opacity: .12; }
	.marquee-alt span { font-size: 16px; }
}

/* ==========================================================================
   لوحات تجريدية متحركة (بلا صور ولا كائنات) + من نحن + الخصوصية + المدونة
   ========================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.tile { position: relative; overflow: hidden; border: 1px solid var(--line-i); background: #161C2E; display: flex; align-items: center; justify-content: center; transition: border-color .3s, transform .5s var(--ease); }
.tile:hover { border-color: rgba(245, 240, 235, .4); }
.t-lbl { position: absolute; bottom: 14px; inset-inline-start: 16px; font-size: 15px; font-weight: 600; color: var(--isa); background: rgba(17, 22, 37, .7); padding: 4px 10px; }
.t-identity { grid-column: span 2; grid-row: span 2; }
.t-web { grid-column: span 2; }
.t-deck, .t-color { grid-column: span 2; }

/* هوية: شبكة بناء تُرسم ودوائر وإطار يدور */
.t-svg { width: 78%; height: auto; color: rgba(245, 240, 235, .07); }
.draw { stroke-dasharray: 760; stroke-dashoffset: 760; animation: drawC 3.2s var(--ease) infinite alternate; }
.d2 { stroke-dasharray: 460; stroke-dashoffset: 460; animation-delay: .6s; }
.spin { transform-origin: 200px 200px; animation: spinSq 14s linear infinite; }
.pulse { transform-origin: 200px 200px; animation: pulseC 2.4s ease-in-out infinite; }
@keyframes drawC { to { stroke-dashoffset: 0; } }
@keyframes spinSq { to { transform: rotate(360deg); } }
@keyframes pulseC { 50% { transform: scale(1.35); } }

/* مواقع: نافذة متصفح تتحمّل ومؤشر يتحرك */
.browser { position: relative; width: 82%; height: 74%; background: var(--isa); border: 1px solid rgba(245, 240, 235, .3); }
.b-bar { display: flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; background: #E7E0D7; }
.b-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--coq); }
.b-bar i:nth-child(2) { background: var(--for); }
.b-bar i:nth-child(3) { background: var(--lil); }
.b-bar span { flex: 1; height: 8px; margin-inline-start: 8px; background: rgba(17, 22, 37, .1); }
.b-body { display: grid; gap: 8px; padding: 12px; }
.sk { display: block; height: 10px; background: rgba(17, 22, 37, .1); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: shimmer 1.8s infinite; }
.sk-hero { height: 34px; background: var(--sap); }
.sk-l1 { width: 70%; } .sk-l2 { width: 45%; }
.sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk-c { height: 30px; background: var(--lil); opacity: .5; }
.cursor { position: absolute; width: 0; height: 0; border-inline-start: 7px solid transparent; border-inline-end: 7px solid transparent; border-top: 14px solid var(--ink); top: 40%; left: 30%; transform: rotate(-30deg); animation: cursor 5s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes cursor { 0%, 100% { top: 70%; left: 20%; } 35% { top: 32%; left: 62%; } 60% { top: 58%; left: 74%; } }

/* مطبوعات: أوراق تتراصّ وتتباعد */
.papers { position: relative; width: 120px; height: 150px; }
.pp { position: absolute; inset: 0; background: var(--isa); border: 1px solid rgba(17, 22, 37, .1); }
.pp::before { content: ""; position: absolute; inset: 14px 14px auto; height: 26px; background: var(--for); }
.pp::after { content: ""; position: absolute; inset: 52px 14px auto; height: 6px; background: rgba(17, 22, 37, .2); box-shadow: 0 14px 0 rgba(17, 22, 37, .2), 0 28px 0 rgba(17, 22, 37, .2); width: 60%; }
.p2::before { background: var(--sap); } .p3::before { background: var(--coq); }
.p1 { animation: fan1 4s ease-in-out infinite; } .p2 { animation: fan2 4s ease-in-out infinite; } .p3 { animation: fan3 4s ease-in-out infinite; }
@keyframes fan1 { 50% { transform: translate(-34px, 6px) rotate(-12deg); } }
@keyframes fan2 { 50% { transform: translate(0, -8px) rotate(0deg); } }
@keyframes fan3 { 50% { transform: translate(34px, 6px) rotate(12deg); } }

/* موشن: خط زمني ورأس تشغيل يتحرك */
.timeline { width: 82%; display: grid; gap: 12px; }
.play-tri { width: 0; height: 0; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-inline-start: 28px solid var(--coq); margin-inline: auto; animation: pulseC 2s ease-in-out infinite; }
[dir="rtl"] .play-tri { border-inline-start: 0; border-inline-end: 28px solid var(--coq); transform: scaleX(-1); }
.track { position: relative; height: 18px; background: rgba(245, 240, 235, .08); }
.kf { position: absolute; top: 50%; width: 10px; height: 10px; background: var(--for); transform: translate(-50%, -50%) rotate(45deg); }
.k1 { left: 12%; } .k2 { left: 38%; } .k3 { left: 62%; } .k4 { left: 86%; }
.tr2 .kf { background: var(--lil); }
.head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--coq); left: 0; animation: playhead 3.6s linear infinite; }
.tr2 .head { animation-delay: -1.2s; }
@keyframes playhead { to { left: 100%; } }

/* عروض وتقارير: أعمدة تنمو وحلقة تمتلئ */
.t-deck { gap: 28px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.chart i { width: 22px; height: var(--h); background: var(--sap); transform-origin: bottom; animation: grow 3s var(--ease) infinite alternate; }
.chart i:nth-child(2) { background: var(--lil); animation-delay: .2s; }
.chart i:nth-child(3) { animation-delay: .4s; }
.chart i:nth-child(4) { background: var(--for); animation-delay: .6s; }
.chart i:nth-child(5) { background: var(--coq); animation-delay: .8s; }
.ring { width: 110px; transform: rotate(-90deg); }
.ring-v { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ringFill 3s var(--ease) infinite alternate; }
@keyframes grow { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes ringFill { to { stroke-dashoffset: 28; } }

/* ألوان: شرائح تتبادل العرض */
.swatches { display: flex; width: 86%; height: 96px; }
.swatches i { flex: 1; transition: flex .5s var(--ease); animation: swatch 6s ease-in-out infinite; }
.swatches i:nth-child(2) { animation-delay: 1s; } .swatches i:nth-child(3) { animation-delay: 2s; }
.swatches i:nth-child(4) { animation-delay: 3s; } .swatches i:nth-child(5) { animation-delay: 4s; } .swatches i:nth-child(6) { animation-delay: 5s; }
@keyframes swatch { 0%, 100% { flex: 1; } 12% { flex: 3.2; } 24% { flex: 1; } }

/* من نحن */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.about-p { margin-top: 16px; font-size: 19px; color: var(--text, var(--ink)); }
.values { display: grid; gap: 14px; }
.value { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: var(--isa); border: 1.5px solid var(--line); border-inline-start: 4px solid var(--coq); transition: border-color .25s, transform .4s var(--ease); }
.value:nth-child(2) { border-inline-start-color: var(--sap); }
.value:nth-child(3) { border-inline-start-color: var(--for); }
.value:hover { transform: translateX(-4px); border-color: var(--ink); }
[dir="ltr"] .value:hover { transform: translateX(4px); }
.value-n { font-size: 34px; font-weight: 900; color: var(--lil); line-height: 1; }
.value h3 { font-size: 19px; }
.value p { margin-top: 4px; color: var(--muted); font-size: 16px; }

/* أعمالنا في أمانة أصحابها */
.priv-grid .sec-head { max-width: 820px; }
.privacy .promises { grid-template-columns: repeat(4, 1fr); }
.prom-t { display: block; margin-top: 16px; font-size: 20px; font-weight: 700; color: var(--isa); }
.privacy .prom span:last-child { margin-top: 6px; font-size: 16px; font-weight: 400; color: var(--dim); }

/* المدونة */
.blog-sec + .sec-paper { border-top: 1px solid var(--line); }
.post-fig svg { display: block; width: 100%; height: 100%; }
.post-card .cv { transform-box: fill-box; transform-origin: center; transition: transform .8s var(--ease); }
.post-card a:hover .cv:nth-child(odd) { transform: rotate(90deg) scale(.9); }
.post-card a:hover .cv:nth-child(even) { transform: translateY(-10px); }
.post-meta { font-size: 14px; color: var(--muted); }
.post-card .link-arrow { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.cover-lg .cv { animation: coverFloat var(--d, 8s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes coverFloat { to { transform: translateY(-10px) rotate(8deg); } }
.article-head { padding-bottom: clamp(90px, 10vw, 140px); }
.article-head .post-meta { margin-top: 16px; color: var(--dim); }
.article-back { display: inline-flex; align-items: center; gap: 8px; color: var(--lil); font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.article-back .ico { transform: scaleX(-1); }
[dir="ltr"] .article-back .ico { transform: none; }
.article-cover { margin-top: calc(clamp(90px, 10vw, 140px) * -1 + 24px); position: relative; z-index: 1; }
.article-cover svg, .article-cover img { display: block; width: 100%; height: auto; max-height: 460px; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--line); }
.article-lead { font-size: 21px; font-weight: 500; color: var(--ink); }
.share { border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
	.draw, .spin, .pulse, .sk::after, .cursor, .pp, .head, .chart i, .ring-v, .swatches i, .cover-lg .cv, .play-tri { animation: none !important; }
	.draw { stroke-dashoffset: 0; } .ring-v { stroke-dashoffset: 28; }
}
@media (max-width: 1100px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.t-identity { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 980px) {
	.about-grid { grid-template-columns: 1fr; }
	.privacy .promises { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.bento { grid-template-columns: 1fr; grid-auto-rows: 190px; }
	.t-identity, .t-web, .t-deck, .t-color { grid-column: auto; }
	.t-identity { grid-row: span 2; }
}

@media (max-width: 640px) { .privacy .promises { grid-template-columns: 1fr; } }

/* ==========================================================================
   الأسعار، سياسة العمل، موافقة العربون، ومسافات الأسطر للعربية
   ========================================================================== */
.svc-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.svc-card .price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.svc-card .price b { font-size: 22px; font-weight: 800; background: var(--for); color: var(--ink); padding: 0 8px; line-height: 1.5; }
.svc-card .price small { font-size: 14px; color: var(--muted); }
.svc-actions { margin-top: 18px; }

.terms { margin-top: 32px; padding: 22px 24px; border: 1px solid var(--line-i); border-inline-start: 4px solid var(--for); }
.terms-h { font-size: 19px; color: var(--isa); }
.terms-list { margin-top: 12px; display: grid; gap: 10px; counter-reset: t; }
.terms-list li { counter-increment: t; position: relative; padding-inline-start: 34px; color: var(--dim); font-size: 15.5px; line-height: 1.8; }
.terms-list li::before { content: counter(t, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 0; font-weight: 800; color: var(--lil); }

.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px; border: 1.5px solid var(--ink); background: rgba(255, 200, 0, .12); cursor: pointer; font-weight: 600; line-height: 1.7; }
.consent input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--coq); cursor: pointer; }
.order > .order-err[data-err="deposit"] { margin-top: 10px; }

/* مسافات أسطر أوسع للعربية حتى لا تتداخل الحروف والتشكيل */
body.lang-ar { line-height: 1.85; }
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4 { line-height: 1.5; }
body.lang-ar .hero-h { line-height: 1.42; }
body.lang-ar .sec-h, body.lang-ar .page-h, body.lang-ar .cta-h, body.lang-ar .nf-h { line-height: 1.45; }
body.lang-ar .svc-title, body.lang-ar .post-title, body.lang-ar .step h3, body.lang-ar .value h3 { line-height: 1.55; }
body.lang-ar .prose { line-height: 2; }
body.lang-ar .prose h2 { line-height: 1.55; margin-top: 1.8em; }
body.lang-ar .prose p + p { margin-top: 1em; }
body.lang-ar .sec-p, body.lang-ar .hero-lead, body.lang-ar .about-p, body.lang-ar .page-lead, body.lang-ar .article-lead { line-height: 1.9; }
body.lang-ar mark { line-height: inherit; padding-block: .04em; }

/* ==========================================================================
   الباقات الشهرية، لماذا العربون، الحقول الإلزامية
   ========================================================================== */
.sec-pkgs { border-top: 1px solid var(--line); }
.sec-pkgs .pkgs { align-items: stretch; }
.sec-pkgs .pkg { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.sec-pkgs .pkg-price b { font-size: 46px; font-weight: 900; line-height: 1.2; }
.pkg-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 36px; color: var(--muted); font-size: 15px; }
.pkg-notes li { position: relative; padding-inline-start: 16px; }
.pkg-notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 7px; height: 7px; background: var(--coq); }

.chips-label, .field-legend { margin: 18px 0 10px; font-size: 15px; font-weight: 600; color: var(--muted); padding: 0; }
.field-legend { color: var(--ink); margin-top: 0; }
.chips-pkg .chip-check span { border-style: dashed; }
.chips-pkg .chip-check input:checked + span { border-style: solid; }
.field textarea.is-bad { border-color: var(--coq); }

.terms-dep { margin-top: 16px; border-inline-start-color: var(--lil); }
.dep-list { display: grid; gap: 10px; margin-top: 12px; }
.dep-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--dim); font-size: 15.5px; line-height: 1.8; }
.dep-list .ico { color: var(--for); margin-top: .35em; }

/* عشر خدمات: البطاقة الأخيرة تمتد بعرض الشبكة */
@media (min-width: 1101px) {
	.svc-grid > .svc-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1100px) {
	.svc-grid > .svc-card:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

/* تفصيل أسعار الخدمة داخل البطاقة */
.svc-items { margin-top: 12px; display: grid; gap: 6px; }
.svc-items li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; color: var(--text, var(--ink)); }
.svc-items li span { white-space: nowrap; }
.svc-items li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--line-s, rgba(17, 22, 37, .3)); transform: translateY(-4px); }
.svc-items li b { order: 2; font-weight: 700; white-space: nowrap; }
.svc-items li small { font-weight: 400; color: var(--muted); }

/* ضربة الفرشاة تحت الشعار باللون الذهبي (كما في الصورة الرمزية الرسمية) */
.brand-mark .brush, .play-mark .brush { fill: var(--for); }
.js .play-mark .brush { clip-path: inset(0 0 0 100%) fill-box; animation: brushPaint .9s cubic-bezier(.6, 0, .2, 1) 1.35s forwards; }
[dir="ltr"] .js .play-mark .brush { clip-path: inset(0 0 0 100%) fill-box; }
@keyframes brushPaint { to { clip-path: inset(0 0 0 0) fill-box; } }
@media (prefers-reduced-motion: reduce) { .js .play-mark .brush { animation: none; clip-path: none; } }