/* ===========================================================================
   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: #f8f1ec;
    --az-bg-2: rgba(92, 26, 46, 0.03);
    --az-bg-3: #efe0e1;
    --az-panel-a: #ffffff;
    --az-panel-b: #fdf8f7;
    --az-line: #e9dcdc;
    --az-line-soft: #efe4e4;
    --az-heading: #4a1220;
    --az-ink: #2c1a1f;
    --az-body: #6d5158;
    --az-dim: #8a6b72;
    --az-label: #6d5158;
    --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-tick: rgba(169, 127, 22, 0.4);
    --az-ring: rgba(169, 127, 22, 0.18);
    --az-ring-2: rgba(92, 26, 46, 0.12);
    --az-hero-wash: radial-gradient(80% 60% at 50% 10%, rgba(242, 228, 228, 0.95), transparent 72%);
    --az-grid-line: rgba(92, 26, 46, 0.05);
    --az-header-bg: rgba(248, 241, 236, 0.92);
    --az-ghost-bg: #ffffff;
    --az-ghost-bd: #dcc9cb;
    --az-dot-off: #dcc9cb;
    --az-track-off: rgba(92, 26, 46, 0.14);
    --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-svc-fill: linear-gradient(90deg, rgba(201, 162, 39, 0.12), rgba(201, 162, 39, 0));
    --az-prod-a: #ffffff;
    --az-prod-b: #f6ecec;
    --az-shadow: 0 24px 54px -32px rgba(38, 8, 16, 0.4);
    --az-pop-bg: rgba(255, 255, 255, 0.74);
    --az-splash-veil: rgba(248, 241, 236, 0.66);
}

/* ---- الوضع الداكن — نفس القيم في الحالتين (تفضيل النظام / اختيار صريح) ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --az-bg: #150609;
        --az-bg-2: rgba(255, 255, 255, 0.02);
        --az-bg-3: #100407;
        --az-panel-a: rgba(255, 255, 255, 0.05);
        --az-panel-b: rgba(255, 255, 255, 0.015);
        --az-line: rgba(255, 255, 255, 0.09);
        --az-line-soft: rgba(255, 255, 255, 0.07);
        --az-heading: #ffffff;
        --az-ink: #f0dade;
        --az-body: #c297a1;
        --az-dim: #8f6470;
        --az-label: #b78a94;
        --az-gold-t: #ddbb52;
        --az-gold-t2: #e0bd57;
        --az-gold-num: #a97f16;
        --az-gold-grad: linear-gradient(135deg, #e9cd6e, #c9a227);
        --az-gold-text-grad: linear-gradient(120deg, #e9cd6e, #c9a227 60%, #a97f16);
        --az-tick: rgba(221, 187, 82, 0.42);
        --az-ring: rgba(221, 187, 82, 0.16);
        --az-ring-2: rgba(255, 255, 255, 0.12);
        --az-hero-wash: radial-gradient(80% 60% at 50% 10%, rgba(122, 36, 58, 0.9), transparent 70%);
        --az-grid-line: rgba(255, 255, 255, 0.035);
        --az-header-bg: rgba(21, 6, 9, 0.86);
        --az-ghost-bg: rgba(255, 255, 255, 0.04);
        --az-ghost-bd: rgba(255, 255, 255, 0.2);
        --az-dot-off: #6b3f4a;
        --az-track-off: rgba(255, 255, 255, 0.12);
        --az-cta-a: rgba(92, 26, 46, 0.9);
        --az-cta-b: rgba(21, 6, 9, 0.95);
        --az-cta-bd: rgba(221, 187, 82, 0.32);
        --az-svc-fill: linear-gradient(90deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0));
        --az-prod-a: rgba(92, 26, 46, 0.55);
        --az-prod-b: rgba(38, 8, 16, 0.35);
        --az-shadow: 0 20px 52px -24px rgba(0, 0, 0, 0.7);
        --az-pop-bg: rgba(46, 16, 26, 0.62);
        --az-splash-veil: rgba(21, 6, 9, 0.66);
    }
}
:root[data-theme='dark'] {
    --az-bg: #150609;
    --az-bg-2: rgba(255, 255, 255, 0.02);
    --az-bg-3: #100407;
    --az-panel-a: rgba(255, 255, 255, 0.05);
    --az-panel-b: rgba(255, 255, 255, 0.015);
    --az-line: rgba(255, 255, 255, 0.09);
    --az-line-soft: rgba(255, 255, 255, 0.07);
    --az-heading: #ffffff;
    --az-ink: #f0dade;
    --az-body: #c297a1;
    --az-dim: #8f6470;
    --az-label: #b78a94;
    --az-gold-t: #ddbb52;
    --az-gold-t2: #e0bd57;
    --az-gold-num: #a97f16;
    --az-gold-grad: linear-gradient(135deg, #e9cd6e, #c9a227);
    --az-gold-text-grad: linear-gradient(120deg, #e9cd6e, #c9a227 60%, #a97f16);
    --az-tick: rgba(221, 187, 82, 0.42);
    --az-ring: rgba(221, 187, 82, 0.16);
    --az-ring-2: rgba(255, 255, 255, 0.12);
    --az-hero-wash: radial-gradient(80% 60% at 50% 10%, rgba(122, 36, 58, 0.9), transparent 70%);
    --az-grid-line: rgba(255, 255, 255, 0.035);
    --az-header-bg: rgba(21, 6, 9, 0.86);
    --az-ghost-bg: rgba(255, 255, 255, 0.04);
    --az-ghost-bd: rgba(255, 255, 255, 0.2);
    --az-dot-off: #6b3f4a;
    --az-track-off: rgba(255, 255, 255, 0.12);
    --az-cta-a: rgba(92, 26, 46, 0.9);
    --az-cta-b: rgba(21, 6, 9, 0.95);
    --az-cta-bd: rgba(221, 187, 82, 0.32);
    --az-svc-fill: linear-gradient(90deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0));
    --az-prod-a: rgba(92, 26, 46, 0.55);
    --az-prod-b: rgba(38, 8, 16, 0.35);
    --az-shadow: 0 20px 52px -24px rgba(0, 0, 0, 0.7);
    --az-pop-bg: rgba(46, 16, 26, 0.62);
    --az-splash-veil: rgba(21, 6, 9, 0.66);
}

/* ---- أرضية الصفحة: تُطبَّق فقط عندما تحتوي الصفحة على هيرو فلكي ---- */
body:has(.az-hero) {
    background: var(--az-bg);
    color: var(--az-ink);
}
/* الهيدر يعوم شفافاً *فوق* الهيرو (fixed) فيمتدّ الهيرو والبوصلة خلفه بلا فاصل،
   ثم يتلوّن مع التمرير (site.js يضيف is-scrolled). على بقيّة الصفحات يبقى sticky. */
body:has(.az-hero) .site-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    background: transparent;
    border-block-end-color: transparent;
}
body:has(.az-hero) .site-header.is-scrolled {
    background: var(--az-header-bg);
    border-block-end-color: var(--az-line);
}
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: 100vh;
    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-rings {
    position: absolute;
    /* Physical top/left (not logical inset-inline-start): the compass is a
       symmetric circle that must sit dead-centre in both LTR and RTL. With a
       logical inset the anchor flips to the right in RTL and translate(-50%)
       then pushes the circle off-screen (only a half shows). */
    top: 50%;
    left: 50%;
    inline-size: min(120vh, 92vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}
/* الحلقات تنزلق قليلاً مع المؤشر (نفس متغيّرات --px/--py في site.js) */
@media (hover: hover) and (pointer: fine) {
    .az-rings {
        transform: translate(-50%, -50%)
            translate3d(calc(var(--px, 0) * -1.6rem), calc(var(--py, 0) * -1.6rem), 0);
        transition: transform 0.5s ease-out;
    }
}
.az-rings__outer,
.az-rings__inner {
    position: absolute;
    display: block;
}
.az-rings__outer { inset: 0; inline-size: 100%; block-size: 100%; }
.az-rings__inner { inset: 12%; inline-size: 76%; block-size: 76%; }
.az-rings__outer circle { stroke: var(--az-ring); }
.az-rings__outer g { stroke: var(--az-tick); }
.az-rings__inner circle:first-child { stroke: var(--az-ring); }
.az-rings__inner circle:last-child { stroke: var(--az-ring-2); }
.az-rings__diamond {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 5%;
    inline-size: min(12vh, 8vw);
    opacity: 0.85;
    filter: drop-shadow(0 0 46px rgba(201, 162, 39, 0.45));
    transform: translateY(-50%);
}
.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.6rem, 1.9rem + 3.2vw, 4.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--az-heading);
    max-inline-size: none;
}
.az-hero h1 em {
    display: block; /* the gold accent phrase sits on its own line */
    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); }
/* الأزرار المغناطيسية تستخدم --tx/--ty من site.js */
@media (hover: hover) and (pointer: fine) {
    .az-btn[data-magnetic] {
        transform: translate(var(--tx, 0px), var(--ty, 0px));
    }
}
.az-hero__cue {
    margin-block-start: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    color: var(--az-dim);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
}
.az-hero__cue i {
    display: block;
    inline-size: 1px;
    block-size: 2.6rem;
    background: linear-gradient(#c9a227, transparent);
}

/* ---- شريط القيم ---- */
.az-ticker {
    border-block: 1px solid var(--az-line-soft);
    background: var(--az-bg-2);
}
.az-ticker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.6rem;
    padding-block: 1.1rem;
}
.az-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--az-ink);
    font-weight: 700;
    font-size: 0.9rem;
}
.az-ticker__item::before {
    content: '';
    display: block;
    inline-size: 6px;
    block-size: 6px;
    background: var(--az-gold-grad);
    transform: rotate(45deg);
    border-radius: 1px;
}

/* ---- أقسام الاتجاه ---- */
.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;
    align-items: baseline;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-block-end: 3.5rem;
}
.az-shead__num {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    color: var(--az-gold-t);
    direction: ltr;
}
.az-shead__label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--az-gold-t);
}
.az-shead h2 {
    margin: 0;
    flex: 1 1 22rem;
    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;
}

/* ---- صفوف الخدمات ---- */
.az-svc-list { border-block-start: 1px solid var(--az-line); }
.az-svc {
    position: relative;
    overflow: hidden;
    border-block-end: 1px solid var(--az-line);
    padding: 2.1rem 0.4rem;
    display: grid;
    grid-template-columns: 4.5rem 1fr minmax(0, 24rem) 2rem;
    align-items: center;
    gap: 1.5rem;
}
.az-svc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--az-svc-fill);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[lang='en'] .az-svc::before { transform-origin: left; }
.az-svc:hover::before { transform: scaleX(1); }
.az-svc > * { position: relative; }
.az-svc__num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--az-gold-num);
    direction: ltr;
}
.az-svc h3 {
    margin: 0;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 700;
    color: var(--az-heading);
    transition: color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.az-svc:hover h3 {
    color: var(--az-gold-t2);
    transform: translateX(-0.6rem);
}
html[lang='en'] .az-svc:hover h3 { transform: translateX(0.6rem); }
.az-svc p { margin: 0; color: var(--az-body); }
.az-svc__arrow {
    justify-self: end;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-block-start: 2px solid #c9a227;
    border-inline-start: 2px solid #c9a227;
    transform: rotate(-45deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.az-svc:hover .az-svc__arrow { transform: rotate(-45deg) translate(0.35rem, -0.35rem); }
@media (max-width: 52rem) {
    .az-svc { grid-template-columns: 3rem 1fr; }
    .az-svc p, .az-svc__arrow { grid-column: 2; }
    .az-svc__arrow { justify-self: start; }
}

/* ---- بطاقات القيمة ---- */
.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);
}
/* وهج يتبع المؤشر — يعتمد على --gx/--gy التي يضبطها data-tilt في site.js */
.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; }

/* ---- بطاقات المنتجات ---- */
.az-prod-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.az-prod {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--az-line);
    background: linear-gradient(150deg, var(--az-prod-a), var(--az-prod-b));
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-block-size: 19rem;
    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(-8px);
    border-color: rgba(201, 162, 39, 0.5);
    box-shadow: var(--az-shadow);
    text-decoration: none;
}
.az-prod__wash,
.az-prod__diamond { 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__diamond {
    inset-block-start: -2.5rem;
    inset-inline-end: -2.5rem;
    inline-size: 8rem;
    block-size: 8rem;
    border: 1px solid rgba(201, 162, 39, 0.35);
    border-radius: 12px;
    transform: rotate(45deg);
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.5s ease;
}
.az-prod:hover .az-prod__diamond {
    transform: rotate(135deg) scale(1.15);
    border-color: rgba(201, 162, 39, 0.7);
}
.az-prod > *:not(.az-prod__wash):not(.az-prod__diamond) { position: relative; z-index: 1; }
.az-prod__badge {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25em 0.9em;
    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.6rem 0 0; font-size: 1.7rem; color: var(--az-heading); }
.az-prod p { margin: 0; color: var(--az-body); }
.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: 28px;
    border: 1px solid var(--az-cta-bd);
    padding: clamp(2.5rem, 6vw, 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__diamond {
    position: absolute;
    inset-block-start: -5rem;
    inset-inline-end: -5rem;
    inline-size: 16rem;
    block-size: 16rem;
    border: 1px solid rgba(221, 187, 82, 0.28);
    border-radius: 20px;
    transform: rotate(45deg);
    pointer-events: none;
}
.az-cta > *:not(.az-cta__diamond) { position: relative; z-index: 1; }
.az-cta h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.az-cta p { margin: 0 auto 2.4rem; color: #c8d1e8; max-inline-size: 46ch; font-size: 1.1rem; }

/* ---- الحركة: كلها مشروطة بتفضيل المستخدم ---- */
@media (prefers-reduced-motion: no-preference) {
    .az-rings__outer { animation: az-spin 90s linear infinite; }
    .az-rings__inner { animation: az-spin-r 60s linear infinite; }
    .az-rings__diamond { animation: az-drift 16s ease-in-out infinite; }
    .az-cta__diamond { animation: az-spin 46s linear infinite; }
    .az-hero__cue i { animation: az-cue 2.2s ease-in-out infinite; }
    .az-eyebrow::before { animation: az-pulse 2.6s ease-in-out infinite; }

    .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-spin { to { transform: rotate(360deg); } }
@keyframes az-spin-r { to { transform: rotate(-360deg); } }
@keyframes az-rise { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
@keyframes az-pulse { 0%, 100% { opacity: 0.35; transform: rotate(45deg) scale(1); } 50% { opacity: 0.9; transform: rotate(45deg) scale(1.35); } }
@keyframes az-drift { 0%, 100% { transform: translateY(-50%) translate3d(0, 0, 0); } 50% { transform: translateY(-50%) translate3d(0, 1.6rem, 0); } }
@keyframes az-cue { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(1.1rem); opacity: 0; } }

@media (max-width: 48rem) {
    .az-hero { padding: 7rem 1.25rem 4rem; min-block-size: auto; }
    .az-section { padding-block: 4.5rem; }
    .az-rings { inline-size: 130vw; }
    .az-rings__diamond { inset-inline-start: -4%; opacity: 0.5; }
}

/* =========================================================================
   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: -2.2rem -2.2rem 0.4rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-start-start-radius: 22px;
    border-start-end-radius: 22px;
    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); }
.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 */
.az-prod--imaged .az-prod__diamond { display: none; }

/* 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; }
}

/* =========================================================================
   HERO POP-CARDS — small "notification" cards with a pain-point → solution
   line. They float at the hero's sides on wide screens, and become a tidy
   stack under the hero content on narrower ones.
   ========================================================================= */
.az-pops {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    inline-size: 100%;
    max-inline-size: 22rem;
    margin-block-start: 2.4rem;
}
.az-pop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: var(--az-pop-bg);
    border: 1px solid var(--az-line);
    box-shadow: var(--az-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    text-align: start;
}
.az-pop__icon {
    flex: none;
    inline-size: 1.7rem;
    block-size: 1.7rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--az-gold-grad);
    color: #260810;
}
.az-pop__icon svg { inline-size: 1rem; block-size: 1rem; }
.az-pop__text { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; }
.az-pop__q { font-size: 0.82rem; color: var(--az-body); line-height: 1.4; }
.az-pop__a { font-size: 0.98rem; font-weight: 800; color: var(--az-gold-t2); line-height: 1.3; }

/* Wide screens: the cards detach and float at the hero's sides — two per side,
   staggered in height, all clear of the centred headline. */
@media (min-width: 75rem) {
    .az-pops { display: contents; }
    .az-pop { position: absolute; z-index: 2; max-inline-size: 13.5rem; }
    .az-pop--1 { inset-block-start: 21%; inset-inline-start: 2%; }   /* upper, start side */
    .az-pop--3 { inset-block-start: 33%; inset-inline-end: 2%; }     /* upper, end side */
    .az-pop--4 { inset-block-end: 24%; inset-inline-start: 2.5%; }   /* lower, start side */
    .az-pop--2 { inset-block-end: 12%; inset-inline-end: 2.5%; }     /* lower, end side */
}
@media (min-width: 75rem) and (prefers-reduced-motion: no-preference) {
    .az-pop--1 { animation: az-pop-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both, az-pop-float 6s ease-in-out 1.5s infinite; }
    .az-pop--3 { animation: az-pop-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both, az-pop-float 6.6s ease-in-out 1.8s infinite; }
    .az-pop--4 { animation: az-pop-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both, az-pop-float 7.2s ease-in-out 2.1s infinite; }
    .az-pop--2 { animation: az-pop-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both, az-pop-float 6.9s ease-in-out 2.4s infinite; }
}
@keyframes az-pop-in { from { opacity: 0; transform: translateY(1.4rem) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes az-pop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7rem); } }