/* ==========================================================================
   haleif-site.css — الموقع التعريفي
   --------------------------------------------------------------------------
   مستقلّ عن zenora-ui.css عمداً. ذاك مبنيّ لواجهات إدارية كثيفة (٧٣ كيلو من
   جداول وشرائط أدوات)، وصفحة البيع تحتاج العكس: مساحة بيضاء، وتدرّج حجم
   واضح، وقليلاً جداً من العناصر.

   الاتجاه: خصائص منطقية حصراً (margin-inline / inset-inline / border-start)
   فيعمل الملفّ في RTL و LTR بلا نسخة ثانية ولا [dir=rtl] في كل قاعدة.

   الوضع الداكن يتبع تفضيل النظام، ويمكن تثبيته بـ data-theme على <html>.
   ========================================================================== */

/* ═══════════════════════ 1. الرموز ═══════════════════════ */

:root {
    /* الهوية */
    --h-primary: #5b52f0;
    --h-primary-600: #4b41e8;
    --h-primary-700: #3d33d1;
    --h-primary-soft: #eeecfe;
    --h-accent: #00c2a8;
    --h-accent-soft: #dff7f3;

    /* الأسطح */
    --h-bg: #ffffff;
    --h-bg-alt: #f7f8fc;
    --h-surface: #ffffff;
    --h-surface-2: #f2f4fa;
    --h-border: #e4e7f2;
    --h-border-strong: #cfd4e6;

    /* النصّ */
    --h-text: #101223;
    --h-text-soft: #4a4f68;
    --h-text-muted: #666c83;
    --h-on-primary: #ffffff;

    /*
       اللون حين يكون نصّاً لا خلفية. الأساسيّ #5b52f0 يمرّ على أبيض (5.37)
       ويرسب على أسطح داكنة (3.0-3.3)، والزرّ يحتاجه غامقاً ليبقى النصّ
       الأبيض فوقه مقروءاً. رمزان منفصلان يحلّان التوتّر بدل مساومة تخسر
       الطرفين.
    */
    --h-primary-ink: #5b52f0;
    --h-success-ink: #0b6e37;
    --h-danger-ink: #b3181b;

    /* الحالات */
    --h-success: #12a150;
    --h-success-soft: #e3f8ec;
    --h-warning: #d97706;
    --h-danger: #dc2626;
    --h-danger-soft: #fdeaea;

    /* الشكل */
    --h-radius: 14px;
    --h-radius-lg: 22px;
    --h-radius-pill: 999px;

    --h-shadow-sm: 0 1px 2px rgba(16, 18, 35, .06);
    --h-shadow: 0 6px 24px rgba(16, 18, 35, .08);
    --h-shadow-lg: 0 22px 60px rgba(16, 18, 35, .14);
    --h-ring: 0 0 0 4px rgba(91, 82, 240, .18);

    /* الإيقاع */
    --h-max: 1180px;
    --h-gap: 24px;
    --h-section: clamp(56px, 8vw, 104px);

    --h-font: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --h-font-head: 'Cairo', 'Segoe UI', system-ui, sans-serif;
    --h-font-lat: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --h-ease: cubic-bezier(.22, .8, .28, 1);
}

html[lang="en"] {
    --h-font: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --h-font-head: 'Sora', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --h-bg: #0c0e18;
        --h-bg-alt: #11142130;
        --h-surface: #151827;
        --h-surface-2: #1c2032;
        --h-border: #262b40;
        --h-border-strong: #343a55;

        --h-text: #f2f3f9;
        --h-text-soft: #b8bdd2;
        --h-text-muted: #8b91ab;
        --h-primary-ink: #a99fff;
        --h-success-ink: #3ddc84;
        --h-danger-ink: #ff9d9d;

        --h-primary-soft: #1e1b43;
        --h-accent-soft: #0d3b36;
        --h-success-soft: #0e3222;
        --h-danger-soft: #3a1717;

        --h-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --h-shadow: 0 6px 24px rgba(0, 0, 0, .45);
        --h-shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);
    }
}

:root[data-theme="dark"] {
    --h-bg: #0c0e18;
    --h-bg-alt: #0f1220;
    --h-surface: #151827;
    --h-surface-2: #1c2032;
    --h-border: #262b40;
    --h-border-strong: #343a55;

    --h-text: #f2f3f9;
    --h-text-soft: #b8bdd2;
    --h-text-muted: #8b91ab;
    --h-primary-ink: #a99fff;
    --h-success-ink: #3ddc84;
    --h-danger-ink: #ff9d9d;

    --h-primary-soft: #1e1b43;
    --h-accent-soft: #0d3b36;
    --h-success-soft: #0e3222;
    --h-danger-soft: #3a1717;

    --h-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --h-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    --h-shadow-lg: 0 22px 60px rgba(0, 0, 0, .6);
}

/* ═══════════════════════ 2. الأساس ═══════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--h-bg);
    color: var(--h-text);
    font-family: var(--h-font);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--h-font-head);
    line-height: 1.25;
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1em; }

a {
    color: var(--h-primary-ink);
    text-decoration: none;
    transition: color .18s var(--h-ease);
}

a:hover { color: var(--h-primary-700); }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 1em; padding-inline-start: 1.4em; }

:focus-visible {
    outline: 3px solid var(--h-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/*
   كلمة لاتينية داخل جملة عربية (SaaS، APIs، Laravel) — يلفّها SiteTitle::latin.

   Cairo بوزن ٨٠٠ يرسم اللاتيني أعرض وأطول من العربي المجاور، فتقفز الكلمة
   خارج إيقاع السطر وتُقرأ كأنها عنوان ثانٍ داخل العنوان. Sora بحجم أصغر قليلاً
   يعيدها إلى الصفّ. في المتن لا تبديل خطّ — Tajawal متّزن أصلاً — بل وزن أثقل
   بدرجة واحدة يكفي لتمييز اسم التقنية.
*/
h1 .h-lat,
h2 .h-lat,
h3 .h-lat {
    font-family: var(--h-font-lat);
    font-size: .94em;
    letter-spacing: -.01em;
}

.h-list .h-lat {
    color: var(--h-text);
    font-weight: 500;
}

/* أرقام لاتينية للأسعار والأرقام في اللغتين — تُنسخ وتُقارن وتُرسل */
.h-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ═══════════════════════ 3. التخطيط ═══════════════════════ */

.h-wrap {
    width: 100%;
    max-width: var(--h-max);
    margin-inline: auto;
    padding-inline: 20px;
}

.h-section { padding-block: var(--h-section); }

.h-section-alt { background: var(--h-bg-alt); }

.h-center { text-align: center; }

.h-head {
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: clamp(32px, 5vw, 56px);
    text-align: center;
}

.h-head p {
    color: var(--h-text-soft);
    font-size: 1.075rem;
    margin: 0;
}

.h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-block-end: 16px;
    border-radius: var(--h-radius-pill);
    background: var(--h-primary-soft);
    color: var(--h-primary-ink);
    font-size: .8rem;
    font-weight: 700;
}

.h-grid {
    display: grid;
    gap: var(--h-gap);
}

.h-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/*
   عمودان غير متساويين (نموذج + جانب). لا يُكتب inline: التنسيق المضمّن
   يغلب استعلامات الوسائط، فيبقى العمودان جنباً إلى جنب على شاشة الجوال.
*/
.h-split {
    display: grid;
    gap: var(--h-gap);
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
}
.h-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.h-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ═══════════════════════ 4. الأزرار ═══════════════════════ */

.h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--h-radius-pill);
    font-family: var(--h-font-head);
    font-size: .96rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s var(--h-ease), box-shadow .18s var(--h-ease), background .18s var(--h-ease);
}

.h-btn i { font-size: 1.1em; }

.h-btn-primary {
    background: var(--h-primary);
    color: var(--h-on-primary);
    box-shadow: 0 8px 22px rgba(91, 82, 240, .28);
}

.h-btn-primary:hover {
    background: var(--h-primary-600);
    color: var(--h-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(91, 82, 240, .36);
}

.h-btn-ghost {
    background: var(--h-surface);
    color: var(--h-text);
    border-color: var(--h-border-strong);
}

.h-btn-ghost:hover {
    color: var(--h-text);
    border-color: var(--h-primary);
    transform: translateY(-2px);
}

.h-btn-quiet {
    background: transparent;
    color: var(--h-text-soft);
    padding-inline: 12px;
}

.h-btn-quiet:hover { color: var(--h-primary); }

.h-btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.h-btn-sm { padding: 9px 18px; font-size: .86rem; }
.h-btn-block { width: 100%; }

.h-btn:disabled,
.h-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

/* ═══════════════════════ 5. الترويسة ═══════════════════════ */

.h-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 900;
    background: color-mix(in srgb, var(--h-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color .2s var(--h-ease), box-shadow .2s var(--h-ease);
}

.h-header.is-stuck {
    border-block-end-color: var(--h-border);
    box-shadow: var(--h-shadow-sm);
}

.h-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 72px;
}

.h-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--h-font-head);
    font-weight: 800;
    font-size: 1.16rem;
    color: var(--h-text);
    flex-shrink: 0;
}

.h-brand:hover { color: var(--h-text); }

.h-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--h-primary), #8b5cf6);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(91, 82, 240, .34);
}

.h-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-inline-start: auto;
}

.h-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--h-text-soft);
    font-size: .95rem;
    font-weight: 600;
    transition: background .18s var(--h-ease), color .18s var(--h-ease);
}

.h-menu a:hover,
.h-menu a[aria-current="page"] {
    background: var(--h-surface-2);
    color: var(--h-text);
}

.h-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.h-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    color: var(--h-text-soft);
    font-size: .85rem;
    font-weight: 700;
}

.h-lang:hover {
    border-color: var(--h-primary);
    color: var(--h-primary);
}

.h-burger {
    display: none;
    padding: 10px;
    background: none;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    color: var(--h-text);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/*
   رابط التخطّي — أوّل ما يصله الكيبورد، ومخفيّ حتى يُركَّز عليه.
   يُخفى بالإزاحة لا بـdisplay:none: الأخير يُخرجه من ترتيب التنقّل فيفقد فائدته.
*/
.h-skip {
    position: fixed;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 1000;
    padding: 11px 20px;
    border-radius: var(--h-radius-pill);
    background: var(--h-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    translate: 0 -160%;
    transition: translate .2s var(--h-ease);
}

.h-skip:focus {
    color: #fff;
    translate: 0 0;
}

/* عناصر قائمة تظهر على الجوال فقط (حيث تُخفى أزرار الشريط الجانبي) */
.h-only-mobile { display: none; }

/* ───────── 5ب. حياة الترويسة ─────────

   ثلاث لمسات تقول «أين أنت» بدل أن تُزيّن:

     ١) حبّةٌ واحدة تنزلق خلف القائمة بدل خلفيةٍ تُضاء وتُطفأ في كل عنصر.
        الحركة نفسها هي المعنى: تربط ما غادرتَه بما وصلتَ إليه. تستقرّ على
        الصفحة الحالية، وتتبع المؤشّر، وتعود حين يغادر.

     ٢) خيطٌ أسفل الترويسة يطول بطول ما قُرئ من الصفحة. لا يظهر إلا بعد أول
        تمريرة: في أعلى الصفحة التقدّم صفر، وخيطٌ فارغ يشغل العين بلا خبر.

     ٣) لمعةٌ تعبر مربّع العلامة عند المرور — من مفردات h-btn-sheen نفسها،
        لا اختراعاً ثالثاً للّمعان في ملفّ واحد.

   كلّها تحسين تدريجي: بلا جافاسكربت تبقى خلفية المرور الأصلية كما هي،
   ويغيب الخيط، ولا يتعطّل شيء.
*/

/* خيط القراءة — عرضه --h-read، تضبطها haleif-site.js على الترويسة */
.h-header::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    height: 2px;
    width: calc(var(--h-read, 0) * 100%);
    background-image: linear-gradient(to left, var(--h-primary), var(--h-accent));
    opacity: 0;
    transition: opacity .35s var(--h-ease);
    pointer-events: none;
}

html[dir="ltr"] .h-header::after {
    background-image: linear-gradient(to right, var(--h-primary), var(--h-accent));
}

.h-header.is-stuck::after { opacity: 1; }

/* لمعة العلامة تُشغَّل من الشعار كلّه لا من المربّع وحده: الاسم والمربّع
   هدفٌ واحد في عين الزائر، فمرورٌ على الاسم يجب أن يُضيء المربّع */
.h-brand .h-mark {
    transition: transform .3s var(--h-ease), box-shadow .3s var(--h-ease);
}

.h-brand:hover .h-mark {
    transform: rotate(-7deg) scale(1.07);
    box-shadow: 0 10px 24px rgba(91, 82, 240, .44);
}

.h-brand:hover .h-btn-sheen::before { transform: translateX(360%) skewX(-18deg); }
[dir="rtl"] .h-brand:hover .h-btn-sheen::before { transform: translateX(-360%) skewX(-18deg); }

/*
   الحبّة المنزلقة — فوق نقطة الجوال وحدها: القائمة تحتها عمودية وملء
   العرض، وحبّةٌ تنزلق بين عناصر مكدّسة حركةٌ بلا معنى.
*/
@media (min-width: 861px) {

    .h-menu { position: relative; }

    /*
       ::before لا عنصراً في الترميز: <span> داخل <ul> ترميزٌ غير صالح،
       و<li> فارغة تُنطَق «عنصر قائمة» عند قارئ الشاشة.

       الموضع إزاحةٌ فيزيائية (translate3d) لا خاصّيةً منطقية: التحويل لا
       يعرف اتجاه الكتابة، فالحساب نفسه يصحّ في RTL وLTR بلا فرع ثانٍ.
    */
    .h-menu.is-glide::before {
        content: '';
        position: absolute;
        inset-block: 0;
        left: 0;
        width: var(--h-pill-w, 0px);
        border-radius: 10px;
        background: var(--h-primary-soft);
        box-shadow: 0 2px 10px color-mix(in srgb, var(--h-primary) 16%, transparent);
        opacity: var(--h-pill-o, 0);
        transform: translate3d(var(--h-pill-x, 0px), 0, 0);
        transition: transform .34s var(--h-ease),
                    width .34s var(--h-ease),
                    opacity .22s var(--h-ease);
        pointer-events: none;
    }

    /* أول ظهور بعد اختفاء يقفز بلا انزلاق: حبّةٌ تنمو من حافّة القائمة
       تبدو خطأً في التخطيط لا حركةً مقصودة */
    .h-menu.is-pill-jump::before { transition: none; }

    /* النصّ فوق الحبّة، والخلفية تُسلَّم لها كاملةً */
    .h-menu.is-glide a {
        position: relative;
        z-index: 1;
        background: transparent;
    }

    /*
       النصّ يبقى بلون النصّ والحبّة وحدها تحمل لون الهوية: --h-primary على
       --h-primary-soft يبلغ ٥٫٣:١ في الوضع الفاتح ويسقط إلى ٢٫٥:١ في الداكن
       (#5b52f0 على #1e1b43). لونٌ واحد يصحّ في الوضعين أهون من استثناءٍ
       داكن في موضعين.
    */
    .h-menu.is-glide a:hover,
    .h-menu.is-glide a:focus-visible,
    .h-menu.is-glide a[aria-current="page"] {
        background: transparent;
        color: var(--h-text);
    }
}

/* ═══════════════════════ 6. الهيرو ═══════════════════════ */

.h-hero {
    position: relative;
    padding-block: clamp(56px, 9vw, 104px) clamp(48px, 7vw, 88px);
    overflow: hidden;
}

.h-hero::before {
    content: '';
    position: absolute;
    inset-block-start: -240px;
    inset-inline-start: 50%;
    translate: -50% 0;
    width: 900px;
    height: 620px;
    background: radial-gradient(closest-side, rgba(91, 82, 240, .22), transparent 72%);
    pointer-events: none;
    z-index: -1;
}

/* توهّج ثانٍ بلون التمييز، مُزاح عن الأول: بؤرة واحدة تبدو مسطّحة على عرض كامل */
.h-hero::after {
    content: '';
    position: absolute;
    inset-block-start: 40px;
    inset-inline-end: -160px;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(0, 194, 168, .16), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.h-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}

.h-hero h1 { margin-block-end: 20px; }

.h-hero-lead {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    color: var(--h-text-soft);
    max-width: 56ch;
    margin-block-end: 30px;
}

.h-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 26px;
}

.h-hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: var(--h-text-muted);
    font-size: .88rem;
}

.h-hero-note span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.h-hero-note i { color: var(--h-success-ink); }

/* الحاوية التي تُموضع الشارات العائمة نسبةً إلى لوحة المعاينة */
.h-preview-wrap {
    position: relative;
}

/* لوحة المعاينة — رسم تجريدي لا لقطة شاشة (لا تتقادم مع كل تحديث واجهة) */
.h-preview {
    --mx: 50%;
    --my: 30%;
    position: relative;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-lg);
    padding: 18px;
    isolation: isolate;
}

/*
   بقعة ضوء تتبّع المؤشّر — JS يحدّث ‎--mx/--my‎ عند mousemove، والانتقال هنا
   فقط للظهور/الاختفاء لا للموضع، فلا تتأخّر البقعة عن المؤشّر.
*/
.h-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(91, 82, 240, .14), transparent 68%);
    opacity: 0;
    transition: opacity .3s var(--h-ease);
    pointer-events: none;
    z-index: -1;
}

.h-preview.is-glowing::before { opacity: 1; }

.h-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-block-end: 14px;
    margin-block-end: 14px;
    border-block-end: 1px solid var(--h-border);
}

.h-preview-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--h-border-strong);
}

.h-preview-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    color: var(--h-text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.h-preview-live i {
    color: var(--h-accent);
    font-size: .6rem;
    animation: h-pulse 1.8s ease-in-out infinite;
}

@keyframes h-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* شارات عائمة فوق لوحة المعاينة — زخرفٌ يوحي بحيوية النظام، لا بيانات حقيقية */
.h-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    box-shadow: var(--h-shadow-lg);
    font-size: .82rem;
    font-weight: 700;
    color: var(--h-text);
    animation: h-float-bob 4.5s var(--h-ease) infinite;
}

.h-float i { font-size: 1.1rem; }

.h-float-top {
    inset-block-start: -18px;
    inset-inline-start: -22px;
    color: var(--h-success-ink);
}

.h-float-top i { color: var(--h-success-ink); }

.h-float-bottom {
    inset-block-end: -20px;
    inset-inline-end: -18px;
    border-radius: var(--h-radius);
    animation-delay: .7s;
}

.h-float-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--h-primary-soft);
    color: var(--h-primary-ink);
    font-size: 1rem;
    flex-shrink: 0;
}

.h-float-bottom b {
    display: block;
    font-family: var(--h-font-head);
    font-size: .86rem;
}

.h-float-bottom span {
    display: block;
    color: var(--h-text-muted);
    font-size: .72rem;
    font-weight: 600;
}

@keyframes h-float-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@media (max-width: 767px) {
    .h-float { display: none; }
}

.h-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-block-end: 16px;
}

.h-stat {
    padding: 12px;
    border-radius: 12px;
    background: var(--h-surface-2);
}

.h-stat b {
    display: block;
    font-family: var(--h-font-head);
    font-size: 1.25rem;
    line-height: 1.2;
}

.h-stat span {
    font-size: .74rem;
    color: var(--h-text-muted);
}

.h-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 132px;
    padding: 12px;
    border-radius: 12px;
    background: var(--h-surface-2);
}

.h-chart i {
    flex: 1;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--h-primary), rgba(91, 82, 240, .35));
    animation: h-rise .7s var(--h-ease) backwards;
}

.h-chart i.is-peak { background: linear-gradient(180deg, var(--h-accent), rgba(0, 194, 168, .35)); }

@keyframes h-rise {
    from { height: 0 !important; opacity: 0; }
}

/* ═══════════════════════ 6ب. شريط الثقة ═══════════════════════ */

.h-proof {
    padding-block: 28px;
    border-block: 1px solid var(--h-border);
    background: var(--h-bg-alt);
}

.h-proof-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 0;
}

.h-proof-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 28px;
    border-inline-start: 1px solid var(--h-border);
    color: var(--h-text-soft);
    font-size: .9rem;
    font-weight: 700;
}

.h-proof-item:first-child { border-inline-start: 0; }

.h-proof-item i { color: var(--h-primary-ink); font-size: 1.15rem; }

.h-proof-item b {
    font-family: var(--h-font-head);
    color: var(--h-text);
    font-size: 1.1rem;
}

@media (max-width: 767px) {
    .h-proof-item {
        padding-inline: 16px;
        border-inline-start: 0;
        font-size: .82rem;
    }
}

/* ═══════════════════════ 7. البطاقات ═══════════════════════ */

.h-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-sm);
    transition: transform .22s var(--h-ease), box-shadow .22s var(--h-ease), border-color .22s var(--h-ease);
}

.h-card:hover {
    transform: translateY(-4px);
    border-color: var(--h-border-strong);
    box-shadow: var(--h-shadow);
}

/* الوسم يتبع مستوى الصفحة، والحجم يتبع الدور — لذا :is() لا h3 وحدها */
.h-card :is(h2, h3) { margin-block-end: 8px; font-size: clamp(1.15rem, 2vw, 1.4rem); }

.h-card p {
    color: var(--h-text-soft);
    font-size: .95rem;
    margin-block-end: 14px;
}

.h-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-block-end: 16px;
    border-radius: 14px;
    background: var(--h-primary-soft);
    color: var(--h-primary-ink);
    font-size: 1.5rem;
}

.h-card-link {
    margin-block-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .92rem;
}

.h-card-link i { transition: translate .18s var(--h-ease); }
.h-card:hover .h-card-link i { translate: -4px 0; }
html[dir="ltr"] .h-card:hover .h-card-link i { translate: 4px 0; }

/*
   رقم الخطوة كعلامة مائية — يميّز بطاقات «كيف تبدأ» كتسلسل لا كشبكة عشوائية،
   بلا خطّ واصل يتكسّر عند التفاف البطاقات على الجوال.
*/
.h-card.h-step { overflow: hidden; }

.h-step-num {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 20px;
    font-family: var(--h-font-head);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    /*
       كان --h-primary-soft‏ (#eeecfe) بنسبة تباين 1.16 — أي غير مرئي عملياً
       لأي عين، لا لضعاف البصر وحدهم. رقم الخطوة معلومة لا زخرفة (١ ثمّ ٢ ثمّ
       ٣)، فيجب أن يُرى. اللون هنا يمرّ حدّ 3:1 للنصّ الكبير ويبقى خافتاً
       خلف المحتوى لا منافساً له.
    */
    color: #827bf1;
    z-index: 0;
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .h-step-num { color: var(--h-primary); }
}

:root[data-theme="dark"] .h-step-num { color: var(--h-primary); }

.h-step .h-icon,
.h-step h3,
.h-step p { position: relative; z-index: 1; }

.h-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.h-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .94rem;
    color: var(--h-text-soft);
}

.h-list i {
    flex-shrink: 0;
    margin-block-start: 4px;
    color: var(--h-success-ink);
}

/* ───────────────── بطاقة خدمة ─────────────────

   لماذا نمط خاصّ بالخدمات؟ عناوينها أطول ما في الموقع: اسم + لاحقة تقنية
   «(Laravel)» + وصف تابع بعد شرطة. في عمود بعرض ٣٠٠ بكسل يلتفّ ذلك على ثلاثة
   أسطر بارتفاع مختلف في كل بطاقة، فيبدو الصفّ مشتّتاً رغم تساوي ارتفاع
   البطاقات. العلاج هنا ثلاثي:

     ١) الاسم يُفكَّك إلى ثلاث درجات وزن (SiteTitle::split): عنوان قصير،
        وشارة صغيرة للتقنية، وسطر تابع خافت — فتُقرأ نقطة واحدة لا ثلاث.
     ٢) الأيقونة تُضمّ إلى العنوان في قفل واحد بارتفاع ثابت، فيقع خطّ الفصل
        في كل بطاقات الصفّ على المستوى نفسه.
     ٣) السعر والرابط في شريط سفلي واحد بدل كتلتين متفرّقتين.

   ولون الخدمة (accent) يصل من القالب متغيّراً واحداً يقود الأيقونة والشارة
   والخيط والهالة والرابط — بدل تكرار اللون في خمسة تنسيقات مضمّنة.
*/

.h-service {
    --h-card-accent: var(--h-primary);
    --h-card-accent-soft: var(--h-primary-soft);
    overflow: hidden;
}

/* هالة بلون الخدمة تظهر عند المرور — عمق بلا حدّ إضافي ولا ظلّ ثقيل */
.h-service::before {
    content: '';
    position: absolute;
    inset-block-start: -70px;
    inset-inline-end: -50px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--h-card-accent) 0%, transparent 68%);
    opacity: 0;
    transition: opacity .3s var(--h-ease);
    pointer-events: none;
    z-index: 0;
}

.h-service:hover::before { opacity: .12; }

.h-service > * { position: relative; z-index: 1; }

.h-service-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-block-size: 78px;
    padding-block-end: 16px;
    margin-block-end: 16px;
}

/* خيط متلاشٍ بلون الخدمة بدل خطّ رمادي صريح: يفصل بلا أن يُرى */
.h-service-head::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(to left, var(--h-card-accent), transparent 70%);
    opacity: .5;
}

html[dir="ltr"] .h-service-head::after {
    background: linear-gradient(to right, var(--h-card-accent), transparent 70%);
}

.h-service .h-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    margin-block-end: 0;
    border-radius: 13px;
    background: var(--h-card-accent-soft);
    color: var(--h-card-accent);
    font-size: 1.4rem;
    transition: transform .22s var(--h-ease);
}

.h-service:hover .h-icon { transform: scale(1.07); }

.h-service-name { min-width: 0; }

.h-service-name :is(h2, h3) {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.45;
    letter-spacing: -.015em;
    text-wrap: balance;
}

/*
   اللاحقة التقنية شارةً: تبقى مقروءة وتخرج من ثقل العنوان.

   لون النصّ ليس لون الخدمة الصافي: بعض الألوان (الكهرماني #f59e0b، الفيروزي
   #00c2a8) تنزل إلى ٢:١ على أبيض فتسقط عند أي قارئ لا يرى الألوان الفاتحة.
   المزج بنسبة ٤٥٪ نحو لون النصّ يُبقي هوية اللون ويرفع التباين — ولأن
   --h-text ينقلب في الوضع الداكن يصلح الحلّ في الوضعين بقاعدة واحدة.
   السطر الأول احتياط لمتصفّح بلا color-mix.
*/
.h-service-tag {
    display: inline-block;
    margin-block-start: 7px;
    padding: 2px 10px;
    border-radius: var(--h-radius-pill);
    background: var(--h-card-accent-soft);
    color: var(--h-primary);
    color: color-mix(in srgb, var(--h-card-accent, var(--h-primary)) 55%, var(--h-text));
    font-family: var(--h-font-lat);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .02em;
    direction: ltr;
    unicode-bidi: isolate;
}

.h-service-sub {
    display: block;
    margin-block-start: 4px;
    color: var(--h-text-muted);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.6;
}

.h-service-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-block-start: auto;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--h-border);
}

.h-service-price {
    color: var(--h-text-muted);
    font-size: .86rem;
}

.h-service-price .h-num {
    margin-inline: 3px;
    color: var(--h-text);
    font-family: var(--h-font-head);
    font-size: 1.05rem;
    font-weight: 800;
}

.h-service-foot .h-card-link {
    margin-block-start: 0;
    color: var(--h-primary);
    color: color-mix(in srgb, var(--h-card-accent) 55%, var(--h-text));
}

/* ترويسة صفحة الخدمة — نفس التقسيم بمقاس الهيرو */
.h-service-h1 {
    margin-block-end: 10px;
    text-wrap: balance;
}

.h-service-h1-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-block-end: 16px;
    color: var(--h-text-soft);
    font-size: 1rem;
}

/* ═══════════════════════ 8. التسعير ═══════════════════════ */

.h-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    margin-block: 0 40px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
}

.h-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 0;
    border-radius: var(--h-radius-pill);
    background: transparent;
    color: var(--h-text-soft);
    font-family: var(--h-font-head);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s var(--h-ease), color .2s var(--h-ease);
}

.h-toggle button.is-on {
    background: var(--h-primary);
    color: var(--h-on-primary);
}

.h-save {
    padding: 2px 9px;
    border-radius: var(--h-radius-pill);
    background: var(--h-success-soft);
    color: var(--h-success-ink);
    font-size: .72rem;
    font-weight: 700;
}

.h-toggle button.is-on .h-save {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/*
   الخيار الثالث: «خصّص باقتك».

   داخل نفس الكبسولة بصرياً، ومفصولٌ بخطّ رفيع ومنطقٍ مختلف: الأوّلان يتبادلان
   حالةً في المكان، وهذا ينتقل إلى صفحة أخرى. الفاصل يقول ذلك للعين قبل أن
   يكتشفه الزائر بالنقر.
*/
.h-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.h-toggle-sep {
    width: 1px;
    align-self: stretch;
    margin-inline: 6px;
    margin-block: 6px;
    background: var(--h-border);
}

.h-toggle-custom {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: var(--h-radius-pill);
    color: var(--h-primary-ink);
    font-family: var(--h-font-head);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s var(--h-ease), color .2s var(--h-ease);
}

.h-toggle-custom:hover {
    background: var(--h-primary-soft);
    color: var(--h-primary-700);
}

.h-toggle-custom i { font-size: 1.05em; }

/*
   شبكة الباقات.

   auto-fit وحده لا يكفي: بحدّ أدنى 280px لا تتّسع أربع بطاقات داخل عرض
   المحتوى (1140px) فتهبط الرابعة إلى سطر ثانٍ وحدها — وصفٌّ من ثلاث وواحدة
   يجعل الرابعة تبدو ملحقاً لا خياراً موازياً.

   لذا يُمرّر عدد البطاقات من القالب في --h-cols، فتُفرض أعمدة بعددها على
   الشاشات الواسعة. minmax(0,1fr) لا minmax(240px,1fr): الأولى تسمح للعمود
   بالنزول تحت عرض محتواه بدل أن يفيض الصفّ أفقياً.

   دون 1080px يتولّى auto-fit الأمر كما كان.
*/
.h-plans {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}

@media (min-width: 1080px) {
    .h-plans {
        grid-template-columns: repeat(var(--h-cols, 4), minmax(0, 1fr));
    }
}

/*
   شريط الشارة محفوظٌ في كل البطاقات لا في المميّزة وحدها.

   كانت الشارة معلّقةً فوق الحدّ العلوي والحشوة موحّدة، فتزاحمت مع اسم الباقة
   في البطاقة المميّزة وظهر «النمو» كأنه هبط سطراً. وحلٌّ بحشوة إضافية للمميّزة
   وحدها كان سيُنزل عناوينها عن عناوين جيرانها في الصفّ — أي يستبدل تزاحماً
   باختلال محاذاة.

   فالشريط يُحفظ للجميع: الشارة تسكن داخله، والبطاقة بلا شارة تتركه فارغاً،
   وأسماء الباقات الأربعة تبدأ على خطّ واحد بالضبط.
*/
.h-plan {
    padding: 22px 22px 30px;
}

/*
   خانة الشارة مساحةٌ محجوزة بارتفاع ثابت، والشارة تطفو داخلها لا تشغلها.

   حين كانت الشارة في مجرى التخطيط كان ارتفاعها الحقيقي (٣١px) يتجاوز الحجز
   (٢٦px) فتنزل بطاقة «الأكثر شيوعاً» خمسة بكسلات عن جاراتها — وهي البطاقة
   التي يُراد للعين أن تستقرّ عليها. والطفو يجعل الفارق مستحيلاً مهما تغيّر
   الخطّ أو حجمه.
*/
.h-plan-badge-slot {
    position: relative;
    min-height: 26px;
    margin-block-end: 14px;
}

.h-badge {
    position: absolute;
    inset-block-start: 50%;
    left: 50%;                          /* التوسيط فيزيائيّ: لا يختلف بالاتجاه */
    translate: -50% -50%;
}

.h-plan.is-featured {
    border-color: var(--h-primary);
    box-shadow: 0 18px 50px rgba(91, 82, 240, .2);
}

.h-plan.is-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid var(--h-primary);
    pointer-events: none;
}

.h-badge {
    padding: 5px 16px;
    border-radius: var(--h-radius-pill);
    background: var(--h-primary);
    color: #fff;
    font-family: var(--h-font-head);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(91, 82, 240, .34);
}

.h-plan-name {
    font-family: var(--h-font-head);
    font-size: 1.3rem;
    font-weight: 800;
    margin-block-end: 4px;
}

/*
   ثلاثة أسطر محجوزة لا سطرٌ واحد: الوصف يطول سطراً في العربية وثلاثة في
   الإنجليزية، فكانت الأسعار الأربعة تقف على أربعة ارتفاعات وتُقرأ البطاقات
   كأربع بطاقات لا كصفٍّ واحد. الحجز يوحّد خطّ السعر في اللغتين.

   نفس نهج .h-plan-badge-slot أعلاه: مساحة محجوزة تمنع القفز.
*/
.h-plan-tag {
    color: var(--h-text-muted);
    font-size: .89rem;
    margin-block-end: 20px;
    min-height: 5.6em;      /* احتياط للمتصفّحات دون وحدة lh */
    min-height: 3lh;
}

.h-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    /* 4px + ما كان يشغله سطر العملة المحلّية المحذوف */
    margin-block-end: 26px;
}

.h-price b {
    font-family: var(--h-font-head);
    font-size: clamp(2.1rem, 4vw, 2.7rem);
    font-weight: 800;
    line-height: 1;
}

.h-price small {
    color: var(--h-text-muted);
    font-size: .9rem;
    font-weight: 600;
}

/*
   كان تحت السعر سطرٌ ثالث: «≈ ١٣١ ريال» (‎.h-price-local‎). أُزيل من القالب،
   وانتقل الفراغ الذي كان يشغله إلى ‎margin-block-end‎ في ‎.h-price‎ أعلاه —
   بلا ذلك يلتصق السعر بشرائح الأنظمة.
*/

/*
   باقةٌ سعرها بالتفاوض — نصٌّ مكان الرقم.

   min-height بمقاس الرقم الكبير نفسه (نفس clamp في ‎.h-price b‎): البطاقات
   الأربع تقف جنباً إلى جنب، ونصٌّ أقصر ارتفاعاً يرفع قائمة المميزات عن
   جاراتها فيبدو الصفّ مكسوراً بلا سبب ظاهر.

   والانتقاء ‎.h-price.h-price-contact b‎ بصنفين لا بواحد: العنصر يحمل
   الصنفين معاً، و‎.h-price b‎ تساويه في الأولوية — فيحسم ترتيب الملف وحده،
   وهو رهانٌ يسقط عند أول إعادة ترتيب.
*/
.h-price.h-price-contact {
    align-items: center;
    min-height: clamp(2.1rem, 4vw, 2.7rem);
}

.h-price.h-price-contact b {
    font-size: 1.35rem;
    line-height: 1.25;
}

.h-plan-systems {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 18px;
    padding-block-end: 18px;
    border-block-end: 1px dashed var(--h-border);
}

.h-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-2);
    color: var(--h-text-soft);
    font-size: .78rem;
    font-weight: 600;
}

.h-chip i { color: var(--h-primary); font-size: .95em; }

.h-plan .h-btn { margin-block-start: auto; }

/* ═══════════════════════ 9. مكوِّن الباقة المخصّصة ═══════════════════════ */

.h-builder {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--h-gap);
    align-items: start;
}

.h-picks {
    display: grid;
    gap: 12px;
}

.h-pick {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: var(--h-surface);
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius);
    cursor: pointer;
    transition: border-color .18s var(--h-ease), background .18s var(--h-ease);
}

.h-pick:hover { border-color: var(--h-border-strong); }

.h-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h-pick-box {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-block-start: 3px;
    border: 2px solid var(--h-border-strong);
    border-radius: 7px;
    color: transparent;
    font-size: .8rem;
    transition: all .18s var(--h-ease);
}

.h-pick input:checked ~ .h-pick-box {
    background: var(--h-primary);
    border-color: var(--h-primary);
    color: #fff;
}

.h-pick:has(input:checked) {
    border-color: var(--h-primary);
    background: var(--h-primary-soft);
}

.h-pick input:focus-visible ~ .h-pick-box { box-shadow: var(--h-ring); }

.h-pick-body { flex: 1; min-width: 0; }

.h-pick-body b {
    display: block;
    font-family: var(--h-font-head);
    font-size: 1.02rem;
}

.h-pick-body span {
    display: block;
    color: var(--h-text-muted);
    font-size: .87rem;
    line-height: 1.55;
}

.h-pick-price {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--h-text);
    white-space: nowrap;
}

.h-pick.is-core {
    cursor: default;
    background: var(--h-surface-2);
    border-style: dashed;
}

/* ═══════════ مُكمِّم المزايا ═══════════ */

/*
   صفٌّ لكل ميزة: اسمها والمشمول منها، ثم مِقدارٌ يزيده الزائر ويُنقصه.

   حقل رقم عاديّ لا يكفي: أسهمه الأصلية دقيقة الهدف على الجوال، ولا تُظهر
   خطوة الزيادة، ولا تُبيّن أين ينتهي المشمول ويبدأ المدفوع. الأزرار الصريحة
   مع سطر التكلفة تفعل الثلاثة.
*/
.h-quotas {
    display: grid;
    gap: 10px;
}

.h-quota {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    background: var(--h-surface);
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius);
    transition: border-color .18s var(--h-ease);
}

.h-quota:hover { border-color: var(--h-border-strong); }

/* ميزة نظامها غير مختار: تُخفى ولا تُحذف، فيبقى ما ضبطه الزائر إن عاد واختاره */
.h-quota[hidden] { display: none; }

.h-quota-body { flex: 1; min-width: 170px; }

.h-quota-body b {
    display: block;
    font-family: var(--h-font-head);
    font-size: .99rem;
}

.h-quota-body span {
    display: block;
    color: var(--h-text-muted);
    font-size: .84rem;
    line-height: 1.55;
}

.h-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1.5px solid var(--h-border);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-2);
}

.h-stepper button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--h-surface);
    color: var(--h-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--h-shadow-sm);
    transition: background .16s var(--h-ease), color .16s var(--h-ease);
}

.h-stepper button:hover:not(:disabled) {
    background: var(--h-primary);
    color: #fff;
}

.h-stepper button:disabled {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}

/*
   الحقل يبقى input لا نصّاً: من يريد ٢٥٠ مستخدماً يكتبها ولا يضغط الزرّ
   مئتي مرّة. الأسهم الأصلية تُخفى لأن الزرّين يقومان مقامها.
*/
.h-stepper input {
    width: 64px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--h-text);
    font-family: var(--h-font-head);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.h-stepper input::-webkit-outer-spin-button,
.h-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.h-stepper input:focus {
    outline: none;
    border-radius: 8px;
    box-shadow: var(--h-ring);
}

.h-quota-cost {
    min-width: 96px;
    text-align: end;
    font-weight: 700;
    font-size: .93rem;
    color: var(--h-text);
}

.h-quota-cost small {
    display: block;
    color: var(--h-text-muted);
    font-size: .76rem;
    font-weight: 600;
}

/* ما دام على المشمول: «مشمول» بالأخضر بدل مبلغٍ صفريّ يوهم بأن الميزة معطّلة */
.h-quota-cost.is-free { color: var(--h-success-ink); }

.h-builder-section-title {
    margin-block: 30px 14px;
    font-family: var(--h-font-head);
    font-size: 1.05rem;
    font-weight: 800;
}

.h-builder-section-title span {
    display: block;
    margin-block-start: 4px;
    color: var(--h-text-muted);
    font-family: var(--h-font);
    font-size: .87rem;
    font-weight: 400;
}

/* سطور الكمّيات داخل الملخّص */
.h-sum-quota {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-block: 3px;
    color: var(--h-text-muted);
    font-size: .85rem;
}

.h-summary {
    position: sticky;
    inset-block-start: 96px;
    padding: 26px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow);
}

.h-summary h3 { margin-block-end: 18px; }

.h-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 8px;
    font-size: .93rem;
    color: var(--h-text-soft);
}

.h-sum-row.is-discount { color: var(--h-success-ink); }

.h-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-block: 14px 6px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--h-border);
    font-family: var(--h-font-head);
    font-weight: 800;
}

.h-sum-total b { font-size: 1.75rem; }

.h-sum-note {
    color: var(--h-text-muted);
    font-size: .8rem;
    margin-block-end: 18px;
}

/* ═══════════════════════ 10. النماذج ═══════════════════════ */

.h-form {
    display: grid;
    gap: 18px;
}

.h-form-row {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.h-field { display: grid; gap: 7px; }

.h-field label {
    font-size: .89rem;
    font-weight: 700;
    color: var(--h-text);
}

.h-field label .h-req { color: var(--h-danger-ink); }

.h-field input,
.h-field select,
.h-field textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--h-surface);
    border: 1.5px solid var(--h-border);
    border-radius: 11px;
    color: var(--h-text);
    font-family: inherit;
    font-size: .96rem;
    transition: border-color .18s var(--h-ease), box-shadow .18s var(--h-ease);
}

.h-field textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.7;
}

.h-field input:focus,
.h-field select:focus,
.h-field textarea:focus {
    outline: none;
    border-color: var(--h-primary);
    box-shadow: var(--h-ring);
}

.h-field input::placeholder,
.h-field textarea::placeholder { color: var(--h-text-muted); }

.h-field.has-error input,
.h-field.has-error select,
.h-field.has-error textarea { border-color: var(--h-danger); }

.h-error {
    color: var(--h-danger-ink);
    font-size: .83rem;
    font-weight: 600;
}

/* حقل الفخّ — مخفيّ عن البشر وعن قارئات الشاشة، ظاهر في الـDOM للآليات */
.h-trap {
    position: absolute !important;
    inset-inline-start: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.h-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--h-radius);
    font-size: .92rem;
}

.h-note i { flex-shrink: 0; margin-block-start: 3px; font-size: 1.15rem; }

/*
   الملاحظات الثلاث: نصٌّ ملوّن على سطحٍ ملوّن — أضيق موضعٍ في اللوحة.
   الألوان الأساسية ترسب فيه على الوضع الداكن (3.0)، ورموز الحبر تمرّ.
*/
.h-note-ok {
    background: var(--h-success-soft);
    color: var(--h-success-ink);
}

.h-note-err {
    background: var(--h-danger-soft);
    color: var(--h-danger-ink);
}

.h-note-info {
    background: var(--h-primary-soft);
    color: var(--h-primary-ink);
}

/* ═══════════════════════ 11. الأسئلة الشائعة ═══════════════════════ */

.h-faq { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }

.h-faq details {
    padding: 4px 22px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    transition: border-color .18s var(--h-ease);
}

.h-faq details[open] { border-color: var(--h-primary); }

.h-faq summary {
    padding-block: 18px;
    font-family: var(--h-font-head);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.h-faq summary::-webkit-details-marker { display: none; }

.h-faq summary::after {
    content: '+';
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--h-surface-2);
    color: var(--h-primary);
    font-size: 1.2rem;
    line-height: 1;
    transition: rotate .2s var(--h-ease);
}

.h-faq details[open] summary::after { content: '−'; rotate: 180deg; }

.h-faq p {
    margin: 0;
    padding-block-end: 20px;
    color: var(--h-text-soft);
    font-size: .95rem;
}

/* ═══════════════════════ 12. نداء الفعل ═══════════════════════ */

.h-cta {
    position: relative;
    padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 56px);
    border-radius: var(--h-radius-lg);
    background: linear-gradient(135deg, var(--h-primary), #7c3aed 55%, #8b5cf6);
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.h-cta::before {
    content: '';
    position: absolute;
    inset-block-start: -50%;
    inset-inline-end: -10%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.h-cta > * { position: relative; }

.h-cta h2 { color: #fff; }

.h-cta p {
    color: rgba(255, 255, 255, .96);
    max-width: 56ch;
    margin-inline: auto;
    margin-block-end: 26px;
}

.h-cta .h-btn-primary {
    background: #fff;
    color: var(--h-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.h-cta .h-btn-primary:hover { background: #fff; color: var(--h-primary-700); }

/*
   طبقةٌ داكنة لا بيضاء تحت الزرّ الشبح.

   الأبيض بشفافية ١٢٪ كان يُفتّح الطرف الفاتح من التدرّج (#8b5cf6) فيهبط
   تباين نصّه الأبيض إلى 3.5 — دون حدّ AA لنصٍّ بحجم ١٦px. والطبقة الداكنة
   تعمّق ما تحتها بدل أن تفتّحه فترتفع النسبة إلى 6.1، والحدّ الأبيض يبقى
   يرسم شكل الزرّ.
*/
.h-cta .h-btn-ghost {
    background: rgba(12, 14, 24, .22);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.h-cta .h-btn-ghost:hover { background: rgba(12, 14, 24, .34); color: #fff; }

/* ═══════════════════════ 13. الذيل ═══════════════════════ */

.h-footer {
    padding-block: clamp(48px, 6vw, 72px) 28px;
    background: var(--h-bg-alt);
    border-block-start: 1px solid var(--h-border);
}

.h-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 36px var(--h-gap);
    margin-block-end: 40px;
}

.h-footer h2 {
    font-size: .84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--h-text-muted);
    margin-block-end: 16px;
}

.h-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
}

.h-footer ul a {
    color: var(--h-text-soft);
    font-size: .93rem;
}

.h-footer ul a:hover { color: var(--h-primary); }

.h-footer-about p {
    color: var(--h-text-soft);
    font-size: .93rem;
    max-width: 42ch;
    margin-block: 14px 18px;
}

.h-social { display: flex; gap: 9px; }

.h-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--h-border);
    border-radius: 11px;
    background: var(--h-surface);
    color: var(--h-text-soft);
    font-size: 1.05rem;
}

/*
   لون المنصّة يصل من قاعدة البيانات متغيّراً واحداً (--h-social-accent) يضبطه
   القالب على الرابط. بلا لون محفوظ يسقط إلى لون الهوية، فلا تحتاج كل منصّة
   جديدة قاعدةً في هذا الملفّ — تُضاف من اللوحة وحدها.
*/
.h-social a {
    --h-social-accent: var(--h-primary);
    transition: color .2s var(--h-ease), border-color .2s var(--h-ease),
                background-color .2s var(--h-ease), transform .2s var(--h-ease);
}

.h-social a:hover {
    border-color: var(--h-social-accent);
    color: var(--h-social-accent);
    transform: translateY(-2px);
}

/*
   الوضع الداكن: لون المنصّة يُرفع نحو لون النصّ.

   ألوان العلامات تُختار لتُرى على أبيض — إكس ‎#000 وتيك توك ‎#010101 على سطح
   داكن أيقونةٌ تختفي عند المرور، أي أن التفاعل يمحو ما جاء ليُبرزه. المزج
   بـ‎55% يُبقي هويّة اللون ويرفع التباين، وهو نفس علاج .h-service-tag.
   السطر الأوّل احتياط لمتصفّح بلا color-mix.
*/
:root[data-theme="dark"] .h-social a:hover {
    color: var(--h-text-soft);
    color: color-mix(in srgb, var(--h-social-accent) 55%, var(--h-text));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .h-social a:hover {
        color: var(--h-text-soft);
        color: color-mix(in srgb, var(--h-social-accent) 55%, var(--h-text));
    }
}

/* ───────── طرق الدفع ─────────

   صفٌّ صامت داخل سطر الحقوق: بلا حاضنة، بلا حدّ، بلا عنوان مرئي، وبألوان
   محايدة. ثلاث مراجعات وصلت إلى هذا بعد أن جرّبت نقيضه:

     • حاضنة بيضاء على ذيل رمادي فاتح تطفو بلا سبب.
     • عنوانٌ في طرف وشعارات في الطرف المقابل (space-between) يصنع فراغاً
       يفصلهما لا اتّزاناً يجمعهما.
     • شريطٌ بحدٍّ خاصّ يضيف خطّاً أفقياً ثالثاً إلى ثُلثٍ واحد من الذيل.

   والحياد ليس تنازلاً: محرف الأيقونة شكلٌ واحد مصمَت، فتلوينه بلون العلامة
   يحوّل دائرتَي ماستركارد المتداخلتين إلى بقعة حمراء واحدة — أي أنه يدّعي
   الشعار ولا يؤدّيه. الرمادي الموحّد أصدق، ويعمل في الوضعين الفاتح والداكن
   بلا استثناء لأيٍّ منهما.

   ⚠ المحدِّد يبدأ بـ.h-footer: القاعدة العامّة `.h-footer ul` تفرض
   display:grid على كل قائمة في الذيل، وهي أخصّ من `.h-pay-list` وحدها.
*/
.h-footer .h-pay-list {
    /*
       مقياسٌ واحد يقود الصفّ كلّه — النسب أدناه مشتقّة منه، فتكبير الشعارات
       أو تصغيرها تعديلُ رقمٍ واحد لا سبعة.
    */
    --h-pay-size: 1.25rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-pay-badge {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 22px;
    color: var(--h-text-muted);
    line-height: 1;
}

/*
   نسبةٌ لكل شعار لا مقاس واحد للجميع.

   محارف Remixicon تتساوى في المربّع (1em) وتختلف في الحبر اختلافاً حادّاً —
   قِيست من الخطّ نفسه:

     ماستركارد 0.92 × 0.57em   |  أبل    0.75 × 0.92em
     فيزا       0.92 × 0.67em   |  باي بال 0.73 × 0.86em
     بطاقة      0.83 × 0.75em   |  جوجل   0.82 × 0.83em

   بمقاسٍ واحد يظهر شعار ماستركارد بنصف ارتفاع شعار أبل في الصفّ نفسه، وهو
   ما يجعل الشريط يبدو مركَّباً على عجل. النسب توحّد **الارتفاع** البصري
   وتترك العرض يختلف كما يختلف في الشعارات الحقيقية: فيزا أعرض من أبل فعلاً.

   الأصناف مكتوبة بأسمائها رغم أن الأيقونة تأتي من قاعدة البيانات: أيقونة
   خارج القائمة تأخذ المقاس الأساسي وتظهر مقبولة — المعايرة تحسينٌ لما هو
   مبذور فعلاً لا شرطٌ لعمل الصفّ.
*/
.h-pay-badge i { font-size: var(--h-pay-size); }

.h-pay-badge .ri-mastercard-fill  { font-size: calc(var(--h-pay-size) * 1.23); }
.h-pay-badge .ri-visa-fill        { font-size: calc(var(--h-pay-size) * 1.13); }
.h-pay-badge .ri-bank-card-fill,
.h-pay-badge .ri-bank-card-2-fill { font-size: calc(var(--h-pay-size) * 1.07); }
.h-pay-badge .ri-paypal-fill,
.h-pay-badge .ri-google-fill      { font-size: calc(var(--h-pay-size) * .93); }
.h-pay-badge .ri-apple-fill       { font-size: calc(var(--h-pay-size) * .90); }

/*
   نصٌّ للصوت لا للعين: display:none يُخرجه من شجرة الوصول أيضاً، فتبقى
   الشارة أيقونةً بلا اسم عند قارئ الشاشة.
*/
.h-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.h-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-start: 24px;
    border-block-start: 1px solid var(--h-border);
    color: var(--h-text-muted);
    font-size: .86rem;
}

.h-footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.h-footer-bottom a { color: var(--h-text-muted); }
.h-footer-bottom a:hover { color: var(--h-primary); }

/* ═══════════════════════ 14. الصفحات القانونية ═══════════════════════ */

.h-legal {
    max-width: 800px;
    margin-inline: auto;
}

.h-legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 16px 20px;
    margin-block-end: 36px;
    border-radius: var(--h-radius);
    background: var(--h-surface-2);
    color: var(--h-text-muted);
    font-size: .86rem;
}

.h-legal h2 {
    font-size: 1.35rem;
    margin-block: 40px 12px;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--h-border);
}

.h-legal h3 { font-size: 1.08rem; margin-block: 24px 8px; }

.h-legal p,
.h-legal li { color: var(--h-text-soft); }

.h-legal li { margin-block-end: 8px; }

.h-toc {
    padding: 20px 24px;
    margin-block-end: 36px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    background: var(--h-surface);
}

.h-toc b { display: block; margin-block-end: 10px; font-family: var(--h-font-head); }

.h-toc ol { margin: 0; display: grid; gap: 6px; font-size: .93rem; }

/* ═══════════════════════ 15. صفحة الانتظار ═══════════════════════ */

.h-status {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
    padding-block: clamp(48px, 8vw, 88px);
}

.h-spinner {
    width: 54px;
    height: 54px;
    margin-inline: auto;
    margin-block-end: 26px;
    border: 4px solid var(--h-border);
    border-top-color: var(--h-primary);
    border-radius: 50%;
    animation: h-spin .9s linear infinite;
}

@keyframes h-spin { to { rotate: 360deg; } }

.h-status-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin-inline: auto;
    margin-block-end: 22px;
    border-radius: 50%;
    font-size: 2.2rem;
}

.h-status-icon.is-ok { background: var(--h-success-soft); color: var(--h-success-ink); }
.h-status-icon.is-err { background: var(--h-danger-soft); color: var(--h-danger-ink); }

/* ═══════════════════════ 16. الحركة عند الظهور ═══════════════════════ */

.h-rise {
    opacity: 0;
    translate: 0 22px;
    transition: opacity .6s var(--h-ease), translate .6s var(--h-ease);
}

.h-rise.is-in {
    opacity: 1;
    translate: 0 0;
}

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

    .h-rise { opacity: 1; translate: 0 0; }
}

/* ═══════════════════════ 17. الاستجابة ═══════════════════════ */

@media (max-width: 1024px) {
    .h-hero-grid { grid-template-columns: 1fr; }
    .h-split { grid-template-columns: 1fr; }
    .h-preview { order: -1; }
    .h-builder { grid-template-columns: 1fr; }
    .h-summary { position: static; }
    .h-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .h-burger { display: inline-flex; }

    .h-menu {
        position: fixed;
        inset-block-start: 72px;
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px 20px 22px;
        background: var(--h-bg);
        border-block-end: 1px solid var(--h-border);
        box-shadow: var(--h-shadow);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height .3s var(--h-ease), opacity .22s var(--h-ease), visibility .22s;
    }

    .h-menu.is-open {
        max-height: 70vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
    }

    .h-menu a { padding: 13px 14px; font-size: 1rem; }

    .h-only-mobile { display: block; }

    .h-nav-actions .h-btn-ghost { display: none; }
}

@media (max-width: 640px) {
    body { font-size: 15.5px; }

    .h-wrap { padding-inline: 16px; }

    .h-hero-cta { flex-direction: column; align-items: stretch; }
    .h-hero-cta .h-btn { width: 100%; }

    .h-toggle { width: 100%; justify-content: center; }
    .h-toggle button { flex: 1; padding-inline: 12px; }

    .h-footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .h-footer-bottom { flex-direction: column; text-align: center; }

    /* على عمود واحد: الشعارات في المنتصف كبقيّة السطر، ومساحة تفصلها عن النصّ */
    .h-footer .h-pay-list {
        justify-content: center;
        margin-block: 4px;
    }

    .h-preview-stats { grid-template-columns: 1fr 1fr; }
    .h-card { padding: 22px; }

    /* على عمود واحد لا صفَّ لتُحاذى ترويساته — يسقط الارتفاع الثابت */
    .h-service-head {
        min-block-size: 0;
        gap: 12px;
    }
}

/*
   عنوانٌ فرعي داخل قسم: مستواه h2 ليصحّ تسلسل العناوين لقارئ الشاشة، وحجمه
   حجم h3 لأن دوره البصري ثانوي. المستوى للمعنى والحجم للشكل، ولا يلزم أن
   يتطابقا — وهذا الفصل هو ما يسمح بإصلاح التسلسل بلا تغيير التصميم.
*/
.h-subhead {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    margin-block-end: 16px;
}

/*
   رابطٌ داخل فقرة يُسطَّر. اللون وحده لا يكفي: معيار WCAG 1.4.1 يمنع نقل
   المعنى باللون فقط، وقارئٌ لا يميّز البنفسجي عن الرمادي لا يرى أن هنا رابطاً.

   لا يُطبَّق على روابط الترويسة والبطاقات والذيل: تلك محاطة بسياقٍ يقول
   إنها روابط (قائمة، بطاقة، زرّ)، والتسطير فيها ضجيج.
*/
main p > a:not([class]) {
    text-decoration: underline;
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
}

main p > a:not([class]):hover { text-decoration-thickness: 2px; }

/* ═══════════════════════ 19. ستارة قائمة الجوال ═══════════════════════
   القائمة المفتوحة كانت تطفو فوق صفحةٍ لا تزال تُمرَّر خلفها، بلا حدٍّ بصريّ
   يقول أين تنتهي. الستارة تحلّ الثلاثة: تُظلم ما خلفها، وتلتقط النقر خارج
   القائمة، وتُقرأ كطبقةٍ فوق المحتوى لا كجزءٍ منه.
   ══════════════════════════════════════════════════════════════════════ */

.h-scrim {
    position: fixed;
    inset: 0;
    z-index: 890;                       /* دون الترويسة (900) وفوق كل ما عداها */
    background: rgba(8, 10, 20, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s var(--h-ease), visibility .24s;
}

.h-scrim.is-on {
    opacity: 1;
    visibility: visible;
}

/*
   حبس التمرير على <html> لا على <body>: قفلُ body وحده يترك iOS يمرّر
   المستند خلف القائمة. و overflow على الجذر يوقف الاثنين.
*/
html.is-menu-open,
html.is-menu-open body { overflow: hidden; }

@media (min-width: 861px) {
    .h-scrim { display: none; }         /* لا قائمة منسدلة على الشاشة الواسعة */
}

@media (prefers-reduced-motion: reduce) {
    .h-scrim { transition: none; }
}

/* ═══════════════════════ 20. أهداف اللمس على الجوال ═══════════════════════
   إصبعٌ لا فأرة: زرٌّ ارتفاعه ٣٤ بكسل يُخطئه الإبهام مرّة من كل خمس. الحدّ
   المريح ٤٤×٤٤ (إرشاد آبل، وأعلى من حدّ WCAG 2.2 البالغ ٢٤).

   الحشوة الرأسية لا الارتفاع الصريح: الأخير يقصّ النصّ حين يلتفّ سطرين.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse), (max-width: 860px) {
    .h-nav-actions .h-btn,
    .h-lang,
    .h-btn-sm {
        min-height: 44px;
    }

    .h-burger { min-width: 44px; min-height: 44px; }

    .h-brand { padding-block: 4px; }

    /* روابط البطاقات: نصٌّ ارتفاعه ٢٦، والحشوة توسّع منطقة اللمس بلا إزاحة تخطيط */
    .h-card-link,
    .h-footer ul a,
    .h-footer-bottom a {
        padding-block: 9px;
    }

    .h-card-link { margin-block-end: -9px; }
}

@media print {
    .h-header, .h-footer, .h-cta, .h-btn { display: none !important; }
    body { color: #000; background: #fff; }
}

/* ═══════════════════════ 18. حياة الهيرو ═══════════════════════
   طبقةٌ فوق قسم ٦: دخولٌ متدرّج، وشفقٌ زاحف، وميلٌ يتبع المؤشّر، ولوحةٌ
   تنبض كأنّها تعمل. كلّها زخرف — لا معلومة تُفقَد لو أُوقفت الحركة أو
   عُطّلت الأنماط، ولا صورة تُحمَّل ولا مكتبة.

   القاعدة هنا: transform و opacity وحدهما في الحلقات المتكرّرة، فلا يُعاد
   حساب التخطيط في كل إطار على الجوال.
   ══════════════════════════════════════════════════════════════ */

/* ───────── 18أ. الدخول المتدرّج ───────── */

/*
   يعتمد على CSS وحده لا على جافاسكربت: لو تأخّر الملفّ أو فشل، يبقى العنوان
   ظاهراً. المتغيّر --d يُكتب في الوسم لأنه ترتيبٌ سرديّ (شارة ← عنوان ← وصف
   ← أزرار) لا نمطٌ متكرّر يُشتقّ من موضع العنصر.
*/
.h-enter {
    animation: h-enter-up .82s var(--h-ease) both;
    animation-delay: var(--d, 0ms);
}

.h-enter-pop {
    animation-name: h-enter-pop;
    animation-duration: 1s;
}

@keyframes h-enter-up {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes h-enter-pop {
    from { opacity: 0; transform: perspective(1200px) translate3d(0, 34px, 0) scale(.965) rotateX(6deg); }
    to   { opacity: 1; transform: none; }
}

/* ───────── 18ب. الشفق الخلفي ───────── */

.h-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.h-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    opacity: .5;
    will-change: transform;
}

.h-orb-1 {
    inset-block-start: -140px;
    inset-inline-start: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(91, 82, 240, .5), transparent 70%);
    animation: h-drift-a 22s var(--h-ease) infinite;
}

.h-orb-2 {
    inset-block-start: 30px;
    inset-inline-end: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(closest-side, rgba(0, 194, 168, .42), transparent 70%);
    animation: h-drift-b 26s var(--h-ease) infinite;
}

.h-orb-3 {
    inset-block-end: -180px;
    inset-inline-start: 42%;
    width: 340px;
    height: 340px;
    background: radial-gradient(closest-side, rgba(139, 124, 255, .38), transparent 70%);
    animation: h-drift-c 30s var(--h-ease) infinite;
}

@keyframes h-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(70px, 50px, 0) scale(1.12); }
}

@keyframes h-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-60px, 70px, 0) scale(.92); }
}

@keyframes h-drift-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(.95); }
    50%      { transform: translate3d(50px, -60px, 0) scale(1.1); }
}

/*
   شبكة نقاط تتلاشى نحو الحواف. القناع يجعلها توحي بالعمق بدل أن تطبع نمطاً
   مكرّراً على كامل القسم — وهو الفرق بين خلفيةٍ تقنية وورق حائط.
*/
.h-mesh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 26px 26px;
    color: rgba(91, 82, 240, .22);
    opacity: .5;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 15%, transparent 72%);
}

:root[data-theme="dark"] .h-mesh,
:root[data-theme="dark"] .h-orb { opacity: .34; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .h-mesh,
    :root:not([data-theme="light"]) .h-orb { opacity: .34; }
}

/* ───────── 18ج. العنوان ───────── */

.h-hero-title span { display: block; }

/*
   الشطر الثاني يحمل تدرّج الهوية ويزحف ببطء. background-clip: text يحتاج
   لون نصٍّ شفّافاً، و -webkit-text-fill-color ضروريٌّ لسفاري وحده.
*/
.h-title-accent {
    background: linear-gradient(100deg,
        var(--h-primary) 0%,
        #8b7cff 26%,
        var(--h-accent) 52%,
        #8b7cff 74%,
        var(--h-primary) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: h-enter-up .82s var(--h-ease) both, h-gradient-drift 11s linear 1.2s infinite;
    padding-block-end: .08em;
}

@keyframes h-gradient-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 260% 50%; }
}

/* ───────── 18د. لمعان الشارة والزرّ ───────── */

.h-shine {
    position: relative;
    overflow: hidden;
}

/*
   بريقٌ يمرّ مرّةً كل ست ثوانٍ — إشارة حياة لا وميضٌ يشدّ العين باستمرار.
   شدّته رمزٌ لا رقمٌ ثابت: أبيضُ ٧٥٪ على شارةٍ فاتحة لمعةٌ لطيفة، وعلى شارةٍ
   داكنة يصير شريطاً أبيض يطمس النصّ تحته.
*/
.h-shine {
    --h-shine-strength: rgba(255, 255, 255, .75);
}

:root[data-theme="dark"] .h-shine { --h-shine-strength: rgba(255, 255, 255, .16); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .h-shine { --h-shine-strength: rgba(255, 255, 255, .16); }
}

.h-shine::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, var(--h-shine-strength), transparent);
    animation: h-sweep 6s var(--h-ease) 1.8s infinite;
    pointer-events: none;
}

@keyframes h-sweep {
    0%        { transform: translateX(0); }
    22%, 100% { transform: translateX(360%); }
}

[dir="rtl"] .h-shine::after { animation-name: h-sweep-rtl; }

@keyframes h-sweep-rtl {
    0%        { transform: translateX(0); }
    22%, 100% { transform: translateX(-360%); }
}

.h-btn-sheen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* اللمعة تُشغَّل بالمرور فقط: زرٌّ يلمع بلا سبب يصير ضوضاء بصرية */
.h-btn-sheen::before {
    content: "";
    position: absolute;
    inset-block: -50%;
    inset-inline-start: -75%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: translateX(0) skewX(-18deg);
    transition: transform .75s var(--h-ease);
    z-index: -1;
}

.h-btn-sheen:hover::before,
.h-btn-sheen:focus-visible::before { transform: translateX(360%) skewX(-18deg); }

[dir="rtl"] .h-btn-sheen:hover::before,
[dir="rtl"] .h-btn-sheen:focus-visible::before { transform: translateX(-360%) skewX(-18deg); }

/* السهم يتقدّم نحو وجهته — الاتجاه يُقلَب في RTL فيصحّ في اللغتين */
.h-btn-sheen i { transition: translate .22s var(--h-ease); }
.h-btn-sheen:hover i { translate: .22em 0; }
[dir="rtl"] .h-btn-sheen:hover i { translate: -.22em 0; }

/* ───────── 18هـ. ميل اللوحة وتوازي الشارات ───────── */

/*
   الميل على .h-preview لا على الغلاف: الشارات العائمة أخوةٌ له، فتتحرّك
   بمقدارٍ مختلف (data-parallax) ويظهر العمق بدل أن يميل المشهد كلوحة واحدة.
*/
.h-preview {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s var(--h-ease), box-shadow .5s var(--h-ease);
    will-change: transform;
}

/* أثناء التتبّع: انتقالٌ خطّيٌّ قصير يمنع الاهتزاز بلا أن تتأخّر اللوحة عن المؤشّر */
.h-preview-wrap.is-tilting .h-preview { transition: transform .12s linear; }

/* حافّةٌ علوية مضيئة تفصل اللوحة عن الخلفية وتمنحها إحساس الزجاج */
.h-preview::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91, 82, 240, .65), rgba(0, 194, 168, .5), transparent);
    opacity: .8;
    pointer-events: none;
}

/*
   الشارات تستعمل transform للتوازي و translate للتهويم (h-float-bob) —
   خاصّتان منفصلتان في CSS، فلا تُلغي إحداهما الأخرى.
*/
.h-float {
    transform: translate3d(var(--pxo, 0px), var(--pyo, 0px), 0);
    transition: transform .5s var(--h-ease);
}

.h-preview-wrap.is-tilting .h-float { transition: transform .16s linear; }

/* نبضةٌ عند وصول فاتورة جديدة — تُطلَق من جافاسكربت مع تحديث الأرقام */
.h-float.is-pop { animation: h-badge-pop .9s var(--h-ease); }

@keyframes h-badge-pop {
    0%   { scale: 1; box-shadow: var(--h-shadow-lg); }
    35%  { scale: 1.07; box-shadow: 0 18px 44px rgba(91, 82, 240, .38); }
    100% { scale: 1; box-shadow: var(--h-shadow-lg); }
}

/* ───────── 18و. الرسم الحيّ ───────── */

.h-chart {
    position: relative;
    overflow: hidden;
}

.h-chart i {
    transition: height .85s var(--h-ease), background .85s var(--h-ease);
}

.h-chart i.is-peak {
    animation: h-rise .7s var(--h-ease) backwards, h-peak-glow 3.2s ease-in-out 1s infinite;
}

@keyframes h-peak-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 194, 168, .22); }
    50%      { box-shadow: 0 0 26px rgba(0, 194, 168, .5); }
}

/* شعاعٌ يمسح الرسم كأنّ البيانات تُقرأ الآن */
.h-chart-sweep {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -30%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(91, 82, 240, .16), transparent);
    animation: h-chart-sweep 5.5s linear 1.4s infinite;
    pointer-events: none;
}

@keyframes h-chart-sweep {
    0%   { transform: translateX(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(500%); opacity: 0; }
}

[dir="rtl"] .h-chart-sweep { animation-name: h-chart-sweep-rtl; }

@keyframes h-chart-sweep-rtl {
    0%   { transform: translateX(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(-500%); opacity: 0; }
}

/* الرقم يومض لحظة تغيّره فيُلتقط التحديث بطرف العين */
.h-num.is-bumped { animation: h-num-bump .6s var(--h-ease); }

@keyframes h-num-bump {
    0%   { scale: 1; }
    30%  { scale: 1.06; color: var(--h-accent); }
    100% { scale: 1; }
}

/* ───────── 18ز. الحدود ───────── */

/* شاشة صغيرة: الشفق يبقى والزحف يتوقّف — بطاريةٌ لا تُستهلك على زخرف */
@media (max-width: 767px) {
    .h-orb {
        animation: none;
        filter: blur(46px);
        opacity: .34;
    }

    .h-chart-sweep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .h-enter,
    .h-title-accent {
        --d: 0ms;
        opacity: 1;
        transform: none;
    }

    .h-orb,
    .h-chart-sweep,
    .h-title-accent { animation: none; }

    .h-shine::after { display: none; }

    .h-preview,
    .h-float { transform: none !important; }
}

/* ═══════════════════════ 19. الشريط المستعرض ═══════════════════════

   شريطٌ أفقي لبطاقات موجودة أصلاً (.h-service) — لا نمط بطاقة جديد هنا،
   الملفّ يضيف الحاوية والتحكّم وحدهما.

   الأساس تمريرٌ أفقي بمحاذاة قافزة، لا ترجمة محسوبة بجافاسكربت:
     • يعمل بالسحب على الجوال وبالعجلة الأفقية على المكتب قبل تحميل أي سكربت.
     • مسارٌ قابل للتمرير يجعل قارئ الشاشة يصل إلى البطاقات الخمس كلّها
       بلا «سلايد» مخفيّ بـ display:none.
     • لا حساب عرض ولا إعادة حساب عند تغيير المقاس — المتصفّح يفعلها.

   عدد البطاقات الظاهرة متغيّرٌ واحد (--h-car-per) تقرأه قاعدة flex-basis،
   فيتغيّر المقاس في ثلاثة أسطر بدل ثلاث قواعد كاملة.
*/

.h-carousel {
    --h-car-per: 3;
    position: relative;
}

.h-car-track {
    display: flex;
    gap: var(--h-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /*
       متنفَّسٌ حول المسار: البطاقة ترتفع ٤ بكسل عند المرور ولها ظلّ ممتدّ،
       وبلا هذه المساحة يقصّهما overflow فيبدو الارتفاع قطعاً لا نتوءاً.
       الهامش السالب يعيد الحافّة إلى محاذاة بقيّة أقسام الصفحة.
    */
    padding-block: 10px 16px;
    padding-inline: 6px;
    margin-block: -10px -16px;
    margin-inline: -6px;

    /* شريط التمرير مخفيٌّ لأن النقاط والأسهم تقول الموضع بلغة الصفحة */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.h-car-track::-webkit-scrollbar { display: none; }

.h-car-track > * {
    flex: 0 0 calc((100% - (var(--h-car-per) - 1) * var(--h-gap)) / var(--h-car-per));
    scroll-snap-align: start;
}

/* المسار بؤرةٌ لوحة مفاتيح — الحلقة تظهر على الحاوية لا على بطاقة بعينها */
.h-car-track:focus-visible {
    outline: none;
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-ring);
}

/* ───────── شريط التحكّم ───────── */

.h-car-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 24px;
    min-block-size: 38px;
}

/*
   الأسهم والنقاط لا وجود لها بلا جافاسكربت: زرٌّ لا يفعل شيئاً أسوأ من
   غيابه. haleif-site.js يضيف is-ready بعد أن يربط السلوك فعلاً.
*/
.h-car-dots,
.h-car-nav { display: none; }

.h-carousel.is-ready .h-car-dots { display: flex; }
.h-carousel.is-ready .h-car-nav  { display: flex; }

/*
   لا فجوة بين النقاط: الحشوة داخل كل زرّ هي الفجوة البصرية، ووجودها داخله
   لا بينه وبين جاره يجعل الفراغ قابلاً للنقر بدل أن يكون منطقة ميتة.
*/
.h-car-dots {
    align-items: center;
    gap: 0;
}

/*
   النقطة النشطة تستطيل بدل أن تكبر: التمدّد يُقرأ كموضعٍ على مسار،
   والتضخّم يُقرأ كزرٍّ مضغوط.
*/
/*
   النقطة ٨px للعين و٢٤×٢٤ للإصبع.

   الفصل بـbackground-clip: content-box: الخلفية تُرسم في صندوق المحتوى وحده
   (٨×٨)، والحشوة تبقى شفّافة لكنها جزء من الزرّ فتستقبل النقر. هكذا يمرّ
   معيار WCAG 2.5.8 بلا أن تتضخّم النقطة بصرياً — وكانت ٨×٨ نقراً وعرضاً،
   أي ثُلث الحدّ الأدنى، وهو ما يجعل إصبعاً واحداً يخطئها مرّتين من ثلاث.
*/
.h-car-dot {
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 8px;
    border: 0;
    border-radius: var(--h-radius-pill);
    background: var(--h-border-strong);
    background-clip: content-box;
    cursor: pointer;
    transition: width .28s var(--h-ease), background-color .28s var(--h-ease);
}

.h-car-dot:hover { background: var(--h-text-muted); }

.h-car-dot.is-on {
    width: 26px;
    background: var(--h-primary);
}

.h-car-dot:focus-visible {
    outline: none;
    box-shadow: var(--h-ring);
}

.h-car-nav { gap: 10px; }

.h-car-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--h-border);
    border-radius: 50%;
    background: var(--h-surface);
    color: var(--h-text-soft);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s var(--h-ease), border-color .2s var(--h-ease),
                background-color .2s var(--h-ease), transform .2s var(--h-ease);
}

.h-car-btn:hover:not(:disabled) {
    border-color: var(--h-primary);
    background: var(--h-primary-soft);
    color: var(--h-primary);
    transform: scale(1.06);
}

.h-car-btn:focus-visible {
    outline: none;
    box-shadow: var(--h-ring);
}

/* طرف الشريط: الزرّ يبهت ويبقى مكانه — اختفاؤه يزحزح الشريط عند كل قفزة */
.h-car-btn:disabled {
    opacity: .38;
    cursor: default;
}

/* ───────── المقاسات ───────── */

@media (max-width: 1024px) {
    .h-carousel { --h-car-per: 2; }
}

@media (max-width: 640px) {
    .h-carousel { --h-car-per: 1; }

    /* بطاقةٌ كاملة وطرفُ التالية: إشارة «هناك المزيد» بلا سهم على شاشة ضيّقة */
    .h-car-track > * { flex-basis: 86%; }

    .h-car-foot { justify-content: center; }
    .h-carousel.is-ready .h-car-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .h-car-track { scroll-behavior: auto; }
}

@media print {
    .h-car-track {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow: visible;
    }

    .h-car-foot { display: none; }
}