/* ==========================================================================
   home.css — الصفحة التعريفية (Landing)
   مبنيّة على فريم فيجما «AI منح» → صفحة final → `landing page 2` (1440×7525).
   الألوان والتدرّجات مستخرجة من الفريم نفسه. الخط: Greta Arabic (خط المشروع).
   ========================================================================== */

.hm {
    --hm-ink: #0d0f52;
    --hm-body: #515151;
    --hm-muted: #939393;
    --hm-line: #eaeaea;
    --hm-accent: #3333ff;
    --hm-accent-deep: #2d0e8b;
    --hm-accent-soft: #8a8df8;
    --hm-surface: #ffffff;
    --hm-tint: #f4f5ff;
    --hm-page: #fdfcff;
    --hm-danger: #b42318;
    --hm-required: #dd0417;
    --hm-radius: 16px;
    --hm-radius-lg: 24px;
    --hm-shadow: 0 4px 20px rgba(67, 97, 238, 0.07);
    --hm-shadow-btn: 0 10px 35px rgba(67, 97, 238, 0.35);
    --hm-dark: linear-gradient(180deg, #111178, #14073b);

    box-sizing: border-box;
    background: var(--hm-page);
    color: var(--hm-ink);
    font-family: 'Greta Arabic', sans-serif;
    -webkit-font-smoothing: antialiased;
}

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

.hm img {
    max-width: 100%;
}

/* ----------------------------------------------------------- بدائيات ---- */

.hm-wrap {
    width: 100%;
    max-width: 1312px;
    margin-inline: auto;
    padding-inline: 24px;
}

.hm-section {
    /* إيقاع الفريم: 48px بين الأقسام (طلب المالك 2026-08-04) */
    padding-block: 48px;
}

/* روابط المرساة تحسب ارتفاع الترويسة اللاصقة (72px) فلا يختبئ أول القسم خلفها */
.hm [id] {
    scroll-margin-top: 84px;
}

.hm-section--dark {
    background: var(--hm-dark);
    color: #fff;
}

.hm-section--tint {
    background: var(--hm-tint);
}

.hm-section--plain {
    background: var(--hm-surface);
}

/* بادج القسم — قيم الفريم الحرفية: #eef2ff (الفاتح) / #e7edff (الداكن والمصبوغ)،
   والنص أزرق دائماً حتى على الخلفية الداكنة */
.hm-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--hm-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

.hm-section--dark .hm-badge,
.hm-section--tint .hm-badge {
    background: #e7edff;
    color: var(--hm-accent);
}

.hm-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 56px;
}

/* الفريم: 56 قبل المحتوى في القسمين الأبيضين فقط، و32 في المصبوغة والداكنة */
.hm-section--tint .hm-head,
.hm-section--dark .hm-head {
    margin-bottom: 32px;
}

.hm-h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.72;
    color: var(--hm-ink);
}

.hm-section--dark .hm-h2 {
    color: #fff;
}

/* السطر الثاني أزرق في كل الأقسام الفاتحة (تجاوزات حرفية في نص الفريم)،
   وأبيض مثل السطر الأول في القسمين الداكنين */
.hm-h2 em {
    display: block;
    font-style: normal;
    color: var(--hm-accent);
}

.hm-section--dark .hm-h2 em {
    color: inherit;
}

.hm-lede {
    margin: 0;
    max-width: 820px;
    font-size: 20px;
    line-height: 1.8;
    color: var(--hm-body);
}

.hm-section--dark .hm-lede {
    color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------- أزرار ---- */

.hm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 32px;
    border: 0;
    border-radius: var(--hm-radius);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.hm-btn--primary {
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    box-shadow: var(--hm-shadow-btn);
    color: #fff;
}

.hm-btn--primary:hover {
    filter: brightness(1.08);
}

.hm-btn:active {
    transform: translateY(1px);
}

/* الزر الثانوي في الفريم المحدَّث: أبيض بإطار متدرج ونص متدرج (#3333ff → #2d0e8b)
   قصّ التدرّج على النص يتم على span داخلي — background-clip:text لا يعمل
   على حاويات flex في كروميوم، لذا تُغلَّف تسمية كل زر ghost بـ<span> */
.hm-btn--ghost {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep)) border-box;
    color: var(--hm-accent);
}

.hm-btn--ghost > span {
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hm-btn--ghost:hover {
    background:
        linear-gradient(var(--hm-tint), var(--hm-tint)) padding-box,
        linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep)) border-box;
}

.hm-btn--block {
    width: 100%;
}

/* ------------------------------------------------------------ الترويسة -- */

.hm-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 72px;
    background: rgba(253, 252, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(67, 97, 238, 0.1);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
}

.hm-nav__inner {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hm-nav__logo img {
    display: block;
    width: 116px;
    height: auto;
}

.hm-nav__links {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-nav__links a {
    color: #191919;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.hm-nav__links a:hover,
.hm-nav__links a.is-active {
    color: var(--hm-accent);
}

.hm-nav__links a.is-active {
    font-weight: 600;
}

.hm-nav__cta {
    min-height: 40px;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
    font-size: 14px;
}

.hm-nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    background: #fff;
    color: var(--hm-ink);
    cursor: pointer;
}

/* --------------------------------------------------------------- هيرو -- */

/* خلفية الهيرو من الفريم المحدَّث: صفحة شبه بيضاء + ثلاث هالات ضبابية
   (بنفسجية #babeff، كهرمانية #fec84b، نيلية #3333ff — blur 600 في فيجما) */
.hm-hero {
    position: relative;
    overflow: hidden;
    padding-block: 107px 108px;
    background:
        radial-gradient(28% 45% at 12% 20%, rgba(186, 190, 255, 0.55), transparent 70%),
        radial-gradient(26% 42% at 55% 90%, rgba(254, 200, 75, 0.22), transparent 70%),
        radial-gradient(30% 48% at 92% 30%, rgba(51, 51, 255, 0.14), transparent 70%),
        var(--hm-page);
}

.hm-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

/* العنوان والفقرة كتلة واحدة بفاصل 16 (الفريم: gap32 حول الكتلة و16 داخلها) */
.hm-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* بادج الهيرو — الفريم: تعبئة #bac4ff بشفافية 30% وإطار أزرق وحواف 16 */
.hm-hero__badge {
    background: rgba(186, 196, 255, 0.3);
    border: 0.8px solid var(--hm-accent);
    border-radius: 16px;
    gap: 12px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 27px;
}

/* كبسولة «جديد» زجاجية: بيضاء شبه شفافة بنص أزرق (لا العكس) */
.hm-hero__badge b {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 0.3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(51, 51, 255, 0.15);
    color: rgba(51, 51, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
}

.hm-h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.875;
    color: #191919;
}

.hm-h1 span {
    color: var(--hm-accent);
}

.hm-hero__lede {
    max-width: 815px;
    font-size: 24px;
    line-height: 1.875;
    color: var(--hm-body);
}

.hm-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* زرا الهيرو — الفريم: 200×56، خط 15، وظل على الزرين معاً */
.hm-hero__cta .hm-btn {
    min-width: 200px;
    min-height: 56px;
    padding: 14px 28px;
    font-size: 15px;
    box-shadow: 0 10px 35px rgba(67, 97, 238, 0.38);
}

/* البطاقات العائمة حول الهيرو — فريم محدَّث: #fafcff وظل خفيف وشارات ملونة متوهجة */
.hm-float {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    border-radius: 16px;
    background: #fafcff;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.05);
}

.hm-float__label {
    display: block;
    color: #8c8c8c;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.hm-float__value {
    display: block;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #191919;
}

.hm-float__value i {
    color: #b0b0b0;
    font-style: normal;
    font-weight: 400;
}

.hm-float__value b {
    color: #12b76a;
    font-weight: 700;
}

.hm-float__value--green {
    color: #12b76a;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
}

.hm-float__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    border-radius: 12px;
    font-size: 20px;
}

/* بطاقة الجودة: صندوق الأيقونة 60 والرمز 36 (الفريم) */
.hm-float__icon--green {
    width: 60px;
    height: 60px;
    background: rgba(52, 199, 89, 0.25);
    box-shadow: 0 0 16px rgba(52, 199, 89, 0.28);
    color: #12b76a;
    font-weight: 900;
}

.hm-float__icon--green svg {
    width: 36px;
    height: 36px;
}

/* مواضع الفريم (1440): جودة 145,81 · دراسة 93,قاع97 · مؤشرات يمين58,89 */
.hm-float--savings {
    top: 81px;
    inset-inline-end: 145px;
    transform: rotate(-6deg);
}

.hm-float--speed {
    bottom: 97px;
    inset-inline-end: 93px;
    transform: rotate(4deg);
}

.hm-float--speed .hm-float__icon {
    background: rgba(50, 173, 230, 0.25);
    box-shadow: 0 0 16px rgba(50, 173, 230, 0.28);
}

.hm-float--chart {
    top: 89px;
    inset-inline-start: 58px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    transform: rotate(3deg);
}

/* أعمدة الفريم: مسار فاتح r3 وتعبئة زرقاء من الأسفل */
.hm-spark {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 77px;
}

.hm-spark i {
    display: flex;
    align-items: flex-end;
    width: 17px;
    border-radius: 3px;
    background: #ebecfe;
    overflow: hidden;
}

.hm-spark b {
    display: block;
    width: 100%;
    border-radius: 2px;
    background: var(--hm-accent);
}

/* ------------------------------------------------------- شبكة البطاقات -- */

.hm-grid {
    display: grid;
    gap: 24px;
}

.hm-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.hm-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.hm-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    /* بطاقتا الاشتراك في الفريم بفاصل 48 */
    gap: 48px;
}

.hm-card {
    background: var(--hm-tint);
    border-radius: var(--hm-radius-lg);
    padding: 28px;
    box-shadow: var(--hm-shadow);
}

.hm-card--plain {
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
}

/* بطاقات الأرقام (لماذا المَنح AI) — فريم AdvantagesSection المحدَّث:
   بطاقة مصبوغة بإطار خافت وهالة ملونة لكل بطاقة (--stat-color من البلايد) */
.hm-stat {
    position: relative;
    overflow: hidden;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius);
    box-shadow: none;
}

/* كرة التوهج — الفريم: 160×160 خارج الزاوية العليا-اليمنى بشفافية 25% وضباب 108 */
.hm-stat::before {
    content: '';
    position: absolute;
    top: -72px;
    right: -181px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: var(--stat-glow, var(--stat-color, var(--hm-accent)));
    opacity: 0.25;
    filter: blur(54px);
}

.hm-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #eef2ff;
    font-size: 20px;
    margin-bottom: 16px;
}

/* الأرقام مختلطة الاتجاه («60–80%»، «+20») — تُعزل بـ LTR، والفريم يصفّها يساراً */
.hm-stat__num {
    display: block;
    direction: ltr;
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    color: var(--stat-color, var(--hm-accent));
    letter-spacing: -0.02em;
}

.hm-stat__title {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
    color: var(--hm-ink);
}

.hm-stat__text {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: #191919;
}

/* ------------------------------------------------------------- التحديات */

.hm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.hm-challenge {
    background: #fff;
    /* البطاقة بيضاء داخل قسم داكن — يجب تثبيت لون النص وإلا ورث الأبيض */
    color: var(--hm-ink);
    border-radius: var(--hm-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* البطاقة عمودان: النص يميناً والرسم التوضيحي يساراً (فيجما 2026-08-03) */
.hm-challenge {
    display: grid;
    /* الفريم المحدَّث: نصفان متساويان (نص 410 / رسم 410) */
    grid-template-columns: 1fr 1fr;
}

.hm-split--challenges {
    /* نسبة الفريم المحدَّث: قائمة 467 مقابل بطاقة 820 */
    grid-template-columns: 0.57fr 1fr;
    /* البطاقة تمتد لارتفاع القائمة فتتحاذى الحواف العلوية والسفلية بين الحالات */
    align-items: stretch;
}

/* البطاقات الخمس تتراكب في الخلية نفسها: تبديل التحدي تلاشٍ في المكان —
   بدونها يضع auto-placement البطاقة الداخلة صفًّا جديدًا أسفل القائمة
   طوال مدة الترانزيشن فيقفز القسم لأعلى وأسفل */
.hm-split--challenges > .hm-challenge {
    grid-area: 1 / 2;
    min-width: 0;
}

.hm-ch-counter {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.hm-steps-list li {
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.hm-challenge__body {
    padding: 31px 32px 16px;
    display: flex;
    flex-direction: column;
}

/* الزر يلتصق بأسفل البطاقة مهما قصُر نص التحدي */
.hm-challenge__body .hm-btn {
    margin-top: auto;
}

/* ------------------------------------------------- الرسوم التوضيحية ---- */

.hm-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 48px;
    background: #f6f7ff;
    border-inline-start: 1px solid #eaecff;
}

.hm-art__caption {
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
}

/* بعض حالات الفريم تكتب الكابشن بلون أدكن (فرز/جودة) */
.hm-art__caption--dark {
    color: #515151;
}

.hm-art__pill {
    padding: 9px 20px;
    border-radius: 999px;
    background: #101828;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
}

/* شبكات الفرز — خلايا الفريم: 30×30، حواف 7، فجوة 7، تُرسم LTR كلوحة فيجما */
.hm-art__grid {
    display: grid;
    grid-template-columns: repeat(8, 30px);
    gap: 7px;
    direction: ltr;
}

.hm-art__grid i {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    animation: hm-cell 3.2s ease-in-out infinite;
}

@keyframes hm-cell {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.hm-art__gauge {
    width: 100%;
    max-width: 230px;
    height: auto;
}

/* صفوف النواقص — الفريم: صفوف متساوية 230، هيكل 9px وعلامة ✕ يمين كل صف (LTR) */
.hm-art__rows {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: 100%;
    max-width: 230px;
    direction: ltr;
}

.hm-art__row {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: hm-cell 2.8s ease-in-out infinite;
}

.hm-art__skel {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: #e9eaec;
}

.hm-art__row .hm-art__skel {
    flex: 1 1 auto;
}

.hm-art__x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 11px;
}

/* ملف جهة مرفوض — بطاقة الفريم: 220×149، حواف 16، أسطر 8px وكبسولة بعرض البطاقة */
.hm-art__file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    max-width: 220px;
    padding: 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(13, 15, 82, 0.08);
    /* يُرسم باتجاه لوحة فيجما */
    direction: ltr;
}

.hm-art__file .hm-art__skel {
    height: 8px;
}

.hm-art__reject {
    width: 100%;
    margin-top: 16px;
    padding: 7px 14px;
    border-radius: 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* مؤشّر «اتساق منخفض» */
.hm-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 28px 24px;
    background: var(--hm-tint);
    border-bottom: 1px solid var(--hm-line);
}

.hm-gauge svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.hm-gauge__pct {
    margin-top: -58px;
    color: #e11d63;
    font-size: 22px;
    font-weight: 700;
}

.hm-gauge__label {
    margin-top: 30px;
    color: var(--hm-muted);
    font-size: 14px;
}

.hm-gauge__pill {
    margin-top: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #0d0f52;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* شارة «تحدّ N · المشكلة الحقيقية» — فريم التحديات المحدَّث (468:20164) */
.hm-challenge__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #939393;
    font-size: 11px;
}

.hm-challenge__meta i {
    color: #d1d5db;
    font-style: normal;
}

.hm-challenge__tag {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fce7f3;
    color: #be185d;
    font-size: 11px;
    font-weight: 600;
}

.hm-challenge__q {
    margin: 16px 0 14px;
    color: #0d1117;
    font-size: 24.8px;
    font-weight: 700;
    line-height: 34px;
}

.hm-challenge__quote {
    margin: 0 0 18px;
    color: var(--hm-body);
    font-size: 13px;
    line-height: 23px;
}

/* «الحل بأداة …» — لون الفريم سماوي #0ea5e9 بخط 12 */
.hm-challenge__solve {
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    color: #0ea5e9;
    font-size: 12px;
    font-weight: 600;
}

/* «معرفة المزيد» داخل نص الحل (الحالة المقاصدية) */
.hm-challenge__more {
    color: var(--hm-accent);
    font-weight: 600;
}

.hm-steps-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 12px;
    list-style: none;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: var(--hm-radius);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.06);
}

.hm-steps-list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 12px;
    border-radius: var(--hm-radius);
    /* القائمة داخل قسم داكن لكن خلفيتها بيضاء — يجب تثبيت لون النص */
    color: var(--hm-body);
    font-size: 14px;
    font-weight: 500;
}

.hm-steps-list li.is-active {
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
    color: #fff;
}

/* شريط أسفل العنصر النشط = مسار خافت + تعبئة بيضاء تمتلئ خلال دورة التبديل
   (7 ثوانٍ) — كشريط الخطوات؛ يتجمّد مع الإيقاف عبر صنف is-paused */
.hm-steps-list li.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background:
        #fff no-repeat right / 0% 100%,
        rgba(255, 255, 255, 0.25);
    animation: hm-countdown 5s linear both;
}

@keyframes hm-countdown {
    from { background-size: 0% 100%, auto; }
    to { background-size: 100% 100%, auto; }
}

.is-paused .hm-steps-list li.is-active::after {
    animation-play-state: paused;
}

.hm-steps-list__n {
    margin-inline-start: auto;
    color: var(--hm-body);
    font-size: 12px;
}

.hm-steps-list li.is-active .hm-steps-list__n {
    color: rgba(255, 255, 255, 0.85);
}

.hm-steps-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: #e0e2ff;
    color: var(--hm-accent);
    flex: none;
}

.hm-steps-list li.is-active .hm-steps-list__icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* عدّاد «التحدي N من 5» — كبسولة بيضاء والرقم وردي */
.hm-ch-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
    color: #4a5565;
    font-size: 12px;
}

/* رقم العدّاد أزرق في الفريم (تجاوز حرفي داخل النص) */
.hm-ch-chip__n {
    color: var(--hm-accent);
    font-weight: 400;
}

/* -------------------------------------------------------- ثلاث خطوات --- */

.hm-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: var(--hm-radius);
    background: #fff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
    margin-bottom: 16px;
}

.hm-step.is-active {
    position: relative;
    background: #eef2ff;
    border-color: rgba(67, 97, 238, 0.22);
    box-shadow: 0 4px 24px rgba(67, 97, 238, 0.1);
    /* مساحة لشريط التقدم أسفل الخطوة النشطة */
    padding-bottom: 40px;
}

/* شريط تقدم الخطوة النشطة — عدّاد تنازلي يمتلئ خلال دورة الخطوات (4 ثوانٍ)
   ثم تنتقل الجولة للخطوة التالية؛ يتجمّد مع المرور فوق العمود */
.hm-step.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 24px;
    bottom: 20px;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep)) no-repeat right / 0% 100%,
        rgba(67, 97, 238, 0.12);
    animation: hm-progress 4s linear both;
}

@keyframes hm-progress {
    from { background-size: 0% 100%, auto; }
    to { background-size: 100% 100%, auto; }
}

.is-paused .hm-step.is-active::after {
    animation-play-state: paused;
}

.hm-step {
    cursor: pointer;
}

/* رفعات خفيفة تُحيي البطاقات عند المرور */
.hm-stat,
.hm-step,
.hm-plan,
.hm-sample {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hm-stat:hover,
.hm-plan:hover,
.hm-sample:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(67, 97, 238, 0.12);
}

.hm-steps-list li:not(.is-active):hover {
    background: #f7f8ff;
}

.hm-challenge__solve {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hm-step__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--hm-accent);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px;
    font-weight: 900;
}

.hm-step.is-active .hm-step__n {
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    box-shadow: 0 4px 14px rgba(67, 97, 238, 0.35);
    color: #fff;
}

.hm-step h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--hm-ink);
}

.hm-step p {
    margin: 0;
    color: #191919;
    font-size: 14px;
    line-height: 23px;
}

/* زر «ابدأ رحلتك مجاناً» — الفريم: 56px بفاصل 8 إضافي عن البطاقات */
.hm-steps__cta {
    min-height: 56px;
    margin-top: 8px;
}

.hm-mock {
    background: var(--hm-tint);
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius-lg);
    padding: 32px;
}

.hm-mock__card {
    background: #fff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius-lg);
    box-shadow: 0 20px 60px rgba(67, 97, 238, 0.18);
    overflow: hidden;
}

.hm-mock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--hm-tint);
    border-bottom: 1px solid rgba(67, 97, 238, 0.1);
    color: var(--hm-ink);
    font-size: 14px;
    font-weight: 700;
}

/* «مباشر» — الفريم: النقطة خضراء #27c840 والنص أزرق */
.hm-mock__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hm-accent);
    font-size: 12px;
    font-weight: 700;
}

.hm-mock__live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c840;
}

/* أجسام المعاينة الثلاثة تتراكب في خلية واحدة — التبديل تلاشٍ في المكان */
.hm-mock__body {
    display: grid;
}

.hm-mock__pane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    min-height: 370px;
}

.hm-mock__pane .hm-mock__rows,
.hm-mock__pane .hm-mock__stats {
    padding-inline: 0;
}

/* معاينة «أنشئ حسابك»: حقول هيكلية */
.hm-mock__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-mock__field span {
    color: var(--hm-muted);
    font-size: 12px;
}

.hm-mock__field i {
    display: block;
    height: 36px;
    border-radius: 12px;
    background: #f4f5fb;
    border: 1px solid #e6e8f2;
}

.hm-mock__done {
    align-self: center;
    margin-top: auto;
    padding: 9px 18px;
    border-radius: 999px;
    background: #e8f9ef;
    color: #12b76a;
    font-size: 13px;
    font-weight: 700;
}

.hm-mock__done--tint {
    background: #eef2ff;
    color: var(--hm-accent);
}

/* معاينة «حدد معاييرك»: معايير بأوزان */
.hm-mock__crit {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--hm-ink);
    font-size: 13px;
}

.hm-mock__crit span {
    flex: none;
    width: 45%;
}

.hm-mock__crit i {
    flex: 1;
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #eef0f7;
    overflow: hidden;
}

.hm-mock__crit b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
}

.hm-mock__crit em {
    flex: none;
    color: var(--hm-accent);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.hm-mock__ai {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--hm-accent);
    font-size: 10px;
    font-weight: 700;
}

.hm-mock__rows {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* صف مشروع — الفريم: #f5f6ff بإطار خافت وحواف 20 */
.hm-mock__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 20px;
    background: #f5f6ff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    color: #2b2e8c;
    font-size: 12px;
}

.hm-mock__row b {
    margin-inline-start: auto;
    color: var(--hm-accent);
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
}

/* درجات الفريم الداكنة (77/62) */
.hm-mock__row b.is-dim {
    color: #191919;
}

.hm-mock__chip {
    padding: 2px 6px;
    border-radius: 14px;
    background: #eef2ff;
    color: var(--hm-accent);
    font-size: 10px;
}

.hm-mock__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
    padding: 0 20px 20px;
}

/* بلاطات الإحصاء — الفريم: #f4f5ff بلا إطار وحواف 20 */
.hm-mock__stat {
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    background: #f4f5ff;
}

.hm-mock__stat b {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: var(--hm-accent);
}

.hm-mock__stat b.is-num {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

.hm-mock__stat span {
    font-size: 10px;
    color: #191919;
}

/* -------------------------------------------------------------- أدوات -- */

.hm-tool {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius-lg);
    overflow: hidden;
}

.hm-tool__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border-bottom: 1px solid var(--hm-line);
}

.hm-tool__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--hm-tint);
    font-size: 20px;
}

.hm-tool__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}

.hm-tool__chip {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hm-tint);
    color: var(--hm-accent);
    font-size: 12px;
    font-weight: 500;
}

.hm-tool__sub {
    margin: 6px 0 0;
    color: var(--hm-accent);
    font-size: 14px;
}

.hm-tool__list {
    flex: 1 1 auto;
    margin: 0;
    padding: 22px;
    list-style: none;
    background: var(--hm-tint);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-tool__list li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hm-ink);
}

.hm-tool__list li::before {
    content: '✔';
    color: var(--hm-accent);
    flex: none;
}

.hm-tool__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
}

.hm-tool__more {
    color: var(--hm-body);
    font-size: 14px;
    text-decoration: none;
}

.hm-tool__try {
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--hm-tint);
    color: var(--hm-accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* بطاقات «قريبًا» المموّهة */
.hm-soon {
    position: relative;
    border-radius: var(--hm-radius-lg);
    overflow: hidden;
    background: var(--hm-tint);
    min-height: 290px;
}

/* هيكل مموّه يحاكي بطاقة تقرير — كما تظهر بطاقات «قريباً» في فيجما */
.hm-soon__blur {
    position: absolute;
    inset: 0;
    padding: 22px;
    filter: blur(5px);
    opacity: 0.6;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
}

.hm-soon__blur::before,
.hm-soon__blur::after {
    content: '';
    display: block;
    height: 100%;
    border-radius: 12px;
    background:
        linear-gradient(var(--hm-tint), var(--hm-tint)) top/100% 18px no-repeat,
        repeating-linear-gradient(180deg, transparent 0 30px, var(--hm-tint) 30px 40px);
}

.hm-soon__pill {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-inline: auto;
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--hm-accent-soft);
    color: var(--hm-ink);
    font-size: 16px;
    font-weight: 700;
    box-shadow: var(--hm-shadow);
}

.hm-soon__pill b {
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--hm-tint);
    color: var(--hm-accent);
    font-size: 13px;
}

/* ------------------------------------------------------------ الآراء --- */

/* علامتا الاقتباس العملاقتان — الفريم: 183px أبيض بشفافية 25% */
.hm-clients {
    position: relative;
    overflow: hidden;
}

.hm-clients__mark {
    position: absolute;
    z-index: 0;
    color: rgba(255, 255, 255, 0.25);
    font-size: 183px;
    line-height: 1;
    pointer-events: none;
}

.hm-clients__mark--top {
    top: 16px;
    inset-inline-start: 16px;
}

.hm-clients__mark--bottom {
    bottom: -36px;
    inset-inline-end: 10px;
}

.hm-clients .hm-wrap {
    position: relative;
    z-index: 1;
}

.hm-clients .hm-head {
    margin-bottom: 32px;
}

/* شعارات الفريم: الخاملة 64 مموّهة قليلاً، والنشطة 157 بإطار أزرق وتوهج بنفسجي */
.hm-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-bottom: 72px;
}

.hm-logos span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    padding: 9px;
    filter: blur(1.5px);
    overflow: hidden;
    transition: filter 0.15s ease;
}

.hm-logos span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hm-logos span.is-active {
    width: 157px;
    height: 157px;
    padding: 20px;
    border: 3px solid var(--hm-accent);
    filter: none;
    box-shadow: 0 0 30px #9560f9;
}

.hm-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--hm-accent);
    padding: 6px;
    overflow: hidden;
}

.hm-quote__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hm-quote {
    max-width: 820px;
    margin-inline: auto;
    background: #fff;
    border-radius: var(--hm-radius);
    padding: 28px 32px;
    color: var(--hm-ink);
}

/* خط فاصل خافت أسفل الاقتباس تعلوه علامة اقتباس داكنة كبيرة (الفريم:
   فاصل #f3f4f6 ثم “ بخط Greta 96px بلون #191919 في يسار البطاقة) */
.hm-quote__mark {
    display: block;
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    color: #191919;
    font-size: 96px;
    line-height: 0.6;
    text-align: left;
    pointer-events: none;
    user-select: none;
}

.hm-quote__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
}

.hm-quote__who {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #191919;
    font-size: 20px;
    font-weight: 600;
}

.hm-quote__rate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e1b400;
    font-size: 18px;
}

.hm-quote__rate b {
    color: var(--hm-body);
    font-size: 20px;
    font-weight: 400;
}

.hm-quote p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 34px;
    color: #0d1117;
}

.hm-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.hm-dots i {
    display: block;
    width: 24px;
    height: 9px;
    border-radius: 8px;
    background: #d9d9d9;
}

.hm-dots i.is-active {
    width: 67px;
    background: #cbcbff;
}

/* ---------------------------------------------------------- الاشتراك --- */

/* بطاقة الاشتراك — مصبوغة بإطار متدرج، والمحتوى في لوح أبيض داخلي */
.hm-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--hm-tint), var(--hm-tint)) padding-box,
        linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep)) border-box;
    border-radius: var(--hm-radius-lg);
    box-shadow: 0 4px 22px rgba(67, 97, 238, 0.16);
    padding: 16px 20px;
    /* لا overflow:hidden — شارة «موصى بها» تبرز فوق حافة البطاقة */
}

/* رأس بطاقة الاشتراك: النص والشعار معاً في المنتصف — الفريم: 16px وحاشية 16/20 */
.hm-plan__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    color: var(--hm-ink);
    font-size: 16px;
    font-weight: 700;
}

.hm-plan__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius-lg);
    padding: 20px;
}

.hm-plan__chip {
    display: inline-flex;
    padding: 6px 16px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--hm-ink);
    font-size: 14px;
    font-weight: 500;
}

.hm-plan__text {
    margin: 0;
    color: #2b2e8c;
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}

.hm-plan__note {
    margin: 12px 0 0;
    color: var(--hm-accent);
    font-size: 15px;
    font-weight: 700;
}

.hm-plans__foot {
    text-align: center;
    margin-top: 36px;
}

.hm-plans__more {
    display: inline-block;
    color: var(--hm-accent);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.hm-plans__more:hover {
    color: var(--hm-accent-deep);
    transform: translateY(-2px);
}

/* شارة «موصى بها» — كالفريم: تاب متدرج على الزاوية العليا-اليمنى للبطاقة،
   دائرية أسفل-يسار 24 وأعلى-يمين تطابق تدوير البطاقة، والشرارة في طرفها الأيمن */
.hm-plan__flag {
    position: absolute;
    top: -1px;
    inset-inline-start: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-start-start-radius: var(--hm-radius-lg);
    border-end-end-radius: var(--hm-radius-lg);
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.hm-plan__flag svg {
    flex: none;
}

.hm-plan__head img {
    height: 24px;
    vertical-align: middle;
}

.hm-plan__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-plan__list li {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.7;
}

.hm-plan__list li::before {
    content: '✔';
    color: var(--hm-accent);
    flex: none;
}

.hm-plan__foot {
    padding: 16px 0 4px;
}

/* الزران على سطر واحد في البطاقتين مهما اختلف طول النص */
.hm-plan__body .hm-btn {
    margin-top: auto;
}

/* ------------------------------------------------------------ التواصل -- */

.hm-contact {
    /* الفريم: النموذج في اليسار وبطاقة البيانات في اليمين — نقلب بالـorder
       بدل تحريك 45 سطر بلايد (العمود الأول في RTL هو الأيمن) */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: start;
}

.hm-contact .hm-form {
    order: 2;
}

.hm-form {
    background: #fff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
    padding: 24px;
}

.hm-form h3 {
    margin: 0 0 24px;
    color: #161515;
    font-size: 20px;
    font-weight: 500;
}

/* زر «إرسال» — الفريم: 56px */
.hm-form .hm-btn--block {
    min-height: 56px;
}

/* علم الجوال داخل الحقل (الفريم): سهم + علم + فاصل يسار الحقل و«05» بعده */
.hm-phone {
    position: relative;
}

.hm-phone__flags {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    padding-right: 16px;
    border-right: 1px solid var(--hm-line);
    color: var(--hm-ink);
    pointer-events: none;
    /* تركيبة LTR كالفريم: السهم ثم العلم يساراً → يميناً */
    direction: ltr;
}

.hm-field .hm-phone input {
    padding-left: 96px;
}

.hm-field .hm-phone input::placeholder {
    text-align: left;
}

.hm-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.hm-field__label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline-start: 16px;
    font-size: 14px;
    font-weight: 500;
}

.hm-field__label i {
    color: var(--hm-required);
    font-style: normal;
}

.hm-field input,
.hm-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--hm-line);
    border-radius: var(--hm-radius);
    background: #fff;
    color: var(--hm-ink);
    font: inherit;
    font-size: 14px;
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hm-field textarea {
    min-height: 80px;
    resize: vertical;
}

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

/* البريد LTR: القيمة تُكتب يساراً لكن الـplaceholder يحاذي اليمين كالفريم.
   (الجوال مستثنى — «05» في الفريم يجاور فاصل العلم يساراً) */
.hm-field input[type='email']::placeholder {
    text-align: right;
}

.hm-field input:focus,
.hm-field textarea:focus {
    border-color: var(--hm-accent-soft);
    box-shadow: 0 0 0 3px rgba(51, 51, 255, 0.12);
}

.hm-field.is-invalid input,
.hm-field.is-invalid textarea {
    border-color: var(--hm-danger);
}

.hm-field__error {
    margin: 0;
    padding-inline-start: 16px;
    color: var(--hm-danger);
    font-size: 12px;
    font-weight: 500;
}

.hm-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hm-info {
    background: #fff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-info__item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* رقاقة أيقونة بيانات التواصل — كالفريم: مربع فاتح 50 والأيقونة بنفسجية داكنة */
.hm-info__icon {
    flex: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    background: #eef2ff !important;
    color: #2b0081 !important;
}

.hm-info__icon svg,
.hm-info__icon svg path {
    width: 24px !important;
    height: 24px !important;
    fill: #2b0081 !important;
    color: #2b0081 !important;
    display: block !important;
}

.hm-info__text {
    display: flex !important;
    flex-direction: column !important;
    text-align: right !important;
    align-items: flex-start !important;
}

/* الفريم يعكس التوكيد: التسمية رمادية عادية والقيمة داكنة شبه عريضة */
.hm-info__text b {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #404040 !important;
    text-align: right !important;
}

.hm-info__sub {
    display: block !important;
    margin-top: 2px !important;
    color: #161515 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    direction: ltr !important;
    text-align: right !important;
}

.hm-info__sub--rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* --------------------------------------------------------------- FAQ --- */

.hm-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* بطاقة السؤال — الفريم: حواف 16 وإطار #f3f3f5 وظل 0 0 16 بشفافية 5% */
.hm-faq details {
    background: #fff;
    border: 1px solid #f3f3f5;
    border-radius: var(--hm-radius);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* السؤال المغلق: 20px عادي #121212 وارتفاع 70 */
.hm-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 8px 24px;
    color: #121212;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}

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

/* سهم لأسفل (مغلق) / لأعلى (مفتوح) — حدود فيزيائية كي لا يقلبه RTL جانبياً */
.hm-faq summary::after {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: -5px;
    border-left: 2px solid #515151;
    border-bottom: 2px solid #515151;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
}

/* السؤال المفتوح: تدرّج القسم الداكن نفسه والعنوان أبيض عريض */
.hm-faq details[open] {
    background: var(--hm-dark);
    color: #fff;
}

.hm-faq details[open] summary {
    color: #fff;
    font-weight: 700;
    padding-top: 16px;
    min-height: 0;
}

.hm-faq details[open] summary::after {
    border-color: #fff;
    transform: rotate(135deg);
}

.hm-faq__body {
    padding: 0 24px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 29px;
    color: #fff;
}

/* ------------------------------------------------------------ الفوتر --- */

/* الفوتر — فريم محدَّث: #0d0035 وهالتان بنفسجيتان مموّهتان */
.hm-footer {
    position: relative;
    overflow: hidden;
    background: #0d0035;
    color: #fff;
    padding-block: 80px 48px;
}

.hm-footer::before,
.hm-footer::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    filter: blur(108px);
    pointer-events: none;
}

.hm-footer::before {
    width: 620px;
    height: 580px;
    top: -320px;
    inset-inline-start: 10%;
    background: rgba(148, 94, 247, 0.35);
}

.hm-footer::after {
    width: 380px;
    height: 390px;
    bottom: -240px;
    inset-inline-end: 8%;
    background: rgba(184, 56, 239, 0.32);
}

.hm-footer > * {
    position: relative;
}

.hm-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
}

.hm-footer__brand img {
    display: block;
    width: 222px;
    margin-bottom: 32px;
}

.hm-footer__brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 25px;
    max-width: 193px;
}

.hm-footer h4 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 700;
}

.hm-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hm-footer a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    text-decoration: none;
}

.hm-footer a:hover {
    color: #fff;
}

.hm-footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* دائرة بيضاء 32 بإطار أزرق خافت والأيقونة خطية متدرجة (الفريم) */
.hm-footer__social i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 0.8px solid rgba(0, 122, 255, 0.19);
    font-style: normal;
}

/* ==========================================================================
   الحركة
   البطاقات العائمة في الهيرو تطفو، والآراء كاروسيل حقيقي، والأقسام تظهر
   عند التمرير. كل شيء يتوقّف عند تفعيل «تقليل الحركة» في النظام.
   ========================================================================== */

@keyframes hm-float {
    0%, 100% { transform: translateY(0) rotate(var(--hm-tilt, 0deg)); }
    50%      { transform: translateY(-14px) rotate(calc(var(--hm-tilt, 0deg) * 0.4)); }
}

@keyframes hm-bar {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(var(--hm-bar-peak, 1.35)); }
}

@keyframes hm-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* البطاقات العائمة — كل واحدة بميلها وإيقاعها */
.hm-float {
    animation: hm-float 7s ease-in-out infinite;
    will-change: transform;
}

.hm-float--savings {
    --hm-tilt: -6deg;
    animation-duration: 7.5s;
}

.hm-float--speed {
    --hm-tilt: 4deg;
    animation-duration: 8.5s;
    animation-delay: -2s;
}

.hm-float--chart {
    --hm-tilt: 3deg;
    animation-duration: 6.5s;
    animation-delay: -1s;
}

/* أعمدة المخطط تنبض (التعبئة الزرقاء داخل المسار) */
.hm-spark b {
    transform-origin: bottom;
    animation: hm-bar 2.6s ease-in-out infinite;
}

/* ظهور الأقسام عند التمرير */
.hm-reveal {
    opacity: 0;
    transform: translateY(24px);
}

.hm-reveal.is-in {
    animation: hm-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --------------------------------------------------- كاروسيل الآراء ---- */

.hm-logos span {
    cursor: pointer;
}

.hm-quote {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.hm-quote.is-swapping {
    opacity: 0;
    transform: translateY(10px);
}

.hm-dots i {
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

/* -------------------------------------------------- overlay «جرّب الآن» - */

.hm-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 0, 53, 0.6);
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.hm-overlay__box {
    width: 100%;
    max-width: 861px;
    margin: auto;
    background: #fff;
    border: 1px solid rgba(67, 97, 238, 0.22);
    border-radius: var(--hm-radius-lg);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
    overflow: hidden;
}

.hm-overlay__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(67, 97, 238, 0.1);
    font-size: 16px;
    font-weight: 700;
}

/* الفريم: أيقونة دائرة-إكس رمادية 24px مجرّدة، بلا صندوق ولا إطار */
.hm-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #939393;
    cursor: pointer;
}

.hm-overlay__body {
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* بوب أب التقرير المباشر (صفحات الأدوات): صندوق أعرض وإطار يملأ الجسم */
.hm-overlay__box:has(.hm-overlay__body--report) {
    max-width: 1080px;
}

.hm-overlay__body--report {
    padding: 0;
}

.hm-overlay__frame {
    display: block;
    width: 100%;
    height: min(80vh, 860px);
    border: 0;
    background: #fdfcff;
}

/* قسم العيّنات: شريط مصبوغ وبطاقات بيضاء — فريم 175:10435 */
.hm-overlay__section--samples {
    padding: 20px;
    background: var(--hm-tint);
}

.hm-overlay__section > h4 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hm-ink);
}

/* عنوان «أو قم بالتجربة بنفسك على ملفاتك» بين خطّين رفيعين */
.hm-overlay__section--upload {
    padding: 0 24px;
}

.hm-overlay__section--upload > h4 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--hm-body);
    font-weight: 400;
    text-align: center;
}

.hm-overlay__section--upload > h4::before,
.hm-overlay__section--upload > h4::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #cac7c7;
}

.hm-samples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hm-sample {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
    border-radius: var(--hm-radius);
    background: #fff;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    box-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
}

.hm-sample b {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
}

.hm-sample__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: #f4f5ff;
    color: #2b0081;
}

/* رمز الريال السعودي الرسمي بحجم النص */
.hm-riyal {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.08em;
}

.hm-sample span {
    color: var(--hm-body);
    font-size: 14px;
}

/* زر «جرب الآن» في بطاقة العيّنة — الفريم: 40px بحاشية 8/32 وظل أزرق */
.hm-sample a {
    margin-top: 16px;
    align-self: flex-start;
    /* فريم 175: زر مضغوط */
    min-height: 36px;
    padding: 6px 24px;
    font-size: 14px;
    box-shadow: var(--hm-shadow-btn);
}

.hm-locked {
    padding: 24px 12px;
    border: 1px dashed var(--hm-accent);
    border-radius: var(--hm-radius);
    /* نقش النقاط الخفيف من خلفية الفريم */
    background:
        radial-gradient(rgba(45, 14, 139, 0.07) 1px, transparent 1.5px) 0 0 / 26px 26px,
        #fbfbff;
    text-align: center;
}

/* صندوق أيقونة القفل — 60px أبيض بإطار بنفسجي فاتح.
   محدد مركّب ليتغلب على «.hm-locked span» (display:block) الأعلى تخصيصاً */
.hm-locked .hm-locked__icon {
    stroke-width: 2.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-inline: auto;
    margin-bottom: 12px;
    border: 1px solid #cdcdff;
    border-radius: 12px;
    background: #fff;
    color: #2b0081;
    font-size: 24px;
}

.hm-locked p {
    margin: 0 0 12px;
    color: var(--hm-accent);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.hm-locked span {
    display: block;
    margin-bottom: 24px;
    color: var(--hm-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .hm-float,
    .hm-spark b,
    .hm-art__grid i,
    .hm-art__row,
    .hm-step.is-active::after,
    .hm-steps-list li.is-active::after {
        animation: none;
    }

    /* بلا حركة: الشريطان يظهران بحالتهما النهائية الثابتة */
    .hm-steps-list li.is-active::after,
    .hm-step.is-active::after {
        background-size: 33% 100%, auto;
    }

    .hm-stat:hover,
    .hm-plan:hover,
    .hm-sample:hover {
        transform: none;
    }

    .hm-reveal,
    .hm-reveal.is-in {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hm-quote,
    .hm-dots i {
        transition: none;
    }
}

/* --------------------------------------------------------------- تجاوب - */

@media (max-width: 1100px) {
    .hm-h1 { font-size: 42px; }
    .hm-h2 { font-size: 32px; }
    .hm-float { display: none; }
    .hm-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hm-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .hm-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .hm-section { padding-block: 64px; }
    .hm-nav__links { display: none; }
    .hm-nav__toggle { display: inline-flex; }
    .hm-nav__links.is-open {
        display: flex;
        position: absolute;
        inset-inline: 16px;
        top: 68px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--hm-line);
        border-radius: 16px;
        box-shadow: var(--hm-shadow);
    }
    .hm-nav__links.is-open a { display: block; padding: 10px 12px; }
    .hm-split,
    .hm-contact,
    .hm-grid--2,
    .hm-row2 { grid-template-columns: 1fr; }
    /* عمود واحد: البطاقات تتراكب في الصف الثاني تحت القائمة */
    .hm-split--challenges > .hm-challenge { grid-area: 2 / 1; }
    .hm-split--challenges { gap: 12px; }

    /* شريط اختيار التحديات — فريم الجوال (271:29203، Frame 427321505):
       الرقاقات الخاملة مربعات 36 بتعبئة #e0e2ff، والنشط كبسولة متدرجة 40
       (نص 10px/20 + الأيقونة في صندوق أبيض 20% 26×26 في طرفها الأيسر) */
    .hm-ch-counter { display: none; }
    .hm-steps-list {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 0;
        margin-bottom: 12px;
        background: transparent;
        border: none;
        box-shadow: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hm-steps-list::-webkit-scrollbar { display: none; }
    .hm-steps-list li {
        min-height: 38px;
        border-radius: 10px;
    }
    .hm-steps-list li .hm-steps-list__n { display: none; }
    .hm-steps-list li:not(.is-active) {
        width: 40px;
        height: 40px;
        padding: 0;
        flex: 0 0 40px;
        justify-content: center;
        background: transparent;
        font-size: 0;
    }
    .hm-steps-list li:not(.is-active) .hm-steps-list__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #e0e2ff;
        color: var(--hm-accent);
    }
    .hm-steps-list li:not(.is-active) .hm-steps-list__icon svg {
        width: 18px;
        height: 18px;
    }
    .hm-steps-list li.is-active {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
        padding: 6px 10px;
        font-size: 10px;
        font-weight: 600;
        line-height: 18px;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    }
    /* الأيقونة عنصر الفليكس الأخير = أقصى يسار الكبسولة (النص عنصر مجهول order:0) */
    .hm-steps-list li.is-active .hm-steps-list__icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }
    .hm-steps-list li.is-active .hm-steps-list__icon svg {
        width: 15px;
        height: 15px;
    }
    /* بطاقة التحدي كفريم الموبايل: النص يمين والرسم يسار (½/½) بأحجام مقروءة */
    .hm-challenge { grid-template-columns: 1fr 1fr; }
    .hm-challenge__body { padding: 12px 10px 10px; }
    .hm-challenge__q { font-size: 13px; line-height: 1.5; margin: 6px 0 4px; }
    .hm-challenge__quote { font-size: 9.5px; line-height: 1.65; margin-bottom: 8px; }
    .hm-challenge__solve { font-size: 10px; padding-top: 8px; gap: 3px; }
    .hm-challenge__solve svg { width: 11px; height: 11px; }
    .hm-challenge__meta { font-size: 9px; gap: 4px; }
    .hm-challenge__meta .hm-challenge__tag { font-size: 9px; padding: 2px 6px; }
    .hm-challenge__body .hm-btn { min-height: 32px; padding: 5px 8px; font-size: 11px; border-radius: 10px; }
    .hm-challenge > * { min-width: 0; }
    .hm-art { padding: 10px 8px; gap: 6px; overflow: hidden; }
    .hm-art__caption { font-size: 8px; }
    .hm-art__pill { font-size: 8px; padding: 5px 10px; }
    /* خلايا فريم الموبايل: 12px بزوايا 3 وفجوة 3 */
    .hm-art__grid { grid-template-columns: repeat(8, 12px); gap: 3px; }
    .hm-art__grid i { width: 12px; height: 12px; border-radius: 3px; }
    .hm-art__gauge { max-width: 120px; }
    .hm-art__rows, .hm-art__file { max-width: 130px; }

    /* عدّاد الدورة يبقى ظاهراً على الكبسولة (السلوك محفوظ عمداً) */
    .hm-steps-list li.is-active::after {
        inset-inline: 8px;
        bottom: 2px;
        height: 2px;
    }

    /* كاروسيل آراء العملاء للجوال — فريم الجوال: الشعار النشط مكبَّر داخل
       حلقة متوهجة، والنقاط رمادية #d9d9d9 والنشطة شريط عريض #cbcbff */
    .hm-logos {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: center;
        gap: 13px;
        margin-bottom: 28px;
        padding: 12px 0;
        -webkit-overflow-scrolling: touch;
    }
    .hm-logos::-webkit-scrollbar { display: none; }
    .hm-logos span {
        width: 44px;
        height: 44px;
        padding: 6px;
        flex: 0 0 44px;
        filter: blur(0.8px);
    }
    .hm-logos span.is-active {
        width: 84px;
        height: 84px;
        padding: 10px;
        flex: 0 0 84px;
        border-width: 2px;
        filter: none;
        box-shadow: 0 0 20px #9560f9;
    }
    .hm-quote {
        padding: 20px 16px;
    }
    .hm-quote p {
        font-size: 15px;
        line-height: 28px;
    }
    .hm-quote__who {
        font-size: 13px;
    }
    .hm-quote__avatar {
        width: 36px;
        height: 36px;
        flex: none;
    }
    .hm-quote__mark {
        margin-top: 20px;
        padding-top: 8px;
        font-size: 64px;
    }
    .hm-clients__mark {
        font-size: 50px;
    }
    .hm-clients__mark--bottom {
        bottom: 96px;
    }
    .hm-dots i {
        width: 22px;
        height: 6px;
        border-radius: 4px;
        background: #d9d9d9;
    }
    .hm-dots i.is-active {
        width: 55px;
        background: #cbcbff;
    }
}

/* قِيَم فريم الجوال «iPhone 13 & 14 - 3» (271:29203، 390×8033) حرفياً */
@media (max-width: 620px) {
    .hm-wrap { padding-inline: 16px; }
    .hm [id] { scroll-margin-top: 72px; }

    /* الترويسة — الفريم: 60px بيضاء 70% بضباب وظل 0,4/18، همبرغر مجرد يسار
       والشعار 124 يمين، بلا زر */
    .hm-nav {
        height: 60px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(9px);
        border-bottom: 0;
        box-shadow: 0 4px 18px rgba(77, 77, 77, 0.15);
    }
    .hm-nav__inner { height: 60px; }
    .hm-nav__logo img { width: 124px; }
    .hm-nav__cta { display: none; }
    .hm-nav__toggle {
        width: auto;
        height: auto;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: #181818;
    }
    .hm-nav__toggle svg { width: 24px; height: 20px; }
    .hm-nav__links.is-open { top: 56px; }

    /* الهيرو — الفريم: حاشية 16، فجوة 24، بادج 10px، عنوان 24/50، فقرة 14/26،
       زران 284×48 متراصّان، والهالات: بنفسجية أعلى-يمين اللوحة وكهرمانية أعلى-يسارها
       وزرقاء عند الحافة (اتجاه اللوحة LTR → معكوس هنا بالمنطق الفيزيائي نفسه) */
    /* حاشية سفلية تفسح لبطاقة «دراسة المشاريع» تحت الزرين (الفريم يضعها
       أسفل يسار الهيرو خارج كتلة المحتوى) */
    .hm-hero {
        padding-block: 16px 96px;
        background:
            radial-gradient(52% 34% at 6% 4%, rgba(186, 190, 255, 0.5), transparent 70%),
            radial-gradient(48% 30% at 90% 0%, rgba(254, 200, 75, 0.26), transparent 70%),
            radial-gradient(46% 26% at 96% 88%, rgba(51, 51, 255, 0.12), transparent 70%),
            var(--hm-page);
    }
    .hm-hero__inner { gap: 24px; }
    .hm-hero__badge {
        gap: 4px;
        font-size: 10px;
        line-height: 19px;
    }
    .hm-hero__badge b { font-size: 10px; }
    .hm-h1 { font-size: 24px; line-height: 50px; }
    .hm-lede, .hm-hero__lede { font-size: 14px; line-height: 26px; }
    /* قطع سطر الفريم المكتبي لا يصلح لعرض 358 — الفقرة تلتف طبيعياً كالفريم */
    .hm-hero__lede br { display: none; }
    .hm-hero__cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .hm-hero__cta .hm-btn {
        width: 100%;
        max-width: 284px;
        min-width: 0;
        min-height: 48px;
    }

    /* بطاقة «دراسة المشاريع» وحدها بمقاس الفريم 60% (147×62) أسفل يسار الهيرو */
    .hm-float--speed {
        display: flex;
        gap: 9.6px;
        padding: 4.8px 14.4px;
        border-radius: 9.6px;
        top: auto;
        bottom: 10px;
        inset-inline-start: auto;
        inset-inline-end: 26px;
    }
    .hm-float--speed .hm-float__icon {
        width: 32px;
        height: 32px;
        border-radius: 7.2px;
    }
    .hm-float--speed .hm-float__icon svg { width: 19px; height: 19px; }
    .hm-float--speed .hm-float__label,
    .hm-float--speed .hm-float__value { font-size: 10.8px; line-height: 17px; }

    /* إيقاع الأقسام — حواشي الفريم الرأسية: 32 عام، 24 للتحديات والأسئلة،
       40 للاشتراك والتواصل والآراء */
    .hm-section { padding-block: 32px; }
    #challenges, #faq { padding-block: 24px; }
    #plans, #contact, #clients { padding-block: 40px; }
    .hm-head { margin-bottom: 24px; }
    #challenges .hm-head { margin-bottom: 20px; }
    #faq .hm-head { margin-bottom: 28px; }
    #clients .hm-head { margin-bottom: 28px; }
    #plans .hm-head, #contact .hm-head { margin-bottom: 32px; }
    #how .hm-head { margin-bottom: 56px; }
    .hm-h2 { font-size: 24px; line-height: 1.6; }

    /* بادجا التحديات والأسئلة في فريم الجوال بإطار أزرق وحواف 16 */
    #challenges .hm-badge,
    #faq .hm-badge {
        border: 0.8px solid var(--hm-accent);
        border-radius: 16px;
        font-size: 10px;
        line-height: 19px;
    }
    #challenges .hm-badge { background: #f6f7ff; }
    #faq .hm-badge { background: rgba(186, 196, 255, 0.3); }

    /* بطاقة التحدي تبقى على تنسيق فريم الموبايل: عمودان ½/½ (قواعد بلوك 860) */

    /* لماذا المنح — الفريم: عمود واحد بفاصل 16 وترتيب معكوس (60–80% أولاً) */
    .hm-grid { gap: 16px; }
    .hm-grid--4, .hm-grid--3 { grid-template-columns: 1fr; }
    .hm-grid--4 > :nth-child(1) { order: 4; }
    .hm-grid--4 > :nth-child(2) { order: 3; }
    .hm-grid--4 > :nth-child(3) { order: 2; }
    .hm-grid--4 > :nth-child(4) { order: 1; }
    .hm-grid--2 { gap: 24px; }

    /* ثلاث خطوات — الفريم: بطاقات بحاشية 12 ونص 12/23 وشريط تقدّم داخل الحاشية */
    .hm-step { padding: 12px; }
    .hm-step p { font-size: 12px; }
    .hm-step.is-active { padding-bottom: 32px; }
    .hm-step.is-active::after {
        inset-inline: 12px;
        bottom: 12px;
    }
    /* المعاينة في الفريم = بطاقة سطح المكتب مصغّرة (343×270 ≈ ×0.56) */
    .hm-mock { zoom: 0.56; }

    .hm-btn { width: 100%; }

    /* الأسئلة — الفريم: صف 70px بحاشية 8/16 وحواف [7,0,7,0] وعلامة + */
    .hm-faq details { border-radius: 7px 0 7px 0; }
    .hm-faq summary {
        min-height: 70px;
        padding: 8px 16px;
        font-size: 16px;
        line-height: 30px;
    }
    .hm-faq summary::after {
        border: 0;
        width: auto;
        height: auto;
        margin-top: 0;
        content: '+';
        color: #121212;
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
        transform: none;
    }
    .hm-faq details[open] summary::after {
        content: '+';
        border: 0;
        color: #fff;
        transform: rotate(45deg);
    }
    .hm-faq__body { padding: 0 16px 16px; font-size: 14px; line-height: 24px; }

    /* الفوتر — الفريم: العلامة بعرض كامل، عمودا الروابط جنباً إلى جنب،
       والتواصل بعرض كامل، بحاشية رأسية 48 */
    .hm-footer { padding-block: 48px; }
    .hm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .hm-footer__brand { grid-column: 1 / -1; }
    .hm-footer__grid > div:last-child { grid-column: 1 / -1; }

    /* بوب أب الجوال — فريمات 310:*: حواشي جانبية 16 وفراغات 32/16 وسطر فاصل 12px */
    .hm-samples { grid-template-columns: 1fr; }
    .hm-overlay { padding: 12px; }
    .hm-overlay__head { padding: 20px 16px 16px; }
    .hm-overlay__body { padding: 0 0 24px; gap: 32px; }
    .hm-overlay__section--samples { padding: 20px 16px; }
    .hm-overlay__section--upload { padding: 0 16px; }
    .hm-overlay__section--upload > h4 { margin-bottom: 16px; font-size: 12px; }
    .hm-locked span { font-size: 14px; }
}

/* سطر فرعي تحت عنوان التحديات — فريم الموبايل فقط */
.hm-ch-sub {
    display: none;
    margin: 0;
    color: #d9d9d9;
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 860px) {
    .hm-ch-sub { display: block; }
}

/* ------------------------------------------- صفحة «طرق الاشتراك» (508:6859) */

.hm-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 24px 0 0;
    list-style: none;
    color: var(--hm-muted);
    font-size: 14px;
}

.hm-crumbs a {
    color: var(--hm-accent);
    text-decoration: none;
}

.hm-crumbs li + li::before {
    content: '‹';
    margin-inline-end: 8px;
    color: var(--hm-muted);
}

/* بادج بشعار — كبسولة #eef2ff بحشوة 12/32 */
.hm-badge--logo {
    padding: 12px 32px;
    background: #eef2ff;
}

.hm-badge--logo img {
    display: block;
    height: 26px;
}

.hm-subs__head {
    gap: 16px;
    margin-bottom: 40px;
}

/* فواصل الفريم: مميزات 24 · الداكن 48 */
.hm-subs__features .hm-subs__head { margin-bottom: 24px; }
.hm-subs__ai .hm-subs__head { margin-bottom: 48px; }

.hm-subs__head .hm-h2 em {
    display: inline;
}

.hm-subs__lede {
    margin: 0;
    max-width: 1100px;
    color: var(--hm-body);
    font-size: 16px;
    line-height: 30px;
}

.hm-subs__lede--light {
    color: #fff;
}

/* ① بطاقتا «تفعيل تلقائي / لوحة تحكم مخصصة» */
.hm-subs__lead {
    padding-block: 32px 64px;
}

.hm-subs__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.hm-subs__perk {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px;
    border: 0.8px solid var(--line, rgba(67, 97, 238, 0.1));
    border-radius: var(--hm-radius);
    background: var(--hm-tint);
}

/* هالة الفريم خلف البطاقة */
.hm-subs__perk::before {
    content: '';
    position: absolute;
    top: -70px;
    inset-inline-start: -40px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    background: var(--glow, var(--hm-accent));
    opacity: 0.16;
    filter: blur(54px);
}

.hm-subs__perk-icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #eef2ff;
    color: #2b0081;
}

.hm-subs__perk > div {
    position: relative;
}

.hm-subs__perk b {
    display: block;
    margin-bottom: 8px;
    color: var(--hm-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
}

.hm-subs__perk p {
    margin: 0;
    color: #191919;
    font-size: 13px;
    line-height: 21px;
}

/* ② بطاقات المميزات + بطاقة الأدوات */
.hm-subs__features {
    padding-block: 64px 32px;
}

.hm-subs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hm-subs__card {
    display: flex;
    flex-direction: column;
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius-lg);
    background: #fff;
    box-shadow: 0 20px 60px rgba(67, 97, 238, 0.1);
    overflow: hidden;
}

.hm-subs__card--wide {
    margin-top: 24px;
}

.hm-subs__card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(67, 97, 238, 0.1);
    background: var(--hm-tint);
    color: var(--hm-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.hm-subs__card-head i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    color: #2b0081;
}

.hm-subs__card-body {
    flex: 1 1 auto;
    padding: 20px;
    color: #2b2e8c;
    font-size: 16px;
    line-height: 33px;
}

/* الأدوات الخمس: عمودان — الأيمن أولاً */
.hm-subs__tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hm-subs__tools > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-subs__tool {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--hm-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 23px;
}

.hm-subs__tool span {
    order: 2;
}

.hm-subs__tool i {
    order: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #dcd2f0;
    border-radius: 8px;
    background: #eef2ff;
    color: #2b0081;
}

/* ③ القسم الداكن — نقش نقاط فوق التدرّج */
.hm-subs__ai {
    background:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px) 0 0 / 28px 28px,
        var(--hm-dark);
}

.hm-subs__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

.hm-subs__panel {
    position: relative;
    padding: 70px 20px 20px;
    border: 1px solid rgba(174, 174, 234, 0.4);
    border-radius: var(--hm-radius-lg);
    background: #f6f7ff;
    box-shadow: 0 4px 22px rgba(67, 97, 238, 0.16);
}

.hm-subs__panel--wide {
    margin-top: 32px;
}

/* لسان الزاوية العلوية اليمنى (r: 0 0 0 24 في الفريم) */
.hm-subs__tab {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-start-end-radius: var(--hm-radius-lg);
    border-end-start-radius: var(--hm-radius-lg);
    background: #ebebff;
    color: var(--hm-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 15px;
}

.hm-subs__tab--grad {
    background: linear-gradient(to left, var(--hm-accent), var(--hm-accent-deep));
    color: #fff;
}

.hm-subs__panel-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hm-subs__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-subs__points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--hm-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 37px;
}

/* علامة الصح الزرقاء المصمتة قبل كل بند */
.hm-subs__points li::before {
    content: '';
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: 7px;
    border-radius: 999px;
    /* دائرة الصح في الفريم كحلية داكنة #0d0f52 وعلامتها بيضاء */
    background: var(--hm-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3Cpath d='M7.5 12.4l3 3 6-6.4' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3Cpath d='M7.5 12.4l3 3 6-6.4' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hm-subs__cta {
    margin-top: 48px;
}

@media (max-width: 1100px) {
    .hm-subs__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .hm-subs__intro,
    .hm-subs__panels { grid-template-columns: 1fr; }
    .hm-subs__panel--wide { margin-top: 24px; }
}

@media (max-width: 620px) {
    .hm-subs__grid { grid-template-columns: 1fr; }
    .hm-subs__tools { grid-template-columns: 1fr; }
    .hm-subs__tool,
    .hm-subs__points li { font-size: 16px; line-height: 28px; }
    .hm-subs__tab { font-size: 13px; padding: 12px; }
    .hm-subs__panel { padding-top: 62px; }
    .hm-subs__card-body { font-size: 14px; line-height: 26px; }
}

/* شريط نجاح إرسال نموذج التواصل (بديل صفحة النجاح المحذوفة) */
.hm-form__ok {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 16px;
    border: 1px solid #9ae696;
    border-radius: var(--hm-radius);
    background: #f5fff4;
    color: #027a48;
    font-size: 14px;
    font-weight: 700;
}

/* ==========================================================================
   شريحة «الفرد» — إضافات فقط (2026-09-08)
   الصفحة واحدة وأصلها المؤسسة؛ مبدّل الترويسة يبدّل الأقسام في مكانها.
   لا شيء هنا يمسّ قاعدة قائمة، فمظهر المؤسسة كما كان حرفاً بحرف.
   القيم مستخرَجة من فريم «landing page - الفرد» (884:28696) عبر REST API.
   الخط يبقى Greta Arabic — فيجما يستخدم Cairo ولم يُعتمد (قرار سابق).
   ========================================================================== */

/* ------------------------------------ مبدّل الشريحة في الترويسة ---- */
/* فريم 2147227725 (في فريمَي المؤسسة والفرد): كبسولة بحدّ رمادي ومبدّل أنيق وسلس.
   ترتيبه البصري «مؤسسة» ثم «فرد» من اليسار — وهو عكس تدفّق الصفحة، فتُقلب
   الحاوية وحدها إلى ltr بدل عكس ترتيب الـDOM (الذي يقرأه قارئ الشاشة
   بالترتيب المنطقي). نجمة كل لسان وشارته الرقمية visible:false في الفريم. */
.hm-seg {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #d9d9d9;
    border-radius: 33px;
    background: #fff;
    direction: ltr;
}

.hm-seg__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: transparent;
    color: #808080;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hm-seg__tab:hover {
    color: var(--hm-ink);
}

.hm-seg__tab.is-active {
    border-color: #babeff;
    background: #ebecff;
    color: var(--hm-accent);
    font-weight: 600;
}

.hm-seg__tab.is-active span {
    color: var(--hm-accent);
}

/* --------------------------------------------- هيرو الفرد (884:30447) ---- */
/* الفريم: حاشية 80 رأسياً، عمود نصي 647 محاذى يميناً، ورسم 516×486 يساراً. بطاقات
   المؤسسة العائمة تُخفى تحت هذه الشريحة لأن الفريم يرسم مجموعته الخاصة (Group 5)،
   والتوهّجات الثلاثة تتبدّل مواضعها: بنفسجي أعلى اليمين، أصفر أسفل اليمين، أزرق أعلى اليسار. */
.hm-hero--individual {
    padding-block: 80px;
    background:
        radial-gradient(28% 45% at 92% 12%, rgba(186, 190, 255, 0.55), transparent 70%),
        radial-gradient(26% 42% at 96% 92%, rgba(254, 200, 75, 0.22), transparent 70%),
        radial-gradient(30% 48% at 4% 6%, rgba(51, 51, 255, 0.16), transparent 70%),
        var(--hm-page);
}

.hm-hero--individual .hm-float {
    display: none;
}

.hm-ihero {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

/* RTL: flex-start على المحور العرضي = اليمين */
.hm-ihero__copy {
    flex: 0 1 647px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    text-align: right;
}

.hm-ihero__text {
    align-items: flex-start;
}

.hm-ihero__copy .hm-hero__lede {
    max-width: none;
    margin: 0;
}

.hm-ihero__cta {
    justify-content: flex-start;
}

.hm-ihero__art {
    position: relative;
    flex: 0 0 516px;
    height: 486px;
}

/* الأقواس الثلاثة: دوائر بحدّ 2px #d6d6ff بشفافية 34% مراكزها خارج الرسم يساراً وأسفل؛
   .hm-hero يقصّ ما يتجاوز القسم كما في الفريم */
.hm-ihero__arc {
    position: absolute;
    border: 2px solid #d6d6ff;
    border-radius: 50%;
    opacity: 0.34;
    pointer-events: none;
}

.hm-ihero__arc--1 { left: -329px; top: -111px; width: 1004px; height: 1020px; }
.hm-ihero__arc--2 { left: -330px; top: 59px; width: 781px; height: 796px; }
.hm-ihero__arc--3 { left: -394px; top: 179px; width: 709px; height: 708px; }

/* البطاقات: #fafcff r16 ظل 0 0 24 بشفافية 5%، حاشية 8/24، النص محاذى يميناً.
   الميل والحركة من نظام المؤسسة نفسه (@keyframes hm-float + --hm-tilt) بزوايا الفريم
   الحقيقية (rotation في الـJSON بالراديان): 10.05° و-8.89° و3.21°. المقاسات هي size
   الحقيقي لا absoluteBoundingBox — الأخير المربّع المحيط بالبطاقة بعد ميلها، فبناؤه
   ثم إمالته يعطي بطاقة أكبر من الفريم. الميل مُعلن أيضاً خارج الأنيميشن ليبقى
   حين تُلغى الحركة. */
.hm-ihero__card {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 8px 24px;
    background: #fafcff;
    border-radius: 16px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.05);
    text-align: right;
    transform: rotate(var(--hm-tilt, 0deg));
    animation: hm-float 7s ease-in-out infinite;
    will-change: transform;
}

.hm-ihero__label {
    color: #8c8c8c;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.hm-ihero__accent {
    color: var(--hm-accent);
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
}

/* «مؤشرات استباقية» 271×182 r8: سبعة أعمدة رمادية والسادس متدرّج أزرق، ترتيبها من اليسار */
.hm-ihero__card--chart {
    left: 255px;
    top: 21px;
    width: 251px;
    height: 141px;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    align-items: stretch;
    justify-content: flex-start;
    --hm-tilt: 10deg;
    animation-duration: 6.5s;
    animation-delay: -1s;
}

.hm-ihero__card--chart .hm-ihero__label {
    line-height: 21px;
}

.hm-ihero__bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 76px;
    direction: ltr;
}

.hm-ihero__bars i {
    flex: 1 1 0;
    border-radius: 4px;
    background: #e9e9e9;
}

.hm-ihero__bars i.is-hot {
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

.hm-ihero__card--quality {
    left: 5px;
    top: 234px;
    width: 238px;
    height: 76px;
    --hm-tilt: -8.9deg;
    animation-duration: 7.5s;
}

.hm-ihero__card--score {
    left: 245px;
    top: 380px;
    width: 222px;
    height: 100px;
    --hm-tilt: 3.2deg;
    animation-duration: 8.5s;
    animation-delay: -2s;
}

/* ارتفاع البطاقة 100 وحاشيتها 8: العنوان والدرجة والشريط يتقاسمون 84 بالضبط */
.hm-ihero__card--score .hm-ihero__label {
    line-height: 26px;
}

/* «87» زرقاء 32px يمين «100/» الرمادية 13px؛ الـ<i> معزول LTR فتبقى الشرطة ملاصقة للـ87 */
.hm-ihero__score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.hm-ihero__score b {
    color: var(--hm-accent);
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
}

.hm-ihero__score i {
    color: #b0b0b0;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    direction: ltr;
    unicode-bidi: isolate;
}

/* شريط التقدم: مسار 174×14 #d9d9d9 وتعبئة 152×12 ملاصقة لطرف اليمين */
.hm-ihero__bar {
    display: block;
    width: 174px;
    height: 14px;
    margin-top: 4px;
    border-radius: 999px;
    background: #d9d9d9;
    overflow: hidden;
}

.hm-ihero__bar b {
    display: block;
    width: 152px;
    height: 12px;
    margin: 1px;
    border-radius: 999px;
    background: var(--hm-accent);
}

/* الفقاعات الثلاث بمواضع الفريم داخل مجموعة الرسم (أصل المجموعة 64,80) */
/* الفقاعات تطفو بالحركة نفسها بلا ميل، بمدد مختلفة حتى لا تتحرّك الثلاث معاً */
.hm-ihero__bubble {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: hm-float 7s ease-in-out infinite;
    will-change: transform;
}

.hm-ihero__bubble--burst {
    animation-duration: 5.8s;
    animation-delay: -1.5s;
    left: 173px;
    top: -29px;
    width: 44px;
    height: 44px;
    background: #e4dbff;
    border: 1px solid #ddd2ff;
    box-shadow: 0 4px 20px rgba(132, 94, 247, 0.1);
}

.hm-ihero__bubble--sky {
    animation-duration: 6.8s;
    animation-delay: -3s;
    left: -26px;
    top: 103px;
    width: 56px;
    height: 56px;
    background: #dff4fd;
    border: 1px solid #dbf3fe;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.1);
}

.hm-ihero__bubble--amber {
    animation-duration: 6.2s;
    animation-delay: -0.6s;
    left: 537px;
    top: 485px;
    width: 44px;
    height: 44px;
    background: #ffefda;
    border: 1px solid #ffe3bf;
    box-shadow: 0 4px 20px rgba(247, 144, 9, 0.1);
}

/* ------------------------------------------------- «موثوقية مسبقة» ---- */
/* الفريم: النص يميناً (591×360) والبطاقة المرئية يساراً (669×476) */
.hm-trust__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.hm-trust__copy {
    flex: 0 1 591px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 28px 32px;
    background: var(--hm-surface);
    border-radius: var(--hm-radius-lg);
}

.hm-trust__text {
    margin: 0;
    color: var(--hm-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

.hm-trust__visual {
    flex: 0 1 669px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 56px;
    background: var(--hm-tint);
    border: 0.8px solid rgba(67, 97, 238, 0.1);
    border-radius: var(--hm-radius-lg);
}

/* الأيقونة: مربّع متدرّج r29 بظل أزرق، وخلفه هالة #eef2ff بشفافية 30% */
.hm-trust__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    flex: 0 0 auto;
    border-radius: 29px;
    background: linear-gradient(135deg, var(--hm-accent), var(--hm-accent-deep));
    box-shadow: 0 12px 35px rgba(51, 51, 255, 0.35);
    color: #fff;
}

.hm-trust__icon::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 167px;
    height: 167px;
    border-radius: 50%;
    background: #eef2ff;
    opacity: 0.3;
}

.hm-trust__icon svg {
    position: relative;
}

.hm-trust__rows {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-trust__rows li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: #fff;
    border: 0.8px solid #eaecff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(51, 51, 255, 0.05);
    color: var(--hm-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
}

/* الفريم: النص يملأ ما تبقّى ويُحاذى لليمين، وصندوق الأيقونة في طرف الصف */
.hm-trust__rows li > span {
    flex: 1 1 auto;
    text-align: right;
}

.hm-trust__rows i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef2ff;
    color: var(--hm-accent);
    font-size: 13px;
    font-style: normal;
}

.hm-trust__stats {
    width: 100%;
    display: flex;
    gap: 8px;
}

.hm-trust__stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 8px;
    background: var(--hm-page);
    border: 0.8px solid #d8daff;
    border-radius: 12px;
    text-align: center;
}

.hm-trust__stat b {
    /* «12+» تنقلب إلى «+12» بلا عزل، كما في .hm-stat__num. lh 15 هو ما يعطي المربّع ارتفاع الفريم 92 */
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--hm-accent);
    font-size: 24px;
    font-weight: 900;
    line-height: 15px;
}

.hm-trust__stat span {
    color: var(--hm-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

/* -------------------------------------------- الباقة الواحدة (الفرد) ---- */
/* الفريم 885:41385: بطاقة 800 على بنية .hm-plan نفسها — تعبئة #f4f5ff بلا حدّ متدرّج،
   شارة «مجاناً» بحواف 0/0/0/24 (20px، حاشية 16)، رأس 24px في صف 52، صندوق أبيض
   بأربعة صفوف 16px بدوائر #2b0081 ممتلئة (فجوة 24)، وزر 56 بظل 0 10 35 */
.hm-trial {
    display: flex;
    justify-content: center;
}

.hm-plan--trial {
    width: 800px;
    max-width: 100%;
    gap: 12px;
    background: var(--hm-tint);
}

.hm-plan__flag--trial {
    gap: 8px;
    padding: 16px;
    font-size: 20px;
    line-height: 24px;
}

.hm-plan__head--trial {
    padding: 16px 20px;
    font-size: 24px;
    line-height: 20px;
}

.hm-trial__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-trial__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hm-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
}

.hm-trial__list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2b0081;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
}

.hm-trial__cta {
    margin-top: 20px;
    min-height: 56px;
    box-shadow: 0 10px 35px rgba(67, 97, 238, 0.35);
}

@media (max-width: 860px) {
    .hm-trust__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .hm-trust__copy,
    .hm-trust__visual {
        flex: 1 1 auto;
        padding-inline: 20px;
    }
}

@media (max-width: 620px) {
    .hm-seg {
        padding: 3px;
    }

    .hm-seg__tab {
        min-width: 52px;
        padding: 4px 10px;
        font-size: 11px;
    }

    .hm-trust__stats {
        flex-wrap: wrap;
    }

    .hm-trust__stat {
        flex: 1 1 calc(50% - 4px);
    }

    .hm-plan__flag--trial {
        padding: 12px;
        font-size: 16px;
    }

    .hm-plan__head--trial {
        font-size: 20px;
    }
}

/* دون 1240px لا يتسع العمودان (647 + 516 + 48) داخل .hm-wrap: النص يتوسّط والرسم يُخفى */
@media (max-width: 1240px) {
    .hm-ihero {
        flex-direction: column;
        align-items: center;
    }

    .hm-ihero__copy {
        flex-basis: auto;
        align-items: center;
        text-align: center;
    }

    .hm-ihero__text {
        align-items: center;
    }

    .hm-ihero__cta {
        justify-content: center;
    }

    .hm-ihero__art {
        display: none;
    }
}

/* بلا حركة: تبقى البطاقات مائلة بميل الفريم وتتوقّف عن الطفو فقط.
   الكتلة الأصلية لا تُمسّ — هذه إضافة للأصناف الجديدة وحدها. */
@media (prefers-reduced-motion: reduce) {
    .hm-ihero__card,
    .hm-ihero__bubble {
        animation: none;
    }
}

/* الترويسة بين 861 و960px: الروابط ما زالت ظاهرة والمبدّل (155px مع فجوته) يكسر الصف إلى
   سطرين. يُخفى في هذه الفئة وحدها فتعود ترويسة المؤسسة كما كانت قبل المبدّل حرفاً بحرف. */
@media (min-width: 861px) and (max-width: 960px) {
    .hm-seg {
        display: none;
    }
}

/* Mobile pass (2026-09-10): on a phone this overlay is a BOTTOM SHEET, the same
   presentation as the dashboard's report sheets (owner request) — full width, rising from
   the bottom edge, instead of a card floating 12px inside the screen. For the report
   variant (sandbox/sample, sandbox/tool: an iframe on /try/sample/{slug}/{tool}?embed=1)
   the frame fills the sheet, so the report scrolls inside it with the full phone width;
   the embedded report itself keeps one level of card (report.css mobile pass). */
@media (max-width: 640px) {
    /* the layer itself never scrolls (a drag on it moved the whole sheet); the chooser
       scrolls inside its box, the report inside its iframe */
    .hm-overlay { padding: 12px 0 0; align-items: flex-end; overflow: hidden; overscroll-behavior: none; touch-action: none; }
    .hm-overlay__box {
        margin: auto 0 0;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
        max-height: 100%;
        overflow-y: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        animation: hm-sheet-up .28s cubic-bezier(.2, .8, .2, 1);
    }
    .hm-overlay__head { padding: 14px 16px; }
    /* report variant: ONE scroller. The box used to scroll too (its fixed-height frame +
       head overshot the cap by a few px), which painted a second scrollbar beside the
       report's own. The box is now a full-height column that clips; the frame takes the
       rest, and the sheet document inside carries its own dashboard header. */
    .hm-overlay__box--report { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
    .hm-overlay__box--report > .hm-overlay__head { display: none; }
    /* padding 0: the chooser's `.hm-overlay__body { padding-bottom: 24px }` (≤640 block above)
       outranked the report variant's reset and left a white strip under the sheet's footer */
    .hm-overlay__box--report .hm-overlay__body--report { flex: 1; min-height: 0; display: flex; padding: 0; }
    .hm-overlay__box--report .hm-overlay__frame { height: auto; flex: 1; }
}
@keyframes hm-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hm-overlay__box { animation: none; }
}