/* ===========================================================================
   Samt — طبقة "الاتجاه الفلكي" (Azimuth) للصفحة الرئيسية.
   تُحمَّل بعد samt.css ولا تعدّل أي شيء فيه: كل الأصناف هنا مسبوقة بـ .az-
   والمتغيّرات كلها --az-*، فبقية الصفحات تبقى كما هي حرفياً.

   الثيم يتبع نفس نمط الحالات الثلاث المستخدم في samt.css:
     • النظام داكن            → @media (prefers-color-scheme: dark) مع :not([data-theme='light'])
     • اختيار صريح داكن/فاتح  → :root[data-theme='...'] (يفوز دائماً)
   RTL/LTR: خصائص منطقية فقط (inline/block) — لا حاجة لأي [dir] override.
   =========================================================================== */

/* ---- الوضع الفاتح (الافتراضي، مطابق لأرضية samt.css الفاتحة) ---- */
:root {
    --az-bg: #ffffff;
    --az-bg-2: rgba(38, 8, 16, 0.022);
    --az-bg-3: #f6f4f5;
    --az-panel-a: #ffffff;
    --az-panel-b: #fcfbfc;
    /* Partner logos: monochrome at rest, their own colours on hover. */
    --az-logo-filter: grayscale(1);
    --az-logo-filter-hover: none;
    --az-logo-rest: 0.62;
    --az-line: #eae6e7;
    --az-line-soft: #f1eff0;
    --az-heading: #4a1220;
    --az-ink: #241b1e;
    --az-body: #5f565a;
    --az-dim: #8a8186;
    --az-label: #5f565a;
    --az-gold-t: #a97f16;
    --az-gold-t2: #8f6a12;
    --az-gold-num: #8f7d4e;
    --az-gold-grad: linear-gradient(135deg, #c9a227, #a97f16);
    --az-gold-text-grad: linear-gradient(120deg, #c9a227, #a97f16 70%, #8a6712);
    --az-hero-wash: radial-gradient(85% 65% at 50% 8%, rgba(92, 26, 46, 0.045), transparent 70%);
    --az-grid-line: rgba(38, 8, 16, 0.075);
    --az-header-bg: rgba(255, 255, 255, 0.88);
    --az-ghost-bg: #ffffff;
    --az-ghost-bd: #ded9da;
    --az-dot-off: #ded9da;
    --az-track-off: rgba(38, 8, 16, 0.12);
    --az-cta-a: rgba(92, 26, 46, 0.97);
    --az-cta-b: rgba(38, 8, 16, 0.99);
    --az-cta-bd: rgba(201, 162, 39, 0.45);
    --az-prod-a: #ffffff;
    --az-prod-b: #fbfafb;
    --az-shadow: 0 24px 54px -32px rgba(38, 8, 16, 0.4);
    --az-splash-veil: rgba(255, 255, 255, 0.68);
    /* Maroon accent (icons, ticks), and the background dots (samt-particles.js). */
    --az-maroon: #8a1538;
    --az-maroon-t: #8a1538;
    --az-dot-rgb: 138, 21, 56;
    --az-dot-a: 0.32;
    --az-link-rgb: 138, 21, 56;
    --az-link-a: 0.14;
    --az-cta-text: #e8cfd6;
    /* Footer: the brand maroon on the white theme, the page's own night on the dark one. */
    --az-footer-bg: #260810;
    --az-footer-ink: #d9b8c0;
    --az-footer-head: #ffffff;
    --az-footer-line: rgba(255, 255, 255, 0.12);
}

/* ---- الوضع الداكن — نفس القيم في الحالتين (تفضيل النظام / اختيار صريح) ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --az-bg: #0b0f19;
        --az-bg-2: rgba(17, 24, 39, 0.45);
        --az-bg-3: #080b13;
        --az-panel-a: rgba(17, 24, 39, 0.78);
        --az-panel-b: rgba(17, 24, 39, 0.6);
        --az-logo-filter: grayscale(1) brightness(0) invert(1);
        --az-logo-filter-hover: grayscale(1) brightness(0) invert(1);
        --az-logo-rest: 0.55;
        --az-line: rgba(255, 255, 255, 0.08);
        --az-line-soft: rgba(255, 255, 255, 0.06);
        --az-heading: #ffffff;
        --az-ink: #f3f4f6;
        --az-body: #9ca3af;
        --az-dim: #6b7280;
        --az-label: #d1d5db;
        --az-gold-t: #d4af37;
        --az-gold-t2: #f3c649;
        --az-gold-num: #d4af37;
        --az-gold-grad: linear-gradient(135deg, #f3c649, #d4af37);
        --az-gold-text-grad: linear-gradient(135deg, #ffffff 20%, #d4af37 100%);
        --az-hero-wash: radial-gradient(55% 45% at 50% 22%, rgba(138, 21, 56, 0.32), transparent 72%), radial-gradient(30% 30% at 85% 30%, rgba(212, 175, 55, 0.08), transparent 70%);
        --az-grid-line: rgba(255, 255, 255, 0.05);
        --az-header-bg: rgba(11, 15, 25, 0.85);
        --az-ghost-bg: rgba(17, 24, 39, 0.65);
        --az-ghost-bd: #374151;
        --az-dot-off: #374151;
        --az-track-off: rgba(255, 255, 255, 0.1);
        --az-cta-a: rgba(138, 21, 56, 0.42);
        --az-cta-b: rgba(17, 24, 39, 0.94);
        --az-cta-bd: rgba(138, 21, 56, 0.5);
        --az-prod-a: rgba(17, 24, 39, 0.78);
        --az-prod-b: rgba(17, 24, 39, 0.6);
        --az-shadow: 0 20px 40px -15px rgba(138, 21, 56, 0.25);
        --az-splash-veil: rgba(11, 15, 25, 0.66);
        --az-maroon: #8a1538;
        --az-maroon-t: #e0567f;
        --az-dot-rgb: 212, 175, 55;
        --az-dot-a: 0.3;
        --az-link-rgb: 168, 28, 70;
        --az-link-a: 0.2;
        --az-cta-text: #9ca3af;
        --az-footer-bg: #080b13;
        --az-footer-ink: #9ca3af;
        --az-footer-head: #ffffff;
        --az-footer-line: rgba(255, 255, 255, 0.08);
    }
}
:root[data-theme='dark'] {
    --az-bg: #0b0f19;
    --az-bg-2: rgba(17, 24, 39, 0.45);
    --az-bg-3: #080b13;
    --az-panel-a: rgba(17, 24, 39, 0.78);
    --az-panel-b: rgba(17, 24, 39, 0.6);
    /* On a dark ground a logo's own dark ink disappears, so every mark is set in
       white instead — the usual treatment for a logo wall at night. */
    --az-logo-filter: grayscale(1) brightness(0) invert(1);
    --az-logo-filter-hover: grayscale(1) brightness(0) invert(1);
    --az-logo-rest: 0.55;
    --az-line: rgba(255, 255, 255, 0.08);
    --az-line-soft: rgba(255, 255, 255, 0.06);
    --az-heading: #ffffff;
    --az-ink: #f3f4f6;
    --az-body: #9ca3af;
    --az-dim: #6b7280;
    --az-label: #d1d5db;
    --az-gold-t: #d4af37;
    --az-gold-t2: #f3c649;
    --az-gold-num: #d4af37;
    --az-gold-grad: linear-gradient(135deg, #f3c649, #d4af37);
    --az-gold-text-grad: linear-gradient(135deg, #ffffff 20%, #d4af37 100%);
    --az-hero-wash: radial-gradient(55% 45% at 50% 22%, rgba(138, 21, 56, 0.32), transparent 72%), radial-gradient(30% 30% at 85% 30%, rgba(212, 175, 55, 0.08), transparent 70%);
    --az-grid-line: rgba(255, 255, 255, 0.05);
    --az-header-bg: rgba(11, 15, 25, 0.85);
    --az-ghost-bg: rgba(17, 24, 39, 0.65);
    --az-ghost-bd: #374151;
    --az-dot-off: #374151;
    --az-track-off: rgba(255, 255, 255, 0.1);
    --az-cta-a: rgba(138, 21, 56, 0.42);
    --az-cta-b: rgba(17, 24, 39, 0.94);
    --az-cta-bd: rgba(138, 21, 56, 0.5);
    --az-prod-a: rgba(17, 24, 39, 0.78);
    --az-prod-b: rgba(17, 24, 39, 0.6);
    --az-shadow: 0 20px 40px -15px rgba(138, 21, 56, 0.25);
    --az-splash-veil: rgba(11, 15, 25, 0.66);
    --az-maroon: #8a1538;
    --az-maroon-t: #e0567f;
    --az-dot-rgb: 212, 175, 55;
    --az-dot-a: 0.3;
    --az-link-rgb: 168, 28, 70;
    --az-link-a: 0.2;
    --az-cta-text: #9ca3af;
    --az-footer-bg: #080b13;
    --az-footer-ink: #9ca3af;
    --az-footer-head: #ffffff;
    --az-footer-line: rgba(255, 255, 255, 0.08);
}

/* ---- أرضية الصفحة: تُطبَّق فقط عندما تحتوي الصفحة على هيرو فلكي ---- */
body:has(.az-hero) {
    background: var(--az-bg);
    color: var(--az-ink);
}
/* الهيدر ثابت فوق الهيرو (fixed)، وله أرضية وخطّ سفلي من البداية ليبقى
   منفصلاً بوضوح عن المحتوى. على بقيّة الصفحات يبقى sticky. */
body:has(.az-hero) .site-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
}
.site-header,
body:has(.az-hero) .site-header {
    background: var(--az-header-bg);
    border-block-end: 1px solid var(--az-line);
    box-shadow: 0 1px 0 var(--az-line-soft), 0 6px 18px -14px rgba(38, 8, 16, 0.35);
}
body:has(.az-hero) .main-nav__links a { color: var(--az-body); }
body:has(.az-hero) .main-nav a[aria-current='page'] { color: var(--az-heading); }
body:has(.az-hero) .theme-toggle,
body:has(.az-hero) .nav-toggle,
body:has(.az-hero) .lang-pill,
body:has(.az-hero) .lang-switch {
    background: var(--az-bg-2);
    border-color: var(--az-line);
    color: var(--az-heading);
}
/* Footer stays the navy anchor on every page (samt.css --navy-* is intentionally
   not remapped), so no per-page footer override is needed here. */

/* ---- شريط تقدّم التمرير ---- */
.az-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 2px;
    inline-size: 0;
    background: var(--az-gold-grad);
    z-index: 100;
}

/* ---- الهيرو ---- */
.az-hero {
    position: relative;
    min-block-size: min(88vh, 48rem);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 9rem 2rem 5rem;
    isolation: isolate;
    /* The section also carries samt.css's .hero class (for the site.js pointer
       parallax), which paints a navy background — but the Azimuth palette wants
       the light/dark ground to show so the navy heading stays readable. Reset it
       and drop samt.css's duplicate hero grid (.az-hero__grid provides its own). */
    background: transparent;
}
.az-hero::before { display: none; }
.az-hero__wash,
.az-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.az-hero__wash { background: var(--az-hero-wash); }
.az-hero__grid {
    background-image:
        linear-gradient(var(--az-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--az-grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}
.az-hero__body {
    position: relative;
    z-index: 2;
    text-align: center;
    max-inline-size: 56rem;
}
.az-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--az-gold-t);
}
.az-eyebrow::before {
    content: '';
    display: block;
    inline-size: 7px;
    block-size: 7px;
    background: #c9a227;
    transform: rotate(45deg);
}
.az-hero h1 {
    margin: 1.2rem 0 1.4rem;
    font-size: clamp(2.3rem, 1.5rem + 2.7vw, 3.75rem);
    font-weight: 800;
    /* Readex's tall ascenders and deep descenders collide at 1.1 — the dots of
       one line met the letters of the next — so the two lines get real air. */
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--az-heading);
    max-inline-size: none;
}
.az-hero h1 em {
    display: block; /* the gold accent phrase sits on its own line */
    margin-block-start: 0.12em;
    font-style: normal;
    background: var(--az-gold-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.az-hero__sub {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--az-body);
    max-inline-size: 46ch;
    margin: 0 auto 2.4rem;
}
.az-hero__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.az-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95em 2.1em;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: box-shadow 0.3s ease, background 0.25s ease, border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.az-btn:hover { text-decoration: none; }
.az-btn--gold {
    background: var(--az-gold-grad);
    color: #260810;
}
.az-btn--gold:hover { box-shadow: 0 16px 44px -16px rgba(201, 162, 39, 0.85); }
.az-btn--ghost {
    background: var(--az-ghost-bg);
    color: var(--az-heading);
    border-color: var(--az-ghost-bd);
}
.az-btn--ghost:hover { border-color: rgba(201, 162, 39, 0.6); }

/* ---- أقسام الاتجاه ---- */
.az-section { position: relative; padding-block: 7rem; }
.az-section--tint { background: var(--az-bg-2); }
.az-section--band {
    padding-block: 5rem;
    border-block: 1px solid var(--az-line-soft);
}
.az-shead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-block-end: 3.5rem;
}
.az-shead__label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--az-gold-t);
}
.az-shead h2 {
    margin: 0;
    max-inline-size: 26ch;
    text-wrap: balance;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 800;
    color: var(--az-heading);
    letter-spacing: -0.02em;
}
.az-lead {
    color: var(--az-body);
    font-size: 1.15rem;
    max-inline-size: 60ch;
    margin: 0 0 3.5rem;
}
/* A lead inside a section head takes its own line under the title. */
.az-shead .az-lead { margin: 0; }

/* ---- النقاط المتحركة في الخلفية (samt-particles.js) ---- */
.az-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
/* Content sits above the dots; the header keeps its own higher layer. */
#main-content,
.site-footer { position: relative; z-index: 1; }

/* ---- شارة الهيرو ---- */
.az-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--az-line);
    border-radius: 999px;
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
    backdrop-filter: blur(12px);
    color: var(--az-label);
    font-size: 0.8rem;
    font-weight: 600;
}
.az-badge i {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--az-maroon);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

/* ---- شبكة الخدمات ---- */
.az-svc-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.az-svc-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 2rem;
    border: 1px solid var(--az-line);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
    backdrop-filter: blur(12px);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.az-svc-card:hover,
.az-svc-card:focus-visible {
    border-color: rgba(138, 21, 56, 0.5);
    transform: translateY(-4px);
    box-shadow: var(--az-shadow);
    text-decoration: none;
}
.az-svc-card__icon {
    display: grid;
    place-items: center;
    inline-size: 3.4rem;
    block-size: 3.4rem;
    margin-block-end: 0.6rem;
    border: 1px solid rgba(138, 21, 56, 0.22);
    border-radius: 14px;
    background: rgba(138, 21, 56, 0.08);
    color: var(--az-maroon-t);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.az-svc-card__icon svg {
    inline-size: 1.55rem;
    block-size: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.az-svc-card:hover .az-svc-card__icon,
.az-svc-card:focus-visible .az-svc-card__icon {
    background: linear-gradient(135deg, #8a1538, #5c0e25);
    color: #ffffff;
    transform: scale(1.06);
}
.az-svc-card h3 { margin: 0; font-size: 1.2rem; color: var(--az-heading); }
.az-svc-card p { margin: 0; color: var(--az-body); font-size: 0.92rem; line-height: 1.7; flex: 1; }
.az-svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.6rem;
    color: var(--az-gold-t);
    font-size: 0.82rem;
    font-weight: 700;
    transition: gap 0.3s ease;
}
.az-svc-card__more i {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-block-start: 2px solid currentColor;
    border-inline-start: 2px solid currentColor;
    transform: rotate(-45deg);
}
html[dir='ltr'] .az-svc-card__more i { transform: rotate(135deg); }
.az-svc-card:hover .az-svc-card__more { gap: 0.8rem; }

/* ---- لماذا سمت: نص ونافذة كود ---- */
.az-why {
    display: grid;
    gap: 3.5rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.az-why .az-shead { margin-block-end: 2rem; }
.az-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.az-checks li { display: flex; align-items: flex-start; gap: 1rem; }
.az-checks h3 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--az-heading); }
.az-checks p { margin: 0; color: var(--az-body); font-size: 0.9rem; line-height: 1.65; }
.az-checks__tick {
    position: relative;
    flex: none;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 10px;
    background: rgba(138, 21, 56, 0.12);
}
.az-checks__tick::after {
    content: '';
    position: absolute;
    inset-block-start: 0.7rem;
    inset-inline-start: 0.92rem;
    inline-size: 0.42rem;
    block-size: 0.78rem;
    border-block-end: 2px solid var(--az-maroon-t);
    border-inline-end: 2px solid var(--az-maroon-t);
    transform: rotate(45deg);
}
html[dir='rtl'] .az-checks__tick::after { transform: rotate(45deg) scaleX(-1); inset-inline-start: 0.78rem; }

.az-code {
    margin: 0;
    border: 1px solid var(--az-line);
    border-radius: 20px;
    overflow: hidden;
    background: #0d1117;
    box-shadow: 0 0 50px -10px rgba(138, 21, 56, 0.35);
}
.az-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-block-end: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(17, 24, 39, 0.9);
    direction: ltr;
}
.az-code__dots { display: flex; gap: 0.45rem; }
.az-code__dots i { inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; background: #ef4444cc; }
.az-code__dots i:nth-child(2) { background: #eab308cc; }
.az-code__dots i:nth-child(3) { background: #22c55ecc; }
.az-code__file { color: #6b7280; font: 0.75rem/1 ui-monospace, 'Cascadia Code', Consolas, monospace; }
.az-code pre {
    margin: 0;
    padding: 1.4rem 1.5rem;
    overflow-x: auto;
    color: #d1d5db;
    font: 0.82rem/1.75 ui-monospace, 'Cascadia Code', Consolas, monospace;
    text-align: left;
}
.az-code b { font-weight: 400; }
.az-code .k { color: #c084fc; }
.az-code .t { color: #fde047; }
.az-code .f { color: #60a5fa; }
.az-code .v { color: #fb923c; }
.az-code .c { color: #6b7280; }
@media (max-width: 60rem) {
    .az-why { grid-template-columns: 1fr; }
}

/* ---- اختيار نوع الخدمة في نموذج التواصل ---- */
.svc-pick { border: 0; margin: 0 0 var(--space-3, 1.2rem); padding: 0; min-inline-size: 0; }
.svc-pick legend { padding: 0; margin-block-end: 0.6rem; font-weight: 700; font-size: 0.9rem; }
.svc-pick__grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}
.svc-pick__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--az-line);
    border-radius: 12px;
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
    color: var(--az-ink);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.svc-pick__option input {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: #8a1538;
}
.svc-pick__option:hover { border-color: rgba(138, 21, 56, 0.45); }
.svc-pick__option:has(input:checked) {
    border-color: #8a1538;
    background: rgba(138, 21, 56, 0.12);
    box-shadow: inset 0 0 0 1px #8a1538;
}
.svc-pick__option:has(input:focus-visible) { outline: 2px solid var(--az-gold-t); outline-offset: 2px; }

/* ---- شعارات الشركاء ---- */
.az-shead--center { align-items: center; text-align: center; }
.az-partners { overflow: hidden; }
.az-partners__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.az-partner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 11.5rem;
    block-size: 6rem;
    padding: 1rem 1.4rem;
    border: 1px solid var(--az-line);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
    color: var(--az-heading);
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.az-partner img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 3rem;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    filter: var(--az-logo-filter);
    opacity: var(--az-logo-rest);
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.az-partner__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
    text-align: center;
    opacity: 0.75;
}
a.az-partner:hover,
a.az-partner:focus-visible {
    border-color: var(--az-gold-t);
    transform: translateY(-2px);
    text-decoration: none;
}
a.az-partner:hover img,
a.az-partner:focus-visible img,
span.az-partner:hover img {
    filter: var(--az-logo-filter-hover);
    opacity: 1;
}
/* A small "opens the site" arrow in the corner — the logo is the link. */
.az-partner__go {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-end: 0.6rem;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-block-start: 1.5px solid currentColor;
    border-inline-end: 1.5px solid currentColor;
    color: var(--az-gold-t);
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
a.az-partner:hover .az-partner__go,
a.az-partner:focus-visible .az-partner__go { opacity: 1; }

/* Many partners: one slow, endless row that stops while the visitor looks. */
.az-partners--marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.az-partners--marquee .az-partners__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    inline-size: max-content;
}
@media (prefers-reduced-motion: no-preference) {
    .az-partners--marquee .az-partners__track { animation: az-partners-ltr 45s linear infinite; }
    html[dir='rtl'] .az-partners--marquee .az-partners__track { animation-name: az-partners-rtl; }
    .az-partners--marquee:hover .az-partners__track,
    .az-partners--marquee:focus-within .az-partners__track { animation-play-state: paused; }
}
/* Half the track (one full copy) plus half a gap lands the copy where the original began. */
@keyframes az-partners-ltr { to { transform: translateX(calc(-50% - 0.5rem)); } }
@keyframes az-partners-rtl { to { transform: translateX(calc(50% + 0.5rem)); } }
/* Asked for less motion: no loop — the copy goes and the row wraps instead. */
@media (prefers-reduced-motion: reduce) {
    .az-partners--marquee { -webkit-mask-image: none; mask-image: none; }
    .az-partners--marquee .az-partners__track { flex-wrap: wrap; justify-content: center; inline-size: auto; }
    .az-partners--marquee li[aria-hidden='true'] { display: none; }
}
@media (max-width: 34rem) {
    .az-partner { inline-size: 9.5rem; block-size: 5rem; padding: 0.8rem 1rem; }
    .az-partner img { max-block-size: 2.4rem; }
    .az-partners__track { gap: 0.7rem; }
}

/* ---- بطاقات القيمة ---- */
.az-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.az-card {
    position: relative;
    overflow: hidden;
    padding: 2.2rem 1.8rem;
    border-radius: 20px;
    border: 1px solid var(--az-line);
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
    transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s ease;
}
.az-card:hover {
    border-color: rgba(201, 162, 39, 0.45);
    transform: translateY(-6px);
    box-shadow: var(--az-shadow);
}
/* وهج خفيف يظهر عند المرور (بلا إمالة ولا تتبّع للمؤشر) */
.az-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(16rem 16rem at var(--gx, 50%) var(--gy, 50%),
        rgba(201, 162, 39, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.az-card:hover::after { opacity: 1; }
.az-card > * { position: relative; z-index: 1; }
.az-card__mark {
    display: block;
    inline-size: 15px;
    block-size: 15px;
    background: var(--az-gold-grad);
    border-radius: 3px;
    transform: rotate(45deg);
    margin-block-end: 1.6rem;
}
.az-card h3 { margin: 0 0 0.6rem; font-size: 1.35rem; color: var(--az-heading); }
.az-card p { margin: 0; color: var(--az-body); }
.az-card--dashed {
    border-style: dashed;
    border-color: var(--az-ghost-bd);
    background: none;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--az-dim);
    font-size: 0.9rem;
}
.az-card--dashed:hover { transform: none; box-shadow: none; }

/* ---- الأرقام ---- */
.az-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 2.5rem 1.5rem;
}
.az-stat { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
.az-stat__value {
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    direction: ltr;
    background: var(--az-gold-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.az-stat__label { color: var(--az-label); font-size: 0.9rem; letter-spacing: 0.05em; }

/* ---- الخط الزمني (كيف نعمل) ---- */
.az-timeline { position: relative; padding-inline-start: 3.2rem; }
.az-timeline__rail,
.az-timeline__fill {
    position: absolute;
    inset-inline-start: 1.15rem;
    inline-size: 1px;
}
.az-timeline__rail { inset-block: 0.6rem; background: var(--az-track-off); }
.az-timeline__fill {
    inset-block-start: 0.6rem;
    block-size: 0;
    background: linear-gradient(#e9cd6e, #a97f16);
    box-shadow: 0 0 14px rgba(201, 162, 39, 0.8);
}
.az-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.6rem; }
.az-step { position: relative; }
.az-step__dot {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-start: -2.42rem;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    background: var(--az-bg);
    border: 1.5px solid var(--az-dot-off);
    border-radius: 50%;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.az-step.is-on .az-step__dot {
    border-color: #c9a227;
    box-shadow: 0 0 16px rgba(201, 162, 39, 0.75);
    transform: scale(1.25);
}
.az-step__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.az-step__num { font-size: 0.78rem; font-weight: 800; color: var(--az-gold-num); direction: ltr; }
.az-step h3 { margin: 0; font-size: 1.45rem; color: var(--az-heading); }
.az-step p { margin: 0.4rem 0 0; color: var(--az-body); max-inline-size: 52ch; }

/* ---- بطاقات المنتجات ---- */
/* A gallery of cards earns a wider measure than body copy does, so the grid
   breaks out of the reading container and fits more per row on large screens. */
.container:has(.az-prod-grid) { max-inline-size: 84rem; }
.az-prod-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.az-prod {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--az-line);
    background: linear-gradient(150deg, var(--az-prod-a), var(--az-prod-b));
    padding: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-block-size: 13rem;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.az-prod:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow: var(--az-shadow);
    text-decoration: none;
}
.az-prod__wash { position: absolute; pointer-events: none; }
.az-prod__wash {
    inset: 0;
    background: linear-gradient(to top, rgba(201, 162, 39, 0.2), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.az-prod:hover .az-prod__wash { opacity: 1; }
.az-prod > *:not(.az-prod__wash) { position: relative; z-index: 1; }
.az-prod__badge {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.13);
    color: var(--az-gold-t2);
    border: 1px solid rgba(201, 162, 39, 0.3);
}
.az-prod h3 { margin: 0.3rem 0 0; font-size: 1.08rem; line-height: 1.35; color: var(--az-heading); }
.az-prod p { margin: 0; color: var(--az-body); font-size: 0.86rem; line-height: 1.55; }
.az-prod__more {
    margin-block-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--az-gold-t2);
    font-weight: 700;
}
.az-prod__more i {
    display: inline-block;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-block-start: 2px solid currentColor;
    border-inline-start: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: margin-inline-end 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.az-prod:hover .az-prod__more i { margin-inline-end: 0.45rem; }

/* ---- نداء الختام ---- */
.az-cta {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--az-cta-bd);
    padding: clamp(2rem, 4.5vw, 3.5rem);
    text-align: center;
}
.az-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%, var(--az-cta-a), var(--az-cta-b) 70%);
}
.az-cta::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(90deg, transparent, #e9cd6e, transparent);
}
.az-cta > * { position: relative; z-index: 1; }
.az-cta h2 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.az-cta p { margin: 0 auto 1.8rem; color: var(--az-cta-text); max-inline-size: 46ch; font-size: 1.1rem; }

/* ---- الحركة: كلها مشروطة بتفضيل المستخدم ---- */
@media (prefers-reduced-motion: no-preference) {
    .az-hero .az-eyebrow { animation: az-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .az-hero h1 { animation: az-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both; }
    .az-hero__sub { animation: az-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s both; }
    .az-hero__actions { animation: az-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
}
@keyframes az-rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

@media (max-width: 48rem) {
    /* The header is fixed over the hero here, so the top padding has to clear it
       with room to breathe — 7rem left the eyebrow tucked under the bar. */
    .az-hero { padding: 10rem 1.25rem 4.5rem; min-block-size: auto; }
    .az-hero h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 2.9rem); }
    .az-section { padding-block: 4.5rem; }
}

/* =========================================================================
   SITE-WIDE UNIFICATION
   The Azimuth palette becomes the whole site's theme — not just the home page.
   samt.css's component classes read these semantic tokens, so every page
   (products, about, contact, legal, 404) shares one ground, header, footer and
   type colour in both light and dark, with zero per-page colour work.
   ========================================================================= */

/* Re-point samt.css's tokens at the Azimuth palette. The doubled :root raises
   specificity so this wins over samt.css's own light AND dark token blocks;
   var(--az-*) still resolves per theme, so light/dark both follow automatically. */
:root:root {
    --bg: var(--az-bg);
    --ink: var(--az-ink);
    --muted: var(--az-body);
    --heading: var(--az-heading);
    --surface: var(--az-bg-3);
    --surface-2: var(--az-bg-3);
    --border: var(--az-line);
    --link: var(--az-gold-t);
    --card: var(--az-panel-a);
    --input-bg: var(--az-panel-a);
    --header-bg: var(--az-header-bg);
    --header-bg-scrolled: var(--az-header-bg);
    --pill-bg: var(--az-bg-2);
    --shadow: var(--az-shadow);
    /* Retheme the brand navy → maroon everywhere it's still used (footer, stats
       band, CTA band, gold-button text, language-pill hover). */
    --navy-900: #260810;
    --navy-800: #3c0f1c;
    --navy-700: #5c1a2e;
}

body { background: var(--az-bg); color: var(--az-ink); }
/* Translucent so the page shows through the frosted veil (samt.css blurs it). */
.splash { background: var(--az-splash-veil); }

/* Cards everywhere get the Azimuth panel look (soft gradient, rounded, glow). */
.card {
    border-radius: 20px;
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
}
.card--link:hover { border-color: rgba(201, 162, 39, 0.45); box-shadow: var(--az-shadow); }

/* Buttons: use the same gold pill as the hero across the whole site. */
.btn--primary { background: var(--az-gold-grad); color: #260810; border-radius: 999px; }
.btn--ghost { border-radius: 999px; }
.btn--on-dark { border-radius: 999px; }

/* Prose links pick up the brand gold. */
.prose a, .contact-info a { color: var(--az-gold-t); }

/* =========================================================================
   INNER-PAGE HERO — a compact, on-brand header band for About / Products /
   Contact / Product / legal pages (the big compass hero stays home-only).
   ========================================================================= */
.az-phead {
    position: relative;
    overflow: hidden;
    /* the sticky header already occupies the top of the page, so keep this tight */
    padding-block: clamp(1.6rem, 1.1rem + 2.2vw, 3rem) clamp(1.1rem, 0.8rem + 1.3vw, 1.9rem);
    border-block-end: 1px solid var(--az-line-soft);
    isolation: isolate;
}
/* the first content section right after a page header doesn't need its full top pad */
.az-phead + .az-section { padding-block-start: clamp(1.75rem, 1.25rem + 1.7vw, 2.75rem); }
.az-phead::before { /* faint compass-grid echo of the home hero */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--az-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--az-grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(80% 90% at 80% 0%, #000, transparent 72%);
    mask-image: radial-gradient(80% 90% at 80% 0%, #000, transparent 72%);
}
.az-phead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--az-gold-t);
}
.az-phead__eyebrow::before {
    content: '';
    inline-size: 7px;
    block-size: 7px;
    background: #c9a227;
    transform: rotate(45deg);
}
.az-phead h1 {
    margin: 1rem 0 0.9rem;
    font-size: clamp(2.2rem, 1.6rem + 3.4vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--az-heading);
    max-inline-size: 20ch;
}
.az-phead__sub {
    margin: 0;
    font-size: clamp(1.05rem, 1vw + 0.8rem, 1.25rem);
    color: var(--az-body);
    max-inline-size: 60ch;
}

/* =========================================================================
   READABLE LEGAL / PROSE — inherits the unified tokens; just refine rhythm.
   ========================================================================= */
.az-prose { max-inline-size: 68ch; }
.az-prose > * + * { margin-block-start: 1.1rem; }
.az-prose > :first-child { margin-block-start: 0; } /* no gap above the first line */
.az-prose h2 {
    margin-block-start: 2.4rem;
    font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem);
    color: var(--az-heading);
}
.az-prose ul { padding-inline-start: 1.3rem; display: grid; gap: 0.5rem; }
.az-prose a { color: var(--az-gold-t2); text-underline-offset: 3px; }

/* =========================================================================
   CONTACT FORM — bridge samt.css form classes to the Azimuth palette.
   ========================================================================= */
.field input,
.field select,
.field textarea {
    background: var(--az-panel-a);
    border-color: var(--az-line);
    color: var(--az-ink);
    border-radius: 12px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--az-gold-t); outline-color: var(--az-gold-t); }
.contact-info {
    border-radius: 20px;
    border: 1px solid var(--az-line);
    background: linear-gradient(160deg, var(--az-panel-a), var(--az-panel-b));
}

/* =========================================================================
   PRODUCTS — an impressive, browsable presentation.
   ========================================================================= */
/* Cover image at the top of each product card. */
.az-prod__cover {
    position: relative;
    display: block;
    margin: -1.3rem -1.3rem 0.3rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    background: var(--az-bg-3);
}
.az-prod__cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.az-prod:hover .az-prod__cover img { transform: scale(1.06); }

/* Phones: two compact cards per row rather than one wide one, with the type
   stepped down so the tighter column still reads. */
@media (max-width: 34rem) {
    .az-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
    .az-prod { padding: 0.85rem; min-block-size: 0; border-radius: 13px; }
    .az-prod__cover { margin: -0.85rem -0.85rem 0.25rem; border-start-start-radius: 13px; border-start-end-radius: 13px; }
    .az-prod h3 { font-size: 0.95rem; }
    .az-prod p { font-size: 0.78rem; line-height: 1.5; }
    .az-prod__badge { font-size: 0.62rem; padding: 0.15em 0.55em; }
    .az-prod__more { font-size: 0.78rem; }
}
.az-prod__cover::after { /* legibility veil at the bottom of the cover */
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 45%;
    background: linear-gradient(to top, rgba(21, 6, 9, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.az-prod:hover .az-prod__cover::after { opacity: 1; }
/* the cover bleeds to the card's top/side edges via negative margins that cancel
   the card's 2.2rem padding — so the card keeps its normal padding here. */
/* the corner diamond would fight the cover image — drop it on imaged cards */

/* Category heading + spacing on the products page. */
.az-cat-title {
    font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    font-weight: 800;
    color: var(--az-heading);
    letter-spacing: -0.01em;
    margin-block-end: 1.6rem;
}
.pcat + .pcat { margin-block-start: 3.5rem; }

/* Product detail: a two-column showcase, gallery, features and pricing. */
.az-pd-hero { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60rem) { .az-pd-hero { grid-template-columns: 1.05fr 0.95fr; } }
.az-pd-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.az-pd-hero h1 {
    margin: 0;
    font-size: clamp(2.2rem, 1.6rem + 3.2vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--az-heading);
}
.az-pd-hero__tag { margin: 0; font-size: 1.2rem; color: var(--az-body); max-inline-size: 46ch; }
.az-pd-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-block-start: 0.4rem; }
.az-pd-shot {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--az-line);
    background: linear-gradient(150deg, var(--az-prod-a), var(--az-prod-b));
    box-shadow: var(--az-shadow);
    aspect-ratio: 16 / 11;
}
.az-pd-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.az-pd-badge {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3em 0.95em;
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.14);
    color: var(--az-gold-t2);
    border: 1px solid rgba(201, 162, 39, 0.32);
}

/* Gallery — a refined, browsable grid (opens the existing lightbox). */
.az-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}
.az-gallery__img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid var(--az-line);
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.az-gallery__img:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow: var(--az-shadow);
}

/* Feature checklist with gold diamond bullets. */
.az-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.az-features li {
    position: relative;
    padding-inline-start: 2rem;
    color: var(--az-ink);
}
.az-features li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.5em;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    background: var(--az-gold-grad);
    border-radius: 2px;
    transform: rotate(45deg);
}

/* =========================================================================
   MOBILE HEADER + MENU
   Keep the top bar on a single row (compact language code, tighter gaps), and
   give the drop-down menu a refined, on-brand look.
   ========================================================================= */
@media (max-width: 48rem) {
    /* Tighter cluster so brand + tools never wrap to a second row. */
    .header-tools { gap: 0.5rem; }

    /* Language: a plain compact code (EN / ع) — no globe, no hover-expand — so
       it takes almost no width on a phone. */
    .lang-pill { padding: 0.5rem 0.7rem; gap: 0; min-inline-size: 0; }
    .lang-pill__globe { display: none; }
    .lang-pill__name { display: none; }
    .lang-pill__code { max-inline-size: none; opacity: 1; font-size: 0.9rem; }
    .lang-pill:hover { background: var(--az-bg-2); color: var(--az-heading); box-shadow: none; }

    /* Drop-down menu — an on-brand panel with generous tap targets. */
    .site-header .main-nav {
        inset-inline: 0;
        padding: 0.4rem 1.1rem 1.3rem;
        background: var(--az-header-bg);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-block-end: 1px solid var(--az-line);
        box-shadow: var(--az-shadow);
    }
    .main-nav__links { gap: 0; padding-block-start: 0.3rem; }
    .main-nav__links li { border-block-end: 1px solid var(--az-line-soft); }
    .main-nav__links li:last-child { border-block-end: none; }
    .main-nav__links a {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 1rem 0.4rem;
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--az-ink);
    }
    /* a gold diamond marks the current page (the extra .site-header.nav-open
       lifts specificity above the home-page body:has(.az-hero) nav rule). */
    .site-header.nav-open .main-nav__links a[aria-current='page'] { color: var(--az-gold-t2); }
    .site-header.nav-open .main-nav__links a[aria-current='page']::before {
        content: '';
        inline-size: 7px;
        block-size: 7px;
        flex: none;
        background: var(--az-gold-grad);
        border-radius: 1px;
        transform: rotate(45deg);
    }
    .main-nav__cta {
        align-self: stretch;
        justify-content: center;
        margin-block-start: 1rem;
        padding-block: 0.9rem;
        font-size: 1rem;
    }
    /* a soft open animation (respecting reduced-motion) */
    .site-header.nav-open .main-nav { animation: az-menu-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
    .site-header.nav-open .main-nav { animation: none; }
}
@keyframes az-menu-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

/* ---- الفوتر: ألوانه من الثيم، وحجمه أصغر ---- */
.site-footer {
    background: var(--az-footer-bg);
    color: var(--az-footer-ink);
    border-block-start: 1px solid var(--az-footer-line);
    padding-block: 2.4rem 1.6rem;
    font-size: 0.9rem;
}
.site-footer a { color: var(--az-footer-ink); }
.site-footer a:hover { color: var(--az-gold-t); }
.site-footer h4 { color: var(--az-footer-head); font-size: 0.85rem; margin-block-end: 0.7rem; }
.site-footer p { margin: 0; line-height: 1.7; }
.site-footer__brand { max-inline-size: 34ch; }
.site-footer__grid { gap: 2rem; }
.site-footer__bottom {
    margin-block-start: 1.6rem;
    padding-block-start: 1.2rem;
    border-block-start-color: var(--az-footer-line);
    font-size: 0.8rem;
}

/* ---- شعار «معنى الاسم» في صفحة عن سمت ---- */
.az-motto {
    margin-block-start: 1.8rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--az-gold-t);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--az-heading);
}