/* =====================================================================
   ZOVAQ Technologies — Site Components (Redesign v2)
   ---------------------------------------------------------------------
   يُحمَّل بعد style.css وtokens.css من includes/header.php فقط.
   كل الـ classes الجديدة بالبادئة z- حتى ما تتصادم مع style.css
   (المستخدم بالأدمن والتنصيب وصفحات /account/).
   خصائص منطقية فقط (inline/block) — الاتجاه بينقلب تلقائيًا بالـ RTL.

   الفهرس:
     1. Base          6. Mega menu
     2. Utilities     7. Mobile menu
     3. Icons         8. Footer
     4. Buttons       9. Sticky mobile CTA
     5. Header / Nav 10. Admin placeholder
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body.z-site {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    background-color: var(--bg);
    color: var(--text);
    text-align: start;
    /* الانتقال عند تبديل الثيم: ألوان فقط، 150ms */
    transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.z-site :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.z-site :where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

.z-main {
    flex: 1 0 auto;
    padding-block-start: var(--header-height);
}
.z-main:focus { outline: none; }

.z-container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-padding));
    margin-inline: auto;
    padding-inline: var(--page-padding);
}

/* ---------------------------------------------------------------------
   2. Utilities
   --------------------------------------------------------------------- */
.z-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* تحسين تدريجي: عناصر للـ JS فقط، وبدائلها لما JS معطّل */
html:not(.js) .z-js-only { display: none !important; }
html.js .z-no-js-only { display: none !important; }

.z-skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: calc(var(--z-overlay) + 1);
    padding: 12px 18px;
    border-radius: var(--radius-button);
    background: var(--primary-solid);
    color: var(--on-primary);
    font-weight: var(--fw-semibold);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}
.z-skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------------------
   3. Icons
   --------------------------------------------------------------------- */
.z-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
[dir="rtl"] .z-icon--flip { transform: scaleX(-1); }

.z-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-box);
    height: var(--icon-box);
    border-radius: var(--radius-card);
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid var(--border);
}
.z-icon-box--sm { width: 40px; height: 40px; border-radius: var(--radius-button); }

.z-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--target-min);
    min-height: var(--target-min);
    padding-inline: 10px;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.z-icon-btn:hover { color: var(--text); background: var(--surface-2); }
.z-icon-btn:active { background: var(--surface); }

.z-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-text, var(--brand));
    font-weight: var(--fw-semibold);
    min-height: var(--target-min);
}
.z-link-arrow .z-icon { transition: transform var(--dur-fast) var(--ease-out); }
.z-link-arrow:hover .z-icon { transform: translateX(3px); }
[dir="rtl"] .z-link-arrow:hover .z-icon--flip { transform: scaleX(-1) translateX(3px); }

.z-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target-comfort);
    padding-inline: 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.z-chip:hover { background: var(--surface-2); }

/* ---------------------------------------------------------------------
   3b. Z motif — التوقيع البصري المأخوذ من حرف Z بالشعار
   الزاوية: 40.6° (نزول 24 / رجوع 28)، من أعلى-يمين لأسفل-يسار.
   ملاحظة: الشكل ما بينعكس بالـ RTL — هو شكل الشعار نفسه (زي ZOVAQ اللاتيني).
   --------------------------------------------------------------------- */

/* (أ) Z-cut: قص زاويتين متقابلتين (أعلى-يسار وأسفل-يمين) — حافة القص نفسها
   موازية لقطر الـ Z (من أعلى-يمين لأسفل-يسار بزاوية 40.6°). الحد بيترسم بطبقتين (خلفية = لون الحد، ::before = التعبئة) لأن
   clip-path بيقص الـ border والـ outline. ما بينحط على عنصر قابل للتركيز. */
.z-cut-card {
    --cut: var(--z-cut-lg);
    --cut-x: 28px;
    --cut-y: 24px;
    position: relative;
    isolation: isolate;
    background: var(--z-edge, var(--border-strong));
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-cut-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--z-fill, var(--surface));
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-cut-card.z-cut--md, .z-mega__col { --cut-x: 21px; --cut-y: 18px; }
.z-cut-card.z-cut--sm, .z-mega__feature-bg { --cut-x: 14px; --cut-y: 12px; }

/* (ب) Z-divider: خط فاصل على شكل ضربة Z نفسها — خط علوي، قطر راجع
   بزاوية 40.6°، ثم خط سفلي. بديل الخط المستقيم بين الأقسام. */
.z-divider {
    position: relative;
    height: 36px;
    color: var(--z-line);
    pointer-events: none;
}
.z-divider::before,
.z-divider::after {
    content: "";
    position: absolute;
    height: 2px;
}
.z-divider::before {
    inset-block-start: 0;
    left: 0;
    width: calc(50% + 21px);
    background: linear-gradient(90deg, transparent, currentColor 30%);
}
.z-divider::after {
    inset-block-end: 0;
    left: calc(50% - 21px);
    right: 0;
    background: linear-gradient(90deg, currentColor 70%, transparent);
}
.z-divider__step {
    position: absolute;
    inset-block-start: 0;
    left: calc(50% - 21px);
    width: 42px;
    height: 36px;
    overflow: visible;
    filter: drop-shadow(0 0 6px currentColor);
}
.z-divider__step path { stroke: currentColor; stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.z-divider--start::before { width: calc(18% + 21px); }
.z-divider--start::after { left: calc(18% - 21px); }
.z-divider--start .z-divider__step { left: calc(18% - 21px); }

/* (ج) Z-field: نمط خلفية هندسي شفاف جدًا من شريط الـ Z المائل.
   البلاطة شريط بنفس نسب الشعار (عرض 20، نزول 24، رجوع 28)، بطبقتين
   متزاحتين لتكوين شبكة مائلة، مع تلاشي شعاعي. */
.z-field { position: relative; isolation: isolate; }
.z-field::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--z-field-color);
    opacity: var(--z-field-opacity);
    pointer-events: none;
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72'%3E%3Cpath d='M44.5 12.5h20l-28 24h-20z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at var(--z-field-at, 70% 20%), #000 0%, transparent 70%);
    -webkit-mask-size: 84px 72px, 100% 100%;
    -webkit-mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72'%3E%3Cpath d='M44.5 12.5h20l-28 24h-20z' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at var(--z-field-at, 70% 20%), #000 0%, transparent 70%);
    mask-size: 84px 72px, 100% 100%;
    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;
}

/* (د) Z-band: شريط مائل صغير (مؤشرات، عُقد فواصل) */
.z-band {
    display: inline-block;
    width: 14px;
    height: 12px;
    background: var(--z-band-color, var(--brand));
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

/* ---------------------------------------------------------------------
   4. Buttons — Default · Hover · Focus · Active · Disabled · Loading
   --------------------------------------------------------------------- */
.z-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--target-comfort);
    padding: 12px 24px;
    border-radius: var(--radius-button);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.z-btn:active { transform: scale(0.98); }

.z-btn--primary { background: var(--primary-solid); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-sm); }
.z-btn--primary:hover { background: var(--primary-solid-hover); color: var(--on-primary); }

.z-btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.z-btn--secondary:hover { background: var(--surface-2); color: var(--text); }

.z-btn--ghost { background: transparent; color: var(--brand); padding-inline: 12px; }
.z-btn--ghost:hover { background: var(--brand-soft); }

.z-btn--sm { min-height: var(--target-min); padding: 10px 18px; font-size: var(--fs-small); }
.z-btn--block { width: 100%; white-space: normal; }

.z-btn[disabled], .z-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; pointer-events: none; }

.z-btn.is-loading { color: transparent !important; pointer-events: none; }
.z-btn.is-loading > * { visibility: hidden; }
.z-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--on-primary);
    border-inline-end-color: transparent;
    animation: z-spin 0.7s linear infinite;
}
.z-btn--secondary.is-loading::after { border-color: var(--text); border-inline-end-color: transparent; }
@keyframes z-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   5. Header / Desktop navigation
   --------------------------------------------------------------------- */
.z-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    border-block-end: 1px solid transparent;
    background: transparent;
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.z-header.is-scrolled,
.z-header.has-open-menu {
    background: var(--header-bg);
    border-block-end-color: var(--border);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}
.z-header.is-scrolled { box-shadow: var(--shadow-sm); }

.z-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;
}

.z-header__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--target-min);
    border-radius: 6px;
}
.z-header__logo img {
    height: 40px;
    width: auto;
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}
[dir="rtl"] .z-header__logo img { transform-origin: right center; }
.z-header.is-scrolled .z-header__logo img { transform: scale(0.9); }

/* تبديل الشعار حسب الثيم */
.z-site [data-logo-light] { display: none; }
:root[data-theme="light"] .z-site [data-logo-dark] { display: none; }
:root[data-theme="light"] .z-site [data-logo-light] { display: block; }

.z-nav { display: none; margin-inline-start: var(--space-2); }
.z-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.z-nav__item { position: static; }

.z-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--target-min);
    padding-inline: 12px;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.z-nav__link:hover { color: var(--text); background: var(--surface-2); }
.z-nav__link[aria-current="page"],
.z-nav__link[data-current="true"],
.z-nav__link[aria-expanded="true"] { color: var(--text); }
.z-nav__link[aria-current="page"]::after,
.z-nav__link[data-current="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: 6px;
    height: 3px;
    background: var(--brand);
    /* شريط مائل بزاوية قطر الـ Z (3px نزول ← 3.5px رجوع) */
    clip-path: polygon(3.5px 0, 100% 0, calc(100% - 3.5px) 100%, 0 100%);
}
.z-nav__chevron { transition: transform var(--dur-base) var(--ease-out); }
.z-nav__link[aria-expanded="true"] .z-nav__chevron { transform: rotate(180deg); }

.z-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}
.z-lang-link, .z-header .z-theme-toggle, .z-header__login, .z-header__cta { display: none; }

.z-header__login {
    align-items: center;
    gap: 8px;
    min-height: var(--target-min);
    padding-inline: 10px;
    border-radius: var(--radius-button);
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.z-header__login:hover { color: var(--text); background: var(--surface-2); }
.z-header__login span { display: none; }

.z-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .z-theme-toggle__sun { display: inline-block; }
:root[data-theme="dark"] .z-theme-toggle__moon { display: none; }

/* قائمة المستخدم (منطق قديم، شكل جديد) */
.z-user-menu .user-menu__trigger { min-height: var(--target-min); background: var(--surface); border-color: var(--border-strong); }
.z-user-menu__name { display: none; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 64em) {
    .z-nav { display: block; }
    .z-lang-link, .z-header .z-theme-toggle, .z-header__login { display: inline-flex; }
    .z-header__cta { display: inline-flex; margin-inline-start: 6px; }
    .z-menu-toggle { display: none !important; }
    .z-user-menu__name { display: inline; }
}
@media (min-width: 80em) {
    .z-nav { margin-inline-start: var(--space-4); }
    .z-header__login span { display: inline; }
    .z-nav__list { gap: 4px; }
}

/* ---------------------------------------------------------------------
   6. Mega menu (Disclosure) — ≥1024px
   كل عمود شريحة بلونها: خلفية مائلة بزاوية قطر الـ Z، مربع أيقونة كبير
   مقصوص بزاوية Z، وأيقونة علامة مائية. عمود الحكومة فيه بطاقة مميزة.
   --------------------------------------------------------------------- */
.z-mega {
    position: absolute;
    inset-block-start: calc(100% - 6px);
    inset-inline: var(--page-padding);
    z-index: var(--z-menu);
    /* clip-path بيشيل box-shadow، فالظل على الأب كـ drop-shadow */
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}
:root[data-theme="light"] .z-mega { filter: drop-shadow(0 24px 48px rgba(26, 11, 46, 0.14)); }
.z-mega:not([hidden]) { animation: z-drop-in var(--dur-base) var(--ease-out); }
@keyframes z-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.z-mega__frame {
    --cut: var(--z-cut-lg);
    --z-fill: var(--surface);
    padding: var(--space-3);
}

.z-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

.z-mega__col {
    --cut: var(--z-cut-md);
    --z-edge: var(--border);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
    overflow: hidden;
}
.z-mega__col[data-segment="business"]   { --seg: var(--seg-business); --seg-soft: var(--seg-business-soft); }
.z-mega__col[data-segment="startup"]    { --seg: var(--seg-startup);  --seg-soft: var(--seg-startup-soft); }
.z-mega__col[data-segment="government"] { --seg: var(--seg-gov);      --seg-soft: var(--seg-gov-soft); }
/* خلفية مائلة: حافة حادة موازية لقطر الـ Z (139.4°) */
.z-mega__col { --z-fill: linear-gradient(var(--z-diagonal), var(--seg-soft) 0 46%, transparent 46.2%), var(--surface-2); }

/* أيقونة علامة مائية كبيرة بزاوية العمود — زخرفية */
.z-mega__watermark {
    position: absolute;
    inset-block-end: -18px;
    inset-inline-end: -14px;
    color: var(--seg);
    opacity: 0.08;
    pointer-events: none;
}

.z-mega__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border-radius: var(--radius-button);
}
.z-mega__head:hover .z-mega__title { color: var(--seg); }

/* مربع الأيقونة الكبير: لون الشريحة ممتلئ + قص Z */
.z-seg-tile {
    --cut: var(--z-cut-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--seg);
    color: var(--seg-on);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
}
.z-seg-tile .z-icon { stroke-width: 1.75; }

.z-mega__title {
    display: block;
    color: var(--text);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: 1.0625rem;
    letter-spacing: var(--tracking-heading);
    transition: color var(--dur-fast) var(--ease-out);
}
.z-mega__value { display: block; margin-block-start: 4px; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }

.z-mega__links { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.z-mega__links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding-inline: 10px;
    border-radius: var(--radius-button);
    color: var(--text-muted);
    font-size: 0.9375rem;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
/* مؤشر صغير على شكل شريط Z المائل قبل كل رابط */
.z-mega__links a::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 8px;
    background: var(--seg);
    opacity: 0.55;
    clip-path: polygon(4.7px 0, 100% 0, calc(100% - 4.7px) 100%, 0 100%);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.z-mega__links a:hover { color: var(--text); background: var(--surface); }
.z-mega__links a:hover::before { opacity: 1; transform: translateX(2px); }

/* البطاقة المميزة (عمود الحكومة): حافة بلون الشريحة + نص الأمان المعتمد */
.z-mega__feature {
    position: relative;
    display: flex;
    gap: 12px;
    margin-block-start: auto;
    padding: 14px 16px;
    color: var(--text);
    border-radius: 2px;
}
.z-mega__feature-bg {
    --cut: var(--z-cut-sm);
    --z-edge: var(--seg);
    --z-fill: var(--surface);
    position: absolute;
    inset: 0;
    z-index: 0;
}
.z-mega__feature > :not(.z-mega__feature-bg) { position: relative; z-index: 1; }
.z-mega__feature .z-icon { color: var(--seg); margin-block-start: 2px; }
.z-mega__feature strong { display: block; font-size: 0.9375rem; font-weight: var(--fw-semibold); }
.z-mega__feature small { display: block; margin-block-start: 2px; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.z-mega__feature:hover strong { color: var(--seg); }

.z-mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}
.z-mega__foot .z-divider { flex: 1; }
.z-mega__foot .z-link-arrow { font-size: 0.9375rem; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   7. Mobile menu (Full-screen dialog) — <1024px
   --------------------------------------------------------------------- */
.z-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: env(safe-area-inset-bottom);
}
.z-mobile-menu[hidden] { display: none; }
.z-mobile-menu:not([hidden]) { animation: z-fade-in var(--dur-base) var(--ease-out); }
@keyframes z-fade-in { from { opacity: 0; } to { opacity: 1; } }

.z-mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding-inline: var(--page-padding);
    border-block-end: 1px solid var(--border);
}

.z-mobile-menu__nav { flex: 1 0 auto; padding: var(--space-2) var(--page-padding); }
.z-mobile-menu__nav > ul { list-style: none; margin: 0; padding: 0; }
.z-mobile-menu__nav > ul > li { border-block-end: 1px solid var(--border); }

.z-mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    text-align: start;
    cursor: pointer;
}
.z-mobile-menu__link[aria-current="page"] { color: var(--brand); }
.z-mobile-menu__chevron { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.z-mobile-menu__disclosure[aria-expanded="true"] .z-mobile-menu__chevron { transform: rotate(180deg); }

.z-mobile-menu__sub { display: grid; gap: 4px; padding-block-end: var(--space-2); }
.z-mobile-menu__sub[hidden] { display: none; }
.z-mobile-menu__segment {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--target-comfort);
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: linear-gradient(var(--z-diagonal), var(--seg-soft) 0 40%, transparent 40.2%), var(--surface);
}
.z-mobile-menu__segment[data-segment="business"]   { --seg: var(--seg-business); --seg-soft: var(--seg-business-soft); }
.z-mobile-menu__segment[data-segment="startup"]    { --seg: var(--seg-startup);  --seg-soft: var(--seg-startup-soft); }
.z-mobile-menu__segment[data-segment="government"] { --seg: var(--seg-gov);      --seg-soft: var(--seg-gov-soft); }
.z-seg-tile--sm { width: 44px; height: 44px; clip-path: polygon(10.5px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 10.5px) 100%, 0 100%, 0 9px); }
.z-mobile-menu__all { margin-block-start: 4px; }

.z-mobile-menu__utils {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: var(--space-2) var(--page-padding);
}
.z-mobile-menu__cta {
    position: sticky;
    inset-block-end: 0;
    padding: var(--space-2) var(--page-padding) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--bg);
    border-block-start: 1px solid var(--border);
}

html.z-scroll-locked, html.z-scroll-locked body { overflow: hidden; }

@media (min-width: 64em) {
    .z-mobile-menu { display: none !important; }
}

/* ---------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------- */
.z-footer {
    --z-field-at: 85% 0%;
    position: relative;
    margin-block-start: var(--space-6);
    padding-block: 0 var(--space-4);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.9375rem;
    overflow: hidden;
}
.z-footer__divider { margin-block-end: var(--space-8); }
.z-footer__divider .z-divider { margin-block-start: -1px; }
.z-footer .z-container { position: relative; }

.z-footer__top { display: grid; gap: var(--space-6); }
.z-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 42ch; }
.z-footer__slogan { margin: 0; color: var(--brand); font-weight: var(--fw-semibold); font-size: var(--fs-small); letter-spacing: 0.02em; }
.z-footer__tagline { margin: 0 0 var(--space-1); color: var(--text-muted); line-height: var(--lh-body); }

.z-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.z-footer__heading {
    margin: 0 0 12px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
[lang="ar"] .z-footer__heading { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; }
.z-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.z-footer__col a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target-min);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.z-footer__col a:hover { color: var(--text); }
.z-footer__contact bdi { overflow-wrap: anywhere; }

.z-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
}
.z-footer__copy { margin: 0; font-size: var(--fs-small); }
.z-footer__legal, .z-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.z-footer__legal a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--fs-small); color: var(--text-muted); }
.z-footer__legal a:hover { color: var(--text); }
.z-footer__social { gap: 4px; }

@media (min-width: 48em) {
    .z-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
    .z-footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
}
@media (max-width: 63.999em) {
    /* مساحة لشريط الـ CTA الثابت حتى ما يغطي آخر محتوى بالتذييل */
    .z-footer { padding-block-end: calc(var(--space-4) + 80px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   9. Sticky mobile CTA — <1024px، بعد تجاوز أول شاشة
   --------------------------------------------------------------------- */
.z-sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky-cta);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px var(--page-padding) calc(12px + env(safe-area-inset-bottom));
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform var(--dur-base) var(--ease-out);
}
.z-sticky-cta[hidden] { display: none; }
.z-sticky-cta--single { grid-template-columns: 1fr; }
.z-sticky-cta.is-visible { transform: translateY(0); }
.z-sticky-cta .z-btn { min-height: var(--target-comfort); padding-inline: 12px; }
@media (min-width: 64em) { .z-sticky-cta { display: none !important; } }

/* ---------------------------------------------------------------------
   10. Admin placeholder — يظهر للأدمن المسجّل فقط (راجع admin_placeholder())
   --------------------------------------------------------------------- */
.z-placeholder {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px dashed var(--warning);
    color: var(--warning);
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-small);
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------
   11. Statistics row — توهج خلفي + نمط Z + فواصل مائلة بعقدة Z
   --------------------------------------------------------------------- */
.z-stats-band { padding-block: var(--space-6); }
.z-stats {
    --cut-x: 28px;
    --cut-y: 24px;
    --z-edge: var(--border-strong);
    --z-fill: radial-gradient(60% 120% at 50% 0%, var(--brand-soft), transparent 70%), var(--surface);
    --z-field-at: 50% 0%;
    padding: var(--space-4) var(--space-3);
}
.z-stats::after { z-index: 0; }  /* نمط Z فوق التعبئة وتحت المحتوى */
.z-stats__glow {
    position: absolute;
    inset-block-start: -40%;
    inset-inline: 20%;
    height: 90%;
    background: var(--glow-accent);
    pointer-events: none;
    z-index: 0;
}
.z-stats__list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.z-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-inline: var(--space-2);
    text-align: center;
}
.z-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-block-end: 6px;
    color: var(--brand);
    background: var(--brand-soft);
    clip-path: polygon(10.5px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 10.5px) 100%, 0 100%, 0 9px);
}
.z-stat__value {
    font-family: var(--font-heading-en);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}
.z-stat__label { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.4; max-width: 18ch; }

/* فاصل: خط رفيع متدرج + عقدة على شكل شريط Z بالمنتصف */
.z-stat + .z-stat::before,
.z-stat + .z-stat::after { content: ""; position: absolute; inset-inline-start: 0; pointer-events: none; }
.z-stat + .z-stat::before {
    inset-block: 8% 8%;
    width: 1px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--z-line) 25%, var(--z-line) 75%, transparent);
}
.z-stat + .z-stat::after {
    inset-block-start: calc(50% - 12px);
    width: 28px;
    height: 24px;
    margin-inline-start: -14px;
    background: linear-gradient(180deg, var(--brand), var(--primary-solid));
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    filter: drop-shadow(0 0 8px var(--brand));
}
@media (max-width: 47.999em) {
    /* عمودين: الفاصل بس بين عناصر نفس الصف */
    .z-stat:nth-child(odd)::before, .z-stat:nth-child(odd)::after { display: none; }
}
@media (min-width: 48em) {
    .z-stats { padding: var(--space-5) var(--space-4); }
    .z-stats__list { grid-template-columns: repeat(var(--stat-count, 4), minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   12. Sections — رأس القسم، اللوحة بقص Z الكبير، الشبكات
   --------------------------------------------------------------------- */
.z-section { position: relative; padding-block: calc(var(--section-space) / 2); }
.z-section--glow::before {
    content: "";
    position: absolute;
    inset: 10% 0 0;
    background: radial-gradient(45% 60% at 80% 40%, var(--brand-soft), transparent 70%),
                radial-gradient(35% 50% at 10% 80%, var(--accent-soft), transparent 70%);
    pointer-events: none;
    z-index: -2;
}

.z-section-head { max-width: 760px; margin: 0 auto var(--space-6); text-align: center; }
.z-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-text, var(--brand));
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
[lang="ar"] .z-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.z-eyebrow::before {
    content: "";
    width: 18px;
    height: 15px;
    background: currentColor;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.z-h2 {
    margin: 14px 0 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-heading);
    color: var(--text);
    text-wrap: balance;
}
.z-lead { margin: 16px auto 0; max-width: 60ch; color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.z-section-actions { display: flex; justify-content: center; margin-block-start: var(--space-6); }

.z-grid-3 { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) and (max-width: 63.999em) { .z-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .z-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* لوحة قسم بقص Z كبير (84×72 = 3× نسبة الشعار) — حافتين مائلتين واضحتين
   مع خط إبراز لامع على كل حافة */
.z-panel {
    --cut-x: 42px;
    --cut-y: 36px;
    position: relative;
    isolation: isolate;
    padding: var(--space-6) var(--space-3);
    background: var(--panel-fill);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
@media (min-width: 48em) {
    .z-panel { --cut-x: 84px; --cut-y: 72px; padding: var(--space-8) var(--space-6); }
}
.z-panel__cutline {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    width: var(--cut-x);
    height: var(--cut-y);
    z-index: 2;
    background: linear-gradient(to bottom right, transparent calc(50% - 2.5px), var(--z-cut-color) calc(50% - 2.5px), var(--z-cut-color) calc(50% + 2.5px), transparent calc(50% + 2.5px));
    pointer-events: none;
}
.z-panel__cutline--end { inset-block-start: auto; bottom: 0; left: auto; right: 0; }

/* ---------------------------------------------------------------------
   13. Cards — زجاج + ظلال بطبقتين + قص Z بحواف مُبرزة
   clip-path بيقص box-shadow، فالظل طبقات منفصلة (span) بنفس الشكل
   ومغبّشة بـ filter، وما بتكون أب للسطح عشان backdrop-filter يشتغل.
   --------------------------------------------------------------------- */
.z-card {
    --cut-x: 28px;
    --cut-y: 24px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-base) var(--ease-out);
}
.z-card__shadow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.z-card__shadow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shadow-plate);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-card__shadow--near { filter: blur(5px); transform: translateY(4px); opacity: 0.55; }
.z-card__shadow--far  { filter: blur(28px); transform: translateY(20px) scale(0.95); opacity: 0.6; }

.z-card__surface {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--card-fill);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 var(--card-highlight), inset 0 0 0 1px var(--card-border);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-card__cutline {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    width: var(--cut-x);
    height: var(--cut-y);
    z-index: 3;
    background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--z-card-accent, var(--z-cut-color)) calc(50% - 1.5px), var(--z-card-accent, var(--z-cut-color)) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    pointer-events: none;
    transition: filter var(--dur-base) var(--ease-out);
}
.z-card__cutline--end { inset-block-start: auto; bottom: 0; left: auto; right: 0; opacity: 0.6; }

.z-card:hover { transform: translateY(-6px); }
.z-card:hover .z-card__shadow--near { transform: translateY(8px); opacity: 0.7; }
.z-card:hover .z-card__shadow--far  { transform: translateY(34px) scale(0.98); opacity: 0.9; }
.z-card:hover .z-card__cutline { filter: drop-shadow(0 0 6px var(--z-card-accent, var(--z-cut-color))); }
.z-card:active { transform: translateY(-2px); }

/* البطاقة كلها قابلة للنقر برابط واحد؛ حلقة التركيز على الغلاف (مش مقصوص) */
.z-stretched::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.z-stretched:focus-visible { outline: none; }
.z-card:has(.z-stretched:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.z-card .z-link-arrow { margin-block-start: auto; }

.z-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text); }
.z-card__text { margin: 0; color: var(--text-muted); line-height: var(--lh-body); }

.z-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border: 1px solid currentColor;
    background: transparent;
}
.z-badge--success { color: var(--success); }
.z-badge--warning { color: var(--warning); }
.z-badge--seg { color: var(--seg); }

.z-ticks { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.z-ticks li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 0.9375rem; }
.z-ticks li::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 10px;
    background: var(--seg, var(--brand));
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* خدمات: لون الشريحة */
.z-service-card[data-segment="business"]   { --seg: var(--seg-business); --z-card-accent: var(--seg-business); }
.z-service-card[data-segment="startup"]    { --seg: var(--seg-startup);  --z-card-accent: var(--seg-startup); }
.z-service-card[data-segment="government"] { --seg: var(--seg-gov);      --z-card-accent: var(--seg-gov); }
.z-service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-block-end: 8px; }

/* أعمال: الغلاف أعلى البطاقة */
.z-work-card .z-card__surface { padding: 0; gap: 0; }
.z-work-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #140526; }
.z-work-card__media > * { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.z-work-card:hover .z-work-card__media > * { transform: scale(1.04); }
.z-work-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--space-3); }
.z-work-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.z-work-card__client { color: var(--text-muted); font-size: var(--fs-small); }
.z-work-card[data-type="platform"] { --z-card-accent: #4687FF; }
.z-work-card[data-type="portal"]   { --z-card-accent: var(--seg-gov); }
.z-work-card[data-type="app"]      { --z-card-accent: var(--seg-startup); }

/* تقييمات */
.z-review-card { margin: 0; }
.z-review-card__top { display: flex; align-items: center; justify-content: space-between; }
.z-stars { display: inline-flex; gap: 2px; }
.z-stars .is-on { color: var(--warning); fill: currentColor; }
.z-stars .is-off { color: var(--text-muted); opacity: 0.5; }
.z-review-card__quote { color: var(--brand); opacity: 0.35; }
.z-review-card__text { margin: 0; flex: 1; }
.z-review-card__text p { margin: 0; color: var(--text); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.z-review-card__by { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------------------------------------------------------------------
   14. Final CTA — تدرج أزرق عميق + نمط Z أبيض + حرف Z كبير مفرّغ
   (بلوك براند بنفس الألوان بالوضعين؛ نص أبيض ≥5.17:1 على أفتح نقطة)
   --------------------------------------------------------------------- */
.z-cta {
    --cut-x: 42px;
    --cut-y: 36px;
    --z-field-color: #FFFFFF;
    --z-field-opacity: 0.16;
    --z-field-at: 90% 10%;
    --z-cut-color: #FFFFFF;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-8) var(--space-3);
    color: #FFFFFF;
    background:
        radial-gradient(40% 70% at 95% 0%, rgba(139, 92, 246, 0.45), transparent 70%),
        linear-gradient(125deg, #2563EB 0%, #1D4ED8 38%, #1E2A78 72%, #1A0B45 100%);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
@media (min-width: 48em) { .z-cta { --cut-x: 84px; --cut-y: 72px; padding: var(--space-10) var(--space-8); } }
.z-cta__mark {
    position: absolute;
    inset-block: -12% -12%;
    inset-inline-end: -4%;
    height: 124%;
    width: auto;
    fill: none;
    stroke: #FFFFFF;
    stroke-opacity: 0.22;
    stroke-width: 0.35;
    z-index: 0;
    pointer-events: none;
}
.z-cta__content { position: relative; z-index: 1; max-width: 640px; }
.z-cta .z-h2 { color: #FFFFFF; }
.z-cta .z-lead { margin-inline: 0; color: rgba(255, 255, 255, 0.86); }
.z-eyebrow--light { color: #FFFFFF; }
.z-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--space-4); }

.z-btn--light { background: #FFFFFF; color: #1D4ED8; box-shadow: 0 10px 24px rgba(10, 4, 40, 0.35); }
.z-btn--light:hover { background: #EEF2FF; color: #1E3A8A; }
.z-btn--outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); }
.z-btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.z-cta :focus-visible { outline-color: #FFFFFF !important; }

/* ---------------------------------------------------------------------
   15. Hero — نص + Audience switcher + visual بثلاث طبقات مقصوصة Z
   (العنوان عنصر LCP وما عليه أنيميشن؛ باقي العناصر fade-up خفيف)
   --------------------------------------------------------------------- */
.z-hero {
    --z-field-at: 78% 35%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-6) var(--space-8);
}
.z-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 78% 30%, var(--brand-soft), transparent 70%),
        radial-gradient(30% 40% at 95% 90%, var(--accent-soft), transparent 70%),
        radial-gradient(40% 50% at 5% 10%, var(--brand-soft), transparent 70%);
}
/* شعاعين مائلين بزاوية قطر الـ Z عبر الـ Hero — "خطوط معمارية" */
.z-hero__bg::before,
.z-hero__bg::after {
    content: "";
    position: absolute;
    inset-block: -10% -10%;
    width: 180px;
    background: linear-gradient(180deg, transparent, var(--z-line), transparent);
    opacity: 0.12;
    clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%);
}
.z-hero__bg::before { inset-inline-start: 52%; }
.z-hero__bg::after  { inset-inline-start: 64%; width: 90px; opacity: 0.08; }

.z-hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}
@media (min-width: 64em) {
    .z-hero { padding-block: var(--space-8) var(--space-10); }
    .z-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); min-height: min(76vh, 720px); }
}

.z-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.z-hero__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
    text-wrap: balance;
}
[lang="ar"] .z-hero__title { line-height: var(--lh-heading); letter-spacing: 0; }
.z-hero__title .gradient-text {
    color: transparent;
    background: linear-gradient(100deg, var(--brand) 20%, var(--seg-startup) 110%);
    -webkit-background-clip: text;
    background-clip: text;
}
.z-hero__lead { margin: 0; max-width: 58ch; color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); }

.z-anim-up { animation: z-fade-up var(--dur-slow) var(--ease-out) both; }
.z-hero__copy .z-anim-up:nth-child(3) { animation-delay: 80ms; }
.z-hero__copy .z-anim-up:nth-child(4) { animation-delay: 160ms; }
.z-hero__copy .z-anim-up:nth-child(5) { animation-delay: 240ms; }
@keyframes z-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .z-anim-up { animation: none; } }

/* Audience switcher */
.z-audience { margin: 0; padding: 0; border: 0; min-width: 0; width: 100%; display: grid; gap: 12px; }
.z-audience__legend { padding: 0; margin-block-end: 10px; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.z-audience__options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-button);
}
.z-audience__option { position: relative; }
.z-audience__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.z-audience__option span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target-min);
    padding-inline: 14px;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: var(--fw-semibold);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.z-audience__option:hover span { color: var(--text); }
.z-audience__option input:checked + span { background: var(--primary-solid); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.z-audience__option input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.z-audience__panels { display: grid; }
.z-audience__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.z-audience__panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }
html:not(.js) .z-audience__panel:not(.is-active) { display: none; }
.z-audience__panel p { margin: 0 0 10px; color: var(--text); max-width: 56ch; }
.z-audience__examples { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.z-audience__examples li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--fs-small);
}
.z-audience__examples li::before { content: ""; width: 10px; height: 8px; background: var(--brand); clip-path: polygon(4.7px 0, 100% 0, calc(100% - 4.7px) 100%, 0 100%); }

.z-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Visual: ثلاث طبقات. الظل على الطبقة (filter)، والقص على الـ SVG داخلها */
.z-hero__visual {
    --dir-x: 1;
    --px: 0;
    --py: 0;
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 5 / 4;
}
.z-hero__frame {
    --cut-x: 42px;
    --cut-y: 36px;
    position: absolute;
    inset-block: 8% 2%;
    inset-inline: 10% 4%;
    background: var(--panel-fill);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
    opacity: 0.9;
}
.z-hero__frame::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    left: 0;
    width: 42px;
    height: 36px;
    background: linear-gradient(to bottom right, transparent calc(50% - 2px), var(--z-cut-color) calc(50% - 2px), var(--z-cut-color) calc(50% + 2px), transparent calc(50% + 2px));
}
.z-hero__layer {
    --cut-x: 21px;
    --cut-y: 18px;
    position: absolute;
    filter: drop-shadow(0 18px 30px rgba(4, 0, 12, 0.45)) drop-shadow(0 2px 4px rgba(4, 0, 12, 0.35));
    transition: transform 500ms var(--ease-out), opacity 400ms var(--ease-out);
    opacity: 0.82;
}
:root[data-theme="light"] .z-hero__layer { filter: drop-shadow(0 18px 30px rgba(40, 20, 90, 0.22)) drop-shadow(0 2px 4px rgba(40, 20, 90, 0.15)); }
.z-hero__layer > svg {
    display: block;
    width: 100%;
    height: 100%;
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-hero__layer::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    left: 0;
    width: var(--cut-x);
    height: var(--cut-y);
    background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--layer-accent) calc(50% - 1.5px), var(--layer-accent) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.z-hero__layer--business   { --layer-accent: #4687FF; top: 0;   inset-inline-start: 14%; width: 80%; aspect-ratio: 16 / 10; z-index: 2;
    transform: translate3d(calc(var(--px) * var(--dir-x) * -6px), calc(var(--py) * -6px), 0); }
.z-hero__layer--government { --layer-accent: #F6C45C; top: 46%; inset-inline-start: 0;   width: 60%; aspect-ratio: 16 / 10; z-index: 1;
    transform: translate3d(calc(var(--px) * var(--dir-x) * 10px), calc(var(--py) * 8px), 0); }
.z-hero__layer--startup    { --layer-accent: #A78BFA; top: 30%; inset-inline-end: 0;  width: 34%; aspect-ratio: 3 / 4;  z-index: 3;
    transform: translate3d(calc(var(--px) * var(--dir-x) * 16px), calc(var(--py) * 12px), 0); }

/* تركيز الشريحة المختارة: الطبقة المطابقة بتتقدم وتكبر، والباقي بيخفت */
.z-hero__visual[data-focus="business"]   .z-hero__layer--business,
.z-hero__visual[data-focus="government"] .z-hero__layer--government,
.z-hero__visual[data-focus="startup"]    .z-hero__layer--startup { opacity: 1; z-index: 4; }
.z-hero__visual[data-focus="business"]   .z-hero__layer--business   { transform: translate3d(calc(var(--px) * var(--dir-x) * -6px), calc(var(--py) * -6px - 6px), 0) scale(1.03); }
.z-hero__visual[data-focus="government"] .z-hero__layer--government { transform: translate3d(calc(var(--px) * var(--dir-x) * 10px), calc(var(--py) * 8px - 6px), 0) scale(1.05); }
.z-hero__visual[data-focus="startup"]    .z-hero__layer--startup    { transform: translate3d(calc(var(--px) * var(--dir-x) * 16px), calc(var(--py) * 12px - 6px), 0) scale(1.05); }

/* Trust strip (أدمن فقط لحد ما تتوفر شعارات) */
.z-trust-strip { padding-block: var(--space-3); text-align: center; color: var(--text-muted); font-size: var(--fs-small); }
.z-trust-strip div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 8px; }

/* ---------------------------------------------------------------------
   16. What We Build — list (بدون JS) / accordion / tabs
   --------------------------------------------------------------------- */
.z-caps { display: grid; gap: 12px; }
.z-caps__heading { margin: 0; }
.z-caps__trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--fw-heading);
    text-align: start;
    cursor: pointer;
    clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.z-caps__icon { display: inline-flex; color: var(--brand); }
.z-caps__label { flex: 1; }
.z-caps__chevron { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.z-caps__trigger[aria-expanded="true"] .z-caps__chevron { transform: rotate(180deg); }
html:not(.js) .z-caps__chevron { display: none; }

.z-caps__panel-inner {
    --cut-x: 28px;
    --cut-y: 24px;
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    background: var(--panel-fill);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-caps__panel-inner::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    left: 0;
    width: 28px;
    height: 24px;
    background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--z-cut-color) calc(50% - 1.5px), var(--z-cut-color) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.z-caps.is-accordion .z-caps__panel-inner { margin-block-start: 8px; }
.z-caps__intro { display: flex; gap: var(--space-2); align-items: flex-start; --seg: var(--brand); }
.z-caps__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-heading); color: var(--text); line-height: var(--lh-heading); }
.z-caps__desc { margin: 6px 0 0; color: var(--text-muted); max-width: 60ch; }
.z-caps__cols { display: grid; gap: var(--space-3); }
@media (min-width: 40em) { .z-caps__cols { grid-template-columns: 1fr 1fr; } }
.z-caps h4 { margin: 0 0 10px; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
[lang="ar"] .z-caps h4 { letter-spacing: 0; text-transform: none; }
.z-caps__signals ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.z-caps__signals li { padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text); font-size: var(--fs-small); background: var(--surface); }
.z-caps__stack { margin-block-start: var(--space-3); color: var(--text-muted); font-size: var(--fs-small); }

/* Tabs (≥1024px) */
.z-caps.is-tabs { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.z-caps.is-tabs .z-caps__tablist { grid-column: 1; grid-row: 1; display: grid; gap: 4px; }
.z-caps.is-tabs .z-caps__item { grid-column: 2; grid-row: 1; }
.z-caps.is-tabs .z-caps__heading { display: none; }
.z-caps.is-tabs .z-caps__panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.z-caps__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: var(--fw-semibold);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.z-caps__tab .z-caps__icon { color: inherit; }
.z-caps__tab:hover { background: var(--surface-2); color: var(--text); }
.z-caps__tab[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
.z-caps__tab[aria-selected="true"] .z-caps__icon { color: var(--brand); }
.z-caps__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline-end: 12px;
    width: 14px;
    height: 12px;
    background: var(--brand);
    clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}

/* ---------------------------------------------------------------------
   17. How We Work — timeline أفقي (ديسكتوب) / عمودي (جوال)، يتبع اتجاه اللغة
   --------------------------------------------------------------------- */
.z-process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); position: relative; counter-reset: none; }
.z-process::before {
    content: "";
    position: absolute;
    inset-block: 24px 24px;
    inset-inline-start: 27px;
    width: 2px;
    background: linear-gradient(to bottom, var(--z-line), transparent);
}
.z-process__step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-2); align-items: start; align-content: start; }
.z-process__marker { position: relative; display: grid; justify-items: center; gap: 6px; }
.z-process__num { order: 2; font-family: var(--font-heading-en); font-weight: 800; font-size: 0.8125rem; color: var(--brand-text, var(--brand)); letter-spacing: 0.08em; }
.z-process .z-seg-tile--sm { --seg: var(--primary-solid); --seg-on: #FFFFFF; }
.z-process__title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.1875rem; font-weight: var(--fw-heading); color: var(--text); line-height: var(--lh-heading); }
.z-process__desc { margin: 0 0 12px; color: var(--text-muted); font-size: 0.9375rem; }
.z-process__output {
    margin: 0;
    padding: 10px 12px;
    border-inline-start: 2px solid var(--brand);
    background: var(--brand-soft);
    color: var(--text);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}
.z-process__output span { display: block; color: var(--text-muted); font-size: 0.8125rem; font-weight: var(--fw-semibold); }
@media (min-width: 64em) {
    .z-process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
    .z-process::before { inset-block: 27px auto; inset-inline: 10% 10%; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--z-line) 12%, var(--z-line) 88%, transparent); }
    .z-process__step { grid-template-columns: 1fr; justify-items: start; }
    .z-process__marker { justify-items: start; }
}

/* ---------------------------------------------------------------------
   18. Trust & Security
   --------------------------------------------------------------------- */
.z-trust { display: grid; gap: var(--space-6); }
.z-trust__head { max-width: 720px; }
.z-trust__statement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: var(--space-3) 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: var(--fw-semibold);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
}
.z-trust__statement .z-icon { color: var(--success); flex-shrink: 0; margin-block-start: 2px; }
.z-trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.z-trust__list li { display: flex; gap: 14px; align-items: flex-start; }
.z-trust__list h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: var(--fw-semibold); color: var(--text); }
.z-trust__list p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }
.z-trust__list .z-stat__icon { flex-shrink: 0; margin: 0; }

/* ---------------------------------------------------------------------
   19. ZOVAQ story + letters
   --------------------------------------------------------------------- */
.z-story { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 64em) { .z-story { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); } }
.z-story__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.z-story__intro .z-lead { margin-inline: 0; margin-block-end: var(--space-2); }

.z-letters {
    --cut-x: 42px;
    --cut-y: 36px;
    --z-fill: var(--panel-fill);
    --z-edge: var(--border-strong);
    --z-field-at: 50% 100%;
    padding: var(--space-4) var(--space-3);
}
.z-letters__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.z-letters__btn {
    display: grid;
    place-items: center;
    min-height: 88px;
    border: 1px solid var(--border);
    background: var(--card-fill);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
    clip-path: polygon(10.5px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 10.5px) 100%, 0 100%, 0 9px);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.z-letters__glyph {
    font-family: var(--font-heading-en);
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    transition: transform var(--dur-base) var(--ease-out);
}
.z-letters__btn:hover { color: var(--text); }
.z-letters__btn[aria-expanded="true"] { color: var(--on-primary); background: linear-gradient(160deg, var(--primary-solid), var(--primary-solid-hover)); border-color: transparent; }
.z-letters__btn[aria-expanded="true"] .z-letters__glyph { transform: scale(1.12); }
.z-letters__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring), inset 0 0 0 4px var(--on-primary); }

.z-letters__panels { position: relative; z-index: 1; display: grid; margin-block-start: var(--space-3); }
.z-letters__panel { padding-block: 4px; }
.z-letters.is-enhanced .z-letters__panel { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-out); }
.z-letters.is-enhanced .z-letters__panel[data-collapsed] { opacity: 0; visibility: hidden; }
html:not(.js) .z-letters__panel + .z-letters__panel { margin-block-start: var(--space-3); }
.z-letters__line {
    display: block;
    width: 120px;
    height: 2px;
    margin-block-end: 12px;
    background: linear-gradient(90deg, var(--brand), transparent);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .z-letters__line { transform-origin: right center; background: linear-gradient(-90deg, var(--brand), transparent); }
.z-letters.is-enhanced .z-letters__panel[data-collapsed] .z-letters__line { transform: scaleX(0); }
.z-letters__word { margin: 0; font-family: var(--font-heading-en); font-size: var(--fs-h3); font-weight: 800; color: var(--brand-text, var(--brand)); }
[dir="rtl"] .z-letters__word { text-align: right; }
.z-letters__tagline { margin: 2px 0 6px; color: var(--text); font-weight: var(--fw-semibold); }
.z-letters__desc { margin: 0; color: var(--text-muted); max-width: 52ch; }

/* ---------------------------------------------------------------------
   20. Testimonials carousel
   --------------------------------------------------------------------- */
.z-carousel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); }
.z-carousel__controls { display: flex; gap: 8px; }
.z-carousel__btn { border-color: var(--border-strong); background: var(--surface); color: var(--text); width: var(--target-comfort); height: var(--target-comfort); }
.z-carousel__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.z-carousel__track {
    list-style: none;
    margin: 0;
    padding: 8px 4px 40px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.z-carousel__track:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.z-carousel__slide { scroll-snap-align: start; display: flex; }
.z-carousel__slide > .z-card { flex: 1; }
@media (min-width: 48em) { .z-carousel__track { grid-auto-columns: calc((100% - var(--space-3)) / 2); } }
@media (min-width: 64em) { .z-carousel__track { grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3); } }

/* ---------------------------------------------------------------------
   21. FAQ accordion
   --------------------------------------------------------------------- */
.z-faq-wrap { display: grid; gap: var(--space-4); }
@media (min-width: 64em) { .z-faq-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; } }
.z-faq-wrap__head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.z-accordion { border-block-start: 1px solid var(--border-strong); }
.z-accordion__item { border-block-end: 1px solid var(--border-strong); }
.z-accordion__item h3 { margin: 0; }
.z-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: 64px;
    padding: 14px 4px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    text-align: start;
    cursor: pointer;
}
.z-accordion__trigger:hover { color: var(--brand-text, var(--brand)); }
.z-accordion__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--brand);
    background: var(--brand-soft);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 7px) 100%, 0 100%, 0 6px);
    transition: transform var(--dur-base) var(--ease-out);
}
.z-accordion__trigger[aria-expanded="true"] .z-accordion__icon { transform: rotate(45deg); }
html:not(.js) .z-accordion__icon { display: none; }
.z-accordion__panel p { margin: 0 0 var(--space-3); padding-inline-end: 48px; color: var(--text-muted); max-width: 68ch; }

/* ---------------------------------------------------------------------
   22. Final CTA split — رسالة + بطاقة تواصل زجاجية
   --------------------------------------------------------------------- */
.z-cta--split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 64em) { .z-cta--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.z-cta__contact {
    --cut-x: 21px;
    --cut-y: 18px;
    position: relative;
    z-index: 1;
    padding: var(--space-4) var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
    color: #FFFFFF;
}
.z-cta__contact h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-heading); }
.z-cta__contact > p { margin: 0 0 var(--space-2); color: rgba(255, 255, 255, 0.88); font-size: 0.9375rem; }
.z-cta__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.z-cta__contact a, .z-cta__hours {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--target-comfort);
    padding-inline: 12px;
    color: #FFFFFF;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-button);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.z-cta__contact a:hover { background: rgba(255, 255, 255, 0.12); }
.z-cta__contact bdi { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   23. RTL mirroring للعناصر الزخرفية المرتبطة بجهة المحتوى
   (مواضع التوهج وبؤرة نمط الـ Z بتنعكس مع اللغة. شكل الـ Z نفسه —
   زاوية القص والأقطار — ما بينعكس لأنه شكل الشعار.)
   --------------------------------------------------------------------- */
[dir="rtl"] .z-hero__visual { --dir-x: -1; }
[dir="rtl"] .z-hero { --z-field-at: 22% 35%; }
[dir="rtl"] .z-hero__bg {
    background:
        radial-gradient(50% 60% at 22% 30%, var(--brand-soft), transparent 70%),
        radial-gradient(30% 40% at 5% 90%, var(--accent-soft), transparent 70%),
        radial-gradient(40% 50% at 95% 10%, var(--brand-soft), transparent 70%);
}
[dir="rtl"] .z-field { --z-field-at: 30% 20%; }
[dir="rtl"] .z-footer { --z-field-at: 15% 0%; }
[dir="rtl"] .z-mobile-menu { --z-field-at: 0% 0% !important; }
[dir="rtl"] #reviews { --z-field-at: 80% 50% !important; }
[dir="rtl"] .z-cta {
    --z-field-at: 10% 10%;
    background:
        radial-gradient(40% 70% at 5% 0%, rgba(139, 92, 246, 0.45), transparent 70%),
        linear-gradient(235deg, #2563EB 0%, #1D4ED8 38%, #1E2A78 72%, #1A0B45 100%);
}
[dir="rtl"] .z-section--glow::before {
    background: radial-gradient(45% 60% at 20% 40%, var(--brand-soft), transparent 70%),
                radial-gradient(35% 50% at 90% 80%, var(--accent-soft), transparent 70%);
}

/* ---------------------------------------------------------------------
   24. الصفحات الداخلية (المرحلة 5) — رأس الصفحة بقص Z، مسار التنقل،
   مبدّل الشرائح/الفلاتر، النصوص الطويلة، فهرس المحتوى، دراسة الحالة
   --------------------------------------------------------------------- */
.z-page-hero,
.z-empty,
.z-side-card,
.z-jump,
.z-pillar-card,
.z-404,
.z-case__facts { --seg: var(--seg-business); --seg-soft: var(--seg-business-soft); }
[data-segment="business"]   { --seg: var(--seg-business); --seg-soft: var(--seg-business-soft); --z-card-accent: var(--seg-business); --seg-text: var(--brand-text); }
[data-segment="startup"]    { --seg: var(--seg-startup);  --seg-soft: var(--seg-startup-soft);  --z-card-accent: var(--seg-startup); }
[data-segment="government"] { --seg: var(--seg-gov);      --seg-soft: var(--seg-gov-soft);      --z-card-accent: var(--seg-gov); }

/* رأس الصفحة: شريط بعرض الشاشة يمتد خلف الهيدر الشفاف، قص Z بالزاوية
   السفلية (موازي لقطر الشعار) + خط إبراز + حرف Z مفرّغ كبير */
.z-page-hero {
    --cut-x: 56px;
    --cut-y: 48px;
    --z-field-at: 88% 25%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-block-start: calc(-1 * var(--header-height));
    padding-block: calc(var(--header-height) + var(--space-3)) calc(var(--space-8) + 8px);
    background: var(--panel-fill);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%);
}
@media (min-width: 48em) { .z-page-hero { --cut-x: 126px; --cut-y: 108px; padding-block-end: var(--space-10); } .z-page-hero__mark { height: 520px; width: 520px; inset-block-start: -40px; } }
.z-page-hero--compact { padding-block-end: var(--space-8); }
.z-page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(45% 70% at 90% 20%, var(--seg-soft, var(--brand-soft)), transparent 70%),
        radial-gradient(30% 50% at 70% 100%, var(--accent-soft), transparent 70%);
}
.z-page-hero__mark {
    /* مقاسات ثابتة (مش نسبة من ارتفاع القسم) — ما بيتحرك لما الخطوط تتحمّل (CLS) */
    position: absolute;
    inset-block-start: -24px;
    inset-inline-end: -3%;
    height: 360px;
    width: 360px;
    fill: none;
    stroke: var(--seg);
    stroke-opacity: 0.28;
    stroke-width: 0.3;
    z-index: -1;
    pointer-events: none;
}
.z-page-hero__cutline {
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--cut-x);
    height: var(--cut-y);
    z-index: 2;
    background: linear-gradient(to bottom right, transparent calc(50% - 2px), var(--seg) calc(50% - 2px), var(--seg) calc(50% + 2px), transparent calc(50% + 2px));
    opacity: 0.85;
    pointer-events: none;
}
.z-page-hero__inner { position: relative; z-index: 1; }
.z-page-hero__grid > * { min-width: 0; }
.z-page-hero__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 64em) {
    .z-page-hero--split .z-page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
}
.z-page-hero .z-eyebrow { color: var(--seg-text, var(--seg)); }
.z-page-hero .z-badge { background: var(--surface); }
.z-page-hero:not([data-segment]) .z-eyebrow { color: var(--brand-text, var(--brand)); }
.z-page-hero__title {
    margin: 14px 0 0;
    max-width: 22ch;
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-display);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text);
    text-wrap: balance;
}
.z-page-hero--compact .z-page-hero__title { max-width: 28ch; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.875rem); }
[lang="ar"] .z-page-hero__title { line-height: var(--lh-heading); letter-spacing: 0; }
.z-page-hero__lead { margin: 18px 0 0; max-width: 62ch; color: var(--text-muted); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.z-page-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-start: 20px; color: var(--text-muted); font-size: var(--fs-small); }
.z-page-hero__meta > * { display: inline-flex; align-items: center; gap: 8px; }
.z-page-hero__meta .z-chip { min-height: 32px; padding-inline: 12px; cursor: default; font-size: 0.8125rem; }
.z-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: var(--space-4); }

/* مسار التنقل */
.z-crumbs { margin-block-end: var(--space-3); }
.z-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-small); color: var(--text-muted); }
.z-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.z-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.z-crumbs a:hover { color: var(--text); text-decoration-color: currentColor; }
.z-crumbs [aria-current="page"] { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-semibold); }
.z-crumbs__sep { opacity: 0.6; }

/* مبدّل الشرائح + فلاتر الأعمال: شريط بقص Z، العنصر الحالي معبّى بلون الشريحة */
.z-segnav { position: relative; z-index: 2; margin-block-start: calc(-1 * var(--space-4)); }
.z-segnav ul,
.z-filter ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
}
.z-segnav ul::-webkit-scrollbar, .z-filter ul::-webkit-scrollbar { display: none; }
.z-segnav li:first-child, .z-filter li { --seg: var(--primary-solid); --seg-on: #FFFFFF; }
.z-segnav a,
.z-filter a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--target-min);
    padding-inline: 16px;
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    font-size: 0.9375rem;
    white-space: nowrap;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 10px) 100%, 0 100%, 0 8px);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.z-segnav a:hover, .z-filter a:hover { color: var(--text); background: var(--surface-2); }
.z-segnav a[aria-current="page"], .z-filter a[aria-current="page"] { background: var(--seg); color: var(--seg-on); }
.z-segnav a:focus-visible, .z-filter a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.z-segnav a[aria-current="page"]:focus-visible, .z-filter a[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 2px var(--seg-on); }

/* نظرة عامة على الخدمات: لوحة لكل شريحة */
.z-section--tight { padding-block-start: var(--space-4); }
.z-section-head--start { margin-inline: 0; text-align: start; }
.z-section-head--start .z-lead { margin-inline: 0; }
.z-seg-block + .z-seg-block { padding-block-start: 0; }
.z-seg-block__panel { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .z-seg-block__panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: center; } }
.z-seg-block__intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.z-seg-block__intro .z-eyebrow { margin: 8px 0 0; color: var(--seg-text, var(--seg)); }
.z-seg-block__intro .z-h2 { margin: 0; }
.z-seg-block__text { margin: 0; max-width: 52ch; color: var(--text-muted); }
.z-seg-block__num {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: 0;
    font-family: var(--font-heading-en);
    font-weight: 800;
    font-size: clamp(4rem, 3rem + 4vw, 6.5rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--seg);
    opacity: 0.45;
    pointer-events: none;
}
.z-svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.z-svc-list__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 14px 18px;
    background: var(--card-fill);
    box-shadow: inset 0 1px 0 var(--card-highlight), inset 0 0 0 1px var(--card-border);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
    color: var(--text);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.z-svc-list__link:hover { background: var(--seg-soft); transform: translateX(4px); }
.z-svc-list__link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.z-svc-list__body { display: grid; gap: 2px; min-width: 0; }
.z-svc-list__title { font-weight: var(--fw-semibold); }
.z-svc-list__desc { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.55; }
.z-svc-list__arrow { color: var(--seg); }

/* صفحة الشريحة: "في هذه الصفحة" + بطاقات الخدمات بالتفصيل */
.z-jump { --z-fill: var(--surface); padding: var(--space-4) var(--space-3); }
.z-jump__title { margin: 0 0 8px; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.z-jump ol { list-style: none; margin: 0; padding: 0; }
.z-jump li + li { border-block-start: 1px solid var(--border); }
.z-jump a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; min-height: var(--target-comfort); padding-block: 6px; color: var(--text); font-weight: var(--fw-semibold); transition: color var(--dur-fast) var(--ease-out); }
.z-jump a:hover { color: var(--seg); }
.z-jump__num { font-family: var(--font-heading-en); font-weight: 800; font-size: 0.875rem; color: var(--seg); letter-spacing: 0.06em; }

.z-svc-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .z-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z-svc-card__num { font-family: var(--font-heading-en); font-weight: 800; font-size: 2.25rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--seg); opacity: 0.8; }
.z-svc-card__label { margin: 8px 0 0; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.z-svc-card:target .z-card__surface { box-shadow: inset 0 1px 0 var(--card-highlight), inset 0 0 0 2px var(--seg); }

@media (min-width: 64em) {
    .z-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
    .z-process--3::before { inset-inline: 6% 6%; }
}
.z-other-segs, .z-grid-2 { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .z-other-segs, .z-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* شريط الأدوات فوق القوائم (فلتر + عدد) */
.z-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-block-end: var(--space-4); }
.z-toolbar .z-h2 { margin: 0; }
.z-toolbar__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-heading); color: var(--text); }
.z-toolbar__title q { color: var(--brand-text, var(--brand)); }
.z-toolbar__count { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* حالة فارغة */
.z-empty { --z-fill: var(--surface); display: grid; justify-items: center; gap: 12px; padding: var(--space-8) var(--space-3); text-align: center; }
.z-empty__title { margin: 8px 0 0; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-heading); color: var(--text); }
.z-empty__text { margin: 0; max-width: 48ch; color: var(--text-muted); }
.z-empty__actions { margin-block-start: 8px; }

/* دراسة الحالة */
.z-case-cover {
    --cut-x: 42px;
    --cut-y: 36px;
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #140526;
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-case-cover > img, .z-case-cover > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.z-case-cover__cutline {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cut-x);
    height: var(--cut-y);
    background: linear-gradient(to bottom right, transparent calc(50% - 2px), var(--z-card-accent, #4687FF) calc(50% - 2px), var(--z-card-accent, #4687FF) calc(50% + 2px), transparent calc(50% + 2px));
}
.z-case-cover[data-type="portal"] { --z-card-accent: var(--seg-gov); }
.z-case-cover[data-type="app"]    { --z-card-accent: var(--seg-startup); }

.z-case { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .z-case { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); align-items: start; } }
.z-case__overview .z-h2 { margin-block-end: var(--space-3); }
.z-case__facts {
    --z-fill: var(--surface);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
}
@media (min-width: 64em) { .z-case__facts { position: sticky; top: calc(var(--header-height) + var(--space-3)); } }
.z-case__facts-title { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-heading); color: var(--text); }
.z-case__facts dl { margin: 0; display: grid; gap: 12px; }
.z-case__facts dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block-end: 12px; border-block-end: 1px solid var(--border); }
.z-case__facts dt { color: var(--text-muted); font-size: var(--fs-small); }
.z-case__facts dd { margin: 0; color: var(--text); font-weight: var(--fw-semibold); text-align: end; }

.z-case-steps { position: relative; list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
.z-case-steps::before { content: ""; position: absolute; inset-block: 22px 22px; inset-inline-start: 21px; width: 2px; background: linear-gradient(to bottom, var(--z-line), transparent); }
.z-case-steps__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); }
.z-case-steps__item[data-step="problem"]  { --seg: var(--seg-gov); }
.z-case-steps__item[data-step="solution"] { --seg: var(--seg-business); }
.z-case-steps__item[data-step="result"]   { --seg: var(--success); }
.z-case-steps__marker { display: grid; justify-items: center; gap: 6px; }
.z-case-steps__num { position: relative; padding: 2px 4px; background: var(--bg); font-family: var(--font-heading-en); font-weight: 800; font-size: 0.8125rem; color: var(--text-muted); letter-spacing: 0.08em; }
.z-case-steps__title { margin: 6px 0 10px; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-heading); color: var(--text); }

/* نصوص طويلة (قصة، مقال، صفحات قانونية) — محتوى HTML من الأدمن */
.z-prose { max-width: 70ch; color: var(--text); line-height: 1.8; }
.z-prose > :first-child { margin-block-start: 0; }
.z-prose p { margin: 0 0 1.1em; }
.z-prose--article { font-size: var(--fs-body-lg); }
.z-prose h2 { margin: 1.8em 0 0.6em; font-family: var(--font-heading); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: var(--fw-heading); line-height: var(--lh-heading); color: var(--text); }
.z-prose h3 { margin: 1.5em 0 0.5em; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-heading); color: var(--text); }
.z-prose ul, .z-prose ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.z-prose li { margin-block-end: 0.4em; }
.z-prose li::marker { color: var(--brand); }
.z-prose a { color: var(--brand-text, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.z-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; padding-inline: 20px 0; border-inline-start: 3px solid var(--brand); color: var(--text-muted); }
.z-prose img { max-width: 100%; height: auto; }
.z-prose code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 0.9em; }

/* تخطيط مستند + فهرس جانبي ثابت */
.z-doc { display: grid; gap: var(--space-5); }
@media (min-width: 64em) { .z-doc--toc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.z-doc__body { min-width: 0; max-width: 76ch; }
.z-doc__cover { margin-block-end: var(--space-5); }
.z-doc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block-start: var(--space-6); padding-block-start: var(--space-3); border-block-start: 1px solid var(--border); }
.z-doc__contact { margin: 0; color: var(--text-muted); }
.z-doc__contact a { color: var(--brand-text, var(--brand)); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.z-toc { padding-inline-start: 16px; border-inline-start: 2px solid var(--z-line); }
@media (min-width: 64em) { .z-toc { position: sticky; top: calc(var(--header-height) + var(--space-3)); } }
.z-toc__title { margin: 0 0 8px; color: var(--text-muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.z-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.z-toc a { display: flex; align-items: center; min-height: 40px; color: var(--text-muted); font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease-out); }
.z-toc a:hover { color: var(--text); }

/* شريط تقدّم القراءة تحت الهيدر */
.z-progress { position: fixed; inset-block-start: var(--header-height); inset-inline: 0; z-index: var(--z-header); height: 3px; pointer-events: none; }
.z-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); transform: scaleX(0); transform-origin: left center; }
html:not(.js) .z-progress { display: none; }

/* بطاقات المقالات */
.z-post-card .z-card__surface { padding: 0; gap: 0; }
.z-post-card--text .z-card__surface { padding: var(--space-4) var(--space-3) var(--space-3); gap: 12px; }
.z-post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #140526; }
.z-post-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.z-post-card__art {
    --z-field-color: #FFFFFF;
    --z-field-opacity: 0.22;
    --z-field-at: 70% 30%;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1D4ED8 0%, #1E2A78 55%, #1A0B45 100%);
}
.z-post-card__art[data-variant="1"] { background: linear-gradient(135deg, #6D28D9 0%, #3B1C8C 55%, #1A0B45 100%); }
.z-post-card__art[data-variant="2"] { background: linear-gradient(135deg, #0F766E 0%, #134E6F 55%, #1A0B45 100%); }
.z-post-card__art svg { width: 30%; height: auto; fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.7); stroke-width: 0.6; transition: transform var(--dur-slow) var(--ease-out); }
.z-post-card:hover .z-post-card__art svg { transform: scale(1.06); }
.z-post-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--space-3); }
.z-post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: var(--fs-small); }

/* البحث */
.z-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 540px;
    padding: 6px;
    padding-inline-start: 16px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
}
.z-search:focus-within { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.z-search__icon { color: var(--text-muted); }
.z-search__input { flex: 1; min-width: 0; min-height: var(--target-min); border: 0; background: transparent; color: var(--text); font: inherit; }
.z-search__input::placeholder { color: var(--text-muted); opacity: 1; }
.z-site .z-search__input:focus-visible { outline: none; }
.z-search__input::-webkit-search-cancel-button { cursor: pointer; }
.z-search__btn { flex-shrink: 0; }
.z-page-hero__actions .z-search { flex: 1 1 100%; }
@media (max-width: 29.999em) { .z-search__btn { padding-inline: 14px; } }

/* ترقيم الصفحات */
.z-pagination { margin-block-start: var(--space-6); }
.z-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.z-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: var(--target-min);
    min-height: var(--target-min);
    padding-inline: 14px;
    color: var(--text);
    font-weight: var(--fw-semibold);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 10px) 100%, 0 100%, 0 8px);
}
.z-pagination a:hover { background: var(--surface-2); }
.z-pagination a[aria-current="page"] { background: var(--primary-solid); color: #FFFFFF; box-shadow: none; }
.z-pagination a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }

/* الوظائف */
.z-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.z-job-card .z-card__surface { gap: var(--space-3); }
@media (min-width: 48em) { .z-job-card .z-card__surface { flex-direction: row; align-items: center; justify-content: space-between; } }
.z-job-card__main { display: grid; gap: 8px; flex: 1; min-width: 0; }
.z-job-card__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.z-job-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.z-job-card__apply { position: relative; z-index: 5; flex-shrink: 0; align-self: flex-start; }
@media (min-width: 48em) { .z-job-card__apply { align-self: center; } }
.z-icon--down { transform: rotate(90deg); }

/* من نحن */
.z-about { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .z-about { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-8); align-items: center; } }
.z-about__story .z-h2 { margin-block-end: var(--space-3); }
.z-about__pillars { display: grid; gap: var(--space-4); }

/* الأسئلة الشائعة: القائمة + بطاقة جانبية */
.z-faq-page { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .z-faq-page { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; } }
.z-side-card { --z-fill: var(--surface); --z-field-at: 100% 0%; display: grid; justify-items: start; gap: 12px; padding: var(--space-4) var(--space-3); }
@media (min-width: 64em) { .z-side-card { position: sticky; top: calc(var(--header-height) + var(--space-3)); } }
.z-side-card__title { margin: 8px 0 0; font-family: var(--font-heading); font-size: 1.375rem; font-weight: var(--fw-heading); color: var(--text); }
.z-side-card__text { margin: 0; color: var(--text-muted); }
.z-side-card__actions { display: grid; gap: 8px; width: 100%; margin-block-start: 8px; }
.z-side-card__mail { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); color: var(--brand-text, var(--brand)); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* 404 */
.z-404 { --z-field-at: 50% 40%; min-height: calc(100vh - var(--header-height) - 120px); display: grid; align-items: center; padding-block: var(--space-8); text-align: center; }
.z-404__inner { display: grid; justify-items: center; gap: 12px; }
.z-404 .z-page-hero__title { margin-inline: auto; }
.z-404 .z-page-hero__lead { margin-inline: auto; }
.z-404__mark { display: flex; align-items: center; gap: 0.12em; margin-block-end: 8px; font-family: var(--font-heading-en); font-weight: 800; font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--brand); direction: ltr; }
.z-404__mark svg { height: 0.72em; width: auto; fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.4; }
.z-404__links { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 10px; width: min(100%, 580px); }
@media (min-width: 40em) { .z-404__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z-404__links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px;
    text-align: start;
    color: var(--text);
    font-weight: var(--fw-semibold);
    background: var(--card-fill);
    box-shadow: inset 0 1px 0 var(--card-highlight), inset 0 0 0 1px var(--card-border);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.z-404__links a:hover { background: var(--brand-soft); }
.z-404__links a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }

/* RTL: التوهجات وبؤرة النمط ومحور الحركة تنعكس؛ شكل الـ Z نفسه ثابت */
[dir="rtl"] .z-page-hero { --z-field-at: 12% 25%; }
[dir="rtl"] .z-page-hero__bg {
    background:
        radial-gradient(45% 70% at 10% 20%, var(--seg-soft, var(--brand-soft)), transparent 70%),
        radial-gradient(30% 50% at 30% 100%, var(--accent-soft), transparent 70%);
}
[dir="rtl"] .z-svc-list__link:hover { transform: translateX(-4px); }
[dir="rtl"] .z-progress span { transform-origin: right center; }
[dir="rtl"] .z-side-card { --z-field-at: 0% 0%; }
@media (prefers-reduced-motion: reduce) {
    .z-svc-list__link, .z-svc-list__link:hover, [dir="rtl"] .z-svc-list__link:hover { transition: none; transform: none; }
    .z-post-card__art svg { transition: none; }
}

/* ---------------------------------------------------------------------
   25. نموذج الطلب متعدد الخطوات (المرحلة 6) — كل الحالات:
   Default · Focus · Filled · Valid · Invalid · Server error · Loading · Success
   الحقول بدون clip-path (حلقة التركيز لازم تبان)؛ البطاقات والرقائق بقص Z
   مع حلقة تركيز داخلية (inset) لأن clip-path بيقص الـ outline.
   --------------------------------------------------------------------- */
.z-lf { --cut-x: 28px; --cut-y: 24px; position: relative; display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-3); color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--card-highlight); clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y)); text-align: start; }
@media (min-width: 48em) { .z-lf { padding: var(--space-5) var(--space-4); } }
.z-lf [hidden] { display: none !important; }
.z-lf__hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.z-lf__head { display: grid; gap: var(--space-2); }
.z-lf__title { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--fw-heading); line-height: var(--lh-heading); color: var(--text); }

/* شريط التقدّم */
.z-lf__progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.z-lf__progress li { display: grid; gap: 8px; color: var(--text-muted); font-size: 0.8125rem; font-weight: var(--fw-semibold); }
.z-lf__progress li::before { content: ""; height: 4px; background: var(--border-strong); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transition: background-color var(--dur-base) var(--ease-out); }
.z-lf__progress li.is-done::before, .z-lf__progress li[aria-current="step"]::before { background: var(--primary-solid); }
.z-lf__progress li[aria-current="step"] { color: var(--text); }
.z-lf__progress-num { display: none; }
@media (max-width: 29.999em) { .z-lf__progress li:not([aria-current="step"]) .z-lf__progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ملخص الأخطاء (أعلى الخطوة) + أخطاء السيرفر */
.z-lf__summary { padding: 14px 16px; border-inline-start: 4px solid var(--error); background: var(--surface-2); }
.z-lf__summary:focus { outline: 2px solid var(--error); outline-offset: 2px; }
.z-lf__summary-title { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--error); font-weight: var(--fw-semibold); }
.z-lf__summary ul { margin: 8px 0 0; padding-inline-start: 28px; }
.z-lf__summary ul:empty { display: none; }
.z-lf__summary a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }

/* الخطوات */
.z-lf__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.z-lf:not(.is-stepped) .z-lf__step + .z-lf__step { margin-block-start: var(--space-3); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.z-lf__legend { display: grid; gap: 4px; width: 100%; margin: 0 0 var(--space-2); padding: 0; font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-heading); color: var(--text); }
.z-lf__legend:focus { outline: none; }
.z-lf__count { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--brand-text, var(--brand)); }
.z-lf__note { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: 0.9375rem; }

/* بطاقات الخطوة 1 (radio) */
/* عرض النموذج نفسه (مش الشاشة) هو اللي بيحدد التخطيط — نفس النموذج بالـ CTA الضيق وبصفحة التواصل */
.z-lf { container-type: inline-size; container-name: zlf; }
.z-lf__cards { display: grid; gap: 10px; }
.z-lf__card { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
.z-lf__card .z-seg-tile { grid-row: span 2; }
@container zlf (min-width: 600px) {
    .z-lf__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .z-lf__card { grid-template-columns: 1fr; row-gap: 8px; align-items: start; }
    .z-lf__card .z-seg-tile { grid-row: auto; }
}
.z-lf__card { position: relative; display: grid; align-content: start; gap: 8px; padding: 16px; min-height: 100%; cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px); transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.z-lf__card input, .z-lf__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.z-lf__card .z-seg-tile { width: 44px; height: 44px; clip-path: polygon(10.5px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 10.5px) 100%, 0 100%, 0 9px); }
.z-lf__card-title { font-weight: var(--fw-semibold); color: var(--text); padding-inline-end: 28px; }
.z-lf__card-desc { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.z-lf__card-check { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--seg); color: var(--seg-on); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 6px) 100%, 0 100%, 0 5px); }
.z-lf__card:hover { box-shadow: inset 0 0 0 1px var(--seg); }
.z-lf__card:has(input:checked) { background: var(--seg-soft); box-shadow: inset 0 0 0 2px var(--seg); }
.z-lf__card:has(input:checked) .z-lf__card-check { display: inline-flex; }
.z-lf__card:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--focus-ring); }

/* رقائق الاختيار (خدمات، إطار زمني، ميزانية) */
.z-lf__svc, .z-lf__sub { margin-block-end: var(--space-2); }
.z-lf__svc-label { margin: 0 0 8px; color: var(--text); font-size: 0.9375rem; font-weight: var(--fw-semibold); }
.z-lf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.z-lf__chips--other { margin-block-end: var(--space-2); }
.z-lf__chip { position: relative; }
.z-lf__chip span { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 8px 16px; cursor: pointer; font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 10px) 100%, 0 100%, 0 8px); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.z-lf__chip:hover span { box-shadow: inset 0 0 0 1px var(--brand); }
.z-lf__chip input:checked + span { background: var(--primary-solid); color: #FFFFFF; box-shadow: none; }
.z-lf__chip input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--focus-ring); }
.z-lf__chip input:checked:focus-visible + span { box-shadow: inset 0 0 0 3px var(--surface); }

/* الحقول النصية */
.z-lf__grid { display: grid; gap: 0 var(--space-2); }
@container zlf (min-width: 520px) { .z-lf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z-input { display: grid; align-content: start; gap: 6px; margin-block-end: var(--space-2); }
.z-input label { color: var(--text); font-size: 0.9375rem; font-weight: var(--fw-semibold); }
.z-input__req { color: var(--error); }
.z-input__opt { color: var(--text-muted); font-weight: var(--fw-regular, 400); font-size: var(--fs-small); }
.z-input__hint { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.z-input__control { width: 100%; min-height: var(--target-comfort); padding: 11px 14px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-input); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
textarea.z-input__control { min-height: 120px; resize: vertical; line-height: 1.6; }
.z-input__control::placeholder { color: var(--text-muted); opacity: 1; }
.z-input__control:hover { border-color: var(--text-muted); }
.z-site .z-input__control:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.z-input.is-valid .z-input__control { border-color: var(--success); }
.z-input.is-invalid .z-input__control { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.z-input__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--error); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.z-input__error .z-icon { margin-block-start: 2px; }
.z-lf__sub > .z-input__error, .z-lf__step > .z-input__error { margin-block: 4px var(--space-2); }

/* المراجعة + ملاحظة الخصوصية + أزرار التنقل */
.z-lf__review { position: relative; margin-block-end: var(--space-2); padding: 16px; background: var(--surface-2); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%, 0 12px); }
.z-lf__review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 8px; }
.z-lf__review dt { color: var(--text-muted); font-size: 0.8125rem; }
.z-lf__review dd { margin: 0; color: var(--text); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.z-lf__edit { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target-min); padding: 0; border: 0; background: none; color: var(--brand-text, var(--brand)); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; }
.z-lf__edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.z-lf__privacy { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--fs-small); }
.z-lf__privacy a { color: var(--brand-text, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.z-lf__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: var(--space-2); }
.z-lf__nav .z-btn { min-width: 132px; }
@media (max-width: 29.999em) { .z-lf__nav .z-btn--primary { flex: 1; } }

/* الإرسال: حالة التحميل (النص يضل ظاهر ومقروء + دوّار) */
.z-lf__spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: z-spin 0.8s linear infinite; }
.z-lf__submit.is-sending { cursor: progress; }
.z-lf__submit.is-sending, .z-lf__submit[aria-disabled="true"] { opacity: 1; pointer-events: none; }
.z-lf__submit.is-sending .z-lf__spinner { display: inline-block; }
@keyframes z-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .z-lf__spinner { animation-duration: 2.4s; } }

/* حالة النجاح */
.z-lf--success { justify-items: start; }
.z-lf--success:focus { outline: none; }
.z-lf__success-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--success); color: var(--seg-on); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 16px) 100%, 0 100%, 0 14px); }
.z-lf__success-text { margin: 0; max-width: 56ch; color: var(--text-muted); font-size: var(--fs-body-lg); }

/* داخل شريط الـ CTA الأزرق بالرئيسية: النموذج بألوان الثيم العادية */
.z-cta__form { margin-block-start: var(--space-4); }
.z-cta .z-lf :focus-visible { outline-color: var(--focus-ring) !important; }
.z-cta__contact .z-channels__hours { display: flex; align-items: center; gap: 12px; min-height: var(--target-comfort); padding-inline: 12px; color: #FFFFFF; font-weight: var(--fw-semibold); }
@media (min-width: 64em) { .z-cta--split:has(.z-lf) { align-items: start; } }

/* صفحة التواصل */
.z-contact { display: grid; gap: var(--space-6); }
@media (min-width: 64em) { .z-contact { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; } }
.z-contact__form { min-width: 0; }
.z-contact__form .z-lf { }
.z-channels { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; width: 100%; }
.z-channels a, .z-channels__hours { display: flex; align-items: center; gap: 12px; min-height: var(--target-comfort); padding-inline: 12px; color: var(--text); font-weight: var(--fw-semibold); border-radius: var(--radius-button); transition: background-color var(--dur-fast) var(--ease-out); }
.z-channels a:hover { background: var(--surface-2); }
.z-channels .z-icon { color: var(--brand-text, var(--brand)); }
.z-channels bdi { overflow-wrap: anywhere; }
.z-channels__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }

/* ---------------------------------------------------------------------
   26. موافقة الكوكيز (المرحلة 7) — بطاقة غير حاجبة بقص Z أسفل الشاشة
   الزرّين بنفس الوزن البصري (قبول/رفض متكافئين).
   --------------------------------------------------------------------- */
.z-consent {
    --cut-x: 21px;
    --cut-y: 18px;
    position: fixed;
    inset-block-end: 16px;
    inset-inline: 16px;
    z-index: calc(var(--z-overlay) - 1);
    display: grid;
    gap: 10px;
    max-width: 520px;
    padding: var(--space-3);
    color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 1px 0 var(--card-highlight);
    clip-path: polygon(var(--cut-x) 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut-x)) 100%, 0 100%, 0 var(--cut-y));
}
.z-consent[hidden] { display: none; }
.z-consent__title { margin: 0; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: var(--fw-heading); }
.z-consent__text { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
.z-consent__text a { color: var(--brand-text, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.z-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.z-consent__actions .z-btn { flex: 1 1 140px; }
.z-consent .z-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
.has-consent-banner [data-z-sticky-cta] { display: none !important; }
.has-consent-banner { padding-block-end: var(--z-consent-h, 0px); }
.z-footer__linkbtn { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); color: var(--text-muted); cursor: pointer; }
.z-footer__linkbtn:hover { color: var(--text); }
@media print { .z-consent { display: none !important; } }

/* ---------------------------------------------------------------------
   27. قواعد منقولة من style.css (المرحلة 7 — أداء)
   الصفحات العامة ما عادت تحمّل style.css (+ @import variables.css، سلسلة
   طلبات حاجبة للرسم + 14 @font-face قديمة). هاي كل القواعد اللي كانت
   الصفحات العامة تعتمد عليها منه، منسوخة حرفيًا. style.css نفسه ما تغيّر
   وبيضل محمّل بصفحات /account/ ولوحة التحكم.
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
[data-logo-light] { display: none; }
[data-logo-dark] { display: block; }
:root[data-theme="light"] [data-logo-dark] { display: none; }
:root[data-theme="light"] [data-logo-light] { display: block; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}
.user-menu { position: relative; }
.user-menu__trigger { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 0.85rem; font-weight: 600; position: relative; }
.user-menu__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; flex-shrink: 0; }
.notif-badge { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--color-danger); color: #fff; font-size: 0.65rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.user-menu__dropdown { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 200px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 8px; z-index: 200; }
.user-menu.is-open .user-menu__dropdown { display: block; }
.user-menu__dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--color-text-secondary); }
.user-menu__dropdown a:hover { background: var(--color-bg-surface); color: var(--color-text-primary); }
.user-menu__dropdown .notif-item { display: flex; flex-direction: column; gap: 2px; }
.user-menu__dropdown .notif-item span { font-size: 0.72rem; color: var(--color-text-muted); }
.user-menu__dropdown hr { border: none; border-top: 1px solid var(--color-border); margin: 6px 0; }